@atmos.build/ui 0.1.0

package/dist/components/charts/layout.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function cartesianMetrics(props, stacked) {
+    const w = 720;
+    const h = 220;
+    const axis = props.axis;
+    const showXAxis = axis?.showXAxis ?? true;
+    const showYAxis = axis?.showYAxis ?? true;
+    const pad = {
+        l: showYAxis ? (axis?.yLabel ? 62 : 44) : 20,
+        r: 16,
+        t: 14,
+        b: showXAxis ? (axis?.xLabel ? 46 : 32) : 16,
+    };
+    const innerW = w - pad.l - pad.r;
+    const innerH = h - pad.t - pad.b;
+    const yKeys = props.yKeys ?? ['value'];
+    const values = stacked
+        ? props.data
+            .map((row) => yKeys.reduce((sum, key) => sum + Math.max(0, Number(row[key] ?? 0)), 0))
+            .filter(Number.isFinite)
+        : yKeys.flatMap((key) => props.data.map((row) => Number(row[key] ?? 0))).filter(Number.isFinite);
+    const max = Math.max(...values, 1);
+    const y = (value) => pad.t + innerH * (1 - value / max);
+    const x = (index) => props.data.length > 1 ? pad.l + (innerW / (props.data.length - 1)) * index : pad.l + innerW / 2;
+    return {
+        w,
+        h,
+        pad,
+        innerW,
+        innerH,
+        max,
+        axis,
+        showXAxis,
+        showYAxis,
+        y,
+        x,
+        valueFormatter: props.valueFormatter,
+    };
+}
+const compactNumber = new Intl.NumberFormat(undefined, {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+});
+function formatCompactNumber(value) {
+    return compactNumber.format(Math.round(value));
+}
+export function CartesianGrid({ data, xKey, w, h, pad, innerW, innerH, max, axis, showXAxis, showYAxis, valueFormatter, banded = false, }) {
+    const showGrid = axis?.showGrid ?? true;
+    const yTickCount = Math.max(2, Math.min(axis?.yTickCount ?? 4, 8, Math.floor(max) + 1));
+    const xTickCount = Math.max(2, Math.min(axis?.xTickCount ?? 6, 12));
+    const xEvery = Math.max(1, Math.ceil(data.length / xTickCount));
+    const format = valueFormatter ?? formatCompactNumber;
+    const xPosition = (index) => banded
+        ? pad.l + (innerW / Math.max(1, data.length)) * (index + 0.5)
+        : data.length > 1
+            ? pad.l + (innerW / (data.length - 1)) * index
+            : pad.l + innerW / 2;
+    return (_jsxs("g", { "aria-hidden": true, children: [showGrid
+                ? Array.from({ length: yTickCount }).map((_, index) => {
+                    const y = pad.t + (innerH / (yTickCount - 1)) * index;
+                    return (_jsx("line", { x1: pad.l, x2: w - pad.r, y1: y, y2: y, stroke: "currentColor", strokeOpacity: 0.09 }, index));
+                })
+                : null, showYAxis
+                ? Array.from({ length: yTickCount }).map((_, index) => {
+                    const value = max * (1 - index / (yTickCount - 1));
+                    const y = pad.t + (innerH / (yTickCount - 1)) * index;
+                    return (_jsx("text", { x: pad.l - 10, y: y + 3, textAnchor: "end", fill: "currentColor", opacity: 0.52, fontSize: "9", children: format(value) }, `y-${index}`));
+                })
+                : null, showXAxis ? (_jsx(_Fragment, { children: data.map((row, index) => {
+                    if (index % xEvery !== 0 && index !== data.length - 1)
+                        return null;
+                    return (_jsx("text", { x: xPosition(index), y: h - (axis?.xLabel ? 24 : 10), textAnchor: "middle", fill: "currentColor", opacity: 0.58, fontSize: "9", children: String(row[xKey] ?? index + 1) }, `x-${index}`));
+                }) })) : null, showXAxis && axis?.xLabel ? (_jsx("text", { x: pad.l + innerW / 2, y: h - 6, textAnchor: "middle", fill: "currentColor", opacity: 0.58, fontSize: "10", children: axis.xLabel })) : null, showYAxis && axis?.yLabel ? (_jsx("text", { x: 16, y: pad.t + innerH / 2, textAnchor: "middle", transform: `rotate(-90 16 ${pad.t + innerH / 2})`, fill: "currentColor", opacity: 0.58, fontSize: "10", children: axis.yLabel })) : null] }));
+}
+export function categoricalMetrics(height) {
+    const w = 720;
+    const h = Math.max(170, Math.min(height, 420));
+    return {
+        w,
+        h,
+        cx: w / 2,
+        cy: h / 2,
+        r: Math.min(82, h / 2 - 22),
+    };
+}
+export function piePath(cx, cy, r, start, end) {
+    const large = end - start > Math.PI ? 1 : 0;
+    const x1 = cx + Math.cos(start) * r;
+    const y1 = cy + Math.sin(start) * r;
+    const x2 = cx + Math.cos(end) * r;
+    const y2 = cy + Math.sin(end) * r;
+    return `M ${cx} ${cy} L ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${x2.toFixed(2)} ${y2.toFixed(2)} Z`;
+}
+export function ringArcPath(cx, cy, r, start, end) {
+    const large = end - start > Math.PI ? 1 : 0;
+    const x1 = cx + Math.cos(start) * r;
+    const y1 = cy + Math.sin(start) * r;
+    const x2 = cx + Math.cos(end) * r;
+    const y2 = cy + Math.sin(end) * r;
+    return `M ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`;
+}

