@threestarsoftware/tssgrid 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.13] - 2026-09-24
+
+### 追加
+- **エディタ系プラグイン6つに型定義 `.d.ts` を同梱（TypeScript ファースト）** — `columns[c].editor` に入れるエディタ工場プラグインを **`import` するだけで型が効く**ように。対象は `tss-combo` / `tss-autocomplete` / `tss-cascade` / `tss-calendar` / `tss-datetime` / `tss-time`。UMD 形（`export =` ＋ `export as namespace`）なので **module import でも `<script>` グローバルでも**型が効く。戻り値は `EditorDef` を満たし、静的メソッド（`TssCombo.codeOf` / `TssCascade.pathFormat`・`pathOf` / `TssDatetime.format`）や単体 `openAt` も型付け。`package.json` の `exports` に6プラグインの `types` エントリを追加（その他の `usePlugin`/`format` 系プラグインは従来どおり untyped＝必要なら5行のアンビエント宣言で補える。README 参照）。コア無改変。
+
+## [0.1.12] - 2026-09-24
+
+### 追加
+- **コード付きプルダウン＋「その他」で自由入力 プラグイン `tss-combo`**（プラグイン・無依存・コア無改変）— 「**選択肢から選ぶ。ただし『その他』を選んだら自由入力**」を、業務側で**その他かどうかを分岐せず** **(コード, 値) のペア**で扱えるカスタムエディタ（`columns[c].editor` 契約に乗る）。**コードはそのまま**（選んだ項目の code／その他は固定 code）、**値だけ**が「選択ラベル or 入力文字列」に変わる。値列にエディタを付け `codeField` で**別のコード列へ code を書き戻す**（`setValueRaw`＝派生値・`readOnly` 列にも書ける）。`options` は `{code,label}` か文字列配列、`other` 省略で自由入力なし（素のコード選択）。既存の「その他」値（選択肢に無い値）は開くと**入力欄に復元**。undo/redo・貼付で code を追従させたい時用に `TssCombo.codeOf({options,other})` ヘルパ。動く例 `examples/combo-other.html`（tss-combo の各パターン＝コード+名称両表示/hidden/その他なし/文字列options ＋ autocomplete・2セル方式の比較も）。
+
 ## [0.1.11] - 2026-09-16
 
 ### 修正

package/README.md

@@ -56,6 +56,18 @@ import '@threestarsoftware/tssgrid/tssgrid.css';
 ```
 **型定義 (`.d.ts`) 同梱**なので TypeScript ではそのまま補完が効きます（APIリファレンス → [tssgrid…/api](https://tssgrid.threestarsoftware.co.jp/api.html)）。
 
+**プラグインの型（TypeScript）**: エディタ系プラグインは **`.d.ts` 同梱で `import` するだけで型が効きます**（`.js` 付きで import）:
+```ts
+import TssCombo from '@threestarsoftware/tssgrid/plugins/tss-combo.js';   // ← 型が効く
+// 対応: tss-combo / tss-autocomplete / tss-cascade / tss-calendar / tss-datetime / tss-time
+columns: [{ data: 'pay', editor: TssCombo({ options: [{ code: '01', label: '現金' }], other: { code: '99', label: 'その他' }, codeField: 'payCode' }) }];
+```
+それ以外のプラグイン（`usePlugin` 系・`format` ヘルパ系）は型定義がまだ無いので、必要なら5行のアンビエント宣言で補えます（`editor.open/close` を持つ戻り値は `EditorDef`）:
+```ts
+import type { EditorDef } from '@threestarsoftware/tssgrid';
+declare function TssXxx(opts: any): EditorDef;   // 未同梱プラグインの暫定宣言
+```
+
 **Node / CommonJS**:
 
 ```js
