@vertebr/react 0.4.0 → 0.5.0

package/dist/components/metrics/MetricsBoard.js

@@ -1,4 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function MetricsBoard({ label = "Overview", metrics, onRefresh, loading, }) {
-    return (_jsxs("div", { className: "vertebr-metrics", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] }), metrics.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No metrics registered yet." })) : (_jsx("div", { className: "vertebr-metrics-grid", children: metrics.map((metric) => (_jsxs("article", { className: "vertebr-metric-card", "data-tone": metric.tone ?? "neutral", children: [_jsx("p", { className: "vertebr-metric-label", children: metric.label }), _jsx("p", { className: "vertebr-metric-value", children: metric.value }), metric.hint ? (_jsx("p", { className: "vertebr-metric-hint", children: metric.hint })) : null] }, metric.id))) }))] }));
+import * as Select from "@radix-ui/react-select";
+import { useMemo, useState } from "react";
+import { METRICS_RANGES, } from "../../lib/metricsRanges";
+import { MetricLineChart, MetricSparkline } from "./charts";
+function formatDelta(delta) {
+    const abs = Math.abs(delta);
+    const n = abs >= 10 ? abs.toFixed(0) : abs.toFixed(1);
+    if (delta > 0)
+        return `+${n}%`;
+    if (delta < 0)
+        return `\u2212${n}%`;
+    return "0%";
+}
+function deltaDir(delta) {
+    if (delta > 0)
+        return "up";
+    if (delta < 0)
+        return "down";
+    return "flat";
+}
+function Delta({ value }) {
+    if (value == null) {
+        return _jsx("span", { className: "vertebr-metrics-table-empty", children: "\u2014" });
+    }
+    return (_jsx("span", { className: "vertebr-metric-delta", "data-dir": deltaDir(value), children: formatDelta(value) }));
+}
+function Check() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 6.2 4.8 8.5 9.5 3.8", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function Chevron() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function RangeSelect({ value, onChange, disabled, }) {
+    return (_jsxs(Select.Root, { value: value, onValueChange: (next) => onChange(next), disabled: disabled, children: [_jsxs(Select.Trigger, { className: "vertebr-select-trigger vertebr-metrics-range", "aria-label": "Metrics range", children: [_jsx("span", { className: "vertebr-select-value", children: _jsx(Select.Value, {}) }), _jsx(Select.Icon, { className: "vertebr-select-icon", children: _jsx(Chevron, {}) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: "vertebr-select-content", position: "popper", sideOffset: 6, children: _jsx(Select.Viewport, { className: "vertebr-select-viewport", children: METRICS_RANGES.map((item) => (_jsxs(Select.Item, { value: item.id, className: "vertebr-select-item", children: [_jsx(Select.ItemText, { children: item.label }), _jsx(Select.ItemIndicator, { className: "vertebr-select-check", children: _jsx(Check, {}) })] }, item.id))) }) }) })] }));
+}
+export function MetricsBoard({ label = "Overview", windowLabel, compareLabel, metrics, charts = [], range, onRangeChange, onRefresh, loading, }) {
+    const featured = metrics.filter((card) => card.featured).slice(0, 4);
+    const kpis = featured.length > 0 ? featured : metrics.slice(0, 4);
+    const kpiIds = new Set(kpis.map((card) => card.id));
+    const rest = metrics.filter((card) => !kpiIds.has(card.id));
+    const [tableOpen, setTableOpen] = useState(true);
+    const chartIds = useMemo(() => new Set(charts.map((chart) => chart.id)), [charts]);
+    const [chartId, setChartId] = useState(() => charts[0]?.id ?? "");
+    const activeChartId = chartIds.has(chartId) ? chartId : (charts[0]?.id ?? "");
+    return (_jsxs("div", { className: "vertebr-metrics", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsxs("div", { children: [_jsx("h2", { children: label }), windowLabel ? (_jsx("p", { className: "vertebr-metrics-window", children: windowLabel })) : null] }), onRangeChange || onRefresh ? (_jsxs("div", { className: "vertebr-panel-head-actions", children: [onRangeChange && range ? (_jsx(RangeSelect, { value: range, onChange: onRangeChange, disabled: loading })) : null, onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] })) : null] }), metrics.length === 0 && charts.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No metrics registered yet." })) : (_jsxs("div", { className: "vertebr-metrics-body", children: [kpis.length > 0 ? (_jsx("section", { className: "vertebr-metrics-block", children: _jsx("div", { className: "vertebr-metrics-kpis", children: kpis.map((card) => {
+                                const selectable = chartIds.has(card.id);
+                                return (_jsxs("article", { className: "vertebr-kpi", "data-tone": card.tone ?? "neutral", "data-selectable": selectable ? "true" : undefined, "data-active": selectable && card.id === activeChartId ? "true" : undefined, role: selectable ? "button" : undefined, tabIndex: selectable ? 0 : undefined, onClick: selectable ? () => setChartId(card.id) : undefined, onKeyDown: selectable
+                                        ? (event) => {
+                                            if (event.key === "Enter" || event.key === " ") {
+                                                event.preventDefault();
+                                                setChartId(card.id);
+                                            }
+                                        }
+                                        : undefined, children: [_jsxs("div", { className: "vertebr-kpi-top", children: [_jsx("p", { className: "vertebr-metric-label", children: card.label }), card.series && card.series.length > 1 ? (_jsx(MetricSparkline, { series: card.series, tone: card.tone })) : null] }), _jsx("p", { className: "vertebr-kpi-value", children: card.value }), _jsxs("div", { className: "vertebr-kpi-foot", children: [card.delta != null ? _jsx(Delta, { value: card.delta }) : null, card.hint ? (_jsx("span", { className: "vertebr-metric-hint", children: card.hint })) : null] })] }, card.id));
+                            }) }) })) : null, charts.length > 0 && activeChartId ? (_jsx("section", { className: "vertebr-metrics-block", children: _jsx(MetricLineChart, { charts: charts, chartId: activeChartId, onChartIdChange: setChartId, compareLabel: compareLabel }) })) : null, rest.length > 0 ? (_jsx("section", { className: "vertebr-metrics-block", children: _jsxs("div", { className: "vertebr-metrics-table-wrap", "data-collapsed": tableOpen ? undefined : "true", children: [_jsxs("button", { type: "button", className: "vertebr-metrics-table-head", "aria-expanded": tableOpen, onClick: () => setTableOpen((open) => !open), children: [_jsx("p", { className: "vertebr-chart-kicker", children: "Breakdown" }), _jsx("span", { className: "vertebr-metrics-chevron", "aria-hidden": "true" })] }), tableOpen ? (_jsxs("table", { className: "vertebr-table vertebr-metrics-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Metric" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Change" }), _jsx("th", { children: "Notes" })] }) }), _jsx("tbody", { children: rest.map((card) => (_jsxs("tr", { "data-tone": card.tone ?? "neutral", children: [_jsxs("td", { children: [_jsx("span", { className: "vertebr-metrics-table-label", children: card.label }), card.section ? (_jsx("span", { className: "vertebr-metrics-table-section", children: card.section })) : null] }), _jsx("td", { className: "vertebr-metrics-table-value", children: card.value }), _jsx("td", { children: _jsx(Delta, { value: card.delta }) }), _jsx("td", { className: "vertebr-metrics-table-notes", children: card.hint ?? "—" })] }, card.id))) })] })) : null] }) })) : null] }))] }));
 }

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

@@ -0,0 +1,14 @@
+import type { MetricChart } from "@vertebr/client";
+export declare function MetricSparkline({ series, tone, }: {
+    series: number[];
+    tone?: string;
+}): import("react").JSX.Element | null;
+type MetricLineChartProps = {
+    charts: MetricChart[];
+    chartId: string;
+    onChartIdChange: (id: string) => void;
+    compareLabel?: string;
+};
+export declare function MetricLineChart({ charts, chartId, onChartIdChange, compareLabel, }: MetricLineChartProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=charts.d.ts.map

package/dist/components/metrics/charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../../src/components/metrics/charts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA6CnD,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,IAAgB,GACjB,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,sCAiCA;AAgGD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,eAAe,EACf,YAAgC,GACjC,EAAE,oBAAoB,+BA0ZtB"}

package/dist/components/metrics/charts.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Select from "@radix-ui/react-select";
+import { useEffect, useMemo, useState } from "react";
+const MAX_METRIC_LINES = 3;
+function chartBounds(values) {
+    const max = Math.max(0, ...values);
+    const min = Math.min(0, ...values);
+    const span = max - min || 1;
+    return { min, max, span };
+}
+function niceMax(max, unit) {
+    if (!(max > 0))
+        return unit === "usd" ? 100 : 4;
+    if (unit !== "usd") {
+        const n = Math.ceil(max);
+        if (n <= 4)
+            return 4;
+        if (n <= 6)
+            return 6;
+        if (n <= 8)
+            return 8;
+        if (n <= 10)
+            return 10;
+        return Math.ceil(n / 5) * 5;
+    }
+    const padded = max * 1.08;
+    const pow = 10 ** Math.floor(Math.log10(padded));
+    const n = padded / pow;
+    const nice = n <= 1 ? 1 : n <= 2 ? 2 : n <= 2.5 ? 2.5 : n <= 5 ? 5 : 10;
+    return nice * pow;
+}
+function axisTicks(max, unit) {
+    if (unit === "usd")
+        return [0, max / 2, max];
+    const step = max <= 4 ? 2 : max <= 10 ? 2 : max / 4;
+    const ticks = [];
+    for (let value = 0; value < max - 1e-9; value += step)
+        ticks.push(value);
+    ticks.push(max);
+    return ticks;
+}
+function linePath(coords) {
+    const first = coords[0];
+    if (!first)
+        return "";
+    return coords
+        .map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`)
+        .join(" ");
+}
+export function MetricSparkline({ series, tone = "neutral", }) {
+    if (series.length < 2)
+        return null;
+    const width = 72;
+    const height = 28;
+    const { min, span } = chartBounds(series);
+    const coords = series.map((value, index) => ({
+        x: (index / (series.length - 1)) * width,
+        y: height - ((value - min) / span) * (height - 2) - 1,
+    }));
+    const last = coords[coords.length - 1];
+    const area = last
+        ? `${linePath(coords)} L ${last.x} ${height} L 0 ${height} Z`
+        : "";
+    return (_jsxs("svg", { className: "vertebr-sparkline", "data-tone": tone, viewBox: `0 0 ${width} ${height}`, width: width, height: height, "aria-hidden": "true", children: [area ? _jsx("path", { d: area, fill: "currentColor", opacity: "0.16" }) : null, _jsx("path", { d: linePath(coords), fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinejoin: "round", strokeLinecap: "round" })] }));
+}
+function formatChartValue(value, unit) {
+    if (unit === "usd") {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+            maximumFractionDigits: Number.isInteger(value) || Math.abs(value) >= 100 ? 0 : 2,
+        }).format(value);
+    }
+    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
+}
+function Chevron() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function Check() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 6.2 4.8 8.5 9.5 3.8", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function ChartSeriesSelect({ charts, value, onChange, }) {
+    return (_jsxs(Select.Root, { value: value, onValueChange: onChange, children: [_jsxs(Select.Trigger, { className: "vertebr-select-trigger vertebr-chart-series", "aria-label": "Chart series", children: [_jsx("span", { className: "vertebr-select-value", children: _jsx(Select.Value, {}) }), _jsx(Select.Icon, { className: "vertebr-select-icon", children: _jsx(Chevron, {}) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: "vertebr-select-content", position: "popper", sideOffset: 6, children: _jsx(Select.Viewport, { className: "vertebr-select-viewport", children: charts.map((item) => (_jsxs(Select.Item, { value: item.id, className: "vertebr-select-item", children: [_jsx(Select.ItemText, { children: item.label }), _jsx(Select.ItemIndicator, { className: "vertebr-select-check", children: _jsx(Check, {}) })] }, item.id))) }) }) })] }));
+}
+export function MetricLineChart({ charts, chartId, onChartIdChange, compareLabel = "Previous period", }) {
+    const primary = charts.find((item) => item.id === chartId) ?? charts[0];
+    const unit = primary?.unit;
+    const peers = useMemo(() => charts.filter((item) => item.id !== primary?.id &&
+        (item.unit ?? "count") === (unit ?? "count")), [charts, primary?.id, unit]);
+    const canCompareMetrics = peers.length > 0;
+    const [mode, setMode] = useState("period");
+    const [extraIds, setExtraIds] = useState([]);
+    const [hover, setHover] = useState(null);
+    useEffect(() => {
+        setHover(null);
+    }, [primary?.id, mode, extraIds.join("|")]);
+    useEffect(() => {
+        if (!canCompareMetrics && mode === "metrics")
+            setMode("period");
+    }, [canCompareMetrics, mode]);
+    useEffect(() => {
+        setExtraIds((current) => current.filter((id) => peers.some((item) => item.id === id)));
+    }, [peers]);
+    if (!primary) {
+        return (_jsx("article", { className: "vertebr-chart", children: _jsx("p", { className: "vertebr-chart-empty", children: "No activity in this window." }) }));
+    }
+    const metricsMode = mode === "metrics" && canCompareMetrics;
+    const selectedExtras = peers
+        .filter((item) => extraIds.includes(item.id))
+        .slice(0, MAX_METRIC_LINES - 1);
+    const overlayCharts = metricsMode
+        ? [primary, ...selectedExtras]
+        : [primary];
+    const labels = primary.points.map((point) => point.label);
+    const width = 960;
+    const height = 220;
+    const pad = { top: 12, right: 16, bottom: 28, left: 52 };
+    const innerW = width - pad.left - pad.right;
+    const innerH = height - pad.top - pad.bottom;
+    const allValues = overlayCharts.flatMap((chart) => chart.points.map((point) => point.value));
+    const compareValues = metricsMode
+        ? []
+        : (primary.comparePoints ?? []).map((point) => point.value);
+    const hasPeriodCompare = !metricsMode && compareValues.length > 0;
+    const max = niceMax(Math.max(0, ...allValues, ...compareValues), primary.unit);
+    const xFor = (index, count) => pad.left + (count <= 1 ? innerW / 2 : (index / (count - 1)) * innerW);
+    const seriesCoords = overlayCharts.map((chart) => chart.points.map((point, index) => {
+        const x = xFor(index, labels.length || chart.points.length);
+        const y = pad.top + innerH - (Math.max(0, point.value) / max) * innerH;
+        return { x, y, value: point.value, label: point.label };
+    }));
+    const primaryCoords = seriesCoords[0] ?? [];
+    const compareCoords = compareValues.map((value, index) => {
+        const x = xFor(index, labels.length || compareValues.length);
+        const y = pad.top + innerH - (Math.max(0, value) / max) * innerH;
+        return {
+            x,
+            y,
+            value,
+            label: primary.comparePoints?.[index]?.label ?? "",
+        };
+    });
+    const ticks = axisTicks(max, primary.unit);
+    const labelEvery = Math.max(1, Math.ceil(primaryCoords.length / 7));
+    const primaryTotal = primary.points.reduce((sum, point) => sum + point.value, 0);
+    const allZero = primaryCoords.length === 0 ||
+        overlayCharts.every((chart) => chart.points.every((point) => point.value === 0));
+    const active = hover ?? (primaryCoords.length > 0 ? primaryCoords.length - 1 : null);
+    const fillId = `vb-chart-fill-${primary.id}`;
+    const formatValue = (value) => formatChartValue(value, primary.unit);
+    const activeCompare = hasPeriodCompare && active != null ? compareCoords[active] : undefined;
+    const primaryLine = linePath(primaryCoords);
+    const first = primaryCoords[0];
+    const last = primaryCoords[primaryCoords.length - 1];
+    const baseline = pad.top + innerH;
+    const area = !metricsMode && first && last
+        ? `${primaryLine} L ${last.x} ${baseline} L ${first.x} ${baseline} Z`
+        : "";
+    const toggleExtra = (id) => {
+        setExtraIds((current) => {
+            if (current.includes(id))
+                return current.filter((item) => item !== id);
+            if (current.length >= MAX_METRIC_LINES - 1)
+                return current;
+            return [...current, id];
+        });
+    };
+    return (_jsxs("article", { className: "vertebr-chart", "data-empty": allZero ? "true" : undefined, "data-mode": metricsMode ? "metrics" : "period", children: [_jsxs("div", { className: "vertebr-chart-head", children: [_jsxs("div", { className: "vertebr-chart-head-start", children: [charts.length > 1 ? (_jsx(ChartSeriesSelect, { charts: charts, value: primary.id, onChange: onChartIdChange })) : (_jsx("p", { className: "vertebr-chart-kicker", children: primary.label })), canCompareMetrics ? (_jsxs("div", { className: "vertebr-chart-mode", role: "group", "aria-label": "Chart mode", children: [_jsx("button", { type: "button", className: "vertebr-chart-mode-btn", "data-active": mode === "period" ? "true" : undefined, onClick: () => setMode("period"), children: "vs previous" }), _jsx("button", { type: "button", className: "vertebr-chart-mode-btn", "data-active": mode === "metrics" ? "true" : undefined, onClick: () => {
+                                            setMode("metrics");
+                                            setExtraIds((current) => current.length > 0
+                                                ? current
+                                                : peers.slice(0, 1).map((item) => item.id));
+                                        }, children: "Compare metrics" })] })) : null, metricsMode ? (_jsx("div", { className: "vertebr-chart-metric-toggles", children: peers.map((item) => {
+                                    const on = extraIds.includes(item.id);
+                                    const full = !on && selectedExtras.length >= MAX_METRIC_LINES - 1;
+                                    return (_jsx("button", { type: "button", className: "vertebr-chart-metric-toggle", "data-on": on ? "true" : undefined, disabled: full, onClick: () => toggleExtra(item.id), children: item.label }, item.id));
+                                }) })) : hasPeriodCompare ? (_jsxs("p", { className: "vertebr-chart-legend", children: [_jsxs("span", { children: [_jsx("i", { "data-series": "current" }), "Current"] }), _jsxs("span", { children: [_jsx("i", { "data-series": "previous" }), compareLabel] })] })) : null, metricsMode ? (_jsx("p", { className: "vertebr-chart-legend", children: overlayCharts.map((chart, index) => (_jsxs("span", { children: [_jsx("i", { "data-series": `m${index}` }), chart.label] }, chart.id))) })) : null] }), _jsx("p", { className: "vertebr-chart-total", children: metricsMode ? "—" : formatValue(primaryTotal) })] }), primaryCoords.length === 0 ? (_jsx("p", { className: "vertebr-chart-empty", children: "No activity in this window." })) : (_jsxs("div", { className: "vertebr-chart-plot", children: [_jsxs("svg", { className: "vertebr-chart-svg", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": metricsMode
+                            ? overlayCharts.map((chart) => chart.label).join(" vs ")
+                            : primary.label, onMouseLeave: () => setHover(null), onMouseMove: (event) => {
+                            const rect = event.currentTarget.getBoundingClientRect();
+                            const x = ((event.clientX - rect.left) / rect.width) * width;
+                            let best = 0;
+                            let bestDist = Infinity;
+                            primaryCoords.forEach((point, index) => {
+                                const dist = Math.abs(point.x - x);
+                                if (dist < bestDist) {
+                                    bestDist = dist;
+                                    best = index;
+                                }
+                            });
+                            setHover(best);
+                        }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: fillId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--vb-accent)", stopOpacity: "0.32" }), _jsx("stop", { offset: "100%", stopColor: "var(--vb-accent)", stopOpacity: "0" })] }) }), ticks.map((tick, index) => {
+                                const y = pad.top + innerH - (tick / max) * innerH;
+                                return (_jsxs("g", { children: [_jsx("line", { className: tick === 0
+                                                ? "vertebr-chart-baseline"
+                                                : "vertebr-chart-grid", x1: pad.left, x2: width - pad.right, y1: y, y2: y }), _jsx("text", { className: "vertebr-chart-axis", x: pad.left - 8, y: y + 3, textAnchor: "end", children: formatValue(tick) })] }, `${tick}-${index}`));
+                            }), area ? (_jsx("path", { className: "vertebr-chart-area", d: area, fill: `url(#${fillId})` })) : null, hasPeriodCompare ? (_jsx("path", { className: "vertebr-chart-line-compare", d: linePath(compareCoords), fill: "none" })) : null, seriesCoords.map((coords, index) => (_jsx("path", { className: index === 0 && !metricsMode
+                                    ? "vertebr-chart-line"
+                                    : "vertebr-chart-line-metric", "data-series": metricsMode || index > 0 ? `m${index}` : undefined, d: linePath(coords), fill: "none" }, overlayCharts[index]?.id ?? index))), active != null ? (_jsx("line", { className: "vertebr-chart-crosshair", x1: primaryCoords[active]?.x, x2: primaryCoords[active]?.x, y1: pad.top, y2: pad.top + innerH })) : null, primaryCoords.map((point, index) => index % labelEvery === 0 || index === primaryCoords.length - 1 ? (_jsx("text", { className: "vertebr-chart-axis", x: point.x, y: height - 8, textAnchor: index === 0
+                                    ? "start"
+                                    : index === primaryCoords.length - 1
+                                        ? "end"
+                                        : "middle", children: point.label }, `label-${point.label}-${index}`)) : null), seriesCoords.map((coords, seriesIndex) => coords.map((point, index) => active === index ? (_jsx("circle", { className: seriesIndex === 0 && !metricsMode
+                                    ? "vertebr-chart-dot"
+                                    : "vertebr-chart-dot-metric", "data-series": metricsMode || seriesIndex > 0
+                                    ? `m${seriesIndex}`
+                                    : undefined, "data-active": "true", cx: point.x, cy: point.y, r: seriesIndex === 0 ? 4.2 : 3.4 }, `dot-${overlayCharts[seriesIndex]?.id}-${index}`)) : null)), activeCompare ? (_jsx("circle", { className: "vertebr-chart-dot-compare", cx: activeCompare.x, cy: activeCompare.y, r: 3.4 })) : null] }), active != null && primaryCoords[active] ? (_jsxs("div", { className: "vertebr-chart-tooltip", style: {
+                            left: `${Math.min(88, Math.max(12, (primaryCoords[active].x / width) * 100))}%`,
+                        }, children: [_jsx("span", { children: primaryCoords[active].label }), metricsMode ? (overlayCharts.map((chart, index) => (_jsxs("strong", { className: "vertebr-chart-tooltip-row", "data-series": `m${index}`, children: [chart.label, " ", formatValue(chart.points[active]?.value ?? 0)] }, chart.id)))) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: formatValue(primaryCoords[active].value) }), activeCompare ? (_jsxs("span", { className: "vertebr-chart-tooltip-compare", children: ["Prev ", formatValue(activeCompare.value), activeCompare.label
+                                                ? ` · ${activeCompare.label}`
+                                                : ""] })) : null] }))] })) : null] }))] }));
+}

