aporia 0.1.0

package/dist/index.js

@@ -0,0 +1,1169 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useContext, createContext, useCallback, useRef, useLayoutEffect } from "react";
+import { useMotionValue, useSpring, useTransform, motion } from "motion/react";
+import { Popover } from "@base-ui/react";
+function isTextInputTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  if (tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (tag !== "INPUT") return false;
+  const type = target.type;
+  return type === "text" || type === "search" || type === "url" || type === "tel" || type === "email" || type === "password" || type === "number" || type === "";
+}
+const SliderOverlapDebugContext = createContext(false);
+function SliderOverlapDebugProvider({ children }) {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (!e.shiftKey || e.repeat) return;
+      if (e.code !== "KeyD") return;
+      if (isTextInputTarget(e.target)) return;
+      e.preventDefault();
+      setEnabled((v) => !v);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+  return /* @__PURE__ */ jsx(SliderOverlapDebugContext.Provider, { value: enabled, 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);
+  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 });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return ctx;
+}
+function clearDocumentSelection() {
+  var _a;
+  const sel = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+  if (sel && sel.rangeCount > 0) sel.removeAllRanges();
+}
+function stepAllowsDecimal(step) {
+  if (!Number.isFinite(step) || step === 0) return true;
+  return step % 1 !== 0;
+}
+function sanitizeValueDraft(raw, min, step) {
+  const allowNeg = min < 0;
+  const allowDecimal = stepAllowsDecimal(step);
+  let out = "";
+  let dotUsed = false;
+  for (let i = 0; i < raw.length; i++) {
+    const c = raw[i];
+    if (allowNeg && c === "-" && out === "") {
+      out += "-";
+      continue;
+    }
+    if (allowDecimal && c === "." && !dotUsed) {
+      dotUsed = true;
+      out += ".";
+      continue;
+    }
+    if (c >= "0" && c <= "9") {
+      out += c;
+      continue;
+    }
+  }
+  return out;
+}
+function edgeStretchPx(u, maxStretch, edge, dragBoost) {
+  if (!Number.isFinite(u)) return { left: 0, right: 0 };
+  const uClamped = Math.min(1, Math.max(0, u));
+  let left = 0;
+  let right = 0;
+  if (uClamped < edge) left = (1 - uClamped / edge) * maxStretch;
+  else if (uClamped > 1 - edge) right = (uClamped - (1 - edge)) / edge * maxStretch;
+  return { left: left * dragBoost, right: right * dragBoost };
+}
+const MAX_EDGE_STRETCH_PX = 2;
+const EDGE_FRACTION = 0.14;
+const AT_END_DRAG_BOOST = 1.04;
+const PULL_GAIN = 0.05;
+const PULL_CAP_PX = 3;
+const STRETCH_SNAP_EPS_PX = 0.4;
+const stretchSpringOpts = {
+  stiffness: 340,
+  damping: 42,
+  mass: 0.4,
+  restDelta: 0.012,
+  restSpeed: 0.045
+};
+const pullSpringOpts = {
+  stiffness: 520,
+  damping: 46,
+  mass: 0.34,
+  restDelta: 0.012,
+  restSpeed: 0.045
+};
+const THUMB_WIDTH_PX = 2;
+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,
+  min,
+  max,
+  step,
+  onChange,
+  fmt
+}) {
+  const { theme } = useTheme();
+  const debugOverlap = useSliderOverlapDebugEnabled();
+  const [editing, setEditing] = 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);
+  const dragStateRef = useRef({ value, min, max });
+  dragStateRef.current = { value, min, max };
+  const targetStretchL = useMotionValue(0);
+  const targetStretchR = useMotionValue(0);
+  const stretchL = useSpring(targetStretchL, stretchSpringOpts);
+  const stretchR = useSpring(targetStretchR, stretchSpringOpts);
+  const pullL = useMotionValue(0);
+  const pullR = useMotionValue(0);
+  const pullLSpring = useSpring(pullL, pullSpringOpts);
+  const pullRSpring = useSpring(pullR, pullSpringOpts);
+  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);
+      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);
+    if (Math.abs(leftExtra) < STRETCH_SNAP_EPS_PX) leftExtra = 0;
+    return Math.round(-leftExtra);
+  });
+  const syncBaseWidthFromParent = () => {
+    const wrap = wrapRef.current;
+    const parent = wrap == null ? void 0 : wrap.parentElement;
+    if (!parent) return;
+    baseW.set(parent.offsetWidth);
+  };
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const parent = wrap == null ? void 0 : wrap.parentElement;
+    if (!parent) return;
+    syncBaseWidthFromParent();
+    const ro = new ResizeObserver(() => {
+      syncBaseWidthFromParent();
+    });
+    ro.observe(parent);
+    return () => ro.disconnect();
+  }, [baseW]);
+  useEffect(() => {
+    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]);
+  const display = fmt ? fmt(value) : value;
+  useLayoutEffect(() => {
+    const card = cardRef.current;
+    const labelEl = labelTextRef.current;
+    const valueEl = editing ? inputRef.current : valueTextRef.current;
+    if (!mounted || !card || !labelEl || !valueEl) {
+      setOverlapLayout(null);
+      return;
+    }
+    const measure = () => {
+      const c = cardRef.current;
+      const le = labelTextRef.current;
+      const ve = editing ? inputRef.current : valueTextRef.current;
+      if (!c || !le || !ve) {
+        setOverlapLayout(null);
+        return;
+      }
+      const cardRect = c.getBoundingClientRect();
+      const lr = le.getBoundingClientRect();
+      const vr = ve.getBoundingClientRect();
+      const w = 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);
+      if (valueStart < labelEnd) valueStart = labelEnd;
+      setOverlapLayout((prev) => {
+        if (prev && prev.labelEnd === labelEnd && prev.valueStart === valueStart) {
+          return prev;
+        }
+        return { labelEnd, valueStart };
+      });
+    };
+    measure();
+    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]);
+  const span = max - min;
+  const u = span > 0 ? (value - min) / span : 0;
+  useEffect(() => {
+    if (span <= 0 || !Number.isFinite(u) || !dragging) {
+      targetStretchL.set(0);
+      targetStretchR.set(0);
+      return;
+    }
+    const atEnd = value <= min + 1e-9 || value >= max - 1e-9;
+    const dragBoost = atEnd ? AT_END_DRAG_BOOST : 1;
+    const { left, right } = edgeStretchPx(u, MAX_EDGE_STRETCH_PX, EDGE_FRACTION, dragBoost);
+    targetStretchL.set(left);
+    targetStretchR.set(right);
+  }, [u, span, dragging, value, min, max, targetStretchL, targetStretchR]);
+  const resetPull = () => {
+    pullL.set(0);
+    pullR.set(0);
+  };
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e) => {
+      const { value: v, min: lo, max: hi } = dragStateRef.current;
+      const sp = hi - lo;
+      if (sp <= 0) return;
+      const uNow = (v - lo) / sp;
+      const dx = e.clientX - lastPointerXRef.current;
+      lastPointerXRef.current = e.clientX;
+      if (uNow >= 1 - 1e-6 && dx > 0) {
+        pullR.set(Math.min(PULL_CAP_PX, Math.max(0, pullR.get() + dx * PULL_GAIN)));
+      } else if (uNow <= 1e-6 && dx < 0) {
+        pullL.set(Math.min(PULL_CAP_PX, Math.max(0, pullL.get() - dx * PULL_GAIN)));
+      }
+    };
+    const onEnd = () => {
+      resetPull();
+      requestAnimationFrame(() => {
+        requestAnimationFrame(syncBaseWidthFromParent);
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onEnd);
+    window.addEventListener("pointercancel", onEnd);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onEnd);
+      window.removeEventListener("pointercancel", onEnd);
+    };
+  }, [dragging, pullL, pullR]);
+  const pct = u * 100;
+  const getThumbLayout = () => {
+    if (!mounted || !cardRef.current || !overlapLayout) {
+      return {
+        opacity: dragging ? 1 : 0.7,
+        height: THUMB_HEIGHT_PX,
+        debugZones: null
+      };
+    }
+    const cardRect = cardRef.current.getBoundingClientRect();
+    const fillEndPx = cardRect.width * pct / 100;
+    const thumbRightPx = fillEndPx - THUMB_INSET_FROM_FILL_END_PX;
+    const thumbCenterX = thumbRightPx - THUMB_WIDTH_PX / 2;
+    const { labelEnd, valueStart } = overlapLayout;
+    const behindLabel = thumbCenterX < labelEnd;
+    const behindValue = thumbCenterX > valueStart;
+    let opacity;
+    if (behindLabel || behindValue) {
+      opacity = 0.1;
+    } else {
+      opacity = dragging ? 1 : 0.7;
+    }
+    const height = behindLabel ? THUMB_HEIGHT_BEHIND_LABEL_PX : THUMB_HEIGHT_PX;
+    let debugZones2 = null;
+    if (debugOverlap && labelTextRef.current && (editing ? inputRef.current : valueTextRef.current)) {
+      const cr = cardRef.current.getBoundingClientRect();
+      const lr = labelTextRef.current.getBoundingClientRect();
+      const ve = editing ? inputRef.current : valueTextRef.current;
+      const vr = ve.getBoundingClientRect();
+      debugZones2 = {
+        overlapLabelEnd: labelEnd,
+        overlapValueStart: valueStart,
+        domLabelText: {
+          left: lr.left - cr.left,
+          top: lr.top - cr.top,
+          width: lr.width,
+          height: lr.height
+        },
+        domValueText: {
+          left: vr.left - cr.left,
+          top: vr.top - cr.top,
+          width: vr.width,
+          height: vr.height
+        }
+      };
+    }
+    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 handleRangePointerDown = (e) => {
+    clearDocumentSelection();
+    lastPointerXRef.current = e.clientX;
+    syncBaseWidthFromParent();
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    setDragging(true);
+  };
+  const handleRangePointerUp = (e) => {
+    var _a, _b;
+    try {
+      if ((_b = (_a = e.currentTarget).hasPointerCapture) == null ? void 0 : _b.call(_a, e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+    } catch {
+    }
+    targetStretchL.set(0);
+    targetStretchR.set(0);
+    resetPull();
+    setDragging(false);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(syncBaseWidthFromParent);
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "sliderCardWrap",
+      ref: wrapRef,
+      onPointerEnter: () => setHovered(true),
+      onPointerLeave: () => setHovered(false),
+      children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          ref: cardRef,
+          className: "sliderCard",
+          "data-active": isActive ? "true" : "false",
+          style: { width: cardWidth, marginLeft: cardMarginLeft },
+          draggable: false,
+          onDragStart: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "sliderTrack",
+                "data-active": isActive ? "true" : "false",
+                style: { width: `${pct}%` }
+              }
+            ),
+            debugZones ? /* @__PURE__ */ jsxs("div", { className: "sliderDebugOverlap", "aria-hidden": true, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sliderDebugOverlap__heuristic sliderDebugOverlap__heuristic--label",
+                  style: { width: debugZones.overlapLabelEnd },
+                  title: "Label overlap threshold (text right + pad)"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sliderDebugOverlap__heuristic sliderDebugOverlap__heuristic--value",
+                  style: { left: debugZones.overlapValueStart },
+                  title: "Value overlap threshold (text left − pad)"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sliderDebugOverlap__dom sliderDebugOverlap__dom--label",
+                  style: {
+                    left: debugZones.domLabelText.left,
+                    top: debugZones.domLabelText.top,
+                    width: debugZones.domLabelText.width,
+                    height: debugZones.domLabelText.height
+                  },
+                  title: "Measured label text box"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sliderDebugOverlap__dom sliderDebugOverlap__dom--value",
+                  style: {
+                    left: debugZones.domValueText.left,
+                    top: debugZones.domValueText.top,
+                    width: debugZones.domValueText.width,
+                    height: debugZones.domValueText.height
+                  },
+                  title: "Measured value text / input box"
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "sliderThumb",
+                "data-dragging": dragging ? "true" : "false",
+                style: {
+                  left: `calc(${pct}% - ${THUMB_INSET_FROM_FILL_END_PX}px)`
+                },
+                animate: {
+                  width: isActive ? THUMB_WIDTH_PX : idleThumbWidth,
+                  height: isActive ? thumbHeight : THUMB_HEIGHT_PX,
+                  opacity: isActive ? thumbOpacity : idleThumbOpacity
+                },
+                transition: { duration: 0.15, ease: "easeOut" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "sliderTicks",
+                animate: { opacity: isActive ? 1 : 0 },
+                transition: { duration: 0.15, ease: "easeOut" },
+                children: [...Array(10)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "sliderTick" }, i))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: "sliderInput",
+                type: "range",
+                min,
+                max,
+                step,
+                value,
+                draggable: false,
+                onChange: (e) => onChange(parseFloat(e.target.value)),
+                onPointerDown: handleRangePointerDown,
+                onPointerUp: handleRangePointerUp,
+                onPointerCancel: () => {
+                  targetStretchL.set(0);
+                  targetStretchR.set(0);
+                  resetPull();
+                  setDragging(false);
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(syncBaseWidthFromParent);
+                  });
+                },
+                onLostPointerCapture: () => {
+                  targetStretchL.set(0);
+                  targetStretchR.set(0);
+                  resetPull();
+                  setDragging(false);
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(syncBaseWidthFromParent);
+                  });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "sliderLabel", draggable: false, children: /* @__PURE__ */ jsx("span", { ref: labelTextRef, className: "sliderLabelText", children: label }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                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",
+                  {
+                    className: "sliderValue",
+                    draggable: false,
+                    "data-active": isActive ? "true" : "false",
+                    onClick: startEdit,
+                    children: /* @__PURE__ */ jsx("span", { ref: valueTextRef, className: "sliderValueText", children: display })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+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) {
+  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 hexDigits$1(hex) {
+  const n = normalizeHex$1(hex);
+  return n.slice(1);
+}
+function isValidSixHex$1(d) {
+  return /^[0-9a-fA-F]{6}$/.test(d);
+}
+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()}`);
+    }
+    setEditing(false);
+  };
+  const onHexKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+    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 onPickerChange = (e) => {
+    onChange(normalizeHex$1(e.target.value));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "colorRowWrap",
+      onPointerEnter: () => setHovered(true),
+      onPointerLeave: () => setHovered(false),
+      children: /* @__PURE__ */ jsxs("div", { className: "colorCard", "data-active": isActive ? "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",
+            {
+              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) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            SwatchPopover,
+            {
+              title: label,
+              renderTrigger: (props) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  ...props,
+                  className: ["colorSwatchBtn", props.className].filter(Boolean).join(" "),
+                  style: { ...props.style, backgroundColor: 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"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function ToggleRow({ label, checked, onChange }) {
+  const toggle = () => onChange(!checked);
+  const onKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "toggleRowWrap", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "switch",
+      tabIndex: 0,
+      "aria-checked": checked,
+      "aria-label": label,
+      className: "toggleCard",
+      "data-on": checked ? "true" : "false",
+      onClick: toggle,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "toggleLabel", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "toggleControl", "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: "toggleSwitch", children: /* @__PURE__ */ jsx("div", { className: "toggleSwitch__track", children: /* @__PURE__ */ jsx("div", { className: "toggleSwitch__thumb" }) }) }) })
+      ]
+    }
+  ) });
+}
+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 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 lightStart = 0.75 + Math.random() * 0.1;
+    const lightEnd = 0.08 + Math.random() * 0.07;
+    const eased = t * t * (3 - 2 * t);
+    const lightness = lightStart + (lightEnd - lightStart) * eased;
+    stops.push({ color: hslToHex(hue, saturation, lightness) });
+  }
+  return stops;
+}
+function hexDigits(hex) {
+  return normalizeHex(hex).slice(1);
+}
+function isValidSixHex(d) {
+  return /^[0-9a-fA-F]{6}$/.test(d);
+}
+function stopsToGradient(stops, angle = 90) {
+  if (stops.length === 0) return "linear-gradient(90deg, #808080, #808080)";
+  if (stops.length === 1) {
+    const c = normalizeHex(stops[0].color);
+    return `linear-gradient(${angle}deg, ${c}, ${c})`;
+  }
+  const colorStops = stops.map((s, i) => {
+    const pos = Math.round(i / (stops.length - 1) * 100);
+    return `${normalizeHex(s.color)} ${pos}%`;
+  });
+  return `linear-gradient(${angle}deg, ${colorStops.join(", ")})`;
+}
+function parseGradient(gradient) {
+  const match = gradient.match(/linear-gradient\s*\([^,]+,\s*(.+)\)/);
+  if (!match) return [{ color: "#FF0000" }, { color: "#0000FF" }];
+  const colorPart = match[1];
+  const parts = colorPart.split(/,\s*/);
+  const stops = [];
+  for (const part of parts) {
+    const hexMatch = part.match(/#[0-9a-fA-F]{3,6}/);
+    if (hexMatch) {
+      stops.push({ color: normalizeHex(hexMatch[0]) });
+    }
+  }
+  return stops.length >= 2 ? stops : [{ color: "#FF0000" }, { color: "#0000FF" }];
+}
+const DEFAULT_GRADIENT_STOPS = [
+  { color: "#0E171B" },
+  { color: "#00354F" },
+  { color: "#005F7A" },
+  { color: "#009A97" },
+  { color: "#42C0B0" },
+  { color: "#BAC9C7" }
+];
+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();
+    }
+    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);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "gradientPickerStop", children: [
+    /* @__PURE__ */ jsxs("div", { className: "gradientPickerStopColorHex", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "gradientPickerStopSwatch",
+          style: { backgroundColor: hex },
+          onClick: startEdit,
+          "aria-label": `Edit color for stop ${index + 1}`
+        }
+      ),
+      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",
+        {
+          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) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "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" }) })
+      }
+    )
+  ] });
+}
+function GradientPicker({ stops, onChange }) {
+  const handleInvert = () => {
+    onChange([...stops].reverse());
+  };
+  const handleAddStop = () => {
+    let newColor = "#808080";
+    if (stops.length >= 2) {
+      const midIdx = Math.floor(stops.length / 2);
+      newColor = stops[midIdx].color;
+    } else if (stops.length === 1) {
+      newColor = stops[0].color;
+    }
+    onChange([...stops, { color: newColor }]);
+  };
+  const handleShuffle = () => {
+    onChange(generateAestheticGradient(stops.length));
+  };
+  const handleDeleteStop = (index) => {
+    if (stops.length <= 2) return;
+    onChange(stops.filter((_, 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__ */ jsxs("div", { className: "gradientPickerHeader", children: [
+      /* @__PURE__ */ jsxs("div", { className: "gradientPickerHeaderIconsLeft", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "gradientPickerIconBtn",
+            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" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "gradientPickerIconBtn",
+            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" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "gradientPickerIconBtn",
+          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" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "gradientPickerStopsList", children: stops.map((stop, i) => /* @__PURE__ */ jsx(
+      StopRow,
+      {
+        index: i,
+        stop,
+        canDelete: stops.length > 2,
+        onColorChange: (color) => handleColorChange(i, color),
+        onDelete: () => handleDeleteStop(i)
+      },
+      i
+    )) })
+  ] });
+}
+function GradientRow({ label = "Gradient", initialStops, onChange, angle = 90 }) {
+  const [hovered, setHovered] = useState(false);
+  const isActive = hovered;
+  const [stops, setStops] = useState(() => initialStops ?? DEFAULT_GRADIENT_STOPS);
+  const handleStopsChange = (newStops) => {
+    setStops(newStops);
+    if (onChange) {
+      onChange(stopsToGradient(newStops, angle));
+    }
+  };
+  const currentGradient = stopsToGradient(stops, angle);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "gradientRowWrap",
+      onPointerEnter: () => setHovered(true),
+      onPointerLeave: () => setHovered(false),
+      children: /* @__PURE__ */ jsxs("div", { className: "gradientCard", "data-active": isActive ? "true" : "false", children: [
+        /* @__PURE__ */ jsx("span", { className: "gradientLabel", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "gradientSwatchZone", children: /* @__PURE__ */ jsx(
+          SwatchPopover,
+          {
+            renderTrigger: (props) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                ...props,
+                className: ["gradientSwatchBtn", props.className].filter(Boolean).join(" "),
+                style: { ...props.style, background: currentGradient },
+                "aria-label": `Open ${label} editor`
+              }
+            ),
+            children: /* @__PURE__ */ jsx(GradientPicker, { stops, onChange: handleStopsChange, angle })
+          }
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  ColorRow,
+  DEFAULT_GRADIENT_STOPS,
+  GradientPicker,
+  GradientRow,
+  SliderOverlapDebugProvider,
+  SliderRow,
+  SwatchPopover,
+  ThemeProvider,
+  ToggleRow,
+  isTextInputTarget,
+  parseGradient,
+  stopsToGradient,
+  useSliderOverlapDebugEnabled,
+  useTheme
+};
+//# sourceMappingURL=index.js.map