@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/color/picker-state.d.ts

@@ -0,0 +1,20 @@
+import { type Color } from "./color.js";
+import { type ColorCell, type ColorInput } from "./value.js";
+export interface ColorPickerProps {
+    /** The current value (controlled): a two-way signal or a fixed value. */
+    value?: ColorInput;
+    /** The default value (uncontrolled). */
+    defaultValue?: string | Color;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: Color) => void;
+}
+export interface ColorPickerState {
+    readonly kind: "picker";
+    readonly cell: ColorCell<string | Color>;
+    readonly onChange: ((value: Color) => void) | undefined;
+}
+export declare function createColorPickerState(props: ColorPickerProps): ColorPickerState;
+/** The current color value of the color picker. */
+export declare const getColor: (state: ColorPickerState) => Color;
+/** Sets the current color value of the color picker (null is ignored). */
+export declare function setColor(state: ColorPickerState, color: Color | null): void;

package/color/picker-state.js

@@ -0,0 +1,19 @@
+// Ported from react-stately `useColorPickerState` (packages/react-stately/src/color/useColorPickerState.ts), Apache-2.0, © Adobe.
+// Rivet: plain signals + JSON (serializable); `state.color` → `getColor(state)`, `state.setColor(c)` →
+// `setColor(state, c)`. Color stored as a string (`./value.ts`).
+import { normalizeColor, parseColor, toColor } from "./color.js";
+import { colorCell, isColorSource, writeColor } from "./value.js";
+export function createColorPickerState(props) {
+    const value = isColorSource(props.value) ? props.value : toColor(props.value);
+    const defaultValue = toColor(props.defaultValue || "#000000");
+    const cell = colorCell((value || undefined), defaultValue);
+    return { kind: "picker", cell, onChange: props.onChange };
+}
+/** The current color value of the color picker. */
+export const getColor = (state) => normalizeColor(state.cell.read());
+/** Sets the current color value of the color picker (null is ignored). */
+export function setColor(state, color) {
+    if (color != null) {
+        writeColor(state.cell, color || parseColor("#000000"), state.onChange);
+    }
+}

package/color/slider-state.d.ts

@@ -0,0 +1,78 @@
+import { type Orientation, type SliderSnap, type SliderState } from "../slider/state.js";
+import { type Color, type ColorChannel, type ColorSpace } from "./color.js";
+import { type ColorCell, type ColorInput } from "./value.js";
+export interface ColorSliderProps {
+    /** The current value (controlled): a two-way signal or a fixed value. */
+    value?: ColorInput;
+    /** The default value (uncontrolled). */
+    defaultValue?: string | Color;
+    /**
+     * The color space that the slider operates in. The `channel` must be in this color space.
+     * If not provided, this defaults to the color space of the `color` or `defaultColor` value.
+     */
+    colorSpace?: ColorSpace;
+    /** The color channel that the slider manipulates. */
+    channel: ColorChannel;
+    /** Handler that is called when the value changes, as the user drags. */
+    onChange?: (value: Color) => void;
+    /** Handler that is called when the user stops dragging. */
+    onChangeEnd?: (value: Color) => void;
+    /**
+     * The orientation of the Slider.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /** Whether the whole Slider is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Rivet deviation (the Slider `snap` decision): `"release"` (default): during a pointer drag the thumb follows the
+     * pointer freely and animates to the closest channel step on release (`data-snapping`); `"drag"`: React Aria
+     * behaviour (snaps during the drag). The color value and `onChange` are stepped either way.
+     *
+     * @default 'release'
+     */
+    snap?: SliderSnap;
+}
+export interface ColorSliderStateOptions extends ColorSliderProps {
+    /** The locale to use for formatting the color channel value. */
+    locale: string;
+}
+export interface ColorSliderState {
+    readonly kind: "slider";
+    readonly cell: ColorCell<string | Color>;
+    readonly channel: ColorChannel;
+    readonly colorSpace: ColorSpace | undefined;
+    readonly locale: string;
+    /** Stored slider data (flags, refs); use `sliderView(state)` with the slider functions. */
+    readonly slider: SliderState;
+    /** The step of the channel. */
+    readonly step: number;
+    /** The page size of the channel. */
+    readonly pageSize: number;
+    readonly onChange: ((value: Color) => void) | undefined;
+    readonly onChangeEnd: ((value: Color) => void) | undefined;
+}
+/**
+ * Provides state management for a color slider component.
+ * Color sliders allow users to adjust an individual channel of a color value.
+ */
+export declare function createColorSliderState(props: ColorSliderStateOptions): ColorSliderState;
+/** The current color value represented by the color slider. */
+export declare function colorSliderValue(state: ColorSliderState): Color;
+/** Sets the current color value. If a string is passed, it will be parsed to a Color. */
+export declare function setColorSliderValue(state: ColorSliderState, value: string | Color): void;
+/**
+ * Transient `SliderState` over the color channel (upstream: the spread `useSliderState` result): reads
+ * the channel value, writes `color.withChannelValue(channel, v)` (`onChange`), `onChangeEnd` with the color.
+ * Build it per call; never store it (it holds closures).
+ */
+export declare function sliderView(state: ColorSliderState): SliderState;
+/** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */
+export declare function getColorSliderDisplayColor(state: ColorSliderState): Color;
+/** The thumb's value label: the channel value formatted for `locale`. */
+export declare const getColorSliderThumbValueLabel: (state: ColorSliderState) => string;
+/** The formatted value: the channel value formatted for `locale`. */
+export declare const getColorSliderFormattedValue: (state: ColorSliderState) => string;
+/** Whether the color slider is currently being dragged. */
+export declare const isColorSliderDragging: (state: ColorSliderState) => boolean;

