@k8ordo/ui 1.0.0

package/docs/references/spatial-design.md

@@ -0,0 +1,137 @@
+# スペーシング・レイアウト
+
+k8ordo UI は「余白で語る」デザイン。詰め込まず、空間にゆとりを持たせる。
+
+## スペーシングの原則
+
+4pt ベースのスペーシングシステム。Tailwind の標準スケールを使用。
+
+### コンポーネント内部パディング
+
+| 用途           | クラス | 値   |
+| -------------- | ------ | ---- |
+| コンパクト     | `p-4`  | 16px |
+| 標準           | `p-6`  | 24px |
+| ゆったり       | `p-8`  | 32px |
+| 大きなカード内 | `p-10` | 40px |
+
+### テキスト間の余白
+
+| 関係性         | クラス  | 用途                         |
+| -------------- | ------- | ---------------------------- |
+| 近い要素       | `mt-2`  | 説明テキスト、ヘルプテキスト |
+| 標準           | `mt-4`  | 段落間、フォームフィールド間 |
+| セクション間   | `mt-8`  | セクション区切り             |
+| 大セクション間 | `mt-12` | ページレベルの区切り         |
+
+### セクション間の余白
+
+| 関係性       | クラス              | 用途                       |
+| ------------ | ------------------- | -------------------------- |
+| カード間     | `gap-6`             | 横並びカード（グリッド内） |
+| セクション間 | `gap-8` 〜 `gap-10` | 縦に並ぶセクション         |
+
+## 角丸
+
+**「触れるものは柔らかく、読むものは端正に」**
+
+要素の性格に応じて角丸を使い分ける。
+
+### 触れるもの（柔らかく）
+
+| 用途                          | クラス         | 値     |
+| ----------------------------- | -------------- | ------ |
+| Button                        | `rounded-full` | ピル型 |
+| Input, Textarea, Select       | `rounded-xl`   | 1rem   |
+| Card, CheckboxCard, RadioCard | `rounded-xl`   | 1rem   |
+
+### 読むもの（端正に）
+
+| 用途     | クラス         | 値                           |
+| -------- | -------------- | ---------------------------- |
+| Alert    | `rounded-lg`   | 0.75rem                      |
+| Badge    | `rounded-full` | ピル型（小さいので問題ない） |
+| Tabs     | 現行のまま     |                              |
+| Checkbox | `rounded-md`   | 0.5rem                       |
+
+### その他
+
+| 用途                               | クラス         |
+| ---------------------------------- | -------------- |
+| Dialog, Modal                      | `rounded-lg`   |
+| Avatar, IconButton, プログレスバー | `rounded-full` |
+
+## シャドウ
+
+ふんわり柔らかい影で奥行きを表現する。
+
+| 用途                     | スタイル                                                |
+| ------------------------ | ------------------------------------------------------- |
+| Card（デフォルト）       | `shadow-sm`（appearance="shadow" 時）                   |
+| Card（ボーダー）         | `border border-border-mute`（appearance="bordered" 時） |
+| Modal / Dialog / Tooltip | `shadow-md`                                             |
+| Dropdown / ListBox       | `shadow-md`                                             |
+| Button                   | なし                                                    |
+
+`shadow-xl` 以上は使わない。
+
+## ページ構造
+
+### bg-subtle + 白カードの基本パターン
+
+ページ背景を `bg-bg-subtle`（薄いグレー）にし、コンテンツを白いカードで浮かせる。
+
+```tsx
+// Good: 灰色背景に白カードが浮く
+<div className="bg-bg-subtle min-h-screen">
+  <Card appearance="shadow">
+    <div className="p-8">コンテンツ</div>
+  </Card>
+</div>
+```
+
+### 余白で階層を作る
+
+```tsx
+// Good: 余白の差で関連度を示す
+<section className="mt-12">
+  <Heading level="h2">セクション</Heading>
+  <p className="mt-2">直接関連する説明</p>
+  <div className="mt-8">やや離れたコンテンツ</div>
+</section>
+
+// Bad: すべて同じ余白
+<section className="mt-4">
+  <Heading level="h2">セクション</Heading>
+  <p className="mt-4">説明</p>
+  <div className="mt-4">コンテンツ</div>
+</section>
+```
+
+### カードは万能ではない
+
+すべてのコンテンツをカードに入れる必要はない。余白とセパレーターで十分なケースが多い。
+
+```tsx
+import { Separator } from '@k8ordo/ui';
+
+// Good: セパレーターで区切る
+<div>
+  <section>コンテンツA</section>
+  <div className="py-8">
+    <Separator />
+  </div>
+  <section>コンテンツB</section>
+</div>
+
+// 過剰: すべてカードに入れる
+<Card>コンテンツA</Card>
+<Card>コンテンツB</Card>
+```
+
+## やってはいけないこと
+
+- `gap-1` や `p-1` のような極端に狭いスペーシング
+- コンテンツの詰め込み（情報密度より余白を優先）
+- ネストされたカード（Card in Card）
+- 12 を超える z-index 値

