@threestarsoftware/tssgrid 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -0,0 +1,86 @@
+# 変更履歴 (Changelog)
+
+TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
+数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
+
+## [0.0.7] - 2026-07-10
+
+### 修正
+- カスタムエディタ（`tss-calendar` / `tss-datetime` 等、`body` 直下にポップアップを出す型）を**開いたままフィルタ/ソート/フリーズ/再描画**すると、ポップアップが画面に取り残されて浮く不具合を修正（`buildTable()` が開いているエディタを閉じていなかった）。1修正で全カスタムエディタに効く。
+- ポップアップ型エディタ（`tss-calendar` / `tss-time` / `tss-datetime` / `tss-autocomplete`）で、**別のセルを続けて開く**と前のポップアップと `document` リスナが片付かず取り残し／リークする不具合を修正（各 `show()` 冒頭で `teardown()` するよう統一）。
+
+### 補足（挙動変化・影響範囲）
+- カスタムエディタを開いたまま再描画/フィルタ/ソートすると、そのエディタは**キャンセル確定**となり `onEditEnd({ canceled: true })` が発火するようになりました（従来は発火せずポップアップだけ取り残していた）。
+- ネイティブのドロップダウン（`<select>`）は永続要素のため上記いずれの影響も受けません（確認済み）。
+
+## [0.0.6] - 2026-06-30
+
+### 追加
+- ドラッグ選択・フィルハンドルが**表示領域の外（上下左右）まで自動スクロールしながら伸びる**ように。ビューも一緒にスクロールし、速度は端からのはみ出し量に比例（少し超え＝ゆっくり／大きく超え＝速く）。仮想スクロール時・非仮想時の両方で動作。
+- `rowHeaderLabel` オプション: 行ヘッダの表示を指定（`false`＝数字なしの空ヘッダ／関数 `(r)=>文字列`＝カスタム表示／未指定＝従来の行番号）。空にしても溝は残り、クリックでの行選択は効く。
+- `rowReorder: 'header'`: 行ヘッダーセル（左端の行番号の列）**全体**を行移動の掴み手に（クリック=行選択／ドラッグ=移動）。従来の `rowReorder: true` は ⠿ アイコンのみ掴める（不変）。
+- `rowReorderMark` オプション: 行ヘッダーの ⠿ マークの位置を `'before'`（番号の前・既定）/ `'after'`（番号の後）/ `false`（出さない）から選べる。
+
+### 修正
+- 仮想スクロールでドラッグ選択／フィルが窓の端で止まっていた問題。
+- フィルが端を1行超えただけで大量に伸びてしまう暴走を修正（伸ばす先を常にポインタ位置のセルに）。
+- `examples/virtual.html`: 部署ドロップダウンの選択肢が出ない不具合（`options` 指定漏れ）を修正／表示中インジケータの更新でツールバーがずれる問題を修正／パネルを縦リサイズ可能に。
+
+### ドキュメント
+- 比較表（`examples/compare.html`）: 仮想スクロールの行を「対応（`virtual:true`・opt-in）」に更新し、デモリンクに `virtual.html` を追加。
+
+## [0.0.5] - 2026-06-25
+
+### 追加
+- **仮想スクロール `virtual: true`**（コア）— 大量行を「画面に見える窓ぶん＋バッファだけ」描画。全件を一度に DOM 化しないので、初期描画が一瞬・スクロールも軽い。有効化はオプション一行。
+  - 自社調べ: 10万行で初回描画 ≈ 46ms（全件描画 ≈ 10.5秒に対して）。デモ: `examples/virtual.html`。
+  - 制約(v1): 行高一定／固定行列・折り返し・セル結合は非対応（指定時は自動無効化）。
+- **`rowHeaderWidth` オプション**（コア）— 大量行で行番号の桁数が増える時に行ヘッダ幅を調整。
+
+### ドキュメント
+- README: 非破壊フィルタの説明を実測値に正確化（「絞り込み後が軽い」を自社調べ値で）＋仮想スクロール節を追加。
+- 比較表（`examples/compare.html`）に Tabulator を追加（公式デモ準拠）。
+
+## [0.0.4] - 2026-06-24
+
+### 追加
+- 見積書デモ（`examples/quote.html`）— 印刷／日付ピッカー／列幅固定／Enter 横送り（`nextCell`）。
+- `navSkipReadOnly` オプション（Tab/Enter 送りで readonly セルを飛ばす＝伝票入力向け）。
+- プラグイン `tss-datetime`（日付＋時刻の同時ピッカー・曜日つき・別フィールド結合・時刻のみ対応）。
+
+### 修正
+- 編集中の `Ctrl+Z` で元の値に戻せない不具合（input 編集を Esc 同等でキャンセル）。
+- グリッド外周の右・下が二重線になる不具合（最終行/列のセル罫線を枠線に一本化）。
+- 全幅見出し帯の結合セルで列/行選択が他列へ広がる不具合（Excel 流にクランプ）。
+- 結合解除で見出しラベルが消える不具合。
+
+## [0.0.3] - 2026-06-23
+
+### 追加
+- プラグイン `tss-sum`（条件付き合計）＋請求書デモで採用。
+
+### 修正
+- 請求書デモの合計欄を別グリッド化して金額列に完全整列／No. 列見出しが選択色になる不具合／印刷で選択枠を非表示。
+
+## [0.0.2] - 2026-06-22
+
+### 追加
+- **npm パッケージ化**（`@threestarsoftware/tssgrid`）＋公開 API の型定義 `tssgrid.d.ts`。
+- 請求書（インボイス対応）デモ。
+- サイト: `/docs` ドキュメント・`/api` リファレンス（`.d.ts` から自動生成）・会社名フッター。
+
+### 修正
+- 行/列ヘッダ選択中の右クリックで複数選択が解除される不具合。
+
+## [0.0.1] - 2026-06-19
+
+- 初回公開。コア（編集グリッド／日本語 IME 堅牢・全角半角・セル結合・固定行列・非破壊フィルタ・条件付き書式・コピー/貼付・Undo/Redo ほか）＋同梱プラグイン＋サンプル一式。
+- 目玉デモ（方眼ガント／在庫管理）をサイトでライブ化。
+
+[0.0.7]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.7
+[0.0.6]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.6
+[0.0.5]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.5
+[0.0.4]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.4
+[0.0.3]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.3
+[0.0.2]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.2
+[0.0.1]: https://github.com/threestarsoftware/TssGrid/releases/tag/v0.0.1

