@cronus-ui/ui 0.6.0

package/dist/components/progress.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A determinate/indeterminate progress bar. The Radix Root is the
+ * `role="progressbar"` element, so `aria-label`/`aria-labelledby` (and any
+ * other prop) spread straight onto it — always pass one describing what the
+ * bar measures (e.g. "Upload progress") so the progressbar has an accessible
+ * name and satisfies `aria-progressbar-name` (WCAG 4.1.2).
+ */
+export const Progress = forwardRef(({ className, value, ...props }, ref) => {
+    const pct = Math.min(100, Math.max(0, value ?? 0));
+    return (_jsx(ProgressPrimitive.Root, { ref: ref, "data-slot": "progress", value: value, className: cn("relative h-2 w-full overflow-hidden rounded-full bg-surface-overlay", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-primary transition-transform duration-300 ease-[var(--ease-out-quart)]", style: { transform: `translateX(-${100 - pct}%)` } }) }));
+});
+Progress.displayName = "Progress";
+//# sourceMappingURL=progress.js.map

package/dist/components/progressive-blur.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes, Ref } from "react";
+declare const progressiveBlurVariants: (props?: ({
+    side?: "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ProgressiveBlurProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressiveBlurVariants> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Height of the blur band.
+     * @default "6rem"
+     */
+    height?: string;
+}
+/**
+ * A stacked backdrop-blur that fades content out toward an edge — the iOS
+ * "scrolls under the chrome" treatment. Place it over a scroll region; the
+ * blur layers are decorative (`aria-hidden`).
+ */
+export declare function ProgressiveBlur({ ref, className, side, height, ...props }: ProgressiveBlurProps): import("react").JSX.Element;
+export declare namespace ProgressiveBlur {
+    var displayName: string;
+}
+export { progressiveBlurVariants };
+//# sourceMappingURL=progressive-blur.d.ts.map

package/dist/components/progressive-blur.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+const progressiveBlurVariants = cva("pointer-events-none absolute inset-x-0 z-10 motion-reduce:hidden", {
+    variants: {
+        side: {
+            top: "top-0",
+            bottom: "bottom-0",
+        },
+    },
+    defaultVariants: { side: "bottom" },
+});
+/**
+ * A stacked backdrop-blur that fades content out toward an edge — the iOS
+ * "scrolls under the chrome" treatment. Place it over a scroll region; the
+ * blur layers are decorative (`aria-hidden`).
+ */
+export function ProgressiveBlur({ ref, className, side = "bottom", height = "6rem", ...props }) {
+    const mask = side === "top"
+        ? "linear-gradient(to bottom, black, transparent)"
+        : "linear-gradient(to top, black, transparent)";
+    return (_jsxs("div", { ref: ref, "data-slot": "progressive-blur", "aria-hidden": "true", className: cn(progressiveBlurVariants({ side }), className), style: { height }, ...props, children: [_jsx("div", { className: "absolute inset-0 backdrop-blur-[1px]", style: {
+                    maskImage: mask,
+                    WebkitMaskImage: mask,
+                } }), _jsx("div", { className: "absolute inset-0 backdrop-blur-[4px]", style: {
+                    maskImage: side === "top"
+                        ? "linear-gradient(to bottom, black 30%, transparent 70%)"
+                        : "linear-gradient(to top, black 30%, transparent 70%)",
+                    WebkitMaskImage: side === "top"
+                        ? "linear-gradient(to bottom, black 30%, transparent 70%)"
+                        : "linear-gradient(to top, black 30%, transparent 70%)",
+                } }), _jsx("div", { className: "absolute inset-0 backdrop-blur-[12px]", style: {
+                    maskImage: side === "top"
+                        ? "linear-gradient(to bottom, black 10%, transparent 45%)"
+                        : "linear-gradient(to top, black 10%, transparent 45%)",
+                    WebkitMaskImage: side === "top"
+                        ? "linear-gradient(to bottom, black 10%, transparent 45%)"
+                        : "linear-gradient(to top, black 10%, transparent 45%)",
+                } })] }));
+}
+ProgressiveBlur.displayName = "ProgressiveBlur";
+export { progressiveBlurVariants };
+//# sourceMappingURL=progressive-blur.js.map

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "react";
+import { type ChartSeries } from "./chart.js";
+export interface RadarChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: Record<string, unknown>[];
+    angleKey?: string;
+    series: ChartSeries[];
+}
+export declare function RadarChart({ data, angleKey, series, className, ...props }: RadarChartProps): import("react").JSX.Element;
+//# sourceMappingURL=radar-chart.d.ts.map

package/dist/components/radar-chart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart as RechartsRadarChart } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, chartSeriesConfig, } from "./chart.js";
+export function RadarChart({ data, angleKey = "metric", series, className, ...props }) {
+    const config = chartSeriesConfig(series);
+    return (_jsx("div", { "data-slot": "radar-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(RechartsRadarChart, { data: data, cx: "50%", cy: "50%", outerRadius: "70%", children: [_jsx(PolarGrid, {}), _jsx(PolarAngleAxis, { dataKey: angleKey }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), series.map((item) => (_jsx(Radar, { dataKey: item.key, stroke: `var(--color-${item.key})`, fill: `var(--color-${item.key})`, fillOpacity: 0.25 }, item.key)))] }) }) }));
+}
+//# sourceMappingURL=radar-chart.js.map

package/dist/components/radio-group.d.ts

@@ -0,0 +1,4 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const RadioGroup = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(RadioGroupPrimitive.Root, { ref: ref, "data-slot": "radio-group", className: cn("grid gap-2", className), ...props }));
+});
+RadioGroup.displayName = "RadioGroup";
+export const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, "data-slot": "radio-group-item", className: cn("aspect-square size-4 rounded-full border border-border bg-surface-inset text-primary shadow-xs outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:opacity-50 disabled:pointer-events-none data-[state=checked]:border-primary aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "size-2 fill-primary text-primary" }) }) }));
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+//# sourceMappingURL=radio-group.js.map

package/dist/components/rating.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from "class-variance-authority";
+declare const ratingVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface RatingProps extends VariantProps<typeof ratingVariants> {
+    /** Controlled value. Pair with `onValueChange`. */
+    value?: number;
+    /** Initial value for uncontrolled usage. Defaults to `0`. */
+    defaultValue?: number;
+    /** Called with the new value whenever the rating changes. */
+    onValueChange?: (value: number) => void;
+    /** Number of stars. Defaults to `5`. */
+    max?: number;
+    /** Renders display-only with no interaction. Defaults to `false`. */
+    readOnly?: boolean;
+    /** Allows half-star (0.5) granularity. Defaults to `false`. */
+    allowHalf?: boolean;
+    /** Star size preset. Defaults to `"md"`. */
+    size?: "sm" | "md" | "lg";
+    /** Accessible name for the rating when there is no visible label. */
+    "aria-label"?: string;
+    /** ID of an element labelling the rating. */
+    "aria-labelledby"?: string;
+    /** Extra classes for the wrapper element. */
+    className?: string;
+}
+export declare const Rating: import("react").ForwardRefExoticComponent<RatingProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=rating.d.ts.map

package/dist/components/rating.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Star } from "lucide-react";
+import { forwardRef, useCallback, useId, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const ratingVariants = cva("inline-flex items-center", {
+    variants: {
+        size: {
+            sm: "gap-0.5 [&_svg]:size-3.5",
+            md: "gap-1 [&_svg]:size-5",
+            lg: "gap-1.5 [&_svg]:size-7",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/** One star: an empty outline with a clipped, filled overlay sized to `fill`. */
+function StarIcon({ fill }) {
+    return (_jsxs("span", { className: "relative inline-flex shrink-0", "data-slot": "rating-star", children: [_jsx(Star, { "aria-hidden": "true", className: "text-fg-muted transition-colors duration-150 ease-[var(--ease-out-quart)]" }), _jsx("span", { className: "absolute inset-0 overflow-hidden", 
+                // Clip the filled overlay to the fill fraction (0, 0.5, or 1). The
+                // outline underneath shows through for the unfilled remainder.
+                style: { width: `${clamp(fill, 0, 1) * 100}%` }, children: _jsx(Star, { "aria-hidden": "true", className: "fill-warning text-warning transition-[color,transform] duration-150 ease-[var(--ease-out-quart)]" }) })] }));
+}
+export const Rating = forwardRef(({ value: valueProp, defaultValue = 0, onValueChange, max = 5, readOnly = false, allowHalf = false, size = "md", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }, ref) => {
+    const isControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = clamp(isControlled ? valueProp : uncontrolledValue, 0, max);
+    // Hover preview overrides the displayed value while pointing at the stars
+    // (interactive only); `null` means "show the committed value".
+    const [hoverValue, setHoverValue] = useState(null);
+    const interactive = !readOnly;
+    const step = allowHalf ? 0.5 : 1;
+    const labelId = useId();
+    const commit = useCallback((next) => {
+        const clamped = clamp(next, 0, max);
+        if (!isControlled)
+            setUncontrolledValue(clamped);
+        onValueChange?.(clamped);
+    }, [isControlled, max, onValueChange]);
+    // Resolve the value a pointer event targets: the star's 1-based index, or
+    // its half when `allowHalf` and the pointer sits on the star's left edge.
+    // Typed as MouseEvent so both onClick and onPointerMove (a PointerEvent,
+    // which extends MouseEvent) can share it.
+    const valueFromPointer = useCallback((event, index) => {
+        if (!allowHalf)
+            return index + 1;
+        const { left, width } = event.currentTarget.getBoundingClientRect();
+        const isLeftHalf = event.clientX - left < width / 2;
+        return isLeftHalf ? index + 0.5 : index + 1;
+    }, [allowHalf]);
+    const handleKeyDown = useCallback((event) => {
+        if (!interactive)
+            return;
+        let next = null;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = value + step;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = value - step;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = max;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        commit(clamp(next, 0, max));
+    }, [interactive, value, step, max, commit]);
+    // What each star renders: hover preview when present, else the value.
+    const displayValue = hoverValue ?? value;
+    const valueText = `${value} out of ${max}`;
+    const stars = Array.from({ length: max }, (_, index) => {
+        const fill = clamp(displayValue - index, 0, 1);
+        if (!interactive) {
+            // biome-ignore lint/suspicious/noArrayIndexKey: stars are positional and fixed in count
+            return _jsx(StarIcon, { fill: fill }, index);
+        }
+        return (_jsx("span", { "aria-hidden": "true", "data-slot": "rating-item", className: "inline-flex cursor-pointer transition-transform duration-150 ease-[var(--ease-out-quart)] hover:scale-110", onClick: (event) => commit(valueFromPointer(event, index)), onPointerMove: (event) => setHoverValue(valueFromPointer(event, index)), children: _jsx(StarIcon, { fill: fill }) }, index));
+    });
+    return (_jsxs("div", { ref: ref, "data-slot": "rating", role: "slider", tabIndex: interactive ? 0 : -1, "aria-label": ariaLabelledby ? undefined : ariaLabel, "aria-labelledby": ariaLabelledby ?? (ariaLabel ? undefined : labelId), "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": valueText, "aria-readonly": readOnly || undefined, "data-readonly": readOnly ? "" : undefined, className: cn(ratingVariants({ size }), interactive &&
+            "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base rounded-md", className), onKeyDown: handleKeyDown, onPointerLeave: interactive ? () => setHoverValue(null) : undefined, ...props, children: [!ariaLabel && !ariaLabelledby ? (_jsx("span", { id: labelId, className: "sr-only", children: "Rating" })) : null, stars] }));
+});
+Rating.displayName = "Rating";
+//# sourceMappingURL=rating.js.map

package/dist/components/resizable.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentProps } from "react";
+import { PanelResizeHandle as ResizablePrimitiveHandle, PanelGroup as ResizablePrimitivePanelGroup } from "react-resizable-panels";
+/**
+ * Resizable layout primitives — a thin, themed wrapper over
+ * [`react-resizable-panels`](https://github.com/bvaughn/react-resizable-panels).
+ *
+ * The API mirrors shadcn's `resizable` so existing muscle memory carries over,
+ * but every surface wears Cronus design tokens and a `data-slot` hook. Compose
+ * {@link ResizablePanelGroup} → {@link ResizablePanel} → {@link ResizableHandle}.
+ * The group `direction` drives both axes (`"horizontal"` / `"vertical"`); the
+ * handle reads it back off `[data-panel-group-direction]` to orient itself.
+ *
+ * Imperative refs are forwarded by the underlying library (the group accepts an
+ * `ImperativePanelGroupHandle`, each panel an `ImperativePanelHandle`) — pass a
+ * `ref` straight through and it lands on the primitive unchanged.
+ */
+export declare function ResizablePanelGroup({ className, ...props }: ComponentProps<typeof ResizablePrimitivePanelGroup>): import("react").JSX.Element;
+export declare namespace ResizablePanelGroup {
+    var displayName: string;
+}
+/**
+ * A single resizable region. Re-exports the underlying `Panel` so the full
+ * imperative API (`defaultSize`, `minSize`, `collapsible`, `onResize`, the
+ * `ImperativePanelHandle` ref, …) is available unchanged.
+ */
+export declare const ResizablePanel: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSelectElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+    className?: string | undefined;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: import("react-resizable-panels").PanelOnCollapse | undefined;
+    onExpand?: import("react-resizable-panels").PanelOnExpand | undefined;
+    onResize?: import("react-resizable-panels").PanelOnResize | undefined;
+    order?: number | undefined;
+    style?: object | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("react-resizable-panels").ImperativePanelHandle>>;
+export interface ResizableHandleProps extends ComponentProps<typeof ResizablePrimitiveHandle> {
+    /** Render a centered grip affordance on the divider. Defaults to `false`. */
+    withHandle?: boolean;
+}
+/**
+ * The draggable divider between two panels. Renders a hairline `bg-border`
+ * track that brightens to `ring-ring` on hover/keyboard focus, flips its
+ * geometry for vertical groups, and — when `withHandle` is set — hosts a small
+ * rounded grip with a {@link GripVertical} glyph for a clearer drag target.
+ */
+export declare function ResizableHandle({ withHandle, className, id: idFromProps, ...props }: ResizableHandleProps): import("react").JSX.Element;
+export declare namespace ResizableHandle {
+    var displayName: string;
+}
+//# sourceMappingURL=resizable.d.ts.map

package/dist/components/resizable.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GripVertical } from "lucide-react";
+import { useId, useLayoutEffect } from "react";
+import { PanelResizeHandle as ResizablePrimitiveHandle, Panel as ResizablePrimitivePanel, PanelGroup as ResizablePrimitivePanelGroup, } from "react-resizable-panels";
+import { cn } from "../lib/cn.js";
+const VALUE_ATTRS = ["aria-valuenow", "aria-valuemin", "aria-valuemax"];
+function ensureSplitterValues(el) {
+    if (!el.getAttribute("aria-valuenow"))
+        el.setAttribute("aria-valuenow", "50");
+    if (!el.getAttribute("aria-valuemin"))
+        el.setAttribute("aria-valuemin", "0");
+    if (!el.getAttribute("aria-valuemax"))
+        el.setAttribute("aria-valuemax", "100");
+}
+/**
+ * Resizable layout primitives — a thin, themed wrapper over
+ * [`react-resizable-panels`](https://github.com/bvaughn/react-resizable-panels).
+ *
+ * The API mirrors shadcn's `resizable` so existing muscle memory carries over,
+ * but every surface wears Cronus design tokens and a `data-slot` hook. Compose
+ * {@link ResizablePanelGroup} → {@link ResizablePanel} → {@link ResizableHandle}.
+ * The group `direction` drives both axes (`"horizontal"` / `"vertical"`); the
+ * handle reads it back off `[data-panel-group-direction]` to orient itself.
+ *
+ * Imperative refs are forwarded by the underlying library (the group accepts an
+ * `ImperativePanelGroupHandle`, each panel an `ImperativePanelHandle`) — pass a
+ * `ref` straight through and it lands on the primitive unchanged.
+ */
+export function ResizablePanelGroup({ className, ...props }) {
+    return (_jsx(ResizablePrimitivePanelGroup, { "data-slot": "resizable-panel-group", className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className), ...props }));
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+/**
+ * A single resizable region. Re-exports the underlying `Panel` so the full
+ * imperative API (`defaultSize`, `minSize`, `collapsible`, `onResize`, the
+ * `ImperativePanelHandle` ref, …) is available unchanged.
+ */
+export const ResizablePanel = ResizablePrimitivePanel;
+/**
+ * The draggable divider between two panels. Renders a hairline `bg-border`
+ * track that brightens to `ring-ring` on hover/keyboard focus, flips its
+ * geometry for vertical groups, and — when `withHandle` is set — hosts a small
+ * rounded grip with a {@link GripVertical} glyph for a clearer drag target.
+ */
+export function ResizableHandle({ withHandle = false, className, id: idFromProps, ...props }) {
+    const generatedId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const handleId = idFromProps ?? `cronus-rh-${generatedId}`;
+    // react-resizable-panels paints role="separator" immediately but only writes
+    // aria-valuenow after it measures layout — and its effect cleanup removes
+    // the attributes between updates. Keep a numeric value on the splitter so
+    // axe (and AT) never see a separator without aria-valuenow.
+    useLayoutEffect(() => {
+        const el = document.querySelector(`[data-panel-resize-handle-id="${CSS.escape(handleId)}"]`);
+        if (!el)
+            return;
+        ensureSplitterValues(el);
+        const mo = new MutationObserver(() => ensureSplitterValues(el));
+        mo.observe(el, { attributes: true, attributeFilter: [...VALUE_ATTRS] });
+        return () => mo.disconnect();
+    }, [handleId]);
+    return (_jsx(ResizablePrimitiveHandle, { id: handleId, "data-slot": "resizable-handle", className: cn(
+        // Base divider: a 1px line that owns a small hit area via flex centering.
+        "relative flex w-px items-center justify-center bg-border", "transition-colors duration-150 ease-[var(--ease-out-quart)]", 
+        // The actual interactive band straddles the line so it is easy to grab.
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", 
+        // Highlight on hover + keyboard focus with the focus-ring colour.
+        "hover:bg-ring focus-visible:bg-ring", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", "data-[resize-handle-state=drag]:bg-ring", 
+        // Vertical groups: rotate the geometry (full width, 1px tall, grip turned).
+        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full", "data-[panel-group-direction=vertical]:after:inset-x-0 data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0", "[&[data-panel-group-direction=vertical]>div]:rotate-90", className), ...props, children: withHandle ? (_jsx("div", { "data-slot": "resizable-handle-grip", "aria-hidden": "true", className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border border-border bg-surface-floating text-fg-tertiary shadow-xs", children: _jsx(GripVertical, { className: "size-2.5" }) })) : null }));
+}
+ResizableHandle.displayName = "ResizableHandle";
+//# sourceMappingURL=resizable.js.map

package/dist/components/retro-grid.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface RetroGridProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Seconds for one floor-scroll cycle.
+     * @default 8
+     */
+    duration?: number;
+    /**
+     * Perspective tilt of the floor, in degrees.
+     * @default 60
+     */
+    angle?: number;
+}
+/**
+ * A receding perspective grid floor — the synthwave stage behind a hero.
+ * Scrolls slowly toward the horizon and is fully suppressed under
+ * `prefers-reduced-motion: reduce` (the floor still renders, it just stops
+ * moving).
+ */
+export declare function RetroGrid({ ref, className, children, duration, angle, style, ...props }: RetroGridProps): import("react").JSX.Element;
+export declare namespace RetroGrid {
+    var displayName: string;
+}
+//# sourceMappingURL=retro-grid.d.ts.map

package/dist/components/retro-grid.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const RETRO_KEYFRAMES = "@keyframes cronus-retro-grid{from{transform:translateY(0)}to{transform:translateY(var(--retro-cell,48px))}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A receding perspective grid floor — the synthwave stage behind a hero.
+ * Scrolls slowly toward the horizon and is fully suppressed under
+ * `prefers-reduced-motion: reduce` (the floor still renders, it just stops
+ * moving).
+ */
+export function RetroGrid({ ref, className, children, duration = 8, angle = 60, style, ...props }) {
+    const cycle = Math.max(1, finiteOr(duration, 8));
+    const tilt = finiteOr(angle, 60);
+    const gridStyle = {
+        "--retro-duration": `${cycle}s`,
+        perspective: "240px",
+    };
+    return (_jsxs("div", { ref: ref, "data-slot": "retro-grid", className: cn("relative overflow-hidden", className), style: { ...gridStyle, ...style }, ...props, children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_20%,black_70%,transparent)]", children: [_jsx("style", { children: RETRO_KEYFRAMES }), _jsx("div", { className: "absolute inset-x-0 -bottom-1/2 h-[200%] origin-[50%_0%] motion-reduce:[animation-name:none]", style: { transform: `rotateX(${tilt}deg)` }, children: _jsx("div", { className: "absolute inset-0 [animation-duration:var(--retro-duration)] [animation-iteration-count:infinite] [animation-name:cronus-retro-grid] [animation-timing-function:linear] motion-reduce:[animation-name:none]", style: {
+                                backgroundImage: "linear-gradient(to right, color-mix(in oklch, var(--cronus-border) 70%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--cronus-border) 70%, transparent) 1px, transparent 1px)",
+                                backgroundSize: "48px 48px",
+                            } }) })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+RetroGrid.displayName = "RetroGrid";
+//# sourceMappingURL=retro-grid.js.map

