@keyfunc/keybricks-ds 2.1.1 → 2.4.0

package/components/data/Table.jsx

@@ -1,10 +1,123 @@
 import React from "react";
 import { Checkbox } from "../forms/Checkbox.jsx";
+import { IconTile } from "../display/Badge.jsx";
+import { IconButton } from "../buttons/IconButton.jsx";
+import { Icon } from "../icons/Icon.jsx";
+
+/* Selection checkbox: sits in the first column's leading padding, not in a column of its own, so the gap to the
+   first column's text equals the edge padding (16px; 12px in sm) whatever the table width or column widths (a separate column took a share
+   of any spare width). */
+const CHECK_PAD = "calc(var(--edge-pad) * 2 + var(--check-size))";
+/* Config-code chip (`code: true` columns): Menlo at --text-code on the inset fill — the one place the code font appears in a table.
+   Only text and numbers get the chip; an element in the cell (a Skeleton while loading, a link) renders as is. */
+const codeChip = { fontFamily: "var(--font-mono)", fontSize: "var(--text-code)", lineHeight: "var(--leading-code)", letterSpacing: 0, background: "var(--bg-inset)", border: "1px solid var(--border-subtle)", borderRadius: 4, padding: "1px 6px", color: "var(--text-primary)", whiteSpace: "nowrap" };
+const checkSlot = { position: "absolute", left: "var(--edge-pad)", top: 0, bottom: 0, display: "flex", alignItems: "center" };
+
+/* Two-line title cell (`twoLine` column): icon tile · title over description · trailing ⋯. Every measure is a --title-cell-* tier token:
+   md 32px tile (r8) · 12px to the text · 14px title / 12px description · 2px between · 10px row padding → 58px row. */
+const T_TILE = { width: "var(--title-cell-tile)", height: "var(--title-cell-tile)", borderRadius: "var(--title-cell-tile-r)" };
+const T_ICON = { width: "var(--title-cell-icon)", height: "var(--title-cell-icon)" };
+const T_ONE = { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 };
+const T_TITLE = { ...T_ONE, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-heading)" };
+const T_DESC = { ...T_ONE, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-secondary)" };
+const STAR_FILLED = "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z";
+// field name (string) or accessor (row, index) => value
+const pick = (a, r, ri) => typeof a === "function" ? a(r, ri) : a != null ? r[a] : undefined;
+/* Sorting: one column at a time. Click cycles ascending → descending → none; another column starts at ascending.
+   The tooltip names the next step. Rows are reordered here unless manualSort (server-side: rows arrive ordered). */
+// the label is capped at the declared width minus the button (28) and its gap (4), so a long label truncates and the cell never
+// shrinks below label + button — the button is never pushed out
+const SORT_BTN = 32;
+const isEmpty = (v) => v == null || v === "" || v === "–";
+/* Every word the table draws itself. Pass `labels` to translate; missing keys fall back to these. The sort tooltip names the NEXT step:
+   unsorted → sortAsc, ascending → sortDesc, descending → sortClear. */
+const DEFAULT_LABELS = { sortAsc: "Sort ascending", sortDesc: "Sort descending", sortClear: "Clear sorting", more: "More actions", expand: "Expand", collapse: "Collapse" };
+const sortLabel = (L, sorted) => sorted === "asc" ? L.sortDesc : sorted === "desc" ? L.sortClear : L.sortAsc;
+/* Tree (`tree` on the table, `children` on a row): the twoLine column indents 24px per level and reserves a 20px arrow slot + 4px,
+   so a child's arrow sits exactly under its parent's tile. */
+const TREE_INDENT = 24, TREE_TOGGLE = 20;
+/* Builds the visible rows. index = depth-first position over EVERY row (expanded or not) — for a flat table that is the position in
+   `rows`. It is assigned before sorting, so selection, onRowMore and onRowOpen indices never move when the user sorts or expands.
+   Sorting reorders siblings only; children stay under their parent. */
+function buildView(rows, { tree, rowKey, expanded, col, dir, manualSort }) {
+  const idx = new Map(); let n = 0;
+  const number = (list) => list.forEach((r) => { idx.set(r, n++); if (tree && Array.isArray(r.children)) number(r.children); });
+  number(rows);
+  const cmp = col && !manualSort ? (a, b) => {
+    const va = a[col.key], vb = b[col.key], ea = isEmpty(va), eb = isEmpty(vb);
+    if (ea || eb) return ea && eb ? idx.get(a) - idx.get(b) : ea ? 1 : -1; // empty values last in both directions
+    return (col.compare ? col.compare(va, vb, a, b) : compareValues(va, vb)) * dir || idx.get(a) - idx.get(b);
+  } : null;
+  const out = [];
+  const walk = (list, level) => (cmp ? list.slice().sort(cmp) : list).forEach((r) => {
+    const ri = idx.get(r), key = r[rowKey] != null ? r[rowKey] : String(ri);
+    const kids = !!tree && ((Array.isArray(r.children) && r.children.length > 0) || !!r.hasChildren);
+    const open = kids && expanded.has(key);
+    out.push({ r, ri, key, level, kids, open });
+    if (open && Array.isArray(r.children)) walk(r.children, level + 1);
+  });
+  walk(rows, 0);
+  return { list: out, total: n };
+}
+const nextSort = (cur, key) => !cur || cur.key !== key ? { key, direction: "asc" } : cur.direction === "asc" ? { key, direction: "desc" } : null;
+const num = (v) => typeof v === "number" ? v : typeof v === "string" && /^\s*-?[\d,]+(\.\d+)?\s*$/.test(v) ? parseFloat(v.replace(/,/g, "")) : NaN;
+function compareValues(a, b) {
+  const ea = a == null || a === "" || a === "–", eb = b == null || b === "" || b === "–";
+  if (ea || eb) return ea && eb ? 0 : ea ? 1 : -1;
+  const na = num(a), nb = num(b);
+  if (!isNaN(na) && !isNaN(nb)) return na - nb;
+  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" });
+}
+function TitleMark({ m }) {
+  if (m === "favorite") return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" role="img" aria-label="Favorite" style={{ display: "block", flexShrink: 0, color: "var(--warning)" }}><path d={STAR_FILLED} /></svg>;
+  return <span role="img" aria-label={m.label} style={{ display: "inline-flex", flexShrink: 0, color: m.color || "var(--text-muted)" }}><Icon name={m.icon} size={14} /></span>;
+}
+function TreeToggle({ open, label, onClick }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <button type="button" aria-expanded={open} aria-label={label} title={label} onClick={(e) => { e.stopPropagation(); onClick(); }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+      style={{ width: TREE_TOGGLE, height: TREE_TOGGLE, padding: 0, border: "none", borderRadius: "var(--radius-sm)", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", background: hover ? "var(--overlay-hover)" : "transparent", color: hover ? "var(--text-body)" : "var(--text-muted)", transition: "var(--t-hover)" }}>
+      <Icon name="chevron-right" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)", transform: open ? "rotate(90deg)" : "none", transition: "transform .15s ease" }} />
+    </button>
+  );
+}
+function TitleCell({ c, item, onRowMore, onRowOpen, labels, tree, onToggleRow }) {
+  const { r, ri } = item;
+  const o = c.twoLine === true ? {} : c.twoLine;
+  const icon = pick(o.icon ?? "icon", r, ri), hue = pick(o.hue ?? "hue", r, ri), desc = pick(o.description ?? "description", r, ri), mark = pick(o.mark ?? "mark", r, ri);
+  // onRowOpen: the tile and the title open the row (hand cursor); the title is also reachable by keyboard (Enter / Space)
+  const open = onRowOpen ? (e) => onRowOpen(r, ri, e) : null;
+  return (
+    <div style={{ display: "flex", alignItems: "center", minWidth: c.minWidth ?? 180, ...(tree ? { paddingLeft: item.level * TREE_INDENT } : null) }}>
+      {tree ? <span style={{ width: TREE_TOGGLE, flexShrink: 0, marginRight: TREE_INDENT - TREE_TOGGLE, display: "inline-flex" }}>{item.kids ? <TreeToggle open={item.open} label={item.open ? labels.collapse : labels.expand} onClick={() => onToggleRow(item)} /> : null}</span> : null}
+      <div style={{ display: "flex", alignItems: "center", gap: "var(--title-cell-tile-gap)", flex: 1, minWidth: 0 }}>
+        {icon ? <span onClick={open || undefined} style={{ display: "inline-flex", flexShrink: 0, cursor: open ? "pointer" : undefined }}><IconTile icon={icon} hue={hue || "neutral"} kind="row" style={T_TILE} iconStyle={T_ICON} /></span> : null}
+        <div style={{ display: "flex", flexDirection: "column", gap: "var(--title-cell-gap)", flex: 1, minWidth: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 4, minWidth: 0 }}>
+            <span style={{ ...T_TITLE, ...(open ? { cursor: "pointer" } : null) }} {...(open ? { role: "button", tabIndex: 0, onClick: open, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(e); } } } : null)}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</span>
+            {mark ? <TitleMark m={mark} /> : null}
+          </div>
+          {desc ? <span style={T_DESC}>{desc}</span> : null}
+        </div>
+        {o.more !== false ? <IconButton icon="ellipsis" size="sm" muted label={labels.more} title={labels.more} onClick={(e) => { if (e && e.stopPropagation) e.stopPropagation(); if (onRowMore) onRowMore(r, ri, e); }} /> : null}
+      </div>
+    </div>
+  );
+}
 
 /**
- * Keybricks table. columns: [{key,label,width,minWidth,mono,align,render}].
+ * Keybricks table. columns: [{key,label,width,minWidth,mono,code,twoLine,sortable,compare,align,render}].
+ * sortable — hover the header for a muted sm sort button at the cell's right end (in line with a two-line row's ⋯; arrow-up); click: ascending → descending → none.
+ *            While sorted the button stays and the label turns --text-heading. One column at a time. sort / onSortChange control it
+ *            (defaultSort to seed it uncontrolled); compare(a, b, rowA, rowB) overrides the default comparison; manualSort keeps rows as given.
+ * twoLine  — the name column of a document list: icon tile, title over a description, optional mark ("favorite" = filled star), trailing ⋯
+ *            (onRowMore(row, index, event)); onRowOpen(row, index, event) makes the tile and the title open the row (hand cursor, Enter / Space on the title).
+ *            tree — rows nest through `children` (or `hasChildren` for rows you load on demand); the twoLine column indents 24px per level with an
+ *            expand arrow; expandedKeys / defaultExpandedKeys / onExpandChange(row, expanded, keys); rowKey names the key field (default "id").
+ * labels   — { sortAsc, sortDesc, sortClear, more, expand, collapse } for every word the table draws (English by default).
+ *            Give it a width; it shrinks to minWidth (default 180) before the other columns give way, and title and description truncate to whatever it gets. Row grows to 58px in md (50 sm · 68 lg).
  * The table is a size region: `size` ("sm" | "md" | "lg", default inherit → md) sets its rows, header, cell padding and every
- * control inside the cells from the tier tokens — rows are the tier's bar height (sm 32 · md 40 · lg 44), cells read the tier's
+ * control inside the cells from the tier tokens — rows are the tier's bar height (sm 36 · md 40 · lg 48), cells read the tier's
  * control text, header cells are the same size in weight 600 / text-secondary, sentence case, no letter-spacing.
  * `dense` is kept as an alias of size="sm" (the data-preview drawer).
  * Every rule in the table is one weight (--border-subtle); the header is set apart by its --bg-table-header tint, never by a heavier line.
@@ -13,10 +126,26 @@ import { Checkbox } from "../forms/Checkbox.jsx";
  * resizable — a short divider between header cells (hover darkens it, cursor col-resize); drag to set that column's width.
  *             Widths live in local state unless you pass columnWidths/onColumnResize to control them. Min width = column.minWidth ?? 48.
  */
