@keyfunc/keybricks-ds 2.4.6 → 2.4.8

package/components/data/Table.jsx

@@ -8,9 +8,9 @@ import { Icon } from "../icons/Icon.jsx";
    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.
+/* Config-code chip (`code: true` columns): Menlo at --text-code on the hover fill with a control border (stays visible on a hovered row) — 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 codeChip = { fontFamily: "var(--font-mono)", fontSize: "var(--text-code)", lineHeight: "var(--leading-code)", letterSpacing: 0, background: "var(--bg-hover)", border: "1px solid var(--border-control)", 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:
@@ -31,7 +31,11 @@ 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 DEFAULT_LABELS = { sortAsc: "Sort ascending", sortDesc: "Sort descending", sortClear: "Clear sorting", more: "More actions", expand: "Expand", collapse: "Collapse", pinned: "Selected", others: "Others", unavailable: "Unavailable", clear: "Clear" };
+/* pinSelected="labels": a 28px group row above each group, on the header tint, 12px semibold --text-secondary. The header rule, the group rows' rules and
+   the rule closing the pinned group turn --border-control (#e5e5e5) — --border-subtle is the header tint itself, so it would not show. */
+const GROUP_CELL = { height: 28, padding: "0 var(--edge-pad)", background: "var(--bg-table-header)", borderBottom: "1px solid var(--border-control)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", fontWeight: "var(--weight-semibold)", color: "var(--text-secondary)", whiteSpace: "nowrap" };
+const CLEAR_BTN = { marginLeft: "auto", border: "none", background: "none", padding: 0, cursor: "pointer", fontFamily: "inherit", fontSize: "inherit", lineHeight: "inherit", fontWeight: "var(--weight-regular)", color: "var(--link)" };
 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. */
