@spatika/react 1.1.0 → 1.2.0

package/dist/composites/flow-charts.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { chartColor, chordLayout, formatChartNumber, funnelLayout, heatColor, pyramidLayout, sankeyLayout, squarify, sunburstLayout, } from "../lib/charts";
+import { ChartFrame, categoryLabels, seriesMeta, useChartHover, useHiddenSeries, } from "./chart-ui";
+export function Heatmap({ xAxis, yAxis, series, height = 280, width, hideLegend, showColorScale, margin, className, }) {
+    const cells = series[0]?.data ?? [];
+    const xs = categoryLabels(xAxis?.[0], Math.max(...cells.map((c) => c.x), 0) + 1);
+    const ys = categoryLabels(yAxis?.[0], Math.max(...cells.map((c) => c.y), 0) + 1);
+    const values = cells.map((c) => c.value);
+    const min = Math.min(...values, 0);
+    const max = Math.max(...values, 1);
+    const { hover, setHover, clear } = useChartHover();
+    const reactId = useId().replace(/:/g, "");
+    const scaleId = `spk-heat-scale-${reactId}`;
+    const colorScale = showColorScale ?? !hideLegend;
+    return (_jsx(ChartFrame, { slot: "heatmap", className: className, width: width, height: height, margin: margin ?? { top: colorScale ? 32 : 12, right: 12, bottom: 36, left: 72 }, hover: hover, "aria-label": "Heatmap", children: ({ width: w, height: h, m }) => {
+            const iw = Math.max(1, w - m.left - m.right);
+            const ih = Math.max(1, h - m.top - m.bottom);
+            const cw = iw / Math.max(xs.length, 1);
+            const ch = ih / Math.max(ys.length, 1);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [colorScale ? (_jsxs("g", { className: "spk-chart-color-scale", "data-slot": "heatmap-color-scale", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: scaleId, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: heatColor(0) }), _jsx("stop", { offset: "50%", stopColor: heatColor(0.5) }), _jsx("stop", { offset: "100%", stopColor: heatColor(1) })] }) }), _jsx("text", { className: "spk-chart-muted", x: m.left, y: m.top - 16, children: formatChartNumber(min) }), _jsx("text", { className: "spk-chart-muted", x: m.left + iw, y: m.top - 16, textAnchor: "end", children: formatChartNumber(max) }), _jsx("rect", { x: m.left, y: m.top - 12, width: iw, height: 6, rx: 3, fill: `url(#${scaleId})` })] })) : null, ys.map((label, y) => (_jsx("text", { className: "spk-chart-tick", x: m.left - 8, y: m.top + y * ch + ch / 2, textAnchor: "end", dominantBaseline: "middle", children: String(label) }, `y-${String(label)}`))), xs.map((label, x) => (_jsx("text", { className: "spk-chart-tick", x: m.left + x * cw + cw / 2, y: h - m.bottom + 16, textAnchor: "middle", children: String(label) }, `x-${String(label)}`))), cells.map((cell, i) => {
+                        const t = (cell.value - min) / (max - min || 1);
+                        return (_jsx("rect", { x: m.left + cell.x * cw + 1.5, y: m.top + cell.y * ch + 1.5, width: Math.max(1, cw - 3), height: Math.max(1, ch - 3), rx: 4, fill: heatColor(t), className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                x: event.nativeEvent.offsetX,
+                                y: event.nativeEvent.offsetY,
+                                title: `${xs[cell.x]} · ${ys[cell.y]}`,
+                                items: [
+                                    {
+                                        color: heatColor(t),
+                                        label: "value",
+                                        value: formatChartNumber(cell.value),
+                                    },
+                                ],
+                            }), onMouseLeave: clear }, i));
+                    })] }));
+        } }));
+}
+export function FunnelChart({ series, height = 300, width, colors, hideLegend, className, variant = "funnel", gap = 6, labelPosition, valueFormatter, }) {
+    const stages = series[0]?.data ?? [];
+    const comparison = series.length > 1;
+    const position = labelPosition ?? (comparison ? "both" : "inside");
+    const formatValue = valueFormatter ?? ((value) => formatChartNumber(value));
+    const meta = seriesMeta(stages.map((item) => ({ id: item.id ?? item.label, label: item.label, color: item.color })), colors);
+    const { hover, setHover, clear } = useChartHover();
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const showInside = position === "inside" || position === "both";
+    const showOutside = position === "outside" || position === "both";
+    return (_jsx(ChartFrame, { slot: variant === "pyramid" ? "pyramid-chart" : "funnel-chart", className: className, width: width, height: height, margin: {
+            top: 8,
+            right: showOutside ? 56 : 8,
+            bottom: 8,
+            left: 8,
+        }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": variant === "pyramid" ? "Pyramid chart" : "Funnel chart", children: ({ width: w, height: h, m }) => {
+            const visibleIndexes = stages
+                .map((_, i) => i)
+                .filter((i) => !hidden.has(meta[i].id));
+            const visibleSeries = series.map((item) => ({
+                ...item,
+                data: visibleIndexes.map((i) => item.data[i]).filter((row) => row != null),
+            }));
+            const maxValue = Math.max(...visibleSeries.flatMap((item) => item.data.map((row) => row.value)), 1);
+            const innerW = w - m.left - m.right;
+            const innerH = h - m.top - m.bottom;
+            const layouts = visibleSeries.map((item) => {
+                const rows = item.data.map((row, i) => ({
+                    ...row,
+                    color: meta[visibleIndexes[i] ?? i]?.color,
+                }));
+                return variant === "pyramid"
+                    ? pyramidLayout(rows, innerW, innerH)
+                    : funnelLayout(rows, innerW, innerH, gap, maxValue);
+            });
+            const drawOrder = layouts.map((_, i) => i).sort((a, b) => (a === 0 ? 1 : b === 0 ? -1 : a - b));
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: drawOrder.flatMap((seriesIndex) => {
+                    const layout = layouts[seriesIndex] ?? [];
+                    const primary = seriesIndex === 0;
+                    return layout.map((row, i) => {
+                        const info = meta.find((item) => item.label === row.label) ?? meta[visibleIndexes[i] ?? i];
+                        const d = `M${m.left + row.topLeft} ${m.top + row.y} L${m.left + row.topRight} ${m.top + row.y} L${m.left + row.bottomRight} ${m.top + row.y + row.height} L${m.left + row.bottomLeft} ${m.top + row.y + row.height} Z`;
+                        const valueText = formatValue(row.value, row.percent);
+                        const inside = showInside &&
+                            primary &&
+                            (hideLegend && !comparison ? row.label : valueText);
+                        const outside = showOutside && !primary ? valueText : showOutside && !comparison ? valueText : null;
+                        return (_jsxs("g", { children: [_jsx("path", { d: d, fill: info.color, fillOpacity: primary ? 1 : 0.14, stroke: primary ? "none" : info.color, strokeWidth: primary ? 0 : 1.75, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                        x: event.nativeEvent.offsetX,
+                                        y: event.nativeEvent.offsetY,
+                                        title: row.label,
+                                        items: [
+                                            {
+                                                color: info.color,
+                                                label: visibleSeries[seriesIndex]?.label ?? row.label,
+                                                value: formatChartNumber(row.value),
+                                            },
+                                        ],
+                                    }), onMouseLeave: clear }), inside ? (_jsx("text", { className: "spk-chart-label", fill: "var(--primary-foreground)", x: w / 2, y: m.top + row.y + row.height / 2, textAnchor: "middle", dominantBaseline: "middle", children: inside })) : null, outside ? (_jsx("text", { className: "spk-chart-tick", x: m.left + Math.max(row.topRight, row.bottomRight) + 8, y: m.top + row.y + row.height / 2, dominantBaseline: "middle", children: outside })) : null] }, `${seriesIndex}-${row.label}`));
+                    });
+                }) }));
+        } }));
+}
+export function PyramidChart(props) {
+    return _jsx(FunnelChart, { ...props, variant: "pyramid" });
+}
+export function SankeyChart({ series, height = 300, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    return (_jsx(ChartFrame, { slot: "sankey-chart", className: className, width: width, height: height, margin: { top: 12, right: 88, bottom: 12, left: 12 }, hover: hover, "aria-label": "Sankey chart", children: ({ width: w, height: h, m }) => {
+            const layout = sankeyLayout(series.data, series.links, w - m.left - m.right, h - m.top - m.bottom);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [layout.links.map((link, i) => (_jsx("path", { d: link.path, transform: `translate(${m.left} ${m.top})`, fill: chartColor(i, colors), fillOpacity: 0.28, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: `${link.source} → ${link.target}`,
+                            items: [
+                                {
+                                    color: chartColor(i, colors),
+                                    label: "flow",
+                                    value: formatChartNumber(link.value),
+                                },
+                            ],
+                        }), onMouseLeave: clear }, `${link.source}-${link.target}-${i}`))), layout.nodes.map((node, i) => (_jsxs("g", { transform: `translate(${m.left} ${m.top})`, children: [_jsx("rect", { x: node.x, y: node.y, width: node.width, height: node.height, rx: 4, fill: node.color ?? chartColor(i, colors) }), _jsx("text", { className: "spk-chart-tick", x: node.x + node.width + 6, y: node.y + node.height / 2, dominantBaseline: "middle", children: node.label })] }, node.id)))] }));
+        } }));
+}
+export function Treemap({ series, height = 280, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    const data = series[0]?.data ?? [];
+    return (_jsx(ChartFrame, { slot: "treemap", className: className, width: width, height: height, margin: { top: 4, right: 4, bottom: 4, left: 4 }, hover: hover, "aria-label": "Treemap", children: ({ width: w, height: h, m }) => {
+            const rects = squarify(data, 0, 0, w - m.left - m.right, h - m.top - m.bottom);
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: rects.map((rect, i) => (_jsxs("g", { transform: `translate(${m.left} ${m.top})`, children: [_jsx("rect", { x: rect.x + 1.5, y: rect.y + 1.5, width: Math.max(0, rect.w - 3), height: Math.max(0, rect.h - 3), rx: 8, fill: rect.color ?? chartColor(i, colors), className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                x: event.nativeEvent.offsetX,
+                                y: event.nativeEvent.offsetY,
+                                title: rect.label,
+                                items: [
+                                    {
+                                        color: rect.color ?? chartColor(i, colors),
+                                        label: rect.label,
+                                        value: formatChartNumber(rect.value),
+                                    },
+                                ],
+                            }), onMouseLeave: clear }), rect.w > 56 && rect.h > 28 ? (_jsx("text", { className: "spk-chart-label", x: rect.x + 10, y: rect.y + 20, children: rect.label })) : null] }, rect.id))) }));
+        } }));
+}
+export function SunburstChart({ series, height = 300, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    const data = series[0]?.data ?? [];
+    return (_jsx(ChartFrame, { slot: "sunburst-chart", className: className, width: width, height: height, margin: { top: 8, right: 8, bottom: 8, left: 8 }, hover: hover, "aria-label": "Sunburst chart", children: ({ width: w, height: h }) => {
+            const cx = w / 2;
+            const cy = h / 2;
+            const outer = Math.min(w, h) * 0.42;
+            const slices = sunburstLayout(data, cx, cy, outer * 0.22, outer);
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: slices.map((slice, i) => (_jsx("path", { d: slice.path, fill: slice.color ?? chartColor(slice.depth + i, colors), stroke: "var(--background)", strokeWidth: 1.5, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                        x: event.nativeEvent.offsetX,
+                        y: event.nativeEvent.offsetY,
+                        title: slice.label,
+                        items: [
+                            {
+                                color: slice.color ?? chartColor(i, colors),
+                                label: slice.label,
+                                value: formatChartNumber(slice.value),
+                            },
+                        ],
+                    }), onMouseLeave: clear }, `${slice.id}-${i}`))) }));
+        } }));
+}
+export function ChordChart({ series, height = 300, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    const meta = seriesMeta(series.data.map((label) => ({ id: label, label })), colors);
+    return (_jsx(ChartFrame, { slot: "chord-chart", className: className, width: width, height: height, margin: { top: 24, right: 24, bottom: 24, left: 24 }, legend: meta, hover: hover, "aria-label": "Chord chart", children: ({ width: w, height: h }) => {
+            const cx = w / 2;
+            const cy = h / 2;
+            const outer = Math.min(w, h) * 0.38;
+            const inner = outer * 0.9;
+            const layout = chordLayout(series.data, series.matrix, cx, cy, inner, outer);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [layout.ribbons.map((ribbon, i) => (_jsx("path", { d: ribbon.path, fill: chartColor(ribbon.source, colors), fillOpacity: 0.28, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: `${series.data[ribbon.source]} → ${series.data[ribbon.target]}`,
+                            items: [
+                                {
+                                    color: chartColor(ribbon.source, colors),
+                                    label: "flow",
+                                    value: formatChartNumber(ribbon.value),
+                                },
+                            ],
+                        }), onMouseLeave: clear }, `${ribbon.source}-${ribbon.target}-${i}`))), layout.groups.map((group) => (_jsx("path", { d: group.path, fill: chartColor(group.index, colors) }, group.label)))] }));
+        } }));
+}

