@threestarsoftware/tssgrid 0.0.1

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@threestarsoftware/tssgrid",
+  "version": "0.0.1",
+  "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
+  "license": "MIT",
+  "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
+  "homepage": "https://tssgrid.threestarsoftware.co.jp",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/threestarsoftware/TssGrid.git"
+  },
+  "bugs": {
+    "url": "https://github.com/threestarsoftware/TssGrid/issues"
+  },
+  "keywords": [
+    "grid",
+    "data-grid",
+    "datagrid",
+    "spreadsheet",
+    "table",
+    "editable",
+    "vanilla-js",
+    "no-build",
+    "dependency-free",
+    "ime",
+    "japanese",
+    "excel",
+    "mit"
+  ],
+  "main": "src/tssgrid.js",
+  "types": "src/tssgrid.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/tssgrid.d.ts",
+      "default": "./src/tssgrid.js"
+    },
+    "./tssgrid.css": "./src/tssgrid.css",
+    "./plugins/*": "./plugins/*",
+    "./package.json": "./package.json"
+  },
+  "unpkg": "src/tssgrid.js",
+  "jsdelivr": "src/tssgrid.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src/tssgrid.js",
+    "src/tssgrid.css",
+    "src/tssgrid.d.ts",
+    "plugins/",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/plugins/tss-autocomplete.css

