@keyfunc/keybricks-ds 1.0.3 → 2.1.1

package/components/charts/WaterfallChart.vue

@@ -26,14 +26,14 @@ const g = computed(() => {
       <template v-if="axes">
         <g v-for="t in g.ticks" :key="t">
           <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(t)" :y2="g.sy(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
-          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ valueFormat(t) }}</text>
+          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:var(--text-2xs);fill:var(--chart-label)">{{ valueFormat(t) }}</text>
         </g>
       </template>
       <g v-for="(b,i) in g.out" :key="i" :opacity="hover==null||hover===i?1:0.45" style="transition:opacity var(--dur-fast) var(--ease-out)">
         <rect :x="b.x-b.bw/2" :y="b.y" :width="b.bw" :height="b.h" rx="2" :fill="b.fill"/>
         <line v-if="!b.last" :x1="b.x+b.bw/2" :x2="b.nextX" :y1="b.run" :y2="b.run" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="2 3"/>
-        <text v-if="showValues" :x="b.x" :y="b.y-5" text-anchor="middle" :style="{fontFamily:'var(--font-mono)',fontSize:'10px',fill:b.kind==='neg'?'var(--chart-neg)':'var(--text-heading)'}">{{ (b.kind==='pos'?'+':'')+valueFormat(b.value) }}</text>
-        <text :x="b.x" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">
+        <text v-if="showValues" :x="b.x" :y="b.y-5" text-anchor="middle" :style="{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',fill:b.kind==='neg'?'var(--chart-neg)':'var(--text-heading)'}">{{ (b.kind==='pos'?'+':'')+valueFormat(b.value) }}</text>
+        <text :x="b.x" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">
           <tspan v-for="(ln,li) in b.lines" :key="li" :x="b.x" :dy="li?11:0">{{ ln }}</tspan>
         </text>
       </g>

package/components/charts/WorldMap.jsx

@@ -91,11 +91,11 @@ export function WorldMap({ values = {}, width = 660, height = 340, projection =
       </svg>
       {legend ? (
         <div style={{ display: "flex", alignItems: "center", gap: 6, paddingTop: 6, lineHeight: "normal" }}>
-          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--chart-label)" }}>{valueFormat(lo)}</span>
+          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--chart-label)" }}>{valueFormat(lo)}</span>
           {(scale === "diverging" ? ["var(--chart-neg)", "color-mix(in srgb, var(--chart-neg) 40%, var(--bg-surface))", "var(--chart-track)", "color-mix(in srgb, var(--chart-pos) 40%, var(--bg-surface))", "var(--chart-pos)"] : HEAT).map((c, i) => (
             <span key={i} style={{ width: 22, height: 8, borderRadius: 2, background: c }} />
           ))}
-          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--chart-label)" }}>{valueFormat(hi)}{unit ? " " + unit : ""}</span>
+          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--chart-label)" }}>{valueFormat(hi)}{unit ? " " + unit : ""}</span>
         </div>
       ) : null}
       {h && interactive ? (

package/components/charts/WorldMap.vue

@@ -61,9 +61,9 @@ const swatches = computed(() => props.scale==='diverging'
       <path v-if="hover!=null" :d="paths[hover].d" fill="none" stroke="var(--action-primary)" stroke-width="1.4" pointer-events="none"/>
     </svg>
     <div v-if="legend" style="display:flex;align-items:center;gap:6px;padding-top:6px;line-height:normal">
-      <span style="font-family:var(--font-mono);font-size:10px;color:var(--chart-label)">{{ valueFormat(lo) }}</span>
+      <span style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--chart-label)">{{ valueFormat(lo) }}</span>
       <span v-for="(c,i) in swatches" :key="i" :style="{width:'22px',height:'8px',borderRadius:'2px',background:c}"/>
-      <span style="font-family:var(--font-mono);font-size:10px;color:var(--chart-label)">{{ valueFormat(hi) }}{{ unit ? ' '+unit : '' }}</span>
+      <span style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--chart-label)">{{ valueFormat(hi) }}{{ unit ? ' '+unit : '' }}</span>
     </div>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:paths[hover].c[0]+'px',top:paths[hover].c[1]+'px',transform:paths[hover].c[0]>width*0.62?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
       <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ paths[hover].name }}</div>

package/components/charts/XLabels.vue

