@keyfunc/keybricks-ds 2.1.1 → 2.4.0

package/components/data/DiffValue.d.ts

@@ -5,6 +5,7 @@ export interface DiffValueProps {
   from?: React.ReactNode;
   to: React.ReactNode;
   tone?: "neutral" | "warning" | "success" | "danger";
+  /** Tabular figures (UI font — the monospace font is reserved for code). */
   mono?: boolean;
   style?: React.CSSProperties;
 }

package/components/data/DiffValue.jsx

@@ -6,7 +6,7 @@ const toneColor = { neutral: "var(--text-heading)", warning: "var(--warning-text
 /** Before → after value change ("USD → EUR"). tone colors the new value; from renders muted + struck through when both sides are given. */
 export function DiffValue({ from, to, tone = "warning", mono = true, style }) {
   return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", fontSize: "var(--control-text)", ...style }}>
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", ...style }}>
       {from != null ? <span style={{ color: "var(--text-muted)", textDecoration: "line-through" }}>{from}</span> : null}
       <Icon name="arrow-right" size={12} style={{ color: "var(--text-muted)" }} />
       <span style={{ color: toneColor[tone], fontWeight: "var(--weight-medium)" }}>{to}</span>

package/components/data/DiffValue.vue

@@ -5,7 +5,7 @@ const toneColor = { neutral: 'var(--text-heading)', warning: 'var(--warning-text
 defineProps({ from: [String, Number], to: [String, Number], tone: { type: String, default: 'warning' }, mono: { type: Boolean, default: true }, style: Object })
 </script>
 <template>
-  <span :style="{ display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: 'var(--control-text)', ...style }">
+  <span :style="{ display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', ...style }">
     <span v-if="from != null" style="color:var(--text-muted);text-decoration:line-through">{{ from }}</span>
     <Icon name="arrow-right" :size="12" style="color:var(--text-muted)" />
     <span :style="{ color: toneColor[tone], fontWeight: 'var(--weight-medium)' }">{{ to }}</span>

package/components/data/KeyValue.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 export interface KeyValueProps {
   label: string;
   value?: React.ReactNode;
-  /** Render value in Menlo (config codes) */
+  /** Kept for 2.x callers — values always use tabular figures in the UI font (the monospace font is reserved for code). */
   mono?: boolean;
   style?: React.CSSProperties;
 }

package/components/data/KeyValue.jsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-/** Label/value row (config summaries, confirmation steps). mono renders the value in Menlo. */
+/** Label/value row (config summaries, confirmation steps). Values always use the UI font with tabular figures; `mono` is kept for 2.x callers and changes nothing. */
 export function KeyValue({ label, value, mono, style }) {
   return (
     <div style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "6px 0", ...style }}>
       <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-secondary)" }}>{label}</span>
-      <span style={{ fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: mono ? 0 : "var(--tracking-base)", fontVariantNumeric: "tabular-nums", color: "var(--text-heading)", textAlign: "right" }}>{value}</span>
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontVariantNumeric: "tabular-nums", color: "var(--text-heading)", textAlign: "right" }}>{value}</span>
     </div>
   );
 }

package/components/data/KeyValue.vue

@@ -1,10 +1,10 @@
 <script setup>
-// Label/value row (config summaries, confirmation steps). mono renders the value in Menlo.
+// Label/value row (config summaries, confirmation steps). Values always use the UI font with tabular figures; `mono` is kept for 2.x callers and changes nothing.
 defineProps({ label: String, value: [String, Number], mono: Boolean, style: Object })
 </script>
 <template>
   <div :style="{ display: 'flex', justifyContent: 'space-between', gap: '12px', padding: '6px 0', ...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>
-    <span :style="{ fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: mono ? 0 : 'var(--tracking-base)', fontVariantNumeric: 'tabular-nums', color: 'var(--text-heading)', textAlign: 'right' }">{{ value }}</span>
+    <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', fontVariantNumeric: 'tabular-nums', color: 'var(--text-heading)', textAlign: 'right' }">{{ value }}</span>
   </div>
 </template>

package/components/data/Pagination.jsx

@@ -3,11 +3,11 @@ import { Icon } from "../icons/Icon.jsx";
 
 const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
 
