@threestarsoftware/tssgrid 0.0.10 → 0.1.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.1] - 2026-07-17
+
+### 変更（既定の挙動が変わります）
+- **同梱プラグインの `inline` を既定 ON に**（`TssAutocomplete` / `TssCalendar` / `TssDatetime` / `TssTime`）— **旧挙動に戻すには `inline: false` を明示**してください。
+  - **理由**: 0.1.0 で `inline` を opt-in として出したが、既定 false ＋**プラグイン自身のドキュメント例に `inline` が無い**ため、**「`inline: true` と書いた人だけが直る」**状態だった。例をコピペした人には修正が届かず、出荷されたのは修正ではなく**フラグ**だった。
+  - **既定 false で実際に失われていたもの**（正確に言うと）: IME が使えなくなるわけではない。クリック/F2 でポップアップを開けば、その中の自前 input は普通のフォーカス済み input なので**日本語は普通に打てる**。失われるのは **「セルにいきなり打ち始めて上書き」＝打ち始めの経路**だけ（1文字目が捨てられる／IME 直打ちで編集に入れない）。
+  - **なぜそれが重いか**: それは TssGrid が他ライブラリの回避策を批判した時に挙げた代償そのもの（「セルにいきなり打ち込んで上書きができなくなる。表計算で一番よく使う操作なのに」）。**批判した妥協を自分の既定で出荷していた**ので、既定を反転する。
+  - **代償（日付系）**: 既定では**矢印キーを奪いません**＝カレンダー内の日移動が既定で無くなります（セル移動のまま）。「キー派は打つ／マウス派はクリック」の割り切り。矢印で日を送りたい場合のみ `inline: false`。
+  - **自作カスタムエディタの `editor.inline` は既定 false のまま**（共有 input に乗るには実装側の合意が要るため。宣言しない限り挙動不変）。
+
+### 追加
+- **日付/時刻ピッカーも `inline` 対応：`TssCalendar` / `TssDatetime` / `TssTime`**（プラグイン）— これらは**自前のテキスト入力を持たずポップアップにフォーカスする**型だったため、カスタムエディタとして付けると（`col.format`/`parse` 併用時は特に）**日付をそもそも打ち始められず、クリックで選ぶしかなかった**（＝0.1.0 の `editor.inline` が解いた問題を、同梱の日付系も踏んでいた）。inline では本体の共有 input に乗り、**`6/20` のように直打ちでき（1文字目も落ちない）・IME 直打ちも効く**。ポップアップはフォーカスを奪わず"確認＋クリック補助"に降りる。`TssCalendar` は打った内容に**追従してその月/日へジャンプ**（`onInput`＋列の `parse` を解釈）。日をクリックで確定・Enter で打った値を確定・Esc で取消（本体既定）。
+
+## [0.1.0] - 2026-07-17
+
+### 追加
+- **`TssAutocomplete({ inline: true })`＝「セルに打ちながら候補を絞る」サジェスト**（プラグイン）— 上記 `editor.inline` に載せた版。従来の同プラグインは**自前 input を持つポップアップ**（クリック/F2 で開き、その中に打つ）だったため、**セルに直接打ち始める／IME 直打ちで始める**経路が使えなかった（サンプルは「開いてから打つ」ので症状が見えていなかった）。`inline: true` を付けると自前 input を作らずフォーカスも奪わず、**打鍵の1文字目も IME 直打ちも素のテキスト列と同じ**に効き、候補リストだけを出す。**IME 変換中の ↑↓/Enter は奪わない**（変換確定が最優先＝従来からの流儀を維持）。確定は本体 `commit()`＝関所を通る。`examples/autocomplete.html` を inline 版に更新。**`inline` 無しは従来どおり（挙動不変・opt-in）**。
+- **`editor.inline`＝打鍵の1文字目・IME 直打ちを殺さないカスタムエディタ**（コア）— 従来 `columns[c].editor` を付けた列は**クリック/F2 でしか編集を開始できず**、打鍵は `preventDefault` されて1文字目が捨てられ、IME 直打ち（`compositionstart`）は素通りで編集にすら入れなかった（＝TssGrid の看板である IME 堅牢な直打ちがカスタムエディタ列だけ効かない）。`editor.inline = true` を宣言すると **入力は本体の共有 input のまま**＝**打鍵も IME も素のテキスト列と完全に同じ**になり、エディタは候補表示に徹する型になる（「セルに打ちながら候補を絞るサジェスト/ルックアップ」がこれで作れる）。エディタ側の口: `open(ctx)`（ctx に **`input`**＝共有input / **`setValue(v)`** / `inline:true` を追加）・**`onKeyDown(e, ctx)`**（本体より先に受ける。**IME 変換中も呼ばれる**＝変換中の↑↓を奪わない実装が書ける。`false` で本体既定を止める）・**`onInput(value, ctx)`**（候補の絞り込み用）・`close()`。`icon`/`openOnClick` は inline でもそのまま使える。確定は本体 `commit()`＝関所を通るので validator/parse/format/readOnly/Undo はそのまま。対象は text/number 系（dropdown/checkbox/ネイティブ日付は従来どおり対象外）。**完全 opt-in＝`inline` を書かない既存エディタ（TssCalendar 等）の挙動は一切変わらない**。tssgrid-kintone のルックアップ実装で必要になり起票。
+
+### 修正
+- **非仮想グリッドで↑キー等で先頭行へ移動すると、その行が sticky な列ヘッダの下に潜って読めなくなる不具合を修正**（コアCSS＋JS）— キーボード移動の可視化に使う `scrollIntoView({block:'nearest'})` が、枠内に浮く sticky ヘッダ（≈29px）を考慮せず「一部でも見えていれば再スクロールしない」ため、先頭行がヘッダ下に潜ったまま止まっていた。`buildTable` でヘッダ高を CSS 変数 `--tg-thead-h` にセットし、`td { scroll-margin-top: var(--tg-thead-h) }` でヘッダ高ぶんの余白を確保（`scrollIntoView` がヘッダ下に潜らなくなる。ヘッダ高の変化にも追従・ヘッダ無しは0px）。tssgrid-kintone 実機(Chrome)で発覚・実測。
+- **`filter({ 0: '営業' })` のように「列 index を数値キー」にした絞り込みが効かなかったのを修正**（コア）— `Object.keys` が数値キーを文字列化する（`{0:…}`→`'0'`）ため `_resolveCol('0')` が列 index に解決できず、条件が空＝全行 true（絞り込まれない）になっていた。数値文字列キーは列 index として解決するフォールバックを追加（data キー/見出し名が優先＝未解決の時だけ index 扱い）。関数述語・data キー・見出し名・関数値・AND は従来どおり。tss-filter の漏斗UI経由は元々無影響。
+
 ## [0.0.10] - 2026-07-15
 
 ### 修正

