@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/components/data/Table.vue

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

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

package/components/display/Avatar.vue

@@ -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: `max(${Math.round(size * .4)}px, var(--text-glyph-min))`, letterSpacing: 0, flexShrink: 0, boxSizing: 'border-box', border: '1px solid var(--border-card)', ...style }">{{ initials(name) }}</span>
 </template>

package/components/display/AvatarGroup.vue

@@ -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: `max(${Math.round(size * .38)}px, var(--text-glyph-min))` }">+{{ rest }}</span>
   </div>
 </template>

package/components/display/Badge.d.ts

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

package/components/display/Badge.jsx

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

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

package/components/display/Kbd.d.ts

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

package/components/display/Kbd.jsx

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

package/components/display/Kbd.vue

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

package/components/feedback/Accordion.jsx

@@ -8,11 +8,11 @@ export function Accordion({ title, subtitle, defaultOpen, open: openProp, onTogg
   const toggle = () => (onToggle ? onToggle(!open) : setOpenState(!open));
   return (
     <div style={{ borderBottom: "1px solid var(--border-card)", ...style }}>
-      <div onClick={toggle} style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 4px", cursor: "pointer" }}>
+      <div onClick={toggle} data-wash="" style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 8px", margin: "0 -4px", borderRadius: "var(--radius-md)", background: "var(--wash, transparent)", transition: "var(--t-hover)", cursor: "pointer" }}>
         <span style={{ color: "var(--text-muted)", display: "inline-flex", transform: open ? "rotate(90deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-right" size={14} /></span>
         <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
           <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-          {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
+          {subtitle ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{subtitle}</span> : null}
         </div>
       </div>
       {open ? <div style={{ padding: "0 4px 16px 28px" }}>{children}</div> : null}

package/components/feedback/Accordion.vue

@@ -10,11 +10,11 @@ function toggle() { if (props.open != null) emit('toggle', !open.value); else op
 </script>
 <template>
   <div :style="{ borderBottom: '1px solid var(--border-card)', ...style }">
-    <div @click="toggle" style="display:flex;align-items:center;gap:10px;padding:14px 4px;cursor:pointer">
+    <div @click="toggle" data-wash="" style="display:flex;align-items:center;gap:10px;padding:14px 8px;margin:0 -4px;border-radius:var(--radius-md);background:var(--wash, transparent);transition:var(--t-hover);cursor:pointer">
       <span :style="{ color: 'var(--text-muted)', display: 'inline-flex', transform: open ? 'rotate(90deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-right" :size="14" /></span>
       <div style="display:flex;flex-direction:column;flex:1">
         <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-        <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-secondary)">{{ subtitle }}</span>
+        <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ subtitle }}</span>
       </div>
     </div>
     <div v-if="open" style="padding:0 4px 16px 28px"><slot /></div>

package/components/feedback/ActivityItem.d.ts

@@ -1,10 +1,12 @@
 import * as React from "react";
-/** Feed row: 32px blue-tint icon tile, 13px/500 title, 12px meta, right action text ("Open"). */
+/** Feed row: 32px blue-tint icon tile, 14px/500 title, 12px meta, right action text ("Open"). */
 export interface ActivityItemProps {
   icon?: string;
   title?: string;
   meta?: string;
   action?: React.ReactNode;
+  /** Fires when the action text is clicked. Vue: `@action`. */
+  onAction?: () => void;
   style?: React.CSSProperties;
 }
 export declare function ActivityItem(props: ActivityItemProps): JSX.Element;

package/components/feedback/ActivityItem.jsx

@@ -1,16 +1,16 @@
 import React from "react";
 import { IconTile } from "../display/Badge.jsx";
 
-/** Activity feed row: 32px icon tile + 13px/500 title + 12px meta + optional right action. */
-export function ActivityItem({ icon = "file-text", title, meta, action, style }) {
+/** Activity feed row: 32px icon tile + 14px/500 title + 12px meta + optional right text action (a text link: ink darkens on hover). */
+export function ActivityItem({ icon = "file-text", title, meta, action, onAction, style }) {
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", ...style }}>
       <IconTile icon={icon} kind="row" style={{ background: "var(--info-bg)", border: "none", color: "var(--info-fg)" }} />
       <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
         <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
-        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+        {meta ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{meta}</span> : null}
       </div>
-      {action ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-secondary)", cursor: "pointer" }}>{action}</span> : null}
+      {action ? <button type="button" onClick={onAction} data-ink="" style={{ border: "none", background: "transparent", padding: 0, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--ink, var(--text-secondary))", cursor: "pointer", whiteSpace: "nowrap" }}>{action}</button> : null}
     </div>
   );
 }
@@ -22,7 +22,7 @@ export function DotActivity({ tone = "success", text, time, style }) {
     <div style={{ display: "flex", gap: 8, alignItems: "flex-start", ...style }}>
       <span style={{ width: 8, height: 8, borderRadius: "var(--radius-full)", background: tones[tone], marginTop: 5, flexShrink: 0 }} />
       <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
-        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-heading)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{text}</span>
+        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-heading)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{text}</span>
         <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)" }}>{time}</span>
       </div>
     </div>
@@ -33,7 +33,7 @@ export function DotActivity({ tone = "success", text, time, style }) {
 export function LogViewer({ lines = [], height, style }) {
   return (
     <div style={{ background: "var(--bg-inset)", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", padding: "10px 12px", display: "flex", flexDirection: "column", gap: 6, overflowY: "auto", height, boxSizing: "border-box", ...style }}>
-      {lines.map((l, i) => <span key={i} style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: typeof l === "object" ? l.color || "var(--text-body)" : "var(--text-body)", whiteSpace: "pre" }}>{typeof l === "object" ? l.text : l}</span>)}
+      {lines.map((l, i) => <span key={i} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: typeof l === "object" ? l.color || "var(--text-body)" : "var(--text-body)", whiteSpace: "pre" }}>{typeof l === "object" ? l.text : l}</span>)}
     </div>
   );
 }