@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/components/charts/CandlestickChart.vue

@@ -38,23 +38,23 @@ function move(e){
       <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.axisB" fill="var(--bg-hover)"/>
-      <path v-if="g.maPath" :d="g.maPath" fill="none" stroke="var(--series-8)" stroke-width="1.3"/>
+      <path v-if="g.maPath" :d="g.maPath" fill="none" stroke="var(--chart-total)" stroke-width="1.3"/>
       <g v-for="b in g.bars" :key="b.i" :opacity="hover==null||hover===b.i?1:0.5" style="transition:opacity var(--dur-fast) var(--ease-out)">
         <line :x1="b.x" :x2="b.x" :y1="b.yH" :y2="b.yL" :stroke="b.col" stroke-width="1"/>
         <rect :x="b.x-b.bw/2" :y="b.top" :width="b.bw" :height="b.body" :fill="b.solid?b.col:'var(--bg-surface)'" :stroke="b.col" stroke-width="1"/>
         <rect v-if="volume && b.vY!=null" :x="b.x-b.bw/2" :y="b.vY" :width="b.bw" :height="b.vH" :fill="b.col" opacity="0.35"/>
       </g>
       <line v-if="volume" :x1="g.pad.l" :x2="width-g.pad.r" :y1="height-g.axisB" :y2="height-g.axisB" stroke="var(--chart-axis)" stroke-width="1"/>
-      <text v-if="axes" v-for="b in g.bars.filter(b=>b.i%g.every===0)" :key="'t'+b.i" :x="b.x" :y="height-6" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ b.c.t }}</text>
+      <text v-if="axes" v-for="b in g.bars.filter(b=>b.i%g.every===0)" :key="'t'+b.i" :x="b.x" :y="height-6" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ b.c.t }}</text>
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.cx(hover)+'px',top:(height/2-20)+'px',transform:g.cx(hover)>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">{{ candles[hover].t }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">O {{ valueFormat(candles[hover].o) }} · H {{ valueFormat(candles[hover].h) }} · L {{ valueFormat(candles[hover].l) }} · C {{ valueFormat(candles[hover].c) }}</div>
-      <div :style="{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',color:candles[hover].c>=candles[hover].o?'var(--chart-pos)':'var(--chart-neg)'}">
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">O {{ valueFormat(candles[hover].o) }} · H {{ valueFormat(candles[hover].h) }} · L {{ valueFormat(candles[hover].l) }} · C {{ valueFormat(candles[hover].c) }}</div>
+      <div :style="{fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-2xs-mono)',color:candles[hover].c>=candles[hover].o?'var(--chart-pos)':'var(--chart-neg)'}">
         {{ (candles[hover].c-candles[hover].o>=0?'+':'')+(((candles[hover].c-candles[hover].o)/(candles[hover].o||1))*100).toFixed(2) }}%<span v-if="candles[hover].v!=null" style="color:var(--text-muted)"> · vol {{ fmtNum(candles[hover].v) }}</span>
       </div>
     </div>

package/components/charts/ChartKit.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { fmtNum, seriesColor } from "./chart-geometry.js";
 
-const sans = "var(--font-sans)", mono = "var(--font-mono)";
+/* Chart numbers use the UI font with tabular figures; the monospace font is reserved for code. */
+const sans = "var(--font-sans)", num = { fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums" };
 
 /** Legend row. items: [{label,color}] — with onToggle, clicking mutes a series. */
 export function ChartLegend({ items = [], hidden = [], onToggle, align = "left", style }) {
@@ -11,10 +12,10 @@ export function ChartLegend({ items = [], hidden = [], onToggle, align = "left",
         const off = hidden.includes(it.label);
         return (
           <span key={it.label} role={onToggle ? "button" : undefined} tabIndex={onToggle ? 0 : undefined}
-            onClick={onToggle ? () => onToggle(it.label) : undefined}
+            onClick={onToggle ? () => onToggle(it.label) : undefined} data-ink={onToggle ? "" : undefined}
             style={{ display: "inline-flex", alignItems: "center", gap: 6, cursor: onToggle ? "pointer" : "default", opacity: off ? 0.4 : 1, transition: "var(--t-hover)" }}>
             <span style={{ width: 8, height: 8, borderRadius: 2, background: it.color || seriesColor(i), flexShrink: 0 }} />
-            <span style={{ fontFamily: sans, fontSize: "var(--text-xs)", color: "var(--text-secondary)", textDecoration: off ? "line-through" : "none" }}>{it.label}</span>
+            <span style={{ fontFamily: sans, fontSize: "var(--text-xs)", color: onToggle ? "var(--ink, var(--text-secondary))" : "var(--text-secondary)", textDecoration: off ? "line-through" : "none" }}>{it.label}</span>
           </span>
         );
       })}
@@ -31,7 +32,7 @@ export function ChartTooltip({ x, y, title, rows = [], flip }) {
         <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, padding: "1px 0" }}>
           {r.color ? <span style={{ width: 7, height: 7, borderRadius: 2, background: r.color, flexShrink: 0 }} /> : null}
           <span style={{ fontFamily: sans, fontSize: "var(--text-xs)", color: "var(--text-secondary)", whiteSpace: "nowrap" }}>{r.label}</span>
-          <span style={{ fontFamily: mono, fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: "auto", paddingLeft: 10 }}>{r.value}</span>
+          <span style={{ ...num, fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: "auto", paddingLeft: 10 }}>{r.value}</span>
         </div>
       ))}
     </div>
@@ -45,12 +46,12 @@ export function PlotGrid({ w, h, pad, ticks, sy, xLabels = [], sxLabel, showAxis
       {ticks.map((t) => (
         <g key={t}>
           <line x1={pad.l} x2={w - pad.r} y1={sy(t)} y2={sy(t)} stroke={t === 0 ? "var(--chart-axis)" : "var(--chart-grid)"} strokeWidth="1" />
-          <text x={pad.l - 8} y={sy(t) + 3} textAnchor="end" style={{ fontFamily: mono, fontSize: 10, fill: "var(--chart-label)" }}>{yFormat(t)}</text>
+          <text x={pad.l - 8} y={sy(t) + 3} textAnchor="end" style={{ ...num, fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{yFormat(t)}</text>
         </g>
       ))}
       {showAxisLine ? <line x1={pad.l} x2={pad.l} y1={pad.t} y2={h - pad.b} stroke="var(--chart-axis)" strokeWidth="1" /> : null}
       {xLabels.map((lb, i) => (lb == null ? null : (
-        <text key={i} x={sxLabel(i)} y={h - pad.b + 16} textAnchor="middle" style={{ fontFamily: sans, fontSize: 10, fill: "var(--chart-label)" }}>{lb}</text>
+        <text key={i} x={sxLabel(i)} y={h - pad.b + 16} textAnchor="middle" style={{ fontFamily: sans, fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{lb}</text>
       )))}
     </g>
   );
@@ -58,7 +59,7 @@ export function PlotGrid({ w, h, pad, ticks, sy, xLabels = [], sxLabel, showAxis
 
 /** Thin x labels only (sm tier / no y axis). */
 export function XLabels({ h, pad, xLabels = [], sxLabel }) {
-  return <g>{xLabels.map((lb, i) => (lb == null ? null : <text key={i} x={sxLabel(i)} y={h - pad.b + 16} textAnchor="middle" style={{ fontFamily: sans, fontSize: 10, fill: "var(--chart-label)" }}>{lb}</text>))}</g>;
+  return <g>{xLabels.map((lb, i) => (lb == null ? null : <text key={i} x={sxLabel(i)} y={h - pad.b + 16} textAnchor="middle" style={{ fontFamily: sans, fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{lb}</text>))}</g>;
 }
 
 /** Skip x labels so they never collide: keeps ~every nth. */

package/components/charts/ChartLegend.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { seriesColor } from './chart-geometry.js'
+// Legend row. items: [{ label, color? }]. Pass toggleable + listen to @toggle(label) to mute a series; hidden lists muted labels.
+defineProps({ items: { type: Array, default: () => [] }, hidden: { type: Array, default: () => [] }, toggleable: Boolean, align: { type: String, default: 'left' }, style: Object })
+const emit = defineEmits(['toggle'])
+</script>
+<template>
+  <div :style="{ display: 'flex', flexWrap: 'wrap', gap: '4px 14px', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', lineHeight: 'normal', ...style }">
+    <span v-for="(it, i) in items" :key="it.label" :role="toggleable ? 'button' : undefined" :tabindex="toggleable ? 0 : undefined"
+      @click="toggleable && emit('toggle', it.label)" :data-ink="toggleable ? '' : undefined" @keydown.enter="toggleable && emit('toggle', it.label)"
+      :style="{ display: 'inline-flex', alignItems: 'center', gap: '6px', cursor: toggleable ? 'pointer' : 'default', opacity: hidden.includes(it.label) ? 0.4 : 1, transition: 'var(--t-hover)' }">
+      <span :style="{ width: '8px', height: '8px', borderRadius: '2px', background: it.color || seriesColor(i), flexShrink: 0 }"></span>
+      <span :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', color: toggleable ? 'var(--ink, var(--text-secondary))' : 'var(--text-secondary)', textDecoration: hidden.includes(it.label) ? 'line-through' : 'none' }">{{ it.label }}</span>
+    </span>
+  </div>
+</template>

package/components/charts/ChartTooltip.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { px } from '../px.js'
+// Floating chart tooltip. rows: [{ label, value, color? }]; pins near (x, y) inside a position:relative chart wrapper.
+// flip puts it to the left of the point (use near the right edge).
+defineProps({ x: [Number, String], y: [Number, String], title: [String, Number], rows: { type: Array, default: () => [] }, flip: Boolean })
+</script>
+<template>
+  <div :style="{ position: 'absolute', left: px(x), top: px(y), transform: `translate(${flip ? 'calc(-100% - 10px)' : '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', minWidth: '90px', lineHeight: 'normal', whiteSpace: 'nowrap' }">
+    <div v-if="title != null" :style="{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', paddingBottom: rows.length ? '4px' : 0, whiteSpace: 'nowrap' }">{{ title }}</div>
+    <div v-for="(r, i) in rows" :key="i" style="display:flex;align-items:center;gap:6px;padding:1px 0">
+      <span v-if="r.color" :style="{ width: '7px', height: '7px', borderRadius: '2px', background: r.color, flexShrink: 0 }"></span>
+      <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap">{{ r.label }}</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">{{ r.value }}</span>
+    </div>
+  </div>
+</template>

package/components/charts/ChordChart.jsx

@@ -43,8 +43,8 @@ export function ChordChart({ labels = [], matrix = [], size = 380, thickness = 1
             <g key={a.i} onMouseEnter={interactive ? () => setHover({ kind: "node", i: a.i }) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
               style={{ cursor: interactive ? "default" : undefined }}>
               <path d={arcPath(cx, cy, rO, rI, a.a0, a.a1)} fill={colorOf(a.i)} opacity={hover == null || on ? 1 : 0.4} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />
-              <text x={lx} y={ly + 3} textAnchor={anchor} style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fill: on ? "var(--text-heading)" : "var(--text-secondary)" }}>{labels[a.i]}</text>
-              <text x={lx} y={ly + 14} textAnchor={anchor} style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{valueFormat(a.value)}</text>
+              <text x={lx} y={ly + 3} textAnchor={anchor} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: on ? "var(--text-heading)" : "var(--text-secondary)" }}>{labels[a.i]}</text>
+              <text x={lx} y={ly + 14} textAnchor={anchor} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{valueFormat(a.value)}</text>
             </g>
           );
         })}

package/components/charts/ChordChart.vue

@@ -42,13 +42,13 @@ const tip = computed(()=>{
         style="transition:opacity var(--dur-fast) var(--ease-out)"/>
       <g v-for="a in g.arcs" :key="a.i" @mouseenter="interactive && (hover={kind:'node',i:a.i})" @mouseleave="interactive && (hover=null)">
         <path :d="a.d" :fill="a.color" :opacity="hover==null||(hover.kind==='node'&&hover.i===a.i)?1:0.4" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
-        <text :x="a.lx" :y="a.ly+3" :text-anchor="a.anchor" style="font-family:var(--font-sans);font-size:10.5px;fill:var(--text-secondary)">{{ labels[a.i] }}</text>
-        <text :x="a.lx" :y="a.ly+14" :text-anchor="a.anchor" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ valueFormat(a.value) }}</text>
+        <text :x="a.lx" :y="a.ly+3" :text-anchor="a.anchor" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--text-secondary)">{{ labels[a.i] }}</text>
+        <text :x="a.lx" :y="a.ly+14" :text-anchor="a.anchor" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ valueFormat(a.value) }}</text>
       </g>
     </svg>
     <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>
 </template>

package/components/charts/DonutChart.jsx

@@ -62,7 +62,7 @@ export function DonutChart({ segments = [], size = 180, thickness = 22, pie = fa
                 style={{ display: "inline-flex", alignItems: "center", gap: 7, cursor: interactive ? "default" : undefined, opacity: hover == null || hover === i ? 1 : 0.45, transition: "var(--t-hover)" }}>
                 <span style={{ width: 8, height: 8, borderRadius: 2, background: colorOf(s, i), flexShrink: 0 }} />
                 <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{s.label}</span>
-                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: 6 }}>{((s.value / total) * 100).toFixed(0)}%</span>
+                <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: 6 }}>{((s.value / total) * 100).toFixed(0)}%</span>
               </span>
             ))}
           </div>

package/components/charts/DonutChart.vue

@@ -45,7 +45,7 @@ const tipStyle = computed(() => {
         </div>
         <div v-if="hover!=null && interactive" :style="tipStyle" >
           <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px;white-space:nowrap">{{ segments[hover].label }}</div>
-          <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);white-space:nowrap">{{ valueFormat(segments[hover].value) }} · {{ ((segments[hover].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(segments[hover].value) }} · {{ ((segments[hover].value/total)*100).toFixed(1) }}%</div>
         </div>
       </div>
       <div v-if="legend" style="display:flex;flex-direction:column;gap:6px">
@@ -53,7 +53,7 @@ const tipStyle = computed(() => {
           :style="{display:'inline-flex',alignItems:'center',gap:'7px',opacity:hover==null||hover===a.i?1:.45,transition:'var(--t-hover)'}">
           <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:a.color,flexShrink:0}"/>
           <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ a.s.label }}</span>
-          <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:6px">{{ ((a.s.value/total)*100).toFixed(0) }}%</span>
+          <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading);margin-left:6px">{{ ((a.s.value/total)*100).toFixed(0) }}%</span>
         </span>
       </div>
     </div>

package/components/charts/FunnelChart.jsx

@@ -20,12 +20,12 @@ export function FunnelChart({ stages = [], width = 420, bandHeight = 34, gap = 1
             <div style={{ display: "flex", justifyContent: "center" }}>
               <div style={{ width: Math.max(12, share * 100) + "%", height: bandHeight, borderRadius: "var(--radius-sm)", background: "var(--series-1)", opacity: 1 - i * (0.55 / Math.max(1, stages.length - 1)), display: "flex", alignItems: "center", justifyContent: "center", gap: 8, minWidth: 150, transition: "width var(--dur) var(--ease-out)" }}>
                 <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--on-accent)", whiteSpace: "nowrap" }}>{s.label}</span>
-                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--on-accent)" }}>{valueFormat(s.value)}</span>
-                {hover === i ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--on-accent)", opacity: 0.8 }}>{((share) * 100).toFixed(0)}% of top</span> : null}
+                <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--on-accent)" }}>{valueFormat(s.value)}</span>
+                {hover === i ? <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: "var(--on-accent)", opacity: 0.8 }}>{((share) * 100).toFixed(0)}% of top</span> : null}
               </div>
             </div>
             {prev != null ? (
-              <div style={{ textAlign: "center", paddingTop: 3, fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: prev < 0.5 ? "var(--chart-neg)" : "var(--text-muted)" }}>
+              <div style={{ textAlign: "center", paddingTop: 3, fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: prev < 0.5 ? "var(--chart-neg)" : "var(--text-muted)" }}>
                 ↓ {(prev * 100).toFixed(0)}%
               </div>
             ) : null}

package/components/charts/FunnelChart.vue

@@ -17,13 +17,13 @@ const rows = computed(() => {
     <div v-for="(s,i) in rows" :key="s.label" @mouseenter="interactive && (hover=i)" @mouseleave="interactive && (hover=null)"
       :style="{paddingBottom:i<rows.length-1?gap+'px':0,opacity:hover==null||hover===i?1:0.55,transition:'var(--t-hover)'}">
       <div style="display:flex;justify-content:center">
-        <div :style="{width:s.share+'%',height:bandHeight+'px',borderRadius:'var(--radius-sm)',background:'var(--series-1)',opacity:s.opacity,display:'flex',alignItems:'center',justifyContent:'center',gap:'8px',minWidth:'150px'}">
+        <div :style="{width:s.share+'%',height:bandHeight+'px',borderRadius:'var(--radius-sm)',background:'var(--series-1)',opacity:s.opacity,display:'flex',alignItems:'center',justifyContent:'center',gap:'8px',minWidth:'150px',transition:'width var(--dur) var(--ease-out)'}">
           <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--on-accent);white-space:nowrap">{{ s.label }}</span>
-          <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--on-accent)">{{ valueFormat(s.value) }}</span>
-          <span v-if="hover===i" style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--on-accent);opacity:.8">{{ s.share.toFixed(0) }}% of top</span>
+          <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--on-accent)">{{ valueFormat(s.value) }}</span>
+          <span v-if="hover===i" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);color:var(--on-accent);opacity:.8">{{ s.share.toFixed(0) }}% of top</span>
         </div>
       </div>
-      <div v-if="s.conv!=null" :style="{textAlign:'center',paddingTop:'3px',fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',color:s.conv<0.5?'var(--chart-neg)':'var(--text-muted)'}">↓ {{ (s.conv*100).toFixed(0) }}%</div>
+      <div v-if="s.conv!=null" :style="{textAlign:'center',paddingTop:'3px',fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-2xs-mono)',color:s.conv<0.5?'var(--chart-neg)':'var(--text-muted)'}">↓ {{ (s.conv*100).toFixed(0) }}%</div>
     </div>
   </div>
 </template>

package/components/charts/GanttChart.jsx

@@ -33,7 +33,7 @@ export function GanttChart({ tasks = [], width = 660, rowHeight = 26, today, uni
         {ticks.map((d, i) => (
           <g key={i}>
             <line x1={x(d)} x2={x(d)} y1={20} y2={height - 4} stroke="var(--chart-grid)" strokeWidth="1" />
-            <text x={x(d)} y={12} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 9.5, fill: "var(--chart-label)" }}>{fmt(d)}</text>
+            <text x={x(d)} y={12} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{fmt(d)}</text>
           </g>
         ))}
         {[...Array(days)].map((_, i) => {
@@ -49,7 +49,7 @@ export function GanttChart({ tasks = [], width = 660, rowHeight = 26, today, uni
           return (
             <g key={t.label + i} onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
               opacity={hover == null || on ? 1 : 0.55} style={{ transition: "opacity var(--dur-fast) var(--ease-out)", cursor: interactive ? "default" : undefined }}>
-              <text x={0} y={y + rowHeight / 2 + 3} style={{ fontFamily: "var(--font-sans)", fontSize: 11, fill: on ? "var(--text-heading)" : "var(--text-secondary)" }}>
+              <text x={0} y={y + rowHeight / 2 + 3} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fill: on ? "var(--text-heading)" : "var(--text-secondary)" }}>
                 {t.label.length > 22 ? t.label.slice(0, 21) + "…" : t.label}
               </text>
               {t.milestone ? (

package/components/charts/GanttChart.vue

@@ -35,12 +35,12 @@ const g = computed(() => {
     <svg :width="width" :height="g.height" role="img">
       <g v-for="(d,i) in g.ticks" :key="'t'+i">
         <line :x1="g.x(d)" :x2="g.x(d)" :y1="20" :y2="g.height-4" stroke="var(--chart-grid)" stroke-width="1"/>
-        <text :x="g.x(d)" :y="12" text-anchor="middle" style="font-family:var(--font-sans);font-size:9.5px;fill:var(--chart-label)">{{ fmt(d) }}</text>
+        <text :x="g.x(d)" :y="12" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ fmt(d) }}</text>
       </g>
       <rect v-for="(d,i) in g.weekends" :key="'w'+i" :x="g.x(d)" :y="20" :width="g.colW" :height="g.height-24" fill="var(--bg-inset)" opacity="0.6"/>
       <g v-for="r in g.rows" :key="r.t.label+r.i" @mouseenter="interactive && (hover=r.i)" @mouseleave="interactive && (hover=null)"
         :opacity="hover==null||hover===r.i?1:0.55" style="transition:opacity var(--dur-fast) var(--ease-out)">
-        <text :x="0" :y="r.y+rowHeight/2+3" :style="{fontFamily:'var(--font-sans)',fontSize:'11px',fill:hover===r.i?'var(--text-heading)':'var(--text-secondary)'}">{{ r.label }}</text>
+        <text :x="0" :y="r.y+rowHeight/2+3" :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-xs)',fill:hover===r.i?'var(--text-heading)':'var(--text-secondary)'}">{{ r.label }}</text>
         <path v-if="r.t.milestone" :d="'M'+r.bx+' '+(r.y+rowHeight/2-6)+' L'+(r.bx+6)+' '+(r.y+rowHeight/2)+' L'+r.bx+' '+(r.y+rowHeight/2+6)+' L'+(r.bx-6)+' '+(r.y+rowHeight/2)+' Z'" :fill="r.color"/>
         <template v-else>
           <rect :x="r.bx" :y="r.y+4" :width="r.bw" :height="rowHeight-12" rx="3" :fill="r.color" opacity="0.32"/>
@@ -54,7 +54,7 @@ const g = computed(() => {
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.rows[hover].bx+'px',top:(g.rows[hover].y+rowHeight/2)+'px',transform:g.rows[hover].bx>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">{{ tasks[hover].label }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ fmt(tasks[hover].start) }} → {{ fmt(tasks[hover].end||tasks[hover].start) }} · {{ g.rows[hover].dur }}d<span v-if="tasks[hover].progress!=null"> · {{ Math.round(tasks[hover].progress*100) }}%</span></div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ fmt(tasks[hover].start) }} → {{ fmt(tasks[hover].end||tasks[hover].start) }} · {{ g.rows[hover].dur }}d<span v-if="tasks[hover].progress!=null"> · {{ Math.round(tasks[hover].progress*100) }}%</span></div>
     </div>
   </div>
 </template>

package/components/charts/GaugeChart.jsx

@@ -21,8 +21,8 @@ export function GaugeChart({ value = 0, max = 100, size = 180, thickness = 14, l
         {t > 0 ? <path d={arcPath(cx, cy, rO, rI, A0, A0 + t * 180)} fill={color}
           onMouseEnter={interactive ? () => setHover(true) : undefined} onMouseLeave={interactive ? () => setHover(false) : undefined}
           style={{ filter: hover ? "brightness(1.1)" : "none", transition: "filter var(--dur-fast) var(--ease-out)" }} /> : null}
-        <text x={cx - rO + thickness / 2} y={cy + 13} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>0</text>
-        <text x={cx + rO - thickness / 2} y={cy + 13} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{fmtNum(max)}</text>
+        <text x={cx - rO + thickness / 2} y={cy + 13} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>0</text>
+        <text x={cx + rO - thickness / 2} y={cy + 13} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{fmtNum(max)}</text>
       </svg>
       <div style={{ position: "absolute", left: 0, right: 0, top: cy - size / 7, textAlign: "center", pointerEvents: "none" }}>
         <div style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-light)", fontSize: size / 7, lineHeight: 1, color: "var(--text-heading)" }}>{valueFormat(value)}</div>

package/components/charts/GaugeChart.vue

@@ -18,8 +18,8 @@ const g = computed(() => {
       <path :d="g.track" fill="var(--chart-track)"/>
       <path v-if="g.fill" :d="g.fill" :fill="g.color" @mouseenter="interactive && (hover=true)" @mouseleave="interactive && (hover=false)"
         :style="{filter:hover?'brightness(1.1)':'none',transition:'filter var(--dur-fast) var(--ease-out)'}"/>
-      <text :x="g.cx-g.rO+thickness/2" :y="g.cy+13" text-anchor="middle" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">0</text>
-      <text :x="g.cx+g.rO-thickness/2" :y="g.cy+13" text-anchor="middle" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ fmtNum(max) }}</text>
+      <text :x="g.cx-g.rO+thickness/2" :y="g.cy+13" text-anchor="middle" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">0</text>
+      <text :x="g.cx+g.rO-thickness/2" :y="g.cy+13" text-anchor="middle" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ fmtNum(max) }}</text>
     </svg>
     <div :style="{position:'absolute',left:0,right:0,top:(g.cy-size/7)+'px',textAlign:'center',pointerEvents:'none'}">
       <div :style="{fontFamily:'var(--font-sans)',fontWeight:'var(--weight-light)',fontSize:size/7+'px',lineHeight:1,color:'var(--text-heading)'}">{{ valueFormat(value) }}</div>

package/components/charts/HeatmapChart.jsx

@@ -34,7 +34,7 @@ export function HeatmapChart({ xLabels = [], yLabels = [], values = [], width =
     <div style={{ ...wrapStyle, width, ...style }}>
       <div style={{ display: "grid", gridTemplateColumns: `${labelW}px repeat(${cols}, 1fr)`, gap: gap + "px", lineHeight: "normal" }}>
         <span />
-        {xLabels.map((x) => <span key={x} style={{ fontFamily: "var(--font-sans)", fontSize: 10, color: "var(--chart-label)", textAlign: "center", paddingBottom: 2 }}>{x}</span>)}
+        {xLabels.map((x) => <span key={x} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", color: "var(--chart-label)", textAlign: "center", paddingBottom: 2 }}>{x}</span>)}
         {yLabels.map((y, r) => (
           <React.Fragment key={y}>
             <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)", display: "flex", alignItems: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", paddingRight: 6 }}>{y}</span>
@@ -46,7 +46,7 @@ export function HeatmapChart({ xLabels = [], yLabels = [], values = [], width =
                   onMouseEnter={interactive ? () => setHover({ r, c }) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
                   style={{ height: cellHeight, borderRadius: 4, background: cellFill(v), display: "flex", alignItems: "center", justifyContent: "center",
                     outline: on ? "2px solid var(--focus-border)" : "none", outlineOffset: -1, transition: "var(--t-hover)", cursor: interactive ? "default" : undefined }}>
-                  {showValues && v != null ? <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: textOn(v) }}>{valueFormat(v)}</span> : null}
+                  {showValues && v != null ? <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", color: textOn(v) }}>{valueFormat(v)}</span> : null}
                 </span>
               );
             })}

package/components/charts/HeatmapChart.vue

@@ -24,13 +24,13 @@ function ink(v){
   <div :style="{width:width+'px',...style}">
     <div :style="{display:'grid',gridTemplateColumns:'86px repeat('+xLabels.length+', 1fr)',gap:gap+'px'}">
       <span/>
-      <span v-for="x in xLabels" :key="x" style="font-family:var(--font-sans);font-size:10px;color:var(--chart-label);text-align:center;padding-bottom:2px">{{ x }}</span>
+      <span v-for="x in xLabels" :key="x" style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--chart-label);text-align:center;padding-bottom:2px">{{ x }}</span>
       <template v-for="(y,r) in yLabels" :key="y">
         <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary);display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px">{{ y }}</span>
         <span v-for="(x,c) in xLabels" :key="c" :title="y+' · '+x+(values[r]&&values[r][c]!=null?' = '+valueFormat(values[r][c]):'')"
           @mouseenter="interactive && (hover={r,c})" @mouseleave="interactive && (hover=null)"
           :style="{height:cellHeight+'px',borderRadius:'4px',background:fill(values[r]?values[r][c]:null),display:'flex',alignItems:'center',justifyContent:'center',outline:hover&&hover.r===r&&hover.c===c?'2px solid var(--focus-border)':'none',outlineOffset:'-1px',transition:'var(--t-hover)'}">
-          <span v-if="showValues && values[r] && values[r][c]!=null" :style="{fontFamily:'var(--font-mono)',fontSize:'10px',color:ink(values[r][c])}">{{ valueFormat(values[r][c]) }}</span>
+          <span v-if="showValues && values[r] && values[r][c]!=null" :style="{fontFamily: 'var(--font-sans)', fontVariantNumeric: 'tabular-nums',fontSize:'var(--text-2xs-mono)',color:ink(values[r][c])}">{{ valueFormat(values[r][c]) }}</span>
         </span>
       </template>
     </div>

package/components/charts/Histogram.jsx

@@ -40,10 +40,10 @@ export function Histogram({ values = [], buckets, bins = 12, width = 560, height
         ))}
         {mean != null ? <g>
           <line x1={sxVal(mean)} x2={sxVal(mean)} y1={pad.t} y2={height - pad.b} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="3 3" />
-          <text x={Math.min(sxVal(mean) + 4, width - 60)} y={pad.t - 8} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>mean {valueFormat(mean)}</text>
+          <text x={Math.min(sxVal(mean) + 4, width - 60)} y={pad.t - 8} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>mean {valueFormat(mean)}</text>
         </g> : null}
         {axes ? [0, Math.floor(bkt.length / 2), bkt.length - 1].map((i) => (
-          <text key={i} x={pad.l + slot * i + slot / 2} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{valueFormat(bkt[i].from)}</text>
+          <text key={i} x={pad.l + slot * i + slot / 2} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{valueFormat(bkt[i].from)}</text>
         )) : null}
       </svg>
       {hover != null && interactive ? (

package/components/charts/Histogram.vue

@@ -34,20 +34,20 @@ function move(e){
       <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)">{{ countFormat(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)">{{ countFormat(t) }}</text>
         </g>
       </template>
       <rect v-for="(b,i) in g.bkt" :key="i" :x="g.pad.l+g.slot*i+0.5" :y="g.sy(b.n)" :width="Math.max(1,g.slot-1.5)" :height="Math.max(1,g.sy(0)-g.sy(b.n))" rx="2"
         :fill="color" :opacity="hover==null?0.9:(hover===i?1:0.4)" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
       <template v-if="g.mean!=null">
         <line :x1="g.meanLine" :x2="g.meanLine" :y1="g.pad.t" :y2="height-g.pad.b" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="3 3"/>
-        <text :x="g.meanX" :y="g.pad.t-8" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">mean {{ valueFormat(g.mean) }}</text>
+        <text :x="g.meanX" :y="g.pad.t-8" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">mean {{ valueFormat(g.mean) }}</text>
       </template>
-      <text v-if="axes" v-for="i in g.labels" :key="'l'+i" :x="g.pad.l+g.slot*i+g.slot/2" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ valueFormat(g.bkt[i].from) }}</text>
+      <text v-if="axes" v-for="i in g.labels" :key="'l'+i" :x="g.pad.l+g.slot*i+g.slot/2" :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)">{{ valueFormat(g.bkt[i].from) }}</text>
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:(g.pad.l+g.slot*hover+g.slot/2)+'px',top:(height/2-10)+'px',transform:(g.pad.l+g.slot*hover)>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">{{ valueFormat(g.bkt[hover].from) }} – {{ valueFormat(g.bkt[hover].to) }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ countFormat(g.bkt[hover].n) }} · {{ ((g.bkt[hover].n/g.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)">{{ countFormat(g.bkt[hover].n) }} · {{ ((g.bkt[hover].n/g.total)*100).toFixed(1) }}%</div>
     </div>
   </div>
 </template>

package/components/charts/LineChart.jsx

@@ -58,7 +58,7 @@ export function LineChart({ series = [], xLabels = [], width = 560, height = 240
         {axes ? <PlotGrid w={width} h={height} pad={pad} ticks={ticks} sy={sy} xLabels={thinLabels(xLabels)} sxLabel={sx} yFormat={yFormat} /> : null}
         {target != null ? <g>
           <line x1={pad.l} x2={width - pad.r} y1={sy(target)} y2={sy(target)} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="3 3" />
-          <text x={width - pad.r} y={sy(target) - 4} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{targetLabel || "Target " + yFormat(target)}</text>
+          <text x={width - pad.r} y={sy(target) - 4} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{targetLabel || "Target " + yFormat(target)}</text>
         </g> : null}
         {painted.map((L) => (
           <g key={L.s.name}>

package/components/charts/LineChart.vue

@@ -52,13 +52,13 @@ function toggle(name){
       <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)">{{ 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="(lb,i) in xLabels" :key="'x'+i" :x="g.sx(i)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ lb }}</text>
+        <text v-for="(lb,i) in xLabels" :key="'x'+i" :x="g.sx(i)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ lb }}</text>
       </template>
       <template v-if="target!=null">
         <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(target)" :y2="g.sy(target)" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="3 3"/>
-        <text :x="width-g.pad.r" :y="g.sy(target)-4" text-anchor="end" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ targetLabel || 'Target '+yFormat(target) }}</text>
+        <text :x="width-g.pad.r" :y="g.sy(target)-4" text-anchor="end" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ targetLabel || 'Target '+yFormat(target) }}</text>
       </template>
       <g v-for="ln in g.lines" :key="ln.s.name">
         <path v-if="area||stacked" :d="ln.fill" :fill="'url(#'+uid+'-'+series.indexOf(ln.s)+')'"/>
@@ -72,7 +72,7 @@ function toggle(name){
       <div v-for="ln in g.lines" :key="ln.s.name" style="display:flex;align-items:center;gap:6px;padding:1px 0">
         <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:ln.color,flexShrink:0}"/>
         <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap">{{ ln.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">{{ yFormat(ln.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">{{ yFormat(ln.s.values[hover]) }}</span>
       </div>
     </div>
     <div v-if="legend && series.length>1" style="display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:8px;line-height:normal">

package/components/charts/ParetoChart.jsx

@@ -32,7 +32,7 @@ export function ParetoChart({ items = [], width = 560, height = 260, axes = true
         {axes ? <PlotGrid w={width} h={height} pad={pad} ticks={ticks} sy={sy} xLabels={[]} sxLabel={() => 0} yFormat={valueFormat} /> : null}
         {hover != null ? <rect x={pad.l + slot * hover} y={pad.t} width={slot} height={height - pad.t - pad.b} fill="var(--bg-hover)" /> : null}
         <line x1={pad.l} x2={width - pad.r} y1={sc(threshold)} y2={sc(threshold)} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="3 3" />
-        <text x={width - pad.r - 2} y={sc(threshold) - 4} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{threshold}%</text>
+        <text x={width - pad.r - 2} y={sc(threshold) - 4} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{threshold}%</text>
         {rows.map((r, i) => (
           <rect key={r.label} x={cx(i) - bw / 2} y={sy(r.value)} width={bw} height={Math.max(1, sy(0) - sy(r.value))} rx="2"
             fill={i <= vital ? "var(--series-1)" : "var(--chart-track)"} stroke={i > vital ? "var(--border-control)" : "none"}
@@ -40,8 +40,8 @@ export function ParetoChart({ items = [], width = 560, height = 260, axes = true
         ))}
         <path d={linePath(rows.map((r, i) => [cx(i), sc(r.cum)]))} fill="none" stroke="var(--chart-total)" strokeWidth="1.5" />
         {rows.map((r, i) => <circle key={i} cx={cx(i)} cy={sc(r.cum)} r={hover === i ? 3.4 : 2.4} fill="var(--chart-total)" />)}
-        {axes ? [0, 25, 50, 75, 100].map((t) => <text key={t} x={width - pad.r + 6} y={sc(t) + 3} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{t}%</text>) : null}
-        {rows.map((r, i) => <text key={"l" + i} x={cx(i)} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{r.label}</text>)}
+        {axes ? [0, 25, 50, 75, 100].map((t) => <text key={t} x={width - pad.r + 6} y={sc(t) + 3} style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-2xs-mono)", fill: "var(--chart-label)" }}>{t}%</text>) : null}
+        {rows.map((r, i) => <text key={"l" + i} x={cx(i)} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{r.label}</text>)}
       </svg>
       {hover != null && interactive ? (
         <ChartTooltip x={cx(hover)} y={height / 2 - 10} flip={cx(hover) > width * 0.62} title={rows[hover].label}

package/components/charts/ParetoChart.vue

@@ -33,23 +33,23 @@ function move(e){
       <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)"/>
       <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sc(threshold)" :y2="g.sc(threshold)" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="3 3"/>
-      <text :x="width-g.pad.r-2" :y="g.sc(threshold)-4" text-anchor="end" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ threshold }}%</text>
+      <text :x="width-g.pad.r-2" :y="g.sc(threshold)-4" text-anchor="end" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ threshold }}%</text>
       <rect v-for="(r,i) in g.rows" :key="r.label" :x="g.cx(i)-g.bw/2" :y="g.sy(r.value)" :width="g.bw" :height="Math.max(1,g.sy(0)-g.sy(r.value))" rx="2"
         :fill="i<=g.vital?'var(--series-1)':'var(--chart-track)'" :stroke="i>g.vital?'var(--border-control)':'none'"
         :opacity="hover==null||hover===i?1:0.5" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
       <path :d="g.line" fill="none" stroke="var(--chart-total)" stroke-width="1.5"/>
       <circle v-for="(r,i) in g.rows" :key="'c'+i" :cx="g.cx(i)" :cy="g.sc(r.cum)" :r="hover===i?3.4:2.4" fill="var(--chart-total)"/>
-      <text v-if="axes" v-for="t in g.pct" :key="'p'+t" :x="width-g.pad.r+6" :y="g.sc(t)+3" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ t }}%</text>
-      <text v-for="(r,i) in g.rows" :key="'l'+i" :x="g.cx(i)" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ r.label }}</text>
+      <text v-if="axes" v-for="t in g.pct" :key="'p'+t" :x="width-g.pad.r+6" :y="g.sc(t)+3" style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-2xs-mono);fill:var(--chart-label)">{{ t }}%</text>
+      <text v-for="(r,i) in g.rows" :key="'l'+i" :x="g.cx(i)" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ r.label }}</text>
     </svg>
     <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.cx(hover)+'px',top:(height/2-10)+'px',transform:g.cx(hover)>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">{{ g.rows[hover].label }}</div>
-      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(g.rows[hover].value) }} · {{ ((g.rows[hover].value/g.total)*100).toFixed(1) }}% · cum {{ g.rows[hover].cum.toFixed(1) }}%</div>
+      <div style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(g.rows[hover].value) }} · {{ ((g.rows[hover].value/g.total)*100).toFixed(1) }}% · cum {{ g.rows[hover].cum.toFixed(1) }}%</div>
     </div>
   </div>
 </template>

package/components/charts/Pie3D.jsx

@@ -132,7 +132,7 @@ export function Pie3D({ segments = [], size = 300, thickness = 26, innerRatio =
                 style={{ display: "inline-flex", alignItems: "center", gap: 7, opacity: hover == null || hover === i ? 1 : 0.45 }}>
                 <span style={{ width: 8, height: 8, borderRadius: 2, background: color, flexShrink: 0 }} />
                 <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{s.label}</span>
-                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: 6 }}>
+                <span style={{ fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: 6 }}>
                   {hover === i ? valueFormat(s.value) : ((s.value / total) * 100).toFixed(0) + "%"}
                 </span>
               </span>

package/components/charts/Pie3D.vue

@@ -98,7 +98,7 @@ function enter(i){ if (props.interactive && !drag.value) hover.value = i }
         </svg>
         <div v-if="g.tip && interactive" :style="{position:'absolute',left:g.tip.p[0]+'px',top:g.tip.p[1]+'px',transform:g.tip.p[0]>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">{{ g.tip.s.label }}</div>
-          <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(g.tip.s.value) }} · {{ ((g.tip.s.value/g.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)">{{ valueFormat(g.tip.s.value) }} · {{ ((g.tip.s.value/g.total)*100).toFixed(1) }}%</div>
         </div>
       </div>
       <div v-if="legend" style="display:flex;flex-direction:column;gap:6px;line-height:normal">
@@ -106,7 +106,7 @@ function enter(i){ if (props.interactive && !drag.value) hover.value = i }
           :style="{display:'inline-flex',alignItems:'center',gap:'7px',opacity:dim(sl.i)}">
           <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:sl.color,flexShrink:0}"/>
           <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ sl.s.label }}</span>
