aporia 0.2.6 → 0.2.8

package/dist/index.js

@@ -1,19 +1,391 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx, jsxs } from "react/jsx-runtime";
-import t, { useContext, createContext, useId, useState, useCallback, useRef, useLayoutEffect, useEffect, useMemo } from "react";
-import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import t, { useState, useCallback, useRef, useEffect, useLayoutEffect, Fragment, useContext, createContext, useId, useMemo } from "react";
+import { useReducedMotion, AnimatePresence, motion, useMotionValue, useSpring, useTransform } from "motion/react";
 import { Popover, Select } from "@base-ui/react";
-function Panel({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: ["aporiaPanel", className].filter(Boolean).join(" "),
-      ...rest,
-      children
+const EASE_IN_OUT_STRONG = [0.77, 0, 0.175, 1];
+const MORPH_DURATION = 0.28;
+const FAST_EASE_OUT = [0.23, 1, 0.32, 1];
+const COLLAPSED_SIZE_PX = 32;
+const DRAG_THRESHOLD_PX = 4;
+const EDGE_PADDING_PX = 8;
+const PANEL_EXPANDED_PADDING_PX = 16;
+const PANEL_HEADER_HEIGHT_PX = 22;
+const PANEL_BODY_MARGIN_TOP_PX = 16;
+const SNAP_HINT_IDLE_OPACITY = 0.5;
+const SNAP_HINT_ACTIVE_OPACITY = 0.8;
+function clamp(n2, min, max) {
+  return Math.min(Math.max(n2, min), max);
+}
+function readRootPxVar(name, fallback) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return fallback;
+  }
+  const raw = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  const parsed = Number.parseFloat(raw);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function anchorFromPoint(centerX, centerY, viewportWidth, viewportHeight) {
+  const vertical = centerY > viewportHeight / 2 ? "bottom" : "top";
+  const horizontal = centerX > viewportWidth / 2 ? "right" : "left";
+  return `${vertical}-${horizontal}`;
+}
+function anchorPosition(anchor, offsets, viewportWidth, viewportHeight) {
+  const left = anchor.endsWith("left") ? offsets.left : viewportWidth - offsets.right - COLLAPSED_SIZE_PX;
+  const top = anchor.startsWith("top") ? offsets.top : viewportHeight - offsets.bottom - COLLAPSED_SIZE_PX;
+  return { left, top };
+}
+function Panel({
+  children,
+  className,
+  floating = true,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  collapseAriaLabel = "Toggle panel",
+  style: externalStyle,
+  ...domRest
+}) {
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+  const shouldReduceMotion = useReducedMotion();
+  const collapsed = collapsedProp !== void 0 ? collapsedProp : uncontrolledCollapsed;
+  const setCollapsed = useCallback(
+    (next) => {
+      onCollapsedChange == null ? void 0 : onCollapsedChange(next);
+      if (collapsedProp === void 0) {
+        setUncontrolledCollapsed(next);
+      }
+    },
+    [collapsedProp, onCollapsedChange]
+  );
+  const prevCollapsedRef = useRef(collapsed);
+  const collapsedChanged = prevCollapsedRef.current !== collapsed;
+  useEffect(() => {
+    prevCollapsedRef.current = collapsed;
+  }, [collapsed]);
+  const shellHeightTransition = shouldReduceMotion ? { duration: 0 } : collapsedChanged ? { duration: MORPH_DURATION, ease: EASE_IN_OUT_STRONG } : { duration: 0 };
+  const shellShapeTransition = shouldReduceMotion ? { duration: 0 } : collapsedChanged ? { duration: MORPH_DURATION, ease: EASE_IN_OUT_STRONG } : { duration: 0 };
+  const bodyTransition = shouldReduceMotion ? { duration: 0 } : { duration: collapsed ? 0.12 : 0.18, ease: FAST_EASE_OUT };
+  const [floatingAnchor, setFloatingAnchor] = useState("top-left");
+  const bodyRef = useRef(null);
+  const bodyContentRef = useRef(null);
+  const [measuredBodyHeight, setMeasuredBodyHeight] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(
+    () => typeof window !== "undefined" ? window.innerHeight : 0
+  );
+  const [dragRect, setDragRect] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const justDraggedRef = useRef(false);
+  const dragSessionRef = useRef(null);
+  useLayoutEffect(() => {
+    const bodyContent = bodyContentRef.current;
+    if (!bodyContent) return;
+    const measure = () => {
+      setMeasuredBodyHeight(bodyContent.scrollHeight);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(bodyContent);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setViewportHeight(window.innerHeight);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const handleShellClick = () => {
+    if (!collapsed) return;
+    if (justDraggedRef.current) {
+      justDraggedRef.current = false;
+      return;
+    }
+    setCollapsed(false);
+  };
+  const handleShellKeyDown = (e) => {
+    if (!collapsed) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setCollapsed(false);
+    }
+  };
+  const handlePointerDown = (e) => {
+    if (!collapsed || !floating) return;
+    if (e.button !== 0) return;
+    justDraggedRef.current = false;
+    const rect = e.currentTarget.getBoundingClientRect();
+    dragSessionRef.current = {
+      pointerId: e.pointerId,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startTop: rect.top,
+      startLeft: rect.left,
+      moved: false
+    };
+    setDragRect({ top: rect.top, left: rect.left });
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    const session = dragSessionRef.current;
+    if (!session || session.pointerId !== e.pointerId) return;
+    const deltaY = e.clientY - session.startClientY;
+    const deltaX = e.clientX - session.startClientX;
+    if (!session.moved && (Math.abs(deltaY) >= DRAG_THRESHOLD_PX || Math.abs(deltaX) >= DRAG_THRESHOLD_PX)) {
+      session.moved = true;
+      setIsDragging(true);
+    }
+    if (!session.moved) return;
+    const viewportHeight2 = typeof window !== "undefined" ? window.innerHeight : COLLAPSED_SIZE_PX + EDGE_PADDING_PX * 2;
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth : COLLAPSED_SIZE_PX + EDGE_PADDING_PX * 2;
+    const maxTop = Math.max(
+      EDGE_PADDING_PX,
+      viewportHeight2 - COLLAPSED_SIZE_PX - EDGE_PADDING_PX
+    );
+    const maxLeft = Math.max(
+      EDGE_PADDING_PX,
+      viewportWidth - COLLAPSED_SIZE_PX - EDGE_PADDING_PX
+    );
+    setDragRect({
+      top: clamp(session.startTop + deltaY, EDGE_PADDING_PX, maxTop),
+      left: clamp(session.startLeft + deltaX, EDGE_PADDING_PX, maxLeft)
+    });
+  };
+  const handlePointerUp = (e) => {
+    const session = dragSessionRef.current;
+    if (!session || session.pointerId !== e.pointerId) return;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    dragSessionRef.current = null;
+    setIsDragging(false);
+    if (!session.moved) {
+      setDragRect(null);
+      return;
     }
+    justDraggedRef.current = true;
+    const viewportHeight2 = typeof window !== "undefined" ? window.innerHeight : COLLAPSED_SIZE_PX + EDGE_PADDING_PX * 2;
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth : COLLAPSED_SIZE_PX + EDGE_PADDING_PX * 2;
+    const maxTop = Math.max(
+      EDGE_PADDING_PX,
+      viewportHeight2 - COLLAPSED_SIZE_PX - EDGE_PADDING_PX
+    );
+    const maxLeft = Math.max(
+      EDGE_PADDING_PX,
+      viewportWidth - COLLAPSED_SIZE_PX - EDGE_PADDING_PX
+    );
+    const finalTop = clamp(
+      (dragRect == null ? void 0 : dragRect.top) ?? session.startTop,
+      EDGE_PADDING_PX,
+      maxTop
+    );
+    const finalLeft = clamp(
+      (dragRect == null ? void 0 : dragRect.left) ?? session.startLeft,
+      EDGE_PADDING_PX,
+      maxLeft
+    );
+    const centerY = finalTop + COLLAPSED_SIZE_PX / 2;
+    const centerX = finalLeft + COLLAPSED_SIZE_PX / 2;
+    setFloatingAnchor(anchorFromPoint(centerX, centerY, viewportWidth, viewportHeight2));
+    setDragRect(null);
+  };
+  const offsets = {
+    top: readRootPxVar("--aporia-panel-offset-top", 40),
+    left: readRootPxVar("--aporia-panel-offset-left", 40),
+    right: readRootPxVar("--aporia-panel-offset-right", 40),
+    bottom: readRootPxVar("--aporia-panel-offset-bottom", 40),
+    zIndex: readRootPxVar("--aporia-panel-z-index", 1e3)
+  };
+  const expandedChromeHeight = PANEL_EXPANDED_PADDING_PX * 2 + PANEL_HEADER_HEIGHT_PX + PANEL_BODY_MARGIN_TOP_PX;
+  const expandedContentHeight = expandedChromeHeight + measuredBodyHeight;
+  const maxExpandedHeight = floating ? Math.max(
+    COLLAPSED_SIZE_PX,
+    viewportHeight - offsets.top - offsets.bottom
+  ) : Number.POSITIVE_INFINITY;
+  const targetExpandedHeight = Math.max(
+    COLLAPSED_SIZE_PX,
+    Math.min(expandedContentHeight, maxExpandedHeight)
   );
+  const viewport = {
+    width: typeof window !== "undefined" ? window.innerWidth : COLLAPSED_SIZE_PX + EDGE_PADDING_PX * 2,
+    height: typeof window !== "undefined" ? window.innerHeight : COLLAPSED_SIZE_PX + EDGE_PADDING_PX * 2
+  };
+  const floatingStyle = (() => {
+    if (!floating) return void 0;
+    if (dragRect !== null) {
+      return {
+        left: `${dragRect.left}px`,
+        top: `${dragRect.top}px`,
+        bottom: "auto",
+        right: "auto"
+      };
+    }
+    if (floatingAnchor === "bottom-left") {
+      return {
+        left: `${offsets.left}px`,
+        bottom: `${offsets.bottom}px`,
+        top: "auto",
+        right: "auto"
+      };
+    }
+    if (floatingAnchor === "top-right") {
+      return {
+        right: `${offsets.right}px`,
+        top: `${offsets.top}px`,
+        left: "auto",
+        bottom: "auto"
+      };
+    }
+    if (floatingAnchor === "bottom-right") {
+      return {
+        right: `${offsets.right}px`,
+        bottom: `${offsets.bottom}px`,
+        left: "auto",
+        top: "auto"
+      };
+    }
+    return {
+      left: `${offsets.left}px`,
+      top: `${offsets.top}px`,
+      bottom: "auto",
+      right: "auto"
+    };
+  })();
+  const snapHints = (() => {
+    if (!floating || !collapsed || !isDragging || dragRect === null) return [];
+    const corners = [
+      "top-left",
+      "top-right",
+      "bottom-left",
+      "bottom-right"
+    ];
+    const dragCenter = {
+      x: dragRect.left + COLLAPSED_SIZE_PX / 2,
+      y: dragRect.top + COLLAPSED_SIZE_PX / 2
+    };
+    const activeAnchor = anchorFromPoint(
+      dragCenter.x,
+      dragCenter.y,
+      viewport.width,
+      viewport.height
+    );
+    return corners.map((anchor) => {
+      const pos = anchorPosition(anchor, offsets, viewport.width, viewport.height);
+      const isActive = anchor === activeAnchor;
+      return {
+        anchor,
+        left: pos.left,
+        top: pos.top,
+        opacity: isActive ? SNAP_HINT_ACTIVE_OPACITY : SNAP_HINT_IDLE_OPACITY
+      };
+    });
+  })();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: snapHints.map((hint) => /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "aporiaPanelSnapHint",
+        initial: { opacity: 0 },
+        animate: { opacity: hint.opacity },
+        exit: { opacity: 0 },
+        transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.18, ease: FAST_EASE_OUT },
+        style: {
+          top: hint.top,
+          left: hint.left,
+          zIndex: Math.max(0, Math.round(offsets.zIndex - 1))
+        }
+      },
+      hint.anchor
+    )) }),
+    /* @__PURE__ */ jsxs(
+      motion.section,
+      {
+        ...domRest,
+        initial: false,
+        onClick: handleShellClick,
+        onKeyDown: handleShellKeyDown,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        role: collapsed ? "button" : void 0,
+        tabIndex: collapsed ? 0 : void 0,
+        "aria-label": collapsed ? "Expand panel" : void 0,
+        animate: {
+          height: collapsed ? COLLAPSED_SIZE_PX : targetExpandedHeight,
+          borderRadius: collapsed ? 12 : 24,
+          padding: collapsed ? 5 : 16,
+          scale: collapsed && isDragging ? 1.06 : 1,
+          rotate: collapsed && isDragging ? -2.5 : 0,
+          y: collapsed && isDragging ? -4 : 0
+        },
+        transition: {
+          height: shellHeightTransition,
+          borderRadius: shellShapeTransition,
+          padding: shellShapeTransition,
+          scale: shouldReduceMotion ? { duration: 0 } : { duration: 0.18, ease: FAST_EASE_OUT },
+          rotate: shouldReduceMotion ? { duration: 0 } : { duration: 0.18, ease: FAST_EASE_OUT },
+          y: shouldReduceMotion ? { duration: 0 } : { duration: 0.18, ease: FAST_EASE_OUT }
+        },
+        style: {
+          ...externalStyle,
+          ...floatingStyle
+        },
+        className: ["aporiaPanel", className].filter(Boolean).join(" "),
+        "data-collapsed": collapsed ? "true" : "false",
+        "data-floating": floating ? "true" : "false",
+        "data-anchor": floatingAnchor,
+        "data-dragging": isDragging ? "true" : "false",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "aporiaPanelHeader", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "aporiaPanelToggle",
+              "aria-label": collapseAriaLabel,
+              "aria-pressed": collapsed,
+              onClick: () => setCollapsed(!collapsed),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "aporiaPanelLogoGlyph",
+                  viewBox: "0 0 22 22",
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      clipRule: "evenodd",
+                      d: "M17.6185 16.089C18 15.3403 18 14.3602 18 12.4V9.6C18 7.63982 18 6.65972 17.6185 5.91103C17.283 5.25247 16.7475 4.71703 16.089 4.38148C15.3403 4 14.3602 4 12.4 4H9.6C7.63982 4 6.65972 4 5.91103 4.38148C5.25247 4.71703 4.71703 5.25247 4.38148 5.91103C4 6.65972 4 7.63982 4 9.6V12.4C4 14.3602 4 15.3403 4.38148 16.089C4.71703 16.7475 5.25247 17.283 5.91103 17.6185C6.65972 18 7.63982 18 9.6 18H12.4C14.3602 18 15.3403 18 16.089 17.6185C16.7475 17.283 17.283 16.7475 17.6185 16.089ZM10.125 13.4062V8.59375C10.125 7.5745 10.125 7.06488 10.2915 6.66288C10.5135 6.12688 10.9394 5.70103 11.4754 5.47901C11.8774 5.3125 12.387 5.3125 13.4062 5.3125C14.4255 5.3125 14.9351 5.3125 15.3371 5.47901C15.8731 5.70103 16.299 6.12688 16.521 6.66288C16.6875 7.06488 16.6875 7.5745 16.6875 8.59375V13.4062C16.6875 14.4255 16.6875 14.9351 16.521 15.3371C16.299 15.8731 15.8731 16.299 15.3371 16.521C14.9351 16.6875 14.4255 16.6875 13.4062 16.6875C12.387 16.6875 11.8774 16.6875 11.4754 16.521C10.9394 16.299 10.5135 15.8731 10.2915 15.3371C10.125 14.9351 10.125 14.4255 10.125 13.4062Z",
+                      fill: "currentColor"
+                    }
+                  )
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: bodyRef,
+              className: "aporiaPanelBody",
+              "aria-hidden": collapsed,
+              inert: collapsed,
+              initial: false,
+              animate: {
+                opacity: collapsed ? 0 : 1,
+                marginTop: collapsed ? 0 : 16
+              },
+              transition: bodyTransition,
+              children: /* @__PURE__ */ jsx("div", { ref: bodyContentRef, className: "aporiaPanelBodyContent", children })
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 const CategoryDisabledContext = createContext(false);
 function CategoryDisabledProvider({
@@ -90,8 +462,8 @@ function Category({
                   {
                     className: "categoryChevronIcon",
                     "data-collapsed": collapsed ? "true" : "false",
-                    width: "12",
-                    height: "12",
+                    width: "14",
+                    height: "14",
                     viewBox: "0 0 12 12",
                     "aria-hidden": true,
                     children: /* @__PURE__ */ jsx(
@@ -153,8 +525,9 @@ function Category({
               opacity: collapsed ? { duration: 0.09, ease: "easeIn" } : { duration: 0.15, ease: "easeOut" }
             },
             style: {
-              /* visible so SliderRow edge stretch (width/margin motion) isn’t clipped; collapse hides via height + opacity + inert */
-              overflow: "visible",
+              // Keep overdrag visible while open, but fully clip collapsed content so
+              // the last category cannot leak height into panel measurements.
+              overflow: collapsed ? "hidden" : "visible",
               minHeight: 0,
               boxSizing: "border-box"
             },
@@ -835,21 +1208,19 @@ function SliderRow({
     if (Math.abs(leftExtra) < STRETCH_SNAP_EPS_PX) leftExtra = 0;
     return Math.round(-leftExtra);
   });
-  const syncBaseWidthFromParent = () => {
+  const syncBaseWidthFromWrap = () => {
     const wrap = wrapRef.current;
-    const parent = wrap == null ? void 0 : wrap.parentElement;
-    if (!parent) return;
-    baseW.set(parent.offsetWidth);
+    if (!wrap) return;
+    baseW.set(wrap.offsetWidth);
   };
   useLayoutEffect(() => {
     const wrap = wrapRef.current;
-    const parent = wrap == null ? void 0 : wrap.parentElement;
-    if (!parent) return;
-    syncBaseWidthFromParent();
+    if (!wrap) return;
+    syncBaseWidthFromWrap();
     const ro = new ResizeObserver(() => {
-      syncBaseWidthFromParent();
+      syncBaseWidthFromWrap();
     });
-    ro.observe(parent);
+    ro.observe(wrap);
     return () => ro.disconnect();
   }, [baseW]);
   useEffect(() => {
@@ -932,7 +1303,7 @@ function SliderRow({
     const onEnd = () => {
       resetPull();
       requestAnimationFrame(() => {
-        requestAnimationFrame(syncBaseWidthFromParent);
+        requestAnimationFrame(syncBaseWidthFromWrap);
       });
     };
     window.addEventListener("pointermove", onMove);
@@ -999,7 +1370,7 @@ function SliderRow({
     if (disabled) return;
     clearDocumentSelection();
     lastPointerXRef.current = e.clientX;
-    syncBaseWidthFromParent();
+    syncBaseWidthFromWrap();
     try {
       e.currentTarget.setPointerCapture(e.pointerId);
     } catch {
@@ -1019,7 +1390,7 @@ function SliderRow({
     resetPull();
     setDragging(false);
     requestAnimationFrame(() => {
-      requestAnimationFrame(syncBaseWidthFromParent);
+      requestAnimationFrame(syncBaseWidthFromWrap);
     });
   };
   return /* @__PURE__ */ jsx(
@@ -1137,7 +1508,7 @@ function SliderRow({
                   resetPull();
                   setDragging(false);
                   requestAnimationFrame(() => {
-                    requestAnimationFrame(syncBaseWidthFromParent);
+                    requestAnimationFrame(syncBaseWidthFromWrap);
                   });
                 },
                 onLostPointerCapture: () => {
@@ -1146,7 +1517,7 @@ function SliderRow({
                   resetPull();
                   setDragging(false);
                   requestAnimationFrame(() => {
-                    requestAnimationFrame(syncBaseWidthFromParent);
+                    requestAnimationFrame(syncBaseWidthFromWrap);
                   });
                 }
               }
@@ -1212,6 +1583,14 @@ function normalizeHex(raw) {
   }
   return `#${h2.toUpperCase()}`;
 }
+function sanitizeHexDigits(raw) {
+  return raw.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+}
+function expandHexDigitsToSix(raw) {
+  const digits = sanitizeHexDigits(raw);
+  if (!digits) return null;
+  return digits.repeat(Math.ceil(6 / digits.length)).slice(0, 6).toUpperCase();
+}
 function hslToHex(h2, s, l2) {
   const [r, g, b2] = hslToRgbBytes(h2, s, l2);
   const toHex = (v2) => v2.toString(16).padStart(2, "0");
@@ -1449,12 +1828,6 @@ function clampHueDeg(h2) {
 function clampInt(n2, min, max) {
   return Math.max(min, Math.min(max, Math.round(n2)));
 }
-function normalizeHexDigits(raw) {
-  return raw.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-}
-function isValidSixHex$2(d2) {
-  return /^[0-9a-fA-F]{6}$/.test(d2);
-}
 function clampHsv01(base) {
   return { h: clampHueDeg(base.h), s: clamp01(base.s), v: clamp01(base.v) };
 }
@@ -1798,11 +2171,11 @@ function ColorPicker({ value, onChange }) {
           value: hex.slice(1),
           prefix: "#",
           onCommit: (val) => {
-            const d2 = normalizeHexDigits(val);
-            if (isValidSixHex$2(d2)) onChange(`#${d2.toUpperCase()}`);
+            const expanded = expandHexDigitsToSix(val);
+            if (expanded) onChange(`#${expanded}`);
           },
-          sanitize: normalizeHexDigits,
-          validate: isValidSixHex$2,
+          sanitize: sanitizeHexDigits,
+          validate: (v2) => sanitizeHexDigits(v2).length > 0,
           maxLength: 6,
           inputMode: "text",
           ariaLabel: `Edit hex color, ${hex}`,
@@ -1813,7 +2186,7 @@ function ColorPicker({ value, onChange }) {
               onChange(parsed);
               return "";
             }
-            return normalizeHexDigits(pasted);
+            return sanitizeHexDigits(pasted);
           }
         }
       ) : mode === "hsl" ? /* @__PURE__ */ jsxs("div", { className: "colorPickerTriplet", "aria-label": "HSL values", children: [
@@ -2050,20 +2423,15 @@ function hexDigits$1(hex) {
   const n2 = normalizeHex(hex);
   return n2.slice(1);
 }
-function isValidSixHex$1(d2) {
-  return /^[0-9a-fA-F]{6}$/.test(d2);
-}
-function sanitizeHex$1(input) {
-  return input.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-}
 function ColorRow({ label = "Color", value, onChange, disabled: disabledProp }) {
   const categoryDisabled = useCategoryDisabled();
   const disabled = Boolean(disabledProp || categoryDisabled);
   const [hovered, setHovered] = useState(false);
   const hex = normalizeHex(value);
   const handleCommit = (sanitized) => {
-    if (isValidSixHex$1(sanitized)) {
-      onChange(`#${sanitized.toUpperCase()}`);
+    const expanded = expandHexDigitsToSix(sanitized);
+    if (expanded) {
+      onChange(`#${expanded}`);
     }
   };
   const handlePaste = (pasted) => {
@@ -2085,8 +2453,8 @@ function ColorRow({ label = "Color", value, onChange, disabled: disabledProp })
               value: hexDigits$1(hex),
               prefix: "#",
               onCommit: handleCommit,
-              sanitize: sanitizeHex$1,
-              validate: isValidSixHex$1,
+              sanitize: sanitizeHexDigits,
+              validate: (v2) => sanitizeHexDigits(v2).length > 0,
               maxLength: 6,
               inputMode: "text",
               ariaLabel: `Edit hex color, ${hex}`,
@@ -2258,9 +2626,6 @@ function generateAestheticGradient(stopCount) {
 function hexDigits(hex) {
   return normalizeHex(hex).slice(1);
 }
-function isValidSixHex(d2) {
-  return /^[0-9a-fA-F]{6}$/.test(d2);
-}
 function stopsToGradient(stops, angle = 90) {
   if (stops.length === 0) return "linear-gradient(90deg, #808080, #808080)";
   if (stops.length === 1) {
@@ -2295,19 +2660,16 @@ const DEFAULT_GRADIENT_STOPS = [
   { color: "#42C0B0" },
   { color: "#BAC9C7" }
 ];
-function sanitizeHex(input) {
-  return input.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-}
 function StopRow({ index, stop, canDelete, onColorChange, onDelete }) {
   const hex = normalizeHex(stop.color);
   const handleCommit = (val) => {
-    const d2 = sanitizeHex(val);
-    if (isValidSixHex(d2)) {
-      onColorChange(`#${d2.toUpperCase()}`);
+    const expanded = expandHexDigitsToSix(val);
+    if (expanded) {
+      onColorChange(`#${expanded}`);
     }
   };
   const handlePaste = (pasted) => {
-    return sanitizeHex(pasted);
+    return sanitizeHexDigits(pasted);
   };
   return /* @__PURE__ */ jsxs("div", { className: "gradientPickerStop", children: [
     /* @__PURE__ */ jsxs("div", { className: "gradientPickerStopColorHex", children: [
@@ -2338,8 +2700,8 @@ function StopRow({ index, stop, canDelete, onColorChange, onDelete }) {
           value: hexDigits(hex),
           prefix: "#",
           onCommit: handleCommit,
-          sanitize: sanitizeHex,
-          validate: isValidSixHex,
+          sanitize: sanitizeHexDigits,
+          validate: (v2) => sanitizeHexDigits(v2).length > 0,
           maxLength: 6,
           inputMode: "text",
           ariaLabel: "Hex color without hash",