@expcat/tigercat-react 2.1.0 → 2.1.1

package/dist/{chunk-RUAPTIQ7.mjs → chunk-246DAUEF.mjs}

@@ -144,7 +144,6 @@ var MaskInput = ({
         placeholder,
         disabled,
         readOnly: readonly,
-        name,
         id,
         autoComplete,
         autoFocus,
@@ -160,7 +159,8 @@ var MaskInput = ({
         onBlur
       }
     ),
-    activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), children: errorMessage }) : showClear && /* @__PURE__ */ jsx(
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: rawValue }) : null,
+    activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), "aria-live": "polite", children: errorMessage }) : showClear && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",

package/dist/{chunk-PU3JY6RE.mjs → chunk-2JMI7TCM.mjs}

@@ -1,6 +1,6 @@
 import {
   TaskBoard
-} from "./chunk-773LH7BK.mjs";
+} from "./chunk-O6VYD4E4.mjs";
 
 // src/components/Kanban.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/chunk-2YBLMVDT.mjs

@@ -0,0 +1,428 @@
+import {
+  ChartCanvas
+} from "./chunk-CUAXRBKO.mjs";
+
+// src/components/Gantt.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  applyGanttTaskDateOverlay,
+  classNames,
+  clampGanttDragDeltaX,
+  computeGanttLayout,
+  ganttAxisTextClasses,
+  ganttDateValuesEqual,
+  ganttDependencyClasses,
+  ganttLabelClasses,
+  ganttProgressClasses,
+  ganttRowClasses,
+  ganttTodayLineClasses,
+  getChartInnerRect,
+  getGanttTaskAriaLabel,
+  getGanttTaskClasses,
+  isBrowser,
+  moveGanttTaskByPx
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GANTT_BAR_CLICK_PX = 4;
+function Gantt({
+  data,
+  width = 760,
+  height = 360,
+  padding = 24,
+  scale = "week",
+  rowHeight = 40,
+  barHeight = 18,
+  taskLabelWidth = 140,
+  timelineHeight = 36,
+  minDate,
+  maxDate,
+  minBarWidth = 6,
+  showToday = false,
+  showProgress = true,
+  showDependencies = true,
+  hoverable = false,
+  selectable = false,
+  selectedId,
+  activeOpacity = 1,
+  inactiveOpacity = 0.35,
+  dateFormatter,
+  colors,
+  title,
+  desc,
+  ariaLabel = "Gantt chart",
+  className,
+  onTaskClick,
+  onTaskHover,
+  onSelectedIdChange,
+  onTaskChange,
+  onDataChange
+}) {
+  const [innerSelectedId, setInnerSelectedId] = useState(null);
+  const [hoveredId, setHoveredId] = useState(null);
+  const [dateOverlay, setDateOverlay] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [dragPreview, setDragPreview] = useState(
+    null
+  );
+  const dragSessionRef = useRef(null);
+  const documentPointerListeningRef = useRef(false);
+  const suppressClickRef = useRef(false);
+  const dragFnsRef = useRef({
+    move: (_event) => {
+    },
+    finish: (_event) => {
+    }
+  });
+  const onDocumentPointerMove = useRef((event) => {
+    dragFnsRef.current.move(event);
+  }).current;
+  const onDocumentPointerEnd = useRef((event) => {
+    dragFnsRef.current.finish(event);
+  }).current;
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  const dateOverlayRef = useRef(dateOverlay);
+  dateOverlayRef.current = dateOverlay;
+  const onTaskChangeRef = useRef(onTaskChange);
+  onTaskChangeRef.current = onTaskChange;
+  const onDataChangeRef = useRef(onDataChange);
+  onDataChangeRef.current = onDataChange;
+  const onTaskClickRef = useRef(onTaskClick);
+  onTaskClickRef.current = onTaskClick;
+  const onSelectedIdChangeRef = useRef(onSelectedIdChange);
+  onSelectedIdChangeRef.current = onSelectedIdChange;
+  const selectedIdRef = useRef(selectedId);
+  selectedIdRef.current = selectedId;
+  const selectableRef = useRef(selectable);
+  selectableRef.current = selectable;
+  const resolvedSelectedId = selectedId === void 0 ? innerSelectedId : selectedId;
+  const resolvedSelectedIdRef = useRef(resolvedSelectedId);
+  resolvedSelectedIdRef.current = resolvedSelectedId;
+  useEffect(
+    () => () => {
+      if (!documentPointerListeningRef.current || !isBrowser()) return;
+      document.removeEventListener("pointermove", onDocumentPointerMove);
+      document.removeEventListener("pointerup", onDocumentPointerEnd);
+      document.removeEventListener("pointercancel", onDocumentPointerEnd);
+      documentPointerListeningRef.current = false;
+    },
+    [onDocumentPointerEnd, onDocumentPointerMove]
+  );
+  const resolvedData = useMemo(
+    () => applyGanttTaskDateOverlay(data, dateOverlay),
+    [data, dateOverlay]
+  );
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [height, padding, width]
+  );
+  const layout = useMemo(
+    () => computeGanttLayout(resolvedData, {
+      width: innerRect.width,
+      rowHeight,
+      barHeight,
+      taskLabelWidth,
+      timelineHeight,
+      minDate,
+      maxDate,
+      minBarWidth,
+      scale,
+      colors,
+      today: showToday ? /* @__PURE__ */ new Date() : void 0,
+      dateFormatter
+    }),
+    [
+      barHeight,
+      colors,
+      dateFormatter,
+      innerRect.width,
+      maxDate,
+      minBarWidth,
+      minDate,
+      resolvedData,
+      rowHeight,
+      scale,
+      showToday,
+      taskLabelWidth,
+      timelineHeight
+    ]
+  );
+  const activeId = resolvedSelectedId ?? hoveredId;
+  const selectTask = (task) => {
+    if (selectableRef.current && !task.task.disabled) {
+      const nextId = resolvedSelectedIdRef.current === task.id ? null : task.id;
+      if (selectedIdRef.current === void 0) setInnerSelectedId(nextId);
+      onSelectedIdChangeRef.current?.(nextId);
+    }
+    onTaskClickRef.current?.(task.task);
+  };
+  const setHoveredTask = (task) => {
+    if (!hoverable) return;
+    setHoveredId(task?.id ?? null);
+    onTaskHover?.(task?.task ?? null);
+  };
+  const getTaskOpacity = (task) => {
+    if (activeId === null) return activeOpacity;
+    return activeId === task.id ? activeOpacity : inactiveOpacity;
+  };
+  const pointerScale = (currentTarget) => {
+    const svg = currentTarget instanceof SVGElement ? currentTarget.ownerSVGElement ?? currentTarget.closest("svg") : currentTarget instanceof Element ? currentTarget.closest("svg") : null;
+    const clientWidth = svg?.clientWidth ?? 0;
+    if (!(clientWidth > 0)) return 1;
+    const viewBoxWidth = svg?.viewBox?.baseVal?.width;
+    const resolvedViewBox = typeof viewBoxWidth === "number" && viewBoxWidth > 0 ? viewBoxWidth : width;
+    return resolvedViewBox / clientWidth;
+  };
+  const captureBarPointer = (target, pointerId) => {
+    if (!(target instanceof Element) || typeof target.setPointerCapture !== "function") return;
+    try {
+      target.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const releaseBarPointer = (target, pointerId) => {
+    if (!target || typeof target.releasePointerCapture !== "function") return;
+    try {
+      target.releasePointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const moveBarDrag = (event) => {
+    const session = dragSessionRef.current;
+    if (!session || event.pointerId !== session.pointerId) return;
+    const rawDelta = (event.clientX - session.startClientX) * session.scale;
+    const deltaX = clampGanttDragDeltaX(
+      rawDelta,
+      session.barX,
+      session.barWidth,
+      session.taskLabelWidth,
+      session.layoutWidth
+    );
+    session.deltaX = deltaX;
+    setDragPreview({ id: session.task.id, deltaX });
+  };
+  const detachDocumentPointerListeners = () => {
+    if (!documentPointerListeningRef.current || !isBrowser()) return;
+    document.removeEventListener("pointermove", onDocumentPointerMove);
+    document.removeEventListener("pointerup", onDocumentPointerEnd);
+    document.removeEventListener("pointercancel", onDocumentPointerEnd);
+    documentPointerListeningRef.current = false;
+  };
+  const finishBarDrag = (event) => {
+    const session = dragSessionRef.current;
+    if (!session || event.pointerId !== session.pointerId) return;
+    moveBarDrag(event);
+    const deltaX = session.deltaX;
+    dragSessionRef.current = null;
+    setDragPreview(null);
+    detachDocumentPointerListeners();
+    releaseBarPointer(session.captureTarget, session.pointerId);
+    suppressClickRef.current = true;
+    if (Math.abs(deltaX) < GANTT_BAR_CLICK_PX) {
+      selectTask(session.task);
+      return;
+    }
+    const nextTask = moveGanttTaskByPx(session.sourceTask, deltaX, {
+      minMs: session.minMs,
+      maxMs: session.maxMs,
+      timelineWidth: session.timelineWidth
+    });
+    if (ganttDateValuesEqual(nextTask.start, session.sourceTask.start) && ganttDateValuesEqual(nextTask.end, session.sourceTask.end)) {
+      selectTask(session.task);
+      return;
+    }
+    const incoming = dataRef.current.find((item) => item.id === nextTask.id);
+    const previous = dateOverlayRef.current.get(nextTask.id);
+    const nextOverlay = new Map(dateOverlayRef.current);
+    nextOverlay.set(nextTask.id, {
+      start: nextTask.start,
+      end: nextTask.end,
+      baseStart: previous?.baseStart ?? incoming?.start ?? session.sourceTask.start,
+      baseEnd: previous?.baseEnd ?? incoming?.end ?? session.sourceTask.end
+    });
+    setDateOverlay(nextOverlay);
+    const nextData = applyGanttTaskDateOverlay(dataRef.current, nextOverlay);
+    onTaskChangeRef.current?.(nextTask);
+    onDataChangeRef.current?.(nextData);
+  };
+  dragFnsRef.current.move = moveBarDrag;
+  dragFnsRef.current.finish = finishBarDrag;
+  const attachDocumentPointerListeners = () => {
+    if (documentPointerListeningRef.current || !isBrowser()) return;
+    document.addEventListener("pointermove", onDocumentPointerMove);
+    document.addEventListener("pointerup", onDocumentPointerEnd);
+    document.addEventListener("pointercancel", onDocumentPointerEnd);
+    documentPointerListeningRef.current = true;
+  };
+  const startBarDrag = (event, task) => {
+    if (task.task.disabled || dragSessionRef.current) return;
+    if (event.button !== void 0 && event.button !== 0) return;
+    event.preventDefault();
+    const captureTarget = event.currentTarget instanceof Element ? event.currentTarget : null;
+    dragSessionRef.current = {
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      scale: pointerScale(event.currentTarget),
+      task,
+      sourceTask: task.task,
+      barX: task.x,
+      barWidth: task.width,
+      taskLabelWidth,
+      layoutWidth: layout.width,
+      minMs: layout.minMs,
+      maxMs: layout.maxMs,
+      timelineWidth: layout.timelineWidth,
+      deltaX: 0,
+      captureTarget
+    };
+    setDragPreview({ id: task.id, deltaX: 0 });
+    captureBarPointer(event.currentTarget, event.pointerId);
+    attachDocumentPointerListeners();
+  };
+  const handleBarClick = (event, task) => {
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    selectTask(task);
+  };
+  return /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      role: "img",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs("g", { "data-series-type": "gantt", children: [
+        /* @__PURE__ */ jsxs("g", { "data-gantt-axis": "true", children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: taskLabelWidth,
+              x2: layout.width,
+              y1: timelineHeight - 1,
+              y2: timelineHeight - 1,
+              stroke: "var(--tiger-border,#d1d5db)"
+            }
+          ),
+          layout.ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: tick.x,
+                x2: tick.x,
+                y1: 0,
+                y2: layout.height,
+                stroke: "var(--tiger-border,#e5e7eb)"
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: tick.x + 4, y: 16, className: ganttAxisTextClasses, children: tick.label })
+          ] }, `${tick.label}-${tick.x}`))
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-gantt-rows": "true", children: layout.tasks.map((task) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: timelineHeight + task.index * rowHeight,
+            width: layout.width,
+            height: rowHeight,
+            className: task.index % 2 === 0 ? ganttRowClasses : void 0,
+            opacity: task.index % 2 === 0 ? 0.75 : 0
+          },
+          `row-${task.id}`
+        )) }),
+        showToday && layout.todayX !== null ? /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: layout.todayX,
+            x2: layout.todayX,
+            y1: 0,
+            y2: layout.height,
+            className: ganttTodayLineClasses,
+            "data-gantt-today": "true"
+          }
+        ) : null,
+        showDependencies ? /* @__PURE__ */ jsx("g", { "data-gantt-dependencies": "true", children: layout.dependencies.map((dependency) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: dependency.path,
+            className: ganttDependencyClasses
+          },
+          `${dependency.sourceId}-${dependency.targetId}`
+        )) }) : null,
+        /* @__PURE__ */ jsx("g", { "data-gantt-tasks": "true", children: layout.tasks.map((task) => {
+          const selected = resolvedSelectedId === task.id;
+          const interactive = (hoverable || selectable) && !task.task.disabled;
+          const movable = !task.task.disabled;
+          const grabbing = dragPreview?.id === task.id;
+          const previewDeltaX = grabbing ? dragPreview?.deltaX ?? 0 : 0;
+          return /* @__PURE__ */ jsxs("g", { opacity: getTaskOpacity(task), children: [
+            /* @__PURE__ */ jsx("text", { x: 0, y: task.y + task.height / 2 + 4, className: ganttLabelClasses, children: task.task.label }),
+            /* @__PURE__ */ jsxs(
+              "g",
+              {
+                className: getGanttTaskClasses(interactive, selected, movable, grabbing),
+                role: interactive ? "button" : "group",
+                tabIndex: interactive ? 0 : void 0,
+                "aria-label": getGanttTaskAriaLabel(task.task),
+                "data-gantt-task-id": task.id,
+                transform: previewDeltaX !== 0 ? `translate(${previewDeltaX} 0)` : void 0,
+                onMouseEnter: () => setHoveredTask(task),
+                onMouseLeave: () => setHoveredTask(null),
+                onPointerDown: (event) => startBarDrag(event, task),
+                onPointerMove: (event) => moveBarDrag(event.nativeEvent),
+                onPointerUp: (event) => finishBarDrag(event.nativeEvent),
+                onPointerCancel: (event) => finishBarDrag(event.nativeEvent),
+                onClick: (event) => handleBarClick(event, task),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    selectTask(task);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.width,
+                      height: task.height,
+                      rx: 4,
+                      fill: task.color,
+                      stroke: selected ? "var(--tiger-text,#111827)" : void 0,
+                      strokeWidth: selected ? 2 : void 0
+                    }
+                  ),
+                  showProgress && task.progressWidth > 0 ? /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.progressWidth,
+                      height: task.height,
+                      rx: 4,
+                      className: ganttProgressClasses
+                    }
+                  ) : null
+                ]
+              }
+            )
+          ] }, task.id);
+        }) })
+      ] })
+    }
+  );
+}
+Gantt.displayName = "Gantt";
+
+export {
+  Gantt
+};

package/dist/{chunk-25D5TXZH.mjs → chunk-32MCQMBJ.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 
 // src/components/HeatmapChart.tsx
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
@@ -63,6 +63,7 @@ var HeatmapChart = ({
     handleClick
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -111,6 +112,7 @@ var HeatmapChart = ({
     [resolvedHoveredIndex, cells, valueFormatter]
   );
   const interactive = hoverable || selectable;
+  const pointerInteractive = interactive || showTooltip;
   const rect = innerRect;
   const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
   const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
@@ -288,7 +290,7 @@ var HeatmapChart = ({
       ]
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,
@@ -314,10 +316,10 @@ var HeatmapChart = ({
           top: `${rect.y}px`,
           width: `${rect.width}px`,
           height: `${rect.height}px`,
-          pointerEvents: interactive ? "auto" : "none"
+          pointerEvents: pointerInteractive ? "auto" : "none"
         },
-        onMouseMove: interactive ? handleCanvasMouseMove : void 0,
-        onMouseLeave: interactive ? handleMouseLeave : void 0,
+        onMouseMove: pointerInteractive ? handleCanvasMouseMove : void 0,
+        onMouseLeave: pointerInteractive ? handleMouseLeave : void 0,
         onClick: interactive ? handleCanvasClick : void 0
       }
     ),

package/dist/{chunk-M5MZWOHF.mjs → chunk-3HHEVMHE.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-YI6YWH66.mjs";
+} from "./chunk-RE5ZLA5D.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";

package/dist/{chunk-HSBN5MLS.mjs → chunk-3LACOSJQ.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-ZCGIZOMT.mjs";
+} from "./chunk-V7HJ5HLC.mjs";
 
 // src/components/ImageGroup.tsx
 import { useState, useCallback, useMemo, createContext, useRef } from "react";

package/dist/{chunk-F6WV53BS.mjs → chunk-3LDDXHW2.mjs}

@@ -12,7 +12,7 @@ import {
 import { useState, useEffect, useRef, useCallback, useId } from "react";
 import {
   classNames,
-  getInputClasses,
+  getInputFieldClasses,
   getInputWrapperClasses,
   getInputAffixClasses,
   getInputErrorClasses,
@@ -103,16 +103,13 @@ var Input = ({
   const showClear = clearable && !disabled && !readonly && currentValStr.length > 0;
   const showPasswordToggle = showPassword && type === "password" && !disabled;
   const effectiveType = showPassword && type === "password" ? passwordVisible ? "text" : "password" : type;
-  const inputClasses = getInputClasses({
+  const inputClasses = getInputFieldClasses({
     size: effectiveSize,
     status,
     hasPrefix,
     hasSuffix
   });
   const renderSuffix = () => {
-    if (activeError) {
-      return /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), children: errorMessage });
-    }
     if (showClear) {
       return /* @__PURE__ */ jsx(
         "button",
@@ -148,7 +145,7 @@ var Input = ({
     "div",
     {
       ref: wrapperRef,
-      className: classNames(getInputWrapperClasses(), className),
+      className: classNames(getInputWrapperClasses(status), className),
       style,
       onAnimationEnd: handleAnimationEnd,
       children: [
@@ -183,16 +180,36 @@ var Input = ({
       ]
     }
   );
+  const extras = [];
+  if (activeError) {
+    extras.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: errorMsgId,
+          className: getInputErrorClasses(effectiveSize),
+          "aria-live": "polite",
+          children: errorMessage
+        },
+        "error"
+      )
+    );
+  }
   if (showCount) {
     const count = currentValStr.length;
     const isOver = maxLength !== void 0 && count > maxLength;
     const countText = maxLength !== void 0 ? `${count} / ${maxLength}` : `${count}`;
-    return /* @__PURE__ */ jsxs("div", { children: [
-      wrapperNode,
-      /* @__PURE__ */ jsx("div", { className: getInputCountClasses(isOver), children: countText })
-    ] });
+    extras.push(
+      /* @__PURE__ */ jsx("div", { className: getInputCountClasses(isOver), children: countText }, "count")
+    );
+  }
+  if (extras.length === 0) {
+    return wrapperNode;
   }
-  return wrapperNode;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    wrapperNode,
+    extras
+  ] });
 };
 
 export {

package/dist/{chunk-IXQAECFP.mjs → chunk-3QNIFKVF.mjs}

@@ -16,6 +16,7 @@ import {
   getAnchorLinkClasses,
   getAnchorLinkListClasses,
   createAnchorObserver,
+  createProgrammaticScrollLock,
   scrollToAnchor
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -86,7 +87,7 @@ var AnchorLink = ({
 };
 var Anchor = ({
   affix = true,
-  bounds: _bounds = 5,
+  bounds = 5,
   offsetTop = 0,
   showInkInFixed = false,
   targetOffset,
@@ -103,10 +104,9 @@ var Anchor = ({
   const [links, setLinks] = useState([]);
   const anchorRef = useRef(null);
   const inkRef = useRef(null);
-  const isScrollingRef = useRef(false);
-  const scrollTimeoutRef = useRef(null);
   const getContainerRef = useRef(getContainer);
   getContainerRef.current = getContainer;
+  const scrollLockRef = useRef(createProgrammaticScrollLock(() => getContainerRef.current()));
   const getCurrentAnchorRef = useRef(getCurrentAnchor);
   getCurrentAnchorRef.current = getCurrentAnchor;
   const onChangeRef = useRef(onChange);
@@ -133,14 +133,9 @@ var Anchor = ({
   const handleLinkClick = useCallback(
     (href, event) => {
       onClick?.(event, href);
-      isScrollingRef.current = true;
+      scrollLockRef.current.lock();
       setActiveLink(href);
       scrollTo(href);
-      if (scrollTimeoutRef.current !== null) clearTimeout(scrollTimeoutRef.current);
-      scrollTimeoutRef.current = setTimeout(() => {
-        isScrollingRef.current = false;
-        scrollTimeoutRef.current = null;
-      }, 500);
     },
     [onClick, scrollTo]
   );
@@ -151,9 +146,10 @@ var Anchor = ({
       const root = container === window ? null : container;
       stop = createAnchorObserver(links, {
         offsetTop: scrollOffset,
+        bounds,
         root,
         onChange: (newActiveLink) => {
-          if (isScrollingRef.current) return;
+          if (scrollLockRef.current.isLocked()) return;
           const finalActiveLink = getCurrentAnchorRef.current ? getCurrentAnchorRef.current(newActiveLink) : newActiveLink;
           setActiveLink((prev) => {
             if (finalActiveLink !== prev) {
@@ -168,11 +164,13 @@ var Anchor = ({
     return () => {
       clearTimeout(timeoutId);
       stop?.();
-      if (scrollTimeoutRef.current !== null) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
     };
-  }, [links, scrollOffset]);
+  }, [bounds, links, scrollOffset]);
+  useEffect(() => {
+    return () => {
+      scrollLockRef.current.dispose();
+    };
+  }, []);
   useEffect(() => {
     if (!inkRef.current || !anchorRef.current || !activeLink) {
       return;