-/** Table pagination — range label + prev/next + numbered pages, all at the region's tier (page items are control-height squares). `format(from, to, total, page, pageCount)` localises the label. */
+/** Table pagination — range label + prev/next + numbered pages, all at the region's tier (page items are control-height squares with no border — the current page takes the neutral selected fill (--bg-active, weight 600) — it is a state, not an action, so it never uses the action blue; the rest show a wash on hover). `format(from, to, total, page, pageCount)` localises the label. */
 export function Pagination({ page = 1, pageCount = 1, total, pageSize = 20, size, format, onChange, style }) {
   const btn = (content, disabled, onClick, active, label) => (
     <button type="button" disabled={disabled} onClick={onClick} aria-label={label} aria-current={active ? "page" : undefined} data-wash={active || disabled ? undefined : ""}
-      style={{ minWidth: "var(--control-h)", height: "var(--control-h)", padding: "0 6px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: `1px solid ${active ? "var(--action-primary)" : "var(--border-control)"}`, background: active ? "var(--action-primary)" : "var(--wash, var(--bg-surface))", color: active ? "var(--on-accent)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", fontVariantNumeric: "tabular-nums", cursor: disabled ? "default" : "pointer", opacity: disabled ? .45 : 1, display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "var(--t-hover)" }}>
+      style={{ minWidth: "var(--control-h)", height: "var(--control-h)", padding: "0 6px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", background: active ? "var(--bg-active)" : "var(--wash, transparent)", color: active ? "var(--text-heading)" : "var(--text-body)", fontWeight: active ? "var(--weight-semibold)" : "var(--weight-regular)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", fontVariantNumeric: "tabular-nums", cursor: disabled ? "default" : "pointer", opacity: disabled ? .45 : 1, display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "var(--t-hover)" }}>
       {content}
     </button>
   );

package/components/data/Pagination.vue

@@ -15,7 +15,7 @@ const label = computed(() => {
   if (props.format) return props.format(from, to, props.total, props.page, props.pageCount)
   return props.total != null ? `${from}–${to} of ${props.total}` : `Page ${props.page} of ${props.pageCount}`
 })
-function btnStyle(active, disabled) { return { minWidth: 'var(--control-h)', height: 'var(--control-h)', padding: '0 6px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: `1px solid ${active ? 'var(--action-primary)' : 'var(--border-control)'}`, background: active ? 'var(--action-primary)' : 'var(--wash, var(--bg-surface))', color: active ? 'var(--on-accent)' : 'var(--text-body)', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', letterSpacing: 'var(--control-tracking)', fontVariantNumeric: 'tabular-nums', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .45 : 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'var(--t-hover)' } }
+function btnStyle(active, disabled) { return { minWidth: 'var(--control-h)', height: 'var(--control-h)', padding: '0 6px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', background: active ? 'var(--bg-active)' : 'var(--wash, transparent)', color: active ? 'var(--text-heading)' : 'var(--text-body)', fontWeight: active ? 'var(--weight-semibold)' : 'var(--weight-regular)', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', letterSpacing: 'var(--control-tracking)', fontVariantNumeric: 'tabular-nums', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .45 : 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'var(--t-hover)' } }
 </script>
 <template>
   <div :data-size="size" :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--group-gap)', ...style }">

package/components/data/SmartTable.jsx

@@ -9,7 +9,7 @@ const typeIcon = { text: "type", longText: "align-left", number: "hash", select:
 const Pill = ({ hue = "gray", children }) => <span style={{ display: "inline-flex", alignItems: "center", height: 20, padding: "0 8px", borderRadius: "var(--radius-full)", background: `var(--hue-${hue}-bg)`, color: `var(--hue-${hue}-fg)`, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", lineHeight: 1, whiteSpace: "nowrap" }}>{children}</span>;
 
 /** Notion/Airtable-style database grid ("smart table"): field-type icons in headers, colored select pills, person/date/checkbox/url/progress cells, row hover + expand, inline text/number editing, + New row, add-field column, per-column footer aggregates, and a view toolbar (Hide fields · Filter · Group · Sort · search). */
- /* A size region that defaults to sm: a database grid is a dense surface, so rows are the sm bar height (32), cells and toolbar read the sm control text (12px) and the toolbar's buttons are 24px. Pass size="md" for a roomier grid. */
+ /* A size region that defaults to sm: a database grid is a dense surface, so rows are the sm bar height (36), cells and toolbar read the sm control text (12px, 13px in CJK) and the toolbar's buttons are 28px. Pass size="md" for a roomier grid. */
 export function SmartTable({ fields = [], rows = [], title = "Grid view", toolbar = true, height, rowHeight = "var(--bar-h)", size = "sm", onChange, style }) {
   const [data, setData] = React.useState(rows);
   const [hover, setHover] = React.useState(-1);
@@ -39,8 +39,8 @@ export function SmartTable({ fields = [], rows = [], title = "Grid view", toolba
       case "person": return v ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0 }}><Avatar name={v} size={20} /><span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{v}</span></span> : null;
       case "checkbox": return <Checkbox checked={!!v} onChange={(nv) => setCell(r, f.key, nv)} />;
       case "url": return v ? <a href={"https://" + v} onClick={(e) => e.preventDefault()} style={{ color: "var(--link)", overflow: "hidden", textOverflow: "ellipsis" }}>{v}</a> : null;
-      case "progress": return <span style={{ display: "flex", alignItems: "center", gap: 6, width: "100%" }}><span style={{ flex: 1, height: 4, borderRadius: "var(--radius-full)", background: "var(--track)", overflow: "hidden" }}><span style={{ display: "block", width: (v || 0) + "%", height: "100%", background: "var(--chart-blue)" }}></span></span><span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{v || 0}%</span></span>;
-      case "number": return <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--control-text)", letterSpacing: 0, fontVariantNumeric: "tabular-nums" }}>{v}</span>;
+      case "progress": return <span style={{ display: "flex", alignItems: "center", gap: 6, width: "100%" }}><span style={{ flex: 1, height: 4, borderRadius: "var(--radius-full)", background: "var(--track)", overflow: "hidden" }}><span style={{ display: "block", width: (v || 0) + "%", height: "100%", background: "var(--chart-blue)" }}></span></span><span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{v || 0}%</span></span>;
+      case "number": return <span style={{ marginLeft: "auto", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: 0, fontVariantNumeric: "tabular-nums" }}>{v}</span>;
       default: return <span style={{ overflow: "hidden", textOverflow: "ellipsis", fontWeight: f.primary ? "var(--weight-medium)" : "var(--weight-regular)", color: f.primary ? "var(--text-heading)" : "var(--text-primary)" }}>{v}</span>;
     }
   };
@@ -60,13 +60,13 @@ export function SmartTable({ fields = [], rows = [], title = "Grid view", toolba
           {fields.map(f => <span key={f.key} style={{ ...cellBase, background: "var(--bg-inset)", color: "var(--text-secondary)", fontWeight: "var(--weight-semibold)" }}><Icon name={typeIcon[f.type] || "type"} size={14} style={{ ...tierIcon, color: "var(--text-muted)" }} />{f.label}</span>)}
           <span style={{ ...cellBase, background: "var(--bg-inset)", justifyContent: "center", padding: 0 }}><IconButton icon="plus" muted label="Add field" /></span>
           {data.map((row, r) => [
-            <span key={"n" + r} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} style={{ ...cellBase, justifyContent: "center", color: "var(--text-muted)", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", letterSpacing: 0, background: hover === r ? "var(--bg-inset)" : "transparent", cursor: "pointer" }}>{hover === r ? <Icon name="maximize-2" size={14} style={{ ...tierIcon, color: "var(--action-primary)" }} /> : r + 1}</span>,
+            <span key={"n" + r} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} style={{ ...cellBase, justifyContent: "center", color: "var(--text-muted)", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", letterSpacing: 0, background: hover === r ? "var(--bg-inset)" : "transparent", cursor: "pointer" }}>{hover === r ? <Icon name="maximize-2" size={14} style={{ ...tierIcon, color: "var(--action-primary)" }} /> : r + 1}</span>,
             ...fields.map(f => <span key={r + f.key} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} onDoubleClick={() => { if (f.type === "text" || f.type === "number" || f.type === "date" || f.type === "url") { setEditing({ r, key: f.key }); setDraft(String(row[f.key] == null ? "" : row[f.key])); } }} style={{ ...cellBase, position: "relative", background: hover === r ? "var(--bg-inset)" : "transparent" }}>{renderCell(f, row, r)}</span>),
             <span key={"a" + r} style={{ ...cellBase, background: hover === r ? "var(--bg-inset)" : "transparent" }}></span>,
           ])}
           <button type="button" onClick={() => { const empty = {}; fields.forEach(f => empty[f.key] = f.type === "multiSelect" ? [] : f.type === "checkbox" ? false : ""); const next = [...data, empty]; setData(next); onChange && onChange(next); }} style={{ gridColumn: "1 / -1", display: "flex", alignItems: "center", gap: 6, height: rowHeight, padding: "0 var(--edge-pad)", border: "none", borderBottom: "1px solid var(--border-subtle)", background: "transparent", cursor: "pointer", color: "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)", textAlign: "left" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-inset)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}><Icon name="plus" size={13} />New</button>
           <span style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)" }}></span>
-          {fields.map(f => <span key={"g" + f.key} style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)", justifyContent: "flex-end", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", letterSpacing: 0, color: "var(--text-secondary)" }}>{agg(f)}</span>)}
+          {fields.map(f => <span key={"g" + f.key} style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)", justifyContent: "flex-end", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", letterSpacing: 0, color: "var(--text-secondary)" }}>{agg(f)}</span>)}
           <span style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)" }}></span>
         </div>
       </div>