@@ -647,6 +659,29 @@ columns: [
 - ↑↓で候補移動・Enter確定・Esc取消・クリック選択。`source`(配列 or 関数) / `strict`(候補のみ) / `minChars` / `max` / `match`(`includes`/`startsWith`/関数) / `openOnClick`。
 - カスタムエディタ契約（`editor.open/close`）に乗るだけ。見た目は `tss-ac-*` クラスと `--ac-*` 変数で。
 
+### 同梱プラグイン: コード付きプルダウン＋その他自由入力（tss-combo）
+
+`plugins/tss-combo.js`＝ 「**選択肢から選ぶ。ただし『その他』を選んだら自由入力**」を、業務側で**その他かどうかを分岐せず** **(コード, 値) のペア**で扱えるようにするエディタ。**コードはそのまま**（選んだ項目の code／その他は固定 code）、**値だけ**が「選択ラベル or 入力文字列」に変わる。動く例: [`examples/combo-other.html`](https://tssgrid.threestarsoftware.co.jp/examples/combo-other.html)（tss-combo の各パターン＋ autocomplete / 2セル方式の比較も）。
+
+```html
+<link rel="stylesheet" href="plugins/tss-combo.css">
+<script src="plugins/tss-combo.js"></script>
+```
+```js
+columns: [
+  { data: 'payCode', readOnly: true },                  // コード列（hidden 運用も可＝hiddenColumns:[…]）
+  { data: 'payName', editor: TssCombo({
+      options: [ { code:'01', label:'現金' }, { code:'02', label:'振込' } ],
+      other:     { code:'99', label:'その他' },          // 選ぶと入力欄に切替（省略で自由入力なし）
+      codeField: 'payCode',                              // コードの書き戻し先（data キー or 列 index）
+  }) },
+];
+// 通常項目 → (payCode, payName) = (その code, label)／その他 → ('99', 入力文字列)
+```
+- 値列にエディタを付け、`codeField` で**別のコード列へ code を書き戻す**（`setValueRaw`＝派生値・`readOnly` 列にも書ける）。`options` は `{code,label}` か文字列配列（code=label）。既存の「その他」値（選択肢に無い値）は開くと**入力欄に復元**。
+- undo/redo・貼付で code を値に追従させたい時は `TssCombo.codeOf({options, other})` を `onAfterChange` に噛ませる（任意）。
+- 見た目は `tg-combo*` クラス、色は `--tg-accent` を流用。`openOnClick` / `otherPlaceholder` / `icon` / `className`。
+
 ### 同梱プラグイン: セル内スパークライン（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)（月次売上→動向グラフ・編集でライブ更新）。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
@@ -35,6 +35,30 @@
       "default": "./src/tssgrid.js"
     },
     "./tssgrid.css": "./src/tssgrid.css",
+    "./plugins/tss-combo.js": {
+      "types": "./plugins/tss-combo.d.ts",
+      "default": "./plugins/tss-combo.js"
+    },
+    "./plugins/tss-autocomplete.js": {
+      "types": "./plugins/tss-autocomplete.d.ts",
+      "default": "./plugins/tss-autocomplete.js"
+    },
+    "./plugins/tss-cascade.js": {
+      "types": "./plugins/tss-cascade.d.ts",
+      "default": "./plugins/tss-cascade.js"
+    },
+    "./plugins/tss-calendar.js": {
+      "types": "./plugins/tss-calendar.d.ts",
+      "default": "./plugins/tss-calendar.js"
+    },
+    "./plugins/tss-datetime.js": {
+      "types": "./plugins/tss-datetime.d.ts",
+      "default": "./plugins/tss-datetime.js"
+    },
+    "./plugins/tss-time.js": {
+      "types": "./plugins/tss-time.d.ts",
+      "default": "./plugins/tss-time.js"
+    },
     "./plugins/*": "./plugins/*",
     "./package.json": "./package.json"
   },

package/plugins/tss-autocomplete.d.ts

