@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-3k8xpnpq.js

@@ -0,0 +1,1759 @@
+import {
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  shapeMap,
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  surfaceClasses2,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  Tooltip2
+} from "./components-ng72k97e.js";
+import {
+  Slider2
+} from "./components-wvp1m52g.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/inputs/color-picker/index.tsx
+import { Menu } from "@base-ui/react/menu";
+import { NumberField } from "@base-ui/react/number-field";
+import { Popover } from "@base-ui/react/popover";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorPickerPortalContainerContext = createContext(null);
+function ColorPickerPortalContainer2({ value, children }) {
+  return /* @__PURE__ */ jsx(ColorPickerPortalContainerContext.Provider, {
+    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 = {
+  backgroundImage: "conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%, var(--checker-a) 0 75%, var(--checker-b) 0)",
+  backgroundSize: "8px 8px"
+};
+function SaturationSquare({ h, s, v, onChange }) {
+  const ref = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const hasMoved = useRef(false);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [cursorPos, setCursorPos] = useState(null);
+  const shape = useShape();
+  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);
+    onChange(x, 1 - y);
+  }, [onChange]);
+  const updateCursorPos = useCallback((clientX, clientY) => {
+    const rect = ref.current?.getBoundingClientRect();
+    if (!rect)
+      return;
+    setCursorPos({
+      x: clamp01((clientX - rect.left) / rect.width) * 100,
+      y: clamp01((clientY - rect.top) / rect.height) * 100
+    });
+  }, []);
+  const onPointerDown = useCallback((e) => {
+    if (e.pointerType === "mouse" && e.button !== 0)
+      return;
+    e.preventDefault();
+    setDragging(true);
+    hasMoved.current = false;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    updateFromPointer(e.clientX, e.clientY);
+  }, [updateFromPointer]);
+  const onPointerMove = useCallback((e) => {
+    updateCursorPos(e.clientX, e.clientY);
+    if (!dragging)
+      return;
+    hasMoved.current = true;
+    updateFromPointer(e.clientX, e.clientY);
+  }, [dragging, updateFromPointer, updateCursorPos]);
+  const onPointerUp = useCallback(() => {
+    setDragging(false);
+    hasMoved.current = false;
+  }, []);
+  const onKeyDown = useCallback((e) => {
+    const step = e.shiftKey ? 0.1 : 0.01;
+    let nextS = s, nextV = v, handled = true;
+    if (e.key === "ArrowLeft")
+      nextS = clamp01(s - step);
+    else if (e.key === "ArrowRight")
+      nextS = clamp01(s + step);
+    else if (e.key === "ArrowUp")
+      nextV = clamp01(v + step);
+    else if (e.key === "ArrowDown")
+      nextV = clamp01(v - step);
+    else
+      handled = false;
+    if (handled) {
+      e.preventDefault();
+      onChange(nextS, nextV);
+    }
+  }, [onChange, 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,
+    role: "application",
+    "aria-label": "Saturation and brightness",
+    tabIndex: 0,
+    onFocus: (e) => {
+      if (e.currentTarget.matches(":focus-visible"))
+        setFocused(true);
+    },
+    onBlur: () => setFocused(false),
+    onPointerEnter: () => setHovered(true),
+    onPointerLeave: () => {
+      setHovered(false);
+      setCursorPos(null);
+    },
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onKeyDown,
+    className: cn2("relative w-full select-none touch-none cursor-none outline-none", focused && "ring-2 ring-focus-ring", shape.bg),
+    style: {
+      height: SQUARE_HEIGHT
+    },
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: cn2("absolute inset-0 overflow-hidden", shape.bg === "rounded-[20px]" ? "rounded-2xl" : shape.bg),
+        style: {
+          background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${h}, 100%, 50%))`
+        }
+      }),
+      /* @__PURE__ */ jsx(motion.div, {
+        className: "absolute pointer-events-none rounded-full border border-thumb shadow-picker-thumb",
+        initial: false,
+        animate: {
+          left: `${s * 100}%`,
+          top: `${(1 - v) * 100}%`,
+          width: 18,
+          height: 18
+        },
+        transition: { duration: 0 },
+        style: {
+          transform: "translate(-50%, -50%)",
+          backgroundColor: thumbColor
+        }
+      }),
+      hovered && !dragging && cursorPos && /* @__PURE__ */ jsx("div", {
+        className: "absolute pointer-events-none rounded-full border-2 border-picker-ring shadow-picker-cursor",
+        style: {
+          left: `${cursorPos.x}%`,
+          top: `${cursorPos.y}%`,
+          width: 18,
+          height: 18,
+          transform: "translate(-50%, -50%)"
+        }
+      })
+    ]
+  });
+}
+function HueSlider({ h, onChange }) {
+  const hueColor = `hsl(${h}, 100%, 50%)`;
+  return /* @__PURE__ */ jsx(Slider2, {
+    value: h,
+    onChange: (v) => onChange(typeof v === "number" ? v : v[0] ?? 0),
+    min: 0,
+    max: 360,
+    step: 1,
+    showValue: false,
+    hideFill: true,
+    thumbColor: hueColor,
+    thumbBorderColor: "var(--picker-thumb-border)",
+    trackStyle: {
+      background: "linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))",
+      borderColor: "transparent"
+    },
+    "aria-label": "Hue"
+  });
+}
+function AlphaSlider({
+  a,
+  solidColor,
+  solidR,
+  solidG,
+  solidB,
+  onChange
+}) {
+  const transparentColor = `rgba(${solidR}, ${solidG}, ${solidB}, 0)`;
+  return /* @__PURE__ */ jsx(Slider2, {
+    value: Math.round(a * 100),
+    onChange: (v) => onChange((typeof v === "number" ? v : v[0] ?? 0) / 100),
+    min: 0,
+    max: 100,
+    step: 1,
+    showValue: false,
+    hideFill: true,
+    thumbColor: solidColor,
+    thumbBorderColor: "var(--picker-thumb-border)",
+    trackStyle: {
+      backgroundImage: `linear-gradient(to right, ${transparentColor} 0%, ${solidColor} 98%), conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%, var(--checker-a) 0 75%, var(--checker-b) 0)`,
+      backgroundSize: "100% 100%, 8px 8px",
+      borderWidth: 0
+    },
+    "aria-label": "Alpha"
+  });
+}
+var FORMAT_LABELS = {
+  hex: "HEX",
+  rgb: "RGB",
+  hsl: "HSL",
+  oklch: "OKLCH"
+};
+var FORMATS = ["hex", "rgb", "hsl", "oklch"];
+var menuShape = shapeMap.rounded;
+var FormatMenuContext = createContext(null);
+function FormatItem({
+  index,
+  value,
+  label,
+  checked
+}) {
+  const ref = useRef(null);
+  const menuCtx = useContext(FormatMenuContext);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  useRegisterFluidHoverItem2(menuCtx?.registerItem, index, ref);
+  const isActive = menuCtx?.activeIndex === index;
+  return /* @__PURE__ */ jsx(Menu.RadioItem, {
+    value,
+    label,
+    closeOnClick: true,
+    render: /* @__PURE__ */ jsx("div", {
+      ref,
+      "data-fluid-hover-index": index,
+      className: cn2("relative z-10 flex items-center cursor-pointer outline-none", compact ? "px-2.5 py-1.5" : "px-3 py-2", sizeClasses.text, shape.item)
+    }),
+    children: /* @__PURE__ */ jsxs("span", {
+      className: "inline-grid",
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: "col-start-1 row-start-1 invisible weight-semibold",
+          "aria-hidden": "true",
+          children: label
+        }),
+        /* @__PURE__ */ jsx("span", {
+          className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast", isActive || checked ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
+          children: label
+        })
+      ]
+    })
+  });
+}
+function FormatDropdown({
+  value,
+  onChange,
+  open: openProp,
+  defaultOpen = false
+}) {
+  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 level = Math.min(useSurface2() + 2, 8);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const portalContainer = useContext(ColorPickerPortalContainerContext);
+  const containerRef = useRef(null);
+  const ChevronDownIcon = useIcon("chevron-down");
+  const hover = useFluidHover2(containerRef);
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover;
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  useEffect(() => {
+    if (!open)
+      return;
+    remeasure();
+  }, [open, remeasure]);
+  const checkedIndex = FORMATS.indexOf(value);
+  const checkedRect = checkedIndex !== -1 ? itemRects[checkedIndex] ?? null : null;
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] ?? null : null;
+  const menuCtx = useMemo(() => ({ registerItem, activeIndex, checkedIndex }), [registerItem, activeIndex, checkedIndex]);
+  return /* @__PURE__ */ jsxs(Menu.Root, {
+    open,
+    onOpenChange: (next, details) => {
+      if (next)
+        capture(details);
+      if (!isControlled)
+        setInternalOpen(next);
+    },
+    modal: false,
+    children: [
+      /* @__PURE__ */ jsxs(Menu.Trigger, {
+        className: cn2("flex items-center justify-between bg-transparent hover:bg-hover hover:text-foreground transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.gap, sizeClasses.control, sizeClasses.px, sizeClasses.text, open ? "bg-active text-foreground" : "text-muted-foreground active:bg-active", shape.input, "weight-medium"),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            children: FORMAT_LABELS[value]
+          }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, {
+            size: 14,
+            strokeWidth: 1.5,
+            className: cn2("text-muted-foreground transition-transform duration-150", open && "rotate-180")
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(Menu.Portal, {
+        container: portalContainer ?? undefined,
+        children: /* @__PURE__ */ jsx(Menu.Positioner, {
+          side: "bottom",
+          align: "start",
+          sideOffset: 6,
+          className: "z-[60] outline-none",
+          children: /* @__PURE__ */ jsx(FormatMenuContext.Provider, {
+            value: menuCtx,
+            children: /* @__PURE__ */ jsx(Menu.Popup, {
+              ref: morph.popupRef,
+              onMouseEnter: () => {
+                handlers.onMouseEnter();
+                setFocusedIndex(null);
+              },
+              onMouseMove: handlers.onMouseMove,
+              onMouseLeave: handlers.onMouseLeave,
+              onClick: handlers.onClick,
+              onFocus: (e) => {
+                const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+                if (indexAttr != null) {
+                  const idx = Number(indexAttr);
+                  setActiveIndex(idx);
+                  setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+                }
+              },
+              onBlur: (e) => {
+                if (e.currentTarget.contains(e.relatedTarget))
+                  return;
+                setFocusedIndex(null);
+                setActiveIndex(null);
+              },
+              className: "relative select-none outline-none",
+              children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+                value: level,
+                children: /* @__PURE__ */ jsx(MorphSurface, {
+                  morph,
+                  bg: SURFACE_BG[level],
+                  shadow: SURFACE_SHADOW[3],
+                  radius: menuShape.container,
+                  className: "min-w-[var(--anchor-width)]",
+                  children: /* @__PURE__ */ jsxs("div", {
+                    ref: containerRef,
+                    className: "relative flex flex-col p-1",
+                    children: [
+                      /* @__PURE__ */ jsx(AnimatePresence, {
+                        children: checkedRect && /* @__PURE__ */ jsx(motion.div, {
+                          className: `absolute ${menuShape.bg} bg-active pointer-events-none`,
+                          initial: false,
+                          animate: {
+                            top: checkedRect.top,
+                            left: checkedRect.left,
+                            width: checkedRect.width,
+                            height: checkedRect.height,
+                            opacity: 1
+                          },
+                          exit: { opacity: 0, transition: spring2.moderate.exit },
+                          transition: {
+                            ...spring2.moderate,
+                            opacity: { duration: spring2.fast.duration }
+                          }
+                        })
+                      }),
+                      /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+                        hover,
+                        from: checkedRect,
+                        className: menuShape.bg
+                      }),
+                      /* @__PURE__ */ jsx(AnimatePresence, {
+                        children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+                          className: `absolute ${menuShape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+                          initial: false,
+                          animate: {
+                            left: focusRect.left - 2,
+                            top: focusRect.top - 2,
+                            width: focusRect.width + 4,
+                            height: focusRect.height + 4
+                          },
+                          exit: { opacity: 0, transition: spring2.fast.exit },
+                          transition: {
+                            ...spring2.fast,
+                            opacity: { duration: spring2.fast.duration }
+                          }
+                        })
+                      }),
+                      /* @__PURE__ */ jsx(Menu.RadioGroup, {
+                        value,
+                        onValueChange: (next) => onChange(next),
+                        className: "contents",
+                        children: FORMATS.map((fmt, i) => /* @__PURE__ */ jsx(FormatItem, {
+                          index: i,
+                          value: fmt,
+                          label: FORMAT_LABELS[fmt],
+                          checked: value === fmt
+                        }, fmt))
+                      })
+                    ]
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    ]
+  });
+}
+var TextColorInput = forwardRef(({
+  value,
+  onCommit,
+  ariaLabel,
+  width,
+  className,
+  inputClassName,
+  align = "left",
+  prefix,
+  inputMode = "text",
+  nudgeStep,
+  nudgeShiftStep,
+  hasPercent = false,
+  decimals,
+  min,
+  max,
+  wrap = false
+}, ref) => {
+  const [draft, setDraft] = useState(value);
+  const interactingRef = useRef(false);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  useEffect(() => {
+    if (!interactingRef.current)
+      setDraft(value);
+  }, [value]);
+  const formatNumber = (n) => decimals != null ? n.toFixed(decimals) : String(Math.round(n));
+  const commitNumber = (n) => {
+    let bounded = n;
+    if (wrap && min != null && max != null) {
+      const range = max - min;
+      bounded = ((bounded - min) % range + range) % range + min;
+    } else {
+      if (min != null)
+        bounded = Math.max(min, bounded);
+      if (max != null)
+        bounded = Math.min(max, bounded);
+    }
+    const formatted = formatNumber(bounded);
+    const withSuffix = hasPercent ? `${formatted}%` : formatted;
+    setDraft(withSuffix);
+    onCommit(withSuffix);
+  };
+  const nudge = (direction, shift) => {
+    const baseStep = shift ? nudgeShiftStep ?? 10 : nudgeStep ?? 1;
+    const cur = parseFloat(draft.replace("%", ""));
+    if (Number.isNaN(cur))
+      return;
+    commitNumber(cur + direction * baseStep);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn2("flex items-center px-2 bg-transparent hover:bg-hover active:bg-active transition-colors duration-fast focus-within:ring-1 focus-within:ring-focus-ring select-none", sizeClasses.control, shape.input, className),
+    style: { width },
+    children: [
+      prefix && /* @__PURE__ */ jsx("span", {
+        className: cn2("text-muted-foreground mr-1 select-none", compact ? "text-caption-compact" : "text-caption"),
+        children: prefix
+      }),
+      /* @__PURE__ */ jsx("input", {
+        ref,
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onFocus: (e) => {
+          interactingRef.current = true;
+          e.currentTarget.select();
+        },
+        onBlur: () => {
+          interactingRef.current = false;
+          if (draft !== value) {
+            const numeric = parseFloat(draft.replace("%", ""));
+            if (!Number.isNaN(numeric) && (min != null || max != null)) {
+              commitNumber(numeric);
+            } else {
+              onCommit(draft);
+            }
+          } else
+            setDraft(value);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            setDraft(value);
+            e.currentTarget.blur();
+          } else if ((nudgeStep != null || nudgeShiftStep != null) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+            e.preventDefault();
+            nudge(e.key === "ArrowUp" ? 1 : -1, e.shiftKey);
+          }
+        },
+        inputMode,
+        "aria-label": ariaLabel,
+        className: cn2("flex-1 min-w-0 bg-transparent text-foreground outline-none tabular-nums", sizeClasses.text, align === "center" && "text-center", align === "right" && "text-right", "weight-medium", inputClassName)
+      })
+    ]
+  });
+});
+TextColorInput.displayName = "TextColorInput";
+var ScrubColorInput = forwardRef(({
+  value,
+  onCommit,
+  ariaLabel,
+  width,
+  className,
+  inputClassName,
+  align = "left",
+  prefix,
+  inputMode = "numeric",
+  nudgeStep,
+  nudgeShiftStep,
+  hasPercent = false,
+  decimals,
+  min,
+  max,
+  wrap = false
+}, ref) => {
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  const inputRef = useRef(null);
+  const [editing, setEditing] = useState(false);
+  const pointerDownRef = useRef(false);
+  const numeric = parseFloat(String(value).replace("%", ""));
+  const fieldValue = Number.isNaN(numeric) ? null : numeric;
+  const format = useMemo(() => {
+    const f = { useGrouping: false };
+    if (decimals != null) {
+      f.minimumFractionDigits = decimals;
+      f.maximumFractionDigits = decimals;
+    } else {
+      f.maximumFractionDigits = 0;
+    }
+    if (hasPercent) {
+      f.style = "unit";
+      f.unit = "percent";
+    }
+    return f;
+  }, [decimals, hasPercent]);
+  const setInputRef = useCallback((node) => {
+    inputRef.current = node;
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  }, [ref]);
+  const commit = useCallback((n) => {
+    let bounded = n;
+    if (wrap && min != null && max != null) {
+      if (bounded < min || bounded > max) {
+        const range = max - min;
+        bounded = ((bounded - min) % range + range) % range + min;
+      }
+    } else {
+      if (min != null)
+        bounded = Math.max(min, bounded);
+      if (max != null)
+        bounded = Math.min(max, bounded);
+    }
+    const formatted = decimals != null ? bounded.toFixed(decimals) : String(Math.round(bounded));
+    onCommit(hasPercent ? `${formatted}%` : formatted);
+  }, [wrap, min, max, decimals, hasPercent, onCommit]);
+  return /* @__PURE__ */ jsx(NumberField.Root, {
+    value: fieldValue,
+    onValueChange: (next, eventDetails) => {
+      if (next == null)
+        return;
+      const reason = eventDetails.reason;
+      if (reason === "input-change" || reason === "input-paste" || reason === "input-clear") {
+        return;
+      }
+      commit(next);
+    },
+    onValueCommitted: (_, eventDetails) => {
+      if (eventDetails.reason === "scrub") {
+        pointerDownRef.current = false;
+        inputRef.current?.blur();
+      }
+    },
+    min: wrap ? undefined : min,
+    max: wrap ? undefined : max,
+    step: nudgeStep ?? 1,
+    largeStep: nudgeShiftStep ?? 10,
+    format,
+    className: cn2("flex items-center bg-transparent hover:bg-hover active:bg-active transition-colors duration-fast focus-within:ring-1 focus-within:ring-focus-ring select-none", sizeClasses.control, shape.input, className),
+    style: { width },
+    children: /* @__PURE__ */ jsxs(NumberField.ScrubArea, {
+      direction: "horizontal",
+      pixelSensitivity: 1,
+      onPointerDownCapture: () => {
+        pointerDownRef.current = true;
+      },
+      onClick: () => {
+        pointerDownRef.current = false;
+        setEditing(true);
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      },
+      className: cn2("flex flex-1 min-w-0 items-center self-stretch px-2", !editing && "cursor-ew-resize"),
+      children: [
+        /* @__PURE__ */ jsx(NumberField.ScrubAreaCursor, {
+          className: "drop-shadow-picker-cursor",
+          children: /* @__PURE__ */ jsx("svg", {
+            width: 24,
+            height: 14,
+            viewBox: "0 0 24 14",
+            className: "fill-picker-edge stroke-thumb",
+            strokeWidth: 1,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", {
+              d: "M0.5 7l5-5v3.5h13V2l5 5-5 5V8.5h-13V12l-5-5z"
+            })
+          })
+        }),
+        prefix && /* @__PURE__ */ jsx("span", {
+          className: cn2("text-muted-foreground mr-1 select-none", compact ? "text-caption-compact" : "text-caption"),
+          children: prefix
+        }),
+        /* @__PURE__ */ jsx(NumberField.Input, {
+          ref: setInputRef,
+          "aria-label": ariaLabel,
+          inputMode,
+          onPointerDown: (e) => {
+            if (editing)
+              e.stopPropagation();
+          },
+          onFocus: (e) => {
+            if (pointerDownRef.current)
+              return;
+            setEditing(true);
+            e.currentTarget.select();
+          },
+          onBlur: () => {
+            setEditing(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.currentTarget.blur();
+            } else if (e.key === "Escape") {
+              const input = e.currentTarget;
+              const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+              if (setter && fieldValue != null) {
+                const restored = decimals != null ? fieldValue.toFixed(decimals) : String(Math.round(fieldValue));
+                setter.call(input, hasPercent ? `${restored}%` : restored);
+                input.dispatchEvent(new Event("input", { bubbles: true }));
+              }
+              input.blur();
+            }
+          },
+          className: cn2("flex-1 min-w-0 bg-transparent text-foreground outline-none tabular-nums", sizeClasses.text, align === "center" && "text-center", align === "right" && "text-right", !editing && "pointer-events-none", "weight-medium", inputClassName)
+        })
+      ]
+    })
+  });
+});
+ScrubColorInput.displayName = "ScrubColorInput";
+var ColorInput = forwardRef(({ scrubbable = false, ...props }, ref) => scrubbable ? /* @__PURE__ */ jsx(ScrubColorInput, {
+  ref,
+  ...props
+}) : /* @__PURE__ */ jsx(TextColorInput, {
+  ref,
+  ...props
+}));
+ColorInput.displayName = "ColorInput";
+function EyeDropperButton({ onPick }) {
+  const [supported, setSupported] = useState(false);
+  const shape = useShape();
+  const sizeClasses = useSize2();
+  const PipetteIcon = useIcon("pipette");
+  useEffect(() => {
+    setSupported(typeof window !== "undefined" && "EyeDropper" in window);
+  }, []);
+  if (!supported)
+    return null;
+  const handleClick = async () => {
+    try {
+      const Ctor = window.EyeDropper;
+      const eye = new Ctor;
+      const result = await eye.open();
+      onPick(result.sRGBHex);
+    } catch {}
+  };
+  return /* @__PURE__ */ jsx("button", {
+    type: "button",
+    onClick: handleClick,
+    "aria-label": "Pick color from screen",
+    className: cn2("flex items-center justify-center text-muted-foreground bg-transparent hover:bg-hover hover:text-foreground active:bg-active transition-colors duration-fast outline-none focus-visible:ring-1 focus-visible:ring-focus-ring cursor-pointer", sizeClasses.control, sizeClasses.px, shape.input),
+    children: /* @__PURE__ */ jsx(PipetteIcon, {
+      size: sizeClasses.icon,
+      strokeWidth: 1.5
+    })
+  });
+}
+function ColorTile2({ color, size = 24, className, style }) {
+  const shape = useShape();
+  return /* @__PURE__ */ jsx("span", {
+    className: cn2("inline-block relative shrink-0 overflow-hidden shadow-swatch", shape.bg, className),
+    style: {
+      width: size,
+      height: size,
+      ...CHECKER_BG,
+      ...style
+    },
+    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 = useShape();
+  const [hovered, setHovered] = useState(false);
+  const ring = selected ? "shadow-swatch-selected" : hovered ? "shadow-swatch-hover" : "shadow-swatch";
+  return /* @__PURE__ */ jsx("button", {
+    ref,
+    type: "button",
+    "aria-label": `Select color ${color}`,
+    className: cn2("relative shrink-0 overflow-hidden cursor-pointer outline-none transition-shadow duration-100", shape.bg, ring, className),
+    style: {
+      width: size,
+      height: size,
+      ...CHECKER_BG
+    },
+    onMouseEnter: (e) => {
+      setHovered(true);
+      onMouseEnter?.(e);
+    },
+    onMouseLeave: (e) => {
+      setHovered(false);
+      onMouseLeave?.(e);
+    },
+    ...props,
+    children: /* @__PURE__ */ jsx("span", {
+      className: "absolute inset-0",
+      style: { backgroundColor: color }
+    })
+  });
+});
+ColorSwatch2.displayName = "ColorSwatch";
+function SwatchStrip({
+  swatches,
+  current,
+  onPick
+}) {
+  const normalizedCurrent = useMemo(() => {
+    const p = parseColor2(current);
+    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 = resolveCssColor(sw);
+        if (p)
+          next[sw] = rgbToHexStr(p.r, p.g, p.b, p.a).toLowerCase();
+      }
+    }
+    setResolvedSwatches(next);
+  }, [swatches]);
+  return /* @__PURE__ */ jsx("div", {
+    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 isSelected = normalized === normalizedCurrent;
+      return /* @__PURE__ */ jsx(ColorSwatch2, {
+        color: sw,
+        size: 28,
+        selected: isSelected,
+        onClick: () => onPick(sw)
+      }, `${sw}-${i}`);
+    })
+  });
+}
+var ColorPicker2 = forwardRef(({
+  value,
+  defaultValue = "#6B97FF",
+  onValueChange,
+  format,
+  defaultFormat = "hex",
+  onFormatChange,
+  swatches,
+  hideEyedropper,
+  formatOpen,
+  defaultFormatOpen,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(value ?? defaultValue);
+  const currentRawValue = isControlled ? value : internalValue;
+  const isFormatControlled = format !== undefined;
+  const [internalFormat, setInternalFormat] = useState(defaultFormat);
+  const currentFormat = isFormatControlled ? format : internalFormat;
+  const initialParsed = useMemo(() => {
+    const p = parseColor2(currentRawValue);
+    if (!p)
+      return { h: 0, s: 1, v: 1, a: 1 };
+    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);
+  const oklchHueRef = useRef(null);
+  const lastEmittedRef = useRef("");
+  useEffect(() => {
+    if (!isControlled)
+      return;
+    const emitted = lastEmittedRef.current;
+    const cur = value;
+    if (cur === emitted)
+      return;
+    const p = parseColor2(cur);
+    if (!p)
+      return;
+    oklchHueRef.current = null;
+    const newHsv = rgbToHsv(p.r, p.g, p.b);
+    setHsv((prev) => ({
+      h: newHsv.s === 0 ? prev.h : newHsv.h,
+      s: newHsv.s,
+      v: newHsv.v,
+      a: p.a
+    }));
+  }, [value, isControlled]);
+  const parsed = useMemo(() => buildParsed2(hsv.h, hsv.s, hsv.v, hsv.a), [hsv]);
+  const updateHsv = useCallback((next) => {
+    const merged = { ...hsv, ...next };
+    setHsv(merged);
+    const p = buildParsed2(merged.h, merged.s, merged.v, merged.a);
+    const formatted = formatValueByFormat(p, currentFormat);
+    lastEmittedRef.current = formatted;
+    if (!isControlled)
+      setInternalValue(formatted);
+    onValueChange?.(formatted, p);
+  }, [hsv, currentFormat, isControlled, onValueChange]);
+  const handleFormatChange = useCallback((f) => {
+    if (!isFormatControlled)
+      setInternalFormat(f);
+    onFormatChange?.(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 = resolveCssColor(input);
+    if (!p)
+      return;
+    oklchHueRef.current = null;
+    const newHsv = rgbToHsv(p.r, p.g, p.b);
+    const merged = {
+      h: newHsv.s === 0 ? hsv.h : newHsv.h,
+      s: newHsv.s,
+      v: newHsv.v,
+      a: p.a
+    };
+    setHsv(merged);
+    const next = buildParsed2(merged.h, merged.s, merged.v, merged.a);
+    const formatted = formatValueByFormat(next, currentFormat);
+    lastEmittedRef.current = formatted;
+    if (!isControlled)
+      setInternalValue(formatted);
+    onValueChange?.(formatted, next);
+  }, [hsv.h, currentFormat, isControlled, onValueChange]);
+  const handleSwatchPick = useCallback((sw) => {
+    handleHexCommit(sw);
+  }, [handleHexCommit]);
+  const handleEyedrop = useCallback((hex) => {
+    handleHexCommit(hex);
+  }, [handleHexCommit]);
+  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 = useShape();
+  const substrate = useSurface2();
+  const pickerLevel = Math.max(substrate, 3);
+  const paintsSurface = useContext(PanelSurfaceContext);
+  const root = /* @__PURE__ */ jsx(SurfaceProvider2, {
+    value: pickerLevel,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref,
+      className: cn2("flex flex-col gap-2 p-3", paintsSurface && surfaceClasses2(pickerLevel, 1), shape.container, className),
+      style: { width: PANEL_WIDTH },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SaturationSquare, {
+          h: hsv.h,
+          s: hsv.s,
+          v: hsv.v,
+          onChange: (s, v) => updateHsv({ s, v })
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "flex flex-col [&>*]:mb-0 [&>*+*]:-mt-px",
+          children: [
+            /* @__PURE__ */ jsx(HueSlider, {
+              h: hsv.h,
+              onChange: (h) => {
+                oklchHueRef.current = null;
+                updateHsv({ h });
+              }
+            }),
+            /* @__PURE__ */ jsx(AlphaSlider, {
+              a: hsv.a,
+              solidColor: solidColorString,
+              solidR,
+              solidG,
+              solidB,
+              onChange: (a) => updateHsv({ a })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "grid grid-cols-2 gap-2",
+          children: [
+            /* @__PURE__ */ jsx(FormatDropdown, {
+              value: currentFormat,
+              onChange: handleFormatChange,
+              open: formatOpen,
+              defaultOpen: defaultFormatOpen
+            }),
+            !hideEyedropper && /* @__PURE__ */ jsx(EyeDropperButton, {
+              onPick: handleEyedrop
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(ColorInputsRow, {
+          parsed,
+          format: currentFormat,
+          oklchHue: oklchHueRef.current,
+          onChannelChange: (channel, value) => {
+            const p = { ...parsed };
+            switch (channel) {
+              case "hex":
+                handleHexCommit(value);
+                return;
+              case "r":
+              case "g":
+              case "b": {
+                oklchHueRef.current = null;
+                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);
+                updateHsv({
+                  h: hsvVal.s === 0 ? hsv.h : hsvVal.h,
+                  s: hsvVal.s,
+                  v: hsvVal.v
+                });
+                return;
+              }
+              case "hSL":
+              case "sSL":
+              case "lSL": {
+                if (channel === "hSL")
+                  oklchHueRef.current = null;
+                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 = 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,
+                  v: hsvVal.v
+                });
+                return;
+              }
+              case "L":
+              case "C":
+              case "H": {
+                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 = 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,
+                  v: hsvVal.v
+                });
+                return;
+              }
+              case "alphaPercent": {
+                const a = clamp01(Number(value) / 100);
+                updateHsv({ a });
+                return;
+              }
+            }
+          }
+        }),
+        swatches && swatches.length > 0 && /* @__PURE__ */ jsx(SwatchStrip, {
+          swatches,
+          current: parsed.hex,
+          onPick: handleSwatchPick
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+});
+ColorPicker2.displayName = "ColorPicker";
+function ColorInputsRow({
+  parsed,
+  format,
+  oklchHue,
+  onChannelChange
+}) {
+  const alphaPct = Math.round(parsed.a * 100);
+  if (format === "hex") {
+    const hexNoHash = parsed.hex.replace(/^#/, "").toUpperCase();
+    return /* @__PURE__ */ jsxs("div", {
+      className: "grid grid-cols-2 gap-2",
+      children: [
+        /* @__PURE__ */ jsx(ChannelTooltip, {
+          label: "Hex",
+          children: /* @__PURE__ */ jsx(ColorInput, {
+            value: hexNoHash,
+            onCommit: (next) => onChannelChange("hex", next.startsWith("#") ? next : `#${next}`),
+            ariaLabel: "Hex value",
+            prefix: "#"
+          })
+        }),
+        /* @__PURE__ */ jsx(AlphaInput, {
+          value: alphaPct,
+          onCommit: (n) => onChannelChange("alphaPercent", String(n))
+        })
+      ]
+    });
+  }
+  if (format === "rgb") {
+    return /* @__PURE__ */ jsxs("div", {
+      className: "grid grid-cols-4 gap-1",
+      children: [
+        /* @__PURE__ */ jsx(ChannelTooltip, {
+          label: "Red",
+          children: /* @__PURE__ */ jsx(ColorInput, {
+            value: String(parsed.r),
+            onCommit: (n) => onChannelChange("r", n),
+            ariaLabel: "Red",
+            align: "center",
+            inputMode: "numeric",
+            nudgeStep: 1,
+            nudgeShiftStep: 10,
+            scrubbable: true,
+            min: 0,
+            max: 255
+          })
+        }),
+        /* @__PURE__ */ jsx(ChannelTooltip, {
+          label: "Green",
+          children: /* @__PURE__ */ jsx(ColorInput, {
+            value: String(parsed.g),
+            onCommit: (n) => onChannelChange("g", n),
+            ariaLabel: "Green",
+            align: "center",
+            inputMode: "numeric",
+            nudgeStep: 1,
+            nudgeShiftStep: 10,
+            scrubbable: true,
+            min: 0,
+            max: 255
+          })
+        }),
+        /* @__PURE__ */ jsx(ChannelTooltip, {
+          label: "Blue",
+          children: /* @__PURE__ */ jsx(ColorInput, {
+            value: String(parsed.b),
+            onCommit: (n) => onChannelChange("b", n),
+            ariaLabel: "Blue",
+            align: "center",
+            inputMode: "numeric",
+            nudgeStep: 1,
+            nudgeShiftStep: 10,
+            scrubbable: true,
+            min: 0,
+            max: 255
+          })
+        }),
+        /* @__PURE__ */ jsx(AlphaInput, {
+          value: alphaPct,
+          onCommit: (n) => onChannelChange("alphaPercent", String(n))
+        })
+      ]
+    });
+  }
+  if (format === "hsl") {
+    const hsl = rgbToHsl(parsed.r, parsed.g, parsed.b);
+    return /* @__PURE__ */ jsxs("div", {
+      className: "grid grid-cols-4 gap-1",
+      children: [
+        /* @__PURE__ */ jsx(ChannelTooltip, {
+          label: "Hue",
+          children: /* @__PURE__ */ jsx(ColorInput, {
+            value: String(Math.round(hsl.h)),
+            onCommit: (n) => onChannelChange("hSL", n),
+            ariaLabel: "Hue",
+            align: "center",
+            inputMode: "numeric",
+            nudgeStep: 1,
+            nudgeShiftStep: 10,
+            scrubbable: true,
+            min: 0,
+            max: 360,
+            wrap: true
+          })
+        }),
+        /* @__PURE__ */ jsx(ChannelTooltip, {
+          label: "Saturation",
+          children: /* @__PURE__ */ jsx(ColorInput, {
+            value: String(Math.round(hsl.s * 100)),
+            onCommit: (n) => onChannelChange("sSL", n),
+            ariaLabel: "Saturation",
+            align: "center",
+            inputMode: "numeric",
+            nudgeStep: 1,
+            nudgeShiftStep: 10,
+            scrubbable: true,
+            min: 0,
+            max: 100
+          })
+        }),
+        /* @__PURE__ */ jsx(ChannelTooltip, {
+          label: "Lightness",
+          children: /* @__PURE__ */ jsx(ColorInput, {
+            value: String(Math.round(hsl.l * 100)),
+            onCommit: (n) => onChannelChange("lSL", n),
+            ariaLabel: "Lightness",
+            align: "center",
+            inputMode: "numeric",
+            nudgeStep: 1,
+            nudgeShiftStep: 10,
+            scrubbable: true,
+            min: 0,
+            max: 100
+          })
+        }),
+        /* @__PURE__ */ jsx(AlphaInput, {
+          value: alphaPct,
+          onCommit: (n) => onChannelChange("alphaPercent", String(n))
+        })
+      ]
+    });
+  }
+  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",
+    children: [
+      /* @__PURE__ */ jsx(ChannelTooltip, {
+        label: "Lightness",
+        children: /* @__PURE__ */ jsx(ColorInput, {
+          value: (oklch.L * 100).toFixed(0),
+          onCommit: (n) => onChannelChange("L", n),
+          ariaLabel: "Lightness",
+          align: "center",
+          inputMode: "decimal",
+          nudgeStep: 1,
+          nudgeShiftStep: 10,
+          scrubbable: true,
+          min: 0,
+          max: 100
+        })
+      }),
+      /* @__PURE__ */ jsx(ChannelTooltip, {
+        label: "Chroma",
+        children: /* @__PURE__ */ jsx(ColorInput, {
+          value: oklch.C.toFixed(2),
+          onCommit: (n) => onChannelChange("C", n),
+          ariaLabel: "Chroma",
+          align: "center",
+          inputMode: "decimal",
+          nudgeStep: 0.01,
+          nudgeShiftStep: 0.1,
+          decimals: 2,
+          scrubbable: true,
+          min: 0,
+          max: 0.4
+        })
+      }),
+      /* @__PURE__ */ jsx(ChannelTooltip, {
+        label: "Hue",
+        children: /* @__PURE__ */ jsx(ColorInput, {
+          value: displayH.toFixed(0),
+          onCommit: (n) => onChannelChange("H", n),
+          ariaLabel: "Hue",
+          align: "center",
+          inputMode: "numeric",
+          nudgeStep: 1,
+          nudgeShiftStep: 10,
+          scrubbable: true,
+          min: 0,
+          max: 360,
+          wrap: true
+        })
+      }),
+      /* @__PURE__ */ jsx(AlphaInput, {
+        value: alphaPct,
+        onCommit: (n) => onChannelChange("alphaPercent", String(n))
+      })
+    ]
+  });
+}
+function ChannelTooltip({ label, children }) {
+  return /* @__PURE__ */ jsx(Tooltip2, {
+    content: label,
+    delayDuration: 300,
+    children: /* @__PURE__ */ jsx("div", {
+      children
+    })
+  });
+}
+function AlphaInput({ value, onCommit }) {
+  return /* @__PURE__ */ jsx(ChannelTooltip, {
+    label: "Alpha",
+    children: /* @__PURE__ */ jsx(ColorInput, {
+      value: `${value}%`,
+      onCommit: (input) => {
+        const n = parseFloat(input.replace("%", ""));
+        if (Number.isNaN(n))
+          return;
+        onCommit(Math.max(0, Math.min(100, Math.round(n))));
+      },
+      ariaLabel: "Alpha",
+      align: "center",
+      inputMode: "numeric",
+      nudgeStep: 1,
+      nudgeShiftStep: 10,
+      hasPercent: true,
+      scrubbable: true,
+      min: 0,
+      max: 100
+    })
+  });
+}
+var ColorPickerPopover2 = forwardRef(({
+  triggerLabel,
+  triggerLabelPosition = "left",
+  triggerShowValue = true,
+  triggerShowRemove = false,
+  onTriggerRemove,
+  triggerClassName,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  size,
+  from,
+  effect,
+  hideSource,
+  tier,
+  ...pickerProps
+}, ref) => {
+  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 sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  const substrate = useSurface2();
+  const level = Math.min(substrate + 2, 8);
+  const handleOpenChange = useCallback((next, details) => {
+    if (next)
+      capture(details);
+    if (!isOpenControlled)
+      setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isOpenControlled, onOpenChange, capture]);
+  const isControlled = pickerProps.value !== undefined;
+  const [internalValue, setInternalValue] = useState(pickerProps.value ?? pickerProps.defaultValue ?? "#6B97FF");
+  const currentValue = isControlled ? pickerProps.value : internalValue;
+  const handleValueChange = useCallback((v, parsed) => {
+    if (!isControlled)
+      setInternalValue(v);
+    pickerProps.onValueChange?.(v, parsed);
+  }, [isControlled, pickerProps]);
+  const XIcon = useIcon("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 root = /* @__PURE__ */ jsx(Popover.Root, {
+    open,
+    onOpenChange: handleOpenChange,
+    modal: false,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref,
+      className: "inline-flex",
+      children: [
+        /* @__PURE__ */ jsxs(Popover.Trigger, {
+          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),
+              children: triggerLabel
+            }),
+            /* @__PURE__ */ jsx(ColorTile2, {
+              color: swatchColor,
+              size: compact ? 16 : 20
+            }),
+            triggerShowValue && /* @__PURE__ */ jsx("span", {
+              className: cn2("text-foreground tabular-nums", sizeClasses.text),
+              children: valueLabel
+            }),
+            triggerLabel && triggerLabelPosition === "right" && /* @__PURE__ */ jsx("span", {
+              className: cn2("text-muted-foreground px-1 select-none", sizeClasses.text),
+              children: triggerLabel
+            }),
+            triggerShowRemove && /* @__PURE__ */ jsx("span", {
+              role: "button",
+              "aria-label": "Remove color",
+              tabIndex: 0,
+              onClick: (e) => {
+                e.stopPropagation();
+                onTriggerRemove?.();
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onTriggerRemove?.();
+                }
+              },
+              className: "ml-1 text-muted-foreground hover:text-foreground cursor-pointer flex items-center",
+              children: /* @__PURE__ */ jsx(XIcon, {
+                size: 14,
+                strokeWidth: 1.5
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(Popover.Portal, {
+          children: /* @__PURE__ */ jsx(Popover.Positioner, {
+            side: "bottom",
+            align: "start",
+            sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : 6,
+            className: "z-50 outline-none",
+            children: /* @__PURE__ */ jsx(Popover.Popup, {
+              ref: morph.popupRef,
+              className: "relative outline-none",
+              children: /* @__PURE__ */ jsx(ColorPickerPortalContainer2, {
+                value: morph.popup,
+                children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+                  value: level,
+                  children: /* @__PURE__ */ jsx(MorphSurface, {
+                    morph,
+                    bg: SURFACE_BG[level],
+                    shadow: SURFACE_SHADOW[3],
+                    radius: shape.container,
+                    children: /* @__PURE__ */ jsx(PanelSurfaceContext.Provider, {
+                      value: false,
+                      children: /* @__PURE__ */ jsx(ColorPicker2, {
+                        ...pickerProps,
+                        value: currentValue,
+                        onValueChange: handleValueChange
+                      })
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+});
+ColorPickerPopover2.displayName = "ColorPickerPopover";
+Object.assign(ColorPicker2, { Popover: ColorPickerPopover2 });
+var color_picker_default = ColorPicker2;
+
+export { ColorPickerPortalContainer2, parseColor2, buildParsed2, ColorTile2, ColorSwatch2, ColorPicker2, ColorPickerPopover2, color_picker_default };