@keyfunc/keybricks-ds 1.0.4 → 2.1.1

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-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>
       </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-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>
     </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-mono)", fontSize: "var(--text-2xs)", 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-mono)',fontSize:'var(--text-2xs)',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-mono)", fontSize: "var(--text-2xs)", 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-mono)", fontSize: "var(--text-2xs)", fill: "var(--chart-label)" }}>{valueFormat(bkt[i].from)}</text>
         )) : null}
       </svg>
       {hover != null && interactive ? (

package/components/charts/Histogram.vue

@@ -34,16 +34,16 @@ 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-mono);font-size:var(--text-2xs);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-mono);font-size:var(--text-2xs);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-mono);font-size:var(--text-2xs);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>

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-mono);font-size:var(--text-2xs);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)+')'"/>

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-mono)", fontSize: "var(--text-2xs)", 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,19 +33,19 @@ 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-mono);font-size:var(--text-2xs);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-mono);font-size:var(--text-2xs);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>

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-mono);font-size:var(--text-2xs);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>
           );
         })}

package/components/charts/RadarChart.vue

@@ -47,7 +47,7 @@ function toggle(name){
       <path v-for="(d,i) in g.rings" :key="'r'+i" :d="d" fill="none" stroke="var(--chart-grid)" stroke-width="1"/>
       <g v-for="(sp,i) in g.spokes" :key="sp.label">
         <line :x1="g.cx" :y1="g.cy" :x2="sp.x" :y2="sp.y" :stroke="hover===i?'var(--chart-guide)':'var(--chart-axis)'" stroke-width="1"/>
-        <text :x="sp.lx" :y="sp.ly+3" :text-anchor="sp.anchor" :style="{fontFamily:'var(--font-sans)',fontSize:'10px',fill:hover===i?'var(--text-heading)':'var(--chart-label)'}">{{ sp.label }}</text>
+        <text :x="sp.lx" :y="sp.ly+3" :text-anchor="sp.anchor" :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-2xs)',fill:hover===i?'var(--text-heading)':'var(--chart-label)'}">{{ sp.label }}</text>
       </g>
       <g v-for="sh in g.shapes" :key="sh.s.name">
         <path :d="sh.d" :fill="sh.color" fill-opacity="0.14" :stroke="sh.color" stroke-width="1.5" stroke-linejoin="round"/>

package/components/charts/Ribbon3D.jsx

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

package/components/charts/Ribbon3D.vue

@@ -55,9 +55,9 @@ const g = computed(() => {
       <line :x1="g.vAxis[0].x" :y1="g.vAxis[0].y" :x2="g.vAxis[1].x" :y2="g.vAxis[1].y" stroke="var(--chart-guide)" stroke-width="1"/>
       <g v-for="(t,i) in g.vTicks" :key="'vt'+i">
         <line :x1="t.p.x-4" :y1="t.p.y" :x2="t.p.x" :y2="t.p.y" stroke="var(--chart-guide)" stroke-width="1"/>
-        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ t.v }}</text>
+        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:var(--text-2xs);fill:var(--chart-label)">{{ t.v }}</text>
       </g>
-      <text v-for="(l,i) in g.labels" :key="'x'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ l.lb }}</text>
+      <text v-for="(l,i) in g.labels" :key="'x'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ l.lb }}</text>
       <g v-for="r in g.rows" :key="r.s.name" :opacity="hover==null||hover===r.si?1:0.4"
         @mouseenter="interactive && (hover=r.si)" @mouseleave="interactive && (hover=null)"
         style="transition:opacity var(--dur-fast) var(--ease-out)">

package/components/charts/SankeyChart.jsx

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

package/components/charts/SankeyChart.vue

