@tarsis/toolkit 0.5.8-beta.3 → 0.6.0

package/dist/{gl-UMy80o0V.js → gl-DPeRBlfm.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, a as getAugmentedNamespace, g as getDefaultExportFromCjs, W as WebGLRenderer, P as PerspectiveCamera, S as Scene, T as THREE$1, C as Clock, b as TextureLoader, R as RawShaderMaterial, D as DoubleSide, d as WebGLRenderTarget, e as Color, M as Mesh, f as TorusKnotGeometry, h as ShaderMaterial } from './index-BiUGuJ0v.js';
+import { c as commonjsGlobal, a as getAugmentedNamespace, g as getDefaultExportFromCjs, W as WebGLRenderer, P as PerspectiveCamera, S as Scene, T as THREE$1, C as Clock, b as TextureLoader, R as RawShaderMaterial, D as DoubleSide, d as WebGLRenderTarget, e as Color, M as Mesh, f as TorusKnotGeometry, h as ShaderMaterial } from './index-iVv-r1r7.js';
 
 /*
 object-assign

package/dist/{gl-BdsWrL8N.cjs → gl-DgFYXJsQ.cjs}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const index = require('./index-6_4NA2IG.cjs');
+const index = require('./index-ZUvQTjLa.cjs');
 
 /*
 object-assign

package/dist/{index-CjHaqnk_.js → index-BfhFT1kB.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './index-BiUGuJ0v.js';
+import { g as getDefaultExportFromCjs } from './index-iVv-r1r7.js';
 
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {

package/dist/{index-hvmpP1-I.cjs → index-C5pCwB7N.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index$2 = require('./index-6_4NA2IG.cjs');
+const index$2 = require('./index-ZUvQTjLa.cjs');
 
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {

package/dist/{index-6_4NA2IG.cjs → index-ZUvQTjLa.cjs}

@@ -52114,11 +52114,11 @@ const BubblyParticlesButton = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles$4H.root, onClick: handleClick, children: "Click me!" });
 };
 
-const root$4i = "_root_9eh7d_1";
-const button$o = "_button_9eh7d_13";
-const p$1 = "_p_9eh7d_26";
-const text$z = "_text_9eh7d_26";
-const effects = "_effects_9eh7d_240";
+const root$4i = "_root_1gkhg_1";
+const button$o = "_button_1gkhg_13";
+const p$1 = "_p_1gkhg_26";
+const text$z = "_text_1gkhg_26";
+const effects = "_effects_1gkhg_240";
 const styles$4G = {
 	root: root$4i,
 	button: button$o,
@@ -68248,9 +68248,9 @@ const NeonButton = ({ className = "", ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...rest, className: clsx(styles$48.root, className), children: "Neon" });
 };
 
-const root$3P = "_root_nestf_2";
-const i$6 = "_i_nestf_22";
-const text$s = "_text_nestf_482";
+const root$3P = "_root_1453i_2";
+const i$6 = "_i_1453i_22";
+const text$s = "_text_1453i_482";
 const styles$47 = {
 	root: root$3P,
 	i: i$6,
@@ -74246,6 +74246,49 @@ const DockHas = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2V.root, children: icons });
 };
 
+const audioCache = /* @__PURE__ */ new Map();
+const createAudio = (src) => {
+  if (typeof window === "undefined" || typeof Audio === "undefined") {
+    return null;
+  }
+  try {
+    return new Audio(src);
+  } catch (error) {
+    console.warn("Audio is not supported or failed to create:", error);
+    return null;
+  }
+};
+const preloadAudio = (src) => {
+  if (typeof window === "undefined" || typeof Audio === "undefined") {
+    return;
+  }
+  const audio = audioCache.get(src) ?? createAudio(src);
+  if (audio) {
+    audio.preload = "auto";
+    audio.load();
+    audioCache.set(src, audio);
+  }
+};
+const playAudio = (src, onError) => {
+  const audio = audioCache.get(src) ?? createAudio(src);
+  if (!audio) {
+    return;
+  }
+  audioCache.set(src, audio);
+  if (audio.readyState < 2) {
+    audio.load();
+  }
+  audio.pause();
+  audio.currentTime = 0;
+  const playPromise = audio.play();
+  if (playPromise && typeof playPromise.catch === "function") {
+    playPromise.catch((error) => {
+      onError?.(error);
+      console.warn(`Failed to play audio ${src}:`, error);
+    });
+  }
+};
+
 const root$2H = "_root_1tbwv_1";
 const container$9 = "_container_1tbwv_10";
 const glossyXLine = "_glossyXLine_1tbwv_35";
@@ -78331,6 +78374,18 @@ const styles$2S = {
 	tooltipContent: tooltipContent
 };
 
+const getExitOffset = (placement, offsetValue) => {
+  switch (placement) {
+    case "top":
+      return { x: 0, y: offsetValue };
+    case "bottom":
+      return { x: 0, y: -offsetValue };
+    case "left":
+      return { x: offsetValue, y: 0 };
+    case "right":
+      return { x: -offsetValue, y: 0 };
+  }
+};
 const Tooltip = ({
   children,
   label,
@@ -78343,34 +78398,40 @@ const Tooltip = ({
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [clicked, setClicked] = React.useState(false);
+  const [isPositioned, setIsPositioned] = React.useState(false);
   const shouldReduceMotion = useReducedMotion();
   const hasFinePointer = useWindowReady.useMatchMedia("(pointer: fine)");
   const isMobile = hasFinePointer === false;
   const timeoutRef = React.useRef(null);
-  const variants = shouldReduceMotion ? void 0 : {
-    initial: {
-      scale: animate ? 0.6 : 1,
-      opacity: animate ? 0.8 : 1
-    },
-    animate: {
-      scale: 1,
-      opacity: 1,
-      transition: {
-        type: "spring",
-        stiffness: 280,
-        damping: 22,
-        mass: 0.9
+  const rafRef = React.useRef(null);
+  const variants = React.useMemo(
+    () => shouldReduceMotion ? void 0 : {
+      initial: {
+        scale: animate ? 0.6 : 1,
+        opacity: animate ? 0.8 : 1
+      },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        transition: {
+          type: "spring",
+          stiffness: 280,
+          damping: 22,
+          mass: 0.9
+        }
+      },
+      exit: {
+        scale: 0.3,
+        opacity: 0,
+        ...getExitOffset(placement, offsetValue),
+        transition: {
+          duration: 0.2,
+          ease: [0.33, 1, 0.68, 1]
+        }
       }
     },
-    exit: {
-      scale: animate ? 0.4 : 1,
-      opacity: animate ? 0.8 : 1,
-      transition: {
-        duration: 0.1,
-        ease: "easeIn"
-      }
-    }
-  };
+    [shouldReduceMotion, animate, placement, offsetValue]
+  );
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -78380,7 +78441,7 @@ const Tooltip = ({
     whileElementsMounted: autoUpdate
   });
   const hover = useHover(context, {
-    delay: { open: delay, close: delay },
+    delay: shouldReduceMotion ? 0 : { open: delay, close: delay },
     move: false,
     enabled: disableOnClick ? !clicked : true
   });
@@ -78410,7 +78471,82 @@ const Tooltip = ({
       }
     };
   }, [isOpen, isMobile]);
-  const handleClick = (_e) => {
+  React.useEffect(() => {
+    if (!isOpen) {
+      setIsPositioned(false);
+      return;
+    }
+    if (!shouldReduceMotion) {
+      setIsPositioned(true);
+      return;
+    }
+    let attempts = 0;
+    const maxAttempts = 10;
+    const checkPosition = () => {
+      const element = refs.floating.current;
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0 && (rect.left !== 0 || rect.top !== 0)) {
+          setIsPositioned(true);
+          rafRef.current = null;
+          return;
+        }
+      }
+      attempts += 1;
+      if (attempts < maxAttempts) {
+        rafRef.current = requestAnimationFrame(checkPosition);
+      } else {
+        setIsPositioned(true);
+        rafRef.current = null;
+      }
+    };
+    rafRef.current = requestAnimationFrame(checkPosition);
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [isOpen, shouldReduceMotion]);
+  const tooltipContent = React.useMemo(() => {
+    if (!isOpen) return null;
+    const tooltipWrapper = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: {
+          ...floatingStyles,
+          ...shouldReduceMotion && !isPositioned ? { visibility: "hidden" } : {}
+        },
+        ...getFloatingProps(),
+        className: styles$2S.tooltip,
+        children: shouldReduceMotion ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(styles$2S.tooltipContent, className), children: label }) : /* @__PURE__ */ jsxRuntime.jsx(
+          motion.div,
+          {
+            className: clsx(styles$2S.tooltipContent, className),
+            variants,
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            children: label
+          }
+        )
+      },
+      "tooltip"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(FloatingPortal, { children: shouldReduceMotion ? tooltipWrapper : /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: tooltipWrapper }) });
+  }, [
+    isOpen,
+    shouldReduceMotion,
+    isPositioned,
+    refs.setFloating,
+    floatingStyles,
+    getFloatingProps,
+    className,
+    label,
+    variants
+  ]);
+  const handleClick = React.useCallback(() => {
     if (disableOnClick) {
       setClicked(true);
       setIsOpen(false);
@@ -78418,25 +78554,30 @@ const Tooltip = ({
     if (isMobile) {
       setIsOpen(true);
     }
-  };
-  const handleMouseLeave = (_e) => {
+  }, [disableOnClick, isMobile]);
+  const handleMouseLeave = React.useCallback(() => {
     if (disableOnClick) {
       setClicked(false);
     }
-  };
-  const mergeEventHandler = (childHandler, tooltipHandler) => {
-    return (e) => {
-      childHandler?.(e);
-      tooltipHandler?.(e);
-    };
-  };
-  const childRef = React.isValidElement(children) && children.props && children.props.ref ? children.props.ref : null;
+  }, [disableOnClick]);
+  const mergeEventHandler = React.useCallback(
+    (childHandler, tooltipHandler) => {
+      return (e) => {
+        childHandler?.(e);
+        tooltipHandler?.(e);
+      };
+    },
+    []
+  );
+  const childRef = React.useMemo(() => {
+    if (!React.isValidElement(children)) return null;
+    const props = children.props;
+    return props?.ref ?? null;
+  }, [children]);
   const mergedRef = useMergeRefs([refs.setReference, childRef]);
-  if (React.isValidElement(children)) {
-    const childElement = children;
-    const childProps = childElement.props;
-    const tooltipProps = getReferenceProps();
-    const mergedProps = {
+  const tooltipProps = React.useMemo(() => getReferenceProps(), [getReferenceProps]);
+  const createMergedProps = React.useCallback(
+    (childProps) => ({
       ...childProps,
       ref: mergedRef,
       onClick: mergeEventHandler(
@@ -78462,30 +78603,39 @@ const Tooltip = ({
         childProps.onBlur,
         tooltipProps.onBlur
       )
-    };
+    }),
+    [
+      mergedRef,
+      mergeEventHandler,
+      handleClick,
+      handleMouseLeave,
+      tooltipProps.onMouseEnter,
+      tooltipProps.onMouseLeave,
+      tooltipProps.onFocus,
+      tooltipProps.onBlur
+    ]
+  );
+  const spanProps = React.useMemo(
+    () => ({
+      ...tooltipProps,
+      onClick: mergeEventHandler(
+        tooltipProps.onClick,
+        handleClick
+      ),
+      onMouseLeave: mergeEventHandler(
+        tooltipProps.onMouseLeave,
+        handleMouseLeave
+      )
+    }),
+    [tooltipProps, mergeEventHandler, handleClick, handleMouseLeave]
+  );
+  if (React.isValidElement(children)) {
+    const childElement = children;
+    const childProps = childElement.props;
+    const mergedProps = createMergedProps(childProps);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       React.cloneElement(childElement, mergedProps),
-      /* @__PURE__ */ jsxRuntime.jsx(FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: refs.setFloating,
-          style: floatingStyles,
-          ...getFloatingProps(),
-          className: styles$2S.tooltip,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            motion.div,
-            {
-              className: clsx(styles$2S.tooltipContent, className),
-              variants,
-              initial: shouldReduceMotion ? void 0 : "initial",
-              animate: shouldReduceMotion ? void 0 : "animate",
-              exit: shouldReduceMotion ? void 0 : "exit",
-              children: label
-            }
-          )
-        },
-        "tooltip"
-      ) }) })
+      tooltipContent
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -78493,37 +78643,12 @@ const Tooltip = ({
       "span",
       {
         ref: refs.setReference,
-        ...getReferenceProps(),
-        onClick: handleClick,
-        onMouseLeave: mergeEventHandler(
-          getReferenceProps().onMouseLeave,
-          handleMouseLeave
-        ),
+        ...spanProps,
         style: { display: "contents" },
         children
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: refs.setFloating,
-        style: floatingStyles,
-        ...getFloatingProps(),
-        className: styles$2S.tooltip,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          motion.div,
-          {
-            className: clsx(styles$2S.tooltipContent, className),
-            variants,
-            initial: shouldReduceMotion ? void 0 : "initial",
-            animate: shouldReduceMotion ? void 0 : "animate",
-            exit: shouldReduceMotion ? void 0 : "exit",
-            children: label
-          }
-        )
-      },
-      "tooltip"
-    ) }) })
+    tooltipContent
   ] });
 };
 