package/README.md

@@ -364,6 +364,34 @@ new TssGrid(el, { columns: [{ editor: myEditor }] });
 - `open` が受け取る `{ grid, r, c, value, td, commit, cancel }` だけ知っていれば作れます。F2 / ダブルクリック / 文字入力で開きます。
 - **`commit(value)` は通常の確定経路（pushCmd）を通る**ので、`validator`/`parse`/`format`/読み取り専用がそのまま効き、**Undo にも積まれます**。
 - 編集中に別セルをクリックすると `cancel()` 相当で閉じます。描画（セルの見た目）は従来どおり `format` 等で制御。
+- ⚠️ 上記の（フォーカスを奪う）エディタは **クリック / F2 で開く**型です。**打鍵の1文字目や IME 直打ちから始めたい**なら次の `inline` を使ってください。
+
+### `editor.inline`: 打鍵・IME 直打ちを殺さないエディタ（サジェスト向け）
+
+`editor.inline = true` を宣言すると、**入力は本体の IME 堅牢な共有 input のまま**で、エディタは「候補を描く」役に徹します。＝**打った1文字目が残り、IME 直打ち（変換）も素のテキスト列と完全に同じ**に効きます。「セルに打ちながら候補を絞るサジェスト／ルックアップ」はこの型で作ります。
+
+```js
+const suggest = {
+  inline: true, icon: '🔍',                 // icon / openOnClick は inline でも使えます
+  open(ctx) { /* ctx.input = 打鍵/IMEが入る共有input。ここに候補ポップアップを添える（フォーカスは奪わない） */ },
+  onInput(value, ctx) { /* 打つたびに呼ばれる＝候補を絞る */ },
+  onKeyDown(e, ctx) {                       // 本体より先に受ける。IME 変換中も呼ばれる
+    if (e.isComposing || e.keyCode === 229) return;   // ★変換中は手を引く（↑↓を奪わない）
+    if (e.key === 'ArrowDown') { /* 候補を選ぶ */ return false; }   // false で本体既定を止める
+    if (e.key === 'Enter') { ctx.commit(選んだ値); return false; }  // commit＝関所を通る
+  },
+  close() { /* 候補を片付ける */ },
+};
+new TssGrid(el, { columns: [{ editor: suggest }] });
+```
+- `ctx` は通常の `{grid,r,c,value,td,commit,cancel}` に加えて **`input`（共有input）/ `setValue(v)`（候補で置換・確定はしない）/ `inline:true`** が入ります。
+- **確定は本体の `commit()`＝関所を通る**ので `validator`/`parse`/`format`/読み取り専用/Undo はそのまま効きます。
+- ポップアップ側は **`mousedown` を `preventDefault`** してフォーカスを奪わないこと（共有 input に打ち続けられる）。
+- 対象は **text/number 系の列**（`dropdown`/`checkbox`/ネイティブ日付は従来どおり対象外）。
+- **自作エディタの `inline` は既定 false**（宣言しない限り挙動は一切変わりません）。共有 input に乗るには実装側の合意が要るためで、ここは opt-in が正しい既定です。
+- **同梱プラグインの `inline` は既定 true**：`TssAutocomplete`（打ちながら候補を絞る）／`TssCalendar`・`TssDatetime`・`TssTime`（**日付/時刻をそのまま直打ち**できる。カレンダーは打った内容に追従してその日へジャンプ）。**何も書かずにコピペした人が、看板どおりの「打ち始めれば書ける」を得ます**。
+  - 日付系は **「キー派は打つ／マウス派はクリック」** の割り切り＝**矢印キーは奪いません**（文字カーソル/セル移動のまま）。伝票入力のように「`6/20` と打つ方が速い」場面向け。
+  - `inline: false` で旧型（ポップアップにフォーカスし ←→↑↓ で日移動）に戻せます。ただし **セルにいきなり打ち始めて上書き**（表計算で一番よく使う操作）ができなくなる＝クリック/F2 で開いてから打つことになります。矢印での日送りが要る場面だけ選んでください。
 
 ### 同梱プラグイン: 休日カレンダー対応の日付ピッカー
 