@@ -39,7 +43,7 @@ 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 }) {
+function buildView(rows, { tree, rowKey, expanded, col, dir, manualSort, pin, unavail }) {
   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);
@@ -48,8 +52,16 @@ function buildView(rows, { tree, rowKey, expanded, col, dir, manualSort }) {
     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;
+  /* pinSelected: checked rows move to the top of their sibling list (sorted among themselves), the rest follow in their own order.
+     unavail (pinSelected="labels" + isRowDisabled): locked unchecked rows go last — Selected, Others, Unavailable, each sorted on its own. */
+  const order = (list) => {
+    const l = cmp ? list.slice().sort(cmp) : list;
+    if (!pin) return l;
+    const rest = l.filter((r) => !pin.has(idx.get(r)));
+    return [...l.filter((r) => pin.has(idx.get(r))), ...(unavail ? [...rest.filter((r) => !unavail.has(idx.get(r))), ...rest.filter((r) => unavail.has(idx.get(r)))] : rest)];
+  };
   const out = [];
-  const walk = (list, level) => (cmp ? list.slice().sort(cmp) : list).forEach((r) => {
+  const walk = (list, level) => order(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);
@@ -57,7 +69,7 @@ function buildView(rows, { tree, rowKey, expanded, col, dir, manualSort }) {
     if (open && Array.isArray(r.children)) walk(r.children, level + 1);
   });
   walk(rows, 0);
-  return { list: out, total: n };
+  return { list: out, total: n, flat: [...idx.keys()] };
 }
 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;
@@ -123,10 +135,19 @@ function TitleCell({ c, item, onRowMore, onRowOpen, labels, tree, onToggleRow })
  * 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.
  * framed    — the table sits flush inside a container that already has a border (Card pad={false}); drops only the header's top rule.
+ * pinSelected — with selectable: checked rows move to the top (of their level in a tree), in the current sort order; unchecking returns a row to its place.
+ *             Pinned rows sit on --bg-inset; while any are pinned, the header rule and the rule closing the group are --border-control. true | "divider": just that. "labels": a 28px group row above each group
+ *             ("Selected · n" with Clear → onToggle("all", false), "Others · n") on the header tint. labels.pinned / others / clear translate them.
+ *             With isRowDisabled, locked unchecked rows form a third group after Others — "Unavailable · n" (labels.unavailable). Group order is fixed under sorting
+ *             (Selected · Others · Unavailable; the sort applies inside each); a row changes group as its lock changes. Empty groups show no group row.
+ * isRowDisabled(row, index) — with selectable: the app's lock for a row, asked on every render. A locked row's checkbox is disabled (50%, not-allowed, no hover, no onToggle)
+ *             and the row takes no hover wash; its cells are left to the app. The lock never changes selected — a locked, checked row stays checked.
+ *             Select-all checks every unlocked row, Clear unchecks them; locked rows keep their state — onToggle("all", v, next) passes the result.
+ *             With pinSelected, a locked unchecked row stays with the others. disabledReason(row, index) → the checkbox tooltip.
  * 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.
+ *             Widths live in local state unless you pass columnWidths (then update it from onColumnResize). onColumnResize(key, px) fires on every drag either way. Min width = column.minWidth ?? 48.
  */
-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 }) {
+export function Table({ columns = [], rows = [], size, dense, selectable, selected = [], onToggle, pinSelected, isRowDisabled, disabledReason, 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;
@@ -134,10 +155,37 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
   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,
+  /* Locked unchecked rows, asked of isRowDisabled on every render (never cached) — only "labels" groups them; the key re-runs the view when the set changes. */
+  const allRows = React.useMemo(() => { const a = []; const f = (l) => l.forEach((r) => { a.push(r); if (tree && Array.isArray(r.children)) f(r.children); }); f(rows); return a; }, [rows, tree]);
+  const unavail = selectable && pinSelected === "labels" && isRowDisabled ? new Set(allRows.map((r, i) => (!selected.includes(i) && isRowDisabled(r, i) ? i : -1)).filter((i) => i >= 0)) : null;
+  const unKey = unavail ? [...unavail].join(",") : "";
+  const { list: view, total, flat } = React.useMemo(() => buildView(rows, {
+    tree, rowKey, expanded: new Set(expKeys), manualSort, pin: selectable && pinSelected ? new Set(selected) : null, unavail: unavail && unavail.size ? unavail : null,
     col: sortState && columns.find((x) => x.key === sortState.key), dir: sortState && sortState.direction === "desc" ? -1 : 1,
-  }), [rows, columns, sortState, manualSort, tree, rowKey, expKeys]);
+  }), [rows, columns, sortState, manualSort, tree, rowKey, expKeys, selectable, pinSelected, selected, unKey]);
+  /* pinSelected: true | "divider" → pinned rows on --bg-inset + a 1px --border-control rule under the group; "labels" → the same fill + a group row above each group.
+     While rows are pinned the header rule is --border-control too (--border-subtle is the header tint itself, so it would not show). */
+  const pinInfo = (() => {
+    if (!selectable || !pinSelected) return null;
+    const sel = new Set(selected), top = view.filter((x) => x.level === 0 && sel.has(x.ri)).length;
+    const style = pinSelected === "labels" ? "labels" : "divider", un = unavail ? unavail.size : 0;
+    if (style === "divider") return { style, sel, top, strong: top > 0, n: selected.length, others: total - selected.length, rest: top ? view.findIndex((x) => x.level === 0 && !sel.has(x.ri)) : -1, unStart: -1, un: 0 };
+    /* labels: up to three groups — Selected · n, Others · n, Unavailable · n. A group row shows only when its group has top-level rows; the bands show while any group does. */
+    const unStart = un ? view.findIndex((x) => x.level === 0 && unavail.has(x.ri)) : -1, grouped = top > 0 || unStart >= 0;
+    const rest = grouped ? view.findIndex((x) => x.level === 0 && !sel.has(x.ri) && !(unavail && unavail.has(x.ri))) : -1;
+    return { style, sel, top, grouped, strong: grouped, n: selected.length, others: total - selected.length - un, rest, unStart, un };
+  })();
+  /* isRowDisabled(row, index) — the app's lock, asked again on every render (it may depend on selected). It blocks checking only: a locked row keeps
+     whatever selected says. Select-all counts and changes only unlocked rows; onToggle("all", v, next) hands the app the resulting selection. */
+  const isDis = (r, ri) => !!(selectable && isRowDisabled && isRowDisabled(r, ri));
+  const selSet = new Set(selected);
+  const enabledIdx = selectable ? flat.map((r, i) => (isDis(r, i) ? -1 : i)).filter((i) => i >= 0) : [];
+  const allOn = enabledIdx.length > 0 && enabledIdx.every((i) => selSet.has(i));
+  const toggleAll = (v) => { if (!onToggle) return; const next = v ? [...new Set([...selected, ...enabledIdx])] : selected.filter((i) => flat[i] && isDis(flat[i], i)); onToggle("all", v, next); };
+  const groupRow = (text, clear) => <tr><td colSpan={columns.length || 1} style={GROUP_CELL}><span style={{ display: "flex", alignItems: "center", gap: 8 }}>{text}{clear ? <button type="button" data-link="" onClick={() => toggleAll(false)} style={CLEAR_BTN}>{L.clear}</button> : null}</span></td></tr>;
+  const groupAt = (pos) => !pinInfo || pinInfo.style !== "labels" || !pinInfo.grouped ? null : pos === 0 && pinInfo.top ? groupRow(`${L.pinned} · ${pinInfo.n}`, true) : pos === pinInfo.rest ? groupRow(`${L.others} · ${pinInfo.others}`) : pos === pinInfo.unStart ? groupRow(`${L.unavailable} · ${pinInfo.un}`) : null;
+  /* The row above a group row (or closing the pinned band) takes --border-control: --border-subtle is the header tint the group row sits on. */
+  const ruleBelow = (pos) => !!pinInfo && ((pinInfo.rest > 0 && pos === pinInfo.rest - 1) || (pinInfo.unStart > 0 && pos === pinInfo.unStart - 1));
   const toggleRow = (item) => {
     const next = item.open ? expKeys.filter((k) => k !== item.key) : [...expKeys, item.key];
     if (expandedKeys === undefined) setLocalExp(next);
@@ -151,17 +199,23 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
   const [hot, setHot] = React.useState(null); // key whose handle is hovered
   const thRefs = React.useRef({});
   const widths = columnWidths || localW;
-  const widthOf = (c) => widths[c.key] ?? c.width;
+  /* Resizable: the last column (no divider) takes no width and absorbs the slack. Otherwise, when every column has a width, a fixed-layout table
+     scales them all to fill, and the dragged column would not follow the cursor. */
+  const widthOf = (c) => (resizable && c === columns[columns.length - 1] ? undefined : widths[c.key] ?? c.width);
 
   const startDrag = (e, c) => {
     e.preventDefault();
     const th = thRefs.current[c.key];
-    const startX = e.clientX, startW = th ? th.getBoundingClientRect().width : (parseFloat(widthOf(c)) || 120);
+    /* A column width is the content box (the cell padding sits outside it), so start from the rendered width minus the padding — else the column jumps by its padding on the first move. */
+    const cs = th && getComputedStyle(th);
+    const startX = e.clientX, startW = th ? th.getBoundingClientRect().width - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) : (parseFloat(widthOf(c)) || 120);
     const min = c.minWidth ?? 48;
     setDrag(c.key);
     const move = (ev) => {
       const w = Math.max(min, Math.round(startW + ev.clientX - startX));
-      if (onColumnResize) onColumnResize(c.key, w); else setLocalW((s) => ({ ...s, [c.key]: w }));
+      /* Uncontrolled unless columnWidths is passed; onColumnResize always hears the new width (listening alone must not freeze the column). */
+      if (!columnWidths) setLocalW((s) => ({ ...s, [c.key]: w }));
+      if (onColumnResize) onColumnResize(c.key, w);
     };
     const up = () => { setDrag(null); window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); document.body.style.cursor = ""; document.body.style.userSelect = ""; };
     document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none";
