hazo_dataviz 0.3.0

package/dist/visualizers/chart_frame.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatValue } from '../lib/format.js';
+/**
+ * "Studio" chart theme — a warm, editorial token set shared by every recharts
+ * visualizer so the package renders one coherent look out of the box.
+ *
+ * These are plain hex/number tokens (not Tailwind) on purpose: the charts are
+ * SVG and must look right in any consumer app regardless of its CSS pipeline.
+ * Font family is deliberately omitted so SVG text inherits the host page font.
+ */
+export const CHART_THEME = {
+    /** Primary text — warm near-black. */
+    ink: '#2f2a25',
+    /** Axis ticks / secondary labels — warm grey. */
+    muted: '#9a9087',
+    /** Hairline grid + axis lines — warm sand. */
+    hairline: '#ece6dd',
+    /** Tooltip surface — warm white. */
+    surface: '#fffdf9',
+    /** Tooltip / card border. */
+    surfaceBorder: '#e7ddd0',
+    /** Base tick font size. */
+    fontSize: 12,
+    /** Default series stroke width. */
+    strokeWidth: 2.5,
+};
+/** Shared inner margin so axis labels never clip against a card edge. */
+export const CHART_MARGIN = { top: 12, right: 16, bottom: 4, left: 4 };
+/** Spread onto `<XAxis>` / `<YAxis>` for the Studio look (hairline, no tick marks). */
+export const axisProps = {
+    tick: { fill: CHART_THEME.muted, fontSize: CHART_THEME.fontSize },
+    axisLine: { stroke: CHART_THEME.hairline },
+    tickLine: false,
+    tickMargin: 8,
+};
+/** Spread onto `<CartesianGrid>` — horizontal hairlines only, no vertical clutter. */
+export const gridProps = {
+    stroke: CHART_THEME.hairline,
+    vertical: false,
+};
+/**
+ * Returns a recharts tick/value formatter for a given column.
+ * Uses formatValue when the column has a format, else a sane default.
+ */
+export function makeFormatter(column) {
+    if (column?.format) {
+        const fmt = column.format;
+        return (v) => {
+            if (v === null || v === undefined)
+                return '';
+            return formatValue(v, fmt);
+        };
+    }
+    return (v) => {
+        if (v === null || v === undefined)
+            return '';
+        return String(v);
+    };
+}
+/**
+ * Returns the chart height to use. When opts has explicit height, use it;
+ * otherwise default to 300.
+ */
+export function resolveChartDimensions(opts) {
+    return {
+        width: opts?.width,
+        height: opts?.height ?? 300,
+    };
+}
+/**
+ * Builds a recharts `content` renderer for `<Tooltip>` styled to match the
+ * Studio theme — a warm floating card with a colored swatch per series.
+ *
+ * @param labelFormatter formats the x value shown as the tooltip heading
+ * @param valueFormatter formats each series value
+ */
+// Return type is intentionally `any`: recharts' `content` prop expects its own
+// `ContentType`, and the workspace hoists a React 18 `@types/react` whose
+// `ReactNode` disagrees with this package's React 19 types (`bigint`). Typing the
+// boundary as `any` sidesteps that cross-version skew without weakening the
+// component body, which stays fully typed via `TooltipRenderProps`.
+export function makeTooltip(labelFormatter, valueFormatter) {
+    return function ChartTooltip(props) {
+        if (!props.active || !props.payload || props.payload.length === 0)
+            return null;
+        const heading = labelFormatter(props.label);
+        return (_jsxs("div", { style: {
+                background: CHART_THEME.surface,
+                border: `1px solid ${CHART_THEME.surfaceBorder}`,
+                borderRadius: 10,
+                padding: '8px 12px',
+                boxShadow: '0 6px 20px -8px rgba(60, 45, 30, 0.28)',
+                fontSize: 12,
+                lineHeight: 1.5,
+                minWidth: 120,
+            }, children: [heading && (_jsx("div", { style: {
+                        color: CHART_THEME.muted,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.04em',
+                        marginBottom: 6,
+                    }, children: heading })), props.payload.map((entry, i) => (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 16,
+                        padding: '1px 0',
+                    }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: 7, color: CHART_THEME.muted }, children: [_jsx("span", { style: {
+                                        width: 9,
+                                        height: 9,
+                                        borderRadius: 3,
+                                        background: entry.color ?? CHART_THEME.ink,
+                                        flexShrink: 0,
+                                    } }), String(entry.name ?? entry.dataKey ?? '')] }), _jsx("span", { style: {
+                                color: CHART_THEME.ink,
+                                fontWeight: 600,
+                                fontVariantNumeric: 'tabular-nums',
+                            }, children: valueFormatter(entry.value) })] }, i)))] }));
+    };
+}
+/** Props spread onto `<Legend>` for the Studio look. */
+export const legendProps = {
+    iconType: 'circle',
+    wrapperStyle: {
+        fontSize: 12,
+        color: CHART_THEME.muted,
+        paddingTop: 8,
+    },
+};
+/**
+ * Empty state element returned when result.rows is empty.
+ */
+export function EmptyState() {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 6,
+            height: 120,
+            color: CHART_THEME.muted,
+            fontSize: 13,
+        }, children: [_jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: CHART_THEME.hairline, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M3 3v18h18" }), _jsx("path", { d: "M7 15l3-3 3 2 5-6" })] }), _jsx("span", { children: "No data to display" })] }));
+}

