@cronus-ui/ui 0.6.0

package/dist/components/image-zoom.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ZoomIn } from "lucide-react";
+import { forwardRef, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const imageZoomVariants = cva(
+// Single-style base (no variant axes yet); the exported const still keeps the
+// frame styling centralized and the `<name>Variants` contract intact.
+"group/image-zoom relative block w-full cursor-zoom-in select-none overflow-hidden rounded-xl border border-border bg-surface-inset outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:pointer-events-none disabled:opacity-50 data-[state=zoomed]:cursor-zoom-out");
+const DEFAULT_LABELS = {
+    zoom: "Zoom image",
+};
+function clampPercent(value) {
+    return Math.min(100, Math.max(0, value));
+}
+/**
+ * Inline hover/press zoom for product and detail imagery. Fine pointers zoom
+ * while hovering and the pan follows the cursor via transform-origin tracking;
+ * touch, pen, and keyboard (Enter/Space) toggle a sticky zoom centered on the
+ * last point (or the center). The root is a toggle button whose `aria-pressed`
+ * reflects the zoom state and whose accessible name folds in the image `alt`
+ * (a button's label would otherwise swallow it). The zoom state is
+ * uncontrolled by default (`defaultZoomed`) or controlled via `zoomed` +
+ * `onZoomChange`.
+ */
+export const ImageZoom = forwardRef(({ src, alt = "", zoom = 2, disabled = false, showIndicator = true, labels, zoomed: zoomedProp, defaultZoomed = false, onZoomChange, className, children, onClick, onKeyDown, onPointerDown, onPointerMove, onPointerLeave, ...props }, ref) => {
+    const isControlled = zoomedProp !== undefined;
+    const [uncontrolledZoomed, setUncontrolledZoomed] = useState(defaultZoomed);
+    const zoomed = isControlled ? zoomedProp : uncontrolledZoomed;
+    // transform-origin of the zoom pan, as percentages of the frame.
+    const [origin, setOrigin] = useState({ x: 50, y: 50 });
+    // Pointer type of the press behind the upcoming click. Only consulted
+    // for pointer-driven clicks (detail > 0), which are always preceded by
+    // their own pointerdown — so an abandoned press (drag off, pointercancel)
+    // can never leave a stale value that suppresses keyboard activation.
+    const pressPointerTypeRef = useRef("");
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    // Buttons have children-presentational semantics and `aria-label`
+    // overrides name-from-content, so a meaningful `alt` would never reach
+    // assistive tech unless it is composed into the accessible name.
+    const accessibleName = alt ? `${mergedLabels.zoom}: ${alt}` : mergedLabels.zoom;
+    // Non-finite zoom (NaN/Infinity) falls back to the default instead of
+    // reaching `scale()` as an invalid value.
+    const scale = Math.max(1, Number.isFinite(zoom) ? zoom : 2);
+    const applyZoom = (next) => {
+        if (next === zoomed)
+            return;
+        if (!isControlled)
+            setUncontrolledZoomed(next);
+        onZoomChange?.(next);
+    };
+    /** Moves the transform-origin to the pointer, clamped inside the frame. */
+    const updateOrigin = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        setOrigin({
+            x: clampPercent(((event.clientX - rect.left) / rect.width) * 100),
+            y: clampPercent(((event.clientY - rect.top) / rect.height) * 100),
+        });
+    };
+    const handlePointerMove = (event) => {
+        onPointerMove?.(event);
+        if (disabled)
+            return;
+        updateOrigin(event);
+        // Fine pointers zoom on hover, so the pan simply follows the cursor.
+        if (event.pointerType === "mouse")
+            applyZoom(true);
+    };
+    const handlePointerLeave = (event) => {
+        onPointerLeave?.(event);
+        if (disabled)
+            return;
+        // Hover-driven zoom ends with the hover; a toggled (touch/keyboard)
+        // zoom sticks until the next activation.
+        if (event.pointerType === "mouse")
+            applyZoom(false);
+    };
+    const handlePointerDown = (event) => {
+        onPointerDown?.(event);
+        if (disabled)
+            return;
+        pressPointerTypeRef.current = event.pointerType;
+        updateOrigin(event);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (disabled)
+            return;
+        const pressPointerType = pressPointerTypeRef.current;
+        pressPointerTypeRef.current = "";
+        // Mouse zoom is hover-driven — a mouse click toggling here would fight
+        // the hover state. Touch, pen, and keyboard clicks toggle at the last
+        // recorded point (the center when none was recorded). Keyboard clicks
+        // fire with `detail === 0`, so they always toggle even when a mouse
+        // press was abandoned without producing a click.
+        if (event.detail !== 0 && pressPointerType === "mouse")
+            return;
+        applyZoom(!zoomed);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (disabled)
+            return;
+        if (event.key !== "Escape" || !zoomed)
+            return;
+        // Scope Escape to the active zoom so an enclosing dialog/lightbox is not
+        // dismissed by the same press; an idle Escape passes through untouched.
+        event.preventDefault();
+        event.stopPropagation();
+        applyZoom(false);
+    };
+    return (_jsxs("button", { ref: ref, type: "button", "data-slot": "image-zoom", "data-state": zoomed ? "zoomed" : "idle", "aria-pressed": zoomed, "aria-label": accessibleName, disabled: disabled, className: cn(imageZoomVariants(), className), onClick: handleClick, onKeyDown: handleKeyDown, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave, ...props, children: [_jsx("span", { "data-slot": "image-zoom-content", 
+                // will-change promotion is scoped to hover/zoom so idle instances
+                // (e.g. a product grid full of frames) don't hold compositor layers.
+                className: "pointer-events-none block size-full group-hover/image-zoom:will-change-transform group-data-[state=zoomed]/image-zoom:will-change-transform motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-[var(--ease-out-quart)] [&_img]:block [&_img]:size-full [&_img]:select-none [&_img]:object-cover", style: {
+                    transform: `scale(${zoomed ? scale : 1})`,
+                    transformOrigin: `${origin.x}% ${origin.y}%`,
+                }, children: children ?? (src ? _jsx("img", { src: src, alt: alt, draggable: false }) : null) }), showIndicator ? (_jsx("span", { "aria-hidden": "true", "data-slot": "image-zoom-indicator", className: "pointer-events-none absolute end-2 bottom-2 inline-flex size-8 items-center justify-center rounded-full border border-border bg-surface-overlay/90 text-fg-secondary shadow-sm transition-opacity duration-200 group-data-[state=zoomed]/image-zoom:opacity-0 [&_svg]:size-4", children: _jsx(ZoomIn, { "aria-hidden": "true" }) })) : null] }));
+});
+ImageZoom.displayName = "ImageZoom";
+export { imageZoomVariants };
+//# sourceMappingURL=image-zoom.js.map

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

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+export interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const InputGroup: import("react").ForwardRefExoticComponent<InputGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface InputGroupAddonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Which side the addon flanks. Affects the divider edge. Defaults to "start". */
+    align?: "start" | "end";
+}
+export declare const InputGroupAddon: import("react").ForwardRefExoticComponent<InputGroupAddonProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/input-group.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const InputGroup = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "input-group", className: cn("flex h-10 w-full items-stretch overflow-hidden rounded-lg border border-border bg-surface-inset text-sm", "transition-[border-color,box-shadow] duration-150 ease-[var(--ease-out-quart)]", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-surface-base", "has-[input[aria-invalid=true]]:border-error has-[input[aria-invalid=true]]:ring-2 has-[input[aria-invalid=true]]:ring-error/30", "[&_input]:h-full [&_input]:rounded-none [&_input]:border-0 [&_input]:bg-transparent [&_input]:shadow-none", "[&_input]:ring-0 [&_input]:focus-visible:ring-0 [&_input]:focus-visible:ring-offset-0", className), ...props }));
+});
+InputGroup.displayName = "InputGroup";
+export const InputGroupAddon = forwardRef(({ className, align = "start", children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "input-group-addon", "data-align": align, className: cn("flex shrink-0 select-none items-center gap-1.5 whitespace-nowrap px-3 text-fg-tertiary", "[&_svg]:size-4 [&_svg]:shrink-0", align === "start" ? "border-r border-border" : "border-l border-border", className), ...props, children: children }));
+});
+InputGroupAddon.displayName = "InputGroupAddon";
+//# sourceMappingURL=input-group.js.map

