@burdenoff/microfe-kadaikodi 2026.704.4 → 2026.704.5

package/dist/kadaikodi/components/viz/DonutChart.js

@@ -0,0 +1,109 @@
+import { cn as e } from "../../utils/cn.js";
+import { chartPalette as t } from "./lib/palette.js";
+import { useMounted as n, usePrefersReducedMotion as r } from "./lib/hooks.js";
+import { donutSegmentPath as i } from "./lib/geometry.js";
+import { formatCompact as a, toPercent as o } from "./lib/format.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/kadaikodi/components/viz/DonutChart.tsx
+var l = 100, u = l / 2, d = 46;
+function f({ segments: f, centerLabel: p, centerCaption: m, size: h = 168, thickness: g = .28, valueFormatter: _ = a, showLegend: v = !0, title: y, className: b }) {
+	let x = n(), S = r();
+	if (f.length === 0) return null;
+	let C = f.reduce((e, t) => e + Math.max(0, t.value), 0), w = t(f.length), T = d * (1 - g), E = y ?? `Donut chart of ${f.length} segments`, D = f.map((e) => C > 0 ? Math.max(0, e.value) / C : 0), O = D.map((e, t) => D.slice(0, t).reduce((e, t) => e + t, 0)), k = f.map((e, t) => {
+		let n = D[t], r = O[t] * 360, i = Math.min((O[t] + n) * 360, 359.999);
+		return {
+			segment: e,
+			color: e.color ?? w[t],
+			startAngle: r,
+			endAngle: i,
+			fraction: n,
+			isFull: n >= .9999
+		};
+	});
+	return /* @__PURE__ */ c("div", {
+		className: e("flex flex-wrap items-center gap-5", b),
+		children: [/* @__PURE__ */ c("div", {
+			className: "relative shrink-0",
+			style: {
+				width: h,
+				height: h,
+				maxWidth: "100%"
+			},
+			children: [/* @__PURE__ */ c("svg", {
+				viewBox: `0 0 ${l} ${l}`,
+				width: h,
+				height: h,
+				role: "img",
+				"aria-label": E,
+				style: {
+					display: "block",
+					maxWidth: "100%",
+					height: "auto"
+				},
+				children: [
+					/* @__PURE__ */ s("title", { children: E }),
+					/* @__PURE__ */ s("desc", { children: f.map((e) => `${e.label}: ${_(e.value)} (${o(e.value, C)}%)`).join(", ") }),
+					/* @__PURE__ */ s("g", {
+						style: {
+							transformOrigin: "center",
+							transform: x || S ? "scale(1)" : "scale(0.86)",
+							transition: S ? void 0 : "transform 520ms cubic-bezier(0.22,1,0.36,1)"
+						},
+						children: k.map((e, t) => {
+							let n = {
+								fill: e.color,
+								style: {
+									opacity: x || S ? 1 : 0,
+									transition: S ? void 0 : "opacity 460ms ease",
+									transitionDelay: S ? void 0 : `${t * 70}ms`
+								}
+							};
+							return e.isFull ? /* @__PURE__ */ s("path", {
+								d: `M ${u} ${u - d} A ${d} ${d} 0 1 0 ${u} ${u + d} A ${d} ${d} 0 1 0 ${u} ${u - d} M ${u} ${u - T} A ${T} ${T} 0 1 1 ${u} ${u + T} A ${T} ${T} 0 1 1 ${u} ${u - T} Z`,
+								fillRule: "evenodd",
+								...n
+							}, `${e.segment.label}-${t}`) : /* @__PURE__ */ s("path", {
+								d: i(u, u, d, T, e.startAngle, e.endAngle),
+								...n,
+								children: /* @__PURE__ */ s("title", { children: `${e.segment.label}: ${_(e.segment.value)}` })
+							}, `${e.segment.label}-${t}`);
+						})
+					})
+				]
+			}), p !== void 0 || m !== void 0 ? /* @__PURE__ */ c("div", {
+				className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+				children: [/* @__PURE__ */ s("span", {
+					className: "text-xl font-semibold leading-none text-text-primary",
+					children: p
+				}), m === void 0 ? null : /* @__PURE__ */ s("span", {
+					className: "mt-1 text-xs text-text-muted",
+					children: m
+				})]
+			}) : null]
+		}), v ? /* @__PURE__ */ s("ul", {
+			className: "flex min-w-[8rem] flex-1 flex-col gap-1.5 text-sm",
+			children: k.map((e, t) => /* @__PURE__ */ c("li", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ s("span", {
+						"aria-hidden": "true",
+						className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+						style: { backgroundColor: e.color }
+					}),
+					/* @__PURE__ */ s("span", {
+						className: "flex-1 truncate text-text-secondary",
+						children: e.segment.label
+					}),
+					/* @__PURE__ */ c("span", {
+						className: "tabular-nums text-text-muted",
+						children: [o(e.segment.value, C), "%"]
+					})
+				]
+			}, `${e.segment.label}-${t}`))
+		}) : null]
+	});
+}
+//#endregion
+export { f as DonutChart };
+
+//# sourceMappingURL=DonutChart.js.map