package/dist/visualizers/index.d.ts

@@ -0,0 +1,7 @@
+export { builtinVisualizers } from './builtins.js';
+export { selectVisualizer, deriveEncoding } from '../lib/auto_encode.js';
+export { VisualizerView } from './visualizer_view.js';
+export { classifyShape } from '../lib/shape.js';
+export type { Visualizer, VisualizerOpts } from '../types/index.js';
+export type { QueryShape } from '../lib/shape.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/visualizers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visualizers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/visualizers/index.js

@@ -0,0 +1,4 @@
+export { builtinVisualizers } from './builtins.js';
+export { selectVisualizer, deriveEncoding } from '../lib/auto_encode.js';
+export { VisualizerView } from './visualizer_view.js';
+export { classifyShape } from '../lib/shape.js';

package/dist/visualizers/line.d.ts

@@ -0,0 +1,3 @@
+import type { Visualizer } from '../types/index.js';
+export declare const line: Visualizer;
+//# sourceMappingURL=line.d.ts.map

package/dist/visualizers/line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../src/visualizers/line.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AAiDtF,eAAO,MAAM,IAAI,EAAE,UAsElB,CAAC"}

package/dist/visualizers/line.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import { classifyShape } from '../lib/shape.js';
+import { pickColor } from './palette.js';
+import { makeFormatter, makeTooltip, EmptyState, axisProps, gridProps, legendProps, CHART_MARGIN, CHART_THEME, } from './chart_frame.js';
+function pivotData(result, encoding) {
+    if (!encoding.series) {
+        // No series split — data already in the right shape, y keys = encoding.y
+        return { data: result.rows, seriesKeys: encoding.y };
+    }
+    // Pivot long → wide: group by x, for each series value create a data key
+    const xKey = encoding.x;
+    const seriesKey = encoding.series;
+    const measureKey = encoding.y[0] ?? '';
+    const seriesValues = Array.from(new Set(result.rows.map((r) => String(r[seriesKey] ?? ''))));
+    const grouped = new Map();
+    for (const row of result.rows) {
+        const xVal = row[xKey];
+        if (!grouped.has(xVal)) {
+            grouped.set(xVal, { [xKey]: xVal });
+        }
+        const entry = grouped.get(xVal);
+        const sv = String(row[seriesKey] ?? '');
+        entry[sv] = row[measureKey];
+    }
+    return {
+        data: Array.from(grouped.values()),
+        seriesKeys: seriesValues,
+    };
+}
+export const line = {
+    id: 'line',
+    label: 'Line Chart',
+    accepts(descriptor, query) {
+        const shape = classifyShape(descriptor, query);
+        if (shape.temporalDims.length >= 1 && shape.measureCount >= 1)
+            return 0.9;
+        return 0;
+    },
+    render(result, encoding, opts) {
+        if (result.rows.length === 0)
+            return _jsx(EmptyState, {});
+        const xCol = result.columns.find((c) => c.key === encoding.x);
+        if (!xCol && encoding.x) {
+            if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+                console.warn(`[hazo_dataviz/line] encoding.x "${encoding.x}" not found in result.columns`);
+            }
+            return _jsx(EmptyState, {});
+        }
+        const { data, seriesKeys } = pivotData(result, encoding);
+        const xFormatter = makeFormatter(xCol);
+        const showLegend = opts?.showLegend ?? seriesKeys.length > 1;
+        const showTooltip = opts?.showTooltip ?? true;
+        // Get formatter for the first y column
+        const yCol = result.columns.find((c) => c.key === (encoding.series ? seriesKeys[0] : encoding.y[0]));
+        const yFormatter = makeFormatter(yCol ?? result.columns.find((c) => c.role === 'measure'));
+        const chartHeight = opts?.height ?? 300;
+        const chartWidth = opts?.width;
+        const chart = (_jsxs(LineChart, { data: data, width: chartWidth, height: chartWidth !== undefined ? chartHeight : undefined, margin: CHART_MARGIN, children: [_jsx(CartesianGrid, { ...gridProps }), _jsx(XAxis, { dataKey: encoding.x, tickFormatter: xFormatter, ...axisProps }), _jsx(YAxis, { tickFormatter: yFormatter, ...axisProps, width: 48 }), showTooltip && (_jsx(Tooltip, { cursor: { stroke: CHART_THEME.hairline, strokeWidth: 1.5 }, content: makeTooltip(xFormatter, yFormatter) })), showLegend && _jsx(Legend, { ...legendProps }), seriesKeys.map((key, i) => (_jsx(Line, { type: "monotone", dataKey: key, stroke: pickColor(i, opts?.colors), strokeWidth: CHART_THEME.strokeWidth, dot: false, activeDot: { r: 4, strokeWidth: 2, stroke: CHART_THEME.surface } }, key)))] }));
+        if (chartWidth !== undefined) {
+            return (_jsx("div", { style: { width: chartWidth, height: chartHeight, overflow: 'hidden' }, children: chart }));
+        }
+        return (_jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: chart }));
+    },
+};

