@cladd-ui/react 0.9.0 → 0.10.0

package/components/CollapsibleTrigger.js

@@ -0,0 +1,36 @@
+import { cloneElement } from 'react';
+import { useCollapsibleContext } from './CollapsibleContext.js';
+/**
+ * Wraps a single child element to act as the disclosure trigger. **Clones** the
+ * child (Radix-style `asChild`) to attach the toggle `onClick` plus the aria
+ * wiring (`aria-expanded`, `aria-controls`, `id`) and a `data-open` attribute -
+ * so you bring your own markup and the kit injects only behavior and state.
+ *
+ * Because the cloned child carries `data-open`, rotating or swapping your own
+ * chevron is pure CSS: add `group` to the child and
+ * `group-data-[open]:rotate-90` to the icon. For state in JS, drop a
+ * `CollapsibleIndicator` inside or call `useCollapsibleContext()`.
+ *
+ * Composes with any existing `onClick` on the child, and no-ops the toggle while
+ * the disclosure is `disabled`.
+ */
+export const CollapsibleTrigger = ({ children }) => {
+    const { open, toggle, disabled, triggerId, panelId } = useCollapsibleContext();
+    const child = children;
+    const originalOnClick = child?.props?.onClick;
+    const onClick = (e) => {
+        originalOnClick?.(e);
+        if (!disabled)
+            toggle();
+    };
+    return cloneElement(child, {
+        id: triggerId,
+        onClick,
+        'aria-expanded': open,
+        'aria-controls': panelId,
+        'aria-disabled': disabled || undefined,
+        'data-open': open || undefined,
+        'data-disabled': disabled || undefined,
+    });
+};
+//# sourceMappingURL=CollapsibleTrigger.js.map

package/components/CollapsibleTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTrigger.js","sourceRoot":"","sources":["../../../src/components/CollapsibleTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAO7D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC1E,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAClD,qBAAqB,EAAE,CAAC;IAE1B,MAAM,KAAK,GAAG,QAA6B,CAAC;IAC5C,MAAM,eAAe,GAAG,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC;IAE9C,MAAM,OAAO,GAAG,CAAC,CAAa,EAAE,EAAE;QAChC,eAAe,EAAE,CAAC,CAAC,CAAC,CAAC;QACrB,IAAI,CAAC,QAAQ;YAAE,MAAM,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,YAAY,CAAC,KAAK,EAAE;QACzB,EAAE,EAAE,SAAS;QACb,OAAO;QACP,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,WAAW,EAAE,IAAI,IAAI,SAAS;QAC9B,eAAe,EAAE,QAAQ,IAAI,SAAS;KACvC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/components/ColorEditor.d.ts

