@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/components/charts/RadarChart.vue

@@ -47,7 +47,7 @@ function toggle(name){
       <path v-for="(d,i) in g.rings" :key="'r'+i" :d="d" fill="none" stroke="var(--chart-grid)" stroke-width="1"/>
       <g v-for="(sp,i) in g.spokes" :key="sp.label">
         <line :x1="g.cx" :y1="g.cy" :x2="sp.x" :y2="sp.y" :stroke="hover===i?'var(--chart-guide)':'var(--chart-axis)'" stroke-width="1"/>
-        <text :x="sp.lx" :y="sp.ly+3" :text-anchor="sp.anchor" :style="{fontFamily:'var(--font-sans)',fontSize:'10px',fill:hover===i?'var(--text-heading)':'var(--chart-label)'}">{{ sp.label }}</text>
+        <text :x="sp.lx" :y="sp.ly+3" :text-anchor="sp.anchor" :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-2xs)',fill:hover===i?'var(--text-heading)':'var(--chart-label)'}">{{ sp.label }}</text>
       </g>
       <g v-for="sh in g.shapes" :key="sh.s.name">
         <path :d="sh.d" :fill="sh.color" fill-opacity="0.14" :stroke="sh.color" stroke-width="1.5" stroke-linejoin="round"/>
@@ -59,7 +59,7 @@ function toggle(name){
       <div v-for="sh in g.shapes" :key="sh.s.name" style="display:flex;align-items:center;gap:6px">
         <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:sh.color}"/>
         <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ sh.s.name }}</span>
-        <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ valueFormat(sh.s.values[hover]) }}</span>
+        <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ valueFormat(sh.s.values[hover]) }}</span>
       </div>
     </div>
     <div v-if="legend && series.length>1" style="display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:6px;line-height:normal">

package/components/charts/Ribbon3D.jsx

