@threestarsoftware/tssgrid 0.0.1

package/plugins/tss-running.js

@@ -0,0 +1,82 @@
+/*! TssRunningTotal — 残高／累計（running total）プラグイン。
+ *
+ *  「前の行の結果 ＋ この行の増減」で縦に積む列を作る。formula(行内) でも totals(全体合計) でも出せない
+ *  **縦方向の連鎖**を担当。出納帳/通帳の残高、在庫受払の在庫数、経費・ポイントの累計など。
+ *
+ *  使い方（2通り）:
+ *    // (a) 1列を単純累計: running += Number(row[delta])
+ *    plugins: [ TssRunningTotal({ column: 'cum', delta: 'amount', initial: 0 }) ]
+ *
+ *    // (b) step 関数で自由に（入金-出金など）
+ *    plugins: [ TssRunningTotal({
+ *      column: 'balance', initial: 10000,                                  // 前残（期首）
+ *      step: (prev, row) => prev + Number(row.deposit||0) - Number(row.withdraw||0),
+ *    }) ]
+ *
+ *  opts:
+ *    column   : 残高/累計を表示する列（dataキー）。**自動 readOnly**。
+ *    initial  : 期首値（前残）。既定 0。
+ *    delta    : (step 省略時) この列の数値を累計に足す。
+ *    step     : (prev, row, {r,grid}) => newRunning  各行で残高をどう更新するか。
+ *    skipEmpty: 全列が空の行は連鎖を進めず残高セルも空に（既定 true。末尾の予備空行対策）。
+ *
+ *  handle: recompute() / destroy()。formula と併用するなら plugins:[TssFormula, TssRunningTotal(...)]（派生列の後に累計）。
+ *  自動追従するのは 編集 / 行の挿入・削除 / setData（＋それらの Undo/Redo）。
+ *  ※ 行ドラッグ移動(rowReorder)を併用するときは順序が変わるので onAfterRowMove で handle.recompute() を呼ぶこと。
+ */
+(function (root) {
+  'use strict';
+  function TssRunningTotal(opts) {
+    opts = opts || {};
+    var colKey = opts.column;
+    var initial = (opts.initial == null) ? 0 : opts.initial;
+    var deltaKey = opts.delta;
+    var step = (typeof opts.step === 'function') ? opts.step : null;
+    var skipEmpty = opts.skipEmpty !== false;
+
+    return function (grid) {
+      // 対象列を自動 readOnly に
+      for (var c = 0; c < grid.COLS; c++) if (grid.columns[c] && grid.columns[c].data === colKey) { if (grid.columns[c].readOnly == null) grid.columns[c].readOnly = true; break; }
+
+      function rowObject(r) {
+        var o = {};
+        for (var c = 0; c < grid.COLS; c++) { var k = grid.columns[c] && grid.columns[c].data; if (k != null) o[k] = grid.data[r][c]; }
+        return o;
+      }
+      function emptyRow(r) {
+        for (var c = 0; c < grid.COLS; c++) { var k = grid.columns[c] && grid.columns[c].data; if (k == null) continue; if (grid.data[r][c] !== '' && grid.data[r][c] != null) return false; }
+        return true;
+      }
+      var deltaIdx = -1; for (var dc = 0; dc < grid.COLS; dc++) if (grid.columns[dc] && grid.columns[dc].data === deltaKey) { deltaIdx = dc; break; }
+
+      // 全行を上から走査して残高を積む（累計は前行に依存＝毎回フル再計算）。
+      function compute() {
+        var running = initial;
+        for (var r = 0; r < grid.ROWS; r++) {
+          if (skipEmpty && emptyRow(r)) { grid.setValueRaw(r, colKey, ''); continue; }   // 空行は連鎖を進めず空表示
+          if (step) { try { running = step(running, rowObject(r), { r: r, grid: grid }); } catch (e) {} }
+          else if (deltaIdx >= 0) { var n = Number(grid.data[r][deltaIdx]); running = running + (isFinite(n) ? n : 0); }
+          grid.setValueRaw(r, colKey, running);
+        }
+      }
+
+      // formula/totals と同じく onAfterChange/setData/onStructureChange を包む（prev を先に回してから累計）。
+      var prevAfter = grid.onAfterChange;
+      grid.onAfterChange = function (ch, src) { if (prevAfter) { try { prevAfter.call(grid, ch, src); } catch (e) {} } compute(); };
+      var prevSetData = grid.setData.bind(grid);
+      grid.setData = function (rows) { prevSetData(rows); compute(); };
+      var prevStruct = grid.onStructureChange;
+      grid.onStructureChange = function (info) { if (prevStruct) { try { prevStruct.call(grid, info); } catch (e) {} } compute(); };
+
+      compute();   // 初期計算
+
+      return {
+        name: 'running',
+        recompute: compute,
+        destroy: function () { grid.onAfterChange = prevAfter; grid.setData = prevSetData; grid.onStructureChange = prevStruct; },
+      };
+    };
+  }
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssRunningTotal;
+  else root.TssRunningTotal = TssRunningTotal;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-shared.js

@@ -0,0 +1,114 @@
+/*! TssShared — 1つのマスタ(行データ)を複数グリッドで共有（A系/B系を別フィルタ・別ソートで並べて同時編集）。
+ *  各ビューは同じ「行参照」を持つ＝片方の編集がもう片方へ即反映（該当行を再描画）。
+ *  **行の挿入/削除も伝播**（マスタ＆他ビューに反映）。**配列データ／オブジェクト配列データ どちらも対応**。
+ *
+ *  使い方:
+ *    const shared = TssShared.create(masterRows, { rowHeaders:true, columns:[...] });  // 共通opts（masterRows=配列 or オブジェクト配列）
+ *    const gridA = shared.attach(hostA, {});            // 例: A系
+ *    const gridB = shared.attach(hostB, {});            // 例: B系
+ *    gridA.filter({ 部署:'営業' });  gridB.filter({ 勤務地:'東京' });
+ *    // どちらかで編集 → 共有行が更新され他ビューの同じ行も再描画。行の挿入/削除 → マスタ＆全ビューへ。
+ *    shared.getMaster();     // マスタ全行（getRows 相当）。 shared.detach(gridA);
+ *
+ *  v1 メモ: 値編集と行の挿入/削除/列の挿入削除を伝播。編集で「他ビューのフィルタ該当が変わる」場合は
+ *           その値編集は再描画のみ（メンバーシップ再評価は構造変更時に実施）。構造変更は他ビューを
+ *           master から作り直す＝そのビューのソートはリセット（フィルタは再適用）。minSpareRows:0 推奨。
+ */
+(function (root) {
+  'use strict';
+  function getTssGrid() { return (typeof module !== 'undefined' && module.exports) ? require('../src/tssgrid.js').TssGrid : root.TssGrid; }
+
+  const TssShared = {
+    create: function (masterRows, baseOpts) {
+      const TssGrid = getTssGrid();
+      const shared = { master: null, masterSrc: null, grids: [], baseOpts: baseOpts || {} };
+
+      shared.attach = function (host, opts) {
+        opts = opts || {};
+        const g = new TssGrid(host, Object.assign({}, shared.baseOpts, opts, { data: masterRows }));
+        // 正本(master)を確定。array モードは呼び出し側の行配列参照をそのまま正本に（編集が呼び出し側 masterRows にも反映）。
+        // object モードは _ingest が 2D 化するので取り込んだ data を正本、元オブジェクトは _src を正本にする。
+        if (!shared.master) {
+          if (g._src) { shared.master = g.data.slice(); shared.masterSrc = g._src.slice(); }
+          else { shared.master = masterRows.slice(); shared.masterSrc = null; }
+        }
+        g.data = shared.master.map(function (r) { return r; });                              // 行参照を共有
+        g._src = shared.masterSrc ? shared.masterSrc.map(function (s) { return s; }) : null;  // object時は元オブジェクトも共有
+        g.ROWS = g.data.length;
+        g.buildTable(); g.setActive(0, 0);
+
+        // 値編集 → 他ビューの同じ行を再描画（値は参照共有で既に更新済み）。
+        const prevAfter = opts.onAfterChange || g.onAfterChange;
+        g.onAfterChange = function (changes, source) {
+          shared._propagate(g, changes);
+          if (prevAfter) { try { prevAfter(changes, source); } catch (_) {} }
+        };
+        // 行/列の構造変更（do/undo/redo すべて）→ source の現在の全行を新マスタにして他ビューを作り直す。
+        const prevStruct = opts.onStructureChange;
+        g.onStructureChange = function (info) {
+          shared._rebaseFrom(g);
+          if (prevStruct) { try { prevStruct(info); } catch (_) {} }
+        };
+        g._sharedRef = shared;
+        shared.grids.push(g);
+        return g;
+      };
+
+      shared._propagate = function (srcGrid, changes) {
+        for (let i = 0; i < shared.grids.length; i++) {
+          const other = shared.grids[i];
+          if (other === srcGrid) continue;
+          for (let k = 0; k < changes.length; k++) {
+            const ch = changes[k], ref = srcGrid.data[ch.r];
+            if (!ref) continue;
+            const or = other.data.indexOf(ref);
+            if (or >= 0) { try { other._renderCell(or, ch.c); } catch (_) {} }
+          }
+        }
+      };
+
+      // 構造変更を済ませた source の「全行（フィルタ中なら _allRows）」を新マスタにし、他ビューを再構成。
+      shared._rebaseFrom = function (srcGrid) {
+        const allRows = srcGrid._allRows || srcGrid.data;
+        const allSrc = srcGrid._allRows ? srcGrid._allSrc : srcGrid._src;
+        shared.master = allRows.slice();
+        shared.masterSrc = allSrc ? allSrc.slice() : null;
+        for (let i = 0; i < shared.grids.length; i++) {
+          const g = shared.grids[i];
+          if (g === srcGrid) continue;
+          // 列メタを source に合わせる（列の挿入削除に追従）。行は master から作り直す（フィルタは再適用・ソートはリセット）。
+          g.COLS = srcGrid.COLS; g.headers = srcGrid.headers.slice(); g.columns = srcGrid.columns.slice(); g.colW = srcGrid.colW.slice();
+          const f = (g.isFiltered && g.isFiltered()) ? g._filterFn : null;
+          g._allRows = g._allSrc = g._meta = g._filterFn = null;
+          g.data = shared.master.map(function (r) { return r; });
+          g._src = shared.masterSrc ? shared.masterSrc.map(function (s) { return s; }) : null;
+          g.ROWS = g.data.length;
+          if (f) { g.filter(f); }
+          else { g.buildTable(); g.setActive(Math.min(g.active.r, Math.max(0, g.ROWS - 1)), g.active.c); }
+        }
+      };
+
+      // マスタ全行を getRows 形式で（フィルタに関係なく全件）。
+      shared.getMaster = function () {
+        const g0 = shared.grids[0]; if (!g0) return [];
+        const rows = shared.master, src = shared.masterSrc;
+        return rows.map(function (row, r) {
+          const o = src ? Object.assign({}, src[r]) : {};
+          for (let c = 0; c < g0.COLS; c++) { const k = g0._key(c); if (k != null) g0._setPathCOW(o, k, row[c]); }
+          return o;
+        });
+      };
+
+      shared.detach = function (g) {
+        const i = shared.grids.indexOf(g);
+        if (i >= 0) shared.grids.splice(i, 1);
+        if (g) delete g._sharedRef;
+      };
+
+      return shared;
+    },
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssShared;
+  else root.TssShared = TssShared;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-sparkline.js

@@ -0,0 +1,57 @@
+/*! TssSparkline — セル内スパークライン（ミニ折れ線/棒）。**SVG自前描画**。
+ *
+ *  セルの値（カンマ/空白区切りの数列 "388,329,220,348,323,165"）を**小さなグラフ**として描く。
+ *  仕組みは `columns[c].html:true` ＋ `format` 関数＝format が返す SVG 文字列がそのままセルに入る（html-cells と同じ seam）。
+ *  Chart.js 等は積まない＝ノービルド維持。数値しか SVG に入れないので安全（XSS なし）。
+ *
+ *  使い方:
+ *    columns: [
+ *      { data:'trend', title:'動向', html:true, readOnly:true, format: TssSparkline({ width:80, height:22 }) }
+ *    ]
+ *    // 値 "12,15,9,20,18" → ミニ折れ線。formula で月次列から数列を組み立てると、編集でライブ更新:
+ *    { data:'trend', html:true, readOnly:true, format: TssSparkline(),
+ *      formula: (row) => ['m4','m5','m6','m7','m8','m9'].map(k=>row[k]).filter(v=>v!=='').join(',') }
+ *
+ *  opts:
+ *    type   : 'line'(既定) | 'bar'
+ *    width/height : px（既定 80 / 22）
+ *    color  : 線/棒の色（既定 '#0d9488'）  strokeWidth: 線の太さ（既定 1.5）
+ *    fill   : 折れ線の下を塗る色（既定なし）  padding: 余白(px・既定 2)
+ *    min/max: スケール下限/上限（既定は値の最小/最大で自動）
+ */
+(function (root) {
+  'use strict';
+  function r2(n) { return Math.round(n * 100) / 100; }
+
+  function TssSparkline(opts) {
+    opts = opts || {};
+    var W = opts.width || 80, H = opts.height || 22, pad = (opts.padding != null) ? opts.padding : 2;
+    var color = opts.color || '#0d9488', sw = opts.strokeWidth || 1.5, type = opts.type || 'line';
+    var fill = opts.fill || null, barColor = opts.barColor || color;
+
+    return function (value) {
+      var nums = String(value == null ? '' : value).split(/[,\s]+/).map(function (s) { return parseFloat(s); }).filter(function (n) { return isFinite(n); });
+      if (!nums.length) return '';
+      var min = (opts.min != null) ? opts.min : Math.min.apply(null, nums);
+      var max = (opts.max != null) ? opts.max : Math.max.apply(null, nums);
+      var range = (max - min) || 1, innerW = W - pad * 2, innerH = H - pad * 2;
+      var body;
+      if (type === 'bar') {
+        var gap = innerW / nums.length, bw = gap * 0.7;
+        body = nums.map(function (v, i) {
+          var h = ((v - min) / range) * innerH, bx = pad + i * gap + (gap - bw) / 2;
+          return '<rect x="' + r2(bx) + '" y="' + r2(pad + innerH - h) + '" width="' + r2(bw) + '" height="' + r2(Math.max(0, h)) + '" fill="' + barColor + '"/>';
+        }).join('');
+      } else {
+        var x = function (i) { return pad + (nums.length <= 1 ? innerW / 2 : (i / (nums.length - 1)) * innerW); };
+        var y = function (v) { return pad + innerH - ((v - min) / range) * innerH; };
+        var pts = nums.map(function (v, i) { return r2(x(i)) + ',' + r2(y(v)); }).join(' ');
+        var area = fill ? '<polygon points="' + r2(x(0)) + ',' + r2(H - pad) + ' ' + pts + ' ' + r2(x(nums.length - 1)) + ',' + r2(H - pad) + '" fill="' + fill + '" stroke="none"/>' : '';
+        body = area + '<polyline points="' + pts + '" fill="none" stroke="' + color + '" stroke-width="' + sw + '" stroke-linejoin="round" stroke-linecap="round"/>';
+      }
+      return '<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" style="display:block">' + body + '</svg>';
+    };
+  }
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssSparkline;
+  else root.TssSparkline = TssSparkline;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-syncscroll.js

@@ -0,0 +1,95 @@
+/*! TssSyncScroll — 複数グリッドの同期スクロール（Excel「並べて比較＋同時にスクロール」相当）。
+ *
+ *  左右（or 上下）に並べた 2枚以上のグリッドのスクロールを連動。A系/B系で別々に絞り込んだ表を
+ *  突き合わせながら編集する用途に。`grid.wrap`(overflow:auto のスクロール枠) の scroll を相手へ転写。
+ *
+ *  使い方:
+ *    const link = TssSyncScroll.link([gridA, gridB]);                    // 既定: 相対・縦横ピクセル
+ *    const link = TssSyncScroll.link([gA, gB], { by:'row' });            // 行で揃える
+ *    const link = TssSyncScroll.link([gA, gB], { relative:false });      // 絶対(スナップして一致)
+ *    link.unlink();                                                      // 連動解除（リスナ除去）
+ *
+ *  opts:
+ *    relative: true(既定) — **ONにした時点の位置差を保ったまま、移動量(delta)だけ連動**（Excel流）。
+ *                          連動OFF→片方スクロール→ONでも"その場から"続けて同期できる。
+ *              false      — 絶対。常に相手をこちらに合わせてスナップ（pixel:同じ量 / row:同じ行index）。
+ *    axis: 'both'(既定) | 'vertical' | 'horizontal'
+ *    by:   'pixel'(既定・スクロール量) | 'row'(相手の同じ行を基準に揃える。コアの _rowTops を使用＝行高が違っても可)
+ *
+ *  メモ: 縦の連動量は by='row' なら行index、'pixel' なら px。横は常に px。フィードバックは
+ *        「自分が動かした相手の echo は一度無視＋値が変わった時だけ動かす」で防止＋収束。
+ */
+(function (root) {
+  'use strict';
+
+  // scrollTop から「ヘッダ直下に見えている本体行」index（二分探索）。
+  function rowAtTop(g) {
+    var T = g._rowTops; if (!T) return 0;
+    var target = (g.wrap.scrollTop || 0) + (g._theadH || 0);
+    var lo = 0, hi = g.ROWS;
+    while (lo < hi) { var mid = (lo + hi) >> 1; if (T[mid] < target) lo = mid + 1; else hi = mid; }
+    return Math.max(0, Math.min(lo, g.ROWS - 1));
+  }
+  // 行 r をヘッダ直下に揃える scrollTop（クランプ）。
+  function topForRow(g, r) {
+    var T = g._rowTops; if (!T) return null;
+    r = Math.max(0, Math.min(Math.round(r), g.ROWS - 1));
+    var top = (T[r] || 0) - (g._theadH || 0);
+    var max = g.wrap.scrollHeight - g.wrap.clientHeight;
+    return Math.max(0, Math.min(top, max < 0 ? 0 : max));
+  }
+
+  var TssSyncScroll = {
+    link: function (grids, opts) {
+      grids = (grids || []).filter(Boolean);
+      opts = opts || {};
+      var axis = opts.axis || 'both';
+      var byRow = opts.by === 'row';
+      var relative = opts.relative !== false;   // 既定 true
+      var vert = axis === 'both' || axis === 'vertical';
+      var horiz = axis === 'both' || axis === 'horizontal';
+
+      // 縦の「同期座標」: row なら行index、pixel なら scrollTop。横は常に scrollLeft。
+      function readV(g) { return byRow ? rowAtTop(g) : g.wrap.scrollTop; }
+      // px 代入はブラウザが範囲内に自動クランプするので手動クランプ不要（値が変わる時だけ ignore を立てる）。
+      function setScrollTop(st, px) { px = Math.round(px); if (st.g.wrap.scrollTop !== px) { st.ignore = true; st.g.wrap.scrollTop = px; } }
+      function setScrollLeft(st, px) { px = Math.round(px); if (st.g.wrap.scrollLeft !== px) { st.ignore = true; st.g.wrap.scrollLeft = px; } }
+      function writeV(st, v) { if (byRow) { var t = topForRow(st.g, v); if (t != null) setScrollTop(st, t); } else setScrollTop(st, v); }
+
+      var states = grids.map(function (g) { return { g: g, ignore: false, v: readV(g), left: g.wrap.scrollLeft, onScroll: null }; });
+
+      states.forEach(function (st) {
+        st.onScroll = function () {
+          if (st.ignore) { st.ignore = false; st.v = readV(st.g); st.left = st.g.wrap.scrollLeft; return; }   // 自分が動かされた echo
+          if (relative) {
+            var dV = readV(st.g) - st.v, dL = st.g.wrap.scrollLeft - st.left;   // 移動量だけ伝える＝位置差を保つ
+            st.v = readV(st.g); st.left = st.g.wrap.scrollLeft;
+            states.forEach(function (dst) {
+              if (dst === st) return;
+              if (vert && dV) { writeV(dst, dst.v + dV); dst.v = readV(dst.g); }
+              if (horiz && dL) { setScrollLeft(dst, dst.g.wrap.scrollLeft + dL); dst.left = dst.g.wrap.scrollLeft; }
+            });
+          } else {
+            var v = readV(st.g), l = st.g.wrap.scrollLeft;                      // 絶対＝相手をこちらに合わせる
+            states.forEach(function (dst) {
+              if (dst === st) return;
+              if (vert) writeV(dst, v);
+              if (horiz) setScrollLeft(dst, l);
+            });
+          }
+        };
+        st.g.wrap.addEventListener('scroll', st.onScroll, { passive: true });
+      });
+
+      return {
+        grids: grids,
+        // 現在位置を基準として取り直す（相対モードで明示的に"今の差"を基準化したい時に）。
+        rebase: function () { states.forEach(function (st) { st.v = readV(st.g); st.left = st.g.wrap.scrollLeft; }); },
+        unlink: function () { states.forEach(function (st) { st.g.wrap.removeEventListener('scroll', st.onScroll); }); states = []; },
+      };
+    },
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssSyncScroll;
+  else root.TssSyncScroll = TssSyncScroll;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-time.css

@@ -0,0 +1,23 @@
+/* TssTime — スタイル。業務側は下の CSS 変数を上書きするだけでテーマを変えられる。
+   例: .tss-time { --time-accent:#c0392b; --time-radius:10px; } */
+.tss-time {
+  --time-bg: #fff;
+  --time-fg: #222;
+  --time-border: #c3ccd6;
+  --time-accent: #2aa0d8;
+  --time-radius: 8px;
+  --time-font: 13px "Segoe UI", "Meiryo", sans-serif;
+
+  position: fixed; z-index: 10000; background: var(--time-bg); color: var(--time-fg);
+  border: 1px solid var(--time-border); border-radius: var(--time-radius);
+  box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 10px; font: var(--time-font); user-select: none; outline: none;
+}
+.tss-time-row { display: flex; align-items: center; gap: 4px; }
+.tss-time-sep { font-weight: 600; padding: 0 1px; }
+.tss-time select { font: inherit; padding: 4px 6px; border: 1px solid var(--time-border); border-radius: 5px; background: var(--time-bg); color: var(--time-fg); cursor: pointer; }
+.tss-time select:focus { outline: 2px solid var(--time-accent); outline-offset: -1px; }
+.tss-time-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
+.tss-time-btns button { font: inherit; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--time-border); background: var(--time-bg); color: var(--time-fg); cursor: pointer; }
+.tss-time-btns button:hover { background: #eef4ff; }
+.tss-time-btns .tss-time-ok { border-color: var(--time-accent); background: var(--time-accent); color: #fff; }
+.tss-time-btns .tss-time-ok:hover { filter: brightness(1.05); }

package/plugins/tss-time.js

@@ -0,0 +1,91 @@
+/*! TssTime — 時刻ピッカー（TssGrid のカスタムエディタ / 単体ウィジェット両用）
+ *  時/分プルダウン方式（業務の任意時刻入力向き）。保存値は常に 24h 'HH:MM'（type:'time' と互換）。
+ *  使い方（グリッド）: columns: [{ type:'time', editor: TssTime({ step:15 }) }]
+ *  opts: step(分刻み,既定1) / hour12(AM/PM表示,既定false) / icon(既定 '🕐') / openOnClick(既定true) / className
+ */
+(function (root) {
+  'use strict';
+  function pad(n) { return String(n).padStart(2, '0'); }
+  function parseHM(s) { var m = /^(\d{1,2}):(\d{2})$/.exec(String(s || '')); if (!m) return null; var h = +m[1], mi = +m[2]; return (h <= 23 && mi <= 59) ? { h: h, m: mi } : null; }
+
+  function TssTime(opts) {
+    opts = opts || {};
+    var step = Math.max(1, opts.step || 1);
+    var hour12 = !!opts.hour12;
+    var pop = null, ref = null, done = false, outside = null;
+
+    function opt(val, label, sel) { return '<option value="' + val + '"' + (sel ? ' selected' : '') + '>' + label + '</option>'; }
+    function render(cur) {
+      var h = cur ? cur.h : null, mi = cur ? cur.m : null;
+      // 時
+      var hSel = '<select class="tss-time-h" aria-label="時"><option value=""></option>';
+      if (hour12) { for (var i = 1; i <= 12; i++) { var d24 = (h == null) ? null : ((h % 12) || 12); hSel += opt(i, i, d24 === i); } }
+      else { for (var j = 0; j <= 23; j++) hSel += opt(j, pad(j), h === j); }
+      hSel += '</select>';
+      // 分（step 刻み。現在値が刻みに無ければ補う）
+      var mins = []; for (var k = 0; k < 60; k += step) mins.push(k);
+      if (mi != null && mins.indexOf(mi) < 0) { mins.push(mi); mins.sort(function (a, b) { return a - b; }); }
+      var mSel = '<select class="tss-time-m" aria-label="分"><option value=""></option>';
+      for (var n = 0; n < mins.length; n++) mSel += opt(mins[n], pad(mins[n]), mi === mins[n]);
+      mSel += '</select>';
+      // AM/PM
+      var aSel = '';
+      if (hour12) { var pm = h != null && h >= 12; aSel = '<select class="tss-time-ap" aria-label="午前/午後">' + opt('AM', 'AM', !pm) + opt('PM', 'PM', pm) + '</select>'; }
+      pop.innerHTML = '<div class="tss-time-row">' + hSel + '<span class="tss-time-sep">:</span>' + mSel + aSel + '</div>'
+        + '<div class="tss-time-btns"><button type="button" class="tss-time-now">現在</button><button type="button" class="tss-time-ok">決定</button></div>';
+    }
+    function readValue() {
+      var hS = pop.querySelector('.tss-time-h'), mS = pop.querySelector('.tss-time-m'), aS = pop.querySelector('.tss-time-ap');
+      if (hS.value === '' || mS.value === '') return '';
+      var h = +hS.value, m = +mS.value;
+      if (hour12 && aS) { var ap = aS.value; h = ap === 'PM' ? (h === 12 ? 12 : h + 12) : (h === 12 ? 0 : h); }
+      return pad(h) + ':' + pad(m);
+    }
+    function setNow() {
+      var d = new Date(), m = Math.round(d.getMinutes() / step) * step; if (m >= 60) m = 60 - step;
+      render({ h: d.getHours(), m: m });
+    }
+    function place(anchor) {
+      var r = anchor.getBoundingClientRect();
+      pop.style.left = Math.max(2, Math.min(r.left, window.innerWidth - pop.offsetWidth - 6)) + 'px';
+      var top = r.bottom + 2;
+      if (top + pop.offsetHeight > window.innerHeight) top = Math.max(2, r.top - pop.offsetHeight - 2);
+      pop.style.top = top + 'px';
+    }
+    function onClick(e) {
+      if (e.target.classList.contains('tss-time-now')) { setNow(); return; }
+      if (e.target.classList.contains('tss-time-ok')) { commit(readValue()); }
+    }
+    function onKey(e) {
+      if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+      else if (e.key === 'Enter') { e.preventDefault(); commit(readValue()); }
+    }
+    function show(anchor, value, onPick, onCancel) {
+      done = false;
+      pop = document.createElement('div'); pop.className = 'tss-time' + (opts.className ? ' ' + opts.className : ''); pop.tabIndex = -1;
+      document.body.appendChild(pop);
+      pop.addEventListener('mousedown', function (e) { if (e.target.tagName !== 'SELECT') e.preventDefault(); });
+      pop.addEventListener('click', onClick);
+      pop.addEventListener('keydown', onKey);
+      render(parseHM(value)); place(anchor);
+      ref = { pick: onPick, cancel: onCancel };
+      // 外側クリックは「確定」（時/分を選んで離す＝採用）。未変更なら同値 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);
+      pop.focus();
+    }
+    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function commit(v) { if (done) return; done = true; var f = ref.pick; teardown(); f(v); }
+    function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
+
+    return {
+      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      close: function () { teardown(); },
+      icon: opts.icon != null ? opts.icon : '🕐',
+      openOnClick: opts.openOnClick !== false,
+      openAt: function (anchorEl, value, onPick) { show(anchorEl, value, function (v) { onPick(v); }, null); },
+    };
+  }
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssTime;
+  else root.TssTime = TssTime;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-toggle.css

@@ -0,0 +1,7 @@
+/* TssToggle — 2択セグメント。色は変数で上書き可。 */
+.tg-toggle { display: inline-flex; border: 1px solid var(--tg-toggle-border, #cfd7e0); border-radius: 999px; overflow: hidden; font-size: .92em; line-height: 1.7; vertical-align: middle; }
+.tg-toggle .tg-seg { padding: 0 11px; cursor: pointer; color: var(--tg-toggle-fg, #64748b); user-select: none; transition: background .12s; }
+.tg-toggle .tg-seg + .tg-seg { border-left: 1px solid var(--tg-toggle-border, #cfd7e0); }
+.tg-toggle .tg-seg:hover { background: var(--tg-toggle-hover, #f0f3f7); }
+.tg-toggle .tg-seg.active { background: var(--tg-toggle-accent, #0d9488); color: #fff; }
+.tg-toggle .tg-seg.active:hover { background: var(--tg-toggle-accent, #0d9488); }

package/plugins/tss-toggle.js

@@ -0,0 +1,86 @@
+/*! TssToggle — 2択セグメント・トグル（有効|無効・公開|非公開・男|女 …）。
+ *
+ *  ラジオの2択を「並んだピル（セグメント）」で表示し、クリックでどちらかに切替。値は dropdown と同じく
+ *  選んだ option の value を保存（getData も value）。html:true+format で描画、クリックは委譲で拾う。
+ *
+ *  使い方:
+ *    plugins: [ TssToggle.plugin({ columns: {
+ *      status: ['有効', '無効'],                                   // 文字列2つ（value=label）
+ *      pub:    [{value:'1',label:'公開'},{value:'0',label:'非公開'}] // value/label 分離も可
+ *    } }) ]
+ *    // 列定義側で直接: { data:'status', html:true, format: TssToggle.format(['有効','無効']) } ＋ plugins:[TssToggle.plugin()]
+ *
+ *  opts(plugin): columns（{dataキー: 2要素配列}） / accent（選択側の色・CSS変数 --tg-toggle-accent でも）。
+ *  挙動: クリックでその側に確定（setValue＝検証/Undo を通る）。アクティブセルで Space は反対側へトグル。
+ *        他値を打ち込めないよう、対象列に「2値のみ許可」の validator を自動付与。
+ */
+(function (root) {
+  'use strict';
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  function normOpts(arr) { return (arr || []).slice(0, 2).map(function (o) { return (o && typeof o === 'object') ? { value: String(o.value), label: String(o.label) } : { value: String(o), label: String(o) }; }); }
+
+  function makeFormat(options) {
+    var opts = normOpts(options);
+    return function (value) {
+      var v = String(value == null ? '' : value);
+      return '<span class="tg-toggle">' + opts.map(function (o) {
+        return '<span class="tg-seg' + (o.value === v ? ' active' : '') + '" data-tg-v="' + esc(o.value) + '">' + esc(o.label) + '</span>';
+      }).join('') + '</span>';
+    };
+  }
+
+  function TssToggle() { /* 名前空間。format / plugin を使う */ }
+  TssToggle.format = makeFormat;
+
+  TssToggle.plugin = function (opts) {
+    opts = opts || {};
+    var cols = opts.columns || {};
+    return function (grid) {
+      var byCol = {};   // 列index → 正規化オプション
+      Object.keys(cols).forEach(function (key) {
+        var ci = -1; for (var c = 0; c < grid.COLS; c++) if (grid.columns[c] && grid.columns[c].data === key) { ci = c; break; }
+        if (ci < 0) return;
+        var o = normOpts(cols[key]); if (o.length < 2) return;
+        var cfg = grid.columns[ci];
+        cfg.html = true;
+        if (typeof cfg.format !== 'function') cfg.format = makeFormat(o);
+        var vals = o.map(function (x) { return x.value; });
+        if (typeof cfg.validator !== 'function') cfg.validator = function (v) { return v === '' || vals.indexOf(v) >= 0; };   // 2値以外を弾く
+        byCol[ci] = vals;
+      });
+      // それ自体は無効でも format 直指定の列をクリックで拾えるよう、format 由来の列も拾う
+      function valsOf(c) {
+        if (byCol[c]) return byCol[c];
+        return null;   // 設定外の列は対象外
+      }
+      function editable(r, c) { var cfg = grid.columns[c]; return !grid.readOnly && !(cfg && cfg.readOnly === true); }
+
+      function onClick(e) {
+        var seg = e.target.closest && e.target.closest('.tg-seg[data-tg-v]'); if (!seg) return;
+        var td = seg.closest('td[data-c]'); if (!td) return;
+        var c = +td.dataset.c, r = +td.dataset.r;
+        if (!valsOf(c) || !editable(r, c)) return;
+        grid.setValue(r, c, seg.getAttribute('data-tg-v'));   // 検証/Undo を通る
+      }
+      function onKey(e) {
+        if (e.key !== ' ' && e.key !== 'Spacebar') return;
+        var r = grid.active.r, c = grid.active.c, vals = valsOf(c);
+        if (!vals || !editable(r, c) || grid.mode === 'edit') return;
+        e.preventDefault();
+        var cur = grid.getValue(r, c), i = vals.indexOf(String(cur));
+        grid.setValue(r, c, vals[(i + 1) % vals.length]);     // 反対側へトグル
+      }
+      grid.wrap.addEventListener('click', onClick);
+      grid.editor.addEventListener('keydown', onKey);
+      grid.buildTable();   // format/html を反映
+
+      return {
+        name: 'toggle',
+        destroy: function () { grid.wrap.removeEventListener('click', onClick); grid.editor.removeEventListener('keydown', onKey); },
+      };
+    };
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssToggle;
+  else root.TssToggle = TssToggle;
+})(typeof self !== 'undefined' ? self : this);