@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-brnzrp2t.js

@@ -0,0 +1,262 @@
+import {
+  CommandList,
+  CommandListRoot,
+  CommandShortcut
+} from "./components-4hh0gm0v.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  shapeMap,
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  useMorph
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/search/index.tsx
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { motion } from "motion/react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INSET = { default: "pl-2.5", compact: "pl-[7px]" };
+var SQUARE = { default: "w-9", compact: "w-7" };
+var PILL = { default: "min-w-[160px]", compact: "min-w-[128px]" };
+var isEditable = (target) => target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select") !== null);
+function Search({
+  variant = "pill",
+  placeholder = "Search",
+  items,
+  value,
+  defaultValue = "",
+  onValueChange,
+  onSubmit,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  width = 288,
+  align = "start",
+  shortcut,
+  emptyMessage = "No results found.",
+  effect,
+  tier = "moderate",
+  className
+}) {
+  const [query, setQuery] = useControllableState(value, defaultValue, onValueChange);
+  const [isExpanded, setExpanded] = useControllableState(expanded, defaultExpanded, onExpandedChange);
+  const [suggesting, setSuggesting] = useState(false);
+  const [settled, setSettled] = useState(isExpanded);
+  const [rest, setRest] = useState(0);
+  const reduced = useReduceMotion();
+  const shape = useShape();
+  const size = useSize();
+  const level = Math.min(useSurface() + 2, 8);
+  const SearchIcon = useIcon("search");
+  const XIcon = useIcon("x");
+  const button = useRef(null);
+  const field = useRef(null);
+  const input = useRef(null);
+  const origin = useRef({});
+  const suggestions = useMemo(() => items?.map((item) => typeof item === "string" ? { label: item } : item), [items]);
+  const open = suggesting && isExpanded && settled;
+  const lifted = isExpanded || settled;
+  const morph = useMorph(open, origin, { from: field, effect, tier });
+  useLayoutEffect(() => {
+    const el = button.current;
+    if (!el)
+      return;
+    const observer = new ResizeObserver(() => setRest(el.offsetWidth));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const expand = () => {
+    flushSync(() => setExpanded(true));
+    input.current?.focus({ preventScroll: true });
+  };
+  const collapse = (refocus) => {
+    flushSync(() => {
+      setQuery("");
+      setSuggesting(false);
+      setExpanded(false);
+    });
+    if (refocus)
+      button.current?.focus();
+  };
+  useEffect(() => {
+    if (!shortcut || isExpanded)
+      return;
+    const onKey = (event) => {
+      if (event.defaultPrevented || event.key !== shortcut || event.metaKey || event.ctrlKey || event.altKey)
+        return;
+      if (isEditable(event.target))
+        return;
+      event.preventDefault();
+      expand();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut, isExpanded]);
+  const onKeyDown = (event) => {
+    if (event.key !== "Escape" || open)
+      return;
+    event.stopPropagation();
+    if (query)
+      setQuery("");
+    else
+      collapse(true);
+  };
+  const inputProps = {
+    ref: input,
+    placeholder,
+    "aria-label": placeholder,
+    onKeyDown,
+    className: cn("h-full min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden", size.text)
+  };
+  const root = /* @__PURE__ */ jsx("search", {
+    onBlur: (event) => {
+      if (!isExpanded || query || event.currentTarget.contains(event.relatedTarget))
+        return;
+      collapse(false);
+    },
+    className: cn("group/search relative inline-flex shrink-0 align-middle", className),
+    children: /* @__PURE__ */ jsxs("form", {
+      className: "contents",
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit?.(query);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("button", {
+          ref: button,
+          type: "button",
+          "aria-label": placeholder,
+          onClick: expand,
+          className: cn("relative z-[1] flex items-center outline-none focus-visible:ring-1 focus-visible:ring-focus-ring", size.control, size.gap, size.text, shape.input, variant === "icon" ? cn("cursor-pointer justify-center", SQUARE[size.variant]) : cn("cursor-text pr-2.5", INSET[size.variant], PILL[size.variant]), isExpanded && "invisible"),
+          children: [
+            /* @__PURE__ */ jsx(SearchIcon, {
+              size: size.icon,
+              strokeWidth: 1.5,
+              className: "shrink-0 text-muted-foreground transition-colors duration-fast group-hover/search:text-foreground"
+            }),
+            variant === "pill" && /* @__PURE__ */ jsx("span", {
+              className: "text-muted-foreground",
+              children: placeholder
+            }),
+            variant === "pill" && shortcut && /* @__PURE__ */ jsx(CommandShortcut, {
+              className: "pl-4",
+              children: shortcut
+            })
+          ]
+        }),
+        rest > 0 && /* @__PURE__ */ jsx(motion.div, {
+          ref: field,
+          className: cn("absolute top-0 h-full overflow-hidden ring-1 transition-[box-shadow] duration-moderate", align === "end" ? "right-0" : "left-0", shape.input, lifted ? cn("z-10 ring-transparent", SURFACE_BG[level], SURFACE_SHADOW[3]) : "ring-border group-hover/search:bg-muted/50"),
+          initial: false,
+          animate: { width: isExpanded ? width : rest },
+          transition: reduced ? { duration: 0 } : isExpanded ? spring.slow : spring.slow.exit,
+          onAnimationComplete: () => setSettled(isExpanded),
+          children: lifted && /* @__PURE__ */ jsxs("div", {
+            className: cn("flex h-full items-center pr-1.5", size.gap, INSET[size.variant]),
+            style: { width },
+            children: [
+              /* @__PURE__ */ jsx(SearchIcon, {
+                size: size.icon,
+                strokeWidth: 1.5,
+                className: "shrink-0 text-muted-foreground"
+              }),
+              suggestions ? /* @__PURE__ */ jsx(Autocomplete.Input, {
+                ...inputProps
+              }) : /* @__PURE__ */ jsx("input", {
+                ...inputProps,
+                type: "search",
+                value: query,
+                onChange: (event) => setQuery(event.target.value)
+              }),
+              query && /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-label": "Clear",
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => {
+                  setQuery("");
+                  input.current?.focus();
+                },
+                className: "flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-[color,background-color] duration-fast hover:bg-hover hover:text-foreground active:bg-active focus-visible:ring-1 focus-visible:ring-focus-ring",
+                children: /* @__PURE__ */ jsx(XIcon, {
+                  size: size.icon - 2,
+                  strokeWidth: 1.5
+                })
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
+  if (!suggestions)
+    return root;
+  return /* @__PURE__ */ jsxs(CommandListRoot, {
+    items: suggestions,
+    value: query,
+    onValueChange: setQuery,
+    open,
+    onOpenChange: setSuggesting,
+    children: [
+      root,
+      /* @__PURE__ */ jsx(Autocomplete.Portal, {
+        children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+          anchor: field,
+          side: "bottom",
+          align,
+          sideOffset: 8,
+          className: "z-50 outline-none",
+          children: /* @__PURE__ */ jsx(Autocomplete.Popup, {
+            ref: morph.popupRef,
+            className: "relative outline-none",
+            children: /* @__PURE__ */ jsx(SurfaceProvider, {
+              value: level,
+              children: /* @__PURE__ */ jsx(MorphSurface, {
+                morph,
+                bg: SURFACE_BG[level],
+                shadow: SURFACE_SHADOW[3],
+                radius: shapeMap.rounded.container,
+                className: "flex max-h-[min(300px,var(--available-height))] w-[var(--anchor-width)] flex-col overflow-hidden",
+                children: /* @__PURE__ */ jsx(CommandList, {
+                  emptyMessage,
+                  onPick: (item) => onSubmit?.(item.label)
+                })
+              })
+            })
+          })
+        })
+      })
+    ]
+  });
+}
+var search_default = Search;
+
+export { Search, search_default };

package/dist/shared/components-csxz9f52.js

@@ -0,0 +1,42 @@
+// lib/surface-classes.ts
+var SURFACE_BG = {
+  1: "bg-surface-1",
+  2: "bg-surface-2",
+  3: "bg-surface-3",
+  4: "bg-surface-4",
+  5: "bg-surface-5",
+  6: "bg-surface-6",
+  7: "bg-surface-7",
+  8: "bg-surface-8"
+};
+var SURFACE_SHADOW = {
+  1: "shadow-surface-1",
+  2: "shadow-surface-2",
+  3: "shadow-surface-3",
+  4: "shadow-surface-4",
+  5: "shadow-surface-5",
+  6: "shadow-surface-6",
+  7: "shadow-surface-7",
+  8: "shadow-surface-8"
+};
+function surfaceClasses(bgLevel, shadowLevel = bgLevel) {
+  const bg = Math.round(Math.max(1, Math.min(8, bgLevel)));
+  const shadow = Math.round(Math.max(1, Math.min(8, shadowLevel)));
+  return `${SURFACE_BG[bg]} ${SURFACE_SHADOW[shadow]}`;
+}
+
+// lib/surface-context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var SurfaceContext = createContext(1);
+function useSurface() {
+  return useContext(SurfaceContext);
+}
+function SurfaceProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(SurfaceContext.Provider, {
+    value: Math.max(1, Math.min(8, value)),
+    children
+  });
+}
+
+export { SURFACE_BG, SURFACE_SHADOW, surfaceClasses, useSurface, SurfaceProvider };

package/dist/shared/components-de8xsm9y.js

@@ -0,0 +1,22 @@
+// lib/field-classes.ts
+import { cva } from "class-variance-authority";
+var fieldVariants = cva([
+  "group/field ring-1 cursor-text transition-[background-color,box-shadow,opacity] duration-fast",
+  "hover:bg-muted/50 hover:ring-border data-[active]:bg-muted/50 data-[active]:ring-border",
+  "focus-within:!bg-card focus-within:ring-border",
+  "data-[invalid]:!ring-destructive/50 data-[invalid]:hover:bg-destructive-light/60 data-[invalid]:data-[active]:bg-destructive-light/60",
+  "data-[disabled]:ring-border data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
+], {
+  variants: {
+    variant: {
+      borderless: "bg-transparent ring-transparent",
+      bordered: "bg-transparent ring-border"
+    }
+  },
+  defaultVariants: {
+    variant: "borderless"
+  }
+});
+var fieldIconClasses = "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover/field:text-foreground group-hover/field:stroke-[2] group-data-[active]/field:text-foreground group-data-[active]/field:stroke-[2] group-focus-within/field:text-foreground group-focus-within/field:stroke-[2]";
+
+export { fieldVariants, fieldIconClasses };

package/dist/shared/components-dg0w8g5p.js

@@ -0,0 +1,26 @@
+// lib/use-controllable-state.ts
+import { useCallback, useRef, useState } from "react";
+function useControllableState(value, defaultValue, onChange) {
+  const [internal, setInternal] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : internal;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const controlledRef = useRef(controlled);
+  controlledRef.current = controlled;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback((next) => {
+    const prev = currentRef.current;
+    const resolved = typeof next === "function" ? next(prev) : next;
+    if (Object.is(resolved, prev))
+      return;
+    currentRef.current = resolved;
+    if (!controlledRef.current)
+      setInternal(resolved);
+    onChangeRef.current?.(resolved);
+  }, []);
+  return [current, setValue];
+}
+
+export { useControllableState };

package/dist/shared/components-dphg9gjr.js

@@ -0,0 +1,42 @@
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogState,
+  DialogTitle,
+  DialogTrigger
+} from "./components-61ckf42z.js";
+
+// components/overlays/alert-dialog/index.tsx
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var AlertDialogContent = forwardRef(({ showCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsx(DialogContent, {
+  ref,
+  showCloseButton,
+  ...props
+}));
+AlertDialogContent.displayName = "AlertDialogContent";
+function AlertDialog({ children, open, defaultOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx(DialogState, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: (root) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, {
+      ...root,
+      children
+    })
+  });
+}
+AlertDialog.Trigger = DialogTrigger;
+AlertDialog.Content = AlertDialogContent;
+AlertDialog.Header = DialogHeader;
+AlertDialog.Footer = DialogFooter;
+AlertDialog.Title = DialogTitle;
+AlertDialog.Description = DialogDescription;
+AlertDialog.Close = DialogClose;
+var alert_dialog_default = AlertDialog;
+
+export { AlertDialogContent, AlertDialog, alert_dialog_default };

package/dist/shared/components-e46kf6cp.js

@@ -0,0 +1,298 @@
+// lib/use-fluid-hover.ts
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+function pickNearest({
+  axis,
+  point,
+  rects,
+  containerRect,
+  scroll,
+  border,
+  layoutSize,
+  isDisabled
+}) {
+  const scaleX = layoutSize.width > 0 ? containerRect.width / layoutSize.width : 1;
+  const scaleY = layoutSize.height > 0 ? containerRect.height / layoutSize.height : 1;
+  let closestIndex = null;
+  let closestDistance = Infinity;
+  let containingIndex = null;
+  for (let index = 0;index < rects.length; index++) {
+    const r = rects[index];
+    if (!r)
+      continue;
+    if (isDisabled?.(index))
+      continue;
+    if (axis === "xy") {
+      const left = containerRect.left + (border.x + r.left - scroll.x) * scaleX;
+      const top = containerRect.top + (border.y + r.top - scroll.y) * scaleY;
+      const width = r.width * scaleX;
+      const height = r.height * scaleY;
+      if (point.x >= left && point.x <= left + width && point.y >= top && point.y <= top + height) {
+        containingIndex = index;
+      }
+      const distance2 = Math.hypot(point.x - (left + width / 2), point.y - (top + height / 2));
+      if (distance2 < closestDistance) {
+        closestDistance = distance2;
+        closestIndex = index;
+      }
+      continue;
+    }
+    const horizontal = axis === "x";
+    const mousePos = horizontal ? point.x : point.y;
+    const scale = horizontal ? scaleX : scaleY;
+    const itemStart = (horizontal ? containerRect.left : containerRect.top) + ((horizontal ? border.x : border.y) + (horizontal ? r.left : r.top) - (horizontal ? scroll.x : scroll.y)) * scale;
+    const itemSize = (horizontal ? r.width : r.height) * scale;
+    if (mousePos >= itemStart && mousePos <= itemStart + itemSize) {
+      containingIndex = index;
+    }
+    const distance = Math.abs(mousePos - (itemStart + itemSize / 2));
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = index;
+    }
+  }
+  return containingIndex ?? closestIndex;
+}
+var ACTIVE_ATTR = "data-fluid-hover-active";
+var ACTIVE_INDEX_ATTR = "data-fluid-hover-active-index";
+var ACTIVATOR_SELECTOR = "a[href], button, [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox'], [role='option'], [role='radio'], [role='checkbox'], [role='tab'], [role='link'], [role='button']";
+function resolveActivator(element) {
+  if (element.matches(ACTIVATOR_SELECTOR) || element.hasAttribute("tabindex")) {
+    return element;
+  }
+  return element.querySelector(ACTIVATOR_SELECTOR) ?? element;
+}
+var measurementAttempts = 3;
+function useFluidHover(containerRef, options = {}) {
+  const { axis = "y", isItemDisabled, gapClick = true } = options;
+  const gapClickMaxDistance = typeof gapClick === "object" ? gapClick.maxDistance ?? Infinity : Infinity;
+  const itemsRef = useRef(new Map);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const activeIndexRef = useRef(null);
+  activeIndexRef.current = activeIndex;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (activeIndex === null)
+      container?.removeAttribute(ACTIVE_INDEX_ATTR);
+    else
+      container?.setAttribute(ACTIVE_INDEX_ATTR, String(activeIndex));
+    const active = activeIndex === null ? undefined : itemsRef.current.get(activeIndex);
+    active?.setAttribute(ACTIVE_ATTR, "");
+    return () => {
+      active?.removeAttribute(ACTIVE_ATTR);
+      if (activeIndex !== null)
+        itemsRef.current.get(activeIndex)?.removeAttribute(ACTIVE_ATTR);
+    };
+  }, [activeIndex, containerRef]);
+  const [itemRects, setItemRects] = useState([]);
+  const [isMeasured, setIsMeasured] = useState(false);
+  const itemRectsRef = useRef([]);
+  const sessionRef = useRef(0);
+  const rafIdRef = useRef(null);
+  const remeasureRafIdRef = useRef(null);
+  const runMeasurement = useCallback(() => {
+    const container = containerRef.current;
+    if (!container)
+      return false;
+    const rects = [];
+    let everyItemHasLayout = true;
+    itemsRef.current.forEach((element, index) => {
+      const hasLayoutBox = element.offsetParent !== null || element.offsetWidth > 0 || element.offsetHeight > 0;
+      if (!hasLayoutBox) {
+        everyItemHasLayout = false;
+        return;
+      }
+      let top = element.offsetTop;
+      let left = element.offsetLeft;
+      let ancestor = element.offsetParent;
+      while (ancestor && ancestor !== container && container.contains(ancestor)) {
+        top += ancestor.offsetTop + ancestor.clientTop;
+        left += ancestor.offsetLeft + ancestor.clientLeft;
+        ancestor = ancestor.offsetParent;
+      }
+      rects[index] = {
+        top,
+        height: element.offsetHeight,
+        left,
+        width: element.offsetWidth
+      };
+    });
+    if (!everyItemHasLayout)
+      return false;
+    const prev = itemRectsRef.current;
+    let changed = prev.length !== rects.length;
+    for (let i = 0;!changed && i < rects.length; i++) {
+      const p = prev[i];
+      const r = rects[i];
+      if (p === r)
+        continue;
+      changed = !p || !r || p.top !== r.top || p.left !== r.left || p.width !== r.width || p.height !== r.height;
+    }
+    if (changed) {
+      itemRectsRef.current = rects;
+      setItemRects(rects);
+    }
+    return true;
+  }, [containerRef]);
+  const measureItems = useCallback(() => {
+    runMeasurement();
+  }, [runMeasurement]);
+  const scheduleMeasurement = useCallback((attemptsLeft) => {
+    if (remeasureRafIdRef.current !== null) {
+      cancelAnimationFrame(remeasureRafIdRef.current);
+    }
+    remeasureRafIdRef.current = requestAnimationFrame(() => {
+      remeasureRafIdRef.current = null;
+      if (runMeasurement()) {
+        setIsMeasured(true);
+      } else if (attemptsLeft > 1) {
+        scheduleMeasurement(attemptsLeft - 1);
+      }
+    });
+  }, [runMeasurement]);
+  const remeasure = useCallback(() => {
+    setIsMeasured(false);
+    scheduleMeasurement(measurementAttempts);
+  }, [scheduleMeasurement]);
+  const itemRoRef = useRef(null);
+  const getItemRo = useCallback(() => {
+    if (itemRoRef.current === null && typeof ResizeObserver !== "undefined") {
+      itemRoRef.current = new ResizeObserver(() => scheduleMeasurement(measurementAttempts));
+    }
+    return itemRoRef.current;
+  }, [scheduleMeasurement]);
+  const registerItem = useCallback((index, element) => {
+    if (element) {
+      itemsRef.current.set(index, element);
+      getItemRo()?.observe(element);
+      if (index === activeIndexRef.current)
+        element.setAttribute(ACTIVE_ATTR, "");
+    } else {
+      const previous = itemsRef.current.get(index);
+      if (previous)
+        itemRoRef.current?.unobserve(previous);
+      previous?.removeAttribute(ACTIVE_ATTR);
+      itemsRef.current.delete(index);
+      if (index === activeIndexRef.current) {
+        setActiveIndex((current) => current === index && !itemsRef.current.has(index) ? null : current);
+      }
+    }
+    remeasure();
+  }, [remeasure, getItemRo]);
+  const handleMouseMove = useCallback((e) => {
+    const mouseX = e.clientX;
+    const mouseY = e.clientY;
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      const container = containerRef.current;
+      if (!container)
+        return;
+      setActiveIndex(pickNearest({
+        axis,
+        point: { x: mouseX, y: mouseY },
+        rects: itemRectsRef.current,
+        containerRect: container.getBoundingClientRect(),
+        scroll: { x: container.scrollLeft, y: container.scrollTop },
+        border: { x: container.clientLeft, y: container.clientTop },
+        layoutSize: { width: container.offsetWidth, height: container.offsetHeight },
+        isDisabled: isItemDisabled ? (index) => {
+          const el = itemsRef.current.get(index);
+          return !!el && isItemDisabled(el);
+        } : undefined
+      }));
+    });
+  }, [axis, containerRef, isItemDisabled]);
+  const handleMouseEnter = useCallback(() => {
+    sessionRef.current += 1;
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    setActiveIndex(null);
+  }, []);
+  const handleClick = useCallback((e) => {
+    const target = e.target;
+    if (!target)
+      return;
+    for (const element2 of itemsRef.current.values()) {
+      if (element2.contains(target))
+        return;
+    }
+    if (!target.isConnected)
+      return;
+    const control = target.closest?.("input, textarea, select, button, a, summary, [contenteditable], [role='textbox'], [role='searchbox'], [role='button']");
+    if (control)
+      return;
+    if (gapClick === false)
+      return;
+    const index = activeIndexRef.current;
+    if (index === null)
+      return;
+    const element = itemsRef.current.get(index);
+    if (!element || isItemDisabled?.(element))
+      return;
+    if (gapClickMaxDistance !== Infinity) {
+      const r = element.getBoundingClientRect();
+      const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right);
+      const dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom);
+      if (Math.hypot(dx, dy) > gapClickMaxDistance)
+        return;
+    }
+    resolveActivator(element).click();
+  }, [isItemDisabled, gapClick, gapClickMaxDistance]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined")
+      return;
+    const ro = new ResizeObserver(() => scheduleMeasurement(measurementAttempts));
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [containerRef, scheduleMeasurement]);
+  useEffect(() => {
+    return () => {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      if (remeasureRafIdRef.current !== null) {
+        cancelAnimationFrame(remeasureRafIdRef.current);
+      }
+      itemRoRef.current?.disconnect();
+      itemRoRef.current = null;
+    };
+  }, []);
+  return {
+    activeIndex,
+    setActiveIndex,
+    itemRects,
+    isMeasured,
+    sessionRef,
+    handlers: {
+      onMouseMove: handleMouseMove,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick
+    },
+    registerItem,
+    remeasure,
+    measureItems
+  };
+}
+function useRegisterFluidHoverItem(registerItem, index, ref) {
+  useEffect(() => {
+    if (!registerItem || index === undefined)
+      return;
+    registerItem(index, ref.current);
+    return () => registerItem(index, null);
+  }, [index, registerItem, ref]);
+}
+
+export { useFluidHover, useRegisterFluidHoverItem };