@@ -381,7 +409,9 @@ const cal = TssCalendar({
 });
 new TssGrid(el, { columns: [{ type: 'date', editor: cal, format: 'yyyy/mm/dd' }] });
 ```
-- セル右端に **📅** が出て**シングルクリックで開閉**（再クリックで閉じる＝トグル）、開いている間も**フィルハンドルで下へコピー可**（ドロップダウンと同じ操作感）。**年・月はプルダウン**で直接ジャンプ。祝日は赤＋**名称ツールチップ**、土日は色分け、キーボード操作（矢印/Enter/Esc/PageUp・Down）。保存値は ISO のまま。
+- セル右端に **📅** が出て**シングルクリックで開閉**（再クリックで閉じる＝トグル）、開いている間も**フィルハンドルで下へコピー可**（ドロップダウンと同じ操作感）。**年・月はプルダウン**で直接ジャンプ。祝日は赤＋**名称ツールチップ**、土日は色分け。保存値は ISO のまま。
+- **打つ人はそのまま打てます**（既定 `inline`）: セルに `6/20` と打ち始めればそのまま編集開始（**1文字目も落ちない・IME 直打ちも効く**）、カレンダーは打った日へ追従。確定は Enter か日をクリック。**矢印はセル移動のまま**（カレンダーは奪いません）。
+  - 矢印/PageUp・Down でカレンダー内を移動する旧型が要るなら `inline: false`（→ [`editor.inline`](#editorinline-打鍵ime-直打ちを殺さないエディタサジェスト向け)）。**セルに直接打ち始める操作は失われます**。
 - 見た目は CSS 変数（`--cal-accent` など）と `tss-cal-*` クラスで自由に（依存ゼロ）。グリッド外でも `cal.openAt(anchorEl, isoValue, onPick)` で単体利用可。
 - `opts`: `icon`(既定 `'📅'`, `''` で消す) / `openOnClick`(既定 true) / `yearMin`・`yearMax`(年プルダウンの範囲) も。
 - 仕組み: カスタムエディタが **`icon` / `openOnClick` を申告**すると、グリッドが右端アイコン表示＋シングルクリック起動を行います（自作エディタでも同様に使えます）。
@@ -769,7 +799,7 @@ new TssGrid(el, { hiddenColumns: [1] });   // 初期で隠す
 | `onBeforeAutofill` / `onAfterAutofill` | `(src,target)=>…` | — | フィル前後。before は `false` で取消。`src`/`target` = `{r0,c0,r1,c1}` |
 | `autoColumnSize` | `boolean \| number` | `false` | 初期化時に列幅を内容に合わせて自動調整（数値=上限px）。`autoSizeColumn`/`autoSizeAllColumns` API・列境界ダブルクリックでも |
 | `columns[c].align` / `valign` | `string` | — | 列既定の整列（→ [整列](#整列--セル単位の読み取り専用実行時)） |
-| `columns[c].editor` | `object \| ()=>object` | — | カスタム編集UI（→ [カスタムエディタ](#カスタムエディタ)） |
+| `columns[c].editor` | `object \| ()=>object` | — | カスタム編集UI（→ [カスタムエディタ](#カスタムエディタ)）。`editor.inline:true` で**打鍵の1文字目・IME 直打ちを殺さない**サジェスト型に（→ [`editor.inline`](#editorinline-打鍵ime-直打ちを殺さないエディタサジェスト向け)） |
 | `copyPaste` | `boolean` | `true` | `false` でコピー/カット/ペーストを無効化 |
 | `minSpareRows` | `number` | `0` | 末尾に常に確保する空行数（Excel風に下へ打ち足せる） |
 | `autoWrapRow` / `autoWrapCol` | `boolean` | `false` | Tab で行末→次行頭 / Enter で列末→次列頭に折り返し |

package/package.json

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

package/plugins/tss-autocomplete.js

@@ -9,6 +9,10 @@
  *
  *  opts:
  *    source   : string[] か (query, ctx)=>string[]。必須。
+ *    inline   : 「セルに打ちながら絞る」型（**既定 true**）。本体の共有 input に乗る＝**打鍵の1文字目も IME 直打ちも
+ *               素のテキスト列と同じに効く**（自前 input を作らず focus も奪わない）。
+ *               inline:false でポップアップの自前 input を開く旧型に戻せるが、**セルにいきなり打ち始めて上書き**が
+ *               できなくなる（＝クリック/F2 で開いてから打つ）。表計算で一番よく使う操作を捨てる選択なので非推奨。
  *    strict   : true=候補から選んだ値のみ許可（既定 false=自由入力可）。
  *    minChars : この文字数以上で候補を出す（既定 0＝開いた時点で全件）。
  *    max      : 候補表示の最大件数（既定 20）。
@@ -22,6 +26,7 @@
 
   function TssAutocomplete(opts) {
     opts = opts || {};
+    var inline = opts.inline !== false;   // true=共有 input に乗る（打鍵/IME直打ちが効く）／false=従来の自前 input ポップアップ
     var getSource = typeof opts.source === 'function' ? opts.source : function () { return opts.source || []; };
     var strict = !!opts.strict;
     var minChars = opts.minChars || 0;
@@ -30,7 +35,7 @@
       : (opts.match === 'startsWith' ? function (it, q) { return norm(it).indexOf(q) === 0; }
         : function (it, q) { return norm(it).indexOf(q) >= 0; });
 
-    var pop, input, list, items = [], hi = -1, composing = false, ref = null, done = false, outside = null;
+    var pop, input, list, items = [], hi = -1, composing = false, ref = null, done = false, outside = null, unbindComp = null;
 
     function filter(q) {
       var ctx = ref ? ref.ctx : {};
@@ -67,11 +72,13 @@
       if (strict) return null;                                  // strict は候補必須
       return input.value;                                       // 自由入力を採用
     }
+    // IME 変換中か（inline では本体の共有 input 上のキーを受けるので keyCode 229 も見る）
+    function imeOn(e) { return composing || e.isComposing || e.keyCode === 229; }
     function onKey(e) {
-      if (e.key === 'ArrowDown') { if (composing || e.isComposing) return; e.preventDefault(); moveHi(1); }
-      else if (e.key === 'ArrowUp') { if (composing || e.isComposing) return; e.preventDefault(); moveHi(-1); }
+      if (e.key === 'ArrowDown') { if (imeOn(e)) return; e.preventDefault(); moveHi(1); }
+      else if (e.key === 'ArrowUp') { if (imeOn(e)) return; e.preventDefault(); moveHi(-1); }
       else if (e.key === 'Enter') {
-        if (composing || e.isComposing) return;                 // ★ IME変換確定の Enter は奪わない
+        if (imeOn(e)) return;                                   // ★ IME変換確定の Enter は奪わない
         e.preventDefault();
         var v = chosenValue(); if (v == null) return;           // strict で候補なし＝確定しない
         commit(v);
@@ -91,30 +98,47 @@
       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>';
+      // inline は候補リストだけ（自前 input を作らない＝打鍵/IME は本体の共有 input のまま）
+      pop.innerHTML = (inline ? '' : '<input class="tss-ac-input" type="text">') + '<div class="tss-ac-list"></div>';
       document.body.appendChild(pop);
-      input = pop.querySelector('.tss-ac-input'); list = pop.querySelector('.tss-ac-list');
-      input.value = value == null ? '' : value;
-      input.addEventListener('compositionstart', function () { composing = true; });
-      input.addEventListener('compositionend', function () { composing = false; render(); });   // 変換確定後に候補更新
-      input.addEventListener('input', function () { if (!composing) render(); });
-      input.addEventListener('keydown', onKey);
-      list.addEventListener('mousedown', function (e) { var it = e.target.closest('.tss-ac-item'); if (it) { e.preventDefault(); commit(items[+it.dataset.i]); } });
+      list = pop.querySelector('.tss-ac-list');
+      if (inline) {
+        input = ctx.input;                    // ★ 打鍵/IME が入る本体の共有 input をそのまま参照（値は本体が持つ）
+        // 変換中は候補を更新しない（classic と同じ挙動）。確定後に更新。
+        var cs = function () { composing = true; }, ce = function () { composing = false; render(); };
+        input.addEventListener('compositionstart', cs);
+        input.addEventListener('compositionend', ce);
+        unbindComp = function () { input.removeEventListener('compositionstart', cs); input.removeEventListener('compositionend', ce); };
+      } else {
+        input = pop.querySelector('.tss-ac-input');
+        input.value = value == null ? '' : value;
+        input.addEventListener('compositionstart', function () { composing = true; });
+        input.addEventListener('compositionend', function () { composing = false; render(); });   // 変換確定後に候補更新
+        input.addEventListener('input', function () { if (!composing) render(); });
+        input.addEventListener('keydown', onKey);
+      }
+      list.addEventListener('mousedown', function (e) { var it = e.target.closest('.tss-ac-item'); if (it) { e.preventDefault(); commit(items[+it.dataset.i]); } });   // preventDefault＝フォーカスを奪わない
       render(); place(anchor);
-      outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) { var v = chosenOnOutside(); if (v == null) cancel(); else commit(v); } };
-      setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
-      input.focus(); input.setSelectionRange(input.value.length, input.value.length);
+      if (!inline) {   // inline は外側クリック/blur を本体（_commitActive / blur）が処理する＝二重に閉じない
+        outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) { var v = chosenOnOutside(); if (v == null) cancel(); else commit(v); } };
+        setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
+        input.focus(); input.setSelectionRange(input.value.length, input.value.length);
+      }
     }
     function chosenOnOutside() { if (strict) { var v = input.value; var src = getSource(v, {}) || []; return src.indexOf(v) >= 0 ? v : null; } return input.value; }
-    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } items = []; hi = -1; composing = false; }
+    function teardown() { if (unbindComp) { unbindComp(); unbindComp = null; } if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } items = []; hi = -1; composing = false; }
     function commit(v) { if (done) return; done = true; var f = ref.ctx.commit; teardown(); f(v); }
     function cancel() { if (done) return; done = true; var f = ref.ctx.cancel; teardown(); if (f) f(); }
 
     return {
+      inline: inline,                                     // true=本体の共有 input に乗る（_usesTextEditor が見る）
       openOnClick: opts.openOnClick !== false,
       icon: opts.icon != null ? opts.icon : '▾',
       open: function (ctx) { show(ctx.td, ctx.value, ctx); },
       close: function () { teardown(); },
+      // ---- inline のみ: 入力/キーは本体の共有 input 経由で届く（自前 listener は張らない）----
+      onInput: inline ? function () { if (!composing) render(); } : undefined,          // 打つたびに候補を絞る（変換中は据え置き）
+      onKeyDown: inline ? function (e) { onKey(e); } : undefined,                        // ↑↓/Enter/Tab/Esc。preventDefault で本体既定を止める
     };
   }
   if (typeof module !== 'undefined' && module.exports) module.exports = TssAutocomplete;

package/plugins/tss-calendar.js

@@ -2,6 +2,13 @@
  *  休日カレンダーを JSON で渡せる（勤怠・シフト等向け）。CSS は tss-calendar.css をクラス/変数で自由に。
  *  使い方（グリッド）: columns: [{ type:'date', editor: TssCalendar({ holidays }) }]
  *  使い方（単体）   : TssCalendar({holidays}).openAt(anchorEl, isoValue, onPick)
+ *
+ *  opts.inline: 「キー派は打つ／マウス派はクリック」の型（**既定 true**）。
+ *    本体の共有 input に乗るので **日付をそのまま直打ちでき（1文字目も落ちない）・IME 直打ちも効く**。
+ *    カレンダーはフォーカスを奪わず"確認＋クリック補助"に降り、**矢印キーは奪わない**（＝文字カーソル/セル移動のまま）。
+ *    打った内容に追従してカレンダーがその月/日へジャンプする。確定は Enter（打った値）or 日をクリック。
+ *    inline:false で旧型（ポップアップにフォーカスし ←→↑↓ で日移動・Enter で選択）に戻せる。
+ *    ただし **セルにいきなり打ち始めて上書き** ができなくなる（クリック/F2 で開いてから打つ）＝矢印で日を送りたい時だけ。
  */
 (function (root) {
   'use strict';
@@ -26,6 +33,7 @@
     var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
     var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
     var pop = null, view = null, sel = null, focus = null, ref = null, done = false, outside = null;
+    var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
     function disabled(d) {
       if (minD && d < minD) return true;
@@ -110,6 +118,9 @@
       pop.addEventListener('keydown', onKey);
       render(); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
+      // inline は「外側クリック/フォーカス」を本体（_commitActive / blur）が持つ＝二重に閉じない・共有 input から
+      // フォーカスを奪わない（＝打ち続けられる）。矢印/Enter/Esc も本体の既定に返す（onKey は pop 未フォーカスなので発火しない）。
+      if (inline) return;
       // 外側クリックで閉じる。ただしアンカー（開いた元セル）は除外＝再クリックはグリッド側でトグル処理させる
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) cancel(); };
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
@@ -125,6 +136,19 @@
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',     // セル右端に表示する合図（opts.icon:'' で消せる）
       openOnClick: opts.openOnClick !== false,        // シングルクリックで開く（既定 ON）
+      inline: inline,                                 // true=共有 input に乗る（_usesTextEditor が見る）
+      // inline のみ: 打った内容にカレンダーが追従（列の parse があれば表示形→保存値に変換して解釈）。
+      // 矢印/Enter/Esc は本体に返す＝onKeyDown は持たない（キー派は打つ・マウス派はクリック）。
+      onInput: inline ? function (v, ctx) {
+        if (!pop) return;
+        var d = null;
+        try {
+          var p = ctx.grid.colCfg(ctx.c).parse;
+          d = parseISO(typeof p === 'function' ? p(v, { r: ctx.r, c: ctx.c }) : v);
+        } catch (e) { d = null; }
+        if (!d) return;                               // 打ちかけ/不正はカレンダーを動かさない
+        sel = d; focus = new Date(d); view = new Date(d.getFullYear(), d.getMonth(), 1); render();
+      } : undefined,
       // 単体ウィジェット: 任意要素にアンカーして開く
       openAt: function (anchorEl, value, onPick) { show(anchorEl, value, function (v) { onPick(v); }, null); },
     };

package/plugins/tss-datetime.js

@@ -3,6 +3,9 @@
  *  使い方（グリッド）: 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
+ *  opts.inline: 既定 true＝本体の共有 input に乗る（日時をそのまま直打ちでき・1文字目も落ちない・IME直打ちも効く／
+ *    ピッカーはフォーカスを奪わずクリック補助に降りる）。inline:false で旧型（ピッカーにフォーカス）に戻せるが、
+ *    **セルにいきなり打ち始めて上書き** ができなくなる（クリック/F2 で開いてから打つ）。
  */
 (function (root) {
   'use strict';
@@ -36,6 +39,7 @@
     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;
+    var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
     function dDisabled(d) { if (minD && d < minD) return true; if (maxD && d > maxD) return true; return false; }
 
@@ -152,6 +156,7 @@
       pop.addEventListener('keydown', onKey);
       render(); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
+      if (inline) return;   // inline は外側クリック/フォーカスを本体が持つ＝共有 input から奪わない（打ち続けられる）
       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();
@@ -165,6 +170,7 @@
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',
       openOnClick: opts.openOnClick !== false,
+      inline: inline,   // true=共有 input に乗る＝日時をそのまま直打ちできる（矢印/Enter/Esc は本体の既定）
       openAt: function (anchorEl, val, onPick) { show(anchorEl, val, function (v) { onPick(v); }, null); },
     };
   }

package/plugins/tss-time.js

@@ -2,6 +2,9 @@
  *  時/分プルダウン方式（業務の任意時刻入力向き）。保存値は常に 24h 'HH:MM'（type:'time' と互換）。
  *  使い方（グリッド）: columns: [{ type:'time', editor: TssTime({ step:15 }) }]
  *  opts: step(分刻み,既定1) / hour12(AM/PM表示,既定false) / icon(既定 '🕐') / openOnClick(既定true) / className
+ *  opts.inline: 既定 true＝本体の共有 input に乗る（時刻をそのまま直打ちでき・1文字目も落ちない・IME直打ちも効く／
+ *    ピッカーはフォーカスを奪わずクリック補助に降りる）。inline:false で旧型（ピッカーにフォーカス）に戻せるが、
+ *    **セルにいきなり打ち始めて上書き** ができなくなる（クリック/F2 で開いてから打つ）。
  */
 (function (root) {
   'use strict';
@@ -13,6 +16,7 @@
     var step = Math.max(1, opts.step || 1);
     var hour12 = !!opts.hour12;
     var pop = null, ref = null, done = false, outside = null;
+    var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
     function opt(val, label, sel) { return '<option value="' + val + '"' + (sel ? ' selected' : '') + '>' + label + '</option>'; }
     function render(cur) {
@@ -70,6 +74,7 @@
       pop.addEventListener('keydown', onKey);
       render(parseHM(value)); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
+      if (inline) return;   // inline は外側クリック/フォーカスを本体が持つ＝共有 input から奪わない（打ち続けられる）
       // 外側クリックは「確定」（時/分を選んで離す＝採用）。未変更なら同値 commit＝実質no-op。アンカーは除外（再クリックはグリッドがトグル）
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) commit(readValue()); };
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
@@ -84,6 +89,7 @@
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '🕐',
       openOnClick: opts.openOnClick !== false,
+      inline: inline,   // true=共有 input に乗る＝時刻をそのまま直打ちできる（矢印/Enter/Esc は本体の既定）
       openAt: function (anchorEl, value, onPick) { show(anchorEl, value, function (v) { onPick(v); }, null); },
     };
   }

package/src/tssgrid.css

@@ -77,7 +77,7 @@
 .tssgrid .tg-table thead th { height: 28px; position: sticky; top: 0; z-index: 6; }
 /* ヘッダはクリックで行/列選択（角は全選択） */
 .tssgrid .tg-table thead th[data-c], .tssgrid .tg-table th.rowhead[data-r], .tssgrid .tg-table th.corner { cursor: pointer; }
-.tssgrid .tg-table td { background: var(--tg-cell-bg); cursor: cell; }
+.tssgrid .tg-table td { background: var(--tg-cell-bg); cursor: cell; scroll-margin-top: var(--tg-thead-h, 0px); }   /* キーボード移動の scrollIntoView が sticky ヘッダ下に潜らないよう、ヘッダ高ぶん余白を確保（--tg-thead-h は buildTable が設定） */
 /* 表示専用（cursor:false）: セルのカーソルを既定に（選択枠・ハイライトは JS 側で非表示） */
 .tssgrid.tg-no-cursor .tg-table td { cursor: default; }
 /* 非表示列: col を幅0にし、セルは padding/罫線を消して内容を overflow:hidden で畳む。

package/src/tssgrid.d.ts

@@ -60,7 +60,7 @@ export interface ColumnDef {
   /** 入力検証。編集/貼付/フィルの全経路に効く。 */
   validator?: (value: any, cell: CellCoord) => ValidatorResult;
   /** カスタム編集UI（薄いオブジェクト契約 or それを返す関数）。 */
-  editor?: object | (() => object);
+  editor?: EditorDef | (() => EditorDef);
   /** 入力の正規化（保存値へ変換）。 */
   parse?: (input: string, cell: CellCoord) => any;
   /** 表示の整形（保存値→表示）。文字列 or 宣言的 CellFormat。 */
@@ -212,6 +212,39 @@ export interface CsvOptions {
   delimiter?: string; [k: string]: any;
 }
 
+/** カスタム編集UIが `open` で受け取る ctx。確定は commit＝本体の関所（検証/整形/readOnly/履歴）を通る。 */
+export interface EditorContext {
+  grid: TssGrid; r: number; c: number; value: any; td: HTMLTableCellElement | null;
+  commit(value?: any): void; cancel(): void;
+  /** inline エディタのみ: true。 */
+  inline?: boolean;
+  /** inline エディタのみ: 打鍵/IME が入る本体の共有 input（読み取り・listen 用）。 */
+  input?: HTMLInputElement | HTMLTextAreaElement;
+  /** inline エディタのみ: 共有 input の値を差し替える（候補で置換する用・確定はしない）。 */
+  setValue?(value: any): void;
+  [k: string]: any;
+}
+/** カスタム編集UIの契約（`columns[c].editor`）。 */
+export interface EditorDef {
+  open(ctx: EditorContext): void;
+  close?(): void;
+  /** セル右端に出すアイコン。 */
+  icon?: string;
+  /** シングルクリックで開く（ドロップダウン同様）。 */
+  openOnClick?: boolean;
+  /**
+   * `true` で「本体の共有 input に乗るエディタ」＝**打鍵の1文字目・IME 直打ちが素のテキスト列と同じに効く**。
+   * 入力は本体（IME 堅牢な共有 input）に任せ、エディタは候補表示等だけを担当する型。text/number 系の列で有効
+   * （dropdown/checkbox/ネイティブ日付は従来どおり対象外）。未指定なら従来のフォーカスを奪うエディタ（挙動不変）。
+   */
+  inline?: boolean;
+  /** inline のみ: 本体より先にキーを受ける（**IME 変換中も呼ばれる**＝変換中の↑↓を奪わない実装が書ける）。`false` で本体既定を止める。 */
+  onKeyDown?(e: KeyboardEvent, ctx: EditorContext): boolean | void;
+  /** inline のみ: 共有 input の入力通知（候補の絞り込み用）。 */
+  onInput?(value: string, ctx: EditorContext): void;
+  [k: string]: any;
+}
+
 /** 右クリックの対象種別。カスタムメニュー項目の name/disabled/hidden の第2引数、callback の {ctx} で受け取る。 */
 export interface MenuContext { on: 'col' | 'row' | 'cell' | 'corner'; r: number; c: number; }
 

package/src/tssgrid.js

@@ -154,6 +154,7 @@
       this._headerSel = null;   // 'col'/'row'/'all'=列/行/全選択モード（結合に拡張せず実列/行にクランプ＝Excel流）。null=通常セル選択
       this._selCols = new Set(); // 飛び飛びの列選択（Ctrl+ヘッダクリック）。_headerSel==='col' の時だけ有効。連続選択は矩形と一致
       this._selRows = new Set(); // 飛び飛びの行選択（Ctrl+行ヘッダクリック）。_headerSel==='row' の時だけ有効
+      this._inlineEd = null; this._inlineCtx = null;   // inline エディタ（editor.inline=true）: 共有 input に乗るエディタの現在値
       this.disjointSelect = opts.disjointSelect !== false;   // Ctrl+ヘッダで行/列を飛び飛び複数選択（false で無効＝Ctrl+クリックは単一選択に戻る）
       // リサイズ（列幅・行高）
       // 列幅 colW[c]=px（未指定は既定）。指定方法は3通り、優先度＝実行時リサイズ/明示colW > columns[c].width > 既定:
@@ -495,6 +496,7 @@
       if (typeof pred === 'object') {
         const conds = Object.keys(pred).map(k => {
           let ci = this._resolveCol(k); if (ci < 0) ci = this.headers.indexOf(k);   // data キー → 見出し名でも解決
+          if (ci < 0 && /^\d+$/.test(k) && +k < this.COLS) ci = +k;   // 数値文字列キー {0:…} は列 index として解決（Object.keys が数値キーを文字列化するため。data キー優先＝上で未解決の時だけ）
           const want = pred[k]; return { ci, test: typeof want === 'function' ? want : (v => String(v) === String(want)) };
         }).filter(x => x.ci >= 0);
         return row => conds.every(cd => cd.test(row[cd.ci]));
@@ -928,9 +930,12 @@
       return null;
     }
     _usesTextEditor(c) {
-      if (this.colCfg(c).editor && !this.colCfg(c).multiline) return false;   // カスタムエディタは共有 input を使わない（multiline は textarea を優先）
+      const ed = this.colCfg(c).editor;
+      // カスタムエディタは共有 input を使わない（multiline は textarea を優先）。
+      // ただし editor.inline=true は「入力は本体の IME 堅牢な共有 input に任せ、エディタは候補を描くだけ」＝共有 input に乗る。
+      if (ed && !ed.inline && !this.colCfg(c).multiline) return false;
       const t = this.colType(c);
-      return t !== 'checkbox' && t !== 'dropdown' && !this._nativeInputType(c);
+      return t !== 'checkbox' && t !== 'dropdown' && !this._nativeInputType(c);   // inline でも dropdown/checkbox/ネイティブ日付は対象外
     }
     // 保存値 → セル表示文字列（format 適用）。getData は保存値のまま。
     _displayValue(r, c) {
@@ -1310,6 +1315,7 @@
       if (this.onHeaderRender && this.colHeaders) this._applyHeaderRender();   // 外部がヘッダthを装飾（ソートアイコン等）。高さ確定前に走らせて幾何へ反映
       const thd = this.table.querySelector('thead');
       this._theadH = (this.colHeaders && thd) ? thd.offsetHeight : 0;   // ヘッダ高をキャッシュ（クリップ計算用）
+      this.wrap.style.setProperty('--tg-thead-h', this._theadH + 'px');   // scrollIntoView が sticky ヘッダに潜らないよう td の scroll-margin-top に使う（動的ヘッダ高に追従）
       this._applyTableWidth();
       this._applyStretch();
       this._applyHeaderSticky();
@@ -1619,7 +1625,35 @@
       const baseTop = parseFloat(el.style.top) || 0;             // place がセル上端(content座標)を入れている
       el.style.top = (up ? baseTop + cellH - h : baseTop) + 'px';   // up なら下端をセル下端に合わせて上へ伸ばす
     }
+    // inline エディタ（editor.inline=true）を開く。入力は共有 input のまま＝打鍵の1文字目も IME 直打ちも殺さない。
+    // エディタはフォーカスを持たない前提（ポップアップ側は mousedown を preventDefault すること）。
+    // 確定は本体 commit＝関所を通るので検証/整形/readOnly/履歴はそのまま効く。
+    _openInlineEditor() {
+      const r = this.active.r, c = this.active.c, def = this.colCfg(c).editor;
+      if (!def || !def.inline || this._inlineEd) return;
+      const ed = typeof def === 'function' ? def() : def;
+      if (!ed || typeof ed.open !== 'function') return;
+      const grid = this;
+      const ctx = {
+        grid, r, c, inline: true,
+        value: this.data[r][c],
+        td: this.cellEl(r, c),
+        input: this.editor,                                     // 打鍵/IME が入る共有 input（読み取り・listen 用）
+        setValue(v) { grid.editor.value = grid._cellStr(v); },  // 候補で置き換える用（確定はしない）
+        commit(v) { if (v != null) grid.editor.value = grid._cellStr(v); grid.commit(); grid.toNav(); grid.updateSelectionUI(); },
+        cancel() { grid.setActive(r, c); },                     // 元値に戻して nav（Esc 相当）
+      };
+      this._inlineEd = ed; this._inlineCtx = ctx;
+      try { ed.open(ctx); } catch (_) { this._inlineEd = null; this._inlineCtx = null; }
+    }
+    _closeInlineEditor() {
+      const ed = this._inlineEd;
+      if (!ed) return;
+      this._inlineEd = null; this._inlineCtx = null;
+      if (ed.close) { try { ed.close(); } catch (_) {} }
+    }
     toNav() {
+      this._closeInlineEditor();   // 編集終了の締めどころ（commit/Esc/blur/選択移動＝全経路がここを通る）
       this.mode = 'nav';
       this.editor.className = (this.editor === this._edMulti) ? 'tg-editor tg-editor-multi nav' : 'tg-editor nav';
       if (this.editor === this._edInput) this.editor.type = 'text';   // type は input 専用（textarea は readonly で throw する）
@@ -1642,6 +1676,7 @@
       const _t = this.editor.type;
       if (caretEnd && _t !== 'date' && _t !== 'time' && _t !== 'number') { const l = this.editor.value.length; this.editor.setSelectionRange(l, l); }
       if (this.editor === this._edMulti) this._growMultiEditor();   // multiline は編集開始時に内容ぶん伸ばす
+      if (starting) this._openInlineEditor();   // inline エディタ列なら ed.open(ctx)（共有 input はそのまま＝打鍵/IME を維持）
       if (starting && this.onEditStart) { try { this.onEditStart({ r: this.active.r, c: this.active.c, value: this.editor.value }); } catch (_) {} }
     }
     _fireSelection() {
@@ -2542,6 +2577,10 @@
       // input と textarea(multiline) の両方に同じ編集入口リスナを張る（this.editor はアクティブ列で張り替わる）。
       [this._edInput, this._edMulti].forEach((ed) => {
         ed.addEventListener('keydown', (e) => this._onKey(e));
+        // inline エディタへ入力を通知（打った/変換確定した内容で候補を絞る用）
+        ed.addEventListener('input', () => {
+          if (this._inlineEd && this._inlineEd.onInput) { try { this._inlineEd.onInput(this.editor.value, this._inlineCtx); } catch (_) {} }
+        });
         ed.addEventListener('compositionstart', () => {
           if (this.mode !== 'nav') return;
           if (this._usesTextEditor(this.active.c)) this.toEdit(null, false);
@@ -2596,7 +2635,7 @@
         // ドロップダウンはシングルクリックで即開く
         if (this.colType(c) === 'dropdown') { this.dragging = false; this._openSelect(); }
         // カスタムエディタが openOnClick を申告していれば、ドロップダウン同様シングルクリックで開く（再クリックは開かない＝トグル）
-        else { const ed = this.colCfg(c).editor; if (ed && ed.openOnClick && !wasOpenHere) { this.dragging = false; this._openCustomEditor(r, c); } }
+        else { const ed = this.colCfg(c).editor; if (ed && ed.openOnClick && !wasOpenHere) { this.dragging = false; if (ed.inline) this._beginEdit(r, c); else this._openCustomEditor(r, c); } }   // inline は共有 input を開く（_beginEdit→toEdit→ed.open）
       });
       // ヘッダ全選択チェックは mousedown で処理済み。click のネイティブ・トグルを止めて二重反転を防ぐ
       this.table.addEventListener('click', (e) => {
@@ -2733,7 +2772,8 @@
     // ---- 型に応じた編集の入口 ----
     _beginEdit(r, c) {
       this.clearCopyMarquee();   // 編集開始でコピー/カットのマーキー（点線）を消す（dropdown/checkbox/カスタム含む）
-      if (this.colCfg(c).editor) { this._openCustomEditor(r, c); return; }   // カスタムエディタ
+      const _ed = this.colCfg(c).editor;
+      if (_ed && !_ed.inline) { this._openCustomEditor(r, c); return; }   // カスタムエディタ（inline は共有 input の経路へ落として toEdit が open する）
       const t = this.colType(c);
       if (t === 'checkbox') { this._toggleCheckbox(r, c); return; }
       if (t === 'dropdown') { this._openSelect(); return; }
@@ -2845,6 +2885,12 @@
       const composing = e.isComposing || e.keyCode === 229;
       // onBeforeKeyDown: グリッドより先にユーザーへ。false / preventDefault で既定を止める。
       if (this.onBeforeKeyDown) { let r; try { r = this.onBeforeKeyDown(e); } catch (_) {} if (r === false || e.defaultPrevented) return; }
+      // inline エディタにもキーを先に渡す（IME 変換中も渡す＝「変換中の↑↓は奪わない」実装を書けるように。
+      // 本体の `if (composing) return` より前＝エディタ側で isComposing/keyCode 229 を見て手を引ける）。false で既定を止める。
+      if (this._inlineEd && this._inlineEd.onKeyDown) {
+        let r; try { r = this._inlineEd.onKeyDown(e, this._inlineCtx); } catch (_) {}
+        if (r === false || e.defaultPrevented) return;
+      }
       // カスタムショートカット（IME 変換中は除く）
       if (!composing && this._runShortcuts(e)) return;
       if (this.mode === 'edit') {