package/dist/components/resources/ResourceActionModal.d.ts

@@ -0,0 +1,14 @@
+import type { FieldSchema, FieldType } from "@vertebr/client";
+export type ResourceActionModalProps = {
+    title: string;
+    count?: number;
+    eyebrow?: string;
+    schema: Record<string, FieldSchema>;
+    submitLabel: string;
+    onClose: () => void;
+    onSubmit: (value: Record<string, unknown>) => Promise<void>;
+};
+export declare function actionInputSchema(input: Record<string, FieldType | FieldSchema>): Record<string, FieldSchema>;
+export declare function actionInputDefaults(schema: Record<string, FieldSchema>): Record<string, unknown>;
+export declare function ResourceActionModal({ title, count, eyebrow, schema, submitLabel, onClose, onSubmit, }: ResourceActionModalProps): import("react").JSX.Element;
+//# sourceMappingURL=ResourceActionModal.d.ts.map

package/dist/components/resources/ResourceActionModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceActionModal.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceActionModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG9D,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAUF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,WAAW,CAAC,GAC7C,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAuB7B;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAClC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAWzB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,KAAS,EACT,OAAO,EACP,MAAM,EACN,WAAW,EACX,OAAO,EACP,QAAQ,GACT,EAAE,wBAAwB,+BA6D1B"}