@@ -40,8 +40,8 @@ const tip = computed(()=>{
           style="transition:opacity var(--dur-fast) var(--ease-out)"/>
         <g v-for="n in g.laid.nodes" :key="n.id" @mouseenter="interactive && (hover={kind:'node',id:n.id})" @mouseleave="interactive && (hover=null)">
           <rect :x="n.x" :y="n.y" :width="n.w" :height="n.h" rx="2" :fill="g.color(n)" :opacity="hover==null||(hover.kind==='node'&&hover.id===n.id)?1:0.55"/>
-          <text :x="n.x+n.w+6" :y="n.y+n.h/2+3.5" style="font-family:var(--font-sans);font-size:11px;fill:var(--text-heading)">{{ n.label }}</text>
-          <text :x="n.x+n.w+6" :y="n.y+n.h/2+15" style="font-family:var(--font-mono);font-size:9.5px;fill:var(--chart-label)">{{ valueFormat(n.value) }}</text>
+          <text :x="n.x+n.w+6" :y="n.y+n.h/2+3.5" style="font-family:var(--font-sans);font-size:var(--text-xs);fill:var(--text-heading)">{{ n.label }}</text>
+          <text :x="n.x+n.w+6" :y="n.y+n.h/2+15" style="font-family:var(--font-mono);font-size:var(--text-2xs);fill:var(--chart-label)">{{ valueFormat(n.value) }}</text>
         </g>
       </g>
     </svg>

package/components/charts/Scatter3D.jsx

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

package/components/charts/Scatter3D.vue

@@ -38,7 +38,7 @@ const g = computed(() => {
       role="img" :style="{cursor:interactive?'grab':'default',touchAction:'none'}">
       <line v-for="(e,i) in g.edges" :key="'e'+i" :x1="e[0].x" :y1="e[0].y" :x2="e[1].x" :y2="e[1].y" stroke="var(--chart-axis)" stroke-width="1"/>
       <line v-for="(ax,i) in g.axes3" :key="'ae'+i" :x1="ax.a.x" :y1="ax.a.y" :x2="ax.b.x" :y2="ax.b.y" stroke="var(--chart-guide)" stroke-width="1"/>
-      <text v-for="(ax,i) in g.axes3" :key="'at'+i" :x="ax.nx" :y="ax.ny+3" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--text-secondary)">{{ ax.name }}</text>
+      <text v-for="(ax,i) in g.axes3" :key="'at'+i" :x="ax.nx" :y="ax.ny+3" text-anchor="middle" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--text-secondary)">{{ ax.name }}</text>
       <circle v-for="d in g.dots" :key="d.i" :cx="d.x" :cy="d.y"
         :r="r*(1.18-(d.depth+0.75)*0.35)*(hover===d.i?1.5:1)" :fill="d.color"
         :opacity="hover===d.i ? 1 : (0.85-(d.depth+0.75)*0.28)*(hover==null?1:0.45)"

package/components/charts/ScatterChart.jsx

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

package/components/charts/ScatterChart.vue

@@ -33,11 +33,11 @@ function move(e){
       <template v-if="axes">
         <g v-for="t in g.ty.ticks" :key="t">
           <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(t)" :y2="g.sy(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
-          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ yFormat(t) }}</text>
+          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:var(--text-2xs);fill:var(--chart-label)">{{ yFormat(t) }}</text>
         </g>
-        <text v-for="t in g.tx.ticks" :key="'x'+t" :x="g.sx(t)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ xFormat(t) }}</text>
-        <text v-if="xLabel" :x="width-g.pad.r" :y="height-2" text-anchor="end" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ xLabel }}</text>
-        <text v-if="yLabel" :x="g.pad.l" :y="g.pad.t-1" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ yLabel }}</text>
+        <text v-for="t in g.tx.ticks" :key="'x'+t" :x="g.sx(t)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-mono);font-size:var(--text-2xs);fill:var(--chart-label)">{{ xFormat(t) }}</text>
+        <text v-if="xLabel" :x="width-g.pad.r" :y="height-2" text-anchor="end" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ xLabel }}</text>
+        <text v-if="yLabel" :x="g.pad.l" :y="g.pad.t-1" style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--chart-label)">{{ yLabel }}</text>
       </template>
       <circle v-for="d in g.dots" :key="d.i" :cx="d.cx" :cy="d.cy" :r="d.r" :fill="d.color"
         :opacity="hover==null?.55:hover===d.i?.9:.2" :stroke="hover===d.i?'var(--bg-surface)':'none'" stroke-width="1.5"

package/components/charts/Sparkline.jsx

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