@@ -0,0 +1,16 @@
+/* TssAutocomplete — 候補サジェスト ポップアップ。見た目は変数とクラスで自由に。 */
+.tss-ac {
+  position: absolute; z-index: 9999; background: #fff;
+  border: 1px solid var(--ac-border, #c3ccd6); border-radius: 6px;
+  box-shadow: 0 6px 24px rgba(20, 40, 80, .18); padding: 4px;
+  font: inherit; box-sizing: border-box;
+}
+.tss-ac-input {
+  width: 100%; box-sizing: border-box; font: inherit; padding: 4px 6px;
+  border: 1px solid var(--ac-input-border, #cfd7e0); border-radius: 4px; outline: none;
+}
+.tss-ac-input:focus { border-color: var(--ac-accent, #0d9488); }
+.tss-ac-list { max-height: 220px; overflow-y: auto; margin-top: 4px; }
+.tss-ac-item { padding: 5px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
+.tss-ac-item:hover { background: var(--ac-hover, #eef2f6); }
+.tss-ac-item.hi { background: var(--ac-accent, #0d9488); color: #fff; }

package/plugins/tss-autocomplete.js

@@ -0,0 +1,121 @@
+/*! TssAutocomplete — 候補サジェスト付きテキスト入力（TssGrid カスタムエディタ）。
+ *
+ *  自由入力＋候補の絞り込み。固定 dropdown の上位版（取引先名・商品名など「だいたい決まってるが新規もある」項目向け）。
+ *  **IME変換中の Enter は奪わない**（変換確定が最優先＝TssGrid の流儀）。
+ *
+ *  使い方:
+ *    columns: [ { data:'client', editor: TssAutocomplete({ source: ['三星商事','三星製作所', …] }) } ]
+ *    // 動的候補: source: (query, {row,r,c,grid}) => string[]
+ *
+ *  opts:
+ *    source   : string[] か (query, ctx)=>string[]。必須。
+ *    strict   : true=候補から選んだ値のみ許可（既定 false=自由入力可）。
+ *    minChars : この文字数以上で候補を出す（既定 0＝開いた時点で全件）。
+ *    max      : 候補表示の最大件数（既定 20）。
+ *    match    : 'includes'(既定) | 'startsWith' | (item, query)=>bool。大文字小文字は無視。
+ *    openOnClick: 既定 true（プルダウン同様シングルクリックで開く）。
+ *    icon     : セル右の目印（既定 '▾'）。className: ポップアップに付ける任意クラス。
+ */
+(function (root) {
+  'use strict';
+  function norm(s) { return String(s == null ? '' : s).toLowerCase(); }
+
+  function TssAutocomplete(opts) {
+    opts = opts || {};
+    var getSource = typeof opts.source === 'function' ? opts.source : function () { return opts.source || []; };
+    var strict = !!opts.strict;
+    var minChars = opts.minChars || 0;
+    var max = opts.max || 20;
+    var matcher = (typeof opts.match === 'function') ? opts.match
+      : (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;
+
+    function filter(q) {
+      var ctx = ref ? ref.ctx : {};
+      var src = getSource(q, { row: grid_row(ctx), r: ctx.r, c: ctx.c, grid: ctx.grid }) || [];
+      var nq = norm(q);
+      var out = [];
+      for (var i = 0; i < src.length && out.length < max; i++) {
+        if (nq.length < minChars) { out.push(src[i]); continue; }
+        if (nq === '' || matcher(src[i], nq)) out.push(src[i]);
+      }
+      return out;
+    }
+    function grid_row(ctx) { try { return ctx.grid.getRow(ctx.r); } catch (e) { return null; } }
+
+    function render() {
+      var q = input.value;
+      items = filter(q);
+      hi = items.length ? 0 : -1;
+      list.innerHTML = items.map(function (it, i) {
+        return '<div class="tss-ac-item' + (i === hi ? ' hi' : '') + '" data-i="' + i + '">' + esc(it) + '</div>';
+      }).join('');
+      list.style.display = items.length ? 'block' : 'none';
+    }
+    function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+    function moveHi(d) {
+      if (!items.length) return;
+      hi = (hi + d + items.length) % items.length;
+      var els = list.querySelectorAll('.tss-ac-item');
+      for (var i = 0; i < els.length; i++) els[i].className = 'tss-ac-item' + (i === hi ? ' hi' : '');
+      if (els[hi]) els[hi].scrollIntoView({ block: 'nearest' });
+    }
+    function chosenValue() {
+      if (hi >= 0 && items[hi] != null) return items[hi];      // 候補ハイライトを採用
+      if (strict) return null;                                  // strict は候補必須
+      return input.value;                                       // 自由入力を採用
+    }
+    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); }
+      else if (e.key === 'Enter') {
+        if (composing || e.isComposing) return;                 // ★ IME変換確定の Enter は奪わない
+        e.preventDefault();
+        var v = chosenValue(); if (v == null) return;           // strict で候補なし＝確定しない
+        commit(v);
+      } else if (e.key === 'Tab') {
+        var t = chosenValue(); if (t != null) { e.preventDefault(); commit(t); }
+      } else if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+    }
+    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 + 1;
+      if (top + 220 > window.innerHeight) top = Math.max(2, r.top - 4 - Math.min(220, list.offsetHeight + input.offsetHeight));
+      pop.style.top = top + 'px';
+      pop.style.minWidth = r.width + 'px';
+    }
+    function show(anchor, value, ctx) {
+      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>';
+      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]); } });
+      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);
+    }
+    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 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 {
+      openOnClick: opts.openOnClick !== false,
+      icon: opts.icon != null ? opts.icon : '▾',
+      open: function (ctx) { show(ctx.td, ctx.value, ctx); },
+      close: function () { teardown(); },
+    };
+  }
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssAutocomplete;
+  else root.TssAutocomplete = TssAutocomplete;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-bar.js

@@ -0,0 +1,51 @@
+/*! TssBar — セル内 横棒グラフ（データバー）。
+ *
+ *  セルの数値を**横棒**で描く（アンケートの認知率バー、進捗%、スコアなど）。
+ *  `columns[c].html:true` ＋ `format` 関数 seam に乗るだけ（format が返す <div> がセルに入る）。
+ *  数値・色(dev指定)しか入れない＝安全。type:'number' と併用すれば**バーのまま編集**（打つと伸びる）。
+ *
+ *  使い方:
+ *    // 表示専用バー
+ *    { data:'rate', title:'認知率', html:true, readOnly:true, format: TssBar({ max:100, suffix:'%', decimals:1 }) }
+ *    // バーのまま編集（値を打つと伸びる）
+ *    { data:'rate', type:'number', html:true, format: TssBar({ max:100, suffix:'%' }) }
+ *
+ *  opts:
+ *    min/max  : スケール（既定 0 / 100）。値は min..max を 0..100% に。範囲外はクランプ。
+ *    color    : バー色（文字列 or (value)=>色＝閾値で色分け）。track: 下地色。
+ *    height   : バーの高さ(px・既定 12)  radius: 角丸(px・既定 3)
+ *    showValue: 値ラベルを右に出す（既定 true）。decimals: ラベルの小数桁。suffix: 単位（'%' 等）。
+ *    labelWidth: ラベル幅(px・既定 44)。
+ */
+(function (root) {
+  'use strict';
+  function r2(n) { return Math.round(n * 100) / 100; }
+
+  function TssBar(opts) {
+    opts = opts || {};
+    var min = (opts.min != null) ? opts.min : 0, max = (opts.max != null) ? opts.max : 100;
+    var color = opts.color || '#0d9488', track = opts.track || '#eef2f6';
+    var height = opts.height || 12, radius = (opts.radius != null) ? opts.radius : 3;
+    var showValue = opts.showValue !== false, decimals = opts.decimals, suffix = opts.suffix || '';
+    var labelW = (opts.labelWidth != null) ? opts.labelWidth : 44;
+
+    return function (value) {
+      var s = String(value == null ? '' : value).trim();
+      if (s === '' || !isFinite(Number(s))) return '';
+      var v = Number(s);
+      var pct = Math.max(0, Math.min(100, ((v - min) / ((max - min) || 1)) * 100));
+      var col = (typeof color === 'function') ? color(v) : color;
+      var label = '';
+      if (showValue) {
+        var t = (decimals != null) ? v.toFixed(decimals) : String(v);
+        label = '<span style="min-width:' + labelW + 'px;text-align:right;font-variant-numeric:tabular-nums">' + t + suffix + '</span>';
+      }
+      return '<div style="display:flex;align-items:center;gap:6px;height:100%">'
+        + '<div style="flex:1;background:' + track + ';border-radius:' + radius + 'px;height:' + height + 'px;overflow:hidden">'
+        + '<div style="width:' + r2(pct) + '%;background:' + col + ';height:100%;border-radius:' + radius + 'px"></div>'
+        + '</div>' + label + '</div>';
+    };
+  }
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssBar;
+  else root.TssBar = TssBar;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-calc.js

@@ -0,0 +1,103 @@
+/*! TssCalc — セル内ミニ計算式（=12*3+5 → 41）。**eval/Function 不使用**。
+ *
+ *  セルに数式を打つと確定時に計算結果へ。四則 + - * / と括弧 () と小数に対応。
+ *  パーサは再帰下降の自前実装＝**eval を使わない**（CSP安全）。`columns[c].parse` seam に乗るだけ。
+ *
+ *  使い方（2通り）:
+ *    // (a) 列の parse に直接（一番素直＝入力変換そのもの）
+ *    columns: [ { data:'amount', type:'number', parse: TssCalc() } ]
+ *
+ *    // (b) プラグインで対象列にまとめて注入（既存 parse があれば合成）
+ *    plugins: [ TssCalc.plugin({ columns: ['quantity','price'] }) ]   // columns 省略で number 列すべて
+ *
+ *  opts:
+ *    prefix : これで始まると強制的に式評価（既定 '='）。'=12*3' → 36。
+ *    bare   : 接頭辞なしの素の式も評価（既定 true）。'12*3' → 36 / '100' は数値なので素通り。
+ *    decimals: 結果の小数桁（既定 null=丸めない。浮動小数の誤差だけは常に10桁で整える）。
+ *
+ *  返り: parse 関数 `(value) => string`。式でなければ入力をそのまま返す（＝通常入力は素通り）。
+ */
+(function (root) {
+  'use strict';
+
+  // 安全な四則評価（再帰下降）。式文字列 → 数値 or null（構文/不正文字/0除算は null）。
+  function evaluate(s) {
+    var toks = [], i = 0;
+    while (i < s.length) {
+      var c = s.charAt(i);
+      if (c === ' ' || c === '\t') { i++; continue; }
+      if ((c >= '0' && c <= '9') || c === '.') {
+        var j = i + 1; while (j < s.length && ((s.charAt(j) >= '0' && s.charAt(j) <= '9') || s.charAt(j) === '.')) j++;
+        var num = parseFloat(s.slice(i, j)); if (!isFinite(num)) return null; toks.push({ t: 'n', v: num }); i = j; continue;
+      }
+      if ('+-*/()'.indexOf(c) >= 0) { toks.push({ t: c }); i++; continue; }
+      return null;   // 不正文字
+    }
+    var p = 0;
+    function peek() { return toks[p]; }
+    function parseExpr() {
+      var v = parseTerm(); if (v === null) return null;
+      while (peek() && (peek().t === '+' || peek().t === '-')) { var op = toks[p++].t; var r = parseTerm(); if (r === null) return null; v = (op === '+') ? v + r : v - r; }
+      return v;
+    }
+    function parseTerm() {
+      var v = parseFactor(); if (v === null) return null;
+      while (peek() && (peek().t === '*' || peek().t === '/')) { var op = toks[p++].t; var r = parseFactor(); if (r === null) return null; if (op === '/') { if (r === 0) return null; v = v / r; } else v = v * r; }
+      return v;
+    }
+    function parseFactor() {
+      var tk = peek(); if (!tk) return null;
+      if (tk.t === '+') { p++; return parseFactor(); }
+      if (tk.t === '-') { p++; var f = parseFactor(); return f === null ? null : -f; }
+      if (tk.t === 'n') { p++; return tk.v; }
+      if (tk.t === '(') { p++; var e = parseExpr(); if (e === null) return null; if (!peek() || peek().t !== ')') return null; p++; return e; }
+      return null;
+    }
+    var result = parseExpr();
+    if (result === null || p !== toks.length || !isFinite(result)) return null;   // 余りトークン＝構文エラー
+    return result;
+  }
+
+  // 素の式（数字＋演算子だけ・演算子を最低1つ含む）か。'100' は数値なので式扱いしない＝素通り。
+  function looksArithmetic(s) { return /^[\d\s.+\-*/()]+$/.test(s) && /[+\-*/]/.test(s) && /\d/.test(s); }
+
+  function TssCalc(opts) {
+    opts = opts || {};
+    var prefix = (opts.prefix == null) ? '=' : opts.prefix;
+    var bare = opts.bare !== false;
+    var decimals = (opts.decimals == null) ? null : opts.decimals;
+    return function (value) {
+      var s = String(value == null ? '' : value).trim();
+      if (s === '') return value;
+      var expr = null;
+      if (prefix && s.charAt(0) === prefix) expr = s.slice(1);
+      else if (bare && looksArithmetic(s)) expr = s;
+      if (expr === null) return value;                  // 式でない＝素通り（通常入力）
+      var r = evaluate(expr);
+      if (r === null) return value;                     // 構文エラー等＝打った値を残す（validator が弾けば赤）
+      r = Math.round(r * 1e10) / 1e10;                  // 浮動小数の誤差を均す
+      if (decimals != null) { var f = Math.pow(10, decimals); r = Math.round(r * f) / f; }
+      return String(r);
+    };
+  }
+
+  // プラグイン形: 対象列の parse に TssCalc を注入（既存 parse があれば「calc→既存」で合成）。
+  TssCalc.plugin = function (opts) {
+    opts = opts || {};
+    var calc = TssCalc(opts);
+    return function (grid) {
+      var keys = opts.columns || null;
+      for (var c = 0; c < grid.COLS; c++) {
+        var cfg = grid.columns[c]; if (!cfg) continue;
+        var hit = keys ? (keys.indexOf(cfg.data) >= 0) : (cfg.type === 'number');
+        if (!hit) continue;
+        var prev = (typeof cfg.parse === 'function') ? cfg.parse : null;
+        cfg.parse = prev ? (function (pv) { return function (v) { return pv(calc(v)); }; })(prev) : calc;
+      }
+      return { name: 'calc' };
+    };
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssCalc;
+  else root.TssCalc = TssCalc;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-calendar.css

@@ -0,0 +1,40 @@
+/* TssCalendar — スタイル。業務側は下の CSS 変数を上書きするだけでテーマを変えられる。
+   例: .tss-cal { --cal-accent:#c0392b; --cal-radius:10px; } / 特定業務だけ .myapp .tss-cal { ... } */
+.tss-cal {
+  /* ▼ テーマ変数（上書きポイント） */
+  --cal-bg: #fff;
+  --cal-fg: #222;
+  --cal-border: #c3ccd6;
+  --cal-accent: #2aa0d8;          /* 選択日 */
+  --cal-hover: #eef4ff;
+  --cal-sun: #d61f2b;             /* 日曜・祝日の文字 */
+  --cal-sat: #2456b0;             /* 土曜の文字 */
+  --cal-holiday-bg: #fff0f1;      /* 祝日セルの背景 */
+  --cal-muted: #b6bdc6;           /* 前後月・無効日 */
+  --cal-radius: 8px;
+  --cal-font: 13px "Segoe UI", "Meiryo", sans-serif;
+
+  position: fixed; z-index: 10000; background: var(--cal-bg); color: var(--cal-fg);
+  border: 1px solid var(--cal-border); border-radius: var(--cal-radius);
+  box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 8px; font: var(--cal-font); user-select: none; outline: none;
+}
+.tss-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 6px; }
+.tss-cal-title { font-weight: 600; }
+.tss-cal-sels { display: flex; gap: 4px; }
+.tss-cal-sels select { font: inherit; padding: 2px 4px; border: 1px solid var(--cal-border); border-radius: 5px; background: var(--cal-bg); color: var(--cal-fg); cursor: pointer; }
+.tss-cal-sels select:focus { outline: 2px solid var(--cal-accent); outline-offset: -1px; }
+.tss-cal-nav { border: 1px solid var(--cal-border); background: var(--cal-bg); color: var(--cal-fg); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 15px; line-height: 1; }
+.tss-cal-nav:hover { background: var(--cal-hover); }
+.tss-cal-grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
+.tss-cal-wl { text-align: center; font-size: 11px; color: #889; padding: 2px 0; }
+.tss-cal-wl.tss-cal-sun { color: var(--cal-sun); } .tss-cal-wl.tss-cal-sat { color: var(--cal-sat); }
+.tss-cal-day { text-align: center; padding: 6px 0; border-radius: 6px; cursor: pointer; }
+.tss-cal-day:hover { background: var(--cal-hover); }
+.tss-cal-day.tss-cal-sun { color: var(--cal-sun); }
+.tss-cal-day.tss-cal-sat { color: var(--cal-sat); }
+.tss-cal-day.tss-cal-holiday { color: var(--cal-sun); background: var(--cal-holiday-bg); }
+.tss-cal-day.tss-cal-other { color: var(--cal-muted); }
+.tss-cal-day.tss-cal-today { box-shadow: inset 0 0 0 1px var(--cal-accent); }
+.tss-cal-day.tss-cal-focus { box-shadow: inset 0 0 0 2px var(--cal-accent); }
+.tss-cal-day.tss-cal-sel { background: var(--cal-accent); color: #fff; }
+.tss-cal-day.tss-cal-disabled { color: var(--cal-muted); background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.04) 4px, rgba(0,0,0,.04) 8px); cursor: not-allowed; }

package/plugins/tss-calendar.js

@@ -0,0 +1,133 @@
+/*! TssCalendar — 日付ピッカー（TssGrid のカスタムエディタ / 単体ウィジェット両用）
+ *  休日カレンダーを JSON で渡せる（勤怠・シフト等向け）。CSS は tss-calendar.css をクラス/変数で自由に。
+ *  使い方（グリッド）: columns: [{ type:'date', editor: TssCalendar({ holidays }) }]
+ *  使い方（単体）   : TssCalendar({holidays}).openAt(anchorEl, isoValue, onPick)
+ */
+(function (root) {
+  'use strict';
+  function pad(n) { return String(n).padStart(2, '0'); }
+  function iso(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
+  function parseISO(s) { var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(s || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
+  function sameDay(a, b) { return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+
+  function TssCalendar(opts) {
+    opts = opts || {};
+    var holidays = opts.holidays || {};            // { 'YYYY-MM-DD': '名称'(string) | {name,type} }
+    var weekend = opts.weekend || [0, 6];          // 0=日, 6=土
+    var weekLabels = opts.weekLabels || ['日', '月', '火', '水', '木', '金', '土'];
+    var monthLabel = opts.monthLabel || function (y, m) { return y + '年' + (m + 1) + '月'; };
+    var minD = parseISO(opts.min), maxD = parseISO(opts.max);
+    var disable = opts.disable || [];              // ['holiday','weekend'] など、選択不可にする種別
+    var holName = function (h) { return h == null ? null : (typeof h === 'object' ? h.name : h); };
+    var holType = function (h) { return (h && typeof h === 'object' && h.type) ? h.type : null; };
+
+    var ty = new Date().getFullYear();
+    var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
+    var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
+    var pop = null, view = null, sel = null, focus = null, ref = null, done = false, outside = null;
+
+    function disabled(d) {
+      if (minD && d < minD) return true;
+      if (maxD && d > maxD) return true;
+      var k = iso(d);
+      if (disable.indexOf('holiday') >= 0 && holidays[k]) return true;
+      if (disable.indexOf('weekend') >= 0 && weekend.indexOf(d.getDay()) >= 0) return true;
+      return false;
+    }
+    function render() {
+      var y = view.getFullYear(), m = view.getMonth();
+      var start = new Date(y, m, 1).getDay(), today = new Date();
+      // 年・月はプルダウンで直接選べる（年送りが遅い問題の解消）。年範囲は min/max or 今日±12（view も内包）
+      var lo = Math.min(yrLo, y), hi = Math.max(yrHi, y), yrSel = '<select class="tss-cal-sel-yr" aria-label="年">';
+      for (var yy = lo; yy <= hi; yy++) yrSel += '<option value="' + yy + '"' + (yy === y ? ' selected' : '') + '>' + yy + '年</option>';
+      yrSel += '</select>';
+      var monSel = '<select class="tss-cal-sel-mon" aria-label="月">';
+      for (var mm = 0; mm < 12; mm++) monSel += '<option value="' + mm + '"' + (mm === m ? ' selected' : '') + '>' + (mm + 1) + '月</option>';
+      monSel += '</select>';
+      var html = '<div class="tss-cal-head">'
+        + '<button type="button" class="tss-cal-nav" data-nav="-1" aria-label="前の月">‹</button>'
+        + '<span class="tss-cal-sels">' + yrSel + monSel + '</span>'
+        + '<button type="button" class="tss-cal-nav" data-nav="1" aria-label="次の月">›</button></div>'
+        + '<div class="tss-cal-grid">';
+      for (var w = 0; w < 7; w++) {
+        var wc = w === 0 ? ' tss-cal-sun' : (w === 6 ? ' tss-cal-sat' : '');
+        html += '<div class="tss-cal-wl' + wc + '">' + esc(weekLabels[w]) + '</div>';
+      }
+      var d = new Date(y, m, 1 - start);
+      for (var i = 0; i < 42; i++) {
+        var cls = 'tss-cal-day', dow = d.getDay(), k = iso(d), h = holidays[k], nm = holName(h), tp = holType(h);
+        if (d.getMonth() !== m) cls += ' tss-cal-other';
+        if (dow === 0) cls += ' tss-cal-sun'; else if (dow === 6) cls += ' tss-cal-sat';
+        if (h) { cls += ' tss-cal-holiday'; if (tp) cls += ' tss-cal-hol-' + tp; }
+        if (sameDay(d, today)) cls += ' tss-cal-today';
+        if (sameDay(d, sel)) cls += ' tss-cal-sel';
+        if (sameDay(d, focus)) cls += ' tss-cal-focus';
+        if (disabled(d)) cls += ' tss-cal-disabled';
+        html += '<div class="' + cls + '" data-d="' + k + '"' + (nm ? ' title="' + esc(nm) + '"' : '') + '>' + d.getDate() + '</div>';
+        d.setDate(d.getDate() + 1);
+      }
+      pop.innerHTML = html + '</div>';
+    }
+    function place(anchor) {
+      var r = anchor.getBoundingClientRect();
+      pop.style.left = Math.max(2, Math.min(r.left, window.innerWidth - pop.offsetWidth - 6)) + 'px';
+      var top = r.bottom + 2;
+      if (top + pop.offsetHeight > window.innerHeight) top = Math.max(2, r.top - pop.offsetHeight - 2);
+      pop.style.top = top + 'px';
+    }
+    function onClick(e) {
+      var nav = e.target.getAttribute && e.target.getAttribute('data-nav');
+      if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); return; }
+      var dd = e.target.getAttribute && e.target.getAttribute('data-d');
+      if (dd) { var d = parseISO(dd); if (!disabled(d)) pick(d); }
+    }
+    function onChange(e) {
+      var t = e.target;
+      if (t.classList && t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
+      else if (t.classList && t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
+    }
+    function onKey(e) {
+      if (e.target && e.target.tagName === 'SELECT') return;   // 年/月プルダウン操作中は日移動しない
+      if (!focus) focus = sel ? new Date(sel) : new Date(view);
+      var k = e.key;
+      if (k === 'Escape') { e.preventDefault(); cancel(); return; }
+      if (k === 'Enter') { e.preventDefault(); if (!disabled(focus)) pick(focus); return; }
+      var dx = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[k];
+      if (dx != null) { e.preventDefault(); focus = new Date(focus); focus.setDate(focus.getDate() + dx); view = new Date(focus.getFullYear(), focus.getMonth(), 1); render(); return; }
+      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) {
+      done = false; sel = parseISO(value);
+      view = sel ? new Date(sel.getFullYear(), sel.getMonth(), 1) : new Date();
+      focus = sel ? new Date(sel) : new Date();
+      pop = document.createElement('div'); pop.className = 'tss-cal' + (opts.className ? ' ' + opts.className : '');
+      pop.tabIndex = -1; document.body.appendChild(pop);
+      pop.addEventListener('mousedown', function (e) { if (e.target.tagName !== 'SELECT') e.preventDefault(); });   // フォーカスを奪わない（select は除く）
+      pop.addEventListener('click', onClick);
+      pop.addEventListener('change', onChange);
+      pop.addEventListener('keydown', onKey);
+      render(); place(anchor);
+      ref = { pick: onPick, cancel: onCancel };
+      // 外側クリックで閉じる。ただしアンカー（開いた元セル）は除外＝再クリックはグリッド側でトグル処理させる
+      outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) cancel(); };
+      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 pick(d) { if (done) return; done = true; var f = ref.pick; teardown(); f(iso(d)); }
+    function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
+
+    return {
+      // TssGrid カスタムエディタ契約
+      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 : '📅',     // セル右端に表示する合図（opts.icon:'' で消せる）
+      openOnClick: opts.openOnClick !== false,        // シングルクリックで開く（既定 ON）
+      // 単体ウィジェット: 任意要素にアンカーして開く
+      openAt: function (anchorEl, value, onPick) { show(anchorEl, value, function (v) { onPick(v); }, null); },
+    };
+  }
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssCalendar;
+  else root.TssCalendar = TssCalendar;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-filter.css

@@ -0,0 +1,32 @@
+/* TssFilter — ヘッダのオートフィルタUI（plugins/tss-filter.js）。色は --tg-accent を流用。 */
+.tssgrid .tg-table thead th .tg-filter-btn {
+  display: inline-flex; align-items: center; margin-left: 4px; line-height: 1; cursor: pointer;
+  color: #b9bfcc; user-select: none; padding: 1px 2px; border-radius: 3px;
+}
+.tssgrid .tg-table thead th .tg-filter-btn .tg-filter-ico { display: block; }
+.tssgrid .tg-table thead th .tg-filter-btn:hover { color: #fff; background: rgba(255,255,255,.18); }
+.tssgrid .tg-table thead th .tg-filter-btn.on { color: var(--tg-accent, #2f6fed); background: #fff; }   /* 適用中はロートがアクセント色＋白地で明確 */
+
+.tg-filter-pop {
+  position: fixed; z-index: 1000; width: 220px; background: #fff; color: #1f2733;
+  border: 1px solid #c4ccd6; border-radius: 8px; box-shadow: 0 6px 22px rgba(20,40,80,.22);
+  font: 12.5px "Meiryo UI", "Segoe UI", sans-serif; padding: 8px; box-sizing: border-box;
+}
+.tg-filter-pop .tg-filter-search input {
+  width: 100%; box-sizing: border-box; padding: 4px 7px; border: 1px solid #cbd2dc; border-radius: 5px; font: inherit;
+}
+.tg-filter-pop .tg-filter-tools { font-size: 11.5px; color: #6b7280; margin: 6px 2px 4px; }
+.tg-filter-pop .tg-filter-tools a { color: var(--tg-accent, #2f6fed); cursor: pointer; text-decoration: none; }
+.tg-filter-pop .tg-filter-tools a:hover { text-decoration: underline; }
+.tg-filter-pop .tg-filter-list { max-height: 200px; overflow: auto; border: 1px solid #eef1f5; border-radius: 5px; padding: 3px; }
+.tg-filter-pop .tg-filter-list label {
+  display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; cursor: pointer; white-space: nowrap;
+}
+.tg-filter-pop .tg-filter-list label:hover { background: #f0f4fb; }
+.tg-filter-pop .tg-filter-list label span { overflow: hidden; text-overflow: ellipsis; }
+.tg-filter-pop .tg-filter-btns { display: flex; gap: 6px; margin-top: 8px; }
+.tg-filter-pop .tg-filter-btns button {
+  flex: 1; padding: 5px 0; border: 1px solid #cbd2dc; background: #fff; border-radius: 5px; font: inherit; cursor: pointer;
+}
+.tg-filter-pop .tg-filter-btns button[data-act=apply] { background: var(--tg-accent, #2f6fed); border-color: var(--tg-accent, #2f6fed); color: #fff; }
+.tg-filter-pop .tg-filter-btns button:hover { filter: brightness(.97); }