package/dist/components/charts/legend.d.ts

@@ -0,0 +1,6 @@
+import type { ChartLegendItem } from './types.js';
+export declare function ChartLegend({ items, position, className, }: {
+    items: ChartLegendItem[];
+    position?: 'top' | 'bottom' | 'right';
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/components/charts/legend.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/cn.js';
+export function ChartLegend({ items, position = 'top', className, }) {
+    if (items.length === 0)
+        return null;
+    return (_jsx("div", { className: cn('text-muted-foreground flex flex-wrap gap-x-4 gap-y-1.5 text-[11px]', position === 'right' && 'content-start', className), children: items.map((item) => (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: item.color }, "aria-hidden": true }), _jsx("span", { className: "truncate", children: item.label })] }, item.label))) }));
+}

package/dist/components/charts/line-area-chart.d.ts

@@ -0,0 +1,4 @@
+import type { CartesianChartProps } from './types.js';
+export declare function LineAreaChart(props: CartesianChartProps & {
+    variant: 'line' | 'area';
+}): import("react").JSX.Element;

package/dist/components/charts/line-area-chart.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '../../lib/cn.js';
+import { chartColor } from './colors.js';
+import { ChartTooltip, useCartesianHover } from './hover.js';
+import { CartesianGrid, cartesianMetrics } from './layout.js';
+export function LineAreaChart(props) {
+    const { data, xKey = 'label', yKeys = ['value'], dashedKeys, colors, className, variant } = props;
+    const fillId = `chart-fill-${useId().replaceAll(':', '')}`;
+    const metrics = cartesianMetrics(props, false);
+    const format = props.valueFormatter ?? ((value) => String(value));
+    const { state: hoverState, move, clear } = useCartesianHover(metrics, data.length, false);
+    const hoveredRow = hoverState ? data[hoverState.index] : undefined;
+    return (_jsxs("div", { className: "relative h-full w-full", children: [_jsxs("svg", { viewBox: `0 0 ${metrics.w} ${metrics.h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": props.ariaLabel, onPointerMove: move, onPointerLeave: clear, children: [_jsx("defs", { children: yKeys.map((key, index) => (_jsxs("linearGradient", { id: `${fillId}-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: chartColor(colors, index), stopOpacity: "0.22" }), _jsx("stop", { offset: "100%", stopColor: chartColor(colors, index), stopOpacity: "0.02" })] }, key))) }), _jsx(CartesianGrid, { ...metrics, data: data, xKey: xKey }), hoverState ? (_jsx("line", { x1: metrics.x(hoverState.index), x2: metrics.x(hoverState.index), y1: metrics.pad.t, y2: metrics.pad.t + metrics.innerH, stroke: "currentColor", strokeOpacity: 0.18, strokeDasharray: "3 3", "aria-hidden": true })) : null, yKeys.map((key, keyIndex) => {
+                        const points = data.map((row, index) => row[key] == null ? undefined : { x: metrics.x(index), y: metrics.y(Number(row[key])) });
+                        const runs = contiguousRuns(points);
+                        const baseline = metrics.pad.t + metrics.innerH;
+                        const dashed = dashedKeys?.includes(key) ?? false;
+                        const hoveredPoint = hoverState ? points[hoverState.index] : undefined;
+                        return (_jsxs("g", { children: [runs.map((run) => {
+                                    const line = smoothLinePath(run);
+                                    const first = run[0];
+                                    const last = run[run.length - 1];
+                                    if (!first || !last)
+                                        return null;
+                                    const area = `${line} L${last.x.toFixed(2)},${baseline} L${first.x.toFixed(2)},${baseline} Z`;
+                                    return (_jsxs("g", { children: [variant === 'area' ? (_jsx("path", { d: area, fill: `url(#${fillId}-${keyIndex})`, className: "animate-in fade-in origin-bottom duration-500" })) : null, _jsx("path", { d: line, fill: "none", stroke: chartColor(colors, keyIndex), strokeWidth: keyIndex === 0 ? 2.4 : 1.8, strokeDasharray: dashed ? '5 4' : undefined, strokeLinecap: "round", strokeLinejoin: "round", className: "animate-in fade-in duration-500" })] }, first.x));
+                                }), hoveredPoint ? (_jsx("circle", { cx: hoveredPoint.x, cy: hoveredPoint.y, r: 3.6, fill: chartColor(colors, keyIndex), stroke: "var(--background)", strokeWidth: 1.5, "aria-hidden": true })) : null] }, key));
+                    })] }), hoverState && hoveredRow ? (_jsx(ChartTooltip, { state: hoverState, row: hoveredRow, xKey: xKey, yKeys: yKeys, colors: colors, format: format })) : null] }));
+}
+function contiguousRuns(points) {
+    const runs = [];
+    let current = [];
+    for (const point of points) {
+        if (point) {
+            current.push(point);
+            continue;
+        }
+        if (current.length)
+            runs.push(current);
+        current = [];
+    }
+    if (current.length)
+        runs.push(current);
+    return runs;
+}
+// Monotone cubic interpolation (Fritsch–Carlson), so the curve never overshoots data points.
+function smoothLinePath(points) {
+    const [first] = points;
+    if (!first)
+        return '';
+    if (points.length < 3) {
+        return points
+            .map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(2)},${p.y.toFixed(2)}`)
+            .join(' ');
+    }
+    const spans = points.slice(0, -1).map((p0, i) => {
+        const p1 = points[i + 1] ?? p0;
+        const h = p1.x - p0.x;
+        return { h, slope: h !== 0 ? (p1.y - p0.y) / h : 0 };
+    });
+    const tangents = points.map((_, i) => {
+        const before = spans[i - 1];
+        const after = spans[i];
+        if (!before)
+            return after?.slope ?? 0;
+        if (!after)
+            return before.slope;
+        if (before.slope * after.slope <= 0)
+            return 0;
+        return ((3 * (before.h + after.h)) /
+            ((2 * after.h + before.h) / before.slope + (after.h + 2 * before.h) / after.slope));
+    });
+    const segments = [`M${first.x.toFixed(2)},${first.y.toFixed(2)}`];
+    spans.forEach((span, i) => {
+        const p0 = points[i];
+        const p1 = points[i + 1];
+        if (!p0 || !p1)
+            return;
+        const h = span.h / 3;
+        const c1y = p0.y + (tangents[i] ?? 0) * h;
+        const c2y = p1.y - (tangents[i + 1] ?? 0) * h;
+        segments.push(`C${(p0.x + h).toFixed(2)},${c1y.toFixed(2)} ${(p1.x - h).toFixed(2)},${c2y.toFixed(2)} ${p1.x.toFixed(2)},${p1.y.toFixed(2)}`);
+    });
+    return segments.join(' ');
+}

package/dist/components/charts/line-chart.d.ts

@@ -0,0 +1,2 @@
+import type { CartesianChartProps } from './types.js';
+export declare function LineChart(props: CartesianChartProps): import("react").JSX.Element;

package/dist/components/charts/line-chart.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LineAreaChart } from './line-area-chart.js';
+export function LineChart(props) {
+    return _jsx(LineAreaChart, { ...props, variant: "line" });
+}

package/dist/components/charts/pie-chart.d.ts

@@ -0,0 +1,2 @@
+import type { CategoricalChartProps } from './types.js';
+export declare function PieChart({ data, categoryKey, valueKey, colors, height, ariaLabel, valueFormatter, className, }: CategoricalChartProps): import("react").JSX.Element;

package/dist/components/charts/pie-chart.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/cn.js';
+import { chartColor } from './colors.js';
+import { categoricalMetrics, piePath } from './layout.js';
+export function PieChart({ data, categoryKey = 'label', valueKey = 'value', colors, height = 220, ariaLabel, valueFormatter, className, }) {
+    const { w, h, cx, cy, r } = categoricalMetrics(height);
+    const total = data.reduce((sum, row) => sum + Math.max(0, Number(row[valueKey] ?? 0)), 0) || 1;
+    const format = valueFormatter ?? ((value) => String(value));
+    const slices = data.reduce((acc, row, index) => {
+        const value = Math.max(0, Number(row[valueKey] ?? 0));
+        const start = acc[index - 1]?.end ?? -Math.PI / 2;
+        const end = start + (value / total) * Math.PI * 2;
+        acc.push({ row, value, start, end, index });
+        return acc;
+    }, []);
+    return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": ariaLabel, children: [slices.map(({ row, value, start, end, index }) => {
+                const label = String(row[categoryKey] ?? index + 1);
+                const angle = (value / total) * Math.PI * 2;
+                const d = angle >= Math.PI * 2 - 0.0001 ? undefined : piePath(cx, cy, r, start, end);
+                return d ? (_jsx("path", { d: d, fill: chartColor(colors, index), stroke: "var(--background)", strokeWidth: 1.5, className: "animate-in fade-in zoom-in-95 duration-300 hover:opacity-90", children: _jsx("title", { children: `${label}: ${format(value)}` }) }, label)) : (_jsx("circle", { cx: cx, cy: cy, r: r, fill: chartColor(colors, index), stroke: "var(--background)", strokeWidth: 1.5, transform: `rotate(${start} ${cx} ${cy})`, className: "animate-in fade-in zoom-in-95 duration-300 hover:opacity-90", children: _jsx("title", { children: `${label}: ${format(value)}` }) }, label));
+            }), _jsx("circle", { cx: cx, cy: cy, r: r * 0.42, fill: "var(--background)", opacity: 0.94 })] }));
+}

package/dist/components/charts/radar-chart.d.ts

@@ -0,0 +1,2 @@
+import type { CategoricalChartProps } from './types.js';
+export declare function RadarChart({ data, categoryKey, valueKey, colors, height, ariaLabel, maxValue, valueFormatter, className, }: CategoricalChartProps): import("react").JSX.Element;

package/dist/components/charts/radar-chart.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/cn.js';
+import { chartColor } from './colors.js';
+import { categoricalMetrics } from './layout.js';
+export function RadarChart({ data, categoryKey = 'label', valueKey = 'value', colors, height = 220, ariaLabel, maxValue, valueFormatter, className, }) {
+    const { w, h, cx, cy } = categoricalMetrics(height);
+    const r = Math.min(82, h / 2 - 22);
+    const observedMax = Math.max(...data.map((row) => Number(row[valueKey] ?? 0)).filter(Number.isFinite), 1);
+    const domainMax = maxValue ?? (observedMax <= 10 ? 10 : observedMax <= 100 ? 100 : observedMax);
+    const format = valueFormatter ?? ((value) => String(value));
+    const points = data.map((row, index) => {
+        const angle = -Math.PI / 2 + (index / data.length) * Math.PI * 2;
+        const value = Number(row[valueKey] ?? 0);
+        const rr = r * (value / domainMax);
+        const x = cx + Math.cos(angle) * rr;
+        const y = cy + Math.sin(angle) * rr;
+        return {
+            x,
+            y,
+            value,
+            label: String(row[categoryKey] ?? index + 1),
+            point: `${x.toFixed(2)},${y.toFixed(2)}`,
+        };
+    });
+    return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": ariaLabel, children: [[0.25, 0.5, 0.75, 1].map((scale) => (_jsx("circle", { cx: cx, cy: cy, r: r * scale, fill: "none", stroke: "currentColor", strokeOpacity: 0.1 }, scale))), data.map((_row, index) => {
+                const angle = -Math.PI / 2 + (index / data.length) * Math.PI * 2;
+                return (_jsx("line", { x1: cx, y1: cy, x2: cx + Math.cos(angle) * r, y2: cy + Math.sin(angle) * r, stroke: "currentColor", strokeOpacity: 0.1 }, index));
+            }), _jsx("polygon", { points: points.map((point) => point.point).join(' '), fill: chartColor(colors, 0), fillOpacity: 0.18, stroke: chartColor(colors, 0), strokeWidth: 2, className: "animate-in fade-in zoom-in-95 duration-500" }), points.map((point, index) => (_jsx("circle", { cx: point.x, cy: point.y, r: 3.4, fill: chartColor(colors, index), stroke: "var(--background)", strokeWidth: 1.2, className: "animate-in zoom-in-50 duration-300 hover:opacity-80", children: _jsx("title", { children: `${point.label}: ${format(point.value)}` }) }, point.label)))] }));
+}

package/dist/components/charts/radial-chart.d.ts

@@ -0,0 +1,2 @@
+import type { CategoricalChartProps } from './types.js';
+export declare function RadialChart({ data, categoryKey, valueKey, colors, height, ariaLabel, maxValue, valueFormatter, className, }: CategoricalChartProps): import("react").JSX.Element;

package/dist/components/charts/radial-chart.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/cn.js';
+import { chartColor } from './colors.js';
+import { categoricalMetrics, ringArcPath } from './layout.js';
+export function RadialChart({ data, categoryKey = 'label', valueKey = 'value', colors, height = 220, ariaLabel, maxValue, valueFormatter, className, }) {
+    const { w, h, cx, cy } = categoricalMetrics(height);
+    const values = data.map((row) => Math.max(0, Number(row[valueKey] ?? 0)));
+    const observedMax = Math.max(...values, 1);
+    const domainMax = maxValue ?? (observedMax <= 100 ? 100 : observedMax);
+    const format = valueFormatter ?? ((value) => String(value));
+    return (_jsx("svg", { viewBox: `0 0 ${w} ${h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": ariaLabel, children: data.slice(0, 5).map((row, index) => {
+            const value = values[index] ?? 0;
+            const radius = 82 - index * 13;
+            const width = 7;
+            const progress = Math.max(0.01, Math.min(value / domainMax, 1));
+            const label = String(row[categoryKey] ?? index + 1);
+            return (_jsxs("g", { children: [_jsx("circle", { cx: cx, cy: cy, r: radius, fill: "none", stroke: "currentColor", strokeOpacity: 0.1, strokeWidth: width }), _jsx("path", { d: ringArcPath(cx, cy, radius, -Math.PI / 2, -Math.PI / 2 + progress * Math.PI * 2), fill: "none", stroke: chartColor(colors, index), strokeLinecap: "round", strokeWidth: width, className: "animate-in fade-in duration-500 hover:opacity-80", children: _jsx("title", { children: `${label}: ${format(value)}` }) })] }, label));
+        }) }));
+}

