@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-2J54DRDA.js → chunk-Q4OPUKWF.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
-var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
+var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
 var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
+var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
 var chunk5PXTMXXS_js = require('./chunk-5PXTMXXS.js');
-var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var chunk57MJTNDL_js = require('./chunk-57MJTNDL.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -178,6 +178,16 @@ var LineChart = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    // Stroke gradient (modern look — opt-in)
+    strokeGradient: {
+      type: Boolean,
+      default: false
+    },
+    // Point fill radial gradient (modern look — opt-in)
+    pointGradient: {
+      type: Boolean,
+      default: false
+    },
     // Tooltip props
     showTooltip: {
       type: Boolean,
@@ -225,7 +235,7 @@ var LineChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -262,8 +272,12 @@ var LineChart = vue.defineComponent({
     const shouldShowXAxis = vue.computed(() => props.showAxis && props.showXAxis);
     const shouldShowYAxis = vue.computed(() => props.showAxis && props.showYAxis);
     const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const seriesKeys = vue.computed(
+      () => tigercatCore.buildChartSeriesKeys(resolvedSeries.value, { prefix: "line-" })
+    );
     const seriesData = vue.computed(
       () => resolvedSeries.value.map((series, seriesIndex) => {
+        const seriesKey = seriesKeys.value[seriesIndex];
         const color = series.color ?? palette.value[seriesIndex % palette.value.length];
         const points = series.data.map((datum, pointIndex) => ({
           x: resolvedXScale.value.map(datum.x),
@@ -281,6 +295,7 @@ var LineChart = vue.defineComponent({
         return {
           series,
           seriesIndex,
+          seriesKey,
           color,
           linePath,
           areaPath,
@@ -348,7 +363,7 @@ var LineChart = vue.defineComponent({
     };
     return () => {
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -388,7 +403,7 @@ var LineChart = vue.defineComponent({
               label: props.yAxisLabel
             }) : null,
             // Gradient defs and animation styles
-            seriesData.value.some((sd) => sd.showArea) || props.animated ? vue.h("defs", null, [
+            seriesData.value.some((sd) => sd.showArea) || props.animated || props.strokeGradient || props.pointGradient ? vue.h("defs", null, [
               // Animation keyframes
               props.animated ? vue.h(
                 "style",
@@ -408,8 +423,8 @@ var LineChart = vue.defineComponent({
                 (sd) => vue.h(
                   "linearGradient",
                   {
-                    key: `area-grad-${sd.seriesIndex}`,
-                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    key: `area-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-${sd.seriesKey}`,
                     x1: "0",
                     y1: "0",
                     x2: "0",
@@ -428,18 +443,74 @@ var LineChart = vue.defineComponent({
                     })
                   ]
                 )
-              )
+              ),
+              // Point fill radial gradients (bright center → series color edge)
+              ...props.pointGradient ? seriesData.value.map(
+                (sd) => vue.h(
+                  "radialGradient",
+                  {
+                    key: `point-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-point-${sd.seriesKey}`,
+                    cx: "0.5",
+                    cy: "0.5",
+                    r: "0.5"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 30%)`
+                    }),
+                    vue.h("stop", {
+                      offset: "70%",
+                      "stop-color": sd.color
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                    })
+                  ]
+                )
+              ) : [],
+              // Stroke gradients (3-stop horizontal lighter→base→darker)
+              ...props.strokeGradient ? seriesData.value.map(
+                (sd) => vue.h(
+                  "linearGradient",
+                  {
+                    key: `stroke-grad-${sd.seriesKey}`,
+                    id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "1",
+                    y2: "0"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, white 12%)`
+                    }),
+                    vue.h("stop", {
+                      offset: "50%",
+                      "stop-color": sd.color
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": `color-mix(in oklab, ${sd.color} 100%, black 8%)`
+                    })
+                  ]
+                )
+              ) : []
             ]) : null,
             // Render each series
             ...seriesData.value.map(
               (sd) => vue.h(
                 chunkHBFFINAI_js.ChartSeries,
                 {
-                  key: `series-${sd.seriesIndex}`,
+                  key: sd.seriesKey,
                   data: sd.series.data,
                   name: sd.series.name,
                   type: "line",
                   opacity: sd.opacity,
+                  "data-series-key": sd.seriesKey,
                   class: tigercatCore.classNames(
                     sd.series.className,
                     (props.hoverable || props.selectable) && "cursor-pointer"
@@ -455,16 +526,17 @@ var LineChart = vue.defineComponent({
                     // Area fill path
                     sd.showArea && sd.areaPath ? vue.h("path", {
                       d: sd.areaPath,
-                      fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                      fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
                       stroke: "none",
                       class: "transition-opacity duration-300",
-                      "data-area-series": sd.seriesIndex
+                      "data-area-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }) : null,
                     // Line path
                     vue.h("path", {
                       d: sd.linePath,
                       fill: "none",
-                      stroke: sd.color,
+                      stroke: props.strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                       "stroke-width": sd.strokeWidth,
                       "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                       "stroke-dashoffset": props.animated ? "1" : void 0,
@@ -475,23 +547,25 @@ var LineChart = vue.defineComponent({
                         "transition-opacity duration-200",
                         props.animated && "tiger-line-animated"
                       ),
-                      "data-line-series": sd.seriesIndex
+                      "data-line-series": sd.seriesIndex,
+                      "data-series-key": sd.seriesKey
                     }),
                     // Data points
                     sd.showPoints ? sd.points.map((point) => {
                       const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                       const hoverSize = sd.pointSize + 2;
                       return vue.h("circle", {
-                        key: `point-${sd.seriesIndex}-${point.pointIndex}`,
+                        key: `point-${sd.seriesKey}-${point.pointIndex}`,
                         cx: point.x,
                         cy: point.y,
                         r: isHovered ? hoverSize : sd.pointSize,
-                        fill: sd.pointHollow ? "white" : sd.pointColor,
+                        fill: sd.pointHollow ? "white" : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                         stroke: sd.pointHollow ? sd.pointColor : "none",
                         "stroke-width": sd.pointHollow ? 2 : 0,
-                        class: "transition-all duration-200 ease-out",
+                        class: tigercatCore.linePointTransitionClasses,
                         style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
                         "data-point-index": point.pointIndex,
+                        "data-series-key": sd.seriesKey,
                         onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                         onMousemove: handlePointMouseMove,
                         onMouseleave: handlePointMouseLeave,
@@ -508,7 +582,7 @@ var LineChart = vue.defineComponent({
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+      const tooltip = props.showTooltip ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
         content: tooltipContent.value,
         visible: hoveredPointInfo.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -519,7 +593,7 @@ var LineChart = vue.defineComponent({
       }
       return vue.h("div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+        vue.h(chunkACYYQJ6M_js.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,

package/dist/{chunk-YH7N5GZF.mjs → chunk-QDYF23NQ.mjs}

@@ -1,5 +1,4 @@
-import { init_ImagePreview, ImagePreview_exports } from './chunk-ZUVR5UZL.mjs';
-import { __toCommonJS } from './chunk-53M2BTB5.mjs';
+import { ImagePreview } from './chunk-RKU54YLW.mjs';
 import { defineComponent, ref, inject, onMounted, onBeforeUnmount, computed, h } from 'vue';
 import { classNames, imageBaseClasses, imagePreviewCursorClass, coerceClassValue, toCSSSize, mergeStyleValues, getImageImgClasses, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
 
@@ -153,19 +152,16 @@ var Image = defineComponent({
           onError: handleError
         });
       }
-      const previewEl = !group && previewVisible.value && props.src ? (() => {
-        const { ImagePreview } = (init_ImagePreview(), __toCommonJS(ImagePreview_exports));
-        return h(ImagePreview, {
-          open: previewVisible.value,
-          images: [props.src],
-          currentIndex: 0,
-          "onUpdate:open": (val) => {
-            previewVisible.value = val;
-            emit("preview-open-change", val);
-            emit("preview-visible-change", val);
-          }
-        });
-      })() : null;
+      const previewEl = !group && previewVisible.value && props.src ? h(ImagePreview, {
+        open: previewVisible.value,
+        images: [props.src],
+        currentIndex: 0,
+        "onUpdate:open": (val) => {
+          previewVisible.value = val;
+          emit("preview-open-change", val);
+          emit("preview-visible-change", val);
+        }
+      }) : null;
       return h(
         "div",
         {

package/dist/chunk-QRAV345L.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Statistic.ts
+var Statistic = vue.defineComponent({
+  name: "TigerStatistic",
+  props: {
+    title: { type: String, default: void 0 },
+    value: { type: [String, Number], default: void 0 },
+    precision: { type: Number, default: void 0 },
+    prefix: { type: String, default: void 0 },
+    suffix: { type: String, default: void 0 },
+    groupSeparator: { type: Boolean, default: false },
+    animated: { type: Boolean, default: false },
+    animationDuration: { type: Number, default: void 0 },
+    size: { type: String, default: "md" }
+  },
+  setup(props, { attrs }) {
+    const initialValue = props.animated && tigercatCore.canAnimateStatisticValue(props.value) ? 0 : props.value;
+    const displayValue = vue.ref(initialValue);
+    const currentNumber = vue.ref(tigercatCore.canAnimateStatisticValue(initialValue) ? initialValue : 0);
+    let controller = null;
+    const stopAnimation = () => {
+      controller?.stop();
+      controller = null;
+    };
+    vue.watch(
+      () => [props.value, props.animated, props.animationDuration],
+      () => {
+        stopAnimation();
+        if (!props.animated || !tigercatCore.canAnimateStatisticValue(props.value)) {
+          displayValue.value = props.value;
+          if (tigercatCore.canAnimateStatisticValue(props.value)) currentNumber.value = props.value;
+          return;
+        }
+        controller = tigercatCore.createStatisticNumberAnimation({
+          from: currentNumber.value,
+          to: props.value,
+          duration: props.animationDuration,
+          onUpdate: (next) => {
+            currentNumber.value = next;
+            displayValue.value = next;
+          },
+          onComplete: () => {
+            currentNumber.value = props.value;
+            displayValue.value = props.value;
+            controller = null;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    vue.onBeforeUnmount(stopAnimation);
+    const formatted = vue.computed(
+      () => tigercatCore.formatStatisticValue(displayValue.value, props.precision, props.groupSeparator)
+    );
+    return () => vue.h(
+      "div",
+      {
+        class: tigercatCore.classNames(tigercatCore.statisticBaseClasses, tigercatCore.coerceClassValue(attrs.class))
+      },
+      [
+        props.title ? vue.h("div", { class: tigercatCore.getStatisticTitleClasses(props.size) }, props.title) : null,
+        vue.h("div", { class: tigercatCore.getStatisticValueClasses(props.size) }, [
+          props.prefix ? vue.h("span", { class: tigercatCore.statisticPrefixClasses }, props.prefix) : null,
+          vue.h("span", null, formatted.value),
+          props.suffix ? vue.h("span", { class: tigercatCore.statisticSuffixClasses }, props.suffix) : null
+        ])
+      ]
+    );
+  }
+});
+var Statistic_default = Statistic;
+
+exports.Statistic = Statistic;
+exports.Statistic_default = Statistic_default;

package/dist/{chunk-D2I2NNYI.js → chunk-QV7XYS5P.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunk7VSD3NPI_js = require('./chunk-7VSD3NPI.js');
-var chunkK2U3FEL7_js = require('./chunk-K2U3FEL7.js');
-var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
+var chunkJTTSX3NM_js = require('./chunk-JTTSX3NM.js');
+var chunkGAWIICIB_js = require('./chunk-GAWIICIB.js');
+var chunk5436FG3B_js = require('./chunk-5436FG3B.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -40,26 +40,29 @@ var CropUpload = vue.defineComponent({
       const input = e.target;
       const file = input.files?.[0];
       if (!file) return;
-      if (props.maxSize && file.size > props.maxSize) {
-        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+      const sizeError = tigercatCore.validateUploadFile(file, props.maxSize);
+      if (sizeError) {
+        emit("error", sizeError);
         input.value = "";
         return;
       }
-      const reader = new FileReader();
-      reader.onload = (ev) => {
-        imageSrc.value = ev.target?.result;
+      tigercatCore.readFileAsDataUrl(file).then((url) => {
+        imageSrc.value = url;
         modalVisible.value = true;
-      };
-      reader.readAsDataURL(file);
+      }).catch((err) => emit("error", err));
       input.value = "";
     };
     const handleConfirm = async () => {
       if (!cropperRef.value) return;
       cropping.value = true;
       try {
-        const result = await cropperRef.value.getCropResult();
-        emit("crop-complete", result);
-        modalVisible.value = false;
+        const result = await tigercatCore.getCropperResult(
+          cropperRef.value
+        );
+        if (result) {
+          emit("crop-complete", result);
+          modalVisible.value = false;
+        }
       } catch (err) {
         emit("error", err);
       } finally {
@@ -103,7 +106,7 @@ var CropUpload = vue.defineComponent({
           "aria-label": "Select image to crop and upload",
           "aria-disabled": props.disabled ? "true" : void 0,
           onKeydown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (tigercatCore.isActivationKey(e)) {
               e.preventDefault();
               handleTriggerClick();
             }
@@ -122,7 +125,7 @@ var CropUpload = vue.defineComponent({
           "aria-label": "Select image to crop and upload",
           "aria-disabled": props.disabled ? "true" : void 0,
           onKeydown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (tigercatCore.isActivationKey(e)) {
               e.preventDefault();
               handleTriggerClick();
             }
@@ -151,7 +154,7 @@ var CropUpload = vue.defineComponent({
         ]
       );
       const modal = vue.h(
-        chunk7VSD3NPI_js.Modal,
+        chunkJTTSX3NM_js.Modal,
         {
           open: modalVisible.value,
           size: "lg",
@@ -164,15 +167,15 @@ var CropUpload = vue.defineComponent({
           }
         },
         {
-          default: () => imageSrc.value ? vue.h(chunkK2U3FEL7_js.ImageCropper, {
+          default: () => imageSrc.value ? vue.h(chunkGAWIICIB_js.ImageCropper, {
             ref: cropperRef,
             src: imageSrc.value,
             ...props.cropperProps
           }) : null,
           footer: ({ cancel: _cancel }) => vue.h("div", { class: tigercatCore.modalFooterClasses }, [
-            vue.h(chunkU7CCKZAG_js.Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
+            vue.h(chunk5436FG3B_js.Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
             vue.h(
-              chunkU7CCKZAG_js.Button,
+              chunk5436FG3B_js.Button,
               { onClick: handleConfirm, loading: cropping.value },
               { default: () => "\u786E\u8BA4\u88C1\u526A" }
             )

package/dist/{chunk-R77ZKZ5F.js → chunk-QYSFZA5V.js}

@@ -5,6 +5,93 @@ var tigercatCore = require('@expcat/tigercat-core');
 
 // src/components/Anchor.ts
 var AnchorContextKey = /* @__PURE__ */ Symbol("AnchorContext");
+var AnchorLink = vue.defineComponent({
+  name: "TigerAnchorLink",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Target anchor ID (with #)
+     */
+    href: {
+      type: String,
+      required: true
+    },
+    /**
+     * Link title/text
+     */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Link target attribute
+     */
+    target: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const anchorContext = vue.inject(AnchorContextKey, null);
+    vue.onMounted(() => {
+      anchorContext?.registerLink(props.href);
+    });
+    vue.onBeforeUnmount(() => {
+      anchorContext?.unregisterLink(props.href);
+    });
+    const handleClick = (event) => {
+      event.preventDefault();
+      anchorContext?.handleLinkClick(props.href, event);
+    };
+    const linkClasses = vue.computed(() => {
+      const isActive = anchorContext?.activeLink === props.href;
+      return tigercatCore.classNames(
+        tigercatCore.getAnchorLinkClasses(isActive, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      );
+    });
+    return () => {
+      const slotContent = slots.default?.();
+      const hasNestedLinks = slotContent && Array.isArray(slotContent) && slotContent.some(
+        (vnode) => vnode.type && vnode.type.name === "TigerAnchorLink"
+      );
+      if (hasNestedLinks) {
+        return vue.h("div", { class: "anchor-link-wrapper" }, [
+          vue.h(
+            "a",
+            {
+              ...attrs,
+              href: props.href,
+              target: props.target,
+              class: linkClasses.value,
+              "data-anchor-href": props.href,
+              onClick: handleClick
+            },
+            props.title
+          ),
+          vue.h("div", { class: "pl-3 mt-1 space-y-1" }, slotContent)
+        ]);
+      }
+      const content = slotContent ?? props.title;
+      return vue.h(
+        "a",
+        {
+          ...attrs,
+          href: props.href,
+          target: props.target,
+          class: linkClasses.value,
+          "data-anchor-href": props.href,
+          onClick: handleClick
+        },
+        content
+      );
+    };
+  }
+});
 var Anchor = vue.defineComponent({
   name: "TigerAnchor",
   inheritAttrs: false,
@@ -87,7 +174,6 @@ var Anchor = vue.defineComponent({
     const anchorRef = vue.ref(null);
     const inkRef = vue.ref(null);
     const isScrolling = vue.ref(false);
-    let animationFrameId = null;
     let scrollTimeoutId = null;
     const getContainer = () => props.getContainer();
     const scrollOffset = vue.computed(() => props.targetOffset ?? props.offsetTop);
@@ -99,23 +185,21 @@ var Anchor = vue.defineComponent({
     const unregisterLink = (href) => {
       links.value = links.value.filter((l) => l !== href);
     };
-    const handleScroll = () => {
-      if (isScrolling.value) return;
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      animationFrameId = requestAnimationFrame(() => {
-        const container = getContainer();
-        const newActiveLink = tigercatCore.findActiveAnchor(
-          links.value,
-          container,
-          props.bounds,
-          scrollOffset.value
-        );
-        const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
-        if (finalActiveLink !== activeLink.value) {
-          activeLink.value = finalActiveLink;
-          emit("change", finalActiveLink);
+    let stopObserver = null;
+    const setupObserver = () => {
+      stopObserver?.();
+      const container = getContainer();
+      const root = container === window ? null : container;
+      stopObserver = tigercatCore.createAnchorObserver(links.value, {
+        offsetTop: scrollOffset.value,
+        root,
+        onChange: (newActiveLink) => {
+          if (isScrolling.value) return;
+          const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
+          if (finalActiveLink !== activeLink.value) {
+            activeLink.value = finalActiveLink;
+            emit("change", finalActiveLink);
+          }
         }
       });
     };
@@ -157,22 +241,17 @@ var Anchor = vue.defineComponent({
       updateInkPosition();
     });
     vue.watch(() => props.direction, updateInkPosition);
-    let currentContainer = null;
     vue.onMounted(() => {
       vue.nextTick(() => {
-        currentContainer = getContainer();
-        currentContainer.addEventListener("scroll", handleScroll, { passive: true });
-        handleScroll();
+        setupObserver();
         setTimeout(updateInkPosition, 0);
       });
     });
+    vue.watch([links, scrollOffset, () => props.getContainer], () => {
+      vue.nextTick(() => setupObserver());
+    });
     vue.onBeforeUnmount(() => {
-      if (currentContainer) {
-        currentContainer.removeEventListener("scroll", handleScroll);
-      }
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-      }
+      stopObserver?.();
       if (scrollTimeoutId !== null) {
         clearTimeout(scrollTimeoutId);
       }
@@ -248,4 +327,5 @@ var Anchor_default = Anchor;
 
 exports.Anchor = Anchor;
 exports.AnchorContextKey = AnchorContextKey;
+exports.AnchorLink = AnchorLink;
 exports.Anchor_default = Anchor_default;