aporia 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,7 +1,425 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useContext, createContext, useCallback, useRef, useLayoutEffect } from "react";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs } from "react/jsx-runtime";
+import t, { useContext, createContext, useId, useState, useCallback, useEffect, useRef, useLayoutEffect, useMemo } from "react";
 import { useMotionValue, useSpring, useTransform, motion } from "motion/react";
 import { Popover } from "@base-ui/react";
+function Panel({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["aporiaPanel", className].filter(Boolean).join(" "),
+      ...rest,
+      children
+    }
+  );
+}
+const CategoryDisabledContext = createContext(false);
+function CategoryDisabledProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CategoryDisabledContext.Provider, { value, children });
+}
+function useCategoryDisabled() {
+  return useContext(CategoryDisabledContext);
+}
+function Category({
+  title,
+  children,
+  disabled = false,
+  onDisabledChange,
+  collapsed: collapsedProp,
+  onCollapsedChange,
+  defaultCollapsed = false,
+  className
+}) {
+  const bodyId = useId();
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+  const collapsed = collapsedProp !== void 0 ? collapsedProp : uncontrolledCollapsed;
+  const setCollapsed = useCallback(
+    (next) => {
+      onCollapsedChange == null ? void 0 : onCollapsedChange(next);
+      if (collapsedProp === void 0) {
+        setUncontrolledCollapsed(next);
+      }
+    },
+    [collapsedProp, onCollapsedChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: ["category", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "true" : "false",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "categoryHeader", children: [
+          /* @__PURE__ */ jsxs("div", { className: "categoryHeaderStart", children: [
+            /* @__PURE__ */ jsx("div", { className: "categoryChevronReveal", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "categoryChevronBtn",
+                "aria-expanded": !collapsed,
+                "aria-controls": bodyId,
+                "aria-label": collapsed ? "Expand category" : "Collapse category",
+                onClick: () => setCollapsed(!collapsed),
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "categoryChevronIcon",
+                    "data-collapsed": collapsed ? "true" : "false",
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 12 12",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M3 4.5L6 7.5L9 4.5",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx("h2", { className: "categoryTitle", id: `${bodyId}-label`, children: title })
+          ] }),
+          onDisabledChange ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "categoryDisabledDot",
+              "aria-label": disabled ? "Enable category" : "Disable category",
+              "aria-pressed": disabled,
+              onClick: (e) => {
+                e.stopPropagation();
+                onDisabledChange(!disabled);
+              }
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(CategoryDisabledProvider, { value: disabled, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: bodyId,
+            className: "categoryBody sliderGroup",
+            role: "region",
+            "aria-labelledby": `${bodyId}-label`,
+            hidden: collapsed,
+            "aria-hidden": collapsed,
+            children
+          }
+        ) })
+      ]
+    }
+  );
+}
+function $(n2, e, t2) {
+  if (t2 < 1) {
+    let u = e * Math.sqrt(1 - t2 * t2);
+    return 1 - Math.exp(-t2 * e * n2) * (Math.cos(u * n2) + t2 * e / u * Math.sin(u * n2));
+  }
+  let i = Math.sqrt(t2 * t2 - 1), s = -e * (t2 + i), r = -e * (t2 - i), o = -s / (r - s);
+  return 1 - (1 - o) * Math.exp(s * n2) - o * Math.exp(r * n2);
+}
+function j(n2, e, t2) {
+  let r = 0;
+  for (let o = 0; o < 10; o += 1e-3) if (Math.abs($(o, n2, e) - 1) > t2) r = 0;
+  else if (r += 1e-3, r > 0.1) return Math.ceil((o - r + 1e-3) * 1e3);
+  return Math.ceil(10 * 1e3);
+}
+var O = /* @__PURE__ */ new Map();
+function D(n2) {
+  let { stiffness: e = 100, damping: t2 = 10, mass: i = 1, precision: s = 1e-3 } = n2 ?? {}, r = `${e}:${t2}:${i}:${s}`, o = O.get(r);
+  if (o) return o;
+  let a = Math.sqrt(e / i), u = t2 / (2 * Math.sqrt(e * i)), l2 = j(a, u, s), c = Math.min(100, Math.max(32, Math.round(l2 / 15))), m = [];
+  for (let g = 0; g < c; g++) {
+    let A = g / (c - 1) * (l2 / 1e3), S = g === c - 1 ? 1 : $(A, a, u);
+    m.push(Math.round(S * 1e4) / 1e4 + "");
+  }
+  for (; m.length > 2 && m[m.length - 2] === "1"; ) m.splice(m.length - 2, 1);
+  let p = { easing: `linear(${m.join(", ")})`, duration: l2 };
+  return O.set(r, p), p;
+}
+function H(n2, e) {
+  let t2 = n2.includes(" ");
+  if (typeof Intl.Segmenter < "u") {
+    let s = new Intl.Segmenter(e, { granularity: t2 ? "word" : "grapheme" }).segment(n2)[Symbol.iterator]();
+    return q(s);
+  }
+  return Y(n2, t2);
+}
+function q(n2) {
+  return Array.from(n2).reduce((e, t2) => t2.segment === " " ? [...e, { id: `space-${t2.index}`, string: " " }] : e.find((s) => s.string === t2.segment) ? [...e, { id: `${t2.segment}-${t2.index}`, string: t2.segment }] : [...e, { id: t2.segment, string: t2.segment }], []);
+}
+function K(n2, e, t2) {
+  let i = n2.find((s) => s.string === e);
+  n2.push(i ? { id: `${e}-${t2}`, string: e } : { id: e, string: e });
+}
+function Y(n2, e) {
+  let t2 = e ? n2.split(" ") : n2.split(""), i = [];
+  return t2.forEach((s, r) => {
+    e && r > 0 && i.push({ id: `space-${r}`, string: " " }), K(i, s, r);
+  }), i;
+}
+var y = "torph-root", T = "torph-item", d = "torph-id", f$1 = "torph-exiting", M = "torph-debug";
+function w(n2) {
+  let e = Array.from(n2.children), t2 = {};
+  return e.forEach((i, s) => {
+    if (i.hasAttribute(f$1)) return;
+    let r = i.getAttribute(d) || `child-${s}`;
+    t2[r] = { x: i.offsetLeft, y: i.offsetTop };
+  }), t2;
+}
+function R(n2, e, t2) {
+  let i = n2[t2], s = e[t2];
+  return !i || !s ? { dx: 0, dy: 0 } : { dx: i.x - s.x, dy: i.y - s.y };
+}
+function v(n2, e, t2, i = "backward-first") {
+  let [s, r] = i === "backward-first" ? ["backward", "forward"] : ["forward", "backward"], o = (a) => {
+    if (a === "backward") {
+      for (let u = n2 - 1; u >= 0; u--) if (t2.has(e[u])) return e[u];
+    } else for (let u = n2 + 1; u < e.length; u++) if (t2.has(e[u])) return e[u];
+    return null;
+  };
+  return o(s) ?? o(r);
+}
+function _(n2, e, t2, i) {
+  let s = new Set(t2.filter((o, a) => i.has(o) && !e.has(n2[a]))), r = /* @__PURE__ */ new Map();
+  for (let o = 0; o < n2.length; o++) {
+    let a = n2[o];
+    e.has(a) && r.set(a, v(o, t2, s, "forward-first"));
+  }
+  return r;
+}
+function C(n2, e) {
+  return Math.min(n2 * e, 150);
+}
+function L(n2) {
+  let e = getComputedStyle(n2).transform;
+  if (!e || e === "none") return { tx: 0, ty: 0 };
+  let t2 = e.match(/matrix\(([^)]+)\)/);
+  if (!t2) return { tx: 0, ty: 0 };
+  let i = t2[1].split(",").map(Number);
+  return { tx: i[4] || 0, ty: i[5] || 0 };
+}
+function Q(n2) {
+  let { tx: e, ty: t2 } = L(n2), i = Number(getComputedStyle(n2).opacity) || 1;
+  return n2.getAnimations().forEach((s) => s.cancel()), { tx: e, ty: t2, opacity: i };
+}
+function N(n2, e) {
+  let { dx: t2, dy: i, duration: s, ease: r, scale: o } = e;
+  n2.animate({ transform: o ? `translate(${t2}px, ${i}px) scale(0.95)` : `translate(${t2}px, ${i}px)`, offset: 1 }, { duration: s, easing: r, fill: "both" });
+  let a = n2.animate({ opacity: 0, offset: 1 }, { duration: C(s, 0.25), easing: "linear", fill: "both" });
+  a.onfinish = () => n2.remove();
+}
+function k(n2, e) {
+  let { deltaX: t2, deltaY: i, isNew: s, duration: r, ease: o } = e, a = Q(n2), u = t2 + a.tx, l2 = i + a.ty;
+  n2.animate({ transform: `translate(${u}px, ${l2}px) scale(${s ? 0.95 : 1})`, offset: 0 }, { duration: r, easing: o, fill: "both" });
+  let c = s && a.opacity >= 1 ? 0 : a.opacity;
+  c < 1 && n2.animate([{ opacity: c }, { opacity: 1 }], { duration: C(r, s ? 0.5 : 0.25), easing: "linear", fill: "both" });
+}
+var x = null;
+function F(n2, e, t2, i, s) {
+  if (x && (x(), x = null), e === 0 || t2 === 0) return;
+  n2.style.width = "auto", n2.style.height = "auto", n2.offsetWidth;
+  let r = n2.offsetWidth, o = n2.offsetHeight;
+  n2.style.width = `${e}px`, n2.style.height = `${t2}px`, n2.offsetWidth, n2.style.width = `${r}px`, n2.style.height = `${o}px`;
+  function a() {
+    n2.removeEventListener("transitionend", u), clearTimeout(l2), x = null, n2.style.width = "auto", n2.style.height = "auto", s == null ? void 0 : s();
+  }
+  function u(c) {
+    c.target === n2 && (c.propertyName !== "width" && c.propertyName !== "height" || a());
+  }
+  n2.addEventListener("transitionend", u);
+  let l2 = setTimeout(a, i + 50);
+  x = () => {
+    n2.removeEventListener("transitionend", u), clearTimeout(l2), x = null;
+  };
+}
+function P(n2) {
+  let e = n2.map((t2) => {
+    let { tx: i, ty: s } = L(t2), r = Number(getComputedStyle(t2).opacity) || 1;
+    return t2.getAnimations().forEach((o) => o.cancel()), { left: t2.offsetLeft + i, top: t2.offsetTop + s, width: t2.offsetWidth, height: t2.offsetHeight, opacity: r };
+  });
+  n2.forEach((t2, i) => {
+    let s = e[i];
+    t2.setAttribute(f$1, ""), t2.style.position = "absolute", t2.style.pointerEvents = "none", t2.style.left = `${s.left}px`, t2.style.top = `${s.top}px`, t2.style.width = `${s.width}px`, t2.style.height = `${s.height}px`, t2.style.opacity = String(s.opacity);
+  });
+}
+function X(n2, e, t2, i) {
+  let s = /* @__PURE__ */ new Map();
+  e.forEach((r) => {
+    let o = r.getAttribute(d);
+    t2.has(o) && !r.hasAttribute(f$1) && (s.set(o, r), r.remove());
+  }), Array.from(n2.childNodes).forEach((r) => {
+    r.nodeType === Node.TEXT_NODE && r.remove();
+  }), i.forEach((r) => {
+    let o = s.get(r.id);
+    if (o) o.textContent = r.string, n2.appendChild(o);
+    else {
+      let a = document.createElement("span");
+      a.setAttribute(T, ""), a.setAttribute(d, r.id), a.textContent = r.string, n2.appendChild(a);
+    }
+  });
+}
+var J = `
+[${y}] {
+  display: inline-block;
+  position: relative;
+  will-change: width, height;
+  transition-property: width, height;
+  white-space: nowrap;
+  text-align: left;
+}
+
+[${T}] {
+  display: inline-block;
+  will-change: opacity, transform;
+  transform: none;
+  opacity: 1;
+}
+
+[${y}][${M}] {
+  outline: 2px solid magenta;
+  [${T}] {
+    outline: 2px solid cyan;
+    outline-offset: -4px;
+  }
+}`, h$1 = null, I = 0;
+function G() {
+  I++, !h$1 && (h$1 = document.createElement("style"), h$1.dataset.torph = "true", h$1.textContent = J, document.head.appendChild(h$1));
+}
+function U() {
+  I--, !(I > 0 || !h$1) && (h$1.remove(), h$1 = null);
+}
+function W() {
+  if (typeof window > "u") return { prefersReducedMotion: false, destroy: () => {
+  } };
+  let n2 = window.matchMedia("(prefers-reduced-motion: reduce)"), e = { prefersReducedMotion: n2.matches, destroy: i };
+  function t2(s) {
+    e.prefersReducedMotion = s.matches;
+  }
+  function i() {
+    n2.removeEventListener("change", t2);
+  }
+  return n2.addEventListener("change", t2), e;
+}
+var E = class n {
+  constructor() {
+    __publicField(this, "instance", null);
+    __publicField(this, "lastText", "");
+    __publicField(this, "configKey", "");
+  }
+  attach(e, t2) {
+    var _a;
+    (_a = this.instance) == null ? void 0 : _a.destroy(), this.instance = new b({ element: e, ...t2 }), this.configKey = n.serializeConfig(t2), this.lastText && this.instance.update(this.lastText);
+  }
+  update(e) {
+    var _a;
+    this.lastText = e, (_a = this.instance) == null ? void 0 : _a.update(e);
+  }
+  needsRecreate(e) {
+    return n.serializeConfig(e) !== this.configKey;
+  }
+  destroy() {
+    var _a;
+    (_a = this.instance) == null ? void 0 : _a.destroy(), this.instance = null;
+  }
+  static serializeConfig(e) {
+    return JSON.stringify({ ease: e.ease, duration: e.duration, locale: e.locale, scale: e.scale, debug: e.debug, disabled: e.disabled, respectReducedMotion: e.respectReducedMotion });
+  }
+};
+var V = "span", B = { debug: false, locale: "en", duration: 400, scale: true, ease: "cubic-bezier(0.19, 1, 0.22, 1)", disabled: false, respectReducedMotion: true }, b = class {
+  constructor(e) {
+    __publicField(this, "element");
+    __publicField(this, "options", {});
+    __publicField(this, "data");
+    __publicField(this, "currentMeasures", {});
+    __publicField(this, "prevMeasures", {});
+    __publicField(this, "isInitialRender", true);
+    __publicField(this, "reducedMotion", null);
+    let { ease: t2, ...i } = { ...B, ...e }, s, r;
+    if (typeof t2 == "object") {
+      let o = D(t2);
+      s = o.easing, r = o.duration;
+    } else s = t2, r = i.duration;
+    this.options = { ...i, ease: s, duration: r }, this.element = e.element, this.options.respectReducedMotion && (this.reducedMotion = W()), this.isDisabled() || (this.element.setAttribute(y, ""), this.element.style.transitionDuration = `${this.options.duration}ms`, this.element.style.transitionTimingFunction = this.options.ease, e.debug && this.element.setAttribute(M, "")), this.data = "", this.isDisabled() || G();
+  }
+  destroy() {
+    var _a;
+    (_a = this.reducedMotion) == null ? void 0 : _a.destroy(), this.element.getAnimations().forEach((e) => e.cancel()), this.element.removeAttribute(y), this.element.removeAttribute(M), U();
+  }
+  isDisabled() {
+    var _a;
+    return !!(this.options.disabled || ((_a = this.reducedMotion) == null ? void 0 : _a.prefersReducedMotion));
+  }
+  update(e) {
+    if (e !== this.data) {
+      if (this.data = e, this.isDisabled()) {
+        typeof e == "string" && (this.element.textContent = e);
+        return;
+      }
+      if (this.data instanceof HTMLElement) throw new Error("HTMLElement not yet supported");
+      this.options.onAnimationStart && !this.isInitialRender && this.options.onAnimationStart(), this.createTextGroup(this.data, this.element);
+    }
+  }
+  createTextGroup(e, t2) {
+    let i = t2.offsetWidth, s = t2.offsetHeight, r = H(e, this.options.locale);
+    this.prevMeasures = w(this.element);
+    let o = Array.from(t2.children), a = new Set(r.map((p) => p.id)), u = o.filter((p) => !a.has(p.getAttribute(d)) && !p.hasAttribute(f$1)), l2 = new Set(u), c = o.map((p) => p.getAttribute(d)), m = _(o, l2, c, a);
+    if (P(u), X(t2, o, a, r), this.currentMeasures = w(this.element), this.updateStyles(r), u.forEach((p) => {
+      if (this.isInitialRender) {
+        p.remove();
+        return;
+      }
+      let g = m.get(p), { dx: A, dy: S } = g ? R(this.currentMeasures, this.prevMeasures, g) : { dx: 0, dy: 0 };
+      N(p, { dx: A, dy: S, duration: this.options.duration, ease: this.options.ease, scale: this.options.scale });
+    }), this.isInitialRender) {
+      this.isInitialRender = false, t2.style.width = "auto", t2.style.height = "auto";
+      return;
+    }
+    F(t2, i, s, this.options.duration, this.options.onAnimationComplete);
+  }
+  updateStyles(e) {
+    if (this.isInitialRender) return;
+    let t2 = Array.from(this.element.children), i = e.map((r) => r.id), s = new Set(i.filter((r) => this.prevMeasures[r]));
+    t2.forEach((r, o) => {
+      if (r.hasAttribute(f$1)) return;
+      let a = r.getAttribute(d) || `child-${o}`, u = !this.prevMeasures[a], l2 = u ? v(e.findIndex((p) => p.id === a), i, s) : a, { dx: c, dy: m } = l2 ? R(this.prevMeasures, this.currentMeasures, l2) : { dx: 0, dy: 0 };
+      k(r, { deltaX: c, deltaY: m, isNew: u, duration: this.options.duration, ease: this.options.ease });
+    });
+  }
+};
+function f(e) {
+  if (typeof e == "string") return e;
+  if (typeof e == "number") return String(e);
+  if (!e || typeof e == "boolean") return "";
+  if (Array.isArray(e)) return e.map(f).join("");
+  throw t.isValidElement(e) ? new Error("TextMorph only accepts text content. Found a React element — use strings, numbers, or expressions instead.") : new Error(`TextMorph received an unsupported child of type "${typeof e}".`);
+}
+var h = ({ children: e, className: r, style: o, as: n2 = V, ...s }) => {
+  let { ref: p, update: c } = l(s), i = f(e), a = t.useRef({ __html: i });
+  return t.useEffect(() => {
+    c(i);
+  }, [i, c]), t.createElement(n2, { ref: p, className: r, style: o, dangerouslySetInnerHTML: a.current });
+};
+function l(e) {
+  let r = t.useRef(null), o = t.useRef(new E()), n2 = E.serializeConfig(e);
+  t.useEffect(() => (r.current && o.current.attach(r.current, e), () => {
+    o.current.destroy();
+  }), [n2]);
+  let s = t.useCallback((p) => {
+    o.current.update(p);
+  }, []);
+  return { ref: r, update: s };
+}
 function isTextInputTarget(target) {
   if (!(target instanceof HTMLElement)) return false;
   if (target.isContentEditable) return true;
@@ -20,7 +438,7 @@ function SliderOverlapDebugProvider({ children }) {
       if (e.code !== "KeyD") return;
       if (isTextInputTarget(e.target)) return;
       e.preventDefault();
-      setEnabled((v) => !v);
+      setEnabled((v2) => !v2);
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
@@ -30,41 +448,13 @@ function SliderOverlapDebugProvider({ children }) {
 function useSliderOverlapDebugEnabled() {
   return useContext(SliderOverlapDebugContext);
 }
-const STORAGE_KEY = "aporia-theme";
 const ThemeContext = createContext(null);
-function readStoredTheme() {
-  try {
-    const s = localStorage.getItem(STORAGE_KEY);
-    if (s === "light" || s === "dark") return s;
-  } catch {
-  }
-  return "dark";
-}
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = useState(readStoredTheme);
+  const theme = "dark";
   useEffect(() => {
     document.documentElement.dataset.theme = theme;
-    try {
-      localStorage.setItem(STORAGE_KEY, theme);
-    } catch {
-    }
   }, [theme]);
-  const setTheme = useCallback((t) => setThemeState(t), []);
-  const toggleTheme = useCallback(() => {
-    setThemeState((t) => t === "dark" ? "light" : "dark");
-  }, []);
-  useEffect(() => {
-    const onKeyDown = (e) => {
-      if (!e.shiftKey || e.repeat) return;
-      if (e.code !== "KeyT") return;
-      if (isTextInputTarget(e.target)) return;
-      e.preventDefault();
-      toggleTheme();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [toggleTheme]);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme }, children });
 }
 function useTheme() {
   const ctx = useContext(ThemeContext);
@@ -73,6 +463,210 @@ function useTheme() {
   }
   return ctx;
 }
+function ValueInput({
+  value,
+  prefix,
+  suffix,
+  onCommit,
+  sanitize = (v2) => v2,
+  validate = () => true,
+  maxLength,
+  inputMode = "text",
+  align = "left",
+  ariaLabel,
+  isActive = false,
+  className,
+  autoWidth = false,
+  valueTextRef,
+  onPaste,
+  renderValue,
+  inputRef: externalInputRef,
+  onEditingChange,
+  editing: externalEditing,
+  draft: externalDraft,
+  onDraftChange,
+  arrowStep,
+  arrowMin,
+  arrowMax,
+  disabled = false
+}) {
+  const [internalEditing, setInternalEditing] = useState(false);
+  const [internalDraft, setInternalDraft] = useState("");
+  const internalInputRef = useRef(null);
+  const measureRef = useRef(null);
+  const internalValueTextRef = useRef(null);
+  const [inputWidth, setInputWidth] = useState(null);
+  const editing = externalEditing !== void 0 ? externalEditing : internalEditing;
+  const draft = externalDraft !== void 0 ? externalDraft : internalDraft;
+  const inputRef = externalInputRef ?? internalInputRef;
+  const setEditing = (value2) => {
+    if (externalEditing === void 0) {
+      setInternalEditing(value2);
+    }
+    onEditingChange == null ? void 0 : onEditingChange(value2);
+  };
+  const setDraft = (value2) => {
+    if (externalDraft === void 0) {
+      setInternalDraft(value2);
+    }
+    onDraftChange == null ? void 0 : onDraftChange(value2);
+  };
+  const actualValueTextRef = valueTextRef ?? internalValueTextRef;
+  useLayoutEffect(() => {
+    var _a, _b;
+    if (!editing) return;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    (_b = inputRef.current) == null ? void 0 : _b.select();
+  }, [editing, inputRef]);
+  useLayoutEffect(() => {
+    if (!editing || !autoWidth) {
+      setInputWidth(null);
+      return;
+    }
+    const measure = () => {
+      const m = measureRef.current;
+      if (!m) return;
+      const w2 = m.getBoundingClientRect().width;
+      const next = Math.max(Math.ceil(w2 + 6), 22);
+      setInputWidth((prev) => prev === next ? prev : next);
+    };
+    measure();
+  }, [editing, draft, autoWidth]);
+  const startEdit = (e) => {
+    e.stopPropagation();
+    setDraft(value);
+    setEditing(true);
+  };
+  const commit = () => {
+    const sanitized = sanitize(draft);
+    if (validate(sanitized)) {
+      onCommit(sanitized);
+    }
+    setEditing(false);
+  };
+  const stepDecimals = (s) => {
+    const txt = String(s);
+    const i = txt.indexOf(".");
+    return i === -1 ? 0 : Math.max(0, txt.length - i - 1);
+  };
+  const handleKeyDown = (e) => {
+    if ((e.key === "ArrowUp" || e.key === "ArrowDown") && arrowStep != null) {
+      const dir = e.key === "ArrowUp" ? 1 : -1;
+      const mult = e.shiftKey ? 10 : 1;
+      const current = Number(sanitize(draft));
+      if (Number.isFinite(current) && Number.isFinite(arrowStep) && arrowStep !== 0) {
+        e.preventDefault();
+        let nextNum = current + dir * arrowStep * mult;
+        if (Number.isFinite(arrowMin)) nextNum = Math.max(arrowMin, nextNum);
+        if (Number.isFinite(arrowMax)) nextNum = Math.min(arrowMax, nextNum);
+        const decimals = stepDecimals(arrowStep);
+        const nextTxt = decimals > 0 ? nextNum.toFixed(decimals) : String(Math.round(nextNum));
+        setDraft(sanitize(nextTxt));
+        return;
+      }
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+    if (e.key === "Escape") {
+      setEditing(false);
+    }
+    e.stopPropagation();
+  };
+  const handleChange = (e) => {
+    const next = sanitize(e.target.value);
+    setDraft(next);
+  };
+  const handlePaste = (e) => {
+    const pasted = e.clipboardData.getData("text");
+    if (onPaste) {
+      const result = onPaste(pasted);
+      if (result !== null) {
+        e.preventDefault();
+        setDraft(result);
+        return;
+      }
+    }
+  };
+  const containerClass = [
+    "valueInput",
+    className,
+    align === "right" && "valueInput--right"
+  ].filter(Boolean).join(" ");
+  if (disabled) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: containerClass,
+        "data-disabled": "true",
+        "aria-label": ariaLabel ?? `Value, ${value}`,
+        children: [
+          prefix && /* @__PURE__ */ jsx("span", { className: "valueInputPrefix", children: prefix }),
+          /* @__PURE__ */ jsx("span", { className: "valueInputText", children: renderValue ? renderValue(value) : value }),
+          suffix && /* @__PURE__ */ jsx("span", { className: "valueInputSuffix", children: suffix })
+        ]
+      }
+    );
+  }
+  if (editing) {
+    return /* @__PURE__ */ jsxs("span", { className: containerClass, "data-editing": "true", children: [
+      prefix && /* @__PURE__ */ jsx("span", { className: "valueInputPrefix", children: prefix }),
+      autoWidth && /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: measureRef,
+          className: "valueInputMeasure",
+          "aria-hidden": true,
+          children: draft.length > 0 ? draft : "0"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          className: "valueInputField",
+          value: draft,
+          onChange: handleChange,
+          onPaste: handlePaste,
+          onBlur: commit,
+          onKeyDown: handleKeyDown,
+          onClick: (e) => e.stopPropagation(),
+          maxLength,
+          inputMode,
+          autoComplete: "off",
+          spellCheck: false,
+          "aria-label": ariaLabel,
+          style: inputWidth != null ? { width: inputWidth } : void 0
+        }
+      ),
+      suffix && /* @__PURE__ */ jsx("span", { className: "valueInputSuffix", children: suffix })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: containerClass,
+      "data-active": isActive ? "true" : "false",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel ?? `Edit value, ${value}`,
+      onClick: startEdit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setDraft(value);
+          setEditing(true);
+        }
+      },
+      children: [
+        prefix && /* @__PURE__ */ jsx("span", { className: "valueInputPrefix", children: prefix }),
+        /* @__PURE__ */ jsx("span", { ref: actualValueTextRef, className: "valueInputText", children: renderValue ? renderValue(value) : value }),
+        suffix && /* @__PURE__ */ jsx("span", { className: "valueInputSuffix", children: suffix })
+      ]
+    }
+  );
+}
 function clearDocumentSelection() {
   var _a;
   const sel = (_a = window.getSelection) == null ? void 0 : _a.call(window);
@@ -139,7 +733,6 @@ const THUMB_HEIGHT_PX = 16;
 const THUMB_HEIGHT_BEHIND_LABEL_PX = 10;
 const THUMB_INSET_FROM_FILL_END_PX = 10;
 const THUMB_OVERLAP_PAD_PX = 10;
-const VALUE_EDIT_WIDTH_CARET_PAD_PX = 6;
 function SliderRow({
   label,
   value,
@@ -147,23 +740,23 @@ function SliderRow({
   max,
   step,
   onChange,
-  fmt
+  fmt,
+  disabled: disabledProp
 }) {
-  const { theme } = useTheme();
+  useTheme();
+  const categoryDisabled = useCategoryDisabled();
+  const disabled = Boolean(disabledProp || categoryDisabled);
   const debugOverlap = useSliderOverlapDebugEnabled();
-  const [editing, setEditing] = useState(false);
+  const [valueEditing, setValueEditing] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [dragging, setDragging] = useState(false);
-  const [draft, setDraft] = useState("");
   const [mounted, setMounted] = useState(false);
   const inputRef = useRef(null);
   const cardRef = useRef(null);
   const wrapRef = useRef(null);
   const labelTextRef = useRef(null);
   const valueTextRef = useRef(null);
-  const valueEditMeasureRef = useRef(null);
   const valueRef = useRef(null);
-  const [valueEditWidthPx, setValueEditWidthPx] = useState(null);
   const [overlapLayout, setOverlapLayout] = useState(null);
   const [idleThumbOpacity, setIdleThumbOpacity] = useState(0);
   const lastPointerXRef = useRef(0);
@@ -180,15 +773,15 @@ function SliderRow({
   const baseW = useMotionValue(0);
   const cardWidth = useTransform(
     [stretchL, stretchR, pullLSpring, pullRSpring, baseW],
-    ([l, r, pl, pr, b]) => {
-      const base = Number(b);
-      let extra = Number(l) + Number(r) + Number(pl) + Number(pr);
+    ([l2, r, pl, pr, b2]) => {
+      const base = Number(b2);
+      let extra = Number(l2) + Number(r) + Number(pl) + Number(pr);
       if (Math.abs(extra) < STRETCH_SNAP_EPS_PX) extra = 0;
       return Math.max(1, Math.round(base + extra));
     }
   );
-  const cardMarginLeft = useTransform([stretchL, pullLSpring], ([l, pl]) => {
-    let leftExtra = Number(l) + Number(pl);
+  const cardMarginLeft = useTransform([stretchL, pullLSpring], ([l2, pl]) => {
+    let leftExtra = Number(l2) + Number(pl);
     if (Math.abs(leftExtra) < STRETCH_SNAP_EPS_PX) leftExtra = 0;
     return Math.round(-leftExtra);
   });
@@ -213,19 +806,13 @@ function SliderRow({
     setMounted(true);
   }, []);
   useLayoutEffect(() => {
-    if (theme !== "light") {
-      setIdleThumbOpacity(0);
-      return;
-    }
-    const raw = getComputedStyle(document.documentElement).getPropertyValue("--slider-thumb-idle-opacity").trim();
-    const n = parseFloat(raw);
-    setIdleThumbOpacity(Number.isFinite(n) ? n : 0.4);
-  }, [theme]);
+    setIdleThumbOpacity(0);
+  }, []);
   const display = fmt ? fmt(value) : value;
   useLayoutEffect(() => {
     const card = cardRef.current;
     const labelEl = labelTextRef.current;
-    const valueEl = editing ? inputRef.current : valueTextRef.current;
+    const valueEl = valueEditing ? inputRef.current : valueTextRef.current;
     if (!mounted || !card || !labelEl || !valueEl) {
       setOverlapLayout(null);
       return;
@@ -233,7 +820,7 @@ function SliderRow({
     const measure = () => {
       const c = cardRef.current;
       const le = labelTextRef.current;
-      const ve = editing ? inputRef.current : valueTextRef.current;
+      const ve = valueEditing ? inputRef.current : valueTextRef.current;
       if (!c || !le || !ve) {
         setOverlapLayout(null);
         return;
@@ -241,11 +828,11 @@ function SliderRow({
       const cardRect = c.getBoundingClientRect();
       const lr = le.getBoundingClientRect();
       const vr = ve.getBoundingClientRect();
-      const w = cardRect.width;
+      const w2 = cardRect.width;
       let labelEnd = lr.right - cardRect.left + THUMB_OVERLAP_PAD_PX;
       let valueStart = vr.left - cardRect.left - THUMB_OVERLAP_PAD_PX;
-      labelEnd = Math.min(Math.max(0, labelEnd), w);
-      valueStart = Math.min(Math.max(0, valueStart), w);
+      labelEnd = Math.min(Math.max(0, labelEnd), w2);
+      valueStart = Math.min(Math.max(0, valueStart), w2);
       if (valueStart < labelEnd) valueStart = labelEnd;
       setOverlapLayout((prev) => {
         if (prev && prev.labelEnd === labelEnd && prev.valueStart === valueStart) {
@@ -258,33 +845,7 @@ function SliderRow({
     const ro = new ResizeObserver(measure);
     ro.observe(card);
     return () => ro.disconnect();
-  }, [mounted, label, display, editing, draft, value]);
-  useLayoutEffect(() => {
-    if (!editing) {
-      setValueEditWidthPx(null);
-      return;
-    }
-    const measure = () => {
-      const m = valueEditMeasureRef.current;
-      const zone = valueRef.current;
-      if (!m || !zone) return;
-      const w = m.getBoundingClientRect().width;
-      const cs = getComputedStyle(zone);
-      const padL = parseFloat(cs.paddingLeft) || 0;
-      const padR = parseFloat(cs.paddingRight) || 0;
-      const maxInner = Math.max(0, zone.clientWidth - padL - padR);
-      const next = Math.min(
-        Math.max(Math.ceil(w + VALUE_EDIT_WIDTH_CARET_PAD_PX), 22),
-        Math.max(maxInner, 22)
-      );
-      setValueEditWidthPx((prev) => prev === next ? prev : next);
-    };
-    measure();
-    const ro = new ResizeObserver(measure);
-    const z = valueRef.current;
-    if (z) ro.observe(z);
-    return () => ro.disconnect();
-  }, [editing, draft]);
+  }, [mounted, label, display, valueEditing, value]);
   const span = max - min;
   const u = span > 0 ? (value - min) / span : 0;
   useEffect(() => {
@@ -306,10 +867,10 @@ function SliderRow({
   useEffect(() => {
     if (!dragging) return;
     const onMove = (e) => {
-      const { value: v, min: lo, max: hi } = dragStateRef.current;
+      const { value: v2, min: lo, max: hi } = dragStateRef.current;
       const sp = hi - lo;
       if (sp <= 0) return;
-      const uNow = (v - lo) / sp;
+      const uNow = (v2 - lo) / sp;
       const dx = e.clientX - lastPointerXRef.current;
       lastPointerXRef.current = e.clientX;
       if (uNow >= 1 - 1e-6 && dx > 0) {
@@ -357,10 +918,10 @@ function SliderRow({
     }
     const height = behindLabel ? THUMB_HEIGHT_BEHIND_LABEL_PX : THUMB_HEIGHT_PX;
     let debugZones2 = null;
-    if (debugOverlap && labelTextRef.current && (editing ? inputRef.current : valueTextRef.current)) {
+    if (debugOverlap && labelTextRef.current && (valueEditing ? inputRef.current : valueTextRef.current)) {
       const cr = cardRef.current.getBoundingClientRect();
       const lr = labelTextRef.current.getBoundingClientRect();
-      const ve = editing ? inputRef.current : valueTextRef.current;
+      const ve = valueEditing ? inputRef.current : valueTextRef.current;
       const vr = ve.getBoundingClientRect();
       debugZones2 = {
         overlapLabelEnd: labelEnd,
@@ -382,35 +943,10 @@ function SliderRow({
     return { opacity, height, debugZones: debugZones2 };
   };
   const { opacity: thumbOpacity, height: thumbHeight, debugZones } = getThumbLayout();
-  const startEdit = (e) => {
-    e.stopPropagation();
-    setDraft(String(value));
-    setEditing(true);
-    setTimeout(() => {
-      var _a;
-      return (_a = inputRef.current) == null ? void 0 : _a.select();
-    }, 0);
-  };
-  const commitEdit = () => {
-    const parsed = parseFloat(draft);
-    if (!Number.isNaN(parsed)) {
-      onChange(Math.max(min, Math.min(max, parsed)));
-    }
-    setEditing(false);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      commitEdit();
-    }
-    if (e.key === "Escape") {
-      setEditing(false);
-    }
-    e.stopPropagation();
-  };
   const isActive = hovered || dragging;
-  const idleThumbWidth = theme === "light" ? THUMB_WIDTH_PX : 0;
+  const idleThumbWidth = 0;
   const handleRangePointerDown = (e) => {
+    if (disabled) return;
     clearDocumentSelection();
     lastPointerXRef.current = e.clientX;
     syncBaseWidthFromParent();
@@ -441,7 +977,8 @@ function SliderRow({
     {
       className: "sliderCardWrap",
       ref: wrapRef,
-      onPointerEnter: () => setHovered(true),
+      "data-disabled": disabled ? "true" : "false",
+      onPointerEnter: () => !disabled && setHovered(true),
       onPointerLeave: () => setHovered(false),
       children: /* @__PURE__ */ jsxs(
         motion.div,
@@ -527,7 +1064,7 @@ function SliderRow({
                 className: "sliderTicks",
                 animate: { opacity: isActive ? 1 : 0 },
                 transition: { duration: 0.15, ease: "easeOut" },
-                children: [...Array(10)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "sliderTick" }, i))
+                children: [...Array(10)].map((_2, i) => /* @__PURE__ */ jsx("div", { className: "sliderTick" }, i))
               }
             ),
             /* @__PURE__ */ jsx(
@@ -539,6 +1076,7 @@ function SliderRow({
                 max,
                 step,
                 value,
+                disabled,
                 draggable: false,
                 onChange: (e) => onChange(parseFloat(e.target.value)),
                 onPointerDown: handleRangePointerDown,
@@ -570,43 +1108,40 @@ function SliderRow({
                 ref: valueRef,
                 className: "sliderValueZone",
                 onClick: (e) => e.stopPropagation(),
-                children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      ref: valueEditMeasureRef,
-                      className: "sliderValue sliderValueText sliderValueMeasure",
-                      "aria-hidden": true,
-                      children: draft.length > 0 ? draft : "0"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      ref: inputRef,
-                      className: "sliderValueInput",
-                      type: "text",
-                      inputMode: min < 0 || stepAllowsDecimal(step) ? "decimal" : "numeric",
-                      value: draft,
-                      autoComplete: "off",
-                      spellCheck: false,
-                      "aria-valuemin": min,
-                      "aria-valuemax": max,
-                      style: valueEditWidthPx != null ? { width: valueEditWidthPx } : { minWidth: 22 },
-                      onChange: (e) => setDraft(sanitizeValueDraft(e.target.value, min, step)),
-                      onBlur: commitEdit,
-                      onKeyDown: handleKeyDown,
-                      onClick: (e) => e.stopPropagation()
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsx(
-                  "span",
+                children: /* @__PURE__ */ jsx(
+                  ValueInput,
                   {
+                    value: String(display),
+                    disabled,
+                    onCommit: (val) => {
+                      const parsed = parseFloat(val);
+                      if (!Number.isNaN(parsed)) {
+                        onChange(Math.max(min, Math.min(max, parsed)));
+                      }
+                    },
+                    sanitize: (val) => sanitizeValueDraft(val, min, step),
+                    validate: (val) => !Number.isNaN(parseFloat(val)),
+                    inputMode: min < 0 || stepAllowsDecimal(step) ? "decimal" : "numeric",
+                    align: "right",
+                    isActive,
                     className: "sliderValue",
-                    draggable: false,
-                    "data-active": isActive ? "true" : "false",
-                    onClick: startEdit,
-                    children: /* @__PURE__ */ jsx("span", { ref: valueTextRef, className: "sliderValueText", children: display })
+                    autoWidth: true,
+                    arrowStep: step,
+                    arrowMin: min,
+                    arrowMax: max,
+                    valueTextRef,
+                    inputRef,
+                    onEditingChange: setValueEditing,
+                    renderValue: (val) => dragging ? val : /* @__PURE__ */ jsx(
+                      h,
+                      {
+                        className: "sliderValueMorph",
+                        as: "span",
+                        duration: 260,
+                        ease: { stiffness: 380, damping: 34, mass: 0.42 },
+                        children: val
+                      }
+                    )
                   }
                 )
               }
@@ -617,177 +1152,915 @@ function SliderRow({
     }
   );
 }
-function SwatchPopover({ title, renderTrigger, children }) {
-  return /* @__PURE__ */ jsxs(Popover.Root, { modal: true, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { render: renderTrigger }),
-    /* @__PURE__ */ jsx(Popover.Portal, { className: "swatchPopoverPortal", children: /* @__PURE__ */ jsx(
-      Popover.Positioner,
-      {
-        className: "swatchPopoverPositioner",
-        positionMethod: "fixed",
-        side: "bottom",
-        align: "end",
-        sideOffset: 6,
-        collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
-        children: /* @__PURE__ */ jsxs(
-          Popover.Popup,
-          {
-            className: "swatchPopoverPopup",
-            initialFocus: (openType) => openType === "keyboard",
-            children: [
-              title && /* @__PURE__ */ jsx(Popover.Title, { className: "swatchPopoverTitle", children: title }),
-              /* @__PURE__ */ jsx(Popover.Close, { type: "button", className: "swatchPopoverCloseSrOnly", children: "Close" }),
-              /* @__PURE__ */ jsx("div", { className: "swatchPopoverBody", children })
-            ]
-          }
-        )
-      }
-    ) })
-  ] });
-}
-function normalizeHex$1(raw) {
+function normalizeHex(raw) {
   const s = raw.trim();
   const m = s.match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
   if (!m) return "#808080";
-  let h = m[1];
-  if (h.length === 3) {
-    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  let h2 = m[1];
+  if (h2.length === 3) {
+    h2 = h2[0] + h2[0] + h2[1] + h2[1] + h2[2] + h2[2];
   }
-  return `#${h.toUpperCase()}`;
+  return `#${h2.toUpperCase()}`;
 }
-function hexDigits$1(hex) {
-  const n = normalizeHex$1(hex);
-  return n.slice(1);
+function hslToHex(h2, s, l2) {
+  const [r, g, b2] = hslToRgbBytes(h2, s, l2);
+  const toHex = (v2) => v2.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b2)}`.toUpperCase();
 }
-function isValidSixHex$1(d) {
-  return /^[0-9a-fA-F]{6}$/.test(d);
+function hslToRgbBytes(h2, s, l2) {
+  const hue = (h2 % 360 + 360) % 360;
+  const sat = Math.max(0, Math.min(1, s));
+  const lit = Math.max(0, Math.min(1, l2));
+  const c = (1 - Math.abs(2 * lit - 1)) * sat;
+  const x2 = c * (1 - Math.abs(hue / 60 % 2 - 1));
+  const m = lit - c / 2;
+  let rp = 0;
+  let gp = 0;
+  let bp = 0;
+  if (hue < 60) {
+    rp = c;
+    gp = x2;
+  } else if (hue < 120) {
+    rp = x2;
+    gp = c;
+  } else if (hue < 180) {
+    gp = c;
+    bp = x2;
+  } else if (hue < 240) {
+    gp = x2;
+    bp = c;
+  } else if (hue < 300) {
+    rp = x2;
+    bp = c;
+  } else {
+    rp = c;
+    bp = x2;
+  }
+  return [Math.round((rp + m) * 255), Math.round((gp + m) * 255), Math.round((bp + m) * 255)];
 }
-function ColorRow({ label = "Color", value, onChange }) {
-  const [hovered, setHovered] = useState(false);
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState("");
-  const inputRef = useRef(null);
-  const hex = normalizeHex$1(value);
-  const isActive = hovered || editing;
-  useLayoutEffect(() => {
-    var _a, _b;
-    if (!editing) return;
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-    (_b = inputRef.current) == null ? void 0 : _b.select();
-  }, [editing]);
-  const startEdit = (e) => {
-    e.stopPropagation();
-    setDraft(hexDigits$1(value));
-    setEditing(true);
-  };
-  const commit = () => {
-    const d = draft.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-    if (isValidSixHex$1(d)) {
-      onChange(`#${d.toUpperCase()}`);
+function hexToHsl(hex) {
+  const n2 = normalizeHex(hex);
+  const r = parseInt(n2.slice(1, 3), 16) / 255;
+  const g = parseInt(n2.slice(3, 5), 16) / 255;
+  const b2 = parseInt(n2.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b2);
+  const min = Math.min(r, g, b2);
+  const l2 = (max + min) / 2;
+  let h2 = 0;
+  let s = 0;
+  const d2 = max - min;
+  if (d2 !== 0) {
+    s = l2 > 0.5 ? d2 / (2 - max - min) : d2 / (max + min);
+    switch (max) {
+      case r:
+        h2 = ((g - b2) / d2 + (g < b2 ? 6 : 0)) * 60;
+        break;
+      case g:
+        h2 = ((b2 - r) / d2 + 2) * 60;
+        break;
+      default:
+        h2 = ((r - g) / d2 + 4) * 60;
+        break;
     }
-    setEditing(false);
-  };
-  const onHexKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      commit();
+  }
+  return { h: h2, s, l: l2 };
+}
+function hsvToRgbBytes(h2, s, v2) {
+  const hue = (h2 % 360 + 360) % 360;
+  const sat = Math.max(0, Math.min(1, s));
+  const val = Math.max(0, Math.min(1, v2));
+  const c = val * sat;
+  const x2 = c * (1 - Math.abs(hue / 60 % 2 - 1));
+  const m = val - c;
+  let rp = 0;
+  let gp = 0;
+  let bp = 0;
+  if (hue < 60) {
+    rp = c;
+    gp = x2;
+  } else if (hue < 120) {
+    rp = x2;
+    gp = c;
+  } else if (hue < 180) {
+    gp = c;
+    bp = x2;
+  } else if (hue < 240) {
+    gp = x2;
+    bp = c;
+  } else if (hue < 300) {
+    rp = x2;
+    bp = c;
+  } else {
+    rp = c;
+    bp = x2;
+  }
+  return [Math.round((rp + m) * 255), Math.round((gp + m) * 255), Math.round((bp + m) * 255)];
+}
+function hsvToHex(h2, s, v2) {
+  const [r, g, b2] = hsvToRgbBytes(h2, s, v2);
+  const toHex = (n2) => n2.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b2)}`.toUpperCase();
+}
+function hexToHsv(hex) {
+  const n2 = normalizeHex(hex);
+  const r = parseInt(n2.slice(1, 3), 16) / 255;
+  const g = parseInt(n2.slice(3, 5), 16) / 255;
+  const b2 = parseInt(n2.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b2);
+  const min = Math.min(r, g, b2);
+  const d2 = max - min;
+  let h2 = 0;
+  if (d2 !== 0) {
+    switch (max) {
+      case r:
+        h2 = ((g - b2) / d2 + (g < b2 ? 6 : 0)) * 60;
+        break;
+      case g:
+        h2 = ((b2 - r) / d2 + 2) * 60;
+        break;
+      default:
+        h2 = ((r - g) / d2 + 4) * 60;
+        break;
     }
-    if (e.key === "Escape") {
-      setEditing(false);
+  }
+  const v2 = max;
+  const s = max === 0 ? 0 : d2 / max;
+  return { h: h2, s, v: v2 };
+}
+function hexToRgb(hex) {
+  const n2 = normalizeHex(hex);
+  return {
+    r: parseInt(n2.slice(1, 3), 16),
+    g: parseInt(n2.slice(3, 5), 16),
+    b: parseInt(n2.slice(5, 7), 16)
+  };
+}
+function rgbToHex(r, g, b2) {
+  const clampByte = (v2) => Math.max(0, Math.min(255, Math.round(v2)));
+  const toHex = (v2) => clampByte(v2).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b2)}`.toUpperCase();
+}
+function clampHueDeg$1(h2) {
+  return (h2 % 360 + 360) % 360;
+}
+function clamp01$1(v2) {
+  return Math.max(0, Math.min(1, v2));
+}
+function parseNumberish(s) {
+  const n2 = Number.parseFloat(s.trim());
+  return Number.isFinite(n2) ? n2 : null;
+}
+function splitCssArgs(raw) {
+  const noAlpha = raw.split("/")[0] ?? raw;
+  return noAlpha.trim().replace(/,/g, " ").split(/\s+/).filter(Boolean);
+}
+function parseRgbArgsToBytes(args) {
+  if (args.length < 3) return null;
+  const nums = args.slice(0, 3);
+  const bytes = [];
+  for (const token of nums) {
+    if (token.endsWith("%")) {
+      const n2 = parseNumberish(token.slice(0, -1));
+      if (n2 === null) return null;
+      bytes.push(Math.round(Math.max(0, Math.min(100, n2)) / 100 * 255));
+    } else {
+      const n2 = parseNumberish(token);
+      if (n2 === null) return null;
+      bytes.push(Math.round(Math.max(0, Math.min(255, n2))));
     }
-    e.stopPropagation();
+  }
+  return { r: bytes[0], g: bytes[1], b: bytes[2] };
+}
+function parseHslArgs(args) {
+  if (args.length < 3) return null;
+  const hRaw = parseNumberish(args[0]);
+  if (hRaw === null) return null;
+  const h2 = clampHueDeg$1(String(args[0]).endsWith("deg") ? parseNumberish(String(args[0]).replace(/deg$/i, "")) ?? hRaw : hRaw);
+  const sTok = args[1];
+  const lTok = args[2];
+  if (!sTok.endsWith("%") || !lTok.endsWith("%")) return null;
+  const sN = parseNumberish(sTok.slice(0, -1));
+  const lN = parseNumberish(lTok.slice(0, -1));
+  if (sN === null || lN === null) return null;
+  return { h: h2, s: clamp01$1(sN / 100), l: clamp01$1(lN / 100) };
+}
+function parseHsvArgs(args) {
+  if (args.length < 3) return null;
+  const hRaw = parseNumberish(args[0]);
+  if (hRaw === null) return null;
+  const h2 = clampHueDeg$1(hRaw);
+  const sTok = args[1];
+  const vTok = args[2];
+  if (!sTok.endsWith("%") || !vTok.endsWith("%")) return null;
+  const sN = parseNumberish(sTok.slice(0, -1));
+  const vN = parseNumberish(vTok.slice(0, -1));
+  if (sN === null || vN === null) return null;
+  return { h: h2, s: clamp01$1(sN / 100), v: clamp01$1(vN / 100) };
+}
+function parseCssColorToHex(raw) {
+  const s = raw.trim();
+  if (!s) return null;
+  if (/^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(s)) {
+    return normalizeHex(s);
+  }
+  const fn = s.match(/^([a-zA-Z]+)\((.*)\)$/);
+  if (!fn) return null;
+  const name = fn[1].toLowerCase();
+  const args = splitCssArgs(fn[2] ?? "");
+  if (name === "rgb" || name === "rgba") {
+    const rgb = parseRgbArgsToBytes(args);
+    return rgb ? rgbToHex(rgb.r, rgb.g, rgb.b) : null;
+  }
+  if (name === "hsl" || name === "hsla") {
+    const hsl = parseHslArgs(args);
+    return hsl ? hslToHex(hsl.h, hsl.s, hsl.l) : null;
+  }
+  if (name === "hsv" || name === "hsb") {
+    const hsv = parseHsvArgs(args);
+    return hsv ? hsvToHex(hsv.h, hsv.s, hsv.v) : null;
+  }
+  return null;
+}
+const HUE_STOPS = [
+  "#FF0000",
+  "#FFFF00",
+  "#00FF00",
+  "#00FFFF",
+  "#0000FF",
+  "#FF00FF",
+  "#FF0000"
+];
+function clamp01(v2) {
+  return Math.max(0, Math.min(1, v2));
+}
+function clampHueDeg(h2) {
+  return (h2 % 360 + 360) % 360;
+}
+function clampInt(n2, min, max) {
+  return Math.max(min, Math.min(max, Math.round(n2)));
+}
+function normalizeHexDigits(raw) {
+  return raw.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+}
+function isValidSixHex$2(d2) {
+  return /^[0-9a-fA-F]{6}$/.test(d2);
+}
+function clampHsv01(base) {
+  return { h: clampHueDeg(base.h), s: clamp01(base.s), v: clamp01(base.v) };
+}
+function clampHsl01(base) {
+  return { h: clampHueDeg(base.h), s: clamp01(base.s), l: clamp01(base.l) };
+}
+function cycleMode(m) {
+  if (m === "hex") return "hsl";
+  if (m === "hsl") return "hsb";
+  if (m === "hsb") return "rgb";
+  return "hex";
+}
+function drawSvPlane(ctx, w2, h2, hue) {
+  const img = ctx.createImageData(w2, h2);
+  const d2 = img.data;
+  let p = 0;
+  for (let y2 = 0; y2 < h2; y2++) {
+    const v2 = 1 - y2 / Math.max(1, h2 - 1);
+    for (let x2 = 0; x2 < w2; x2++) {
+      const s = x2 / Math.max(1, w2 - 1);
+      const [r, g, b2] = hsvToRgbBytes(hue, s, v2);
+      d2[p] = r;
+      d2[p + 1] = g;
+      d2[p + 2] = b2;
+      d2[p + 3] = 255;
+      p += 4;
+    }
+  }
+  ctx.putImageData(img, 0, 0);
+}
+function readSvFromClient(clientX, clientY, base, svEl) {
+  if (!svEl) return null;
+  const r = svEl.getBoundingClientRect();
+  if (r.width <= 0 || r.height <= 0) return null;
+  const s = clamp01((clientX - r.left) / r.width);
+  const v2 = clamp01(1 - (clientY - r.top) / r.height);
+  return { ...base, s, v: v2 };
+}
+function readHueFromClient(clientY, base, hueEl) {
+  if (!hueEl) return null;
+  const r = hueEl.getBoundingClientRect();
+  if (r.height <= 0) return null;
+  const t2 = clamp01((clientY - r.top) / r.height);
+  return { ...base, h: t2 * 360 };
+}
+function EyeDropperIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 18 18", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M15.651,2.348c-.998-.998-2.739-.998-3.737,0l-2.503,2.503-1.131-1.131c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l6,6c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.131-1.131,2.502-2.502c1.03-1.03,1.03-2.708,0-3.738Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2.596,11.667c-.845,.845-.985,2.12-.444,3.121l-.932,.931c-.293,.292-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l.931-.931c.382,.208,.807,.329,1.254,.329,.706,0,1.369-.275,1.868-.774l4.695-4.695-3.738-3.737L2.596,11.667Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+function ColorPicker({ value, onChange }) {
+  const canvasRef = useRef(null);
+  const svWrapRef = useRef(null);
+  const hueRef = useRef(null);
+  const [dragging, setDragging] = useState(null);
+  const [pointerDraft, setPointerDraft] = useState(null);
+  const [memory, setMemory] = useState(() => {
+    const base = hexToHsv(normalizeHex(value));
+    return { h: base.h, s: base.s || 1 };
+  });
+  const [mode, setMode] = useState("hex");
+  const hsvFromValueRaw = useMemo(() => hexToHsv(normalizeHex(value)), [value]);
+  const hsvFromValue = useMemo(() => {
+    const base = hsvFromValueRaw;
+    if (base.v === 0) {
+      return { ...base, h: memory.h, s: memory.s };
+    }
+    if (base.s === 0) {
+      return { ...base, h: memory.h };
+    }
+    return base;
+  }, [hsvFromValueRaw, memory.h, memory.s]);
+  const draft = pointerDraft ?? hsvFromValue;
+  const hex = useMemo(() => normalizeHex(value), [value]);
+  const hslFromHex = useMemo(() => hexToHsl(hex), [hex]);
+  const rgbFromHex = useMemo(() => hexToRgb(hex), [hex]);
+  const redrawCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const w2 = Math.max(1, Math.round(rect.width * (window.devicePixelRatio || 1)));
+    const h2 = Math.max(1, Math.round(rect.height * (window.devicePixelRatio || 1)));
+    if (canvas.width !== w2 || canvas.height !== h2) {
+      canvas.width = w2;
+      canvas.height = h2;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    drawSvPlane(ctx, w2, h2, draft.h);
+  }, [draft.h]);
+  useLayoutEffect(() => {
+    redrawCanvas();
+  }, [redrawCanvas]);
+  useEffect(() => {
+    const el = canvasRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => redrawCanvas());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [redrawCanvas]);
+  const commit = useCallback(
+    (next) => {
+      setMemory({ h: next.h, s: next.s || memory.s });
+      onChange(hsvToHex(next.h, next.s, next.v));
+    },
+    [onChange, memory.s]
+  );
+  const onToggleMode = () => {
+    setMode((m) => cycleMode(m));
   };
-  const onHexChange = (e) => {
-    const next = e.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-    setDraft(next);
+  const handleColorPaste = (pasted) => {
+    const parsed = parseCssColorToHex(pasted);
+    if (parsed) {
+      onChange(parsed);
+      return "";
+    }
+    return null;
+  };
+  const onEyeDropper = async () => {
+    const AnyWindow = window;
+    if (!AnyWindow.EyeDropper) return;
+    try {
+      const dropper = new AnyWindow.EyeDropper();
+      const result = await dropper.open();
+      onChange(normalizeHex(result.sRGBHex));
+    } catch {
+    }
   };
-  const onHexPaste = (e) => {
+  const onSlPointerDown = (e) => {
+    if (e.button !== 0) return;
     e.preventDefault();
-    const pasted = e.clipboardData.getData("text");
-    const cleaned = pasted.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-    setDraft(cleaned);
+    const base = pointerDraft ?? hsvFromValue;
+    const next = readSvFromClient(e.clientX, e.clientY, base, svWrapRef.current);
+    if (!next) return;
+    setMemory({ h: next.h, s: next.s || memory.s });
+    setPointerDraft(next);
+    setDragging("sl");
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onSlPointerMove = (e) => {
+    if (dragging !== "sl" || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
+    setPointerDraft((prev) => {
+      const base = prev ?? hsvFromValue;
+      const next = readSvFromClient(e.clientX, e.clientY, base, svWrapRef.current);
+      if (next) setMemory({ h: next.h, s: next.s || memory.s });
+      return next ?? prev;
+    });
+  };
+  const onSlPointerUp = (e) => {
+    if (dragging !== "sl" || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    const base = pointerDraft ?? hsvFromValue;
+    const next = readSvFromClient(e.clientX, e.clientY, base, svWrapRef.current);
+    if (next) commit(next);
+    setPointerDraft(null);
+    setDragging(null);
+  };
+  const onHuePointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const base = pointerDraft ?? hsvFromValue;
+    const next = readHueFromClient(e.clientY, base, hueRef.current);
+    if (!next) return;
+    setMemory({ h: next.h, s: next.s || memory.s });
+    setPointerDraft(next);
+    setDragging("hue");
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onHuePointerMove = (e) => {
+    if (dragging !== "hue" || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
+    setPointerDraft((prev) => {
+      const base = prev ?? hsvFromValue;
+      const next = readHueFromClient(e.clientY, base, hueRef.current);
+      if (next) setMemory({ h: next.h, s: next.s || memory.s });
+      return next ?? prev;
+    });
   };
-  const onPickerChange = (e) => {
-    onChange(normalizeHex$1(e.target.value));
+  const onHuePointerUp = (e) => {
+    if (dragging !== "hue" || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    const base = pointerDraft ?? hsvFromValue;
+    const next = readHueFromClient(e.clientY, base, hueRef.current);
+    if (next) commit(next);
+    setPointerDraft(null);
+    setDragging(null);
+  };
+  const previewHex = hsvToHex(draft.h, draft.s, draft.v);
+  const onSlKeyDown = (e) => {
+    const step = e.shiftKey ? 0.05 : 0.01;
+    let { s, v: v2 } = draft;
+    let handled = true;
+    switch (e.key) {
+      case "ArrowRight":
+        s = clamp01(s + step);
+        break;
+      case "ArrowLeft":
+        s = clamp01(s - step);
+        break;
+      case "ArrowUp":
+        v2 = clamp01(v2 + step);
+        break;
+      case "ArrowDown":
+        v2 = clamp01(v2 - step);
+        break;
+      case "Home":
+        s = 0;
+        break;
+      case "End":
+        s = 1;
+        break;
+      case "PageUp":
+        v2 = clamp01(v2 + 0.1);
+        break;
+      case "PageDown":
+        v2 = clamp01(v2 - 0.1);
+        break;
+      default:
+        handled = false;
+    }
+    if (!handled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const next = { ...draft, s, v: v2 };
+    commit(next);
+  };
+  const onHueKeyDown = (e) => {
+    const stepSmall = e.shiftKey ? 10 : 1;
+    let h2 = draft.h;
+    let handled = true;
+    switch (e.key) {
+      case "ArrowRight":
+        h2 = (h2 + stepSmall) % 360 + 360;
+        h2 %= 360;
+        break;
+      case "ArrowLeft":
+        h2 = (h2 - stepSmall) % 360 + 360;
+        h2 %= 360;
+        break;
+      case "Home":
+        h2 = 0;
+        break;
+      case "End":
+        h2 = 359;
+        break;
+      case "PageUp":
+        h2 = ((Math.round(h2) + 10) % 360 + 360) % 360;
+        break;
+      case "PageDown":
+        h2 = ((Math.round(h2) - 10) % 360 + 360) % 360;
+        break;
+      default:
+        handled = false;
+    }
+    if (!handled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const next = { ...draft, h: h2 };
+    commit(next);
+  };
+  const crossLeft = `${draft.s * 100}%`;
+  const crossTop = `${(1 - draft.v) * 100}%`;
+  const hueThumbTop = `${draft.h / 360 * 100}%`;
+  const hueThumbTopClamped = `clamp(8px, ${hueThumbTop}, calc(100% - 8px))`;
+  const hslUiH = clampInt(hslFromHex.h, 0, 360);
+  const hslUiS = clampInt(hslFromHex.s * 100, 0, 100);
+  const hslUiL = clampInt(hslFromHex.l * 100, 0, 100);
+  const hsbUiH = clampInt(draft.h, 0, 360);
+  const hsbUiS = clampInt(draft.s * 100, 0, 100);
+  const hsbUiB = clampInt(draft.v * 100, 0, 100);
+  return /* @__PURE__ */ jsxs("div", { className: "colorPicker", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "colorPickerSpace",
+        "data-node-id": "565:1006",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: svWrapRef,
+              className: "colorPickerSv",
+              onPointerDown: onSlPointerDown,
+              onPointerMove: onSlPointerMove,
+              onPointerUp: onSlPointerUp,
+              onPointerCancel: onSlPointerUp,
+              role: "group",
+              "aria-label": "Saturation and brightness",
+              tabIndex: 0,
+              onKeyDown: onSlKeyDown,
+              "data-node-id": "565:1007",
+              children: [
+                /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "colorPickerSvCanvas", "aria-hidden": true }),
+                /* @__PURE__ */ jsx("span", { className: "colorPickerIndicator", style: { left: crossLeft, top: crossTop }, "aria-hidden": true })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "colorPickerHueWrap", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: hueRef,
+              className: "colorPickerHue",
+              onPointerDown: onHuePointerDown,
+              onPointerMove: onHuePointerMove,
+              onPointerUp: onHuePointerUp,
+              onPointerCancel: onHuePointerUp,
+              role: "slider",
+              "aria-label": "Hue",
+              "aria-valuemin": 0,
+              "aria-valuemax": 360,
+              "aria-valuenow": Math.round(draft.h),
+              "aria-orientation": "vertical",
+              tabIndex: 0,
+              onKeyDown: onHueKeyDown,
+              style: {
+                background: `linear-gradient(to bottom, ${HUE_STOPS.join(", ")})`
+              },
+              "data-node-id": "565:1008",
+              children: /* @__PURE__ */ jsx("span", { className: "colorPickerIndicator", style: { left: "50%", top: hueThumbTopClamped }, "aria-hidden": true })
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "colorPickerFooter", "data-node-id": "565:1011", children: [
+      /* @__PURE__ */ jsx("div", { className: "colorPickerValueZone", "data-node-id": "565:1012", children: mode === "hex" ? /* @__PURE__ */ jsx(
+        ValueInput,
+        {
+          value: hex.slice(1),
+          prefix: "#",
+          onCommit: (val) => {
+            const d2 = normalizeHexDigits(val);
+            if (isValidSixHex$2(d2)) onChange(`#${d2.toUpperCase()}`);
+          },
+          sanitize: normalizeHexDigits,
+          validate: isValidSixHex$2,
+          maxLength: 6,
+          inputMode: "text",
+          ariaLabel: `Edit hex color, ${hex}`,
+          className: "colorPickerHex",
+          onPaste: (pasted) => {
+            const parsed = parseCssColorToHex(pasted);
+            if (parsed) {
+              onChange(parsed);
+              return "";
+            }
+            return normalizeHexDigits(pasted);
+          }
+        }
+      ) : mode === "hsl" ? /* @__PURE__ */ jsxs("div", { className: "colorPickerTriplet", "aria-label": "HSL values", children: [
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(hslUiH),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              const next = clampHsl01({ ...hslFromHex, h: clampHueDeg(n2) });
+              onChange(hslToHex(next.h, next.s, next.l));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Hue",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(hslUiS),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              const next = clampHsl01({ ...hslFromHex, s: clamp01(n2 / 100) });
+              onChange(hslToHex(next.h, next.s, next.l));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Saturation",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(hslUiL),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              const next = clampHsl01({ ...hslFromHex, l: clamp01(n2 / 100) });
+              onChange(hslToHex(next.h, next.s, next.l));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Lightness",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        )
+      ] }) : mode === "hsb" ? /* @__PURE__ */ jsxs("div", { className: "colorPickerTriplet", "aria-label": "HSB values", children: [
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(hsbUiH),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              const next = clampHsv01({ ...draft, h: clampHueDeg(n2) });
+              onChange(hsvToHex(next.h, next.s, next.v));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Hue",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(hsbUiS),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              const next = clampHsv01({ ...draft, s: clamp01(n2 / 100) });
+              onChange(hsvToHex(next.h, next.s, next.v));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Saturation",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(hsbUiB),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              const next = clampHsv01({ ...draft, v: clamp01(n2 / 100) });
+              onChange(hsvToHex(next.h, next.s, next.v));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Brightness",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "colorPickerTriplet", "aria-label": "RGB values", children: [
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(clampInt(rgbFromHex.r, 0, 255)),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              onChange(rgbToHex(clampInt(n2, 0, 255), rgbFromHex.g, rgbFromHex.b));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Red",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(clampInt(rgbFromHex.g, 0, 255)),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              onChange(rgbToHex(rgbFromHex.r, clampInt(n2, 0, 255), rgbFromHex.b));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Green",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: String(clampInt(rgbFromHex.b, 0, 255)),
+            onCommit: (val) => {
+              const n2 = Number.parseInt(val, 10);
+              if (!Number.isFinite(n2)) return;
+              onChange(rgbToHex(rgbFromHex.r, rgbFromHex.g, clampInt(n2, 0, 255)));
+            },
+            sanitize: (v2) => v2.replace(/[^\d]/g, "").slice(0, 3),
+            maxLength: 3,
+            inputMode: "numeric",
+            ariaLabel: "Blue",
+            className: "colorPickerTripletBtn",
+            onPaste: handleColorPaste
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "colorPickerActions", "data-node-id": "565:1014", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "colorPickerModeBtn",
+            onClick: onToggleMode,
+            "aria-label": "Switch color value mode",
+            title: "Switch value mode",
+            "data-node-id": "565:1015",
+            children: mode.toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "colorPickerIconBtn",
+            onClick: onEyeDropper,
+            "aria-label": "Pick color from screen",
+            title: "Eyedropper",
+            "data-node-id": "565:1020",
+            children: /* @__PURE__ */ jsx(EyeDropperIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "colorPickerLiveSr", "aria-live": "polite", "aria-atomic": "true", children: dragging === null ? `Color ${previewHex}` : "" })
+  ] });
+}
+function SwatchPopover({
+  title,
+  renderTrigger,
+  children,
+  modal = true,
+  side = "bottom",
+  align = "end",
+  sideOffset = 6,
+  zIndex
+}) {
+  return /* @__PURE__ */ jsxs(Popover.Root, { modal, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { render: renderTrigger }),
+    /* @__PURE__ */ jsx(Popover.Portal, { className: "swatchPopoverPortal", style: zIndex != null ? { zIndex } : void 0, children: /* @__PURE__ */ jsx(
+      Popover.Positioner,
+      {
+        className: "swatchPopoverPositioner",
+        positionMethod: "fixed",
+        side,
+        align,
+        sideOffset,
+        collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
+        children: /* @__PURE__ */ jsxs(
+          Popover.Popup,
+          {
+            className: "swatchPopoverPopup",
+            initialFocus: (openType) => openType === "keyboard",
+            children: [
+              title && /* @__PURE__ */ jsx(Popover.Title, { className: "swatchPopoverTitle", children: title }),
+              /* @__PURE__ */ jsx(Popover.Close, { type: "button", className: "swatchPopoverCloseSrOnly", children: "Close" }),
+              /* @__PURE__ */ jsx("div", { className: "swatchPopoverBody", children })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function hexDigits$1(hex) {
+  const n2 = normalizeHex(hex);
+  return n2.slice(1);
+}
+function isValidSixHex$1(d2) {
+  return /^[0-9a-fA-F]{6}$/.test(d2);
+}
+function sanitizeHex$1(input) {
+  return input.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+}
+function ColorRow({ label = "Color", value, onChange, disabled: disabledProp }) {
+  const categoryDisabled = useCategoryDisabled();
+  const disabled = Boolean(disabledProp || categoryDisabled);
+  const [hovered, setHovered] = useState(false);
+  const hex = normalizeHex(value);
+  const handleCommit = (sanitized) => {
+    if (isValidSixHex$1(sanitized)) {
+      onChange(`#${sanitized.toUpperCase()}`);
+    }
+  };
+  const handlePaste = (pasted) => {
+    return pasted.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
   };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "colorRowWrap",
-      onPointerEnter: () => setHovered(true),
+      "data-disabled": disabled ? "true" : "false",
+      onPointerEnter: () => !disabled && setHovered(true),
       onPointerLeave: () => setHovered(false),
-      children: /* @__PURE__ */ jsxs("div", { className: "colorCard", "data-active": isActive ? "true" : "false", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "colorCard", "data-active": !disabled && hovered ? "true" : "false", children: [
         /* @__PURE__ */ jsx("span", { className: "colorLabel", children: label }),
         /* @__PURE__ */ jsxs("div", { className: "colorValueZone", children: [
-          editing ? /* @__PURE__ */ jsxs("span", { className: "colorRowValue", "data-active": isActive ? "true" : "false", children: [
-            /* @__PURE__ */ jsx("span", { className: "colorHexHash", children: "#" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                className: "colorHexInput",
-                value: draft,
-                onChange: onHexChange,
-                onPaste: onHexPaste,
-                onBlur: commit,
-                onKeyDown: onHexKeyDown,
-                onClick: (e) => e.stopPropagation(),
-                maxLength: 6,
-                inputMode: "text",
-                autoComplete: "off",
-                spellCheck: false,
-                "aria-label": "Hex color without hash"
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs(
-            "span",
+          /* @__PURE__ */ jsx(
+            ValueInput,
             {
+              value: hexDigits$1(hex),
+              prefix: "#",
+              onCommit: handleCommit,
+              sanitize: sanitizeHex$1,
+              validate: isValidSixHex$1,
+              maxLength: 6,
+              inputMode: "text",
+              ariaLabel: `Edit hex color, ${hex}`,
+              disabled,
+              isActive: !disabled && hovered,
               className: "colorRowValue",
-              "data-active": isActive ? "true" : "false",
-              role: "button",
-              tabIndex: 0,
-              "aria-label": `Edit hex color, ${hex}`,
-              onClick: startEdit,
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setDraft(hexDigits$1(value));
-                  setEditing(true);
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "colorHexHash", children: "#" }),
-                /* @__PURE__ */ jsx("span", { className: "colorHexDigits", children: hexDigits$1(hex) })
-              ]
+              onPaste: handlePaste
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             SwatchPopover,
             {
-              title: label,
               renderTrigger: (props) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   ...props,
+                  disabled,
                   className: ["colorSwatchBtn", props.className].filter(Boolean).join(" "),
-                  style: { ...props.style, backgroundColor: hex },
+                  style: { ...props.style, ["--swatch-color"]: hex },
                   "aria-label": `Open ${label} picker`
                 }
               ),
-              children: [
-                /* @__PURE__ */ jsx("p", { children: "Custom color controls will live here. For now, use the system picker below." }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "color",
-                    className: "swatchPopoverNativeColor",
-                    value: hex,
-                    onChange: onPickerChange,
-                    "aria-label": "Native color picker"
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsx(ColorPicker, { value: hex, onChange })
             }
           )
         ] })
@@ -795,21 +2068,28 @@ function ColorRow({ label = "Color", value, onChange }) {
     }
   );
 }
-function ToggleRow({ label, checked, onChange }) {
-  const toggle = () => onChange(!checked);
+function ToggleRow({ label, checked, onChange, disabled: disabledProp }) {
+  const categoryDisabled = useCategoryDisabled();
+  const disabled = Boolean(disabledProp || categoryDisabled);
+  const toggle = () => {
+    if (disabled) return;
+    onChange(!checked);
+  };
   const onKeyDown = (e) => {
+    if (disabled) return;
     if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
       toggle();
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "toggleRowWrap", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "toggleRowWrap", "data-disabled": disabled ? "true" : "false", children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "switch",
-      tabIndex: 0,
+      tabIndex: disabled ? -1 : 0,
       "aria-checked": checked,
       "aria-label": label,
+      "aria-disabled": disabled,
       className: "toggleCard",
       "data-on": checked ? "true" : "false",
       onClick: toggle,
@@ -821,66 +2101,20 @@ function ToggleRow({ label, checked, onChange }) {
     }
   ) });
 }
-function normalizeHex(raw) {
-  const s = raw.trim();
-  const m = s.match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
-  if (!m) return "#808080";
-  let h = m[1];
-  if (h.length === 3) {
-    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
-  }
-  return `#${h.toUpperCase()}`;
-}
-function hslToHex(h, s, l) {
-  const hue = (h % 360 + 360) % 360;
-  const sat = Math.max(0, Math.min(1, s));
-  const lit = Math.max(0, Math.min(1, l));
-  const c = (1 - Math.abs(2 * lit - 1)) * sat;
-  const x = c * (1 - Math.abs(hue / 60 % 2 - 1));
-  const m = lit - c / 2;
-  let r = 0, g = 0, b = 0;
-  if (hue < 60) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (hue < 120) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (hue < 180) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (hue < 240) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (hue < 300) {
-    r = x;
-    g = 0;
-    b = c;
-  } else {
-    r = c;
-    g = 0;
-    b = x;
-  }
-  const toHex = (v) => Math.round((v + m) * 255).toString(16).padStart(2, "0");
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
-}
 function generateAestheticGradient(stopCount) {
   const baseHue = Math.random() * 360;
   const hueShift = 25 + Math.random() * 35;
   const hueDirection = Math.random() > 0.5 ? 1 : -1;
   const stops = [];
   for (let i = 0; i < stopCount; i++) {
-    const t = i / (stopCount - 1);
-    const hue = baseHue + hueDirection * hueShift * t;
+    const t2 = i / (stopCount - 1);
+    const hue = baseHue + hueDirection * hueShift * t2;
     const satBase = 0.35 + Math.random() * 0.15;
     const satPeak = 0.65 + Math.random() * 0.25;
-    const saturation = satBase + (satPeak - satBase) * Math.sin(t * Math.PI * 0.8);
+    const saturation = satBase + (satPeak - satBase) * Math.sin(t2 * Math.PI * 0.8);
     const lightStart = 0.75 + Math.random() * 0.1;
     const lightEnd = 0.08 + Math.random() * 0.07;
-    const eased = t * t * (3 - 2 * t);
+    const eased = t2 * t2 * (3 - 2 * t2);
     const lightness = lightStart + (lightEnd - lightStart) * eased;
     stops.push({ color: hslToHex(hue, saturation, lightness) });
   }
@@ -889,8 +2123,8 @@ function generateAestheticGradient(stopCount) {
 function hexDigits(hex) {
   return normalizeHex(hex).slice(1);
 }
-function isValidSixHex(d) {
-  return /^[0-9a-fA-F]{6}$/.test(d);
+function isValidSixHex(d2) {
+  return /^[0-9a-fA-F]{6}$/.test(d2);
 }
 function stopsToGradient(stops, angle = 90) {
   if (stops.length === 0) return "linear-gradient(90deg, #808080, #808080)";
@@ -926,99 +2160,56 @@ const DEFAULT_GRADIENT_STOPS = [
   { color: "#42C0B0" },
   { color: "#BAC9C7" }
 ];
+function sanitizeHex(input) {
+  return input.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+}
 function StopRow({ index, stop, canDelete, onColorChange, onDelete }) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState("");
-  const inputRef = useRef(null);
   const hex = normalizeHex(stop.color);
-  useLayoutEffect(() => {
-    var _a, _b;
-    if (!editing) return;
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-    (_b = inputRef.current) == null ? void 0 : _b.select();
-  }, [editing]);
-  const startEdit = (e) => {
-    e.stopPropagation();
-    setDraft(hexDigits(stop.color));
-    setEditing(true);
-  };
-  const commit = () => {
-    const d = draft.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-    if (isValidSixHex(d)) {
-      onColorChange(`#${d.toUpperCase()}`);
-    }
-    setEditing(false);
-  };
-  const onHexKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      commit();
+  const handleCommit = (val) => {
+    const d2 = sanitizeHex(val);
+    if (isValidSixHex(d2)) {
+      onColorChange(`#${d2.toUpperCase()}`);
     }
-    if (e.key === "Escape") {
-      setEditing(false);
-    }
-    e.stopPropagation();
   };
-  const onHexChange = (e) => {
-    const next = e.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-    setDraft(next);
-  };
-  const onHexPaste = (e) => {
-    e.preventDefault();
-    const pasted = e.clipboardData.getData("text");
-    const cleaned = pasted.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
-    setDraft(cleaned);
+  const handlePaste = (pasted) => {
+    return sanitizeHex(pasted);
   };
   return /* @__PURE__ */ jsxs("div", { className: "gradientPickerStop", children: [
     /* @__PURE__ */ jsxs("div", { className: "gradientPickerStopColorHex", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        SwatchPopover,
         {
-          type: "button",
-          className: "gradientPickerStopSwatch",
-          style: { backgroundColor: hex },
-          onClick: startEdit,
-          "aria-label": `Edit color for stop ${index + 1}`
+          modal: false,
+          side: "right",
+          align: "start",
+          sideOffset: 8,
+          zIndex: 200001,
+          renderTrigger: (props) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ...props,
+              className: ["gradientPickerStopSwatch", props.className].filter(Boolean).join(" "),
+              style: { ...props.style, backgroundColor: hex },
+              "aria-label": `Edit color for stop ${index + 1}`
+            }
+          ),
+          children: /* @__PURE__ */ jsx(ColorPicker, { value: hex, onChange: onColorChange })
         }
       ),
-      editing ? /* @__PURE__ */ jsxs("span", { className: "gradientPickerStopHexWrap", children: [
-        /* @__PURE__ */ jsx("span", { className: "gradientPickerStopHexHash", children: "#" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            className: "gradientPickerStopHexInput",
-            value: draft,
-            onChange: onHexChange,
-            onPaste: onHexPaste,
-            onBlur: commit,
-            onKeyDown: onHexKeyDown,
-            onClick: (e) => e.stopPropagation(),
-            maxLength: 6,
-            inputMode: "text",
-            autoComplete: "off",
-            spellCheck: false,
-            "aria-label": "Hex color without hash"
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs(
-        "span",
+      /* @__PURE__ */ jsx(
+        ValueInput,
         {
+          value: hexDigits(hex),
+          prefix: "#",
+          onCommit: handleCommit,
+          sanitize: sanitizeHex,
+          validate: isValidSixHex,
+          maxLength: 6,
+          inputMode: "text",
+          ariaLabel: "Hex color without hash",
           className: "gradientPickerStopHex",
-          role: "button",
-          tabIndex: 0,
-          onClick: startEdit,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              setDraft(hexDigits(stop.color));
-              setEditing(true);
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "gradientPickerStopHexHash", children: "#" }),
-            /* @__PURE__ */ jsx("span", { className: "gradientPickerStopHexDigits", children: hexDigits(hex) })
-          ]
+          onPaste: handlePaste
         }
       )
     ] }),
@@ -1026,16 +2217,16 @@ function StopRow({ index, stop, canDelete, onColorChange, onDelete }) {
       "button",
       {
         type: "button",
-        className: "gradientPickerStopDelete",
+        className: "gradientPickerIconBtn gradientPickerStopDelete",
         onClick: onDelete,
         disabled: !canDelete,
         "aria-label": `Remove stop ${index + 1}`,
-        children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { href: "/icons.svg#minus" }) })
+        children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 18 18", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z", fill: "currentColor" }) })
       }
     )
   ] });
 }
-function GradientPicker({ stops, onChange }) {
+function GradientPicker({ stops, onChange, angle = 90 }) {
   const handleInvert = () => {
     onChange([...stops].reverse());
   };
@@ -1054,13 +2245,21 @@ function GradientPicker({ stops, onChange }) {
   };
   const handleDeleteStop = (index) => {
     if (stops.length <= 2) return;
-    onChange(stops.filter((_, i) => i !== index));
+    onChange(stops.filter((_2, i) => i !== index));
   };
   const handleColorChange = (index, color) => {
     const newStops = stops.map((s, i) => i === index ? { ...s, color } : s);
     onChange(newStops);
   };
   return /* @__PURE__ */ jsxs("div", { className: "gradientPicker", children: [
+    /* @__PURE__ */ jsx("div", { className: "gradientPickerPreviewWrap", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "gradientPickerPreview",
+        "aria-hidden": true,
+        style: { background: stopsToGradient(stops, angle) }
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "gradientPickerHeader", children: [
       /* @__PURE__ */ jsxs("div", { className: "gradientPickerHeaderIconsLeft", children: [
         /* @__PURE__ */ jsx(
@@ -1071,7 +2270,24 @@ function GradientPicker({ stops, onChange }) {
             onClick: handleShuffle,
             "aria-label": "Randomize gradient",
             title: "Randomize gradient",
-            children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { href: "/icons.svg#shuffle-sparkle" }) })
+            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 18 18", "aria-hidden": "true", focusable: "false", children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M16.525 6.05302L13.245 4.75602L11.947 1.47502C11.72 0.903021 10.779 0.903021 10.552 1.47502L9.25399 4.75602L5.97399 6.05302C5.68799 6.16602 5.49899 6.44302 5.49899 6.75002C5.49899 7.05702 5.68699 7.33402 5.97399 7.44702L9.25399 8.74402L10.552 12.025C10.665 12.311 10.942 12.499 11.249 12.499C11.556 12.499 11.833 12.311 11.946 12.025L13.244 8.74402L16.524 7.44702C16.81 7.33402 16.999 7.05702 16.999 6.75002C16.999 6.44302 16.812 6.16602 16.525 6.05302Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M4.75 9.5C5.09415 9.5 5.39414 9.73422 5.47761 10.0681L5.96847 12.0315L7.9319 12.5224C8.26578 12.6059 8.5 12.9058 8.5 13.25C8.5 13.5942 8.26578 13.8941 7.9319 13.9776L5.96847 14.4685L5.47761 16.4319C5.39414 16.7658 5.09415 17 4.75 17C4.40585 17 4.10586 16.7658 4.02239 16.4319L3.53153 14.4685L1.5681 13.9776C1.23422 13.8941 1 13.5942 1 13.25C1 12.9058 1.23422 12.6059 1.5681 12.5224L3.53153 12.0315L4.02239 10.0681C4.10586 9.73422 4.40585 9.5 4.75 9.5Z",
+                  fill: "currentColor"
+                }
+              )
+            ] })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1082,7 +2298,22 @@ function GradientPicker({ stops, onChange }) {
             onClick: handleInvert,
             "aria-label": "Invert gradient",
             title: "Invert gradient",
-            children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { href: "/icons.svg#dark-mode" }) })
+            children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 18 18", "aria-hidden": "true", focusable: "false", children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4.061,7h6.189c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75H4.061l1.97-1.97c.293-.293,.293-.768,0-1.061s-.768-.293-1.061,0L1.72,5.72c-.293,.293-.293,.768,0,1.061l3.25,3.25c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.97-1.97Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M13.03,7.97c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.97,1.97H7.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h6.189l-1.97,1.97c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22s.384-.073,.53-.22l3.25-3.25c.293-.293,.293-.768,0-1.061l-3.25-3.25Z",
+                  fill: "currentColor"
+                }
+              )
+            ] })
           }
         )
       ] }),
@@ -1094,7 +2325,10 @@ function GradientPicker({ stops, onChange }) {
           onClick: handleAddStop,
           "aria-label": "Add color stop",
           title: "Add color stop",
-          children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { href: "/icons.svg#plus" }) })
+          children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("path", { d: "M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z", fill: "currentColor" }),
+            /* @__PURE__ */ jsx("path", { d: "M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z", fill: "currentColor" })
+          ] })
         }
       )
     ] }),
@@ -1111,9 +2345,17 @@ function GradientPicker({ stops, onChange }) {
     )) })
   ] });
 }
-function GradientRow({ label = "Gradient", initialStops, onChange, angle = 90 }) {
+function GradientRow({
+  label = "Gradient",
+  initialStops,
+  onChange,
+  angle = 90,
+  disabled: disabledProp
+}) {
+  const categoryDisabled = useCategoryDisabled();
+  const disabled = Boolean(disabledProp || categoryDisabled);
   const [hovered, setHovered] = useState(false);
-  const isActive = hovered;
+  const isActive = !disabled && hovered;
   const [stops, setStops] = useState(() => initialStops ?? DEFAULT_GRADIENT_STOPS);
   const handleStopsChange = (newStops) => {
     setStops(newStops);
@@ -1126,7 +2368,8 @@ function GradientRow({ label = "Gradient", initialStops, onChange, angle = 90 })
     "div",
     {
       className: "gradientRowWrap",
-      onPointerEnter: () => setHovered(true),
+      "data-disabled": disabled ? "true" : "false",
+      onPointerEnter: () => !disabled && setHovered(true),
       onPointerLeave: () => setHovered(false),
       children: /* @__PURE__ */ jsxs("div", { className: "gradientCard", "data-active": isActive ? "true" : "false", children: [
         /* @__PURE__ */ jsx("span", { className: "gradientLabel", children: label }),
@@ -1138,6 +2381,7 @@ function GradientRow({ label = "Gradient", initialStops, onChange, angle = 90 })
               {
                 type: "button",
                 ...props,
+                disabled,
                 className: ["gradientSwatchBtn", props.className].filter(Boolean).join(" "),
                 style: { ...props.style, background: currentGradient },
                 "aria-label": `Open ${label} editor`
@@ -1151,18 +2395,23 @@ function GradientRow({ label = "Gradient", initialStops, onChange, angle = 90 })
   );
 }
 export {
+  Category,
+  ColorPicker,
   ColorRow,
   DEFAULT_GRADIENT_STOPS,
   GradientPicker,
   GradientRow,
+  Panel,
   SliderOverlapDebugProvider,
   SliderRow,
   SwatchPopover,
   ThemeProvider,
   ToggleRow,
+  Panel as default,
   isTextInputTarget,
   parseGradient,
   stopsToGradient,
+  useCategoryDisabled,
   useSliderOverlapDebugEnabled,
   useTheme
 };