package/docs/references/typography.md

@@ -0,0 +1,110 @@
+# タイポグラフィ
+
+k8ordo UI のタイポグラフィは「読みやすさ」と「静けさ」を両立する。
+
+## フォントファミリー
+
+日本語最適化のフォントスタック。
+
+```css
+font-family: 'Noto Sans JP', 'M PLUS 2', sans-serif;
+```
+
+- **Inter / Roboto / Open Sans は使わない** — AI が生成した感が出る
+- 日本語テキストが主体のため、和文フォントを優先
+
+## フォントサイズスケール
+
+| Tailwind クラス  | 値       | 用途                 |
+| ---------------- | -------- | -------------------- |
+| `text-xs`        | 0.75rem  | 注釈、キャプション   |
+| `text-sm`        | 0.875rem | 補足テキスト、ラベル |
+| `text-md`        | 1rem     | 本文（デフォルト）   |
+| `text-lg`        | 1.125rem | 小見出し             |
+| `text-xl`        | 1.25rem  | 見出し               |
+| `text-2xl`       | 1.5rem   | 大見出し             |
+| `text-3xl`       | 1.875rem | ページタイトル       |
+| `text-emphasize` | 3rem     | 強調表示             |
+| `text-highlight` | 6rem     | ハイライト表示       |
+
+## フォントウェイト
+
+ウェイトは控えめに使う。太字の多用は「静けさ」を損なう。
+
+| Tailwind クラス | 値  | 用途                         |
+| --------------- | --- | ---------------------------- |
+| `font-normal`   | 400 | 本文                         |
+| `font-medium`   | 450 | 強調テキスト（控えめな強調） |
+| `font-bold`     | 700 | 見出し、ボタンラベル         |
+
+- `font-semibold` (600) や `font-extrabold` (800) は使わない
+- `font-medium` が 450 であることに注意（一般的な 500 より軽い）
+
+## 行間
+
+日本語テキストは欧文より広い行間が必要。
+
+| Tailwind クラス   | 値    | 用途                     |
+| ----------------- | ----- | ------------------------ |
+| `leading-none`    | 1     | 特殊用途（highlight 等） |
+| `leading-tight`   | 1.25  | 見出し                   |
+| `leading-snug`    | 1.375 | 小見出し                 |
+| `leading-normal`  | 1.5   | リスト内、デフォルト     |
+| `leading-relaxed` | 1.625 | 本文（推奨）             |
+| `leading-loose`   | 2     | 広い行間が必要な場合     |
+
+## 字間
+
+| Tailwind クラス   | 値      | 用途             |
+| ----------------- | ------- | ---------------- |
+| `tracking-none`   | 0em     | デフォルト       |
+| `tracking-normal` | 0.025em | 少し広げたい場合 |
+
+## Heading コンポーネント
+
+見出しには `Heading` コンポーネントを使う。
+
+```tsx
+import { Heading } from '@k8ordo/ui';
+
+<Heading level="h1">ページタイトル</Heading>
+<Heading level="h2">セクション見出し</Heading>
+<Heading level="h3">サブセクション</Heading>
+```
+
+## 縦書きモード
+
+縦書き表示には専用のユーティリティと variant を用意している。
+
+### ユーティリティ
+
+| Tailwind クラス | 用途                                                                                                        |
+| --------------- | ----------------------------------------------------------------------------------------------------------- |
+| `writing-h`     | 横書き (`writing-mode: horizontal-tb`) に戻す。縦書きツリー内の図表・コードブロック・置換要素などで使う。   |
+| `writing-v`     | 縦書き (`writing-mode: vertical-rl`) を適用し、`text-orientation: mixed` などの推奨初期値も一括で設定する。 |
+
+### `vertical:` variant
+
+`.writing-v` 子孫で活性化し、`.writing-h` 子孫では無効化する Tailwind variant。横書きデフォルトに対する上書きを宣言的に書ける。
+
+```tsx
+<div className="writing-v">
+  <p className="my-4 vertical:my-0">
+    {/* 横書き時のみ縦マージン、縦書きでは外す */}
+  </p>
+</div>
+```
+
+### 注意点
+
+- 画像・iframe などの置換要素は `vertical-rl` で大きさが想定通りにならないことがある。`<img className="vertical:writing-h" />` のように要素自体は横書きに戻す。
+- `-webkit-line-clamp` (`line-clamp-*`) は Safari で `writing-mode` と干渉する。縦書きでは `block-size` 上限 + `overflow: hidden` に置き換える。
+- KaTeX など内部で水平レイアウトを前提とするライブラリは、必要箇所だけ `writing-h` を上書きする。
+
+## やってはいけないこと
+
+- 3種類以上のフォントウェイトを1画面で使う
+- `text-3xl` より大きいサイズを通常テキストに使う（`text-emphasize` / `text-highlight` は特殊用途）
+- `uppercase` や `tracking-widest` を日本語テキストに適用する
+- テキストにグラデーションをかける
+- フォントサイズだけで階層を作る（余白も活用する）