package/dist/composites/radial-charts.d.ts

@@ -0,0 +1,109 @@
+import { type ChartMargin } from "../lib/charts";
+export type PieDatum = {
+    id?: string | number;
+    value: number;
+    label?: string;
+    color?: string;
+};
+export type PieSeries = {
+    data: PieDatum[];
+    innerRadius?: number;
+    outerRadius?: number;
+    paddingAngle?: number;
+    startAngle?: number;
+    endAngle?: number;
+    cx?: number;
+    cy?: number;
+    faded?: boolean;
+};
+export type PieChartProps = {
+    series: PieSeries[];
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+    slot?: string;
+};
+export declare function PieChart({ series, height, width, colors, hideLegend, margin, className, slot, }: PieChartProps): import("react").JSX.Element;
+export type GaugeSection = {
+    value: number;
+    color?: string;
+    label?: string;
+};
+export type GaugeProps = {
+    value?: number;
+    valueMin?: number;
+    valueMax?: number;
+    startAngle?: number;
+    endAngle?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    height?: number;
+    width?: number;
+    color?: string;
+    colors?: string[];
+    text?: string | null | ((value: number) => string);
+    sections?: GaugeSection[];
+    hideLegend?: boolean;
+    paddingAngle?: number;
+    className?: string;
+};
+export declare function Gauge({ value, valueMin, valueMax, startAngle, endAngle, innerRadius, outerRadius, height, width, color, colors, text, sections, hideLegend, paddingAngle, className, }: GaugeProps): import("react").JSX.Element;
+export type LinearGaugeProps = {
+    value: number;
+    valueMin?: number;
+    valueMax?: number;
+    height?: number;
+    width?: number;
+    color?: string;
+    className?: string;
+};
+export declare function LinearGauge({ value, valueMin, valueMax, height, width, color, className, }: LinearGaugeProps): import("react").JSX.Element;
+export type RadarSeries = {
+    id?: string;
+    label?: string;
+    color?: string;
+    data: number[];
+};
+export type RadarChartProps = {
+    series: RadarSeries[];
+    radar: {
+        metrics: string[];
+        max?: number;
+    };
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    className?: string;
+    fill?: boolean;
+    slot?: string;
+};
+export declare function RadarChart({ series, radar, height, width, colors, hideLegend, className, fill, slot, }: RadarChartProps): import("react").JSX.Element;
+export declare function PolarLineChart(props: RadarChartProps): import("react").JSX.Element;
+export type RadialBarChartProps = {
+    series: Array<{
+        data: PieDatum[];
+    }>;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    className?: string;
+    startAngle?: number;
+    endAngle?: number;
+};
+export declare function RadialBarChart({ series, height, width, colors, hideLegend, className, startAngle, endAngle, }: RadialBarChartProps): import("react").JSX.Element;
+export type RadialLineChartProps = {
+    series: RadarSeries[];
+    metrics?: string[];
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    className?: string;
+};
+export declare function RadialLineChart({ series, metrics, height, width, colors, hideLegend, className, }: RadialLineChartProps): import("react").JSX.Element;
+//# sourceMappingURL=radial-charts.d.ts.map