package/dist/components/charts/scatter-chart.d.ts

@@ -0,0 +1,2 @@
+import type { ScatterChartProps } from './types.js';
+export declare function ScatterChart(props: ScatterChartProps): import("react").JSX.Element;

package/dist/components/charts/scatter-chart.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/cn.js';
+import { chartColor } from './colors.js';
+import { CartesianGrid, cartesianMetrics } from './layout.js';
+export function ScatterChart(props) {
+    const { data, xKey = 'x', valueKey = props.yKeys?.[0] ?? 'value', colors, className } = props;
+    const metrics = cartesianMetrics({ ...props, yKeys: [valueKey] }, false);
+    const xValues = data.map((row) => Number(row[xKey] ?? 0)).filter(Number.isFinite);
+    const xMax = Math.max(...xValues, 1);
+    const format = props.valueFormatter ?? ((value) => String(value));
+    return (_jsxs("svg", { viewBox: `0 0 ${metrics.w} ${metrics.h}`, className: cn('h-full w-full overflow-visible', className), role: "img", "aria-label": props.ariaLabel, children: [_jsx(CartesianGrid, { ...metrics, data: data, xKey: xKey }), data.map((row, index) => {
+                const xv = Number(row[xKey] ?? index + 1);
+                const yv = Number(row[valueKey] ?? 0);
+                return (_jsx("circle", { cx: metrics.pad.l + metrics.innerW * (xv / xMax), cy: metrics.y(yv), r: 4.5, fill: chartColor(colors, index), opacity: 0.88, className: "animate-in zoom-in-50 duration-300 hover:opacity-100", children: _jsx("title", { children: `${xv}: ${format(yv)}` }) }, index));
+            })] }));
+}