package/dist/components/reveal.d.ts

@@ -0,0 +1,9 @@
+export interface RevealProps extends React.HTMLAttributes<HTMLDivElement> {
+    delay?: number;
+    once?: boolean;
+}
+export declare const Reveal: {
+    ({ className, delay, once, children, onDrag, onDragStart, onDragEnd, onAnimationStart, ...props }: RevealProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=reveal.d.ts.map

package/dist/components/reveal.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useInView } from "motion/react";
+import { useRef } from "react";
+import { fadeInUp } from "./motion-presets.js";
+export const Reveal = ({ className, delay, once, children, 
+// omit handlers that clash with motion's prop signatures
+onDrag, onDragStart, onDragEnd, onAnimationStart, ...props }) => {
+    const ref = useRef(null);
+    const inView = useInView(ref, { once: once ?? true, margin: "-80px" });
+    return (_jsx(motion.div, { ref: ref, "data-slot": "reveal", initial: "hidden", animate: inView ? "visible" : "hidden", variants: fadeInUp, transition: { delay }, className: className, ...props, children: children }));
+};
+Reveal.displayName = "Reveal";
+//# sourceMappingURL=reveal.js.map

package/dist/components/rich-text-editor.d.ts

@@ -0,0 +1,28 @@
+export interface RichTextEditorProps {
+    /** Controlled HTML value. When provided, external changes are synced into the editor. */
+    value?: string;
+    /** Uncontrolled initial HTML content. Ignored once the editor has mounted. */
+    defaultValue?: string;
+    /** Called with the serialized HTML whenever the document changes. */
+    onChange?: (html: string) => void;
+    /** Placeholder shown while the document is empty. */
+    placeholder?: string;
+    /** Whether the content is editable. Defaults to `true`. */
+    editable?: boolean;
+    /** Extra classes for the editor shell (toolbar + content wrapper). */
+    className?: string;
+    /** Accessible label for the editable region. */
+    "aria-label"?: string;
+}
+/**
+ * A Tiptap-based WYSIWYG editor with a Cronus-styled formatting toolbar.
+ *
+ * SSR: `immediatelyRender: false` keeps Tiptap from rendering on the server, so
+ * Next.js (and other SSR setups) hydrate without a mismatch. Until the editor
+ * mounts on the client, the toolbar renders disabled.
+ *
+ * Placeholder: implemented with a token-styled overlay driven by the editor's
+ * empty state (no extra Tiptap extension, no new dependency).
+ */
+export declare const RichTextEditor: import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=rich-text-editor.d.ts.map

package/dist/components/rich-text-editor.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Bold, Code, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Minus, Quote, Redo2, SquareCode, Strikethrough, Undo2, } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Separator } from "./separator.js";
+import { Toggle } from "./toggle.js";
+function ToolbarButton({ label, icon, onClick, active = false, disabled = false, }) {
+    return (_jsx(Toggle, { type: "button", size: "sm", className: "size-8 px-0", "aria-label": label, pressed: active, disabled: disabled, 
+        // Prevent the editor from losing its selection on mousedown so commands
+        // act on the current range rather than a collapsed one.
+        onMouseDown: (event) => event.preventDefault(), onPressedChange: onClick, children: icon }));
+}
+/** The formatting toolbar. Rendered disabled until the editor instance exists. */
+function Toolbar({ editor }) {
+    // Re-render the toolbar on every editor transaction so active/disabled states
+    // stay in sync with the current selection.
+    const [, forceRender] = useState(0);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const update = () => forceRender((n) => n + 1);
+        editor.on("transaction", update);
+        return () => {
+            editor.off("transaction", update);
+        };
+    }, [editor]);
+    const ready = editor?.isEditable ?? false;
+    return (_jsxs("div", { "data-slot": "rich-text-editor-toolbar", role: "toolbar", "aria-label": "Text formatting", "aria-controls": "rich-text-editor-content", className: "flex flex-wrap items-center gap-0.5 border-border border-b bg-surface-overlay/40 p-1.5", children: [_jsx(ToolbarButton, { label: "Bold", icon: _jsx(Bold, {}), active: !!editor?.isActive("bold"), disabled: !ready || !editor?.can().chain().focus().toggleBold().run(), onClick: () => editor?.chain().focus().toggleBold().run() }), _jsx(ToolbarButton, { label: "Italic", icon: _jsx(Italic, {}), active: !!editor?.isActive("italic"), disabled: !ready || !editor?.can().chain().focus().toggleItalic().run(), onClick: () => editor?.chain().focus().toggleItalic().run() }), _jsx(ToolbarButton, { label: "Strikethrough", icon: _jsx(Strikethrough, {}), active: !!editor?.isActive("strike"), disabled: !ready || !editor?.can().chain().focus().toggleStrike().run(), onClick: () => editor?.chain().focus().toggleStrike().run() }), _jsx(ToolbarButton, { label: "Inline code", icon: _jsx(Code, {}), active: !!editor?.isActive("code"), disabled: !ready || !editor?.can().chain().focus().toggleCode().run(), onClick: () => editor?.chain().focus().toggleCode().run() }), _jsx(Separator, { orientation: "vertical", className: "mx-1 h-6" }), _jsx(ToolbarButton, { label: "Heading 1", icon: _jsx(Heading1, {}), active: !!editor?.isActive("heading", { level: 1 }), disabled: !ready, onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run() }), _jsx(ToolbarButton, { label: "Heading 2", icon: _jsx(Heading2, {}), active: !!editor?.isActive("heading", { level: 2 }), disabled: !ready, onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run() }), _jsx(ToolbarButton, { label: "Heading 3", icon: _jsx(Heading3, {}), active: !!editor?.isActive("heading", { level: 3 }), disabled: !ready, onClick: () => editor?.chain().focus().toggleHeading({ level: 3 }).run() }), _jsx(Separator, { orientation: "vertical", className: "mx-1 h-6" }), _jsx(ToolbarButton, { label: "Bullet list", icon: _jsx(List, {}), active: !!editor?.isActive("bulletList"), disabled: !ready, onClick: () => editor?.chain().focus().toggleBulletList().run() }), _jsx(ToolbarButton, { label: "Ordered list", icon: _jsx(ListOrdered, {}), active: !!editor?.isActive("orderedList"), disabled: !ready, onClick: () => editor?.chain().focus().toggleOrderedList().run() }), _jsx(ToolbarButton, { label: "Blockquote", icon: _jsx(Quote, {}), active: !!editor?.isActive("blockquote"), disabled: !ready, onClick: () => editor?.chain().focus().toggleBlockquote().run() }), _jsx(ToolbarButton, { label: "Code block", icon: _jsx(SquareCode, {}), active: !!editor?.isActive("codeBlock"), disabled: !ready, onClick: () => editor?.chain().focus().toggleCodeBlock().run() }), _jsx(ToolbarButton, { label: "Horizontal rule", icon: _jsx(Minus, {}), disabled: !ready, onClick: () => editor?.chain().focus().setHorizontalRule().run() }), _jsx(Separator, { orientation: "vertical", className: "mx-1 h-6" }), _jsx(ToolbarButton, { label: "Undo", icon: _jsx(Undo2, {}), disabled: !ready || !editor?.can().undo(), onClick: () => editor?.chain().focus().undo().run() }), _jsx(ToolbarButton, { label: "Redo", icon: _jsx(Redo2, {}), disabled: !ready || !editor?.can().redo(), onClick: () => editor?.chain().focus().redo().run() })] }));
+}
+/**
+ * A Tiptap-based WYSIWYG editor with a Cronus-styled formatting toolbar.
+ *
+ * SSR: `immediatelyRender: false` keeps Tiptap from rendering on the server, so
+ * Next.js (and other SSR setups) hydrate without a mismatch. Until the editor
+ * mounts on the client, the toolbar renders disabled.
+ *
+ * Placeholder: implemented with a token-styled overlay driven by the editor's
+ * empty state (no extra Tiptap extension, no new dependency).
+ */
+export const RichTextEditor = forwardRef(({ value, defaultValue, onChange, placeholder, editable = true, className, "aria-label": ariaLabel, }, ref) => {
+    const handleUpdate = useCallback(({ editor }) => {
+        onChange?.(editor.getHTML());
+    }, [onChange]);
+    const editor = useEditor({
+        // Critical for SSR: do not render the editor on the server.
+        immediatelyRender: false,
+        extensions: [StarterKit],
+        content: value ?? defaultValue ?? "",
+        editable,
+        onUpdate: handleUpdate,
+        editorProps: {
+            attributes: {
+                id: "rich-text-editor-content",
+                role: "textbox",
+                "aria-multiline": "true",
+                ...(ariaLabel ? { "aria-label": ariaLabel } : {}),
+                class: cn("min-h-40 w-full px-4 py-3 text-fg outline-none", "[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:font-display [&_h1]:font-semibold [&_h1]:text-2xl", "[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-xl", "[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:font-display [&_h3]:font-semibold [&_h3]:text-lg", "[&_p]:my-2 [&_p:first-child]:mt-0", "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6", "[&_li]:my-0.5", "[&_a]:text-primary-strong [&_a]:underline [&_a]:underline-offset-4", "[&_blockquote]:my-3 [&_blockquote]:border-border [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-fg-secondary [&_blockquote]:italic", "[&_code]:rounded [&_code]:bg-surface-overlay [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-sm", "[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-surface-overlay [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-sm", "[&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_hr]:my-4 [&_hr]:border-border"),
+            },
+        },
+    });
+    // Sync external (controlled) value changes into the editor without firing
+    // onChange back out (emitUpdate: false avoids an update→onChange loop).
+    useEffect(() => {
+        if (!editor || value === undefined)
+            return;
+        if (value !== editor.getHTML()) {
+            editor.commands.setContent(value, { emitUpdate: false });
+        }
+    }, [editor, value]);
+    // Keep the editable flag in sync if it changes after mount.
+    useEffect(() => {
+        if (editor && editor.isEditable !== editable) {
+            editor.setEditable(editable);
+        }
+    }, [editor, editable]);
+    const showPlaceholder = Boolean(placeholder) && (editor?.isEmpty ?? false);
+    return (_jsxs("div", { ref: ref, "data-slot": "rich-text-editor", className: cn("flex w-full min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-surface-base text-fg", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-surface-base", className), children: [_jsx(Toolbar, { editor: editor }), _jsxs("div", { "data-slot": "rich-text-editor-content-wrapper", className: "relative", children: [showPlaceholder ? (_jsx("p", { "aria-hidden": "true", "data-slot": "rich-text-editor-placeholder", className: "pointer-events-none absolute top-3 left-4 select-none text-fg-muted", children: placeholder })) : null, _jsx(EditorContent, { editor: editor })] })] }));
+});
+RichTextEditor.displayName = "RichTextEditor";
+//# sourceMappingURL=rich-text-editor.js.map

package/dist/components/ring-chart.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+import { type ChartSeries } from "./chart.js";
+export interface RingChartItem {
+    key: string;
+    value: number;
+}
+export interface RingChartProps extends HTMLAttributes<HTMLDivElement> {
+    data: RingChartItem[];
+    series: ChartSeries[];
+    centerLabel?: string;
+}
+export declare function RingChart({ data, series, centerLabel, className, ...props }: RingChartProps): import("react").JSX.Element;
+//# sourceMappingURL=ring-chart.d.ts.map

package/dist/components/ring-chart.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cell, Label, Pie, PieChart } from "recharts";
+import { cn } from "../lib/cn.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, chartSeriesConfig, } from "./chart.js";
+const TOTAL = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+export function RingChart({ data, series, centerLabel = "Total", className, ...props }) {
+    const config = chartSeriesConfig(series);
+    const rows = data.map((item) => ({ ...item, fill: `var(--color-${item.key})` }));
+    const sum = data.reduce((acc, item) => acc + item.value, 0);
+    return (_jsx("div", { "data-slot": "ring-chart", className: cn("h-64 w-full", className), ...props, children: _jsx(ChartContainer, { config: config, className: "h-full w-full", children: _jsxs(PieChart, { accessibilityLayer: true, children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsxs(Pie, { data: rows, dataKey: "value", nameKey: "key", innerRadius: 64, outerRadius: 98, paddingAngle: 3, strokeWidth: 0, children: [rows.map((item) => (_jsx(Cell, { fill: item.fill }, item.key))), _jsx(Label, { content: ({ viewBox }) => {
+                                    if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox))
+                                        return null;
+                                    return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", dominantBaseline: "middle", children: [_jsx("tspan", { x: viewBox.cx, y: viewBox.cy, className: "fill-fg text-2xl font-medium", children: TOTAL.format(sum) }), _jsx("tspan", { x: viewBox.cx, y: (viewBox.cy ?? 0) + 20, className: "fill-fg-tertiary text-xs", children: centerLabel })] }));
+                                } })] })] }) }) }));
+}
+//# sourceMappingURL=ring-chart.js.map