package/dist/kadaikodi/components/viz/DonutChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","names":[],"sources":["../../../../src/kadaikodi/components/viz/DonutChart.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { chartPalette } from './lib/palette';\nimport { donutSegmentPath } from './lib/geometry';\nimport { formatCompact, toPercent } from './lib/format';\nimport { useMounted, usePrefersReducedMotion } from './lib/hooks';\nimport type { Segment } from './lib/types';\n\nexport interface DonutChartProps {\n  segments: Segment[];\n  centerLabel?: ReactNode;\n  /** Small caption under the center label. */\n  centerCaption?: ReactNode;\n  /** Pixel diameter (scales down responsively). */\n  size?: number;\n  /** Ring thickness as a fraction of the radius (0–1). */\n  thickness?: number;\n  valueFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  title?: string;\n  className?: string;\n}\n\nconst VIEW = 100;\nconst CENTER = VIEW / 2;\nconst R_OUTER = 46;\n\n/** Donut chart with a center label and an optional legend. */\nexport function DonutChart({\n  segments,\n  centerLabel,\n  centerCaption,\n  size = 168,\n  thickness = 0.28,\n  valueFormatter = formatCompact,\n  showLegend = true,\n  title,\n  className,\n}: DonutChartProps) {\n  const mounted = useMounted();\n  const reduced = usePrefersReducedMotion();\n\n  if (segments.length === 0) {\n    return null;\n  }\n\n  const total = segments.reduce((acc, s) => acc + Math.max(0, s.value), 0);\n  const palette = chartPalette(segments.length);\n  const rInner = R_OUTER * (1 - thickness);\n  const chartTitle = title ?? `Donut chart of ${segments.length} segments`;\n\n  const fractions = segments.map((s) => (total > 0 ? Math.max(0, s.value) / total : 0));\n  const starts = fractions.map((_, i) => fractions.slice(0, i).reduce((a, b) => a + b, 0));\n  const arcs = segments.map((segment, i) => {\n    const fraction = fractions[i];\n    const startAngle = starts[i] * 360;\n    const endAngle = Math.min((starts[i] + fraction) * 360, 359.999);\n    const color = segment.color ?? palette[i];\n    return { segment, color, startAngle, endAngle, fraction, isFull: fraction >= 0.9999 };\n  });\n\n  return (\n    <div className={cn('flex flex-wrap items-center gap-5', className)}>\n      <div className=\"relative shrink-0\" style={{ width: size, height: size, maxWidth: '100%' }}>\n        <svg\n          viewBox={`0 0 ${VIEW} ${VIEW}`}\n          width={size}\n          height={size}\n          role=\"img\"\n          aria-label={chartTitle}\n          style={{ display: 'block', maxWidth: '100%', height: 'auto' }}\n        >\n          <title>{chartTitle}</title>\n          <desc>\n            {segments\n              .map((s) => `${s.label}: ${valueFormatter(s.value)} (${toPercent(s.value, total)}%)`)\n              .join(', ')}\n          </desc>\n          <g\n            style={{\n              transformOrigin: 'center',\n              transform: mounted || reduced ? 'scale(1)' : 'scale(0.86)',\n              transition: reduced ? undefined : 'transform 520ms cubic-bezier(0.22,1,0.36,1)',\n            }}\n          >\n            {arcs.map((arc, i) => {\n              const shared = {\n                fill: arc.color,\n                style: {\n                  opacity: mounted || reduced ? 1 : 0,\n                  transition: reduced ? undefined : 'opacity 460ms ease',\n                  transitionDelay: reduced ? undefined : `${i * 70}ms`,\n                },\n              } as const;\n              if (arc.isFull) {\n                return (\n                  <path\n                    key={`${arc.segment.label}-${i}`}\n                    d={`M ${CENTER} ${CENTER - R_OUTER} A ${R_OUTER} ${R_OUTER} 0 1 0 ${CENTER} ${\n                      CENTER + R_OUTER\n                    } A ${R_OUTER} ${R_OUTER} 0 1 0 ${CENTER} ${CENTER - R_OUTER} M ${CENTER} ${\n                      CENTER - rInner\n                    } A ${rInner} ${rInner} 0 1 1 ${CENTER} ${CENTER + rInner} A ${rInner} ${rInner} 0 1 1 ${CENTER} ${\n                      CENTER - rInner\n                    } Z`}\n                    fillRule=\"evenodd\"\n                    {...shared}\n                  />\n                );\n              }\n              return (\n                <path\n                  key={`${arc.segment.label}-${i}`}\n                  d={donutSegmentPath(\n                    CENTER,\n                    CENTER,\n                    R_OUTER,\n                    rInner,\n                    arc.startAngle,\n                    arc.endAngle\n                  )}\n                  {...shared}\n                >\n                  <title>{`${arc.segment.label}: ${valueFormatter(arc.segment.value)}`}</title>\n                </path>\n              );\n            })}\n          </g>\n        </svg>\n        {centerLabel !== undefined || centerCaption !== undefined ? (\n          <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n            <span className=\"text-xl font-semibold leading-none text-text-primary\">\n              {centerLabel}\n            </span>\n            {centerCaption !== undefined ? (\n              <span className=\"mt-1 text-xs text-text-muted\">{centerCaption}</span>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      {showLegend ? (\n        <ul className=\"flex min-w-[8rem] flex-1 flex-col gap-1.5 text-sm\">\n          {arcs.map((arc, i) => (\n            <li key={`${arc.segment.label}-${i}`} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden=\"true\"\n                className=\"inline-block h-2.5 w-2.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: arc.color }}\n              />\n              <span className=\"flex-1 truncate text-text-secondary\">{arc.segment.label}</span>\n              <span className=\"tabular-nums text-text-muted\">\n                {toPercent(arc.segment.value, total)}%\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/kadaikodi/components/viz/HBarFunnel.js

@@ -0,0 +1,54 @@
+import { cn as e } from "../../utils/cn.js";
+import { ACCENT as t } from "./lib/palette.js";
+import { useMounted as n, usePrefersReducedMotion as r } from "./lib/hooks.js";
+import { formatCompact as i, toPercent as a } from "./lib/format.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/kadaikodi/components/viz/HBarFunnel.tsx
+function c({ stages: c, valueFormatter: l = i, showConversion: u = !0, className: d }) {
+	let f = n(), p = r();
+	if (c.length === 0) return null;
+	let m = Math.max(c[0]?.value ?? 0, 1);
+	return /* @__PURE__ */ o("ol", {
+		className: e("flex flex-col gap-2", d),
+		children: c.map((e, n) => {
+			let r = a(e.value, m, 1), i = n === 0 ? 100 : a(e.value, c[n - 1].value, 1), d = 1 - n / Math.max(c.length, 2) * .62;
+			return /* @__PURE__ */ s("li", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ s("div", {
+					className: "flex items-baseline justify-between text-sm",
+					children: [/* @__PURE__ */ o("span", {
+						className: "font-medium text-text-primary",
+						children: e.label
+					}), /* @__PURE__ */ s("span", {
+						className: "tabular-nums text-text-secondary",
+						children: [l(e.value), u && n > 0 ? /* @__PURE__ */ s("span", {
+							className: "ml-2 text-xs text-text-muted",
+							children: [i, "%"]
+						}) : null]
+					})]
+				}), /* @__PURE__ */ o("div", {
+					className: "h-7 w-full overflow-hidden rounded-[var(--radius-input)] bg-bg-sunken",
+					role: "progressbar",
+					"aria-valuenow": Math.round(r),
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-label": `${e.label}: ${l(e.value)}`,
+					children: /* @__PURE__ */ o("div", {
+						className: "h-full rounded-[var(--radius-input)]",
+						style: {
+							width: f || p ? `${r}%` : "0%",
+							backgroundColor: t,
+							opacity: d,
+							transition: p ? void 0 : "width 720ms cubic-bezier(0.22,1,0.36,1)",
+							transitionDelay: p ? void 0 : `${n * 70}ms`
+						}
+					})
+				})]
+			}, `${e.label}-${n}`);
+		})
+	});
+}
+//#endregion
+export { c as HBarFunnel };
+
+//# sourceMappingURL=HBarFunnel.js.map