@@ -0,0 +1,11 @@
+<script setup>
+// Thin x-axis category labels only (small charts with no y axis). Render inside an <svg>.
+defineProps({ h: Number, pad: Object, xLabels: { type: Array, default: () => [] }, sxLabel: Function })
+</script>
+<template>
+  <g>
+    <template v-for="(lb, i) in xLabels" :key="i">
+      <text v-if="lb != null" :x="sxLabel(i)" :y="h - pad.b + 16" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ lb }}</text>
+    </template>
+  </g>
+</template>

package/components/data/CodeBlock.jsx

@@ -9,7 +9,7 @@ export function CodeBlock({ code = "", language, height, style }) {
     <div style={{ background: "var(--bg-inset)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", ...style }}>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "7px 10px", borderBottom: "1px solid var(--border-subtle)" }}>
         <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>{language || "code"}</span>
-        <button type="button" onClick={copy} style={{ display: "flex", alignItems: "center", gap: 4, border: "none", background: "transparent", cursor: "pointer", color: copied ? "var(--success-strong)" : "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", padding: 0 }}>
+        <button type="button" onClick={copy} data-ink="" style={{ display: "flex", alignItems: "center", gap: 4, border: "none", background: "transparent", cursor: "pointer", color: copied ? "var(--success-strong)" : "var(--ink, var(--text-secondary))", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", padding: 0 }}>
           <Icon name={copied ? "check" : "copy"} size={12} />{copied ? "Copied" : "Copy"}
         </button>
       </div>

package/components/data/CodeBlock.vue

@@ -13,7 +13,7 @@ function copy() {
   <div :style="{ background: 'var(--bg-inset)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', ...style }">
     <div style="display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid var(--border-subtle)">
       <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)">{{ language || 'code' }}</span>
-      <button type="button" @click="copy" :style="{ display: 'flex', alignItems: 'center', gap: 4, border: 'none', background: 'transparent', cursor: 'pointer', color: copied ? 'var(--success-strong)' : 'var(--text-secondary)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', padding: 0 }">
+      <button type="button" @click="copy" data-ink="" :style="{ display: 'flex', alignItems: 'center', gap: '4px', border: 'none', background: 'transparent', cursor: 'pointer', color: copied ? 'var(--success-strong)' : 'var(--ink, var(--text-secondary))', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', padding: 0 }">
         <Icon :name="copied ? 'check' : 'copy'" :size="12" />{{ copied ? 'Copied' : 'Copy' }}
       </button>
     </div>

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(--text-sm)", ...style }}>
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: mono ? "var(--font-mono)" : "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: 6, fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: 'var(--text-sm)', ...style }">
+  <span :style="{ display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: mono ? 'var(--font-mono)' : '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/FilterBar.d.ts

@@ -9,6 +9,8 @@ export interface FilterBarProps {
   /** Count shown in "Adapt Filters (n)" */
   adaptCount?: number;
   defaultExpanded?: boolean;
+  /** Size tier for the whole bar and every field in it. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   onGo?: () => void;
   onAdapt?: () => void;
   children?: React.ReactNode;

package/components/data/FilterBar.jsx

@@ -2,21 +2,22 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { Button } from "../buttons/Button.jsx";
 
-/** SAP Fiori-style list-report filter bar: variant title row with expand/collapse, a wrapping row of labeled filter fields (pass Field-wrapped controls as children), and Adapt Filters (n) + Go actions. */
-export function FilterBar({ variant = "Standard", modified, adaptCount, defaultExpanded = true, onGo, onAdapt, children, style }) {
+/** SAP Fiori-style list-report filter bar: variant title row with expand/collapse, a wrapping row of labeled filter fields (pass Field-wrapped controls as children), and Adapt Filters (n) + Go actions.
+ *  A size region: `size` (default inherit → md) sets the title bar height, the fields' tier and the gap between fields (--group-gap) so every control in it matches. */
+export function FilterBar({ variant = "Standard", modified, adaptCount, defaultExpanded = true, size, onGo, onAdapt, children, style }) {
   const [open, setOpen] = React.useState(defaultExpanded);
   return (
-    <div style={{ background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", padding: "10px 16px 0", boxSizing: "border-box", ...style }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 6, paddingBottom: 10 }}>
-        <button type="button" onClick={() => setOpen(!open)} style={{ display: "flex", alignItems: "center", gap: 6, border: "none", background: "transparent", cursor: "pointer", padding: 0, color: "var(--text-heading)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)" }}>
+    <div data-size={size} style={{ background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxSizing: "border-box", ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "var(--control-gap)", minHeight: "var(--bar-card-h)", padding: "0 var(--edge-pad)", boxSizing: "border-box" }}>
+        <button type="button" aria-expanded={open} onClick={() => setOpen(!open)} style={{ display: "flex", alignItems: "center", gap: 6, border: "none", background: "transparent", cursor: "pointer", padding: 0, color: "var(--text-heading)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)" }}>
           {variant}{modified && <span style={{ color: "var(--text-muted)", fontWeight: "var(--weight-regular)" }}>*</span>}
-          <span style={{ color: "var(--text-muted)", display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-down" size={14} /></span>
+          <span style={{ color: "var(--text-muted)", display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-down" size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /></span>
         </button>
         <span style={{ flex: 1 }}></span>
-        <Button variant="text" size="sm" onClick={onAdapt}>Adapt Filters{adaptCount ? ` (${adaptCount})` : ""}</Button>
-        <Button size="sm" onClick={onGo}>Go</Button>
+        <Button variant="text" onClick={onAdapt}>Adapt Filters{adaptCount ? ` (${adaptCount})` : ""}</Button>
+        <Button onClick={onGo}>Go</Button>
       </div>
-      {open && <div style={{ display: "flex", flexWrap: "wrap", gap: "12px 16px", paddingBottom: 14, borderTop: "1px solid var(--border-subtle)", paddingTop: 12 }}>{children}</div>}
+      {open && <div style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-end", gap: "var(--control-gap) var(--group-gap)", padding: "12px var(--edge-pad) var(--edge-pad)", borderTop: "1px solid var(--border-subtle)" }}>{children}</div>}
     </div>
   );
 }

package/components/data/FilterBar.vue

@@ -3,21 +3,22 @@ import { ref } from 'vue'
 import Icon from '../icons/Icon.vue'
 import Button from '../buttons/Button.vue'
 // SAP Fiori-style list-report filter bar: variant title + expand/collapse, wrapping labeled filter fields (slot), Adapt Filters (n) + Go.
-const props = defineProps({ variant: { type: String, default: 'Standard' }, modified: Boolean, adaptCount: Number, defaultExpanded: { type: Boolean, default: true }, style: Object })
+// A size region: `size` (default inherit → md) sets the title bar height, the fields' tier and the gap between fields (--group-gap) so every control in it matches.
+const props = defineProps({ variant: { type: String, default: 'Standard' }, modified: Boolean, adaptCount: Number, defaultExpanded: { type: Boolean, default: true }, size: String, style: Object })
 const emit = defineEmits(['go', 'adapt'])
 const open = ref(props.defaultExpanded)
 </script>
 <template>
-  <div :style="{ background: 'var(--bg-surface)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', padding: '10px 16px 0', boxSizing: 'border-box', ...style }">
-    <div style="display:flex;align-items:center;gap:6px;padding-bottom:10px">
-      <button type="button" @click="open = !open" style="display:flex;align-items:center;gap:6px;border:none;background:transparent;cursor:pointer;padding:0;color:var(--text-heading);font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base)">
+  <div :data-size="size" :style="{ background: 'var(--bg-surface)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxSizing: 'border-box', ...style }">
+    <div style="display:flex;align-items:center;gap:var(--control-gap);min-height:var(--bar-card-h);padding:0 var(--edge-pad);box-sizing:border-box">
+      <button type="button" :aria-expanded="open" @click="open = !open" style="display:flex;align-items:center;gap:6px;border:none;background:transparent;cursor:pointer;padding:0;color:var(--text-heading);font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--control-text);line-height:var(--control-leading);letter-spacing:var(--control-tracking)">
         {{ variant }}<span v-if="modified" style="color:var(--text-muted);font-weight:var(--weight-regular)">*</span>
-        <span :style="{ color: 'var(--text-muted)', display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-down" :size="14" /></span>
+        <span :style="{ color: 'var(--text-muted)', display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-down" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)' }" /></span>
       </button>
       <span style="flex:1" />
-      <Button variant="text" size="sm" @click="emit('adapt')">Adapt Filters{{ adaptCount ? ` (${adaptCount})` : '' }}</Button>
-      <Button size="sm" @click="emit('go')">Go</Button>
+      <Button variant="text" @click="emit('adapt')">Adapt Filters{{ adaptCount ? ` (${adaptCount})` : '' }}</Button>
+      <Button @click="emit('go')">Go</Button>
     </div>
-    <div v-if="open" style="display:flex;flex-wrap:wrap;gap:12px 16px;padding-bottom:14px;border-top:1px solid var(--border-subtle);padding-top:12px"><slot /></div>
+    <div v-if="open" style="display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--control-gap) var(--group-gap);padding:12px var(--edge-pad) var(--edge-pad);border-top:1px solid var(--border-subtle)"><slot /></div>
   </div>
 </template>

package/components/data/KeyValue.jsx

@@ -3,9 +3,9 @@ import React from "react";
 /** Label/value row (config summaries, confirmation steps). mono renders the value in Menlo. */
 export function KeyValue({ label, value, mono, style }) {
   return (
-    <div style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "7px 0", ...style }}>
-      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{label}</span>
-      <span style={{ fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", fontSize: mono ? "var(--text-xs)" : "var(--text-sm)", letterSpacing: mono ? "var(--tracking-xs)" : 0, color: "var(--text-heading)", textAlign: "right" }}>{value}</span>
+    <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>
     </div>
   );
 }

package/components/data/KeyValue.vue

@@ -3,8 +3,8 @@
 defineProps({ label: String, value: [String, Number], mono: Boolean, style: Object })
 </script>
 <template>
-  <div :style="{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '7px 0', ...style }">
-    <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ label }}</span>
-    <span :style="{ fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: mono ? 'var(--text-xs)' : 'var(--text-sm)', letterSpacing: mono ? 'var(--tracking-xs)' : 0, color: 'var(--text-heading)', textAlign: 'right' }">{{ value }}</span>
+  <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>
   </div>
 </template>

package/components/data/ListRow.jsx

@@ -14,10 +14,10 @@ export function ListRow({ icon = "file-text", title, meta, trailing, expanded, o
           <IconTile icon={icon} kind="row" />
           <div style={{ display: "flex", flexDirection: "column" }}>
             <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)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+            {meta ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-regular)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{meta}</span> : null}
           </div>
         </div>
-        {trailing ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{trailing}</span> : null}
+        {trailing ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontVariantNumeric: "tabular-nums", color: "var(--text-secondary)" }}>{trailing}</span> : null}
       </div>
       {expanded && children ? <div style={{ padding: "0 16px 12px 72px" }}>{children}</div> : null}
     </div>

package/components/data/ListRow.vue

@@ -15,10 +15,10 @@ const hover = ref(false)
         <IconTile :icon="icon" kind="row" />
         <div style="display:flex;flex-direction:column">
           <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
-          <span v-if="meta" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ meta }}</span>
+          <span v-if="meta" style="font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ meta }}</span>
         </div>
       </div>
-      <span v-if="trailing" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ trailing }}</span>
+      <span v-if="trailing" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);font-variant-numeric:tabular-nums;color:var(--text-secondary)">{{ trailing }}</span>
     </div>
     <div v-if="expanded" style="padding:0 16px 12px 72px"><slot /></div>
   </div>

package/components/data/Pagination.d.ts

@@ -1,11 +1,15 @@
 import * as React from "react";
-/** Table pagination (26px controls, r4). Addition — not in the source file. */
+/** Table pagination — page items are control-height squares at the region's tier, r8. Inside a Table card it follows the table's tier. */
 export interface PaginationProps {
   page?: number;
   pageCount?: number;
   /** Total rows; shows an "1–20 of 128" range label when given */
   total?: number;
   pageSize?: number;
+  /** Size tier. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
+  /** Builds the range label, for other languages: (from, to, total, page, pageCount) => string. from/to/total are null when `total` is not given. */
+  format?: (from: number | null, to: number | null, total: number | null, page: number, pageCount: number) => string;
   onChange?: (page: number) => void;
   style?: React.CSSProperties;
 }

package/components/data/Pagination.jsx

@@ -1,26 +1,30 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Table pagination — 12px range label + prev/next + numbered pages. */
-export function Pagination({ page = 1, pageCount = 1, total, pageSize = 20, onChange, style }) {
-  const btn = (content, disabled, onClick, active) => (
-    <button type="button" disabled={disabled} onClick={onClick}
-      style={{ minWidth: 26, height: 26, padding: "0 6px", borderRadius: "var(--radius-sm)", border: `1px solid ${active ? "var(--action-primary)" : "var(--border-control)"}`, background: active ? "var(--action-primary)" : "var(--bg-surface)", color: active ? "var(--on-accent)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", cursor: disabled ? "default" : "pointer", opacity: disabled ? .45 : 1, display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "var(--t-hover)" }}>
+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. */
+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)" }}>
       {content}
     </button>
   );
   const pages = [];
-  const from = Math.max(1, Math.min(page - 1, pageCount - 2));
-  for (let i = from; i < from + 3 && i <= pageCount; i++) pages.push(i);
+  const first = Math.max(1, Math.min(page - 1, pageCount - 2));
+  for (let i = first; i < first + 3 && i <= pageCount; i++) pages.push(i);
+  const from = total != null ? (page - 1) * pageSize + 1 : null, to = total != null ? Math.min(page * pageSize, total) : null;
+  const text = format ? format(from, to, total, page, pageCount) : (total != null ? `${from}–${to} of ${total}` : `Page ${page} of ${pageCount}`);
   return (
-    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, ...style }}>
-      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>
-        {total != null ? `${(page - 1) * pageSize + 1}–${Math.min(page * pageSize, total)} of ${total}` : `Page ${page} of ${pageCount}`}
+    <div data-size={size} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--group-gap)", ...style }}>
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", fontVariantNumeric: "tabular-nums", color: "var(--text-secondary)" }}>
+        {text}
       </span>
       <div style={{ display: "flex", gap: 4 }}>
