@expcat/tigercat-vue 0.1.8 → 0.2.0

package/dist/chunk-24F6NL3G.js

@@ -0,0 +1,462 @@
+'use strict';
+
+var chunkJFZDIY7D_js = require('./chunk-JFZDIY7D.js');
+var chunk5PXTMXXS_js = require('./chunk-5PXTMXXS.js');
+var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunk57MJTNDL_js = require('./chunk-57MJTNDL.js');
+var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
+var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var LineChart = vue.defineComponent({
+  name: "TigerLineChart",
+  props: {
+    width: {
+      type: Number,
+      default: 320
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    padding: {
+      type: [Number, Object],
+      default: 24
+    },
+    data: {
+      type: Array
+    },
+    series: {
+      type: Array
+    },
+    xScale: {
+      type: Object
+    },
+    yScale: {
+      type: Object
+    },
+    lineColor: {
+      type: String,
+      default: "var(--tiger-primary,#2563eb)"
+    },
+    strokeWidth: {
+      type: Number,
+      default: 2
+    },
+    curve: {
+      type: String,
+      default: "linear"
+    },
+    showPoints: {
+      type: Boolean,
+      default: true
+    },
+    pointSize: {
+      type: Number,
+      default: 4
+    },
+    pointColor: {
+      type: String
+    },
+    showGrid: {
+      type: Boolean,
+      default: true
+    },
+    showAxis: {
+      type: Boolean,
+      default: true
+    },
+    showXAxis: {
+      type: Boolean,
+      default: true
+    },
+    showYAxis: {
+      type: Boolean,
+      default: true
+    },
+    includeZero: {
+      type: Boolean,
+      default: false
+    },
+    xAxisLabel: {
+      type: String
+    },
+    yAxisLabel: {
+      type: String
+    },
+    xTicks: {
+      type: Number,
+      default: 5
+    },
+    yTicks: {
+      type: Number,
+      default: 5
+    },
+    xTickValues: {
+      type: Array
+    },
+    yTickValues: {
+      type: Array
+    },
+    xTickFormat: {
+      type: Function
+    },
+    yTickFormat: {
+      type: Function
+    },
+    gridLineStyle: {
+      type: String,
+      default: "solid"
+    },
+    gridStrokeWidth: {
+      type: Number,
+      default: 1
+    },
+    colors: {
+      type: Array
+    },
+    // Interaction props
+    hoverable: {
+      type: Boolean,
+      default: false
+    },
+    hoveredIndex: {
+      type: Number,
+      default: void 0
+    },
+    activeOpacity: {
+      type: Number,
+      default: 1
+    },
+    inactiveOpacity: {
+      type: Number,
+      default: 0.25
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    selectedIndex: {
+      type: Number,
+      default: void 0
+    },
+    // Legend props
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendPosition: {
+      type: String,
+      default: "bottom"
+    },
+    legendMarkerSize: {
+      type: Number,
+      default: 10
+    },
+    legendGap: {
+      type: Number,
+      default: 8
+    },
+    // Tooltip props
+    showTooltip: {
+      type: Boolean,
+      default: true
+    },
+    tooltipFormatter: {
+      type: Function
+    },
+    legendFormatter: {
+      type: Function
+    },
+    // Accessibility
+    title: {
+      type: String
+    },
+    desc: {
+      type: String
+    },
+    className: {
+      type: String
+    }
+  },
+  emits: [
+    "update:hoveredIndex",
+    "update:selectedIndex",
+    "series-click",
+    "series-hover",
+    "point-click",
+    "point-hover"
+  ],
+  setup(props, { emit }) {
+    const hoveredPointInfo = vue.ref(null);
+    const tooltipPosition = vue.ref({ x: 0, y: 0 });
+    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
+    const resolvedSeries = vue.computed(() => {
+      if (props.series && props.series.length > 0) return props.series;
+      if (props.data && props.data.length > 0) return [{ data: props.data }];
+      return [];
+    });
+    const {
+      activeIndex,
+      handleMouseEnter: handleSeriesHoverEnter,
+      handleMouseLeave: handleSeriesHoverLeave,
+      handleClick: handleSeriesSelect,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave,
+      wrapperClasses
+    } = chunkJFZDIY7D_js.useChartInteraction({
+      hoverable: vue.computed(() => props.hoverable),
+      hoveredIndexProp: props.hoveredIndex,
+      selectable: vue.computed(() => props.selectable),
+      selectedIndexProp: props.selectedIndex,
+      activeOpacity: vue.computed(() => props.activeOpacity),
+      inactiveOpacity: vue.computed(() => props.inactiveOpacity),
+      legendPosition: vue.computed(() => props.legendPosition),
+      emit,
+      getData: (index) => resolvedSeries.value[index],
+      eventNames: {
+        hover: "series-hover",
+        click: "series-click"
+      }
+    });
+    const allData = vue.computed(() => resolvedSeries.value.flatMap((s) => s.data));
+    const xValues = vue.computed(() => allData.value.map((d) => d.x));
+    const yValues = vue.computed(() => allData.value.map((d) => d.y));
+    const isXNumeric = vue.computed(() => xValues.value.every((v) => typeof v === "number"));
+    const resolvedXScale = vue.computed(() => {
+      if (props.xScale) return props.xScale;
+      if (isXNumeric.value) {
+        const extent = tigercatCore.getNumberExtent(xValues.value, { includeZero: false });
+        return tigercatCore.createLinearScale(extent, [0, innerRect.value.width]);
+      } else {
+        const categories = [...new Set(xValues.value.map(String))];
+        return tigercatCore.createPointScale(categories, [0, innerRect.value.width], { padding: 0.1 });
+      }
+    });
+    const resolvedYScale = vue.computed(() => {
+      if (props.yScale) return props.yScale;
+      const extent = tigercatCore.getNumberExtent(yValues.value, { includeZero: props.includeZero });
+      return tigercatCore.createLinearScale(extent, [innerRect.value.height, 0]);
+    });
+    const showXAxis = vue.computed(() => props.showAxis && props.showXAxis);
+    const showYAxis = vue.computed(() => props.showAxis && props.showYAxis);
+    const palette = vue.computed(
+      () => props.colors && props.colors.length > 0 ? props.colors : [...tigercatCore.DEFAULT_CHART_COLORS]
+    );
+    const seriesData = vue.computed(
+      () => resolvedSeries.value.map((series, seriesIndex) => {
+        const color = series.color ?? palette.value[seriesIndex % palette.value.length];
+        const points = series.data.map((datum, pointIndex) => ({
+          x: resolvedXScale.value.map(datum.x),
+          y: resolvedYScale.value.map(datum.y),
+          datum,
+          pointIndex
+        }));
+        const linePath = tigercatCore.createLinePath(points, props.curve);
+        const opacity = tigercatCore.getChartElementOpacity(seriesIndex, activeIndex.value, {
+          activeOpacity: props.activeOpacity,
+          inactiveOpacity: props.inactiveOpacity
+        });
+        return {
+          series,
+          seriesIndex,
+          color,
+          linePath,
+          points,
+          opacity,
+          strokeWidth: series.strokeWidth ?? props.strokeWidth,
+          strokeDasharray: series.strokeDasharray,
+          showPoints: series.showPoints ?? props.showPoints,
+          pointSize: series.pointSize ?? props.pointSize,
+          pointColor: series.pointColor ?? color
+        };
+      })
+    );
+    const legendItems = vue.computed(
+      () => resolvedSeries.value.map((series, index) => ({
+        index,
+        label: props.legendFormatter ? props.legendFormatter(series, index) : series.name ?? `Series ${index + 1}`,
+        color: series.color ?? palette.value[index % palette.value.length],
+        active: activeIndex.value === null || activeIndex.value === index
+      }))
+    );
+    const formatTooltip = vue.computed(
+      () => props.tooltipFormatter ?? ((datum, seriesIndex, _pointIndex, series) => {
+        const seriesName = series?.name ?? `Series ${seriesIndex + 1}`;
+        const label = datum.label ?? String(datum.x);
+        return `${seriesName} \xB7 ${label}: ${datum.y}`;
+      })
+    );
+    const tooltipContent = vue.computed(() => {
+      if (!hoveredPointInfo.value) return "";
+      const { seriesIndex, pointIndex } = hoveredPointInfo.value;
+      const series = resolvedSeries.value[seriesIndex];
+      const datum = series?.data[pointIndex];
+      return datum ? formatTooltip.value(datum, seriesIndex, pointIndex, series) : "";
+    });
+    const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
+      hoveredPointInfo.value = { seriesIndex, pointIndex };
+      tooltipPosition.value = { x: event.clientX, y: event.clientY };
+      emit(
+        "point-hover",
+        seriesIndex,
+        pointIndex,
+        resolvedSeries.value[seriesIndex]?.data[pointIndex]
+      );
+    };
+    const handlePointMouseMove = (event) => {
+      tooltipPosition.value = { x: event.clientX, y: event.clientY };
+    };
+    const handlePointMouseLeave = () => {
+      hoveredPointInfo.value = null;
+      emit("point-hover", null, null, null);
+    };
+    const handlePointClick = (seriesIndex, pointIndex) => {
+      emit(
+        "point-click",
+        seriesIndex,
+        pointIndex,
+        resolvedSeries.value[seriesIndex]?.data[pointIndex]
+      );
+      handleSeriesSelect(seriesIndex);
+    };
+    const handleKeyDown = (event, seriesIndex) => {
+      if (!props.selectable) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      handleSeriesSelect(seriesIndex);
+    };
+    return () => {
+      const chart = vue.h(
+        chunkFCV4ML6I_js.ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          title: props.title,
+          desc: props.desc,
+          className: tigercatCore.classNames(props.className)
+        },
+        {
+          default: () => [
+            props.showGrid ? vue.h(chunk57MJTNDL_js.ChartGrid, {
+              xScale: resolvedXScale.value,
+              yScale: resolvedYScale.value,
+              show: "both",
+              xTicks: props.xTicks,
+              yTicks: props.yTicks,
+              xTickValues: props.xTickValues,
+              yTickValues: props.yTickValues,
+              lineStyle: props.gridLineStyle,
+              strokeWidth: props.gridStrokeWidth
+            }) : null,
+            showXAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
+              scale: resolvedXScale.value,
+              orientation: "bottom",
+              y: innerRect.value.height,
+              ticks: props.xTicks,
+              tickValues: props.xTickValues,
+              tickFormat: props.xTickFormat,
+              label: props.xAxisLabel
+            }) : null,
+            showYAxis.value ? vue.h(chunk5PXTMXXS_js.ChartAxis, {
+              scale: resolvedYScale.value,
+              orientation: "left",
+              ticks: props.yTicks,
+              tickValues: props.yTickValues,
+              tickFormat: props.yTickFormat,
+              label: props.yAxisLabel
+            }) : null,
+            // Render each series
+            ...seriesData.value.map(
+              (sd) => vue.h(
+                chunkHBFFINAI_js.ChartSeries,
+                {
+                  key: `series-${sd.seriesIndex}`,
+                  data: sd.series.data,
+                  name: sd.series.name,
+                  type: "line",
+                  opacity: sd.opacity,
+                  class: tigercatCore.classNames(
+                    sd.series.className,
+                    (props.hoverable || props.selectable) && "cursor-pointer"
+                  ),
+                  onMouseenter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
+                  onMouseleave: handleSeriesHoverLeave,
+                  onClick: () => handleSeriesSelect(sd.seriesIndex),
+                  tabindex: props.selectable ? 0 : void 0,
+                  onKeydown: (e) => handleKeyDown(e, sd.seriesIndex)
+                },
+                {
+                  default: () => [
+                    // Line path
+                    vue.h("path", {
+                      d: sd.linePath,
+                      fill: "none",
+                      stroke: sd.color,
+                      "stroke-width": sd.strokeWidth,
+                      "stroke-dasharray": sd.strokeDasharray,
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      class: "transition-opacity duration-150",
+                      "data-line-series": sd.seriesIndex
+                    }),
+                    // Data points
+                    sd.showPoints ? sd.points.map(
+                      (point) => vue.h("circle", {
+                        key: `point-${sd.seriesIndex}-${point.pointIndex}`,
+                        cx: point.x,
+                        cy: point.y,
+                        r: sd.pointSize,
+                        fill: sd.pointColor,
+                        class: "transition-all duration-150 hover:r-[6]",
+                        "data-point-index": point.pointIndex,
+                        onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                        onMousemove: handlePointMouseMove,
+                        onMouseleave: handlePointMouseLeave,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handlePointClick(sd.seriesIndex, point.pointIndex);
+                        }
+                      })
+                    ) : null
+                  ]
+                }
+              )
+            )
+          ].filter(Boolean)
+        }
+      );
+      const tooltip = props.showTooltip ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+        content: tooltipContent.value,
+        visible: hoveredPointInfo.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      if (!props.showLegend) {
+        return vue.h("div", { class: "inline-block relative" }, [chart, tooltip]);
+      }
+      return vue.h("div", { class: wrapperClasses.value }, [
+        chart,
+        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+          items: legendItems.value,
+          position: props.legendPosition,
+          markerSize: props.legendMarkerSize,
+          gap: props.legendGap,
+          interactive: props.hoverable || props.selectable,
+          onItemClick: handleLegendClick,
+          onItemHover: handleLegendHover,
+          onItemLeave: handleLegendLeave
+        }),
+        tooltip
+      ]);
+    };
+  }
+});
+var LineChart_default = LineChart;
+
+exports.LineChart = LineChart;
+exports.LineChart_default = LineChart_default;

