@tarsis/toolkit 0.5.8-beta.4 → 0.6.1

package/dist/{gl-BWeWNwfK.cjs → gl-R0-LkX0J.cjs}

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

package/dist/{gl-BhrwxIv3.js → gl-sW-Butaq.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-BsoUKX1n.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-7A_TZGdO.js';
 
 /*
 object-assign

package/dist/{index-BsoUKX1n.js → index-7A_TZGdO.js}

@@ -52094,11 +52094,11 @@ const BubblyParticlesButton = () => {
   return /* @__PURE__ */ jsx("button", { className: styles$4H.root, onClick: handleClick, children: "Click me!" });
 };
 
-const root$4i = "_root_se9py_1";
-const button$o = "_button_se9py_13";
-const p$1 = "_p_se9py_26";
-const text$z = "_text_se9py_26";
-const effects = "_effects_se9py_240";
+const root$4i = "_root_1841q_1";
+const button$o = "_button_1841q_13";
+const p$1 = "_p_1841q_26";
+const text$z = "_text_1841q_26";
+const effects = "_effects_1841q_240";
 const styles$4G = {
 	root: root$4i,
 	button: button$o,
@@ -68228,9 +68228,9 @@ const NeonButton = ({ className = "", ...rest }) => {
   return /* @__PURE__ */ jsx("button", { type: "button", ...rest, className: clsx(styles$48.root, className), children: "Neon" });
 };
 
-const root$3P = "_root_1fe3u_2";
-const i$6 = "_i_1fe3u_22";
-const text$s = "_text_1fe3u_482";
+const root$3P = "_root_3d624_2";
+const i$6 = "_i_3d624_22";
+const text$s = "_text_3d624_482";
 const styles$47 = {
 	root: root$3P,
 	i: i$6,
@@ -78354,6 +78354,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,
@@ -78366,34 +78378,40 @@ const Tooltip = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [clicked, setClicked] = useState(false);
+  const [isPositioned, setIsPositioned] = useState(false);
   const shouldReduceMotion = useReducedMotion();
   const hasFinePointer = useMatchMedia("(pointer: fine)");
   const isMobile = hasFinePointer === false;
   const timeoutRef = 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 = useRef(null);
+  const variants = 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,
@@ -78403,7 +78421,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
   });
@@ -78433,7 +78451,94 @@ const Tooltip = ({
       }
     };
   }, [isOpen, isMobile]);
