@threestarsoftware/tssgrid 0.1.29 → 0.1.30-beta.0

package/CHANGELOG.md

@@ -3,6 +3,11 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [Unreleased]
+
+### 追加（プラグイン）
+- **`tss-comment`（セルの注釈・Excel のコメント/メモ風）を追加** — コメントのあるセルは**右上に赤い三角**、**ホバーで吹き出し**、**右クリック or Shift+F2 で挿入・編集・削除**（編集中 Ctrl+Enter 保存／Esc 取消）。**他プラグインと干渉しない設計**＝セルのフック（`cellClass`/`cellStyle`/`editor`/`format`）を一切奪わず、コメント済みの `<td>` に自前でクラスを足すだけ（再描画追従は `MutationObserver`）。条件付き書式・heatmap・cascade/calendar 等と**同じセルで共存**できる。キーは `rowId(row)`（既定は行index／`row.detailId` 等を返せば**ソート/フィルタ/再読込に追従**）＋列 `data` キーで持ち、r/c ではズレない。永続化は持たず `onCommentChange({id,dataKey,text,action})` で通知するだけ（保存はホストへ委譲）。`contextMenu` に `cmt.menuItems()` を混ぜる／`readOnly` で閲覧専用。例 `examples/comment.html`。
+
 ## [0.1.29] - 2026-10-25
 
 ### 追加（プラグイン）

package/README.md

@@ -59,7 +59,7 @@ import '@threestarsoftware/tssgrid/tssgrid.css';
 **プラグインの型（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