package/dist/components/charts/story-data.d.ts

@@ -0,0 +1,24 @@
+export declare const chartPalette: string[];
+export declare const revenueByMonth: {
+    month: string;
+    new: number;
+    expansion: number;
+    services: number;
+}[];
+export declare const pipelineStages: {
+    stage: string;
+    value: number;
+}[];
+export declare const healthAreas: {
+    area: string;
+    score: number;
+}[];
+export declare const readinessAreas: {
+    area: string;
+    score: number;
+}[];
+export declare const scatterRows: {
+    calls: number;
+    value: number;
+}[];
+export declare function money(value: number): string;

package/dist/components/charts/story-data.js

@@ -0,0 +1,48 @@
+export const chartPalette = [
+    'var(--category-1)',
+    'var(--category-2)',
+    'var(--category-3)',
+    'var(--category-4)',
+];
+export const revenueByMonth = [
+    { month: 'Jan', new: 82000, expansion: 28000, services: 12000 },
+    { month: 'Feb', new: 94000, expansion: 36000, services: 18000 },
+    { month: 'Mar', new: 104000, expansion: 42000, services: 22000 },
+    { month: 'Apr', new: 118000, expansion: 47000, services: 26000 },
+    { month: 'May', new: 126000, expansion: 54000, services: 30000 },
+    { month: 'Jun', new: 142000, expansion: 61000, services: 34000 },
+];
+export const pipelineStages = [
+    { stage: 'Discovery', value: 180000 },
+    { stage: 'Security', value: 126000 },
+    { stage: 'Legal', value: 98000 },
+    { stage: 'Procurement', value: 76000 },
+];
+export const healthAreas = [
+    { area: 'Sync', score: 92 },
+    { area: 'Authz', score: 84 },
+    { area: 'Latency', score: 76 },
+    { area: 'Errors', score: 68 },
+];
+export const readinessAreas = [
+    { area: 'Schema', score: 9 },
+    { area: 'Imports', score: 7 },
+    { area: 'Authz', score: 8 },
+    { area: 'Realtime', score: 6 },
+    { area: 'Audit', score: 9 },
+];
+export const scatterRows = [
+    { calls: 8, value: 42000 },
+    { calls: 13, value: 74000 },
+    { calls: 19, value: 126000 },
+    { calls: 27, value: 144000 },
+    { calls: 34, value: 218000 },
+];
+export function money(value) {
+    return new Intl.NumberFormat('en', {
+        style: 'currency',
+        currency: 'EUR',
+        maximumFractionDigits: 0,
+        notation: 'compact',
+    }).format(value);
+}

