@expcat/tigercat-vue 2.0.0-rc.2 → 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;