package/components/data/SmartTable.vue

@@ -8,7 +8,7 @@ import SearchInput from '../forms/SearchInput.vue'
 // Notion/Airtable-style database grid: field-type header icons, hue pills, person/date/checkbox/url/progress cells, row hover + expand, inline editing, + New row, footer aggregates, view toolbar.
 const typeIcon = { text: 'type', longText: 'align-left', number: 'hash', select: 'chevron-down', multiSelect: 'tag', date: 'calendar', person: 'user', checkbox: 'check-square', url: 'link', progress: 'bar-chart-2' }
 const props = defineProps({ fields: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, title: { type: String, default: 'Grid view' }, toolbar: { type: Boolean, default: true }, height: [Number, String], rowHeight: [Number, String], size: { type: String, default: 'sm' }, style: Object })
-// A size region that defaults to sm: a database grid is a dense surface, so rows are the sm bar height (32), cells and toolbar read the sm control text (12px) and the toolbar's buttons are 24px. Pass size="md" for a roomier grid.
+// A size region that defaults to sm: a database grid is a dense surface, so rows are the sm bar height (36), cells and toolbar read the sm control text (12px, 13px in CJK) and the toolbar's buttons are 28px. Pass size="md" for a roomier grid.
 const rowH = computed(() => props.rowHeight == null ? 'var(--bar-h)' : (typeof props.rowHeight === 'number' ? props.rowHeight + 'px' : props.rowHeight))
 const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
 const emit = defineEmits(['change'])