package/dist/kadaikodi/components/viz/HBarFunnel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HBarFunnel.js","names":[],"sources":["../../../../src/kadaikodi/components/viz/HBarFunnel.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport { ACCENT } from './lib/palette';\nimport { formatCompact, toPercent } from './lib/format';\nimport { useMounted, usePrefersReducedMotion } from './lib/hooks';\nimport type { LabeledValue } from './lib/types';\n\nexport interface HBarFunnelProps {\n  /** Ordered funnel stages, largest first. */\n  stages: LabeledValue[];\n  valueFormatter?: (value: number) => string;\n  /** Show conversion % relative to the first stage. */\n  showConversion?: boolean;\n  className?: string;\n}\n\n/**\n * Horizontal descending funnel. Each stage renders as a bar whose width is\n * proportional to the top-of-funnel value; the accent fades down the funnel so\n * the drop-off reads at a glance. Built with CSS bars for crisp, real text.\n */\nexport function HBarFunnel({\n  stages,\n  valueFormatter = formatCompact,\n  showConversion = true,\n  className,\n}: HBarFunnelProps) {\n  const mounted = useMounted();\n  const reduced = usePrefersReducedMotion();\n\n  if (stages.length === 0) {\n    return null;\n  }\n\n  const top = Math.max(stages[0]?.value ?? 0, 1);\n\n  return (\n    <ol className={cn('flex flex-col gap-2', className)}>\n      {stages.map((stage, i) => {\n        const pct = toPercent(stage.value, top, 1);\n        const conversion = i === 0 ? 100 : toPercent(stage.value, stages[i - 1].value, 1);\n        const fillOpacity = 1 - (i / Math.max(stages.length, 2)) * 0.62;\n        return (\n          <li key={`${stage.label}-${i}`} className=\"flex flex-col gap-1\">\n            <div className=\"flex items-baseline justify-between text-sm\">\n              <span className=\"font-medium text-text-primary\">{stage.label}</span>\n              <span className=\"tabular-nums text-text-secondary\">\n                {valueFormatter(stage.value)}\n                {showConversion && i > 0 ? (\n                  <span className=\"ml-2 text-xs text-text-muted\">{conversion}%</span>\n                ) : null}\n              </span>\n            </div>\n            <div\n              className=\"h-7 w-full overflow-hidden rounded-[var(--radius-input)] bg-bg-sunken\"\n              role=\"progressbar\"\n              aria-valuenow={Math.round(pct)}\n              aria-valuemin={0}\n              aria-valuemax={100}\n              aria-label={`${stage.label}: ${valueFormatter(stage.value)}`}\n            >\n              <div\n                className=\"h-full rounded-[var(--radius-input)]\"\n                style={{\n                  width: mounted || reduced ? `${pct}%` : '0%',\n                  backgroundColor: ACCENT,\n                  opacity: fillOpacity,\n                  transition: reduced ? undefined : 'width 720ms cubic-bezier(0.22,1,0.36,1)',\n                  transitionDelay: reduced ? undefined : `${i * 70}ms`,\n                }}\n              />\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,EAAW,EACzB,WACA,oBAAiB,GACjB,oBAAiB,IACjB,gBACkB;CAClB,IAAM,IAAU,GAAY,EACtB,IAAU,GAAyB;AAEzC,KAAI,EAAO,WAAW,EACpB,QAAO;CAGT,IAAM,IAAM,KAAK,IAAI,EAAO,IAAI,SAAS,GAAG,EAAE;AAE9C,QACE,kBAAC,MAAD;EAAI,WAAW,EAAG,uBAAuB,EAAU;YAChD,EAAO,KAAK,GAAO,MAAM;GACxB,IAAM,IAAM,EAAU,EAAM,OAAO,GAAK,EAAE,EACpC,IAAa,MAAM,IAAI,MAAM,EAAU,EAAM,OAAO,EAAO,IAAI,GAAG,OAAO,EAAE,EAC3E,IAAc,IAAK,IAAI,KAAK,IAAI,EAAO,QAAQ,EAAE,GAAI;AAC3D,UACE,kBAAC,MAAD;IAAgC,WAAU;cAA1C,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAiC,EAAM;MAAa,CAAA,EACpE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACG,EAAe,EAAM,MAAM,EAC3B,KAAkB,IAAI,IACrB,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CAAgD,GAAW,IAAQ;WACjE,KACC;QACH;QACN,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,iBAAe,KAAK,MAAM,EAAI;KAC9B,iBAAe;KACf,iBAAe;KACf,cAAY,GAAG,EAAM,MAAM,IAAI,EAAe,EAAM,MAAM;eAE1D,kBAAC,OAAD;MACE,WAAU;MACV,OAAO;OACL,OAAO,KAAW,IAAU,GAAG,EAAI,KAAK;OACxC,iBAAiB;OACjB,SAAS;OACT,YAAY,IAAU,KAAA,IAAY;OAClC,iBAAiB,IAAU,KAAA,IAAY,GAAG,IAAI,GAAG;OAClD;MACD,CAAA;KACE,CAAA,CACH;MA7BI,GAAG,EAAM,MAAM,GAAG,IA6BtB;IAEP;EACC,CAAA"}

package/dist/kadaikodi/components/viz/Heatmap.js

@@ -0,0 +1,3 @@
+import "./lib/palette.js";
+import "./lib/hooks.js";
+import "react/jsx-runtime";

package/dist/kadaikodi/components/viz/KanbanBoard.js

@@ -0,0 +1,50 @@
+import { cn as e } from "../../utils/cn.js";
+import "./lib/palette.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/kadaikodi/components/viz/KanbanBoard.tsx
+function r({ columns: r, columnWidth: i = 288, emptyColumnHint: a = "Nothing here yet", className: o }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("flex gap-4 overflow-x-auto pb-2", o),
+		role: "list",
+		"aria-label": "Board columns",
+		children: r.map((e) => /* @__PURE__ */ n("section", {
+			role: "listitem",
+			"aria-label": `${e.title}, ${e.items.length} items`,
+			tabIndex: 0,
+			className: "flex shrink-0 flex-col rounded-[var(--radius-card)] border border-border-subtle bg-bg-sunken outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+			style: { width: i },
+			children: [/* @__PURE__ */ n("header", {
+				className: "flex items-center gap-2 border-b border-border-subtle px-3 py-2.5",
+				children: [
+					/* @__PURE__ */ t("span", {
+						"aria-hidden": "true",
+						className: "h-3.5 w-1 shrink-0 rounded-full",
+						style: { backgroundColor: e.accent ?? "var(--color-accent-primary)" }
+					}),
+					/* @__PURE__ */ t("h3", {
+						className: "flex-1 truncate text-sm font-semibold text-text-primary",
+						children: e.title
+					}),
+					/* @__PURE__ */ t("span", {
+						className: "inline-flex min-w-5 items-center justify-center rounded-full bg-bg-elevated px-1.5 text-xs font-medium tabular-nums text-text-secondary",
+						children: e.items.length
+					})
+				]
+			}), /* @__PURE__ */ t("ul", {
+				className: "flex flex-1 flex-col gap-2 p-2",
+				children: e.items.length === 0 ? /* @__PURE__ */ t("li", {
+					className: "rounded-[var(--radius-input)] border border-dashed border-border-subtle px-3 py-6 text-center text-xs text-text-muted",
+					children: a
+				}) : e.items.map((e, n) => /* @__PURE__ */ t("li", {
+					tabIndex: 0,
+					className: "rounded-[var(--radius-input)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+					children: e
+				}, n))
+			})]
+		}, e.id))
+	});
+}
+//#endregion
+export { r as KanbanBoard };
+
+//# sourceMappingURL=KanbanBoard.js.map

package/dist/kadaikodi/components/viz/KanbanBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.js","names":[],"sources":["../../../../src/kadaikodi/components/viz/KanbanBoard.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport { ACCENT } from './lib/palette';\nimport type { KanbanColumnData } from './lib/types';\n\nexport interface KanbanBoardProps {\n  columns: KanbanColumnData[];\n  /** Fixed column width in pixels. */\n  columnWidth?: number;\n  /** Optional empty-state node rendered inside a column with no items. */\n  emptyColumnHint?: string;\n  className?: string;\n}\n\n/**\n * Generic columns board. The caller supplies pre-rendered card nodes; the board\n * owns layout, horizontal scroll and keyboard-focusable columns/cards. It never\n * scrolls the page sideways — overflow is contained here.\n */\nexport function KanbanBoard({\n  columns,\n  columnWidth = 288,\n  emptyColumnHint = 'Nothing here yet',\n  className,\n}: KanbanBoardProps) {\n  return (\n    <div\n      className={cn('flex gap-4 overflow-x-auto pb-2', className)}\n      role=\"list\"\n      aria-label=\"Board columns\"\n    >\n      {columns.map((column) => (\n        <section\n          key={column.id}\n          role=\"listitem\"\n          aria-label={`${column.title}, ${column.items.length} items`}\n          tabIndex={0}\n          className=\"flex shrink-0 flex-col rounded-[var(--radius-card)] border border-border-subtle bg-bg-sunken outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          style={{ width: columnWidth }}\n        >\n          <header className=\"flex items-center gap-2 border-b border-border-subtle px-3 py-2.5\">\n            <span\n              aria-hidden=\"true\"\n              className=\"h-3.5 w-1 shrink-0 rounded-full\"\n              style={{ backgroundColor: column.accent ?? ACCENT }}\n            />\n            <h3 className=\"flex-1 truncate text-sm font-semibold text-text-primary\">\n              {column.title}\n            </h3>\n            <span className=\"inline-flex min-w-5 items-center justify-center rounded-full bg-bg-elevated px-1.5 text-xs font-medium tabular-nums text-text-secondary\">\n              {column.items.length}\n            </span>\n          </header>\n          <ul className=\"flex flex-1 flex-col gap-2 p-2\">\n            {column.items.length === 0 ? (\n              <li className=\"rounded-[var(--radius-input)] border border-dashed border-border-subtle px-3 py-6 text-center text-xs text-text-muted\">\n                {emptyColumnHint}\n              </li>\n            ) : (\n              column.items.map((item, i) => (\n                <li\n                  key={i}\n                  tabIndex={0}\n                  className=\"rounded-[var(--radius-input)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n                >\n                  {item}\n                </li>\n              ))\n            )}\n          </ul>\n        </section>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AAkBA,SAAgB,EAAY,EAC1B,YACA,iBAAc,KACd,qBAAkB,oBAClB,gBACmB;AACnB,QACE,kBAAC,OAAD;EACE,WAAW,EAAG,mCAAmC,EAAU;EAC3D,MAAK;EACL,cAAW;YAEV,EAAQ,KAAK,MACZ,kBAAC,WAAD;GAEE,MAAK;GACL,cAAY,GAAG,EAAO,MAAM,IAAI,EAAO,MAAM,OAAO;GACpD,UAAU;GACV,WAAU;GACV,OAAO,EAAE,OAAO,GAAa;aAN/B,CAQE,kBAAC,UAAD;IAAQ,WAAU;cAAlB;KACE,kBAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,iBAAiB,EAAO,UAAA,+BAAkB;MACnD,CAAA;KACF,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAO;MACL,CAAA;KACL,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAO,MAAM;MACT,CAAA;KACA;OACT,kBAAC,MAAD;IAAI,WAAU;cACX,EAAO,MAAM,WAAW,IACvB,kBAAC,MAAD;KAAI,WAAU;eACX;KACE,CAAA,GAEL,EAAO,MAAM,KAAK,GAAM,MACtB,kBAAC,MAAD;KAEE,UAAU;KACV,WAAU;eAET;KACE,EALE,EAKF,CACL;IAED,CAAA,CACG;KArCH,EAAO,GAqCJ,CACV;EACE,CAAA"}

package/dist/kadaikodi/components/viz/LineChart.js

@@ -0,0 +1,4 @@
+import "./lib/palette.js";
+import "./lib/hooks.js";
+import "./lib/CartesianFrame.js";
+import "react/jsx-runtime";

package/dist/kadaikodi/components/viz/OrgTree.js

@@ -0,0 +1,2 @@
+import "./lib/Avatar.js";
+import "react/jsx-runtime";

package/dist/kadaikodi/components/viz/PathSteps.js

@@ -0,0 +1,3 @@
+import "./lib/palette.js";
+import "lucide-react";
+import "react/jsx-runtime";

package/dist/kadaikodi/components/viz/ProgressRing.js

@@ -0,0 +1,68 @@
+import { cn as e } from "../../utils/cn.js";
+import { ACCENT as t } from "./lib/palette.js";
+import { useMounted as n, usePrefersReducedMotion as r } from "./lib/hooks.js";
+import { clamp as i } from "./lib/geometry.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/kadaikodi/components/viz/ProgressRing.tsx
+var s = 100, c = s / 2;
+function l({ value: l, max: u = 100, label: d, caption: f, size: p = 132, thickness: m = 10, color: h = t, title: g, className: _ }) {
+	let v = n(), y = r(), b = c - m / 2, x = 2 * Math.PI * b, S = i(u === 0 ? 0 : l / u, 0, 1), C = x * (1 - S), w = v || y ? C : x, T = g ?? `Progress: ${Math.round(S * 100)} percent`;
+	return /* @__PURE__ */ o("div", {
+		className: e("relative inline-flex shrink-0", _),
+		style: {
+			width: p,
+			height: p,
+			maxWidth: "100%"
+		},
+		children: [/* @__PURE__ */ o("svg", {
+			viewBox: `0 0 ${s} ${s}`,
+			width: p,
+			height: p,
+			role: "img",
+			"aria-label": T,
+			style: {
+				display: "block",
+				maxWidth: "100%",
+				height: "auto"
+			},
+			children: [
+				/* @__PURE__ */ a("title", { children: T }),
+				/* @__PURE__ */ a("circle", {
+					cx: c,
+					cy: c,
+					r: b,
+					fill: "none",
+					stroke: "var(--color-chart-grid)",
+					strokeWidth: m,
+					opacity: .7
+				}),
+				/* @__PURE__ */ a("circle", {
+					cx: c,
+					cy: c,
+					r: b,
+					fill: "none",
+					stroke: h,
+					strokeWidth: m,
+					strokeLinecap: "round",
+					strokeDasharray: x,
+					strokeDashoffset: w,
+					transform: `rotate(-90 ${c} ${c})`,
+					style: { transition: y ? void 0 : "stroke-dashoffset 900ms cubic-bezier(0.22,1,0.36,1)" }
+				})
+			]
+		}), /* @__PURE__ */ o("div", {
+			className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+			children: [/* @__PURE__ */ a("span", {
+				className: "text-2xl font-semibold leading-none text-text-primary",
+				children: d ?? Math.round(S * 100)
+			}), f === void 0 ? null : /* @__PURE__ */ a("span", {
+				className: "mt-1 text-xs text-text-muted",
+				children: f
+			})]
+		})]
+	});
+}
+//#endregion
+export { l as ProgressRing };
+
+//# sourceMappingURL=ProgressRing.js.map

package/dist/kadaikodi/components/viz/ProgressRing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressRing.js","names":[],"sources":["../../../../src/kadaikodi/components/viz/ProgressRing.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { ACCENT } from './lib/palette';\nimport { clamp } from './lib/geometry';\nimport { useMounted, usePrefersReducedMotion } from './lib/hooks';\n\nexport interface ProgressRingProps {\n  value: number;\n  max?: number;\n  /** Center content. Defaults to the rounded value (e.g. \"4.6\" or \"72%\"). */\n  label?: ReactNode;\n  /** Small caption under the center label. */\n  caption?: ReactNode;\n  size?: number;\n  /** Stroke thickness in viewBox units. */\n  thickness?: number;\n  /** Tokenized arc color; defaults to the product accent. */\n  color?: string;\n  title?: string;\n  className?: string;\n}\n\nconst VIEW = 100;\nconst CENTER = VIEW / 2;\n\n/** Circular gauge for a score or percentage, with an animated sweep. */\nexport function ProgressRing({\n  value,\n  max = 100,\n  label,\n  caption,\n  size = 132,\n  thickness = 10,\n  color = ACCENT,\n  title,\n  className,\n}: ProgressRingProps) {\n  const mounted = useMounted();\n  const reduced = usePrefersReducedMotion();\n\n  const radius = CENTER - thickness / 2;\n  const circumference = 2 * Math.PI * radius;\n  const fraction = clamp(max === 0 ? 0 : value / max, 0, 1);\n  const target = circumference * (1 - fraction);\n  const offset = mounted || reduced ? target : circumference;\n  const ringTitle = title ?? `Progress: ${Math.round(fraction * 100)} percent`;\n\n  return (\n    <div\n      className={cn('relative inline-flex shrink-0', className)}\n      style={{ width: size, height: size, maxWidth: '100%' }}\n    >\n      <svg\n        viewBox={`0 0 ${VIEW} ${VIEW}`}\n        width={size}\n        height={size}\n        role=\"img\"\n        aria-label={ringTitle}\n        style={{ display: 'block', maxWidth: '100%', height: 'auto' }}\n      >\n        <title>{ringTitle}</title>\n        <circle\n          cx={CENTER}\n          cy={CENTER}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--color-chart-grid)\"\n          strokeWidth={thickness}\n          opacity={0.7}\n        />\n        <circle\n          cx={CENTER}\n          cy={CENTER}\n          r={radius}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={thickness}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          transform={`rotate(-90 ${CENTER} ${CENTER})`}\n          style={{\n            transition: reduced ? undefined : 'stroke-dashoffset 900ms cubic-bezier(0.22,1,0.36,1)',\n          }}\n        />\n      </svg>\n      <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n        <span className=\"text-2xl font-semibold leading-none text-text-primary\">\n          {label ?? Math.round(fraction * 100)}\n        </span>\n        {caption !== undefined ? (\n          <span className=\"mt-1 text-xs text-text-muted\">{caption}</span>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,IAAM,IAAO,KACP,IAAS,IAAO;AAGtB,SAAgB,EAAa,EAC3B,UACA,SAAM,KACN,UACA,YACA,UAAO,KACP,eAAY,IACZ,WAAQ,GACR,UACA,gBACoB;CACpB,IAAM,IAAU,GAAY,EACtB,IAAU,GAAyB,EAEnC,IAAS,IAAS,IAAY,GAC9B,IAAgB,IAAI,KAAK,KAAK,GAC9B,IAAW,EAAM,MAAQ,IAAI,IAAI,IAAQ,GAAK,GAAG,EAAE,EACnD,IAAS,KAAiB,IAAI,IAC9B,IAAS,KAAW,IAAU,IAAS,GACvC,IAAY,KAAS,aAAa,KAAK,MAAM,IAAW,IAAI,CAAC;AAEnE,QACE,kBAAC,OAAD;EACE,WAAW,EAAG,iCAAiC,EAAU;EACzD,OAAO;GAAE,OAAO;GAAM,QAAQ;GAAM,UAAU;GAAQ;YAFxD,CAIE,kBAAC,OAAD;GACE,SAAS,OAAO,EAAK,GAAG;GACxB,OAAO;GACP,QAAQ;GACR,MAAK;GACL,cAAY;GACZ,OAAO;IAAE,SAAS;IAAS,UAAU;IAAQ,QAAQ;IAAQ;aAN/D;IAQE,kBAAC,SAAD,EAAA,UAAQ,GAAkB,CAAA;IAC1B,kBAAC,UAAD;KACE,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,MAAK;KACL,QAAO;KACP,aAAa;KACb,SAAS;KACT,CAAA;IACF,kBAAC,UAAD;KACE,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,MAAK;KACL,QAAQ;KACR,aAAa;KACb,eAAc;KACd,iBAAiB;KACjB,kBAAkB;KAClB,WAAW,cAAc,EAAO,GAAG,EAAO;KAC1C,OAAO,EACL,YAAY,IAAU,KAAA,IAAY,uDACnC;KACD,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cACb,KAAS,KAAK,MAAM,IAAW,IAAI;IAC/B,CAAA,EACN,MAAY,KAAA,IAET,OADF,kBAAC,QAAD;IAAM,WAAU;cAAgC;IAAe,CAAA,CAE7D;KACF"}

package/dist/kadaikodi/components/viz/RatingStars.js

@@ -0,0 +1,51 @@
+import { cn as e } from "../../utils/cn.js";
+import { STATUS as t } from "./lib/palette.js";
+import { clamp as n } from "./lib/geometry.js";
+import { Star as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/kadaikodi/components/viz/RatingStars.tsx
+function o({ value: o, max: s = 5, showValue: c = !1, count: l, size: u = 16, className: d }) {
+	let f = n(o, 0, s), p = f / s * 100, m = Math.round(u * .15), h = (e) => /* @__PURE__ */ i("span", {
+		className: "flex",
+		style: { gap: m },
+		"aria-hidden": "true",
+		children: Array.from({ length: s }, (n, a) => /* @__PURE__ */ i(r, {
+			width: u,
+			height: u,
+			strokeWidth: 1.5,
+			style: { color: e ? t.warning : "var(--color-border-strong)" },
+			fill: e ? "currentColor" : "none"
+		}, a))
+	});
+	return /* @__PURE__ */ a("span", {
+		className: e("inline-flex items-center gap-1.5", d),
+		role: "img",
+		"aria-label": `Rated ${f} out of ${s}${l === void 0 ? "" : ` from ${l} reviews`}`,
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: "relative inline-flex",
+				children: [h(!1), /* @__PURE__ */ i("span", {
+					className: "absolute left-0 top-0 overflow-hidden",
+					style: { width: `${p}%` },
+					children: h(!0)
+				})]
+			}),
+			c ? /* @__PURE__ */ i("span", {
+				className: "text-sm font-medium tabular-nums text-text-secondary",
+				children: f.toFixed(1)
+			}) : null,
+			l === void 0 ? null : /* @__PURE__ */ a("span", {
+				className: "text-xs text-text-muted",
+				children: [
+					"(",
+					l,
+					")"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { o as RatingStars };
+
+//# sourceMappingURL=RatingStars.js.map

package/dist/kadaikodi/components/viz/RatingStars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingStars.js","names":[],"sources":["../../../../src/kadaikodi/components/viz/RatingStars.tsx"],"sourcesContent":["import { Star } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { STATUS } from './lib/palette';\nimport { clamp } from './lib/geometry';\n\nexport interface RatingStarsProps {\n  value: number;\n  max?: number;\n  /** Show the numeric value next to the stars. */\n  showValue?: boolean;\n  /** Optional review count, e.g. \"(128)\". */\n  count?: number;\n  /** Star size in pixels. */\n  size?: number;\n  className?: string;\n}\n\n/** Filled / empty stars for a 0–max rating, with optional value + count. */\nexport function RatingStars({\n  value,\n  max = 5,\n  showValue = false,\n  count,\n  size = 16,\n  className,\n}: RatingStarsProps) {\n  const clamped = clamp(value, 0, max);\n  const fillPct = (clamped / max) * 100;\n  const gap = Math.round(size * 0.15);\n\n  const row = (filled: boolean) => (\n    <span className=\"flex\" style={{ gap }} aria-hidden=\"true\">\n      {Array.from({ length: max }, (_, i) => (\n        <Star\n          key={i}\n          width={size}\n          height={size}\n          strokeWidth={1.5}\n          style={{ color: filled ? STATUS.warning : 'var(--color-border-strong)' }}\n          fill={filled ? 'currentColor' : 'none'}\n        />\n      ))}\n    </span>\n  );\n\n  return (\n    <span\n      className={cn('inline-flex items-center gap-1.5', className)}\n      role=\"img\"\n      aria-label={`Rated ${clamped} out of ${max}${count !== undefined ? ` from ${count} reviews` : ''}`}\n    >\n      <span className=\"relative inline-flex\">\n        {row(false)}\n        <span className=\"absolute left-0 top-0 overflow-hidden\" style={{ width: `${fillPct}%` }}>\n          {row(true)}\n        </span>\n      </span>\n      {showValue ? (\n        <span className=\"text-sm font-medium tabular-nums text-text-secondary\">\n          {clamped.toFixed(1)}\n        </span>\n      ) : null}\n      {count !== undefined ? <span className=\"text-xs text-text-muted\">({count})</span> : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,EAAY,EAC1B,UACA,SAAM,GACN,eAAY,IACZ,UACA,UAAO,IACP,gBACmB;CACnB,IAAM,IAAU,EAAM,GAAO,GAAG,EAAI,EAC9B,IAAW,IAAU,IAAO,KAC5B,IAAM,KAAK,MAAM,IAAO,IAAK,EAE7B,KAAO,MACX,kBAAC,QAAD;EAAM,WAAU;EAAO,OAAO,EAAE,QAAK;EAAE,eAAY;YAChD,MAAM,KAAK,EAAE,QAAQ,GAAK,GAAG,GAAG,MAC/B,kBAAC,GAAD;GAEE,OAAO;GACP,QAAQ;GACR,aAAa;GACb,OAAO,EAAE,OAAO,IAAS,EAAO,UAAU,8BAA8B;GACxE,MAAM,IAAS,iBAAiB;GAChC,EANK,EAML,CACF;EACG,CAAA;AAGT,QACE,kBAAC,QAAD;EACE,WAAW,EAAG,oCAAoC,EAAU;EAC5D,MAAK;EACL,cAAY,SAAS,EAAQ,UAAU,IAAM,MAAU,KAAA,IAAuC,KAA3B,SAAS,EAAM;YAHpF;GAKE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAI,GAAM,EACX,kBAAC,QAAD;KAAM,WAAU;KAAwC,OAAO,EAAE,OAAO,GAAG,EAAQ,IAAI;eACpF,EAAI,GAAK;KACL,CAAA,CACF;;GACN,IACC,kBAAC,QAAD;IAAM,WAAU;cACb,EAAQ,QAAQ,EAAE;IACd,CAAA,GACL;GACH,MAAU,KAAA,IAAyE,OAA7D,kBAAC,QAAD;IAAM,WAAU;cAAhB;KAA0C;KAAE;KAAM;KAAQ;;GAC5E"}

package/dist/kadaikodi/components/viz/SegmentedTabs.js

@@ -0,0 +1,69 @@
+import { cn as e } from "../../utils/cn.js";
+import { ACCENT as t } from "./lib/palette.js";
+import { useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/kadaikodi/components/viz/SegmentedTabs.tsx
+function a({ tabs: a, value: o, onChange: s, variant: c = "pill", fill: l = !1, className: u, "aria-label": d }) {
+	let f = n([]), p = (e) => {
+		let t = (e + a.length) % a.length, n = a[t];
+		n && (s(n.id), f.current[t]?.focus());
+	}, m = (e, t) => {
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				e.preventDefault(), p(t + 1);
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				e.preventDefault(), p(t - 1);
+				break;
+			case "Home":
+				e.preventDefault(), p(0);
+				break;
+			case "End":
+				e.preventDefault(), p(a.length - 1);
+				break;
+			default: break;
+		}
+	}, h = c === "pill";
+	return /* @__PURE__ */ r("div", {
+		role: "tablist",
+		"aria-label": d,
+		className: e("flex items-center", h ? "gap-1 rounded-full border border-border-subtle bg-bg-sunken p-1" : "gap-1 border-b border-border-subtle", l && "w-full", u),
+		children: a.map((n, a) => {
+			let c = n.id === o;
+			return /* @__PURE__ */ i("button", {
+				ref: (e) => {
+					f.current[a] = e;
+				},
+				type: "button",
+				role: "tab",
+				"aria-selected": c,
+				"aria-controls": n.controls,
+				tabIndex: c ? 0 : -1,
+				onClick: () => s(n.id),
+				onKeyDown: (e) => m(e, a),
+				className: e("inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", l && "flex-1", h ? e("rounded-full px-3 py-1.5", c ? "bg-bg-surface text-text-primary shadow-elevation-1" : "text-text-secondary hover:text-text-primary") : e("-mb-px border-b-2 px-3 py-2", c ? "text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary")),
+				style: !h && c ? {
+					borderColor: t,
+					color: "var(--color-text-primary)"
+				} : void 0,
+				children: [
+					n.icon ? /* @__PURE__ */ r("span", {
+						"aria-hidden": "true",
+						children: n.icon
+					}) : null,
+					n.label,
+					n.count === void 0 ? null : /* @__PURE__ */ r("span", {
+						className: e("inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs tabular-nums", c ? "bg-bg-sunken text-text-secondary" : "bg-bg-elevated text-text-muted"),
+						children: n.count
+					})
+				]
+			}, n.id);
+		})
+	});
+}
+//#endregion
+export { a as SegmentedTabs };
+
+//# sourceMappingURL=SegmentedTabs.js.map

package/dist/kadaikodi/components/viz/SegmentedTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabs.js","names":[],"sources":["../../../../src/kadaikodi/components/viz/SegmentedTabs.tsx"],"sourcesContent":["import { type KeyboardEvent, type ReactNode, useRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport { ACCENT } from './lib/palette';\n\nexport interface SegmentedTab {\n  id: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  count?: number;\n  /** id of the panel this tab controls (for aria-controls). */\n  controls?: string;\n}\n\nexport interface SegmentedTabsProps {\n  tabs: SegmentedTab[];\n  value: string;\n  onChange: (id: string) => void;\n  variant?: 'pill' | 'underline';\n  /** Stretch tabs to fill the available width. */\n  fill?: boolean;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A controlled pill / underline tab switcher with a proper tablist:\n * roving tab focus, arrow / Home / End navigation, and tokenized styling.\n */\nexport function SegmentedTabs({\n  tabs,\n  value,\n  onChange,\n  variant = 'pill',\n  fill = false,\n  className,\n  'aria-label': ariaLabel,\n}: SegmentedTabsProps) {\n  const refs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const focusTab = (index: number): void => {\n    const clamped = (index + tabs.length) % tabs.length;\n    const tab = tabs[clamped];\n    if (tab) {\n      onChange(tab.id);\n      refs.current[clamped]?.focus();\n    }\n  };\n\n  const handleKey = (event: KeyboardEvent<HTMLButtonElement>, index: number): void => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        focusTab(index + 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        focusTab(index - 1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        focusTab(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        focusTab(tabs.length - 1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isPill = variant === 'pill';\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      className={cn(\n        'flex items-center',\n        isPill\n          ? 'gap-1 rounded-full border border-border-subtle bg-bg-sunken p-1'\n          : 'gap-1 border-b border-border-subtle',\n        fill && 'w-full',\n        className\n      )}\n    >\n      {tabs.map((tab, i) => {\n        const selected = tab.id === value;\n        return (\n          <button\n            key={tab.id}\n            ref={(node) => {\n              refs.current[i] = node;\n            }}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={selected}\n            aria-controls={tab.controls}\n            tabIndex={selected ? 0 : -1}\n            onClick={() => onChange(tab.id)}\n            onKeyDown={(event) => handleKey(event, i)}\n            className={cn(\n              'inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n              fill && 'flex-1',\n              isPill\n                ? cn(\n                    'rounded-full px-3 py-1.5',\n                    selected\n                      ? 'bg-bg-surface text-text-primary shadow-elevation-1'\n                      : 'text-text-secondary hover:text-text-primary'\n                  )\n                : cn(\n                    '-mb-px border-b-2 px-3 py-2',\n                    selected\n                      ? 'text-text-primary'\n                      : 'border-transparent text-text-secondary hover:text-text-primary'\n                  )\n            )}\n            style={\n              !isPill && selected\n                ? { borderColor: ACCENT, color: 'var(--color-text-primary)' }\n                : undefined\n            }\n          >\n            {tab.icon ? <span aria-hidden=\"true\">{tab.icon}</span> : null}\n            {tab.label}\n            {tab.count !== undefined ? (\n              <span\n                className={cn(\n                  'inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs tabular-nums',\n                  selected ? 'bg-bg-sunken text-text-secondary' : 'bg-bg-elevated text-text-muted'\n                )}\n              >\n                {tab.count}\n              </span>\n            ) : null}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA4BA,SAAgB,EAAc,EAC5B,SACA,UACA,aACA,aAAU,QACV,UAAO,IACP,cACA,cAAc,KACO;CACrB,IAAM,IAAO,EAAqC,EAAE,CAAC,EAE/C,KAAY,MAAwB;EACxC,IAAM,KAAW,IAAQ,EAAK,UAAU,EAAK,QACvC,IAAM,EAAK;AACjB,EAAI,MACF,EAAS,EAAI,GAAG,EAChB,EAAK,QAAQ,IAAU,OAAO;IAI5B,KAAa,GAAyC,MAAwB;AAClF,UAAQ,EAAM,KAAd;GACE,KAAK;GACL,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,EAAS,IAAQ,EAAE;AACnB;GACF,KAAK;GACL,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,EAAS,IAAQ,EAAE;AACnB;GACF,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,EAAS,EAAE;AACX;GACF,KAAK;AAEH,IADA,EAAM,gBAAgB,EACtB,EAAS,EAAK,SAAS,EAAE;AACzB;GACF,QACE;;IAIA,IAAS,MAAY;AAE3B,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,EACT,qBACA,IACI,oEACA,uCACJ,KAAQ,UACR,EACD;YAEA,EAAK,KAAK,GAAK,MAAM;GACpB,IAAM,IAAW,EAAI,OAAO;AAC5B,UACE,kBAAC,UAAD;IAEE,MAAM,MAAS;AACb,OAAK,QAAQ,KAAK;;IAEpB,MAAK;IACL,MAAK;IACL,iBAAe;IACf,iBAAe,EAAI;IACnB,UAAU,IAAW,IAAI;IACzB,eAAe,EAAS,EAAI,GAAG;IAC/B,YAAY,MAAU,EAAU,GAAO,EAAE;IACzC,WAAW,EACT,0LACA,KAAQ,UACR,IACI,EACE,4BACA,IACI,uDACA,8CACL,GACD,EACE,+BACA,IACI,sBACA,iEACL,CACN;IACD,OACE,CAAC,KAAU,IACP;KAAE,aAAa;KAAQ,OAAO;KAA6B,GAC3D,KAAA;cAhCR;KAmCG,EAAI,OAAO,kBAAC,QAAD;MAAM,eAAY;gBAAQ,EAAI;MAAY,CAAA,GAAG;KACxD,EAAI;KACJ,EAAI,UAAU,KAAA,IASX,OARF,kBAAC,QAAD;MACE,WAAW,EACT,4FACA,IAAW,qCAAqC,iCACjD;gBAEA,EAAI;MACA,CAAA;KAEF;MA9CF,EAAI,GA8CF;IAEX;EACE,CAAA"}

package/dist/kadaikodi/components/viz/SkillBar.js

@@ -0,0 +1,3 @@
+import "./lib/palette.js";
+import "./lib/hooks.js";
+import "react/jsx-runtime";

package/dist/kadaikodi/components/viz/Sparkline.js

@@ -0,0 +1,74 @@
+import { ACCENT as e } from "./lib/palette.js";
+import { useMounted as t, usePrefersReducedMotion as n, useVizId as r } from "./lib/hooks.js";
+import { ResponsiveSvg as i } from "./lib/ResponsiveSvg.js";
+import { buildAreaPath as a, buildLinePath as o, pointsFromValues as s } from "./lib/geometry.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/kadaikodi/components/viz/Sparkline.tsx
+var u = 3;
+function d({ data: d, variant: f = "line", height: p = 36, label: m, className: h }) {
+	let g = r("spark-grad"), _ = t(), v = n();
+	return d.length === 0 ? null : /* @__PURE__ */ c(i, {
+		height: p,
+		title: m ?? `Trend of ${d.length} points`,
+		minWidth: 96,
+		className: h,
+		children: ({ width: t }) => {
+			let n = s(d, t, p, u), r = o(n), i = a(n, p - u), m = n[n.length - 1];
+			return /* @__PURE__ */ l("g", {
+				style: { color: e },
+				children: [
+					/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ l("linearGradient", {
+						id: g,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ c("stop", {
+							offset: "0%",
+							stopColor: "currentColor",
+							stopOpacity: .28
+						}), /* @__PURE__ */ c("stop", {
+							offset: "100%",
+							stopColor: "currentColor",
+							stopOpacity: 0
+						})]
+					}) }),
+					f === "area" ? /* @__PURE__ */ c("path", {
+						d: i,
+						fill: `url(#${g})`,
+						stroke: "none",
+						style: {
+							opacity: _ || v ? 1 : 0,
+							transition: v ? void 0 : "opacity 700ms ease"
+						}
+					}) : null,
+					/* @__PURE__ */ c("path", {
+						d: r,
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: 2,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						vectorEffect: "non-scaling-stroke",
+						pathLength: 1,
+						style: {
+							strokeDasharray: 1,
+							strokeDashoffset: _ || v ? 0 : 1,
+							transition: v ? void 0 : "stroke-dashoffset 900ms ease"
+						}
+					}),
+					/* @__PURE__ */ c("circle", {
+						cx: m.x,
+						cy: m.y,
+						r: 2.6,
+						fill: "currentColor"
+					})
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { d as Sparkline };
+
+//# sourceMappingURL=Sparkline.js.map

package/dist/kadaikodi/components/viz/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.js","names":[],"sources":["../../../../src/kadaikodi/components/viz/Sparkline.tsx"],"sourcesContent":["import { ACCENT } from './lib/palette';\nimport { ResponsiveSvg } from './lib/ResponsiveSvg';\nimport { buildAreaPath, buildLinePath, pointsFromValues } from './lib/geometry';\nimport { useMounted, usePrefersReducedMotion, useVizId } from './lib/hooks';\n\nexport interface SparklineProps {\n  /** Ordered trend values (oldest first). */\n  data: number[];\n  variant?: 'line' | 'area';\n  /** Pixel height of the sparkline. */\n  height?: number;\n  /** Accessible label; defaults to a generic trend description. */\n  label?: string;\n  className?: string;\n}\n\nconst PAD = 3;\n\n/**\n * Tiny inline trend line/area for KPI cards. Draws itself in on mount\n * (unless reduced-motion is requested) and emphasizes the final point.\n */\nexport function Sparkline({\n  data,\n  variant = 'line',\n  height = 36,\n  label,\n  className,\n}: SparklineProps) {\n  const gradientId = useVizId('spark-grad');\n  const mounted = useMounted();\n  const reduced = usePrefersReducedMotion();\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  const title = label ?? `Trend of ${data.length} points`;\n\n  return (\n    <ResponsiveSvg height={height} title={title} minWidth={96} className={className}>\n      {({ width }) => {\n        const points = pointsFromValues(data, width, height, PAD);\n        const linePath = buildLinePath(points);\n        const areaPath = buildAreaPath(points, height - PAD);\n        const last = points[points.length - 1];\n        return (\n          <g style={{ color: ACCENT }}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity={0.28} />\n                <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity={0} />\n              </linearGradient>\n            </defs>\n            {variant === 'area' ? (\n              <path\n                d={areaPath}\n                fill={`url(#${gradientId})`}\n                stroke=\"none\"\n                style={{\n                  opacity: mounted || reduced ? 1 : 0,\n                  transition: reduced ? undefined : 'opacity 700ms ease',\n                }}\n              />\n            ) : null}\n            <path\n              d={linePath}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              vectorEffect=\"non-scaling-stroke\"\n              pathLength={1}\n              style={{\n                strokeDasharray: 1,\n                strokeDashoffset: mounted || reduced ? 0 : 1,\n                transition: reduced ? undefined : 'stroke-dashoffset 900ms ease',\n              }}\n            />\n            <circle cx={last.x} cy={last.y} r={2.6} fill=\"currentColor\" />\n          </g>\n        );\n      }}\n    </ResponsiveSvg>\n  );\n}\n"],"mappings":";;;;;;AAgBA,IAAM,IAAM;AAMZ,SAAgB,EAAU,EACxB,SACA,aAAU,QACV,YAAS,IACT,UACA,gBACiB;CACjB,IAAM,IAAa,EAAS,aAAa,EACnC,IAAU,GAAY,EACtB,IAAU,GAAyB;AAQzC,QANI,EAAK,WAAW,IACX,OAMP,kBAAC,GAAD;EAAuB;EAAe,OAH1B,KAAS,YAAY,EAAK,OAAO;EAGA,UAAU;EAAe;aAClE,EAAE,eAAY;GACd,IAAM,IAAS,EAAiB,GAAM,GAAO,GAAQ,EAAI,EACnD,IAAW,EAAc,EAAO,EAChC,IAAW,EAAc,GAAQ,IAAS,EAAI,EAC9C,IAAO,EAAO,EAAO,SAAS;AACpC,UACE,kBAAC,KAAD;IAAG,OAAO,EAAE,OAAO,GAAQ;cAA3B;KACE,kBAAC,QAAD,EAAA,UACE,kBAAC,kBAAD;MAAgB,IAAI;MAAY,IAAG;MAAI,IAAG;MAAI,IAAG;MAAI,IAAG;gBAAxD,CACE,kBAAC,QAAD;OAAM,QAAO;OAAK,WAAU;OAAe,aAAa;OAAQ,CAAA,EAChE,kBAAC,QAAD;OAAM,QAAO;OAAO,WAAU;OAAe,aAAa;OAAK,CAAA,CAChD;SACZ,CAAA;KACN,MAAY,SACX,kBAAC,QAAD;MACE,GAAG;MACH,MAAM,QAAQ,EAAW;MACzB,QAAO;MACP,OAAO;OACL,SAAS,KAAW,IAAU,IAAI;OAClC,YAAY,IAAU,KAAA,IAAY;OACnC;MACD,CAAA,GACA;KACJ,kBAAC,QAAD;MACE,GAAG;MACH,MAAK;MACL,QAAO;MACP,aAAa;MACb,eAAc;MACd,gBAAe;MACf,cAAa;MACb,YAAY;MACZ,OAAO;OACL,iBAAiB;OACjB,kBAAkB,KAAW,IAAU,IAAI;OAC3C,YAAY,IAAU,KAAA,IAAY;OACnC;MACD,CAAA;KACF,kBAAC,UAAD;MAAQ,IAAI,EAAK;MAAG,IAAI,EAAK;MAAG,GAAG;MAAK,MAAK;MAAiB,CAAA;KAC5D;;;EAGM,CAAA"}