-        {btn(<Icon name="chevron-left" size={13} />, page <= 1, () => onChange && onChange(page - 1))}
+        {btn(<Icon name="chevron-left" size={16} style={tierIcon} />, page <= 1, () => onChange && onChange(page - 1), false, "Previous page")}
         {pages.map((p) => <React.Fragment key={p}>{btn(p, false, () => onChange && onChange(p), p === page)}</React.Fragment>)}
-        {btn(<Icon name="chevron-right" size={13} />, page >= pageCount, () => onChange && onChange(page + 1))}
+        {btn(<Icon name="chevron-right" size={16} style={tierIcon} />, page >= pageCount, () => onChange && onChange(page + 1), false, "Next page")}
       </div>
     </div>
   );

package/components/data/Pagination.vue

@@ -1,24 +1,29 @@
 <script setup>
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Table pagination — 12px range label + prev/next + numbered pages.
-const props = defineProps({ page: { type: Number, default: 1 }, pageCount: { type: Number, default: 1 }, total: Number, pageSize: { type: Number, default: 20 }, style: Object })
+// 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.
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
+const props = defineProps({ page: { type: Number, default: 1 }, pageCount: { type: Number, default: 1 }, total: Number, pageSize: { type: Number, default: 20 }, size: String, format: Function, style: Object })
 const emit = defineEmits(['change'])
 const pages = computed(() => {
   const from = Math.max(1, Math.min(props.page - 1, props.pageCount - 2)), out = []
   for (let i = from; i < from + 3 && i <= props.pageCount; i++) out.push(i)
   return out
 })