package/README.md

@@ -269,7 +269,7 @@ new TssGrid(el, { virtual: { buffer: 10 }, data });   // 窓の上下バッフ
 
 ### 同梱プラグイン: ヘッダ オートフィルタ（filter UI）
 
-`plugins/tss-filter.js`＋`.css`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 各見出しの**ロート（漏斗）アイコン**をクリックで**値チェックリスト＋検索**のポップアップ（Excel風。ソートの▲▼と区別できるアイコン）。複数列の条件は **AND**。中身は上の**コア `filter()` を呼ぶだけ**。動く例: [`examples/filter-ui.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-ui.html)。
+`plugins/tss-filter.js`＋`.css`＝ 各見出しの**ロート（漏斗）アイコン**をクリックで**値チェックリスト＋検索**のポップアップ（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">
@@ -284,7 +284,7 @@ grid.getPlugin('filter').clearAll();            // 全条件クリア
 
 ### 同梱プラグイン: 共有マスタ（複数グリッドで1データ）
 
-`plugins/tss-shared.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ **1つのマスタ（同じ行データ）を複数グリッドで共有**。左右を**別フィルタ/別ソート**で表示でき、**片方の編集がもう片方の同じ行へ即反映**（行参照を共有）。A系/B系を並べて突き合わせ編集する用途。動く例: [`examples/shared-master.html`](https://tssgrid.threestarsoftware.co.jp/examples/shared-master.html)。
+`plugins/tss-shared.js`＝ **1つのマスタ（同じ行データ）を複数グリッドで共有**。左右を**別フィルタ/別ソート**で表示でき、**片方の編集がもう片方の同じ行へ即反映**（行参照を共有）。A系/B系を並べて突き合わせ編集する用途。動く例: [`examples/shared-master.html`](https://tssgrid.threestarsoftware.co.jp/examples/shared-master.html)。
 
 ```html
 <script src="plugins/tss-shared.js"></script>
@@ -335,7 +335,7 @@ TssGrid.registerPlugin('autosave', autoSavePlugin);   // 名前登録 → plugin
 
 ## カスタムエディタ
 
-組込エディタ（text/dropdown/checkbox/date/time/number）以外に、**独自の編集UI**を列に差せます。`columns[c].editor` に**薄いオブジェクト契約**を渡すだけ<!--DEV-->（無依存）<!--/DEV-->。
+組込エディタ（text/dropdown/checkbox/date/time/number）以外に、**独自の編集UI**を列に差せます。`columns[c].editor` に**薄いオブジェクト契約**を渡すだけ。
 
 ```js
 const myEditor = {
@@ -362,7 +362,7 @@ new TssGrid(el, { columns: [{ editor: myEditor }] });
 
 ### 同梱プラグイン: 休日カレンダー対応の日付ピッカー
 
-`plugins/tss-calendar.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ ネイティブ `<input type=date>` では出来ない**会社の休日カレンダー（JSON）対応**の日付ピッカー。勤怠・シフト・予約などで効きます（動く例: [`examples/calendar.html`](https://tssgrid.threestarsoftware.co.jp/examples/calendar.html)）。
+`plugins/tss-calendar.js`＝ ネイティブ `<input type=date>` では出来ない**会社の休日カレンダー（JSON）対応**の日付ピッカー。勤怠・シフト・予約などで効きます（動く例: [`examples/calendar.html`](https://tssgrid.threestarsoftware.co.jp/examples/calendar.html)）。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-calendar.css">
@@ -383,7 +383,7 @@ new TssGrid(el, { columns: [{ type: 'date', editor: cal, format: 'yyyy/mm/dd' }]
 
 ### 同梱プラグイン: 時刻ピッカー（時/分プルダウン）
 
-`plugins/tss-time.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ 業務の時刻入力向けの**時/分プルダウン**ピッカー（クロックフェイスのようなリッチさは省き、任意時刻を素早く）。保存値は常に **24h `'HH:MM'`**（組込 `type:'time'` と互換）。動く例: [`examples/time.html`](https://tssgrid.threestarsoftware.co.jp/examples/time.html)。
+`plugins/tss-time.js`＝ 業務の時刻入力向けの**時/分プルダウン**ピッカー（クロックフェイスのようなリッチさは省き、任意時刻を素早く）。保存値は常に **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">
@@ -398,7 +398,7 @@ new TssGrid(el, { columns: [{ type: 'time', editor: t }] });
 
 ### 同梱プラグイン: 派生列（formula / computed column）
 
-`plugins/tss-formula.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝「その行の値だけから計算する列」を `columns[c].formula` 関数で書けるようにする。金額＝数量×単価、税込＝金額×1.1 のような**派生列**を宣言的に。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)。
+`plugins/tss-formula.js`＝「その行の値だけから計算する列」を `columns[c].formula` 関数で書けるようにする。金額＝数量×単価、税込＝金額×1.1 のような**派生列**を宣言的に。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)。
 
 ```html
 <script src="plugins/tss-formula.js"></script>
@@ -421,7 +421,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: 列の集計（totals / 縦の SUM・平均…）
 
-`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）。
+`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）。
 
 ```html
 <script src="plugins/tss-totals.js"></script>
@@ -442,7 +442,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: 条件付き合計（tss-sum / ラベル付き合計行・整列表示）
 
-`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)（インボイス請求書の合計欄）。
+`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)（インボイス請求書の合計欄）。
 
 ```html
 <script src="plugins/tss-merge.js"></script>  <!-- ラベルの横結合に利用 -->
@@ -466,7 +466,7 @@ const sum = TssSum.attach(grid, document.getElementById('sumgrid'), {
 
 ### 同梱プラグイン: 残高／累計（running total・縦の連鎖）
 
-`plugins/tss-running.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝「**前の行の結果 ＋ この行の増減**」で縦に積む列。`formula`（行内）でも `totals`（全体合計）でも出せない**縦方向の連鎖**を担う。出納帳/通帳の**残高**、在庫受払の**在庫数**、経費・ポイントの**累計**など。動く例: [`examples/running.html`](https://tssgrid.threestarsoftware.co.jp/examples/running.html)（現金出納帳＝入金・出金→残高）。
+`plugins/tss-running.js`＝「**前の行の結果 ＋ この行の増減**」で縦に積む列。`formula`（行内）でも `totals`（全体合計）でも出せない**縦方向の連鎖**を担う。出納帳/通帳の**残高**、在庫受払の**在庫数**、経費・ポイントの**累計**など。動く例: [`examples/running.html`](https://tssgrid.threestarsoftware.co.jp/examples/running.html)（現金出納帳＝入金・出金→残高）。
 
 ```html
 <script src="plugins/tss-running.js"></script>
@@ -485,11 +485,11 @@ new TssGrid(el, {
 - `column`(残高列) / `initial`(前残) / `delta` か `step` / `skipEmpty`(全列空の行は連鎖を進めず空表示、既定true)。
 - **行ドラッグ移動(rowReorder)併用時**は順序が変わるので `onAfterRowMove` で `handle.recompute()` を呼ぶ。
 
-> 「**行＝formula／列＝totals／縦＝running**」の3点が揃う。いずれも `setValueRaw`＋`onAfterChange` ラップで動く**<!--DEV-->コア無改変<!--/DEV-->プラグイン**。
+> 「**行＝formula／列＝totals／縦＝running**」の3点が揃う。いずれも `setValueRaw`＋`onAfterChange` ラップで動く**プラグイン**。
 
 ### 同梱プラグイン: 氏名→フリガナ 自動入力（furigana・辞書不要）
 
-`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)。
+`plugins/tss-furigana.js`（**辞書不要**）＝ 漢字を入力（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>
@@ -506,7 +506,7 @@ new TssGrid(el, {
 
 ### 同梱プラグイン: セル内ミニ計算式（calc・=12*3）
 
-`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)。
+`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)。
 
 ```html
 <script src="plugins/tss-calc.js"></script>
@@ -522,7 +522,7 @@ plugins: [ TssCalc.plugin({ columns: ['quantity', 'price'] }) ]   // columns 省
 
 ### 同梱プラグイン: オートコンプリート（autocomplete エディタ）
 
-`plugins/tss-autocomplete.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 自由入力＋**候補の絞り込み**。固定 dropdown の上位版で「だいたい決まってるが新規もある」項目（取引先・商品名）向け。**IME変換中の Enter は奪わない**（変換確定が最優先）。動く例: [`examples/autocomplete.html`](https://tssgrid.threestarsoftware.co.jp/examples/autocomplete.html)。
+`plugins/tss-autocomplete.js`＝ 自由入力＋**候補の絞り込み**。固定 dropdown の上位版で「だいたい決まってるが新規もある」項目（取引先・商品名）向け。**IME変換中の Enter は奪わない**（変換確定が最優先）。動く例: [`examples/autocomplete.html`](https://tssgrid.threestarsoftware.co.jp/examples/autocomplete.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-autocomplete.css">
@@ -540,7 +540,7 @@ columns: [
 
 ### 同梱プラグイン: セル内スパークライン（sparkline・ミニグラフ）
 
-`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)（月次売上→動向グラフ・編集でライブ更新）。
+`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)（月次売上→動向グラフ・編集でライブ更新）。
 
 ```html
 <script src="plugins/tss-sparkline.js"></script>
@@ -554,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` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料<!--DEV-->・無依存<!--/DEV-->で**。
+- 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料で**。
 
 ### 同梱プラグイン: セル内 横棒グラフ（bar・データバー）
 
-`plugins/tss-bar.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ セルの数値を**横棒**で描く（認知率・進捗%・スコア）。`html:true`＋`format` seam。`type:'number'` 併用で**バーのまま編集**（値を打つと伸びる）。動く例: [`examples/bar.html`](https://tssgrid.threestarsoftware.co.jp/examples/bar.html)。
+`plugins/tss-bar.js`＝ セルの数値を**横棒**で描く（認知率・進捗%・スコア）。`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>
@@ -573,7 +573,7 @@ columns: [
 
 ### 同梱プラグイン: ヒートマップ / 背景データバー（cellStyle）
 
-`plugins/tss-heatmap.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ コアの `cellStyle` フックに乗せる**連続色（ヒートマップ）**と**背景データバー**。`tss-bar.js`（前景の棒＋ラベル）と違い、**セル背景**を塗る＝**数値はそのまま見せて編集できる**。動く例: [`examples/heatmap.html`](https://tssgrid.threestarsoftware.co.jp/examples/heatmap.html)。
+`plugins/tss-heatmap.js`＝ コアの `cellStyle` フックに乗せる**連続色（ヒートマップ）**と**背景データバー**。`tss-bar.js`（前景の棒＋ラベル）と違い、**セル背景**を塗る＝**数値はそのまま見せて編集できる**。動く例: [`examples/heatmap.html`](https://tssgrid.threestarsoftware.co.jp/examples/heatmap.html)。
 
 ```html
 <script src="plugins/tss-heatmap.js"></script>
@@ -587,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）**。どれも<!--DEV-->無依存・<!--/DEV-->ノービルド。
+> 「セル内グラフ」3点: **前景の折れ線/棒＝`html:true`+`format`（tss-sparkline / tss-bar）**、**背景の連続色/バー＝`cellStyle`（tss-heatmap）**。どれもノービルド。
 
 ### グラフ連携（Chart.js などと）— 編集でライブ更新
 
@@ -601,7 +601,7 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 
 ### 同梱プラグイン: 2択トグル（toggle・有効｜無効）
 
-`plugins/tss-toggle.js`＋`.css`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
+`plugins/tss-toggle.js`＋`.css`＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-toggle.css">
@@ -618,7 +618,7 @@ plugins: [ TssToggle.plugin({ columns: {
 
 ### 同梱プラグイン: セル結合（merge・横/縦/矩形）
 
-`plugins/tss-merge.js`<!--DEV-->（**無依存**）<!--/DEV-->＝ データセルの**矩形結合**（`colspan`×`rowspan`）。左上の**アンカーが値・編集・選択の対象**で、覆われた従属セルは**描画スキップ＋読み取り専用**（貼り付け・フィルは弾く）。動く例: [`examples/merge.html`](https://tssgrid.threestarsoftware.co.jp/examples/merge.html)。（見出しの結合は `nestedHeaders` を参照）
+`plugins/tss-merge.js`＝ データセルの**矩形結合**（`colspan`×`rowspan`）。左上の**アンカーが値・編集・選択の対象**で、覆われた従属セルは**描画スキップ＋読み取り専用**（貼り付け・フィルは弾く）。動く例: [`examples/merge.html`](https://tssgrid.threestarsoftware.co.jp/examples/merge.html)。（見出しの結合は `nestedHeaders` を参照）
 
 ```html
 <script src="plugins/tss-merge.js"></script>
@@ -644,7 +644,7 @@ plugins: [ TssMerge.plugin({ merges: [
 
 ### 同梱プラグイン: 同期スクロール（syncscroll・左右2表を並べて比較）
 
-`plugins/tss-syncscroll.js`<!--DEV-->（**無依存・コア無改変**）<!--/DEV-->＝ 並べた複数グリッドのスクロールを連動（Excel「並べて比較＋同時にスクロール」相当）。A系/B系で別々に絞り込んだ表を**突き合わせながら編集**する用途に。動く例: [`examples/sync-scroll.html`](https://tssgrid.threestarsoftware.co.jp/examples/sync-scroll.html)。
+`plugins/tss-syncscroll.js`＝ 並べた複数グリッドのスクロールを連動（Excel「並べて比較＋同時にスクロール」相当）。A系/B系で別々に絞り込んだ表を**突き合わせながら編集**する用途に。動く例: [`examples/sync-scroll.html`](https://tssgrid.threestarsoftware.co.jp/examples/sync-scroll.html)。
 
 ```html
 <script src="plugins/tss-syncscroll.js"></script>
@@ -911,7 +911,7 @@ new TssGrid(el, {
 
 ### 入力の正規化 / 表示の整形（`parse` / `format`）
 
-**保存値**（`getData()` が返す内部値）と、**入力**・**表示**を分離できます。外部ライブラリは同梱せず、必要なら列のフックに差し込む方針です<!--DEV-->（コアは無依存のまま）<!--/DEV-->。
+**保存値**（`getData()` が返す内部値）と、**入力**・**表示**を分離できます。外部ライブラリは同梱せず、必要なら列のフックに差し込む方針です。
 
 | フック | 向き | 役割 |
 |---|---|---|

package/package.json

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

package/plugins/tss-autocomplete.js

@@ -1,5 +1,4 @@
 /*! TssAutocomplete — 候補サジェスト付きテキスト入力（TssGrid カスタムエディタ）。
- *  DEV: 無依存・コア無改変（dev専用メモ・公開時strip）
  *
  *  自由入力＋候補の絞り込み。固定 dropdown の上位版（取引先名・商品名など「だいたい決まってるが新規もある」項目向け）。
  *  **IME変換中の Enter は奪わない**（変換確定が最優先＝TssGrid の流儀）。
@@ -89,6 +88,7 @@
       pop.style.minWidth = r.width + 'px';
     }
     function show(anchor, value, ctx) {
+      teardown();   // 既に開いていれば先に片付ける（open-while-open の取り残し防止・tss-calendar と同方針）
       done = false; ref = { ctx: ctx };
       pop = document.createElement('div'); pop.className = 'tss-ac' + (opts.className ? ' ' + opts.className : ''); pop.tabIndex = -1;
       pop.innerHTML = '<input class="tss-ac-input" type="text"><div class="tss-ac-list"></div>';

package/plugins/tss-bar.js

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

package/plugins/tss-calc.js

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

package/plugins/tss-calendar.js

@@ -1,5 +1,4 @@
 /*! TssCalendar — 日付ピッカー（TssGrid のカスタムエディタ / 単体ウィジェット両用）
- *  DEV: 無依存
  *  休日カレンダーを JSON で渡せる（勤怠・シフト等向け）。CSS は tss-calendar.css をクラス/変数で自由に。
  *  使い方（グリッド）: columns: [{ type:'date', editor: TssCalendar({ holidays }) }]
  *  使い方（単体）   : TssCalendar({holidays}).openAt(anchorEl, isoValue, onPick)
@@ -99,6 +98,7 @@
       if (k === 'PageUp' || k === 'PageDown') { e.preventDefault(); view = new Date(view.getFullYear(), view.getMonth() + (k === 'PageUp' ? -1 : 1), 1); render(); }
     }
     function show(anchor, value, onPick, onCancel) {
+      teardown();   // 既に開いていれば先に片付ける（前の pop 除去＋outside リスナ解除・open-while-open の取り残し防止）
       done = false; sel = parseISO(value);
       view = sel ? new Date(sel.getFullYear(), sel.getMonth(), 1) : new Date();
       focus = sel ? new Date(sel) : new Date();

package/plugins/tss-datetime.js

@@ -1,5 +1,4 @@
 /*! 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)
@@ -138,6 +137,7 @@
       else if (e.key === 'Enter') { e.preventDefault(); commit(value()); }
     }
     function show(anchor, val, onPick, onCancel) {
+      teardown();   // 既に開いていれば先に片付ける（open-while-open の取り残し防止・tss-calendar と同方針）
       done = false;
       var p = parseDT(val), tp = p ? null : parseTimeOnly(val);   // 日付付き or 時刻のみ
       selD = p ? p.d : null;

package/plugins/tss-filter.js

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

package/plugins/tss-formula.js

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

package/plugins/tss-furigana.js

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

package/plugins/tss-heatmap.js

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

package/plugins/tss-merge.js

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

package/plugins/tss-messages.js

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

package/plugins/tss-running.js

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

package/plugins/tss-shared.js

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

package/plugins/tss-sparkline.js

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

package/plugins/tss-syncscroll.js

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

package/plugins/tss-time.js

@@ -1,5 +1,4 @@
 /*! 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
@@ -62,6 +61,7 @@
       else if (e.key === 'Enter') { e.preventDefault(); commit(readValue()); }
     }
     function show(anchor, value, onPick, onCancel) {
+      teardown();   // 既に開いていれば先に片付ける（open-while-open の取り残し防止・tss-calendar と同方針）
       done = false;
       pop = document.createElement('div'); pop.className = 'tss-time' + (opts.className ? ' ' + opts.className : ''); pop.tabIndex = -1;
       document.body.appendChild(pop);

package/plugins/tss-toggle.js

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

package/plugins/tss-totals.js

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

package/src/tssgrid.css

@@ -134,6 +134,11 @@
 .tssgrid .tg-rowmove { cursor: grab; color: #b3b6c8; margin-right: 2px; font-size: 11px; line-height: 1; user-select: none; vertical-align: 1px; }
 .tssgrid .tg-rowmove:hover { color: var(--tg-accent); }
 .tssgrid .tg-rowmove:active { cursor: grabbing; }
+.tssgrid .tg-rowmove.tg-mark-after { margin-right: 0; margin-left: 4px; }   /* ⠿ を番号の後ろに置く時の間隔 */
+.tssgrid .tg-rowmove.tg-mark-only { margin: 0; }   /* 番号なし=⠿だけ＝前後の区別をやめて中央に */
+/* rowReorder:'header' = 行ヘッダーセル全体が移動ハンドル（クリック=選択／ドラッグ=移動） */
+.tssgrid .tg-table th.rowhead.tg-rowmove-cell { cursor: grab; }
+.tssgrid .tg-table th.rowhead.tg-rowmove-cell:active { cursor: grabbing; }
 .tssgrid .tg-colgrip:hover { background: var(--tg-edit-accent); opacity: .5; }
 .tssgrid .tg-rowgrip:hover { background: var(--tg-edit-accent); opacity: .5; }
 /* リサイズのプレビュー線（ドラッグ中だけ表示、離して確定） */

package/src/tssgrid.d.ts

@@ -128,6 +128,12 @@ export interface TssGridOptions {
   rowHeaders?: boolean;
   /** 行番号列の幅(px)。既定 40。大量行で桁数が増える時に広げる。 */
   rowHeaderWidth?: number;
+  /** 行ヘッダの表示内容。未指定=行番号(r+1) / false=数字なし(空) / (r)=>文字列=カスタム表示。 */
+  rowHeaderLabel?: false | ((r: number) => string | number);
+  /** 行のドラッグ並べ替え。true=行ヘッダーセルの ⠿ アイコンを掴んで移動 / 'header'=行ヘッダーセル全体が移動ハンドル（クリック=選択／ドラッグ=移動）。 */
+  rowReorder?: boolean | 'header';
+  /** 行ヘッダーの ⠿ マークの位置。'before'=番号の前（既定）/ 'after'=番号の後 / false=マークを出さない。 */
+  rowReorderMark?: 'before' | 'after' | false;
   /** 仮想スクロール（固定行高ウィンドウイング）。大量行を可視窓だけ描画。true か { buffer:窓上下バッファ行数(既定6) }。
    *  制約(v1): 行高一定／固定行列・折り返し・セル結合は非対応（指定時は自動無効化）。 */
   virtual?: boolean | { buffer?: number };

package/src/tssgrid.js

@@ -146,6 +146,7 @@
 
       this.active = { r: 0, c: 0 }; this.extent = { r: 0, c: 0 };
       this.mode = 'nav'; this.dragging = false; this.filling = null;
+      this._asRAF = 0; this._dragDir = 0; this._fillRow = null;   // ドラッグ/フィルの端自動スクロール状態
       this.pendingCut = null;
       this.headerDrag = null; this._colAnchor = 0; this._rowAnchor = 0;  // 行/列ヘッダ選択
       this._headerSel = null;   // 'col'/'row'/'all'=列/行/全選択モード（結合に拡張せず実列/行にクランプ＝Excel流）。null=通常セル選択
@@ -184,9 +185,12 @@
       // 行/列ヘッダの表示（false で行番号列・ヘッダ行を隠す）
       this.rowHeaders = opts.rowHeaders !== false;
       this.rowHeaderW = (opts.rowHeaderWidth | 0) || 40;   // 行番号列の幅(px)。大量行で桁数が増える時に広げる
+      this.rowHeaderLabel = opts.rowHeaderLabel;   // 行ヘッダ表示: 未指定=行番号(r+1) / false=数字なし(空) / (r)=>文字列=カスタム
       this.colHeaders = opts.colHeaders !== false;
       // 行ヘッダの「つまみ」をドラッグして行を並べ替える（行番号列が必要）
       this.rowReorder = !!opts.rowReorder;
+      this.rowReorderWhole = opts.rowReorder === 'header';   // 'header'=行ヘッダーセル全体が移動ハンドル（クリック=選択/ドラッグ=移動）／true=⠿アイコンのみ
+      this.rowReorderMark = opts.rowReorderMark === undefined ? 'before' : opts.rowReorderMark;   // ⠿の位置: 'before'(番号の前/既定) | 'after'(番号の後) | false(出さない)
       // 選択カーソル（緑の選択枠・範囲・セルハイライト・フィルハンドル）を表示するか。
       // false で表示専用グリッド向けに非表示（内部の選択は保持＝コピーは可）。
       this.cursor = opts.cursor !== false;
@@ -522,6 +526,7 @@
       if (this._destroyed) return;
       this._destroyed = true;
       if (this._vRAF) { try { cancelAnimationFrame(this._vRAF); } catch (_) {} this._vRAF = 0; }   // 仮想スクロールの保留フレームを破棄
+      this._stopAutoScroll();   // ドラッグ自動スクロールの保留フレームを破棄
       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; }
@@ -983,6 +988,13 @@
     _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 ? this.rowHeaderW : 0; }   // 行ヘッダ列の幅（非表示なら 0）
+    // 行ヘッダの表示内容: false=空（数字なし）/ 関数=カスタム（エスケープ）/ 既定=行番号(r+1)。
+    _rowHeadLabel(r) {
+      const L = this.rowHeaderLabel;
+      if (L === false) return '';
+      if (typeof L === 'function') { let v; try { v = L(r); } catch (_) {} return TssGrid.esc(v == null ? '' : v); }
+      return (r + 1);
+    }
     // ---- 列の非表示 ----
     _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; }
@@ -1112,9 +1124,15 @@
     _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 canMove = rh && this.rowReorder && !this._hasVMerge();
+      const lbl = this._rowHeadLabel(r);
+      const after = this.rowReorderMark === 'after' && lbl !== '';   // 番号が無いなら「前/後」は無意味＝中央に固定（マージンも消す）
+      const markCls = 'tg-rowmove' + (lbl === '' ? ' tg-mark-only' : (after ? ' tg-mark-after' : ''));
+      const mark = (canMove && this.rowReorderMark !== false) ? '<span class="' + markCls + '" title="ドラッグで行を移動">⠿</span>' : '';
+      const inner = after ? (lbl + mark) : (mark + lbl);   // ⠿ を番号の前/後に（rowReorderMark）。番号なしは前後どちらでも中央
+      const rhCls = (canMove && this.rowReorderWhole) ? ' tg-rowmove-cell' : '';   // 'header'=行ヘッダーセル全体を掴み手に（grab カーソル）。番号/⠿の表示は独立
       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>' : '');
+      let html = '<tr data-r="' + r + '" class="tg-row' + rcls + '" style="height:' + this._rowHeight(r) + 'px">' + (rh ? '<th class="rowhead' + rhCls + '" data-r="' + r + '">' + inner + 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 で従属列ぶんを覆う
@@ -1200,6 +1218,7 @@
       this._renderWindow(this._vWindow(), false);   // 窓を即同期（place 前に DOM を確定）
     }
     buildTable() {
+      if (this._customEditor && this._customCancel) this._customCancel();   // 開いているカスタムエディタを閉じる（body直下ポップアップの取り残し防止・_commitActive と同じ扱い）
       this._selhdrFg = null;   // 選択ヘッダ文字色キャッシュ破棄（テーマ変更に追従）
       const rh = this.rowHeaders;
       let html = '<colgroup>' + (rh ? '<col style="width:' + this.rowHeaderW + 'px">' : '');
@@ -1698,7 +1717,10 @@
       } else if (th.dataset.r != null) {                // 行ヘッダ
         const r = +th.dataset.r;
         if (e.shiftKey) this._extendRow(r); else this.selectRow(r);
-        this.editor.focus(); this.headerDrag = 'row';
+        this.editor.focus();
+        // 'header'モード: 行ヘッダーセル全体が移動ハンドル＝行を選択した上で移動を armする（クリック=選択のまま／ドラッグで移動）。縦結合/フィルタ中は不可。
+        if (this.rowReorderWhole && !e.shiftKey && !this._hasVMerge() && !this._allRows) this._startRowMove(e);
+        else this.headerDrag = 'row';   // 通常: ドラッグで複数行選択
       } else {                                          // 左上の角 → 全選択
         this.selectAll(); this.editor.focus();
       }
@@ -2197,6 +2219,66 @@
     clearCopyMarquee() { this.copybox.style.display = 'none'; this.pendingCut = null; }
 
     _tdAtPoint(e) { const el = document.elementFromPoint(e.clientX, e.clientY); return el && el.closest ? el.closest('td[data-r]') : null; }
+    // ポインタ Y から絶対行を算出（td が無い窓外/スペーサ上でも使える＝仮想スクロールのドラッグ用。一定行高モデル）。
+    _rowFromPointerY(clientY) {
+      const wr = this.wrap.getBoundingClientRect();
+      const contentY = clientY - wr.top + this.wrap.scrollTop - (this.colHeaders ? (this._theadH || 0) : 0);
+      return Math.max(0, Math.min(this.ROWS - 1, Math.floor(contentY / this.defRowH)));
+    }
+    // ポインタ X から列を算出（_colLefts 累積から。隠し列は飛ばす）。
+    _colFromPointerX(clientX) {
+      const wr = this.wrap.getBoundingClientRect(), x = clientX - wr.left + this.wrap.scrollLeft, L = this._colLefts;
+      if (L) for (let c = this.COLS - 1; c >= 0; c--) if (!this._isHidden(c) && x >= L[c]) return c;
+      return this.extent.c;
+    }
+    _stopAutoScroll() { if (this._asRAF) { try { cancelAnimationFrame(this._asRAF); } catch (_) {} this._asRAF = 0; } this._dragDir = 0; }
+    _updateFillPreview(r, c, alt) {
+      this._fillRow = r;
+      const fr = this.fillRectFromPointer(r, c, this.filling.src, alt);
+      if (fr) { this.placeRect(this.fillpreview, fr.r0, fr.c0, fr.r1, fr.c1); this.fillpreview.style.display = 'block'; }
+      else this.fillpreview.style.display = 'none';
+    }
+    // ドラッグ/フィル中に上下端を越えたら自動スクロールしながら選択/プレビューを伸ばす。
+    // 重要: 伸ばす先は「カウンタ加算」でなく常に【ポインタ位置の行】＝端を1pxだけ超えたら1行しか伸びない（暴走しない）。
+    // 自動スクロール速度は端からのはみ出し量に比例（少し超えた＝ゆっくり / 大きく超えた＝速く）。
+    _edgeAutoScroll(e, mode) {
+      this._dragY = e.clientY; this._dragX = e.clientX; this._dragAlt = !!e.altKey; this._dragMode = mode;
+      const r = this._rowFromPointerY(e.clientY), c = this._colFromPointerX(e.clientX);
+      if (mode === 'drag') this._extendTo(r, c); else this._updateFillPreview(r, c, this._dragAlt);   // まずポインタ位置のセルへ
+      const wr = this.wrap.getBoundingClientRect();
+      const headB = wr.top + (this.colHeaders ? (this._theadH || 0) : 0);   // 上端＝ヘッダ下
+      const leftB = wr.left + this._frozenPaneW();                          // 左端＝固定ペイン(行番号+固定列)の右
+      const past = e.clientY > wr.bottom || e.clientY < headB || e.clientX > wr.right || e.clientX < leftB;
+      if (past && !this._asRAF) this._asRAF = requestAnimationFrame(() => this._autoScrollTick());
+    }
+    _autoScrollTick() {
+      this._asRAF = 0;
+      if (!this.dragging && !this.filling) return;
+      const wr = this.wrap.getBoundingClientRect();
+      const headB = wr.top + (this.colHeaders ? (this._theadH || 0) : 0), leftB = wr.left + this._frozenPaneW();
+      const amp = d => Math.min(24, 2 + d * 0.2);   // px/フレーム＝はみ出し量に比例（上限24・暴走しない）
+      let v = 0, vh = 0;
+      if (this._dragY > wr.bottom) v = amp(this._dragY - wr.bottom); else if (this._dragY < headB) v = -amp(headB - this._dragY);
+      if (this._dragX > wr.right) vh = amp(this._dragX - wr.right); else if (this._dragX < leftB) vh = -amp(leftB - this._dragX);
+      if (v !== 0) {
+        const before = this.wrap.scrollTop;
+        this.wrap.scrollTop = Math.max(0, before + v);
+        if (this.wrap.scrollTop !== before && this.virtual) this._renderWindow(this._vWindow(), false);   // 縦は仮想時のみ再窓（非仮想で呼ぶと tbody を壊す）
+      }
+      if (vh !== 0) this.wrap.scrollLeft = Math.max(0, this.wrap.scrollLeft + vh);   // 横は全列描画なので scrollLeft だけ
+      const r = this._rowFromPointerY(this._dragY), c = this._colFromPointerX(this._dragX);   // 伸ばす先は常にポインタのセル
+      if (this._dragMode === 'drag') this._extendTo(r, c); else this._updateFillPreview(r, c, this._dragAlt);
+      const maxTop = this.wrap.scrollHeight - this.wrap.clientHeight, maxLeft = this.wrap.scrollWidth - this.wrap.clientWidth;
+      const vStuck = (v > 0 && this.wrap.scrollTop >= maxTop) || (v < 0 && this.wrap.scrollTop <= 0);
+      const hStuck = (vh > 0 && this.wrap.scrollLeft >= maxLeft) || (vh < 0 && this.wrap.scrollLeft <= 0);
+      if ((v !== 0 && !vStuck) || (vh !== 0 && !hStuck)) this._asRAF = requestAnimationFrame(() => this._autoScrollTick());
+    }
+    // setExtent の自動可視化(_vEnsureVisible)を伴わない版＝自動スクロールは _autoScrollTick が手動制御するため、二重スクロールを避ける。
+    _extendTo(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._fireSelection();
+    }
 
     // スクロール / リサイズでセル位置が動いた時、エディタと選択枠を貼り直す
     _reflow() {
@@ -2248,7 +2330,7 @@
         const cls = e.target.classList;
         if (cls && cls.contains('tg-colgrip')) { this._startColResize(e); return; }  // 列幅リサイズ
         if (cls && cls.contains('tg-rowgrip')) { this._startRowResize(e); return; }  // 行高リサイズ
-        if (cls && cls.contains('tg-rowmove')) { this._startRowMove(e); return; }    // 行つまみドラッグ移動
+        if (cls && cls.contains('tg-rowmove') && !this.rowReorderWhole) { this._startRowMove(e); return; }    // ⠿つまみドラッグ移動（'header'モードはセル全体扱い＝_onHeaderMouseDown 経由で選択も伴う）
         const th = e.target.closest('th');
         if (th) { this._onHeaderMouseDown(e, th); return; }   // 行/列/全体 選択
         const td = e.target.closest('td[data-r]'); if (!td) return;
@@ -2278,7 +2360,7 @@
         const td = e.target.closest('td[data-r]'); if (!td) return;
         this.setActive(+td.dataset.r, +td.dataset.c); this._beginEdit(this.active.r, this.active.c);
       });
-      this.fillhandle.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); this.filling = { src: this.rectRange() }; });
+      this.fillhandle.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); this.filling = { src: this.rectRange() }; this._fillRow = null; });
       // 右クリックメニュー（行/列の挿入・削除）
       this.table.addEventListener('contextmenu', (e) => this._onContextMenu(e));
       this.menuEl.addEventListener('mousedown', (e) => {
@@ -2346,12 +2428,15 @@
           }
           return;
         }
-        if (this.dragging) { const td = this._tdAtPoint(e); if (td) this.setExtent(+td.dataset.r, +td.dataset.c); }
+        if (this.dragging) {
+          const td = this._tdAtPoint(e);
+          if (td) { this._stopAutoScroll(); this.setExtent(+td.dataset.r, +td.dataset.c); }
+          else this._edgeAutoScroll(e, 'drag');   // 窓外/端＝自動スクロール＋モデル幾何で伸ばす
+        }
         else if (this.filling) {
-          const td = this._tdAtPoint(e); if (!td) return;
-          const fr = this.fillRectFromPointer(+td.dataset.r, +td.dataset.c, this.filling.src, e.altKey);
-          if (fr) { this.placeRect(this.fillpreview, fr.r0, fr.c0, fr.r1, fr.c1); this.fillpreview.style.display = 'block'; }
-          else this.fillpreview.style.display = 'none';
+          const td = this._tdAtPoint(e);
+          if (td) { this._stopAutoScroll(); this._updateFillPreview(+td.dataset.r, +td.dataset.c, e.altKey); }
+          else this._edgeAutoScroll(e, 'fill');
         }
       });
       this._on(document, 'mouseup', (e) => {
@@ -2370,8 +2455,9 @@
           return;
         }
         if (this.headerDrag) { this.headerDrag = null; return; }
-        if (this.dragging) { this.dragging = false; return; }
+        if (this.dragging) { this.dragging = false; this._stopAutoScroll(); return; }
         if (this.filling) {
+          this._stopAutoScroll();
           // autoInsertRow: フィルハンドルをテーブル下端より下へドロップしたら、足りない行を追加（縦フィル時）
           if (this.fillAutoInsertRow && this.fillDirection !== 'horizontal' && !this._tdAtPoint(e)) {
             const tb = this.table.getBoundingClientRect();
@@ -2381,8 +2467,11 @@
               this.buildTable();
             }
           }
-          const td = this._tdAtPoint(e) || this.cellEl(this.filling.src.r1, this.filling.src.c1);
-          const fr = this.fillRectFromPointer(+td.dataset.r, +td.dataset.c, this.filling.src, e.altKey);
+          // 確定の対象セル: td があればそれ、無ければ（窓外）モデル幾何＝直近のフィル行/ポインタ位置から。
+          const td = this._tdAtPoint(e);
+          const tr = td ? +td.dataset.r : (this._fillRow != null ? this._fillRow : this._rowFromPointerY(e.clientY));
+          const tc = td ? +td.dataset.c : this._colFromPointerX(e.clientX);
+          const fr = this.fillRectFromPointer(tr, tc, this.filling.src, e.altKey);
           this.fillpreview.style.display = 'none';
           const src = this.filling.src; this.filling = null;
           if (fr) { this.doFill(src, fr, e.ctrlKey || e.metaKey); this.selectRect(fr.r0, fr.c0, fr.r1, fr.c1); }