package/dist/components/charts/types.d.ts

@@ -0,0 +1,43 @@
+export type ChartDatum = Record<string, string | number | null>;
+export interface ChartAxisOptions {
+    xLabel?: string;
+    yLabel?: string;
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    xTickCount?: number;
+    yTickCount?: number;
+}
+export interface ChartLegendItem {
+    label: string;
+    color: string;
+}
+export interface CartesianChartProps {
+    data: ChartDatum[];
+    xKey?: string;
+    yKeys?: string[];
+    dashedKeys?: string[];
+    colors?: string[];
+    axis?: ChartAxisOptions;
+    height?: number;
+    ariaLabel?: string;
+    valueFormatter?: (value: number) => string;
+    className?: string;
+}
+export interface BarChartProps extends CartesianChartProps {
+    stacked?: boolean;
+}
+export interface ScatterChartProps extends CartesianChartProps {
+    valueKey?: string;
+}
+export interface CategoricalChartProps {
+    data: ChartDatum[];
+    categoryKey?: string;
+    valueKey?: string;
+    colors?: string[];
+    height?: number;
+    ariaLabel?: string;
+    maxValue?: number;
+    valueFormatter?: (value: number) => string;
+    className?: string;
+}

package/dist/components/charts/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export { Checkbox };

package/dist/components/checkbox.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { CheckIcon } from "lucide-react";
+import { cn } from '../lib/cn.js';
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: _jsx(CheckIcon, { className: "size-3.5", strokeWidth: 2.5 }) }) }));
+}
+export { Checkbox };