-const label = computed(() => props.total != null ? `${(props.page - 1) * props.pageSize + 1}–${Math.min(props.page * props.pageSize, props.total)} of ${props.total}` : `Page ${props.page} of ${props.pageCount}`)
-function btnStyle(active, disabled) { return { minWidth: 26, height: 26, padding: '0 6px', borderRadius: 'var(--radius-sm)', border: `1px solid ${active ? 'var(--action-primary)' : 'var(--border-control)'}`, background: active ? 'var(--action-primary)' : 'var(--bg-surface)', color: active ? 'var(--on-accent)' : 'var(--text-body)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .45 : 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'var(--t-hover)' } }
+const label = computed(() => {
+  const from = props.total != null ? (props.page - 1) * props.pageSize + 1 : null, to = props.total != null ? Math.min(props.page * props.pageSize, props.total) : null
+  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)' } }
 </script>
 <template>
-  <div :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, ...style }">
-    <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ label }}</span>
+  <div :data-size="size" :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--group-gap)', ...style }">
+    <span style="font-family:var(--font-sans);font-size:var(--control-text);line-height:var(--control-leading);letter-spacing:var(--control-tracking);font-variant-numeric:tabular-nums;color:var(--text-secondary)">{{ label }}</span>
     <div style="display:flex;gap:4px">
