@expcat/tigercat-vue 1.3.3 → 1.4.0

package/dist/{chunk-E3GVL5S4.js → chunk-FGM7KB2Q.js}

@@ -1,25 +1,25 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkZ26QGWO7js = require('./chunk-Z26QGWO7.js');
+var _chunkRUXIQ5EPjs = require('./chunk-RUXIQ5EP.js');
 
 
-var _chunkAEOREYSJjs = require('./chunk-AEOREYSJ.js');
+var _chunkRLPSCEBPjs = require('./chunk-RLPSCEBP.js');
 
 
 var _chunkXV6IYXAPjs = require('./chunk-XV6IYXAP.js');
 
 
-var _chunk25EYT2CBjs = require('./chunk-25EYT2CB.js');
-
-
 var _chunkBYNMOQBBjs = require('./chunk-BYNMOQBB.js');
 
 
-var _chunk2YFXJUBTjs = require('./chunk-2YFXJUBT.js');
+var _chunkPFWRFHSBjs = require('./chunk-PFWRFHSB.js');
 
 
 var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
 
+
+var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
+
 // src/components/DataTableWithToolbar.ts
 
 
@@ -181,10 +181,10 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     "page-change": (_current, _pageSize) => true,
     "page-size-change": (_current, _pageSize) => true,
     "update:hiddenColumnKeys": (_hiddenKeys) => true,
-    "hidden-columns-change": (_hiddenKeys) => true
+    "hidden-column-keys-change": (_hiddenKeys) => true
   },
   setup(props, { attrs, emit, slots }) {
-    const config = _chunk25EYT2CBjs.useTigerConfig.call(void 0, );
+    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
     const internalSearch = _vue.ref.call(void 0, _nullishCoalesce(_optionalChain([props, 'access', _ => _.toolbar, 'optionalAccess', _2 => _2.defaultSearchValue]), () => ( "")));
     const internalHiddenKeys = _vue.ref.call(void 0, 
       _nullishCoalesce(_nullishCoalesce(props.defaultHiddenColumnKeys, () => ( props.hiddenColumnKeys)), () => ( []))
@@ -288,7 +288,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         internalHiddenKeys.value = nextHiddenKeys;
       }
       emit("update:hiddenColumnKeys", nextHiddenKeys);
-      emit("hidden-columns-change", nextHiddenKeys);
+      emit("hidden-column-keys-change", nextHiddenKeys);
     };
     const handleToggleColumnVisibility = (columnKey, visible) => {
       const nextHiddenKeys = visible ? resolvedHiddenKeys.value.filter((key) => key !== columnKey) : [...resolvedHiddenKeys.value, columnKey];
@@ -404,7 +404,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
             props.columns.map((column) => {
               const locked = lockedKeys.has(column.key) || column.hideable === false;
               return _vue.h.call(void 0, 
-                _chunk2YFXJUBTjs.Checkbox,
+                _chunkPFWRFHSBjs.Checkbox,
                 {
                   key: column.key,
                   size: "sm",
@@ -527,25 +527,29 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
             return;
           }
           leftNodes.push(
-            _vue.h.call(void 0, "div", {
-              key: filter.key,
-              class: _nullishCoalesce(filter.itemClass, () => ( "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]")),
-              style: filter.itemStyle
-            }, [
-              _vue.h.call(void 0, _chunkAEOREYSJjs.Select, {
-                size: "sm",
-                options: (_nullishCoalesce(filter.options, () => ( []))).map((opt) => ({
-                  label: opt.label,
-                  value: opt.value
-                })),
-                modelValue: typeof currentValue === "string" || typeof currentValue === "number" ? currentValue : void 0,
-                placeholder: _nullishCoalesce(filter.placeholder, () => ( filter.label)),
-                clearable,
-                "onUpdate:modelValue": (value) => {
-                  handleFilterSelect(filter, _nullishCoalesce(value, () => ( null)));
-                }
-              })
-            ])
+            _vue.h.call(void 0, 
+              "div",
+              {
+                key: filter.key,
+                class: _nullishCoalesce(filter.itemClass, () => ( "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]")),
+                style: filter.itemStyle
+              },
+              [
+                _vue.h.call(void 0, _chunkRLPSCEBPjs.Select, {
+                  size: "sm",
+                  options: (_nullishCoalesce(filter.options, () => ( []))).map((opt) => ({
+                    label: opt.label,
+                    value: opt.value
+                  })),
+                  modelValue: typeof currentValue === "string" || typeof currentValue === "number" ? currentValue : void 0,
+                  placeholder: _nullishCoalesce(filter.placeholder, () => ( filter.label)),
+                  clearable,
+                  "onUpdate:modelValue": (value) => {
+                    handleFilterSelect(filter, _nullishCoalesce(value, () => ( null)));
+                  }
+                })
+              ]
+            )
           );
         })]);
       }