package/dist/components/input-otp.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithoutRef, type HTMLAttributes } from "react";
+/**
+ * A segmented one-time-passcode field. The visible slots are decorative; a
+ * single hidden `<input autocomplete="one-time-code">` holds the real value and
+ * receives keyboard input.
+ *
+ * That input is the only labelable control, so it always needs an accessible
+ * name. Pass `aria-label` (or `aria-labelledby`) to describe the specific code
+ * being entered; when neither is provided it falls back to a generic
+ * `"One-time passcode"` so the field is never nameless.
+ */
+export declare const InputOTP: import("react").ForwardRefExoticComponent<ComponentPropsWithoutRef<import("react").ForwardRefExoticComponent<import("input-otp").OTPInputProps & import("react").RefAttributes<HTMLInputElement>>> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const InputOTPGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const InputOTPSlot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    index: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const InputOTPSeparator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=input-otp.d.ts.map

package/dist/components/input-otp.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { forwardRef, useContext, } from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A segmented one-time-passcode field. The visible slots are decorative; a
+ * single hidden `<input autocomplete="one-time-code">` holds the real value and
+ * receives keyboard input.
+ *
+ * That input is the only labelable control, so it always needs an accessible
+ * name. Pass `aria-label` (or `aria-labelledby`) to describe the specific code
+ * being entered; when neither is provided it falls back to a generic
+ * `"One-time passcode"` so the field is never nameless.
+ */
+export const InputOTP = forwardRef(({ className, containerClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
+    return (_jsx(OTPInput, { ref: ref, "data-slot": "input-otp", "aria-label": ariaLabelledBy ? undefined : (ariaLabel ?? "One-time passcode"), "aria-labelledby": ariaLabelledBy, containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props }));
+});
+InputOTP.displayName = "InputOTP";
+export const InputOTPGroup = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "input-otp-group", className: cn("flex items-center", className), ...props }));
+});
+InputOTPGroup.displayName = "InputOTPGroup";
+export const InputOTPSlot = forwardRef(({ index, className, ...props }, ref) => {
+    const inputOTPContext = useContext(OTPInputContext);
+    const slot = inputOTPContext?.slots[index];
+    const char = slot?.char;
+    const hasFakeCaret = slot?.hasFakeCaret;
+    const isActive = slot?.isActive;
+    return (_jsxs("div", { ref: ref, "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex h-10 w-10 items-center justify-center border-y border-r border-border text-sm transition-all first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px animate-caret-blink bg-fg duration-1000" }) }))] }));
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+export const InputOTPSeparator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "input-otp-separator", "aria-hidden": "true", className: cn("flex items-center text-fg-muted", className), ...props, children: _jsx(Minus, { className: "size-4" }) }));
+});
+InputOTPSeparator.displayName = "InputOTPSeparator";
+//# sourceMappingURL=input-otp.js.map