package/color/slider-state.jsx

@@ -0,0 +1,98 @@
+// Ported from react-stately `useColorSliderState` (packages/react-stately/src/color/useColorSliderState.ts), Apache-2.0, © Adobe.
+// Rivet: plain signals + JSON (serializable); methods are free functions taking the state first.
+// Upstream spreads `useSliderState` into the result; here `state.slider` is the stored `SliderState`
+// data (drag / focus / editable flags) and `sliderView(state)` builds, per call, a transient
+// `SliderState` whose value reads the color channel and whose writes set the color — pass it to the
+// `@rivetjs/cdk/slider/state` functions (`setThumbValue(sliderView(state), 0, v)`). Color-specific
+// members (`value`, `setValue`, `getDisplayColor`, `getThumbValueLabel`, `getFormattedValue`, `step`,
+// `pageSize`, `isDragging`) are functions / fields here. Color stored as a string (`./value.ts`).
+// Deviation: `snap` (Slider free drag + animated snap on release, default `"release"`) passes through to the slider state.
+import { untrack } from "@rivetjs/reactivity";
+import { createSliderState, isThumbDragging } from "../slider/state.js";
+import { normalizeColor, parseColor } from "./color.js";
+import { colorCell, writeColor } from "./value.js";
+/**
+ * Provides state management for a color slider component.
+ * Color sliders allow users to adjust an individual channel of a color value.
+ */
+export function createColorSliderState(props) {
+    const { channel, colorSpace, value, defaultValue, onChange, locale, onChangeEnd, ...otherProps } = props;
+    if (value == null && defaultValue == null) {
+        throw new Error("useColorSliderState requires a value or defaultValue");
+    }
+    const cell = colorCell(value, defaultValue);
+    const toSpace = (c) => (colorSpace && c ? c.toFormat(colorSpace) : c);
+    const color = toSpace(normalizeColor(untrack(cell.read)));
+    const defaultColor = toSpace(defaultValue != null ? normalizeColor(defaultValue) : normalizeColor(untrack(cell.read)));
+    const range = color.getChannelRange(channel);
+    const slider = createSliderState({
+        minValue: range.minValue,
+        maxValue: range.maxValue,
+        step: range.step,
+        ...otherProps,
+        locale,
+        value: color.getChannelValue(channel),
+        defaultValue: defaultColor.getChannelValue(channel),
+    });
+    return { kind: "slider", cell, channel, colorSpace, locale, slider, step: range.step, pageSize: range.pageSize, onChange, onChangeEnd };
+}
+/** The current color value represented by the color slider. */
+export function colorSliderValue(state) {
+    const colorValue = normalizeColor(state.cell.read());
+    return state.colorSpace && colorValue ? colorValue.toFormat(state.colorSpace) : colorValue;
+}
+/** Sets the current color value. If a string is passed, it will be parsed to a Color. */
+export function setColorSliderValue(state, value) {
+    writeColor(state.cell, normalizeColor(value), state.onChange);
+}
+/**
+ * Transient `SliderState` over the color channel (upstream: the spread `useSliderState` result): reads
+ * the channel value, writes `color.withChannelValue(channel, v)` (`onChange`), `onChangeEnd` with the color.
+ * Build it per call; never store it (it holds closures).
+ */
+export function sliderView(state) {
+    const view = {
+        ...state.slider,
+        // Upstream returns the channel's step / pageSize over the slider state's.
+        step: state.step,
+        pageSize: state.pageSize,
+        // Upstream overrides getThumbValueLabel / getFormattedValue: the channel value formatted for the color.
+        format: {
+            formattedValue: () => getColorSliderFormattedValue(state),
+            thumbValueLabel: (_index) => getColorSliderThumbValueLabel(state),
+        },
+        value: () => colorSliderValue(state).getChannelValue(state.channel),
+        writable: false,
+        scalar: true,
+        onChange: (v) => writeColor(state.cell, untrack(() => colorSliderValue(state)).withChannelValue(state.channel, v), state.onChange),
+        // onChange will have already been called with the right value, this is just to trigger onChangeEnd
+        onChangeEnd: (v) => state.onChangeEnd?.(untrack(() => colorSliderValue(state)).withChannelValue(state.channel, v)),
+    };
+    return view;
+}
+/** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */
+export function getColorSliderDisplayColor(state) {
+    const color = colorSliderValue(state);
+    switch (state.channel) {
+        case "hue":
+            return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
+        case "lightness":
+        case "brightness":
+        case "saturation":
+        case "red":
+        case "green":
+        case "blue":
+            return color.withChannelValue("alpha", 1);
+        case "alpha": {
+            return color;
+        }
+        default:
+            throw new Error("Unknown color channel: " + state.channel);
+    }
+}
+/** The thumb's value label: the channel value formatted for `locale`. */
+export const getColorSliderThumbValueLabel = (state) => colorSliderValue(state).formatChannelValue(state.channel, state.locale);
+/** The formatted value: the channel value formatted for `locale`. */
+export const getColorSliderFormattedValue = (state) => colorSliderValue(state).formatChannelValue(state.channel, state.locale);
+/** Whether the color slider is currently being dragged. */
+export const isColorSliderDragging = (state) => isThumbDragging(state.slider, 0);