@@ -656,11 +660,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         onSelectionChange: (keys) => emit("selection-change", keys),
         onPageChange: handleTablePageChange
       };
-      const {
-        toolbar: _toolbarSlot,
-        "filters-extra": _filtersExtraSlot,
-        ...tableSlots
-      } = slots;
+      const { toolbar: _toolbarSlot, "filters-extra": _filtersExtraSlot, ...tableSlots } = slots;
       return _vue.h.call(void 0, 
         "div",
         {
@@ -668,7 +668,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           style: wrapperStyle.value,
           "data-tiger-data-table-with-toolbar": ""
         },
-        [renderToolbar(), _vue.h.call(void 0, _chunkZ26QGWO7js.Table, tableProps, tableSlots)]
+        [renderToolbar(), _vue.h.call(void 0, _chunkRUXIQ5EPjs.Table, tableProps, tableSlots)]
       );
     };
   }

package/dist/{chunk-4K2CCBFT.mjs → chunk-FISKCPTN.mjs}

@@ -162,15 +162,16 @@ var Alert = defineComponent({
     let countdownInterval;
     onMounted(() => {
       if (props.duration && props.duration > 0 && props.closable) {
+        const duration = props.duration;
         autoCloseTimer = setTimeout(() => {
           visible.value = false;
           emit("close", new MouseEvent("click"));
-        }, props.duration);
+        }, duration);
         if (props.showCountdown) {
           const startTime = Date.now();
           countdownInterval = setInterval(() => {
             const elapsed = Date.now() - startTime;
-            countdownProgress.value = Math.max(0, 100 - elapsed / props.duration * 100);
+            countdownProgress.value = Math.max(0, 100 - elapsed / duration * 100);
           }, 50);
         }
       }

package/dist/{chunk-OGDZTDZ6.mjs → chunk-GHG2MCLM.mjs}

@@ -4,6 +4,9 @@ import {
   useVueEscapeKey,
   useVueFocusTrap
 } from "./chunk-BDTPFPSB.mjs";
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
 
 // src/components/Spotlight.ts
 import {
@@ -31,6 +34,8 @@ import {
   getSpotlightSearchState,
   getSpotlightShortcutLabel,
   mergeStyleValues,
+  mergeTigerLocale,
+  resolveLocaleText,
   restoreFocus,
   shouldCloseOnMaskClick,
   spotlightEmptyClasses,
@@ -76,11 +81,15 @@ var Spotlight = defineComponent({
     },
     placeholder: {
       type: String,
-      default: "Search"
+      default: void 0
     },
     emptyText: {
       type: String,
-      default: "No results found"
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
     },
     inputAriaLabel: {
       type: String,
@@ -131,8 +140,13 @@ var Spotlight = defineComponent({
       default: false
     }
   },
-  emits: ["update:open", "open-change", "close", "update:query", "query-change", "select"],
+  emits: ["update:open", "open-change", "update:query", "query-change", "select"],
   setup(props, { emit, attrs, slots }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const placeholderText = computed(
+      () => resolveLocaleText("Search", props.placeholder, mergedLocale.value?.common?.searchPlaceholder)
+    );
     const uncontrolledOpen = ref(props.defaultOpen);
     const uncontrolledQuery = ref(props.defaultQuery);
     const activeIndex = ref(-1);
@@ -154,7 +168,6 @@ var Spotlight = defineComponent({
       if (props.open === void 0) uncontrolledOpen.value = nextOpen;
       emit("update:open", nextOpen);
       emit("open-change", nextOpen);
-      if (!nextOpen) emit("close");
     };
     const setQueryValue = (nextQuery) => {
       if (props.query === void 0) uncontrolledQuery.value = nextQuery;
@@ -275,8 +288,8 @@ var Spotlight = defineComponent({
                   value: resolvedQuery.value,
                   type: "search",
                   class: spotlightInputClasses,
-                  placeholder: props.placeholder,
-                  "aria-label": props.inputAriaLabel ?? props.placeholder,
+                  placeholder: placeholderText.value,
+                  "aria-label": props.inputAriaLabel ?? placeholderText.value,
                   autocomplete: "off",
                   ...getPickerComboboxAria({
                     expanded: true,
@@ -356,7 +369,15 @@ var Spotlight = defineComponent({
                     ]
                   )
                 )
-              ) : h("div", { class: spotlightEmptyClasses }, props.emptyText)
+              ) : h(
+                "div",
+                { class: spotlightEmptyClasses },
+                resolveLocaleText(
+                  "No results found",
+                  props.emptyText,
+                  mergedLocale.value?.common?.emptyText
+                )
+              )
             ]
           )
         ]

package/dist/{chunk-F7WZCYYD.mjs → chunk-GL63FRI4.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-VG6E4NX6.mjs";
+} from "./chunk-R6WFL6NI.mjs";
 
 // src/components/Pagination.ts
 import {

package/dist/{chunk-K4VUUEFQ.mjs → chunk-GRP54POG.mjs}

@@ -117,7 +117,7 @@ var CommentThread = defineComponent({
       default: void 0
     }
   },
-  emits: ["like", "reply", "more", "action", "expand-change", "load-more"],
+  emits: ["like", "reply", "more", "action", "update:expandedKeys", "load-more"],
   setup(props, { emit, attrs }) {
     const innerExpandedKeys = ref([...props.defaultExpandedKeys]);
     const expandedAllKeys = ref(/* @__PURE__ */ new Set());
@@ -141,7 +141,7 @@ var CommentThread = defineComponent({
       if (!props.expandedKeys) {
         innerExpandedKeys.value = next;
       }
-      emit("expand-change", next);
+      emit("update:expandedKeys", next);
     };
     const toggleExpanded = (id) => {
       const current = mergedExpandedKeys.value;
@@ -167,13 +167,14 @@ var CommentThread = defineComponent({
     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 hasChildren = !!node.children && node.children.length > 0;
+      const children = node.children ?? [];
+      const hasChildren = children.length > 0;
       const isExpanded = expandedSet.value.has(node.id);
       const showReplies = hasChildren && isExpanded;
       const showAllReplies = expandedAllKeys.value.has(node.id);
       const repliesId = `tiger-comment-replies-${node.id}`;
-      const visibleChildren = showReplies ? props.maxReplies > 0 && !showAllReplies ? node.children.slice(0, props.maxReplies) : node.children : [];
-      const showLoadMore = showReplies && props.maxReplies > 0 && node.children.length > props.maxReplies && !showAllReplies;
+      const visibleChildren = showReplies ? props.maxReplies > 0 && !showAllReplies ? children.slice(0, props.maxReplies) : children : [];
+      const showLoadMore = showReplies && props.maxReplies > 0 && children.length > props.maxReplies && !showAllReplies;
       const actions = [];
       if (props.showLike) {
         const likeLabel = node.liked ? props.likedText : props.likeText;
@@ -194,17 +195,24 @@ var CommentThread = defineComponent({
             },
             {
               default: () => h("span", { class: "flex items-center gap-1.5" }, [
-                h("svg", {
-                  class: classNames("w-3.5 h-3.5 transition-transform duration-200 active:scale-125", node.liked ? "fill-current" : "stroke-current fill-none"),
-                  viewBox: "0 0 24 24",
-                  strokeWidth: "2"
-                }, [
-                  h("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.421.068.848.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 010-7.764c.26-.85.1083-1.368 1.972-1.368h.908c.445 0 .72.498.523.898a8.963 8.963 0 00-.27.602"
-                  })
-                ]),
+                h(
+                  "svg",
+                  {
+                    class: classNames(
+                      "w-3.5 h-3.5 transition-transform duration-200 active:scale-125",
+                      node.liked ? "fill-current" : "stroke-current fill-none"
+                    ),
+                    viewBox: "0 0 24 24",
+                    strokeWidth: "2"
+                  },
+                  [
+                    h("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.421.068.848.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 010-7.764c.26-.85.1083-1.368 1.972-1.368h.908c.445 0 .72.498.523.898a8.963 8.963 0 00-.27.602"
+                    })
+                  ]
+                ),
                 h("span", `${likeLabel}${likeCount}`)
               ])
             }
@@ -230,19 +238,23 @@ var CommentThread = defineComponent({
             },
             {
               default: () => h("span", { class: "flex items-center gap-1.5" }, [
-                h("svg", {
-                  class: "w-3.5 h-3.5",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2"
-                }, [
-                  h("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                  })
-                ]),
+                h(
+                  "svg",
+                  {
+                    class: "w-3.5 h-3.5",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2"
+                  },
+                  [
+                    h("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                    })
+                  ]
+                ),
                 h("span", props.replyText)
               ])
             }
@@ -265,19 +277,23 @@ var CommentThread = defineComponent({
             },
             {
               default: () => h("span", { class: "flex items-center gap-1.5" }, [
-                h("svg", {
-                  class: "w-3.5 h-3.5",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2"
-                }, [
-                  h("path", {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
-                  })
-                ]),
+                h(
+                  "svg",
+                  {
+                    class: "w-3.5 h-3.5",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2"
+                  },
+                  [
+                    h("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+                    })
+                  ]
+                ),
                 h("span", props.moreText)
               ])
             }
@@ -294,10 +310,7 @@ 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(ACTION_BTN, "hover:bg-gray-100 dark:hover:bg-gray-800"),
                 disabled: action.disabled,
                 onClick: () => {
                   action.onClick?.(node, action);
@@ -331,17 +344,31 @@ var CommentThread = defineComponent({
               h("div", { class: "flex items-center gap-2 flex-wrap" }, [
                 node.user?.name ? h(
                   Text,
-                  { 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" },
+                  {
+                    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"
+                  },
                   { default: () => node.user?.name }
                 ) : null,
                 node.user?.title ? h(
                   Text,
-                  { 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" },
+                  {
+                    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"
+                  },
                   { default: () => node.user?.title }
                 ) : null,
                 node.tag ? h(
                   Tag,
-                  { size: "sm", variant: node.tag.variant ?? "default", className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10" },
+                  {
+                    size: "sm",
+                    variant: node.tag.variant ?? "default",
+                    className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10"
+                  },
                   { default: () => node.tag?.label }
                 ) : null,
                 ...(node.tags ?? []).map(
@@ -358,7 +385,12 @@ var CommentThread = defineComponent({
                 ),
                 node.time ? h(
                   Text,
-                  { tag: "span", size: "xs", color: "muted", class: "ml-auto text-gray-400 dark:text-gray-500 font-normal" },
+                  {
+                    tag: "span",
+                    size: "xs",
+                    color: "muted",
+                    class: "ml-auto text-gray-400 dark:text-gray-500 font-normal"
+                  },
                   { default: () => formatCommentTime(node.time) }
                 ) : null
               ]),
@@ -417,13 +449,16 @@ 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),
+                  className: classNames(
+                    "mt-2 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10 transition-colors",
+                    PRIMARY_BTN
+                  ),
                   "aria-expanded": isExpanded,
                   "aria-controls": repliesId,
                   onClick: () => toggleExpanded(node.id)
                 },
                 {
-                  default: () => isExpanded ? "\u25BE \u6536\u8D77\u56DE\u590D" : `\u25B8 \u5C55\u5F00 ${node.children.length} \u6761\u56DE\u590D`
+                  default: () => isExpanded ? "\u25BE \u6536\u8D77\u56DE\u590D" : `\u25B8 \u5C55\u5F00 ${children.length} \u6761\u56DE\u590D`
                 }
               ) : null,
               showReplies ? h(
@@ -458,21 +493,27 @@ var CommentThread = defineComponent({
       const children = resolvedNodes.value.length === 0 ? [
         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: "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"
+          },
           [
-            h("svg", {
-              class: "w-10 h-10 text-gray-300 dark:text-gray-600 mb-3",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              strokeWidth: "1.5"
-            }, [
-              h("path", {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-              })
-            ]),
+            h(
+              "svg",
+              {
+                class: "w-10 h-10 text-gray-300 dark:text-gray-600 mb-3",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              },
+              [
+                h("path", {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                })
+              ]
+            ),
             h(
               Text,
               { tag: "div", size: "sm", color: "muted", class: "font-medium" },