@threestarsoftware/tssgrid 0.1.32 → 0.1.34

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.34] - 2026-11-05
+
+### 改善（プラグイン）
+- **`tss-toggle` を 2択から N択（3つ以上）へ拡張**。これまで内部で選択肢を2つに切り詰めていた（`slice(0,2)`）のを撤廃し、`columns: { ans: ['未回答','出席','欠席'] }` のように **3つ以上の択一**を「並んだセグメント＝ラジオ的に全選択肢が常に見える」形で置けるようにした。クリック確定（`setValue`＝検証・Undo を通る）・許可値以外の validator 拒否・アクティブセルで **Space は次の値へ循環**（2択なら従来どおり反対側）は据え置き。値は dropdown 同様 **value を保存**。**短いラベルなら dropdown と同程度の幅**で収まり、タップ数は「開く→選ぶ」の 2 から **1** に。用途: 出欠（未回答/出席/欠席）・優先度（高/中/低）など少数の短い択一。選択肢が多い／ラベルが長い／列幅が狭い場合は従来どおり `type:'dropdown'` が省スペース。例 `examples/toggle.html` に出欠3択パネルを追加。**後方互換**（2択の既存指定・`TssToggle.format()` 直指定は不変）。
+
+## [0.1.33] - 2026-11-05
+
+### 追加
+- **`ellipsis`（溢れた文字を … で省略＋ホバーで全文）を追加**（コア・`wordWrap` の兄弟）。既定は従来どおり `overflow:hidden` で切るだけ（… は出ない）。`ellipsis:true`（グリッド全体）／`columns[c].ellipsis:true`（列単位）で**末尾を省略記号**にし、**溢れているセルだけホバーで全文を `title`**（ネイティブツールチップ）表示。溢れているセルだけ初回ホバーで1回測るので軽い（未使用なら即 return＝ゼロコスト）。**見え方だけ**＝値・コピー・編集は全文のまま（コピーは表示文字でなく元の値）。折り返し（`wordWrap`）と同時なら折り返しが優先。例 `examples/ellipsis.html`。
+
+### 修正
+- **`html:true` 列の編集がフォーマット後の生HTMLになる不具合を修正**（コア）— 編集開始値を作る `_editText` が、date/number 以外では `_displayValue`（format 適用後）を返しており、`html:true`＋`format` 列だと `<a>`/`<span>` の**生HTML**が編集欄に入って崩れていた（その後タグのままリンク化して二重に崩れる）。**`html:true` 列は「生の値」を編集する**ように修正（表示の装飾＝format と、編集対象＝値、を分離）。html でない format 列は従来どおり表示形を編集（回帰なし）。
+
+### 改善（プラグイン）
+- **`tss-hyperlink` に「モードB（値＝文字だけ・URLはシステムが付与）」を追加** — 従来は値 `"表示\|URL"` に URL を埋める必要があった（モードA）。`url` オプション（文字列 or `(value,ctx,row)=>string`）を渡すと、**値は表示テキストだけ**になり URL・装飾をシステム側で付与できる（入力・コピー・編集は文字だけ／Tabulator の `link` フォーマッタ同様）。安全な URL を返せば `<a>`、`null`/`''`/不正なら `<span>`（href 無し＝**SPA クリックをホストが拾う**用）、`false` で素テキスト。`className` は関数化（行ごとに出し分け）、`attrs`（`data-*`/`aria-*`/`title`/`id`/`role` のみ・値はエスケープ・`null` は出さない）で `data-id` 等を安全に付与。本文は常に自動エスケープ＝手書き format の XSS 罠を回避。**`safeUrl` がサイト内相対パス（`/path`・`./`・`../`・`#`・`?`）をそのまま許可**（SPA ルーティング用）、**プロトコル相対 `//host` は拒否**（不意の外部遷移回避）。`TssHyperlink()`（値＝"text\|url"）は**完全後方互換**。
+
 ## [0.1.32] - 2026-11-03
 
 ### 改善（プラグイン）

package/README.md

