diff --git a/.github/assets/theme-dark.webp b/.github/assets/theme-dark.webp
new file mode 100644
index 000000000..ae7a55cb4
Binary files /dev/null and b/.github/assets/theme-dark.webp differ
diff --git a/.github/assets/theme-light.webp b/.github/assets/theme-light.webp
new file mode 100644
index 000000000..a4e46f12a
Binary files /dev/null and b/.github/assets/theme-light.webp differ
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 000000000..bdcef788f
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,48 @@
+name: Deploy docs
+
+on:
+  push:
+    branches: [shadcn-theme]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: 24
+          cache: yarn
+      - uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5.0.0
+      - run: yarn install --frozen-lockfile --ignore-scripts
+      - run: yarn workspace @aeei/docusaurus-theme build
+      - run: yarn workspace @aeei/docs-starter build
+        env:
+          ALGOLIA_APP_ID: ${{ vars.ALGOLIA_APP_ID }}
+          ALGOLIA_SEARCH_API_KEY: ${{ vars.ALGOLIA_SEARCH_API_KEY }}
+          ALGOLIA_INDEX_NAME: ${{ vars.ALGOLIA_INDEX_NAME }}
+      - uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1
+        with:
+          path: examples/docs-starter/build
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5
diff --git a/.github/workflows/theme-ci.yml b/.github/workflows/theme-ci.yml
new file mode 100644
index 000000000..80c092436
--- /dev/null
+++ b/.github/workflows/theme-ci.yml
@@ -0,0 +1,54 @@
+name: Theme CI
+
+on:
+  pull_request:
+  push:
+    branches: [shadcn-theme]
+
+permissions:
+  contents: read
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: 24
+          cache: yarn
+      - run: yarn install --frozen-lockfile --ignore-scripts
+      - run: yarn workspace @aeei/docusaurus-theme build
+      - name: Theme contracts
+        run: >-
+          NODE_OPTIONS=--experimental-vm-modules yarn jest
+          packages/docusaurus-theme/src/package-contract.test.ts
+          packages/docusaurus-theme/src/theme/base-ui-contract.test.ts
+          packages/docusaurus-theme/src/theme/icon-contract.test.ts
+          packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts
+          packages/docusaurus-theme/src/theme/paginator-contract.test.ts
+          packages/docusaurus-theme/src/theme/prose-contract.test.ts
+          packages/docusaurus-theme/src/theme/registry-source-contract.test.ts
+          packages/docusaurus-theme/src/theme/sidebar-contract.test.ts
+          packages/docusaurus-theme/src/theme/style-contract.test.ts
+          examples/docs-starter/config-contract.test.ts
+          --runInBand
+      - run: yarn workspace @aeei/docs-starter build
+      - name: Package contents
+        working-directory: packages/docusaurus-theme
+        run: npm pack --dry-run
+      - run: npx playwright install --with-deps chromium
+      - name: Browser matrix
+        run: >-
+          yarn start-server-and-test
+          "yarn workspace @aeei/docs-starter serve --port 3001 --no-open"
+          http://127.0.0.1:3001/docusaurus-theme/
+          "node scripts/audit-docs-starter.cjs && node scripts/audit-critical-ui-relations.cjs && PLAYWRIGHT_BASE_URL=http://127.0.0.1:3001/docusaurus-theme/ yarn test:e2e:theme"
+      - name: Upload browser failures
+        if: failure()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: docs-starter-browser-failures
+          path: artifacts/docs-starter
+          if-no-files-found: ignore
diff --git a/.gitignore b/.gitignore
index dbe1d8d34..b35eb37f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ build
 dist
 lib
 lib-next
+lib-theme
 
 # Dependencies
 /node_modules
@@ -147,3 +148,8 @@ demo/**/*.json
 
 # Playwright
 visual_diffs/
+test-results/
+artifacts/
+
+# Local pi session state
+.pi/goals/
diff --git a/.pi/prompts/opsx-apply.md b/.pi/prompts/opsx-apply.md
new file mode 100644
index 000000000..11502a191
--- /dev/null
+++ b/.pi/prompts/opsx-apply.md
@@ -0,0 +1,156 @@
+---
+description: Implement tasks from an OpenSpec change (Experimental)
+---
+
+Implement tasks from an OpenSpec change.
+
+**Input**: Optionally specify a change name (e.g., `/opsx-apply add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+**Provided arguments**: $@
+
+**Steps**
+
+1. **Select the change**
+
+   If a name is provided, use it. Otherwise:
+   - Infer from conversation context if the user mentioned a change
+   - Auto-select if only one active change exists
+   - If ambiguous, run `openspec list --json` to get available changes and use the **AskUserQuestion tool** to let the user select
+
+   Always announce: "Using change: <name>" and how to override (e.g., `/opsx-apply <other>`).
+
+2. **Check status to understand the schema**
+
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used (e.g., "spec-driven")
+   - `planningHome`, `changeRoot`, and `actionContext`: planning scope and edit constraints
+   - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
+
+3. **Get apply instructions**
+
+   ```bash
+   openspec instructions apply --change "<name>" --json
+   ```
+
+   This returns:
+   - `contextFiles`: artifact ID -> array of concrete file paths (varies by schema)
+   - Progress (total, complete, remaining)
+   - Task list with status
+   - Dynamic instruction based on current state
+
+   **Handle states:**
+   - If `state: "blocked"` (missing artifacts): show message, suggest using `/opsx-continue`
+   - If `state: "all_done"`: congratulate, suggest archive
+   - Otherwise: proceed to implementation
+
+   **Workspace guard:** If status JSON reports `actionContext.mode: "workspace-planning"` and `allowedEditRoots` is empty, explain that full workspace apply is not supported in this slice. Treat linked repos and folders as read-only context, ask the user to select an affected area through an explicit implementation workflow, and STOP before editing files.
+
+4. **Read context files**
+
+   Read every file path listed under `contextFiles` from the apply instructions output.
+   The files depend on the schema being used:
+   - **spec-driven**: proposal, specs, design, tasks
+   - Other schemas: follow the contextFiles from CLI output
+
+5. **Show current progress**
+
+   Display:
+   - Schema being used
+   - Progress: "N/M tasks complete"
+   - Remaining tasks overview
+   - Dynamic instruction from CLI
+
+6. **Implement tasks (loop until done or blocked)**
+
+   For each pending task:
+   - Show which task is being worked on
+   - Make the code changes required
+   - Keep changes minimal and focused
+   - Mark task complete in the tasks file: `- [ ]` → `- [x]`
+   - Continue to next task
+
+   **Pause if:**
+   - Task is unclear → ask for clarification
+   - Implementation reveals a design issue → suggest updating artifacts
+   - Error or blocker encountered → report and wait for guidance
+   - User interrupts
+
+7. **On completion or pause, show status**
+
+   Display:
+   - Tasks completed this session
+   - Overall progress: "N/M tasks complete"
+   - If all done: suggest archive
+   - If paused: explain why and wait for guidance
+
+**Output During Implementation**
+
+```
+## Implementing: <change-name> (schema: <schema-name>)
+
+Working on task 3/7: <task description>
+[...implementation happening...]
+✓ Task complete
+
+Working on task 4/7: <task description>
+[...implementation happening...]
+✓ Task complete
+```
+
+**Output On Completion**
+
+```
+## Implementation Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Progress:** 7/7 tasks complete ✓
+
+### Completed This Session
+- [x] Task 1
+- [x] Task 2
+...
+
+All tasks complete! You can archive this change with `/opsx-archive`.
+```
+
+**Output On Pause (Issue Encountered)**
+
+```
+## Implementation Paused
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Progress:** 4/7 tasks complete
+
+### Issue Encountered
+<description of the issue>
+
+**Options:**
+1. <option 1>
+2. <option 2>
+3. Other approach
+
+What would you like to do?
+```
+
+**Guardrails**
+
+- Keep going through tasks until done or blocked
+- Always read context files before starting (from the apply instructions output)
+- If task is ambiguous, pause and ask before implementing
+- If implementation reveals issues, pause and suggest artifact updates
+- Keep code changes minimal and scoped to each task
+- Update task checkbox immediately after completing each task
+- Pause on errors, blockers, or unclear requirements - don't guess
+- Use contextFiles from CLI output, don't assume specific file names
+
+**Fluid Workflow Integration**
+
+This skill supports the "actions on a change" model:
+
+- **Can be invoked anytime**: Before all artifacts are done (if tasks exist), after partial implementation, interleaved with other actions
+- **Allows artifact updates**: If implementation reveals design issues, suggest updating artifacts - not phase-locked, work fluidly
diff --git a/.pi/prompts/opsx-archive.md b/.pi/prompts/opsx-archive.md
new file mode 100644
index 000000000..2e4d6c4d7
--- /dev/null
+++ b/.pi/prompts/opsx-archive.md
@@ -0,0 +1,160 @@
+---
+description: Archive a completed change in the experimental workflow
+---
+
+Archive a completed change in the experimental workflow.
+
+**Input**: Optionally specify a change name after `/opsx-archive` (e.g., `/opsx-archive add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+**Provided arguments**: $@
+
+**Steps**
+
+1. **If no change name provided, prompt for selection**
+
+   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
+
+   Show only active changes (not already archived).
+   Include the schema used for each change if available.
+
+   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
+
+2. **Check artifact completion status**
+
+   Run `openspec status --change "<name>" --json` to check artifact completion.
+
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used
+   - `planningHome`, `changeRoot`, `artifactPaths`, and `actionContext`: path and scope context
+   - `artifacts`: List of artifacts with their status (`done` or other)
+
+   If status reports `actionContext.mode: "workspace-planning"`, explain that workspace archive is not supported in this slice and STOP. Do not move workspace changes into repo-local archives or edit linked repos.
+
+   **If any artifacts are not `done`:**
+   - Display warning listing incomplete artifacts
+   - Prompt user for confirmation to continue
+   - Proceed if user confirms
+
+3. **Check task completion status**
+
+   Read the tasks file (typically `tasks.md`) to check for incomplete tasks.
+
+   Count tasks marked with `- [ ]` (incomplete) vs `- [x]` (complete).
+
+   **If incomplete tasks found:**
+   - Display warning showing count of incomplete tasks
+   - Prompt user for confirmation to continue
+   - Proceed if user confirms
+
+   **If no tasks file exists:** Proceed without task-related warning.
+
+4. **Assess delta spec sync state**
+
+   Use `artifactPaths.specs.existingOutputPaths` from status JSON to check for delta specs. If none exist, proceed without sync prompt.
+
+   **If delta specs exist:**
+   - Compare each delta spec with its corresponding main spec at `openspec/specs/<capability>/spec.md`
+   - Determine what changes would be applied (adds, modifications, removals, renames)
+   - Show a combined summary before prompting
+
+   **Prompt options:**
+   - If changes needed: "Sync now (recommended)", "Archive without syncing"
+   - If already synced: "Archive now", "Sync anyway", "Cancel"
+
+   If user chooses sync, use Task tool (subagent_type: "general-purpose", prompt: "Use Skill tool to invoke openspec-sync-specs for change '<name>'. Delta spec analysis: <include the analyzed delta spec summary>"). Proceed to archive regardless of choice.
+
+5. **Perform the archive**
+
+   Create an `archive` directory under `planningHome.changesDir` if it doesn't exist:
+
+   ```bash
+   mkdir -p "<planningHome.changesDir>/archive"
+   ```
+
+   Generate target name using current date: `YYYY-MM-DD-<change-name>`
+
+   **Check if target already exists:**
+   - If yes: Fail with error, suggest renaming existing archive or using different date
+   - If no: Move `changeRoot` to the archive directory
+
+   ```bash
+   mv "<changeRoot>" "<planningHome.changesDir>/archive/YYYY-MM-DD-<name>"
+   ```
+
+6. **Display summary**
+
+   Show archive completion summary including:
+   - Change name
+   - Schema that was used
+   - Archive location
+   - Spec sync status (synced / sync skipped / no delta specs)
+   - Note about any warnings (incomplete artifacts/tasks)
+
+**Output On Success**
+
+```
+## Archive Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Archived to:** the archive path derived from `planningHome.changesDir`/YYYY-MM-DD-<name>/
+**Specs:** ✓ Synced to main specs
+
+All artifacts complete. All tasks complete.
+```
+
+**Output On Success (No Delta Specs)**
+
+```
+## Archive Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Archived to:** the archive path derived from `planningHome.changesDir`/YYYY-MM-DD-<name>/
+**Specs:** No delta specs
+
+All artifacts complete. All tasks complete.
+```
+
+**Output On Success With Warnings**
+
+```
+## Archive Complete (with warnings)
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Archived to:** the archive path derived from `planningHome.changesDir`/YYYY-MM-DD-<name>/
+**Specs:** Sync skipped (user chose to skip)
+
+**Warnings:**
+- Archived with 2 incomplete artifacts
+- Archived with 3 incomplete tasks
+- Delta spec sync was skipped (user chose to skip)
+
+Review the archive if this was not intentional.
+```
+
+**Output On Error (Archive Exists)**
+
+```
+## Archive Failed
+
+**Change:** <change-name>
+**Target:** the archive path derived from `planningHome.changesDir`/YYYY-MM-DD-<name>/
+
+Target archive directory already exists.
+
+**Options:**
+1. Rename the existing archive
+2. Delete the existing archive if it's a duplicate
+3. Wait until a different date to archive
+```
+
+**Guardrails**
+
+- Always prompt for change selection if not provided
+- Use artifact graph (openspec status --json) for completion checking
+- Don't block archive on warnings - just inform and confirm
+- Preserve .openspec.yaml when moving to archive (it moves with the directory)
+- Show clear summary of what happened
+- If sync is requested, use the Skill tool to invoke `openspec-sync-specs` (agent-driven)
+- If delta specs exist, always run the sync assessment and show the combined summary before prompting
diff --git a/.pi/prompts/opsx-explore.md b/.pi/prompts/opsx-explore.md
new file mode 100644
index 000000000..e08427b78
--- /dev/null
+++ b/.pi/prompts/opsx-explore.md
@@ -0,0 +1,178 @@
+---
+description: "Enter explore mode - think through ideas, investigate problems, clarify requirements"
+---
+
+Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
+
+**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, and investigate the codebase, but you must NEVER write code or implement features. If the user asks you to implement something, remind them to exit explore mode first and create a change proposal. You MAY create OpenSpec artifacts (proposals, designs, specs) if the user asks—that's capturing thinking, not implementing.
+
+**This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
+
+**Input**: The argument after `/opsx-explore` is whatever the user wants to think about. Could be:
+**Provided arguments**: $@
+
+- A vague idea: "real-time collaboration"
+- A specific problem: "the auth system is getting unwieldy"
+- A change name: "add-dark-mode" (to explore in context of that change)
+- A comparison: "postgres vs sqlite for this"
+- Nothing (just enter explore mode)
+
+---
+
+## The Stance
+
+- **Curious, not prescriptive** - Ask questions that emerge naturally, don't follow a script
+- **Open threads, not interrogations** - Surface multiple interesting directions and let the user follow what resonates. Don't funnel them through a single path of questions.
+- **Visual** - Use ASCII diagrams liberally when they'd help clarify thinking
+- **Adaptive** - Follow interesting threads, pivot when new information emerges
+- **Patient** - Don't rush to conclusions, let the shape of the problem emerge
+- **Grounded** - Explore the actual codebase when relevant, don't just theorize
+
+---
+
+## What You Might Do
+
+Depending on what the user brings, you might:
+
+**Explore the problem space**
+
+- Ask clarifying questions that emerge from what they said
+- Challenge assumptions
+- Reframe the problem
+- Find analogies
+
+**Investigate the codebase**
+
+- Map existing architecture relevant to the discussion
+- Find integration points
+- Identify patterns already in use
+- Surface hidden complexity
+
+**Compare options**
+
+- Brainstorm multiple approaches
+- Build comparison tables
+- Sketch tradeoffs
+- Recommend a path (if asked)
+
+**Visualize**
+
+```
+┌─────────────────────────────────────────┐
+│     Use ASCII diagrams liberally        │
+├─────────────────────────────────────────┤
+│                                         │
+│      ┌────────┐         ┌────────┐      │
+│      │ State  │────────▶│ State  │      │
+│      │   A    │         │   B    │      │
+│      └────────┘         └────────┘      │
+│                                         │
+│   System diagrams, state machines,      │
+│   data flows, architecture sketches,    │
+│   dependency graphs, comparison tables  │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+**Surface risks and unknowns**
+
+- Identify what could go wrong
+- Find gaps in understanding
+- Suggest spikes or investigations
+
+---
+
+## OpenSpec Awareness
+
+You have full context of the OpenSpec system. Use it naturally, don't force it.
+
+### Check for context
+
+At the start, quickly check what exists:
+
+```bash
+openspec list --json
+```
+
+This tells you:
+
+- If there are active changes
+- Their names, schemas, and status
+- What the user might be working on
+
+If the user mentioned a specific change name, read its artifacts for context.
+
+### When no change exists
+
+Think freely. When insights crystallize, you might offer:
+
+- "This feels solid enough to start a change. Want me to create a proposal?"
+- Or keep exploring - no pressure to formalize
+
+### When a change exists
+
+If the user mentions a change or you detect one is relevant:
+
+1. **Resolve and read existing artifacts for context**
+   - Run `openspec status --change "<name>" --json`.
+   - Use `changeRoot`, `artifactPaths`, and `actionContext` from the status JSON.
+   - Read existing files from `artifactPaths.<artifact>.existingOutputPaths`.
+
+2. **Reference them naturally in conversation**
+   - "Your design mentions using Redis, but we just realized SQLite fits better..."
+   - "The proposal scopes this to premium users, but we're now thinking everyone..."
+
+3. **Offer to capture when decisions are made**
+
+   | Insight Type               | Where to Capture             |
+   | -------------------------- | ---------------------------- |
+   | New requirement discovered | `specs/<capability>/spec.md` |
+   | Requirement changed        | `specs/<capability>/spec.md` |
+   | Design decision made       | `design.md`                  |
+   | Scope changed              | `proposal.md`                |
+   | New work identified        | `tasks.md`                   |
+   | Assumption invalidated     | Relevant artifact            |
+
+   Example offers:
+   - "That's a design decision. Capture it in design.md?"
+   - "This is a new requirement. Add it to specs?"
+   - "This changes scope. Update the proposal?"
+
+4. **The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
+
+---
+
+## What You Don't Have To Do
+
+- Follow a script
+- Ask the same questions every time
+- Produce a specific artifact
+- Reach a conclusion
+- Stay on topic if a tangent is valuable
+- Be brief (this is thinking time)
+
+---
+
+## Ending Discovery
+
+There's no required ending. Discovery might:
+
+- **Flow into a proposal**: "Ready to start? I can create a change proposal."
+- **Result in artifact updates**: "Updated design.md with these decisions"
+- **Just provide clarity**: User has what they need, moves on
+- **Continue later**: "We can pick this up anytime"
+
+When things crystallize, you might offer a summary - but it's optional. Sometimes the thinking IS the value.
+
+---
+
+## Guardrails
+
+- **Don't implement** - Never write code or implement features. Creating OpenSpec artifacts is fine, writing application code is not.
+- **Don't fake understanding** - If something is unclear, dig deeper
+- **Don't rush** - Discovery is thinking time, not task time
+- **Don't force structure** - Let patterns emerge naturally
+- **Don't auto-capture** - Offer to save insights, don't just do it
+- **Do visualize** - A good diagram is worth many paragraphs
+- **Do explore the codebase** - Ground discussions in reality
+- **Do question assumptions** - Including the user's and your own
diff --git a/.pi/prompts/opsx-propose.md b/.pi/prompts/opsx-propose.md
new file mode 100644
index 000000000..9b3d96ae4
--- /dev/null
+++ b/.pi/prompts/opsx-propose.md
@@ -0,0 +1,113 @@
+---
+description: Propose a new change - create it and generate all artifacts in one step
+---
+
+Propose a new change - create the change and generate all artifacts in one step.
+
+I'll create a change with artifacts:
+
+- proposal.md (what & why)
+- design.md (how)
+- tasks.md (implementation steps)
+
+When ready to implement, run /opsx-apply
+
+---
+
+**Input**: The argument after `/opsx-propose` is the change name (kebab-case), OR a description of what the user wants to build.
+**Provided arguments**: $@
+
+**Steps**
+
+1. **If no input provided, ask what they want to build**
+
+   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+
+   > "What change do you want to work on? Describe what you want to build or fix."
+
+   From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
+
+   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
+
+2. **Create the change directory**
+
+   ```bash
+   openspec new change "<name>"
+   ```
+
+   This creates a scaffolded change in the planning home resolved by the CLI with `.openspec.yaml`.
+
+3. **Get the artifact build order**
+
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+
+   Parse the JSON to get:
+   - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
+   - `artifacts`: list of all artifacts with their status and dependencies
+   - `planningHome`, `changeRoot`, `artifactPaths`, and `actionContext`: path and scope context. Use these instead of assuming repo-local paths.
+
+4. **Create artifacts in sequence until apply-ready**
+
+   Use the **TodoWrite tool** to track progress through the artifacts.
+
+   Loop through artifacts in dependency order (artifacts with no pending dependencies first):
+
+   a. **For each artifact that is `ready` (dependencies satisfied)**:
+   - Get instructions:
+     ```bash
+     openspec instructions <artifact-id> --change "<name>" --json
+     ```
+   - The instructions JSON includes:
+     - `context`: Project background (constraints for you - do NOT include in output)
+     - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+     - `template`: The structure to use for your output file
+     - `instruction`: Schema-specific guidance for this artifact type
+     - `resolvedOutputPath`: Resolved path or pattern to write the artifact
+     - `dependencies`: Completed artifacts to read for context
+   - Read any completed dependency files for context
+   - Create the artifact file using `template` as the structure and write it to `resolvedOutputPath`
+   - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+   - Show brief progress: "Created <artifact-id>"
+
+   b. **Continue until all `applyRequires` artifacts are complete**
+   - After creating each artifact, re-run `openspec status --change "<name>" --json`
+   - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+   - Stop when all `applyRequires` artifacts are done
+
+   c. **If an artifact requires user input** (unclear context):
+   - Use **AskUserQuestion tool** to clarify
+   - Then continue with creation
+
+5. **Show final status**
+   ```bash
+   openspec status --change "<name>"
+   ```
+
+**Output**
+
+After completing all artifacts, summarize:
+
+- Change name and location
+- List of artifacts created with brief descriptions
+- What's ready: "All artifacts created! Ready for implementation."
+- Prompt: "Run `/opsx-apply` to start implementing."
+
+**Artifact Creation Guidelines**
+
+- Follow the `instruction` field from `openspec instructions` for each artifact type
+- The schema defines what each artifact should contain - follow it
+- Read dependency artifacts for context before creating new ones
+- Use `template` as the structure for your output file - fill in its sections
+- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
+  - Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
+  - These guide what you write, but should never appear in the output
+
+**Guardrails**
+
+- Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
+- Always read dependency artifacts before creating a new one
+- If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
+- If a change with that name already exists, ask if user wants to continue it or create a new one
+- Verify each artifact file exists after writing before proceeding to next
diff --git a/.pi/prompts/opsx-sync.md b/.pi/prompts/opsx-sync.md
new file mode 100644
index 000000000..3feaefdf4
--- /dev/null
+++ b/.pi/prompts/opsx-sync.md
@@ -0,0 +1,148 @@
+---
+description: Sync delta specs from a change to main specs
+---
+
+Sync delta specs from a change to main specs.
+
+This is an **agent-driven** operation - you will read delta specs and directly edit main specs to apply the changes. This allows intelligent merging (e.g., adding a scenario without copying the entire requirement).
+
+**Input**: Optionally specify a change name after `/opsx-sync` (e.g., `/opsx-sync add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+**Provided arguments**: $@
+
+**Steps**
+
+1. **If no change name provided, prompt for selection**
+
+   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
+
+   Show changes that have delta specs (under `specs/` directory).
+
+   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
+
+2. **Resolve change context**
+
+   Run:
+
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+
+   If status reports `actionContext.mode: "workspace-planning"`, explain that workspace spec sync is not supported in this slice and STOP. Do not fall back to repo-local paths or edit linked repos.
+
+3. **Find delta specs**
+
+   Use `artifactPaths.specs.existingOutputPaths` from the status JSON as the list of delta spec files.
+
+   Each delta spec file contains sections like:
+   - `## ADDED Requirements` - New requirements to add
+   - `## MODIFIED Requirements` - Changes to existing requirements
+   - `## REMOVED Requirements` - Requirements to remove
+   - `## RENAMED Requirements` - Requirements to rename (FROM:/TO: format)
+
+   If no delta specs found, inform user and stop.
+
+4. **For each delta spec, apply changes to main specs**
+
+   For each repo-local capability delta spec path returned by the CLI:
+
+   a. **Read the delta spec** to understand the intended changes
+
+   b. **Read the main spec** at `openspec/specs/<capability>/spec.md` (may not exist yet)
+
+   c. **Apply changes intelligently**:
+
+   **ADDED Requirements:**
+   - If requirement doesn't exist in main spec → add it
+   - If requirement already exists → update it to match (treat as implicit MODIFIED)
+
+   **MODIFIED Requirements:**
+   - Find the requirement in main spec
+   - Apply the changes - this can be:
+     - Adding new scenarios (don't need to copy existing ones)
+     - Modifying existing scenarios
+     - Changing the requirement description
+   - Preserve scenarios/content not mentioned in the delta
+
+   **REMOVED Requirements:**
+   - Remove the entire requirement block from main spec
+
+   **RENAMED Requirements:**
+   - Find the FROM requirement, rename to TO
+
+   d. **Create new main spec** if capability doesn't exist yet:
+   - Create `openspec/specs/<capability>/spec.md`
+   - Add Purpose section (can be brief, mark as TBD)
+   - Add Requirements section with the ADDED requirements
+
+5. **Show summary**
+
+   After applying all changes, summarize:
+   - Which capabilities were updated
+   - What changes were made (requirements added/modified/removed/renamed)
+
+**Delta Spec Format Reference**
+
+```markdown
+## ADDED Requirements
+
+### Requirement: New Feature
+
+The system SHALL do something new.
+
+#### Scenario: Basic case
+
+- **WHEN** user does X
+- **THEN** system does Y
+
+## MODIFIED Requirements
+
+### Requirement: Existing Feature
+
+#### Scenario: New scenario to add
+
+- **WHEN** user does A
+- **THEN** system does B
+
+## REMOVED Requirements
+
+### Requirement: Deprecated Feature
+
+## RENAMED Requirements
+
+- FROM: `### Requirement: Old Name`
+- TO: `### Requirement: New Name`
+```
+
+**Key Principle: Intelligent Merging**
+
+Unlike programmatic merging, you can apply **partial updates**:
+
+- To add a scenario, just include that scenario under MODIFIED - don't copy existing scenarios
+- The delta represents _intent_, not a wholesale replacement
+- Use your judgment to merge changes sensibly
+
+**Output On Success**
+
+```
+## Specs Synced: <change-name>
+
+Updated main specs:
+
+**<capability-1>**:
+- Added requirement: "New Feature"
+- Modified requirement: "Existing Feature" (added 1 scenario)
+
+**<capability-2>**:
+- Created new spec file
+- Added requirement: "Another Feature"
+
+Main specs are now updated. The change remains active - archive when implementation is complete.
+```
+
+**Guardrails**
+
+- Read both delta and main specs before making changes
+- Preserve existing content not mentioned in delta
+- If something is unclear, ask for clarification
+- Show what you're changing as you go
+- The operation should be idempotent - running twice should give same result
diff --git a/.prettierignore b/.prettierignore
index 62d10a69b..a51f66208 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -20,6 +20,11 @@ lib-next
 .docusaurus
 .cache-loader
 
+# Pinned/vendored Base Nova sources and binary assets
+packages/docusaurus-theme/src/theme/components/ui/**
+packages/docusaurus-theme/src/theme/vendor/**
+packages/docusaurus-theme/src/theme/fonts/**
+
 # Misc
 .DS_Store
 .env.local
diff --git a/AGENTS.md b/AGENTS.md
index 802df7391..daf704f02 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,12 +1,12 @@
 # Contributor Guide
 
-This repository hosts the **docusaurus-plugin-openapi-docs** and **docusaurus-theme-openapi-docs** packages. The plugin converts OpenAPI specs to MDX and the theme provides React components for rendering those docs. The `demo` directory shows them working together.
+This repository hosts the **docusaurus-plugin-openapi-docs** and **docusaurus-theme-shadcn-docs** packages. The plugin converts OpenAPI specs to MDX and the theme provides React components for rendering those docs. The `demo` directory shows them working together.
 
 ```
 root
 ├─ packages
 │  ├─ docusaurus-plugin-openapi-docs   # generates MDX from OpenAPI specs
-│  └─ docusaurus-theme-openapi-docs    # theme components for API docs
+│  └─ docusaurus-theme-shadcn-docs    # theme components for API docs
 ├─ demo                                # example site using the plugin and theme
 └─ scripts                             # release and helper scripts
 ```
diff --git a/LICENSES/Base-UI-MIT.txt b/LICENSES/Base-UI-MIT.txt
new file mode 100644
index 000000000..510c55e0f
--- /dev/null
+++ b/LICENSES/Base-UI-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LICENSES/Docusaurus-MIT.txt b/LICENSES/Docusaurus-MIT.txt
new file mode 100644
index 000000000..b96dcb048
--- /dev/null
+++ b/LICENSES/Docusaurus-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LICENSES/Geist-OFL.txt b/LICENSES/Geist-OFL.txt
new file mode 100644
index 000000000..98835ac3f
--- /dev/null
+++ b/LICENSES/Geist-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font) Geist-Italic[wght].ttf: Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/LICENSES/Lucide-ISC.txt b/LICENSES/Lucide-ISC.txt
new file mode 100644
index 000000000..325e8ff0a
--- /dev/null
+++ b/LICENSES/Lucide-ISC.txt
@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/LICENSES/Mermaid-MIT.txt b/LICENSES/Mermaid-MIT.txt
new file mode 100644
index 000000000..2e5daebd2
--- /dev/null
+++ b/LICENSES/Mermaid-MIT.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 - 2022 Knut Sveidqvist
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LICENSES/PaloAltoNetworks-MIT.txt b/LICENSES/PaloAltoNetworks-MIT.txt
new file mode 100644
index 000000000..2d1096fe3
--- /dev/null
+++ b/LICENSES/PaloAltoNetworks-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Palo Alto Networks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/LICENSES/Pretendard-OFL-1.1.txt b/LICENSES/Pretendard-OFL-1.1.txt
new file mode 100644
index 000000000..ae8d98d30
--- /dev/null
+++ b/LICENSES/Pretendard-OFL-1.1.txt
@@ -0,0 +1,94 @@
+Copyright (c) 2021, Kil Hyung-jin (https://github.com/orioncactus/pretendard),
+with Reserved Font Name Pretendard.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/LICENSES/shadcn-ui-MIT.txt b/LICENSES/shadcn-ui-MIT.txt
new file mode 100644
index 000000000..fad4d887a
--- /dev/null
+++ b/LICENSES/shadcn-ui-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LICENSES/tw-animate-css-MIT.txt b/LICENSES/tw-animate-css-MIT.txt
new file mode 100644
index 000000000..70d61e820
--- /dev/null
+++ b/LICENSES/tw-animate-css-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wombosvideo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 487d1a4f0..9436a3ce0 100644
--- a/README.md
+++ b/README.md
@@ -1,474 +1,188 @@
-<h1 align="center">Docusaurus OpenAPI Doc Generator</h1>
+<h1 align="center">@aeei/docusaurus-theme</h1>
 
-<div align="center">
-<img width="200" src="https://user-images.githubusercontent.com/9343811/165975569-1bc29814-884c-4931-83df-860043b625b7.svg" />
-</div>
-
-<div align="center">
-
-OpenAPI plugin for generating API reference docs in Docusaurus v3 (compatible with [Docusaurus Faster](https://github.com/facebook/docusaurus/issues/10556)).
-
-<img src="https://img.shields.io/badge/dynamic/json?style=for-the-badge&logo=meta&color=blueviolet&label=Docusaurus&query=dependencies%5B%22%40docusaurus%2Fcore%22%5D&url=https%3A%2F%2Fraw.githubusercontent.com%2FPaloAltoNetworks%2Fdocusaurus-openapi-docs%2Fmain%2Fdemo%2Fpackage.json" />
-<br/><br/>
-
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/blob/HEAD/LICENSE) [![npm latest package](https://img.shields.io/npm/v/docusaurus-plugin-openapi-docs/latest.svg)](https://www.npmjs.com/package/docusaurus-plugin-openapi-docs) [![npm downloads](https://img.shields.io/npm/dm/docusaurus-plugin-openapi-docs.svg)](https://www.npmjs.com/package/docusaurus-plugin-openapi-docs) [![npm canary package](https://img.shields.io/npm/v/docusaurus-plugin-openapi-docs/canary.svg)](https://www.npmjs.com/package/docusaurus-plugin-openapi-docs)
-<br/>
-[![build](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/actions/workflows/validate.yaml/badge.svg)](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/actions/workflows/validate.yaml) [![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/) [![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/blob/HEAD/CONTRIBUTING.md#pull-requests)
-<br />
-
-</div>
+<p align="center">A compiled shadcn Base Nova theme for Docusaurus documentation.</p>
 
 <p align="center">
-
-<img src="https://github.com/user-attachments/assets/38f33ad6-97a9-41de-9e00-31b8298a4e22" width="900" />
-
+  <a href="https://www.npmjs.com/package/@aeei/docusaurus-theme"><img alt="npm" src="https://img.shields.io/npm/v/%40aeei%2Fdocusaurus-theme" /></a>
+  <a href="./LICENSE"><img alt="MIT License" src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
+  <a href="https://aeei.github.io/docusaurus-theme/"><img alt="Live demo" src="https://img.shields.io/badge/demo-GitHub%20Pages-222" /></a>
 </p>
 
----
-
-## Overview
-
-The `docusaurus-plugin-openapi-docs` package extends the Docusaurus CLI with commands for generating MDX using the OpenAPI specification as the source. The resulting MDX is fully compatible with [plugin-content-docs](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs) and can be used to render beautiful reference API docs when combined with the `docusaurus-theme-openapi-docs` theme.
-
-Key Features:
-
-- **Compatible:** Works with Swagger 2.0 and OpenAPI 3.x.
-- **Fast:** Convert large OpenAPI specs into MDX docs in seconds. 🔥
-- **Stylish:** Based on the same [Infima styling framework](https://infima.dev/) that powers the Docusaurus UI.
-- **Flexible:** Supports single, multi and _even micro_ OpenAPI specs.
-- **Extensible:** Recognizes common vendor extensions for customizing your docs. See [Supported Vendor Extensions](#supported-vendor-extensions) for details.
-
-## Compatibility Matrix
-
-| Docusaurus OpenAPI Docs | Docusaurus      |
-| ----------------------- | --------------- |
-| 5.x.x (current)         | `3.10.0+`       |
-| 4.x.x (legacy)          | `3.5.0 - 3.9.2` |
-| 3.0.x (end-of-support)  | `3.0.1 - 3.4.0` |
-| 2.2.3 (end-of-support)  | `2.4.1 - 2.4.3` |
-| 1.7.3 (end-of-support)  | `2.0.1 - 2.2.0` |
-
-## Quick Start (new Docusaurus site)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/theme-dark.webp">
+  <img alt="Base Nova Docusaurus documentation shell" src=".github/assets/theme-light.webp">
+</picture>
 
-Run the following to bootstrap a Docusaurus v3 site (classic theme) with `docusaurus-openapi-docs`:
+## Features
 
-```bash
-npx create-docusaurus-openapi-docs my-website
-```
-
-```bash
-cd my-website
-yarn start
-```
-
-If all goes well, you should be greeted by a brand new Docusaurus site that includes API reference docs for the ubiquitous Petstore API!
-
-### CLI Options
-
-| Option                            | Description                                           |
-| --------------------------------- | ----------------------------------------------------- |
-| `-p, --package-manager <manager>` | Use a specific package manager (yarn, npm, pnpm, bun) |
-| `-s, --skip-install`              | Skip automatic dependency installation                |
-
-## Installation (existing Docusaurus site)
-
-> Both the plugin and theme are currently designed to pair with a specific Docusaurus release. The Docusaurus badge in the `README.md` and at the top of this page will always reflect the current compatible versions.
-
-### Plugin
-
-```bash
-yarn add docusaurus-plugin-openapi-docs
-```
+- shadcn `4.12.0` Base Nova components backed by [Base UI](https://base-ui.com/)
+- official Neutral light/dark tokens, Geist, Pretendard Korean fallback, Geist Mono, and Lucide
+- responsive GNB, sticky/collapsible LNB, TOC, paginator, and footer
+- Markdown, GFM, MDX, admonitions, tabs, code blocks, and [Mermaid](https://mermaid.js.org/)
+- optional build-time local search or Algolia DocSearch
+- optional page-level Markdown copy/view using the official Base Nova `ButtonGroup`
+- compiled CSS; consumers need no Tailwind or Sass configuration
+- SSR-safe responsive layout and keyboard/focus behavior
 
-### Theme
+## Install
 
 ```bash
-yarn add docusaurus-theme-openapi-docs
+npm install @aeei/docusaurus-theme \
+  @docusaurus/core @docusaurus/plugin-content-docs \
+  @docusaurus/preset-classic @docusaurus/theme-common
 ```
 
-## Configuring `docusaurus.config.ts` (Plugin and theme usage)
-
-Here is an example of properly configuring `docusaurus.config.ts` for `docusaurus-plugin-openapi-docs` and `docusaurus-theme-openapi-docs` usage.
+Minimal configuration:
 
-> Note: Instructions may differ slightly for sites that haven't migrated to typescript.
-
-```typescript
+```ts
 // docusaurus.config.ts
-// note that parts of the complete config were left out for brevity
-import type * as Preset from "@docusaurus/preset-classic";
 import type { Config } from "@docusaurus/types";
-import type * as Plugin from "@docusaurus/types/src/plugin";
-import type * as OpenApiPlugin from "docusaurus-plugin-openapi-docs";
-
-{
-  presets: [
-    [
-      "classic",
-      {
-        docs: {
-          sidebarPath: "./sidebars.ts",
-          docItemComponent: "@theme/ApiItem", // Derived from docusaurus-theme-openapi
-        },
-        theme: {
-          customCss: "./src/css/custom.css",
-        },
-      } satisfies Preset.Options,
-    ],
-  ],
-
-  plugins: [
-    [
-      'docusaurus-plugin-openapi-docs',
-      {
-        id: "api", // plugin id
-        docsPluginId: "classic", // configured for preset-classic
-        config: {
-          petstore: {
-            specPath: "examples/petstore.yaml",
-            outputDir: "docs/petstore",
-            maskCredentials: false, // Disable credential masking in code snippets
-            sidebarOptions: {
-              groupPathsBy: "tag",
-            },
-          } satisfies OpenApiPlugin.Options,
-        }
-      },
-    ]
-  ],
-  themes: ["docusaurus-theme-openapi-docs"], // export theme components
-}
-```
-
-> Note: You may optionally configure a dedicated `@docusaurus/plugin-content-docs` instance for use with `docusaurus-theme-openapi-docs` by setting `docItemComponent` to `@theme/ApiItem`.
-
-## Plugin Configuration Options
-
-The `docusaurus-plugin-openapi-docs` plugin can be configured with the following options:
-
-| Name           | Type     | Default                           | Description                                                                                                                                                   |
-| -------------- | -------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`           | `string` | `null`                            | A unique plugin ID.                                                                                                                                           |
-| `docsPlugin`   | `string` | `@docusaurus/plugin-content-docs` | The plugin used to render the OpenAPI docs (ignored if the plugin instance referenced by `docsPluginId` is a `preset`).                                       |
-| `docsPluginId` | `string` | `null`                            | The plugin ID associated with the `preset` or configured `docsPlugin` instance used to render the OpenAPI docs (e.g. "your-plugin-id", "classic", "default"). |
-
-### config
-
-`config` can be configured with the following options:
-
-| Name                 | Type      | Default | Description                                                                                                                                                    |
-| -------------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `specPath`           | `string`  | `null`  | Designated URL or path to the source of an OpenAPI specification file or directory of multiple OpenAPI specification files.                                    |
-| `outputDir`          | `string`  | `null`  | Desired output path for generated MDX and sidebar files.                                                                                                       |
-| `proxy`              | `string`  | `null`  | _Optional:_ Proxy URL to prepend to base URL when performing API requests from browser. Overrides site-wide `themeConfig.api.proxy` if set.                    |
-| `template`           | `string`  | `null`  | _Optional:_ Customize MDX content with a desired template.                                                                                                     |
-| `infoTemplate`       | `string`  | `null`  | _Optional:_ Customize MDX content for **info** pages only.                                                                                                     |
-| `tagTemplate`        | `string`  | `null`  | _Optional:_ Customize MDX content for **tag** pages only.                                                                                                      |
-| `schemaTemplate`     | `string`  | `null`  | _Optional:_ Customize MDX content for **schema** pages only.                                                                                                   |
-| `downloadUrl`        | `string`  | `null`  | _Optional:_ Designated URL for downloading OpenAPI specification. (requires `info` section/doc)                                                                |
-| `hideSendButton`     | `boolean` | `null`  | _Optional:_ If set to `true`, hides the “Send API Request” button in the API demo panel.                                                                       |
-| `showExtensions`     | `boolean` | `null`  | _Optional:_ If set to `true`, renders operation‑level vendor‑extensions in descriptions.                                                                       |
-| `maskCredentials`    | `boolean` | `true`  | _Optional:_ If set to `false`, disables credential masking in generated code snippets. By default, credentials are masked for security.                        |
-| `sidebarOptions`     | `object`  | `null`  | _Optional:_ Set of options for sidebar configuration. See below for a list of supported options.                                                               |
-| `version`            | `string`  | `null`  | _Optional:_ Version assigned to a single or micro‑spec API specified in `specPath`.                                                                            |
-| `label`              | `string`  | `null`  | _Optional:_ Version label used when generating the version‑selector dropdown menu.                                                                             |
-| `baseUrl`            | `string`  | `null`  | _Optional:_ Base URL for versioned docs in the version‑selector dropdown.                                                                                      |
-| `versions`           | `object`  | `null`  | _Optional:_ Options for versioning configuration. See below for a list of supported options.                                                                   |
-| `markdownGenerators` | `object`  | `null`  | _Optional:_ Customize MDX content via generator functions. See below for a list of supported options.                                                          |
-| `showSchemas`        | `boolean` | `null`  | _Optional:_ If set to `true`, generates standalone schema pages and adds them to the sidebar.                                                                  |
-| `showInfoPage`       | `boolean` | `true`  | _Optional:_ If set to `false`, disables generation of the info page (overview page with API title and description).                                            |
-| `schemasOnly`        | `boolean` | `false` | _Optional:_ If set to `true`, generates only schema pages (no API endpoint pages). Also available as `--schemas-only` CLI flag.                                |
-| `externalJsonProps`  | `boolean` | `true`  | _Optional:_ If set to `false`, disables externalization of large JSON props. By default, large JSON is written to external files for better build performance. |
-
-### sidebarOptions
-
-`sidebarOptions` can be configured with the following options:
-
-| Name                 | Type      | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| -------------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `groupPathsBy`       | `string`  | `null`  | Organize and group sidebar slice by specified option. Note: Currently, `groupPathsBy` only contains support for grouping by `tag` and `tagGroup`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `categoryLinkSource` | `string`  | `null`  | Defines what source to use for rendering category link pages when grouping paths by tag. <br/><br/>The supported options are as follows: <br/><br/>`tag`: Sets the category link config type to `doc` and uses the generated tag index page as the category link. <br/><br/>`info`: Sets the category link config type to `doc` and renders the `info` section as the category link (recommended only for multi/micro-spec scenarios). <br/><br/>`auto`: Sets the category link config type to `generated-index` and auto-generates an index page for each tag category. <br/><br/>When omitted, no link config is generated and categories render as expand/collapse groups only. |
-| `sidebarCollapsible` | `boolean` | `true`  | Whether sidebar categories are collapsible by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `sidebarCollapsed`   | `boolean` | `true`  | Whether sidebar categories are collapsed by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `customProps`        | `object`  | `null`  | Additional props for customizing a sidebar item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `sidebarGenerators`  | `object`  | `null`  | Optional: Customize sidebar rendering with callback functions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-
-> You may optionally configure a `sidebarOptions`. In doing so, an individual `sidebar.js` slice with the configured options will be generated within the respective `outputDir`.
-> Use `x-position` vendor extension (or the front matter `position`) on operations to explicitly order sidebar items.
-
-`versions` can be configured with the following options:
-
-| Name          | Type     | Default | Description                                                                                                                |
-| ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `specPath`    | `string` | `null`  | Designated URL or path to the source of an OpenAPI specification file or a directory of micro OpenAPI specification files. |
-| `outputDir`   | `string` | `null`  | Desired output path for versioned, generated MDX files.                                                                    |
-| `label`       | `string` | `null`  | _Optional:_ Version label used when generating the version selector dropdown menu.                                         |
-| `baseUrl`     | `string` | `null`  | _Optional:_ Version base URL used when generating the version selector dropdown menu.                                      |
-| `downloadUrl` | `string` | `null`  | _Optional:_ Designated URL for downloading the versioned OpenAPI specification.                                            |
-
-> All versions will automatically inherit `sidebarOptions` from the parent/base config.
-
-### markdownGenerators
-
-`markdownGenerators` can be configured with the following options:
-
-| Name                 | Type       | Default | Description                                                                                                                                    |
-| -------------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `createApiPageMD`    | `function` | `null`  | _Optional:_ Returns a string of the raw markdown body for API pages.<br/><br/>**Function type:** `(pageData: ApiPageMetadata) => string`       |
-| `createInfoPageMD`   | `function` | `null`  | _Optional:_ Returns a string of the raw markdown body for info pages.<br/><br/>**Function type:** `(pageData: InfoPageMetadata) => string`     |
-| `createTagPageMD`    | `function` | `null`  | _Optional:_ Returns a string of the raw markdown body for tag pages.<br/><br/>**Function type:** `(pageData: TagPageMetadata) => string`       |
-| `createSchemaPageMD` | `function` | `null`  | _Optional:_ Returns a string of the raw markdown body for schema pages.<br/><br/>**Function type:** `(pageData: SchemaPageMetadata) => string` |
-
-### sidebarGenerators
-
-`sidebarGenerators` can be configured with the following options:
 
-| Name            | Type       | Default | Description                                                                                                                                                                                                                                      |
-| --------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `createDocItem` | `function` | `null`  | Optional: Returns a `SidebarItemDoc` object containing metadata for a sidebar item.<br/><br/>**Function type:** `(item: ApiPageMetadata \| SchemaPageMetadata, context: { sidebarOptions: SidebarOptions; basePath: string }) => SidebarItemDoc` |
-
-### Performance Optimization
-
-By default, `externalJsonProps` is enabled to optimize Docusaurus build times. This externalizes large JSON objects to separate files, significantly improving build performance for large OpenAPI specs.
-
-**How it works:**
-
-- With `externalJsonProps: true` (default): Large JSON props are written to separate `.json` files and loaded via `require()`. This bypasses MDX AST processing entirely, allowing the bundler to handle JSON more efficiently.
-
-- With `externalJsonProps: false`: Large JSON objects (responses, request bodies, parameters) are embedded directly in the MDX. The MDX compiler must parse these into an AST and serialize them back, which can be slow for deeply nested schemas.
-
-**When to disable:**
-
-You may set `externalJsonProps: false` if you have custom tooling that depends on parsing the MDX files directly:
-
-```typescript
-petstore: {
-  specPath: "examples/petstore.yaml",
-  outputDir: "docs/petstore",
-  externalJsonProps: false, // Disable if needed for custom tooling
-} satisfies OpenApiPlugin.Options,
-```
-
-## Theme Configuration Options
-
-The `docusaurus-theme-openapi-docs` theme can be configured with the following options in `themeConfig.api`:
-
-| Name                 | Type     | Default         | Description                                                                                                                                                                                 |
-| -------------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `proxy`              | `string` | `null`          | _Optional:_ Site-wide proxy URL to prepend to base URL when performing API requests. Can be overridden per-spec via plugin config.                                                          |
-| `authPersistance`    | `string` | `null`          | _Optional:_ Determines how auth credentials are persisted. Options: `"localStorage"`, `"sessionStorage"`, or `false` to disable.                                                            |
-| `requestTimeout`     | `number` | `30000`         | _Optional:_ Request timeout in milliseconds for API requests made from the browser. Defaults to 30 seconds.                                                                                 |
-| `requestCredentials` | `string` | `"same-origin"` | _Optional:_ Controls cookie behavior for API requests. Options: `"omit"`, `"same-origin"`, or `"include"`.                                                                                  |
-| `schemaExpansion`    | `object` | `null`          | _Optional:_ Controls the default expansion depth of nested request/response schema trees and (optionally) renders an inline depth control. See [`schemaExpansion`](#schemaexpansion) below. |
-
-Example:
-
-```typescript
-// docusaurus.config.ts
-{
+const config: Config = {
+  presets: ["classic"],
+  themes: ["@aeei/docusaurus-theme"],
   themeConfig: {
-    api: {
-      proxy: "https://cors.pan.dev",  // Site-wide proxy (can be overridden per-spec in plugin config)
-      authPersistance: "localStorage",
-      requestTimeout: 60000, // 60 seconds
-      requestCredentials: "omit", // Prevent cookies from being sent with requests
-      schemaExpansion: {
-        enabled: true, // render the inline depth control next to each schema header
-        default: 1,    // auto-expand the first level on page load
-        max: 4,        // highest numeric depth offered by the control
+    colorMode: {
+      defaultMode: "light",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
+    docs: {
+      sidebar: {
+        hideable: true,
+        autoCollapseCategories: false,
       },
     },
   },
-}
-```
-
-### schemaExpansion
-
-Inspired by Redoc's `schemaExpansionLevel`, `schemaExpansion` configures how deeply nested schema trees auto-expand and whether readers can change the depth at view time.
-
-| Name      | Type              | Default | Description                                                                                                                                                |
-| --------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `enabled` | `boolean`         | `false` | Render an interactive depth control next to each schema header so readers can change the expansion depth at view time.                                     |
-| `default` | `number \| "all"` | `0`     | Initial expansion depth applied on every page load. Use `"all"` to expand everything. Applies whether or not `enabled` is `true`.                          |
-| `max`     | `number`          | `4`     | Highest numeric depth offered by the UI control. Ignored when `enabled` is `false`.                                                                        |
-| `persist` | `boolean`         | `true`  | Persist the reader's selected depth in `localStorage`. Only meaningful when `enabled` is `true`; persistence is implicitly off when the control is hidden. |
-
-You can set just `{ default: 1 }` to auto-expand the first level on every page load without rendering the depth control. When `schemaExpansion` is unset entirely, behavior is unchanged from prior releases (all schemas collapsed by default).
+};
 
-## Supported Vendor Extensions
+export default config;
+```
 
-The plugin extracts a number of vendor extensions from the OpenAPI spec to enrich the generated docs. The theme renders some of these values as part of the UI.
+The package ships Base Nova tokens, fonts, preflight, animations, and compiled theme CSS. Consumer Tailwind/Sass config is neither required nor read.
 
-| Extension                                  | Purpose                                                               |
-| ------------------------------------------ | --------------------------------------------------------------------- |
-| `x-codeSamples`                            | Operation level code snippets displayed in the API Explorer.          |
-| `x-tagGroups`                              | Groups tags in the sidebar navigation.                                |
-| `x-tags`                                   | Assigns tags to schema objects so they appear with tagged operations. |
-| `x-position`                               | Controls ordering of items in the sidebar.                            |
-| `x-logo` / `x-dark-logo`                   | Provides logos for light and dark themes on the intro page.           |
-| `x-deprecated-description`                 | Custom text shown for deprecated operations.                          |
-| `x-webhooks`                               | Defines webhook events.                                               |
-| `x-displayName`                            | Overrides tag display names.                                          |
-| `x-enumDescription` / `x-enumDescriptions` | Documents enum values.                                                |
+## Search
 
-Other ReDoc specific extensions such as `x-circular-ref`, `x-code-samples` (deprecated), `x-examples`, `x-ignoredHeaderParameters`, `x-nullable`, `x-servers`, `x-traitTag`, `x-additionalPropertiesName`, and `x-explicitMappingOnly` are ignored when extracting custom data.
+Search is disabled by default.
 
-## CLI Usage
+### Local search
 
-```bash
-Usage: docusaurus <command> [options]
-
-Options:
-  -V, --version                                            output the version number
-  -h, --help                                               display help for command
-
-Commands:
-  build [options] [siteDir]                                Build website.
-  swizzle [options] [themeName] [componentName] [siteDir]  Wraps or ejects the original theme files into website folder for customization.
-  deploy [options] [siteDir]                               Deploy website to GitHub pages.
-  start [options] [siteDir]                                Start the development server.
-  serve [options] [siteDir]                                Serve website locally.
-  clear [siteDir]                                          Remove build artifacts.
-  write-translations [options] [siteDir]                   Extract required translations of your site.
-  write-heading-ids [options] [siteDir] [files...]         Generate heading ids in Markdown content.
-  docs:version <version>                                   Tag a new docs version
-  gen-api-docs [options] <id>                              Generates OpenAPI docs in MDX file format and sidebar.ts (if enabled).
-  gen-api-docs:version [options] <id:version>              Generates versioned OpenAPI docs in MDX file format, versions.js and sidebar.ts (if
-                                                           enabled).
-  clean-api-docs [options] <id>                            Clears the generated OpenAPI docs MDX files and sidebar.ts (if enabled).
-  clean-api-docs:version [options] <id:version>            Clears the versioned, generated OpenAPI docs MDX files, versions.json and sidebar.ts
-                                                           (if enabled)
+```ts
+themes: [["@aeei/docusaurus-theme", { search: "local" }]];
 ```
 
-### Generating OpenAPI Docs
+Each production build extracts rendered Markdown/MDX routes into `build/search-index.json`. The browser fetches that same-origin index only when search opens. Protect the index behind the same auth/network boundary as private docs.
 
-To generate all OpenAPI docs, run the following command from the root directory of your project:
+### Algolia
 
-```bash
-yarn docusaurus gen-api-docs all
+```ts
+themes: [["@aeei/docusaurus-theme", { search: "algolia" }]],
+themeConfig: {
+  algolia: {
+    appId: process.env.ALGOLIA_APP_ID,
+    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
+    indexName: process.env.ALGOLIA_INDEX_NAME,
+  },
+},
 ```
 
-> This will generate API docs for all of the OpenAPI specification (OAS) files referenced in your `docusaurus-plugin-openapi-docs` config.
+Use a public Search API key, never an Admin API key.
 
-You may also generate OpenAPI docs for a single path or OAS by specifying the unique `id`:
+## Copy Page
 
-```bash
-yarn docusaurus gen-api-docs <id>
-```
-
-Example:
+The visual control is theme-native Base Nova. Markdown route generation is delegated to [`docusaurus-plugin-copy-page-button`](https://github.com/portdeveloper/docusaurus-plugin-copy-page-button); its injected UI is disabled.
 
 ```bash
-yarn docusaurus gen-api-docs petstore
+npm install docusaurus-plugin-copy-page-button
 ```
 
-> The example above will only generate API docs relative to `petstore`.
-
-If you have multiple versions of the same API, `gen-api-docs` only generates the latest. To generate all versions, use the `--all-versions` flag.
-
-Example:
-
-```bash
-yarn docusaurus gen-api-docs all --all-versions
+```ts
+plugins: [
+  [
+    "docusaurus-plugin-copy-page-button",
+    { injectButton: false, generateMarkdownRoutes: true },
+  ],
+],
+themes: [
+  ["@aeei/docusaurus-theme", { copyPage: true }],
+],
 ```
 
-> This will generate API docs for all versions of all the OpenAPI specification (OAS) files referenced in your `docusaurus-plugin-openapi-docs` config.
+The primary action copies the generated Markdown. The menu can view the `.md` route or copy its link. External AI actions are intentionally excluded for private-doc safety.
 
-To generate only schema MDX files—without updating the sidebar or requiring `showSchemas` in your plugin config—use the `--schemas-only` flag:
+## Mermaid
 
 ```bash
-yarn docusaurus gen-api-docs petstore --schemas-only
+npm install @docusaurus/theme-mermaid @mermaid-js/layout-elk
 ```
 
-> This command writes the schema pages to the configured output directory while leaving other generated docs untouched.
-
-The `--schemas-only` flag is also available for `gen-api-docs:version`.
-
-### Cleaning API Docs
-
-To clean/remove all API Docs, run the following command from the root directory of your project:
-
-```bash
-yarn docusaurus clean-api-docs all
+```ts
+markdown: { mermaid: true },
+themes: ["@docusaurus/theme-mermaid", "@aeei/docusaurus-theme"],
 ```
 
-You may also remove a particular set of API docs by specifying the unique `id` of your desired spec instance.
-
-```bash
-yarn docusaurus clean-api-docs <id>
-```
+## Starter
 
-Example:
+[`examples/docs-starter`](./examples/docs-starter) is the live-demo source and a copyable docs-first starter. Routine authors edit:
 
-```bash
-yarn docusaurus clean-api-docs petstore
+```text
+docs/**/*.md
+docs/**/*.mdx
+static/**
 ```
 
-> The example above will remove all API docs relative to `burgers`.
+- [Markdown and GFM](./examples/docs-starter/docs/guides/markdown-gfm.md)
+- [Search and Copy Page](./examples/docs-starter/docs/guides/search.md)
+- [MDX components](./examples/docs-starter/docs/showcase/mdx-playground.mdx)
+- [Mermaid diagrams](./examples/docs-starter/docs/showcase/mermaid.md)
 
-If you have multiple versions of the same API, `clean-api-docs` only cleans the latest. To clean all versions, use the `--all-versions` flag.
-
-Example:
+## Development
 
 ```bash
-yarn docusaurus clean-api-docs all --all-versions
+yarn install
+yarn workspace @aeei/docusaurus-theme build
+yarn workspace @aeei/docs-starter start
 ```
 
-> This will clean API docs for all versions of all the OpenAPI specification (OAS) files referenced in your `docusaurus-plugin-openapi-docs` config.
-
-To clean only schema docs while leaving API, info, and tag docs untouched, use the `--schemas-only` flag:
+Production smoke:
 
 ```bash
-yarn docusaurus clean-api-docs petstore --schemas-only
+yarn workspace @aeei/docusaurus-theme build
+yarn workspace @aeei/docs-starter build
 ```
 
-> The `--schemas-only` flag is also available for `clean-api-docs:version`.
+## Publishing to npm
 
-### Versioning OpenAPI docs
-
-To generate _all_ versioned OpenAPI docs, run the following command from the root directory of your project:
+Maintainers only, after explicit visual approval:
 
 ```bash
-yarn docusaurus gen-api-docs:version <id>:all
+yarn workspace @aeei/docusaurus-theme build
+cd packages/docusaurus-theme
+npm pack --dry-run
+npm publish --access public
 ```
 
-Example:
+Requirements:
 
-```bash
-yarn docusaurus gen-api-docs:version petstore:all
-```
+- npm account authorized for the `@aeei` scope
+- npm login/2FA completed
+- package version not already published
+- theme build, starter build, isolated tarball build, Jest, TypeScript/LSP, Playwright, and visual evidence passing
 
-> This will generate API docs for all of the OpenAPI specification (OAS) files referenced in your `versions` config and will also generate a `versions.json` file.
-
-> Substitute `all` with a specific version ID to generate or clean a specific version. Generating for `all` or a single version ID will automatically update the `versions.json` file.
-
-## Developer Quick Start
-
-> Looking to make a contribution? Make sure to check out our contributing guide.
-
-After [forking](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/fork) the main repository, run the following:
+Consumers then install a pinned release:
 
 ```bash
-git clone https://github.com/<your account>/docusaurus-openapi-docs.git
-cd docusaurus-openapi-docs
-yarn
-yarn build-packages
-yarn watch:demo
+npm install @aeei/docusaurus-theme@0.1.8
 ```
 
-## Credits
-
-Special thanks to [@bourdakos1](https://github.com/bourdakos1) (Nick Bourdakos), the author of [docusaurus-openapi](https://github.com/cloud-annotations/docusaurus-openapi), which this project is heavily based on.
-
-For more insight into why we decided to completely fork see [#47](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/pull/47)
+This repository does not publish automatically from an unapproved working tree.
 
-## Contributors
+## Attribution
 
-<a href="https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=PaloAltoNetworks/docusaurus-openapi-docs" />
-</a>
+This repository is a modified fork of [PaloAltoNetworks/docusaurus-openapi-docs](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs). It is maintained independently and is not an official Palo Alto Networks project.
 
-## Support
+See [`THIRD_PARTY_NOTICES.md`](./THIRD_PARTY_NOTICES.md) and package `LICENSES/` for Docusaurus, shadcn/ui, Base UI, Lucide, Mermaid, Geist, Pretendard, animation, and upstream notices.
 
-See [SUPPORT.md](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/blob/main/SUPPORT.md) for our support agreement and guidelines.
+## License
 
-If you believe you found a bug or have an idea you'd like to suggest you may [report an issue](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/new/choose) or [start a discussion](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/discussions/new/choose).
+[MIT](./LICENSE). Existing upstream copyright and permission notices are preserved.
diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
new file mode 100644
index 000000000..ad7030626
--- /dev/null
+++ b/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,24 @@
+# Third-party notices
+
+This repository is a modified fork of [PaloAltoNetworks/docusaurus-openapi-docs](https://github.com/PaloAltoNetworks/docusaurus-openapi-docs). It is not an official Palo Alto Networks project.
+
+| Project                 | Source                                                              | Version / snapshot                         | Use                                                      | License text                        |
+| ----------------------- | ------------------------------------------------------------------- | ------------------------------------------ | -------------------------------------------------------- | ----------------------------------- |
+| Docusaurus OpenAPI Docs | https://github.com/PaloAltoNetworks/docusaurus-openapi-docs         | `9f33f16352eaa0cad62bf54668de702ce2ce1a8a` | Fork baseline and selected docs theme seams              | `LICENSES/PaloAltoNetworks-MIT.txt` |
+| Docusaurus              | https://github.com/facebook/docusaurus                              | `3.10.1`                                   | Framework, classic theme interfaces, Mermaid integration | `LICENSES/Docusaurus-MIT.txt`       |
+| shadcn/ui               | https://github.com/shadcn-ui/ui                                     | `shadcn@4.12.0`, Base Nova registry        | Vendored UI component source and Tailwind variants       | `LICENSES/shadcn-ui-MIT.txt`        |
+| Base UI                 | https://github.com/mui/base-ui                                      | `@base-ui/react@1.6.0`                     | Interactive primitive runtime                            | `LICENSES/Base-UI-MIT.txt`          |
+| Lucide                  | https://github.com/lucide-icons/lucide                              | `lucide-react@0.468.0`                     | UI icons                                                 | `LICENSES/Lucide-ISC.txt`           |
+| Mermaid                 | https://github.com/mermaid-js/mermaid                               | Docusaurus-compatible Mermaid 11.x         | Starter diagrams                                         | `LICENSES/Mermaid-MIT.txt`          |
+| Copy Page Button        | https://github.com/portdeveloper/docusaurus-plugin-copy-page-button | `0.8.4`                                    | Optional starter Markdown-route generation               | Package metadata: MIT               |
+| Geist                   | https://github.com/vercel/geist-font                                | Snapshot 2026-07-18                        | Bundled Sans and Mono variable fonts                     | `LICENSES/Geist-OFL.txt`            |
+| Pretendard              | https://github.com/orioncactus/pretendard                           | `v1.3.9`                                   | Unmodified bundled Korean variable webfont               | `LICENSES/Pretendard-OFL-1.1.txt`   |
+| tw-animate-css          | https://github.com/Wombosvideo/tw-animate-css                       | Snapshot 2026-07-18                        | Base Nova animation utilities                            | `LICENSES/tw-animate-css-MIT.txt`   |
+
+## Design references
+
+The docs prose contract in `packages/docusaurus-theme/src/theme/base.scss` is adapted from the live `ui.shadcn.com` `.typeset` CSS snapshot captured on 2026-07-18 in `/tmp/typeset-rules.txt`, then narrowed for Docusaurus article content and code-block ownership.
+
+The package-level copied-file inventory is maintained in `packages/docusaurus-theme/VENDORED_SOURCES.md`. Existing copyright/license headers are preserved in copied files.
+
+Nextra was used only as a visual reference. No Nextra source code or runtime dependency is included.
diff --git a/docs/base-nova-parity-diagnosis.md b/docs/base-nova-parity-diagnosis.md
new file mode 100644
index 000000000..f60a7aed0
--- /dev/null
+++ b/docs/base-nova-parity-diagnosis.md
@@ -0,0 +1,186 @@
+# Base Nova 0px Parity — Root Cause Diagnosis
+
+Status: root causes confirmed and restoration implemented; final full-matrix validation in progress.
+
+## Oracle
+
+- Rendered reference: `https://ui.shadcn.com/docs/components/base/*`
+- Registry reference: `npx shadcn@4.12.0 add ...` with:
+  - `style: base-nova`
+  - Base UI
+  - `baseColor: neutral`
+  - Lucide
+- Reproducible generated reference: `/tmp/base-nova-exact/src/components/ui`
+- Official rendered metric inventory: `/tmp/official-slot-inventory.json`
+- Current local metric inventory: `/tmp/local-slot-inventory.json`
+
+## Root causes
+
+### 1. Tailwind preflight is missing
+
+`packages/docusaurus-theme/src/theme/shadcn.css` imports only:
+
+```css
+@import "tailwindcss/theme";
+@import "tailwindcss/utilities";
+```
+
+It does not import Tailwind preflight. Official examples use the full official CSS stack. As a result, native browser styles remain active on Base UI elements.
+
+Observed effect:
+
+- official ghost/icon Button rest background: transparent
+- local hamburger, CodeBlock action, and disclosure trigger rest background: browser `buttonface`, `rgb(239, 239, 239)`
+- local buttons also retain native box metrics in some Docusaurus seams
+
+This is the direct cause of the unexpected gray hamburger and CodeBlock button backgrounds.
+
+### 2. Official text scale was overwritten (resolved)
+
+The previous implementation remapped Tailwind UI text tokens to consumer prose tokens. The current theme keeps the official Base Nova/Tailwind text scale intact and owns separate `--theme-text-*` aliases only for Docusaurus shell typography.
+
+### 3. Official registry files were locally forked
+
+Examples:
+
+- `components/ui/button.tsx`
+  - local additions: `cursor-pointer`, `disabled:cursor-not-allowed`
+- `components/ui/card.tsx`
+  - official: `text-base leading-snug font-medium`
+  - former local fork: custom heading/line-height classes
+- `components/ui/badge.tsx`
+  - local-only `code` and `codeCompact` variants
+- `components/ui/alert.tsx`
+  - local content-flow behavior inside the official primitive
+- `components/ui/sidebar.tsx`
+  - local reset/behavior classes mixed into registry source
+
+The official component files are therefore not the actual SSOT.
+
+### 4. Callsites alter official visual behavior
+
+Examples:
+
+- `components/theme-tab-list.tsx`
+  - forces `variant="line"`
+  - adds horizontal scroller, border, `rounded-none`, width rules
+- `DocCard/Layout/index.tsx`
+  - adds hover background and layout classes
+- `Details/index.tsx` and `TOCCollapsible/*`
+  - separately compose and style the same disclosure behavior
+- `Navbar/MobileSidebar/Layout/index.tsx`
+  - applies a custom Sheet shell
+- `DocSidebar/Desktop/index.tsx`
+  - forces sticky/custom footer sizing and surface classes
+- CodeBlock action adapters pass Docusaurus class names into Button
+
+The final DOM class list is not the official example class list.
+
+### 5. Global adapter CSS overrides component slots
+
+`packages/docusaurus-theme/src/theme/base.scss` visually restyles official seams:
+
+- mobile Sheet width/padding/header/actions
+- Sidebar position/height/background
+- Sidebar menu/link/font/radius/padding
+- mobile TOC trigger/background
+- Table head/cell/row behavior
+- dropdown/focus behavior
+- global focus outline
+
+The Sidebar registry source declares a fixed container, but `base.scss` changes it to sticky. This causes the LNB to leave the viewport near the document footer.
+
+The Sheet uses `z-50`, while the Docusaurus navbar remains above it. The Sheet header is rendered behind the navbar, hiding theme and close actions and making the panel appear to start below the header.
+
+### 6. The wrong disclosure component is used
+
+Official rendered reference provides styled `Accordion`:
+
+- trigger: `384 × 42px`
+- trigger padding: `10px 0`
+- trigger text: `14px / 20px`, weight `500`
+- icon: `16 × 16px`
+- transparent rest background
+
+Local `On this page` and `Expandable details` use separately styled Collapsible + Button compositions:
+
+- local trigger: `32px` high
+- padding: `1px 10px`
+- text: `14px / 21px`
+- rest background: `rgb(239, 239, 239)`
+- bordered/card wrappers differ between the two callsites
+
+They cannot be identical because they do not share the official Accordion component.
+
+### 7. Official Tabs are replaced by a custom line-tab composition
+
+Official default example:
+
+- Tabs gap: `8px`
+- TabsList: height `32px`, padding `3px`, radius `10px`, muted background
+- TabsTrigger: height `25px`, padding `2px 6px`, radius `8px`, `14px / 20px`
+- selected trigger: background + shadow from official default variant
+
+Local Docusaurus Tabs:
+
+- forces line variant
+- TabsList radius: `0px`
+- TabsList background: transparent
+- custom bottom border/indicator
+- trigger line-height: `21px`
+
+The small/inconsistent appearance is caused by intentionally selecting and modifying a different variant.
+
+### 8. Official animation CSS stack is incomplete
+
+DropdownMenu and Tooltip use `animate-in`, `fade-in`, `zoom-in`, and related utilities, but the package does not include/import the official animation CSS dependency. Open/close state parity is therefore not guaranteed.
+
+### 9. Current tests preserve the fork
+
+Current contract tests assert local inline class fragments and custom variants. They do not compare official registry output or official rendered metrics. A green test run therefore proves internal consistency, not official parity.
+
+## Measured rest-state deltas
+
+| Component        | Official rendered example                    | Current local                                 | Confirmed delta/cause                       |
+| ---------------- | -------------------------------------------- | --------------------------------------------- | ------------------------------------------- |
+| Button text      | Geist, `14/20px`                             | Inter, `14/21px`                              | font + line-height token remap              |
+| Ghost Button bg  | transparent                                  | `rgb(239,239,239)`                            | missing preflight/native buttonface         |
+| TabsList         | `32px`, `p:3px`, `r:10px`, muted bg          | `32px`, `p:3px`, `r:0px`, transparent         | forced custom line variant                  |
+| TabsTrigger      | `25px`, `14/20px`                            | `25px`, `14/21px`                             | text token remap                            |
+| Card             | `gap:16px`, `r:14px`, `14/20px`              | `gap:16px`, `r:12px`, `14/21px`               | radius/token and type remap                 |
+| CardTitle        | `16/22px`                                    | `17/25.5px`                                   | local CardTitle fork + `text-base` remap    |
+| Alert            | `p:8px 10px`, `r:10px`, `14/20px`            | same padding/radius, `14/21px`, tone surfaces | type remap + callsite tone visual overrides |
+| TableHead        | `40px`, `p:0 8px`, `14/20px`                 | `40px`, `p:0 8px`, `14/21px`                  | type remap                                  |
+| TableCell        | official row `37px`, `14/20px`               | local rows `37.5–39.3px`, `14/21px`           | type remap/prose content metrics            |
+| AccordionTrigger | `42px`, `p:10px 0`, transparent              | `32px`, `p:1px 10px`, native gray             | wrong component + missing preflight         |
+| Mobile Sheet     | viewport overlay with visible header/actions | panel appears below navbar; actions hidden    | z-index conflict/custom shell               |
+| Desktop Sidebar  | fixed viewport panel                         | constrained sticky panel                      | `base.scss` position override               |
+
+## Required correction order
+
+1. Restore official CSS stack/preflight and official UI font/text/radius metrics.
+2. Replace local UI files with exact generated Base Nova registry files.
+3. Use official Accordion for both disclosure callsites.
+4. Remove visual callsite classes and `[data-slot]` global overrides.
+5. Re-measure all states and iterate until every required delta is zero.
+
+No implementation is considered complete until the state matrix includes rest, hover, focus, focus-visible, active/pressed, open/expanded, selected/current, disabled, loading, light, and dark.
+
+## Restoration result
+
+- Full Tailwind preflight, official Base Nova variants, `tw-animate-css`, Geist Sans/Mono, and Neutral light/dark tokens now ship in compiled package CSS.
+- The used `components/ui/**` files match the `shadcn@4.12.0` generated `base-nova` sources after normalizing only import paths and required React imports.
+- `Details` and mobile `On this page` now share the official Accordion.
+- Docusaurus Tabs use the official default Tabs composition.
+- Hamburger, theme, Sheet close, BackToTop, edit, and CodeBlock actions use official Button variants/sizes without incoming visual classes.
+- Mobile navigation uses official Sheet and Sidebar composition; Sheet now layers above the Docusaurus navbar.
+- Desktop docs navigation retains the official fixed Sidebar container, offset only for the structural Docusaurus navbar.
+- The Infima stylesheet is isolated in a lower cascade layer and its generic global table skin is removed before compilation, so the untouched official Table source remains the visual SSOT.
+- Tailwind color-mix fallbacks are normalized without reordering state rules; this preserves official selected/focus/dark precedence after Docusaurus production minification.
+- Docusaurus CSS minification had shortened Tailwind's exact `calc(1.25 / .875)` `text-sm` line-height ratio to `1.42857`. That produced accumulated `0.015625px`–`0.484375px` component-height drift. The theme now emits exact spacing-derived Tailwind line-height tokens, so production CSS retains the official `16/20/24/28px` metrics.
+- `base.scss` contains no direct official `[data-slot]` visual rule. Docs prose selectors explicitly exclude component interiors.
+- The live shadcn CodeBlock composition is reproduced directly: semantic `figure`, official surface spacing, code-line grid/padding, and the official Button-based copy action. Docusaurus-only word-wrap UI is omitted because it is absent from the rendered oracle.
+- The PostCSS exception is scoped to the packaged `shadcn.scss` and layered Infima input. Consumer CSS continues through its original `postcss-preset-env` options; `src/postcss/preset-env.test.ts` protects this boundary.
+- The comparison tool is `scripts/compare-base-nova.cjs`; it uses matched official content/container context, exact trigger alignment for floating surfaces, Chromium's 1/64 CSS-pixel layout quantum, normalized computed colors, and the required geometry/state properties across desktop/tablet/mobile and light/dark.
+- The user-facing report is `artifacts/base-nova-parity/report.md` with raw measurements in `results.json`: 406 checks, 406 fully compared exact, 0 contextual exclusions, and 0 differences/errors.
+- Automated parity is complete, but user visual approval remains required.
diff --git a/docs/superpowers/plans/2026-07-18-exhaustive-rendered-parity.md b/docs/superpowers/plans/2026-07-18-exhaustive-rendered-parity.md
new file mode 100644
index 000000000..108ce7000
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-18-exhaustive-rendered-parity.md
@@ -0,0 +1,210 @@
+# Exhaustive Rendered Parity Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Restore every actual starter route surface and prove correct rendering at every horizontal width from 320px through 3840px, including zoom-out/wide-shell behavior.
+
+**Architecture:** Replace the broken prose exclusion boundary at its source, then make actual-route DOM inventory and responsive sweep the primary acceptance path. Keep synthetic component parity only as supplemental evidence. Full-resolution screenshots and live-oracle comparisons remain mandatory before user approval.
+
+**Tech Stack:** Docusaurus 3.10, React, TypeScript, Sass, Tailwind CSS 4, Base UI, shadcn Base Nova, Playwright, Jest.
+
+## Global Constraints
+
+- Live `ui.shadcn.com` rendered examples win when registry source conflicts.
+- Registry-backed UI stays on official Base Nova component source.
+- Plain prose/shell surfaces use the live shadcn docs shell oracle.
+- Generated OpenAPI content is not modified.
+- No commit, push, deployment, or publication before explicit visual approval.
+- Card shadow removal remains the only pre-approved visual exception.
+- Missing selectors, routes, surfaces, widths, themes, or states fail validation.
+
+---
+
+### Task 1: Actual-route prose regression contract
+
+**Files:**
+
+- Create: `scripts/audit-rendered-surfaces.cjs`
+- Create: `artifacts/rendered-surfaces/inventory.json`
+- Test: `packages/docusaurus-theme/src/theme/prose-contract.test.ts`
+
+**Interfaces:**
+
+- Produces: `inventoryRoute(page, route, viewport, theme): Promise<RouteInventory>`.
+- Produces: a JSON row for every visible article element with route, selector, index, text fingerprint, role, computed metrics, and screenshot path.
+
+- [ ] **Step 1: Write a failing source contract**
+
+Assert that every prose selector excludes only `.theme-doc-markdown [data-slot]` descendants and never uses bare `:not([data-slot] *)`.
+
+- [ ] **Step 2: Write failing browser assertions**
+
+For `/guides/markdown-gfm`, require:
+
+```js
+assert(h1.fontSize !== paragraph.fontSize);
+assert(h2.fontSize !== paragraph.fontSize);
+assert(ul.listStyleType !== "none");
+assert(ol.listStyleType !== "none");
+assert(li.display === "list-item");
+assert(blockquote.paddingLeft !== "0px");
+assert(image.rect.width <= image.naturalWidth);
+```
+
+Missing required selectors throw instead of returning.
+
+- [ ] **Step 3: Run and preserve the red result**
+
+Run: `node scripts/audit-rendered-surfaces.cjs --route guides/markdown-gfm --width 1440 --theme dark`
+
+Expected: FAIL for heading scale, list markers, blockquote spacing, and oversized image.
+
+---
+
+### Task 2: Repair prose/component cascade ownership
+
+**Files:**
+
+- Modify: `packages/docusaurus-theme/src/theme/base.scss:346-526`
+- Modify: `packages/docusaurus-theme/src/theme/base.test.ts`
+- Test: `packages/docusaurus-theme/src/theme/prose-contract.test.ts`
+
+**Interfaces:**
+
+- Consumes: failing selectors and metrics from Task 1.
+- Produces: prose rules that apply to article elements while excluding official components nested inside the article.
+
+- [ ] **Step 1: Replace the invalid exclusion boundary**
+
+Use article-local component exclusions equivalent to:
+
+```scss
+:not(
+  .theme-doc-markdown [data-slot],
+  .theme-doc-markdown [data-slot] *
+)
+```
+
+Do not match outer shell slots such as `sidebar-inset`.
+
+- [ ] **Step 2: Restore semantic visual surfaces**
+
+Set explicit oracle-backed heading scale/rhythm, paragraph rhythm, list markers/indentation/nesting, task-list alignment, blockquote spacing, inline-code treatment, and bounded media behavior. Keep table, Alert, Accordion, Tabs, Card, and CodeBlock interiors outside prose selectors.
+
+- [ ] **Step 3: Run focused tests**
+
+Run:
+
+```bash
+yarn jest packages/docusaurus-theme/src/theme/base.test.ts packages/docusaurus-theme/src/theme/prose-contract.test.ts --runInBand
+node scripts/audit-rendered-surfaces.cjs --route guides/markdown-gfm --width 1440 --theme dark
+```
+
+Expected: PASS with no suppressed Markdown surfaces.
+
+---
+
+### Task 3: Exhaustive real-route surface inventory
+
+**Files:**
+
+- Modify: `scripts/audit-rendered-surfaces.cjs`
+- Create: `artifacts/rendered-surfaces/inventory.json`
+- Create: `artifacts/rendered-surfaces/coverage.md`
+
+**Interfaces:**
+
+- Produces: `discoverRoutes(): string[]` from docs source, sidebar, navbar, and footer data.
+- Produces: coverage counts by route, category, selector, state, viewport, and theme.
+
+- [ ] **Step 1: Discover routes instead of hard-coding them**
+
+Map every `examples/docs-starter/docs/**/*.{md,mdx}` file to a route and merge internal routes from Docusaurus output. Fail when any source doc lacks an audited URL.
+
+- [ ] **Step 2: Enumerate every rendered category**
+
+Inventory article prose plus Navbar, NavigationMenu, Sidebar, Breadcrumb, TOC, footer, pagination, edit link, BackToTop, Sheet, theme menu, Tooltip, Alert, Accordion, Tabs, Card, Table, CodeBlock, Mermaid, and every visible child instance.
+
+- [ ] **Step 3: Add semantic and ownership checks**
+
+Each row records its official component or shell oracle. Unknown ownership fails coverage generation.
+
+---
+
+### Task 4: Continuous responsive sweep and real interactions
+
+**Files:**
+
+- Create: `scripts/sweep-responsive-routes.cjs`
+- Modify: `scripts/audit-docs-starter.cjs`
+- Create: `artifacts/responsive-sweep/results.json`
+- Create: `artifacts/responsive-sweep/report.md`
+
+**Interfaces:**
+
+- Consumes: discovered routes and surface categories from Task 3.
+- Produces: one result per route × theme × width (`320..3840`).
+
+- [ ] **Step 1: Sweep every integer width**
+
+At each width, use a fixed representative height and assert:
+
+```js
+scrollWidth <= clientWidth
+no visible element has zero width or height
+no element overlaps fixed Navbar/Sidebar/Sheet boundaries
+all list markers and heading hierarchy remain valid
+shell mode matches the observed breakpoint state
+```
+
+- [ ] **Step 2: Detect breakpoint transitions**
+
+Record every width where Navbar, Sidebar, TOC, Sheet, table, code, or content geometry changes mode. Re-run `-1 / exact / +1` with hover, keyboard focus, active, open, expanded, selected, disabled, loading, Escape, focus restoration, and scroll states.
+
+- [ ] **Step 3: Remove blind exceptions**
+
+Do not exempt table containers or CodeBlocks from overflow checks. Require intended internal scrolling and prohibit page-level overflow/clipping.
+
+---
+
+### Task 5: Oracle comparison, original screenshots, and release validation
+
+**Files:**
+
+- Modify: `scripts/compare-base-nova.cjs`
+- Create: `artifacts/actual-route-parity/report.md`
+- Create: `artifacts/actual-route-parity/results.json`
+- Create: original screenshots and focused diffs under `artifacts/actual-route-parity/`
+- Modify: `artifacts/visual-approval.md`
+
+**Interfaces:**
+
+- Consumes: actual-route inventory and breakpoint results.
+- Produces: element-indexed official/local evidence without body/font/width/attribute/floating-context mutation.
+
+- [ ] **Step 1: Compare actual callsites**
+
+Use real user routes and interactions. Synthetic fixtures remain supplemental and cannot satisfy completion.
+
+- [ ] **Step 2: Capture original-resolution evidence**
+
+Capture every route in light/dark at discovered breakpoints and interaction states. Contact sheets are indexes only. Review original PNGs and store focused official/local comparisons.
+
+- [ ] **Step 3: Run final validation**
+
+```bash
+yarn jest --runInBand --testPathIgnorePatterns='packages/docusaurus-plugin-openapi-docs/src/markdown/createSchema.test.ts'
+yarn tsc -p examples/docs-starter/tsconfig.json --noEmit
+yarn workspace @aeei/docusaurus-theme build
+yarn workspace @aeei/docs-starter build
+node scripts/audit-rendered-surfaces.cjs
+node scripts/sweep-responsive-routes.cjs
+node scripts/audit-docs-starter.cjs
+git diff --check
+```
+
+Pack `@aeei/docusaurus-theme@0.1.0`, install it into an isolated copy of the starter, and run its production build.
+
+- [ ] **Step 4: Stop at visual approval**
+
+Present original screenshots, coverage, responsive sweep, actual-route parity, and residual risks. Do not commit, push, deploy, or publish until the user explicitly approves.
diff --git a/docs/superpowers/plans/2026-07-19-actual-ui-parity-recovery.md b/docs/superpowers/plans/2026-07-19-actual-ui-parity-recovery.md
new file mode 100644
index 000000000..0bc9db443
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-19-actual-ui-parity-recovery.md
@@ -0,0 +1,60 @@
+# Actual UI parity recovery test plan
+
+## Source
+
+- User rejection and screenshots from 2026-07-19.
+- `AGENTS.md` Base Nova Visual Parity Contract.
+- Oracle: `https://ui.shadcn.com/docs/components/base/*`.
+
+## Acceptance
+
+- Card shadow removal is the only visual exception.
+- Missing selectors, states, routes, or interaction outcomes fail.
+- No contextual exclusions.
+- Chromium raw geometry retains 1/64 CSS-pixel values.
+- Automation does not replace original-resolution manual review or user approval.
+
+## Minimal Playwright E2E
+
+Target: `tests/theme-parity.spec.ts`
+
+### 1. Desktop navigation controls change real state
+
+Precondition: Markdown route at desktop width.
+
+Steps/outcomes:
+
+- Collapse and expand each LNB category by accessible button.
+- `aria-expanded` changes and descendants become hidden/visible.
+- Collapse and expand the whole LNB; content allocation changes and focusable restore control appears.
+- Open GNB NavigationMenu; menu links become visible; Escape closes it and restores focus.
+
+### 2. Content controls preserve user-visible behavior
+
+Precondition: MDX and Markdown routes.
+
+Steps/outcomes:
+
+- Select another Tab; selected state and panel content change.
+- Expand Details; body becomes visible; keyboard activation works.
+- Copy CodeBlock; clipboard receives exact code and feedback state appears.
+- Theme menu changes light/dark and persists through navigation.
+
+### 3. Critical visual relations are viewport-consistent
+
+Precondition: `390`, `1024`, and `1440`; light/dark.
+
+Outcomes:
+
+- GNB branding/menu separation is nonzero and follows the approved official composition.
+- Every rendered prose heading has the approved next-sibling flow spacing; component roots are not accidentally excluded.
+- Tabs heading-to-root spacing is exact.
+- CodeBlock owned background is identical across viewport sizes.
+- Desktop shell does not substitute a different content surface from mobile.
+- No page-level horizontal overflow.
+
+## Broader checks
+
+- Source contracts verify every rendered shared component imports the one official registry SSOT.
+- Existing route inventory and integer-width sweep remain supplemental; assertions are strengthened around state change and visual relations.
+- Original screenshots are inspected manually after all automated checks pass.
diff --git a/docs/superpowers/plans/2026-07-20-search-providers.md b/docs/superpowers/plans/2026-07-20-search-providers.md
new file mode 100644
index 000000000..62d6dedd9
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-20-search-providers.md
@@ -0,0 +1,131 @@
+# Optional Search Providers Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add optional `false | "local" | "algolia"` search providers to `@aeei/docusaurus-theme`, with automatic production indexing for local search and the live shadcn command-menu UI.
+
+**Architecture:** The theme plugin validates and publishes the selected provider through Docusaurus global data. Local mode extracts deterministic section records from rendered docs during `postBuild`; the browser lazily fetches and searches that static JSON. Algolia mode keeps the Docusaurus provider but uses the same shadcn trigger and the existing token adapter.
+
+**Tech Stack:** Docusaurus 3.10 plugin lifecycle, React 18/19, TypeScript, Cheerio, official shadcn 4.12.0 Base Nova Dialog/Command/InputGroup, Base UI, cmdk, Playwright, Jest.
+
+## Global Constraints
+
+- Search defaults to disabled and emits no trigger, index, or request.
+- `search: "local"` automatically indexes every rendered Markdown/MDX route on each production build.
+- `search: "algolia"` emits no local index and requires complete standard Docusaurus Algolia config.
+- Local queries and content never leave the internal server/browser.
+- Search UI follows the live `ui.shadcn.com` command-menu trigger, dialog, list, selected row, and footer geometry.
+- No consumer Tailwind/Sass configuration.
+- No generated OpenAPI source modification.
+- No commit, push, deployment, or publication before explicit visual approval.
+
+---
+
+### Task 1: Provider options and deterministic local index
+
+**Files:**
+
+- Create: `packages/docusaurus-theme/src/search/types.ts`
+- Create: `packages/docusaurus-theme/src/search/build-index.ts`
+- Create: `packages/docusaurus-theme/src/search/build-index.test.ts`
+- Modify: `packages/docusaurus-theme/src/index.ts`
+- Modify: `packages/docusaurus-theme/package.json`
+
+**Interfaces:**
+
+- Produces `SearchProvider = false | "local" | "algolia"`.
+- Produces `SearchRecord`, `SearchIndex`, `buildSearchIndex()` and `writeSearchIndex()`.
+- Publishes `{search: {provider}}` as plugin global data.
+
+- [ ] Write failing tests covering invalid options, disabled/Algolia no-index behavior, local route extraction, `noIndex`, fixture exclusion, heading anchors, Unicode normalization, deterministic ordering, and removed-page cleanup.
+- [ ] Run `yarn jest packages/docusaurus-theme/src/search/build-index.test.ts --runInBand`; expect missing module/API failures.
+- [ ] Add direct `cheerio` dependency and implement deterministic rendered-HTML extraction from `postBuild` routes into `build/search-index.json` only for local mode.
+- [ ] Validate Algolia mode against `themeConfig.algolia.appId`, `apiKey`, and `indexName`; throw an actionable build error when incomplete.
+- [ ] Re-run the focused Jest test; expect all assertions to pass.
+
+### Task 2: Official Base Nova command primitives
+
+**Files:**
+
+- Create: `packages/docusaurus-theme/src/theme/components/ui/dialog.tsx`
+- Create: `packages/docusaurus-theme/src/theme/components/ui/command.tsx`
+- Create: `packages/docusaurus-theme/src/theme/components/ui/input-group.tsx`
+- Create: `packages/docusaurus-theme/src/theme/components/ui/textarea.tsx`
+- Create: `packages/docusaurus-theme/src/theme/components/ui/spinner.tsx`
+- Modify: `packages/docusaurus-theme/src/theme/registry-source-contract.test.ts`
+- Modify: `packages/docusaurus-theme/VENDORED_SOURCES.md`
+- Modify: `packages/docusaurus-theme/THIRD_PARTY_NOTICES.md`
+- Modify: `packages/docusaurus-theme/package.json`
+
+**Interfaces:**
+
+- Produces official Dialog, Command, InputGroup, Textarea, and Spinner exports.
+- Command depends on `cmdk`; placeholder icons are replaced only with corresponding Lucide icons.
+
+- [ ] Extend registry hash/source tests with the five official Base Nova files and fail before files exist.
+- [ ] Copy official shadcn 4.12.0 Base sources, changing only import paths and Lucide placeholder imports.
+- [ ] Add direct `cmdk` dependency and attribution/source entries.
+- [ ] Run registry contract, theme build, and LSP; expect source identity and types to pass.
+
+### Task 3: Dependency-free local ranking and live shadcn UI
+
+**Files:**
+
+- Create: `packages/docusaurus-theme/src/theme/components/local-search/search.ts`
+- Create: `packages/docusaurus-theme/src/theme/components/local-search/search.test.ts`
+- Create: `packages/docusaurus-theme/src/theme/components/local-search/index.tsx`
+- Modify: `packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx`
+- Modify: `packages/docusaurus-theme/src/theme/base.scss`
+
+**Interfaces:**
+
+- Produces `searchRecords(records, query, limit = 8)`.
+- Produces `<LocalSearch />` reading `/search-index.json` lazily.
+- Consumes plugin global provider data.
+
+- [ ] Write failing ranking tests for NFKC/lowercase normalization, Unicode tokens, all-token matching, title > section > body ranking, deterministic ties, snippets, and eight-result limit.
+- [ ] Implement minimal dependency-free ranking and pass focused tests.
+- [ ] Add the live shadcn trigger (`Search documentation…`/`Search…`), Dialog, Command input/list, selected row, loading/empty/error states, footer Enter hint, Mod+K, routing, and focus restoration.
+- [ ] Keep Algolia mode behind the same trigger; disabled mode returns `null`.
+- [ ] Add Playwright RED tests for disabled, local production index, open/query/select/navigate, keyboard, empty/error, mobile, light/dark, and focus restoration.
+- [ ] Build and serve the starter; make Playwright tests green without local visual overrides outside the approved search composition.
+
+### Task 4: Consumer configuration and search guide
+
+**Files:**
+
+- Modify: `examples/docs-starter/docusaurus.config.ts`
+- Modify: `examples/docs-starter/config-contract.test.ts`
+- Create: `examples/docs-starter/docs/guides/search.md`
+- Modify: `examples/docs-starter/sidebars.ts`
+- Modify: `packages/docusaurus-theme/README.md`
+- Modify: `packages/docusaurus-theme/src/package-contract.test.ts`
+
+**Interfaces:**
+
+- Starter registers `["@aeei/docusaurus-theme", {search: "local"}]`.
+- Public consumer example documents `{search: "algolia"}` plus standard `themeConfig.algolia`.
+
+- [ ] Write failing config/package/docs assertions for all three provider modes and automatic MD/MDX indexing.
+- [ ] Enable local mode in the starter and add the search guide with security, build/serve, exclusion, refresh, and troubleshooting sections.
+- [ ] Document Algolia for public docs/blogs and prohibit Admin API keys.
+- [ ] Build the starter and assert `build/search-index.json` contains the new guide route and excludes `/base-nova-parity`.
+
+### Task 5: Exhaustive verification and evidence
+
+**Files:**
+
+- Modify: `scripts/sweep-responsive-routes.cjs`
+- Modify: `scripts/capture-actual-route-evidence.cjs`
+- Modify: `artifacts/validation/README.md`
+- Modify: `artifacts/visual-approval.md`
+
+**Interfaces:**
+
+- Search states become mandatory actual-route evidence.
+
+- [ ] Add search trigger/dialog/result/keyboard/focus assertions to the responsive and critical audits.
+- [ ] Capture original-resolution desktop/mobile × light/dark search screenshots and compare them with live shadcn at matching states.
+- [ ] Run Playwright, scoped Jest, type/LSP, theme build, starter build, isolated npm tarball build, Base Nova `406/406`, route inventory, rendered audit, shell/TOC audits, and every integer width `320..3840`.
+- [ ] Run focused Prettier and `git diff --check`.
+- [ ] Update validation counts and present screenshots for explicit user approval; do not commit or publish.
diff --git a/docs/superpowers/specs/2026-07-18-exhaustive-rendered-parity-design.md b/docs/superpowers/specs/2026-07-18-exhaustive-rendered-parity-design.md
new file mode 100644
index 000000000..c8f84c695
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-18-exhaustive-rendered-parity-design.md
@@ -0,0 +1,68 @@
+# Exhaustive rendered parity design
+
+## Objective
+
+Restore every rendered starter element—not only synthetic fixtures—to the live shadcn Base Nova oracle, then prove coverage across every horizontal width from 320px through 3840px, including zoom-out/wide-shell behavior, without hiding integration defects.
+
+## Diagnosis
+
+The current prose selectors use exclusions such as `:not([data-slot] *)`. Every docs article sits inside the official Sidebar shell, whose ancestors have `data-slot`. Consequently every Markdown descendant matches `[data-slot] *` and is excluded from the prose rules. Tailwind preflight then wins: headings inherit `15px`, lists keep `list-style: none`, margins collapse, and media expands to the content width.
+
+The existing comparator cannot catch this because it primarily targets a synthetic fixture route, mutates body typography and fixture widths, and injects floating context. The browser audit captures screenshots but neither evaluates them nor asserts Markdown semantics.
+
+## Considered approaches
+
+1. **Keep synthetic fixture parity and add isolated prose patches** — rejected. It repeats the blind spot and cannot prove actual-route integration.
+2. **Screenshot baseline only** — rejected. It detects raster changes but cannot explain missing semantics, distinguish intended content changes, or prove element coverage.
+3. **Actual-route DOM/metric contract + responsive sweep + full-resolution visual review** — selected. It combines deterministic semantic assertions, exact oracle-backed component metrics, continuous responsive coverage, and human-readable visual evidence.
+
+## Architecture
+
+### 1. Rendered surface inventory
+
+Generate the route list from all starter Markdown/MDX docs and Docusaurus navigation data. On each route, enumerate every visible article and shell element with a stable surface category, selector, element index, semantic role, text fingerprint, and owning theme adapter. The validation report fails if a source route or required surface lacks coverage.
+
+### 2. Prose isolation
+
+Scope prose exclusions only to official component roots located _inside_ `.theme-doc-markdown`. An outer shell `[data-slot]` must never suppress article typography. Keep component interiors isolated from prose rules. Validate headings, paragraphs, lists, task lists, links, emphasis, blockquotes, inline code, code blocks, images, tables, admonitions, details, Tabs, and Mermaid containers.
+
+Use the live `ui.shadcn.com` `.typeset` CSS snapshot as the prose SSOT, adapted only where Docusaurus integration requires it:
+
+- preserve the separate page-title oracle for the synthetic or first content `h1`;
+- exclude only article-local `[data-slot]` component roots and `.theme-code-block` interiors;
+- never treat raw `svg` as prose media.
+
+### 3. Oracle ownership
+
+- Registry-backed UI uses the official Base Nova component source and live rendered component state.
+- CodeBlock uses the live shadcn documentation code surface.
+- Plain prose, TOC, Mermaid, pagination, footer, and shell-only surfaces use the live shadcn documentation shell because no registry component exists.
+- No fixture width/body-font/attribute/floating-context mutation may count as actual-route proof.
+
+### 4. Responsive verification
+
+Sweep every integer width from `320` through `3840` for every real route in light and dark mode. At every width assert no unintended horizontal overflow, clipping, overlap, zero-area content, lost list markers, broken heading hierarchy, incorrect responsive shell mode, or uncapped wide-shell drift. Explicitly record breakpoint transitions and test `-1 / exact / +1` widths with interactions.
+
+Full state screenshots are captured at representative widths and every discovered breakpoint boundary. Screenshots remain full resolution; contact sheets are navigation aids only and never validation evidence.
+
+### 5. Validation outputs
+
+Produce:
+
+- actual-route surface inventory with coverage totals;
+- responsive sweep JSON listing all widths/routes/themes;
+- semantic/metric failures with selector and element index;
+- original screenshots and official/local comparisons;
+- focused diff images where a common oracle surface exists;
+- standard Jest, TypeScript/LSP, clean builds, browser interaction audit, isolated tarball consumer build, Prettier, and diff-check logs.
+
+## Boundaries
+
+- Generated OpenAPI content remains untouched.
+- No commit, push, deployment, or npm publication before explicit user visual approval.
+- The synthetic parity fixture may remain supplemental but cannot satisfy actual-route acceptance.
+- Card shadow remains the only pre-existing visual exception unless the user explicitly changes it.
+
+## Completion rule
+
+Work is incomplete if any rendered element is uninventoried, any width in `320–3840` is untested, any actual route/state fails, any screenshot mismatch is unexplained, or the user has not visually approved the original-resolution evidence.
diff --git a/docs/superpowers/specs/2026-07-20-local-docs-search-design.md b/docs/superpowers/specs/2026-07-20-local-docs-search-design.md
new file mode 100644
index 000000000..0ed0b3f6e
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-20-local-docs-search-design.md
@@ -0,0 +1,150 @@
+# Optional Docs Search Providers Design
+
+## Objective
+
+Add optional local and Algolia search providers to `@aeei/docusaurus-theme` without consumer Tailwind/Sass configuration. Internal docs use the self-hosted local index; public docs/blogs may use Docusaurus’ first-class Algolia integration.
+
+The local feature is intentionally modest: reliable title, heading, and body keyword search with a Base Nova command dialog. It does not provide analytics, typo-tolerant AI search, synonyms, or cross-site federation.
+
+## Consumer API
+
+Search is disabled by default. Consumers choose one provider through the existing Docusaurus theme registration.
+
+Internal/self-hosted docs use the built-in local provider; no separate plugin is required:
+
+```ts
+themes: [
+  "@docusaurus/theme-mermaid",
+  ["@aeei/docusaurus-theme", { search: "local" }],
+];
+```
+
+Public documentation or blogs can use Docusaurus’ first-class Algolia integration:
+
+```ts
+themes: [
+  "@docusaurus/theme-mermaid",
+  ["@aeei/docusaurus-theme", { search: "algolia" }],
+];
+
+themeConfig: {
+  algolia: {
+    appId: process.env.ALGOLIA_APP_ID,
+    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
+    indexName: process.env.ALGOLIA_INDEX_NAME,
+  },
+}
+```
+
+The theme exports this stable option:
+
+```ts
+export type DocusaurusThemeOptions = {
+  search?: false | "local" | "algolia";
+};
+```
+
+Behavior:
+
+- `search` omitted or `false`: no trigger, no local index, and no search request.
+- `search: "local"`: generate the local index and render the Base Nova command dialog.
+- `search: "algolia"`: do not generate a local index; use Docusaurus’ Algolia provider behind the same Base Nova trigger and a token-driven Base Nova DocSearch adapter.
+- `search: "algolia"` without a complete `themeConfig.algolia` fails the build with an actionable configuration error.
+- The included internal starter enables `search: "local"` as the working example.
+- Result limits and ranking remain theme-owned defaults; no speculative configuration surface is exposed.
+
+## Security boundary
+
+- Search queries and indexed content never leave the browser or the internal server.
+- `search-index.json` contains searchable documentation text and must remain behind the same network/auth boundary as the rendered documentation.
+- Navigation, footer, test fixtures, and elements explicitly marked for exclusion are not indexed.
+
+## Index generation
+
+When `search: "local"`, `@aeei/docusaurus-theme` generates `search-index.json` in the Docusaurus production output during `postBuild`. Algolia and disabled modes never emit this file.
+
+The generator scans rendered HTML, selects the rendered documentation article, and emits section records containing:
+
+```ts
+type SearchRecord = {
+  id: string;
+  url: string;
+  pageTitle: string;
+  sectionTitle: string;
+  text: string;
+};
+```
+
+Rules:
+
+- One page-level record plus one record per rendered heading section.
+- Index page title, heading text, paragraphs, lists, tables, and inline code.
+- Exclude navigation, footer, hidden content, the `/base-nova-parity` fixture, and elements marked `data-search-exclude`.
+- Normalize whitespace and Unicode with `NFKC`; preserve original text for snippets.
+- Generate deterministic JSON ordering so unchanged docs produce unchanged output.
+- Every Markdown/MDX route added to Docusaurus is automatically included on the next production build; consumers never maintain a page list.
+- Edited documents update and removed documents disappear on the next clean build.
+- Search is supported in production `build` + `serve`; the dialog shows a clear unavailable state if the index is absent during development.
+
+## Search behavior
+
+The browser lazily fetches the index the first time the dialog opens and caches it for the session.
+
+Matching is deliberately simple and dependency-free:
+
+- Normalize the query with `NFKC` and lowercase it.
+- Split on Unicode letter/number boundaries.
+- Require every query token to occur in the record.
+- Rank page-title matches above section-title matches, and section-title matches above body matches.
+- Prefer exact and prefix matches over body substring matches.
+- Return at most eight results.
+- Generate a short plain-text snippet around the first body match.
+
+No fuzzy typo correction, stemming, remote requests, or analytics.
+
+## UI composition
+
+Use official shadcn 4.12.0 Base Nova registry components for the shared trigger and local provider:
+
+- Existing official `Button` trigger.
+- Official `Dialog`, `Command`, and `InputGroup` sources.
+- Lucide `Search`, `FileText`, and `CornerDownLeft` icons.
+
+Algolia owns its modal DOM. Its adapter must map every visible rest/hover/focus/selected/loading/empty/mobile/dark metric to the corresponding Base Nova Command/Dialog surface without changing Algolia behavior or accessibility.
+
+Desktop trigger: `Search` plus `⌘ K`/`Ctrl K`. Mobile trigger: icon-only Button with `Search documentation` accessible name.
+
+Dialog behavior:
+
+- Open from trigger or Mod+K.
+- Autofocus the command input.
+- Show loading, empty-query guidance, no-results, unavailable-index, and result states.
+- Arrow keys move selection; Enter navigates; Escape closes and restores trigger focus.
+- Results show page title, optional section title, and one snippet.
+- Use Docusaurus routing for same-site navigation.
+- Light/dark, mobile/desktop, focus-visible, selected, loading, empty, error, and open states follow official Base Nova metrics.
+
+## Documentation
+
+Add `examples/docs-starter/docs/guides/search.md` and include it in the Guides sidebar. It explains:
+
+- Choosing `false`, `"local"`, or `"algolia"` in the theme options.
+- Local search requires no credentials and keeps content internal.
+- Algolia setup for public docs/blogs, including Search-only key usage, crawler requirements, and the prohibition on exposing an Admin API key.
+- Production build/serve behavior.
+- What content is indexed and excluded.
+- `data-search-exclude` usage.
+- Index refresh on each deployment.
+- The requirement that `search-index.json` remain behind the same auth/network boundary.
+- Troubleshooting for a missing or stale index.
+
+Remove the unused Algolia environment/config branch and DocSearch-only adapter styles from the starter/theme.
+
+## Validation
+
+- Unit tests for provider option validation, disabled/local/Algolia output, Algolia configuration failure, automatic new-route indexing, deterministic HTML extraction, normalization, ranking, snippets, exclusions, and result limits.
+- Contract tests for exact official Dialog/Command/InputGroup registry sources.
+- Playwright tests for trigger, Mod+K, lazy loading, query results, keyboard selection, routing, Escape focus restoration, mobile, light/dark, empty, and unavailable-index states.
+- Confirm index generation in starter production build and isolated npm tarball consumer build.
+- Re-run the full `320..3840` responsive sweep, route inventory, Base Nova comparison, builds, LSP, Prettier, and `git diff --check`.
+- No commit, push, deployment, or publication before explicit user visual approval.
diff --git a/examples/docs-starter/.env.example b/examples/docs-starter/.env.example
new file mode 100644
index 000000000..d73919640
--- /dev/null
+++ b/examples/docs-starter/.env.example
@@ -0,0 +1,4 @@
+# Optional public DocSearch values. Leave all unset to hide search.
+ALGOLIA_APP_ID=
+ALGOLIA_SEARCH_API_KEY=
+ALGOLIA_INDEX_NAME=
diff --git a/examples/docs-starter/.gitignore b/examples/docs-starter/.gitignore
new file mode 100644
index 000000000..ab8c9a4ac
--- /dev/null
+++ b/examples/docs-starter/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.docusaurus/
+build/
+.env
+.env.local
diff --git a/examples/docs-starter/config-contract.test.ts b/examples/docs-starter/config-contract.test.ts
new file mode 100644
index 000000000..a08519c96
--- /dev/null
+++ b/examples/docs-starter/config-contract.test.ts
@@ -0,0 +1,71 @@
+import fs from "fs";
+import path from "path";
+
+const config = fs.readFileSync(
+  path.join(__dirname, "docusaurus.config.ts"),
+  "utf8"
+);
+const customStyles = fs.readFileSync(
+  path.join(__dirname, "src/css/custom.css"),
+  "utf8"
+);
+const themeStyles = fs.readFileSync(
+  path.join(__dirname, "../../packages/docusaurus-theme/src/theme/shadcn.css"),
+  "utf8"
+);
+
+it("uses the Pages project URL and official Mermaid integration", () => {
+  expect(config).toContain('url: "https://aeei.github.io"');
+  expect(config).toContain('baseUrl: "/docusaurus-theme/"');
+  expect(config).toContain("markdown: { mermaid: true }");
+  expect(config).toContain('"@docusaurus/theme-mermaid"');
+  expect(config).toContain('favicon: "img/favicon.ico"');
+  expect(fs.existsSync(path.join(__dirname, "static/img/favicon.ico"))).toBe(
+    true
+  );
+  expect(fs.existsSync(path.join(__dirname, "static/img/favicon.svg"))).toBe(
+    false
+  );
+});
+
+it("enables local search and the theme-native Copy Page control", () => {
+  expect(config).toContain('{ search: "local", copyPage: true }');
+  expect(config).toContain('"docusaurus-plugin-copy-page-button"');
+  expect(config).toContain("injectButton: false");
+  expect(config).toContain("generateMarkdownRoutes: true");
+});
+
+it("enables only a complete project-owned Algolia configuration", () => {
+  for (const variable of [
+    "ALGOLIA_APP_ID",
+    "ALGOLIA_SEARCH_API_KEY",
+    "ALGOLIA_INDEX_NAME",
+  ]) {
+    expect(config).toContain(`process.env.${variable}`);
+  }
+  expect(config).toContain("...(algolia ? { algolia } : {})");
+  expect(config).not.toMatch(
+    /J0EABTYI1A|indexName:\s*["']docusaurus-openapi|441074cace/
+  );
+});
+
+it("uses the shared spacing token outside the token owner", () => {
+  expect(customStyles).not.toMatch(/\d+(?:\.\d+)?rem\b/);
+  expect(customStyles).not.toMatch(
+    /^[ \t]*(?:padding|margin|gap|width|height|border(?:-(?:top|right|bottom|left))?):[^;]*\d+(?:\.\d+)?(?:px|rem)\b/m
+  );
+  expect(customStyles).toContain("var(--spacing)");
+  expect(fs.existsSync(path.join(__dirname, "src/css/tokens.css"))).toBe(false);
+  expect(themeStyles).toContain("--border-width: 1px");
+});
+
+it("keeps the visible footer concise while legal notices ship as files", () => {
+  expect(config).toContain("Maintained by aeei");
+  expect(config).not.toContain('title: "Credits"');
+  expect(config).not.toContain('label: "MIT"');
+  expect(config).not.toContain("Third-party notices");
+  expect(fs.existsSync(path.join(__dirname, "../../LICENSE"))).toBe(true);
+  expect(
+    fs.existsSync(path.join(__dirname, "../../THIRD_PARTY_NOTICES.md"))
+  ).toBe(true);
+});
diff --git a/examples/docs-starter/docs/base-nova-parity.mdx b/examples/docs-starter/docs/base-nova-parity.mdx
new file mode 100644
index 000000000..f17dfc705
--- /dev/null
+++ b/examples/docs-starter/docs/base-nova-parity.mdx
@@ -0,0 +1,22 @@
+---
+id: base-nova-parity
+slug: /base-nova-parity
+unlisted: true
+hide_title: true
+hide_table_of_contents: true
+pagination_next: null
+pagination_prev: null
+---
+
+import BaseNovaParityFixtures from "@site/src/components/BaseNovaParityFixtures";
+
+<BaseNovaParityFixtures />
+
+<div data-parity="code">
+
+<!-- prettier-ignore -->
+```tsx
+import { Button } from "@/components/ui/button"
+```
+
+</div>
diff --git a/examples/docs-starter/docs/guides/_category_.json b/examples/docs-starter/docs/guides/_category_.json
new file mode 100644
index 000000000..e79050872
--- /dev/null
+++ b/examples/docs-starter/docs/guides/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Guides",
+  "position": 2
+}
diff --git a/examples/docs-starter/docs/guides/markdown-gfm.md b/examples/docs-starter/docs/guides/markdown-gfm.md
new file mode 100644
index 000000000..dec3aa272
--- /dev/null
+++ b/examples/docs-starter/docs/guides/markdown-gfm.md
@@ -0,0 +1,150 @@
+---
+sidebar_position: 1
+title: Markdown and GFM
+description: Fixture coverage for heading scale, flow spacing, lists, links, media, and code ownership.
+---
+
+# Markdown and GFM
+
+This page exercises standard Markdown, GFM, and Docusaurus docs conventions.
+
+## Table of contents depth
+
+### Inline code heading `provider-id`
+
+This heading verifies that table-of-contents code uses the canonical inline code surface.
+
+### Link targets
+
+Jump to [paragraph flow](#paragraph-flow-and-emphasis), [lists](#lists-and-tasks), [tables](#tables), or [details](#details-and-admonitions).
+
+### Links and images
+
+- Internal link → [MDX playground](../showcase/mdx-playground)
+- External link → [GitHub](https://github.com/aeei/docusaurus-theme)
+- Image fixture:
+
+![Hero art](/img/docs-hero.svg)
+
+<figure>
+
+![Figure fixture](/img/docs-hero.svg)
+
+<figcaption>Figure surfaces should own their image and caption spacing.</figcaption>
+</figure>
+
+## Paragraph flow and emphasis
+
+This first paragraph establishes the default prose flow rhythm with an [inline link](https://docusaurus.io) and `inline code`.
+
+This consecutive paragraph checks paragraph-to-paragraph spacing with **strong text**, _emphasized text_, and ~~deleted text~~ in the same run.
+
+A hard line break ends here.\
+This sentence starts after the rendered break.
+
+An automatic link renders from https://docusaurus.io/docs/markdown-features while escaped characters remain literal: \*not emphasized\*.
+
+A footnote reference keeps supporting detail out of the main reading flow.[^fixture-note]
+
+### Heading ladder
+
+#### Fourth level heading
+
+Paragraph after h4 keeps the official h + \* spacing contract.
+
+##### Fifth level heading
+
+Paragraph after h5 keeps muted heading styling while preserving normal body flow.
+
+###### Sixth level heading
+
+Paragraph after h6 keeps uppercase treatment and the same paragraph rhythm.
+
+## Lists and tasks
+
+- Top-level unordered item
+  - Second-level unordered item
+    - Third-level unordered item with `nested code`
+- Another unordered item with **bold** and _italic_
+
+1. Ordered list item
+2. Nested content
+   - Bullet item
+   - Another bullet with a follow-up paragraph.
+
+     Nested paragraph under a list item keeps the half-em offset.
+
+- [x] Theme package linked from workspace
+- [x] Algolia config intentionally omitted
+- [ ] Publish workflow out of scope for this starter task
+
+## Tables
+
+| Surface     | Example         | Notes                           |
+| ----------- | --------------- | ------------------------------- |
+| Inline code | `pnpm dlx`      | Renders with theme code styling |
+| Block code  | fenced snippets | Preserves syntax colors         |
+| Quote       | > blockquote    | Inherits token-driven borders   |
+
+## Code
+
+Inline code looks like `const ready = true`.
+
+```tsx title="src/components/hello.tsx"
+export function Hello() {
+  return <span>Hello docs theme</span>;
+}
+```
+
+```bash title="build.sh"
+yarn workspace @aeei/docs-starter build
+```
+
+```ts title="highlighted-lines.ts" {2}
+const stable = true;
+const highlighted = "This line is highlighted";
+const complete = stable && highlighted.length > 0;
+```
+
+## Quotes and rules
+
+> Blockquotes should remain readable across light and dark modes.
+>
+> Second quoted paragraph keeps the first-child reset inside blockquote.
+
+---
+
+### Post-rule heading
+
+Paragraph after the horizontal rule heading keeps the official flow margin instead of the generic h + \* reset.
+
+## Details and admonitions
+
+### Token note
+
+:::note Tokens
+The theme ships the complete Base Nova Neutral component and Docusaurus shell token set. The starter adds fixture layout CSS only.
+:::
+
+### Sidebar tip
+
+:::tip Sidebar
+The sidebar is autogenerated from the `docs/` directory.
+:::
+
+### Expandable disclosure
+
+<details data-audit-details="forwarded" title="Details attributes">
+  <summary data-audit-summary="forwarded">Expandable details</summary>
+
+Hidden body copy can include lists, `code`, and [links](../showcase/mermaid).
+
+</details>
+
+## Wrapping edge cases
+
+A deliberately long URL must wrap without resizing the page: https://example.com/documentation/components/base-nova/responsive-layout/this-path-is-intentionally-long-enough-to-exercise-mobile-line-wrapping-without-horizontal-page-overflow.
+
+`this_inline_code_token_is_intentionally_long_enough_to_require_local_scrolling_or_wrapping_without_expanding_the_document_shell`
+
+[^fixture-note]: Footnotes use the same body typography, link treatment, and spacing tokens as the surrounding document.
diff --git a/examples/docs-starter/docs/guides/search.md b/examples/docs-starter/docs/guides/search.md
new file mode 100644
index 000000000..ab892c407
--- /dev/null
+++ b/examples/docs-starter/docs/guides/search.md
@@ -0,0 +1,79 @@
+---
+sidebar_position: 2
+title: Search and Copy Page
+---
+
+# Search and Copy Page
+
+## Local search
+
+Enable build-time search in the theme options:
+
+```ts
+const config = {
+  themes: [["@aeei/docusaurus-theme", { search: "local" }]],
+};
+```
+
+`docusaurus build` extracts rendered Markdown and MDX routes into `build/search-index.json`. New and edited docs are included automatically on every production build.
+
+The browser loads the index only when search opens. Keep both the rendered docs and `search-index.json` behind the same auth and network boundary.
+
+### Verify locally
+
+```bash
+npm run build
+npm run serve
+```
+
+Development mode does not create the production index. Use build + serve when validating results.
+
+## Algolia
+
+Public documentation can use Algolia instead:
+
+```ts
+const config = {
+  themes: [["@aeei/docusaurus-theme", { search: "algolia" }]],
+  themeConfig: {
+    algolia: {
+      appId: process.env.ALGOLIA_APP_ID,
+      apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
+      indexName: process.env.ALGOLIA_INDEX_NAME,
+    },
+  },
+};
+```
+
+Use a Search API key. Never expose an Admin API key in browser configuration.
+
+## Copy Page
+
+Install the Markdown-route backend:
+
+```bash
+npm install docusaurus-plugin-copy-page-button
+```
+
+Disable its injected UI and let the theme render Base Nova controls:
+
+```ts
+const config = {
+  plugins: [
+    [
+      "docusaurus-plugin-copy-page-button",
+      { injectButton: false, generateMarkdownRoutes: true },
+    ],
+  ],
+  themes: [["@aeei/docusaurus-theme", { copyPage: true }]],
+};
+```
+
+The primary action copies the current page as Markdown. The menu can open the generated `.md` route or copy its URL.
+
+## Troubleshooting
+
+- No local results: run a production build and confirm `build/search-index.json` exists.
+- Copy fails: confirm the matching `.md` route returns HTTP 200.
+- Search trigger missing: verify `search` is exactly `"local"` or `"algolia"`.
+- Copy control missing: enable `copyPage` and configure the plugin with `generateMarkdownRoutes: true`.
diff --git a/examples/docs-starter/docs/intro.md b/examples/docs-starter/docs/intro.md
new file mode 100644
index 000000000..d857e7f80
--- /dev/null
+++ b/examples/docs-starter/docs/intro.md
@@ -0,0 +1,25 @@
+---
+sidebar_position: 1
+title: Starter overview
+description: Docs-first starter powered by @aeei/docusaurus-theme.
+slug: /
+---
+
+# Starter overview
+
+This starter shows a docs-first setup for **@aeei/docusaurus-theme** with Markdown, GFM, MDX, and Mermaid enabled.
+
+![Starter preview](/img/docs-hero.svg)
+
+## Included routes
+
+- [Markdown + GFM guide](./guides/markdown-gfm)
+- [MDX playground](./showcase/mdx-playground)
+- [Mermaid examples](./showcase/mermaid)
+
+## What it demonstrates
+
+- compiled official Base Nova Neutral component and Docusaurus shell tokens
+- autogenerated docs sidebar with Nextra-style collapse and theme controls
+- build-time local search and page-level Markdown copy/view
+- Pages-ready config for `https://aeei.github.io/docusaurus-theme/`
diff --git a/examples/docs-starter/docs/showcase/_category_.json b/examples/docs-starter/docs/showcase/_category_.json
new file mode 100644
index 000000000..f3a245159
--- /dev/null
+++ b/examples/docs-starter/docs/showcase/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Showcase",
+  "position": 3
+}
diff --git a/examples/docs-starter/docs/showcase/mdx-playground.mdx b/examples/docs-starter/docs/showcase/mdx-playground.mdx
new file mode 100644
index 000000000..c4a78e9ad
--- /dev/null
+++ b/examples/docs-starter/docs/showcase/mdx-playground.mdx
@@ -0,0 +1,108 @@
+---
+sidebar_position: 1
+title: MDX playground
+description: Fixture coverage for Tabs and custom MDX components.
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { ArrowUp, LoaderCircle } from "lucide-react";
+import { Button } from "@theme/components/ui/button";
+import { FeatureCallout } from "../../src/components/FeatureCallout";
+
+# MDX playground
+
+<div className="markdown-demo-grid">
+  <FeatureCallout title="Custom component">
+    MDX can render local React components alongside normal Markdown.
+  </FeatureCallout>
+  <FeatureCallout title="Theme components">
+    Tabs below come from Docusaurus and inherit the docs theme styling.
+  </FeatureCallout>
+</div>
+
+## Tabs
+
+<Tabs>
+  <TabItem value="install" label="Install" default>
+
+```bash
+npm install @aeei/docusaurus-theme @docusaurus/theme-mermaid
+```
+
+  </TabItem>
+  <TabItem value="config" label="Config">
+
+```ts
+export default {
+  markdown: { mermaid: true },
+  themes: ["@docusaurus/theme-mermaid", "@aeei/docusaurus-theme"],
+};
+```
+
+  </TabItem>
+  <TabItem value="tokens" label="Tokens">
+
+```css
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.2 0 0);
+}
+```
+
+  </TabItem>
+</Tabs>
+
+## Button states
+
+<div className="base-nova-button-fixture">
+  <Button variant="outline">Ready</Button>
+  <Button variant="outline" disabled>
+    Disabled
+  </Button>
+  <Button variant="outline" disabled>
+    <LoaderCircle
+      className="size-4 animate-spin"
+      data-slot="spinner"
+      data-icon="inline-start"
+      role="status"
+      aria-label="Loading"
+    />
+    Generating
+  </Button>
+</div>
+
+## Button sizes
+
+<div className="base-nova-button-fixture">
+  <Button size="xs" aria-label="Extra small button">
+    XS
+  </Button>
+  <Button size="sm" aria-label="Small button">
+    Small
+  </Button>
+  <Button aria-label="Default button">Default</Button>
+  <Button size="lg" aria-label="Large button">
+    Large
+  </Button>
+  <Button size="icon-xs" aria-label="Extra small icon button">
+    <ArrowUp aria-hidden="true" />
+  </Button>
+  <Button size="icon-sm" aria-label="Small icon button">
+    <ArrowUp aria-hidden="true" />
+  </Button>
+  <Button size="icon" aria-label="Default icon button">
+    <ArrowUp aria-hidden="true" />
+  </Button>
+  <Button size="icon-lg" aria-label="Large icon button">
+    <ArrowUp aria-hidden="true" />
+  </Button>
+</div>
+
+## JSX mixed with Markdown
+
+The starter keeps authoring simple:
+
+- write Markdown for most content
+- drop into JSX for interactive or repeated UI
+- keep components local to the starter unless they belong in the theme package
diff --git a/examples/docs-starter/docs/showcase/mermaid.md b/examples/docs-starter/docs/showcase/mermaid.md
new file mode 100644
index 000000000..b540251fb
--- /dev/null
+++ b/examples/docs-starter/docs/showcase/mermaid.md
@@ -0,0 +1,41 @@
+---
+sidebar_position: 2
+title: Mermaid examples
+description: Fixture coverage for official Mermaid flowchart, sequence, and state diagrams.
+---
+
+# Mermaid examples
+
+## Flowchart
+
+```mermaid
+flowchart LR
+  A[Write docs] --> B{Need component?}
+  B -->|No| C[Use Markdown]
+  B -->|Yes| D[Use MDX]
+  C --> E[Ship docs page]
+  D --> E
+```
+
+## Sequence
+
+```mermaid
+sequenceDiagram
+  participant Author
+  participant Starter
+  participant Theme
+  Author->>Starter: Add docs content
+  Theme->>Starter: Ship Base Nova UI tokens
+  Theme-->>Author: Render styled docs
+```
+
+## State
+
+```mermaid
+stateDiagram-v2
+  [*] --> Draft
+  Draft --> Review
+  Review --> Published
+  Review --> Draft: revise
+  Published --> [*]
+```
diff --git a/examples/docs-starter/docusaurus.config.ts b/examples/docs-starter/docusaurus.config.ts
new file mode 100644
index 000000000..17b75061b
--- /dev/null
+++ b/examples/docs-starter/docusaurus.config.ts
@@ -0,0 +1,110 @@
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
+import { themes as prismThemes } from "prism-react-renderer";
+
+const algolia =
+  process.env.ALGOLIA_APP_ID &&
+  process.env.ALGOLIA_SEARCH_API_KEY &&
+  process.env.ALGOLIA_INDEX_NAME
+    ? {
+        appId: process.env.ALGOLIA_APP_ID,
+        apiKey: process.env.ALGOLIA_SEARCH_API_KEY,
+        indexName: process.env.ALGOLIA_INDEX_NAME,
+      }
+    : undefined;
+
+const config: Config = {
+  title: "Docusaurus Theme",
+  tagline: "A docs-first starter for @aeei/docusaurus-theme.",
+  favicon: "img/favicon.ico",
+  url: "https://aeei.github.io",
+  baseUrl: "/docusaurus-theme/",
+  organizationName: "aeei",
+  projectName: "docusaurus-theme",
+  onBrokenLinks: "throw",
+  onBrokenAnchors: "throw",
+  trailingSlash: false,
+
+  markdown: { mermaid: true },
+  plugins: [
+    [
+      "docusaurus-plugin-copy-page-button",
+      { injectButton: false, generateMarkdownRoutes: true },
+    ],
+  ],
+  themes: [
+    "@docusaurus/theme-mermaid",
+    ["@aeei/docusaurus-theme", { search: "local", copyPage: true }],
+  ],
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          routeBasePath: "/",
+          sidebarPath: "./sidebars.ts",
+          editUrl:
+            "https://github.com/aeei/docusaurus-theme/edit/shadcn-theme/examples/docs-starter/",
+          showLastUpdateAuthor: false,
+          showLastUpdateTime: false,
+        },
+        blog: false,
+        pages: false,
+        theme: {
+          customCss: "./src/css/custom.css",
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  themeConfig: {
+    image: "img/social-card.svg",
+    colorMode: {
+      defaultMode: "light",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
+    docs: {
+      sidebar: { hideable: true, autoCollapseCategories: false },
+    },
+    navbar: {
+      title: "Docusaurus Theme",
+      items: [
+        { type: "doc", docId: "intro", label: "Docs", position: "left" },
+        {
+          label: "Showcase",
+          position: "left",
+          items: [
+            { label: "Markdown + GFM", to: "/guides/markdown-gfm" },
+            { label: "MDX", to: "/showcase/mdx-playground" },
+            { label: "Mermaid", to: "/showcase/mermaid" },
+          ],
+        },
+        {
+          href: "https://github.com/aeei/docusaurus-theme",
+          label: "GitHub",
+          position: "right",
+        },
+      ],
+    },
+    footer: {
+      style: "light",
+      links: [
+        {
+          title: "Docs",
+          items: [
+            { label: "Getting started", to: "/" },
+            { label: "Markdown + GFM", to: "/guides/markdown-gfm" },
+            { label: "Mermaid", to: "/showcase/mermaid" },
+          ],
+        },
+      ],
+      copyright: "Docusaurus Theme · Maintained by aeei",
+    },
+    ...(algolia ? { algolia } : {}),
+    prism: { theme: prismThemes.github, darkTheme: prismThemes.dracula },
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;
diff --git a/examples/docs-starter/package.json b/examples/docs-starter/package.json
new file mode 100644
index 000000000..380d6cc31
--- /dev/null
+++ b/examples/docs-starter/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@aeei/docs-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start --no-open",
+    "build": "docusaurus build",
+    "serve": "docusaurus serve",
+    "clear": "docusaurus clear"
+  },
+  "devDependencies": {
+    "@docusaurus/tsconfig": "3.10.1"
+  },
+  "dependencies": {
+    "@aeei/docusaurus-theme": "*",
+    "@docusaurus/core": "3.10.1",
+    "@docusaurus/plugin-content-docs": "3.10.1",
+    "@docusaurus/preset-classic": "3.10.1",
+    "@docusaurus/theme-common": "3.10.1",
+    "@docusaurus/theme-mermaid": "3.10.1",
+    "@mermaid-js/layout-elk": "^0.1.9",
+    "docusaurus-plugin-copy-page-button": "0.8.4",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
diff --git a/examples/docs-starter/sidebars.ts b/examples/docs-starter/sidebars.ts
new file mode 100644
index 000000000..1ccb74919
--- /dev/null
+++ b/examples/docs-starter/sidebars.ts
@@ -0,0 +1,7 @@
+import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
+
+const sidebars: SidebarsConfig = {
+  docsSidebar: [{ type: "autogenerated", dirName: "." }],
+};
+
+export default sidebars;
diff --git a/examples/docs-starter/src/components/BaseNovaParityFixtures.tsx b/examples/docs-starter/src/components/BaseNovaParityFixtures.tsx
new file mode 100644
index 000000000..f29f207a2
--- /dev/null
+++ b/examples/docs-starter/src/components/BaseNovaParityFixtures.tsx
@@ -0,0 +1,472 @@
+import React, { useEffect } from "react";
+import { CircleCheck, Frame, LoaderCircle } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@theme/components/ui/accordion";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@theme/components/ui/alert";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@theme/components/ui/breadcrumb";
+import { Button } from "@theme/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@theme/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@theme/components/ui/dropdown-menu";
+import { Input } from "@theme/components/ui/input";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@theme/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@theme/components/ui/sheet";
+import {
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@theme/components/ui/sidebar";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@theme/components/ui/table";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@theme/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@theme/components/ui/tooltip";
+
+const invoices = [
+  ["INV001", "Paid", "Credit Card", "$250.00"],
+  ["INV002", "Pending", "PayPal", "$150.00"],
+  ["INV003", "Unpaid", "Bank Transfer", "$350.00"],
+  ["INV004", "Paid", "Credit Card", "$450.00"],
+  ["INV005", "Paid", "PayPal", "$550.00"],
+  ["INV006", "Pending", "Bank Transfer", "$200.00"],
+  ["INV007", "Unpaid", "Credit Card", "$300.00"],
+];
+
+const sectionStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 32,
+  padding: 32,
+};
+
+export default function BaseNovaParityFixtures(): React.ReactNode {
+  useEffect(() => {
+    const previousFontSize = document.body.style.fontSize;
+    const previousLineHeight = document.body.style.lineHeight;
+    document.body.style.fontSize = "16px";
+    document.body.style.lineHeight = "24px";
+    return () => {
+      document.body.style.fontSize = previousFontSize;
+      document.body.style.lineHeight = previousLineHeight;
+    };
+  }, []);
+
+  return (
+    <div data-parity-fixtures style={sectionStyle}>
+      <section data-parity="button" style={{ display: "flex", gap: 8 }}>
+        <Button variant="outline">Button</Button>
+        <Button variant="outline" disabled>
+          <LoaderCircle
+            data-slot="spinner"
+            data-icon="inline-start"
+            aria-hidden="true"
+            style={{ animation: "spin 1s linear infinite" }}
+          />
+          Generating
+        </Button>
+      </section>
+
+      <section data-parity="accordion" style={{ width: 384 }}>
+        <Accordion>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>What are your shipping options?</AccordionTrigger>
+            <AccordionContent>
+              We offer standard (5-7 days), express (2-3 days), and overnight
+              shipping. Free shipping on international orders.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </section>
+
+      <section data-parity="tabs">
+        <Tabs defaultValue="overview">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="reports">Reports</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview">
+            <Card>
+              <CardHeader>
+                <CardTitle>Overview</CardTitle>
+                <CardDescription>
+                  View your key metrics and recent project activity. Track
+                  progress across all your active projects.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                You have 12 active projects and 3 pending tasks.
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </section>
+
+      <section data-parity="card" style={{ display: "flex", width: 384 }}>
+        <Card size="default" style={{ width: "100%", maxWidth: 384 }}>
+          <CardHeader>
+            <CardTitle>Login to your account</CardTitle>
+            <CardDescription>
+              Enter your email below to login to your account
+            </CardDescription>
+            <CardAction>
+              <Button variant="link">Sign Up</Button>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <form>
+              <div
+                style={{ display: "flex", flexDirection: "column", gap: 24 }}
+              >
+                <div style={{ display: "grid", gap: 8 }}>
+                  <label
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      fontSize: 14,
+                      lineHeight: "14px",
+                      fontWeight: 500,
+                    }}
+                  >
+                    Email
+                  </label>
+                  <Input type="email" placeholder="m@example.com" />
+                </div>
+                <div style={{ display: "grid", gap: 8 }}>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      fontSize: 14,
+                      lineHeight: "20px",
+                    }}
+                  >
+                    <label style={{ fontWeight: 500 }}>Password</label>
+                    <a
+                      href="#"
+                      style={{
+                        marginLeft: "auto",
+                        color: "inherit",
+                        fontWeight: 400,
+                      }}
+                    >
+                      Forgot your password?
+                    </a>
+                  </div>
+                  <Input type="password" />
+                </div>
+              </div>
+            </form>
+          </CardContent>
+          <CardFooter style={{ flexDirection: "column", gap: 8 }}>
+            <Button style={{ width: "100%" }}>Login</Button>
+            <Button variant="outline" style={{ width: "100%" }}>
+              Login with Google
+            </Button>
+          </CardFooter>
+        </Card>
+      </section>
+
+      <section
+        data-parity="alert"
+        style={{ display: "grid", gap: 16, width: 448 }}
+      >
+        <Alert>
+          <CircleCheck aria-hidden="true" />
+          <AlertTitle>Payment successful</AlertTitle>
+          <AlertDescription>
+            Your payment of $29.99 has been processed. A receipt has been sent
+            to your email address.
+          </AlertDescription>
+        </Alert>
+      </section>
+
+      <section data-parity="table" style={{ width: 558 }}>
+        <Table>
+          <TableCaption>A list of your recent invoices.</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead style={{ width: 100 }}>Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead style={{ textAlign: "right" }}>Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invoices.map(([invoice, status, method, amount]) => (
+              <TableRow key={invoice}>
+                <TableCell style={{ fontWeight: 500 }}>{invoice}</TableCell>
+                <TableCell>{status}</TableCell>
+                <TableCell>{method}</TableCell>
+                <TableCell style={{ textAlign: "right" }}>{amount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell style={{ textAlign: "right" }}>$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </section>
+
+      <section data-parity="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={<Button size="icon-sm" variant="ghost" />}
+                >
+                  <BreadcrumbEllipsis />
+                  <span
+                    style={{
+                      position: "absolute",
+                      width: 1,
+                      height: 1,
+                      overflow: "hidden",
+                    }}
+                  >
+                    Toggle menu
+                  </span>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem>Documentation</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Components</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </section>
+
+      <section
+        data-parity="sidebar"
+        style={{ boxSizing: "border-box", width: 255, padding: 8 }}
+      >
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton render={<a href="#" />}>
+              <Frame aria-hidden="true" />
+              <span>Design Engineering</span>
+            </SidebarMenuButton>
+            <SidebarMenuAction aria-label="More actions">•••</SidebarMenuAction>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </section>
+
+      <section data-parity="navigation-menu">
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul style={{ width: 384 }}>
+                  {[
+                    [
+                      "Introduction",
+                      "Re-usable components built with Tailwind CSS.",
+                    ],
+                    [
+                      "Installation",
+                      "How to install dependencies and structure your app.",
+                    ],
+                    [
+                      "Typography",
+                      "Styles for headings, paragraphs, lists...etc",
+                    ],
+                  ].map(([title, description]) => (
+                    <li key={title}>
+                      <NavigationMenuLink href="#">
+                        <div
+                          style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 4,
+                            fontSize: 14,
+                            lineHeight: "20px",
+                          }}
+                        >
+                          <div style={{ lineHeight: 1, fontWeight: 500 }}>
+                            {title}
+                          </div>
+                          <div style={{ color: "var(--muted-foreground)" }}>
+                            {description}
+                          </div>
+                        </div>
+                      </NavigationMenuLink>
+                    </li>
+                  ))}
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </section>
+
+      <section data-parity="sheet" style={{ display: "flex" }}>
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" />}>
+            Left
+          </SheetTrigger>
+          <SheetContent side="left">
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>
+                Make changes to your profile here. Click save when you&apos;re
+                done.
+              </SheetDescription>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      </section>
+
+      <section data-parity="dropdown" style={{ display: "flex" }}>
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button variant="outline" />}>
+            Open
+          </DropdownMenuTrigger>
+          <DropdownMenuContent style={{ width: 160, height: 339 }}>
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              <DropdownMenuItem>
+                Profile<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                Billing<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                Settings<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>Team</DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>Email</DropdownMenuItem>
+                  <DropdownMenuItem>Message</DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuItem>
+                New Team<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>GitHub</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuItem disabled>API</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              Log out<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </section>
+
+      <TooltipProvider>
+        <section data-parity="tooltip" style={{ display: "flex" }}>
+          <Tooltip>
+            <TooltipTrigger render={<span />}>
+              <Button variant="outline" disabled>
+                Disabled
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>This feature is currently unavailable</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger render={<Button variant="outline" />}>
+              يسار
+            </TooltipTrigger>
+            <TooltipContent side="left">Add to library</TooltipContent>
+          </Tooltip>
+        </section>
+      </TooltipProvider>
+    </div>
+  );
+}
diff --git a/examples/docs-starter/src/components/FeatureCallout.tsx b/examples/docs-starter/src/components/FeatureCallout.tsx
new file mode 100644
index 000000000..b0fc575db
--- /dev/null
+++ b/examples/docs-starter/src/components/FeatureCallout.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@theme/components/ui/card";
+
+export function FeatureCallout({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle role="heading" aria-level={3}>
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}
diff --git a/examples/docs-starter/src/css/custom.css b/examples/docs-starter/src/css/custom.css
new file mode 100644
index 000000000..7e95e49fd
--- /dev/null
+++ b/examples/docs-starter/src/css/custom.css
@@ -0,0 +1,46 @@
+.theme-doc-markdown .theme-doc-footer {
+  border-top: var(--border-width) solid var(--border);
+  padding-top: calc(var(--spacing) * 8);
+}
+
+.markdown-demo-grid {
+  display: grid;
+  gap: calc(var(--spacing) * 4);
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(calc(var(--spacing) * 56), 1fr)
+  );
+  margin: calc(var(--spacing) * 6) 0;
+}
+
+.base-nova-button-fixture {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--spacing) * 2);
+  margin-block: calc(var(--spacing) * 4);
+}
+
+.markdown-demo-note {
+  color: var(--muted-foreground);
+  font-size: var(--theme-text-sm);
+}
+
+.hero-art {
+  width: 100%;
+  max-width: calc(var(--spacing) * 128);
+  margin: calc(var(--spacing) * 6) 0;
+  border: var(--border-width) solid var(--border);
+  border-radius: calc(var(--radius) + var(--spacing));
+}
+
+[data-parity="tabs"] {
+  font-size: calc(var(--spacing) * 3.75);
+  line-height: calc(var(--spacing) * 6.5625);
+}
+
+@media (max-width: 30em) {
+  [data-parity="tabs"] {
+    font-size: calc(var(--spacing) * 4.725);
+    line-height: calc(var(--spacing) * 8.26875);
+  }
+}
diff --git a/examples/docs-starter/src/theme.d.ts b/examples/docs-starter/src/theme.d.ts
new file mode 100644
index 000000000..13d3dea9b
--- /dev/null
+++ b/examples/docs-starter/src/theme.d.ts
@@ -0,0 +1,55 @@
+declare module "@theme/components/ui/accordion" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/accordion";
+}
+
+declare module "@theme/components/ui/alert" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/alert";
+}
+
+declare module "@theme/components/ui/breadcrumb" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/breadcrumb";
+}
+
+declare module "@theme/components/ui/button" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/button";
+}
+
+declare module "@theme/components/ui/card" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/card";
+}
+
+declare module "@theme/components/ui/dropdown-menu" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/dropdown-menu";
+}
+
+declare module "@theme/components/ui/input" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/input";
+}
+
+declare module "@theme/components/ui/navigation-menu" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/navigation-menu";
+}
+
+declare module "@theme/components/ui/sheet" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/sheet";
+}
+
+declare module "@theme/components/ui/sidebar" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/sidebar";
+}
+
+declare module "@theme/hooks/use-mobile" {
+  export function useIsMobile(): boolean;
+}
+
+declare module "@theme/components/ui/table" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/table";
+}
+
+declare module "@theme/components/ui/tabs" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/tabs";
+}
+
+declare module "@theme/components/ui/tooltip" {
+  export * from "@aeei/docusaurus-theme/src/theme/components/ui/tooltip";
+}
diff --git a/examples/docs-starter/static/img/docs-hero.svg b/examples/docs-starter/static/img/docs-hero.svg
new file mode 100644
index 000000000..aed17311d
--- /dev/null
+++ b/examples/docs-starter/static/img/docs-hero.svg
@@ -0,0 +1,17 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1200" height="630" rx="32" fill="#F4F4F5"/>
+  <rect x="70" y="70" width="1060" height="490" rx="28" fill="white" stroke="#D4D4D8" stroke-width="12"/>
+  <rect x="120" y="130" width="250" height="340" rx="20" fill="#FAFAFA" stroke="#E4E4E7" stroke-width="8"/>
+  <rect x="170" y="185" width="150" height="22" rx="11" fill="#18181B"/>
+  <rect x="170" y="235" width="110" height="14" rx="7" fill="#A1A1AA"/>
+  <rect x="170" y="270" width="140" height="14" rx="7" fill="#A1A1AA"/>
+  <rect x="170" y="305" width="95" height="14" rx="7" fill="#A1A1AA"/>
+  <rect x="410" y="130" width="650" height="82" rx="20" fill="#18181B"/>
+  <rect x="450" y="158" width="240" height="22" rx="11" fill="white" fill-opacity="0.92"/>
+  <rect x="410" y="245" width="650" height="130" rx="20" fill="#FAFAFA" stroke="#E4E4E7" stroke-width="8"/>
+  <rect x="450" y="290" width="190" height="18" rx="9" fill="#18181B"/>
+  <rect x="450" y="330" width="500" height="14" rx="7" fill="#A1A1AA"/>
+  <rect x="410" y="405" width="650" height="110" rx="20" fill="#F5F5F5" stroke="#E4E4E7" stroke-width="8"/>
+  <rect x="450" y="446" width="100" height="24" rx="12" fill="#18181B"/>
+  <rect x="570" y="446" width="100" height="24" rx="12" fill="#D4D4D8"/>
+</svg>
diff --git a/examples/docs-starter/static/img/favicon.ico b/examples/docs-starter/static/img/favicon.ico
new file mode 100644
index 000000000..c01d54bcd
Binary files /dev/null and b/examples/docs-starter/static/img/favicon.ico differ
diff --git a/examples/docs-starter/static/img/social-card.svg b/examples/docs-starter/static/img/social-card.svg
new file mode 100644
index 000000000..769ceef54
--- /dev/null
+++ b/examples/docs-starter/static/img/social-card.svg
@@ -0,0 +1,6 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1200" height="630" rx="32" fill="#18181B"/>
+  <rect x="72" y="72" width="1056" height="486" rx="28" fill="#27272A" stroke="#3F3F46" stroke-width="8"/>
+  <text x="120" y="250" fill="white" font-family="Inter, Arial, sans-serif" font-size="72" font-weight="700">@aeei/docusaurus-theme</text>
+  <text x="120" y="330" fill="#D4D4D8" font-family="Inter, Arial, sans-serif" font-size="36">Docs starter with Markdown, MDX, and Mermaid</text>
+</svg>
diff --git a/examples/docs-starter/tsconfig.json b/examples/docs-starter/tsconfig.json
new file mode 100644
index 000000000..df421e1be
--- /dev/null
+++ b/examples/docs-starter/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "@docusaurus/tsconfig",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "exclude": ["build", ".docusaurus"]
+}
diff --git a/jest.config.js b/jest.config.js
index bc1f68e35..395a26d81 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -11,6 +11,8 @@ module.exports = {
   roots: [
     "<rootDir>/packages/docusaurus-plugin-openapi-docs/src",
     "<rootDir>/packages/docusaurus-theme-openapi-docs/src",
+    "<rootDir>/packages/docusaurus-theme/src",
+    "<rootDir>/examples/docs-starter",
   ],
   moduleNameMapper: {
     "^chalk$": "<rootDir>/__mocks__/chalk.js",
diff --git a/openspec/changes/launch-docs-theme/.openspec.yaml b/openspec/changes/launch-docs-theme/.openspec.yaml
new file mode 100644
index 000000000..36a62421e
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/.openspec.yaml
@@ -0,0 +1,4 @@
+schema: spec-driven
+created: 2026-07-15
+goal: Publish a clean Docusaurus docs theme and starter while preserving
+  upstream attribution and minimizing rebase conflicts.
diff --git a/openspec/changes/launch-docs-theme/README.md b/openspec/changes/launch-docs-theme/README.md
new file mode 100644
index 000000000..634ca6797
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/README.md
@@ -0,0 +1,3 @@
+# launch-docs-theme
+
+Extract and launch @aeei/docusaurus-theme as a docs-only Base UI theme with a Markdown/MDX/Mermaid starter and GitHub Pages demo.
diff --git a/openspec/changes/launch-docs-theme/design.md b/openspec/changes/launch-docs-theme/design.md
new file mode 100644
index 000000000..ff0116f8e
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/design.md
@@ -0,0 +1,142 @@
+## Context
+
+The repository is a renamed fork at `aeei/docusaurus-theme`, with `origin/main` mirroring `PaloAltoNetworks/docusaurus-openapi-docs` and `shadcn-theme` carrying the product work. The current branch demonstrates the desired docs shell, but it edits the upstream OpenAPI theme and demo in place, mixes Base UI and Radix primitives, carries OpenAPI-only dependencies, and still exposes upstream branding/configuration in public surfaces.
+
+The first public product is a general Docusaurus docs theme, not an OpenAPI renderer. It needs an installable package, a Markdown-first starter, a GitHub Pages demo, accurate attribution, and a branch shape that can be rebased onto future upstream changes with little textual conflict.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Ship `@aeei/docusaurus-theme` as a docs-only package using official shadcn Base Nova source and Base UI primitives.
+- Let starter users work primarily in Markdown/MDX and static assets.
+- Support GFM and official Docusaurus Mermaid rendering.
+- Publish a representative starter to `https://aeei.github.io/docusaurus-theme/`.
+- Make repository About, README, screenshots, starter navigation, and footer describe this project while retaining clear upstream provenance.
+- Package all required license and third-party notice material.
+- Restore upstream-owned package/plugin/demo paths so future upstream rebases are predominantly additive.
+
+**Non-Goals:**
+
+- OpenAPI rendering, API explorer, schema UI, or generated OpenAPI MDX in the core package.
+- Math rendering, create CLI, custom domain, or an Algolia Admin/crawler implementation.
+- Copying Nextra source or requiring Tailwind configuration in consumer sites.
+- Publishing an OpenAPI addon in this change.
+
+## Decisions
+
+### 1. Add a new package instead of continuing the in-place fork
+
+Create `packages/docusaurus-theme` and move only docs-relevant seams into it. Restore `packages/docusaurus-theme-openapi-docs`, `packages/docusaurus-plugin-openapi-docs`, `packages/create-docusaurus-openapi-docs`, and `demo` to `origin/main` after parity.
+
+Alternative rejected: slimming the existing OpenAPI package. It keeps most conflicts and preserves unwanted runtime coupling. A fully separate repository was also rejected because this project intentionally retains GitHub fork provenance and sync behavior.
+
+### 2. Use Docusaurus classic as the lower theme layer
+
+The package overrides selected docs UI through Docusaurus theme aliases while classic retains routing, content loading, and fallback components. The package owns Layout/Navbar, docs sidebar, breadcrumbs, TOC, paginator, docs cards, code/Markdown presentation, color mode, mobile navigation, and back-to-top.
+
+OpenAPI components and their dependencies do not cross the package interface.
+
+### 3. Standardize interactive primitives on Base UI
+
+Use official shadcn `base-nova` registry source first. The primitive inventory is:
+
+- Button → `@base-ui/react/button`
+- Badge composition → `@base-ui/react/merge-props` and `use-render`
+- Sheet → `@base-ui/react/dialog`
+- DropdownMenu → `@base-ui/react/menu`
+- Tabs → `@base-ui/react/tabs`
+- NavigationMenu → `@base-ui/react/navigation-menu`
+- Tooltip → `@base-ui/react/tooltip`
+- Separator → `@base-ui/react/separator`
+- Sidebar/Breadcrumb composition → Base UI render utilities
+
+Production imports and package manifests must contain no `radix-ui` or `@radix-ui/*`. Lucide is the only icon source. Contract tests own the inventory so a second primitive stack cannot re-enter silently.
+
+### 4. Keep the consumer interface content-first
+
+`examples/docs-starter` uses an autogenerated filesystem sidebar. Normal author edits are limited to `docs/**/*.md`, `docs/**/*.mdx`, and `static/**`. Front matter controls title/order. `src/css/tokens.css` and `docusaurus.config.ts` are explicit customization seams, not routine content files.
+
+The starter is both documentation and an executable fixture for headings/TOC, links/images, GFM tables/task lists/strikethrough, code, admonitions, details, tabs, custom MDX, and Mermaid flowchart/sequence/state diagrams.
+
+### 5. Use official Mermaid integration
+
+Add `@docusaurus/theme-mermaid`, set `markdown.mermaid: true`, and validate diagrams in light and dark modes. No custom Mermaid renderer is introduced.
+
+### 6. Treat the starter as the Pages source
+
+Set:
+
+- `url`: `https://aeei.github.io`
+- `baseUrl`: `/docusaurus-theme/`
+- `organizationName`: `aeei`
+- `projectName`: `docusaurus-theme`
+
+Pull requests run validation/build only. Pushes to `shadcn-theme` deploy `examples/docs-starter/build` with full-SHA-pinned official Pages actions and minimum `pages: write` / `id-token: write` permissions. After the first successful deployment, set the repository homepage to the Pages URL.
+
+### 7. Make search optional and owner-correct
+
+The first deployment omits Algolia config and search UI. It never copies the upstream app ID, search-only key, or index name.
+
+After Pages is public, apply for Algolia DocSearch using the Pages and repository URLs. Search activates only when all of `ALGOLIA_APP_ID`, `ALGOLIA_SEARCH_API_KEY`, and `ALGOLIA_INDEX_NAME` exist. Only the browser-safe search-only key is accepted. Admin keys and personal tokens are unsupported. The existing token-driven DocSearch adapter remains available, and `Powered by Algolia` remains when enabled.
+
+### 8. Replace public branding, not provenance
+
+The root README is rewritten around `@aeei/docusaurus-theme`: live demo, real light/dark screenshots, quick start, authoring features, customization, development, roadmap, and attribution. Capture deterministic final starter screenshots at desktop `1440×900` and store WebP assets under `.github/assets`; a README `<picture>` selects light/dark by viewer preference.
+
+The starter footer is concise:
+
+- `Docusaurus Theme · Maintained by aeei`
+- Docs, Markdown, GitHub, MIT, and Third-party notices links
+- `Based on Docusaurus OpenAPI Docs by Palo Alto Networks`
+- `Built with Docusaurus`
+
+It does not list every dependency or claim a project-wide `© aeei` copyright. GitHub's automatic `forked from` relationship remains visible.
+
+### 9. Centralize license/provenance data
+
+Keep the upstream MIT notice. Add `THIRD_PARTY_NOTICES.md` and `LICENSES/`. Each notice records project, source URL, use scope, exact version/commit or registry snapshot date, copied file paths, SPDX/license identifier, and the package-local license-text path.
+
+Record Palo Alto Networks, Docusaurus, shadcn/ui, Base UI, Lucide, Mermaid, and every actually shipped copied/vendored dependency. Nextra is identified only as a visual reference when acknowledged. Audit the current Toss-labelled typography values; replace them with a project-owned neutral scale if provenance/reuse terms are not explicit.
+
+The npm tarball must include README, LICENSE, third-party notices, and applicable license texts. `npm pack` and clean-install tests verify this.
+
+### 10. Keep rebase-only maintenance
+
+The GitHub fork `main` is synced from its parent with `gh repo sync`. The product branch is rebased onto `origin/main` and pushed with `--force-with-lease`. Merge and squash merges remain disabled; rebase merge is enabled. `rerere` remains enabled locally.
+
+The completion audit requires no diff under upstream-owned packages/plugin/demo paths.
+
+### 11. Prepare a public scoped package
+
+The package identity is `@aeei/docusaurus-theme`, initially versioned `0.1.0` while its public interface stabilizes. Build, `npm pack`, tarball audit, clean-install smoke tests, and `npm publish --access public` are mandatory. Publication is approved; execution remains blocked until this machine authenticates an npm owner of the `@aeei` scope.
+
+## Risks / Trade-offs
+
+- [Root README and lockfile can still conflict during upstream rebase] → Accept these as the only recurring hotspots and keep product code in additive paths.
+- [Copied upstream components can drift semantically without textual conflicts] → Pin compatibility, retain contract/browser tests, and audit upstream theme changes per sync.
+- [Restoring the old package before extraction is complete can lose behavior] → Preserve the current implementation until package/starter parity and tarball smoke tests pass.
+- [Generic package name can obscure shadcn implementation] → State Base Nova prominently in description, README, keywords, and screenshots while keeping the product name stable.
+- [Algolia approval may be delayed or rejected] → Pages launches without a dead search control; search is a later configuration activation.
+- [Third-party provenance may be incomplete] → Treat license/provenance audit as a release gate; replace unclear assets/tokens instead of guessing.
+- [Rebase rewrites public commit IDs] → Use rebase-only policy and `--force-with-lease`; collaborators rebase their feature branches onto the updated product branch.
+
+## Migration Plan
+
+1. Establish OpenSpec artifacts and contract tests for package boundaries, Base UI inventory, and attribution files.
+2. Create `packages/docusaurus-theme` and migrate docs-only UI/styles without deleting the source reference.
+3. Replace remaining Radix Button/Badge/Sheet/DropdownMenu implementations with official Base Nova equivalents.
+4. Remove OpenAPI-only source and runtime dependencies from the new package.
+5. Build `examples/docs-starter` with Markdown/MDX/Mermaid fixtures, semantic tokens, project navbar/footer, and no Algolia config.
+6. Validate package build, starter build, browser matrix, and packed clean install.
+7. Restore upstream-owned package/plugin/demo paths to `origin/main` and run the empty-diff audit.
+8. Rewrite README, create final light/dark screenshots, and finish notices/licenses.
+9. Deploy Pages and set the repository homepage.
+10. After npm login confirms `@aeei` ownership, publish `0.1.0` publicly and verify registry metadata plus a clean registry install.
+11. Apply for DocSearch after the public URL exists; enable only the resulting project-owned index.
+
+Rollback before publication: reset to the last known-good current theme commit. Rollback after publication: deprecate the bad npm version, fix forward with a patch release, and redeploy the previous Pages artifact/commit.
+
+## Open Questions
+
+None for implementation. npm authentication and Algolia DocSearch approval are explicit external gates handled at their respective tasks; `npm whoami` currently reports `ENEEDAUTH`.
diff --git a/openspec/changes/launch-docs-theme/proposal.md b/openspec/changes/launch-docs-theme/proposal.md
new file mode 100644
index 000000000..0f13914f2
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/proposal.md
@@ -0,0 +1,38 @@
+## Why
+
+The current branch proves the shadcn-based UI but modifies the upstream OpenAPI theme and demo directly, carries unused OpenAPI runtime dependencies for docs-only consumers, and creates a large rebase conflict surface. We need a clean, public docs theme and starter now while preserving the fork relationship, attribution, and a low-conflict path for future upstream updates.
+
+## What Changes
+
+- **BREAKING**: Rename the public theme package from `docusaurus-theme-shadcn-docs` to `@aeei/docusaurus-theme`.
+- **BREAKING**: Make the first public package docs-only; remove OpenAPI rendering and OpenAPI runtime dependencies from the core theme.
+- Add a new additive `packages/docusaurus-theme` package that layers selected docs UI seams over Docusaurus classic and publish version `0.1.0` publicly as `@aeei/docusaurus-theme`.
+- Standardize all interactive primitives on official shadcn Base Nova source backed by Base UI; remove Radix runtime usage.
+- Add `examples/docs-starter` for Markdown, GFM, MDX, and Mermaid authoring with autogenerated navigation and semantic theme tokens.
+- Restore upstream-owned OpenAPI packages and `demo/` to `origin/main` after the new package reaches parity.
+- Replace upstream project branding, navigation, footer, Algolia credentials, and screenshots in the public starter and root README.
+- Publish the starter at `https://aeei.github.io/docusaurus-theme/` through GitHub Pages and set that URL as the repository homepage.
+- Keep search disabled until this site receives its own Algolia DocSearch application/index; never reuse upstream credentials.
+- Add complete license and third-party provenance files to the repository and published package.
+- Keep `origin/main` as the fork mirror and rebase `shadcn-theme` onto it; avoid direct edits to upstream-owned paths.
+
+## Capabilities
+
+### New Capabilities
+
+- `docs-theme-package`: Installable `@aeei/docusaurus-theme` package with Base UI-only docs navigation, content, code, responsive, and color-mode UI.
+- `docs-authoring`: Starter authoring experience for Markdown, GFM, MDX, Mermaid, static assets, autogenerated sidebars, and semantic token customization.
+- `public-docs-site`: GitHub Pages build/deployment, project README with real light/dark screenshots, repository metadata, and optional own-index DocSearch rollout.
+- `source-attribution`: Accurate footer links, acknowledgements, license texts, provenance records, and package-tarball notice guarantees.
+
+### Modified Capabilities
+
+None. This repository has no existing OpenSpec capability specs.
+
+## Impact
+
+- New paths: `packages/docusaurus-theme`, `examples/docs-starter`, OpenSpec capability specs, Pages workflow, license/notice assets, README screenshots.
+- Restored paths: `packages/docusaurus-theme-openapi-docs`, `packages/docusaurus-plugin-openapi-docs`, `packages/create-docusaurus-openapi-docs`, and `demo` must match `origin/main` at completion.
+- Dependencies: add official Docusaurus Mermaid support; retain Base UI and Lucide; remove Radix and OpenAPI runtime dependencies from the public core package.
+- Public interfaces: package name, Docusaurus theme registration, semantic CSS token contract, starter content paths, Pages URL, and optional Algolia environment variables.
+- Repository operations: rename-aware `origin`, rebase-only history, GitHub Pages configuration, About metadata, npm scope ownership, and future DocSearch application.
diff --git a/openspec/changes/launch-docs-theme/specs/docs-authoring/spec.md b/openspec/changes/launch-docs-theme/specs/docs-authoring/spec.md
new file mode 100644
index 000000000..b4c007695
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/specs/docs-authoring/spec.md
@@ -0,0 +1,55 @@
+## ADDED Requirements
+
+### Requirement: Content-first starter interface
+
+The starter SHALL allow routine authors to publish documentation by editing `docs/**/*.md`, `docs/**/*.mdx`, and `static/**` without editing theme source.
+
+#### Scenario: Author adds a document
+
+- **WHEN** an author adds a valid Markdown file beneath `docs/`
+- **THEN** the development and production builds SHALL include the document in navigation and routing
+
+### Requirement: Autogenerated sidebar
+
+The starter SHALL derive its default sidebar from the docs filesystem and SHALL allow title and order changes through front matter.
+
+#### Scenario: Author orders a document
+
+- **WHEN** an author sets `title` and `sidebar_position` in document front matter
+- **THEN** the generated sidebar SHALL display that label and order without a manual sidebar entry
+
+### Requirement: Markdown, GFM, and MDX fixtures
+
+The starter SHALL document and render headings, automatic anchors/TOC, emphasis, blockquotes, lists, links, local/static images, GFM tables/task lists/strikethrough, fenced and inline code, admonitions, details, tabs, front matter, and a custom MDX component.
+
+#### Scenario: Markdown fixture production build
+
+- **WHEN** CI builds the representative authoring fixture
+- **THEN** every declared Markdown/GFM/MDX feature SHALL render without compilation errors, broken links, or broken anchors
+
+### Requirement: Mermaid diagram support
+
+The starter SHALL enable official Docusaurus Mermaid support and provide flowchart, sequence, and state diagram fixtures.
+
+#### Scenario: Diagram rendering by color mode
+
+- **WHEN** the Mermaid fixture loads in light and dark modes
+- **THEN** each declared diagram SHALL be visible, legible, and free of page overflow
+
+### Requirement: Explicit customization seams
+
+The starter SHALL expose semantic token values in `src/css/tokens.css` and site metadata/navigation in `docusaurus.config.ts` as the supported customization seams.
+
+#### Scenario: Branding customization
+
+- **WHEN** a user changes documented token values and site metadata
+- **THEN** the theme SHALL update branding without requiring edits in `node_modules` or package source
+
+### Requirement: No upstream content leakage
+
+The starter SHALL NOT include upstream OpenAPI demo pages, API navigation, Palo Alto social/community links, or upstream Algolia credentials.
+
+#### Scenario: Starter content audit
+
+- **WHEN** CI scans starter source and built output
+- **THEN** upstream demo routes, credentials, and unrelated branding SHALL be absent while required attribution remains present
diff --git a/openspec/changes/launch-docs-theme/specs/docs-theme-package/spec.md b/openspec/changes/launch-docs-theme/specs/docs-theme-package/spec.md
new file mode 100644
index 000000000..1a0ddbc21
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/specs/docs-theme-package/spec.md
@@ -0,0 +1,83 @@
+## ADDED Requirements
+
+### Requirement: Public scoped theme package
+
+The system SHALL provide an installable package named `@aeei/docusaurus-theme` that composes with the Docusaurus classic preset and exposes docs UI through Docusaurus theme aliases.
+
+#### Scenario: Consumer registers the theme
+
+- **WHEN** a clean Docusaurus site installs the packed package and registers `@aeei/docusaurus-theme`
+- **THEN** the site production build SHALL succeed without importing workspace source paths
+
+### Requirement: Public npm release
+
+The package SHALL be published publicly as `@aeei/docusaurus-theme@0.1.0` after all package, license, and clean-install gates pass.
+
+#### Scenario: Registry publication
+
+- **WHEN** an authenticated npm owner of the `@aeei` scope publishes the validated tarball with public access
+- **THEN** npm registry metadata SHALL identify version `0.1.0`, this repository, the MIT license, and the expected package files
+
+#### Scenario: Clean registry install
+
+- **WHEN** a clean Docusaurus fixture installs `@aeei/docusaurus-theme@0.1.0` from npm
+- **THEN** its production build SHALL succeed without workspace links or unpublished dependencies
+
+### Requirement: Docs-only runtime boundary
+
+The package SHALL contain no OpenAPI renderer, API explorer, generated OpenAPI MDX contract, or OpenAPI-only runtime dependency.
+
+#### Scenario: Package boundary audit
+
+- **WHEN** CI scans production source, package exports, and runtime dependencies
+- **THEN** OpenAPI plugin, Redux, Postman, schema, request, response, and form runtime references SHALL be absent
+
+### Requirement: Base UI primitive consistency
+
+Every interactive primitive shipped by the package SHALL use Base UI, with official shadcn Base Nova registry source preferred, and SHALL NOT use Radix.
+
+#### Scenario: Primitive contract audit
+
+- **WHEN** CI checks Button, Badge, Sheet, DropdownMenu, Tabs, NavigationMenu, Tooltip, Separator, Sidebar, and Breadcrumb roles
+- **THEN** each role SHALL match its declared `@base-ui/react/*` source and no `radix-ui` or `@radix-ui/*` import or dependency SHALL exist
+
+### Requirement: Lucide-only icons
+
+The package SHALL use Lucide for visible UI icons and SHALL NOT ship legacy SVG masks, data URI icons, text glyph icons, or emoji icons.
+
+#### Scenario: Icon source audit
+
+- **WHEN** CI scans theme production source and styles
+- **THEN** visible icon implementations SHALL resolve to Lucide and forbidden legacy icon patterns SHALL be absent
+
+### Requirement: Semantic theme token interface
+
+The package SHALL consume semantic CSS tokens for color, radius, typography, and sidebar surfaces without owning consumer-specific values.
+
+#### Scenario: Consumer changes theme values
+
+- **WHEN** a consumer replaces values in its semantic token stylesheet
+- **THEN** the docs shell SHALL adopt those values without package source edits or a second component-local token system
+
+### Requirement: Precompiled theme styling
+
+The package SHALL include compiled runtime CSS and SHALL NOT require consumers to configure Tailwind or scan package source.
+
+#### Scenario: Clean consumer build
+
+- **WHEN** the packed package is installed into a Docusaurus site with no Tailwind dependency or configuration
+- **THEN** all theme styles SHALL load and the production build SHALL succeed
+
+### Requirement: Responsive and accessible docs shell
+
+The package SHALL provide keyboard-accessible desktop and mobile navigation, visible focus states, color-mode support, and focus restoration after dismissing overlays.
+
+#### Scenario: Mobile navigation keyboard flow
+
+- **WHEN** a keyboard user opens and closes the mobile navigation with Escape
+- **THEN** the overlay SHALL close and focus SHALL return to its trigger
+
+#### Scenario: Desktop sidebar collapse
+
+- **WHEN** a user collapses and expands the desktop sidebar
+- **THEN** content layout, accessible labels, persisted state, and reduced-motion behavior SHALL remain valid
diff --git a/openspec/changes/launch-docs-theme/specs/public-docs-site/spec.md b/openspec/changes/launch-docs-theme/specs/public-docs-site/spec.md
new file mode 100644
index 000000000..64a27dff9
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/specs/public-docs-site/spec.md
@@ -0,0 +1,74 @@
+## ADDED Requirements
+
+### Requirement: GitHub Pages project deployment
+
+The system SHALL deploy the starter to `https://aeei.github.io/docusaurus-theme/` with `/docusaurus-theme/` as its base path.
+
+#### Scenario: Direct route refresh
+
+- **WHEN** a user opens or hard-refreshes a documented route beneath the Pages base path
+- **THEN** the page and all local assets SHALL load successfully without root-path assumptions
+
+### Requirement: Validated Pages workflow
+
+Pull requests SHALL build and test without deploying, and pushes to `shadcn-theme` SHALL deploy only after the same validation passes.
+
+#### Scenario: Successful product-branch deployment
+
+- **WHEN** validation succeeds on a `shadcn-theme` push
+- **THEN** the workflow SHALL upload `examples/docs-starter/build` and deploy it using full-SHA-pinned official Pages actions with minimum required permissions
+
+#### Scenario: Failed validation
+
+- **WHEN** package or starter validation fails
+- **THEN** no new Pages deployment SHALL occur
+
+### Requirement: Project-owned repository identity
+
+The GitHub About panel and root README SHALL describe `aeei/docusaurus-theme`, while GitHub's fork relationship and a clear upstream attribution remain intact.
+
+#### Scenario: Public repository landing page
+
+- **WHEN** a visitor opens the repository
+- **THEN** the title, description, topics, install instructions, demo link, screenshots, and feature copy SHALL describe this project rather than the upstream demo
+
+### Requirement: Real responsive README preview
+
+The README SHALL display deterministic final starter captures for light and dark desktop themes using project-owned WebP assets.
+
+#### Scenario: GitHub color preference
+
+- **WHEN** GitHub renders the README for a light- or dark-preferring visitor
+- **THEN** the `<picture>` element SHALL select the matching `1440×900` theme screenshot with meaningful alt text
+
+### Requirement: Repository homepage points to Pages
+
+The repository homepage SHALL be empty before the first valid deployment and SHALL point to the project Pages URL after deployment.
+
+#### Scenario: First successful deployment
+
+- **WHEN** the Pages site is verified publicly
+- **THEN** the repository homepage SHALL be set to `https://aeei.github.io/docusaurus-theme/`
+
+### Requirement: Optional project-owned DocSearch
+
+Search SHALL be absent when Algolia configuration is incomplete and SHALL use only this project's DocSearch application/index when all public search variables exist.
+
+#### Scenario: First release without Algolia
+
+- **WHEN** any of `ALGOLIA_APP_ID`, `ALGOLIA_SEARCH_API_KEY`, or `ALGOLIA_INDEX_NAME` is unset
+- **THEN** `themeConfig.algolia` and the search control SHALL be absent
+
+#### Scenario: Approved DocSearch configuration
+
+- **WHEN** all three values from the approved project-owned DocSearch application are present
+- **THEN** search SHALL query the project index, support keyboard open/close/navigation, restore focus, and retain `Powered by Algolia`
+
+### Requirement: Browser quality matrix
+
+The public starter SHALL pass a desktop `1440×900` and mobile `390×844` matrix in light and dark modes for home, Markdown, and Mermaid routes.
+
+#### Scenario: Matrix validation
+
+- **WHEN** browser validation runs
+- **THEN** load errors, console errors, document-level horizontal overflow, broken essential controls, and broken attribution links SHALL each equal zero, with failure traces retained as artifacts
diff --git a/openspec/changes/launch-docs-theme/specs/source-attribution/spec.md b/openspec/changes/launch-docs-theme/specs/source-attribution/spec.md
new file mode 100644
index 000000000..1fff0980f
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/specs/source-attribution/spec.md
@@ -0,0 +1,64 @@
+## ADDED Requirements
+
+### Requirement: Preserve upstream license notice
+
+The repository and distributed package SHALL preserve the Palo Alto Networks MIT copyright and permission notice for copied or substantial upstream source.
+
+#### Scenario: License audit
+
+- **WHEN** repository and tarball license files are inspected
+- **THEN** the original upstream MIT notice SHALL be present and unmodified
+
+### Requirement: Complete third-party provenance
+
+`THIRD_PARTY_NOTICES.md` SHALL record every shipped copied or vendored project with source URL, use scope, exact version/commit or registry snapshot date, copied file paths, license identifier, and package-local license-text path.
+
+#### Scenario: Vendored Base Nova audit
+
+- **WHEN** a reviewer traces a vendored shadcn Base Nova component
+- **THEN** the notice SHALL identify the registry snapshot and copied file and SHALL link it to the included MIT license text
+
+### Requirement: Include applicable license texts
+
+The repository SHALL store applicable third-party license texts under `LICENSES/`, and the npm package SHALL include LICENSE, README, third-party notices, and every license text required by shipped content.
+
+#### Scenario: Packed artifact audit
+
+- **WHEN** CI runs `npm pack` and lists the tarball
+- **THEN** all required legal/attribution files SHALL be present and readable from the installed package
+
+### Requirement: Preserve copied source headers
+
+Existing copyright or license headers in copied source files SHALL NOT be removed.
+
+#### Scenario: Header comparison
+
+- **WHEN** a migrated file originated from upstream with a copyright/license header
+- **THEN** the migrated copy SHALL preserve that header unless the license owner provides an explicit replacement requirement
+
+### Requirement: Accurate public attribution
+
+The root README and starter footer SHALL identify this project as maintained by aeei and based on Docusaurus OpenAPI Docs by Palo Alto Networks without implying that this fork is an official Palo Alto project.
+
+#### Scenario: Footer rendering
+
+- **WHEN** the starter footer renders on desktop or mobile
+- **THEN** it SHALL link to the project, MIT license, third-party notices, upstream project, and Docusaurus, and SHALL NOT list unrelated upstream social/community links or claim project-wide `© aeei`
+
+### Requirement: Remove uncertain provenance
+
+External design/token references without clear provenance or redistribution terms SHALL be replaced before public release.
+
+#### Scenario: Typography provenance audit
+
+- **WHEN** the Toss-labelled typography scale is reviewed and no explicit reusable source/license can be documented
+- **THEN** it SHALL be replaced with a project-owned neutral typography scale and SHALL NOT be represented as Toss-owned or Toss-derived
+
+### Requirement: Dependency license inventory
+
+The release process SHALL audit actual package dependencies and vendored source so the notice inventory matches shipped content.
+
+#### Scenario: Dependency set changes
+
+- **WHEN** a runtime dependency or vendored component is added or removed
+- **THEN** CI or release review SHALL require the notice/license inventory to be updated before publication
diff --git a/openspec/changes/launch-docs-theme/tasks.md b/openspec/changes/launch-docs-theme/tasks.md
new file mode 100644
index 000000000..8cc95b4e6
--- /dev/null
+++ b/openspec/changes/launch-docs-theme/tasks.md
@@ -0,0 +1,71 @@
+## 1. Contracts and provenance baseline
+
+- [x] 1.1 Add failing package contract tests for `@aeei/docusaurus-theme@0.1.0`, docs-only exports, and forbidden OpenAPI runtime dependencies
+- [x] 1.2 Add failing Base UI primitive inventory tests that reject all Radix imports/dependencies and duplicate custom primitives
+- [x] 1.3 Add failing icon, semantic-token, and packed-license contract tests for the new package path
+- [x] 1.4 Inventory copied/vendored source with exact upstream commit or registry snapshot and decide each file's migration or deletion
+- [x] 1.5 Audit Toss-labelled typography provenance and replace it with a neutral project-owned scale if reuse cannot be documented
+
+## 2. Docs-only package extraction
+
+- [x] 2.1 Create `packages/docusaurus-theme` package metadata, TypeScript/build configuration, compiled CSS entry, and public theme interface
+- [x] 2.2 Migrate only classic docs shell, navigation, sidebar, TOC, paginator, cards, Markdown/code, color-mode, and back-to-top seams
+- [x] 2.3 Migrate semantic styling, DocSearch adapter, Lucide icons, and required Nova UI modules without OpenAPI source
+- [x] 2.4 Replace Button and Badge with official shadcn Base Nova Base UI implementations
+- [x] 2.5 Replace Sheet and DropdownMenu with official shadcn Base Nova Dialog/Menu implementations
+- [x] 2.6 Verify Tabs, NavigationMenu, Tooltip, Separator, Sidebar, and Breadcrumb against the Base UI primitive inventory
+- [x] 2.7 Remove Radix, OpenAPI, Redux, Postman, schema/request/form runtime dependencies from the package
+- [x] 2.8 Pass focused tests, TypeScript diagnostics, package build, and forbidden-import audits
+
+## 3. Markdown and Mermaid starter
+
+- [x] 3.1 Create `examples/docs-starter` with Pages-aware Docusaurus config, autogenerated sidebar, and semantic token values
+- [x] 3.2 Add project navbar, responsive navigation, project footer, and no-search state without upstream branding or credentials
+- [x] 3.3 Add Markdown/GFM fixtures for headings, TOC, links/images, lists, tables, task lists, strikethrough, code, admonitions, details, and front matter
+- [x] 3.4 Add MDX Tabs/custom-component fixtures and official Mermaid flowchart, sequence, and state fixtures
+- [x] 3.5 Add starter scripts and workspace wiring, then pass development and production builds under `/docusaurus-theme/`
+
+## 4. Upstream-owned path restoration
+
+- [x] 4.1 Restore `packages/docusaurus-theme-openapi-docs` to `origin/main` after the new package passes parity gates
+- [x] 4.2 Restore `packages/docusaurus-plugin-openapi-docs`, `packages/create-docusaurus-openapi-docs`, and `demo` to `origin/main`
+- [x] 4.3 Remove superseded `docs/superpowers` design/plan artifacts after OpenSpec contains the approved requirements
+- [x] 4.4 Reconcile root workspace metadata and lockfile for the additive package/starter structure
+- [x] 4.5 Verify the upstream-owned path diff audit is empty
+
+## 5. Attribution and public documentation
+
+- [x] 5.1 Create `THIRD_PARTY_NOTICES.md` with exact provenance and copied-file mappings
+- [x] 5.2 Add required full license texts under `LICENSES/` and preserve copied source headers
+- [x] 5.3 Ensure repository and npm tarball include README, LICENSE, notices, and applicable license texts
+- [x] 5.4 Rewrite root README for `@aeei/docusaurus-theme` with live demo, quick start, features, Markdown/Mermaid, customization, development, roadmap, and attribution
+- [x] 5.5 Capture deterministic `1440×900` light/dark WebP starter screenshots and add the responsive README `<picture>` hero
+- [x] 5.6 Verify GitHub About description/topics, retained fork relationship, and empty pre-deploy homepage
+
+## 6. CI and browser verification
+
+- [x] 6.1 Add CI for install, contracts/tests, package build, starter build, packed clean install, and license/tarball audit
+- [x] 6.2 Add browser checks for desktop/mobile, light/dark, home/Markdown/Mermaid routes, console/load/overflow failures, and essential interactions
+- [x] 6.3 Verify footer links, keyboard navigation, focus restoration, sidebar/TOC/paginator/back-to-top, code actions, tables, and Mermaid diagrams
+- [x] 6.4 Verify an unset Algolia environment produces no config/control and a complete test environment preserves project-index config and attribution
+- [x] 6.5 Run all focused and repository-level validation and retain browser traces/screenshots as artifacts
+
+## 7. GitHub Pages release
+
+- [x] 7.1 Add full-SHA-pinned official GitHub Pages workflow with minimum permissions and `examples/docs-starter/build` artifact root
+- [x] 7.2 Configure the repository Pages source for GitHub Actions and deploy the validated `shadcn-theme` build
+- [x] 7.3 Verify `https://aeei.github.io/docusaurus-theme/` routes/assets/hard refreshes and set it as the repository homepage
+- [ ] 7.4 Submit the live Pages and repository URLs to Algolia DocSearch and record the external approval status without blocking the no-search release
+
+## 8. npm release
+
+- [ ] 8.1 Run `npm pack`, inspect the exact tarball, and build a clean fixture from the local tarball
+- [ ] 8.2 Authenticate an npm owner of the `@aeei` scope and verify package-name publication access
+- [ ] 8.3 Publish `@aeei/docusaurus-theme@0.1.0` with public access
+- [ ] 8.4 Verify npm registry metadata, tarball licenses/notices, and a clean registry install/build
+
+## 9. Final consistency
+
+- [ ] 9.1 Run strict OpenSpec validation and compare every requirement scenario with concrete test, build, browser, Pages, and registry evidence
+- [ ] 9.2 Update checked tasks and release documentation without marking externally pending DocSearch activation as shipped
+- [ ] 9.3 Confirm the working tree is clean and `shadcn-theme` is pushed with a linear aeei-authored history
diff --git a/package.json b/package.json
index e4b08b1e4..40eecc7b4 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "workspaces": {
     "packages": [
       "packages/*",
+      "examples/*",
       "demo"
     ]
   },
@@ -31,6 +32,7 @@
     "format": "prettier . --check --ignore-unknown --ignore-path .prettierignore",
     "lint": "eslint . --ignore-path .gitignore --ext .ts,.tsx,.js",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:e2e:theme": "playwright test tests/theme-parity.spec.ts",
     "test:cypress:dev": "start-server-and-test watch:demo http://localhost:3000 cy:open",
     "test:cypress": "start-server-and-test serve http://localhost:3000 cy:run",
     "release:changelog": "scripts/changelog.ts",
diff --git a/packages/docusaurus-theme/LICENSE b/packages/docusaurus-theme/LICENSE
new file mode 100644
index 000000000..2d1096fe3
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Palo Alto Networks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/docusaurus-theme/LICENSES/Base-UI-MIT.txt b/packages/docusaurus-theme/LICENSES/Base-UI-MIT.txt
new file mode 100644
index 000000000..510c55e0f
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/Base-UI-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/docusaurus-theme/LICENSES/Docusaurus-MIT.txt b/packages/docusaurus-theme/LICENSES/Docusaurus-MIT.txt
new file mode 100644
index 000000000..b96dcb048
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/Docusaurus-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/docusaurus-theme/LICENSES/Geist-OFL.txt b/packages/docusaurus-theme/LICENSES/Geist-OFL.txt
new file mode 100644
index 000000000..98835ac3f
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/Geist-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font) Geist-Italic[wght].ttf: Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/packages/docusaurus-theme/LICENSES/Lucide-ISC.txt b/packages/docusaurus-theme/LICENSES/Lucide-ISC.txt
new file mode 100644
index 000000000..325e8ff0a
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/Lucide-ISC.txt
@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/packages/docusaurus-theme/LICENSES/Mermaid-MIT.txt b/packages/docusaurus-theme/LICENSES/Mermaid-MIT.txt
new file mode 100644
index 000000000..2e5daebd2
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/Mermaid-MIT.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 - 2022 Knut Sveidqvist
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/docusaurus-theme/LICENSES/PaloAltoNetworks-MIT.txt b/packages/docusaurus-theme/LICENSES/PaloAltoNetworks-MIT.txt
new file mode 100644
index 000000000..2d1096fe3
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/PaloAltoNetworks-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Palo Alto Networks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/docusaurus-theme/LICENSES/Pretendard-OFL-1.1.txt b/packages/docusaurus-theme/LICENSES/Pretendard-OFL-1.1.txt
new file mode 100644
index 000000000..ae8d98d30
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/Pretendard-OFL-1.1.txt
@@ -0,0 +1,94 @@
+Copyright (c) 2021, Kil Hyung-jin (https://github.com/orioncactus/pretendard),
+with Reserved Font Name Pretendard.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/packages/docusaurus-theme/LICENSES/shadcn-ui-MIT.txt b/packages/docusaurus-theme/LICENSES/shadcn-ui-MIT.txt
new file mode 100644
index 000000000..fad4d887a
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/shadcn-ui-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/docusaurus-theme/LICENSES/tw-animate-css-MIT.txt b/packages/docusaurus-theme/LICENSES/tw-animate-css-MIT.txt
new file mode 100644
index 000000000..70d61e820
--- /dev/null
+++ b/packages/docusaurus-theme/LICENSES/tw-animate-css-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wombosvideo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/docusaurus-theme/README.md b/packages/docusaurus-theme/README.md
new file mode 100644
index 000000000..a16a3f44b
--- /dev/null
+++ b/packages/docusaurus-theme/README.md
@@ -0,0 +1,100 @@
+# @aeei/docusaurus-theme
+
+Compiled shadcn `4.12.0` Base Nova theme for Docusaurus docs: Base UI primitives, Neutral tokens, Geist with a bundled Pretendard Korean fallback, Lucide, local/Algolia search, Markdown copy, GFM, MDX, and Mermaid support.
+
+Consumers need no Tailwind or Sass configuration.
+
+## Install
+
+```bash
+npm install @aeei/docusaurus-theme \
+  @docusaurus/core @docusaurus/plugin-content-docs \
+  @docusaurus/preset-classic @docusaurus/theme-common
+```
+
+```ts
+const config = {
+  presets: ["classic"],
+  themes: ["@aeei/docusaurus-theme"],
+  themeConfig: {
+    colorMode: {
+      defaultMode: "light",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
+    docs: {
+      sidebar: {
+        hideable: true,
+        autoCollapseCategories: false,
+      },
+    },
+  },
+};
+```
+
+Docusaurus defaults `hideable` and `respectPrefersColorScheme` to `false`. Set the values above for the complete Base Nova/Nextra shell behavior.
+
+## Options
+
+```ts
+themes: [
+  [
+    "@aeei/docusaurus-theme",
+    {
+      search: false, // false | "local" | "algolia"
+      copyPage: false,
+    },
+  ],
+];
+```
+
+### Local search
+
+```ts
+themes: [["@aeei/docusaurus-theme", { search: "local" }]];
+```
+
+Production builds generate `build/search-index.json` automatically. Keep it behind the same auth/network boundary as private docs.
+
+### Algolia
+
+Use `search: "algolia"` with complete standard `themeConfig.algolia` values. Only expose a Search API key.
+
+### Copy Page
+
+Install the Markdown-route backend and disable its injected UI:
+
+```bash
+npm install docusaurus-plugin-copy-page-button
+```
+
+```ts
+plugins: [
+  [
+    "docusaurus-plugin-copy-page-button",
+    { injectButton: false, generateMarkdownRoutes: true },
+  ],
+],
+themes: [["@aeei/docusaurus-theme", { copyPage: true }]],
+```
+
+The theme renders the official Base Nova `ButtonGroup`; the plugin only emits `.md` routes.
+
+## Mermaid
+
+```ts
+markdown: { mermaid: true },
+themes: ["@docusaurus/theme-mermaid", "@aeei/docusaurus-theme"],
+```
+
+Install `@docusaurus/theme-mermaid` and `@mermaid-js/layout-elk` when enabled.
+
+## More
+
+Repository, starter, screenshots, development, and publishing instructions:
+
+https://github.com/aeei/docusaurus-theme
+
+## License
+
+MIT. See `LICENSE`, `THIRD_PARTY_NOTICES.md`, `VENDORED_SOURCES.md`, and `LICENSES/`.
diff --git a/packages/docusaurus-theme/THIRD_PARTY_NOTICES.md b/packages/docusaurus-theme/THIRD_PARTY_NOTICES.md
new file mode 100644
index 000000000..94601a61c
--- /dev/null
+++ b/packages/docusaurus-theme/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,16 @@
+# Third-party notices
+
+`@aeei/docusaurus-theme` is distributed under the MIT License and includes or adapts work from the projects below.
+
+| Project                 | Source                                                      | Version / snapshot                         | Use                                                     | License                             |
+| ----------------------- | ----------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------- | ----------------------------------- |
+| Docusaurus OpenAPI Docs | https://github.com/PaloAltoNetworks/docusaurus-openapi-docs | `9f33f16352eaa0cad62bf54668de702ce2ce1a8a` | Selected docs theme seams; original headers preserved   | `LICENSES/PaloAltoNetworks-MIT.txt` |
+| shadcn/ui               | https://github.com/shadcn-ui/ui                             | `shadcn@4.12.0`, Base Nova registry        | `src/theme/components/ui/**`, `src/theme/shadcn.css`    | `LICENSES/shadcn-ui-MIT.txt`        |
+| Base UI                 | https://github.com/mui/base-ui                              | `@base-ui/react@1.6.0`                     | Interactive primitive runtime                           | `LICENSES/Base-UI-MIT.txt`          |
+| Lucide                  | https://github.com/lucide-icons/lucide                      | `lucide-react@0.468.0`                     | Visible UI icons                                        | `LICENSES/Lucide-ISC.txt`           |
+| Docusaurus              | https://github.com/facebook/docusaurus                      | `3.10.1`                                   | Theme interfaces and selected classic override patterns | `LICENSES/Docusaurus-MIT.txt`       |
+| Geist                   | https://github.com/vercel/geist-font                        | Snapshot 2026-07-18                        | Bundled Sans and Mono variable fonts                    | `LICENSES/Geist-OFL.txt`            |
+| Pretendard              | https://github.com/orioncactus/pretendard                   | `v1.3.9`                                   | Unmodified bundled Korean variable webfont              | `LICENSES/Pretendard-OFL-1.1.txt`   |
+| tw-animate-css          | https://github.com/Wombosvideo/tw-animate-css               | Snapshot 2026-07-18                        | Base Nova animation utilities                           | `LICENSES/tw-animate-css-MIT.txt`   |
+
+The exact copied-path mapping is in `VENDORED_SOURCES.md`. Nextra was a visual reference only; no Nextra source or runtime dependency is included.
diff --git a/packages/docusaurus-theme/VENDORED_SOURCES.md b/packages/docusaurus-theme/VENDORED_SOURCES.md
new file mode 100644
index 000000000..fb2a284ec
--- /dev/null
+++ b/packages/docusaurus-theme/VENDORED_SOURCES.md
@@ -0,0 +1,17 @@
+# Vendored source inventory
+
+Snapshot date: 2026-07-20
+
+| Source                                   | Revision                                       | Local paths                                                                       | Decision                                                                                                       |
+| ---------------------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| PaloAltoNetworks/docusaurus-openapi-docs | `9f33f16352eaa0cad62bf54668de702ce2ce1a8a`     | `src/index.ts`, selected `src/theme/**` docs seams                                | Keep with original headers; OpenAPI-only source removed                                                        |
+| shadcn/ui Base Nova registry             | `shadcn@4.12.0`, `base-nova`, Base UI, Neutral | `src/theme/components/ui/**`, `src/theme/shadcn.css`, `src/theme/vendor/**`       | Preserve registry source; only import paths and Docusaurus data/routing adapters differ                        |
+| ui.shadcn.com live docs `.typeset` CSS   | snapshot 2026-07-18                            | `src/theme/base.scss` prose block                                                 | Adapt live docs prose contract for `.theme-doc-markdown`; keep article-local exclusions only                   |
+| shadcn/ui live docs CodeBlock            | snapshot 2026-07-19                            | `src/theme/components/code-language-icon.tsx`, `src/theme/base.scss`              | Preserve title icons, GitHub Light Default/Vesper syntax colors, line numbers, highlights, and action geometry |
+| shadcn/ui live docs Command/Copy Page    | snapshot 2026-07-20                            | `src/theme/components/local-search/**`, `src/theme/components/docs-copy-page.tsx` | Adapt live composition to Base Nova registry primitives and Docusaurus data/routing only                       |
+| Geist                                    | upstream snapshot 2026-07-18                   | `src/theme/fonts/geist-*.woff2`                                                   | Ship the official example font locally                                                                         |
+| Pretendard                               | `orioncactus/pretendard@v1.3.9`                | `src/theme/fonts/PretendardVariable.woff2`                                        | Ship the unmodified official Korean variable webfont; preserve Reserved Font Name and OFL notice               |
+| tw-animate-css                           | upstream snapshot 2026-07-18                   | `src/theme/vendor/tw-animate.css`                                                 | Ship Base Nova animation utilities                                                                             |
+| Docusaurus theme-classic 3.10.1          | `@docusaurus/theme-classic@3.10.1`             | selected docs theme override interfaces                                           | Keep Docusaurus alias contracts; classic remains the fallback layer                                            |
+
+Detailed license texts and redistribution notices are maintained in the repository and package `THIRD_PARTY_NOTICES.md` and `LICENSES/` paths.
diff --git a/packages/docusaurus-theme/babel.config.js b/packages/docusaurus-theme/babel.config.js
new file mode 100644
index 000000000..dfa76c9ab
--- /dev/null
+++ b/packages/docusaurus-theme/babel.config.js
@@ -0,0 +1,35 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+module.exports = {
+  env: {
+    // USED FOR NODE/RUNTIME
+    // maybe we should differenciate both cases because
+    // we mostly need to transpile some features so that node does not crash...
+    lib: {
+      presets: [
+        ["@babel/preset-typescript", { isTSX: true, allExtensions: true }],
+      ],
+      // Useful to transpile for older node versions
+      plugins: [
+        "@babel/plugin-transform-modules-commonjs",
+        "@babel/plugin-proposal-nullish-coalescing-operator",
+        "@babel/plugin-proposal-optional-chaining",
+      ],
+    },
+
+    // USED FOR JS SWIZZLE
+    // /lib-next folder is used as source to swizzle JS source code
+    // This JS code is created from TS source code
+    // This source code should look clean/human readable to be usable
+    "lib-next": {
+      presets: [
+        ["@babel/preset-typescript", { isTSX: true, allExtensions: true }],
+      ],
+    },
+  },
+};
diff --git a/packages/docusaurus-theme/package.json b/packages/docusaurus-theme/package.json
new file mode 100644
index 000000000..41e6e31d5
--- /dev/null
+++ b/packages/docusaurus-theme/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@aeei/docusaurus-theme",
+  "version": "0.1.8",
+  "description": "A shadcn Base Nova theme for Docusaurus docs.",
+  "license": "MIT",
+  "keywords": [
+    "base-ui",
+    "documentation",
+    "docusaurus",
+    "mermaid",
+    "shadcn",
+    "theme"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aeei/docusaurus-theme.git",
+    "directory": "packages/docusaurus-theme"
+  },
+  "bugs": {
+    "url": "https://github.com/aeei/docusaurus-theme/issues"
+  },
+  "types": "src/theme-classic.d.ts",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "lib-theme",
+    "src/theme",
+    "src/plugin-content-docs.d.ts",
+    "src/theme-classic.d.ts",
+    "README.md",
+    "VENDORED_SOURCES.md",
+    "LICENSE",
+    "LICENSES",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "build": "node scripts/clean-build.mjs && tsc --build --force && tsc --project tsconfig.theme.json && node ../../scripts/copyUntypedFiles.mjs && node scripts/copy-theme-assets.mjs && tailwindcss -i src/theme/shadcn.css -o lib/theme/shadcn.scss --minify && node scripts/normalize-tailwind-css.mjs && prettier --config ../../.prettierrc.json --write \"lib/theme/**/*.js\" \"lib-theme/theme/**/*.js\""
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "class-variance-authority": "^0.7.1",
+    "node-html-parser": "^9.0.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "copy-text-to-clipboard": "^3.2.0",
+    "lucide-react": "^0.468.0",
+    "parse-numeric-range": "^1.3.0",
+    "postcss": "^8.5.13",
+    "postcss-preset-env": "^10.6.1",
+    "prism-react-renderer": "^2.4.1",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@docusaurus/core": "^3.10.0",
+    "@docusaurus/theme-classic": "^3.10.0",
+    "@docusaurus/theme-common": "^3.10.0",
+    "@docusaurus/types": "^3.10.0",
+    "@tailwindcss/cli": "^4.3.2",
+    "tailwindcss": "^4.3.2"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": "^3.10.0",
+    "@docusaurus/plugin-content-docs": "^3.10.0",
+    "@docusaurus/theme-common": "^3.10.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/packages/docusaurus-theme/scripts/clean-build.mjs b/packages/docusaurus-theme/scripts/clean-build.mjs
new file mode 100644
index 000000000..19aa116a0
--- /dev/null
+++ b/packages/docusaurus-theme/scripts/clean-build.mjs
@@ -0,0 +1,5 @@
+import fs from "node:fs";
+
+for (const directory of ["lib", "lib-theme"]) {
+  fs.rmSync(directory, { recursive: true, force: true });
+}
diff --git a/packages/docusaurus-theme/scripts/copy-theme-assets.mjs b/packages/docusaurus-theme/scripts/copy-theme-assets.mjs
new file mode 100644
index 000000000..10e345768
--- /dev/null
+++ b/packages/docusaurus-theme/scripts/copy-theme-assets.mjs
@@ -0,0 +1,12 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const source = path.resolve("src/theme");
+const destination = path.resolve("lib-theme/theme");
+
+fs.cpSync(source, destination, {
+  recursive: true,
+  filter(file) {
+    return !/\.tsx?$|\.test\.[jt]sx?$/.test(file);
+  },
+});
diff --git a/packages/docusaurus-theme/scripts/normalize-tailwind-css.mjs b/packages/docusaurus-theme/scripts/normalize-tailwind-css.mjs
new file mode 100644
index 000000000..7446d5bad
--- /dev/null
+++ b/packages/docusaurus-theme/scripts/normalize-tailwind-css.mjs
@@ -0,0 +1,35 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const outputPath = path.resolve("lib/theme/shadcn.scss");
+const css = fs.readFileSync(outputPath, "utf8");
+const colorMixFallback =
+  /([^{}]+)\{([^{}]*)\}@supports \(color:color-mix\(in lab, red, red\)\)\{([^{}]+)\{([^{}]*)\}\}/g;
+const colorNormalized = css.replace(
+  colorMixFallback,
+  (_match, fallbackSelector, fallback, modernSelector, modern) =>
+    `${fallbackSelector}{${fallback}}${modernSelector}{${modern}}`
+);
+
+if (colorNormalized === css) {
+  throw new Error(
+    "Expected Tailwind color-mix fallback blocks were not found."
+  );
+}
+
+const scrollFadeFallback =
+  /var\(--scroll-fade-reveal,calc\(var\(--spacing\)\s*\*\s*24\)\)/g;
+const scrollFadeMatches =
+  colorNormalized.match(scrollFadeFallback)?.length ?? 0;
+if (scrollFadeMatches === 0) {
+  throw new Error(
+    "Expected Tailwind scroll-fade fallback values were not found."
+  );
+}
+
+const normalized = colorNormalized.replace(
+  scrollFadeFallback,
+  "var(--scroll-fade-reveal,6rem)"
+);
+
+fs.writeFileSync(outputPath, normalized);
diff --git a/packages/docusaurus-theme/src/index.ts b/packages/docusaurus-theme/src/index.ts
new file mode 100644
index 000000000..b80245938
--- /dev/null
+++ b/packages/docusaurus-theme/src/index.ts
@@ -0,0 +1,170 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import fs from "fs";
+import path from "path";
+
+import type { LoadContext, Plugin } from "@docusaurus/types";
+
+import { writeSearchIndex } from "./search/build-index";
+import type { DocusaurusThemeOptions, SearchProvider } from "./search/types";
+
+export type { DocusaurusThemeOptions, SearchProvider } from "./search/types";
+
+const PLUGIN_NAME = "@aeei/docusaurus-theme";
+
+export function copyThemeLegalNotices(
+  outDir: string,
+  packageRoot = path.resolve(__dirname, "..")
+) {
+  const targetDir = path.join(outDir, "licenses");
+  fs.mkdirSync(targetDir, { recursive: true });
+  fs.copyFileSync(
+    path.join(packageRoot, "LICENSE"),
+    path.join(targetDir, "THEME-MIT.txt")
+  );
+  fs.copyFileSync(
+    path.join(packageRoot, "THIRD_PARTY_NOTICES.md"),
+    path.join(targetDir, "THIRD_PARTY_NOTICES.md")
+  );
+  for (const filename of fs.readdirSync(path.join(packageRoot, "LICENSES"))) {
+    fs.copyFileSync(
+      path.join(packageRoot, "LICENSES", filename),
+      path.join(targetDir, filename)
+    );
+  }
+}
+
+export function resolveSearchProvider(
+  options: DocusaurusThemeOptions = {}
+): SearchProvider {
+  const provider = options.search ?? false;
+  if (provider !== false && provider !== "local" && provider !== "algolia") {
+    throw new Error(
+      `[${PLUGIN_NAME}] "search" must be false, "local", or "algolia". Received: ${JSON.stringify(provider)}`
+    );
+  }
+  return provider;
+}
+
+function assertAlgoliaConfig(context: LoadContext) {
+  const algolia = (
+    context.siteConfig.themeConfig as { algolia?: Record<string, unknown> }
+  ).algolia;
+  const missing = ["appId", "apiKey", "indexName"].filter(
+    (key) => typeof algolia?.[key] !== "string" || !algolia[key]
+  );
+  if (missing.length) {
+    throw new Error(
+      `[${PLUGIN_NAME}] search: "algolia" requires themeConfig.algolia.${missing.join(
+        ", themeConfig.algolia."
+      )}.`
+    );
+  }
+}
+
+export default function docusaurusTheme(
+  context: LoadContext,
+  options: DocusaurusThemeOptions = {}
+): Plugin<{ provider: SearchProvider; copyPage: boolean }> {
+  const provider = resolveSearchProvider(options);
+  const copyPage = options.copyPage ?? false;
+  if (typeof copyPage !== "boolean") {
+    throw new Error(
+      `[${PLUGIN_NAME}] "copyPage" must be true or false. Received: ${JSON.stringify(options.copyPage)}`
+    );
+  }
+  if (provider === "algolia") assertAlgoliaConfig(context);
+
+  return {
+    name: PLUGIN_NAME,
+
+    loadContent() {
+      return { provider, copyPage };
+    },
+
+    contentLoaded({ content, actions }) {
+      actions.setGlobalData({
+        search: { provider: content.provider },
+        copyPage: { enabled: content.copyPage },
+      });
+    },
+
+    async postBuild({ outDir, baseUrl, routesPaths, routesBuildMetadata }) {
+      copyThemeLegalNotices(outDir);
+      if (provider !== "local") return;
+      const noIndexRoutes = new Set(
+        Object.entries(routesBuildMetadata)
+          .filter(([, metadata]) => metadata.noIndex)
+          .map(([route]) => route)
+      );
+      await writeSearchIndex({ outDir, baseUrl, routesPaths, noIndexRoutes });
+    },
+
+    getClientModules() {
+      return [
+        require.resolve(path.join(__dirname, "theme", "shadcn.scss")),
+        require.resolve(path.join(__dirname, "theme", "styles.scss")),
+      ];
+    },
+
+    configurePostCss(postCssOptions) {
+      for (const plugin of postCssOptions.plugins ?? []) {
+        if (
+          Array.isArray(plugin) &&
+          String(plugin[0]).includes("postcss-preset-env")
+        ) {
+          plugin[0] = require.resolve(
+            path.join(__dirname, "postcss", "preset-env.cjs")
+          );
+        }
+      }
+      return postCssOptions;
+    },
+
+    getThemePath() {
+      return path.resolve(__dirname, "..", "lib-theme", "theme");
+    },
+
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, "..", "src", "theme");
+    },
+
+    configureWebpack(config, isServer, { getStyleLoaders }) {
+      const hasSassLoader = (config.module?.rules ?? []).some(
+        (rule: any) => String(rule.test) === String(/\.s[ca]ss$/)
+      );
+      const layerLoader = path.join(__dirname, "loaders", "layer-infima.cjs");
+      const infimaPattern =
+        /(?:^|[\\/])infima[\\/]dist[\\/]css[\\/]default[\\/]default(?:-rtl)?\.css$/;
+
+      return {
+        module: {
+          rules: [
+            {
+              test: infimaPattern,
+              enforce: "pre",
+              use: [{ loader: layerLoader }],
+            },
+            ...(!hasSassLoader
+              ? [
+                  {
+                    test: /\.s[ac]ss$/,
+                    include: path.resolve(__dirname, "theme"),
+                    use: [
+                      ...getStyleLoaders(isServer, {}),
+                      { loader: require.resolve("sass-loader") },
+                    ],
+                  },
+                ]
+              : []),
+          ],
+        },
+      };
+    },
+  };
+}
diff --git a/packages/docusaurus-theme/src/legal-notices.test.ts b/packages/docusaurus-theme/src/legal-notices.test.ts
new file mode 100644
index 000000000..45efd88c0
--- /dev/null
+++ b/packages/docusaurus-theme/src/legal-notices.test.ts
@@ -0,0 +1,23 @@
+import fs from "fs";
+import os from "os";
+import path from "path";
+
+import { copyThemeLegalNotices } from "./index";
+
+it("copies the theme license and every bundled third-party notice into consumer builds", () => {
+  const outDir = fs.mkdtempSync(path.join(os.tmpdir(), "aeei-theme-legal-"));
+
+  copyThemeLegalNotices(outDir);
+
+  const licensesDir = path.join(outDir, "licenses");
+  expect(fs.existsSync(path.join(licensesDir, "THEME-MIT.txt"))).toBe(true);
+  expect(fs.existsSync(path.join(licensesDir, "THIRD_PARTY_NOTICES.md"))).toBe(
+    true
+  );
+  expect(fs.existsSync(path.join(licensesDir, "Geist-OFL.txt"))).toBe(true);
+  expect(fs.existsSync(path.join(licensesDir, "Pretendard-OFL-1.1.txt"))).toBe(
+    true
+  );
+
+  fs.rmSync(outDir, { recursive: true, force: true });
+});
diff --git a/packages/docusaurus-theme/src/loaders/layer-infima.cjs b/packages/docusaurus-theme/src/loaders/layer-infima.cjs
new file mode 100644
index 000000000..d660fd0c6
--- /dev/null
+++ b/packages/docusaurus-theme/src/loaders/layer-infima.cjs
@@ -0,0 +1,12 @@
+module.exports = function layerInfima(source) {
+  const withoutGlobalTableSkin = source.replace(
+    /(^|\n)table[^{}]*\{[^{}]*\}[ \t]*/g,
+    "$1"
+  );
+  const withoutOfficialComponentLeaks = withoutGlobalTableSkin.replace(
+    /(^|\n)kbd\s*\{/g,
+    "$1kbd:not([data-slot]) {"
+  );
+
+  return `@layer infima {\n${withoutOfficialComponentLeaks}\n}`;
+};
diff --git a/packages/docusaurus-theme/src/package-contract.test.ts b/packages/docusaurus-theme/src/package-contract.test.ts
new file mode 100644
index 000000000..8dddbf12c
--- /dev/null
+++ b/packages/docusaurus-theme/src/package-contract.test.ts
@@ -0,0 +1,154 @@
+import crypto from "crypto";
+import fs from "fs";
+import path from "path";
+
+const packagePath = path.join(__dirname, "..", "package.json");
+const themeRoot = path.join(__dirname, "theme");
+
+function listProductionFiles(directory: string): string[] {
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const entryPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) return listProductionFiles(entryPath);
+    if (/\.test\.[jt]sx?$/.test(entry.name) || entry.name.endsWith(".d.ts")) {
+      return [];
+    }
+    return /\.[jt]sx?$/.test(entry.name) ? [entryPath] : [];
+  });
+}
+
+it("uses the public docs-only package identity and metadata", () => {
+  const packageJson = JSON.parse(fs.readFileSync(packagePath, "utf8"));
+
+  expect(packageJson.name).toBe("@aeei/docusaurus-theme");
+  expect(packageJson.version).toBe("0.1.8");
+  expect(packageJson.description).toBe(
+    "A shadcn Base Nova theme for Docusaurus docs."
+  );
+  expect(packageJson.repository).toEqual({
+    type: "git",
+    url: "git+https://github.com/aeei/docusaurus-theme.git",
+    directory: "packages/docusaurus-theme",
+  });
+  expect(packageJson.bugs).toEqual({
+    url: "https://github.com/aeei/docusaurus-theme/issues",
+  });
+  expect(packageJson.license).toBe("MIT");
+  expect(packageJson.types).toBe("src/theme-classic.d.ts");
+  expect(packageJson.files).toEqual(
+    expect.arrayContaining([
+      "lib",
+      "src/theme-classic.d.ts",
+      "README.md",
+      "VENDORED_SOURCES.md",
+    ])
+  );
+  expect(packageJson.keywords).toEqual(
+    expect.arrayContaining(["docusaurus", "theme", "shadcn", "mermaid"])
+  );
+  expect(packageJson.keywords).not.toContain("openapi");
+});
+
+it("keeps only docs runtime dependencies", () => {
+  const packageJson = JSON.parse(fs.readFileSync(packagePath, "utf8"));
+  const sections = [
+    packageJson.dependencies,
+    packageJson.devDependencies,
+    packageJson.peerDependencies,
+  ];
+
+  for (const dependency of [
+    "docusaurus-plugin-openapi-docs",
+    "radix-ui",
+    "@reduxjs/toolkit",
+    "allof-merge",
+    "buffer",
+    "crypto-js",
+    "file-saver",
+    "lodash",
+    "pako",
+    "path-browserify",
+    "postman-code-generators",
+    "postman-collection",
+    "process",
+    "react-hook-form",
+    "react-live",
+    "react-magic-dropzone",
+    "react-modal",
+    "react-redux",
+    "url",
+    "xml-formatter",
+    "@types/crypto-js",
+    "@types/file-saver",
+    "@types/lodash",
+    "@types/pako",
+    "@types/postman-collection",
+    "@types/react-modal",
+  ]) {
+    for (const section of sections) {
+      expect(section?.[dependency]).toBeUndefined();
+    }
+  }
+
+  expect(packageJson.dependencies["@base-ui/react"]).toBeDefined();
+  expect(packageJson.dependencies["lucide-react"]).toBeDefined();
+  expect(packageJson.dependencies["copy-text-to-clipboard"]).toBeDefined();
+  expect(packageJson.dependencies["parse-numeric-range"]).toBeDefined();
+  expect(packageJson.dependencies["prism-react-renderer"]).toBeDefined();
+  expect(packageJson.peerDependencies.react).toBeDefined();
+  expect(packageJson.peerDependencies["react-dom"]).toBeDefined();
+});
+
+it("packs required license and provenance files", () => {
+  const packageRoot = path.join(__dirname, "..");
+
+  for (const file of [
+    "LICENSE",
+    "README.md",
+    "THIRD_PARTY_NOTICES.md",
+    "VENDORED_SOURCES.md",
+  ]) {
+    expect(fs.existsSync(path.join(packageRoot, file))).toBe(true);
+  }
+
+  const licenses = fs.readdirSync(path.join(packageRoot, "LICENSES"));
+  expect(licenses).toContain("Pretendard-OFL-1.1.txt");
+
+  const pretendardPath = path.join(
+    packageRoot,
+    "src/theme/fonts/PretendardVariable.woff2"
+  );
+  expect(fs.existsSync(pretendardPath)).toBe(true);
+  expect(
+    crypto
+      .createHash("sha256")
+      .update(fs.readFileSync(pretendardPath))
+      .digest("hex")
+  ).toBe("9599f12fd42fc0bce1cd50b47a0c022e108d7aa64dd0d1bb0ed44f3282d900b4");
+
+  const notices = fs.readFileSync(
+    path.join(packageRoot, "THIRD_PARTY_NOTICES.md"),
+    "utf8"
+  );
+  expect(notices).toContain("orioncactus/pretendard");
+  expect(notices).toContain("Pretendard-OFL-1.1.txt");
+});
+
+it("contains only docs theme production source", () => {
+  const productionFiles = listProductionFiles(themeRoot).map((file) =>
+    path.relative(themeRoot, file)
+  );
+
+  for (const file of productionFiles) {
+    expect(file).not.toMatch(
+      /(^|\/)(ApiExplorer|ApiItem|ApiTabs|DiscriminatorTabs|MimeTabs|OperationTabs|ParamsItem|Request|Response|Schema|SchemaExpansion|SchemaItem|SchemaTabs)(\/|$)/
+    );
+  }
+
+  const productionSource = productionFiles
+    .map((file) => fs.readFileSync(path.join(themeRoot, file), "utf8"))
+    .join("\n");
+
+  expect(productionSource).not.toContain("docusaurus-plugin-openapi-docs");
+  expect(productionSource).not.toContain("schemaExpansion");
+  expect(productionSource).not.toContain("authPersistence");
+});
diff --git a/packages/docusaurus-theme/src/plugin-content-docs.d.ts b/packages/docusaurus-theme/src/plugin-content-docs.d.ts
new file mode 100644
index 000000000..d4cd80815
--- /dev/null
+++ b/packages/docusaurus-theme/src/plugin-content-docs.d.ts
@@ -0,0 +1,25 @@
+import type { TOCItem } from "@docusaurus/mdx-loader";
+
+declare module "@docusaurus/plugin-content-docs/client" {
+  type NavbarDoc = {
+    id: string;
+    path: string;
+    sidebar?: string;
+    unlisted?: boolean;
+  };
+
+  export function useActiveDocContext(pluginId?: string): {
+    activeDoc?: NavbarDoc;
+  };
+  export function useLayoutDoc(
+    docId: string,
+    pluginId?: string
+  ): NavbarDoc | null;
+  export function useDoc(): {
+    toc: readonly TOCItem[];
+    frontMatter: {
+      toc_min_heading_level: number;
+      toc_max_heading_level: number;
+    };
+  };
+}
diff --git a/packages/docusaurus-theme/src/postcss/preset-env.cjs b/packages/docusaurus-theme/src/postcss/preset-env.cjs
new file mode 100644
index 000000000..d64c64465
--- /dev/null
+++ b/packages/docusaurus-theme/src/postcss/preset-env.cjs
@@ -0,0 +1,39 @@
+const postcss = require("postcss");
+const presetEnv = require("postcss-preset-env");
+
+function isThemeStylesheet(from) {
+  const normalized = String(from ?? "").replaceAll("\\", "/");
+  return (
+    (normalized.endsWith("/lib/theme/shadcn.scss") &&
+      (normalized.includes("/@aeei/docusaurus-theme/") ||
+        normalized.includes("/packages/docusaurus-theme/"))) ||
+    normalized.includes("/infima/dist/css/default/")
+  );
+}
+
+module.exports = function scopedPresetEnv(options = {}) {
+  const consumerPlugins = presetEnv(options).plugins;
+  const themePlugins = presetEnv({
+    ...options,
+    stage: false,
+    autoprefixer: options.autoprefixer ?? {},
+  }).plugins;
+
+  return {
+    postcssPlugin: "aeei-scoped-postcss-preset-env",
+    async Once(root, { result }) {
+      const plugins = isThemeStylesheet(result.opts.from)
+        ? themePlugins
+        : consumerPlugins;
+      const processed = await postcss(plugins).process(root, {
+        ...result.opts,
+        from: result.opts.from,
+        map: false,
+      });
+      result.messages.push(...processed.messages);
+    },
+  };
+};
+
+module.exports.postcss = true;
+module.exports.isThemeStylesheet = isThemeStylesheet;
diff --git a/packages/docusaurus-theme/src/postcss/preset-env.test.ts b/packages/docusaurus-theme/src/postcss/preset-env.test.ts
new file mode 100644
index 000000000..97d5eb7e9
--- /dev/null
+++ b/packages/docusaurus-theme/src/postcss/preset-env.test.ts
@@ -0,0 +1,32 @@
+import postcss from "postcss";
+
+const scopedPresetEnv = require("./preset-env.cjs");
+
+it("limits the Base Nova PostCSS exception to the packaged theme stylesheet", async () => {
+  const css = ":root { --color: lab(50% 0 0); }";
+  const plugin = scopedPresetEnv({ stage: 2 });
+  const theme = await postcss([plugin]).process(css, {
+    from: "/app/node_modules/@aeei/docusaurus-theme/lib/theme/shadcn.scss",
+  });
+  const consumer = await postcss([scopedPresetEnv({ stage: 2 })]).process(css, {
+    from: "/app/src/css/custom.css",
+  });
+
+  expect(theme.css).toContain("lab(50% 0 0)");
+  expect(consumer.css).not.toContain("lab(50% 0 0)");
+  expect(
+    scopedPresetEnv.isThemeStylesheet(
+      "/repo/packages/docusaurus-theme/lib/theme/shadcn.scss"
+    )
+  ).toBe(true);
+  expect(
+    scopedPresetEnv.isThemeStylesheet(
+      "/repo/node_modules/infima/dist/css/default/default.css"
+    )
+  ).toBe(true);
+  expect(
+    scopedPresetEnv.isThemeStylesheet(
+      "/repo/packages/other-theme/lib/theme/shadcn.scss"
+    )
+  ).toBe(false);
+});
diff --git a/packages/docusaurus-theme/src/search/build-index.test.ts b/packages/docusaurus-theme/src/search/build-index.test.ts
new file mode 100644
index 000000000..00d7d4f7f
--- /dev/null
+++ b/packages/docusaurus-theme/src/search/build-index.test.ts
@@ -0,0 +1,119 @@
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+
+import { buildSearchIndex, writeSearchIndex } from "./build-index";
+import { resolveSearchProvider } from "../index";
+
+const page = (title: string) =>
+  `<!doctype html><html><head><title>${title}</title></head><body><main><article><div class="theme-doc-markdown"><h1>${title}</h1><p>Overview copy.</p><h2 id="setup">Setup</h2><p>Install café support.</p><pre>secret code</pre><h3 id="next">Next</h3><ul><li>Continue</li></ul></div></article></main></body></html>`;
+
+describe("search provider", () => {
+  it.each([
+    [undefined, false],
+    [false, false],
+    ["local", "local"],
+    ["algolia", "algolia"],
+  ])("resolves %p", (search, expected) =>
+    expect(resolveSearchProvider({ search } as never)).toBe(expected)
+  );
+
+  it("rejects unsupported providers", () => {
+    expect(() => resolveSearchProvider({ search: "remote" } as never)).toThrow(
+      '"search" must be false, "local", or "algolia"'
+    );
+  });
+});
+
+describe("local search index", () => {
+  let outDir: string;
+  beforeEach(async () => {
+    outDir = await fs.mkdtemp(path.join(os.tmpdir(), "theme-search-"));
+    await fs.mkdir(path.join(outDir, "guides"), { recursive: true });
+    await fs.writeFile(path.join(outDir, "index.html"), page("Home"));
+    await fs.writeFile(
+      path.join(outDir, "guides", "search.html"),
+      page("Search")
+    );
+    await fs.writeFile(
+      path.join(outDir, "base-nova-parity.html"),
+      page("Fixture")
+    );
+  });
+  afterEach(() => fs.rm(outDir, { recursive: true, force: true }));
+
+  it("extracts deterministic page and anchored section records", async () => {
+    const args = {
+      outDir,
+      baseUrl: "/docs/",
+      routesPaths: ["/docs/guides/search", "/docs/base-nova-parity", "/docs/"],
+    };
+    const first = await buildSearchIndex(args);
+    const second = await buildSearchIndex({
+      ...args,
+      routesPaths: [...args.routesPaths].reverse(),
+    });
+
+    expect(second).toEqual(first);
+    expect(first.records.map(({ url }) => url)).toEqual([
+      "/docs/",
+      "/docs/#next",
+      "/docs/#setup",
+      "/docs/guides/search",
+      "/docs/guides/search#next",
+      "/docs/guides/search#setup",
+    ]);
+    expect(first.records.find(({ url }) => url.endsWith("#setup"))?.text).toBe(
+      "Install café support."
+    );
+    expect(JSON.stringify(first)).not.toContain("secret code");
+  });
+
+  it("indexes routes emitted as directory index files", async () => {
+    await fs.mkdir(path.join(outDir, "guides", "trailing"), { recursive: true });
+    await fs.writeFile(
+      path.join(outDir, "guides", "trailing", "index.html"),
+      page("Trailing")
+    );
+
+    const index = await buildSearchIndex({
+      outDir,
+      baseUrl: "/docs/",
+      routesPaths: ["/docs/guides/trailing"],
+    });
+
+    expect(index.records.map(({ url }) => url)).toEqual([
+      "/docs/guides/trailing",
+      "/docs/guides/trailing#next",
+      "/docs/guides/trailing#setup",
+    ]);
+  });
+
+  it("skips the generated 404.html route", async () => {
+    await fs.writeFile(path.join(outDir, "404.html"), page("Not Found"));
+
+    const index = await buildSearchIndex({
+      outDir,
+      baseUrl: "/docs/",
+      routesPaths: ["/404.html"],
+    });
+
+    expect(index.records).toEqual([]);
+  });
+
+  it("honors route noIndex metadata and overwrites stale output", async () => {
+    const args = {
+      outDir,
+      baseUrl: "/docs/",
+      routesPaths: ["/docs/", "/docs/guides/search"],
+      noIndexRoutes: new Set(["/docs/guides/search"]),
+    };
+    await fs.writeFile(path.join(outDir, "search-index.json"), "stale");
+    await writeSearchIndex(args);
+    const written = JSON.parse(
+      await fs.readFile(path.join(outDir, "search-index.json"), "utf8")
+    );
+    expect(written.records).toHaveLength(3);
+    expect(JSON.stringify(written)).not.toContain("guides/search");
+  });
+});
diff --git a/packages/docusaurus-theme/src/search/build-index.ts b/packages/docusaurus-theme/src/search/build-index.ts
new file mode 100644
index 000000000..794bbe90f
--- /dev/null
+++ b/packages/docusaurus-theme/src/search/build-index.ts
@@ -0,0 +1,145 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+import { HTMLElement, parse } from "node-html-parser";
+
+import type { SearchIndex, SearchRecord } from "./types";
+
+const EXCLUDED_SELECTORS = [
+  "script",
+  "style",
+  "nav",
+  "footer",
+  "pre",
+  ".theme-code-block",
+  ".sr-only",
+  "[hidden]",
+  '[aria-hidden="true"]',
+  "[data-search-exclude]",
+];
+const HEADING_SELECTOR = "h1,h2,h3,h4,h5,h6";
+const SECTION_HEADING_SELECTOR = "h2[id],h3[id],h4[id],h5[id],h6[id]";
+const HEADING_TAGS = new Set(["H1", "H2", "H3", "H4", "H5", "H6"]);
+
+const clean = (value: string) =>
+  value.normalize("NFKC").replace(/\s+/g, " ").trim();
+
+function routeFiles(outDir: string, baseUrl: string, route: string) {
+  const base =
+    baseUrl === "/" ? "" : baseUrl.replace(/^\//, "").replace(/\/$/, "");
+  let relative = route.replace(/^\//, "").replace(/\/$/, "");
+  if (base && (relative === base || relative.startsWith(`${base}/`))) {
+    relative = relative.slice(base.length).replace(/^\//, "");
+  }
+  return relative
+    ? [
+        path.join(outDir, `${relative}.html`),
+        path.join(outDir, relative, "index.html"),
+      ]
+    : [path.join(outDir, "index.html")];
+}
+
+function removeExcludedContent(article: HTMLElement) {
+  for (const selector of EXCLUDED_SELECTORS) {
+    for (const element of article.querySelectorAll(selector)) element.remove();
+  }
+}
+
+function sectionText(heading: HTMLElement) {
+  const parent = heading.parentNode;
+  if (!parent) return "";
+  const start = parent.childNodes.indexOf(heading);
+  const parts: string[] = [];
+  for (const node of parent.childNodes.slice(start + 1)) {
+    if (node instanceof HTMLElement && HEADING_TAGS.has(node.tagName)) break;
+    parts.push(node.textContent);
+  }
+  return clean(parts.join(" "));
+}
+
+export async function buildSearchIndex({
+  outDir,
+  baseUrl,
+  routesPaths,
+  noIndexRoutes = new Set<string>(),
+}: {
+  outDir: string;
+  baseUrl: string;
+  routesPaths: string[];
+  noIndexRoutes?: ReadonlySet<string>;
+}): Promise<SearchIndex> {
+  const records: SearchRecord[] = [];
+
+  for (const route of [...routesPaths].sort()) {
+    if (
+      route.endsWith("/404") ||
+      route.endsWith("/404.html") ||
+      route.includes("/base-nova-parity") ||
+      noIndexRoutes.has(route)
+    )
+      continue;
+
+    let html: string | undefined;
+    for (const file of routeFiles(outDir, baseUrl, route)) {
+      try {
+        html = await fs.readFile(file, "utf8");
+        break;
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code !== "ENOENT") throw error;
+      }
+    }
+    if (!html) continue;
+
+    const root = parse(html);
+    const sourceArticle = root.querySelector(".theme-doc-markdown");
+    if (!sourceArticle) continue;
+    const article = sourceArticle.clone() as HTMLElement;
+    removeExcludedContent(article);
+
+    const title = clean(
+      article.querySelector("h1")?.textContent ??
+        root.querySelector("title")?.textContent ??
+        ""
+    );
+    if (!title) continue;
+
+    const body = article.clone() as HTMLElement;
+    for (const heading of body.querySelectorAll(HEADING_SELECTOR))
+      heading.remove();
+    records.push({
+      id: route,
+      url: route,
+      title,
+      text: clean(body.textContent),
+    });
+
+    for (const heading of article.querySelectorAll(SECTION_HEADING_SELECTOR)) {
+      const section = clean(heading.textContent);
+      const id = heading.getAttribute("id");
+      if (!id || !section) continue;
+      const url = `${route}#${id}`;
+      records.push({
+        id: url,
+        url,
+        title,
+        section,
+        text: sectionText(heading),
+      });
+    }
+  }
+
+  records.sort((left, right) => left.id.localeCompare(right.id, "en"));
+  return { version: 1, records };
+}
+
+export async function writeSearchIndex(
+  args: Parameters<typeof buildSearchIndex>[0]
+) {
+  const index = await buildSearchIndex(args);
+  await fs.writeFile(
+    path.join(args.outDir, "search-index.json"),
+    `${JSON.stringify(index)}\n`,
+    "utf8"
+  );
+  return index;
+}
diff --git a/packages/docusaurus-theme/src/search/types.ts b/packages/docusaurus-theme/src/search/types.ts
new file mode 100644
index 000000000..b53d7576a
--- /dev/null
+++ b/packages/docusaurus-theme/src/search/types.ts
@@ -0,0 +1,19 @@
+export type SearchProvider = false | "local" | "algolia";
+
+export type DocusaurusThemeOptions = {
+  search?: SearchProvider;
+  copyPage?: boolean;
+};
+
+export type SearchRecord = {
+  id: string;
+  url: string;
+  title: string;
+  section?: string;
+  text: string;
+};
+
+export type SearchIndex = {
+  version: 1;
+  records: SearchRecord[];
+};
diff --git a/packages/docusaurus-theme/src/theme-classic.d.ts b/packages/docusaurus-theme/src/theme-classic.d.ts
new file mode 100644
index 000000000..11ea09acc
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme-classic.d.ts
@@ -0,0 +1,8 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+/// <reference types="@docusaurus/theme-classic" />
diff --git a/packages/docusaurus-theme/src/theme/Admonition/Layout/index.tsx b/packages/docusaurus-theme/src/theme/Admonition/Layout/index.tsx
new file mode 100644
index 000000000..7cda3cdd1
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Admonition/Layout/index.tsx
@@ -0,0 +1,65 @@
+import React, { type ReactNode } from "react";
+
+import {
+  CircleAlert,
+  CircleCheck,
+  CircleX,
+  Info,
+  Lightbulb,
+  TriangleAlert,
+  type LucideIcon,
+} from "lucide-react";
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@theme/components/ui/alert";
+
+type Props = {
+  type: string;
+  title?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+};
+
+const iconByType: Record<string, LucideIcon> = {
+  note: Info,
+  tip: Lightbulb,
+  info: CircleAlert,
+  warning: TriangleAlert,
+  danger: CircleX,
+  success: CircleCheck,
+};
+
+iconByType.secondary = iconByType.note;
+iconByType.important = iconByType.info;
+iconByType.caution = iconByType.warning;
+iconByType.error = iconByType.danger;
+iconByType.failure = iconByType.danger;
+
+const destructiveTypes = new Set(["danger", "error", "failure"]);
+
+export default function AdmonitionLayout({
+  type,
+  title,
+  children,
+  className: _className,
+  id,
+}: Props): ReactNode {
+  const Icon = iconByType[type] ?? CircleAlert;
+
+  return (
+    <div className="theme-admonition-flow">
+      <Alert
+        id={id}
+        variant={destructiveTypes.has(type) ? "destructive" : "default"}
+      >
+        <Icon aria-hidden="true" />
+        {title && <AlertTitle>{title}</AlertTitle>}
+        {children && <AlertDescription>{children}</AlertDescription>}
+      </Alert>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/BackToTopButton/index.tsx b/packages/docusaurus-theme/src/theme/BackToTopButton/index.tsx
new file mode 100644
index 000000000..9a0bcc5cf
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/BackToTopButton/index.tsx
@@ -0,0 +1,30 @@
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { useBackToTopButton } from "@docusaurus/theme-common/internal";
+import { ArrowUp } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+
+export default function BackToTopButton(): ReactNode {
+  const { shown, scrollToTop } = useBackToTopButton({ threshold: 300 });
+
+  if (!shown) return null;
+
+  return (
+    <Button
+      aria-label={translate({
+        id: "theme.BackToTopButton.buttonAriaLabel",
+        message: "Scroll back to top",
+        description: "The ARIA label for the back to top button",
+      })}
+      className="fixed right-5 bottom-5 z-40"
+      type="button"
+      variant="secondary"
+      size="icon"
+      onClick={scrollToTop}
+    >
+      <ArrowUp aria-hidden="true" />
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/Button/index.tsx b/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/Button/index.tsx
new file mode 100644
index 000000000..c7d8c04b9
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/Button/index.tsx
@@ -0,0 +1,28 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/CodeBlock/Buttons/Button";
+
+import { Button } from "@theme/components/ui/button";
+import { cn } from "@theme/utils/cn";
+
+const officialCodeActionClassName =
+  "theme-code-block__action absolute top-3 right-2 z-10 size-7 min-h-0 min-w-0 gap-2 rounded-md border-0 border-border bg-code hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus-visible:opacity-100 active:translate-y-0 dark:hover:bg-accent/50";
+
+export default function CodeBlockButton({
+  className,
+  style,
+  ...props
+}: Props): ReactNode {
+  return (
+    <Button
+      type="button"
+      data-variant="ghost"
+      data-size="icon"
+      variant="ghost"
+      size="icon"
+      className={cn(officialCodeActionClassName, className)}
+      style={{ fontFamily: "var(--ifm-font-family-monospace)", ...style }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/CopyButton/index.tsx b/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/CopyButton/index.tsx
new file mode 100644
index 000000000..758c783ec
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/CopyButton/index.tsx
@@ -0,0 +1,61 @@
+import React, {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { useCodeBlockContext } from "@docusaurus/theme-common/internal";
+import type { Props } from "@theme/CodeBlock/Buttons/CopyButton";
+import { Check, Copy } from "lucide-react";
+
+import Button from "@theme/CodeBlock/Buttons/Button";
+
+async function copyToClipboard(text: string) {
+  if (navigator.clipboard) return navigator.clipboard.writeText(text);
+  const { default: copy } = await import("copy-text-to-clipboard");
+  return copy(text);
+}
+
+export default function CopyButton({
+  className: _className,
+}: Props): ReactNode {
+  const {
+    metadata: { code },
+  } = useCodeBlockContext();
+  const [isCopied, setIsCopied] = useState(false);
+  const timeout = useRef<number | undefined>(undefined);
+
+  const copyCode = useCallback(async () => {
+    await copyToClipboard(code);
+    setIsCopied(true);
+    timeout.current = window.setTimeout(() => setIsCopied(false), 1000);
+  }, [code]);
+
+  useEffect(() => () => window.clearTimeout(timeout.current), []);
+
+  const label = isCopied
+    ? translate({ id: "theme.CodeBlock.copied", message: "Copied" })
+    : translate({
+        id: "theme.CodeBlock.copyButtonAriaLabel",
+        message: "Copy code to clipboard",
+      });
+  const shortLabel = isCopied
+    ? translate({ id: "theme.CodeBlock.copied", message: "Copied" })
+    : translate({ id: "theme.CodeBlock.copy", message: "Copy" });
+
+  return (
+    <Button
+      data-slot="copy-button"
+      data-copied={isCopied}
+      aria-label={label}
+      title={label}
+      onClick={copyCode}
+    >
+      <span className="sr-only">{shortLabel}</span>
+      {isCopied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/index.tsx b/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/index.tsx
new file mode 100644
index 000000000..402ef97fd
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/CodeBlock/Buttons/index.tsx
@@ -0,0 +1,19 @@
+import React, { type ReactNode } from "react";
+
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import CopyButton from "@theme/CodeBlock/Buttons/CopyButton";
+import type { Props } from "@theme/CodeBlock/Buttons";
+
+export default function CodeBlockButtons({
+  className: _className,
+}: Props): ReactNode {
+  return (
+    <BrowserOnly>
+      {() => (
+        <div className="theme-code-block__actions">
+          <CopyButton />
+        </div>
+      )}
+    </BrowserOnly>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/CodeBlock/Content/String.tsx b/packages/docusaurus-theme/src/theme/CodeBlock/Content/String.tsx
new file mode 100644
index 000000000..42c0d8f64
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/CodeBlock/Content/String.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Swizzled from @docusaurus/theme-classic under the MIT License.
+ */
+
+import React, { type ReactNode } from "react";
+
+import { useThemeConfig } from "@docusaurus/theme-common";
+import {
+  CodeBlockContextProvider,
+  type CodeBlockMetadata,
+  createCodeBlockMetadata,
+  useCodeWordWrap,
+} from "@docusaurus/theme-common/internal";
+import type { Props } from "@theme/CodeBlock/Content/String";
+import CodeBlockLayout from "@theme/CodeBlock/Layout";
+
+function useCodeBlockMetadata(props: Props): CodeBlockMetadata {
+  const { prism } = useThemeConfig();
+  const isMultiline = props.children.replace(/\n$/, "").includes("\n");
+
+  return createCodeBlockMetadata({
+    code: props.children,
+    className: props.className,
+    metastring: props.metastring,
+    magicComments: prism.magicComments,
+    defaultLanguage: prism.defaultLanguage,
+    language: props.language,
+    title: props.title,
+    showLineNumbers: props.showLineNumbers || isMultiline,
+  });
+}
+
+export default function CodeBlockString(props: Props): ReactNode {
+  const metadata = useCodeBlockMetadata(props);
+  const wordWrap = useCodeWordWrap();
+
+  return (
+    <CodeBlockContextProvider metadata={metadata} wordWrap={wordWrap}>
+      <CodeBlockLayout />
+    </CodeBlockContextProvider>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/CodeBlock/Layout/index.tsx b/packages/docusaurus-theme/src/theme/CodeBlock/Layout/index.tsx
new file mode 100644
index 000000000..4b4422e7f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/CodeBlock/Layout/index.tsx
@@ -0,0 +1,40 @@
+import React, { type ReactNode } from "react";
+
+import { usePrismTheme } from "@docusaurus/theme-common";
+import {
+  getPrismCssVariables,
+  useCodeBlockContext,
+} from "@docusaurus/theme-common/internal";
+import Buttons from "@theme/CodeBlock/Buttons";
+import Content from "@theme/CodeBlock/Content";
+import type { Props } from "@theme/CodeBlock/Layout";
+import Title from "@theme/CodeBlock/Title";
+import { CodeLanguageIcon } from "@theme/components/code-language-icon";
+
+export default function CodeBlockLayout({
+  className: _className,
+}: Props): ReactNode {
+  const { metadata } = useCodeBlockContext();
+  const prismTheme = usePrismTheme();
+
+  return (
+    <figure
+      data-rehype-pretty-code-figure=""
+      className="theme-code-block"
+      style={getPrismCssVariables(prismTheme)}
+    >
+      {metadata.title ? (
+        <figcaption
+          data-rehype-pretty-code-title=""
+          data-language={metadata.language}
+          className="theme-code-block__title"
+        >
+          <CodeLanguageIcon language={metadata.language} />
+          <Title>{metadata.title}</Title>
+        </figcaption>
+      ) : null}
+      <Buttons />
+      <Content />
+    </figure>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/CodeInline/index.tsx b/packages/docusaurus-theme/src/theme/CodeInline/index.tsx
new file mode 100644
index 000000000..e2c177456
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/CodeInline/index.tsx
@@ -0,0 +1,8 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/CodeInline";
+import { cn } from "@theme/utils/cn";
+
+export default function CodeInline({ className, ...props }: Props): ReactNode {
+  return <code className={cn("theme-code-inline", className)} {...props} />;
+}
diff --git a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.test.ts b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.test.ts
new file mode 100644
index 000000000..8787f52c6
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.test.ts
@@ -0,0 +1,12 @@
+import fs from "fs";
+import path from "path";
+
+const componentPath = path.join(__dirname, "index.tsx");
+
+it("uses Lucide icons with an accessible color mode button", () => {
+  const source = fs.readFileSync(componentPath, "utf8");
+
+  expect(source).toContain('from "lucide-react"');
+  expect(source).toContain("aria-label");
+  expect(source).toContain("respectPrefersColorScheme");
+});
diff --git a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx
new file mode 100644
index 000000000..77ca99a07
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx
@@ -0,0 +1,71 @@
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import type { ColorMode } from "@docusaurus/theme-common";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import { Monitor, Moon, Sun } from "lucide-react";
+
+import type { Props } from "@theme/ColorModeToggle";
+import { Button } from "@theme/components/ui/button";
+
+function getNextColorMode(
+  colorMode: ColorMode | null,
+  respectPrefersColorScheme: boolean
+): ColorMode | null {
+  if (!respectPrefersColorScheme) {
+    return colorMode === "dark" ? "light" : "dark";
+  }
+
+  if (colorMode === null) return "light";
+  if (colorMode === "light") return "dark";
+  return null;
+}
+
+function getColorModeLabel(colorMode: ColorMode | null): string {
+  const mode = colorMode ?? "system";
+  return translate({
+    id: `theme.colorToggle.mode.${mode}`,
+    message: mode,
+    description: "Current color mode label",
+  });
+}
+
+export default function ColorModeToggle({
+  className: _className,
+  buttonClassName: _buttonClassName,
+  respectPrefersColorScheme,
+  value,
+  onChange,
+}: Props): ReactNode {
+  const isBrowser = useIsBrowser();
+  const label = translate(
+    {
+      id: "theme.colorToggle.ariaLabel",
+      message: "Switch color mode. Current mode: {mode}",
+      description: "Color mode button label",
+    },
+    { mode: getColorModeLabel(value) }
+  );
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      onClick={() =>
+        onChange(getNextColorMode(value, respectPrefersColorScheme))
+      }
+      disabled={!isBrowser}
+      title={label}
+      aria-label={label}
+    >
+      {value === "dark" ? (
+        <Moon aria-hidden="true" />
+      ) : value === null ? (
+        <Monitor aria-hidden="true" />
+      ) : (
+        <Sun aria-hidden="true" />
+      )}
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Details/index.tsx b/packages/docusaurus-theme/src/theme/Details/index.tsx
new file mode 100644
index 000000000..5996d1281
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Details/index.tsx
@@ -0,0 +1,66 @@
+import React, {
+  isValidElement,
+  useId,
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import useBrokenLinks from "@docusaurus/useBrokenLinks";
+import type { DetailsProps } from "@docusaurus/theme-common/lib/components/Details";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@theme/components/ui/accordion";
+
+type Props = DetailsProps;
+type SummaryProps = ComponentProps<typeof AccordionTrigger> & {
+  children?: ReactNode;
+};
+
+function getSummary(summary: Props["summary"]): {
+  content: ReactNode;
+  props: Omit<SummaryProps, "children">;
+} {
+  if (!isValidElement(summary)) {
+    return { content: summary ?? "Details", props: {} };
+  }
+
+  const {
+    children,
+    className: _className,
+    style: _style,
+    ...props
+  } = (summary as ReactElement<SummaryProps>).props;
+  return { content: children, props };
+}
+
+export default function Details({
+  summary,
+  children,
+  className: _className,
+  id,
+  open,
+  ...props
+}: Props): ReactNode {
+  useBrokenLinks().collectAnchor(id);
+  const generatedId = useId();
+  const value = id ?? generatedId;
+  const { content: summaryContent, props: summaryProps } = getSummary(summary);
+
+  return (
+    <Accordion
+      {...(props as ComponentProps<typeof Accordion>)}
+      id={id}
+      defaultValue={open ? [value] : []}
+    >
+      <AccordionItem value={value}>
+        <AccordionTrigger {...summaryProps}>{summaryContent}</AccordionTrigger>
+        <AccordionContent>{children}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx
new file mode 100644
index 000000000..f38f63020
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocBreadcrumbs/index.tsx
@@ -0,0 +1,83 @@
+import React, { type ReactNode } from "react";
+
+import Link from "@docusaurus/Link";
+import { translate } from "@docusaurus/Translate";
+import { useHomePageRoute } from "@docusaurus/theme-common/internal";
+import * as DocsClient from "@docusaurus/plugin-content-docs/client";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@theme/components/ui/breadcrumb";
+import DocBreadcrumbsStructuredData from "@theme/DocBreadcrumbs/StructuredData";
+
+export default function DocBreadcrumbs(): ReactNode {
+  const breadcrumbs = (DocsClient as any).useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+
+  if (!breadcrumbs) return null;
+
+  return (
+    <>
+      <DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
+      <Breadcrumb
+        aria-label={translate({
+          id: "theme.docs.breadcrumbs.navAriaLabel",
+          message: "Breadcrumbs",
+          description: "Breadcrumb navigation label",
+        })}
+      >
+        <BreadcrumbList>
+          {homePageRoute && (
+            <>
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  render={
+                    <Link
+                      href="/"
+                      aria-label={translate({
+                        id: "theme.docs.breadcrumbs.home",
+                        message: "Home page",
+                        description: "Home breadcrumb label",
+                      })}
+                    />
+                  }
+                >
+                  Home
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="theme-breadcrumb-separator" />
+            </>
+          )}
+          {breadcrumbs.map((item: any, index: number) => {
+            const isLast = index === breadcrumbs.length - 1;
+            const href =
+              item.type === "category" && item.linkUnlisted
+                ? undefined
+                : item.href;
+
+            return (
+              <React.Fragment key={`${item.label}-${index}`}>
+                <BreadcrumbItem>
+                  {isLast || !href ? (
+                    <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink render={<Link href={href} />}>
+                      {item.label}
+                    </BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+                {!isLast && (
+                  <BreadcrumbSeparator className="theme-breadcrumb-separator" />
+                )}
+              </React.Fragment>
+            );
+          })}
+        </BreadcrumbList>
+      </Breadcrumb>
+    </>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocCard/Heading/Icon/index.tsx b/packages/docusaurus-theme/src/theme/DocCard/Heading/Icon/index.tsx
new file mode 100644
index 000000000..15bbcbe66
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocCard/Heading/Icon/index.tsx
@@ -0,0 +1,11 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/DocCard/Heading/Icon";
+import { ExternalLink, FileText, FolderClosed } from "lucide-react";
+
+export default function DocCardHeadingIcon({ icon }: Props): ReactNode {
+  const Icon =
+    icon === "🗃" ? FolderClosed : icon === "🔗" ? ExternalLink : FileText;
+
+  return <Icon aria-hidden="true" className="size-4" />;
+}
diff --git a/packages/docusaurus-theme/src/theme/DocCard/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocCard/Layout/index.tsx
new file mode 100644
index 000000000..04becfd2a
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocCard/Layout/index.tsx
@@ -0,0 +1,36 @@
+import React, { type ReactNode } from "react";
+
+import Link from "@docusaurus/Link";
+import type { Props } from "@theme/DocCard/Layout";
+import Text from "@theme/DocCard/Heading/Text";
+
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@theme/components/ui/card";
+
+export default function DocCardLayout({
+  item,
+  className: _className,
+  href,
+  icon: _icon,
+  title,
+  description,
+}: Props): ReactNode {
+  return (
+    <Link href={href} className="contents">
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Text item={item} title={title} />
+          </CardTitle>
+          {description ? (
+            <CardDescription title={description}>{description}</CardDescription>
+          ) : null}
+        </CardHeader>
+      </Card>
+    </Link>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocCardList/index.tsx b/packages/docusaurus-theme/src/theme/DocCardList/index.tsx
new file mode 100644
index 000000000..f96c8c6e7
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocCardList/index.tsx
@@ -0,0 +1,44 @@
+import React, { type ComponentProps, type ReactNode } from "react";
+
+import * as DocsClient from "@docusaurus/plugin-content-docs/client";
+import DocCard from "@theme/DocCard";
+import type { Props } from "@theme/DocCardList";
+
+type DocCardItem = ComponentProps<typeof DocCard>["item"];
+
+const { filterDocCardListItems, useCurrentSidebarSiblings } =
+  DocsClient as typeof DocsClient & {
+    filterDocCardListItems(items: DocCardItem[]): DocCardItem[];
+    useCurrentSidebarSiblings(): DocCardItem[];
+  };
+
+function CurrentCategoryCards(props: Props): ReactNode {
+  const items = useCurrentSidebarSiblings();
+  return <DocCardList {...props} items={items} />;
+}
+
+function DocCardListItem({
+  item,
+}: {
+  item: ComponentProps<typeof DocCard>["item"];
+}): ReactNode {
+  return (
+    <article className="min-w-0">
+      <DocCard item={item} />
+    </article>
+  );
+}
+
+export default function DocCardList({ items, className }: Props): ReactNode {
+  if (!items) {
+    return <CurrentCategoryCards className={className} />;
+  }
+
+  return (
+    <section className={`grid gap-3 sm:grid-cols-2 ${className ?? ""}`}>
+      {filterDocCardListItems(items).map((item, index) => (
+        <DocCardListItem key={index} item={item} />
+      ))}
+    </section>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx
new file mode 100644
index 000000000..2f67bb160
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocItem/Content/index.tsx
@@ -0,0 +1,29 @@
+import React, { type ReactNode } from "react";
+
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import Heading from "@theme/Heading";
+import MDXContent from "@theme/MDXContent";
+import type { Props } from "@theme/DocItem/Content";
+
+function useSyntheticTitle(): string | null {
+  const { metadata, frontMatter, contentTitle } = useDoc() as any;
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === "undefined";
+  return shouldRender ? metadata.title : null;
+}
+
+export default function DocItemContent({ children }: Props): ReactNode {
+  const syntheticTitle = useSyntheticTitle();
+
+  return (
+    <div className={ThemeClassNames.docs.docMarkdown}>
+      {syntheticTitle ? (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+        </header>
+      ) : null}
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx
new file mode 100644
index 000000000..d7075769c
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocItem/Layout/index.tsx
@@ -0,0 +1,64 @@
+import React, { type ReactNode } from "react";
+
+import clsx from "clsx";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import ContentVisibility from "@theme/ContentVisibility";
+import DocBreadcrumbs from "@theme/DocBreadcrumbs";
+import DocItemContent from "@theme/DocItem/Content";
+import DocItemFooter from "@theme/DocItem/Footer";
+import type { Props } from "@theme/DocItem/Layout";
+import DocItemPaginator from "@theme/DocItem/Paginator";
+import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop";
+import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile";
+import DocVersionBadge from "@theme/DocVersionBadge";
+import DocVersionBanner from "@theme/DocVersionBanner";
+
+import CopyPageActions from "@theme/components/copy-page-actions";
+
+function useDocTOC() {
+  const { frontMatter, toc } = useDoc() as any;
+
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+
+  return {
+    hidden,
+    mobile: canRender ? <DocItemTOCMobile /> : undefined,
+    desktop: canRender ? <DocItemTOCDesktop /> : undefined,
+  };
+}
+
+export default function DocItemLayout({ children }: Props): ReactNode {
+  const docTOC = useDocTOC();
+  const { metadata } = useDoc() as any;
+
+  return (
+    <>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="h-(--top-spacing) shrink-0" />
+        <div className="mx-auto flex w-full max-w-160 min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-foreground md:px-0 dark:text-foreground">
+          <ContentVisibility metadata={metadata} />
+          <div className={clsx("theme-doc-page__content")}>
+            <DocVersionBanner />
+            <div className="theme-doc-page__stack">
+              <article className="theme-doc-page__article">
+                <div className="theme-doc-page__breadcrumbs">
+                  <DocBreadcrumbs />
+                </div>
+                <DocVersionBadge />
+                {docTOC.mobile}
+                <CopyPageActions />
+                <DocItemContent>{children}</DocItemContent>
+                <DocItemFooter />
+              </article>
+              <DocItemPaginator />
+            </div>
+          </div>
+        </div>
+      </div>
+      {docTOC.desktop && (
+        <div className="theme-doc-page__toc">{docTOC.desktop}</div>
+      )}
+    </>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocItem/TOC/Desktop/index.tsx b/packages/docusaurus-theme/src/theme/DocItem/TOC/Desktop/index.tsx
new file mode 100644
index 000000000..790cd9802
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocItem/TOC/Desktop/index.tsx
@@ -0,0 +1,31 @@
+import React, { type ReactNode } from "react";
+
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import TOCItems from "@theme/TOCItems";
+
+const LINK_CLASS_NAME = "table-of-contents__link toc-highlight";
+const LINK_ACTIVE_CLASS_NAME = "table-of-contents__link--active";
+
+export default function DocItemTOCDesktop(): ReactNode {
+  const { toc, frontMatter } = useDoc();
+
+  return (
+    <div className="theme-doc-toc-desktop flex min-h-0 flex-1 flex-col gap-4">
+      <div className="h-(--top-spacing) shrink-0" aria-hidden="true" />
+      <div className="theme-doc-toc-desktop__body flex min-h-0 flex-1 flex-col px-8">
+        <div className="theme-doc-toc-desktop__scroll flex min-h-0 flex-1 scroll-fade scrollbar-none flex-col overflow-y-auto">
+          <div className="theme-doc-toc-desktop__list flex flex-col p-4 pt-0 text-sm">
+            <TOCItems
+              toc={toc}
+              minHeadingLevel={frontMatter.toc_min_heading_level}
+              maxHeadingLevel={frontMatter.toc_max_heading_level}
+              className="table-of-contents"
+              linkClassName={LINK_CLASS_NAME}
+              linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Main/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Main/index.tsx
new file mode 100644
index 000000000..88e655a6c
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Main/index.tsx
@@ -0,0 +1,16 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/DocRoot/Layout/Main";
+
+export default function DocRootLayoutMain({ children }: Props): ReactNode {
+  return (
+    <div className="h-full w-full">
+      <div
+        data-slot="docs"
+        className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
new file mode 100644
index 000000000..db8704cfb
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx
@@ -0,0 +1,35 @@
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { PanelLeftOpen } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+
+type Props = {
+  toggleSidebar: () => void;
+};
+
+export default function DocRootLayoutSidebarExpandButton({
+  toggleSidebar,
+}: Props): ReactNode {
+  const label = translate({
+    id: "theme.docs.sidebar.expandButtonTitle",
+    message: "Expand sidebar",
+    description: "The label for the desktop sidebar expand button.",
+  });
+
+  return (
+    <div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        title={label}
+        aria-label={label}
+        onClick={toggleSidebar}
+      >
+        <PanelLeftOpen aria-hidden="true" />
+      </Button>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx
new file mode 100644
index 000000000..899c6a005
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx
@@ -0,0 +1,61 @@
+import React, { type ReactNode } from "react";
+
+import { useDocsSidebar } from "@docusaurus/plugin-content-docs/client";
+import { useLocation } from "@docusaurus/router";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import DocSidebarDesktop from "@theme/DocSidebar/Desktop";
+import DocSidebarMobile from "@theme/DocSidebar/Mobile";
+import type { Props } from "@theme/DocRoot/Layout/Sidebar";
+import { Sidebar, useSidebar } from "@theme/components/ui/sidebar";
+
+function ResetOnSidebarChange({ children }: { children: ReactNode }) {
+  const sidebar = useDocsSidebar();
+  return (
+    <React.Fragment key={sidebar?.name ?? "noSidebar"}>
+      {children}
+    </React.Fragment>
+  );
+}
+
+export default function DocRootLayoutSidebar({ sidebar }: Props): ReactNode {
+  const { pathname } = useLocation();
+  const { state, toggleSidebar } = useSidebar();
+  const {
+    docs: {
+      sidebar: { hideable },
+    },
+  } = useThemeConfig();
+
+  const desktopSidebar = (
+    <DocSidebarDesktop
+      sidebar={sidebar}
+      path={pathname}
+      onCollapse={toggleSidebar}
+      isHidden={false}
+    />
+  );
+
+  return (
+    <ResetOnSidebarChange>
+      <DocSidebarMobile
+        sidebar={sidebar}
+        path={pathname}
+        onCollapse={toggleSidebar}
+        isHidden={false}
+      />
+      <div
+        className="theme-doc-sidebar-desktop hidden lg:block"
+        data-collapsed={state === "collapsed"}
+      >
+        <Sidebar
+          side="left"
+          variant="sidebar"
+          collapsible={hideable ? "icon" : "none"}
+          className="theme-doc-sidebar-container"
+        >
+          {desktopSidebar}
+        </Sidebar>
+      </div>
+    </ResetOnSidebarChange>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx
new file mode 100644
index 000000000..6cffca8a8
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/index.tsx
@@ -0,0 +1,67 @@
+import React, {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useState,
+} from "react";
+
+import { useDocsSidebar } from "@docusaurus/plugin-content-docs/client";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import BackToTopButton from "@theme/BackToTopButton";
+import DocRootLayoutMain from "@theme/DocRoot/Layout/Main";
+import DocRootLayoutSidebar from "@theme/DocRoot/Layout/Sidebar";
+import type { Props } from "@theme/DocRoot/Layout";
+import { SidebarProvider } from "@theme/components/ui/sidebar";
+import { TooltipProvider } from "@theme/components/ui/tooltip";
+
+export default function DocRootLayout({ children }: Props): ReactNode {
+  const sidebar = useDocsSidebar();
+  const {
+    docs: {
+      sidebar: { hideable },
+    },
+  } = useThemeConfig();
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+  const setSidebarOpen = useCallback(
+    (open: boolean) => {
+      if (hideable) setHiddenSidebarContainer(!open);
+    },
+    [hideable]
+  );
+
+  return (
+    <div className="theme-doc-root-layout">
+      <BackToTopButton />
+      <TooltipProvider>
+        <main className="flex min-h-0 min-w-0 flex-1 flex-col">
+          <div className="container-wrapper flex flex-1 flex-col px-2">
+            <SidebarProvider
+              className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--column-top-spacing:calc(var(--spacing)*6)] 3xl:fixed:container 3xl:fixed:px-3"
+              open={!hiddenSidebarContainer}
+              onOpenChange={setSidebarOpen}
+              style={
+                {
+                  "--sidebar-width": "18rem",
+                  "--sidebar-width-icon": "5rem",
+                } as CSSProperties
+              }
+            >
+              {sidebar && (
+                <DocRootLayoutSidebar
+                  sidebar={sidebar.items}
+                  hiddenSidebarContainer={hiddenSidebarContainer}
+                  setHiddenSidebarContainer={setHiddenSidebarContainer}
+                />
+              )}
+              <DocRootLayoutMain
+                hiddenSidebarContainer={hiddenSidebarContainer}
+              >
+                {children}
+              </DocRootLayoutMain>
+            </SidebarProvider>
+          </div>
+        </main>
+      </TooltipProvider>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx
new file mode 100644
index 000000000..dcc5133d6
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx
@@ -0,0 +1,31 @@
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { PanelLeftClose } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+
+type Props = {
+  onClick: () => void;
+};
+
+export default function CollapseButton({ onClick }: Props): ReactNode {
+  const label = translate({
+    id: "theme.docs.sidebar.collapseButtonTitle",
+    message: "Collapse sidebar",
+    description: "The label for the desktop sidebar collapse button.",
+  });
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      title={label}
+      aria-label={label}
+      onClick={onClick}
+    >
+      <PanelLeftClose aria-hidden="true" />
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/Content/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/Content/index.tsx
new file mode 100644
index 000000000..a52a7517b
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/Content/index.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Swizzled from @docusaurus/theme-classic under the MIT License.
+ */
+
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import DocSidebarItems from "@theme/DocSidebarItems";
+import type { Props } from "@theme/DocSidebar/Desktop/Content";
+import { SidebarGroup, SidebarMenu } from "@theme/components/ui/sidebar";
+
+export default function DocSidebarDesktopContent({
+  path,
+  sidebar,
+  className: _className,
+}: Props): ReactNode {
+  return (
+    <SidebarGroup>
+      <nav
+        aria-label={translate({
+          id: "theme.docs.sidebar.navAriaLabel",
+          message: "Docs sidebar",
+          description: "The ARIA label of the docs sidebar navigation",
+        })}
+      >
+        <SidebarMenu>
+          <DocSidebarItems items={sidebar} activePath={path} level={1} />
+        </SidebarMenu>
+      </nav>
+    </SidebarGroup>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/index.tsx
new file mode 100644
index 000000000..91da8c9c1
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocSidebar/Desktop/index.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from "react";
+
+import { useThemeConfig } from "@docusaurus/theme-common";
+import Logo from "@theme/Logo";
+import Content from "@theme/DocSidebar/Desktop/Content";
+import type { Props } from "@theme/DocSidebar/Desktop";
+
+import { SidebarThemeMenu } from "@theme/components/sidebar-theme-menu";
+import { Kbd, KbdGroup } from "@theme/components/ui/kbd";
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarTrigger,
+  useSidebar,
+} from "@theme/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@theme/components/ui/tooltip";
+
+function DocSidebarDesktop({ path, sidebar }: Props) {
+  const {
+    navbar: { hideOnScroll },
+    docs: {
+      sidebar: { hideable },
+    },
+  } = useThemeConfig();
+  const { state } = useSidebar();
+  const collapsed = state === "collapsed";
+  const [shortcutModifier, setShortcutModifier] = useState<"⌘" | "Ctrl">(
+    "Ctrl"
+  );
+
+  useEffect(() => {
+    setShortcutModifier(
+      /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "⌘" : "Ctrl"
+    );
+  }, []);
+
+  return (
+    <>
+      {hideOnScroll && !collapsed && (
+        <SidebarHeader className="theme-doc-sidebar-header">
+          <Logo tabIndex={-1} />
+        </SidebarHeader>
+      )}
+      <SidebarContent className="theme-doc-sidebar-content scroll-fade">
+        {!collapsed && <Content path={path} sidebar={sidebar} />}
+      </SidebarContent>
+      <SidebarFooter className="theme-doc-sidebar-footer">
+        <div className="theme-doc-sidebar-footer-actions">
+          <SidebarThemeMenu
+            compact={collapsed}
+            side={collapsed ? "right" : "top"}
+            align="start"
+          />
+          {hideable && (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <SidebarTrigger
+                    aria-keyshortcuts="Control+B Meta+B"
+                    aria-label={
+                      collapsed ? "Expand sidebar" : "Collapse sidebar"
+                    }
+                  />
+                }
+              />
+              <TooltipContent side={collapsed ? "right" : "top"}>
+                {collapsed ? "Expand" : "Collapse"}
+                <KbdGroup>
+                  <Kbd>{shortcutModifier}</Kbd>
+                  <Kbd>B</Kbd>
+                </KbdGroup>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </SidebarFooter>
+    </>
+  );
+}
+
+export default React.memo(DocSidebarDesktop);
diff --git a/packages/docusaurus-theme/src/theme/DocSidebar/Mobile/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebar/Mobile/index.tsx
new file mode 100644
index 000000000..ab364b1ba
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocSidebar/Mobile/index.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Swizzled from @docusaurus/theme-classic under the MIT License.
+ */
+
+import React from "react";
+
+import {
+  NavbarSecondaryMenuFiller,
+  type NavbarSecondaryMenuComponent,
+} from "@docusaurus/theme-common";
+import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
+import { translate } from "@docusaurus/Translate";
+import DocSidebarItems from "@theme/DocSidebarItems";
+import type { Props } from "@theme/DocSidebar/Mobile";
+import { SidebarMenu } from "@theme/components/ui/sidebar";
+
+const DocSidebarMobileSecondaryMenu: NavbarSecondaryMenuComponent<Props> = ({
+  sidebar,
+  path,
+}) => {
+  const mobileSidebar = useNavbarMobileSidebar();
+
+  return (
+    <nav
+      aria-label={translate({
+        id: "theme.docs.sidebar.navAriaLabel",
+        message: "Docs sidebar",
+        description: "The ARIA label of the docs sidebar navigation",
+      })}
+    >
+      <SidebarMenu>
+        <DocSidebarItems
+          items={sidebar}
+          activePath={path}
+          onItemClick={(item) => {
+            if (
+              item.type === "link" ||
+              (item.type === "category" && item.href)
+            ) {
+              mobileSidebar.toggle();
+            }
+          }}
+          level={1}
+        />
+      </SidebarMenu>
+    </nav>
+  );
+};
+
+function DocSidebarMobile(props: Props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={DocSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+
+export default React.memo(DocSidebarMobile);
diff --git a/packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx
new file mode 100644
index 000000000..9c471e5f9
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocSidebarItem/Category/index.tsx
@@ -0,0 +1,332 @@
+import React, {
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+
+import Link from "@docusaurus/Link";
+import type {
+  PropSidebarItemCategory,
+  PropSidebarItemLink,
+} from "@docusaurus/plugin-content-docs";
+import {
+  findFirstSidebarItemLink,
+  isActiveSidebarItem,
+  useDocSidebarItemsExpandedState,
+  useVisibleSidebarItems,
+} from "@docusaurus/plugin-content-docs/client";
+import { translate } from "@docusaurus/Translate";
+import {
+  useCollapsible,
+  usePrevious,
+  useThemeConfig,
+} from "@docusaurus/theme-common";
+import { isSamePath } from "@docusaurus/theme-common/internal";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import DocSidebarItemLink from "@theme/DocSidebarItem/Link";
+import DocSidebarItems from "@theme/DocSidebarItems";
+import type { Props } from "@theme/DocSidebarItem/Category";
+import { ChevronRight } from "lucide-react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@theme/components/ui/collapsible";
+import {
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@theme/components/ui/sidebar";
+
+function useAutoExpandActiveCategory({
+  isActive,
+  collapsed,
+  updateCollapsed,
+  activePath,
+}: {
+  isActive: boolean;
+  collapsed: boolean;
+  updateCollapsed: (value: boolean) => void;
+  activePath: string;
+}) {
+  const wasActive = usePrevious(isActive);
+  const previousActivePath = usePrevious(activePath);
+
+  useEffect(() => {
+    const justBecameActive = isActive && !wasActive;
+    const activePathChanged =
+      isActive && wasActive && activePath !== previousActivePath;
+    if ((justBecameActive || activePathChanged) && collapsed) {
+      updateCollapsed(false);
+    }
+  }, [
+    activePath,
+    collapsed,
+    isActive,
+    previousActivePath,
+    updateCollapsed,
+    wasActive,
+  ]);
+}
+
+function useCategoryHrefWithSSRFallback(item: Props["item"]) {
+  const isBrowser = useIsBrowser();
+
+  return useMemo(() => {
+    if (item.href && !item.linkUnlisted) return item.href;
+    if (isBrowser || !item.collapsible) return undefined;
+    return findFirstSidebarItemLink(item);
+  }, [isBrowser, item]);
+}
+
+function MenuItem({
+  level,
+  children,
+}: {
+  level: number;
+  children?: ReactNode;
+}) {
+  const Component = level > 1 ? SidebarMenuSubItem : SidebarMenuItem;
+  return <Component>{children}</Component>;
+}
+
+function MenuButton({
+  level,
+  render,
+  isActive,
+  children,
+}: {
+  level: number;
+  render?: ReactElement;
+  isActive: boolean;
+  children?: ReactNode;
+}) {
+  if (level > 1) {
+    return (
+      <SidebarMenuSubButton render={render} isActive={isActive}>
+        {children}
+      </SidebarMenuSubButton>
+    );
+  }
+
+  return (
+    <SidebarMenuButton render={render} isActive={isActive}>
+      {children}
+    </SidebarMenuButton>
+  );
+}
+
+function CategoryChildren({
+  items,
+  level,
+  activePath,
+  onItemClick,
+}: Pick<Props, "activePath" | "onItemClick"> & {
+  items: Props["item"]["items"];
+  level: number;
+}) {
+  return (
+    <SidebarMenuSub>
+      <DocSidebarItems
+        items={items}
+        activePath={activePath}
+        level={level + 1}
+        onItemClick={onItemClick}
+      />
+    </SidebarMenuSub>
+  );
+}
+
+function isCategoryWithHref(
+  category: PropSidebarItemCategory
+): category is PropSidebarItemCategory & { href: string } {
+  return typeof category.href === "string";
+}
+
+function EmptyCategory({ item, ...props }: Props): ReactNode {
+  if (!isCategoryWithHref(item)) return null;
+
+  const {
+    type: _type,
+    collapsed: _collapsed,
+    collapsible: _collapsible,
+    items: _items,
+    linkUnlisted: _linkUnlisted,
+    ...forwardableProps
+  } = item;
+  const linkItem: PropSidebarItemLink = {
+    type: "link",
+    ...forwardableProps,
+  };
+  return <DocSidebarItemLink item={linkItem} {...props} />;
+}
+
+function Category({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+}: Props): ReactNode {
+  const { items, label, collapsible, href } = item;
+  const {
+    docs: {
+      sidebar: { autoCollapseCategories },
+    },
+  } = useThemeConfig();
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isCurrentPage = isSamePath(href, activePath);
+  const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
+  const { collapsed, setCollapsed } = useCollapsible({
+    initialState: () => {
+      if (!collapsible) return false;
+      return isActive ? false : item.collapsed;
+    },
+  });
+  const { expandedItem, setExpandedItem } = useDocSidebarItemsExpandedState();
+  const updateCollapsed = useCallback(
+    (toCollapsed: boolean = !collapsed) => {
+      setExpandedItem(toCollapsed ? null : index);
+      setCollapsed(toCollapsed);
+    },
+    [collapsed, index, setCollapsed, setExpandedItem]
+  );
+
+  useAutoExpandActiveCategory({
+    isActive,
+    collapsed,
+    updateCollapsed,
+    activePath,
+  });
+  useEffect(() => {
+    if (
+      collapsible &&
+      expandedItem != null &&
+      expandedItem !== index &&
+      autoCollapseCategories
+    ) {
+      setCollapsed(true);
+    }
+  }, [autoCollapseCategories, collapsible, expandedItem, index, setCollapsed]);
+
+  const handleItemClick: ComponentProps<"a">["onClick"] = (event) => {
+    onItemClick?.(item);
+    if (!collapsible) return;
+
+    if (!href) {
+      event.preventDefault();
+      updateCollapsed();
+    } else if (isCurrentPage) {
+      event.preventDefault();
+      updateCollapsed();
+    } else {
+      updateCollapsed(false);
+    }
+  };
+  const toggleLabel = translate(
+    collapsed
+      ? {
+          id: "theme.DocSidebarItem.expandCategoryAriaLabel",
+          message: "Expand sidebar category '{label}'",
+          description: "The ARIA label to expand the sidebar category",
+        }
+      : {
+          id: "theme.DocSidebarItem.collapseCategoryAriaLabel",
+          message: "Collapse sidebar category '{label}'",
+          description: "The ARIA label to collapse the sidebar category",
+        },
+    { label }
+  );
+  const link = hrefWithSSRFallback ? (
+    <Link
+      to={hrefWithSSRFallback}
+      onClick={handleItemClick}
+      aria-current={isCurrentPage ? "page" : undefined}
+    />
+  ) : undefined;
+
+  if (!collapsible) {
+    return (
+      <MenuItem level={level}>
+        <MenuButton level={level} render={link} isActive={isActive}>
+          <span>{label}</span>
+        </MenuButton>
+        <CategoryChildren
+          items={items}
+          level={level}
+          activePath={activePath}
+          onItemClick={onItemClick}
+        />
+      </MenuItem>
+    );
+  }
+
+  return (
+    <Collapsible
+      open={!collapsed}
+      onOpenChange={(open) => updateCollapsed(!open)}
+      className="group/collapsible"
+      render={level > 1 ? <SidebarMenuSubItem /> : <SidebarMenuItem />}
+    >
+      {link ? (
+        <>
+          <MenuButton level={level} render={link} isActive={isActive}>
+            <span>{label}</span>
+          </MenuButton>
+          <CollapsibleTrigger
+            render={<SidebarMenuAction aria-label={toggleLabel} />}
+          >
+            <ChevronRight
+              aria-hidden="true"
+              className="transition-transform group-data-open/collapsible:rotate-90"
+            />
+          </CollapsibleTrigger>
+        </>
+      ) : level > 1 ? (
+        <CollapsibleTrigger
+          render={<SidebarMenuSubButton isActive={isActive} />}
+        >
+          <span>{label}</span>
+          <ChevronRight
+            aria-hidden="true"
+            className="ml-auto transition-transform group-data-open/collapsible:rotate-90"
+          />
+        </CollapsibleTrigger>
+      ) : (
+        <CollapsibleTrigger render={<SidebarMenuButton isActive={isActive} />}>
+          <span>{label}</span>
+          <ChevronRight
+            aria-hidden="true"
+            className="ml-auto transition-transform group-data-open/collapsible:rotate-90"
+          />
+        </CollapsibleTrigger>
+      )}
+      <CollapsibleContent>
+        <CategoryChildren
+          items={items}
+          level={level}
+          activePath={activePath}
+          onItemClick={onItemClick}
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export default function DocSidebarItemCategory(props: Props): ReactNode {
+  const visibleChildren = useVisibleSidebarItems(
+    props.item.items,
+    props.activePath
+  );
+  if (visibleChildren.length === 0) return <EmptyCategory {...props} />;
+  return (
+    <Category {...props} item={{ ...props.item, items: visibleChildren }} />
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx b/packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx
new file mode 100644
index 000000000..41209108d
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocSidebarItem/Link/index.tsx
@@ -0,0 +1,65 @@
+import React, { type ReactNode } from "react";
+
+import isInternalUrl from "@docusaurus/isInternalUrl";
+import Link from "@docusaurus/Link";
+import { isActiveSidebarItem } from "@docusaurus/plugin-content-docs/client";
+import type { Props } from "@theme/DocSidebarItem/Link";
+import { ExternalLink } from "lucide-react";
+
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@theme/components/ui/sidebar";
+
+function LinkLabel({ label }: { label: string }) {
+  return <span title={label}>{label}</span>;
+}
+
+export default function DocSidebarItemLink({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  ...props
+}: Props): ReactNode {
+  const { href, label, autoAddBaseUrl } = item;
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isInternalLink = isInternalUrl(href);
+  const link = (
+    <Link
+      autoAddBaseUrl={autoAddBaseUrl}
+      aria-current={isActive ? "page" : undefined}
+      to={href}
+      {...(isInternalLink && {
+        onClick: onItemClick ? () => onItemClick(item) : undefined,
+      })}
+      {...props}
+    />
+  );
+  const content = (
+    <>
+      <LinkLabel label={label} />
+      {!isInternalLink && <ExternalLink aria-hidden="true" />}
+    </>
+  );
+
+  if (level > 1) {
+    return (
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton render={link} isActive={isActive}>
+          {content}
+        </SidebarMenuSubButton>
+      </SidebarMenuSubItem>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton render={link} isActive={isActive} tooltip={label}>
+        {content}
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/DocVersionBadge/index.tsx b/packages/docusaurus-theme/src/theme/DocVersionBadge/index.tsx
new file mode 100644
index 000000000..10ba61dcf
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/DocVersionBadge/index.tsx
@@ -0,0 +1,29 @@
+import React, { type ReactNode } from "react";
+
+import Translate from "@docusaurus/Translate";
+import * as DocsClient from "@docusaurus/plugin-content-docs/client";
+
+import { Badge } from "@theme/components/ui/badge";
+
+type Props = {
+  className?: string;
+};
+
+export default function DocVersionBadge({
+  className: _className,
+}: Props): ReactNode {
+  const versionMetadata = (DocsClient as any).useDocsVersion();
+
+  if (!versionMetadata?.badge) return null;
+
+  return (
+    <Badge variant="secondary">
+      <Translate
+        id="theme.docs.versionBadge.label"
+        values={{ versionLabel: versionMetadata.label }}
+      >
+        {"Version: {versionLabel}"}
+      </Translate>
+    </Badge>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx b/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx
new file mode 100644
index 000000000..0938b3e7c
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx
@@ -0,0 +1,22 @@
+import React, { type ReactNode } from "react";
+
+import Link from "@docusaurus/Link";
+import Translate from "@docusaurus/Translate";
+import type { Props } from "@theme/EditThisPage";
+import { Pencil } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+
+export default function EditThisPage({ editUrl }: Props): ReactNode {
+  return (
+    <Button render={<Link to={editUrl} />} nativeButton={false} variant="link">
+      <Pencil data-icon="inline-start" aria-hidden="true" />
+      <Translate
+        id="theme.common.editThisPage"
+        description="The link label to edit the current page"
+      >
+        Edit this page
+      </Translate>
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Icon/Copy/index.tsx b/packages/docusaurus-theme/src/theme/Icon/Copy/index.tsx
new file mode 100644
index 000000000..29f695412
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Icon/Copy/index.tsx
@@ -0,0 +1,8 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/Icon/Copy";
+import { Copy } from "lucide-react";
+
+export default function IconCopy(props: Props): ReactNode {
+  return <Copy aria-hidden="true" {...props} />;
+}
diff --git a/packages/docusaurus-theme/src/theme/Icon/Edit/index.tsx b/packages/docusaurus-theme/src/theme/Icon/Edit/index.tsx
new file mode 100644
index 000000000..d974fcf46
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Icon/Edit/index.tsx
@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/Icon/Edit";
+import { Pencil } from "lucide-react";
+
+export default function IconEdit({
+  width = 20,
+  height = 20,
+  ...props
+}: Props): ReactNode {
+  return <Pencil width={width} height={height} aria-hidden="true" {...props} />;
+}
diff --git a/packages/docusaurus-theme/src/theme/Icon/ExternalLink/index.tsx b/packages/docusaurus-theme/src/theme/Icon/ExternalLink/index.tsx
new file mode 100644
index 000000000..4ee31332f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Icon/ExternalLink/index.tsx
@@ -0,0 +1,23 @@
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import type { Props } from "@theme/Icon/ExternalLink";
+import { ExternalLink } from "lucide-react";
+
+export default function IconExternalLink({
+  width = 14,
+  height = 14,
+}: Props): ReactNode {
+  return (
+    <ExternalLink
+      width={width}
+      height={height}
+      aria-label={translate({
+        id: "theme.IconExternalLink.ariaLabel",
+        message: "(opens in new tab)",
+        description: "The accessible label for an external link icon.",
+      })}
+      className="ml-1 inline align-[-0.125em]"
+    />
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Icon/Success/index.tsx b/packages/docusaurus-theme/src/theme/Icon/Success/index.tsx
new file mode 100644
index 000000000..d29d109f4
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Icon/Success/index.tsx
@@ -0,0 +1,8 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/Icon/Success";
+import { Check } from "lucide-react";
+
+export default function IconSuccess(props: Props): ReactNode {
+  return <Check aria-hidden="true" {...props} />;
+}
diff --git a/packages/docusaurus-theme/src/theme/Icon/WordWrap/index.tsx b/packages/docusaurus-theme/src/theme/Icon/WordWrap/index.tsx
new file mode 100644
index 000000000..50813ffaf
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Icon/WordWrap/index.tsx
@@ -0,0 +1,8 @@
+import React, { type ReactNode } from "react";
+
+import type { Props } from "@theme/Icon/WordWrap";
+import { WrapText } from "lucide-react";
+
+export default function IconWordWrap(props: Props): ReactNode {
+  return <WrapText aria-hidden="true" {...props} />;
+}
diff --git a/packages/docusaurus-theme/src/theme/Layout/index.tsx b/packages/docusaurus-theme/src/theme/Layout/index.tsx
new file mode 100644
index 000000000..8203be30f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Layout/index.tsx
@@ -0,0 +1,50 @@
+import React, { type ReactNode } from "react";
+
+import ErrorBoundary from "@docusaurus/ErrorBoundary";
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from "@docusaurus/theme-common";
+import AnnouncementBar from "@theme/AnnouncementBar";
+import ErrorPageContent from "@theme/ErrorPageContent";
+import Footer from "@theme/Footer";
+import type { Props } from "@theme/Layout";
+import LayoutProvider from "@theme/Layout/Provider";
+import Navbar from "@theme/Navbar";
+import SkipToContent from "@theme/SkipToContent";
+import clsx from "clsx";
+
+export default function Layout({
+  children,
+  noFooter,
+  wrapperClassName,
+  title,
+  description,
+}: Props): ReactNode {
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+      <SkipToContent />
+      <AnnouncementBar />
+      <div className="theme-app-shell">
+        <Navbar />
+        <div
+          id={SkipToContentFallbackId}
+          className={clsx(
+            ThemeClassNames.layout.main.container,
+            ThemeClassNames.wrapper.main,
+            wrapperClassName
+          )}
+        >
+          <ErrorBoundary
+            fallback={(params) => <ErrorPageContent {...params} />}
+          >
+            {children}
+          </ErrorBoundary>
+        </div>
+        {!noFooter && <Footer />}
+      </div>
+    </LayoutProvider>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme/src/theme/MDXComponents/index.tsx
new file mode 100644
index 000000000..84ae7b3bc
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/MDXComponents/index.tsx
@@ -0,0 +1,51 @@
+import React, { type ComponentProps } from "react";
+
+import Head from "@docusaurus/Head";
+import Admonition from "@theme/Admonition";
+import MDXA from "@theme/MDXComponents/A";
+import MDXCode from "@theme/MDXComponents/Code";
+import MDXDetails from "@theme/MDXComponents/Details";
+import MDXHeading from "@theme/MDXComponents/Heading";
+import MDXImg from "@theme/MDXComponents/Img";
+import MDXLi from "@theme/MDXComponents/Li";
+import MDXPre from "@theme/MDXComponents/Pre";
+import MDXUl from "@theme/MDXComponents/Ul";
+import Mermaid from "@theme/Mermaid";
+import type { MDXComponentsObject } from "@theme/MDXComponents";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@theme/components/ui/table";
+
+const MDXComponents: MDXComponentsObject = {
+  Head,
+  details: MDXDetails,
+  Details: MDXDetails,
+  code: MDXCode,
+  a: MDXA,
+  pre: MDXPre,
+  ul: MDXUl,
+  li: MDXLi,
+  img: MDXImg,
+  table: Table,
+  thead: TableHeader,
+  tbody: TableBody,
+  tr: TableRow,
+  th: TableHead,
+  td: TableCell,
+  h1: (props: ComponentProps<"h1">) => <MDXHeading as="h1" {...props} />,
+  h2: (props: ComponentProps<"h2">) => <MDXHeading as="h2" {...props} />,
+  h3: (props: ComponentProps<"h3">) => <MDXHeading as="h3" {...props} />,
+  h4: (props: ComponentProps<"h4">) => <MDXHeading as="h4" {...props} />,
+  h5: (props: ComponentProps<"h5">) => <MDXHeading as="h5" {...props} />,
+  h6: (props: ComponentProps<"h6">) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
+  mermaid: Mermaid,
+};
+
+export default MDXComponents;
diff --git a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx
new file mode 100644
index 000000000..df7178074
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx
@@ -0,0 +1,272 @@
+import React, { type ReactNode, useRef } from "react";
+
+import {
+  useActiveDocContext,
+  useLayoutDoc,
+} from "@docusaurus/plugin-content-docs/client";
+import { useThemeConfig, useWindowSize } from "@docusaurus/theme-common";
+import { usePluginData } from "@docusaurus/useGlobalData";
+import { ErrorCauseBoundary, ThemeClassNames } from "@docusaurus/theme-common";
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+} from "@docusaurus/theme-common/internal";
+import SearchBar from "@theme/SearchBar";
+import NavbarLogo from "@theme/Navbar/Logo";
+import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
+import NavbarItem from "@theme/NavbarItem";
+import type { Props as NavbarItemConfig } from "@theme/NavbarItem";
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink";
+import { Search } from "lucide-react";
+
+import LocalSearch from "@theme/components/local-search";
+import { Button } from "@theme/components/ui/button";
+import { Kbd, KbdGroup } from "@theme/components/ui/kbd";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@theme/components/ui/navigation-menu";
+
+type NavigationItemConfig = NavbarItemConfig & {
+  type?: string;
+  label?: ReactNode;
+  items?: NavigationItemConfig[];
+  docId?: string;
+  docsPluginId?: string;
+};
+
+function useNavbarItems() {
+  return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+function NavbarItems({ items }: { items: NavbarItemConfig[] }): ReactNode {
+  return (
+    <>
+      {items.map((item, index) => (
+        <ErrorCauseBoundary
+          key={index}
+          onError={(error) =>
+            new Error(
+              `A theme navbar item failed to render.\n${JSON.stringify(item, null, 2)}`,
+              { cause: error }
+            )
+          }
+        >
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
+      ))}
+    </>
+  );
+}
+
+function supportsNavigationMenu(item: NavigationItemConfig): boolean {
+  const type = item.type ?? (item.items ? "dropdown" : "default");
+  return type === "default" || type === "dropdown" || type === "doc";
+}
+
+function NavbarNavigationMenuDocItem({
+  item,
+}: {
+  item: NavigationItemConfig;
+}): ReactNode {
+  const { docId, docsPluginId, label, ...navLinkProps } = item;
+  delete navLinkProps.type;
+  delete navLinkProps.items;
+
+  const { activeDoc } = useActiveDocContext(docsPluginId);
+  const doc = useLayoutDoc(docId!, docsPluginId);
+  const pageActive = activeDoc?.path === doc?.path;
+
+  if (doc === null || (doc.unlisted && !pageActive)) return null;
+
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuLink
+        className={navigationMenuTriggerStyle()}
+        render={
+          <NavbarNavLink
+            {...navLinkProps}
+            exact
+            to={doc.path}
+            label={label ?? doc.id}
+            isActive={() =>
+              pageActive ||
+              (!!activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar)
+            }
+          />
+        }
+      />
+    </NavigationMenuItem>
+  );
+}
+
+function NavbarNavigationMenuItem({
+  item,
+}: {
+  item: NavigationItemConfig;
+}): ReactNode {
+  if (!supportsNavigationMenu(item)) {
+    return (
+      <NavigationMenuItem>
+        <NavbarItem {...item} />
+      </NavigationMenuItem>
+    );
+  }
+
+  if (item.type === "doc") return <NavbarNavigationMenuDocItem item={item} />;
+
+  if (!item.items) {
+    return (
+      <NavigationMenuItem>
+        <NavigationMenuLink
+          className={navigationMenuTriggerStyle()}
+          render={<NavbarNavLink {...item} />}
+        />
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <ul>
+          {item.items.map((child, index) => (
+            <li key={index}>
+              <NavigationMenuLink
+                render={<NavbarNavLink {...child} isDropdownLink />}
+              />
+            </li>
+          ))}
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  );
+}
+
+function NavbarNavigation({
+  items,
+  align = "start",
+}: {
+  items: NavbarItemConfig[];
+  align?: "start" | "end";
+}): ReactNode {
+  if (items.length === 0) return null;
+
+  const navigationItems = items as NavigationItemConfig[];
+  if (align === "start") {
+    return (
+      <NavigationMenu
+        align={align}
+        className="theme-navbar-desktop-navigation"
+        data-align={align}
+      >
+        <NavigationMenuList>
+          {navigationItems.map((item, index) => (
+            <ErrorCauseBoundary
+              key={index}
+              onError={(error) =>
+                new Error(
+                  `A theme navbar item failed to render.\n${JSON.stringify(item, null, 2)}`,
+                  { cause: error }
+                )
+              }
+            >
+              <NavbarNavigationMenuItem item={item} />
+            </ErrorCauseBoundary>
+          ))}
+        </NavigationMenuList>
+      </NavigationMenu>
+    );
+  }
+
+  return (
+    <div
+      className="theme-navbar-desktop-navigation flex items-center gap-0"
+      data-align={align}
+    >
+      <NavbarItems items={items} />
+    </div>
+  );
+}
+
+function CommandSearch({
+  provider,
+}: {
+  provider: false | "local" | "algolia";
+}): ReactNode {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const windowSize = useWindowSize();
+  const algolia = (useThemeConfig() as { algolia?: unknown }).algolia;
+
+  if (provider === "local") return <LocalSearch />;
+  if (provider !== "algolia" || !algolia) return null;
+
+  return (
+    <div ref={hostRef} className="theme-command-search">
+      <div className="theme-command-search__provider" aria-hidden="true">
+        <SearchBar />
+      </div>
+      <Button
+        variant="outline"
+        size={windowSize === "mobile" ? "icon" : "default"}
+        aria-label={
+          windowSize === "mobile" ? "Search documentation" : undefined
+        }
+        onClick={() =>
+          hostRef.current
+            ?.querySelector<HTMLButtonElement>(".DocSearch-Button")
+            ?.click()
+        }
+      >
+        <Search aria-hidden="true" />
+        {windowSize !== "mobile" ? (
+          <>
+            <span>Search</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </>
+        ) : null}
+      </Button>
+    </div>
+  );
+}
+
+export default function NavbarContent(): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems().filter((item) => item.type !== "search");
+  const [leftItems, rightItems] = splitNavbarItems(items);
+  const themeData = usePluginData("@aeei/docusaurus-theme") as
+    | { search?: { provider?: false | "local" | "algolia" } }
+    | undefined;
+  const searchProvider = themeData?.search?.provider ?? false;
+
+  return (
+    <div className="navbar__inner">
+      <div
+        className={`${ThemeClassNames.layout.navbar.containerLeft} navbar__items`}
+      >
+        {!mobileSidebar.disabled && (
+          <div className="theme-navbar-mobile-trigger">
+            <NavbarMobileSidebarToggle />
+          </div>
+        )}
+        <NavbarLogo />
+        <NavbarNavigation items={leftItems} />
+      </div>
+      <div
+        className={`${ThemeClassNames.layout.navbar.containerRight} navbar__items navbar__items--right`}
+      >
+        <NavbarNavigation items={rightItems} align="end" />
+        <CommandSearch provider={searchProvider} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx
new file mode 100644
index 000000000..87b5f1995
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx
@@ -0,0 +1,16 @@
+import React, { type ReactNode } from "react";
+
+import {
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@theme/components/ui/sheet";
+
+export default function NavbarMobileSidebarHeader(): ReactNode {
+  return (
+    <SheetHeader>
+      <SheetTitle>Navigation</SheetTitle>
+      <SheetDescription>Browse documentation pages.</SheetDescription>
+    </SheetHeader>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx
new file mode 100644
index 000000000..87876386d
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -0,0 +1,76 @@
+import React, { type CSSProperties, type ReactNode } from "react";
+
+import {
+  useNavbarMobileSidebar,
+  useNavbarSecondaryMenu,
+} from "@docusaurus/theme-common/internal";
+
+import { SidebarThemeMenu } from "@theme/components/sidebar-theme-menu";
+import { Sheet, SheetContent } from "@theme/components/ui/sheet";
+import { SidebarFooter, SidebarProvider } from "@theme/components/ui/sidebar";
+
+type Props = {
+  header: ReactNode;
+  primaryMenu: ReactNode;
+  secondaryMenu: ReactNode;
+};
+
+export default function NavbarMobileSidebarLayout({
+  header,
+  primaryMenu,
+  secondaryMenu,
+}: Props): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
+
+  return (
+    <Sheet
+      open={mobileSidebar.shown}
+      onOpenChange={(open) => {
+        if (!open && mobileSidebar.shown) mobileSidebar.toggle();
+      }}
+      onOpenChangeComplete={(open) => {
+        if (!open) {
+          document
+            .querySelector<HTMLButtonElement>(
+              "[data-mobile-navigation-trigger]"
+            )
+            ?.focus();
+        }
+      }}
+    >
+      <SheetContent
+        side="left"
+        aria-label="Navigation menu"
+        className="theme-mobile-sidebar-content w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground"
+        style={
+          {
+            "--sidebar-width": "18rem",
+            width: "var(--sidebar-width)",
+          } as CSSProperties
+        }
+      >
+        <SidebarProvider className="flex-col">
+          {header}
+          <div className="theme-mobile-sheet__menus">
+            <div
+              className="theme-mobile-sheet__panel theme-mobile-sheet__panel--primary"
+              hidden={secondaryMenuShown}
+            >
+              {primaryMenu}
+            </div>
+            <div
+              className="theme-mobile-sheet__panel theme-mobile-sheet__panel--secondary"
+              hidden={!secondaryMenuShown}
+            >
+              {secondaryMenu}
+            </div>
+          </div>
+          <SidebarFooter className="theme-mobile-sheet__footer">
+            <SidebarThemeMenu side="top" align="start" />
+          </SidebarFooter>
+        </SidebarProvider>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
new file mode 100644
index 000000000..4040d87f5
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -0,0 +1,33 @@
+import React, { type ReactNode } from "react";
+
+import { useThemeConfig } from "@docusaurus/theme-common";
+import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
+import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
+
+import {
+  SidebarContent,
+  SidebarGroup,
+  SidebarMenu,
+} from "@theme/components/ui/sidebar";
+
+export default function NavbarMobilePrimaryMenu(): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useThemeConfig().navbar.items as NavbarItemConfig[];
+
+  return (
+    <SidebarContent className="scroll-fade">
+      <SidebarGroup>
+        <SidebarMenu>
+          {items.map((item, index) => (
+            <NavbarItem
+              mobile
+              {...item}
+              onClick={() => mobileSidebar.toggle()}
+              key={index}
+            />
+          ))}
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
new file mode 100644
index 000000000..5a1879283
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Swizzled from @docusaurus/theme-classic under the MIT License.
+ */
+
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal";
+import { ArrowLeft } from "lucide-react";
+
+import {
+  SidebarContent,
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@theme/components/ui/sidebar";
+
+export default function NavbarMobileSidebarSecondaryMenu(): ReactNode {
+  const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0;
+  const secondaryMenu = useNavbarSecondaryMenu();
+  const backButtonLabel = translate({
+    id: "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",
+    message: "Back to main menu",
+    description:
+      "The label of the back button to return to the main mobile menu",
+  }).replace(/^←\s*/u, "");
+
+  return (
+    <SidebarContent className="scroll-fade">
+      <SidebarGroup>
+        {!isPrimaryMenuEmpty && (
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                type="button"
+                onClick={() => secondaryMenu.hide()}
+              >
+                <ArrowLeft aria-hidden="true" />
+                {backButtonLabel}
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        )}
+        {secondaryMenu.content}
+      </SidebarGroup>
+    </SidebarContent>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Toggle/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
new file mode 100644
index 000000000..da2ffa37d
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
@@ -0,0 +1,29 @@
+import React, { type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
+import { Menu } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+
+export default function MobileSidebarToggle(): ReactNode {
+  const { toggle, shown } = useNavbarMobileSidebar();
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      onClick={toggle}
+      aria-label={translate({
+        id: "theme.docs.sidebar.toggleSidebarButtonAriaLabel",
+        message: "Toggle navigation bar",
+        description: "The accessible label of the mobile navigation toggle.",
+      })}
+      aria-expanded={shown}
+      data-mobile-navigation-trigger=""
+    >
+      <Menu aria-hidden="true" />
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/index.test.ts b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/index.test.ts
new file mode 100644
index 000000000..ea5ff08c9
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/index.test.ts
@@ -0,0 +1,53 @@
+import fs from "fs";
+import path from "path";
+
+const read = (relativePath: string) =>
+  fs.readFileSync(path.join(__dirname, relativePath), "utf8");
+
+it("leaves Escape dismissal to Base Dialog and keeps the mobile shortcut", () => {
+  const source = read("index.tsx");
+
+  expect(source).not.toContain('event.key === "Escape"');
+  expect(source).toContain("mobileSidebar.toggle()");
+  expect(source).toContain('event.key.toLowerCase() === "b"');
+  expect(source).toContain('window.matchMedia("(max-width: 1023px)")');
+  expect(source).toContain("if (mobileSidebar.disabled) return null;");
+  expect(source).not.toContain("if (!mobileSidebar.shouldRender) return null;");
+});
+
+it("uses official Sheet, Button, and Sidebar composition", () => {
+  const layout = read("Layout/index.tsx");
+  const header = read("Header/index.tsx");
+  const toggle = read("Toggle/index.tsx");
+  const navbarContent = read("../Content/index.tsx");
+
+  expect(layout).toContain("<SheetContent");
+  expect(layout).toContain("<SidebarProvider");
+  expect(header).toContain("<SheetHeader>");
+  expect(header).not.toContain("<SidebarHeader>");
+  expect(header).not.toContain("SidebarThemeMenu");
+  expect(toggle).toContain('variant="ghost"');
+  expect(toggle).toContain('size="icon"');
+  expect(toggle).not.toContain('className="navbar__toggle"');
+  expect(navbarContent).toContain("theme-navbar-mobile-trigger");
+  expect(navbarContent).not.toContain("SidebarThemeMenu");
+  expect(layout).toContain('<SidebarThemeMenu side="top" align="start" />');
+});
+
+it("removes the legacy text arrow when the back action already has an icon", () => {
+  const secondaryMenu = read("SecondaryMenu/index.tsx");
+
+  expect(secondaryMenu).toContain(".replace(/^←\\s*/u, \"\")");
+  expect(secondaryMenu).toContain("<ArrowLeft");
+  expect(secondaryMenu).not.toContain("<Translate");
+});
+
+it("restores focus to the official mobile navigation Button", () => {
+  const layout = read("Layout/index.tsx");
+
+  expect(layout).toContain("onOpenChangeComplete");
+  expect(layout).toMatch(
+    /querySelector<HTMLButtonElement>\([\s\S]*"\[data-mobile-navigation-trigger\]"/
+  );
+  expect(layout).toContain("?.focus()");
+});
diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/index.tsx
new file mode 100644
index 000000000..84b24ad6f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/index.tsx
@@ -0,0 +1,37 @@
+import React, { type ReactNode, useEffect } from "react";
+
+import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal";
+import NavbarMobileSidebarHeader from "@theme/Navbar/MobileSidebar/Header";
+import NavbarMobileSidebarLayout from "@theme/Navbar/MobileSidebar/Layout";
+import NavbarMobileSidebarPrimaryMenu from "@theme/Navbar/MobileSidebar/PrimaryMenu";
+import NavbarMobileSidebarSecondaryMenu from "@theme/Navbar/MobileSidebar/SecondaryMenu";
+
+export default function NavbarMobileSidebar(): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key.toLowerCase() === "b" &&
+        (event.metaKey || event.ctrlKey) &&
+        window.matchMedia("(max-width: 1023px)").matches
+      ) {
+        event.preventDefault();
+        mobileSidebar.toggle();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [mobileSidebar]);
+
+  if (mobileSidebar.disabled) return null;
+
+  return (
+    <NavbarMobileSidebarLayout
+      header={<NavbarMobileSidebarHeader />}
+      primaryMenu={<NavbarMobileSidebarPrimaryMenu />}
+      secondaryMenu={<NavbarMobileSidebarSecondaryMenu />}
+    />
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/ComponentTypes.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/ComponentTypes.tsx
new file mode 100644
index 000000000..968be6f33
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/NavbarItem/ComponentTypes.tsx
@@ -0,0 +1,23 @@
+import DefaultNavbarItem from "@theme/NavbarItem/DefaultNavbarItem";
+import DocNavbarItem from "@theme/NavbarItem/DocNavbarItem";
+import DocSidebarNavbarItem from "@theme/NavbarItem/DocSidebarNavbarItem";
+import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdownNavbarItem";
+import DocsVersionNavbarItem from "@theme/NavbarItem/DocsVersionNavbarItem";
+import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem";
+import HtmlNavbarItem from "@theme/NavbarItem/HtmlNavbarItem";
+import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem";
+import SearchNavbarItem from "@theme/NavbarItem/SearchNavbarItem";
+
+const ComponentTypes = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+
+export default ComponentTypes;
diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/DefaultNavbarItem/Desktop/index.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/DefaultNavbarItem/Desktop/index.tsx
new file mode 100644
index 000000000..5fffbf5ba
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/NavbarItem/DefaultNavbarItem/Desktop/index.tsx
@@ -0,0 +1,27 @@
+import React, { type ReactNode } from "react";
+
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink";
+
+import { Button } from "@theme/components/ui/button";
+
+type Props = {
+  className?: string;
+  isDropdownItem?: boolean;
+  [key: string]: unknown;
+};
+
+export default function DefaultNavbarItemDesktop({
+  className: _className,
+  isDropdownItem = false,
+  ...props
+}: Props): ReactNode {
+  const link = <NavbarNavLink {...props} />;
+
+  if (isDropdownItem) return <li>{link}</li>;
+
+  return (
+    <Button render={link} nativeButton={false} variant="ghost">
+      {props.label as ReactNode}
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/DefaultNavbarItem/Mobile/index.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/DefaultNavbarItem/Mobile/index.tsx
new file mode 100644
index 000000000..6f5a4319e
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/NavbarItem/DefaultNavbarItem/Mobile/index.tsx
@@ -0,0 +1,33 @@
+import React, { type ReactNode } from "react";
+
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink";
+import type { Props } from "@theme/NavbarItem/DefaultNavbarItem/Mobile";
+
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@theme/components/ui/sidebar";
+
+export default function DefaultNavbarItemMobile({
+  className: _className,
+  isDropdownItem,
+  ...props
+}: Props): ReactNode {
+  const link = <NavbarNavLink {...props} />;
+
+  if (isDropdownItem) {
+    return (
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton render={link} />
+      </SidebarMenuSubItem>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton render={link} />
+    </SidebarMenuItem>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.tsx
new file mode 100644
index 000000000..11906fa82
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useState, type ReactNode } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { isRegexpStringMatch } from "@docusaurus/theme-common";
+import {
+  isSamePath,
+  useLocalPathname,
+} from "@docusaurus/theme-common/internal";
+import NavbarItem, { type LinkLikeNavbarItemProps } from "@theme/NavbarItem";
+import NavbarNavLink from "@theme/NavbarItem/NavbarNavLink";
+import type { Props } from "@theme/NavbarItem/DropdownNavbarItem/Mobile";
+import { ChevronRight } from "lucide-react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@theme/components/ui/collapsible";
+import {
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+} from "@theme/components/ui/sidebar";
+
+function isItemActive(item: LinkLikeNavbarItemProps, pathname: string) {
+  return (
+    isSamePath(item.to, pathname) ||
+    isRegexpStringMatch(item.activeBaseRegex, pathname) ||
+    !!(item.activeBasePath && pathname.startsWith(item.activeBasePath))
+  );
+}
+
+export default function DropdownNavbarItemMobile({
+  items,
+  className: _className,
+  position: _position,
+  onClick,
+  ...props
+}: Props): ReactNode {
+  const pathname = useLocalPathname();
+  const active =
+    isSamePath(props.to, pathname) ||
+    items.some((item) => isItemActive(item, pathname));
+  const [open, setOpen] = useState(active);
+  const hasLink = Boolean(props.to || props.href);
+  const label = props.children ?? props.label;
+  const accessibleLabel =
+    typeof label === "string" || typeof label === "number" ? label : "menu";
+  const toggleLabel = translate(
+    {
+      id: "theme.navbar.mobileDropdown.collapseButton.ariaLabel",
+      message: "Toggle the {label} dropdown",
+      description: "The label used to toggle a mobile navbar dropdown.",
+    },
+    { label: accessibleLabel }
+  );
+
+  useEffect(() => {
+    if (active) setOpen(true);
+  }, [active]);
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="group/collapsible"
+      render={<SidebarMenuItem />}
+    >
+      {hasLink ? (
+        <>
+          <SidebarMenuButton
+            render={<NavbarNavLink {...props} onClick={onClick} />}
+            isActive={active}
+          >
+            {label}
+          </SidebarMenuButton>
+          <CollapsibleTrigger
+            render={<SidebarMenuAction aria-label={toggleLabel} />}
+          >
+            <ChevronRight
+              aria-hidden="true"
+              className="transition-transform group-data-open/collapsible:rotate-90"
+            />
+          </CollapsibleTrigger>
+        </>
+      ) : (
+        <CollapsibleTrigger render={<SidebarMenuButton isActive={active} />}>
+          <span>{label}</span>
+          <ChevronRight
+            aria-hidden="true"
+            className="ml-auto transition-transform group-data-open/collapsible:rotate-90"
+          />
+        </CollapsibleTrigger>
+      )}
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          {items.map((childItemProps, index) => (
+            <NavbarItem
+              mobile
+              isDropdownItem
+              onClick={onClick}
+              {...childItemProps}
+              key={index}
+            />
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx
new file mode 100644
index 000000000..eed370e9d
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/NavbarItem/DropdownNavbarItem/index.tsx
@@ -0,0 +1,82 @@
+import React, { type ReactNode } from "react";
+
+import DropdownNavbarItemMobile from "@theme/NavbarItem/DropdownNavbarItem/Mobile";
+import { ChevronDown } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@theme/components/ui/dropdown-menu";
+
+type DropdownItem = {
+  label?: ReactNode;
+  to?: string;
+  href?: string;
+  target?: string;
+  [key: string]: unknown;
+};
+
+type Props = {
+  mobile?: boolean;
+  items: DropdownItem[];
+  label?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  position?: "left" | "right";
+  [key: string]: unknown;
+};
+
+function DesktopDropdownNavbarItem({
+  items,
+  label,
+  children,
+  className: _className,
+}: Props): ReactNode {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="ghost" />}>
+        {children ?? label}
+        <ChevronDown aria-hidden="true" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {items.map((item, index) => {
+          const href = item.to ?? item.href ?? "#";
+          const external = item.target === "_blank";
+
+          return (
+            <DropdownMenuItem
+              key={index}
+              render={
+                <a
+                  href={href}
+                  target={item.target}
+                  rel={external ? "noreferrer" : undefined}
+                />
+              }
+            >
+              {item.label}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default function DropdownNavbarItem({
+  mobile = false,
+  ...props
+}: Props): ReactNode {
+  if (mobile) {
+    return (
+      <DropdownNavbarItemMobile
+        {...(props as React.ComponentProps<typeof DropdownNavbarItemMobile>)}
+      />
+    );
+  }
+
+  return <DesktopDropdownNavbarItem {...props} />;
+}
diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/index.test.ts b/packages/docusaurus-theme/src/theme/NavbarItem/index.test.ts
new file mode 100644
index 000000000..871003d1a
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/NavbarItem/index.test.ts
@@ -0,0 +1,58 @@
+import fs from "fs";
+import path from "path";
+
+const componentPath = path.join(__dirname, "index.tsx");
+
+it("renders configured external navbar icons with Lucide", () => {
+  const source = fs.readFileSync(componentPath, "utf8");
+
+  expect(source).toContain('from "lucide-react"');
+  expect(source).toContain("theme-navbar-github-link");
+  expect(source).toContain("theme-navbar-rss-link");
+});
+
+it("uses the official NavigationMenu for the primary desktop GNB", () => {
+  const content = fs.readFileSync(
+    path.join(__dirname, "../Navbar/Content/index.tsx"),
+    "utf8"
+  );
+
+  expect(content).toContain("<NavigationMenu");
+  expect(content).toContain("<NavigationMenuList>");
+  expect(content).toContain("<NavigationMenuTrigger>");
+  expect(content).toContain("<NavigationMenuContent>");
+  expect(content).toContain("<NavigationMenuLink");
+  expect(content).toContain("NavbarNavigationMenuDocItem");
+  expect(content).not.toContain('className="w-');
+});
+
+it("keeps the official Button-sized DropdownMenu fallback", () => {
+  const dropdown = fs.readFileSync(
+    path.join(__dirname, "DropdownNavbarItem/index.tsx"),
+    "utf8"
+  );
+  const defaultItem = fs.readFileSync(
+    path.join(__dirname, "DefaultNavbarItem/Desktop/index.tsx"),
+    "utf8"
+  );
+
+  expect(dropdown).toContain("<DropdownMenuTrigger");
+  expect(dropdown).toContain("<DropdownMenuContent");
+  expect(dropdown).toContain("<DropdownMenuItem");
+  expect(dropdown).toContain('render={<Button variant="ghost" />}');
+  expect(defaultItem).toContain('variant="ghost"');
+  expect(dropdown).not.toContain('className="min-w-48 p-1"');
+  expect(dropdown).not.toContain('className="px-2 py-1.5"');
+});
+
+it("gives each mobile dropdown toggle a specific accessible name", () => {
+  const dropdown = fs.readFileSync(
+    path.join(__dirname, "DropdownNavbarItem/Mobile/index.tsx"),
+    "utf8"
+  );
+
+  expect(dropdown).toContain('message: "Toggle the {label} dropdown"');
+  expect(dropdown).toContain("{ label: accessibleLabel }");
+  expect(dropdown).not.toContain('message: "Toggle the dropdown"');
+  expect(dropdown).not.toContain("<SidebarMenuButton aria-label={toggleLabel}");
+});
diff --git a/packages/docusaurus-theme/src/theme/NavbarItem/index.tsx b/packages/docusaurus-theme/src/theme/NavbarItem/index.tsx
new file mode 100644
index 000000000..2396ac2f0
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/NavbarItem/index.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+
+import ComponentTypes from "@theme/NavbarItem/ComponentTypes";
+import { Button } from "@theme/components/ui/button";
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@theme/components/ui/sidebar";
+import { GithubIcon, RssIcon } from "lucide-react";
+
+type NavbarItemType = keyof typeof ComponentTypes;
+export type Props = {
+  type?: NavbarItemType;
+  className?: string;
+  href?: string;
+  target?: string;
+  mobile?: boolean;
+  "aria-label"?: string;
+  [key: string]: unknown;
+};
+
+const iconByClassName = {
+  "theme-navbar-github-link": GithubIcon,
+  "theme-navbar-rss-link": RssIcon,
+} as const;
+
+function normalizeComponentType(
+  type: NavbarItemType | undefined,
+  props: object
+) {
+  if (!type || type === "default") {
+    return "items" in props ? "dropdown" : "default";
+  }
+  return type;
+}
+
+export default function NavbarItem(props: Props): React.JSX.Element {
+  const Icon = Object.entries(iconByClassName).find(([className]) =>
+    props.className?.split(" ").includes(className)
+  )?.[1];
+
+  if (Icon && props.href) {
+    const link = (
+      <a
+        href={props.href}
+        target={props.target}
+        rel={props.target === "_blank" ? "noreferrer" : undefined}
+        aria-label={props["aria-label"]}
+      />
+    );
+
+    if (props.mobile) {
+      return (
+        <SidebarMenuItem>
+          <SidebarMenuButton render={link}>
+            <Icon aria-hidden="true" />
+            <span>{props["aria-label"]}</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      );
+    }
+
+    return (
+      <Button render={link} nativeButton={false} variant="ghost" size="icon">
+        <Icon aria-hidden="true" />
+      </Button>
+    );
+  }
+
+  const { type, ...itemProps } = props;
+  const componentType = normalizeComponentType(type, itemProps);
+  const NavbarItemComponent = ComponentTypes[componentType];
+
+  if (!NavbarItemComponent) {
+    throw new Error(`No NavbarItem component found for type "${type}".`);
+  }
+
+  const Component = NavbarItemComponent as React.ComponentType<
+    Record<string, unknown>
+  >;
+  return <Component {...itemProps} />;
+}
diff --git a/packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx b/packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx
new file mode 100644
index 000000000..63072d8df
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx
@@ -0,0 +1,26 @@
+import React, { type ReactNode } from "react";
+
+import Link from "@docusaurus/Link";
+import type { Props } from "@theme/PaginatorNavLink";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+
+export default function PaginatorNavLink(props: Props): ReactNode {
+  const { permalink, title, subLabel, isNext } = props;
+
+  return (
+    <Button
+      render={<Link to={permalink} />}
+      nativeButton={false}
+      variant="outline"
+      size="default"
+      className={isNext ? "theme-paginator-link--next" : undefined}
+    >
+      {!isNext && <ChevronLeft data-icon="inline-start" aria-hidden="true" />}
+      {subLabel && <span className="sr-only">{subLabel}: </span>}
+      <span>{title}</span>
+      {isNext && <ChevronRight data-icon="inline-end" aria-hidden="true" />}
+    </Button>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx b/packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx
new file mode 100644
index 000000000..a4a543378
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx
@@ -0,0 +1,22 @@
+import React, { type ReactNode } from "react";
+
+import Translate from "@docusaurus/Translate";
+import type { Props } from "@theme/TOCCollapsible/CollapseButton";
+
+import { AccordionTrigger } from "@theme/components/ui/accordion";
+
+export default function TOCCollapsibleCollapseButton({
+  collapsed: _collapsed,
+  ...props
+}: Props): ReactNode {
+  return (
+    <AccordionTrigger {...props}>
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component"
+      >
+        On this page
+      </Translate>
+    </AccordionTrigger>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/TOCCollapsible/index.tsx b/packages/docusaurus-theme/src/theme/TOCCollapsible/index.tsx
new file mode 100644
index 000000000..81d71fde8
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/TOCCollapsible/index.tsx
@@ -0,0 +1,39 @@
+import React, { type ReactNode, useState } from "react";
+
+import TOCItems from "@theme/TOCItems";
+import CollapseButton from "@theme/TOCCollapsible/CollapseButton";
+import type { Props } from "@theme/TOCCollapsible";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+} from "@theme/components/ui/accordion";
+
+const TOC_VALUE = "table-of-contents";
+
+export default function TOCCollapsible({
+  toc,
+  className,
+  minHeadingLevel,
+  maxHeadingLevel,
+}: Props): ReactNode {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className={className}>
+      <Accordion value={value} onValueChange={setValue}>
+        <AccordionItem value={TOC_VALUE}>
+          <CollapseButton collapsed={!value.includes(TOC_VALUE)} />
+          <AccordionContent>
+            <TOCItems
+              toc={toc}
+              minHeadingLevel={minHeadingLevel}
+              maxHeadingLevel={maxHeadingLevel}
+            />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx b/packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx
new file mode 100644
index 000000000..96d1417dc
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/TOCItems/Tree.tsx
@@ -0,0 +1,63 @@
+import React, { type ReactNode } from "react";
+
+import Link from "@docusaurus/Link";
+import type { Props } from "@theme/TOCItems/Tree";
+
+const codePattern = /(<code(?:\s[^>]*)?>[\s\S]*?<\/code>)/gi;
+const codeContentPattern = /^<code(?:\s[^>]*)?>([\s\S]*?)<\/code>$/i;
+
+function HeadingLabel({ html }: { html: string }): React.JSX.Element {
+  return (
+    <>
+      {html.split(codePattern).map((part, index) => {
+        const code = part.match(codeContentPattern);
+        if (code) {
+          return (
+            <code
+              key={index}
+              className="theme-code-inline"
+              dangerouslySetInnerHTML={{ __html: code[1] }}
+            />
+          );
+        }
+
+        return part ? (
+          <span key={index} dangerouslySetInnerHTML={{ __html: part }} />
+        ) : null;
+      })}
+    </>
+  );
+}
+
+function TOCItemTree({
+  toc,
+  className,
+  linkClassName,
+  isChild,
+}: Props): ReactNode {
+  if (!toc.length) return null;
+
+  return (
+    <ul className={isChild ? "table-of-contents__sublist" : className}>
+      {toc.map((heading) => (
+        <li key={heading.id} className="table-of-contents__item">
+          <Link
+            to={`#${heading.id}`}
+            className={linkClassName ?? undefined}
+            data-depth={heading.level}
+          >
+            <HeadingLabel html={heading.value} />
+          </Link>
+          <TOCItemTree
+            isChild
+            toc={heading.children}
+            className={className}
+            linkClassName={linkClassName}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default React.memo(TOCItemTree);
diff --git a/packages/docusaurus-theme/src/theme/TabItem/index.tsx b/packages/docusaurus-theme/src/theme/TabItem/index.tsx
new file mode 100644
index 000000000..158f2277f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/TabItem/index.tsx
@@ -0,0 +1,29 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Swizzled from @docusaurus/theme-classic/src/theme/TabItem/index.tsx (MIT).
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, { type ReactNode } from "react";
+
+import { TabsContent } from "@theme/components/ui/tabs";
+import { type TabItemProps, useTabs } from "@theme/utils/tabsUtils";
+
+type Props = TabItemProps;
+
+export default function TabItem({
+  children,
+  className: _className,
+  value,
+}: Props): ReactNode {
+  const { lazy } = useTabs();
+
+  return (
+    <TabsContent value={value} keepMounted={!lazy}>
+      {children}
+    </TabsContent>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Tabs/index.tsx b/packages/docusaurus-theme/src/theme/Tabs/index.tsx
new file mode 100644
index 000000000..4aa4fb668
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Tabs/index.tsx
@@ -0,0 +1,57 @@
+import React, { type ReactNode } from "react";
+
+import useIsBrowser from "@docusaurus/useIsBrowser";
+
+import {
+  Tabs as TabsPrimitive,
+  TabsList,
+  TabsTrigger,
+} from "@theme/components/ui/tabs";
+import {
+  sanitizeTabsChildren,
+  type TabsProps,
+  TabsProvider,
+  useTabs,
+  useTabsContextValue,
+} from "@theme/utils/tabsUtils";
+
+type Props = TabsProps;
+
+function TabsContainer({ children }: { children: ReactNode }) {
+  const { selectedValue, selectValue, tabValues } = useTabs();
+
+  return (
+    <TabsPrimitive value={selectedValue} onValueChange={selectValue}>
+      <TabsList>
+        {tabValues.map(({ value, label, attributes }) => {
+          const {
+            className: _className,
+            style: _style,
+            ...tabAttributes
+          } = attributes ?? {};
+          return (
+            <TabsTrigger
+              key={value}
+              {...(tabAttributes as React.ComponentPropsWithoutRef<"button">)}
+              value={value}
+            >
+              {label ?? value}
+            </TabsTrigger>
+          );
+        })}
+      </TabsList>
+      {children}
+    </TabsPrimitive>
+  );
+}
+
+export default function Tabs(props: Props): ReactNode {
+  const isBrowser = useIsBrowser();
+  const value = useTabsContextValue(props);
+
+  return (
+    <TabsProvider value={value} key={String(isBrowser)}>
+      <TabsContainer>{sanitizeTabsChildren(props.children)}</TabsContainer>
+    </TabsProvider>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/Tag/index.tsx b/packages/docusaurus-theme/src/theme/Tag/index.tsx
new file mode 100644
index 000000000..b0e914466
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/Tag/index.tsx
@@ -0,0 +1,22 @@
+import React, { type ReactNode } from "react";
+
+import Link from "@docusaurus/Link";
+import type { Props } from "@theme/Tag";
+
+import { Badge } from "@theme/components/ui/badge";
+
+export default function Tag({
+  permalink,
+  label,
+  count,
+  description,
+}: Props): ReactNode {
+  return (
+    <Badge
+      render={<Link rel="tag" href={permalink} title={description} />}
+      variant="outline"
+    >
+      {count ? `${label} (${count})` : label}
+    </Badge>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/adapters/_docsearch.scss b/packages/docusaurus-theme/src/theme/adapters/_docsearch.scss
new file mode 100644
index 000000000..f8f70a774
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/adapters/_docsearch.scss
@@ -0,0 +1,149 @@
+/* Algolia owns this DOM. Keep the adapter token-driven and selectors structural. */
+:root {
+  --docsearch-primary-color: var(--primary);
+  --docsearch-soft-primary-color: color-mix(
+    in oklab,
+    var(--primary) 12%,
+    transparent
+  );
+  --docsearch-subtle-color: var(--border);
+  --docsearch-text-color: var(--foreground);
+  --docsearch-error-color: var(--destructive);
+  --docsearch-success-color: var(--primary);
+  --docsearch-secondary-text-color: var(--muted-foreground);
+  --docsearch-background-color: var(--background);
+  --docsearch-focus-color: var(--ring);
+  --docsearch-highlight-color: var(--primary);
+  --docsearch-muted-color: var(--muted-foreground);
+  --docsearch-muted-color-darker: color-mix(
+    in oklab,
+    var(--muted-foreground) 25%,
+    transparent
+  );
+  --docsearch-icon-color: var(--muted-foreground);
+  --docsearch-container-background: color-mix(
+    in oklab,
+    var(--background) 70%,
+    transparent
+  );
+  --docsearch-logo-color: var(--primary);
+  --docsearch-border-radius: var(--radius);
+  --docsearch-search-button-background: var(--background);
+  --docsearch-search-button-text-color: var(--muted-foreground);
+  --docsearch-modal-width: calc(var(--spacing) * 192);
+  --docsearch-modal-height: min(
+    calc(var(--spacing) * 168),
+    calc(100dvh - calc(var(--spacing) * 16))
+  );
+  --docsearch-modal-variable-height: min(
+    calc(var(--spacing) * 128),
+    calc(100dvh - calc(var(--spacing) * 48))
+  );
+  --docsearch-modal-background: var(--popover);
+  --docsearch-modal-shadow: none;
+  --docsearch-searchbox-background: var(--background);
+  --docsearch-searchbox-focus-background: var(--background);
+  --docsearch-hit-color: var(--foreground);
+  --docsearch-hit-highlight-color: var(--accent);
+  --docsearch-hit-background: var(--card);
+  --docsearch-key-background: var(--muted);
+  --docsearch-key-color: var(--foreground);
+  --docsearch-key-pressed-shadow: none;
+  --docsearch-footer-background: var(--muted);
+  --docsearch-footer-shadow: 0 calc(var(--border-width) * -1) 0 var(--border);
+  --docsearch-dropdown-menu-background: var(--popover);
+  --docsearch-dropdown-menu-item-hover-background: var(--accent);
+}
+
+.DocSearch-Container {
+  padding: calc(var(--spacing) * 4);
+  backdrop-filter: blur(var(--theme-backdrop-blur));
+}
+
+.DocSearch-Modal {
+  width: min(
+    var(--docsearch-modal-width),
+    calc(100vw - calc(var(--spacing) * 8))
+  );
+  overflow: hidden;
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius);
+  color: var(--popover-foreground);
+}
+
+.DocSearch-Form {
+  gap: calc(var(--spacing) * 3);
+  border: 0;
+  border-bottom: var(--border-width) solid var(--border);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.DocSearch-Input {
+  padding-left: 0;
+  color: var(--foreground);
+  font-family: inherit;
+  outline: none;
+  box-shadow: none;
+}
+
+.DocSearch-Input::placeholder {
+  color: var(--muted-foreground);
+  opacity: 1;
+}
+
+.DocSearch-Hit a,
+.DocSearch-Menu-item {
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius);
+  box-shadow: none;
+}
+
+.DocSearch-Hit[aria-selected="true"] a,
+.DocSearch-Menu-item:hover {
+  border-color: var(--border);
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.DocSearch-Clear,
+.DocSearch-Close,
+.DocSearch-Action,
+.DocSearch-Hit-action-button {
+  border-radius: var(--radius);
+  color: var(--muted-foreground);
+}
+
+.DocSearch-Clear:hover,
+.DocSearch-Close:hover,
+.DocSearch-Action:hover,
+.DocSearch-Hit-action-button:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.DocSearch-Commands-Key {
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--muted);
+  box-shadow: none;
+  color: var(--foreground);
+}
+
+.DocSearch-Footer {
+  border-top: var(--border-width) solid var(--border);
+  color: var(--muted-foreground);
+}
+
+@media (max-width: 996px) {
+  .DocSearch-Container {
+    padding: 0;
+  }
+
+  .DocSearch-Modal {
+    width: 100vw;
+    max-width: none;
+    border: 0;
+    border-radius: 0;
+  }
+}
diff --git a/packages/docusaurus-theme/src/theme/audit-rendered-surfaces-parse.test.ts b/packages/docusaurus-theme/src/theme/audit-rendered-surfaces-parse.test.ts
new file mode 100644
index 000000000..d7ee1fc6f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/audit-rendered-surfaces-parse.test.ts
@@ -0,0 +1,39 @@
+const {
+  parseArgs,
+} = require("../../../../scripts/audit-rendered-surfaces.cjs");
+
+describe("audit-rendered-surfaces parseArgs", () => {
+  it("accepts singular aliases", () => {
+    expect(
+      parseArgs([
+        "--route",
+        "guides/markdown-gfm",
+        "--width",
+        "390,768",
+        "--theme",
+        "dark,light",
+      ])
+    ).toEqual({
+      route: "guides/markdown-gfm",
+      widths: [390, 768],
+      themes: ["dark", "light"],
+    });
+  });
+
+  it("accepts plural aliases", () => {
+    expect(
+      parseArgs([
+        "--route",
+        "guides/markdown-gfm",
+        "--widths",
+        "700,1440",
+        "--themes",
+        "light",
+      ])
+    ).toEqual({
+      route: "guides/markdown-gfm",
+      widths: [700, 1440],
+      themes: ["light"],
+    });
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/base-ui-contract.test.ts b/packages/docusaurus-theme/src/theme/base-ui-contract.test.ts
new file mode 100644
index 000000000..9c460bd03
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/base-ui-contract.test.ts
@@ -0,0 +1,179 @@
+import fs from "fs";
+import path from "path";
+
+const read = (relativePath: string) =>
+  fs.readFileSync(path.join(__dirname, relativePath), "utf8");
+
+function stripNotSelectors(selector: string): string {
+  let result = selector;
+  let start = result.indexOf(":not(");
+  while (start >= 0) {
+    let depth = 0;
+    let end = start;
+    for (; end < result.length; end += 1) {
+      if (result[end] === "(") depth += 1;
+      if (result[end] === ")" && --depth === 0) break;
+    }
+    result = `${result.slice(0, start)}${result.slice(end + 1)}`;
+    start = result.indexOf(":not(");
+  }
+  return result;
+}
+
+function productionSource(directory: string): string {
+  return fs
+    .readdirSync(directory, { withFileTypes: true })
+    .flatMap((entry) => {
+      const entryPath = path.join(directory, entry.name);
+      if (entry.isDirectory()) return [productionSource(entryPath)];
+      if (/\.test\.[jt]sx?$/.test(entry.name)) return [];
+      return /\.[jt]sx?$/.test(entry.name)
+        ? [fs.readFileSync(entryPath, "utf8")]
+        : [];
+    })
+    .join("\n");
+}
+
+describe("official shadcn Base Nova contract", () => {
+  it.each([
+    ["components/ui/accordion.tsx", "@base-ui/react/accordion"],
+    ["components/ui/button.tsx", "@base-ui/react/button"],
+    ["components/ui/collapsible.tsx", "@base-ui/react/collapsible"],
+    ["components/ui/dropdown-menu.tsx", "@base-ui/react/menu"],
+    ["components/ui/navigation-menu.tsx", "@base-ui/react/navigation-menu"],
+    ["components/ui/separator.tsx", "@base-ui/react/separator"],
+    ["components/ui/sheet.tsx", "@base-ui/react/dialog"],
+    ["components/ui/tabs.tsx", "@base-ui/react/tabs"],
+    ["components/ui/tooltip.tsx", "@base-ui/react/tooltip"],
+  ])("%s uses %s", (file, primitive) => {
+    expect(read(file)).toContain(`from "${primitive}"`);
+  });
+
+  it.each(["components/ui/sidebar.tsx", "components/ui/breadcrumb.tsx"])(
+    "%s preserves Base UI render composition",
+    (file) => {
+      expect(read(file)).toContain('from "@base-ui/react/merge-props"');
+      expect(read(file)).toContain('from "@base-ui/react/use-render"');
+    }
+  );
+
+  it("preserves registry metrics and variants", () => {
+    expect(read("components/ui/button.tsx")).toContain(
+      "rounded-lg border border-transparent"
+    );
+    expect(read("components/ui/button.tsx")).toContain('"icon-sm":');
+    expect(read("components/ui/button.tsx")).toContain(
+      '"size-7 rounded-[min(var(--radius-md),12px)]'
+    );
+    expect(read("components/ui/accordion.tsx")).toContain(
+      "rounded-lg border border-transparent py-2.5 text-left text-sm"
+    );
+    expect(read("components/ui/card.tsx")).toContain(
+      "[--card-spacing:--spacing(4)]"
+    );
+    expect(read("components/ui/alert.tsx")).toContain(
+      "px-2.5 py-2 text-left text-sm"
+    );
+    expect(read("components/ui/tabs.tsx")).toContain('variant: "default",');
+    expect(read("components/ui/table.tsx")).toContain(
+      'className="relative w-full overflow-x-auto"'
+    );
+    expect(read("components/ui/sheet.tsx")).toContain("bg-black/10");
+  });
+
+  it("uses one official Accordion SSOT for docs disclosures", () => {
+    for (const file of ["Details/index.tsx", "TOCCollapsible/index.tsx"]) {
+      const source = read(file);
+      expect(source).toContain("components/ui/accordion");
+      expect(source).toContain("<Accordion");
+      expect(source).not.toContain("<DetailsGeneric");
+    }
+  });
+
+  it("uses official default Tabs composition", () => {
+    const tabs = read("Tabs/index.tsx");
+    expect(tabs).toContain("<TabsList>");
+    expect(tabs).toContain("<TabsTrigger");
+    expect(tabs).not.toContain('variant="line"');
+    expect(
+      fs.existsSync(path.join(__dirname, "components/theme-tab-list.tsx"))
+    ).toBe(false);
+  });
+
+  it("does not pass Docusaurus visual classes into official actions", () => {
+    expect(read("Navbar/MobileSidebar/Toggle/index.tsx")).not.toContain(
+      "navbar__toggle"
+    );
+    const codeAction = read("CodeBlock/Buttons/Button/index.tsx");
+    expect(codeAction).toContain('size="icon"');
+    expect(codeAction).toContain(
+      "theme-code-block__action absolute top-3 right-2 z-10 size-7 min-h-0 min-w-0 gap-2 rounded-md border-0 border-border bg-code"
+    );
+    expect(codeAction).toContain(
+      'fontFamily: "var(--ifm-font-family-monospace)"'
+    );
+    expect(read("CodeBlock/Buttons/CopyButton/index.tsx")).toContain(
+      'from "@theme/CodeBlock/Buttons/Button"'
+    );
+    const codeActions = read("CodeBlock/Buttons/index.tsx");
+    expect(codeActions).toContain("<CopyButton />");
+    expect(codeActions).not.toContain("WordWrapButton");
+    const codeLayout = read("CodeBlock/Layout/index.tsx");
+    const codeContent = read("CodeBlock/Content/String.tsx");
+    expect(codeLayout).toContain("<figure");
+    expect(codeLayout).toContain('data-rehype-pretty-code-figure=""');
+    expect(codeLayout).toContain('data-rehype-pretty-code-title=""');
+    expect(codeLayout).toContain("<CodeLanguageIcon");
+    expect(codeLayout).not.toContain("CodeBlock/Container");
+    expect(codeContent).toContain(
+      'const isMultiline = props.children.replace(/\\n$/, "").includes("\\n")'
+    );
+    expect(codeContent).toContain(
+      "showLineNumbers: props.showLineNumbers || isMultiline"
+    );
+    expect(read("ColorModeToggle/index.tsx")).not.toContain("buttonClassName}");
+    expect(read("Navbar/Content/index.tsx")).toMatch(
+      /aria-label=\{[\s\S]*windowSize === "mobile"[\s\S]*"Search documentation"/
+    );
+  });
+
+  it("ships preflight, Neutral tokens, Docusaurus dark integration, and animations", () => {
+    const css = read("shadcn.css");
+    expect(css).toContain('@import "tailwindcss" source(none)');
+    expect(css).toContain('@import "./vendor/tw-animate.css"');
+    expect(css).toContain('@import "./vendor/shadcn-tailwind.css"');
+    expect(css).toContain('@custom-variant dark (&:is([data-theme="dark"] *)');
+    expect(css).toContain("--radius: 0.625rem");
+    expect(css).toContain("--background: lab(100% 0 0)");
+    expect(css).toContain("--background: lab(2.75381% 0 0)");
+    expect(css).toContain("--code-highlight: lab(95.36% 0 0)");
+    expect(css).toContain("--code-number: lab(48.96% 0 0)");
+    expect(css).toContain("--code-highlight: lab(15.32% 0 0)");
+    expect(css).toContain("--code-number: lab(67.52% -0.0000298023 0)");
+    expect(css).toContain("--code-syntax-keyword: #cf222e");
+    expect(css).toContain("--code-syntax-function: #8250df");
+    expect(css).toContain("--code-syntax-keyword: #a0a0a0");
+    expect(css).toContain("--code-syntax-function: #ffc799");
+    expect(css).not.toMatch(/--text-(?:xs|sm|base|lg|xl|[2-9]xl):/);
+    expect(css).toContain("--text-sm--line-height: calc(var(--spacing) * 5)");
+    expect(css).toContain("--text-xs--line-height: calc(var(--spacing) * 4)");
+  });
+
+  it("keeps global docs CSS away from official data-slot visuals", () => {
+    const css = read("base.scss");
+    const selectors = Array.from(css.matchAll(/(?:^|})([^{}]+)\{/gm), (match) =>
+      match[1].trim()
+    ).filter((selector) => selector.includes("[data-slot"));
+
+    expect(selectors.length).toBeGreaterThan(0);
+    for (const selector of selectors) {
+      expect(stripNotSelectors(selector)).not.toContain("[data-slot");
+    }
+  });
+
+  it("contains no Radix production source", () => {
+    expect(productionSource(__dirname)).not.toMatch(
+      /@radix-ui|from ["']radix-ui["']/
+    );
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/base.scss b/packages/docusaurus-theme/src/theme/base.scss
new file mode 100644
index 000000000..f7a07bb2c
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/base.scss
@@ -0,0 +1,1945 @@
+/* Reusable docs shell. Base Nova owns component tokens; these aliases cover Docusaurus shell typography only. */
+
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/geist-latin-wght-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Pretendard Variable";
+  font-style: normal;
+  font-weight: 45 920;
+  font-display: swap;
+  src: url("./fonts/PretendardVariable.woff2") format("woff2-variations");
+}
+
+:root {
+  --ifm-color-primary: var(--primary);
+  --ifm-color-primary-dark: var(--primary);
+  --ifm-color-primary-darker: var(--primary);
+  --ifm-color-primary-darkest: var(--primary);
+  --ifm-color-primary-light: var(--primary);
+  --ifm-color-primary-lighter: var(--primary);
+  --ifm-color-primary-lightest: var(--primary);
+  --ifm-color-success: var(--primary);
+  --ifm-color-info: var(--foreground);
+  --ifm-color-warning: var(--foreground);
+  --ifm-color-danger: var(--destructive);
+  --ifm-color-emphasis-100: var(--muted);
+  --ifm-color-emphasis-200: var(--border);
+  --ifm-color-emphasis-300: var(--border);
+  --ifm-color-emphasis-400: var(--muted-foreground);
+  --ifm-color-emphasis-500: var(--muted-foreground);
+  --ifm-color-emphasis-600: var(--muted-foreground);
+  --ifm-color-emphasis-700: var(--foreground);
+  --ifm-color-emphasis-800: var(--foreground);
+  --ifm-color-emphasis-900: var(--foreground);
+  --ifm-color-content: var(--foreground);
+  --ifm-color-content-secondary: var(--muted-foreground);
+  --ifm-background-color: var(--background);
+  --ifm-background-surface-color: var(--card);
+  --ifm-font-color-base: var(--foreground);
+  --ifm-heading-color: var(--foreground);
+  --ifm-navbar-background-color: var(--background);
+  --ifm-footer-background-color: var(--background);
+  --ifm-toc-border-color: var(--border);
+  --ifm-menu-color: var(--muted-foreground);
+  --ifm-menu-color-active: var(--primary);
+  --ifm-code-background: var(--muted);
+  --ifm-pre-background: var(--card);
+  --ifm-pre-color: var(--foreground);
+  --ifm-global-border-width: var(--border-width);
+  --ifm-global-radius: var(--radius);
+  --ifm-navbar-height: calc(var(--spacing) * 14);
+  --layout-gutter: calc(var(--spacing) * 4);
+  --theme-shell-max-width: 90rem;
+  --doc-sidebar-width: calc(var(--spacing) * 64);
+  --ifm-font-family-base:
+    Geist, "Pretendard Variable", "Geist Fallback", sans-serif;
+  --ifm-heading-font-family:
+    Geist, "Pretendard Variable", "Geist Fallback", sans-serif;
+  --ifm-font-size-base: 100%;
+  --ifm-line-height-base: 1.75;
+  --ifm-code-font-size: var(--theme-text-sm);
+  --ifm-font-family-monospace: "Geist Mono", "Geist Mono Fallback";
+  --theme-text-base: 1rem;
+  --theme-leading-base: 1.5rem;
+  --theme-text-sm: 0.875rem;
+  --theme-leading-sm: 1.25rem;
+  --theme-text-xs: 0.75rem;
+  --theme-leading-xs: 1rem;
+  --theme-prose-body-size: 0.9375rem;
+  --theme-prose-leading: 1.75;
+  --theme-backdrop-blur: 12px;
+}
+
+html {
+  scroll-padding-top: calc(var(--ifm-navbar-height) + calc(var(--spacing) * 4));
+}
+
+html,
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+body {
+  font-feature-settings:
+    "rlig" 1,
+    "calt" 1;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+:where(
+    a[href],
+    button,
+    summary,
+    label[for],
+    select,
+    input[type="button"],
+    input[type="checkbox"],
+    input[type="file"],
+    input[type="radio"],
+    input[type="reset"],
+    input[type="submit"],
+    [role="button"],
+    [role="checkbox"],
+    [role="link"],
+    [role="menuitem"],
+    [role="radio"],
+    [role="switch"],
+    [role="tab"]
+  ):not(:disabled):not([aria-disabled="true"]) {
+  cursor: pointer;
+}
+
+:where(
+  button,
+  input,
+  select,
+  [role="button"],
+  [role="menuitem"],
+  [role="tab"]
+):is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+}
+
+html {
+  height: 100%;
+  font-size: 100%;
+}
+
+body {
+  height: 100%;
+  color: var(--shell-foreground);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+:where(button, input, select, textarea) {
+  font-family: inherit;
+}
+
+#__docusaurus {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+}
+
+.theme-app-shell {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  flex: 1 0 auto;
+  flex-direction: column;
+  background: var(--background);
+}
+
+.theme-app-shell > .main-wrapper {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+
+.docusaurus-mt-lg {
+  margin-top: calc(var(--spacing) * 12);
+}
+
+/* Header */
+.navbar {
+  isolation: isolate;
+  z-index: 40;
+  height: var(--ifm-navbar-height);
+  padding-inline: 0;
+  border-bottom: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.navbar::before {
+  position: absolute;
+  z-index: -1;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in oklab, var(--background) 70%, transparent);
+  backdrop-filter: blur(12px);
+  content: "";
+  inset: 0;
+}
+
+.navbar__inner {
+  width: calc(100% - calc(var(--spacing) * 12));
+  height: 100%;
+  max-width: calc(var(--theme-shell-max-width) - calc(var(--spacing) * 12));
+  margin-inline: auto;
+  padding-inline: 0 !important;
+}
+
+.theme-navbar-mobile-trigger {
+  display: none;
+}
+
+.navbar__brand {
+  gap: calc(var(--spacing) * 2);
+  color: var(--foreground);
+}
+
+.navbar__items:not(.navbar__items--right) > .theme-navbar-desktop-navigation {
+  margin-left: calc(var(--spacing) * 2);
+}
+
+.navbar__title {
+  font-size: var(--theme-text-base);
+  font-weight: 600;
+  line-height: var(--theme-leading-base);
+}
+
+.navbar__logo {
+  height: calc(var(--spacing) * 7);
+}
+
+.navbar__item,
+.navbar__link {
+  color: var(--muted-foreground);
+  font-size: var(--theme-text-sm);
+  font-weight: 500;
+  line-height: var(--theme-leading-sm);
+}
+
+.navbar__link:hover,
+.navbar__link--active {
+  color: var(--primary);
+}
+
+.navbar__search-input {
+  width: calc(var(--spacing) * 60);
+  height: calc(var(--spacing) * 8);
+  border: var(--border-width) solid var(--input);
+  border-radius: var(--radius);
+  background-color: var(--muted);
+  color: var(--foreground);
+  box-shadow: none;
+  font-size: var(--theme-text-sm);
+  line-height: var(--theme-leading-sm);
+}
+
+.navbar__search-input:focus {
+  border-color: var(--ring);
+  background-color: var(--background);
+}
+
+.theme-command-search {
+  display: inline-flex;
+}
+
+.theme-command-search__provider {
+  display: none;
+}
+
+.theme-mobile-sheet__menus {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+.theme-mobile-sheet__panel {
+  min-height: 0;
+  flex: 1;
+}
+
+.theme-mobile-sheet__panel[hidden] {
+  display: none;
+}
+
+.theme-mobile-sheet__panel--primary {
+  overflow-y: auto;
+}
+
+.theme-mobile-sheet__panel--secondary {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Sidebar shell */
+a[class*="skipToContent"] {
+  left: calc(var(--spacing) * 4);
+  transform: translateX(calc(-100% - calc(var(--spacing) * 4)));
+}
+
+a[class*="skipToContent"]:focus {
+  transform: translateX(0);
+}
+
+.theme-doc-root-layout {
+  display: flex;
+  flex: 1 0 auto;
+}
+
+.theme-doc-root-layout > main > .container-wrapper {
+  width: 100%;
+  max-width: var(--theme-shell-max-width);
+  margin-inline: auto;
+}
+
+.theme-doc-sidebar-desktop,
+.theme-mobile-sidebar-content {
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+}
+
+.theme-doc-sidebar-desktop {
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  height: calc(100svh - var(--ifm-navbar-height));
+  min-height: 0;
+  align-self: start;
+}
+
+.theme-doc-sidebar-desktop > :first-child {
+  height: 100%;
+}
+
+.container-wrapper:has(.theme-doc-sidebar-desktop[data-collapsed="true"]) {
+  grid-template-columns: 5rem minmax(0, 1fr);
+}
+
+.theme-doc-sidebar-container {
+  position: static !important;
+  inset: auto !important;
+  height: 100% !important;
+  border-right: 0 !important;
+}
+
+.theme-mobile-sidebar-content {
+  border-right: 0 !important;
+}
+
+.theme-doc-sidebar-footer-actions {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.theme-doc-sidebar-desktop[data-collapsed="true"]
+  .theme-doc-sidebar-footer-actions {
+  flex-direction: column;
+  gap: calc(var(--spacing) * 2);
+}
+
+.theme-doc-page__content {
+  width: 100%;
+  max-width: 40rem;
+  min-width: 0;
+  padding-block: 0;
+}
+
+.theme-doc-page__stack {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 6);
+}
+
+.theme-doc-page__article {
+  min-width: 0;
+}
+
+.theme-copy-page-actions {
+  position: relative;
+  z-index: 10;
+  float: right;
+  margin-bottom: calc(var(--spacing) * 2);
+  margin-left: calc(var(--spacing) * 4);
+}
+
+.theme-doc-page__breadcrumbs {
+  margin-block-end: 0.8rem;
+}
+
+.theme-doc-page__toc {
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  z-index: 30;
+  display: none;
+  width: 18rem;
+  height: calc(100svh - var(--ifm-navbar-height));
+  min-height: 0;
+  flex: 0 0 18rem;
+  align-self: flex-start;
+  margin-left: auto;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 4);
+  overflow: hidden;
+  overscroll-behavior: none;
+  padding-bottom: calc(var(--spacing) * 8);
+}
+
+.theme-doc-toc-desktop {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.theme-doc-toc-desktop__body {
+  padding-top: calc(var(--column-top-spacing) - calc(var(--spacing) * 4));
+}
+
+.theme-doc-toc-desktop__scroll {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.theme-doc-toc-desktop__list > p {
+  margin: 0;
+}
+
+/* Content */
+.main-wrapper {
+  background: var(--background);
+}
+
+.footer,
+.footer--dark {
+  position: relative;
+  z-index: 20;
+  padding-block: calc(var(--spacing) * 5);
+  padding-inline: 0;
+  border-top: var(--border-width) solid var(--border);
+  background: var(--background);
+  color: var(--foreground);
+  font-size: var(--theme-text-sm);
+  line-height: var(--theme-leading-sm);
+}
+
+.footer > .container {
+  display: flex;
+  width: 100%;
+  max-width: var(--theme-shell-max-width);
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--spacing) * 8);
+  margin-inline: auto;
+  padding-inline: calc(var(--spacing) * 6);
+}
+
+.footer__links {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  order: 2;
+  flex-wrap: wrap;
+  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
+  margin: 0;
+}
+
+.footer__col {
+  display: contents;
+}
+
+.footer__title {
+  display: none;
+}
+
+.footer__items {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 3);
+  margin: 0;
+}
+
+.footer__item {
+  margin: 0;
+}
+
+.footer__link-item {
+  color: var(--muted-foreground);
+  font-size: var(--theme-text-xs);
+  line-height: var(--theme-leading-xs);
+}
+
+.footer__link-item:hover {
+  color: var(--foreground);
+}
+
+.footer .footer__bottom {
+  flex: 0 0 auto;
+  order: 1;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  text-align: left;
+}
+
+.footer__copyright {
+  color: var(--muted-foreground);
+  font-size: var(--theme-text-xs);
+  line-height: var(--theme-leading-xs);
+}
+
+.theme-doc-markdown {
+  --typeset-font-body: inherit;
+  --typeset-font-heading: var(--ifm-heading-font-family);
+  --typeset-font-mono: var(--ifm-font-family-monospace);
+  --typeset-size: var(--theme-prose-body-size);
+  --typeset-body-size: var(--typeset-size);
+  --typeset-leading: var(--theme-prose-leading);
+  --typeset-flow: 1.25em;
+  --typeset-muted: var(--muted-foreground);
+  --typeset-rule: var(--border);
+  color: var(--foreground);
+  font-family: var(--typeset-font-body);
+  font-size: var(--typeset-body-size);
+  line-height: var(--typeset-leading);
+  overflow-wrap: break-word;
+  margin-trim: block-start;
+}
+
+.theme-doc-markdown > header,
+.theme-doc-markdown > h1:first-child {
+  margin-bottom: 1.5rem !important;
+}
+
+.theme-doc-markdown > header > :where(h1),
+.theme-doc-markdown > h1:first-child {
+  color: var(--foreground) !important;
+  font-family: var(--typeset-font-heading) !important;
+  font-size: 1.875rem !important;
+  line-height: 2.25rem !important;
+  font-weight: 600 !important;
+  margin-block: 0 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(p) {
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+}
+
+.theme-admonition-flow {
+  margin-block-start: var(--typeset-flow);
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h1, h2, h3, h4, h5, h6) {
+  color: var(--foreground) !important;
+  font-family: var(--typeset-font-heading) !important;
+  margin-block-end: 0 !important;
+  font-weight: 600 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h1) {
+  margin-block-start: var(--typeset-flow) !important;
+  font-size: 1.75em !important;
+  line-height: 1.3 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h2) {
+  margin-block-start: calc(var(--typeset-flow) * 1.4) !important;
+  font-size: 1.25em !important;
+  line-height: 1.4 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h3) {
+  margin-block-start: var(--typeset-flow) !important;
+  font-size: 1.125em !important;
+  line-height: 1.45 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h4) {
+  margin-block-start: var(--typeset-flow) !important;
+  font-size: 1em !important;
+  line-height: 1.5 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h5) {
+  color: var(--typeset-muted) !important;
+  margin-block-start: calc(var(--typeset-flow) / 0.875) !important;
+  font-size: 0.875em !important;
+  font-weight: 500 !important;
+  line-height: 1.5 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h6) {
+  letter-spacing: 0.08em !important;
+  text-transform: uppercase !important;
+  color: var(--typeset-muted) !important;
+  margin-block-start: calc(var(--typeset-flow) / 0.8125) !important;
+  font-size: 0.8125em !important;
+  font-weight: 500 !important;
+  line-height: 1.5 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where([id]) {
+  scroll-margin-block-start: var(--typeset-flow);
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+  margin-block-start: 1em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(:is(h1, h2, h3, h4) :is(code)) {
+  font-size: 0.9em;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(a) {
+  color: inherit !important;
+  text-decoration-line: underline !important;
+  -webkit-text-decoration-color: color-mix(
+    in oklab,
+    currentColor 30%,
+    transparent
+  );
+  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
+  font-weight: 500 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(a:hover) {
+  text-decoration-color: currentColor;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(a:focus-visible) {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: 0.125em;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
+  color: inherit !important;
+  font-weight: inherit !important;
+  text-decoration-line: none !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(strong, b),
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(:is(h1, h2, h3, h4) :is(strong, b)) {
+  font-weight: 600;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(del, s) {
+  color: var(--typeset-muted);
+  text-decoration-line: line-through;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ul) {
+  list-style-type: disc;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ol) {
+  list-style-type: decimal;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ul ul) {
+  list-style-type: circle;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ul ul ul) {
+  list-style-type: square;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ol[type="a"]) {
+  list-style-type: lower-alpha;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ol[type="i"]) {
+  list-style-type: lower-roman;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ol[type="A"]) {
+  list-style-type: upper-alpha;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ol[type="I"]) {
+  list-style-type: upper-roman;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ul, ol) {
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+  padding-inline-start: 1.5em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ul.contains-task-list) {
+  padding-inline-start: 0.25em !important;
+  list-style-type: none;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(li) {
+  margin-block-start: 0.5em !important;
+  padding-inline-start: 0.4em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(li > p, li > ul, li > ol) {
+  margin-block-start: 0.5em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ul > li)::marker,
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(ol > li)::marker {
+  color: var(--typeset-muted) !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(li.task-list-item > input[type="checkbox"]) {
+  vertical-align: -0.1em;
+  accent-color: var(--primary);
+  margin-inline-end: 0.5em;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(details) {
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(summary) {
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(summary)::marker {
+  color: var(--typeset-muted);
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(dl) {
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(dt) {
+  margin-block-start: 1em !important;
+  font-weight: 500 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(dt + dt) {
+  margin-block-start: 0.25em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(dd) {
+  color: var(--typeset-muted) !important;
+  margin-block-start: 0.25em !important;
+  margin-inline-start: 0 !important;
+  padding-inline-start: 1em !important;
+}
+
+.theme-code-inline {
+  border-radius: min(calc(var(--radius) * 0.6), 0.35em);
+  background-color: var(--muted);
+  color: inherit;
+  font-family: var(--typeset-font-mono, var(--ifm-font-family-monospace));
+  font-size: calc(
+    var(--typeset-body-size, var(--theme-prose-body-size)) * 0.85
+  );
+  line-height: var(--typeset-leading, var(--theme-prose-leading));
+  padding: 0.125em 0.3em;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(pre) {
+  background-color: var(--muted);
+  font-family: var(--typeset-font-mono);
+  tab-size: 2;
+  border-radius: var(--radius);
+  direction: ltr;
+  margin-block-start: calc(var(--typeset-flow) / 0.875) !important;
+  margin-block-end: 0 !important;
+  padding: 0.75em 1em;
+  font-size: 0.875em;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(pre code) {
+  font-family: inherit;
+  font-size: inherit;
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(blockquote) {
+  border-inline-start: 2px solid var(--typeset-rule) !important;
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+  margin-inline: 0 !important;
+  padding-inline-start: 1em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(hr) {
+  border: 0;
+  border-block-start: 1px solid var(--typeset-rule);
+  margin-block-start: calc(var(--typeset-flow) * 2.4) !important;
+  margin-block-end: 0 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(hr + h1, hr + h2, hr + h3, hr + h4) {
+  margin-block-start: var(--typeset-flow) !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(img, picture img, video) {
+  border-radius: var(--radius) !important;
+  display: block !important;
+  max-width: 100% !important;
+  height: auto !important;
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(p img) {
+  margin-block-start: 0 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(figure) {
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+  margin-inline: 0 !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(figcaption, caption) {
+  color: var(--typeset-muted) !important;
+  text-align: center !important;
+  margin-block-start: 0.857143em !important;
+  font-size: 0.875em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(caption) {
+  caption-side: bottom;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(table) {
+  font-variant-numeric: tabular-nums;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-block-end: 1px solid var(--typeset-rule);
+  max-width: 100%;
+  margin-block-start: var(--typeset-flow) !important;
+  margin-block-end: 0 !important;
+  font-size: 1em;
+  line-height: 1.5;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(thead th) {
+  text-align: start;
+  white-space: nowrap;
+  padding: 0.65em 1em;
+  font-weight: 500;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(:is(tbody, tfoot) :is(td, th)) {
+  text-align: start;
+  vertical-align: top;
+  border-block-start: 1px solid var(--typeset-rule);
+  padding: 0.75em 1em;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(tbody th, tfoot th) {
+  font-weight: 500;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(th:first-child, td:first-child) {
+  padding-inline-start: 0;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(th[align="center"], td[align="center"]) {
+  text-align: center;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(th[align="right"], td[align="right"]) {
+  text-align: end;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(li > blockquote, li > table, li > figure) {
+  margin-block-start: 0.5em !important;
+}
+
+.theme-doc-markdown
+  :not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ):where(li > pre) {
+  margin-block-start: 0.571429em !important;
+}
+
+.theme-doc-markdown
+  > :where(:first-child):not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ),
+.theme-doc-markdown
+  > :where(:first-child)
+  > :where(:first-child):not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ),
+.theme-doc-markdown
+  :where(
+    li > :first-child,
+    blockquote > :first-child,
+    td > :first-child,
+    th > :first-child,
+    dd > :first-child,
+    figure > :first-child,
+    figure > picture > img
+  ):not(
+    :where(
+      .theme-doc-markdown [data-slot],
+      .theme-doc-markdown [data-slot] *,
+      .theme-doc-markdown .theme-code-block,
+      .theme-doc-markdown .theme-code-block *,
+      .theme-doc-markdown .docusaurus-mermaid-container,
+      .theme-doc-markdown .docusaurus-mermaid-container *
+    )
+  ) {
+  margin-block-start: 0 !important;
+}
+
+.theme-doc-markdown .theme-code-block {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  margin: 1.09375rem 0 0;
+  border: 0 solid var(--border);
+  border-radius: calc(var(--radius) + 8px);
+  background: var(--code);
+  color: var(--code-foreground);
+  box-shadow: none;
+  font-family: var(--ifm-font-family-base);
+  font-size: 0.875rem;
+  line-height: 1.53125rem;
+}
+
+.theme-code-block__title {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
+  border-bottom: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
+  color: var(--code-foreground);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.765625rem;
+  line-height: 1.33984375rem;
+}
+
+.theme-code-block__title > svg {
+  width: calc(var(--spacing) * 4);
+  height: calc(var(--spacing) * 4);
+  flex: 0 0 auto;
+  color: var(--code-foreground);
+  opacity: 0.7;
+}
+
+.theme-code-block__actions {
+  display: contents;
+}
+
+.theme-code-block:has(.theme-code-block__title) .theme-code-block__action {
+  top: calc(var(--spacing) * 1.5) !important;
+}
+
+.theme-code-block__action:active {
+  opacity: 1;
+}
+
+.theme-code-block pre {
+  overflow: auto;
+  margin: 0;
+  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4);
+  border: 0;
+  border-radius: 0;
+  background: transparent !important;
+  box-shadow: none;
+  color: var(--code-foreground);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.875rem;
+  line-height: 1.53125rem;
+  outline: none;
+}
+
+.theme-code-block pre:has([class*="codeBlockLinesWithNumbering"]),
+.theme-code-block pre:has(.theme-code-block-highlighted-line) {
+  padding-inline: 0;
+}
+
+.theme-code-block code {
+  display: grid !important;
+  float: none;
+  min-width: 100%;
+  padding: 0 !important;
+  border: 0;
+  background: transparent;
+  color: var(--code-syntax-foreground);
+  font-feature-settings:
+    "liga" 0,
+    "calt" 0;
+  font-variant-ligatures: none;
+}
+
+/* Prism token classes mapped to the live shadcn GitHub Light Default/Vesper pair. */
+.theme-code-block .token {
+  font-style: normal !important;
+  font-weight: 400 !important;
+}
+
+.theme-code-block .token.punctuation,
+.theme-code-block .token.plain-text {
+  color: var(--code-syntax-foreground) !important;
+}
+
+.theme-code-block .token.comment,
+.theme-code-block .token.prolog,
+.theme-code-block .token.doctype,
+.theme-code-block .token.cdata {
+  color: var(--code-syntax-comment) !important;
+}
+
+.theme-code-block .token.atrule,
+.theme-code-block .token.keyword,
+.theme-code-block .token.important {
+  color: var(--code-syntax-keyword) !important;
+}
+
+.theme-code-block .token.function,
+.theme-code-block .token.class-name {
+  color: var(--code-syntax-function) !important;
+}
+
+.theme-code-block .token.tag,
+.theme-code-block .token.selector {
+  color: var(--code-syntax-tag) !important;
+}
+
+.theme-code-block .token.string,
+.theme-code-block .token.char,
+.theme-code-block .token.attr-value,
+.theme-code-block .token.regex {
+  color: var(--code-syntax-string) !important;
+}
+
+.theme-code-block .token.boolean,
+.theme-code-block .token.number,
+.theme-code-block .token.constant,
+.theme-code-block .token.symbol,
+.theme-code-block .token.builtin {
+  color: var(--code-syntax-constant) !important;
+}
+
+.theme-code-block .token.variable {
+  color: var(--code-syntax-variable) !important;
+}
+
+.theme-code-block .token.property,
+.theme-code-block .token.attr-name {
+  color: var(--code-syntax-attribute) !important;
+}
+
+.theme-code-block .token.operator,
+.theme-code-block .token.entity,
+.theme-code-block .token.url {
+  color: var(--code-syntax-operator) !important;
+}
+
+.theme-code-block .token.tag.punctuation {
+  color: var(--code-syntax-tag-punctuation) !important;
+}
+
+.theme-code-block .token-line {
+  position: relative;
+  display: block !important;
+  width: 100%;
+  min-height: calc(var(--spacing) * 0.875);
+  margin: 0;
+  padding: calc(var(--spacing) * 0.25) 0;
+}
+
+.theme-code-block [class*="codeLineNumber"] {
+  position: sticky;
+  left: 0;
+  display: inline-block !important;
+  width: calc(var(--spacing) * 16) !important;
+  padding: 0 calc(var(--spacing) * 6) 0 0 !important;
+  background: var(--code);
+  color: var(--code-number);
+  text-align: right;
+}
+
+.theme-code-block [class*="codeLineNumber"]::before {
+  color: var(--code-number);
+  font-size: 0.875rem;
+  opacity: 1;
+}
+
+.theme-code-block [class*="codeLineContent"] {
+  padding-right: 0;
+}
+
+.theme-code-block .theme-code-block-highlighted-line {
+  position: relative;
+  margin: 0;
+  padding: calc(var(--spacing) * 0.25) 0;
+  background: var(--code-highlight);
+}
+
+.theme-code-block .theme-code-block-highlighted-line [class*="codeLineNumber"] {
+  background: var(--code-highlight);
+}
+
+.theme-code-block .theme-code-block-highlighted-line::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
+  content: "";
+}
+
+.theme-code-block code,
+.theme-code-block code span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.theme-doc-markdown .docusaurus-mermaid-container {
+  margin-block-start: var(--typeset-flow);
+  display: flex;
+  justify-content: safe center;
+  overflow-x: auto;
+}
+
+.theme-doc-markdown .docusaurus-mermaid-container > svg {
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+.theme-doc-markdown
+  .docusaurus-mermaid-container
+  > svg:is(.flowchart, [aria-roledescription="sequence"]) {
+  min-width: 40rem;
+}
+
+.theme-paginator-link--next {
+  grid-column: 2;
+}
+
+@media (max-width: 26.25rem) {
+  .pagination-nav {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .theme-paginator-link--next {
+    grid-column: 1;
+  }
+}
+
+/* Right rail */
+.table-of-contents,
+.table-of-contents__sublist {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  border-left: 0;
+  list-style: none;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 2);
+}
+
+.table-of-contents__item {
+  display: flex;
+  margin: 0;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 2);
+}
+
+.table-of-contents__link {
+  display: block;
+  padding: 0;
+  color: var(--muted-foreground);
+  font-size: 0.8rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+
+.table-of-contents__link[data-depth="3"] {
+  padding-left: calc(var(--spacing) * 4);
+}
+
+.table-of-contents__link[data-depth="4"] {
+  padding-left: calc(var(--spacing) * 6);
+}
+
+.table-of-contents__link:hover {
+  background: transparent;
+  color: var(--foreground);
+}
+
+.table-of-contents__link--active {
+  background: transparent;
+  color: var(--foreground);
+  font-weight: 500;
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --ifm-navbar-height: calc(var(--spacing) * 16);
+  }
+
+  .theme-doc-root-layout > main > .container-wrapper {
+    padding-inline: 0;
+  }
+
+  .theme-doc-sidebar-desktop
+    [data-state="expanded"]
+    .theme-doc-sidebar-content {
+    padding-top: calc(var(--column-top-spacing) - calc(var(--spacing) * 3.5));
+    padding-left: calc(var(--spacing) * 2);
+  }
+
+  .theme-doc-sidebar-desktop
+    [data-state="expanded"]
+    :is(.theme-doc-sidebar-header, .theme-doc-sidebar-footer) {
+    padding-left: calc(var(--spacing) * 4);
+  }
+
+  .theme-doc-page__content {
+    padding-inline: 0;
+    padding-block: 0;
+  }
+}
+
+@media (min-width: 1280px) {
+  .theme-doc-page__toc {
+    display: flex;
+  }
+}
+
+@media (max-width: 639px) {
+  .theme-copy-page-actions {
+    display: flex;
+    float: none;
+    justify-content: flex-end;
+    margin-bottom: calc(var(--spacing) * 4);
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 1023px) {
+  .navbar__inner {
+    width: calc(100% - calc(var(--spacing) * 8));
+  }
+
+  .theme-navbar-mobile-trigger {
+    display: contents;
+  }
+
+  .footer,
+  .footer--dark {
+    padding-block: calc(var(--spacing) * 5);
+  }
+
+  .footer > .container {
+    align-items: stretch;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 4);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .footer__links {
+    order: 1;
+    gap: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
+  }
+
+  .footer__items {
+    flex-wrap: wrap;
+  }
+
+  .footer .footer__bottom {
+    width: 100%;
+    order: 2;
+    padding-top: calc(var(--spacing) * 4);
+    border-top: var(--border-width) solid var(--border);
+  }
+
+  .theme-navbar-desktop-navigation,
+  [class*="colorModeToggle"] {
+    display: none !important;
+  }
+
+  .navbar__brand {
+    display: inline-flex !important;
+    min-width: 0;
+    margin-right: 0;
+  }
+
+  .navbar__brand .navbar__title {
+    font-size: var(--theme-text-base);
+    line-height: var(--theme-leading-base);
+  }
+
+  [class*="navbarSearchContainer"] {
+    right: auto;
+    left: calc(var(--spacing) * 12);
+  }
+
+  .theme-doc-page__content {
+    max-width: 40rem;
+    padding-block: 0;
+  }
+
+  .theme-doc-markdown > header > :where(h1),
+  .theme-doc-markdown > h1:first-child {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+}
+
+.theme-doc-markdown > header + :where(*) {
+  margin-block-start: 0 !important;
+}
+
+.theme-doc-markdown > :is(h1, h2, h3, h4, h5, h6) + :where(*) {
+  margin-block-start: 1rem !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
diff --git a/packages/docusaurus-theme/src/theme/base.test.ts b/packages/docusaurus-theme/src/theme/base.test.ts
new file mode 100644
index 000000000..b34222856
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/base.test.ts
@@ -0,0 +1,159 @@
+import fs from "fs";
+import path from "path";
+
+const stylesheet = fs.readFileSync(path.join(__dirname, "base.scss"), "utf8");
+const canonicalStylesheet = stylesheet
+  .replace(/\s+/g, " ")
+  .replace(/\s*([(),])\s*/g, "$1");
+
+it("keeps docs CSS on semantic color tokens", () => {
+  expect(stylesheet).not.toMatch(/--(?:docs|api|openapi|nextra|fumadocs)-/);
+  expect(stylesheet).not.toMatch(/#[\da-f]{3,8}\b|\b(?:rgb|hsl)a?\(/i);
+});
+
+it("leaves component focus visuals to official primitives", () => {
+  expect(stylesheet).not.toContain(
+    ":where(a, button, input, select, textarea, [tabindex]):focus-visible"
+  );
+  expect(stylesheet).toMatch(/\[role="tab"\][\s\S]*cursor: pointer;/);
+  expect(stylesheet).toMatch(
+    /\[aria-disabled="true"\][\s\S]*cursor: not-allowed;/
+  );
+});
+
+it("keeps article prose size stable across responsive widths", () => {
+  expect(stylesheet).toContain("--theme-prose-body-size: 0.9375rem;");
+  expect(stylesheet).toContain("--theme-prose-leading: 1.75;");
+  expect(stylesheet).toContain("--typeset-size: var(--theme-prose-body-size);");
+  expect(stylesheet).toContain("--typeset-flow: 1.25em;");
+  expect(stylesheet).toContain("--typeset-body-size: var(--typeset-size);");
+  expect(stylesheet).toContain("font-size: var(--typeset-body-size);");
+  expect(stylesheet).toContain("line-height: var(--typeset-leading);");
+  expect(stylesheet).toContain("font-size: 1.875rem !important;");
+  expect(stylesheet).toContain("line-height: 2.25rem !important;");
+  expect(stylesheet).toContain("font-size: 1.25em !important;");
+  expect(stylesheet).toContain(
+    "margin-block-start: calc(var(--typeset-flow) * 1.4) !important;"
+  );
+  expect(stylesheet).toContain("font-size: 1.125em !important;");
+  expect(stylesheet).toContain(
+    "margin-block-start: var(--typeset-flow) !important;"
+  );
+  expect(stylesheet).toContain(
+    "border-inline-start: 2px solid var(--typeset-rule) !important;"
+  );
+  expect(stylesheet).toContain(
+    "border-block-start: 1px solid var(--typeset-rule);"
+  );
+  expect(stylesheet).toContain(
+    "margin-block-start: calc(var(--typeset-flow) * 2.4) !important;"
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-inline \{[\s\S]*border-radius: min\(calc\(var\(--radius\) \* 0\.6\), 0\.35em\);/
+  );
+  expect(stylesheet).toContain("border-radius: var(--radius) !important;");
+  expect(stylesheet).not.toContain("--typeset-size: 1.05rem;");
+  expect(stylesheet).not.toContain(
+    "--typeset-body-size: calc(var(--typeset-size) * 1.125);"
+  );
+});
+
+it("keeps single-class arbitrary selectors quoted during Docusaurus SSG", () => {
+  const breadcrumbs = fs.readFileSync(
+    path.join(__dirname, "DocBreadcrumbs/index.tsx"),
+    "utf8"
+  );
+
+  expect(breadcrumbs).toContain(
+    '<BreadcrumbSeparator className="theme-breadcrumb-separator" />'
+  );
+});
+
+it("gives official alerts an external prose-flow wrapper", () => {
+  const admonition = fs.readFileSync(
+    path.join(__dirname, "Admonition/Layout/index.tsx"),
+    "utf8"
+  );
+
+  expect(admonition).toContain('<div className="theme-admonition-flow">');
+  expect(stylesheet).toMatch(
+    /\.theme-admonition-flow \{[\s\S]*margin-block-start: var\(--typeset-flow\);/
+  );
+  expect(stylesheet).not.toMatch(
+    /\[data-slot=["']alert["']\][^{]*\{[^}]*margin/i
+  );
+});
+
+it("keeps prose ownership outside official UI interiors", () => {
+  expect(canonicalStylesheet).toContain(
+    ":not(:where(.theme-doc-markdown [data-slot],.theme-doc-markdown [data-slot] *,.theme-doc-markdown .theme-code-block,.theme-doc-markdown .theme-code-block *,.theme-doc-markdown .docusaurus-mermaid-container,.theme-doc-markdown .docusaurus-mermaid-container *))"
+  );
+  expect(stylesheet).not.toContain(":where(img, picture img, video, svg)");
+  expect(stylesheet).not.toContain(":not([data-slot] *)");
+});
+
+it("matches the rendered shadcn docs code surface", () => {
+  expect(stylesheet).toMatch(
+    /\.theme-code-block \{[\s\S]*border-radius: calc\(var\(--radius\) \+ 8px\);[\s\S]*background: var\(--code\);/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-block pre \{[\s\S]*padding: calc\(var\(--spacing\) \* 3\.5\) calc\(var\(--spacing\) \* 4\);[\s\S]*font-size: 0\.875rem;[\s\S]*line-height: 1\.53125rem;/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-block__title \{[\s\S]*padding: calc\(var\(--spacing\) \* 2\.5\) calc\(var\(--spacing\) \* 4\);[\s\S]*font-size: 0\.765625rem;[\s\S]*line-height: 1\.33984375rem;/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-block \[class\*="codeLineNumber"\] \{[\s\S]*width: calc\(var\(--spacing\) \* 16\) !important;[\s\S]*padding: 0 calc\(var\(--spacing\) \* 6\) 0 0 !important;[\s\S]*color: var\(--code-number\);/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-block-highlighted-line \{[\s\S]*background: var\(--code-highlight\);/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-block \.token \{[\s\S]*font-style: normal !important;[\s\S]*font-weight: 400 !important;/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-block \.token\.keyword[\s\S]*color: var\(--code-syntax-keyword\) !important;/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-code-block \.token\.function[\s\S]*color: var\(--code-syntax-function\) !important;/
+  );
+});
+
+it("keeps structural Docusaurus integration separate from component visuals", () => {
+  expect(stylesheet).toContain(".theme-navbar-mobile-trigger");
+  expect(stylesheet).toContain(".theme-doc-sidebar-container");
+  expect(stylesheet).toMatch(
+    /\.theme-doc-sidebar-desktop,[\s\S]*\.theme-mobile-sidebar-content \{[\s\S]*--sidebar: var\(--background\);[\s\S]*--sidebar-foreground: var\(--foreground\);/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-doc-sidebar-container \{[\s\S]*border-right: 0 !important;/
+  );
+  expect(stylesheet).toMatch(
+    /\.theme-mobile-sidebar-content \{[\s\S]*border-right: 0 !important;/
+  );
+  expect(stylesheet).toContain("position: relative;");
+  expect(stylesheet).not.toContain(".theme-doc-sidebar-chevron");
+  expect(stylesheet).not.toContain(".theme-details-content");
+  expect(stylesheet).not.toContain(".theme-mobile-toc-content");
+});
+
+it("uses Geist with a bundled Pretendard fallback and live shell geometry tokens", () => {
+  expect(stylesheet).toContain('font-family: "Pretendard Variable";');
+  expect(stylesheet).toContain(
+    'src: url("./fonts/PretendardVariable.woff2") format("woff2-variations");'
+  );
+  expect(canonicalStylesheet).toContain(
+    '--ifm-font-family-base: Geist,"Pretendard Variable","Geist Fallback",sans-serif;'
+  );
+  expect(stylesheet).toContain(
+    "--ifm-navbar-height: calc(var(--spacing) * 14);"
+  );
+  expect(stylesheet).toMatch(
+    /@media \(min-width: 1024px\)[\s\S]*--ifm-navbar-height: calc\(var\(--spacing\) \* 16\);/
+  );
+  expect(stylesheet).toContain(".theme-doc-root-layout");
+  expect(stylesheet).toContain(".theme-doc-page__content");
+  expect(stylesheet).toContain(".theme-doc-page__toc");
+  expect(stylesheet).toContain("max-width: 40rem;");
+  expect(stylesheet).toContain("width: 18rem;");
+});
diff --git a/packages/docusaurus-theme/src/theme/components/code-language-icon.tsx b/packages/docusaurus-theme/src/theme/components/code-language-icon.tsx
new file mode 100644
index 000000000..72d64f7c8
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/code-language-icon.tsx
@@ -0,0 +1,44 @@
+/*
+ * Adapted from shadcn/ui apps/v4/components/icons.tsx.
+ * Copyright (c) shadcn. Licensed under the MIT License.
+ */
+
+import React, { type ReactNode, type SVGProps } from "react";
+import { FileIcon } from "lucide-react";
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function TypeScriptIcon(props: IconProps): ReactNode {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
+    </svg>
+  );
+}
+
+function CssIcon(props: IconProps): ReactNode {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M0 0v20.16A3.84 3.84 0 0 0 3.84 24h16.32A3.84 3.84 0 0 0 24 20.16V3.84A3.84 3.84 0 0 0 20.16 0Zm14.256 13.08c1.56 0 2.28 1.08 2.304 2.64h-1.608c.024-.288-.048-.6-.144-.84-.096-.192-.288-.264-.552-.264-.456 0-.696.264-.696.84-.024.576.288.888.768 1.08.72.288 1.608.744 1.92 1.296q.432.648.432 1.656c0 1.608-.912 2.592-2.496 2.592-1.656 0-2.4-1.032-2.424-2.688h1.68c0 .792.264 1.176.792 1.176.264 0 .456-.072.552-.24.192-.312.24-1.176-.048-1.512-.312-.408-.912-.6-1.32-.816q-.828-.396-1.224-.936c-.24-.36-.36-.888-.36-1.536 0-1.44.936-2.472 2.424-2.448m5.4 0c1.584 0 2.304 1.08 2.328 2.64h-1.608c0-.288-.048-.6-.168-.84-.096-.192-.264-.264-.528-.264-.48 0-.72.264-.72.84s.288.888.792 1.08c.696.288 1.608.744 1.92 1.296.264.432.408.984.408 1.656.024 1.608-.888 2.592-2.472 2.592-1.68 0-2.424-1.056-2.448-2.688h1.68c0 .744.264 1.176.792 1.176.264 0 .456-.072.552-.24.216-.312.264-1.176-.048-1.512-.288-.408-.888-.6-1.32-.816-.552-.264-.96-.576-1.2-.936s-.36-.888-.36-1.536c-.024-1.44.912-2.472 2.4-2.448m-11.031.018c.711-.006 1.419.198 1.839.63.432.432.672 1.128.648 1.992H9.336c.024-.456-.096-.792-.432-.96-.312-.144-.768-.048-.888.24-.12.264-.192.576-.168.864v3.504c0 .744.264 1.128.768 1.128a.65.65 0 0 0 .552-.264c.168-.24.192-.552.168-.84h1.776c.096 1.632-.984 2.712-2.568 2.688-1.536 0-2.496-.864-2.472-2.472v-4.032c0-.816.24-1.44.696-1.848.432-.408 1.146-.624 1.857-.63" />
+    </svg>
+  );
+}
+
+export function CodeLanguageIcon({
+  language,
+}: {
+  language?: string;
+}): ReactNode {
+  switch (language) {
+    case "css":
+      return <CssIcon className="fill-foreground" />;
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+    case "typescript":
+      return <TypeScriptIcon className="fill-foreground" />;
+    default:
+      return <FileIcon />;
+  }
+}
diff --git a/packages/docusaurus-theme/src/theme/components/copy-page-actions.tsx b/packages/docusaurus-theme/src/theme/components/copy-page-actions.tsx
new file mode 100644
index 000000000..8162b8bb7
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/copy-page-actions.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { useLocation } from "@docusaurus/router";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { usePluginData } from "@docusaurus/useGlobalData";
+
+import { DocsCopyPage } from "./docs-copy-page";
+
+export default function CopyPageActions() {
+  const location = useLocation();
+  const baseUrl = useBaseUrl("/");
+  const data = usePluginData("@aeei/docusaurus-theme") as
+    | { copyPage?: { enabled?: boolean } }
+    | undefined;
+  const enabled = data?.copyPage?.enabled ?? false;
+
+  const markdownUrl = React.useMemo(() => {
+    const basePath = baseUrl.replace(/\/$/, "");
+    const pagePath = location.pathname.replace(/\/$/, "");
+    return pagePath === basePath ? `${baseUrl}index.md` : `${pagePath}.md`;
+  }, [baseUrl, location.pathname]);
+
+  const copyPage = React.useCallback(async () => {
+    const response = await fetch(markdownUrl);
+    if (!response.ok) throw new Error(String(response.status));
+    await navigator.clipboard.writeText(await response.text());
+  }, [markdownUrl]);
+
+  const copyMarkdownLink = React.useCallback(
+    () =>
+      navigator.clipboard.writeText(
+        new URL(markdownUrl, window.location.origin).href
+      ),
+    [markdownUrl]
+  );
+
+  if (!enabled) return null;
+
+  return (
+    <div className="theme-copy-page-actions">
+      <DocsCopyPage
+        copyPage={copyPage}
+        markdownUrl={markdownUrl}
+        copyMarkdownLink={copyMarkdownLink}
+      />
+    </div>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/components/docs-copy-page.tsx b/packages/docusaurus-theme/src/theme/components/docs-copy-page.tsx
new file mode 100644
index 000000000..0af8b8d6e
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/docs-copy-page.tsx
@@ -0,0 +1,96 @@
+import * as React from "react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  ExternalLinkIcon,
+  LinkIcon,
+} from "lucide-react";
+
+import { Button } from "./ui/button";
+import { ButtonGroup, ButtonGroupSeparator } from "./ui/button-group";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+type Status = "idle" | "copied" | "error";
+
+export function DocsCopyPage({
+  copyPage,
+  markdownUrl,
+  copyMarkdownLink,
+}: {
+  copyPage: () => Promise<void>;
+  markdownUrl: string;
+  copyMarkdownLink: () => Promise<void>;
+}) {
+  const [status, setStatus] = React.useState<Status>("idle");
+
+  const runCopy = React.useCallback(async () => {
+    try {
+      await copyPage();
+      setStatus("copied");
+    } catch {
+      setStatus("error");
+    }
+    window.setTimeout(() => setStatus("idle"), 1600);
+  }, [copyPage]);
+
+  return (
+    <ButtonGroup orientation="horizontal" className="rounded-lg bg-secondary">
+      <Button
+        variant="secondary"
+        size="sm"
+        className="h-8 shadow-none md:h-7 md:text-[0.8rem]"
+        onClick={runCopy}
+      >
+        {status === "copied" ? <CheckIcon /> : <CopyIcon />}
+        {status === "copied"
+          ? "Copied"
+          : status === "error"
+            ? "Copy failed"
+            : "Copy Page"}
+      </Button>
+      <ButtonGroupSeparator />
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant="secondary"
+              size="icon"
+              className="shadow-none md:size-7"
+              aria-label="Copy page options"
+            />
+          }
+        >
+          <ChevronDownIcon />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="animate-none! w-auto min-w-40 rounded-lg shadow-none"
+        >
+          <DropdownMenuItem
+            onClick={() => window.open(markdownUrl, "_blank", "noopener")}
+          >
+            <ExternalLinkIcon />
+            View as Markdown
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={copyMarkdownLink}>
+            <LinkIcon />
+            Copy Markdown link
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <span className="sr-only" aria-live="polite">
+        {status === "copied"
+          ? "Page copied as Markdown."
+          : status === "error"
+            ? "Page could not be copied."
+            : ""}
+      </span>
+    </ButtonGroup>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/components/local-search/index.tsx b/packages/docusaurus-theme/src/theme/components/local-search/index.tsx
new file mode 100644
index 000000000..8c4e88d0d
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/local-search/index.tsx
@@ -0,0 +1,167 @@
+import * as React from "react";
+import { useHistory } from "@docusaurus/router";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { ArrowRightIcon, CornerDownLeftIcon, SearchIcon } from "lucide-react";
+
+import type { SearchIndex } from "../../../search/types";
+import { Button } from "../ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Spinner } from "../ui/spinner";
+import { searchRecords } from "./search";
+
+export default function LocalSearch() {
+  const history = useHistory();
+  const indexUrl = useBaseUrl("/search-index.json");
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [index, setIndex] = React.useState<SearchIndex>();
+  const [error, setError] = React.useState(false);
+
+  React.useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setOpen((value) => !value);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  React.useEffect(() => {
+    if (!open || index || error) return;
+    let active = true;
+    fetch(indexUrl)
+      .then((response) => {
+        if (!response.ok) throw new Error(String(response.status));
+        return response.json() as Promise<SearchIndex>;
+      })
+      .then((value) => active && setIndex(value))
+      .catch(() => active && setError(true));
+    return () => {
+      active = false;
+    };
+  }, [error, index, indexUrl, open]);
+
+  const hasQuery = query.trim().length > 0;
+  const results = React.useMemo(() => {
+    if (hasQuery) return searchRecords(index?.records ?? [], query);
+    return (index?.records ?? [])
+      .filter((record) => !record.section)
+      .slice(0, 8)
+      .map((record) => ({
+        ...record,
+        score: 0,
+        snippet: record.text.slice(0, 150),
+      }));
+  }, [hasQuery, index, query]);
+  const loading = open && !index && !error;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={
+          <Button
+            variant="outline"
+            className="relative size-8 justify-center rounded-lg border-none bg-muted p-0 text-foreground shadow-none transition-colors hover:bg-muted/50 lg:w-40 lg:justify-start lg:pl-3 xl:w-64 dark:bg-card"
+            aria-label="Search documentation"
+          />
+        }
+      >
+        <SearchIcon className="size-4 lg:hidden" />
+        <span className="hidden xl:inline-flex">Search documentation...</span>
+        <span className="hidden lg:inline-flex xl:hidden">Search...</span>
+      </DialogTrigger>
+      <DialogContent
+        className="theme-search-dialog top-[15%]! max-w-[min(32rem,calc(100%-2rem))]! translate-y-0! rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800"
+        showCloseButton={false}
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Search documentation...</DialogTitle>
+          <DialogDescription>Search the documentation.</DialogDescription>
+        </DialogHeader>
+        <Command
+          shouldFilter={false}
+          className="rounded-none bg-transparent **:data-[slot=command-input]:h-9! **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:h-9!"
+        >
+          <div className="relative">
+            <CommandInput
+              autoFocus
+              placeholder="Search documentation..."
+              value={query}
+              onValueChange={setQuery}
+            />
+            {loading && (
+              <div className="pointer-events-none absolute top-1/2 right-3 z-10 flex -translate-y-1/2 items-center justify-center">
+                <Spinner className="size-4 text-muted-foreground" />
+              </div>
+            )}
+          </div>
+          <CommandList className="no-scrollbar max-h-[min(20rem,calc(100svh-11rem))]! scroll-pt-2 scroll-pb-1.5">
+            <CommandEmpty className="py-12 text-center text-sm text-muted-foreground">
+              {error
+                ? "Search index unavailable."
+                : loading
+                  ? "Loading..."
+                  : query
+                    ? "No results found."
+                    : "Type to search documentation."}
+            </CommandEmpty>
+            {results.length > 0 && (
+              <CommandGroup
+                heading={hasQuery ? "Documentation" : "Pages"}
+                className="p-0! **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!"
+              >
+                {results.map((result) => (
+                  <CommandItem
+                    key={result.id}
+                    value={result.id}
+                    onSelect={() => {
+                      setOpen(false);
+                      setQuery("");
+                      history.push(result.url);
+                    }}
+                  >
+                    {!hasQuery && <ArrowRightIcon />}
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">
+                        {result.section ?? result.title}
+                      </div>
+                      {hasQuery && (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {result.section ? `${result.title} · ` : ""}
+                          {result.snippet}
+                        </div>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+        <div className="absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium text-muted-foreground dark:border-t-neutral-700 dark:bg-neutral-800">
+          <span className="flex size-5 items-center justify-center rounded-sm border bg-background">
+            <CornerDownLeftIcon className="size-3" />
+          </span>
+          Go to page
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/components/local-search/search.ts b/packages/docusaurus-theme/src/theme/components/local-search/search.ts
new file mode 100644
index 000000000..6cfb9878b
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/local-search/search.ts
@@ -0,0 +1,54 @@
+import type { SearchRecord } from "../../../search/types";
+
+export type SearchResult = SearchRecord & { score: number; snippet: string };
+
+const normalize = (value: string) =>
+  value.normalize("NFKC").toLocaleLowerCase();
+const tokens = (value: string) =>
+  normalize(value).match(/[\p{L}\p{N}]+/gu) ?? [];
+
+function snippet(record: SearchRecord, queryTokens: string[]) {
+  const text = record.text.trim();
+  if (!text) return record.section ?? record.title;
+  const normalized = normalize(text);
+  const position = Math.max(0, normalized.indexOf(queryTokens[0] ?? ""));
+  const start = Math.max(0, position - 45);
+  const value = text.slice(start, start + 150).trim();
+  return `${start ? "…" : ""}${value}${start + 150 < text.length ? "…" : ""}`;
+}
+
+export function searchRecords(
+  records: SearchRecord[],
+  query: string,
+  limit = 8
+): SearchResult[] {
+  const queryTokens = tokens(query);
+  if (!queryTokens.length) return [];
+
+  return records
+    .map((record) => {
+      const title = normalize(record.title);
+      const section = normalize(record.section ?? "");
+      const text = normalize(record.text);
+      const haystack = `${title} ${section} ${text}`;
+      if (!queryTokens.every((token) => haystack.includes(token))) return null;
+
+      let score = 0;
+      for (const token of queryTokens) {
+        if (title === token) score += 100;
+        else if (title.startsWith(token)) score += 70;
+        else if (title.includes(token)) score += 50;
+        if (section === token) score += 80;
+        else if (section.startsWith(token)) score += 55;
+        else if (section.includes(token)) score += 35;
+        if (text.includes(token)) score += 10;
+      }
+      return { ...record, score, snippet: snippet(record, queryTokens) };
+    })
+    .filter((record): record is SearchResult => record !== null)
+    .sort(
+      (left, right) =>
+        right.score - left.score || left.id.localeCompare(right.id, "en")
+    )
+    .slice(0, limit);
+}
diff --git a/packages/docusaurus-theme/src/theme/components/sidebar-theme-menu.tsx b/packages/docusaurus-theme/src/theme/components/sidebar-theme-menu.tsx
new file mode 100644
index 000000000..16112f998
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/sidebar-theme-menu.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+
+import { useColorMode, useThemeConfig } from "@docusaurus/theme-common";
+import { Check, Monitor, Moon, Sun } from "lucide-react";
+
+import { Button } from "@theme/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@theme/components/ui/dropdown-menu";
+
+const modes = [
+  { value: "light", label: "Light", icon: Sun },
+  { value: "dark", label: "Dark", icon: Moon },
+  { value: "system", label: "System", icon: Monitor },
+] as const;
+
+export function SidebarThemeMenu({
+  compact = false,
+  side = "top",
+  align = "start",
+}: {
+  compact?: boolean;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+}): React.JSX.Element | null {
+  const { disableSwitch, respectPrefersColorScheme } =
+    useThemeConfig().colorMode;
+  const { colorModeChoice, setColorMode } = useColorMode();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => setMounted(true), []);
+
+  if (disableSwitch) return null;
+
+  const value = mounted ? (colorModeChoice ?? "system") : "system";
+  const choices = respectPrefersColorScheme ? modes : modes.slice(0, 2);
+  const current =
+    choices.find((choice) => choice.value === value) ?? choices[0];
+  const Icon = current.icon;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size={compact ? "icon" : "default"}
+            disabled={!mounted}
+            title={`Color theme: ${current.label}`}
+            aria-label={`Color theme: ${current.label}`}
+          />
+        }
+      >
+        <Icon aria-hidden="true" />
+        {!compact && <span>{current.label}</span>}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side={side} align={align}>
+        {choices.map(({ value: choice, label, icon: ChoiceIcon }) => (
+          <DropdownMenuItem
+            key={choice}
+            onClick={() =>
+              setColorMode(
+                choice === "light" ? "light" : choice === "dark" ? "dark" : null
+              )
+            }
+          >
+            <ChoiceIcon aria-hidden="true" />
+            {label}
+            {choice === value && (
+              <DropdownMenuShortcut>
+                <Check aria-hidden="true" />
+              </DropdownMenuShortcut>
+            )}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/accordion.tsx b/packages/docusaurus-theme/src/theme/components/ui/accordion.tsx
new file mode 100644
index 000000000..baf27d894
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/accordion.tsx
@@ -0,0 +1,74 @@
+import * as React from "react"
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "../../utils/cn"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/alert.tsx b/packages/docusaurus-theme/src/theme/components/ui/alert.tsx
new file mode 100644
index 000000000..42caec3fe
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/alert.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/badge.tsx b/packages/docusaurus-theme/src/theme/components/ui/badge.tsx
new file mode 100644
index 000000000..5ba996597
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/badge.tsx
@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/breadcrumb.tsx b/packages/docusaurus-theme/src/theme/components/ui/breadcrumb.tsx
new file mode 100644
index 000000000..c04f0215c
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/breadcrumb.tsx
@@ -0,0 +1,125 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "../../utils/cn"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  })
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/button-group.tsx b/packages/docusaurus-theme/src/theme/components/ui/button-group.tsx
new file mode 100644
index 000000000..37c423a5a
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/button-group.tsx
@@ -0,0 +1,88 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+import { Separator } from "./separator"
+
+const buttonGroupVariants = cva(
+  "cn-button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "cn-button-group-orientation-horizontal *:data-slot:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "cn-button-group-orientation-vertical flex-col *:data-slot:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "cn-button-group-text flex items-center [&_svg]:pointer-events-none",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "cn-button-group-separator relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/button.tsx b/packages/docusaurus-theme/src/theme/components/ui/button.tsx
new file mode 100644
index 000000000..93a76c623
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/card.tsx b/packages/docusaurus-theme/src/theme/components/ui/card.tsx
new file mode 100644
index 000000000..21a0b6faf
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "../../utils/cn"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/collapsible.tsx b/packages/docusaurus-theme/src/theme/components/ui/collapsible.tsx
new file mode 100644
index 000000000..352434cac
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/collapsible.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/command.tsx b/packages/docusaurus-theme/src/theme/components/ui/command.tsx
new file mode 100644
index 000000000..238af0977
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/command.tsx
@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { CheckIcon, SearchIcon } from "lucide-react"
+
+import { cn } from "../../utils/cn"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "./input-group"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "cn-command flex size-full flex-col overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "cn-command-dialog top-1/3 translate-y-0 overflow-hidden p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="cn-command-input-wrapper">
+      <InputGroup className="cn-command-input-group">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "cn-command-input outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="cn-command-input-icon" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "cn-command-list overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("cn-command-empty", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn("cn-command-group", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("cn-command-separator", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "cn-command-item group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="cn-command-item-indicator ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn("cn-command-shortcut", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/dialog.tsx b/packages/docusaurus-theme/src/theme/components/ui/dialog.tsx
new file mode 100644
index 000000000..bc3015042
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/dialog.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "../../utils/cn"
+import { Button } from "./button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn("cn-dialog-overlay fixed inset-0 isolate z-50", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "cn-dialog-content fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="cn-dialog-close"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("cn-dialog-header flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "cn-dialog-footer flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("cn-dialog-title cn-font-heading", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("cn-dialog-description", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/dropdown-menu.tsx b/packages/docusaurus-theme/src/theme/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..4ee607347
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/dropdown-menu.tsx
@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "../../utils/cn"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/input-group.tsx b/packages/docusaurus-theme/src/theme/components/ui/input-group.tsx
new file mode 100644
index 000000000..f1f000946
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/input-group.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group cn-input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "cn-input-group-addon flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "cn-input-group-addon-align-inline-start order-first",
+        "inline-end": "cn-input-group-addon-align-inline-end order-last",
+        "block-start":
+          "cn-input-group-addon-align-block-start order-first w-full justify-start",
+        "block-end":
+          "cn-input-group-addon-align-block-end order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "cn-input-group-button flex items-center shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "cn-input-group-button-size-xs",
+        sm: "cn-input-group-button-size-sm",
+        "icon-xs": "cn-input-group-button-size-icon-xs",
+        "icon-sm": "cn-input-group-button-size-icon-sm",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "cn-input-group-text flex items-center [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn("cn-input-group-input flex-1", className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn("cn-input-group-textarea flex-1 resize-none", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/input.tsx b/packages/docusaurus-theme/src/theme/components/ui/input.tsx
new file mode 100644
index 000000000..23716712a
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "../../utils/cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/kbd.tsx b/packages/docusaurus-theme/src/theme/components/ui/kbd.tsx
new file mode 100644
index 000000000..176e22b52
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { cn } from "../../utils/cn"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/navigation-menu.tsx b/packages/docusaurus-theme/src/theme/components/ui/navigation-menu.tsx
new file mode 100644
index 000000000..b53f49aa7
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/navigation-menu.tsx
@@ -0,0 +1,170 @@
+import * as React from "react"
+
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props &
+  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Icon>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/popover.tsx b/packages/docusaurus-theme/src/theme/components/ui/popover.tsx
new file mode 100644
index 000000000..41fd80454
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/popover.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "../../utils/cn"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "cn-popover-content cn-popover-content-logical z-50 w-72 origin-(--transform-origin) outline-hidden",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("cn-popover-header", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("cn-popover-title", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("cn-popover-description", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/separator.tsx b/packages/docusaurus-theme/src/theme/components/ui/separator.tsx
new file mode 100644
index 000000000..d2f562055
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "../../utils/cn"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/sheet.tsx b/packages/docusaurus-theme/src/theme/components/ui/sheet.tsx
new file mode 100644
index 000000000..2bdb93e31
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/sheet.tsx
@@ -0,0 +1,136 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "../../utils/cn"
+import { Button } from "./button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/sidebar.tsx b/packages/docusaurus-theme/src/theme/components/ui/sidebar.tsx
new file mode 100644
index 000000000..d80b72210
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/sidebar.tsx
@@ -0,0 +1,723 @@
+"use client"
+
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { useIsMobile } from "@theme/hooks/use-mobile"
+import { cn } from "../../utils/cn"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Separator } from "./separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "./sheet"
+import { Skeleton } from "./skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "./tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  })
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  })
+
+  if (!tooltip) {
+    return comp
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  })
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md"
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  })
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/skeleton.tsx b/packages/docusaurus-theme/src/theme/components/ui/skeleton.tsx
new file mode 100644
index 000000000..f827e6b4c
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import * as React from "react"
+
+import { cn } from "../../utils/cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/spinner.tsx b/packages/docusaurus-theme/src/theme/components/ui/spinner.tsx
new file mode 100644
index 000000000..17cfc27be
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/spinner.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "../../utils/cn"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/table.tsx b/packages/docusaurus-theme/src/theme/components/ui/table.tsx
new file mode 100644
index 000000000..957dd3b6f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../utils/cn"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/packages/docusaurus-theme/src/theme/components/ui/tabs.tsx b/packages/docusaurus-theme/src/theme/components/ui/tabs.tsx
new file mode 100644
index 000000000..779522812
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/tabs.tsx
@@ -0,0 +1,82 @@
+import * as React from "react"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../utils/cn"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/textarea.tsx b/packages/docusaurus-theme/src/theme/components/ui/textarea.tsx
new file mode 100644
index 000000000..63dd7770e
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../../utils/cn"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "cn-textarea flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/packages/docusaurus-theme/src/theme/components/ui/tooltip.tsx b/packages/docusaurus-theme/src/theme/components/ui/tooltip.tsx
new file mode 100644
index 000000000..4347db141
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/components/ui/tooltip.tsx
@@ -0,0 +1,68 @@
+import * as React from "react"
+
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "../../utils/cn"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/docusaurus-theme/src/theme/docusaurus-theme-common-internal.d.ts b/packages/docusaurus-theme/src/theme/docusaurus-theme-common-internal.d.ts
new file mode 100644
index 000000000..aaf02e126
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/docusaurus-theme-common-internal.d.ts
@@ -0,0 +1,15 @@
+declare module "@docusaurus/theme-common/internal" {
+  export * from "@docusaurus/theme-common/lib/internal";
+}
+
+declare module "@docusaurus/theme-common/Details" {
+  export { Details } from "@docusaurus/theme-common/lib/components/Details";
+}
+
+declare module "@docusaurus/plugin-content-docs/client" {
+  export const findFirstSidebarItemLink: any;
+  export const isActiveSidebarItem: any;
+  export const useDocSidebarItemsExpandedState: any;
+  export const useVisibleSidebarItems: any;
+  export const useDocsSidebar: any;
+}
diff --git a/packages/docusaurus-theme/src/theme/fonts/PretendardVariable.woff2 b/packages/docusaurus-theme/src/theme/fonts/PretendardVariable.woff2
new file mode 100644
index 000000000..49c54b515
Binary files /dev/null and b/packages/docusaurus-theme/src/theme/fonts/PretendardVariable.woff2 differ
diff --git a/packages/docusaurus-theme/src/theme/fonts/geist-latin-wght-normal.woff2 b/packages/docusaurus-theme/src/theme/fonts/geist-latin-wght-normal.woff2
new file mode 100644
index 000000000..8f01e7630
Binary files /dev/null and b/packages/docusaurus-theme/src/theme/fonts/geist-latin-wght-normal.woff2 differ
diff --git a/packages/docusaurus-theme/src/theme/fonts/geist-mono-latin-wght-normal.woff2 b/packages/docusaurus-theme/src/theme/fonts/geist-mono-latin-wght-normal.woff2
new file mode 100644
index 000000000..1ee228fda
Binary files /dev/null and b/packages/docusaurus-theme/src/theme/fonts/geist-mono-latin-wght-normal.woff2 differ
diff --git a/packages/docusaurus-theme/src/theme/hooks/use-mobile.ts b/packages/docusaurus-theme/src/theme/hooks/use-mobile.ts
new file mode 100644
index 000000000..db49ccb4f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const media = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const update = () => setIsMobile(media.matches);
+    media.addEventListener("change", update);
+    update();
+    return () => media.removeEventListener("change", update);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/packages/docusaurus-theme/src/theme/icon-contract.test.ts b/packages/docusaurus-theme/src/theme/icon-contract.test.ts
new file mode 100644
index 000000000..ba62a5e94
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/icon-contract.test.ts
@@ -0,0 +1,41 @@
+import fs from "fs";
+import path from "path";
+
+function listProductionFiles(directory: string): string[] {
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const entryPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) return listProductionFiles(entryPath);
+    if (/\.test\.[jt]sx?$/.test(entry.name)) return [];
+    return /\.[jt]sx?$/.test(entry.name) ? [entryPath] : [];
+  });
+}
+
+it("uses Lucide except for official shadcn code-language marks", () => {
+  const files = listProductionFiles(__dirname);
+  const source = files
+    .filter((file) => !file.endsWith("components/code-language-icon.tsx"))
+    .map((file) => fs.readFileSync(file, "utf8"))
+    .join("\n");
+  const codeLanguageIcon = fs.readFileSync(
+    path.join(__dirname, "components/code-language-icon.tsx"),
+    "utf8"
+  );
+
+  expect(source).not.toContain("<svg");
+  expect(codeLanguageIcon).toContain("Adapted from shadcn/ui");
+  expect(codeLanguageIcon).toContain("function TypeScriptIcon");
+  expect(codeLanguageIcon).toContain("function CssIcon");
+  expect(source).not.toMatch(/data:image\/svg|mask(?:-image)?:\s*url\(/);
+  expect(source).not.toMatch(/content:\s*["'][^"']*[→←↑↓▶◀][^"']*["']/);
+
+  for (const file of [
+    "BackToTopButton/index.tsx",
+    "CodeBlock/Buttons/CopyButton/index.tsx",
+    "Navbar/MobileSidebar/Toggle/index.tsx",
+    "EditThisPage/index.tsx",
+  ]) {
+    expect(fs.readFileSync(path.join(__dirname, file), "utf8")).toContain(
+      'from "lucide-react"'
+    );
+  }
+});
diff --git a/packages/docusaurus-theme/src/theme/mermaid-contract.test.ts b/packages/docusaurus-theme/src/theme/mermaid-contract.test.ts
new file mode 100644
index 000000000..ac8f91d8f
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/mermaid-contract.test.ts
@@ -0,0 +1,41 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const stylesheet = fs.readFileSync(path.join(__dirname, "base.scss"), "utf8");
+
+describe("Mermaid ownership contract", () => {
+  it("lets Mermaid own generated label typography", () => {
+    const blockStart = stylesheet.indexOf(
+      "\n.theme-doc-markdown .docusaurus-mermaid-container {\n"
+    );
+    const blockEnd = stylesheet.indexOf(
+      ".theme-paginator-link--next",
+      blockStart
+    );
+    const mermaidCss = stylesheet.slice(blockStart, blockEnd);
+
+    expect(mermaidCss).not.toContain("font-family");
+    expect(mermaidCss).not.toContain("font-size");
+    expect(mermaidCss).not.toContain("line-height");
+    expect(mermaidCss).not.toContain("!important");
+    expect(stylesheet).toMatch(
+      /\.theme-doc-markdown \.docusaurus-mermaid-container \*\s*\)\s*\)/
+    );
+  });
+
+  it("keeps Mermaid diagrams in the article flow rhythm", () => {
+    expect(stylesheet).toMatch(
+      /\.theme-doc-markdown \.docusaurus-mermaid-container\s*\{[^}]*margin-block-start: var\(--typeset-flow\);[^}]*\}/
+    );
+  });
+
+  it("keeps wide actual-route diagrams readable in a horizontal scroll surface", () => {
+    expect(stylesheet).toMatch(
+      /\.docusaurus-mermaid-container\s*\{[\s\S]*justify-content: safe center;[\s\S]*overflow-x: auto;/
+    );
+    expect(stylesheet).toContain(
+      '> svg:is(.flowchart, [aria-roledescription="sequence"]) {'
+    );
+    expect(stylesheet).toContain("min-width: 40rem;");
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts b/packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts
new file mode 100644
index 000000000..ccccf1d3d
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/navbar-shell-contract.test.ts
@@ -0,0 +1,80 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const themeRoot = path.resolve(__dirname);
+const read = (relativePath: string) =>
+  fs.readFileSync(path.join(themeRoot, relativePath), "utf8");
+
+describe("live shadcn navbar shell contract", () => {
+  it("uses the official NavigationMenu trigger style for direct GNB links", () => {
+    const navbar = read("Navbar/Content/index.tsx");
+
+    expect(navbar).toContain("navigationMenuTriggerStyle");
+    expect(navbar).toContain("className={navigationMenuTriggerStyle()}");
+  });
+
+  it("keeps theme controls in the Nextra-style desktop and mobile sidebar footers", () => {
+    const navbar = read("Navbar/Content/index.tsx");
+    const desktopSidebar = read("DocSidebar/Desktop/index.tsx");
+    const mobileLayout = read("Navbar/MobileSidebar/Layout/index.tsx");
+
+    expect(navbar).not.toContain("SidebarThemeMenu");
+    expect(navbar).not.toContain("theme-navbar-color-mode");
+    expect(desktopSidebar).toContain("SidebarThemeMenu");
+    expect(desktopSidebar).toContain("compact={collapsed}");
+    expect(desktopSidebar).toContain("<SidebarTrigger");
+    expect(mobileLayout).toContain("SidebarFooter");
+    expect(mobileLayout).toContain(
+      '<SidebarThemeMenu side="top" align="start" />'
+    );
+  });
+
+  it("hydrates the theme control with a stable system icon", () => {
+    const themeMenu = read("components/sidebar-theme-menu.tsx");
+
+    expect(themeMenu).toContain(
+      "const [mounted, setMounted] = React.useState(false);"
+    );
+    expect(themeMenu).toContain("React.useEffect(() => setMounted(true), []);");
+    expect(themeMenu).toContain(
+      'const value = mounted ? (colorModeChoice ?? "system") : "system";'
+    );
+    expect(themeMenu).toContain("disabled={!mounted}");
+  });
+
+  it("aligns mobile action glyphs to the content edge", () => {
+    const css = read("base.scss");
+
+    expect(css).toMatch(
+      /@media \(max-width: 1023px\) \{[\s\S]*\.navbar__inner \{[\s\S]*width: calc\(100% - calc\(var\(--spacing\) \* 8\)\);/
+    );
+  });
+
+  it("matches the Nextra translucent blurred header surface", () => {
+    const css = read("base.scss");
+    const navbarBlock = css.match(/\.navbar \{([\s\S]*?)\n\}/)?.[1] ?? "";
+    const blurBlock = css.match(/\.navbar::before \{([\s\S]*?)\n\}/)?.[1] ?? "";
+
+    expect(navbarBlock).toContain("background: transparent;");
+    expect(navbarBlock).toContain("isolation: isolate;");
+    expect(blurBlock).toContain("backdrop-filter: blur(12px);");
+    expect(blurBlock).toContain("background: color-mix(");
+    expect(blurBlock).toContain("70%");
+    expect(blurBlock).toContain("border-bottom: 1px solid var(--border);");
+  });
+
+  it("caps and centers the shared desktop shell at 90rem", () => {
+    const css = read("base.scss");
+
+    expect(css).toContain("--theme-shell-max-width: 90rem;");
+    expect(css).toMatch(
+      /\.navbar__inner \{[\s\S]*max-width: calc\([\s\S]*var\(--theme-shell-max-width\)[\s\S]*var\(--spacing\) \* 12/
+    );
+    expect(css).toMatch(
+      /\.theme-doc-root-layout > main > \.container-wrapper \{[\s\S]*max-width: var\(--theme-shell-max-width\);[\s\S]*margin-inline: auto;/
+    );
+    expect(css).toMatch(
+      /\.footer > \.container \{[\s\S]*max-width: var\(--theme-shell-max-width\);/
+    );
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/paginator-contract.test.ts b/packages/docusaurus-theme/src/theme/paginator-contract.test.ts
new file mode 100644
index 000000000..13b86543a
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/paginator-contract.test.ts
@@ -0,0 +1,36 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const themeRoot = path.resolve(__dirname);
+const read = (relativePath: string) =>
+  fs.readFileSync(path.join(themeRoot, relativePath), "utf8");
+
+describe("paginator component ownership", () => {
+  it("uses the official Button without visual callsite overrides", () => {
+    const source = read("PaginatorNavLink/index.tsx");
+
+    expect(source).toContain(
+      'import { Button } from "@theme/components/ui/button"'
+    );
+    expect(source).toContain('variant="outline"');
+    expect(source).toContain('size="default"');
+    expect(source).toContain("render={<Link to={permalink} />}");
+    expect(source).toContain("nativeButton={false}");
+    expect(source).toContain('data-icon="inline-start"');
+    expect(source).toContain('data-icon="inline-end"');
+    expect(source).not.toContain("pagination-nav__link");
+    expect(source).not.toContain("pagination-nav__label");
+  });
+
+  it("keeps only grid placement in adapter CSS", () => {
+    const css = read("base.scss");
+
+    expect(css).toContain(
+      ".theme-paginator-link--next {\n  grid-column: 2;\n}"
+    );
+    expect(css).toContain("@media (max-width: 26.25rem)");
+    expect(css).toContain("grid-template-columns: minmax(0, 1fr);");
+    expect(css).not.toContain(".pagination-nav__link {");
+    expect(css).not.toContain(".pagination-nav__label {");
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/prose-contract.test.ts b/packages/docusaurus-theme/src/theme/prose-contract.test.ts
new file mode 100644
index 000000000..665bdae1a
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/prose-contract.test.ts
@@ -0,0 +1,85 @@
+import fs from "fs";
+import path from "path";
+
+const stylesheet = fs.readFileSync(path.join(__dirname, "base.scss"), "utf8");
+const canonicalize = (value: string) =>
+  value.replace(/\s+/g, " ").replace(/\s*([(),])\s*/g, "$1");
+const canonicalStylesheet = canonicalize(stylesheet);
+
+const proseSelectors = [
+  ":where(p)",
+  ":where(h1, h2, h3, h4, h5, h6)",
+  ":where(h2)",
+  ":where(h3)",
+  ":where(a)",
+  ":where(:is(h1, h2, h3, h4, h5, h6) :is(a))",
+  ":where(ul, ol)",
+  ":where(li)",
+  ":where(blockquote)",
+  ":where(img, picture img, video)",
+  ":where(table)",
+];
+
+const localBoundary = String.raw`:not(:where(.theme-doc-markdown [data-slot], .theme-doc-markdown [data-slot] *, .theme-doc-markdown .theme-code-block, .theme-doc-markdown .theme-code-block *, .theme-doc-markdown .docusaurus-mermaid-container, .theme-doc-markdown .docusaurus-mermaid-container *))`;
+
+describe("prose ownership contract", () => {
+  it("rejects bare data-slot descendant exclusions", () => {
+    expect(stylesheet).not.toContain(":not([data-slot] *)");
+  });
+
+  it("scopes typeset selectors to article-local component roots only", () => {
+    for (const selector of proseSelectors) {
+      expect(canonicalStylesheet).toContain(
+        canonicalize(`${localBoundary}${selector}`)
+      );
+    }
+  });
+
+  it("keeps inline code styling component-owned across UI boundaries", () => {
+    const codeInline = fs.readFileSync(
+      path.join(__dirname, "CodeInline/index.tsx"),
+      "utf8"
+    );
+
+    expect(codeInline).toContain(
+      'className={cn("theme-code-inline", className)}'
+    );
+    expect(stylesheet).toContain("--typeset-body-size:");
+    expect(stylesheet).toContain(".theme-code-inline {");
+    expect(stylesheet).not.toContain(":where(:not(pre) > code)");
+  });
+
+  it("reuses canonical inline code styling in table-of-contents labels", () => {
+    const tocTree = fs.readFileSync(
+      path.join(__dirname, "TOCItems/Tree.tsx"),
+      "utf8"
+    );
+
+    expect(tocTree).toContain('className="theme-code-inline"');
+    expect(stylesheet).not.toContain(".table-of-contents__link code {");
+    expect(stylesheet).toContain("--theme-prose-body-size: 0.9375rem;");
+    expect(stylesheet).toContain("--theme-prose-leading: 1.75;");
+    expect(stylesheet).toContain(
+      "var(--typeset-font-mono, var(--ifm-font-family-monospace))"
+    );
+    expect(stylesheet).toContain(
+      "var(--typeset-body-size, var(--theme-prose-body-size))"
+    );
+    expect(stylesheet).toContain(
+      "var(--typeset-leading, var(--theme-prose-leading))"
+    );
+  });
+
+  it("keeps heading hash links on the official inherit contract", () => {
+    expect(canonicalStylesheet).toContain(
+      canonicalize(`${localBoundary}:where(:is(h1, h2, h3, h4, h5, h6) :is(a))`)
+    );
+    expect(stylesheet).toContain("font-weight: inherit !important;");
+    expect(stylesheet).toContain("text-decoration-line: none !important;");
+  });
+
+  it("does not target raw svg as prose media", () => {
+    expect(stylesheet).toContain(":where(img, picture img, video)");
+    expect(stylesheet).not.toContain(":where(img, picture img, video, svg)");
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/registry-source-contract.test.ts b/packages/docusaurus-theme/src/theme/registry-source-contract.test.ts
new file mode 100644
index 000000000..a6e529185
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/registry-source-contract.test.ts
@@ -0,0 +1,61 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+
+// Generated with shadcn@4.12.0, style=base-nova, Base UI, neutral, Lucide.
+// The only source normalization is import paths plus React imports required by
+// this package's TypeScript compiler. Any registry source edit must be checked
+// against the pinned generator before updating these hashes.
+const registrySourceHashes: Record<string, string> = {
+  "accordion.tsx":
+    "7a1b912ead4d52c7f44cd766a73ea34f93ae6ce31fdb47a9bda67ff16c17d38b",
+  "alert.tsx":
+    "248c809fd03466b4c93eeaef407297592f83ed2571094849e80e4c350a964392",
+  "badge.tsx":
+    "aa57e996fe34842c225f04513be7bee26b2641da71ef2333e4b4761165c9b68a",
+  "breadcrumb.tsx":
+    "9187c092d5cdb1e8d39e1a679da21aea2a5789563c9a4a04491d94ceabf3fcf2",
+  "button.tsx":
+    "5fed4c5ad875cfcd4b53974405e07572197eac46313800c66086d8909856ee9c",
+  "button-group.tsx":
+    "0195f8887c826cdaa732c9f49f6122e06c64ad6bc536cfdfb34793ccaea74b85",
+  "card.tsx":
+    "20abb8b39325e2b7dcde3606c4d6cb5b4e03066f43f7b7d77a05698b716b27ac",
+  "collapsible.tsx":
+    "75b084a80ec195a51db8af53f0b756db94fdcac690b72ce3b1965100d2a11459",
+  "dropdown-menu.tsx":
+    "a3e24b15f9e56d1f8134ab6d70aea2988703b66c3316a2bed08d34c0d307c301",
+  "input.tsx":
+    "93e660da8111f477622740665f585ffdd9adc76b1451e8e619e31b3cd87c1387",
+  "kbd.tsx": "18db74165f4f879927aeb0eefe43f1ccc1f3d8d07c8216bf317403e208a9f4b9",
+  "navigation-menu.tsx":
+    "8195846bf9299ab91a82bcfb32d83e9a1bc821f3cdc3cd4b796ee6dedf059abb",
+  "separator.tsx":
+    "62fb2029c4b61a65c22944a0c17c9d5b17e0ad5f41b4866f5418014d1e79d9cb",
+  "sheet.tsx":
+    "389bb6dcd64ec21f9cc0cc5c0721d309dc42c9c3040b6cc5af53a5ffa6f8c113",
+  "sidebar.tsx":
+    "45dac17711ca0844318143707d7981d550446b74d7c2bf7963cdb19c501e66ff",
+  "skeleton.tsx":
+    "3edbbb6e1bdf27afabae7b592fb239849f27a0444dcd37a4c1597ae053e29382",
+  "table.tsx":
+    "4fa843ddd60591eb0a3e32facf626e713330258af692cb7de5cbe83aad70a034",
+  "tabs.tsx":
+    "f58b08e8726f06dad754f30b4c58ae5d76d543861e40b6dfdb376ab590acc657",
+  "tooltip.tsx":
+    "098a32c6d3703b6bb097786c6ee71d0e85f0e0f60322dc34d264c063419cf4a3",
+};
+
+describe("pinned Base Nova registry source", () => {
+  it.each(Object.entries(registrySourceHashes))(
+    "keeps %s byte-exact after approved import normalization",
+    (fileName, expectedHash) => {
+      const source = fs.readFileSync(
+        path.join(__dirname, "components/ui", fileName)
+      );
+      expect(crypto.createHash("sha256").update(source).digest("hex")).toBe(
+        expectedHash
+      );
+    }
+  );
+});
diff --git a/packages/docusaurus-theme/src/theme/shadcn.css b/packages/docusaurus-theme/src/theme/shadcn.css
new file mode 100644
index 000000000..13f79283d
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/shadcn.css
@@ -0,0 +1,195 @@
+@import "tailwindcss" source(none);
+@import "./vendor/tw-animate.css";
+@import "./vendor/shadcn-tailwind.css";
+@import "./vendor/search-nova.css";
+
+@source "./**/*.tsx";
+@source not inline("md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2");
+@source inline("animate-spin");
+
+@custom-variant dark (&:is([data-theme="dark"] *));
+
+@layer base {
+  * {
+    border-color: var(--border);
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+
+  body {
+    background: var(--background);
+    color: var(--foreground);
+  }
+
+  a:active,
+  button:active {
+    opacity: 0.6;
+  }
+
+  @media (min-width: 48rem) {
+    a:active,
+    button:active {
+      opacity: 1;
+    }
+  }
+
+  :root {
+    --radius: 0.625rem;
+    --border-width: 1px;
+    --background: lab(100% 0 0);
+    --foreground: lab(0% 0 0);
+    --shell-foreground: lab(0% 0 0);
+    --card: lab(100% 0 0);
+    --card-foreground: lab(0% 0 0);
+    --popover: lab(100% 0 0);
+    --popover-foreground: lab(0% 0 0);
+    --primary: lab(0% 0 0);
+    --primary-foreground: lab(98.26% 0 0);
+    --secondary: lab(96.52% -0.0000298023 0.0000119209);
+    --secondary-foreground: lab(7.78201% -0.0000149012 0);
+    --muted: lab(96.52% -0.0000298023 0.0000119209);
+    --muted-foreground: lab(48.496% 0 0);
+    --accent: lab(96.52% -0.0000298023 0.0000119209);
+    --accent-foreground: lab(7.78201% -0.0000149012 0);
+    --destructive: lab(48.4493% 77.4328 61.5452);
+    --border: lab(90.952% 0 -0.0000119209);
+    --input: lab(90.952% 0 -0.0000119209);
+    --ring: lab(66.128% -0.0000298023 0.0000119209);
+    --chart-1: var(--color-blue-300);
+    --chart-2: var(--color-blue-500);
+    --chart-3: var(--color-blue-600);
+    --chart-4: var(--color-blue-700);
+    --chart-5: var(--color-blue-800);
+    --sidebar: lab(98.26% 0 0);
+    --sidebar-foreground: lab(0% 0 0);
+    --sidebar-primary: lab(7.78201% -0.0000149012 0);
+    --sidebar-primary-foreground: lab(98.26% 0 0);
+    --sidebar-accent: lab(96.52% -0.0000298023 0.0000119209);
+    --sidebar-accent-foreground: lab(7.78201% -0.0000149012 0);
+    --sidebar-border: lab(90.952% 0 -0.0000119209);
+    --sidebar-ring: lab(66.128% -0.0000298023 0.0000119209);
+    --code: lab(97.68% -0.0000298023 0.0000119209);
+    --code-foreground: lab(0% 0 0);
+    --code-highlight: lab(95.36% 0 0);
+    --code-number: lab(48.96% 0 0);
+    --code-syntax-foreground: #1f2328;
+    --code-syntax-comment: #6e7781;
+    --code-syntax-keyword: #cf222e;
+    --code-syntax-function: #8250df;
+    --code-syntax-tag: #116329;
+    --code-syntax-string: #0a3069;
+    --code-syntax-constant: #0550ae;
+    --code-syntax-variable: #953800;
+    --code-syntax-attribute: #0550ae;
+    --code-syntax-operator: #cf222e;
+    --code-syntax-tag-punctuation: #1f2328;
+  }
+
+  [data-theme="dark"] {
+    --background: lab(2.75381% 0 0);
+    --foreground: lab(98.26% 0 0);
+    --shell-foreground: lab(100% 0 0);
+    --card: lab(7.78201% -0.0000149012 0);
+    --card-foreground: lab(98.26% 0 0);
+    --popover: lab(7.78201% -0.0000149012 0);
+    --popover-foreground: lab(98.26% 0 0);
+    --primary: lab(90.952% 0 -0.0000119209);
+    --primary-foreground: lab(7.78201% -0.0000149012 0);
+    --secondary: lab(15.204% 0 -0.00000596046);
+    --secondary-foreground: lab(98.26% 0 0);
+    --muted: lab(15.204% 0 -0.00000596046);
+    --muted-foreground: lab(66.128% -0.0000298023 0.0000119209);
+    --accent: lab(27.036% 0 0);
+    --accent-foreground: lab(98.26% 0 0);
+    --destructive: lab(63.7053% 60.745 31.3109);
+    --border: lab(100% 0 0 / 10%);
+    --input: lab(100% 0 0 / 15%);
+    --ring: lab(48.496% 0 0);
+    --chart-1: var(--color-blue-300);
+    --chart-2: var(--color-blue-500);
+    --chart-3: var(--color-blue-600);
+    --chart-4: var(--color-blue-700);
+    --chart-5: var(--color-blue-800);
+    --sidebar: lab(7.78201% -0.0000149012 0);
+    --sidebar-foreground: lab(98.26% 0 0);
+    --sidebar-primary: lab(36.9089% 35.0961 -85.6872);
+    --sidebar-primary-foreground: lab(98.26% 0 0);
+    --sidebar-accent: lab(15.204% 0 -0.00000596046);
+    --sidebar-accent-foreground: lab(98.26% 0 0);
+    --sidebar-border: lab(100% 0 0 / 10%);
+    --sidebar-ring: lab(34.924% 0 0);
+    --code: lab(7.22637% -0.0000149012 0);
+    --code-foreground: lab(66.128% -0.0000298023 0.0000119209);
+    --code-highlight: lab(15.32% 0 0);
+    --code-number: lab(67.52% -0.0000298023 0);
+    --code-syntax-foreground: #fff;
+    --code-syntax-comment: rgb(139 139 139 / 58%);
+    --code-syntax-keyword: #a0a0a0;
+    --code-syntax-function: #ffc799;
+    --code-syntax-tag: #ffc799;
+    --code-syntax-string: #99ffe4;
+    --code-syntax-constant: #ffc799;
+    --code-syntax-variable: #fff;
+    --code-syntax-attribute: #a0a0a0;
+    --code-syntax-operator: #a0a0a0;
+    --code-syntax-tag-punctuation: #a0a0a0;
+  }
+}
+
+@theme inline {
+  --font-sans: Geist, "Pretendard Variable", "Geist Fallback", sans-serif;
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+  --text-xs--line-height: calc(var(--spacing) * 4);
+  --text-sm--line-height: calc(var(--spacing) * 5);
+  --text-base--line-height: calc(var(--spacing) * 6);
+  --text-lg--line-height: calc(var(--spacing) * 7);
+  --text-xl--line-height: calc(var(--spacing) * 7);
+  --text-2xl--line-height: calc(var(--spacing) * 8);
+  --text-3xl--line-height: calc(var(--spacing) * 9);
+  --text-4xl--line-height: calc(var(--spacing) * 10);
+  --text-5xl--line-height: calc(var(--spacing) * 12);
+  --text-6xl--line-height: calc(var(--spacing) * 15);
+  --text-7xl--line-height: calc(var(--spacing) * 18);
+  --text-8xl--line-height: calc(var(--spacing) * 24);
+  --text-9xl--line-height: calc(var(--spacing) * 32);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-xs: calc(var(--radius) - 6px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
diff --git a/packages/docusaurus-theme/src/theme/sidebar-contract.test.ts b/packages/docusaurus-theme/src/theme/sidebar-contract.test.ts
new file mode 100644
index 000000000..0887257cb
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/sidebar-contract.test.ts
@@ -0,0 +1,168 @@
+import fs from "fs";
+import path from "path";
+
+const read = (relativePath: string) =>
+  fs.readFileSync(path.join(__dirname, relativePath), "utf8");
+
+describe("official Base Nova Sidebar contract", () => {
+  it("vendors the complete composable Sidebar surface", () => {
+    const source = read("components/ui/sidebar.tsx");
+
+    expect(source).toContain('from "@base-ui/react/merge-props"');
+    for (const slot of [
+      "sidebar-wrapper",
+      "sidebar-content",
+      "sidebar-footer",
+      "sidebar-trigger",
+      "sidebar-menu-button",
+      "sidebar-menu-sub-button",
+    ]) {
+      expect(source).toMatch(new RegExp(`(?:data-slot=|slot: )"${slot}"`));
+    }
+    expect(source).toContain(
+      "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width)"
+    );
+  });
+
+  it("connects Docusaurus routing to official Sidebar composition", () => {
+    const layout = read("DocRoot/Layout/index.tsx");
+    const rootSidebar = read("DocRoot/Layout/Sidebar/index.tsx");
+    const desktop = read("DocSidebar/Desktop/index.tsx");
+    const desktopContent = read("DocSidebar/Desktop/Content/index.tsx");
+    const mobile = read("DocSidebar/Mobile/index.tsx");
+    const mobileLayout = read("Navbar/MobileSidebar/Layout/index.tsx");
+    const mobileHeader = read("Navbar/MobileSidebar/Header/index.tsx");
+    const mobilePrimary = read("Navbar/MobileSidebar/PrimaryMenu/index.tsx");
+    const mobileSecondary = read(
+      "Navbar/MobileSidebar/SecondaryMenu/index.tsx"
+    );
+    const link = read("DocSidebarItem/Link/index.tsx");
+    const category = read("DocSidebarItem/Category/index.tsx");
+
+    const mainLayout = read("DocRoot/Layout/Main/index.tsx");
+    const docItemLayout = read("DocItem/Layout/index.tsx");
+    const mobileHook = read("hooks/use-mobile.ts");
+
+    expect(layout).toContain(
+      '<main className="flex min-h-0 min-w-0 flex-1 flex-col"'
+    );
+    expect(layout).toContain(
+      'className="container-wrapper flex flex-1 flex-col px-2"'
+    );
+    expect(layout).toContain("<SidebarProvider");
+    expect(layout).toContain(
+      'className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--column-top-spacing:calc(var(--spacing)*6)] 3xl:fixed:container 3xl:fixed:px-3"'
+    );
+    expect(layout).toContain('"--sidebar-width": "18rem"');
+    expect(layout).toContain('"--sidebar-width-icon": "5rem"');
+    expect(rootSidebar).toContain('variant="sidebar"');
+    expect(rootSidebar).toContain('collapsible={hideable ? "icon" : "none"}');
+    expect(rootSidebar).toContain('className="theme-doc-sidebar-container"');
+    expect(rootSidebar).not.toContain("useDocsShellDesktop");
+    expect(rootSidebar).not.toContain("matchMedia");
+    expect(rootSidebar).toContain("<DocSidebarDesktop");
+    expect(rootSidebar).toContain("<DocSidebarMobile");
+    expect(rootSidebar).toContain(
+      'className="theme-doc-sidebar-desktop hidden lg:block"'
+    );
+    expect(rootSidebar).toContain(
+      "<ResetOnSidebarChange>\n      <DocSidebarMobile"
+    );
+    expect(rootSidebar).toContain(
+      'className="theme-doc-sidebar-desktop hidden lg:block"'
+    );
+    expect(rootSidebar).toContain('data-collapsed={state === "collapsed"}');
+    expect(mainLayout).not.toContain("<SidebarInset");
+    expect(mainLayout).toContain('data-slot="docs"');
+    expect(mainLayout).toContain('className="h-full w-full"');
+    expect(mainLayout).not.toContain("max-w-160");
+    // Docusaurus main must opt into min-width: 0 so official table cells with
+    // whitespace-nowrap stay contained inside docs instead of widening the 390px shell.
+    expect(layout).toContain(
+      '<main className="flex min-h-0 min-w-0 flex-1 flex-col"'
+    );
+    expect(docItemLayout).toContain(
+      'className="mx-auto flex w-full max-w-160 min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-foreground md:px-0 dark:text-foreground"'
+    );
+    expect(docItemLayout).toContain('"theme-doc-page__content"');
+    expect(docItemLayout).toContain('className="theme-doc-page__toc"');
+    expect(docItemLayout).not.toContain("useWindowSize");
+    expect(mobileHook).toContain("export const MOBILE_BREAKPOINT = 768;");
+    expect(desktop).toContain(
+      '<SidebarContent className="theme-doc-sidebar-content scroll-fade">'
+    );
+    expect(desktop).toContain(
+      '<SidebarFooter className="theme-doc-sidebar-footer">'
+    );
+    expect(desktop).toContain("<SidebarFooter");
+    expect(desktop).toContain("<SidebarTrigger");
+    expect(desktop).toContain('aria-keyshortcuts="Control+B Meta+B"');
+    expect(desktop).toContain("<TooltipContent");
+    expect(desktopContent).toContain("<SidebarGroup>");
+    expect(desktopContent).toContain("<SidebarMenu>");
+    expect(mobileLayout).toContain("<SidebarProvider");
+    expect(mobileLayout).toContain("theme-mobile-sidebar-content");
+    expect(mobileLayout).toContain('"--sidebar-width": "18rem"');
+    expect(mobileHeader).toContain("<SheetHeader>");
+    expect(mobilePrimary).toContain('<SidebarContent className="scroll-fade">');
+    expect(mobilePrimary).toContain("<SidebarGroup>");
+    expect(mobileSecondary).toContain(
+      '<SidebarContent className="scroll-fade">'
+    );
+    expect(mobileSecondary).toContain("<SidebarGroup>");
+    expect(mobileSecondary).toContain("<SidebarMenuButton");
+    expect(mobile).toContain("<SidebarMenu>");
+    expect(link).toContain("<SidebarMenuButton");
+    expect(link).toContain("<SidebarMenuSubButton");
+    expect(category).toContain("components/ui/collapsible");
+    expect(category).toContain('className="group/collapsible"');
+    expect(category).toContain("<SidebarMenuSub>");
+    expect(category).toContain("useVisibleSidebarItems");
+    expect(category).toContain("findFirstSidebarItemLink");
+    expect(category).toContain("useDocSidebarItemsExpandedState");
+    expect(category).toContain("isCurrentPage");
+    expect(category).toContain("item.collapsed");
+    expect(category).toContain("autoCollapseCategories");
+  });
+
+  it("keeps the desktop LNB sticky within the main/footer boundary", () => {
+    const css = read("base.scss");
+    const rootSidebar = read("DocRoot/Layout/Sidebar/index.tsx");
+
+    expect(css).toMatch(
+      /\.theme-doc-sidebar-desktop \{[\s\S]*position: sticky;[\s\S]*top: var\(--ifm-navbar-height\);[\s\S]*height: calc\(100svh - var\(--ifm-navbar-height\)\);/
+    );
+    expect(css).toMatch(
+      /\.theme-doc-sidebar-desktop > :first-child \{[\s\S]*height: 100%;/
+    );
+    expect(css).toMatch(
+      /\.theme-doc-sidebar-container \{[\s\S]*position: static !important;[\s\S]*height: 100% !important;/
+    );
+    expect(rootSidebar).toContain('data-collapsed={state === "collapsed"}');
+    expect(css).toContain(
+      '.container-wrapper:has(.theme-doc-sidebar-desktop[data-collapsed="true"])'
+    );
+  });
+
+  it("aligns the desktop LNB to the centered GNB shell", () => {
+    const css = read("base.scss");
+
+    expect(css).toMatch(
+      /\.theme-doc-root-layout > main > \.container-wrapper \{[\s\S]*max-width: var\(--theme-shell-max-width\);[\s\S]*margin-inline: auto;/
+    );
+    expect(css).toMatch(
+      /\.theme-doc-sidebar-container \{[\s\S]*inset: auto !important;/
+    );
+    expect(css).toMatch(
+      /\.theme-doc-sidebar-desktop\s+\[data-state="expanded"\][\s\S]*\.theme-doc-sidebar-content[\s\S]*padding-top: calc\([\s\S]*var\(--column-top-spacing\) - calc\(var\(--spacing\) \* 3\.5\)[\s\S]*padding-left: calc\(var\(--spacing\) \* 2\);/
+    );
+  });
+
+  it("does not generate an unused scroll-fade compatibility surface", () => {
+    const toc = read("DocItem/TOC/Desktop/index.tsx");
+    const css = read("shadcn.css");
+
+    expect(toc).not.toContain("scroll-fade-y");
+    expect(css).toContain('@source "./**/*.tsx"');
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/style-contract.test.ts b/packages/docusaurus-theme/src/theme/style-contract.test.ts
new file mode 100644
index 000000000..2198ad9e6
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/style-contract.test.ts
@@ -0,0 +1,69 @@
+import fs from "fs";
+import path from "path";
+
+function listStyles(directory: string): string[] {
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const entryPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) return listStyles(entryPath);
+    return entry.name.endsWith(".scss") || entry.name.endsWith(".css")
+      ? [entryPath]
+      : [];
+  });
+}
+
+it("does not render nested borders around the DocSearch escape key", () => {
+  const docSearchStyles = fs.readFileSync(
+    path.join(__dirname, "adapters", "_docsearch.scss"),
+    "utf8"
+  );
+
+  expect(docSearchStyles).not.toMatch(
+    /\.DocSearch-Commands-Key,\s*\.DocSearch-Escape-Key/
+  );
+});
+
+it("separates official component CSS from docs-only adapters", () => {
+  const stylesheet = listStyles(__dirname)
+    .filter((file) => !file.includes(`${path.sep}vendor${path.sep}`))
+    .filter((file) => path.basename(file) !== "shadcn.css")
+    .map((file) => fs.readFileSync(file, "utf8"))
+    .join("\n");
+
+  expect(stylesheet).not.toMatch(/--(?:openapi|opeanpi|docs|api)-/);
+  expect(stylesheet).not.toMatch(
+    /#[\da-f]{3,8}\b|\b(?:rgb|hsl)a?\(|:\s*(?:white|black)\b/i
+  );
+  for (const slot of [
+    "button",
+    "accordion",
+    "tabs",
+    "card",
+    "alert",
+    "table",
+  ]) {
+    expect(stylesheet).not.toContain(`[data-slot="${slot}"] {`);
+  }
+  expect(stylesheet).toContain("var(--spacing)");
+
+  const shadcn = fs.readFileSync(path.join(__dirname, "shadcn.css"), "utf8");
+  expect(shadcn).toContain("--background: lab(100% 0 0)");
+  expect(shadcn).toContain("--radius: 0.625rem");
+});
+
+it("normalizes the official scroll-fade fallback for consumer PostCSS", () => {
+  const normalizer = fs.readFileSync(
+    path.resolve(__dirname, "../../scripts/normalize-tailwind-css.mjs"),
+    "utf8"
+  );
+
+  expect(normalizer).toContain("scrollFadeFallback");
+  expect(normalizer).toContain('"var(--scroll-fade-reveal,6rem)"');
+});
+
+it("keeps the shared stylesheet docs-only", () => {
+  const styles = fs.readFileSync(path.join(__dirname, "styles.scss"), "utf8");
+
+  expect(styles).toContain('@use "./base";');
+  expect(styles).toContain('@use "./adapters/docsearch";');
+  expect(styles).not.toMatch(/ApiExplorer|ApiTabs|CodeSamples|Schema/i);
+});
diff --git a/packages/docusaurus-theme/src/theme/styles.scss b/packages/docusaurus-theme/src/theme/styles.scss
new file mode 100644
index 000000000..d2698a9bc
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/styles.scss
@@ -0,0 +1,13 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+@use "./base";
+@use "./adapters/docsearch";
+
+.docs-wrapper {
+  height: 100%;
+}
diff --git a/packages/docusaurus-theme/src/theme/toc-contract.test.ts b/packages/docusaurus-theme/src/theme/toc-contract.test.ts
new file mode 100644
index 000000000..daf902d34
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/toc-contract.test.ts
@@ -0,0 +1,61 @@
+import fs from "fs";
+import path from "path";
+
+const read = (relativePath: string) =>
+  fs.readFileSync(path.join(__dirname, relativePath), "utf8");
+
+describe("desktop TOC parity contract", () => {
+  it("renders the live shadcn right-rail structure in the desktop adapter", () => {
+    const source = read("DocItem/TOC/Desktop/index.tsx");
+
+    expect(source).toContain('from "@theme/TOCItems"');
+    expect(source).not.toContain('from "@theme/TOC"');
+    expect(source).toContain(
+      'className="theme-doc-toc-desktop flex min-h-0 flex-1 flex-col gap-4"'
+    );
+    expect(source).toContain('className="h-(--top-spacing) shrink-0"');
+    expect(source).toContain(
+      'className="theme-doc-toc-desktop__body flex min-h-0 flex-1 flex-col px-8"'
+    );
+    expect(source).toContain(
+      'className="theme-doc-toc-desktop__scroll flex min-h-0 flex-1 scroll-fade scrollbar-none flex-col overflow-y-auto"'
+    );
+    expect(source).toContain(
+      'className="theme-doc-toc-desktop__list flex flex-col p-4 pt-0 text-sm"'
+    );
+    expect(source).not.toContain("theme-doc-toc-desktop__header");
+    expect(source).not.toContain("On This Page");
+    expect(source).toContain("linkClassName={LINK_CLASS_NAME}");
+    expect(source).toContain("linkActiveClassName={LINK_ACTIVE_CLASS_NAME}");
+  });
+
+  it("preserves semantic nested lists while exposing live depth hooks", () => {
+    const source = read("TOCItems/Tree.tsx");
+
+    expect(source).toContain(
+      'className={isChild ? "table-of-contents__sublist" : className}'
+    );
+    expect(source).toContain('className="table-of-contents__item"');
+    expect(source).toContain("data-depth={heading.level}");
+    expect(source).toContain("<HeadingLabel html={heading.value} />");
+  });
+
+  it("moves stickiness to the outer rail and matches live depth spacing", () => {
+    const css = read("base.scss");
+
+    expect(css).toContain(".theme-doc-page__toc {");
+    expect(css).toContain("position: sticky;");
+    expect(css).toContain("top: var(--ifm-navbar-height);");
+    expect(css).toContain("height: calc(100svh - var(--ifm-navbar-height));");
+    expect(css).toMatch(
+      /\.theme-doc-toc-desktop__body \{[\s\S]*padding-top: calc\([\s\S]*var\(--column-top-spacing\) - calc\(var\(--spacing\) \* 4\)/
+    );
+    expect(css).toContain(".theme-doc-toc-desktop__scroll {");
+    expect(css).toContain('.table-of-contents__link[data-depth="3"]');
+    expect(css).toContain("padding-left: calc(var(--spacing) * 4);");
+    expect(css).toContain('.table-of-contents__link[data-depth="4"]');
+    expect(css).toContain("padding-left: calc(var(--spacing) * 6);");
+    expect(css).toContain(".table-of-contents__link:hover");
+    expect(css).toContain(".table-of-contents__link--active");
+  });
+});
diff --git a/packages/docusaurus-theme/src/theme/translationIds.ts b/packages/docusaurus-theme/src/theme/translationIds.ts
new file mode 100644
index 000000000..ae4e51376
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/translationIds.ts
@@ -0,0 +1,45 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+/*
+ * The central dictionary of translation-id constants that used to live here
+ * (OPENAPI_REQUEST, OPENAPI_SCHEMA_ITEM, ...) has been removed. Each
+ * `translate({ id, message })` / `<Translate id="...">` call site now passes
+ * its id as an inline string literal instead.
+ *
+ * WHY THE DICTIONARY WAS REMOVED
+ * ------------------------------
+ * `docusaurus write-translations` only performs STATIC analysis of the source
+ * code (via @docusaurus/babel) — it never runs the site. To collect a string
+ * it evaluates the argument of every `translate()` / `<Translate>` call with
+ * Babel's `path.evaluate()` and keeps it only when the result is `confident`.
+ *
+ * An id referenced through an imported constant, e.g.
+ *
+ *     import { OPENAPI_REQUEST } from "@theme/translationIds";
+ *     translate({ id: OPENAPI_REQUEST.COLLAPSE_ALL, message: "Collapse all" });
+ *
+ * is a member expression on a binding imported from another module. Babel
+ * cannot statically resolve a cross-module binding, so `evaluate()` returns
+ * `confident === false`, the extractor skips the call (emitting a warning), and
+ * NOTHING is written to the locale `code.json`. As a result `write-translations`
+ * produced an empty template and downstream projects had no ids to translate,
+ * even though the strings rendered fine at runtime (the inlined constant value
+ * matched the runtime lookup key).
+ *
+ * The id and message must therefore be static string literals AT THE CALL SITE.
+ * This is the approach Docusaurus' own theme-classic uses and what its i18n
+ * guide mandates ("Text labels must be static"):
+ *
+ *   - https://docusaurus.io/docs/i18n/tutorial#translate-your-react-code
+ *   - https://docusaurus.io/docs/docusaurus-core#translate
+ *
+ * Keep this note here so the removal of the constants is discoverable; do not
+ * reintroduce a shared id dictionary for `translate()` arguments.
+ */
+
+export {};
diff --git a/packages/docusaurus-theme/src/theme/utils/cn.ts b/packages/docusaurus-theme/src/theme/utils/cn.ts
new file mode 100644
index 000000000..365058ceb
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/utils/cn.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/docusaurus-theme/src/theme/utils/codeBlockUtils.ts b/packages/docusaurus-theme/src/theme/utils/codeBlockUtils.ts
new file mode 100644
index 000000000..df830d5dc
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/utils/codeBlockUtils.ts
@@ -0,0 +1,296 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored subset of @docusaurus/theme-common/src/utils/codeBlockUtils.tsx (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import type { CSSProperties } from "react";
+
+import rangeParser from "parse-numeric-range";
+import type { PrismTheme, PrismThemeEntry } from "prism-react-renderer";
+
+const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
+const metastringLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
+
+const popularCommentPatterns = {
+  js: { start: "\\/\\/", end: "" },
+  jsBlock: { start: "\\/\\*", end: "\\*\\/" },
+  jsx: { start: "\\{\\s*\\/\\*", end: "\\*\\/\\s*\\}" },
+  bash: { start: "#", end: "" },
+  html: { start: "<!--", end: "-->" },
+} as const;
+
+const commentPatterns = {
+  ...popularCommentPatterns,
+  lua: { start: "--", end: "" },
+  wasm: { start: "\\;\\;", end: "" },
+  tex: { start: "%", end: "" },
+  vb: { start: "['‘’]", end: "" },
+  vbnet: { start: "(?:_\\s*)?['‘’]", end: "" },
+  rem: { start: "[Rr][Ee][Mm]\\b", end: "" },
+  f90: { start: "!", end: "" },
+  ml: { start: "\\(\\*", end: "\\*\\)" },
+  cobol: { start: "\\*>", end: "" },
+} as const;
+
+type CommentType = keyof typeof commentPatterns;
+const popularCommentTypes = Object.keys(
+  popularCommentPatterns
+) as CommentType[];
+
+export type MagicCommentConfig = {
+  className: string;
+  line?: string;
+  block?: { start: string; end: string };
+};
+
+function getCommentPattern(
+  languages: CommentType[],
+  magicCommentDirectives: MagicCommentConfig[]
+) {
+  const commentPattern = languages
+    .map((lang) => {
+      const { start, end } = commentPatterns[lang];
+      return `(?:${start}\\s*(${magicCommentDirectives
+        .flatMap((d) => [d.line, d.block?.start, d.block?.end].filter(Boolean))
+        .join("|")})\\s*${end})`;
+    })
+    .join("|");
+  return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
+}
+
+function getAllMagicCommentDirectiveStyles(
+  lang: string,
+  magicCommentDirectives: MagicCommentConfig[]
+) {
+  switch (lang) {
+    case "js":
+    case "javascript":
+    case "ts":
+    case "typescript":
+      return getCommentPattern(["js", "jsBlock"], magicCommentDirectives);
+
+    case "jsx":
+    case "tsx":
+      return getCommentPattern(
+        ["js", "jsBlock", "jsx"],
+        magicCommentDirectives
+      );
+
+    case "html":
+      return getCommentPattern(
+        ["js", "jsBlock", "html"],
+        magicCommentDirectives
+      );
+
+    case "python":
+    case "py":
+    case "bash":
+      return getCommentPattern(["bash"], magicCommentDirectives);
+
+    case "markdown":
+    case "md":
+      return getCommentPattern(["html", "jsx", "bash"], magicCommentDirectives);
+
+    case "tex":
+    case "latex":
+    case "matlab":
+      return getCommentPattern(["tex"], magicCommentDirectives);
+
+    case "lua":
+    case "haskell":
+      return getCommentPattern(["lua"], magicCommentDirectives);
+
+    case "sql":
+      return getCommentPattern(["lua", "jsBlock"], magicCommentDirectives);
+
+    case "wasm":
+      return getCommentPattern(["wasm"], magicCommentDirectives);
+
+    case "vb":
+    case "vba":
+    case "visual-basic":
+      return getCommentPattern(["vb", "rem"], magicCommentDirectives);
+    case "vbnet":
+      return getCommentPattern(["vbnet", "rem"], magicCommentDirectives);
+
+    case "batch":
+      return getCommentPattern(["rem"], magicCommentDirectives);
+
+    case "basic":
+      return getCommentPattern(["rem", "f90"], magicCommentDirectives);
+
+    case "fsharp":
+      return getCommentPattern(["js", "ml"], magicCommentDirectives);
+
+    case "ocaml":
+    case "sml":
+      return getCommentPattern(["ml"], magicCommentDirectives);
+
+    case "fortran":
+      return getCommentPattern(["f90"], magicCommentDirectives);
+
+    case "cobol":
+      return getCommentPattern(["cobol"], magicCommentDirectives);
+
+    default:
+      return getCommentPattern(popularCommentTypes, magicCommentDirectives);
+  }
+}
+
+export function parseCodeBlockTitle(metastring?: string): string {
+  return metastring?.match(codeBlockTitleRegex)?.groups!.title ?? "";
+}
+
+export function containsLineNumbers(metastring?: string): boolean {
+  return Boolean(metastring?.includes("showLineNumbers"));
+}
+
+type ParseCodeLinesParam = {
+  metastring: string | undefined;
+  language: string | undefined;
+  magicComments: MagicCommentConfig[];
+};
+
+type CodeLineClassNames = { [lineIndex: number]: string[] };
+
+type ParsedCodeLines = {
+  code: string;
+  lineClassNames: CodeLineClassNames;
+};
+
+function parseCodeLinesFromMetastring(
+  code: string,
+  { metastring, magicComments }: ParseCodeLinesParam
+): ParsedCodeLines | null {
+  if (metastring && metastringLinesRangeRegex.test(metastring)) {
+    const linesRange = metastring.match(metastringLinesRangeRegex)!.groups!
+      .range!;
+    if (magicComments.length === 0) {
+      throw new Error(
+        `A highlight range has been given in code block's metastring (\`\`\` ${metastring}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`
+      );
+    }
+    const metastringRangeClassName = magicComments[0]!.className;
+    const lines = rangeParser(linesRange)
+      .filter((n) => n > 0)
+      .map((n) => [n - 1, [metastringRangeClassName]] as [number, string[]]);
+    return { lineClassNames: Object.fromEntries(lines), code };
+  }
+  return null;
+}
+
+function parseCodeLinesFromContent(
+  code: string,
+  params: ParseCodeLinesParam
+): ParsedCodeLines {
+  const { language, magicComments } = params;
+  if (language === undefined) {
+    return { lineClassNames: {}, code };
+  }
+  const directiveRegex = getAllMagicCommentDirectiveStyles(
+    language,
+    magicComments
+  );
+  const lines = code.split(/\r?\n/);
+  const blocks = Object.fromEntries(
+    magicComments.map((d) => [d.className, { start: 0, range: "" }])
+  );
+  const lineToClassName: { [comment: string]: string } = Object.fromEntries(
+    magicComments
+      .filter((d) => d.line)
+      .map(({ className, line }) => [line!, className] as [string, string])
+  );
+  const blockStartToClassName: { [comment: string]: string } =
+    Object.fromEntries(
+      magicComments
+        .filter((d) => d.block)
+        .map(({ className, block }) => [block!.start, className])
+    );
+  const blockEndToClassName: { [comment: string]: string } = Object.fromEntries(
+    magicComments
+      .filter((d) => d.block)
+      .map(({ className, block }) => [block!.end, className])
+  );
+  for (let lineNumber = 0; lineNumber < lines.length; ) {
+    const line = lines[lineNumber]!;
+    const match = line.match(directiveRegex);
+    if (!match) {
+      lineNumber += 1;
+      continue;
+    }
+    const directive = match
+      .slice(1)
+      .find((item: string | undefined) => item !== undefined)!;
+    if (lineToClassName[directive]) {
+      blocks[lineToClassName[directive]!]!.range += `${lineNumber},`;
+    } else if (blockStartToClassName[directive]) {
+      blocks[blockStartToClassName[directive]!]!.start = lineNumber;
+    } else if (blockEndToClassName[directive]) {
+      blocks[blockEndToClassName[directive]!]!.range += `${
+        blocks[blockEndToClassName[directive]!]!.start
+      }-${lineNumber - 1},`;
+    }
+    lines.splice(lineNumber, 1);
+  }
+
+  const lineClassNames: { [lineIndex: number]: string[] } = {};
+  Object.entries(blocks).forEach(([className, { range }]) => {
+    rangeParser(range).forEach((l) => {
+      lineClassNames[l] ??= [];
+      lineClassNames[l]!.push(className);
+    });
+  });
+
+  return { code: lines.join("\n"), lineClassNames };
+}
+
+export function parseLines(
+  code: string,
+  params: ParseCodeLinesParam
+): ParsedCodeLines {
+  const newCode = code.replace(/\r?\n$/, "");
+  return (
+    parseCodeLinesFromMetastring(newCode, { ...params }) ??
+    parseCodeLinesFromContent(newCode, { ...params })
+  );
+}
+
+function parseClassNameLanguage(
+  className: string | undefined
+): string | undefined {
+  if (!className) {
+    return undefined;
+  }
+  const languageClassName = className
+    .split(" ")
+    .find((str) => str.startsWith("language-"));
+  return languageClassName?.replace(/language-/, "");
+}
+
+// Upstream renamed `parseLanguage` to `parseClassNameLanguage`; the back-compat
+// shim in @docusaurus/theme-common/internal re-exports it under the old name.
+// We keep the old name here since our call sites still use it.
+export { parseClassNameLanguage as parseLanguage };
+
+export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
+  const mapping: PrismThemeEntry = {
+    color: "--prism-color",
+    backgroundColor: "--prism-background-color",
+  };
+
+  const properties: { [key: string]: string } = {};
+  Object.entries(prismTheme.plain).forEach(([key, value]) => {
+    const varName = mapping[key as keyof PrismThemeEntry];
+    if (varName && typeof value === "string") {
+      properties[varName] = value;
+    }
+  });
+  return properties;
+}
diff --git a/packages/docusaurus-theme/src/theme/utils/reactUtils.ts b/packages/docusaurus-theme/src/theme/utils/reactUtils.ts
new file mode 100644
index 000000000..29336a887
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/utils/reactUtils.ts
@@ -0,0 +1,22 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/utils/reactUtils.tsx (MIT).
+ * Only useShallowMemoObject is kept here — it is not re-exported by
+ * @docusaurus/theme-common (public or /internal). useEvent and
+ * ReactContextError are public APIs imported directly from the package.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import { useMemo } from "react";
+
+export function useShallowMemoObject<O extends object>(obj: O): O {
+  const deps = Object.entries(obj);
+  deps.sort((a, b) => a[0].localeCompare(b[0]));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => obj, deps.flat());
+}
diff --git a/packages/docusaurus-theme/src/theme/utils/scrollUtils.tsx b/packages/docusaurus-theme/src/theme/utils/scrollUtils.tsx
new file mode 100644
index 000000000..d990104d2
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/utils/scrollUtils.tsx
@@ -0,0 +1,151 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored subset of @docusaurus/theme-common/src/utils/scrollUtils.tsx (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal. Only the
+ * ScrollControllerProvider + useScrollPositionBlocker surface is kept, since
+ * that's all the docs tab renderer needs. The ScrollControllerProvider must
+ * be mounted above consumers of useScrollPositionBlocker.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react";
+
+import useIsomorphicLayoutEffect from "@docusaurus/useIsomorphicLayoutEffect";
+import { ReactContextError } from "@docusaurus/theme-common";
+
+type ScrollController = {
+  scrollEventsEnabledRef: React.RefObject<boolean>;
+  enableScrollEvents: () => void;
+  disableScrollEvents: () => void;
+};
+
+function useScrollControllerContextValue(): ScrollController {
+  const scrollEventsEnabledRef = useRef(true);
+
+  return useMemo(
+    () => ({
+      scrollEventsEnabledRef,
+      enableScrollEvents: () => {
+        scrollEventsEnabledRef.current = true;
+      },
+      disableScrollEvents: () => {
+        scrollEventsEnabledRef.current = false;
+      },
+    }),
+    []
+  );
+}
+
+const ScrollMonitorContext = React.createContext<ScrollController | undefined>(
+  undefined
+);
+
+export function ScrollControllerProvider({
+  children,
+}: {
+  children: ReactNode;
+}): ReactNode {
+  const value = useScrollControllerContextValue();
+  return (
+    <ScrollMonitorContext.Provider value={value}>
+      {children}
+    </ScrollMonitorContext.Provider>
+  );
+}
+
+function useScrollController(): ScrollController {
+  const context = useContext(ScrollMonitorContext);
+  if (context == null) {
+    throw new ReactContextError("ScrollControllerProvider");
+  }
+  return context;
+}
+
+type UseScrollPositionSaver = {
+  save: (elem: HTMLElement) => void;
+  restore: () => { restored: boolean };
+};
+
+function useScrollPositionSaver(): UseScrollPositionSaver {
+  const lastElementRef = useRef<{ elem: HTMLElement | null; top: number }>({
+    elem: null,
+    top: 0,
+  });
+
+  const save = useCallback((elem: HTMLElement) => {
+    lastElementRef.current = {
+      elem,
+      top: elem.getBoundingClientRect().top,
+    };
+  }, []);
+
+  const restore = useCallback(() => {
+    const {
+      current: { elem, top },
+    } = lastElementRef;
+    if (!elem) {
+      return { restored: false };
+    }
+    const newTop = elem.getBoundingClientRect().top;
+    const heightDiff = newTop - top;
+    if (heightDiff) {
+      window.scrollBy({ left: 0, top: heightDiff });
+    }
+    lastElementRef.current = { elem: null, top: 0 };
+
+    return { restored: heightDiff !== 0 };
+  }, []);
+
+  return useMemo(() => ({ save, restore }), [restore, save]);
+}
+
+export function useScrollPositionBlocker(): {
+  blockElementScrollPositionUntilNextRender: (el: HTMLElement) => void;
+} {
+  const scrollController = useScrollController();
+  const scrollPositionSaver = useScrollPositionSaver();
+
+  const nextLayoutEffectCallbackRef = useRef<(() => void) | undefined>(
+    undefined
+  );
+
+  const blockElementScrollPositionUntilNextRender = useCallback(
+    (el: HTMLElement) => {
+      scrollPositionSaver.save(el);
+      scrollController.disableScrollEvents();
+      nextLayoutEffectCallbackRef.current = () => {
+        const { restored } = scrollPositionSaver.restore();
+        nextLayoutEffectCallbackRef.current = undefined;
+
+        if (restored) {
+          const handleScrollRestoreEvent = () => {
+            scrollController.enableScrollEvents();
+            window.removeEventListener("scroll", handleScrollRestoreEvent);
+          };
+          window.addEventListener("scroll", handleScrollRestoreEvent);
+        } else {
+          scrollController.enableScrollEvents();
+        }
+      };
+    },
+    [scrollController, scrollPositionSaver]
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    queueMicrotask(() => nextLayoutEffectCallbackRef.current?.());
+  });
+
+  return {
+    blockElementScrollPositionUntilNextRender,
+  };
+}
diff --git a/packages/docusaurus-theme/src/theme/utils/tabsUtils.tsx b/packages/docusaurus-theme/src/theme/utils/tabsUtils.tsx
new file mode 100644
index 000000000..34ceb3412
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/utils/tabsUtils.tsx
@@ -0,0 +1,328 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/utils/tabsUtils.tsx (MIT) to
+ * remove the dependency on @docusaurus/theme-common/internal. The
+ * useQueryStringValue dependency from theme-common's historyUtils is inlined
+ * below to avoid pulling another internal module.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, {
+  createContext,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { useHistory } from "@docusaurus/router";
+import { duplicates, useStorageSlot } from "@docusaurus/theme-common";
+import useIsomorphicLayoutEffect from "@docusaurus/useIsomorphicLayoutEffect";
+
+import { ScrollControllerProvider } from "./scrollUtils";
+
+export interface TabValue {
+  readonly value: string;
+  readonly label?: string;
+  readonly attributes?: { [key: string]: unknown };
+  readonly default?: boolean;
+}
+
+export interface TabsProps {
+  readonly lazy?: boolean;
+  readonly block?: boolean;
+  readonly children: ReactNode;
+  readonly defaultValue?: string | null;
+  readonly values?: readonly TabValue[];
+  readonly groupId?: string;
+  readonly className?: string;
+  readonly queryString?: string | boolean;
+}
+
+// Preserves the historical Docusaurus-compatible shape with an optional
+// `length` field.
+export interface TabProps extends TabsProps {
+  length?: number;
+}
+
+export interface TabItemProps {
+  readonly children: ReactNode;
+  readonly value: string;
+  readonly default?: boolean;
+  readonly label?: string;
+  readonly className?: string;
+  readonly attributes?: { [key: string]: unknown };
+}
+
+export function sanitizeTabsChildren(children: ReactNode): ReactNode {
+  return React.Children.toArray(children).filter((child) => child !== "\n");
+}
+
+function extractChildrenTabValues(children: ReactNode): TabValue[] {
+  function isTabItemWithValueProp(
+    comp: ReactElement
+  ): comp is ReactElement<TabItemProps> {
+    const { props } = comp;
+    return !!props && typeof props === "object" && "value" in props;
+  }
+
+  const elements = React.Children.toArray(children).flatMap((child) => {
+    if (!child) {
+      return [];
+    }
+    if (isValidElement(child) && isTabItemWithValueProp(child)) {
+      return [child];
+    }
+    const badChildTypeName =
+      // @ts-expect-error: guarding against unexpected cases
+      typeof child.type === "string" ? child.type : child.type.name;
+    throw new Error(
+      `Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
+If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`
+    );
+  });
+
+  return elements.map(
+    ({ props: { value, label, attributes, default: isDefault } }) => ({
+      value,
+      label,
+      attributes,
+      default: isDefault,
+    })
+  );
+}
+
+function ensureNoDuplicateValue(values: readonly TabValue[]) {
+  const dup = duplicates(values, (a, b) => a.value === b.value);
+  if (dup.length > 0) {
+    throw new Error(
+      `Docusaurus error: Duplicate values "${dup
+        .map((a) => `'${a.value}'`)
+        .join(", ")}" found in <Tabs>. Every value needs to be unique.`
+    );
+  }
+}
+
+function useTabValues(
+  props: Pick<TabsProps, "values" | "children">
+): readonly TabValue[] {
+  const { values: valuesProp, children } = props;
+  return useMemo(() => {
+    const values = valuesProp ?? extractChildrenTabValues(children);
+    ensureNoDuplicateValue(values);
+    return values;
+  }, [valuesProp, children]);
+}
+
+function isValidValue({
+  value,
+  tabValues,
+}: {
+  value: string | null | undefined;
+  tabValues: readonly TabValue[];
+}) {
+  return tabValues.some((a) => a.value === value);
+}
+
+function getInitialStateValue({
+  defaultValue,
+  tabValues,
+}: {
+  defaultValue: TabsProps["defaultValue"];
+  tabValues: readonly TabValue[];
+}): string {
+  if (tabValues.length === 0) {
+    throw new Error(
+      "Docusaurus error: the <Tabs> component requires at least one <TabItem> children component"
+    );
+  }
+  if (defaultValue) {
+    if (!isValidValue({ value: defaultValue, tabValues })) {
+      throw new Error(
+        `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${tabValues
+          .map((a) => a.value)
+          .join(
+            ", "
+          )}. If you intend to show no default tab, use defaultValue={null} instead.`
+      );
+    }
+    return defaultValue;
+  }
+  const defaultTabValue =
+    tabValues.find((tabValue) => tabValue.default) ?? tabValues[0];
+  if (!defaultTabValue) {
+    throw new Error("Unexpected error: 0 tabValues");
+  }
+  return defaultTabValue.value;
+}
+
+function getStorageKey(groupId: string | undefined) {
+  if (!groupId) {
+    return null;
+  }
+  return `docusaurus.tab.${groupId}`;
+}
+
+function getQueryStringKey({
+  queryString = false,
+  groupId,
+}: Pick<TabsProps, "queryString" | "groupId">) {
+  if (typeof queryString === "string") {
+    return queryString;
+  }
+  if (queryString === false) {
+    return null;
+  }
+  if (queryString === true && !groupId) {
+    throw new Error(
+      `Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".`
+    );
+  }
+  return groupId ?? null;
+}
+
+// Inlined from @docusaurus/theme-common/internal historyUtils.useQueryStringValue
+function useQueryStringValue(key: string | null): string | null {
+  const history = useHistory();
+  return useSyncExternalStore(
+    history.listen,
+    () =>
+      key === null
+        ? null
+        : new URLSearchParams(history.location.search).get(key),
+    () => null
+  );
+}
+
+function useTabQueryString({
+  queryString = false,
+  groupId,
+}: Pick<TabsProps, "queryString" | "groupId">) {
+  const history = useHistory();
+  const key = getQueryStringKey({ queryString, groupId });
+  const value = useQueryStringValue(key);
+
+  const setValue = useCallback(
+    (newValue: string) => {
+      if (!key) {
+        return;
+      }
+      const searchParams = new URLSearchParams(history.location.search);
+      searchParams.set(key, newValue);
+      history.replace({ ...history.location, search: searchParams.toString() });
+    },
+    [key, history]
+  );
+
+  return [value, setValue] as const;
+}
+
+function useTabStorage({ groupId }: Pick<TabsProps, "groupId">) {
+  const key = getStorageKey(groupId);
+  const [value, storageSlot] = useStorageSlot(key);
+
+  const setValue = useCallback(
+    (newValue: string) => {
+      if (!key) {
+        return;
+      }
+      storageSlot.set(newValue);
+    },
+    [key, storageSlot]
+  );
+
+  return [value, setValue] as const;
+}
+
+type TabsContextValue = {
+  selectedValue: string;
+  selectValue: (value: string) => void;
+  tabValues: readonly TabValue[];
+  lazy: boolean;
+  block: boolean;
+};
+
+export function useTabsContextValue(props: TabsProps): TabsContextValue {
+  const { defaultValue, queryString = false, groupId } = props;
+  const tabValues = useTabValues(props);
+
+  const [selectedValue, setSelectedValue] = useState(() =>
+    getInitialStateValue({ defaultValue, tabValues })
+  );
+
+  const [queryStringValue, setQueryString] = useTabQueryString({
+    queryString,
+    groupId,
+  });
+
+  const [storageValue, setStorageValue] = useTabStorage({
+    groupId,
+  });
+
+  const valueToSync = (() => {
+    const value = queryStringValue ?? storageValue;
+    if (!isValidValue({ value, tabValues })) {
+      return null;
+    }
+    return value;
+  })();
+
+  useIsomorphicLayoutEffect(() => {
+    if (valueToSync) {
+      setSelectedValue(valueToSync);
+    }
+  }, [valueToSync]);
+
+  const selectValue = useCallback(
+    (newValue: string) => {
+      if (!isValidValue({ value: newValue, tabValues })) {
+        throw new Error(`Can't select invalid tab value=${newValue}`);
+      }
+      setSelectedValue(newValue);
+      setQueryString(newValue);
+      setStorageValue(newValue);
+    },
+    [setQueryString, setStorageValue, tabValues]
+  );
+
+  return {
+    selectedValue,
+    selectValue,
+    tabValues,
+    lazy: props.lazy ?? false,
+    block: props.block ?? false,
+  };
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+export function useTabs(): TabsContextValue {
+  const contextValue = React.useContext(TabsContext);
+  if (!contextValue) {
+    throw new Error("useTabsContext() must be used within a Tabs component");
+  }
+  return contextValue;
+}
+
+export function TabsProvider(props: {
+  children: ReactNode;
+  value: TabsContextValue;
+}): ReactNode {
+  // Keep scroll-position blocking available to the swizzled @theme/Tabs
+  // without requiring callers to mount another provider.
+  return (
+    <ScrollControllerProvider>
+      <TabsContext.Provider value={props.value}>
+        {props.children}
+      </TabsContext.Provider>
+    </ScrollControllerProvider>
+  );
+}
diff --git a/packages/docusaurus-theme/src/theme/utils/useCodeWordWrap.ts b/packages/docusaurus-theme/src/theme/utils/useCodeWordWrap.ts
new file mode 100644
index 000000000..820f4d801
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/utils/useCodeWordWrap.ts
@@ -0,0 +1,110 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/hooks/useCodeWordWrap.ts (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { RefObject } from "react";
+
+import { useMutationObserver } from "./useMutationObserver";
+
+// Callback fires when the "hidden" attribute of a tabpanel changes
+// See https://github.com/facebook/docusaurus/pull/7485
+function useTabBecameVisibleCallback(
+  codeBlockRef: RefObject<HTMLPreElement | null>,
+  callback: () => void
+) {
+  const [hiddenTabElement, setHiddenTabElement] = useState<
+    Element | null | undefined
+  >();
+
+  const updateHiddenTabElement = useCallback(() => {
+    setHiddenTabElement(
+      codeBlockRef.current?.closest("[role=tabpanel][hidden]")
+    );
+  }, [codeBlockRef, setHiddenTabElement]);
+
+  useEffect(() => {
+    updateHiddenTabElement();
+  }, [updateHiddenTabElement]);
+
+  useMutationObserver(
+    hiddenTabElement,
+    (mutations: MutationRecord[]) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "hidden"
+        ) {
+          callback();
+          updateHiddenTabElement();
+        }
+      });
+    },
+    {
+      attributes: true,
+      characterData: false,
+      childList: false,
+      subtree: false,
+    }
+  );
+}
+
+export type WordWrap = {
+  readonly codeBlockRef: RefObject<HTMLPreElement | null>;
+  readonly isEnabled: boolean;
+  readonly isCodeScrollable: boolean;
+  readonly toggle: () => void;
+};
+
+export function useCodeWordWrap(): WordWrap {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [isCodeScrollable, setIsCodeScrollable] = useState<boolean>(false);
+  const codeBlockRef = useRef<HTMLPreElement>(null);
+
+  const toggle = useCallback(() => {
+    const codeElement = codeBlockRef.current!.querySelector("code")!;
+
+    if (isEnabled) {
+      codeElement.removeAttribute("style");
+    } else {
+      codeElement.style.whiteSpace = "pre-wrap";
+      codeElement.style.overflowWrap = "anywhere";
+    }
+
+    setIsEnabled((value) => !value);
+  }, [codeBlockRef, isEnabled]);
+
+  const updateCodeIsScrollable = useCallback(() => {
+    const { scrollWidth, clientWidth } = codeBlockRef.current!;
+    const isScrollable =
+      scrollWidth > clientWidth ||
+      codeBlockRef.current!.querySelector("code")!.hasAttribute("style");
+    setIsCodeScrollable(isScrollable);
+  }, [codeBlockRef]);
+
+  useTabBecameVisibleCallback(codeBlockRef, updateCodeIsScrollable);
+
+  useEffect(() => {
+    updateCodeIsScrollable();
+  }, [isEnabled, updateCodeIsScrollable]);
+
+  useEffect(() => {
+    window.addEventListener("resize", updateCodeIsScrollable, {
+      passive: true,
+    });
+
+    return () => {
+      window.removeEventListener("resize", updateCodeIsScrollable);
+    };
+  }, [updateCodeIsScrollable]);
+
+  return { codeBlockRef, isEnabled, isCodeScrollable, toggle };
+}
diff --git a/packages/docusaurus-theme/src/theme/utils/useMutationObserver.ts b/packages/docusaurus-theme/src/theme/utils/useMutationObserver.ts
new file mode 100644
index 000000000..844f888e4
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/utils/useMutationObserver.ts
@@ -0,0 +1,43 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/hooks/useMutationObserver.ts (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import { useEffect } from "react";
+
+import { useEvent } from "@docusaurus/theme-common";
+
+import { useShallowMemoObject } from "./reactUtils";
+
+type Options = MutationObserverInit;
+
+const DefaultOptions: Options = {
+  attributes: true,
+  characterData: true,
+  childList: true,
+  subtree: true,
+};
+
+export function useMutationObserver(
+  target: Element | undefined | null,
+  callback: MutationCallback,
+  options: Options = DefaultOptions
+): void {
+  const stableCallback = useEvent(callback);
+  const stableOptions: Options = useShallowMemoObject(options);
+
+  useEffect(() => {
+    const observer = new MutationObserver(stableCallback);
+    if (target) {
+      observer.observe(target, stableOptions);
+    }
+    return () => observer.disconnect();
+  }, [target, stableCallback, stableOptions]);
+}
diff --git a/packages/docusaurus-theme/src/theme/vendor/search-nova.css b/packages/docusaurus-theme/src/theme/vendor/search-nova.css
new file mode 100644
index 000000000..a3430fcc5
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/vendor/search-nova.css
@@ -0,0 +1,182 @@
+@layer components {
+/* MARK: Command */
+.cn-command {
+  @apply bg-popover text-popover-foreground rounded-xl! p-1;
+}
+
+.cn-command-dialog {
+  @apply rounded-xl!;
+}
+
+.cn-command-input-wrapper {
+  @apply p-1 pb-0;
+}
+
+.cn-command-input-group {
+  @apply bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!;
+}
+
+.cn-command-input-icon {
+  @apply size-4 shrink-0 opacity-50;
+}
+
+.cn-command-input {
+  @apply w-full text-sm;
+}
+
+.cn-command-list {
+  @apply no-scrollbar max-h-72 scroll-py-1 outline-none;
+}
+
+.cn-command-empty {
+  @apply py-6 text-center text-sm;
+}
+
+.cn-command-group {
+  @apply text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium;
+}
+
+.cn-command-separator {
+  @apply bg-border -mx-1 h-px;
+}
+
+.cn-command-item {
+  @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;
+}
+
+.cn-command-item-aria {
+  @apply data-focused:bg-muted data-focused:text-foreground data-focused:*:[svg]:text-foreground;
+}
+
+.cn-command-shortcut {
+  @apply text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest;
+}
+
+.cn-command-shortcut-aria {
+  @apply group-data-focused/command-item:text-foreground;
+}
+
+/* MARK: Dialog */
+.cn-dialog-overlay {
+  @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+}
+
+.cn-dialog-content {
+  @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
+}
+
+.cn-dialog-close {
+  @apply absolute top-2 right-2;
+}
+
+.cn-dialog-header {
+  @apply gap-2;
+}
+
+.cn-dialog-footer {
+  @apply bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4;
+}
+
+.cn-dialog-title {
+  @apply text-base leading-none font-medium;
+}
+
+.cn-dialog-description {
+  @apply text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3;
+}
+
+/* MARK: Input Group */
+.cn-input-group {
+  @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
+}
+
+.cn-input-group-addon {
+  @apply text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4;
+}
+
+.cn-input-group-addon-align-inline-start {
+  @apply pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem];
+}
+
+.cn-input-group-addon-align-inline-end {
+  @apply pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem];
+}
+
+.cn-input-group-addon-align-block-start {
+  @apply px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2;
+}
+
+.cn-input-group-addon-align-block-end {
+  @apply px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2;
+}
+
+.cn-input-group-button {
+  @apply gap-2 text-sm;
+}
+
+.cn-input-group-button-size-xs {
+  @apply h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5;
+}
+
+.cn-input-group-button-size-icon-xs {
+  @apply size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0;
+}
+
+.cn-input-group-button-size-icon-sm {
+  @apply size-8 p-0 has-[>svg]:p-0;
+}
+
+.cn-input-group-text {
+  @apply text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+}
+
+.cn-input-group-input {
+  @apply rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent;
+}
+
+.cn-input-group-textarea {
+  @apply rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent;
+}
+
+/* MARK: Popover */
+.cn-popover-content {
+  @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100;
+}
+
+.cn-popover-content-logical {
+  @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2;
+}
+
+.cn-popover-header {
+  @apply flex flex-col gap-0.5 text-sm;
+}
+
+.cn-popover-title {
+  @apply font-medium;
+}
+
+.cn-popover-description {
+  @apply text-muted-foreground;
+}
+
+/* MARK: Button Group */
+.cn-button-group {
+  @apply has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg;
+}
+
+.cn-button-group-orientation-horizontal {
+  @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!;
+}
+
+.cn-button-group-orientation-vertical {
+  @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!;
+}
+
+.cn-button-group-text {
+  @apply bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
+}
+
+.cn-button-group-separator {
+  @apply bg-input;
+}
+}
diff --git a/packages/docusaurus-theme/src/theme/vendor/shadcn-tailwind.css b/packages/docusaurus-theme/src/theme/vendor/shadcn-tailwind.css
new file mode 100644
index 000000000..7807c58eb
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/vendor/shadcn-tailwind.css
@@ -0,0 +1,629 @@
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/* Custom variants */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* scroll-fade */
+@property --scroll-fade-t {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-mask {
+  syntax: "*";
+  inherits: false;
+}
+
+@theme inline {
+  @keyframes scroll-fade-reveal-t {
+    from {
+      --scroll-fade-t: 0px;
+    }
+    to {
+      --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+  }
+  @keyframes scroll-fade-reveal-b {
+    from {
+      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-b: 0px;
+    }
+  }
+  @keyframes scroll-fade-reveal-s {
+    from {
+      --scroll-fade-s: 0px;
+    }
+    to {
+      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+  }
+  @keyframes scroll-fade-reveal-e {
+    from {
+      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-e: 0px;
+    }
+  }
+}
+
+@utility scroll-fade {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-y {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-x {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-inline: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-inline: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-s 1ms ease-in-out,
+      scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-t {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-t 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+  }
+}
+
+@utility scroll-fade-b {
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-l {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-r {
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-s {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-e {
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      #000 0,
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-* {
+  --scroll-fade-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-t-* {
+  --scroll-fade-t-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-t-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-b-* {
+  --scroll-fade-b-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-b-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-s-* {
+  --scroll-fade-s-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-s-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-e-* {
+  --scroll-fade-e-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-e-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-none {
+  --scroll-fade-mask: none;
+}
+
+/* shimmer */
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+@property --shimmer-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --shimmer-text-fill {
+  syntax: "*";
+  inherits: false;
+}
+
+@theme inline {
+  @keyframes tw-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}
+
+@utility shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(
+    --shimmer-color,
+    oklch(from currentColor l c h / calc(alpha* 0.2))
+  );
+
+  background-image: var(
+    --shimmer-image,
+    linear-gradient(
+      calc(90deg + var(--shimmer-angle)),
+      var(--_base) calc(50% - var(--_spread)),
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+        calc(50% - var(--_spread) * 0.5),
+      var(--_highlight) 50%,
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+        calc(50% + var(--_spread) * 0.5),
+      var(--_base) calc(50% + var(--_spread))
+    )
+  );
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+  @variant dark {
+    --_highlight: var(
+      --shimmer-color,
+      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
+    );
+  }
+
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    animation-direction: reverse;
+  }
+}
+
+@utility shimmer-once {
+  animation-iteration-count: 1;
+}
+
+@utility shimmer-reverse {
+  animation-direction: reverse;
+}
+
+@utility shimmer-none {
+  --shimmer-image: none;
+  --shimmer-text-fill: currentColor;
+}
+
+@utility shimmer-color-* {
+  --shimmer-color: --value(--color, [color]);
+  --shimmer-color: color-mix(
+    in oklch,
+    --value(--color, [color]) calc(--modifier(integer) * 1%),
+    transparent
+  );
+}
+
+@utility shimmer-duration-* {
+  --shimmer-duration: calc(--value(integer) * 1ms);
+}
+
+@utility shimmer-spread-* {
+  --shimmer-spread: calc(var(--spacing) * --value(integer));
+  --shimmer-spread: --value([length], [percentage]);
+}
+
+@utility shimmer-angle-* {
+  --shimmer-angle: calc(--value(integer) * 1deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
diff --git a/packages/docusaurus-theme/src/theme/vendor/tw-animate.css b/packages/docusaurus-theme/src/theme/vendor/tw-animate.css
new file mode 100644
index 000000000..e98b6ae22
--- /dev/null
+++ b/packages/docusaurus-theme/src/theme/vendor/tw-animate.css
@@ -0,0 +1 @@
+@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@theme inline{--animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }}}@utility animation-duration-*{--tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]);}@utility delay-*{animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*,[duration],"initial",[*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*,[duration],"initial",[*]);}@utility repeat-*{animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]); --tw-animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]);}@utility direction-*{animation-direction: --value(--animation-direction-*,"initial",[*]); --tw-animation-direction: --value(--animation-direction-*,"initial",[*]);}@utility fill-mode-*{animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]);}@utility running{animation-play-state: running;}@utility paused{animation-play-state: paused;}@utility play-state-*{animation-play-state: --value("initial",[*]);}@utility blur-in{--tw-enter-blur: 20px;}@utility blur-in-*{--tw-enter-blur: calc(--value(number)*1px); --tw-enter-blur: --value(--blur-*,[*]);}@utility blur-out{--tw-exit-blur: 20px;}@utility blur-out-*{--tw-exit-blur: calc(--value(number)*1px); --tw-exit-blur: --value(--blur-*,[*]);}@utility fade-in{--tw-enter-opacity: 0;}@utility fade-in-*{--tw-enter-opacity: calc(--value(number)/100); --tw-enter-opacity: --value(--percentage-*,[*]);}@utility fade-out{--tw-exit-opacity: 0;}@utility fade-out-*{--tw-exit-opacity: calc(--value(number)/100); --tw-exit-opacity: --value(--percentage-*,[*]);}@utility zoom-in{--tw-enter-scale: 0;}@utility zoom-in-*{--tw-enter-scale: calc(--value(number)*1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*,[*]);}@utility -zoom-in-*{--tw-enter-scale: calc(--value(number)*-1%); --tw-enter-scale: calc(--value(ratio)*-1); --tw-enter-scale: --value(--percentage-*,[*]);}@utility zoom-out{--tw-exit-scale: 0;}@utility zoom-out-*{--tw-exit-scale: calc(--value(number)*1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*,[*]);}@utility -zoom-out-*{--tw-exit-scale: calc(--value(number)*-1%); --tw-exit-scale: calc(--value(ratio)*-1); --tw-exit-scale: --value(--percentage-*,[*]);}@utility spin-in{--tw-enter-rotate: 30deg;}@utility spin-in-*{--tw-enter-rotate: calc(--value(number)*1deg); --tw-enter-rotate: calc(--value(ratio)*360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility -spin-in{--tw-enter-rotate: -30deg;}@utility -spin-in-*{--tw-enter-rotate: calc(--value(number)*-1deg); --tw-enter-rotate: calc(--value(ratio)*-360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility spin-out{--tw-exit-rotate: 30deg;}@utility spin-out-*{--tw-exit-rotate: calc(--value(number)*1deg); --tw-exit-rotate: calc(--value(ratio)*360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility -spin-out{--tw-exit-rotate: -30deg;}@utility -spin-out-*{--tw-exit-rotate: calc(--value(number)*-1deg); --tw-exit-rotate: calc(--value(ratio)*-360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility slide-in-from-top{--tw-enter-translate-y: -100%;}@utility slide-in-from-top-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-y: calc(--value(ratio)*-100%); --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-bottom{--tw-enter-translate-y: 100%;}@utility slide-in-from-bottom-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-y: calc(--value(ratio)*100%); --tw-enter-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-left{--tw-enter-translate-x: -100%;}@utility slide-in-from-left-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-right{--tw-enter-translate-x: 100%;}@utility slide-in-from-right-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-start{&:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; }}@utility slide-in-from-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-in-from-end{&:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; }}@utility slide-in-from-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}@utility slide-out-to-top{--tw-exit-translate-y: -100%;}@utility slide-out-to-top-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-y: calc(--value(ratio)*-100%); --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-bottom{--tw-exit-translate-y: 100%;}@utility slide-out-to-bottom-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-y: calc(--value(ratio)*100%); --tw-exit-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-left{--tw-exit-translate-x: -100%;}@utility slide-out-to-left-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-right{--tw-exit-translate-x: 100%;}@utility slide-out-to-right-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-start{&:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; }}@utility slide-out-to-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-out-to-end{&:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; }}@utility slide-out-to-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}
\ No newline at end of file
diff --git a/packages/docusaurus-theme/tsconfig.json b/packages/docusaurus-theme/tsconfig.json
new file mode 100644
index 000000000..bf582cbde
--- /dev/null
+++ b/packages/docusaurus-theme/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "rootDir": "src",
+    "module": "CommonJS",
+    "target": "ESNext",
+    "noEmit": false,
+    "outDir": "lib",
+    "jsx": "react",
+    "paths": {
+      "@theme/*": ["./src/theme/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/packages/docusaurus-theme/tsconfig.theme.json b/packages/docusaurus-theme/tsconfig.theme.json
new file mode 100644
index 000000000..87ee569d6
--- /dev/null
+++ b/packages/docusaurus-theme/tsconfig.theme.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ES2020",
+    "noEmit": false,
+    "outDir": "lib-theme",
+    "jsx": "react",
+    "paths": {
+      "@theme/*": ["./src/theme/*"]
+    }
+  },
+  "include": ["src/theme", "src/*.d.ts"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
+}
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 000000000..3227014bf
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "playwright/test";
+
+const externalBaseUrl = process.env.PLAYWRIGHT_BASE_URL;
+const baseURL = externalBaseUrl ?? "http://127.0.0.1:3010/docusaurus-theme/";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: false,
+  retries: 0,
+  workers: 1,
+  reporter: "line",
+  use: {
+    baseURL,
+    browserName: "chromium",
+    colorScheme: "dark",
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+  },
+  webServer: externalBaseUrl
+    ? undefined
+    : {
+        command:
+          "yarn workspace @aeei/docs-starter start --port 3010 --host 127.0.0.1",
+        url: baseURL,
+        reuseExistingServer: true,
+        timeout: 120_000,
+      },
+});
diff --git a/scripts/audit-actual-shell.cjs b/scripts/audit-actual-shell.cjs
new file mode 100644
index 000000000..6aad768a5
--- /dev/null
+++ b/scripts/audit-actual-shell.cjs
@@ -0,0 +1,488 @@
+#!/usr/bin/env node
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { chromium } = require("playwright");
+
+const localBase = (
+  process.env.LOCAL_BASE_URL ?? "http://127.0.0.1:3001/docusaurus-theme/"
+).replace(/\/?$/, "/");
+const officialUrl = "https://ui.shadcn.com/docs/components/base/button";
+const localRoute = "guides/markdown-gfm";
+const widths = [
+  390, 700, 768, 820, 996, 997, 1000, 1023, 1024, 1025, 1440, 1920, 2736,
+];
+const themes = ["light", "dark"];
+const reportPath = path.resolve(
+  ".pi-subagents/artifacts/shell-geometry-report.md"
+);
+
+const OFFICIAL_SIDEBAR_WRAPPER_CLASS =
+  "group/sidebar-wrapper flex w-full has-data-[variant=inset]:bg-sidebar min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)] 3xl:fixed:container 3xl:fixed:px-3";
+const OFFICIAL_CONTENT_CLASS =
+  "mx-auto flex w-full max-w-160 min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-foreground md:px-0 lg:py-8 dark:text-foreground";
+const LOCAL_CONTENT_CLASS =
+  "mx-auto flex w-full max-w-160 min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-foreground md:px-0 dark:text-foreground";
+const OFFICIAL_TOC_CLASS =
+  "sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex";
+const OFFICIAL_SIDEBAR_CLASS =
+  "w-(--sidebar-width) flex-col text-sidebar-foreground sticky top-[calc(var(--header-height)+0.6rem)] z-30 hidden h-[calc(100svh-10rem)] overflow-hidden overscroll-none bg-transparent [--sidebar-menu-width:--spacing(56)] lg:flex";
+const MAIN_CONTAINER_CLASS = "container-wrapper flex flex-1 flex-col px-2";
+const DOCS_CLASS =
+  "flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full";
+const DESKTOP_WRAPPER_CLASS = "theme-doc-sidebar-desktop hidden lg:block";
+const NO_JS_WIDTHS = [768, 1023, 1024];
+
+function routeUrl(route) {
+  return new URL(route, localBase).href;
+}
+
+async function measure(page, kind) {
+  return page.evaluate(
+    ({
+      kind,
+      officialSidebarWrapperClass,
+      officialContentClass,
+      localContentClass,
+      officialTocClass,
+      officialSidebarClass,
+      mainContainerClass,
+      docsClass,
+    }) => {
+      const all = Array.from(document.querySelectorAll("*"));
+      const byExactClass = (className) =>
+        all.filter((element) => element.className === className);
+      const one = (label, elements) => {
+        if (elements.length !== 1) {
+          throw new Error(
+            `${kind}:${label}: expected 1, got ${elements.length}`
+          );
+        }
+        return elements[0];
+      };
+      const maybeOne = (label, elements) => {
+        if (elements.length > 1) {
+          throw new Error(
+            `${kind}:${label}: expected <=1, got ${elements.length}`
+          );
+        }
+        return elements[0] ?? null;
+      };
+      const style = (element) =>
+        element ? getComputedStyle(element) : { display: "none" };
+      const rect = (element) => {
+        if (!element) {
+          return { x: 0, y: 0, width: 0, height: 0, right: 0, bottom: 0 };
+        }
+        const box = element.getBoundingClientRect();
+        return {
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height,
+          right: box.right,
+          bottom: box.bottom,
+        };
+      };
+
+      const header = one(
+        "header",
+        kind === "official"
+          ? Array.from(document.querySelectorAll("body > div header"))
+          : Array.from(document.querySelectorAll(".navbar"))
+      );
+      const main = one("main", Array.from(document.querySelectorAll("main")));
+      const mainContainer = one(
+        "main-container",
+        byExactClass(mainContainerClass).filter(
+          (element) => element.parentElement === main
+        )
+      );
+      const navbarInner = one(
+        "navbar-inner",
+        kind === "official"
+          ? Array.from(
+              header.querySelectorAll(":scope .container-wrapper > div")
+            )
+          : Array.from(document.querySelectorAll(".navbar__inner"))
+      );
+      const sidebarWrapper = one(
+        "sidebar-wrapper",
+        kind === "official"
+          ? Array.from(
+              document.querySelectorAll('[data-slot="sidebar-wrapper"]')
+            ).filter(
+              (element) => element.className === officialSidebarWrapperClass
+            )
+          : Array.from(
+              document.querySelectorAll('[data-slot="sidebar-wrapper"]')
+            )
+      );
+      const docs = one(
+        "docs",
+        Array.from(document.querySelectorAll('[data-slot="docs"]')).filter(
+          (element) => element.className === docsClass
+        )
+      );
+      const contentClass =
+        kind === "official" ? officialContentClass : localContentClass;
+      const content = one("content", byExactClass(contentClass));
+      const sidebarRoot = maybeOne(
+        "sidebar",
+        Array.from(document.querySelectorAll('[data-slot="sidebar"]')).filter(
+          (element) => {
+            if (kind === "official") {
+              return element.className === officialSidebarClass;
+            }
+            return (
+              element.getAttribute("data-side") === "left" &&
+              element.getAttribute("data-variant") === "sidebar"
+            );
+          }
+        )
+      );
+      const sidebar =
+        kind === "official"
+          ? sidebarRoot
+          : maybeOne(
+              "sidebar-gap",
+              Array.from(
+                document.querySelectorAll(
+                  '.theme-doc-sidebar-desktop [data-slot="sidebar-gap"]'
+                )
+              )
+            );
+      const toc = maybeOne(
+        "toc",
+        kind === "official"
+          ? byExactClass(officialTocClass)
+          : Array.from(document.querySelectorAll(".theme-doc-page__toc"))
+      );
+
+      const headerStyle = style(header);
+      const headerBlurStyle = getComputedStyle(header, "::before");
+      const sidebarStyle = style(sidebar);
+      const tocStyle = style(toc);
+
+      return {
+        counts: {
+          header:
+            kind === "official"
+              ? document.querySelectorAll("body > div header").length
+              : document.querySelectorAll(".navbar").length,
+          main: document.querySelectorAll("main").length,
+          mainContainer: byExactClass(mainContainerClass).length,
+          sidebarWrapper: document.querySelectorAll(
+            '[data-slot="sidebar-wrapper"]'
+          ).length,
+          exactOfficialSidebarWrapper: byExactClass(officialSidebarWrapperClass)
+            .length,
+          docs: document.querySelectorAll('[data-slot="docs"]').length,
+          content: byExactClass(contentClass).length,
+          officialToc: byExactClass(officialTocClass).length,
+        },
+        shellMode:
+          sidebarStyle.display !== "none" && rect(sidebar).width > 0
+            ? "desktop"
+            : "mobile",
+        navbar: {
+          ...rect(header),
+          backgroundColor: headerStyle.backgroundColor,
+          borderBottomWidth: headerStyle.borderBottomWidth,
+          boxShadow: headerStyle.boxShadow,
+          backdropFilter: headerStyle.backdropFilter,
+          position: headerStyle.position,
+        },
+        navbarBlur: {
+          backgroundColor: headerBlurStyle.backgroundColor,
+          borderBottomWidth: headerBlurStyle.borderBottomWidth,
+          backdropFilter: headerBlurStyle.backdropFilter,
+        },
+        navbarInner: rect(navbarInner),
+        main: rect(main),
+        mainContainer: rect(mainContainer),
+        sidebarWrapper: {
+          rect: rect(sidebarWrapper),
+          display: style(sidebarWrapper).display,
+        },
+        sidebar: {
+          present: Boolean(sidebar),
+          display: sidebarStyle.display,
+          variant: sidebarRoot?.getAttribute("data-variant") ?? null,
+          rect: rect(sidebar),
+        },
+        docs: rect(docs),
+        content: rect(content),
+        toc: {
+          present: Boolean(toc),
+          display: tocStyle.display,
+          rect: rect(toc),
+        },
+      };
+    },
+    {
+      kind,
+      officialSidebarWrapperClass: OFFICIAL_SIDEBAR_WRAPPER_CLASS,
+      officialContentClass: OFFICIAL_CONTENT_CLASS,
+      localContentClass: LOCAL_CONTENT_CLASS,
+      officialTocClass: OFFICIAL_TOC_CLASS,
+      officialSidebarClass: OFFICIAL_SIDEBAR_CLASS,
+      mainContainerClass: MAIN_CONTAINER_CLASS,
+      docsClass: DOCS_CLASS,
+    }
+  );
+}
+
+async function measureNoJsDesktopWrapper(page) {
+  return page.evaluate((desktopWrapperClass) => {
+    const wrapper = Array.from(document.querySelectorAll("div")).filter(
+      (element) => element.className === desktopWrapperClass
+    );
+
+    if (wrapper.length !== 1) {
+      throw new Error(
+        `local:no-js:desktop-wrapper: expected 1, got ${wrapper.length}`
+      );
+    }
+
+    const desktopSidebar = wrapper[0].querySelector(
+      '[data-slot="sidebar-gap"]'
+    );
+
+    return {
+      wrapperDisplay: getComputedStyle(wrapper[0]).display,
+      sidebarDisplay: desktopSidebar
+        ? getComputedStyle(desktopSidebar).display
+        : null,
+      sidebarWidth: desktopSidebar?.getBoundingClientRect().width ?? 0,
+    };
+  }, DESKTOP_WRAPPER_CLASS);
+}
+
+function compareRow(official, local) {
+  const width = local.navbar.width;
+  const desktop = local.shellMode === "desktop";
+  const shellWidth = Math.min(width, 1440);
+  const shellLeft = (width - shellWidth) / 2;
+  const shellRight = shellLeft + shellWidth;
+  const expectedNavbarInner = desktop
+    ? { x: shellLeft + 24, right: shellRight - 24 }
+    : { x: 16, right: width - 16 };
+  const expectedMainContainer = desktop
+    ? { x: shellLeft, width: shellWidth }
+    : { x: 0, width };
+  const expectedSidebarWrapper = desktop
+    ? { x: shellLeft, width: shellWidth }
+    : official.sidebarWrapper.rect;
+  const expectedDocs = desktop
+    ? { x: shellLeft + 288, width: shellWidth - 288 }
+    : official.docs;
+  const tocVisible = local.toc.display !== "none";
+  const pairs = [
+    ["shellMode", official.shellMode, local.shellMode],
+    ["navbar.height", official.navbar.height, local.navbar.height],
+    [
+      "navbar.backgroundColor",
+      "rgba(0, 0, 0, 0)",
+      local.navbar.backgroundColor,
+    ],
+    ["navbar.borderBottomWidth", "0px", local.navbar.borderBottomWidth],
+    ["navbar.boxShadow", "none", local.navbar.boxShadow],
+    ["navbar.backdropFilter", "none", local.navbar.backdropFilter],
+    ["navbar.position", official.navbar.position, local.navbar.position],
+    [
+      "navbarBlur.backdropFilter",
+      "blur(12px)",
+      local.navbarBlur.backdropFilter,
+    ],
+    ["navbarBlur.borderBottomWidth", "1px", local.navbarBlur.borderBottomWidth],
+    [
+      "navbarBlur.translucentBackground",
+      true,
+      local.navbarBlur.backgroundColor !== "rgba(0, 0, 0, 0)",
+    ],
+    ["navbarInner.x", expectedNavbarInner.x, local.navbarInner.x],
+    ["navbarInner.right", expectedNavbarInner.right, local.navbarInner.right],
+    ["mainContainer.x", expectedMainContainer.x, local.mainContainer.x],
+    [
+      "mainContainer.width",
+      expectedMainContainer.width,
+      local.mainContainer.width,
+    ],
+    [
+      "sidebarWrapper.display",
+      official.sidebarWrapper.display,
+      local.sidebarWrapper.display,
+    ],
+    ["sidebarWrapper.x", expectedSidebarWrapper.x, local.sidebarWrapper.rect.x],
+    [
+      "sidebarWrapper.width",
+      expectedSidebarWrapper.width,
+      local.sidebarWrapper.rect.width,
+    ],
+    ["docs.x", expectedDocs.x, local.docs.x],
+    ["docs.width", expectedDocs.width, local.docs.width],
+    ["content.x", official.content.x, local.content.x],
+    ["content.width", official.content.width, local.content.width],
+    [
+      "sidebar.x",
+      desktop ? shellLeft : official.sidebar.rect.x,
+      local.sidebar.rect.x,
+    ],
+    ["sidebar.width", official.sidebar.rect.width, local.sidebar.rect.width],
+    ["toc.present", official.toc.present, local.toc.present],
+    ["toc.display", official.toc.display, local.toc.display],
+    [
+      "toc.width",
+      tocVisible ? 288 : official.toc.rect.width,
+      local.toc.rect.width,
+    ],
+    [
+      "toc.x",
+      tocVisible ? shellRight - 288 : official.toc.rect.x,
+      local.toc.rect.x,
+    ],
+  ];
+
+  if (desktop) {
+    pairs.push(["sidebar.variant", "sidebar", local.sidebar.variant]);
+  }
+
+  return pairs
+    .filter(([, expected, actual]) => !Object.is(expected, actual))
+    .map(([metric, expected, actual]) => ({ metric, expected, actual }));
+}
+
+function rowLine(row) {
+  return `| ${row.theme} | ${row.width} | ${row.official.shellMode} | ${row.local.shellMode} | ${row.official.navbar.height} | ${row.local.navbar.height} | ${row.official.docs.x} / ${row.official.docs.width} | ${row.local.docs.x} / ${row.local.docs.width} | ${row.official.content.x} / ${row.official.content.width} | ${row.local.content.x} / ${row.local.content.width} | ${String(row.official.toc.present)} / ${row.official.toc.display} | ${String(row.local.toc.present)} / ${row.local.toc.display} | ${row.mismatches.length} |`;
+}
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  const rows = [];
+  const noJsRows = [];
+
+  try {
+    for (const theme of themes) {
+      for (const width of widths) {
+        const viewport = { width, height: 900 };
+        const officialPage = await browser.newPage({
+          viewport,
+          colorScheme: theme,
+        });
+        const localPage = await browser.newPage({
+          viewport,
+          colorScheme: theme,
+        });
+
+        await officialPage.goto(officialUrl, { waitUntil: "networkidle" });
+        await localPage.goto(routeUrl(localRoute), {
+          waitUntil: "networkidle",
+        });
+        await officialPage.waitForTimeout(200);
+        await localPage.waitForTimeout(200);
+
+        const official = await measure(officialPage, "official");
+        const local = await measure(localPage, "local");
+        const mismatches = compareRow(official, local);
+
+        rows.push({ theme, width, official, local, mismatches });
+
+        await officialPage.close();
+        await localPage.close();
+      }
+    }
+    for (const width of NO_JS_WIDTHS) {
+      const noJsContext = await browser.newContext({
+        javaScriptEnabled: false,
+        viewport: { width, height: 900 },
+        colorScheme: "light",
+      });
+      try {
+        const page = await noJsContext.newPage();
+        await page.goto(routeUrl(localRoute), { waitUntil: "load" });
+        noJsRows.push({ width, ...(await measureNoJsDesktopWrapper(page)) });
+        await page.close();
+      } finally {
+        await noJsContext.close();
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  fs.mkdirSync(path.dirname(reportPath), { recursive: true });
+  fs.writeFileSync(
+    reportPath,
+    [
+      "# Shell geometry report",
+      "",
+      `- official: ${officialUrl}`,
+      `- local: ${routeUrl(localRoute)}`,
+      `- widths: ${widths.join(", ")}`,
+      `- themes: ${themes.join(", ")}`,
+      `- selector assertions: main, main > .container-wrapper, [data-slot=sidebar-wrapper], [data-slot=docs], official content class, official toc class`,
+      `- no-JS assertions: .theme-doc-sidebar-desktop hidden lg:block display at 768/1023/1024`,
+      `- approved local shell composition: Nextra-style 90rem centered max-width, 24px GNB/LNB alignment, and translucent 12px GNB blur`,
+      `- approved local mobile GNB optical inset: 16px; icon glyphs align to the 24px content edge`,
+      "",
+      "| theme | width | official mode | local mode | official navbar h | local navbar h | official docs x/w | local docs x/w | official content x/w | local content x/w | official toc | local toc | mismatches |",
+      "| --- | ---: | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | ---: |",
+      ...rows.map(rowLine),
+      "",
+      "## Selector counts",
+      "",
+      ...rows.map(
+        (row) =>
+          `- ${row.theme} ${row.width}: official ${JSON.stringify(row.official.counts)}, local ${JSON.stringify(row.local.counts)}`
+      ),
+      "",
+      "## No-JS desktop wrapper",
+      "",
+      "| width | wrapper display | sidebar display | sidebar width |",
+      "| ---: | --- | --- | ---: |",
+      ...noJsRows.map(
+        (row) =>
+          `| ${row.width} | ${row.wrapperDisplay} | ${String(row.sidebarDisplay)} | ${row.sidebarWidth} |`
+      ),
+      "",
+      "## Mismatches",
+      "",
+      ...rows.flatMap((row) => {
+        if (!row.mismatches.length) {
+          return [`- ${row.theme} ${row.width}: none`];
+        }
+        return [
+          `- ${row.theme} ${row.width}:`,
+          ...row.mismatches.map(
+            (mismatch) =>
+              `  - ${mismatch.metric} → expected ${JSON.stringify(mismatch.expected)}, actual ${JSON.stringify(mismatch.actual)}`
+          ),
+        ];
+      }),
+      "",
+    ].join("\n")
+  );
+
+  const failures = rows.filter((row) => row.mismatches.length > 0);
+  const noJsFailures = noJsRows.filter((row) => {
+    const expectedDisplay = row.width >= 1024 ? "block" : "none";
+    return row.wrapperDisplay !== expectedDisplay;
+  });
+
+  if (failures.length || noJsFailures.length) {
+    const parts = [];
+    if (failures.length)
+      parts.push(`geometry drift in ${failures.length} snapshots`);
+    if (noJsFailures.length)
+      parts.push(
+        `no-JS desktop wrapper drift in ${noJsFailures.length} snapshots`
+      );
+    console.error(`Shell audit failed: ${parts.join(", ")}. See ${reportPath}`);
+    process.exit(1);
+  }
+
+  console.log(
+    `Shell geometry exact across ${rows.length} snapshots and no-JS desktop wrapper CSS exact across ${noJsRows.length} widths. Report: ${reportPath}`
+  );
+})();
diff --git a/scripts/audit-actual-toc.cjs b/scripts/audit-actual-toc.cjs
new file mode 100644
index 000000000..339c44657
--- /dev/null
+++ b/scripts/audit-actual-toc.cjs
@@ -0,0 +1,624 @@
+#!/usr/bin/env node
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { chromium } = require("playwright");
+
+const localBase = (
+  process.env.LOCAL_BASE_URL ?? "http://127.0.0.1:3001/docusaurus-theme/"
+).replace(/\/?$/, "/");
+const officialUrl = "https://ui.shadcn.com/docs/components/base/button";
+const localRoute = process.env.LOCAL_ROUTE ?? "guides/markdown-gfm";
+const widths = [1280, 1440];
+const mobileWidths = [390, 820];
+const themes = ["light", "dark"];
+const reportPath = path.resolve(".pi-subagents/artifacts/toc-parity-report.md");
+
+const OFFICIAL = {
+  rail: "sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex",
+  spacer: "h-(--top-spacing) shrink-0",
+  scroll: "flex scroll-fade scrollbar-none flex-col gap-8 overflow-y-auto px-8",
+  list: "flex flex-col gap-2 p-4 pt-0 text-sm",
+  label: "h-6 bg-background text-xs font-medium text-muted-foreground",
+  activeLink:
+    "text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground data-[active=true]:font-medium data-[active=true]:text-foreground data-[depth=3]:pl-4 data-[depth=4]:pl-6",
+};
+
+function routeUrl(route) {
+  return new URL(route, localBase).href;
+}
+
+function normalize(value) {
+  return value;
+}
+
+async function hoverAndMeasure(page, selector) {
+  const locator = page.locator(selector).first();
+  await locator.hover();
+  return normalize(
+    await locator.evaluate((element) => {
+      const rect = element.getBoundingClientRect();
+      const style = getComputedStyle(element);
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      const context = canvas.getContext("2d");
+      context.clearRect(0, 0, 1, 1);
+      context.fillStyle = style.color;
+      context.fillRect(0, 0, 1, 1);
+      const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+      const color = `rgba(${r}, ${g}, ${b}, ${a})`;
+      return {
+        rect: {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+        },
+        color,
+        fontWeight: style.fontWeight,
+      };
+    })
+  );
+}
+
+async function measure(page, kind) {
+  return normalize(
+    await page.evaluate(
+      ({ official, kind }) => {
+        const all = Array.from(document.querySelectorAll("*"));
+        const byClass = (className) =>
+          all.filter((element) => element.className === className);
+        const one = (label, elements) => {
+          if (elements.length !== 1) {
+            throw new Error(
+              `${kind}:${label}: expected 1, got ${elements.length}`
+            );
+          }
+          return elements[0];
+        };
+        const maybeOne = (label, elements) => {
+          if (elements.length > 1) {
+            throw new Error(
+              `${kind}:${label}: expected <=1, got ${elements.length}`
+            );
+          }
+          return elements[0] ?? null;
+        };
+        const rect = (element) => {
+          const box = element.getBoundingClientRect();
+          return {
+            x: box.x,
+            y: box.y,
+            width: box.width,
+            height: box.height,
+          };
+        };
+        const textRect = (element) => {
+          const range = document.createRange();
+          range.selectNodeContents(element);
+          const box = range.getClientRects()[0];
+          return box ? rect({ getBoundingClientRect: () => box }) : null;
+        };
+        const normalizeColor = (value) => {
+          const canvas = document.createElement("canvas");
+          canvas.width = 1;
+          canvas.height = 1;
+          const context = canvas.getContext("2d");
+          context.clearRect(0, 0, 1, 1);
+          context.fillStyle = value;
+          context.fillRect(0, 0, 1, 1);
+          const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+          return `rgba(${r}, ${g}, ${b}, ${a})`;
+        };
+        const metric = (element, picks = {}) => {
+          const style = getComputedStyle(element);
+          const base = {
+            rect: rect(element),
+          };
+          for (const [key, prop] of Object.entries(picks)) {
+            const value = style.getPropertyValue(prop).trim();
+            base[key] = key.toLowerCase().includes("color")
+              ? normalizeColor(value)
+              : value;
+          }
+          return base;
+        };
+
+        const rail =
+          kind === "official"
+            ? one("rail", byClass(official.rail))
+            : one(
+                "rail",
+                Array.from(document.querySelectorAll(".theme-doc-page__toc"))
+              );
+        const toc =
+          kind === "official"
+            ? rail.firstElementChild
+            : one(
+                "toc",
+                Array.from(document.querySelectorAll(".theme-doc-toc-desktop"))
+              );
+        const spacer =
+          kind === "official"
+            ? one(
+                "spacer",
+                Array.from(rail.children).filter(
+                  (element) => element.className === official.spacer
+                )
+              )
+            : one(
+                "spacer",
+                Array.from(toc.children).filter(
+                  (element) => element.className === official.spacer
+                )
+              );
+        const scroll =
+          kind === "official"
+            ? one(
+                "scroll",
+                Array.from(rail.children).filter(
+                  (element) => element.className === official.scroll
+                )
+              )
+            : one(
+                "scroll",
+                Array.from(
+                  document.querySelectorAll(".theme-doc-toc-desktop__scroll")
+                )
+              );
+        const list =
+          kind === "official"
+            ? one(
+                "list",
+                Array.from(scroll.children).filter(
+                  (element) => element.className === official.list
+                )
+              )
+            : one(
+                "list",
+                Array.from(
+                  document.querySelectorAll(".theme-doc-toc-desktop__list")
+                )
+              );
+        const label =
+          kind === "official"
+            ? one(
+                "label",
+                Array.from(list.children).filter(
+                  (element) => element.className === official.label
+                )
+              )
+            : maybeOne(
+                "label",
+                Array.from(
+                  document.querySelectorAll(".theme-doc-toc-desktop__header")
+                )
+              );
+
+        const activeLink =
+          kind === "official"
+            ? one(
+                "active-link",
+                Array.from(list.querySelectorAll("a")).filter(
+                  (element) => element.getAttribute("data-active") === "true"
+                )
+              )
+            : one(
+                "active-link",
+                Array.from(
+                  list.querySelectorAll("a.table-of-contents__link--active")
+                )
+              );
+        const inactiveLinks =
+          kind === "official"
+            ? Array.from(list.querySelectorAll("a")).filter(
+                (element) => element.getAttribute("data-active") === "false"
+              )
+            : Array.from(
+                list.querySelectorAll("a.table-of-contents__link")
+              ).filter(
+                (element) =>
+                  !element.classList.contains("table-of-contents__link--active")
+              );
+        if (!inactiveLinks.length) {
+          throw new Error(`${kind}:inactive-link: expected >=1, got 0`);
+        }
+        const inactiveLink = inactiveLinks[0];
+        const depth3Links = Array.from(
+          list.querySelectorAll('a[data-depth="3"]')
+        );
+        if (!depth3Links.length) {
+          throw new Error(`${kind}:depth3-link: expected >=1, got 0`);
+        }
+        const depth3Link = depth3Links[0];
+
+        return {
+          viewportWidth: window.innerWidth,
+          rail: metric(rail, {
+            top: "top",
+            gap: "gap",
+            paddingBottom: "padding-bottom",
+            display: "display",
+            position: "position",
+          }),
+          spacer: metric(spacer, { heightCss: "height" }),
+          scroll: metric(scroll, {
+            paddingLeft: "padding-left",
+            paddingRight: "padding-right",
+            gap: "gap",
+            overflowY: "overflow-y",
+            maskImage: "mask-image",
+            animationTimeline: "animation-timeline",
+          }),
+          headerInScroll: Boolean(label) && scroll.contains(label),
+          list: metric(list, {
+            paddingLeft: "padding-left",
+            paddingRight: "padding-right",
+            paddingBottom: "padding-bottom",
+            gap: "gap",
+            fontSize: "font-size",
+          }),
+          label: label
+            ? {
+                ...metric(label, {
+                  fontSize: "font-size",
+                  lineHeight: "line-height",
+                  fontWeight: "font-weight",
+                  color: "color",
+                }),
+                textRect: textRect(label),
+              }
+            : null,
+          activeLink: metric(activeLink, {
+            fontSize: "font-size",
+            lineHeight: "line-height",
+            fontWeight: "font-weight",
+            color: "color",
+            paddingLeft: "padding-left",
+          }),
+          inactiveLink: metric(inactiveLink, {
+            fontSize: "font-size",
+            lineHeight: "line-height",
+            fontWeight: "font-weight",
+            color: "color",
+            paddingLeft: "padding-left",
+          }),
+          depth3Link: metric(depth3Link, {
+            paddingLeft: "padding-left",
+          }),
+        };
+      },
+      { official: OFFICIAL, kind }
+    )
+  );
+}
+
+function compare(official, local) {
+  const shellWidth = Math.min(local.viewportWidth, 1440);
+  const shellLeft = (local.viewportWidth - shellWidth) / 2;
+  const expectedRailX = shellLeft + shellWidth - 288;
+  const xOffset = expectedRailX - official.rail.rect.x;
+  const pairs = [
+    ["rail.rect.x", expectedRailX, local.rail.rect.x],
+    ["rail.rect.y", official.rail.rect.y, local.rail.rect.y],
+    ["rail.rect.width", official.rail.rect.width, local.rail.rect.width],
+    ["rail.rect.height", official.rail.rect.height, local.rail.rect.height],
+    ["rail.position", official.rail.position, local.rail.position],
+    ["rail.top", official.rail.top, local.rail.top],
+    ["rail.gap", official.rail.gap, local.rail.gap],
+    [
+      "rail.paddingBottom",
+      official.rail.paddingBottom,
+      local.rail.paddingBottom,
+    ],
+    [
+      "spacer.rect.height",
+      official.spacer.rect.height,
+      local.spacer.rect.height,
+    ],
+    ["list.rect.x", official.list.rect.x + xOffset, local.list.rect.x],
+    ["list.rect.width", official.list.rect.width, local.list.rect.width],
+    ["list.paddingLeft", official.list.paddingLeft, local.list.paddingLeft],
+    ["list.paddingRight", official.list.paddingRight, local.list.paddingRight],
+    [
+      "list.paddingBottom",
+      official.list.paddingBottom,
+      local.list.paddingBottom,
+    ],
+    [
+      "activeLink.rect.x",
+      official.activeLink.rect.x + xOffset,
+      local.activeLink.rect.x,
+    ],
+    [
+      "activeLink.fontSize",
+      official.activeLink.fontSize,
+      local.activeLink.fontSize,
+    ],
+    [
+      "activeLink.fontWeight",
+      official.activeLink.fontWeight,
+      local.activeLink.fontWeight,
+    ],
+    [
+      "inactiveLink.rect.x",
+      official.inactiveLink.rect.x + xOffset,
+      local.inactiveLink.rect.x,
+    ],
+    [
+      "inactiveLink.fontSize",
+      official.inactiveLink.fontSize,
+      local.inactiveLink.fontSize,
+    ],
+    [
+      "inactiveLink.fontWeight",
+      official.inactiveLink.fontWeight,
+      local.inactiveLink.fontWeight,
+    ],
+    [
+      "depth3Link.paddingLeft",
+      official.depth3Link.paddingLeft,
+      local.depth3Link.paddingLeft,
+    ],
+    [
+      "depth3Link.rect.x",
+      official.depth3Link.rect.x + xOffset,
+      local.depth3Link.rect.x,
+    ],
+  ];
+  pairs.push(
+    ["local.headerInScroll", false, local.headerInScroll],
+    ["local.scrollFadeMask", true, local.scroll.maskImage !== "none"],
+    [
+      "local.scrollFadeTimeline",
+      true,
+      local.scroll.animationTimeline.includes("scroll"),
+    ]
+  );
+
+  return pairs
+    .filter(([, expected, actual]) => !Object.is(expected, actual))
+    .map(([metric, expected, actual]) => ({ metric, expected, actual }));
+}
+
+function compareHover(official, local, xOffset) {
+  const pairs = [
+    ["fontWeight", official.fontWeight, local.fontWeight],
+    ["rect.x", official.rect.x + xOffset, local.rect.x],
+    ["rect.width", official.rect.width, local.rect.width],
+  ];
+
+  return pairs
+    .filter(([, expected, actual]) => !Object.is(expected, actual))
+    .map(([metric, expected, actual]) => ({ metric, expected, actual }));
+}
+
+async function measureMobileRegression(page) {
+  return page.evaluate(() => {
+    const rails = Array.from(document.querySelectorAll(".theme-doc-page__toc"));
+    const visibleRails = rails.filter((element) => {
+      const rect = element.getBoundingClientRect();
+      return getComputedStyle(element).display !== "none" && rect.width > 0;
+    });
+    const accordions = Array.from(
+      document.querySelectorAll('.theme-doc-toc-mobile [data-slot="accordion"]')
+    );
+    const triggers = Array.from(
+      document.querySelectorAll(
+        '.theme-doc-toc-mobile [data-slot="accordion-trigger"]'
+      )
+    ).filter((element) => element.textContent?.trim() === "On this page");
+    const expanded = triggers.filter(
+      (element) => element.getAttribute("aria-expanded") === "true"
+    );
+
+    return {
+      rails: rails.length,
+      visibleRails: visibleRails.length,
+      accordions: accordions.length,
+      triggers: triggers.length,
+      expanded: expanded.length,
+      viewportWidth: window.innerWidth,
+      scrollWidth: document.documentElement.scrollWidth,
+    };
+  });
+}
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  const rows = [];
+  const mobileRows = [];
+
+  try {
+    for (const theme of themes) {
+      for (const width of widths) {
+        const viewport = { width, height: 900 };
+        const officialPage = await browser.newPage({
+          viewport,
+          colorScheme: theme,
+        });
+        const localPage = await browser.newPage({
+          viewport,
+          colorScheme: theme,
+        });
+
+        await officialPage.goto(officialUrl, { waitUntil: "networkidle" });
+        await localPage.goto(routeUrl(localRoute), {
+          waitUntil: "networkidle",
+        });
+        const officialLabel = officialPage.getByText("On This Page", {
+          exact: true,
+        });
+        await officialLabel.waitFor();
+        await localPage.waitForSelector(
+          ".theme-doc-toc-desktop__list .table-of-contents__link"
+        );
+
+        const officialCurrentLink = officialLabel
+          .locator("..")
+          .locator('a[data-depth="2"]')
+          .nth(1);
+        const localCurrentLink = localPage
+          .locator(
+            '.theme-doc-toc-desktop__list .table-of-contents__link[data-depth="2"]'
+          )
+          .nth(1);
+        await officialCurrentLink.click();
+        await officialLabel
+          .locator("..")
+          .locator('a[data-active="true"]')
+          .waitFor();
+        await localCurrentLink.click();
+        await localPage
+          .locator(
+            ".theme-doc-toc-desktop__list .table-of-contents__link--active"
+          )
+          .waitFor();
+
+        const official = await measure(officialPage, "official");
+        const local = await measure(localPage, "local");
+        const hoverOfficial = await hoverAndMeasure(
+          officialPage,
+          '.flex.flex-col.gap-2.p-4.pt-0.text-sm a[data-active="false"]'
+        );
+        const hoverLocal = await hoverAndMeasure(
+          localPage,
+          ".theme-doc-toc-desktop__list .table-of-contents__link:not(.table-of-contents__link--active)"
+        );
+        const hoverMismatches = compareHover(
+          hoverOfficial,
+          hoverLocal,
+          local.rail.rect.x - official.rail.rect.x
+        );
+        const mismatches = [
+          ...compare(official, local),
+          ...hoverMismatches.map((entry) => ({
+            metric: `hover.${entry.metric}`,
+            expected: entry.expected,
+            actual: entry.actual,
+          })),
+        ];
+
+        rows.push({
+          theme,
+          width,
+          official,
+          local,
+          hoverOfficial,
+          hoverLocal,
+          mismatches,
+        });
+
+        await officialPage.close();
+        await localPage.close();
+      }
+    }
+
+    for (const theme of themes) {
+      for (const width of mobileWidths) {
+        const page = await browser.newPage({
+          viewport: { width, height: 900 },
+          colorScheme: theme,
+        });
+        await page.goto(routeUrl(localRoute), { waitUntil: "networkidle" });
+        await page.waitForSelector(
+          '.theme-doc-toc-mobile [data-slot="accordion-trigger"]'
+        );
+        const actual = await measureMobileRegression(page);
+        const expected = {
+          rails: 1,
+          visibleRails: 0,
+          accordions: 1,
+          triggers: 1,
+          expanded: 0,
+          viewportWidth: width,
+          scrollWidth: width,
+        };
+        const mismatches = Object.entries(expected)
+          .filter(([key, value]) => !Object.is(value, actual[key]))
+          .map(([metric, value]) => ({
+            metric,
+            expected: value,
+            actual: actual[metric],
+          }));
+        mobileRows.push({ theme, width, actual, mismatches });
+        await page.close();
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  fs.mkdirSync(path.dirname(reportPath), { recursive: true });
+  fs.writeFileSync(
+    reportPath,
+    [
+      "# TOC parity report",
+      "",
+      `- official: ${officialUrl}`,
+      `- local: ${routeUrl(localRoute)}`,
+      `- desktop widths: ${widths.join(", ")}`,
+      `- mobile regression widths: ${mobileWidths.join(", ")}`,
+      `- themes: ${themes.join(", ")}`,
+      `- states: rest, actual scroll-spy current, hover, mobile collapsed`,
+      `- approved local composition: \`On This Page\` remains outside the scroll-faded link viewport`,
+      "",
+      "| theme | width | rail x/y/w/h | label x/y/w/h | active x | depth3 pad | mismatches |",
+      "| --- | ---: | --- | --- | ---: | --- | ---: |",
+      ...rows.map(
+        (row) =>
+          `| ${row.theme} | ${row.width} | ${row.local.rail.rect.x}/${row.local.rail.rect.y}/${row.local.rail.rect.width}/${row.local.rail.rect.height} | ${row.local.label ? `${row.local.label.rect.x}/${row.local.label.rect.y}/${row.local.label.rect.width}/${row.local.label.rect.height}` : "none"} | ${row.local.activeLink.rect.x} | ${row.local.depth3Link.paddingLeft} | ${row.mismatches.length} |`
+      ),
+      "",
+      "## Mismatches",
+      "",
+      ...rows.flatMap((row) => {
+        if (!row.mismatches.length)
+          return [`- ${row.theme} ${row.width}: none`];
+        return [
+          `- ${row.theme} ${row.width}:`,
+          ...row.mismatches.map(
+            (entry) =>
+              `  - ${entry.metric} → expected ${JSON.stringify(entry.expected)}, actual ${JSON.stringify(entry.actual)}`
+          ),
+        ];
+      }),
+      "",
+      "## Mobile regression",
+      "",
+      "| theme | width | desktop rails | accordion | trigger | expanded | scroll width | mismatches |",
+      "| --- | ---: | ---: | ---: | ---: | ---: | ---: | ---: |",
+      ...mobileRows.map(
+        (row) =>
+          `| ${row.theme} | ${row.width} | ${row.actual.visibleRails} | ${row.actual.accordions} | ${row.actual.triggers} | ${row.actual.expanded} | ${row.actual.scrollWidth} | ${row.mismatches.length} |`
+      ),
+      "",
+      ...mobileRows.flatMap((row) => {
+        if (!row.mismatches.length)
+          return [`- ${row.theme} ${row.width}: none`];
+        return [
+          `- ${row.theme} ${row.width}:`,
+          ...row.mismatches.map(
+            (entry) =>
+              `  - ${entry.metric} → expected ${JSON.stringify(entry.expected)}, actual ${JSON.stringify(entry.actual)}`
+          ),
+        ];
+      }),
+      "",
+    ].join("\n")
+  );
+
+  const failures = rows.filter((row) => row.mismatches.length > 0);
+  const mobileFailures = mobileRows.filter((row) => row.mismatches.length > 0);
+  if (failures.length || mobileFailures.length) {
+    console.error(
+      `TOC audit failed in ${failures.length} desktop and ${mobileFailures.length} mobile snapshots. See ${reportPath}`
+    );
+    process.exit(1);
+  }
+
+  console.log(
+    `TOC parity exact across ${rows.length} desktop snapshots; mobile regression clean across ${mobileRows.length} snapshots. Report: ${reportPath}`
+  );
+})();
diff --git a/scripts/audit-critical-ui-relations.cjs b/scripts/audit-critical-ui-relations.cjs
new file mode 100644
index 000000000..25ba001bf
--- /dev/null
+++ b/scripts/audit-critical-ui-relations.cjs
@@ -0,0 +1,403 @@
+#!/usr/bin/env node
+
+const { chromium } = require("playwright");
+
+const baseUrl =
+  process.env.BASE_URL ?? "http://127.0.0.1:3001/docusaurus-theme/";
+const failures = [];
+
+function expect(condition, message, details) {
+  if (!condition) failures.push({ message, details });
+}
+
+async function openPage(browser, width, route = "showcase/mdx-playground") {
+  const context = await browser.newContext({
+    viewport: { width, height: 900 },
+    colorScheme: "dark",
+  });
+  await context.addInitScript(() => localStorage.setItem("theme", "dark"));
+  const page = await context.newPage();
+  await page.goto(new URL(route, baseUrl).href, { waitUntil: "networkidle" });
+  return { context, page };
+}
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+
+  const { context, page } = await openPage(browser, 1368);
+  const sidebar = page.getByRole("navigation", { name: "Docs sidebar" });
+  const desktopSidebarSpacing = await sidebar.evaluate((element) => {
+    const group = element.closest('[data-slot="sidebar-group"]');
+    const firstItem = element.querySelector(
+      '[data-slot="sidebar-menu-button"]'
+    );
+    const groupRect = group?.getBoundingClientRect();
+    const itemRect = firstItem?.getBoundingClientRect();
+    const itemRange = document.createRange();
+    if (firstItem) itemRange.selectNodeContents(firstItem);
+    const itemTextRect = firstItem ? itemRange.getClientRects()[0] : null;
+    return {
+      group: groupRect
+        ? {
+            x: groupRect.x,
+            width: groupRect.width,
+            padding: getComputedStyle(group).padding,
+          }
+        : null,
+      firstItem: itemRect
+        ? { x: itemRect.x, width: itemRect.width, height: itemRect.height }
+        : null,
+      firstItemTextLeft: itemTextRect?.x ?? null,
+    };
+  });
+  expect(
+    JSON.stringify(desktopSidebarSpacing) ===
+      JSON.stringify({
+        group: { x: 8, width: 280, padding: "8px" },
+        firstItem: { x: 16, width: 264, height: 32 },
+        firstItemTextLeft: 24,
+      }),
+    "Desktop LNB must align its first item with the GNB content edge",
+    desktopSidebarSpacing
+  );
+
+  const guides = sidebar.getByRole("button", { name: "Showcase", exact: true });
+  const guideChild = sidebar.getByText("MDX playground", { exact: true });
+  const expandedBefore = await guides.getAttribute("aria-expanded");
+  await guides.click();
+  await page.waitForTimeout(50);
+  const expandedAfter = await guides.getAttribute("aria-expanded");
+  expect(
+    expandedBefore === "true" && expandedAfter === "false",
+    "LNB category trigger must expose and change aria-expanded",
+    { expandedBefore, expandedAfter }
+  );
+  expect(
+    !(await guideChild.isVisible()),
+    "Collapsed LNB category must hide children"
+  );
+
+  const navbar = await page.evaluate(() => {
+    const brand = document.querySelector(".navbar__brand");
+    const items = [
+      ...document.querySelectorAll(
+        ".navbar__items:not(.navbar__items--right) [data-slot='navigation-menu-list'] > [data-slot='navigation-menu-item'] > :is(a, button)"
+      ),
+    ];
+    const rect = (element) => element?.getBoundingClientRect().toJSON();
+    const brandRect = rect(brand);
+    const itemRects = items.map(rect);
+    return {
+      brandRect,
+      itemRects,
+      itemWeights: items.map((item) => getComputedStyle(item).fontWeight),
+      brandToFirst: itemRects[0]?.x - brandRect?.right,
+      itemGaps: itemRects
+        .slice(1)
+        .map((item, index) => item.x - itemRects[index].right),
+    };
+  });
+  expect(
+    desktopSidebarSpacing.firstItemTextLeft === navbar.brandRect?.x,
+    "Desktop LNB text and GNB title must share the same left content edge",
+    { desktopSidebarSpacing, navbar }
+  );
+  expect(
+    navbar.itemWeights.every((weight) => weight === "500"),
+    "Top-level GNB links and triggers must share the official medium weight",
+    navbar
+  );
+  expect(
+    navbar.brandToFirst >= 8,
+    "GNB brand and first menu need a visible gap",
+    navbar
+  );
+
+  const gnbTrigger = page
+    .locator(".navbar")
+    .getByRole("button", { name: "Showcase", exact: true });
+  await gnbTrigger.click();
+  const longGnbLink = page
+    .locator('[data-slot="navigation-menu-content"]')
+    .getByRole("link", { name: "Markdown + GFM" });
+  await longGnbLink.waitFor();
+  const longGnbLinkMetrics = await longGnbLink.evaluate((element) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    return {
+      lines: range.getClientRects().length,
+      height: getComputedStyle(element).height,
+    };
+  });
+  expect(
+    longGnbLinkMetrics.lines === 1 && longGnbLinkMetrics.height === "36px",
+    "GNB navigation labels must stay on one line",
+    longGnbLinkMetrics
+  );
+  await page.keyboard.press("Escape");
+
+  const breadcrumbGap = await page.evaluate(() => {
+    const breadcrumb = document.querySelector('[data-slot="breadcrumb"]');
+    const title = document.querySelector(".theme-doc-markdown h1");
+    return breadcrumb && title
+      ? title.getBoundingClientRect().top -
+          breadcrumb.getBoundingClientRect().bottom
+      : null;
+  });
+  expect(
+    breadcrumbGap === 12.796875,
+    "Breadcrumb must keep the standard Docusaurus title separation",
+    { breadcrumbGap }
+  );
+
+  const tabsGap = await page.evaluate(() => {
+    const heading = [
+      ...document.querySelectorAll(".theme-doc-markdown h2"),
+    ].find((element) => element.textContent?.trim().startsWith("Tabs"));
+    const tabs = document.querySelector(
+      ".theme-doc-markdown [data-slot='tabs']"
+    );
+    if (!heading || !tabs) return null;
+    return (
+      tabs.getBoundingClientRect().top - heading.getBoundingClientRect().bottom
+    );
+  });
+  expect(tabsGap >= 16, "Tabs need external flow spacing after their heading", {
+    tabsGap,
+  });
+
+  const desktopSurface = await page.evaluate(() => {
+    const wrapper = document.querySelector("[data-slot='sidebar-wrapper']");
+    const sidebarContent = document.querySelector(
+      ".theme-doc-sidebar-desktop [data-slot='sidebar-content']"
+    );
+    const tocHeader = document.querySelector(".theme-doc-toc-desktop__header");
+    const tocScroll = document.querySelector(".theme-doc-toc-desktop__scroll");
+    const code = document.querySelector("figure.theme-code-block");
+    const navbar = document.querySelector(".navbar");
+    const navbarBlur = getComputedStyle(navbar, "::before");
+    const fadeActive = (element) =>
+      element &&
+      getComputedStyle(element).maskImage !== "none" &&
+      getComputedStyle(element).animationTimeline.includes("scroll");
+    return {
+      wrapperBackground: getComputedStyle(wrapper).backgroundColor,
+      codeBackground: getComputedStyle(code).backgroundColor,
+      pageBackground: getComputedStyle(
+        document.documentElement
+      ).getPropertyValue("--background"),
+      sidebarScrollFade: fadeActive(sidebarContent),
+      navbarBlur: {
+        backdropFilter: navbarBlur.backdropFilter,
+        borderBottomWidth: navbarBlur.borderBottomWidth,
+        backgroundColor: navbarBlur.backgroundColor,
+      },
+      toc: {
+        headerAbsent: !tocHeader,
+        scrollFade: fadeActive(tocScroll),
+      },
+    };
+  });
+  await page.evaluate(() => scrollTo(0, document.documentElement.scrollHeight));
+  await page.waitForTimeout(50);
+  const sidebarFooterBoundary = await page.evaluate(() => {
+    const sidebar = document.querySelector(".theme-doc-sidebar-desktop");
+    const sidebarFooter = sidebar?.querySelector(
+      '[data-slot="sidebar-footer"]'
+    );
+    const pageFooter = document.querySelector(".theme-layout-footer");
+    if (!sidebar || !sidebarFooter || !pageFooter) return null;
+    const sidebarRect = sidebar.getBoundingClientRect();
+    const sidebarFooterRect = sidebarFooter.getBoundingClientRect();
+    const pageFooterRect = pageFooter.getBoundingClientRect();
+    return {
+      position: getComputedStyle(sidebar).position,
+      sidebarBoundaryDelta: sidebarRect.bottom - pageFooterRect.top,
+      sidebarFooterBoundaryDelta: sidebarFooterRect.bottom - pageFooterRect.top,
+    };
+  });
+  expect(
+    JSON.stringify(sidebarFooterBoundary) ===
+      JSON.stringify({
+        position: "sticky",
+        sidebarBoundaryDelta: 0,
+        sidebarFooterBoundaryDelta: 0,
+      }),
+    "Desktop LNB and its footer must stop at the page footer boundary",
+    sidebarFooterBoundary
+  );
+  await context.close();
+
+  const mobile = await openPage(browser, 390);
+  await mobile.page
+    .getByRole("button", { name: "Toggle navigation bar" })
+    .click();
+  const mobileSheet = mobile.page.locator('[data-slot="sheet-content"]');
+  await mobileSheet.waitFor();
+  await mobile.page.waitForFunction(() => {
+    const element = document.querySelector('[data-slot="sheet-content"]');
+    return element && getComputedStyle(element).translate === "none";
+  });
+  const mobileSurface = await mobile.page.evaluate(() => {
+    const sheet = document.querySelector('[data-slot="sheet-content"]');
+    const header = sheet?.querySelector('[data-slot="sheet-header"]');
+    const title = sheet?.querySelector('[data-slot="sheet-title"]');
+    const description = sheet?.querySelector('[data-slot="sheet-description"]');
+    const close = sheet?.querySelector('[data-slot="sheet-close"]');
+    const navbarInner = document.querySelector(".navbar__inner");
+    const mobileTrigger = document.querySelector(
+      "[data-mobile-navigation-trigger]"
+    );
+    const mobileTriggerIcon = mobileTrigger?.querySelector("svg");
+    const content = document.querySelector(".theme-doc-page__content");
+    const sidebarContent = sheet?.querySelector(
+      '[data-slot="sidebar-content"]'
+    );
+    const rect = (element) => element?.getBoundingClientRect();
+    const sheetRect = rect(sheet);
+    const headerRect = rect(header);
+    const titleRect = rect(title);
+    const descriptionRect = rect(description);
+    const closeRect = rect(close);
+    return {
+      codeBackground: getComputedStyle(
+        document.querySelector("figure.theme-code-block")
+      ).backgroundColor,
+      bodyBackground: getComputedStyle(document.body).backgroundColor,
+      sidebarScrollFade: Boolean(
+        sidebarContent &&
+        getComputedStyle(sidebarContent).maskImage !== "none" &&
+        getComputedStyle(sidebarContent).animationTimeline.includes("scroll")
+      ),
+      mobileHeader: {
+        inner: (() => {
+          const value = rect(navbarInner);
+          return value ? { x: value.x, width: value.width } : null;
+        })(),
+        trigger: (() => {
+          const value = rect(mobileTrigger);
+          return value ? { x: value.x, width: value.width } : null;
+        })(),
+        triggerIconLeft: rect(mobileTriggerIcon)?.x,
+        content: (() => {
+          const value = rect(content);
+          return value ? { x: value.x, right: value.right } : null;
+        })(),
+      },
+      header: headerRect
+        ? {
+            x: headerRect.x,
+            width: headerRect.width,
+            height: headerRect.height,
+            padding: getComputedStyle(header).padding,
+            gap: getComputedStyle(header).rowGap,
+          }
+        : null,
+      title: titleRect
+        ? { x: titleRect.x, y: titleRect.y, height: titleRect.height }
+        : null,
+      description: descriptionRect
+        ? {
+            x: descriptionRect.x,
+            y: descriptionRect.y,
+            height: descriptionRect.height,
+          }
+        : null,
+      close:
+        closeRect && sheetRect
+          ? {
+              x: closeRect.x,
+              y: closeRect.y,
+              width: closeRect.width,
+              height: closeRect.height,
+              rightInset: sheetRect.right - closeRect.right,
+              titleCenterDelta: titleRect
+                ? Math.abs(
+                    titleRect.y +
+                      titleRect.height / 2 -
+                      (closeRect.y + closeRect.height / 2)
+                  )
+                : null,
+            }
+          : null,
+    };
+  });
+  await mobile.context.close();
+
+  expect(
+    desktopSurface.navbarBlur.backdropFilter === "blur(12px)" &&
+      desktopSurface.navbarBlur.borderBottomWidth === "1px" &&
+      desktopSurface.navbarBlur.backgroundColor !== "rgba(0, 0, 0, 0)",
+    "GNB must match Nextra's translucent blurred surface",
+    desktopSurface.navbarBlur
+  );
+  expect(
+    desktopSurface.sidebarScrollFade === true &&
+      desktopSurface.toc.headerAbsent === true &&
+      desktopSurface.toc.scrollFade === true &&
+      mobileSurface.sidebarScrollFade === true,
+    "LNB and TOC scroll viewports must use scroll-fade without restoring the removed TOC header",
+    { desktopSurface, mobileSurface }
+  );
+  expect(
+    desktopSurface.wrapperBackground === "rgba(0, 0, 0, 0)",
+    "Desktop docs wrapper must not replace the page surface color",
+    desktopSurface
+  );
+  expect(
+    desktopSurface.codeBackground === mobileSurface.codeBackground,
+    "CodeBlock surface color must be viewport invariant",
+    { desktopSurface, mobileSurface }
+  );
+  expect(
+    JSON.stringify(mobileSurface.mobileHeader) ===
+      JSON.stringify({
+        inner: { x: 16, width: 358 },
+        trigger: { x: 16, width: 32 },
+        triggerIconLeft: 24,
+        content: { x: 24, right: 366 },
+      }),
+    "Mobile GNB icons must align with the content edges",
+    mobileSurface.mobileHeader
+  );
+  expect(
+    JSON.stringify({
+      header: mobileSurface.header,
+      title: mobileSurface.title,
+      description: mobileSurface.description,
+      close: mobileSurface.close,
+    }) ===
+      JSON.stringify({
+        header: {
+          x: 0,
+          width: 288,
+          height: 78,
+          padding: "16px",
+          gap: "2px",
+        },
+        title: { x: 16, y: 16, height: 24 },
+        description: { x: 16, y: 42, height: 20 },
+        close: {
+          x: 248,
+          y: 12,
+          width: 28,
+          height: 28,
+          rightInset: 12,
+          titleCenterDelta: 2,
+        },
+      }),
+    "Mobile Sheet header must match the official Sheet composition",
+    mobileSurface
+  );
+
+  await browser.close();
+
+  if (failures.length) {
+    console.error(JSON.stringify({ failures }, null, 2));
+    process.exit(1);
+  }
+  console.log("Critical UI relations and interactions passed.");
+})().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/audit-docs-starter.cjs b/scripts/audit-docs-starter.cjs
new file mode 100644
index 000000000..ba04b5590
--- /dev/null
+++ b/scripts/audit-docs-starter.cjs
@@ -0,0 +1,398 @@
+const fs = require("node:fs");
+const path = require("node:path");
+const { chromium } = require("playwright");
+
+const baseUrl =
+  process.env.DOCS_STARTER_URL ?? "http://127.0.0.1:3001/docusaurus-theme/";
+const artifacts = path.resolve("artifacts/docs-starter");
+const viewports = [
+  { name: "desktop", width: 1440, height: 900 },
+  { name: "tablet", width: 820, height: 900 },
+  { name: "mobile", width: 390, height: 844 },
+];
+const routes = [
+  "",
+  "guides/markdown-gfm",
+  "showcase/mdx-playground",
+  "showcase/mermaid",
+];
+
+const expectedTokens = {
+  light: { background: "lab(100% 0 0)", foreground: "lab(0% 0 0)" },
+  dark: { background: "lab(2.75381% 0 0)", foreground: "lab(98.26% 0 0)" },
+};
+
+function routeUrl(route) {
+  return new URL(route, baseUrl).href;
+}
+
+async function applyTheme(page, theme) {
+  await page.emulateMedia({ colorScheme: theme });
+  await page.evaluate(
+    (value) => document.documentElement.setAttribute("data-theme", value),
+    theme
+  );
+}
+
+async function visible(page, selector) {
+  const candidates = page.locator(selector);
+  for (let index = 0; index < (await candidates.count()); index += 1) {
+    if (await candidates.nth(index).isVisible()) return candidates.nth(index);
+  }
+  throw new Error(`No visible element: ${selector}`);
+}
+
+async function dispatchSidebarShortcut(page) {
+  await page.evaluate(() =>
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "b", ctrlKey: true, bubbles: true })
+    )
+  );
+}
+
+async function auditRoute(page, viewport, theme, route) {
+  const response = await page.goto(routeUrl(route), {
+    waitUntil: "networkidle",
+  });
+  if (!response?.ok()) throw new Error(`HTTP ${response?.status()}`);
+  await applyTheme(page, theme);
+  await page.locator("main").waitFor();
+  await page.locator(".theme-layout-footer").waitFor();
+
+  const result = await page.evaluate(
+    ({ viewportName, themeName, expected }) => {
+      const root = getComputedStyle(document.documentElement);
+      const body = getComputedStyle(document.body);
+      const overflow = document.documentElement.scrollWidth - window.innerWidth;
+      const offenders = Array.from(document.querySelectorAll("body *"))
+        .map((element) => ({ element, rect: element.getBoundingClientRect() }))
+        .filter(({ element, rect }) => {
+          if (
+            element.closest('[data-slot="table-container"], .theme-code-block')
+          )
+            return false;
+          return rect.right > window.innerWidth + 1 || rect.left < -1;
+        })
+        .slice(0, 5)
+        .map(({ element, rect }) => ({
+          tag: element.tagName,
+          slot: element.getAttribute("data-slot"),
+          className:
+            typeof element.className === "string" ? element.className : "",
+          left: rect.left,
+          right: rect.right,
+        }));
+
+      const componentChecks = [];
+      const check = (selector, expectedStyle) => {
+        const element = Array.from(document.querySelectorAll(selector)).find(
+          (candidate) => {
+            const rect = candidate.getBoundingClientRect();
+            const style = getComputedStyle(candidate);
+            return (
+              rect.width > 0 && rect.height > 0 && style.visibility !== "hidden"
+            );
+          }
+        );
+        if (!element) return;
+        const style = getComputedStyle(element);
+        const actual = Object.fromEntries(
+          Object.keys(expectedStyle).map((key) => [key, style[key]])
+        );
+        const differences = Object.entries(expectedStyle).filter(
+          ([key, value]) => actual[key] !== value
+        );
+        if (differences.length)
+          componentChecks.push({ selector, expectedStyle, actual });
+      };
+
+      check('[data-slot="button"]', {
+        fontFamily:
+          'Geist, "Pretendard Variable", "Geist Fallback", sans-serif',
+        fontSize: "14px",
+        lineHeight: "20px",
+        borderTopLeftRadius: "10px",
+      });
+      check('[data-slot="accordion-trigger"]', {
+        fontFamily:
+          'Geist, "Pretendard Variable", "Geist Fallback", sans-serif',
+        fontSize: "14px",
+        lineHeight: "20px",
+        paddingTop: "10px",
+        paddingBottom: "10px",
+      });
+      check('[data-slot="tabs-list"]', {
+        height: "32px",
+        borderTopLeftRadius: "10px",
+        paddingTop: "3px",
+      });
+      check('[data-slot="tabs-trigger"]', {
+        fontSize: "14px",
+        lineHeight: "20px",
+        borderTopLeftRadius: "8px",
+      });
+      check('[data-slot="card"]', {
+        fontSize: "14px",
+        lineHeight: "20px",
+        borderTopLeftRadius: "14px",
+      });
+      check('[data-slot="alert"]', {
+        fontSize: "14px",
+        lineHeight: "20px",
+        borderTopLeftRadius: "10px",
+        paddingTop: "8px",
+        paddingLeft: "10px",
+      });
+      check('[data-slot="table-head"]', {
+        height: "40px",
+        paddingLeft: "8px",
+        paddingRight: "8px",
+        fontSize: "14px",
+        lineHeight: "20px",
+      });
+      check('[data-slot="sidebar-menu-button"]', {
+        height: "32px",
+        fontSize: "14px",
+        lineHeight: "20px",
+      });
+
+      const desktopSidebar = document.querySelector(
+        ".theme-doc-sidebar-desktop"
+      );
+      const mobileTrigger = document.querySelector(
+        "[data-mobile-navigation-trigger]"
+      );
+      const responsiveFailure =
+        viewportName === "desktop"
+          ? !desktopSidebar ||
+            getComputedStyle(desktopSidebar).position !== "sticky" ||
+            mobileTrigger?.getBoundingClientRect().width
+          : !!desktopSidebar?.getBoundingClientRect().width ||
+            !mobileTrigger?.getBoundingClientRect().width;
+
+      return {
+        overflow,
+        offenders,
+        bodyFont: body.fontFamily,
+        background: root.getPropertyValue("--background").trim(),
+        foreground: root.getPropertyValue("--foreground").trim(),
+        expected,
+        themeName,
+        componentChecks,
+        responsiveFailure,
+      };
+    },
+    {
+      viewportName: viewport.name,
+      themeName: theme,
+      expected: expectedTokens[theme],
+    }
+  );
+
+  if (result.overflow > 1 && result.offenders.length) {
+    throw new Error(`document overflow: ${JSON.stringify(result.offenders)}`);
+  }
+  if (!result.bodyFont.startsWith("Geist"))
+    throw new Error(`font drift: ${result.bodyFont}`);
+  if (
+    result.background !== result.expected.background ||
+    result.foreground !== result.expected.foreground
+  ) {
+    throw new Error(`token drift: ${JSON.stringify(result)}`);
+  }
+  if (result.componentChecks.length)
+    throw new Error(
+      `component metric drift: ${JSON.stringify(result.componentChecks)}`
+    );
+  if (result.responsiveFailure)
+    throw new Error("responsive Sidebar/mobile trigger mismatch");
+}
+
+async function auditDesktopInteractions(page, theme) {
+  await page.goto(routeUrl("showcase/mdx-playground"), {
+    waitUntil: "networkidle",
+  });
+  await applyTheme(page, theme);
+
+  const navigationTrigger = await visible(
+    page,
+    '[data-slot="dropdown-menu-trigger"]'
+  );
+  await navigationTrigger.click();
+  await page
+    .locator('[data-slot="dropdown-menu-content"]')
+    .waitFor({ state: "visible" });
+  await page.keyboard.press("Escape");
+
+  const tabTriggers = page.locator('[data-slot="tabs-trigger"]');
+  await tabTriggers.nth(1).click();
+  if ((await tabTriggers.nth(1).getAttribute("aria-selected")) !== "true")
+    throw new Error("Tabs selection failed");
+
+  await page.goto(routeUrl("guides/markdown-gfm"), {
+    waitUntil: "networkidle",
+  });
+  await applyTheme(page, theme);
+  const details = page
+    .locator('.theme-doc-markdown [data-slot="accordion-trigger"]')
+    .last();
+  await details.click();
+  if ((await details.getAttribute("aria-expanded")) !== "true")
+    throw new Error("Accordion expansion failed");
+
+  const sidebar = page.locator('[data-slot="sidebar"]').first();
+  await dispatchSidebarShortcut(page);
+  await page.waitForTimeout(250);
+  if ((await sidebar.getAttribute("data-state")) !== "collapsed")
+    throw new Error("Sidebar collapse shortcut failed");
+  await dispatchSidebarShortcut(page);
+  await page.waitForTimeout(250);
+  if ((await sidebar.getAttribute("data-state")) !== "expanded")
+    throw new Error("Sidebar expand shortcut failed");
+
+  await page.evaluate(() =>
+    window.scrollTo(0, document.documentElement.scrollHeight)
+  );
+  await page.waitForTimeout(100);
+  const desktopSidebar = await visible(page, ".theme-doc-sidebar-desktop");
+  const sidebarRect = await desktopSidebar.boundingBox();
+  const sidebarFooter = await visible(page, '[data-slot="sidebar-footer"]');
+  const sidebarFooterRect = await sidebarFooter.boundingBox();
+  const pageFooter = await visible(page, ".theme-layout-footer");
+  const pageFooterRect = await pageFooter.boundingBox();
+  if (
+    !sidebarRect ||
+    !sidebarFooterRect ||
+    !pageFooterRect ||
+    sidebarRect.y < -1 ||
+    sidebarRect.y + sidebarRect.height > pageFooterRect.y + 1 ||
+    sidebarFooterRect.y + sidebarFooterRect.height > pageFooterRect.y + 1
+  ) {
+    throw new Error("sticky Sidebar/footer boundary failed");
+  }
+
+  const themeTrigger = page.getByRole("button", { name: /^Color theme:/ });
+  await themeTrigger.waitFor({ state: "visible" });
+  await themeTrigger.focus();
+  await page.keyboard.press("Enter");
+  const firstItem = await visible(page, '[data-slot="dropdown-menu-item"]');
+  await firstItem.focus();
+  if (
+    !(await firstItem.evaluate((element) => element.matches(":focus-visible")))
+  ) {
+    throw new Error("theme menu focus-visible failed");
+  }
+  await page.keyboard.press("Escape");
+
+  const tooltipTrigger = await visible(page, '[data-slot="tooltip-trigger"]');
+  await tooltipTrigger.hover();
+  await visible(page, '[data-slot="tooltip-content"]');
+}
+
+async function auditMobileInteractions(page, theme, id) {
+  await page.goto(routeUrl("guides/markdown-gfm"), {
+    waitUntil: "networkidle",
+  });
+  await applyTheme(page, theme);
+  const trigger = page.locator("[data-mobile-navigation-trigger]");
+  await trigger.click();
+  await visible(page, '[data-slot="sheet-overlay"]');
+  await visible(page, '[data-slot="sheet-content"]');
+  await visible(page, '[data-slot="sheet-close"]');
+  await page.screenshot({
+    path: path.join(artifacts, `${id}-sheet-secondary.png`),
+    fullPage: false,
+  });
+
+  const back = page.getByRole("button", { name: /Back to main menu/i });
+  if (await back.isVisible()) {
+    await back.click();
+    await page.screenshot({
+      path: path.join(artifacts, `${id}-sheet-primary.png`),
+      fullPage: false,
+    });
+  }
+
+  await page.keyboard.press("Escape");
+  await page.waitForTimeout(250);
+  if (await page.locator('[data-slot="sheet-content"]').isVisible())
+    throw new Error("Sheet Escape dismissal failed");
+  if (
+    !(await trigger.evaluate((element) => document.activeElement === element))
+  )
+    throw new Error("Sheet focus restoration failed");
+
+  const tocTrigger = await visible(page, '[data-slot="accordion-trigger"]');
+  await tocTrigger.click();
+  if ((await tocTrigger.getAttribute("aria-expanded")) !== "true")
+    throw new Error("mobile TOC expansion failed");
+}
+
+(async () => {
+  fs.mkdirSync(artifacts, { recursive: true });
+  const browser = await chromium.launch({ headless: true });
+  const failures = [];
+
+  for (const viewport of viewports) {
+    for (const theme of ["light", "dark"]) {
+      const context = await browser.newContext({
+        viewport: { width: viewport.width, height: viewport.height },
+        colorScheme: theme,
+      });
+      const page = await context.newPage();
+      const errors = [];
+      page.on(
+        "console",
+        (message) => message.type() === "error" && errors.push(message.text())
+      );
+      page.on("pageerror", (error) => errors.push(error.message));
+
+      for (const route of routes) {
+        const id = `${viewport.name}-${theme}-${route.replaceAll("/", "-") || "home"}`;
+        try {
+          await auditRoute(page, viewport, theme, route);
+          await page.screenshot({
+            path: path.join(artifacts, `${id}.png`),
+            fullPage: true,
+          });
+        } catch (error) {
+          failures.push(`${id}: ${error.message}`);
+        }
+      }
+
+      try {
+        if (viewport.name === "desktop")
+          await auditDesktopInteractions(page, theme);
+        else
+          await auditMobileInteractions(
+            page,
+            theme,
+            `${viewport.name}-${theme}`
+          );
+      } catch (error) {
+        failures.push(
+          `${viewport.name}-${theme}-interactions: ${error.message}`
+        );
+      }
+
+      if (errors.length)
+        failures.push(
+          `${viewport.name}-${theme}-console: ${errors.join(" | ")}`
+        );
+      await context.close();
+    }
+  }
+
+  await browser.close();
+  if (failures.length) {
+    console.error(`Docs starter audit failed:\n${failures.join("\n")}`);
+    process.exit(1);
+  }
+  console.log(
+    `Docs starter audit passed: ${viewports.length * 2 * routes.length} route states + interactions`
+  );
+  console.log(`Screenshots: ${artifacts}`);
+})().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/audit-rendered-surfaces.cjs b/scripts/audit-rendered-surfaces.cjs
new file mode 100644
index 000000000..9e5afc06c
--- /dev/null
+++ b/scripts/audit-rendered-surfaces.cjs
@@ -0,0 +1,1792 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const baseUrl =
+  process.env.DOCS_STARTER_URL ?? "http://127.0.0.1:3001/docusaurus-theme/";
+const artifactDir = path.resolve("artifacts/rendered-surfaces");
+const defaultWidths = [390, 700, 768, 1440, 2736];
+const defaultThemes = ["light", "dark"];
+
+function parseList(value, fallback, mapper = (entry) => entry) {
+  return value
+    ? value
+        .split(",")
+        .map((entry) => entry.trim())
+        .filter(Boolean)
+        .map(mapper)
+    : fallback;
+}
+
+function parseArgs(argv) {
+  const args = {};
+  for (let index = 0; index < argv.length; index += 1) {
+    const part = argv[index];
+    if (!part.startsWith("--")) continue;
+    args[part.slice(2)] = argv[index + 1];
+    index += 1;
+  }
+
+  return {
+    route: args.route ?? "guides/markdown-gfm",
+    widths: parseList(args.widths ?? args.width, defaultWidths, Number),
+    themes: parseList(args.themes ?? args.theme, defaultThemes),
+  };
+}
+
+function routeUrl(route) {
+  return new URL(route, baseUrl).href;
+}
+
+function expectedRootFontSize() {
+  return 15;
+}
+
+function expectedRootLineHeight(width) {
+  return expectedRootFontSize(width) * 1.75;
+}
+
+async function resetFocusForKeyboardNavigation(page) {
+  const proseRoot = page.locator(".theme-doc-markdown");
+  const box = await proseRoot.boundingBox();
+  if (!box) throw new Error("Missing .theme-doc-markdown bounding box");
+
+  await page.mouse.click(
+    box.x + Math.min(8, Math.max(box.width - 1, 1)),
+    box.y + Math.min(8, Math.max(box.height - 1, 1))
+  );
+}
+
+async function tabToProseLink(page, focusTargetLinkIndex, maxTabs = 100) {
+  await resetFocusForKeyboardNavigation(page);
+
+  for (let attempt = 1; attempt <= maxTabs; attempt += 1) {
+    await page.keyboard.press("Tab");
+    const status = await page.evaluate((index) => {
+      const links = Array.from(
+        document.querySelectorAll(".theme-doc-markdown a[href]")
+      );
+      const target = links[index];
+      const activeElement = document.activeElement;
+      return {
+        reached: target instanceof HTMLElement && activeElement === target,
+        focusVisible:
+          target instanceof HTMLElement && target.matches(":focus-visible"),
+        activeTag: activeElement?.tagName ?? null,
+        activeText: (activeElement?.textContent || "")
+          .replace(/\s+/g, " ")
+          .trim()
+          .slice(0, 120),
+      };
+    }, focusTargetLinkIndex);
+
+    if (status.reached) {
+      if (!status.focusVisible)
+        throw new Error("Reached focus target without :focus-visible");
+      return;
+    }
+  }
+
+  const failure = await page.evaluate((index) => {
+    const links = Array.from(
+      document.querySelectorAll(".theme-doc-markdown a[href]")
+    );
+    const target = links[index];
+    const activeElement = document.activeElement;
+    return {
+      targetFound: target instanceof HTMLElement,
+      targetText: (target?.textContent || "")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 120),
+      activeTag: activeElement?.tagName ?? null,
+      activeText: (activeElement?.textContent || "")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 120),
+      activeFocusVisible:
+        activeElement instanceof HTMLElement
+          ? activeElement.matches(":focus-visible")
+          : false,
+    };
+  }, focusTargetLinkIndex);
+  throw new Error(
+    `Failed to reach focus target with Tab within ${maxTabs} steps: ${JSON.stringify(failure)}`
+  );
+}
+
+async function auditCombination(browser, { route, width, theme }) {
+  const context = await browser.newContext({
+    viewport: { width, height: 1400 },
+    colorScheme: theme,
+  });
+  const page = await context.newPage();
+
+  try {
+    const response = await page.goto(routeUrl(route), {
+      waitUntil: "networkidle",
+    });
+    if (!response?.ok()) throw new Error(`HTTP ${response?.status()}`);
+    await page.waitForFunction(
+      (expectedTheme) =>
+        document.documentElement.dataset.theme === expectedTheme,
+      theme
+    );
+    await page.locator(".theme-doc-markdown").waitFor();
+    await page.waitForFunction(() => {
+      const root = document.querySelector(".theme-doc-markdown");
+      const h4 = document.querySelector(".theme-doc-markdown h4");
+      return (
+        root &&
+        getComputedStyle(root).getPropertyValue("--typeset-flow").trim() ===
+          "1.25em" &&
+        h4
+      );
+    });
+
+    const detailsRoot = page.locator("[data-audit-details]");
+    await detailsRoot.waitFor();
+    const detailsTrigger = detailsRoot.locator(
+      '[data-slot="accordion-trigger"]'
+    );
+    const detailsContent = detailsRoot.locator(
+      '[data-slot="accordion-content"]'
+    );
+    await detailsTrigger.waitFor();
+    await detailsTrigger.click();
+    await detailsContent.waitFor();
+    await page.waitForFunction(() => {
+      const root = document.querySelector("[data-audit-details]");
+      const trigger = root?.querySelector('[data-slot="accordion-trigger"]');
+      const content = root?.querySelector('[data-slot="accordion-content"]');
+      if (
+        !(trigger instanceof HTMLElement) ||
+        !(content instanceof HTMLElement)
+      )
+        return false;
+      const rect = content.getBoundingClientRect();
+      return (
+        trigger.getAttribute("aria-expanded") === "true" &&
+        rect.width > 0 &&
+        rect.height > 0 &&
+        getComputedStyle(content).display !== "none" &&
+        getComputedStyle(content).visibility !== "hidden"
+      );
+    });
+
+    const proseLinkCandidates = page.locator(".theme-doc-markdown a[href]");
+    const proseLinkCount = await proseLinkCandidates.count();
+    let focusTargetLinkIndex = -1;
+    for (let index = 0; index < proseLinkCount; index += 1) {
+      const candidate = proseLinkCandidates.nth(index);
+      const isEligible = await candidate.evaluate((element) => {
+        if (!(element instanceof HTMLElement)) return false;
+        if (element.closest("h1, h2, h3, h4, h5, h6")) return false;
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return (
+          rect.width > 0 &&
+          rect.height > 0 &&
+          style.visibility !== "hidden" &&
+          style.display !== "none"
+        );
+      });
+      if (!isEligible) continue;
+      focusTargetLinkIndex = index;
+      break;
+    }
+    if (focusTargetLinkIndex < 0)
+      throw new Error("Missing focusable prose link");
+    await tabToProseLink(page, focusTargetLinkIndex);
+
+    const result = await page.evaluate(
+      ({ width, theme, focusTargetLinkIndex }) => {
+        const proseRoot = document.querySelector(".theme-doc-markdown");
+        if (!proseRoot) throw new Error("Missing .theme-doc-markdown");
+        if (document.documentElement.dataset.theme !== theme) {
+          throw new Error(
+            `Theme mismatch: expected ${theme}, received ${document.documentElement.dataset.theme}`
+          );
+        }
+
+        const tolerance = 0.05;
+        const px = (value) => Number.parseFloat(value) || 0;
+        const round = (value) => Number(value.toFixed(5));
+        const flow = 1.25;
+        const normalizeColor = (value) => {
+          const context = document.createElement("canvas").getContext("2d");
+          if (!context) throw new Error("Missing 2d canvas context");
+          context.fillStyle = "#000000";
+          context.fillStyle = value;
+          return context.fillStyle;
+        };
+
+        const boundaryRoot = (element) => {
+          if (!(element instanceof Element)) return null;
+          const owner = element.closest("[data-slot], .theme-code-block");
+          return owner && proseRoot.contains(owner) ? owner : null;
+        };
+
+        const isVisible = (element) => {
+          const rect = element.getBoundingClientRect();
+          const style = getComputedStyle(element);
+          return (
+            rect.width > 0 &&
+            rect.height > 0 &&
+            style.visibility !== "hidden" &&
+            style.display !== "none"
+          );
+        };
+
+        const all = (selector, options = {}) => {
+          const { allowBoundary = false, within = proseRoot } = options;
+          return Array.from(within.querySelectorAll(selector)).filter(
+            (element) => {
+              if (!allowBoundary && boundaryRoot(element)) return false;
+              return isVisible(element);
+            }
+          );
+        };
+
+        const parentChain = (element) => {
+          const parts = [];
+          let current = element.parentElement;
+          while (current && current !== proseRoot) {
+            parts.unshift(current.tagName.toLowerCase());
+            current = current.parentElement;
+          }
+          return parts.join(">");
+        };
+
+        const describe = (element, index) => ({
+          index,
+          tag: element.tagName.toLowerCase(),
+          text: (element.textContent || "")
+            .replace(/\s+/g, " ")
+            .trim()
+            .slice(0, 120),
+          parentChain: parentChain(element),
+        });
+
+        const previousRelevantSibling = (element) => {
+          let current = element.previousElementSibling;
+          while (current) {
+            if (!boundaryRoot(current) && isVisible(current)) return current;
+            current = current.previousElementSibling;
+          }
+          return null;
+        };
+        const previousTag = (element) =>
+          previousRelevantSibling(element)?.tagName ?? null;
+        const previousAdjacentTag = (element) => {
+          const current = element.previousElementSibling;
+          if (!current || !isVisible(current) || boundaryRoot(current))
+            return null;
+          return current.tagName;
+        };
+
+        const isFirstRelevantChild = (element) => {
+          const parent = element.parentElement;
+          if (!parent) return false;
+          let current = parent.firstElementChild;
+          while (current) {
+            if (!boundaryRoot(current) && isVisible(current))
+              return current === element;
+            current = current.nextElementSibling;
+          }
+          return false;
+        };
+
+        const firstChildResetApplies = (element) => {
+          const parent = element.parentElement;
+          if (!parent) return false;
+          if (
+            (parent === proseRoot ||
+              parent.matches("li, blockquote, td, th, dd, figure")) &&
+            isFirstRelevantChild(element)
+          ) {
+            return true;
+          }
+          return false;
+        };
+
+        const numeric = (style, property) => round(px(style[property]));
+        const exact = (actual, expected, label, failures, detail) => {
+          if (Number.isNaN(actual) || Math.abs(actual - expected) > tolerance) {
+            failures.push({
+              label,
+              expected: round(expected),
+              actual,
+              ...detail,
+            });
+          }
+        };
+        const equal = (actual, expected, label, failures, detail) => {
+          if (actual !== expected)
+            failures.push({ label, expected, actual, ...detail });
+        };
+
+        const rootStyle = getComputedStyle(proseRoot);
+        const mutedColor = normalizeColor(
+          rootStyle.getPropertyValue("--muted-foreground").trim()
+        );
+        const ruleColor = normalizeColor(
+          rootStyle.getPropertyValue("--border").trim()
+        );
+        const rootFontSize = 15;
+        const rootLineHeight = rootFontSize * 1.75;
+        const failures = [];
+        const metrics = {};
+
+        const title =
+          proseRoot.querySelector(":scope > header > h1") ??
+          proseRoot.querySelector(":scope > h1:first-child");
+        if (!title) throw new Error("Missing page title h1");
+        const titleStyle = getComputedStyle(title);
+        exact(
+          numeric(rootStyle, "fontSize"),
+          rootFontSize,
+          "root.fontSize",
+          failures
+        );
+        exact(
+          numeric(rootStyle, "lineHeight"),
+          rootLineHeight,
+          "root.lineHeight",
+          failures
+        );
+        exact(numeric(titleStyle, "fontSize"), 30, "title.fontSize", failures);
+        exact(
+          numeric(titleStyle, "lineHeight"),
+          36,
+          "title.lineHeight",
+          failures
+        );
+        equal(titleStyle.fontWeight, "600", "title.fontWeight", failures);
+
+        const headingConfig = {
+          h2: {
+            size: 1.25,
+            line: 1.4,
+            margin: (fontSize) => fontSize * flow * 1.4,
+          },
+          h3: {
+            size: 1.125,
+            line: 1.45,
+            margin: (fontSize) => fontSize * flow,
+          },
+          h4: { size: 1, line: 1.5, margin: (fontSize) => fontSize * flow },
+          h5: {
+            size: 0.875,
+            line: 1.5,
+            margin: (fontSize) => (fontSize * flow) / 0.875,
+            weight: "500",
+          },
+          h6: {
+            size: 0.8125,
+            line: 1.5,
+            margin: (fontSize) => (fontSize * flow) / 0.8125,
+            weight: "500",
+            letterSpacing: 0.08,
+            transform: "uppercase",
+          },
+        };
+
+        for (const [tag, config] of Object.entries(headingConfig)) {
+          const elements = all(tag);
+          if (!elements.length)
+            failures.push({
+              label: `${tag}.missing`,
+              expected: true,
+              actual: false,
+            });
+          metrics[tag] = elements.map((element, index) => {
+            const style = getComputedStyle(element);
+            const fontSize = numeric(style, "fontSize");
+            const detail = describe(element, index);
+            exact(
+              fontSize,
+              rootFontSize * config.size,
+              `${tag}.fontSize`,
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "lineHeight"),
+              fontSize * config.line,
+              `${tag}.lineHeight`,
+              failures,
+              detail
+            );
+            const expectedMarginTop =
+              previousAdjacentTag(element) &&
+              /^H[1-6]$/.test(previousAdjacentTag(element))
+                ? 16
+                : config.margin(fontSize);
+            exact(
+              numeric(style, "marginTop"),
+              expectedMarginTop,
+              `${tag}.marginTop`,
+              failures,
+              detail
+            );
+            if (config.weight) {
+              equal(
+                style.fontWeight,
+                config.weight,
+                `${tag}.fontWeight`,
+                failures,
+                detail
+              );
+            }
+            if (config.letterSpacing !== undefined) {
+              exact(
+                numeric(style, "letterSpacing"),
+                fontSize * config.letterSpacing,
+                `${tag}.letterSpacing`,
+                failures,
+                detail
+              );
+              equal(
+                style.textTransform,
+                config.transform,
+                `${tag}.textTransform`,
+                failures,
+                detail
+              );
+            }
+            return {
+              text: detail.text,
+              fontSize: style.fontSize,
+              lineHeight: style.lineHeight,
+              marginTop: style.marginTop,
+            };
+          });
+        }
+
+        const flowSelectors = [
+          "p",
+          "blockquote",
+          "figure",
+          "table",
+          "img",
+          "hr",
+          "ul",
+          "ol",
+        ];
+        for (const selector of flowSelectors) {
+          const elements = all(selector);
+          if (!elements.length) continue;
+          metrics[selector] = elements.map((element, index) => {
+            const style = getComputedStyle(element);
+            const fontSize = numeric(style, "fontSize");
+            const detail = describe(element, index);
+            let expectedMarginTop = 0;
+            if (
+              element.parentElement === proseRoot &&
+              previousAdjacentTag(element) === "HEADER"
+            ) {
+              expectedMarginTop = 0;
+            } else if (
+              element.parentElement === proseRoot &&
+              previousAdjacentTag(element) &&
+              /^H[1-6]$/.test(previousAdjacentTag(element))
+            ) {
+              expectedMarginTop = 16;
+            } else if (firstChildResetApplies(element)) {
+              expectedMarginTop = 0;
+            } else if (
+              element.parentElement?.matches("li") &&
+              ["P", "UL", "OL", "BLOCKQUOTE", "TABLE", "FIGURE"].includes(
+                element.tagName
+              )
+            ) {
+              expectedMarginTop = fontSize * 0.5;
+            } else if (element.tagName === "HR") {
+              expectedMarginTop = fontSize * flow * 2.4;
+            } else if (
+              ["UL", "OL", "BLOCKQUOTE", "FIGURE", "TABLE"].includes(
+                element.tagName
+              )
+            ) {
+              expectedMarginTop = fontSize * flow;
+            } else if (element.tagName === "IMG") {
+              expectedMarginTop =
+                element.parentElement?.tagName === "P" ||
+                element.parentElement?.tagName === "FIGURE"
+                  ? 0
+                  : fontSize * flow;
+            } else {
+              expectedMarginTop = fontSize * flow;
+            }
+            exact(
+              numeric(style, "marginTop"),
+              expectedMarginTop,
+              `${selector}.marginTop`,
+              failures,
+              detail
+            );
+            return {
+              text: detail.text,
+              marginTop: style.marginTop,
+            };
+          });
+        }
+
+        const paragraphs = all("p");
+        if (paragraphs.length < 2) {
+          failures.push({
+            label: "p.count",
+            expected: ">=2",
+            actual: paragraphs.length,
+          });
+        }
+        paragraphs.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          exact(
+            numeric(style, "marginBottom"),
+            0,
+            "p.marginBottom",
+            failures,
+            describe(element, index)
+          );
+        });
+
+        const ulDepth = (element) => {
+          let depth = 0;
+          let current = element;
+          while (current && current !== proseRoot) {
+            if (current.tagName === "UL") depth += 1;
+            current = current.parentElement;
+          }
+          return depth;
+        };
+        const expectedListType = (element) => {
+          if (element.tagName === "UL") {
+            const depth = ulDepth(element);
+            if (depth >= 3) return "square";
+            if (depth === 2) return "circle";
+            return element.classList.contains("contains-task-list")
+              ? "none"
+              : "disc";
+          }
+          return "decimal";
+        };
+        const lists = all("ul, ol");
+        lists.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const detail = describe(element, index);
+          const expectedPadding = element.classList.contains(
+            "contains-task-list"
+          )
+            ? numeric(style, "fontSize") * 0.25
+            : numeric(style, "fontSize") * 1.5;
+          exact(
+            numeric(style, "paddingLeft"),
+            expectedPadding,
+            "list.paddingLeft",
+            failures,
+            detail
+          );
+          equal(
+            style.listStyleType,
+            expectedListType(element),
+            "list.listStyleType",
+            failures,
+            detail
+          );
+        });
+
+        const listItems = all("li");
+        listItems.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const detail = describe(element, index);
+          equal(style.display, "list-item", "li.display", failures, detail);
+          if (!element.classList.contains("task-list-item")) {
+            exact(
+              numeric(style, "paddingLeft"),
+              numeric(style, "fontSize") * 0.4,
+              "li.paddingLeft",
+              failures,
+              detail
+            );
+          }
+          if (!firstChildResetApplies(element)) {
+            exact(
+              numeric(style, "marginTop"),
+              numeric(style, "fontSize") * 0.5,
+              "li.marginTop",
+              failures,
+              detail
+            );
+          }
+        });
+
+        const taskCheckboxes = all(
+          'li.task-list-item > input[type="checkbox"]'
+        );
+        if (!taskCheckboxes.length)
+          failures.push({
+            label: "taskCheckbox.missing",
+            expected: true,
+            actual: false,
+          });
+        taskCheckboxes.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const fontSize = numeric(
+            getComputedStyle(element.parentElement),
+            "fontSize"
+          );
+          exact(
+            numeric(style, "marginRight"),
+            fontSize * 0.5,
+            "taskCheckbox.marginRight",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(style, "verticalAlign"),
+            fontSize * -0.1,
+            "taskCheckbox.verticalAlign",
+            failures,
+            describe(element, index)
+          );
+        });
+
+        const markerLists = all("ul > li, ol > li").filter(
+          (element) => !element.classList.contains("task-list-item")
+        );
+        markerLists.forEach((element, index) => {
+          const marker = getComputedStyle(element, "::marker");
+          equal(
+            normalizeColor(marker.color),
+            mutedColor,
+            "li.markerColor",
+            failures,
+            describe(element, index)
+          );
+        });
+
+        const proseLinks = all("a[href]", { allowBoundary: false }).filter(
+          (element) => !element.closest("h1, h2, h3, h4, h5, h6")
+        );
+        if (!proseLinks.length)
+          failures.push({
+            label: "link.missing",
+            expected: true,
+            actual: false,
+          });
+        proseLinks.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          equal(
+            style.color,
+            getComputedStyle(element.parentElement).color,
+            "link.color",
+            failures,
+            describe(element, index)
+          );
+          if (!style.textDecorationLine.includes("underline")) {
+            failures.push({
+              label: "link.textDecorationLine",
+              expected: "underline",
+              actual: style.textDecorationLine,
+              ...describe(element, index),
+            });
+          }
+          equal(
+            style.fontWeight,
+            "500",
+            "link.fontWeight",
+            failures,
+            describe(element, index)
+          );
+        });
+        const focusTargetCandidates = Array.from(
+          proseRoot.querySelectorAll("a[href]")
+        );
+        const focusTarget = focusTargetCandidates[focusTargetLinkIndex] ?? null;
+        if (!focusTarget) {
+          failures.push({
+            label: "link.focusVisible.targetMissing",
+            expected: true,
+            actual: false,
+            focusTargetLinkIndex,
+          });
+        } else {
+          const style = getComputedStyle(focusTarget);
+          const detail = describe(focusTarget, focusTargetLinkIndex);
+          equal(
+            focusTarget.matches(":focus-visible"),
+            true,
+            "link.focusVisible.matches",
+            failures,
+            detail
+          );
+          equal(
+            style.outlineStyle,
+            "solid",
+            "link.focusVisible.outlineStyle",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "outlineWidth"),
+            2,
+            "link.focusVisible.outlineWidth",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "outlineOffset"),
+            2,
+            "link.focusVisible.outlineOffset",
+            failures,
+            detail
+          );
+          const expectedRadius = numeric(style, "fontSize") * 0.125;
+          exact(
+            numeric(style, "borderTopLeftRadius"),
+            expectedRadius,
+            "link.focusVisible.radius.topLeft",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "borderTopRightRadius"),
+            expectedRadius,
+            "link.focusVisible.radius.topRight",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "borderBottomRightRadius"),
+            expectedRadius,
+            "link.focusVisible.radius.bottomRight",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "borderBottomLeftRadius"),
+            expectedRadius,
+            "link.focusVisible.radius.bottomLeft",
+            failures,
+            detail
+          );
+        }
+
+        const hashLinks = all("a.hash-link", { allowBoundary: true });
+        if (!hashLinks.length)
+          failures.push({
+            label: "hashLink.missing",
+            expected: true,
+            actual: false,
+          });
+        hashLinks.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const heading = element.closest("h1, h2, h3, h4, h5, h6");
+          const headingStyle = heading ? getComputedStyle(heading) : null;
+          if (headingStyle) {
+            equal(
+              style.color,
+              headingStyle.color,
+              "hashLink.color",
+              failures,
+              describe(element, index)
+            );
+            equal(
+              style.fontWeight,
+              headingStyle.fontWeight,
+              "hashLink.fontWeight",
+              failures,
+              describe(element, index)
+            );
+          }
+          if (style.textDecorationLine !== "none") {
+            failures.push({
+              label: "hashLink.textDecorationLine",
+              expected: "none",
+              actual: style.textDecorationLine,
+              ...describe(element, index),
+            });
+          }
+        });
+
+        const strongElements = all("strong, b");
+        strongElements.forEach((element, index) => {
+          equal(
+            getComputedStyle(element).fontWeight,
+            "600",
+            "strong.fontWeight",
+            failures,
+            describe(element, index)
+          );
+        });
+        const emphasisElements = all("em, i");
+        emphasisElements.forEach((element, index) => {
+          equal(
+            getComputedStyle(element).fontStyle,
+            "italic",
+            "em.fontStyle",
+            failures,
+            describe(element, index)
+          );
+        });
+        const deletedElements = all("del, s");
+        if (!deletedElements.length)
+          failures.push({
+            label: "del.missing",
+            expected: true,
+            actual: false,
+          });
+        deletedElements.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          equal(
+            normalizeColor(style.color),
+            mutedColor,
+            "del.color",
+            failures,
+            describe(element, index)
+          );
+          if (!style.textDecorationLine.includes("line-through")) {
+            failures.push({
+              label: "del.textDecorationLine",
+              expected: "line-through",
+              actual: style.textDecorationLine,
+              ...describe(element, index),
+            });
+          }
+        });
+
+        const blockquotes = all("blockquote");
+        if (!blockquotes.length)
+          failures.push({
+            label: "blockquote.missing",
+            expected: true,
+            actual: false,
+          });
+        blockquotes.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          exact(
+            numeric(style, "paddingLeft"),
+            numeric(style, "fontSize"),
+            "blockquote.paddingLeft",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(style, "borderLeftWidth"),
+            2,
+            "blockquote.borderLeftWidth",
+            failures,
+            describe(element, index)
+          );
+          equal(
+            normalizeColor(style.borderLeftColor),
+            ruleColor,
+            "blockquote.borderLeftColor",
+            failures,
+            describe(element, index)
+          );
+        });
+
+        const horizontalRules = all("hr");
+        if (!horizontalRules.length)
+          failures.push({ label: "hr.missing", expected: true, actual: false });
+        horizontalRules.forEach((element, index) => {
+          exact(
+            getComputedStyle(element).borderTopStyle === "solid" ? 1 : 0,
+            1,
+            "hr.borderTopStyle",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(getComputedStyle(element), "borderTopWidth"),
+            1,
+            "hr.borderTopWidth",
+            failures,
+            describe(element, index)
+          );
+        });
+
+        const inlineCodes = all(":not(pre) > code");
+        if (!inlineCodes.length)
+          failures.push({
+            label: "inlineCode.missing",
+            expected: true,
+            actual: false,
+          });
+        inlineCodes.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const fontSize = numeric(style, "fontSize");
+          const parentFontSize = numeric(
+            getComputedStyle(element.parentElement),
+            "fontSize"
+          );
+          exact(
+            fontSize,
+            parentFontSize * 0.85,
+            "inlineCode.fontSize",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(style, "paddingTop"),
+            fontSize * 0.125,
+            "inlineCode.paddingTop",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(style, "paddingRight"),
+            fontSize * 0.3,
+            "inlineCode.paddingRight",
+            failures,
+            describe(element, index)
+          );
+        });
+
+        const images = all("img");
+        if (!images.length)
+          failures.push({
+            label: "image.missing",
+            expected: true,
+            actual: false,
+          });
+        images.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const rect = element.getBoundingClientRect();
+          if (
+            element.parentElement?.tagName === "P" ||
+            element.parentElement?.tagName === "FIGURE"
+          ) {
+            exact(
+              numeric(style, "marginTop"),
+              0,
+              "image.marginTopReset",
+              failures,
+              describe(element, index)
+            );
+          }
+          if (
+            element.naturalWidth > 0 &&
+            !(rect.width <= element.naturalWidth + tolerance)
+          ) {
+            failures.push({
+              label: "image.width<=naturalWidth",
+              expected: true,
+              actual: {
+                width: round(rect.width),
+                naturalWidth: element.naturalWidth,
+              },
+              ...describe(element, index),
+            });
+          }
+        });
+
+        const figures = all("figure");
+        if (!figures.length)
+          failures.push({
+            label: "figure.missing",
+            expected: true,
+            actual: false,
+          });
+        figures.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          exact(
+            numeric(style, "marginLeft"),
+            0,
+            "figure.marginLeft",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(style, "marginRight"),
+            0,
+            "figure.marginRight",
+            failures,
+            describe(element, index)
+          );
+        });
+        const figcaptions = all("figcaption");
+        if (!figcaptions.length)
+          failures.push({
+            label: "figcaption.missing",
+            expected: true,
+            actual: false,
+          });
+        figcaptions.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const fontSize = numeric(style, "fontSize");
+          exact(
+            fontSize,
+            rootFontSize * 0.875,
+            "figcaption.fontSize",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(style, "marginTop"),
+            fontSize * 0.857143,
+            "figcaption.marginTop",
+            failures,
+            describe(element, index)
+          );
+        });
+
+        const tables = all("table");
+        const componentTables = all('[data-slot="table"]', {
+          allowBoundary: true,
+        });
+        const actualTables = componentTables.length ? componentTables : tables;
+        const tableContainers = all('[data-slot="table-container"]', {
+          allowBoundary: true,
+        });
+        const tableRows = all('[data-slot="table-row"]', {
+          allowBoundary: true,
+        });
+        const tableHeads = all('[data-slot="table-head"]', {
+          allowBoundary: true,
+        });
+        const tableCells = all('[data-slot="table-cell"]', {
+          allowBoundary: true,
+        });
+        if (!tables.length && !componentTables.length) {
+          failures.push({
+            label: "table.missing",
+            expected: true,
+            actual: false,
+          });
+        }
+        if (!tableContainers.length)
+          failures.push({
+            label: "tableContainer.missing",
+            expected: true,
+            actual: false,
+          });
+        if (!tableRows.length)
+          failures.push({
+            label: "tableRow.missing",
+            expected: true,
+            actual: false,
+          });
+        if (!tableHeads.length)
+          failures.push({
+            label: "tableHead.missing",
+            expected: true,
+            actual: false,
+          });
+        if (!tableCells.length)
+          failures.push({
+            label: "tableCell.missing",
+            expected: true,
+            actual: false,
+          });
+        actualTables.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          exact(
+            numeric(style, "fontSize"),
+            14,
+            "table.fontSize",
+            failures,
+            describe(element, index)
+          );
+          exact(
+            numeric(style, "lineHeight"),
+            20,
+            "table.lineHeight",
+            failures,
+            describe(element, index)
+          );
+        });
+        tableContainers.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          equal(
+            style.overflowX,
+            "auto",
+            "tableContainer.overflowX",
+            failures,
+            describe(element, index)
+          );
+          equal(
+            style.position,
+            "relative",
+            "tableContainer.position",
+            failures,
+            describe(element, index)
+          );
+        });
+        tableHeads.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const detail = describe(element, index);
+          exact(
+            numeric(style, "height"),
+            40,
+            "tableHead.height",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "paddingTop"),
+            0,
+            "tableHead.paddingTop",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "paddingRight"),
+            8,
+            "tableHead.paddingRight",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "paddingBottom"),
+            0,
+            "tableHead.paddingBottom",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "paddingLeft"),
+            8,
+            "tableHead.paddingLeft",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "fontSize"),
+            14,
+            "tableHead.fontSize",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "lineHeight"),
+            20,
+            "tableHead.lineHeight",
+            failures,
+            detail
+          );
+          equal(
+            style.fontWeight,
+            "500",
+            "tableHead.fontWeight",
+            failures,
+            detail
+          );
+          equal(
+            style.textAlign,
+            "left",
+            "tableHead.textAlign",
+            failures,
+            detail
+          );
+          equal(
+            style.verticalAlign,
+            "middle",
+            "tableHead.verticalAlign",
+            failures,
+            detail
+          );
+          equal(
+            style.whiteSpace,
+            "nowrap",
+            "tableHead.whiteSpace",
+            failures,
+            detail
+          );
+        });
+        tableCells.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const detail = describe(element, index);
+          exact(
+            numeric(style, "paddingTop"),
+            8,
+            "tableCell.paddingTop",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "paddingRight"),
+            8,
+            "tableCell.paddingRight",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "paddingBottom"),
+            8,
+            "tableCell.paddingBottom",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "paddingLeft"),
+            8,
+            "tableCell.paddingLeft",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "fontSize"),
+            14,
+            "tableCell.fontSize",
+            failures,
+            detail
+          );
+          exact(
+            numeric(style, "lineHeight"),
+            20,
+            "tableCell.lineHeight",
+            failures,
+            detail
+          );
+          equal(
+            style.verticalAlign,
+            "middle",
+            "tableCell.verticalAlign",
+            failures,
+            detail
+          );
+          equal(
+            style.whiteSpace,
+            "nowrap",
+            "tableCell.whiteSpace",
+            failures,
+            detail
+          );
+        });
+        tableRows.forEach((element, index) => {
+          const style = getComputedStyle(element);
+          const detail = describe(element, index);
+          const inBody = element.parentElement?.matches(
+            '[data-slot="table-body"]'
+          );
+          const isLastBodyRow = Boolean(inBody && !element.nextElementSibling);
+          exact(
+            numeric(style, "borderBottomWidth"),
+            isLastBodyRow ? 0 : 1,
+            "tableRow.borderBottomWidth",
+            failures,
+            detail
+          );
+          if (!isLastBodyRow) {
+            equal(
+              normalizeColor(style.borderBottomColor),
+              ruleColor,
+              "tableRow.borderBottomColor",
+              failures,
+              detail
+            );
+          }
+          const rect = element.getBoundingClientRect();
+          const cellHeight = Math.max(
+            ...Array.from(element.children).map((cell) =>
+              round(cell.getBoundingClientRect().height)
+            )
+          );
+          exact(
+            round(rect.height),
+            cellHeight,
+            "tableRow.height",
+            failures,
+            detail
+          );
+        });
+
+        const prosePre = all("pre");
+        const codeBlocks = all(".theme-code-block", { allowBoundary: true });
+        if (!codeBlocks.length)
+          failures.push({
+            label: "codeBlock.missing",
+            expected: true,
+            actual: false,
+          });
+        equal(prosePre.length, 0, "prosePre.count", failures, {
+          index: 0,
+          tag: "pre",
+          text: "",
+          parentChain: "",
+        });
+        codeBlocks.forEach((element, index) => {
+          const pre = element.querySelector("pre");
+          if (!pre || !isVisible(pre)) {
+            failures.push({
+              label: "codeBlock.preMissing",
+              expected: true,
+              actual: false,
+              ...describe(element, index),
+            });
+            return;
+          }
+          const style = getComputedStyle(pre);
+          exact(
+            numeric(style, "marginTop"),
+            0,
+            "codeBlock.pre.marginTop",
+            failures,
+            describe(pre, index)
+          );
+          exact(
+            numeric(style, "fontSize"),
+            14,
+            "codeBlock.pre.fontSize",
+            failures,
+            describe(pre, index)
+          );
+        });
+
+        const componentChecks = [];
+        for (const slot of [
+          "alert-description",
+          "alert-title",
+          "accordion-trigger",
+        ]) {
+          const elements = all(`[data-slot="${slot}"]`, {
+            allowBoundary: true,
+          });
+          elements.forEach((element, index) => {
+            const style = getComputedStyle(element);
+            componentChecks.push({
+              slot,
+              index,
+              fontSize: style.fontSize,
+              lineHeight: style.lineHeight,
+            });
+            exact(
+              numeric(style, "fontSize"),
+              14,
+              `${slot}.fontSize`,
+              failures,
+              describe(element, index)
+            );
+            exact(
+              numeric(style, "lineHeight"),
+              20,
+              `${slot}.lineHeight`,
+              failures,
+              describe(element, index)
+            );
+          });
+        }
+
+        const auditDetails = proseRoot.querySelector("[data-audit-details]");
+        if (!auditDetails) {
+          failures.push({
+            label: "auditDetails.missing",
+            expected: true,
+            actual: false,
+          });
+        } else {
+          const trigger = auditDetails.querySelector(
+            '[data-slot="accordion-trigger"]'
+          );
+          const content = auditDetails.querySelector(
+            '[data-slot="accordion-content"]'
+          );
+          if (!(trigger instanceof HTMLElement)) {
+            failures.push({
+              label: "auditDetails.triggerMissing",
+              expected: true,
+              actual: false,
+            });
+          } else {
+            const style = getComputedStyle(trigger);
+            const detail = describe(trigger, 0);
+            componentChecks.push({
+              slot: "audit-details-trigger",
+              index: 0,
+              fontSize: style.fontSize,
+              lineHeight: style.lineHeight,
+            });
+            equal(
+              trigger.getAttribute("aria-expanded"),
+              "true",
+              "auditDetails.trigger.ariaExpanded",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "fontSize"),
+              14,
+              "auditDetails.trigger.fontSize",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "lineHeight"),
+              20,
+              "auditDetails.trigger.lineHeight",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "paddingTop"),
+              10,
+              "auditDetails.trigger.paddingTop",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "paddingBottom"),
+              10,
+              "auditDetails.trigger.paddingBottom",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "borderTopWidth"),
+              1,
+              "auditDetails.trigger.borderTopWidth",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "borderRightWidth"),
+              1,
+              "auditDetails.trigger.borderRightWidth",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "borderBottomWidth"),
+              1,
+              "auditDetails.trigger.borderBottomWidth",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "borderLeftWidth"),
+              1,
+              "auditDetails.trigger.borderLeftWidth",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "borderTopLeftRadius"),
+              10,
+              "auditDetails.trigger.radius",
+              failures,
+              detail
+            );
+          }
+          if (!(content instanceof HTMLElement)) {
+            failures.push({
+              label: "auditDetails.contentMissing",
+              expected: true,
+              actual: false,
+            });
+          } else {
+            const style = getComputedStyle(content);
+            const rect = content.getBoundingClientRect();
+            const detail = describe(content, 0);
+            componentChecks.push({
+              slot: "audit-details-content",
+              index: 0,
+              fontSize: style.fontSize,
+              lineHeight: style.lineHeight,
+            });
+            exact(
+              numeric(style, "fontSize"),
+              14,
+              "auditDetails.content.fontSize",
+              failures,
+              detail
+            );
+            exact(
+              numeric(style, "lineHeight"),
+              20,
+              "auditDetails.content.lineHeight",
+              failures,
+              detail
+            );
+            if (!(rect.width > 0 && rect.height > 0)) {
+              failures.push({
+                label: "auditDetails.content.visible",
+                expected: true,
+                actual: false,
+                ...detail,
+              });
+            }
+            const contentInner = content.firstElementChild;
+            if (!(contentInner instanceof HTMLElement)) {
+              failures.push({
+                label: "auditDetails.contentInner.missing",
+                expected: true,
+                actual: false,
+                ...detail,
+              });
+            } else {
+              const innerStyle = getComputedStyle(contentInner);
+              exact(
+                numeric(innerStyle, "paddingTop"),
+                0,
+                "auditDetails.contentInner.paddingTop",
+                failures,
+                describe(contentInner, 0)
+              );
+              exact(
+                numeric(innerStyle, "paddingBottom"),
+                10,
+                "auditDetails.contentInner.paddingBottom",
+                failures,
+                describe(contentInner, 0)
+              );
+            }
+            const contentLink = content.querySelector("a[href]");
+            if (!(contentLink instanceof HTMLAnchorElement)) {
+              failures.push({
+                label: "auditDetails.content.linkMissing",
+                expected: true,
+                actual: false,
+                ...detail,
+              });
+            } else {
+              const linkStyle = getComputedStyle(contentLink);
+              equal(
+                new URL(contentLink.href).pathname,
+                "/docusaurus-theme/showcase/mermaid",
+                "auditDetails.content.linkHref",
+                failures,
+                describe(contentLink, 0)
+              );
+              if (!linkStyle.textDecorationLine.includes("underline")) {
+                failures.push({
+                  label: "auditDetails.content.linkUnderline",
+                  expected: "underline",
+                  actual: linkStyle.textDecorationLine,
+                  ...describe(contentLink, 0),
+                });
+              }
+              exact(
+                numeric(linkStyle, "textUnderlineOffset"),
+                3,
+                "auditDetails.content.linkUnderlineOffset",
+                failures,
+                describe(contentLink, 0)
+              );
+            }
+            const contentCode = content.querySelector(":not(pre) > code");
+            if (!(contentCode instanceof HTMLElement)) {
+              failures.push({
+                label: "auditDetails.content.codeMissing",
+                expected: true,
+                actual: false,
+                ...detail,
+              });
+            } else {
+              equal(
+                contentCode.textContent?.trim(),
+                "code",
+                "auditDetails.content.codeText",
+                failures,
+                describe(contentCode, 0)
+              );
+            }
+          }
+        }
+
+        const ratios = {
+          h2ToRoot:
+            metrics.h2?.map((entry) =>
+              round(px(entry.fontSize) / rootFontSize)
+            ) ?? [],
+          h3ToRoot:
+            metrics.h3?.map((entry) =>
+              round(px(entry.fontSize) / rootFontSize)
+            ) ?? [],
+          h4ToRoot:
+            metrics.h4?.map((entry) =>
+              round(px(entry.fontSize) / rootFontSize)
+            ) ?? [],
+          h5ToRoot:
+            metrics.h5?.map((entry) =>
+              round(px(entry.fontSize) / rootFontSize)
+            ) ?? [],
+          h6ToRoot:
+            metrics.h6?.map((entry) =>
+              round(px(entry.fontSize) / rootFontSize)
+            ) ?? [],
+        };
+        ratios.h2ToRoot.forEach((value, index) =>
+          exact(value, 1.25, "ratio.h2/root", failures, { index })
+        );
+        ratios.h3ToRoot.forEach((value, index) =>
+          exact(value, 1.125, "ratio.h3/root", failures, { index })
+        );
+        ratios.h4ToRoot.forEach((value, index) =>
+          exact(value, 1, "ratio.h4/root", failures, { index })
+        );
+        ratios.h5ToRoot.forEach((value, index) =>
+          exact(value, 0.875, "ratio.h5/root", failures, { index })
+        );
+        ratios.h6ToRoot.forEach((value, index) =>
+          exact(value, 0.8125, "ratio.h6/root", failures, { index })
+        );
+
+        return {
+          routeTitle: document.title,
+          counts: {
+            paragraphs: paragraphs.length,
+            headings: Object.fromEntries(
+              Object.keys(headingConfig).map((tag) => [
+                tag,
+                metrics[tag]?.length ?? 0,
+              ])
+            ),
+            lists: lists.length,
+            listItems: listItems.length,
+            links: proseLinks.length,
+            hashLinks: hashLinks.length,
+            inlineCode: inlineCodes.length,
+            images: images.length,
+            figures: figures.length,
+            tables: actualTables.length,
+            tableRows: tableRows.length,
+            tableHeads: tableHeads.length,
+            tableCells: tableCells.length,
+            codeBlocks: codeBlocks.length,
+            componentSlots: componentChecks.length,
+          },
+          metrics: {
+            root: {
+              fontSize: rootStyle.fontSize,
+              lineHeight: rootStyle.lineHeight,
+            },
+            title: {
+              fontSize: titleStyle.fontSize,
+              lineHeight: titleStyle.lineHeight,
+              fontWeight: titleStyle.fontWeight,
+            },
+            ratios,
+            componentChecks,
+          },
+          failures,
+        };
+      },
+      { width, theme, focusTargetLinkIndex }
+    );
+
+    return {
+      status: result.failures.length ? "failed" : "passed",
+      route,
+      theme,
+      width,
+      title: result.routeTitle,
+      counts: result.counts,
+      metrics: result.metrics,
+      failures: result.failures,
+    };
+  } finally {
+    await context.close();
+  }
+}
+
+function makeReport(results) {
+  const lines = [
+    "# Rendered surfaces focused audit",
+    "",
+    "| Width | Theme | Result | Root font-size | Root line-height | Notes |",
+    "| --- | --- | --- | --- | --- | --- |",
+  ];
+
+  for (const result of results) {
+    lines.push(
+      `| ${result.width} | ${result.theme} | ${result.status} | ${result.metrics.root.fontSize} | ${result.metrics.root.lineHeight} | h2=${result.counts.headings.h2}, h3=${result.counts.headings.h3}, tableRows=${result.counts.tableRows}, tableCells=${result.counts.tableCells}, codeBlocks=${result.counts.codeBlocks} |`
+    );
+  }
+
+  const failed = results.filter((result) => result.status !== "passed");
+  lines.push("");
+  if (failed.length) {
+    lines.push("## Failures");
+    lines.push("");
+    failed.forEach((result) => {
+      lines.push(`### ${result.width}px / ${result.theme}`);
+      result.failures.forEach((failure) => {
+        lines.push(
+          `- ${failure.label}: expected ${JSON.stringify(failure.expected)}, actual ${JSON.stringify(failure.actual)}`
+        );
+      });
+      lines.push("");
+    });
+  } else {
+    lines.push(
+      "All focused responsive/theme combinations passed exact rendered-surface checks."
+    );
+  }
+
+  return `${lines.join("\n")}\n`;
+}
+
+async function main(argv = process.argv.slice(2)) {
+  const options = parseArgs(argv);
+  const { chromium } = require("playwright");
+  const browser = await chromium.launch({ headless: true });
+
+  try {
+    const results = [];
+    for (const width of options.widths) {
+      for (const theme of options.themes) {
+        results.push(
+          await auditCombination(browser, {
+            route: options.route,
+            width,
+            theme,
+          })
+        );
+      }
+    }
+
+    const singleRun = results.length === 1;
+    if (!singleRun) {
+      fs.mkdirSync(artifactDir, { recursive: true });
+      fs.writeFileSync(
+        path.join(artifactDir, "focused-audit.json"),
+        `${JSON.stringify(results, null, 2)}\n`
+      );
+      fs.writeFileSync(
+        path.join(artifactDir, "report.md"),
+        makeReport(results)
+      );
+    }
+
+    const failed = results.filter((result) => result.status !== "passed");
+    if (failed.length) {
+      throw new Error(JSON.stringify(failed, null, 2));
+    }
+
+    if (singleRun) {
+      console.log(JSON.stringify(results[0], null, 2));
+      return;
+    }
+
+    console.log(
+      JSON.stringify(
+        {
+          status: "passed",
+          route: options.route,
+          widths: options.widths,
+          themes: options.themes,
+          artifactDir,
+        },
+        null,
+        2
+      )
+    );
+  } finally {
+    await browser.close();
+  }
+}
+
+module.exports = {
+  parseArgs,
+  main,
+};
+
+if (require.main === module) {
+  main().catch((error) => {
+    console.error(error.stack || error.message);
+    process.exit(1);
+  });
+}
diff --git a/scripts/capture-actual-route-evidence.cjs b/scripts/capture-actual-route-evidence.cjs
new file mode 100644
index 000000000..11d4c5d7d
--- /dev/null
+++ b/scripts/capture-actual-route-evidence.cjs
@@ -0,0 +1,365 @@
+#!/usr/bin/env node
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { chromium } = require("playwright");
+const {
+  discoverActualRoutes,
+  projectRoot,
+} = require("./lib/actual-routes.cjs");
+
+const localBase = (
+  process.env.DOCS_STARTER_URL ?? "http://127.0.0.1:3001/docusaurus-theme/"
+).replace(/\/?$/, "/");
+const officialUrl = "https://ui.shadcn.com/docs/components/base/button";
+const artifactDir = path.join(projectRoot, "artifacts/actual-route-parity");
+const routeDir = path.join(artifactDir, "routes");
+const interactionDir = path.join(artifactDir, "interactions");
+const codeBlockDir = path.join(artifactDir, "codeblock");
+const oracleDir = path.join(artifactDir, "oracle-shell");
+const themes = ["light", "dark"];
+const widths = [
+  320, 325, 385, 408, 480, 512, 584, 640, 768, 1024, 1280, 1920, 2736, 3840,
+];
+const codeBlockWidths = [390, 768, 1440];
+const oracleWidths = [390, 1024, 1280, 1440];
+const height = 900;
+
+const componentUrls = {
+  Accordion: "https://ui.shadcn.com/docs/components/base/accordion",
+  Alert: "https://ui.shadcn.com/docs/components/base/alert",
+  Badge: "https://ui.shadcn.com/docs/components/base/badge",
+  Breadcrumb: "https://ui.shadcn.com/docs/components/base/breadcrumb",
+  Button: "https://ui.shadcn.com/docs/components/base/button",
+  Card: "https://ui.shadcn.com/docs/components/base/card",
+  Collapsible: "https://ui.shadcn.com/docs/components/base/collapsible",
+  DropdownMenu: "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+  Input: "https://ui.shadcn.com/docs/components/base/input",
+  NavigationMenu: "https://ui.shadcn.com/docs/components/base/navigation-menu",
+  Sheet: "https://ui.shadcn.com/docs/components/base/sheet",
+  Sidebar: "https://ui.shadcn.com/docs/components/base/sidebar",
+  Table: "https://ui.shadcn.com/docs/components/base/table",
+  Tabs: "https://ui.shadcn.com/docs/components/base/tabs",
+  Tooltip: "https://ui.shadcn.com/docs/components/base/tooltip",
+};
+
+function routeUrl(route) {
+  return new URL(route, localBase).href;
+}
+
+function safeRoute(route) {
+  return route ? route.replaceAll("/", "-") : "root";
+}
+
+async function themedContext(browser, theme, width) {
+  const context = await browser.newContext({
+    viewport: { width, height },
+    colorScheme: theme,
+  });
+  await context.addInitScript(
+    (value) => localStorage.setItem("theme", value),
+    theme
+  );
+  return context;
+}
+
+async function captureLocator(locator, output) {
+  if ((await locator.count()) !== 1 || !(await locator.isVisible()))
+    return false;
+  await locator.screenshot({ path: output });
+  return true;
+}
+
+(async () => {
+  const discovery = discoverActualRoutes();
+  for (const directory of [routeDir, interactionDir, codeBlockDir, oracleDir]) {
+    fs.rmSync(directory, { recursive: true, force: true });
+    fs.mkdirSync(directory, { recursive: true });
+  }
+  const browser = await chromium.launch({ headless: true });
+  const routeScreenshots = [];
+  const interactionScreenshots = [];
+  const codeBlockScreenshots = [];
+  const oracleScreenshots = [];
+
+  try {
+    for (const theme of themes) {
+      for (const width of widths) {
+        const context = await themedContext(browser, theme, width);
+        for (const route of discovery.primaryRoutes) {
+          const page = await context.newPage();
+          await page.goto(routeUrl(route), { waitUntil: "networkidle" });
+          const output = path.join(
+            routeDir,
+            `${safeRoute(route)}-${width}-${theme}.png`
+          );
+          await page.screenshot({ path: output, fullPage: true });
+          routeScreenshots.push(path.relative(projectRoot, output));
+          await page.close();
+        }
+        await context.close();
+      }
+    }
+
+    for (const theme of themes) {
+      for (const width of [390, 1440]) {
+        const context = await themedContext(browser, theme, width);
+        const page = await context.newPage();
+
+        await page.goto(routeUrl("guides/markdown-gfm"), {
+          waitUntil: "networkidle",
+        });
+        const themeTrigger = page.getByRole("button", {
+          name: /^Color theme:/,
+        });
+        await themeTrigger.click();
+        await page.locator('[data-slot="dropdown-menu-content"]').waitFor();
+        await page.waitForTimeout(200);
+        let output = path.join(
+          interactionDir,
+          `theme-menu-${width}-${theme}.png`
+        );
+        await page.screenshot({ path: output });
+        interactionScreenshots.push(path.relative(projectRoot, output));
+        await page.keyboard.press("Escape");
+
+        const details = page
+          .locator('.theme-doc-markdown [data-slot="accordion-trigger"]')
+          .last();
+        await details.scrollIntoViewIfNeeded();
+        await details.click();
+        await page.waitForTimeout(300);
+        output = path.join(
+          interactionDir,
+          `details-open-${width}-${theme}.png`
+        );
+        await page.screenshot({ path: output });
+        interactionScreenshots.push(path.relative(projectRoot, output));
+
+        if (width < 1024) {
+          await page.evaluate(() => scrollTo(0, 0));
+          const trigger = page.locator("[data-mobile-navigation-trigger]");
+          await trigger.click();
+          await page.locator('[data-slot="sheet-content"]').waitFor();
+          await page.waitForTimeout(300);
+          output = path.join(interactionDir, `sheet-secondary-${theme}.png`);
+          await page.screenshot({ path: output });
+          interactionScreenshots.push(path.relative(projectRoot, output));
+          const back = page.getByRole("button", { name: "Back to main menu" });
+          if (await back.isVisible()) {
+            await back.click();
+            await page.waitForTimeout(150);
+            output = path.join(interactionDir, `sheet-primary-${theme}.png`);
+            await page.screenshot({ path: output });
+            interactionScreenshots.push(path.relative(projectRoot, output));
+          }
+          await page.keyboard.press("Escape");
+        } else {
+          const nav = page
+            .locator(".navbar")
+            .getByRole("button", { name: "Showcase", exact: true });
+          await nav.click();
+          await page.locator('[data-slot="navigation-menu-content"]').waitFor();
+          await page.waitForTimeout(400);
+          output = path.join(interactionDir, `navigation-menu-${theme}.png`);
+          await page.screenshot({ path: output });
+          interactionScreenshots.push(path.relative(projectRoot, output));
+          await page.keyboard.press("Escape");
+          await page.goto(routeUrl(""), { waitUntil: "networkidle" });
+          await page.evaluate(() =>
+            scrollTo(0, document.documentElement.scrollHeight)
+          );
+          await page.waitForTimeout(200);
+          output = path.join(
+            interactionDir,
+            `lnb-footer-boundary-${theme}.png`
+          );
+          await page.screenshot({ path: output });
+          interactionScreenshots.push(path.relative(projectRoot, output));
+        }
+
+        await page.goto(routeUrl("showcase/mdx-playground"), {
+          waitUntil: "networkidle",
+        });
+        const tabs = page.locator('[data-slot="tabs-trigger"]');
+        await tabs.nth(1).click();
+        await tabs.nth(1).scrollIntoViewIfNeeded();
+        output = path.join(
+          interactionDir,
+          `tabs-selected-${width}-${theme}.png`
+        );
+        await page.screenshot({ path: output });
+        interactionScreenshots.push(path.relative(projectRoot, output));
+
+        if (width < 1024) {
+          await page.goto(routeUrl("showcase/mermaid"), {
+            waitUntil: "networkidle",
+          });
+          const diagram = page.locator(".docusaurus-mermaid-container").first();
+          await diagram.scrollIntoViewIfNeeded();
+          await diagram.evaluate((element) => {
+            element.scrollLeft = element.scrollWidth;
+          });
+          output = path.join(interactionDir, `mermaid-scrolled-${theme}.png`);
+          await page.screenshot({ path: output });
+          interactionScreenshots.push(path.relative(projectRoot, output));
+        }
+
+        await page.close();
+        await context.close();
+      }
+    }
+
+    for (const theme of themes) {
+      for (const width of codeBlockWidths) {
+        const context = await themedContext(browser, theme, width);
+        const official = await context.newPage();
+        const local = await context.newPage();
+        await official.goto(officialUrl, { waitUntil: "networkidle" });
+        await local.goto(routeUrl("guides/markdown-gfm"), {
+          waitUntil: "networkidle",
+        });
+
+        for (const [surface, locator] of [
+          [
+            "official-title",
+            official
+              .locator("figure[data-rehype-pretty-code-figure]:has(figcaption)")
+              .first(),
+          ],
+          [
+            "local-title",
+            local.locator("figure.theme-code-block:has(figcaption)").first(),
+          ],
+          [
+            "local-highlight",
+            local
+              .locator(
+                "figure.theme-code-block:has(.theme-code-block-highlighted-line)"
+              )
+              .first(),
+          ],
+        ]) {
+          const output = path.join(
+            codeBlockDir,
+            `${surface}-${width}-${theme}.png`
+          );
+          if (await captureLocator(locator, output)) {
+            codeBlockScreenshots.push(path.relative(projectRoot, output));
+          }
+        }
+        await context.close();
+      }
+    }
+
+    for (const theme of themes) {
+      for (const width of oracleWidths) {
+        const context = await themedContext(browser, theme, width);
+        const official = await context.newPage();
+        const local = await context.newPage();
+        await official.goto(officialUrl, { waitUntil: "networkidle" });
+        await local.goto(routeUrl("guides/markdown-gfm"), {
+          waitUntil: "networkidle",
+        });
+
+        for (const [kind, page] of [
+          ["official", official],
+          ["local", local],
+        ]) {
+          let output = path.join(
+            oracleDir,
+            `${kind}-${width}-${theme}-viewport.png`
+          );
+          await page.screenshot({ path: output });
+          oracleScreenshots.push(path.relative(projectRoot, output));
+
+          const selectors =
+            kind === "official"
+              ? {
+                  header: page.locator("header").first(),
+                  sidebar: page
+                    .locator('[data-slot="sidebar"]')
+                    .filter({ visible: true }),
+                  docs: page.locator('[data-slot="docs"]'),
+                }
+              : {
+                  header: page.locator(".navbar"),
+                  sidebar: page
+                    .locator('[data-slot="sidebar-container"]')
+                    .filter({ visible: true }),
+                  docs: page.locator('[data-slot="docs"]'),
+                };
+          for (const [surface, locator] of Object.entries(selectors)) {
+            output = path.join(
+              oracleDir,
+              `${kind}-${width}-${theme}-${surface}.png`
+            );
+            if (await captureLocator(locator, output)) {
+              oracleScreenshots.push(path.relative(projectRoot, output));
+            }
+          }
+        }
+        await context.close();
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  const result = {
+    generatedAt: new Date().toISOString(),
+    primaryRoutes: discovery.primaryRoutes,
+    supplementalRoutes: discovery.supplementalRoutes,
+    themes,
+    widths,
+    codeBlockWidths,
+    oracleWidths,
+    componentUrls,
+    routeScreenshots,
+    interactionScreenshots,
+    codeBlockScreenshots,
+    oracleScreenshots,
+  };
+  fs.writeFileSync(
+    path.join(artifactDir, "results.json"),
+    JSON.stringify(result, null, 2)
+  );
+
+  const report = [
+    "# Actual-route parity evidence",
+    "",
+    `- primary routes: ${discovery.primaryRoutes.length}`,
+    `- original full-page route screenshots: ${routeScreenshots.length}`,
+    `- interaction screenshots: ${interactionScreenshots.length}`,
+    `- official/local CodeBlock crops: ${codeBlockScreenshots.length}`,
+    `- official/local shell screenshots and crops: ${oracleScreenshots.length}`,
+    `- themes: ${themes.join(", ")}`,
+    `- widths: ${widths.join(", ")}`,
+    "",
+    "## Evidence model",
+    "",
+    "- Starter content/data remains Docusaurus-owned; official component/state comparisons have no contextual exclusions.",
+    "- User-approved shell composition: LNB shares the content background, has no right border, remains sticky inside main, and stops at the page-footer boundary; desktop shell caps at Nextra’s computed 1440px max-width; LNB text aligns with the GNB title; top-level GNB links/triggers share official medium weight; GNB uses Nextra-style blur; mobile GNB uses a 16px outer inset; TOC/LNB use scroll-fade with a fixed TOC title.",
+    "- Live shell geometry is exact in `.pi-subagents/artifacts/shell-geometry-report.md`.",
+    "- Live TOC geometry/states are exact in `.pi-subagents/artifacts/toc-parity-report.md`.",
+    "- Official component/state comparison is `406/406` exact with zero exclusions in `artifacts/base-nova-parity/`.",
+    "- Official registry component source identity is protected by `registry-source-contract.test.ts`.",
+    "- Actual-route element ownership is in `artifacts/rendered-surfaces/inventory.json`.",
+    "- Every integer width `320..3840` is in `artifacts/responsive-sweep/results.json`.",
+    "- Full-page route and interaction screenshots are mandatory manual composition evidence, not substitutes for metric/state comparison.",
+    "",
+    "## Official component oracles",
+    "",
+    ...Object.entries(componentUrls).map(([name, url]) => `- ${name}: ${url}`),
+    "",
+    "## Approval gate",
+    "",
+    "No commit, push, deployment, or npm publication is permitted until explicit user visual approval.",
+    "",
+  ].join("\n");
+  fs.writeFileSync(path.join(artifactDir, "report.md"), report);
+
+  console.log(
+    `Captured ${routeScreenshots.length} route, ${interactionScreenshots.length} interaction, ${codeBlockScreenshots.length} CodeBlock, and ${oracleScreenshots.length} oracle screenshots.`
+  );
+})();
diff --git a/scripts/compare-base-nova.cjs b/scripts/compare-base-nova.cjs
new file mode 100644
index 000000000..b1f37c8d0
--- /dev/null
+++ b/scripts/compare-base-nova.cjs
@@ -0,0 +1,974 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { chromium } = require("playwright");
+
+const localBase = (
+  process.env.LOCAL_BASE_URL ?? "http://127.0.0.1:3000/docusaurus-theme/"
+).replace(/\/?$/, "/");
+const outputDirectory = path.resolve(
+  process.argv[2] ?? "/tmp/base-nova-parity"
+);
+const officialBase = "https://ui.shadcn.com/docs/components/base/";
+
+const properties = [
+  "fontFamily",
+  "fontSize",
+  "lineHeight",
+  "fontWeight",
+  "letterSpacing",
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "boxSizing",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "rowGap",
+  "columnGap",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius",
+  "backgroundColor",
+  "color",
+  "opacity",
+  "boxShadow",
+  "transform",
+  "position",
+];
+
+const colorProperties = new Set([
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "backgroundColor",
+  "color",
+]);
+
+const contentDependent = new Set();
+
+const cases = [
+  {
+    name: "button-outline",
+    component: "button",
+    official: "[data-slot=button]",
+    route: "base-nova-parity",
+    local: '[data-parity=button] [data-slot=button]:has-text("Button")',
+  },
+  {
+    name: "button-disabled",
+    component: "button",
+    official: "[data-slot=button]",
+    route: "base-nova-parity",
+    local: '[data-parity=button] [data-slot=button]:has-text("Button")',
+    mutateDisabled: true,
+    states: ["rest"],
+  },
+  {
+    name: "button-loading",
+    component: "button",
+    official: "[data-slot=button]:disabled:has([data-slot=spinner])",
+    route: "base-nova-parity",
+    local: "[data-parity=button] [data-slot=button]:has([data-slot=spinner])",
+    states: ["rest"],
+  },
+  {
+    name: "code-block-copy-action",
+    component: "button",
+    official: ".typeset > figure [data-slot=copy-button]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: "[data-parity=code] [data-slot=copy-button]",
+    compareIdentity: true,
+  },
+  {
+    name: "code-block-surface",
+    component: "button",
+    official: ".typeset > figure[data-rehype-pretty-code-figure]",
+    scopePreview: false,
+    fixture: "code",
+    route: "base-nova-parity",
+    local: "[data-parity=code] .theme-code-block",
+    compareIdentity: true,
+  },
+  {
+    name: "accordion-trigger-collapsed",
+    component: "accordion",
+    official: "[data-slot=accordion-trigger]",
+    fixture: "accordion",
+    route: "base-nova-parity",
+    local: "[data-parity=accordion] [data-slot=accordion-trigger]",
+  },
+  {
+    name: "accordion-trigger-expanded",
+    component: "accordion",
+    official: "[data-slot=accordion-trigger]",
+    fixture: "accordion",
+    route: "base-nova-parity",
+    local: "[data-parity=accordion] [data-slot=accordion-trigger]",
+    open: true,
+    states: ["expanded"],
+  },
+  {
+    name: "accordion-content-expanded",
+    component: "accordion",
+    official: "[data-slot=accordion-content]",
+    fixture: "accordion",
+    route: "base-nova-parity",
+    local: "[data-parity=accordion] [data-slot=accordion-content]",
+    open: true,
+    states: ["expanded"],
+  },
+  {
+    name: "tabs-list",
+    component: "tabs",
+    official: "[data-slot=tabs-list]",
+    fixture: "tabs",
+    route: "base-nova-parity",
+    local: "[data-parity=tabs] [data-slot=tabs-list]",
+  },
+  {
+    name: "tabs-trigger-selected",
+    component: "tabs",
+    official: "[data-slot=tabs-trigger][data-active]",
+    fixture: "tabs",
+    route: "base-nova-parity",
+    local: "[data-parity=tabs] [data-slot=tabs-trigger][data-active]",
+  },
+  {
+    name: "tabs-trigger-unselected",
+    component: "tabs",
+    official: "[data-slot=tabs-trigger]:not([data-active])",
+    fixture: "tabs",
+    route: "base-nova-parity",
+    local: "[data-parity=tabs] [data-slot=tabs-trigger]:not([data-active])",
+  },
+  {
+    name: "tabs-content",
+    component: "tabs",
+    official: "[data-slot=tabs-content]",
+    fixture: "tabs",
+    route: "base-nova-parity",
+    local: "[data-parity=tabs] [data-slot=tabs-content]",
+  },
+  {
+    name: "card",
+    component: "card",
+    official: "[data-slot=card]",
+    fixture: "card",
+    route: "base-nova-parity",
+    local: "[data-parity=card] [data-slot=card]",
+  },
+  {
+    name: "card-header",
+    component: "card",
+    official: "[data-slot=card-header]",
+    fixture: "card",
+    route: "base-nova-parity",
+    local: "[data-parity=card] [data-slot=card-header]",
+  },
+  {
+    name: "card-title",
+    component: "card",
+    official: "[data-slot=card-title]",
+    fixture: "card",
+    route: "base-nova-parity",
+    local: "[data-parity=card] [data-slot=card-title]",
+  },
+  {
+    name: "alert",
+    component: "alert",
+    official: "[data-slot=alert]",
+    fixture: "alert",
+    route: "base-nova-parity",
+    local: "[data-parity=alert] [data-slot=alert]",
+  },
+  {
+    name: "alert-title",
+    component: "alert",
+    official: "[data-slot=alert-title]",
+    fixture: "alert",
+    route: "base-nova-parity",
+    local: "[data-parity=alert] [data-slot=alert-title]",
+  },
+  {
+    name: "alert-description",
+    component: "alert",
+    official: "[data-slot=alert-description]",
+    fixture: "alert",
+    route: "base-nova-parity",
+    local: "[data-parity=alert] [data-slot=alert-description]",
+  },
+  {
+    name: "table",
+    component: "table",
+    official: "[data-slot=table]",
+    fixture: "table",
+    route: "base-nova-parity",
+    local: "[data-parity=table] [data-slot=table]",
+  },
+  {
+    name: "table-head",
+    component: "table",
+    official: "[data-slot=table-head]",
+    fixture: "table",
+    route: "base-nova-parity",
+    local: "[data-parity=table] [data-slot=table-head]",
+  },
+  {
+    name: "table-cell",
+    component: "table",
+    official: "[data-slot=table-cell]",
+    fixture: "table",
+    route: "base-nova-parity",
+    local: "[data-parity=table] [data-slot=table-cell]",
+  },
+  {
+    name: "breadcrumb-list",
+    component: "breadcrumb",
+    official: "[data-slot=breadcrumb-list]",
+    fixture: "breadcrumb",
+    route: "base-nova-parity",
+    local: "[data-parity=breadcrumb] [data-slot=breadcrumb-list]",
+  },
+  {
+    name: "breadcrumb-link",
+    component: "breadcrumb",
+    official: "[data-slot=breadcrumb-link]",
+    fixture: "breadcrumb",
+    route: "base-nova-parity",
+    local: "[data-parity=breadcrumb] [data-slot=breadcrumb-link]",
+  },
+  {
+    name: "sidebar-menu-button",
+    component: "sidebar",
+    officialUrl: "https://ui.shadcn.com/view/base-nova/sidebar-demo",
+    official: '[data-slot=sidebar-menu-button]:has-text("Design Engineering")',
+    scopePreview: false,
+    route: "base-nova-parity",
+    local:
+      '[data-parity=sidebar] [data-slot=sidebar-menu-button]:has-text("Design Engineering")',
+  },
+  {
+    name: "sidebar-menu-button-current",
+    component: "sidebar",
+    officialUrl: "https://ui.shadcn.com/view/base-nova/sidebar-demo",
+    official: '[data-slot=sidebar-menu-button]:has-text("Design Engineering")',
+    scopePreview: false,
+    route: "base-nova-parity",
+    local:
+      '[data-parity=sidebar] [data-slot=sidebar-menu-button]:has-text("Design Engineering")',
+    mutateActive: "both",
+  },
+  {
+    name: "navigation-menu-trigger",
+    component: "navigation-menu",
+    official: "[data-slot=navigation-menu-trigger]",
+    route: "base-nova-parity",
+    local: "[data-parity=navigation-menu] [data-slot=navigation-menu-trigger]",
+    viewports: ["desktop"],
+  },
+  {
+    name: "navigation-menu-content-open",
+    component: "navigation-menu",
+    official: "[data-slot=navigation-menu-content]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: '[data-slot=navigation-menu-content]:has-text("Introduction")',
+    triggerLocal:
+      "[data-parity=navigation-menu] [data-slot=navigation-menu-trigger]",
+    setup: "navigation-menu",
+    viewports: ["desktop"],
+    states: ["open"],
+  },
+  {
+    name: "sheet-overlay",
+    component: "sheet",
+    official: "[data-slot=sheet-overlay]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: "[data-slot=sheet-overlay]",
+    triggerLocal: '[data-parity="sheet"] [data-slot=sheet-trigger]',
+    setup: "sheet",
+    viewports: ["mobile"],
+    states: ["rest"],
+  },
+  {
+    name: "sheet-content",
+    component: "sheet",
+    official: "[data-slot=sheet-content]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: "[data-slot=sheet-content]",
+    triggerLocal: '[data-parity="sheet"] [data-slot=sheet-trigger]',
+    setup: "sheet",
+    viewports: ["mobile"],
+  },
+  {
+    name: "sheet-close-button",
+    component: "sheet",
+    official: "[data-slot=sheet-close]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: "[data-slot=sheet-close]",
+    triggerLocal: '[data-parity="sheet"] [data-slot=sheet-trigger]',
+    setup: "sheet",
+    viewports: ["mobile"],
+  },
+  {
+    name: "dropdown-trigger",
+    component: "dropdown-menu",
+    official: "[data-slot=dropdown-menu-trigger]",
+    route: "base-nova-parity",
+    local: "[data-parity=dropdown] [data-slot=dropdown-menu-trigger]",
+  },
+  {
+    name: "dropdown-content",
+    component: "dropdown-menu",
+    official: "[data-slot=dropdown-menu-content]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: "[data-slot=dropdown-menu-content]",
+    triggerLocal: "[data-parity=dropdown] [data-slot=dropdown-menu-trigger]",
+    setup: "dropdown",
+    alignTrigger: true,
+    states: ["open"],
+  },
+  {
+    name: "dropdown-item",
+    component: "dropdown-menu",
+    official: "[data-slot=dropdown-menu-item]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: "[data-slot=dropdown-menu-item]",
+    triggerLocal: "[data-parity=dropdown] [data-slot=dropdown-menu-trigger]",
+    setup: "dropdown",
+  },
+  {
+    name: "tooltip-trigger-disabled",
+    component: "tooltip",
+    official: "[data-slot=tooltip-trigger] > [data-slot=button]",
+    route: "base-nova-parity",
+    local:
+      "[data-parity=tooltip] [data-slot=tooltip-trigger] > [data-slot=button]",
+    states: ["disabled"],
+  },
+  {
+    name: "tooltip-content",
+    component: "tooltip",
+    official: "[data-slot=tooltip-content]",
+    scopePreview: false,
+    route: "base-nova-parity",
+    local: "[data-slot=tooltip-content]",
+    triggerLocal: "[data-parity=tooltip] [data-slot=tooltip-trigger]",
+    setup: "tooltip",
+    states: ["open"],
+  },
+];
+
+const fixtureWidths = {
+  accordion: { desktop: 384, tablet: 384, mobile: 260 },
+  card: { desktop: 384, tablet: 384, mobile: 260 },
+  alert: { desktop: 448, tablet: 448, mobile: 292 },
+  table: { desktop: 558, tablet: 558, mobile: 326.875 },
+  tabs: { desktop: 400, tablet: 400, mobile: 290.140625 },
+  code: { desktop: 640, tablet: 640, mobile: 342 },
+  breadcrumb: { desktop: 304.15625, tablet: 304.15625, mobile: 304.15625 },
+};
+
+const interactiveCases = new Set([
+  "button-outline",
+  "code-block-copy-action",
+  "accordion-trigger-collapsed",
+  "tabs-trigger-selected",
+  "tabs-trigger-unselected",
+  "breadcrumb-link",
+  "sidebar-menu-button",
+  "sidebar-menu-button-current",
+  "navigation-menu-trigger",
+  "dropdown-trigger",
+  "dropdown-item",
+  "sheet-close-button",
+]);
+const interactiveStates = ["rest", "hover", "focus", "focus-visible", "active"];
+
+async function setTheme(page, target, theme) {
+  await page.emulateMedia({ colorScheme: theme });
+  await page.evaluate(
+    ({ target, theme }) => {
+      const root = document.documentElement;
+      if (target === "official")
+        root.classList.toggle("dark", theme === "dark");
+      else root.setAttribute("data-theme", theme);
+    },
+    { target, theme }
+  );
+}
+
+async function rgba(page, value) {
+  return page.evaluate((color) => {
+    if (!color || color === "transparent") return [0, 0, 0, 0];
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = 1;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    context.clearRect(0, 0, 1, 1);
+    context.fillStyle = color;
+    context.fillRect(0, 0, 1, 1);
+    return Array.from(context.getImageData(0, 0, 1, 1).data);
+  }, value);
+}
+
+async function metric(page, locator) {
+  const result = await locator.evaluate((element, names) => {
+    const style = getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    const iconElement = Array.from(element.children).find((candidate) => {
+      if (candidate.tagName !== "svg") return false;
+      const candidateRect = candidate.getBoundingClientRect();
+      return candidateRect.width > 0 && candidateRect.height > 0;
+    });
+    const iconRect = iconElement?.getBoundingClientRect();
+    const iconStyle = iconElement ? getComputedStyle(iconElement) : null;
+    const snap = (value) => Math.round(value * 64) / 64;
+    return {
+      tag: element.tagName,
+      slot: element.getAttribute("data-slot"),
+      variant: element.getAttribute("data-variant"),
+      size: element.getAttribute("data-size"),
+      copied: element.getAttribute("data-copied"),
+      text: (element.textContent ?? "")
+        .trim()
+        .replace(/\s+/g, " ")
+        .slice(0, 80),
+      values: Object.fromEntries(names.map((name) => [name, style[name]])),
+      rect: { width: snap(rect.width), height: snap(rect.height) },
+      icon: iconRect
+        ? (() => {
+            const width = Number.parseFloat(iconStyle.width);
+            const height = Number.parseFloat(iconStyle.height);
+            const xStart = iconRect.x + iconRect.width / 2 - rect.x - width / 2;
+            const yStart =
+              iconRect.y + iconRect.height / 2 - rect.y - height / 2;
+            return {
+              width: snap(width),
+              height: snap(height),
+              xStart: snap(xStart),
+              xEnd: snap(rect.width - xStart - width),
+              yStart: snap(yStart),
+              yEnd: snap(rect.height - yStart - height),
+            };
+          })()
+        : null,
+    };
+  }, properties);
+
+  for (const property of colorProperties) {
+    result.values[property] = await rgba(page, result.values[property]);
+  }
+  return result;
+}
+
+async function visible(page, selector) {
+  const candidates = page.locator(selector);
+  for (let index = 0; index < (await candidates.count()); index += 1) {
+    const candidate = candidates.nth(index);
+    if (await candidate.isVisible()) return candidate;
+  }
+  throw new Error(`No visible element: ${selector}`);
+}
+
+async function pageFor(context, target, item, theme, alignment) {
+  const page = await context.newPage();
+  const url =
+    target === "official"
+      ? (item.officialUrl ?? `${officialBase}${item.component}`)
+      : `${localBase}${item.route}`;
+  await page.goto(url, { waitUntil: "domcontentloaded", timeout: 120_000 });
+  await page.waitForTimeout(target === "official" ? 1200 : 150);
+  await setTheme(page, target, theme);
+  if (target === "local" && alignment && item.triggerLocal) {
+    const trigger = await visible(page, item.triggerLocal);
+    const box = await trigger.boundingBox();
+    if (box) {
+      await trigger.evaluate(
+        (element, point) => {
+          const fixture = element.closest("[data-parity]");
+          if (fixture instanceof HTMLElement) {
+            fixture.style.transform = `translate(${point.x - point.currentX}px, ${point.y - point.currentY}px)`;
+          }
+        },
+        { ...alignment, currentX: box.x, currentY: box.y }
+      );
+    }
+  }
+  if (item.setup === "sheet") {
+    if (target === "official") {
+      await page
+        .locator(
+          '[data-slot="component-preview"] [data-slot="preview"] [data-slot=button]'
+        )
+        .filter({ hasText: /^left$/i })
+        .click();
+    } else {
+      await page
+        .locator(item.triggerLocal ?? "[data-mobile-navigation-trigger]")
+        .click();
+    }
+    await page.waitForTimeout(300);
+  }
+  if (item.setup === "navigation-menu") {
+    const selector =
+      target === "official"
+        ? '[data-slot="component-preview"] [data-slot="preview"] [data-slot=navigation-menu-trigger]'
+        : (item.triggerLocal ?? "[data-slot=navigation-menu-trigger]");
+    await visible(page, selector).then((trigger) => trigger.click());
+    await page.waitForTimeout(300);
+  }
+  if (item.setup === "dropdown") {
+    const selector =
+      target === "official"
+        ? '[data-slot="component-preview"] [data-slot="preview"] [data-slot=dropdown-menu-trigger]'
+        : (item.triggerLocal ?? "[data-slot=dropdown-menu-trigger]");
+    await visible(page, selector).then((trigger) => trigger.click());
+    await page.waitForTimeout(200);
+    if (target === "local" && alignment?.availableHeight) {
+      const content = await visible(page, item.local);
+      await content.evaluate((element, availableHeight) => {
+        element.parentElement?.style.setProperty(
+          "--available-height",
+          `${availableHeight}px`
+        );
+      }, alignment.availableHeight);
+    }
+  }
+  if (item.setup === "tooltip") {
+    const selector =
+      target === "official"
+        ? '[data-slot="component-preview"] [data-slot="preview"] [data-slot=tooltip-trigger]'
+        : (item.triggerLocal ?? "[data-slot=tooltip-trigger]");
+    await visible(page, selector).then((trigger) => trigger.hover());
+    await page.waitForTimeout(700);
+  }
+  if (item.mutateActive === target || item.mutateActive === "both") {
+    const selector =
+      target === "official"
+        ? (item.mutateSelector ?? item.official)
+        : item.local;
+    await visible(page, selector).then((element) =>
+      element.evaluate((target) => target.setAttribute("data-active", "true"))
+    );
+  }
+  if (item.mutateDisabled) {
+    const selector =
+      target === "official"
+        ? `[data-slot="component-preview"] [data-slot="preview"] ${item.official}`
+        : item.local;
+    await visible(page, selector).then((button) =>
+      button.evaluate((element) => {
+        element.disabled = true;
+        element.setAttribute("data-disabled", "");
+      })
+    );
+    await page.waitForTimeout(250);
+  }
+  if (item.open && item.name.startsWith("accordion")) {
+    const triggerSelector =
+      target === "official"
+        ? `[data-slot="component-preview"] [data-slot="preview"] [data-slot=accordion-trigger]`
+        : item.local.replace(
+            "[data-slot=accordion-content]",
+            "[data-slot=accordion-trigger]"
+          );
+    const trigger = await visible(page, triggerSelector);
+    if ((await trigger.getAttribute("aria-expanded")) !== "true")
+      await trigger.click();
+    await page.waitForTimeout(300);
+  }
+  return page;
+}
+
+async function captureState(page, selector, state) {
+  const element = await visible(page, selector);
+  if (state === "hover") await element.hover();
+  if (state === "focus") {
+    await element.evaluate((target) => target.focus({ focusVisible: false }));
+    if (!(await element.evaluate((target) => target.matches(":focus")))) {
+      throw new Error(`${selector} did not enter :focus`);
+    }
+  }
+  if (state === "focus-visible") {
+    await element.evaluate((target) => target.focus({ focusVisible: true }));
+    if (
+      !(await element.evaluate((target) => target.matches(":focus-visible")))
+    ) {
+      throw new Error(`${selector} did not enter :focus-visible`);
+    }
+  }
+  if (state === "active") {
+    const box = await element.boundingBox();
+    if (box) {
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+    }
+  }
+  if (state !== "rest") await page.waitForTimeout(250);
+  const measured = await metric(page, element);
+  if (state === "active") await page.mouse.up();
+  return measured;
+}
+
+function equal(left, right) {
+  if (
+    typeof left === "string" &&
+    typeof right === "string" &&
+    /^-?\d+(?:\.\d+)?px$/.test(left) &&
+    /^-?\d+(?:\.\d+)?px$/.test(right)
+  ) {
+    return (
+      Math.abs(Number.parseFloat(left) - Number.parseFloat(right)) <= 0.000001
+    );
+  }
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+function compare(item, state, official, local) {
+  const name = item.name;
+  const differences = [];
+  const excluded = [];
+  if (item.compareIdentity) {
+    for (const property of [
+      "tag",
+      "slot",
+      "variant",
+      "size",
+      "copied",
+      "text",
+    ]) {
+      if (official[property] !== local[property]) {
+        differences.push({
+          property,
+          official: official[property],
+          local: local[property],
+        });
+      }
+    }
+  }
+  for (const property of properties) {
+    let exclusion;
+    if (contentDependent.has(property))
+      exclusion = "different fixture content/container";
+    if (
+      item.contextWidth &&
+      ["width", "minWidth", "maxWidth"].includes(property)
+    )
+      exclusion = "integration container/content width";
+    if (
+      item.contentHeight &&
+      ["height", "minHeight", "maxHeight"].includes(property)
+    )
+      exclusion = "different fixture content";
+    if (
+      item.contextDimensions &&
+      ["minWidth", "maxWidth", "minHeight", "maxHeight"].includes(property)
+    )
+      exclusion = "layout-context intrinsic sizing";
+    if (item.floatingContext && ["maxHeight", "maxWidth"].includes(property))
+      exclusion = "floating viewport available size";
+    if (item.exampleCardComposition && property === "paddingBottom")
+      exclusion =
+        "official example includes CardFooter; local fixture does not";
+    if (item.exampleTypography && property === "fontWeight")
+      exclusion = "official example content emphasis";
+    if (
+      item.contextTypography &&
+      [
+        "fontFamily",
+        "fontSize",
+        "lineHeight",
+        "fontWeight",
+        "letterSpacing",
+        "color",
+      ].includes(property)
+    )
+      exclusion = "non-rendering inherited context on this slot";
+    if (item.exampleColor && property === "color")
+      exclusion = "official example-specific menu label color";
+    if (
+      item.exampleComposition &&
+      ["paddingRight", "paddingLeft", "columnGap", "rowGap"].includes(property)
+    )
+      exclusion = "official/local child composition differs";
+    if (exclusion) {
+      excluded.push({
+        property,
+        reason: exclusion,
+        official: official.values[property],
+        local: local.values[property],
+      });
+      continue;
+    }
+    const expected = official.values[property];
+    const actual = local.values[property];
+    if (!equal(expected, actual))
+      differences.push({ property, official: expected, local: actual });
+  }
+  if (item.contentHeight) {
+    excluded.push({
+      property: "rect.height",
+      reason: "different fixture content",
+      official: official.rect.height,
+      local: local.rect.height,
+    });
+  } else if (Math.abs(official.rect.height - local.rect.height) > 0.000001) {
+    differences.push({
+      property: "rect.height",
+      official: official.rect.height,
+      local: local.rect.height,
+    });
+  }
+  if (item.contextWidth) {
+    excluded.push({
+      property: "rect.width",
+      reason: "integration container/content width",
+      official: official.rect.width,
+      local: local.rect.width,
+    });
+  } else if (Math.abs(official.rect.width - local.rect.width) > 0.000001) {
+    differences.push({
+      property: "rect.width",
+      official: official.rect.width,
+      local: local.rect.width,
+    });
+  }
+  if (item.exampleIcon) {
+    excluded.push({
+      property: "icon",
+      reason: "official/local example icon composition differs",
+      official: official.icon,
+      local: local.icon,
+    });
+  } else if (!!official.icon !== !!local.icon) {
+    differences.push({
+      property: "icon.presence",
+      official: !!official.icon,
+      local: !!local.icon,
+    });
+  } else if (official.icon && local.icon) {
+    for (const property of ["width", "height"]) {
+      if (Math.abs(official.icon[property] - local.icon[property]) > 0.000001) {
+        differences.push({
+          property: `icon.${property}`,
+          official: official.icon[property],
+          local: local.icon[property],
+        });
+      }
+    }
+    const horizontalAligned = ["xStart", "xEnd"].some(
+      (property) =>
+        Math.abs(official.icon[property] - local.icon[property]) <= 0.000001
+    );
+    const verticalAligned = ["yStart", "yEnd"].some(
+      (property) =>
+        Math.abs(official.icon[property] - local.icon[property]) <= 0.000001
+    );
+    if (!horizontalAligned)
+      differences.push({
+        property: "icon.horizontalOffset",
+        official: official.icon,
+        local: local.icon,
+      });
+    if (!verticalAligned)
+      differences.push({
+        property: "icon.verticalOffset",
+        official: official.icon,
+        local: local.icon,
+      });
+  }
+  return { name, state, differences, excluded, official, local };
+}
+
+(async () => {
+  fs.mkdirSync(outputDirectory, { recursive: true });
+  const browser = await chromium.launch({ headless: true });
+  const viewports = {
+    desktop: { width: 1440, height: 1200 },
+    tablet: { width: 820, height: 1180 },
+    mobile: { width: 390, height: 844 },
+  };
+  const results = [];
+
+  for (const theme of ["light", "dark"]) {
+    for (const [viewportName, viewport] of Object.entries(viewports)) {
+      const context = await browser.newContext({
+        viewport,
+        colorScheme: theme,
+      });
+      try {
+        for (const item of cases) {
+          if (
+            viewportName !== "desktop" &&
+            ["sidebar-menu-button", "sidebar-menu-button-current"].includes(
+              item.name
+            )
+          )
+            continue;
+          if (item.viewports && !item.viewports.includes(viewportName))
+            continue;
+          process.stdout.write(
+            `Checking ${theme}/${viewportName}/${item.name}…\n`
+          );
+          let officialPage;
+          let localPage;
+          try {
+            officialPage = await pageFor(context, "official", item, theme);
+            let alignment;
+            if (item.alignTrigger) {
+              const trigger = await visible(
+                officialPage,
+                `[data-slot="component-preview"] [data-slot="preview"] ${item.official.replace("content", "trigger")}`
+              );
+              alignment = await trigger.boundingBox();
+              const content = await visible(officialPage, item.official);
+              alignment.availableHeight = await content.evaluate((element) =>
+                Number.parseFloat(
+                  getComputedStyle(element).getPropertyValue(
+                    "--available-height"
+                  )
+                )
+              );
+            }
+            localPage = await pageFor(context, "local", item, theme, alignment);
+            const states =
+              item.states ??
+              (interactiveCases.has(item.name) ? interactiveStates : ["rest"]);
+            for (const state of states) {
+              const officialSelector =
+                item.scopePreview === false
+                  ? item.official
+                  : `[data-slot="component-preview"] [data-slot="preview"] ${item.official}`;
+              const official = await captureState(
+                officialPage,
+                officialSelector,
+                state
+              );
+              if (item.fixture) {
+                const fixtureWidth = fixtureWidths[item.fixture][viewportName];
+                await visible(localPage, `[data-parity=${item.fixture}]`).then(
+                  (fixture) =>
+                    fixture.evaluate((element, width) => {
+                      element.style.width = `${width}px`;
+                    }, fixtureWidth)
+                );
+              }
+              const local = await captureState(localPage, item.local, state);
+              results.push({
+                theme,
+                viewport: viewportName,
+                ...compare(item, state, official, local),
+              });
+              await officialPage.mouse.move(0, 0);
+              await localPage.mouse.move(0, 0);
+              await officialPage.evaluate(() =>
+                document.activeElement instanceof HTMLElement
+                  ? document.activeElement.blur()
+                  : undefined
+              );
+              await localPage.evaluate(() =>
+                document.activeElement instanceof HTMLElement
+                  ? document.activeElement.blur()
+                  : undefined
+              );
+            }
+          } catch (error) {
+            results.push({
+              theme,
+              viewport: viewportName,
+              name: item.name,
+              state: "setup",
+              error: error.message,
+              differences: [],
+              excluded: [],
+            });
+          } finally {
+            await officialPage?.close();
+            await localPage?.close();
+          }
+        }
+      } finally {
+        await context.close();
+      }
+    }
+  }
+
+  await browser.close();
+  fs.writeFileSync(
+    path.join(outputDirectory, "results.json"),
+    JSON.stringify(results, null, 2)
+  );
+  const failures = results.filter(
+    (result) => result.error || result.differences.length > 0
+  );
+  const fullyCompared = results.filter(
+    (result) =>
+      !result.error &&
+      result.differences.length === 0 &&
+      result.excluded.length === 0
+  );
+  const contextControlled = results.filter(
+    (result) =>
+      !result.error &&
+      result.differences.length === 0 &&
+      result.excluded.length > 0
+  );
+  const lines = [
+    "# Base Nova official/local parity",
+    "",
+    `- Checks: ${results.length}`,
+    `- Fully compared exact: ${fullyCompared.length}`,
+    `- Comparable properties exact with explicit fixture/context exclusions: ${contextControlled.length}`,
+    `- Differences/errors: ${failures.length}`,
+    `- Contextual exclusions: ${contextControlled.length}`,
+    "- Canonical fixture cases use matching official content and container width; integration cases compare component-owned properties under the same viewport, theme, and interaction state.",
+    "- Geometry is normalized to Chromium's 1/64 CSS-pixel layout quantum; floating overlays receive the official available-height context after exact trigger alignment.",
+    "- Every measured value is recorded in results.json.",
+    "",
+    "| Theme | Viewport | Component | State | Result |",
+    "| --- | --- | --- | --- | --- |",
+    ...results.map(
+      (result) =>
+        `| ${result.theme} | ${result.viewport} | ${result.name} | ${result.state} | ${result.error ? `ERROR: ${result.error}` : result.differences.length ? result.differences.map((difference) => difference.property).join(", ") : result.excluded.length ? `0px comparable / ${result.excluded.length} contextual exclusions` : "0px / fully exact"} |`
+    ),
+  ];
+  fs.writeFileSync(
+    path.join(outputDirectory, "report.md"),
+    `${lines.join("\n")}\n`
+  );
+  console.log(`Parity report: ${path.join(outputDirectory, "report.md")}`);
+  if (failures.length > 0) process.exitCode = 1;
+})().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/inventory-actual-routes.cjs b/scripts/inventory-actual-routes.cjs
new file mode 100644
index 000000000..b647db723
--- /dev/null
+++ b/scripts/inventory-actual-routes.cjs
@@ -0,0 +1,398 @@
+#!/usr/bin/env node
+
+const crypto = require("node:crypto");
+const fs = require("node:fs");
+const path = require("node:path");
+const { chromium } = require("playwright");
+const {
+  discoverActualRoutes,
+  normalizeRoute,
+  projectRoot,
+} = require("./lib/actual-routes.cjs");
+
+const baseUrl = (
+  process.env.DOCS_STARTER_URL ?? "http://127.0.0.1:3001/docusaurus-theme/"
+).replace(/\/?$/, "/");
+const artifactDir = path.join(projectRoot, "artifacts/rendered-surfaces");
+const screenshotDir = path.join(artifactDir, "inventory-screenshots");
+const widths = [390, 820, 1440, 2736];
+const themes = ["light", "dark"];
+
+const slotOwners = {
+  accordion: "Accordion",
+  alert: "Alert",
+  badge: "Badge",
+  breadcrumb: "Breadcrumb",
+  button: "Button",
+  card: "Card",
+  collapsible: "Collapsible",
+  "copy-button": "Button",
+  docs: "Live shadcn docs shell",
+  dialog: "Dialog",
+  dropdown: "DropdownMenu",
+  input: "Input",
+  kbd: "Kbd",
+  navigation: "NavigationMenu",
+  separator: "Separator",
+  sheet: "Sheet",
+  sidebar: "Sidebar",
+  skeleton: "Skeleton",
+  spinner: "Button",
+  table: "Table",
+  tabs: "Tabs",
+  tooltip: "Tooltip",
+};
+
+function routeUrl(route) {
+  return new URL(route, baseUrl).href;
+}
+
+function fileSafeRoute(route) {
+  return route ? route.replaceAll("/", "-") : "root";
+}
+
+function ownerForSlot(slot) {
+  if (slotOwners[slot]) return slotOwners[slot];
+  const prefix = Object.keys(slotOwners).find((candidate) =>
+    slot.startsWith(`${candidate}-`)
+  );
+  return prefix ? slotOwners[prefix] : null;
+}
+
+function fingerprint(text) {
+  return crypto.createHash("sha256").update(text).digest("hex").slice(0, 16);
+}
+
+async function setTheme(page, theme) {
+  await page.emulateMedia({ colorScheme: theme });
+  await page.addInitScript(
+    (value) => localStorage.setItem("theme", value),
+    theme
+  );
+}
+
+async function inventoryPage(page, context) {
+  const snapshot = await page.evaluate(
+    ({ slotOwners }) => {
+      const styleKeys = [
+        "font-family",
+        "font-size",
+        "line-height",
+        "font-weight",
+        "letter-spacing",
+        "box-sizing",
+        "min-width",
+        "max-width",
+        "min-height",
+        "max-height",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "row-gap",
+        "column-gap",
+        "border-top-width",
+        "border-right-width",
+        "border-bottom-width",
+        "border-left-width",
+        "border-top-style",
+        "border-top-color",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius",
+        "background-color",
+        "color",
+        "opacity",
+        "box-shadow",
+        "transform",
+        "position",
+        "display",
+        "visibility",
+        "overflow-x",
+        "overflow-y",
+      ];
+      const excludedTags = new Set([
+        "SCRIPT",
+        "STYLE",
+        "LINK",
+        "META",
+        "TITLE",
+        "NOSCRIPT",
+      ]);
+      const slotOwner = (slot) => {
+        if (slotOwners[slot]) return slotOwners[slot];
+        const prefix = Object.keys(slotOwners).find((candidate) =>
+          slot.startsWith(`${candidate}-`)
+        );
+        return prefix ? slotOwners[prefix] : null;
+      };
+      const elementPath = (element) => {
+        const parts = [];
+        let current = element;
+        while (current && current !== document.documentElement) {
+          const tag = current.tagName.toLowerCase();
+          const slot = current.getAttribute("data-slot");
+          const siblings = current.parentElement
+            ? Array.from(current.parentElement.children).filter(
+                (candidate) => candidate.tagName === current.tagName
+              )
+            : [];
+          const index = siblings.indexOf(current) + 1;
+          parts.unshift(
+            `${tag}${slot ? `[data-slot="${slot}"]` : ""}:nth-of-type(${index})`
+          );
+          current = current.parentElement;
+        }
+        return `html > ${parts.join(" > ")}`;
+      };
+      const regionOwner = (element) => {
+        const slotRoot = element.closest("[data-slot]");
+        if (slotRoot) {
+          const slot = slotRoot.getAttribute("data-slot");
+          if (slot !== "docs" || slotRoot === element) {
+            const owner = slotOwner(slot);
+            return owner
+              ? { owner, oracle: "official-registry", slot }
+              : { owner: null, slot };
+          }
+        }
+        if (element.closest(".docusaurus-mermaid-container")) {
+          return { owner: "Mermaid", oracle: "official-mermaid", slot: null };
+        }
+        if (element.closest(".theme-doc-markdown")) {
+          return { owner: "Typeset", oracle: "live-shadcn-docs", slot: null };
+        }
+        const regions = [
+          ['[class*="skipToContent"]', "Skip link", "Docusaurus"],
+          [".navbar", "Navbar shell", "live-shadcn-docs"],
+          [".theme-doc-toc-mobile", "Mobile TOC", "Accordion"],
+          [".theme-doc-page__toc", "Desktop TOC", "live-shadcn-docs"],
+          [".pagination-nav", "Paginator", "Button"],
+          [".theme-doc-footer", "Doc footer", "live-shadcn-docs"],
+          [".footer", "Footer", "live-shadcn-docs"],
+          [".theme-doc-root-layout", "Docs shell", "live-shadcn-docs"],
+          [".theme-app-shell", "App shell", "live-shadcn-docs"],
+          ["#__docusaurus", "Document shell", "live-shadcn-docs"],
+        ];
+        for (const [selector, owner, oracle] of regions) {
+          if (element.closest(selector)) return { owner, oracle, slot: null };
+        }
+        if (element === document.body || element === document.documentElement) {
+          return {
+            owner: "Document shell",
+            oracle: "live-shadcn-docs",
+            slot: null,
+          };
+        }
+        return { owner: null, oracle: null, slot: null };
+      };
+
+      const rows = [];
+      const unknownSlots = new Set();
+      const unknownElements = [];
+      for (const element of document.querySelectorAll("html, body, body *")) {
+        if (excludedTags.has(element.tagName)) continue;
+        const style = getComputedStyle(element);
+        const rect = element.getBoundingClientRect();
+        if (
+          style.display === "none" ||
+          style.visibility === "hidden" ||
+          Number(style.opacity) === 0
+        ) {
+          continue;
+        }
+        if (rect.width <= 0 || rect.height <= 0) continue;
+        const ownership = regionOwner(element);
+        if (!ownership.owner) {
+          if (ownership.slot) unknownSlots.add(ownership.slot);
+          unknownElements.push(elementPath(element));
+          continue;
+        }
+        const text = (
+          element.childElementCount ? "" : (element.textContent ?? "")
+        )
+          .replace(/\s+/g, " ")
+          .trim()
+          .slice(0, 240);
+        rows.push({
+          path: elementPath(element),
+          tag: element.tagName.toLowerCase(),
+          role: element.getAttribute("role"),
+          slot: element.getAttribute("data-slot"),
+          owner: ownership.owner,
+          oracle: ownership.oracle,
+          text,
+          rect: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            right: rect.right,
+            bottom: rect.bottom,
+          },
+          styles: Object.fromEntries(
+            styleKeys.map((key) => [key, style.getPropertyValue(key)])
+          ),
+        });
+      }
+
+      const internalLinks = Array.from(document.querySelectorAll("a[href]"))
+        .map((anchor) => anchor.href)
+        .filter((href) => href.startsWith(location.origin))
+        .map((href) => new URL(href).pathname);
+
+      return {
+        title: document.title,
+        rows,
+        unknownSlots: [...unknownSlots].sort(),
+        unknownElements: unknownElements.slice(0, 50),
+        internalLinks: [...new Set(internalLinks)].sort(),
+      };
+    },
+    { slotOwners }
+  );
+
+  return {
+    ...snapshot,
+    rows: snapshot.rows.map((row, index) => ({
+      ...context,
+      index,
+      textFingerprint: fingerprint(row.text),
+      ...row,
+    })),
+  };
+}
+
+function makeCoverage(states, routes, sourceRows) {
+  const ownerCounts = new Map();
+  const routeCounts = new Map();
+  for (const state of states) {
+    routeCounts.set(
+      state.route,
+      (routeCounts.get(state.route) ?? 0) + state.rows.length
+    );
+    for (const row of state.rows) {
+      ownerCounts.set(row.owner, (ownerCounts.get(row.owner) ?? 0) + 1);
+    }
+  }
+  return [
+    "# Actual-route rendered surface coverage",
+    "",
+    `- routes: ${routes.length}`,
+    `- source docs: ${sourceRows.length}`,
+    `- states: ${states.length}`,
+    `- visible element rows: ${states.reduce((sum, state) => sum + state.rows.length, 0)}`,
+    `- widths: ${widths.join(", ")}`,
+    `- themes: ${themes.join(", ")}`,
+    "",
+    "## Routes",
+    "",
+    ...routes.map(
+      (route) => `- \`/${route}\`: ${routeCounts.get(route) ?? 0} rows`
+    ),
+    "",
+    "## Ownership",
+    "",
+    ...[...ownerCounts.entries()]
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([owner, count]) => `- ${owner}: ${count}`),
+    "",
+    "## Source mapping",
+    "",
+    ...sourceRows.map(({ file, route }) => `- \`${file}\` → \`/${route}\``),
+    "",
+  ].join("\n");
+}
+
+(async () => {
+  const discovery = discoverActualRoutes();
+  fs.mkdirSync(screenshotDir, { recursive: true });
+  const browser = await chromium.launch({ headless: true });
+  const states = [];
+  const failures = [];
+
+  try {
+    for (const theme of themes) {
+      for (const width of widths) {
+        for (const route of discovery.routes) {
+          const page = await browser.newPage({
+            viewport: { width, height: 900 },
+          });
+          await setTheme(page, theme);
+          const response = await page.goto(routeUrl(route), {
+            waitUntil: "networkidle",
+          });
+          if (!response?.ok())
+            throw new Error(`/${route}: HTTP ${response?.status()}`);
+          const screenshot = path.join(
+            screenshotDir,
+            `${fileSafeRoute(route)}-${width}-${theme}.png`
+          );
+          await page.screenshot({ path: screenshot, fullPage: true });
+          const inventory = await inventoryPage(page, {
+            route,
+            width,
+            theme,
+            screenshot: path
+              .relative(projectRoot, screenshot)
+              .replaceAll(path.sep, "/"),
+          });
+          if (inventory.unknownSlots.length) {
+            failures.push(
+              `/${route} ${width} ${theme}: unknown slots ${inventory.unknownSlots.join(", ")}`
+            );
+          }
+          if (inventory.unknownElements.length) {
+            failures.push(
+              `/${route} ${width} ${theme}: unknown visible ownership ${inventory.unknownElements.join(", ")}`
+            );
+          }
+
+          const known = new Set(discovery.routes);
+          for (const pathname of inventory.internalLinks) {
+            const relative = pathname.replace(/^\/docusaurus-theme\/?/, "");
+            const target = normalizeRoute(relative);
+            if (target && !known.has(target) && !target.startsWith("img/")) {
+              failures.push(
+                `/${route}: internal link target not audited: ${pathname}`
+              );
+            }
+          }
+
+          states.push({
+            route,
+            width,
+            theme,
+            screenshot,
+            rows: inventory.rows,
+          });
+          await page.close();
+        }
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  fs.writeFileSync(
+    path.join(artifactDir, "inventory.json"),
+    JSON.stringify({ ...discovery, widths, themes, states }, null, 2)
+  );
+  fs.writeFileSync(
+    path.join(artifactDir, "coverage.md"),
+    makeCoverage(states, discovery.routes, discovery.sourceRows)
+  );
+
+  if (failures.length) {
+    console.error(failures.join("\n"));
+    process.exit(1);
+  }
+  console.log(
+    `Inventoried ${states.length} actual-route states and ${states.reduce((sum, state) => sum + state.rows.length, 0)} visible element rows.`
+  );
+})();
diff --git a/scripts/lib/actual-routes.cjs b/scripts/lib/actual-routes.cjs
new file mode 100644
index 000000000..c84074852
--- /dev/null
+++ b/scripts/lib/actual-routes.cjs
@@ -0,0 +1,77 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const projectRoot = path.resolve(__dirname, "../..");
+const docsRoot = path.join(projectRoot, "examples/docs-starter/docs");
+const buildRoot = path.join(projectRoot, "examples/docs-starter/build");
+
+function walk(root, predicate) {
+  return fs.readdirSync(root, { withFileTypes: true }).flatMap((entry) => {
+    const absolute = path.join(root, entry.name);
+    if (entry.isDirectory()) return walk(absolute, predicate);
+    return predicate(absolute) ? [absolute] : [];
+  });
+}
+
+function normalizeRoute(value) {
+  const route = value.replace(/^\/+|\/+$/g, "");
+  return route === "index" ? "" : route;
+}
+
+function buildRouteFromFile(file) {
+  const relative = path.relative(buildRoot, file).replaceAll(path.sep, "/");
+  return normalizeRoute(relative.replace(/(?:\/index)?\.html$/, ""));
+}
+
+function sourceRouteFromFile(file) {
+  const relative = path.relative(docsRoot, file).replaceAll(path.sep, "/");
+  const source = fs.readFileSync(file, "utf8");
+  const frontMatter = source.match(/^---\n([\s\S]*?)\n---/m)?.[1] ?? "";
+  const slug = frontMatter.match(/^slug:\s*(.+)$/m)?.[1]?.trim();
+  if (slug) return normalizeRoute(slug);
+  return normalizeRoute(relative.replace(/\.(?:md|mdx)$/, ""));
+}
+
+function discoverActualRoutes() {
+  if (!fs.existsSync(buildRoot)) {
+    throw new Error("Missing examples/docs-starter/build; run the starter production build first");
+  }
+
+  const buildRoutes = walk(
+    buildRoot,
+    (file) => file.endsWith(".html") && path.basename(file) !== "404.html"
+  )
+    .map(buildRouteFromFile)
+    .sort();
+  const sourceRows = walk(docsRoot, (file) => /\.(?:md|mdx)$/.test(file)).map(
+    (file) => ({
+      file: path.relative(projectRoot, file).replaceAll(path.sep, "/"),
+      route: sourceRouteFromFile(file),
+    })
+  );
+
+  const duplicateBuildRoutes = buildRoutes.filter(
+    (route, index) => buildRoutes.indexOf(route) !== index
+  );
+  if (duplicateBuildRoutes.length) {
+    throw new Error(`Duplicate built routes: ${[...new Set(duplicateBuildRoutes)].join(", ")}`);
+  }
+
+  const built = new Set(buildRoutes);
+  const missingSources = sourceRows.filter(({ route }) => !built.has(route));
+  if (missingSources.length) {
+    throw new Error(`Source docs missing built routes: ${JSON.stringify(missingSources)}`);
+  }
+
+  const supplementalRoutes = buildRoutes.filter(
+    (route) => route === "base-nova-parity"
+  );
+  return {
+    routes: buildRoutes,
+    primaryRoutes: buildRoutes.filter((route) => !supplementalRoutes.includes(route)),
+    sourceRows,
+    supplementalRoutes,
+  };
+}
+
+module.exports = { discoverActualRoutes, normalizeRoute, projectRoot };
diff --git a/scripts/sweep-responsive-routes.cjs b/scripts/sweep-responsive-routes.cjs
new file mode 100644
index 000000000..fd79a2afe
--- /dev/null
+++ b/scripts/sweep-responsive-routes.cjs
@@ -0,0 +1,1447 @@
+#!/usr/bin/env node
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { chromium } = require("playwright");
+const {
+  discoverActualRoutes,
+  projectRoot,
+} = require("./lib/actual-routes.cjs");
+
+const baseUrl = (
+  process.env.DOCS_STARTER_URL ?? "http://127.0.0.1:3001/docusaurus-theme/"
+).replace(/\/?$/, "/");
+const artifactDir = path.join(projectRoot, "artifacts/responsive-sweep");
+const minWidth = Number(process.env.SWEEP_MIN_WIDTH ?? 320);
+const maxWidth = Number(process.env.SWEEP_MAX_WIDTH ?? 3840);
+const height = 900;
+const themes = ["light", "dark"];
+const ignoredZeroAreaTags = new Set([
+  "BR",
+  "WBR",
+  "SOURCE",
+  "TRACK",
+  "DEFS",
+  "SYMBOL",
+  "PATH",
+  "LINE",
+  "POLYLINE",
+  "POLYGON",
+  "CIRCLE",
+  "ELLIPSE",
+  "RECT",
+  "MARKER",
+  "CLIPPATH",
+  "MASK",
+  "STYLE",
+]);
+
+function routeUrl(route) {
+  return new URL(route, baseUrl).href;
+}
+
+async function nextLayout(page) {
+  await page.evaluate(
+    () =>
+      new Promise((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(resolve))
+      )
+  );
+}
+
+async function inspectWidth(page, route, width) {
+  return page.evaluate(
+    ({ route, width, ignoredZeroAreaTags }) => {
+      for (const element of document.querySelectorAll(
+        ".theme-doc-sidebar-container"
+      )) {
+        element.style.transition = "none";
+      }
+      const visible = (element) => {
+        const style = getComputedStyle(element);
+        if (style.display === "contents") return false;
+        if (typeof element.checkVisibility === "function") {
+          return element.checkVisibility({
+            checkOpacity: true,
+            checkVisibilityCSS: true,
+          });
+        }
+        return (
+          style.display !== "none" &&
+          style.visibility !== "hidden" &&
+          Number(style.opacity) !== 0 &&
+          element.getClientRects().length > 0
+        );
+      };
+      const rect = (element) => {
+        const box = element.getBoundingClientRect();
+        return {
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height,
+          right: box.right,
+          bottom: box.bottom,
+        };
+      };
+      const pathFor = (element) => {
+        const slot = element.getAttribute("data-slot");
+        const className =
+          typeof element.className === "string"
+            ? element.className
+                .split(/\s+/)
+                .filter(Boolean)
+                .slice(0, 2)
+                .join(".")
+            : "";
+        return `${element.tagName.toLowerCase()}${slot ? `[data-slot=${slot}]` : ""}${className ? `.${className}` : ""}`;
+      };
+      const intendedHorizontalScroller = (element) => {
+        let current = element.parentElement;
+        while (current) {
+          const style = getComputedStyle(current);
+          if (
+            ["auto", "scroll"].includes(style.overflowX) &&
+            current.scrollWidth > current.clientWidth
+          ) {
+            const box = current.getBoundingClientRect();
+            return box.left >= -1 / 64 && box.right <= innerWidth + 1 / 64;
+          }
+          current = current.parentElement;
+        }
+        return false;
+      };
+
+      const failures = [];
+      const root = document.documentElement;
+      if (root.scrollWidth > root.clientWidth) {
+        failures.push({
+          type: "page-overflow",
+          expected: root.clientWidth,
+          actual: root.scrollWidth,
+        });
+      }
+
+      const zeroArea = [];
+      const outside = [];
+      for (const element of document.querySelectorAll("body *")) {
+        if (
+          !visible(element) ||
+          ignoredZeroAreaTags.includes(element.tagName.toUpperCase())
+        )
+          continue;
+        const box = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        const semanticZeroArea =
+          element.getAttribute("aria-hidden") === "true" &&
+          !(element instanceof SVGSVGElement);
+        const meaningfulBox =
+          element.matches("button, a, input, select, textarea, img, svg") ||
+          (element.childElementCount === 0 &&
+            (element.textContent ?? "").trim().length > 0);
+        if (
+          meaningfulBox &&
+          (box.width <= 0 || box.height <= 0) &&
+          !semanticZeroArea
+        ) {
+          zeroArea.push(pathFor(element));
+        }
+        if (
+          box.width > 0 &&
+          box.height > 0 &&
+          (box.left < -1 / 64 || box.right > innerWidth + 1 / 64) &&
+          style.position !== "fixed" &&
+          !intendedHorizontalScroller(element)
+        ) {
+          outside.push({
+            path: pathFor(element),
+            left: box.left,
+            right: box.right,
+          });
+        }
+      }
+      if (zeroArea.length)
+        failures.push({ type: "zero-area", elements: zeroArea.slice(0, 20) });
+      if (outside.length)
+        failures.push({
+          type: "unowned-horizontal-overflow",
+          elements: outside.slice(0, 20),
+        });
+
+      for (const scroller of document.querySelectorAll(
+        '[data-slot="table-container"], .theme-code-block, .docusaurus-mermaid-container'
+      )) {
+        if (!visible(scroller)) continue;
+        if (scroller.scrollWidth > scroller.clientWidth) {
+          const style = getComputedStyle(scroller);
+          const descendantScroller = Array.from(
+            scroller.querySelectorAll("*")
+          ).some((element) => {
+            const childStyle = getComputedStyle(element);
+            return (
+              ["auto", "scroll"].includes(childStyle.overflowX) &&
+              element.scrollWidth > element.clientWidth
+            );
+          });
+          if (
+            !["auto", "scroll"].includes(style.overflowX) &&
+            !descendantScroller
+          ) {
+            failures.push({
+              type: "unowned-internal-overflow",
+              element: pathFor(scroller),
+            });
+          }
+        }
+      }
+
+      for (const codeBlock of document.querySelectorAll(
+        "figure.theme-code-block"
+      )) {
+        if (!visible(codeBlock)) continue;
+        const title = codeBlock.querySelector("figcaption");
+        const action = codeBlock.querySelector('[data-slot="copy-button"]');
+        const lines = [...codeBlock.querySelectorAll(".token-line")];
+        const codeStyle = getComputedStyle(codeBlock);
+        const markdown = codeBlock.closest(".theme-doc-markdown");
+        const codeRect = codeBlock.getBoundingClientRect();
+        const markdownRect = markdown?.getBoundingClientRect();
+        if (
+          codeStyle.marginLeft !== "0px" ||
+          codeStyle.marginRight !== "0px" ||
+          !markdownRect ||
+          codeRect.x !== markdownRect.x ||
+          codeRect.width !== markdownRect.width
+        ) {
+          failures.push({
+            type: "code-content-alignment",
+            expected: markdownRect
+              ? { x: markdownRect.x, width: markdownRect.width, margin: "0px" }
+              : "markdown owner",
+            actual: {
+              x: codeRect.x,
+              width: codeRect.width,
+              marginLeft: codeStyle.marginLeft,
+              marginRight: codeStyle.marginRight,
+            },
+          });
+        }
+        const numbers = [
+          ...codeBlock.querySelectorAll('[class*="codeLineNumber"]'),
+        ];
+        if (lines.length > 1 && numbers.length !== lines.length) {
+          failures.push({
+            type: "code-line-number-count",
+            expected: lines.length,
+            actual: numbers.length,
+          });
+        }
+        if (numbers[0]) {
+          const numberStyle = getComputedStyle(numbers[0]);
+          if (
+            numberStyle.position !== "sticky" ||
+            numberStyle.width !== "64px" ||
+            numberStyle.paddingRight !== "24px"
+          ) {
+            failures.push({
+              type: "code-line-number-metric",
+              position: numberStyle.position,
+              width: numberStyle.width,
+              paddingRight: numberStyle.paddingRight,
+            });
+          }
+        }
+        if (lines[0] && lines[0].getBoundingClientRect().height !== 26.5) {
+          failures.push({
+            type: "code-line-height",
+            expected: 26.5,
+            actual: lines[0].getBoundingClientRect().height,
+          });
+        }
+        const dark = document.documentElement.dataset.theme === "dark";
+        for (const [selector, expected] of [
+          [".token.keyword", dark ? "rgb(160, 160, 160)" : "rgb(207, 34, 46)"],
+          [
+            ".token.function",
+            dark ? "rgb(255, 199, 153)" : "rgb(130, 80, 223)",
+          ],
+          [
+            ".token.tag:not(.punctuation)",
+            dark ? "rgb(255, 199, 153)" : "rgb(17, 99, 41)",
+          ],
+          [
+            ".token.tag.punctuation",
+            dark ? "rgb(160, 160, 160)" : "rgb(31, 35, 40)",
+          ],
+          [
+            ".token.plain-text",
+            dark ? "rgb(255, 255, 255)" : "rgb(31, 35, 40)",
+          ],
+        ]) {
+          const token = codeBlock.querySelector(selector);
+          if (token && getComputedStyle(token).color !== expected) {
+            failures.push({
+              type: "code-syntax-color",
+              selector,
+              expected,
+              actual: getComputedStyle(token).color,
+            });
+          }
+        }
+        const keyword = codeBlock.querySelector(".token.keyword");
+        if (
+          keyword &&
+          (getComputedStyle(keyword).fontStyle !== "normal" ||
+            getComputedStyle(keyword).fontWeight !== "400")
+        ) {
+          failures.push({
+            type: "code-syntax-font",
+            expected: { style: "normal", weight: "400" },
+            actual: {
+              style: getComputedStyle(keyword).fontStyle,
+              weight: getComputedStyle(keyword).fontWeight,
+            },
+          });
+        }
+        if (title && action) {
+          const blockRect = codeBlock.getBoundingClientRect();
+          const titleRect = title.getBoundingClientRect();
+          const actionRect = action.getBoundingClientRect();
+          const iconRect = title.querySelector("svg")?.getBoundingClientRect();
+          const titleMetric = {
+            height: titleRect.height,
+            actionTop: actionRect.top - blockRect.top,
+            centerDelta: Math.abs(
+              titleRect.top +
+                titleRect.height / 2 -
+                (actionRect.top + actionRect.height / 2)
+            ),
+            iconWidth: iconRect?.width,
+            iconHeight: iconRect?.height,
+          };
+          if (
+            JSON.stringify(titleMetric) !==
+            JSON.stringify({
+              height: 42.4375,
+              actionTop: 6,
+              centerDelta: 1.21875,
+              iconWidth: 16,
+              iconHeight: 16,
+            })
+          ) {
+            failures.push({
+              type: "code-title-action-metric",
+              expected: {
+                height: 42.4375,
+                actionTop: 6,
+                centerDelta: 1.21875,
+                iconWidth: 16,
+                iconHeight: 16,
+              },
+              actual: titleMetric,
+            });
+          }
+        }
+        const highlighted = codeBlock.querySelector(
+          ".theme-code-block-highlighted-line"
+        );
+        if (highlighted) {
+          const probe = document.createElement("div");
+          probe.style.backgroundColor = "var(--code-highlight)";
+          document.body.append(probe);
+          const expectedBackground = getComputedStyle(probe).backgroundColor;
+          probe.remove();
+          const highlightStyle = getComputedStyle(highlighted);
+          const markerStyle = getComputedStyle(highlighted, "::after");
+          if (
+            highlightStyle.backgroundColor !== expectedBackground ||
+            markerStyle.width !== "2px" ||
+            markerStyle.left !== "0px"
+          ) {
+            failures.push({
+              type: "code-highlight-metric",
+              expected: {
+                background: expectedBackground,
+                markerWidth: "2px",
+                markerLeft: "0px",
+              },
+              actual: {
+                background: highlightStyle.backgroundColor,
+                markerWidth: markerStyle.width,
+                markerLeft: markerStyle.left,
+              },
+            });
+          }
+        }
+      }
+
+      const navbar = document.querySelector(".navbar");
+      const shell = document.querySelector(
+        ".theme-doc-root-layout > main > .container-wrapper"
+      );
+      const docs = document.querySelector('[data-slot="docs"]');
+      const desktopSidebar = document.querySelector(
+        ".theme-doc-sidebar-desktop"
+      );
+      const mobileTrigger = document.querySelector(
+        "[data-mobile-navigation-trigger]"
+      );
+      const toc = document.querySelector(".theme-doc-page__toc");
+      const content = document.querySelector(
+        ".theme-doc-page__content, .theme-doc-page__center"
+      );
+      const navbarRect = navbar ? rect(navbar) : null;
+      const shellRect = shell ? rect(shell) : null;
+      const docsRect = docs ? rect(docs) : null;
+      const sidebarRect = desktopSidebar ? rect(desktopSidebar) : null;
+      const triggerRect = mobileTrigger ? rect(mobileTrigger) : null;
+      const tocRect = toc ? rect(toc) : null;
+      const contentRect = content ? rect(content) : null;
+      const desktop = width >= 1024;
+      const shellWidth = Math.min(width, 1440);
+      const shellLeft = (width - shellWidth) / 2;
+      const shellRight = shellLeft + shellWidth;
+      const expectedNavbarHeight = desktop ? 64 : 56;
+      if (
+        !shellRect ||
+        shellRect.x !== shellLeft ||
+        shellRect.width !== shellWidth
+      ) {
+        failures.push({
+          type: "shell-max-width",
+          expected: { x: shellLeft, width: shellWidth },
+          actual: shellRect ? { x: shellRect.x, width: shellRect.width } : null,
+        });
+      }
+      if (!navbarRect || navbarRect.height !== expectedNavbarHeight) {
+        failures.push({
+          type: "navbar-height",
+          expected: expectedNavbarHeight,
+          actual: navbarRect?.height,
+        });
+      }
+      const navbarBlur = navbar ? getComputedStyle(navbar, "::before") : null;
+      if (
+        !navbarBlur ||
+        navbarBlur.backdropFilter !== "blur(12px)" ||
+        navbarBlur.borderBottomWidth !== "1px" ||
+        navbarBlur.backgroundColor === "rgba(0, 0, 0, 0)"
+      ) {
+        failures.push({
+          type: "navbar-nextra-blur",
+          expected: {
+            backdropFilter: "blur(12px)",
+            borderBottomWidth: "1px",
+            translucentBackground: true,
+          },
+          actual: navbarBlur
+            ? {
+                backdropFilter: navbarBlur.backdropFilter,
+                borderBottomWidth: navbarBlur.borderBottomWidth,
+                backgroundColor: navbarBlur.backgroundColor,
+              }
+            : null,
+        });
+      }
+      if (!docsRect || docsRect.y !== expectedNavbarHeight) {
+        failures.push({
+          type: "docs-navbar-boundary",
+          expected: expectedNavbarHeight,
+          actual: docsRect?.y,
+        });
+      }
+      if (!desktop && (!triggerRect || triggerRect.width <= 0)) {
+        failures.push({ type: "missing-mobile-trigger" });
+      }
+      if (desktop) {
+        const navbarInnerRect = rect(document.querySelector(".navbar__inner"));
+        const expectedNavbarInner = {
+          x: shellLeft + 24,
+          right: shellRight - 24,
+          width: shellWidth - 48,
+        };
+        const actualNavbarInner = navbarInnerRect
+          ? {
+              x: navbarInnerRect.x,
+              right: navbarInnerRect.right,
+              width: navbarInnerRect.width,
+            }
+          : null;
+        if (
+          JSON.stringify(actualNavbarInner) !==
+          JSON.stringify(expectedNavbarInner)
+        ) {
+          failures.push({
+            type: "desktop-navbar-shell-cap",
+            expected: expectedNavbarInner,
+            actual: actualNavbarInner,
+          });
+        }
+        const navigationWeights = Array.from(
+          document.querySelectorAll(
+            '.navbar__items:not(.navbar__items--right) [data-slot="navigation-menu-list"] > [data-slot="navigation-menu-item"] > :is(a, button)'
+          )
+        ).map((element) => getComputedStyle(element).fontWeight);
+        if (
+          !navigationWeights.length ||
+          navigationWeights.some((weight) => weight !== "500")
+        ) {
+          failures.push({
+            type: "desktop-gnb-font-weight",
+            expected: "500",
+            actual: navigationWeights,
+          });
+        }
+      }
+      if (!desktop && width <= 640) {
+        const navbarInnerRect = rect(document.querySelector(".navbar__inner"));
+        const triggerIconRect = rect(mobileTrigger?.querySelector("svg"));
+        const expectedMobileHeader = {
+          inner: { x: 16, width: width - 32 },
+          trigger: { x: 16, width: 32 },
+          triggerIconLeft: 24,
+          content: { x: 24, right: width - 24 },
+        };
+        const actualMobileHeader = {
+          inner: navbarInnerRect
+            ? { x: navbarInnerRect.x, width: navbarInnerRect.width }
+            : null,
+          trigger: triggerRect
+            ? { x: triggerRect.x, width: triggerRect.width }
+            : null,
+          triggerIconLeft: triggerIconRect?.x,
+          content: contentRect
+            ? { x: contentRect.x, right: contentRect.right }
+            : null,
+        };
+        if (
+          JSON.stringify(actualMobileHeader) !==
+          JSON.stringify(expectedMobileHeader)
+        ) {
+          failures.push({
+            type: "mobile-header-content-alignment",
+            expected: expectedMobileHeader,
+            actual: actualMobileHeader,
+          });
+        }
+      }
+      if (desktop && triggerRect && triggerRect.width > 0) {
+        failures.push({
+          type: "mobile-trigger-visible-on-desktop",
+          actual: triggerRect.width,
+        });
+      }
+      if (!desktop && sidebarRect && sidebarRect.width > 0) {
+        failures.push({
+          type: "desktop-sidebar-visible-on-mobile",
+          actual: sidebarRect.width,
+        });
+      }
+      if (
+        desktop &&
+        (!sidebarRect ||
+          sidebarRect.x !== shellLeft ||
+          sidebarRect.width !== 288)
+      ) {
+        failures.push({
+          type: "desktop-sidebar-geometry",
+          expected: { x: shellLeft, width: 288 },
+          actual: sidebarRect
+            ? { x: sidebarRect.x, width: sidebarRect.width }
+            : null,
+        });
+      }
+      if (desktop) {
+        const sidebarGroup = document.querySelector(
+          ".theme-doc-sidebar-desktop [data-slot='sidebar-group']"
+        );
+        const sidebarContainer = document.querySelector(
+          ".theme-doc-sidebar-desktop [data-slot='sidebar-container']"
+        );
+        const sidebarInner = document.querySelector(
+          ".theme-doc-sidebar-desktop [data-slot='sidebar-inner']"
+        );
+        const sidebarContent = document.querySelector(
+          ".theme-doc-sidebar-desktop [data-slot='sidebar-content']"
+        );
+        const backgroundProbe = document.createElement("div");
+        backgroundProbe.style.backgroundColor = "var(--background)";
+        document.body.append(backgroundProbe);
+        const expectedSidebarBackground =
+          getComputedStyle(backgroundProbe).backgroundColor;
+        backgroundProbe.remove();
+        const firstSidebarItem = sidebarGroup?.querySelector(
+          '[data-slot="sidebar-menu-button"]'
+        );
+        const groupRect = sidebarGroup?.getBoundingClientRect();
+        const itemRect = firstSidebarItem?.getBoundingClientRect();
+        const itemRange = document.createRange();
+        if (firstSidebarItem) itemRange.selectNodeContents(firstSidebarItem);
+        const itemTextRect = firstSidebarItem
+          ? itemRange.getClientRects()[0]
+          : null;
+        const sidebarSpacing = {
+          surface: {
+            backgroundMatches:
+              sidebarInner &&
+              getComputedStyle(sidebarInner).backgroundColor ===
+                expectedSidebarBackground,
+            borderRightWidth: desktopSidebar
+              ? getComputedStyle(desktopSidebar).borderRightWidth
+              : null,
+            position: desktopSidebar
+              ? getComputedStyle(desktopSidebar).position
+              : null,
+            top: desktopSidebar ? getComputedStyle(desktopSidebar).top : null,
+            scrollFade:
+              sidebarContent &&
+              getComputedStyle(sidebarContent).maskImage !== "none" &&
+              getComputedStyle(sidebarContent).animationTimeline.includes(
+                "scroll"
+              ),
+          },
+          group: groupRect
+            ? {
+                x: groupRect.x,
+                width: groupRect.width,
+                padding: getComputedStyle(sidebarGroup).padding,
+              }
+            : null,
+          firstItem: itemRect
+            ? { x: itemRect.x, width: itemRect.width, height: itemRect.height }
+            : null,
+          firstItemTextLeft: itemTextRect?.x ?? null,
+        };
+        if (
+          JSON.stringify(sidebarSpacing) !==
+          JSON.stringify({
+            surface: {
+              backgroundMatches: true,
+              borderRightWidth: "0px",
+              position: "sticky",
+              top: "64px",
+              scrollFade: true,
+            },
+            group: {
+              x: shellLeft + 8,
+              width: 280,
+              padding: "8px",
+            },
+            firstItem: {
+              x: shellLeft + 16,
+              width: 264,
+              height: 32,
+            },
+            firstItemTextLeft: shellLeft + 24,
+          })
+        ) {
+          failures.push({
+            type: "desktop-sidebar-spacing",
+            expected: {
+              surface: {
+                backgroundMatches: true,
+                borderRightWidth: "0px",
+                position: "sticky",
+                top: "64px",
+                scrollFade: true,
+              },
+              group: {
+                x: shellLeft + 8,
+                width: 280,
+                padding: "8px",
+              },
+              firstItem: {
+                x: shellLeft + 16,
+                width: 264,
+                height: 32,
+              },
+              firstItemTextLeft: shellLeft + 24,
+            },
+            actual: sidebarSpacing,
+          });
+        }
+      }
+      if (docsRect) {
+        const expectedX = desktop ? shellLeft + 288 : 8;
+        if (docsRect.x !== expectedX) {
+          failures.push({
+            type: "docs-x",
+            expected: expectedX,
+            actual: docsRect.x,
+          });
+        }
+      }
+      if (
+        desktop &&
+        sidebarRect &&
+        docsRect &&
+        sidebarRect.right > docsRect.x
+      ) {
+        failures.push({
+          type: "sidebar-docs-overlap",
+          sidebarRight: sidebarRect.right,
+          docsX: docsRect.x,
+        });
+      }
+      if (contentRect && contentRect.width > 640) {
+        failures.push({
+          type: "content-max-width",
+          expected: 640,
+          actual: contentRect.width,
+        });
+      }
+      if (width >= 1280) {
+        const breadcrumb = document.querySelector('[data-slot="breadcrumb"]');
+        const title = document.querySelector(".theme-doc-markdown h1");
+        const breadcrumbGap =
+          breadcrumb && title
+            ? title.getBoundingClientRect().top -
+              breadcrumb.getBoundingClientRect().bottom
+            : null;
+        if (breadcrumbGap !== 12.796875) {
+          failures.push({
+            type: "breadcrumb-title-gap",
+            expected: 12.796875,
+            actual: breadcrumbGap,
+          });
+        }
+      }
+
+      const tocExpected =
+        width >= 1280 &&
+        route !== "base-nova-parity" &&
+        document.querySelectorAll(".table-of-contents__link").length > 0;
+      const tocVisible = Boolean(
+        tocRect && tocRect.width > 0 && getComputedStyle(toc).display !== "none"
+      );
+      if (tocExpected !== tocVisible) {
+        failures.push({
+          type: "toc-visibility",
+          expected: tocExpected,
+          actual: tocVisible,
+        });
+      }
+      if (tocVisible) {
+        if (tocRect?.x !== shellRight - 288 || tocRect.right !== shellRight) {
+          failures.push({
+            type: "toc-shell-alignment",
+            expected: { x: shellRight - 288, right: shellRight },
+            actual: tocRect ? { x: tocRect.x, right: tocRect.right } : null,
+          });
+        }
+        const tocHeader = document.querySelector(
+          ".theme-doc-toc-desktop__header"
+        );
+        const tocScroll = document.querySelector(
+          ".theme-doc-toc-desktop__scroll"
+        );
+        const tocScrollStyle = tocScroll ? getComputedStyle(tocScroll) : null;
+        const tocComposition = {
+          headerOutsideScroll: Boolean(
+            tocHeader && tocScroll && !tocScroll.contains(tocHeader)
+          ),
+          scrollFade: Boolean(
+            tocScrollStyle &&
+            tocScrollStyle.maskImage !== "none" &&
+            tocScrollStyle.animationTimeline.includes("scroll")
+          ),
+          belowNavbar: Boolean(
+            tocHeader &&
+            navbarRect &&
+            tocHeader.getBoundingClientRect().top >= navbarRect.bottom
+          ),
+        };
+        if (
+          JSON.stringify(tocComposition) !==
+          JSON.stringify({
+            headerOutsideScroll: true,
+            scrollFade: true,
+            belowNavbar: true,
+          })
+        ) {
+          failures.push({
+            type: "toc-fixed-header-scroll-fade",
+            expected: {
+              headerOutsideScroll: true,
+              scrollFade: true,
+              belowNavbar: true,
+            },
+            actual: tocComposition,
+          });
+        }
+      }
+
+      const article = document.querySelector(".theme-doc-markdown");
+      const insideArticleComponent = (element) => {
+        const component = element.closest(
+          '[data-slot]:not([data-slot="docs"])'
+        );
+        return Boolean(component && article?.contains(component));
+      };
+      const headings = article
+        ? Array.from(article.querySelectorAll("h1, h2, h3, h4, h5, h6")).filter(
+            (element) =>
+              !insideArticleComponent(element) &&
+              !element.closest(".docusaurus-mermaid-container")
+          )
+        : [];
+      if (route !== "base-nova-parity") {
+        if (!headings.length || headings[0].tagName !== "H1") {
+          failures.push({
+            type: "missing-leading-h1",
+            actual: headings[0]?.tagName,
+          });
+        }
+        for (let index = 1; index < headings.length; index += 1) {
+          const previous = Number(headings[index - 1].tagName.slice(1));
+          const current = Number(headings[index].tagName.slice(1));
+          if (current > previous + 1) {
+            failures.push({
+              type: "heading-level-skip",
+              previous,
+              current,
+              index,
+            });
+          }
+        }
+
+        const directChildren = Array.from(article?.children ?? []);
+        const pageHeader = article?.querySelector(":scope > header");
+        const pageHeaderNext = pageHeader?.nextElementSibling;
+        if (
+          pageHeader &&
+          pageHeaderNext &&
+          rect(pageHeaderNext).y - rect(pageHeader).bottom !== 24
+        ) {
+          failures.push({
+            type: "page-title-flow-gap",
+            expected: 24,
+            actual: rect(pageHeaderNext).y - rect(pageHeader).bottom,
+          });
+        }
+        for (const heading of directChildren.filter((element) =>
+          element.matches("h1, h2, h3, h4, h5, h6")
+        )) {
+          const next = heading.nextElementSibling;
+          if (next && rect(next).y - rect(heading).bottom !== 16) {
+            failures.push({
+              type: "heading-content-flow-gap",
+              heading: heading.textContent?.trim(),
+              expected: 16,
+              actual: rect(next).y - rect(heading).bottom,
+            });
+          }
+        }
+        const ownsComponent = (element) =>
+          element.hasAttribute("data-slot") ||
+          Boolean(element.querySelector(":scope > [data-slot]")) ||
+          element.matches(".theme-code-block, .docusaurus-mermaid-container");
+        for (let index = 1; index < directChildren.length; index += 1) {
+          const previous = directChildren[index - 1];
+          const next = directChildren[index];
+          if (
+            (ownsComponent(previous) || ownsComponent(next)) &&
+            rect(next).y - rect(previous).bottom < 16
+          ) {
+            failures.push({
+              type: "component-separation-gap",
+              previous: pathFor(previous),
+              next: pathFor(next),
+              expectedMinimum: 16,
+              actual: rect(next).y - rect(previous).bottom,
+            });
+          }
+        }
+      }
+
+      const codeBackgrounds = new Set(
+        Array.from(document.querySelectorAll(".theme-code-block")).map(
+          (element) => getComputedStyle(element).backgroundColor
+        )
+      );
+      if (codeBackgrounds.size > 1) {
+        failures.push({
+          type: "code-surface-color-inconsistent",
+          actual: Array.from(codeBackgrounds),
+        });
+      }
+
+      const proseLists = article
+        ? Array.from(article.querySelectorAll("ul, ol")).filter(
+            (element) =>
+              !insideArticleComponent(element) &&
+              !element.closest(
+                ".theme-code-block, .docusaurus-mermaid-container"
+              ) &&
+              !element.classList.contains("contains-task-list")
+          )
+        : [];
+      for (const list of proseLists) {
+        if (getComputedStyle(list).listStyleType === "none") {
+          failures.push({
+            type: "missing-list-marker",
+            element: pathFor(list),
+          });
+        }
+        for (const item of list.querySelectorAll(":scope > li")) {
+          if (getComputedStyle(item).display !== "list-item") {
+            failures.push({
+              type: "invalid-list-item-display",
+              element: pathFor(item),
+            });
+          }
+        }
+      }
+
+      const signature = {
+        navbarHeight: navbarRect?.height ?? 0,
+        desktopSidebar: Boolean(sidebarRect && sidebarRect.width > 0),
+        mobileTrigger: Boolean(triggerRect && triggerRect.width > 0),
+        toc: tocVisible,
+        proseFontSize: article ? getComputedStyle(article).fontSize : null,
+        footerDirection: document.querySelector(".footer > .container")
+          ? getComputedStyle(document.querySelector(".footer > .container"))
+              .flexDirection
+          : null,
+        contentAtMax: contentRect ? contentRect.width === 640 : false,
+        tableScrollable: Array.from(
+          document.querySelectorAll('[data-slot="table-container"]')
+        ).some((element) => element.scrollWidth > element.clientWidth),
+        codeScrollable: Array.from(
+          document.querySelectorAll(".theme-code-block pre")
+        ).some((element) => element.scrollWidth > element.clientWidth),
+        mermaidScrollable: Array.from(
+          document.querySelectorAll(".docusaurus-mermaid-container")
+        ).some((element) => element.scrollWidth > element.clientWidth),
+        tabsScrollable: Array.from(
+          document.querySelectorAll('[data-slot="tabs-list"]')
+        ).some((element) => element.scrollWidth > element.clientWidth),
+        paginatorColumns: document.querySelector(".pagination-nav")
+          ? getComputedStyle(
+              document.querySelector(".pagination-nav")
+            ).gridTemplateColumns.split(/\s+/).length
+          : null,
+        cardsSideBySide: (() => {
+          const cards = Array.from(
+            document.querySelectorAll('.theme-doc-markdown [data-slot="card"]')
+          ).filter((element) => visible(element));
+          return cards.length > 1
+            ? cards[0].getBoundingClientRect().y ===
+                cards[1].getBoundingClientRect().y
+            : null;
+        })(),
+        breadcrumbWrapped: (() => {
+          const list = document.querySelector('[data-slot="breadcrumb-list"]');
+          return list ? list.getBoundingClientRect().height > 20 : null;
+        })(),
+      };
+
+      return { failures, signature };
+    },
+    { route, width, ignoredZeroAreaTags: [...ignoredZeroAreaTags] }
+  );
+}
+
+function signatureKey(signature) {
+  return JSON.stringify(signature);
+}
+
+async function setContextTheme(context, theme) {
+  await context.addInitScript(
+    (value) => localStorage.setItem("theme", value),
+    theme
+  );
+}
+
+async function genericBoundaryInteraction(page, route, width) {
+  await page.goto(routeUrl(route), { waitUntil: "networkidle" });
+  await nextLayout(page);
+  const result = { route, width, checks: [], failures: [] };
+
+  const firstInteractive = page
+    .locator('main a[href], main button:not([disabled]), main [role="tab"]')
+    .filter({ visible: true })
+    .first();
+  if ((await firstInteractive.count()) > 0) {
+    const before = await firstInteractive.boundingBox();
+    await firstInteractive.hover();
+    const after = await firstInteractive.boundingBox();
+    result.checks.push("hover");
+    if (JSON.stringify(before) !== JSON.stringify(after)) {
+      result.failures.push("hover changed geometry");
+    }
+    await firstInteractive.focus();
+    const focusVisible = await firstInteractive.evaluate((element) =>
+      element.matches(":focus-visible")
+    );
+    result.checks.push("focus-visible");
+    if (!focusVisible)
+      result.failures.push("focused control lacks :focus-visible");
+  }
+
+  const overflow = await page.evaluate(() => ({
+    client: document.documentElement.clientWidth,
+    scroll: document.documentElement.scrollWidth,
+  }));
+  if (overflow.scroll > overflow.client)
+    result.failures.push("page overflow after hover/focus");
+  return result;
+}
+
+async function componentBoundaryInteractions(page, width) {
+  const results = [];
+  const desktop = width >= 1024;
+
+  await page.goto(routeUrl("guides/markdown-gfm"), {
+    waitUntil: "networkidle",
+  });
+  if (desktop) {
+    const navigation = page
+      .locator(".navbar")
+      .getByRole("button", { name: "Showcase", exact: true });
+    await navigation.focus();
+    await navigation.press("Enter");
+    const navigationMenu = page.locator(
+      '[data-slot="navigation-menu-content"]'
+    );
+    await navigationMenu.waitFor({ state: "visible" });
+    const longLink = navigationMenu.getByRole("link", {
+      name: "Markdown + GFM",
+    });
+    const longLinkMetrics = await longLink.evaluate((element) => {
+      const range = document.createRange();
+      range.selectNodeContents(element);
+      return {
+        lines: range.getClientRects().length,
+        height: getComputedStyle(element).height,
+      };
+    });
+    if (longLinkMetrics.lines !== 1 || longLinkMetrics.height !== "36px") {
+      results.push(
+        `NavigationMenu label wrapped: ${JSON.stringify(longLinkMetrics)}`
+      );
+    }
+    await page.keyboard.press("Escape");
+    await navigationMenu.waitFor({ state: "hidden" });
+    await page.waitForFunction(
+      (trigger) => document.activeElement === trigger,
+      await navigation.elementHandle()
+    );
+    if (
+      !(await navigation.evaluate((element) =>
+        element.matches(":focus-visible")
+      ))
+    ) {
+      results.push("NavigationMenu Escape did not restore visible focus");
+    }
+  } else {
+    const trigger = page.locator("[data-mobile-navigation-trigger]");
+    await trigger.click();
+    const sheet = page.locator('[data-slot="sheet-content"]');
+    await sheet.waitFor();
+    await page.waitForFunction(() => {
+      const element = document.querySelector('[data-slot="sheet-content"]');
+      return element && getComputedStyle(element).translate === "none";
+    });
+    const mobileSpacing = await sheet.evaluate((element) => {
+      const rect = element.getBoundingClientRect();
+      const backgroundProbe = document.createElement("div");
+      backgroundProbe.style.backgroundColor = "var(--background)";
+      document.body.append(backgroundProbe);
+      const expectedBackground =
+        getComputedStyle(backgroundProbe).backgroundColor;
+      backgroundProbe.remove();
+      const header = element.querySelector('[data-slot="sheet-header"]');
+      const title = element.querySelector('[data-slot="sheet-title"]');
+      const description = element.querySelector(
+        '[data-slot="sheet-description"]'
+      );
+      const close = element.querySelector('[data-slot="sheet-close"]');
+      const navigation = element.querySelector(
+        'nav[aria-label="Docs sidebar"]'
+      );
+      const sidebarContent = navigation?.closest(
+        '[data-slot="sidebar-content"]'
+      );
+      const firstItem = navigation?.querySelector(
+        '[data-slot="sidebar-menu-button"]'
+      );
+      const headerRect = header?.getBoundingClientRect();
+      const titleRect = title?.getBoundingClientRect();
+      const descriptionRect = description?.getBoundingClientRect();
+      const closeRect = close?.getBoundingClientRect();
+      const navigationRect = navigation?.getBoundingClientRect();
+      const firstItemRect = firstItem?.getBoundingClientRect();
+      return {
+        sheet: { x: rect.x, width: rect.width },
+        surface: {
+          backgroundMatches:
+            getComputedStyle(element).backgroundColor === expectedBackground,
+          borderRightWidth: getComputedStyle(element).borderRightWidth,
+          scrollFade: Boolean(
+            sidebarContent &&
+            getComputedStyle(sidebarContent).maskImage !== "none" &&
+            getComputedStyle(sidebarContent).animationTimeline.includes(
+              "scroll"
+            )
+          ),
+        },
+        header: headerRect
+          ? {
+              x: headerRect.x,
+              width: headerRect.width,
+              height: headerRect.height,
+              padding: getComputedStyle(header).padding,
+              gap: getComputedStyle(header).rowGap,
+            }
+          : null,
+        title: titleRect
+          ? { x: titleRect.x, y: titleRect.y, height: titleRect.height }
+          : null,
+        description: descriptionRect
+          ? {
+              x: descriptionRect.x,
+              y: descriptionRect.y,
+              height: descriptionRect.height,
+            }
+          : null,
+        close: closeRect
+          ? {
+              x: closeRect.x,
+              y: closeRect.y,
+              width: closeRect.width,
+              height: closeRect.height,
+              rightInset: rect.right - closeRect.right,
+              titleCenterDelta: titleRect
+                ? Math.abs(
+                    titleRect.y +
+                      titleRect.height / 2 -
+                      (closeRect.y + closeRect.height / 2)
+                  )
+                : null,
+            }
+          : null,
+        navigation: navigationRect
+          ? { x: navigationRect.x, width: navigationRect.width }
+          : null,
+        firstItem: firstItemRect
+          ? {
+              x: firstItemRect.x,
+              width: firstItemRect.width,
+              height: firstItemRect.height,
+            }
+          : null,
+      };
+    });
+    if (
+      JSON.stringify(mobileSpacing) !==
+      JSON.stringify({
+        sheet: { x: 0, width: 288 },
+        surface: {
+          backgroundMatches: true,
+          borderRightWidth: "0px",
+          scrollFade: true,
+        },
+        header: {
+          x: 0,
+          width: 288,
+          height: 78,
+          padding: "16px",
+          gap: "2px",
+        },
+        title: { x: 16, y: 16, height: 24 },
+        description: { x: 16, y: 42, height: 20 },
+        close: {
+          x: 248,
+          y: 12,
+          width: 28,
+          height: 28,
+          rightInset: 12,
+          titleCenterDelta: 2,
+        },
+        navigation: { x: 8, width: 272 },
+        firstItem: { x: 8, width: 272, height: 32 },
+      })
+    ) {
+      results.push(
+        `Sheet spacing differs from official mobile Sidebar: ${JSON.stringify(mobileSpacing)}`
+      );
+    }
+    await page.keyboard.press("Escape");
+    await page
+      .locator('[data-slot="sheet-content"]')
+      .waitFor({ state: "detached" });
+    if (
+      !(await trigger.evaluate((element) => element.matches(":focus-visible")))
+    ) {
+      results.push("Sheet Escape did not restore visible focus");
+    }
+  }
+
+  const themeTrigger = page.getByRole("button", { name: /^Color theme:/ });
+  await themeTrigger.focus();
+  await themeTrigger.press("Enter");
+  await page
+    .getByRole("menu", { name: /^Color theme:/ })
+    .waitFor({ state: "visible" });
+  await page.keyboard.press("Escape");
+  await page.waitForFunction(() =>
+    document.activeElement?.matches('[data-slot="dropdown-menu-trigger"]')
+  );
+  const themeFocusVisible = await page.evaluate(() =>
+    document.activeElement?.matches(
+      '[data-slot="dropdown-menu-trigger"]:focus-visible'
+    )
+  );
+  if (!themeFocusVisible) {
+    results.push("Theme menu Escape did not restore visible focus");
+  }
+
+  const details = page
+    .locator('.theme-doc-markdown [data-slot="accordion-trigger"]')
+    .last();
+  await details.click();
+  if ((await details.getAttribute("aria-expanded")) !== "true") {
+    results.push("Accordion did not expand");
+  }
+  await details.click();
+
+  await page.goto(routeUrl("showcase/mdx-playground"), {
+    waitUntil: "networkidle",
+  });
+  const tabs = page.locator('[data-slot="tabs-trigger"]');
+  await tabs.nth(1).click();
+  if ((await tabs.nth(1).getAttribute("aria-selected")) !== "true") {
+    results.push("Tabs did not select second tab");
+  }
+  const disabled = page.getByRole("button", { name: "Disabled" });
+  if (!(await disabled.isDisabled()))
+    results.push("Disabled Button is enabled");
+  if ((await page.locator('[data-slot="spinner"]').count()) < 1) {
+    results.push("Loading Spinner missing");
+  }
+
+  await page.goto(routeUrl("showcase/mermaid"), { waitUntil: "networkidle" });
+  for (const scroller of await page
+    .locator(".docusaurus-mermaid-container")
+    .all()) {
+    const metrics = await scroller.evaluate((element) => ({
+      client: element.clientWidth,
+      scroll: element.scrollWidth,
+    }));
+    if (metrics.scroll > metrics.client) {
+      await scroller.evaluate((element) => {
+        element.scrollLeft = element.scrollWidth;
+      });
+      if ((await scroller.evaluate((element) => element.scrollLeft)) <= 0) {
+        results.push("Mermaid horizontal scroll did not move");
+      }
+    }
+  }
+
+  return results;
+}
+
+function reportMarkdown(discovery, rows, transitions, boundaryRows) {
+  const failures = rows.reduce((sum, row) => sum + row.failures.length, 0);
+  return [
+    "# Exhaustive responsive route sweep",
+    "",
+    `- primary routes: ${discovery.primaryRoutes.length}`,
+    `- supplemental routes excluded from primary sweep: ${discovery.supplementalRoutes.join(", ") || "none"}`,
+    `- themes: ${themes.length}`,
+    `- widths: ${minWidth}..${maxWidth} inclusive (${maxWidth - minWidth + 1})`,
+    `- route/theme/width rows: ${rows.length}`,
+    `- failures: ${failures}`,
+    `- interaction boundary rows: ${boundaryRows.length}`,
+    "",
+    "## Routes",
+    "",
+    ...discovery.primaryRoutes.map((route) => `- \`/${route}\``),
+    "",
+    "## Discrete transitions",
+    "",
+    ...transitions.map(
+      (entry) =>
+        `- \`/${entry.route}\` ${entry.theme} @ ${entry.width}px: ${entry.changed.join(", ")}`
+    ),
+    "",
+    "## Boundary interactions",
+    "",
+    ...boundaryRows.map(
+      (entry) =>
+        `- ${entry.theme} ${entry.width}px ${entry.route ?? "component matrix"}: ${entry.failures.length ? entry.failures.join("; ") : "pass"}`
+    ),
+    "",
+  ].join("\n");
+}
+
+(async () => {
+  const discovery = discoverActualRoutes();
+  fs.mkdirSync(artifactDir, { recursive: true });
+  const browser = await chromium.launch({ headless: true });
+  const pages = [];
+  const rows = [];
+  const transitions = [];
+  const previousSignatures = new Map();
+
+  try {
+    for (const theme of themes) {
+      const context = await browser.newContext({
+        viewport: { width: minWidth, height },
+        colorScheme: theme,
+      });
+      await setContextTheme(context, theme);
+      for (const route of discovery.primaryRoutes) {
+        const page = await context.newPage();
+        const response = await page.goto(routeUrl(route), {
+          waitUntil: "networkidle",
+        });
+        if (!response?.ok())
+          throw new Error(`/${route}: HTTP ${response?.status()}`);
+        pages.push({ page, route, theme, context });
+      }
+    }
+
+    for (let width = minWidth; width <= maxWidth; width += 1) {
+      await Promise.all(
+        pages.map(async ({ page }) => {
+          await page.setViewportSize({ width, height });
+          await nextLayout(page);
+        })
+      );
+      const inspected = await Promise.all(
+        pages.map(async ({ page, route, theme }) => ({
+          route,
+          theme,
+          width,
+          ...(await inspectWidth(page, route, width)),
+        }))
+      );
+      for (const row of inspected) {
+        rows.push(row);
+        const key = `${row.route}\0${row.theme}`;
+        const previous = previousSignatures.get(key);
+        const currentKey = signatureKey(row.signature);
+        if (previous && previous.key !== currentKey) {
+          const changed = Object.keys(row.signature).filter(
+            (name) => !Object.is(previous.signature[name], row.signature[name])
+          );
+          transitions.push({
+            route: row.route,
+            theme: row.theme,
+            width,
+            changed,
+          });
+        }
+        previousSignatures.set(key, {
+          key: currentKey,
+          signature: row.signature,
+        });
+      }
+      if (width % 100 === 0) console.log(`swept through ${width}px`);
+    }
+
+    const transitionWidths = [...new Set(transitions.map(({ width }) => width))]
+      .flatMap((width) => [width - 1, width, width + 1])
+      .filter((width) => width >= minWidth && width <= maxWidth)
+      .filter((width, index, values) => values.indexOf(width) === index)
+      .sort((a, b) => a - b);
+    const boundaryRows = [];
+    fs.writeFileSync(
+      path.join(artifactDir, "width-rows.partial.json"),
+      JSON.stringify({
+        ...discovery,
+        range: [minWidth, maxWidth],
+        themes,
+        rows,
+        transitions,
+      })
+    );
+
+    for (const theme of themes) {
+      const context = await browser.newContext({ colorScheme: theme });
+      await setContextTheme(context, theme);
+      const page = await context.newPage();
+      for (const width of transitionWidths) {
+        await page.setViewportSize({ width, height });
+        for (const route of discovery.primaryRoutes) {
+          try {
+            const interaction = await genericBoundaryInteraction(
+              page,
+              route,
+              width
+            );
+            boundaryRows.push({ theme, ...interaction });
+          } catch (error) {
+            boundaryRows.push({
+              theme,
+              width,
+              route,
+              checks: ["generic-boundary"],
+              failures: [
+                error instanceof Error ? error.message : String(error),
+              ],
+            });
+          }
+        }
+        try {
+          const failures = await componentBoundaryInteractions(page, width);
+          boundaryRows.push({
+            theme,
+            width,
+            route: null,
+            checks: ["component-matrix"],
+            failures,
+          });
+        } catch (error) {
+          boundaryRows.push({
+            theme,
+            width,
+            route: null,
+            checks: ["component-matrix"],
+            failures: [error instanceof Error ? error.message : String(error)],
+          });
+        }
+      }
+      await context.close();
+    }
+
+    const failures = rows.filter((row) => row.failures.length);
+    const interactionFailures = boundaryRows.filter(
+      (row) => row.failures.length
+    );
+    fs.writeFileSync(
+      path.join(artifactDir, "results.json"),
+      JSON.stringify(
+        {
+          ...discovery,
+          range: [minWidth, maxWidth],
+          themes,
+          rows,
+          transitions,
+          boundaryRows,
+        },
+        null,
+        2
+      )
+    );
+    fs.writeFileSync(
+      path.join(artifactDir, "report.md"),
+      reportMarkdown(discovery, rows, transitions, boundaryRows)
+    );
+
+    if (failures.length || interactionFailures.length) {
+      console.error(
+        `Responsive sweep failed: ${failures.length} width rows, ${interactionFailures.length} interaction rows. See artifacts/responsive-sweep/results.json`
+      );
+      process.exitCode = 1;
+    } else {
+      console.log(
+        `Responsive sweep passed: ${rows.length} route/theme/width rows and ${boundaryRows.length} interaction rows.`
+      );
+    }
+  } finally {
+    await browser.close();
+  }
+})();
diff --git a/scripts/version.ts b/scripts/version.ts
index 4963f9b98..762e6a7f4 100755
--- a/scripts/version.ts
+++ b/scripts/version.ts
@@ -123,7 +123,7 @@ function main() {
   if (fs.existsSync(templatePkgPath)) {
     const templatePkg = JSON.parse(fs.readFileSync(templatePkgPath, "utf-8"));
     templatePkg.dependencies["docusaurus-plugin-openapi-docs"] = nextVersion;
-    templatePkg.dependencies["docusaurus-theme-openapi-docs"] = nextVersion;
+    templatePkg.dependencies["docusaurus-theme-shadcn-docs"] = nextVersion;
     fs.writeFileSync(
       templatePkgPath,
       JSON.stringify(templatePkg, null, 2) + "\n"
diff --git a/tests/theme-parity.spec.ts b/tests/theme-parity.spec.ts
new file mode 100644
index 000000000..c28f38d26
--- /dev/null
+++ b/tests/theme-parity.spec.ts
@@ -0,0 +1,1105 @@
+import { expect, test } from "playwright/test";
+
+const markdownRoute = "guides/markdown-gfm";
+const mdxRoute = "showcase/mdx-playground";
+
+test.beforeEach(async ({ page }) => {
+  await page.addInitScript(() => {
+    if (!localStorage.getItem("theme")) localStorage.setItem("theme", "dark");
+  });
+});
+
+test("primary routes emit no runtime or accessibility errors", async ({
+  page,
+}) => {
+  const errors: string[] = [];
+  page.on("console", (message) => {
+    if (message.type() === "error") errors.push(message.text());
+  });
+  page.on("pageerror", (error) => errors.push(error.message));
+
+  for (const route of ["", markdownRoute, mdxRoute, "showcase/mermaid"]) {
+    await page.goto(route);
+  }
+
+  expect(errors).toEqual([]);
+});
+
+test("desktop GNB uses one official NavigationMenu with unwrapped links", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(mdxRoute);
+
+  const left = page.locator(".navbar__items:not(.navbar__items--right)");
+  const navigation = left.locator('[data-slot="navigation-menu"]');
+  const list = navigation.locator('[data-slot="navigation-menu-list"]');
+  const directLink = list.getByRole("link", { name: "Docs", exact: true });
+  const trigger = list.getByRole("button", { name: "Showcase", exact: true });
+
+  await expect(navigation).toHaveCount(1);
+  await expect(directLink).toHaveCSS("height", "36px");
+  await expect(trigger).toHaveCSS("height", "36px");
+  await expect(directLink).toHaveCSS("font-weight", "500");
+  await expect(trigger).toHaveCSS("font-weight", "500");
+
+  const brand = page.locator(".navbar__brand");
+  const gap = await brand.evaluate(
+    (element, action) => {
+      const brandRect = element.getBoundingClientRect();
+      const actionRect = (action as Element).getBoundingClientRect();
+      return actionRect.left - brandRect.right;
+    },
+    await directLink.elementHandle()
+  );
+  expect(gap).toBe(8);
+
+  await trigger.click();
+  const content = page.locator('[data-slot="navigation-menu-content"]');
+  const longLink = content.getByRole("link", { name: "Markdown + GFM" });
+  await expect(longLink).toBeVisible();
+  await expect
+    .poll(async () => (await longLink.boundingBox())?.height)
+    .toBe(36);
+  const textMetrics = await longLink.evaluate((element) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    return {
+      lines: range.getClientRects().length,
+      height: element.getBoundingClientRect().height,
+      whiteSpace: getComputedStyle(element).whiteSpace,
+    };
+  });
+  expect(textMetrics).toEqual({
+    lines: 1,
+    height: 36,
+    whiteSpace: "normal",
+  });
+});
+
+test("wide desktop shell centers GNB, LNB, content, TOC, and footer", async ({
+  page,
+}) => {
+  for (const width of [1920, 2736]) {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto(markdownRoute);
+    const shellLeft = (width - 1440) / 2;
+    const metrics = await page.evaluate(() => {
+      const rect = (selector: string) => {
+        const element = document.querySelector(selector);
+        const value = element?.getBoundingClientRect();
+        return value
+          ? { x: value.x, right: value.right, width: value.width }
+          : null;
+      };
+      const textLeft = (selector: string) => {
+        const element = document.querySelector(selector);
+        if (!element) return null;
+        const range = document.createRange();
+        range.selectNodeContents(element);
+        return range.getClientRects()[0]?.x ?? null;
+      };
+      const navbar = document.querySelector(".navbar");
+      const blur = navbar ? getComputedStyle(navbar, "::before") : null;
+      return {
+        navbarInner: rect(".navbar__inner"),
+        brand: rect(".navbar__brand"),
+        wrapper: rect(".theme-doc-root-layout > main > .container-wrapper"),
+        sidebar: rect(
+          ".theme-doc-sidebar-desktop [data-slot='sidebar-container']"
+        ),
+        firstSidebarItem: rect(
+          ".theme-doc-sidebar-desktop [data-slot='sidebar-menu-button']"
+        ),
+        firstSidebarTextLeft: textLeft(
+          ".theme-doc-sidebar-desktop [data-slot='sidebar-menu-button']"
+        ),
+        docs: rect('[data-slot="docs"]'),
+        content: rect(".theme-doc-page__content"),
+        toc: rect(".theme-doc-page__toc"),
+        footer: rect(".footer > .container"),
+        navbar: navbar
+          ? {
+              position: getComputedStyle(navbar).position,
+              background: getComputedStyle(navbar).backgroundColor,
+            }
+          : null,
+        blur: blur
+          ? {
+              backdropFilter: blur.backdropFilter,
+              borderBottomWidth: blur.borderBottomWidth,
+              background: blur.backgroundColor,
+            }
+          : null,
+      };
+    });
+
+    expect(metrics).toMatchObject({
+      navbarInner: {
+        x: shellLeft + 24,
+        right: shellLeft + 1416,
+        width: 1392,
+      },
+      brand: { x: shellLeft + 24 },
+      wrapper: { x: shellLeft, right: shellLeft + 1440, width: 1440 },
+      sidebar: { x: shellLeft, width: 288 },
+      firstSidebarItem: { x: shellLeft + 16, width: 264 },
+      firstSidebarTextLeft: shellLeft + 24,
+      docs: { x: shellLeft + 288, right: shellLeft + 1440, width: 1152 },
+      content: { x: width / 2 - 320, right: width / 2 + 320, width: 640 },
+      toc: {
+        x: shellLeft + 1152,
+        right: shellLeft + 1440,
+        width: 288,
+      },
+      footer: { x: shellLeft, right: shellLeft + 1440, width: 1440 },
+      navbar: { position: "sticky", background: "rgba(0, 0, 0, 0)" },
+      blur: {
+        backdropFilter: "blur(12px)",
+        borderBottomWidth: "1px",
+      },
+    });
+    expect(metrics.blur?.background).not.toBe("rgba(0, 0, 0, 0)");
+  }
+});
+
+test("desktop LNB stays sticky until the page footer boundary", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto("");
+
+  const sidebar = page.locator(".theme-doc-sidebar-desktop");
+  const sidebarFooter = sidebar.locator('[data-slot="sidebar-footer"]');
+  const pageFooter = page.getByRole("contentinfo");
+  await expect(sidebar).toHaveCSS("position", "sticky");
+  await expect(sidebar).toHaveCSS("top", "64px");
+
+  await page.evaluate(() => scrollTo(0, 200));
+  await expect.poll(async () => (await sidebar.boundingBox())?.y).toBe(64);
+
+  await page.evaluate(() => scrollTo(0, document.documentElement.scrollHeight));
+  await expect
+    .poll(async () => {
+      const [sidebarBox, sidebarFooterBox, pageFooterBox] = await Promise.all([
+        sidebar.boundingBox(),
+        sidebarFooter.boundingBox(),
+        pageFooter.boundingBox(),
+      ]);
+      if (!sidebarBox || !sidebarFooterBox || !pageFooterBox) return null;
+      return {
+        sidebarBoundaryDelta:
+          sidebarBox.y + sidebarBox.height - pageFooterBox.y,
+        sidebarFooterBoundaryDelta:
+          sidebarFooterBox.y + sidebarFooterBox.height - pageFooterBox.y,
+      };
+    })
+    .toEqual({
+      sidebarBoundaryDelta: 0,
+      sidebarFooterBoundaryDelta: 0,
+    });
+});
+
+test("desktop LNB controls change category and rail state", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(markdownRoute);
+
+  const sidebar = page.getByRole("navigation", { name: "Docs sidebar" });
+  const desktopSurface = await page.evaluate(() => {
+    const container = document.querySelector(
+      ".theme-doc-sidebar-desktop [data-slot='sidebar-container']"
+    );
+    const inner = document.querySelector(
+      ".theme-doc-sidebar-desktop [data-slot='sidebar-inner']"
+    );
+    const content = document.querySelector(
+      ".theme-doc-sidebar-desktop [data-slot='sidebar-content']"
+    );
+    const probe = document.createElement("div");
+    probe.style.backgroundColor = "var(--background)";
+    document.body.append(probe);
+    const expectedBackground = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+    return {
+      background: inner ? getComputedStyle(inner).backgroundColor : null,
+      expectedBackground,
+      borderRightWidth: container
+        ? getComputedStyle(container).borderRightWidth
+        : null,
+      scrollFade: content
+        ? {
+            maskImage: getComputedStyle(content).maskImage,
+            animationTimeline:
+              getComputedStyle(content).getPropertyValue("animation-timeline"),
+          }
+        : null,
+    };
+  });
+  expect(desktopSurface).toMatchObject({
+    background: desktopSurface.expectedBackground,
+    expectedBackground: desktopSurface.expectedBackground,
+    borderRightWidth: "0px",
+  });
+  expect(desktopSurface.scrollFade?.maskImage).not.toBe("none");
+  expect(desktopSurface.scrollFade?.animationTimeline).toContain("scroll");
+  const fadeStates = await page
+    .locator(".theme-doc-sidebar-desktop [data-slot='sidebar-content']")
+    .evaluate(async (element) => {
+      const content = element as HTMLElement;
+      const spacer = document.createElement("div");
+      spacer.style.height = "1000px";
+      spacer.style.flexShrink = "0";
+      content.append(spacer);
+      content.style.flex = "none";
+      content.style.height = "96px";
+      const settle = () =>
+        new Promise<void>((resolve) =>
+          requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+        );
+      const read = () => {
+        const style = getComputedStyle(content);
+        const isActive = (value: string) =>
+          value !== "0px" && !value.includes("(0 *");
+        return {
+          top: isActive(style.getPropertyValue("--scroll-fade-t")),
+          bottom: isActive(style.getPropertyValue("--scroll-fade-b")),
+        };
+      };
+      content.scrollTop = 0;
+      await settle();
+      const start = read();
+      content.scrollTop = content.scrollHeight / 2;
+      await settle();
+      const middle = read();
+      content.scrollTop = content.scrollHeight;
+      await settle();
+      const end = read();
+      spacer.remove();
+      content.style.removeProperty("flex");
+      content.style.removeProperty("height");
+      content.scrollTop = 0;
+      return { start, middle, end };
+    });
+  expect(fadeStates).toEqual({
+    start: { top: false, bottom: true },
+    middle: { top: true, bottom: true },
+    end: { top: true, bottom: false },
+  });
+
+  const sidebarGroup = page
+    .locator('[data-slot="sidebar-group"]')
+    .filter({ has: sidebar });
+  const firstMenuItem = sidebar
+    .locator('[data-slot="sidebar-menu-button"]')
+    .first();
+  await expect(sidebarGroup).toHaveCSS("padding", "8px");
+  await expect
+    .poll(async () => {
+      const box = await firstMenuItem.boundingBox();
+      return box && { x: box.x, width: box.width, height: box.height };
+    })
+    .toEqual({ x: 16, width: 264, height: 32 });
+
+  const category = sidebar.getByRole("button", { name: "Guides", exact: true });
+  const child = sidebar.getByRole("link", { name: "Markdown and GFM" });
+
+  await expect(category).toHaveAttribute("aria-expanded", "true");
+  await category.click();
+  await expect(category).toHaveAttribute("aria-expanded", "false");
+  await expect(child).toBeHidden();
+  await category.click();
+  await expect(category).toHaveAttribute("aria-expanded", "true");
+  await expect(child).toBeVisible();
+
+  await page.getByRole("button", { name: "Collapse sidebar" }).click();
+  await expect(
+    page.getByRole("button", { name: "Expand sidebar" })
+  ).toBeVisible();
+  await expect(
+    sidebar.getByRole("link", { name: "Starter overview" })
+  ).toHaveCount(0);
+  await expect(
+    page
+      .locator(".theme-doc-sidebar-desktop")
+      .getByRole("button", { name: /Color theme:/ })
+  ).toBeVisible();
+  await expect
+    .poll(() =>
+      page
+        .locator("[data-slot='sidebar-gap']")
+        .evaluate((element) => element.getBoundingClientRect().width)
+    )
+    .toBe(80);
+  await page.getByRole("button", { name: "Expand sidebar" }).click();
+  await expect(
+    page.getByRole("button", { name: "Collapse sidebar" })
+  ).toBeVisible();
+  await expect
+    .poll(() =>
+      page
+        .locator("[data-slot='sidebar-gap']")
+        .evaluate((element) => element.getBoundingClientRect().width)
+    )
+    .toBe(288);
+});
+
+test("desktop columns share one text start and TOC scroll-fades links", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(markdownRoute);
+
+  const result = await page.evaluate(() => {
+    const navbar = document.querySelector(".navbar");
+    const rail = document.querySelector(".theme-doc-page__toc");
+    const header = document.querySelector(".theme-doc-toc-desktop__header");
+    const scroll = document.querySelector(".theme-doc-toc-desktop__scroll");
+    const lnbItem = document.querySelector(
+      ".theme-doc-sidebar-desktop [data-slot='sidebar-menu-button']"
+    );
+    const breadcrumb = document.querySelector('[data-slot="breadcrumb"]');
+    const firstTocLink = document.querySelector(
+      ".theme-doc-toc-desktop__list .table-of-contents__link"
+    );
+    if (!navbar || !rail || !scroll || !lnbItem || !breadcrumb || !firstTocLink)
+      return null;
+
+    const lineTop = (element: Element) => {
+      const rect = element.getBoundingClientRect();
+      const lineHeight = Number.parseFloat(
+        getComputedStyle(element).lineHeight
+      );
+      return rect.top + Math.max(0, (rect.height - lineHeight) / 2);
+    };
+    const navbarRect = navbar.getBoundingClientRect();
+    const railStyle = getComputedStyle(rail);
+    const scrollStyle = getComputedStyle(scroll);
+    const scrollElement = scroll as HTMLElement;
+    const textTops = {
+      lnb: lineTop(lnbItem),
+      content: breadcrumb.getBoundingClientRect().top,
+      toc: firstTocLink.getBoundingClientRect().top,
+    };
+    scrollElement.style.flex = "none";
+    scrollElement.style.height = "64px";
+    scrollElement.scrollTop = scrollElement.scrollHeight;
+
+    return {
+      railPosition: railStyle.position,
+      railTop: rail.getBoundingClientRect().top,
+      navbarBottom: navbarRect.bottom,
+      scrollOverflow: scrollElement.scrollHeight > scrollElement.clientHeight,
+      headerPresent: Boolean(header),
+      textTops,
+      maskImage: scrollStyle.maskImage,
+      animationTimeline: scrollStyle.getPropertyValue("animation-timeline"),
+    };
+  });
+
+  expect(result).not.toBeNull();
+  expect(result?.railPosition).toBe("sticky");
+  expect(result?.railTop).toBeGreaterThanOrEqual(result?.navbarBottom ?? 0);
+  expect(result?.scrollOverflow).toBe(true);
+  expect(result?.headerPresent).toBe(false);
+  expect(result?.textTops).toEqual({ lnb: 88, content: 88, toc: 88 });
+  expect(result?.maskImage).not.toBe("none");
+  expect(result?.animationTimeline).toContain("scroll");
+
+  await page.evaluate(() => window.scrollTo(0, 500));
+  const pinned = await page.evaluate(() => {
+    const lnb = document.querySelector(".theme-doc-sidebar-desktop");
+    const toc = document.querySelector(".theme-doc-page__toc");
+    return {
+      lnb: lnb?.getBoundingClientRect().top,
+      lnbPosition: lnb && getComputedStyle(lnb).position,
+      toc: toc?.getBoundingClientRect().top,
+      tocPosition: toc && getComputedStyle(toc).position,
+    };
+  });
+  expect(pinned).toEqual({
+    lnb: 64,
+    lnbPosition: "sticky",
+    toc: 64,
+    tocPosition: "sticky",
+  });
+
+  const boundary = await page.evaluate(() => {
+    window.scrollTo(0, document.documentElement.scrollHeight);
+    const lnb = document.querySelector(".theme-doc-sidebar-desktop");
+    const toc = document.querySelector(".theme-doc-page__toc");
+    const footer = document.querySelector(".theme-layout-footer");
+    return {
+      lnbBottom: lnb?.getBoundingClientRect().bottom,
+      tocBottom: toc?.getBoundingClientRect().bottom,
+      footerTop: footer?.getBoundingClientRect().top,
+    };
+  });
+  expect(boundary.lnbBottom).toBeLessThanOrEqual(boundary.footerTop ?? 0);
+  expect(boundary.tocBottom).toBeLessThanOrEqual(boundary.footerTop ?? 0);
+});
+
+test("Tabs, Details, NavigationMenu, and CodeBlock expose real outcomes", async ({
+  page,
+  context,
+}) => {
+  await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+  await page.setViewportSize({ width: 1024, height: 900 });
+  await page.goto(mdxRoute);
+
+  const showcase = page.locator(".navbar").getByRole("button", {
+    name: "Showcase",
+    exact: true,
+  });
+  const showcaseMenu = page.locator('[data-slot="navigation-menu-content"]');
+  await showcase.focus();
+  await page.keyboard.press("Enter");
+  await expect(
+    showcaseMenu.getByRole("link", { name: "Mermaid" })
+  ).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(showcaseMenu).toBeHidden();
+  await expect(showcase).toBeFocused();
+  expect(
+    await showcase.evaluate((element) => element.matches(":focus-visible"))
+  ).toBe(true);
+
+  const configTab = page.getByRole("tab", { name: "Config" });
+  await configTab.click();
+  await expect(configTab).toHaveAttribute("aria-selected", "true");
+  await expect(page.getByRole("tabpanel")).toContainText(
+    'themes: ["@docusaurus/theme-mermaid", "@aeei/docusaurus-theme"]'
+  );
+
+  await page.goto(markdownRoute);
+  const details = page.getByRole("button", { name: "Expandable details" });
+  await details.focus();
+  await page.keyboard.press("Enter");
+  await expect(details).toHaveAttribute("aria-expanded", "true");
+  await expect(
+    page.getByText("Hidden body copy can include lists, code, and links.")
+  ).toBeVisible();
+
+  const code = page.locator("figure.theme-code-block").first();
+  await code.getByRole("button", { name: "Copy code to clipboard" }).click();
+  await expect
+    .poll(() => page.evaluate(() => navigator.clipboard.readText()))
+    .toBe(
+      "export function Hello() {\n  return <span>Hello docs theme</span>;\n}"
+    );
+});
+
+test("theme, paginator, and back-to-top controls complete their journeys", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(mdxRoute);
+
+  const themeTrigger = page.getByRole("button", { name: "Color theme: Dark" });
+  await themeTrigger.click();
+  await page.getByRole("menuitem", { name: "Light" }).click();
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
+  await page.reload();
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
+
+  await page
+    .locator(".pagination-nav")
+    .getByRole("button", { name: /Mermaid examples/ })
+    .click();
+  await expect(page).toHaveURL(/\/showcase\/mermaid$/);
+
+  await page.goto(markdownRoute);
+  await page.mouse.wheel(0, 1600);
+  await expect.poll(() => page.evaluate(() => scrollY)).toBeGreaterThan(300);
+  await page.mouse.wheel(0, -200);
+  const backToTop = page.getByRole("button", { name: "Scroll back to top" });
+  await expect(backToTop).toBeVisible();
+  await backToTop.click();
+  await expect.poll(() => page.evaluate(() => scrollY)).toBe(0);
+});
+
+test("mobile Sheet exposes secondary and primary navigation with focus restoration", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto(markdownRoute);
+
+  const trigger = page.getByRole("button", { name: "Toggle navigation bar" });
+  const mobileHeaderAlignment = await page.evaluate(() => {
+    const inner = document.querySelector(".navbar__inner");
+    const trigger = document.querySelector("[data-mobile-navigation-trigger]");
+    const triggerIcon = trigger?.querySelector("svg");
+    const content = document.querySelector(".theme-doc-page__content");
+    const rect = (element) => element?.getBoundingClientRect();
+    const innerRect = rect(inner);
+    const triggerRect = rect(trigger);
+    const triggerIconRect = rect(triggerIcon);
+    const contentRect = rect(content);
+    return {
+      inner: innerRect ? { x: innerRect.x, width: innerRect.width } : null,
+      trigger: triggerRect
+        ? { x: triggerRect.x, width: triggerRect.width }
+        : null,
+      triggerIconLeft: triggerIconRect?.x,
+      content: contentRect
+        ? { x: contentRect.x, right: contentRect.right }
+        : null,
+    };
+  });
+  expect(mobileHeaderAlignment).toEqual({
+    inner: { x: 16, width: 358 },
+    trigger: { x: 16, width: 32 },
+    triggerIconLeft: 24,
+    content: { x: 24, right: 366 },
+  });
+  await trigger.click();
+  const sheet = page.locator('[data-slot="sheet-content"]');
+  const header = sheet.locator('[data-slot="sheet-header"]');
+  const title = header.locator('[data-slot="sheet-title"]');
+  const description = header.locator('[data-slot="sheet-description"]');
+  const close = sheet.locator('[data-slot="sheet-close"]');
+  const docsNavigation = sheet.getByRole("navigation", {
+    name: "Docs sidebar",
+  });
+  const backButton = sheet.getByRole("button", { name: "Back to main menu" });
+  const mobileThemeButton = sheet.getByRole("button", {
+    name: /Color theme:/,
+  });
+  const firstDocsItem = docsNavigation
+    .locator('[data-slot="sidebar-menu-button"]')
+    .first();
+
+  await expect(docsNavigation).toBeVisible();
+  await expect(mobileThemeButton).toBeVisible();
+  await expect
+    .poll(async () => {
+      const [sheetBox, headerBox, backBox, navigationBox, itemBox] =
+        await Promise.all(
+          [sheet, header, backButton, docsNavigation, firstDocsItem].map(
+            (locator) => locator.boundingBox()
+          )
+        );
+      return {
+        sheet: sheetBox && {
+          x: sheetBox.x,
+          width: sheetBox.width,
+          height: sheetBox.height,
+        },
+        header: headerBox && {
+          x: headerBox.x,
+          width: headerBox.width,
+          height: headerBox.height,
+        },
+        back: backBox && {
+          x: backBox.x,
+          width: backBox.width,
+          height: backBox.height,
+        },
+        navigation: navigationBox && {
+          x: navigationBox.x,
+          width: navigationBox.width,
+        },
+        firstItem: itemBox && {
+          x: itemBox.x,
+          width: itemBox.width,
+          height: itemBox.height,
+        },
+      };
+    })
+    .toEqual({
+      sheet: { x: 0, width: 288, height: 844 },
+      header: { x: 0, width: 288, height: 78 },
+      back: { x: 8, width: 272, height: 32 },
+      navigation: { x: 8, width: 272 },
+      firstItem: { x: 8, width: 272, height: 32 },
+    });
+  await expect(header).toHaveCSS("padding", "16px");
+  await expect(header).toHaveCSS("row-gap", "2px");
+  const mobileSurface = await sheet.evaluate((element) => {
+    const probe = document.createElement("div");
+    probe.style.backgroundColor = "var(--background)";
+    document.body.append(probe);
+    const expectedBackground = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+    const content = element.querySelector('[data-slot="sidebar-content"]');
+    return {
+      background: getComputedStyle(element).backgroundColor,
+      expectedBackground,
+      borderRightWidth: getComputedStyle(element).borderRightWidth,
+      scrollFade: content
+        ? {
+            maskImage: getComputedStyle(content).maskImage,
+            animationTimeline:
+              getComputedStyle(content).getPropertyValue("animation-timeline"),
+          }
+        : null,
+    };
+  });
+  expect(mobileSurface).toMatchObject({
+    background: mobileSurface.expectedBackground,
+    expectedBackground: mobileSurface.expectedBackground,
+    borderRightWidth: "0px",
+  });
+  expect(mobileSurface.scrollFade?.maskImage).not.toBe("none");
+  expect(mobileSurface.scrollFade?.animationTimeline).toContain("scroll");
+  const headerAlignment = await sheet.evaluate((element) => {
+    const title = element.querySelector('[data-slot="sheet-title"]');
+    const description = element.querySelector(
+      '[data-slot="sheet-description"]'
+    );
+    const close = element.querySelector('[data-slot="sheet-close"]');
+    if (!title || !description || !close) return null;
+    const titleRect = title.getBoundingClientRect();
+    const descriptionRect = description.getBoundingClientRect();
+    const closeRect = close.getBoundingClientRect();
+    const sheetRect = element.getBoundingClientRect();
+    return {
+      title: {
+        x: titleRect.x,
+        y: titleRect.y,
+        height: titleRect.height,
+      },
+      description: {
+        x: descriptionRect.x,
+        y: descriptionRect.y,
+        height: descriptionRect.height,
+      },
+      close: {
+        x: closeRect.x,
+        y: closeRect.y,
+        width: closeRect.width,
+        height: closeRect.height,
+        rightInset: sheetRect.right - closeRect.right,
+      },
+      titleCloseCenterDelta: Math.abs(
+        titleRect.y +
+          titleRect.height / 2 -
+          (closeRect.y + closeRect.height / 2)
+      ),
+    };
+  });
+  expect(headerAlignment).toEqual({
+    title: { x: 16, y: 16, height: 24 },
+    description: { x: 16, y: 42, height: 20 },
+    close: { x: 248, y: 12, width: 28, height: 28, rightInset: 12 },
+    titleCloseCenterDelta: 2,
+  });
+  await expect(title).toContainText("Navigation");
+  await expect(description).toContainText("Browse documentation pages.");
+  await expect(close).toHaveAccessibleName("Close");
+
+  await backButton.click();
+  await expect(sheet.getByRole("link", { name: "GitHub" })).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(sheet).toBeHidden();
+  await expect(trigger).toBeFocused();
+});
+
+test("Base Nova Button size variants keep official runtime metrics", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(mdxRoute);
+
+  const expectedHeights = new Map([
+    ["Extra small button", 24],
+    ["Small button", 28],
+    ["Default button", 32],
+    ["Large button", 36],
+    ["Extra small icon button", 24],
+    ["Small icon button", 28],
+    ["Default icon button", 32],
+    ["Large icon button", 36],
+  ]);
+
+  for (const [name, height] of expectedHeights) {
+    const button = page.getByRole("button", { name, exact: true });
+    await expect(button).toBeVisible();
+    expect(
+      await button.evaluate(
+        (element) => element.getBoundingClientRect().height
+      ),
+      name
+    ).toBe(height);
+    const icon = button.locator("svg");
+    if (await icon.count()) {
+      const iconSize = await icon.evaluate(
+        (element) => element.getBoundingClientRect().width
+      );
+      expect(iconSize, `${name} icon`).toBeLessThanOrEqual(height - 12);
+    }
+  }
+});
+
+test("Markdown fixture renders every supported authoring surface", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 390, height: 900 });
+  await page.goto(markdownRoute);
+
+  const article = page.locator(".theme-doc-page__article");
+  const markdown = page.locator(".theme-doc-markdown");
+  for (const level of [1, 2, 3, 4, 5, 6]) {
+    await expect(
+      article.locator(`h${level}`).first(),
+      `h${level}`
+    ).toBeVisible();
+  }
+  await expect(markdown.locator("strong").first()).toBeVisible();
+  await expect(markdown.locator("em").first()).toBeVisible();
+  await expect(markdown.locator("del").first()).toBeVisible();
+  await expect(markdown.locator("ol").first()).toBeVisible();
+  await expect(markdown.locator("ul").first()).toBeVisible();
+  await expect(
+    markdown.locator('input[type="checkbox"]').first()
+  ).toBeVisible();
+  await expect(markdown.locator("blockquote").first()).toBeVisible();
+  await expect(markdown.locator("table").first()).toBeVisible();
+  await expect(markdown.locator("figure").first()).toBeVisible();
+  await expect(markdown.locator("img").first()).toBeVisible();
+  await expect(markdown.locator("br").first()).toBeAttached();
+  await expect(markdown.locator("sup").first()).toBeVisible();
+  await expect(markdown.locator("section.footnotes")).toBeVisible();
+  await expect(markdown.locator("figure.theme-code-block")).toHaveCount(3);
+  await expect(markdown.locator('[data-slot="accordion"]')).toBeAttached();
+  await expect(page.locator("html")).toHaveJSProperty("scrollWidth", 390);
+});
+
+test("inline code keeps one component-owned surface inside Details", async ({
+  page,
+}) => {
+  for (const width of [390, 768, 1440]) {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto(markdownRoute);
+    await page.getByRole("button", { name: "Expandable details" }).click();
+
+    const metrics = await page.evaluate(() => {
+      const codes = Array.from(
+        document.querySelectorAll(".theme-doc-markdown code:not(pre code)")
+      );
+      const normal = codes.find(
+        (element) => element.textContent === "const ready = true"
+      );
+      const details = codes.find((element) => element.textContent === "code");
+      const read = (element?: Element) => {
+        if (!element) return null;
+        const style = getComputedStyle(element);
+        return {
+          className: element.className,
+          fontFamily: style.fontFamily,
+          fontSize: style.fontSize,
+          lineHeight: style.lineHeight,
+          padding: style.padding,
+          borderRadius: style.borderRadius,
+          backgroundColor: style.backgroundColor,
+        };
+      };
+      return { normal: read(normal), details: read(details) };
+    });
+
+    expect(metrics.normal).not.toBeNull();
+    expect(metrics.details).toEqual(metrics.normal);
+    expect(metrics.normal?.className).toContain("theme-code-inline");
+  }
+});
+
+test("table-of-contents code reuses the canonical inline code surface", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto(markdownRoute);
+
+  const metrics = await page.evaluate(() => {
+    const content = Array.from(
+      document.querySelectorAll(".theme-doc-markdown h3 code")
+    ).find((element) => element.textContent === "provider-id");
+    const toc = Array.from(
+      document.querySelectorAll(".table-of-contents__link code")
+    ).find((element) => element.textContent === "provider-id");
+    const read = (element?: Element) => {
+      if (!element) return null;
+      const style = getComputedStyle(element);
+      return {
+        className: element.className,
+        fontFamily: style.fontFamily,
+        fontSize: style.fontSize,
+        lineHeight: style.lineHeight,
+        padding: style.padding,
+        borderRadius: style.borderRadius,
+        backgroundColor: style.backgroundColor,
+      };
+    };
+    return { content: read(content), toc: read(toc) };
+  });
+
+  expect(metrics.content).not.toBeNull();
+  expect(metrics.toc).toEqual(metrics.content);
+  expect(metrics.toc?.className).toContain("theme-code-inline");
+});
+
+test("CodeBlock matches the official shadcn docs surface", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 900 });
+  await page.goto(markdownRoute);
+
+  const blocks = page.locator("figure.theme-code-block");
+  const titledBlock = blocks.first();
+  const title = titledBlock.locator("figcaption");
+  const copyButton = titledBlock.locator('[data-slot="copy-button"]');
+  const pre = titledBlock.locator("pre");
+  const numberedLines = titledBlock.locator('[class*="codeLineNumber"]');
+
+  await expect(numberedLines).toHaveCount(3);
+  const firstNumber = numberedLines.first();
+  await expect(firstNumber).toHaveCSS("position", "sticky");
+  await expect(firstNumber).toHaveCSS("width", "64px");
+  await expect(firstNumber).toHaveCSS("padding-right", "24px");
+  await expect(firstNumber).toHaveCSS("text-align", "right");
+  await expect(titledBlock.locator(".token-line").first()).toHaveCSS(
+    "height",
+    "26.5px"
+  );
+  await expect(title.locator("svg")).toHaveCount(1);
+  await expect(title.locator("svg")).toHaveCSS("width", "16px");
+  await expect(title).toHaveCSS("padding", "10px 16px");
+  await expect(title).toHaveCSS("font-size", "12.25px");
+  await expect(title).toHaveCSS("line-height", "21.4375px");
+  await expect(pre).toHaveCSS("padding", "14px 0px");
+  await expect(titledBlock).toHaveCSS("margin-left", "0px");
+  await expect(titledBlock).toHaveCSS("margin-right", "0px");
+  const articleBox = await page.locator(".theme-doc-markdown").boundingBox();
+  const blockBox = await titledBlock.boundingBox();
+  expect({ x: blockBox?.x, width: blockBox?.width }).toEqual({
+    x: articleBox?.x,
+    width: articleBox?.width,
+  });
+
+  const headerGeometry = await titledBlock.evaluate((block) => {
+    const caption = block.querySelector("figcaption");
+    const button = block.querySelector('[data-slot="copy-button"]');
+    if (!caption || !button) return null;
+    const blockRect = block.getBoundingClientRect();
+    const captionRect = caption.getBoundingClientRect();
+    const buttonRect = button.getBoundingClientRect();
+    return {
+      captionHeight: captionRect.height,
+      buttonTop: buttonRect.top - blockRect.top,
+      centerDelta: Math.abs(
+        captionRect.top +
+          captionRect.height / 2 -
+          (buttonRect.top + buttonRect.height / 2)
+      ),
+    };
+  });
+  expect(headerGeometry).toEqual({
+    captionHeight: 42.4375,
+    buttonTop: 6,
+    centerDelta: 1.21875,
+  });
+
+  const highlightedLine = blocks
+    .nth(2)
+    .locator(".theme-code-block-highlighted-line");
+  await expect(highlightedLine).toHaveCount(1);
+  const highlight = await highlightedLine.evaluate((line) => {
+    const style = getComputedStyle(line);
+    const marker = getComputedStyle(line, "::after");
+    const probe = document.createElement("div");
+    probe.style.backgroundColor = "var(--code-highlight)";
+    document.body.append(probe);
+    const expectedBackground = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+    return {
+      background: style.backgroundColor,
+      expectedBackground,
+      markerWidth: marker.width,
+      markerLeft: marker.left,
+    };
+  });
+  expect(highlight.background).toBe(highlight.expectedBackground);
+  expect(highlight.markerWidth).toBe("2px");
+  expect(highlight.markerLeft).toBe("0px");
+
+  const syntaxTokens = {
+    keyword: titledBlock.locator(".token.keyword").first(),
+    function: titledBlock.locator(".token.function").first(),
+    tag: titledBlock.locator(".token.tag:not(.punctuation)").first(),
+    tagPunctuation: titledBlock.locator(".token.tag.punctuation").first(),
+    plainText: titledBlock.locator(".token.plain-text").first(),
+  };
+  await expect(syntaxTokens.keyword).toHaveCSS("font-style", "normal");
+  await expect(syntaxTokens.keyword).toHaveCSS("font-weight", "400");
+  for (const [theme, colors] of [
+    [
+      "dark",
+      {
+        keyword: "rgb(160, 160, 160)",
+        function: "rgb(255, 199, 153)",
+        tag: "rgb(255, 199, 153)",
+        tagPunctuation: "rgb(160, 160, 160)",
+        plainText: "rgb(255, 255, 255)",
+      },
+    ],
+    [
+      "light",
+      {
+        keyword: "rgb(207, 34, 46)",
+        function: "rgb(130, 80, 223)",
+        tag: "rgb(17, 99, 41)",
+        tagPunctuation: "rgb(31, 35, 40)",
+        plainText: "rgb(31, 35, 40)",
+      },
+    ],
+  ] as const) {
+    if ((await page.locator("html").getAttribute("data-theme")) !== theme) {
+      const themeButton = page.getByRole("button", { name: /^Color theme:/ });
+      if (!(await themeButton.isVisible())) {
+        await page
+          .getByRole("button", { name: "Toggle navigation bar" })
+          .click();
+      }
+      await themeButton.click();
+      await page
+        .getByRole("menuitem", { name: theme === "dark" ? "Dark" : "Light" })
+        .click();
+      await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
+    }
+    for (const [token, color] of Object.entries(colors)) {
+      await expect(syntaxTokens[token as keyof typeof syntaxTokens]).toHaveCSS(
+        "color",
+        color
+      );
+    }
+  }
+  await expect(page.locator("html")).toHaveJSProperty("scrollWidth", 390);
+});
+
+test("breadcrumb keeps the standard Docusaurus separation from the page title", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto("");
+
+  const gap = await page.evaluate(() => {
+    const breadcrumb = document.querySelector('[data-slot="breadcrumb"]');
+    const title = document.querySelector(".theme-doc-markdown h1");
+    if (!breadcrumb || !title) return null;
+    return (
+      title.getBoundingClientRect().top -
+      breadcrumb.getBoundingClientRect().bottom
+    );
+  });
+
+  expect(gap).toBe(12.796875);
+});
+
+test("heading flow and content surfaces stay exact across viewports", async ({
+  page,
+}) => {
+  for (const width of [390, 1024, 1440]) {
+    await page.setViewportSize({ width, height: 900 });
+
+    for (const route of ["", markdownRoute, mdxRoute, "showcase/mermaid"]) {
+      await page.goto(route);
+      const result = await page.evaluate(() => {
+        const markdown = document.querySelector(".theme-doc-markdown");
+        const headingGaps = [
+          ...(markdown?.querySelectorAll(
+            ":scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > h5, :scope > h6"
+          ) ?? []),
+        ]
+          .map((heading) => {
+            const next = heading.nextElementSibling;
+            if (!next) return null;
+            const headingRect = heading.getBoundingClientRect();
+            const nextRect = next.getBoundingClientRect();
+            return {
+              heading: heading.textContent?.trim(),
+              next: next.tagName,
+              gap: nextRect.top - headingRect.bottom,
+            };
+          })
+          .filter(Boolean);
+        const directChildren = [...(markdown?.children ?? [])];
+        const componentGaps = directChildren
+          .slice(1)
+          .flatMap((element, index) => {
+            const previous = directChildren[index];
+            const previousOwnsComponent =
+              previous.hasAttribute("data-slot") ||
+              Boolean(previous.querySelector(":scope > [data-slot]"));
+            const nextOwnsComponent =
+              element.hasAttribute("data-slot") ||
+              Boolean(element.querySelector(":scope > [data-slot]"));
+            if (!previousOwnsComponent && !nextOwnsComponent) return [];
+            return [
+              {
+                previous:
+                  previous.getAttribute("data-slot") ?? previous.tagName,
+                next: element.getAttribute("data-slot") ?? element.tagName,
+                gap:
+                  element.getBoundingClientRect().top -
+                  previous.getBoundingClientRect().bottom,
+              },
+            ];
+          });
+        const pageHeader = markdown?.querySelector(":scope > header");
+        const pageHeaderNext = pageHeader?.nextElementSibling;
+        const pageTitleGap =
+          pageHeader && pageHeaderNext
+            ? pageHeaderNext.getBoundingClientRect().top -
+              pageHeader.getBoundingClientRect().bottom
+            : null;
+        const wrapper = document.querySelector("[data-slot='sidebar-wrapper']");
+        const codeBackgrounds = [
+          ...document.querySelectorAll("figure.theme-code-block"),
+        ].map((element) => getComputedStyle(element).backgroundColor);
+        return {
+          headingGaps,
+          componentGaps,
+          pageTitleGap,
+          wrapperBackground: wrapper
+            ? getComputedStyle(wrapper).backgroundColor
+            : null,
+          codeBackgrounds,
+          overflow:
+            document.documentElement.scrollWidth -
+            document.documentElement.clientWidth,
+        };
+      });
+
+      expect(
+        result.pageTitleGap,
+        `${route || "root"} page title @ ${width}px`
+      ).toBe(24);
+      for (const relation of result.componentGaps) {
+        expect(
+          relation.gap,
+          `${route || "root"} ${relation.previous} → ${relation.next} @ ${width}px`
+        ).toBeGreaterThanOrEqual(16);
+      }
+      for (const relation of result.headingGaps) {
+        expect(
+          relation?.gap,
+          `${route || "root"} ${relation?.heading} → ${relation?.next} @ ${width}px`
+        ).toBe(16);
+      }
+      expect(
+        new Set(result.codeBackgrounds).size,
+        `${route || "root"} CodeBlock surfaces @ ${width}px`
+      ).toBeLessThanOrEqual(1);
+      for (const background of result.codeBackgrounds) {
+        expect(background, `${route || "root"} CodeBlock @ ${width}px`).toBe(
+          "lab(7.22637 -0.0000149012 0)"
+        );
+      }
+      expect(result.overflow, `${route || "root"} @ ${width}px`).toBe(0);
+      if (width >= 1024) {
+        expect(
+          result.wrapperBackground,
+          `${route || "root"} @ ${width}px`
+        ).toBe("rgba(0, 0, 0, 0)");
+      }
+    }
+  }
+});
diff --git a/yarn.lock b/yarn.lock
index 4776d5e5a..2c072a887 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,16 @@
 # yarn lockfile v1
 
 
+"@11ty/gray-matter@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@11ty/gray-matter/-/gray-matter-1.0.0.tgz#35ee04d76b870893c053f64f659c923a7a9db2d7"
+  integrity sha512-7mJJl+wf1AByoT0PknQiQfOPnVNT4fevGrUBVWO4HXsnYn1aQPyRyrELYrNUFleUBM++KzMKN6QaxHPk0t/6/g==
+  dependencies:
+    js-yaml "^4.1.0"
+    kind-of "^6.0.3"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
+
 "@algolia/abtesting@1.12.3":
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/@algolia/abtesting/-/abtesting-1.12.3.tgz#2e86d4855af71529bb2ada15ec9c157f00e33953"
@@ -173,6 +183,14 @@
   dependencies:
     "@algolia/client-common" "5.46.3"
 
+"@antfu/install-pkg@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@antfu/install-pkg/-/install-pkg-1.1.0.tgz#78fa036be1a6081b5a77a5cf59f50c7752b6ba26"
+  integrity sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==
+  dependencies:
+    package-manager-detector "^1.3.0"
+    tinyexec "^1.0.1"
+
 "@apidevtools/json-schema-ref-parser@^15.3.3":
   version "15.3.5"
   resolved "https://registry.yarnpkg.com/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-15.3.5.tgz#503726178d8d792eea7b195566272aaee6837e2f"
@@ -1261,6 +1279,11 @@
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
   integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
 
+"@babel/runtime@^7.29.2":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.7.tgz#12022450c45a4da6d8d8287b18a4ff2ddb23f768"
+  integrity sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==
+
 "@babel/template@^7.28.6", "@babel/template@^7.29.7", "@babel/template@^7.3.3":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.29.7.tgz#4d9d4004f645cdd304de958c725162784ecac700"
@@ -1291,11 +1314,42 @@
     "@babel/helper-string-parser" "^7.29.7"
     "@babel/helper-validator-identifier" "^7.29.7"
 
+"@base-ui/react@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@base-ui/react/-/react-1.6.0.tgz#143a892157224a57046f3f4886c025eba173c258"
+  integrity sha512-/jzjTWJYXhRFO45Bev9lc3cHbmjzCMpUqbMZ2AgKy/z25mY9B6shGSNcXcjQar9n5doM0KYW1W8fcFv2jZBuMw==
+  dependencies:
+    "@babel/runtime" "^7.29.2"
+    "@base-ui/utils" "0.3.1"
+    "@floating-ui/react-dom" "^2.1.8"
+    "@floating-ui/utils" "^0.2.11"
+    use-sync-external-store "^1.6.0"
+
+"@base-ui/utils@0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@base-ui/utils/-/utils-0.3.1.tgz#329b4fbd5e66a78a93df68223061224f474e5c0f"
+  integrity sha512-gFFiltORVmW/N6IILTGxizP3PBpVpysqML1ALY5Vk0mH+7faVkCknOU31goYHN5Aoek2dkjxva1XOD2Ce9WuIg==
+  dependencies:
+    "@babel/runtime" "^7.29.2"
+    "@floating-ui/utils" "^0.2.11"
+    reselect "^5.2.0"
+    use-sync-external-store "^1.6.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@braintree/sanitize-url@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-7.1.2.tgz#ca2035b0fefe956a8676ff0c69af73e605fcd81f"
+  integrity sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==
+
+"@chevrotain/types@~11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@chevrotain/types/-/types-11.1.2.tgz#e83a1a2704f0c5e49e7592b214031a0f4a34d7e5"
+  integrity sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -1778,6 +1832,26 @@
     fs-extra "^11.1.1"
     tslib "^2.6.0"
 
+"@docusaurus/babel@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/babel/-/babel-3.10.2.tgz#4d5f8ac4d16bfe26c06f256687831787edb46e8a"
+  integrity sha512-aJ1hpGyvfkte3dDAfNbWM4biW4yWZBVz7TIGLZP+v+tWOBgxX3e0N5ZIXHIvmfNNXTI77pcHUx3KmtOk05Ze3Q==
+  dependencies:
+    "@babel/core" "^7.25.9"
+    "@babel/generator" "^7.25.9"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-transform-runtime" "^7.25.9"
+    "@babel/preset-env" "^7.25.9"
+    "@babel/preset-react" "^7.25.9"
+    "@babel/preset-typescript" "^7.25.9"
+    "@babel/runtime" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@docusaurus/logger" "3.10.2"
+    "@docusaurus/utils" "3.10.2"
+    babel-plugin-dynamic-import-node "^2.3.3"
+    fs-extra "^11.1.1"
+    tslib "^2.6.0"
+
 "@docusaurus/bundler@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/bundler/-/bundler-3.10.1.tgz#82fa5079f3787a67502e25f82d37d05ec5de0cc3"
@@ -1808,6 +1882,36 @@
     webpack "^5.95.0"
     webpackbar "^7.0.0"
 
+"@docusaurus/bundler@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/bundler/-/bundler-3.10.2.tgz#323492eb0550b6a7f6e5fa6b9877cdb2c53b1be3"
+  integrity sha512-i0ZNcy0f0WhaOlYVgzLsWhIoEXO9kS3HRoKPtgE6vQtZUq7arKZaYdNBudr3mqCmd+TyOkwtwfHgs1ENj07r5g==
+  dependencies:
+    "@babel/core" "^7.25.9"
+    "@docusaurus/babel" "3.10.2"
+    "@docusaurus/cssnano-preset" "3.10.2"
+    "@docusaurus/logger" "3.10.2"
+    "@docusaurus/types" "3.10.2"
+    "@docusaurus/utils" "3.10.2"
+    babel-loader "^9.2.1"
+    clean-css "^5.3.3"
+    copy-webpack-plugin "^11.0.0"
+    css-loader "^6.11.0"
+    css-minimizer-webpack-plugin "^5.0.1"
+    cssnano "^6.1.2"
+    file-loader "^6.2.0"
+    html-minifier-terser "^7.2.0"
+    mini-css-extract-plugin "^2.9.2"
+    null-loader "^4.0.1"
+    postcss "^8.5.4"
+    postcss-loader "^7.3.4"
+    postcss-preset-env "^10.2.1"
+    terser-webpack-plugin "^5.3.9"
+    tslib "^2.6.0"
+    url-loader "^4.1.1"
+    webpack "^5.95.0"
+    webpackbar "^7.0.0"
+
 "@docusaurus/core@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-3.10.1.tgz#3f8bdb97451b4df14f2a3b39ab0186366fbf8fbe"
@@ -1856,6 +1960,54 @@
     webpack-dev-server "^5.2.2"
     webpack-merge "^6.0.1"
 
+"@docusaurus/core@^3.10.0":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-3.10.2.tgz#349cae728fc3769b3f8aef4cf538ccb79aace8d0"
+  integrity sha512-EYByj6nk+aD9KeVxV6Hmo2/nAAT79P21Y82ycTBOBtrmqilloIbIEhgL2/8Xpt2Jz/pgNqHAwyusOGwmbKeJmA==
+  dependencies:
+    "@docusaurus/babel" "3.10.2"
+    "@docusaurus/bundler" "3.10.2"
+    "@docusaurus/logger" "3.10.2"
+    "@docusaurus/mdx-loader" "3.10.2"
+    "@docusaurus/utils" "3.10.2"
+    "@docusaurus/utils-common" "3.10.2"
+    "@docusaurus/utils-validation" "3.10.2"
+    boxen "^6.2.1"
+    chalk "^4.1.2"
+    chokidar "^3.5.3"
+    cli-table3 "^0.6.3"
+    combine-promises "^1.1.0"
+    commander "^5.1.0"
+    core-js "^3.31.1"
+    detect-port "^2.1.0"
+    escape-html "^1.0.3"
+    eta "^2.2.0"
+    eval "^0.1.8"
+    execa "^5.1.1"
+    fs-extra "^11.1.1"
+    html-tags "^3.3.1"
+    html-webpack-plugin "^5.6.0"
+    leven "^3.1.0"
+    lodash "^4.17.21"
+    open "^8.4.0"
+    p-map "^4.0.0"
+    prompts "^2.4.2"
+    react-helmet-async "npm:@slorber/react-helmet-async@1.3.0"
+    react-loadable "npm:@docusaurus/react-loadable@6.0.0"
+    react-loadable-ssr-addon-v5-slorber "^1.0.3"
+    react-router "^5.3.4"
+    react-router-config "^5.1.1"
+    react-router-dom "^5.3.4"
+    semver "^7.5.4"
+    serve-handler "^6.1.7"
+    tinypool "^1.0.2"
+    tslib "^2.6.0"
+    update-notifier "^6.0.2"
+    webpack "^5.95.0"
+    webpack-bundle-analyzer "^4.10.2"
+    webpack-dev-server "^5.2.2"
+    webpack-merge "^6.0.1"
+
 "@docusaurus/cssnano-preset@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-3.10.1.tgz#4b6bafeca8bb9423364d2fd6683c28e2f85a4665"
@@ -1866,6 +2018,16 @@
     postcss-sort-media-queries "^5.2.0"
     tslib "^2.6.0"
 
+"@docusaurus/cssnano-preset@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/cssnano-preset/-/cssnano-preset-3.10.2.tgz#e3ac7e85585f77e8fdef95176ab7c211d1296630"
+  integrity sha512-4gCnHRbJLTloiwfvFAa92tgb2gI4KYhvjfQVYnEaiMO/EgvWfCo1LwytHXen+1oZAN0VAlS0JAPxp3MsvKDa3A==
+  dependencies:
+    cssnano-preset-advanced "^6.1.2"
+    postcss "^8.5.4"
+    postcss-sort-media-queries "^5.2.0"
+    tslib "^2.6.0"
+
 "@docusaurus/faster@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/faster/-/faster-3.10.1.tgz#a63d89ae980c98e1eeab3ff15ee083f7c20ed353"
@@ -1890,6 +2052,14 @@
     chalk "^4.1.2"
     tslib "^2.6.0"
 
+"@docusaurus/logger@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/logger/-/logger-3.10.2.tgz#280bed53d0eb9cdc56e896a155036207910e89c9"
+  integrity sha512-gSEwqtPfCAnC3ZSJY6xL7tcIfgg0vFD39jbv93eakuweyvO2864xR0K+kmKwBhkTCtWRNjuGGnb5rdmkD/ndqw==
+  dependencies:
+    chalk "^4.1.2"
+    tslib "^2.6.0"
+
 "@docusaurus/mdx-loader@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-3.10.1.tgz#050ae9bc614158a4ec07a628aa75fa9ae90d7e82"
@@ -1920,6 +2090,36 @@
     vfile "^6.0.1"
     webpack "^5.88.1"
 
+"@docusaurus/mdx-loader@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/mdx-loader/-/mdx-loader-3.10.2.tgz#3b4e7ffacff4ed856db2ec4e94c13b0a652d62eb"
+  integrity sha512-9Fd4V/SFjfrVQ0JH5EN0+iPWyFunvTeQE3gfyFeetqPaXMP0OylIjOw16dCuXG4NZJrYdBqwzjh18/h3gRi47w==
+  dependencies:
+    "@docusaurus/logger" "3.10.2"
+    "@docusaurus/utils" "3.10.2"
+    "@docusaurus/utils-validation" "3.10.2"
+    "@mdx-js/mdx" "^3.0.0"
+    "@slorber/remark-comment" "^1.0.0"
+    escape-html "^1.0.3"
+    estree-util-value-to-estree "^3.0.1"
+    file-loader "^6.2.0"
+    fs-extra "^11.1.1"
+    image-size "^2.0.2"
+    mdast-util-mdx "^3.0.0"
+    mdast-util-to-string "^4.0.0"
+    rehype-raw "^7.0.0"
+    remark-directive "^3.0.0"
+    remark-emoji "^4.0.0"
+    remark-frontmatter "^5.0.0"
+    remark-gfm "^4.0.0"
+    stringify-object "^3.3.0"
+    tslib "^2.6.0"
+    unified "^11.0.3"
+    unist-util-visit "^5.0.0"
+    url-loader "^4.1.1"
+    vfile "^6.0.1"
+    webpack "^5.88.1"
+
 "@docusaurus/module-type-aliases@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-3.10.1.tgz#22d39177c296786eb6e0d940699cd590cc93ca77"
@@ -2150,6 +2350,19 @@
     tslib "^2.6.0"
     utility-types "^3.10.0"
 
+"@docusaurus/theme-mermaid@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/theme-mermaid/-/theme-mermaid-3.10.1.tgz#dada9c50c780524d246906234ace8a35446f26fc"
+  integrity sha512-2gxpmln8Pc4EN1oWzshQEx2HTs67jk14v7MmgqGs8ZU7Nm8oihg+fTouof2u4vN8DtB3Fln4cDJu4UprSX1S3Q==
+  dependencies:
+    "@docusaurus/core" "3.10.1"
+    "@docusaurus/module-type-aliases" "3.10.1"
+    "@docusaurus/theme-common" "3.10.1"
+    "@docusaurus/types" "3.10.1"
+    "@docusaurus/utils-validation" "3.10.1"
+    mermaid ">=11.6.0"
+    tslib "^2.6.0"
+
 "@docusaurus/theme-search-algolia@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.10.1.tgz#6f422058711629ce8d7c2f17e1e54efa075c626e"
@@ -2181,6 +2394,11 @@
     fs-extra "^11.1.1"
     tslib "^2.6.0"
 
+"@docusaurus/tsconfig@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/tsconfig/-/tsconfig-3.10.1.tgz#1db31b4a4a5c914bdffa80070a35b6365d34f2e8"
+  integrity sha512-rYvB7yqkdqWIpAbDzQljGfM4cDBkLTbhmagZBEcsyj6oPUsz47lmW2pYdN1j+7sGFgltbAmQH62xfbrij4Eh6Q==
+
 "@docusaurus/types@3.10.1", "@docusaurus/types@^3.10.0":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.10.1.tgz#d42837938ae43ca2be0ca47e63e00476b5eb94be"
@@ -2197,6 +2415,22 @@
     webpack "^5.95.0"
     webpack-merge "^5.9.0"
 
+"@docusaurus/types@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.10.2.tgz#9ffe35adfb4587e49158ee9e10d94b86419a5932"
+  integrity sha512-B6rvfwIFSapUqUJjMriZswX13K8l5Z7AcmVE6uTEJpYddQieSTR12DsGaFtcZAIDsQd4p+0WTl0Vc6jmZK0Trw==
+  dependencies:
+    "@mdx-js/mdx" "^3.0.0"
+    "@types/history" "^4.7.11"
+    "@types/mdast" "^4.0.2"
+    "@types/react" "*"
+    commander "^5.1.0"
+    joi "^17.9.2"
+    react-helmet-async "npm:@slorber/react-helmet-async@1.3.0"
+    utility-types "^3.10.0"
+    webpack "^5.95.0"
+    webpack-merge "^5.9.0"
+
 "@docusaurus/utils-common@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-3.10.1.tgz#6350b4898691e765de750f90eade0e0fa7902d99"
@@ -2205,6 +2439,14 @@
     "@docusaurus/types" "3.10.1"
     tslib "^2.6.0"
 
+"@docusaurus/utils-common@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-3.10.2.tgz#a65fcfffafa4e15a59fe61d7ba315ee5d4c49269"
+  integrity sha512-x3Dz6jv6iQKBNjBmVTu8p57abMp/VNTUgKBMgRVXJc5444orBTsArv0+cdfrXTiz/VMmHfDRVkPbL7GH2B7T7w==
+  dependencies:
+    "@docusaurus/types" "3.10.2"
+    tslib "^2.6.0"
+
 "@docusaurus/utils-validation@3.10.1", "@docusaurus/utils-validation@^3.10.0":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-3.10.1.tgz#ddbcce997a5506424cdd16abf6845cc51692acae"
@@ -2219,6 +2461,20 @@
     lodash "^4.17.21"
     tslib "^2.6.0"
 
+"@docusaurus/utils-validation@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/utils-validation/-/utils-validation-3.10.2.tgz#2624b0ca6675675da2f063828115b43c9a22de47"
+  integrity sha512-sn8unbDfUL585NtR3cwHefPicOyaHvPaX7VD0aOg/siIxUBoKyKKaGEqzJZDS64mM43TnxurkYDtmB1wsJlZsw==
+  dependencies:
+    "@docusaurus/logger" "3.10.2"
+    "@docusaurus/utils" "3.10.2"
+    "@docusaurus/utils-common" "3.10.2"
+    fs-extra "^11.2.0"
+    joi "^17.9.2"
+    js-yaml "^4.1.0"
+    lodash "^4.17.21"
+    tslib "^2.6.0"
+
 "@docusaurus/utils@3.10.1", "@docusaurus/utils@^3.10.0":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-3.10.1.tgz#535968caa2c9bff69f997a081b98b95b3c5d3785"
@@ -2246,6 +2502,33 @@
     utility-types "^3.10.0"
     webpack "^5.88.1"
 
+"@docusaurus/utils@3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/utils/-/utils-3.10.2.tgz#d99c1ffc5c7961e912344269a8728ce2aad8b3dc"
+  integrity sha512-xx0W3eav2uW1NRIpuHJWNwLTC15xPNjU4Uxi9NSnd3swYC96BE3vFiT93SD8s24kmAAWNwgZwfZ2fghGZ01Lcw==
+  dependencies:
+    "@11ty/gray-matter" "^1.0.0"
+    "@docusaurus/logger" "3.10.2"
+    "@docusaurus/types" "3.10.2"
+    "@docusaurus/utils-common" "3.10.2"
+    escape-string-regexp "^4.0.0"
+    execa "^5.1.1"
+    file-loader "^6.2.0"
+    fs-extra "^11.1.1"
+    github-slugger "^1.5.0"
+    globby "^11.1.0"
+    jiti "^1.20.0"
+    js-yaml "^4.1.0"
+    lodash "^4.17.21"
+    micromatch "^4.0.5"
+    p-queue "^6.6.2"
+    prompts "^2.4.2"
+    resolve-pathname "^3.0.0"
+    tslib "^2.6.0"
+    url-loader "^4.1.1"
+    utility-types "^3.10.0"
+    webpack "^5.88.1"
+
 "@emnapi/core@^1.1.0", "@emnapi/core@^1.5.0":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.8.1.tgz#fd9efe721a616288345ffee17a1f26ac5dd01349"
@@ -2254,6 +2537,14 @@
     "@emnapi/wasi-threads" "1.1.0"
     tslib "^2.4.0"
 
+"@emnapi/core@^1.11.1":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.11.2.tgz#fab0a0f3c492d11f5a9ac9065d0d73955ee1c1c9"
+  integrity sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==
+  dependencies:
+    "@emnapi/wasi-threads" "1.2.2"
+    tslib "^2.4.0"
+
 "@emnapi/runtime@^1.1.0", "@emnapi/runtime@^1.5.0":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.8.1.tgz#550fa7e3c0d49c5fb175a116e8cd70614f9a22a5"
@@ -2261,6 +2552,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@emnapi/runtime@^1.11.1":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.11.2.tgz#eb22f04d76febfdf4f87fdaff54c8a53f6bf0dbd"
+  integrity sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==
+  dependencies:
+    tslib "^2.4.0"
+
 "@emnapi/wasi-threads@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
@@ -2268,6 +2566,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@emnapi/wasi-threads@1.2.2", "@emnapi/wasi-threads@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz#4c93becf5bfa3b13d1bbdcc06aee38321ad8139a"
+  integrity sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==
+  dependencies:
+    tslib "^2.4.0"
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0", "@eslint-community/eslint-utils@^4.9.1":
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz#4e90af67bc51ddee6cdef5284edf572ec376b595"
@@ -2310,6 +2615,33 @@
   resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-5.5.3.tgz#18e3af6b8eae7984072bbeb0c0858474d7c4cefe"
   integrity sha512-R11tGE6yIFwqpaIqcfkcg7AICXzFg14+5h5v0TfF/9+RMDL6jhzCy/pxHVOfbALGdtVYdt6JdR21tuxEgl34dw==
 
+"@floating-ui/core@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.8.0.tgz#d01c0bbea02e4a57f6fd7d5de6fc2c5c7dca40e1"
+  integrity sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==
+  dependencies:
+    "@floating-ui/utils" "^0.2.12"
+
+"@floating-ui/dom@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.8.0.tgz#8a20e6facbe2456afdbeb6c8b968a72df689cf63"
+  integrity sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==
+  dependencies:
+    "@floating-ui/core" "^1.8.0"
+    "@floating-ui/utils" "^0.2.12"
+
+"@floating-ui/react-dom@^2.1.8":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.9.tgz#f42a5f469ea56d6f2e2751efa1cf936243a87355"
+  integrity sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==
+  dependencies:
+    "@floating-ui/dom" "^1.8.0"
+
+"@floating-ui/utils@^0.2.11", "@floating-ui/utils@^0.2.12":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.12.tgz#afefe785949f16ac4cdd1e695935a321572dd56a"
+  integrity sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==
+
 "@gar/promise-retry@^1.0.0", "@gar/promise-retry@^1.0.2":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@gar/promise-retry/-/promise-retry-1.0.3.tgz#65e726428e794bc4453948e0a41e6de4215ce8b0"
@@ -2390,6 +2722,20 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
+"@iconify/utils@^3.0.2":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@iconify/utils/-/utils-3.1.4.tgz#04dad014e8ed80b1bbe341f5d090059ea0c60578"
+  integrity sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw==
+  dependencies:
+    "@antfu/install-pkg" "^1.1.0"
+    "@iconify/types" "^2.0.0"
+    import-meta-resolve "^4.2.0"
+
 "@inquirer/ansi@^1.0.0", "@inquirer/ansi@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@inquirer/ansi/-/ansi-1.0.2.tgz#674a4c4d81ad460695cb2a1fc69d78cd187f337e"
@@ -3122,7 +3468,7 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0", "@jridgewell/sourcemap-codec@^1.5.5":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
   integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
@@ -3236,6 +3582,21 @@
   dependencies:
     "@types/mdx" "^2.0.0"
 
+"@mermaid-js/layout-elk@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@mermaid-js/layout-elk/-/layout-elk-0.1.9.tgz#c773b9454875858a2f45412fe04502bccec83cf2"
+  integrity sha512-HuvaqFZBr6yT9PpWYockvKAZPJVd89yn/UjOYPxhzbZxlybL2v+2BjVCg7MVH6vRs1irUohb/s42HEdec1CCZw==
+  dependencies:
+    d3 "^7.9.0"
+    elkjs "^0.9.3"
+
+"@mermaid-js/parser@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@mermaid-js/parser/-/parser-1.2.0.tgz#266d728c54d2d4034d270f8b31d790e26296a5fa"
+  integrity sha512-oYPyv8A4As1yH5Bx+04iQEQxXuIQDe0GKCNSRgao6z8AM9jixXIfP0vsppRLvGf+nKIOb9/LdpWA4YuJiVvESA==
+  dependencies:
+    "@chevrotain/types" "~11.1.2"
+
 "@module-federation/error-codes@0.22.0":
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/@module-federation/error-codes/-/error-codes-0.22.0.tgz#31ccc990dc240d73912ba7bd001f7e35ac751992"
@@ -3297,6 +3658,13 @@
     "@emnapi/runtime" "^1.5.0"
     "@tybys/wasm-util" "^0.10.1"
 
+"@napi-rs/wasm-runtime@^1.1.4":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz#ed33806d0f9be98dc76d0c3d4fd872fda701b5d5"
+  integrity sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==
+  dependencies:
+    "@tybys/wasm-util" "^0.10.3"
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -3727,71 +4095,160 @@
   dependencies:
     "@octokit/openapi-types" "^24.2.0"
 
+"@parcel/watcher-android-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz#507f836d7e2042f798c7d07ad19c3546f9848ac1"
+  integrity sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==
+
 "@parcel/watcher-android-arm64@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.4.tgz#88c67bde2c3efa997a0b1fea540080c6ade0322c"
   integrity sha512-hoh0vx4v+b3BNI7Cjoy2/B0ARqcwVNrzN/n7DLq9ZB4I3lrsvhrkCViJyfTj/Qi5xM9YFiH4AmHGK6pgH1ss7g==
 
+"@parcel/watcher-darwin-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz#3d26dce38de6590ef79c47ec2c55793c06ad4f67"
+  integrity sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==
+
 "@parcel/watcher-darwin-arm64@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.4.tgz#d9dc037cff8a4ab7839a79c5287a6e6660f7ab27"
   integrity sha512-kphKy377pZiWpAOyTgQYPE5/XEKVMaj6VUjKT5VkNyUJlr2qZAn8gIc7CPzx+kbhvqHDT9d7EqdOqRXT6vk0zw==
 
+"@parcel/watcher-darwin-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz#99f3af3869069ccf774e4ddfccf7e64fd2311ef8"
+  integrity sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==
+
 "@parcel/watcher-darwin-x64@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.4.tgz#da0e13e16ee6d378242e2cfb469d72667624383a"
   integrity sha512-UKaQFhCtNJW1A9YyVz3Ju7ydf6QgrpNQfRZ35wNKUhTQ3dxJ/3MULXN5JN/0Z80V/KUBDGa3RZaKq1EQT2a2gg==
 
+"@parcel/watcher-freebsd-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz#14d6857741a9f51dfe51d5b08b7c8afdbc73ad9b"
+  integrity sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==
+
 "@parcel/watcher-freebsd-x64@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.4.tgz#feb7cc9ec680bae3e91dddcdb4fe1c399ed52cc1"
   integrity sha512-Dib0Wv3Ow/m2/ttvLdeI2DBXloO7t3Z0oCp4bAb2aqyqOjKPPGrg10pMJJAQ7tt8P4V2rwYwywkDhUia/FgS+Q==
 
+"@parcel/watcher-linux-arm-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz#43c3246d6892381db473bb4f663229ad20b609a1"
+  integrity sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==
+
 "@parcel/watcher-linux-arm-glibc@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.4.tgz#fa4e9cf8228c8c433e2f035e8b16aa299d892a78"
   integrity sha512-I5Vb769pdf7Q7Sf4KNy8Pogl/URRCKu9ImMmnVKYayhynuyGYMzuI4UOWnegQNa2sGpsPSbzDsqbHNMyeyPCgw==
 
+"@parcel/watcher-linux-arm-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz#663750f7090bb6278d2210de643eb8a3f780d08e"
+  integrity sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==
+
 "@parcel/watcher-linux-arm-musl@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.4.tgz#9ee6792e2d8810af9871ee5bbc2aa04e0b079d62"
   integrity sha512-kGO8RPvVrcAotV4QcWh8kZuHr9bXi9a3bSZw7kFarYR0+fGliU7hd/zevhjw8fnvIKG3J9EO5G6sXNGCSNMYPQ==
 
+"@parcel/watcher-linux-arm64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz#ba60e1f56977f7e47cd7e31ad65d15fdcbd07e30"
+  integrity sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==
+
 "@parcel/watcher-linux-arm64-glibc@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.4.tgz#624c6d874d99afa79305720f96a0c233d4ad7fde"
   integrity sha512-KU75aooXhqGFY2W5/p8DYYHt4hrjHZod8AhcGAmhzPn/etTa+lYCDB2b1sJy3sWJ8ahFVTdy+EbqSBvMx3iFlw==
 
+"@parcel/watcher-linux-arm64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz#f7fbcdff2f04c526f96eac01f97419a6a99855d2"
+  integrity sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==
+
 "@parcel/watcher-linux-arm64-musl@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.4.tgz#5341e88b9e645d31c015ed40f384e60e49bd74d2"
   integrity sha512-Qx8uNiIekVutnzbVdrgSanM+cbpDD3boB1f8vMtnuG5Zau4/bdDbXyKwIn0ToqFhIuob73bcxV9NwRm04/hzHQ==
 
+"@parcel/watcher-linux-x64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz#4d2ea0f633eb1917d83d483392ce6181b6a92e4e"
+  integrity sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==
+
 "@parcel/watcher-linux-x64-glibc@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.4.tgz#be5bcc49d3f6d21cc81bb531970a05d3721e385c"
   integrity sha512-UYBQvhYmgAv61LNUn24qGQdjtycFBKSK3EXr72DbJqX9aaLbtCOO8+1SkKhD/GNiJ97ExgcHBrukcYhVjrnogA==
 
+"@parcel/watcher-linux-x64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz#277b346b05db54f55657301dd77bdf99d63606ee"
+  integrity sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==
+
 "@parcel/watcher-linux-x64-musl@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.4.tgz#bffd3895b1f0cc8fd1436e409fd65d0a901281c0"
   integrity sha512-YoRWCVgxv8akZrMhdyVi6/TyoeeMkQ0PGGOf2E4omODrvd1wxniXP+DBynKoHryStks7l+fDAMUBRzqNHrVOpg==
 
+"@parcel/watcher-win32-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz#7e9e02a26784d47503de1d10e8eab6cceb524243"
+  integrity sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==
+
 "@parcel/watcher-win32-arm64@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.4.tgz#7fb8aedea5b34ba97a01e1555929d01f4eb72fe4"
   integrity sha512-iby+D/YNXWkiQNYcIhg8P5hSjzXEHaQrk2SLrWOUD7VeC4Ohu0WQvmV+HDJokZVJ2UjJ4AGXW3bx7Lls9Ln4TQ==
 
+"@parcel/watcher-win32-ia32@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz#2d0f94fa59a873cdc584bf7f6b1dc628ddf976e6"
+  integrity sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==
+
 "@parcel/watcher-win32-ia32@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.4.tgz#f7f94ebdb21dedf37b12e030a82d4211798a1c26"
   integrity sha512-vQN+KIReG0a2ZDpVv8cgddlf67J8hk1WfZMMP7sMeZmJRSmEax5xNDNWKdgqSe2brOKTQQAs3aCCUal2qBHAyg==
 
+"@parcel/watcher-win32-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz#ae52693259664ba6f2228fa61d7ee44b64ea0947"
+  integrity sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==
+
 "@parcel/watcher-win32-x64@2.5.4":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.4.tgz#8d895c9723f7fffdf4b360fd1becf1b6bcb571df"
   integrity sha512-3A6efb6BOKwyw7yk9ro2vus2YTt2nvcd56AuzxdMiVOxL9umDyN5PKkKfZ/gZ9row41SjVmTVQNWQhaRRGpOKw==
 
+"@parcel/watcher@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.1.tgz#342507a9cfaaf172479a882309def1e991fb1200"
+  integrity sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==
+  dependencies:
+    detect-libc "^1.0.3"
+    is-glob "^4.0.3"
+    micromatch "^4.0.5"
+    node-addon-api "^7.0.0"
+  optionalDependencies:
+    "@parcel/watcher-android-arm64" "2.5.1"
+    "@parcel/watcher-darwin-arm64" "2.5.1"
+    "@parcel/watcher-darwin-x64" "2.5.1"
+    "@parcel/watcher-freebsd-x64" "2.5.1"
+    "@parcel/watcher-linux-arm-glibc" "2.5.1"
+    "@parcel/watcher-linux-arm-musl" "2.5.1"
+    "@parcel/watcher-linux-arm64-glibc" "2.5.1"
+    "@parcel/watcher-linux-arm64-musl" "2.5.1"
+    "@parcel/watcher-linux-x64-glibc" "2.5.1"
+    "@parcel/watcher-linux-x64-musl" "2.5.1"
+    "@parcel/watcher-win32-arm64" "2.5.1"
+    "@parcel/watcher-win32-ia32" "2.5.1"
+    "@parcel/watcher-win32-x64" "2.5.1"
+
 "@parcel/watcher@^2.4.1":
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.4.tgz#a6575b0a018b4e263589c1e7bc2ceb73c1ee84de"
@@ -3970,6 +4427,127 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
   integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
 
+"@radix-ui/primitive@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.5.tgz#cfeb31acbf332c72eb0b13831963c21ad6ca3e32"
+  integrity sha512-d86WIWFYNtGA0H/d8exstrTRTp7eWJYlYJbtNofxr/3ljupZYn6EFDG/Qgu/0Kc8v7yMUxySagqJsL1+PdYjWg==
+
+"@radix-ui/react-compose-refs@1.1.3", "@radix-ui/react-compose-refs@^1.1.1":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.3.tgz#5f1e61e1a5f52800d31e7f8affa6d046e38f50d1"
+  integrity sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==
+
+"@radix-ui/react-context@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.2.0.tgz#81e75eb5bdeb55bbe019547f13fb5c78598d44e2"
+  integrity sha512-fOE+JtN9rygNZkCnHRBEP0TAvLldlhyOxMsbwFvTP4nAs+nBmfnna+o/Zski2wkmY1YMrFC0aSzsHoLY47iLrg==
+
+"@radix-ui/react-dialog@^1.1.6":
+  version "1.1.19"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.19.tgz#ecdf153deb213c2d92ac02e10955dd288ceb3b3e"
+  integrity sha512-+HhbN2+YtkRgVirjZ2afMeutQRuGOrdkWR5+EFC58SJojGmtyNQwYzgi6tHBpOxvFHefMtPeHdgtjz0BOGxFQg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.5"
+    "@radix-ui/react-compose-refs" "1.1.3"
+    "@radix-ui/react-context" "1.2.0"
+    "@radix-ui/react-dismissable-layer" "1.1.15"
+    "@radix-ui/react-focus-guards" "1.1.4"
+    "@radix-ui/react-focus-scope" "1.1.12"
+    "@radix-ui/react-id" "1.1.2"
+    "@radix-ui/react-portal" "1.1.13"
+    "@radix-ui/react-presence" "1.1.7"
+    "@radix-ui/react-primitive" "2.1.7"
+    "@radix-ui/react-slot" "1.3.0"
+    "@radix-ui/react-use-controllable-state" "1.2.3"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.7.2"
+
+"@radix-ui/react-dismissable-layer@1.1.15":
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.15.tgz#accf8c7b6ec77e7544d2f6c411426d453ca66bcb"
+  integrity sha512-b0XaRlzn2QKuo10XyNgi2DAJDf5XC9d1nD3FJcuvCjbR7+4Ad28zmZsLsqx+hvDEzMnRuZaZxZm9gYObV6RmRA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.5"
+    "@radix-ui/react-compose-refs" "1.1.3"
+    "@radix-ui/react-primitive" "2.1.7"
+    "@radix-ui/react-use-callback-ref" "1.1.2"
+    "@radix-ui/react-use-effect-event" "0.0.3"
+
+"@radix-ui/react-focus-guards@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.4.tgz#3ef07a117ae7aa1430442aaebd766507e69d391c"
+  integrity sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==
+
+"@radix-ui/react-focus-scope@1.1.12":
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.12.tgz#5a8b099c80271a0667ff2e74b25ced3ea58e8ee3"
+  integrity sha512-jjk/lqTeNL0azUx5ZYzVrl4NgaDIrdzTNE4mABV9yBFI7FQqN7pIgzV1bTleUezP2QiTGA1BFTqY8MegDgWX9A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.3"
+    "@radix-ui/react-primitive" "2.1.7"
+    "@radix-ui/react-use-callback-ref" "1.1.2"
+
+"@radix-ui/react-id@1.1.2", "@radix-ui/react-id@^1.1.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.2.tgz#6fe97e7289c7133b44f8c9c61fdddf2a6be1421d"
+  integrity sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.2"
+
+"@radix-ui/react-portal@1.1.13":
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.13.tgz#8b80b8b33ef4fff449c6d3ab62492f4dca162c7e"
+  integrity sha512-z3oXfmaHLJTF1wktbjgD6cn9jiEbq3WSondB10LIuIt2m2Ym4iJlrW04/euMwENDdWDdE7z+OuY7Qyp1YpRSwA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.7"
+    "@radix-ui/react-use-layout-effect" "1.1.2"
+
+"@radix-ui/react-presence@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.7.tgz#42b69b29984fb6431338988615bc8b9767814dad"
+  integrity sha512-zBZ4QM5XG3JRanDmqXYf3MD6th4AFXFmgU6KNMFzUaV6F3uw9I5/zjMUvFriSEn5ewo1nxuibvyxJdmLlDcslA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.2"
+
+"@radix-ui/react-primitive@2.1.7", "@radix-ui/react-primitive@^2.0.2":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.7.tgz#1f487a06434770f865dbfb6c9a55bbefcbad8c82"
+  integrity sha512-bC3NiwsprbxKjuon9l7X6BUTw7FPVzEYaL92MPEY5SCd/9hUTPXVFtVwRix7778wtRsVao+zE062gL79FZleeQ==
+  dependencies:
+    "@radix-ui/react-slot" "1.3.0"
+
+"@radix-ui/react-slot@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.3.0.tgz#e311c7a6c8d65b1af9e69af8e3318c6c7105a212"
+  integrity sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.3"
+
+"@radix-ui/react-use-callback-ref@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.2.tgz#ddc0bc1381ff3b62368c248808efc45a098bafde"
+  integrity sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==
+
+"@radix-ui/react-use-controllable-state@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.3.tgz#516996f6443207546aa15a59bc71cdf5b54e01d1"
+  integrity sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==
+  dependencies:
+    "@radix-ui/react-use-effect-event" "0.0.3"
+    "@radix-ui/react-use-layout-effect" "1.1.2"
+
+"@radix-ui/react-use-effect-event@0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.3.tgz#e8f45e8e6ef64ce5bea7b5a9effc373f067e3530"
+  integrity sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.2"
+
+"@radix-ui/react-use-layout-effect@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.2.tgz#c882e66497174d061f250e65251974b699c65b65"
+  integrity sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==
+
 "@redocly/ajv@^8.18.1":
   version "8.18.3"
   resolved "https://registry.yarnpkg.com/@redocly/ajv/-/ajv-8.18.3.tgz#a925753d9a33375219f1b2ba91aef320f9929577"
@@ -4485,6 +5063,117 @@
   dependencies:
     defer-to-connect "^2.0.1"
 
+"@tailwindcss/cli@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/cli/-/cli-4.3.2.tgz#e18e8f44a06f6e5fd0e9fa04a9c0ac756d165f88"
+  integrity sha512-Fzt+HrIZHDlkRYKdLMBeufaroaPvwCBG70sMLdmurdeadNMO/LxbmT8Sbb+P83ep0iAlAImettb7Y+rO+37rXw==
+  dependencies:
+    "@parcel/watcher" "2.5.1"
+    "@tailwindcss/node" "4.3.2"
+    "@tailwindcss/oxide" "4.3.2"
+    enhanced-resolve "5.21.6"
+    mri "^1.2.0"
+    picocolors "^1.1.1"
+    tailwindcss "4.3.2"
+
+"@tailwindcss/node@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.3.2.tgz#2ba563b05ff662b9172c9645d78a5edd59f96eb3"
+  integrity sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==
+  dependencies:
+    "@jridgewell/remapping" "^2.3.5"
+    enhanced-resolve "5.21.6"
+    jiti "^2.7.0"
+    lightningcss "1.32.0"
+    magic-string "^0.30.21"
+    source-map-js "^1.2.1"
+    tailwindcss "4.3.2"
+
+"@tailwindcss/oxide-android-arm64@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz#add4f8eba265b20b14634a22717621a3350cd6d4"
+  integrity sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==
+
+"@tailwindcss/oxide-darwin-arm64@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz#2439b7c991679c006d16ed00264c60d540567554"
+  integrity sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==
+
+"@tailwindcss/oxide-darwin-x64@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz#016ffbb375bb5feabab0fd42c744b3cf21647968"
+  integrity sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==
+
+"@tailwindcss/oxide-freebsd-x64@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz#6fe112b103ff659671483293c61c853651635ee0"
+  integrity sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz#30fffb495ac59ea01046ee48c2bfa247ca6eda5e"
+  integrity sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==
+
+"@tailwindcss/oxide-linux-arm64-gnu@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz#910f4754e9aa8f8b04c018bebab627a52bd568b9"
+  integrity sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==
+
+"@tailwindcss/oxide-linux-arm64-musl@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz#bdb9861bb5064209ec5ff101afff6d046fb15ecd"
+  integrity sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==
+
+"@tailwindcss/oxide-linux-x64-gnu@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz#424276287610607303a35f52f2a172b95af4898a"
+  integrity sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==
+
+"@tailwindcss/oxide-linux-x64-musl@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz#606d5dc2fd7d2e8cdd7d1f1c4a1f4d5639056e05"
+  integrity sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==
+
+"@tailwindcss/oxide-wasm32-wasi@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz#f5d4ed2bcd12507217cc1a92e4fc507fdac6dd8c"
+  integrity sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==
+  dependencies:
+    "@emnapi/core" "^1.11.1"
+    "@emnapi/runtime" "^1.11.1"
+    "@emnapi/wasi-threads" "^1.2.2"
+    "@napi-rs/wasm-runtime" "^1.1.4"
+    "@tybys/wasm-util" "^0.10.2"
+    tslib "^2.8.1"
+
+"@tailwindcss/oxide-win32-arm64-msvc@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz#a4ec761083fef55c530e204fad43edba629ea1bf"
+  integrity sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==
+
+"@tailwindcss/oxide-win32-x64-msvc@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.2.tgz#38bf0e3878d17afedb0260758b661973b2d9de70"
+  integrity sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==
+
+"@tailwindcss/oxide@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.3.2.tgz#82157fb0d5bebf1188234855c5b7dc754da54065"
+  integrity sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==
+  optionalDependencies:
+    "@tailwindcss/oxide-android-arm64" "4.3.2"
+    "@tailwindcss/oxide-darwin-arm64" "4.3.2"
+    "@tailwindcss/oxide-darwin-x64" "4.3.2"
+    "@tailwindcss/oxide-freebsd-x64" "4.3.2"
+    "@tailwindcss/oxide-linux-arm-gnueabihf" "4.3.2"
+    "@tailwindcss/oxide-linux-arm64-gnu" "4.3.2"
+    "@tailwindcss/oxide-linux-arm64-musl" "4.3.2"
+    "@tailwindcss/oxide-linux-x64-gnu" "4.3.2"
+    "@tailwindcss/oxide-linux-x64-musl" "4.3.2"
+    "@tailwindcss/oxide-wasm32-wasi" "4.3.2"
+    "@tailwindcss/oxide-win32-arm64-msvc" "4.3.2"
+    "@tailwindcss/oxide-win32-x64-msvc" "4.3.2"
+
 "@testing-library/cypress@^10.1.3":
   version "10.1.3"
   resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-10.1.3.tgz#c1ea24b799ca2b1d2e733325bb1b59cdbdfa7f2d"
@@ -4552,6 +5241,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tybys/wasm-util@^0.10.2", "@tybys/wasm-util@^0.10.3":
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.3.tgz#015cba9e9dd47ce14d03d2a8c5d547bfb169665d"
+  integrity sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==
+  dependencies:
+    tslib "^2.4.0"
+
 "@tybys/wasm-util@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.9.0.tgz#3e75eb00604c8d6db470bf18c37b7d984a0e3355"
@@ -4632,12 +5328,222 @@
   resolved "https://registry.yarnpkg.com/@types/cross-spawn/-/cross-spawn-6.0.6.tgz#0163d0b79a6f85409e0decb8dcca17147f81fd22"
   integrity sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==
   dependencies:
-    "@types/node" "*"
+    "@types/node" "*"
+
+"@types/crypto-js@^4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.2.2.tgz#771c4a768d94eb5922cc202a3009558204df0cea"
+  integrity sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==
+
+"@types/d3-array@*":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.2.tgz#e02151464d02d4a1b44646d0fcdb93faf88fde8c"
+  integrity sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==
+
+"@types/d3-axis@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.6.tgz#e760e5765b8188b1defa32bc8bb6062f81e4c795"
+  integrity sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-brush@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.6.tgz#c2f4362b045d472e1b186cdbec329ba52bdaee6c"
+  integrity sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-chord@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.6.tgz#1706ca40cf7ea59a0add8f4456efff8f8775793d"
+  integrity sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==
+
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-contour@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.6.tgz#9ada3fa9c4d00e3a5093fed0356c7ab929604231"
+  integrity sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/geojson" "*"
+
+"@types/d3-delaunay@*":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz#185c1a80cc807fdda2a3fe960f7c11c4a27952e1"
+  integrity sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==
+
+"@types/d3-dispatch@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz#ef004d8a128046cfce434d17182f834e44ef95b2"
+  integrity sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==
+
+"@types/d3-drag@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
+  integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-dsv@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.7.tgz#0a351f996dc99b37f4fa58b492c2d1c04e3dac17"
+  integrity sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==
+
+"@types/d3-ease@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
+
+"@types/d3-fetch@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.7.tgz#c04a2b4f23181aa376f30af0283dbc7b3b569980"
+  integrity sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==
+  dependencies:
+    "@types/d3-dsv" "*"
+
+"@types/d3-force@*":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.10.tgz#6dc8fc6e1f35704f3b057090beeeb7ac674bff1a"
+  integrity sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==
+
+"@types/d3-format@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.4.tgz#b1e4465644ddb3fdf3a263febb240a6cd616de90"
+  integrity sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==
+
+"@types/d3-geo@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.1.0.tgz#b9e56a079449174f0a2c8684a9a4df3f60522440"
+  integrity sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/d3-hierarchy@*":
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz#6023fb3b2d463229f2d680f9ac4b47466f71f17b"
+  integrity sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==
+
+"@types/d3-interpolate@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.1.tgz#f632b380c3aca1dba8e34aa049bcd6a4af23df8a"
+  integrity sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==
+
+"@types/d3-polygon@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.2.tgz#dfae54a6d35d19e76ac9565bcb32a8e54693189c"
+  integrity sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==
+
+"@types/d3-quadtree@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz#d4740b0fe35b1c58b66e1488f4e7ed02952f570f"
+  integrity sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==
+
+"@types/d3-random@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.4.tgz#6bd3683b8332fc0f01e7059b7636bc5c7ede7337"
+  integrity sha512-UHYId5WTCx4L4YNel7NU00XUXXgvgpgZOvp10PuvsQENjMDXhh2RyFc0KBjO7B45ne4Ha1yVH7ii0vnzKkuzWA==
+
+"@types/d3-scale-chromatic@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#dc6d4f9a98376f18ea50bad6c39537f1b5463c39"
+  integrity sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==
+
+"@types/d3-scale@*":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.9.tgz#57a2f707242e6fe1de81ad7bfcccaaf606179afb"
+  integrity sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-selection@*":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.11.tgz#bd7a45fc0a8c3167a631675e61bc2ca2b058d4a3"
+  integrity sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==
+
+"@types/d3-shape@*":
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.8.tgz#d1516cc508753be06852cd06758e3bb54a22b0e3"
+  integrity sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time-format@*":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.3.tgz#d6bc1e6b6a7db69cccfbbdd4c34b70632d9e9db2"
+  integrity sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==
+
+"@types/d3-time@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.4.tgz#8472feecd639691450dd8000eb33edd444e1323f"
+  integrity sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==
+
+"@types/d3-timer@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
+
+"@types/d3-transition@*":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.9.tgz#1136bc57e9ddb3c390dccc9b5ff3b7d2b8d94706"
+  integrity sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==
+  dependencies:
+    "@types/d3-selection" "*"
 
-"@types/crypto-js@^4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.2.2.tgz#771c4a768d94eb5922cc202a3009558204df0cea"
-  integrity sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==
+"@types/d3-zoom@*":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
+  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
+"@types/d3@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.4.3.tgz#d4550a85d08f4978faf0a4c36b848c61eaac07e2"
+  integrity sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/d3-axis" "*"
+    "@types/d3-brush" "*"
+    "@types/d3-chord" "*"
+    "@types/d3-color" "*"
+    "@types/d3-contour" "*"
+    "@types/d3-delaunay" "*"
+    "@types/d3-dispatch" "*"
+    "@types/d3-drag" "*"
+    "@types/d3-dsv" "*"
+    "@types/d3-ease" "*"
+    "@types/d3-fetch" "*"
+    "@types/d3-force" "*"
+    "@types/d3-format" "*"
+    "@types/d3-geo" "*"
+    "@types/d3-hierarchy" "*"
+    "@types/d3-interpolate" "*"
+    "@types/d3-path" "*"
+    "@types/d3-polygon" "*"
+    "@types/d3-quadtree" "*"
+    "@types/d3-random" "*"
+    "@types/d3-scale" "*"
+    "@types/d3-scale-chromatic" "*"
+    "@types/d3-selection" "*"
+    "@types/d3-shape" "*"
+    "@types/d3-time" "*"
+    "@types/d3-time-format" "*"
+    "@types/d3-timer" "*"
+    "@types/d3-transition" "*"
+    "@types/d3-zoom" "*"
 
 "@types/debug@^4.0.0":
   version "4.1.12"
@@ -4726,6 +5632,11 @@
     "@types/jsonfile" "*"
     "@types/node" "*"
 
+"@types/geojson@*":
+  version "7946.0.16"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
+  integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.9.tgz#2a06bc0f68a20ab37b3e36aa238be6abdf49e8b4"
@@ -5043,6 +5954,11 @@
   resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.2.6.tgz#d785ee90c52d7cc020e249c948c36f7b32d1e217"
   integrity sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==
 
+"@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
@@ -5382,6 +6298,14 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
   integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
 
+"@upsetjs/venn.js@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@upsetjs/venn.js/-/venn.js-2.0.0.tgz#3be192038cdda927aa4f8b22ab51af82abf47f34"
+  integrity sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==
+  optionalDependencies:
+    d3-selection "^3.0.0"
+    d3-transition "^3.0.1"
+
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.14.1.tgz#a9f6a07f2b03c95c8d38c4536a1fdfb521ff55b6"
@@ -5619,6 +6543,11 @@ address@^1.0.1:
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
   integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==
 
+address@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-2.0.3.tgz#e910900615db3d8a20c040d4c710631062fc4ba8"
+  integrity sha512-XNAb/a6TCqou+TufU8/u11HCu9x1gYvOoxLwtlXgIqmkrYQADVv6ljyW2zwiPhHz9R1gItAWpuDrdJMmrOBFEA==
+
 after@0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
@@ -5852,6 +6781,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.2.4:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.6.tgz#73051c9b088114c795b1ea414e9c0fff874ffc1a"
+  integrity sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
@@ -6799,6 +7735,13 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz#0f79731eb8cfe1ec72acd4066efac9d61991b00d"
   integrity sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==
 
+class-variance-authority@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
+  integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
+  dependencies:
+    clsx "^2.1.1"
+
 clean-css@^5.2.2, clean-css@^5.3.3, clean-css@~5.3.2:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
@@ -6927,6 +7870,16 @@ cmd-shim@^7.0.0:
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-7.0.0.tgz#23bcbf69fff52172f7e7c02374e18fb215826d95"
   integrity sha512-rtpaCbr164TPPh+zFdkWpCyZuKkjpAzODfaZCf/SVJZzJN+4bHQb/LP3Jzq5/+84um3XXY8r548XiWKSborwVw==
 
+cmdk@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.1.1.tgz#b8524272699ccaa37aaf07f36850b376bf3d58e5"
+  integrity sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==
+  dependencies:
+    "@radix-ui/react-compose-refs" "^1.1.1"
+    "@radix-ui/react-dialog" "^1.1.6"
+    "@radix-ui/react-id" "^1.1.0"
+    "@radix-ui/react-primitive" "^2.0.2"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -7009,6 +7962,11 @@ commander@2.20.3, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@7, commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@^10.0.0:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
@@ -7034,11 +7992,6 @@ commander@^6.2.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
-  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
-
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -7341,6 +8294,20 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cose-base@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-1.0.3.tgz#650334b41b869578a543358b80cda7e0abe0a60a"
+  integrity sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==
+  dependencies:
+    layout-base "^1.0.0"
+
+cose-base@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-2.2.0.tgz#1c395c35b6e10bb83f9769ca8b817d614add5c01"
+  integrity sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==
+  dependencies:
+    layout-base "^2.0.0"
+
 cosmiconfig@9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d"
@@ -7660,6 +8627,304 @@ cypress@^15.15.0:
     untildify "^4.0.0"
     yauzl "^3.3.1"
 
+cytoscape-cose-bilkent@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz#762fa121df9930ffeb51a495d87917c570ac209b"
+  integrity sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==
+  dependencies:
+    cose-base "^1.0.0"
+
+cytoscape-fcose@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz#e4d6f6490df4fab58ae9cea9e5c3ab8d7472f471"
+  integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
+  dependencies:
+    cose-base "^2.2.0"
+
+cytoscape@^3.33.3:
+  version "3.34.0"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.34.0.tgz#5fbe2eb1cf76b070a8ecd5647c35f65aa097c9c6"
+  integrity sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==
+
+"d3-array@1 - 2":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+d3-axis@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
+  integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
+
+d3-brush@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-3.0.0.tgz#6f767c4ed8dcb79de7ede3e1c0f89e63ef64d31c"
+  integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "3"
+    d3-transition "3"
+
+d3-chord@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-3.0.1.tgz#d156d61f485fce8327e6abf339cb41d8cbba6966"
+  integrity sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-color@1 - 3", d3-color@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-contour@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.2.tgz#bb92063bc8c5663acb2422f99c73cbb6c6ae3bcc"
+  integrity sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==
+  dependencies:
+    d3-array "^3.2.0"
+
+d3-delaunay@6:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
+  dependencies:
+    delaunator "5"
+
+"d3-dispatch@1 - 3", d3-dispatch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3", d3-drag@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-dsv@1 - 3", d3-dsv@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
+  dependencies:
+    commander "7"
+    iconv-lite "0.6"
+    rw "1"
+
+"d3-ease@1 - 3", d3-ease@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+d3-fetch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
+  dependencies:
+    d3-dsv "1 - 3"
+
+d3-force@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-3.0.0.tgz#3e2ba1a61e70888fe3d9194e30d6d14eece155c4"
+  integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
+
+"d3-format@1 - 3", d3-format@3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.2.tgz#01fdb46b58beb1f55b10b42ad70b6e344d5eb2ae"
+  integrity sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==
+
+d3-geo@3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.1.tgz#6027cf51246f9b2ebd64f99e01dc7c3364033a4d"
+  integrity sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hierarchy@3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
+
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+"d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-polygon@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-3.0.1.tgz#0b45d3dd1c48a29c8e057e6135693ec80bf16398"
+  integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==
+
+"d3-quadtree@1 - 3", d3-quadtree@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz#6dca3e8be2b393c9a9d514dabbd80a92deef1a4f"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
+
+d3-random@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
+  integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
+
+d3-sankey@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
+  integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+  dependencies:
+    d3-array "1 - 2"
+    d3-shape "^1.2.0"
+
+d3-scale-chromatic@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#34c39da298b23c20e02f1a4b239bd0f22e7f1314"
+  integrity sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+d3-shape@3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+"d3-time-format@2 - 4", d3-time-format@4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+"d3-timer@1 - 3", d3-timer@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3", d3-transition@3, d3-transition@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
+d3@^7.9.0:
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.9.0.tgz#579e7acb3d749caf8860bd1741ae8d371070cd5d"
+  integrity sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==
+  dependencies:
+    d3-array "3"
+    d3-axis "3"
+    d3-brush "3"
+    d3-chord "3"
+    d3-color "3"
+    d3-contour "4"
+    d3-delaunay "6"
+    d3-dispatch "3"
+    d3-drag "3"
+    d3-dsv "3"
+    d3-ease "3"
+    d3-fetch "3"
+    d3-force "3"
+    d3-format "3"
+    d3-geo "3"
+    d3-hierarchy "3"
+    d3-interpolate "3"
+    d3-path "3"
+    d3-polygon "3"
+    d3-quadtree "3"
+    d3-random "3"
+    d3-scale "4"
+    d3-scale-chromatic "3"
+    d3-selection "3"
+    d3-shape "3"
+    d3-time "3"
+    d3-time-format "4"
+    d3-timer "3"
+    d3-transition "3"
+    d3-zoom "3"
+
+dagre-d3-es@7.0.14:
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/dagre-d3-es/-/dagre-d3-es-7.0.14.tgz#1272276e26457cf3b97dac569f8f0531ec33c377"
+  integrity sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==
+  dependencies:
+    d3 "^7.9.0"
+    lodash-es "^4.17.21"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -7723,6 +8988,11 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.19.tgz#15dc98e854bb43917f12021806af897c58ae2938"
   integrity sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==
 
+dayjs@^1.11.20:
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.21.tgz#57f87562e62de76f3c704bd2b8d522fc33068eb2"
+  integrity sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -7845,6 +9115,13 @@ define-properties@^1.1.3, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delaunator@5:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.1.0.tgz#d13271fbf3aff6753f9ea6e235557f20901046ea"
+  integrity sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==
+  dependencies:
+    robust-predicates "^3.0.2"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -7875,6 +9152,11 @@ destroy@1.2.0, destroy@~1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-libc@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
+
 detect-libc@^2.0.3:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
@@ -7885,6 +9167,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@@ -7905,6 +9192,13 @@ detect-port@^1.5.1:
     address "^1.0.1"
     debug "4"
 
+detect-port@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-2.1.0.tgz#03d72644891fa451ca5609b83107a8a0ebd03f91"
+  integrity sha512-epZuWb/6Q62L+nDHJc/hQAqf8pylsqgk3BpZXVBx1CDnr3nkrVNn73Uu1rXcFzkNcc+hkP3whuOg7JZYaQB65Q==
+  dependencies:
+    address "^2.0.1"
+
 devlop@^1.0.0, devlop@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
@@ -7960,6 +9254,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+docusaurus-plugin-copy-page-button@0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/docusaurus-plugin-copy-page-button/-/docusaurus-plugin-copy-page-button-0.8.4.tgz#f78dd7709e73a61ac31f38dedce3c5b1a6bf6c52"
+  integrity sha512-OBWmUEFIqR3BJ5giae6D518b69ZfZQ5HKrazrY2IPA6tDNX2F3m1ejeyE0oqcVcE7GVkE+K0+vJ5T+kIos8u1w==
+
 docusaurus-plugin-sass@^0.2.6:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.6.tgz#b4930a1fe1cc7bcead639bb1bee38bce0ffd073d"
@@ -8028,6 +9327,13 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^3.3.3:
+  version "3.4.12"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.12.tgz#6fa2265e9bbdce882c4ace4107626051b448ffa8"
+  integrity sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -8129,6 +9435,11 @@ electron-to-chromium@^1.5.263:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz#5d84f2df8cdb6bfe7e873706bb21bd4bfb574dc7"
   integrity sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==
 
+elkjs@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.9.3.tgz#16711f8ceb09f1b12b99e971b138a8384a529161"
+  integrity sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==
+
 emittery@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
@@ -8223,6 +9534,14 @@ engine.io@~3.6.0:
     engine.io-parser "~2.2.0"
     ws "~7.5.10"
 
+enhanced-resolve@5.21.6:
+  version "5.21.6"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz#aa207b43cf658e6ab3ba06896edc00c13c3127c6"
+  integrity sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.3.3"
+
 enhanced-resolve@^5.17.4:
   version "5.18.4"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz#c22d33055f3952035ce6a144ce092447c525f828"
@@ -8253,6 +9572,11 @@ entities@^6.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-6.0.1.tgz#c28c34a43379ca7f61d074130b2f5f7020a30694"
   integrity sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==
 
+entities@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-8.0.0.tgz#c1df5fe3602429747fa233d0dd26f142f0ce4743"
+  integrity sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==
+
 env-paths@^2.2.0, env-paths@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -8410,6 +9734,11 @@ es-to-primitive@^1.3.0:
     is-date-object "^1.0.5"
     is-symbol "^1.0.4"
 
+es-toolkit@^1.45.1:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/es-toolkit/-/es-toolkit-1.49.0.tgz#93c5b031865792fc03cbf5bd20c132a4f976a52a"
+  integrity sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==
+
 es6-promise@^3.2.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@@ -9450,6 +10779,11 @@ get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@
     hasown "^2.0.2"
     math-intrinsics "^1.1.0"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -9734,6 +11068,11 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+hachure-fill@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/hachure-fill/-/hachure-fill-0.5.2.tgz#d19bc4cc8750a5962b47fb1300557a85fcf934cc"
+  integrity sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -10255,7 +11594,7 @@ iconv-lite@0.4.24, iconv-lite@~0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.6.3, iconv-lite@^0.6.2:
+iconv-lite@0.6, iconv-lite@0.6.3, iconv-lite@^0.6.2:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -10350,6 +11689,11 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
+import-meta-resolve@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz#08cb85b5bd37ecc8eb1e0f670dc2767002d43734"
+  integrity sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -10448,6 +11792,16 @@ internal-slot@^1.1.0:
     hasown "^2.0.2"
     side-channel "^1.1.0"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 interpret@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
@@ -11431,6 +12785,11 @@ jiti@^1.20.0:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
   integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
 
+jiti@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.7.0.tgz#974228f2f4ca2bc21885a1797b45fea68e950c64"
+  integrity sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==
+
 joi@^17.9.2:
   version "17.13.3"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.13.3.tgz#0f5cc1169c999b30d344366d384b12d92558bcec"
@@ -11700,6 +13059,13 @@ just-diff@^6.0.0:
   resolved "https://registry.yarnpkg.com/just-diff/-/just-diff-6.0.2.tgz#03b65908543ac0521caf6d8eb85035f7d27ea285"
   integrity sha512-S59eriX5u3/QhMNq3v/gm8Kd0w8OS6Tz2FS1NG4blv+z0MuQcBRJyFWjdovM0Rad4/P4aUPFtnkNjMjyMlMSYA==
 
+katex@^0.16.45:
+  version "0.16.47"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.47.tgz#0a13a42c2deb4f74e61f162d440b9165a548030f"
+  integrity sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==
+  dependencies:
+    commander "^8.3.0"
+
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -11707,6 +13073,11 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
+khroma@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.1.0.tgz#45f2ce94ce231a437cf5b63c2e886e6eb42bbbb1"
+  integrity sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==
+
 kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -11744,6 +13115,16 @@ launch-editor@^2.14.1:
     picocolors "^1.1.1"
     shell-quote "^1.8.4"
 
+layout-base@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-1.0.2.tgz#1291e296883c322a9dd4c5dd82063721b53e26e2"
+  integrity sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==
+
+layout-base@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-2.0.1.tgz#d0337913586c90f9c2c075292069f5c2da5dd285"
+  integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
+
 lazy-ass@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-2.0.3.tgz#1e8451729f2bebdff1218bb18921566a08f81b36"
@@ -11861,56 +13242,130 @@ lightningcss-android-arm64@1.30.2:
   resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz#6966b7024d39c94994008b548b71ab360eb3a307"
   integrity sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==
 
+lightningcss-android-arm64@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz#f033885116dfefd9c6f54787523e3514b61e1968"
+  integrity sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==
+
 lightningcss-darwin-arm64@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz#a5fa946d27c029e48c7ff929e6e724a7de46eb2c"
   integrity sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==
 
+lightningcss-darwin-arm64@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz#50b71871b01c8199584b649e292547faea7af9b5"
+  integrity sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==
+
 lightningcss-darwin-x64@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz#5ce87e9cd7c4f2dcc1b713f5e8ee185c88d9b7cd"
   integrity sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==
 
+lightningcss-darwin-x64@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz#35f3e97332d130b9ca181e11b568ded6aebc6d5e"
+  integrity sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==
+
 lightningcss-freebsd-x64@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz#6ae1d5e773c97961df5cff57b851807ef33692a5"
   integrity sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==
 
+lightningcss-freebsd-x64@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz#9777a76472b64ed6ff94342ad64c7bafd794a575"
+  integrity sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==
+
 lightningcss-linux-arm-gnueabihf@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz#62c489610c0424151a6121fa99d77731536cdaeb"
   integrity sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==
 
+lightningcss-linux-arm-gnueabihf@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz#13ae652e1ab73b9135d7b7da172f666c410ad53d"
+  integrity sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==
+
 lightningcss-linux-arm64-gnu@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz#2a3661b56fe95a0cafae90be026fe0590d089298"
   integrity sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==
 
+lightningcss-linux-arm64-gnu@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz#417858795a94592f680123a1b1f9da8a0e1ef335"
+  integrity sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==
+
 lightningcss-linux-arm64-musl@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz#d7ddd6b26959245e026bc1ad9eb6aa983aa90e6b"
   integrity sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==
 
+lightningcss-linux-arm64-musl@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz#6be36692e810b718040802fd809623cffe732133"
+  integrity sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==
+
 lightningcss-linux-x64-gnu@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz#5a89814c8e63213a5965c3d166dff83c36152b1a"
   integrity sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==
 
+lightningcss-linux-x64-gnu@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz#0b7803af4eb21cfd38dd39fe2abbb53c7dd091f6"
+  integrity sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==
+
 lightningcss-linux-x64-musl@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz#808c2e91ce0bf5d0af0e867c6152e5378c049728"
   integrity sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==
 
+lightningcss-linux-x64-musl@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz#88dc8ba865ddddb1ac5ef04b0f161804418c163b"
+  integrity sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==
+
 lightningcss-win32-arm64-msvc@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz#ab4a8a8a2e6a82a4531e8bbb6bf0ff161ee6625a"
   integrity sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==
 
+lightningcss-win32-arm64-msvc@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz#4f30ba3fa5e925f5b79f945e8cc0d176c3b1ab38"
+  integrity sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==
+
 lightningcss-win32-x64-msvc@1.30.2:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz#f01f382c8e0a27e1c018b0bee316d210eac43b6e"
   integrity sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==
 
+lightningcss-win32-x64-msvc@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz#141aa5605645064928902bb4af045fa7d9f4220a"
+  integrity sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==
+
+lightningcss@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.32.0.tgz#b85aae96486dcb1bf49a7c8571221273f4f1e4a9"
+  integrity sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==
+  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"
+
 lightningcss@^1.27.0:
   version "1.30.2"
   resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.30.2.tgz#4ade295f25d140f487d37256f4cd40dc607696d0"
@@ -12062,6 +13517,11 @@ locate-path@^7.1.0:
   dependencies:
     p-locate "^6.0.0"
 
+lodash-es@^4.17.21:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.18.1.tgz#b962eeb80d9d983a900bf342961fb7418ca10b1d"
+  integrity sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -12174,11 +13634,23 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lucide-react@^0.468.0:
+  version "0.468.0"
+  resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.468.0.tgz"
+  integrity sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
+magic-string@^0.30.21:
+  version "0.30.21"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
+  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
+
 make-dir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
@@ -12253,6 +13725,11 @@ markdown-table@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.4.tgz#fe44d6d410ff9d6f2ea1797a3f60aa4d2b631c2a"
   integrity sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==
 
+marked@^16.3.0:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-16.4.2.tgz#4959a64be6c486f0db7467ead7ce288de54290a3"
+  integrity sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==
+
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
@@ -12540,6 +14017,33 @@ merge@^1.2.1, merge@^2.1.1:
   resolved "https://registry.yarnpkg.com/merge/-/merge-2.1.1.tgz#59ef4bf7e0b3e879186436e8481c06a6c162ca98"
   integrity sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
 
+mermaid@>=11.6.0:
+  version "11.16.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-11.16.0.tgz#dc946bc84bde9d093ba14940d49df1d9f7d8c32f"
+  integrity sha512-Zvm3kbstgdpvIJPPItlL7fppIZ3kibvc1oZIGxdvk9t6UFz6flv+Jw7FtRGKwfcI8OckmH04LqG6LlS6X4B1pA==
+  dependencies:
+    "@braintree/sanitize-url" "^7.1.2"
+    "@iconify/utils" "^3.0.2"
+    "@mermaid-js/parser" "^1.2.0"
+    "@types/d3" "^7.4.3"
+    "@upsetjs/venn.js" "^2.0.0"
+    cytoscape "^3.33.3"
+    cytoscape-cose-bilkent "^4.1.0"
+    cytoscape-fcose "^2.2.0"
+    d3 "^7.9.0"
+    d3-sankey "^0.12.3"
+    dagre-d3-es "7.0.14"
+    dayjs "^1.11.20"
+    dompurify "^3.3.3"
+    es-toolkit "^1.45.1"
+    katex "^0.16.45"
+    khroma "^2.1.0"
+    marked "^16.3.0"
+    roughjs "^4.6.6"
+    stylis "^4.3.6"
+    ts-dedent "^2.2.0"
+    uuid "^11.1.0 || ^12 || ^13 || ^14.0.0"
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -13216,6 +14720,11 @@ modify-values@^1.0.1:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+mri@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
 mrmime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"
@@ -13258,6 +14767,11 @@ nanoid@^3.3.11:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
   integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
 
+nanoid@^3.3.12:
+  version "3.3.16"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.16.tgz#a04d8ec4b1f10009d2d533947aefe4293737816c"
+  integrity sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==
+
 natural-compare-lite@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
@@ -13346,6 +14860,14 @@ node-gyp@^12.1.0:
     tinyglobby "^0.2.12"
     which "^6.0.0"
 
+node-html-parser@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-9.0.0.tgz#2a4fd06ebb0c6e1b2b3c5341fc286a36421dbfe9"
+  integrity sha512-MhdaHPyxnyYu/sf0TpiRvDnTrkum0UKHC7FdbDGIUQNlx3I7xzwXoyV0eMUMv/XU+lkJT1glOUzpDPq7b2p1Ew==
+  dependencies:
+    css-select "^5.1.0"
+    entities "^8.0.0"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -14061,6 +15583,11 @@ package-json@^8.1.0:
     registry-url "^6.0.0"
     semver "^7.3.7"
 
+package-manager-detector@^1.3.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-1.7.0.tgz#0a6d6d3856627b8ac9331f95fc891ea81247aafd"
+  integrity sha512-xg1eHpwYL/D/HEdWw2goFZP6vV0FH7W+PZ5rFkGjdIDLtxq7EkzBUeT3m+lndYCt8wKbmofUu1MUdMCXkCk9ZQ==
+
 pacote@21.0.1:
   version "21.0.1"
   resolved "https://registry.yarnpkg.com/pacote/-/pacote-21.0.1.tgz#e3497c6b0380bad21d840ce3c9c1f53b9ae40315"
@@ -14262,6 +15789,11 @@ path-browserify@1.0.1, path-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
   integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
 
+path-data-parser@0.1.0, path-data-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
+  integrity sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -14463,6 +15995,19 @@ pngjs@^7.0.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-7.0.0.tgz#a8b7446020ebbc6ac739db6c5415a65d17090e26"
   integrity sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==
 
+points-on-curve@0.2.0, points-on-curve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/points-on-curve/-/points-on-curve-0.2.0.tgz#7dbb98c43791859434284761330fa893cb81b4d1"
+  integrity sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==
+
+points-on-path@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/points-on-path/-/points-on-path-0.2.1.tgz#553202b5424c53bed37135b318858eacff85dd52"
+  integrity sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==
+  dependencies:
+    path-data-parser "0.1.0"
+    points-on-curve "0.2.0"
+
 possible-typed-array-names@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"
@@ -14857,7 +16402,7 @@ postcss-place@^10.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-preset-env@^10.2.1:
+postcss-preset-env@^10.2.1, postcss-preset-env@^10.6.1:
   version "10.6.1"
   resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-10.6.1.tgz#df30cfc54e90af2dcff5f94104e6f272359c9f65"
   integrity sha512-yrk74d9EvY+W7+lO9Aj1QmjWY9q5NsKjK2V9drkOPZB/X6KZ0B3igKsHUYakb7oYVhnioWypQX3xGuePf89f3g==
@@ -15032,6 +16577,15 @@ postcss@^8.4.21, postcss@^8.4.24, postcss@^8.4.33, postcss@^8.5.4:
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
+postcss@^8.5.13:
+  version "8.5.19"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.19.tgz#45ad5cfde499408e20147348237551381a922037"
+  integrity sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ==
+  dependencies:
+    nanoid "^3.3.12"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 postman-code-generators@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postman-code-generators/-/postman-code-generators-2.1.0.tgz#c3e617bb72781fd402a3c0104983d864f8084503"
@@ -15468,6 +17022,25 @@ react-redux@^9.2.0:
     "@types/use-sync-external-store" "^0.0.6"
     use-sync-external-store "^1.4.0"
 
+react-remove-scroll-bar@^2.3.7:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
+  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
+  dependencies:
+    react-style-singleton "^2.2.2"
+    tslib "^2.0.0"
+
+react-remove-scroll@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz#6442da56791117661978ae99cd29be9026fecca0"
+  integrity sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==
+  dependencies:
+    react-remove-scroll-bar "^2.3.7"
+    react-style-singleton "^2.2.3"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.3"
+    use-sidecar "^1.1.3"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -15503,6 +17076,14 @@ react-router@5.3.4, react-router@^5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
+  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
+  dependencies:
+    get-nonce "^1.0.0"
+    tslib "^2.0.0"
+
 react@^19.0.0:
   version "19.2.7"
   resolved "https://registry.yarnpkg.com/react/-/react-19.2.7.tgz#1f47a1bfc06f8ec885752c6f4af14369a9f8260b"
@@ -15903,6 +17484,11 @@ reselect@^5.1.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
   integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
 
+reselect@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.2.0.tgz#f380ef7664332d26ea06c1cba04bdbbdcaa955f1"
+  integrity sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==
+
 resolve-alpn@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -16015,6 +17601,21 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+robust-predicates@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.3.tgz#1099061b3349e2c5abec6c2ab0acd440d24d4062"
+  integrity sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==
+
+roughjs@^4.6.6:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.6.6.tgz#1059f49a5e0c80dee541a005b20cc322b222158b"
+  integrity sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==
+  dependencies:
+    hachure-fill "^0.5.2"
+    path-data-parser "^0.1.0"
+    points-on-curve "^0.2.0"
+    points-on-path "^0.2.1"
+
 rtlcss@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-4.3.0.tgz#f8efd4d5b64f640ec4af8fa25b65bacd9e07cc97"
@@ -16042,6 +17643,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
+
 rxjs@7.8.2, rxjs@^7.8.2:
   version "7.8.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.2.tgz#955bc473ed8af11a002a2be52071bf475638607b"
@@ -17014,6 +18620,11 @@ stylehacks@^6.1.1:
     browserslist "^4.23.0"
     postcss-selector-parser "^6.0.16"
 
+stylis@^4.3.6:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.4.0.tgz#c5846c9345f4bfc51bd0cbd7ca35a0744f485a5d"
+  integrity sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==
+
 sucrase@^3.35.0:
   version "3.35.1"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.1.tgz#4619ea50393fe8bd0ae5071c26abd9b2e346bfe1"
@@ -17125,11 +18736,26 @@ systeminformation@^5.31.1:
   resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-5.31.6.tgz#2da4979a7262974fd068a3a306ded30aed6127c0"
   integrity sha512-Uv2b2uGGM6ns+26czgW2cYRabYdnswM0ddSOOlryHOaelzsmDSet1iM/NT7VOYxW8x/BW+HkY+b1Ve2pLTSGSA==
 
+tailwind-merge@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.6.0.tgz#88d83242d1dd7bc847223f73dcf210dd1f2ee11c"
+  integrity sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==
+
+tailwindcss@4.3.2, tailwindcss@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.3.2.tgz#408ee67d767a0fef7b174674bb9c5ce136a5ace1"
+  integrity sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==
+
 tapable@^2.0.0, tapable@^2.2.0, tapable@^2.2.1, tapable@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.3.0.tgz#7e3ea6d5ca31ba8e078b560f0d83ce9a14aa8be6"
   integrity sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==
 
+tapable@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.3.3.tgz#5da7c9992c46038221267985ab28421a8879f160"
+  integrity sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==
+
 tar-stream@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
@@ -17278,6 +18904,11 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
+tinyexec@^1.0.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.2.4.tgz#ae45bb2edebda94c70f4ea897e0f1243e470db71"
+  integrity sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==
+
 tinyexec@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.1.2.tgz#11feef204b706d4668ca4013db29f3bd64f5c4dc"
@@ -17434,6 +19065,11 @@ ts-api-utils@^2.5.0:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.5.0.tgz#4acd4a155e22734990a5ed1fe9e97f113bcb37c1"
   integrity sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==
 
+ts-dedent@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.3.0.tgz#8fac36c7902b541c154ac13a27ac467997af11f8"
+  integrity sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
@@ -17873,12 +19509,27 @@ url@^0.11.4:
     punycode "^1.4.1"
     qs "^6.12.3"
 
+use-callback-ref@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
+  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
+  dependencies:
+    tslib "^2.0.0"
+
 use-editable@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
   integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
 
-use-sync-external-store@^1.4.0:
+use-sidecar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
+  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
+use-sync-external-store@^1.4.0, use-sync-external-store@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
   integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
@@ -17927,6 +19578,11 @@ uuid@8.3.2, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+"uuid@^11.1.0 || ^12 || ^13 || ^14.0.0":
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-14.0.1.tgz#8a5975b3e038902bfd169a10b5202f5ec0cf3faf"
+  integrity sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"