@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/{components-jthe1pwb.js → components-yz84gpkq.js}

@@ -1,51 +1,68 @@
+"use client";
 import {
-  opensInPlace,
-  inPlaceOffset,
-  useMorphOrigin,
-  useMorph
-} from "./components-hqeq3w9q.js";
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  opensInPlace2,
+  inPlaceOffset2,
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   FluidHoverHighlight2
-} from "./components-kvr7f9hy.js";
+} from "./components-qdm3yh26.js";
 import {
-  useIcon
-} from "./components-zrkzcayz.js";
+  useIcon2
+} from "./components-jqpefjsn.js";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
+  MorphSurface2
+} from "./components-4y816hwp.js";
 import {
-  shapeMap,
-  useShape
-} from "./components-cv16mryv.js";
+  shapeMap2,
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2,
+  surfaceClasses2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
-  surfaceClasses2,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
+} from "./components-dcc02hs2.js";
 import {
   Tooltip2
-} from "./components-ng72k97e.js";
+} from "./components-q03cktx8.js";
 import {
   Slider2
-} from "./components-wvp1m52g.js";
+} from "./components-jp5v0m0f.js";
 import {
-  spring2
-} from "./components-1v7rxytx.js";
+  clamp012,
+  hsvToRgb2,
+  rgbToHsv2,
+  rgbToHsl2,
+  hslToRgb2,
+  rgbToOklch2,
+  oklchToRgb2,
+  rgbToHexStr2,
+  parseColor2,
+  resolveCssColor2,
+  buildParsed2,
+  formatValueByFormat2
+} from "./components-26snnbs9.js";
 
 // components/inputs/color-picker/index.tsx
 import { Menu } from "@base-ui/react/menu";
@@ -71,326 +88,6 @@ function ColorPickerPortalContainer2({ value, children }) {
   });
 }
 var PanelSurfaceContext = createContext(true);