@@ -0,0 +1,84 @@
+import { Ref } from 'react';
+import { ColorEditorValue, ColorInput, ColorValue, GradientInput } from '../shared/color.js';
+/** Size token for the inner controls (scrubbers, hex input, gradient buttons). */
+export type ColorEditorControlSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Which channel scrubbers the inputs row shows. Does not affect the emitted value. */
+export type ColorEditorFormat = 'rgb' | 'hsl' | 'hsb';
+interface ColorEditorBaseProps {
+    /** Size of the inner controls — scrubbers, hex input, gradient buttons. Default `'md'`.
+     *
+     * The Solid/Gradient toolbar is rendered one step smaller.
+     */
+    controlSize?: ColorEditorControlSize;
+    /** Render the surface outline on the inner controls — channel/alpha scrubbers, hex input, and the Solid/Gradient toolbar.
+     *
+     *  The gradient bar's flip/angle controls stay ghost regardless. Default `true`.
+     */
+    controlOutline?: boolean;
+    /** Show the alpha slider and the alpha scrubber. Default `true`. */
+    alpha?: boolean;
+    /** Show the channel-scrubber row. Default `true`. */
+    inputs?: boolean;
+    /** Which channels the scrubber row shows. Default `'rgb'`. */
+    format?: ColorEditorFormat;
+    /** Show the hex input. Default `true`. */
+    hexInput?: boolean;
+    /** Angle control in gradient mode: a 45°-step button, or a degree scrubber. Default `'scrubber'`. */
+    angleControl?: 'button' | 'scrubber';
+    /** Preset colors rendered as a row of thumbs. Clicking one applies it to the color (or the selected gradient stop).
+     *
+     * Solid colors only.
+     */
+    swatches?: ColorInput[];
+    /** Dim the panel and block interaction. */
+    disabled?: boolean;
+    /** Block interaction without the dimmed treatment. */
+    readOnly?: boolean;
+    /** Debounce `onChange` calls in ms. Fires once after changes stop for N ms. Defaults to `0` (immediate). */
+    debounce?: number;
+    /** Throttle `onChange` calls in ms. Fires immediately, then at most once per N ms while changing, with a trailing call for the final value. Defaults to `0` (immediate).
+     *
+     * Takes precedence over `debounce`.
+     */
+    throttle?: number;
+    /** Content rendered above the panel, before the controls.
+     *
+     * Stays interactive when `disabled` (only the panel below dims).
+     *
+     * For inherit toggles, titles, eyedroppers, etc.
+     * */
+    header?: React.ReactNode;
+    /** Content rendered below the panel, after the swatches. Stays interactive when `disabled`. */
+    footer?: React.ReactNode;
+    /** Extra classes for the panel root. The panel is full-width — size it via its container. */
+    className?: string;
+    /** Extra classes for the saturation/brightness area (e.g. to set its height). */
+    areaClassName?: string;
+    /** Forwarded to the panel root element. */
+    ref?: Ref<HTMLDivElement>;
+}
+type SolidColorEditorProps = ColorEditorBaseProps & {
+    /** Enable the Solid/Gradient switch and gradient editing. Default `false`. */
+    gradient?: false;
+    /** Controlled value. A CSS color string or any one channel set. */
+    value?: ColorInput;
+    /** Initial value (uncontrolled). */
+    defaultValue?: ColorInput;
+    /** Fires on every change with the full color. */
+    onChange?: (value: ColorValue) => void;
+};
+type GradientColorEditorProps = ColorEditorBaseProps & {
+    gradient: true;
+    /** Controlled value. A CSS color/gradient string, a channel set, or a gradient object. */
+    value?: ColorInput | GradientInput;
+    /** Initial value (uncontrolled). */
+    defaultValue?: ColorInput | GradientInput;
+    /** Fires on every change with a discriminated `solid` / `linear` value. */
+    onChange?: (value: ColorEditorValue) => void;
+};
+export type ColorEditorProps = SolidColorEditorProps | GradientColorEditorProps;
+/** Shape of `ColorEditor` defaults that can be supplied via `CladdProvider`'s `defaults` prop. */
+export type ColorEditorDefaultProps = Partial<Omit<ColorEditorBaseProps, 'ref'>>;
+export declare const ColorEditor: (props: ColorEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ColorEditor.d.ts.map

package/components/ColorEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ColorEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,gBAAgB,EAChB,UAAU,EACV,UAAU,EAEV,aAAa,EAYd,MAAM,iBAAiB,CAAC;AAYzB,kFAAkF;AAClF,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEvE,uFAAuF;AACvF,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtD,UAAU,oBAAoB;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,YAAY,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;SAKK;IACL,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,KAAK,qBAAqB,GAAG,oBAAoB,GAAG;IAClD,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,mEAAmE;IACnE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,oCAAoC;IACpC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,KAAK,wBAAwB,GAAG,oBAAoB,GAAG;IACrD,QAAQ,EAAE,IAAI,CAAC;IACf,0FAA0F;IAC1F,KAAK,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC;IACnC,oCAAoC;IACpC,YAAY,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC;IAC1C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,wBAAwB,CAAC;AAEhF,kGAAkG;AAClG,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAC3C,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAClC,CAAC;AAkFF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA83BlD,CAAC"}

package/components/ColorEditor.js

@@ -0,0 +1,517 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { useComponentDefaults } from '../hooks/use-component-defaults.js';
+import { cn } from '../shared/cn.js';
+import { buildColorValue, CHECKER, colorSignature, gradientCss, gradientPreviewCss, hslToHsv, hsvToHsl, hsvToRgb, isGradientInput, parseColor, parseGradient, rgbToHsv, } from '../shared/color.js';
+import { Button } from './Button.js';
+import { ArrowLeftIcon } from './icons/ArrowLeftIcon.js';
+import { FlipIcon } from './icons/FlipIcon.js';
+import { GradientColorIcon } from './icons/GradientColorIcon.js';
+import { SolidColorIcon } from './icons/SolidColorIcon.js';
+import { Input } from './Input.js';
+import { NumberScrubber } from './NumberScrubber.js';
+import { Segmented } from './Segmented.js';
+import { SegmentedButton } from './SegmentedButton.js';
+import { Toolbar } from './Toolbar.js';
+// Fixed dimensions — customize the area via `areaClassName`, the panel via `className`.
+const AREA_H = 'h-36';
+const BAR_H = 'h-3';
+const THUMB = 'size-4';
+const THUMB_PX = 16;
+const SWATCH = 'size-4';
+/** The Solid/Gradient toolbar renders one step below `controlSize`. */
+const TOOLBAR_SIZE = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg',
+    '2xl': 'xl',
+};
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const wrap360 = (n) => ((n % 360) + 360) % 360;
+const r0 = (n) => Math.round(n);
+/** Center-position a thumb so it never overshoots the track ends. */
+const thumbLeft = (fraction) => `calc(${fraction} * (100% - ${THUMB_PX}px) + ${THUMB_PX / 2}px)`;
+const THUMB_CLASS = 'absolute rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.2),0_1px_3px_rgba(0,0,0,0.45)] outline-none focus-visible:ring-2 focus-visible:ring-cladd-primary';
+const HUE_TRACK = 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)';
+// ── helpers ──────────────────────────────────────────────────────────────────
+const cloneInternal = (d) => ({
+    mode: d.mode,
+    solid: { ...d.solid },
+    angle: d.angle,
+    stops: [
+        { hsva: { ...d.stops[0].hsva }, position: d.stops[0].position },
+        { hsva: { ...d.stops[1].hsva }, position: d.stops[1].position },
+    ],
+    active: d.active,
+});
+const currentOf = (d) => d.mode === 'linear' ? d.stops[d.active].hsva : d.solid;
+const sortedStops = (d) => d.stops
+    .map((s) => ({ color: buildColorValue(s.hsva), position: s.position }))
+    .sort((a, b) => a.position - b.position);
+const isValidHex = (text) => /^[0-9a-fA-F]{3,8}$/.test(text) && [3, 4, 6, 8].includes(text.length);
+const LetterIcon = (props) => {
+    return (_jsx("span", { className: "flex size-4 items-center justify-center text-cladd-xs font-medium text-cladd-fg-soft", children: props.children }));
+};
+export const ColorEditor = (props) => {
+    const resolved = useComponentDefaults('ColorEditor', props);
+    const { controlSize = 'md', controlOutline = true, alpha = true, inputs = true, format = 'rgb', hexInput = true, angleControl = 'scrubber', swatches, gradient = false, disabled = false, readOnly = false, debounce = 0, throttle = 0, header, footer, value, defaultValue, onChange, className, areaClassName, ref, } = resolved;
+    const interactive = !disabled && !readOnly;
+    const toolbarSize = TOOLBAR_SIZE[controlSize];
+    // The alpha % scrubber rides along with the hex input — show it only when
+    // alpha, the input row, and the hex input are all on. On its own the alpha
+    // *slider* already covers transparency, so a lone scrubber adds nothing.
+    const alphaInput = alpha && inputs && hexInput;
+    const seedFrom = (input) => {
+        if (gradient && isGradientInput(input)) {
+            const parsed = parseGradient(input);
+            const list = parsed?.stops ?? [];
+            const s0 = list[0] ?? { hsva: { h: 0, s: 0, v: 0, a: 1 }, position: 0 };
+            const s1 = list[list.length - 1] ?? {
+                hsva: { h: 0, s: 0, v: 100, a: 1 },
+                position: 100,
+            };
+            return {
+                mode: 'linear',
+                solid: { ...s0.hsva },
+                angle: parsed?.angle ?? 90,
+                stops: [
+                    { hsva: { ...s0.hsva }, position: s0.position },
+                    { hsva: { ...s1.hsva }, position: s1.position },
+                ],
+                active: 0,
+            };
+        }
+        const hsva = parseColor(input);
+        return {
+            mode: 'solid',
+            solid: hsva,
+            angle: 90,
+            stops: [
+                { hsva: { ...hsva }, position: 0 },
+                { hsva: { ...hsva, a: 0 }, position: 100 },
+            ],
+            active: 0,
+        };
+    };
+    const buildOutput = (d) => {
+        if (!gradient)
+            return buildColorValue(d.solid);
+        if (d.mode === 'solid') {
+            return { type: 'solid', ...buildColorValue(d.solid) };
+        }
+        const stops = sortedStops(d);
+        return {
+            type: 'linear',
+            angle: d.angle,
+            stops,
+            css: gradientCss(d.angle, stops),
+        };
+    };
+    const signatureOf = (d) => {
+        if (!gradient)
+            return colorSignature(d.solid);
+        if (d.mode === 'solid')
+            return `solid|${colorSignature(d.solid)}`;
+        return `linear|${d.angle}|${sortedStops(d)
+            .map((s) => `${s.position}:${s.color.hex}`)
+            .join('|')}`;
+    };
+    const isControlled = value !== undefined;
+    const internalRef = useRef(seedFrom(value ?? defaultValue));
+    const [internal, setInternal] = useState(internalRef.current);
+    const lastSigRef = useRef(signatureOf(internalRef.current));
+    const interactingRef = useRef(false);
+    // Rate-limit only the outward `onChange`; internal state always updates
+    // immediately so the panel stays responsive. Mirrors Slider's debounce /
+    // throttle semantics. The trailing call guarantees the final value is emitted.
+    const debounceTimer = useRef(null);
+    const throttleTimer = useRef(null);
+    const throttleLastFire = useRef(0);
+    const throttlePending = useRef(null);
+    const emitChange = (out) => {
+        if (!onChange)
+            return;
+        if (throttle > 0) {
+            const now = Date.now();
+            const elapsed = now - throttleLastFire.current;
+            if (elapsed >= throttle) {
+                throttleLastFire.current = now;
+                throttlePending.current = null;
+                if (throttleTimer.current) {
+                    clearTimeout(throttleTimer.current);
+                    throttleTimer.current = null;
+                }
+                onChange(out);
+            }
+            else {
+                throttlePending.current = out;
+                if (!throttleTimer.current) {
+                    throttleTimer.current = setTimeout(() => {
+                        throttleTimer.current = null;
+                        if (throttlePending.current !== null) {
+                            const pending = throttlePending.current;
+                            throttlePending.current = null;
+                            throttleLastFire.current = Date.now();
+                            onChange(pending);
+                        }
+                    }, throttle - elapsed);
+                }
+            }
+        }
+        else if (debounce > 0) {
+            if (debounceTimer.current)
+                clearTimeout(debounceTimer.current);
+            debounceTimer.current = setTimeout(() => onChange(out), debounce);
+        }
+        else {
+            onChange(out);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (debounceTimer.current)
+                clearTimeout(debounceTimer.current);
+            if (throttleTimer.current)
+                clearTimeout(throttleTimer.current);
+        };
+    }, []);
+    // Sync external (controlled) value changes. Skipped while the user is
+    // interacting — mid-drag the component is the source of truth, and our own
+    // rapid onChange echoes would otherwise race back in and clobber state.
+    // The signature guard ignores the (non-interacting) echo of what we emitted;
+    // `active` is UI-only, so it's always preserved across a reseed.
+    useEffect(() => {
+        if (!isControlled || interactingRef.current)
+            return;
+        const seeded = seedFrom(value);
+        const sig = signatureOf(seeded);
+        if (sig !== lastSigRef.current) {
+            seeded.active = internalRef.current.active;
+            lastSigRef.current = sig;
+            internalRef.current = seeded;
+            setInternal(seeded);
+        }
+        // Only `value` — the helpers close over render-stable props.
+    }, [value]);
+    const patch = (mutate, emit = true) => {
+        const next = cloneInternal(internalRef.current);
+        mutate(next);
+        internalRef.current = next;
+        setInternal(next);
+        if (emit) {
+            lastSigRef.current = signatureOf(next);
+            emitChange(buildOutput(next));
+        }
+    };
+    const cur = currentOf(internal);
+    const opaque = buildColorValue({ ...cur, a: 1 }).hex;
+    const curValue = buildColorValue(cur);
+    const rgb = curValue.rgb;
+    const hsl = curValue.hsl;
+    // ── pointer dragging ────────────────────────────────────────────────────────
+    const areaElRef = useRef(null);
+    const hueElRef = useRef(null);
+    const alphaElRef = useRef(null);
+    const gradientBarRef = useRef(null);
+    const drag = (el, e, onPos, padX = 0) => {
+        if (!interactive || !el || e.button !== 0)
+            return;
+        interactingRef.current = true;
+        const rect = el.getBoundingClientRect();
+        const travel = rect.width - 2 * padX;
+        const apply = (clientX, clientY) => {
+            onPos(clamp((clientX - rect.left - padX) / travel, 0, 1), clamp((clientY - rect.top) / rect.height, 0, 1));
+        };
+        apply(e.clientX, e.clientY);
+        const onMove = (ev) => {
+            ev.preventDefault();
+            apply(ev.clientX, ev.clientY);
+        };
+        const onUp = () => {
+            interactingRef.current = false;
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+    };
+    const onAreaDown = (e) => drag(areaElRef.current, e, (x, y) => patch((d) => {
+        const c = currentOf(d);
+        c.s = x * 100;
+        c.v = (1 - y) * 100;
+    }));
+    const onHueDown = (e) => drag(hueElRef.current, e, (x) => patch((d) => {
+        currentOf(d).h = x * 360;
+    }), THUMB_PX / 2);
+    const onAlphaDown = (e) => drag(alphaElRef.current, e, (x) => patch((d) => {
+        currentOf(d).a = Math.round(x * 100) / 100;
+    }), THUMB_PX / 2);
+    // ── keyboard ────────────────────────────────────────────────────────────────
+    const kstep = (e) => (e.shiftKey ? 10 : 1);
+    const onAreaKey = (e) => {
+        if (!interactive)
+            return;
+        const d = kstep(e);
+        const map = {
+            ArrowLeft: () => patch((x) => (currentOf(x).s = clamp(cur.s - d, 0, 100))),
+            ArrowRight: () => patch((x) => (currentOf(x).s = clamp(cur.s + d, 0, 100))),
+            ArrowUp: () => patch((x) => (currentOf(x).v = clamp(cur.v + d, 0, 100))),
+            ArrowDown: () => patch((x) => (currentOf(x).v = clamp(cur.v - d, 0, 100))),
+        };
+        if (map[e.key]) {
+            e.preventDefault();
+            map[e.key]();
+        }
+    };
+    const onHueKey = (e) => {
+        if (!interactive)
+            return;
+        const d = kstep(e);
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            patch((x) => (currentOf(x).h = wrap360(cur.h + (e.key === 'ArrowRight' ? d : -d))));
+        }
+    };
+    const onAlphaKey = (e) => {
+        if (!interactive)
+            return;
+        const d = (e.shiftKey ? 10 : 1) / 100;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            patch((x) => (currentOf(x).a = clamp(Math.round((cur.a + (e.key === 'ArrowRight' ? d : -d)) * 100) / 100, 0, 1)));
+        }
+    };
+    // ── channel scrubbers ─────────────────────────────────────────────────────────
+    const setRgb = (key, v) => patch((d) => {
+        const c = currentOf(d);
+        const next = { ...hsvToRgb(c) };
+        next[key] = clamp(r0(v), 0, 255);
+        const h = rgbToHsv(next);
+        if (h.s !== 0)
+            c.h = h.h;
+        if (h.v !== 0)
+            c.s = h.s;
+        c.v = h.v;
+    });
+    const setHsl = (key, v) => patch((d) => {
+        const c = currentOf(d);
+        const next = hsvToHsl(c);
+        next[key] = key === 'h' ? wrap360(v) : clamp(v, 0, 100);
+        const h = hslToHsv(next.h, next.s, next.l, c.a);
+        c.h = next.h;
+        c.s = h.s;
+        c.v = h.v;
+    });
+    const setHsb = (key, v) => patch((d) => {
+        const c = currentOf(d);
+        if (key === 'h')
+            c.h = wrap360(v);
+        else if (key === 's')
+            c.s = clamp(v, 0, 100);
+        else
+            c.v = clamp(v, 0, 100);
+    });
+    const channels = format === 'rgb'
+        ? [
+            {
+                label: 'R',
+                value: rgb.r,
+                min: 0,
+                max: 255,
+                set: (v) => setRgb('r', v),
+            },
+            {
+                label: 'G',
+                value: rgb.g,
+                min: 0,
+                max: 255,
+                set: (v) => setRgb('g', v),
+            },
+            {
+                label: 'B',
+                value: rgb.b,
+                min: 0,
+                max: 255,
+                set: (v) => setRgb('b', v),
+            },
+        ]
+        : format === 'hsl'
+            ? [
+                {
+                    label: 'H',
+                    value: r0(hsl.h),
+                    min: 0,
+                    max: 360,
+                    set: (v) => setHsl('h', v),
+                },
+                {
+                    label: 'S',
+                    value: r0(hsl.s),
+                    min: 0,
+                    max: 100,
+                    set: (v) => setHsl('s', v),
+                },
+                {
+                    label: 'L',
+                    value: r0(hsl.l),
+                    min: 0,
+                    max: 100,
+                    set: (v) => setHsl('l', v),
+                },
+            ]
+            : [
+                {
+                    label: 'H',
+                    value: r0(cur.h),
+                    min: 0,
+                    max: 360,
+                    set: (v) => setHsb('h', v),
+                },
+                {
+                    label: 'S',
+                    value: r0(cur.s),
+                    min: 0,
+                    max: 100,
+                    set: (v) => setHsb('s', v),
+                },
+                {
+                    label: 'B',
+                    value: r0(cur.v),
+                    min: 0,
+                    max: 100,
+                    set: (v) => setHsb('b', v),
+                },
+            ];
+    // ── hex input ──────────────────────────────────────────────────────────────────
+    const hex6 = buildColorValue({ ...cur, a: 1 })
+        .hex.slice(1)
+        .toUpperCase();
+    const [hexText, setHexText] = useState(hex6);
+    const [hexFocused, setHexFocused] = useState(false);
+    useEffect(() => {
+        if (!hexFocused)
+            setHexText(hex6);
+    }, [hex6, hexFocused]);
+    const commitHex = () => {
+        setHexFocused(false);
+        if (isValidHex(hexText)) {
+            const parsed = parseColor(`#${hexText}`);
+            patch((d) => {
+                const c = currentOf(d);
+                c.h = parsed.h;
+                c.s = parsed.s;
+                c.v = parsed.v;
+                if (hexText.length === 4 || hexText.length === 8)
+                    c.a = parsed.a;
+            });
+        }
+        else {
+            setHexText(hex6);
+        }
+    };
+    // ── gradient ───────────────────────────────────────────────────────────────────
+    const setMode = (mode) => {
+        if (mode === internal.mode)
+            return;
+        patch((d) => {
+            d.mode = mode;
+        });
+    };
+    const setActive = (i) => patch((d) => (d.active = i), false);
+    const flip = () => 
+    // Reverse the colors; positions stay put (a true direction flip for 2 stops).
+    patch((d) => {
+        const a = d.stops[0].hsva;
+        d.stops[0].hsva = d.stops[1].hsva;
+        d.stops[1].hsva = a;
+    });
+    const setAngle = (v) => patch((d) => {
+        d.angle = wrap360(v);
+    });
+    // Select on press; reposition only on drag (so a click just selects the stop).
+    const onStopDown = (i, e) => {
+        if (!interactive || e.button !== 0)
+            return;
+        interactingRef.current = true;
+        if (internal.active !== i)
+            setActive(i);
+        const el = gradientBarRef.current;
+        if (!el) {
+            interactingRef.current = false;
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const pad = THUMB_PX / 2;
+        const move = (clientX) => patch((d) => {
+            d.stops[i].position = r0(clamp((clientX - rect.left - pad) / (rect.width - 2 * pad), 0, 1) *
+                100);
+        });
+        const onMove = (ev) => {
+            ev.preventDefault();
+            move(ev.clientX);
+        };
+        const onUp = () => {
+            interactingRef.current = false;
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+    };
+    const onStopKey = (i, e) => {
+        if (!interactive)
+            return;
+        const d = kstep(e);
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            patch((x) => {
+                x.stops[i].position = clamp(x.stops[i].position + (e.key === 'ArrowRight' ? d : -d), 0, 100);
+            });
+        }
+    };
+    const showGradientBar = gradient && internal.mode === 'linear';
+    const stopThumbs = internal.stops.map((s, i) => ({
+        color: buildColorValue(s.hsva),
+        position: s.position,
+        index: i,
+    }));
+    const previewStops = [...stopThumbs]
+        .map((s) => ({ color: s.color, position: s.position }))
+        .sort((a, b) => a.position - b.position);
+    // ── render ───────────────────────────────────────────────────────────────────
+    const sliderThumb = (handlers, fraction, aria, fill) => (_jsx("div", { role: "slider", "aria-label": aria.label, "aria-valuemin": 0, "aria-valuemax": aria.max, "aria-valuenow": aria.now, tabIndex: interactive ? 0 : undefined, onKeyDown: handlers.onKeyDown, className: cn(THUMB_CLASS, 'pointer-events-none top-1/2', THUMB), style: {
+            left: thumbLeft(fraction),
+            transform: 'translate(-50%, -50%)',
+            backgroundColor: fill,
+        } }));
+    return (_jsxs("div", { ref: ref, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn('cladd-coloreditor flex w-full flex-col gap-2.5', className), children: [header, _jsxs("div", { "data-part": "body", className: cn('flex w-full flex-col gap-2.5', disabled && 'pointer-events-none opacity-50'), children: [gradient && (_jsx(Toolbar, { "data-part": "toolbar", size: toolbarSize, outline: controlOutline, className: "mx-auto w-32", contentClassName: "w-full", children: _jsxs(Segmented, { className: "w-full", activeOutline: controlOutline, children: [_jsx(SegmentedButton, { className: "flex-1", active: internal.mode === 'solid', onClick: () => setMode('solid'), "aria-label": "Solid", children: _jsx(SolidColorIcon, {}) }), _jsx(SegmentedButton, { className: "flex-1", active: internal.mode === 'linear', onClick: () => setMode('linear'), "aria-label": "Gradient", children: _jsx(GradientColorIcon, {}) })] }) })), showGradientBar && (_jsxs("div", { className: "flex w-full items-center gap-2.5", children: [_jsx(Button, { square: true, size: controlSize, variant: "transparent", outline: false, disabled: !interactive, onClick: flip, "aria-label": "Flip gradient", children: _jsx(FlipIcon, { className: "text-cladd-fg-soft" }) }), _jsxs("div", { ref: gradientBarRef, className: cn('relative flex-1 touch-none rounded-full', BAR_H), style: CHECKER, children: [_jsx("div", { className: "absolute inset-0 rounded-full", style: { background: gradientPreviewCss(previewStops) } }), stopThumbs.map((s) => (_jsx("div", { role: "slider", "aria-label": `Gradient stop ${s.index + 1}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": s.position, tabIndex: interactive ? 0 : undefined, onPointerDown: (e) => onStopDown(s.index, e), onKeyDown: (e) => onStopKey(s.index, e), className: cn(THUMB_CLASS, 'top-1/2', THUMB, internal.active === s.index &&
+                                            'z-10 ring-2 ring-cladd-primary ring-offset-1'), style: {
+                                            left: thumbLeft(s.position / 100),
+                                            transform: 'translate(-50%, -50%)',
+                                            backgroundColor: s.color.css,
+                                        } }, s.index)))] }), angleControl === 'button' ? (_jsx(Button, { square: true, size: controlSize, variant: "transparent", outline: false, disabled: !interactive, onClick: () => setAngle(internal.angle + 45), "aria-label": "Rotate 45\u00B0", children: _jsx(ArrowLeftIcon, { className: "text-cladd-fg-soft transition-transform duration-200", style: { transform: `rotate(${internal.angle + 90}deg)` } }) })) : (_jsx(NumberScrubber, { className: "w-16 shrink-0", contentClassName: "pl-1.5 gap-1", inputClassName: "text-right pl-5", iconClassName: "left-1.5", size: controlSize, variant: "transparent", outline: false, scrubberIcon: false, icon: _jsx(ArrowLeftIcon, { style: { transform: `rotate(${internal.angle + 90}deg)` } }), min: 0, max: 360, step: 1, value: r0(internal.angle), displayValue: (v) => `${v}°`, disabled: !interactive, onChange: setAngle, onTemporaryChange: setAngle }))] })), _jsx("div", { ref: areaElRef, "data-part": "area", className: cn('relative w-full touch-none rounded-cladd-lg select-none', AREA_H, interactive && 'cursor-crosshair', areaClassName), style: {
+                            background: `linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%), linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%), hsl(${cur.h}, 100%, 50%)`,
+                        }, onPointerDown: onAreaDown, children: _jsx("div", { "data-part": "area-thumb", role: "slider", "aria-label": "Saturation and brightness", "aria-valuetext": `S ${r0(cur.s)}%, B ${r0(cur.v)}%`, tabIndex: interactive ? 0 : undefined, onKeyDown: onAreaKey, className: cn(THUMB_CLASS, 'pointer-events-none', THUMB), style: {
+                                left: `${cur.s}%`,
+                                top: `${100 - cur.v}%`,
+                                transform: 'translate(-50%, -50%)',
+                                backgroundColor: opaque,
+                            } }) }), _jsx("div", { ref: hueElRef, "data-part": "hue", className: cn('relative w-full touch-none rounded-full select-none', BAR_H), style: { background: HUE_TRACK }, onPointerDown: onHueDown, children: sliderThumb({ onKeyDown: onHueKey }, cur.h / 360, { label: 'Hue', now: r0(cur.h), max: 360 }, `hsl(${cur.h}, 100%, 50%)`) }), alpha && (_jsxs("div", { ref: alphaElRef, "data-part": "alpha", className: cn('relative w-full touch-none rounded-full select-none', BAR_H), style: CHECKER, onPointerDown: onAlphaDown, children: [_jsx("div", { className: "absolute inset-0 rounded-full", style: {
+                                    background: `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b},0) 0%, rgba(${rgb.r},${rgb.g},${rgb.b},1) 100%)`,
+                                } }), sliderThumb({ onKeyDown: onAlphaKey }, cur.a, { label: 'Alpha', now: r0(cur.a * 100), max: 100 }, opaque)] })), inputs && (_jsx("div", { className: "flex w-full items-start gap-1.5", children: channels.map((ch) => (_jsx("div", { className: "flex min-w-0 flex-1 flex-col items-center gap-1", children: _jsx(NumberScrubber, { className: "w-full", contentClassName: "justify-between pl-1.5 gap-1", inputClassName: "text-right pl-5", iconClassName: "left-1.5", icon: _jsx(LetterIcon, { children: ch.label }), size: controlSize, outline: controlOutline, scrubberIcon: false, min: ch.min, max: ch.max, step: 1, value: ch.value, disabled: !interactive, onChange: ch.set, onTemporaryChange: ch.set }) }, ch.label))) })), hexInput && (_jsxs("div", { className: "grid w-full grid-cols-3 items-center gap-1.5", children: [_jsx(Input, { className: cn('min-w-0', alphaInput ? 'col-span-2' : 'col-span-3'), size: controlSize, outline: controlOutline, color: "", icon: _jsx(LetterIcon, { children: "#" }), iconClassName: "left-1.5", inputClassName: "uppercase tracking-wide pl-6", value: hexText, maxLength: 8, readOnly: !interactive, onFocus: () => setHexFocused(true), onBlur: commitHex, onChange: (v) => setHexText(v.replace(/[^0-9a-fA-F]/g, '')), onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        e.target.blur();
+                                } }), alphaInput && (_jsx(NumberScrubber, { className: "w-full", contentClassName: "justify-between pl-1.5 gap-1", inputClassName: "text-right pl-5", iconClassName: "left-1.5", icon: _jsx(LetterIcon, { children: "A" }), size: controlSize, outline: controlOutline, scrubberIcon: false, min: 0, max: 100, step: 1, value: r0(cur.a * 100), displayValue: (v) => `${v}%`, disabled: !interactive, onChange: (v) => patch((d) => (currentOf(d).a = clamp(v / 100, 0, 1))), onTemporaryChange: (v) => patch((d) => (currentOf(d).a = clamp(v / 100, 0, 1))) }))] })), swatches && swatches.length > 0 && (_jsx("div", { "data-part": "swatches", className: "flex w-full flex-wrap gap-1.5", children: swatches.map((sw, i) => {
+                            const swatch = buildColorValue(parseColor(sw));
+                            return (_jsx("button", { type: "button", "aria-label": swatch.hex, disabled: !interactive, onClick: () => patch((d) => {
+                                    const c = currentOf(d);
+                                    const p = parseColor(sw);
+                                    c.h = p.h;
+                                    c.s = p.s;
+                                    c.v = p.v;
+                                    c.a = p.a;
+                                }), className: cn('relative shrink-0 overflow-hidden rounded-cladd-2xs shadow-[inset_0_0_0_1px_rgba(0,0,0,0.15)] transition-transform hover:scale-110', SWATCH), style: CHECKER, children: _jsx("span", { className: "absolute inset-0", style: { background: swatch.css } }) }, i));
+                        }) }))] }), footer] }));
+};
+//# sourceMappingURL=ColorEditor.js.map