package/color/value.d.ts

@@ -0,0 +1,27 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type Color } from "./color.js";
+/** A stored color value: a parseable string, a Color, or null / undefined (empty). */
+export type ColorValue = string | Color | null | undefined;
+/**
+ * Controlled color input: a two-way signal (the state writes it), a read-only accessor (Rivet: a controlled value
+ * that changes — the state only calls `onChange`, like a React controlled prop; ColorPicker provides one), or a
+ * fixed plain value.
+ */
+export type ColorInput<T extends ColorValue = string | Color> = T | Signal<T> | (() => T);
+export interface ColorCell<T extends ColorValue = ColorValue> {
+    /** Value source; read with `read()` (a Signal when `writable`). */
+    readonly read: () => T;
+    /** Whether writes go to `read` (uncontrolled or a two-way signal). */
+    readonly writable: boolean;
+}
+/** A controlled source that is read, not parsed: a Signal or an accessor. */
+export declare const isColorSource: (v: unknown) => v is () => ColorValue;
+export declare const isSignal: <T>(v: unknown) => v is Signal<T>;
+/** react-stately `useControlledState(value, defaultValue)`: controlled when `input !== undefined`. */
+export declare function colorCell<T extends ColorValue>(input: ColorInput<T> | undefined, defaultValue: T): ColorCell<T>;
+/**
+ * useControlledState `setValue`: no-op when the color is unchanged (same `colorKey`; upstream compares
+ * object identity), else writes the cell (a Color into a signal holding a Color, otherwise the lossless
+ * string) and calls `onChange`.
+ */
+export declare function writeColor<C extends Color | null>(cell: ColorCell, color: C, onChange: ((value: C) => void) | undefined): void;

package/color/value.js

