@moontra/moonui-pro 2.34.0 → 2.34.3

package/dist/index.mjs

@@ -16874,7 +16874,10 @@ var splashCursorVariants = cva(
     }
   }
 );
-var SplashCursor = ({
+var calculateDistance = (x1, y1, x2, y2) => {
+  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+};
+var SplashCursorComponent = ({
   size: size4 = "md",
   variant = "default",
   duration = 600,
@@ -16890,46 +16893,63 @@ var SplashCursor = ({
   containerRef
 }) => {
   const [splashes, setSplashes] = useState([]);
-  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
-  const lastMoveTime = useRef(Date.now());
-  const lastPos = useRef({ x: 0, y: 0 });
+  const lastMoveTimeRef = useRef(Date.now());
+  const lastPosRef = useRef({ x: 0, y: 0 });
   const audioRef = useRef(null);
+  const rafIdRef = useRef(null);
+  const lastSplashTimeRef = useRef(0);
+  const splashTimersRef = useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
-    if (soundUrl) {
-      audioRef.current = new Audio(soundUrl);
-      audioRef.current.volume = 0.3;
+    if (soundUrl && !audioRef.current) {
+      const audio = new Audio(soundUrl);
+      audio.volume = 0.3;
+      audioRef.current = audio;
     }
+    return () => {
+      if (audioRef.current) {
+        audioRef.current = null;
+      }
+    };
   }, [soundUrl]);
-  const calculateDistance = (x1, y1, x2, y2) => {
-    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-  };
-  const createSplash = (x, y) => {
+  const cleanupSplash = useCallback((splashId) => {
+    setSplashes((prev) => prev.filter((splash) => splash.id !== splashId));
+  }, []);
+  const createSplash = useCallback((x, y) => {
+    const now = Date.now();
+    if (now - lastSplashTimeRef.current < 16) {
+      return;
+    }
+    lastSplashTimeRef.current = now;
     const newSplash = {
-      id: Date.now() + Math.random(),
+      id: now + Math.random(),
       x,
       y,
-      timestamp: Date.now()
+      timestamp: now
     };
     setSplashes((prev) => {
-      const updated = [...prev, newSplash];
-      if (updated.length > maxSplashes) {
-        return updated.slice(-maxSplashes);
-      }
+      const updated = prev.length >= maxSplashes ? [...prev.slice(1), newSplash] : [...prev, newSplash];
       return updated;
     });
     if (audioRef.current) {
-      audioRef.current.currentTime = 0;
-      audioRef.current.play().catch(() => {
-      });
+      try {
+        const audioClone = audioRef.current.cloneNode();
+        audioClone.volume = 0.3;
+        audioClone.play().catch(() => {
+        });
+        setTimeout(() => audioClone.remove(), 1e3);
+      } catch {
+      }
     }
-    setTimeout(() => {
-      setSplashes((prev) => prev.filter((splash) => splash.id !== newSplash.id));
+    const timer = setTimeout(() => {
+      cleanupSplash(newSplash.id);
+      splashTimersRef.current.delete(timer);
     }, duration);
-  };
-  useEffect(() => {
-    if (!enabled)
+    splashTimersRef.current.add(timer);
+  }, [maxSplashes, duration, cleanupSplash]);
+  const handleMouseMoveThrottled = useCallback((e) => {
+    if (rafIdRef.current)
       return;
-    const handleMouseMove2 = (e) => {
+    rafIdRef.current = requestAnimationFrame(() => {
       const container = containerRef?.current;
       let x = e.clientX;
       let y = e.clientY;
@@ -16938,24 +16958,24 @@ var SplashCursor = ({
         x = e.clientX - rect.left;
         y = e.clientY - rect.top;
         if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+          rafIdRef.current = null;
           return;
         }
       }
       const now = Date.now();
-      const timeDiff = now - lastMoveTime.current;
-      const distance = calculateDistance(
-        lastPos.current.x,
-        lastPos.current.y,
-        x,
-        y
-      );
-      setCursorPos({ x, y });
+      const timeDiff = now - lastMoveTimeRef.current;
       if (timeDiff > 0) {
+        const distance = calculateDistance(
+          lastPosRef.current.x,
+          lastPosRef.current.y,
+          x,
+          y
+        );
         const speed = distance / timeDiff;
         if (speed > threshold) {
           if (targetSelector) {
             const target = e.target;
-            if (target && target.closest(targetSelector)) {
+            if (target?.closest(targetSelector)) {
               createSplash(x, y);
             }
           } else {
@@ -16963,39 +16983,52 @@ var SplashCursor = ({
           }
         }
       }
-      lastPos.current = { x, y };
-      lastMoveTime.current = now;
-    };
-    const handleClick2 = (e) => {
-      const container = containerRef?.current;
-      let x = e.clientX;
-      let y = e.clientY;
-      if (container) {
-        const rect = container.getBoundingClientRect();
-        x = e.clientX - rect.left;
-        y = e.clientY - rect.top;
-        if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
-          return;
-        }
+      lastPosRef.current = { x, y };
+      lastMoveTimeRef.current = now;
+      rafIdRef.current = null;
+    });
+  }, [threshold, targetSelector, createSplash, containerRef]);
+  const handleClick2 = useCallback((e) => {
+    const container = containerRef?.current;
+    let x = e.clientX;
+    let y = e.clientY;
+    if (container) {
+      const rect = container.getBoundingClientRect();
+      x = e.clientX - rect.left;
+      y = e.clientY - rect.top;
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+        return;
       }
-      if (targetSelector) {
-        const target = e.target;
-        if (target && target.closest(targetSelector)) {
-          createSplash(x, y);
-        }
-      } else {
+    }
+    if (targetSelector) {
+      const target = e.target;
+      if (target?.closest(targetSelector)) {
         createSplash(x, y);
       }
-    };
+    } else {
+      createSplash(x, y);
+    }
+  }, [targetSelector, createSplash, containerRef]);
+  useEffect(() => {
+    if (!enabled)
+      return;
     const targetElement = containerRef?.current || document;
-    targetElement.addEventListener("mousemove", handleMouseMove2);
-    targetElement.addEventListener("click", handleClick2);
+    const moveHandler = handleMouseMoveThrottled;
+    const clickHandler2 = handleClick2;
+    targetElement.addEventListener("mousemove", moveHandler);
+    targetElement.addEventListener("click", clickHandler2);
     return () => {
-      targetElement.removeEventListener("mousemove", handleMouseMove2);
-      targetElement.removeEventListener("click", handleClick2);
+      targetElement.removeEventListener("mousemove", moveHandler);
+      targetElement.removeEventListener("click", clickHandler2);
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      splashTimersRef.current.forEach((timer) => clearTimeout(timer));
+      splashTimersRef.current.clear();
     };
-  }, [enabled, threshold, targetSelector, duration, maxSplashes, containerRef]);
-  const getAnimationVariants = () => {
+  }, [enabled, handleMouseMoveThrottled, handleClick2, containerRef]);
+  const animationVariants2 = useMemo(() => {
     switch (animationType) {
       case "ripple":
         return {
@@ -17022,14 +17055,25 @@ var SplashCursor = ({
           exit: { scale: 3, opacity: 0 }
         };
     }
-  };
-  const animationVariants2 = getAnimationVariants();
-  const getColor = (index2) => {
+  }, [animationType]);
+  const getColor = useCallback((index2) => {
     if (colors && colors.length > 0) {
       return colors[index2 % colors.length];
     }
     return "";
-  };
+  }, [colors]);
+  const particleAngles = useMemo(() => {
+    if (!showParticles)
+      return [];
+    return Array.from({ length: particleCount }).map((_, i) => {
+      const angle = 360 / particleCount * i;
+      const radian = angle * Math.PI / 180;
+      return {
+        x: Math.cos(radian) * 30,
+        y: Math.sin(radian) * 30
+      };
+    });
+  }, [showParticles, particleCount]);
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
     return /* @__PURE__ */ jsx(
@@ -17046,7 +17090,8 @@ var SplashCursor = ({
   return /* @__PURE__ */ jsx("div", { className: cn(
     "pointer-events-none z-[9999]",
     containerRef ? "absolute inset-0" : "fixed inset-0"
-  ), children: /* @__PURE__ */ jsx(AnimatePresence, { children: splashes.map((splash, index2) => /* @__PURE__ */ jsxs(React68__default.Fragment, { children: [
+  ), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: splashes.map((splash, index2) => [
+    /* Ana splash efekti */
     /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -17057,9 +17102,9 @@ var SplashCursor = ({
         style: {
           position: "absolute",
           left: splash.x - 12,
-          // Merkeze hizala
           top: splash.y - 12,
-          backgroundColor: getColor(index2) || void 0
+          backgroundColor: getColor(index2) || void 0,
+          willChange: "transform, opacity"
         },
         variants: animationVariants2,
         initial: "initial",
@@ -17069,43 +17114,37 @@ var SplashCursor = ({
           duration: duration / 1e3,
           ease: "easeOut"
         }
-      }
+      },
+      splash.id
     ),
-    showParticles && Array.from({ length: particleCount }).map((_, particleIndex) => {
-      const angle = 360 / particleCount * particleIndex;
-      const radian = angle * Math.PI / 180;
-      const distance = 30;
-      return /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          className: "absolute w-1 h-1 bg-current rounded-full",
-          style: {
-            left: splash.x,
-            top: splash.y,
-            color: getColor(index2 + particleIndex) || "currentColor"
-          },
-          initial: {
-            x: 0,
-            y: 0,
-            opacity: 1,
-            scale: 1
-          },
-          animate: {
-            x: Math.cos(radian) * distance,
-            y: Math.sin(radian) * distance,
-            opacity: 0,
-            scale: 0
-          },
-          transition: {
-            duration: duration / 1e3,
-            ease: "easeOut"
-          }
+    /* Optimized particle rendering */
+    ...showParticles ? particleAngles.map((angle, particleIndex) => /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute w-1 h-1 bg-current rounded-full",
+        style: {
+          left: splash.x,
+          top: splash.y,
+          color: getColor(index2 + particleIndex) || "currentColor",
+          willChange: "transform, opacity"
         },
-        `${splash.id}-particle-${particleIndex}`
-      );
-    })
-  ] }, splash.id)) }) });
+        initial: { x: 0, y: 0, opacity: 1, scale: 1 },
+        animate: {
+          x: angle.x,
+          y: angle.y,
+          opacity: 0,
+          scale: 0
+        },
+        transition: {
+          duration: duration / 1e3,
+          ease: "easeOut"
+        }
+      },
+      `${splash.id}-p${particleIndex}`
+    )) : []
+  ]).flat() }) });
 };
+var SplashCursor = React68__default.memo(SplashCursorComponent);
 SplashCursor.displayName = "SplashCursor";
 var SplashCursorContainer = ({
   className,
@@ -29103,7 +29142,7 @@ var ViewDesc = class {
     if (!(force || brKludge && safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset))
       return;
     let domSelExtended = false;
-    if ((domSel.extend || anchor == head) && !(brKludge && gecko)) {
+    if ((domSel.extend || anchor == head) && !brKludge) {
       domSel.collapse(anchorDOM.node, anchorDOM.offset);
       try {
         if (anchor != head)
@@ -29486,18 +29525,17 @@ var NodeViewDesc = class extends ViewDesc {
   }
   // Mark this node as being the selected node.
   selectNode() {
-    if (this.nodeDOM.nodeType == 1) {
+    if (this.nodeDOM.nodeType == 1)
       this.nodeDOM.classList.add("ProseMirror-selectednode");
-      if (this.contentDOM || !this.node.type.spec.draggable)
-        this.nodeDOM.draggable = true;
-    }
+    if (this.contentDOM || !this.node.type.spec.draggable)
+      this.dom.draggable = true;
   }
   // Remove selected node marking from this node.
   deselectNode() {
     if (this.nodeDOM.nodeType == 1) {
       this.nodeDOM.classList.remove("ProseMirror-selectednode");
       if (this.contentDOM || !this.node.type.spec.draggable)
-        this.nodeDOM.removeAttribute("draggable");
+        this.dom.removeAttribute("draggable");
     }
   }
   get domAtom() {
@@ -30262,14 +30300,17 @@ function removeClassOnSelectionChange(view) {
   });
 }
 function selectCursorWrapper(view) {
-  let domSel = view.domSelection();
+  let domSel = view.domSelection(), range = document.createRange();
   if (!domSel)
     return;
   let node = view.cursorWrapper.dom, img = node.nodeName == "IMG";
   if (img)
-    domSel.collapse(node.parentNode, domIndex(node) + 1);
+    range.setStart(node.parentNode, domIndex(node) + 1);
   else
-    domSel.collapse(node, 0);
+    range.setStart(node, 0);
+  range.collapse(true);
+  domSel.removeAllRanges();
+  domSel.addRange(range);
   if (!img && !view.state.selection.visible && ie && ie_version <= 11) {
     node.disabled = true;
     node.disabled = false;
@@ -30679,18 +30720,13 @@ function parseFromClipboard(view, text, html, plainText, $context) {
   let dom, slice2;
   if (!html && !text)
     return null;
-  let asText = !!text && (plainText || inCode || !html);
+  let asText = text && (plainText || inCode || !html);
   if (asText) {
     view.someProp("transformPastedText", (f) => {
       text = f(text, inCode || plainText, view);
     });
-    if (inCode) {
-      slice2 = new Slice(Fragment17.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0);
-      view.someProp("transformPasted", (f) => {
-        slice2 = f(slice2, view, true);
-      });
-      return slice2;
-    }
+    if (inCode)
+      return text ? new Slice(Fragment17.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty;
     let parsed = view.someProp("clipboardTextParser", (f) => f(text, $context, plainText, view));
     if (parsed) {
       slice2 = parsed;
@@ -30749,7 +30785,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
     }
   }
   view.someProp("transformPasted", (f) => {
-    slice2 = f(slice2, view, asText);
+    slice2 = f(slice2, view);
   });
   return slice2;
 }
@@ -31159,7 +31195,7 @@ var MouseDown = class {
     }
     const target = flushed ? null : event.target;
     const targetDesc = target ? view.docView.nearestDesc(target, true) : null;
-    this.target = targetDesc && targetDesc.nodeDOM.nodeType == 1 ? targetDesc.nodeDOM : null;
+    this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom : null;
     let { selection } = view.state;
     if (event.button == 0 && targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false || selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos)
       this.mightDrag = {
@@ -31505,7 +31541,7 @@ editHandlers.drop = (view, _event) => {
   let slice2 = dragging && dragging.slice;
   if (slice2) {
     view.someProp("transformPasted", (f) => {
-      slice2 = f(slice2, view, false);
+      slice2 = f(slice2, view);
     });
   } else {
     slice2 = parseFromClipboard(view, getText(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
@@ -35336,8 +35372,10 @@ function selectionToInsertionEnd2(tr2, startLen, bias) {
 }
 var InputRule = class {
   constructor(config) {
+    var _a2;
     this.find = config.find;
     this.handler = config.handler;
+    this.undoable = (_a2 = config.undoable) != null ? _a2 : true;
   }
 };
 var inputRuleMatcherHandler = (text, find2) => {
@@ -35409,12 +35447,14 @@ function run(config) {
     if (handler === null || !tr2.steps.length) {
       return;
     }
-    tr2.setMeta(plugin, {
-      transform: tr2,
-      from: from2,
-      to,
-      text
-    });
+    if (rule.undoable) {
+      tr2.setMeta(plugin, {
+        transform: tr2,
+        from: from2,
+        to,
+        text
+      });
+    }
     view.dispatch(tr2);
     matched = true;
   });
@@ -35891,7 +35931,7 @@ var ExtensionManager = class {
   get plugins() {
     const { editor } = this;
     const extensions = sortExtensions([...this.extensions].reverse());
-    const allPlugins = extensions.map((extension) => {
+    const allPlugins = extensions.flatMap((extension) => {
       const context = {
         name: extension.name,
         options: extension.options,
@@ -35949,7 +35989,7 @@ var ExtensionManager = class {
         plugins.push(...proseMirrorPlugins);
       }
       return plugins;
-    }).flat();
+    });
     return allPlugins;
   }
   /**
@@ -37912,6 +37952,9 @@ var Editor = class extends EventEmitter {
     }
     this.createView(el);
     this.emit("mount", { editor: this });
+    if (this.css && !document.head.contains(this.css)) {
+      document.head.appendChild(this.css);
+    }
     window.setTimeout(() => {
       if (this.isDestroyed) {
         return;
@@ -38027,7 +38070,7 @@ var Editor = class extends EventEmitter {
           this.editorState = state;
         },
         dispatch: (tr2) => {
-          this.editorState = this.state.apply(tr2);
+          this.dispatchTransaction(tr2);
         },
         // Stub some commonly accessed properties to prevent errors
         composing: false,
@@ -38398,7 +38441,8 @@ function markInputRule(config) {
         tr2.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}));
         tr2.removeStoredMark(config.type);
       }
-    }
+    },
+    undoable: config.undoable
   });
 }
 function nodeInputRule(config) {
@@ -38426,7 +38470,8 @@ function nodeInputRule(config) {
         tr2.insert(insertionStart, config.type.create(attributes)).delete(tr2.mapping.map(start), tr2.mapping.map(end));
       }
       tr2.scrollIntoView();
-    }
+    },
+    undoable: config.undoable
   });
 }
 function textblockTypeInputRule(config) {
@@ -38439,7 +38484,8 @@ function textblockTypeInputRule(config) {
         return null;
       }
       state.tr.delete(range.from, range.to).setBlockType(range.from, range.from, config.type, attributes);
-    }
+    },
+    undoable: config.undoable
   });
 }
 function textInputRule(config) {
@@ -38460,7 +38506,8 @@ function textInputRule(config) {
         }
       }
       state.tr.insertText(insert, start, end);
-    }
+    },
+    undoable: config.undoable
   });
 }
 function wrappingInputRule(config) {
@@ -38493,7 +38540,8 @@ function wrappingInputRule(config) {
       if (before && before.type === config.type && canJoin(tr2.doc, range.from - 1) && (!config.joinPredicate || config.joinPredicate(match, before))) {
         tr2.join(range.from - 1);
       }
-    }
+    },
+    undoable: config.undoable
   });
 }
 function canInsertNode(state, nodeType) {
@@ -78087,6 +78135,74 @@ function Sidebar(props) {
   return /* @__PURE__ */ jsx(SidebarInternal, { ...props });
 }
 init_use_subscription();
+function useNavbarScroll({
+  sticky = true,
+  hideOnScroll = false,
+  showScrollProgress = false,
+  scrollBehavior = "static",
+  minimalConfig = {}
+} = {}) {
+  const [scrolled, setScrolled] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [isMinimal, setIsMinimal] = useState(false);
+  const [scrollY, setScrollY] = useState(0);
+  const lastScrollY = useRef(0);
+  const ticking = useRef(false);
+  const {
+    scrollThreshold = 50,
+    animationDuration = 300
+  } = minimalConfig;
+  const updateScrollState = useCallback(() => {
+    const currentScrollY = window.scrollY;
+    setScrollY(currentScrollY);
+    const isScrolled = currentScrollY > 10;
+    setScrolled(isScrolled);
+    if (scrollBehavior === "hide" || hideOnScroll) {
+      if (currentScrollY > lastScrollY.current && currentScrollY > 100) {
+        setHidden(true);
+      } else {
+        setHidden(false);
+      }
+    } else if (scrollBehavior === "minimal") {
+      const shouldBeMinimal = currentScrollY > scrollThreshold;
+      if (shouldBeMinimal !== isMinimal) {
+        setIsMinimal(shouldBeMinimal);
+      }
+    }
+    if (showScrollProgress) {
+      const winScroll = window.scrollY;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const progress = height > 0 ? winScroll / height * 100 : 0;
+      setScrollProgress(Math.min(100, Math.max(0, progress)));
+    }
+    lastScrollY.current = currentScrollY;
+    ticking.current = false;
+  }, [hideOnScroll, scrollBehavior, showScrollProgress, scrollThreshold, isMinimal]);
+  const requestTick = useCallback(() => {
+    if (!ticking.current) {
+      requestAnimationFrame(updateScrollState);
+      ticking.current = true;
+    }
+  }, [updateScrollState]);
+  useEffect(() => {
+    if (!sticky && scrollBehavior === "static" && !showScrollProgress) {
+      return;
+    }
+    updateScrollState();
+    window.addEventListener("scroll", requestTick, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", requestTick);
+    };
+  }, [sticky, scrollBehavior, showScrollProgress, requestTick, updateScrollState]);
+  return {
+    scrolled,
+    hidden,
+    scrollProgress,
+    isMinimal,
+    scrollY
+  };
+}
 function NavbarInternal({
   sections = [],
   branding,
@@ -78102,6 +78218,7 @@ function NavbarInternal({
   showThemeToggle = false,
   theme = "system",
   onThemeChange,
+  themeToggleVariant = "dropdown",
   userMenu,
   notifications,
   cta,
@@ -78118,9 +78235,12 @@ function NavbarInternal({
   shadow = false,
   rounded = false,
   logoPosition = "left",
+  navItemsPosition = "left",
   mobileMenuPosition = "left",
   hideOnScroll = false,
   showScrollProgress = false,
+  scrollBehavior = "static",
+  minimalConfig = {},
   maxWidth = "2xl",
   fullWidth = false,
   enableNProgress = true,
@@ -78133,11 +78253,15 @@ function NavbarInternal({
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [isCommandOpen, setIsCommandOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
-  const [scrolled, setScrolled] = useState(false);
-  const [hidden, setHidden] = useState(false);
-  const [scrollProgress, setScrollProgress] = useState(0);
-  const lastScrollY = useRef(0);
+  const [currentTheme, setCurrentTheme] = useState(theme);
   const navRef = useRef(null);
+  const { scrolled, hidden, scrollProgress, isMinimal } = useNavbarScroll({
+    sticky,
+    hideOnScroll,
+    showScrollProgress,
+    scrollBehavior,
+    minimalConfig
+  });
   useEffect(() => {
     if (enableNProgress) {
       NProgress.configure({
@@ -78158,29 +78282,8 @@ function NavbarInternal({
     return () => window.removeEventListener("resize", checkMobile);
   }, [mobileBreakpoint]);
   useEffect(() => {
-    if (!sticky && !hideOnScroll && !showScrollProgress)
-      return;
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      setScrolled(currentScrollY > 10);
-      if (hideOnScroll) {
-        if (currentScrollY > lastScrollY.current && currentScrollY > 100) {
-          setHidden(true);
-        } else {
-          setHidden(false);
-        }
-        lastScrollY.current = currentScrollY;
-      }
-      if (showScrollProgress) {
-        const winScroll = window.scrollY;
-        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-        const scrolled2 = winScroll / height * 100;
-        setScrollProgress(scrolled2);
-      }
-    };
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [sticky, hideOnScroll, showScrollProgress]);
+    setCurrentTheme(theme);
+  }, [theme]);
   useEffect(() => {
     if (!keyboardShortcuts && !enableCommandAI)
       return;
@@ -78228,7 +78331,7 @@ function NavbarInternal({
     NavigationMenuLink2,
     {
       className: cn(
-        "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground cursor-pointer",
         item.disabled && "opacity-50 cursor-not-allowed"
       ),
       onClick: () => !item.disabled && handleItemClick(item),
@@ -78363,6 +78466,9 @@ function NavbarInternal({
     ] }) })
   ] });
   const getHeight = () => {
+    if (isMinimal && minimalConfig?.heightOnScroll) {
+      return minimalConfig.heightOnScroll;
+    }
     switch (size4) {
       case "sm":
         return "h-14";
@@ -78372,8 +78478,12 @@ function NavbarInternal({
         return "h-16";
     }
   };
+  const shouldHideInMinimal = (element) => {
+    return isMinimal && minimalConfig?.hideElements?.includes(element);
+  };
   const navClasses = cn(
-    "moonui-pro w-full transition-all duration-300",
+    "moonui-pro w-full transition-all",
+    `duration-${minimalConfig?.animationDuration || 300}`,
     // Base variant styles
     variant === "default" && "border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
     variant === "floating" && "mx-4 mt-4 rounded-lg border bg-background/95 backdrop-blur shadow-lg",
@@ -78384,7 +78494,10 @@ function NavbarInternal({
     // Scroll states
     scrolled && sticky && variant !== "transparent" && "shadow-sm",
     scrolled && variant === "transparent" && "bg-background/95 backdrop-blur border-b",
-    hidden && "-translate-y-full",
+    scrollBehavior === "hide" && hidden && "-translate-y-full",
+    // Minimal mode styles
+    scrollBehavior === "minimal" && isMinimal && "shadow-md border-b",
+    scrollBehavior === "minimal" && isMinimal && minimalConfig?.centerOnScroll && "px-8",
     // Glass effect
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
     blur2 && "backdrop-blur-md",
@@ -78407,12 +78520,17 @@ function NavbarInternal({
           ),
           children: [
             branding && /* @__PURE__ */ jsxs(
-              "div",
+              motion.div,
               {
                 className: cn(
                   "flex items-center gap-2",
                   logoPosition === "center" && !isMobile ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
                 ),
+                animate: {
+                  scale: isMinimal ? 0.9 : 1,
+                  opacity: shouldHideInMinimal("logo-text") ? 0.8 : 1
+                },
+                transition: { duration: minimalConfig?.animationDuration ? minimalConfig.animationDuration / 1e3 : 0.3 },
                 children: [
                   logoPosition === "left" && mobileMenuPosition === "left" && /* @__PURE__ */ jsx(MobileMenu, {}),
                   /* @__PURE__ */ jsxs(
@@ -78428,79 +78546,104 @@ function NavbarInternal({
                       className: "flex items-center gap-2",
                       children: [
                         branding.logo,
-                        branding.title && !isMobile && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
+                        branding.title && !isMobile && !shouldHideInMinimal("logo-text") && /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            className: "font-semibold text-lg",
+                            animate: {
+                              opacity: shouldHideInMinimal("logo-text") ? 0 : 1,
+                              width: shouldHideInMinimal("logo-text") ? 0 : "auto"
+                            },
+                            transition: { duration: 0.3 },
+                            children: branding.title
+                          }
+                        )
                       ]
                     }
                   )
                 ]
               }
             ),
-            !isMobile && !hideNavItems && /* @__PURE__ */ jsx(NavigationMenu2, { className: "hidden md:flex", children: /* @__PURE__ */ jsx(NavigationMenuList2, { children: sections.map((section) => /* @__PURE__ */ jsx(React68__default.Fragment, { children: section.items.map((item) => {
-              const hasChildren = item.items && item.items.length > 0;
-              const isActive2 = item.href === activePath;
-              if (hasChildren) {
-                return /* @__PURE__ */ jsxs(
-                  NavigationMenuItem2,
-                  {
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        NavigationMenuTrigger2,
+            !isMobile && !hideNavItems && /* @__PURE__ */ jsx(
+              NavigationMenu2,
+              {
+                className: cn(
+                  "hidden md:flex",
+                  navItemsPosition === "center" && "flex-1 justify-center mx-4",
+                  navItemsPosition === "right" && "ml-auto",
+                  navItemsPosition === "left" && "ml-4",
+                  isMinimal && minimalConfig?.centerOnScroll && "flex-1 justify-center",
+                  !isMinimal && navItemsPosition === "center" && "absolute left-1/2 transform -translate-x-1/2"
+                ),
+                children: /* @__PURE__ */ jsx(NavigationMenuList2, { children: sections.map((section) => /* @__PURE__ */ jsx(React68__default.Fragment, { children: section.items.map((item) => {
+                  const hasChildren = item.items && item.items.length > 0;
+                  const isActive2 = item.href === activePath;
+                  if (hasChildren) {
+                    return /* @__PURE__ */ jsxs(
+                      NavigationMenuItem2,
+                      {
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            NavigationMenuTrigger2,
+                            {
+                              className: cn(
+                                isActive2 && "bg-accent text-accent-foreground",
+                                item.disabled && "opacity-50 cursor-not-allowed"
+                              ),
+                              disabled: item.disabled,
+                              children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                                item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                                item.title
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
+                            item.items
+                          ) })
+                        ]
+                      },
+                      item.id
+                    );
+                  }
+                  return /* @__PURE__ */ jsx(
+                    NavigationMenuItem2,
+                    {
+                      children: /* @__PURE__ */ jsxs(
+                        NavigationMenuLink2,
                         {
                           className: cn(
+                            navigationMenuTriggerStyle(),
+                            "cursor-pointer",
                             isActive2 && "bg-accent text-accent-foreground",
                             item.disabled && "opacity-50 cursor-not-allowed"
                           ),
-                          disabled: item.disabled,
-                          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                            item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
-                            item.title
-                          ] })
+                          onClick: () => !item.disabled && handleItemClick(
+                            item
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                              item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
+                              item.title
+                            ] }),
+                            item.badge && /* @__PURE__ */ jsx(
+                              MoonUIBadgePro,
+                              {
+                                variant: item.badgeVariant || "secondary",
+                                className: "ml-2",
+                                children: item.badge
+                              }
+                            )
+                          ]
                         }
-                      ),
-                      /* @__PURE__ */ jsx(NavigationMenuContent2, { children: item.items && renderMegaMenuContent(
-                        item.items
-                      ) })
-                    ]
-                  },
-                  item.id
-                );
+                      )
+                    },
+                    item.id
+                  );
+                }) }, section.id)) })
               }
-              return /* @__PURE__ */ jsx(
-                NavigationMenuItem2,
-                {
-                  children: /* @__PURE__ */ jsxs(
-                    NavigationMenuLink2,
-                    {
-                      className: cn(
-                        navigationMenuTriggerStyle(),
-                        isActive2 && "bg-accent text-accent-foreground",
-                        item.disabled && "opacity-50 cursor-not-allowed"
-                      ),
-                      onClick: () => !item.disabled && handleItemClick(
-                        item
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                          item.icon && /* @__PURE__ */ jsx("span", { children: item.icon }),
-                          item.title
-                        ] }),
-                        item.badge && /* @__PURE__ */ jsx(
-                          MoonUIBadgePro,
-                          {
-                            variant: item.badgeVariant || "secondary",
-                            className: "ml-2",
-                            children: item.badge
-                          }
-                        )
-                      ]
-                    }
-                  )
-                },
-                item.id
-              );
-            }) }, section.id)) }) }),
+            ),
             /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
-              showSearch && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
+              showSearch && !shouldHideInMinimal("search") && /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx(
                 MoonUIButtonPro,
                 {
                   variant: "ghost",
@@ -78532,17 +78675,65 @@ function NavbarInternal({
                   "K"
                 ] }) })
               ] }) }),
-              showThemeToggle && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+              showThemeToggle && (themeToggleVariant === "button" ? /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  whileTap: { scale: 0.95 },
+                  className: "relative",
+                  children: /* @__PURE__ */ jsx(
+                    MoonUIButtonPro,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => {
+                        const newTheme = currentTheme === "dark" ? "light" : "dark";
+                        setCurrentTheme(newTheme);
+                        onThemeChange?.(newTheme);
+                        if (typeof window !== "undefined") {
+                          const root = window.document.documentElement;
+                          root.classList.remove("light", "dark");
+                          root.classList.add(newTheme);
+                        }
+                      },
+                      className: "relative overflow-hidden",
+                      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: currentTheme === "dark" ? /* @__PURE__ */ jsx(
+                        motion.div,
+                        {
+                          initial: { y: -20, opacity: 0 },
+                          animate: { y: 0, opacity: 1 },
+                          exit: { y: 20, opacity: 0 },
+                          transition: { duration: 0.2 },
+                          children: /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" })
+                        },
+                        "moon"
+                      ) : /* @__PURE__ */ jsx(
+                        motion.div,
+                        {
+                          initial: { y: -20, opacity: 0, rotate: -90 },
+                          animate: { y: 0, opacity: 1, rotate: 0 },
+                          exit: { y: 20, opacity: 0, rotate: 90 },
+                          transition: { duration: 0.2 },
+                          children: /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" })
+                        },
+                        "sun"
+                      ) })
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                 /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "icon", children: [
-                  theme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }),
-                  theme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
-                  theme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5" })
+                  currentTheme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }),
+                  currentTheme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
+                  currentTheme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5" })
                 ] }) }),
                 /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
                   /* @__PURE__ */ jsxs(
                     MoonUIDropdownMenuItemPro,
                     {
-                      onClick: () => onThemeChange?.("light"),
+                      onClick: () => {
+                        setCurrentTheme("light");
+                        onThemeChange?.("light");
+                      },
                       children: [
                         /* @__PURE__ */ jsx(Sun, { className: "mr-2 h-4 w-4" }),
                         "Light"
@@ -78552,7 +78743,10 @@ function NavbarInternal({
                   /* @__PURE__ */ jsxs(
                     MoonUIDropdownMenuItemPro,
                     {
-                      onClick: () => onThemeChange?.("dark"),
+                      onClick: () => {
+                        setCurrentTheme("dark");
+                        onThemeChange?.("dark");
+                      },
                       children: [
                         /* @__PURE__ */ jsx(Moon, { className: "mr-2 h-4 w-4" }),
                         "Dark"
@@ -78562,7 +78756,10 @@ function NavbarInternal({
                   /* @__PURE__ */ jsxs(
                     MoonUIDropdownMenuItemPro,
                     {
-                      onClick: () => onThemeChange?.("system"),
+                      onClick: () => {
+                        setCurrentTheme("system");
+                        onThemeChange?.("system");
+                      },
                       children: [
                         /* @__PURE__ */ jsx(Monitor, { className: "mr-2 h-4 w-4" }),
                         "System"
@@ -78570,7 +78767,7 @@ function NavbarInternal({
                     }
                   )
                 ] })
-              ] }),
+              ] })),
               notifications && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                 /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
                   MoonUIButtonPro,
@@ -78694,7 +78891,7 @@ function NavbarInternal({
                   }
                 )
               ] }),
-              cta && /* @__PURE__ */ jsx(
+              cta && !shouldHideInMinimal("cta") && /* @__PURE__ */ jsx(
                 MoonUIButtonPro,
                 {
                   variant: cta.variant || "primary",
@@ -89515,13 +89712,16 @@ var BubbleBackgroundInternal = ({
   const createBubble = useCallback((canvas) => {
     const [minSize, maxSize] = sizeRange;
     const size4 = minSize + Math.random() * (maxSize - minSize);
-    let startY = canvas.height + size4;
-    let startX = Math.random() * canvas.width;
+    const rect = canvas.getBoundingClientRect();
+    const actualWidth = rect.width;
+    const actualHeight = rect.height;
+    let startY = actualHeight + size4;
+    let startX = -size4 + Math.random() * (actualWidth + size4 * 2);
     if (animationStyle === "champagne") {
-      const sourcePoints = [canvas.width * 0.3, canvas.width * 0.5, canvas.width * 0.7];
+      const sourcePoints = [actualWidth * 0.3, actualWidth * 0.5, actualWidth * 0.7];
       startX = sourcePoints[Math.floor(Math.random() * sourcePoints.length)] + (Math.random() - 0.5) * 50;
     } else if (animationStyle === "lava") {
-      startX = canvas.width / 2 + (Math.random() - 0.5) * canvas.width * 0.3;
+      startX = actualWidth / 2 + (Math.random() - 0.5) * actualWidth * 0.3;
     }
     return {
       x: startX,
@@ -89544,10 +89744,14 @@ var BubbleBackgroundInternal = ({
     const canvas = canvasRef.current;
     if (!canvas)
       return;
+    const rect = canvas.getBoundingClientRect();
+    const actualWidth = rect.width;
+    const actualHeight = rect.height;
     const bubbles = [];
     for (let i = 0; i < count3; i++) {
       const bubble = createBubble(canvas);
-      bubble.y = Math.random() * canvas.height;
+      bubble.y = Math.random() * (actualHeight + 100);
+      bubble.x = -50 + Math.random() * (actualWidth + 100);
       bubbles.push(bubble);
     }
     bubblesRef.current = bubbles;
@@ -89682,9 +89886,11 @@ var BubbleBackgroundInternal = ({
           bubble.vy += dy / distance * force;
         }
       }
-      if (bubble.x < -bubble.size)
-        bubble.x = canvas.width + bubble.size;
-      if (bubble.x > canvas.width + bubble.size)
+      const rect = canvas.getBoundingClientRect();
+      const actualWidth = rect.width;
+      if (bubble.x < -bubble.size * 2)
+        bubble.x = actualWidth + bubble.size;
+      if (bubble.x > actualWidth + bubble.size * 2)
         bubble.x = -bubble.size;
       if (bubble.y < -bubble.size && !bubble.popping) {
         const newBubble = createBubble(canvas);
@@ -89779,10 +89985,13 @@ var BubbleBackgroundInternal = ({
     const canvas = canvasRef.current;
     if (!canvas)
       return;
-    const rect = canvas.getBoundingClientRect();
-    const dpr = window.devicePixelRatio || 1;
-    canvas.style.width = rect.width + "px";
-    canvas.style.height = rect.height + "px";
+    const container = canvas.parentElement;
+    if (!container)
+      return;
+    const rect = container.getBoundingClientRect();
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
     canvas.width = rect.width * dpr;
     canvas.height = rect.height * dpr;
     const ctx = canvas.getContext("2d");
@@ -89809,10 +90018,13 @@ var BubbleBackgroundInternal = ({
     if (!canvas)
       return;
     detectPerformance();
-    const rect = canvas.getBoundingClientRect();
-    const dpr = window.devicePixelRatio || 1;
-    canvas.style.width = rect.width + "px";
-    canvas.style.height = rect.height + "px";
+    const container = canvas.parentElement;
+    if (!container)
+      return;
+    const rect = container.getBoundingClientRect();
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
     canvas.width = rect.width * dpr;
     canvas.height = rect.height * dpr;
     const ctx = canvas.getContext("2d");
@@ -93913,6 +94125,14 @@ function DocsProProvider({ children, componentName = "Pro Component" }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 init_use_subscription();
+var debounce = (func, wait) => {
+  let timeout = null;
+  return (...args) => {
+    if (timeout)
+      clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+};
 var MouseTrailInternal = ({
   children,
   style: style2 = "dots",
@@ -93950,10 +94170,12 @@ var MouseTrailInternal = ({
   const canvasRef = useRef(null);
   const animationRef = useRef(void 0);
   const particlesRef = useRef([]);
-  const mouseRef = useRef({ x: 0, y: 0 });
+  const mouseRef = useRef({ x: 0, y: 0, active: false });
   const lastMouseRef = useRef({ x: 0, y: 0 });
   const frameCountRef = useRef(0);
   const rainbowPhaseRef = useRef(0);
+  const lastFrameTime = useRef(0);
+  const [isActive2, setIsActive] = useState(false);
   const initializeParticles = useCallback(() => {
     const particles = [];
     for (let i = 0; i < length; i++) {
@@ -94119,12 +94341,12 @@ var MouseTrailInternal = ({
       newParticle.opacity = 1;
       newParticle.rotation = 0;
       newParticle.scale = scaleRange[1];
-      newParticle.sparkle = sparkle && Math.random() < sparkleFrequency;
+      newParticle.sparkle = sparkle && frameCountRef.current * 7 % 100 / 100 < sparkleFrequency;
       if (rainbow) {
         const hue = rainbowPhaseRef.current * 360 % 360;
         newParticle.color = `hsl(${hue}, 70%, 50%)`;
       } else {
-        newParticle.color = colors[Math.floor(Math.random() * colors.length)];
+        newParticle.color = colors[frameCountRef.current % colors.length];
       }
       lastMouseRef.current = { ...mouse };
     }
@@ -94180,6 +94402,14 @@ var MouseTrailInternal = ({
     const canvas = canvasRef.current;
     if (!canvas)
       return;
+    const targetFPS = 60;
+    const frameInterval = 1e3 / targetFPS;
+    const deltaTime = currentTime - lastFrameTime.current;
+    if (deltaTime < frameInterval) {
+      animationRef.current = requestAnimationFrame(animate4);
+      return;
+    }
+    lastFrameTime.current = currentTime - deltaTime % frameInterval;
     const ctx = canvas.getContext("2d", {
       alpha: true,
       desynchronized: true
@@ -94187,14 +94417,17 @@ var MouseTrailInternal = ({
     if (!ctx)
       return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    updateParticles(16);
-    drawLines(ctx, particlesRef.current);
-    const particles = particlesRef.current;
-    particles.forEach((particle) => {
-      if (particle.opacity > 0) {
-        drawShape(ctx, particle, particle.x, particle.y);
-      }
-    });
+    const hasActiveParticles = particlesRef.current.some((p) => p.opacity > 0.01);
+    if (mouseRef.current.active || hasActiveParticles) {
+      updateParticles(deltaTime);
+      drawLines(ctx, particlesRef.current);
+      const particles = particlesRef.current;
+      particles.forEach((particle) => {
+        if (particle.opacity > 0.01) {
+          drawShape(ctx, particle, particle.x, particle.y);
+        }
+      });
+    }
     frameCountRef.current++;
     animationRef.current = requestAnimationFrame(animate4);
   }, [updateParticles, drawLines, drawShape]);
@@ -94203,11 +94436,17 @@ var MouseTrailInternal = ({
     if (!canvas)
       return;
     const rect = canvas.getBoundingClientRect();
-    mouseRef.current = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    };
-  }, []);
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
+      mouseRef.current = { x, y, active: true };
+      if (!isActive2) {
+        setIsActive(true);
+      }
+    } else {
+      mouseRef.current.active = false;
+    }
+  }, [isActive2]);
   const handleTouchMove = useCallback((e) => {
     if (!enableTouch)
       return;
@@ -94216,37 +94455,67 @@ var MouseTrailInternal = ({
       return;
     const rect = canvas.getBoundingClientRect();
     const touch = e.touches[0];
-    mouseRef.current = {
-      x: touch.clientX - rect.left,
-      y: touch.clientY - rect.top
-    };
-  }, [enableTouch]);
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
+      mouseRef.current = { x, y, active: true };
+      if (!isActive2) {
+        setIsActive(true);
+      }
+    } else {
+      mouseRef.current.active = false;
+    }
+  }, [enableTouch, isActive2]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
       return;
     const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width;
-    canvas.height = rect.height;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.scale(dpr, dpr);
+    }
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
   }, []);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
       return;
-    const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width;
-    canvas.height = rect.height;
+    handleResize();
     initializeParticles();
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("mousemove", handleMouseMove2);
+    const debouncedResize = debounce(handleResize, 100);
+    window.addEventListener("resize", debouncedResize);
+    canvas.addEventListener("mousemove", handleMouseMove2);
+    canvas.addEventListener("mouseenter", () => {
+      mouseRef.current.active = true;
+      setIsActive(true);
+    });
+    canvas.addEventListener("mouseleave", () => {
+      mouseRef.current.active = false;
+      setIsActive(false);
+    });
     if (enableTouch) {
       window.addEventListener("touchmove", handleTouchMove);
     }
     animationRef.current = requestAnimationFrame(animate4);
     return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("mousemove", handleMouseMove2);
-      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("resize", debouncedResize);
+      canvas.removeEventListener("mousemove", handleMouseMove2);
+      canvas.removeEventListener("mouseenter", () => {
+        mouseRef.current.active = true;
+        setIsActive(true);
+      });
+      canvas.removeEventListener("mouseleave", () => {
+        mouseRef.current.active = false;
+        setIsActive(false);
+      });
+      if (enableTouch) {
+        canvas.removeEventListener("touchmove", handleTouchMove);
+      }
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
       }
@@ -94272,10 +94541,13 @@ var MouseTrailInternal = ({
           {
             ref: canvasRef,
             className: cn(
-              "absolute inset-0 w-full h-full pointer-events-none",
+              "absolute inset-0 w-full h-full",
               className
             ),
-            style: { zIndex }
+            style: {
+              zIndex,
+              pointerEvents: "auto"
+            }
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-0", children })
@@ -94299,44 +94571,46 @@ var MouseTrail = (props) => {
 };
 MouseTrail.displayName = "MouseTrail";
 init_use_subscription();
+var lerp = (start, end, factor) => {
+  return start + (end - start) * factor;
+};
+var clamp2 = (value, min2, max2) => {
+  return Math.max(min2, Math.min(max2, value));
+};
 var MagneticElementsInternal = ({
   children,
-  strength = 0.5,
-  radius = 200,
+  strength = 0.3,
+  radius = 150,
   type = "attract",
   enableTouch = false,
-  damping = 0.1,
-  stiffness = 0.2,
-  mass = 1,
+  damping = 0.2,
+  stiffness = 0.3,
   rotate = true,
-  rotationStrength = 15,
+  rotationStrength = 10,
   scale = true,
-  scaleFactor = 1.1,
-  tilt = true,
-  tiltAngle = 15,
-  transitionDuration = 0,
-  easing = "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+  scaleFactor = 1.05,
+  tilt = false,
+  tiltAngle = 10,
   constrain = true,
-  maxDisplacement = 100,
-  hoverOnly = false,
+  maxDisplacement = 50,
   returnSpeed = 0.1,
-  overshoot = true,
-  overshootAmount = 1.2,
-  inertia = true,
-  inertiaDecay = 0.95,
-  enable3D = false,
-  perspective = 1e3,
+  smooth = true,
+  smoothing = 0.15,
+  performance: performance2 = "balanced",
   glow = false,
-  glowColor = "#667eea",
+  glowColor = "rgba(59, 130, 246, 0.5)",
   containerClassName,
   elementClassName,
   debug = false
 }) => {
   const containerRef = useRef(null);
   const elementsRef = useRef([]);
-  const mouseRef = useRef({ x: 0, y: 0 });
+  const mouseRef = useRef({ x: 0, y: 0, active: false });
   const animationRef = useRef(void 0);
-  const isActiveRef = useRef(false);
+  const [isReady, setIsReady] = useState(false);
+  const fps = performance2 === "high" ? 60 : performance2 === "balanced" ? 30 : 15;
+  const frameInterval = 1e3 / fps;
+  const lastFrameTime = useRef(0);
   const initializeElements = useCallback(() => {
     const container = containerRef.current;
     if (!container)
@@ -94347,35 +94621,39 @@ var MagneticElementsInternal = ({
       const element = el;
       const rect = element.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
+      const centerX = rect.left - containerRect.left + rect.width / 2;
+      const centerY = rect.top - containerRect.top + rect.height / 2;
       elements.push({
         element,
-        originalX: rect.left - containerRect.left + rect.width / 2,
-        originalY: rect.top - containerRect.top + rect.height / 2,
+        originalX: centerX,
+        originalY: centerY,
         currentX: 0,
         currentY: 0,
-        velocityX: 0,
-        velocityY: 0,
         targetX: 0,
         targetY: 0,
         rotation: 0,
         scale: 1,
-        isHovered: false
+        opacity: 1
       });
-      element.style.willChange = "transform";
-      if (transitionDuration > 0) {
-        element.style.transition = `transform ${transitionDuration}ms ${easing}`;
+      element.style.willChange = "transform, opacity";
+      element.style.transformOrigin = "center center";
+      if (smooth) {
+        element.style.transition = "none";
       }
     });
     elementsRef.current = elements;
-  }, [transitionDuration, easing]);
+    setIsReady(true);
+  }, [smooth]);
   const calculateForce = useCallback((element, mouseX, mouseY) => {
     const dx = mouseX - element.originalX;
     const dy = mouseY - element.originalY;
     const distance = Math.sqrt(dx * dx + dy * dy);
+    const normalizedDistance = Math.min(distance / radius, 1);
     if (distance > radius) {
-      return { fx: 0, fy: 0, distance };
+      return { fx: 0, fy: 0, distance, normalizedDistance: 1 };
     }
-    const force = (1 - distance / radius) * strength;
+    const easedForce = 1 - Math.pow(normalizedDistance, 2);
+    const force = easedForce * strength;
     let fx = 0;
     let fy = 0;
     switch (type) {
@@ -94384,67 +94662,70 @@ var MagneticElementsInternal = ({
         fy = dy * force;
         break;
       case "repel":
-        fx = -dx * force;
-        fy = -dy * force;
+        const repelForce = force * 2;
+        fx = -dx * repelForce / (normalizedDistance + 0.1);
+        fy = -dy * repelForce / (normalizedDistance + 0.1);
         break;
       case "elastic":
-        const elasticForce = Math.sin(distance / radius * Math.PI) * strength;
+        const elasticForce = Math.sin(normalizedDistance * Math.PI) * strength;
         fx = dx * elasticForce;
         fy = dy * elasticForce;
         break;
       case "orbit":
         const angle = Math.atan2(dy, dx) + Math.PI / 2;
-        const orbitForce = force * 50;
+        const orbitForce = force * 30;
         fx = Math.cos(angle) * orbitForce;
         fy = Math.sin(angle) * orbitForce;
         break;
     }
-    return { fx, fy, distance };
+    return { fx, fy, distance, normalizedDistance };
   }, [radius, strength, type]);
-  const updateElements = useCallback(() => {
+  const updateElements = useCallback((currentTime) => {
+    if (performance2 !== "high") {
+      const elapsed = currentTime - lastFrameTime.current;
+      if (elapsed < frameInterval)
+        return;
+      lastFrameTime.current = currentTime - elapsed % frameInterval;
+    }
     const elements = elementsRef.current;
     const mouse = mouseRef.current;
     elements.forEach((element) => {
-      const { fx, fy, distance } = calculateForce(element, mouse.x, mouse.y);
-      const isInRange = distance <= radius;
-      if (isInRange && (!hoverOnly || element.isHovered)) {
+      const { fx, fy, distance, normalizedDistance } = calculateForce(
+        element,
+        mouse.x,
+        mouse.y
+      );
+      const isInRange = distance <= radius && mouse.active;
+      if (isInRange) {
         element.targetX = fx;
         element.targetY = fy;
+        element.opacity = 1;
       } else {
         element.targetX = 0;
         element.targetY = 0;
+        element.opacity = 1;
       }
       if (constrain) {
-        element.targetX = Math.max(-maxDisplacement, Math.min(maxDisplacement, element.targetX));
-        element.targetY = Math.max(-maxDisplacement, Math.min(maxDisplacement, element.targetY));
-      }
-      if (inertia) {
-        const ax = (element.targetX - element.currentX) * stiffness - element.velocityX * damping;
-        const ay = (element.targetY - element.currentY) * stiffness - element.velocityY * damping;
-        element.velocityX += ax / mass;
-        element.velocityY += ay / mass;
-        element.velocityX *= inertiaDecay;
-        element.velocityY *= inertiaDecay;
-        element.currentX += element.velocityX;
-        element.currentY += element.velocityY;
+        element.targetX = clamp2(element.targetX, -maxDisplacement, maxDisplacement);
+        element.targetY = clamp2(element.targetY, -maxDisplacement, maxDisplacement);
+      }
+      const lerpFactor = smooth ? smoothing : 1;
+      element.currentX = lerp(element.currentX, element.targetX, lerpFactor);
+      element.currentY = lerp(element.currentY, element.targetY, lerpFactor);
+      if (rotate && isInRange) {
+        const targetRotation = element.currentX / maxDisplacement * rotationStrength;
+        element.rotation = lerp(element.rotation, targetRotation, lerpFactor);
       } else {
-        element.currentX += (element.targetX - element.currentX) * returnSpeed;
-        element.currentY += (element.targetY - element.currentY) * returnSpeed;
-      }
-      if (overshoot && isInRange) {
-        element.currentX *= overshootAmount;
-        element.currentY *= overshootAmount;
-      }
-      if (rotate) {
-        element.rotation = element.currentX / maxDisplacement * rotationStrength;
+        element.rotation = lerp(element.rotation, 0, lerpFactor);
       }
       if (scale && isInRange) {
-        const scaleProgress = 1 - distance / radius;
-        element.scale = 1 + (scaleFactor - 1) * scaleProgress;
+        const scaleProgress = 1 - normalizedDistance;
+        const targetScale = 1 + (scaleFactor - 1) * scaleProgress;
+        element.scale = lerp(element.scale, targetScale, lerpFactor);
       } else {
-        element.scale += (1 - element.scale) * returnSpeed;
+        element.scale = lerp(element.scale, 1, lerpFactor);
       }
-      let transform = `translate(${element.currentX}px, ${element.currentY}px)`;
+      let transform = `translate3d(${element.currentX}px, ${element.currentY}px, 0)`;
       if (rotate) {
         transform += ` rotate(${element.rotation}deg)`;
       }
@@ -94454,53 +94735,39 @@ var MagneticElementsInternal = ({
       if (tilt && isInRange) {
         const tiltX = element.currentY / maxDisplacement * tiltAngle;
         const tiltY = -(element.currentX / maxDisplacement) * tiltAngle;
-        if (enable3D) {
-          transform += ` rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
-          element.element.style.transformStyle = "preserve-3d";
-          element.element.style.perspective = `${perspective}px`;
-        }
+        transform += ` rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
       }
       if (glow && isInRange) {
-        const glowIntensity = (1 - distance / radius) * 20;
+        const glowIntensity = (1 - normalizedDistance) * 20;
         element.element.style.boxShadow = `0 0 ${glowIntensity}px ${glowColor}`;
+        element.element.style.filter = `brightness(${1 + (1 - normalizedDistance) * 0.2})`;
       } else if (glow) {
-        element.element.style.boxShadow = "none";
+        element.element.style.boxShadow = "";
+        element.element.style.filter = "";
       }
       element.element.style.transform = transform;
-      if (debug) {
-        element.element.style.border = isInRange ? "2px solid red" : "1px solid blue";
-      }
+      element.element.style.opacity = element.opacity.toString();
     });
   }, [
     calculateForce,
     radius,
-    hoverOnly,
     constrain,
     maxDisplacement,
-    inertia,
-    stiffness,
-    damping,
-    mass,
-    inertiaDecay,
-    returnSpeed,
-    overshoot,
-    overshootAmount,
+    smooth,
+    smoothing,
     rotate,
     rotationStrength,
     scale,
     scaleFactor,
     tilt,
     tiltAngle,
-    enable3D,
-    perspective,
     glow,
     glowColor,
-    debug
+    performance2,
+    frameInterval
   ]);
-  const animate4 = useCallback(() => {
-    if (!isActiveRef.current)
-      return;
-    updateElements();
+  const animate4 = useCallback((currentTime) => {
+    updateElements(currentTime);
     animationRef.current = requestAnimationFrame(animate4);
   }, [updateElements]);
   const handleMouseMove2 = useCallback((e) => {
@@ -94510,13 +94777,10 @@ var MagneticElementsInternal = ({
     const rect = container.getBoundingClientRect();
     mouseRef.current = {
       x: e.clientX - rect.left,
-      y: e.clientY - rect.top
+      y: e.clientY - rect.top,
+      active: true
     };
-    if (!isActiveRef.current) {
-      isActiveRef.current = true;
-      animate4();
-    }
-  }, [animate4]);
+  }, []);
   const handleTouchMove = useCallback((e) => {
     if (!enableTouch)
       return;
@@ -94527,69 +94791,31 @@ var MagneticElementsInternal = ({
     const touch = e.touches[0];
     mouseRef.current = {
       x: touch.clientX - rect.left,
-      y: touch.clientY - rect.top
+      y: touch.clientY - rect.top,
+      active: true
     };
-    if (!isActiveRef.current) {
-      isActiveRef.current = true;
-      animate4();
+  }, [enableTouch]);
+  const handleMouseEnter = useCallback(() => {
+    mouseRef.current.active = true;
+    if (!animationRef.current) {
+      animationRef.current = requestAnimationFrame(animate4);
     }
-  }, [enableTouch, animate4]);
-  const handleMouseLeave2 = useCallback(() => {
-    isActiveRef.current = false;
-    elementsRef.current.forEach((element) => {
-      element.targetX = 0;
-      element.targetY = 0;
-    });
-    animate4();
-    setTimeout(() => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-    }, 1e3);
   }, [animate4]);
-  const handleElementHover = useCallback((element, isHovered) => {
-    const magneticElement = elementsRef.current.find((el) => el.element === element);
-    if (magneticElement) {
-      magneticElement.isHovered = isHovered;
-    }
+  const handleMouseLeave2 = useCallback(() => {
+    mouseRef.current.active = false;
   }, []);
   useEffect(() => {
     initializeElements();
     const container = containerRef.current;
     if (!container)
       return;
-    container.addEventListener("mousemove", handleMouseMove2);
-    container.addEventListener("mouseleave", handleMouseLeave2);
-    if (enableTouch) {
-      container.addEventListener("touchmove", handleTouchMove);
-      container.addEventListener("touchend", handleMouseLeave2);
-    }
-    if (hoverOnly) {
-      const elements = container.querySelectorAll("[data-magnetic]");
-      elements.forEach((el) => {
-        const element = el;
-        element.addEventListener("mouseenter", () => handleElementHover(element, true));
-        element.addEventListener("mouseleave", () => handleElementHover(element, false));
-      });
-    }
+    animationRef.current = requestAnimationFrame(animate4);
     return () => {
-      container.removeEventListener("mousemove", handleMouseMove2);
-      container.removeEventListener("mouseleave", handleMouseLeave2);
-      container.removeEventListener("touchmove", handleTouchMove);
-      container.removeEventListener("touchend", handleMouseLeave2);
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [
-    initializeElements,
-    handleMouseMove2,
-    handleMouseLeave2,
-    handleTouchMove,
-    handleElementHover,
-    enableTouch,
-    hoverOnly
-  ]);
+  }, [initializeElements, animate4]);
   const processedChildren = Children.map(children, (child, index2) => {
     if (isValidElement(child)) {
       return cloneElement(child, {
@@ -94597,7 +94823,7 @@ var MagneticElementsInternal = ({
         className: cn(
           child.props.className,
           elementClassName,
-          "magnetic-element"
+          "magnetic-element cursor-pointer"
         ),
         key: index2
       });
@@ -94610,29 +94836,34 @@ var MagneticElementsInternal = ({
       ref: containerRef,
       className: cn(
         "relative",
-        enable3D && "transform-gpu",
         containerClassName
       ),
+      onMouseMove: handleMouseMove2,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave2,
+      onTouchMove: enableTouch ? handleTouchMove : void 0,
+      onTouchEnd: enableTouch ? handleMouseLeave2 : void 0,
       style: {
-        perspective: enable3D ? perspective : void 0
+        perspective: tilt ? "1000px" : void 0
       },
       children: [
         processedChildren,
-        debug && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none border-2 border-dashed border-gray-400 opacity-50", children: [
+        debug && isReady && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute w-4 h-4 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2",
+              className: "absolute w-2 h-2 bg-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 z-50",
               style: {
                 left: mouseRef.current.x,
-                top: mouseRef.current.y
+                top: mouseRef.current.y,
+                opacity: mouseRef.current.active ? 1 : 0.3
               }
             }
           ),
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute border-2 border-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-30",
+              className: "absolute border-2 border-red-500 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-20",
               style: {
                 left: mouseRef.current.x,
                 top: mouseRef.current.y,
@@ -95292,7 +95523,7 @@ var SpringPhysicsInternal = ({
   mouseRadius = 200,
   preset = "default",
   overshoot = true,
-  clamp: clamp2 = false,
+  clamp: clamp3 = false,
   precision = 0.01,
   transform3d = false,
   rotate = false,
@@ -95391,7 +95622,7 @@ var SpringPhysicsInternal = ({
       x: (velocity.x || 0) + force.x / mass * deltaTime,
       y: (velocity.y || 0) + force.y / mass * deltaTime
     };
-    if (clamp2 && !overshoot) {
+    if (clamp3 && !overshoot) {
       const distX = Math.abs((targetPos.x || 0) - position.x);
       const distY = Math.abs((targetPos.y || 0) - position.y);
       if (distX < 1)
@@ -95454,7 +95685,7 @@ var SpringPhysicsInternal = ({
     mass,
     precision,
     overshoot,
-    clamp2,
+    clamp3,
     trail,
     trailCount,
     trailDecay,
@@ -103263,24 +103494,20 @@ export default function Component() {
 /**
  * MouseTrail Component
  *
- * Creates interactive trail effects following mouse movement
- * Derived from React Bits (https://github.com/DavidHDev/react-bits)
- * Adapted for MoonUI Pro with TypeScript and enhanced features
+ * High-performance interactive particle trail following mouse movement
+ * Optimized with frame rate limiting, object pooling, and efficient rendering
  *
  * @author MoonUI Team
- * @license MIT
- * @credits React Bits by David H
+ * @license Commercial
  */
 /**
  * MagneticElements Component
  *
- * Creates magnetic effect where elements are attracted to or repelled from cursor
- * Derived from React Bits (https://github.com/DavidHDev/react-bits)
- * Adapted for MoonUI Pro with TypeScript and enhanced features
+ * High-performance magnetic effect where elements are attracted to or repelled from cursor
+ * Optimized for smooth animations and professional interactions
  *
  * @author MoonUI Team
- * @license MIT
- * @credits React Bits by David H
+ * @license Commercial
  */
 /**
  * ScrollReveal Component