package/dist/visualizers/palette.d.ts

@@ -0,0 +1,13 @@
+/**
+ * "Studio" palette — a warm, vivid-but-tasteful series ramp.
+ *
+ * Ordered so adjacent series stay distinguishable (warm / cool alternation)
+ * and the first two — coral + teal — read as a confident complementary pair,
+ * which is what most one- and two-series charts will actually use.
+ */
+export declare const DEFAULT_PALETTE: string[];
+/**
+ * Pick a color from the palette (or the override) by cycling modulo its length.
+ */
+export declare function pickColor(index: number, colors?: string[]): string;
+//# sourceMappingURL=palette.d.ts.map

package/dist/visualizers/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/visualizers/palette.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,EASnC,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAGlE"}

package/dist/visualizers/palette.js

@@ -0,0 +1,24 @@
+/**
+ * "Studio" palette — a warm, vivid-but-tasteful series ramp.
+ *
+ * Ordered so adjacent series stay distinguishable (warm / cool alternation)
+ * and the first two — coral + teal — read as a confident complementary pair,
+ * which is what most one- and two-series charts will actually use.
+ */
+export const DEFAULT_PALETTE = [
+    '#f5563d', // coral
+    '#14a098', // teal
+    '#f5a524', // marigold
+    '#8b4a8f', // plum
+    '#3d6fb4', // ocean
+    '#84a13a', // olive
+    '#e0608a', // rose
+    '#c2691c', // amber-brown
+];
+/**
+ * Pick a color from the palette (or the override) by cycling modulo its length.
+ */
+export function pickColor(index, colors) {
+    const palette = colors && colors.length > 0 ? colors : DEFAULT_PALETTE;
+    return palette[index % palette.length];
+}

package/dist/visualizers/single_stat.d.ts

@@ -0,0 +1,3 @@
+import type { Visualizer } from '../types/index.js';
+export declare const singleStat: Visualizer;
+//# sourceMappingURL=single_stat.d.ts.map

