@gunjo/ui 0.0.1-alpha.1 → 0.0.1-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 4px LLC
+
+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.

package/README.ja.md

@@ -0,0 +1,90 @@
+# @gunjo/ui
+
+[![npm version](https://img.shields.io/npm/v/@gunjo/ui.svg)](https://www.npmjs.com/package/@gunjo/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
+
+[English](./README.md) · **日本語**
+
+*[UIXHERO](https://www.uixhero.com) が手がけるデザインシステム — ライブの [コンポーネントギャラリー](https://www.uixhero.com/resources/ui-components) もどうぞ。*
+
+> ⚠️ **1.0 未満。** 現在の `0.0.1-alpha.x` は名前確保とリリース工程の試運転です。`1.0.0` stable まで public API は変わる可能性があります——バージョンを固定し、アップグレード前に [CHANGELOG](./CHANGELOG.md) を確認してください。
+
+**Gunjo（群青）** は SSOT 駆動の React + Tailwind デザインシステムです。**pen デザインソース・React ソース・ドキュメントの 3 軸が常に同期している**ことを検証された 150+ コンポーネントを提供し、人だけでなく AI エージェントからも快適に使えるよう設計しています。
+
+## 「becoming」── 名前について
+
+**群青（ぐんじょう）** は、伝統的な日本の色名に連なる深い青。けれどこの名が指すのは、**まだ青ならず、青になりつつある色**です。夜明け前の空、まだ乾かない墨。完成された青ではなく、これから青になる色──成長と、開かれた可能性の象徴。この *becoming* が、プロジェクトそのものの姿勢でもあります。AI 時代に作られ、完成を急がず、いまも到着し続けているデザインシステム。主役の **群青** を、温かい **媚茶（こびちゃ）** のアクセントが「土」として支えます。
+
+## なぜ Gunjo か
+
+- **単一の正（SSOT）を強制する。** すべての公開コンポーネントは、デザインソース（`.pen`）・実装（`src/`）・ドキュメントの 3 軸で、自動ドリフト検査（`npm run design:verify`）により突合されます。トークン・バリアント・見た目が黙ってズレることがありません。
+- **「何を作るか」で整理。** コンポーネントは機能別に分類されています──Inputs · Display · Charts · Feedback · Navigation · Overlay · Layout。抽象的な階層ではなく、用途で引けます。すべて Radix ベースで、アクセシビリティ（ARIA・キーボード）とダークモードを内包。
+
+## AI から使える設計
+
+Gunjo は「エージェントがこれを読んで使う」を後付けではなく第一級の要件として扱います:
+
+- **単一の型付きエントリ** — すべての公開 API を `src/index.ts` から re-export。`import { Button, Card } from '@gunjo/ui'` だけで、エージェント（や人）が API 全体を発見できます。
+- **SSOT パイプライン** — 機械可読のコンポーネントメタデータ（`design/*-metadata.json`）が各コンポーネントのバリアントとトークンを記述。
+- **AI ハンドオフ面** — 専用のハンドオフ面（docs サイトの `/ai-handoff`、MCP・Figma ガイドを含む）でエージェントがシステムを把握できます。*（公開 Figma ライブラリと MCP サーバは roadmap）*
+
+## クイックスタート
+
+```bash
+npm install @gunjo/ui
+```
+
+```typescript
+// コンポーネント
+import { Button, Input, Card } from '@gunjo/ui';
+// スタイル
+import '@gunjo/ui/styles';
+// Tailwind プリセット
+import gunjoPreset from '@gunjo/ui/tailwind-preset';
+```
+
+> **Next.js:** `next.config.ts` に `transpilePackages: ["@gunjo/ui"]` を追加してください（本パッケージは TypeScript ソースを直接配布します）。詳細は [docs/adoption.md](./docs/adoption.md)。
+
+**別プロジェクトへ導入する**
+
+- [docs/adoption.md](./docs/adoption.md) — 5 分インストール（ここから）
+- [docs/adoption-strategy.md](./docs/adoption-strategy.md) — 配布形態の決定書
+- [docs/migration-playbook.md](./docs/migration-playbook.md) — 既存アプリの段階移行
+- [docs/dependencies.md](./docs/dependencies.md) — peer dependency 範囲とテスト済みの組み合わせ
+- [docs/versioning.md](./docs/versioning.md) — semver 運用と破壊的変更ポリシー
+
+**Gunjo を拡張する**
+
+- [docs/component-addition.md](./docs/component-addition.md) — SSOT 三軸（pen + source + docs）でコンポーネントを追加する手順
+
+## ドキュメントサイト
+
+```bash
+npm install
+npm run dev      # http://localhost:13030
+```
+
+ドキュメントサイトは `@gunjo/ui` を自ら使って（ドッグフーディング）構築されており、全コンポーネント・トークン・パターンの正式リファレンスです。
+
+## Gunjo の作り方
+
+Gunjo は、近い将来あたりまえになっていくと考える、シンプルな役割分担の上に作られています:
+
+- **人が思想と方向を定める** — 何を作るか、何を大事にするか、美意識、すべての判断。
+- **Claude と協働して作る** — 実装、網羅的な監査（アクセシビリティ・デザイントークン・全コンポーネントの視覚ドリフト）、そして速い反復。
+- **そして AI から使えるよう設計する** — 単一の型付きエントリ、SSOT パイプライン、AI ハンドオフ面。エージェントが人と同じくらい簡単に読んで使えるように。
+
+これは「AI がコンポーネントライブラリを作った」ではありません。一人の人間がビジョンを定め、AI をパートナーに、短いループで試行錯誤を重ねたものです。そしてそれを隠さず明示します——それが誠実で、そして次第に当たり前になっていく、ソフトウェアの作られ方だと考えるからです。
+
+## 貢献・セキュリティ
+
+- [CONTRIBUTING.md](./CONTRIBUTING.md) — 開発参加の手引き、PR、SSOT 三軸ワークフロー
+- [SECURITY.md](./SECURITY.md) — 脆弱性報告手順、サポート対象バージョン
+- [CHANGELOG.md](./CHANGELOG.md) — リリース履歴
+- [CLAUDE.md](./CLAUDE.md) — issue 駆動の working agreement（非自明な作業は issue を切ってから）
+
+タスクは [GitHub Issues](https://github.com/uixhero/gunjo/issues) に集約しています。
+
+## ライセンス
+
+[MIT](./LICENSE) © 2026 4px LLC · built by [UIXHERO](https://www.uixhero.com)

package/README.md

@@ -1,129 +1,90 @@
 # @gunjo/ui
 
 [![npm version](https://img.shields.io/npm/v/@gunjo/ui.svg)](https://www.npmjs.com/package/@gunjo/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
 
-> ⚠️ **Early alpha** — `0.0.1-alpha.0` は名前確保とドライラン目的の初回 publish です。API は今後変更される可能性があります。本格採用は `1.0.0` stable リリース以降を推奨。
+**English** · [日本語](./README.ja.md)
 
-SSOT-driven な React + Tailwind デザインシステム。Pen / source / docs の 3 軸で整合性検証された 70 コンポーネントを提供。
+*A design system from [UIXHERO](https://www.uixhero.com) — see the live [component gallery](https://www.uixhero.com/resources/ui-components).*
 
-## 📘 デザイン仕様（正式）
+> ⚠️ **Pre-1.0.** The current `0.0.1-alpha.x` publish reserves the name and exercises the release pipeline. Until the `1.0.0` stable release the public API may change — pin your version and check the [CHANGELOG](./CHANGELOG.md) before upgrading.
 
-- UI デザイン仕様の正式ドキュメントは [DESIGN.md](./DESIGN.md) を参照してください。
-- SSOT 運用・同期手順は [design/README.md](./design/README.md) を参照してください。
-- 今回対応の概要と運用 RUNBOOK は [SSOT_RUNBOOK.md](./SSOT_RUNBOOK.md) を参照してください。
-- コンポーネント突合表（Source / Docs / Pen）は [COMPONENT_COVERAGE_MATRIX.md](./COMPONENT_COVERAGE_MATRIX.md) を参照してください。
-- 視覚監査台帳（docs vs pen）は [COMPONENT_VISUAL_AUDIT.md](./COMPONENT_VISUAL_AUDIT.md) を参照してください。
+**Gunjo (群青)** is an SSOT-driven React + Tailwind design system — 150+ components whose **pen design source, React source, and docs are verified to stay in sync**, and which are built to be used as comfortably by AI agents as by people.
 
-## 🚀 採用ガイド（他プロジェクトから使う）
+## "Becoming" — about the name
 
-GunjoUI を別アプリに導入したい場合：
+*Gunjo (群青)* is a deep ultramarine from the traditional palette of Japanese color names. But the name points at a color **not yet blue — becoming blue**: the sky before dawn, ink before it dries. Not a finished blue, but one on its way there — a symbol of growth and open possibility. That *becoming* is the stance of the whole project: built in the age of AI, never quite finished, always arriving. The primary **群青 (ultramarine)** is grounded by a warm **媚茶 (kobicha)** accent — the earth that supports the becoming.
 
-- [docs/adoption.md](./docs/adoption.md) — **5 分インストール**（ここから始める）
-- [docs/adoption-strategy.md](./docs/adoption-strategy.md) — 配布形態の決定書
-- [docs/migration-playbook.md](./docs/migration-playbook.md) — 既存アプリの段階移行
-- [docs/dependencies.md](./docs/dependencies.md) — peer dependency 範囲とテスト済み組み合わせ
-- [docs/versioning.md](./docs/versioning.md) — semver 運用と破壊的変更ポリシー
+## Why Gunjo
 
-GunjoUI に新規コンポーネントを足したい場合：
+- **One source of truth, enforced.** Every shipped component is checked across three axes — design source (`.pen`), implementation (`src/`), and documentation — by an automated drift pipeline (`npm run design:verify`). Tokens, variants, and visuals can't silently diverge.
+- **Organized by what you build.** Components are grouped by function — Inputs · Display · Charts · Feedback · Navigation · Overlay · Layout — not by abstract tiers. All Radix-based, with accessibility (ARIA, keyboard) and dark mode built in.
 
-- [docs/component-addition.md](./docs/component-addition.md) — SSOT 三軸（pen + source + docs）で追加する手順
+## AI-consumable by design
 
-## 📦 セットアップ
+Gunjo treats "an agent will read and use this" as a first-class requirement, not an afterthought:
 
-### 依存関係のインストール
+- **Single typed entry point** — every public API is re-exported from `src/index.ts`, so `import { Button, Card } from '@gunjo/ui'` is all an agent (or a person) needs to discover the surface.
+- **SSOT pipeline** — machine-readable component metadata (`design/*-metadata.json`) describes every component's variants and tokens.
+- **AI-handoff surface** — a dedicated handoff section (`/ai-handoff` in the docs, with MCP and Figma guides) for agents to pick up the system. *(A published Figma library and an MCP server are on the roadmap.)*
 
-```bash
-cd gunjo
-npm install
-```
-
-### 型チェック
+## Quick start
 
 ```bash
-npm run type-check
+npm install @gunjo/ui
 ```
 
-## 🚀 ドキュメントサイトの起動
-
-```bash
-npm run dev
+```typescript
+// components
+import { Button, Input, Card } from '@gunjo/ui';
+// styles
+import '@gunjo/ui/styles';
+// tailwind preset
+import gunjoPreset from '@gunjo/ui/tailwind-preset';
 ```
 
-ドキュメントサイトは `http://localhost:13030` で起動します。
+> **Next.js:** add `transpilePackages: ["@gunjo/ui"]` to `next.config.ts` — the package ships TypeScript source directly. See [docs/adoption.md](./docs/adoption.md).
 
-## 📚 使用方法（ライブラリとして）
+**Adopting Gunjo in another project**
 
-### インストール（他のプロジェクトから）
+- [docs/adoption.md](./docs/adoption.md) — 5-minute install (start here)
+- [docs/adoption-strategy.md](./docs/adoption-strategy.md) — distribution-format decision record
+- [docs/migration-playbook.md](./docs/migration-playbook.md) — staged migration for existing apps
+- [docs/dependencies.md](./docs/dependencies.md) — peer-dependency ranges and tested combinations
+- [docs/versioning.md](./docs/versioning.md) — semver policy and breaking-change rules
 
-```bash
-# npm から（推奨）
-npm install @gunjo/ui
+**Extending Gunjo**
 
-# ローカルパスで（開発時）
-npm install file:../gunjo
-```
-
-> **重要**：採用先 Next.js では `next.config.ts` に `transpilePackages: ["@gunjo/ui"]` を追加してください（本パッケージは TypeScript ソースを直接配布するため）。詳細は [docs/adoption.md §2](./docs/adoption.md#2-nextjs-設定必須)。
-
-### インポート
-
-```typescript
-// コンポーネント
-import { Button, Input, Card } from '@gunjo/ui';
+- [docs/component-addition.md](./docs/component-addition.md) — add a component across the SSOT three axes (pen + source + docs)
 
-// スタイル
-import '@gunjo/ui/styles';
+## Documentation site
 
-// Tailwindプリセット
-import gunjoPreset from '@gunjo/ui/tailwind-preset';
+```bash
+npm install
+npm run dev      # http://localhost:13030
 ```
 
-## ✅ 完全独立
+The docs site dogfoods `@gunjo/ui` and is the canonical reference for every component, token, and pattern.
 
-- ✅ 他のパッケージへの依存なし
-- ✅ 相対パスはすべて `gunjo/` ディレクトリ内
-- ✅ どこに移動しても動作します
-- ✅ `npm install` で依存関係をインストール可能
-- ✅ ドキュメントサイトも含まれています
+## How Gunjo was built
 
-## 🤖 AIエディタでの利用
+Gunjo is built on a simple division of labor — the kind we expect to become commonplace before long:
 
-コンポーネントは **AI エディタ（Cursor 等）で読み出して使いやすい** 構成にしています。
+- **A human sets the philosophy and direction** — what to build, what matters, the aesthetic, every judgment call.
+- **The system is built in collaboration with Claude** — implementation, exhaustive audits (accessibility, design tokens, visual drift across every component), and fast iteration.
+- **And it is designed to be consumed by AI** — a single typed entry point, an SSOT pipeline, and an AI-handoff surface, so agents can read and use it as easily as people can.
 
-- **単一エントリ**: すべての公開 API を `src/index.ts` から re-export しているため、`import { Button, Card } from '@gunjo/ui'` の形で一覧・利用しやすい
-- **TypeScript**: 各コンポーネントの props が型付けされており、補完・推論がしやすい
-- **Atomic Design**: Atoms / Molecules / Organisms / Templates で整理され、役割ごとに検索しやすい
-- **Radix UI ベース**: アクセシビリティ（ARIA・キーボード操作）を考慮した構造で、意味の読み取りがしやすい
+This is not "an AI made a component library." It is one person setting the vision and iterating, in tight loops, with an AI partner — and being transparent about it, because we think that's the honest (and increasingly normal) way software gets made.
 
-利用時は `@gunjo/ui` から必要なコンポーネントを import し、`@gunjo/ui/styles` と Tailwind プリセットを併用してください。
+## Contributing & security
 
-## 📁 構造
+- [CONTRIBUTING.md](./CONTRIBUTING.md) — workflow, PRs, the SSOT three-axis flow
+- [SECURITY.md](./SECURITY.md) — vulnerability reporting and supported versions
+- [CHANGELOG.md](./CHANGELOG.md) — release history
+- [CLAUDE.md](./CLAUDE.md) — issue-driven working agreement (open an issue before non-trivial work)
 
-```
-gunjo/
-├── src/                    # コンポーネントライブラリ
-│   ├── components/
-│   │   ├── atoms/          # 原子コンポーネント
-│   │   ├── molecules/      # 分子コンポーネント
-│   │   ├── organisms/       # 有機体コンポーネント
-│   │   └── templates/       # テンプレート
-│   ├── lib/                # ユーティリティ
-│   ├── globals.css         # グローバルスタイル
-│   └── index.ts            # エクスポート
-├── docs/                   # ドキュメントサイト（Next.js）
-│   ├── app/                # Next.jsアプリ
-│   ├── components/         # ドキュメント用コンポーネント
-│   └── lib/                # ドキュメント用ユーティリティ
-├── public/                 # 静的ファイル
-├── tailwind-preset.js     # Tailwindプリセット
-├── next.config.ts         # Next.js設定
-├── postcss.config.mjs     # PostCSS設定
-├── package.json
-└── tsconfig.json
-```
+Work is tracked on [GitHub Issues](https://github.com/uixhero/gunjo/issues).
 
-## 📝 注意事項
+## License
 
-- ライブラリとして使用する場合: `src/` からコンポーネントをインポート
-- ドキュメントサイトを起動する場合: `npm run dev` で起動
-- すべての依存関係は `package.json` に含まれています
+[MIT](./LICENSE) © 2026 4px LLC · built by [UIXHERO](https://www.uixhero.com)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gunjo/ui",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "description": "GunjoUI — SSOT-driven React + Tailwind design system. Pen / source / docs three-axis verified. Early alpha: API may change. See docs/adoption.md to consume from another project.",
   "keywords": [
     "design-system",
@@ -12,6 +12,13 @@
   ],
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uixhero/gunjo.git"
+  },
+  "homepage": "https://github.com/uixhero/gunjo#readme",
+  "bugs": "https://github.com/uixhero/gunjo/issues",
+  "author": "4px LLC (https://www.uixhero.com)",
   "license": "MIT",
   "private": false,
   "publishConfig": {
@@ -38,6 +45,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
+    "showcase:thumbs": "node scripts/showcase-capture-thumbs.mjs && node scripts/sync-thumb-manifest.mjs",
+    "patterns:thumbs": "node scripts/patterns-capture-thumbs.mjs && node scripts/sync-thumb-manifest.mjs",
+    "thumbs:manifest": "node scripts/sync-thumb-manifest.mjs",
     "prepare": "npm run hooks:install",
     "hooks:install": "node scripts/install-git-hooks.mjs",
     "design:sync": "node scripts/design-sync.mjs",
@@ -45,6 +55,7 @@
     "design:sync:metadata": "node scripts/design-sync.mjs --metadata",
     "design:sync:components": "node scripts/design-sync.mjs --components",
     "design:sync:docs-navigation": "node scripts/design-sync.mjs --docs-navigation",
+    "design:sync:docs-embeds": "node scripts/sync-docs-embeds.mjs",
     "design:sync:docs-pages": "node scripts/design-sync.mjs --docs-pages",
     "design:sync:docs-pages:refresh": "node scripts/design-sync.mjs --docs-pages --refresh-generated",
     "design:sync:stubs": "node scripts/design-sync.mjs --stubs",
@@ -63,10 +74,8 @@
     "design:verify:node-snapshots": "node scripts/design-verify-node-snapshot-coverage.mjs",
     "design:verify:slot-nodes": "node scripts/design-verify-slot-node-coverage.mjs",
     "design:verify:atom-variant-keys": "node scripts/design-verify-atom-variant-key-coverage.mjs",
-    "design:verify:atom-generated-variant-keys": "node scripts/design-verify-atom-generated-variant-key-coverage.mjs",
-    "design:verify:atom-generated-variant-key-usage": "node scripts/design-verify-atom-generated-variant-key-usage.mjs",
-    "design:verify:molecule-variant-keys": "node scripts/design-verify-molecule-variant-key-coverage.mjs",
-    "design:verify:molecule-generated-variant-key-usage": "node scripts/design-verify-molecule-generated-variant-key-usage.mjs",
+    "design:verify:generated-variant-keys": "node scripts/design-verify-generated-variant-key-coverage.mjs",
+    "design:verify:generated-variant-key-usage": "node scripts/design-verify-generated-variant-key-usage.mjs",
     "design:verify:default-variant-keys": "node scripts/design-verify-default-variant-key-coverage.mjs",
     "design:verify:default-variant-key-usage": "node scripts/design-verify-default-variant-key-usage.mjs",
     "design:verify:component-style-hints": "node scripts/design-verify-component-style-hints-coverage.mjs",
@@ -79,6 +88,7 @@
     "design:verify:tailwind-theme-ssot": "node scripts/design-verify-tailwind-theme-ssot.mjs",
     "design:verify:tailwind-preset-plugins": "node scripts/design-verify-tailwind-preset-plugins.mjs",
     "design:verify:css-vars": "node scripts/design-verify-css-variable-coverage.mjs",
+    "design:verify:color-contrast": "node scripts/design-verify-color-contrast.mjs",
     "design:verify:app-globals": "node scripts/design-verify-app-globals-sync.mjs",
     "design:verify:generated-stubs": "node scripts/design-verify-generated-stub-coverage.mjs",
     "design:verify:generated-stubs:report": "node scripts/design-verify-generated-stub-coverage.mjs --report",
@@ -95,9 +105,30 @@
     "design:verify:ssot-progress-thresholds": "node scripts/design-verify-ssot-progress-thresholds.mjs",
     "design:verify:ssot-pr-comment-docs": "node scripts/design-verify-ssot-pr-comment-docs.mjs",
     "design:report:component-coverage": "node scripts/design-generate-component-coverage-matrix.mjs",
+    "design:report:figma-library": "node scripts/generate-figma-library-discovery.mjs",
+    "design:report:figma-foundations": "node scripts/generate-figma-foundations-payload.mjs",
     "design:audit:docs-capture": "node scripts/design-capture-doc-component-screenshots.mjs",
     "design:audit:checklist": "node scripts/design-generate-visual-audit-checklist.mjs",
     "design:audit:refresh": "npm run -s design:audit:docs-capture && npm run -s design:audit:checklist",
+    "docs:audit:components": "node scripts/audit-component-docs.mjs",
+    "docs:crawl:components": "node scripts/crawl-component-doc-pages.mjs",
+    "docs:audit:foundation-tokens": "npm run docs:audit:component-foundation-tokens && npm run docs:audit:runtime-foundation-tokens && npm run docs:audit:site-foundation-tokens",
+    "docs:audit:component-foundation-tokens": "node scripts/audit-component-foundation-tokens.mjs",
+    "docs:audit:runtime-foundation-tokens": "node scripts/audit-runtime-foundation-tokens.mjs",
+    "docs:audit:site-foundation-tokens": "node scripts/audit-site-foundation-tokens.mjs",
+    "docs:audit:extended-tokens": "npm run docs:audit:component-extended-tokens && npm run docs:audit:runtime-extended-tokens && npm run docs:audit:site-extended-tokens",
+    "docs:audit:component-extended-tokens": "node scripts/audit-component-extended-tokens.mjs",
+    "docs:audit:runtime-extended-tokens": "node scripts/audit-runtime-extended-tokens.mjs",
+    "docs:audit:site-extended-tokens": "node scripts/audit-site-extended-tokens.mjs",
+    "docs:audit:colors": "npm run docs:audit:component-colors && npm run docs:audit:runtime-colors && npm run docs:audit:site-colors",
+    "docs:audit:component-colors": "node scripts/audit-component-colors.mjs",
+    "docs:audit:runtime-colors": "node scripts/audit-runtime-colors.mjs",
+    "docs:audit:site-colors": "node scripts/audit-site-colors.mjs",
+    "docs:audit:mobile-disabled-feedback": "node scripts/audit-mobile-disabled-feedback.mjs",
+    "docs:audit:public-contrast": "node scripts/audit-public-contrast.mjs",
+    "docs:audit:en-locale-sweep": "node scripts/audit-en-locale-sweep.mjs",
+    "docs:audit:command-palette": "node scripts/audit-command-palette.mjs",
+    "docs:audit:lighthouse-public": "node scripts/audit-public-lighthouse.mjs",
     "design:verify:components": "node scripts/design-verify-components.mjs",
     "design:verify:molecules": "node scripts/design-verify-molecule-drift.mjs",
     "design:verify:organisms": "node scripts/design-verify-organism-drift.mjs",
@@ -109,13 +140,17 @@
     "tailwindcss": "^3.0.0 || ^4.0.0"
   },
   "dependencies": {
+    "@next/third-parties": "^16.2.9",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-slot": "^1.2.4",
@@ -123,12 +158,16 @@
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@tabler/icons-react": "^3.44.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@vercel/analytics": "^2.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.0.0",
+    "input-otp": "^1.4.2",
     "lucide-react": "^0.562.0",
     "next": "16.1.0",
     "next-themes": "^0.4.6",
@@ -140,7 +179,8 @@
     "remark-gfm": "^4.0.1",
     "shiki": "^3.20.0",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
@@ -150,6 +190,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^9",
     "eslint-config-next": "16.1.0",
+    "lighthouse": "^12.8.2",
     "postcss": "^8.5.6",
     "puppeteer": "^24.41.0",
     "tailwindcss": "^4",

package/src/components/display/Accordion.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import {
+    IconChevronDown as ChevronDown,
+    IconPlus as Plus,
+} from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { Icon } from "./Icon"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import type { AccordionVariantKey } from "./generated/variant-keys"
+import { accordionDefaultVariantKey } from "./generated/default-variant-keys"
+
+function buildVariantStateMap(
+    defaultVariantKey: AccordionVariantKey,
+    defaultStateClass: string,
+    alternateStateClass: string
+): Record<AccordionVariantKey, string> {
+    return defaultVariantKey === "collapsed"
+        ? { collapsed: defaultStateClass, expanded: alternateStateClass }
+        : { collapsed: alternateStateClass, expanded: defaultStateClass }
+}
+
+const expandedAccordionVariantKey: AccordionVariantKey =
+    accordionDefaultVariantKey === "collapsed" ? "expanded" : "collapsed"
+
+const contentStateClasses = buildVariantStateMap(
+    accordionDefaultVariantKey,
+    "data-[state=closed]:animate-accordion-up",
+    "data-[state=open]:animate-accordion-down"
+)
+
+const Accordion = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Root
+        ref={ref}
+        className={cn("flex flex-col w-[400px] border", className)}
+        {...props}
+    />
+))
+Accordion.displayName = AccordionPrimitive.Root.displayName
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item
+        ref={ref}
+        className={cn("border-b", className)}
+        {...props}
+    />
+))
+AccordionItem.displayName = "AccordionItem"
+
+type AccordionTriggerIndicator = "chevron" | "plus" | "none"
+
+interface AccordionTriggerProps
+    extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /**
+     * Visual indicator shown at the trailing edge of the trigger.
+     * `chevron` is the default navigation-style affordance. `plus` is useful
+     * for FAQ and disclosure lists where open/close reads as add/remove.
+     */
+    indicator?: AccordionTriggerIndicator
+    /** Tooltip label shown when the item is closed. */
+    openLabel?: string
+    /** Tooltip label shown when the item is open. */
+    closeLabel?: string
+}
+
+function AccordionTriggerIndicator({
+    indicator,
+    openLabel,
+    closeLabel,
+}: {
+    indicator: AccordionTriggerIndicator
+    openLabel: string
+    closeLabel: string
+}) {
+    const indicatorRef = React.useRef<HTMLSpanElement | null>(null)
+    const [tooltipLabel, setTooltipLabel] = React.useState(openLabel)
+
+    const updateTooltipLabel = React.useCallback(() => {
+        const trigger = indicatorRef.current?.closest("button[data-state]")
+        const isOpen = trigger?.getAttribute("data-state") === "open"
+        setTooltipLabel(isOpen ? closeLabel : openLabel)
+    }, [closeLabel, openLabel])
+
+    React.useEffect(() => {
+        const trigger = indicatorRef.current?.closest("button[data-state]")
+        if (!trigger) return
+
+        updateTooltipLabel()
+
+        const observer = new MutationObserver(updateTooltipLabel)
+        observer.observe(trigger, {
+            attributes: true,
+            attributeFilter: ["data-state"],
+        })
+
+        return () => observer.disconnect()
+    }, [updateTooltipLabel])
+
+    if (indicator === "none") return null
+
+    const indicatorNode = indicator === "plus"
+        ? (
+            <Icon
+                icon={Plus}
+                size="sm"
+                className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-45"
+            />
+        )
+        : (
+            <Icon
+                icon={ChevronDown}
+                size="sm"
+                className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180"
+            />
+        )
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <span
+                    ref={indicatorRef}
+                    className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm"
+                    onFocus={updateTooltipLabel}
+                    onMouseEnter={updateTooltipLabel}
+                >
+                    {indicatorNode}
+                </span>
+            </TooltipTrigger>
+            <TooltipContent>{tooltipLabel}</TooltipContent>
+        </Tooltip>
+    )
+}
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    AccordionTriggerProps
+>(({ className, children, indicator = "chevron", openLabel = "Open", closeLabel = "Close", ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                "group flex flex-1 items-center justify-between px-4 py-4 text-sm font-medium transition-all hover:underline disabled:cursor-not-allowed disabled:opacity-55 disabled:hover:no-underline [&[data-state=open]>svg]:rotate-180",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <AccordionTriggerIndicator
+                indicator={indicator}
+                openLabel={openLabel}
+                closeLabel={closeLabel}
+            />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className={cn(
+            "overflow-hidden text-sm text-muted-foreground transition-all",
+            contentStateClasses[accordionDefaultVariantKey],
+            contentStateClasses[expandedAccordionVariantKey]
+        )}
+        {...props}
+    >
+        <div className={cn("px-4 pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }