@keyfunc/keybricks-ds 2.1.1 → 2.4.0

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.vue

@@ -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: "var(--text-2xs)", fill: "var(--chart-label)" }}>0</text>
-        <text x={cx + rO - thickness / 2} y={cy + 13} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", 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:var(--text-2xs);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:var(--text-2xs);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

@@ -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: "var(--text-2xs)", 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

@@ -30,7 +30,7 @@ function ink(v){
         <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:'var(--text-2xs)',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: "var(--text-2xs)", 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: "var(--text-2xs)", 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:var(--text-2xs);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:var(--text-2xs);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:var(--text-2xs);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.vue

@@ -52,7 +52,7 @@ 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:var(--text-2xs);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:var(--text-2xs);fill:var(--chart-label)">{{ lb }}</text>
       </template>
@@ -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

@@ -40,7 +40,7 @@ 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: "var(--text-2xs)", fill: "var(--chart-label)" }}>{t}%</text>) : null}
+        {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 ? (

package/components/charts/ParetoChart.vue

@@ -33,7 +33,7 @@ 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:var(--text-2xs);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)"/>
@@ -44,12 +44,12 @@ function move(e){
         :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:var(--text-2xs);fill:var(--chart-label)">{{ t }}%</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

@@ -8,7 +8,7 @@ defineProps({ w: Number, h: Number, pad: Object, ticks: { type: Array, default:
   <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-mono);font-size:var(--text-2xs);fill:var(--chart-label)">{{ yFormat(t) }}</text>
+      <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">

package/components/charts/RadarChart.vue

@@ -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: "var(--text-2xs)", 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) => {

package/components/charts/Ribbon3D.vue

@@ -55,7 +55,7 @@ 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:var(--text-2xs);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: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"
@@ -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

@@ -47,7 +47,7 @@ export function SankeyChart({ nodes = [], links = [], width = 620, height = 320,
                 <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: "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: "var(--text-2xs)", 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

@@ -41,13 +41,13 @@ const tip = computed(()=>{
         <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: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-mono);font-size:var(--text-2xs);fill:var(--chart-label)">{{ valueFormat(n.value) }}</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.vue

@@ -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,7 +33,7 @@ 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: "var(--text-2xs)", fill: "var(--chart-label)" }}>{xFormat(t)}</text>)}
+          {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}

package/components/charts/ScatterChart.vue

@@ -33,9 +33,9 @@ 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:var(--text-2xs);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:var(--text-2xs);fill:var(--chart-label)">{{ xFormat(t) }}</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>
@@ -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: "var(--text-2xs)", 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:'var(--text-2xs)',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.vue

@@ -53,7 +53,7 @@ const tip = computed(()=>{
       </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

@@ -51,7 +51,7 @@ export function Surface3D({ values = [], width = 420, height = 300, yaw: yaw0 =
         {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: "var(--text-2xs)", 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

@@ -50,14 +50,14 @@ function fill(q){ return shade(heatColor(q.t), Math.max(-0.35, Math.min(0.3, q.l
         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:var(--text-2xs);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

@@ -21,7 +21,7 @@ export function TreemapChart({ items = [], width = 560, height = 260, valueForma
               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: "var(--text-xs)", fill: "var(--on-accent)" }}>{c.item.label}</text>
-              <text x={c.x + 9} y={c.y + 32} style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", fill: "var(--on-accent)", opacity: 0.85 }}>{valueFormat(c.item.value)}</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

@@ -15,13 +15,13 @@ const total = computed(() => props.items.reduce((s,i)=>s+i.value,0)||1)
           :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: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-mono);font-size:var(--text-2xs);fill:var(--on-accent);opacity:.85">{{ valueFormat(c.item.value) }}</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,7 +38,7 @@ 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: "var(--text-2xs)", fill: b.kind === "neg" ? "var(--chart-neg)" : "var(--text-heading)" }}>{(b.kind === "pos" ? "+" : "") + valueFormat(b.value)}</text> : null}
+              {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>

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,13 +26,14 @@ const g = computed(() => {
       <template v-if="axes">
         <g v-for="t in g.ticks" :key="t">
           <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(t)" :y2="g.sy(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
-          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:var(--text-2xs);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:'var(--text-2xs)',fill:b.kind==='neg'?'var(--chart-neg)':'var(--text-heading)'}">{{ (b.kind==='pos'?'+':'')+valueFormat(b.value) }}</text>
+        <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>
@@ -40,7 +41,7 @@ const g = computed(() => {
     </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: "var(--text-2xs)", 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: "var(--text-2xs)", 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:var(--text-2xs);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:var(--text-2xs);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>