package/dist/visualizers/single_stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"single_stat.d.ts","sourceRoot":"","sources":["../../src/visualizers/single_stat.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AAOtF,eAAO,MAAM,UAAU,EAAE,UAmFxB,CAAC"}

package/dist/visualizers/single_stat.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classifyShape } from '../lib/shape.js';
+import { makeFormatter, CHART_THEME } from './chart_frame.js';
+import { pickColor } from './palette.js';
+export const singleStat = {
+    id: 'single_stat',
+    label: 'Single Stat',
+    accepts(descriptor, query) {
+        const shape = classifyShape(descriptor, query);
+        if (shape.measureCount === 1 && shape.dimCount === 0)
+            return 0.9;
+        return 0;
+    },
+    render(result, encoding, opts) {
+        const measureCol = result.columns.find((c) => c.role === 'measure');
+        const formatter = makeFormatter(measureCol);
+        const accent = pickColor(0, opts?.colors);
+        // Determine the value: first row's first measure, or null if empty
+        let displayValue = '—';
+        if (result.rows.length > 0 && measureCol) {
+            const raw = result.rows[0][measureCol.key];
+            if (raw !== null && raw !== undefined) {
+                displayValue = formatter(raw);
+            }
+        }
+        const label = measureCol?.label ?? (encoding.y[0] ?? '');
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 10,
+                padding: '28px 16px',
+            }, children: [label && (_jsx("div", { style: {
+                        fontSize: 12,
+                        fontWeight: 600,
+                        color: CHART_THEME.muted,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.08em',
+                    }, children: label })), _jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'baseline',
+                        gap: 12,
+                    }, children: [_jsx("span", { "aria-hidden": "true", style: {
+                                width: 6,
+                                height: 38,
+                                borderRadius: 3,
+                                background: accent,
+                                alignSelf: 'center',
+                            } }), _jsx("span", { style: {
+                                fontSize: 52,
+                                fontWeight: 700,
+                                color: CHART_THEME.ink,
+                                lineHeight: 1,
+                                letterSpacing: '-0.02em',
+                                fontVariantNumeric: 'tabular-nums',
+                            }, children: displayValue })] })] }));
+    },
+};

package/dist/visualizers/stacked_bar.d.ts

@@ -0,0 +1,3 @@
+import type { Visualizer } from '../types/index.js';
+export declare const stackedBar: Visualizer;
+//# sourceMappingURL=stacked_bar.d.ts.map

package/dist/visualizers/stacked_bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked_bar.d.ts","sourceRoot":"","sources":["../../src/visualizers/stacked_bar.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AA8CtF,eAAO,MAAM,UAAU,EAAE,UAmFxB,CAAC"}

