@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

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

@@ -1,68 +1,51 @@
-"use client";
 import {
-  spring2
-} from "./components-3ey0hzpb.js";
-import {
-  opensInPlace2,
-  inPlaceOffset2,
-  useMorphOrigin2,
-  useMorph2
-} from "./components-m06yq8wk.js";
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
   FluidHoverHighlight2
-} from "./components-dc5q749x.js";
+} from "./components-kvr7f9hy.js";
 import {
-  useIcon2
-} from "./components-jqpefjsn.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
-  MorphSurface2
-} from "./components-c7rwx0ap.js";
+  MorphSurface
+} from "./components-0q0sqfh4.js";
 import {
-  shapeMap2,
-  useShape2
-} from "./components-71nbt03m.js";
+  shapeMap,
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
-import {
-  SURFACE_BG2,
-  SURFACE_SHADOW2,
-  surfaceClasses2
-} from "./components-vf45j12c.js";
+} from "./components-0sn7ypjw.js";
 import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  surfaceClasses2,
   useSurface2,
   SurfaceProvider2
-} from "./components-dhgk6mbt.js";
+} from "./components-zx6b6yby.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
 import {
   Tooltip2
-} from "./components-2krsc300.js";
+} from "./components-ng72k97e.js";
 import {
   Slider2
-} from "./components-t5pk5nmc.js";
+} from "./components-wvp1m52g.js";
 import {
-  clamp012,
-  hsvToRgb2,
-  rgbToHsv2,
-  rgbToHsl2,
-  hslToRgb2,
-  rgbToOklch2,
-  oklchToRgb2,
-  rgbToHexStr2,
-  parseColor2,
-  resolveCssColor2,
-  buildParsed2,
-  formatValueByFormat2
-} from "./components-26snnbs9.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/inputs/color-picker/index.tsx
 import { Menu } from "@base-ui/react/menu";