@@ -78666,7 +78791,6 @@ const DockMotionItem = (props) => {
     restSpeed: 0.01,
     restDelta: 0.01
   });
-  const audioRef = React.useRef(null);
   const hover = useWindowReady.useMatchMedia("(pointer: fine)");
   const prefersReducedMotion = useReducedMotion();
   const [scope, animate] = useAnimate();
@@ -78705,25 +78829,17 @@ const DockMotionItem = (props) => {
       unsubscribe();
     };
   }, [scale]);
-  const playAudio = React.useCallback(
+  const playAudio$1 = React.useCallback(
     (interactionState = "possible") => {
-      if (typeof window === "undefined" || typeof Audio === "undefined" || !isInteractive || mute) {
+      if (!isInteractive || mute) {
         return;
       }
       const audioSrc = interactionState === "possible" ? "/audio/click.wav" : "/audio/hover.mp3";
-      try {
-        const audio = new Audio(audioSrc);
-        audio.preload = "auto";
-        audio.volume = 0.2;
-        const playPromise = audio.play();
-        if (playPromise && typeof playPromise.catch === "function") {
-          playPromise.catch(() => {
-          });
+      playAudio(audioSrc, (error) => {
+        if (interactionState === "impossible") {
+          console.warn(`Failed to play ${audioSrc}:`, error);
         }
-      } catch (error) {
-        console.warn("Audio is not supported or failed to create:", error);
-        return;
-      }
+      });
     },
     [isInteractive, mute]
   );
@@ -78762,28 +78878,6 @@ const DockMotionItem = (props) => {
     },
     [prefersReducedMotion, animate]
   );
-  React.useEffect(() => {
-    if (typeof window === "undefined" || typeof Audio === "undefined") {
-      return;
-    }
-    try {
-      const audio = new Audio("/audio/click.wav");
-      audio.preload = "auto";
-      audio.volume = 0.2;
-      audio.load();
-      audioRef.current = audio;
-    } catch (error) {
-      console.warn("Audio preload failed:", error);
-    }
-    return () => {
-      if (audioRef.current) {
-        audioRef.current.pause();
-        audioRef.current.src = "";
-        audioRef.current.load();
-        audioRef.current = null;
-      }
-    };
-  }, []);
   useWindowReady.useRaf(
     () => {
       const el = scope.current;
@@ -78800,14 +78894,17 @@ const DockMotionItem = (props) => {
     hover === true && prefersReducedMotion === false
     // maybe add `& isInteractive`
   );
-  const contentStyle = React.useMemo(
-    () => ({
+  const contentStyle = React.useMemo(() => {
+    return prefersReducedMotion ? {
+      width: baseWidth * targetMultiplier,
+      height: baseWidth,
+      originX: "center"
+    } : {
       width: dynamicWidth,
       height: size,
       originX: "center"
-    }),
-    [dynamicWidth, size]
-  );
+    };
+  }, [dynamicWidth, size, prefersReducedMotion, targetMultiplier]);
   const ContentElement = React.useMemo(() => {
     if (rest.use && typeof rest.use !== "string") {
       return motion.create(rest.use);
@@ -78836,25 +78933,19 @@ const DockMotionItem = (props) => {
         {
           ref: scope,
           layoutId: itemId,
-          layout: true,
+          layout: prefersReducedMotion ? false : true,
           className: clsx(styles$2Q.item, className),
           onMouseEnter,
           style: contentStyle,
           "data-action": isInteractive,
           onClick: async (event) => {
-            playAudio(interaction);
+            playAudio$1(interaction);
             playAnimation(interaction);
             if (interaction === "possible") {
               rest.onClick?.(event);
             }
             event.currentTarget.blur();
           },
-          drag: true,
-          dragConstraints: { top: -12, bottom: 12, left: -12, right: 12 },
-          dragElastic: 0,
-          dragTransition: { bounceStiffness: 300, bounceDamping: 20 },
-          dragSnapToOrigin: true,
-          whileDrag: { zIndex: 1 },
           ...linkProps,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2Q.gloss }),
@@ -78864,6 +78955,14 @@ const DockMotionItem = (props) => {
                 ref: contentRef,
                 className: styles$2Q.content,
                 style: { filter: blurFilter },
+                whileTap: prefersReducedMotion ? void 0 : {
+                  scale: 0.75,
+                  transition: {
+                    type: "spring",
+                    stiffness: 350,
+                    damping: 20
+                  }
+                },
                 children
               }
             )
@@ -78895,6 +78994,10 @@ const DockMotion$1 = ({
   className = ""
 }) => {
   const mouseX = useWindowReady.useMotionValue(null);
+  React.useEffect(() => {
+    preloadAudio("/audio/click.wav");
+    preloadAudio("/audio/hover.mp3");
+  }, []);
   const embedded = React.Children.toArray(children).find(
     (x) => typeof x === "object" && x !== null && "type" in x && x.type === DockMotionEmbedded
   );
@@ -81018,7 +81121,7 @@ const EndlessLoader = ({ container }) => {
         return;
       }
       try {
-        const GLModule = await Promise.resolve().then(() => require('./gl-BdsWrL8N.cjs'));
+        const GLModule = await Promise.resolve().then(() => require('./gl-DgFYXJsQ.cjs'));
         if (!isActiveRef.current) {
           return;
         }
@@ -86926,11 +87029,11 @@ const ScrambledText = ({ children, reveal = false }) => {
   );
 };
 
-const root$Y = "_root_b8ly7_1";
-const line = "_line_b8ly7_9";
-const word$1 = "_word_b8ly7_14";
-const link = "_link_b8ly7_18";
-const letter = "_letter_b8ly7_22";
+const root$Y = "_root_1b6o2_1";
+const line = "_line_1b6o2_9";
+const word$1 = "_word_1b6o2_14";
+const link = "_link_1b6o2_18";
+const letter = "_letter_1b6o2_22";
 const styles$11 = {
 	root: root$Y,
 	line: line,
@@ -96884,7 +96987,7 @@ const Lock = () => {
       }
     };
     const asynchronously = async () => {
-      const Flickity = await Promise.resolve().then(() => require('./index-hvmpP1-I.cjs')).then(n => n.index).then((m) => m.default);
+      const Flickity = await Promise.resolve().then(() => require('./index-C5pCwB7N.cjs')).then(n => n.index).then((m) => m.default);
       if (!rowsRef.current || !window) return;
       const rows = rowsRef.current.children;
       for (let i = 0, len = rows.length; i < len; i++) {