package/dist/components/input.d.ts

@@ -0,0 +1,6 @@
+import { type InputHTMLAttributes } from "react";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    invalid?: boolean;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+export const Input = forwardRef(({ className, invalid = false, "aria-invalid": ariaInvalid, ...props }, ref) => {
+    return (_jsx("input", { ref: ref, "data-slot": "input", "aria-invalid": invalid ? true : ariaInvalid, className: cn("flex h-10 w-full rounded-lg border border-border bg-surface-inset px-3 text-sm text-fg", "placeholder:text-fg-tertiary", "transition-[border-color,box-shadow] duration-150 ease-[var(--ease-out-quart)]", "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", "selection:bg-primary selection:text-primary-foreground", "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-fg", "aria-invalid:border-error aria-invalid:ring-2 aria-invalid:ring-error/30", invalid && "border-error focus-visible:ring-error focus-visible:ring-offset-surface-base", className), ...props }));
+});
+Input.displayName = "Input";
+//# sourceMappingURL=input.js.map

package/dist/components/json-viewer.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes } from "react";
+export interface JsonViewerProps extends HTMLAttributes<HTMLDivElement> {
+    /** The value to render. Objects and arrays become collapsible branches. */
+    data: unknown;
+    /**
+     * How many levels start expanded — a mount-time default, not a controlled
+     * value. Expansion state is uncontrolled per branch and seeded once when a
+     * branch first mounts, so later changes to this prop leave already-mounted
+     * branches untouched. The root value is depth 0, so the default of 1 shows
+     * the root's entries with every nested branch collapsed. Pass
+     * `Number.POSITIVE_INFINITY` to expand everything.
+     */
+    defaultExpandedDepth?: number;
+}
+/**
+ * A collapsible JSON tree viewer. Any `unknown` value renders as a recursive,
+ * monospaced tree: objects and arrays become branches with a real chevron
+ * `<button>` (`aria-expanded`, focus ring) and a muted child-count summary
+ * while collapsed; primitives are colored purely by semantic tokens (strings
+ * `text-success-strong`, numbers `text-info-strong` + `tabular-nums`, booleans
+ * `text-warning-strong`, null/undefined `text-fg-tertiary`), keys use
+ * `text-fg-secondary` and punctuation `text-fg-tertiary`, with `border-border`
+ * indent guides.
+ *
+ * Non-plain built-ins render faithfully instead of as empty objects: Date
+ * (ISO 8601), RegExp (literal), URL (href), and Error ("Name: message") are
+ * leaves with a dim type hint where the text alone is ambiguous, while Map
+ * and Set are branches — a `Map(n)`/`Set(n)` hint plus indexed `[key, value]`
+ * pairs (Map) or items (Set), exactly the shape their copied JSON takes.
+ *
+ * Expansion state lives per branch (seeded from `defaultExpandedDepth`), so
+ * toggling a node only re-renders its own subtree, and collapsed subtrees are
+ * not mounted at all. Every row reveals a clipboard button on hover or focus
+ * — string-like leaves copy their raw contents, everything else copies
+ * pretty-printed JSON, and branch payloads are serialized lazily on the first
+ * copy rather than during render. Both rendering and serialization are
+ * cycle-safe: values that reference their own ancestors render/serialize as a
+ * `"[Circular]"` token instead of recursing forever. Fully keyboard operable
+ * (chevrons and copy buttons are native buttons), reduced-motion safe, and
+ * SSR-safe (no DOM reads, no time- or random-dependent output).
+ */
+export declare const JsonViewer: import("react").ForwardRefExoticComponent<JsonViewerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=json-viewer.d.ts.map

