@threestarsoftware/tssgrid 0.0.3 → 0.0.5

package/README.md

@@ -238,7 +238,8 @@ grid.moveRows(r0, r1, to);                        // 連続する複数行をま
 
 ### 非破壊フィルタ（`filter` / `clearFilter`）
 
-**コア内蔵**の非破壊フィルタ（行インデックスマッパ）。全行は内部の `_allRows`（マスタ）に保持したまま、**可視部分集合だけ描画**します。**10万行でも絞り込んだ数百行だけ描く**ので、仮想スクロール無しで軽い → 動く例: [`examples/filter-live.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-live.html)。
+**コア内蔵**の非破壊フィルタ（行インデックスマッパ）。全行は内部の `_allRows`（マスタ）に保持したまま、**絞り込んだ可視部分集合だけを描画**します。要点は**絞り込み後の描画・ライブ検索が軽い**こと（自社調べ：10万行を保持して約200行に絞り込み → 初回描画 ≈ 0.5 秒、絞り込み済みのライブ検索 ≈ 数 ms）→ 動く例: [`examples/filter-live.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-live.html)。
+なお**全件をそのままスクロール表示**したい大量行は、仮想スクロール `virtual: true` を使います（下記）。
 
 ```js
 grid.filter(row => row[2] >= 100);     // 述語: (row, masterIndex, src) => bool
@@ -254,9 +255,21 @@ grid.getAllRows();                     // マスタ全行（フィルタ中で
 - 制限（v1）: フィルタ中は **列の挿入削除・行移動・セル結合**はロック（解除してから）。`filter`/`clearFilter` は**Undo履歴をクリア**（ビューindex基準の履歴が境界を跨ぐと不整合になるため）。
 - **フィルタUI**（ヘッダの絞り込み等）はコアに入れず**プラグイン** `tss-filter`（下記）で。素朴な `setData` 差し替え方式の旧サンプルは [`examples/filter.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter.html)。
 