package/dist/composites/radial-charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-charts.d.ts","sourceRoot":"","sources":["../../src/composites/radial-charts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AASvB,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,IAAkB,GACnB,EAAE,aAAa,+BA2Ff;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EACpB,KAAS,EACT,QAAY,EACZ,QAAc,EACd,UAAiB,EACjB,QAAc,EACd,WAAW,EACX,WAAW,EACX,MAAY,EACZ,KAAK,EACL,KAAwB,EACxB,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,YAAgB,EAChB,SAAS,GACV,EAAE,UAAU,+BA2FZ;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAY,EACZ,QAAc,EACd,MAAW,EACX,KAAK,EACL,KAAwB,EACxB,SAAS,GACV,EAAE,gBAAgB,+BAsClB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,SAAS,EACT,IAAW,EACX,IAAoB,GACrB,EAAE,eAAe,+BAuHjB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,+BAEpD;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;KAAE,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,SAAS,EACT,UAAgB,EAChB,QAAc,GACf,EAAE,mBAAmB,+BAkErB;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,SAAS,GACV,EAAE,oBAAoB,+BAetB"}

package/dist/composites/radial-charts.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { arcPath, formatChartNumber, linePath, pieSlices, polarPoint, } from "../lib/charts";
+import { ChartFrame, formatSeriesValue, seriesMeta, useChartHover, useHiddenSeries, } from "./chart-ui";
+export function PieChart({ series, height = 280, width, colors, hideLegend, margin, className, slot = "pie-chart", }) {
+    const first = series[0] ?? { data: [] };
+    const meta = seriesMeta(first.data.map((item, i) => ({
+        id: String(item.id ?? item.label ?? i),
+        label: item.label ?? `Slice ${i + 1}`,
+        color: item.color,
+    })), colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    return (_jsx(ChartFrame, { slot: slot, className: className, width: width, height: height, margin: margin ?? { top: 12, right: 12, bottom: 12, left: 12 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": "Pie chart", children: ({ width: w, height: h, m }) => {
+            const cx = first.cx ?? w / 2;
+            const cy = first.cy ?? (h - 8) / 2;
+            const maxR = Math.min(w - m.left - m.right, h - m.top - m.bottom) / 2;
+            const outer = first.outerRadius ?? maxR;
+            const inner = first.innerRadius ?? 0;
+            const visible = first.data.map((item, i) => (hidden.has(meta[i].id) ? 0 : item.value));
+            const slices = pieSlices(visible, {
+                cx,
+                cy,
+                innerRadius: inner,
+                outerRadius: outer,
+                startAngle: first.startAngle,
+                endAngle: first.endAngle,
+                paddingAngle: first.paddingAngle,
+            });
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: slices.map((slice, i) => {
+                    const info = meta[i];
+                    if (hidden.has(info.id) || !slice.path)
+                        return null;
+                    const item = first.data[i];
+                    return (_jsxs("g", { children: [_jsx("path", { d: slice.path, fill: info.color, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                    x: event.nativeEvent.offsetX,
+                                    y: event.nativeEvent.offsetY,
+                                    title: info.label,
+                                    items: [
+                                        {
+                                            color: info.color,
+                                            label: info.label,
+                                            value: `${formatChartNumber(item.value)} (${Math.round(slice.percent * 100)}%)`,
+                                        },
+                                    ],
+                                }), onMouseLeave: clear }), slice.percent > 0.08 ? (_jsxs("text", { className: "spk-chart-label", fill: "var(--primary-foreground)", x: slice.labelX, y: slice.labelY, textAnchor: "middle", dominantBaseline: "middle", children: [Math.round(slice.percent * 100), "%"] })) : null] }, info.id));
+                }) }));
+        } }));
+}
+export function Gauge({ value = 0, valueMin = 0, valueMax = 100, startAngle = -110, endAngle = 110, innerRadius, outerRadius, height = 200, width, color = "var(--chart-1)", colors, text, sections, hideLegend, paddingAngle = 2, className, }) {
+    const pct = (value - valueMin) / (valueMax - valueMin || 1);
+    const segmented = Boolean(sections?.length);
+    const resolvedText = text === null
+        ? null
+        : typeof text === "function"
+            ? text(value)
+            : (text ?? (segmented ? null : `${Math.round(pct * 100)}%`));
+    const meta = seriesMeta((sections ?? []).map((item, i) => ({
+        id: item.label ?? `section-${i}`,
+        label: item.label ?? `Section ${i + 1}`,
+        color: item.color,
+    })), colors);
+    return (_jsx(ChartFrame, { slot: "gauge", className: className, width: width, height: height, margin: { top: 8, right: 8, bottom: 8, left: 8 }, legend: segmented && !hideLegend ? meta : undefined, "aria-label": segmented ? "Gauge" : `Gauge ${value}`, children: ({ width: w, height: h }) => {
+            const cx = w / 2;
+            const cy = segmented ? h * 0.72 : h * 0.62;
+            const maxR = Math.min(w, h) * (segmented ? 0.5 : 0.42);
+            const outer = outerRadius ?? maxR;
+            const inner = innerRadius ?? outer * 0.72;
+            const span = endAngle - startAngle;
+            const valueAngle = startAngle + span * Math.min(1, Math.max(0, pct));
+            const slices = segmented
+                ? pieSlices((sections ?? []).map((item) => item.value), {
+                    cx,
+                    cy,
+                    innerRadius: inner,
+                    outerRadius: outer,
+                    startAngle,
+                    endAngle,
+                    paddingAngle,
+                })
+                : [];
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [segmented ? (slices.map((slice, i) => {
+                        const info = meta[i];
+                        if (!slice.path)
+                            return null;
+                        return (_jsx("path", { d: slice.path, fill: info.color, className: "spk-chart-mark" }, info.id));
+                    })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: arcPath(cx, cy, inner, outer, startAngle, endAngle), fill: "color-mix(in srgb, var(--muted) 80%, transparent)" }), _jsx("path", { d: arcPath(cx, cy, inner, outer, startAngle, valueAngle), fill: color })] })), resolvedText != null ? (_jsx("text", { className: "spk-chart-label", x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", fontSize: "1.35rem", children: resolvedText })) : null] }));
+        } }));
+}
+export function LinearGauge({ value, valueMin = 0, valueMax = 100, height = 48, width, color = "var(--chart-1)", className, }) {
+    const pct = Math.min(1, Math.max(0, (value - valueMin) / (valueMax - valueMin || 1)));
+    return (_jsx(ChartFrame, { slot: "linear-gauge", className: className, width: width, height: height, margin: { top: 14, right: 12, bottom: 14, left: 12 }, "aria-label": `Linear gauge ${value}`, children: ({ width: w, height: h, m }) => {
+            const y = h / 2 - 7;
+            const trackW = w - m.left - m.right;
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [_jsx("rect", { x: m.left, y: y, width: trackW, height: 14, rx: 7, fill: "color-mix(in srgb, var(--muted) 80%, transparent)" }), _jsx("rect", { x: m.left, y: y, width: Math.max(14, trackW * pct), height: 14, rx: 7, fill: color }), _jsx("text", { className: "spk-chart-label", x: m.left + trackW * pct, y: y - 4, textAnchor: pct > 0.85 ? "end" : "middle", children: formatChartNumber(value) })] }));
+        } }));
+}
+export function RadarChart({ series, radar, height = 300, width, colors, hideLegend, className, fill = true, slot = "radar-chart", }) {
+    const meta = seriesMeta(series, colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    const max = radar.max ?? Math.max(...series.flatMap((item) => item.data), 1);
+    return (_jsx(ChartFrame, { slot: slot, className: className, width: width, height: height, margin: { top: 28, right: 28, bottom: 28, left: 28 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": "Radar chart", children: ({ width: w, height: h }) => {
+            const cx = w / 2;
+            const cy = h / 2;
+            const radius = Math.min(w, h) * 0.36;
+            const n = radar.metrics.length || 1;
+            const angle = 360 / n;
+            const rings = [0.25, 0.5, 0.75, 1];
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [rings.map((ring) => (_jsx("polygon", { fill: "none", className: "spk-chart-grid", points: radar.metrics
+                            .map((_, i) => {
+                            const p = polarPoint(cx, cy, radius * ring, i * angle);
+                            return `${p.x},${p.y}`;
+                        })
+                            .join(" ") }, ring))), radar.metrics.map((metric, i) => {
+                        const p = polarPoint(cx, cy, radius, i * angle);
+                        const label = polarPoint(cx, cy, radius + 18, i * angle);
+                        return (_jsxs("g", { children: [_jsx("line", { className: "spk-chart-grid", x1: cx, y1: cy, x2: p.x, y2: p.y }), _jsx("text", { className: "spk-chart-tick", x: label.x, y: label.y, textAnchor: "middle", dominantBaseline: "middle", children: metric })] }, metric));
+                    }), series.map((item, s) => {
+                        const info = meta[s];
+                        if (hidden.has(info.id))
+                            return null;
+                        const pts = item.data.map((value, i) => polarPoint(cx, cy, radius * (value / max), i * angle));
+                        const closed = [...pts, pts[0]];
+                        return (_jsxs("g", { children: [fill ? (_jsx("polygon", { points: pts.map((p) => `${p.x},${p.y}`).join(" "), fill: info.color, fillOpacity: 0.18, stroke: info.color, strokeWidth: 2, className: "spk-chart-mark" })) : (_jsx("path", { d: linePath(closed, "linear"), fill: "none", stroke: info.color, strokeWidth: 2, className: "spk-chart-mark" })), pts.map((p, i) => (_jsx("circle", { cx: p.x, cy: p.y, r: 3.2, fill: info.color, onMouseEnter: () => setHover({
+                                        x: p.x,
+                                        y: p.y,
+                                        title: radar.metrics[i],
+                                        items: [
+                                            {
+                                                color: info.color,
+                                                label: info.label,
+                                                value: formatSeriesValue(item.data[i]),
+                                            },
+                                        ],
+                                    }), onMouseLeave: clear }, i)))] }, info.id));
+                    })] }));
+        } }));
+}
+export function PolarLineChart(props) {
+    return _jsx(RadarChart, { ...props, fill: false, slot: "polar-line-chart" });
+}
+export function RadialBarChart({ series, height = 280, width, colors, hideLegend, className, startAngle = -90, endAngle = 180, }) {
+    const data = series[0]?.data ?? [];
+    const meta = seriesMeta(data.map((item, i) => ({ id: String(item.id ?? item.label ?? i), label: item.label ?? `Item ${i + 1}`, color: item.color })), colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    const max = Math.max(...data.map((item) => item.value), 1);
+    return (_jsx(ChartFrame, { slot: "radial-bar-chart", className: className, width: width, height: height, margin: { top: 12, right: 12, bottom: 12, left: 12 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": "Radial bar chart", children: ({ width: w, height: h }) => {
+            const cx = w / 2;
+            const cy = h / 2;
+            const outer = Math.min(w, h) * 0.42;
+            const track = Math.max(8, (outer * 0.62) / Math.max(data.length, 1));
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: data.map((item, i) => {
+                    const info = meta[i];
+                    if (hidden.has(info.id))
+                        return null;
+                    const r1 = outer - i * track;
+                    const r0 = r1 - track * 0.72;
+                    const span = endAngle - startAngle;
+                    const a1 = startAngle + span * (item.value / max);
+                    return (_jsxs("g", { children: [_jsx("path", { d: arcPath(cx, cy, r0, r1, startAngle, endAngle), fill: "color-mix(in srgb, var(--muted) 70%, transparent)" }), _jsx("path", { d: arcPath(cx, cy, r0, r1, startAngle, a1), fill: info.color, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                    x: event.nativeEvent.offsetX,
+                                    y: event.nativeEvent.offsetY,
+                                    title: info.label,
+                                    items: [{ color: info.color, label: info.label, value: formatChartNumber(item.value) }],
+                                }), onMouseLeave: clear })] }, info.id));
+                }) }));
+        } }));
+}
+export function RadialLineChart({ series, metrics, height = 280, width, colors, hideLegend, className, }) {
+    const labels = metrics ?? series[0]?.data.map((_, i) => String(i + 1)) ?? [];
+    return (_jsx(RadarChart, { series: series, radar: { metrics: labels }, height: height, width: width, colors: colors, hideLegend: hideLegend, className: className, fill: false, slot: "radial-line-chart" }));
+}

