@muibook/components 13.0.0 → 14.0.1

package/dist/esm/components/mui-prompt/index.js

@@ -18,10 +18,10 @@ import "../mui-rule/index.js";
 import "../mui-prompt-toggle/index.js";
 class k extends HTMLElement {
   constructor() {
-    super(), this.triggerEl = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null, this.previewResizeObserver = null, this.fanAnimations = /* @__PURE__ */ new Map(), this.pendingColorFade = !1, this.lastDebugPayload = '{"event":"idle"}', this.enforceActionVariants = () => {
+    super(), this.triggerEl = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null, this.previewResizeObserver = null, this.fanAnimations = /* @__PURE__ */ new Map(), this.pendingColorFade = !1, this.lastDebugPayload = '{"event":"idle"}', this.lightDomObserver = null, this.onActionsSlotChange = () => this.updateActionsLayout(), this.enforceActionVariants = () => {
       if (!this.shadowRoot) return;
-      const e = Array.from(this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-trigger"], slot[name="actions-right"]')), o = (r, s) => {
-        if (!s || r.tagName.toLowerCase() !== "mui-button") return;
+      const e = Array.from(this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-trigger"], slot[name="actions-right"]')), o = (r, a) => {
+        if (!a || r.tagName.toLowerCase() !== "mui-button") return;
         if (r.hasAttribute("icon-only")) {
           r.style.marginRight = "var(--space-025)";
           return;
@@ -29,16 +29,16 @@ class k extends HTMLElement {
         r.style.marginRight === "var(--space-025)" && (r.style.marginRight = "");
       };
       e.forEach((r) => {
-        const s = r.name === "actions";
-        r.assignedElements({ flatten: !0 }).forEach((a) => {
-          [a, ...Array.from(a.querySelectorAll("*"))].forEach((c) => {
-            const u = c.tagName.toLowerCase();
-            if (u === "mui-button") {
-              c.setAttribute("variant", "tertiary"), o(c, s);
+        const a = r.name === "actions";
+        r.assignedElements({ flatten: !0 }).forEach((s) => {
+          [s, ...Array.from(s.querySelectorAll("*"))].forEach((c) => {
+            const d = c.tagName.toLowerCase();
+            if (d === "mui-button") {
+              c.setAttribute("variant", "tertiary"), o(c, a);
               return;
             }
-            u === "mui-dropdown" && c.querySelectorAll('[slot="action"]').forEach((h) => {
-              h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-button" && (h.setAttribute("variant", "tertiary"), o(h, s));
+            d === "mui-dropdown" && c.querySelectorAll('[slot="action"]').forEach((h) => {
+              h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-button" && (h.setAttribute("variant", "tertiary"), o(h, a));
             });
           });
         });
@@ -48,18 +48,18 @@ class k extends HTMLElement {
     }, this.onPaste = (t) => {
       const e = t, o = e.clipboardData;
       if (!o) return;
-      const r = Array.from(o.files || []), s = o.getData("text/plain") || "", i = s.trim(), a = i.length > 0, l = a ? this.detectMediaUrl(i) : null, c = this.getAttribute("preview-overflow-to-preview") !== "false", u = this.getAttribute("preview-threshold-chars"), p = Number.isFinite(Number.parseInt(u || "", 10)) ? Math.max(1, Number.parseInt(u || "", 10)) : 220, h = a ? this.detectBadge(i) : "", m = h !== "" && h !== "Insightful", b = c && a && (!!(l != null && l.url) || i.length >= p || m), g = r.length > 0;
-      if (!g && !a) return;
+      const r = Array.from(o.files || []), a = o.getData("text/plain") || "", i = a.trim(), s = i.length > 0, l = s ? this.detectMediaUrl(i) : null, c = this.getAttribute("preview-overflow-to-preview") !== "false", d = this.getAttribute("preview-threshold-chars"), p = Number.isFinite(Number.parseInt(d || "", 10)) ? Math.max(1, Number.parseInt(d || "", 10)) : 220, h = s ? this.detectBadge(i) : "", u = h !== "" && h !== "Insightful", b = c && s && (!!(l != null && l.url) || i.length >= p || u), g = r.length > 0;
+      if (!g && !s) return;
       (g || b) && e.preventDefault();
-      const v = r.map((d) => ({
-        kind: d.type.startsWith("image/") ? "image" : d.type.startsWith("video/") ? "video" : d.type.startsWith("audio/") ? "audio" : "file",
-        mimeType: d.type || "",
-        file: d,
-        fileName: d.name || "",
-        size: d.size || 0,
-        badge: d.type.startsWith("image/") ? "IMG" : d.type.startsWith("video/") ? "VIDEO" : d.type.startsWith("audio/") ? "MUSIC" : "FILE",
-        preview: d.name || "Pasted file",
-        value: d.name || ""
+      const v = r.map((m) => ({
+        kind: m.type.startsWith("image/") ? "image" : m.type.startsWith("video/") ? "video" : m.type.startsWith("audio/") ? "audio" : "file",
+        mimeType: m.type || "",
+        file: m,
+        fileName: m.name || "",
+        size: m.size || 0,
+        badge: m.type.startsWith("image/") ? "IMG" : m.type.startsWith("video/") ? "VIDEO" : m.type.startsWith("audio/") ? "MUSIC" : "FILE",
+        preview: m.name || "Pasted file",
+        value: m.name || ""
       }));
       b && i && (l != null && l.url ? v.unshift({
         kind: l.kind === "image" ? "image" : "text",
@@ -72,11 +72,11 @@ class k extends HTMLElement {
         mimeType: "text/plain",
         badge: this.detectBadge(i),
         preview: i.slice(0, 260),
-        value: s
+        value: a
       })), this.emitPromptItems({
         source: "paste",
         items: v,
-        text: s || "",
+        text: a || "",
         textBadge: (l == null ? void 0 : l.badge) || h,
         overflowed: b,
         thresholdChars: p
@@ -116,27 +116,27 @@ class k extends HTMLElement {
       const e = t.composedPath();
       if (e.some((i) => {
         if (!(i instanceof HTMLElement)) return !1;
-        const a = i.tagName.toLowerCase();
-        return a === "textarea" || a === "input" || i.isContentEditable;
+        const s = i.tagName.toLowerCase();
+        return s === "textarea" || s === "input" || i.isContentEditable;
       })) return;
       if (e.find((i) => {
-        var a;
-        return i instanceof HTMLElement && ((a = i.hasAttribute) == null ? void 0 : a.call(i, "context-close"));
+        var s;
+        return i instanceof HTMLElement && ((s = i.hasAttribute) == null ? void 0 : s.call(i, "context-close"));
       })) {
         this.setContextMode("icon", "dismiss"), this.updateActionsLayout();
         return;
       }
       e.find(
         (i) => {
-          var a, l;
-          return i instanceof HTMLElement && (((a = i.hasAttribute) == null ? void 0 : a.call(i, "context-toggle")) || ((l = i.getAttribute) == null ? void 0 : l.call(i, "slot")) === "toggle");
+          var s, l;
+          return i instanceof HTMLElement && (((s = i.hasAttribute) == null ? void 0 : s.call(i, "context-toggle")) || ((l = i.getAttribute) == null ? void 0 : l.call(i, "slot")) === "toggle");
         }
       ) && (this.setContextMode("chip", "click"), this.updateActionsLayout());
     }, this.onContextChipDismiss = (t) => {
       t.composedPath().find(
         (r) => {
-          var s, i, a;
-          return r instanceof HTMLElement && (((s = r.hasAttribute) == null ? void 0 : s.call(r, "context-active")) || ((i = r.hasAttribute) == null ? void 0 : i.call(r, "context-chip")) || ((a = r.hasAttribute) == null ? void 0 : a.call(r, "context-spinner")));
+          var a, i, s;
+          return r instanceof HTMLElement && (((a = r.hasAttribute) == null ? void 0 : a.call(r, "context-active")) || ((i = r.hasAttribute) == null ? void 0 : i.call(r, "context-chip")) || ((s = r.hasAttribute) == null ? void 0 : s.call(r, "context-spinner")));
         }
       ) && (this.setContextMode("icon", "dismiss"), this.updateActionsLayout());
     }, this.toggleFanOpen = () => {
@@ -183,17 +183,17 @@ class k extends HTMLElement {
   }
   setDebugState(t, e) {
     if (!this.shadowRoot) return;
-    const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"), s = this.shadowRoot.querySelector("#promptDebugPayload");
-    if (!o || !r || !s) return;
+    const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"), a = this.shadowRoot.querySelector("#promptDebugPayload");
+    if (!o || !r || !a) return;
     const i = this.hasAttribute("debug");
-    o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)), s.textContent = this.lastDebugPayload);
+    o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)), a.textContent = this.lastDebugPayload);
   }
   emitPromptItems({
     items: t,
     text: e,
     textBadge: o,
     overflowed: r,
-    thresholdChars: s,
+    thresholdChars: a,
     source: i
   }) {
     this.dispatchEvent(
@@ -204,7 +204,7 @@ class k extends HTMLElement {
           text: e,
           textBadge: o,
           overflowed: r,
-          thresholdChars: s,
+          thresholdChars: a,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         },
         bubbles: !0,
@@ -240,12 +240,12 @@ class k extends HTMLElement {
       )
     ).flatMap((r) => r.assignedElements({ flatten: !0 })).forEach((r) => {
       [r, ...Array.from(r.querySelectorAll("*"))].forEach((i) => {
-        const l = i.tagName.toLowerCase() === "mui-prompt-toggle", c = i.hasAttribute("context-toggle"), u = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
+        const l = i.tagName.toLowerCase() === "mui-prompt-toggle", c = i.hasAttribute("context-toggle"), d = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
         if (l) {
           i.setAttribute("mode", t);
           return;
         }
-        if (c || u) {
+        if (c || d) {
           i.hasAttribute("context-chip") && i.tagName.toLowerCase() === "mui-chip" && !i.hasAttribute("variant") && i.setAttribute("variant", "ghost");
           const p = c ? t === "icon" : t === "chip";
           i.toggleAttribute("hidden", !p), i.style.display = p ? "inline-flex" : "none";
@@ -253,12 +253,25 @@ class k extends HTMLElement {
       });
     });
   }
+  hasTruthyFlagAttribute(t) {
+    const e = this.getAttribute(t);
+    return e !== null && e !== "false";
+  }
+  shouldUseFanModeByActions() {
+    if (!this.shadowRoot) return !1;
+    const t = this.shadowRoot.querySelector('slot[name="actions"]');
+    return t ? t.assignedElements({ flatten: !0 }).filter(
+      (o) => !o.hasAttribute("hidden")
+    ).length > 0 : !1;
+  }
+  isFanModeEnabled() {
+    return this.hasTruthyFlagAttribute("actions-fan") ? !0 : this.shouldUseFanModeByActions();
+  }
   ensureFanMode() {
-    this.hasAttribute("fan-open") && !this.hasAttribute("actions-fan") && this.setAttribute("actions-fan", "");
   }
   connectedCallback() {
     var e;
-    this.hasAttribute("context-mode") || this.setAttribute("context-mode", "icon"), this.ensureFanMode(), this.render(), this.bindEvents(), this.updateActionsLayout();
+    this.hasAttribute("context-mode") || this.setAttribute("context-mode", "icon"), this.ensureFanMode(), this.render(), this.bindEvents(), this.updateActionsLayout(), queueMicrotask(() => this.updateActionsLayout()), requestAnimationFrame(() => this.updateActionsLayout()), requestAnimationFrame(() => requestAnimationFrame(() => this.updateActionsLayout()));
     const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("textarea");
     t && (this.syncTextareaHeight(t), requestAnimationFrame(() => this.syncTextareaHeight(t)));
   }
@@ -273,9 +286,9 @@ class k extends HTMLElement {
       return;
     }
     if (t === "context-mode") {
-      const s = this.normalizeContextMode(o);
-      if (o !== s) {
-        this.setAttribute("context-mode", s);
+      const a = this.normalizeContextMode(o);
+      if (o !== a) {
+        this.setAttribute("context-mode", a);
         return;
       }
       this.syncContextModeUI(), this.updateActionsLayout();
@@ -421,9 +434,9 @@ class k extends HTMLElement {
     t == null || t.focus();
   }
   syncTextareaHeight(t) {
-    const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10), s = getComputedStyle(t), a = (Number.parseFloat(s.fontSize) || 16) * 1.55, l = Number.parseFloat(s.paddingTop) || 0, c = Number.parseFloat(s.paddingBottom) || 0, u = Number.parseFloat(s.borderTopWidth) || 0, p = Number.parseFloat(s.borderBottomWidth) || 0, h = l + c + u + p, m = 3 * a + h, b = r * a + h;
+    const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10), a = getComputedStyle(t), s = (Number.parseFloat(a.fontSize) || 16) * 1.55, l = Number.parseFloat(a.paddingTop) || 0, c = Number.parseFloat(a.paddingBottom) || 0, d = Number.parseFloat(a.borderTopWidth) || 0, p = Number.parseFloat(a.borderBottomWidth) || 0, h = l + c + d + p, u = 3 * s + h, b = r * s + h;
     t.style.height = "auto";
-    const g = t.scrollHeight, v = Math.max(m, Math.min(g, b));
+    const g = t.scrollHeight, v = Math.max(u, Math.min(g, b));
     t.style.height = `${Math.ceil(v)}px`, t.style.overflowY = g > b ? "auto" : "hidden";
   }
   detectBadge(t) {
@@ -463,14 +476,14 @@ class k extends HTMLElement {
     const o = e.match(/https?:\/\/[^\s]+/i), r = ((o == null ? void 0 : o[0]) || e).trim();
     if (!/^https?:\/\//i.test(r)) return null;
     try {
-      const s = new URL(r), i = s.pathname.toLowerCase(), a = s.hostname.toLowerCase();
+      const a = new URL(r), i = a.pathname.toLowerCase(), s = a.hostname.toLowerCase();
       if (/\.(png|jpe?g|gif|webp|svg|avif|bmp)$/.test(i))
         return { url: r, kind: "image", badge: "IMG", mimeType: "image/*" };
-      if (a === "youtu.be" || a.endsWith("youtube.com") || a.endsWith("youtube-nocookie.com"))
+      if (s === "youtu.be" || s.endsWith("youtube.com") || s.endsWith("youtube-nocookie.com"))
         return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
-      if (a.endsWith("vimeo.com") || a.endsWith("twitch.tv"))
+      if (s.endsWith("vimeo.com") || s.endsWith("twitch.tv"))
         return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
-      if (a.endsWith("soundcloud.com") || a.endsWith("spotify.com") || a.endsWith("bandcamp.com") || a.endsWith("mixcloud.com"))
+      if (s.endsWith("soundcloud.com") || s.endsWith("spotify.com") || s.endsWith("bandcamp.com") || s.endsWith("mixcloud.com"))
         return { url: r, kind: "audio", badge: "MUSIC", mimeType: "audio/*" };
       if (/\.(mp4|webm|mov|m4v|ogv)$/.test(i))
         return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
@@ -482,18 +495,24 @@ class k extends HTMLElement {
     return null;
   }
   bindEvents() {
+    var i;
     if (!this.shadowRoot) return;
     this.unbindEvents();
     const t = this.shadowRoot.querySelector("textarea");
     t == null || t.addEventListener("input", this.onInput), t == null || t.addEventListener("keydown", this.onKeyDown), t == null || t.addEventListener("paste", this.onPaste), t == null || t.addEventListener("focus", this.onTextareaFocus);
-    const e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'), s = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
-    e == null || e.addEventListener("slotchange", () => this.updateActionsLayout()), o == null || o.addEventListener("slotchange", () => this.updateActionsLayout()), r == null || r.addEventListener("slotchange", () => this.updateActionsLayout()), s == null || s.addEventListener("click", this.onDefaultSubmitClick), this.addEventListener("prompt-preview-open", this.onPreviewOpen), this.addEventListener("click", this.onContextToggleClick), this.addEventListener("dismiss", this.onContextChipDismiss), this.syncErrorVisibility(), this.bindPreviewOverflow(), this.bindActionTrigger(), this.syncLoadingState();
+    const e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'), a = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
+    e == null || e.addEventListener("slotchange", this.onActionsSlotChange), o == null || o.addEventListener("slotchange", this.onActionsSlotChange), r == null || r.addEventListener("slotchange", this.onActionsSlotChange), typeof MutationObserver < "u" && ((i = this.lightDomObserver) == null || i.disconnect(), this.lightDomObserver = new MutationObserver(() => this.updateActionsLayout()), this.lightDomObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["slot", "hidden"]
+    })), a == null || a.addEventListener("click", this.onDefaultSubmitClick), this.addEventListener("prompt-preview-open", this.onPreviewOpen), this.addEventListener("click", this.onContextToggleClick), this.addEventListener("dismiss", this.onContextChipDismiss), this.syncErrorVisibility(), this.bindPreviewOverflow(), this.bindActionTrigger(), this.syncLoadingState();
   }
   unbindEvents() {
-    var o, r, s;
+    var i, s, l, c;
     if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector("textarea"), e = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
-    t == null || t.removeEventListener("input", this.onInput), t == null || t.removeEventListener("keydown", this.onKeyDown), t == null || t.removeEventListener("paste", this.onPaste), t == null || t.removeEventListener("focus", this.onTextareaFocus), e == null || e.removeEventListener("click", this.onDefaultSubmitClick), this.removeEventListener("prompt-preview-open", this.onPreviewOpen), this.removeEventListener("click", this.onContextToggleClick), this.removeEventListener("dismiss", this.onContextChipDismiss), this.triggerEl && (this.triggerEl.removeEventListener("click", this.toggleFanOpen), this.triggerEl = null), (o = this.previewRowEl) == null || o.removeEventListener("scroll", this.onPreviewScroll), (r = this.previewSlotEl) == null || r.removeEventListener("slotchange", this.onPreviewSlotChange), (s = this.previewResizeObserver) == null || s.disconnect(), this.previewResizeObserver = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null;
+    const t = this.shadowRoot.querySelector("textarea"), e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'), a = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
+    t == null || t.removeEventListener("input", this.onInput), t == null || t.removeEventListener("keydown", this.onKeyDown), t == null || t.removeEventListener("paste", this.onPaste), t == null || t.removeEventListener("focus", this.onTextareaFocus), a == null || a.removeEventListener("click", this.onDefaultSubmitClick), e == null || e.removeEventListener("slotchange", this.onActionsSlotChange), o == null || o.removeEventListener("slotchange", this.onActionsSlotChange), r == null || r.removeEventListener("slotchange", this.onActionsSlotChange), this.removeEventListener("prompt-preview-open", this.onPreviewOpen), this.removeEventListener("click", this.onContextToggleClick), this.removeEventListener("dismiss", this.onContextChipDismiss), this.triggerEl && (this.triggerEl.removeEventListener("click", this.toggleFanOpen), this.triggerEl = null), (i = this.previewRowEl) == null || i.removeEventListener("scroll", this.onPreviewScroll), (s = this.previewSlotEl) == null || s.removeEventListener("slotchange", this.onPreviewSlotChange), (l = this.previewResizeObserver) == null || l.disconnect(), this.previewResizeObserver = null, (c = this.lightDomObserver) == null || c.disconnect(), this.lightDomObserver = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null;
   }
   bindPreviewOverflow() {
     var t, e;
@@ -515,59 +534,59 @@ class k extends HTMLElement {
     var i;
     const e = this.getAttribute("preview-loading"), o = (this.getAttribute("preview-loading-label") || "").trim(), r = t || ((i = this.previewSlotEl) == null ? void 0 : i.assignedElements({ flatten: !0 })) || [];
     if (!e) {
-      r.forEach((a) => {
-        a.tagName.toLowerCase() === "mui-prompt-preview" && a.removeAttribute("loading");
+      r.forEach((s) => {
+        s.tagName.toLowerCase() === "mui-prompt-preview" && s.removeAttribute("loading");
       });
       return;
     }
-    const s = e === "auto" ? this.hasAttribute("loading") : !0;
-    r.forEach((a) => {
-      a.tagName.toLowerCase() === "mui-prompt-preview" && (s ? a.setAttribute("loading", "") : a.removeAttribute("loading"), o && a.setAttribute("loading-label", o));
+    const a = e === "auto" ? this.hasAttribute("loading") : !0;
+    r.forEach((s) => {
+      s.tagName.toLowerCase() === "mui-prompt-preview" && (a ? s.setAttribute("loading", "") : s.removeAttribute("loading"), o && s.setAttribute("loading-label", o));
     });
   }
   normalizePreviewDetail(t) {
-    const e = String(t.value || "").trim(), o = String(t.bgImage || "").trim(), r = String(t.badge || "").trim(), s = String(t.label || "Pasted Content"), i = String(t.imageTint || "").trim(), a = o ? "image" : e ? "code" : "text";
+    const e = String(t.value || "").trim(), o = String(t.bgImage || "").trim(), r = String(t.badge || "").trim(), a = String(t.label || "Pasted Content"), i = String(t.imageTint || "").trim(), s = o ? "image" : e ? "code" : "text";
     return {
       id: String(t.id || ""),
       value: e,
       badge: r || (o ? "IMG" : this.detectBadge(e)),
-      label: s,
+      label: a,
       bgImage: o,
       imageTint: i,
-      type: a
+      type: s
     };
   }
   openInternalPreviewDialog(t) {
-    var y;
+    var n;
     if (!this.shadowRoot) return;
-    const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"), s = this.shadowRoot.querySelector("#promptAutoPreviewImage"), i = this.shadowRoot.querySelector("#promptAutoPreviewMedia"), a = this.shadowRoot.querySelector("#promptAutoPreviewMediaUrl"), l = this.normalizePreviewDetail(t), c = this.getAttribute("preview-dialog-title") || l.label, u = l.value, p = l.bgImage, h = l.badge, m = u ? this.detectMediaUrl(u) : null, b = !p && u.length > 0 && (h === "VIDEO" || h === "MUSIC"), g = !p && (!!(m && (m.kind === "video" || m.kind === "audio")) || b), v = p.length > 0, d = u.length > 0, w = (() => {
-      if (!m || m.kind !== "audio") return !1;
+    const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"), a = this.shadowRoot.querySelector("#promptAutoPreviewImage"), i = this.shadowRoot.querySelector("#promptAutoPreviewMedia"), s = this.shadowRoot.querySelector("#promptAutoPreviewMediaUrl"), l = this.normalizePreviewDetail(t), c = this.getAttribute("preview-dialog-title") || l.label, d = l.value, p = l.bgImage, h = l.badge, u = d ? this.detectMediaUrl(d) : null, b = !p && d.length > 0 && (h === "VIDEO" || h === "MUSIC"), g = !p && (!!(u && (u.kind === "video" || u.kind === "audio")) || b), v = p.length > 0, m = d.length > 0, y = (() => {
+      if (!u || u.kind !== "audio") return !1;
       try {
-        const f = new URL(m.url);
+        const f = new URL(u.url);
         return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(f.pathname.toLowerCase());
       } catch {
         return !1;
       }
-    })(), n = (() => {
-      if (!m || !w) return "";
+    })(), A = (() => {
+      if (!u || !y) return "";
       try {
-        const A = new URL(m.url).pathname.split("/").filter(Boolean).pop() || "", x = decodeURIComponent(A), E = x.replace(/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/i, "") || x || "Audio";
-        return E.charAt(0).toUpperCase() + E.slice(1);
+        const S = new URL(u.url).pathname.split("/").filter(Boolean).pop() || "", w = decodeURIComponent(S), x = w.replace(/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/i, "") || w || "Audio";
+        return x.charAt(0).toUpperCase() + x.slice(1);
       } catch {
         return "Audio";
       }
     })();
-    if (!(!v && !d && !g)) {
-      if (this.setAttribute("preview-dialog-value", u), this.setAttribute("preview-dialog-image", p), this.setAttribute("preview-dialog-type", h || (v ? "IMG" : "CODE")), o && (o.textContent = c), g ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
-        a && a.setAttribute("hidden", ""), s && (s.setAttribute("src", p), s.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
-      else if (g && m) {
-        if (a) {
-          const f = w;
-          a.textContent = f ? n : m.url, f ? (a.setAttribute("href", m.url), a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer")) : (a.removeAttribute("href"), a.removeAttribute("target"), a.removeAttribute("rel")), a.toggleAttribute("hidden", !f);
-        }
-        i && (i.setAttribute("src", m.url), i.removeAttribute("type"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), s && (s.removeAttribute("src"), s.setAttribute("hidden", ""));
-      } else b ? (a && (a.textContent = u, a.toggleAttribute("hidden", !0)), i && (i.setAttribute("src", u), i.setAttribute("type", h === "VIDEO" ? "video" : "audio"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), s && (s.removeAttribute("src"), s.setAttribute("hidden", ""))) : (a && a.setAttribute("hidden", ""), r && (r.textContent = this.formatPreviewCode(u, h), r.removeAttribute("hidden")), i && (i.removeAttribute("src"), i.removeAttribute("prefer-native-controls"), i.setAttribute("hidden", "")), s && (s.removeAttribute("src"), s.setAttribute("hidden", "")));
-      (y = e == null ? void 0 : e.open) == null || y.call(e);
+    if (!(!v && !m && !g)) {
+      if (this.setAttribute("preview-dialog-value", d), this.setAttribute("preview-dialog-image", p), this.setAttribute("preview-dialog-type", h || (v ? "IMG" : "CODE")), o && (o.textContent = c), g ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
+        s && s.setAttribute("hidden", ""), a && (a.setAttribute("src", p), a.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
+      else if (g && u) {
+        if (s) {
+          const f = y;
+          s.textContent = f ? A : u.url, f ? (s.setAttribute("href", u.url), s.setAttribute("target", "_blank"), s.setAttribute("rel", "noopener noreferrer")) : (s.removeAttribute("href"), s.removeAttribute("target"), s.removeAttribute("rel")), s.toggleAttribute("hidden", !f);
+        }
+        i && (i.setAttribute("src", u.url), i.removeAttribute("type"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), a && (a.removeAttribute("src"), a.setAttribute("hidden", ""));
+      } else b ? (s && (s.textContent = d, s.toggleAttribute("hidden", !0)), i && (i.setAttribute("src", d), i.setAttribute("type", h === "VIDEO" ? "video" : "audio"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), a && (a.removeAttribute("src"), a.setAttribute("hidden", ""))) : (s && s.setAttribute("hidden", ""), r && (r.textContent = this.formatPreviewCode(d, h), r.removeAttribute("hidden")), i && (i.removeAttribute("src"), i.removeAttribute("prefer-native-controls"), i.setAttribute("hidden", "")), a && (a.removeAttribute("src"), a.setAttribute("hidden", "")));
+      (n = e == null ? void 0 : e.open) == null || n.call(e);
     }
   }
   syncPreviewEdgeShadows() {
@@ -579,22 +598,22 @@ class k extends HTMLElement {
     return t.tagName.toLowerCase() === "mui-prompt-toggle" || t.hasAttribute("context-toggle") ? !0 : !!t.querySelector("[context-toggle]");
   }
   bindActionTrigger() {
-    if (!this.shadowRoot || !this.hasAttribute("actions-fan")) return;
+    if (!this.shadowRoot || !this.isFanModeEnabled()) return;
     const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), o = this.shadowRoot.querySelector("#promptDefaultActionsTrigger");
     if (!t) return;
     this.triggerEl && (this.triggerEl.removeEventListener("click", this.toggleFanOpen), this.triggerEl = null);
     const r = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
       (c) => !c.hasAttribute("hidden")
-    ), s = t.assignedElements({ flatten: !0 }).filter(
+    ), a = t.assignedElements({ flatten: !0 }).filter(
       (c) => !c.hasAttribute("hidden")
     );
-    if (!(s.length > 0)) {
+    if (!(a.length > 0)) {
       o && (o.setAttribute("hidden", ""), o.style.display = "none");
       return;
     }
-    const a = r.length === 0 && s.length === 1 && this.isContextOnlyAction(s[0]);
-    o && (o.toggleAttribute("hidden", a), o.style.display = a ? "none" : "inline-flex");
-    const l = a ? null : r.find((c) => c.hasAttribute("fan-trigger")) || r[0] || o || s.find((c) => c.hasAttribute("fan-trigger")) || s[0] || null;
+    const s = r.length === 0 && a.length === 1 && this.isContextOnlyAction(a[0]);
+    o && (o.toggleAttribute("hidden", s), o.style.display = s ? "none" : "inline-flex");
+    const l = s ? null : r.find((c) => c.hasAttribute("fan-trigger")) || r[0] || o || a.find((c) => c.hasAttribute("fan-trigger")) || a[0] || null;
     l && (this.triggerEl = l, this.triggerEl.addEventListener("click", this.toggleFanOpen), this.syncTriggerIconState());
   }
   syncTriggerIconState() {
@@ -618,58 +637,60 @@ class k extends HTMLElement {
     this.syncContextModeUI();
     const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), o = this.shadowRoot.querySelector("#promptDefaultActionsTrigger"), r = this.shadowRoot.querySelector(".actions-separator");
     if (!t) return;
-    const s = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
+    const a = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
       (n) => !n.hasAttribute("hidden")
     ), i = t.assignedElements({ flatten: !0 }).filter(
       (n) => !n.hasAttribute("hidden")
-    ), a = i.length > 0, l = this.shadowRoot.querySelector(".actions-slot-left");
-    l && (l.style.display = a ? "inline-flex" : "none");
-    const c = s.length === 0 && i.length === 1 && this.isContextOnlyAction(i[0]);
+    ), s = i.length > 0, l = this.shadowRoot.querySelector(".actions-slot-left");
+    l && (l.style.display = s ? "inline-flex" : "none");
+    const c = a.length === 0 && i.length === 1 && this.isContextOnlyAction(i[0]);
     if (o) {
-      const n = !a || c;
+      const n = !s || c;
       o.toggleAttribute("hidden", n), o.style.display = n ? "none" : "inline-flex";
     }
-    const u = c ? null : s.find((n) => n.hasAttribute("fan-trigger")) || s[0] || o || i.find((n) => n.hasAttribute("fan-trigger")) || i[0] || null, p = i.filter((n) => n !== u), h = u ? [u, ...p] : i, m = this.shadowRoot.querySelector('slot[name="actions-right"]'), b = (m == null ? void 0 : m.assignedElements({ flatten: !0 })) || [], g = this.hasAttribute("actions-fan"), v = this.hasAttribute("fan-open"), d = 100, w = "calc(var(--action-icon-only-size-medium) + var(--space-100))";
+    const d = c ? null : a.find((n) => n.hasAttribute("fan-trigger")) || a[0] || o || i.find((n) => n.hasAttribute("fan-trigger")) || i[0] || null, p = i.filter((n) => n !== d), h = d ? [d, ...p] : i, u = this.shadowRoot.querySelector('slot[name="actions-right"]'), b = (u == null ? void 0 : u.assignedElements({ flatten: !0 })) || [], g = p.length > 0;
+    this.toggleAttribute("has-actions", s), this.toggleAttribute("has-extra-actions", g);
+    const v = s || this.hasTruthyFlagAttribute("actions-fan"), m = this.hasAttribute("fan-open"), y = 100, A = "calc(var(--action-icon-only-size-medium) + var(--space-100))";
     if (r) {
-      const n = g && v && i.length > 0;
+      const n = v && m && g;
       r.toggleAttribute("hidden", !n), r.style.display = n ? "inline-flex" : "none";
     }
-    this.enforceActionVariants(), h.forEach((n, y) => {
-      n.style.transition = `transform ${d}ms ease, opacity ${d}ms ease`, n.style.zIndex = "";
-      const f = this.fanAnimations.get(n);
-      if (f && (f.cancel(), this.fanAnimations.delete(n)), !g) {
+    this.enforceActionVariants(), h.forEach((n, f) => {
+      n.style.transition = `transform ${y}ms ease, opacity ${y}ms ease`, n.style.zIndex = "";
+      const S = this.fanAnimations.get(n);
+      if (S && (S.cancel(), this.fanAnimations.delete(n)), !v) {
         this.setFanItemInert(n, !1), n.style.transitionDelay = "", n.style.transform = "", n.style.opacity = "", n.style.pointerEvents = "", n.style.filter = "";
         return;
       }
-      if (y === 0) {
+      if (f === 0) {
         this.setFanItemInert(n, !1), n.style.transitionDelay = "", n.style.transform = "translateX(0)", n.style.opacity = "1", n.style.pointerEvents = "", n.style.filter = "";
         return;
       }
-      if (!v) {
+      if (!m) {
         this.setFanItemInert(n, !0), n.style.transitionDelay = "", n.style.transform = "translateX(0) scale(0.8)", n.style.opacity = "0", n.style.pointerEvents = "none", n.style.filter = "";
         return;
       }
-      const A = `calc(${w} * -${y})`, x = y * 50;
-      n.style.transition = `opacity ${Math.max(120, d - 40)}ms ease, transform ${d}ms cubic-bezier(0.22, 1, 0.36, 1)`, n.style.transitionDelay = `${x}ms`, n.style.transform = "translateX(0) scale(0.92)", n.style.opacity = "0", n.style.pointerEvents = "none", n.style.filter = "", this.setFanItemInert(n, !0), requestAnimationFrame(() => {
-        if (n.style.transform = `translateX(${A})`, n.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      const w = `calc(${A} * -${f})`, x = f * 50;
+      n.style.transition = `opacity ${Math.max(120, y - 40)}ms ease, transform ${y}ms cubic-bezier(0.22, 1, 0.36, 1)`, n.style.transitionDelay = `${x}ms`, n.style.transform = "translateX(0) scale(0.92)", n.style.opacity = "0", n.style.pointerEvents = "none", n.style.filter = "", this.setFanItemInert(n, !0), requestAnimationFrame(() => {
+        if (n.style.transform = `translateX(${w})`, n.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
           n.style.pointerEvents = "", this.setFanItemInert(n, !1);
           return;
         }
-        const S = n.animate(
+        const E = n.animate(
           [
             { transform: "translateX(0) scale(0.92)" },
-            { transform: `translateX(${A}) scale(1.03)`, offset: 0.68 },
-            { transform: `translateX(calc(${A} - var(--space-050))) scale(0.99)`, offset: 0.86 },
-            { transform: `translateX(${A}) scale(1)` }
+            { transform: `translateX(${w}) scale(1.03)`, offset: 0.68 },
+            { transform: `translateX(calc(${w} - var(--space-050))) scale(0.99)`, offset: 0.86 },
+            { transform: `translateX(${w}) scale(1)` }
           ],
           {
-            duration: d + 180,
+            duration: y + 180,
             delay: x,
             easing: "cubic-bezier(0.22, 1, 0.36, 1)",
             fill: "forwards"
           }
         );
-        this.fanAnimations.set(n, S), S.finished.catch(() => {
+        this.fanAnimations.set(n, E), E.finished.catch(() => {
         }).finally(() => {
           n.style.pointerEvents = "", this.setFanItemInert(n, !1);
         });
@@ -680,7 +701,7 @@ class k extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"), s = this.getAttribute("preview-dialog-width") || "560px", i = this.getAttribute("color-top-start") || "", a = this.getAttribute("color-top-mid") || "", l = this.getAttribute("color-top-end") || "", c = this.getAttribute("color-top-accent") || "", p = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", h = p ? l || "var(--prompt-color-top-end, var(--green-500))" : i || "var(--prompt-color-top-start, var(--blue-500))", m = p ? c || "var(--prompt-color-top-accent, var(--orange-500))" : a || "var(--prompt-color-top-mid, var(--blue-500))", b = p ? i || "var(--prompt-color-top-start, var(--blue-500))" : l || "var(--prompt-color-top-end, var(--green-500))", g = p ? a || "var(--prompt-color-top-mid, var(--blue-500))" : c || "var(--prompt-color-top-accent, var(--orange-500))", v = this.getAttribute("aria-label"), d = this.getAttribute("aria-labelledby"), w = this.getAttribute("aria-describedby"), n = !v && !d ? "Prompt input" : "", y = (this.getAttribute("error-message") || "").trim(), f = y;
+    const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"), a = this.getAttribute("preview-dialog-width") || "560px", i = this.getAttribute("color-top-start") || "", s = this.getAttribute("color-top-mid") || "", l = this.getAttribute("color-top-end") || "", c = this.getAttribute("color-top-accent") || "", p = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", h = p ? l || "var(--prompt-color-top-end, var(--green-500))" : i || "var(--prompt-color-top-start, var(--blue-500))", u = p ? c || "var(--prompt-color-top-accent, var(--orange-500))" : s || "var(--prompt-color-top-mid, var(--blue-500))", b = p ? i || "var(--prompt-color-top-start, var(--blue-500))" : l || "var(--prompt-color-top-end, var(--green-500))", g = p ? s || "var(--prompt-color-top-mid, var(--blue-500))" : c || "var(--prompt-color-top-accent, var(--orange-500))", v = this.getAttribute("aria-label"), m = this.getAttribute("aria-labelledby"), y = this.getAttribute("aria-describedby"), A = !v && !m ? "Prompt input" : "", n = (this.getAttribute("error-message") || "").trim(), f = n;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -688,7 +709,7 @@ class k extends HTMLElement {
           display: block;
           --prompt-action-radius: var(--chip-radius-small, var(--radius-400));
           --_prompt-color-top-start-source: ${h};
-          --_prompt-color-top-mid-source: ${m};
+          --_prompt-color-top-mid-source: ${u};
           --_prompt-color-top-end-source: ${b};
           --_prompt-color-top-accent-source: ${g};
           --_prompt-accent-primary: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--blue-500)));
@@ -1418,9 +1439,9 @@ class k extends HTMLElement {
               rows="${o}"
               placeholder="${t}"
               ${v ? `aria-label="${v.replace(/"/g, "&quot;")}"` : ""}
-              ${d ? `aria-labelledby="${d.replace(/"/g, "&quot;")}"` : ""}
-              ${w ? `aria-describedby="${w.replace(/"/g, "&quot;")}"` : ""}
-              ${n ? `aria-label="${n}"` : ""}
+              ${m ? `aria-labelledby="${m.replace(/"/g, "&quot;")}"` : ""}
+              ${y ? `aria-describedby="${y.replace(/"/g, "&quot;")}"` : ""}
+              ${A ? `aria-label="${A}"` : ""}
               ${r ? "disabled" : ""}
             >${e}</textarea>
           </slot>
@@ -1455,7 +1476,7 @@ class k extends HTMLElement {
         </div>
         <div class="error-region" hidden>
    
-        <mui-body size="x-small" variant="error" class="error-default" ${y ? "" : "hidden"}>
+        <mui-body size="x-small" variant="error" class="error-default" ${n ? "" : "hidden"}>
           <mui-icon-attention slot="before"></mui-icon-attention>
           <span class="error-text">${f}</span>
         </mui-body>
@@ -1469,7 +1490,7 @@ class k extends HTMLElement {
 
       <mui-dialog
         id="promptAutoPreviewDialog"
-        width="${s}"
+        width="${a}"
         content-padding="none"
       >
         <mui-heading id="promptAutoPreviewTitle" slot="title" size="5">Pasted Content</mui-heading>

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Fri, 27 Feb 2026 03:21:56 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Fri, 27 Feb 2026 05:46:06 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */