@enigmax/primitives 0.22.0 → 0.24.0

package/dist/{chunk-FWVWX67R.js → chunk-FGBIZDV2.js}

@@ -1,6 +1,6 @@
-import { createRecentStore, shortcutLabel, moveActive, groupRows, isPaletteShortcut } from './chunk-DTWZDONY.js';
-import { subsequenceMatcher, createSearch } from './chunk-D5A2ZMAG.js';
 import { Slot } from './chunk-HS3X3XCW.js';
+import { createRecentStore, shortcutLabel, moveActive, groupRows, isPaletteShortcut } from './chunk-DTWZDONY.js';
+import { subsequenceMatcher, createSearch, shortenQuery } from './chunk-4ZPMP47J.js';
 import { createPortal } from 'react-dom';
 import { createContext, useContext, useState, useRef, useId, useMemo, useCallback, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -373,7 +373,7 @@ function PaletteList({ children, empty, heading, ...props }) {
       role: "listbox",
       "aria-label": "Results",
       "data-enigma-palette-list": "",
-      children: palette.rows.length === 0 ? empty ?? /* @__PURE__ */ jsx("p", { "data-enigma-palette-empty": "", children: palette.query.trim() ? `Nothing matches "${palette.query.trim()}".` : "Type to search." }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.label, "data-enigma-palette-group": "", children: [
+      children: palette.rows.length === 0 ? empty ?? /* @__PURE__ */ jsx("p", { "data-enigma-palette-empty": "", children: palette.query.trim() ? `Nothing matches "${shortenQuery(palette.query)}".` : "Type to search." }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": group.label, "data-enigma-palette-group": "", children: [
         heading !== null && (heading?.(group.label) ?? // The group carries the name already, so announcing the
         // heading again would only repeat it.
         /* @__PURE__ */ jsx("p", { "data-enigma-palette-group-label": "", "aria-hidden": "true", children: group.label })),

package/dist/chunk-N6PDHMAX.js

@@ -0,0 +1,213 @@
+import { createSelection } from './chunk-WSQC3PCC.js';
+import { useId, useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MARQUEE_SLOP = 4;
+function useSelection(options) {
+  const { items, scrollIntoView = true, ...rest } = options;
+  const id = useId();
+  const listRef = useRef(null);
+  const latest = useRef(options);
+  latest.current = options;
+  const instance = useMemo(() => createSelection({
+    items,
+    getId: (item, index) => (latest.current.getId ?? ((_, position) => String(position)))(item, index),
+    disabled: (item, index) => Boolean(latest.current.disabled?.(item, index)),
+    onCommand: (event) => latest.current.onCommand?.(event),
+    onSelectionChange: (ids, chosen) => latest.current.onSelectionChange?.(ids, chosen)
+    // Built once: rebuilding it would drop the selection and the cursor on every render.
+    // Everything below is pushed in through update().
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+  const [state, setState] = useState(() => instance.state);
+  useEffect(() => {
+    const unsubscribe = instance.subscribe(setState);
+    setState(instance.state);
+    return () => {
+      unsubscribe();
+      instance.destroy();
+    };
+  }, [instance]);
+  const { multiple, columns, page, shortcuts } = rest;
+  const shortcutSignature = JSON.stringify(shortcuts ?? null);
+  useEffect(() => {
+    instance.update({ items, multiple, columns, page, shortcuts: latest.current.shortcuts });
+  }, [instance, items, multiple, columns, page, shortcutSignature]);
+  const cursor = state.cursor;
+  useEffect(() => {
+    if (!scrollIntoView || cursor < 0) return;
+    const row = listRef.current?.querySelector(`[data-enigma-selection-index="${cursor}"]`);
+    row?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [cursor, scrollIntoView]);
+  const isSelected = useCallback((rowId) => state.selectedSet.has(rowId), [state.selectedSet]);
+  const itemId = useCallback((index) => `${id}-item-${index}`, [id]);
+  const getListProps = useCallback((props = {}) => ({
+    ...props,
+    ref: (node) => {
+      listRef.current = node;
+    },
+    id: `${id}-list`,
+    role: props.role ?? "listbox",
+    "aria-multiselectable": (latest.current.multiple ?? true) || void 0,
+    // A single tab stop, with the arrows moving a cursor INSIDE it: a list of two hundred
+    // rows that are each tabbable is a list nobody can tab past.
+    tabIndex: props.tabIndex ?? 0,
+    "aria-activedescendant": state.cursor >= 0 ? itemId(state.cursor) : void 0,
+    "data-enigma-selection-list": "",
+    "data-selected-count": String(state.count),
+    onKeyDown: (event) => {
+      props.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (instance.keyDown(event)) event.preventDefault();
+    }
+  }), [id, instance, itemId, state.cursor, state.count]);
+  const getItemProps = useCallback((index, props = {}) => {
+    const item = latest.current.items[index];
+    const rowId = item === void 0 ? null : (latest.current.getId ?? ((_, position) => String(position)))(item, index);
+    const disabled = item !== void 0 && Boolean(latest.current.disabled?.(item, index));
+    const chosen = rowId !== null && state.selectedSet.has(rowId);
+    return {
+      ...props,
+      id: itemId(index),
+      role: props.role ?? "option",
+      "aria-selected": chosen,
+      "aria-disabled": disabled || void 0,
+      "data-enigma-selection-item": "",
+      "data-enigma-selection-index": String(index),
+      "data-selected": chosen ? "" : void 0,
+      "data-cursor": state.cursor === index ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      onPointerDown: (event) => {
+        props.onPointerDown?.(event);
+        if (event.defaultPrevented || disabled || event.button !== 0) return;
+        instance.click(index, event);
+      },
+      onContextMenu: (event) => {
+        props.onContextMenu?.(event);
+        if (event.defaultPrevented || disabled) return;
+        if (rowId !== null && !state.selectedSet.has(rowId)) instance.click(index);
+      }
+    };
+  }, [instance, itemId, state.selectedSet, state.cursor]);
+  const [marquee, setMarquee] = useState(null);
+  const drag = useRef(null);
+  const getMarqueeProps = useCallback((props = {}) => ({
+    ...props,
+    onPointerDown: (event) => {
+      props.onPointerDown?.(event);
+      if (event.defaultPrevented || event.button !== 0) return;
+      if (event.target.closest("[data-enigma-selection-item]")) return;
+      drag.current = { x: event.clientX, y: event.clientY, pointer: event.pointerId };
+    }
+  }), []);
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const move = (event) => {
+      const start = drag.current;
+      if (!start || event.pointerId !== start.pointer) return;
+      if (!marquee && Math.abs(event.clientX - start.x) < MARQUEE_SLOP && Math.abs(event.clientY - start.y) < MARQUEE_SLOP) return;
+      if (!marquee) instance.beginMarquee(event.ctrlKey || event.metaKey);
+      const bounds = list.getBoundingClientRect();
+      const left = Math.min(start.x, event.clientX);
+      const top = Math.min(start.y, event.clientY);
+      const rect = {
+        left: left - bounds.left + list.scrollLeft,
+        top: top - bounds.top + list.scrollTop,
+        width: Math.abs(event.clientX - start.x),
+        height: Math.abs(event.clientY - start.y)
+      };
+      setMarquee(rect);
+      const covered = [];
+      for (const row of list.querySelectorAll("[data-enigma-selection-item]")) {
+        const box = row.getBoundingClientRect();
+        const hits = box.right >= Math.min(start.x, event.clientX) && box.left <= Math.max(start.x, event.clientX) && box.bottom >= Math.min(start.y, event.clientY) && box.top <= Math.max(start.y, event.clientY);
+        if (hits) covered.push(Number(row.dataset.enigmaSelectionIndex));
+      }
+      instance.marqueeTo(covered);
+    };
+    const up = () => {
+      if (!drag.current) return;
+      drag.current = null;
+      setMarquee(null);
+      instance.endMarquee();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+    };
+  }, [instance, marquee]);
+  return {
+    instance,
+    state,
+    isSelected,
+    getListProps,
+    getItemProps,
+    getMarqueeProps,
+    marquee,
+    ids: { list: `${id}-list` },
+    itemId
+  };
+}
+function SelectionList(props) {
+  const {
+    items,
+    getId,
+    disabled,
+    multiple,
+    columns,
+    page,
+    shortcuts,
+    onCommand,
+    onSelectionChange,
+    scrollIntoView,
+    children,
+    empty,
+    marquee = true,
+    ...rest
+  } = props;
+  const selection = useSelection({
+    items,
+    getId,
+    disabled,
+    multiple,
+    columns,
+    page,
+    shortcuts,
+    onCommand,
+    onSelectionChange,
+    scrollIntoView
+  });
+  const listProps = selection.getListProps(rest);
+  const containerProps = marquee ? selection.getMarqueeProps(listProps) : listProps;
+  return (
+    // `position: relative` is the one style this component sets, and it is not a look: the
+    // rubber band is absolutely positioned inside, and without a positioned ancestor it
+    // would be drawn against the page instead of against the list.
+    /* @__PURE__ */ jsxs("div", { ...containerProps, style: { position: "relative", ...rest.style }, children: [
+      items.length === 0 && empty !== void 0 ? /* @__PURE__ */ jsx("div", { "data-enigma-selection-empty": "", children: empty }) : items.map((item, index) => /* @__PURE__ */ jsx("div", { ...selection.getItemProps(index), children: children({
+        item,
+        index,
+        selected: selection.state.selectedSet.has(getId ? getId(item, index) : String(index)),
+        cursor: selection.state.cursor === index,
+        disabled: Boolean(disabled?.(item, index))
+      }) }, getId ? getId(item, index) : index)),
+      selection.marquee && // The band is drawn, not just computed: without something on screen a drag over
+      // empty space looks like the list selecting rows at random.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-enigma-selection-marquee": "",
+          style: { position: "absolute", pointerEvents: "none", ...selection.marquee }
+        }
+      )
+    ] })
+  );
+}
+
+export { SelectionList, useSelection };

package/dist/chunk-NONGREXC.js

@@ -0,0 +1,248 @@
+import { typeaheadStep } from './chunk-4VUHQFAT.js';
+import { createSearch } from './chunk-4ZPMP47J.js';
+
+// src/core/select.ts
+var SELECT_SEARCH_KEYS = ["label", "description", "group", "keywords"];
+var PAGE = 5;
+function fold(value) {
+  return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+}
+function toList(value) {
+  if (value == null) return [];
+  const list = Array.isArray(value) ? [...value] : [value];
+  return list.filter((entry) => entry !== "");
+}
+function sameValues(left, right) {
+  return left.length === right.length && left.every((entry, index) => entry === right[index]);
+}
+function sameRows(left, right) {
+  return left.length === right.length && left.every((option, index) => option === right[index]);
+}
+function sameState(left, right) {
+  return left.open === right.open && left.query === right.query && left.active === right.active && left.multiple === right.multiple && left.empty === right.empty && sameValues(left.value, right.value) && sameRows(left.visible, right.visible) && sameRows(left.selected, right.selected);
+}
+function createSelect(options = {}) {
+  let opts = { ...options };
+  let all = opts.options ?? [];
+  let value = toList(opts.value);
+  let open = false;
+  let query = "";
+  let active = -1;
+  let visible = [...all];
+  let typed = "";
+  let typedAt = 0;
+  let destroyed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const engine = createSearch({
+    items: all,
+    keys: opts.searchKeys ?? SELECT_SEARCH_KEYS,
+    fuse: opts.fuse,
+    fuseOptions: opts.fuseOptions,
+    matcher: opts.matcher,
+    // A select filters as you type. There is nothing to debounce: the data is already
+    // in memory, and a delay here is felt as the list lagging behind the field.
+    debounce: 0,
+    // An empty query in a select means "everything", not "nothing" - the opposite of a
+    // search field, where an empty query has nothing to show.
+    empty: "all"
+  });
+  function optionOf(candidate) {
+    return all.find((option) => option.value === candidate);
+  }
+  function selectedOptions() {
+    return value.map(optionOf).filter((option) => Boolean(option));
+  }
+  function snapshot() {
+    return {
+      open,
+      query,
+      active,
+      visible,
+      selected: selectedOptions(),
+      value: [...value],
+      multiple: Boolean(opts.multiple),
+      empty: visible.length === 0
+    };
+  }
+  function emit() {
+    const state = snapshot();
+    opts.onChange?.(state);
+    for (const listener of listeners) listener(state);
+  }
+  function wrap(index) {
+    const length = visible.length;
+    return (index % length + length) % length;
+  }
+  function enabledIndex(from, step) {
+    if (visible.length === 0) return -1;
+    for (let attempt = 0; attempt < visible.length; attempt++) {
+      const index = wrap(from + step * attempt);
+      if (!visible[index]?.disabled) return index;
+    }
+    return -1;
+  }
+  let lastActive;
+  function refilter() {
+    visible = opts.searchable && query.trim() ? engine.searchNow(query).map((match) => match.item) : [...all];
+    const current = active >= 0 ? visible.findIndex((option) => option === lastActive) : -1;
+    active = current >= 0 && !visible[current]?.disabled ? current : enabledIndex(0, 1);
+    lastActive = visible[active];
+  }
+  function reportValue() {
+    const chosen = selectedOptions();
+    opts.onValueChange?.(opts.multiple ? [...value] : value[0] ?? "", chosen);
+  }
+  function closesOnSelect() {
+    return opts.closeOnSelect ?? !opts.multiple;
+  }
+  refilter();
+  return {
+    get state() {
+      return snapshot();
+    },
+    setOpen(next) {
+      if (destroyed || open === next) return;
+      open = next;
+      if (open) {
+        query = "";
+        refilter();
+        const chosen = value[0] ? visible.findIndex((option) => option.value === value[0]) : -1;
+        active = chosen >= 0 && !visible[chosen]?.disabled ? chosen : enabledIndex(0, 1);
+        lastActive = visible[active];
+      } else {
+        query = "";
+        typed = "";
+        refilter();
+      }
+      emit();
+    },
+    toggleOpen() {
+      this.setOpen(!open);
+    },
+    setQuery(next) {
+      if (destroyed) return;
+      query = next;
+      refilter();
+      emit();
+    },
+    move(key) {
+      if (destroyed || visible.length === 0) return;
+      const from = active < 0 ? -1 : active;
+      switch (key) {
+        // Wrapping, because a select is a short list and the row after the last one
+        // is the first: clamping leaves the arrow key doing nothing, which reads as
+        // the panel having frozen.
+        case "ArrowDown":
+          active = enabledIndex(from + 1, 1);
+          break;
+        case "ArrowUp":
+          active = enabledIndex(from - 1 + visible.length, -1);
+          break;
+        case "Home":
+          active = enabledIndex(0, 1);
+          break;
+        case "End":
+          active = enabledIndex(visible.length - 1, -1);
+          break;
+        case "PageDown":
+          active = enabledIndex(Math.min(visible.length - 1, from + PAGE), 1);
+          break;
+        case "PageUp":
+          active = enabledIndex(Math.max(0, from - PAGE), -1);
+          break;
+      }
+      lastActive = visible[active];
+      emit();
+    },
+    setActive(index) {
+      if (destroyed || index === active || index < 0 || index >= visible.length || visible[index]?.disabled) return;
+      active = index;
+      lastActive = visible[active];
+      emit();
+    },
+    select(next) {
+      if (destroyed) return;
+      const option = optionOf(next);
+      if (!option || option.disabled) return;
+      if (opts.multiple) {
+        value = value.includes(next) ? value.filter((entry) => entry !== next) : [...value, next];
+      } else {
+        value = [next];
+      }
+      reportValue();
+      if (closesOnSelect()) {
+        open = false;
+        query = "";
+        refilter();
+      }
+      emit();
+    },
+    selectActive() {
+      const option = visible[active];
+      if (option) this.select(option.value);
+    },
+    remove(next) {
+      if (destroyed || !value.includes(next)) return;
+      value = value.filter((entry) => entry !== next);
+      reportValue();
+      emit();
+    },
+    clear() {
+      if (destroyed || value.length === 0) return;
+      value = [];
+      reportValue();
+      emit();
+    },
+    typeahead(character) {
+      if (destroyed || character.length !== 1) return;
+      const step = typeaheadStep({ typed, at: typedAt }, character);
+      typed = step.typed;
+      typedAt = step.at;
+      const needle = fold(step.needle);
+      const from = step.cycle ? 1 : 0;
+      for (let step2 = from; step2 < visible.length + from; step2++) {
+        const index = wrap(Math.max(active, 0) + step2);
+        const option = visible[index];
+        if (!option || option.disabled) continue;
+        if (fold(option.label).startsWith(needle)) {
+          active = index;
+          lastActive = option;
+          emit();
+          return;
+        }
+      }
+    },
+    update(next) {
+      if (destroyed) return;
+      const before = snapshot();
+      const hadOptions = next.options !== void 0;
+      opts = { ...opts, ...next };
+      if (hadOptions) all = next.options ?? [];
+      if (next.value !== void 0) value = toList(next.value);
+      if (hadOptions || next.searchKeys || next.fuse || next.fuseOptions || next.matcher) {
+        engine.update({
+          items: all,
+          keys: opts.searchKeys ?? SELECT_SEARCH_KEYS,
+          fuse: opts.fuse,
+          fuseOptions: opts.fuseOptions,
+          matcher: opts.matcher
+        });
+      }
+      refilter();
+      if (!sameState(before, snapshot())) emit();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    destroy() {
+      destroyed = true;
+      listeners.clear();
+      engine.destroy();
+    }
+  };
+}
+
+export { SELECT_SEARCH_KEYS, createSelect };

package/dist/{chunk-R4ZAEE7V.js → chunk-QJJ34E4G.js}

@@ -1,3 +1,4 @@
+import { writeValue } from './chunk-S7EE57YB.js';
 import { INPUT_ICON_PATHS } from './chunk-F25CGNQC.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { lazy, forwardRef, useRef, useState, useId, useCallback, useEffect, Suspense } from 'react';
@@ -16,16 +17,15 @@ var ICON_PROPS = {
 function Icon({ paths }) {
   return /* @__PURE__ */ jsx("svg", { ...ICON_PROPS, children: paths.map((path) => /* @__PURE__ */ jsx("path", { d: path }, path)) });
 }
-
-// src/react/input/write-value.ts
-function writeValue(input, next) {
-  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
-  if (setter) setter.call(input, next);
-  else input.value = next;
-  input.dispatchEvent(new Event("input", { bubbles: true }));
-}
+var COLOR_FIELD_PROPS = {
+  autoComplete: "off",
+  autoCorrect: "off",
+  autoCapitalize: "off",
+  spellCheck: false
+};
 var PasswordExtras = lazy(() => import('./password-3DRQYAYQ.js').then((module) => ({ default: module.PasswordExtras })));
-var SearchExtras = lazy(() => import('./search-UQEXAPQB.js').then((module) => ({ default: module.SearchExtras })));
+var SearchExtras = lazy(() => import('./search-PBZORZ7P.js').then((module) => ({ default: module.SearchExtras })));
+var ColorExtras = lazy(() => import('./color-OPV3BJV6.js').then((module) => ({ default: module.ColorExtras })));
 var Input = forwardRef(function Input2(props, forwardedRef) {
   const {
     reveal,
@@ -53,6 +53,13 @@ var Input = forwardRef(function Input2(props, forwardedRef) {
     renderResults,
     clearable,
     clearLabel = "Clear",
+    format,
+    alpha,
+    swatches,
+    eyedropper,
+    placement,
+    styles,
+    colorLabels,
     wrapperProps,
     fieldProps,
     classNames,
@@ -67,6 +74,7 @@ var Input = forwardRef(function Input2(props, forwardedRef) {
   const describedBy = useId();
   const isPassword = type === "password";
   const isSearch = type === "search";
+  const isColor = type === "color";
   const showReveal = reveal ?? isPassword;
   const showGenerate = generate !== false && isPassword;
   const showClear = (clearable ?? isSearch) && isSearch;
@@ -192,10 +200,26 @@ var Input = forwardRef(function Input2(props, forwardedRef) {
       "data-score": score ?? void 0,
       children: [
         /* @__PURE__ */ jsxs("div", { ...fieldProps, "data-enigma-input-field": "", children: [
+          isColor && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+            ColorExtras,
+            {
+              input: element,
+              value,
+              format,
+              alpha,
+              swatches,
+              eyedropper,
+              placement,
+              styles,
+              locked,
+              labels: colorLabels
+            }
+          ) }),
           position === "start" && buttons,
           /* @__PURE__ */ jsx(
             "input",
             {
+              ...isColor ? COLOR_FIELD_PROPS : null,
               ...rest,
               ref: (node) => {
                 innerRef.current = node;
@@ -203,7 +227,7 @@ var Input = forwardRef(function Input2(props, forwardedRef) {
                 if (typeof forwardedRef === "function") forwardedRef(node);
                 else if (forwardedRef) forwardedRef.current = node;
               },
-              type: revealed && isPassword ? "text" : type,
+              type: isColor ? "text" : revealed && isPassword ? "text" : type,
               onChange: handleChange,
               "data-enigma-input": "",
               "aria-describedby": score !== null ? describedBy : rest["aria-describedby"]

package/dist/chunk-S2FPN5ID.js

@@ -0,0 +1,115 @@
+// src/core/color.ts
+function clamp(value, min, max) {
+  return value < min ? min : value > max ? max : value;
+}
+function clampAlpha(value) {
+  return Number.isFinite(value) ? clamp(value, 0, 1) : 1;
+}
+function channel(value) {
+  return Math.round(clamp(value, 0, 255));
+}
+function ratio(token, scale) {
+  const text = token.trim();
+  const value = Number.parseFloat(text);
+  if (!Number.isFinite(value)) return Number.NaN;
+  return text.endsWith("%") ? value / 100 * scale : value;
+}
+function components(body) {
+  return body.split(/[\s,/]+/).map((part) => part.trim()).filter(Boolean);
+}
+function parseColor(input) {
+  const text = input.trim().toLowerCase();
+  if (!text) return null;
+  if (text === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+  const hex = /^#?([0-9a-f]+)$/.exec(text);
+  if (hex) return fromHex(hex[1]);
+  const functional = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(text);
+  if (!functional) return null;
+  const parts = components(functional[2]);
+  if (parts.length < 3 || parts.length > 4) return null;
+  const alpha = parts.length === 4 ? clampAlpha(ratio(parts[3], 1)) : 1;
+  if (functional[1].startsWith("rgb")) {
+    const values = parts.slice(0, 3).map((part) => ratio(part, 255));
+    if (values.some((value) => !Number.isFinite(value))) return null;
+    return { r: channel(values[0]), g: channel(values[1]), b: channel(values[2]), a: alpha };
+  }
+  const hue = Number.parseFloat(parts[0]);
+  const saturation = ratio(parts[1], 1);
+  const lightness = ratio(parts[2], 1);
+  if (!Number.isFinite(hue) || !Number.isFinite(saturation) || !Number.isFinite(lightness)) return null;
+  return hslToRgb({ h: hue, s: clamp(saturation, 0, 1), l: clamp(lightness, 0, 1), a: alpha });
+}
+function fromHex(digits) {
+  const size = digits.length;
+  if (size !== 3 && size !== 4 && size !== 6 && size !== 8) return null;
+  const short = size <= 4;
+  const at = (index) => {
+    const slice = short ? digits[index].repeat(2) : digits.slice(index * 2, index * 2 + 2);
+    return Number.parseInt(slice, 16);
+  };
+  const alpha = size === 4 || size === 8 ? at(3) / 255 : 1;
+  return { r: at(0), g: at(1), b: at(2), a: clampAlpha(alpha) };
+}
+function toHex(color, options = {}) {
+  const pair = (value) => channel(value).toString(16).padStart(2, "0");
+  const alpha = clampAlpha(color.a);
+  const suffix = options.alpha && alpha < 1 ? pair(Math.round(alpha * 255)) : "";
+  return `#${pair(color.r)}${pair(color.g)}${pair(color.b)}${suffix}`;
+}
+function formatColor(color, format = "hex", options = {}) {
+  const alpha = clampAlpha(color.a);
+  const opaque = !options.alpha || alpha >= 1;
+  const printed = Number.parseFloat(alpha.toFixed(3));
+  if (format === "hex") return toHex(color, options);
+  if (format === "rgb") {
+    const body2 = `${channel(color.r)}, ${channel(color.g)}, ${channel(color.b)}`;
+    return opaque ? `rgb(${body2})` : `rgba(${body2}, ${printed})`;
+  }
+  const hsl = rgbToHsl(color);
+  const body = `${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%`;
+  return opaque ? `hsl(${body})` : `hsla(${body}, ${printed})`;
+}
+function rgbToHsv(color, fallbackHue = 0) {
+  const r = clamp(color.r, 0, 255) / 255;
+  const g = clamp(color.g, 0, 255) / 255;
+  const b = clamp(color.b, 0, 255) / 255;
+  const max = Math.max(r, g, b);
+  const span = max - Math.min(r, g, b);
+  let h = fallbackHue;
+  if (span > 0) {
+    if (max === r) h = (g - b) / span % 6;
+    else if (max === g) h = (b - r) / span + 2;
+    else h = (r - g) / span + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: max === 0 ? 0 : span / max, v: max, a: clampAlpha(color.a) };
+}
+function hsvToRgb(color) {
+  const h = (color.h % 360 + 360) % 360;
+  const s = clamp(color.s, 0, 1);
+  const v = clamp(color.v, 0, 1);
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  const [r, g, b] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  return { r: channel((r + m) * 255), g: channel((g + m) * 255), b: channel((b + m) * 255), a: clampAlpha(color.a) };
+}
+function rgbToHsl(color, fallbackHue = 0) {
+  const hsv = rgbToHsv(color, fallbackHue);
+  const l = hsv.v * (1 - hsv.s / 2);
+  const s = l === 0 || l === 1 ? 0 : (hsv.v - l) / Math.min(l, 1 - l);
+  return { h: hsv.h, s: clamp(s, 0, 1), l, a: hsv.a };
+}
+function hslToRgb(color) {
+  const s = clamp(color.s, 0, 1);
+  const l = clamp(color.l, 0, 1);
+  const v = l + s * Math.min(l, 1 - l);
+  return hsvToRgb({ h: color.h, s: v === 0 ? 0 : 2 * (1 - l / v), v, a: color.a });
+}
+function colorEquals(a, b) {
+  if (!a || !b) return a === b;
+  return channel(a.r) === channel(b.r) && channel(a.g) === channel(b.g) && channel(a.b) === channel(b.b) && Math.round(clampAlpha(a.a) * 255) === Math.round(clampAlpha(b.a) * 255);
+}
+
+export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex };

package/dist/chunk-S7EE57YB.js

@@ -0,0 +1,9 @@
+// src/react/input/write-value.ts
+function writeValue(input, next) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (setter) setter.call(input, next);
+  else input.value = next;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+export { writeValue };