package/dist/components/resources/ResourceActionModal.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ConfigForm } from "../config/ConfigForm";
+function humanizeKey(key) {
+    return key
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .replace(/\bcents\b/i, "")
+        .trim();
+}
+export function actionInputSchema(input) {
+    return Object.fromEntries(Object.entries(input).map(([key, def]) => {
+        if (typeof def === "string") {
+            return [
+                key,
+                {
+                    type: def,
+                    label: humanizeKey(key),
+                    required: true,
+                },
+            ];
+        }
+        return [
+            key,
+            {
+                ...def,
+                label: def.label ?? humanizeKey(key),
+                required: def.required ?? true,
+            },
+        ];
+    }));
+}
+export function actionInputDefaults(schema) {
+    return Object.fromEntries(Object.entries(schema).map(([key, field]) => {
+        if (field.type === "boolean")
+            return [key, false];
+        if (field.type === "number")
+            return [key, 0];
+        if (field.type === "enum" && field.options?.length) {
+            return [key, field.default ?? field.options[0] ?? ""];
+        }
+        return [key, field.default ?? ""];
+    }));
+}
+export function ResourceActionModal({ title, count = 0, eyebrow, schema, submitLabel, onClose, onSubmit, }) {
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [onClose]);
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal vertebr-modal-form", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: eyebrow ??
+                                        (count === 1 ? "1 person" : `${count} people`) }), _jsx("h2", { children: title })] }), _jsx("div", { className: "vertebr-modal-actions", children: _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, "aria-label": "Close", children: "Close" }) })] }), _jsx("div", { className: "vertebr-modal-body", children: _jsx(ConfigForm, { variant: "config", schema: schema, value: actionInputDefaults(schema), submitLabel: submitLabel, onSave: async (next) => {
+                            await onSubmit(next);
+                            onClose();
+                        } }) })] }) }));
+}