@@ -771,6 +771,7 @@ columns: [
 ```
 - **★安全URL**: `http`/`https`/`mailto`/`tel` のみリンク化。**`javascript:`・`data:` 等は素のテキストに落とす**（XSS 無効化）。スキーム無しは `https://` 補完、表示テキスト・href は HTML エスケープ、`target=_blank` に `rel="noopener noreferrer"` を付与。
 - `separator`(既定 `'|'`) / `target`(既定 `'_blank'`) / `className`(既定 `'tss-link'`)。`TssHyperlink.safeUrl(u)` で URL 安全化だけ単体利用も可（許可外は `null`）。
+- **モードB（値＝文字だけ・URL はシステムが付与）**: `url` オプション（文字列 or `(value,ctx,row)=>string`）を渡すと値は表示テキストだけになり、**入力・コピー・編集も文字だけ**（Tabulator の `link` フォーマッタ同様）。安全な URL を返せば `<a>`、`null`/`''`/不正なら `<span>`（href 無し＝**SPA クリックをホストが拾う**用）、`false` で素テキスト。`className` は関数化（行ごとに出し分け）、`attrs`(`data-*`/`aria-*`/`title`/`id`/`role` のみ・値はエスケープ・`null` は出さない)で `data-id` 等を安全付与。`label` で表示差し替え。サイト内相対パス（`/x`・`./`・`../`・`#`・`?`）は許可、`//host` は拒否。例: `format: TssHyperlink({ url:(v,{r},row)=>'/members/'+row.id })`。
 - 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料で**。
 
 ### 同梱プラグイン: セル内 横棒グラフ（bar・データバー）
@@ -816,9 +817,9 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 ```
 - **おすすめ（いずれも `<script>`/CDN で no-build）**: **Chart.js**（MIT・定番・バランス◎）/ **ApexCharts**（MIT・モダンで映え）/ **Apache ECharts**（Apache-2.0・多機能）/ **uPlot**（MIT・超軽量）。Highcharts/AG Charts は商用有料なので MIT 方針なら避ける。
 
-### 同梱プラグイン: 2択トグル（toggle・有効｜無効）
+### 同梱プラグイン: 択一トグル／ラジオ（toggle・2択以上）
 
-`plugins/tss-toggle.js`＋`.css`＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
+`plugins/tss-toggle.js`＋`.css`＝ 択一（**2つ以上**）を**並んだセグメント（有効｜無効／未回答｜出席｜欠席）**で表示、クリックで切替。ラジオボタンの「**全選択肢が常に見える・1クリックで確定**」をセル内で実現。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-toggle.css">
@@ -826,12 +827,13 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 ```
 ```js
 plugins: [ TssToggle.plugin({ columns: {
-  status: ['有効', '無効'],                                      // 文字列2つ（value=label）
+  status: ['有効', '無効'],                                      // 文字列（value=label）。2つ以上でOK
+  ans:    ['未回答', '出席', '欠席'],                             // 3択以上も可
   pub:    [{ value:'1', label:'公開' }, { value:'0', label:'非公開' }],  // value/label 分離
 } }) ]
 ```
-- クリックでその側に確定（`setValue`＝**検証・Undo を通る**）。アクティブセルで **Space** で反対側へトグル。2値以外の打ち込みは自動 validator で拒否。
-- 単純な ON/OFF 1個なら組込 `type:'checkbox'`、3択以上は `type:'dropdown'`。見た目は `--tg-toggle-accent` 等で。
+- クリックでその値に確定（`setValue`＝**検証・Undo を通る**）。アクティブセルで **Space** で次の値へ循環（2択なら反対側）。許可値以外の打ち込みは自動 validator で拒否。
+- 単純な ON/OFF 1個なら組込 `type:'checkbox'`。**短いラベルの少数択一**（出欠・高/中/低 等）に向き、短ければ dropdown と同程度の幅で収まる。**選択肢が多い／ラベルが長い／列幅が狭い**なら `type:'dropdown'` が省スペース。見た目は `--tg-toggle-accent` 等で。
 
 ### 同梱プラグイン: セル結合（merge・横/縦/矩形）
 
@@ -976,6 +978,7 @@ new TssGrid(el, { hiddenColumns: [1] });   // 初期で隠す
 | `rowHeaders` / `colHeaders` | `boolean` | `true` | 行番号列 / ヘッダ行の表示。`false` で隠す |
 | `hiddenColumns` | `number[]` | `[]` | 初期で隠す列インデックス。実行時は `hideColumn`/`showColumn`/`toggleColumn`（→ [列の表示/非表示](#列の表示非表示)） |
 | `wordWrap` | `boolean` | `false` | セル内で折り返し（行高は内容に合わせ伸びる）。`columns[c].wordWrap` で列単位も可 |
+| `ellipsis` | `boolean` | `false` | 溢れた文字を **… で省略**し、溢れたセルは**ホバーで全文（`title`）**。`columns[c].ellipsis` で列単位も可。見え方だけ＝値・コピー・編集は全文のまま。`wordWrap` と同時なら折り返しが優先 |
 | `placeholder` | `string` | — | 空セルに薄いヒント文字（`getData` には入らない）。`columns[c].placeholder` で列単位も可 |
 | `className` | `string` | — | コンテナ(`.tssgrid`)に付ける任意クラス（テーマ付け） |
 | `fillHandle` | `boolean \| {direction,autoInsertRow}` | `true` | **`false`でフィル完全OFF**（ハンドルを出さない＝ドラッグでの消去/上書きなし。フィルの起点はハンドルのみなので fill 自体が無効に）。`{direction:'vertical'\|'horizontal'\|'both', autoInsertRow:true}`で詳細指定（下へドラッグで行追加）。設定/表示専用グリッドで誤フィルを防ぐのに有効 |

package/package.json

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

package/plugins/tss-hyperlink.d.ts

@@ -2,17 +2,30 @@
 export = TssHyperlink;
 export as namespace TssHyperlink;
 
-/** 値 "表示テキスト|URL"（または URL 単体）を安全なリンク HTML に変換する format 関数を返す。 */
-declare function TssHyperlink(opts?: TssHyperlink.Options): (value: any) => string;
+/** セルの値をリンク HTML に変換する format 関数を返す。
+ *  モードA（既定）: 値 "表示テキスト|URL"（または URL 単体）。値に URL が入る。
+ *  モードB（`url` 指定）: 値＝表示テキストだけ・URL/装飾はオプションで付与（入力/コピー/編集は文字だけ）。 */
+declare function TssHyperlink(opts?: TssHyperlink.Options): (value: any, ctx?: TssHyperlink.Ctx, row?: any) => string;
 
 declare namespace TssHyperlink {
+  interface Ctx { r: number; c: number; }
+  /** (value, ctx, row) を受けて値を返す関数（className/url/label/attrs 用）。row はその行の値配列。 */
+  type Fn<T> = (value: any, ctx: Ctx, row: any) => T;
+
   interface Options {
-    /** 表示テキストと URL の区切り（既定 '|'）。 */
+    /** （モードA）表示テキストと URL の区切り（既定 '|'）。 */
     separator?: string;
     /** リンクの target（既定 '_blank'）。 */
     target?: string;
-    /** <a> に付ける任意クラス（既定 'tss-link'）。 */
-    className?: string;
+    /** <a>/<span> に付けるクラス。文字列 or 関数（行ごとに出し分け可。既定 'tss-link'）。 */
+    className?: string | Fn<string | null | undefined>;
+    /** 指定するとモードB（値＝表示テキストだけ）。URL を文字列 or 関数で付与。
+     *  安全な URL を返せば <a>、null/''/不正なら <span>（href 無し＝SPA クリック用）、false で素テキスト。 */
+    url?: string | Fn<string | null | false | undefined>;
+    /** （モードB・任意）表示テキストの差し替え（既定は値そのもの）。 */
+    label?: Fn<any>;
+    /** 追加属性 (value, ctx, row)=>({key:val})。data- / aria- / title / id / role のみ・値はエスケープ・null は出さない。 */
+    attrs?: Fn<Record<string, any>>;
   }
   /** URL を安全化（http/https/mailto/tel のみ許可・スキーム無しは https 補完・許可外は null）。 */
   function safeUrl(u: any): string | null;

package/plugins/tss-hyperlink.js

@@ -1,23 +1,34 @@
 /*! TssHyperlink — セル内ハイパーリンク（format ヘルパ）。SVG/HTML 自前描画・無依存・コア無改変。
  *
- *  セルの値を「クリックで開くリンク」として描く。値の形式は "表示テキスト|URL"（区切りは separator）、
- *  または URL 単体（その場合は URL を表示テキストにも使う）。`columns[c].html:true` ＋ `format` の seam に乗る。
+ *  2つのモード（Tabulator の link フォーマッタ同様、URL を値に埋めても／システムが付けてもよい）:
+ *   ◆モードA（既定・後方互換）: 値 = "表示テキスト|URL" または URL 単体。値に URL が入っている。
+ *       format: TssHyperlink()
+ *   ◆モードB（`url` オプション指定時）: 値 = 表示テキストだけ。URL・装飾はシステム側（関数/文字列）で付与。
+ *       入力・コピー・編集は「文字だけ」。本文は常に自動エスケープ＝手書き format の XSS 罠を回避。
+ *       format: TssHyperlink({ url:(val,{r},row)=>'/x/'+row.id })            // 本物リンク（URLを生成）
+ *       format: TssHyperlink({ url:()=>null, className:'my-link',            // href 無し＝<span>（SPA クリックをホストが拾う）
+ *                              attrs:(val,{r})=>({ 'data-id': ids[r] }) })
  *
- *  ★セキュリティ: URL は利用者データになり得る＝XSS を最初から潰す。
- *   - プロトコルは http/https/mailto/tel のみ許可（javascript: data: vbscript: 等は拒否＝ただのテキスト表示に落とす）。
- *   - スキーム無し（example.com/path）は https:// を補完。表示テキスト・href は必ず HTML エスケープ（" ' も）。
+ *  ★セキュリティ: URL も attrs も利用者データになり得る＝XSS を最初から潰す。
+ *   - URL のプロトコルは http/https/mailto/tel のみ許可（javascript: data: vbscript: 等は拒否＝ただのテキスト/素の span に落とす）。
+ *   - スキーム無し（example.com/path）は https:// を補完。表示テキスト・href・属性値は必ず HTML エスケープ（" ' も）。
+ *   - attrs は data-* / aria-* / title / id / role のキーだけ許可（on* や style, href, class は弾く）。値が null のキーは出さない。
  *   - target=_blank には rel="noopener noreferrer" を付与。
  *
- *  使い方:
+ *  使い方（列は html:true が要る＝format が HTML を返すため。編集はコアが「生の値」を出すので文字だけ編集になる）:
  *    columns: [
- *      { data:'site', title:'リンク', html:true, readOnly:true, format: TssHyperlink() },
+ *      { data:'site', title:'リンク', html:true, readOnly:true, format: TssHyperlink() },               // モードA
+ *      { data:'name', title:'名前',   html:true, format: TssHyperlink({ url:(v,{r})=>'/u/'+ids[r] }) }, // モードB
  *    ]
- *    // 値: "GitHub|https://github.com" / "https://example.com" / "example.com" / "問合せ|mailto:a@b.jp"
  *
  *  opts:
- *    separator : 表示テキストと URL の区切り（既定 '|'）
+ *    separator : （モードA）表示テキストと URL の区切り（既定 '|'）
+ *    url       : （指定でモードB）URL。文字列 or (value, ctx, row)=>string。安全な URL を返せば <a>、
+ *                null/''/不正なら <span>（href 無し＝SPA クリック用）、false を返すと素テキスト（装飾なし）。
+ *    label     : （モードB・任意）表示テキストを差し替える (value, ctx, row)=>string（既定は値そのもの）
+ *    attrs     : （任意）追加属性 (value, ctx, row)=>({key:val})。data- / aria- / title / id / role のみ・値はエスケープ。
  *    target    : リンクの target（既定 '_blank'。'_self' 等も可）
- *    className  : <a> に付ける任意クラス（既定 'tss-link'）
+ *    className : <a>/<span> に付けるクラス。文字列 or (value, ctx, row)=>string（行ごとに出し分け可。既定 'tss-link'）
  */
 (function (root) {
   'use strict';
@@ -31,27 +42,63 @@
     u = String(u == null ? '' : u).trim();
     if (u === '') return null;
     if (/^(https?:|mailto:|tel:)/i.test(u)) return u;          // whitelist したスキーム
+    if (/^\/\//.test(u)) return null;                          // プロトコル相対 //host は拒否（不意の外部遷移/phishing 回避）
+    if (/^(\/|\.\/|\.\.\/|[#?])/.test(u)) return u;            // サイト内相対（/path ./x ../x #frag ?q）はそのまま（SPA ルーティング用）
     if (!/[:]/.test(u) && /^[\w./?#=&%+\-~@!$*,;()]+$/.test(u)) return 'https://' + u;  // スキーム無し＝ドメイン/パス→https 補完
     return null;                                               // javascript: data: vbscript: 等＝拒否
   }
+  // attrs を安全な属性文字列に。data-*/aria-*/title/id/role のみ・値はエスケープ・null は出さない。
+  function attrStr(fn, v, ctx, row) {
+    if (typeof fn !== 'function') return '';
+    var o; try { o = fn(v, ctx, row) || {}; } catch (_) { return ''; }
+    var s = '';
+    for (var k in o) {
+      if (!Object.prototype.hasOwnProperty.call(o, k)) continue;
+      var val = o[k];
+      if (val == null) continue;
+      if (!/^(data-[a-z0-9-]+|aria-[a-z0-9-]+|title|id|role)$/i.test(k)) continue;   // 安全キーのみ
+      s += ' ' + k.toLowerCase() + '="' + esc(val) + '"';
+    }
+    return s;
+  }
 
   function TssHyperlink(opts) {
     opts = opts || {};
     var sep = opts.separator != null ? opts.separator : '|';
     var target = opts.target || '_blank';
-    var cls = opts.className != null ? opts.className : 'tss-link';
-    return function (value) {
+    var defCls = opts.className != null ? opts.className : 'tss-link';
+    var modeB = ('url' in opts);                                // url 指定＝モードB（値は文字だけ）
+    function clsAttrFor(v, ctx, row) {
+      var c = (typeof defCls === 'function') ? defCls(v, ctx, row) : defCls;
+      c = (c == null ? '' : String(c));
+      return c ? ' class="' + esc(c) + '"' : '';
+    }
+    return function (value, ctx, row) {
       var v = String(value == null ? '' : value);
       if (v === '') return '';
+      var clsAttr = clsAttrFor(v, ctx, row);
+      var extra = attrStr(opts.attrs, v, ctx, row);
+      var rel = (target === '_blank') ? ' rel="noopener noreferrer"' : '';
+
+      if (modeB) {
+        // 値＝表示テキスト。URL は opts.url（文字列/関数）で付与。本文は常にエスケープ。
+        var label0 = (typeof opts.label === 'function') ? opts.label(v, ctx, row) : v;
+        var label = esc(String(label0 == null ? '' : label0));
+        var u = (typeof opts.url === 'function') ? opts.url(v, ctx, row) : opts.url;
+        if (u === false) return label;                          // 明示的にリンクにしない＝素テキスト
+        var safeB = safeUrl(u);
+        if (safeB) return '<a href="' + esc(safeB) + '" target="' + esc(target) + '"' + rel + clsAttr + extra + '>' + label + '</a>';
+        return '<span' + clsAttr + extra + '>' + label + '</span>';   // href 無し＝SPA クリック用
+      }
+
+      // モードA（後方互換）: 値 "表示|URL" / "URL"
       var i = v.indexOf(sep);
       var text = i >= 0 ? v.slice(0, i) : v;
       var url = i >= 0 ? v.slice(i + 1) : v;
       var safe = safeUrl(url);
-      var label = esc((text.trim() || url.trim()));
-      if (!safe) return label;                                 // 不正/未許可 URL＝リンクにせずテキスト表示（＝安全）
-      var rel = (target === '_blank') ? ' rel="noopener noreferrer"' : '';
-      return '<a href="' + esc(safe) + '" target="' + esc(target) + '"' + rel +
-        (cls ? ' class="' + esc(cls) + '"' : '') + '>' + label + '</a>';
+      var labelA = esc((text.trim() || url.trim()));
+      if (!safe) return labelA;                                 // 不正/未許可 URL＝リンクにせずテキスト表示（＝安全）
+      return '<a href="' + esc(safe) + '" target="' + esc(target) + '"' + rel + clsAttr + extra + '>' + labelA + '</a>';
     };
   }
   // URL の安全化だけ外から使いたい時用（カスタム format 内など）。許可外は null。

package/plugins/tss-toggle.css

@@ -1,4 +1,4 @@
-/* TssToggle — 2択セグメント。色は変数で上書き可。 */
+/* TssToggle — 2択以上（N択）のセグメント。色は変数で上書き可。横幅ぶんピルが並ぶ。 */
 .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); }

package/plugins/tss-toggle.js

@@ -1,23 +1,25 @@
-/*! TssToggle — 2択セグメント・トグル（有効|無効・公開|非公開・男|女 …）。
+/*! TssToggle — 2択以上（N択）のセグメント・トグル／ラジオ（有効|無効・未回答|出席|欠席 …）。
  *
- *  ラジオの2択を「並んだピル（セグメント）」で表示し、クリックでどちらかに切替。値は dropdown と同じく
+ *  択一（2つ以上）を「並んだピル（セグメント）」で表示し、クリックで切替。値は dropdown と同じく
  *  選んだ option の value を保存（getData も value）。html:true+format で描画、クリックは委譲で拾う。
+ *  ラジオボタンの「全選択肢が常に見える・1クリックで確定」をセル内で実現する用途（出欠・優先度 高/中/低 等）。
  *
  *  使い方:
  *    plugins: [ TssToggle.plugin({ columns: {
- *      status: ['有効', '無効'],                                   // 文字列2つ（value=label）
+ *      status: ['有効', '無効'],                                   // 文字列（value=label）。2つ以上でOK
+ *      att:    ['未回答', '出席', '欠席'],                          // 3択以上も可
  *      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 でも）。
+ *  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 normOpts(arr) { return (arr || []).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);
@@ -45,7 +47,7 @@
         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値以外を弾く
+        if (typeof cfg.validator !== 'function') cfg.validator = function (v) { return v === '' || vals.indexOf(v) >= 0; };   // 許可値以外を弾く
         byCol[ci] = vals;
       });
       // それ自体は無効でも format 直指定の列をクリックで拾えるよう、format 由来の列も拾う
@@ -68,7 +70,7 @@
         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.setValue(r, c, vals[(i + 1) % vals.length]);     // 次の値へ循環（2択なら反対側）
       }
       grid.wrap.addEventListener('click', onClick);
       grid.editor.addEventListener('keydown', onKey);

package/src/tssgrid.css

@@ -97,6 +97,8 @@
 .tssgrid .tg-table td.tg-placeholder { color: var(--tg-placeholder-fg); }
 /* セル内折り返し: グリッド全体(.tg-wordwrap) or 列単位(td.tg-wrap-cell)。行高は中身に合わせて伸びる */
 .tssgrid.tg-wordwrap .tg-table td, .tssgrid .tg-table td.tg-wrap-cell { white-space: normal; word-break: break-word; }
+/* 溢れた文字を … で省略: グリッド全体(.tg-ellipsis) or 列単位(td.tg-ellip-cell)。既定は overflow:hidden で切るだけ＝…は出ない。ホバーで全文を title 表示（JS）。折り返し(wordWrap)が同時指定なら折り返しが優先（white-space:normal で text-overflow 無効） */
+.tssgrid.tg-ellipsis .tg-table td, .tssgrid .tg-table td.tg-ellip-cell { text-overflow: ellipsis; }
 /* 読み取り専用セル: 淡色＋既定カーソル（編集不可・全変更経路で拒否） */
 .tssgrid .tg-table td.tg-readonly { background: var(--tg-readonly-bg); color: var(--tg-readonly-fg); cursor: default; }
 .tssgrid .tg-table td.tg-readonly.sel { background: #e7edf5; }

package/src/tssgrid.d.ts

@@ -89,6 +89,8 @@ export interface ColumnDef {
   html?: boolean;
   /** 列単位の折り返し。 */
   wordWrap?: boolean;
+  /** 列単位の … 省略（溢れた文字を省略記号で切る／ホバーで全文を title 表示）。値・コピー・編集は不変＝見え方だけ。折り返し(wordWrap)と同時なら折り返しが優先。 */
+  ellipsis?: boolean;
   /** 複数行(改行)入力を有効化。編集は隠し textarea（IME 直打ち対応）、表示は改行保持(pre-wrap)。行高は自動で伸びないので rowHeights 等で確保する。 */
   multiline?: boolean;
   /** 空セルの薄いヒント文字。 */
@@ -171,6 +173,8 @@ export interface TssGridOptions {
   colHeaders?: boolean;
   hiddenColumns?: number[];
   wordWrap?: boolean;
+  /** グリッド全体の … 省略（溢れた文字を省略記号で切る／ホバーで全文を title 表示）。列単位は columns[c].ellipsis。見え方だけ＝値・コピー・編集は不変。 */
+  ellipsis?: boolean;
   /** multiline 列の Enter 挙動。'commit'(既定・Excel風): Enter=確定 / Alt+Enter=改行。'newline'(メモ帳風): Enter=改行 / Ctrl+Enter=確定。 */
   multilineEnter?: 'commit' | 'newline';
   /** multiline セル右上の「複数行」ヒント表示（既定 true）。色は CSS 変数 --tg-ml-mark。false で非表示。 */

package/src/tssgrid.js

@@ -214,6 +214,8 @@
       this.stretchH = opts.stretchH || 'none';
       // セル内折り返し（既定 nowrap）。grid 全体 or columns[c].wordWrap。
       this.wordWrap = !!opts.wordWrap;
+      // 溢れた文字を … で省略（既定は切るだけ）。grid 全体 or columns[c].ellipsis。ホバーで全文を title 表示（見え方だけ・値/コピー/編集は不変）。
+      this.ellipsis = !!opts.ellipsis;
       // 複数行(改行)編集の Enter 挙動: 'commit'(既定・Excel風: Enter=確定 / Alt+Enter=改行) | 'newline'(メモ帳風: Enter=改行 / Ctrl+Enter=確定)。列は columns[c].multiline:true で有効化。
       this.multilineEnter = opts.multilineEnter === 'newline' ? 'newline' : 'commit';
       // multiline セル右上の「複数行」ヒント（既定 ON）。色は CSS 変数 --tg-ml-mark で。false で消す。
@@ -858,6 +860,7 @@
       this.root = q('.tssgrid');
       if (this.className) this.root.className += ' ' + this.className;  // 任意クラス（テーマ付け）
       if (this.wordWrap) this.root.classList.add('tg-wordwrap');        // グリッド全体の折り返し
+      if (this.ellipsis) this.root.classList.add('tg-ellipsis');        // グリッド全体の … 省略
       if (!this.multilineMark) this.root.classList.add('tg-no-ml-mark'); // multiline の右上ヒントを消す
       if (!this.cursor) this.root.classList.add('tg-no-cursor');        // 表示専用（選択枠なし＋セルカーソル既定）
       if (this.width) {
@@ -1195,6 +1198,8 @@
     _editText(r, c) {
       if (this._nativeInputType(c)) return this.data[r][c];
       if (this.colType(c) === 'number') return this.data[r][c];
+      // html:true は format の出力が markup（<a>/<span> 等）＝編集対象は生の値。整形後を入れるとタグを編集して崩れる。
+      if (this.colCfg(c).html) return this.data[r][c];
       return this._displayValue(r, c);
     }
     // td の中身を型に応じて描画。data は確定済み前提。空セルは placeholder（あれば）を表示。
@@ -1485,6 +1490,7 @@
         if (this.colType(c) === 'number') cls.push('tg-num');  // 数値は右寄せ
         if (this._isReadOnly(r, c)) cls.push('tg-readonly');  // 読み取り専用（淡色＋カーソル既定）
         if (this.colCfg(c).wordWrap) cls.push('tg-wrap-cell');  // 列単位の折り返し
+        if (this.colCfg(c).ellipsis) cls.push('tg-ellip-cell');  // 列単位の … 省略
         if (this.colCfg(c).multiline) cls.push('tg-multiline-cell');  // 複数行（改行保持＝pre-wrap）
         if (this.data[r][c] === '' && this._placeholder(c) != null) cls.push('tg-placeholder');  // 空セルのヒント
         const al = this._cellAlign(r, c);   // 整列（列既定＋セル上書き）
@@ -3164,6 +3170,15 @@
         this.setActive(+td.dataset.r, +td.dataset.c); this._beginEdit(this.active.r, this.active.c);
       });
       this.fillhandle.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); this.filling = { src: this.rectRange() }; this._fillRow = null; });
+      // 溢れて … で切れたセルは、ホバー時に全文を title（ネイティブツールチップ）で出す。
+      // 対象セルだけを初回ホバーで1回測るso軽い（redraw で td が作り直され _ellChk も消える）。ellipsis 未使用なら即 return＝ゼロコスト。
+      this.table.addEventListener('mouseover', (e) => {
+        const td = e.target.closest && e.target.closest('td');
+        if (!td || td._ellChk) return;
+        if (!this.ellipsis && !td.classList.contains('tg-ellip-cell')) return;
+        td._ellChk = 1;
+        if (td.scrollWidth > td.clientWidth + 1 && !td.hasAttribute('title')) td.title = td.textContent;
+      });
       // 右クリックメニュー（行/列の挿入・削除）
       this.table.addEventListener('contextmenu', (e) => this._onContextMenu(e));
       this.menuEl.addEventListener('mousedown', (e) => {