@@ -44,7 +44,7 @@ function agg(f) {
         <span v-for="f in fields" :key="f.key" :style="{ ...cellBase, height: rowH, background: 'var(--bg-inset)', color: 'var(--text-secondary)', fontWeight: 'var(--weight-semibold)' }"><Icon :name="typeIcon[f.type] || 'type'" :size="14" :style="{ ...tierIcon, color: 'var(--text-muted)' }" />{{ f.label }}</span>
         <span :style="{ ...cellBase, height: rowH, background: 'var(--bg-inset)', justifyContent: 'center', padding: 0 }"><IconButton icon="plus" muted label="Add field" /></span>
         <template v-for="(row, r) in data" :key="r">
-          <span @mouseenter="hover = r" @mouseleave="hover = -1" :style="{ ...cellBase, height: rowH, justifyContent: 'center', color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: 0, background: hover === r ? 'var(--bg-inset)' : 'transparent', cursor: 'pointer' }">
+          <span @mouseenter="hover = r" @mouseleave="hover = -1" :style="{ ...cellBase, height: rowH, justifyContent: 'center', color: 'var(--text-muted)', fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums', fontSize: 'var(--text-xs)', letterSpacing: 0, background: hover === r ? 'var(--bg-inset)' : 'transparent', cursor: 'pointer' }">
             <Icon v-if="hover === r" name="maximize-2" :size="14" :style="{ ...tierIcon, color: 'var(--action-primary)' }" /><template v-else>{{ r + 1 }}</template>
           </span>
           <span v-for="f in fields" :key="r + f.key" @mouseenter="hover = r" @mouseleave="hover = -1" @dblclick="startEdit(r, f, row)" :style="{ ...cellBase, height: rowH, position: 'relative', background: hover === r ? 'var(--bg-inset)' : 'transparent' }">
@@ -53,16 +53,16 @@ function agg(f) {
             <template v-else-if="f.type === 'multiSelect'"><span style="display:flex;gap:4px;overflow:hidden"><span v-for="t in row[f.key] || []" :key="t" class="kb-pill" :style="{ background: `var(--hue-${(f.options || {})[t] || 'gray'}-bg)`, color: `var(--hue-${(f.options || {})[t] || 'gray'}-fg)` }">{{ t }}</span></span></template>
             <template v-else-if="f.type === 'person'"><span v-if="row[f.key]" style="display:inline-flex;align-items:center;gap:6px;min-width:0"><Avatar :name="row[f.key]" :size="20" /><span style="overflow:hidden;text-overflow:ellipsis">{{ row[f.key] }}</span></span></template>
             <template v-else-if="f.type === 'checkbox'"><Checkbox :checked="!!row[f.key]" @change="v => setCell(r, f.key, v)" /></template>
-            <template v-else-if="f.type === 'url'"><a v-if="row[f.key]" href="#" @click.prevent style="overflow:hidden;text-overflow:ellipsis">{{ row[f.key] }}</a></template>
-            <template v-else-if="f.type === 'progress'"><span style="display:flex;align-items:center;gap:6px;width:100%"><span style="flex:1;height:4px;border-radius:var(--radius-full);background:var(--track);overflow:hidden"><span :style="{ display: 'block', width: (row[f.key] || 0) + '%', height: '100%', background: 'var(--chart-blue)' }" /></span><span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)">{{ row[f.key] || 0 }}%</span></span></template>
-            <template v-else-if="f.type === 'number'"><span style="margin-left:auto;font-family:var(--font-mono);font-size:var(--control-text);letter-spacing:0;font-variant-numeric:tabular-nums">{{ row[f.key] }}</span></template>
+            <template v-else-if="f.type === 'url'"><a v-if="row[f.key]" href="#" @click.prevent style="color:var(--link);overflow:hidden;text-overflow:ellipsis">{{ row[f.key] }}</a></template>
+            <template v-else-if="f.type === 'progress'"><span style="display:flex;align-items:center;gap:6px;width:100%"><span style="flex:1;height:4px;border-radius:var(--radius-full);background:var(--track);overflow:hidden"><span :style="{ display: 'block', width: (row[f.key] || 0) + '%', height: '100%', background: 'var(--chart-blue)' }" /></span><span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary)">{{ row[f.key] || 0 }}%</span></span></template>
+            <template v-else-if="f.type === 'number'"><span style="margin-left:auto;font-family:var(--font-sans);font-size:var(--control-text);letter-spacing:0;font-variant-numeric:tabular-nums">{{ row[f.key] }}</span></template>
             <template v-else><span :style="{ overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: f.primary ? 'var(--weight-medium)' : 'var(--weight-regular)', color: f.primary ? 'var(--text-heading)' : 'var(--text-primary)' }">{{ row[f.key] }}</span></template>
           </span>
           <span :style="{ ...cellBase, height: rowH, background: hover === r ? 'var(--bg-inset)' : 'transparent' }" />
         </template>
         <button type="button" @click="addRow" class="kb-st-new" :style="{ gridColumn: '1 / -1', height: rowH }"><Icon name="plus" :size="14" :style="tierIcon" />New</button>
         <span :style="{ ...cellBase, height: rowH, borderBottom: 'none', background: 'var(--bg-inset)' }" />
-        <span v-for="f in fields" :key="'g' + f.key" :style="{ ...cellBase, height: rowH, borderBottom: 'none', background: 'var(--bg-inset)', justifyContent: 'flex-end', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: 0, color: 'var(--text-secondary)' }">{{ agg(f) }}</span>
+        <span v-for="f in fields" :key="'g' + f.key" :style="{ ...cellBase, height: rowH, borderBottom: 'none', background: 'var(--bg-inset)', justifyContent: 'flex-end', fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums', fontSize: 'var(--text-xs)', letterSpacing: 0, color: 'var(--text-secondary)' }">{{ agg(f) }}</span>
         <span :style="{ ...cellBase, height: rowH, borderBottom: 'none', background: 'var(--bg-inset)' }" />
       </div>
     </div>

package/components/data/Spreadsheet.jsx

@@ -76,9 +76,9 @@ export function Spreadsheet({ data = [], rows, cols, colWidths = [], defaultColW
         <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: "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)" }} />
+        <span style={{ width: 72, alignSelf: "stretch", display: "flex", alignItems: "center", justifyContent: "center", borderRight: "1px solid var(--border-control)", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", 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-sans)", fontVariantNumeric: "tabular-nums", 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-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-primary)" }} />
       </div>}
       <div style={{ overflow: "auto", maxHeight: height }}>
         <div style={{ display: "grid", gridTemplateColumns: widths.map(w => w + "px").join(" "), width: "fit-content" }}>
