@mova-ui/react 0.4.10 → 0.4.11

package/dist/index.js

@@ -320,7 +320,7 @@ function ApprovalCard({
   const measured = useRef(false);
   const [viewportH, setViewportH] = useState4(void 0);
   const [trackY, setTrackY] = useState4(0);
-  const [animate, setAnimate] = useState4(false);
+  const [animate3, setAnimate] = useState4(false);
   const [ready, setReady] = useState4(false);
   const last = qi >= questions.length - 1;
   const selected = answers[qi] ?? [];
@@ -439,7 +439,7 @@ function ApprovalCard({
       "div",
       {
         className: "overflow-hidden",
-        style: { height: viewportH, transition: animate ? `height ${SLIDE}` : void 0 },
+        style: { height: viewportH, transition: animate3 ? `height ${SLIDE}` : void 0 },
         "aria-live": "polite",
         children: /* @__PURE__ */ jsx(
           "div",
@@ -450,7 +450,7 @@ function ApprovalCard({
               flexDirection: "column",
               gap: 26,
               transform: `translate3d(0, ${-trackY}px, 0)`,
-              transition: animate ? `transform ${SLIDE}` : void 0,
+              transition: animate3 ? `transform ${SLIDE}` : void 0,
               willChange: "transform"
             },
             children: questions.map((question, qIdx) => {
@@ -459,7 +459,7 @@ function ApprovalCard({
               const picked = answers[qIdx] ?? [];
               const questionStyle = {
                 opacity: active ? 1 : 0,
-                transition: animate ? `opacity ${SLIDE}` : void 0,
+                transition: animate3 ? `opacity ${SLIDE}` : void 0,
                 pointerEvents: active ? void 0 : "none"
               };
               return /* @__PURE__ */ jsxs(
@@ -1012,14 +1012,14 @@ function ScrubField({
   const drag = useRef3(null);
   const [draft, setDraft] = useState7(String(value));
   useEffect6(() => setDraft(String(value)), [value]);
-  const clamp2 = (v) => Math.min(max, Math.max(min, Number((Math.round(v / step) * step).toFixed(8))));
+  const clamp5 = (v) => Math.min(max, Math.max(min, Number((Math.round(v / step) * step).toFixed(8))));
   const commitDraft = () => {
     const parsed = draft.trim() === "" ? NaN : Number(draft);
     if (!Number.isFinite(parsed)) {
       setDraft(String(value));
       return;
     }
-    const next = clamp2(parsed);
+    const next = clamp5(parsed);
     setDraft(String(next));
     if (next !== value) onChange(next);
   };
@@ -1047,7 +1047,7 @@ function ScrubField({
             },
             onPointerMove: (e) => {
               if (!drag.current) return;
-              onChange(clamp2(drag.current.v + (e.clientX - drag.current.x) / 2 * step));
+              onChange(clamp5(drag.current.v + (e.clientX - drag.current.x) / 2 * step));
             },
             onPointerUp: () => drag.current = null,
             onPointerCancel: () => drag.current = null,
@@ -1056,10 +1056,10 @@ function ScrubField({
               const mult = e.shiftKey ? 10 : 1;
               if (e.key === "ArrowUp" || e.key === "ArrowRight") {
                 e.preventDefault();
-                onChange(clamp2(value + step * mult));
+                onChange(clamp5(value + step * mult));
               } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
                 e.preventDefault();
-                onChange(clamp2(value - step * mult));
+                onChange(clamp5(value - step * mult));
               }
             },
             className: "flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px]\n          px-0.5 text-[12px] text-[var(--mova-ai-ink-muted,#858585)] select-none hover:text-[var(--mova-ai-ink-secondary,#666)] focus-visible:text-[var(--mova-ai-accent-ink,#333)]\n          focus-visible:outline-none",
@@ -4264,14 +4264,14 @@ function BalanceBarChartCard({ periods = periodsDefault, defaultPeriod = "week",
     tip.dataset.show = "true";
     tip.setAttribute("aria-hidden", "false");
   }, [active, period, currency, locale]);
-  const movePill = React.useCallback((animate) => {
+  const movePill = React.useCallback((animate3) => {
     const tab = tabs.current?.querySelector('[role=tab][aria-selected="true"]');
     const el = pill.current;
     if (!tab || !el) return;
-    if (!animate) el.style.transition = "none";
+    if (!animate3) el.style.transition = "none";
     el.style.transform = `translateX(${tab.offsetLeft}px)`;
     el.style.width = `${tab.offsetWidth}px`;
-    if (!animate) {
+    if (!animate3) {
       void el.offsetWidth;
       el.style.transition = "";
     }
@@ -10469,19 +10469,470 @@ var ZigZagPulse = () => {
   )) });
 };
 
+// .generated/ui/patterns/animated-mega-menu.tsx
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect18,
+  useId as useId11,
+  useRef as useRef17,
+  useState as useState27
+} from "react";
+import { AnimatePresence as AnimatePresence7, motion as motion155, useIsPresent, useReducedMotion as useReducedMotion9 } from "framer-motion";
+import { ChevronDown as ChevronDown3, Menu, X } from "lucide-react";
+import { Fragment as Fragment14, jsx as jsx171, jsxs as jsxs81 } from "react/jsx-runtime";
+import { createElement } from "react";
+var spring = { type: "spring", stiffness: 350, damping: 32 };
+var menuStyles = `
+.mova-mega { position:relative; container-type:inline-size; width:100%; color:var(--mova-mega-text); font:inherit; }
+.mova-mega *, .mova-mega *::before { box-sizing:border-box; }
+.mova-mega-bar { height:56px; display:flex; align-items:center; gap:24px; padding:0 32px; }
+.mova-mega-brand, .mova-mega-actions { flex-shrink:0; display:flex; align-items:center; }
+.mova-mega-actions { margin-inline-start:auto; }
+.mova-mega-nav { display:flex; gap:2px; align-items:center; min-width:0; overflow:auto; scrollbar-width:none; }
+.mova-mega-trigger, .mova-mega-toggle, .mova-mega-link {
+  appearance:none; border:0; background:none; color:inherit; font:inherit; text-decoration:none;
+  position:relative; cursor:pointer; border-radius:8px; -webkit-tap-highlight-color:transparent;
+}
+.mova-mega :is(.mova-mega-trigger,.mova-mega-toggle,.mova-mega-link):focus-visible {
+  outline:2px solid currentColor; outline-offset:-2px;
+}
+.mova-mega-trigger {
+  display:flex; flex-shrink:0; align-items:center; gap:8px; height:36px; padding:0 14px;
+  font-size:14px; white-space:nowrap; color:var(--mova-mega-muted);
+}
+.mova-mega-trigger[data-active=true] { color:var(--mova-mega-text); }
+.mova-mega-trigger > span { z-index:1; display:inline-flex; }
+.mova-mega-pill, .mova-mega-row-pill {
+  position:absolute; inset:0; border-radius:inherit; background:var(--mova-mega-highlight); pointer-events:none;
+}
+.mova-mega-pill { z-index:0 !important; }
+.mova-mega-bridge { position:absolute; top:100%; left:0; right:0; height:8px; }
+.mova-mega-popup {
+  position:absolute; left:0; top:calc(100% + 8px); z-index:2; overflow:hidden; border:1px solid var(--mova-mega-border);
+  background:var(--mova-mega-surface); border-radius:16px; transform-origin:top center; box-shadow:0 14px 32px #0003;
+}
+.mova-mega-content { position:absolute; top:0; left:0; right:0; max-height:min(65vh,420px); overflow:auto; overscroll-behavior:contain; }
+.mova-mega-grid { padding:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px; }
+.mova-mega-link {
+  display:flex; align-items:center; gap:10px; border-radius:12px; min-height:52px;
+  padding:8px 16px; line-height:1.25; text-align:start; font-size:14px; min-width:0;
+}
+.mova-mega-link > span:not(.mova-mega-row-pill) { position:relative; min-width:0; overflow-wrap:anywhere; }
+.mova-mega-description { display:block; color:var(--mova-mega-muted); font-size:12px; margin-top:2px; }
+.mova-mega-footer { grid-column:1/-1; border-top:1px solid var(--mova-mega-border); padding-top:8px; margin-top:8px; }
+.mova-mega-toggle, .mova-mega-mobile { display:none; }
+.mova-mega-mobile { position:absolute; z-index:2; top:100%; inset-inline:0; padding:8px; max-height:min(65vh,430px);
+  overflow:auto; overscroll-behavior:contain; background:var(--mova-mega-surface);
+  border:1px solid var(--mova-mega-border); border-radius:16px; box-shadow:0 14px 32px #0003;
+}
+@container (max-width: 699px) {
+  .mova-mega-bar { padding:0 16px; height:64px; gap:12px; }
+  .mova-mega-nav, .mova-mega-popup, .mova-mega-bridge { display:none; }
+  .mova-mega-toggle { display:grid; place-items:center; min-width:44px; height:44px; }
+  .mova-mega-toggle:last-child { margin-inline-start:auto; }
+  .mova-mega-mobile { display:block; }
+  .mova-mega-mobile .mova-mega-trigger { width:100%; justify-content:space-between; min-height:44px; }
+  .mova-mega-mobile .mova-mega-trigger[data-active=true] { background:var(--mova-mega-highlight); }
+}
+@container (max-width: 310px) { .mova-mega-grid { grid-template-columns:minmax(0,1fr); } }
+@container (min-width: 700px) and (max-width: 839px) {
+  .mova-mega-bar { padding:0 16px; gap:12px; }
+  .mova-mega-trigger { padding:0 10px; }
+}
+`;
+function PresencePanel({ as, onPresent, ...props }) {
+  const present = useIsPresent();
+  const Element2 = as === "nav" ? motion155.nav : motion155.div;
+  const setRef = useCallback4((element) => {
+    if (!element) return;
+    element.inert = !present;
+    if (present) onPresent?.(element);
+  }, [onPresent, present]);
+  return /* @__PURE__ */ jsx171(
+    Element2,
+    {
+      ...props,
+      "data-present": present,
+      "aria-hidden": !present || void 0,
+      style: { ...props.style, pointerEvents: present ? props.style?.pointerEvents : "none" },
+      ref: setRef
+    }
+  );
+}
+function panelPosition(header, trigger, item) {
+  const bounds = header.getBoundingClientRect();
+  const triggerBounds = trigger.getBoundingClientRect();
+  const hasDescriptions = item.links?.some((link) => link.description);
+  const width = Math.min(hasDescriptions ? 466 : 434, bounds.width - 32);
+  const center = triggerBounds.left - bounds.left + triggerBounds.width / 2;
+  const x = Math.max(16, Math.min(center - width / 2, bounds.width - width - 16));
+  return { x, width };
+}
+function MegaMenuLinks({ item, layoutId, close }) {
+  const [highlighted, setHighlighted] = useState27(null);
+  const reduced = useReducedMotion9();
+  const links = item.links ?? [];
+  const row = (link, index) => /* @__PURE__ */ jsxs81(
+    "a",
+    {
+      className: "mova-mega-link",
+      href: link.href,
+      onPointerEnter: (event) => {
+        if (event.pointerType === "mouse") setHighlighted(index);
+      },
+      onFocus: () => setHighlighted(index),
+      onClick: close,
+      children: [
+        highlighted === index && /* @__PURE__ */ jsx171(
+          motion155.span,
+          {
+            "aria-hidden": "true",
+            className: "mova-mega-row-pill",
+            layoutId: reduced ? void 0 : layoutId,
+            transition: spring
+          }
+        ),
+        link.icon != null && /* @__PURE__ */ jsx171("span", { "aria-hidden": "true", children: link.icon }),
+        /* @__PURE__ */ jsxs81("span", { children: [
+          link.label,
+          link.description && /* @__PURE__ */ jsx171("span", { className: "mova-mega-description", children: link.description })
+        ] })
+      ]
+    },
+    index
+  );
+  return /* @__PURE__ */ jsxs81(
+    "div",
+    {
+      className: "mova-mega-grid",
+      onPointerLeave: () => setHighlighted(null),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setHighlighted(null);
+      },
+      children: [
+        links.map(row),
+        item.footer && /* @__PURE__ */ jsx171("div", { className: "mova-mega-footer", children: row(item.footer, links.length) })
+      ]
+    }
+  );
+}
+function AnimatedMegaMenu({
+  items: items2,
+  brand,
+  actions,
+  label = "Main navigation",
+  theme = "dark",
+  className,
+  style
+}) {
+  const id = useId11();
+  const reduced = useReducedMotion9();
+  const root = useRef17(null);
+  const mobileToggle = useRef17(null);
+  const triggers = useRef17([]);
+  const closeTimer = useRef17(void 0);
+  const focusOnOpen = useRef17(false);
+  const [highlighted, setHighlighted] = useState27(null);
+  const [active, setActive] = useState27(null);
+  const [direction, setDirection] = useState27(1);
+  const [mobileOpen, setMobileOpen] = useState27(false);
+  const [mobileGroup, setMobileGroup] = useState27(null);
+  const [currentPanel, setCurrentPanel] = useState27(null);
+  const [geometry, setGeometry] = useState27({ x: 16, width: 434, height: 120 });
+  const openItem = active === null ? void 0 : items2[active];
+  const dark = theme === "dark";
+  const transition2 = reduced ? { duration: 0 } : spring;
+  function currentContent() {
+    return root.current?.querySelector('.mova-mega-content[data-present="true"]');
+  }
+  function close() {
+    window.clearTimeout(closeTimer.current);
+    focusOnOpen.current = false;
+    setCurrentPanel(null);
+    setActive(null);
+    setHighlighted(null);
+    setMobileOpen(false);
+    setMobileGroup(null);
+  }
+  function show(index, focusLinks = false) {
+    window.clearTimeout(closeTimer.current);
+    const item = items2[index];
+    if (!item) return;
+    if (active !== null && index !== active) setDirection(index > active ? 1 : -1);
+    setHighlighted(index);
+    if (item.links?.length || item.footer) {
+      const trigger = triggers.current[index];
+      if (active !== index && root.current && trigger) {
+        const position = panelPosition(root.current, trigger, item);
+        setGeometry((previous) => ({ ...previous, ...position }));
+      }
+      setActive(index);
+      if (focusLinks) {
+        const first = active === index ? currentContent()?.querySelector("a") : null;
+        if (first) first.focus();
+        else focusOnOpen.current = true;
+      }
+    } else {
+      setActive(null);
+    }
+  }
+  useEffect18(() => {
+    if (active === null || !root.current || !currentPanel || currentPanel !== currentContent()) return;
+    const header = root.current;
+    const panel = currentPanel;
+    const trigger = triggers.current[active];
+    const item = items2[active];
+    if (!trigger || !item) return;
+    const measure = () => {
+      if (header.clientWidth < 700) return;
+      const { x, width } = panelPosition(header, trigger, item);
+      const height = panel.offsetHeight + 2;
+      setGeometry((old) => old.x === x && old.width === width && old.height === height ? old : { x, width, height });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(header);
+    observer.observe(panel);
+    observer.observe(trigger);
+    if (focusOnOpen.current) {
+      focusOnOpen.current = false;
+      panel.querySelector("a")?.focus();
+    }
+    return () => observer.disconnect();
+  }, [active, currentPanel, items2]);
+  useEffect18(() => {
+    const header = root.current;
+    if (!header) return;
+    let compact = header.getBoundingClientRect().width < 700;
+    const observer = new ResizeObserver(() => {
+      const next = header.getBoundingClientRect().width < 700;
+      if (compact === next) return;
+      compact = next;
+      close();
+    });
+    observer.observe(header);
+    return () => observer.disconnect();
+  }, []);
+  useEffect18(() => {
+    if (!mobileOpen && active === null) return;
+    const dismiss = (event) => {
+      if (!root.current?.contains(event.target)) close();
+    };
+    document.addEventListener("pointerdown", dismiss);
+    return () => document.removeEventListener("pointerdown", dismiss);
+  }, [active, mobileOpen]);
+  useEffect18(() => () => window.clearTimeout(closeTimer.current), []);
+  function handleTriggerKey(event, index) {
+    if (event.key === "ArrowDown" && (items2[index].links?.length || items2[index].footer)) {
+      event.preventDefault();
+      show(index, true);
+    } else if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      const next = (index + (event.key === "ArrowRight" ? 1 : -1) + items2.length) % items2.length;
+      event.preventDefault();
+      triggers.current[next]?.focus();
+    }
+  }
+  const variables = {
+    "--mova-mega-text": dark ? "#ededed" : "#171717",
+    "--mova-mega-muted": dark ? "#a1a1a1" : "#595959",
+    "--mova-mega-highlight": dark ? "#ffffff0f" : "#0000000c",
+    "--mova-mega-border": dark ? "#ffffff1a" : "#0000001a",
+    "--mova-mega-surface": dark ? "#080808" : "#fff",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs81(
+    "header",
+    {
+      ref: root,
+      className: `mova-mega ${className ?? ""}`,
+      style: variables,
+      onPointerEnter: () => window.clearTimeout(closeTimer.current),
+      onPointerLeave: (event) => {
+        if (event.pointerType !== "mouse" || root.current?.contains(document.activeElement) && document.activeElement?.matches(":focus-visible")) return;
+        closeTimer.current = window.setTimeout(close, 120);
+      },
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) close();
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !openItem && !mobileOpen) return;
+        event.preventDefault();
+        if (mobileOpen) mobileToggle.current?.focus();
+        else if (active !== null) triggers.current[active]?.focus();
+        close();
+      },
+      children: [
+        /* @__PURE__ */ jsx171("style", { children: menuStyles }),
+        /* @__PURE__ */ jsxs81("div", { className: "mova-mega-bar", children: [
+          brand && /* @__PURE__ */ jsx171("div", { className: "mova-mega-brand", children: brand }),
+          /* @__PURE__ */ jsx171("nav", { className: "mova-mega-nav", "aria-label": label, children: items2.map((item, index) => {
+            const hasMenu = Boolean(item.links?.length || item.footer);
+            const common = {
+              className: "mova-mega-trigger",
+              "data-active": highlighted === index,
+              onPointerEnter: (event) => {
+                if (event.pointerType === "mouse") show(index);
+              },
+              onFocus: () => {
+                setHighlighted(index);
+                if (active !== index) setActive(null);
+              },
+              onKeyDown: (event) => handleTriggerKey(event, index)
+            };
+            const children = /* @__PURE__ */ jsxs81(Fragment14, { children: [
+              highlighted === index && /* @__PURE__ */ jsx171(motion155.span, { "aria-hidden": "true", className: "mova-mega-pill", layoutId: reduced ? void 0 : `${id}-nav-pill`, transition: transition2 }),
+              /* @__PURE__ */ jsx171("span", { children: item.label }),
+              hasMenu && /* @__PURE__ */ jsx171(motion155.span, { "aria-hidden": "true", animate: { rotate: active === index ? 180 : 0 }, transition: transition2, children: /* @__PURE__ */ jsx171(ChevronDown3, { size: 14 }) })
+            ] });
+            return hasMenu ? /* @__PURE__ */ createElement(
+              "button",
+              {
+                ...common,
+                key: index,
+                type: "button",
+                ref: (element) => {
+                  triggers.current[index] = element;
+                },
+                "aria-expanded": active === index,
+                "aria-controls": active === index ? `${id}-panel` : void 0,
+                onClick: () => show(index, true)
+              },
+              children
+            ) : /* @__PURE__ */ createElement(
+              "a",
+              {
+                ...common,
+                key: index,
+                href: item.href,
+                ref: (element) => {
+                  triggers.current[index] = element;
+                },
+                onClick: close
+              },
+              children
+            );
+          }) }),
+          actions && /* @__PURE__ */ jsx171("div", { className: "mova-mega-actions", children: actions }),
+          /* @__PURE__ */ jsx171(
+            "button",
+            {
+              className: "mova-mega-toggle",
+              ref: mobileToggle,
+              type: "button",
+              "aria-label": mobileOpen ? "Close navigation" : "Open navigation",
+              "aria-expanded": mobileOpen,
+              "aria-controls": mobileOpen ? `${id}-mobile` : void 0,
+              onClick: () => {
+                if (mobileOpen) close();
+                else setMobileOpen(true);
+              },
+              onKeyDown: (event) => {
+                if (event.key === "ArrowDown" && mobileOpen) {
+                  event.preventDefault();
+                  root.current?.querySelector('.mova-mega-mobile[data-present="true"] :is(button,a[href])')?.focus();
+                }
+              },
+              children: mobileOpen ? /* @__PURE__ */ jsx171(X, { size: 20 }) : /* @__PURE__ */ jsx171(Menu, { size: 20 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx171(AnimatePresence7, { initial: false, children: openItem && /* @__PURE__ */ jsx171(
+          PresencePanel,
+          {
+            id: `${id}-panel`,
+            className: "mova-mega-popup",
+            initial: { opacity: 0, scale: reduced ? 1 : 0.96, ...geometry },
+            animate: { opacity: 1, scale: 1, ...geometry },
+            exit: { opacity: 0, scale: reduced ? 1 : 0.96 },
+            transition: transition2,
+            children: /* @__PURE__ */ jsx171(AnimatePresence7, { initial: false, custom: direction, propagate: true, children: /* @__PURE__ */ jsx171(
+              PresencePanel,
+              {
+                className: "mova-mega-content",
+                onPresent: setCurrentPanel,
+                custom: direction,
+                variants: {
+                  entering: (side) => ({ x: reduced ? 0 : side * 24, opacity: 0 }),
+                  visible: { x: 0, opacity: 1 },
+                  exiting: (side) => ({ x: reduced ? 0 : side * -24, opacity: 0, pointerEvents: "none" })
+                },
+                initial: "entering",
+                animate: "visible",
+                exit: "exiting",
+                transition: transition2,
+                onKeyDown: (event) => {
+                  const links = Array.from(event.currentTarget.querySelectorAll("a[href]"));
+                  const current = links.findIndex((link) => link === document.activeElement);
+                  if (current === -1 || active === null) return;
+                  if (event.key === "Tab") {
+                    const next2 = event.shiftKey && current === 0 ? triggers.current[active] : !event.shiftKey && current === links.length - 1 ? triggers.current[active + 1] ?? root.current?.querySelector(".mova-mega-actions :is(button,a[href])") : null;
+                    if (next2) {
+                      event.preventDefault();
+                      next2.focus();
+                    }
+                    return;
+                  }
+                  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+                  event.preventDefault();
+                  const next = event.key === "Home" ? 0 : event.key === "End" ? links.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + links.length) % links.length;
+                  links[next].focus();
+                },
+                children: /* @__PURE__ */ jsx171(MegaMenuLinks, { item: openItem, layoutId: `${id}-rows-${active}`, close })
+              },
+              active
+            ) })
+          },
+          "panel"
+        ) }),
+        openItem && /* @__PURE__ */ jsx171("span", { className: "mova-mega-bridge", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx171(AnimatePresence7, { initial: false, children: mobileOpen && /* @__PURE__ */ jsx171(
+          PresencePanel,
+          {
+            as: "nav",
+            id: `${id}-mobile`,
+            "aria-label": label,
+            className: "mova-mega-mobile",
+            initial: { opacity: 0, y: reduced ? 0 : -6 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: reduced ? 0 : -6 },
+            transition: transition2,
+            children: items2.map((item, index) => item.links?.length || item.footer ? /* @__PURE__ */ jsxs81("div", { children: [
+              /* @__PURE__ */ jsxs81(
+                "button",
+                {
+                  className: "mova-mega-trigger",
+                  type: "button",
+                  "aria-expanded": mobileGroup === index,
+                  "data-active": mobileGroup === index,
+                  onClick: () => setMobileGroup(mobileGroup === index ? null : index),
+                  children: [
+                    item.label,
+                    /* @__PURE__ */ jsx171(motion155.span, { "aria-hidden": "true", animate: { rotate: mobileGroup === index ? 180 : 0 }, transition: transition2, children: /* @__PURE__ */ jsx171(ChevronDown3, { size: 14 }) })
+                  ]
+                }
+              ),
+              mobileGroup === index && /* @__PURE__ */ jsx171(MegaMenuLinks, { item, layoutId: `${id}-mobile-rows`, close })
+            ] }, index) : /* @__PURE__ */ jsx171("a", { className: "mova-mega-trigger", href: item.href, onClick: close, children: item.label }, index))
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // .generated/ui/patterns/animated-tags.tsx
 import { CircleX, Plus as Plus2 } from "lucide-react";
-import { AnimatePresence as AnimatePresence7, motion as motion155, useReducedMotion as useReducedMotion9 } from "framer-motion";
-import { useState as useState27 } from "react";
-import { jsx as jsx171, jsxs as jsxs81 } from "react/jsx-runtime";
+import { AnimatePresence as AnimatePresence8, motion as motion156, useReducedMotion as useReducedMotion10 } from "framer-motion";
+import { useState as useState28 } from "react";
+import { jsx as jsx172, jsxs as jsxs82 } from "react/jsx-runtime";
 function AnimatedTags({
   initialTags = ["react", "tailwindcss", "javascript"],
   selectedTags: controlledSelectedTags,
   onChange,
   className = ""
 }) {
-  const [internalSelected, setInternalSelected] = useState27([]);
-  const shouldReduceMotion = useReducedMotion9();
+  const [internalSelected, setInternalSelected] = useState28([]);
+  const shouldReduceMotion = useReducedMotion10();
   const selectedTag = controlledSelectedTags ?? internalSelected;
   const tags = initialTags.filter((tag) => !selectedTag.includes(tag));
   const handleTagClick = (tag) => {
@@ -10500,11 +10951,11 @@ function AnimatedTags({
       setInternalSelected(newSelectedTag);
     }
   };
-  return /* @__PURE__ */ jsxs81("div", { className: `flex w-[300px] flex-col gap-4 p-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs81("div", { className: "flex flex-col items-start justify-center gap-1", children: [
-      /* @__PURE__ */ jsx171("p", { children: "Selected Tags" }),
-      /* @__PURE__ */ jsx171(AnimatePresence7, { children: /* @__PURE__ */ jsx171("div", { className: "flex min-h-12 w-full flex-wrap items-center gap-1 rounded-xl border bg-background p-2", children: selectedTag?.map((tag) => /* @__PURE__ */ jsxs81(
-        motion155.div,
+  return /* @__PURE__ */ jsxs82("div", { className: `flex w-[300px] flex-col gap-4 p-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs82("div", { className: "flex flex-col items-start justify-center gap-1", children: [
+      /* @__PURE__ */ jsx172("p", { children: "Selected Tags" }),
+      /* @__PURE__ */ jsx172(AnimatePresence8, { children: /* @__PURE__ */ jsx172("div", { className: "flex min-h-12 w-full flex-wrap items-center gap-1 rounded-xl border bg-background p-2", children: selectedTag?.map((tag) => /* @__PURE__ */ jsxs82(
+        motion156.div,
         {
           animate: shouldReduceMotion ? { opacity: 1 } : {
             filter: "blur(0px)",
@@ -10520,7 +10971,7 @@ function AnimatedTags({
           children: [
             tag,
             " ",
-            /* @__PURE__ */ jsx171(
+            /* @__PURE__ */ jsx172(
               CircleX,
               {
                 className: "ease flex items-center justify-center rounded-full transition-all duration-200",
@@ -10532,8 +10983,8 @@ function AnimatedTags({
         tag
       )) }) })
     ] }),
-    /* @__PURE__ */ jsx171(AnimatePresence7, { children: /* @__PURE__ */ jsx171("div", { className: "flex flex-wrap items-center gap-1", children: tags.map((tag) => /* @__PURE__ */ jsxs81(
-      motion155.div,
+    /* @__PURE__ */ jsx172(AnimatePresence8, { children: /* @__PURE__ */ jsx172("div", { className: "flex flex-wrap items-center gap-1", children: tags.map((tag) => /* @__PURE__ */ jsxs82(
+      motion156.div,
       {
         animate: shouldReduceMotion ? { opacity: 1 } : {
           filter: "blur(0px)",
@@ -10549,7 +11000,7 @@ function AnimatedTags({
         children: [
           tag,
           " ",
-          /* @__PURE__ */ jsx171(
+          /* @__PURE__ */ jsx172(
             Plus2,
             {
               className: "ease flex items-center justify-center rounded-full transition-all duration-200 group-hover/tag:bg-primary group-hover/tag:text-foreground",
@@ -10563,10 +11014,448 @@ function AnimatedTags({
   ] });
 }
 
+// .generated/ui/patterns/blur-carousel.tsx
+import { useEffect as useEffect19, useRef as useRef18, useState as useState29 } from "react";
+import { motion as motion157, useMotionValue as useMotionValue2, useReducedMotion as useReducedMotion11, useTransform as useTransform2 } from "framer-motion";
+import { jsx as jsx173, jsxs as jsxs83 } from "react/jsx-runtime";
+function CarouselSlide({ children, index, total, position, reducedMotion }) {
+  const distance = useTransform2(position, (value) => Math.min(1, Math.abs(value - index)));
+  const scale = useTransform2(distance, (value) => 1 - value * 0.15);
+  const opacity = useTransform2(distance, (value) => 1 - value * 0.5);
+  const filter = useTransform2(distance, (value) => `blur(${value * 7}px)`);
+  return /* @__PURE__ */ jsx173(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "aria-label": `${index + 1} of ${total}`,
+      "data-mova-blur-slide": index,
+      style: {
+        flex: "0 0 var(--mova-blur-width)",
+        minWidth: 0,
+        boxSizing: "border-box",
+        paddingInline: "var(--mova-blur-gap)",
+        scrollSnapAlign: "start",
+        display: "grid",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsx173(
+        motion157.div,
+        {
+          style: {
+            overflow: "hidden",
+            minWidth: 0,
+            borderRadius: 20,
+            boxShadow: "0 8px 12px rgb(0 0 0 / 20%)",
+            opacity,
+            scale: reducedMotion ? 1 : scale
+          },
+          children: /* @__PURE__ */ jsx173(motion157.div, { style: { filter: reducedMotion ? "none" : filter }, children })
+        }
+      )
+    }
+  );
+}
+var carouselCss = `
+  [data-mova-blur-viewport] { scroll-snap-type: x mandatory; }
+  [data-mova-blur-viewport][data-dragging] { scroll-snap-type: none; }
+  [data-mova-blur-viewport]::-webkit-scrollbar { display: none; }
+  [data-mova-blur-viewport]:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+  }
+  @media (pointer: fine) {
+    [data-mova-blur-viewport][tabindex] { cursor: grab; }
+    [data-mova-blur-viewport][data-dragging] { cursor: grabbing; }
+  }
+`;
+function BlurCarousel({
+  data,
+  renderItem,
+  keyExtractor,
+  spacing = 20,
+  itemWidth,
+  horizontalSpacing,
+  className,
+  style,
+  label = "Carousel"
+}) {
+  const viewportRef = useRef18(null);
+  const dragRef = useRef18(null);
+  const suppressClick = useRef18(false);
+  const targetIndex = useRef18(null);
+  const settleTimer = useRef18(null);
+  const position = useMotionValue2(0);
+  const reducedMotion = useReducedMotion11() ?? false;
+  const [activeIndex, setActiveIndex] = useState29(0);
+  useEffect19(() => {
+    const viewport = viewportRef.current;
+    const firstSlide = viewport?.querySelector("[data-mova-blur-slide]");
+    if (!viewport || !firstSlide) return;
+    const sync = () => {
+      const width2 = firstSlide.getBoundingClientRect().width;
+      const current = width2 ? Math.abs(viewport.scrollLeft) / width2 : 0;
+      position.set(current);
+      setActiveIndex(Math.min(data.length - 1, Math.round(current)));
+    };
+    const observer = new ResizeObserver(sync);
+    observer.observe(viewport);
+    observer.observe(firstSlide);
+    sync();
+    return () => {
+      observer.disconnect();
+      if (settleTimer.current !== null) clearTimeout(settleTimer.current);
+    };
+  }, [data.length, itemWidth, horizontalSpacing, position]);
+  const slideWidth = (viewport) => viewport.querySelector("[data-mova-blur-slide]")?.getBoundingClientRect().width ?? 0;
+  const direction = (viewport) => getComputedStyle(viewport).direction === "rtl" ? -1 : 1;
+  const clampIndex = (index) => Math.max(0, Math.min(data.length - 1, index));
+  const scrollToSlide = (viewport, index, instant = false) => {
+    const next = clampIndex(index);
+    const left = direction(viewport) * next * slideWidth(viewport);
+    if (Math.abs(viewport.scrollLeft - left) < 1) return;
+    targetIndex.current = next;
+    viewport.scrollTo({ left, behavior: instant || reducedMotion ? "instant" : "smooth" });
+  };
+  const handleScroll = (viewport) => {
+    const width2 = slideWidth(viewport);
+    if (!width2) return;
+    const current = Math.abs(viewport.scrollLeft) / width2;
+    position.set(current);
+    if (settleTimer.current !== null) clearTimeout(settleTimer.current);
+    settleTimer.current = setTimeout(() => {
+      targetIndex.current = null;
+      setActiveIndex(clampIndex(Math.round(position.get())));
+    }, 150);
+  };
+  const handleKeyDown = (event) => {
+    if (event.target !== event.currentTarget || data.length < 2 || event.altKey || event.ctrlKey || event.metaKey) return;
+    const viewport = event.currentTarget;
+    const current = targetIndex.current ?? Math.round(position.get());
+    let next;
+    switch (event.key) {
+      case "ArrowLeft":
+        next = current - direction(viewport);
+        break;
+      case "ArrowRight":
+        next = current + direction(viewport);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = data.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    scrollToSlide(viewport, next);
+  };
+  const handlePointerDown = (event) => {
+    suppressClick.current = false;
+    targetIndex.current = null;
+    if (data.length < 2 || event.pointerType !== "mouse" || event.button !== 0 || !event.isPrimary) return;
+    if (event.target instanceof Element && event.target.closest("input, textarea, select, [contenteditable='true']")) return;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startLeft: event.currentTarget.scrollLeft,
+      moved: false
+    };
+  };
+  const handlePointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const delta = event.clientX - drag.startX;
+    const viewport = event.currentTarget;
+    if (!drag.moved) {
+      if (Math.abs(delta) < 5) return;
+      drag.moved = true;
+      viewport.dataset.dragging = "";
+      viewport.setPointerCapture(event.pointerId);
+    }
+    event.preventDefault();
+    viewport.scrollLeft = drag.startLeft - delta;
+  };
+  const finishDrag = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    if (!drag.moved) return;
+    const viewport = event.currentTarget;
+    const width2 = slideWidth(viewport);
+    suppressClick.current = true;
+    delete viewport.dataset.dragging;
+    if (width2) scrollToSlide(viewport, Math.round(Math.abs(viewport.scrollLeft) / width2));
+  };
+  if (!data.length) return null;
+  const width = itemWidth === void 0 ? "75%" : `min(100%, ${Math.max(1, itemWidth)}px)`;
+  const sideSpace = horizontalSpacing === void 0 ? "calc((100% - var(--mova-blur-width)) / 2)" : `min(${Math.max(0, horizontalSpacing)}px, calc(100% - var(--mova-blur-width)))`;
+  const viewportStyle = {
+    "--mova-blur-width": width,
+    "--mova-blur-side": sideSpace,
+    "--mova-blur-gap": `min(${Math.max(0, spacing)}px, calc(var(--mova-blur-width) / 4))`,
+    display: "flex",
+    width: "100%",
+    minWidth: 0,
+    overflowX: "auto",
+    overscrollBehaviorX: "contain",
+    scrollbarWidth: "none",
+    paddingBlock: 12,
+    scrollPaddingInlineStart: "var(--mova-blur-side)",
+    userSelect: "none",
+    WebkitUserSelect: "none"
+  };
+  return /* @__PURE__ */ jsxs83("section", { "aria-label": label, "aria-roledescription": "carousel", className, style, children: [
+    /* @__PURE__ */ jsx173("style", { children: carouselCss }),
+    /* @__PURE__ */ jsxs83(
+      "div",
+      {
+        ref: viewportRef,
+        "data-mova-blur-viewport": "",
+        tabIndex: data.length > 1 ? 0 : void 0,
+        "aria-label": data.length > 1 ? "Slides" : void 0,
+        "aria-keyshortcuts": data.length > 1 ? "ArrowLeft ArrowRight Home End" : void 0,
+        onKeyDown: handleKeyDown,
+        onScroll: (event) => handleScroll(event.currentTarget),
+        onWheel: () => {
+          targetIndex.current = null;
+        },
+        onFocusCapture: (event) => {
+          const slide = event.target.closest("[data-mova-blur-slide]");
+          if (slide) scrollToSlide(event.currentTarget, Number(slide.dataset.movaBlurSlide), true);
+        },
+        onDragStart: (event) => {
+          if (dragRef.current) event.preventDefault();
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: finishDrag,
+        onPointerCancel: finishDrag,
+        onLostPointerCapture: finishDrag,
+        onPointerLeave: (event) => {
+          if (!dragRef.current?.moved) finishDrag(event);
+        },
+        onClickCapture: (event) => {
+          if (!suppressClick.current || event.detail === 0) return;
+          suppressClick.current = false;
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        style: viewportStyle,
+        children: [
+          /* @__PURE__ */ jsx173("span", { "aria-hidden": "true", style: { flex: "0 0 var(--mova-blur-side)" } }),
+          data.map((item, index) => /* @__PURE__ */ jsx173(
+            CarouselSlide,
+            {
+              index,
+              total: data.length,
+              position,
+              reducedMotion,
+              children: renderItem({ item, index })
+            },
+            keyExtractor?.(item, index) ?? index
+          )),
+          /* @__PURE__ */ jsx173("span", { "aria-hidden": "true", style: { flex: "0 0 calc(100% - var(--mova-blur-width) - var(--mova-blur-side))" } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs83(
+      "span",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        style: { position: "absolute", width: 1, height: 1, padding: 0, overflow: "hidden", clipPath: "inset(50%)", whiteSpace: "nowrap" },
+        children: [
+          Math.min(activeIndex + 1, data.length),
+          " of ",
+          data.length
+        ]
+      }
+    )
+  ] });
+}
+
+// .generated/ui/patterns/compare-slider.tsx
+import { useEffect as useEffect20, useRef as useRef19, useState as useState30 } from "react";
+import { animate, motion as motion158, useMotionValue as useMotionValue3, useReducedMotion as useReducedMotion12, useTransform as useTransform3 } from "framer-motion";
+import { ChevronsLeftRight } from "lucide-react";
+import { jsx as jsx174, jsxs as jsxs84 } from "react/jsx-runtime";
+var clamp2 = (value) => Math.max(0, Math.min(1, value));
+var smooth = { type: "spring", stiffness: 210, damping: 27, mass: 1 };
+var fullFrame = { position: "absolute", inset: 0, pointerEvents: "none" };
+function CompareSlider({
+  before,
+  after,
+  initial = 0.5,
+  beforeLabel = "Before",
+  afterLabel = "After",
+  aspectRatio = 4 / 3,
+  hint = true,
+  onPositionChange,
+  accessibilityLabel,
+  className,
+  style
+}) {
+  const [start] = useState30(() => Number.isFinite(initial) ? clamp2(initial) : 0.5);
+  const [value, setValue] = useState30(start);
+  const [held, setHeld] = useState30(false);
+  const gesture = useRef19(null);
+  const hasInteracted = useRef19(false);
+  const position = useMotionValue3(start);
+  const reduced = useReducedMotion12();
+  const left = useTransform3(position, (p) => `${clamp2(p) * 100}%`);
+  const clipPath = useTransform3(position, (p) => `inset(0 ${(1 - clamp2(p)) * 100}% 0 0)`);
+  const leftTagOpacity = useTransform3(position, [0.12, 0.32], [0, 1]);
+  const rightTagOpacity = useTransform3(position, [0.68, 0.88], [1, 0]);
+  useEffect20(() => {
+    if (!hint || reduced || hasInteracted.current) return;
+    let playing = true;
+    const timer = window.setTimeout(async () => {
+      if (hasInteracted.current) return;
+      const nudge = start > 0.8 ? start - 0.12 : Math.min(0.92, start + 0.12);
+      await animate(position, nudge, { duration: 0.42, ease: "easeInOut" });
+      if (playing && !hasInteracted.current) animate(position, start, smooth);
+    }, 500);
+    return () => {
+      playing = false;
+      window.clearTimeout(timer);
+      position.stop();
+      if (!hasInteracted.current) position.set(start);
+    };
+  }, [hint, reduced, position, start]);
+  function report(next, spring2) {
+    setValue(next);
+    if (spring2 && !reduced) animate(position, next, smooth);
+    else position.set(next);
+    onPositionChange?.(next);
+  }
+  function fraction(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return rect.width > 0 ? clamp2((event.clientX - rect.left) / rect.width) : value;
+  }
+  function begin(event) {
+    if (!event.isPrimary || event.button !== 0 || gesture.current) return;
+    hasInteracted.current = true;
+    position.stop();
+    gesture.current = { id: event.pointerId, x: event.clientX, moved: false };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    if (event.pointerType !== "touch") event.currentTarget.focus({ preventScroll: true });
+    setHeld(true);
+  }
+  function move(event) {
+    const active = gesture.current;
+    if (!active || active.id !== event.pointerId) return;
+    if (!active.moved && Math.abs(event.clientX - active.x) < 4) return;
+    active.moved = true;
+    position.set(fraction(event));
+  }
+  function finish(event, canceled = false) {
+    const active = gesture.current;
+    if (!active || active.id !== event.pointerId) return;
+    gesture.current = null;
+    setHeld(false);
+    if (canceled) position.set(value);
+    else report(fraction(event), !active.moved);
+  }
+  const tag = {
+    position: "absolute",
+    top: 12,
+    borderRadius: 999,
+    background: "rgba(0,0,0,.55)",
+    color: "#ededed",
+    padding: "4px 10px",
+    fontSize: 12,
+    lineHeight: "16px",
+    fontWeight: 600,
+    pointerEvents: "none",
+    maxWidth: "45%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+  const percent = Math.round(value * 100);
+  return /* @__PURE__ */ jsxs84(
+    "div",
+    {
+      role: "slider",
+      "aria-label": accessibilityLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percent,
+      "aria-valuetext": `${percent}% ${beforeLabel.toLowerCase()}`,
+      tabIndex: 0,
+      className: `focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current ${className ?? ""}`,
+      onPointerDown: begin,
+      onPointerMove: move,
+      onPointerUp: (event) => finish(event),
+      onPointerCancel: (event) => finish(event, true),
+      onLostPointerCapture: (event) => finish(event, true),
+      onKeyDown: (event) => {
+        const steps = { ArrowLeft: -0.1, ArrowDown: -0.1, ArrowRight: 0.1, ArrowUp: 0.1 };
+        if (event.key !== "Home" && event.key !== "End" && !(event.key in steps)) return;
+        event.preventDefault();
+        hasInteracted.current = true;
+        const next = event.key === "Home" ? 0 : event.key === "End" ? 1 : clamp2(Math.round((value + steps[event.key]) * 10) / 10);
+        report(next, true);
+      },
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio,
+        overflow: "hidden",
+        isolation: "isolate",
+        borderRadius: 28,
+        background: "#050505",
+        cursor: "ew-resize",
+        touchAction: "pan-y pinch-zoom",
+        userSelect: "none",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx174("div", { style: fullFrame, "aria-hidden": "true", children: after }),
+        /* @__PURE__ */ jsx174(motion158.div, { style: { ...fullFrame, clipPath }, "aria-hidden": "true", children: before }),
+        beforeLabel && /* @__PURE__ */ jsx174(motion158.span, { "aria-hidden": "true", style: { ...tag, left: 12, opacity: leftTagOpacity }, children: beforeLabel }),
+        afterLabel && /* @__PURE__ */ jsx174(motion158.span, { "aria-hidden": "true", style: { ...tag, right: 12, opacity: rightTagOpacity }, children: afterLabel }),
+        /* @__PURE__ */ jsx174(motion158.div, { "aria-hidden": "true", style: {
+          position: "absolute",
+          insetBlock: 0,
+          left,
+          width: 2,
+          x: -1,
+          background: "#fff",
+          display: "grid",
+          placeItems: "center",
+          pointerEvents: "none"
+        }, children: /* @__PURE__ */ jsx174(
+          motion158.div,
+          {
+            animate: { scale: held && !reduced ? 1.12 : 1 },
+            transition: reduced ? { duration: 0 } : smooth,
+            style: {
+              position: "absolute",
+              display: "grid",
+              placeItems: "center",
+              width: 40,
+              height: 40,
+              borderRadius: "50%",
+              background: "#fff",
+              color: "#000",
+              boxShadow: "0 5px 14px #0005"
+            },
+            children: /* @__PURE__ */ jsx174(ChevronsLeftRight, { size: 24, strokeWidth: 2 })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // .generated/ui/patterns/expanding-icon-tabs.tsx
-import { useEffect as useEffect18, useRef as useRef17, useState as useState28 } from "react";
+import { useEffect as useEffect21, useRef as useRef20, useState as useState31 } from "react";
 import { Activity as Activity2, Compass, CreditCard, SlidersHorizontal as SlidersHorizontal2, Users } from "lucide-react";
-import { jsx as jsx172, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx175, jsxs as jsxs85 } from "react/jsx-runtime";
 var items = [
   { id: "overview", label: "Overview", icon: Compass },
   { id: "activity", label: "Activity", icon: Activity2 },
@@ -10576,9 +11465,9 @@ var items = [
   { id: "billing", label: "Billing", icon: CreditCard }
 ];
 function ExpandingIconTabs() {
-  const [active, setActive] = useState28(null);
-  const rootRef = useRef17(null);
-  useEffect18(() => {
+  const [active, setActive] = useState31(null);
+  const rootRef = useRef20(null);
+  useEffect21(() => {
     if (!active) return;
     const region = rootRef.current?.parentElement;
     if (!region) return;
@@ -10606,7 +11495,7 @@ function ExpandingIconTabs() {
       setActive(null);
     }
   };
-  return /* @__PURE__ */ jsx172(
+  return /* @__PURE__ */ jsx175(
     "div",
     {
       className: "flex max-w-full flex-wrap items-center gap-1 rounded-xl border border-[#2b2f36] bg-[#121418] p-1 text-[11px] text-[#dfe2e5] shadow-[inset_0_1px_0_rgba(255,255,255,.04),0_10px_24px_rgba(0,0,0,.35)]",
@@ -10615,7 +11504,7 @@ function ExpandingIconTabs() {
       ref: rootRef,
       onKeyDown: handleKeyDown,
       children: items.map(
-        (item, index) => "separator" in item ? /* @__PURE__ */ jsx172(
+        (item, index) => "separator" in item ? /* @__PURE__ */ jsx175(
           "span",
           {
             className: "mx-[2px] h-[18px] w-px flex-none bg-[#23262c]",
@@ -10623,7 +11512,7 @@ function ExpandingIconTabs() {
             "aria-orientation": "vertical"
           },
           `separator-${index}`
-        ) : /* @__PURE__ */ jsxs82(
+        ) : /* @__PURE__ */ jsxs85(
           "button",
           {
             type: "button",
@@ -10633,19 +11522,19 @@ function ExpandingIconTabs() {
             "aria-pressed": active === item.id,
             onClick: () => setActive(active === item.id ? null : item.id),
             children: [
-              /* @__PURE__ */ jsx172(
+              /* @__PURE__ */ jsx175(
                 "span",
                 {
                   className: `grid flex-none place-items-center [transition:color_.3s_ease] motion-reduce:[transition-duration:.01ms] ${active === item.id ? "text-[#f97316]" : ""}`,
-                  children: /* @__PURE__ */ jsx172(item.icon, { size: 15, strokeWidth: 1.8, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx175(item.icon, { size: 15, strokeWidth: 1.8, "aria-hidden": "true" })
                 }
               ),
-              /* @__PURE__ */ jsx172(
+              /* @__PURE__ */ jsx175(
                 "span",
                 {
                   className: `grid overflow-hidden [transition:grid-template-columns_.5s_cubic-bezier(.32,.72,0,1),opacity_.3s_ease] motion-reduce:[transition-duration:.01ms] ${active === item.id ? "grid-cols-[1fr] opacity-100" : "grid-cols-[0fr] opacity-0"}`,
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx172("span", { className: "min-w-0 overflow-hidden whitespace-nowrap", children: item.label })
+                  children: /* @__PURE__ */ jsx175("span", { className: "min-w-0 overflow-hidden whitespace-nowrap", children: item.label })
                 }
               )
             ]
@@ -10657,15 +11546,368 @@ function ExpandingIconTabs() {
   );
 }
 
+// .generated/ui/patterns/fold-panel.tsx
+import { useCallback as useCallback5, useEffect as useEffect22, useId as useId12, useRef as useRef21, useState as useState32 } from "react";
+import { motion as motion159, useReducedMotion as useReducedMotion13, useSpring as useSpring5, useTransform as useTransform4 } from "framer-motion";
+import { ChevronDown as ChevronDown4 } from "lucide-react";
+import { jsx as jsx176, jsxs as jsxs86 } from "react/jsx-runtime";
+var foldSpring = { stiffness: 210, damping: 27, mass: 1 };
+var focusStyle = "focus-visible:outline-2 focus-visible:outline-offset-[-3px] focus-visible:outline-current";
+function FoldPanel({
+  title,
+  subtitle,
+  leading,
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  theme = "dark",
+  className,
+  style
+}) {
+  const [innerOpen, setInnerOpen] = useState32(defaultOpen);
+  const expanded = open ?? innerOpen;
+  const reduced = useReducedMotion13();
+  const contentId = useId12();
+  const trigger = useRef21(null);
+  const progress = useSpring5(expanded ? 1 : 0, foldSpring);
+  const rows = useTransform4(progress, [0, 1], ["0fr", "1fr"]);
+  const opacity = useTransform4(progress, [0.3, 0.8], [0, 1]);
+  const offset = useTransform4(progress, [0, 1], [-10, 0]);
+  const rotate = useTransform4(progress, [0, 1], [0, 180]);
+  const dark = theme === "dark";
+  const backgroundColor = useTransform4(progress, [0, 1], dark ? ["#0a0a0a", "#1c1c1c"] : ["#fafafa", "#ffffff"]);
+  const borderColor = useTransform4(progress, [0, 1], dark ? ["rgba(255,255,255,.08)", "rgba(255,255,255,.16)"] : ["rgba(0,0,0,.08)", "rgba(0,0,0,.16)"]);
+  useEffect22(() => {
+    const value = expanded ? 1 : 0;
+    if (reduced) progress.jump(value);
+    else progress.set(value);
+  }, [expanded, progress, reduced]);
+  const setContent = useCallback5((element) => {
+    if (!element) return;
+    if (!expanded && element.contains(document.activeElement)) trigger.current?.focus();
+    element.inert = !expanded;
+  }, [expanded]);
+  function toggle() {
+    if (open === void 0) setInnerOpen(!expanded);
+    onOpenChange?.(!expanded);
+  }
+  return /* @__PURE__ */ jsxs86(
+    motion159.div,
+    {
+      className,
+      whileTap: disabled || reduced ? void 0 : { scale: 0.99 },
+      transition: { type: "spring", stiffness: 520, damping: 38, mass: 1 },
+      style: {
+        width: "100%",
+        border: "1px solid",
+        borderRadius: 20,
+        overflow: "hidden",
+        opacity: disabled ? 0.5 : 1,
+        color: dark ? "#ededed" : "#0a0a0a",
+        backgroundColor,
+        borderColor,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs86(
+          "button",
+          {
+            ref: trigger,
+            type: "button",
+            className: focusStyle,
+            "aria-controls": contentId,
+            "aria-expanded": expanded,
+            disabled,
+            onClick: toggle,
+            style: {
+              appearance: "none",
+              display: "flex",
+              alignItems: "center",
+              width: "100%",
+              minHeight: 64,
+              gap: 12,
+              padding: "12px 16px",
+              border: 0,
+              background: "none",
+              color: "inherit",
+              font: "inherit",
+              cursor: disabled ? "default" : "pointer",
+              textAlign: "start"
+            },
+            children: [
+              leading != null && /* @__PURE__ */ jsx176("span", { "aria-hidden": "true", style: {
+                display: "grid",
+                placeItems: "center",
+                width: 36,
+                height: 36,
+                flexShrink: 0,
+                borderRadius: 10,
+                color: dark ? "#7ab2ff" : "#1f5fe0",
+                background: dark ? "rgba(59,130,246,.16)" : "rgba(31,95,224,.1)"
+              }, children: leading }),
+              /* @__PURE__ */ jsxs86("span", { style: { display: "grid", flex: 1, minWidth: 0, gap: 2 }, children: [
+                /* @__PURE__ */ jsx176("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 16, lineHeight: 1.2, fontWeight: 600 }, children: title }),
+                subtitle && /* @__PURE__ */ jsx176("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 14, lineHeight: 1.3, color: dark ? "#a1a1a1" : "#555" }, children: subtitle })
+              ] }),
+              /* @__PURE__ */ jsx176(motion159.span, { "aria-hidden": "true", style: { display: "grid", placeItems: "center", width: 20, height: 20, flexShrink: 0, rotate, color: dark ? "#a1a1a1" : "#555" }, children: /* @__PURE__ */ jsx176(ChevronDown4, { size: 16, strokeWidth: 1.75 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx176(motion159.div, { ref: setContent, id: contentId, "aria-hidden": !expanded, style: { display: "grid", gridTemplateRows: rows }, children: /* @__PURE__ */ jsx176("div", { style: { minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx176(motion159.div, { style: { padding: "0 16px 16px", opacity, y: offset }, children }) }) })
+      ]
+    }
+  );
+}
+
+// .generated/ui/patterns/gesture-range-slider.tsx
+import { useEffect as useEffect23, useRef as useRef22, useState as useState33 } from "react";
+import { motion as motion160, useReducedMotion as useReducedMotion14, useSpring as useSpring6, useTransform as useTransform5 } from "framer-motion";
+import { jsx as jsx177, jsxs as jsxs87 } from "react/jsx-runtime";
+var TRACK_HEIGHT = 40;
+var THUMB_WIDTH = 6;
+var THUMB_HEIGHT = 20;
+var TICK_SIZE = 4;
+var TICK_INSET = 18;
+var SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5 };
+var SPRING_BOUNCY = { type: "spring", stiffness: 500, damping: 14, mass: 0.7 };
+var PALETTE = {
+  dark: { track: "rgba(120,120,128,0.22)", fill: "rgba(255,255,255,0.16)", thumb: "#ffffff", tick: "rgba(255,255,255,0.25)", focus: "#ffffff" },
+  light: { track: "rgba(120,120,128,0.20)", fill: "rgba(0,0,0,0.14)", thumb: "#171717", tick: "rgba(0,0,0,0.32)", focus: "#171717" }
+};
+function clamp3(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function decimalPlaces(value) {
+  const [mantissa, exponent = "0"] = String(value).split("e");
+  return Math.max(0, (mantissa.split(".")[1]?.length ?? 0) - Number(exponent));
+}
+function thumbPosition(fraction, extra = 0) {
+  const ratio = clamp3(fraction, 0, 1);
+  return `max(${extra}px, calc(${ratio * 100}% + ${extra - ratio * THUMB_WIDTH}px))`;
+}
+var centerVertically = {
+  position: "absolute",
+  pointerEvents: "none",
+  top: "50%"
+};
+function GestureRangeSlider({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  showTicks = true,
+  disabled = false,
+  trackColor,
+  fillColor,
+  thumbColor,
+  tickColor,
+  style,
+  accessibilityLabel = "Value",
+  className,
+  theme = "dark"
+}) {
+  const minimum = Number.isFinite(min) ? min : 0;
+  const maximum = Number.isFinite(max) ? Math.max(minimum, max) : Math.max(minimum, 100);
+  const range = maximum - minimum;
+  const increment = Number.isFinite(step) && step > 0 ? step : 1;
+  const precision = Math.max(decimalPlaces(minimum), decimalPlaces(increment));
+  const canAdjust = !disabled && range > 0 && Number.isFinite(range);
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState33(defaultValue);
+  const [dragging, setDragging] = useState33(false);
+  const pointerId = useRef22(null);
+  const raw = value ?? internal;
+  const current = clamp3(Number.isFinite(raw) ? raw : minimum, minimum, maximum);
+  const lastValue = useRef22(current);
+  const fraction = range > 0 && Number.isFinite(range) ? (current - minimum) / range : 0;
+  const palette2 = PALETTE[theme];
+  const reducedMotion = useReducedMotion14();
+  const position = useSpring6(fraction, SPRING_GLIDE);
+  const thumbLeft = useTransform5(position, (ratio) => thumbPosition(ratio));
+  const fillWidth = useTransform5(position, (ratio) => thumbPosition(ratio, THUMB_WIDTH / 2));
+  useEffect23(() => {
+    if (controlled || pointerId.current === null) lastValue.current = current;
+    if (reducedMotion) position.jump(fraction);
+    else position.set(fraction);
+  }, [controlled, current, fraction, position, reducedMotion]);
+  function commit(next) {
+    if (lastValue.current === next) return;
+    lastValue.current = next;
+    if (!controlled) setInternal(next);
+    onValueChange?.(next);
+  }
+  function valueFromStep(index) {
+    const stepped = minimum + index * increment;
+    const rounded = precision <= 100 ? Number(stepped.toFixed(precision)) : stepped;
+    return clamp3(rounded, minimum, maximum);
+  }
+  function updateFromPointer(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    if (rect.width <= 0) return;
+    const ratio = clamp3((event.clientX - rect.left) / rect.width, 0, 1);
+    commit(valueFromStep(Math.round(ratio * range / increment)));
+  }
+  function startDrag(event) {
+    if (!canAdjust || event.button !== 0 || pointerId.current !== null) return;
+    pointerId.current = event.pointerId;
+    lastValue.current = current;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+    updateFromPointer(event);
+  }
+  function moveDrag(event) {
+    if (canAdjust && pointerId.current === event.pointerId) updateFromPointer(event);
+  }
+  function finishDrag(event) {
+    if (pointerId.current !== event.pointerId) return;
+    if (canAdjust && event.type === "pointerup") updateFromPointer(event);
+    pointerId.current = null;
+    setDragging(false);
+  }
+  function handleKeyDown(event) {
+    if (!canAdjust || pointerId.current !== null) return;
+    const index = (current - minimum) / increment;
+    const nearestIndex = Math.round(index);
+    const onStep = valueFromStep(nearestIndex) === current;
+    const nextIndex = onStep ? nearestIndex + 1 : Math.ceil(index);
+    const previousIndex = onStep ? nearestIndex - 1 : Math.floor(index);
+    let target;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        target = valueFromStep(nextIndex);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        target = valueFromStep(previousIndex);
+        break;
+      case "PageUp":
+        target = valueFromStep(nextIndex + 9);
+        break;
+      case "PageDown":
+        target = valueFromStep(previousIndex - 9);
+        break;
+      case "Home":
+        target = minimum;
+        break;
+      case "End":
+        target = maximum;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    lastValue.current = current;
+    commit(target);
+  }
+  const tickSteps = Math.floor(range / increment);
+  const showMarkers = showTicks && tickSteps > 0 && tickSteps <= 50;
+  return /* @__PURE__ */ jsxs87(
+    "div",
+    {
+      role: "slider",
+      "aria-label": accessibilityLabel,
+      "aria-orientation": "horizontal",
+      "aria-valuemin": minimum,
+      "aria-valuemax": maximum,
+      "aria-valuenow": current,
+      "aria-disabled": !canAdjust || void 0,
+      tabIndex: canAdjust ? 0 : -1,
+      "data-mova-gesture-range": "",
+      className,
+      onKeyDown: handleKeyDown,
+      onPointerDown: startDrag,
+      onPointerMove: moveDrag,
+      onPointerUp: finishDrag,
+      onPointerCancel: finishDrag,
+      onLostPointerCapture: finishDrag,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: TRACK_HEIGHT,
+        boxSizing: "border-box",
+        overflow: "hidden",
+        borderRadius: 10,
+        cursor: canAdjust ? "pointer" : "default",
+        touchAction: canAdjust ? "none" : "auto",
+        userSelect: "none",
+        color: palette2.focus,
+        backgroundColor: trackColor ?? palette2.track,
+        opacity: disabled ? 0.5 : 1,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx177("style", { children: `[data-mova-gesture-range]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }` }),
+        /* @__PURE__ */ jsx177(
+          motion160.span,
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              pointerEvents: "none",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              width: fillWidth,
+              backgroundColor: fillColor ?? palette2.fill
+            }
+          }
+        ),
+        showMarkers && Array.from({ length: tickSteps + 1 }, (_, index) => {
+          const ratio = index / tickSteps;
+          return /* @__PURE__ */ jsx177(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                ...centerVertically,
+                width: TICK_SIZE,
+                height: TICK_SIZE,
+                marginTop: -TICK_SIZE / 2,
+                left: `clamp(0px, calc(${ratio * 100}% + ${TICK_INSET * (1 - 2 * ratio) - TICK_SIZE / 2}px), 100%)`,
+                borderRadius: "50%",
+                backgroundColor: tickColor ?? palette2.tick
+              }
+            },
+            index
+          );
+        }),
+        /* @__PURE__ */ jsx177(
+          motion160.span,
+          {
+            "aria-hidden": "true",
+            initial: false,
+            animate: { scaleY: dragging && canAdjust && !reducedMotion ? 1.35 : 1 },
+            transition: reducedMotion ? { duration: 0 } : SPRING_BOUNCY,
+            style: {
+              ...centerVertically,
+              left: thumbLeft,
+              width: THUMB_WIDTH,
+              height: THUMB_HEIGHT,
+              marginTop: -THUMB_HEIGHT / 2,
+              borderRadius: 3,
+              backgroundColor: thumbColor ?? palette2.thumb
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
 // .generated/ui/patterns/gooey-popover.tsx
 import gsap from "gsap";
-import { useCallback as useCallback4, useEffect as useEffect19, useId as useId11, useRef as useRef18, useState as useState29 } from "react";
-import { jsx as jsx173, jsxs as jsxs83 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect24, useId as useId13, useRef as useRef23, useState as useState34 } from "react";
+import { jsx as jsx178, jsxs as jsxs88 } from "react/jsx-runtime";
 function cn2(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function useClickOutside(ref, handler, eventType = "mousedown") {
-  useEffect19(() => {
+  useEffect24(() => {
     function callback(event) {
       const target = event.target;
       if (!target?.isConnected) return;
@@ -10700,20 +11942,20 @@ function GooeyPopover({
   contentClassName,
   className
 }) {
-  const filterId = useId11();
+  const filterId = useId13();
   const isControlled = controlledIsOpen !== void 0;
-  const [internalIsOpen, setInternalIsOpen] = useState29(false);
+  const [internalIsOpen, setInternalIsOpen] = useState34(false);
   const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
-  const [isVisible, setIsVisible] = useState29(false);
-  const containerRef = useRef18(null);
-  const measureRef = useRef18(null);
-  const filteredContentRef = useRef18(null);
-  const unfilteredContentRef = useRef18(null);
-  const innerContentRef = useRef18(null);
-  const timelineRef = useRef18(null);
-  const [contentHeight, setContentHeight] = useState29(0);
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState29(false);
-  useEffect19(() => {
+  const [isVisible, setIsVisible] = useState34(false);
+  const containerRef = useRef23(null);
+  const measureRef = useRef23(null);
+  const filteredContentRef = useRef23(null);
+  const unfilteredContentRef = useRef23(null);
+  const innerContentRef = useRef23(null);
+  const timelineRef = useRef23(null);
+  const [contentHeight, setContentHeight] = useState34(0);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState34(false);
+  useEffect24(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     setPrefersReducedMotion(mq.matches);
     const handler = (e) => {
@@ -10722,7 +11964,7 @@ function GooeyPopover({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
-  const setIsOpen = useCallback4(
+  const setIsOpen = useCallback6(
     (open) => {
       if (!isControlled) {
         setInternalIsOpen(open);
@@ -10731,13 +11973,13 @@ function GooeyPopover({
     },
     [isControlled, onOpenChange]
   );
-  const handleClose = useCallback4(() => {
+  const handleClose = useCallback6(() => {
     if (isOpen) {
       setIsOpen(false);
     }
   }, [isOpen, setIsOpen]);
   useClickOutside(containerRef, handleClose);
-  useEffect19(() => {
+  useEffect24(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -10746,7 +11988,7 @@ function GooeyPopover({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, setIsOpen]);
-  useEffect19(() => {
+  useEffect24(() => {
     const measureHeight = () => {
       if (measureRef.current) {
         const height = measureRef.current.scrollHeight;
@@ -10768,7 +12010,7 @@ function GooeyPopover({
   const triggerRadius = triggerSize / 2;
   const translateY = side === "top" ? -(contentHeight + sideOffset) : triggerSize + sideOffset;
   const contentLeft = triggerRadius - contentWidth / 2;
-  useEffect19(() => {
+  useEffect24(() => {
     if (contentHeight === 0) {
       return;
     }
@@ -10915,7 +12157,7 @@ function GooeyPopover({
     speed,
     prefersReducedMotion
   ]);
-  const defaultTriggerIcon = /* @__PURE__ */ jsxs83(
+  const defaultTriggerIcon = /* @__PURE__ */ jsxs88(
     "svg",
     {
       fill: "none",
@@ -10928,20 +12170,20 @@ function GooeyPopover({
       width: 20,
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx173("line", { x1: "12", x2: "12", y1: "5", y2: "19" }),
-        /* @__PURE__ */ jsx173("line", { x1: "5", x2: "19", y1: "12", y2: "12" })
+        /* @__PURE__ */ jsx178("line", { x1: "12", x2: "12", y1: "5", y2: "19" }),
+        /* @__PURE__ */ jsx178("line", { x1: "5", x2: "19", y1: "12", y2: "12" })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs83("div", { className: cn2("relative inline-flex", className), ref: containerRef, children: [
-    /* @__PURE__ */ jsx173(
+  return /* @__PURE__ */ jsxs88("div", { className: cn2("relative inline-flex", className), ref: containerRef, children: [
+    /* @__PURE__ */ jsx178(
       "svg",
       {
         "aria-hidden": "true",
         className: "absolute",
         style: { height: 0, width: 0 },
-        children: /* @__PURE__ */ jsx173("defs", { children: /* @__PURE__ */ jsxs83("filter", { id: filterId, children: [
-          /* @__PURE__ */ jsx173(
+        children: /* @__PURE__ */ jsx178("defs", { children: /* @__PURE__ */ jsxs88("filter", { id: filterId, children: [
+          /* @__PURE__ */ jsx178(
             "feGaussianBlur",
             {
               in: "SourceGraphic",
@@ -10949,7 +12191,7 @@ function GooeyPopover({
               stdDeviation: GOO_STD_DEVIATION
             }
           ),
-          /* @__PURE__ */ jsx173(
+          /* @__PURE__ */ jsx178(
             "feColorMatrix",
             {
               in: "blur",
@@ -10958,11 +12200,11 @@ function GooeyPopover({
               values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${String(GOO_MATRIX_ALPHA_MULTIPLIER)} ${String(GOO_MATRIX_ALPHA_OFFSET)}`
             }
           ),
-          /* @__PURE__ */ jsx173("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
+          /* @__PURE__ */ jsx178("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsx173(
+    /* @__PURE__ */ jsx178(
       "div",
       {
         "aria-hidden": "true",
@@ -10975,17 +12217,17 @@ function GooeyPopover({
           visibility: "hidden",
           width: contentWidth
         },
-        children: /* @__PURE__ */ jsx173("div", { className: cn2("p-4", contentClassName), children })
+        children: /* @__PURE__ */ jsx178("div", { className: cn2("p-4", contentClassName), children })
       }
     ),
-    !prefersReducedMotion && (isOpen || isVisible) && /* @__PURE__ */ jsxs83(
+    !prefersReducedMotion && (isOpen || isVisible) && /* @__PURE__ */ jsxs88(
       "div",
       {
         "aria-hidden": "true",
         className: "pointer-events-none absolute inset-0",
         style: { filter: `url(#${filterId})` },
         children: [
-          /* @__PURE__ */ jsx173(
+          /* @__PURE__ */ jsx178(
             "div",
             {
               className: cn2("absolute rounded-full", bgClassName),
@@ -10997,7 +12239,7 @@ function GooeyPopover({
               }
             }
           ),
-          /* @__PURE__ */ jsx173(
+          /* @__PURE__ */ jsx178(
             "div",
             {
               className: cn2("absolute", bgClassName),
@@ -11015,7 +12257,7 @@ function GooeyPopover({
         ]
       }
     ),
-    /* @__PURE__ */ jsx173(
+    /* @__PURE__ */ jsx178(
       "button",
       {
         "aria-expanded": isOpen,
@@ -11033,7 +12275,7 @@ function GooeyPopover({
         children: trigger ?? defaultTriggerIcon
       }
     ),
-    isOpen || isVisible ? /* @__PURE__ */ jsx173(
+    isOpen || isVisible ? /* @__PURE__ */ jsx178(
       "div",
       {
         className: cn2(
@@ -11050,7 +12292,7 @@ function GooeyPopover({
           top: 0,
           width: triggerSize
         },
-        children: /* @__PURE__ */ jsx173(
+        children: /* @__PURE__ */ jsx178(
           "div",
           {
             className: cn2("p-4", contentClassName),
@@ -11064,22 +12306,779 @@ function GooeyPopover({
   ] });
 }
 
+// .generated/ui/patterns/long-press-context-menu.tsx
+import { Fragment as Fragment15, useEffect as useEffect25, useId as useId14, useLayoutEffect as useLayoutEffect11, useRef as useRef24, useState as useState35 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { AnimatePresence as AnimatePresence9, motion as motion161, useIsPresent as useIsPresent2, useReducedMotion as useReducedMotion15 } from "framer-motion";
+import { jsx as jsx179, jsxs as jsxs89 } from "react/jsx-runtime";
+var LONG_PRESS_DURATION = 250;
+var PRESS_SCALE = 0.97;
+var PREVIEW_SCALE = 1.04;
+var MENU_WIDTH = 250;
+var MENU_GAP = 30;
+var SCREEN_PADDING = 22;
+var OPEN_SPRING = { type: "spring", damping: 12, mass: 0.5, stiffness: 120 };
+var CLOSE_TRANSITION = { duration: 0.18, ease: "easeOut" };
+var useClientLayoutEffect = typeof window === "undefined" ? useEffect25 : useLayoutEffect11;
+var palette = {
+  light: {
+    background: "rgb(250 250 250 / 90%)",
+    text: "#111111",
+    subtitle: "#54545a",
+    destructive: "#b51d13",
+    backdrop: "rgb(0 0 0 / 8%)",
+    separator: "rgb(0 0 0 / 9%)",
+    highlight: "rgb(0 0 0 / 8%)"
+  },
+  dark: {
+    background: "rgb(37 37 37 / 84%)",
+    text: "#ffffff",
+    subtitle: "#b0b0b5",
+    destructive: "#ff5d54",
+    backdrop: "rgb(0 0 0 / 35%)",
+    separator: "rgb(255 255 255 / 10%)",
+    highlight: "rgb(255 255 255 / 12%)"
+  }
+};
+var contextMenuCss = `
+  [data-mova-context-trigger]:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 4px;
+  }
+  [data-mova-context-action] { background: transparent; }
+  [data-mova-context-action]:enabled:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    background: var(--mova-context-highlight);
+  }
+  @media (hover: hover) {
+    [data-mova-context-action]:enabled:hover { background: var(--mova-context-highlight); }
+  }
+  [data-mova-context-action]:enabled:active { background: var(--mova-context-highlight); }
+`;
+function placeMenu(rect, height, reducedMotion) {
+  const viewport = window.visualViewport;
+  const width = viewport?.width ?? document.documentElement.clientWidth;
+  const viewportHeight = viewport?.height ?? document.documentElement.clientHeight;
+  const inset = Math.min(SCREEN_PADDING, width / 10, viewportHeight / 10);
+  const left = (viewport?.offsetLeft ?? 0) + inset;
+  const top = (viewport?.offsetTop ?? 0) + inset;
+  const availableWidth = width - inset * 2;
+  const availableHeight = viewportHeight - inset * 2;
+  const bottom = top + availableHeight;
+  const gap = Math.min(MENU_GAP, availableHeight / 8);
+  const menuWidth = Math.min(MENU_WIDTH, availableWidth);
+  const scale = Math.min(
+    reducedMotion ? 1 : PREVIEW_SCALE,
+    availableWidth / Math.max(1, rect.width),
+    availableHeight * 0.55 / Math.max(1, rect.height)
+  );
+  const previewWidth = rect.width * scale;
+  const previewHeight = rect.height * scale;
+  const maxHeight = availableHeight - gap - previewHeight;
+  const menuHeight = Math.min(height, maxHeight);
+  const centeredPreviewLeft = rect.left + (rect.width - previewWidth) / 2;
+  const centeredPreviewTop = rect.top + (rect.height - previewHeight) / 2;
+  const previewLeft = Math.max(left, Math.min(left + availableWidth - previewWidth, centeredPreviewLeft));
+  const previewCenter = previewLeft + previewWidth / 2;
+  const menuLeft = Math.max(left, Math.min(left + availableWidth - menuWidth, previewCenter - menuWidth / 2));
+  const spaceAbove = centeredPreviewTop - top;
+  const spaceBelow = bottom - (centeredPreviewTop + previewHeight);
+  const above = spaceBelow < gap + menuHeight && spaceAbove > spaceBelow;
+  const totalHeight = previewHeight + gap + menuHeight;
+  const proposedTop = above ? centeredPreviewTop - gap - menuHeight : centeredPreviewTop;
+  const groupTop = Math.max(top, Math.min(bottom - totalHeight, proposedTop));
+  const previewTop = above ? groupTop + menuHeight + gap : groupTop;
+  return {
+    left: menuLeft,
+    top: above ? groupTop : previewTop + previewHeight + gap,
+    width: menuWidth,
+    maxHeight,
+    origin: `${Math.max(0, Math.min(menuWidth, previewCenter - menuLeft))}px ${above ? "bottom" : "top"}`,
+    shiftX: previewLeft - centeredPreviewLeft,
+    shiftY: previewTop - centeredPreviewTop,
+    scale
+  };
+}
+function ContextMenuOverlay({
+  anchor,
+  triggerRef,
+  id,
+  label,
+  children,
+  items: items2,
+  theme,
+  reducedMotion,
+  close
+}) {
+  const menuRef = useRef24(null);
+  const [placement, setPlacement] = useState35(null);
+  const colors = palette[theme];
+  const isPresent = useIsPresent2();
+  const closeRef = useRef24(close);
+  useClientLayoutEffect(() => {
+    closeRef.current = close;
+  }, [close]);
+  useClientLayoutEffect(() => {
+    const menu = menuRef.current;
+    const trigger = triggerRef.current;
+    if (!menu || !trigger) return;
+    const update = () => setPlacement(placeMenu(anchor.rect, menu.scrollHeight, reducedMotion));
+    const observer = new ResizeObserver(update);
+    observer.observe(menu);
+    if (menu.firstElementChild) observer.observe(menu.firstElementChild);
+    window.addEventListener("resize", update);
+    window.visualViewport?.addEventListener("resize", update);
+    window.visualViewport?.addEventListener("scroll", update);
+    update();
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+      window.visualViewport?.removeEventListener("resize", update);
+      window.visualViewport?.removeEventListener("scroll", update);
+    };
+  }, [anchor, triggerRef, reducedMotion]);
+  const ready = placement !== null;
+  useClientLayoutEffect(() => {
+    const menu = menuRef.current;
+    if (!menu || !ready || !isPresent) return;
+    const first = menu.querySelector("[data-mova-context-action]:enabled");
+    (first ?? menu).focus({ preventScroll: true });
+    const handleFocus = (event) => {
+      if (event.target instanceof Node && !menu.contains(event.target)) closeRef.current(false);
+    };
+    document.addEventListener("focusin", handleFocus);
+    return () => document.removeEventListener("focusin", handleFocus);
+  }, [isPresent, ready]);
+  const handleKeyDown = (event) => {
+    if (event.key === "Tab") {
+      close();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    const buttons = Array.from(event.currentTarget.querySelectorAll("[data-mova-context-action]:enabled"));
+    if (!buttons.length) return;
+    const focused = buttons.indexOf(document.activeElement);
+    let next;
+    switch (event.key) {
+      case "ArrowDown":
+        next = (focused + 1) % buttons.length;
+        break;
+      case "ArrowUp":
+        next = focused < 0 ? buttons.length - 1 : (focused - 1 + buttons.length) % buttons.length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = buttons.length - 1;
+        break;
+      default: {
+        if (event.key.length !== 1 || event.key === " ") return;
+        const key = event.key.toLocaleLowerCase();
+        const ordered = [...buttons.slice(focused + 1), ...buttons.slice(0, focused + 1)];
+        const match = ordered.find((button) => button.dataset.movaContextAction?.toLocaleLowerCase().startsWith(key));
+        if (!match) return;
+        next = buttons.indexOf(match);
+      }
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    buttons[next].focus();
+  };
+  const enter = reducedMotion ? { duration: 0 } : OPEN_SPRING;
+  const exit = reducedMotion ? { duration: 0 } : CLOSE_TRANSITION;
+  const menuRestScale = reducedMotion ? 1 : 0.8;
+  return /* @__PURE__ */ jsxs89(
+    motion161.div,
+    {
+      style: { position: "fixed", inset: 0, zIndex: 2147483647, pointerEvents: "none" },
+      onContextMenu: (event) => event.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx179(
+          motion161.div,
+          {
+            "aria-hidden": "true",
+            initial: { opacity: 0 },
+            animate: { opacity: 1, transition: enter },
+            exit: { opacity: 0, transition: exit },
+            onClick: () => close(),
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: isPresent ? "auto" : "none",
+              touchAction: "none",
+              background: colors.backdrop,
+              backdropFilter: "blur(9px)",
+              WebkitBackdropFilter: "blur(9px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx179(
+          motion161.div,
+          {
+            "aria-hidden": "true",
+            initial: { x: 0, y: 0, scale: anchor.pressed && !reducedMotion ? PRESS_SCALE : 1 },
+            animate: placement ? { x: placement.shiftX, y: placement.shiftY, scale: placement.scale, transition: enter } : void 0,
+            exit: { x: 0, y: 0, scale: 1, transition: exit },
+            style: {
+              position: "absolute",
+              left: anchor.rect.left,
+              top: anchor.rect.top,
+              width: anchor.rect.width,
+              height: anchor.rect.height,
+              font: anchor.font,
+              color: anchor.color
+            },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx179(
+          motion161.div,
+          {
+            ref: menuRef,
+            id,
+            role: "menu",
+            tabIndex: -1,
+            "aria-label": label,
+            "aria-hidden": !isPresent || void 0,
+            onKeyDown: handleKeyDown,
+            initial: { opacity: 0, scale: menuRestScale },
+            animate: placement ? { opacity: 1, scale: 1, transition: enter } : void 0,
+            exit: { opacity: 0, scale: menuRestScale, transition: exit },
+            style: {
+              "--mova-context-highlight": colors.highlight,
+              boxSizing: "border-box",
+              position: "absolute",
+              left: placement?.left ?? 0,
+              top: placement?.top ?? 0,
+              width: placement?.width ?? `min(${MENU_WIDTH}px, 80vw)`,
+              maxHeight: placement?.maxHeight,
+              visibility: ready ? "visible" : "hidden",
+              pointerEvents: isPresent ? "auto" : "none",
+              transformOrigin: placement?.origin,
+              background: colors.background,
+              color: colors.text,
+              borderRadius: 36,
+              paddingBlock: 12,
+              overflowY: "auto",
+              overscrollBehavior: "contain",
+              scrollbarWidth: "thin",
+              boxShadow: "0 12px 24px rgb(0 0 0 / 20%)",
+              backdropFilter: "blur(24px)",
+              WebkitBackdropFilter: "blur(24px)",
+              font: anchor.font
+            },
+            children: /* @__PURE__ */ jsx179("div", { role: "presentation", style: { paddingInline: 8 }, children: items2.map((item) => /* @__PURE__ */ jsxs89(Fragment15, { children: [
+              item.separatorBefore && /* @__PURE__ */ jsx179("div", { role: "separator", style: { height: 1, margin: "4px 4px", background: colors.separator } }),
+              /* @__PURE__ */ jsxs89(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  "data-mova-context-action": item.label,
+                  tabIndex: -1,
+                  disabled: item.disabled,
+                  onClick: () => {
+                    close();
+                    item.onSelect?.();
+                  },
+                  style: {
+                    appearance: "none",
+                    border: 0,
+                    borderRadius: 18,
+                    width: "100%",
+                    minHeight: 50,
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "8px 10px",
+                    gap: 16,
+                    color: item.destructive ? colors.destructive : "inherit",
+                    opacity: item.disabled ? 0.45 : 1,
+                    font: "inherit",
+                    textAlign: "start",
+                    cursor: item.disabled ? "default" : "pointer"
+                  },
+                  children: [
+                    item.icon !== void 0 && /* @__PURE__ */ jsx179("span", { "aria-hidden": "true", style: { display: "grid", placeItems: "center", flex: "0 0 26px" }, children: item.icon }),
+                    /* @__PURE__ */ jsxs89("span", { style: { display: "grid", gap: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx179("span", { style: { fontSize: 17, lineHeight: 1.2, overflowWrap: "anywhere" }, children: item.label }),
+                      item.subtitle && /* @__PURE__ */ jsx179("span", { style: { fontSize: 13, lineHeight: 1.25, color: colors.subtitle, overflowWrap: "anywhere" }, children: item.subtitle })
+                    ] })
+                  ]
+                }
+              )
+            ] }, item.id)) })
+          }
+        )
+      ]
+    }
+  );
+}
+function ContextMenu({
+  children,
+  items: items2,
+  label = "Actions",
+  theme = "light",
+  disabled = false,
+  className
+}) {
+  const triggerRef = useRef24(null);
+  const pressRef = useRef24(null);
+  const ignoreClick = useRef24(false);
+  const id = useId14();
+  const reducedMotion = useReducedMotion15() ?? false;
+  const [pressing, setPressing] = useState35(false);
+  const [anchor, setAnchor] = useState35(null);
+  const [showPreview, setShowPreview] = useState35(false);
+  const unavailable = disabled || items2.length === 0;
+  useEffect25(() => {
+    const trigger = triggerRef.current;
+    const preventLongPressClick = (event) => {
+      if (ignoreClick.current && event.cancelable) event.preventDefault();
+    };
+    trigger?.addEventListener("touchend", preventLongPressClick, { passive: false });
+    return () => {
+      trigger?.removeEventListener("touchend", preventLongPressClick);
+      if (pressRef.current) clearTimeout(pressRef.current.timer);
+    };
+  }, []);
+  const cancelPress = () => {
+    if (pressRef.current) clearTimeout(pressRef.current.timer);
+    pressRef.current = null;
+    setPressing(false);
+  };
+  const open = (pressed = false) => {
+    const trigger = triggerRef.current;
+    if (!trigger || trigger.disabled || anchor) return;
+    const { font, color } = getComputedStyle(trigger);
+    setAnchor({ rect: trigger.getBoundingClientRect(), font, color, pressed });
+    setShowPreview(true);
+  };
+  const close = (restoreFocus = true) => {
+    setAnchor(null);
+    if (restoreFocus) triggerRef.current?.focus({ preventScroll: true });
+  };
+  useEffect25(() => {
+    if (unavailable && anchor) {
+      setAnchor(null);
+      setShowPreview(false);
+    }
+  }, [anchor, unavailable]);
+  const handlePointerDown = (event) => {
+    if (!event.isPrimary || event.button !== 0 || anchor) return;
+    ignoreClick.current = false;
+    const timer = setTimeout(() => {
+      ignoreClick.current = true;
+      cancelPress();
+      open(true);
+    }, LONG_PRESS_DURATION);
+    pressRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, timer };
+    setPressing(true);
+  };
+  const handlePointerMove = (event) => {
+    const press = pressRef.current;
+    if (!press || press.pointerId !== event.pointerId) return;
+    if (Math.hypot(event.clientX - press.x, event.clientY - press.y) < 10) return;
+    ignoreClick.current = true;
+    cancelPress();
+  };
+  return /* @__PURE__ */ jsxs89("div", { className, style: { position: "relative", display: "inline-grid", maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx179("style", { children: contextMenuCss }),
+    /* @__PURE__ */ jsx179(
+      motion161.div,
+      {
+        animate: { scale: !reducedMotion && pressing ? PRESS_SCALE : 1 },
+        transition: { duration: reducedMotion ? 0 : pressing ? 0.25 : 0.16, ease: "easeOut" },
+        style: { minWidth: 0, visibility: showPreview ? "hidden" : void 0 },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx179(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "data-mova-context-trigger": "",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": anchor !== null,
+        "aria-controls": anchor ? id : void 0,
+        "aria-keyshortcuts": "Shift+F10 ContextMenu",
+        disabled: unavailable,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: cancelPress,
+        onPointerCancel: cancelPress,
+        onPointerLeave: cancelPress,
+        onContextMenu: (event) => {
+          if (unavailable) return;
+          event.preventDefault();
+          event.stopPropagation();
+          cancelPress();
+          open();
+        },
+        onKeyDown: (event) => {
+          if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey)) return;
+          event.preventDefault();
+          event.stopPropagation();
+          open();
+        },
+        onClick: (event) => {
+          if (ignoreClick.current && event.detail !== 0) {
+            ignoreClick.current = false;
+            return;
+          }
+          open();
+        },
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          appearance: "none",
+          border: 0,
+          padding: 0,
+          borderRadius: "inherit",
+          background: "transparent",
+          color: "inherit",
+          font: "inherit",
+          cursor: unavailable ? void 0 : "context-menu",
+          touchAction: "manipulation",
+          WebkitTouchCallout: "none"
+        }
+      }
+    ),
+    typeof document !== "undefined" && createPortal2(
+      /* @__PURE__ */ jsx179(AnimatePresence9, { onExitComplete: () => setShowPreview(false), children: anchor && /* @__PURE__ */ jsx179(
+        ContextMenuOverlay,
+        {
+          anchor,
+          triggerRef,
+          id,
+          label,
+          items: items2,
+          theme,
+          reducedMotion,
+          close,
+          children
+        },
+        "menu"
+      ) }),
+      document.body
+    )
+  ] });
+}
+
+// .generated/ui/patterns/split-view.tsx
+import {
+  useEffect as useEffect26,
+  useId as useId15,
+  useRef as useRef25,
+  useState as useState36
+} from "react";
+import { animate as animate2, motion as motion162, useMotionValue as useMotionValue4, useReducedMotion as useReducedMotion16, useTransform as useTransform6 } from "framer-motion";
+import { jsx as jsx180, jsxs as jsxs90 } from "react/jsx-runtime";
+var INSET = 8;
+var FADE_DISTANCE = 60;
+var FLING_THRESHOLD = 500;
+var SNAP_BIAS = 20;
+var KEYBOARD_STEP = 10;
+var SPRING = { type: "spring", damping: 12, stiffness: 150, mass: 0.5 };
+var PALETTE2 = {
+  dark: { root: "#121212", pane: "#1a1a1a", handle: "rgba(255,255,255,0.35)", text: "#f2f2f5" },
+  light: { root: "#eaeaea", pane: "#fafafa", handle: "rgba(0,0,0,0.35)", text: "#171717" }
+};
+function clamp4(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function dimension(value, fallback) {
+  return Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+function previousPoint(points, before) {
+  for (let index = points.length - 1; index >= 0; index--) {
+    if (points[index] < before) return points[index];
+  }
+  return void 0;
+}
+function resolveSnap(current, velocity, points) {
+  if (velocity > FLING_THRESHOLD) {
+    return points.find((point) => point > current + SNAP_BIAS) ?? points[points.length - 1];
+  }
+  if (velocity < -FLING_THRESHOLD) {
+    return previousPoint(points, current - SNAP_BIAS) ?? points[0];
+  }
+  return points.reduce(
+    (nearest, point) => Math.abs(point - current) < Math.abs(nearest - current) ? point : nearest
+  );
+}
+var paneStyle = {
+  borderRadius: 22,
+  minWidth: 0,
+  minHeight: 0,
+  overflow: "hidden"
+};
+function SplitView({
+  top,
+  bottom,
+  initialTopHeight = 300,
+  minTopHeight = 50,
+  minBottomHeight = 50,
+  snapPoints,
+  gap = 28,
+  height = 480,
+  theme = "dark",
+  className,
+  style,
+  onTopHeightChange
+}) {
+  const topId = useId15();
+  const rootRef = useRef25(null);
+  const dragRef = useRef25(null);
+  const animationRef = useRef25(null);
+  const reducedMotion = useReducedMotion16();
+  const palette2 = PALETTE2[theme];
+  const shellHeight = dimension(height, 480);
+  const [measuredHeight, setMeasuredHeight] = useState36(null);
+  const [dragging, setDragging] = useState36(false);
+  const [announcement, setAnnouncement] = useState36("");
+  const availableHeight = measuredHeight ?? Math.max(0, shellHeight - INSET * 2);
+  const handleHeight = Math.min(dimension(gap, 28), availableHeight);
+  const panesHeight = availableHeight - handleHeight;
+  const maxTop = Math.max(0, panesHeight - dimension(minBottomHeight, 50));
+  const minTop = Math.min(dimension(minTopHeight, 50), maxTop);
+  const constrained = minTop === maxTop;
+  const customPoints = snapPoints?.filter(Number.isFinite).map((point) => clamp4(point, minTop, maxTop));
+  const points = customPoints?.length ? [...new Set(customPoints)].sort((a, b) => a - b) : [minTop, (minTop + maxTop) / 2, maxTop];
+  const initialHeight = clamp4(dimension(initialTopHeight, 300), minTop, maxTop);
+  const topHeight = useMotionValue4(initialHeight);
+  const [reportedHeight, setReportedHeight] = useState36(initialHeight);
+  const currentHeight = clamp4(reportedHeight, minTop, maxTop);
+  const topOpacity = useTransform6(topHeight, [minTop, minTop + FADE_DISTANCE], [0.2, 1]);
+  const bottomOpacity = useTransform6(topHeight, [maxTop - FADE_DISTANCE, maxTop], [1, 0.2]);
+  useEffect26(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const measure = () => {
+      const computed = window.getComputedStyle(root);
+      const padding = parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
+      setMeasuredHeight(Math.max(0, root.clientHeight - padding));
+    };
+    measure();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(([entry]) => setMeasuredHeight(entry.contentRect.height));
+      observer.observe(root);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [shellHeight]);
+  useEffect26(() => {
+    animationRef.current?.stop();
+    const bounded = clamp4(topHeight.get(), minTop, maxTop);
+    topHeight.jump(bounded);
+    setReportedHeight(bounded);
+    return () => animationRef.current?.stop();
+  }, [maxTop, minTop, topHeight]);
+  function settle(target, announce = false) {
+    const from = topHeight.get();
+    animationRef.current?.stop();
+    setReportedHeight(target);
+    if (announce) setAnnouncement(`Top pane: ${Math.round(target)} pixels`);
+    if (reducedMotion || from === target) {
+      topHeight.jump(target);
+    } else {
+      const down = from < target;
+      animationRef.current = animate2(from, target, {
+        ...SPRING,
+        onUpdate(latest) {
+          const reached = down ? latest >= target : latest <= target;
+          topHeight.set(reached ? target : latest);
+          if (reached) animationRef.current?.stop();
+        }
+      });
+    }
+    onTopHeightChange?.(target);
+  }
+  function startDrag(event) {
+    if (event.button !== 0 || dragRef.current || constrained) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      pointerId: event.pointerId,
+      originY: event.clientY,
+      originHeight: topHeight.get(),
+      lastY: event.clientY,
+      lastTime: event.timeStamp,
+      velocity: 0,
+      moved: false
+    };
+    setAnnouncement("");
+  }
+  function moveDrag(event) {
+    const drag = dragRef.current;
+    if (drag?.pointerId !== event.pointerId) return;
+    const distance = event.clientY - drag.originY;
+    if (!drag.moved) {
+      if (Math.abs(distance) < 2) return;
+      animationRef.current?.stop();
+      drag.originHeight = topHeight.get();
+      drag.moved = true;
+      setDragging(true);
+    }
+    const elapsed = event.timeStamp - drag.lastTime;
+    if (elapsed > 0) {
+      const velocity = 1e3 * (event.clientY - drag.lastY) / elapsed;
+      drag.velocity = elapsed > 80 ? velocity : drag.velocity * 0.25 + velocity * 0.75;
+      drag.lastTime = event.timeStamp;
+      drag.lastY = event.clientY;
+    }
+    topHeight.set(clamp4(drag.originHeight + distance, minTop, maxTop));
+  }
+  function finishDrag(event) {
+    const drag = dragRef.current;
+    if (drag?.pointerId !== event.pointerId) return;
+    const released = event.type === "pointerup";
+    if (released && event.clientY !== drag.lastY) moveDrag(event);
+    dragRef.current = null;
+    if (!drag.moved) return;
+    setDragging(false);
+    const velocity = released && event.timeStamp - drag.lastTime < 100 ? drag.velocity : 0;
+    settle(resolveSnap(topHeight.get(), velocity, points), true);
+  }
+  function handleKeyDown(event) {
+    if (constrained || dragRef.current) return;
+    const current = currentHeight;
+    let target;
+    switch (event.key) {
+      case "ArrowUp":
+        target = current - KEYBOARD_STEP;
+        break;
+      case "ArrowDown":
+        target = current + KEYBOARD_STEP;
+        break;
+      case "PageUp":
+        target = previousPoint(points, current) ?? minTop;
+        break;
+      case "PageDown":
+        target = points.find((point) => point > current) ?? maxTop;
+        break;
+      case "Home":
+        target = minTop;
+        break;
+      case "End":
+        target = maxTop;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const bounded = clamp4(target, minTop, maxTop);
+    if (bounded !== current) settle(bounded);
+  }
+  return /* @__PURE__ */ jsxs90(
+    "div",
+    {
+      ref: rootRef,
+      className,
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        boxSizing: "border-box",
+        width: "100%",
+        height: shellHeight,
+        padding: INSET,
+        overflow: "hidden",
+        borderRadius: 34,
+        color: palette2.text,
+        backgroundColor: palette2.root,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx180("style", { children: `
+        [data-mova-split-handle]::before { position: absolute; inset: -12px 0; content: ""; }
+        [data-mova-split-handle]:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+      ` }),
+        /* @__PURE__ */ jsx180(
+          motion162.div,
+          {
+            id: topId,
+            style: { ...paneStyle, flexShrink: 0, backgroundColor: palette2.pane, height: topHeight, opacity: constrained ? 1 : topOpacity },
+            children: top
+          }
+        ),
+        /* @__PURE__ */ jsx180(
+          "div",
+          {
+            role: "separator",
+            tabIndex: constrained ? -1 : 0,
+            "aria-label": "Resize top pane",
+            "aria-orientation": "horizontal",
+            "aria-controls": topId,
+            "aria-valuemin": minTop,
+            "aria-valuemax": maxTop,
+            "aria-valuenow": currentHeight,
+            "aria-valuetext": `${Math.round(currentHeight)} pixels`,
+            "aria-disabled": constrained || void 0,
+            "data-mova-split-handle": "",
+            onKeyDown: handleKeyDown,
+            onPointerDown: startDrag,
+            onPointerMove: moveDrag,
+            onPointerUp: finishDrag,
+            onPointerCancel: finishDrag,
+            onLostPointerCapture: finishDrag,
+            style: {
+              position: "relative",
+              zIndex: 1,
+              display: "grid",
+              placeItems: "center",
+              flex: `0 0 ${handleHeight}px`,
+              borderRadius: 6,
+              cursor: constrained ? "default" : "row-resize",
+              touchAction: "none",
+              userSelect: "none"
+            },
+            children: /* @__PURE__ */ jsx180(
+              motion162.span,
+              {
+                "aria-hidden": "true",
+                initial: false,
+                animate: { scale: dragging && !reducedMotion ? 1.18 : 1 },
+                transition: reducedMotion ? { duration: 0 } : SPRING,
+                style: { width: 44, height: 5, borderRadius: 3, backgroundColor: palette2.handle }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx180(motion162.div, { style: { ...paneStyle, flex: "1 1 0", backgroundColor: palette2.pane, opacity: constrained ? 1 : bottomOpacity }, children: bottom }),
+        /* @__PURE__ */ jsx180("span", { role: "status", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clipPath: "inset(50%)" }, children: announcement })
+      ]
+    }
+  );
+}
+
 // .generated/ui/scroll/progress-indicator.tsx
-import { motion as motion156, useScroll, useSpring as useSpring5 } from "framer-motion";
-import { jsx as jsx174 } from "react/jsx-runtime";
+import { motion as motion163, useScroll, useSpring as useSpring7 } from "framer-motion";
+import { jsx as jsx181 } from "react/jsx-runtime";
 function ProgressIndicator({
   color = "bg-blue-500",
   height = 4,
   className = ""
 }) {
   const { scrollYProgress } = useScroll();
-  const scaleX = useSpring5(scrollYProgress, {
+  const scaleX = useSpring7(scrollYProgress, {
     stiffness: 100,
     damping: 30,
     restDelta: 1e-3
   });
-  return /* @__PURE__ */ jsx174(
-    motion156.div,
+  return /* @__PURE__ */ jsx181(
+    motion163.div,
     {
       className: `fixed top-0 left-0 right-0 origin-left z-[9999] ${color} ${className}`,
       style: {
@@ -11097,8 +13096,8 @@ function ProgressIndicator({
 }
 
 // .generated/ui/scroll/scroll-reveal.tsx
-import { motion as motion157 } from "framer-motion";
-import { jsx as jsx175 } from "react/jsx-runtime";
+import { motion as motion164 } from "framer-motion";
+import { jsx as jsx182 } from "react/jsx-runtime";
 function ScrollReveal({
   children,
   duration = 0.6,
@@ -11107,8 +13106,8 @@ function ScrollReveal({
   scale = 0.95,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx175(
-    motion157.div,
+  return /* @__PURE__ */ jsx182(
+    motion164.div,
     {
       initial: { opacity: 0, y: yOffset, x: xOffset, scale },
       whileInView: { opacity: 1, y: 0, x: 0, scale: 1 },
@@ -11125,15 +13124,15 @@ function ScrollReveal({
 }
 
 // .generated/ui/scroll/sticky-reveal.tsx
-import { useRef as useRef19, useState as useState30 } from "react";
-import { motion as motion158, useMotionValueEvent, useScroll as useScroll2 } from "framer-motion";
-import { jsx as jsx176, jsxs as jsxs84 } from "react/jsx-runtime";
+import { useRef as useRef26, useState as useState37 } from "react";
+import { motion as motion165, useMotionValueEvent, useScroll as useScroll2 } from "framer-motion";
+import { jsx as jsx183, jsxs as jsxs91 } from "react/jsx-runtime";
 function StickyReveal({
   content,
   className = ""
 }) {
-  const [activeCard, setActiveCard] = useState30(0);
-  const ref = useRef19(null);
+  const [activeCard, setActiveCard] = useState37(0);
+  const ref = useRef26(null);
   const { scrollYProgress } = useScroll2({
     target: ref,
     offset: ["start start", "end end"]
@@ -11149,15 +13148,15 @@ function StickyReveal({
     }, 0);
     setActiveCard(closestIndex);
   });
-  return /* @__PURE__ */ jsxs84(
+  return /* @__PURE__ */ jsxs91(
     "div",
     {
       ref,
       className: `relative flex justify-between gap-10 max-w-5xl mx-auto py-10 px-4 ${className}`,
       children: [
-        /* @__PURE__ */ jsx176("div", { className: "w-1/2 flex flex-col gap-32 py-10", children: content.map((item, index) => /* @__PURE__ */ jsxs84("div", { className: "min-h-[50vh] flex flex-col justify-center", children: [
-          /* @__PURE__ */ jsx176(
-            motion158.h2,
+        /* @__PURE__ */ jsx183("div", { className: "w-1/2 flex flex-col gap-32 py-10", children: content.map((item, index) => /* @__PURE__ */ jsxs91("div", { className: "min-h-[50vh] flex flex-col justify-center", children: [
+          /* @__PURE__ */ jsx183(
+            motion165.h2,
             {
               animate: {
                 opacity: activeCard === index ? 1 : 0.3
@@ -11166,8 +13165,8 @@ function StickyReveal({
               children: item.title
             }
           ),
-          /* @__PURE__ */ jsx176(
-            motion158.p,
+          /* @__PURE__ */ jsx183(
+            motion165.p,
             {
               animate: {
                 opacity: activeCard === index ? 1 : 0.3
@@ -11177,8 +13176,8 @@ function StickyReveal({
             }
           )
         ] }, index)) }),
-        /* @__PURE__ */ jsx176("div", { className: "sticky top-20 h-[60vh] w-1/2 rounded-2xl bg-neutral-100 dark:bg-neutral-900 border border-neutral-200/10 overflow-hidden flex items-center justify-center", children: content.map((item, index) => /* @__PURE__ */ jsx176(
-          motion158.div,
+        /* @__PURE__ */ jsx183("div", { className: "sticky top-20 h-[60vh] w-1/2 rounded-2xl bg-neutral-100 dark:bg-neutral-900 border border-neutral-200/10 overflow-hidden flex items-center justify-center", children: content.map((item, index) => /* @__PURE__ */ jsx183(
+          motion165.div,
           {
             initial: { opacity: 0, scale: 0.9 },
             animate: {
@@ -11187,7 +13186,7 @@ function StickyReveal({
             },
             transition: { duration: 0.4 },
             className: "absolute inset-0 p-6 flex items-center justify-center",
-            children: item.content || /* @__PURE__ */ jsxs84("div", { className: "text-lg font-semibold text-neutral-400", children: [
+            children: item.content || /* @__PURE__ */ jsxs91("div", { className: "text-lg font-semibold text-neutral-400", children: [
               "Card ",
               index + 1,
               " Visual"
@@ -11201,8 +13200,8 @@ function StickyReveal({
 }
 
 // .generated/ui/text/blur-text.tsx
-import { motion as motion159 } from "framer-motion";
-import { jsx as jsx177 } from "react/jsx-runtime";
+import { motion as motion166 } from "framer-motion";
+import { jsx as jsx184 } from "react/jsx-runtime";
 function BlurText({
   text,
   duration = 0.5,
@@ -11231,16 +13230,16 @@ function BlurText({
       }
     }
   };
-  return /* @__PURE__ */ jsx177(
-    motion159.div,
+  return /* @__PURE__ */ jsx184(
+    motion166.div,
     {
       variants: containerVariants,
       initial: "hidden",
       whileInView: "visible",
       viewport: { once: true, margin: "-10%" },
       className: `inline-block ${className}`,
-      children: characters.map((char, index) => /* @__PURE__ */ jsx177(
-        motion159.span,
+      children: characters.map((char, index) => /* @__PURE__ */ jsx184(
+        motion166.span,
         {
           variants: charVariants,
           className: "inline-block whitespace-pre",
@@ -11253,8 +13252,8 @@ function BlurText({
 }
 
 // .generated/ui/text/character-stagger.tsx
-import { motion as motion160 } from "framer-motion";
-import { jsx as jsx178 } from "react/jsx-runtime";
+import { motion as motion167 } from "framer-motion";
+import { jsx as jsx185 } from "react/jsx-runtime";
 function CharacterStagger({
   text,
   duration = 0.4,
@@ -11287,16 +13286,16 @@ function CharacterStagger({
       }
     }
   };
-  return /* @__PURE__ */ jsx178(
-    motion160.div,
+  return /* @__PURE__ */ jsx185(
+    motion167.div,
     {
       variants: containerVariants,
       initial: "hidden",
       whileInView: "visible",
       viewport: { once: true, margin: "-10%" },
       className: `inline-block ${className}`,
-      children: characters.map((char, index) => /* @__PURE__ */ jsx178(
-        motion160.span,
+      children: characters.map((char, index) => /* @__PURE__ */ jsx185(
+        motion167.span,
         {
           variants: charVariants,
           className: "inline-block whitespace-pre",
@@ -11309,8 +13308,8 @@ function CharacterStagger({
 }
 
 // .generated/ui/text/text-reveal.tsx
-import { motion as motion161 } from "framer-motion";
-import { jsx as jsx179 } from "react/jsx-runtime";
+import { motion as motion168 } from "framer-motion";
+import { jsx as jsx186 } from "react/jsx-runtime";
 function TextReveal({
   text,
   duration = 0.8,
@@ -11338,22 +13337,22 @@ function TextReveal({
       }
     }
   };
-  return /* @__PURE__ */ jsx179(
-    motion161.div,
+  return /* @__PURE__ */ jsx186(
+    motion168.div,
     {
       variants: containerVariants,
       initial: "hidden",
       whileInView: "visible",
       viewport: { once: true, margin: "-20%" },
       className: `flex flex-col ${className}`,
-      children: lines.map((line, index) => /* @__PURE__ */ jsx179("div", { className: "overflow-hidden py-1", children: /* @__PURE__ */ jsx179(motion161.span, { variants: itemVariants, className: "block", children: line }) }, index))
+      children: lines.map((line, index) => /* @__PURE__ */ jsx186("div", { className: "overflow-hidden py-1", children: /* @__PURE__ */ jsx186(motion168.span, { variants: itemVariants, className: "block", children: line }) }, index))
     }
   );
 }
 
 // .generated/ui/text/word-reveal.tsx
-import { motion as motion162 } from "framer-motion";
-import { jsx as jsx180 } from "react/jsx-runtime";
+import { motion as motion169 } from "framer-motion";
+import { jsx as jsx187 } from "react/jsx-runtime";
 function WordReveal({
   text,
   duration = 0.5,
@@ -11383,16 +13382,16 @@ function WordReveal({
       }
     }
   };
-  return /* @__PURE__ */ jsx180(
-    motion162.div,
+  return /* @__PURE__ */ jsx187(
+    motion169.div,
     {
       variants: containerVariants,
       initial: "hidden",
       whileInView: "visible",
       viewport: { once: true, margin: "-10%" },
       className: `flex flex-wrap gap-x-2 gap-y-1.5 ${className}`,
-      children: words.map((word, index) => /* @__PURE__ */ jsx180(
-        motion162.span,
+      children: words.map((word, index) => /* @__PURE__ */ jsx187(
+        motion169.span,
         {
           variants: wordVariants,
           className: "inline-block",
@@ -11405,18 +13404,18 @@ function WordReveal({
 }
 
 // .generated/ui/toggles/classic-toggle.tsx
-import { useState as useState31 } from "react";
-import { motion as motion163 } from "framer-motion";
-import { jsx as jsx181 } from "react/jsx-runtime";
+import { useState as useState38 } from "react";
+import { motion as motion170 } from "framer-motion";
+import { jsx as jsx188 } from "react/jsx-runtime";
 var ClassicToggle = () => {
-  const [isOn, setIsOn] = useState31(false);
-  return /* @__PURE__ */ jsx181(
+  const [isOn, setIsOn] = useState38(false);
+  return /* @__PURE__ */ jsx188(
     "button",
     {
       onClick: () => setIsOn(!isOn),
       className: `relative w-16 h-9 rounded-full p-1 transition-colors duration-300 cursor-pointer border-0 ${isOn ? "bg-emerald-500" : "bg-neutral-800"}`,
-      children: /* @__PURE__ */ jsx181(
-        motion163.div,
+      children: /* @__PURE__ */ jsx188(
+        motion170.div,
         {
           animate: { x: isOn ? 28 : 0 },
           transition: { type: "spring", stiffness: 500, damping: 30 },
@@ -11428,17 +13427,17 @@ var ClassicToggle = () => {
 };
 
 // .generated/ui/transitions/page-transition.tsx
-import { useEffect as useEffect20, useRef as useRef20 } from "react";
-import { motion as motion164 } from "framer-motion";
-import { jsx as jsx182, jsxs as jsxs85 } from "react/jsx-runtime";
+import { useEffect as useEffect27, useRef as useRef27 } from "react";
+import { motion as motion171 } from "framer-motion";
+import { jsx as jsx189, jsxs as jsxs92 } from "react/jsx-runtime";
 var PageTransition = ({
   type = "double-stairs",
   isVisible,
   onComplete,
   className = ""
 }) => {
-  const pathRefs = useRef20([]);
-  useEffect20(() => {
+  const pathRefs = useRef27([]);
+  useEffect27(() => {
     if (type !== "liquid-wave" || !isVisible) return;
     let animId;
     const numPoints = 12;
@@ -11491,8 +13490,8 @@ var PageTransition = ({
         transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 }
       })
     };
-    return /* @__PURE__ */ jsx182(
-      motion164.div,
+    return /* @__PURE__ */ jsx189(
+      motion171.div,
       {
         className: `fixed inset-0 z-50 flex h-screen w-screen pointer-events-none ${className}`,
         initial: "initial",
@@ -11500,8 +13499,8 @@ var PageTransition = ({
         onAnimationComplete: () => {
           if (onComplete) onComplete();
         },
-        children: [...Array(COLUMNS)].map((_, i) => /* @__PURE__ */ jsx182(
-          motion164.div,
+        children: [...Array(COLUMNS)].map((_, i) => /* @__PURE__ */ jsx189(
+          motion171.div,
           {
             variants,
             custom: i,
@@ -11513,28 +13512,28 @@ var PageTransition = ({
     );
   }
   if (type === "liquid-wave") {
-    return /* @__PURE__ */ jsxs85(
+    return /* @__PURE__ */ jsxs92(
       "svg",
       {
         className: `fixed inset-0 w-full h-full pointer-events-none z-50 ${className}`,
         viewBox: "0 0 100 100",
         preserveAspectRatio: "none",
         children: [
-          /* @__PURE__ */ jsx182("path", { ref: (el) => {
+          /* @__PURE__ */ jsx189("path", { ref: (el) => {
             pathRefs.current[0] = el;
           }, fill: "#3f3f46", style: { opacity: 0.4 } }),
-          /* @__PURE__ */ jsx182("path", { ref: (el) => {
+          /* @__PURE__ */ jsx189("path", { ref: (el) => {
             pathRefs.current[1] = el;
           }, fill: "#27272a", style: { opacity: 0.75 } }),
-          /* @__PURE__ */ jsx182("path", { ref: (el) => {
+          /* @__PURE__ */ jsx189("path", { ref: (el) => {
             pathRefs.current[2] = el;
           }, fill: "#09090b" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx182(
-    motion164.div,
+  return /* @__PURE__ */ jsx189(
+    motion171.div,
     {
       className: `fixed inset-0 z-50 bg-neutral-900 pointer-events-none ${className}`,
       initial: { opacity: 0 },
@@ -11556,6 +13555,7 @@ export {
   ai_tool_call_default as AIToolCall,
   AccordionLoader,
   AnalyzingImage,
+  AnimatedMegaMenu,
   AnimatedSidebar,
   AnimatedTags,
   AppIconLoad,
@@ -11571,6 +13571,7 @@ export {
   BalanceBarChartCard,
   BarCascade,
   BarSweep,
+  BlurCarousel,
   BlurText,
   BobbingDots,
   BorderTrailLoading,
@@ -11590,9 +13591,11 @@ export {
   ClassicToggle,
   ClockSpinner,
   CometSpinner,
+  CompareSlider,
   ConcentricPulse,
   ConcentricRing,
   ConcentricSquares,
+  ContextMenu,
   ConveyorLoop,
   CrossSpinner,
   CubeFlipSpring,
@@ -11624,7 +13627,9 @@ export {
   FluidDiamond,
   FluidDotOrbit,
   FluidSkeleton,
+  FoldPanel,
   Gears,
+  GestureRangeSlider,
   GlassmorphicCard,
   GlowButton,
   GooeyPopover,
@@ -11688,6 +13693,7 @@ export {
   SmoothRoundedSquare,
   SpinningSquares,
   SpiralSpinner,
+  SplitView,
   Spotlight,
   SpringBars,
   SpringDotMatrix,