@expcat/tigercat-vue 2.0.0-rc.2 → 2.0.4

package/dist/{chunk-KE6RGD4Y.mjs → chunk-26OI3TEA.mjs}

@@ -1,14 +1,10 @@
 import {
-  useVueClickOutside,
-  useVueEscapeKey,
-  useVueFloating
-} from "./chunk-BDTPFPSB.mjs";
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/utils/use-floating-popup.ts
-import { computed, ref, watch, onBeforeUnmount } from "vue";
+import { computed, ref, watch } from "vue";
 import {
-  getTransformOrigin,
-  FLOATING_OVERLAY_Z_INDEX,
   buildTriggerHandlerMap,
   restoreFocus
 } from "@expcat/tigercat-core";
@@ -47,57 +43,28 @@ function useFloatingPopup(options) {
     setVisible(false);
     restoreTriggerFocus();
   };
-  const {
-    x,
-    y,
-    placement: actualPlacement
-  } = useVueFloating({
-    referenceRef: triggerRef,
-    floatingRef,
-    enabled: currentVisible,
-    placement: props.placement ?? "top",
-    offset: props.offset ?? 8
-  });
-  let outsideClickCleanup;
-  let escapeKeyCleanup;
   const effectiveTrigger = computed(
     () => multiTrigger ? props.trigger ?? "click" : "click"
   );