@@ -0,0 +1,36 @@
+// Rivet plumbing for the color states (port of react-stately `useControlledState` semantics over signals).
+// Not a port: the stored value is a color string (or a Color in a user-owned signal); Color class
+// instances are not serializable, so uncontrolled state keeps `stringifyColor` strings.
+import { signal, untrack, _regionState } from "@rivetjs/reactivity";
+import { colorKey, stringifyColor } from "./color.js";
+/** A controlled source that is read, not parsed: a Signal or an accessor. */
+export const isColorSource = (v) => typeof v === "function";
+export const isSignal = (v) => typeof v === "function" && typeof v.set === "function";
+/** react-stately `useControlledState(value, defaultValue)`: controlled when `input !== undefined`. */
+export function colorCell(input, defaultValue) {
+    if (input === undefined) {
+        const initial = (defaultValue != null && typeof defaultValue !== "string" ? stringifyColor(defaultValue) : defaultValue);
+        return { read: _regionState(() => signal(initial)), writable: true };
+    }
+    if (isSignal(input))
+        return { read: input, writable: true };
+    if (typeof input === "function")
+        return { read: input, writable: false };
+    const fixed = (input != null && typeof input !== "string" ? stringifyColor(input) : input);
+    return { read: _regionState(() => signal(fixed)), writable: false };
+}
+/**
+ * useControlledState `setValue`: no-op when the color is unchanged (same `colorKey`; upstream compares
+ * object identity), else writes the cell (a Color into a signal holding a Color, otherwise the lossless
+ * string) and calls `onChange`.
+ */
+export function writeColor(cell, color, onChange) {
+    const current = untrack(cell.read);
+    if (colorKey(current) === colorKey(color))
+        return;
+    if (cell.writable) {
+        const stored = color == null ? color : current != null && typeof current !== "string" ? color : stringifyColor(color);
+        cell.read.set(stored);
+    }
+    onChange?.(color);
+}

package/color/wheel-state.d.ts

@@ -0,0 +1,77 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type Color } from "./color.js";
+import { type ColorCell, type ColorInput } from "./value.js";
+export interface ColorWheelProps {
+    /** The current value (controlled): a two-way signal or a fixed value. */
+    value?: ColorInput;
+    /**
+     * The default value (uncontrolled).
+     *
+     * @default 'hsl(0, 100%, 50%)'
+     */
+    defaultValue?: string | Color;
+    /** Whether the ColorWheel is disabled. */
+    isDisabled?: boolean;
+    /** Handler that is called when the value changes, as the user drags. */
+    onChange?: (value: Color) => void;
+    /** Handler that is called when the user stops dragging. */
+    onChangeEnd?: (value: Color) => void;
+}
+export interface ColorWheelState {
+    readonly kind: "wheel";
+    readonly cell: ColorCell<string | Color>;
+    /** The default color value (lossless color string). */
+    readonly defaultValue: string;
+    /** Whether the color wheel is currently being dragged. */
+    readonly dragging: Signal<boolean>;
+    /** The step value of the hue channel, used when incrementing and decrementing. */
+    readonly step: number;
+    /** The page step value of the hue channel, used when incrementing and decrementing. */
+    readonly pageStep: number;
+    /** Whether the color wheel is disabled (at creation; read `isColorWheelDisabled(state)`, follows a live `disabled`). */
+    readonly isDisabled: boolean;
+    /** Rivet (live props): the caller's `isDisabled` accessor, when it passed one. */
+    readonly disabled?: () => boolean | undefined;
+    readonly onChange: ((value: Color) => void) | undefined;
+    readonly onChangeEnd: ((value: Color) => void) | undefined;
+    /** Upstream refs: last color set (string), dragging flag. */
+    readonly refs: {
+        value: string;
+        dragging: boolean;
+    };
+}
+/**
+ * Provides state management for a color wheel component.
+ * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export declare function createColorWheelState(props: ColorWheelProps): ColorWheelState;
+/** Whether the color wheel is disabled now (its live `isDisabled` accessor, else the creation value). */
+export declare const isColorWheelDisabled: (state: ColorWheelState) => boolean;
+/** The current color value represented by the color wheel (hsl / hsb; rgb values convert to hsl). */
+export declare const colorWheelValue: (state: ColorWheelState) => Color;
+/** The default color value. */
+export declare const colorWheelDefaultValue: (state: ColorWheelState) => Color;
+/** Sets the color value represented by the color wheel, and triggers `onChange`. */
+export declare function setColorWheelValue(state: ColorWheelState, v: string | Color): void;
+/** The current value of the hue channel displayed by the color wheel. */
+export declare const getHue: (state: ColorWheelState) => number;
+/** Sets the hue channel of the current color value and triggers `onChange`. */
+export declare function setHue(state: ColorWheelState, v: number): void;
+/**
+ * Sets the hue channel of the current color value based on the given coordinates and radius of
+ * the color wheel, and triggers `onChange`.
+ */
+export declare function setHueFromPoint(state: ColorWheelState, x: number, y: number, radius: number): void;
+/** Returns the coordinates of the thumb relative to the center point of the color wheel. */
+export declare function getColorWheelThumbPosition(state: ColorWheelState, radius: number): {
+    x: number;
+    y: number;
+};
+/** Increments the hue by the given amount (defaults to 1). */
+export declare function incrementHue(state: ColorWheelState, stepSize?: number): void;
+/** Decrements the hue by the given amount (defaults to 1). */
+export declare function decrementHue(state: ColorWheelState, stepSize?: number): void;
+/** Sets whether the color wheel is being dragged (fires `onChangeEnd` when a drag ends). */
+export declare function setColorWheelDragging(state: ColorWheelState, isDragging: boolean): void;
+/** Returns the color that should be displayed in the color wheel instead of `value`. */
+export declare function getColorWheelDisplayColor(state: ColorWheelState): Color;