@@ -0,0 +1,32 @@
+// TssAutocomplete — 候補サジェスト付きテキスト入力（TssGrid カスタムエディタ）。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssAutocomplete;
+export as namespace TssAutocomplete;
+
+declare function TssAutocomplete(opts: TssAutocomplete.Options): EditorDef;
+
+declare namespace TssAutocomplete {
+  interface SourceCtx { row: any; r: number; c: number; grid: any; }
+
+  interface Options {
+    /** 候補。配列 or `(query, ctx) => string[]`（動的候補）。 */
+    source: string[] | ((query: string, ctx: SourceCtx) => string[]);
+    /** 共有 input に乗る型（既定 true）＝打鍵の1文字目・IME 直打ちが効く。false で自前 input ポップアップ。 */
+    inline?: boolean;
+    /** true=候補から選んだ値のみ許可（既定 false=自由入力可）。 */
+    strict?: boolean;
+    /** この文字数以上で候補を出す（既定 0=開いた時点で全件）。 */
+    minChars?: number;
+    /** 候補表示の最大件数（既定 20）。 */
+    max?: number;
+    /** 照合方法（既定 'includes'）。大文字小文字は無視。 */
+    match?: 'includes' | 'startsWith' | ((item: string, query: string) => boolean);
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '▾'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+}

package/plugins/tss-calendar.d.ts

@@ -0,0 +1,44 @@
+// TssCalendar — 休日対応カレンダー（TssGrid カスタムエディタ／単体ピッカーとしても）。保存値は 'YYYY-MM-DD'。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssCalendar;
+export as namespace TssCalendar;
+
+declare function TssCalendar(opts?: TssCalendar.Options): TssCalendar.Editor;
+
+declare namespace TssCalendar {
+  /** 休日マップ。`'YYYY-MM-DD'` → 名称文字列 or `{name, type?}`。 */
+  type Holidays = Record<string, string | { name: string; type?: string }>;
+
+  interface Options {
+    holidays?: Holidays;
+    /** 週末とみなす曜日（0=日, 6=土。既定 [0,6]）。 */
+    weekend?: number[];
+    /** 曜日ラベル（既定 ['日','月',…,'土']）。 */
+    weekLabels?: string[];
+    /** 月見出し（既定 `y年(m+1)月`）。 */
+    monthLabel?: (year: number, month: number) => string;
+    /** 選択可能範囲（'YYYY-MM-DD'）。 */
+    min?: string;
+    max?: string;
+    /** 年プルダウンの範囲。 */
+    yearMin?: number;
+    yearMax?: number;
+    /** 選択不可にする種別（例 ['holiday','weekend']）。 */
+    disable?: Array<'holiday' | 'weekend' | string>;
+    /** 共有 input に乗る型（既定 true）＝直打ち可・矢印は本体へ。false でフォーカス奪取型。 */
+    inline?: boolean;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '📅'。'' で消す）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  /** グリッドの `editor` として使えるほか、単体で `openAt` を呼べる。 */
+  interface Editor extends EditorDef {
+    /** アンカー要素の下に開き、日付選択で `onPick(iso)` を呼ぶ（単体ピッカー用）。 */
+    openAt(anchorEl: Element, isoValue: string, onPick: (iso: string) => void): void;
+  }
+}

package/plugins/tss-cascade.d.ts

@@ -0,0 +1,26 @@
+// TssCascade — 多段（フライアウト）プルダウン（TssGrid カスタムエディタ・ポップアップ型）。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssCascade;
+export as namespace TssCascade;
+
+declare function TssCascade(opts: TssCascade.Options): EditorDef;
+
+declare namespace TssCascade {
+  /** ノード。枝は `children`、葉は `value`（未指定なら `label` を保存）。 */
+  interface Node { label: string; value?: string | number; children?: Node[]; }
+
+  interface Options {
+    /** 入れ子の選択肢。 */
+    options: Node[];
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  /** 列 format 用: 値 → 「大 / 中 / 小」のパス文字列を返す関数。 */
+  function pathFormat(options: Node[], opts?: { separator?: string }): (value: any) => string;
+  /** 値 → パス文字列（単発）。 */
+  function pathOf(options: Node[], value: any, separator?: string): string;
+}

package/plugins/tss-combo.css

@@ -0,0 +1,26 @@
+/* TssCombo — コード付きプルダウン＋その他自由入力（plugins/tss-combo.js）。色は --tg-accent を流用。 */
+.tg-combo {
+  position: fixed; z-index: 1000; min-width: 150px; max-height: 60vh; overflow: auto;
+  background: #fff; color: #1f2733; border: 1px solid #c4ccd6; border-radius: 8px;
+  box-shadow: 0 6px 22px rgba(20, 40, 80, .22);
+  font: 13px "Meiryo UI", "Segoe UI", sans-serif; padding: 4px; box-sizing: border-box;
+}
+.tg-combo .tg-combo-item {
+  padding: 5px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; outline: none;
+}
+.tg-combo .tg-combo-item:hover,
+.tg-combo .tg-combo-item.active { background: var(--tg-accent, #1573c0); color: #fff; }
+.tg-combo .tg-combo-other { font-style: italic; opacity: .95; }
+.tg-combo .tg-combo-sep { height: 1px; background: #e2e7ee; margin: 4px 6px; }
+/* その他モードの入力欄 */
+.tg-combo .tg-combo-inputwrap { padding: 4px; min-width: 180px; }
+.tg-combo .tg-combo-input {
+  width: 100%; box-sizing: border-box; padding: 5px 8px; font: inherit;
+  border: 1px solid #c4ccd6; border-radius: 5px; outline: none;
+}
+.tg-combo .tg-combo-input:focus { border-color: var(--tg-accent, #1573c0); }
+.tg-combo .tg-combo-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
+.tg-combo .tg-combo-actions button {
+  padding: 3px 12px; font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid #c4ccd6; background: #f5f7fa;
+}
+.tg-combo .tg-combo-actions .tg-combo-ok { background: var(--tg-accent, #1573c0); color: #fff; border-color: transparent; }

package/plugins/tss-combo.d.ts

@@ -0,0 +1,37 @@
+// TssCombo — コード付きプルダウン＋「その他」で自由入力（TssGrid カスタムエディタ）。
+// UMD: `import TssCombo from '@threestarsoftware/tssgrid/plugins/tss-combo.js'` でも、<script> タグのグローバル `TssCombo` でも使える。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssCombo;
+export as namespace TssCombo;
+
+declare function TssCombo(opts: TssCombo.Options): EditorDef;
+
+declare namespace TssCombo {
+  /** 選択肢1件。`code`（別名 `value`）と表示 `label`。文字列を渡すと code=label。 */
+  interface Option { code?: string | number; value?: string | number; label?: string; }
+
+  interface Options {
+    /** 選択肢。`{code,label}` か文字列（code=label）の配列。 */
+    options: Array<Option | string>;
+    /** 「その他」を有効化。`true` で `{code:'99', label:'その他'}`。選ぶと入力欄に切替。省略で自由入力なし。 */
+    other?: boolean | Option;
+    /** コードの書き戻し先の列（data キー or 列 index）。省略時はコードを書かず値だけ確定。 */
+    codeField?: string | number;
+    /** その他モードの入力欄プレースホルダ（既定 '自由入力'）。 */
+    otherPlaceholder?: string;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '▾'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  /**
+   * 値 → コードを引く関数を返す（同じ options/other から）。undo/redo・貼付でコードを値に追従させたい時、
+   * `onAfterChange` の中で `grid.setValueRaw(r, コード列, codeOf(grid.getValue(r, 値列)))` のように使う。
+   * 値が選択肢に無ければ other の code、空なら ''。
+   */
+  function codeOf(opts: { options: Array<Option | string>; other?: boolean | Option }): (value: any) => string;
+}

package/plugins/tss-combo.js

@@ -0,0 +1,182 @@
+/*! TssCombo — コード付きプルダウン＋「その他」で自由入力。TssGrid カスタムエディタ（ポップアップ型）。
+ *
+ *  ねらい: 「選択肢から選ぶ。ただし『その他』を選んだら自由入力」を **1操作で (コード, 値) のペア**にする。
+ *  - 通常項目を選ぶ → 値セル＝そのラベル / コードセル＝その code
+ *  - 「その他」を選ぶ → 入力欄に切替 → 値セル＝入力文字列 / コードセル＝その他の code（固定）
+ *  業務側は「その他かどうか」を分岐せず (コード, 値) を読むだけでよい（コードはそのまま・値だけが選択/入力で変わる）。
+ *
+ *  使い方（値列にエディタを付け、codeField でコードの書き戻し先＝別列を指す）:
+ *    columns: [
+ *      { data:'payCode' },                                  // コード列（そのまま保存: 01/02/…/99）。hidden:true でも可
+ *      { data:'payName', editor: TssCombo({
+ *          options: [
+ *            { code:'01', label:'現金' },
+ *            { code:'02', label:'振込' },
+ *            { code:'03', label:'クレジット' },
+ *          ],
+ *          other:     { code:'99', label:'その他' },        // これを選ぶと入力欄に切替（省略で「その他」無効＝素のコード選択）
+ *          codeField: 'payCode',                            // コードの書き戻し先（data キー or 列 index）
+ *      }) },
+ *    ]
+ *
+ *  opts:
+ *    options    : [{ code, label }]（`value` も code の別名として可／文字列は code=label）。必須。
+ *    other      : { code, label } でその他を有効化。`other:true` なら {code:'99', label:'その他'}。省略で無効。
+ *    codeField  : コードの書き戻し先の列（data キー or index）。省略時はコードを書かず値だけ確定。
+ *    otherPlaceholder : 入力欄のプレースホルダ（既定 '自由入力'）。
+ *    openOnClick: 既定 true（プルダウン同様シングルクリックで開く）。
+ *    icon       : セル右の目印（既定 '▾'）。className: ポップアップに付ける任意クラス。
+ */
+(function (root) {
+  'use strict';
+  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  // options を [{code,label}] に正規化（value を code の別名に／文字列は両方同じ）。
+  function normOpt(o) {
+    if (o && typeof o === 'object') {
+      var code = o.code != null ? o.code : (o.value != null ? o.value : o.label);
+      return { code: String(code == null ? '' : code), label: String(o.label != null ? o.label : code) };
+    }
+    return { code: String(o), label: String(o) };
+  }
+
+  function TssCombo(opts) {
+    opts = opts || {};
+    var list = (opts.options || []).map(normOpt);
+    var other = opts.other === true ? { code: '99', label: 'その他' }
+      : (opts.other && typeof opts.other === 'object') ? normOpt(opts.other) : null;
+    var codeField = opts.codeField;
+    var placeholder = opts.otherPlaceholder != null ? opts.otherPlaceholder : '自由入力';
+
+    var pop = null, ctxRef = null, done = false, onDoc = null, onKey = null;
+    var items = [], hi = -1, composing = false;
+
+    function teardown() {
+      if (onDoc) document.removeEventListener('mousedown', onDoc, true);
+      if (onKey) document.removeEventListener('keydown', onKey, true);
+      onDoc = onKey = null;
+      if (pop && pop.parentNode) pop.parentNode.removeChild(pop);
+      pop = null; items = []; hi = -1; composing = false;
+    }
+    // (コード, 値) を確定＝値セルは commit（履歴に積む）、コードセルは別列へ setValueRaw で書き戻す。
+    // ★ setValueRaw を使う理由: コードは「値から導く派生値」なのでコード列を readOnly:true にしても貫通して書け、
+    //   履歴に独立ステップを作らない（＝値のセルだけが 1 undo 単位）。undo/redo でコードも値に追従させたい場合は
+    //   下の TssCombo.codeOf を onAfterChange に噛ませる（任意）。
+    function commitPair(code, value) {
+      if (done) return; done = true;
+      var c = ctxRef; teardown();
+      c.commit(value);                                    // 値列（このセル）＝履歴に積む
+      if (codeField != null && c.grid && c.r != null) {
+        try { c.grid.setValueRaw(c.r, codeField, code); } catch (e) {}   // コード列（別列・派生値・readOnly 貫通）
+      }
+    }
+    function doCancel() { if (done) return; done = true; var c = ctxRef; teardown(); if (c.cancel) c.cancel(); }
+
+    function position(anchor) {
+      var r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight;
+      var left = Math.max(6, Math.min(r.left, window.innerWidth - pw - 6));
+      var top = r.bottom + 2;
+      if (top + ph > window.innerHeight - 6) top = Math.max(6, r.top - 2 - ph);   // 下にはみ出すなら上へ
+      pop.style.left = left + 'px'; pop.style.top = top + 'px'; pop.style.minWidth = r.width + 'px';
+    }
+
+    // ---- リスト表示（選択モード）----
+    function renderList(highlight) {
+      var rows = list.map(function (o, i) {
+        return '<div class="tg-combo-item" data-i="' + i + '" role="option">' + esc(o.label) + '</div>';
+      });
+      if (other) rows.push('<div class="tg-combo-sep"></div>' +
+        '<div class="tg-combo-item tg-combo-other" data-other="1" role="option">' + esc(other.label) + '…</div>');
+      pop.innerHTML = rows.join('');
+      items = pop.querySelectorAll('.tg-combo-item');
+      hi = -1;
+      Array.prototype.forEach.call(items, function (el, k) {
+        el.addEventListener('mouseenter', function () { activate(k); });
+        el.addEventListener('mousedown', function (e) { e.preventDefault(); });      // フォーカスを奪わない
+        el.addEventListener('click', function (e) { e.stopPropagation(); choose(k); });
+      });
+      // 現在値に一致する項目をハイライト（無ければ先頭）
+      var want = 0;
+      if (highlight != null) for (var i = 0; i < list.length; i++) if (list[i].label === highlight) { want = i; break; }
+      activate(want);
+    }
+    function activate(k) {
+      if (k < 0 || k >= items.length) return;
+      Array.prototype.forEach.call(items, function (el, i) { el.classList.toggle('active', i === k); });
+      hi = k; if (items[k]) items[k].scrollIntoView({ block: 'nearest' });
+    }
+    function choose(k) {
+      var el = items[k]; if (!el) return;
+      if (el.dataset.other) return showInput('');                 // 「その他」→入力モードへ
+      var o = list[k]; commitPair(o.code, o.label);               // 通常項目→(code, label) 確定
+    }
+
+    // ---- 入力表示（その他モード）----
+    function showInput(initial) {
+      pop.innerHTML = '<div class="tg-combo-inputwrap">' +
+        '<input class="tg-combo-input" type="text" placeholder="' + esc(placeholder) + '">' +
+        '<div class="tg-combo-actions"><button type="button" class="tg-combo-ok">確定</button>' +
+        '<button type="button" class="tg-combo-back">戻る</button></div></div>';
+      var input = pop.querySelector('.tg-combo-input');
+      input.value = initial == null ? '' : initial;
+      input.addEventListener('compositionstart', function () { composing = true; });
+      input.addEventListener('compositionend', function () { composing = false; });
+      input.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter') { if (composing || e.isComposing || e.keyCode === 229) return; e.preventDefault(); confirmInput(input.value); }
+        else if (e.key === 'Escape') { e.preventDefault(); if (list.length) renderListWithHighlight(); else doCancel(); }
+      });
+      pop.querySelector('.tg-combo-ok').addEventListener('mousedown', function (e) { e.preventDefault(); confirmInput(input.value); });
+      pop.querySelector('.tg-combo-back').addEventListener('mousedown', function (e) { e.preventDefault(); renderListWithHighlight(); });
+      setTimeout(function () { input.focus(); input.setSelectionRange(input.value.length, input.value.length); }, 0);
+    }
+    function confirmInput(v) { commitPair(other ? other.code : '', v); }        // (その他code, 入力値) 確定
+    function renderListWithHighlight() { renderList(ctxRef ? ctxRef.value : null); }
+
+    function handleKey(e) {
+      if (!pop || pop.querySelector('.tg-combo-input')) return;      // 入力モードのキーは input 側で処理
+      if (e.key === 'ArrowDown') { e.preventDefault(); activate((hi + 1) % items.length); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); activate((hi - 1 + items.length) % items.length); }
+      else if (e.key === 'Enter') { e.preventDefault(); if (hi >= 0) choose(hi); }
+      else if (e.key === 'Escape') { e.preventDefault(); doCancel(); }
+    }
+
+    return {
+      openOnClick: opts.openOnClick !== false,
+      icon: opts.icon != null ? opts.icon : '▾',
+      open: function (ctx) {
+        ctxRef = ctx; done = false;
+        pop = document.createElement('div');
+        pop.className = 'tg-combo' + (opts.className ? ' ' + opts.className : '');
+        pop.setAttribute('role', 'listbox');
+        document.body.appendChild(pop);
+        // 現在値が選択肢に無い＝過去に「その他」で入れた値 → いきなり入力モードで復元
+        var cur = ctx.value, known = cur != null && cur !== '' && list.some(function (o) { return o.label === String(cur); });
+        if (other && cur != null && cur !== '' && !known) showInput(String(cur));
+        else renderList(cur);
+        position(ctx.td);
+        onDoc = function (e) { if (pop && !pop.contains(e.target) && !(ctx.td && ctx.td.contains(e.target))) doCancel(); };
+        onKey = handleKey;
+        document.addEventListener('mousedown', onDoc, true);
+        document.addEventListener('keydown', onKey, true);
+      },
+      close: function () { teardown(); },
+    };
+  }
+
+  // 値 → コードを引く関数を返す（同じ options/other から）。undo/redo・貼付でコードを値に追従させたい時、
+  //   onAfterChange: (chs) => chs.forEach(ch => { if (ch.c === 値列) grid.setValueRaw(ch.r, コード列, codeOf(grid.getValue(ch.r, 値列))); })
+  // のように噛ませる（任意）。値が選択肢に無ければ other の code、空なら ''。
+  TssCombo.codeOf = function (opts) {
+    opts = opts || {};
+    var list = (opts.options || []).map(normOpt);
+    var other = opts.other === true ? { code: '99' }
+      : (opts.other && typeof opts.other === 'object') ? normOpt(opts.other) : null;
+    return function (value) {
+      if (value == null || value === '') return '';
+      for (var i = 0; i < list.length; i++) if (list[i].label === String(value)) return list[i].code;
+      return other ? other.code : '';
+    };
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssCombo;
+  else root.TssCombo = TssCombo;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-datetime.d.ts

@@ -0,0 +1,42 @@
+// TssDatetime — 日付＋時刻ピッカー（TssGrid カスタムエディタ／単体でも）。保存値は 'YYYY-MM-DDTHH:MM'。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssDatetime;
+export as namespace TssDatetime;
+
+declare function TssDatetime(opts?: TssDatetime.Options): TssDatetime.Editor;
+
+declare namespace TssDatetime {
+  type Holidays = Record<string, string | { name: string; type?: string }>;
+
+  interface Options {
+    holidays?: Holidays;
+    weekend?: number[];
+    weekLabels?: string[];
+    /** 選択可能範囲（'YYYY-MM-DD'）。 */
+    min?: string;
+    max?: string;
+    yearMin?: number;
+    yearMax?: number;
+    /** 分刻み（既定 1）。 */
+    step?: number;
+    /** AM/PM 表示（既定 false=24h）。 */
+    hour12?: boolean;
+    /** 共有 input に乗る型（既定 true）＝直打ち可。false でフォーカス奪取型。 */
+    inline?: boolean;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '📅'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  interface Editor extends EditorDef {
+    /** アンカー要素の下に開き、選択で `onPick('YYYY-MM-DDTHH:MM')` を呼ぶ（単体用）。 */
+    openAt(anchorEl: Element, value: string, onPick: (value: string) => void): void;
+  }
+
+  /** 列 format 用: 保存値 'YYYY-MM-DDTHH:MM' を表示整形。 */
+  function format(value: any, opts?: { hour12?: boolean }): string;
+}

package/plugins/tss-time.d.ts

@@ -0,0 +1,29 @@
+// TssTime — 時/分プルダウン方式の時刻エディタ（TssGrid カスタムエディタ／単体でも）。保存値は 24h 'HH:MM'。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssTime;
+export as namespace TssTime;
+
+declare function TssTime(opts?: TssTime.Options): TssTime.Editor;
+
+declare namespace TssTime {
+  interface Options {
+    /** 分刻み（既定 1）。 */
+    step?: number;
+    /** AM/PM 表示（既定 false=24h）。 */
+    hour12?: boolean;
+    /** 共有 input に乗る型（既定 true）＝直打ち可。false でフォーカス奪取型。 */
+    inline?: boolean;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '🕐'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  interface Editor extends EditorDef {
+    /** アンカー要素の下に開き、選択で `onPick('HH:MM')` を呼ぶ（単体用）。 */
+    openAt(anchorEl: Element, value: string, onPick: (value: string) => void): void;
+  }
+}