-export function Table({ columns = [], rows = [], size, dense, selectable, selected = [], onToggle, headerBorder = true, bordered, framed, resizable, columnWidths, onColumnResize, empty, style }) {
+export function Table({ columns = [], rows = [], size, dense, selectable, selected = [], onToggle, headerBorder = true, bordered, framed, resizable, columnWidths, onColumnResize, onRowMore, onRowOpen, sort, defaultSort = null, onSortChange, manualSort, tree, rowKey = "id", expandedKeys, defaultExpandedKeys, onExpandChange, labels, empty, style }) {
+  const L = { ...DEFAULT_LABELS, ...labels };
+  const [localExp, setLocalExp] = React.useState(defaultExpandedKeys || []);
+  const expKeys = expandedKeys !== undefined ? expandedKeys : localExp;
+  const [localSort, setLocalSort] = React.useState(defaultSort);
+  const sortState = sort !== undefined ? sort : localSort;
+  const [hotTh, setHotTh] = React.useState(null); // header under the pointer or holding focus
+  const cycleSort = (key) => { const n = nextSort(sortState, key); if (sort === undefined) setLocalSort(n); if (onSortChange) onSortChange(n); };
+  const { list: view, total } = React.useMemo(() => buildView(rows, {
+    tree, rowKey, expanded: new Set(expKeys), manualSort,
+    col: sortState && columns.find((x) => x.key === sortState.key), dir: sortState && sortState.direction === "desc" ? -1 : 1,
+  }), [rows, columns, sortState, manualSort, tree, rowKey, expKeys]);
+  const toggleRow = (item) => {
+    const next = item.open ? expKeys.filter((k) => k !== item.key) : [...expKeys, item.key];
+    if (expandedKeys === undefined) setLocalExp(next);
+    if (onExpandChange) onExpandChange(item.r, !item.open, next);
+  };
   const tier = size || (dense ? "sm" : undefined);
   const flushTop = bordered || framed;
-  const colCount = columns.length + (selectable ? 1 : 0);
+  const colCount = columns.length || 1;
   const [localW, setLocalW] = React.useState({});
   const [drag, setDrag] = React.useState(null); // key being dragged
   const [hot, setHot] = React.useState(null); // key whose handle is hovered
@@ -39,27 +168,37 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
     window.addEventListener("mousemove", move); window.addEventListener("mouseup", up);
   };
 
+  // `mono` columns (codes, IDs, amounts) use the UI font with tabular figures; the monospace font is for code only
   const cellFont = (c) => c.mono
-    ? { fontFamily: "var(--font-mono)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: 0, fontVariantNumeric: "tabular-nums", color: "var(--text-heading)" }
+    ? { fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", fontVariantNumeric: "tabular-nums", color: "var(--text-primary)" }
     : { fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-primary)" };
   // first and last cells keep the card's edge padding; every other cell the tier's cell padding
-  const cellPad = (i) => ({ paddingTop: 0, paddingBottom: 0, paddingLeft: i === 0 && !selectable ? "var(--edge-pad)" : "var(--cell-px)", paddingRight: i === columns.length - 1 ? "var(--edge-pad)" : "var(--cell-px)" });
+  const cellPad = (i) => ({ ...(i === 0 && selectable ? { position: "relative" } : null), paddingTop: 0, paddingBottom: 0, paddingLeft: i === 0 ? (selectable ? CHECK_PAD : "var(--edge-pad)") : "var(--cell-px)", paddingRight: i === columns.length - 1 ? "var(--edge-pad)" : "var(--cell-px)" });
 
   const table = (
     <table data-size={tier} style={{ width: "100%", borderCollapse: "collapse", tableLayout: resizable ? "fixed" : "auto", ...(bordered ? null : style) }}>
       <thead>
         <tr style={{ background: "var(--bg-table-header)", borderTop: headerBorder && !flushTop ? "1px solid var(--border-subtle)" : "none", borderBottom: headerBorder ? "1px solid var(--border-subtle)" : "none", height: "var(--bar-h)" }}>
-          {selectable ? <th style={{ width: "calc(var(--edge-pad) + var(--check-size) + var(--cell-px))", padding: "0 0 0 var(--edge-pad)", textAlign: "left" }}><Checkbox checked={rows.length > 0 && selected.length === rows.length} indeterminate={selected.length > 0 && selected.length < rows.length} onChange={(v) => onToggle && onToggle("all", v)} /></th> : null}
           {columns.map((c, i) => {
             const last = i === columns.length - 1;
             const active = drag === c.key, lit = active || hot === c.key;
+            const sorted = sortState && sortState.key === c.key ? sortState.direction : null;
+            const showSort = c.sortable && (sorted || hotTh === c.key);
             return (
-              <th key={c.key} ref={(el) => { thRefs.current[c.key] = el; }} style={{ position: "relative", textAlign: c.align || "left", ...cellPad(i), width: widthOf(c), fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-                {c.label}
+              <th key={c.key} ref={(el) => { thRefs.current[c.key] = el; }} aria-sort={c.sortable ? (sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none") : undefined}
+                onMouseEnter={c.sortable ? () => setHotTh(c.key) : undefined} onMouseLeave={c.sortable ? () => setHotTh(null) : undefined} onFocus={c.sortable ? () => setHotTh(c.key) : undefined} onBlur={c.sortable ? () => setHotTh(null) : undefined}
+                style={{ position: "relative", textAlign: c.align || "left", ...cellPad(i), width: widthOf(c), fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: sorted ? "var(--text-heading)" : "var(--text-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {selectable && i === 0 ? <span style={checkSlot}><Checkbox checked={total > 0 && selected.length === total} indeterminate={selected.length > 0 && selected.length < total} onChange={(v) => onToggle && onToggle("all", v)} /></span> : null}
+                {c.sortable ? (
+                  <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0, ...(c.align === "right" ? { marginLeft: "auto" } : c.align === "center" ? { margin: "0 auto" } : null), ...(typeof widthOf(c) === "number" ? { maxWidth: widthOf(c) - SORT_BTN } : null) }}>{c.label}</span>
+                    <IconButton icon={sorted === "desc" ? "arrow-down" : "arrow-up"} size="sm" muted label={sortLabel(L, sorted)} title={sortLabel(L, sorted)} onClick={() => cycleSort(c.key)} style={{ opacity: showSort ? 1 : 0, ...(c.align === "right" ? null : { marginLeft: "auto" }) }} />
+                  </span>
+                ) : c.label}
                 {resizable && !last ? (
                   <span aria-hidden="true" onMouseDown={(e) => startDrag(e, c)} onMouseEnter={() => setHot(c.key)} onMouseLeave={() => setHot(null)}
                     style={{ position: "absolute", top: 0, right: -5, width: 11, height: "100%", cursor: "col-resize", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1 }}>
-                    <span style={{ width: active ? 2 : 1, height: "50%", background: lit ? "var(--action-primary)" : "var(--border-control)", borderRadius: 1, transition: "var(--t-hover)" }}></span>
+                    <span style={{ width: active ? 2 : 1, height: "50%", background: lit ? "var(--action-primary)" : "var(--border-split)", borderRadius: 1, transition: "var(--t-hover)" }}></span>
                   </span>
                 ) : null}
               </th>
@@ -68,14 +207,13 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
         </tr>
       </thead>
       <tbody>
-        {rows.map((r, ri) => (
-          <tr key={ri} data-row="" style={{ height: "var(--bar-h)", background: "var(--row-wash, transparent)", transition: "var(--t-hover)", borderBottom: bordered && ri === rows.length - 1 ? "none" : "1px solid var(--border-subtle)" }}>
-            {selectable ? <td style={{ padding: "0 0 0 var(--edge-pad)" }}><Checkbox checked={selected.includes(ri)} onChange={(v) => onToggle && onToggle(ri, v)} /></td> : null}
+        {view.map((item, pos) => { const { r, ri } = item; return (
+          <tr key={item.key} data-row="" aria-level={tree ? item.level + 1 : undefined} aria-expanded={item.kids ? item.open : undefined} style={{ height: "var(--bar-h)", background: "var(--row-wash, transparent)", transition: "var(--t-hover)", borderBottom: bordered && pos === view.length - 1 ? "none" : "1px solid var(--border-subtle)" }}>
             {columns.map((c, i) => (
-              <td key={c.key} style={{ ...cellPad(i), textAlign: c.align || "left", whiteSpace: "nowrap", ...(resizable ? { overflow: "hidden", textOverflow: "ellipsis" } : null), ...cellFont(c) }}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</td>
+              <td key={c.key} style={{ ...cellPad(i), ...(c.twoLine ? { paddingTop: "var(--title-cell-py)", paddingBottom: "var(--title-cell-py)", maxWidth: 0 } : null), textAlign: c.align || "left", whiteSpace: "nowrap", ...(resizable ? { overflow: "hidden", textOverflow: "ellipsis" } : null), ...cellFont(c) }}>{selectable && i === 0 ? <span style={checkSlot}><Checkbox checked={selected.includes(ri)} onChange={(v) => onToggle && onToggle(ri, v)} /></span> : null}{c.twoLine ? <TitleCell c={c} item={item} onRowMore={onRowMore} onRowOpen={onRowOpen} labels={L} tree={tree && c === columns.find((x) => x.twoLine)} onToggleRow={toggleRow} /> : (c.code && (typeof r[c.key] === "string" || typeof r[c.key] === "number") && r[c.key] !== "") ? <code style={codeChip}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</code> : c.render ? c.render(r[c.key], r, ri) : r[c.key]}</td>
             ))}
           </tr>
-        ))}
+        ); })}
         {rows.length === 0 && empty ? <tr><td colSpan={colCount} style={{ padding: 0 }}>{empty}</td></tr> : null}
       </tbody>
     </table>

package/components/data/Table.vue

@@ -1,10 +1,22 @@
 <script setup>
 import { px } from '../px.js'
-import { ref, computed, reactive } from 'vue'
+import { ref, computed, reactive, getCurrentInstance } from 'vue'
 import Checkbox from '../forms/Checkbox.vue'
-// Keybricks table. columns: [{key,label,width,minWidth,mono,align,render}].
+import IconTile from '../display/IconTile.vue'
+import IconButton from '../buttons/IconButton.vue'
+import Icon from '../icons/Icon.vue'
+// Keybricks table. columns: [{key,label,width,minWidth,mono,code,twoLine,align,render}].
+// twoLine  — the name column of a document list: icon tile, title over a description, optional mark ("favorite" = filled star), trailing ⋯
+//            (@row-more(row, index, event)); @row-open(row, index, event) makes the tile and the title open the row (hand cursor, Enter / Space on the title).
+//            tree — rows nest through `children` (or `hasChildren` for rows you load on demand); the twoLine column indents 24px per level with an
+//            expand arrow; v-model:expandedKeys / defaultExpandedKeys / @expand-change(row, expanded, keys); rowKey names the key field (default "id").
+// labels   — { sortAsc, sortDesc, sortClear, more, expand, collapse } for every word the table draws (English by default).
+//            Give it a width; it shrinks to minWidth (default 180) before the other columns give way, and title and description truncate to whatever it gets. Row grows to 58px in md (50 sm · 68 lg).
+// sortable — hover the header for a muted sm sort button at the cell's right end (in line with a two-line row's ⋯; arrow-up); click: ascending → descending → none. While sorted the
+//            button stays and the label turns --text-heading. One column at a time. v-model:sort / @sort-change (defaultSort seeds it
+//            uncontrolled); compare(a, b, rowA, rowB) overrides the default comparison; manualSort keeps rows as given (server-side).
 // The table is a size region: `size` ("sm" | "md" | "lg", default inherit → md) sets its rows, header, cell padding and every control
-// inside the cells from the tier tokens — rows are the tier's bar height (sm 32 · md 40 · lg 44), cells read the tier's control text,
+// inside the cells from the tier tokens — rows are the tier's bar height (sm 36 · md 40 · lg 48), cells read the tier's control text,
 // header cells are the same size in weight 600 / text-secondary, sentence case, no letter-spacing. `dense` is an alias of size="sm".
 // Every rule in the table is one weight (--border-subtle); the header is set apart by its --bg-table-header tint, never by a heavier line.
 // bordered  — the table draws its own rounded card frame (border-card, radius-lg) and drops the edge rules that would double it.
@@ -12,11 +24,85 @@ import Checkbox from '../forms/Checkbox.vue'
 // resizable — a short divider between header cells (hover darkens it, cursor col-resize); drag to set that column's width.
 //             Widths live in local state unless you pass columnWidths + listen to @column-resize(key, px). Min width = column.minWidth ?? 48.
 // #empty slot renders inside the table when rows is empty.
-const props = defineProps({ columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, size: String, dense: Boolean, selectable: Boolean, selected: { type: Array, default: () => [] }, headerBorder: { type: Boolean, default: true }, bordered: Boolean, framed: Boolean, resizable: Boolean, columnWidths: Object, style: Object })
-const emit = defineEmits(['toggle', 'columnResize'])
+const props = defineProps({ columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, size: String, dense: Boolean, selectable: Boolean, selected: { type: Array, default: () => [] }, headerBorder: { type: Boolean, default: true }, bordered: Boolean, framed: Boolean, resizable: Boolean, columnWidths: Object, sort: { type: Object, default: undefined }, defaultSort: { type: Object, default: null }, manualSort: Boolean, tree: Boolean, rowKey: { type: String, default: 'id' }, expandedKeys: { type: Array, default: undefined }, defaultExpandedKeys: { type: Array, default: () => [] }, labels: Object, style: Object })
+const emit = defineEmits(['toggle', 'columnResize', 'rowMore', 'rowOpen', 'sortChange', 'update:sort', 'expandChange', 'update:expandedKeys'])
+// Every word the table draws itself; `labels` translates them. The sort tooltip names the NEXT step: unsorted → sortAsc, ascending → sortDesc, descending → sortClear.
+const DEFAULT_LABELS = { sortAsc: 'Sort ascending', sortDesc: 'Sort descending', sortClear: 'Clear sorting', more: 'More actions', expand: 'Expand', collapse: 'Collapse' }
+const L = computed(() => ({ ...DEFAULT_LABELS, ...(props.labels || {}) }))
+const sortLabel = (sorted) => sorted === 'asc' ? L.value.sortDesc : sorted === 'desc' ? L.value.sortClear : L.value.sortAsc
+// the tile and title open the row only when a @row-open listener is attached
+const inst = getCurrentInstance()
+const canOpen = computed(() => !!(inst && inst.vnode.props && (inst.vnode.props.onRowOpen || inst.vnode.props['onRow-open'])))
+function openRow(r, ri, e) { emit('rowOpen', r, ri, e) }
+function openKey(r, ri, e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRow(r, ri, e) } }
+// Tree: 24px per level; a 20px arrow slot + 4px, so a child's arrow sits under its parent's tile.
+const TREE_INDENT = 24, TREE_TOGGLE = 20
+const localExp = ref([...props.defaultExpandedKeys])
+const expKeys = computed(() => props.expandedKeys !== undefined ? props.expandedKeys : localExp.value)
+const hotToggle = ref(null)
+function toggleRow(item) {
+  const next = item.open ? expKeys.value.filter(k => k !== item.key) : [...expKeys.value, item.key]
+  if (props.expandedKeys === undefined) localExp.value = next
+  emit('update:expandedKeys', next); emit('expandChange', item.r, !item.open, next)
+}
+const treeCol = computed(() => props.tree ? props.columns.find(x => x.twoLine) : null)
+const localSort = ref(props.defaultSort)
+const sortState = computed(() => props.sort !== undefined ? props.sort : localSort.value)
+const hotTh = ref(null)
+const nextSort = (cur, key) => !cur || cur.key !== key ? { key, direction: 'asc' } : cur.direction === 'asc' ? { key, direction: 'desc' } : null
+function cycleSort(key) { const n = nextSort(sortState.value, key); if (props.sort === undefined) localSort.value = n; emit('update:sort', n); emit('sortChange', n) }
+const num = (v) => typeof v === 'number' ? v : typeof v === 'string' && /^\s*-?[\d,]+(\.\d+)?\s*$/.test(v) ? parseFloat(v.replace(/,/g, '')) : NaN
+function compareValues(a, b) {
+  const ea = a == null || a === '' || a === '–', eb = b == null || b === '' || b === '–'
+  if (ea || eb) return ea && eb ? 0 : ea ? 1 : -1
+  const na = num(a), nb = num(b)
+  if (!isNaN(na) && !isNaN(nb)) return na - nb
+  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' })
+}
+// Visible rows. index = depth-first position over EVERY row (expanded or not) — for a flat table the position in `rows` — assigned
+// before sorting, so selection and event indices never move. Sorting reorders siblings only; children stay under their parent.
+const built = computed(() => {
+  const idx = new Map(); let n = 0
+  const number = (list) => list.forEach(r => { idx.set(r, n++); if (props.tree && Array.isArray(r.children)) number(r.children) })
+  number(props.rows)
+  const s = sortState.value, col = s && props.columns.find(x => x.key === s.key), dir = s && s.direction === 'desc' ? -1 : 1
+  const isEmpty = (x) => x == null || x === '' || x === '–'
+  const cmp = col && !props.manualSort ? (a, b) => { const va = a[col.key], vb = b[col.key], ea = isEmpty(va), eb = isEmpty(vb); if (ea || eb) return ea && eb ? idx.get(a) - idx.get(b) : ea ? 1 : -1; return (col.compare ? col.compare(va, vb, a, b) : compareValues(va, vb)) * dir || idx.get(a) - idx.get(b) } : null
+  const exp = new Set(expKeys.value), out = []
+  const walk = (list, level) => (cmp ? list.slice().sort(cmp) : list).forEach(r => {
+    const ri = idx.get(r), key = r[props.rowKey] != null ? r[props.rowKey] : String(ri)
+    const kids = props.tree && ((Array.isArray(r.children) && r.children.length > 0) || !!r.hasChildren)
+    const open = kids && exp.has(key)
+    out.push({ r, ri, key, level, kids, open })
+    if (open && Array.isArray(r.children)) walk(r.children, level + 1)
+  })
+  walk(props.rows, 0)
+  return { list: out, total: n }
+})
+const view = computed(() => built.value.list)
+const total = computed(() => built.value.total)
+const sortedDir = (c) => sortState.value && sortState.value.key === c.key ? sortState.value.direction : null
+// Two-line title cell — every measure is a --title-cell-* tier token (md: 32px tile r8 · 12px to text · 14/12px · 2px gap · 10px padding → 58px).
+const T_TILE = { width: 'var(--title-cell-tile)', height: 'var(--title-cell-tile)', borderRadius: 'var(--title-cell-tile-r)' }
+const T_ICON = { width: 'var(--title-cell-icon)', height: 'var(--title-cell-icon)' }
+const T_ONE = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }
+const T_TITLE = { ...T_ONE, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-regular)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-heading)' }
+const T_DESC = { ...T_ONE, fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', color: 'var(--text-secondary)' }
+const STAR_FILLED = 'M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'
+const pick = (a, r, ri) => typeof a === 'function' ? a(r, ri) : a != null ? r[a] : undefined
+function tl(c, r, ri) {
+  const o = c.twoLine === true ? {} : c.twoLine
+  return { icon: pick(o.icon ?? 'icon', r, ri), hue: pick(o.hue ?? 'hue', r, ri), desc: pick(o.description ?? 'description', r, ri), mark: pick(o.mark ?? 'mark', r, ri), more: o.more !== false }
+}
+function more(r, ri, e) { if (e && e.stopPropagation) e.stopPropagation(); emit('rowMore', r, ri, e) }
 const tier = computed(() => props.size || (props.dense ? 'sm' : undefined))
 const flushTop = computed(() => props.bordered || props.framed)
-const colCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))
+const colCount = computed(() => props.columns.length || 1)
+// Selection checkbox sits in the first column's leading padding (no column of its own): the gap to the text equals the edge padding.
+const CHECK_PAD = 'calc(var(--edge-pad) * 2 + var(--check-size))'
+// Config-code chip (`code: true` columns): Menlo at --text-code on the inset fill.
+const codeChip = { fontFamily: 'var(--font-mono)', fontSize: 'var(--text-code)', lineHeight: 'var(--leading-code)', letterSpacing: 0, background: 'var(--bg-inset)', border: '1px solid var(--border-subtle)', borderRadius: '4px', padding: '1px 6px', color: 'var(--text-primary)', whiteSpace: 'nowrap' }
+const checkSlot = { position: 'absolute', left: 'var(--edge-pad)', top: 0, bottom: 0, display: 'flex', alignItems: 'center' }
 const frame = computed(() => props.bordered ? { background: 'var(--bg-surface)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', ...props.style } : { display: 'contents' })
 const localW = reactive({})
 const drag = ref(null), hot = ref(null)
@@ -32,29 +118,33 @@ function startDrag(e, c) {
   document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'
   window.addEventListener('mousemove', move); window.addEventListener('mouseup', up)
 }
-function cellFont(c) { return c.mono ? { fontFamily: 'var(--font-mono)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 0, fontVariantNumeric: 'tabular-nums', color: 'var(--text-heading)' } : { fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-primary)' } }
+function cellFont(c) { return c.mono ? { fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', fontVariantNumeric: 'tabular-nums', color: 'var(--text-primary)' } : { fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-primary)' } }
 // first and last cells keep the card's edge padding; every other cell the tier's cell padding
-function cellPad(i) { return { paddingTop: 0, paddingBottom: 0, paddingLeft: i === 0 && !props.selectable ? 'var(--edge-pad)' : 'var(--cell-px)', paddingRight: i === props.columns.length - 1 ? 'var(--edge-pad)' : 'var(--cell-px)' } }
+function cellPad(i) { return { ...(i === 0 && props.selectable ? { position: 'relative' } : null), paddingTop: 0, paddingBottom: 0, paddingLeft: i === 0 ? (props.selectable ? CHECK_PAD : 'var(--edge-pad)') : 'var(--cell-px)', paddingRight: i === props.columns.length - 1 ? 'var(--edge-pad)' : 'var(--cell-px)' } }
 </script>
 <template>
   <div :style="frame" :data-size="bordered ? tier : undefined">
     <table :data-size="tier" :style="{ width: '100%', borderCollapse: 'collapse', tableLayout: resizable ? 'fixed' : 'auto', ...(bordered ? null : style) }">
       <thead>
         <tr :style="{ background: 'var(--bg-table-header)', borderTop: (headerBorder && !flushTop) ? '1px solid var(--border-subtle)' : 'none', borderBottom: headerBorder ? '1px solid var(--border-subtle)' : 'none', height: 'var(--bar-h)' }">
-          <th v-if="selectable" style="width:calc(var(--edge-pad) + var(--check-size) + var(--cell-px));padding:0 0 0 var(--edge-pad);text-align:left"><Checkbox :checked="rows.length > 0 && selected.length === rows.length" :indeterminate="selected.length > 0 && selected.length < rows.length" @change="v => emit('toggle', 'all', v)" /></th>
-          <th v-for="(c, i) in columns" :key="c.key" :ref="el => { thEls[c.key] = el }" :style="{ position: 'relative', textAlign: c.align || 'left', ...cellPad(i), width: widthOf(c), fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-semibold)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
-            {{ c.label }}
+          <th v-for="(c, i) in columns" :key="c.key" :ref="el => { thEls[c.key] = el }" :aria-sort="c.sortable ? (sortedDir(c) === 'asc' ? 'ascending' : sortedDir(c) === 'desc' ? 'descending' : 'none') : undefined"
+            @mouseenter="c.sortable && (hotTh = c.key)" @mouseleave="c.sortable && (hotTh = null)" @focusin="c.sortable && (hotTh = c.key)" @focusout="c.sortable && (hotTh = null)"
+            :style="{ position: 'relative', textAlign: c.align || 'left', ...cellPad(i), width: widthOf(c), fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-semibold)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: sortedDir(c) ? 'var(--text-heading)' : 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
+            <span v-if="selectable && i === 0" :style="checkSlot"><Checkbox :checked="total > 0 && selected.length === total" :indeterminate="selected.length > 0 && selected.length < total" @change="v => emit('toggle', 'all', v)" /></span>
+            <span v-if="c.sortable" :style="{ display: 'flex', alignItems: 'center', gap: '4px' }"><span :style="{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0, ...(c.align === 'right' ? { marginLeft: 'auto' } : c.align === 'center' ? { margin: '0 auto' } : null), ...(typeof ((columnWidths || localW)[c.key] ?? c.width) === 'number' ? { maxWidth: (((columnWidths || localW)[c.key] ?? c.width) - 32) + 'px' } : null) }">{{ c.label }}</span><IconButton :icon="sortedDir(c) === 'desc' ? 'arrow-down' : 'arrow-up'" size="sm" muted :label="sortLabel(sortedDir(c))" :title="sortLabel(sortedDir(c))" :style="{ opacity: (sortedDir(c) || hotTh === c.key) ? 1 : 0, ...(c.align === 'right' ? null : { marginLeft: 'auto' }) }" @click="cycleSort(c.key)" /></span>
+            <template v-else>{{ c.label }}</template>
             <span v-if="resizable && i < columns.length - 1" aria-hidden="true" @mousedown="e => startDrag(e, c)" @mouseenter="hot = c.key" @mouseleave="hot = null"
               style="position:absolute;top:0;right:-5px;width:11px;height:100%;cursor:col-resize;display:flex;align-items:center;justify-content:center;z-index:1">
-              <span :style="{ width: drag === c.key ? '2px' : '1px', height: '50%', background: (drag === c.key || hot === c.key) ? 'var(--action-primary)' : 'var(--border-control)', borderRadius: '1px', transition: 'var(--t-hover)' }"></span>
+              <span :style="{ width: drag === c.key ? '2px' : '1px', height: '50%', background: (drag === c.key || hot === c.key) ? 'var(--action-primary)' : 'var(--border-split)', borderRadius: '1px', transition: 'var(--t-hover)' }"></span>
             </span>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(r, ri) in rows" :key="ri" data-row="" :style="{ height: 'var(--bar-h)', background: 'var(--row-wash, transparent)', transition: 'var(--t-hover)', borderBottom: bordered && ri === rows.length - 1 ? 'none' : '1px solid var(--border-subtle)' }">
-          <td v-if="selectable" style="padding:0 0 0 var(--edge-pad)"><Checkbox :checked="selected.includes(ri)" @change="v => emit('toggle', ri, v)" /></td>
-          <td v-for="(c, i) in columns" :key="c.key" :style="{ ...cellPad(i), textAlign: c.align || 'left', whiteSpace: 'nowrap', ...(resizable ? { overflow: 'hidden', textOverflow: 'ellipsis' } : null), ...cellFont(c) }">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</td>
+        <tr v-for="(item, pos) in view" :key="item.key" data-row="" :aria-level="tree ? item.level + 1 : undefined" :aria-expanded="item.kids ? item.open : undefined" :style="{ height: 'var(--bar-h)', background: 'var(--row-wash, transparent)', transition: 'var(--t-hover)', borderBottom: bordered && pos === view.length - 1 ? 'none' : '1px solid var(--border-subtle)' }">
+          <template v-for="{ r, ri } in [item]" :key="'r'">
+          <td v-for="(c, i) in columns" :key="c.key" :style="{ ...cellPad(i), ...(c.twoLine ? { paddingTop: 'var(--title-cell-py)', paddingBottom: 'var(--title-cell-py)', maxWidth: 0 } : null), textAlign: c.align || 'left', whiteSpace: 'nowrap', ...(resizable ? { overflow: 'hidden', textOverflow: 'ellipsis' } : null), ...cellFont(c) }"><span v-if="selectable && i === 0" :style="checkSlot"><Checkbox :checked="selected.includes(ri)" @change="v => emit('toggle', ri, v)" /></span><div v-if="c.twoLine" :style="{ display: 'flex', alignItems: 'center', minWidth: px(c.minWidth ?? 180), ...(treeCol === c ? { paddingLeft: (item.level * TREE_INDENT) + 'px' } : null) }"><span v-if="treeCol === c" :style="{ width: TREE_TOGGLE + 'px', flexShrink: 0, marginRight: (TREE_INDENT - TREE_TOGGLE) + 'px', display: 'inline-flex' }"><button v-if="item.kids" type="button" :aria-expanded="item.open" :aria-label="item.open ? L.collapse : L.expand" :title="item.open ? L.collapse : L.expand" @click.stop="toggleRow(item)" @mouseenter="hotToggle = item.key" @mouseleave="hotToggle = null" :style="{ width: TREE_TOGGLE + 'px', height: TREE_TOGGLE + 'px', padding: 0, border: 'none', borderRadius: 'var(--radius-sm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', background: hotToggle === item.key ? 'var(--overlay-hover)' : 'transparent', color: hotToggle === item.key ? 'var(--text-body)' : 'var(--text-muted)', transition: 'var(--t-hover)' }"><Icon name="chevron-right" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)', transform: item.open ? 'rotate(90deg)' : 'none', transition: 'transform .15s ease' }" /></button></span><div style="display:flex;align-items:center;gap:var(--title-cell-tile-gap);flex:1;min-width:0"><template v-for="t in [tl(c, r, ri)]" :key="0"><span v-if="t.icon" :style="{ display: 'inline-flex', flexShrink: 0, cursor: canOpen ? 'pointer' : undefined }" @click="e => canOpen && openRow(r, ri, e)"><IconTile :icon="t.icon" :hue="t.hue || 'neutral'" kind="row" :style="T_TILE" :icon-style="T_ICON" /></span><div style="display:flex;flex-direction:column;gap:var(--title-cell-gap);flex:1;min-width:0"><div style="display:flex;align-items:center;gap:4px;min-width:0"><span v-if="canOpen" role="button" tabindex="0" :style="{ ...T_TITLE, cursor: 'pointer' }" @click="e => openRow(r, ri, e)" @keydown="e => openKey(r, ri, e)">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</span><span v-else :style="T_TITLE">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</span><svg v-if="t.mark === 'favorite'" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linejoin="round" role="img" aria-label="Favorite" style="display:block;flex-shrink:0;color:var(--warning)"><path :d="STAR_FILLED" /></svg><span v-else-if="t.mark" role="img" :aria-label="t.mark.label" :style="{ display: 'inline-flex', flexShrink: 0, color: t.mark.color || 'var(--text-muted)' }"><Icon :name="t.mark.icon" :size="14" /></span></div><span v-if="t.desc" :style="T_DESC">{{ t.desc }}</span></div><IconButton v-if="t.more" icon="ellipsis" size="sm" muted :label="L.more" :title="L.more" @click="e => more(r, ri, e)" /></template></div></div><code v-else-if="c.code && (typeof r[c.key] === 'string' || typeof r[c.key] === 'number') && r[c.key] !== ''" :style="codeChip">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</code><template v-else>{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</template></td>
+          </template>
         </tr>
         <tr v-if="rows.length === 0 && $slots.empty"><td :colspan="colCount" style="padding:0"><slot name="empty" /></td></tr>
       </tbody>

package/components/data/data.prompt.md

@@ -1,4 +1,4 @@
-Data lists: `Table` (hairline table, mono cells, selectable; a size region — `size="sm"` for preview grids) and `ListRow` (expandable workflow rows in a `Card pad={false}`).
+Data lists: `Table` (hairline table, mono cells, selectable; a size region — `size="sm"` for preview grids; `twoLine` name column with `onRowOpen`, `sortable` headers, `tree` rows with expand arrows, `labels` to translate its tooltips) and `ListRow` (expandable workflow rows in a `Card pad={false}`).
 
 ```jsx
 <Table selectable columns={[

package/components/display/Avatar.jsx

@@ -13,7 +13,7 @@ export function Avatar({ name = "", src, size = 28, style }) {
   const hue = palette[[...name].reduce((a, c) => a + c.charCodeAt(0), 0) % palette.length];
   if (src) return <img src={src} alt={name} style={{ width: size, height: size, borderRadius: "var(--radius-full)", objectFit: "cover", flexShrink: 0, ...style }} />;
   return (
-    <span title={name} style={{ width: size, height: size, borderRadius: "var(--radius-full)", background: "var(--bg-hover)", color: hue, display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: Math.max(9, Math.round(size * .4)), letterSpacing: 0, flexShrink: 0, boxSizing: "border-box", border: "1px solid var(--border-card)", ...style }}>
+    <span title={name} style={{ width: size, height: size, borderRadius: "var(--radius-full)", background: "var(--bg-hover)", color: hue, display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: `max(${Math.round(size * .4)}px, var(--text-glyph-min))`, letterSpacing: 0, flexShrink: 0, boxSizing: "border-box", border: "1px solid var(--border-card)", ...style }}>
       {initials(name)}
     </span>
   );
@@ -25,7 +25,7 @@ export function AvatarGroup({ names = [], size = 24, max = 4, style }) {
   return (
     <div style={{ display: "flex", alignItems: "center", ...style }}>
       {shown.map((n, i) => <Avatar key={n + i} name={n} size={size} style={{ marginLeft: i ? -8 : 0, boxShadow: "var(--ring-surface)" }} />)}
-      {rest > 0 ? <span style={{ marginLeft: -8, width: size, height: size, borderRadius: "var(--radius-full)", background: "var(--bg-active)", color: "var(--text-secondary)", boxShadow: "var(--ring-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontSize: Math.max(9, Math.round(size * .38)) }}>+{rest}</span> : null}
+      {rest > 0 ? <span style={{ marginLeft: -8, width: size, height: size, borderRadius: "var(--radius-full)", background: "var(--bg-active)", color: "var(--text-secondary)", boxShadow: "var(--ring-surface)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontSize: `max(${Math.round(size * .38)}px, var(--text-glyph-min))` }}>+{rest}</span> : null}
     </div>
   );
 }

package/components/display/Avatar.vue

@@ -14,5 +14,5 @@ const hue = computed(() => palette[[...props.name].reduce((a, c) => a + c.charCo
 </script>
 <template>
   <img v-if="src" :src="src" :alt="name" :style="{ width: px(size), height: px(size), borderRadius: 'var(--radius-full)', objectFit: 'cover', flexShrink: 0, ...style }" />
-  <span v-else :title="name" :style="{ width: px(size), height: px(size), borderRadius: 'var(--radius-full)', background: 'var(--bg-hover)', color: hue, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: px(Math.max(9, Math.round(size * .4))), letterSpacing: 0, flexShrink: 0, boxSizing: 'border-box', border: '1px solid var(--border-card)', ...style }">{{ initials(name) }}</span>
+  <span v-else :title="name" :style="{ width: px(size), height: px(size), borderRadius: 'var(--radius-full)', background: 'var(--bg-hover)', color: hue, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: `max(${Math.round(size * .4)}px, var(--text-glyph-min))`, letterSpacing: 0, flexShrink: 0, boxSizing: 'border-box', border: '1px solid var(--border-card)', ...style }">{{ initials(name) }}</span>
 </template>

package/components/display/AvatarGroup.vue

@@ -9,6 +9,6 @@ const rest = computed(() => props.names.length - shown.value.length)
 <template>
   <div :style="{ display: 'flex', alignItems: 'center', ...style }">
     <Avatar v-for="(n, i) in shown" :key="n + i" :name="n" :size="size" :style="{ marginLeft: i ? '-8px' : 0, boxShadow: 'var(--ring-surface)' }" />
-    <span v-if="rest > 0" :style="{ marginLeft: '-8px', width: px(size), height: px(size), borderRadius: 'var(--radius-full)', background: 'var(--bg-active)', color: 'var(--text-secondary)', boxShadow: 'var(--ring-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontSize: px(Math.max(9, Math.round(size * .38))) }">+{{ rest }}</span>
+    <span v-if="rest > 0" :style="{ marginLeft: '-8px', width: px(size), height: px(size), borderRadius: 'var(--radius-full)', background: 'var(--bg-active)', color: 'var(--text-secondary)', boxShadow: 'var(--ring-surface)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontSize: `max(${Math.round(size * .38)}px, var(--text-glyph-min))` }">+{{ rest }}</span>
   </div>
 </template>

package/components/display/Badge.d.ts

@@ -20,8 +20,11 @@ export declare function Badge(props: BadgeProps): JSX.Element;
 /** Tinted category icon tile. hue: source|join|transform|merge|output; kind: palette 40/r14 · node 48/r16 · row 32/r8. */
 export interface IconTileProps {
   icon: string;
-  hue?: "source" | "join" | "transform" | "merge" | "output";
+  /** Category hue. On kind="row" the tile is a hairline square unless hue is set. "neutral" = grey tile (folders, containers). */
+  hue?: "source" | "join" | "transform" | "merge" | "output" | "neutral";
   kind?: "palette" | "node" | "row";
   style?: React.CSSProperties;
+  /** Forwarded to the inner Icon (e.g. width/height from a token). */
+  iconStyle?: React.CSSProperties;
 }
 export declare function IconTile(props: IconTileProps): JSX.Element;

package/components/display/Badge.jsx

@@ -27,14 +27,19 @@ export function Badge({ tone = "neutral", children, style }) {
   return <span style={{ display: "inline-flex", alignItems: "center", height: 20, padding: "0 8px", borderRadius: "var(--radius-full)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", lineHeight: 1, letterSpacing: "var(--tracking-xs)", ...tones[tone], ...style }}>{children}</span>;
 }
 
-/** Category icon tile — the signature tinted square. kind: palette 40/r14 · node 48/r16 · row 32/r8 (hairline). */
-export function IconTile({ icon, hue = "source", kind = "palette", style }) {
+/** Category icon tile — the signature tinted square. kind: palette 40/r14 · node 48/r16 · row 32/r8.
+ *  A row tile is a hairline square unless you pass `hue`, then it is tinted like the others. hue "neutral" is the grey tile (folders, containers).
+ *  iconStyle is forwarded to the Icon (Table's two-line cell sizes it from the tier tokens). */
+export function IconTile({ icon, hue, kind = "palette", style, iconStyle }) {
   const dims = { palette: { box: 40, r: "var(--radius-tile)", icon: 18 }, node: { box: 48, r: "var(--radius-node)", icon: 22 }, row: { box: 32, r: "var(--radius-md)", icon: 16 } };
   const t = dims[kind];
-  const tinted = kind !== "row";
+  const h = hue || "source";
+  const tinted = kind !== "row" || !!hue;
+  const bg = !tinted ? "var(--bg-surface)" : h === "neutral" ? "var(--bg-hover)" : `var(--cat-${h}-bg)`;
+  const fg = !tinted ? "var(--text-body)" : h === "neutral" ? "var(--text-secondary)" : `var(--cat-${h})`;
   return (
-    <span style={{ width: t.box, height: t.box, borderRadius: t.r, background: tinted ? `var(--cat-${hue}-bg)` : "var(--bg-surface)", border: tinted ? "none" : "1px solid var(--border-control)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: tinted ? `var(--cat-${hue})` : "var(--text-body)", flexShrink: 0, boxSizing: "border-box", ...style }}>
-      <Icon name={icon} size={t.icon} strokeWidth={2} />
+    <span style={{ width: t.box, height: t.box, borderRadius: t.r, background: bg, border: tinted ? "none" : "1px solid var(--border-control)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: fg, flexShrink: 0, boxSizing: "border-box", ...style }}>
+      <Icon name={icon} size={t.icon} strokeWidth={2} style={iconStyle} />
     </span>
   );
 }

package/components/display/IconTile.vue

@@ -2,13 +2,18 @@
 import { px } from '../px.js'
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
+// Category icon tile. kind: palette 40/r14 · node 48/r16 · row 32/r8. A row tile is a hairline square unless `hue` is set, then it is tinted.
+// hue "neutral" is the grey tile (folders, containers). iconStyle is forwarded to the Icon (Table's two-line cell sizes it from the tier tokens).
 const dims = { palette: { box: 40, r: 'var(--radius-tile)', icon: 18 }, node: { box: 48, r: 'var(--radius-node)', icon: 22 }, row: { box: 32, r: 'var(--radius-md)', icon: 16 } }
-const props = defineProps({ icon: String, hue: { type: String, default: 'source' }, kind: { type: String, default: 'palette' }, style: Object })
+const props = defineProps({ icon: String, hue: String, kind: { type: String, default: 'palette' }, style: Object, iconStyle: Object })
 const t = computed(() => dims[props.kind])
-const tinted = computed(() => props.kind !== 'row')
+const h = computed(() => props.hue || 'source')
+const tinted = computed(() => props.kind !== 'row' || !!props.hue)
+const bg = computed(() => !tinted.value ? 'var(--bg-surface)' : h.value === 'neutral' ? 'var(--bg-hover)' : `var(--cat-${h.value}-bg)`)
+const fg = computed(() => !tinted.value ? 'var(--text-body)' : h.value === 'neutral' ? 'var(--text-secondary)' : `var(--cat-${h.value})`)
 </script>
 <template>
-  <span :style="{ width: px(t.box), height: px(t.box), borderRadius: px(t.r), background: tinted ? `var(--cat-${hue}-bg)` : 'var(--bg-surface)', border: tinted ? 'none' : '1px solid var(--border-control)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: tinted ? `var(--cat-${hue})` : 'var(--text-body)', flexShrink: 0, boxSizing: 'border-box', ...style }">
-    <Icon :name="icon" :size="t.icon" :stroke-width="2" />
+  <span :style="{ width: px(t.box), height: px(t.box), borderRadius: px(t.r), background: bg, border: tinted ? 'none' : '1px solid var(--border-control)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: fg, flexShrink: 0, boxSizing: 'border-box', ...style }">
+    <Icon :name="icon" :size="t.icon" :stroke-width="2" :style="iconStyle" />
   </span>
 </template>

package/components/display/Kbd.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-/** Keyboard shortcut keycap row (20px, mono). Addition — for a power-user data tool's shortcut hints. */
+/** Keyboard shortcut keycap row (20px). Addition — for a power-user data tool's shortcut hints. */
 export interface KbdProps {
   keys?: string[];
   style?: React.CSSProperties;

package/components/display/Kbd.jsx

@@ -5,7 +5,7 @@ export function Kbd({ keys = [], style }) {
   return (
     <span style={{ display: "inline-flex", gap: 3, ...style }}>
       {keys.map((k, i) => (
-        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{k}</span>
+        <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 20, height: 20, padding: "0 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", border: "1px solid var(--border-control)", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{k}</span>
       ))}
     </span>
   );

package/components/display/Kbd.vue

@@ -4,6 +4,6 @@ defineProps({ keys: { type: Array, default: () => [] }, style: Object })
 </script>
 <template>
   <span :style="{ display: 'inline-flex', gap: '3px', ...style }">
-    <span v-for="(k, i) in keys" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
+    <span v-for="(k, i) in keys" :key="i" style="display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ k }}</span>
   </span>
 </template>

package/components/feedback/ActivityItem.jsx

@@ -33,7 +33,7 @@ export function DotActivity({ tone = "success", text, time, style }) {
 export function LogViewer({ lines = [], height, style }) {
   return (
     <div style={{ background: "var(--bg-inset)", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", padding: "10px 12px", display: "flex", flexDirection: "column", gap: 6, overflowY: "auto", height, boxSizing: "border-box", ...style }}>
-      {lines.map((l, i) => <span key={i} style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: typeof l === "object" ? l.color || "var(--text-body)" : "var(--text-body)", whiteSpace: "pre" }}>{typeof l === "object" ? l.text : l}</span>)}
+      {lines.map((l, i) => <span key={i} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: typeof l === "object" ? l.color || "var(--text-body)" : "var(--text-body)", whiteSpace: "pre" }}>{typeof l === "object" ? l.text : l}</span>)}
     </div>
   );
 }

package/components/feedback/ContextMenu.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
-/** Floating context menu — r10, soft shadow, control-height rows at the region's tier (32px / 14px at md), red danger row. */
+/** Floating context menu — r10, soft shadow, control-height rows at the region's tier (32px / 14px at md), red danger row.
+ *  Action menus keep rows flush; a single-choice menu (any item `selected`) spaces rows 2px apart. Dividers keep 4px above and below. */
 export interface ContextMenuProps {
-  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean }[];
+  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
   onSelect?: (label: string) => void;
   /** Size tier of the rows. Omit to inherit the tier of the control that opened the menu (the default). */
   size?: "sm" | "md" | "lg";