-      <button type="button" :disabled="page <= 1" @click="emit('change', page - 1)" :style="btnStyle(false, page <= 1)"><Icon name="chevron-left" :size="13" /></button>
-      <button v-for="p in pages" :key="p" type="button" @click="emit('change', p)" :style="btnStyle(p === page, false)">{{ p }}</button>
-      <button type="button" :disabled="page >= pageCount" @click="emit('change', page + 1)" :style="btnStyle(false, page >= pageCount)"><Icon name="chevron-right" :size="13" /></button>
+      <button type="button" aria-label="Previous page" :disabled="page <= 1" :data-wash="page <= 1 ? undefined : ''" @click="emit('change', page - 1)" :style="btnStyle(false, page <= 1)"><Icon name="chevron-left" :size="16" :style="tierIcon" /></button>
+      <button v-for="p in pages" :key="p" type="button" :aria-current="p === page ? 'page' : undefined" :data-wash="p === page ? undefined : ''" @click="emit('change', p)" :style="btnStyle(p === page, false)">{{ p }}</button>
+      <button type="button" aria-label="Next page" :disabled="page >= pageCount" :data-wash="page >= pageCount ? undefined : ''" @click="emit('change', page + 1)" :style="btnStyle(false, page >= pageCount)"><Icon name="chevron-right" :size="16" :style="tierIcon" /></button>
     </div>
   </div>
 </template>