package/dist/components/json-viewer.js

@@ -0,0 +1,313 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { forwardRef, useCallback, useMemo, useState, } from "react";
+import { flushSync } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { CopyButton } from "./copy-button.js";
+/**
+ * Built-ins that render as single leaf rows even though `typeof` calls them
+ * objects: they have no useful enumerable properties, so recursing into them
+ * would display — and copy — an empty `{}`.
+ */
+function isLeafObject(value) {
+    return (value instanceof Date ||
+        value instanceof RegExp ||
+        value instanceof URL ||
+        value instanceof Error);
+}
+function isBranchValue(value) {
+    return typeof value === "object" && value !== null && !isLeafObject(value);
+}
+/**
+ * The visible entries of a branch: index/value pairs for arrays and Sets,
+ * indexed `[key, value]` pair tuples for Maps (keys can be arbitrary values,
+ * so the pairs mirror the copied JSON exactly), and own enumerable
+ * string-keyed entries (insertion order) for objects.
+ */
+function branchEntries(value) {
+    if (Array.isArray(value)) {
+        return value.map((item, index) => [String(index), item]);
+    }
+    if (value instanceof Map) {
+        return [...value].map((pair, index) => [String(index), pair]);
+    }
+    if (value instanceof Set) {
+        return [...value].map((item, index) => [String(index), item]);
+    }
+    return Object.entries(value);
+}
+function branchKind(value) {
+    if (Array.isArray(value))
+        return "array";
+    if (value instanceof Map)
+        return "map";
+    if (value instanceof Set)
+        return "set";
+    return "object";
+}
+/** Collapsed-summary noun ([singular, plural]) per branch kind. */
+const BRANCH_NOUNS = {
+    array: ["item", "items"],
+    map: ["entry", "entries"],
+    set: ["item", "items"],
+    object: ["key", "keys"],
+};
+/**
+ * Rebuild `value` as a plain JSON-serializable clone. Built-ins convert to
+ * faithful forms instead of `{}`: Date → ISO 8601 string (invalid dates →
+ * null, matching `JSON.stringify`), RegExp → its literal source, URL → its
+ * href, Error → `"Name: message"`, Map → an array of `[key, value]` pairs,
+ * Set → an array of its items. Ancestors are tracked in a `WeakSet` that is
+ * entered before and left after each object, so genuine cycles become a
+ * `"[Circular]"` token while mere shared references (the same object
+ * appearing under two siblings) serialize normally. Bigints keep an `n`
+ * suffix instead of throwing.
+ */
+function toSerializable(value, ancestors) {
+    if (typeof value === "bigint")
+        return `${value}n`;
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? null : value.toISOString();
+    }
+    if (value instanceof RegExp || value instanceof Error)
+        return String(value);
+    if (value instanceof URL)
+        return value.href;
+    if (!isBranchValue(value))
+        return value;
+    if (ancestors.has(value))
+        return "[Circular]";
+    ancestors.add(value);
+    let clone;
+    if (Array.isArray(value)) {
+        clone = value.map((item) => toSerializable(item, ancestors));
+    }
+    else if (value instanceof Map) {
+        clone = [...value].map(([key, entry]) => [
+            toSerializable(key, ancestors),
+            toSerializable(entry, ancestors),
+        ]);
+    }
+    else if (value instanceof Set) {
+        clone = [...value].map((item) => toSerializable(item, ancestors));
+    }
+    else {
+        clone = Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, toSerializable(entry, ancestors)]));
+    }
+    ancestors.delete(value);
+    return clone;
+}
+/**
+ * Serialize any value for the copy button. Falls back to `String(value)` for
+ * values `JSON.stringify` cannot represent at the top level (undefined,
+ * functions, symbols).
+ */
+function stringifyValue(value) {
+    if (value === undefined)
+        return "undefined";
+    if (typeof value === "bigint")
+        return `${value}n`;
+    const json = JSON.stringify(toSerializable(value, new WeakSet()), null, 2);
+    return json ?? String(value);
+}
+/**
+ * Map a primitive to its display text + semantic color token.
+ *
+ * De-emphasized values (`null`, `undefined`, functions/symbols) use
+ * `fg-tertiary`, not `fg-muted`: they are meaningful data, and `fg-muted` fails
+ * AA contrast on the inset surface (see CONTRACT.md).
+ */
+function formatPrimitive(value) {
+    if (value === null)
+        return { text: "null", className: "text-fg-tertiary" };
+    if (value === undefined)
+        return { text: "undefined", className: "text-fg-tertiary" };
+    switch (typeof value) {
+        case "string":
+            // JSON.stringify supplies the quotes and escapes embedded ones.
+            // `text-*-strong` (the AA-tuned same-hue variants): the plain semantic
+            // colors read ~4.4:1 as small code text on the lightest light surfaces.
+            return { text: JSON.stringify(value), className: "text-success-strong" };
+        case "number":
+            return { text: String(value), className: "text-info-strong tabular-nums" };
+        case "bigint":
+            return { text: `${value}n`, className: "text-info-strong tabular-nums" };
+        case "boolean":
+            return { text: String(value), className: "text-warning-strong" };
+        default:
+            // Functions and symbols are not JSON; render a compact de-emphasized token.
+            return {
+                text: typeof value === "function" ? "ƒ ()" : String(value),
+                className: "text-fg-tertiary italic",
+            };
+    }
+}
+/**
+ * Display text, color token, and optional dim type hint for a leaf value —
+ * primitives plus the leaf-rendered built-ins (Date, RegExp, URL, Error).
+ */
+function formatLeaf(value) {
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime())
+            ? { text: "Invalid Date", className: "text-fg-tertiary italic", hint: "Date" }
+            : { text: value.toISOString(), className: "text-info-strong", hint: "Date" };
+    }
+    if (value instanceof RegExp) {
+        // The literal form (`/ab+c/gi`) is self-describing — no hint needed.
+        return { text: String(value), className: "text-success-strong" };
+    }
+    if (value instanceof URL) {
+        return { text: JSON.stringify(value.href), className: "text-success-strong", hint: "URL" };
+    }
+    if (value instanceof Error) {
+        // `String(error)` is "Name: message", so the name doubles as the hint.
+        return { text: String(value), className: "text-error-strong" };
+    }
+    return formatPrimitive(value);
+}
+/**
+ * Clipboard text for a leaf. Strings copy their raw contents and the
+ * string-like built-ins copy their faithful string form (Date → ISO 8601,
+ * URL → href, RegExp → literal, Error → `"Name: message"`) — the most useful
+ * shapes to paste; the remaining primitives copy their display text, which
+ * `String` produces directly without involving the tree serializer.
+ */
+function leafCopyText(value) {
+    if (typeof value === "string")
+        return value;
+    if (value instanceof Date) {
+        // Matches serialization: an invalid Date is `null` in JSON.
+        return Number.isNaN(value.getTime()) ? "null" : value.toISOString();
+    }
+    if (value instanceof RegExp || value instanceof Error)
+        return String(value);
+    if (value instanceof URL)
+        return value.href;
+    if (typeof value === "bigint")
+        return `${value}n`;
+    return String(value);
+}
+function copyLabelFor(name) {
+    return name === undefined ? "Copy value" : `Copy value of ${name}`;
+}
+/* ------------------------------------------------------------------ *
+ * Row building blocks
+ * ------------------------------------------------------------------ */
+/** Punctuation ({}, [], commas, colons) in the tertiary foreground token. */
+function Punct({ children }) {
+    return _jsx("span", { className: "text-fg-tertiary", children: children });
+}
+/** Dim type hint (`Date`, `URL`, `Map(2)`, …) rendered before a value. */
+function TypeHint({ children }) {
+    return (_jsx("span", { "data-slot": "json-viewer-hint", className: "text-fg-muted", children: `${children} ` }));
+}
+/** Chevron-width placeholder that keeps leaf rows aligned with branch rows. */
+function ControlSpacer() {
+    return _jsx("span", { "aria-hidden": "true", className: "size-5 shrink-0" });
+}
+/** Property key (quoted for objects, bare index for arrays) plus its colon. */
+function KeyLabel({ name, quoted }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "json-viewer-key", className: "text-fg-secondary", children: quoted ? JSON.stringify(name) : name }), _jsx(Punct, { children: ": " })] }));
+}
+/**
+ * One visual line of the tree. The copy button is always rendered (so it is
+ * keyboard-reachable and the layout never shifts) but kept at `opacity-0`
+ * until the row is hovered or anything inside the row holds focus.
+ *
+ * The copy button deliberately stays in the tab order: a leaf row has no
+ * other focusable element, so `tabIndex={-1}` would make copying impossible
+ * from the keyboard. The extra tab stop per row is the lesser harm until the
+ * tree gets a proper roving-tabindex treatment.
+ *
+ * Branch payloads are produced lazily: the first activation cancels the copy
+ * (CopyButton honors `defaultPrevented`), commits the serialized text
+ * synchronously, and re-dispatches the click so the copy proceeds with the
+ * real payload. The text is cached against its producer — which branches
+ * memoize on their value — so it recomputes only when the data changes.
+ */
+function JsonRow({ control, copyText, copyLabel, children }) {
+    const [cache, setCache] = useState(null);
+    const resolved = typeof copyText === "string" ? copyText : cache?.produce === copyText ? cache.text : null;
+    return (_jsxs("div", { "data-slot": "json-viewer-row", className: "group/row flex items-start gap-1", children: [control, _jsx("span", { className: "min-w-0 flex-1 break-words", children: children }), _jsx(CopyButton, { value: resolved ?? "", copyLabel: copyLabel, onClick: (event) => {
+                    if (typeof copyText === "string" || resolved !== null)
+                        return;
+                    event.preventDefault();
+                    const button = event.currentTarget;
+                    flushSync(() => setCache({ produce: copyText, text: copyText() }));
+                    button.click();
+                }, variant: "ghost", size: "icon-sm", className: "mt-0.5 size-5 shrink-0 rounded-md opacity-0 transition-opacity duration-150 focus-visible:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 motion-reduce:transition-none [&_svg]:size-3" })] }));
+}
+function JsonNode(props) {
+    const { value, ancestors } = props;
+    if (isBranchValue(value)) {
+        if (ancestors.includes(value)) {
+            return _jsx(JsonCircularLeaf, { ...props });
+        }
+        return _jsx(JsonBranch, { ...props, value: value });
+    }
+    return _jsx(JsonLeaf, { ...props });
+}
+/** A value that references one of its own ancestors — never recurse into it. */
+function JsonCircularLeaf({ name, quotedName, isLast }) {
+    return (_jsxs(JsonRow, { control: _jsx(ControlSpacer, {}), copyText: "[Circular]", copyLabel: copyLabelFor(name), children: [name !== undefined && _jsx(KeyLabel, { name: name, quoted: quotedName }), _jsx("span", { "data-slot": "json-viewer-value", className: "text-fg-tertiary italic", children: "[Circular]" }), !isLast && _jsx(Punct, { children: "," })] }));
+}
+function JsonLeaf({ name, quotedName, value, isLast }) {
+    const { text, className, hint } = formatLeaf(value);
+    return (_jsxs(JsonRow, { control: _jsx(ControlSpacer, {}), copyText: leafCopyText(value), copyLabel: copyLabelFor(name), children: [name !== undefined && _jsx(KeyLabel, { name: name, quoted: quotedName }), hint !== undefined && _jsx(TypeHint, { children: hint }), _jsx("span", { "data-slot": "json-viewer-value", className: cn("break-all", className), children: text }), !isLast && _jsx(Punct, { children: "," })] }));
+}
+function JsonBranch({ name, quotedName, value, depth, defaultExpandedDepth, ancestors, isLast, }) {
+    // Expansion is per branch and uncontrolled, seeded from the depth budget, so
+    // toggling one node re-renders only its own subtree.
+    const [expanded, setExpanded] = useState(depth < defaultExpandedDepth);
+    const entries = useMemo(() => branchEntries(value), [value]);
+    // Serialization is deferred to the copy handler (see JsonRow) — memoized on
+    // the value so JsonRow's cache invalidates exactly when the data changes.
+    const getCopyText = useCallback(() => stringifyValue(value), [value]);
+    const childAncestors = useMemo(() => [...ancestors, value], [ancestors, value]);
+    const kind = branchKind(value);
+    const count = entries.length;
+    // Maps and Sets copy as arrays, so they display with array brackets too;
+    // the dim `Map(n)`/`Set(n)` hint carries the real type.
+    const [openToken, closeToken] = kind === "object" ? ["{", "}"] : ["[", "]"];
+    const hint = kind === "map" ? `Map(${count})` : kind === "set" ? `Set(${count})` : null;
+    const noun = BRANCH_NOUNS[kind][count === 1 ? 0 : 1];
+    // Empty containers have nothing to expand — render them as a single leaf row.
+    if (count === 0) {
+        return (_jsxs(JsonRow, { control: _jsx(ControlSpacer, {}), copyText: getCopyText, copyLabel: copyLabelFor(name), children: [name !== undefined && _jsx(KeyLabel, { name: name, quoted: quotedName }), hint !== null && _jsx(TypeHint, { children: hint }), _jsxs(Punct, { children: [openToken, closeToken] }), !isLast && _jsx(Punct, { children: "," })] }));
+    }
+    return (_jsxs("div", { "data-slot": "json-viewer-branch", children: [_jsxs(JsonRow, { control: _jsx("button", { type: "button", "data-slot": "json-viewer-toggle", "data-state": expanded ? "open" : "closed", "aria-expanded": expanded, "aria-label": `Toggle ${name ?? "root"}`, onClick: () => setExpanded((previous) => !previous), className: cn("mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-md text-fg-tertiary outline-none", "transition-[background,color] duration-150 ease-[var(--ease-out-quart)] motion-reduce:transition-none", "hover:bg-surface-overlay hover:text-fg focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"), children: _jsx(ChevronRight, { "aria-hidden": "true", className: cn("size-3.5 transition-transform duration-200 ease-[var(--ease-out-quart)] motion-reduce:transition-none", expanded && "rotate-90") }) }), copyText: getCopyText, copyLabel: copyLabelFor(name), children: [name !== undefined && _jsx(KeyLabel, { name: name, quoted: quotedName }), hint !== null && _jsx(TypeHint, { children: hint }), _jsx(Punct, { children: openToken }), !expanded && (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "json-viewer-summary", 
+                                // The child count is information-bearing, so it uses `fg-tertiary`
+                                // (AA-safe on the inset surface) rather than the decorative `fg-muted`.
+                                className: "text-fg-tertiary tabular-nums", children: ` … ${count} ${noun} ` }), _jsx(Punct, { children: closeToken }), !isLast && _jsx(Punct, { children: "," })] }))] }), expanded && (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "json-viewer-children", className: "ml-2.5 border-border border-l pl-3.5", children: entries.map(([childName, childValue], index) => (_jsx(JsonNode, { name: childName, quotedName: kind === "object", value: childValue, depth: depth + 1, defaultExpandedDepth: defaultExpandedDepth, ancestors: childAncestors, isLast: index === count - 1 }, childName))) }), _jsxs("div", { "data-slot": "json-viewer-closer", className: "flex items-start gap-1", children: [_jsx(ControlSpacer, {}), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(Punct, { children: closeToken }), !isLast && _jsx(Punct, { children: "," })] })] })] }))] }));
+}
+/**
+ * A collapsible JSON tree viewer. Any `unknown` value renders as a recursive,
+ * monospaced tree: objects and arrays become branches with a real chevron
+ * `<button>` (`aria-expanded`, focus ring) and a muted child-count summary
+ * while collapsed; primitives are colored purely by semantic tokens (strings
+ * `text-success-strong`, numbers `text-info-strong` + `tabular-nums`, booleans
+ * `text-warning-strong`, null/undefined `text-fg-tertiary`), keys use
+ * `text-fg-secondary` and punctuation `text-fg-tertiary`, with `border-border`
+ * indent guides.
+ *
+ * Non-plain built-ins render faithfully instead of as empty objects: Date
+ * (ISO 8601), RegExp (literal), URL (href), and Error ("Name: message") are
+ * leaves with a dim type hint where the text alone is ambiguous, while Map
+ * and Set are branches — a `Map(n)`/`Set(n)` hint plus indexed `[key, value]`
+ * pairs (Map) or items (Set), exactly the shape their copied JSON takes.
+ *
+ * Expansion state lives per branch (seeded from `defaultExpandedDepth`), so
+ * toggling a node only re-renders its own subtree, and collapsed subtrees are
+ * not mounted at all. Every row reveals a clipboard button on hover or focus
+ * — string-like leaves copy their raw contents, everything else copies
+ * pretty-printed JSON, and branch payloads are serialized lazily on the first
+ * copy rather than during render. Both rendering and serialization are
+ * cycle-safe: values that reference their own ancestors render/serialize as a
+ * `"[Circular]"` token instead of recursing forever. Fully keyboard operable
+ * (chevrons and copy buttons are native buttons), reduced-motion safe, and
+ * SSR-safe (no DOM reads, no time- or random-dependent output).
+ */
+export const JsonViewer = forwardRef(({ data, defaultExpandedDepth = 1, className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "json-viewer", className: cn("overflow-x-auto rounded-xl border border-border bg-surface-inset p-4 font-mono text-fg text-sm leading-6", className), ...props, children: _jsx(JsonNode, { value: data, quotedName: false, depth: 0, defaultExpandedDepth: defaultExpandedDepth, ancestors: [], isLast: true }) })));
+JsonViewer.displayName = "JsonViewer";
+//# sourceMappingURL=json-viewer.js.map

package/dist/components/kanban.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface KanbanItem {
+    /** Stable identifier, unique across the whole board. */
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+}
+export interface KanbanColumn {
+    /** Stable identifier, unique across the whole board. */
+    id: string;
+    title: ReactNode;
+    items: KanbanItem[];
+}
+export interface KanbanProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** The board's columns and their cards (controlled). */
+    columns: KanbanColumn[];
+    /** Called with the next columns after a reorder/move. The consumer owns state. */
+    onColumnsChange: (next: KanbanColumn[]) => void;
+    /**
+     * Render a card's body. Defaults to the item's title + description in a
+     * Card-like tile. The drag handle and tile chrome are always provided.
+     */
+    renderItem?: (item: KanbanItem) => ReactNode;
+}
+/**
+ * A drag-and-drop board: columns of cards that reorder within a column and
+ * move across columns. Controlled via `columns` / `onColumnsChange` — the
+ * consumer owns state. SSR-safe (no effects run on the server).
+ */
+export declare const Kanban: import("react").ForwardRefExoticComponent<KanbanProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=kanban.d.ts.map