@@ -92,7 +92,7 @@ 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: "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" }}>
+                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: "var(--font-sans)", fontVariantNumeric: isNum ? "tabular-nums" : "normal", 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>;
@@ -104,7 +104,7 @@ export function Spreadsheet({ data = [], rows, cols, colWidths = [], defaultColW
           {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>
+        <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", 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>}
     </div>
   );

package/components/data/Spreadsheet.vue

@@ -51,7 +51,7 @@ function commit(r, c, text) { const cell = cells.value[r][c]; delete cell.f; if
 function setFlag(k) { const on = !cur.value[k]; for (let r = lo.value.r; r <= hi.value.r; r++) for (let c = lo.value.c; c <= hi.value.c; c++) cells.value[r][c][k] = on }
 function setType(label) { const t = { Automatic: undefined, Number: 'number', Currency: 'currency', Percent: 'percent' }[label]; for (let r = lo.value.r; r <= hi.value.r; r++) for (let c = lo.value.c; c <= hi.value.c; c++) { if (t) cells.value[r][c].t = t; else delete cells.value[r][c].t } }
 const gridCols = computed(() => ['46px', ...Array.from({ length: nC }, (_, c) => (props.colWidths[c] || props.defaultColWidth) + 'px')].join(' '))
-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)', color: 'var(--text-secondary)', height: '26px', boxSizing: 'border-box', userSelect: 'none' }
+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: '26px', boxSizing: 'border-box', userSelect: 'none' }
 const hl = { background: 'var(--soft-bg)', color: 'var(--action-primary)' }
 </script>
 <template>
@@ -66,9 +66,9 @@ const hl = { background: 'var(--soft-bg)', color: 'var(--action-primary)' }
       <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: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)" />
+      <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-sans);font-variant-numeric:tabular-nums;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-sans);font-variant-numeric:tabular-nums;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-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-primary)" />
     </div>
     <div :style="{ overflow: 'auto', maxHeight: typeof height === 'number' ? height + 'px' : height }">
       <div :style="{ display: 'grid', gridTemplateColumns: gridCols, width: 'fit-content' }">
@@ -77,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: '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' }">
+            :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: 'var(--font-sans)', fontVariantNumeric: typeof evalCell(cells, cell) === 'number' ? 'tabular-nums' : 'normal', 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" />
@@ -90,7 +90,7 @@ const hl = { background: 'var(--soft-bg)', color: 'var(--action-primary)' }
         <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>
+      <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;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>
   </div>
 </template>

package/components/data/Table.d.ts

@@ -1,24 +1,54 @@
 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"
+ * The table is a size region: rows are the tier's bar height (sm 36 · md 40 · lg 48), 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 code/amount cells" viewport="700x300"
  */
+/** Field name on the row, or an accessor (row, index) => value. */
+export type DataTableAccessor<T> = string | ((row: any, index: number) => T);
+/** A status mark beside the title: "favorite" draws a filled 14px star in --warning; an object draws a 14px outline Icon. */
+export type DataTableTitleMark = "favorite" | { icon: string; color?: string; label: string } | null | undefined;
+/**
+ * Two-line title cell — the name column of a document list.
+ * Left to right: IconTile (kind "row", tinted by hue) · title over description · sm ⋯ IconButton.
+ * md: 32px tile r8 · 12px tile→text · title 14/20 --text-heading · description 12/16 --text-secondary (13/18 CJK) · 2px between · 10px row padding → 58px row.
+ * sm: 28px tile · 8px · 12/16 title · 2px · 8px padding → 50px.  lg: 40px tile r10 · 12px · 14/20 title · 4px · 14px padding → 68px.
+ * Each field defaults to the row key of the same name (icon, hue, description, mark).
+ */
+export interface DataTableTwoLine {
+  icon?: DataTableAccessor<string | null | undefined>;
+  /** source | join | transform | merge | output | neutral (default neutral — the grey folder tile) */
+  hue?: DataTableAccessor<"source" | "join" | "transform" | "merge" | "output" | "neutral" | null | undefined>;
+  description?: DataTableAccessor<React.ReactNode>;
+  mark?: DataTableAccessor<DataTableTitleMark>;
+  /** Trailing ⋯ button (default true). Fires the table's onRowMore. */
+  more?: boolean;
+}
+export interface DataTableSort { key: string; direction: "asc" | "desc"; }
+export interface DataTableLabels { sortAsc?: string; sortDesc?: string; sortClear?: string; more?: string; expand?: string; collapse?: string; }
 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) */
