@sreedev/my3dui 0.1.2

package/dist/index.cjs

@@ -0,0 +1,3717 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion3D: () => Accordion3D,
+  AudioVisualizer: () => AudioVisualizer,
+  Badge: () => Badge,
+  Badge3D: () => Badge3D,
+  BarChart3D: () => BarChart3D,
+  Bloom: () => Bloom,
+  Breadcrumb: () => Breadcrumb,
+  Button3D: () => Button3D,
+  Card3D: () => Card3D,
+  Container: () => Container,
+  Dialog: () => Dialog,
+  Fog: () => Fog,
+  Gallery3D: () => Gallery3D,
+  GlowEffect: () => GlowEffect,
+  Graph3D: () => Graph3D,
+  Grid: () => Grid,
+  ImagePlane: () => ImagePlane,
+  Input: () => Input,
+  Input3D: () => Input3D,
+  LineChart3D: () => LineChart3D,
+  Map3D: () => Map3D,
+  Menu3D: () => Menu3D,
+  Menu3DItem: () => Menu3DItem,
+  Menu3DLabel: () => Menu3DLabel,
+  Menu3DSeparator: () => Menu3DSeparator,
+  Modal3D: () => Modal3D,
+  ModelViewer: () => ModelViewer,
+  NavBar3D: () => NavBar3D,
+  NoiseField: () => NoiseField,
+  PageLayout: () => PageLayout,
+  Pagination: () => Pagination,
+  Particles: () => Particles,
+  PieChart3D: () => PieChart3D,
+  Popover: () => Popover,
+  Progress: () => Progress,
+  Progress3D: () => Progress3D,
+  Reflection: () => Reflection,
+  ScatterPlot3D: () => ScatterPlot3D,
+  Section: () => Section,
+  Select: () => Select,
+  Select3D: () => Select3D,
+  ShadowSystem: () => ShadowSystem,
+  Sheet: () => Sheet,
+  Skeleton: () => Skeleton,
+  Slider: () => Slider,
+  Slider3D: () => Slider3D,
+  Spinner3D: () => Spinner3D,
+  Stack: () => Stack,
+  Stepper3D: () => Stepper3D,
+  Table: () => Table,
+  Tabs3D: () => Tabs3D,
+  Timeline3D: () => Timeline3D,
+  Toast: () => Toast,
+  Toggle: () => Toggle,
+  Toggle3D: () => Toggle3D,
+  Tooltip: () => Tooltip,
+  Tooltip3D: () => Tooltip3D,
+  VideoPlane: () => VideoPlane,
+  WaveEffect: () => WaveEffect
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/layouts/container.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/layouts/container.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Container = import_react.default.forwardRef(
+  ({ className, size = "lg", ...props }, ref) => {
+    const sizeStyles = {
+      sm: "max-w-3xl",
+      md: "max-w-5xl",
+      lg: "max-w-7xl",
+      xl: "max-w-[1400px]",
+      full: "max-w-full"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full mx-auto px-4 md:px-6 lg:px-8",
+          sizeStyles[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
+// src/components/layouts/grid.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Grid = import_react2.default.forwardRef(
+  ({ className, cols = 1, gap = 4, style, ...props }, ref) => {
+    const gridStyle = typeof cols === "number" ? { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` } : {};
+    const responsiveClasses = typeof cols === "object" ? Object.entries(cols).map(([breakpoint, val]) => {
+      return `${breakpoint}:grid-cols-${val}`;
+    }).join(" ") : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid",
+          typeof cols === "number" ? "" : responsiveClasses,
+          // using Tailwind's predefined grid-cols- if possible, but simplest is style override for arbitrary
+          className
+        ),
+        style: {
+          gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap,
+          ...gridStyle,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+
+// src/components/layouts/stack.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Stack = import_react3.default.forwardRef(
+  ({
+    className,
+    direction = "col",
+    gap = 4,
+    align = "stretch",
+    justify = "start",
+    wrap = false,
+    style,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex",
+          direction === "col" ? "flex-col" : "flex-row",
+          wrap && "flex-wrap",
+          {
+            "items-start": align === "start",
+            "items-center": align === "center",
+            "items-end": align === "end",
+            "items-stretch": align === "stretch",
+            "justify-start": justify === "start",
+            "justify-center": justify === "center",
+            "justify-end": justify === "end",
+            "justify-between": justify === "between",
+            "justify-around": justify === "around",
+            "justify-evenly": justify === "evenly"
+          },
+          className
+        ),
+        style: {
+          gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+
+// src/components/layouts/section.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Section = import_react4.default.forwardRef(
+  ({
+    className,
+    children,
+    fullWidth = false,
+    background = "default",
+    containerSize = "lg",
+    noPadding = false,
+    ...props
+  }, ref) => {
+    const backgrounds = {
+      default: "bg-background text-foreground",
+      muted: "bg-muted text-muted-foreground",
+      brand: "bg-primary text-primary-foreground",
+      glass: "bg-background/80 backdrop-blur-sm border-y border-border/50"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "section",
+      {
+        ref,
+        className: cn(
+          "relative w-full",
+          !noPadding && "py-12 md:py-24 lg:py-32",
+          backgrounds[background],
+          className
+        ),
+        ...props,
+        children: fullWidth ? children : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { size: containerSize, children })
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+
+// src/components/layouts/page-layout.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PageLayout = import_react5.default.forwardRef(
+  ({ className, header, footer, sidebar, sidebarPosition = "left", children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, className: cn("min-h-screen flex flex-col", className), ...props, children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("header", { className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 flex", children: [
+        sidebar && sidebarPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("aside", { className: "w-64 border-r bg-muted/40 p-4", children: sidebar }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("main", { className: "flex-1", children }),
+        sidebar && sidebarPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("aside", { className: "w-64 border-l bg-muted/40 p-4", children: sidebar })
+      ] }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { className: "border-t bg-muted/40", children: footer })
+    ] });
+  }
+);
+PageLayout.displayName = "PageLayout";
+
+// src/components/ui/button3d.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_framer_motion = require("framer-motion");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-lg font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none",
+  {
+    variants: {
+      variant: {
+        primary: "bg-slate-900 text-slate-50 hover:bg-slate-800 border-b-4 border-slate-950 active:border-b-0 active:translate-y-1 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200 dark:border-slate-300",
+        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200 border-b-4 border-slate-300 active:border-b-0 active:translate-y-1 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-700 dark:border-slate-950",
+        accent: "bg-cyan-500 text-white hover:bg-cyan-400 border-b-4 border-cyan-700 active:border-b-0 active:translate-y-1",
+        destructive: "bg-red-500 text-white hover:bg-red-600 border-b-4 border-red-800 active:border-b-0 active:translate-y-1",
+        outline: "bg-transparent border-2 border-slate-200 hover:bg-slate-100/50 text-slate-900 border-b-4 border-slate-300 active:border-b-2 active:translate-y-[2px] dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800",
+        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        glass: "bg-white/10 backdrop-blur-md border border-white/20 text-white hover:bg-white/20 shadow-lg active:scale-95"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-4 py-2 text-sm",
+        lg: "h-12 px-8 text-base",
+        icon: "h-10 w-10 p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default"
+    }
+  }
+);
+var Button3D = import_react6.default.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    size = "md",
+    asChild = false,
+    loading = false,
+    shadowColor,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const baseStyles = "relative inline-flex items-center justify-center whitespace-nowrap rounded-lg font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none active:scale-[0.98]";
+    const variantStyles = {
+      primary: `
+        bg-slate-900 text-slate-50 
+        hover:bg-slate-800 
+        border-b-4 border-slate-950 
+        active:border-b-0 active:translate-y-1
+        dark:bg-slate-50 dark:text-slate-900 
+        dark:hover:bg-slate-200 
+        dark:border-slate-300 dark:border-b-4
+      `,
+      secondary: `
+        bg-slate-100 text-slate-900 
+        hover:bg-slate-200 
+        border-b-4 border-slate-300
+        active:border-b-0 active:translate-y-1
+        dark:bg-slate-800 dark:text-slate-50 
+        dark:hover:bg-slate-700
+        dark:border-slate-950
+      `,
+      accent: `
+        bg-cyan-500 text-white 
+        hover:bg-cyan-400 
+        border-b-4 border-cyan-700
+        active:border-b-0 active:translate-y-1
+      `,
+      destructive: `
+        bg-red-500 text-white 
+        hover:bg-red-600 
+        border-b-4 border-red-800
+        active:border-b-0 active:translate-y-1
+      `,
+      outline: `
+        bg-transparent border-2 border-slate-200 
+        hover:bg-slate-100/50 text-slate-900 
+        border-b-4 border-slate-300
+        active:border-b-2 active:translate-y-[2px]
+        dark:border-slate-700 dark:text-slate-100
+        dark:border-b-4 dark:hover:bg-slate-800
+      `,
+      ghost: `
+        hover:bg-slate-100 
+        hover:text-slate-900 
+        dark:hover:bg-slate-800 
+        dark:hover:text-slate-50
+        border-none shadow-none translate-y-0
+      `,
+      glass: `
+        bg-white/10 backdrop-blur-md 
+        border border-white/20 
+        text-white 
+        hover:bg-white/20 
+        shadow-lg
+        active:scale-95
+      `
+    };
+    const sizeStyles = {
+      default: "h-10 px-4 py-2 text-sm",
+      sm: "h-8 px-3 text-xs",
+      md: "h-10 px-4 py-2 text-sm",
+      lg: "h-12 px-8 text-base",
+      icon: "h-10 w-10 p-0"
+    };
+    const motionProps = {
+      whileTap: { scale: 0.97 },
+      transition: { type: "spring", stiffness: 400, damping: 15 }
+    };
+    const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      ] }),
+      children
+    ] });
+    const buttonClassName = cn(
+      baseStyles,
+      variantStyles[variant],
+      sizeStyles[size],
+      className
+    );
+    const buttonStyle = {
+      ...style,
+      ...shadowColor ? { borderColor: shadowColor } : {}
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_slot.Slot,
+        {
+          ref,
+          className: buttonClassName,
+          style: buttonStyle,
+          ...props,
+          children
+        }
+      );
+    }
+    const {
+      onDrag,
+      onDragStart,
+      onDragEnd,
+      onAnimationStart,
+      onAnimationEnd,
+      onAnimationIteration,
+      ...safeProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_framer_motion.motion.button,
+      {
+        ref,
+        className: buttonClassName,
+        style: buttonStyle,
+        disabled: props.disabled || loading,
+        ...safeProps,
+        ...motionProps,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button3D.displayName = "Button3D";
+
+// src/components/ui/card3d.tsx
+var import_react7 = require("react");
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Card3D({
+  children,
+  className,
+  depth = "md",
+  variant = "glass",
+  disableTilt = false,
+  ...props
+}) {
+  const ref = (0, import_react7.useRef)(null);
+  const x = (0, import_framer_motion2.useMotionValue)(0);
+  const y = (0, import_framer_motion2.useMotionValue)(0);
+  const mouseX = (0, import_framer_motion2.useSpring)(x, { stiffness: 150, damping: 15 });
+  const mouseY = (0, import_framer_motion2.useSpring)(y, { stiffness: 150, damping: 15 });
+  const rotateX = (0, import_framer_motion2.useTransform)(mouseY, [-0.5, 0.5], ["7deg", "-7deg"]);
+  const rotateY = (0, import_framer_motion2.useTransform)(mouseX, [-0.5, 0.5], ["-7deg", "7deg"]);
+  const handleMouseMove = (e) => {
+    if (disableTilt || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    const mouseXPos = e.clientX - rect.left;
+    const mouseYPos = e.clientY - rect.top;
+    const xPct = mouseXPos / width - 0.5;
+    const yPct = mouseYPos / height - 0.5;
+    x.set(xPct);
+    y.set(yPct);
+  };
+  const handleMouseLeave = () => {
+    if (disableTilt) return;
+    x.set(0);
+    y.set(0);
+  };
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "neon":
+        return "bg-black/90 border-cyan-500/50 shadow-[0_0_30px_rgba(6,182,212,0.2)] text-cyan-50";
+      case "solid":
+        return "bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-xl text-slate-900 dark:text-slate-100";
+      case "outline":
+        return "bg-transparent border-2 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-100";
+      case "glass":
+      default:
+        return "bg-white/40 dark:bg-slate-900/60 backdrop-blur-xl border-white/40 dark:border-white/10 shadow-lg shadow-black/5 dark:shadow-black/20 text-slate-800 dark:text-white";
+    }
+  };
+  const getDepthValue = () => {
+    switch (depth) {
+      case "sm":
+        return 20;
+      case "lg":
+        return 80;
+      case "md":
+      default:
+        return 40;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_framer_motion2.motion.div,
+    {
+      ref,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        perspective: 1200,
+        transformStyle: "preserve-3d"
+      },
+      className: cn("relative group cursor-pointer", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        import_framer_motion2.motion.div,
+        {
+          style: {
+            rotateX: disableTilt ? 0 : rotateX,
+            rotateY: disableTilt ? 0 : rotateY,
+            transformStyle: "preserve-3d"
+          },
+          className: cn(
+            "relative h-full w-full rounded-xl border p-6 transition-colors duration-300",
+            getVariantStyles()
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: "absolute inset-0 rounded-xl bg-black/10 dark:bg-black/40 blur-xl transition-all duration-300 -z-20",
+                style: {
+                  transform: `translateZ(-${getDepthValue()}px) scale(0.95)`,
+                  opacity: 0.6
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { transform: "translateZ(20px)" }, children }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: "absolute inset-0 rounded-xl pointer-events-none bg-gradient-to-tr from-white/0 via-white/10 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 will-change-transform",
+                style: { mixBlendMode: "overlay" }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/accordion3d.tsx
+var import_react8 = require("react");
+var import_framer_motion3 = require("framer-motion");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Accordion3D = ({
+  items,
+  className,
+  variant = "glass",
+  defaultOpenIndex = null,
+  allowMultiple = false
+}) => {
+  const [openIndexes, setOpenIndexes] = (0, import_react8.useState)(
+    defaultOpenIndex !== null ? [defaultOpenIndex] : []
+  );
+  const toggleItem = (index) => {
+    if (allowMultiple) {
+      setOpenIndexes(
+        (prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+      );
+    } else {
+      setOpenIndexes(
+        (prev) => prev.includes(index) ? [] : [index]
+      );
+    }
+  };
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "neon":
+        return "bg-slate-900/90 border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.15)] hover:shadow-[0_0_25px_rgba(6,182,212,0.3)] text-cyan-50";
+      case "solid":
+        return "bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 shadow-xl text-slate-900 dark:text-slate-100";
+      case "minimal":
+        return "bg-white/80 dark:bg-black/50 border-transparent shadow-sm backdrop-blur-md text-slate-800 dark:text-slate-200 hover:bg-white/95 dark:hover:bg-slate-900/80";
+      case "glass":
+      default:
+        return "bg-white/40 dark:bg-slate-900/60 backdrop-blur-xl border-white/40 dark:border-white/10 shadow-lg shadow-black/5 dark:shadow-black/20 text-slate-800 dark:text-white";
+    }
+  };
+  const getDepthLayerStyles = () => {
+    switch (variant) {
+      case "neon":
+        return "bg-cyan-900/40";
+      case "minimal":
+        return "hidden";
+      case "solid":
+        return "bg-slate-200 dark:bg-slate-900";
+      case "glass":
+      default:
+        return "bg-slate-900/10 dark:bg-black/40";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("flex flex-col gap-4 w-full max-w-2xl mx-auto", className), children: items.map((item, index) => {
+    const isOpen = openIndexes.includes(index);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_framer_motion3.motion.div,
+      {
+        initial: false,
+        animate: isOpen ? "open" : "closed",
+        className: "relative group perspective-[1000px] z-0",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_framer_motion3.motion.div,
+            {
+              className: cn(
+                "absolute inset-0 rounded-xl translate-y-2 translate-x-0 -z-10 transition-colors duration-300",
+                getDepthLayerStyles()
+              ),
+              variants: {
+                open: {
+                  translateY: 4,
+                  scale: 0.99
+                },
+                closed: {
+                  translateY: 8,
+                  scale: 0.96
+                }
+              },
+              transition: { duration: 0.2 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            import_framer_motion3.motion.div,
+            {
+              className: cn(
+                "relative overflow-hidden rounded-xl border transition-all duration-300 will-change-transform z-10",
+                getVariantStyles()
+              ),
+              whileHover: {
+                y: -2,
+                scale: 1.005,
+                transition: { type: "spring", stiffness: 400, damping: 25 }
+              },
+              whileTap: { scale: 0.995, y: 0 },
+              variants: {
+                open: { y: 0 },
+                closed: { y: 0 }
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  "button",
+                  {
+                    onClick: () => toggleItem(index),
+                    className: "w-full flex items-center justify-between p-5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 rounded-xl",
+                    "aria-expanded": isOpen,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-4", children: [
+                        item.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          "div",
+                          {
+                            className: cn(
+                              "flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br transition-all duration-500 shadow-inner",
+                              variant === "neon" ? "from-cyan-500/20 to-blue-600/20 text-cyan-400" : variant === "solid" ? "from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 text-slate-600 dark:text-slate-300" : "from-white/50 to-white/10 dark:from-white/10 dark:to-white/5 text-slate-700 dark:text-slate-200"
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("transition-transform duration-300", isOpen ? "scale-110" : "scale-100"), children: item.icon })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(
+                            "text-lg font-semibold tracking-tight transition-colors",
+                            isOpen ? "opacity-100" : "opacity-80 group-hover:opacity-100"
+                          ), children: item.title }),
+                          isOpen && item.value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs opacity-60 font-mono", children: item.value })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(
+                          "w-2 h-2 rounded-full transition-all duration-500",
+                          isOpen ? variant === "neon" ? "bg-cyan-400 shadow-[0_0_10px_#22d3ee]" : "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]" : "bg-slate-400/30"
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          import_framer_motion3.motion.div,
+                          {
+                            variants: {
+                              open: { rotate: 180 },
+                              closed: { rotate: 0 }
+                            },
+                            transition: { type: "spring", stiffness: 200, damping: 20 },
+                            className: cn(
+                              "p-1 rounded-full",
+                              variant === "neon" ? "text-cyan-400" : "text-slate-500 dark:text-slate-400"
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react.ChevronDown, { className: "w-5 h-5" })
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_framer_motion3.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_framer_motion3.motion.div,
+                  {
+                    initial: "collapsed",
+                    animate: "open",
+                    exit: "collapsed",
+                    variants: {
+                      open: { opacity: 1, height: "auto" },
+                      collapsed: { opacity: 0, height: 0 }
+                    },
+                    transition: {
+                      duration: 0.4,
+                      ease: [0.04, 0.62, 0.23, 0.98]
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "px-5 pb-6 pt-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      import_framer_motion3.motion.div,
+                      {
+                        initial: { opacity: 0 },
+                        animate: { opacity: 1 },
+                        transition: { delay: 0.1, duration: 0.3 },
+                        className: "relative",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-px w-full bg-gradient-to-r from-transparent via-current to-transparent opacity-10 mb-5" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-base sm:text-[15px] opacity-80 leading-relaxed font-normal pl-14", children: item.content })
+                        ]
+                      }
+                    ) })
+                  },
+                  "content"
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "div",
+                  {
+                    className: "absolute inset-0 pointer-events-none bg-gradient-to-tr from-white/0 via-white/5 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-700",
+                    style: { mixBlendMode: "overlay" }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      index
+    );
+  }) });
+};
+
+// src/components/ui/badge3d.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Badge3D = import_react9.default.forwardRef(
+  ({ className, variant = "default", size = "md", pulse = false, children, ...props }, ref) => {
+    const variants = {
+      default: "bg-primary text-primary-foreground border-b-2 border-primary/80 shadow-sm",
+      secondary: "bg-secondary text-secondary-foreground border-b-2 border-secondary/80 shadow-sm",
+      success: "bg-emerald-500 text-white border-b-2 border-emerald-700 shadow-sm",
+      warning: "bg-amber-500 text-white border-b-2 border-amber-700 shadow-sm",
+      danger: "bg-red-500 text-white border-b-2 border-red-700 shadow-sm",
+      outline: "border-2 border-border bg-background text-foreground border-b-4 shadow-sm"
+    };
+    const sizes = {
+      sm: "px-2 py-0.5 text-xs",
+      md: "px-2.5 py-1 text-sm",
+      lg: "px-3 py-1.5 text-base"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_framer_motion4.motion.div,
+      {
+        ref,
+        whileHover: { y: -1, scale: 1.05 },
+        whileTap: { y: 0, scale: 0.98 },
+        className: cn(
+          "inline-flex items-center rounded-md font-medium transition-all active:translate-y-[2px] active:border-b-0",
+          variants[variant],
+          sizes[size],
+          pulse && "animate-pulse",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Badge3D.displayName = "Badge3D";
+
+// src/components/ui/input3d.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_framer_motion5 = require("framer-motion");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Input3D = import_react10.default.forwardRef(
+  ({ className, label, error, icon, type = "text", ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full space-y-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        import_framer_motion5.motion.div,
+        {
+          animate: {
+            y: isFocused ? -2 : 0
+          },
+          transition: { type: "spring", stiffness: 300, damping: 20 },
+          className: "relative",
+          children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "input",
+              {
+                ref,
+                type,
+                onFocus: () => setIsFocused(true),
+                onBlur: () => setIsFocused(false),
+                className: cn(
+                  "flex h-11 w-full rounded-lg border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all",
+                  "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+                  "placeholder:text-muted-foreground",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-primary",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  "border-b-4 border-b-slate-300 dark:border-b-slate-700",
+                  "focus:border-b-primary",
+                  error && "border-red-500 focus-visible:ring-red-500",
+                  icon && "pl-10",
+                  className
+                ),
+                ...props
+              }
+            )
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-red-500", children: error })
+    ] });
+  }
+);
+Input3D.displayName = "Input3D";
+
+// src/components/ui/slider3d.tsx
+var import_react11 = require("react");
+var import_framer_motion6 = require("framer-motion");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Slider3D({
+  value: controlledValue,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  label,
+  showValue = true,
+  className,
+  disabled = false
+}) {
+  const [internalValue, setInternalValue] = (0, import_react11.useState)(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const handleChange = (e) => {
+    const newValue = parseFloat(e.target.value);
+    if (!isControlled) setInternalValue(newValue);
+    onChange?.(newValue);
+  };
+  const percentage = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "text-sm font-medium", children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm font-mono text-muted-foreground", children: value })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-3 w-full rounded-full bg-slate-200 dark:bg-slate-800 border-b-2 border-slate-300 dark:border-slate-900 shadow-inner" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_framer_motion6.motion.div,
+        {
+          className: "absolute top-0 left-0 h-3 rounded-full bg-primary border-b-2 border-primary/80",
+          style: { width: `${percentage}%` },
+          initial: false,
+          animate: { width: `${percentage}%` },
+          transition: { type: "spring", stiffness: 300, damping: 30 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          disabled,
+          className: "absolute top-0 left-0 w-full h-3 opacity-0 cursor-pointer disabled:cursor-not-allowed"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_framer_motion6.motion.div,
+        {
+          className: cn(
+            "absolute top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-white border-2 border-primary shadow-lg pointer-events-none",
+            disabled && "opacity-50"
+          ),
+          style: { left: `calc(${percentage}% - 12px)` },
+          whileHover: { scale: 1.2 },
+          whileTap: { scale: 0.9 }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ui/tabs3d.tsx
+var import_react12 = require("react");
+var import_framer_motion7 = require("framer-motion");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Tabs3D({
+  tabs,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  className,
+  variant = "default"
+}) {
+  const [internalValue, setInternalValue] = (0, import_react12.useState)(defaultValue || tabs[0]?.value);
+  const isControlled = controlledValue !== void 0;
+  const activeValue = isControlled ? controlledValue : internalValue;
+  const handleTabChange = (value) => {
+    if (!isControlled) setInternalValue(value);
+    onValueChange?.(value);
+  };
+  const activeTab = tabs.find((tab) => tab.value === activeValue);
+  const activeIndex = tabs.findIndex((tab) => tab.value === activeValue);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex gap-1 mb-4",
+          variant === "default" && "bg-muted p-1 rounded-lg",
+          variant === "pills" && "gap-2",
+          variant === "underline" && "border-b border-border"
+        ),
+        children: tabs.map((tab, index) => {
+          const isActive = tab.value === activeValue;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "button",
+            {
+              onClick: () => handleTabChange(tab.value),
+              className: cn(
+                "relative px-4 py-2 text-sm font-medium transition-all rounded-md",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                variant === "default" && [
+                  isActive ? "bg-background text-foreground shadow-sm border-b-2 border-primary" : "text-muted-foreground hover:text-foreground"
+                ],
+                variant === "pills" && [
+                  isActive ? "bg-primary text-primary-foreground border-b-2 border-primary/80" : "bg-muted text-muted-foreground hover:bg-muted/80"
+                ],
+                variant === "underline" && [
+                  "rounded-none border-b-2",
+                  isActive ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+                ]
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-2", children: [
+                  tab.icon,
+                  tab.label
+                ] }),
+                isActive && variant === "default" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  import_framer_motion7.motion.div,
+                  {
+                    layoutId: "activeTab",
+                    className: "absolute inset-0 bg-background rounded-md -z-10 shadow-sm",
+                    transition: { type: "spring", stiffness: 300, damping: 30 }
+                  }
+                )
+              ]
+            },
+            tab.value
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_framer_motion7.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_framer_motion7.motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.2 },
+        children: activeTab?.content
+      },
+      activeValue
+    ) })
+  ] });
+}
+
+// src/components/ui/toggle3d.tsx
+var import_react13 = require("react");
+var import_framer_motion8 = require("framer-motion");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Toggle3D({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  variant = "pill",
+  label
+}) {
+  const [internalChecked, setInternalChecked] = (0, import_react13.useState)(defaultChecked);
+  const isControlled = controlledChecked !== void 0;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleToggle = () => {
+    if (disabled) return;
+    const newChecked = !isChecked;
+    if (!isControlled) setInternalChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "neon":
+        return isChecked ? "bg-slate-900 border border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.4)]" : "bg-slate-900 border border-slate-700";
+      case "glass":
+        return "bg-white/20 backdrop-blur-md border border-white/30 shadow-inner";
+      case "pill":
+      default:
+        return isChecked ? "bg-primary shadow-inner" : "bg-slate-200 dark:bg-slate-700 shadow-inner";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "button",
+      {
+        onClick: handleToggle,
+        className: cn(
+          "relative h-8 w-14 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          disabled && "opacity-50 cursor-not-allowed",
+          getVariantStyles()
+        ),
+        role: "switch",
+        "aria-checked": isChecked,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_framer_motion8.motion.div,
+            {
+              className: cn(
+                "absolute top-1 left-1 h-6 w-6 rounded-full shadow-md z-10",
+                variant === "neon" && isChecked ? "bg-cyan-400 shadow-[0_0_10px_#22d3ee]" : "bg-white"
+              ),
+              animate: {
+                x: isChecked ? 24 : 0,
+                scale: disabled ? 0.9 : 1
+              },
+              transition: {
+                type: "spring",
+                stiffness: 500,
+                damping: 30
+              }
+            }
+          ),
+          variant !== "neon" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 rounded-full border-b-[3px] border-black/5 pointer-events-none",
+                isChecked ? "border-black/10" : "border-black/5"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm font-medium", children: label })
+  ] });
+}
+
+// src/components/ui/modal3d.tsx
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_lucide_react2 = require("lucide-react");
+var import_framer_motion9 = require("framer-motion");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Modal3D({
+  open,
+  onOpenChange,
+  children,
+  trigger,
+  title,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Root, { open, onOpenChange, children: [
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion9.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogPrimitive.Overlay, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_framer_motion9.motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogPrimitive.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_framer_motion9.motion.div,
+        {
+          initial: { opacity: 0, scale: 0.95, y: 10 },
+          animate: { opacity: 1, scale: 1, y: 0 },
+          exit: { opacity: 0, scale: 0.95, y: 10 },
+          transition: { type: "spring", duration: 0.3 },
+          className: cn(
+            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg",
+            "bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-white/20 shadow-2xl",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col space-y-1.5 text-center sm:text-left", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogPrimitive.Title, { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogPrimitive.Description, { className: "text-sm text-muted-foreground", children: description })
+            ] }),
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.X, { className: "h-4 w-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: "Close" })
+            ] })
+          ]
+        }
+      ) })
+    ] }) : null })
+  ] });
+}
+
+// src/components/ui/menu3d.tsx
+var import_react14 = __toESM(require("react"), 1);
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Menu3DContext = import_react14.default.createContext({});
+function Menu3D({ children, trigger, align = "end" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DropdownMenuPrimitive.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      DropdownMenuPrimitive.Content,
+      {
+        align,
+        className: cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border-white/20 shadow-xl"
+        ),
+        children
+      }
+    ) })
+  ] });
+}
+var Menu3DItem = import_react14.default.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+Menu3DItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var Menu3DLabel = import_react14.default.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+Menu3DLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var Menu3DSeparator = import_react14.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+Menu3DSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+// src/components/ui/tooltip3d.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Tooltip3D({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  delayDuration = 200
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      TooltipPrimitive.Content,
+      {
+        side,
+        align,
+        className: cn(
+          "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 border-none shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)]"
+        ),
+        children: [
+          content,
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipPrimitive.Arrow, { className: "fill-slate-900 dark:fill-slate-100" })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/ui/progress3d.tsx
+var import_framer_motion10 = require("framer-motion");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Progress3D({
+  value,
+  max = 100,
+  variant = "default",
+  size = "md",
+  showLabel = false,
+  label,
+  className,
+  animated = true
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const variants = {
+    default: "bg-primary border-primary/80",
+    success: "bg-emerald-500 border-emerald-700",
+    warning: "bg-amber-500 border-amber-700",
+    danger: "bg-red-500 border-red-700"
+  };
+  const sizes = {
+    sm: "h-2",
+    md: "h-3",
+    lg: "h-4"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
+    (label || showLabel) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "font-medium", children: label }),
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-muted-foreground font-mono", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        className: cn(
+          "w-full rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden shadow-inner border-b-2 border-slate-300 dark:border-slate-900",
+          sizes[size]
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_framer_motion10.motion.div,
+          {
+            className: cn(
+              "h-full rounded-full border-b-2 shadow-sm",
+              variants[variant],
+              animated && "transition-all"
+            ),
+            initial: { width: 0 },
+            animate: { width: `${percentage}%` },
+            transition: {
+              duration: animated ? 0.5 : 0,
+              ease: "easeOut"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/ui/select3d.tsx
+var import_drei = require("@react-three/drei");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Select3D({
+  options,
+  value,
+  onChange,
+  width = 200
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_drei.Html, { transform: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "select",
+    {
+      className: cn(
+        "px-3 py-2 bg-background/80 backdrop-blur border rounded text-foreground outline-none focus:ring-2 focus:ring-primary"
+      ),
+      style: { width },
+      value,
+      onChange: (e) => onChange?.(e.target.value),
+      children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+    }
+  ) });
+}
+
+// src/components/ui/spinner3d.tsx
+var import_react15 = require("react");
+var import_fiber = require("@react-three/fiber");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Spinner3D({
+  size = "md",
+  color = "#22d3ee",
+  speed = 1
+}) {
+  const ref = (0, import_react15.useRef)(null);
+  const scale = size === "sm" ? 0.5 : size === "lg" ? 1.5 : 1;
+  (0, import_fiber.useFrame)((state, delta) => {
+    if (ref.current) {
+      ref.current.rotation.z -= delta * speed * 3;
+      ref.current.rotation.x -= delta * speed * 1;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("group", { ref, scale: [scale, scale, scale], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mesh", { rotation: [Math.PI / 4, 0, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("torusGeometry", { args: [0.5, 0.05, 16, 32] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("meshStandardMaterial", { color, emissive: color })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("mesh", { rotation: [-Math.PI / 4, 0, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("torusGeometry", { args: [0.4, 0.05, 16, 32] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("meshStandardMaterial", { color })
+    ] })
+  ] });
+}
+
+// src/components/ui/stepper3d.tsx
+var import_drei2 = require("@react-three/drei");
+var import_three = require("three");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Stepper3D({
+  steps,
+  activeStep = 0,
+  gap = 2
+}) {
+  const points = steps.map((_, i) => new import_three.Vector3((i - (steps.length - 1) / 2) * gap, 0, 0));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("group", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_drei2.Line,
+      {
+        points,
+        color: "#333",
+        lineWidth: 2
+      }
+    ),
+    activeStep > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_drei2.Line,
+      {
+        points: points.slice(0, activeStep + 1),
+        color: "#22d3ee",
+        lineWidth: 4
+      }
+    ),
+    steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("group", { position: points[i], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("mesh", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("sphereGeometry", { args: [0.3, 32, 32] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("meshStandardMaterial", { color: i <= activeStep ? "#22d3ee" : "#333" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_drei2.Text,
+        {
+          position: [0, -0.6, 0],
+          fontSize: 0.2,
+          color: i <= activeStep ? "white" : "#666",
+          anchorX: "center",
+          anchorY: "top",
+          children: label
+        }
+      )
+    ] }, i))
+  ] });
+}
+
+// src/components/ui/navbar3d.tsx
+var import_react16 = require("react");
+var import_drei3 = require("@react-three/drei");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function NavBar3D({ items, activeHref = "/" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("group", { position: [0, -2, 0], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("mesh", { position: [0, 0, -0.1], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("boxGeometry", { args: [items.length * 2, 1, 0.2] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("meshStandardMaterial", { color: "#1a1a1a", transparent: true, opacity: 0.8 })
+    ] }),
+    items.map((item, i) => {
+      const x = (i - (items.length - 1) / 2) * 2;
+      const isActive = activeHref === item.href;
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(NavBarItemMesh, { item, x, isActive }, i);
+    })
+  ] });
+}
+function NavBarItemMesh({ item, x, isActive }) {
+  const [hovered, setHover] = (0, import_react16.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("group", { position: [x, 0, 0], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "mesh",
+      {
+        onPointerOver: () => setHover(true),
+        onPointerOut: () => setHover(false),
+        onClick: () => window.location.href = item.href,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("planeGeometry", { args: [1.8, 0.8] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("meshStandardMaterial", { color: isActive ? "#22d3ee" : hovered ? "#333" : "transparent", transparent: true, opacity: isActive ? 0.3 : hovered ? 0.5 : 0 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_drei3.Text,
+      {
+        fontSize: 0.2,
+        color: isActive || hovered ? "white" : "#888",
+        anchorX: "center",
+        anchorY: "middle",
+        children: item.label
+      }
+    )
+  ] });
+}
+
+// src/components/ui/timeline3d.tsx
+var import_drei4 = require("@react-three/drei");
+var import_three2 = require("three");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Timeline3D({
+  events,
+  orientation = "horizontal",
+  gap = 3
+}) {
+  const points = events.map((_, i) => {
+    return orientation === "horizontal" ? new import_three2.Vector3((i - (events.length - 1) / 2) * gap, 0, 0) : new import_three2.Vector3(0, (i - (events.length - 1) / 2) * -gap, 0);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("group", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_drei4.Line, { points, color: "#555", lineWidth: 1 }),
+    events.map((ev, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("group", { position: points[i], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("mesh", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("sphereGeometry", { args: [0.2, 16, 16] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("meshStandardMaterial", { color: "#22d3ee" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("group", { position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_drei4.Text,
+          {
+            fontSize: 0.3,
+            color: "white",
+            anchorY: "bottom",
+            children: ev.date
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_drei4.Text,
+          {
+            position: [0, -0.3, 0],
+            fontSize: 0.25,
+            color: "#ccc",
+            anchorY: "top",
+            children: ev.title
+          }
+        )
+      ] })
+    ] }, i))
+  ] });
+}
+
+// src/components/ui/tooltip.tsx
+var React17 = __toESM(require("react"), 1);
+var TooltipPrimitive2 = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Tooltip = TooltipPrimitive2.Root;
+var TooltipContent = React17.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  TooltipPrimitive2.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive2.Content.displayName;
+
+// src/components/ui/slider.tsx
+var React18 = __toESM(require("react"), 1);
+var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Slider = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+// src/components/ui/toggle.tsx
+var React19 = __toESM(require("react"), 1);
+var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = React19.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TogglePrimitive.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+// src/components/ui/badge.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/ui/input.tsx
+var React20 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Input = React20.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/ui/select.tsx
+var React21 = __toESM(require("react"), 1);
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Select = SelectPrimitive.Root;
+var SelectTrigger = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react3.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react3.ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react3.ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React21.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectScrollUpButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectPrimitive.Label, { ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props }));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react3.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/ui/table.tsx
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Table = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
+);
+Table.displayName = "Table";
+var TableHeader = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "tr",
+    {
+      ref,
+      className: cn("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", className),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React22.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+
+// src/components/ui/pagination.tsx
+var React23 = __toESM(require("react"), 1);
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "pagination",
+    className: cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+Pagination.displayName = "Pagination";
+var PaginationContent = React23.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { ref, className: cn("flex flex-row items-center gap-1", className), ...props })
+);
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { ref, className: cn("", className), ...props }));
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = ({ className, isActive, size = "icon", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  "a",
+  {
+    "aria-current": isActive ? "page" : void 0,
+    className: cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size
+      }),
+      className
+    ),
+    ...props
+  }
+);
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("gap-1 pl-2.5", className), ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "Previous" })
+] });
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("gap-1 pr-2.5", className), ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "Next" }),
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" })
+] });
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { "aria-hidden": true, className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react4.MoreHorizontal, { className: "h-4 w-4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "sr-only", children: "More pages" })
+] });
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+// src/components/ui/progress.tsx
+var React24 = __toESM(require("react"), 1);
+var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Progress = React24.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    className: cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      ProgressPrimitive.Indicator,
+      {
+        className: "h-full w-full flex-1 bg-primary transition-all",
+        style: { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    )
+  }
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+// src/components/ui/skeleton.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+}
+
+// src/components/ui/toast.tsx
+var React25 = __toESM(require("react"), 1);
+var ToastPrimitives = __toESM(require("@radix-ui/react-toast"), 1);
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ToastViewport = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+var toastVariants = (0, import_class_variance_authority4.cva)(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React25.forwardRef(({ className, variant, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastPrimitives.Root, { ref, className: cn(toastVariants({ variant }), className), ...props });
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastAction = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+var ToastClose = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  ToastPrimitives.Close,
+  {
+    ref,
+    className: cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    ),
+    "toast-close": "",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react5.X, { className: "h-4 w-4" })
+  }
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastTitle = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastPrimitives.Title, { ref, className: cn("text-sm font-semibold", className), ...props }));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+var ToastDescription = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToastPrimitives.Description, { ref, className: cn("text-sm opacity-90", className), ...props }));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+// src/components/ui/popover.tsx
+var React26 = __toESM(require("react"), 1);
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/ui/sheet.tsx
+var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_lucide_react6 = require("lucide-react");
+var React27 = __toESM(require("react"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Sheet = SheetPrimitive.Root;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = (0, import_class_variance_authority5.cva)(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React27.forwardRef(
+  ({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SheetPrimitive.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react6.X, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: "Close" })
+      ] })
+    ] })
+  ] })
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SheetPrimitive.Title, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props }));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SheetPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+// src/components/ui/dialog.tsx
+var React28 = __toESM(require("react"), 1);
+var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Dialog = DialogPrimitive2.Root;
+var DialogPortal = DialogPrimitive2.Portal;
+var DialogOverlay = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  DialogPrimitive2.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive2.Overlay.displayName;
+var DialogContent = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    DialogPrimitive2.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DialogPrimitive2.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react7.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive2.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  DialogPrimitive2.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive2.Title.displayName;
+var DialogDescription = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DialogPrimitive2.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+DialogDescription.displayName = DialogPrimitive2.Description.displayName;
+
+// src/components/ui/breadcrumb.tsx
+var React29 = __toESM(require("react"), 1);
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Breadcrumb = React29.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React29.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className
+      ),
+      ...props
+    }
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React29.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React29.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? import_react_slot2.Slot : "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Comp, { ref, className: cn("transition-colors hover:text-foreground", className), ...props });
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React29.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("font-normal text-foreground", className),
+      ...props
+    }
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.ChevronRight, {}) });
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("flex h-9 w-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.MoreHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "sr-only", children: "More" })
+    ]
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+// src/components/ui/barchart3d.tsx
+var import_react17 = require("react");
+var import_fiber2 = require("@react-three/fiber");
+var import_drei5 = require("@react-three/drei");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function BarChart3D({
+  data,
+  orientation = "vertical",
+  barSize = 0.5,
+  gap = 0.2,
+  animated = true
+}) {
+  const maxValue = (0, import_react17.useMemo)(() => Math.max(...data.map((d) => d.value)), [data]);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("group", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("gridHelper", { args: [data.length * (barSize + gap) + 2, 10], position: [0, 0, 0] }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_drei5.Instances, { range: data.length, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("boxGeometry", { args: [barSize, 1, barSize] }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("meshStandardMaterial", { roughness: 0.3, metalness: 0.6 }),
+      data.map((item, index) => {
+        const height = item.value / maxValue * 5;
+        const x = (index - data.length / 2) * (barSize + gap);
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("group", { position: [x, 0, 0], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            BarInstance,
+            {
+              height,
+              color: item.color || "#8884d8",
+              animated
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            import_drei5.Text,
+            {
+              position: [0, -0.5, 0],
+              fontSize: 0.2,
+              color: "black",
+              anchorX: "center",
+              anchorY: "top",
+              children: item.label
+            }
+          )
+        ] }, index);
+      })
+    ] })
+  ] });
+}
+function BarInstance({ height, color, animated }) {
+  const ref = (0, import_react17.useRef)(null);
+  const [hovered, setHover] = (0, import_react17.useState)(false);
+  (0, import_fiber2.useFrame)((state, delta) => {
+    if (ref.current) {
+      const targetHeight = height;
+      const targetY = height / 2;
+      if (animated) {
+        ref.current.scale.y += (targetHeight - ref.current.scale.y) * delta * 5;
+        ref.current.position.y += (targetY - ref.current.position.y) * delta * 5;
+      } else {
+        ref.current.scale.y = targetHeight;
+        ref.current.position.y = targetY;
+      }
+      if (hovered) {
+      }
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_drei5.Instance,
+    {
+      ref,
+      color: hovered ? "orange" : color,
+      onPointerOver: () => setHover(true),
+      onPointerOut: () => setHover(false)
+    }
+  );
+}
+
+// src/components/ui/linechart3d.tsx
+var import_react18 = require("react");
+var import_drei6 = require("@react-three/drei");
+var import_three3 = require("three");
+var import_jsx_runtime39 = (
+  // Render curve
+  require("react/jsx-runtime")
+);
+function LineChart3D({
+  data,
+  smooth = true,
+  color = "#22d3ee",
+  lineWidth = 3,
+  showPoints = true
+}) {
+  const points = (0, import_react18.useMemo)(() => {
+    if (data.length === 0) return [];
+    const maxX = Math.max(...data.map((d) => d.x));
+    const maxY = Math.max(...data.map((d) => d.y));
+    return data.map((d) => new import_three3.Vector3(
+      d.x / (maxX || 1) * 10 - 5,
+      // Center X
+      d.y / (maxY || 1) * 5,
+      // Y up
+      0
+    ));
+  }, [data]);
+  const curve = (0, import_react18.useMemo)(() => {
+    if (points.length < 2 || !smooth) return null;
+    return new import_three3.CatmullRomCurve3(points);
+  }, [points, smooth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("group", { children: [
+    smooth && curve ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("mesh", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tubeGeometry", { args: [curve, 64, 0.05, 8, false] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("meshStandardMaterial", { color, emissive: color, emissiveIntensity: 0.5 })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_drei6.Line,
+      {
+        points,
+        color,
+        lineWidth,
+        segments: true
+      }
+    ),
+    showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("mesh", { position: p, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("sphereGeometry", { args: [0.1, 16, 16] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("meshStandardMaterial", { color: "white" })
+    ] }, i)),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("gridHelper", { args: [12, 12], rotation: [Math.PI / 2, 0, 0], position: [0, 2.5, -0.1] })
+  ] });
+}
+
+// src/components/ui/piechart3d.tsx
+var import_react19 = __toESM(require("react"), 1);
+var import_three4 = require("three");
+var import_fiber3 = require("@react-three/fiber");
+var import_drei7 = require("@react-three/drei");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function PieChart3D({
+  data,
+  radius = 5,
+  depth = 1,
+  explode = true,
+  donut = false
+}) {
+  const total = (0, import_react19.useMemo)(() => data.reduce((acc, cur) => acc + cur.value, 0), [data]);
+  let startAngle = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("group", { rotation: [-Math.PI / 2, 0, 0], children: [
+    " ",
+    data.map((item, index) => {
+      const percent = item.value / total;
+      const angle = percent * Math.PI * 2;
+      const endAngle = startAngle + angle;
+      const props = {
+        startAngle,
+        endAngle,
+        radius,
+        color: item.color || `hsl(${index / data.length * 360}, 70%, 50%)`,
+        depth,
+        explode,
+        innerRadius: donut ? radius * 0.5 : 0
+      };
+      startAngle = endAngle;
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PieSegment, { ...props, label: item.label }, index);
+    })
+  ] });
+}
+function PieSegment({ startAngle, endAngle, radius, color, depth, explode, innerRadius, label }) {
+  const shape = (0, import_react19.useMemo)(() => {
+    const s = new import_three4.Shape();
+    if (innerRadius > 0) {
+      s.moveTo(Math.cos(startAngle) * radius, Math.sin(startAngle) * radius);
+      s.absarc(0, 0, radius, startAngle, endAngle, false);
+      const hole = new import_three4.Shape();
+      hole.absarc(0, 0, innerRadius, startAngle, endAngle, false);
+      s.holes.push(hole);
+    } else {
+      s.moveTo(0, 0);
+      s.arc(0, 0, radius, startAngle, endAngle, false);
+      s.lineTo(0, 0);
+    }
+    return s;
+  }, [startAngle, endAngle, radius, innerRadius]);
+  const [hovered, setHover] = (0, import_react19.useState)(false);
+  const ref = import_react19.default.useRef(null);
+  const midAngle = (startAngle + endAngle) / 2;
+  const explodeDir = [Math.cos(midAngle), Math.sin(midAngle), 0];
+  (0, import_fiber3.useFrame)((state, delta) => {
+    if (ref.current && explode) {
+      const targetDist = hovered ? 0.5 : 0;
+      ref.current.position.x += (explodeDir[0] * targetDist - ref.current.position.x) * delta * 5;
+      ref.current.position.y += (explodeDir[1] * targetDist - ref.current.position.y) * delta * 5;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("group", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      "mesh",
+      {
+        onPointerOver: () => setHover(true),
+        onPointerOut: () => setHover(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("extrudeGeometry", { args: [shape, { depth, bevelEnabled: false }] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("meshStandardMaterial", { color: hovered ? "white" : color })
+        ]
+      }
+    ),
+    hovered && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_drei7.Text,
+      {
+        position: [explodeDir[0] * radius * 0.8, explodeDir[1] * radius * 0.8, depth + 0.1],
+        fontSize: 0.5,
+        color: "black",
+        children: label
+      }
+    )
+  ] });
+}
+
+// src/components/ui/scatterplot3d.tsx
+var import_react20 = require("react");
+var import_drei8 = require("@react-three/drei");
+var import_three5 = require("three");
+var import_fiber4 = require("@react-three/fiber");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function ScatterPlot3D({
+  data,
+  pointSize = 0.1,
+  colorScale = ["#22d3ee", "#a78bfa"]
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("group", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_drei8.Instances, { range: data.length, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("sphereGeometry", { args: [1, 16, 16] }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("meshStandardMaterial", {}),
+      data.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        ScatterPointInstance,
+        {
+          position: [point.x, point.y, point.z],
+          scale: point.size || pointSize,
+          color: point.color || colorScale[i % colorScale.length]
+        },
+        i
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("axesHelper", { args: [10] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("gridHelper", { args: [20, 20], position: [0, -5, 0] })
+  ] });
+}
+function ScatterPointInstance({ position, scale, color }) {
+  const ref = (0, import_react20.useRef)(null);
+  const [hovered, setHover] = (0, import_react20.useState)(false);
+  (0, import_fiber4.useFrame)((state) => {
+    if (ref.current) {
+      const s = hovered ? scale * 1.5 : scale;
+      const target = new import_three5.Vector3(s, s, s);
+      ref.current.scale.lerp(target, 0.1);
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_drei8.Instance,
+    {
+      ref,
+      position,
+      scale,
+      color: hovered ? "white" : color,
+      onPointerOver: () => setHover(true),
+      onPointerOut: () => setHover(false)
+    }
+  );
+}
+
+// src/components/ui/graph3d.tsx
+var import_react21 = require("react");
+var import_drei9 = require("@react-three/drei");
+var import_three6 = require("three");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function Graph3D({ nodes, edges, physics = false }) {
+  const positionedNodes = (0, import_react21.useMemo)(() => {
+    return nodes.map((node, i) => ({
+      ...node,
+      vec: new import_three6.Vector3(
+        node.x ?? (Math.random() - 0.5) * 10,
+        node.y ?? (Math.random() - 0.5) * 10,
+        node.z ?? (Math.random() - 0.5) * 10
+      )
+    }));
+  }, [nodes]);
+  const nodeMap = (0, import_react21.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    positionedNodes.forEach((n) => map.set(n.id, n.vec));
+    return map;
+  }, [positionedNodes]);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("group", { children: [
+    edges.map((edge, i) => {
+      const start = nodeMap.get(edge.source);
+      const end = nodeMap.get(edge.target);
+      if (!start || !end) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        import_drei9.Line,
+        {
+          points: [start, end],
+          color: "#444",
+          lineWidth: 1,
+          transparent: true,
+          opacity: 0.5
+        },
+        i
+      );
+    }),
+    positionedNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("group", { position: node.vec, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("mesh", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("sphereGeometry", { args: [0.2, 16, 16] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("meshStandardMaterial", { color: node.color || "#22d3ee" })
+      ] }),
+      node.label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        import_drei9.Text,
+        {
+          position: [0, 0.3, 0],
+          fontSize: 0.2,
+          color: "white",
+          children: node.label
+        }
+      )
+    ] }, i))
+  ] });
+}
+
+// src/components/ui/map3d.tsx
+var import_drei10 = require("@react-three/drei");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function Map3D({
+  markers = [],
+  radius = 5,
+  textureSrc = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_2048.jpg"
+}) {
+  const texture = (0, import_drei10.useTexture)(textureSrc);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("group", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("mesh", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("sphereGeometry", { args: [radius, 64, 64] }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("meshStandardMaterial", { map: texture, metalness: 0.1, roughness: 0.7 })
+    ] }),
+    markers.map((marker, i) => {
+      const phi = (90 - marker.lat) * (Math.PI / 180);
+      const theta = (marker.lng + 180) * (Math.PI / 180);
+      const x = -(radius * Math.sin(phi) * Math.cos(theta));
+      const z = radius * Math.sin(phi) * Math.sin(theta);
+      const y = radius * Math.cos(phi);
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("mesh", { position: [x, y, z], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("sphereGeometry", { args: [0.1, 16, 16] }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("meshBasicMaterial", { color: marker.color || "red" })
+      ] }, i);
+    })
+  ] });
+}
+
+// src/components/ui/gallery3d.tsx
+var import_react23 = require("react");
+var import_fiber5 = require("@react-three/fiber");
+
+// src/components/ui/imageplane.tsx
+var import_react22 = require("react");
+var import_drei11 = require("@react-three/drei");
+var import_three7 = require("three");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function ImagePlane({
+  src,
+  width = 3,
+  height,
+  // if undefined, will infer
+  opacity = 1,
+  transparent = true,
+  parallax = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react22.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("planeGeometry", { args: [width, width] }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("meshBasicMaterial", { wireframe: true, color: "gray" })
+  ] }), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    ImageMesh,
+    {
+      src,
+      width,
+      height,
+      opacity,
+      transparent,
+      parallax
+    }
+  ) });
+}
+function ImageMesh({ src, width = 1, height, opacity, transparent }) {
+  const texture = (0, import_drei11.useTexture)(src);
+  const aspect = texture.image ? texture.image.width / texture.image.height : 1;
+  const h = height || width / aspect;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("planeGeometry", { args: [width, h] }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent,
+        opacity,
+        side: import_three7.DoubleSide,
+        toneMapped: false
+      }
+    )
+  ] });
+}
+
+// src/components/ui/gallery3d.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function Gallery3D({
+  images,
+  layout = "carousel",
+  radius = 5,
+  gap = 1.5
+}) {
+  const ref = (0, import_react23.useRef)(null);
+  (0, import_fiber5.useFrame)((state, delta) => {
+    if (ref.current && layout === "carousel") {
+      ref.current.rotation.y += delta * 0.1;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("group", { ref, children: images.map((img, i) => {
+    let position = [0, 0, 0];
+    let rotation = [0, 0, 0];
+    if (layout === "carousel") {
+      const angle = i / images.length * Math.PI * 2;
+      position = [
+        Math.cos(angle) * radius,
+        0,
+        Math.sin(angle) * radius
+      ];
+      rotation = [0, -angle + Math.PI / 2, 0];
+      rotation = [0, -angle, 0];
+    } else if (layout === "grid") {
+      const cols = 3;
+      const x = i % cols * (3 + gap) - cols * 3 / 2;
+      const y = -Math.floor(i / cols) * (2 + gap);
+      position = [x, y, 0];
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("group", { position, rotation, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ImagePlane, { src: img.src, width: 3, opacity: 0.9 }) }, i);
+  }) });
+}
+
+// src/components/ui/modelviewer.tsx
+var import_react24 = require("react");
+var import_drei12 = require("@react-three/drei");
+var import_fiber6 = require("@react-three/fiber");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function ModelViewer({
+  src,
+  autoRotate = true,
+  scale = 1,
+  environment = "studio",
+  position = [0, 0, 0]
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("group", { position, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react24.Suspense, { fallback: null, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Model, { src, scale, autoRotate }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_drei12.Environment, { preset: environment })
+  ] }) });
+}
+function Model({ src, scale, autoRotate }) {
+  const { scene } = (0, import_drei12.useGLTF)(src);
+  const ref = (0, import_react24.useRef)(null);
+  (0, import_fiber6.useFrame)((state, delta) => {
+    if (ref.current && autoRotate) {
+      ref.current.rotation.y += delta * 0.5;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("primitive", { object: scene, scale, ref });
+}
+
+// src/components/ui/videoplane.tsx
+var import_react25 = require("react");
+var import_drei13 = require("@react-three/drei");
+var THREE = __toESM(require("three"), 1);
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function VideoPlane({
+  src,
+  width = 4,
+  height,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  opacity = 1,
+  side = "double"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react25.Suspense,
+    {
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("mesh", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("planeGeometry", { args: [width, width * 0.56] }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("meshBasicMaterial", { color: "gray", wireframe: true })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        VideoPlaneContent,
+        {
+          src,
+          width,
+          height,
+          autoPlay,
+          loop,
+          muted,
+          opacity,
+          side
+        }
+      )
+    }
+  );
+}
+function VideoPlaneContent({
+  src,
+  width = 4,
+  height,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  opacity = 1,
+  side = "double"
+}) {
+  const texture = (0, import_drei13.useVideoTexture)(src, {
+    unsuspend: "canplay",
+    muted,
+    loop,
+    start: autoPlay,
+    crossOrigin: "anonymous"
+  });
+  const video = texture.image;
+  const aspect = video && video.videoWidth > 0 && video.videoHeight > 0 ? video.videoWidth / video.videoHeight : 16 / 9;
+  const planeHeight = height ?? width / aspect;
+  const materialSide = side === "double" ? THREE.DoubleSide : side === "back" ? THREE.BackSide : THREE.FrontSide;
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("mesh", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("planeGeometry", { args: [width, planeHeight] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        toneMapped: false,
+        transparent: opacity < 1,
+        opacity,
+        side: materialSide
+      }
+    )
+  ] });
+}
+
+// src/components/ui/audiovisualizer.tsx
+var import_react26 = require("react");
+var import_fiber7 = require("@react-three/fiber");
+var THREE2 = __toESM(require("three"), 1);
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function AudioVisualizer({
+  audioSrc,
+  fftSize = 64,
+  barColor = "#22d3ee",
+  width = 10
+}) {
+  const analyserRef = (0, import_react26.useRef)(null);
+  const meshRef = (0, import_react26.useRef)(null);
+  const [ready, setReady] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
+    const listener = new THREE2.AudioListener();
+    const sound = new THREE2.Audio(listener);
+    const audioLoader = new THREE2.AudioLoader();
+    audioLoader.load(audioSrc, function(buffer) {
+      sound.setBuffer(buffer);
+      sound.setLoop(true);
+      sound.setVolume(0.5);
+      const analyser = new THREE2.AudioAnalyser(sound, fftSize);
+      analyserRef.current = analyser;
+      setReady(true);
+      sound.play();
+    });
+    return () => {
+      if (sound.isPlaying) sound.stop();
+    };
+  }, [audioSrc, fftSize]);
+  (0, import_fiber7.useFrame)(() => {
+    if (analyserRef.current && meshRef.current && ready) {
+      const data = analyserRef.current.getFrequencyData();
+      const count = data.length;
+      const step = width / count;
+      const tempObj = new THREE2.Object3D();
+      for (let i = 0; i < count; i++) {
+        const value = data[i] / 256;
+        const h = value * 5;
+        const x = (i - count / 2) * step;
+        tempObj.position.set(x, h / 2, 0);
+        tempObj.scale.set(step * 0.8, h || 0.1, step * 0.8);
+        tempObj.updateMatrix();
+        meshRef.current.setMatrixAt(i, tempObj.matrix);
+      }
+      meshRef.current.instanceMatrix.needsUpdate = true;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("instancedMesh", { ref: meshRef, args: [void 0, void 0, fftSize / 2], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("boxGeometry", { args: [1, 1, 1] }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("meshStandardMaterial", { color: barColor })
+  ] });
+}
+
+// src/components/ui/particles.tsx
+var import_react27 = require("react");
+var import_fiber8 = require("@react-three/fiber");
+var import_three8 = require("three");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function Particles({
+  count = 1e3,
+  size = 0.03,
+  color = "#a78bfa",
+  speed = 0.1
+}) {
+  const points = (0, import_react27.useRef)(null);
+  const particlesPosition = (0, import_react27.useMemo)(() => {
+    const positions = new Float32Array(count * 3);
+    for (let i = 0; i < count; i++) {
+      positions[i * 3] = (Math.random() - 0.5) * 10;
+      positions[i * 3 + 1] = (Math.random() - 0.5) * 10;
+      positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
+    }
+    return positions;
+  }, [count]);
+  (0, import_fiber8.useFrame)((state, delta) => {
+    if (points.current) {
+      points.current.rotation.y += delta * speed;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("points", { ref: points, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("bufferGeometry", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "bufferAttribute",
+      {
+        attach: "attributes-position",
+        count: particlesPosition.length / 3,
+        array: particlesPosition,
+        itemSize: 3
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "pointsMaterial",
+      {
+        size,
+        color,
+        transparent: true,
+        depthWrite: false,
+        blending: import_three8.AdditiveBlending,
+        sizeAttenuation: true
+      }
+    )
+  ] });
+}
+
+// src/components/ui/bloom.tsx
+var import_react28 = require("react");
+var import_fiber9 = require("@react-three/fiber");
+
+// node_modules/three-stdlib/postprocessing/ShaderPass.js
+var import_three10 = require("three");
+
+// node_modules/three-stdlib/postprocessing/Pass.js
+var import_three9 = require("three");
+var __defProp2 = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var Pass = class {
+  constructor() {
+    __publicField(this, "enabled", true);
+    __publicField(this, "needsSwap", true);
+    __publicField(this, "clear", false);
+    __publicField(this, "renderToScreen", false);
+  }
+  setSize(width, height) {
+  }
+  render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
+    console.error("THREE.Pass: .render() must be implemented in derived pass.");
+  }
+  dispose() {
+  }
+};
+var FullScreenQuad = class {
+  constructor(material) {
+    __publicField(this, "camera", new import_three9.OrthographicCamera(-1, 1, 1, -1, 0, 1));
+    __publicField(this, "geometry", new import_three9.PlaneGeometry(2, 2));
+    __publicField(this, "mesh");
+    this.mesh = new import_three9.Mesh(this.geometry, material);
+  }
+  get material() {
+    return this.mesh.material;
+  }
+  set material(value) {
+    this.mesh.material = value;
+  }
+  dispose() {
+    this.mesh.geometry.dispose();
+  }
+  render(renderer) {
+    renderer.render(this.mesh, this.camera);
+  }
+};
+
+// node_modules/three-stdlib/postprocessing/ShaderPass.js
+var __defProp3 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => {
+  __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var ShaderPass = class extends Pass {
+  constructor(shader, textureID = "tDiffuse") {
+    super();
+    __publicField2(this, "textureID");
+    __publicField2(this, "uniforms");
+    __publicField2(this, "material");
+    __publicField2(this, "fsQuad");
+    this.textureID = textureID;
+    if (shader instanceof import_three10.ShaderMaterial) {
+      this.uniforms = shader.uniforms;
+      this.material = shader;
+    } else {
+      this.uniforms = import_three10.UniformsUtils.clone(shader.uniforms);
+      this.material = new import_three10.ShaderMaterial({
+        defines: Object.assign({}, shader.defines),
+        uniforms: this.uniforms,
+        vertexShader: shader.vertexShader,
+        fragmentShader: shader.fragmentShader
+      });
+    }
+    this.fsQuad = new FullScreenQuad(this.material);
+  }
+  render(renderer, writeBuffer, readBuffer) {
+    if (this.uniforms[this.textureID]) {
+      this.uniforms[this.textureID].value = readBuffer.texture;
+    }
+    this.fsQuad.material = this.material;
+    if (this.renderToScreen) {
+      renderer.setRenderTarget(null);
+      this.fsQuad.render(renderer);
+    } else {
+      renderer.setRenderTarget(writeBuffer);
+      if (this.clear)
+        renderer.clear(renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil);
+      this.fsQuad.render(renderer);
+    }
+  }
+  dispose() {
+    this.fsQuad.dispose();
+    this.material.dispose();
+  }
+};
+
+// node_modules/three-stdlib/shaders/CopyShader.js
+var CopyShader = {
+  uniforms: {
+    tDiffuse: { value: null },
+    opacity: { value: 1 }
+  },
+  vertexShader: (
+    /* glsl */
+    `
+    varying vec2 vUv;
+
+    void main() {
+
+    	vUv = uv;
+    	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+    }
+  `
+  ),
+  fragmentShader: (
+    /* glsl */
+    `
+    uniform float opacity;
+
+    uniform sampler2D tDiffuse;
+
+    varying vec2 vUv;
+
+    void main() {
+
+    	vec4 texel = texture2D( tDiffuse, vUv );
+    	gl_FragColor = opacity * texel;
+
+    }
+  `
+  )
+};
+
+// node_modules/three-stdlib/postprocessing/UnrealBloomPass.js
+var import_three12 = require("three");
+
+// node_modules/three-stdlib/shaders/LuminosityHighPassShader.js
+var import_three11 = require("three");
+var LuminosityHighPassShader = {
+  shaderID: "luminosityHighPass",
+  uniforms: {
+    tDiffuse: { value: null },
+    luminosityThreshold: { value: 1 },
+    smoothWidth: { value: 1 },
+    defaultColor: { value: /* @__PURE__ */ new import_three11.Color(0) },
+    defaultOpacity: { value: 0 }
+  },
+  vertexShader: (
+    /* glsl */
+    `
+    varying vec2 vUv;
+
+    void main() {
+
+    	vUv = uv;
+
+    	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+    }
+  `
+  ),
+  fragmentShader: (
+    /* glsl */
+    `
+    uniform sampler2D tDiffuse;
+    uniform vec3 defaultColor;
+    uniform float defaultOpacity;
+    uniform float luminosityThreshold;
+    uniform float smoothWidth;
+
+    varying vec2 vUv;
+
+    void main() {
+
+    	vec4 texel = texture2D( tDiffuse, vUv );
+
+    	vec3 luma = vec3( 0.299, 0.587, 0.114 );
+
+    	float v = dot( texel.xyz, luma );
+
+    	vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );
+
+    	float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );
+
+    	gl_FragColor = mix( outputColor, texel, alpha );
+
+    }
+  `
+  )
+};
+
+// node_modules/three-stdlib/postprocessing/UnrealBloomPass.js
+var __defProp4 = Object.defineProperty;
+var __defNormalProp3 = (obj, key, value) => key in obj ? __defProp4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField3 = (obj, key, value) => {
+  __defNormalProp3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var UnrealBloomPass = /* @__PURE__ */ (() => {
+  const _UnrealBloomPass = class extends Pass {
+    constructor(resolution, strength, radius, threshold) {
+      super();
+      this.strength = strength !== void 0 ? strength : 1;
+      this.radius = radius;
+      this.threshold = threshold;
+      this.resolution = resolution !== void 0 ? new import_three12.Vector2(resolution.x, resolution.y) : new import_three12.Vector2(256, 256);
+      this.clearColor = new import_three12.Color(0, 0, 0);
+      this.renderTargetsHorizontal = [];
+      this.renderTargetsVertical = [];
+      this.nMips = 5;
+      let resx = Math.round(this.resolution.x / 2);
+      let resy = Math.round(this.resolution.y / 2);
+      this.renderTargetBright = new import_three12.WebGLRenderTarget(resx, resy, { type: import_three12.HalfFloatType });
+      this.renderTargetBright.texture.name = "UnrealBloomPass.bright";
+      this.renderTargetBright.texture.generateMipmaps = false;
+      for (let i = 0; i < this.nMips; i++) {
+        const renderTargetHorizonal = new import_three12.WebGLRenderTarget(resx, resy, { type: import_three12.HalfFloatType });
+        renderTargetHorizonal.texture.name = "UnrealBloomPass.h" + i;
+        renderTargetHorizonal.texture.generateMipmaps = false;
+        this.renderTargetsHorizontal.push(renderTargetHorizonal);
+        const renderTargetVertical = new import_three12.WebGLRenderTarget(resx, resy, { type: import_three12.HalfFloatType });
+        renderTargetVertical.texture.name = "UnrealBloomPass.v" + i;
+        renderTargetVertical.texture.generateMipmaps = false;
+        this.renderTargetsVertical.push(renderTargetVertical);
+        resx = Math.round(resx / 2);
+        resy = Math.round(resy / 2);
+      }
+      const highPassShader = LuminosityHighPassShader;
+      this.highPassUniforms = import_three12.UniformsUtils.clone(highPassShader.uniforms);
+      this.highPassUniforms["luminosityThreshold"].value = threshold;
+      this.highPassUniforms["smoothWidth"].value = 0.01;
+      this.materialHighPassFilter = new import_three12.ShaderMaterial({
+        uniforms: this.highPassUniforms,
+        vertexShader: highPassShader.vertexShader,
+        fragmentShader: highPassShader.fragmentShader,
+        defines: {}
+      });
+      this.separableBlurMaterials = [];
+      const kernelSizeArray = [3, 5, 7, 9, 11];
+      resx = Math.round(this.resolution.x / 2);
+      resy = Math.round(this.resolution.y / 2);
+      for (let i = 0; i < this.nMips; i++) {
+        this.separableBlurMaterials.push(this.getSeperableBlurMaterial(kernelSizeArray[i]));
+        this.separableBlurMaterials[i].uniforms["texSize"].value = new import_three12.Vector2(resx, resy);
+        resx = Math.round(resx / 2);
+        resy = Math.round(resy / 2);
+      }
+      this.compositeMaterial = this.getCompositeMaterial(this.nMips);
+      this.compositeMaterial.uniforms["blurTexture1"].value = this.renderTargetsVertical[0].texture;
+      this.compositeMaterial.uniforms["blurTexture2"].value = this.renderTargetsVertical[1].texture;
+      this.compositeMaterial.uniforms["blurTexture3"].value = this.renderTargetsVertical[2].texture;
+      this.compositeMaterial.uniforms["blurTexture4"].value = this.renderTargetsVertical[3].texture;
+      this.compositeMaterial.uniforms["blurTexture5"].value = this.renderTargetsVertical[4].texture;
+      this.compositeMaterial.uniforms["bloomStrength"].value = strength;
+      this.compositeMaterial.uniforms["bloomRadius"].value = 0.1;
+      this.compositeMaterial.needsUpdate = true;
+      const bloomFactors = [1, 0.8, 0.6, 0.4, 0.2];
+      this.compositeMaterial.uniforms["bloomFactors"].value = bloomFactors;
+      this.bloomTintColors = [
+        new import_three12.Vector3(1, 1, 1),
+        new import_three12.Vector3(1, 1, 1),
+        new import_three12.Vector3(1, 1, 1),
+        new import_three12.Vector3(1, 1, 1),
+        new import_three12.Vector3(1, 1, 1)
+      ];
+      this.compositeMaterial.uniforms["bloomTintColors"].value = this.bloomTintColors;
+      const copyShader = CopyShader;
+      this.copyUniforms = import_three12.UniformsUtils.clone(copyShader.uniforms);
+      this.copyUniforms["opacity"].value = 1;
+      this.materialCopy = new import_three12.ShaderMaterial({
+        uniforms: this.copyUniforms,
+        vertexShader: copyShader.vertexShader,
+        fragmentShader: copyShader.fragmentShader,
+        blending: import_three12.AdditiveBlending,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true
+      });
+      this.enabled = true;
+      this.needsSwap = false;
+      this._oldClearColor = new import_three12.Color();
+      this.oldClearAlpha = 1;
+      this.basic = new import_three12.MeshBasicMaterial();
+      this.fsQuad = new FullScreenQuad(null);
+    }
+    dispose() {
+      for (let i = 0; i < this.renderTargetsHorizontal.length; i++) {
+        this.renderTargetsHorizontal[i].dispose();
+      }
+      for (let i = 0; i < this.renderTargetsVertical.length; i++) {
+        this.renderTargetsVertical[i].dispose();
+      }
+      this.renderTargetBright.dispose();
+      for (let i = 0; i < this.separableBlurMaterials.length; i++) {
+        this.separableBlurMaterials[i].dispose();
+      }
+      this.compositeMaterial.dispose();
+      this.materialCopy.dispose();
+      this.basic.dispose();
+      this.fsQuad.dispose();
+    }
+    setSize(width, height) {
+      let resx = Math.round(width / 2);
+      let resy = Math.round(height / 2);
+      this.renderTargetBright.setSize(resx, resy);
+      for (let i = 0; i < this.nMips; i++) {
+        this.renderTargetsHorizontal[i].setSize(resx, resy);
+        this.renderTargetsVertical[i].setSize(resx, resy);
+        this.separableBlurMaterials[i].uniforms["texSize"].value = new import_three12.Vector2(resx, resy);
+        resx = Math.round(resx / 2);
+        resy = Math.round(resy / 2);
+      }
+    }
+    render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
+      renderer.getClearColor(this._oldClearColor);
+      this.oldClearAlpha = renderer.getClearAlpha();
+      const oldAutoClear = renderer.autoClear;
+      renderer.autoClear = false;
+      renderer.setClearColor(this.clearColor, 0);
+      if (maskActive)
+        renderer.state.buffers.stencil.setTest(false);
+      if (this.renderToScreen) {
+        this.fsQuad.material = this.basic;
+        this.basic.map = readBuffer.texture;
+        renderer.setRenderTarget(null);
+        renderer.clear();
+        this.fsQuad.render(renderer);
+      }
+      this.highPassUniforms["tDiffuse"].value = readBuffer.texture;
+      this.highPassUniforms["luminosityThreshold"].value = this.threshold;
+      this.fsQuad.material = this.materialHighPassFilter;
+      renderer.setRenderTarget(this.renderTargetBright);
+      renderer.clear();
+      this.fsQuad.render(renderer);
+      let inputRenderTarget = this.renderTargetBright;
+      for (let i = 0; i < this.nMips; i++) {
+        this.fsQuad.material = this.separableBlurMaterials[i];
+        this.separableBlurMaterials[i].uniforms["colorTexture"].value = inputRenderTarget.texture;
+        this.separableBlurMaterials[i].uniforms["direction"].value = _UnrealBloomPass.BlurDirectionX;
+        renderer.setRenderTarget(this.renderTargetsHorizontal[i]);
+        renderer.clear();
+        this.fsQuad.render(renderer);
+        this.separableBlurMaterials[i].uniforms["colorTexture"].value = this.renderTargetsHorizontal[i].texture;
+        this.separableBlurMaterials[i].uniforms["direction"].value = _UnrealBloomPass.BlurDirectionY;
+        renderer.setRenderTarget(this.renderTargetsVertical[i]);
+        renderer.clear();
+        this.fsQuad.render(renderer);
+        inputRenderTarget = this.renderTargetsVertical[i];
+      }
+      this.fsQuad.material = this.compositeMaterial;
+      this.compositeMaterial.uniforms["bloomStrength"].value = this.strength;
+      this.compositeMaterial.uniforms["bloomRadius"].value = this.radius;
+      this.compositeMaterial.uniforms["bloomTintColors"].value = this.bloomTintColors;
+      renderer.setRenderTarget(this.renderTargetsHorizontal[0]);
+      renderer.clear();
+      this.fsQuad.render(renderer);
+      this.fsQuad.material = this.materialCopy;
+      this.copyUniforms["tDiffuse"].value = this.renderTargetsHorizontal[0].texture;
+      if (maskActive)
+        renderer.state.buffers.stencil.setTest(true);
+      if (this.renderToScreen) {
+        renderer.setRenderTarget(null);
+        this.fsQuad.render(renderer);
+      } else {
+        renderer.setRenderTarget(readBuffer);
+        this.fsQuad.render(renderer);
+      }
+      renderer.setClearColor(this._oldClearColor, this.oldClearAlpha);
+      renderer.autoClear = oldAutoClear;
+    }
+    getSeperableBlurMaterial(kernelRadius) {
+      return new import_three12.ShaderMaterial({
+        defines: {
+          KERNEL_RADIUS: kernelRadius,
+          SIGMA: kernelRadius
+        },
+        uniforms: {
+          colorTexture: { value: null },
+          texSize: { value: new import_three12.Vector2(0.5, 0.5) },
+          direction: { value: new import_three12.Vector2(0.5, 0.5) }
+        },
+        vertexShader: `varying vec2 vUv;
+				void main() {
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				}`,
+        fragmentShader: `#include <common>
+				varying vec2 vUv;
+				uniform sampler2D colorTexture;
+				uniform vec2 texSize;
+				uniform vec2 direction;
+
+				float gaussianPdf(in float x, in float sigma) {
+					return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
+				}
+				void main() {
+					vec2 invSize = 1.0 / texSize;
+					float fSigma = float(SIGMA);
+					float weightSum = gaussianPdf(0.0, fSigma);
+					vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;
+					for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
+						float x = float(i);
+						float w = gaussianPdf(x, fSigma);
+						vec2 uvOffset = direction * invSize * x;
+						vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;
+						vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;
+						diffuseSum += (sample1 + sample2) * w;
+						weightSum += 2.0 * w;
+					}
+					gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
+				}`
+      });
+    }
+    getCompositeMaterial(nMips) {
+      return new import_three12.ShaderMaterial({
+        defines: {
+          NUM_MIPS: nMips
+        },
+        uniforms: {
+          blurTexture1: { value: null },
+          blurTexture2: { value: null },
+          blurTexture3: { value: null },
+          blurTexture4: { value: null },
+          blurTexture5: { value: null },
+          bloomStrength: { value: 1 },
+          bloomFactors: { value: null },
+          bloomTintColors: { value: null },
+          bloomRadius: { value: 0 }
+        },
+        vertexShader: `varying vec2 vUv;
+				void main() {
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				}`,
+        fragmentShader: `varying vec2 vUv;
+				uniform sampler2D blurTexture1;
+				uniform sampler2D blurTexture2;
+				uniform sampler2D blurTexture3;
+				uniform sampler2D blurTexture4;
+				uniform sampler2D blurTexture5;
+				uniform float bloomStrength;
+				uniform float bloomRadius;
+				uniform float bloomFactors[NUM_MIPS];
+				uniform vec3 bloomTintColors[NUM_MIPS];
+
+				float lerpBloomFactor(const in float factor) {
+					float mirrorFactor = 1.2 - factor;
+					return mix(factor, mirrorFactor, bloomRadius);
+				}
+
+				void main() {
+					gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +
+						lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +
+						lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +
+						lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +
+						lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );
+				}`
+      });
+    }
+  };
+  let UnrealBloomPass2 = _UnrealBloomPass;
+  __publicField3(UnrealBloomPass2, "BlurDirectionX", new import_three12.Vector2(1, 0));
+  __publicField3(UnrealBloomPass2, "BlurDirectionY", new import_three12.Vector2(0, 1));
+  return UnrealBloomPass2;
+})();
+
+// node_modules/three-stdlib/postprocessing/MaskPass.js
+var __defProp5 = Object.defineProperty;
+var __defNormalProp4 = (obj, key, value) => key in obj ? __defProp5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField4 = (obj, key, value) => {
+  __defNormalProp4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var MaskPass = class extends Pass {
+  constructor(scene, camera) {
+    super();
+    __publicField4(this, "scene");
+    __publicField4(this, "camera");
+    __publicField4(this, "inverse");
+    this.scene = scene;
+    this.camera = camera;
+    this.clear = true;
+    this.needsSwap = false;
+    this.inverse = false;
+  }
+  render(renderer, writeBuffer, readBuffer) {
+    const context = renderer.getContext();
+    const state = renderer.state;
+    state.buffers.color.setMask(false);
+    state.buffers.depth.setMask(false);
+    state.buffers.color.setLocked(true);
+    state.buffers.depth.setLocked(true);
+    let writeValue, clearValue;
+    if (this.inverse) {
+      writeValue = 0;
+      clearValue = 1;
+    } else {
+      writeValue = 1;
+      clearValue = 0;
+    }
+    state.buffers.stencil.setTest(true);
+    state.buffers.stencil.setOp(context.REPLACE, context.REPLACE, context.REPLACE);
+    state.buffers.stencil.setFunc(context.ALWAYS, writeValue, 4294967295);
+    state.buffers.stencil.setClear(clearValue);
+    state.buffers.stencil.setLocked(true);
+    renderer.setRenderTarget(readBuffer);
+    if (this.clear)
+      renderer.clear();
+    renderer.render(this.scene, this.camera);
+    renderer.setRenderTarget(writeBuffer);
+    if (this.clear)
+      renderer.clear();
+    renderer.render(this.scene, this.camera);
+    state.buffers.color.setLocked(false);
+    state.buffers.depth.setLocked(false);
+    state.buffers.stencil.setLocked(false);
+    state.buffers.stencil.setFunc(context.EQUAL, 1, 4294967295);
+    state.buffers.stencil.setOp(context.KEEP, context.KEEP, context.KEEP);
+    state.buffers.stencil.setLocked(true);
+  }
+};
+var ClearMaskPass = class extends Pass {
+  constructor() {
+    super();
+    this.needsSwap = false;
+  }
+  render(renderer) {
+    renderer.state.buffers.stencil.setLocked(false);
+    renderer.state.buffers.stencil.setTest(false);
+  }
+};
+
+// node_modules/three-stdlib/postprocessing/EffectComposer.js
+var import_three13 = require("three");
+var __defProp6 = Object.defineProperty;
+var __defNormalProp5 = (obj, key, value) => key in obj ? __defProp6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField5 = (obj, key, value) => {
+  __defNormalProp5(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var EffectComposer = class {
+  constructor(renderer, renderTarget) {
+    __publicField5(this, "renderer");
+    __publicField5(this, "_pixelRatio");
+    __publicField5(this, "_width");
+    __publicField5(this, "_height");
+    __publicField5(this, "renderTarget1");
+    __publicField5(this, "renderTarget2");
+    __publicField5(this, "writeBuffer");
+    __publicField5(this, "readBuffer");
+    __publicField5(this, "renderToScreen");
+    __publicField5(this, "passes", []);
+    __publicField5(this, "copyPass");
+    __publicField5(this, "clock");
+    this.renderer = renderer;
+    if (renderTarget === void 0) {
+      const parameters = {
+        minFilter: import_three13.LinearFilter,
+        magFilter: import_three13.LinearFilter,
+        format: import_three13.RGBAFormat
+      };
+      const size = renderer.getSize(new import_three13.Vector2());
+      this._pixelRatio = renderer.getPixelRatio();
+      this._width = size.width;
+      this._height = size.height;
+      renderTarget = new import_three13.WebGLRenderTarget(
+        this._width * this._pixelRatio,
+        this._height * this._pixelRatio,
+        parameters
+      );
+      renderTarget.texture.name = "EffectComposer.rt1";
+    } else {
+      this._pixelRatio = 1;
+      this._width = renderTarget.width;
+      this._height = renderTarget.height;
+    }
+    this.renderTarget1 = renderTarget;
+    this.renderTarget2 = renderTarget.clone();
+    this.renderTarget2.texture.name = "EffectComposer.rt2";
+    this.writeBuffer = this.renderTarget1;
+    this.readBuffer = this.renderTarget2;
+    this.renderToScreen = true;
+    if (CopyShader === void 0) {
+      console.error("THREE.EffectComposer relies on CopyShader");
+    }
+    if (ShaderPass === void 0) {
+      console.error("THREE.EffectComposer relies on ShaderPass");
+    }
+    this.copyPass = new ShaderPass(CopyShader);
+    this.copyPass.material.blending = import_three13.NoBlending;
+    this.clock = new import_three13.Clock();
+  }
+  swapBuffers() {
+    const tmp = this.readBuffer;
+    this.readBuffer = this.writeBuffer;
+    this.writeBuffer = tmp;
+  }
+  addPass(pass) {
+    this.passes.push(pass);
+    pass.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio);
+  }
+  insertPass(pass, index) {
+    this.passes.splice(index, 0, pass);
+    pass.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio);
+  }
+  removePass(pass) {
+    const index = this.passes.indexOf(pass);
+    if (index !== -1) {
+      this.passes.splice(index, 1);
+    }
+  }
+  isLastEnabledPass(passIndex) {
+    for (let i = passIndex + 1; i < this.passes.length; i++) {
+      if (this.passes[i].enabled) {
+        return false;
+      }
+    }
+    return true;
+  }
+  render(deltaTime) {
+    if (deltaTime === void 0) {
+      deltaTime = this.clock.getDelta();
+    }
+    const currentRenderTarget = this.renderer.getRenderTarget();
+    let maskActive = false;
+    const il = this.passes.length;
+    for (let i = 0; i < il; i++) {
+      const pass = this.passes[i];
+      if (pass.enabled === false)
+        continue;
+      pass.renderToScreen = this.renderToScreen && this.isLastEnabledPass(i);
+      pass.render(this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive);
+      if (pass.needsSwap) {
+        if (maskActive) {
+          const context = this.renderer.getContext();
+          const stencil = this.renderer.state.buffers.stencil;
+          stencil.setFunc(context.NOTEQUAL, 1, 4294967295);
+          this.copyPass.render(this.renderer, this.writeBuffer, this.readBuffer, deltaTime);
+          stencil.setFunc(context.EQUAL, 1, 4294967295);
+        }
+        this.swapBuffers();
+      }
+      if (MaskPass !== void 0) {
+        if (pass instanceof MaskPass) {
+          maskActive = true;
+        } else if (pass instanceof ClearMaskPass) {
+          maskActive = false;
+        }
+      }
+    }
+    this.renderer.setRenderTarget(currentRenderTarget);
+  }
+  reset(renderTarget) {
+    if (renderTarget === void 0) {
+      const size = this.renderer.getSize(new import_three13.Vector2());
+      this._pixelRatio = this.renderer.getPixelRatio();
+      this._width = size.width;
+      this._height = size.height;
+      renderTarget = this.renderTarget1.clone();
+      renderTarget.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio);
+    }
+    this.renderTarget1.dispose();
+    this.renderTarget2.dispose();
+    this.renderTarget1 = renderTarget;
+    this.renderTarget2 = renderTarget.clone();
+    this.writeBuffer = this.renderTarget1;
+    this.readBuffer = this.renderTarget2;
+  }
+  setSize(width, height) {
+    this._width = width;
+    this._height = height;
+    const effectiveWidth = this._width * this._pixelRatio;
+    const effectiveHeight = this._height * this._pixelRatio;
+    this.renderTarget1.setSize(effectiveWidth, effectiveHeight);
+    this.renderTarget2.setSize(effectiveWidth, effectiveHeight);
+    for (let i = 0; i < this.passes.length; i++) {
+      this.passes[i].setSize(effectiveWidth, effectiveHeight);
+    }
+  }
+  setPixelRatio(pixelRatio) {
+    this._pixelRatio = pixelRatio;
+    this.setSize(this._width, this._height);
+  }
+  dispose() {
+    this.renderTarget1.dispose();
+    this.renderTarget2.dispose();
+    this.copyPass.dispose();
+  }
+};
+
+// node_modules/three-stdlib/postprocessing/RenderPass.js
+var import_three14 = require("three");
+var __defProp7 = Object.defineProperty;
+var __defNormalProp6 = (obj, key, value) => key in obj ? __defProp7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField6 = (obj, key, value) => {
+  __defNormalProp6(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var RenderPass = class extends Pass {
+  constructor(scene, camera, overrideMaterial, clearColor, clearAlpha = 0) {
+    super();
+    __publicField6(this, "scene");
+    __publicField6(this, "camera");
+    __publicField6(this, "overrideMaterial");
+    __publicField6(this, "clearColor");
+    __publicField6(this, "clearAlpha");
+    __publicField6(this, "clearDepth", false);
+    __publicField6(this, "_oldClearColor", new import_three14.Color());
+    this.scene = scene;
+    this.camera = camera;
+    this.overrideMaterial = overrideMaterial;
+    this.clearColor = clearColor;
+    this.clearAlpha = clearAlpha;
+    this.clear = true;
+    this.needsSwap = false;
+  }
+  render(renderer, writeBuffer, readBuffer) {
+    let oldAutoClear = renderer.autoClear;
+    renderer.autoClear = false;
+    let oldClearAlpha;
+    let oldOverrideMaterial = null;
+    if (this.overrideMaterial !== void 0) {
+      oldOverrideMaterial = this.scene.overrideMaterial;
+      this.scene.overrideMaterial = this.overrideMaterial;
+    }
+    if (this.clearColor) {
+      renderer.getClearColor(this._oldClearColor);
+      oldClearAlpha = renderer.getClearAlpha();
+      renderer.setClearColor(this.clearColor, this.clearAlpha);
+    }
+    if (this.clearDepth) {
+      renderer.clearDepth();
+    }
+    renderer.setRenderTarget(this.renderToScreen ? null : readBuffer);
+    if (this.clear)
+      renderer.clear(renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil);
+    renderer.render(this.scene, this.camera);
+    if (this.clearColor) {
+      renderer.setClearColor(this._oldClearColor, oldClearAlpha);
+    }
+    if (this.overrideMaterial !== void 0) {
+      this.scene.overrideMaterial = oldOverrideMaterial;
+    }
+    renderer.autoClear = oldAutoClear;
+  }
+};
+
+// src/components/ui/bloom.tsx
+var import_three15 = require("three");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+(0, import_fiber9.extend)({ EffectComposer, RenderPass, UnrealBloomPass });
+function Bloom({ intensity = 1, radius = 0.4, threshold = 0 }) {
+  const { gl, scene, camera, size } = (0, import_fiber9.useThree)();
+  const composer = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
+    if (composer.current) {
+      composer.current.setSize(size.width, size.height);
+    }
+  }, [size]);
+  (0, import_fiber9.useFrame)(() => {
+    if (composer.current) {
+      composer.current.render();
+    }
+  }, 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("effectComposer", { ref: composer, args: [gl], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("renderPass", { attach: "passes", args: [scene, camera] }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("unrealBloomPass", { attach: "passes", args: [new import_three15.Vector2(size.width, size.height), intensity, radius, threshold] })
+  ] });
+}
+
+// src/components/ui/reflection.tsx
+var import_drei14 = require("@react-three/drei");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function Reflection({
+  blur = [300, 100],
+  opacity = 0.5,
+  resolution = 512,
+  color = "#101010"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [0, -0.01, 0], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("planeGeometry", { args: [50, 50] }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      import_drei14.MeshReflectorMaterial,
+      {
+        blur,
+        resolution,
+        mixBlur: 1,
+        mixStrength: opacity * 10,
+        roughness: 1,
+        depthScale: 1.2,
+        minDepthThreshold: 0.4,
+        maxDepthThreshold: 1.4,
+        color,
+        metalness: 0.5,
+        mirror: 1
+      }
+    )
+  ] });
+}
+
+// src/components/ui/fog.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function Fog({
+  color = "#000",
+  near = 5,
+  far = 30,
+  type = "linear",
+  density = 0.02
+}) {
+  if (type === "exponential") {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("fogExp2", { attach: "fog", args: [color, density] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("fog", { attach: "fog", args: [color, near, far] });
+}
+
+// src/components/ui/shadowsystem.tsx
+var import_drei15 = require("@react-three/drei");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+function ShadowSystem({ type = "soft", bias = -1e-4, mapSize = 1024 }) {
+  if (type === "soft") {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_drei15.SoftShadows, {});
+  }
+  if (type === "contact") {
+    return null;
+  }
+  return null;
+}
+
+// src/components/ui/gloweffect.tsx
+var import_react29 = __toESM(require("react"), 1);
+var THREE3 = __toESM(require("three"), 1);
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function GlowEffect({
+  children,
+  color = "#22d3ee",
+  intensity = 1,
+  scale = 1.2
+}) {
+  const glowMaterial = import_react29.default.useMemo(() => {
+    return new THREE3.MeshBasicMaterial({
+      color,
+      transparent: true,
+      opacity: 0.3 * intensity,
+      blending: THREE3.AdditiveBlending,
+      side: THREE3.BackSide
+      // Outline effect often uses BackSide with scaled mesh
+    });
+  }, [color, intensity]);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("group", { children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("group", { scale: [scale, scale, scale], children: import_react29.Children.map(children, (child) => {
+      if (import_react29.default.isValidElement(child)) {
+        return (0, import_react29.cloneElement)(child, {
+          material: glowMaterial
+        });
+      }
+      return child;
+    }) })
+  ] });
+}
+
+// src/components/ui/waveeffect.tsx
+var import_react30 = __toESM(require("react"), 1);
+var import_drei16 = require("@react-three/drei");
+var import_fiber10 = require("@react-three/fiber");
+var THREE4 = __toESM(require("three"), 1);
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var WaveMaterial = (0, import_drei16.shaderMaterial)(
+  { time: 0, color: new THREE4.Color(0.2, 0.5, 1) },
+  // vertex shader
+  `
+    varying vec2 vUv;
+    uniform float time;
+    void main() {
+      vUv = uv;
+      vec3 pos = position;
+      pos.y += sin(pos.x * 2.0 + time) * 0.2;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+    }
+  `,
+  // fragment shader
+  `
+    uniform vec3 color;
+    varying vec2 vUv;
+    void main() {
+      gl_FragColor = vec4(color, 1.0);
+    }
+  `
+);
+(0, import_fiber10.extend)({ WaveMaterial });
+function WaveEffect({ children, amplitude = 0.3, frequency = 2, speed = 1 }) {
+  const group = import_react30.default.useRef(null);
+  const material = (0, import_react30.useMemo)(() => new WaveMaterial(), []);
+  (0, import_fiber10.useFrame)((state, delta) => {
+    if (material) {
+      material.time += delta * speed;
+    }
+  });
+  import_react30.default.useEffect(() => {
+    if (group.current) {
+      group.current.traverse((obj) => {
+        if (obj.isMesh) {
+          obj.material = material;
+        }
+      });
+    }
+  }, [children, material]);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("group", { ref: group, children });
+}
+
+// src/components/ui/noisefield.tsx
+var import_react31 = require("react");
+var import_drei17 = require("@react-three/drei");
+var import_fiber11 = require("@react-three/fiber");
+var THREE5 = __toESM(require("three"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var NoiseMaterial = (0, import_drei17.shaderMaterial)(
+  { time: 0, scale: 1, color: new THREE5.Color(0.2, 0.5, 1) },
+  // Vertex
+  `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  // Fragment (Simple noise-like pattern via sine waves)
+  `
+    uniform float time;
+    uniform float scale;
+    uniform vec3 color;
+    varying vec2 vUv;
+
+    // Pseudo-random
+    float rand(vec2 co){
+        return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+    }
+
+    void main() {
+      float noise = rand(vUv * scale + time * 0.1);
+      gl_FragColor = vec4(color * noise, 1.0);
+    }
+  `
+);
+(0, import_fiber11.extend)({ NoiseMaterial });
+function NoiseField({ scale = 1, speed = 0.5, mode = "color" }) {
+  const material = (0, import_react31.useMemo)(() => new NoiseMaterial(), []);
+  (0, import_fiber11.useFrame)((state, delta) => {
+    if (material) {
+      material.time += delta * speed;
+      material.scale = scale;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("planeGeometry", { args: [10, 10, 64, 64] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("primitive", { object: material, attach: "material" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion3D,
+  AudioVisualizer,
+  Badge,
+  Badge3D,
+  BarChart3D,
+  Bloom,
+  Breadcrumb,
+  Button3D,
+  Card3D,
+  Container,
+  Dialog,
+  Fog,
+  Gallery3D,
+  GlowEffect,
+  Graph3D,
+  Grid,
+  ImagePlane,
+  Input,
+  Input3D,
+  LineChart3D,
+  Map3D,
+  Menu3D,
+  Menu3DItem,
+  Menu3DLabel,
+  Menu3DSeparator,
+  Modal3D,
+  ModelViewer,
+  NavBar3D,
+  NoiseField,
+  PageLayout,
+  Pagination,
+  Particles,
+  PieChart3D,
+  Popover,
+  Progress,
+  Progress3D,
+  Reflection,
+  ScatterPlot3D,
+  Section,
+  Select,
+  Select3D,
+  ShadowSystem,
+  Sheet,
+  Skeleton,
+  Slider,
+  Slider3D,
+  Spinner3D,
+  Stack,
+  Stepper3D,
+  Table,
+  Tabs3D,
+  Timeline3D,
+  Toast,
+  Toggle,
+  Toggle3D,
+  Tooltip,
+  Tooltip3D,
+  VideoPlane,
+  WaveEffect
+});
+//# sourceMappingURL=index.cjs.map