@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-3CDAG4HD.mjs → chunk-6QML6T3Y.mjs}

@@ -1,5 +1,5 @@
-import { useState, useMemo, useCallback } from 'react';
-import { getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { createChartPointerMoveScheduler, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
 
 // src/hooks/useChartInteraction.ts
 function useChartInteraction(options) {
@@ -19,6 +19,16 @@ function useChartInteraction(options) {
   const [localHoveredIndex, setLocalHoveredIndex] = useState(null);
   const [localSelectedIndex, setLocalSelectedIndex] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const tooltipSchedulerRef = useRef(null);
+  if (tooltipSchedulerRef.current === null) {
+    tooltipSchedulerRef.current = createChartPointerMoveScheduler({
+      onPositionChange: setTooltipPosition
+    });
+  }
+  const tooltipScheduler = tooltipSchedulerRef.current;
+  useEffect(() => {
+    return () => tooltipScheduler.cancel();
+  }, [tooltipScheduler]);
   const resolvedHoveredIndex = hoveredIndexProp !== void 0 ? hoveredIndexProp : localHoveredIndex;
   const resolvedSelectedIndex = selectedIndexProp !== void 0 ? selectedIndexProp : localSelectedIndex;
   const activeIndex = useMemo(() => {
@@ -49,17 +59,21 @@ function useChartInteraction(options) {
     },
     [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
   );
-  const handleMouseMove = useCallback((event) => {
-    setTooltipPosition({ x: event.clientX, y: event.clientY });
-  }, []);
+  const handleMouseMove = useCallback(
+    (event) => {
+      tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
+    },
+    [tooltipScheduler]
+  );
   const handleMouseLeave = useCallback(() => {
+    tooltipScheduler.cancel();
     if (!hoverable) return;
     if (hoveredIndexProp === void 0) {
       setLocalHoveredIndex(null);
     }
     onHoveredIndexChange?.(null);
     callbacks?.onHover?.(null, null);
-  }, [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  }, [hoverable, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
   const handleClick = useCallback(
     (index) => {
       if (!selectable) return;

package/dist/{chunk-BALJCZ62.mjs → chunk-6QQBMZQ6.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useCallback, useMemo } from 'react';
-import { classNames, resizableBaseClasses, defaultResizeHandles, getResizableHandleClasses, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { createDocumentDragSession, classNames, resizableBaseClasses, defaultResizeHandles, getResizableHandleClasses, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Resizable.tsx
@@ -24,11 +24,18 @@ var Resizable = ({
   const [width, setWidth] = useState(defaultWidth);
   const [height, setHeight] = useState(defaultHeight);
   const [draggingHandle, setDraggingHandle] = useState(null);
+  const dragSessionRef = useRef(null);
   const dragRef = useRef(null);
+  const cleanupDragSession = useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
+  useEffect(() => cleanupDragSession, [cleanupDragSession]);
   const handleMouseDown = useCallback(
     (handle, e) => {
       if (disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       const sw = width ?? 0;
       const sh = height ?? 0;
       dragRef.current = {
@@ -40,11 +47,11 @@ var Resizable = ({
       };
       setDraggingHandle(handle);
       onResizeStart?.({ width: sw, height: sh, handle, deltaX: 0, deltaY: 0 });
-      const onMouseMove = (ev) => {
+      const calculateResize = (currentX, currentY) => {
         const drag = dragRef.current;
-        if (!drag) return;
-        const mouseDeltaX = ev.clientX - drag.startX;
-        const mouseDeltaY = ev.clientY - drag.startY;
+        if (!drag) return null;
+        const mouseDeltaX = currentX - drag.startX;
+        const mouseDeltaY = currentY - drag.startY;
         const { deltaWidth, deltaHeight } = calculateResizeDelta(
           drag.handle,
           mouseDeltaX,
@@ -59,50 +66,33 @@ var Resizable = ({
           newH = ar.height;
         }
         const clamped = clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
-        setWidth(clamped.width);
-        setHeight(clamped.height);
-        onResize?.({
+        return {
           width: clamped.width,
           height: clamped.height,
           handle: drag.handle,
           deltaX: clamped.width - drag.startW,
           deltaY: clamped.height - drag.startH
-        });
+        };
       };
-      const onMouseUp = (ev) => {
-        const drag = dragRef.current;
-        if (drag) {
-          const mouseDeltaX = ev.clientX - drag.startX;
-          const mouseDeltaY = ev.clientY - drag.startY;
-          const { deltaWidth, deltaHeight } = calculateResizeDelta(
-            drag.handle,
-            mouseDeltaX,
-            mouseDeltaY,
-            axis
-          );
-          let newW = drag.startW + deltaWidth;
-          let newH = drag.startH + deltaHeight;
-          if (lockAspectRatio) {
-            const ar = applyAspectRatio(newW, newH, drag.startW, drag.startH);
-            newW = ar.width;
-            newH = ar.height;
-          }
-          const clamped = clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
-          onResizeEnd?.({
-            width: clamped.width,
-            height: clamped.height,
-            handle: drag.handle,
-            deltaX: clamped.width - drag.startW,
-            deltaY: clamped.height - drag.startH
-          });
+      dragSessionRef.current = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const next = calculateResize(currentX, currentY);
+          if (!next) return;
+          setWidth(next.width);
+          setHeight(next.height);
+          onResize?.(next);
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const next = calculateResize(currentX, currentY);
+          if (next) onResizeEnd?.(next);
+          dragRef.current = null;
+          dragSessionRef.current = null;
+          setDraggingHandle(null);
         }
-        dragRef.current = null;
-        setDraggingHandle(null);
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      });
     },
     [
       disabled,
@@ -114,6 +104,7 @@ var Resizable = ({
       minHeight,
       maxWidth,
       maxHeight,
+      cleanupDragSession,
       onResizeStart,
       onResize,
       onResizeEnd

package/dist/{chunk-2XOFRGY6.js → chunk-6YBLWFP5.js}

@@ -17,13 +17,45 @@ var ConfigProvider = ({
   children
 }) => {
   const parent = React.useContext(TigerConfigContext);
+  const isLazy = tigercatCore.isLazyTigerLocale(locale);
+  const immediateLocale = isLazy ? void 0 : tigercatCore.getImmediateTigerLocale(locale);
+  const [resolvedLocale, setResolvedLocale] = React.useState(
+    immediateLocale
+  );
+  const [localeLoading, setLocaleLoading] = React.useState(isLazy);
+  React.useEffect(() => {
+    if (!tigercatCore.isLazyTigerLocale(locale)) {
+      setResolvedLocale(tigercatCore.getImmediateTigerLocale(locale));
+      setLocaleLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLocaleLoading(true);
+    tigercatCore.resolveTigerLocale(locale).then(
+      (result) => {
+        if (!cancelled) {
+          setResolvedLocale(result);
+          setLocaleLoading(false);
+        }
+      },
+      () => {
+        if (!cancelled) {
+          setLocaleLoading(false);
+        }
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [locale]);
   const value = React.useMemo(() => {
     return {
-      locale: tigercatCore.mergeTigerLocale(parent.locale, locale),
+      locale: tigercatCore.mergeTigerLocale(parent.locale, resolvedLocale),
+      localeLoading: localeLoading || parent.localeLoading,
       theme: theme ?? parent.theme,
       colorScheme: colorScheme ?? parent.colorScheme
     };
-  }, [parent.locale, locale, theme, parent.theme, colorScheme, parent.colorScheme]);
+  }, [parent.locale, resolvedLocale, localeLoading, parent.localeLoading, theme, parent.theme, colorScheme, parent.colorScheme]);
   React.useEffect(() => {
     if (value.theme) tigercatCore.ThemeManager.setTheme(value.theme);
   }, [value.theme]);

package/dist/{chunk-VILZFNR7.js → chunk-7KNOOFRA.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
-var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunkWV5XHYW6_js = require('./chunk-WV5XHYW6.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
-var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
 var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
 var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -54,9 +54,11 @@ var AreaChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
-  gradient = false,
+  gradient = true,
   animated = false,
   pointHollow = false,
+  strokeGradient = false,
+  pointGradient = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -89,7 +91,7 @@ var AreaChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -138,9 +140,14 @@ var AreaChart = ({
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const seriesKeys = react.useMemo(
+    () => tigercatCore.buildChartSeriesKeys(resolvedSeries, { prefix: "area-" }),
+    [resolvedSeries]
+  );
   const seriesData = react.useMemo(() => {
     const stackedData = stacked ? tigercatCore.stackSeriesData(resolvedSeries.map((s) => s.data)) : null;
     return resolvedSeries.map((s, seriesIndex) => {
+      const seriesKey = seriesKeys[seriesIndex];
       const color = s.color ?? palette[seriesIndex % palette.length];
       const seriesFillColor = s.fillColor ?? color;
       const seriesFillOpacity = s.fillOpacity ?? fillOpacity;
@@ -181,6 +188,7 @@ var AreaChart = ({
       return {
         series: s,
         seriesIndex,
+        seriesKey,
         color,
         fillColor: seriesFillColor,
         fillOpacity: seriesFillOpacity,
@@ -198,6 +206,7 @@ var AreaChart = ({
     });
   }, [
     resolvedSeries,
+    seriesKeys,
     palette,
     resolvedXScale,
     resolvedYScale,
@@ -265,7 +274,7 @@ var AreaChart = ({
   );
   const reversedSeriesData = react.useMemo(() => [...seriesData].reverse(), [seriesData]);
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -274,7 +283,7 @@ var AreaChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
-        (gradient || animated) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+        (gradient || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
               .tiger-area-animated {
                 animation: tiger-area-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
@@ -287,7 +296,7 @@ var AreaChart = ({
           gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
             "linearGradient",
             {
-              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              id: `${gradientPrefix}-${sd.seriesKey}`,
               x1: "0",
               y1: "0",
               x2: "0",
@@ -297,7 +306,44 @@ var AreaChart = ({
                 /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: sd.fillColor, stopOpacity: 0.02 })
               ]
             },
-            `area-grad-${sd.seriesIndex}`
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "radialGradient",
+            {
+              id: `${gradientPrefix}-point-${sd.seriesKey}`,
+              cx: "0.5",
+              cy: "0.5",
+              r: "0.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: sd.color }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                  }
+                )
+              ]
+            },
+            `point-grad-${sd.seriesKey}`
+          )),
+          strokeGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: sd.color }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
+              ]
+            },
+            `stroke-grad-${sd.seriesKey}`
           ))
         ] }),
         showGrid && /* @__PURE__ */ jsxRuntime.jsx(
@@ -344,6 +390,7 @@ var AreaChart = ({
             name: sd.series.name,
             type: "area",
             opacity: sd.opacity,
+            "data-series-key": sd.seriesKey,
             className: tigercatCore.classNames(
               sd.series.className,
               (hoverable || selectable) && "cursor-pointer",
@@ -359,11 +406,12 @@ var AreaChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
                   fillOpacity: gradient ? 1 : sd.fillOpacity,
                   stroke: "none",
                   className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex
+                  "data-area-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -371,7 +419,7 @@ var AreaChart = ({
                 {
                   d: sd.linePath,
                   fill: "none",
-                  stroke: sd.color,
+                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                   strokeWidth: sd.strokeWidth,
                   strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                   strokeDashoffset: animated ? "1" : void 0,
@@ -386,10 +434,10 @@ var AreaChart = ({
               )
             ]
           },
-          `series-${sd.seriesIndex}`
+          sd.seriesKey
         )),
         seriesData.map(
-          (sd) => sd.showPoints && /* @__PURE__ */ jsxRuntime.jsx("g", { opacity: sd.opacity, children: sd.points.map((point) => {
+          (sd) => sd.showPoints && /* @__PURE__ */ jsxRuntime.jsx("g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
             const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
             const hoverSize = sd.pointSize + 2;
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -398,12 +446,13 @@ var AreaChart = ({
                 cx: point.x,
                 cy: point.y,
                 r: isHovered ? hoverSize : sd.pointSize,
-                fill: sd.pointHollow ? "white" : sd.pointColor,
+                fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                 stroke: sd.pointHollow ? sd.pointColor : "none",
                 strokeWidth: sd.pointHollow ? 2 : 0,
-                className: "transition-all duration-200 ease-out",
+                className: 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,
@@ -412,15 +461,15 @@ var AreaChart = ({
                   handlePointClick(sd.seriesIndex, point.pointIndex);
                 }
               },
-              `point-${sd.seriesIndex}-${point.pointIndex}`
+              `point-${sd.seriesKey}-${point.pointIndex}`
             );
-          }) }, `points-${sd.seriesIndex}`)
+          }) }, `points-${sd.seriesKey}`)
         )
       ]
     }
   );
   const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoveredPointInfo !== null && tooltipContent !== "",
@@ -437,7 +486,7 @@ var AreaChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-ET5YJELZ.js → chunk-7P4MIU6I.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkWVVXZKNI_js = require('./chunk-WVVXZKNI.js');
-var chunkBCNKTT5C_js = require('./chunk-BCNKTT5C.js');
+var chunkGRXBGL6Q_js = require('./chunk-GRXBGL6Q.js');
 var chunkVCULFIZ5_js = require('./chunk-VCULFIZ5.js');
 var chunkUF3DXKCI_js = require('./chunk-UF3DXKCI.js');
 var chunkCI2WHAT2_js = require('./chunk-CI2WHAT2.js');
@@ -85,7 +85,7 @@ var CommentThread = ({
   const ACTION_BTN = `${BTN_BASE} text-gray-400 hover:text-gray-600 font-normal hover:bg-gray-50`;
   const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-medium hover:bg-[var(--tiger-primary,#2563eb)]/5`;
   const renderActionButton = (label, key, onClick, active) => /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBCNKTT5C_js.Button,
+    chunkGRXBGL6Q_js.Button,
     {
       size: "sm",
       variant: "ghost",
@@ -135,7 +135,7 @@ var CommentThread = ({
         const actionKey = action.key ?? `${node.id}-action-${index}`;
         actions.push(
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBCNKTT5C_js.Button,
+            chunkGRXBGL6Q_js.Button,
             {
               size: "sm",
               variant: action.variant ?? "ghost",
@@ -180,7 +180,7 @@ var CommentThread = ({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-1.5 mb-2", children: node.content }),
             actions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1", children: actions }) : null,
-            replyingTo === node.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-lg", children: [
+            replyingTo === node.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-[var(--tiger-radius-md,0.5rem)]", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 chunkWVVXZKNI_js.Textarea,
                 {
@@ -193,7 +193,7 @@ var CommentThread = ({
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-end", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkBCNKTT5C_js.Button,
+                  chunkGRXBGL6Q_js.Button,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -204,11 +204,11 @@ var CommentThread = ({
                     children: cancelReplyText
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(chunkBCNKTT5C_js.Button, { size: "sm", variant: "primary", onClick: () => handleReplySubmit(node), children: replyButtonText })
+                /* @__PURE__ */ jsxRuntime.jsx(chunkGRXBGL6Q_js.Button, { size: "sm", variant: "primary", onClick: () => handleReplySubmit(node), children: replyButtonText })
               ] })
             ] }) : null,
             hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkBCNKTT5C_js.Button,
+              chunkGRXBGL6Q_js.Button,
               {
                 size: "sm",
                 variant: "ghost",
@@ -229,7 +229,7 @@ var CommentThread = ({
                     (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
                   ),
                   showLoadMoreBtn ? /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkBCNKTT5C_js.Button,
+                    chunkGRXBGL6Q_js.Button,
                     {
                       size: "sm",
                       variant: "ghost",
@@ -251,6 +251,7 @@ var CommentThread = ({
     "div",
     {
       className: tigercatCore.classNames("tiger-comment-thread flex flex-col", className),
+      role: divProps.role ?? "feed",
       "data-tiger-comment-thread": true,
       "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : "\u8BC4\u8BBA\u7EBF\u7A0B"),
       ...divProps,

package/dist/{chunk-5CGXFQND.mjs → chunk-7Y5XUZJ4.mjs}

@@ -1,5 +1,5 @@
 import { useRef, useState, useMemo, useCallback } from 'react';
-import { calculateVirtualRange, getVirtualTableContainerClasses, classNames, virtualTableHeaderClasses, virtualTableHeaderCellClasses, getVirtualRowKey, getVirtualTableRowClasses, virtualTableCellClasses, virtualTableEmptyClasses, virtualTableLoadingClasses } from '@expcat/tigercat-core';
+import { calculateVirtualRange, getVirtualTableContainerClasses, getVirtualTableFixedInfo, classNames, virtualTableHeaderClasses, getVirtualTableFixedCellStyle, virtualTableHeaderCellClasses, getVirtualRowKey, getVirtualTableRowClasses, virtualTableCellClasses, virtualTableEmptyClasses, virtualTableLoadingClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/VirtualTable.tsx
@@ -43,6 +43,10 @@ var VirtualTable = ({
     () => getVirtualTableContainerClasses(bordered, className),
     [bordered, className]
   );
+  const fixedInfo = useMemo(
+    () => getVirtualTableFixedInfo(columns),
+    [columns]
+  );
   const bottomHeight = Math.max(0, range.totalHeight - range.end * rowHeight);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -58,15 +62,19 @@ var VirtualTable = ({
       "aria-rowcount": data.length,
       children: [
         /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed", children: [
-          /* @__PURE__ */ jsx("thead", { className: stickyHeader ? virtualTableHeaderClasses : void 0, children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
-            "th",
-            {
-              className: virtualTableHeaderCellClasses,
-              style: col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0,
-              children: col.title ?? ""
-            },
-            col.key
-          )) }) }),
+          /* @__PURE__ */ jsx("thead", { className: stickyHeader ? virtualTableHeaderClasses : void 0, children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => {
+            const widthStyle = col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : {};
+            const stickyStyle = getVirtualTableFixedCellStyle(col.key, fixedInfo);
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: virtualTableHeaderCellClasses,
+                style: { ...widthStyle, ...stickyStyle },
+                children: col.title ?? ""
+              },
+              col.key
+            );
+          }) }) }),
           /* @__PURE__ */ jsxs("tbody", { children: [
             /* @__PURE__ */ jsx("tr", { style: { height: `${range.offsetTop}px` }, "aria-hidden": true }),
             visibleData.map((row, localIdx) => {
@@ -81,7 +89,15 @@ var VirtualTable = ({
                     onRowClick?.(row, globalIdx);
                     if (selectable) onSelect?.(key, row, globalIdx);
                   },
-                  children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: virtualTableCellClasses, children: renderCell ? renderCell(row[col.key], row, col) : String(row[col.key] ?? "") }, col.key))
+                  children: columns.map((col) => /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: virtualTableCellClasses,
+                      style: getVirtualTableFixedCellStyle(col.key, fixedInfo),
+                      children: renderCell ? renderCell(row[col.key], row, col) : String(row[col.key] ?? "")
+                    },
+                    col.key
+                  ))
                 },
                 key
               );