+  /** Tabular figures for amounts and IDs (UI font, the row's size and colour). */
   mono?: boolean;
+  /** Config code (ALL_CAPS_SNAKE) shown as a code chip: Menlo --text-code (12px, 11px in sm) on --bg-inset. */
+  code?: boolean;
+  /** Two-line title cell (see DataTableTwoLine); `true` reads icon/hue/description/mark from the row. Give the column a width; when the table is tight it shrinks to minWidth (default 180), and text truncates to whatever width it gets. */
+  twoLine?: boolean | DataTableTwoLine;
+  /** Header sort button: muted sm IconButton at the header cell's right end (in line with a two-line row's ⋯), shown on hover (arrow-up), kept while sorted (arrow-up / arrow-down, label --text-heading). Click cycles ascending → descending → none. Omit on action columns. */
+  sortable?: boolean;
+  /** Custom comparison for this column (ascending order). Default: numbers (commas allowed) numerically, text by locale with numeric collation, empty values last. */
+  compare?: (a: any, b: any, rowA: any, rowB: any) => number;
   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 tier of the table region: sm 36px rows / 12px text, 13px in CJK (dense grids, preview drawers) · md 40px / 14px (default) · lg 48px / 14px. Omit to inherit the enclosing region. */
   size?: "sm" | "md" | "lg";
   /** Alias of size="sm", kept for 1.x callers */
   dense?: boolean;
@@ -38,6 +68,30 @@ export interface DataTableProps {
   columnWidths?: Record<string, number>;
   /** Fires on every drag frame with the new px width. Vue: `@column-resize`. */
   onColumnResize?: (key: string, width: number) => void;
+  /** ⋯ in a twoLine cell was clicked. Vue: `@row-more`. */
+  onRowMore?: (row: any, index: number, event: React.MouseEvent) => void;
+  /** Opens a row from its twoLine cell: the icon tile and the title get a hand cursor and call this on click (the title also on Enter / Space). Vue: `@row-open`. */
+  onRowOpen?: (row: any, index: number, event: React.SyntheticEvent) => void;
+  /** Tree rows: a row nests through `children` (or sets `hasChildren: true` to show the arrow before its children are loaded). The twoLine column indents 24px per level and shows an expand arrow (chevron-right, turned down when open). Sorting reorders siblings only. Selection and event indices are depth-first over every row, so they never move. */
+  tree?: boolean;
+  /** Row field that identifies a row in expandedKeys (default "id"; falls back to the row's index). */
+  rowKey?: string;
+  /** Controlled expanded rows (keys from rowKey). Omit to let the table keep them. Vue: `v-model:expandedKeys`. */
+  expandedKeys?: (string | number)[];
+  /** Initially expanded rows when uncontrolled. */
+  defaultExpandedKeys?: (string | number)[];
+  /** An arrow was clicked: the row, whether it is now expanded, and the next key list. Load `children` here for `hasChildren` rows. Vue: `@expand-change`. */
+  onExpandChange?: (row: any, expanded: boolean, expandedKeys: (string | number)[]) => void;
+  /** Every word the table draws itself (English by default). The sort tooltip names the next step: unsorted → sortAsc, ascending → sortDesc, descending → sortClear. */
+  labels?: DataTableLabels;
+  /** Controlled sort state (one column at a time); null = unsorted. Omit to let the table keep it. Vue: `v-model:sort`. */
+  sort?: DataTableSort | null;
+  /** Initial sort when uncontrolled. */
+  defaultSort?: DataTableSort | null;
+  /** Fires with the next state: { key, direction: "asc" } → "desc" → null; a different column starts at "asc". Vue: `@sort-change`. */
+  onSortChange?: (sort: DataTableSort | null) => void;
+  /** Rows are already ordered (server-side sorting): the table shows the sort state but does not reorder. */
+  manualSort?: boolean;
   /** 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;