@keyfunc/keybricks-ds 1.0.0

package/components/charts/DonutChart.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface DonutSegment { label: string; value: number; color?: string; }
+/** Donut with a KPI center (or pie). Hovering a segment or its legend row lifts it. */
+export interface DonutChartProps {
+  segments?: DonutSegment[];
+  size?: number; thickness?: number;
+  /** Fill to the middle, no center KPI */ pie?: boolean;
+  centerLabel?: string;
+  /** Pinned center stat — when set, hover no longer swaps the center (the tooltip carries detail) */
+  centerValue?: React.ReactNode;
+  legend?: boolean; interactive?: boolean;
+  valueFormat?: (v: number) => string;
+  style?: React.CSSProperties;
+}
+export declare function DonutChart(props: DonutChartProps): JSX.Element;

package/components/charts/DonutChart.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { fmtNum, arcPath, polar, seriesColor } from "./chart-geometry.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Donut / pie. segments: [{label, value, color?}]. The donut keeps a KPI center
+ * (total by default, or a fixed centerValue); pie={true} fills to the middle and
+ * relies on the tooltip. Hovering lifts a segment and pins a tooltip at its arc.
+ */
+export function DonutChart({ segments = [], size = 180, thickness = 22, pie = false, centerLabel, centerValue, legend = true, interactive = true, valueFormat = fmtNum, style }) {
+  const [hover, setHover] = React.useState(null);
+  const total = segments.reduce((s, x) => s + x.value, 0) || 1;
+  const cx = size / 2, cy = size / 2;
+  const rO = size / 2 - 4, rI = pie ? 0 : rO - thickness;
+  let a = 0;
+  const arcs = segments.map((s, i) => {
+    const a0 = a, a1 = a + (s.value / total) * 360;
+    a = a1;
+    return { s, i, a0, a1, mid: (a0 + a1) / 2 };
+  });
+  const colorOf = (s, i) => s.color || seriesColor(i);
+  const h = hover != null ? arcs[hover] : null;
+  /* A pinned centerValue is a stat, not a readout: swapping it on hover made the tile
+     look broken, so the tooltip carries per-segment detail and the center stays put. */
+  const swapCenter = centerValue == null;
+  const tipAt = h ? polar(cx, cy, pie ? rO * 0.62 : (rO + rI) / 2, h.mid) : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
+        <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
+          <svg width={size} height={size} role="img">
+            {arcs.map(({ s, i, a0, a1, mid }) => {
+              const lift = interactive && hover === i ? 3 : 0;
+              const [lx, ly] = polar(0, 0, lift, mid);
+              return (
+                <path key={i} d={arcPath(cx + lx, cy + ly, rO, rI, a0 + 0.6, Math.max(a0 + 0.8, a1 - 0.6))}
+                  fill={colorOf(s, i)} opacity={hover == null || hover === i ? 1 : 0.35}
+                  onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+                  style={{ transition: "opacity var(--dur-fast) var(--ease-out)", cursor: interactive ? "pointer" : "default" }} />
+              );
+            })}
+          </svg>
+          {!pie ? (
+            <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", lineHeight: "normal", gap: 3 }}>
+              <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-light)", fontSize: Math.round(size / 6.4), lineHeight: 1, color: "var(--text-heading)" }}>
+                {h && swapCenter ? valueFormat(h.s.value) : centerValue != null ? centerValue : valueFormat(total)}
+              </span>
+              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", lineHeight: 1.2, color: "var(--text-muted)", maxWidth: rI * 1.8, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {h && swapCenter ? h.s.label : centerLabel || "Total"}
+              </span>
+            </div>
+          ) : null}
+          {h && interactive ? (
+            <ChartTooltip x={tipAt[0]} y={tipAt[1]} flip={tipAt[0] > size * 0.55} title={h.s.label}
+              rows={[{ label: "value", value: valueFormat(h.s.value), color: colorOf(h.s, h.i) }, { label: "share", value: ((h.s.value / total) * 100).toFixed(1) + "%" }]} />
+          ) : null}
+        </div>
+        {legend ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: 6, lineHeight: "normal" }}>
+            {segments.map((s, i) => (
+              <span key={s.label} onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+                style={{ display: "inline-flex", alignItems: "center", gap: 7, cursor: interactive ? "default" : undefined, opacity: hover == null || hover === i ? 1 : 0.45, transition: "var(--t-hover)" }}>
+                <span style={{ width: 8, height: 8, borderRadius: 2, background: colorOf(s, i), flexShrink: 0 }} />
+                <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{s.label}</span>
+                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: 6 }}>{((s.value / total) * 100).toFixed(0)}%</span>
+              </span>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/components/charts/DonutChart.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, arcPath, polar, SERIES } from './chart-geometry.js'
+// Donut with a KPI center (or pie). Hovering a segment or its legend row lifts it.
+const props = defineProps({ segments:{type:Array,default:()=>[]}, size:{type:Number,default:180}, thickness:{type:Number,default:22}, pie:Boolean, centerLabel:String, centerValue:[String,Number], legend:{type:Boolean,default:true}, interactive:{type:Boolean,default:true}, valueFormat:{type:Function,default:fmtNum}, style:Object })
+const hover = ref(null)
+const total = computed(() => props.segments.reduce((s,x)=>s+x.value,0) || 1)
+const arcs = computed(() => {
+  const cx=props.size/2, cy=props.size/2, rO=props.size/2-4, rI=props.pie?0:rO-props.thickness
+  let a=0
+  return props.segments.map((s,i)=>{
+    const a0=a, a1=a+(s.value/total.value)*360; a=a1
+    const mid=(a0+a1)/2, rad=((mid-90)*Math.PI)/180
+    const lift = props.interactive && hover.value===i ? 3 : 0
+    return { s, i, mid, color: s.color||SERIES[i%SERIES.length],
+      d: arcPath(cx+lift*Math.cos(rad), cy+lift*Math.sin(rad), rO, rI, a0+0.6, Math.max(a0+0.8,a1-0.6)) }
+  })
+})
+const rI = computed(() => props.size/2-4-props.thickness)
+const tipStyle = computed(() => {
+  const a = arcs.value[hover.value]
+  const r = props.pie ? (props.size/2-4)*0.62 : (props.size/2-4+rI.value)/2
+  const p = polar(props.size/2, props.size/2, r, a.mid)
+  return { position:'absolute', left:p[0]+'px', top:p[1]+'px',
+    transform: p[0] > props.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' }
+})
+</script>
+<template>
+  <div :style="{display:'inline-block',...style}">
+    <div style="display:flex;align-items:center;gap:18px">
+      <div :style="{position:'relative',width:size+'px',height:size+'px',flexShrink:0}">
+        <svg :width="size" :height="size" role="img">
+          <path v-for="a in arcs" :key="a.i" :d="a.d" :fill="a.color" :opacity="hover==null||hover===a.i?1:.35"
+            @mouseenter="interactive && (hover=a.i)" @mouseleave="interactive && (hover=null)"
+            :style="{transition:'opacity var(--dur-fast) var(--ease-out)',cursor:interactive?'pointer':'default'}"/>
+        </svg>
+        <!-- A pinned centerValue is a stat, not a readout: the tooltip carries per-segment detail. -->
+        <div v-if="!pie" style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;line-height:normal;gap:3px">
+          <span :style="{fontFamily:'var(--font-sans)',fontWeight:'var(--weight-light)',fontSize:Math.round(size/6.4)+'px',lineHeight:1,color:'var(--text-heading)'}">
+            {{ hover!=null && centerValue==null ? valueFormat(segments[hover].value) : (centerValue!=null ? centerValue : valueFormat(total)) }}</span>
+          <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-2xs)',lineHeight:1.2,color:'var(--text-muted)',maxWidth:rI*1.8+'px',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}">
+            {{ hover!=null && centerValue==null ? segments[hover].label : (centerLabel||'Total') }}</span>
+        </div>
+        <div v-if="hover!=null && interactive" :style="tipStyle" >
+          <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px;white-space:nowrap">{{ segments[hover].label }}</div>
+          <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);white-space:nowrap">{{ valueFormat(segments[hover].value) }} · {{ ((segments[hover].value/total)*100).toFixed(1) }}%</div>
+        </div>
+      </div>
+      <div v-if="legend" style="display:flex;flex-direction:column;gap:6px">
+        <span v-for="a in arcs" :key="a.s.label" @mouseenter="interactive && (hover=a.i)" @mouseleave="interactive && (hover=null)"
+          :style="{display:'inline-flex',alignItems:'center',gap:'7px',opacity:hover==null||hover===a.i?1:.45,transition:'var(--t-hover)'}">
+          <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:a.color,flexShrink:0}"/>
+          <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ a.s.label }}</span>
+          <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:6px">{{ ((a.s.value/total)*100).toFixed(0) }}%</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

