@zeroman.yang/react-auto-components 0.1.0

package/docs/i18n/fr/auto-chat.md

@@ -0,0 +1,82 @@
+# AutoChat
+
+[English](../../auto-chat.md) | [简体中文](../zh-CN/auto-chat.md) | [繁體中文](../zh-TW/auto-chat.md) | [日本語](../ja/auto-chat.md) | [한국어](../ko/auto-chat.md) | [Español](../es/auto-chat.md) | **Français** | [Deutsch](../de/auto-chat.md) | [Português (Brasil)](../pt-BR/auto-chat.md) | [Русский](../ru/auto-chat.md)
+
+Une mise en page de conversation avec composeur optionnel, suivi de flux et chargement de l'historique antérieur. AutoChat n'ajoute aucune dépendance d'exécution et n'effectue aucune requête réseau, ne persiste pas les messages, n'analyse pas le Markdown, n'exécute pas la sortie d'outils et ne rend pas de HTML brut.
+
+## Utilisation
+
+```tsx
+import { useState } from "react";
+import { AutoChat, type AutoChatMessage } from "@zeroman.yang/react-auto-components";
+import "@zeroman.yang/react-auto-components/style.css";
+
+export function Conversation() {
+  const [messages, setMessages] = useState<AutoChatMessage[]>([]);
+  return (
+    <AutoChat
+      height={600}
+      messages={messages}
+      onSend={async (text) => {
+        setMessages((current) => [
+          ...current,
+          { id: crypto.randomUUID(), role: "user", content: text },
+        ]);
+        // Appelez ici votre service et mettez à jour messages.
+      }}
+    />
+  );
+}
+```
+
+## Fournissez votre propre rendu
+
+Transmettez des nœuds React via `content`, ou étendez `AutoChatMessage` avec les champs de votre application et fournissez `renderMessage(message, { index })`. Connectez-y un rendu Markdown existant, une visionneuse de code, une carte de pièces jointes ou un composant de résultat d'outil. AutoChat n'interprète jamais ces formats ; une simple chaîne est rendue comme texte. Le rendu hôte contrôle les liens, le HTML et tout contenu interactif.
+
+Chaque message possède un `id` unique et stable et un `role` : `user`, `assistant`, `system`, `tool` ou `error`. Les champs optionnels `author`, `avatar`, `meta` et `streaming` personnalisent son habillage ; `renderActions(message, context)` fournit des actions par message. Conservez le même ID lors de la mise à jour d'une réponse en flux et remplacez le tableau de messages de façon immuable.
+
+## Comportement et props
+
+| Prop | Comportement |
+| --- | --- |
+| `height` | Hauteur CSS, par défaut `100%`. Donnez au parent une hauteur définie ou passez un nombre tel que `600`. L'historique défile à l'intérieur du composant. |
+| `autoFollow` | Par défaut `true`. Suit le nouveau contenu et les redimensionnements en bas ; se met en pause quand le lecteur remonte. **Revenir au plus récent** relance le suivi. |
+| `hasMore`, `onLoadOlder`, `loadingOlder` | Affichent un bouton d'historique antérieur. Préfixe les messages avec des IDs stables ; le message visible reste ancré. Les requêtes sont dédupliquées et une requête rejetée peut être relancée. |
+| `onSend(text)` | Active le composeur. Reçoit le texte original non vide ; peut renvoyer une promesse. Accepter vide ce brouillon ; rejeter le conserve et affiche une erreur générique. Un brouillon plus récent n'est jamais vidé par un envoi plus ancien. |
+| `value`, `defaultValue`, `onValueChange` | Valeur de composeur contrôlée ou locale. Avec une valeur contrôlée, appliquez les changements dans l'hôte. |
+| `generating`, `onStop` | Désactive les envois pendant la génération et expose un bouton d'arrêt. L'hôte doit annuler son propre flux/requête et mettre à jour `generating`. |
+| `sendOnEnter` | Par défaut `true` ; Shift+Entrée insère un saut de ligne. Les événements de composition et la validation IME ne soumettent jamais. Mettre à `false` pour n'envoyer que par bouton. |
+| `disabled`, `composer` | Désactive l'éditeur intégré ou le masque (`composer={false}`) avec un éditeur externe. |
+| `conversationKey` | Réinitialise brouillon local, UI en cours et défilement au changement de conversation. Les valeurs contrôlées et l'annulation restent gérées par l'hôte. |
+| `header`, `footer`, `empty`, `composerExtra` | Emplacements de contenu React. |
+| `size`, `density` | Remplacent les réglages globaux d'`AutoConfigProvider`. |
+| `labels` | Remplacent les libellés anglais intégrés. Le provider traduit aussi `chat.send`, `chat.latest` et les autres clés `chat.*`. |
+| `onSendError`, `onLoadError` | Reçoivent l'erreur originale pour la journalisation applicative ; les détails d'erreur internes ne sont pas affichés automatiquement. |
+
+Pour les grands historiques, activez `virtual` afin d'utiliser la dépendance TanStack Virtual déjà présente. Seuls les messages visibles et une petite fenêtre d'overscan sont montés ; les hauteurs dynamiques sont mesurées. Ajustez si besoin `estimatedMessageHeight` (par défaut `120`) et `overscan` (par défaut `6`). Conservez des IDs stables en préfixant l'historique. En mode virtuel, gardez dans l'hôte tout état interactif devant survivre au démontage des lignes hors viewport. Les conversations ordinaires utilisent par défaut la mise en page non virtuelle.
+
+La démo **Grand historique** charge 1 000, 10 000 ou 50 000 messages à hauteur variable, indique le nombre réel de messages montés et prend en charge l'ajout de 100 messages, le flux, le chargement d'historique antérieur et le saut vers l'une ou l'autre extrémité.
+
+Le ref `AutoChatHandle` expose `scrollToBottom()`, `scrollToMessage(id)` (renvoie l'existence de l'ID), `focusComposer()` et `getScrollElement()`. L'historique utilise un journal focalisable au clavier ; une région de statut séparée annonce l'état d'envoi/génération sans annoncer chaque token du flux.
+
+Voir [la démo exécutable](../../../test-project/src/examples/ChatDemo.tsx) pour une simulation locale de flux, l'annulation, une carte d'outil personnalisée, la pagination, les échecs d'envoi et une interface en dix langues.
+
+## Rendu riche dans la démo
+
+Le `test-project` privé installe [react-markdown](https://github.com/remarkjs/react-markdown) et [remark-gfm](https://github.com/remarkjs/remark-gfm). Ces dépendances ne font pas partie de la bibliothèque de composants. Son sélecteur de formats insère du Markdown (titres, emphase, listes de tâches et tableaux GFM), du code, du JSON, des tableaux de données, une image locale ou une carte React interactive d'évaluation.
+
+`ChatRenderers.tsx` choisit des composants React à partir de données de message structurées. `ChatTaskCard.tsx` illustre un état interactif local. Markdown utilise `skipHtml` et la gestion des URLs par défaut de la bibliothèque ; il ne compile pas de JSX ni n'exécute de blocs de code. Le même rendu Markdown affiche les réponses en flux. Les composants personnalisés sont fournis par l'application, jamais instanciés depuis du texte de message exécutable.
+
+```tsx
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+<AutoChat
+  messages={messages}
+  renderMessage={(message) => (
+    <Markdown remarkPlugins={[remarkGfm]} skipHtml>
+      {String(message.content ?? "")}
+    </Markdown>
+  )}
+/>
+```

package/docs/i18n/fr/migration.md

@@ -0,0 +1,71 @@
+# Guide d'intégration des composants
+
+[English](../../migration.md) | [简体中文](../zh-CN/migration.md) | [繁體中文](../zh-TW/migration.md) | [日本語](../ja/migration.md) | [한국어](../ko/migration.md) | [Español](../es/migration.md) | **Français** | [Deutsch](../de/migration.md) | [Português (Brasil)](../pt-BR/migration.md) | [Русский](../ru/migration.md)
+
+Configurez les composants via les génériques React, les callbacks et les providers. Le tableau suivant associe les besoins applicatifs courants aux API publiques et aux exemples exécutables.
+
+| Cas d’utilisation d’origine | API React | Exemple exécutable / test |
+| --- | --- | --- |
+| Champs de formulaire et v-model | `fields: Field<T>[]`, `value/onChange` ou `defaultValue` | Page des formulaires dans `test-project/src/examples/FormDemo.tsx` ; `tests/form*.test.tsx` |
+| Slots et contenu ajouté | `render` du champ, `render/header` de la colonne, ReactNode | Pages des formulaires/tableaux |
+| Opérations sur l’instance du formulaire | `ref.validate/reset/getValues/setValue/focus` | `tests/form.test.tsx` |
+| Recherche, conditions liées, RSQL | `buildQuery`, `matchesQuery`, `serializeRsql` | Page de recherche ; `tests/query.test.ts` |
+| Données de tableau locales/distantes | Soit `data`, soit `dataSource(query,{signal})` | Page des tableaux ; `tests/table.test.tsx` |
+| Préréglages de disposition/filtrage/tri/exportation | Préréglages indépendants dans la boîte de dialogue des paramètres, invalidés séparément par `versions` | Page des tableaux ; `tests/table-settings.test.ts` |
+| Arbres, détails, synthèses, cellules fusionnées | `getChildren/renderExpanded`, `summary/merge` de la colonne | Exemples d’arbres et de dépliage ; `tests/table-advanced.test.tsx` |
+| Ajout, modification, suppression | `formFields` et `onAdd/onEdit/onDelete` | Tests CRUD dans le navigateur |
+| Boîtes de dialogue impératives | `AutoDialogProvider` + `useAutoDialog().open()` | Page des boîtes de dialogue ; `tests/dialog.test.tsx` |
+| Onglets et onglets imbriqués | Éléments d’`AutoTabs`, value/onChange, keepMounted | Page des onglets ; `tests/tabs.test.tsx` |
+| Listes de messages de chat et interface de conversation | `AutoChat`, `messages`, `onSend`, `renderMessage` | Pages de chat dans `test-project/src/examples/Chat*.tsx` ; `tests/chat.test.tsx` |
+
+## Types de champ
+
+`input/email/textarea/integer/float/percentage/progress/switch/select/select-v2/radio/checkbox/cascader/autocomplete/date/datetime/daterange/datetimerange/upload/text/title/tip/button/append/custom`.
+
+`select-v2` virtualise les options. Les plages de dates utilisent deux champs natifs avec des libellés distincts ; `dateValue` choisit entre chaînes de caractères et horodatages. Les champs numériques autorisent les états intermédiaires de saisie ; utilisez les règles des champs pour valider les contraintes métier lors de l’envoi. `rules` prend en charge la validation asynchrone, tandis que les champs masqués ne sont pas validés. Les options conservent les valeurs numériques/booléennes au lieu de les convertir en chaînes.
+
+```tsx
+const fields: Field<User>[] = [
+  { name: 'name', label: 'Nom', required: true },
+  { name: 'note', label: 'Remarque', hidden: values => !values.enabled,
+    render: ({ value, onChange, disabled }) =>
+      <textarea disabled={disabled} value={String(value ?? '')}
+        onChange={event => onChange(event.target.value)} /> },
+];
+```
+
+Consultez les types TypeScript exportés pour connaître l’API complète. `Field<T>` est lié aux clés réelles de T ; les éléments structurels comme les titres et les conseils n’ont pas besoin de propriété de données.
+
+## Sources de données côté serveur
+
+```tsx
+const dataSource: DataSource<User> = async (query, { signal }) => {
+  const response = await fetch('/api/users/search', {
+    method: 'POST', signal,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(query),
+  });
+  if (!response.ok) throw new Error('Échec du chargement');
+  return response.json(); // { rows: User[], total: number }
+};
+```
+
+Les indices de page commencent à 0. `sort` est un tableau ordonné de champs ; `filter` est un arbre de requête structuré. Les composants annulent les anciennes requêtes et empêchent les réponses tardives d’écraser des requêtes plus récentes. Appelez `ref.refresh()` sur le tableau lorsque des conditions métier extérieures à la fermeture de la source de données changent. Gardez la fonction de source de données stable pour éviter des requêtes inutiles. La sérialisation RSQL est uniquement un adaptateur pour les serveurs qui l’exigent ; elle n’exécute pas de chaînes de requête.
+
+## Téléversements et persistance de l’application
+
+La méthode `upload(files, signal)` d’un champ renvoie la valeur du champ après l’enregistrement des fichiers par l’application. Le composant affiche les échecs de téléversement ; les appelants fournissent les URL de téléversement, l’authentification et les politiques de stockage d’objets.
+
+```tsx
+<AutoConfigProvider config={{
+  namespace: 'tenant-admin',
+  canAccess: access => !access.permissions?.length || access.permissions.every(p => myPermissions.includes(p)),
+  settings: {
+    load: key => api.loadTableSettings(key),
+    save: (key, settings) => api.saveTableSettings(key, settings),
+  },
+  notify: (message, level) => showToast(message, level),
+}}>{children}</AutoConfigProvider>
+```
+
+Les modifications locales s'appliquent immédiatement ; les sauvegardes distantes s'exécutent en série, avec une option de réessai après un échec. Lors d'un changement de format des paramètres persistés, utilisez un nouvel id de table ou une nouvelle version pour éviter de charger des paramètres incompatibles.

package/docs/i18n/ja/README.md

@@ -0,0 +1,203 @@
+# React Auto Components
+
+[English](../../../README.md) | [简体中文](../zh-CN/README.md) | [繁體中文](../zh-TW/README.md) | **日本語** | [한국어](../ko/README.md) | [Español](../es/README.md) | [Français](../fr/README.md) | [Deutsch](../de/README.md) | [Português (Brasil)](../pt-BR/README.md) | [Русский](../ru/README.md)
+
+React 19 向けのスタンドアローンなスキーマ駆動コンポーネントライブラリで、フォーム・テーブル・チャットをカバーします。TypeScript、TanStack Table 9 / Form / Virtual、Radix、Floating UI を用いて構築されており、Ant Design、Element Plus、MUI には依存しません。ライブラリのビルドには React Compiler を使用しています。
+
+[![Auto Studio デモプレビュー](../../assets/demo.png)](https://zeroman.github.io/react-auto-components/)
+
+<p align="center">
+  <a href="https://zeroman.github.io/react-auto-components/"><strong>🚀 オンラインデモ (GitHub Pages)</strong></a> · <a href="#独立したテストプロジェクトの実行">ローカル実行</a> · <a href="#コンポーネント">コンポーネント</a>
+</p>
+
+## プロジェクトの状況
+
+現在のバージョンは 0.1.0 であり、API はまだ変更される可能性があります。React 19 が必要です。このパッケージは ESM および TypeScript 型宣言を提供します。組み込みのインターフェーステキストは既定で中国語であり、AutoConfigProvider.config.t を通じて翻訳できます。
+
+`pnpm add @zeroman.yang/react-auto-components` でインストールします（npm と yarn でも同様です）。peer dependency は React 19 と react-dom 19 です。エントリでスタイルシートを一度読み込んでください: `import "@zeroman.yang/react-auto-components/style.css"`。
+
+- [オンラインデモ (GitHub Pages)](https://zeroman.github.io/react-auto-components/)
+- [コントリビューション](https://github.com/Zeroman/react-auto-components/blob/main/docs/i18n/ja/CONTRIBUTING.md)
+- [変更履歴](https://github.com/Zeroman/react-auto-components/blob/main/docs/i18n/ja/CHANGELOG.md)
+- [アカウント設定と公開](https://github.com/Zeroman/react-auto-components/blob/main/docs/i18n/ja/publishing.md)
+- [MIT ライセンス](../../../LICENSE)
+
+## 独立したテストプロジェクトの実行
+
+Node.js >= 22.12 と pnpm 12.5 が必要です。
+
+```sh
+pnpm install --frozen-lockfile
+pnpm prepare:test-project
+pnpm --dir test-project dev
+```
+
+http://127.0.0.1:4173 を開きます。テストプロジェクトには、全 7 コンポーネントのページ、ローカル／サーバー側／10,000 行／ツリーテーブル、CRUD、送信失敗後の再試行、下書き、入れ子のタブ、可変行高の例が含まれます。
+
+デモではブラウザの言語を自動的に検出し、フォールバックとして英語を使用します。ヘッダーまたはグローバル設定から言語を選択できます。選択内容はリロード後も記憶されます。再びブラウザの言語に従うには「Auto」を選択してください。10 の言語をサポートしています。ページはビューポート全体に表示され、テーブルや長いパネルはそれぞれの領域内でスクロールします。
+
+各サンプルページには**コードを表示**ボタンがあり、ダイアログで実際のソースファイルを開きます。ファイル切り替え・ワンクリックコピー・GitHub リンクに対応します。
+
+`test-project` は独自の package.json とロックファイルを持ちます。ソースエイリアスを使用せず、`pnpm pack` の実際の出力をインストールします。ライブラリを変更した後は、`pnpm prepare:test-project` を再実行してください。このスクリプトはコンテンツハッシュ付きのファイル名を使用し、古い tarball キャッシュの利用を防ぎます。
+
+## 使用方法
+
+```tsx
+import { useState } from 'react';
+import {
+  AutoConfigProvider, AutoDialogProvider, AutoTable,
+  type AutoColumn, type Field,
+} from '@zeroman.yang/react-auto-components';
+import '@zeroman.yang/react-auto-components/style.css';
+
+type Person = { id: number; name: string; enabled: boolean };
+const columns: AutoColumn<Person>[] = [
+  { key: 'name', label: '名前', sortable: true },
+  { key: 'enabled', label: '有効', options: [
+    { label: 'はい', value: true }, { label: 'いいえ', value: false },
+  ] },
+];
+const fields: Field<Person>[] = [
+  { name: 'name', label: '名前', required: true },
+  { name: 'enabled', label: '有効', type: 'switch', defaultValue: true },
+];
+export function App() {
+  const [rows, setRows] = useState<Person[]>([]);
+  return <AutoConfigProvider config={{ namespace: 'my-app' }}>
+    <AutoDialogProvider>
+      <AutoTable<Person> id="people" rowKey="id" data={rows}
+        columns={columns} formFields={fields} searchFields={fields}
+        onAdd={value => setRows(old => [...old, { ...value, id: Date.now() }])}
+        onEdit={(row, value) => setRows(old => old.map(item => item.id === row.id ? { ...row, ...value } : item))}
+        onDelete={selected => setRows(old => old.filter(item => !selected.some(row => row.id === item.id)))}
+      />
+    </AutoDialogProvider>
+  </AutoConfigProvider>;
+}
+```
+
+フィールド、列、ref はジェネリクスを使用します。不正なフィールド名やデフォルト値はコンパイル時エラーになります。プロバイダーは名前空間、権限、フィールドラベルの翻訳、カスタムフィールド、通知、永続化アダプターをサポートします。 組み込みのラベル、バリデーションメッセージ、アクセシビリティテキストは AutoConfigProvider.config.t を使用します。明示的に指定されたコンポーネントのラベルが優先されます。
+
+t コールバックはメッセージキーとフォールバックを受け取ります。翻訳された組み込みメッセージでは、{0} や {1} のような番号付きプレースホルダーを保持してください。コンポーネントが翻訳後に値を置換します。
+
+## コンポーネント
+
+| コンポーネント | 機能 |
+| --- | --- |
+| AutoForm | ネイティブフィールド型、選択肢の仮想化、連動選択、アップロードアダプター、カスタムレンダリング、依存フィールド、条件付き表示、非同期バリデーション、制御された状態、失敗後の入力保持 |
+| AutoSearchPanel | 基本／詳細条件、手動／即時検索、リセット、ソートタグ、共有クエリ AST、RSQL シリアライズ |
+| AutoTable | ローカル／リモートデータ、複数列ソート、列フィルター、ページネーション、安定した選択状態、仮想化、ツリー／詳細の展開、集計、セル結合、CRUD、コンテキストメニュー、コピー |
+| AutoDialog | 宣言的／命令的 API、分離されたプロバイダー、下書き、閉じる操作のガード、フォーカス管理、ドラッグ、全画面表示、非同期送信 |
+| AutoTabs | 横／縦レイアウト、入れ子、権限、タブの無効化、パネル状態の保持、更新 |
+| AutoMenu | アイコン・説明・バッジ・入れ子グループ・権限に対応し、折りたたみ可能なアイコンレールを備えたサイドバーナビゲーション |
+| AutoChat | 呼び出し側によるメッセージ描画、オプションの仮想化、ストリーム追従、アンカー付き履歴読み込み、送信／停止コンポーザー、カスタムアクション |
+
+テーブルのレイアウト、ソート、フィルター、エクスポートは、それぞれ名前付きプリセットと独立したバージョンをサポートします。永続化にはデフォルトで localStorage を使用し、リモートアダプターも注入できます。JSON/CSV エクスポートは組み込みです。XLSX は任意の独立したアダプターを使用します。
+
+```tsx
+import { exportXlsx } from '@zeroman.yang/react-auto-components/xlsx';
+// <AutoTable ... exportXlsx={exportXlsx} />
+```
+
+ExcelJS はアダプターの初回使用時に動的に読み込まれ、ライブラリのメインエントリーには含まれません。CSV/JSON のみを使用するアプリケーションでは、インストール時にオプションの依存関係を省略できます。
+
+## 検証
+
+```sh
+pnpm typecheck
+pnpm test
+pnpm build
+pnpm prepare:test-project
+pnpm --dir test-project build
+pnpm exec playwright install chromium  # 初回実行のみ
+pnpm test:e2e
+```
+
+ユニットテストは、フィールド、非同期バリデーション、クエリ、ダイアログ、仮想化、テーブル、設定の移行、エクスポートをカバーします。Playwright テストはパッケージ化された公開エントリーポイント経由で操作を検証します。デスクトップ／モバイルのスクリーンショットは `test-project/test-results` に保存されます。
+
+## 動作と規約
+
+- これは React に適した API であり、Vue の各プロパティやメソッドをそのまま対応付ける互換レイヤーではありません。[移行ガイド](migration.md)を参照してください。
+- データはアプリケーションコードが管理します。CRUD コールバックで変更を永続化し、失敗時に例外を送出すると編集内容が保持されます。成功後、コンポーネントはリモートデータを再取得します。ローカルデータは呼び出し側で更新する必要があります。
+- テーブルの `id` は名前空間内で一意である必要があり、`rowKey` は全ページとツリーノードを通じて一意である必要があります。サーバー側モードでは `columns` を明示的に指定し、データソースは総件数を返します。
+- `query` / `value` を制御する場合、親はコールバックを処理して値を更新する必要があります。非制御として使用する場合、これらの props は省略できます。
+- セル結合は、仮想ウィンドウ間の rowSpan のずれを防ぐため、仮想化しないセマンティックなテーブルを使用します。ページ分割されたデータに適しています。
+- フィルター後の全行に対するサーバー側の集計は `summaryValues` で渡します。集計がない場合は、現在のページの合計を全体の合計として表示せず、`—` を表示します。現在のページを明示的に集計するには `summaryScope="page"` を設定します。
+- アップロード中は送信を一時停止します。リセット、フィールド値の置換、アンマウントは古いアップロードをキャンセルし、遅れて届いた結果が新しい値を上書きすることはありません。
+- フィルター後の全結果をリモートからエクスポートする場合、1 ページずつデータを要求します。大規模なアプリケーションでは独自のサーバー側エクスポートを実装できます。
+- ブラウザー用スタイルは `style.css` から明示的にインポートしてください。JavaScript モジュールは `window` のない Node 環境でもインポートできます。
+
+## AutoTable で残りの高さを埋める
+
+`height={440}` は引き続きデータのスクロール領域を固定の高さに設定します。`height="auto"` では、テーブル全体が親レイアウトから割り当てられた高さを埋めます。検索領域、ツールバー、ページネーションは自然な高さを取り、データ領域が残りのスペースを使用して独立にスクロールします。
+
+```tsx
+<div style={{ height: '100dvh', display: 'flex', flexDirection: 'column', gap: 12 }}>
+  <header>ページタイトルと説明</header>
+  <AutoTable<Person> id="people" rowKey="id" data={rows}
+    columns={columns} height="auto" />
+  <footer>ページフッター</footer>
+</div>
+```
+
+親には確定した高さが必要です。入れ子の flex コンテナーでは `flex: 1; min-height: 0` を使用して残りのスペースを引き継ぎ、grid レイアウトでは `grid-template-rows: auto minmax(0, 1fr) auto` を使用します。ビューポートの高さからツールバーの高さを引く JavaScript の計算は不要です。検索フィールドの追加／削除、ツールバーの折り返し、親のリサイズはレイアウトが処理し、仮想リストはスクロール領域の実際の寸法に追従します。
+
+この設定は行数に応じてテーブルのサイズを変更するものではありません。空のデータセットや少数のデータでも、利用可能なスペースを埋めます。親は少なくとも検索領域、ツールバー、ページネーション自体を収められる必要があります。
+
+テストプロジェクトの **AutoTable → 残りの高さ** タブで、サイドバーとページヘッダーを維持した例を確認できます。従来の URL `http://127.0.0.1:4173/?demo=auto-height` でもこのタブを直接選択できます。ブラウザーテストは `test-project/tests/auto-height.spec.ts` にあります。
+
+## グローバルなフォームレイアウト
+
+`AutoConfigProvider.config.form` を使用して、通常のフォーム、検索パネル、テーブルの検索領域、ダイアログのフォームを一貫して設定できます。ラベルはコントロールの上または左に配置でき、テキストの左揃え／右揃えは独立して指定できます。デフォルトは上配置のラベルとゆったりした間隔です。
+
+```tsx
+<AutoConfigProvider config={{
+  form: {
+    labelPosition: 'left', // 'top': 上; 'left': コントロールの左
+    labelAlign: 'right',   // テキストは右寄せ。ラベルはコントロールの左に配置
+    labelWidth: 80,
+    density: 'compact',   // 'comfortable': 間隔を広めに
+  },
+}}>
+  <App />
+</AutoConfigProvider>
+```
+
+入れ子のプロバイダーはレイアウト設定をプロパティごとにマージします。コンポーネントに明示した props は外側のプロバイダーより優先されます。たとえば、全体ではインラインラベルを使用しつつ、1 つのフォームだけ上配置のラベルを維持できます。
+
+```tsx
+<AutoForm fields={fields} labelPosition="top" density="comfortable" />
+<AutoTable id="people" rowKey="id" data={rows} columns={columns}
+  searchFields={searchFields}
+  searchLayout={{ labelWidth: 100, columns: 3 }} />
+```
+
+`labelWidth` のデフォルトは `"auto"` で、ピクセル数や `"6em"` などの CSS 幅も指定できます。自動モードでは各検索ラベルがテキストに合った幅になり、通常のフォームとダイアログのフォームでは表示中のラベルに基づく共通の幅でコントロールを揃えます。長いラベルの幅はフィールド幅の最大 45% となり、それを超える部分は折り返すことでコントロール用のスペースを確保します。明示した固定幅にはこの自動制限は適用されません。コンパクトな検索領域では、スペースがあれば操作ボタンを同じ行に配置し、狭い画面では折り返します。ラベルの関連付けは維持され、エラーと説明はコントロールに揃い、長いラベルは折り返せます。
+
+デモでは、サイドバーまたは右上の歯車から **グローバル設定** を開き、レイアウト、密度、ラベル幅、テーマを変更できます。変更は現在の入力を消去せず即座に反映されます。フォームページでは **グローバル設定に従う** またはローカルの上書きを選択できます。デモはプロバイダーを通じてコンパクトなインラインレイアウトを明示的に有効化しています。
+
+## グローバルなサイズと密度
+
+`AutoConfigProvider` は `size: "small" | "medium" | "large"` と `density: "compact" | "comfortable"` をサポートします。コンポーネントに明示した props がコンポーネント種別の設定より優先され、種別の設定はグローバル値より優先されます。
+
+```tsx
+<AutoConfigProvider config={{
+  size: "medium",
+  density: "compact",
+  form: { labelPosition: "left", labelAlign: "right" },
+  table: { density: "compact" },
+  tabs: { density: "compact" },
+}}>
+  <AutoForm fields={fields} size="small" />
+</AutoConfigProvider>
+```
+
+テーブルの密度は `normal` もサポートします。テーブル設定パネルはデフォルトでグローバル設定に従います。コンパクト、標準、ゆったりした間隔を選択するとグローバル密度を上書きし、レイアウトプリセットとともに保存されます。コンポーネントの `density` prop が最優先です。入れ子のコンポーネントに設定したローカルサイズはそれぞれ独立して適用されます。
+
+フォームは `resetLabel`、`extraActions`、`onReset` を、検索パネルは `searchLabel`、`resetLabel`、`extraActions` を、ダイアログは `cancelLabel`、`extraActions` をサポートします。`AutoTabs` の項目では `badge` を定義でき、`AutoTable.empty` で空の状態の内容をカスタマイズできます。
+
+### AutoChat
+
+AutoChat は、ストリーミング追従、履歴の読み込み、コンポーザーを備えた軽量な会話レイアウトを提供します。メッセージの表示には React コンテンツか renderMessage を指定でき、追加のランタイム依存関係は不要です。
+
+[AutoChat API](auto-chat.md)

package/docs/i18n/ja/auto-chat.md

@@ -0,0 +1,82 @@
+# AutoChat
+
+[English](../../auto-chat.md) | [简体中文](../zh-CN/auto-chat.md) | [繁體中文](../zh-TW/auto-chat.md) | **日本語** | [한국어](../ko/auto-chat.md) | [Español](../es/auto-chat.md) | [Français](../fr/auto-chat.md) | [Deutsch](../de/auto-chat.md) | [Português (Brasil)](../pt-BR/auto-chat.md) | [Русский](../ru/auto-chat.md)
+
+オプションのコンポーザー、ストリーム追従、過去履歴の読み込みを持つ会話レイアウトです。AutoChat はランタイム依存を追加せず、ネットワークリクエスト、メッセージの永続化、Markdown 解析、ツール出力の実行、生 HTML の描画も行いません。
+
+## 使用方法
+
+```tsx
+import { useState } from "react";
+import { AutoChat, type AutoChatMessage } from "@zeroman.yang/react-auto-components";
+import "@zeroman.yang/react-auto-components/style.css";
+
+export function Conversation() {
+  const [messages, setMessages] = useState<AutoChatMessage[]>([]);
+  return (
+    <AutoChat
+      height={600}
+      messages={messages}
+      onSend={async (text) => {
+        setMessages((current) => [
+          ...current,
+          { id: crypto.randomUUID(), role: "user", content: text },
+        ]);
+        // ここでサービスを呼び出し、messages を更新します。
+      }}
+    />
+  );
+}
+```
+
+## レンダラーは自分で用意
+
+React ノードを `content` として渡すか、アプリ側のフィールドで `AutoChatMessage` を拡張し `renderMessage(message, { index })` を指定します。既存の Markdown レンダラー、コードビューア、添付カード、ツール結果コンポーネントをここで接続します。AutoChat はそれらの形式を解釈せず、通常の文字列はテキストとして描画します。リンク、HTML、対話コンテンツの制御はホスト側にあります。
+
+各メッセージは安定した一意の `id` と `role`（`user`、`assistant`、`system`、`tool`、`error`）を持ちます。任意の `author`、`avatar`、`meta`、`streaming` で外観を調整できます。`renderActions(message, context)` はメッセージ操作を提供します。ストリーム返信の更新では同じ ID を維持し、messages 配列は不変に置き換えてください。
+
+## 挙動と props
+
+| Prop | 挙動 |
+| --- | --- |
+| `height` | CSS の高さ。既定 `100%`。親に確定した高さを与えるか、`600` などの数値を渡します。履歴はコンポーネント内でスクロールします。 |
+| `autoFollow` | 既定 `true`。下部の新規・リサイズコンテンツに追従し、読者が上へスクロールすると一時停止します。**最新へ戻る** で追従を再開します。 |
+| `hasMore`, `onLoadOlder`, `loadingOlder` | 過去履歴ボタンを表示します。安定した ID でメッセージを先頭に追加し、可視メッセージはアンカーされます。リクエストは重複排除され、失敗時は再試行できます。 |
+| `onSend(text)` | コンポーザーを有効化します。元の空でないテキストを受け取り、Promise を返せます。受理すると下書きを消去し、拒否すると保持して汎用エラーを表示します。新しい下書きが古い送信によって消去されることはありません。 |
+| `value`, `defaultValue`, `onValueChange` | 制御またはローカルの入力値。制御値の場合、変更はホストで適用します。 |
+| `generating`, `onStop` | 生成中は送信を無効化し停止ボタンを表示します。ホストは自身のストリーム/リクエストをキャンセルし `generating` を更新する必要があります。 |
+| `sendOnEnter` | 既定 `true`。Shift+Enter で改行します。IME の変換確定では送信されません。`false` でボタンのみ送信します。 |
+| `disabled`, `composer` | 内蔵エディターを無効化、または外部エディター利用時に非表示（`composer={false}`）にします。 |
+| `conversationKey` | 会話切替時にローカル下書き、進行中 UI、スクロールをリセットします。制御値とキャンセルはホスト管理のままです。 |
+| `header`, `footer`, `empty`, `composerExtra` | React コンテンツスロット。 |
+| `size`, `density` | グローバルな `AutoConfigProvider` 設定を上書きします。 |
+| `labels` | 内蔵英語ラベルを上書きします。Provider は `chat.send` や `chat.latest` などの `chat.*` キーも翻訳します。 |
+| `onSendError`, `onLoadError` | 元のエラーを受け取りアプリのロギングに利用できます。内部エラーの詳細は自動表示されません。 |
+
+大規模な履歴では `virtual` を設定し、パッケージ既存の TanStack Virtual 依存を利用します。マウントされるのは可視メッセージと小さな overscan ウィンドウだけで、動的な行高も計測されます。必要に応じて `estimatedMessageHeight`（既定 `120`）と `overscan`（既定 `6`）を調整してください。履歴を先頭に追加する際はメッセージ ID を安定させます。仮想モードでビューポート外のアンマウントをまたぐ対話状態はホスト側に保持してください。通常の会話は既定で非仮想レイアウトです。
+
+**大規模履歴** デモは 1,000／10,000／50,000 件の可変高メッセージを読み込み、実際のマウント件数を表示し、100 件追加、ストリーミング、過去履歴の読み込み、両端へのジャンプに対応します。
+
+`AutoChatHandle` の ref は `scrollToBottom()`、`scrollToMessage(id)`（ID の存在を返す）、`focusComposer()`、`getScrollElement()` を公開します。履歴はキーボードでフォーカス可能なログであり、送信/生成状態は独立したステータス領域が通知し、ストリームのトークンごとには読み上げません。
+
+ローカルのストリーム模倣、キャンセル、カスタムツールカード、ページング、送信失敗、10 言語 UI は[実行可能なデモ](../../../test-project/src/examples/ChatDemo.tsx)を参照してください。
+
+## デモでのリッチな描画
+
+私有の `test-project` は [react-markdown](https://github.com/remarkjs/react-markdown) と [remark-gfm](https://github.com/remarkjs/remark-gfm) をインストールしています。これらはコンポーネントライブラリには含まれません。フォーマット選択は Markdown（見出し、強調、タスクリスト、GFM 表）、コード、JSON、データ表、ローカル画像、対話型 React レビューカードを挿入できます。
+
+`ChatRenderers.tsx` は構造化されたメッセージデータから React コンポーネントを選択します。`ChatTaskCard.tsx` はローカルな対話状態の例です。Markdown は `skipHtml` とライブラリ既定の URL 処理を利用し、JSX のコンパイルやコードフェンスの実行は行いません。同じ Markdown レンダラーでストリーム返信も表示します。カスタムコンポーネントはアプリが提供し、実行可能なメッセージテキストから生成されることはありません。
+
+```tsx
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+<AutoChat
+  messages={messages}
+  renderMessage={(message) => (
+    <Markdown remarkPlugins={[remarkGfm]} skipHtml>
+      {String(message.content ?? "")}
+    </Markdown>
+  )}
+/>
+```

package/docs/i18n/ja/migration.md

@@ -0,0 +1,71 @@
+# コンポーネント統合ガイド
+
+[English](../../migration.md) | [简体中文](../zh-CN/migration.md) | [繁體中文](../zh-TW/migration.md) | **日本語** | [한국어](../ko/migration.md) | [Español](../es/migration.md) | [Français](../fr/migration.md) | [Deutsch](../de/migration.md) | [Português (Brasil)](../pt-BR/migration.md) | [Русский](../ru/migration.md)
+
+React のジェネリクス、コールバック、プロバイダを通じてコンポーネントを設定します。次の表は、よくあるアプリケーションのニーズと公開 API および実行可能な例との対応を示したものです。
+
+| 元のユースケース | React API | 実行可能な例／テスト |
+| --- | --- | --- |
+| フォームフィールドと v-model | `fields: Field<T>[]`、`value/onChange`、または `defaultValue` | `test-project/src/examples/FormDemo.tsx` のフォームページ；`tests/form*.test.tsx` |
+| スロットと追加コンテンツ | フィールドの `render`、列の `render/header`、ReactNode | フォーム／テーブルページ |
+| フォームインスタンスの操作 | `ref.validate/reset/getValues/setValue/focus` | `tests/form.test.tsx` |
+| 検索、関連条件、RSQL | `buildQuery`、`matchesQuery`、`serializeRsql` | 検索ページ；`tests/query.test.ts` |
+| ローカル／リモートのテーブルデータ | `data` または `dataSource(query,{signal})` | テーブルページ；`tests/table.test.tsx` |
+| レイアウト／フィルター／ソート／エクスポートのプリセット | 設定ダイアログ内の独立したプリセット。`versions` によって個別に無効化 | テーブルページ；`tests/table-settings.test.ts` |
+| ツリー、詳細、集計、セル結合 | `getChildren/renderExpanded`、列の `summary/merge` | ツリーと展開の例；`tests/table-advanced.test.tsx` |
+| 追加、編集、削除 | `formFields` と `onAdd/onEdit/onDelete` | ブラウザーの CRUD テスト |
+| 命令的ダイアログ | `AutoDialogProvider` + `useAutoDialog().open()` | ダイアログページ；`tests/dialog.test.tsx` |
+| タブと入れ子のタブ | `AutoTabs` の items、value/onChange、keepMounted | タブページ；`tests/tabs.test.tsx` |
+| チャットメッセージリストと会話 UI | `AutoChat`、`messages`、`onSend`、`renderMessage` | `test-project/src/examples/Chat*.tsx` のチャットページ; `tests/chat.test.tsx` |
+
+## フィールド型
+
+`input/email/textarea/integer/float/percentage/progress/switch/select/select-v2/radio/checkbox/cascader/autocomplete/date/datetime/daterange/datetimerange/upload/text/title/tip/button/append/custom`。
+
+`select-v2` は選択肢を仮想化します。日付範囲は個別のラベルを持つ 2 つのネイティブ入力を使用し、`dateValue` で文字列またはタイムスタンプを選択します。数値入力は編集中の中間状態を許容します。送信時のビジネス上の制約はフィールドルールで検証してください。`rules` は非同期バリデーションをサポートし、非表示のフィールドは検証をスキップします。選択肢は数値／真偽値を文字列に変換せず保持します。
+
+```tsx
+const fields: Field<User>[] = [
+  { name: 'name', label: '名前', required: true },
+  { name: 'note', label: '備考', hidden: values => !values.enabled,
+    render: ({ value, onChange, disabled }) =>
+      <textarea disabled={disabled} value={String(value ?? '')}
+        onChange={event => onChange(event.target.value)} /> },
+];
+```
+
+完全な API はエクスポートされる TypeScript 型を参照してください。`Field<T>` は T の実際のキーに結び付きます。タイトルやヒントなどの構造的な項目にはデータプロパティは不要です。
+
+## サーバー側のデータソース
+
+```tsx
+const dataSource: DataSource<User> = async (query, { signal }) => {
+  const response = await fetch('/api/users/search', {
+    method: 'POST', signal,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(query),
+  });
+  if (!response.ok) throw new Error('読み込みに失敗しました');
+  return response.json(); // { rows: User[], total: number }
+};
+```
+
+ページインデックスは 0 から始まります。`sort` は順序付きのフィールド配列で、`filter` は構造化されたクエリツリーです。コンポーネントは古いリクエストをキャンセルし、遅れて届いたレスポンスによって新しいクエリの結果が上書きされることを防ぎます。データソースのクロージャー外の業務条件が変化した場合は、テーブルの `ref.refresh()` を呼び出してください。不要なリクエストを避けるため、データソース関数の参照を安定させてください。RSQL シリアライズはそれを必要とするバックエンド向けのアダプターにすぎず、クエリ文字列を実行するものではありません。
+
+## アプリケーションのアップロードと永続化
+
+フィールドの `upload(files, signal)` は、アプリケーションがファイルを保存した後のフィールド値を返します。コンポーネントはアップロード失敗を表示します。アップロード URL、認証、オブジェクトストレージのポリシーは呼び出し側で提供します。
+
+```tsx
+<AutoConfigProvider config={{
+  namespace: 'tenant-admin',
+  canAccess: access => !access.permissions?.length || access.permissions.every(p => myPermissions.includes(p)),
+  settings: {
+    load: key => api.loadTableSettings(key),
+    save: (key, settings) => api.saveTableSettings(key, settings),
+  },
+  notify: (message, level) => showToast(message, level),
+}}>{children}</AutoConfigProvider>
+```
+
+ローカルの変更は即座に適用されます。リモートへの保存は逐次実行され、失敗後には再試行のオプションが提供されます。保存済みの設定形式を変更する場合は、互換性のない設定の読み込みを避けるため、新しいテーブル id またはバージョンを使用してください。