-  watch(
-    [currentVisible, effectiveTrigger],
-    ([visible, trigger]) => {
-      outsideClickCleanup?.();
-      escapeKeyCleanup?.();
-      outsideClickCleanup = void 0;
-      escapeKeyCleanup = void 0;
-      if (visible && trigger === "click") {
-        outsideClickCleanup = useVueClickOutside({
-          enabled: currentVisible,
-          refs: [containerRef, floatingRef],
-          onOutsideClick: closeAndRestoreFocus,
-          defer: true
-        });
-      }
-      if (visible && trigger !== "manual") {
-        escapeKeyCleanup = useVueEscapeKey({
-          enabled: currentVisible,
-          onEscape: closeAndRestoreFocus
-        });
+  const overlay = useVueAnchoredOverlay({
+    enabled: currentVisible,
+    referenceRef: triggerRef,
+    floatingRef,
+    containerRef,
+    placement: props.placement ?? "top",
+    offset: props.offset ?? 8,
+    dismissOnOutside: computed(() => effectiveTrigger.value === "click"),
+    dismissOnEscape: computed(() => effectiveTrigger.value !== "manual"),
+    onDismiss: (reason) => {
+      if (reason === "escape") {
+        closeAndRestoreFocus();
+      } else {
+        setVisible(false);
       }
-    },
-    { immediate: true }
-  );
-  onBeforeUnmount(() => {
-    outsideClickCleanup?.();
-    escapeKeyCleanup?.();
+    }
   });
-  const floatingStyles = computed(() => ({
-    position: "absolute",
-    left: `${x.value}px`,
-    top: `${y.value}px`,
-    transformOrigin: getTransformOrigin(actualPlacement.value),
-    zIndex: FLOATING_OVERLAY_Z_INDEX
-  }));
+  const x = overlay.x;
+  const y = overlay.y;
   const handleToggle = () => {
     if (!props.disabled) setVisible(!currentVisible.value);
   };
@@ -125,8 +92,11 @@ function useFloatingPopup(options) {
     floatingRef,
     x,
     y,
-    actualPlacement,
-    floatingStyles,
+    actualPlacement: overlay.placement,
+    floatingStyles: overlay.floatingStyles,
+    floatingClasses: overlay.floatingClasses,
+    positioned: overlay.positioned,
+    overlayTarget: overlay.target,
     triggerHandlers,
     closeAndRestoreFocus
   };

package/dist/{chunk-H26JXVJX.mjs → chunk-2T2NEZRZ.mjs}

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

package/dist/chunk-4HUYX5WW.mjs

@@ -0,0 +1,239 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
+
+// src/components/ColorPicker.ts
+import { defineComponent, h, ref, computed, watch } from "vue";
+import {
+  colorPickerBaseClasses,
+  getColorPickerTriggerClasses,
+  colorPickerPanelClasses,
+  colorPickerInputClasses,
+  colorPickerPresetClasses,
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  formatColorString,
+  parseColorInput,
+  classNames,
+  coerceClassValue
+} from "@expcat/tigercat-core";
+var ColorPicker = defineComponent({
+  name: "TigerColorPicker",
+  props: {
+    modelValue: { type: String, default: "#2563eb" },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    showAlpha: { type: Boolean, default: false },
+    format: { type: String, default: "hex" },
+    presets: { type: Array, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const isOpen = ref(false);
+    const alpha = ref(1);
+    const containerRef = ref(null);
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: panelRef,
+      containerRef,
+      placement: "bottom-start",
+      offset: 4,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closePanel
+    });
+    const rgb = computed(() => hexToRgb(props.modelValue));
+    const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
+    const displayValue = computed(
+      () => formatColorString(
+        rgb.value.r,
+        rgb.value.g,
+        rgb.value.b,
+        props.format,
+        props.showAlpha ? alpha.value : void 0
+      )
+    );
+    const swatchColor = computed(
+      () => props.showAlpha ? `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value})` : props.modelValue
+    );
+    const inputValue = ref(displayValue.value);
+    watch(displayValue, (v) => {
+      inputValue.value = v;
+    });
+    function togglePanel() {
+      if (props.disabled) return;
+      isOpen.value = !isOpen.value;
+    }
+    function closePanel() {
+      isOpen.value = false;
+    }
+    function handleTriggerKeydown(e) {
+      if (props.disabled) return;
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+        e.preventDefault();
+        isOpen.value = !isOpen.value;
+      } else if (e.key === "Escape" && isOpen.value) {
+        isOpen.value = false;
+      }
+    }
+    function handleAlphaChange(e) {
+      alpha.value = Number(e.target.value) / 100;
+    }
+    function handleHueChange(e) {
+      const hue = Number(e.target.value);
+      const { r, g, b } = hsvToRgb(hue, hsv.value.s, hsv.value.v);
+      const hex = rgbToHex(r, g, b);
+      emit("update:modelValue", hex);
+      emit("change", hex);
+    }
+    function handleInputChange(e) {
+      const val = e.target.value;
+      inputValue.value = val;
+      const hex = parseColorInput(val);
+      if (hex) {
+        emit("update:modelValue", hex);
+        emit("change", hex);
+      }
+    }
+    function handlePresetClick(color) {
+      emit("update:modelValue", color);
+      emit("change", color);
+    }
+    function handlePresetKeydown(e, color) {
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+        e.preventDefault();
+        handlePresetClick(color);
+      }
+    }
+    return () => h(
+      "div",
+      {
+        ref: containerRef,
+        class: classNames(colorPickerBaseClasses, coerceClassValue(attrs.class))
+      },
+      [
+        // Color trigger swatch
+        h("div", {
+          ref: triggerRef,
+          class: getColorPickerTriggerClasses(props.size, props.disabled),
+          style: { backgroundColor: swatchColor.value },
+          role: "button",
+          "aria-label": "Pick color",
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen.value,
+          "aria-disabled": props.disabled || void 0,
+          tabindex: props.disabled ? -1 : 0,
+          onClick: togglePanel,
+          onKeydown: handleTriggerKeydown
+        }),
+        // Panel
+        isOpen.value ? renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: panelRef,
+              class: classNames(colorPickerPanelClasses, overlay.floatingClasses.value),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value
+            },
+            [
+              // Hue slider
+              h("div", { class: "mb-2" }, [
+                h(
+                  "label",
+                  { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
+                  "Hue"
+                ),
+                h("input", {
+                  type: "range",
+                  min: 0,
+                  max: 360,
+                  value: hsv.value.h,
+                  class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+                  "aria-label": "Hue",
+                  onInput: handleHueChange
+                })
+              ]),
+              // Alpha slider
+              props.showAlpha ? h("div", { class: "mb-2" }, [
+                h(
+                  "label",
+                  { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
+                  "Alpha"
+                ),
+                h("input", {
+                  type: "range",
+                  min: 0,
+                  max: 100,
+                  value: Math.round(alpha.value * 100),
+                  class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+                  "aria-label": "Alpha",
+                  onInput: handleAlphaChange
+                })
+              ]) : null,
+              // Color value input (rendered in the selected format)
+              h("div", { class: "mb-2" }, [
+                h(
+                  "label",
+                  {
+                    class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase"
+                  },
+                  props.format
+                ),
+                h("input", {
+                  type: "text",
+                  class: colorPickerInputClasses,
+                  value: inputValue.value,
+                  "aria-label": "Color value",
+                  onInput: handleInputChange
+                })
+              ]),
+              // Preview
+              h("div", { class: "flex items-center gap-2 mb-2" }, [
+                h("div", {
+                  class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
+                  style: { backgroundColor: swatchColor.value },
+                  "aria-label": "Color preview"
+                }),
+                h(
+                  "span",
+                  { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
+                  displayValue.value
+                )
+              ]),
+              // Presets
+              props.presets && props.presets.length > 0 ? h("div", { class: "flex flex-wrap gap-1" }, [
+                ...props.presets.map(
+                  (color) => h("div", {
+                    key: color,
+                    class: colorPickerPresetClasses,
+                    style: { backgroundColor: color },
+                    role: "button",
+                    tabindex: 0,
+                    "aria-label": `Select ${color}`,
+                    onClick: () => handlePresetClick(color),
+                    onKeydown: (e) => handlePresetKeydown(e, color)
+                  })
+                )
+              ]) : null
+            ]
+          ),
+          overlay.target.value
+        ) : null
+      ]
+    );
+  }
+});
+var ColorPicker_default = ColorPicker;
+
+export {
+  ColorPicker,
+  ColorPicker_default
+};

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",