package/dist/{chunk-LIZZ35NQ.mjs → chunk-25P4HFCO.mjs}

@@ -1,6 +1,6 @@
 import { Button } from './chunk-YMIO4A2U.mjs';
 import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, h, Teleport } from 'vue';
-import { getModalContentClasses, getModalContainerClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, classNames, coerceClassValue, mergeStyleValues, modalHeaderClasses, modalTitleClasses, resolveLocaleText, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, modalMaskClasses } from '@expcat/tigercat-core';
+import { getModalContentClasses, getModalContainerClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, classNames, coerceClassValue, mergeStyleValues, modalHeaderClasses, modalTitleClasses, resolveLocaleText, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, modalMaskClasses, getFocusableElements, getFocusTrapNavigation } from '@expcat/tigercat-core';
 
 var modalIdCounter = 0;
 var createModalId = () => `tiger-modal-${++modalIdCounter}`;
@@ -179,16 +179,25 @@ var Modal = defineComponent({
         handleClose();
       }
     };
-    const handleEscKey = (event) => {
+    const handleKeyDown = (event) => {
       if (event.key === "Escape" && props.visible) {
         handleClose();
+        return;
+      }
+      if (event.key === "Tab" && props.visible && dialogRef.value) {
+        const focusables = getFocusableElements(dialogRef.value);
+        const result = getFocusTrapNavigation(event, focusables, document.activeElement);
+        if (result.shouldHandle && result.next) {
+          event.preventDefault();
+          result.next.focus();
+        }
       }
     };
     onMounted(() => {
-      document.addEventListener("keydown", handleEscKey);
+      document.addEventListener("keydown", handleKeyDown);
     });
     onBeforeUnmount(() => {
-      document.removeEventListener("keydown", handleEscKey);
+      document.removeEventListener("keydown", handleKeyDown);
     });
     watch(
       () => props.visible,

package/dist/chunk-264DR3I2.mjs

@@ -0,0 +1,122 @@
+import { ref, computed } from 'vue';
+import { classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+
+// src/composables/useChartInteraction.ts
+function unref(value) {
+  return value?.value !== void 0 ? value.value : value;
+}
+function useChartInteraction(options) {
+  const { emit, getData, eventNames } = options;
+  const localHoveredIndex = ref(null);
+  const localSelectedIndex = ref(null);
+  const tooltipPosition = ref({ x: 0, y: 0 });
+  const resolvedHoveredIndex = computed(
+    () => options.hoveredIndexProp !== void 0 ? options.hoveredIndexProp : localHoveredIndex.value
+  );
+  const resolvedSelectedIndex = computed(
+    () => options.selectedIndexProp !== void 0 ? options.selectedIndexProp : localSelectedIndex.value
+  );
+  const activeIndex = computed(() => {
+    if (resolvedSelectedIndex.value !== null) return resolvedSelectedIndex.value;
+    if (unref(options.hoverable) && resolvedHoveredIndex.value !== null) {
+      return resolvedHoveredIndex.value;
+    }
+    return null;
+  });
+  const getElementOpacity = (index) => {
+    return getChartElementOpacity(index, activeIndex.value, {
+      activeOpacity: unref(options.activeOpacity),
+      inactiveOpacity: unref(options.inactiveOpacity)
+    });
+  };
+  const handleMouseEnter = (index, event) => {
+    if (!unref(options.hoverable)) return;
+    if (options.hoveredIndexProp === void 0) {
+      localHoveredIndex.value = index;
+    }
+    tooltipPosition.value = { x: event.clientX, y: event.clientY };
+    emit("update:hoveredIndex", index);
+    if (eventNames?.hover && getData) {
+      emit(eventNames.hover, index, getData(index));
+    }
+  };
+  const handleMouseMove = (event) => {
+    tooltipPosition.value = { x: event.clientX, y: event.clientY };
+  };
+  const handleMouseLeave = () => {
+    if (!unref(options.hoverable)) return;
+    if (options.hoveredIndexProp === void 0) {
+      localHoveredIndex.value = null;
+    }
+    emit("update:hoveredIndex", null);
+    if (eventNames?.hover) {
+      emit(eventNames.hover, null, null);
+    }
+  };
+  const handleClick = (index) => {
+    if (!unref(options.selectable)) return;
+    const nextIndex = resolvedSelectedIndex.value === index ? null : index;
+    if (options.selectedIndexProp === void 0) {
+      localSelectedIndex.value = nextIndex;
+    }
+    emit("update:selectedIndex", nextIndex);
+    if (eventNames?.click && getData) {
+      emit(eventNames.click, index, getData(index));
+    }
+  };
+  const handleKeyDown = (event, index) => {
+    if (!unref(options.selectable)) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    handleClick(index);
+  };
+  const handleLegendClick = (index) => {
+    handleClick(index);
+  };
+  const handleLegendHover = (index) => {
+    if (!unref(options.hoverable)) return;
+    if (options.hoveredIndexProp === void 0) {
+      localHoveredIndex.value = index;
+    }
+    emit("update:hoveredIndex", index);
+  };
+  const handleLegendLeave = () => {
+    handleMouseLeave();
+  };
+  const wrapperClasses = computed(() => {
+    const position = unref(options.legendPosition) ?? "bottom";
+    return classNames(
+      "inline-flex",
+      position === "right" ? "flex-row items-start gap-4" : position === "left" ? "flex-row-reverse items-start gap-4" : position === "top" ? "flex-col-reverse gap-2" : "flex-col gap-2"
+    );
+  });
+  const createLegendItems = (items, palette, labelFormatter) => {
+    return items.map((item, index) => ({
+      index,
+      label: labelFormatter ? labelFormatter(item, index) : item.label ?? String(item.x ?? index),
+      color: item.color ?? palette[index % palette.length],
+      active: activeIndex.value === null || activeIndex.value === index
+    }));
+  };
+  return {
+    localHoveredIndex,
+    localSelectedIndex,
+    tooltipPosition,
+    resolvedHoveredIndex,
+    resolvedSelectedIndex,
+    activeIndex,
+    getElementOpacity,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses,
+    createLegendItems
+  };
+}
+
+export { useChartInteraction };

package/dist/{chunk-6IXWIYWS.mjs → chunk-2EMI5OHM.mjs}

@@ -1,6 +1,6 @@
-import { useVueEscapeKey } from './chunk-FIPIHUJQ.mjs';
+import { useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
 import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h, Teleport } from 'vue';
-import { captureActiveElement, focusFirst, restoreFocus, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, coerceClassValue, mergeStyleValues, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, resolveLocaleText, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { captureActiveElement, focusFirst, restoreFocus, ANIMATION_DURATION_MS, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, coerceClassValue, mergeStyleValues, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, resolveLocaleText, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, getFocusableElements, getFocusTrapNavigation } from '@expcat/tigercat-core';
 
 var drawerIdCounter = 0;
 var createDrawerId = () => `tiger-drawer-${++drawerIdCounter}`;
@@ -153,14 +153,26 @@ var Drawer = defineComponent({
     };
     const escapeEnabled = computed(() => props.visible);
     let cleanupEscape;
+    const handleKeyDown = (event) => {
+      if (event.key === "Tab" && props.visible && dialogRef.value) {
+        const focusables = getFocusableElements(dialogRef.value);
+        const result = getFocusTrapNavigation(event, focusables, document.activeElement);
+        if (result.shouldHandle && result.next) {
+          event.preventDefault();
+          result.next.focus();
+        }
+      }
+    };
     onMounted(() => {
       cleanupEscape = useVueEscapeKey({
         enabled: escapeEnabled,
         onEscape: handleClose
       });
+      document.addEventListener("keydown", handleKeyDown);
     });
     onBeforeUnmount(() => {
       cleanupEscape?.();
+      document.removeEventListener("keydown", handleKeyDown);
     });
     watch(
       () => props.visible,
@@ -181,14 +193,14 @@ var Drawer = defineComponent({
           if (!nextVisible) return;
           const timer2 = window.setTimeout(() => {
             emit("after-enter");
-          }, 300);
+          }, ANIMATION_DURATION_MS);
           onCleanup(() => window.clearTimeout(timer2));
           return;
         }
         if (nextVisible === prevVisible) return;
         const timer = window.setTimeout(() => {
           emit(nextVisible ? "after-enter" : "after-leave");
-        }, 300);
+        }, ANIMATION_DURATION_MS);
         onCleanup(() => window.clearTimeout(timer));
       },
       { immediate: true }