@wpic/ui 0.6.1 → 0.6.3

package/dist/wpic-ui.css

@@ -404,9 +404,21 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
 .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active,
 .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active:hover:not(:disabled) { color: var(--wpic-text); background: var(--wpic-segment-active); box-shadow: var(--wpic-segment-shadow); }
 .wpic-theme .wpic-segmented-control .wpic-segmented-control__button:focus-visible { outline: 1px solid var(--wpic-accent); box-shadow: 0 0 0 3px var(--wpic-focus-ring); }
-.wpic-theme .wpic-modal-panel,
-.wpic-theme.wpic-tooltip-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
-.wpic-theme.wpic-tooltip-panel { box-shadow: inset 0 0 0 1px var(--wpic-border), 0 4px 12px rgb(0 0 0 / 0.15); }
+.wpic-theme .wpic-modal-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
+/* Tooltips keep an inverse surface, independent of popover customization. */
+.wpic-tooltip-panel {
+  background: #242720;
+  color: #f7f8f5;
+  border: 1px solid rgb(255 255 255 / 0.12);
+  border-radius: 8px;
+  padding: 7px 11px;
+  box-shadow: 0 5px 16px rgb(0 0 0 / 0.2);
+}
+.dark .wpic-tooltip-panel:not([data-wpic-theme="light"]),
+.wpic-tooltip-panel[data-wpic-theme="dark"] {
+  background: #090a05;
+  border: 0;
+}
 .wpic-theme .wpic-modal-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
 .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
 .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }

package/dist/wpic-ui.js

@@ -1,4 +1,4 @@
-import { defineComponent as X, openBlock as e, createBlock as O, resolveDynamicComponent as $1, normalizeClass as p, withCtx as h1, createElementVNode as a, createCommentVNode as m, renderSlot as q, createElementBlock as l, createVNode as w, unref as f, Fragment as W, renderList as a1, toDisplayString as z, useModel as G1, useSlots as Q2, computed as M, ref as F, mergeProps as h2, createTextVNode as b1, withDirectives as P1, vModelDynamic as b0, mergeModels as _1, vModelCheckbox as Y0, watch as L1, normalizeStyle as f1, withModifiers as p1, onMounted as P2, onBeforeUnmount as p2, withKeys as M2, inject as J2, provide as s2, isRef as q0, nextTick as H1, Teleport as W1, vShow as Q0, Transition as X1, vModelText as c2, useAttrs as J0, getCurrentInstance as X0, onUnmounted as G0, TransitionGroup as _0, useCssVars as n3, vModelSelect as e3, createStaticVNode as A1 } from "vue";
+import { defineComponent as X, openBlock as e, createBlock as O, resolveDynamicComponent as $1, normalizeClass as p, withCtx as h1, createElementVNode as a, createCommentVNode as m, renderSlot as q, createElementBlock as l, createVNode as w, unref as f, Fragment as W, renderList as a1, toDisplayString as z, useModel as G1, useSlots as Q2, computed as M, ref as F, mergeProps as h2, createTextVNode as b1, withDirectives as P1, vModelDynamic as b0, mergeModels as _1, vModelCheckbox as Y0, watch as M1, normalizeStyle as f1, withModifiers as p1, onMounted as P2, onBeforeUnmount as p2, withKeys as M2, inject as J2, provide as s2, isRef as q0, nextTick as H1, Teleport as W1, vShow as Q0, Transition as X1, vModelText as c2, useAttrs as J0, getCurrentInstance as X0, onUnmounted as G0, TransitionGroup as _0, useCssVars as n3, vModelSelect as e3, createStaticVNode as A1 } from "vue";
 import { Loader2 as i2, Calendar as p0, DollarSign as t3, X as B1, Check as K1, Search as T2, ChevronUp as g0, ChevronDown as U1, ChevronsUpDown as X2, ChevronRight as T1, ChevronLeft as g2, Download as l3, Minimize as a3, Expand as c3, CalendarDays as j2, FolderSymlink as i3, Minimize2 as o3, Maximize2 as s3, Plus as w2, Trash2 as r3, Folder as v0, MoreHorizontal as d3, Bot as u3, Paperclip as O2, ThumbsUp as h3, ThumbsDown as v3, Copy as m3, Pencil as f3, MessageSquarePlus as z3, Square as b3, ArrowUp as p3, CircleAlert as g3, CircleCheck as C3, ShieldAlert as k3, Lightbulb as x3, PanelLeftOpen as y3, PanelLeftClose as w3, AlertTriangle as M3, Tag as F2, Clock as V3, RefreshCw as L3 } from "lucide-vue-next";
 import { offset as v2, flip as m2, shift as f2, size as G2, useFloating as z2, autoUpdate as b2 } from "@floating-ui/vue";
 import { defineStore as B3 } from "pinia";
