@mova-ui/react 0.1.0

package/dist/index.js

@@ -0,0 +1,4032 @@
+"use client";
+"use client";
+
+// .generated/hooks/use-mouse-position.ts
+import { useEffect, useState } from "react";
+function useMousePosition(ref) {
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+    elementX: 0,
+    elementY: 0
+  });
+  useEffect(() => {
+    const handleMouseMove = (event) => {
+      let elementX = 0;
+      let elementY = 0;
+      if (ref && ref.current) {
+        const rect = ref.current.getBoundingClientRect();
+        elementX = event.clientX - rect.left;
+        elementY = event.clientY - rect.top;
+      }
+      setPosition({
+        x: event.clientX,
+        y: event.clientY,
+        elementX,
+        elementY
+      });
+    };
+    window.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [ref]);
+  return position;
+}
+
+// .generated/hooks/use-reduced-motion.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useReducedMotion() {
+  const [shouldReduceMotion, setShouldReduceMotion] = useState2(false);
+  useEffect2(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setShouldReduceMotion(mediaQuery.matches);
+    const handleMediaChange = (event) => {
+      setShouldReduceMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleMediaChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleMediaChange);
+    };
+  }, []);
+  return shouldReduceMotion;
+}
+
+// .generated/hooks/use-scroll-progress.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function useScrollProgress(ref) {
+  const [progress, setProgress] = useState3(0);
+  useEffect3(() => {
+    const handleScroll = () => {
+      if (ref && ref.current) {
+        const element = ref.current;
+        const totalHeight = element.scrollHeight - element.clientHeight;
+        if (totalHeight === 0) {
+          setProgress(0);
+        } else {
+          setProgress(element.scrollTop / totalHeight);
+        }
+      } else {
+        const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+        if (totalHeight === 0) {
+          setProgress(0);
+        } else {
+          setProgress(window.scrollY / totalHeight);
+        }
+      }
+    };
+    const target = ref && ref.current ? ref.current : window;
+    target.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      target.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref]);
+  return progress;
+}
+
+// .generated/hooks/use-stagger.ts
+import { useMemo } from "react";
+function useStagger(count, options = {}) {
+  const { baseDelay = 0, staggerDelay = 0.05, from = "first" } = options;
+  const delays = useMemo(() => {
+    const list = Array.from({ length: count });
+    let centerIndex = 0;
+    if (from === "center") {
+      centerIndex = (count - 1) / 2;
+    } else if (from === "last") {
+      centerIndex = count - 1;
+    } else if (typeof from === "number") {
+      centerIndex = from;
+    }
+    return list.map((_, index) => {
+      let distance = 0;
+      if (from === "first") {
+        distance = index;
+      } else if (from === "last") {
+        distance = count - 1 - index;
+      } else {
+        distance = Math.abs(index - centerIndex);
+      }
+      return baseDelay + distance * staggerDelay;
+    });
+  }, [count, baseDelay, staggerDelay, from]);
+  return delays;
+}
+
+// .generated/hooks/use-web-haptics.ts
+import { useCallback } from "react";
+function useWebHaptics() {
+  const trigger = useCallback((type = "light") => {
+    if (typeof window === "undefined" || !window.navigator || !window.navigator.vibrate) {
+      return false;
+    }
+    try {
+      switch (type) {
+        case "light":
+          return window.navigator.vibrate(10);
+        case "medium":
+          return window.navigator.vibrate(25);
+        case "heavy":
+          return window.navigator.vibrate(50);
+        case "success":
+          return window.navigator.vibrate([15, 60, 15]);
+        case "warning":
+          return window.navigator.vibrate([30, 60, 30]);
+        case "error":
+          return window.navigator.vibrate([60, 60, 60, 60, 60]);
+        default:
+          return window.navigator.vibrate(type);
+      }
+    } catch (e) {
+      console.warn("Vibration API error:", e);
+      return false;
+    }
+  }, []);
+  return { trigger };
+}
+
+// .generated/lib/presets.ts
+var presets = {
+  // Ultra-responsive, crisp snappy feel
+  snappy: {
+    type: "spring",
+    stiffness: 400,
+    damping: 28,
+    mass: 0.8
+  },
+  // Bouncy, playful bounce transition
+  bouncy: {
+    type: "spring",
+    stiffness: 300,
+    damping: 15,
+    mass: 1
+  },
+  // Smooth, elegant default easing transition
+  smooth: {
+    type: "spring",
+    stiffness: 220,
+    damping: 24,
+    mass: 1
+  },
+  // Gentle, low-speed movement
+  gentle: {
+    type: "spring",
+    stiffness: 120,
+    damping: 14,
+    mass: 1
+  },
+  // Stiff, high tension movement
+  stiff: {
+    type: "spring",
+    stiffness: 500,
+    damping: 40,
+    mass: 0.5
+  }
+};
+
+// .generated/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function mapRange(value, inMin, inMax, outMin, outMax) {
+  return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+}
+
+// .generated/ui/cursor/cursor-trail.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { motion, useSpring } from "framer-motion";
+import { Fragment, jsx } from "react/jsx-runtime";
+function CursorTrail({
+  color = "bg-blue-500",
+  size = 8,
+  count = 6
+}) {
+  const [coords, setCoords] = useState4({ x: 0, y: 0 });
+  const [isVisible, setIsVisible] = useState4(false);
+  useEffect4(() => {
+    const handleMouseMove = (e) => {
+      setCoords({ x: e.clientX, y: e.clientY });
+      if (!isVisible) setIsVisible(true);
+    };
+    const handleMouseLeave = () => {
+      setIsVisible(false);
+    };
+    window.addEventListener("mousemove", handleMouseMove, { passive: true });
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [isVisible]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isVisible && Array.from({ length: count }).map((_, index) => {
+    const springConfig = {
+      stiffness: 300 - index * 30,
+      damping: 25 + index * 2,
+      mass: 0.2 + index * 0.1
+    };
+    return /* @__PURE__ */ jsx(
+      TrailDot,
+      {
+        index,
+        coords,
+        springConfig,
+        size,
+        color,
+        count
+      },
+      index
+    );
+  }) });
+}
+function TrailDot({
+  index,
+  coords,
+  springConfig,
+  size,
+  color,
+  count
+}) {
+  const x = useSpring(coords.x, springConfig);
+  const y = useSpring(coords.y, springConfig);
+  useEffect4(() => {
+    x.set(coords.x);
+    y.set(coords.y);
+  }, [coords, x, y]);
+  const dotSize = size * (1 - index / count);
+  const opacity = 1 - index / count;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      style: {
+        x,
+        y,
+        width: dotSize,
+        height: dotSize,
+        translateX: "-50%",
+        translateY: "-50%",
+        opacity
+      },
+      className: `fixed top-0 left-0 rounded-full pointer-events-none z-[9999] ${color}`
+    }
+  );
+}
+
+// .generated/ui/cursor/mouse-follow.tsx
+import { useEffect as useEffect5, useState as useState5 } from "react";
+import { motion as motion2, useSpring as useSpring2 } from "framer-motion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MouseFollow({
+  children,
+  stiffness = 180,
+  damping = 20,
+  className = ""
+}) {
+  const [isVisible, setIsVisible] = useState5(false);
+  const x = useSpring2(0, { stiffness, damping });
+  const y = useSpring2(0, { stiffness, damping });
+  useEffect5(() => {
+    const handleMouseMove = (e) => {
+      x.set(e.clientX);
+      y.set(e.clientY);
+      if (!isVisible) setIsVisible(true);
+    };
+    const handleMouseLeave = () => {
+      setIsVisible(false);
+    };
+    window.addEventListener("mousemove", handleMouseMove, { passive: true });
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [x, y, isVisible]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsx2(
+    motion2.div,
+    {
+      style: {
+        x,
+        y,
+        translateX: "-50%",
+        translateY: "-50%"
+      },
+      className: `fixed top-0 left-0 pointer-events-none z-[9998] ${className}`,
+      children: children || /* @__PURE__ */ jsx2("div", { className: "w-6 h-6 rounded-full border border-blue-500/50 bg-blue-500/10" })
+    }
+  );
+}
+
+// .generated/ui/cursor/spotlight.tsx
+import { useRef, useState as useState6 } from "react";
+import { motion as motion3 } from "framer-motion";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Spotlight({
+  children,
+  className = "",
+  glowColor = "rgba(255, 255, 255, 0.08)",
+  glowSize = 250
+}) {
+  const containerRef = useRef(null);
+  const [coords, setCoords] = useState6({ x: 0, y: 0 });
+  const [opacity, setOpacity] = useState6(0);
+  const handleMouseMove = (e) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setCoords({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      onMouseMove: handleMouseMove,
+      onMouseEnter: () => setOpacity(1),
+      onMouseLeave: () => setOpacity(0),
+      className: `relative overflow-hidden bg-neutral-950 border border-neutral-900 rounded-2xl p-6 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx3(
+          motion3.div,
+          {
+            className: "pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300",
+            style: {
+              opacity,
+              background: `radial-gradient(${glowSize}px circle at ${coords.x}px ${coords.y}px, ${glowColor}, transparent 80%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+
+// .generated/ui/entrance/fade-down.tsx
+import { motion as motion4 } from "framer-motion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function FadeDown({
+  children,
+  duration = 0.6,
+  delay = 0,
+  yOffset = -20,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx4(
+    motion4.div,
+    {
+      initial: { opacity: 0, y: yOffset },
+      animate: { opacity: 1, y: 0 },
+      transition: {
+        duration,
+        delay,
+        ease: [0.16, 1, 0.3, 1]
+        // easeOutExpo
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/entrance/fade-in.tsx
+import { motion as motion5 } from "framer-motion";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function FadeIn({
+  children,
+  duration = 0.5,
+  delay = 0,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx5(
+    motion5.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: {
+        duration,
+        delay,
+        ease: [0.215, 0.61, 0.355, 1]
+        // easeOutCubic
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/entrance/fade-up.tsx
+import { motion as motion6 } from "framer-motion";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function FadeUp({
+  children,
+  duration = 0.6,
+  delay = 0,
+  yOffset = 20,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx6(
+    motion6.div,
+    {
+      initial: { opacity: 0, y: yOffset },
+      animate: { opacity: 1, y: 0 },
+      transition: {
+        duration,
+        delay,
+        ease: [0.16, 1, 0.3, 1]
+        // easeOutExpo
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/entrance/scale-in.tsx
+import { motion as motion7 } from "framer-motion";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ScaleIn({
+  children,
+  duration = 0.5,
+  delay = 0,
+  initialScale = 0.92,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx7(
+    motion7.div,
+    {
+      initial: { opacity: 0, scale: initialScale },
+      animate: { opacity: 1, scale: 1 },
+      transition: {
+        duration,
+        delay,
+        ease: [0.34, 1.56, 0.64, 1]
+        // Custom springy cubic bezier
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/entrance/slide-left.tsx
+import { motion as motion8 } from "framer-motion";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SlideLeft({
+  children,
+  duration = 0.6,
+  delay = 0,
+  xOffset = 40,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx8(
+    motion8.div,
+    {
+      initial: { opacity: 0, x: xOffset },
+      animate: { opacity: 1, x: 0 },
+      transition: {
+        duration,
+        delay,
+        ease: [0.16, 1, 0.3, 1]
+        // easeOutExpo
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/entrance/slide-right.tsx
+import { motion as motion9 } from "framer-motion";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function SlideRight({
+  children,
+  duration = 0.6,
+  delay = 0,
+  xOffset = -40,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx9(
+    motion9.div,
+    {
+      initial: { opacity: 0, x: xOffset },
+      animate: { opacity: 1, x: 0 },
+      transition: {
+        duration,
+        delay,
+        ease: [0.16, 1, 0.3, 1]
+        // easeOutExpo
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/entrance/zoom-in.tsx
+import { motion as motion10 } from "framer-motion";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ZoomIn({
+  children,
+  duration = 0.7,
+  delay = 0,
+  initialScale = 0.85,
+  initialBlur = "12px",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx10(
+    motion10.div,
+    {
+      initial: { opacity: 0, scale: initialScale, filter: `blur(${initialBlur})` },
+      animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+      transition: {
+        duration,
+        delay,
+        ease: [0.16, 1, 0.3, 1]
+        // easeOutExpo
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/hover/card-hover.tsx
+import { useState as useState7 } from "react";
+import { motion as motion11, AnimatePresence } from "framer-motion";
+import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+function CardHover({
+  items,
+  className = "",
+  cardClassName = ""
+}) {
+  const [hoveredIndex, setHoveredIndex] = useState7(null);
+  return /* @__PURE__ */ jsx11("div", { className: `grid grid-cols-1 md:grid-cols-3 gap-4 w-full ${className}`, children: items.map((item, idx) => /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      href: item.link || "#",
+      className: "relative group block p-2 h-full w-full no-underline",
+      onMouseEnter: () => setHoveredIndex(idx),
+      onMouseLeave: () => setHoveredIndex(null),
+      children: [
+        /* @__PURE__ */ jsx11(AnimatePresence, { children: hoveredIndex === idx && /* @__PURE__ */ jsx11(
+          motion11.span,
+          {
+            className: "absolute inset-0 h-full w-full bg-neutral-200 dark:bg-zinc-800/[0.8] block rounded-3xl -z-10",
+            layoutId: "hoverBackground",
+            initial: { opacity: 0 },
+            animate: {
+              opacity: 1,
+              transition: { duration: 0.15 }
+            },
+            exit: {
+              opacity: 0,
+              transition: { duration: 0.15, delay: 0.1 }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: `rounded-2xl h-full w-full p-5 overflow-hidden bg-white dark:bg-black border border-neutral-200 dark:border-zinc-800 group-hover:border-slate-350 dark:group-hover:border-zinc-700 relative z-20 transition-colors duration-200 ${cardClassName}`,
+            children: /* @__PURE__ */ jsxs2("div", { className: "relative z-50", children: [
+              /* @__PURE__ */ jsx11("h4", { className: "text-zinc-900 dark:text-zinc-100 font-bold tracking-wide mt-2", children: item.title }),
+              /* @__PURE__ */ jsx11("p", { className: "mt-2 text-zinc-500 dark:text-zinc-400 tracking-wide leading-relaxed text-sm", children: item.description })
+            ] })
+          }
+        )
+      ]
+    },
+    item.id
+  )) });
+}
+
+// .generated/ui/hover/glow-button.tsx
+import { useRef as useRef2, useState as useState8 } from "react";
+import { motion as motion12 } from "framer-motion";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+function GlowButton({
+  children,
+  className = "",
+  glowColor = "rgba(59, 130, 246, 0.15)",
+  // Light blue default
+  onClick
+}) {
+  const containerRef = useRef2(null);
+  const [coords, setCoords] = useState8({ x: 0, y: 0 });
+  const [opacity, setOpacity] = useState8(0);
+  const handleMouseMove = (e) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setCoords({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+  };
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ref: containerRef,
+      onMouseMove: handleMouseMove,
+      onMouseEnter: () => setOpacity(1),
+      onMouseLeave: () => setOpacity(0),
+      onClick,
+      className: `relative overflow-hidden inline-flex items-center justify-center rounded-xl bg-neutral-900 border border-neutral-800 text-white font-medium text-sm h-11 px-6 shadow-md transition-colors hover:border-neutral-700 cursor-pointer ${className}`,
+      children: [
+        /* @__PURE__ */ jsx12(
+          motion12.div,
+          {
+            className: "pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300",
+            style: {
+              opacity,
+              background: `radial-gradient(120px circle at ${coords.x}px ${coords.y}px, ${glowColor}, transparent 80%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx12("span", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+
+// .generated/ui/hover/magnetic-button.tsx
+import { useRef as useRef3, useState as useState9 } from "react";
+import { motion as motion13, useSpring as useSpring3 } from "framer-motion";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function MagneticButton({
+  children,
+  range = 45,
+  strength = 0.35,
+  className = "",
+  onClick
+}) {
+  const ref = useRef3(null);
+  const [position, setPosition] = useState9({ x: 0, y: 0 });
+  const springConfig = { stiffness: 150, damping: 15, mass: 0.6 };
+  const x = useSpring3(0, springConfig);
+  const y = useSpring3(0, springConfig);
+  const handleMouseMove = (e) => {
+    if (!ref.current) return;
+    const { clientX, clientY } = e;
+    const { left, top, width, height } = ref.current.getBoundingClientRect();
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    const dist = Math.hypot(clientX - centerX, clientY - centerY);
+    if (dist < range) {
+      const targetX = (clientX - centerX) * strength;
+      const targetY = (clientY - centerY) * strength;
+      x.set(targetX);
+      y.set(targetY);
+    } else {
+      x.set(0);
+      y.set(0);
+    }
+  };
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+  return /* @__PURE__ */ jsx13(
+    motion13.button,
+    {
+      ref,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onClick,
+      style: { x, y },
+      className: `relative inline-flex items-center justify-center rounded-full bg-neutral-900 dark:bg-white text-white dark:text-black font-semibold text-sm h-11 px-6 shadow hover:scale-[1.03] transition-all cursor-pointer select-none border-0 ${className}`,
+      children: /* @__PURE__ */ jsx13("span", { className: "relative z-10 block pointer-events-none", children })
+    }
+  );
+}
+
+// .generated/ui/hover/tilt-card.tsx
+import { useRef as useRef4, useState as useState10 } from "react";
+import { motion as motion14, useMotionValue, useSpring as useSpring4, useTransform } from "framer-motion";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function TiltCard({
+  children,
+  maxTilt = 15,
+  className = "",
+  cardClassName = ""
+}) {
+  const cardRef = useRef4(null);
+  const [isHovered, setIsHovered] = useState10(false);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const springConfig = { damping: 20, stiffness: 200, mass: 0.5 };
+  const rotateX = useSpring4(useTransform(y, [-0.5, 0.5], [maxTilt, -maxTilt]), springConfig);
+  const rotateY = useSpring4(useTransform(x, [-0.5, 0.5], [-maxTilt, maxTilt]), springConfig);
+  const handleMouseMove = (event) => {
+    if (!cardRef.current) return;
+    const rect = cardRef.current.getBoundingClientRect();
+    const relativeX = (event.clientX - rect.left) / rect.width - 0.5;
+    const relativeY = (event.clientY - rect.top) / rect.height - 0.5;
+    x.set(relativeX);
+    y.set(relativeY);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    x.set(0);
+    y.set(0);
+  };
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref: cardRef,
+      onMouseMove: handleMouseMove,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: handleMouseLeave,
+      className: `relative w-full aspect-[4/3] max-w-[320px] cursor-pointer ${className}`,
+      style: { perspective: "800px" },
+      children: /* @__PURE__ */ jsx14(
+        motion14.div,
+        {
+          style: {
+            rotateX,
+            rotateY,
+            transformStyle: "preserve-3d"
+          },
+          className: `w-full h-full rounded-2xl bg-gradient-to-br from-neutral-100 to-neutral-250 dark:from-neutral-850 dark:to-neutral-900 border border-neutral-200/20 shadow-lg flex items-center justify-center p-6 select-none ${cardClassName}`,
+          children: /* @__PURE__ */ jsx14("div", { style: { transform: "translateZ(40px)", transformStyle: "preserve-3d" }, className: "w-full h-full flex flex-col justify-center items-center", children })
+        }
+      )
+    }
+  );
+}
+
+// .generated/ui/loading/accordion-loader.tsx
+import { motion as motion15 } from "framer-motion";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var AccordionLoader = () => {
+  return /* @__PURE__ */ jsx15("div", { className: "flex flex-col space-y-1.5 w-10 h-10 justify-center", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx15(
+    motion15.div,
+    {
+      className: "w-full h-1 bg-zinc-800 dark:bg-white rounded-full origin-left",
+      animate: { scaleX: [1, 0.2, 1] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: i * 0.15 }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/app-icon-load.tsx
+import { motion as motion16 } from "framer-motion";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+var AppIconLoad = () => /* @__PURE__ */ jsx16("div", { className: "relative w-12 h-12 bg-zinc-200 dark:bg-zinc-800 rounded-[12px] flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxs4("svg", { className: "w-8 h-8 absolute", viewBox: "0 0 50 50", children: [
+  /* @__PURE__ */ jsx16(
+    "circle",
+    {
+      cx: "25",
+      cy: "25",
+      r: "20",
+      className: "stroke-zinc-300 dark:stroke-zinc-700 fill-none",
+      strokeWidth: "4"
+    }
+  ),
+  /* @__PURE__ */ jsx16(
+    motion16.circle,
+    {
+      cx: "25",
+      cy: "25",
+      r: "20",
+      className: "stroke-zinc-800 dark:stroke-white fill-none",
+      strokeWidth: "4",
+      strokeDasharray: "125",
+      animate: { strokeDashoffset: [125, 0] },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+      style: { rotate: -90, transformOrigin: "center" }
+    }
+  )
+] }) });
+
+// .generated/ui/loading/apple-breathe.tsx
+import { motion as motion17 } from "framer-motion";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var AppleBreathe = () => {
+  return /* @__PURE__ */ jsx17("div", { className: "relative flex items-center justify-center w-12 h-12", children: [0, 60, 120, 180, 240, 300].map((angle, idx) => {
+    const bgClass = idx % 2 === 0 ? "bg-teal-400/35 dark:bg-teal-400/40" : "bg-cyan-400/35 dark:bg-cyan-400/40";
+    return /* @__PURE__ */ jsx17(
+      motion17.div,
+      {
+        className: `absolute w-3.5 h-3.5 rounded-full ${bgClass}`,
+        style: { transformOrigin: "center" },
+        animate: {
+          scale: [1, 1.75, 1],
+          x: [0, Math.cos(angle * Math.PI / 180) * 11, 0],
+          y: [0, Math.sin(angle * Math.PI / 180) * 11, 0]
+        },
+        transition: {
+          duration: 3.6,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }
+      },
+      angle
+    );
+  }) });
+};
+
+// .generated/ui/loading/apple-equalizer.tsx
+import { motion as motion18 } from "framer-motion";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var AppleEqualizer = () => /* @__PURE__ */ jsx18("div", { className: "flex space-x-1 h-8 items-end", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx18(
+  motion18.div,
+  {
+    className: "w-1.5 bg-zinc-800 dark:bg-white rounded-t-sm",
+    animate: { height: ["20%", "100%", "20%"] },
+    transition: { duration: 0.8, repeat: Infinity, delay: Math.random() * 0.5, ease: "circInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/apple-icon-morph.tsx
+import { motion as motion19 } from "framer-motion";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var AppleIconMorph = () => /* @__PURE__ */ jsx19(
+  motion19.div,
+  {
+    className: "w-8 h-8 bg-zinc-800 dark:bg-white",
+    animate: {
+      borderRadius: ["20%", "50%", "50%", "20%"],
+      rotate: [0, 90, 180, 270]
+    },
+    transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+  }
+);
+
+// .generated/ui/loading/apple-pulse-dots.tsx
+import { motion as motion20 } from "framer-motion";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ApplePulseDots = () => /* @__PURE__ */ jsx20("div", { className: "flex space-x-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx20(
+  motion20.div,
+  {
+    className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full",
+    animate: { scale: [0.5, 1, 0.5], opacity: [0.3, 1, 0.3] },
+    transition: { duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/apple-scale-pulse.tsx
+import { motion as motion21 } from "framer-motion";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
+var AppleScalePulse = () => /* @__PURE__ */ jsxs5("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [
+  /* @__PURE__ */ jsx21(
+    motion21.div,
+    {
+      className: "absolute w-full h-full bg-zinc-200 dark:bg-zinc-800 rounded-full",
+      animate: { scale: [0, 1], opacity: [1, 0] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx21(
+    motion21.div,
+    {
+      className: "absolute w-full h-full bg-zinc-200 dark:bg-zinc-800 rounded-full",
+      animate: { scale: [0, 1], opacity: [1, 0] },
+      transition: { duration: 1.5, repeat: Infinity, delay: 0.5, ease: "easeOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx21("div", { className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full z-10" })
+] });
+
+// .generated/ui/loading/apple-sound-wave.tsx
+import { motion as motion22 } from "framer-motion";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var AppleSoundWave = () => /* @__PURE__ */ jsx22("div", { className: "flex space-x-1 h-8 items-center", children: [1, 2, 3, 2, 1].map((val, i) => /* @__PURE__ */ jsx22(
+  motion22.div,
+  {
+    className: "w-1 bg-zinc-800 dark:bg-white rounded-full",
+    animate: { height: [4, val * 8, 4] },
+    transition: { duration: 1, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/apple-text-reveal.tsx
+import { motion as motion23 } from "framer-motion";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var AppleTextReveal = () => /* @__PURE__ */ jsx23("div", { className: "font-medium text-lg text-zinc-900 dark:text-white overflow-hidden h-6 relative", children: /* @__PURE__ */ jsx23(
+  motion23.div,
+  {
+    animate: { y: ["100%", "0%", "-100%"] },
+    transition: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+    children: "Loading"
+  }
+) });
+
+// .generated/ui/loading/apple-unlock.tsx
+import { motion as motion24 } from "framer-motion";
+import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
+var AppleUnlock = ({ theme = "light" }) => {
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs6("div", { className: "relative font-medium text-sm tracking-wide select-none", children: [
+    /* @__PURE__ */ jsx24("span", { className: "text-zinc-400 dark:text-zinc-600", children: "Slide to unlock" }),
+    /* @__PURE__ */ jsx24(
+      motion24.div,
+      {
+        className: "absolute inset-0 text-zinc-950 dark:text-white bg-clip-text text-transparent bg-gradient-to-r from-transparent via-current to-transparent",
+        style: {
+          backgroundSize: "200% 100%"
+        },
+        animate: { backgroundPosition: ["200% 0", "-200% 0"] },
+        transition: { duration: 2.2, repeat: Infinity, ease: "linear" },
+        children: "Slide to unlock"
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/arc-tracer.tsx
+import { motion as motion25 } from "framer-motion";
+import { jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
+var ArcTracer = () => {
+  return /* @__PURE__ */ jsxs7("svg", { className: "w-10 h-10", viewBox: "0 0 50 50", children: [
+    /* @__PURE__ */ jsx25("circle", { cx: "25", cy: "25", r: "20", className: "stroke-zinc-200 dark:stroke-zinc-800 fill-none", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx25(
+      motion25.circle,
+      {
+        cx: "25",
+        cy: "25",
+        r: "20",
+        className: "stroke-zinc-800 dark:stroke-white fill-none",
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeDasharray: "125",
+        animate: { strokeDashoffset: [125, 0, -125] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/bar-cascade.tsx
+import { motion as motion26 } from "framer-motion";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var BarCascade = () => {
+  return /* @__PURE__ */ jsx26("div", { className: "flex space-x-1 items-center h-8", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx26(
+    motion26.div,
+    {
+      className: "w-1.5 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { height: ["8px", "24px", "8px"] },
+      transition: { duration: 1, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/bar-sweep.tsx
+import { motion as motion27 } from "framer-motion";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var BarSweep = () => {
+  return /* @__PURE__ */ jsx27("div", { className: "w-12 h-6 border-2 border-zinc-800 dark:border-zinc-700 rounded-full p-1 relative flex items-center overflow-hidden", children: /* @__PURE__ */ jsx27(
+    motion27.div,
+    {
+      className: "w-4 h-4 bg-zinc-800 dark:bg-white rounded-full absolute",
+      animate: { x: [0, 24, 0] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  ) });
+};
+
+// .generated/ui/loading/bobbing-dots.tsx
+import { motion as motion28 } from "framer-motion";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var BobbingDots = () => {
+  return /* @__PURE__ */ jsx28("div", { className: "flex space-x-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx28(
+    motion28.div,
+    {
+      className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { y: [0, -10, 0] },
+      transition: { duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/bounce-dots.tsx
+import { motion as motion29 } from "framer-motion";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var BounceDots = () => {
+  return /* @__PURE__ */ jsx29("div", { className: "flex space-x-1.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx29(
+    motion29.div,
+    {
+      className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { y: [0, -8, 0] },
+      transition: {
+        duration: 0.6,
+        repeat: Infinity,
+        delay: i * 0.1,
+        ease: "easeInOut"
+      }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/bouncing-bars.tsx
+import { motion as motion30 } from "framer-motion";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var BouncingBars = () => {
+  return /* @__PURE__ */ jsx30("div", { className: "flex space-x-1.5 h-8 items-center", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx30(
+    motion30.div,
+    {
+      className: "w-1.5 h-8 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { scaleY: [0.3, 1, 0.3] },
+      transition: { duration: 1, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/bouncing-dots.tsx
+import { motion as motion31 } from "framer-motion";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var BouncingDots = () => {
+  return /* @__PURE__ */ jsx31("div", { className: "flex space-x-2 h-12 items-end pb-2 border-b-2 border-zinc-200 dark:border-zinc-800 w-16 justify-center relative", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx31(
+    motion31.div,
+    {
+      className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full absolute bottom-2",
+      style: { left: `${i * 14 + 10}px` },
+      animate: { y: [0, -20, 0], scaleY: [0.8, 1.1, 0.8] },
+      transition: { duration: 0.8, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/bouncing-lines.tsx
+import { motion as motion32 } from "framer-motion";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var BouncingLines = () => {
+  return /* @__PURE__ */ jsx32("div", { className: "flex flex-col space-y-1.5 w-8", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx32(
+    motion32.div,
+    {
+      className: "w-full h-1.5 bg-zinc-800 dark:bg-white rounded-full origin-left",
+      animate: { scaleX: [0.3, 1, 0.3] },
+      transition: { duration: 1, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/bouncing-square.tsx
+import { motion as motion33 } from "framer-motion";
+import { jsx as jsx33, jsxs as jsxs8 } from "react/jsx-runtime";
+var BouncingSquare = () => {
+  return /* @__PURE__ */ jsxs8("div", { className: "relative w-10 h-12 flex items-end justify-center", children: [
+    /* @__PURE__ */ jsx33("div", { className: "absolute bottom-0 w-8 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full blur-sm" }),
+    /* @__PURE__ */ jsx33(
+      motion33.div,
+      {
+        className: "w-6 h-6 bg-zinc-800 dark:bg-white rounded-sm origin-bottom",
+        animate: { y: [0, -24, 0], scaleY: [0.8, 1.1, 0.8], scaleX: [1.2, 0.9, 1.2] },
+        transition: { duration: 0.6, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/breathe-ring.tsx
+import { motion as motion34 } from "framer-motion";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var BreatheRing = () => /* @__PURE__ */ jsx34(
+  motion34.div,
+  {
+    className: "w-10 h-10 rounded-full border-4 border-zinc-800 dark:border-zinc-700",
+    animate: { scale: [0.8, 1.1, 0.8], borderWidth: [6, 2, 6] },
+    transition: { duration: 3, repeat: Infinity, ease: "easeInOut" }
+  }
+);
+
+// .generated/ui/loading/breathing-glow.tsx
+import { motion as motion35 } from "framer-motion";
+import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+var BreathingGlow = () => {
+  return /* @__PURE__ */ jsxs9("div", { className: "relative flex items-center justify-center w-12 h-12", children: [
+    /* @__PURE__ */ jsx35(
+      motion35.div,
+      {
+        className: "absolute w-8 h-8 bg-blue-500 rounded-full blur-md",
+        animate: { scale: [1, 1.5, 1], opacity: [0.5, 0.8, 0.5] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx35("div", { className: "relative w-6 h-6 bg-white rounded-full shadow-sm" })
+  ] });
+};
+
+// .generated/ui/loading/breathing-square.tsx
+import { motion as motion36 } from "framer-motion";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var BreathingSquare = () => {
+  return /* @__PURE__ */ jsx36(
+    motion36.div,
+    {
+      className: "w-8 h-8 bg-zinc-800 dark:bg-white",
+      animate: {
+        scale: [1, 1.2, 1],
+        borderRadius: ["0%", "50%", "0%"],
+        rotate: [0, 90, 180]
+      },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  );
+};
+
+// .generated/ui/loading/circular-bars.tsx
+import { motion as motion37 } from "framer-motion";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var CircularBars = () => {
+  return /* @__PURE__ */ jsx37("div", { className: "relative w-10 h-10", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx37(
+    motion37.div,
+    {
+      className: "absolute top-0 left-[18px] w-1 h-3 bg-zinc-800 dark:bg-white rounded-full origin-[2px_20px]",
+      style: { rotate: i * 45 },
+      animate: { scaleY: [0.5, 1.5, 0.5] },
+      transition: { duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/classic-spinner.tsx
+import { motion as motion38 } from "framer-motion";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var ClassicSpinner = () => {
+  return /* @__PURE__ */ jsx38("div", { className: "relative w-8 h-8", children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx38(
+    motion38.div,
+    {
+      className: "absolute top-0 left-[14px] w-[4px] h-[8px] bg-zinc-400 dark:bg-zinc-200 rounded-full origin-[2px_16px]",
+      style: { rotate: i * 30 },
+      animate: { opacity: [1, 0.2] },
+      transition: {
+        duration: 1,
+        repeat: Infinity,
+        ease: "linear",
+        delay: i * (1 / 12)
+      }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/clock-spinner.tsx
+import { motion as motion39 } from "framer-motion";
+import { jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
+var ClockSpinner = () => {
+  return /* @__PURE__ */ jsxs10("div", { className: "relative w-10 h-10 border-2 border-zinc-800 dark:border-zinc-700 rounded-full flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx39(
+      motion39.div,
+      {
+        className: "absolute w-0.5 h-3.5 bg-zinc-800 dark:bg-white rounded-full origin-bottom",
+        style: { bottom: "50%" },
+        animate: { rotate: 360 },
+        transition: { duration: 2, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx39(
+      motion39.div,
+      {
+        className: "absolute w-0.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full origin-bottom",
+        style: { bottom: "50%" },
+        animate: { rotate: 360 },
+        transition: { duration: 12, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/comet-spinner.tsx
+import { motion as motion40 } from "framer-motion";
+import { jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
+var CometSpinner = () => {
+  return /* @__PURE__ */ jsxs11("div", { className: "relative w-10 h-10 border border-zinc-200 dark:border-zinc-800 rounded-full flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx40(
+      motion40.div,
+      {
+        className: "absolute w-full h-full rounded-full",
+        style: {
+          background: "conic-gradient(from 0deg, transparent 0%, rgba(39, 39, 42, 0.1) 60%, rgba(39, 39, 42, 1) 100%)"
+        },
+        animate: { rotate: 360 },
+        transition: { duration: 1, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx40("div", { className: "absolute bg-white w-8 h-8 rounded-full" })
+  ] });
+};
+
+// .generated/ui/loading/concentric-pulse.tsx
+import { motion as motion41 } from "framer-motion";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var ConcentricPulse = () => {
+  return /* @__PURE__ */ jsx41("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx41(
+    motion41.div,
+    {
+      className: "absolute rounded-full border border-zinc-800 dark:border-zinc-700",
+      initial: { width: 0, height: 0, opacity: 1 },
+      animate: { width: 48, height: 48, opacity: 0 },
+      transition: { duration: 2, repeat: Infinity, delay: i * 0.6, ease: "easeOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/concentric-ring.tsx
+import { motion as motion42 } from "framer-motion";
+import { jsx as jsx42, jsxs as jsxs12 } from "react/jsx-runtime";
+var ConcentricRing = () => {
+  return /* @__PURE__ */ jsxs12("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx42(
+      motion42.div,
+      {
+        className: "absolute w-12 h-12 border-2 border-zinc-800 dark:border-zinc-700 border-t-transparent rounded-full",
+        animate: { rotate: 360 },
+        transition: { duration: 2, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx42(
+      motion42.div,
+      {
+        className: "absolute w-8 h-8 border-2 border-zinc-500 border-b-transparent rounded-full",
+        animate: { rotate: -360 },
+        transition: { duration: 1.5, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx42(
+      motion42.div,
+      {
+        className: "absolute w-4 h-4 border-2 border-zinc-300 border-l-transparent rounded-full",
+        animate: { rotate: 360 },
+        transition: { duration: 1, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/concentric-squares.tsx
+import { motion as motion43 } from "framer-motion";
+import { jsx as jsx43, jsxs as jsxs13 } from "react/jsx-runtime";
+var ConcentricSquares = () => {
+  return /* @__PURE__ */ jsxs13("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx43(
+      motion43.div,
+      {
+        className: "absolute w-12 h-12 border-2 border-zinc-800 dark:border-zinc-700 rounded-sm",
+        animate: { rotate: [0, 90, 90], scale: [1, 1, 0.8, 1] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx43(
+      motion43.div,
+      {
+        className: "absolute w-6 h-6 border-2 border-zinc-500 rounded-sm",
+        animate: { rotate: [0, -90, -90], scale: [1, 1, 1.2, 1] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/conveyor-loop.tsx
+import { motion as motion44 } from "framer-motion";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var ConveyorLoop = () => {
+  return /* @__PURE__ */ jsx44("div", { className: "w-16 h-3 overflow-hidden relative rounded-full bg-zinc-200 dark:bg-zinc-800", children: /* @__PURE__ */ jsx44(
+    motion44.div,
+    {
+      className: "flex h-full space-x-2 absolute top-0 items-center",
+      animate: { x: [0, -32] },
+      transition: { duration: 1, repeat: Infinity, ease: "linear" },
+      children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx44("div", { className: "w-1.5 h-1.5 bg-zinc-800 dark:bg-white rounded-full shrink-0" }, i))
+    }
+  ) });
+};
+
+// .generated/ui/loading/cross-spinner.tsx
+import { motion as motion45 } from "framer-motion";
+import { jsx as jsx45, jsxs as jsxs14 } from "react/jsx-runtime";
+var CrossSpinner = () => {
+  return /* @__PURE__ */ jsxs14(
+    motion45.div,
+    {
+      className: "relative w-8 h-8 flex items-center justify-center",
+      animate: { rotate: [0, 90, 180, 270, 360] },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+      children: [
+        /* @__PURE__ */ jsx45("div", { className: "absolute w-full h-1.5 bg-zinc-800 dark:bg-white rounded-full" }),
+        /* @__PURE__ */ jsx45("div", { className: "absolute h-full w-1.5 bg-zinc-800 dark:bg-white rounded-full" })
+      ]
+    }
+  );
+};
+
+// .generated/ui/loading/cube-flip-spring.tsx
+import { motion as motion46 } from "framer-motion";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var CubeFlipSpring = () => /* @__PURE__ */ jsx46(
+  motion46.div,
+  {
+    className: "w-8 h-8 bg-zinc-800 dark:bg-white rounded-lg",
+    animate: { rotateX: [0, 180, 180], rotateY: [0, 0, 180] },
+    transition: { duration: 2, repeat: Infinity, type: "spring", bounce: 0.2 }
+  }
+);
+
+// .generated/ui/loading/dash-ring.tsx
+import { motion as motion47 } from "framer-motion";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var DashRing = () => {
+  return /* @__PURE__ */ jsx47("svg", { className: "w-12 h-12", viewBox: "0 0 50 50", children: /* @__PURE__ */ jsx47(
+    motion47.circle,
+    {
+      cx: "25",
+      cy: "25",
+      r: "20",
+      className: "stroke-zinc-800 dark:stroke-white fill-none",
+      strokeWidth: "3",
+      strokeDasharray: "8 8",
+      animate: { rotate: 360 },
+      style: { transformOrigin: "center" },
+      transition: { duration: 4, repeat: Infinity, ease: "linear" }
+    }
+  ) });
+};
+
+// .generated/ui/loading/dashed-spiral.tsx
+import { motion as motion48 } from "framer-motion";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var DashedSpiral = () => /* @__PURE__ */ jsx48(
+  motion48.div,
+  {
+    className: "w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700 rounded-full border-dashed",
+    animate: { rotate: 360, scale: [1, 1.1, 1] },
+    transition: { duration: 4, repeat: Infinity, ease: "linear" }
+  }
+);
+
+// .generated/ui/loading/diamond-grid.tsx
+import { motion as motion49 } from "framer-motion";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var DiamondGrid = () => {
+  return /* @__PURE__ */ jsx49("div", { className: "grid grid-cols-2 gap-2 rotate-45", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx49(
+    motion49.div,
+    {
+      className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-sm",
+      animate: { scale: [1, 0.5, 1], opacity: [1, 0.3, 1] },
+      transition: { duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/diamond-rotate-spring.tsx
+import { motion as motion50 } from "framer-motion";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var DiamondRotateSpring = () => /* @__PURE__ */ jsx50(
+  motion50.div,
+  {
+    className: "w-8 h-8 bg-zinc-800 dark:bg-white rounded-sm origin-center",
+    style: { rotate: 45 },
+    animate: { rotate: [45, 135, 225, 315] },
+    transition: { duration: 2, repeat: Infinity, type: "spring", bounce: 0.4 }
+  }
+);
+
+// .generated/ui/loading/dot-spinner.tsx
+import { motion as motion51 } from "framer-motion";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var DotSpinner = () => {
+  return /* @__PURE__ */ jsx51("div", { className: "relative w-10 h-10", children: [0, 1, 2, 3, 4, 5, 6, 7].map((i) => /* @__PURE__ */ jsx51(
+    motion51.div,
+    {
+      className: "absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_20px]",
+      style: { rotate: i * 45 },
+      animate: { opacity: [1, 0.2] },
+      transition: { duration: 1, repeat: Infinity, delay: i * 0.125, ease: "linear" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/dots-ring.tsx
+import { motion as motion52 } from "framer-motion";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var DotsRing = () => {
+  return /* @__PURE__ */ jsx52("div", { className: "relative w-12 h-12", children: [0, 1, 2, 3, 4, 5, 6, 7].map((i) => /* @__PURE__ */ jsx52(
+    motion52.div,
+    {
+      className: "absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_24px]",
+      style: { rotate: i * 45 },
+      animate: { scale: [1, 0.5, 1], opacity: [1, 0.3, 1] },
+      transition: { duration: 1.5, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/double-ring.tsx
+import { motion as motion53 } from "framer-motion";
+import { jsx as jsx53, jsxs as jsxs15 } from "react/jsx-runtime";
+var DoubleRing = () => {
+  return /* @__PURE__ */ jsxs15("div", { className: "relative w-10 h-10 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx53(
+      motion53.div,
+      {
+        className: "absolute w-10 h-10 border-2 border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white",
+        animate: { rotate: 360 },
+        transition: { duration: 1.5, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx53(
+      motion53.div,
+      {
+        className: "absolute w-6 h-6 border-2 border-zinc-200 dark:border-zinc-800 rounded-full border-b-zinc-800 dark:border-b-white",
+        animate: { rotate: -360 },
+        transition: { duration: 1, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/drop-dot.tsx
+import { motion as motion54 } from "framer-motion";
+import { jsx as jsx54, jsxs as jsxs16 } from "react/jsx-runtime";
+var DropDot = () => /* @__PURE__ */ jsxs16("div", { className: "relative w-6 h-12 flex flex-col items-center", children: [
+  /* @__PURE__ */ jsx54(
+    motion54.div,
+    {
+      className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full absolute top-0 z-10",
+      animate: { y: [0, 24, 0], scaleY: [1, 1.2, 1], scaleX: [1, 0.8, 1] },
+      transition: { duration: 1, repeat: Infinity, ease: "circIn" }
+    }
+  ),
+  /* @__PURE__ */ jsx54("div", { className: "w-4 h-1 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute bottom-2 blur-[1px]" })
+] });
+
+// .generated/ui/loading/dual-arc.tsx
+import { motion as motion55 } from "framer-motion";
+import { jsx as jsx55 } from "react/jsx-runtime";
+var DualArc = () => {
+  return /* @__PURE__ */ jsx55("div", { className: "relative w-8 h-8 flex items-center justify-center", children: /* @__PURE__ */ jsx55(
+    motion55.div,
+    {
+      className: "absolute inset-0 border-2 border-t-zinc-800 dark:border-t-white border-b-zinc-800 dark:border-b-white border-l-transparent border-r-transparent rounded-full",
+      animate: { rotate: 360, scale: [1, 0.82, 1] },
+      transition: {
+        rotate: { duration: 1.2, repeat: Infinity, ease: "linear" },
+        scale: { duration: 1.2, repeat: Infinity, ease: "easeInOut" }
+      }
+    }
+  ) });
+};
+
+// .generated/ui/loading/dynamic-island.tsx
+import { motion as motion56 } from "framer-motion";
+import { jsx as jsx56, jsxs as jsxs17 } from "react/jsx-runtime";
+var DynamicIsland = () => {
+  return /* @__PURE__ */ jsxs17(
+    motion56.div,
+    {
+      className: "bg-zinc-950 dark:bg-zinc-900 border border-black/10 dark:border-white/10 rounded-full flex items-center justify-center px-4 py-2 gap-3 h-8 shadow-sm",
+      animate: {
+        width: [80, 110, 80]
+      },
+      transition: {
+        duration: 2.2,
+        repeat: Infinity,
+        ease: "easeInOut"
+      },
+      children: [
+        /* @__PURE__ */ jsx56(
+          motion56.div,
+          {
+            className: "w-1.5 h-1.5 rounded-full bg-emerald-500",
+            animate: { opacity: [0.4, 1, 0.4] },
+            transition: { duration: 1.1, repeat: Infinity, ease: "easeInOut" }
+          }
+        ),
+        /* @__PURE__ */ jsx56("div", { className: "flex gap-1 items-center h-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx56(
+          motion56.div,
+          {
+            className: "w-0.5 bg-zinc-300 dark:bg-zinc-500 rounded-full",
+            animate: { height: [3, 8, 3] },
+            transition: {
+              duration: 0.8,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: i * 0.15
+            }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+};
+
+// .generated/ui/loading/elastic-bars.tsx
+import { motion as motion57 } from "framer-motion";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var ElasticBars = () => /* @__PURE__ */ jsx57("div", { className: "flex space-x-2 h-10 items-center justify-center", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx57(
+  motion57.div,
+  {
+    className: "w-2 bg-zinc-800 dark:bg-white rounded-full",
+    animate: { height: [8, 36, 8] },
+    transition: {
+      duration: 1.1,
+      repeat: Infinity,
+      ease: "easeInOut",
+      delay: i * 0.15
+    }
+  },
+  i
+)) });
+
+// .generated/ui/loading/elastic-square.tsx
+import { motion as motion58 } from "framer-motion";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var ElasticSquare = () => /* @__PURE__ */ jsx58("div", { className: "h-12 flex items-end border-b-2 border-zinc-200 dark:border-zinc-800 w-12 justify-center", children: /* @__PURE__ */ jsx58(
+  motion58.div,
+  {
+    className: "w-6 h-6 bg-zinc-800 dark:bg-white rounded-sm origin-bottom",
+    animate: { y: [0, -20, 0], scaleY: [0.7, 1.2, 0.7], scaleX: [1.3, 0.8, 1.3] },
+    transition: { duration: 0.8, repeat: Infinity, ease: "easeInOut" }
+  }
+) });
+
+// .generated/ui/loading/expanding-cross.tsx
+import { motion as motion59 } from "framer-motion";
+import { jsx as jsx59, jsxs as jsxs18 } from "react/jsx-runtime";
+var ExpandingCross = () => {
+  return /* @__PURE__ */ jsxs18("div", { className: "relative w-8 h-8", children: [
+    /* @__PURE__ */ jsx59(
+      motion59.div,
+      {
+        className: "absolute top-1/2 left-0 w-full h-1 bg-zinc-800 dark:bg-white -mt-0.5 rounded-full",
+        animate: { scaleX: [0.2, 1, 0.2] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx59(
+      motion59.div,
+      {
+        className: "absolute left-1/2 top-0 h-full w-1 bg-zinc-800 dark:bg-white -ml-0.5 rounded-full",
+        animate: { scaleY: [0.2, 1, 0.2] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.75 }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/face-id-scan.tsx
+import { motion as motion60 } from "framer-motion";
+import { jsx as jsx60, jsxs as jsxs19 } from "react/jsx-runtime";
+var FaceIDScan = () => /* @__PURE__ */ jsxs19("div", { className: "w-12 h-12 border-2 border-zinc-300 rounded-xl relative overflow-hidden flex items-center justify-center", children: [
+  /* @__PURE__ */ jsx60("svg", { viewBox: "0 0 24 24", className: "w-6 h-6 fill-zinc-300 dark:fill-zinc-700", children: /* @__PURE__ */ jsx60("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }) }),
+  /* @__PURE__ */ jsx60(
+    motion60.div,
+    {
+      className: "absolute left-0 w-full h-8 bg-gradient-to-b from-transparent to-green-400/30 border-b border-green-500",
+      animate: { top: ["-100%", "100%", "-100%"] },
+      transition: { duration: 2.5, repeat: Infinity, ease: "linear" }
+    }
+  )
+] });
+
+// .generated/ui/loading/fade-arc.tsx
+import { jsx as jsx61, jsxs as jsxs20 } from "react/jsx-runtime";
+var FadeArc = () => {
+  return /* @__PURE__ */ jsx61("div", { className: "relative w-9 h-9", children: /* @__PURE__ */ jsxs20("svg", { className: "w-full h-full animate-spin", viewBox: "0 0 50 50", children: [
+    /* @__PURE__ */ jsx61(
+      "circle",
+      {
+        className: "stroke-zinc-200 dark:stroke-zinc-800",
+        cx: "25",
+        cy: "25",
+        r: "20",
+        fill: "none",
+        strokeWidth: "3.5"
+      }
+    ),
+    /* @__PURE__ */ jsx61(
+      "circle",
+      {
+        className: "stroke-zinc-800 dark:stroke-white",
+        cx: "25",
+        cy: "25",
+        r: "20",
+        fill: "none",
+        strokeWidth: "3.5",
+        strokeDasharray: "80",
+        strokeDashoffset: "28",
+        strokeLinecap: "round"
+      }
+    )
+  ] }) });
+};
+
+// .generated/ui/loading/fade-dots.tsx
+import { motion as motion61 } from "framer-motion";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var FadeDots = () => {
+  return /* @__PURE__ */ jsx62("div", { className: "flex space-x-2", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx62(
+    motion61.div,
+    {
+      className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { opacity: [0, 1, 0] },
+      transition: { duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: "linear" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/flip-square.tsx
+import { motion as motion62 } from "framer-motion";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var FlipSquare = () => {
+  return /* @__PURE__ */ jsx63(
+    motion62.div,
+    {
+      className: "w-8 h-8 bg-zinc-800 dark:bg-white rounded-md shadow-sm",
+      animate: { rotateX: [0, 180, 180, 0], rotateY: [0, 0, 180, 180] },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  );
+};
+
+// .generated/ui/loading/floating-diamonds.tsx
+import { motion as motion63 } from "framer-motion";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var FloatingDiamonds = () => {
+  return /* @__PURE__ */ jsx64("div", { className: "flex space-x-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx64(
+    motion63.div,
+    {
+      className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-sm rotate-45",
+      animate: { y: [0, -10, 0] },
+      transition: { duration: 1, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/fluid-bars.tsx
+import { motion as motion64 } from "framer-motion";
+import { jsx as jsx65 } from "react/jsx-runtime";
+var FluidBars = () => /* @__PURE__ */ jsx65("div", { className: "flex space-x-1", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx65(
+  motion64.div,
+  {
+    className: "w-1.5 h-8 bg-zinc-800 dark:bg-white rounded-full origin-bottom",
+    animate: { rotate: [-15, 15, -15], scaleY: [0.8, 1, 0.8] },
+    transition: { duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/fluid-diamond.tsx
+import { motion as motion65 } from "framer-motion";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var FluidDiamond = () => /* @__PURE__ */ jsx66(
+  motion65.div,
+  {
+    className: "w-6 h-6 bg-zinc-800 dark:bg-white rounded-sm",
+    style: { rotate: 45 },
+    animate: { scaleX: [1, 1.5, 1], scaleY: [1, 0.5, 1] },
+    transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+  }
+);
+
+// .generated/ui/loading/fluid-dot-orbit.tsx
+import { motion as motion66 } from "framer-motion";
+import { jsx as jsx67, jsxs as jsxs21 } from "react/jsx-runtime";
+var FluidDotOrbit = () => /* @__PURE__ */ jsxs21("div", { className: "relative w-10 h-10 flex items-center justify-center", children: [
+  /* @__PURE__ */ jsx67("div", { className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full" }),
+  /* @__PURE__ */ jsx67(
+    motion66.div,
+    {
+      className: "absolute inset-0",
+      animate: { rotate: 360 },
+      transition: { duration: 2, repeat: Infinity, ease: "linear" },
+      children: /* @__PURE__ */ jsx67("div", { className: "w-2 h-2 bg-zinc-500 dark:bg-zinc-350 rounded-full absolute top-1 left-1/2 -ml-1" })
+    }
+  )
+] });
+
+// .generated/ui/loading/fluid-skeleton.tsx
+import { motion as motion67 } from "framer-motion";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var FluidSkeleton = () => /* @__PURE__ */ jsx68("div", { className: "w-24 h-10 bg-zinc-200 dark:bg-zinc-800 rounded-xl overflow-hidden relative", children: /* @__PURE__ */ jsx68(
+  motion67.div,
+  {
+    className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent",
+    animate: { x: ["-100%", "200%"] },
+    transition: { duration: 1.5, repeat: Infinity, ease: "linear" }
+  }
+) });
+
+// .generated/ui/loading/gears.tsx
+import { motion as motion68 } from "framer-motion";
+import { jsx as jsx69, jsxs as jsxs22 } from "react/jsx-runtime";
+var Gears = () => {
+  return /* @__PURE__ */ jsxs22("div", { className: "flex space-x-[-4px]", children: [
+    /* @__PURE__ */ jsx69(
+      motion68.div,
+      {
+        className: "w-8 h-8 border-4 border-dashed border-zinc-800 dark:border-zinc-700 rounded-full",
+        animate: { rotate: 360 },
+        transition: { duration: 4, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx69(
+      motion68.div,
+      {
+        className: "w-6 h-6 border-[3px] border-dashed border-zinc-500 rounded-full mt-3",
+        animate: { rotate: -360 },
+        transition: { duration: 3, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/glassmorphic-card.tsx
+import { motion as motion69 } from "framer-motion";
+import { jsx as jsx70, jsxs as jsxs23 } from "react/jsx-runtime";
+var GlassmorphicCard = () => /* @__PURE__ */ jsxs23("div", { className: "w-20 h-16 bg-zinc-100 dark:bg-zinc-800/50 backdrop-blur-md border border-white/50 rounded-2xl shadow-sm flex items-center justify-center relative overflow-hidden", children: [
+  /* @__PURE__ */ jsx70(
+    motion69.div,
+    {
+      className: "absolute w-12 h-12 bg-zinc-300 dark:bg-zinc-700 rounded-full blur-xl -z-10",
+      animate: { x: [-20, 20, -20], y: [-10, 10, -10] },
+      transition: { duration: 3, repeat: Infinity, ease: "easeInOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx70("div", { className: "w-5 h-5 border-2 border-zinc-800 dark:border-zinc-700 border-t-transparent rounded-full animate-spin" })
+] });
+
+// .generated/ui/loading/gradient-arc.tsx
+import { motion as motion70 } from "framer-motion";
+import { jsx as jsx71 } from "react/jsx-runtime";
+var GradientArc = () => {
+  return /* @__PURE__ */ jsx71("div", { className: "relative w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx71(
+    motion70.div,
+    {
+      className: "w-10 h-10 rounded-full",
+      style: {
+        background: "linear-gradient(135deg, #00f2fe 0%, #4facfe 100%)",
+        maskImage: "radial-gradient(transparent 55%, black 60%)",
+        WebkitMaskImage: "radial-gradient(transparent 55%, black 60%)"
+      },
+      animate: { rotate: 360 },
+      transition: { duration: 1.2, repeat: Infinity, ease: "linear" }
+    }
+  ) });
+};
+
+// .generated/ui/loading/grid-dots.tsx
+import { motion as motion71 } from "framer-motion";
+import { jsx as jsx72 } from "react/jsx-runtime";
+var GridDots = () => {
+  return /* @__PURE__ */ jsx72("div", { className: "grid grid-cols-3 gap-1.5", children: [0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => /* @__PURE__ */ jsx72(
+    motion71.div,
+    {
+      className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { scale: [1, 0.5, 1], opacity: [1, 0.3, 1] },
+      transition: { duration: 1.5, repeat: Infinity, delay: i % 3 * 0.2 + Math.floor(i / 3) * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/haptic-ring.tsx
+import { motion as motion72 } from "framer-motion";
+import { jsx as jsx73 } from "react/jsx-runtime";
+var HapticRing = () => /* @__PURE__ */ jsx73(
+  motion72.div,
+  {
+    className: "w-10 h-10 border-[3px] border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white",
+    animate: { rotate: [0, 90, 180, 270, 360] },
+    transition: { duration: 2, repeat: Infinity, type: "spring", bounce: 0.4 }
+  }
+);
+
+// .generated/ui/loading/heartbeat.tsx
+import { motion as motion73 } from "framer-motion";
+import { jsx as jsx74 } from "react/jsx-runtime";
+var Heartbeat = () => {
+  return /* @__PURE__ */ jsx74("svg", { className: "w-16 h-8 overflow-visible", viewBox: "0 0 64 32", children: /* @__PURE__ */ jsx74(
+    motion73.polyline,
+    {
+      points: "0,16 16,16 24,4 32,28 40,16 64,16",
+      className: "stroke-zinc-800 dark:stroke-white fill-none",
+      strokeWidth: "2",
+      strokeLinejoin: "round",
+      strokeLinecap: "round",
+      strokeDasharray: "100",
+      animate: { strokeDashoffset: [100, -100] },
+      transition: { duration: 2, repeat: Infinity, ease: "linear" }
+    }
+  ) });
+};
+
+// .generated/ui/loading/hexagon-spinner.tsx
+import { motion as motion74 } from "framer-motion";
+import { jsx as jsx75, jsxs as jsxs24 } from "react/jsx-runtime";
+var HexagonSpinner = () => {
+  return /* @__PURE__ */ jsxs24("svg", { className: "w-10 h-10", viewBox: "0 0 50 50", children: [
+    /* @__PURE__ */ jsx75("polygon", { points: "25,5 45,15 45,35 25,45 5,35 5,15", className: "stroke-zinc-200 dark:stroke-zinc-800 fill-none", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx75(
+      motion74.polygon,
+      {
+        points: "25,5 45,15 45,35 25,45 5,35 5,15",
+        className: "stroke-zinc-800 dark:stroke-white fill-none",
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeDasharray: "120",
+        animate: { strokeDashoffset: [120, -120] },
+        transition: { duration: 2, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/hourglass.tsx
+import { motion as motion75 } from "framer-motion";
+import { jsx as jsx76, jsxs as jsxs25 } from "react/jsx-runtime";
+var Hourglass = () => {
+  return /* @__PURE__ */ jsxs25(
+    motion75.div,
+    {
+      className: "w-8 h-10 flex flex-col items-center justify-between",
+      animate: { rotate: [0, 180, 180, 360, 360] },
+      transition: { duration: 3, repeat: Infinity, ease: "easeInOut" },
+      children: [
+        /* @__PURE__ */ jsx76("div", { className: "w-8 h-0 border-t-[16px] border-t-zinc-800 dark:border-t-white border-l-[16px] border-l-transparent border-r-[16px] border-r-transparent origin-bottom" }),
+        /* @__PURE__ */ jsx76("div", { className: "w-8 h-0 border-b-[16px] border-b-zinc-800 dark:border-b-white border-l-[16px] border-l-transparent border-r-[16px] border-r-transparent origin-top" })
+      ]
+    }
+  );
+};
+
+// .generated/ui/loading/infinity-path.tsx
+import { motion as motion76 } from "framer-motion";
+import { jsx as jsx77, jsxs as jsxs26 } from "react/jsx-runtime";
+var InfinityPath = () => {
+  return /* @__PURE__ */ jsxs26("svg", { className: "w-12 h-6 overflow-visible", viewBox: "0 0 60 30", children: [
+    /* @__PURE__ */ jsx77(
+      "path",
+      {
+        d: "M 15 15 C 15 5, 25 5, 30 15 C 35 25, 45 25, 45 15 C 45 5, 35 5, 30 15 C 25 25, 15 25, 15 15",
+        className: "stroke-zinc-200 dark:stroke-zinc-800 fill-none",
+        strokeWidth: "4",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx77(
+      motion76.path,
+      {
+        d: "M 15 15 C 15 5, 25 5, 30 15 C 35 25, 45 25, 45 15 C 45 5, 35 5, 30 15 C 25 25, 15 25, 15 15",
+        className: "stroke-zinc-800 dark:stroke-white fill-none",
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeDasharray: "100",
+        animate: { strokeDashoffset: [100, -100] },
+        transition: { duration: 2, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/intersecting-rings.tsx
+import { motion as motion77 } from "framer-motion";
+import { jsx as jsx78, jsxs as jsxs27 } from "react/jsx-runtime";
+var IntersectingRings = () => {
+  return /* @__PURE__ */ jsxs27("div", { className: "relative w-12 h-12 flex items-center justify-center [perspective:800px]", children: [
+    /* @__PURE__ */ jsx78(
+      motion77.div,
+      {
+        className: "absolute w-10 h-10 border-2 border-t-zinc-800 dark:border-t-white border-r-zinc-800/30 dark:border-r-white/30 border-b-zinc-800/10 dark:border-b-white/10 border-l-transparent rounded-full",
+        style: { transformStyle: "preserve-3d" },
+        animate: { rotateX: 360, rotateY: 180 },
+        transition: { duration: 2.2, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx78(
+      motion77.div,
+      {
+        className: "absolute w-10 h-10 border-2 border-b-zinc-800 dark:border-b-white border-t-zinc-800/30 dark:border-t-white/30 border-l-zinc-800/10 dark:border-l-white/10 border-r-transparent rounded-full",
+        style: { transformStyle: "preserve-3d" },
+        animate: { rotateX: 180, rotateY: 360 },
+        transition: { duration: 2.2, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/ios-spinner.tsx
+import { motion as motion78 } from "framer-motion";
+import { jsx as jsx79 } from "react/jsx-runtime";
+var IOSSpinner = () => /* @__PURE__ */ jsx79("div", { className: "relative w-8 h-8", children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx79(
+  motion78.div,
+  {
+    className: "absolute w-full h-full",
+    style: { rotate: i * 30 },
+    children: /* @__PURE__ */ jsx79(
+      motion78.div,
+      {
+        className: "w-[2px] h-[7px] bg-zinc-800 dark:bg-white rounded-full mx-auto",
+        animate: { opacity: [1, 0.2] },
+        transition: { duration: 1, repeat: Infinity, delay: i * (1 / 12), ease: "linear" }
+      }
+    )
+  },
+  i
+)) });
+
+// .generated/ui/loading/line-spinner.tsx
+import { motion as motion79 } from "framer-motion";
+import { jsx as jsx80, jsxs as jsxs28 } from "react/jsx-runtime";
+var LineSpinner = () => {
+  return /* @__PURE__ */ jsxs28("div", { className: "relative w-10 h-10 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx80("div", { className: "w-10 h-10 border-2 border-zinc-200 dark:border-zinc-800 rounded-full absolute" }),
+    /* @__PURE__ */ jsx80(
+      motion79.div,
+      {
+        className: "w-8 h-1 bg-zinc-800 dark:bg-white rounded-full",
+        animate: { rotate: 360 },
+        transition: { duration: 1.2, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/liquid-dots.tsx
+import { motion as motion80 } from "framer-motion";
+import { jsx as jsx81, jsxs as jsxs29 } from "react/jsx-runtime";
+var LiquidDots = () => {
+  return /* @__PURE__ */ jsxs29("div", { className: "relative w-16 h-8 flex items-center justify-center", style: { filter: "url(#goo)" }, children: [
+    /* @__PURE__ */ jsx81("svg", { className: "absolute w-0 h-0", children: /* @__PURE__ */ jsx81("defs", { children: /* @__PURE__ */ jsxs29("filter", { id: "goo", children: [
+      /* @__PURE__ */ jsx81("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+      /* @__PURE__ */ jsx81("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }),
+      /* @__PURE__ */ jsx81("feBlend", { in: "SourceGraphic", in2: "goo" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx81(
+      motion80.div,
+      {
+        className: "absolute w-6 h-6 bg-zinc-800 dark:bg-white rounded-full",
+        animate: { x: [-16, 16, -16] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx81(
+      motion80.div,
+      {
+        className: "absolute w-6 h-6 bg-zinc-800 dark:bg-white rounded-full",
+        animate: { x: [16, -16, 16] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/mac-terminal.tsx
+import { motion as motion81 } from "framer-motion";
+import { jsx as jsx82, jsxs as jsxs30 } from "react/jsx-runtime";
+var MacTerminal = () => /* @__PURE__ */ jsxs30("div", { className: "flex items-center text-zinc-900 dark:text-white font-mono text-sm", children: [
+  /* @__PURE__ */ jsx82("span", { children: "~ %" }),
+  /* @__PURE__ */ jsx82(
+    motion81.span,
+    {
+      className: "ml-1.5 w-2 h-4 bg-zinc-900 dark:bg-white inline-block",
+      animate: { opacity: [1, 0, 1] },
+      transition: { duration: 1, repeat: Infinity, ease: "linear" }
+    }
+  )
+] });
+
+// .generated/ui/loading/magnetic-dots.tsx
+import { motion as motion82 } from "framer-motion";
+import { jsx as jsx83, jsxs as jsxs31 } from "react/jsx-runtime";
+var MagneticDots = () => /* @__PURE__ */ jsxs31("div", { className: "flex space-x-1.5", style: { filter: "url(#goo)" }, children: [
+  /* @__PURE__ */ jsx83("svg", { width: "0", height: "0", className: "absolute hidden", children: /* @__PURE__ */ jsx83("defs", { children: /* @__PURE__ */ jsxs31("filter", { id: "goo", children: [
+    /* @__PURE__ */ jsx83("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "2", result: "blur" }),
+    /* @__PURE__ */ jsx83("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 15 -7", result: "goo" }),
+    /* @__PURE__ */ jsx83("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
+  ] }) }) }),
+  /* @__PURE__ */ jsx83(
+    motion82.div,
+    {
+      className: "w-4 h-4 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { x: [0, 8, 0] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx83(
+    motion82.div,
+    {
+      className: "w-4 h-4 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { x: [0, -8, 0] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  )
+] });
+
+// .generated/ui/loading/minimal-triangle.tsx
+import { motion as motion83 } from "framer-motion";
+import { jsx as jsx84, jsxs as jsxs32 } from "react/jsx-runtime";
+var MinimalTriangle = () => /* @__PURE__ */ jsxs32("svg", { className: "w-10 h-10 overflow-visible", viewBox: "0 0 50 50", children: [
+  /* @__PURE__ */ jsx84("polygon", { points: "25,5 45,40 5,40", className: "stroke-zinc-200 dark:stroke-zinc-800 fill-none", strokeWidth: "3" }),
+  /* @__PURE__ */ jsx84(
+    motion83.polygon,
+    {
+      points: "25,5 45,40 5,40",
+      className: "stroke-zinc-800 dark:stroke-white fill-none",
+      strokeWidth: "3",
+      strokeDasharray: "120",
+      animate: { strokeDashoffset: [120, 0, -120] },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  )
+] });
+
+// .generated/ui/loading/morph-dot-ring.tsx
+import { motion as motion84 } from "framer-motion";
+import { jsx as jsx85 } from "react/jsx-runtime";
+var MorphDotRing = () => /* @__PURE__ */ jsx85(
+  motion84.div,
+  {
+    className: "grid grid-cols-2 gap-1 w-6 h-6",
+    animate: { rotate: 180, gap: ["4px", "0px", "4px"] },
+    transition: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+    children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx85("div", { className: "w-full h-full bg-zinc-800 dark:bg-white rounded-full" }, i))
+  }
+);
+
+// .generated/ui/loading/morph-loader.tsx
+import { motion as motion85 } from "framer-motion";
+import { jsx as jsx86 } from "react/jsx-runtime";
+function MorphLoader({
+  size = 40,
+  color = "bg-blue-500",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx86("div", { className: `relative flex items-center justify-center ${className}`, style: { width: size, height: size }, children: /* @__PURE__ */ jsx86(
+    motion85.div,
+    {
+      animate: {
+        borderRadius: ["25%", "50%", "50%", "25%", "25%"],
+        rotate: [0, 90, 180, 270, 360],
+        scale: [1, 0.8, 1.1, 0.8, 1]
+      },
+      transition: {
+        duration: 2.2,
+        ease: "easeInOut",
+        repeat: Infinity
+      },
+      style: { width: size, height: size },
+      className: `rounded-2xl ${color} shadow-lg`
+    }
+  ) });
+}
+
+// .generated/ui/loading/morphing-bars.tsx
+import { motion as motion86 } from "framer-motion";
+import { jsx as jsx87 } from "react/jsx-runtime";
+var MorphingBars = () => /* @__PURE__ */ jsx87(
+  motion86.div,
+  {
+    className: "flex space-x-1 h-8 items-center",
+    animate: { gap: ["4px", "0px", "4px"] },
+    transition: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+    children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx87(
+      motion86.div,
+      {
+        className: "w-2 h-8 bg-zinc-800 dark:bg-white rounded-sm",
+        animate: { height: [32, 16, 32] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      },
+      i
+    ))
+  }
+);
+
+// .generated/ui/loading/morphing-infinity.tsx
+import { motion as motion87 } from "framer-motion";
+import { jsx as jsx88, jsxs as jsxs33 } from "react/jsx-runtime";
+var MorphingInfinity = () => {
+  return /* @__PURE__ */ jsxs33("div", { className: "w-12 h-6 flex justify-between items-center relative", children: [
+    /* @__PURE__ */ jsx88(
+      motion87.div,
+      {
+        className: "w-6 h-6 border-2 border-zinc-800 dark:border-zinc-700 rounded-full",
+        animate: { x: [0, 24, 0], scale: [1, 0.5, 1] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx88(
+      motion87.div,
+      {
+        className: "w-6 h-6 border-2 border-zinc-800 dark:border-zinc-700 rounded-full absolute top-0 left-0",
+        animate: { x: [24, 0, 24], scale: [0.5, 1, 0.5] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/morphing-ring.tsx
+import { motion as motion88 } from "framer-motion";
+import { jsx as jsx89 } from "react/jsx-runtime";
+var MorphingRing = () => /* @__PURE__ */ jsx89(
+  motion88.div,
+  {
+    className: "w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700",
+    animate: {
+      rotate: 180,
+      borderRadius: ["10%", "50%", "10%"]
+    },
+    transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+  }
+);
+
+// .generated/ui/loading/morphing-shape.tsx
+import { motion as motion89 } from "framer-motion";
+import { jsx as jsx90 } from "react/jsx-runtime";
+var MorphingShape = () => {
+  return /* @__PURE__ */ jsx90(
+    motion89.div,
+    {
+      className: "w-10 h-10 bg-zinc-800 dark:bg-white shadow-sm",
+      animate: {
+        borderRadius: ["10%", "50%", "10%"],
+        rotate: [0, 90, 180],
+        scale: [1, 0.8, 1]
+      },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  );
+};
+
+// .generated/ui/loading/newtons-cradle.tsx
+import { motion as motion90 } from "framer-motion";
+import { jsx as jsx91, jsxs as jsxs34 } from "react/jsx-runtime";
+var NewtonsCradle = () => {
+  return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-center space-x-0.5", children: [
+    /* @__PURE__ */ jsx91(
+      motion90.div,
+      {
+        className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full origin-top",
+        animate: { rotate: [25, 0, 0, 0, 0, 25] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx91("div", { className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full" }),
+    /* @__PURE__ */ jsx91("div", { className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full" }),
+    /* @__PURE__ */ jsx91(
+      motion90.div,
+      {
+        className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full origin-top",
+        animate: { rotate: [0, 0, 0, -25, 0, 0] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/offset-rings.tsx
+import { motion as motion91 } from "framer-motion";
+import { jsx as jsx92, jsxs as jsxs35 } from "react/jsx-runtime";
+var OffsetRings = () => /* @__PURE__ */ jsxs35("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [
+  /* @__PURE__ */ jsx92(
+    motion91.div,
+    {
+      className: "absolute w-12 h-12 border-2 border-zinc-800 dark:border-zinc-700 border-x-transparent rounded-full",
+      animate: { rotate: [0, 180, 360] },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx92(
+    motion91.div,
+    {
+      className: "absolute w-8 h-8 border-2 border-zinc-500 border-y-transparent rounded-full",
+      animate: { rotate: [0, -180, -360] },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut", delay: 0.2 }
+    }
+  )
+] });
+
+// .generated/ui/loading/orbiting-circles.tsx
+import { motion as motion92 } from "framer-motion";
+import { jsx as jsx93, jsxs as jsxs36 } from "react/jsx-runtime";
+var OrbitingCircles = () => {
+  return /* @__PURE__ */ jsxs36("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx93("div", { className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full" }),
+    [0, 1].map((i) => /* @__PURE__ */ jsx93(
+      motion92.div,
+      {
+        className: "absolute w-full h-full",
+        animate: { rotate: i === 0 ? 360 : -360 },
+        transition: { duration: 2, repeat: Infinity, ease: "linear" },
+        children: /* @__PURE__ */ jsx93("div", { className: "absolute top-0 left-1/2 -ml-1 w-2 h-2 bg-zinc-500 dark:bg-zinc-350 rounded-full" })
+      },
+      i
+    ))
+  ] });
+};
+
+// .generated/ui/loading/orbiting-dot.tsx
+import { motion as motion93 } from "framer-motion";
+import { jsx as jsx94, jsxs as jsxs37 } from "react/jsx-runtime";
+var OrbitingDot = () => {
+  return /* @__PURE__ */ jsxs37("div", { className: "relative w-10 h-10 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx94("div", { className: "w-2 h-2 bg-zinc-300 dark:bg-zinc-700 rounded-full" }),
+    /* @__PURE__ */ jsx94(
+      motion93.div,
+      {
+        className: "absolute w-full h-full border border-zinc-200 dark:border-zinc-800 rounded-full",
+        animate: { rotate: 360 },
+        transition: { duration: 2, repeat: Infinity, ease: "linear" },
+        children: /* @__PURE__ */ jsx94("div", { className: "absolute top-0 left-1/2 -ml-1.5 -mt-1.5 w-3 h-3 bg-zinc-800 dark:bg-white rounded-full shadow-sm" })
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/origami-shape.tsx
+import { motion as motion94 } from "framer-motion";
+import { jsx as jsx95, jsxs as jsxs38 } from "react/jsx-runtime";
+var OrigamiShape = () => /* @__PURE__ */ jsxs38("div", { className: "relative w-10 h-10", children: [
+  /* @__PURE__ */ jsx95(
+    motion94.div,
+    {
+      className: "absolute top-0 left-0 w-5 h-5 bg-zinc-800 dark:bg-white rounded-tl-md",
+      animate: { rotateY: [0, 180, 0] },
+      style: { transformOrigin: "right" },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx95(
+    motion94.div,
+    {
+      className: "absolute bottom-0 right-0 w-5 h-5 bg-zinc-500 dark:bg-zinc-350 rounded-br-md",
+      animate: { rotateY: [0, 180, 0] },
+      style: { transformOrigin: "left" },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  )
+] });
+
+// .generated/ui/loading/pendulum.tsx
+import { motion as motion95 } from "framer-motion";
+import { jsx as jsx96, jsxs as jsxs39 } from "react/jsx-runtime";
+var Pendulum = () => {
+  return /* @__PURE__ */ jsxs39("div", { className: "relative w-16 h-12 flex items-start justify-center", children: [
+    /* @__PURE__ */ jsx96("div", { className: "w-full h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full rounded-b-none absolute top-0" }),
+    /* @__PURE__ */ jsxs39(
+      motion95.div,
+      {
+        className: "absolute top-0 w-1 bg-zinc-800 dark:bg-white origin-top flex flex-col items-center",
+        animate: { rotate: [-45, 45, -45] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" },
+        children: [
+          /* @__PURE__ */ jsx96("div", { className: "w-1 h-8 bg-zinc-800 dark:bg-white" }),
+          /* @__PURE__ */ jsx96("div", { className: "w-4 h-4 bg-zinc-800 dark:bg-white rounded-full" })
+        ]
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/pulsating-dots.tsx
+import { motion as motion96 } from "framer-motion";
+import { jsx as jsx97 } from "react/jsx-runtime";
+var PulsatingDots = () => {
+  return /* @__PURE__ */ jsx97("div", { className: "flex space-x-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx97(
+    motion96.div,
+    {
+      className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] },
+      transition: { duration: 1.2, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/pulse-dot.tsx
+import { motion as motion97 } from "framer-motion";
+import { jsx as jsx98, jsxs as jsxs40 } from "react/jsx-runtime";
+var PulseDot = () => {
+  return /* @__PURE__ */ jsxs40("div", { className: "relative w-10 h-10 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx98(
+      motion97.div,
+      {
+        className: "absolute w-10 h-10 bg-zinc-800 dark:bg-white rounded-full",
+        animate: { scale: [0, 1], opacity: [0.8, 0] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx98("div", { className: "w-3 h-3 bg-zinc-800 dark:bg-white rounded-full relative z-10" })
+  ] });
+};
+
+// .generated/ui/loading/pulse-dots.tsx
+import { motion as motion98 } from "framer-motion";
+import { jsx as jsx99 } from "react/jsx-runtime";
+var PulseDots = () => {
+  return /* @__PURE__ */ jsx99("div", { className: "flex space-x-1.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx99(
+    motion98.div,
+    {
+      className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { opacity: [0.2, 1, 0.2] },
+      transition: { duration: 1.4, repeat: Infinity, delay: i * 0.2 }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/pulse-square.tsx
+import { motion as motion99 } from "framer-motion";
+import { jsx as jsx100 } from "react/jsx-runtime";
+var PulseSquare = () => {
+  return /* @__PURE__ */ jsx100(
+    motion99.div,
+    {
+      className: "w-8 h-8 border-4 border-zinc-800 dark:border-zinc-700 rounded-md",
+      animate: { scale: [1, 1.2, 1], opacity: [1, 0.3, 1], borderRadius: ["20%", "50%", "20%"] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  );
+};
+
+// .generated/ui/loading/pulse.tsx
+import { motion as motion100 } from "framer-motion";
+import { jsx as jsx101, jsxs as jsxs41 } from "react/jsx-runtime";
+function Pulse({
+  size = 12,
+  color = "bg-blue-500",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs41("div", { className: `relative flex items-center justify-center ${className}`, style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsx101("span", { className: `absolute w-full h-full rounded-full ${color}` }),
+    /* @__PURE__ */ jsx101(
+      motion100.span,
+      {
+        initial: { scale: 1, opacity: 0.5 },
+        animate: { scale: 2.8, opacity: 0 },
+        transition: {
+          repeat: Infinity,
+          duration: 1.8,
+          ease: "easeOut"
+        },
+        className: `absolute w-full h-full rounded-full ${color} opacity-40`
+      }
+    ),
+    /* @__PURE__ */ jsx101(
+      motion100.span,
+      {
+        initial: { scale: 1, opacity: 0.5 },
+        animate: { scale: 2.8, opacity: 0 },
+        transition: {
+          repeat: Infinity,
+          duration: 1.8,
+          delay: 0.6,
+          ease: "easeOut"
+        },
+        className: `absolute w-full h-full rounded-full ${color} opacity-40`
+      }
+    )
+  ] });
+}
+
+// .generated/ui/loading/pumping-heart.tsx
+import { motion as motion101 } from "framer-motion";
+import { jsx as jsx102 } from "react/jsx-runtime";
+var PumpingHeart = () => {
+  return /* @__PURE__ */ jsx102(
+    motion101.div,
+    {
+      className: "w-8 h-8",
+      animate: { scale: [1, 1.25, 1, 1.25, 1] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" },
+      children: /* @__PURE__ */ jsx102("svg", { viewBox: "0 0 24 24", className: "fill-zinc-800 dark:fill-white", children: /* @__PURE__ */ jsx102("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) })
+    }
+  );
+};
+
+// .generated/ui/loading/radar-sweep.tsx
+import { motion as motion102 } from "framer-motion";
+import { jsx as jsx103, jsxs as jsxs42 } from "react/jsx-runtime";
+var RadarSweep = ({ theme = "light" }) => {
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs42("div", { className: "relative w-12 h-12 rounded-full border border-zinc-800/10 dark:border-white/10 flex items-center justify-center overflow-hidden", children: [
+    /* @__PURE__ */ jsx103("div", { className: "absolute w-8 h-8 rounded-full border border-zinc-800/5 dark:border-white/5" }),
+    /* @__PURE__ */ jsx103("div", { className: "absolute w-4 h-4 rounded-full border border-zinc-800/5 dark:border-white/5" }),
+    /* @__PURE__ */ jsx103("div", { className: "absolute w-1.5 h-1.5 rounded-full bg-zinc-800/80 dark:bg-white/80" }),
+    /* @__PURE__ */ jsx103(
+      motion102.div,
+      {
+        className: "absolute inset-0 origin-center",
+        style: {
+          background: isDark ? "conic-gradient(from 0deg, transparent 50%, rgba(255,255,255,0.02) 65%, rgba(255,255,255,0.15) 85%, rgba(255,255,255,0.55) 100%)" : "conic-gradient(from 0deg, transparent 50%, rgba(39,39,42,0.02) 65%, rgba(39,39,42,0.1) 85%, rgba(39,39,42,0.45) 100%)"
+        },
+        animate: { rotate: 360 },
+        transition: { duration: 1.8, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/ring-sweep.tsx
+import { motion as motion103 } from "framer-motion";
+import { jsx as jsx104 } from "react/jsx-runtime";
+var RingSweep = () => {
+  return /* @__PURE__ */ jsx104(
+    motion103.div,
+    {
+      className: "w-10 h-10 border-[3px] border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white",
+      animate: { rotate: 360 },
+      transition: { duration: 1, repeat: Infinity, ease: "linear" }
+    }
+  );
+};
+
+// .generated/ui/loading/ripple-effect.tsx
+import { motion as motion104 } from "framer-motion";
+import { jsx as jsx105, jsxs as jsxs43 } from "react/jsx-runtime";
+var RippleEffect = () => {
+  return /* @__PURE__ */ jsxs43("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx105("div", { className: "absolute w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full" }),
+    [0, 1, 2].map((i) => /* @__PURE__ */ jsx105(
+      motion104.div,
+      {
+        className: "absolute w-8 h-8 border border-zinc-850 dark:border-white rounded-full",
+        initial: { scale: 0.3, opacity: 0.8 },
+        animate: { scale: 1.6, opacity: 0 },
+        transition: {
+          duration: 2.2,
+          repeat: Infinity,
+          ease: "easeOut",
+          delay: i * 0.7
+        }
+      },
+      i
+    ))
+  ] });
+};
+
+// .generated/ui/loading/rotating-cross.tsx
+import { motion as motion105 } from "framer-motion";
+import { jsx as jsx106, jsxs as jsxs44 } from "react/jsx-runtime";
+var RotatingCross = () => {
+  return /* @__PURE__ */ jsxs44(
+    motion105.div,
+    {
+      className: "relative w-8 h-8 flex items-center justify-center",
+      animate: { rotate: 180 },
+      transition: { duration: 0.8, repeat: Infinity, ease: "easeInOut" },
+      children: [
+        /* @__PURE__ */ jsx106("div", { className: "absolute w-full h-1.5 bg-zinc-800 dark:bg-white rounded-sm" }),
+        /* @__PURE__ */ jsx106("div", { className: "absolute h-full w-1.5 bg-zinc-800 dark:bg-white rounded-sm" })
+      ]
+    }
+  );
+};
+
+// .generated/ui/loading/rotating-triangle.tsx
+import { motion as motion106 } from "framer-motion";
+import { jsx as jsx107 } from "react/jsx-runtime";
+var RotatingTriangle = () => {
+  return /* @__PURE__ */ jsx107("svg", { className: "w-10 h-10 overflow-visible", viewBox: "0 0 50 50", children: /* @__PURE__ */ jsx107(
+    motion106.polygon,
+    {
+      points: "25,5 45,40 5,40",
+      className: "stroke-zinc-800 dark:stroke-white fill-none origin-center",
+      strokeWidth: "4",
+      strokeLinejoin: "round",
+      animate: { rotate: 360 },
+      transition: { duration: 2, repeat: Infinity, ease: "linear" }
+    }
+  ) });
+};
+
+// .generated/ui/loading/shape-shift-grid.tsx
+import { motion as motion107 } from "framer-motion";
+import { jsx as jsx108 } from "react/jsx-runtime";
+var ShapeShiftGrid = () => /* @__PURE__ */ jsx108("div", { className: "grid grid-cols-2 gap-1 w-8 h-8", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx108(
+  motion107.div,
+  {
+    className: "w-full h-full bg-zinc-800 dark:bg-white",
+    animate: { borderRadius: ["10%", "50%", "10%"], scale: [1, 0.8, 1] },
+    transition: { duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/shimmer-line.tsx
+import { motion as motion108 } from "framer-motion";
+import { jsx as jsx109 } from "react/jsx-runtime";
+var ShimmerLine = () => {
+  return /* @__PURE__ */ jsx109("div", { className: "w-24 h-1 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden relative", children: /* @__PURE__ */ jsx109(
+    motion108.div,
+    {
+      className: "absolute top-0 left-0 bottom-0 w-1/3 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { x: ["-100%", "300%"] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  ) });
+};
+
+// .generated/ui/loading/siri-wave.tsx
+import { motion as motion109 } from "framer-motion";
+import { jsx as jsx110 } from "react/jsx-runtime";
+var SiriWave = () => /* @__PURE__ */ jsx110("div", { className: "flex space-x-1 items-center h-8", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx110(
+  motion109.div,
+  {
+    className: "w-1 bg-zinc-800 dark:bg-white rounded-full",
+    animate: { height: [4, 24, 4] },
+    transition: { duration: 1.2, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/skeleton-loader.tsx
+import { motion as motion110 } from "framer-motion";
+import { jsx as jsx111, jsxs as jsxs45 } from "react/jsx-runtime";
+var SkeletonLoader = () => {
+  return /* @__PURE__ */ jsxs45("div", { className: "w-full max-w-[120px] space-y-2", children: [
+    /* @__PURE__ */ jsxs45("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx111(
+        motion110.div,
+        {
+          className: "w-8 h-8 bg-zinc-200 dark:bg-zinc-800 rounded-full shrink-0",
+          animate: { opacity: [0.5, 1, 0.5] },
+          transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+        }
+      ),
+      /* @__PURE__ */ jsx111(
+        motion110.div,
+        {
+          className: "h-3 bg-zinc-200 dark:bg-zinc-800 rounded-full w-full",
+          animate: { opacity: [0.5, 1, 0.5] },
+          transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.2 }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx111(
+      motion110.div,
+      {
+        className: "h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full w-full",
+        animate: { opacity: [0.5, 1, 0.5] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.4 }
+      }
+    ),
+    /* @__PURE__ */ jsx111(
+      motion110.div,
+      {
+        className: "h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full w-4/5",
+        animate: { opacity: [0.5, 1, 0.5] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.6 }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/skeleton.tsx
+import { motion as motion111 } from "framer-motion";
+import { jsx as jsx112 } from "react/jsx-runtime";
+function Skeleton({
+  className = "",
+  shimmerColor = "dark"
+}) {
+  const isDark = shimmerColor === "dark";
+  const shimmerGradient = isDark ? "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%)" : "linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0) 100%)";
+  return /* @__PURE__ */ jsx112(
+    "div",
+    {
+      className: `relative overflow-hidden rounded-md bg-neutral-200/50 dark:bg-neutral-800/40 ${className}`,
+      children: /* @__PURE__ */ jsx112(
+        motion111.div,
+        {
+          initial: { x: "-150%" },
+          animate: { x: "150%" },
+          transition: {
+            repeat: Infinity,
+            duration: 1.6,
+            ease: "easeInOut"
+          },
+          style: {
+            background: shimmerGradient
+          },
+          className: "absolute inset-0 w-[80%] h-full"
+        }
+      )
+    }
+  );
+}
+
+// .generated/ui/loading/sliding-bars.tsx
+import { motion as motion112 } from "framer-motion";
+import { jsx as jsx113, jsxs as jsxs46 } from "react/jsx-runtime";
+var SlidingBars = () => /* @__PURE__ */ jsxs46("div", { className: "relative w-8 h-8", children: [
+  /* @__PURE__ */ jsx113(
+    motion112.div,
+    {
+      className: "absolute top-0 left-0 w-8 h-1.5 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { y: [0, 24, 0] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx113(
+    motion112.div,
+    {
+      className: "absolute bottom-0 left-0 w-8 h-1.5 bg-zinc-400 dark:bg-zinc-200 rounded-full",
+      animate: { y: [0, -24, 0] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  )
+] });
+
+// .generated/ui/loading/smooth-dot-shift.tsx
+import { motion as motion113 } from "framer-motion";
+import { jsx as jsx114, jsxs as jsxs47 } from "react/jsx-runtime";
+var SmoothDotShift = () => /* @__PURE__ */ jsxs47("div", { className: "relative w-12 h-3 flex items-center", children: [
+  /* @__PURE__ */ jsx114(
+    motion113.div,
+    {
+      className: "absolute w-3 h-3 bg-zinc-800 dark:bg-white rounded-full z-10",
+      animate: { x: [0, 18, 36, 18, 0] },
+      transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+    }
+  ),
+  /* @__PURE__ */ jsx114("div", { className: "w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-0" }),
+  /* @__PURE__ */ jsx114("div", { className: "w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-[18px]" }),
+  /* @__PURE__ */ jsx114("div", { className: "w-3 h-3 bg-zinc-300 dark:bg-zinc-700 rounded-full absolute left-[36px]" })
+] });
+
+// .generated/ui/loading/smooth-ring.tsx
+import { jsx as jsx115, jsxs as jsxs48 } from "react/jsx-runtime";
+var SmoothRing = () => /* @__PURE__ */ jsx115("div", { className: "w-9 h-9", children: /* @__PURE__ */ jsxs48("svg", { className: "w-full h-full animate-spin", viewBox: "0 0 32 32", children: [
+  /* @__PURE__ */ jsx115(
+    "circle",
+    {
+      cx: "16",
+      cy: "16",
+      r: "14",
+      fill: "none",
+      strokeWidth: "3",
+      className: "stroke-zinc-200 dark:stroke-zinc-800"
+    }
+  ),
+  /* @__PURE__ */ jsx115(
+    "circle",
+    {
+      cx: "16",
+      cy: "16",
+      r: "14",
+      fill: "none",
+      strokeWidth: "3",
+      className: "stroke-zinc-800 dark:stroke-white",
+      strokeDasharray: "38 80",
+      strokeLinecap: "round"
+    }
+  )
+] }) });
+
+// .generated/ui/loading/smooth-rounded-square.tsx
+import { motion as motion114 } from "framer-motion";
+import { jsx as jsx116 } from "react/jsx-runtime";
+var SmoothRoundedSquare = () => /* @__PURE__ */ jsx116(
+  motion114.div,
+  {
+    className: "w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700",
+    animate: { borderRadius: ["10%", "50%", "10%"] },
+    transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+  }
+);
+
+// .generated/ui/loading/spinning-squares.tsx
+import { motion as motion115 } from "framer-motion";
+import { jsx as jsx117, jsxs as jsxs49 } from "react/jsx-runtime";
+var SpinningSquares = () => {
+  return /* @__PURE__ */ jsxs49("div", { className: "relative w-10 h-10", children: [
+    /* @__PURE__ */ jsx117(
+      motion115.div,
+      {
+        className: "absolute top-0 left-0 w-4 h-4 bg-zinc-800 dark:bg-white rounded-sm",
+        animate: { x: [0, 24, 24, 0, 0], y: [0, 0, 24, 24, 0] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx117(
+      motion115.div,
+      {
+        className: "absolute bottom-0 right-0 w-4 h-4 bg-zinc-300 dark:bg-zinc-700 rounded-sm",
+        animate: { x: [0, -24, -24, 0, 0], y: [0, 0, -24, -24, 0] },
+        transition: { duration: 2, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/spiral-spinner.tsx
+import { motion as motion116 } from "framer-motion";
+import { jsx as jsx118 } from "react/jsx-runtime";
+var SpiralSpinner = () => {
+  return /* @__PURE__ */ jsx118(
+    motion116.div,
+    {
+      className: "w-10 h-10 border-[3px] border-zinc-800 dark:border-zinc-700 rounded-full border-t-transparent",
+      animate: { rotate: 360, scale: [1, 0.8, 1] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  );
+};
+
+// .generated/ui/loading/spring-bars.tsx
+import { motion as motion117 } from "framer-motion";
+import { jsx as jsx119 } from "react/jsx-runtime";
+var SpringBars = () => /* @__PURE__ */ jsx119("div", { className: "flex flex-col space-y-2 w-10 justify-center", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx119(
+  motion117.div,
+  {
+    className: "h-1.5 bg-zinc-800 dark:bg-white rounded-full origin-left",
+    animate: { scaleX: [0.2, 1, 0.2] },
+    transition: {
+      duration: 1.4,
+      repeat: Infinity,
+      ease: "easeInOut",
+      delay: i * 0.15
+    }
+  },
+  i
+)) });
+
+// .generated/ui/loading/spring-dot-matrix.tsx
+import { motion as motion118 } from "framer-motion";
+import { jsx as jsx120 } from "react/jsx-runtime";
+var SpringDotMatrix = () => {
+  return /* @__PURE__ */ jsx120("div", { className: "grid grid-cols-3 gap-2.5", children: Array.from({ length: 9 }).map((_, i) => /* @__PURE__ */ jsx120(
+    motion118.div,
+    {
+      className: "w-2 h-2 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { scale: [1, 0.4, 1] },
+      transition: {
+        duration: 1.5,
+        repeat: Infinity,
+        ease: "easeInOut",
+        delay: (Math.floor(i / 3) + i % 3) * 0.15
+      }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/spring-hexagon.tsx
+import { motion as motion119 } from "framer-motion";
+import { jsx as jsx121 } from "react/jsx-runtime";
+var SpringHexagon = () => /* @__PURE__ */ jsx121(
+  motion119.svg,
+  {
+    className: "w-10 h-10",
+    viewBox: "0 0 50 50",
+    animate: { scale: [1, 1.15, 1], rotate: [0, 60, 60] },
+    transition: { duration: 2, repeat: Infinity, type: "spring", bounce: 0.3 },
+    children: /* @__PURE__ */ jsx121("polygon", { points: "25,5 45,15 45,35 25,45 5,35 5,15", className: "fill-zinc-800 dark:fill-white" })
+  }
+);
+
+// .generated/ui/loading/spring-ring-expand.tsx
+import { motion as motion120 } from "framer-motion";
+import { jsx as jsx122 } from "react/jsx-runtime";
+var SpringRingExpand = () => {
+  return /* @__PURE__ */ jsx122("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [0, 1].map((i) => /* @__PURE__ */ jsx122(
+    motion120.div,
+    {
+      className: "absolute w-10 h-10 border-2 border-zinc-800 dark:border-white rounded-full",
+      initial: { scale: 0.1, opacity: 1 },
+      animate: { scale: 1.25, opacity: 0 },
+      transition: {
+        duration: 1.6,
+        repeat: Infinity,
+        ease: "easeOut",
+        delay: i * 0.8
+      }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/spring-text-pop.tsx
+import { motion as motion121 } from "framer-motion";
+import { jsx as jsx123 } from "react/jsx-runtime";
+var SpringTextPop = () => {
+  const text = "Loading...";
+  return /* @__PURE__ */ jsx123("div", { className: "flex font-medium text-sm tracking-widest text-zinc-800 dark:text-white", children: text.split("").map((char, i) => /* @__PURE__ */ jsx123(
+    motion121.span,
+    {
+      className: "origin-bottom inline-block",
+      animate: { y: [0, -6, 0] },
+      transition: {
+        duration: 1.2,
+        repeat: Infinity,
+        ease: "easeInOut",
+        delay: i * 0.08
+      },
+      children: char === " " ? "\xA0" : char
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/square-accordion.tsx
+import { motion as motion122 } from "framer-motion";
+import { jsx as jsx124 } from "react/jsx-runtime";
+var SquareAccordion = () => {
+  return /* @__PURE__ */ jsx124("div", { className: "flex space-x-1 w-12 h-12 justify-center items-center", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx124(
+    motion122.div,
+    {
+      className: "w-3 bg-zinc-800 dark:bg-white rounded-sm",
+      animate: { height: [12, 32, 12] },
+      transition: { duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/square-grid.tsx
+import { motion as motion123 } from "framer-motion";
+import { jsx as jsx125 } from "react/jsx-runtime";
+var SquareGrid = () => {
+  return /* @__PURE__ */ jsx125("div", { className: "grid grid-cols-2 gap-1.5", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx125(
+    motion123.div,
+    {
+      className: "w-4 h-4 bg-zinc-800 dark:bg-white rounded-sm",
+      animate: { scale: [1, 0.5, 1], opacity: [1, 0.3, 1] },
+      transition: { duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/square-snake.tsx
+import { motion as motion124 } from "framer-motion";
+import { jsx as jsx126 } from "react/jsx-runtime";
+var SquareSnake = () => {
+  return /* @__PURE__ */ jsx126("div", { className: "grid grid-cols-3 gap-1 w-10 h-10", children: [
+    [0, 0],
+    [1, 0],
+    [2, 0],
+    [0, 1],
+    [1, 1],
+    [2, 1],
+    [0, 2],
+    [1, 2],
+    [2, 2]
+  ].map(([x, y], i) => /* @__PURE__ */ jsx126(
+    motion124.div,
+    {
+      className: "bg-zinc-800 dark:bg-white rounded-sm w-full h-full",
+      animate: { opacity: [0.1, 1, 0.1] },
+      transition: { duration: 1.5, repeat: Infinity, delay: (x + y) * 0.15, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/square-spinner.tsx
+import { motion as motion125 } from "framer-motion";
+import { jsx as jsx127 } from "react/jsx-runtime";
+var SquareSpinner = () => {
+  return /* @__PURE__ */ jsx127(
+    motion125.div,
+    {
+      className: "w-8 h-8 border-2 border-zinc-800 dark:border-zinc-700 flex items-center justify-center",
+      animate: { rotate: 90 },
+      transition: { duration: 0.6, repeat: Infinity, ease: "easeInOut" },
+      children: /* @__PURE__ */ jsx127("div", { className: "w-2 h-2 bg-zinc-800 dark:bg-white" })
+    }
+  );
+};
+
+// .generated/ui/loading/stacked-bar-pulse.tsx
+import { motion as motion126 } from "framer-motion";
+import { jsx as jsx128 } from "react/jsx-runtime";
+var StackedBarPulse = () => /* @__PURE__ */ jsx128("div", { className: "flex flex-col space-y-1 w-8 items-center", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx128(
+  motion126.div,
+  {
+    className: "w-full h-1 bg-zinc-800 dark:bg-white rounded-full",
+    animate: { opacity: [0.2, 1, 0.2], width: ["50%", "100%", "50%"] },
+    transition: { duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/swapping-dots.tsx
+import { motion as motion127 } from "framer-motion";
+import { jsx as jsx129, jsxs as jsxs50 } from "react/jsx-runtime";
+var SwappingDots = () => {
+  return /* @__PURE__ */ jsxs50("div", { className: "relative w-12 h-4 flex items-center", children: [
+    /* @__PURE__ */ jsx129(
+      motion127.div,
+      {
+        className: "absolute left-0 w-4 h-4 bg-zinc-800 dark:bg-white rounded-full",
+        animate: { x: [0, 32, 0] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+      }
+    ),
+    /* @__PURE__ */ jsx129(
+      motion127.div,
+      {
+        className: "absolute right-0 w-4 h-4 bg-zinc-400 dark:bg-zinc-200 rounded-full",
+        animate: { x: [0, -32, 0] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/swirling-spinner.tsx
+import { motion as motion128 } from "framer-motion";
+import { jsx as jsx130, jsxs as jsxs51 } from "react/jsx-runtime";
+var SwirlingSpinner = () => {
+  return /* @__PURE__ */ jsxs51("div", { className: "relative w-10 h-10 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx130(
+      motion128.div,
+      {
+        className: "absolute inset-0 border-[2.5px] border-t-zinc-800 dark:border-t-white border-r-zinc-800/30 dark:border-r-white/30 border-b-zinc-800/10 dark:border-b-white/10 border-l-transparent rounded-full",
+        animate: { rotate: 360 },
+        transition: { duration: 1.3, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx130(
+      motion128.div,
+      {
+        className: "absolute w-6 h-6 border-[2.5px] border-b-zinc-800 dark:border-b-white border-t-zinc-800/30 dark:border-t-white/30 border-r-zinc-800/10 dark:border-r-white/10 border-l-transparent rounded-full",
+        animate: { rotate: -360 },
+        transition: { duration: 0.9, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/symmetric-wave.tsx
+import { motion as motion129 } from "framer-motion";
+import { jsx as jsx131 } from "react/jsx-runtime";
+var SymmetricWave = () => {
+  return /* @__PURE__ */ jsx131("div", { className: "flex space-x-1.5 h-10 items-center", children: [0, 1, 2, 3, 4, 3, 2, 1, 0].map((val, i) => /* @__PURE__ */ jsx131(
+    motion129.div,
+    {
+      className: "w-1.5 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { height: [8, 24, 8] },
+      transition: { duration: 1.2, repeat: Infinity, delay: val * 0.1, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/terminal-loader.tsx
+import { motion as motion130 } from "framer-motion";
+import { jsx as jsx132, jsxs as jsxs52 } from "react/jsx-runtime";
+var TerminalLoader = () => {
+  return /* @__PURE__ */ jsxs52("div", { className: "bg-zinc-900 dark:bg-white text-zinc-100 font-mono text-[10px] p-3 rounded-md w-full h-16 flex flex-col justify-end overflow-hidden shadow-sm", children: [
+    /* @__PURE__ */ jsxs52("div", { className: "flex text-zinc-500 dark:text-zinc-300 mb-1 leading-none", children: [
+      /* @__PURE__ */ jsx132("span", { children: "$" }),
+      /* @__PURE__ */ jsx132("span", { className: "ml-2", children: "loading..." })
+    ] }),
+    /* @__PURE__ */ jsxs52("div", { className: "flex items-center leading-none", children: [
+      /* @__PURE__ */ jsx132("span", { className: "text-emerald-400", children: ">" }),
+      /* @__PURE__ */ jsx132(
+        motion130.span,
+        {
+          className: "ml-2 w-1.5 h-2.5 bg-zinc-100 dark:bg-zinc-800 block",
+          animate: { opacity: [1, 0, 1] },
+          transition: { duration: 0.8, repeat: Infinity, ease: "linear" }
+        }
+      )
+    ] })
+  ] });
+};
+
+// .generated/ui/loading/text-blink.tsx
+import { motion as motion131 } from "framer-motion";
+import { jsx as jsx133 } from "react/jsx-runtime";
+var TextBlink = () => {
+  return /* @__PURE__ */ jsx133(
+    motion131.div,
+    {
+      className: "text-zinc-900 dark:text-white font-medium text-lg",
+      animate: { opacity: [1, 0.2, 1] },
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" },
+      children: "Thinking"
+    }
+  );
+};
+
+// .generated/ui/loading/text-dots.tsx
+import { motion as motion132 } from "framer-motion";
+import { jsx as jsx134, jsxs as jsxs53 } from "react/jsx-runtime";
+var TextDots = () => {
+  return /* @__PURE__ */ jsxs53("div", { className: "font-medium text-lg text-zinc-900 dark:text-white flex w-24", children: [
+    /* @__PURE__ */ jsx134("span", { children: "Thinking" }),
+    /* @__PURE__ */ jsxs53("span", { className: "flex w-6 pl-0.5", children: [
+      /* @__PURE__ */ jsx134(motion132.span, { animate: { opacity: [0, 1, 1, 0] }, transition: { duration: 2, repeat: Infinity, times: [0, 0.2, 0.8, 1] }, children: "." }),
+      /* @__PURE__ */ jsx134(motion132.span, { animate: { opacity: [0, 0, 1, 0] }, transition: { duration: 2, repeat: Infinity, times: [0, 0.4, 0.8, 1] }, children: "." }),
+      /* @__PURE__ */ jsx134(motion132.span, { animate: { opacity: [0, 0, 1, 0] }, transition: { duration: 2, repeat: Infinity, times: [0, 0.6, 0.8, 1] }, children: "." })
+    ] })
+  ] });
+};
+
+// .generated/ui/loading/text-morph.tsx
+import { motion as motion133 } from "framer-motion";
+import { jsx as jsx135, jsxs as jsxs54 } from "react/jsx-runtime";
+var TextMorph = () => /* @__PURE__ */ jsxs54("div", { className: "relative h-6 w-24 flex items-center justify-center font-medium text-sm text-zinc-900 dark:text-white overflow-hidden", children: [
+  /* @__PURE__ */ jsx135(
+    motion133.div,
+    {
+      className: "absolute",
+      animate: { opacity: [1, 0, 0, 1], y: [0, -16, 16, 0] },
+      transition: { duration: 3, repeat: Infinity, ease: "easeInOut" },
+      children: "Loading"
+    }
+  ),
+  /* @__PURE__ */ jsx135(
+    motion133.div,
+    {
+      className: "absolute",
+      animate: { opacity: [0, 1, 1, 0], y: [16, 0, 0, -16] },
+      transition: { duration: 3, repeat: Infinity, ease: "easeInOut" },
+      children: "Wait"
+    }
+  )
+] });
+
+// .generated/ui/loading/text-shimmer-wave.tsx
+import { motion as motion134 } from "framer-motion";
+import { jsx as jsx136 } from "react/jsx-runtime";
+var TextShimmerWave = () => {
+  const text = "Thinking";
+  return /* @__PURE__ */ jsx136("div", { className: "flex font-medium text-lg", children: text.split("").map((char, i) => /* @__PURE__ */ jsx136(
+    motion134.span,
+    {
+      className: "text-zinc-900 dark:text-white",
+      animate: { opacity: [0.3, 1, 0.3], y: [0, -2, 0] },
+      transition: { duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" },
+      children: char
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/text-shimmer.tsx
+import { motion as motion135 } from "framer-motion";
+import { jsx as jsx137, jsxs as jsxs55 } from "react/jsx-runtime";
+var TextShimmer = () => {
+  return /* @__PURE__ */ jsxs55("div", { className: "relative text-zinc-200 font-medium text-lg", children: [
+    "Thinking",
+    /* @__PURE__ */ jsx137(
+      motion135.div,
+      {
+        className: "absolute inset-0 text-zinc-900 dark:text-white",
+        style: { maskImage: "linear-gradient(90deg, transparent 0%, black 50%, transparent 100%)", maskSize: "200% 100%" },
+        animate: { maskPosition: ["100% 0%", "-100% 0%"] },
+        transition: { duration: 1.5, repeat: Infinity, ease: "linear" },
+        children: "Thinking"
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/trailing-dots.tsx
+import { motion as motion136 } from "framer-motion";
+import { jsx as jsx138 } from "react/jsx-runtime";
+var TrailingDots = () => /* @__PURE__ */ jsx138("div", { className: "relative w-10 h-10", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx138(
+  motion136.div,
+  {
+    className: "absolute inset-0",
+    animate: { rotate: 360 },
+    transition: { duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" },
+    children: /* @__PURE__ */ jsx138("div", { className: `w-2 h-2 rounded-full absolute top-0 left-1/2 -ml-1 ${i === 0 ? "bg-zinc-800 dark:bg-white" : "bg-zinc-400 dark:bg-zinc-200"}`, style: { opacity: 1 - i * 0.2 } })
+  },
+  i
+)) });
+
+// .generated/ui/loading/triple-dot-spinner.tsx
+import { motion as motion137 } from "framer-motion";
+import { jsx as jsx139 } from "react/jsx-runtime";
+var TripleDotSpinner = () => {
+  return /* @__PURE__ */ jsx139(
+    motion137.div,
+    {
+      className: "relative w-10 h-10",
+      animate: { rotate: 360 },
+      transition: { duration: 2, repeat: Infinity, ease: "linear" },
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx139(
+        "div",
+        {
+          className: "absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_20px]",
+          style: { transform: `rotate(${i * 120}deg)` }
+        },
+        i
+      ))
+    }
+  );
+};
+
+// .generated/ui/loading/twin-orbit.tsx
+import { motion as motion138 } from "framer-motion";
+import { jsx as jsx140, jsxs as jsxs56 } from "react/jsx-runtime";
+var TwinOrbit = () => {
+  return /* @__PURE__ */ jsxs56("div", { className: "relative w-12 h-12", children: [
+    /* @__PURE__ */ jsx140(
+      motion138.div,
+      {
+        className: "absolute inset-0 border-2 border-zinc-800 dark:border-zinc-700 rounded-full border-b-transparent border-r-transparent",
+        animate: { rotate: 360 },
+        transition: { duration: 1.5, repeat: Infinity, ease: "linear" }
+      }
+    ),
+    /* @__PURE__ */ jsx140(
+      motion138.div,
+      {
+        className: "absolute inset-2 border-2 border-zinc-400 rounded-full border-t-transparent border-l-transparent",
+        animate: { rotate: -360 },
+        transition: { duration: 1.5, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/typing-indicator.tsx
+import { motion as motion139 } from "framer-motion";
+import { jsx as jsx141 } from "react/jsx-runtime";
+var TypingIndicator = () => {
+  return /* @__PURE__ */ jsx141("div", { className: "flex items-center justify-center px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-full space-x-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx141(
+    motion139.div,
+    {
+      className: "w-1.5 h-1.5 bg-zinc-500 dark:bg-zinc-350 rounded-full",
+      animate: { y: [0, -4, 0] },
+      transition: { duration: 0.6, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/typing.tsx
+import { motion as motion140 } from "framer-motion";
+import { jsx as jsx142, jsxs as jsxs57 } from "react/jsx-runtime";
+var Typing = () => {
+  return /* @__PURE__ */ jsxs57("div", { className: "flex items-center text-zinc-900 dark:text-white font-medium text-lg w-20", children: [
+    "Loading",
+    /* @__PURE__ */ jsx142(
+      motion140.span,
+      {
+        className: "w-1.5 h-4 bg-zinc-900 dark:bg-white ml-1 inline-block",
+        animate: { opacity: [1, 0, 1] },
+        transition: { duration: 0.8, repeat: Infinity, ease: "linear" }
+      }
+    )
+  ] });
+};
+
+// .generated/ui/loading/wandering-cube.tsx
+import { motion as motion141 } from "framer-motion";
+import { jsx as jsx143 } from "react/jsx-runtime";
+var WanderingCube = () => {
+  return /* @__PURE__ */ jsx143("div", { className: "relative w-10 h-10", children: /* @__PURE__ */ jsx143(
+    motion141.div,
+    {
+      className: "absolute top-0 left-0 w-4 h-4 bg-zinc-800 dark:bg-white rounded-sm",
+      animate: {
+        x: [0, 24, 24, 0, 0],
+        y: [0, 0, 24, 24, 0],
+        rotate: [0, -90, -180, -270, -360]
+      },
+      transition: { duration: 2.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  ) });
+};
+
+// .generated/ui/loading/watch-spinner.tsx
+import { motion as motion142 } from "framer-motion";
+import { jsx as jsx144 } from "react/jsx-runtime";
+var WatchSpinner = () => /* @__PURE__ */ jsx144("div", { className: "relative w-12 h-12 flex items-center justify-center", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx144(
+  motion142.div,
+  {
+    className: "absolute rounded-full border-[3px] border-transparent border-t-zinc-800 dark:border-t-white",
+    style: { width: 44 - i * 12, height: 44 - i * 12 },
+    animate: { rotate: 360 },
+    transition: { duration: 1 + i * 0.5, repeat: Infinity, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/wave-dots.tsx
+import { motion as motion143 } from "framer-motion";
+import { jsx as jsx145 } from "react/jsx-runtime";
+var WaveDots = () => {
+  return /* @__PURE__ */ jsx145("div", { className: "flex space-x-1.5 h-6 items-center", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx145(
+    motion143.div,
+    {
+      className: "w-2 h-2 bg-zinc-800 dark:bg-white rounded-full",
+      animate: { y: [4, -4, 4] },
+      transition: { duration: 1, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/loading/wave-physics-loader.tsx
+import { motion as motion144 } from "framer-motion";
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx146, jsxs as jsxs58 } from "react/jsx-runtime";
+function WavePhysicsLoader({ theme = "light" }) {
+  const numBars = 15;
+  const barWidth = 12;
+  const barGap = 8;
+  const barTotalWidth = barWidth + barGap;
+  const numFrames = 201;
+  const B = 4;
+  const maxBounce = 60;
+  const baseBarH = 16;
+  const wavePeakH = 48;
+  const { bars, ballX, ballY, ballScaleX, ballScaleY, times } = useMemo2(() => {
+    const barsData = Array.from({ length: numBars }).map(() => ({
+      heights: [],
+      colors: []
+    }));
+    const bX = [];
+    const bY = [];
+    const bScaleX = [];
+    const bScaleY = [];
+    const tArr = [];
+    for (let k = 0; k < numFrames; k++) {
+      const t = k / (numFrames - 1);
+      tArr.push(t);
+      const x_frac = t < 0.5 ? t / 0.5 : (1 - t) / 0.5;
+      const ball_idx = x_frac * (numBars - 1);
+      bX.push(`${ball_idx * barTotalWidth}px`);
+      let bounce_f = x_frac * B % 1;
+      if (x_frac === 1 || x_frac === 0) bounce_f = 0;
+      const bounce_h = 4 * bounce_f * (1 - bounce_f);
+      const height_factor = Math.max(0, 1 - bounce_h * 2);
+      const ball_indent = height_factor * 20;
+      const ball_y = baseBarH + wavePeakH - ball_indent + bounce_h * maxBounce;
+      bY.push(`-${ball_y}px`);
+      const squish = height_factor;
+      bScaleY.push(1 - squish * 0.3);
+      bScaleX.push(1 + squish * 0.25);
+      for (let i = 0; i < numBars; i++) {
+        const dist = Math.abs(i - ball_idx);
+        let wave_val = 0;
+        if (dist < 3) {
+          wave_val = Math.cos(dist / 3 * (Math.PI / 2));
+        }
+        let indent = 0;
+        if (dist < 1.5) {
+          const indent_dist = Math.cos(dist / 1.5 * (Math.PI / 2));
+          indent = indent_dist * height_factor * 20;
+        }
+        const bar_h = baseBarH + wave_val * wavePeakH - indent;
+        barsData[i].heights.push(`${Math.max(4, bar_h)}px`);
+        const isDark = theme === "dark";
+        let r, g, b;
+        if (isDark) {
+          r = Math.round(39 + wave_val * (228 - 39));
+          g = Math.round(39 + wave_val * (228 - 39));
+          b = Math.round(42 + wave_val * (231 - 42));
+        } else {
+          r = Math.round(228 - wave_val * (228 - 39));
+          g = Math.round(228 - wave_val * (228 - 39));
+          b = Math.round(231 - wave_val * (231 - 42));
+        }
+        barsData[i].colors.push(`rgb(${r}, ${g}, ${b})`);
+      }
+    }
+    return { bars: barsData, ballX: bX, ballY: bY, ballScaleX: bScaleX, ballScaleY: bScaleY, times: tArr };
+  }, [theme]);
+  return /* @__PURE__ */ jsx146("div", { className: "relative flex flex-col items-center justify-center w-full scale-[0.6] sm:scale-75 md:scale-100", children: /* @__PURE__ */ jsxs58("div", { className: "relative flex items-end justify-start h-48 space-x-2 w-[292px]", children: [
+    bars.map((bar, i) => /* @__PURE__ */ jsx146(
+      motion144.div,
+      {
+        className: "w-3 rounded-full origin-bottom",
+        style: { height: "16px", backgroundColor: theme === "dark" ? "rgb(39, 39, 42)" : "rgb(228, 228, 231)" },
+        animate: {
+          height: bar.heights,
+          backgroundColor: bar.colors
+        },
+        transition: {
+          duration: 4,
+          repeat: Infinity,
+          times,
+          ease: "linear"
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx146(
+      motion144.div,
+      {
+        className: "absolute w-3 h-3 bg-zinc-900 dark:bg-white rounded-full z-10 shadow-sm",
+        style: { bottom: 0, left: 0, transformOrigin: "bottom center" },
+        animate: {
+          x: ballX,
+          y: ballY,
+          scaleX: ballScaleX,
+          scaleY: ballScaleY
+        },
+        transition: {
+          duration: 4,
+          repeat: Infinity,
+          times,
+          ease: "linear"
+        }
+      }
+    )
+  ] }) });
+}
+
+// .generated/ui/loading/waveform-loader.tsx
+import { motion as motion145 } from "framer-motion";
+import { jsx as jsx147 } from "react/jsx-runtime";
+var WaveformLoader = () => /* @__PURE__ */ jsx147("div", { className: "flex items-center space-x-0.5 h-8", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx147(
+  motion145.div,
+  {
+    className: "w-1 bg-zinc-800 dark:bg-white rounded-full",
+    animate: { height: [4, 24, 4] },
+    transition: { duration: 1, repeat: Infinity, delay: Math.sin(i) * 0.5, ease: "easeInOut" }
+  },
+  i
+)) });
+
+// .generated/ui/loading/zig-zag-pulse.tsx
+import { motion as motion146 } from "framer-motion";
+import { jsx as jsx148 } from "react/jsx-runtime";
+var ZigZagPulse = () => {
+  return /* @__PURE__ */ jsx148("div", { className: "grid grid-cols-3 gap-2 w-12 h-12", children: [
+    [0, 0],
+    [1, 1],
+    [2, 0],
+    [0, 2],
+    [1, 1],
+    [2, 2]
+  ].map(([col, row], i) => /* @__PURE__ */ jsx148(
+    motion146.div,
+    {
+      className: "w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full",
+      style: { gridColumn: col + 1, gridRow: row + 1 },
+      animate: { opacity: [0.2, 1, 0.2] },
+      transition: { duration: 1.2, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }
+    },
+    i
+  )) });
+};
+
+// .generated/ui/scroll/progress-indicator.tsx
+import { motion as motion147, useScroll, useSpring as useSpring5 } from "framer-motion";
+import { jsx as jsx149 } from "react/jsx-runtime";
+function ProgressIndicator({
+  color = "bg-blue-500",
+  height = 4,
+  className = ""
+}) {
+  const { scrollYProgress } = useScroll();
+  const scaleX = useSpring5(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 1e-3
+  });
+  return /* @__PURE__ */ jsx149(
+    motion147.div,
+    {
+      className: `fixed top-0 left-0 right-0 origin-left z-[9999] ${color} ${className}`,
+      style: {
+        scaleX,
+        height,
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        originX: 0,
+        zIndex: 9999
+      }
+    }
+  );
+}
+
+// .generated/ui/scroll/scroll-reveal.tsx
+import { motion as motion148 } from "framer-motion";
+import { jsx as jsx150 } from "react/jsx-runtime";
+function ScrollReveal({
+  children,
+  duration = 0.6,
+  yOffset = 30,
+  xOffset = 0,
+  scale = 0.95,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx150(
+    motion148.div,
+    {
+      initial: { opacity: 0, y: yOffset, x: xOffset, scale },
+      whileInView: { opacity: 1, y: 0, x: 0, scale: 1 },
+      viewport: { once: true, margin: "-15%" },
+      transition: {
+        duration,
+        ease: [0.16, 1, 0.3, 1]
+        // easeOutExpo
+      },
+      className,
+      children
+    }
+  );
+}
+
+// .generated/ui/scroll/sticky-reveal.tsx
+import { useRef as useRef5, useState as useState11 } from "react";
+import { motion as motion149, useMotionValueEvent, useScroll as useScroll2 } from "framer-motion";
+import { jsx as jsx151, jsxs as jsxs59 } from "react/jsx-runtime";
+function StickyReveal({
+  content,
+  className = ""
+}) {
+  const [activeCard, setActiveCard] = useState11(0);
+  const ref = useRef5(null);
+  const { scrollYProgress } = useScroll2({
+    target: ref,
+    offset: ["start start", "end end"]
+  });
+  const cardLength = content.length;
+  useMotionValueEvent(scrollYProgress, "change", (latest) => {
+    const cardsBreakpoints = content.map((_, index) => index / cardLength);
+    const closestIndex = cardsBreakpoints.reduce((acc, val, index) => {
+      if (latest >= val) {
+        return index;
+      }
+      return acc;
+    }, 0);
+    setActiveCard(closestIndex);
+  });
+  return /* @__PURE__ */ jsxs59(
+    "div",
+    {
+      ref,
+      className: `relative flex justify-between gap-10 max-w-5xl mx-auto py-10 px-4 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx151("div", { className: "w-1/2 flex flex-col gap-32 py-10", children: content.map((item, index) => /* @__PURE__ */ jsxs59("div", { className: "min-h-[50vh] flex flex-col justify-center", children: [
+          /* @__PURE__ */ jsx151(
+            motion149.h2,
+            {
+              animate: {
+                opacity: activeCard === index ? 1 : 0.3
+              },
+              className: "text-2xl font-bold mb-4",
+              children: item.title
+            }
+          ),
+          /* @__PURE__ */ jsx151(
+            motion149.p,
+            {
+              animate: {
+                opacity: activeCard === index ? 1 : 0.3
+              },
+              className: "text-neutral-500 dark:text-neutral-450 leading-relaxed",
+              children: item.description
+            }
+          )
+        ] }, index)) }),
+        /* @__PURE__ */ jsx151("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__ */ jsx151(
+          motion149.div,
+          {
+            initial: { opacity: 0, scale: 0.9 },
+            animate: {
+              opacity: activeCard === index ? 1 : 0,
+              scale: activeCard === index ? 1 : 0.9
+            },
+            transition: { duration: 0.4 },
+            className: "absolute inset-0 p-6 flex items-center justify-center",
+            children: item.content || /* @__PURE__ */ jsxs59("div", { className: "text-lg font-semibold text-neutral-400", children: [
+              "Card ",
+              index + 1,
+              " Visual"
+            ] })
+          },
+          index
+        )) })
+      ]
+    }
+  );
+}
+
+// .generated/ui/text/blur-text.tsx
+import { motion as motion150 } from "framer-motion";
+import { jsx as jsx152 } from "react/jsx-runtime";
+function BlurText({
+  text,
+  duration = 0.5,
+  staggerDelay = 0.02,
+  initialBlur = "8px",
+  className = ""
+}) {
+  const characters = Array.from(text);
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: staggerDelay
+      }
+    }
+  };
+  const charVariants = {
+    hidden: { opacity: 0, filter: `blur(${initialBlur})` },
+    visible: {
+      opacity: 1,
+      filter: "blur(0px)",
+      transition: {
+        duration,
+        ease: "easeOut"
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx152(
+    motion150.div,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      whileInView: "visible",
+      viewport: { once: true, margin: "-10%" },
+      className: `inline-block ${className}`,
+      children: characters.map((char, index) => /* @__PURE__ */ jsx152(
+        motion150.span,
+        {
+          variants: charVariants,
+          className: "inline-block whitespace-pre",
+          children: char
+        },
+        index
+      ))
+    }
+  );
+}
+
+// .generated/ui/text/character-stagger.tsx
+import { motion as motion151 } from "framer-motion";
+import { jsx as jsx153 } from "react/jsx-runtime";
+function CharacterStagger({
+  text,
+  duration = 0.4,
+  staggerDelay = 0.015,
+  yOffset = 15,
+  className = ""
+}) {
+  const characters = Array.from(text);
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: staggerDelay
+      }
+    }
+  };
+  const charVariants = {
+    hidden: { opacity: 0, y: yOffset, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 18,
+        mass: 0.8,
+        duration
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx153(
+    motion151.div,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      whileInView: "visible",
+      viewport: { once: true, margin: "-10%" },
+      className: `inline-block ${className}`,
+      children: characters.map((char, index) => /* @__PURE__ */ jsx153(
+        motion151.span,
+        {
+          variants: charVariants,
+          className: "inline-block whitespace-pre",
+          children: char
+        },
+        index
+      ))
+    }
+  );
+}
+
+// .generated/ui/text/text-reveal.tsx
+import { motion as motion152 } from "framer-motion";
+import { jsx as jsx154 } from "react/jsx-runtime";
+function TextReveal({
+  text,
+  duration = 0.8,
+  staggerDelay = 0.15,
+  className = ""
+}) {
+  const lines = text.split("\n");
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: staggerDelay
+      }
+    }
+  };
+  const itemVariants = {
+    hidden: { y: "100%" },
+    visible: {
+      y: 0,
+      transition: {
+        duration,
+        ease: [0.16, 1, 0.3, 1]
+        // easeOutExpo
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx154(
+    motion152.div,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      whileInView: "visible",
+      viewport: { once: true, margin: "-20%" },
+      className: `flex flex-col ${className}`,
+      children: lines.map((line, index) => /* @__PURE__ */ jsx154("div", { className: "overflow-hidden py-1", children: /* @__PURE__ */ jsx154(motion152.span, { variants: itemVariants, className: "block", children: line }) }, index))
+    }
+  );
+}
+
+// .generated/ui/text/word-reveal.tsx
+import { motion as motion153 } from "framer-motion";
+import { jsx as jsx155 } from "react/jsx-runtime";
+function WordReveal({
+  text,
+  duration = 0.5,
+  staggerDelay = 0.04,
+  className = ""
+}) {
+  const words = text.split(/\s+/);
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: staggerDelay
+      }
+    }
+  };
+  const wordVariants = {
+    hidden: { opacity: 0, y: 15, scale: 0.9 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        duration,
+        ease: [0.215, 0.61, 0.355, 1]
+        // easeOutCubic
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx155(
+    motion153.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__ */ jsx155(
+        motion153.span,
+        {
+          variants: wordVariants,
+          className: "inline-block",
+          children: word
+        },
+        index
+      ))
+    }
+  );
+}
+
+// .generated/ui/toggles/classic-toggle.tsx
+import { useState as useState12 } from "react";
+import { motion as motion154 } from "framer-motion";
+import { jsx as jsx156 } from "react/jsx-runtime";
+var ClassicToggle = () => {
+  const [isOn, setIsOn] = useState12(false);
+  return /* @__PURE__ */ jsx156(
+    "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__ */ jsx156(
+        motion154.div,
+        {
+          animate: { x: isOn ? 28 : 0 },
+          transition: { type: "spring", stiffness: 500, damping: 30 },
+          className: "w-7 h-7 bg-white rounded-full shadow-md"
+        }
+      )
+    }
+  );
+};
+
+// .generated/ui/transitions/page-transition.tsx
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { motion as motion155 } from "framer-motion";
+import { jsx as jsx157, jsxs as jsxs60 } from "react/jsx-runtime";
+var PageTransition = ({
+  type = "double-stairs",
+  isVisible,
+  onComplete,
+  className = ""
+}) => {
+  const pathRefs = useRef6([]);
+  useEffect6(() => {
+    if (type !== "liquid-wave" || !isVisible) return;
+    let animId;
+    const numPoints = 12;
+    const numPaths = 3;
+    const startTime = performance.now();
+    const delays = Array.from(
+      { length: numPaths },
+      (_, i) => Array.from({ length: numPoints }, () => i * 0.08 + Math.random() * 0.15)
+    );
+    const animateFrame = (now) => {
+      const elapsedSec = (now - startTime) / 1e3;
+      pathRefs.current.forEach((path, i) => {
+        if (!path) return;
+        const stepX = 100 / (numPoints - 1);
+        const pointsY = delays[i].map((delay) => {
+          const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / 0.65));
+          const easeProgress = rawProgress < 0.5 ? 2 * rawProgress * rawProgress : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2;
+          return 100 - easeProgress * 110;
+        });
+        let d = `M 0 100 V ${pointsY[0]}`;
+        for (let j = 0; j < numPoints - 1; j++) {
+          const currentX = j * stepX;
+          const nextX = (j + 1) * stepX;
+          const cpX = currentX + stepX * 0.5;
+          d += ` C ${cpX} ${pointsY[j]} ${cpX} ${pointsY[j + 1]} ${nextX} ${pointsY[j + 1]}`;
+        }
+        d += ` V 100 H 0 Z`;
+        path.setAttribute("d", d);
+      });
+      if (now - startTime < 1300) {
+        animId = requestAnimationFrame(animateFrame);
+      } else if (onComplete) {
+        onComplete();
+      }
+    };
+    animId = requestAnimationFrame(animateFrame);
+    return () => cancelAnimationFrame(animId);
+  }, [isVisible, type, onComplete]);
+  if (!isVisible && type !== "liquid-wave") return null;
+  if (type === "double-stairs") {
+    const COLUMNS = 5;
+    const variants = {
+      initial: (i) => ({ y: i % 2 === 0 ? "-100%" : "100%" }),
+      enter: (i) => ({
+        y: "0%",
+        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 }
+      }),
+      exit: (i) => ({
+        y: i % 2 === 0 ? "100%" : "-100%",
+        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 }
+      })
+    };
+    return /* @__PURE__ */ jsx157(
+      motion155.div,
+      {
+        className: `fixed inset-0 z-50 flex h-screen w-screen pointer-events-none ${className}`,
+        initial: "initial",
+        animate: isVisible ? "enter" : "exit",
+        onAnimationComplete: () => {
+          if (onComplete) onComplete();
+        },
+        children: [...Array(COLUMNS)].map((_, i) => /* @__PURE__ */ jsx157(
+          motion155.div,
+          {
+            variants,
+            custom: i,
+            className: "relative h-full flex-1 bg-neutral-900 border-r border-neutral-800 last:border-r-0"
+          },
+          i
+        ))
+      }
+    );
+  }
+  if (type === "liquid-wave") {
+    return /* @__PURE__ */ jsxs60(
+      "svg",
+      {
+        className: `fixed inset-0 w-full h-full pointer-events-none z-50 ${className}`,
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        children: [
+          /* @__PURE__ */ jsx157("path", { ref: (el) => {
+            pathRefs.current[0] = el;
+          }, fill: "#3f3f46", style: { opacity: 0.4 } }),
+          /* @__PURE__ */ jsx157("path", { ref: (el) => {
+            pathRefs.current[1] = el;
+          }, fill: "#27272a", style: { opacity: 0.75 } }),
+          /* @__PURE__ */ jsx157("path", { ref: (el) => {
+            pathRefs.current[2] = el;
+          }, fill: "#09090b" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx157(
+    motion155.div,
+    {
+      className: `fixed inset-0 z-50 bg-neutral-900 pointer-events-none ${className}`,
+      initial: { opacity: 0 },
+      animate: isVisible ? { opacity: 1 } : { opacity: 0 },
+      transition: { duration: 0.4 }
+    }
+  );
+};
+export {
+  AccordionLoader,
+  AppIconLoad,
+  AppleBreathe,
+  AppleEqualizer,
+  AppleIconMorph,
+  ApplePulseDots,
+  AppleScalePulse,
+  AppleSoundWave,
+  AppleTextReveal,
+  AppleUnlock,
+  ArcTracer,
+  BarCascade,
+  BarSweep,
+  BlurText,
+  BobbingDots,
+  BounceDots,
+  BouncingBars,
+  BouncingDots,
+  BouncingLines,
+  BouncingSquare,
+  BreatheRing,
+  BreathingGlow,
+  BreathingSquare,
+  CardHover,
+  CharacterStagger,
+  CircularBars,
+  ClassicSpinner,
+  ClassicToggle,
+  ClockSpinner,
+  CometSpinner,
+  ConcentricPulse,
+  ConcentricRing,
+  ConcentricSquares,
+  ConveyorLoop,
+  CrossSpinner,
+  CubeFlipSpring,
+  CursorTrail,
+  DashRing,
+  DashedSpiral,
+  DiamondGrid,
+  DiamondRotateSpring,
+  DotSpinner,
+  DotsRing,
+  DoubleRing,
+  DropDot,
+  DualArc,
+  DynamicIsland,
+  ElasticBars,
+  ElasticSquare,
+  ExpandingCross,
+  FaceIDScan,
+  FadeArc,
+  FadeDots,
+  FadeDown,
+  FadeIn,
+  FadeUp,
+  FlipSquare,
+  FloatingDiamonds,
+  FluidBars,
+  FluidDiamond,
+  FluidDotOrbit,
+  FluidSkeleton,
+  Gears,
+  GlassmorphicCard,
+  GlowButton,
+  GradientArc,
+  GridDots,
+  HapticRing,
+  Heartbeat,
+  HexagonSpinner,
+  Hourglass,
+  IOSSpinner,
+  InfinityPath,
+  IntersectingRings,
+  LineSpinner,
+  LiquidDots,
+  MacTerminal,
+  MagneticButton,
+  MagneticDots,
+  MinimalTriangle,
+  MorphDotRing,
+  MorphLoader,
+  MorphingBars,
+  MorphingInfinity,
+  MorphingRing,
+  MorphingShape,
+  MouseFollow,
+  NewtonsCradle,
+  OffsetRings,
+  OrbitingCircles,
+  OrbitingDot,
+  OrigamiShape,
+  PageTransition,
+  Pendulum,
+  ProgressIndicator,
+  PulsatingDots,
+  Pulse,
+  PulseDot,
+  PulseDots,
+  PulseSquare,
+  PumpingHeart,
+  RadarSweep,
+  RingSweep,
+  RippleEffect,
+  RotatingCross,
+  RotatingTriangle,
+  ScaleIn,
+  ScrollReveal,
+  ShapeShiftGrid,
+  ShimmerLine,
+  SiriWave,
+  Skeleton,
+  SkeletonLoader,
+  SlideLeft,
+  SlideRight,
+  SlidingBars,
+  SmoothDotShift,
+  SmoothRing,
+  SmoothRoundedSquare,
+  SpinningSquares,
+  SpiralSpinner,
+  Spotlight,
+  SpringBars,
+  SpringDotMatrix,
+  SpringHexagon,
+  SpringRingExpand,
+  SpringTextPop,
+  SquareAccordion,
+  SquareGrid,
+  SquareSnake,
+  SquareSpinner,
+  StackedBarPulse,
+  StickyReveal,
+  SwappingDots,
+  SwirlingSpinner,
+  SymmetricWave,
+  TerminalLoader,
+  TextBlink,
+  TextDots,
+  TextMorph,
+  TextReveal,
+  TextShimmer,
+  TextShimmerWave,
+  TiltCard,
+  TrailingDots,
+  TripleDotSpinner,
+  TwinOrbit,
+  Typing,
+  TypingIndicator,
+  WanderingCube,
+  WatchSpinner,
+  WaveDots,
+  WavePhysicsLoader,
+  WaveformLoader,
+  WordReveal,
+  ZigZagPulse,
+  ZoomIn,
+  cn,
+  mapRange,
+  presets,
+  useMousePosition,
+  useReducedMotion,
+  useScrollProgress,
+  useStagger,
+  useWebHaptics
+};