package/components/charts/FunnelChart.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface FunnelStage { label: string; value: number; }
+/** Centered conversion funnel with step-to-step % underneath each band. */
+export interface FunnelChartProps {
+  stages?: FunnelStage[];
+  width?: number; bandHeight?: number; gap?: number;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function FunnelChart(props: FunnelChartProps): JSX.Element;

package/components/charts/FunnelChart.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { fmtNum } from "./chart-geometry.js";
+
+/**
+ * Conversion funnel — onboarding, approval chains, migration stages.
+ * stages: [{label, value}]; each band shows its share of stage 1 and the
+ * step-to-step conversion underneath.
+ */
+export function FunnelChart({ stages = [], width = 420, bandHeight = 34, gap = 14, valueFormat = fmtNum, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const top = stages[0] ? stages[0].value : 1;
+  return (
+    <div style={{ width, ...style }}>
+      {stages.map((s, i) => {
+        const share = s.value / (top || 1);
+        const prev = i > 0 ? s.value / (stages[i - 1].value || 1) : null;
+        return (
+          <div key={s.label} onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+            style={{ paddingBottom: i < stages.length - 1 ? gap : 0, opacity: hover == null || hover === i ? 1 : 0.55, transition: "var(--t-hover)" }}>
+            <div style={{ display: "flex", justifyContent: "center" }}>
+              <div style={{ width: Math.max(12, share * 100) + "%", height: bandHeight, borderRadius: "var(--radius-sm)", background: "var(--series-1)", opacity: 1 - i * (0.55 / Math.max(1, stages.length - 1)), display: "flex", alignItems: "center", justifyContent: "center", gap: 8, minWidth: 150, transition: "width var(--dur) var(--ease-out)" }}>
+                <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--on-accent)", whiteSpace: "nowrap" }}>{s.label}</span>
+                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--on-accent)" }}>{valueFormat(s.value)}</span>
+                {hover === i ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--on-accent)", opacity: 0.8 }}>{((share) * 100).toFixed(0)}% of top</span> : null}
+              </div>
+            </div>
+            {prev != null ? (
+              <div style={{ textAlign: "center", paddingTop: 3, fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: prev < 0.5 ? "var(--chart-neg)" : "var(--text-muted)" }}>
+                ↓ {(prev * 100).toFixed(0)}%
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/components/charts/FunnelChart.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { fmtNum } from './chart-geometry.js'
+// Centered conversion funnel with step-to-step % under each band.
+const props = defineProps({ stages:{type:Array,default:()=>[]}, width:{type:Number,default:420}, bandHeight:{type:Number,default:34}, gap:{type:Number,default:14}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const rows = computed(() => {
+  const top = props.stages[0] ? props.stages[0].value : 1
+  return props.stages.map((s,i)=>({ ...s,
+    share: Math.max(12, (s.value/(top||1))*100),
+    conv: i>0 ? s.value/(props.stages[i-1].value||1) : null,
+    opacity: 1 - i*(0.55/Math.max(1,props.stages.length-1)) }))
+})
+</script>
+<template>
+  <div :style="{width:width+'px',...style}">
+    <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'}">
+          <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>
+        </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>
+  </div>
+</template>

package/components/charts/GanttChart.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface GanttTask {
+  label: string;
+  /** ISO date or Date */ start: string | Date;
+  end?: string | Date;
+  /** 0–1 completion fill */ progress?: number;
+  /** Color group index */ lane?: number;
+  color?: string;
+  /** Render as a diamond instead of a bar */ milestone?: boolean;
+}
+/** Timeline of tasks with weekend tinting and a today marker. */
+export interface GanttChartProps {
+  tasks?: GanttTask[];
+  width?: number; rowHeight?: number;
+  /** ISO date or Date for the live marker */ today?: string | Date;
+  unit?: "day" | "week";
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function GanttChart(props: GanttChartProps): JSX.Element;

package/components/charts/GanttChart.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { seriesColor } from "./chart-geometry.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+const DAY = 86400000;
+const parse = (d) => (d instanceof Date ? d : new Date(d));
+
+/**
+ * Gantt timeline — close calendars, migration waves, release plans.
+ * tasks: [{label, start, end, progress?, lane?, color?, milestone?}] with ISO dates.
+ * Weekend columns are tinted, today draws a live marker, and hovering a bar reports
+ * its window, duration and progress.
+ */
+export function GanttChart({ tasks = [], width = 660, rowHeight = 26, today, unit = "day", interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const labelW = 150;
+  const t0 = new Date(Math.min(...tasks.map((t) => parse(t.start))));
+  const t1 = new Date(Math.max(...tasks.map((t) => parse(t.end || t.start))));
+  const days = Math.max(1, Math.round((t1 - t0) / DAY) + 1);
+  const plotW = width - labelW - 8;
+  const x = (d) => labelW + ((parse(d) - t0) / (days * DAY)) * plotW;
+  const height = tasks.length * rowHeight + 26;
+  /* One tick per ~52px of plot: enough room for "Mar 12" without labels touching. */
+  const ticks = [];
+  const perLabel = 52;
+  const stepDays = Math.max(unit === "week" ? 7 : 1, Math.ceil(days / Math.max(2, Math.floor(plotW / perLabel))));
+  for (let i = 0; i <= days; i += stepDays) ticks.push(new Date(+t0 + i * DAY));
+  const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  const h = hover != null ? tasks[hover] : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} role="img">
+        {ticks.map((d, i) => (
+          <g key={i}>
+            <line x1={x(d)} x2={x(d)} y1={20} y2={height - 4} stroke="var(--chart-grid)" strokeWidth="1" />
+            <text x={x(d)} y={12} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 9.5, fill: "var(--chart-label)" }}>{fmt(d)}</text>
+          </g>
+        ))}
+        {[...Array(days)].map((_, i) => {
+          const d = new Date(+t0 + i * DAY);
+          const wk = d.getDay() === 0 || d.getDay() === 6;
+          return wk ? <rect key={i} x={x(d)} y={20} width={plotW / days} height={height - 24} fill="var(--bg-inset)" opacity="0.6" /> : null;
+        })}
+        {tasks.map((t, i) => {
+          const y = 24 + i * rowHeight;
+          const c = t.color || seriesColor(t.lane != null ? t.lane : i);
+          const bx = x(t.start), bw = Math.max(4, x(t.end || t.start) - bx + plotW / days);
+          const on = hover === i;
+          return (
+            <g key={t.label + i} onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+              opacity={hover == null || on ? 1 : 0.55} style={{ transition: "opacity var(--dur-fast) var(--ease-out)", cursor: interactive ? "default" : undefined }}>
+              <text x={0} y={y + rowHeight / 2 + 3} style={{ fontFamily: "var(--font-sans)", fontSize: 11, fill: on ? "var(--text-heading)" : "var(--text-secondary)" }}>
+                {t.label.length > 22 ? t.label.slice(0, 21) + "…" : t.label}
+              </text>
+              {t.milestone ? (
+                <path d={"M" + bx + " " + (y + rowHeight / 2 - 6) + " L" + (bx + 6) + " " + (y + rowHeight / 2) + " L" + bx + " " + (y + rowHeight / 2 + 6) + " L" + (bx - 6) + " " + (y + rowHeight / 2) + " Z"} fill={c} />
+              ) : (
+                <>
+                  <rect x={bx} y={y + 4} width={bw} height={rowHeight - 12} rx="3" fill={c} opacity="0.32" />
+                  {t.progress != null ? <rect x={bx} y={y + 4} width={Math.max(2, bw * Math.min(1, t.progress))} height={rowHeight - 12} rx="3" fill={c} /> : null}
+                </>
+              )}
+            </g>
+          );
+        })}
+        {today ? <g>
+          <line x1={x(today)} x2={x(today)} y1={18} y2={height - 4} stroke="var(--action-primary)" strokeWidth="1.2" />
+          <circle cx={x(today)} cy={18} r="2.6" fill="var(--action-primary)" />
+        </g> : null}
+      </svg>
+      {h && interactive ? (
+        <ChartTooltip x={x(h.start)} y={24 + hover * rowHeight + rowHeight / 2} flip={x(h.start) > width * 0.6} title={h.label}
+          rows={[{ label: "start", value: fmt(parse(h.start)), color: h.color || seriesColor(h.lane != null ? h.lane : hover) },
+                 { label: "end", value: fmt(parse(h.end || h.start)) },
+                 { label: "duration", value: Math.max(1, Math.round((parse(h.end || h.start) - parse(h.start)) / DAY) + 1) + "d" }]
+            .concat(h.progress != null ? [{ label: "progress", value: Math.round(h.progress * 100) + "%" }] : [])} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/GanttChart.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { SERIES } from './chart-geometry.js'
+// Timeline of tasks with weekend tinting, progress fill, today marker and milestones.
+const DAY = 86400000
+const props = defineProps({ tasks:{type:Array,default:()=>[]}, width:{type:Number,default:660}, rowHeight:{type:Number,default:26}, today:[String,Object], unit:{type:String,default:'day'}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const parse = d => d instanceof Date ? d : new Date(d)
+const fmt = d => parse(d).toLocaleDateString('en-US',{month:'short',day:'numeric'})
+const g = computed(() => {
+  const labelW = 150
+  const t0 = new Date(Math.min(...props.tasks.map(t=>parse(t.start))))
+  const t1 = new Date(Math.max(...props.tasks.map(t=>parse(t.end||t.start))))
+  const days = Math.max(1, Math.round((t1-t0)/DAY)+1)
+  const plotW = props.width-labelW-8
+  const x = d => labelW + ((parse(d)-t0)/(days*DAY))*plotW
+  const height = props.tasks.length*props.rowHeight+26
+  // One tick per ~52px of plot: enough room for "Mar 12" without labels touching.
+  const stepDays = Math.max(props.unit==='week'?7:1, Math.ceil(days/Math.max(2, Math.floor(plotW/52))))
+  const ticks = []
+  for (let i=0;i<=days;i+=stepDays) ticks.push(new Date(+t0+i*DAY))
+  const weekends = [...Array(days)].map((_,i)=>new Date(+t0+i*DAY)).filter(d=>d.getDay()===0||d.getDay()===6)
+  return { labelW, t0, days, plotW, x, height, ticks, weekends, colW: plotW/days,
+    rows: props.tasks.map((t,i)=>{
+      const bx = x(t.start)
+      return { t, i, y: 24+i*props.rowHeight, color: t.color||SERIES[(t.lane!=null?t.lane:i)%SERIES.length],
+        bx, bw: Math.max(4, x(t.end||t.start)-bx+plotW/days),
+        label: t.label.length>22 ? t.label.slice(0,21)+'…' : t.label,
+        dur: Math.max(1, Math.round((parse(t.end||t.start)-parse(t.start))/DAY)+1) }
+    }) }
+})
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="g.height" role="img">
+      <g v-for="(d,i) in g.ticks" :key="'t'+i">
+        <line :x1="g.x(d)" :x2="g.x(d)" :y1="20" :y2="g.height-4" stroke="var(--chart-grid)" stroke-width="1"/>
+        <text :x="g.x(d)" :y="12" text-anchor="middle" style="font-family:var(--font-sans);font-size:9.5px;fill:var(--chart-label)">{{ fmt(d) }}</text>
+      </g>
+      <rect v-for="(d,i) in g.weekends" :key="'w'+i" :x="g.x(d)" :y="20" :width="g.colW" :height="g.height-24" fill="var(--bg-inset)" opacity="0.6"/>
+      <g v-for="r in g.rows" :key="r.t.label+r.i" @mouseenter="interactive && (hover=r.i)" @mouseleave="interactive && (hover=null)"
+        :opacity="hover==null||hover===r.i?1:0.55" style="transition:opacity var(--dur-fast) var(--ease-out)">
+        <text :x="0" :y="r.y+rowHeight/2+3" :style="{fontFamily:'var(--font-sans)',fontSize:'11px',fill:hover===r.i?'var(--text-heading)':'var(--text-secondary)'}">{{ r.label }}</text>
+        <path v-if="r.t.milestone" :d="'M'+r.bx+' '+(r.y+rowHeight/2-6)+' L'+(r.bx+6)+' '+(r.y+rowHeight/2)+' L'+r.bx+' '+(r.y+rowHeight/2+6)+' L'+(r.bx-6)+' '+(r.y+rowHeight/2)+' Z'" :fill="r.color"/>
+        <template v-else>
+          <rect :x="r.bx" :y="r.y+4" :width="r.bw" :height="rowHeight-12" rx="3" :fill="r.color" opacity="0.32"/>
+          <rect v-if="r.t.progress!=null" :x="r.bx" :y="r.y+4" :width="Math.max(2,r.bw*Math.min(1,r.t.progress))" :height="rowHeight-12" rx="3" :fill="r.color"/>
+        </template>
+      </g>
+      <g v-if="today">
+        <line :x1="g.x(today)" :x2="g.x(today)" :y1="18" :y2="g.height-4" stroke="var(--action-primary)" stroke-width="1.2"/>
+        <circle :cx="g.x(today)" :cy="18" r="2.6" fill="var(--action-primary)"/>
+      </g>
+    </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>
+  </div>
+</template>

package/components/charts/GaugeChart.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface GaugeBand { upTo: number; color: string; }
+/** Semi-circular KPI gauge — flat arc fill, no needle. bands recolor by threshold. */
+export interface GaugeChartProps {
+  value?: number; max?: number;
+  size?: number; thickness?: number;
+  label?: string;
+  valueFormat?: (v: number) => string;
+  bands?: GaugeBand[];
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function GaugeChart(props: GaugeChartProps): JSX.Element;

package/components/charts/GaugeChart.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { fmtNum, arcPath } from "./chart-geometry.js";
+
+/**
+ * Semi-circular gauge KPI — utilization, data quality, SLA. Flat arc fill over a track
+ * (no needle). bands: [{upTo, color}] recolor the fill by threshold; big light numeral.
+ */
+export function GaugeChart({ value = 0, max = 100, size = 180, thickness = 14, label, valueFormat = (v) => fmtNum(v, { pct: true }), bands, interactive = true, style }) {
+  const [hover, setHover] = React.useState(false);
+  const rO = size / 2 - 4, rI = rO - thickness;
+  const cx = size / 2, cy = rO + 4;
+  const H = cy + 18;
+  const t = Math.max(0, Math.min(1, value / max));
+  const band = bands && bands.find((b) => value <= b.upTo);
+  const color = (band && band.color) || "var(--series-1)";
+  const A0 = -90;
+  return (
+    <div style={{ position: "relative", width: size, height: H, display: "inline-block", ...style }}>
+      <svg width={size} height={H} role="img">
+        <path d={arcPath(cx, cy, rO, rI, A0, 90)} fill="var(--chart-track)" />
+        {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>
+      </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>
+        {label ? <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", paddingTop: 3 }}>{hover ? Math.round(t * 100) + "% of " + fmtNum(max) : label}</div> : null}
+      </div>
+    </div>
+  );
+}

package/components/charts/GaugeChart.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { fmtNum, arcPath } from './chart-geometry.js'
+// Semi-circular KPI gauge — flat arc fill, no needle. bands recolor by threshold.
+const props = defineProps({ value:{type:Number,default:0}, max:{type:Number,default:100}, size:{type:Number,default:180}, thickness:{type:Number,default:14}, label:String, valueFormat:{type:Function,default:(v)=>fmtNum(v,{pct:true})}, bands:Array, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(false)
+const g = computed(() => {
+  const rO = props.size/2-4, rI = rO-props.thickness, cx = props.size/2, cy = rO+4, H = cy+18
+  const t = Math.max(0, Math.min(1, props.value/props.max))
+  const band = props.bands && props.bands.find(b=>props.value<=b.upTo)
+  return { rO, rI, cx, cy, H, t, color:(band&&band.color)||'var(--series-1)',
+    track: arcPath(cx,cy,rO,rI,-90,90), fill: t>0 ? arcPath(cx,cy,rO,rI,-90,-90+t*180) : null }
+})
+</script>
+<template>
+  <div :style="{position:'relative',width:size+'px',height:g.H+'px',display:'inline-block',...style}">
+    <svg :width="size" :height="g.H" role="img">
+      <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>
+    </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>
+      <div v-if="label" style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-top:3px">{{ hover ? Math.round(g.t*100)+'% of '+max : label }}</div>
+    </div>
+  </div>
+</template>

package/components/charts/HeatmapChart.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** Matrix heatmap. values[row][col]; scale "blue" (sequential) or "diverging" (red/green variance). */
+export interface HeatmapChartProps {
+  xLabels?: string[]; yLabels?: string[];
+  values?: (number | null)[][];
+  width?: number; cellHeight?: number; gap?: number;
+  scale?: "blue" | "diverging";
+  /** Print the number in each cell */ showValues?: boolean;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function HeatmapChart(props: HeatmapChartProps): JSX.Element;

package/components/charts/HeatmapChart.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { fmtNum, extent, heatStep } from "./chart-geometry.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+const HEAT = ["var(--chart-heat-1)","var(--chart-heat-2)","var(--chart-heat-3)","var(--chart-heat-4)","var(--chart-heat-5)"];
+/**
+ * Matrix heatmap — entity × month, hour × weekday. values[row][col].
+ * scale "blue" (sequential) or "diverging" (negative red / positive green, for variance).
+ * showValues prints the number in each cell (md+ sizes).
+ */
+export function HeatmapChart({ xLabels = [], yLabels = [], values = [], width = 560, cellHeight = 26, gap = 2, scale = "blue", showValues = false, valueFormat = fmtNum, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const labelW = 86;
+  const cols = xLabels.length, rows = yLabels.length;
+  const cw = (width - labelW) / cols - gap;
+  const [lo, hi] = extent(values, false);
+  const amax = Math.max(Math.abs(lo), Math.abs(hi)) || 1;
+  const cellFill = (v) => {
+    if (v == null) return "var(--chart-track)";
+    if (scale === "diverging") {
+      const t = Math.min(1, Math.abs(v) / amax);
+      const a = (0.15 + t * 0.85).toFixed(2);
+      return v >= 0 ? `color-mix(in srgb, var(--chart-pos) ${Math.round(a * 100)}%, var(--bg-surface))` : `color-mix(in srgb, var(--chart-neg) ${Math.round(a * 100)}%, var(--bg-surface))`;
+    }
+    return HEAT[heatStep(v, lo, hi)];
+  };
+  const textOn = (v) => {
+    if (v == null) return "var(--text-muted)";
+    if (scale === "diverging") return Math.abs(v) / amax > 0.55 ? "var(--on-accent)" : "var(--text-heading)";
+    return heatStep(v, lo, hi) >= 3 ? "var(--chart-heat-ink)" : "var(--text-heading)";
+  };
+  const h = hover ? { v: values[hover.r] && values[hover.r][hover.c] } : null;
+  return (
+    <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>)}
+        {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>
+            {xLabels.map((x, c) => {
+              const v = values[r] ? values[r][c] : null;
+              const on = hover && hover.r === r && hover.c === c;
+              return (
+                <span key={c}
+                  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}
+                </span>
+              );
+            })}
+          </React.Fragment>
+        ))}
+      </div>
+      {hover && interactive ? (
+        <ChartTooltip x={labelW + (hover.c + 0.5) * (cw + gap)} y={20 + (hover.r + 0.5) * (cellHeight + gap)} flip={hover.c > cols * 0.62}
+          title={yLabels[hover.r] + " · " + xLabels[hover.c]} rows={[{ label: "value", value: valueFormat(h.v) }]} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/HeatmapChart.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, extent, heatStep } from './chart-geometry.js'
+// Matrix heatmap. scale "blue" (sequential) or "diverging" (red/green variance).
+const HEAT = ['var(--chart-heat-1)','var(--chart-heat-2)','var(--chart-heat-3)','var(--chart-heat-4)','var(--chart-heat-5)']
+const props = defineProps({ xLabels:{type:Array,default:()=>[]}, yLabels:{type:Array,default:()=>[]}, values:{type:Array,default:()=>[]}, width:{type:Number,default:560}, cellHeight:{type:Number,default:26}, gap:{type:Number,default:2}, scale:{type:String,default:'blue'}, showValues:Boolean, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const dom = computed(() => { const [lo,hi] = extent(props.values,false); return { lo, hi, amax: Math.max(Math.abs(lo),Math.abs(hi))||1 } })
+function fill(v){
+  if (v==null) return 'var(--chart-track)'
+  if (props.scale==='diverging'){
+    const a = Math.round((0.15+Math.min(1,Math.abs(v)/dom.value.amax)*0.85)*100)
+    return (v>=0?`color-mix(in srgb, var(--chart-pos) ${a}%, var(--bg-surface))`:`color-mix(in srgb, var(--chart-neg) ${a}%, var(--bg-surface))`)
+  }
+  return HEAT[heatStep(v, dom.value.lo, dom.value.hi)]
+}
+function ink(v){
+  if (v==null) return 'var(--text-muted)'
+  if (props.scale==='diverging') return Math.abs(v)/dom.value.amax>0.55 ? 'var(--on-accent)' : 'var(--text-heading)'
+  return heatStep(v, dom.value.lo, dom.value.hi)>=3 ? 'var(--chart-heat-ink)' : 'var(--text-heading)'
+}
+</script>
+<template>
+  <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>
+      <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>
+      </template>
+    </div>
+  </div>
+</template>

package/components/charts/Histogram.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface HistogramBucket { from: number; to: number; n: number; }
+/** Distribution of one measure — pass raw values (auto-bucketed) or pre-computed buckets. */
+export interface HistogramProps {
+  values?: number[];
+  /** Pre-computed buckets; wins over values */ buckets?: HistogramBucket[];
+  bins?: number;
+  width?: number; height?: number;
+  axes?: boolean;
+  /** Dashed mean guide */ showMean?: boolean;
+  valueFormat?: (v: number) => string;
+  countFormat?: (v: number) => string;
+  interactive?: boolean; color?: string;
+  style?: React.CSSProperties;
+}
+export declare function Histogram(props: HistogramProps): JSX.Element;