package/components/charts/Sparkline.vue

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

package/components/charts/SunburstChart.jsx

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

package/components/charts/SunburstChart.vue

@@ -49,7 +49,7 @@ const tip = computed(()=>{
       <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;line-height:normal;gap:2px">
         <span :style="{fontFamily:'var(--font-sans)',fontWeight:'var(--weight-light)',fontSize:Math.round(size/13)+'px',color:'var(--text-heading)'}">{{ valueFormat(g.focus.value) }}</span>
         <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-2xs)',color:'var(--text-muted)',maxWidth:g.rInner*1.7+'px',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}">{{ g.focus.label || 'Total' }}</span>
-        <span v-if="zoom.length" style="font-family:var(--font-sans);font-size:9px;color:var(--action-primary)">↑ back</span>
+        <span v-if="zoom.length" style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--action-primary)">↑ back</span>
       </div>
       <div v-if="tip && interactive" :style="{position:'absolute',left:tip.x+'px',top:tip.y+'px',transform:tip.x>size*0.55?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
         <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ tip.title }}</div>

package/components/charts/Surface3D.jsx

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

package/components/charts/Surface3D.vue

@@ -47,10 +47,10 @@ function fill(q){ return shade(heatColor(q.t), Math.max(-0.35, Math.min(0.3, q.l
       <path :d="g.basePath" fill="var(--bg-inset)" stroke="var(--chart-axis)" stroke-width="1"/>
       <line v-for="(ax,i) in g.axes3" :key="'ae'+i" :x1="ax.a.x" :y1="ax.a.y" :x2="ax.b.x" :y2="ax.b.y" stroke="var(--chart-guide)" stroke-width="1"/>
       <text v-for="(ax,i) in g.axes3.filter(a=>a.label)" :key="'al'+i" :x="ax.lp.x" :y="ax.lp.y+3" :text-anchor="ax.anchor"
-        style="font-family:var(--font-sans);font-size:10px;fill:var(--text-secondary)">{{ ax.label }}</text>
+        style="font-family:var(--font-sans);font-size:var(--text-2xs);fill:var(--text-secondary)">{{ ax.label }}</text>
       <g v-for="(t,i) in g.zTicks" :key="'zt'+i">
         <line :x1="t.p.x-4" :y1="t.p.y" :x2="t.p.x" :y2="t.p.y" stroke="var(--chart-guide)" stroke-width="1"/>
-        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ t.v }}</text>
+        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:var(--text-2xs);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)"/>

package/components/charts/TreemapChart.jsx

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

package/components/charts/TreemapChart.vue

@@ -14,8 +14,8 @@ const total = computed(() => props.items.reduce((s,i)=>s+i.value,0)||1)
         <rect :x="c.x+1" :y="c.y+1" :width="Math.max(1,c.w-2)" :height="Math.max(1,c.h-2)" rx="3" :fill="c.color"
           :opacity="hover==null?.85:hover===i?1:.35" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
         <template v-if="c.w>74 && c.h>34">
-          <text :x="c.x+9" :y="c.y+18" style="font-family:var(--font-sans);font-size:11px;fill:var(--on-accent)">{{ c.item.label }}</text>
-          <text :x="c.x+9" :y="c.y+32" style="font-family:var(--font-mono);font-size:10px;fill:var(--on-accent);opacity:.85">{{ valueFormat(c.item.value) }}</text>
+          <text :x="c.x+9" :y="c.y+18" style="font-family:var(--font-sans);font-size:var(--text-xs);fill:var(--on-accent)">{{ c.item.label }}</text>
+          <text :x="c.x+9" :y="c.y+32" style="font-family:var(--font-mono);font-size:var(--text-2xs);fill:var(--on-accent);opacity:.85">{{ valueFormat(c.item.value) }}</text>
         </template>
       </g>
     </svg>

package/components/charts/WaterfallChart.jsx

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

package/components/charts/WaterfallChart.vue

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

package/components/charts/WorldMap.jsx

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

package/components/charts/WorldMap.vue

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

package/components/charts/XLabels.vue

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

package/components/data/CodeBlock.jsx

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

package/components/data/CodeBlock.vue

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