@@ -26,7 +26,7 @@ const $3 = {
       "data-variant": t.variant ?? "primary",
       "data-size": t.size ?? "md",
       "data-active": n.active ? "true" : void 0,
-      onClick: c[0] || (c[0] = (o) => !n.href && s("click", o)),
+      onClick: c[0] || (c[0] = (o) => s("click", o)),
       class: p([
         "wpic-button",
         "relative inline-flex items-center justify-center font-medium transition-all duration-150 cursor-pointer select-none",
@@ -352,8 +352,8 @@ const $3 = {
       if (x.value) {
         const J = x.value;
         H = [...H].sort((I, Q) => {
-          const c1 = I[J] ?? "", w1 = Q[J] ?? "", M1 = typeof c1 == "number" && typeof w1 == "number" ? c1 - w1 : String(c1).toLowerCase().localeCompare(String(w1).toLowerCase());
-          return i.value === "asc" ? M1 : -M1;
+          const c1 = I[J] ?? "", w1 = Q[J] ?? "", V1 = typeof c1 == "number" && typeof w1 == "number" ? c1 - w1 : String(c1).toLowerCase().localeCompare(String(w1).toLowerCase());
+          return i.value === "asc" ? V1 : -V1;
         });
       }
       return H;
@@ -363,7 +363,7 @@ const $3 = {
         k.value ? u("update:serverPage", H) : V.value = H;
       }
     }), r1 = M(() => k.value ? s.serverTotal ?? 0 : S.value.length), g1 = M(() => Math.max(1, Math.ceil(r1.value / C.value)));
-    L1([$, () => s.data], () => {
+    M1([$, () => s.data], () => {
       k.value || (K.value = 1), c.value.clear();
     });
     const Z = M(() => {
@@ -393,7 +393,7 @@ const $3 = {
       if (H <= 7) return Array.from({ length: H }, (c1, w1) => w1 + 1);
       const d1 = K.value, J = [], I = new Set([1, H, d1 - 1, d1, d1 + 1].filter((c1) => c1 >= 1 && c1 <= H));
       let Q = 0;
-      for (const c1 of [...I].sort((w1, M1) => w1 - M1))
+      for (const c1 of [...I].sort((w1, V1) => w1 - V1))
         c1 - Q > 1 && J.push("…"), J.push(c1), Q = c1;
       return J;
     }), l1 = (H) => H === "right" ? "text-right" : H === "center" ? "text-center" : "text-left", z1 = (H, d1) => [
@@ -682,9 +682,9 @@ const $3 = {
         console.debug(`[WSpreadsheet] ${B ? "expand" : "minimize"} painted in ${(performance.now() - N).toFixed(1)}ms`);
       }));
     }
-    L1(() => s.expanded, (B) => {
+    M1(() => s.expanded, (B) => {
       B != null && K(B, !1);
-    }), L1(() => s.downloadRequest, (B, U) => {
+    }), M1(() => s.downloadRequest, (B, U) => {
       B != null && B !== U && k();
     }), h({
       expand: () => {
@@ -820,7 +820,7 @@ const $3 = {
         B.class || ""
       ];
     }
-    function M1(B, U, N) {
+    function V1(B, U, N) {
       const u1 = N.target.value;
       u("cell-change", { rowKey: B.key, cellKey: U.key, value: u1, row: B, cell: U });
     }
@@ -940,7 +940,7 @@ const $3 = {
                         value: s1.value ?? "",
                         min: s1.min,
                         placeholder: s1.placeholder,
-                        onInput: (Y) => M1(N, s1, Y)
+                        onInput: (Y) => V1(N, s1, Y)
                       }, null, 42, M4),
                       s1.inputType === "date" ? (e(), l("button", {
                         key: 0,
@@ -1171,13 +1171,13 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
     function A() {
       D && (document.removeEventListener("pointerdown", r1, !0), document.removeEventListener("keydown", g1, !0), D = !1);
     }
-    L1(() => t.open, (j) => {
+    M1(() => t.open, (j) => {
       j ? H1(() => {
         Z || !t.open || (V(), T());
       }) : (i.value = null, A());
-    }, { immediate: !0 }), L1(x, (j, e1) => {
+    }, { immediate: !0 }), M1(x, (j, e1) => {
       e1 && o?.remove(e1), j && o?.add(j);
-    }), L1(k, (j) => {
+    }), M1(k, (j) => {
       j && t.open && t.freezePositionOnOpen && !i.value && (i.value = S.value);
     }), p2(() => {
       Z = !0, A(), x.value && o?.remove(x.value);
@@ -1392,13 +1392,13 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
       }
       return d;
     }
-    function M1(r, d) {
+    function V1(r, d) {
       return r.match(new RegExp(`${d}=["']([^"']+)["']`, "i"))?.[1];
     }
     function n2(r) {
       const d = {};
       for (const y of r.matchAll(/\[SETTING\s+([^\]]+)\]([\s\S]*?)\[\/SETTING\]/gi)) {
-        const g = y[1] ?? "", L = M1(g, "key"), n1 = M1(g, "value") ?? y[2]?.trim();
+        const g = y[1] ?? "", L = V1(g, "key"), n1 = V1(g, "value") ?? y[2]?.trim();
         if (!(!L || !n1))
           if (L === "duration" || L === "fps" || L === "count") {
             const o1 = Number(n1);
@@ -1432,7 +1432,7 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
     function B(r) {
       const d = r.match(/\[TASK(?:\s+([^\]]+))?\](?:([\s\S]*?)\[\/TASK\])?/i);
       if (d) {
-        const y = (M1(d[1] ?? "", "value") ?? d[2]?.trim())?.toLowerCase();
+        const y = (V1(d[1] ?? "", "value") ?? d[2]?.trim())?.toLowerCase();
         if (["image", "video", "audio", "text"].includes(String(y))) return y;
       }
       const v = r.split(/\r?\n/).map((y) => y.replace(/^[\s>*-]+/, "").trim()).filter(Boolean);
@@ -1718,7 +1718,7 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
     function S0(r) {
       if (r.role === "assistant" && r.streaming && E(r.content))
         return "<p>Preparing image...</p>";
-      const d = [], v = r.content.replace(/\[PROMPT\]([\s\S]*?)\[\/PROMPT\]/gi, (V1, F1) => {
+      const d = [], v = r.content.replace(/\[PROMPT\]([\s\S]*?)\[\/PROMPT\]/gi, (L1, F1) => {
         const S1 = e2(F1).trim();
         if (!S1) return F1;
         const S2 = d.push(S1) - 1;
@@ -1736,12 +1736,12 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
       }, E1 = () => {
         L && (g.push(`<pre><code>${D1(n1.join(`
 `))}</code></pre>`), n1 = [], L = !1);
-      }, Q1 = (V1) => {
-        const F1 = V1.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((S1) => S1.trim());
+      }, Q1 = (L1) => {
+        const F1 = L1.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((S1) => S1.trim());
         return F1.length > 1 && F1.every((S1) => /^:?-{3,}:?$/.test(S1));
-      }, R1 = (V1) => V1.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((F1) => F1.trim());
-      for (let V1 = 0; V1 < y.length; V1 += 1) {
-        const F1 = y[V1];
+      }, R1 = (L1) => L1.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((F1) => F1.trim());
+      for (let L1 = 0; L1 < y.length; L1 += 1) {
+        const F1 = y[L1];
         if (F1.trim().startsWith("```")) {
           L ? E1() : (y1(), x1(), L = !0, n1 = []);
           continue;
@@ -1761,10 +1761,10 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
           y1(), x1();
           continue;
         }
-        if (!m1 && S1.includes("|") && y[V1 + 1] && Q1(y[V1 + 1])) {
+        if (!m1 && S1.includes("|") && y[L1 + 1] && Q1(y[L1 + 1])) {
           x1();
           const N1 = R1(S1);
-          g.push('<div class="wpic-chat-table-wrap"><table><thead><tr>'), g.push(N1.map((U2) => `<th>${k2(U2, r)}</th>`).join("")), g.push("</tr></thead><tbody>"), m1 = !0, V1 += 1;
+          g.push('<div class="wpic-chat-table-wrap"><table><thead><tr>'), g.push(N1.map((U2) => `<th>${k2(U2, r)}</th>`).join("")), g.push("</tr></thead><tbody>"), m1 = !0, L1 += 1;
           continue;
         }
         if (m1) {
@@ -1790,13 +1790,13 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
         y1(), x1(), g.push(`<p>${k2(S1, r)}</p>`);
       }
       E1(), y1(), x1();
-      const a2 = W2(r).find((V1) => V1.type === "apply_all" && !V1.exactText), Z1 = q1(r);
+      const a2 = W2(r).find((L1) => L1.type === "apply_all" && !L1.exactText), Z1 = q1(r);
       if (!(r.role === "assistant" && s1(r.content))) {
         if (a2)
           g.push(`<p class="wpic-chat-actions-end">${t0(a2, t.applyAllLabel)}</p>`);
         else if (r.role === "assistant" && !r.streaming && !r.error && Z1) {
-          const V1 = [];
-          Z1.prompt && !N(r.content) && V1.push(t2(t.applyPromptLabel, "prompt")), (Z1.settings || Z1.taskType && u1(r.content)) && V1.push(t2(t.applyAllLabel, "all")), V1.length && g.push(`<p class="wpic-chat-actions-end">${V1.join(" ")}</p>`);
+          const L1 = [];
+          Z1.prompt && !N(r.content) && L1.push(t2(t.applyPromptLabel, "prompt")), (Z1.settings || Z1.taskType && u1(r.content)) && L1.push(t2(t.applyAllLabel, "all")), L1.length && g.push(`<p class="wpic-chat-actions-end">${L1.join(" ")}</p>`);
         }
       }
       return g.join("");
@@ -2022,8 +2022,8 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
       r1.value = !0;
       const y = r.clientX, g = r.clientY, L = v.width, n1 = v.height, o1 = v.left, m1 = v.top, x1 = (E1) => {
         const Q1 = E1.clientX - y, R1 = E1.clientY - g;
-        let a2 = L, Z1 = n1, V1 = o1, F1 = m1;
-        d.includes("e") && (a2 = Math.max(t.minWidth, L + Q1)), d.includes("s") && (Z1 = Math.max(t.minHeight, n1 + R1)), d.includes("w") && (a2 = Math.max(t.minWidth, L - Q1), V1 = o1 + (L - a2)), d.includes("n") && (Z1 = Math.max(t.minHeight, n1 - R1), F1 = Math.max(t.topOffset, m1 + (n1 - Z1))), s("update:width", Math.min(a2, window.innerWidth)), s("update:height", Math.min(Z1, window.innerHeight - t.topOffset)), t.docked || (s("update:x", Math.max(0, V1)), s("update:y", Math.max(t.topOffset, F1)));
+        let a2 = L, Z1 = n1, L1 = o1, F1 = m1;
+        d.includes("e") && (a2 = Math.max(t.minWidth, L + Q1)), d.includes("s") && (Z1 = Math.max(t.minHeight, n1 + R1)), d.includes("w") && (a2 = Math.max(t.minWidth, L - Q1), L1 = o1 + (L - a2)), d.includes("n") && (Z1 = Math.max(t.minHeight, n1 - R1), F1 = Math.max(t.topOffset, m1 + (n1 - Z1))), s("update:width", Math.min(a2, window.innerWidth)), s("update:height", Math.min(Z1, window.innerHeight - t.topOffset)), t.docked || (s("update:x", Math.max(0, L1)), s("update:y", Math.max(t.topOffset, F1)));
       }, y1 = () => {
         r1.value = !1, document.removeEventListener("mousemove", x1), document.removeEventListener("mouseup", y1);
       };
@@ -2035,10 +2035,10 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
         r && (r.scrollTop = r.scrollHeight);
       });
     }
-    return L1(() => t.messages.map((r) => r.content).join(`
-`), u0), L1([() => t.selectedSessionId, () => t.loading, () => t.messages.length], () => {
+    return M1(() => t.messages.map((r) => r.content).join(`
+`), u0), M1([() => t.selectedSessionId, () => t.loading, () => t.messages.length], () => {
       A.value && t.selectedSessionId === A.value && !t.loading && (A.value = null);
-    }), L1(() => t.modelValue, x2), L1(() => t.open, (r) => {
+    }), M1(() => t.modelValue, x2), M1(() => t.open, (r) => {
       r && (u0(), x2(), H1(() => {
         b.value?.focus(), e1();
       }));
@@ -2775,7 +2775,7 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
     }
     P2(() => {
       c = window.location.pathname, R(), window.addEventListener("popstate", R);
-    }), p2(() => window.removeEventListener("popstate", R)), L1(
+    }), p2(() => window.removeEventListener("popstate", R)), M1(
       () => t.modelValue,
       (S) => {
         const V = x();
@@ -2900,9 +2900,9 @@ const H4 = ["data-wpic-theme"], r2 = /* @__PURE__ */ X({
   emits: ["update:modelValue", "open-change"],
   setup(n, { emit: h }) {
     const t = n, s = h, u = (D) => typeof D == "object" && D !== null ? D : { value: D, label: String(D), icon: void 0, iconKey: void 0, meta: void 0, metaVariant: void 0 }, c = F(!1), o = F(null), b = F(null), C = F(""), x = F(t.multiple ? [...t.modelValue ?? []] : []);
-    L1(() => t.modelValue, (D) => {
+    M1(() => t.modelValue, (D) => {
       t.multiple && (x.value = [...D ?? []]);
-    }, { deep: !0 }), L1(c, (D) => {
+    }, { deep: !0 }), M1(c, (D) => {
       s("open-change", D), D && t.searchable && H1(() => b.value?.focus()), D || (C.value = "");
     });
     const i = M(() => (t.options ?? []).map(u)), R = M(() => {
@@ -3302,7 +3302,7 @@ const H6 = {
     function P() {
       t.disabled || (t.checkable ? s("update:checked", !t.checked) : t.editable && (b.value = !b.value));
     }
-    return L1(() => [t.disabled, t.checkable, t.editable], () => {
+    return M1(() => [t.disabled, t.checkable, t.editable], () => {
       (t.disabled || t.checkable || !t.editable) && (b.value = !1);
     }), (S, V) => (e(), l(W, null, [
       (e(), O($1(C.value && !n.removable ? "button" : "span"), h2({
@@ -3675,7 +3675,7 @@ const _l = /* @__PURE__ */ X({
     const t = n, s = h;
     s2("wpic-pagination-url-sync", !1);
     let u = !1;
-    return L1(() => t.open, (c) => {
+    return M1(() => t.open, (c) => {
       c !== u && (u = c, c ? (J1++, J1 === 1 && (document.body.style.overflow = "hidden")) : (J1 = Math.max(0, J1 - 1), J1 === 0 && (document.body.style.overflow = "")));
     }, { immediate: !0 }), G0(() => {
       u && (u = !1, J1 = Math.max(0, J1 - 1), J1 === 0 && (document.body.style.overflow = ""));
@@ -4195,10 +4195,10 @@ const ia = /* @__PURE__ */ O1(n7, [["render", t7]]), l7 = ["placeholder", "rows"
       middleware: [v2(4), m2({ padding: 8 }), f2({ padding: 8 })],
       whileElementsMounted: b2
     }), x = /* @__PURE__ */ new Date(), i = F(x.getFullYear()), R = F(x.getMonth()), $ = M(() => R.value === 11 ? i.value + 1 : i.value), P = M(() => R.value === 11 ? 0 : R.value + 1), S = F(null), V = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], k = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], K = (I, Q) => {
-      const w1 = (new Date(I, Q, 1).getDay() + 6) % 7, M1 = new Date(I, Q + 1, 0).getDate(), n2 = new Date(I, Q, 0).getDate(), B = [];
+      const w1 = (new Date(I, Q, 1).getDay() + 6) % 7, V1 = new Date(I, Q + 1, 0).getDate(), n2 = new Date(I, Q, 0).getDate(), B = [];
       for (let N = w1 - 1; N >= 0; N--)
         B.push({ day: n2 - N, month: Q - 1, year: I, outside: !0 });
-      for (let N = 1; N <= M1; N++)
+      for (let N = 1; N <= V1; N++)
         B.push({ day: N, month: Q, year: I, outside: !1 });
       const U = 42 - B.length;
       for (let N = 1; N <= U; N++)
@@ -4249,9 +4249,9 @@ const ia = /* @__PURE__ */ O1(n7, [["render", t7]]), l7 = ["placeholder", "rows"
       const I = t.modelValue;
       return I?.start ? `${H(I.start)} → ${I.end ? H(I.end) : "..."}` : "";
     });
-    L1(c, (I) => {
+    M1(c, (I) => {
       I || (S.value = null);
-    }), L1(c, (I) => {
+    }), M1(c, (I) => {
       if (!I || !T.value) return;
       const [Q, c1] = T.value.split("-").map(Number);
       i.value = Q, R.value = c1 - 1;
@@ -4323,9 +4323,9 @@ const ia = /* @__PURE__ */ O1(n7, [["render", t7]]), l7 = ["placeholder", "rows"
             a("div", f7, [
               (e(!0), l(W, null, a1(r1.value, (c1, w1) => (e(), l("button", {
                 key: w1,
-                onClick: (M1) => i1(c1),
-                onMouseenter: (M1) => j.value = Z(c1),
-                onMouseleave: Q[1] || (Q[1] = (M1) => j.value = null),
+                onClick: (V1) => i1(c1),
+                onMouseenter: (V1) => j.value = Z(c1),
+                onMouseleave: Q[1] || (Q[1] = (V1) => j.value = null),
                 type: "button",
                 class: p(["h-8 w-full flex items-center justify-center rounded-lg transition cursor-pointer", J(c1)])
               }, z(c1.day), 43, z7))), 128))
@@ -4354,9 +4354,9 @@ const ia = /* @__PURE__ */ O1(n7, [["render", t7]]), l7 = ["placeholder", "rows"
               a("div", k7, [
                 (e(!0), l(W, null, a1(g1.value, (c1, w1) => (e(), l("button", {
                   key: w1,
-                  onClick: (M1) => i1(c1),
-                  onMouseenter: (M1) => j.value = Z(c1),
-                  onMouseleave: Q[2] || (Q[2] = (M1) => j.value = null),
+                  onClick: (V1) => i1(c1),
+                  onMouseenter: (V1) => j.value = Z(c1),
+                  onMouseleave: Q[2] || (Q[2] = (V1) => j.value = null),
                   type: "button",
                   class: p(["h-8 w-full flex items-center justify-center rounded-lg transition cursor-pointer", J(c1)])
                 }, z(c1.day), 43, x7))), 128))
@@ -4769,7 +4769,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
     function w1(E) {
       E.key === "Enter" && (j && clearTimeout(j), n2()), E.key === "Escape" && (U(), T.value = !1);
     }
-    async function M1(E) {
+    async function V1(E) {
       if (z1(E)) return;
       S.value = "confirming", T.value = !1;
       const Y = t.modelValue ?? [];
@@ -4789,7 +4789,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
         (_) => Object.values(_.translations ?? {}).some((k1) => k1.value?.toLowerCase() === E.toLowerCase()) || _.slug === E.toLowerCase()
       );
       if (Y) {
-        M1(Y);
+        V1(Y);
         return;
       }
       if (t.resolveFn) {
@@ -4797,7 +4797,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
         try {
           const _ = await t.resolveFn(E, t.locale);
           if (V.value = _, _.existed && !z1(_)) {
-            await M1(_), V.value = null;
+            await V1(_), V.value = null;
             return;
           }
           S.value = "preview";
@@ -4960,7 +4960,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
             (e(!0), l(W, null, a1(H.value, (_) => (e(), l("button", {
               key: _.tag_id,
               class: p(["w-full text-left px-3 py-2 hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer transition flex items-center gap-2", z1(_) ? "opacity-40 cursor-default" : "text-zinc-600 dark:text-zinc-400"]),
-              onMousedown: p1((k1) => !z1(_) && M1(_), ["prevent"])
+              onMousedown: p1((k1) => !z1(_) && V1(_), ["prevent"])
             }, [
               w(f(F2), {
                 size: 11,
@@ -5156,7 +5156,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
       ],
       whileElementsMounted: b2
     });
-    L1(u, (j) => {
+    M1(u, (j) => {
       j ? H1(() => x.value?.focus()) : o.value = null;
     });
     const S = M(() => {
@@ -5394,7 +5394,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
     function x() {
       o && clearTimeout(o), c.value = !1;
     }
-    return p2(x), L1(() => h.disabled, (i) => {
+    return p2(x), M1(() => h.disabled, (i) => {
       i && x();
     }), (i, R) => (e(), l(W, null, [
       a("span", {
@@ -5425,7 +5425,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
               ref_key: "floating",
               ref: u,
               style: f1([f(t)?.variables, f(b)]),
-              class: p([{ "wpic-theme": f(t), dark: f(t)?.mode === "dark" }, "wpic-tooltip-panel pointer-events-none z-[9999] max-w-[200px] whitespace-pre-line break-words rounded-md bg-zinc-900 px-2 py-1 text-base font-medium text-zinc-100 shadow-md dark:bg-zinc-700"]),
+              class: p([{ "wpic-theme": f(t), dark: f(t)?.mode === "dark" }, "wpic-tooltip-panel pointer-events-none z-[9999] max-w-[200px] whitespace-pre-line break-words text-base font-medium"]),
               "data-wpic-theme": f(t)?.mode,
               role: "tooltip"
             }, z(n.content), 15, P8)) : m("", !0)
@@ -5839,22 +5839,27 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
     size: {}
   },
   setup(n) {
-    const h = n, t = M(() => ({
+    const h = n, t = F(!1);
+    M1(() => h.src, () => {
+      t.value = !1;
+    });
+    const s = M(() => !!h.src && !t.value), u = M(() => ({
       sm: "w-6 h-6 text-sm",
       md: "w-8 h-8 text-sm",
       lg: "w-10 h-10 text-base"
-    })[h.size ?? "md"]), s = M(
-      () => h.name.split(" ").map((u) => u[0]).join("").toUpperCase().substring(0, 2)
+    })[h.size ?? "md"]), c = M(
+      () => h.name.trim().split(/\s+/).filter(Boolean).map((o) => o[0]).join("").toUpperCase().substring(0, 2) || "?"
     );
-    return (u, c) => (e(), l("div", {
-      class: p(["wpic-avatar flex items-center justify-center rounded-full overflow-hidden font-medium shrink-0", [t.value, n.src ? "" : "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300"]])
+    return (o, b) => (e(), l("div", {
+      class: p(["wpic-avatar flex items-center justify-center rounded-full overflow-hidden font-medium shrink-0", [u.value, s.value ? "" : "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300"]])
     }, [
-      n.src ? (e(), l("img", {
+      s.value ? (e(), l("img", {
         key: 0,
+        onError: b[0] || (b[0] = (C) => t.value = !0),
         src: n.src,
         alt: n.name,
         class: "w-full h-full object-cover"
-      }, null, 8, vn)) : (e(), l("span", mn, z(s.value), 1))
+      }, null, 40, vn)) : (e(), l("span", mn, z(c.value), 1))
     ], 2));
   }
 }), $a = /* @__PURE__ */ X({
@@ -5973,7 +5978,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
     function g1(Z) {
       return Z.iso === t.modelValue ? "bg-[var(--wpic-primary)] text-white font-semibold" : V(Z.iso) ? "cursor-not-allowed text-zinc-200 dark:text-zinc-700" : Z.inMonth ? Z.iso === x(o) ? "text-[var(--wpic-primary)] ring-1 ring-[var(--wpic-primary)]/40 hover:bg-zinc-100 dark:hover:bg-zinc-800" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800" : "text-zinc-300 hover:bg-zinc-100 dark:text-zinc-600 dark:hover:bg-zinc-800";
     }
-    return L1(u, (Z) => {
+    return M1(u, (Z) => {
       if (!Z) return;
       const D = C(t.modelValue), T = C(t.max) ?? o, A = D ?? T;
       b.value = new Date(A.getFullYear(), A.getMonth(), 1);
@@ -6853,7 +6858,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
     function t1() {
       o.value = null, b.value = "", C.value = "", s("update:modelValue", null), u.value = !1;
     }
-    return L1(() => t.modelValue, (G) => {
+    return M1(() => t.modelValue, (G) => {
       o.value = G?.preset ?? null, b.value = G?.since ?? "", C.value = G?.until ?? "", R.value = "from";
     }), (G, i1) => (e(), l("div", Dn, [
       a("button", {
@@ -7010,7 +7015,7 @@ const U7 = { class: "wpic-tag-input" }, O7 = {
     function S(V) {
       P(V) || (s("update:modelValue", V), s("change", V), u.value = !1);
     }
-    return L1(u, (V) => {
+    return M1(u, (V) => {
       V && (b.value = C(t.modelValue)?.getFullYear() ?? o.getFullYear());
     }), (V, k) => (e(), l("div", ae, [
       a("button", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpic/ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "type": "module",
   "description": "WPIC shared Vue 3 component library",
   "publishConfig": {

package/src/style.css

@@ -403,9 +403,21 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
 .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active,
 .wpic-theme .wpic-segmented-control .wpic-segmented-control__button--active:hover:not(:disabled) { color: var(--wpic-text); background: var(--wpic-segment-active); box-shadow: var(--wpic-segment-shadow); }
 .wpic-theme .wpic-segmented-control .wpic-segmented-control__button:focus-visible { outline: 1px solid var(--wpic-accent); box-shadow: 0 0 0 3px var(--wpic-focus-ring); }
-.wpic-theme .wpic-modal-panel,
-.wpic-theme.wpic-tooltip-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
-.wpic-theme.wpic-tooltip-panel { box-shadow: inset 0 0 0 1px var(--wpic-border), 0 4px 12px rgb(0 0 0 / 0.15); }
+.wpic-theme .wpic-modal-panel { background: var(--wpic-popover); color: var(--wpic-text); border-color: var(--wpic-border); }
+/* Tooltips keep an inverse surface, independent of popover customization. */
+.wpic-tooltip-panel {
+  background: #242720;
+  color: #f7f8f5;
+  border: 1px solid rgb(255 255 255 / 0.12);
+  border-radius: 8px;
+  padding: 7px 11px;
+  box-shadow: 0 5px 16px rgb(0 0 0 / 0.2);
+}
+.dark .wpic-tooltip-panel:not([data-wpic-theme="light"]),
+.wpic-tooltip-panel[data-wpic-theme="dark"] {
+  background: #090a05;
+  border: 0;
+}
 .wpic-theme .wpic-modal-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
 .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
 .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }