@expcat/tigercat-vue 2.0.0-rc.1 → 2.0.0

package/dist/{chunk-EGIQPUEL.mjs → chunk-5C32WCQY.mjs}

@@ -160,7 +160,7 @@ var VirtualTable = defineComponent({
             ),
             style: { ...widthStyle, ...stickyStyle }
           },
-          col.title ?? ""
+          [col.renderHeader ? col.renderHeader() : col.title ?? ""]
         );
       });
       const headerRowChildren = [
@@ -195,8 +195,10 @@ var VirtualTable = defineComponent({
           emit("row-click", row, globalIdx);
           if (hasSelection.value) toggleRowSelection(key, row);
         };
-        const cells = visibleColumns.map(
-          (col, colIdx) => h(
+        const cells = visibleColumns.map((col, colIdx) => {
+          const dataKey = col.dataKey || col.key;
+          const value = row[dataKey];
+          return h(
             "td",
             {
               key: col.key,
@@ -218,9 +220,9 @@ var VirtualTable = defineComponent({
               ),
               style: getVirtualTableFixedCellStyle(col.key, fi)
             },
-            String(row[col.key] ?? "")
-          )
-        );
+            [col.render ? col.render(row, globalIdx) : value]
+          );
+        });
         const rowChildren = [
           colRange && colRange.leftPad > 0 ? h("td", {
             key: "__left-pad",

package/dist/{chunk-QFG452MD.mjs → chunk-5RXYJWNA.mjs}

@@ -24,6 +24,31 @@ import {
   clipCommentTreeDepth,
   formatCommentTime
 } from "@expcat/tigercat-core";
+
+// ../core/src/internal/comment-thread-styles.ts
+var buttonBaseClasses = "tiger-motion-aware px-2 py-0.5 h-auto min-h-0 text-xs rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadActionButtonClasses = `${buttonBaseClasses} text-[var(--tiger-text-muted,#6b7280)] font-medium flex items-center gap-1.5`;
+var commentThreadPrimaryButtonClasses = `${buttonBaseClasses} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-semibold hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]`;
+var commentThreadLikeButtonClasses = "hover:text-[var(--tiger-primary,#2563eb)] hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]";
+var commentThreadLikedButtonClasses = "text-[var(--tiger-primary,#2563eb)] bg-[var(--tiger-outline-bg-hover,#eff6ff)] font-semibold border-[var(--tiger-primary,#2563eb)]/40";
+var commentThreadReplyButtonClasses = "hover:text-[var(--tiger-success,#16a34a)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]";
+var commentThreadNeutralButtonClasses = "hover:text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f3f4f6)]";
+var commentThreadLikeIconClasses = "tiger-motion-aware w-3.5 h-3.5 transition-transform active:scale-125";
+var commentThreadDividerClasses = "border-b border-[var(--tiger-border,#e5e7eb)]";
+var commentThreadAvatarClasses = "tiger-motion-aware shrink-0 mt-0.5 ring-1 ring-[var(--tiger-border,#e5e7eb)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:scale-105";
+var commentThreadAuthorClasses = "tiger-motion-aware text-[var(--tiger-text,#111827)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer";
+var commentThreadUserTitleClasses = "bg-[var(--tiger-surface-muted,#f3f4f6)] px-1.5 py-0.5 rounded text-[var(--tiger-text-muted,#6b7280)] font-medium";
+var commentThreadTimeClasses = "ml-auto text-[var(--tiger-text-muted,#6b7280)] font-normal";
+var commentThreadContentClasses = "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-2 mb-3 pr-2";
+var commentThreadReplyEditorClasses = "tiger-motion-aware mt-3 space-y-3 bg-[var(--tiger-surface-muted,#f9fafb)] border border-[var(--tiger-border,#e5e7eb)] p-4 rounded-[var(--tiger-radius-lg,0.75rem)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadReplyTextareaClasses = "tiger-motion-aware bg-[var(--tiger-surface,#ffffff)] border-[var(--tiger-border,#d1d5db)] focus:ring-2 focus:ring-[var(--tiger-primary,#2563eb)]/20 focus:border-[var(--tiger-primary,#2563eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-inner [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadCancelButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)] rounded-[var(--tiger-radius-md,0.5rem)] transition-colors";
+var commentThreadSubmitButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs font-semibold shadow-sm hover:shadow rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadRepliesClasses = "tiger-motion-aware mt-4 ml-1 pl-4 border-l-2 border-[var(--tiger-border,#e5e7eb)] hover:border-[var(--tiger-primary,#2563eb)]/40 space-y-4 transition-colors";
+var commentThreadEmptyClasses = "tiger-motion-aware flex flex-col items-center justify-center border border-dashed border-[var(--tiger-border,#d1d5db)] rounded-[var(--tiger-radius-lg,0.75rem)] py-12 px-4 bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors";
+var commentThreadEmptyIconClasses = "w-10 h-10 text-[var(--tiger-text-muted,#9ca3af)] mb-3";
+
+// src/components/CommentThread.ts
 var CommentThread = defineComponent({
   name: "TigerCommentThread",
   inheritAttrs: false,
@@ -163,9 +188,6 @@ var CommentThread = defineComponent({
         updateExpandedKeys(next);
       }
     };
-    const BTN_BASE = "px-2 py-0.5 h-auto min-h-0 text-xs rounded-md transition-all duration-200 ease-out";
-    const ACTION_BTN = `${BTN_BASE} text-gray-500 dark:text-gray-400 font-medium flex items-center gap-1.5`;
-    const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] dark:text-blue-400 dark:hover:text-blue-300 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10`;
     const renderNode = (node, depth, isLast) => {
       const children = node.children ?? [];
       const hasChildren = children.length > 0;
@@ -187,9 +209,9 @@ var CommentThread = defineComponent({
               size: "sm",
               variant: "ghost",
               className: classNames(
-                ACTION_BTN,
-                "hover:text-blue-600 hover:bg-blue-50/50 dark:hover:text-blue-400 dark:hover:bg-blue-950/20",
-                node.liked && "text-blue-600 dark:text-blue-400 bg-blue-50/30 dark:bg-blue-950/10 font-semibold border-blue-200/40 dark:border-blue-800/30"
+                commentThreadActionButtonClasses,
+                commentThreadLikeButtonClasses,
+                node.liked && commentThreadLikedButtonClasses
               ),
               onClick: () => emit("like", node, !node.liked)
             },
@@ -199,7 +221,7 @@ var CommentThread = defineComponent({
                   "svg",
                   {
                     class: classNames(
-                      "w-3.5 h-3.5 transition-transform duration-200 active:scale-125",
+                      commentThreadLikeIconClasses,
                       node.liked ? "fill-current" : "stroke-current fill-none"
                     ),
                     viewBox: "0 0 24 24",
@@ -228,8 +250,8 @@ var CommentThread = defineComponent({
               size: "sm",
               variant: "ghost",
               className: classNames(
-                ACTION_BTN,
-                "hover:text-emerald-600 hover:bg-emerald-50/50 dark:hover:text-emerald-400 dark:hover:bg-emerald-950/20"
+                commentThreadActionButtonClasses,
+                commentThreadReplyButtonClasses
               ),
               onClick: () => {
                 replyingTo.value = replyingTo.value === node.id ? null : node.id;
@@ -270,8 +292,8 @@ var CommentThread = defineComponent({
               size: "sm",
               variant: "ghost",
               className: classNames(
-                ACTION_BTN,
-                "hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+                commentThreadActionButtonClasses,
+                commentThreadNeutralButtonClasses
               ),
               onClick: () => emit("more", node)
             },
@@ -310,7 +332,10 @@ var CommentThread = defineComponent({
                 key: actionKey,
                 size: "sm",
                 variant: action.variant ?? "ghost",
-                className: classNames(ACTION_BTN, "hover:bg-gray-100 dark:hover:bg-gray-800"),
+                className: classNames(
+                  commentThreadActionButtonClasses,
+                  commentThreadNeutralButtonClasses
+                ),
                 disabled: action.disabled,
                 onClick: () => {
                   action.onClick?.(node, action);
@@ -328,7 +353,7 @@ var CommentThread = defineComponent({
           class: classNames(
             "tiger-comment-thread-item",
             depth === 1 && "py-5",
-            depth === 1 && !isLast && props.showDivider && "border-b border-gray-100 dark:border-gray-800/80"
+            depth === 1 && !isLast && props.showDivider && commentThreadDividerClasses
           ),
           key: node.id
         },
@@ -338,7 +363,7 @@ var CommentThread = defineComponent({
               size: depth === 1 ? "md" : "sm",
               src: node.user.avatar,
               text: node.user.name,
-              className: "shrink-0 mt-0.5 ring-1 ring-black/5 dark:ring-white/10 shadow-sm transition-transform hover:scale-105 duration-200"
+              className: commentThreadAvatarClasses
             }) : null,
             h("div", { class: "flex-1 min-w-0" }, [
               h("div", { class: "flex items-center gap-2 flex-wrap" }, [
@@ -348,7 +373,7 @@ var CommentThread = defineComponent({
                     tag: "span",
                     size: "sm",
                     weight: "bold",
-                    class: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer"
+                    class: commentThreadAuthorClasses
                   },
                   { default: () => node.user?.name }
                 ) : null,
@@ -358,7 +383,7 @@ var CommentThread = defineComponent({
                     tag: "span",
                     size: "xs",
                     color: "muted",
-                    class: "bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-500 dark:text-gray-400 font-medium"
+                    class: commentThreadUserTitleClasses
                   },
                   { default: () => node.user?.title }
                 ) : null,
@@ -389,7 +414,7 @@ var CommentThread = defineComponent({
                     tag: "span",
                     size: "xs",
                     color: "muted",
-                    class: "ml-auto text-gray-400 dark:text-gray-500 font-normal"
+                    class: commentThreadTimeClasses
                   },
                   { default: () => formatCommentTime(node.time) }
                 ) : null
@@ -397,7 +422,7 @@ var CommentThread = defineComponent({
               h(
                 "div",
                 {
-                  class: "text-sm text-gray-600 dark:text-gray-300 leading-relaxed break-words mt-2 mb-3 pr-2"
+                  class: commentThreadContentClasses
                 },
                 String(node.content)
               ),
@@ -405,14 +430,14 @@ var CommentThread = defineComponent({
               replyingTo.value === node.id ? h(
                 "div",
                 {
-                  class: "mt-3 space-y-3 bg-gray-50/50 dark:bg-gray-900/30 border border-gray-100 dark:border-gray-800/80 p-4 rounded-xl shadow-sm backdrop-blur-sm transition-all duration-300"
+                  class: commentThreadReplyEditorClasses
                 },
                 [
                   h(Textarea, {
                     rows: 3,
                     modelValue: replyValue.value,
                     placeholder: props.replyPlaceholder,
-                    className: "bg-white dark:bg-gray-950 border-gray-200 dark:border-gray-800 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 rounded-lg shadow-inner transition-all duration-200",
+                    className: commentThreadReplyTextareaClasses,
                     "onUpdate:modelValue": (value) => {
                       replyValue.value = value;
                     }
@@ -423,7 +448,7 @@ var CommentThread = defineComponent({
                       {
                         size: "sm",
                         variant: "ghost",
-                        className: "px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg transition-colors",
+                        className: commentThreadCancelButtonClasses,
                         onClick: () => {
                           replyingTo.value = null;
                           replyValue.value = "";
@@ -436,7 +461,7 @@ var CommentThread = defineComponent({
                       {
                         size: "sm",
                         variant: "primary",
-                        className: "px-3 py-1.5 text-xs font-semibold shadow-sm hover:shadow transition-all duration-200 rounded-lg",
+                        className: commentThreadSubmitButtonClasses,
                         onClick: () => handleReplySubmit(node)
                       },
                       { default: () => props.replyButtonText }
@@ -450,8 +475,8 @@ var CommentThread = defineComponent({
                   size: "sm",
                   variant: "ghost",
                   className: classNames(
-                    "mt-2 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10 transition-colors",
-                    PRIMARY_BTN
+                    "mt-2 font-semibold",
+                    commentThreadPrimaryButtonClasses
                   ),
                   "aria-expanded": isExpanded,
                   "aria-controls": repliesId,
@@ -465,7 +490,7 @@ var CommentThread = defineComponent({
                 "div",
                 {
                   id: repliesId,
-                  class: "mt-4 ml-1 pl-4 border-l-2 border-gray-100 dark:border-gray-800 hover:border-blue-500/40 dark:hover:border-blue-400/40 space-y-4 transition-colors duration-300"
+                  class: commentThreadRepliesClasses
                 },
                 [
                   ...visibleChildren.map(
@@ -476,7 +501,7 @@ var CommentThread = defineComponent({
                     {
                       size: "sm",
                       variant: "ghost",
-                      className: PRIMARY_BTN,
+                      className: commentThreadPrimaryButtonClasses,
                       onClick: () => handleLoadMore(node)
                     },
                     { default: () => props.loadMoreText }
@@ -494,13 +519,13 @@ var CommentThread = defineComponent({
         h(
           "div",
           {
-            class: "flex flex-col items-center justify-center border border-dashed border-gray-200 dark:border-gray-800/80 rounded-xl py-12 px-4 bg-gray-50/20 dark:bg-gray-900/5 transition-colors"
+            class: commentThreadEmptyClasses
           },
           [
             h(
               "svg",
               {
-                class: "w-10 h-10 text-gray-300 dark:text-gray-600 mb-3",
+                class: commentThreadEmptyIconClasses,
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",

package/dist/{chunk-36TZA5BH.mjs → chunk-A5QYJSHK.mjs}

@@ -41,7 +41,6 @@ var InfiniteScroll = defineComponent({
     const containerRef = ref(null);
     const sentinelRef = ref(null);
     let cleanupObserver = null;
-    let _usingFallback = false;
     const containerClasses = computed(
       () => classNames(
         getInfiniteScrollContainerClasses(props.direction, props.className),
@@ -63,7 +62,6 @@ var InfiniteScroll = defineComponent({
     function setupObserver() {
       cleanupObserver?.();
       cleanupObserver = null;
-      _usingFallback = false;
       if (props.disabled || !props.hasMore) return;
       const sentinel = sentinelRef.value;
       if (!sentinel) return;
@@ -77,7 +75,6 @@ var InfiniteScroll = defineComponent({
       if (teardown) {
         cleanupObserver = teardown;
       } else {
-        _usingFallback = true;
         containerRef.value?.addEventListener("scroll", checkScroll, { passive: true });
         cleanupObserver = () => {
           containerRef.value?.removeEventListener("scroll", checkScroll);

package/dist/{chunk-H26JXVJX.mjs → chunk-A7QIMKWQ.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-BNNTDSLJ.mjs";
+} from "./chunk-SK2QJ66E.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";

package/dist/{chunk-7JT5ZIHC.mjs → chunk-BCU7GYF6.mjs}

@@ -31,6 +31,7 @@ import {
   getImageEditorLabels,
   mergeTigerLocale
 } from "@expcat/tigercat-core";
+var isPositiveFinite = (value) => Number.isFinite(value) && value > 0;
 var ImageCropper = defineComponent({
   name: "TigerImageCropper",
   inheritAttrs: false,
@@ -73,20 +74,27 @@ var ImageCropper = defineComponent({
     const dragStartPos = ref({ x: 0, y: 0 });
     const dragStartRect = ref({ x: 0, y: 0, width: 0, height: 0 });
     const loadImage = () => {
+      imageRef.value = null;
       const img = new window.Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        imageRef.value = img;
+        const naturalWidth = img.naturalWidth;
+        const naturalHeight = img.naturalHeight;
+        if (!isPositiveFinite(naturalWidth) || !isPositiveFinite(naturalHeight)) return;
         if (containerRef.value) {
-          const containerW = containerRef.value.clientWidth;
-          const containerH = containerRef.value.clientHeight || 400;
-          const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
-          displayWidth.value = img.naturalWidth * ratio;
-          displayHeight.value = img.naturalHeight * ratio;
+          const measuredWidth = containerRef.value.clientWidth;
+          const measuredHeight = containerRef.value.clientHeight;
+          const containerW = isPositiveFinite(measuredWidth) ? measuredWidth : naturalWidth;
+          const containerH = isPositiveFinite(measuredHeight) ? measuredHeight : 400;
+          const ratio = Math.min(containerW / naturalWidth, containerH / naturalHeight, 1);
+          displayWidth.value = naturalWidth * ratio;
+          displayHeight.value = naturalHeight * ratio;
         } else {
-          displayWidth.value = img.naturalWidth;
-          displayHeight.value = img.naturalHeight;
+          displayWidth.value = naturalWidth;
+          displayHeight.value = naturalHeight;
         }
+        if (!isPositiveFinite(displayWidth.value) || !isPositiveFinite(displayHeight.value)) return;
+        imageRef.value = img;
         cropRect.value = getInitialCropRect(
           displayWidth.value,
           displayHeight.value,

package/dist/{chunk-7CPMXNLK.mjs → chunk-BNYA5IUB.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Upload.ts
-import { defineComponent, ref, computed, watch, h } from "vue";
+import { defineComponent, ref, computed, watch, h, onBeforeUnmount } from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -216,6 +216,23 @@ var Upload = defineComponent({
       }
       return internalFileList.value;
     });
+    const objectUrls = /* @__PURE__ */ new Map();
+    const revokeUnusedObjectUrls = (files) => {
+      const activeFiles = new Set(
+        files.flatMap((file) => file.file && !file.url ? [file.file] : [])
+      );
+      objectUrls.forEach((url, file) => {
+        if (!activeFiles.has(file)) {
+          URL.revokeObjectURL(url);
+          objectUrls.delete(file);
+        }
+      });
+    };
+    watch(fileListValue, revokeUnusedObjectUrls, { deep: true });
+    onBeforeUnmount(() => {
+      objectUrls.forEach((url) => URL.revokeObjectURL(url));
+      objectUrls.clear();
+    });
     const setFileList = (value) => {
       if (!isControlled.value) {
         internalFileList.value = value;
@@ -597,7 +614,14 @@ var Upload = defineComponent({
       );
     };
     const renderPictureCard = (file) => {
-      const imageUrl = file.url || (file.file ? URL.createObjectURL(file.file) : "");
+      let imageUrl = file.url ?? "";
+      if (!imageUrl && file.file && typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
+        imageUrl = objectUrls.get(file.file) ?? "";
+        if (!imageUrl) {
+          imageUrl = URL.createObjectURL(file.file);
+          objectUrls.set(file.file, imageUrl);
+        }
+      }
       return h(
         "div",
         {

package/dist/{chunk-CFH5T3V2.mjs → chunk-DKMKJZ7A.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-D4APFWWS.mjs";
 import {
   ImageCropper
-} from "./chunk-7JT5ZIHC.mjs";
+} from "./chunk-BCU7GYF6.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";

package/dist/{chunk-SUORTZUY.mjs → chunk-EZZD4OCV.mjs}

@@ -27,6 +27,34 @@ import {
   buildNotificationGroups,
   formatActivityTime
 } from "@expcat/tigercat-core";
+
+// ../core/src/internal/notification-center-styles.ts
+var notificationCenterItemClasses = "tiger-motion-aware group relative flex items-start gap-3.5 w-full p-3.5 rounded-[var(--tiger-radius-lg,0.75rem)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterUnreadItemClasses = "bg-[var(--tiger-outline-bg-hover,#eff6ff)] border-l-[3px] border-l-[var(--tiger-primary,#2563eb)] -ml-[3px] pl-[calc(0.875rem-3px)]";
+var notificationCenterReadItemClasses = "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]";
+var notificationCenterReadTitleClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
+var notificationCenterUnreadTitleClasses = "text-[var(--tiger-text,#111827)]";
+var notificationCenterUnreadDotClasses = "tiger-motion-aware w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] shrink-0 shadow-sm animate-pulse";
+var notificationCenterTimeClasses = "text-[11px] text-[var(--tiger-text-muted,#6b7280)] font-medium whitespace-nowrap flex-shrink-0 self-center";
+var notificationCenterReadDescriptionClasses = "text-[var(--tiger-text-muted,#6b7280)]";
+var notificationCenterUnreadDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
+var notificationCenterItemActionClasses = "tiger-motion-aware opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--tiger-surface-muted,#f3f4f6)] hover:bg-[var(--tiger-fill-hover,#e5e7eb)] text-[var(--tiger-text-secondary,#374151)] border-0 flex-shrink-0 self-center [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterEmptyIconWrapperClasses = "p-3.5 bg-[var(--tiger-surface-muted,#f9fafb)] rounded-full mb-3 shadow-inner";
+var notificationCenterEmptyIconClasses = "tiger-motion-aware w-8 h-8 text-[var(--tiger-text-muted,#9ca3af)] animate-pulse";
+var notificationCenterEmptyTextClasses = "font-semibold text-[var(--tiger-text-muted,#6b7280)]";
+var notificationCenterLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
+var notificationCenterCardClasses = "tiger-motion-aware w-full rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-glass,0_8px_30px_rgb(0_0_0_/_0.04))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] overflow-hidden";
+var notificationCenterTitleClasses = "text-[var(--tiger-text,#111827)]";
+var notificationCenterUnreadBadgeClasses = "tiger-motion-aware inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white shadow-sm animate-pulse";
+var notificationCenterMarkAllBaseClasses = "tiger-motion-aware text-xs font-semibold transition-colors";
+var notificationCenterMarkAllEnabledClasses = "text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)]";
+var notificationCenterMarkAllDisabledClasses = "text-[var(--tiger-text-muted,#9ca3af)]";
+var notificationCenterFilterGroupClasses = "inline-flex items-center gap-0.5 p-0.5 rounded-[var(--tiger-radius-md,0.5rem)] bg-[var(--tiger-surface-muted,#f3f4f6)] self-start";
+var notificationCenterFilterButtonClasses = "tiger-motion-aware px-3.5 py-1 text-xs font-semibold rounded-[var(--tiger-radius-sm,0.375rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterFilterActiveClasses = "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text,#111827)] shadow-sm";
+var notificationCenterFilterIdleClasses = "text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)]";
+
+// src/components/NotificationCenter.ts
 var getGroupKey = (group, index) => {
   return group.key ?? group.title ?? index;
 };
@@ -275,7 +303,7 @@ var NotificationCenter = defineComponent({
       return h(
         "div",
         {
-          class: "inline-flex items-center gap-0.5 p-0.5 rounded-lg bg-gray-100/80 dark:bg-gray-800/60 self-start"
+          class: notificationCenterFilterGroupClasses
         },
         options.map(
           (option) => h(
@@ -283,8 +311,8 @@ var NotificationCenter = defineComponent({
             {
               key: option.key,
               class: classNames(
-                "px-3.5 py-1 text-xs font-semibold rounded-md transition-all duration-200",
-                currentReadFilter.value === option.key ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm scale-102" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                notificationCenterFilterButtonClasses,
+                currentReadFilter.value === option.key ? notificationCenterFilterActiveClasses : notificationCenterFilterIdleClasses
               ),
               onClick: () => handleReadFilterChange(option.key)
             },
@@ -300,8 +328,8 @@ var NotificationCenter = defineComponent({
         "div",
         {
           class: classNames(
-            "group relative flex items-start gap-3.5 w-full p-3.5 rounded-xl transition-all duration-300 hover:bg-gray-50/60 dark:hover:bg-gray-800/30",
-            !isRead ? "bg-blue-50/20 dark:bg-blue-950/5 hover:bg-blue-50/40 dark:hover:bg-blue-950/10 border-l-[3px] border-l-blue-500/80 -ml-[3px] pl-[calc(0.875rem-3px)]" : "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]"
+            notificationCenterItemClasses,
+            isRead ? notificationCenterReadItemClasses : notificationCenterUnreadItemClasses
           )
         },
         [
@@ -314,18 +342,18 @@ var NotificationCenter = defineComponent({
                     tag: "span",
                     size: "sm",
                     weight: isRead ? "normal" : "semibold",
-                    class: isRead ? "text-gray-600 dark:text-gray-400" : "text-gray-900 dark:text-gray-100"
+                    class: isRead ? notificationCenterReadTitleClasses : notificationCenterUnreadTitleClasses
                   },
                   { default: () => item.title }
                 ),
                 !isRead ? h("span", {
-                  class: "w-1.5 h-1.5 rounded-full bg-blue-500 dark:bg-blue-400 shrink-0 shadow-sm shadow-blue-500/40 animate-pulse"
+                  class: notificationCenterUnreadDotClasses
                 }) : null
               ]),
               timeText ? h(
                 "span",
                 {
-                  class: "text-[11px] text-gray-400 dark:text-gray-500 font-medium whitespace-nowrap flex-shrink-0 self-center"
+                  class: notificationCenterTimeClasses
                 },
                 timeText
               ) : null
@@ -335,7 +363,7 @@ var NotificationCenter = defineComponent({
               {
                 class: classNames(
                   "mt-1 text-xs leading-relaxed line-clamp-2",
-                  isRead ? "text-gray-500 dark:text-gray-400" : "text-gray-600 dark:text-gray-300"
+                  isRead ? notificationCenterReadDescriptionClasses : notificationCenterUnreadDescriptionClasses
                 )
               },
               item.description
@@ -346,7 +374,7 @@ var NotificationCenter = defineComponent({
             {
               size: "sm",
               variant: "ghost",
-              class: "opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold transition-all duration-200 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-0 flex-shrink-0 self-center",
+              class: notificationCenterItemActionClasses,
               onClick: (event) => {
                 event.stopPropagation();
                 handleItemReadChange(item, !isRead);
@@ -366,13 +394,13 @@ var NotificationCenter = defineComponent({
             h(
               "div",
               {
-                class: "p-3.5 bg-gray-50 dark:bg-gray-900 rounded-full mb-3 shadow-inner"
+                class: notificationCenterEmptyIconWrapperClasses
               },
               [
                 h(
                   "svg",
                   {
-                    class: "w-8 h-8 text-gray-400 dark:text-gray-600 animate-pulse",
+                    class: notificationCenterEmptyIconClasses,
                     fill: "none",
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
@@ -394,7 +422,7 @@ var NotificationCenter = defineComponent({
                 tag: "div",
                 size: "sm",
                 color: "muted",
-                class: "font-semibold text-gray-400 dark:text-gray-500"
+                class: notificationCenterEmptyTextClasses
               },
               { default: () => props.emptyText }
             )
@@ -454,14 +482,14 @@ var NotificationCenter = defineComponent({
                 tag: "div",
                 size: "base",
                 weight: "bold",
-                class: "text-gray-900 dark:text-gray-100"
+                class: notificationCenterTitleClasses
               },
               { default: () => props.title }
             ),
             totalUnread.value > 0 ? h(
               "span",
               {
-                class: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/20 animate-pulse"
+                class: notificationCenterUnreadBadgeClasses
               },
               String(totalUnread.value)
             ) : null
@@ -473,8 +501,8 @@ var NotificationCenter = defineComponent({
               variant: "ghost",
               disabled: !hasUnread.value,
               class: classNames(
-                "text-xs font-semibold transition-colors duration-200",
-                hasUnread.value ? "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300" : "text-gray-400 dark:text-gray-600"
+                notificationCenterMarkAllBaseClasses,
+                hasUnread.value ? notificationCenterMarkAllEnabledClasses : notificationCenterMarkAllDisabledClasses
               ),
               onClick: handleMarkAllRead
             },
@@ -486,7 +514,7 @@ var NotificationCenter = defineComponent({
       const content = props.loading ? h("div", { class: "flex items-center justify-center py-16" }, [
         h(Loading, {
           text: props.loadingText,
-          class: "text-blue-500 dark:text-blue-400 font-medium"
+          class: notificationCenterLoadingClasses
         })
       ]) : resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
         renderList(filteredFlatItems.value)
@@ -507,7 +535,7 @@ var NotificationCenter = defineComponent({
             Card,
             {
               variant: "bordered",
-              className: "w-full rounded-2xl border border-gray-100/80 dark:border-gray-800/80 bg-white/95 dark:bg-gray-950/90 backdrop-blur-md shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all duration-300 overflow-hidden"
+              className: notificationCenterCardClasses
             },
             {
               header: () => header,

package/dist/{chunk-IMFHJEUX.mjs → chunk-JKPXJ3VB.mjs}

@@ -87,7 +87,12 @@ var Image = defineComponent({
       floatingRef: hoverFloatingRef,
       floatingStyles: hoverFloatingStyles,
       triggerHandlers: hoverTriggerHandlers
-    } = useFloatingPopup({ props: floatingPopupProps, emit });
+    } = useFloatingPopup({
+      props: floatingPopupProps,
+      // Hover visibility is internal; popup model events are not Image events.
+      emit: () => {
+      }
+    });
     const setContainerRef = (el) => {
       containerRef.value = el;
       hoverTriggerRef.value = el;

package/dist/{chunk-3NQUEQJT.mjs → chunk-NP6DZQ3O.mjs}

@@ -37,6 +37,43 @@ import {
   activityItemDescriptionClasses,
   activityItemActionsClasses
 } from "@expcat/tigercat-core";
+
+// ../core/src/internal/activity-feed-styles.ts
+var activityFeedActionClasses = "tiger-motion-aware inline-flex items-center px-2.5 py-1 rounded-[var(--tiger-radius-md,0.5rem)] text-xs font-semibold text-[var(--tiger-primary,#2563eb)] hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var activityFeedItemSurfaceClasses = "tiger-motion-aware p-4 rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:shadow-[var(--tiger-shadow-glass-strong,0_4px_6px_-1px_rgb(0_0_0_/_0.1))] hover:-translate-y-0.5 w-full";
+var activityFeedAvatarClasses = "tiger-motion-aware shrink-0 ring-2 ring-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:scale-105";
+var activityFeedTitleClasses = "tiger-motion-aware text-[var(--tiger-text,#111827)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer truncate";
+var activityFeedTimeClasses = "shrink-0 whitespace-nowrap font-medium text-[var(--tiger-text-muted,#6b7280)]";
+var activityFeedDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed pl-0.5 mt-1";
+var activityFeedStateCardClasses = "bg-[var(--tiger-surface,#ffffff)] border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-xl,1rem)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] overflow-hidden";
+var activityFeedLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
+var activityFeedEmptyIconClasses = "tiger-motion-aware w-12 h-12 text-[var(--tiger-text-muted,#9ca3af)] mb-3 animate-pulse";
+var activityFeedGroupMarkerClasses = "w-1.5 h-3.5 bg-[var(--tiger-primary,#2563eb)] rounded-full shadow-sm";
+var activityFeedGroupTitleClasses = "text-[var(--tiger-text,#111827)] uppercase tracking-wider";
+var activityFeedDotBaseClasses = "w-3 h-3 rounded-full border-2 border-[var(--tiger-surface,#ffffff)] shadow-sm relative z-10";
+var activityFeedDotPulseBaseClasses = "tiger-motion-aware absolute inline-flex h-full w-full rounded-full animate-ping opacity-75";
+var dotVariantClasses = {
+  success: "bg-[var(--tiger-success,#16a34a)]",
+  warning: "bg-[var(--tiger-warning,#d97706)]",
+  error: "bg-[var(--tiger-error,#dc2626)]",
+  danger: "bg-[var(--tiger-error,#dc2626)]",
+  primary: "bg-[var(--tiger-primary,#2563eb)]",
+  info: "bg-[var(--tiger-primary,#2563eb)]"
+};
+var dotPulseVariantClasses = {
+  success: "bg-[var(--tiger-success,#16a34a)]/30",
+  warning: "bg-[var(--tiger-warning,#d97706)]/30",
+  error: "bg-[var(--tiger-error,#dc2626)]/30",
+  danger: "bg-[var(--tiger-error,#dc2626)]/30",
+  primary: "bg-[var(--tiger-primary,#2563eb)]/30",
+  info: "bg-[var(--tiger-primary,#2563eb)]/30"
+};
+var getActivityFeedDotClasses = (variant) => ({
+  dot: dotVariantClasses[variant ?? ""] ?? "bg-[var(--tiger-border,#d1d5db)]",
+  pulse: dotPulseVariantClasses[variant ?? ""] ?? ""
+});
+
+// src/components/ActivityFeed.ts
 var renderAction = (item, action, index) => {
   const key = action.key ?? `${item.id}-action-${index}`;
   return h(
@@ -49,7 +86,7 @@ var renderAction = (item, action, index) => {
       href: action.href,
       target: action.target,
       disabled: action.disabled,
-      className: "inline-flex items-center px-2.5 py-1 rounded-lg hover:bg-blue-50/50 dark:hover:bg-blue-950/20 text-xs font-semibold transition-all duration-200",
+      className: activityFeedActionClasses,
       onClick: () => action.onClick?.(item, action)
     },
     {
@@ -140,10 +177,7 @@ var ActivityFeed = defineComponent({
       return h(
         "div",
         {
-          class: classNames(
-            activityItemClasses,
-            "p-4 rounded-2xl border border-gray-100/70 dark:border-gray-800/40 bg-white/40 dark:bg-gray-900/15 backdrop-blur-sm shadow-sm transition-all duration-300 hover:shadow-md hover:shadow-gray-100/30 dark:hover:shadow-none hover:bg-white dark:hover:bg-gray-900/30 hover:-translate-y-0.5 w-full"
-          )
+          class: classNames(activityItemClasses, activityFeedItemSurfaceClasses)
         },
         [
           h("div", { class: activityItemLayoutClasses }, [
@@ -151,7 +185,7 @@ var ActivityFeed = defineComponent({
               size: "sm",
               src: item.user.avatar,
               text: item.user.name,
-              className: "shrink-0 ring-2 ring-white dark:ring-gray-900 shadow-sm transition-transform hover:scale-105 duration-200"
+              className: activityFeedAvatarClasses
             }) : null,
             h("div", { class: activityItemBodyClasses }, [
               h("div", { class: activityItemHeaderClasses }, [
@@ -162,7 +196,7 @@ var ActivityFeed = defineComponent({
                       tag: "div",
                       size: "sm",
                       weight: "semibold",
-                      class: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer truncate"
+                      class: activityFeedTitleClasses
                     },
                     { default: () => titleText }
                   ) : null,
@@ -182,7 +216,7 @@ var ActivityFeed = defineComponent({
                     tag: "div",
                     size: "xs",
                     color: "muted",
-                    class: "shrink-0 whitespace-nowrap font-medium text-gray-400 dark:text-gray-500"
+                    class: activityFeedTimeClasses
                   },
                   { default: () => timeText }
                 ) : null
@@ -195,7 +229,7 @@ var ActivityFeed = defineComponent({
                   color: "muted",
                   class: classNames(
                     activityItemDescriptionClasses,
-                    "text-gray-600 dark:text-gray-300 leading-relaxed pl-0.5 mt-1"
+                    activityFeedDescriptionClasses
                   )
                 },
                 { default: () => descriptionText }
@@ -219,7 +253,7 @@ var ActivityFeed = defineComponent({
       if (props.loading) {
         const loadingNode = slots.loading ? slots.loading() : h(Loading, {
           text: props.loadingText,
-          class: "text-blue-500 dark:text-blue-400 font-medium"
+          class: activityFeedLoadingClasses
         });
         return h(
           "div",
@@ -238,7 +272,7 @@ var ActivityFeed = defineComponent({
               {
                 variant: "bordered",
                 size: "sm",
-                className: "tiger-activity-feed-loading bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+                className: classNames("tiger-activity-feed-loading", activityFeedStateCardClasses)
               },
               {
                 default: () => h("div", { class: "flex items-center justify-center py-8" }, loadingNode)
@@ -252,7 +286,7 @@ var ActivityFeed = defineComponent({
           h(
             "svg",
             {
-              class: "w-12 h-12 text-gray-300 dark:text-gray-600 mb-3 animate-pulse",
+              class: activityFeedEmptyIconClasses,
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
@@ -288,7 +322,7 @@ var ActivityFeed = defineComponent({
               {
                 variant: "bordered",
                 size: "sm",
-                className: "tiger-activity-feed-empty bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+                className: classNames("tiger-activity-feed-empty", activityFeedStateCardClasses)
               },
               {
                 default: () => emptyNode
@@ -314,7 +348,7 @@ var ActivityFeed = defineComponent({
           return h("div", { key: group.key ?? groupIndex, class: "space-y-3" }, [
             props.showGroupTitle && groupTitle ? headerNode ?? h("div", { class: "flex items-center gap-2 mb-2" }, [
               h("span", {
-                class: "w-1.5 h-3.5 bg-blue-500 rounded-full dark:bg-blue-400 shadow-sm shadow-blue-500/20"
+                class: activityFeedGroupMarkerClasses
               }),
               h(
                 Text,
@@ -322,7 +356,7 @@ var ActivityFeed = defineComponent({
                   tag: "span",
                   size: "sm",
                   weight: "bold",
-                  class: "text-gray-900 dark:text-gray-100 uppercase tracking-wider"
+                  class: activityFeedGroupTitleClasses
                 },
                 { default: () => groupTitle }
               )
@@ -331,33 +365,15 @@ var ActivityFeed = defineComponent({
               Timeline,
               {
                 items: timelineItems,
-                style: {
-                  "--tiger-border": "rgba(156, 163, 175, 0.18)"
-                },
                 renderDot: (timelineItem) => {
                   const activity = timelineItem.activity;
                   const statusVariant = activity?.status?.variant ?? "default";
-                  const baseDotClass = "w-3 h-3 rounded-full border-2 border-white dark:border-gray-950 shadow-sm";
-                  let colorClass = "bg-gray-300 dark:bg-gray-700";
-                  let pulseClass = "";
-                  if (statusVariant === "success") {
-                    colorClass = "bg-emerald-500";
-                    pulseClass = "bg-emerald-500/30";
-                  } else if (statusVariant === "warning") {
-                    colorClass = "bg-amber-500";
-                    pulseClass = "bg-amber-500/30";
-                  } else if (statusVariant === "error" || statusVariant === "danger") {
-                    colorClass = "bg-rose-500";
-                    pulseClass = "bg-rose-500/30";
-                  } else if (statusVariant === "primary" || statusVariant === "info") {
-                    colorClass = "bg-blue-500";
-                    pulseClass = "bg-blue-500/30";
-                  }
+                  const dotClasses = getActivityFeedDotClasses(statusVariant);
                   return h("div", { class: "relative flex items-center justify-center w-4 h-4" }, [
-                    pulseClass ? h("span", {
-                      class: `absolute inline-flex h-full w-full rounded-full animate-ping opacity-75 ${pulseClass}`
+                    dotClasses.pulse ? h("span", {
+                      class: `${activityFeedDotPulseBaseClasses} ${dotClasses.pulse}`
                     }) : null,
-                    h("span", { class: `${baseDotClass} ${colorClass} relative z-10` })
+                    h("span", { class: `${activityFeedDotBaseClasses} ${dotClasses.dot}` })
                   ]);
                 }
               },

package/dist/{chunk-5KPO3EDM.mjs → chunk-OTHJIFDV.mjs}

@@ -459,22 +459,35 @@ var BarChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(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
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(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
+        ]
+      );
     };
   }
 });

package/dist/{chunk-BNNTDSLJ.mjs → chunk-SK2QJ66E.mjs}

@@ -390,7 +390,6 @@ var Dropdown = defineComponent({
       }
     );
     provide(DropdownContextKey, dropdownContext);
-    const _menuItemTabIndex = -1;
     return () => {
       const defaultSlot = slots.default?.();
       const triggerSlot = slots.trigger?.({ open: currentVisible.value });

package/dist/{chunk-JZCETBUV.mjs → chunk-WUQMFKQ6.mjs}

@@ -349,23 +349,36 @@ var ScatterChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          ariaLabel: labels.value.legendAriaLabel,
-          interactive: props.hoverable || props.selectable,
-          onItemClick: handleLegendClick,
-          onItemHover: handleLegendHover,
-          onItemLeave: handleLegendLeave
-        }),
-        tooltip
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(ChartLegend, {
+            items: legendItems.value,
+            position: props.legendPosition,
+            markerSize: props.legendMarkerSize,
+            gap: props.legendGap,
+            ariaLabel: labels.value.legendAriaLabel,
+            interactive: props.hoverable || props.selectable,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }),
+          tooltip
+        ]
+      );
     };
   }
 });

package/dist/{chunk-GWFVBG22.mjs → chunk-XGXZF27U.mjs}

@@ -673,22 +673,35 @@ var LineChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(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
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(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
+        ]
+      );
     };
   }
 });

package/dist/{chunk-JVQPU4M2.mjs → chunk-ZGA66PSG.mjs}

@@ -717,22 +717,35 @@ var AreaChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          interactive: props.hoverable || props.selectable,
-          onItemClick: handleSeriesSelect,
-          onItemHover: handleSeriesHoverEnter,
-          onItemLeave: handleSeriesHoverLeave
-        }),
-        tooltip
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(ChartLegend, {
+            items: legendItems.value,
+            position: props.legendPosition,
+            markerSize: props.legendMarkerSize,
+            gap: props.legendGap,
+            interactive: props.hoverable || props.selectable,
+            onItemClick: handleSeriesSelect,
+            onItemHover: handleSeriesHoverEnter,
+            onItemLeave: handleSeriesHoverLeave
+          }),
+          tooltip
+        ]
+      );
     };
   }
 });

package/dist/components/ActivityFeed.mjs

@@ -1,7 +1,7 @@
 import {
   ActivityFeed,
   ActivityFeed_default
-} from "../chunk-3NQUEQJT.mjs";
+} from "../chunk-NP6DZQ3O.mjs";
 import "../chunk-JQSIWPNM.mjs";
 import "../chunk-3MO7A4GU.mjs";
 import "../chunk-O6BN5R6J.mjs";

package/dist/components/AreaChart.mjs

@@ -1,7 +1,7 @@
 import {
   AreaChart,
   AreaChart_default
-} from "../chunk-JVQPU4M2.mjs";
+} from "../chunk-ZGA66PSG.mjs";
 import "../chunk-PE5OA4YG.mjs";
 import "../chunk-SPFL55TF.mjs";
 import "../chunk-ZWVA7HT3.mjs";

package/dist/components/BarChart.mjs

@@ -1,7 +1,7 @@
 import {
   BarChart,
   BarChart_default
-} from "../chunk-5KPO3EDM.mjs";
+} from "../chunk-OTHJIFDV.mjs";
 import "../chunk-PE5OA4YG.mjs";
 import "../chunk-SPFL55TF.mjs";
 import "../chunk-ZWVA7HT3.mjs";

package/dist/components/CommentThread.mjs

@@ -1,7 +1,7 @@
 import {
   CommentThread,
   CommentThread_default
-} from "../chunk-QFG452MD.mjs";
+} from "../chunk-5RXYJWNA.mjs";
 import "../chunk-2OI6GWOT.mjs";
 import "../chunk-VIIGYWUY.mjs";
 import "../chunk-YZBQ6IR7.mjs";

package/dist/components/CropUpload.mjs

@@ -1,9 +1,9 @@
 import {
   CropUpload,
   CropUpload_default
-} from "../chunk-CFH5T3V2.mjs";
+} from "../chunk-DKMKJZ7A.mjs";
 import "../chunk-D4APFWWS.mjs";
-import "../chunk-7JT5ZIHC.mjs";
+import "../chunk-BCU7GYF6.mjs";
 import "../chunk-YZBQ6IR7.mjs";
 import "../chunk-Z2ZECCGD.mjs";
 import "../chunk-BDTPFPSB.mjs";

package/dist/components/DataExport.mjs

@@ -1,7 +1,7 @@
 import {
   DataExport
-} from "../chunk-H26JXVJX.mjs";
-import "../chunk-BNNTDSLJ.mjs";
+} from "../chunk-A7QIMKWQ.mjs";
+import "../chunk-SK2QJ66E.mjs";
 import "../chunk-BDTPFPSB.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";

package/dist/components/Dropdown.mjs

@@ -4,7 +4,7 @@ import {
   DropdownItem,
   DropdownMenu,
   Dropdown_default
-} from "../chunk-BNNTDSLJ.mjs";
+} from "../chunk-SK2QJ66E.mjs";
 import "../chunk-BDTPFPSB.mjs";
 export {
   Dropdown,

package/dist/components/Image.mjs

@@ -2,7 +2,7 @@ import {
   IMAGE_GROUP_INJECTION_KEY,
   Image,
   Image_default
-} from "../chunk-IMFHJEUX.mjs";
+} from "../chunk-JKPXJ3VB.mjs";
 import "../chunk-LPZBXTJ6.mjs";
 import "../chunk-KE6RGD4Y.mjs";
 import "../chunk-BDTPFPSB.mjs";

package/dist/components/ImageCropper.mjs

@@ -1,7 +1,7 @@
 import {
   ImageCropper,
   ImageCropper_default
-} from "../chunk-7JT5ZIHC.mjs";
+} from "../chunk-BCU7GYF6.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/InfiniteScroll.mjs

@@ -1,7 +1,7 @@
 import {
   InfiniteScroll,
   InfiniteScroll_default
-} from "../chunk-36TZA5BH.mjs";
+} from "../chunk-A5QYJSHK.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/LineChart.mjs

@@ -1,7 +1,7 @@
 import {
   LineChart,
   LineChart_default
-} from "../chunk-GWFVBG22.mjs";
+} from "../chunk-XGXZF27U.mjs";
 import "../chunk-PE5OA4YG.mjs";
 import "../chunk-SPFL55TF.mjs";
 import "../chunk-ZWVA7HT3.mjs";

package/dist/components/NotificationCenter.mjs

@@ -1,7 +1,7 @@
 import {
   NotificationCenter,
   NotificationCenter_default
-} from "../chunk-SUORTZUY.mjs";
+} from "../chunk-EZZD4OCV.mjs";
 import "../chunk-U6OGGZBY.mjs";
 import "../chunk-KOG3HKOF.mjs";
 import "../chunk-2LIIMWBR.mjs";

package/dist/components/ScatterChart.mjs

@@ -1,7 +1,7 @@
 import {
   ScatterChart,
   ScatterChart_default
-} from "../chunk-JZCETBUV.mjs";
+} from "../chunk-WUQMFKQ6.mjs";
 import "../chunk-PE5OA4YG.mjs";
 import "../chunk-SPFL55TF.mjs";
 import "../chunk-ZWVA7HT3.mjs";

package/dist/components/Upload.mjs

@@ -1,7 +1,7 @@
 import {
   Upload,
   Upload_default
-} from "../chunk-7CPMXNLK.mjs";
+} from "../chunk-BNYA5IUB.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/VirtualTable.mjs

@@ -1,7 +1,7 @@
 import {
   VirtualTable,
   VirtualTable_default
-} from "../chunk-EGIQPUEL.mjs";
+} from "../chunk-5C32WCQY.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/index.d.mts

@@ -149,6 +149,6 @@ import 'vue';
  * Vue 3 components for Tigercat UI library
  */
 
-declare const version = "2.0.0-rc.1";
+declare const version = "2.0.0";
 
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expcat/tigercat-vue",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "description": "Vue 3 components for Tigercat UI library",
   "license": "MIT",
   "author": "Yizhe Wang",
@@ -783,15 +783,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@expcat/tigercat-core": "2.0.0-rc.1"
+    "@expcat/tigercat-core": "2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.20.0",
+    "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^6.0.7",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "vue": "^3.5.38"
+    "vite": "^8.1.3",
+    "vue": "^3.5.39"
   },
   "peerDependencies": {
     "vue": "^3.0.0"