package/package.json

@@ -0,0 +1,197 @@
+{
+  "name": "@k8ordo/ui",
+  "version": "1.0.0",
+  "description": "k8o's React UI library with built-in generative UI adapters (json-render & OpenUI) for LLM-driven, on-brand interfaces",
+  "keywords": [
+    "ai",
+    "components",
+    "design-system",
+    "generative-ui",
+    "json-render",
+    "k8o",
+    "llm",
+    "openui",
+    "react",
+    "typescript",
+    "ui"
+  ],
+  "homepage": "https://ordo.k8o.me",
+  "bugs": {
+    "url": "https://github.com/k35o/k8ordo/issues"
+  },
+  "license": "MIT",
+  "author": "k8o <kosakanoki@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/k35o/k8ordo.git"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "dist/**",
+    "docs/**"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./tokens": {
+      "types": "./dist/styles/tokens.d.mts",
+      "default": "./dist/styles/tokens.mjs"
+    },
+    "./props.json": "./docs/props.generated.json",
+    "./json-render": {
+      "types": "./dist/integrations/json-render/catalog.d.mts",
+      "default": "./dist/integrations/json-render/catalog.mjs"
+    },
+    "./json-render/registry": {
+      "types": "./dist/integrations/json-render/registry.d.mts",
+      "default": "./dist/integrations/json-render/registry.mjs"
+    },
+    "./openui": {
+      "types": "./dist/integrations/openui/library.d.mts",
+      "default": "./dist/integrations/openui/library.mjs"
+    },
+    "./openui/prompt": {
+      "types": "./dist/integrations/openui/prompt.d.mts",
+      "default": "./dist/integrations/openui/prompt.mjs"
+    },
+    "./ai": {
+      "types": "./dist/components/ai/index.d.mts",
+      "default": "./dist/components/ai/index.mjs"
+    },
+    "./ai/response": {
+      "types": "./dist/components/ai/response/index.d.mts",
+      "default": "./dist/components/ai/response/index.mjs"
+    },
+    "./ai-sdk": {
+      "types": "./dist/integrations/ai-sdk/index.d.mts",
+      "default": "./dist/integrations/ai-sdk/index.mjs"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.mts",
+      "default": "./dist/i18n/index.mjs"
+    },
+    "./styles.css": "./dist/styles/index.css",
+    "./tailwind.css": "./dist/styles/tailwind.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "vp pack && pnpm build:css",
+    "build:css": "node scripts/build-css.ts",
+    "generate:tokens": "tailwind-token-extractor src/styles/index.css -o src/styles/tokens.generated.ts",
+    "check:tokens": "tailwind-token-extractor check src/styles/index.css -o src/styles/tokens.generated.ts",
+    "generate:props": "node scripts/extract-props.ts && node scripts/generate-components-md.ts",
+    "check:props": "node scripts/extract-props.ts --check && node scripts/generate-components-md.ts --check",
+    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./tailwind.css",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "test:vrt": "VRT=1 vitest run --project=components",
+    "test": "vitest run",
+    "test:ui": "vitest --ui --coverage",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "check": "vp check",
+    "check:write": "vp check --fix"
+  },
+  "dependencies": {
+    "clsx": "2.1.1",
+    "lucide-react": "1.31.0",
+    "tailwind-merge": "3.6.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.5",
+    "@chromatic-com/storybook": "5.3.0",
+    "@json-render/core": "0.19.0",
+    "@json-render/react": "0.19.0",
+    "@openuidev/lang-core": "0.2.12",
+    "@openuidev/react-lang": "0.2.11",
+    "@storybook/addon-a11y": "10.5.8",
+    "@storybook/addon-docs": "10.5.8",
+    "@storybook/addon-mcp": "0.7.0",
+    "@storybook/addon-vitest": "10.5.8",
+    "@storybook/react-vite": "10.5.8",
+    "@tailwindcss/postcss": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "@vitest/browser-playwright": "4.1.10",
+    "@vitest/coverage-v8": "4.1.10",
+    "@vitest/ui": "4.1.10",
+    "ai": "7.0.65",
+    "postcss": "catalog:",
+    "publint": "0.3.23",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "storybook": "10.5.8",
+    "storybook-addon-determinism": "0.1.2",
+    "storybook-addon-mock-date": "3.1.1",
+    "storybook-addon-vrt": "0.4.0",
+    "streamdown": "2.5.0",
+    "tailwind-token-extractor": "0.2.1",
+    "tailwindcss": "catalog:",
+    "typescript": "7.0.2",
+    "vite": "catalog:",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:",
+    "vitest-browser-react": "2.2.0",
+    "zod": "4.4.3"
+  },
+  "peerDependencies": {
+    "@json-render/core": ">=0.19.0",
+    "@json-render/react": ">=0.19.0",
+    "@openuidev/lang-core": ">=0.2.10",
+    "@openuidev/react-lang": ">=0.2.9",
+    "@types/react": ">=19.2.18",
+    "@types/react-dom": ">=19.2.4",
+    "ai": ">=7.0.51",
+    "react": ">=19.2.6",
+    "react-dom": ">=19.2.6",
+    "streamdown": ">=2.5.0",
+    "tailwindcss": ">=4.3.3",
+    "typescript": ">=7.0.2",
+    "zod": ">=4.4.3"
+  },
+  "peerDependenciesMeta": {
+    "@json-render/core": {
+      "optional": true
+    },
+    "@json-render/react": {
+      "optional": true
+    },
+    "@openuidev/lang-core": {
+      "optional": true
+    },
+    "@openuidev/react-lang": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "ai": {
+      "optional": true
+    },
+    "streamdown": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
+  }
+}