@@ -47,7 +47,7 @@ export function Ribbon3D({ series = [], xLabels = [], width = 460, height = 300,
         {vTicks.map((t, i) => (
           <g key={"vt" + i}>
             <line x1={t.p.x - 4} y1={t.p.y} x2={t.p.x} y2={t.p.y} stroke="var(--chart-guide)" strokeWidth="1" />
-            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{t.v}</text>
+            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{t.v}</text>
           </g>
         ))}
         {xLabels.map((lb, i) => {
@@ -57,7 +57,7 @@ export function Ribbon3D({ series = [], xLabels = [], width = 460, height = 300,
           const p0 = P(i / (n - 1) - 0.5, -0.45, zE);
           const ctr = P(0, -0.45, 0);
           const dx = p0.x - ctr.x, dy = p0.y - ctr.y, len = Math.hypot(dx, dy) || 1;
-          return <text key={"x" + i} x={p0.x + (dx / len) * 14} y={p0.y + (dy / len) * 14 + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{lb}</text>;
+          return <text key={"x" + i} x={p0.x + (dx / len) * 14} y={p0.y + (dy / len) * 14 + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{lb}</text>;
         })}
         {rows.map((r) => (
           <g key={r.s.name} opacity={hover == null || hover === r.si ? 1 : 0.4}

package/components/charts/Ribbon3D.vue

@@ -55,9 +55,9 @@ const g = computed(() => {
       <line :x1="g.vAxis[0].x" :y1="g.vAxis[0].y" :x2="g.vAxis[1].x" :y2="g.vAxis[1].y" stroke="var(--chart-guide)" stroke-width="1"/>
       <g v-for="(t,i) in g.vTicks" :key="'vt'+i">
         <line :x1="t.p.x-4" :y1="t.p.y" :x2="t.p.x" :y2="t.p.y" stroke="var(--chart-guide)" stroke-width="1"/>
-        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ t.v }}</text>
+        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ t.v }}</text>
       </g>
-      <text v-for="(l,i) in g.labels" :key="'x'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ l.lb }}</text>
+      <text v-for="(l,i) in g.labels" :key="'x'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ l.lb }}</text>
       <g v-for="r in g.rows" :key="r.s.name" :opacity="hover==null||hover===r.si?1:0.4"
         @mouseenter="interactive && (hover=r.si)" @mouseleave="interactive && (hover=null)"
         style="transition:opacity var(--dur-fast) var(--ease-out)">
@@ -66,7 +66,7 @@ const g = computed(() => {
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:(width/2)+'px',top:(height*0.28)+'px',transform:'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">{{ series[hover].name }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">peak {{ valueFormat(Math.max(...series[hover].values)) }} · latest {{ valueFormat(series[hover].values[series[hover].values.length-1]) }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">peak {{ valueFormat(Math.max(...series[hover].values)) }} · latest {{ valueFormat(series[hover].values[series[hover].values.length-1]) }}</div>
     </div>
     <div style="display:flex;gap:14px;padding-top:6px;line-height:normal">
       <span v-for="(s,i) in series" :key="s.name" @mouseenter="interactive && (hover=i)" @mouseleave="interactive && (hover=null)"

package/components/charts/SankeyChart.jsx

@@ -45,9 +45,9 @@ export function SankeyChart({ nodes = [], links = [], width = 620, height = 320,
                 style={{ cursor: interactive ? "default" : undefined }}>
                 <rect x={n.x} y={n.y} width={n.w} height={n.h} rx="2" fill={c} opacity={hover == null || (hover.kind === "node" && hover.id === n.id) ? 1 : 0.55} />
                 <text x={rightSide ? n.x + n.w + 6 : n.x + n.w + 6} y={n.y + n.h / 2 + 3.5}
-                  style={{ fontFamily: "var(--font-sans)", fontSize: 11, fill: "var(--text-heading)" }}>{n.label}</text>
+                  style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fill: "var(--text-heading)" }}>{n.label}</text>
                 <text x={n.x + n.w + 6} y={n.y + n.h / 2 + 15}
-                  style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, fill: "var(--chart-label)" }}>{valueFormat(n.value)}</text>
+                  style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{valueFormat(n.value)}</text>
               </g>
             );
           })}

package/components/charts/SankeyChart.vue

@@ -40,14 +40,14 @@ const tip = computed(()=>{
           style="transition:opacity var(--dur-fast) var(--ease-out)"/>
         <g v-for="n in g.laid.nodes" :key="n.id" @mouseenter="interactive && (hover={kind:'node',id:n.id})" @mouseleave="interactive && (hover=null)">
           <rect :x="n.x" :y="n.y" :width="n.w" :height="n.h" rx="2" :fill="g.color(n)" :opacity="hover==null||(hover.kind==='node'&&hover.id===n.id)?1:0.55"/>
-          <text :x="n.x+n.w+6" :y="n.y+n.h/2+3.5" style="font-family:var(--font-sans);font-size:11px;fill:var(--text-heading)">{{ n.label }}</text>
-          <text :x="n.x+n.w+6" :y="n.y+n.h/2+15" style="font-family:var(--font-mono);font-size:9.5px;fill:var(--chart-label)">{{ valueFormat(n.value) }}</text>
+          <text :x="n.x+n.w+6" :y="n.y+n.h/2+3.5" style="font-family:var(--font-sans);font-size:var(--text-xs);fill:var(--text-heading)">{{ n.label }}</text>
+          <text :x="n.x+n.w+6" :y="n.y+n.h/2+15" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ valueFormat(n.value) }}</text>
         </g>
       </g>
     </svg>
     <div v-if="tip && interactive" :style="{position:'absolute',left:tip.x+'px',top:tip.y+'px',transform:tip.x>width*0.6?'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">{{ tip.title }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ tip.value }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ tip.value }}</div>
     </div>
   </div>
 </template>

package/components/charts/Scatter3D.jsx

@@ -40,7 +40,7 @@ export function Scatter3D({ points = [], width = 420, height = 300, yaw: yaw0 =
         {edges.map(([a, b], i) => <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="var(--chart-axis)" strokeWidth="1" />)}
         {axes3.map((ax, i) => <line key={"ae" + i} x1={ax.a.x} y1={ax.a.y} x2={ax.b.x} y2={ax.b.y} stroke="var(--chart-guide)" strokeWidth="1" />)}
         {axes3.map((ax, i) => (
-          <text key={"at" + i} x={ax.nx} y={ax.ny + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--text-secondary)" }}>{ax.name}</text>
+          <text key={"at" + i} x={ax.nx} y={ax.ny + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--text-secondary)" }}>{ax.name}</text>
         ))}
         {dots.map((d) => (
           <circle key={d.i} cx={d.x} cy={d.y} r={r * (1.18 - (d.depth + 0.75) * 0.35) * (hover === d.i ? 1.5 : 1)}

package/components/charts/Scatter3D.vue

@@ -38,7 +38,7 @@ const g = computed(() => {
       role="img" :style="{cursor:interactive?'grab':'default',touchAction:'none'}">
       <line v-for="(e,i) in g.edges" :key="'e'+i" :x1="e[0].x" :y1="e[0].y" :x2="e[1].x" :y2="e[1].y" stroke="var(--chart-axis)" stroke-width="1"/>
       <line v-for="(ax,i) in g.axes3" :key="'ae'+i" :x1="ax.a.x" :y1="ax.a.y" :x2="ax.b.x" :y2="ax.b.y" stroke="var(--chart-guide)" stroke-width="1"/>
-      <text v-for="(ax,i) in g.axes3" :key="'at'+i" :x="ax.nx" :y="ax.ny+3" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--text-secondary)">{{ ax.name }}</text>
+      <text v-for="(ax,i) in g.axes3" :key="'at'+i" :x="ax.nx" :y="ax.ny+3" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--text-secondary)">{{ ax.name }}</text>
       <circle v-for="d in g.dots" :key="d.i" :cx="d.x" :cy="d.y"
         :r="r*(1.18-(d.depth+0.75)*0.35)*(hover===d.i?1.5:1)" :fill="d.color"
         :opacity="hover===d.i ? 1 : (0.85-(d.depth+0.75)*0.28)*(hover==null?1:0.45)"
@@ -47,7 +47,7 @@ const g = computed(() => {
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.dots.find(d=>d.i===hover).x+'px',top:g.dots.find(d=>d.i===hover).y+'px',transform:g.dots.find(d=>d.i===hover).x>width*0.6?'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">{{ points[hover].label || points[hover].series }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ xLabel }} {{ valueFormat(points[hover].x) }} · {{ yLabel }} {{ valueFormat(points[hover].y) }} · {{ zLabel }} {{ valueFormat(points[hover].z) }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ xLabel }} {{ valueFormat(points[hover].x) }} · {{ yLabel }} {{ valueFormat(points[hover].y) }} · {{ zLabel }} {{ valueFormat(points[hover].z) }}</div>
     </div>
     <div v-if="legend && g.names.length>1" style="display:flex;gap:14px;padding-top:6px;line-height:normal">
       <span v-for="(nm,i) in g.names" :key="nm" style="display:inline-flex;align-items:center;gap:6px">

package/components/charts/ScatterChart.jsx

@@ -33,9 +33,9 @@ export function ScatterChart({ points = [], width = 560, height = 260, xFormat =
       <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img">
         {axes ? <g>
           <PlotGrid w={width} h={height} pad={pad} ticks={ty.ticks} sy={sy} xLabels={[]} sxLabel={() => 0} yFormat={yFormat} />
-          {tx.ticks.map((t) => <text key={t} x={sx(t)} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{xFormat(t)}</text>)}
-          {xLabel ? <text x={width - pad.r} y={height - 2} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{xLabel}</text> : null}
-          {yLabel ? <text x={pad.l} y={pad.t - 1} style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{yLabel}</text> : null}
+          {tx.ticks.map((t) => <text key={t} x={sx(t)} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{xFormat(t)}</text>)}
+          {xLabel ? <text x={width - pad.r} y={height - 2} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{xLabel}</text> : null}
+          {yLabel ? <text x={pad.l} y={pad.t - 1} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{yLabel}</text> : null}
         </g> : null}
         {points.map((p, i) => (
           <circle key={i} cx={sx(p.x)} cy={sy(p.y)} r={sr(p.r != null ? p.r : 1)} fill={colorOf(p)}

package/components/charts/ScatterChart.vue

@@ -33,11 +33,11 @@ function move(e){
       <template v-if="axes">
         <g v-for="t in g.ty.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)">{{ yFormat(t) }}</text>
+          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ yFormat(t) }}</text>
         </g>
-        <text v-for="t in g.tx.ticks" :key="'x'+t" :x="g.sx(t)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ xFormat(t) }}</text>
-        <text v-if="xLabel" :x="width-g.pad.r" :y="height-2" text-anchor="end" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ xLabel }}</text>
-        <text v-if="yLabel" :x="g.pad.l" :y="g.pad.t-1" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ yLabel }}</text>
+        <text v-for="t in g.tx.ticks" :key="'x'+t" :x="g.sx(t)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ xFormat(t) }}</text>
+        <text v-if="xLabel" :x="width-g.pad.r" :y="height-2" text-anchor="end" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ xLabel }}</text>
+        <text v-if="yLabel" :x="g.pad.l" :y="g.pad.t-1" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ yLabel }}</text>
       </template>
       <circle v-for="d in g.dots" :key="d.i" :cx="d.cx" :cy="d.cy" :r="d.r" :fill="d.color"
         :opacity="hover==null?.55:hover===d.i?.9:.2" :stroke="hover===d.i?'var(--bg-surface)':'none'" stroke-width="1.5"
@@ -45,7 +45,7 @@ function move(e){
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.dots[hover].cx+'px',top:g.dots[hover].cy+'px',transform:g.dots[hover].cx>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'}">
       <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:4px;white-space:nowrap">{{ points[hover].label || points[hover].series }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);white-space:nowrap">{{ (xLabel||'x')+' '+xFormat(points[hover].x) }} · {{ (yLabel||'y')+' '+yFormat(points[hover].y) }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading);white-space:nowrap">{{ (xLabel||'x')+' '+xFormat(points[hover].x) }} · {{ (yLabel||'y')+' '+yFormat(points[hover].y) }}</div>
     </div>
     <div v-if="legend && g.names.length>1" style="display:flex;gap:14px;padding-top:8px;line-height:normal">
       <span v-for="(nm,i) in g.names" :key="nm" style="display:inline-flex;align-items:center;gap:6px">

package/components/charts/Sparkline.jsx

@@ -28,7 +28,7 @@ export function Sparkline({ values = [], mode = "line", curve = "linear", tone =
     setHover(Math.max(0, Math.min(values.length - 1, i)));
   };
   const chip = hover != null && interactive ? (
-    <span style={{ position: "absolute", left: Math.min(Math.max(sx(hover), 18), width - 18), top: -4, transform: "translate(-50%,-100%)", pointerEvents: "none", whiteSpace: "nowrap", background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-menu)", padding: "2px 6px", fontFamily: "var(--font-mono)", fontSize: 10, lineHeight: "14px", color: "var(--text-heading)", zIndex: 5 }}>
+    <span style={{ position: "absolute", left: Math.min(Math.max(sx(hover), 18), width - 18), top: -4, transform: "translate(-50%,-100%)", pointerEvents: "none", whiteSpace: "nowrap", background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-menu)", padding: "2px 6px", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", lineHeight: "14px", color: "var(--text-heading)", zIndex: 5 }}>
       {labels && labels[hover] ? <span style={{ color: "var(--text-muted)", paddingRight: 5 }}>{labels[hover]}</span> : null}
       {valueFormat(values[hover])}
     </span>

package/components/charts/Sparkline.vue

@@ -47,7 +47,7 @@ const g = computed(() => {
       <circle v-if="hover!=null && interactive" :cx="g.sx(hover)" :cy="g.sy(values[hover])" :r="strokeWidth+1.4" :fill="g.color" stroke="var(--bg-surface)" stroke-width="1.5"/>
     </template>
   </svg>
-  <span v-if="hover!=null && interactive" :style="{position:'absolute',left:Math.min(Math.max(g.sx(hover),18),width-18)+'px',top:'-4px',transform:'translate(-50%,-100%)',pointerEvents:'none',whiteSpace:'nowrap',background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-sm)',boxShadow:'var(--shadow-menu)',padding:'2px 6px',fontFamily:'var(--font-mono)',fontSize:'10px',lineHeight:'14px',color:'var(--text-heading)',zIndex:5}">
+  <span v-if="hover!=null && interactive" :style="{position:'absolute',left:Math.min(Math.max(g.sx(hover),18),width-18)+'px',top:'-4px',transform:'translate(-50%,-100%)',pointerEvents:'none',whiteSpace:'nowrap',background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-sm)',boxShadow:'var(--shadow-menu)',padding:'2px 6px',fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-2xs-mono)',lineHeight:'14px',color:'var(--text-heading)',zIndex:5}">
     <span v-if="labels && labels[hover]" style="color:var(--text-muted);padding-right:5px">{{ labels[hover] }}</span>{{ valueFormat(values[hover]) }}
   </span>
   </span>

package/components/charts/SunburstChart.jsx

@@ -49,7 +49,7 @@ export function SunburstChart({ data, size = 320, ringWidth, valueFormat = fmtNu
           <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", maxWidth: rInner * 1.7, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
             {zoom.length ? focus.label : focus.label || "Total"}
           </span>
-          {zoom.length ? <span style={{ fontFamily: "var(--font-sans)", fontSize: 9, color: "var(--action-primary)" }}>↑ back</span> : null}
+          {zoom.length ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", color: "var(--action-primary)" }}>↑ back</span> : null}
         </div>
         {h && interactive ? (
           <ChartTooltip x={tipAt[0]} y={tipAt[1]} flip={tipAt[0] > size * 0.55} title={h.node.label}

package/components/charts/SunburstChart.vue

@@ -49,11 +49,11 @@ const tip = computed(()=>{
       <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;line-height:normal;gap:2px">
         <span :style="{fontFamily:'var(--font-sans)',fontWeight:'var(--weight-light)',fontSize:Math.round(size/13)+'px',color:'var(--text-heading)'}">{{ valueFormat(g.focus.value) }}</span>
         <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-2xs)',color:'var(--text-muted)',maxWidth:g.rInner*1.7+'px',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}">{{ g.focus.label || 'Total' }}</span>
-        <span v-if="zoom.length" style="font-family:var(--font-sans);font-size:9px;color:var(--action-primary)">↑ back</span>
+        <span v-if="zoom.length" style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--action-primary)">↑ back</span>
       </div>
       <div v-if="tip && interactive" :style="{position:'absolute',left:tip.x+'px',top:tip.y+'px',transform:tip.x>size*0.55?'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">{{ tip.title }}</div>
-        <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ tip.value }}</div>
+        <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ tip.value }}</div>
       </div>
     </div>
   </div>

package/components/charts/Surface3D.jsx

@@ -47,11 +47,11 @@ export function Surface3D({ values = [], width = 420, height = 300, yaw: yaw0 =
       <svg width={width} height={height} {...handlers} role="img" style={{ cursor: interactive ? "grab" : "default", touchAction: "none" }}>
         <path d={basePath} fill="var(--bg-inset)" stroke="var(--chart-axis)" strokeWidth="1" />
         {axes3.map((ax, i) => <line key={"ae" + i} x1={ax.a.x} y1={ax.a.y} x2={ax.b.x} y2={ax.b.y} stroke="var(--chart-guide)" strokeWidth="1" />)}
-        {axes3.map((ax, i) => ax.label ? <text key={"al" + i} x={ax.lp.x} y={ax.lp.y + 3} textAnchor={ax.anchor} style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--text-secondary)" }}>{ax.label}</text> : null)}
+        {axes3.map((ax, i) => ax.label ? <text key={"al" + i} x={ax.lp.x} y={ax.lp.y + 3} textAnchor={ax.anchor} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--text-secondary)" }}>{ax.label}</text> : null)}
         {zTicks.map((t, i) => (
           <g key={"zt" + i}>
             <line x1={t.p.x - 4} y1={t.p.y} x2={t.p.x} y2={t.p.y} stroke="var(--chart-guide)" strokeWidth="1" />
-            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{t.v}</text>
+            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{t.v}</text>
           </g>
         ))}
         {quads.map((q, i) => (

package/components/charts/Surface3D.vue

@@ -47,17 +47,17 @@ function fill(q){ return shade(heatColor(q.t), Math.max(-0.35, Math.min(0.3, q.l
       <path :d="g.basePath" fill="var(--bg-inset)" stroke="var(--chart-axis)" stroke-width="1"/>
       <line v-for="(ax,i) in g.axes3" :key="'ae'+i" :x1="ax.a.x" :y1="ax.a.y" :x2="ax.b.x" :y2="ax.b.y" stroke="var(--chart-guide)" stroke-width="1"/>
       <text v-for="(ax,i) in g.axes3.filter(a=>a.label)" :key="'al'+i" :x="ax.lp.x" :y="ax.lp.y+3" :text-anchor="ax.anchor"
-        style="font-family:var(--font-sans);font-size:10px;fill:var(--text-secondary)">{{ ax.label }}</text>
+        style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--text-secondary)">{{ ax.label }}</text>
       <g v-for="(t,i) in g.zTicks" :key="'zt'+i">
         <line :x1="t.p.x-4" :y1="t.p.y" :x2="t.p.x" :y2="t.p.y" stroke="var(--chart-guide)" stroke-width="1"/>
-        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ t.v }}</text>
+        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ t.v }}</text>
       </g>
       <path v-for="(q,i) in g.quads" :key="i" :d="q.d" :fill="fill(q)" :stroke="wire?'var(--bg-surface)':'none'" stroke-width="0.5"
         @mouseenter="interactive && (hover=q)" @mouseleave="interactive && (hover=null)"/>
     </svg>
     <div v-if="hover && interactive" :style="{position:'absolute',left:hover.cx+'px',top:hover.cy+'px',transform:hover.cx>width*0.6?'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">row {{ hover.r+1 }} · col {{ hover.c+1 }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(hover.avg) }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(hover.avg) }}</div>
     </div>
   </div>
 </template>

package/components/charts/TreemapChart.jsx

@@ -20,8 +20,8 @@ export function TreemapChart({ items = [], width = 560, height = 260, valueForma
             <rect x={c.x + 1} y={c.y + 1} width={Math.max(1, c.w - 2)} height={Math.max(1, c.h - 2)} rx="3" fill={colorOf(c.item)}
               opacity={hover == null ? 0.85 : hover === i ? 1 : 0.35} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />
             {c.w > 74 && c.h > 34 ? <>
-              <text x={c.x + 9} y={c.y + 18} style={{ fontFamily: "var(--font-sans)", fontSize: 11, fill: "var(--on-accent)" }}>{c.item.label}</text>
-              <text x={c.x + 9} y={c.y + 32} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--on-accent)", opacity: 0.85 }}>{valueFormat(c.item.value)}</text>
+              <text x={c.x + 9} y={c.y + 18} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fill: "var(--on-accent)" }}>{c.item.label}</text>
+              <text x={c.x + 9} y={c.y + 32} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--on-accent)", opacity: 0.85 }}>{valueFormat(c.item.value)}</text>
             </> : null}
           </g>
         ))}

package/components/charts/TreemapChart.vue

@@ -14,14 +14,14 @@ const total = computed(() => props.items.reduce((s,i)=>s+i.value,0)||1)
         <rect :x="c.x+1" :y="c.y+1" :width="Math.max(1,c.w-2)" :height="Math.max(1,c.h-2)" rx="3" :fill="c.color"
           :opacity="hover==null?.85:hover===i?1:.35" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
         <template v-if="c.w>74 && c.h>34">
-          <text :x="c.x+9" :y="c.y+18" style="font-family:var(--font-sans);font-size:11px;fill:var(--on-accent)">{{ c.item.label }}</text>
-          <text :x="c.x+9" :y="c.y+32" style="font-family:var(--font-mono);font-size:10px;fill:var(--on-accent);opacity:.85">{{ valueFormat(c.item.value) }}</text>
+          <text :x="c.x+9" :y="c.y+18" style="font-family:var(--font-sans);font-size:var(--text-xs);fill:var(--on-accent)">{{ c.item.label }}</text>
+          <text :x="c.x+9" :y="c.y+32" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--on-accent);opacity:.85">{{ valueFormat(c.item.value) }}</text>
         </template>
       </g>
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:(cells[hover].x+cells[hover].w/2)+'px',top:(cells[hover].y+cells[hover].h/2)+'px',transform:(cells[hover].x+cells[hover].w/2)>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'}">
       <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);white-space:nowrap;padding-bottom:2px">{{ cells[hover].item.label }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);white-space:nowrap">{{ valueFormat(cells[hover].item.value) }} · {{ ((cells[hover].item.value/total)*100).toFixed(1) }}%</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading);white-space:nowrap">{{ valueFormat(cells[hover].item.value) }} · {{ ((cells[hover].item.value/total)*100).toFixed(1) }}%</div>
     </div>
   </div>
 </template>

package/components/charts/WaterfallChart.jsx

@@ -38,8 +38,8 @@ export function WaterfallChart({ steps = [], width = 560, height = 260, axes = t
             <g key={i} opacity={hover == null || hover === i ? 1 : 0.45} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }}>
               <rect x={x - bw / 2} y={y} width={bw} height={hgt} rx="2" fill={fill[b.kind]} />
               {i < bars.length - 1 ? <line x1={x + bw / 2} x2={pad.l + slot * (i + 1) + slot / 2 - bw / 2} y1={sy(runEnd)} y2={sy(runEnd)} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="2 3" /> : null}
-              {showValues ? <text x={x} y={y - 5} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: b.kind === "neg" ? "var(--chart-neg)" : "var(--text-heading)" }}>{(b.kind === "pos" ? "+" : "") + valueFormat(b.value)}</text> : null}
-              <text x={x} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>
+              {showValues ? <text x={x} y={y - 5} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: b.kind === "neg" ? "var(--chart-neg)" : "var(--text-heading)" }}>{(b.kind === "pos" ? "+" : "") + valueFormat(b.value)}</text> : null}
+              <text x={x} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>
                 {String(b.label).split("\n").map((ln, li) => <tspan key={li} x={x} dy={li ? 11 : 0}>{ln}</tspan>)}
               </text>
             </g>

package/components/charts/WaterfallChart.vue

@@ -13,7 +13,7 @@ const g = computed(() => {
   const sy = scaleLin(lo, hi, props.height-pad.b, pad.t)
   const slot = (props.width-pad.l-pad.r)/bars.length
   const bw = Math.min(slot*0.58, 40)
-  return { pad, ticks, sy, out: bars.map((b,i)=>{
+  return { pad, ticks, sy, slot, out: bars.map((b,i)=>{
     const x = pad.l + slot*i + slot/2
     return { ...b, x, bw, y: sy(b.y1), h: Math.max(1.5, sy(b.y0)-sy(b.y1)), fill: FILL[b.kind],
       run: sy(b.kind==='total'?b.y1:b.to), nextX: pad.l + slot*(i+1) + slot/2 - bw/2, last: i===bars.length-1,
@@ -26,21 +26,22 @@ 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-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ valueFormat(t) }}</text>
         </g>
       </template>
+      <rect v-if="hover!=null" :x="g.pad.l+g.slot*hover" :y="g.pad.t" :width="g.slot" :height="height-g.pad.t-g.pad.b" fill="var(--bg-hover)"/>
       <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-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-2xs-mono)',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>
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.out[hover].x+'px',top:(height/2-10)+'px',transform:g.out[hover].x>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">{{ String(g.out[hover].label).replace('\n',' ') }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ g.out[hover].kind==='total' ? valueFormat(g.out[hover].value) : ((g.out[hover].kind==='pos'?'+':'')+valueFormat(g.out[hover].value)+' → '+valueFormat(g.out[hover].to)) }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ g.out[hover].kind==='total' ? valueFormat(g.out[hover].value) : ((g.out[hover].kind==='pos'?'+':'')+valueFormat(g.out[hover].value)+' → '+valueFormat(g.out[hover].to)) }}</div>
     </div>
   </div>
 </template>

package/components/charts/WorldMap.jsx

@@ -74,8 +74,8 @@ export function WorldMap({ values = {}, width = 660, height = 340, projection =
     return HEAT[Math.max(0, bucket(v))];
   };
 
-  if (err) return <div style={{ width, height, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)", background: "var(--bg-inset)", borderRadius: "var(--radius-lg)", ...style }}>{err}</div>;
-  if (!paths) return <div style={{ width, height, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)", ...style }}>loading map…</div>;
+  if (err) return <div style={{ width, height, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-muted)", background: "var(--bg-inset)", borderRadius: "var(--radius-lg)", ...style }}>{err}</div>;
+  if (!paths) return <div style={{ width, height, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-muted)", ...style }}>loading map…</div>;
 
   const h = hover != null ? paths[hover] : null;
   return (
@@ -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-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", 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-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: "var(--chart-label)" }}>{valueFormat(hi)}{unit ? " " + unit : ""}</span>
         </div>
       ) : null}
       {h && interactive ? (

package/components/charts/WorldMap.vue

@@ -51,8 +51,8 @@ const swatches = computed(() => props.scale==='diverging'
   : HEAT)
 </script>
 <template>
-  <div v-if="err" :style="{width:width+'px',height:height+'px',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-mono)',fontSize:'var(--text-xs)',color:'var(--text-muted)',background:'var(--bg-inset)',borderRadius:'var(--radius-lg)',...style}">{{ err }}</div>
-  <div v-else-if="!paths" :style="{width:width+'px',height:height+'px',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-mono)',fontSize:'var(--text-xs)',color:'var(--text-muted)',...style}">loading map…</div>
+  <div v-if="err" :style="{width:width+'px',height:height+'px',display:'flex',alignItems:'center',justifyContent:'center',fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-xs)',color:'var(--text-muted)',background:'var(--bg-inset)',borderRadius:'var(--radius-lg)',...style}">{{ err }}</div>
+  <div v-else-if="!paths" :style="{width:width+'px',height:height+'px',display:'flex',alignItems:'center',justifyContent:'center',fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-xs)',color:'var(--text-muted)',...style}">loading map…</div>
   <div v-else :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
     <svg :width="width" :height="plotH" role="img">
       <path v-for="(p,i) in paths" :key="p.name+i" :d="p.d" :fill="fill(p.name)" stroke="var(--bg-surface)" stroke-width="0.5"
@@ -61,13 +61,13 @@ 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-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);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-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);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>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ resolved[paths[hover].name]==null ? 'no data' : valueFormat(resolved[paths[hover].name]) }}</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ resolved[paths[hover].name]==null ? 'no data' : valueFormat(resolved[paths[hover].name]) }}</div>
     </div>
   </div>
 </template>

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.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(--text-sm)", ...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: 6, fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: 'var(--text-sm)', ...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/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>
   );
 }