-          <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:6px">
+          <span style="font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-heading);margin-left:6px">
             {{ hover===sl.i ? valueFormat(sl.s.value) : ((sl.s.value/g.total)*100).toFixed(0)+'%' }}</span>
         </span>
       </div>

package/components/charts/PlotGrid.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { fmtNum } from './chart-geometry.js'
+// SVG plot furniture: y tick labels + horizontal gridlines (zero line darker), x category labels.
+// Render inside an <svg>. sy / sxLabel are the chart's scale functions.
+defineProps({ w: Number, h: Number, pad: Object, ticks: { type: Array, default: () => [] }, sy: Function, xLabels: { type: Array, default: () => [] }, sxLabel: Function, showAxisLine: Boolean, yFormat: { type: Function, default: fmtNum } })
+</script>
+<template>
+  <g>
+    <g v-for="t in ticks" :key="t">
+      <line :x1="pad.l" :x2="w - pad.r" :y1="sy(t)" :y2="sy(t)" :stroke="t === 0 ? 'var(--chart-axis)' : 'var(--chart-grid)'" stroke-width="1" />
+      <text :x="pad.l - 8" :y="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>
+    <line v-if="showAxisLine" :x1="pad.l" :x2="pad.l" :y1="pad.t" :y2="h - pad.b" stroke="var(--chart-axis)" stroke-width="1" />
+    <template v-for="(lb, i) in xLabels" :key="'x' + 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/charts/RadarChart.jsx

@@ -51,7 +51,7 @@ export function RadarChart({ axes = [], series = [], size = 260, levels = 4, leg
             <g key={a.label}>
               <line x1={cx} y1={cy} x2={x} y2={y} stroke={on ? "var(--chart-guide)" : "var(--chart-axis)"} strokeWidth="1" />
               <text x={lx} y={ly + 3} textAnchor={anchor}
-                style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: on ? "var(--text-heading)" : "var(--chart-label)" }}>{a.label}</text>
+                style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", fill: on ? "var(--text-heading)" : "var(--chart-label)" }}>{a.label}</text>
             </g>
           );
         })}