-function clamp01(n) {
-  return Math.max(0, Math.min(1, n));
-}
-function clamp255(n) {
-  return Math.max(0, Math.min(255, n));
-}
-function hsvToRgb(h, s, v) {
-  const c = v * s;
-  const hh = (h % 360 + 360) % 360 / 60;
-  const x = c * (1 - Math.abs(hh % 2 - 1));
-  let r = 0, g = 0, b = 0;
-  if (hh < 1) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (hh < 2) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (hh < 3) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (hh < 4) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (hh < 5) {
-    r = x;
-    g = 0;
-    b = c;
-  } else {
-    r = c;
-    g = 0;
-    b = x;
-  }
-  const m = v - c;
-  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 };
-}
-function rgbToHsv(r, g, b) {
-  r /= 255;
-  g /= 255;
-  b /= 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const v = max;
-  const d = max - min;
-  const s = max === 0 ? 0 : d / max;
-  let h = 0;
-  if (d > 0) {
-    if (max === r)
-      h = (g - b) / d % 6;
-    else if (max === g)
-      h = (b - r) / d + 2;
-    else
-      h = (r - g) / d + 4;
-    h *= 60;
-    if (h < 0)
-      h += 360;
-  }
-  return { h, s, v };
-}
-function rgbToHsl(r, g, b) {
-  r /= 255;
-  g /= 255;
-  b /= 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const l = (max + min) / 2;
-  const d = max - min;
-  let h = 0, s = 0;
-  if (d > 0) {
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    if (max === r)
-      h = (g - b) / d % 6;
-    else if (max === g)
-      h = (b - r) / d + 2;
-    else
-      h = (r - g) / d + 4;
-    h *= 60;
-    if (h < 0)
-      h += 360;
-  }
-  return { h, s, l };
-}
-function hslToRgb(h, s, l) {
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const hh = (h % 360 + 360) % 360 / 60;
-  const x = c * (1 - Math.abs(hh % 2 - 1));
-  let r = 0, g = 0, b = 0;
-  if (hh < 1) {
-    r = c;
-    g = x;
-  } else if (hh < 2) {
-    r = x;
-    g = c;
-  } else if (hh < 3) {
-    g = c;
-    b = x;
-  } else if (hh < 4) {
-    g = x;
-    b = c;
-  } else if (hh < 5) {
-    r = x;
-    b = c;
-  } else {
-    r = c;
-    b = x;
-  }
-  const m = l - c / 2;
-  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 };
-}
-function srgbToLinear(c) {
-  c = c / 255;
-  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-}
-function linearToSrgb(c) {
-  const v = c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
-  return clamp01(v) * 255;
-}
-function linearRgbToOklab(r, g, b) {
-  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
-  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
-  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
-  const l_ = Math.cbrt(l);
-  const m_ = Math.cbrt(m);
-  const s_ = Math.cbrt(s);
-  return {
-    L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
-    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
-    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
-  };
-}
-function oklabToLinearRgb(L, a, b) {
-  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
-  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
-  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
-  const l = l_ * l_ * l_;
-  const m = m_ * m_ * m_;
-  const s = s_ * s_ * s_;
-  return {
-    r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-    g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-    b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
-  };
-}
-function rgbToOklch(r, g, b) {
-  const lr = srgbToLinear(r);
-  const lg = srgbToLinear(g);
-  const lb = srgbToLinear(b);
-  const lab = linearRgbToOklab(lr, lg, lb);
-  const C = Math.sqrt(lab.a * lab.a + lab.b * lab.b);
-  let H = Math.atan2(lab.b, lab.a) * 180 / Math.PI;
-  if (H < 0)
-    H += 360;
-  return { L: lab.L, C, H };
-}
-function oklchToRgb(L, C, H) {
-  const a = C * Math.cos(H * Math.PI / 180);
-  const b = C * Math.sin(H * Math.PI / 180);
-  const lin = oklabToLinearRgb(L, a, b);
-  return {
-    r: clamp255(linearToSrgb(lin.r)),
-    g: clamp255(linearToSrgb(lin.g)),
-    b: clamp255(linearToSrgb(lin.b))
-  };
-}
-function to2hex(n) {
-  return Math.round(clamp255(n)).toString(16).padStart(2, "0");
-}
-function rgbToHexStr(r, g, b, a) {
-  if (a >= 1)
-    return `#${to2hex(r)}${to2hex(g)}${to2hex(b)}`;
-  return `#${to2hex(r)}${to2hex(g)}${to2hex(b)}${to2hex(a * 255)}`;
-}
-function expandShortHex(h) {
-  if (h.length === 3)
-    return h.split("").map((c) => c + c).join("");
-  if (h.length === 4)
-    return h.split("").map((c) => c + c).join("");
-  return h;
-}
-function parseHex(input) {
-  const m = input.trim().match(/^#?([0-9a-fA-F]{3,8})$/);
-  if (!m)
-    return null;
-  let h = m[1];
-  if (h.length === 3 || h.length === 4)
-    h = expandShortHex(h);
-  if (h.length === 6) {
-    return {
-      r: parseInt(h.slice(0, 2), 16),
-      g: parseInt(h.slice(2, 4), 16),
-      b: parseInt(h.slice(4, 6), 16),
-      a: 1
-    };
-  }
-  if (h.length === 8) {
-    return {
-      r: parseInt(h.slice(0, 2), 16),
-      g: parseInt(h.slice(2, 4), 16),
-      b: parseInt(h.slice(4, 6), 16),
-      a: parseInt(h.slice(6, 8), 16) / 255
-    };
-  }
-  return null;
-}
-function parseAlphaPart(part) {
-  if (part === undefined)
-    return 1;
-  return part.endsWith("%") ? parseFloat(part) / 100 : parseFloat(part);
-}
-function parseColor2(input) {
-  const s = input.trim();
-  if (!s)
-    return null;
-  if (s.startsWith("#") || /^[0-9a-fA-F]{3,8}$/.test(s)) {
-    return parseHex(s);
-  }
-  const rgbM = s.match(/^rgba?\(\s*([^)]+)\)$/i);
-  if (rgbM) {
-    const parts = rgbM[1].split(/[\s,/]+/).filter(Boolean);
-    if (parts.length < 3)
-      return null;
-    const r = parseFloat(parts[0]);
-    const g = parseFloat(parts[1]);
-    const b = parseFloat(parts[2]);
-    const a = parseAlphaPart(parts[3]);
-    if ([r, g, b, a].some(Number.isNaN))
-      return null;
-    return { r: clamp255(r), g: clamp255(g), b: clamp255(b), a: clamp01(a) };
-  }
-  const hslM = s.match(/^hsla?\(\s*([^)]+)\)$/i);
-  if (hslM) {
-    const parts = hslM[1].split(/[\s,/]+/).filter(Boolean);
-    if (parts.length < 3)
-      return null;
-    const h = parseFloat(parts[0]);
-    const sat = parts[1].endsWith("%") ? parseFloat(parts[1]) / 100 : parseFloat(parts[1]);
-    const l = parts[2].endsWith("%") ? parseFloat(parts[2]) / 100 : parseFloat(parts[2]);
-    const a = parseAlphaPart(parts[3]);
-    if ([h, sat, l, a].some(Number.isNaN))
-      return null;
-    const rgb = hslToRgb(h, clamp01(sat), clamp01(l));
-    return { r: clamp255(rgb.r), g: clamp255(rgb.g), b: clamp255(rgb.b), a: clamp01(a) };
-  }
-  const oklchM = s.match(/^oklch\(\s*([^)]+)\)$/i);
-  if (oklchM) {
-    const parts = oklchM[1].split(/[\s,/]+/).filter(Boolean);
-    if (parts.length < 3)
-      return null;
-    const L = parts[0].endsWith("%") ? parseFloat(parts[0]) / 100 : parseFloat(parts[0]);
-    const C = parseFloat(parts[1]);
-    const H = parseFloat(parts[2]);
-    const a = parseAlphaPart(parts[3]);
-    if ([L, C, H, a].some(Number.isNaN))
-      return null;
-    const rgb = oklchToRgb(clamp01(L), Math.max(0, C), H);
-    return { r: clamp255(rgb.r), g: clamp255(rgb.g), b: clamp255(rgb.b), a: clamp01(a) };
-  }
-  return null;
-}
-var cssColorCtx = null;
-function resolveCssColor(input) {
-  const direct = parseColor2(input);
-  if (direct)
-    return direct;
-  const s = input.trim();
-  if (!s || typeof document === "undefined")
-    return null;
-  if (!cssColorCtx) {
-    cssColorCtx = document.createElement("canvas").getContext("2d");
-    if (!cssColorCtx)
-      return null;
-  }
-  const ctx = cssColorCtx;
-  ctx.fillStyle = "#000000";
-  ctx.fillStyle = s;
-  const first = String(ctx.fillStyle);
-  ctx.fillStyle = "#ffffff";
-  ctx.fillStyle = s;
-  const second = String(ctx.fillStyle);
-  if (first !== second)
-    return null;
-  return parseColor2(first);
-}
-function buildParsed2(h, s, v, a) {
-  const { r, g, b } = hsvToRgb(h, s, v);
-  const hsl = rgbToHsl(r, g, b);
-  const oklch = rgbToOklch(r, g, b);
-  const hex = rgbToHexStr(r, g, b, a);
-  const rgbStr = a >= 1 ? `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})` : `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${Number(a.toFixed(3))})`;
-  const hslStr = a >= 1 ? `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)` : `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%, ${Number(a.toFixed(3))})`;
-  const oklchStr = a >= 1 ? `oklch(${(oklch.L * 100).toFixed(1)}% ${oklch.C.toFixed(3)} ${oklch.H.toFixed(1)})` : `oklch(${(oklch.L * 100).toFixed(1)}% ${oklch.C.toFixed(3)} ${oklch.H.toFixed(1)} / ${Number(a.toFixed(3))})`;
-  return {
-    h,
-    s,
-    v,
-    a,
-    r: Math.round(r),
-    g: Math.round(g),
-    b: Math.round(b),
-    hex,
-    rgb: rgbStr,
-    hsl: hslStr,
-    oklch: oklchStr
-  };
-}
-function formatValueByFormat(parsed, fmt) {
-  switch (fmt) {
-    case "hex":
-      return parsed.hex;
-    case "rgb":
-      return parsed.rgb;
-    case "hsl":
-      return parsed.hsl;
-    case "oklch":
-      return parsed.oklch;
-  }
-}
 var PANEL_WIDTH = 280;
 var SQUARE_HEIGHT = 156;
 var CHECKER_BG = {
@@ -404,13 +101,13 @@ function SaturationSquare({ h, s, v, onChange }) {
   const [focused, setFocused] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [cursorPos, setCursorPos] = useState(null);
-  const shape = useShape();
+  const shape = useShape2();
   const updateFromPointer = useCallback((clientX, clientY) => {
     const rect = ref.current?.getBoundingClientRect();
     if (!rect)
       return;
-    const x = clamp01((clientX - rect.left) / rect.width);
-    const y = clamp01((clientY - rect.top) / rect.height);
+    const x = clamp012((clientX - rect.left) / rect.width);
+    const y = clamp012((clientY - rect.top) / rect.height);
     onChange(x, 1 - y);
   }, [onChange]);
   const updateCursorPos = useCallback((clientX, clientY) => {
@@ -418,8 +115,8 @@ function SaturationSquare({ h, s, v, onChange }) {
     if (!rect)
       return;
     setCursorPos({
-      x: clamp01((clientX - rect.left) / rect.width) * 100,
-      y: clamp01((clientY - rect.top) / rect.height) * 100
+      x: clamp012((clientX - rect.left) / rect.width) * 100,
+      y: clamp012((clientY - rect.top) / rect.height) * 100
     });
   }, []);
   const onPointerDown = useCallback((e) => {
@@ -446,13 +143,13 @@ function SaturationSquare({ h, s, v, onChange }) {
     const step = e.shiftKey ? 0.1 : 0.01;
     let nextS = s, nextV = v, handled = true;
     if (e.key === "ArrowLeft")
-      nextS = clamp01(s - step);
+      nextS = clamp012(s - step);
     else if (e.key === "ArrowRight")
-      nextS = clamp01(s + step);
+      nextS = clamp012(s + step);
     else if (e.key === "ArrowUp")
-      nextV = clamp01(v + step);
+      nextV = clamp012(v + step);
     else if (e.key === "ArrowDown")
-      nextV = clamp01(v - step);
+      nextV = clamp012(v - step);
     else
       handled = false;
     if (handled) {
@@ -460,7 +157,7 @@ function SaturationSquare({ h, s, v, onChange }) {
       onChange(nextS, nextV);
     }
   }, [onChange, s, v]);
-  const { r, g, b } = hsvToRgb(h, s, v);
+  const { r, g, b } = hsvToRgb2(h, s, v);
   const thumbColor = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
   return /* @__PURE__ */ jsxs("div", {
     ref,
@@ -573,7 +270,7 @@ var FORMAT_LABELS = {
   oklch: "OKLCH"
 };
 var FORMATS = ["hex", "rgb", "hsl", "oklch"];
-var menuShape = shapeMap.rounded;
+var menuShape = shapeMap2.rounded;
 var FormatMenuContext = createContext(null);
 function FormatItem({
   index,
@@ -583,7 +280,7 @@ function FormatItem({
 }) {
   const ref = useRef(null);
   const menuCtx = useContext(FormatMenuContext);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   useRegisterFluidHoverItem2(menuCtx?.registerItem, index, ref);
@@ -622,14 +319,14 @@ function FormatDropdown({
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = openProp !== undefined;
   const open = isControlled ? openProp : internalOpen;
-  const { origin, capture } = useMorphOrigin();
-  const morph = useMorph(open, origin, { tier: "moderate" });
+  const { origin, capture } = useMorphOrigin2();
+  const morph = useMorph2(open, origin, { tier: "moderate" });
   const level = Math.min(useSurface2() + 2, 8);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const portalContainer = useContext(ColorPickerPortalContainerContext);
   const containerRef = useRef(null);
-  const ChevronDownIcon = useIcon("chevron-down");
+  const ChevronDownIcon = useIcon2("chevron-down");
   const hover = useFluidHover2(containerRef);
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover;
   const [focusedIndex, setFocusedIndex] = useState(null);
@@ -700,10 +397,10 @@ function FormatDropdown({
               className: "relative select-none outline-none",
               children: /* @__PURE__ */ jsx(SurfaceProvider2, {
                 value: level,
-                children: /* @__PURE__ */ jsx(MorphSurface, {
+                children: /* @__PURE__ */ jsx(MorphSurface2, {
                   morph,
-                  bg: SURFACE_BG[level],
-                  shadow: SURFACE_SHADOW[3],
+                  bg: SURFACE_BG2[level],
+                  shadow: SURFACE_SHADOW2[3],
                   radius: menuShape.container,
                   className: "min-w-[var(--anchor-width)]",
                   children: /* @__PURE__ */ jsxs("div", {
@@ -792,7 +489,7 @@ var TextColorInput = forwardRef(({
 }, ref) => {
   const [draft, setDraft] = useState(value);
   const interactingRef = useRef(false);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   useEffect(() => {
@@ -888,7 +585,7 @@ var ScrubColorInput = forwardRef(({
   max,
   wrap = false
 }, ref) => {
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const inputRef = useRef(null);
@@ -1037,9 +734,9 @@ var ColorInput = forwardRef(({ scrubbable = false, ...props }, ref) => scrubbabl
 ColorInput.displayName = "ColorInput";
 function EyeDropperButton({ onPick }) {
   const [supported, setSupported] = useState(false);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
-  const PipetteIcon = useIcon("pipette");
+  const PipetteIcon = useIcon2("pipette");
   useEffect(() => {
     setSupported(typeof window !== "undefined" && "EyeDropper" in window);
   }, []);
@@ -1065,7 +762,7 @@ function EyeDropperButton({ onPick }) {
   });
 }
 function ColorTile2({ color, size = 24, className, style }) {
-  const shape = useShape();
+  const shape = useShape2();
   return /* @__PURE__ */ jsx("span", {
     className: cn2("inline-block relative shrink-0 overflow-hidden shadow-swatch", shape.bg, className),
     style: {
@@ -1081,7 +778,7 @@ function ColorTile2({ color, size = 24, className, style }) {
   });
 }
 var ColorSwatch2 = forwardRef(({ color, size = 28, selected, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
-  const shape = useShape();
+  const shape = useShape2();
   const [hovered, setHovered] = useState(false);
   const ring = selected ? "shadow-swatch-selected" : hovered ? "shadow-swatch-hover" : "shadow-swatch";
   return /* @__PURE__ */ jsx("button", {
@@ -1117,16 +814,16 @@ function SwatchStrip({
 }) {
   const normalizedCurrent = useMemo(() => {
     const p = parseColor2(current);
-    return p ? rgbToHexStr(p.r, p.g, p.b, p.a).toLowerCase() : "";
+    return p ? rgbToHexStr2(p.r, p.g, p.b, p.a).toLowerCase() : "";
   }, [current]);
   const [resolvedSwatches, setResolvedSwatches] = useState({});
   useEffect(() => {
     const next = {};
     for (const sw of swatches) {
       if (!parseColor2(sw)) {
-        const p = resolveCssColor(sw);
+        const p = resolveCssColor2(sw);
         if (p)
-          next[sw] = rgbToHexStr(p.r, p.g, p.b, p.a).toLowerCase();
+          next[sw] = rgbToHexStr2(p.r, p.g, p.b, p.a).toLowerCase();
       }
     }
     setResolvedSwatches(next);
@@ -1135,7 +832,7 @@ function SwatchStrip({
     className: "flex flex-wrap gap-2",
     children: swatches.map((sw, i) => {
       const parsed = parseColor2(sw);
-      const normalized = parsed ? rgbToHexStr(parsed.r, parsed.g, parsed.b, parsed.a).toLowerCase() : resolvedSwatches[sw] ?? sw.toLowerCase();
+      const normalized = parsed ? rgbToHexStr2(parsed.r, parsed.g, parsed.b, parsed.a).toLowerCase() : resolvedSwatches[sw] ?? sw.toLowerCase();
       const isSelected = normalized === normalizedCurrent;
       return /* @__PURE__ */ jsx(ColorSwatch2, {
         color: sw,
@@ -1171,7 +868,7 @@ var ColorPicker2 = forwardRef(({
     const p = parseColor2(currentRawValue);
     if (!p)
       return { h: 0, s: 1, v: 1, a: 1 };
-    const hsv = rgbToHsv(p.r, p.g, p.b);
+    const hsv = rgbToHsv2(p.r, p.g, p.b);
     return { h: hsv.s === 0 ? 0 : hsv.h, s: hsv.s, v: hsv.v, a: p.a };
   }, []);
   const [hsv, setHsv] = useState(initialParsed);
@@ -1188,7 +885,7 @@ var ColorPicker2 = forwardRef(({
     if (!p)
       return;
     oklchHueRef.current = null;
-    const newHsv = rgbToHsv(p.r, p.g, p.b);
+    const newHsv = rgbToHsv2(p.r, p.g, p.b);
     setHsv((prev) => ({
       h: newHsv.s === 0 ? prev.h : newHsv.h,
       s: newHsv.s,
@@ -1201,7 +898,7 @@ var ColorPicker2 = forwardRef(({
     const merged = { ...hsv, ...next };
     setHsv(merged);
     const p = buildParsed2(merged.h, merged.s, merged.v, merged.a);
-    const formatted = formatValueByFormat(p, currentFormat);
+    const formatted = formatValueByFormat2(p, currentFormat);
     lastEmittedRef.current = formatted;
     if (!isControlled)
       setInternalValue(formatted);
@@ -1211,18 +908,18 @@ var ColorPicker2 = forwardRef(({
     if (!isFormatControlled)
       setInternalFormat(f);
     onFormatChange?.(f);
-    const formatted = formatValueByFormat(parsed, f);
+    const formatted = formatValueByFormat2(parsed, f);
     lastEmittedRef.current = formatted;
     if (!isControlled)
       setInternalValue(formatted);
     onValueChange?.(formatted, parsed);
   }, [isFormatControlled, isControlled, onFormatChange, onValueChange, parsed]);
   const handleHexCommit = useCallback((input) => {
-    const p = resolveCssColor(input);
+    const p = resolveCssColor2(input);
     if (!p)
       return;
     oklchHueRef.current = null;
-    const newHsv = rgbToHsv(p.r, p.g, p.b);
+    const newHsv = rgbToHsv2(p.r, p.g, p.b);
     const merged = {
       h: newHsv.s === 0 ? hsv.h : newHsv.h,
       s: newHsv.s,
@@ -1231,7 +928,7 @@ var ColorPicker2 = forwardRef(({
     };
     setHsv(merged);
     const next = buildParsed2(merged.h, merged.s, merged.v, merged.a);
-    const formatted = formatValueByFormat(next, currentFormat);
+    const formatted = formatValueByFormat2(next, currentFormat);
     lastEmittedRef.current = formatted;
     if (!isControlled)
       setInternalValue(formatted);
@@ -1243,12 +940,12 @@ var ColorPicker2 = forwardRef(({
   const handleEyedrop = useCallback((hex) => {
     handleHexCommit(hex);
   }, [handleHexCommit]);
-  const solidHueRgb = useMemo(() => hsvToRgb(hsv.h, hsv.s, hsv.v), [hsv.h, hsv.s, hsv.v]);
+  const solidHueRgb = useMemo(() => hsvToRgb2(hsv.h, hsv.s, hsv.v), [hsv.h, hsv.s, hsv.v]);
   const solidR = Math.round(solidHueRgb.r);
   const solidG = Math.round(solidHueRgb.g);
   const solidB = Math.round(solidHueRgb.b);
   const solidColorString = `rgb(${solidR}, ${solidG}, ${solidB})`;
-  const shape = useShape();
+  const shape = useShape2();
   const substrate = useSurface2();
   const pickerLevel = Math.max(substrate, 3);
   const paintsSurface = useContext(PanelSurfaceContext);
@@ -1317,7 +1014,7 @@ var ColorPicker2 = forwardRef(({
                 const r = channel === "r" ? Number(value) : p.r;
                 const g = channel === "g" ? Number(value) : p.g;
                 const b = channel === "b" ? Number(value) : p.b;
-                const hsvVal = rgbToHsv(r, g, b);
+                const hsvVal = rgbToHsv2(r, g, b);
                 updateHsv({
                   h: hsvVal.s === 0 ? hsv.h : hsvVal.h,
                   s: hsvVal.s,
@@ -1330,12 +1027,12 @@ var ColorPicker2 = forwardRef(({
               case "lSL": {
                 if (channel === "hSL")
                   oklchHueRef.current = null;
-                const hsl = rgbToHsl(p.r, p.g, p.b);
+                const hsl = rgbToHsl2(p.r, p.g, p.b);
                 const h2 = channel === "hSL" ? Number(value) : hsl.h;
                 const s2 = channel === "sSL" ? Number(value) / 100 : hsl.s;
                 const l2 = channel === "lSL" ? Number(value) / 100 : hsl.l;
-                const rgb = hslToRgb(h2, clamp01(s2), clamp01(l2));
-                const hsvVal = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                const rgb = hslToRgb2(h2, clamp012(s2), clamp012(l2));
+                const hsvVal = rgbToHsv2(rgb.r, rgb.g, rgb.b);
                 updateHsv({
                   h: hsvVal.s === 0 ? h2 : hsvVal.h,
                   s: hsvVal.s,
@@ -1346,14 +1043,14 @@ var ColorPicker2 = forwardRef(({
               case "L":
               case "C":
               case "H": {
-                const cur = rgbToOklch(p.r, p.g, p.b);
+                const cur = rgbToOklch2(p.r, p.g, p.b);
                 const baseH = oklchHueRef.current ?? cur.H;
                 const L = channel === "L" ? Number(value) / 100 : cur.L;
                 const C = channel === "C" ? Number(value) : cur.C;
                 const H = channel === "H" ? Number(value) : baseH;
                 oklchHueRef.current = H;
-                const rgb = oklchToRgb(clamp01(L), Math.max(0, C), H);
-                const hsvVal = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                const rgb = oklchToRgb2(clamp012(L), Math.max(0, C), H);
+                const hsvVal = rgbToHsv2(rgb.r, rgb.g, rgb.b);
                 updateHsv({
                   h: hsvVal.s === 0 ? hsv.h : hsvVal.h,
                   s: hsvVal.s,
@@ -1362,7 +1059,7 @@ var ColorPicker2 = forwardRef(({
                 return;
               }
               case "alphaPercent": {
-                const a = clamp01(Number(value) / 100);
+                const a = clamp012(Number(value) / 100);
                 updateHsv({ a });
                 return;
               }
@@ -1468,7 +1165,7 @@ function ColorInputsRow({
     });
   }
   if (format === "hsl") {
-    const hsl = rgbToHsl(parsed.r, parsed.g, parsed.b);
+    const hsl = rgbToHsl2(parsed.r, parsed.g, parsed.b);
     return /* @__PURE__ */ jsxs("div", {
       className: "grid grid-cols-4 gap-1",
       children: [
@@ -1525,7 +1222,7 @@ function ColorInputsRow({
       ]
     });
   }
-  const oklch = rgbToOklch(parsed.r, parsed.g, parsed.b);
+  const oklch = rgbToOklch2(parsed.r, parsed.g, parsed.b);
   const displayH = oklchHue ?? oklch.H;
   return /* @__PURE__ */ jsxs("div", {
     className: "grid grid-cols-4 gap-1",
@@ -1636,9 +1333,9 @@ var ColorPickerPopover2 = forwardRef(({
   const isOpenControlled = openProp !== undefined;
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const open = isOpenControlled ? openProp : internalOpen;
-  const { origin, capture } = useMorphOrigin();
-  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
-  const shape = useShape();
+  const { origin, capture } = useMorphOrigin2();
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
+  const shape = useShape2();
   const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   const substrate = useSurface2();
@@ -1658,10 +1355,10 @@ var ColorPickerPopover2 = forwardRef(({
       setInternalValue(v);
     pickerProps.onValueChange?.(v, parsed);
   }, [isControlled, pickerProps]);
-  const XIcon = useIcon("x");
+  const XIcon = useIcon2("x");
   const parsed = useMemo(() => parseColor2(currentValue), [currentValue]);
-  const swatchColor = parsed ? rgbToHexStr(parsed.r, parsed.g, parsed.b, parsed.a) : currentValue;
-  const valueLabel = parsed ? rgbToHexStr(parsed.r, parsed.g, parsed.b, 1).replace(/^#/, "").toUpperCase() : currentValue;
+  const swatchColor = parsed ? rgbToHexStr2(parsed.r, parsed.g, parsed.b, parsed.a) : currentValue;
+  const valueLabel = parsed ? rgbToHexStr2(parsed.r, parsed.g, parsed.b, 1).replace(/^#/, "").toUpperCase() : currentValue;
   const root = /* @__PURE__ */ jsx(Popover.Root, {
     open,
     onOpenChange: handleOpenChange,
@@ -1716,7 +1413,7 @@ var ColorPickerPopover2 = forwardRef(({
           children: /* @__PURE__ */ jsx(Popover.Positioner, {
             side: "bottom",
             align: "start",
-            sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : 6,
+            sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : 6,
             className: "z-50 outline-none",
             children: /* @__PURE__ */ jsx(Popover.Popup, {
               ref: morph.popupRef,
@@ -1725,10 +1422,10 @@ var ColorPickerPopover2 = forwardRef(({
                 value: morph.popup,
                 children: /* @__PURE__ */ jsx(SurfaceProvider2, {
                   value: level,
-                  children: /* @__PURE__ */ jsx(MorphSurface, {
+                  children: /* @__PURE__ */ jsx(MorphSurface2, {
                     morph,
-                    bg: SURFACE_BG[level],
-                    shadow: SURFACE_SHADOW[3],
+                    bg: SURFACE_BG2[level],
+                    shadow: SURFACE_SHADOW2[3],
                     radius: shape.container,
                     children: /* @__PURE__ */ jsx(PanelSurfaceContext.Provider, {
                       value: false,
@@ -1756,4 +1453,4 @@ ColorPickerPopover2.displayName = "ColorPickerPopover";
 Object.assign(ColorPicker2, { Popover: ColorPickerPopover2 });
 var color_picker_default = ColorPicker2;
 
-export { ColorPickerPortalContainer2, parseColor2, buildParsed2, ColorTile2, ColorSwatch2, ColorPicker2, ColorPickerPopover2, color_picker_default };
+export { ColorPickerPortalContainer2, ColorTile2, ColorSwatch2, ColorPicker2, ColorPickerPopover2, color_picker_default };