package/dist/components/resources/ResourceCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceCell.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA6CnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAiB,GAClB,EAAE,iBAAiB,+BA0InB"}
+{"version":3,"file":"ResourceCell.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA6CnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAiB,GAClB,EAAE,iBAAiB,+BAuHnB"}

package/dist/components/resources/ResourceCell.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isImageField, urlsFromValue } from "../../lib/images";
 import { formatPrice, isCentsField, isPriceField, } from "../../lib/price";
-const IMAGE_KEY = /(image|img|photo|avatar|thumbnail|thumb|cover)/i;
 const URL_KEY = /(url|href|link|src)/i;
 const IMAGE_EXT = /\.(png|jpe?g|gif|webp|svg|avif)(\?|#|$)/i;
 function looksLikeUrl(value) {
@@ -44,7 +44,7 @@ export function ResourceCell({ fieldKey, field, value, variant = "table", }) {
     const type = field?.type;
     if (type === "boolean" || typeof value === "boolean") {
         const on = Boolean(value);
-        return (_jsx("span", { className: "vertebr-badge", "data-tone": on ? "ok" : "neutral", children: on ? "Active" : "Off" }));
+        return (_jsx("span", { className: "vertebr-badge", "data-tone": on ? "ok" : "neutral", children: booleanLabel(fieldKey, field, on) }));
     }
     if (type === "datetime") {
         const formatted = formatDate(value);
@@ -63,21 +63,20 @@ export function ResourceCell({ fieldKey, field, value, variant = "table", }) {
             return (_jsx("span", { className: "vertebr-cell-number", children: new Intl.NumberFormat().format(value) }));
         }
     }
+    const imageUrls = urlsFromValue(value);
+    if (imageUrls.length > 0 &&
+        (type === "file[]" || isImageField(fieldKey, field) || imageUrls.every(looksLikeImageUrl))) {
+        return _jsx(ImageThumbs, { urls: imageUrls, detail: detail });
+    }
     if (Array.isArray(value)) {
         if (value.length === 0) {
             return _jsx("span", { className: "vertebr-cell-empty", children: "\u2014" });
         }
         if (value.every((entry) => typeof entry === "string")) {
-            return (_jsx("div", { className: "vertebr-chip-row", children: value.map((entry) => (_jsx("span", { className: "vertebr-chip", children: entry }, entry))) }));
+            return (_jsx("div", { className: "vertebr-chip-row", children: value.map((entry) => (_jsx("span", { className: "vertebr-chip", title: entry, children: entry }, entry))) }));
         }
     }
     if (typeof value === "string") {
-        const showImage = IMAGE_KEY.test(fieldKey) ||
-            (URL_KEY.test(fieldKey) && looksLikeImageUrl(value)) ||
-            looksLikeImageUrl(value);
-        if (showImage && looksLikeUrl(value)) {
-            return (_jsxs("a", { className: detail ? "vertebr-cell-media vertebr-cell-media-detail" : "vertebr-cell-media", href: value, target: "_blank", rel: "noreferrer", title: value, onClick: (event) => event.stopPropagation(), children: [_jsx("img", { src: value, alt: "", loading: "lazy" }), detail ? (_jsx("span", { className: "vertebr-cell-link", children: value })) : (_jsx("span", { className: "vertebr-cell-truncate", children: value }))] }));
-        }
         if (URL_KEY.test(fieldKey) || looksLikeUrl(value)) {
             return (_jsx("a", { className: "vertebr-cell-link", href: value.startsWith("//") ? `https:${value}` : value, target: "_blank", rel: "noreferrer", title: value, onClick: (event) => event.stopPropagation(), children: detail ? value : value.replace(/^https?:\/\//i, "") }));
         }
@@ -98,3 +97,20 @@ export function ResourceCell({ fieldKey, field, value, variant = "table", }) {
     }
     return _jsx("span", { className: "vertebr-cell-text", children: String(value) });
 }
+function booleanLabel(fieldKey, field, on) {
+    const hay = `${fieldKey} ${field?.label ?? ""}`;
+    if (/^show[A-Z]/.test(fieldKey) || /\bshow\b/i.test(field?.label ?? "")) {
+        return on ? "Shown" : "Hidden";
+    }
+    if (/\bactive\b/i.test(hay))
+        return on ? "Active" : "Inactive";
+    return on ? "On" : "Off";
+}
+function ImageThumbs({ urls, detail, }) {
+    if (detail) {
+        return (_jsx("div", { className: "vertebr-cell-thumbs vertebr-cell-thumbs-detail", children: urls.map((url, index) => (_jsxs("a", { className: "vertebr-cell-media vertebr-cell-media-detail", href: url, target: "_blank", rel: "noreferrer", title: url, onClick: (event) => event.stopPropagation(), children: [_jsx("img", { src: url, alt: "", loading: "lazy" }), _jsx("span", { className: "vertebr-cell-link", children: url })] }, `${url}:${index}`))) }));
+    }
+    const shown = urls.slice(0, 3);
+    const extra = urls.length - shown.length;
+    return (_jsxs("div", { className: "vertebr-cell-thumbs", title: urls[0], children: [shown.map((url, index) => (_jsx("img", { src: url, alt: "", loading: "lazy" }, `${url}:${index}`))), extra > 0 ? (_jsxs("span", { className: "vertebr-cell-thumbs-more", children: ["+", extra] })) : null] }));
+}

package/dist/components/resources/ResourceMailModal.d.ts

@@ -0,0 +1,12 @@
+import type { FieldSchema, MailPreviewResponse } from "@vertebr/client";
+export type ResourceMailModalProps = {
+    title: string;
+    count: number;
+    schema: Record<string, FieldSchema>;
+    submitLabel: string;
+    onClose: () => void;
+    onPreview: (value: Record<string, unknown>) => Promise<MailPreviewResponse>;
+    onSubmit: (value: Record<string, unknown>) => Promise<void>;
+};
+export declare function ResourceMailModal({ title, count, schema, submitLabel, onClose, onPreview, onSubmit, }: ResourceMailModalProps): import("react").JSX.Element;
+//# sourceMappingURL=ResourceMailModal.d.ts.map

package/dist/components/resources/ResourceMailModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceMailModal.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceMailModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIxE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAqHF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,sBAAsB,+BAyOxB"}