@@ -178,7 +232,7 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
   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)" }}>
+        <tr style={{ background: "var(--bg-table-header)", borderTop: headerBorder && !flushTop ? "1px solid var(--border-subtle)" : "none", borderBottom: headerBorder ? (pinInfo && pinInfo.strong ? "1px solid var(--border-control)" : "1px solid var(--border-subtle)") : "none", height: "var(--bar-h)" }}>
           {columns.map((c, i) => {
             const last = i === columns.length - 1;
             const active = drag === c.key, lit = active || hot === c.key;
@@ -188,7 +242,7 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
               <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}
+                {selectable && i === 0 ? <span style={checkSlot}><Checkbox checked={allOn} indeterminate={!allOn && selected.length > 0} disabled={total > 0 && !enabledIdx.length} onChange={toggleAll} /></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>
@@ -207,12 +261,12 @@ export function Table({ columns = [], rows = [], size, dense, selectable, select
         </tr>
       </thead>
       <tbody>
-        {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)" }}>
+        {view.map((item, pos) => { const { r, ri } = item; const dis = isDis(r, ri); return (<React.Fragment key={item.key}>{groupAt(pos)}
+          <tr data-row="" aria-level={tree ? item.level + 1 : undefined} aria-expanded={item.kids ? item.open : undefined} style={{ ...(dis ? { "--row-wash": "initial" } : null), height: "var(--bar-h)", background: pinInfo && pinInfo.sel.has(ri) ? "var(--row-wash, var(--bg-inset))" : "var(--row-wash, transparent)", transition: "var(--t-hover)", borderBottom: ruleBelow(pos) ? "1px solid var(--border-control)" : bordered && pos === view.length - 1 ? "none" : "1px solid var(--border-subtle)" }}>
             {columns.map((c, i) => (
-              <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>
+              <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} title={dis && disabledReason ? disabledReason(r, ri) : undefined}><Checkbox checked={selected.includes(ri)} disabled={dis} 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>
+          </tr></React.Fragment>
         ); })}
         {rows.length === 0 && empty ? <tr><td colSpan={colCount} style={{ padding: 0 }}>{empty}</td></tr> : null}
       </tbody>

package/components/data/Table.vue

@@ -22,12 +22,19 @@ import Icon from '../icons/Icon.vue'
 // bordered  — the table draws its own rounded card frame (border-card, radius-lg) and drops the edge rules that would double it.
 // framed    — the table sits flush inside a container that already has a border (Card :pad="false"); drops only the header's top rule.
 // 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.
+//             Widths live in local state unless you pass columnWidths (then update it from @column-resize). @column-resize(key, px) fires on every drag either way. Min width = column.minWidth ?? 48.
+// pinSelected — with selectable: checked rows move to the top (of their level in a tree), in the current sort order; unchecking returns a row to its place.
+//             Pinned rows sit on --bg-inset; while any are pinned, the header rule and the rule closing the group are --border-control. true | 'divider': just that. 'labels': a 28px group row above each group
+//             ('Selected · n' with Clear → @toggle('all', false), 'Others · n') on the header tint. labels.pinned / others / clear translate them.
+//             With isRowDisabled, locked unchecked rows form a third group after Others — 'Unavailable · n' (labels.unavailable). Order is fixed under
+//             sorting (Selected · Others · Unavailable; the sort applies inside each); a row changes group as its lock changes; empty groups show no group row.
+// isRowDisabled(row, index) — with selectable: the app's lock for a row, called on every render. Locked: checkbox disabled (50%, not-allowed, no hover, no toggle), no row hover wash,
+//             cells left to the app. Never changes selected. Select-all / Clear skip locked rows — @toggle('all', v, next) passes the result. disabledReason(row, index) → checkbox tooltip.
 // #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, 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 props = defineProps({ columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, size: String, dense: Boolean, selectable: Boolean, pinSelected: [Boolean, String], isRowDisabled: Function, disabledReason: Function, 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 DEFAULT_LABELS = { sortAsc: 'Sort ascending', sortDesc: 'Sort descending', sortClear: 'Clear sorting', more: 'More actions', expand: 'Expand', collapse: 'Collapse', pinned: 'Selected', others: 'Others', unavailable: 'Unavailable', clear: 'Clear' }
 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
@@ -68,8 +75,15 @@ const built = computed(() => {
   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
+  // pinSelected: checked rows move to the top of their sibling list (sorted among themselves), the rest follow in their own order
+  const pin = props.selectable && props.pinSelected ? new Set(props.selected) : null
+  // pinSelected='labels' + isRowDisabled: locked unchecked rows go last — Selected, Others, Unavailable, each sorted on its own. The predicate runs inside
+  // this computed, so Vue re-runs it whenever a prop or any reactive state the predicate reads changes.
+  const un = pin && props.pinSelected === 'labels' && props.isRowDisabled ? new Set([...idx.keys()].map((r, i) => !pin.has(i) && props.isRowDisabled(r, i) ? i : -1).filter(i => i >= 0)) : null
+  const unavail = un && un.size ? un : null
+  const order = (list) => { const l = cmp ? list.slice().sort(cmp) : list; if (!pin) return l; const rest = l.filter(r => !pin.has(idx.get(r))); return [...l.filter(r => pin.has(idx.get(r))), ...(unavail ? [...rest.filter(r => !unavail.has(idx.get(r))), ...rest.filter(r => unavail.has(idx.get(r)))] : rest)] }
   const exp = new Set(expKeys.value), out = []
-  const walk = (list, level) => (cmp ? list.slice().sort(cmp) : list).forEach(r => {
+  const walk = (list, level) => order(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)
@@ -77,10 +91,30 @@ const built = computed(() => {
     if (open && Array.isArray(r.children)) walk(r.children, level + 1)
   })
   walk(props.rows, 0)
-  return { list: out, total: n }
+  return { list: out, total: n, flat: [...idx.keys()], unavail }
 })
 const view = computed(() => built.value.list)
 const total = computed(() => built.value.total)
+// isRowDisabled(row, index) — the app's lock, called on every render (it may depend on selected), never cached. It blocks checking only: a locked row keeps
+// whatever selected says. Select-all counts and changes only unlocked rows; @toggle('all', v, next) hands the app the resulting selection.
+const isDis = (r, ri) => !!(props.selectable && props.isRowDisabled && props.isRowDisabled(r, ri))
+const enabledIdx = () => props.selectable ? built.value.flat.map((r, i) => isDis(r, i) ? -1 : i).filter(i => i >= 0) : []
+function head() { const en = enabledIdx(), sel = new Set(props.selected), all = en.length > 0 && en.every(i => sel.has(i)); return { all, ind: !all && props.selected.length > 0, none: total.value > 0 && !en.length } }
+function toggleAll(v) { const flat = built.value.flat; const next = v ? [...new Set([...props.selected, ...enabledIdx()])] : props.selected.filter(i => flat[i] && isDis(flat[i], i)); emit('toggle', 'all', v, next) }
+// pinSelected: true | 'divider' → pinned rows on --bg-inset + a 1px --border-control rule under the group; 'labels' → the same fill + a group row above each group.
+// While rows are pinned the header rule is --border-control too (--border-subtle is the header tint itself, so it would not show).
+const pinInfo = computed(() => {
+  if (!props.selectable || !props.pinSelected) return null
+  const sel = new Set(props.selected), v = view.value, top = v.filter(x => x.level === 0 && sel.has(x.ri)).length
+  const style = props.pinSelected === 'labels' ? 'labels' : 'divider', ua = built.value.unavail, un = ua ? ua.size : 0
+  if (style === 'divider') return { style, sel, top, strong: top > 0, n: props.selected.length, others: total.value - props.selected.length, rest: top ? v.findIndex(x => x.level === 0 && !sel.has(x.ri)) : -1, unStart: -1, un: 0 }
+  // labels: up to three groups — Selected · n, Others · n, Unavailable · n; a group row shows only when its group has top-level rows
+  const unStart = un ? v.findIndex(x => x.level === 0 && ua.has(x.ri)) : -1, grouped = top > 0 || unStart >= 0
+  const rest = grouped ? v.findIndex(x => x.level === 0 && !sel.has(x.ri) && !(ua && ua.has(x.ri))) : -1
+  return { style, sel, top, grouped, strong: grouped, n: props.selected.length, others: total.value - props.selected.length - un, rest, unStart, un }
+})
+const GROUP_CELL = { height: '28px', padding: '0 var(--edge-pad)', background: 'var(--bg-table-header)', borderBottom: '1px solid var(--border-control)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: 'var(--tracking-xs)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-secondary)', whiteSpace: 'nowrap' }
+const CLEAR_BTN = { marginLeft: 'auto', border: 'none', background: 'none', padding: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'inherit', fontWeight: 'var(--weight-regular)', color: 'var(--link)' }
 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)' }
@@ -100,20 +134,23 @@ const flushTop = computed(() => props.bordered || props.framed)
 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' }
+// Config-code chip (`code: true` columns): Menlo at --text-code on the hover fill with a control border (stays visible on a hovered row).
+const codeChip = { fontFamily: 'var(--font-mono)', fontSize: 'var(--text-code)', lineHeight: 'var(--leading-code)', letterSpacing: 0, background: 'var(--bg-hover)', border: '1px solid var(--border-control)', 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)
 const thEls = {}
-const widthOf = (c) => px((props.columnWidths || localW)[c.key] ?? c.width)
+// Resizable: the last column (no divider) takes no width and absorbs the slack — otherwise a fixed-layout table scales every width to fill and the dragged column drifts from the cursor.
+const widthOf = (c) => props.resizable && c === props.columns[props.columns.length - 1] ? undefined : px((props.columnWidths || localW)[c.key] ?? c.width)
 function startDrag(e, c) {
   e.preventDefault()
   const th = thEls[c.key]
-  const startX = e.clientX, startW = th ? th.getBoundingClientRect().width : (parseFloat(widthOf(c)) || 120), min = c.minWidth ?? 48
+  // A column width is the content box (cell padding sits outside it): start from the rendered width minus the padding, or the column jumps on the first move.
+  const cs = th && getComputedStyle(th)
+  const startX = e.clientX, startW = th ? th.getBoundingClientRect().width - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) : (parseFloat(widthOf(c)) || 120), min = c.minWidth ?? 48
   drag.value = c.key
-  const move = (ev) => { const w = Math.max(min, Math.round(startW + ev.clientX - startX)); if (props.columnWidths) emit('columnResize', c.key, w); else localW[c.key] = w }
+  const move = (ev) => { const w = Math.max(min, Math.round(startW + ev.clientX - startX)); if (!props.columnWidths) localW[c.key] = w; emit('columnResize', c.key, w) }
   const up = () => { drag.value = null; window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); document.body.style.cursor = ''; document.body.style.userSelect = '' }
   document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'
   window.addEventListener('mousemove', move); window.addEventListener('mouseup', up)
@@ -126,11 +163,11 @@ function cellPad(i) { return { ...(i === 0 && props.selectable ? { position: 're
   <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)' }">
+        <tr :style="{ background: 'var(--bg-table-header)', borderTop: (headerBorder && !flushTop) ? '1px solid var(--border-subtle)' : 'none', borderBottom: headerBorder ? (pinInfo && pinInfo.strong ? '1px solid var(--border-control)' : '1px solid var(--border-subtle)') : 'none', height: 'var(--bar-h)' }">
           <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="selectable && i === 0" :style="checkSlot"><Checkbox v-for="h in [head()]" :key="0" :checked="h.all" :indeterminate="h.ind" :disabled="h.none" @change="toggleAll" /></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"
@@ -141,11 +178,16 @@ function cellPad(i) { return { ...(i === 0 && props.selectable ? { position: 're
         </tr>
       </thead>
       <tbody>
-        <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="(item, pos) in view" :key="item.key">
+        <tr v-if="pinInfo && pinInfo.style === 'labels' && pinInfo.grouped && pinInfo.top && pos === 0"><td :colspan="columns.length || 1" :style="GROUP_CELL"><span style="display:flex;align-items:center;gap:8px">{{ L.pinned }} · {{ pinInfo.n }}<button type="button" data-link="" @click="toggleAll(false)" :style="CLEAR_BTN">{{ L.clear }}</button></span></td></tr>
+        <tr v-else-if="pinInfo && pinInfo.style === 'labels' && pinInfo.grouped && pos === pinInfo.rest"><td :colspan="columns.length || 1" :style="GROUP_CELL">{{ L.others }} · {{ pinInfo.others }}</td></tr>
+        <tr v-else-if="pinInfo && pinInfo.style === 'labels' && pinInfo.grouped && pos === pinInfo.unStart"><td :colspan="columns.length || 1" :style="GROUP_CELL">{{ L.unavailable }} · {{ pinInfo.un }}</td></tr>
+        <tr data-row="" :aria-level="tree ? item.level + 1 : undefined" :aria-expanded="item.kids ? item.open : undefined" :style="{ ...(isDis(item.r, item.ri) ? { '--row-wash': 'initial' } : null), height: 'var(--bar-h)', background: pinInfo && pinInfo.sel.has(item.ri) ? 'var(--row-wash, var(--bg-inset))' : 'var(--row-wash, transparent)', transition: 'var(--t-hover)', borderBottom: pinInfo && ((pinInfo.rest > 0 && pos === pinInfo.rest - 1) || (pinInfo.unStart > 0 && pos === pinInfo.unStart - 1)) ? '1px solid var(--border-control)' : 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>
+          <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" :title="isDis(r, ri) && disabledReason ? disabledReason(r, ri) : undefined"><Checkbox :checked="selected.includes(ri)" :disabled="isDis(r, 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>
+        </template>
         <tr v-if="rows.length === 0 && $slots.empty"><td :colspan="colCount" style="padding:0"><slot name="empty" /></td></tr>
       </tbody>
     </table>

package/components/display/Tag.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-/** Small removable filter tag (full radius; sm 20 · md 24 · lg 28 tall, 12px text). Addition — distinct from Badge/ActionChip. */
+/** Small removable filter tag (full radius; sm 20 · md and lg 24 tall, 12px text). Addition — distinct from Badge/ActionChip. */
 export interface TagProps {
   children?: React.ReactNode;
   /** Size tier. Omit to inherit the enclosing region's tier (the default). */

package/components/display/Tag.jsx

@@ -3,7 +3,7 @@ import { Icon } from "../icons/Icon.jsx";
 
 const tones = { neutral: { bg: "var(--bg-hover)", fg: "var(--text-body)" }, info: { bg: "var(--info-bg)", fg: "var(--info-fg)" } };
 
-/** Small removable filter tag — distinct from Badge (status) and ActionChip (bulk action). Height follows the region's tier (sm 20 · md 24 · lg 28, --tag-h); text stays 12px. */
+/** Small removable filter tag — distinct from Badge (status) and ActionChip (bulk action). Height follows the region's tier (sm 20 · md and lg 24, --tag-h); text stays 12px. */
 export function Tag({ children, onRemove, tone = "neutral", size, style }) {
   const t = tones[tone] || tones.neutral;
   return (

package/components/display/Tag.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
 const tones = { neutral: { bg: 'var(--bg-hover)', fg: 'var(--text-body)' }, info: { bg: 'var(--info-bg)', fg: 'var(--info-fg)' } }
-// Small removable filter tag — distinct from Badge (status) and ActionChip (bulk action). Height follows the region's tier (sm 20 · md 24 · lg 28, --tag-h); text stays 12px.
+// Small removable filter tag — distinct from Badge (status) and ActionChip (bulk action). Height follows the region's tier (sm 20 · md and lg 24, --tag-h); text stays 12px.
 const props = defineProps({ tone: { type: String, default: 'neutral' }, removable: Boolean, size: String, style: Object })
 defineEmits(['remove'])
 const t = computed(() => tones[props.tone] || tones.neutral)

package/components/forms/Switch.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 /**
- * Switch — pill track at the region's tier (sm 28×16 · md 36×20 · lg 44×24), knob 4px smaller, 160ms ease-out slide. Controlled.
+ * Switch — pill track at the region's tier (sm 28×16 · md and lg 32×18), knob 4px smaller, 160ms ease-out slide. Controlled.
  * Variants: knob glyph (icon or one character), text inside the pill, captions beside it,
  * a semantic red→green tone, and an async gate that shows a spinner in the knob.
  */
@@ -8,7 +8,7 @@ export interface SwitchProps {
   checked?: boolean;
   onChange?(next: boolean): void;
   disabled?: boolean;
-  /** Size tier: sm 28×16 · md 36×20 · lg 44×24. Omit to inherit the enclosing region's tier (the default); lg is roomy enough for a knob glyph */
+  /** Size tier: sm 28×16 · md and lg 32×18. Omit to inherit the enclosing region's tier (the default); lg keeps the md track — a switch never grows past 32×18 */
   size?: "sm" | "md" | "lg";
   /** primary = action blue on / border-strong off · semantic = success on / danger off */
   tone?: "primary" | "semantic";

package/components/forms/Switch.jsx

@@ -2,12 +2,12 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
 /**
- * Switch — pill track sized by the region's tier (sm 28×16 · md 36×20 · lg 44×24), knob 4px smaller, 160ms ease-out slide.
+ * Switch — pill track sized by the region's tier (sm 28×16 · md and lg 32×18), knob 4px smaller, 160ms ease-out slide.
  * Track, knob, glyph and label all read the tier tokens (tokens/layout.css), so a Switch in a form row matches its neighbours.
  *
  * checked / onChange(next)   controlled boolean
  * disabled                   50% opacity, no pointer
- * size                       "sm" | "md" | "lg" — omit to inherit the region's tier; lg is roomy enough for knobIcon / knobText
+ * size                       "sm" | "md" | "lg" — omit to inherit the region's tier; lg keeps the md track — a switch never grows past 32×18
  * tone                       "primary" (default, action blue) | "semantic" (red off → green on)
  * onColor / offColor         explicit track colors; override tone
  * knobIcon / knobText        glyph inside the knob: string | { on, off }. knobText is ONE letter or ONE CJK character.
@@ -33,9 +33,11 @@ export function Switch({ checked = false, onChange, disabled, size, tone = "prim
   const loading = loadingProp || busy;
   if (inlinePrompt) { insideOn = insideOn ?? inlinePrompt.on; insideOff = insideOff ?? inlinePrompt.off; }
   const hasInside = insideOn != null || insideOff != null;
-  // inside text needs a wider track so the knob never covers the word: text runs at half the track height, ~.68em per character
-  const insideChars = hasInside ? Math.max(String(insideOn ?? "").length, String(insideOff ?? "").length) : 0;
-  const w = hasInside ? `max(${W}, calc(${H} * ${(1 + insideChars * .34).toFixed(2)} + 6px))` : W;
+  // inside text needs a wider track so the knob never covers the word: knob slot (track height) + text + 8px.
+  // Text is TEXT px; a CJK character is ~1em wide, a Latin one ~.68em.
+  const insideStr = [insideOn, insideOff].map((s) => String(s ?? ""));
+  const insideEm = hasInside ? Math.max(...insideStr.map((s) => s.length * (/[\u3000-\u9fff\uac00-\ud7af]/.test(s) ? 1 : .68))) : 0;
+  const w = hasInside ? `max(${W}, calc(${H} + ${TEXT} * ${insideEm.toFixed(2)} + 8px))` : W;
 
   const onTrack = onColor || (tone === "semantic" ? "var(--success)" : "var(--action-primary)");
   const offTrack = offColor || (tone === "semantic" ? "var(--danger)" : "var(--border-strong)");
@@ -78,11 +80,11 @@ export function Switch({ checked = false, onChange, disabled, size, tone = "prim
   </span>;
 
   const capBase = { fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", fontFamily: "var(--font-sans)", cursor: inert ? "default" : "pointer", userSelect: "none" };
-  if (single) return <span data-size={size} data-sw="" style={{ display: "inline-flex", alignItems: "center", gap: "var(--control-gap)", opacity: disabled ? .5 : 1, ...style }}>{pill}<span onClick={flip} style={{ ...capBase, fontWeight: "var(--weight-regular)", color: "var(--text-body)" }}>{label}</span></span>;
-  if (labelOn == null && labelOff == null) return <span data-size={size} style={{ display: "inline-flex", alignItems: "center", opacity: disabled ? .5 : 1, ...style }}>{pill}</span>;
+  if (single) return <span data-size={size} data-sw="" style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", gap: "var(--control-gap)", opacity: disabled ? .5 : 1, ...style }}>{pill}<span onClick={flip} style={{ ...capBase, fontWeight: "var(--weight-regular)", color: "var(--text-body)" }}>{label}</span></span>;
+  if (labelOn == null && labelOff == null) return <span data-size={size} style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", opacity: disabled ? .5 : 1, ...style }}>{pill}</span>;
 
   const cap = (text, active) => text == null ? null : <span style={{ ...capBase, fontWeight: active ? "var(--weight-medium)" : "var(--weight-regular)", color: active ? "var(--text-heading)" : "var(--text-muted)", transition: "color 160ms ease-out" }} onClick={flip}>{text}</span>;
-  return <span data-size={size} data-sw="" style={{ display: "inline-flex", alignItems: "center", gap: "var(--control-gap)", opacity: disabled ? .5 : 1, ...style }}>
+  return <span data-size={size} data-sw="" style={{ display: "inline-flex", alignItems: "center", verticalAlign: "middle", gap: "var(--control-gap)", opacity: disabled ? .5 : 1, ...style }}>
     {cap(labelOff, !checked)}{pill}{cap(labelOn, checked)}
   </span>;
 }

package/components/forms/Switch.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onBeforeUnmount } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Switch — pill track sized by the region's tier (sm 28×16 · md 36×20 · lg 44×24), knob 4px smaller, 160ms slide. v-model:checked.
+// Switch — pill track sized by the region's tier (sm 28×16 · md and lg 32×18), knob 4px smaller, 160ms slide. v-model:checked.
 // Geometry is CSS (tokens/layout.css --switch-w/-h), so it follows the tier without JavaScript; `size` stamps data-size to override.
 // tone "primary" | "semantic" (red off → green on); onColor/offColor override.
 // knobIcon / knobText: string | { on, off } — knobText is ONE letter or ONE CJK char.
@@ -24,8 +24,9 @@ const inert = computed(() => props.disabled || isLoading.value)
 const inOn = computed(() => props.insideOn ?? (props.inlinePrompt ? props.inlinePrompt.on : undefined))
 const inOff = computed(() => props.insideOff ?? (props.inlinePrompt ? props.inlinePrompt.off : undefined))
 const hasInside = computed(() => inOn.value != null || inOff.value != null)
-// inside text needs a wider track so the knob never covers the word: text runs at half the track height, ~.68em per character
-const width = computed(() => { if (!hasInside.value) return W; const n = Math.max((inOn.value || '').length, (inOff.value || '').length); return `max(${W}, calc(${H} * ${(1 + n * .34).toFixed(2)} + 6px))` })
+// inside text needs a wider track so the knob never covers the word: knob slot (track height) + text + 8px.
+// Text is TEXT px; a CJK character is ~1em wide, a Latin one ~.68em.
+const width = computed(() => { if (!hasInside.value) return W; const em = Math.max(...[inOn.value, inOff.value].map((s) => { s = String(s ?? ''); return s.length * (/[\u3000-\u9fff\uac00-\ud7af]/.test(s) ? 1 : .68) })); return `max(${W}, calc(${H} + ${TEXT} * ${em.toFixed(2)} + 8px))` })
 const track = computed(() => props.checked ? (props.onColor || (props.tone === 'semantic' ? 'var(--success)' : 'var(--action-primary)')) : (props.offColor || (props.tone === 'semantic' ? 'var(--danger)' : 'var(--border-strong)')))
 const pick = (v) => v && typeof v === 'object' ? (props.checked ? v.on : v.off) : v
 const glyphIcon = computed(() => pick(props.knobIcon))
@@ -47,7 +48,7 @@ const insideStyle = (side, on) => ({ position: 'absolute', top: 0, bottom: 0, [s
 const cap = (active) => ({ fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', fontFamily: 'var(--font-sans)', fontWeight: active ? 'var(--weight-medium)' : 'var(--weight-regular)', color: active ? 'var(--text-heading)' : 'var(--text-muted)', transition: 'color 160ms ease-out', cursor: inert.value ? 'default' : 'pointer', userSelect: 'none' })
 </script>
 <template>
-  <span :data-size="size" data-sw="" :style="{ display: 'inline-flex', alignItems: 'center', gap: 'var(--control-gap)', opacity: disabled ? .5 : 1, ...style }">
+  <span :data-size="size" data-sw="" :style="{ display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', gap: 'var(--control-gap)', opacity: disabled ? .5 : 1, ...style }">
     <span v-if="labelOff != null" :style="cap(!checked)" @click="flip">{{ labelOff }}</span>
     <span role="switch" :aria-checked="checked" :aria-busy="isLoading || undefined" :aria-disabled="disabled || undefined" :tabindex="inert ? -1 : 0" @click="flip" @keydown.space.prevent="flip" @keydown.enter.prevent="flip"
       :style="{ position: 'relative', display: 'inline-block', width: width, height: H, borderRadius: 'var(--radius-full)', '--sw-track': track, background: 'var(--sw-bg, var(--sw-track))', transition: 'background 160ms ease-out', cursor: inert ? (isLoading ? 'progress' : 'not-allowed') : 'pointer', flexShrink: 0, verticalAlign: 'middle', outline: 'none' }">

package/components/forms/forms.prompt.md

@@ -15,7 +15,7 @@ Form controls, split by component (each with its own specimen card covering defa
 Everything is 12px text in 36px controls; readOnly inputs go #fafafa; disabled = 50% opacity; error = red border + red helper text via `Field`'s `error` prop.
 
 
-`Switch` / `Radio` / `RadioGroup` (additions, not in the source file). Switch: the track follows the size tier (sm 28×16 · md 36×20 · lg 44×24), blue-on / border-strong-off; a knob glyph needs the lg tier (`size="lg"` only when the switch stands alone) — `knobIcon` (string or `{on,off}`) or `knobText` (ONE letter / ONE CJK char); `insideOn`/`insideOff` put 1–3 characters inside the pill; `labelOn`/`labelOff` put captions on both sides with the active one in text-heading; `tone="semantic"` = danger off → success on, only for states with consequence (a live integration, a kill switch); `beforeChange` async-gates the flip with a spinner in the knob, `loading` does the same under your control.
+`Switch` / `Radio` / `RadioGroup` (additions, not in the source file). Switch: the track follows the size tier (sm 28×16 · md and lg 32×18 — two sizes), blue-on / border-strong-off; a knob glyph needs md or lg (the sm knob is too small) — `knobIcon` (string or `{on,off}`) or `knobText` (ONE letter / ONE CJK char); `insideOn`/`insideOff` put 1–3 characters inside the pill; `labelOn`/`labelOff` put captions on both sides with the active one in text-heading; `tone="semantic"` = danger off → success on, only for states with consequence (a live integration, a kill switch); `beforeChange` async-gates the flip with a spinner in the knob, `loading` does the same under your control.
 
 ```jsx
 <Switch label="Debug Mode" checked={on} onChange={setOn}/>

package/components/icons/Icon.jsx

@@ -97,7 +97,7 @@ export const ICON_PATHS = {
   "dimension-custom_default": '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
   "dimension-entity": '<path d="M2 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><path d="M14 10h6a2 2 0 0 1 2 2v10"/><path d="M1 22h22"/><path d="M6 6h.01"/><path d="M10 6h.01"/><path d="M6 10h.01"/><path d="M10 10h.01"/><path d="M6 14h.01"/><path d="M10 14h.01"/><path d="M18 14h.01"/><path d="M18 18h.01"/><path d="M6 22v-3h4v3"/>',
   "dimension-group": '<rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/>',
-  "dimension-intercompany": '<path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/>',
+  "dimension-intercompany": '<path d="M2 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><path d="M1 22h22"/><path d="M6 6h.01"/><path d="M10 6h.01"/><path d="M6 10h.01"/><path d="M6 14h.01"/><path d="M10 10h.01"/><path d="M10 14h.01"/><path d="M6 22v-3h4v3"/><path d="M14 15h6a2 2 0 0 1 2 2v5"/><path d="M18 18.5h.01"/><path d="M16 4h6"/><path d="m20 2 2 2-2 2"/><path d="M22 9h-6"/><path d="m18 7-2 2 2 2"/>',
   "dimension-subtable": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 9v12"/><path d="M15 9v12"/>',
   "dimension-time": '<path d="M16 14v2.2l1.6 1"/><path d="M16 2v4"/><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M3 10h5"/><path d="M8 2v4"/><circle cx="16" cy="16" r="6"/>',
   "dimension-version": '<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
@@ -109,7 +109,7 @@ export const ICON_PATHS = {
   admin: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
   analytics: '<rect width="20" height="14" x="2" y="3" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="M6 7h4"/><path d="M6 10h4"/><path d="M6 13h2"/><path d="m13 13 2-3 2 1 2-4"/>',
   automation: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><polygon points="10.5 9 15 12 10.5 15 10.5 9"/>',
-  "data_integration": '<path d="m17 18-1.535 1.605a5 5 0 0 1-8-1.5"/><path d="M17 22v-4h-4"/><path d="M20.996 15.251A4.5 4.5 0 0 0 17.495 8h-1.79a7 7 0 1 0-12.709 5.607"/><path d="M7 10v4h4"/><path d="m7 14 1.535-1.605a5 5 0 0 1 8 1.5"/>',
+  "data_integration": '<ellipse cx="17" cy="7" rx="5" ry="2"/><path d="M12 7v10a5 2 0 0 0 10 0V7"/><path d="M12 12a5 2 0 0 0 10 0"/><circle cx="3" cy="5" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="19" r="2"/><path d="M5 5h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5"/><path d="M5 12h7"/>',
   "reconciliation-entity": '<path d="M2 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><path d="M14 10h6a2 2 0 0 1 2 2v10"/><path d="M1 22h22"/><path d="M6 6h.01"/><path d="M10 6h.01"/><path d="M6 10h.01"/><path d="M10 10h.01"/><path d="M6 14h.01"/><path d="M10 14h.01"/><path d="M18 14h.01"/><path d="M18 18h.01"/><path d="M6 22v-3h4v3"/>',
   "reconciliation-balance": '<path d="M13.744 17.736a6 6 0 1 1-7.48-7.48"/><path d="M15 6h1v4"/><path d="m6.134 14.768.866-.5 2 3.464"/><circle cx="16" cy="8" r="6"/>',
   scenario: '<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M11 18H8a2 2 0 0 1-2-2V9"/>',
@@ -166,6 +166,7 @@ export const ICON_PATHS = {
   "task-etl": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><ellipse cx="12" cy="10.5" rx="3.5" ry="1.5"/><path d="M8.5 10.5v6c0 .83 1.57 1.5 3.5 1.5s3.5-.67 3.5-1.5v-6"/><path d="M8.5 13.5c0 .83 1.57 1.5 3.5 1.5s3.5-.67 3.5-1.5"/>',
   "task-shared": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><circle cx="15.3" cy="6.8" r=".75"/><circle cx="9.7" cy="10" r=".75"/><circle cx="15.3" cy="13.2" r=".75"/><path d="m11.35 9.06 2.3-1.32"/><path d="m11.35 10.94 2.3 1.32"/></g>',
   "task-intercompany": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><path d="M8.5 14V6.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V14"/><path d="M13.5 9.5H16a1 1 0 0 1 1 1V14"/><path d="M7.5 14h10"/><path d="M11 8.5h.01"/><path d="M11 11h.01"/></g>',
+  ownership: '<path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 16 6 6"/><circle cx="9" cy="5" r="3"/><path d="M12 5h9"/><path d="M18 5v2.5"/><path d="M21 5v2"/>',
 };
 
 import { FEATHER_PATHS } from "./feather-paths.js";