+// 対応: tss-combo / tss-autocomplete / tss-cascade / tss-calendar / tss-datetime / tss-time / tss-comment
 columns: [{ data: 'pay', editor: TssCombo({ options: [{ code: '01', label: '現金' }], other: { code: '99', label: 'その他' }, codeField: 'payCode' }) }];
 ```
 それ以外のプラグイン（`usePlugin` 系・`format` ヘルパ系）は型定義がまだ無いので、必要なら5行のアンビエント宣言で補えます（`editor.open/close` を持つ戻り値は `EditorDef`）:
@@ -545,6 +545,30 @@ new TssGrid(el, { columns: [{ type: 'time', editor: t }] });
 - `opts`: `step`(分刻み, 既定1) / `hour12`(AM/PM 表示, 既定false) / `icon`(既定 `'🕐'`) / `openOnClick`(既定true) / `className`。
 - 🕐 を**シングルクリックで開閉**、**現在**/**決定**ボタン、キーボード（Enter 決定 / Esc 取消）、外側クリックで採用、フィルで下へコピー。見た目は `--time-*` 変数と `tss-time-*` クラスで自由に。
 
+### 同梱プラグイン: セルのコメント（tss-comment・Excel のメモ風）
+
+`plugins/tss-comment.js`＝ セルに注釈を付ける。コメントのあるセルは**右上に赤い三角**、**ホバーで吹き出し**、**右クリック or Shift+F2 で挿入・編集・削除**。動く例: [`examples/comment.html`](https://tssgrid.threestarsoftware.co.jp/examples/comment.html)。
+
+**★他プラグインと干渉しません**：セルのフック（`cellClass`/`cellStyle`/`editor`/`format`）を一切奪わず、コメント済みの `<td>` に自前でクラスを足すだけ（再描画追従は `MutationObserver`）。条件付き書式・heatmap・cascade/calendar と**同じセルで共存**できます。
+
+```html
+<link rel="stylesheet" href="plugins/tss-comment.css">
+<script src="plugins/tss-comment.js"></script>
+```
+```js
+const menu = [];                                   // contextMenu は参照渡し（下で項目を足す）
+const grid = new TssGrid(el, { data, columns, contextMenu: menu });
+const cmt = TssComment(grid, {
+  rowId: (row) => row.id,                          // 安定キー（ソート/フィルタ/再読込に追従）。既定は行index
+  comments: [{ id: 101, dataKey: 'score', text: '要確認' }],   // 初期（保存済み）
+  onCommentChange: ({ id, dataKey, text, action }) => save(id, dataKey, text, action),  // 永続化はホストへ
+});
+menu.push(...cmt.menuItems());                     // 右クリックに「挿入/編集・削除」を追加
+```
+- キーは **`rowId(row)` ＋ 列 `data` キー**で持つ（r/c では持たない＝ソート/フィルタ/行削除でズレない）。永続化は持たず `onCommentChange` で通知するだけ（保存はホストが担当）。
+- `opts`: `rowId` / `comments` / `onCommentChange` / `canComment(r,c)` / `readOnly`(閲覧専用) / `labels` / `className`。API: `set/get/remove/open/getAll/menuItems/refresh/destroy`。
+- グリッドを作り直すホストは、作り直すたびに `TssComment(grid, { comments: cmt.getAll(), … })` で貼り直す。見た目は `--cmt-*` 変数と `tg-comment-*` クラスで自由に。
+
 ### 同梱プラグイン: 派生列（formula / computed column）
 
 `plugins/tss-formula.js`＝「その行の値だけから計算する列」を `columns[c].formula` 関数で書けるようにする。金額＝数量×単価、税込＝金額×1.1 のような**派生列**を宣言的に。動く例: [`examples/formula.html`](https://tssgrid.threestarsoftware.co.jp/examples/formula.html)。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.29",
+  "version": "0.1.30-beta.0",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
@@ -63,6 +63,10 @@
       "types": "./plugins/tss-hyperlink.d.ts",
       "default": "./plugins/tss-hyperlink.js"
     },
+    "./plugins/tss-comment.js": {
+      "types": "./plugins/tss-comment.d.ts",
+      "default": "./plugins/tss-comment.js"
+    },
     "./plugins/*": "./plugins/*",
     "./package.json": "./package.json"
   },

package/plugins/tss-comment.css

@@ -0,0 +1,47 @@
+/* TssComment — セル注釈（マーカー＋吹き出し＋編集）。業務側は下の CSS 変数で色/角を調整。
+   例: .tssgrid { --cmt-mark:#e8590c; } / 吹き出し: .tg-comment-bubble { --cmt-bubble-bg:#fff; } */
+
+/* ▼ マーカー（セル右上の小さな三角＝コメント有り）。セルフックを使わず td に付けるだけ＝他の装飾と共存。 */
+.tssgrid .tg-table td.tg-comment-mark { position: relative; }   /* ::after の土台（コメント済みセルだけに付与） */
+.tssgrid .tg-table td.tg-comment-mark::after {
+  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
+  border-style: solid; border-width: 0 6px 6px 0;
+  border-color: transparent var(--cmt-mark, #e03131) transparent transparent;
+  pointer-events: none;   /* クリックはセルに通す（編集/選択の邪魔をしない） */
+}
+
+/* ▼ ホバーの吹き出し（読み取り表示）。Excel のメモ風＝淡色の付箋。 */
+.tg-comment-bubble {
+  --cmt-bubble-bg: #fffbe6; --cmt-bubble-border: #e0c200; --cmt-bubble-fg: #333;
+  position: fixed; z-index: 10001; max-width: 280px;
+  background: var(--cmt-bubble-bg); color: var(--cmt-bubble-fg);
+  border: 1px solid var(--cmt-bubble-border); border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
+  padding: 6px 9px; font: 12px/1.5 "Segoe UI", "Meiryo", sans-serif;
+  white-space: pre-wrap; word-break: break-word; pointer-events: none;   /* 表示専用＝マウスを吸わない */
+}
+
+/* ▼ 編集ポップアップ（挿入/編集）。 */
+.tg-comment-editor {
+  --cmt-bg: #fff; --cmt-border: #c3ccd6; --cmt-accent: #2aa0d8;
+  position: fixed; z-index: 10002;
+  background: var(--cmt-bg); border: 1px solid var(--cmt-border); border-radius: 8px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, .2); padding: 8px;
+  font: 13px "Segoe UI", "Meiryo", sans-serif;
+}
+.tg-comment-editor .tg-comment-ta {
+  display: block; width: 240px; min-height: 64px; resize: vertical; box-sizing: border-box;
+  font: inherit; color: #222; padding: 6px 8px;
+  border: 1px solid var(--cmt-border); border-radius: 6px; outline: none;
+}
+.tg-comment-editor .tg-comment-ta:focus { border-color: var(--cmt-accent); box-shadow: 0 0 0 2px rgba(42, 160, 216, .25); }
+.tg-comment-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
+.tg-comment-btn {
+  font: inherit; cursor: pointer; padding: 4px 12px;
+  border: 1px solid var(--cmt-border); border-radius: 6px; background: #f5f7fa; color: #222;
+}
+.tg-comment-btn:hover { background: #eef4ff; }
+.tg-comment-btn[data-act="save"] { background: var(--cmt-accent); border-color: var(--cmt-accent); color: #fff; }
+.tg-comment-btn[data-act="save"]:hover { filter: brightness(1.05); }
+.tg-comment-btn.danger { color: #c0392b; }
+.tg-comment-btn.danger:hover { background: #fdecea; }

package/plugins/tss-comment.d.ts

@@ -0,0 +1,90 @@
+// TssComment — セルの注釈（Excel のコメント/メモ風）。マーカー＋ホバー吹き出し＋編集。
+// ★セルのフック（cellClass/cellStyle/editor/format）を奪わない＝他プラグイン・条件付き書式と共存。
+// 永続化は持たず onCommentChange で通知するだけ（保存/読込はホストが持つ）。
+import { TssGrid } from '../src/tssgrid';
+
+export = TssComment;
+export as namespace TssComment;
+
+declare function TssComment(grid: TssGrid, opts?: TssComment.Options): TssComment.Controller;
+
+declare namespace TssComment {
+  /** 保存済み/初期コメント1件（永続化の単位）。 */
+  interface CommentRecord {
+    /** 行の安定ID（`rowId` が返す値）。 */
+    id: string | number;
+    /** 列の `data` キー。 */
+    dataKey: string;
+    text: string;
+  }
+
+  /** onCommentChange に渡る変更情報。 */
+  interface ChangeInfo {
+    id: string;
+    dataKey: string;
+    /** 変更時点の表示上の行・列インデックス（参考）。 */
+    r: number;
+    c: number;
+    /** 削除時は ''。 */
+    text: string;
+    action: 'set' | 'delete';
+  }
+
+  interface Labels {
+    add?: string;
+    edit?: string;
+    remove?: string;
+    placeholder?: string;
+    save?: string;
+    del?: string;
+    cancel?: string;
+  }
+
+  interface Options {
+    /** 初期（保存済み）コメント。 */
+    comments?: CommentRecord[];
+    /**
+     * 行の安定ID。ソート/フィルタ/行削除/再読込に追従させるため、行を一意に指す値を返す
+     * （例: `(row) => row.detailId`）。省略時は行インデックス（＝並べ替えると位置基準になる）。
+     * `row` は `grid.getRows()[r]`（オブジェクト）。
+     */
+    rowId?: (row: Record<string, unknown>, r: number) => string | number;
+    /** コメントが変わるたびに呼ぶ（永続化はホストへ委譲）。 */
+    onCommentChange?: (info: ChangeInfo) => void;
+    /** そのセルにコメントして良いか（既定 true）。保存済み行のロック等に。 */
+    canComment?: (r: number, c: number) => boolean;
+    /** 閲覧専用（マーカー＋ホバー表示のみ・編集/削除・メニュー・Shift+F2 を出さない）。 */
+    readOnly?: boolean;
+    /** ボタン/メニューの文言。 */
+    labels?: Labels;
+    /** 吹き出し/編集ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  /** contextMenu に混ぜる項目（挿入/編集・削除）。 */
+  interface MenuItem {
+    name: string | ((arg: unknown) => string);
+    key: string;
+    disabled?: (arg: unknown) => boolean;
+    callback?: (arg: unknown) => void;
+  }
+
+  interface Controller {
+    /** セルにコメントを設定（空文字なら削除扱い）。 */
+    set(r: number, c: number, text: string): void;
+    /** セルのコメント文字列（無ければ null）。 */
+    get(r: number, c: number): string | null;
+    /** セルのコメントを削除。 */
+    remove(r: number, c: number): void;
+    /** 編集ポップアップを開く。 */
+    open(r: number, c: number): void;
+    /** 保存済み一覧（ホストの永続化・グリッド作り直し時の貼り直し用）。 */
+    getAll(): CommentRecord[];
+    /** グリッドの `contextMenu` に混ぜる項目（挿入/編集・削除）。readOnly では空配列。 */
+    menuItems(): MenuItem[];
+    /** マーカーを貼り直す。 */
+    refresh(): void;
+    /** observer / リスナ / ポップアップを解除。 */
+    destroy(): void;
+  }
+}

package/plugins/tss-comment.js

@@ -0,0 +1,253 @@
+/*! TssComment — セルの注釈（Excel のコメント/メモ風）。マーカー＋ホバー吹き出し＋編集。
+ *
+ *  ★他プラグインと干渉しない設計：セルのフック（cellClass / cellStyle / editor / format）を
+ *    一切奪わない。コメント済みセルの <td> に自前でクラス（tg-comment-mark）を足し直すだけ＝
+ *    条件付き書式・heatmap(cellStyle)・cascade/calendar(editor) 等と同じセルに共存できる。
+ *    再描画への追従は MutationObserver（グリッドの <table> を監視）で行う（クラス付与は属性変更＝
+ *    childList 監視をループさせない）。吹き出し/編集ポップアップは body 直下にアンカー（calendar と同型）。
+ *
+ *  使い方:
+ *    const cmt = TssComment(grid, {
+ *      rowId: (row, r) => row.detailId ?? r,        // 安定キー（ソート/フィルタ/再読込に追従）。既定は行index
+ *      comments: [{ id: 12, dataKey: 'amount', text: '要確認' }],  // 初期（保存済み）
+ *      onCommentChange: ({ id, dataKey, text, action }) => save(...),  // 永続化はホストへ委譲
+ *    });
+ *    // 右クリックに項目を出す（ホストの contextMenu に混ぜる）:
+ *    new TssGrid(el, { contextMenu: [ ...cmt.menuItems(), ...others ] })
+ *    // ※グリッドを作り直すホストは、作り直すたびに TssComment(grid, {comments: cmt.getAll(), ...}) で貼り直す。
+ *
+ *  キー = rowId(行) ＋ 列の data キー（r/c では持たない＝ソート/フィルタ/行削除でズレないため）。
+ *  永続化はしない（onCommentChange で通知するだけ）。保存/読込はホスト（kintone 等）が持つ。
+ */
+(function (root) {
+  'use strict';
+  var SEP = '\u0000';
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+
+  // 要素をアンカー（セル）に合わせて配置（画面外にはみ出さない）。calendar と同じ考え方。
+  function place(el, anchor) {
+    var r = anchor.getBoundingClientRect();
+    el.style.left = Math.max(2, Math.min(r.left, window.innerWidth - el.offsetWidth - 6)) + 'px';
+    var top = r.bottom + 2;
+    if (top + el.offsetHeight > window.innerHeight) top = Math.max(2, r.top - el.offsetHeight - 2);
+    el.style.top = top + 'px';
+  }
+
+  function TssComment(grid, opts) {
+    opts = opts || {};
+    if (!grid || !grid.table) throw new Error('TssComment: grid が不正です');
+    var customRowId = typeof opts.rowId === 'function' ? opts.rowId : null;
+    var onChange = typeof opts.onCommentChange === 'function' ? opts.onCommentChange : null;
+    var canComment = typeof opts.canComment === 'function' ? opts.canComment : function () { return true; };
+    var readOnly = !!opts.readOnly;
+    var L = Object.assign({
+      add: 'コメントを挿入', edit: 'コメントを編集', remove: 'コメントを削除',
+      placeholder: 'コメントを入力…', save: '保存', del: '削除', cancel: '取消',
+    }, opts.labels || {});
+
+    var host = grid.root || (grid.table.closest && grid.table.closest('.tssgrid')) || grid.table;
+    var store = new Map();   // key(id\0dataKey) -> text
+    var bubble = null, editor = null, edCell = null, outside = null, hideT = 0, rafId = 0, dead = false;
+
+    // 初期コメント（保存済み）を取り込む
+    (opts.comments || []).forEach(function (cm) {
+      if (cm && cm.id != null && cm.dataKey != null && cm.text != null) store.set(cm.id + SEP + cm.dataKey, String(cm.text));
+    });
+
+    // ── キー計算 ───────────────────────────────────────────
+    function dataKeyOf(c) { var col = (grid.columns && grid.columns[c]) || {}; return col.data != null ? String(col.data) : ('#' + c); }
+    function colOf(dataKey) {
+      var cols = grid.columns || [];
+      for (var c = 0; c < cols.length; c++) if (dataKeyOf(c) === dataKey) return c;
+      return -1;
+    }
+    // 行 r の安定ID。customRowId が無ければ行index。rows はキャッシュ（1操作内で使い回す）。
+    var _rowsCache = null;
+    function rowsNow() { if (!_rowsCache) _rowsCache = grid.getRows(); return _rowsCache; }
+    function clearRowsCache() { _rowsCache = null; }
+    function idAt(r) { if (!customRowId) return String(r); var row = rowsNow()[r]; return String(customRowId(row, r)); }
+    function keyAt(r, c) { return idAt(r) + SEP + dataKeyOf(c); }
+
+    // ── マーカー再描画（セルフックを使わず td にクラスを足すだけ）───────────
+    function decorate() {
+      rafId = 0;
+      if (dead || !grid.table) return;
+      var marked = grid.table.querySelectorAll('td.tg-comment-mark');
+      for (var i = 0; i < marked.length; i++) marked[i].classList.remove('tg-comment-mark');
+      if (store.size === 0) return;
+      // id -> 現在の表示行index（読み込み済みの行だけ）
+      clearRowsCache();
+      var rows = customRowId ? rowsNow() : null;
+      var idToRow = new Map();
+      var n = customRowId ? rows.length : grid.getData().length;
+      for (var r = 0; r < n; r++) idToRow.set(customRowId ? String(customRowId(rows[r], r)) : String(r), r);
+      store.forEach(function (text, key) {
+        var sp = key.indexOf(SEP), id = key.slice(0, sp), dk = key.slice(sp + 1);
+        var rr = idToRow.get(id); if (rr == null) return;
+        var cc = colOf(dk); if (cc < 0) return;
+        var td = grid.cellEl(rr, cc); if (td) td.classList.add('tg-comment-mark');
+      });
+      clearRowsCache();
+    }
+    function scheduleDecorate() { if (!rafId) rafId = (window.requestAnimationFrame || window.setTimeout)(decorate, 0); }
+
+    // 再描画に追従：table の子が作り直されたら貼り直す（クラス付与は属性変更＝childList 監視はループしない）
+    var mo = new MutationObserver(scheduleDecorate);
+    mo.observe(grid.table, { childList: true, subtree: true });
+
+    // ── ホバーの吹き出し（読み取り専用の表示）───────────────
+    function showBubble(td, text) {
+      hideBubble();
+      bubble = document.createElement('div');
+      bubble.className = 'tg-comment-bubble' + (opts.className ? ' ' + opts.className : '');
+      bubble.textContent = text;
+      document.body.appendChild(bubble);
+      place(bubble, td);
+    }
+    function hideBubble() { if (bubble) { bubble.remove(); bubble = null; } }
+    function onOver(e) {
+      var td = e.target.closest && e.target.closest('td.tg-comment-mark');
+      if (!td || !grid.table.contains(td)) return;
+      if (hideT) { clearTimeout(hideT); hideT = 0; }
+      var r = +td.getAttribute('data-r'), c = +td.getAttribute('data-c');
+      var text = getText(r, c);
+      if (text != null) showBubble(td, text);
+    }
+    function onOut(e) {
+      var td = e.target.closest && e.target.closest('td.tg-comment-mark');
+      if (!td) return;
+      if (e.relatedTarget && td.contains(e.relatedTarget)) return;   // セル内の移動は無視
+      hideT = setTimeout(hideBubble, 60);
+    }
+
+    // ── 編集ポップアップ ───────────────────────────────────
+    function openEditor(r, c) {
+      if (readOnly || dead) return;
+      if (!canComment(r, c)) return;
+      closeEditor(); hideBubble();
+      var td = grid.cellEl(r, c); if (!td) return;
+      edCell = { r: r, c: c };
+      editor = document.createElement('div');
+      editor.className = 'tg-comment-editor' + (opts.className ? ' ' + opts.className : '');
+      var cur = getText(r, c) || '';
+      editor.innerHTML =
+        '<textarea class="tg-comment-ta" placeholder="' + esc(L.placeholder) + '"></textarea>' +
+        '<div class="tg-comment-btns">' +
+        '<button type="button" class="tg-comment-btn" data-act="save">' + esc(L.save) + '</button>' +
+        (cur ? '<button type="button" class="tg-comment-btn danger" data-act="del">' + esc(L.del) + '</button>' : '') +
+        '<button type="button" class="tg-comment-btn" data-act="cancel">' + esc(L.cancel) + '</button>' +
+        '</div>';
+      document.body.appendChild(editor);
+      var ta = editor.querySelector('.tg-comment-ta');
+      ta.value = cur;
+      place(editor, td);
+      ta.focus(); ta.setSelectionRange(cur.length, cur.length);
+      editor.addEventListener('click', function (e) {
+        var act = e.target.getAttribute && e.target.getAttribute('data-act');
+        if (act === 'save') commitEditor();
+        else if (act === 'del') { removeAt(r, c); closeEditor(); }
+        else if (act === 'cancel') closeEditor();
+      });
+      ta.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') { e.preventDefault(); closeEditor(); }
+        else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); commitEditor(); }
+      });
+      outside = function (e) { if (editor && !editor.contains(e.target)) closeEditor(); };
+      setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
+    }
+    function commitEditor() {
+      if (!editor || !edCell) return;
+      var ta = editor.querySelector('.tg-comment-ta'), text = ta ? ta.value.trim() : '';
+      var cell = edCell;
+      closeEditor();
+      if (text) setText(cell.r, cell.c, text); else removeAt(cell.r, cell.c);
+    }
+    function closeEditor() {
+      if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; }
+      if (editor) { editor.remove(); editor = null; }
+      edCell = null;
+    }
+
+    // ── データ操作（＋onCommentChange 通知・マーカー更新）───────
+    function getText(r, c) { var v = store.get(keyAt(r, c)); return v == null ? null : v; }
+    function fire(r, c, text, action) {
+      if (!onChange) return;
+      try { onChange({ id: idAt(r), dataKey: dataKeyOf(c), r: r, c: c, text: text, action: action }); } catch (e) { /* noop */ }
+    }
+    function setText(r, c, text) {
+      text = String(text == null ? '' : text);
+      if (!text) { removeAt(r, c); return; }
+      store.set(keyAt(r, c), text); clearRowsCache();
+      fire(r, c, text, 'set'); decorate();
+    }
+    function removeAt(r, c) {
+      var k = keyAt(r, c);
+      if (!store.has(k)) { clearRowsCache(); return; }
+      store.delete(k); clearRowsCache();
+      fire(r, c, '', 'delete'); decorate();
+    }
+
+    // ── キーボード（Shift+F2＝Excel 流でアクティブセルに挿入/編集）────
+    function onKey(e) {
+      if (readOnly) return;
+      if (e.key === 'F2' && e.shiftKey) {
+        var a = grid.active; if (!a) return;
+        e.preventDefault(); e.stopPropagation(); openEditor(a.r, a.c);
+      }
+    }
+
+    grid.table.addEventListener('mouseover', onOver);
+    grid.table.addEventListener('mouseout', onOut);
+    host.addEventListener('keydown', onKey, true);
+    scheduleDecorate();
+
+    return {
+      /** セルにコメントを設定（空なら削除扱い）。 */
+      set: function (r, c, text) { setText(r, c, text); },
+      /** セルのコメント文字列（無ければ null）。 */
+      get: function (r, c) { var v = getText(r, c); clearRowsCache(); return v; },
+      /** セルのコメントを削除。 */
+      remove: function (r, c) { removeAt(r, c); },
+      /** 編集ポップアップを開く。 */
+      open: function (r, c) { openEditor(r, c); },
+      /** 保存済み一覧 [{id, dataKey, text}]（ホストの永続化・貼り直し用）。 */
+      getAll: function () {
+        var out = []; store.forEach(function (text, key) { var sp = key.indexOf(SEP); out.push({ id: key.slice(0, sp), dataKey: key.slice(sp + 1), text: text }); }); return out;
+      },
+      /** グリッドの contextMenu に混ぜる項目（挿入/編集・削除）。セル右クリック時のみ表示。
+       *  本体契約: name/disabled/hidden は (s, ctx)、callback は { range, key, ctx }。ctx={on,r,c}。 */
+      menuItems: function () {
+        if (readOnly) return [];
+        var cellFromCtx = function (ctx) {
+          if (ctx && ctx.on === 'cell' && ctx.r != null) return { r: ctx.r, c: ctx.c };
+          var a = grid.active; return a ? { r: a.r, c: a.c } : null;
+        };
+        var onlyCell = function (s, ctx) { return !(ctx && ctx.on === 'cell'); };   // hidden: セル以外（列/行/隅）では出さない
+        return [
+          { name: function (s, ctx) { var cc = cellFromCtx(ctx); return cc && getText(cc.r, cc.c) != null ? L.edit : L.add; },
+            key: 'tss-comment-edit', hidden: onlyCell,
+            disabled: function (s, ctx) { var cc = cellFromCtx(ctx); return !cc || !canComment(cc.r, cc.c); },
+            callback: function (arg) { var cc = cellFromCtx(arg && arg.ctx); if (cc) openEditor(cc.r, cc.c); } },
+          { name: L.remove, key: 'tss-comment-remove', hidden: onlyCell,
+            disabled: function (s, ctx) { var cc = cellFromCtx(ctx); return !cc || getText(cc.r, cc.c) == null; },
+            callback: function (arg) { var cc = cellFromCtx(arg && arg.ctx); if (cc) removeAt(cc.r, cc.c); } },
+        ];
+      },
+      /** マーカーを貼り直す（ホストが構造を変えた後などに手動で）。 */
+      refresh: function () { scheduleDecorate(); },
+      /** 後片付け（observer / リスナ / 開いているポップアップを解除）。 */
+      destroy: function () {
+        dead = true;
+        try { mo.disconnect(); } catch (e) { /* noop */ }
+        grid.table && grid.table.removeEventListener('mouseover', onOver);
+        grid.table && grid.table.removeEventListener('mouseout', onOut);
+        host.removeEventListener('keydown', onKey, true);
+        if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; }
+        hideBubble(); closeEditor();
+        if (grid.table) { var m = grid.table.querySelectorAll('td.tg-comment-mark'); for (var i = 0; i < m.length; i++) m[i].classList.remove('tg-comment-mark'); }
+      },
+    };
+  }
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssComment;
+  else root.TssComment = TssComment;
+})(typeof self !== 'undefined' ? self : this);