@keyfunc/keybricks-ds 1.0.4 → 2.1.1

package/components/data/Spreadsheet.jsx

@@ -43,7 +43,8 @@ function fmt(val, t, currency) {
 }
 
 /** Excel-style spreadsheet: toolbar, formula bar (name box + fx), lettered/numbered frozen headers, click + shift-click range selection, double-click editing, =SUM()/AVERAGE()-style formulas, sheet tabs and a Sum/Avg/Count status bar. */
-export function Spreadsheet({ data = [], rows, cols, colWidths = [], defaultColWidth = 92, currency = "$", defaultActive = "A1", sheets = ["Sheet1"], activeSheet, toolbar = true, formulaBar = true, statusBar = true, height, onChange, style }) {
+/* A size region that defaults to sm: a spreadsheet is the densest surface in the system — 24px toolbar controls, 12px text, 28px cells. */
+export function Spreadsheet({ data = [], rows, cols, colWidths = [], defaultColWidth = 92, currency = "$", defaultActive = "A1", sheets = ["Sheet1"], activeSheet, toolbar = true, formulaBar = true, statusBar = true, height, size = "sm", onChange, style }) {
   const nR = Math.max(rows || 0, data.length, 8), nC = Math.max(cols || 0, ...data.map(r => r.length), 6);
   const [cells, setCells] = React.useState(() => Array.from({ length: nR }, (_, r) => Array.from({ length: nC }, (_, c) => norm(data[r] && data[r][c]))));
   const a0 = refRC(defaultActive) || { r: 0, c: 0 };
@@ -64,17 +65,17 @@ export function Spreadsheet({ data = [], rows, cols, colWidths = [], defaultColW
   const setType = (label) => { const t = { Automatic: undefined, Number: "number", Currency: "currency", Percent: "percent" }[label]; const next = cells.map(row => row.map(cell => ({ ...cell }))); for (let r = lo.r; r <= hi.r; r++) for (let c = lo.c; c <= hi.c; c++) { if (t) next[r][c].t = t; else delete next[r][c].t; } setCells(next); };
   const widths = [46]; for (let c = 0; c < nC; c++) widths.push(colWidths[c] || defaultColWidth);
   const hdr = { position: "sticky", top: 0, zIndex: 3, background: "var(--bg-inset)", borderRight: "1px solid var(--border-control)", borderBottom: "1px solid var(--border-control)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-secondary)", height: 26, boxSizing: "border-box", userSelect: "none" };
-  const tbBtn = (label, k, st) => <button key={label} type="button" onClick={() => setFlag(k)} style={{ width: 24, height: 24, border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", background: cur[k] ? "var(--bg-active)" : "transparent", color: "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: 12.5, ...st }}>{label}</button>;
+  const tbBtn = (label, k, st) => <button key={label} type="button" data-wash={cur[k] ? undefined : ""} onClick={() => setFlag(k)} style={{ width: "var(--control-h)", height: "var(--control-h)", border: "none", borderRadius: "var(--radius-md)", cursor: "pointer", background: cur[k] ? "var(--bg-active)" : "var(--wash, transparent)", color: "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", ...st }}>{label}</button>;
   return (
-    <div style={{ border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--bg-surface)", boxSizing: "border-box", ...style }}>
-      {toolbar && <div style={{ height: 36, display: "flex", alignItems: "center", gap: 2, padding: "0 8px", borderBottom: "1px solid var(--border-subtle)" }}>
-        <IconButton icon="undo-2" size="sm" muted label="Undo" /><IconButton icon="redo-2" size="sm" muted label="Redo" />
+    <div data-size={size} style={{ border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--bg-surface)", boxSizing: "border-box", ...style }}>
+      {toolbar && <div style={{ height: "var(--bar-card-h)", display: "flex", alignItems: "center", gap: 2, padding: "0 var(--edge-pad)", boxSizing: "border-box", borderBottom: "1px solid var(--border-subtle)" }}>
+        <IconButton icon="undo-2" muted label="Undo" /><IconButton icon="redo-2" muted label="Redo" />
         <span style={{ width: 1, height: 16, background: "var(--border-control)", margin: "0 6px" }}></span>
         {tbBtn("B", "b", { fontWeight: 700 })}{tbBtn("I", "i", { fontStyle: "italic" })}{tbBtn("U", "u", { textDecoration: "underline" })}
         <span style={{ width: 1, height: 16, background: "var(--border-control)", margin: "0 6px" }}></span>
-        <Select size="sm" options={["Automatic", "Number", "Currency", "Percent"]} value={{ number: "Number", currency: "Currency", percent: "Percent" }[cur.t] || "Automatic"} onChange={setType} style={{ width: 110 }} />
+        <Select options={["Automatic", "Number", "Currency", "Percent"]} value={{ number: "Number", currency: "Currency", percent: "Percent" }[cur.t] || "Automatic"} onChange={setType} style={{ width: 110 }} />
       </div>}
-      {formulaBar && <div style={{ height: 32, display: "flex", alignItems: "center", borderBottom: "1px solid var(--border-control)" }}>
+      {formulaBar && <div style={{ height: "var(--bar-h)", display: "flex", alignItems: "center", borderBottom: "1px solid var(--border-control)" }}>
         <span style={{ width: 72, alignSelf: "stretch", display: "flex", alignItems: "center", justifyContent: "center", borderRight: "1px solid var(--border-control)", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{multi ? colName(lo.c) + (lo.r + 1) + ":" + colName(hi.c) + (hi.r + 1) : colName(active.c) + (active.r + 1)}</span>
         <span style={{ padding: "0 10px", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", fontStyle: "italic", color: "var(--text-muted)", borderRight: "1px solid var(--border-subtle)", alignSelf: "stretch", display: "flex", alignItems: "center" }}>fx</span>
         <input value={editing === "fx" ? draft : rawOf(cur)} onFocus={() => { setEditing("fx"); setDraft(rawOf(cur)); }} onChange={(e) => setDraft(e.target.value)} onBlur={() => { if (editing === "fx") { commit(active.r, active.c, draft); setEditing(null); } }} onKeyDown={(e) => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") { setEditing(null); e.target.blur(); } }} style={{ flex: 1, border: "none", outline: "none", background: "transparent", padding: "0 10px", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-primary)" }} />
@@ -91,17 +92,17 @@ export function Spreadsheet({ data = [], rows, cols, colWidths = [], defaultColW
               const isActive = active.r === r && active.c === c;
               const isEdit = editing && editing !== "fx" && editing.r === r && editing.c === c;
               return <span key={r + "," + c} onMouseDown={(e) => pick(r, c, e)} onDoubleClick={() => { setEditing({ r, c }); setDraft(rawOf(cell)); }}
-                style={{ position: "relative", height: 28, boxSizing: "border-box", borderRight: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: cell.align || (isNum ? "flex-end" : "flex-start"), padding: "0 8px", cursor: "cell", background: isActive ? "var(--bg-surface)" : inRange(r, c) ? "var(--soft-bg)" : "var(--bg-surface)", boxShadow: isActive ? "inset 0 0 0 2px var(--action-primary)" : "none", zIndex: isActive ? 1 : 0, fontFamily: isNum ? "var(--font-mono)" : "var(--font-sans)", fontSize: isNum ? 11.5 : "var(--text-sm)", color: v === "#ERROR" ? "var(--danger)" : "var(--text-primary)", fontWeight: cell.b ? 600 : "var(--weight-regular)", fontStyle: cell.i ? "italic" : "normal", textDecoration: cell.u ? "underline" : "none", whiteSpace: "nowrap", overflow: "hidden", userSelect: "none" }}>
+                style={{ position: "relative", height: 28, boxSizing: "border-box", borderRight: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: cell.align || (isNum ? "flex-end" : "flex-start"), padding: "0 8px", cursor: "cell", background: isActive ? "var(--bg-surface)" : inRange(r, c) ? "var(--soft-bg)" : "var(--bg-surface)", boxShadow: isActive ? "inset 0 0 0 2px var(--action-primary)" : "none", zIndex: isActive ? 1 : 0, fontFamily: isNum ? "var(--font-mono)" : "var(--font-sans)", fontSize: "var(--control-text)", fontVariantNumeric: "tabular-nums", color: v === "#ERROR" ? "var(--danger)" : "var(--text-primary)", fontWeight: cell.b ? 600 : "var(--weight-regular)", fontStyle: cell.i ? "italic" : "normal", textDecoration: cell.u ? "underline" : "none", whiteSpace: "nowrap", overflow: "hidden", userSelect: "none" }}>
                 {isEdit ? <input autoFocus value={draft} onChange={(e) => setDraft(e.target.value)} onBlur={() => { commit(r, c, draft); setEditing(null); }} onKeyDown={(e) => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") setEditing(null); }} style={{ position: "absolute", inset: 0, border: "none", outline: "none", padding: "0 8px", fontFamily: "inherit", fontSize: "inherit", background: "var(--bg-surface)", color: "var(--text-primary)" }} /> : fmt(v, cell.t, currency)}
                 {isActive && !isEdit && <span style={{ position: "absolute", right: -3, bottom: -3, width: 6, height: 6, background: "var(--action-primary)", border: "1px solid var(--bg-surface)", cursor: "crosshair", zIndex: 2 }}></span>}
               </span>;
             })])}
         </div>
       </div>
-      {statusBar && <div style={{ height: 32, display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--border-control)", background: "var(--bg-inset)", paddingRight: 12 }}>
+      {statusBar && <div style={{ height: "var(--bar-h)", display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--border-control)", background: "var(--bg-inset)", paddingRight: 12 }}>
         <div style={{ display: "flex", alignSelf: "stretch", alignItems: "stretch" }}>
-          {sheets.map(s => <button key={s} type="button" onClick={() => setSheet(s)} style={{ border: "none", borderRight: "1px solid var(--border-subtle)", padding: "0 16px", cursor: "pointer", background: sheet === s ? "var(--bg-surface)" : "transparent", color: sheet === s ? "var(--text-heading)" : "var(--text-secondary)", fontFamily: "var(--font-sans)", fontWeight: sheet === s ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--text-sm)", boxShadow: sheet === s ? "inset 0 2px 0 var(--action-primary)" : "none" }}>{s}</button>)}
-          <span style={{ display: "flex", alignItems: "center", padding: "0 6px" }}><IconButton icon="plus" size="xs" muted label="Add sheet" /></span>
+          {sheets.map(s => <button key={s} type="button" data-ink={sheet === s ? undefined : ""} onClick={() => setSheet(s)} style={{ border: "none", borderRight: "1px solid var(--border-subtle)", padding: "0 16px", cursor: "pointer", background: sheet === s ? "var(--bg-surface)" : "transparent", color: sheet === s ? "var(--text-heading)" : "var(--ink, var(--text-secondary))", fontFamily: "var(--font-sans)", fontWeight: sheet === s ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--control-text)", boxShadow: sheet === s ? "inset 0 2px 0 var(--action-primary)" : "none" }}>{s}</button>)}
+          <span style={{ display: "flex", alignItems: "center", padding: "0 6px" }}><IconButton icon="plus" muted label="Add sheet" /></span>
         </div>
         <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{stats ? "Sum " + fmt(stats.sum, cur.t, currency) + "   Avg " + fmt(stats.avg, cur.t, currency) + "   Count " + stats.count : "100%"}</span>
       </div>}

package/components/data/Spreadsheet.vue

@@ -4,7 +4,8 @@ import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
 import KSelect from '../forms/Select.vue'
 // Excel-style spreadsheet: toolbar, formula bar (name box + fx), frozen lettered/numbered headers, click + shift-click range selection, double-click editing, =SUM()/AVERAGE() formulas, sheet tabs, Sum/Avg/Count status bar.
-const props = defineProps({ data: { type: Array, default: () => [] }, rows: Number, cols: Number, colWidths: { type: Array, default: () => [] }, defaultColWidth: { type: Number, default: 92 }, currency: { type: String, default: '$' }, defaultActive: { type: String, default: 'A1' }, sheets: { type: Array, default: () => ['Sheet1'] }, toolbar: { type: Boolean, default: true }, formulaBar: { type: Boolean, default: true }, statusBar: { type: Boolean, default: true }, height: [Number, String], style: Object })
+const props = defineProps({ data: { type: Array, default: () => [] }, rows: Number, cols: Number, colWidths: { type: Array, default: () => [] }, defaultColWidth: { type: Number, default: 92 }, currency: { type: String, default: '$' }, defaultActive: { type: String, default: 'A1' }, sheets: { type: Array, default: () => ['Sheet1'] }, toolbar: { type: Boolean, default: true }, formulaBar: { type: Boolean, default: true }, statusBar: { type: Boolean, default: true }, height: [Number, String], size: { type: String, default: 'sm' }, style: Object })
+// A size region that defaults to sm: a spreadsheet is the densest surface in the system — 24px toolbar controls, 12px text, 28px cells.
 const emit = defineEmits(['change'])
 
 const colName = (i) => { let s = ''; i++; while (i > 0) { s = String.fromCharCode(64 + ((i - 1) % 26 + 1)) + s; i = Math.floor((i - 1) / 26) } return s }
@@ -54,17 +55,17 @@ const hdr = { position: 'sticky', top: 0, zIndex: 3, background: 'var(--bg-inset
 const hl = { background: 'var(--soft-bg)', color: 'var(--action-primary)' }
 </script>
 <template>
-  <div :style="{ border: '1px solid var(--border-control)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-surface)', boxSizing: 'border-box', ...style }">
-    <div v-if="toolbar" style="height:36px;display:flex;align-items:center;gap:2px;padding:0 8px;border-bottom:1px solid var(--border-subtle)">
-      <IconButton icon="undo-2" size="sm" muted label="Undo" /><IconButton icon="redo-2" size="sm" muted label="Redo" />
+  <div :data-size="size" :style="{ border: '1px solid var(--border-control)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-surface)', boxSizing: 'border-box', ...style }">
+    <div v-if="toolbar" style="height:var(--bar-card-h);display:flex;align-items:center;gap:2px;padding:0 var(--edge-pad);box-sizing:border-box;border-bottom:1px solid var(--border-subtle)">
+      <IconButton icon="undo-2" muted label="Undo" /><IconButton icon="redo-2" muted label="Redo" />
       <span style="width:1px;height:16px;background:var(--border-control);margin:0 6px" />
-      <button type="button" @click="setFlag('b')" :style="{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: cur.b ? 'var(--bg-active)' : 'transparent', color: 'var(--text-body)', fontWeight: 700 }">B</button>
-      <button type="button" @click="setFlag('i')" :style="{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: cur.i ? 'var(--bg-active)' : 'transparent', color: 'var(--text-body)', fontStyle: 'italic' }">I</button>
-      <button type="button" @click="setFlag('u')" :style="{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: cur.u ? 'var(--bg-active)' : 'transparent', color: 'var(--text-body)', textDecoration: 'underline' }">U</button>
+      <button type="button" :data-wash="cur.b ? undefined : ''" @click="setFlag('b')" :style="{ width: 'var(--control-h)', height: 'var(--control-h)', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', background: cur.b ? 'var(--bg-active)' : 'var(--wash, transparent)', color: 'var(--text-body)', fontWeight: 700 }">B</button>
+      <button type="button" :data-wash="cur.i ? undefined : ''" @click="setFlag('i')" :style="{ width: 'var(--control-h)', height: 'var(--control-h)', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', background: cur.i ? 'var(--bg-active)' : 'var(--wash, transparent)', color: 'var(--text-body)', fontStyle: 'italic' }">I</button>
+      <button type="button" :data-wash="cur.u ? undefined : ''" @click="setFlag('u')" :style="{ width: 'var(--control-h)', height: 'var(--control-h)', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', background: cur.u ? 'var(--bg-active)' : 'var(--wash, transparent)', color: 'var(--text-body)', textDecoration: 'underline' }">U</button>
       <span style="width:1px;height:16px;background:var(--border-control);margin:0 6px" />
-      <KSelect size="sm" :options="['Automatic','Number','Currency','Percent']" :model-value="{ number: 'Number', currency: 'Currency', percent: 'Percent' }[cur.t] || 'Automatic'" @update:modelValue="setType" style="width:110px" />
+      <KSelect :options="['Automatic','Number','Currency','Percent']" :model-value="{ number: 'Number', currency: 'Currency', percent: 'Percent' }[cur.t] || 'Automatic'" @update:modelValue="setType" style="width:110px" />
     </div>
-    <div v-if="formulaBar" style="height:32px;display:flex;align-items:center;border-bottom:1px solid var(--border-control)">
+    <div v-if="formulaBar" style="height:var(--bar-h);display:flex;align-items:center;border-bottom:1px solid var(--border-control)">
       <span style="width:72px;align-self:stretch;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border-control);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ multi ? colName(lo.c) + (lo.r + 1) + ':' + colName(hi.c) + (hi.r + 1) : colName(active.c) + (active.r + 1) }}</span>
       <span style="padding:0 10px;font-family:var(--font-mono);font-size:var(--text-xs);font-style:italic;color:var(--text-muted);border-right:1px solid var(--border-subtle);align-self:stretch;display:flex;align-items:center">fx</span>
       <input :value="editing === 'fx' ? draft : rawOf(cur)" @focus="editing = 'fx'; draft = rawOf(cur)" @input="draft = $event.target.value" @blur="editing === 'fx' && (commit(active.r, active.c, draft), editing = null)" @keydown.enter="$event.target.blur()" @keydown.esc="editing = null; $event.target.blur()" style="flex:1;border:none;outline:none;background:transparent;padding:0 10px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-primary)" />
@@ -76,7 +77,7 @@ const hl = { background: 'var(--soft-bg)', color: 'var(--action-primary)' }
         <template v-for="(row, r) in cells" :key="r">
           <span :style="{ ...hdr, position: 'sticky', left: 0, top: 'auto', zIndex: 2, height: '28px', ...(r >= lo.r && r <= hi.r ? hl : null) }">{{ r + 1 }}</span>
           <span v-for="(cell, c) in row" :key="r + ',' + c" @mousedown="pick(r, c, $event)" @dblclick="editing = { r, c }; draft = rawOf(cell)"
-            :style="{ position: 'relative', height: '28px', boxSizing: 'border-box', borderRight: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', justifyContent: cell.align || (typeof evalCell(cells, cell) === 'number' ? 'flex-end' : 'flex-start'), padding: '0 8px', cursor: 'cell', background: inRange(r, c) && !(active.r === r && active.c === c) ? 'var(--soft-bg)' : 'var(--bg-surface)', boxShadow: active.r === r && active.c === c ? 'inset 0 0 0 2px var(--action-primary)' : 'none', fontFamily: typeof evalCell(cells, cell) === 'number' ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: typeof evalCell(cells, cell) === 'number' ? '11.5px' : 'var(--text-sm)', color: evalCell(cells, cell) === '#ERROR' ? 'var(--danger)' : 'var(--text-primary)', fontWeight: cell.b ? 600 : 'var(--weight-regular)', fontStyle: cell.i ? 'italic' : 'normal', textDecoration: cell.u ? 'underline' : 'none', whiteSpace: 'nowrap', overflow: 'hidden', userSelect: 'none' }">
+            :style="{ position: 'relative', height: '28px', boxSizing: 'border-box', borderRight: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', justifyContent: cell.align || (typeof evalCell(cells, cell) === 'number' ? 'flex-end' : 'flex-start'), padding: '0 8px', cursor: 'cell', background: inRange(r, c) && !(active.r === r && active.c === c) ? 'var(--soft-bg)' : 'var(--bg-surface)', boxShadow: active.r === r && active.c === c ? 'inset 0 0 0 2px var(--action-primary)' : 'none', fontFamily: typeof evalCell(cells, cell) === 'number' ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: 'var(--control-text)', fontVariantNumeric: 'tabular-nums', color: evalCell(cells, cell) === '#ERROR' ? 'var(--danger)' : 'var(--text-primary)', fontWeight: cell.b ? 600 : 'var(--weight-regular)', fontStyle: cell.i ? 'italic' : 'normal', textDecoration: cell.u ? 'underline' : 'none', whiteSpace: 'nowrap', overflow: 'hidden', userSelect: 'none' }">
             <input v-if="editing && editing !== 'fx' && editing.r === r && editing.c === c" autofocus :value="draft" @input="draft = $event.target.value" @blur="commit(r, c, draft); editing = null" @keydown.enter="$event.target.blur()" @keydown.esc="editing = null" style="position:absolute;inset:0;border:none;outline:none;padding:0 8px;font:inherit;background:var(--bg-surface);color:var(--text-primary)" />
             <template v-else>{{ fmt(evalCell(cells, cell), cell.t, currency) }}</template>
             <span v-if="active.r === r && active.c === c && !editing" style="position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;background:var(--action-primary);border:1px solid var(--bg-surface);cursor:crosshair;z-index:2" />
@@ -84,10 +85,10 @@ const hl = { background: 'var(--soft-bg)', color: 'var(--action-primary)' }
         </template>
       </div>
     </div>
-    <div v-if="statusBar" style="height:32px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-control);background:var(--bg-inset);padding-right:12px">
+    <div v-if="statusBar" style="height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-control);background:var(--bg-inset);padding-right:12px">
       <div style="display:flex;align-self:stretch;align-items:stretch">
-        <button v-for="s in sheets" :key="s" type="button" @click="sheet = s" :style="{ border: 'none', borderRight: '1px solid var(--border-subtle)', padding: '0 16px', cursor: 'pointer', background: sheet === s ? 'var(--bg-surface)' : 'transparent', color: sheet === s ? 'var(--text-heading)' : 'var(--text-secondary)', fontFamily: 'var(--font-sans)', fontWeight: sheet === s ? 'var(--weight-medium)' : 'var(--weight-regular)', fontSize: 'var(--text-sm)', boxShadow: sheet === s ? 'inset 0 2px 0 var(--action-primary)' : 'none' }">{{ s }}</button>
-        <span style="display:flex;align-items:center;padding:0 6px"><IconButton icon="plus" size="xs" muted label="Add sheet" /></span>
+        <button v-for="s in sheets" :key="s" type="button" :data-ink="sheet === s ? undefined : ''" @click="sheet = s" :style="{ border: 'none', borderRight: '1px solid var(--border-subtle)', padding: '0 16px', cursor: 'pointer', background: sheet === s ? 'var(--bg-surface)' : 'transparent', color: sheet === s ? 'var(--text-heading)' : 'var(--ink, var(--text-secondary))', fontFamily: 'var(--font-sans)', fontWeight: sheet === s ? 'var(--weight-medium)' : 'var(--weight-regular)', fontSize: 'var(--control-text)', boxShadow: sheet === s ? 'inset 0 2px 0 var(--action-primary)' : 'none' }">{{ s }}</button>
+        <span style="display:flex;align-items:center;padding:0 6px"><IconButton icon="plus" muted label="Add sheet" /></span>
       </div>
       <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)">{{ stats ? 'Sum ' + fmt(stats.sum, cur.t, currency) + '   Avg ' + fmt(stats.avg, cur.t, currency) + '   Count ' + stats.count : '100%' }}</span>
     </div>

package/components/data/Table.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+/**
+ * Hairline table — --bg-table-header header tint, one step below --bg-app so it reads on grey pages; one rule weight (--border-subtle) for header rule and row separators alike.
+ * The table is a size region: rows are the tier's bar height (sm 32 · md 40 · lg 44), cells and header share the tier's control text (header in weight 600, text-secondary, sentence case), and every control rendered inside a cell takes the same tier.
+ * @startingPoint section="Data" subtitle="Comparison / preview tables with mono cells" viewport="700x300"
+ */
+export interface DataTableColumn {
+  key: string;
+  label: string;
+  width?: number | string;
+  /** Lower bound while resizing (default 48) */
+  minWidth?: number;
+  /** Menlo cell at the row's text size with tabular figures (config codes, amounts) */
+  mono?: boolean;
+  align?: "left" | "right" | "center";
+  render?: (value: any, row: any, index: number) => React.ReactNode;
+}
+export interface DataTableProps {
+  columns?: DataTableColumn[];
+  rows?: Record<string, any>[];
+  /** Size tier of the table region: sm 32px rows / 12px text (dense grids, preview drawers) · md 40px / 14px (default) · lg 44px / 14px. Omit to inherit the enclosing region. */
+  size?: "sm" | "md" | "lg";
+  /** Alias of size="sm", kept for 1.x callers */
+  dense?: boolean;
+  /** Leading checkbox column */
+  selectable?: boolean;
+  selected?: number[];
+  /** onToggle("all"|rowIndex, checked) */
+  onToggle?: (which: number | "all", checked: boolean) => void;
+  headerBorder?: boolean;
+  /** Draws its own rounded card frame (border-card, radius-lg) and drops the header-top and last-row rules that would double it. Use instead of wrapping the table in a bordered div. */
+  bordered?: boolean;
+  /** For a table placed flush inside a container that already has a border (Card pad={false}): drops only the header's top rule. */
+  framed?: boolean;
+  /** Short divider between header cells; hover darkens it, drag sets that column's width. Uses table-layout: fixed. */
+  resizable?: boolean;
+  /** Controlled widths by column key (px). Omit to let the table keep them locally. */
+  columnWidths?: Record<string, number>;
+  /** Fires on every drag frame with the new px width. Vue: `@column-resize`. */
+  onColumnResize?: (key: string, width: number) => void;
+  /** Rendered inside the table (full-width cell) when rows is empty — an EmptyState or a muted line. Vue: `#empty` slot. */
+  empty?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function Table(props: DataTableProps): JSX.Element;
+/** @deprecated renamed to Table in 1.0.6 — still exported in 2.x, removed in 3.0 */
+export declare const DataTable: typeof Table;

package/components/data/Table.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Checkbox } from "../forms/Checkbox.jsx";
+
+/**
+ * Keybricks table. columns: [{key,label,width,minWidth,mono,align,render}].
+ * 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, 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.
+ * 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/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 }) {
+  const tier = size || (dense ? "sm" : undefined);
+  const flushTop = bordered || framed;
+  const colCount = columns.length + (selectable ? 1 : 0);
+  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
+  const thRefs = React.useRef({});
+  const widths = columnWidths || localW;
+  const widthOf = (c) => 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);
+    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 }));
+    };
+    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";
+    window.addEventListener("mousemove", move); window.addEventListener("mouseup", up);
+  };
+
+  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)", 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 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;
+            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}
+                {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>
+                ) : null}
+              </th>
+            );
+          })}
+        </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}
+            {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>
+            ))}
+          </tr>
+        ))}
+        {rows.length === 0 && empty ? <tr><td colSpan={colCount} style={{ padding: 0 }}>{empty}</td></tr> : null}
+      </tbody>
+    </table>
+  );
+  if (!bordered) return table;
+  return <div data-size={tier} style={{ background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", overflow: "hidden", ...style }}>{table}</div>;
+}

package/components/data/Table.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { px } from '../px.js'
+import { ref, computed, reactive } from 'vue'
+import Checkbox from '../forms/Checkbox.vue'
+// Keybricks table. columns: [{key,label,width,minWidth,mono,align,render}].
+// 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,
+// 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.
+// 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.
+// #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 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 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)
+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
+  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 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)
+}
+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)' } }
+// 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)' } }
+</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 }}
+            <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>
+          </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>
+        <tr v-if="rows.length === 0 && $slots.empty"><td :colspan="colCount" style="padding:0"><slot name="empty" /></td></tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/components/data/data.prompt.md

@@ -1,7 +1,7 @@
-Data lists: `DataTable` (hairline table, mono cells, selectable, dense preview mode) 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) and `ListRow` (expandable workflow rows in a `Card pad={false}`).
 
 ```jsx
-<DataTable selectable columns={[
+<Table selectable columns={[
   {key:"module",label:"Module"},
   {key:"code",label:"Code",mono:true},
   {key:"cur",label:"Current Value"},
@@ -10,7 +10,7 @@ Data lists: `DataTable` (hairline table, mono cells, selectable, dense preview m
 <ListRow icon="chart-line" title="Business Analysis" meta="1 document" trailing="1 item"/>
 ```
 
-dense mode = 29px rows/11px headers for the pipeline data-preview drawer.
+`size="sm"` (the 1.x `dense`) = 32px rows / 12px text for the pipeline data-preview drawer; md = 40px rows / 14px text; lg = 44 / 14. Header cells are the same size as body cells in weight 600, sentence case, no letter-spacing; mono cells keep the row's size with tabular figures.
 
 `Pagination` (addition) sits under a table:
 

package/components/display/Avatar.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { px } from '../px.js'
 import { computed } from 'vue'
 const palette = ['var(--cat-join)', 'var(--cat-source)', 'var(--cat-transform)', 'var(--cat-merge)', 'var(--cat-output)']
 function initials(name = '') {
@@ -12,6 +13,6 @@ const props = defineProps({ name: { type: String, default: '' }, src: String, si
 const hue = computed(() => palette[[...props.name].reduce((a, c) => a + c.charCodeAt(0), 0) % palette.length])
 </script>
 <template>
-  <img v-if="src" :src="src" :alt="name" :style="{ width: size, height: size, borderRadius: 'var(--radius-full)', objectFit: 'cover', flexShrink: 0, ...style }" />
-  <span v-else :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 }">{{ initials(name) }}</span>
+  <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>
 </template>

package/components/display/AvatarGroup.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { px } from '../px.js'
 import { computed } from 'vue'
 import Avatar from './Avatar.vue'
 const props = defineProps({ names: { type: Array, default: () => [] }, size: { type: Number, default: 24 }, max: { type: Number, default: 4 }, style: Object })
@@ -7,7 +8,7 @@ const rest = computed(() => props.names.length - shown.value.length)
 </script>
 <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 ? -8 : 0, boxShadow: 'var(--ring-surface)' }" />
-    <span v-if="rest > 0" :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>
+    <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>
   </div>
 </template>

package/components/display/Badge.vue

@@ -9,5 +9,5 @@ const tones = {
 defineProps({ tone: { type: String, default: 'neutral' }, style: Object })
 </script>
 <template>
-  <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 }"><slot /></span>
+  <span :style="{ display: 'inline-flex', alignItems: 'center', height: '20px', 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 }"><slot /></span>
 </template>

package/components/display/Divider.vue

@@ -3,9 +3,9 @@
 defineProps({ label: String, vertical: Boolean, style: Object })
 </script>
 <template>
-  <span v-if="vertical" :style="{ width: 1, alignSelf: 'stretch', background: 'var(--border-subtle)', ...style }" />
-  <div v-else-if="!label" :style="{ height: 1, background: 'var(--border-subtle)', ...style }" />
-  <div v-else :style="{ display: 'flex', alignItems: 'center', gap: 12, ...style }">
+  <span v-if="vertical" :style="{ width: '1px', alignSelf: 'stretch', background: 'var(--border-subtle)', ...style }" />
+  <div v-else-if="!label" :style="{ height: '1px', background: 'var(--border-subtle)', ...style }" />
+  <div v-else :style="{ display: 'flex', alignItems: 'center', gap: '12px', ...style }">
     <div style="flex:1;height:1px;background:var(--border-subtle)" />
     <span style="font-family:var(--font-sans);font-size:var(--text-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted);white-space:nowrap">{{ label }}</span>
     <div style="flex:1;height:1px;background:var(--border-subtle)" />

package/components/display/Donut.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { px } from '../px.js'
 import { computed } from 'vue'
 const props = defineProps({ size: { type: Number, default: 128 }, thickness: { type: Number, default: 7.68 }, segments: Array, value: { type: Number, default: 75 }, label: [String, Number], style: Object })
 const R = computed(() => props.size / 2 - props.thickness / 2 - props.size * .02)
@@ -7,11 +8,11 @@ const segs = computed(() => props.segments || [{ value: props.value, color: 'var
 const arcs = computed(() => { let offset = 0; return segs.value.map(s => { const len = (s.value / 100) * C.value; const a = { ...s, len, offset }; offset += len; return a }) })
 </script>
 <template>
-  <div :style="{ position: 'relative', width: size, height: size, ...style }">
+  <div :style="{ position: 'relative', width: px(size), height: px(size), ...style }">
     <svg :width="size" :height="size" style="transform:rotate(-90deg)">
       <circle :cx="size / 2" :cy="size / 2" :r="R" fill="none" stroke="var(--track)" :stroke-width="thickness" />
       <circle v-for="(s, i) in arcs" :key="i" :cx="size / 2" :cy="size / 2" :r="R" fill="none" :stroke="s.color" :stroke-width="thickness" :stroke-dasharray="`${s.len} ${C - s.len}`" :stroke-dashoffset="-s.offset" stroke-linecap="butt" />
     </svg>
-    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:var(--weight-light);font-size:20px;letter-spacing:var(--tracking-xl);color:var(--text-primary)">{{ label != null ? label : `${value}%` }}</div>
+    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-lg);letter-spacing:var(--tracking-lg);color:var(--text-primary)">{{ label != null ? label : `${value}%` }}</div>
   </div>
 </template>

package/components/display/IconTile.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { px } from '../px.js'
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
 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 } }
@@ -7,7 +8,7 @@ const t = computed(() => dims[props.kind])
 const tinted = computed(() => props.kind !== 'row')
 </script>
 <template>
-  <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 }">
+  <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>
 </template>

package/components/display/Kbd.vue

@@ -3,7 +3,7 @@
 defineProps({ keys: { type: Array, default: () => [] }, style: Object })
 </script>
 <template>
-  <span :style="{ display: 'inline-flex', gap: 3, ...style }">
+  <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>
 </template>

package/components/display/ProgressBar.jsx

@@ -35,7 +35,7 @@ export function Donut({ size = 128, thickness = 7.68, segments, value = 75, labe
           return el;
         })}
       </svg>
-      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-light)", fontSize: 20, letterSpacing: "var(--tracking-xl)", color: "var(--text-primary)" }}>{label != null ? label : `${value}%`}</div>
+      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-light)", fontSize: "var(--text-lg)", letterSpacing: "var(--tracking-lg)", color: "var(--text-primary)" }}>{label != null ? label : `${value}%`}</div>
     </div>
   );
 }

package/components/display/ProgressBar.vue

@@ -3,7 +3,7 @@
 defineProps({ label: String, value: { type: Number, default: 50 }, color: { type: String, default: 'var(--chart-blue)' }, showValue: { type: Boolean, default: true }, style: Object })
 </script>
 <template>
-  <div :style="{ display: 'flex', flexDirection: 'column', gap: 4, ...style }">
+  <div :style="{ display: 'flex', flexDirection: 'column', gap: '4px', ...style }">
     <div v-if="label != null" style="display:flex;justify-content:space-between;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base)">
       <span style="color:var(--text-body)">{{ label }}</span>
       <span v-if="showValue" style="color:var(--text-heading)">{{ value }}%</span>

package/components/display/StatCard.vue

@@ -3,7 +3,7 @@ import Card from './Card.vue'
 defineProps({ label: String, value: [String, Number], dense: Boolean, style: Object })
 </script>
 <template>
-  <Card :dense="dense" :style="{ display: 'flex', flexDirection: 'column', gap: 12, ...style }">
+  <Card :dense="dense" :style="{ display: 'flex', flexDirection: 'column', gap: '12px', ...style }">
     <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-secondary)">{{ label }}</span>
     <slot />
     <span v-if="value != null" style="font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num);line-height:var(--leading-num);letter-spacing:var(--tracking-num);color:var(--text-primary)">{{ value }}</span>

package/components/display/Tag.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
-/** Small removable filter tag (22px, full radius). Addition — distinct from Badge/ActionChip. */
+/** Small removable filter tag (full radius; sm 20 · md 24 · lg 28 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). */
+  size?: "sm" | "md" | "lg";
   onRemove?: () => void;
   tone?: "neutral" | "info";
   style?: React.CSSProperties;

package/components/display/Tag.jsx

@@ -3,13 +3,13 @@ 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). */
-export function Tag({ children, onRemove, tone = "neutral", style }) {
+/** 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. */
+export function Tag({ children, onRemove, tone = "neutral", size, style }) {
   const t = tones[tone] || tones.neutral;
   return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 4, height: 22, padding: onRemove ? "0 6px 0 10px" : "0 10px", borderRadius: "var(--radius-full)", background: t.bg, color: t.fg, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: "var(--weight-medium)", letterSpacing: "var(--tracking-xs)", ...style }}>
+    <span data-size={size} style={{ display: "inline-flex", alignItems: "center", gap: 4, height: "var(--tag-h)", padding: onRemove ? "0 6px 0 10px" : "0 10px", borderRadius: "var(--radius-full)", background: t.bg, color: t.fg, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", fontWeight: "var(--weight-medium)", letterSpacing: "var(--tracking-xs)", whiteSpace: "nowrap", ...style }}>
       {children}
-      {onRemove ? <button type="button" onClick={onRemove} style={{ border: "none", background: "transparent", cursor: "pointer", color: "inherit", opacity: .7, display: "flex", padding: 0 }}><Icon name="x" size={11} /></button> : null}
+      {onRemove ? <button type="button" onClick={onRemove} aria-label="Remove" data-ink="" style={{ border: "none", background: "transparent", cursor: "pointer", color: "inherit", opacity: "var(--ink-op, .7)", display: "flex", padding: 0 }}><Icon name="x" size={12} /></button> : null}
     </span>
   );
 }

package/components/display/Tag.vue

@@ -2,14 +2,14 @@
 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).
-const props = defineProps({ tone: { type: String, default: 'neutral' }, removable: Boolean, style: Object })
+// 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.
+const props = defineProps({ tone: { type: String, default: 'neutral' }, removable: Boolean, size: String, style: Object })
 defineEmits(['remove'])
 const t = computed(() => tones[props.tone] || tones.neutral)
 </script>
 <template>
-  <span :style="{ display: 'inline-flex', alignItems: 'center', gap: 4, height: 22, padding: removable ? '0 6px 0 10px' : '0 10px', borderRadius: 'var(--radius-full)', background: t.bg, color: t.fg, fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-xs)', ...style }">
+  <span :data-size="size" :style="{ display: 'inline-flex', alignItems: 'center', gap: '4px', height: 'var(--tag-h)', padding: removable ? '0 6px 0 10px' : '0 10px', borderRadius: 'var(--radius-full)', background: t.bg, color: t.fg, fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-xs)', whiteSpace: 'nowrap', ...style }">
     <slot />
-    <button v-if="removable" type="button" @click="$emit('remove')" style="border:none;background:transparent;cursor:pointer;color:inherit;opacity:.7;display:flex;padding:0"><Icon name="x" :size="11" /></button>
+    <button v-if="removable" type="button" aria-label="Remove" data-ink="" @click="$emit('remove')" style="border:none;background:transparent;cursor:pointer;color:inherit;opacity:var(--ink-op, .7);display:flex;padding:0"><Icon name="x" :size="12" /></button>
   </span>
 </template>