-  const handleClick = (_e) => {
+  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 = useMemo(() => {
+    if (shouldReduceMotion) {
+      return isOpen ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: refs.setFloating,
+          style: {
+            ...floatingStyles,
+            ...!isPositioned ? { visibility: "hidden" } : {}
+          },
+          ...getFloatingProps(),
+          className: styles$2S.tooltip,
+          children: /* @__PURE__ */ jsx("div", { className: clsx(styles$2S.tooltipContent, className), children: label })
+        },
+        "tooltip"
+      ) }) : null;
+    }
+    const tooltipWrapper = isOpen ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        className: styles$2S.tooltip,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: clsx(styles$2S.tooltipContent, className),
+            variants,
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            children: label
+          }
+        )
+      },
+      "tooltip"
+    ) : null;
+    return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: tooltipWrapper }) });
+  }, [
+    isOpen,
+    shouldReduceMotion,
+    isPositioned,
+    refs.setFloating,
+    floatingStyles,
+    getFloatingProps,
+    className,
+    label,
+    variants
+  ]);
+  const handleClick = useCallback(() => {
     if (disableOnClick) {
       setClicked(true);
       setIsOpen(false);
@@ -78441,25 +78546,30 @@ const Tooltip = ({
     if (isMobile) {
       setIsOpen(true);
     }
-  };
-  const handleMouseLeave = (_e) => {
+  }, [disableOnClick, isMobile]);
+  const handleMouseLeave = useCallback(() => {
     if (disableOnClick) {
       setClicked(false);
     }
-  };
-  const mergeEventHandler = (childHandler, tooltipHandler) => {
-    return (e) => {
-      childHandler?.(e);
-      tooltipHandler?.(e);
-    };
-  };
-  const childRef = isValidElement(children) && children.props && children.props.ref ? children.props.ref : null;
+  }, [disableOnClick]);
+  const mergeEventHandler = useCallback(
+    (childHandler, tooltipHandler) => {
+      return (e) => {
+        childHandler?.(e);
+        tooltipHandler?.(e);
+      };
+    },
+    []
+  );
+  const childRef = useMemo(() => {
+    if (!isValidElement(children)) return null;
+    const props = children.props;
+    return props?.ref ?? null;
+  }, [children]);
   const mergedRef = useMergeRefs([refs.setReference, childRef]);
-  if (isValidElement(children)) {
-    const childElement = children;
-    const childProps = childElement.props;
-    const tooltipProps = getReferenceProps();
-    const mergedProps = {
+  const tooltipProps = useMemo(() => getReferenceProps(), [getReferenceProps]);
+  const createMergedProps = useCallback(
+    (childProps) => ({
       ...childProps,
       ref: mergedRef,
       onClick: mergeEventHandler(
@@ -78485,30 +78595,39 @@ const Tooltip = ({
         childProps.onBlur,
         tooltipProps.onBlur
       )
-    };
+    }),
+    [
+      mergedRef,
+      mergeEventHandler,
+      handleClick,
+      handleMouseLeave,
+      tooltipProps.onMouseEnter,
+      tooltipProps.onMouseLeave,
+      tooltipProps.onFocus,
+      tooltipProps.onBlur
+    ]
+  );
+  const spanProps = useMemo(
+    () => ({
+      ...tooltipProps,
+      onClick: mergeEventHandler(
+        tooltipProps.onClick,
+        handleClick
+      ),
+      onMouseLeave: mergeEventHandler(
+        tooltipProps.onMouseLeave,
+        handleMouseLeave
+      )
+    }),
+    [tooltipProps, mergeEventHandler, handleClick, handleMouseLeave]
+  );
+  if (isValidElement(children)) {
+    const childElement = children;
+    const childProps = childElement.props;
+    const mergedProps = createMergedProps(childProps);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       cloneElement(childElement, mergedProps),
-      /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: refs.setFloating,
-          style: floatingStyles,
-          ...getFloatingProps(),
-          className: styles$2S.tooltip,
-          children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
@@ -78516,37 +78635,12 @@ const Tooltip = ({
       "span",
       {
         ref: refs.setReference,
-        ...getReferenceProps(),
-        onClick: handleClick,
-        onMouseLeave: mergeEventHandler(
-          getReferenceProps().onMouseLeave,
-          handleMouseLeave
-        ),
+        ...spanProps,
         style: { display: "contents" },
         children
       }
     ),
-    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: refs.setFloating,
-        style: floatingStyles,
-        ...getFloatingProps(),
-        className: styles$2S.tooltip,
-        children: /* @__PURE__ */ 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
   ] });
 };
 
@@ -78672,7 +78766,7 @@ const DockMotionItem = (props) => {
     mouseX,
     tooltip = null,
     tooltipOptions,
-    interaction,
+    interaction = "possible",
     expansion,
     mute = false,
     className,
@@ -78727,55 +78821,49 @@ const DockMotionItem = (props) => {
       unsubscribe();
     };
   }, [scale]);
-  const playAudio$1 = useCallback(
-    (interactionState = "possible") => {
-      if (!isInteractive || mute) {
-        return;
+  const playAudio$1 = useCallback(() => {
+    if (!isInteractive || mute) {
+      return;
+    }
+    const audioSrc = interaction === "possible" ? "/audio/click.wav" : "/audio/hover.mp3";
+    playAudio(audioSrc, (error) => {
+      if (interaction === "impossible") {
+        console.warn(`Failed to play ${audioSrc}:`, error);
       }
-      const audioSrc = interactionState === "possible" ? "/audio/click.wav" : "/audio/hover.mp3";
-      playAudio(audioSrc, (error) => {
-        if (interactionState === "impossible") {
-          console.warn(`Failed to play ${audioSrc}:`, error);
+    });
+  }, [interaction, isInteractive, mute]);
+  const playAnimation = useCallback(() => {
+    if (prefersReducedMotion || !contentRef.current) {
+      return;
+    }
+    if (interaction === "impossible") {
+      animate(
+        contentRef.current,
+        { x: [0, -3, 3, -3, 3, -2, 2, 0] },
+        {
+          duration: 0.5,
+          ease: [0.33, 1, 0.68, 1]
         }
-      });
-    },
-    [isInteractive, mute]
-  );
-  const playAnimation = useCallback(
-    (interactionState = "possible") => {
-      if (prefersReducedMotion || !contentRef.current) {
-        return;
-      }
-      if (interactionState === "impossible") {
-        animate(
+      );
+    } else {
+      animate([
+        [
+          contentRef.current,
+          { scale: 0.75 },
+          { duration: 0.15, ease: "easeOut" }
+        ],
+        [
           contentRef.current,
-          { x: [0, -3, 3, -3, 3, -2, 2, 0] },
+          { scale: 1 },
           {
-            duration: 0.5,
-            ease: [0.33, 1, 0.68, 1]
+            type: "spring",
+            stiffness: 300,
+            damping: 25
           }
-        );
-      } else {
-        animate([
-          [
-            contentRef.current,
-            { scale: 0.75 },
-            { duration: 0.15, ease: "easeOut" }
-          ],
-          [
-            contentRef.current,
-            { scale: 1 },
-            {
-              type: "spring",
-              stiffness: 300,
-              damping: 25
-            }
-          ]
-        ]);
-      }
-    },
-    [prefersReducedMotion, animate]
-  );
+        ]
+      ]);
+    }
+  }, [prefersReducedMotion, interaction, animate]);
   useRaf(
     () => {
       const el = scope.current;
@@ -78792,14 +78880,17 @@ const DockMotionItem = (props) => {
     hover === true && prefersReducedMotion === false
     // maybe add `& isInteractive`
   );
-  const contentStyle = useMemo(
-    () => ({
+  const contentStyle = useMemo(() => {
+    return prefersReducedMotion ? {
+      width: baseWidth * targetMultiplier,
+      height: baseWidth,
+      originX: "center"
+    } : {
       width: dynamicWidth,
       height: size,
       originX: "center"
-    }),
-    [dynamicWidth, size]
-  );
+    };
+  }, [dynamicWidth, size, prefersReducedMotion, targetMultiplier]);
   const ContentElement = useMemo(() => {
     if (rest.use && typeof rest.use !== "string") {
       return motion.create(rest.use);
@@ -78828,25 +78919,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$1(interaction);
-            playAnimation(interaction);
+            playAudio$1();
+            playAnimation();
             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__ */ jsx("div", { className: styles$2Q.gloss }),
@@ -78856,6 +78941,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
               }
             )
@@ -81014,7 +81107,7 @@ const EndlessLoader = ({ container }) => {
         return;
       }
       try {
-        const GLModule = await import('./gl-BhrwxIv3.js');
+        const GLModule = await import('./gl-sW-Butaq.js');
         if (!isActiveRef.current) {
           return;
         }
@@ -86922,11 +87015,11 @@ const ScrambledText = ({ children, reveal = false }) => {
   );
 };
 
-const root$Y = "_root_n0oie_1";
-const line = "_line_n0oie_9";
-const word$1 = "_word_n0oie_14";
-const link = "_link_n0oie_18";
-const letter = "_letter_n0oie_22";
+const root$Y = "_root_xdbex_1";
+const line = "_line_xdbex_9";
+const word$1 = "_word_xdbex_14";
+const link = "_link_xdbex_18";
+const letter = "_letter_xdbex_22";
 const styles$11 = {
 	root: root$Y,
 	line: line,
@@ -96880,7 +96973,7 @@ const Lock = () => {
       }
     };
     const asynchronously = async () => {
-      const Flickity = await import('./index-CU61Vouw.js').then(n => n.i).then((m) => m.default);
+      const Flickity = await import('./index-DXiWfDd0.js').then(n => n.i).then((m) => m.default);
       if (!rowsRef.current || !window) return;
       const rows = rowsRef.current.children;
       for (let i = 0, len = rows.length; i < len; i++) {