@proyecto-viviana/solid-stately 0.5.0 → 0.6.0-rc.0

package/src/collections/createListState.ts

@@ -1,10 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/list/useListState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/list/useSingleSelectListState.ts
+
 /**
  * State management for list-like components.
  * Combines collection and selection state.
- * Based on @react-stately/list.
+ * Ported from:
+ * - packages/react-stately/src/list/useListState.ts
+ * - packages/react-stately/src/list/useSingleSelectListState.ts
  */
 
-import { createMemo, createEffect, untrack, type Accessor } from "solid-js";
+import { createMemo, createEffect } from "solid-js";
+import type { Accessor } from "solid-js";
 import { access, type MaybeAccessor } from "../utils";
 import { ListCollection } from "./ListCollection";
 import type { SelectionState, SelectionPressEvent } from "./createSelectionState";
@@ -242,9 +260,8 @@ export function createFilteredListState<T = unknown>(
   // forward (then backward) through the previous collection to the nearest
   // surviving, enabled item. Mirrors @react-stately's useFocusedKeyReset.
   let cachedCollection: Collection<T> | null = null;
-  createEffect(() => {
-    const coll = collection();
-    const focusedKey = untrack(() => state.focusedKey());
+  createEffect(collection, (coll) => {
+    const focusedKey = state.focusedKey();
     if (focusedKey != null && !coll.getItem(focusedKey) && cachedCollection) {
       let key = cachedCollection.getKeyAfter(focusedKey);
       let nextFocusedKey: Key | null = null;
@@ -267,7 +284,7 @@ export function createFilteredListState<T = unknown>(
           key = cachedCollection.getKeyBefore(key);
         }
       }
-      untrack(() => state.setFocusedKey(nextFocusedKey));
+      state.setFocusedKey(nextFocusedKey);
     }
     cachedCollection = coll;
   });

package/src/collections/createMenuState.ts

@@ -1,9 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/menu/useMenuTriggerState.ts
+
 /**
  * State management for menu components.
- * Based on @react-stately/menu.
+ *
+ * createMenuTriggerState is ported from
+ * packages/react-stately/src/menu/useMenuTriggerState.ts.
+ * createMenuState is a local composition of the separately attributed list state.
  */
 
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+
+import { createOverlayTriggerState, type OverlayTriggerProps } from "../overlays";
 import { createListState, type ListState, type ListStateProps } from "./createListState";
 import type { Key } from "./types";
 
@@ -84,32 +103,58 @@ export function createMenuState<T = unknown>(
   };
 }
 
-export interface MenuTriggerStateProps {
-  /** Whether the menu is open (controlled). */
-  isOpen?: boolean;
-  /** Default open state (uncontrolled). */
-  defaultOpen?: boolean;
-  /** Handler called when the open state changes. */
-  onOpenChange?: (isOpen: boolean) => void;
+export type MenuTriggerType = "press" | "longPress" | "contextMenu";
+
+export interface MenuTriggerProps extends OverlayTriggerProps {
+  /** How the menu is triggered. */
+  trigger?: MenuTriggerType;
 }
 
+/** @deprecated Use `MenuTriggerProps`. */
+export interface MenuTriggerStateProps extends MenuTriggerProps {}
+
 export interface MenuTriggerState {
   /** Whether the menu is open. */
   readonly isOpen: () => boolean;
+  /** Sets whether the menu is open. */
+  setOpen(isOpen: boolean): void;
   /** Open the menu. */
-  open(): void;
+  open(focusStrategy?: "first" | "last" | null): void;
   /** Close the menu. */
   close(): void;
   /** Toggle the menu. */
-  toggle(): void;
+  toggle(focusStrategy?: "first" | "last" | null): void;
   /** Focus strategy for when the menu opens. */
   readonly focusStrategy: () => "first" | "last" | null;
   /** Set the focus strategy. */
   setFocusStrategy(strategy: "first" | "last" | null): void;
+  /** Cursor position relative to the window viewport. */
+  readonly point: () => { x: number; y: number } | null;
+  /** Sets the cursor position relative to the window viewport. */
+  setPoint(point: { x: number; y: number }): void;
 }
 
 /**
- * Creates state for a menu trigger (button that opens a menu).
- * This is essentially the same as overlay trigger state but with focus strategy.
+ * Creates state for a menu trigger. Mirrors `@react-stately/menu` `useMenuTriggerState`:
+ * overlay open state plus the focus strategy passed through to `createMenu`.
  */
-export { createOverlayTriggerState as createMenuTriggerState } from "../overlays";
+export function createMenuTriggerState(
+  props: MaybeAccessor<MenuTriggerProps> = {},
+): MenuTriggerState {
+  const overlay = createOverlayTriggerState(props);
+  const [focusStrategy, setFocusStrategy] = createInternalSignal<"first" | "last" | null>(null);
+
+  return {
+    ...overlay,
+    focusStrategy,
+    setFocusStrategy,
+    open(strategy: "first" | "last" | null = null) {
+      setFocusStrategy(strategy);
+      overlay.open();
+    },
+    toggle(strategy: "first" | "last" | null = null) {
+      setFocusStrategy(strategy);
+      overlay.toggle();
+    },
+  };
+}

package/src/collections/createSelectionState.ts

@@ -1,14 +1,31 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/selection/SelectionManager.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/selection/useMultipleSelectionState.ts
+
 /**
  * Selection state management for collections.
- * Based on @react-stately/selection.
+ * Ported from:
+ * - packages/react-stately/src/selection/useMultipleSelectionState.ts
+ * - packages/react-stately/src/selection/SelectionManager.ts
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import type {
   Collection,
   DisabledBehavior,
-  FocusStrategy,
   Key,
   Selection,
   SelectionBehavior,
@@ -103,15 +120,15 @@ export function createSelectionState(
   const getProps = () => access(props);
 
   // Selection behavior state
-  const [internalBehavior, setInternalBehavior] = createSignal<SelectionBehavior>("toggle");
+  const [internalBehavior, setInternalBehavior] = createInternalSignal<SelectionBehavior>("toggle");
 
   // Internal selection state
-  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Selection>(
+  const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal<Selection>(
     getInitialSelection(getProps().defaultSelectedKeys),
   );
 
   // Track anchor for range selection
-  const [anchorKey, setAnchorKey] = createSignal<Key | null>(null);
+  const [anchorKey, setAnchorKey] = createInternalSignal<Key | null>(null);
 
   // Computed values
   const selectionMode: Accessor<SelectionMode> = () => getProps().selectionMode ?? "none";
@@ -124,13 +141,13 @@ export function createSelectionState(
     return getProps().disallowEmptySelection ?? false;
   };
 
-  const selectedKeys: Accessor<Selection> = createMemo(() => {
+  const selectedKeys: Accessor<Selection> = () => {
     const p = getProps();
     if (p.selectedKeys !== undefined) {
       return normalizeSelection(p.selectedKeys);
     }
     return internalSelectedKeys();
-  });
+  };
 
   const disabledKeys: Accessor<Set<Key>> = createMemo(() => {
     const keys = getProps().disabledKeys;
@@ -151,8 +168,11 @@ export function createSelectionState(
   };
 
   // Methods
+  const liveSelectedKeys = (): Selection =>
+    getProps().selectedKeys !== undefined ? selectedKeys() : readNow(internalSelectedKeys);
+
   const isSelected = (key: Key): boolean => {
-    const keys = selectedKeys();
+    const keys = liveSelectedKeys();
     if (keys === "all") return true;
     return keys.has(key);
   };
@@ -171,7 +191,7 @@ export function createSelectionState(
     }
 
     // Uncontrolled mode
-    const current = internalSelectedKeys();
+    const current = readNow(internalSelectedKeys);
     const isDifferent =
       current === "all" ||
       newSelection === "all" ||
@@ -188,7 +208,7 @@ export function createSelectionState(
     if (isDisabled(key)) return;
     if (selectionMode() === "none") return;
 
-    const current = selectedKeys();
+    const current = liveSelectedKeys();
 
     if (selectionMode() === "single") {
       if (isSelected(key) && !disallowEmptySelection()) {

package/src/collections/getChildNodes.ts

@@ -1,7 +1,24 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/collections/getChildNodes.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/collections/getItemCount.ts
+
 /**
  * Helpers for traversing collection nodes and comparing their document order.
  *
- * Based on @react-stately/collections.
+ * Ported from:
+ * - packages/react-stately/src/collections/getChildNodes.ts
+ * - packages/react-stately/src/collections/getItemCount.ts
  */
 
 import type { Collection, CollectionNode } from "./types";
@@ -51,8 +68,8 @@ const itemCountCache = new WeakMap<Collection<unknown>, number>();
 
 /**
  * Counts the item nodes (recursing into sections, ignoring section headers and
- * other non-item nodes) in a collection. Faithful port of
- * @react-stately/collections `getItemCount`; used by createOption to populate
+ * other non-item nodes) in a collection. Ported from
+ * packages/react-stately/src/collections/getItemCount.ts; used by createOption to populate
  * `aria-setsize` when the listbox is virtualized. Cached per (immutable)
  * collection identity, exactly like upstream.
  */

package/src/collections/index.ts

@@ -48,6 +48,8 @@ export {
   createMenuTriggerState,
   type MenuStateProps,
   type MenuState,
+  type MenuTriggerType,
+  type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
 } from "./createMenuState";

package/src/collections/types.ts

@@ -1,9 +1,42 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-types/shared/src/collections.d.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-types/shared/src/selection.d.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/collections/BaseCollection.ts
+
 /**
  * Core types for collection state management.
- * Simplified from @react-stately/collections for SolidJS.
+ * Collection state types for SolidJS.
+ *
+ * Ported from:
+ * - packages/@react-types/shared/src/collections.d.ts
+ * - packages/@react-types/shared/src/selection.d.ts
+ * - packages/react-aria/src/collections/BaseCollection.ts
  */
 
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 
 /** A unique identifier for an item in a collection. */
 export type Key = string | number;

package/src/color/Color.ts

@@ -1,6 +1,20 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/Color.ts
+
 /**
  * Color class implementation.
- * Based on @react-stately/color.
+ * Ported from packages/react-stately/src/color/Color.ts.
  *
  * Provides color manipulation, conversion, and formatting.
  */
@@ -12,15 +26,8 @@ import type {
   ColorChannel,
   ColorChannelRange,
   ColorAxes,
-  RGBColor,
-  HSLColor,
-  HSBColor,
 } from "./types";
-import {
-  getColorStringForLocale,
-  formatColorMessage,
-  type ColorStringKey,
-} from "./intl";
+import { getColorStringForLocale, formatColorMessage, type ColorStringKey } from "./intl";
 
 // Channel ranges
 const RGB_CHANNEL_RANGE: ColorChannelRange = {
@@ -77,6 +84,17 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
 
+/**
+ * Normalizes a hue value to [0, 360).
+ * Preserves 360 so linear hue sliders can reach the end of their track.
+ */
+export function normalizeHue(hue: number): number {
+  if (hue === 360) {
+    return hue;
+  }
+  return ((hue % 360) + 360) % 360;
+}
+
 /**
  * Round to fixed decimal places.
  */
@@ -230,7 +248,7 @@ function getOklchHueName(l: number, c: number, h: number, locale: string): [stri
       }
 
       const name = getColorStringForLocale(hueName as ColorStringKey, locale).toLocaleLowerCase(
-        locale
+        locale,
       );
       return [name, l];
     }
@@ -282,7 +300,9 @@ function getColorNameFromColor(color: Color, locale: string): string {
 
   const alpha = color.getChannelValue("alpha");
   if (alpha < 1) {
-    const percentTransparent = new Intl.NumberFormat(locale, { style: "percent" }).format(1 - alpha);
+    const percentTransparent = new Intl.NumberFormat(locale, { style: "percent" }).format(
+      1 - alpha,
+    );
     return formatColorMessage("transparentColorName", locale, {
       lightness,
       chroma,
@@ -565,7 +585,7 @@ class HSLColorImpl implements Color {
   constructor(hue: number, saturation: number, lightness: number, alpha: number = 1) {
     // Store raw like upstream HSLColor's constructor — precision comes from the
     // conversion (toFixed(_, 2)); rounding to integers here diverged from S2.
-    this.hue = clamp(hue % 360, 0, 360);
+    this.hue = clamp(normalizeHue(hue), 0, 360);
     this.saturation = clamp(saturation, 0, 100);
     this.lightness = clamp(lightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
@@ -585,9 +605,16 @@ class HSLColorImpl implements Color {
       }
       case "hsb":
       case "hsba": {
-        const { r, g, b } = hslToRgb(this.hue, this.saturation, this.lightness);
-        const hsb = rgbToHsb(r, g, b);
-        return new HSBColorImpl(hsb.h, hsb.s, hsb.b, this.alpha);
+        const saturation = this.saturation / 100;
+        const lightness = this.lightness / 100;
+        const brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+        const hsbSaturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+        return new HSBColorImpl(
+          toFixed(this.hue, 2),
+          toFixed(hsbSaturation * 100, 2),
+          toFixed(brightness * 100, 2),
+          this.alpha,
+        );
       }
       default:
         throw new Error(`Unsupported format: ${format}`);
@@ -690,7 +717,7 @@ class HSLColorImpl implements Color {
       return { style: "percent" };
     }
     if (channel === "hue") {
-      return { style: "unit", unit: "degree", unitDisplay: "narrow", maximumFractionDigits: 0 };
+      return { style: "unit", unit: "degree", unitDisplay: "narrow" };
     }
     return { style: "percent", maximumFractionDigits: 0 };
   }
@@ -740,7 +767,7 @@ class HSBColorImpl implements Color {
 
   constructor(hue: number, saturation: number, brightness: number, alpha: number = 1) {
     // Store raw like upstream HSBColor's constructor (see HSLColorImpl).
-    this.hue = clamp(hue % 360, 0, 360);
+    this.hue = clamp(normalizeHue(hue), 0, 360);
     this.saturation = clamp(saturation, 0, 100);
     this.brightness = clamp(brightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
@@ -760,9 +787,19 @@ class HSBColorImpl implements Color {
       }
       case "hsl":
       case "hsla": {
-        const { r, g, b } = hsbToRgb(this.hue, this.saturation, this.brightness);
-        const hsl = rgbToHsl(r, g, b);
-        return new HSLColorImpl(hsl.h, hsl.s, hsl.l, this.alpha);
+        const saturation = this.saturation / 100;
+        const brightness = this.brightness / 100;
+        const lightness = brightness * (1 - saturation / 2);
+        const hslSaturation =
+          lightness === 0 || lightness === 1
+            ? 0
+            : (brightness - lightness) / Math.min(lightness, 1 - lightness);
+        return new HSLColorImpl(
+          toFixed(this.hue, 2),
+          toFixed(hslSaturation * 100, 2),
+          toFixed(lightness * 100, 2),
+          this.alpha,
+        );
       }
       default:
         throw new Error(`Unsupported format: ${format}`);
@@ -864,7 +901,7 @@ class HSBColorImpl implements Color {
       return { style: "percent" };
     }
     if (channel === "hue") {
-      return { style: "unit", unit: "degree", unitDisplay: "narrow", maximumFractionDigits: 0 };
+      return { style: "unit", unit: "degree", unitDisplay: "narrow" };
     }
     return { style: "percent", maximumFractionDigits: 0 };
   }
@@ -958,24 +995,24 @@ export function parseColor(value: string): Color {
 
   // HSL/HSLA format
   const hslMatch = trimmed.match(
-    /^hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+    /^hsla?\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*(?:,\s*([-+]?\d+(?:\.\d+)?))?\s*\)$/,
   );
   if (hslMatch) {
-    const h = parseInt(hslMatch[1], 10);
-    const s = parseInt(hslMatch[2], 10);
-    const l = parseInt(hslMatch[3], 10);
+    const h = parseFloat(hslMatch[1]);
+    const s = parseFloat(hslMatch[2]);
+    const l = parseFloat(hslMatch[3]);
     const a = hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : 1;
     return new HSLColorImpl(h, s, l, a);
   }
 
   // HSB/HSBA format
   const hsbMatch = trimmed.match(
-    /^hsba?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+    /^hsba?\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*(?:,\s*([-+]?\d+(?:\.\d+)?))?\s*\)$/,
   );
   if (hsbMatch) {
-    const h = parseInt(hsbMatch[1], 10);
-    const s = parseInt(hsbMatch[2], 10);
-    const b = parseInt(hsbMatch[3], 10);
+    const h = parseFloat(hsbMatch[1]);
+    const s = parseFloat(hsbMatch[2]);
+    const b = parseFloat(hsbMatch[3]);
     const a = hsbMatch[4] !== undefined ? parseFloat(hsbMatch[4]) : 1;
     return new HSBColorImpl(h, s, b, a);
   }

package/src/color/createColorAreaState.ts

@@ -1,11 +1,27 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorAreaState.ts
+
 /**
  * ColorArea state management.
  * Based on @react-stately/color useColorAreaState.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorChannel, ColorAxes, ColorSpace } from "./types";
 import { normalizeColor } from "./Color";
+import { createInternalSignal } from "../utils";
 
 export interface ColorAreaStateOptions {
   /** The current color value (controlled). */
@@ -87,8 +103,8 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
   };
 
   // Internal value state
-  const [internalValue, setInternalValue] = createSignal<Color | null>(null);
-  const [isDragging, setIsDragging] = createSignal(false);
+  const [internalValue, setInternalValue] = createInternalSignal<Color | null>(null);
+  const [isDragging, setIsDragging] = createInternalSignal(false);
 
   // Initialize internal value
   const initValue = () => {
@@ -141,10 +157,13 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
   const xChannelPageStep = createMemo(() => xRange().pageSize);
   const yChannelPageStep = createMemo(() => yRange().pageSize);
 
+  let lastValue: Color | null = internalValue();
+
   // Update value
   const updateValue = (newColor: Color) => {
     const opts = getOptions();
     const nextColor = opts.colorSpace ? newColor.toFormat(opts.colorSpace) : newColor;
+    lastValue = nextColor;
 
     // Controlled mode
     if (opts.value !== undefined) {
@@ -245,7 +264,13 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
 
     // Call onChangeEnd when dragging ends
     if (wasDragging && !dragging) {
-      getOptions().onChangeEnd?.(value());
+      const opts = getOptions();
+      const current =
+        lastValue ??
+        (opts.value !== undefined ? normalizeValue(opts.value) : null) ??
+        internalValue() ??
+        value();
+      opts.onChangeEnd?.(current);
     }
   };