@@ -88,6 +71,326 @@ 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 = {
@@ -101,13 +404,13 @@ function SaturationSquare({ h, s, v, onChange }) {
   const [focused, setFocused] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [cursorPos, setCursorPos] = useState(null);
-  const shape = useShape2();
+  const shape = useShape();
   const updateFromPointer = useCallback((clientX, clientY) => {
     const rect = ref.current?.getBoundingClientRect();
     if (!rect)
       return;
-    const x = clamp012((clientX - rect.left) / rect.width);
-    const y = clamp012((clientY - rect.top) / rect.height);
+    const x = clamp01((clientX - rect.left) / rect.width);
+    const y = clamp01((clientY - rect.top) / rect.height);
     onChange(x, 1 - y);
   }, [onChange]);
   const updateCursorPos = useCallback((clientX, clientY) => {
@@ -115,8 +418,8 @@ function SaturationSquare({ h, s, v, onChange }) {
     if (!rect)
       return;
     setCursorPos({
-      x: clamp012((clientX - rect.left) / rect.width) * 100,
-      y: clamp012((clientY - rect.top) / rect.height) * 100
+      x: clamp01((clientX - rect.left) / rect.width) * 100,
+      y: clamp01((clientY - rect.top) / rect.height) * 100
     });
   }, []);
   const onPointerDown = useCallback((e) => {
@@ -143,13 +446,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 = clamp012(s - step);
+      nextS = clamp01(s - step);
     else if (e.key === "ArrowRight")
-      nextS = clamp012(s + step);
+      nextS = clamp01(s + step);
     else if (e.key === "ArrowUp")
-      nextV = clamp012(v + step);
+      nextV = clamp01(v + step);
     else if (e.key === "ArrowDown")
-      nextV = clamp012(v - step);
+      nextV = clamp01(v - step);
     else
       handled = false;
     if (handled) {
@@ -157,7 +460,7 @@ function SaturationSquare({ h, s, v, onChange }) {
       onChange(nextS, nextV);
     }
   }, [onChange, s, v]);
-  const { r, g, b } = hsvToRgb2(h, s, v);
+  const { r, g, b } = hsvToRgb(h, s, v);
   const thumbColor = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
   return /* @__PURE__ */ jsxs("div", {
     ref,
@@ -270,7 +573,7 @@ var FORMAT_LABELS = {
   oklch: "OKLCH"
 };
 var FORMATS = ["hex", "rgb", "hsl", "oklch"];
-var menuShape = shapeMap2.rounded;
+var menuShape = shapeMap.rounded;
 var FormatMenuContext = createContext(null);
 function FormatItem({
   index,
@@ -280,7 +583,7 @@ function FormatItem({
 }) {
   const ref = useRef(null);
   const menuCtx = useContext(FormatMenuContext);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   useRegisterFluidHoverItem2(menuCtx?.registerItem, index, ref);
@@ -319,14 +622,14 @@ function FormatDropdown({
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = openProp !== undefined;
   const open = isControlled ? openProp : internalOpen;
-  const { origin, capture } = useMorphOrigin2();
-  const morph = useMorph2(open, origin, { tier: "moderate" });
+  const { origin, capture } = useMorphOrigin();
+  const morph = useMorph(open, origin, { tier: "moderate" });
   const level = Math.min(useSurface2() + 2, 8);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const portalContainer = useContext(ColorPickerPortalContainerContext);
   const containerRef = useRef(null);
-  const ChevronDownIcon = useIcon2("chevron-down");
+  const ChevronDownIcon = useIcon("chevron-down");
   const hover = useFluidHover2(containerRef);
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover;
   const [focusedIndex, setFocusedIndex] = useState(null);
@@ -397,10 +700,10 @@ function FormatDropdown({
               className: "relative select-none outline-none",
               children: /* @__PURE__ */ jsx(SurfaceProvider2, {
                 value: level,
-                children: /* @__PURE__ */ jsx(MorphSurface2, {
+                children: /* @__PURE__ */ jsx(MorphSurface, {
                   morph,
-                  bg: SURFACE_BG2[level],
-                  shadow: SURFACE_SHADOW2[3],
+                  bg: SURFACE_BG[level],
+                  shadow: SURFACE_SHADOW[3],
                   radius: menuShape.container,
                   className: "min-w-[var(--anchor-width)]",
                   children: /* @__PURE__ */ jsxs("div", {
@@ -489,7 +792,7 @@ var TextColorInput = forwardRef(({
 }, ref) => {
   const [draft, setDraft] = useState(value);
   const interactingRef = useRef(false);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   useEffect(() => {
@@ -585,7 +888,7 @@ var ScrubColorInput = forwardRef(({
   max,
   wrap = false
 }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const inputRef = useRef(null);
@@ -734,9 +1037,9 @@ var ColorInput = forwardRef(({ scrubbable = false, ...props }, ref) => scrubbabl
 ColorInput.displayName = "ColorInput";
 function EyeDropperButton({ onPick }) {
   const [supported, setSupported] = useState(false);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
-  const PipetteIcon = useIcon2("pipette");
+  const PipetteIcon = useIcon("pipette");
   useEffect(() => {
     setSupported(typeof window !== "undefined" && "EyeDropper" in window);
   }, []);
@@ -762,8 +1065,8 @@ function EyeDropperButton({ onPick }) {
   });
 }
 function ColorTile2({ color, size = 24, className, style }) {
-  const shape = useShape2();
-  return /* @__PURE__ */ jsxs("span", {
+  const shape = useShape();
+  return /* @__PURE__ */ jsx("span", {
     className: cn2("inline-block relative shrink-0 overflow-hidden shadow-swatch", shape.bg, className),
     style: {
       width: size,
@@ -771,23 +1074,17 @@ function ColorTile2({ color, size = 24, className, style }) {
       ...CHECKER_BG,
       ...style
     },
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "absolute inset-0",
-        style: { backgroundColor: color }
-      }),
-      /* @__PURE__ */ jsx("span", {
-        "aria-hidden": true,
-        className: cn2("absolute inset-0 pointer-events-none shadow-swatch", shape.bg)
-      })
-    ]
+    children: /* @__PURE__ */ jsx("span", {
+      className: "absolute inset-0",
+      style: { backgroundColor: color }
+    })
   });
 }
 var ColorSwatch2 = forwardRef(({ color, size = 28, selected, className, onMouseEnter, onMouseLeave, ...props }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   const [hovered, setHovered] = useState(false);
   const ring = selected ? "shadow-swatch-selected" : hovered ? "shadow-swatch-hover" : "shadow-swatch";
-  return /* @__PURE__ */ jsxs("button", {
+  return /* @__PURE__ */ jsx("button", {
     ref,
     type: "button",
     "aria-label": `Select color ${color}`,
@@ -806,16 +1103,10 @@ var ColorSwatch2 = forwardRef(({ color, size = 28, selected, className, onMouseE
       onMouseLeave?.(e);
     },
     ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "absolute inset-0",
-        style: { backgroundColor: color }
-      }),
-      /* @__PURE__ */ jsx("span", {
-        "aria-hidden": true,
-        className: cn2("absolute inset-0 pointer-events-none shadow-swatch", shape.bg)
-      })
-    ]
+    children: /* @__PURE__ */ jsx("span", {
+      className: "absolute inset-0",
+      style: { backgroundColor: color }
+    })
   });
 });
 ColorSwatch2.displayName = "ColorSwatch";
@@ -826,16 +1117,16 @@ function SwatchStrip({
 }) {
   const normalizedCurrent = useMemo(() => {
     const p = parseColor2(current);
-    return p ? rgbToHexStr2(p.r, p.g, p.b, p.a).toLowerCase() : "";
+    return p ? rgbToHexStr(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 = resolveCssColor2(sw);
+        const p = resolveCssColor(sw);
         if (p)
-          next[sw] = rgbToHexStr2(p.r, p.g, p.b, p.a).toLowerCase();
+          next[sw] = rgbToHexStr(p.r, p.g, p.b, p.a).toLowerCase();
       }
     }
     setResolvedSwatches(next);
@@ -844,7 +1135,7 @@ function SwatchStrip({
     className: "flex flex-wrap gap-2",
     children: swatches.map((sw, i) => {
       const parsed = parseColor2(sw);
-      const normalized = parsed ? rgbToHexStr2(parsed.r, parsed.g, parsed.b, parsed.a).toLowerCase() : resolvedSwatches[sw] ?? sw.toLowerCase();
+      const normalized = parsed ? rgbToHexStr(parsed.r, parsed.g, parsed.b, parsed.a).toLowerCase() : resolvedSwatches[sw] ?? sw.toLowerCase();
       const isSelected = normalized === normalizedCurrent;
       return /* @__PURE__ */ jsx(ColorSwatch2, {
         color: sw,
@@ -880,7 +1171,7 @@ var ColorPicker2 = forwardRef(({
     const p = parseColor2(currentRawValue);
     if (!p)
       return { h: 0, s: 1, v: 1, a: 1 };
-    const hsv = rgbToHsv2(p.r, p.g, p.b);
+    const hsv = rgbToHsv(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);
@@ -897,7 +1188,7 @@ var ColorPicker2 = forwardRef(({
     if (!p)
       return;
     oklchHueRef.current = null;
-    const newHsv = rgbToHsv2(p.r, p.g, p.b);
+    const newHsv = rgbToHsv(p.r, p.g, p.b);
     setHsv((prev) => ({
       h: newHsv.s === 0 ? prev.h : newHsv.h,
       s: newHsv.s,
@@ -910,7 +1201,7 @@ var ColorPicker2 = forwardRef(({
     const merged = { ...hsv, ...next };
     setHsv(merged);
     const p = buildParsed2(merged.h, merged.s, merged.v, merged.a);
-    const formatted = formatValueByFormat2(p, currentFormat);
+    const formatted = formatValueByFormat(p, currentFormat);
     lastEmittedRef.current = formatted;
     if (!isControlled)
       setInternalValue(formatted);
@@ -920,18 +1211,18 @@ var ColorPicker2 = forwardRef(({
     if (!isFormatControlled)
       setInternalFormat(f);
     onFormatChange?.(f);
-    const formatted = formatValueByFormat2(parsed, f);
+    const formatted = formatValueByFormat(parsed, f);
     lastEmittedRef.current = formatted;
     if (!isControlled)
       setInternalValue(formatted);
     onValueChange?.(formatted, parsed);
   }, [isFormatControlled, isControlled, onFormatChange, onValueChange, parsed]);
   const handleHexCommit = useCallback((input) => {
-    const p = resolveCssColor2(input);
+    const p = resolveCssColor(input);
     if (!p)
       return;
     oklchHueRef.current = null;
-    const newHsv = rgbToHsv2(p.r, p.g, p.b);
+    const newHsv = rgbToHsv(p.r, p.g, p.b);
     const merged = {
       h: newHsv.s === 0 ? hsv.h : newHsv.h,
       s: newHsv.s,
@@ -940,7 +1231,7 @@ var ColorPicker2 = forwardRef(({
     };
     setHsv(merged);
     const next = buildParsed2(merged.h, merged.s, merged.v, merged.a);
-    const formatted = formatValueByFormat2(next, currentFormat);
+    const formatted = formatValueByFormat(next, currentFormat);
     lastEmittedRef.current = formatted;
     if (!isControlled)
       setInternalValue(formatted);
@@ -952,12 +1243,12 @@ var ColorPicker2 = forwardRef(({
   const handleEyedrop = useCallback((hex) => {
     handleHexCommit(hex);
   }, [handleHexCommit]);
-  const solidHueRgb = useMemo(() => hsvToRgb2(hsv.h, hsv.s, hsv.v), [hsv.h, hsv.s, hsv.v]);
+  const solidHueRgb = useMemo(() => hsvToRgb(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 = useShape2();
+  const shape = useShape();
   const substrate = useSurface2();
   const pickerLevel = Math.max(substrate, 3);
   const paintsSurface = useContext(PanelSurfaceContext);
@@ -1026,7 +1317,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 = rgbToHsv2(r, g, b);
+                const hsvVal = rgbToHsv(r, g, b);
                 updateHsv({
                   h: hsvVal.s === 0 ? hsv.h : hsvVal.h,
                   s: hsvVal.s,
@@ -1039,12 +1330,12 @@ var ColorPicker2 = forwardRef(({
               case "lSL": {
                 if (channel === "hSL")
                   oklchHueRef.current = null;
-                const hsl = rgbToHsl2(p.r, p.g, p.b);
+                const hsl = rgbToHsl(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 = hslToRgb2(h2, clamp012(s2), clamp012(l2));
-                const hsvVal = rgbToHsv2(rgb.r, rgb.g, rgb.b);
+                const rgb = hslToRgb(h2, clamp01(s2), clamp01(l2));
+                const hsvVal = rgbToHsv(rgb.r, rgb.g, rgb.b);
                 updateHsv({
                   h: hsvVal.s === 0 ? h2 : hsvVal.h,
                   s: hsvVal.s,
@@ -1055,14 +1346,14 @@ var ColorPicker2 = forwardRef(({
               case "L":
               case "C":
               case "H": {
-                const cur = rgbToOklch2(p.r, p.g, p.b);
+                const cur = rgbToOklch(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 = oklchToRgb2(clamp012(L), Math.max(0, C), H);
-                const hsvVal = rgbToHsv2(rgb.r, rgb.g, rgb.b);
+                const rgb = oklchToRgb(clamp01(L), Math.max(0, C), H);
+                const hsvVal = rgbToHsv(rgb.r, rgb.g, rgb.b);
                 updateHsv({
                   h: hsvVal.s === 0 ? hsv.h : hsvVal.h,
                   s: hsvVal.s,
@@ -1071,7 +1362,7 @@ var ColorPicker2 = forwardRef(({
                 return;
               }
               case "alphaPercent": {
-                const a = clamp012(Number(value) / 100);
+                const a = clamp01(Number(value) / 100);
                 updateHsv({ a });
                 return;
               }
@@ -1177,7 +1468,7 @@ function ColorInputsRow({
     });
   }
   if (format === "hsl") {
-    const hsl = rgbToHsl2(parsed.r, parsed.g, parsed.b);
+    const hsl = rgbToHsl(parsed.r, parsed.g, parsed.b);
     return /* @__PURE__ */ jsxs("div", {
       className: "grid grid-cols-4 gap-1",
       children: [
@@ -1234,7 +1525,7 @@ function ColorInputsRow({
       ]
     });
   }
-  const oklch = rgbToOklch2(parsed.r, parsed.g, parsed.b);
+  const oklch = rgbToOklch(parsed.r, parsed.g, parsed.b);
   const displayH = oklchHue ?? oklch.H;
   return /* @__PURE__ */ jsxs("div", {
     className: "grid grid-cols-4 gap-1",
@@ -1332,10 +1623,6 @@ var ColorPickerPopover2 = forwardRef(({
   triggerShowRemove = false,
   onTriggerRemove,
   triggerClassName,
-  removeLabel = "Remove color",
-  disabled = false,
-  readOnly = false,
-  rootClassName,
   open: openProp,
   defaultOpen = false,
   onOpenChange,
@@ -1348,24 +1635,21 @@ var ColorPickerPopover2 = forwardRef(({
 }, ref) => {
   const isOpenControlled = openProp !== undefined;
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const locked = disabled || readOnly;
-  const open = !locked && (isOpenControlled ? openProp : internalOpen);
-  const { origin, capture } = useMorphOrigin2();
-  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
-  const shape = useShape2();
+  const open = isOpenControlled ? openProp : internalOpen;
+  const { origin, capture } = useMorphOrigin();
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  const shape = useShape();
   const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   const substrate = useSurface2();
   const level = Math.min(substrate + 2, 8);
   const handleOpenChange = useCallback((next, details) => {
-    if (locked)
-      return;
     if (next)
       capture(details);
     if (!isOpenControlled)
       setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isOpenControlled, locked, onOpenChange, capture]);
+  }, [isOpenControlled, onOpenChange, capture]);
   const isControlled = pickerProps.value !== undefined;
   const [internalValue, setInternalValue] = useState(pickerProps.value ?? pickerProps.defaultValue ?? "#6B97FF");
   const currentValue = isControlled ? pickerProps.value : internalValue;
@@ -1374,23 +1658,20 @@ var ColorPickerPopover2 = forwardRef(({
       setInternalValue(v);
     pickerProps.onValueChange?.(v, parsed);
   }, [isControlled, pickerProps]);
-  const XIcon = useIcon2("x");
+  const XIcon = useIcon("x");
   const parsed = useMemo(() => parseColor2(currentValue), [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 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 root = /* @__PURE__ */ jsx(Popover.Root, {
     open,
     onOpenChange: handleOpenChange,
     modal: false,
     children: /* @__PURE__ */ jsxs("div", {
       ref,
-      className: cn2("inline-flex", rootClassName),
+      className: "inline-flex",
       children: [
         /* @__PURE__ */ jsxs(Popover.Trigger, {
-          disabled,
-          tabIndex: readOnly ? -1 : undefined,
-          "data-readonly": readOnly || undefined,
-          className: cn2("flex items-center border border-border bg-transparent hover:bg-hover transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", "disabled:opacity-50 disabled:pointer-events-none data-[readonly]:cursor-default data-[readonly]:hover:!bg-transparent", sizeClasses.gap, sizeClasses.control, compact ? "px-1.5" : "px-2", shape.input, "weight-medium", triggerClassName),
+          className: cn2("flex items-center border border-border bg-transparent hover:bg-hover transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.gap, sizeClasses.control, compact ? "px-1.5" : "px-2", shape.input, "weight-medium", triggerClassName),
           children: [
             triggerLabel && triggerLabelPosition === "left" && /* @__PURE__ */ jsx("span", {
               className: cn2("text-muted-foreground px-1 select-none", sizeClasses.text),
@@ -1408,9 +1689,9 @@ var ColorPickerPopover2 = forwardRef(({
               className: cn2("text-muted-foreground px-1 select-none", sizeClasses.text),
               children: triggerLabel
             }),
-            triggerShowRemove && !locked && /* @__PURE__ */ jsx("span", {
+            triggerShowRemove && /* @__PURE__ */ jsx("span", {
               role: "button",
-              "aria-label": removeLabel,
+              "aria-label": "Remove color",
               tabIndex: 0,
               onClick: (e) => {
                 e.stopPropagation();
@@ -1435,7 +1716,7 @@ var ColorPickerPopover2 = forwardRef(({
           children: /* @__PURE__ */ jsx(Popover.Positioner, {
             side: "bottom",
             align: "start",
-            sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : 6,
+            sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : 6,
             className: "z-50 outline-none",
             children: /* @__PURE__ */ jsx(Popover.Popup, {
               ref: morph.popupRef,
@@ -1444,10 +1725,10 @@ var ColorPickerPopover2 = forwardRef(({
                 value: morph.popup,
                 children: /* @__PURE__ */ jsx(SurfaceProvider2, {
                   value: level,
-                  children: /* @__PURE__ */ jsx(MorphSurface2, {
+                  children: /* @__PURE__ */ jsx(MorphSurface, {
                     morph,
-                    bg: SURFACE_BG2[level],
-                    shadow: SURFACE_SHADOW2[3],
+                    bg: SURFACE_BG[level],
+                    shadow: SURFACE_SHADOW[3],
                     radius: shape.container,
                     children: /* @__PURE__ */ jsx(PanelSurfaceContext.Provider, {
                       value: false,
@@ -1475,4 +1756,4 @@ ColorPickerPopover2.displayName = "ColorPickerPopover";
 Object.assign(ColorPicker2, { Popover: ColorPickerPopover2 });
 var color_picker_default = ColorPicker2;
 
-export { ColorPickerPortalContainer2, ColorTile2, ColorSwatch2, ColorPicker2, ColorPickerPopover2, color_picker_default };
+export { ColorPickerPortalContainer2, parseColor2, buildParsed2, ColorTile2, ColorSwatch2, ColorPicker2, ColorPickerPopover2, color_picker_default };