package/dist/components/chip.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const chipVariants: (props?: ({
+    variant?: "filter" | "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+    inset?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChipProps extends Omit<React.ComponentProps<'span'>, 'children'>, VariantProps<typeof chipVariants> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    removeLabel?: string;
+}
+export interface ChipLabelProps extends React.ComponentProps<'button'> {
+    asChild?: boolean;
+}
+export interface ChipRemoveProps extends React.ComponentProps<'button'> {
+    label?: string;
+}
+export declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {
+    Label: React.ForwardRefExoticComponent<Omit<ChipLabelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Remove: React.ForwardRefExoticComponent<Omit<ChipRemoveProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { chipVariants };

package/dist/components/chip.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { X } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const chipVariants = cva('group/chip inline-flex shrink-0 items-center rounded-md border bg-clip-padding font-normal whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'border-border/60 bg-muted/40 text-foreground/90',
+            outline: 'border-border bg-background text-foreground/90',
+            filter: 'border-border/60 bg-muted/40 text-foreground/90',
+        },
+        size: { sm: 'h-6 text-[11.5px]', md: 'h-7 text-xs' },
+        inset: { true: 'gap-1 px-2', false: '' },
+    },
+    defaultVariants: { variant: 'default', size: 'sm', inset: true },
+});
+const ChipRoot = React.forwardRef(function Chip({ className, variant = 'default', size = 'sm', inset, asChild = false, leadingIcon, onRemove, removeLabel, children, ...props }, ref) {
+    const resolvedInset = inset ?? variant !== 'filter';
+    const chipClass = cn(chipVariants({ variant, size, inset: resolvedInset, className }));
+    if (asChild) {
+        return (_jsx(Slot.Root, { ref: ref, "data-slot": "chip", "data-variant": variant, className: chipClass, ...props, children: children }));
+    }
+    return (_jsxs("span", { ref: ref, "data-slot": "chip", "data-variant": variant, className: chipClass, ...props, children: [leadingIcon ? (_jsx("span", { "data-slot": "chip-icon", className: "flex shrink-0 items-center [&_svg]:size-3", children: leadingIcon })) : null, children, onRemove ? _jsx(ChipRemove, { onClick: onRemove, "aria-label": removeLabel }) : null] }));
+});
+const ChipLabel = React.forwardRef(function ChipLabel({ className, asChild = false, type, ...props }, ref) {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (_jsx(Comp, { ref: ref, "data-slot": "chip-label", type: asChild ? undefined : (type ?? 'button'), className: cn('inline-flex h-full items-center gap-1 rounded-l-md px-2 text-inherit outline-none transition-colors hover:bg-foreground/5 focus-visible:bg-foreground/5 [&_svg]:size-3', className), ...props }));
+});
+const ChipRemove = React.forwardRef(function ChipRemove({ className, label, 'aria-label': ariaLabel, type, children, ...props }, ref) {
+    return (_jsx("button", { ref: ref, "data-slot": "chip-remove", type: type ?? 'button', "aria-label": ariaLabel ?? label, className: cn('inline-flex h-full items-center justify-center rounded-r-md border-l border-transparent px-1.5 text-muted-foreground/70 outline-none transition-colors hover:text-destructive focus-visible:text-destructive group-data-[variant=filter]/chip:border-border/60', className), ...props, children: children ?? _jsx(X, { className: "size-3", strokeWidth: 2, "aria-hidden": true }) }));
+});
+export const Chip = Object.assign(ChipRoot, { Label: ChipLabel, Remove: ChipRemove });
+export { chipVariants };

package/dist/components/code-editor-theme.d.ts

@@ -0,0 +1,19 @@
+import { HighlightStyle } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+/**
+ * How every CodeMirror surface in atmOS looks.
+ *
+ * The colours are the app's own tokens rather than a packaged editor theme, so an editor
+ * follows the workspace into dark mode and stays the same instrument whether it is holding
+ * a SQL statement, a formula, or a file off a machine. A packaged theme would be a second
+ * palette to keep in sync with the first, and it would be wrong the moment the app's is.
+ */
+export declare const atmosEditorTheme: Extension;
+/**
+ * One palette across every grammar. Markdown gets structure without changing size or
+ * family — a heading reads as a heading, but the file still reads as a file, which is the
+ * difference between an editor and a preview.
+ */
+export declare const atmosEditorHighlight: HighlightStyle;
+/** The theme and its highlighting, which are only ever wanted together. */
+export declare const atmosEditorAppearance: Extension[];