+### 仮想スクロール（`virtual: true`）
+
+大量行を**全件そのままスクロール表示**したい時に。全行は `data` に保持したまま、**画面に見える窓ぶん＋バッファだけを描画**します（固定行高ウィンドウイング）。全件を一度に DOM 化しないので**初期描画が一瞬・スクロールも軽い**。有効化は**オプション一行**だけ。
+
+```js
+new TssGrid(el, { virtual: true, data, /* … */ });
+new TssGrid(el, { virtual: { buffer: 10 }, data });   // 窓の上下バッファ行数（既定6）
+```
+- **自社調べ**（headless Chrome / Win11）: 10 万行で**初回描画 ≈ 46 ms**（全件描画 ≈ 10.5 秒に対して）。スクロール 1 コマの窓差し替え ≈ 3 ms。動く例: [`examples/virtual.html`](https://tssgrid.threestarsoftware.co.jp/examples/virtual.html)。
+- 制約（v1）: **行高一定**／**固定行列・折り返し・セル結合は非対応**（指定時は自動で無効化＋警告）。行番号の桁数が増える場合は `rowHeaderWidth` で行ヘッダ幅を広げられます。
+- フィルタとの関係: `filter()` は「絞り込んだ部分集合だけ描く」軽さ、`virtual` は「絞らず全件をスクロールする」軽さ。用途で使い分け（v1 では併用は未対応）。
+
 ### 同梱プラグイン: ヘッダ オートフィルタ（filter UI）
 
-`plugins/tss-filter.js`＋`.css`＝ 各見出しの**ロート（漏斗）アイコン**をクリックで**値チェックリスト＋検索**のポップアップ（Excel風。ソートの▲▼と区別できるアイコン）。複数列の条件は **AND**。中身は上の**コア `filter()` を呼ぶだけ**。動く例: [`examples/filter-ui.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-ui.html)。
+`plugins/tss-filter.js`＋`.css`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 各見出しの**ロート（漏斗）アイコン**をクリックで**値チェックリスト＋検索**のポップアップ（Excel風。ソートの▲▼と区別できるアイコン）。複数列の条件は **AND**。中身は上の**コア `filter()` を呼ぶだけ**。動く例: [`examples/filter-ui.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-ui.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-filter.css">
@@ -271,7 +284,7 @@ grid.getPlugin('filter').clearAll();            // 全条件クリア
 
 ### 同梱プラグイン: 共有マスタ（複数グリッドで1データ）
 
-`plugins/tss-shared.js`＝ **1つのマスタ（同じ行データ）を複数グリッドで共有**。左右を**別フィルタ/別ソート**で表示でき、**片方の編集がもう片方の同じ行へ即反映**（行参照を共有）。A系/B系を並べて突き合わせ編集する用途。動く例: [`examples/shared-master.html`](https://tssgrid.threestarsoftware.co.jp/examples/shared-master.html)。
+`plugins/tss-shared.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ **1つのマスタ（同じ行データ）を複数グリッドで共有**。左右を**別フィルタ/別ソート**で表示でき、**片方の編集がもう片方の同じ行へ即反映**（行参照を共有）。A系/B系を並べて突き合わせ編集する用途。動く例: [`examples/shared-master.html`](https://tssgrid.threestarsoftware.co.jp/examples/shared-master.html)。
 
 ```html
 <script src="plugins/tss-shared.js"></script>
@@ -322,7 +335,7 @@ TssGrid.registerPlugin('autosave', autoSavePlugin);   // 名前登録 → plugin
 
 ## カスタムエディタ
 
-組込エディタ（text/dropdown/checkbox/date/time/number）以外に、**独自の編集UI**を列に差せます。`columns[c].editor` に**薄いオブジェクト契約**を渡すだけ。
+組込エディタ（text/dropdown/checkbox/date/time/number）以外に、**独自の編集UI**を列に差せます。`columns[c].editor` に**薄いオブジェクト契約**を渡すだけ<!--DEV-->（無依存）<!--/DEV-->。
 
 ```js
 const myEditor = {
@@ -349,7 +362,7 @@ new TssGrid(el, { columns: [{ editor: myEditor }] });
 
 ### 同梱プラグイン: 休日カレンダー対応の日付ピッカー
 
-`plugins/tss-calendar.js`＝ ネイティブ `<input type=date>` では出来ない**会社の休日カレンダー（JSON）対応**の日付ピッカー。勤怠・シフト・予約などで効きます（動く例: [`examples/calendar.html`](https://tssgrid.threestarsoftware.co.jp/examples/calendar.html)）。
+`plugins/tss-calendar.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ ネイティブ `<input type=date>` では出来ない**会社の休日カレンダー（JSON）対応**の日付ピッカー。勤怠・シフト・予約などで効きます（動く例: [`examples/calendar.html`](https://tssgrid.threestarsoftware.co.jp/examples/calendar.html)）。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-calendar.css">
@@ -370,7 +383,7 @@ new TssGrid(el, { columns: [{ type: 'date', editor: cal, format: 'yyyy/mm/dd' }]
 
 ### 同梱プラグイン: 時刻ピッカー（時/分プルダウン）
 
-`plugins/tss-time.js`＝ 業務の時刻入力向けの**時/分プルダウン**ピッカー（クロックフェイスのようなリッチさは省き、任意時刻を素早く）。保存値は常に **24h `'HH:MM'`**（組込 `type:'time'` と互換）。動く例: [`examples/time.html`](https://tssgrid.threestarsoftware.co.jp/examples/time.html)。
+`plugins/tss-time.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ 業務の時刻入力向けの**時/分プルダウン**ピッカー（クロックフェイスのようなリッチさは省き、任意時刻を素早く）。保存値は常に **24h `'HH:MM'`**（組込 `type:'time'` と互換）。動く例: [`examples/time.html`](https://tssgrid.threestarsoftware.co.jp/examples/time.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-time.css">
@@ -385,7 +398,7 @@ new TssGrid(el, { columns: [{ type: 'time', editor: t }] });
 
 ### 同梱プラグイン: 派生列（formula / computed column）
 
-`plugins/tss-formula.js`＝「その行の値だけから計算する列」を `columns[c].formula` 関数で書けるようにする。金額＝数量×単価、税込＝金額×1.1 のような**派生列**を宣言的に。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)。
+`plugins/tss-formula.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝「その行の値だけから計算する列」を `columns[c].formula` 関数で書けるようにする。金額＝数量×単価、税込＝金額×1.1 のような**派生列**を宣言的に。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)。
 
 ```html
 <script src="plugins/tss-formula.js"></script>
@@ -408,7 +421,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: 列の集計（totals / 縦の SUM・平均…）
 
-`plugins/tss-totals.js`＝ 列方向の集計（`sum`/`avg`/`count`/`min`/`max`/独自関数）を担う。**計算だけで描画はしない**＝結果を `onTotals` で受けて好きな場所へ（フッタ・ラベル・**別の TssGrid の合計表**でも）。`formula` と併用すると派生列の後に集計が連動。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)（明細＝formula／合計＝totals）。
+`plugins/tss-totals.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 列方向の集計（`sum`/`avg`/`count`/`min`/`max`/独自関数）を担う。**計算だけで描画はしない**＝結果を `onTotals` で受けて好きな場所へ（フッタ・ラベル・**別の TssGrid の合計表**でも）。`formula` と併用すると派生列の後に集計が連動。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)（明細＝formula／合計＝totals）。
 
 ```html
 <script src="plugins/tss-totals.js"></script>
@@ -429,7 +442,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: 条件付き合計（tss-sum / ラベル付き合計行・整列表示）
 
-`plugins/tss-sum.js`＝ **ラベル付きの"合計行"**（小計・消費税10%・消費税8%・合計 など）を、**条件(`when`)＋対象(`of`)を宣言**で定義して作る。`tss-totals` が「列ごと1値」なのに対し、こちらは**同じ列を条件別に何本でも集計**でき（消費税10%と8%は両方 amount 由来＝per-column では衝突する）、**ソースと同一列構成の readonly 集計グリッドを生成**するので**金額が縦にピッタリ揃う**（画面でも印刷でも）。請求書・見積などの合計欄に。動く例: [`examples/invoice.html`](https://tssgrid.threestarsoftware.co.jp/examples/invoice.html)（インボイス請求書の合計欄）。
+`plugins/tss-sum.js`<!--DEV-->（**無依存・コア無改変**／ラベル横結合に TssMerge を任意利用）<!--/DEV-->＝ **ラベル付きの"合計行"**（小計・消費税10%・消費税8%・合計 など）を、**条件(`when`)＋対象(`of`)を宣言**で定義して作る。`tss-totals` が「列ごと1値」なのに対し、こちらは**同じ列を条件別に何本でも集計**でき（消費税10%と8%は両方 amount 由来＝per-column では衝突する）、**ソースと同一列構成の readonly 集計グリッドを生成**するので**金額が縦にピッタリ揃う**（画面でも印刷でも）。請求書・見積などの合計欄に。動く例: [`examples/invoice.html`](https://tssgrid.threestarsoftware.co.jp/examples/invoice.html)（インボイス請求書の合計欄）。
 
 ```html
 <script src="plugins/tss-merge.js"></script>  <!-- ラベルの横結合に利用 -->
@@ -453,7 +466,7 @@ const sum = TssSum.attach(grid, document.getElementById('sumgrid'), {
 
 ### 同梱プラグイン: 残高／累計（running total・縦の連鎖）
 
-`plugins/tss-running.js`＝「**前の行の結果 ＋ この行の増減**」で縦に積む列。`formula`（行内）でも `totals`（全体合計）でも出せない**縦方向の連鎖**を担う。出納帳/通帳の**残高**、在庫受払の**在庫数**、経費・ポイントの**累計**など。動く例: [`examples/running.html`](https://tssgrid.threestarsoftware.co.jp/examples/running.html)（現金出納帳＝入金・出金→残高）。
+`plugins/tss-running.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝「**前の行の結果 ＋ この行の増減**」で縦に積む列。`formula`（行内）でも `totals`（全体合計）でも出せない**縦方向の連鎖**を担う。出納帳/通帳の**残高**、在庫受払の**在庫数**、経費・ポイントの**累計**など。動く例: [`examples/running.html`](https://tssgrid.threestarsoftware.co.jp/examples/running.html)（現金出納帳＝入金・出金→残高）。
 
 ```html
 <script src="plugins/tss-running.js"></script>
@@ -472,11 +485,11 @@ new TssGrid(el, {
 - `column`(残高列) / `initial`(前残) / `delta` か `step` / `skipEmpty`(全列空の行は連鎖を進めず空表示、既定true)。
 - **行ドラッグ移動(rowReorder)併用時**は順序が変わるので `onAfterRowMove` で `handle.recompute()` を呼ぶ。
 
-> 「**行＝formula／列＝totals／縦＝running**」の3点が揃う。いずれも `setValueRaw`＋`onAfterChange` ラップで動く**プラグイン**。
+> 「**行＝formula／列＝totals／縦＝running**」の3点が揃う。いずれも `setValueRaw`＋`onAfterChange` ラップで動く**<!--DEV-->コア無改変<!--/DEV-->プラグイン**。
 
 ### 同梱プラグイン: 氏名→フリガナ 自動入力（furigana・辞書不要）
 
-`plugins/tss-furigana.js`（**辞書不要**）＝ 漢字を入力（IME変換）すると**読みが別列に自動で入る**（スマホ連絡先の よみがな 自動入力と同じ）。辞書引きではなく、**IME変換の composition イベントから「変換前のかな」を拾う**方式。TssGrid は**アクティブセルに本物の `<input>` を重ねる**設計なので composition が確実に取れる＝「**IMEに強い**」を機能で体現。動く例: [`examples/furigana.html`](https://tssgrid.threestarsoftware.co.jp/examples/furigana.html)。
+`plugins/tss-furigana.js`（**<!--DEV-->無依存・<!--/DEV-->辞書不要<!--DEV-->・コア無改変<!--/DEV-->**）＝ 漢字を入力（IME変換）すると**読みが別列に自動で入る**（スマホ連絡先の よみがな 自動入力と同じ）。辞書引きではなく、**IME変換の composition イベントから「変換前のかな」を拾う**方式。TssGrid は**アクティブセルに本物の `<input>` を重ねる**設計なので composition が確実に取れる＝「**IMEに強い**」を機能で体現。動く例: [`examples/furigana.html`](https://tssgrid.threestarsoftware.co.jp/examples/furigana.html)。
 
 ```html
 <script src="plugins/tss-furigana.js"></script>
@@ -493,7 +506,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: セル内ミニ計算式（calc・=12*3）
 
-`plugins/tss-calc.js`（**eval/Function 不使用**）＝ セルに `=12*3+5` と打つと確定時に **41** に。四則 `+ - * /`・括弧・小数対応の**自前再帰下降パーサ**（CSP安全）。`columns[c].parse`（入力変換）seam に乗るだけ。動く例: [`examples/calc.html`](https://tssgrid.threestarsoftware.co.jp/examples/calc.html)。
+`plugins/tss-calc.js`（**<!--DEV-->無依存・<!--/DEV-->eval/Function 不使用<!--DEV-->・コア無改変<!--/DEV-->**）＝ セルに `=12*3+5` と打つと確定時に **41** に。四則 `+ - * /`・括弧・小数対応の**自前再帰下降パーサ**（CSP安全）。`columns[c].parse`（入力変換）seam に乗るだけ。動く例: [`examples/calc.html`](https://tssgrid.threestarsoftware.co.jp/examples/calc.html)。
 
 ```html
 <script src="plugins/tss-calc.js"></script>
@@ -509,7 +522,7 @@ plugins: [ TssCalc.plugin({ columns: ['quantity', 'price'] }) ]   // columns 省
 
 ### 同梱プラグイン: オートコンプリート（autocomplete エディタ）
 
-`plugins/tss-autocomplete.js`＝ 自由入力＋**候補の絞り込み**。固定 dropdown の上位版で「だいたい決まってるが新規もある」項目（取引先・商品名）向け。**IME変換中の Enter は奪わない**（変換確定が最優先）。動く例: [`examples/autocomplete.html`](https://tssgrid.threestarsoftware.co.jp/examples/autocomplete.html)。
+`plugins/tss-autocomplete.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 自由入力＋**候補の絞り込み**。固定 dropdown の上位版で「だいたい決まってるが新規もある」項目（取引先・商品名）向け。**IME変換中の Enter は奪わない**（変換確定が最優先）。動く例: [`examples/autocomplete.html`](https://tssgrid.threestarsoftware.co.jp/examples/autocomplete.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-autocomplete.css">
@@ -527,7 +540,7 @@ columns: [
 
 ### 同梱プラグイン: セル内スパークライン（sparkline・ミニグラフ）
 
-`plugins/tss-sparkline.js`（**SVG自前描画**）＝ セルの数列を**ミニ折れ線/棒**で描く。`columns[c].html:true` ＋ `format`（format が返す SVG がセルに入る）seam に乗るだけ。Chart.js 等は積まない。動く例: [`examples/sparkline.html`](https://tssgrid.threestarsoftware.co.jp/examples/sparkline.html)（月次売上→動向グラフ・編集でライブ更新）。
+`plugins/tss-sparkline.js`（**<!--DEV-->無依存・<!--/DEV-->SVG自前描画<!--DEV-->・コア無改変<!--/DEV-->**）＝ セルの数列を**ミニ折れ線/棒**で描く。`columns[c].html:true` ＋ `format`（format が返す SVG がセルに入る）seam に乗るだけ。Chart.js 等は積まない。動く例: [`examples/sparkline.html`](https://tssgrid.threestarsoftware.co.jp/examples/sparkline.html)（月次売上→動向グラフ・編集でライブ更新）。
 
 ```html
 <script src="plugins/tss-sparkline.js"></script>
@@ -541,11 +554,11 @@ columns: [
   formula: (row) => ['m4','m5','m6','m7','m8','m9'].map(k=>row[k]).filter(v=>v!=='').join(',') }
 ```
 - `type`('line'/'bar') / `width` / `height` / `color` / `strokeWidth` / `fill`(折れ線下の塗り) / `min`・`max`(既定は自動)。
-- 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料で**。
+- 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料<!--DEV-->・無依存<!--/DEV-->で**。
 
 ### 同梱プラグイン: セル内 横棒グラフ（bar・データバー）
 
-`plugins/tss-bar.js`＝ セルの数値を**横棒**で描く（認知率・進捗%・スコア）。`html:true`＋`format` seam。`type:'number'` 併用で**バーのまま編集**（値を打つと伸びる）。動く例: [`examples/bar.html`](https://tssgrid.threestarsoftware.co.jp/examples/bar.html)。
+`plugins/tss-bar.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ セルの数値を**横棒**で描く（認知率・進捗%・スコア）。`html:true`＋`format` seam。`type:'number'` 併用で**バーのまま編集**（値を打つと伸びる）。動く例: [`examples/bar.html`](https://tssgrid.threestarsoftware.co.jp/examples/bar.html)。
 
 ```html
 <script src="plugins/tss-bar.js"></script>
@@ -560,7 +573,7 @@ columns: [
 
 ### 同梱プラグイン: ヒートマップ / 背景データバー（cellStyle）
 
-`plugins/tss-heatmap.js`＝ コアの `cellStyle` フックに乗せる**連続色（ヒートマップ）**と**背景データバー**。`tss-bar.js`（前景の棒＋ラベル）と違い、**セル背景**を塗る＝**数値はそのまま見せて編集できる**。動く例: [`examples/heatmap.html`](https://tssgrid.threestarsoftware.co.jp/examples/heatmap.html)。
+`plugins/tss-heatmap.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ コアの `cellStyle` フックに乗せる**連続色（ヒートマップ）**と**背景データバー**。`tss-bar.js`（前景の棒＋ラベル）と違い、**セル背景**を塗る＝**数値はそのまま見せて編集できる**。動く例: [`examples/heatmap.html`](https://tssgrid.threestarsoftware.co.jp/examples/heatmap.html)。
 
 ```html
 <script src="plugins/tss-heatmap.js"></script>
@@ -574,7 +587,7 @@ columns: [
 - `TssHeatmap`: `min`/`max`（明示。セル単位呼び出しで列範囲を知らないため）/ `colors`(2色以上のストップ) or `low`/`high` / `text`(自動文字色, 既定on)。
 - `TssDataBar`: `min`/`max` / `color` / `align`('left'/'right')。編集で即更新。
 
-> 「セル内グラフ」3点: **前景の折れ線/棒＝`html:true`+`format`（tss-sparkline / tss-bar）**、**背景の連続色/バー＝`cellStyle`（tss-heatmap）**。どれもノービルド。
+> 「セル内グラフ」3点: **前景の折れ線/棒＝`html:true`+`format`（tss-sparkline / tss-bar）**、**背景の連続色/バー＝`cellStyle`（tss-heatmap）**。どれも<!--DEV-->無依存・<!--/DEV-->ノービルド。
 
 ### グラフ連携（Chart.js などと）— 編集でライブ更新
 
@@ -588,7 +601,7 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 
 ### 同梱プラグイン: 2択トグル（toggle・有効｜無効）
 
-`plugins/tss-toggle.js`＋`.css`＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
+`plugins/tss-toggle.js`＋`.css`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-toggle.css">
@@ -605,7 +618,7 @@ plugins: [ TssToggle.plugin({ columns: {
 
 ### 同梱プラグイン: セル結合（merge・横/縦/矩形）
 
-`plugins/tss-merge.js`＝ データセルの**矩形結合**（`colspan`×`rowspan`）。左上の**アンカーが値・編集・選択の対象**で、覆われた従属セルは**描画スキップ＋読み取り専用**（貼り付け・フィルは弾く）。動く例: [`examples/merge.html`](https://tssgrid.threestarsoftware.co.jp/examples/merge.html)。（見出しの結合は `nestedHeaders` を参照）
+`plugins/tss-merge.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ データセルの**矩形結合**（`colspan`×`rowspan`）。左上の**アンカーが値・編集・選択の対象**で、覆われた従属セルは**描画スキップ＋読み取り専用**（貼り付け・フィルは弾く）。動く例: [`examples/merge.html`](https://tssgrid.threestarsoftware.co.jp/examples/merge.html)。（見出しの結合は `nestedHeaders` を参照）
 
 ```html
 <script src="plugins/tss-merge.js"></script>
@@ -631,7 +644,7 @@ plugins: [ TssMerge.plugin({ merges: [
 
 ### 同梱プラグイン: 同期スクロール（syncscroll・左右2表を並べて比較）
 
-`plugins/tss-syncscroll.js`＝ 並べた複数グリッドのスクロールを連動（Excel「並べて比較＋同時にスクロール」相当）。A系/B系で別々に絞り込んだ表を**突き合わせながら編集**する用途に。動く例: [`examples/sync-scroll.html`](https://tssgrid.threestarsoftware.co.jp/examples/sync-scroll.html)。
+`plugins/tss-syncscroll.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 並べた複数グリッドのスクロールを連動（Excel「並べて比較＋同時にスクロール」相当）。A系/B系で別々に絞り込んだ表を**突き合わせながら編集**する用途に。動く例: [`examples/sync-scroll.html`](https://tssgrid.threestarsoftware.co.jp/examples/sync-scroll.html)。
 
 ```html
 <script src="plugins/tss-syncscroll.js"></script>
@@ -898,7 +911,7 @@ new TssGrid(el, {
 
 ### 入力の正規化 / 表示の整形（`parse` / `format`）
 
-**保存値**（`getData()` が返す内部値）と、**入力**・**表示**を分離できます。外部ライブラリは同梱せず、必要なら列のフックに差し込む方針です。
+**保存値**（`getData()` が返す内部値）と、**入力**・**表示**を分離できます。外部ライブラリは同梱せず、必要なら列のフックに差し込む方針です<!--DEV-->（コアは無依存のまま）<!--/DEV-->。
 
 | フック | 向き | 役割 |
 |---|---|---|
@@ -1108,7 +1121,7 @@ command は `{ apply(), revert(), label }`。
 ## 制限
 
 - 外部（Excel等）→グリッドの貼り付けはブラウザのクリップボード読取許可が必要。`file://` で読めない場合は http（ローカルサーバ）で開く。グリッド間・グリッド内のコピペは内部バッファで常に動く。
-- 仮想スクロール未対応（大量行が必要なら今後）。日付の連番フィルはコピー扱い（数値のみ連番）。
+- 仮想スクロールは `virtual: true` で対応（固定行高・固定行列/折り返し/セル結合は非対応）。日付の連番フィルはコピー扱い（数値のみ連番）。
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",

package/plugins/tss-autocomplete.js

@@ -1,4 +1,5 @@
 /*! TssAutocomplete — 候補サジェスト付きテキスト入力（TssGrid カスタムエディタ）。
+ *  DEV: 無依存・コア無改変（dev専用メモ・公開時strip）
  *
  *  自由入力＋候補の絞り込み。固定 dropdown の上位版（取引先名・商品名など「だいたい決まってるが新規もある」項目向け）。
  *  **IME変換中の Enter は奪わない**（変換確定が最優先＝TssGrid の流儀）。

package/plugins/tss-bar.js

@@ -1,4 +1,5 @@
 /*! TssBar — セル内 横棒グラフ（データバー）。
+ *  DEV: 無依存・コア無改変
  *
  *  セルの数値を**横棒**で描く（アンケートの認知率バー、進捗%、スコアなど）。
  *  `columns[c].html:true` ＋ `format` 関数 seam に乗るだけ（format が返す <div> がセルに入る）。

package/plugins/tss-calc.js

@@ -1,4 +1,5 @@
 /*! TssCalc — セル内ミニ計算式（=12*3+5 → 41）。**eval/Function 不使用**。
+ *  DEV: 無依存・コア無改変
  *
  *  セルに数式を打つと確定時に計算結果へ。四則 + - * / と括弧 () と小数に対応。
  *  パーサは再帰下降の自前実装＝**eval を使わない**（CSP安全）。`columns[c].parse` seam に乗るだけ。

package/plugins/tss-calendar.js

@@ -1,4 +1,5 @@
 /*! TssCalendar — 日付ピッカー（TssGrid のカスタムエディタ / 単体ウィジェット両用）
+ *  DEV: 無依存
  *  休日カレンダーを JSON で渡せる（勤怠・シフト等向け）。CSS は tss-calendar.css をクラス/変数で自由に。
  *  使い方（グリッド）: columns: [{ type:'date', editor: TssCalendar({ holidays }) }]
  *  使い方（単体）   : TssCalendar({holidays}).openAt(anchorEl, isoValue, onPick)

package/plugins/tss-datetime.css

@@ -0,0 +1,36 @@
+/* TssDatetime — 日付＋時刻 同時ピッカーのレイアウト。
+   カレンダー部は tss-calendar.css（.tss-cal-*）、時刻部は tss-time.css（.tss-time-*）のスタイルを再利用するので、
+   この3枚を読み込む（または .tss-dt 配下に必要分を内包）。ここは「合体ポップアップ」の枠だけ定義。 */
+.tss-dt {
+  --dt-bg: #fff;
+  --dt-fg: #222;
+  --dt-border: #c3ccd6;
+  --dt-accent: #2aa0d8;
+  --dt-radius: 8px;
+  --dt-font: 13px "Segoe UI", "Meiryo", sans-serif;
+
+  position: fixed; z-index: 10000; background: var(--dt-bg); color: var(--dt-fg);
+  border: 1px solid var(--dt-border); border-radius: var(--dt-radius);
+  box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 8px; font: var(--dt-font); user-select: none; outline: none;
+}
+/* 選択中の値リードアウト＝標準の日時に無い「曜日」をここで必ず見せる */
+.tss-dt-readout { font-size: 13px; padding: 3px 6px 7px; margin-bottom: 4px; border-bottom: 1px dashed var(--dt-border); font-variant-numeric: tabular-nums; }
+.tss-dt-readout .tss-dt-ro-wd { color: var(--dt-accent); margin: 0 2px; }
+.tss-dt-readout .tss-dt-ro-empty { color: #99a; }
+
+.tss-dt-body { display: flex; gap: 12px; align-items: flex-start; }
+.tss-dt-time { padding-top: 2px; }
+.tss-dt-time-lbl { font-size: 11px; color: #889; margin: 0 0 4px 2px; }
+
+/* 合体ポップアップ内ではカレンダー/時刻の各ポップアップ枠（影・border・fixed）を無効化＝中身だけ使う */
+.tss-dt .tss-cal, .tss-dt .tss-time { position: static; box-shadow: none; border: 0; padding: 0; z-index: auto; }
+.tss-dt .tss-time-row { display: flex; align-items: center; gap: 4px; }
+.tss-dt .tss-time-row select { font: inherit; padding: 2px 4px; border: 1px solid var(--dt-border); border-radius: 5px; background: var(--dt-bg); color: var(--dt-fg); cursor: pointer; }
+.tss-dt .tss-time-sep { font-weight: 600; }
+
+.tss-dt-btns { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
+.tss-dt-btns .tss-dt-spacer { flex: 1 1 auto; }
+.tss-dt-btns button { font: inherit; padding: 4px 12px; border: 1px solid var(--dt-border); background: var(--dt-bg); color: var(--dt-fg); border-radius: 6px; cursor: pointer; }
+.tss-dt-btns button:hover { background: #eef4ff; }
+.tss-dt-btns .tss-dt-ok { border-color: var(--dt-accent); background: var(--dt-accent); color: #fff; }
+.tss-dt-btns .tss-dt-clear { color: #b6473e; }

package/plugins/tss-datetime.js

@@ -0,0 +1,184 @@
+/*! TssDatetime — 日付＋時刻を同時に設定するピッカー（TssGrid カスタムエディタ / 単体ウィジェット両用）
+ *  DEV: 無依存。カレンダー部は tss-calendar.css、時刻部は tss-time.css のクラスを再利用＋薄い tss-datetime.css。
+ *  保存値は常に 'YYYY-MM-DDTHH:MM'（kintone DATETIME と相互変換しやすい正規形。表示は列 format で整形）。
+ *  使い方（グリッド）: columns: [{ type:'text', editor: TssDatetime({ step:5 }), format: TssDatetime.format }]
+ *  使い方（単体）   : TssDatetime({step:15}).openAt(anchorEl, 'YYYY-MM-DDTHH:MM', onPick)
+ *  opts: holidays / weekend / weekLabels / min / max（日付） / step(分刻み,既定1) / hour12 / icon(既定 '📅') / openOnClick(既定true) / className
+ */
+(function (root) {
+  'use strict';
+  function pad(n) { return String(n).padStart(2, '0'); }
+  function isoD(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
+  function parseISOd(s) { var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(s || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
+  // 'YYYY-MM-DD[ T]HH:MM'（時刻省略可）→ { d:Date, h:int|null, mi:int|null }
+  function parseDT(s) {
+    var m = /^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{1,2}):(\d{2}))?/.exec(String(s || '').trim());
+    if (!m) return null;
+    return { d: new Date(+m[1], +m[2] - 1, +m[3]), h: m[4] != null ? +m[4] : null, mi: m[5] != null ? +m[5] : null };
+  }
+  // 'HH:MM'（日付無し＝時刻のみ。kintone TIME フィールド互換）→ { h, m }
+  function parseTimeOnly(s) { var m = /^(\d{1,2}):(\d{2})$/.exec(String(s || '').trim()); if (!m) return null; var h = +m[1], mi = +m[2]; return (h <= 23 && mi <= 59) ? { h: h, m: mi } : null; }
+  function sameDay(a, b) { return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  var WD = ['日', '月', '火', '水', '木', '金', '土'];   // 既定の曜日ラベル（標準の日時に無い「曜日」を補う＝差別化点）
+
+  function TssDatetime(opts) {
+    opts = opts || {};
+    var holidays = opts.holidays || {};
+    var weekend = opts.weekend || [0, 6];
+    var weekLabels = opts.weekLabels || ['日', '月', '火', '水', '木', '金', '土'];
+    var step = Math.max(1, opts.step || 1);
+    var hour12 = !!opts.hour12;
+    var minD = parseISOd(opts.min), maxD = parseISOd(opts.max);
+    var holName = function (h) { return h == null ? null : (typeof h === 'object' ? h.name : h); };
+    var holType = function (h) { return (h && typeof h === 'object' && h.type) ? h.type : null; };
+    var ty = new Date().getFullYear();
+    var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
+    var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
+
+    var pop = null, view = null, selD = null, selH = null, selM = null, ref = null, done = false, outside = null;
+
+    function dDisabled(d) { if (minD && d < minD) return true; if (maxD && d > maxD) return true; return false; }
+
+    function calHTML() {
+      var y = view.getFullYear(), m = view.getMonth(), start = new Date(y, m, 1).getDay(), today = new Date();
+      var lo = Math.min(yrLo, y), hi = Math.max(yrHi, y), yrSel = '<select class="tss-cal-sel-yr" aria-label="年">';
+      for (var yy = lo; yy <= hi; yy++) yrSel += '<option value="' + yy + '"' + (yy === y ? ' selected' : '') + '>' + yy + '年</option>';
+      yrSel += '</select>';
+      var monSel = '<select class="tss-cal-sel-mon" aria-label="月">';
+      for (var mm = 0; mm < 12; mm++) monSel += '<option value="' + mm + '"' + (mm === m ? ' selected' : '') + '>' + (mm + 1) + '月</option>';
+      monSel += '</select>';
+      var html = '<div class="tss-cal-head">'
+        + '<button type="button" class="tss-cal-nav" data-nav="-1" aria-label="前の月">‹</button>'
+        + '<span class="tss-cal-sels">' + yrSel + monSel + '</span>'
+        + '<button type="button" class="tss-cal-nav" data-nav="1" aria-label="次の月">›</button></div>'
+        + '<div class="tss-cal-grid">';
+      for (var w = 0; w < 7; w++) { var wc = w === 0 ? ' tss-cal-sun' : (w === 6 ? ' tss-cal-sat' : ''); html += '<div class="tss-cal-wl' + wc + '">' + esc(weekLabels[w]) + '</div>'; }
+      var d = new Date(y, m, 1 - start);
+      for (var i = 0; i < 42; i++) {
+        var cls = 'tss-cal-day', dow = d.getDay(), k = isoD(d), h = holidays[k], nm = holName(h), tp = holType(h);
+        if (d.getMonth() !== m) cls += ' tss-cal-other';
+        if (dow === 0) cls += ' tss-cal-sun'; else if (dow === 6) cls += ' tss-cal-sat';
+        if (h) { cls += ' tss-cal-holiday'; if (tp) cls += ' tss-cal-hol-' + tp; }
+        if (sameDay(d, today)) cls += ' tss-cal-today';
+        if (sameDay(d, selD)) cls += ' tss-cal-sel';
+        if (dDisabled(d)) cls += ' tss-cal-disabled';
+        html += '<div class="' + cls + '" data-d="' + k + '"' + (nm ? ' title="' + esc(nm) + '"' : '') + '>' + d.getDate() + '</div>';
+        d.setDate(d.getDate() + 1);
+      }
+      return html + '</div>';
+    }
+    function timeHTML() {
+      var hSel = '<select class="tss-time-h" aria-label="時"><option value=""></option>';
+      if (hour12) { for (var i = 1; i <= 12; i++) { var d24 = (selH == null) ? null : ((selH % 12) || 12); hSel += '<option value="' + i + '"' + (d24 === i ? ' selected' : '') + '>' + i + '</option>'; } }
+      else { for (var j = 0; j <= 23; j++) hSel += '<option value="' + j + '"' + (selH === j ? ' selected' : '') + '>' + pad(j) + '</option>'; }
+      hSel += '</select>';
+      var mins = []; for (var k = 0; k < 60; k += step) mins.push(k);
+      if (selM != null && mins.indexOf(selM) < 0) { mins.push(selM); mins.sort(function (a, b) { return a - b; }); }
+      var mSel = '<select class="tss-time-m" aria-label="分"><option value=""></option>';
+      for (var n = 0; n < mins.length; n++) mSel += '<option value="' + mins[n] + '"' + (selM === mins[n] ? ' selected' : '') + '>' + pad(mins[n]) + '</option>';
+      mSel += '</select>';
+      var aSel = '';
+      if (hour12) { var pm = selH != null && selH >= 12; aSel = '<select class="tss-time-ap" aria-label="午前/午後"><option value="AM"' + (!pm ? ' selected' : '') + '>AM</option><option value="PM"' + (pm ? ' selected' : '') + '>PM</option></select>'; }
+      return '<div class="tss-dt-time-lbl">時刻</div><div class="tss-time-row">' + hSel + '<span class="tss-time-sep">:</span>' + mSel + aSel + '</div>';
+    }
+    function readoutHTML() {
+      var hasT = selH != null || selM != null;
+      var t = hasT ? pad(selH == null ? 0 : selH) + ':' + pad(selM == null ? 0 : selM) : '';
+      if (!selD) return hasT ? '<b class="tss-dt-ro-wd">' + t + '</b><span class="tss-dt-ro-empty">（日付なし）</span>' : '<span class="tss-dt-ro-empty">日付/時刻を選択</span>';
+      var wd = (opts.weekLabels || WD)[selD.getDay()];
+      return isoD(selD).replace(/-/g, '/') + '<b class="tss-dt-ro-wd">(' + esc(wd) + ')</b>' + (hasT ? ' ' + t : '');
+    }
+    function render() {
+      pop.innerHTML = '<div class="tss-dt-readout">' + readoutHTML() + '</div>'
+        + '<div class="tss-dt-body"><div class="tss-dt-cal">' + calHTML() + '</div><div class="tss-dt-time">' + timeHTML() + '</div></div>'
+        + '<div class="tss-dt-btns"><button type="button" class="tss-dt-clear">クリア</button><span class="tss-dt-spacer"></span>'
+        + '<button type="button" class="tss-dt-now">現在</button><button type="button" class="tss-dt-ok">決定</button></div>';
+    }
+    function readTime() {
+      var hS = pop.querySelector('.tss-time-h'), mS = pop.querySelector('.tss-time-m'), aS = pop.querySelector('.tss-time-ap');
+      selH = hS && hS.value !== '' ? +hS.value : null;
+      selM = mS && mS.value !== '' ? +mS.value : null;
+      if (hour12 && aS && selH != null) { selH = aS.value === 'PM' ? (selH === 12 ? 12 : selH + 12) : (selH === 12 ? 0 : selH); }
+    }
+    function value() {
+      readTime();
+      var hasT = selH != null || selM != null;
+      var t = hasT ? pad(selH == null ? 0 : selH) + ':' + pad(selM == null ? 0 : selM) : '';
+      if (selD && hasT) return isoD(selD) + 'T' + t;   // 日付＋時刻
+      if (selD) return isoD(selD);                      // 日付のみ
+      if (hasT) return t;                               // 時刻のみ（日付無し＝'HH:MM'）
+      return '';
+    }
+    function place(anchor) {
+      var r = anchor.getBoundingClientRect();
+      pop.style.left = Math.max(2, Math.min(r.left, window.innerWidth - pop.offsetWidth - 6)) + 'px';
+      var top = r.bottom + 2;
+      if (top + pop.offsetHeight > window.innerHeight) top = Math.max(2, r.top - pop.offsetHeight - 2);
+      pop.style.top = top + 'px';
+    }
+    function onClick(e) {
+      var t = e.target;
+      var nav = t.getAttribute && t.getAttribute('data-nav');
+      if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); return; }
+      var dd = t.getAttribute && t.getAttribute('data-d');
+      if (dd) { readTime(); var d = parseISOd(dd); if (!dDisabled(d)) { selD = d; render(); } return; }   // 日付選択しても閉じない（時刻も決めるため）
+      if (t.classList.contains('tss-dt-now')) { var now = new Date(); selD = now; selH = now.getHours(); selM = Math.round(now.getMinutes() / step) * step; if (selM >= 60) selM = 60 - step; view = new Date(now.getFullYear(), now.getMonth(), 1); render(); return; }
+      if (t.classList.contains('tss-dt-clear')) { commit(''); return; }
+      if (t.classList.contains('tss-dt-ok')) { commit(value()); return; }
+    }
+    function onChange(e) {
+      var t = e.target;
+      if (t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
+      else if (t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
+      else if (t.classList.contains('tss-time-h') || t.classList.contains('tss-time-m') || t.classList.contains('tss-time-ap')) { readTime(); var ro = pop.querySelector('.tss-dt-readout'); if (ro) ro.innerHTML = readoutHTML(); }
+    }
+    function onKey(e) {
+      if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+      else if (e.key === 'Enter') { e.preventDefault(); commit(value()); }
+    }
+    function show(anchor, val, onPick, onCancel) {
+      done = false;
+      var p = parseDT(val), tp = p ? null : parseTimeOnly(val);   // 日付付き or 時刻のみ
+      selD = p ? p.d : null;
+      selH = p ? p.h : (tp ? tp.h : null);
+      selM = p ? p.mi : (tp ? tp.m : null);
+      view = selD ? new Date(selD.getFullYear(), selD.getMonth(), 1) : new Date();
+      pop = document.createElement('div'); pop.className = 'tss-dt' + (opts.className ? ' ' + opts.className : ''); pop.tabIndex = -1;
+      document.body.appendChild(pop);
+      pop.addEventListener('mousedown', function (e) { if (e.target.tagName !== 'SELECT') e.preventDefault(); });   // フォーカスを奪わない（select 除く）
+      pop.addEventListener('click', onClick);
+      pop.addEventListener('change', onChange);
+      pop.addEventListener('keydown', onKey);
+      render(); place(anchor);
+      ref = { pick: onPick, cancel: onCancel };
+      outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) commit(value()); };   // 外側クリックは確定（time と同方針）
+      setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
+      pop.focus();
+    }
+    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function commit(v) { if (done) return; done = true; var f = ref.pick; teardown(); f(v); }
+    function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
+
+    return {
+      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      close: function () { teardown(); },
+      icon: opts.icon != null ? opts.icon : '📅',
+      openOnClick: opts.openOnClick !== false,
+      openAt: function (anchorEl, val, onPick) { show(anchorEl, val, function (v) { onPick(v); }, null); },
+    };
+  }
+
+  // 表示整形ヘルパ: 'YYYY-MM-DDTHH:MM' → 'YYYY/MM/DD(曜) HH:MM'（列 format に渡せる）。
+  // 標準の日時表示で空欄になる「曜日」を必ず埋める＝本プラグインの目玉。weekday:false で曜日を消せる。
+  TssDatetime.format = function (v, o) {
+    var p = parseDT(v);
+    if (!p) return parseTimeOnly(v) ? v : (v || '');   // 時刻のみ('HH:MM')はそのまま表示／不正値は素通し
+    var d = p.d, wd = (o && o.weekday === false) ? '' : '(' + (o && o.weekLabels || WD)[d.getDay()] + ')';
+    var t = (p.h != null) ? ' ' + pad(p.h) + ':' + pad(p.mi == null ? 0 : p.mi) : '';
+    return d.getFullYear() + '/' + pad(d.getMonth() + 1) + '/' + pad(d.getDate()) + wd + t;
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssDatetime;
+  else root.TssDatetime = TssDatetime;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-filter.js

@@ -1,4 +1,5 @@
 /*! TssFilter — ヘッダのオートフィルタUI（Excel風）。コアの非破壊 filter() を呼ぶだけ。
+ *  DEV: 無依存・コア無改変
  *
  *  各リーフ見出しにロート(漏斗)アイコンを出し（ソートの▲▼と区別）、クリックで「値チェックリスト＋絞り込み検索」ポップアップ。
  *  複数列の条件は AND。適用は grid.filter(pred)／全解除で grid.clearFilter()。フィルタ済み列は印が付く。

package/plugins/tss-formula.js

@@ -1,4 +1,5 @@
 /*! TssFormula — 行スコープの派生列（computed column）プラグイン。
+ *  DEV: コア無改変
  *
  *  「その行の値だけから計算する列」を columns 定義に formula 関数で書けるようにする。
  *  例: 金額 = 数量 × 単価 / 税込 = 金額 × 1.1 / 勤怠の勤務時間 など。

package/plugins/tss-furigana.js

@@ -1,4 +1,5 @@
 /*! TssFurigana — 氏名→フリガナ 自動入力プラグイン。**辞書不要**。
+ *  DEV: コア無改変
  *
  *  スマホの連絡先のように「漢字を入力すると よみ が別列に自動で入る」。仕組みは**辞書引きではなく**、
  *  IME変換の **composition イベントから「変換前の読み（かな）」を拾う**だけ。だから辞書データを持たない。

package/plugins/tss-heatmap.js

@@ -1,4 +1,5 @@
 /*! TssHeatmap / TssDataBar — セル背景の連続ビジュアライズ（cellStyle フック用）。
+ *  DEV: 無依存・コア無改変
  *
  *  コアの `cellStyle`（セルにインラインCSSを差すフック）に乗せる。cellClass（クラス＝離散色）では出せない
  *  **値に応じた連続色（ヒートマップ）／背景データバー**を、**編集できる数値セルのまま**実現する。

package/plugins/tss-merge.js

@@ -1,4 +1,5 @@
 /*! TssMerge — 矩形セル結合（colspan×rowspan）の軽量プラグイン。
+ *  DEV: コアの薄い継ぎ目を使う
  *
  *  アンカー=(r,c)=左上が値・編集・選択の対象。覆われた従属セルは描画スキップ＋読取専用（貼付/フィルは弾く）。
  *  行/列の挿入削除では結合座標がコア側で縦横対称に追従（undo 対応）。

package/plugins/tss-messages.js

@@ -1,4 +1,5 @@
 /*! TssMessages — システム共通メッセージのカタログ作成ヘルパー（CSV/行配列 → grid.messages 用マップ）。
+ *  DEV: 無依存
  *
  *  エラー本文をコードで一元管理（トーン統一・多言語・差し替え）。validator は { code, params } を返すだけにし、
  *  本文は外部の設定（CSV/JSON/XML→行配列）に置く。ここはその設定を grid.messages の形に変換する係。

package/plugins/tss-running.js

@@ -1,4 +1,5 @@
 /*! TssRunningTotal — 残高／累計（running total）プラグイン。
+ *  DEV: コア無改変
  *
  *  「前の行の結果 ＋ この行の増減」で縦に積む列を作る。formula(行内) でも totals(全体合計) でも出せない
  *  **縦方向の連鎖**を担当。出納帳/通帳の残高、在庫受払の在庫数、経費・ポイントの累計など。

package/plugins/tss-shared.js

@@ -1,4 +1,5 @@
 /*! TssShared — 1つのマスタ(行データ)を複数グリッドで共有（A系/B系を別フィルタ・別ソートで並べて同時編集）。
+ *  DEV: 無依存・コア無改変
  *  各ビューは同じ「行参照」を持つ＝片方の編集がもう片方へ即反映（該当行を再描画）。
  *  **行の挿入/削除も伝播**（マスタ＆他ビューに反映）。**配列データ／オブジェクト配列データ どちらも対応**。
  *

package/plugins/tss-sparkline.js

@@ -1,4 +1,5 @@
 /*! TssSparkline — セル内スパークライン（ミニ折れ線/棒）。**SVG自前描画**。
+ *  DEV: 無依存・コア無改変
  *
  *  セルの値（カンマ/空白区切りの数列 "388,329,220,348,323,165"）を**小さなグラフ**として描く。
  *  仕組みは `columns[c].html:true` ＋ `format` 関数＝format が返す SVG 文字列がそのままセルに入る（html-cells と同じ seam）。

package/plugins/tss-sum.js

@@ -1,4 +1,5 @@
 /*! TssSum — 条件付き合計グリッドの軽量プラグイン。
+ *  DEV: コア無改変・無依存（ラベルの横結合に TssMerge を任意利用）
  *
  *  tss-totals との住み分け: tss-totals は「列ごとの集計（sum/avg/min/max/count）」を onTotals で返す。
  *  tss-sum は「同じ列を条件別に複数集計＝ラベル付きの"合計行"（小計/消費税10%/消費税8%/合計 など）」＋

package/plugins/tss-syncscroll.js

@@ -1,4 +1,5 @@
 /*! TssSyncScroll — 複数グリッドの同期スクロール（Excel「並べて比較＋同時にスクロール」相当）。
+ *  DEV: 無依存・コア無改変
  *
  *  左右（or 上下）に並べた 2枚以上のグリッドのスクロールを連動。A系/B系で別々に絞り込んだ表を
  *  突き合わせながら編集する用途に。`grid.wrap`(overflow:auto のスクロール枠) の scroll を相手へ転写。

package/plugins/tss-time.js

@@ -1,4 +1,5 @@
 /*! TssTime — 時刻ピッカー（TssGrid のカスタムエディタ / 単体ウィジェット両用）
+ *  DEV: 無依存
  *  時/分プルダウン方式（業務の任意時刻入力向き）。保存値は常に 24h 'HH:MM'（type:'time' と互換）。
  *  使い方（グリッド）: columns: [{ type:'time', editor: TssTime({ step:15 }) }]
  *  opts: step(分刻み,既定1) / hour12(AM/PM表示,既定false) / icon(既定 '🕐') / openOnClick(既定true) / className

package/plugins/tss-toggle.js

@@ -1,4 +1,5 @@
 /*! TssToggle — 2択セグメント・トグル（有効|無効・公開|非公開・男|女 …）。
+ *  DEV: 無依存・コア無改変
  *
  *  ラジオの2択を「並んだピル（セグメント）」で表示し、クリックでどちらかに切替。値は dropdown と同じく
  *  選んだ option の value を保存（getData も value）。html:true+format で描画、クリックは委譲で拾う。

package/plugins/tss-totals.js

@@ -1,4 +1,5 @@
 /*! TssTotals — 列方向の集計（合計/平均/件数/最小/最大）プラグイン。**計算だけ＝描画は利用者側**。
+ *  DEV: コア無改変
  *
  *  「縦の合計」をコアに埋めると合計行の置き場が minSpareRows/ソート/空行処理と衝突して肥大化する。
  *  そこで **集計ロジックだけ** を担い、結果は onTotals コールバック / getTotals() で返す。

package/src/tssgrid.css

@@ -60,6 +60,14 @@
   border-right: 1px solid var(--tg-border); border-bottom: 1px solid var(--tg-border); padding: 0 6px;
   font-size: var(--tg-font-size); box-sizing: border-box; white-space: nowrap; overflow: hidden;
 }
+/* 外周の二重線を解消＝最終行の下罫線・最終列の右罫線は描かない（外枠は .tg-wrap の単線が担当）。
+   右下だけ「セル罫線＋枠線」が重なって昔のHTMLTable風に見えるのを防ぐ＝上下左右が均一な単線になる。 */
+.tssgrid .tg-table tr:last-child > td,
+.tssgrid .tg-table tr:last-child > th { border-bottom: none; }
+.tssgrid .tg-table tr > td:last-child,
+.tssgrid .tg-table tr > th:last-child { border-right: none; }
+/* 仮想スクロールのスペーサ行（窓の上下を埋めて総高を保つだけの不可視行）。罫線/背景/余白を持たない。 */
+.tssgrid .tg-table tr.tg-vspace > td { border: none; padding: 0; background: transparent; }
 .tssgrid .tg-table th { background: var(--tg-colheader-bg); color: var(--tg-header-fg); font-weight: 600; text-align: center; }
 /* z-index 階層（.tg-wrap 内）: 通常セル 0 < 本体sticky(rowhead/frozen) 2 < 選択オーバーレイ 3
    < editor/select 4 < fillhandle 5 < ヘッダ thead 6 < 角/固定列ヘッダ 7 < リサイズ線 8。

package/src/tssgrid.d.ts

@@ -126,6 +126,11 @@ export interface TssGridOptions {
   cursor?: boolean;
   stretchH?: 'none' | 'last' | 'all';
   rowHeaders?: boolean;
+  /** 行番号列の幅(px)。既定 40。大量行で桁数が増える時に広げる。 */
+  rowHeaderWidth?: number;
+  /** 仮想スクロール（固定行高ウィンドウイング）。大量行を可視窓だけ描画。true か { buffer:窓上下バッファ行数(既定6) }。
+   *  制約(v1): 行高一定／固定行列・折り返し・セル結合は非対応（指定時は自動無効化）。 */
+  virtual?: boolean | { buffer?: number };
   colHeaders?: boolean;
   hiddenColumns?: number[];
   wordWrap?: boolean;

package/src/tssgrid.js

@@ -148,6 +148,7 @@
       this.mode = 'nav'; this.dragging = false; this.filling = null;
       this.pendingCut = null;
       this.headerDrag = null; this._colAnchor = 0; this._rowAnchor = 0;  // 行/列ヘッダ選択
+      this._headerSel = null;   // 'col'/'row'/'all'=列/行/全選択モード（結合に拡張せず実列/行にクランプ＝Excel流）。null=通常セル選択
       // リサイズ（列幅・行高）
       // 列幅 colW[c]=px（未指定は既定）。指定方法は3通り、優先度＝実行時リサイズ/明示colW > columns[c].width > 既定:
       //  1) colWidths: [px, …]            … 位置指定（従来）
@@ -182,6 +183,7 @@
       this.resizeRows = opts.resizeRows !== false;
       // 行/列ヘッダの表示（false で行番号列・ヘッダ行を隠す）
       this.rowHeaders = opts.rowHeaders !== false;
+      this.rowHeaderW = (opts.rowHeaderWidth | 0) || 40;   // 行番号列の幅(px)。大量行で桁数が増える時に広げる
       this.colHeaders = opts.colHeaders !== false;
       // 行ヘッダの「つまみ」をドラッグして行を並べ替える（行番号列が必要）
       this.rowReorder = !!opts.rowReorder;
@@ -210,6 +212,17 @@
       this.minSpareRows = opts.minSpareRows | 0;     // 末尾に常に確保する空行数
       this.autoWrapRow = !!opts.autoWrapRow;         // Tab で行末→次行頭に折り返し
       this.autoWrapCol = !!opts.autoWrapCol;         // Enter で列末→次列頭に折り返し
+      this.navSkipReadOnly = !!opts.navSkipReadOnly; // Tab/Enter 送りで readonly セルを飛ばす（伝票入力向け＝編集する所だけ移動）
+      // 仮想スクロール（簡易版・固定行高ウィンドウイング）: 大量行で「可視窓＋バッファ」だけ描画。
+      // 全行は data に保持・行座標は絶対のまま、tbody は窓ぶん＋上下スペーサ行のみ。幾何はモデル（一定行高）。
+      // 制約(v1): 行高一定／セル結合・固定行列・折り返し非対応。指定時は無効化して警告。OFF時は一切作動せず従来通り。
+      this.virtual = !!opts.virtual;
+      this._vBuf = (opts.virtual && typeof opts.virtual === 'object' && opts.virtual.buffer) || 6;  // 窓の上下バッファ行数
+      this._vStart = 0; this._vEnd = 0; this._vRAF = 0; this._vRendered = false;
+      if (this.virtual && (this.frozenRows || this.frozenCols || this.wordWrap)) {
+        try { console.warn('[TssGrid] virtual:true は固定行列/折り返し非対応のため、それらを無効化しました'); } catch (_) {}
+        this.frozenRows = 0; this.frozenCols = 0; this.wordWrap = false;
+      }
       // 行/列数の下限・上限（挿入/削除の境界。min は初期パディングにも使う）
       this.minRows = opts.minRows | 0; this.maxRows = opts.maxRows | 0;
       this.minCols = opts.minCols | 0; this.maxCols = opts.maxCols | 0;
@@ -508,6 +521,7 @@
     destroy() {
       if (this._destroyed) return;
       this._destroyed = true;
+      if (this._vRAF) { try { cancelAnimationFrame(this._vRAF); } catch (_) {} this._vRAF = 0; }   // 仮想スクロールの保留フレームを破棄
       for (const p of this._plugins) { if (p.handle && typeof p.handle.destroy === 'function') { try { p.handle.destroy(); } catch (_) {} } }
       this._plugins = [];
       if (this._ro) { try { this._ro.disconnect(); } catch (_) {} this._ro = null; }
@@ -968,7 +982,7 @@
 
     _colWidth(c) { return this.colW[c] != null ? this.colW[c] : this.defColW; }
     _rowHeight(r) { return this.rowH[r] != null ? this.rowH[r] : this.defRowH; }
-    _rhW() { return this.rowHeaders ? 40 : 0; }   // 行ヘッダ列の幅（非表示なら 0）
+    _rhW() { return this.rowHeaders ? this.rowHeaderW : 0; }   // 行ヘッダ列の幅（非表示なら 0）
     // ---- 列の非表示 ----
     _isHidden(c) { return this.hiddenCols.has(c); }
     _visCols() { const a = []; for (let c = 0; c < this.COLS; c++) if (!this.hiddenCols.has(c)) a.push(c); return a; }
@@ -1094,10 +1108,101 @@
         top += tr.offsetHeight;
       });
     }
+    // 1行ぶんの <tr>…</tr> を生成（buildTable の本体ループと、仮想スクロールの窓再描画 _renderWindow で共用）。
+    _rowHTML(r) {
+      const rh = this.rowHeaders;
+      const rgrip = (rh && this.resizeRows) ? '<div class="tg-rowgrip"></div>' : '';
+      const dgrip = (rh && this.rowReorder && !this._hasVMerge()) ? '<span class="tg-rowmove" title="ドラッグで行を移動">⠿</span>' : '';   // 横結合は行と一緒に移動可／縦結合中は不可
+      const rcls = (r < this.frozenRows) ? (' tg-frozen-row' + (r === this.frozenRows - 1 ? ' tg-frozen-row-edge' : '')) : '';   // 行固定
+      let html = '<tr data-r="' + r + '" class="tg-row' + rcls + '" style="height:' + this._rowHeight(r) + 'px">' + (rh ? '<th class="rowhead" data-r="' + r + '">' + dgrip + (r + 1) + rgrip + '</th>' : '');
+      for (let c = 0; c < this.COLS; c++) {
+        if (this._merges && this._isCovered(r, c)) continue;   // 結合に覆われた従属セルは td を出さない（アンカーが colspan で覆う）
+        const cs = this._merges ? this._colspanAt(r, c) : 1;   // 結合アンカーは colspan で従属列ぶんを覆う
+        const rs = this._merges ? this._rowspanAt(r, c) : 1;   // 縦結合は rowspan で従属行ぶんを覆う
+        const cls = [];
+        if (cs > 1 || rs > 1) cls.push('tg-merged');   // 結合アンカー（CSS で中央寄せ等のフック）
+        if (c < this.frozenCols) { cls.push('tg-frozen'); if (c === this.frozenCols - 1) cls.push('tg-frozen-edge'); }
+        if (this._isHidden(c)) cls.push('tg-hidden');   // 非表示列
+        if (this.colType(c) === 'dropdown') cls.push('tg-dropdown');  // ▾ キャレット表示用
+        if (this.colType(c) === 'number') cls.push('tg-num');  // 数値は右寄せ
+        if (this._isReadOnly(r, c)) cls.push('tg-readonly');  // 読み取り専用（淡色＋カーソル既定）
+        if (this.colCfg(c).wordWrap) cls.push('tg-wrap-cell');  // 列単位の折り返し
+        if (this.data[r][c] === '' && this._placeholder(c) != null) cls.push('tg-placeholder');  // 空セルのヒント
+        const al = this._cellAlign(r, c);   // 整列（列既定＋セル上書き）
+        if (al.h) cls.push('tg-h-' + al.h); if (al.v) cls.push('tg-v-' + al.v);
+        let titleAttr = '';
+        if (this._marksInvalid) { const _iv = this._coerceCell(r, c, this.data[r][c]); if (!_iv.ok) { cls.push('tg-invalid'); titleAttr = ' data-err-level="' + TssGrid.esc(_iv.level || 'error') + '"'; if (this.invalidTitle) titleAttr += ' title="' + TssGrid.esc(_iv.message || '入力値が不正です') + '"'; } }
+        const ed = this.colCfg(c).editor;   // カスタムエディタが icon を申告していれば右端に表示
+        const ico = (ed && ed.icon) ? ' data-ico="' + TssGrid.esc(ed.icon) + '"' : '';
+        if (ico) cls.push('tg-haspicker');
+        const ccls = (this.cellClass || this.colCfg(c).cellClass) ? this._cellClasses(r, c) : [];   // 条件付き書式
+        for (const k of ccls) cls.push(k);
+        const dccls = ccls.length ? ' data-ccls="' + TssGrid.esc(ccls.join(' ')) + '"' : '';
+        let sty = '';   // セル単位インラインスタイル（連続色・データバー幅などCSS変数も）
+        if (this.cellStyle || this.colCfg(c).cellStyle) {
+          const so = this._cellStyleObj(r, c), sk = Object.keys(so);
+          if (sk.length) { let css = ''; for (const k of sk) css += k + ':' + so[k] + ';'; sty = ' style="' + TssGrid.esc(css) + '" data-cstyle="' + TssGrid.esc(sk.join(' ')) + '"'; }
+        }
+        const a = cls.length ? ' class="' + cls.join(' ') + '"' : '';
+        const csAttr = (cs > 1 ? ' colspan="' + cs + '"' : '') + (rs > 1 ? ' rowspan="' + rs + '"' : '');
+        html += '<td' + a + ico + dccls + sty + titleAttr + csAttr + ' data-r="' + r + '" data-c="' + c + '">' + this._cellHTML(r, c) + '</td>';
+      }
+      return html + '</tr>';
+    }
+    // 仮想スクロール: 現在の scrollTop から描画すべき窓 [start,end)（絶対行）を算出。バッファ込み。
+    _vWindow() {
+      const rowH = this.defRowH;
+      const viewH = (this.wrap && this.wrap.clientHeight) || parseInt(this.height, 10) || 400;
+      const visible = Math.ceil(viewH / rowH) + 1;
+      const scrollTop = this.wrap ? this.wrap.scrollTop : 0;
+      let start = Math.floor(scrollTop / rowH) - this._vBuf;
+      if (start < 0) start = 0;
+      let end = start + visible + this._vBuf * 2;
+      if (end > this.ROWS) end = this.ROWS;
+      return { start, end };
+    }
+    // 仮想スクロール: tbody を窓ぶん＋上下スペーサ行に差し替え（buildTable せず軽量再描画）。
+    _renderWindow(win, force) {
+      if (!force && this._vRendered && win.start === this._vStart && win.end === this._vEnd) return false;
+      const tbody = this.table && this.table.querySelector('tbody');
+      if (!tbody) return false;
+      const rh = this.rowHeaders, colsSpan = this.COLS + (rh ? 1 : 0);
+      const topH = win.start * this.defRowH, botH = (this.ROWS - win.end) * this.defRowH;
+      let html = '';
+      if (topH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + topH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+      for (let r = win.start; r < win.end; r++) html += this._rowHTML(r);
+      if (botH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + botH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+      tbody.innerHTML = html;
+      this._vStart = win.start; this._vEnd = win.end; this._vRendered = true;
+      this._syncHeaderCheckboxes();
+      this.updateSelectionUI();   // セルが作り直されたので窓内の選択シェード/オーバーレイを再適用
+      return true;
+    }
+    // 仮想スクロール: スクロールで窓がずれたら再描画（rAF スロットル）。
+    _vSync() {
+      if (!this.virtual || this._vRAF) return;
+      this._vRAF = requestAnimationFrame(() => {
+        this._vRAF = 0;
+        if (this._destroyed) return;
+        this._renderWindow(this._vWindow(), false);
+      });
+    }
+    // 仮想スクロール: 行 r を可視域に入れる（scrollTop 調整→窓を同期描画）。setActive/setExtent から。
+    _vEnsureVisible(r) {
+      if (!this.virtual || !this.wrap) return;
+      const rowH = this.defRowH, head = this._theadH || 0;
+      const rowTop = head + r * rowH;
+      const cur = this.wrap.scrollTop, viewH = this.wrap.clientHeight || 400;
+      let st = cur;
+      if (rowTop < cur + head) st = rowTop - head;                 // 上のヘッダ下に隠れてる→上端へ
+      else if (rowTop + rowH > cur + viewH) st = rowTop + rowH - viewH;  // 下に隠れてる→下端へ
+      if (st !== cur) this.wrap.scrollTop = st;
+      this._renderWindow(this._vWindow(), false);   // 窓を即同期（place 前に DOM を確定）
+    }
     buildTable() {
       this._selhdrFg = null;   // 選択ヘッダ文字色キャッシュ破棄（テーマ変更に追従）
       const rh = this.rowHeaders;
-      let html = '<colgroup>' + (rh ? '<col style="width:40px">' : '');
+      let html = '<colgroup>' + (rh ? '<col style="width:' + this.rowHeaderW + 'px">' : '');
       for (let c = 0; c < this.COLS; c++) html += '<col data-c="' + c + '"' + (this._isHidden(c) ? ' class="tg-hidden"' : '') + ' style="width:' + (this._isHidden(c) ? 0 : this._colWidth(c)) + 'px">';
       html += '</colgroup>';
       if (this.colHeaders) {
@@ -1126,44 +1231,15 @@
         html += '</thead>';
       }
       html += '<tbody>';
-      for (let r = 0; r < this.ROWS; r++) {
-        const rgrip = (rh && this.resizeRows) ? '<div class="tg-rowgrip"></div>' : '';
-        const dgrip = (rh && this.rowReorder && !this._hasVMerge()) ? '<span class="tg-rowmove" title="ドラッグで行を移動">⠿</span>' : '';   // 横結合は行と一緒に移動可／縦結合中は不可
-        const rcls = (r < this.frozenRows) ? (' tg-frozen-row' + (r === this.frozenRows - 1 ? ' tg-frozen-row-edge' : '')) : '';   // 行固定
-        html += '<tr data-r="' + r + '" class="tg-row' + rcls + '" style="height:' + this._rowHeight(r) + 'px">' + (rh ? '<th class="rowhead" data-r="' + r + '">' + dgrip + (r + 1) + rgrip + '</th>' : '');
-        for (let c = 0; c < this.COLS; c++) {
-          if (this._merges && this._isCovered(r, c)) continue;   // 結合に覆われた従属セルは td を出さない（アンカーが colspan で覆う）
-          const cs = this._merges ? this._colspanAt(r, c) : 1;   // 結合アンカーは colspan で従属列ぶんを覆う
-          const rs = this._merges ? this._rowspanAt(r, c) : 1;   // 縦結合は rowspan で従属行ぶんを覆う
-          const cls = [];
-          if (cs > 1 || rs > 1) cls.push('tg-merged');   // 結合アンカー（CSS で中央寄せ等のフック）
-          if (c < this.frozenCols) { cls.push('tg-frozen'); if (c === this.frozenCols - 1) cls.push('tg-frozen-edge'); }
-          if (this._isHidden(c)) cls.push('tg-hidden');   // 非表示列
-          if (this.colType(c) === 'dropdown') cls.push('tg-dropdown');  // ▾ キャレット表示用
-          if (this.colType(c) === 'number') cls.push('tg-num');  // 数値は右寄せ
-          if (this._isReadOnly(r, c)) cls.push('tg-readonly');  // 読み取り専用（淡色＋カーソル既定）
-          if (this.colCfg(c).wordWrap) cls.push('tg-wrap-cell');  // 列単位の折り返し
-          if (this.data[r][c] === '' && this._placeholder(c) != null) cls.push('tg-placeholder');  // 空セルのヒント
-          const al = this._cellAlign(r, c);   // 整列（列既定＋セル上書き）
-          if (al.h) cls.push('tg-h-' + al.h); if (al.v) cls.push('tg-v-' + al.v);
-          let titleAttr = '';
-          if (this._marksInvalid) { const _iv = this._coerceCell(r, c, this.data[r][c]); if (!_iv.ok) { cls.push('tg-invalid'); titleAttr = ' data-err-level="' + TssGrid.esc(_iv.level || 'error') + '"'; if (this.invalidTitle) titleAttr += ' title="' + TssGrid.esc(_iv.message || '入力値が不正です') + '"'; } }
-          const ed = this.colCfg(c).editor;   // カスタムエディタが icon を申告していれば右端に表示
-          const ico = (ed && ed.icon) ? ' data-ico="' + TssGrid.esc(ed.icon) + '"' : '';
-          if (ico) cls.push('tg-haspicker');
-          const ccls = (this.cellClass || this.colCfg(c).cellClass) ? this._cellClasses(r, c) : [];   // 条件付き書式
-          for (const k of ccls) cls.push(k);
-          const dccls = ccls.length ? ' data-ccls="' + TssGrid.esc(ccls.join(' ')) + '"' : '';
-          let sty = '';   // セル単位インラインスタイル（連続色・データバー幅などCSS変数も）
-          if (this.cellStyle || this.colCfg(c).cellStyle) {
-            const so = this._cellStyleObj(r, c), sk = Object.keys(so);
-            if (sk.length) { let css = ''; for (const k of sk) css += k + ':' + so[k] + ';'; sty = ' style="' + TssGrid.esc(css) + '" data-cstyle="' + TssGrid.esc(sk.join(' ')) + '"'; }
-          }
-          const a = cls.length ? ' class="' + cls.join(' ') + '"' : '';
-          const csAttr = (cs > 1 ? ' colspan="' + cs + '"' : '') + (rs > 1 ? ' rowspan="' + rs + '"' : '');
-          html += '<td' + a + ico + dccls + sty + titleAttr + csAttr + ' data-r="' + r + '" data-c="' + c + '">' + this._cellHTML(r, c) + '</td>';
-        }
-        html += '</tr>';
+      if (this.virtual) {
+        const win = this._vWindow(); this._vStart = win.start; this._vEnd = win.end; this._vRendered = true;
+        const colsSpan = this.COLS + (rh ? 1 : 0);
+        const topH = win.start * this.defRowH, botH = (this.ROWS - win.end) * this.defRowH;
+        if (topH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + topH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+        for (let r = win.start; r < win.end; r++) html += this._rowHTML(r);
+        if (botH > 0) html += '<tr class="tg-vspace" aria-hidden="true" style="height:' + botH + 'px"><td colspan="' + colsSpan + '"></td></tr>';
+      } else {
+        for (let r = 0; r < this.ROWS; r++) html += this._rowHTML(r);
       }
       html += '</tbody>';
       this.table.innerHTML = html;
@@ -1260,16 +1336,27 @@
     // 通常は buildTable/_reflow（ResizeObserver が table/wrap を監視）で自動更新される）。
     refreshGeometry() { this._buildGeomCache(); this.updateSelectionUI(); }
     place(elem, td) {
-      const r = +td.dataset.r, c = +td.dataset.c, R = this._cellRectAuto(r, c);
+      // 仮想スクロールで active が窓外だと td=null。その場合は active 座標＋モデル幾何で配置（窓外なら overflow で隠れる）。
+      const r = td ? +td.dataset.r : this.active.r, c = td ? +td.dataset.c : this.active.c, R = this._cellRectAuto(r, c);
       elem.style.left = R.left + 'px'; elem.style.top = R.top + 'px';
       elem.style.width = R.width + 'px'; elem.style.height = R.height + 'px';
       this._clipOverlay(elem, R.left, R.top, c, r);
     }
     placeRect(elem, r0, c0, r1, c1) {
-      const A = this._cellRectAuto(r0, c0), B = this._cellRectAuto(r1, c1);
-      elem.style.left = A.left + 'px'; elem.style.top = A.top + 'px';
-      elem.style.width = (B.left + B.width - A.left) + 'px'; elem.style.height = (B.top + B.height - A.top) + 'px';
-      this._clipOverlay(elem, A.left, A.top, c0, r0);
+      const L = this._colLefts, T = this._rowTops;
+      let left, top, w, h;
+      // 列/行/全選択(_headerSel)時は、角セルの結合アンカー解決で枠が範囲外へ膨らむのを避け、
+      // 列左/行上の累積で「実列/行ピッタリ」にクランプ（非固定領域のみ。固定行列が絡む場合は従来へフォールバック）。
+      if (this._headerSel && L && T && r0 >= this.frozenRows && c0 >= this.frozenCols) {
+        left = L[c0]; top = T[r0];
+        w = L[Math.min(c1 + 1, this.COLS)] - left; h = T[Math.min(r1 + 1, this.ROWS)] - top;
+      } else {
+        const A = this._cellRectAuto(r0, c0), B = this._cellRectAuto(r1, c1);
+        left = A.left; top = A.top; w = B.left + B.width - A.left; h = B.top + B.height - A.top;
+      }
+      elem.style.left = left + 'px'; elem.style.top = top + 'px';
+      elem.style.width = w + 'px'; elem.style.height = h + 'px';
+      this._clipOverlay(elem, left, top, c0, r0);
     }
     // ---- 幾何キャッシュ（step2: DOM非依存幾何の土台）----
     // buildTable / _reflow で1回だけ実測して列左・行上の累積を作る。
@@ -1278,9 +1365,15 @@
     // 行高は wordWrap で、列幅は stretch の DOM 改変で可変なので、モデル計算でなく実測が要る。
     _buildGeomCache() {
       if (!this.wrap || !this.table) { this._rowTops = this._colLefts = null; return; }
-      const trs = this.table.querySelectorAll('tbody tr');
-      const RT = new Array(this.ROWS + 1); RT[0] = this._theadH || 0;
-      for (let r = 0; r < this.ROWS; r++) { const tr = trs[r]; RT[r + 1] = RT[r] + (tr ? tr.getBoundingClientRect().height : this._rowHeight(r)); }
+      const RT = new Array(this.ROWS + 1);
+      if (this.virtual) {
+        const base = this._theadH || 0, rowH = this.defRowH;   // 仮想モードは一定行高＝モデルで全行（窓外も算出可）
+        for (let r = 0; r <= this.ROWS; r++) RT[r] = base + r * rowH;
+      } else {
+        const trs = this.table.querySelectorAll('tbody tr');
+        RT[0] = this._theadH || 0;
+        for (let r = 0; r < this.ROWS; r++) { const tr = trs[r]; RT[r + 1] = RT[r] + (tr ? tr.getBoundingClientRect().height : this._rowHeight(r)); }
+      }
       this._rowTops = RT;
       // 列幅: リーフヘッダ th（マージ無しで確実）→ 無ければ colgroup col。stretch 後の実幅を拾う。
       const colEl = c => (this.colHeaders ? this.table.querySelector('thead th[data-c="' + c + '"]') : null) || this.table.querySelector('colgroup col[data-c="' + c + '"]');
@@ -1335,12 +1428,22 @@
     highlightRange() {
       this.table.querySelectorAll('td.sel, th.selhdr').forEach(el => el.classList.remove('sel', 'selhdr'));
       const { r0, r1, c0, c1 } = this.rectRange();
-      // 選択範囲が及ぶ行/列ヘッダをハイライト（Excel 風のアフォーダンス）
+      // 選択範囲が及ぶ行/列ヘッダをハイライト（Excel 風のアフォーダンス）。仮想時は行ヘッダを窓内にクランプ（大量行で querySelector を無駄打ちしない）。
+      const hlo = this.virtual ? Math.max(r0, this._vStart) : r0;
+      const hhi = this.virtual ? Math.min(r1, this._vEnd - 1) : r1;
       for (let c = c0; c <= c1; c++) { const th = this.table.querySelector('thead th[data-c="' + c + '"]'); if (th) th.classList.add('selhdr'); }
-      for (let r = r0; r <= r1; r++) { const th = this.table.querySelector('th.rowhead[data-r="' + r + '"]'); if (th) th.classList.add('selhdr'); }
+      for (let r = hlo; r <= hhi; r++) { const th = this.table.querySelector('th.rowhead[data-r="' + r + '"]'); if (th) th.classList.add('selhdr'); }
       this.wrap.style.setProperty('--tg-selhdr-fg', this._selhdrTextColor());   // 選択ヘッダ文字色を背景輝度から自動（暗背景→白）
       if (r0 === r1 && c0 === c1) return;
-      for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) this.cellEl(r, c).classList.add('sel');
+      const clampMerge = this._headerSel && this._merges;   // 列/行選択では「範囲に収まらない結合」は塗らない（帯を塗り広げない）
+      // 仮想スクロール: 窓内の行だけシェード（範囲枠 selrange は placeRect がモデル幾何で全域を描く）。
+      for (let r = hlo; r <= hhi; r++) for (let c = c0; c <= c1; c++) {
+        if (clampMerge) {
+          const a = this._anchorOf(r, c), mc1 = a.c + this._colspanAt(a.r, a.c) - 1, mr1 = a.r + this._rowspanAt(a.r, a.c) - 1;
+          if (a.r < r0 || mr1 > r1 || a.c < c0 || mc1 > c1) continue;   // 結合が選択範囲に収まらない＝塗らない
+        }
+        const el = this.cellEl(r, c); if (el) el.classList.add('sel');
+      }
     }
     // 選択ヘッダの文字色を --tg-selhdr-bg の輝度から自動決定（暗背景→白／明背景→濃紺）。
     // 既定の明るい選択色は従来どおり濃紺、暗い選択ヘッダ（slate等）でも文字が読める。buildTable でキャッシュ破棄。
@@ -1416,39 +1519,45 @@
       const a = { r: this.clampR(r), c: this._snapVisCol(this.clampC(c)) };   // 隠し列にはカーソルを置かない
       if (this._merges) { const an = this._anchorOf(a.r, a.c); a.r = an.r; a.c = an.c; }   // 結合内はアンカーへ
       if (!this._beforeSel(a, a)) return;
+      this._headerSel = null;
       this.active = a; this.extent = { ...a };
+      if (this.virtual) this._vEnsureVisible(a.r);   // 窓に入れてから placement（窓外なら activeTd=null になるため）
       this.place(this.editor, this.activeTd()); this.toNav(); this.editor.focus(); this.updateSelectionUI();
-      this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      if (!this.virtual) this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });   // 仮想は _vEnsureVisible が可視化済み
       this._fireSelection();
     }
     setExtent(r, c) {
       const e = { r: this.clampR(r), c: this.clampC(c) };
       if (!this._beforeSel(this.active, e)) return;
-      this.extent = e; this.updateSelectionUI();
-      this.cellEl(this.extent.r, this.extent.c).scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      this.extent = e;
+      if (this.virtual) this._vEnsureVisible(e.r);
+      this.updateSelectionUI();
+      if (!this.virtual) this.cellEl(this.extent.r, this.extent.c).scrollIntoView({ block: 'nearest', inline: 'nearest' });
       this._fireSelection();
     }
     selectRect(r0, c0, r1, c1) {
       const a = { r: r0, c: c0 }, e = { r: r1, c: c1 };
       if (!this._beforeSel(a, e)) return;
+      this._headerSel = null;
       this.active = a; this.extent = e;
       this.place(this.editor, this.activeTd()); this.toNav(); this.editor.focus(); this.updateSelectionUI();
       this._fireSelection();
     }
     focusAndSelect(sel) {
       this.active = { ...sel.active }; this.extent = { ...sel.extent };
+      if (this.virtual) this._vEnsureVisible(this.active.r);
       this.place(this.editor, this.activeTd()); this.toNav(); this.editor.focus(); this.updateSelectionUI();
-      this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      if (!this.virtual) this.activeTd().scrollIntoView({ block: 'nearest', inline: 'nearest' });
       this._fireSelection();
     }
 
     // ---- 行 / 列 / 全体 の選択（ヘッダクリック） ----
-    selectCol(c) { c = this.clampC(c); this._colAnchor = c; this.selectRect(0, c, this.ROWS - 1, c); }
-    selectRow(r) { r = this.clampR(r); this._rowAnchor = r; this.selectRect(r, 0, r, this.COLS - 1); }
-    selectAll() { this._colAnchor = 0; this._rowAnchor = 0; this.selectRect(0, 0, this.ROWS - 1, this.COLS - 1); }
-    _extendCol(c) { const a = { r: 0, c: this._colAnchor }, e = { r: this.ROWS - 1, c: this.clampC(c) }; if (!this._beforeSel(a, e)) return; this.active = a; this.extent = e;
+    selectCol(c) { c = this.clampC(c); this._colAnchor = c; this.selectRect(0, c, this.ROWS - 1, c); this._headerSel = 'col'; this.updateSelectionUI(); }
+    selectRow(r) { r = this.clampR(r); this._rowAnchor = r; this.selectRect(r, 0, r, this.COLS - 1); this._headerSel = 'row'; this.updateSelectionUI(); }
+    selectAll() { this._colAnchor = 0; this._rowAnchor = 0; this.selectRect(0, 0, this.ROWS - 1, this.COLS - 1); this._headerSel = 'all'; this.updateSelectionUI(); }
+    _extendCol(c) { const a = { r: 0, c: this._colAnchor }, e = { r: this.ROWS - 1, c: this.clampC(c) }; if (!this._beforeSel(a, e)) return; this._headerSel = 'col'; this.active = a; this.extent = e;
       this.place(this.editor, this.activeTd()); this.toNav(); this.updateSelectionUI(); this._fireSelection(); }
-    _extendRow(r) { const a = { r: this._rowAnchor, c: 0 }, e = { r: this.clampR(r), c: this.COLS - 1 }; if (!this._beforeSel(a, e)) return; this.active = a; this.extent = e;
+    _extendRow(r) { const a = { r: this._rowAnchor, c: 0 }, e = { r: this.clampR(r), c: this.COLS - 1 }; if (!this._beforeSel(a, e)) return; this._headerSel = 'row'; this.active = a; this.extent = e;
       this.place(this.editor, this.activeTd()); this.toNav(); this.updateSelectionUI(); this._fireSelection(); }
     // ---- 列幅 / 行高 のリサイズ ----
     setColWidth(c, w) {
@@ -2093,6 +2202,7 @@
     _reflow() {
       if (this.stretchH !== 'none') this._applyStretch();   // 枠幅が変わったら余白を再配分
       this._buildGeomCache();   // 幅/枠が変わったので実測幾何を取り直す（リサイズ/ResizeObserver/window resize）
+      if (this.virtual) this._renderWindow(this._vWindow(), false);   // 枠高が変われば窓行数も変わる＝窓を同期
       const td = this.activeTd(); if (!td) return;
       this.place(this.editor, td);
       if (this.select && this.select.style.display !== 'none') this.place(this.select, td);
@@ -2100,6 +2210,7 @@
     }
 
     _bind() {
+      if (this.virtual) this.wrap.addEventListener('scroll', () => this._vSync(), { passive: true });  // 仮想スクロール: 窓再描画
       this.editor.addEventListener('keydown', (e) => this._onKey(e));
       this.editor.addEventListener('compositionstart', () => {
         if (this.mode !== 'nav') return;
@@ -2366,17 +2477,26 @@
       let [dr, dc] = D[dir] || D.down;
       if (reverse) { dr = -dr; dc = -dc; }
       let r = this.active.r, c = this.active.c;
-      if (dc !== 0) {   // 横移動は隠し列をスキップ＋結合幅を跨ぐ
-        const nc = this._stepColM(r, c, dc > 0 ? 1 : -1);
-        if (nc !== c) c = nc;
-        else if (this.autoWrapRow) { c = dc > 0 ? this._firstVisCol() : this._lastVisCol(); r += dc > 0 ? 1 : -1; }
-      }
-      if (dr !== 0) {
-        r = this._stepRowM(r, c, dr > 0 ? 1 : -1);   // 縦移動は結合高を跨ぐ
-        if (this.autoWrapCol) {   // 縦の端で列送り（送り先も可視列）
-          if (r >= this.ROWS) { r = 0; c = this._stepVisCol(c, 1); }
-          else if (r < 0) { r = this.ROWS - 1; c = this._stepVisCol(c, -1); }
+      // navSkipReadOnly 時は readonly セルを飛ばして次の編集可能セルまで送る（伝票入力向け）。
+      // OFF 時はループは1回で抜け＝従来挙動と完全同一（回帰ゼロ）。
+      for (let g = 0, lim = this.ROWS * this.COLS + 2; g < lim; g++) {
+        let nr = r, nc = c;
+        if (dc !== 0) {   // 横移動は隠し列をスキップ＋結合幅を跨ぐ
+          const stepc = this._stepColM(r, c, dc > 0 ? 1 : -1);
+          if (stepc !== c) nc = stepc;
+          else if (this.autoWrapRow) { nc = dc > 0 ? this._firstVisCol() : this._lastVisCol(); nr = r + (dc > 0 ? 1 : -1); }
+        }
+        if (dr !== 0) {
+          nr = this._stepRowM(r, c, dr > 0 ? 1 : -1);   // 縦移動は結合高を跨ぐ
+          if (this.autoWrapCol) {   // 縦の端で列送り（送り先も可視列）
+            if (nr >= this.ROWS) { nr = 0; nc = this._stepVisCol(c, 1); }
+            else if (nr < 0) { nr = this.ROWS - 1; nc = this._stepVisCol(c, -1); }
+          }
         }
+        if (nr === r && nc === c) break;                                       // 端で動かない＝終了
+        r = nr; c = nc;
+        if (r < 0 || r >= this.ROWS || c < 0 || c >= this.COLS) break;          // 範囲外＝setActive のクランプに委ねる
+        if (!this.navSkipReadOnly || !this._isReadOnly(r, c)) break;            // skip無効 or readonly でない＝確定
       }
       this.setActive(r, c);
     }
@@ -2391,7 +2511,11 @@
         if (composing) return;
         if (e.key === 'Enter') { e.preventDefault(); this.commit(); this._advance('enter', e.shiftKey); return; }
         if (e.key === 'Tab') { e.preventDefault(); this.commit(); this._advance('tab', e.shiftKey); return; }
-        if (e.key === 'Escape') {
+        // Esc／編集中の Ctrl+Z ＝ この編集をキャンセルして元値に戻す（nav へ）。
+        // input ベース編集では「打ち始め」時に元値が input に入らないためネイティブ undo では元値に戻せない。
+        // ここで元値（this.data[r][c]＝未確定）に戻す＝Excel流。続けて Ctrl+Z すると nav の history.undo で前の確定操作へ連鎖。
+        const ctrl = e.ctrlKey || e.metaKey;
+        if (e.key === 'Escape' || (ctrl && !e.shiftKey && e.key.toLowerCase() === 'z')) {
           e.preventDefault();
           const r = this.active.r, c = this.active.c, v = this.data[r][c];
           if (this.onEditEnd) { try { this.onEditEnd({ r, c, oldValue: v, newValue: v, canceled: true }); } catch (_) {} }