package/color/wheel-state.js

@@ -0,0 +1,152 @@
+// Ported from react-stately `useColorWheelState` (packages/react-stately/src/color/useColorWheelState.ts), Apache-2.0, © Adobe.
+// Rivet: plain signals + JSON (serializable); methods are free functions taking the state first
+// (`state.setHue(v)` → `setHue(state, v)`; shared names dispatch on `state.kind` in `./index.ts`).
+// Color stored as a string (`./value.ts`); `valueRef` / `isDraggingRef` → `state.refs`.
+import { signal, untrack, _regionState } from "@rivetjs/reactivity";
+import { normalizeColor, parseColor, stringifyColor } from "./color.js";
+import { colorCell, writeColor } from "./value.js";
+const DEFAULT_COLOR = "hsl(0, 100%, 50%)";
+function roundToStep(value, step) {
+    return Math.round(value / step) * step;
+}
+function mod(n, m) {
+    return ((n % m) + m) % m;
+}
+function roundDown(v) {
+    const r = Math.floor(v);
+    if (r === v) {
+        return v - 1;
+    }
+    else {
+        return r;
+    }
+}
+function degToRad(deg) {
+    return (deg * Math.PI) / 180;
+}
+function radToDeg(rad) {
+    return (rad * 180) / Math.PI;
+}
+// 0deg = 3 o'clock. increases clockwise
+function angleToCartesian(angle, radius) {
+    const rad = degToRad(360 - angle + 90);
+    const x = Math.sin(rad) * radius;
+    const y = Math.cos(rad) * radius;
+    return { x, y };
+}
+function cartesianToAngle(x, y, radius) {
+    const deg = radToDeg(Math.atan2(y / radius, x / radius));
+    return (deg + 360) % 360;
+}
+/**
+ * Provides state management for a color wheel component.
+ * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export function createColorWheelState(props) {
+    const { value: propsValue, onChange, onChangeEnd } = props;
+    let { defaultValue } = props;
+    if (!propsValue && !defaultValue) {
+        defaultValue = DEFAULT_COLOR;
+    }
+    const cell = colorCell(propsValue, (defaultValue ?? DEFAULT_COLOR));
+    const initialValue = normalizeColor(untrack(cell.read));
+    // The hue channel range is the same in hsl and hsb.
+    const { step, pageSize: pageStep } = parseColor(DEFAULT_COLOR).getChannelRange("hue");
+    // Rivet (live props): an `isDisabled` accessor is stored as given (`isColorWheelDisabled` reads it).
+    const disabled = typeof props.isDisabled === "function" ? props.isDisabled : undefined;
+    return {
+        kind: "wheel",
+        cell,
+        defaultValue: stringifyColor(propsValue !== undefined ? initialValue : normalizeColor(defaultValue)),
+        dragging: _regionState(() => signal(false)),
+        step,
+        pageStep,
+        isDisabled: disabled ? !!untrack(disabled) : props.isDisabled || false,
+        ...(disabled ? { disabled } : {}),
+        onChange,
+        onChangeEnd,
+        refs: { value: stringifyColor(toWheelColor(initialValue)), dragging: false },
+    };
+}
+/** Whether the color wheel is disabled now (its live `isDisabled` accessor, else the creation value). */
+export const isColorWheelDisabled = (state) => (state.disabled ? !!state.disabled() : state.isDisabled);
+function toWheelColor(stateValue) {
+    const colorSpace = stateValue.getColorSpace();
+    return colorSpace === "hsl" || colorSpace === "hsb" ? stateValue : stateValue.toFormat("hsl");
+}
+/** The current color value represented by the color wheel (hsl / hsb; rgb values convert to hsl). */
+export const colorWheelValue = (state) => toWheelColor(normalizeColor(state.cell.read()));
+/** The default color value. */
+export const colorWheelDefaultValue = (state) => parseColor(state.defaultValue);
+function setColor(state, value) {
+    state.refs.value = stringifyColor(value);
+    writeColor(state.cell, value, state.onChange);
+}
+/** Sets the color value represented by the color wheel, and triggers `onChange`. */
+export function setColorWheelValue(state, v) {
+    setColor(state, normalizeColor(v));
+}
+/** The current value of the hue channel displayed by the color wheel. */
+export const getHue = (state) => colorWheelValue(state).getChannelValue("hue");
+/** Sets the hue channel of the current color value and triggers `onChange`. */
+export function setHue(state, v) {
+    const value = untrack(() => colorWheelValue(state));
+    const hue = value.getChannelValue("hue");
+    if (v > 360) {
+        // Make sure you can always get back to 0.
+        v = 0;
+    }
+    v = roundToStep(mod(v, 360), state.step);
+    if (hue !== v) {
+        setColor(state, value.withChannelValue("hue", v));
+    }
+}
+/**
+ * Sets the hue channel of the current color value based on the given coordinates and radius of
+ * the color wheel, and triggers `onChange`.
+ */
+export function setHueFromPoint(state, x, y, radius) {
+    setHue(state, cartesianToAngle(x, y, radius));
+}
+/** Returns the coordinates of the thumb relative to the center point of the color wheel. */
+export function getColorWheelThumbPosition(state, radius) {
+    return angleToCartesian(colorWheelValue(state).getChannelValue("hue"), radius);
+}
+/** Increments the hue by the given amount (defaults to 1). */
+export function incrementHue(state, stepSize = 1) {
+    const value = untrack(() => colorWheelValue(state));
+    const { minValue: minValueX, maxValue: maxValueX } = value.getChannelRange("hue");
+    const s = Math.max(stepSize, state.step);
+    let newValue = value.getChannelValue("hue") + s;
+    if (newValue >= maxValueX) {
+        // Make sure you can always get back to 0.
+        newValue = minValueX;
+    }
+    setHue(state, roundToStep(mod(newValue, 360), s));
+}
+/** Decrements the hue by the given amount (defaults to 1). */
+export function decrementHue(state, stepSize = 1) {
+    const hue = untrack(() => getHue(state));
+    const s = Math.max(stepSize, state.step);
+    if (hue === 0) {
+        // We can't just subtract step because this might be the case:
+        // |(previous step) - 0| < step size
+        setHue(state, roundDown(360 / s) * s);
+    }
+    else {
+        setHue(state, roundToStep(mod(hue - s, 360), s));
+    }
+}
+/** Sets whether the color wheel is being dragged (fires `onChangeEnd` when a drag ends). */
+export function setColorWheelDragging(state, isDragging) {
+    const wasDragging = state.refs.dragging;
+    state.refs.dragging = isDragging;
+    if (state.onChangeEnd && !isDragging && wasDragging) {
+        state.onChangeEnd(parseColor(state.refs.value));
+    }
+    state.dragging.set(isDragging);
+}
+/** Returns the color that should be displayed in the color wheel instead of `value`. */
+export function getColorWheelDisplayColor(state) {
+    return colorWheelValue(state).toFormat("hsl").withChannelValue("saturation", 100).withChannelValue("lightness", 50).withChannelValue("alpha", 1);
+}