package/dist/composites/scheduler-ui.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type CalendarView, type NormalizedEvent, type SchedulerPreferences, type SchedulerResource, type TimelineScale } from "../lib/scheduler";
+export declare const CALENDAR_VIEW_LABEL: Record<CalendarView, string>;
+export declare const TIMELINE_SCALE_LABEL: Record<TimelineScale, string>;
+export declare function SchedulerToolbar({ title, onPrev, onNext, onToday, menuLabel, menu, trailing, }: {
+    title: string;
+    onPrev: () => void;
+    onNext: () => void;
+    onToday: () => void;
+    menuLabel: string;
+    menu: ReactNode;
+    trailing?: ReactNode;
+}): import("react").JSX.Element;
+export declare function SchedulerPreferencesMenu({ value, onChange, disabled, }: {
+    value: Required<SchedulerPreferences>;
+    onChange: (next: Required<SchedulerPreferences>) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function EventResizeHandle({ event, edge, axis, hourStart, hourEnd, onCommit, }: {
+    event: NormalizedEvent;
+    edge: "start" | "end";
+    axis: "ns" | "ew";
+    hourStart?: number;
+    hourEnd?: number;
+    onCommit: (event: NormalizedEvent, edge: "start" | "end", instant: Date) => void;
+}): import("react").JSX.Element;
+export declare function ResourceLegend({ resources, hiddenIds, onToggle, }: {
+    resources: SchedulerResource[];
+    hiddenIds: ReadonlySet<string>;
+    onToggle: (id: string) => void;
+}): import("react").JSX.Element | null;
+export declare function EventPopover({ event, resources, children, onOpenChange, }: {
+    event: NormalizedEvent;
+    resources: SchedulerResource[];
+    children: ReactNode;
+    onOpenChange?: (open: boolean) => void;
+}): import("react").JSX.Element;
+export declare function SchedulerShell({ className, slot, children, ...props }: {
+    className?: string;
+    slot: string;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+//# sourceMappingURL=scheduler-ui.d.ts.map

package/dist/composites/scheduler-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler-ui.d.ts","sourceRoot":"","sources":["../../src/composites/scheduler-ui.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAU1B,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK5D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAM9D,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAwCA;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BAgCA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;CAClF,+BA6CA;AAGD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,sCAqCA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,YAAY,GACb,EAAE;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,+BAsBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,+BAajC"}

package/dist/composites/scheduler-ui.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, Settings } from "lucide-react";
+import { cn } from "../lib/cn";
+import { eventColorStyle, formatDateRange, snapMs, startOfDay, } from "../lib/scheduler";
+import { Button } from "../primitives/Button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../primitives/DropdownMenu";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
+export const CALENDAR_VIEW_LABEL = {
+    month: "Month",
+    week: "Week",
+    day: "Day",
+    agenda: "Agenda",
+};
+export const TIMELINE_SCALE_LABEL = {
+    hours: "Hours",
+    days: "Days",
+    weeks: "Weeks",
+    months: "Months",
+    years: "Years",
+};
+export function SchedulerToolbar({ title, onPrev, onNext, onToday, menuLabel, menu, trailing, }) {
+    return (_jsxs("div", { "data-slot": "scheduler-toolbar", className: "flex flex-col gap-3 border-b border-border/50 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4", children: [_jsx("h2", { className: "min-w-0 truncate text-xl font-black tracking-tight text-foreground sm:text-2xl", children: title }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Previous", onClick: onPrev, children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "uppercase tracking-wide", onClick: onToday, children: "Today" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Next", onClick: onNext, children: _jsx(ChevronRight, { className: "size-4" }) })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "min-w-[6.5rem] justify-between gap-2 uppercase tracking-wide", children: [menuLabel, _jsx(ChevronDown, { className: "size-3.5 opacity-70" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: menu })] }), trailing] })] }));
+}
+export function SchedulerPreferencesMenu({ value, onChange, disabled, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Preferences", disabled: disabled, children: _jsx(Settings, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [_jsx(DropdownMenuItem, { onClick: () => onChange({ ...value, showWeekends: !value.showWeekends }), children: value.showWeekends ? "Hide weekends" : "Show weekends" }), _jsx(DropdownMenuItem, { onClick: () => onChange({ ...value, showWeekNumber: !value.showWeekNumber }), children: value.showWeekNumber ? "Hide week numbers" : "Show week numbers" }), _jsx(DropdownMenuItem, { onClick: () => onChange({ ...value, ampm: !value.ampm }), children: value.ampm ? "Use 24-hour time" : "Use 12-hour time" }), _jsxs(DropdownMenuItem, { onClick: () => onChange({ ...value, weekStartsOn: value.weekStartsOn === 0 ? 1 : 0 }), children: ["Week starts on ", value.weekStartsOn === 0 ? "Monday" : "Sunday"] })] })] }));
+}
+export function EventResizeHandle({ event, edge, axis, hourStart, hourEnd, onCommit, }) {
+    const ns = axis === "ns";
+    return (_jsx("button", { type: "button", "aria-label": edge === "start" ? "Resize start" : "Resize end", className: cn("absolute z-10 touch-none bg-transparent", ns ? "inset-x-1 h-1.5 cursor-ns-resize" : "inset-y-1 w-1.5 cursor-ew-resize", ns && edge === "start" && "top-0", ns && edge === "end" && "bottom-0", !ns && edge === "start" && "left-0", !ns && edge === "end" && "right-0"), onClick: (click) => click.stopPropagation(), onPointerDown: (pointer) => {
+            pointer.stopPropagation();
+            pointer.currentTarget.setPointerCapture?.(pointer.pointerId);
+        }, onPointerUp: (pointer) => {
+            pointer.stopPropagation();
+            if (ns) {
+                const column = pointer.currentTarget.closest("[data-scheduler-day]");
+                if (!column || hourStart == null || hourEnd == null)
+                    return;
+                const rect = column.getBoundingClientRect();
+                const ratio = Math.min(1, Math.max(0, (pointer.clientY - rect.top) / rect.height));
+                const ms = startOfDay(event.start).getTime() + (hourStart + ratio * (hourEnd - hourStart)) * 3_600_000;
+                onCommit(event, edge, new Date(snapMs(ms)));
+                return;
+            }
+            const grid = pointer.currentTarget.closest("[data-scheduler-grid]");
+            if (!grid)
+                return;
+            const start = Number(grid.dataset.rangeStart);
+            const end = Number(grid.dataset.rangeEnd);
+            const rect = grid.getBoundingClientRect();
+            const ratio = Math.min(1, Math.max(0, (pointer.clientX - rect.left) / rect.width));
+            onCommit(event, edge, new Date(snapMs(start + ratio * (end - start))));
+        } }));
+}
+export function ResourceLegend({ resources, hiddenIds, onToggle, }) {
+    if (resources.length === 0)
+        return null;
+    return (_jsxs("div", { "data-slot": "scheduler-resources", className: "flex flex-wrap items-center gap-1.5 border-t border-border/50 px-3 py-2.5 sm:px-4", children: [_jsx("p", { className: "mr-1 text-[10px] font-black uppercase tracking-widest text-muted-foreground", children: "Resources" }), resources.map((resource) => {
+                const active = !hiddenIds.has(resource.id);
+                const tone = resource.color ?? "blue";
+                return (_jsxs("button", { type: "button", onClick: () => onToggle(resource.id), "aria-pressed": active, className: cn("inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors", active
+                        ? "border-border/60 bg-background/80 text-foreground"
+                        : "border-transparent bg-muted/30 text-muted-foreground line-through"), children: [_jsx("span", { className: "size-2 rounded-full", style: eventColorStyle(tone, "dot"), "aria-hidden": true }), resource.title] }, resource.id));
+            })] }));
+}
+export function EventPopover({ event, resources, children, onOpenChange, }) {
+    const resource = resources.find((item) => item.id === event.resourceId);
+    return (_jsxs(Popover, { onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-72 p-3", children: [_jsx("p", { className: "text-sm font-bold text-foreground", children: event.title }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: formatDateRange(event.start, event.end, event.allDay) }), resource ? (_jsxs("p", { className: "mt-2 inline-flex items-center gap-1.5 text-xs font-semibold text-foreground", children: [_jsx("span", { className: "size-2 rounded-full", style: eventColorStyle(event.color, "dot") }), resource.title] })) : null, event.description ? (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: event.description })) : null] })] }));
+}
+export function SchedulerShell({ className, slot, children, ...props }) {
+    return (_jsx("div", { "data-slot": slot, className: cn("relative overflow-hidden rounded-[var(--radius-card)] border border-border/60 bg-background/80 shadow-[var(--shadow-soft)]", className), ...props, children: children }));
+}