package/components/data/SmartTable.d.ts

@@ -24,7 +24,10 @@ export interface SmartTableProps {
   toolbar?: boolean;
   /** Scroll-area max height */
   height?: number | string;
-  rowHeight?: number;
+  /** Row height; defaults to the tier's bar height (32 at sm) */
+  rowHeight?: number | string;
+  /** Size tier of the grid region. Defaults to "sm" — a database grid is a dense surface (32px rows, 12px text, 24px toolbar buttons). */
+  size?: "sm" | "md" | "lg";
   onChange?: (rows: object[]) => void;
   style?: React.CSSProperties;
 }

package/components/data/SmartTable.jsx

@@ -9,7 +9,8 @@ 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). */
-export function SmartTable({ fields = [], rows = [], title = "Grid view", toolbar = true, height, rowHeight = 32, onChange, style }) {
+ /* 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. */
+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);
   const [editing, setEditing] = React.useState(null);
@@ -17,7 +18,8 @@ export function SmartTable({ fields = [], rows = [], title = "Grid view", toolba
   const setCell = (r, key, v) => { const next = data.map((row, i) => i === r ? { ...row, [key]: v } : row); setData(next); onChange && onChange(next); };
   const widths = ["40px", ...fields.map(f => (f.width || 140) + "px"), "40px"];
   const grid = { display: "grid", gridTemplateColumns: widths.join(" "), width: "fit-content", minWidth: "100%" };
-  const cellBase = { display: "flex", alignItems: "center", gap: 5, padding: "0 8px", borderRight: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", height: rowHeight, boxSizing: "border-box", overflow: "hidden", whiteSpace: "nowrap", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-primary)" };
+  const cellBase = { display: "flex", alignItems: "center", gap: 5, padding: "0 var(--cell-px)", borderRight: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", height: rowHeight, boxSizing: "border-box", overflow: "hidden", whiteSpace: "nowrap", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-primary)" };
+  const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
   const agg = (f) => {
     if (!f.aggregate) return "";
     const vals = data.map(r => r[f.key]);
@@ -35,18 +37,18 @@ export function SmartTable({ fields = [], rows = [], title = "Grid view", toolba
       case "select": { const hue = (f.options || {})[v] || "gray"; return v ? <Pill hue={hue}>{v}</Pill> : null; }
       case "multiSelect": return <span style={{ display: "flex", gap: 4, overflow: "hidden" }}>{(v || []).map(t => <Pill key={t} hue={(f.options || {})[t] || "gray"}>{t}</Pill>)}</span>;
       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 size="sm" checked={!!v} onChange={(nv) => setCell(r, f.key, nv)} />;
+      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-2xs)", color: "var(--text-secondary)" }}>{v || 0}%</span></span>;
-      case "number": return <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{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-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>;
       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>;
     }
   };
-  const tbBtn = (icon, label) => <button key={label} type="button" style={{ display: "inline-flex", alignItems: "center", gap: 5, height: 26, padding: "0 8px", border: "none", borderRadius: "var(--radius-sm)", background: "transparent", cursor: "pointer", color: "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}><Icon name={icon} size={13} />{label}</button>;
+  const tbBtn = (icon, label) => <button key={label} type="button" style={{ display: "inline-flex", alignItems: "center", gap: 5, height: "var(--control-h)", padding: "0 var(--control-px)", border: "none", borderRadius: "var(--radius-md)", background: "transparent", cursor: "pointer", color: "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}><Icon name={icon} size={14} style={tierIcon} />{label}</button>;
   return (
-    <div style={{ border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", background: "var(--bg-surface)", overflow: "hidden", boxSizing: "border-box", ...style }}>
-      {toolbar && <div style={{ display: "flex", alignItems: "center", gap: 4, padding: "6px 10px", borderBottom: "1px solid var(--border-subtle)" }}>
-        <button type="button" style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 26, padding: "0 8px", border: "none", borderRadius: "var(--radius-sm)", background: "var(--bg-active)", cursor: "pointer", color: "var(--text-heading)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)" }}><Icon name="layout-grid" size={13} />{title}<Icon name="chevron-down" size={12} /></button>
+    <div data-size={size} style={{ border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", background: "var(--bg-surface)", overflow: "hidden", boxSizing: "border-box", ...style }}>
+      {toolbar && <div style={{ display: "flex", alignItems: "center", gap: 4, minHeight: "var(--bar-card-h)", padding: "0 var(--edge-pad)", boxSizing: "border-box", borderBottom: "1px solid var(--border-subtle)" }}>
+        <button type="button" data-wash="strong" style={{ display: "inline-flex", alignItems: "center", gap: 6, height: "var(--control-h)", padding: "0 var(--control-px)", border: "none", borderRadius: "var(--radius-md)", background: "var(--wash, var(--bg-active))", transition: "var(--t-hover)", cursor: "pointer", color: "var(--text-heading)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", letterSpacing: "var(--control-tracking)" }}><Icon name="layout-grid" size={14} style={tierIcon} />{title}<Icon name="chevron-down" size={14} style={tierIcon} /></button>
         <span style={{ width: 1, height: 16, background: "var(--border-control)", margin: "0 4px" }}></span>
         {tbBtn("eye-off", "Hide fields")}{tbBtn("funnel", "Filter")}{tbBtn("layers", "Group")}{tbBtn("arrow-down", "Sort")}
         <span style={{ flex: 1 }}></span>
@@ -55,16 +57,16 @@ export function SmartTable({ fields = [], rows = [], title = "Grid view", toolba
       <div style={{ overflow: "auto", maxHeight: height }}>
         <div style={grid}>
           <span style={{ ...cellBase, background: "var(--bg-inset)", justifyContent: "center" }}></span>
-          {fields.map(f => <span key={f.key} style={{ ...cellBase, background: "var(--bg-inset)", color: "var(--text-secondary)", fontSize: "var(--text-xs)", fontWeight: "var(--weight-medium)", letterSpacing: "var(--tracking-xs)" }}><Icon name={typeIcon[f.type] || "type"} size={12} style={{ color: "var(--text-muted)" }} />{f.label}</span>)}
-          <span style={{ ...cellBase, background: "var(--bg-inset)", justifyContent: "center" }}><IconButton icon="plus" size="xs" muted label="Add field" /></span>
+          {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-2xs)", background: hover === r ? "var(--bg-inset)" : "transparent", cursor: "pointer" }}>{hover === r ? <Icon name="maximize-2" size={12} style={{ 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-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>,
             ...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 10px", border: "none", borderBottom: "1px solid var(--border-subtle)", background: "transparent", cursor: "pointer", color: "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", 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>
+          <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-2xs)", 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-mono)", 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>