package/dist/visualizers/stacked_bar.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import { classifyShape } from '../lib/shape.js';
+import { pickColor } from './palette.js';
+import { makeFormatter, makeTooltip, EmptyState, axisProps, gridProps, legendProps, CHART_MARGIN, } from './chart_frame.js';
+function pivotData(result, encoding) {
+    if (!encoding.series) {
+        return { data: result.rows, seriesKeys: encoding.y };
+    }
+    const xKey = encoding.x;
+    const seriesKey = encoding.series;
+    const measureKey = encoding.y[0] ?? '';
+    const seriesValues = Array.from(new Set(result.rows.map((r) => String(r[seriesKey] ?? ''))));
+    const grouped = new Map();
+    for (const row of result.rows) {
+        const xVal = row[xKey];
+        if (!grouped.has(xVal)) {
+            grouped.set(xVal, { [xKey]: xVal });
+        }
+        const entry = grouped.get(xVal);
+        const sv = String(row[seriesKey] ?? '');
+        entry[sv] = row[measureKey];
+    }
+    return {
+        data: Array.from(grouped.values()),
+        seriesKeys: seriesValues,
+    };
+}
+export const stackedBar = {
+    id: 'stacked_bar',
+    label: 'Stacked Bar Chart',
+    accepts(descriptor, query) {
+        const shape = classifyShape(descriptor, query);
+        // A stacked bar needs two dimensions and at least one categorical dimension to
+        // stack by (the series, always query.dimensions[1]).
+        if (shape.dimCount === 2 &&
+            shape.measureCount >= 1 &&
+            shape.categoricalDims.length >= 1) {
+            // Full confidence when the x-axis (dimensions[0]) is itself categorical — the
+            // canonical "measure by category, split by category" stacked bar.
+            // When x is temporal (e.g. date) the same data reads better as a multi-series
+            // line, so score below line's 0.9 — stacked bar stays a candidate (> 0) but does
+            // not displace line as the default for time series.
+            const xIsCategorical = shape.categoricalDims.includes(query.dimensions[0]);
+            return xIsCategorical ? 0.95 : 0.6;
+        }
+        return 0;
+    },
+    render(result, encoding, opts) {
+        if (result.rows.length === 0)
+            return _jsx(EmptyState, {});
+        const xCol = result.columns.find((c) => c.key === encoding.x);
+        if (!xCol && encoding.x) {
+            if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+                console.warn(`[hazo_dataviz/stacked_bar] encoding.x "${encoding.x}" not found in result.columns`);
+            }
+            return _jsx(EmptyState, {});
+        }
+        const { data, seriesKeys } = pivotData(result, encoding);
+        const xFormatter = makeFormatter(xCol);
+        const showLegend = opts?.showLegend ?? true;
+        const showTooltip = opts?.showTooltip ?? true;
+        const yCol = result.columns.find((c) => c.role === 'measure');
+        const yFormatter = makeFormatter(yCol);
+        const chartHeight = opts?.height ?? 300;
+        const chartWidth = opts?.width;
+        const lastIdx = seriesKeys.length - 1;
+        const chart = (_jsxs(BarChart, { data: data, width: chartWidth, height: chartWidth !== undefined ? chartHeight : undefined, margin: CHART_MARGIN, barCategoryGap: "28%", children: [_jsx(CartesianGrid, { ...gridProps }), _jsx(XAxis, { dataKey: encoding.x, tickFormatter: xFormatter, ...axisProps }), _jsx(YAxis, { tickFormatter: yFormatter, ...axisProps, width: 48 }), showTooltip && (_jsx(Tooltip, { cursor: { fill: 'rgba(47, 42, 37, 0.05)' }, content: makeTooltip(xFormatter, yFormatter) })), showLegend && _jsx(Legend, { ...legendProps }), seriesKeys.map((key, i) => (_jsx(Bar, { dataKey: key, stackId: "a", fill: pickColor(i, opts?.colors), radius: i === lastIdx ? [6, 6, 0, 0] : [0, 0, 0, 0], maxBarSize: 64 }, key)))] }));
+        if (chartWidth !== undefined) {
+            return (_jsx("div", { style: { width: chartWidth, height: chartHeight, overflow: 'hidden' }, children: chart }));
+        }
+        return (_jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: chart }));
+    },
+};

package/dist/visualizers/table.d.ts

@@ -0,0 +1,3 @@
+import type { Visualizer } from '../types/index.js';
+export declare const table: Visualizer;
+//# sourceMappingURL=table.d.ts.map

package/dist/visualizers/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/visualizers/table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAoC,MAAM,mBAAmB,CAAC;AAKtF,eAAO,MAAM,KAAK,EAAE,UAiGnB,CAAC"}

package/dist/visualizers/table.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeFormatter, CHART_THEME } from './chart_frame.js';
+export const table = {
+    id: 'table',
+    label: 'Table',
+    accepts(_descriptor, _query) {
+        return 0.1;
+    },
+    render(result, _encoding, _opts) {
+        if (result.rows.length === 0) {
+            return (_jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: 80,
+                    color: CHART_THEME.muted,
+                    fontSize: 13,
+                }, children: "No data to display" }));
+        }
+        const formatters = result.columns.map((col) => makeFormatter(col));
+        return (_jsx("div", { style: {
+                overflowX: 'auto',
+                overflowY: 'auto',
+                maxHeight: 400,
+                border: `1px solid ${CHART_THEME.hairline}`,
+                borderRadius: 10,
+            }, children: _jsxs("table", { style: {
+                    borderCollapse: 'collapse',
+                    width: '100%',
+                    fontSize: 13,
+                }, children: [_jsx("thead", { children: _jsx("tr", { children: result.columns.map((col) => (_jsx("th", { style: {
+                                    padding: '10px 14px',
+                                    textAlign: col.role === 'measure' ? 'right' : 'left',
+                                    background: CHART_THEME.surface,
+                                    borderBottom: `1px solid ${CHART_THEME.surfaceBorder}`,
+                                    fontWeight: 600,
+                                    fontSize: 11,
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.04em',
+                                    color: CHART_THEME.muted,
+                                    whiteSpace: 'nowrap',
+                                    position: 'sticky',
+                                    top: 0,
+                                }, children: col.label }, col.key))) }) }), _jsx("tbody", { children: result.rows.map((row, rowIdx) => (_jsx("tr", { children: result.columns.map((col, colIdx) => (_jsx("td", { style: {
+                                    padding: '9px 14px',
+                                    textAlign: col.role === 'measure' ? 'right' : 'left',
+                                    borderBottom: rowIdx === result.rows.length - 1 ? 'none' : `1px solid ${CHART_THEME.hairline}`,
+                                    color: col.role === 'measure' ? CHART_THEME.ink : '#5c554d',
+                                    fontVariantNumeric: col.role === 'measure' ? 'tabular-nums' : 'normal',
+                                    fontWeight: col.role === 'measure' ? 600 : 400,
+                                    whiteSpace: 'nowrap',
+                                }, children: formatters[colIdx](row[col.key]) }, col.key))) }, rowIdx))) })] }) }));
+    },
+};

package/dist/visualizers/visualizer_view.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { DatasetDescriptor } from '../schema/descriptor.js';
+import type { Query } from '../schema/query.js';
+import type { Result, VisualizerOpts } from '../types/index.js';
+export interface VisualizerViewProps {
+    descriptor: DatasetDescriptor;
+    query: Query;
+    result: Result;
+    opts?: VisualizerOpts;
+}
+export declare function VisualizerView({ descriptor, query, result, opts, }: VisualizerViewProps): React.ReactElement;
+//# sourceMappingURL=visualizer_view.d.ts.map

package/dist/visualizers/visualizer_view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualizer_view.d.ts","sourceRoot":"","sources":["../../src/visualizers/visualizer_view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,MAAM,EACN,IAAI,GACL,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAG1C"}

package/dist/visualizers/visualizer_view.js

@@ -0,0 +1,6 @@
+"use client";
+import { selectVisualizer } from '../lib/auto_encode.js';
+export function VisualizerView({ descriptor, query, result, opts, }) {
+    const { visualizer, encoding } = selectVisualizer(descriptor, query, result);
+    return visualizer.render(result, encoding, opts);
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "hazo_dataviz",
+  "version": "0.3.0",
+  "description": "Headless data visualization primitives for hazo apps",
+  "type": "module",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/index.client.d.ts",
+      "import": "./dist/index.client.js"
+    },
+    "./visualizers": {
+      "types": "./dist/visualizers/index.d.ts",
+      "import": "./dist/visualizers/index.js"
+    },
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "import": "./dist/api/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGE_LOG.md",
+    "SETUP_CHECKLIST.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "type-check": "tsc --noEmit",
+    "test": "node --experimental-vm-modules ../node_modules/jest/bin/jest.js --config jest.config.cjs",
+    "dev:test-app": "npm run build && cd test-app && npm run dev",
+    "build:test-app": "npm run build && cd test-app && npm run build"
+  },
+  "dependencies": {
+    "recharts": "^2.15.4",
+    "zod": "^4.1.12"
+  },
+  "peerDependencies": {
+    "hazo_api": "^2.4.0",
+    "hazo_connect": "^3.6.0",
+    "hazo_core": "^1.1.0",
+    "hazo_ui": "^4.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "hazo_connect": {
+      "optional": true
+    },
+    "hazo_ui": {
+      "optional": true
+    },
+    "hazo_api": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.4",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-environment-node": "^30.2.0",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.2.4",
+    "ts-jest": "^29.4.5",
+    "typescript": "^5.7.2"
+  },
+  "keywords": [],
+  "author": "Pubs Abayasiri",
+  "license": "MIT"
+}