@muibook/components 19.6.0 → 20.1.0

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

@@ -20,8 +20,8 @@ class S 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.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-right"]')), o = (r, n) => {
-        if (!n || r.tagName.toLowerCase() !== "mui-button") return;
+      const e = Array.from(this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-right"]')), o = (r, s) => {
+        if (!s || r.tagName.toLowerCase() !== "mui-button") return;
         if (r.hasAttribute("icon-only")) {
           r.style.marginRight = "var(--space-025)";
           return;
@@ -29,16 +29,16 @@ class S extends HTMLElement {
         r.style.marginRight === "var(--space-025)" && (r.style.marginRight = "");
       };
       e.forEach((r) => {
-        const n = r.name === "actions";
+        const s = r.name === "actions";
         r.assignedElements({ flatten: !0 }).forEach((a) => {
-          [a, ...Array.from(a.querySelectorAll("*"))].forEach((m) => {
-            const p = m.tagName.toLowerCase();
+          [a, ...Array.from(a.querySelectorAll("*"))].forEach((h) => {
+            const p = h.tagName.toLowerCase();
             if (p === "mui-button") {
-              m.setAttribute("variant", "tertiary"), o(m, n);
+              h.setAttribute("variant", "tertiary"), o(h, s);
               return;
             }
-            p === "mui-dropdown" && m.querySelectorAll('[slot="action"]').forEach((d) => {
-              d instanceof HTMLElement && d.tagName.toLowerCase() === "mui-button" && (d.setAttribute("variant", "tertiary"), o(d, n));
+            p === "mui-dropdown" && h.querySelectorAll('[slot="action"]').forEach((c) => {
+              c instanceof HTMLElement && c.tagName.toLowerCase() === "mui-button" && (c.setAttribute("variant", "tertiary"), o(c, s));
             });
           });
         });
@@ -48,38 +48,38 @@ class S extends HTMLElement {
     }, this.onPaste = (t) => {
       const e = t, o = e.clipboardData;
       if (!o) return;
-      const r = Array.from(o.files || []), n = o.getData("text/plain") || "", i = n.trim(), a = i.length > 0, l = a ? this.detectMediaUrl(i) : null, m = this.getAttribute("preview-overflow-to-preview") !== "false", p = this.getAttribute("preview-threshold-chars"), c = Number.isFinite(Number.parseInt(p || "", 10)) ? Math.max(1, Number.parseInt(p || "", 10)) : 220, d = a ? this.detectBadge(i) : "", u = d !== "" && d !== "Insightful", b = m && a && (!!(l != null && l.url) || i.length >= c || u), h = r.length > 0;
-      if (!h && !a) return;
-      (h || b) && e.preventDefault();
-      const v = r.map((s) => ({
-        kind: s.type.startsWith("image/") ? "image" : s.type.startsWith("video/") ? "video" : s.type.startsWith("audio/") ? "audio" : "file",
-        mimeType: s.type || "",
-        file: s,
-        fileName: s.name || "",
-        size: s.size || 0,
-        badge: s.type.startsWith("image/") ? "IMG" : s.type.startsWith("video/") ? "VIDEO" : s.type.startsWith("audio/") ? "MUSIC" : "FILE",
-        preview: s.name || "Pasted file",
-        value: s.name || ""
+      const r = Array.from(o.files || []), s = o.getData("text/plain") || "", i = s.trim(), a = i.length > 0, l = a ? this.detectMediaUrl(i) : null, h = this.getAttribute("preview-overflow-to-preview") !== "false", p = this.getAttribute("preview-threshold-chars"), m = Number.isFinite(Number.parseInt(p || "", 10)) ? Math.max(1, Number.parseInt(p || "", 10)) : 220, c = a ? this.detectBadge(i) : "", u = c !== "" && c !== "Insightful", b = h && a && (!!(l != null && l.url) || i.length >= m || u), v = r.length > 0;
+      if (!v && !a) return;
+      (v || b) && e.preventDefault();
+      const n = 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 || ""
       }));
-      b && i && (l != null && l.url ? v.unshift({
+      b && i && (l != null && l.url ? n.unshift({
         kind: l.kind === "image" ? "image" : "text",
         mimeType: l.mimeType,
         badge: l.badge,
         preview: l.url,
         value: l.url
-      }) : v.unshift({
+      }) : n.unshift({
         kind: "text",
         mimeType: "text/plain",
         badge: this.detectBadge(i),
         preview: i.slice(0, 260),
-        value: n
+        value: s
       })), this.emitPromptItems({
         source: "paste",
-        items: v,
-        text: n || "",
-        textBadge: (l == null ? void 0 : l.badge) || d,
+        items: n,
+        text: s || "",
+        textBadge: (l == null ? void 0 : l.badge) || c,
         overflowed: b,
-        thresholdChars: c
+        thresholdChars: m
       });
     }, this.onInput = (t) => {
       const e = t.target;
@@ -135,8 +135,8 @@ class S extends HTMLElement {
     }, this.onContextChipDismiss = (t) => {
       t.composedPath().find(
         (r) => {
-          var n, i, a;
-          return r instanceof HTMLElement && (((n = r.hasAttribute) == null ? void 0 : n.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 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")));
         }
       ) && (this.setContextMode("icon", "dismiss"), this.updateActionsLayout());
     }, this.toggleFanOpen = () => {
@@ -160,6 +160,7 @@ class S extends HTMLElement {
       "preview-loading-label",
       "preview-dialog-width",
       "preview-dialog-title",
+      "preview-dialog-bordered",
       "context-mode",
       "effects-off",
       "color-layout",
@@ -183,17 +184,17 @@ class S extends HTMLElement {
   }
   setDebugState(t, e) {
     if (!this.shadowRoot) return;
-    const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"), n = this.shadowRoot.querySelector("#promptDebugPayload");
-    if (!o || !r || !n) return;
+    const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"), s = this.shadowRoot.querySelector("#promptDebugPayload");
+    if (!o || !r || !s) return;
     const i = this.hasAttribute("debug");
-    o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)), n.textContent = this.lastDebugPayload);
+    o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)), s.textContent = this.lastDebugPayload);
   }
   emitPromptItems({
     items: t,
     text: e,
     textBadge: o,
     overflowed: r,
-    thresholdChars: n,
+    thresholdChars: s,
     source: i
   }) {
     this.dispatchEvent(
@@ -204,7 +205,7 @@ class S extends HTMLElement {
           text: e,
           textBadge: o,
           overflowed: r,
-          thresholdChars: n,
+          thresholdChars: s,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         },
         bubbles: !0,
@@ -235,20 +236,18 @@ class S extends HTMLElement {
     if (!this.shadowRoot) return;
     const t = this.normalizeContextMode(this.getAttribute("context-mode"));
     Array.from(
-      this.shadowRoot.querySelectorAll(
-        'slot[name="actions"], slot[name="actions-right"]'
-      )
+      this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-right"]')
     ).flatMap((r) => r.assignedElements({ flatten: !0 })).forEach((r) => {
       [r, ...Array.from(r.querySelectorAll("*"))].forEach((i) => {
-        const l = i.tagName.toLowerCase() === "mui-prompt-toggle", m = i.hasAttribute("context-toggle"), p = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
+        const l = i.tagName.toLowerCase() === "mui-prompt-toggle", h = i.hasAttribute("context-toggle"), p = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
         if (l) {
           i.setAttribute("mode", t);
           return;
         }
-        if (m || p) {
+        if (h || p) {
           i.hasAttribute("context-chip") && i.tagName.toLowerCase() === "mui-chip" && !i.hasAttribute("variant") && i.setAttribute("variant", "ghost");
-          const c = m ? t === "icon" : t === "chip";
-          i.toggleAttribute("hidden", !c), i.style.display = c ? "inline-flex" : "none";
+          const m = h ? t === "icon" : t === "chip";
+          i.toggleAttribute("hidden", !m), i.style.display = m ? "inline-flex" : "none";
         }
       });
     });
@@ -286,9 +285,9 @@ class S extends HTMLElement {
       return;
     }
     if (t === "context-mode") {
-      const n = this.normalizeContextMode(o);
-      if (o !== n) {
-        this.setAttribute("context-mode", n);
+      const s = this.normalizeContextMode(o);
+      if (o !== s) {
+        this.setAttribute("context-mode", s);
         return;
       }
       this.syncContextModeUI(), this.updateActionsLayout();
@@ -434,10 +433,10 @@ class S 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), n = getComputedStyle(t), a = (Number.parseFloat(n.fontSize) || 16) * 1.55, l = Number.parseFloat(n.paddingTop) || 0, m = Number.parseFloat(n.paddingBottom) || 0, p = Number.parseFloat(n.borderTopWidth) || 0, c = Number.parseFloat(n.borderBottomWidth) || 0, d = l + m + p + c, u = 3 * a + d, b = r * a + d;
+    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, h = Number.parseFloat(s.paddingBottom) || 0, p = Number.parseFloat(s.borderTopWidth) || 0, m = Number.parseFloat(s.borderBottomWidth) || 0, c = l + h + p + m, u = 3 * a + c, b = r * a + c;
     t.style.height = "auto";
-    const h = t.scrollHeight, v = Math.max(u, Math.min(h, b));
-    t.style.height = `${Math.ceil(v)}px`, t.style.overflowY = h > b ? "auto" : "hidden";
+    const v = t.scrollHeight, n = Math.max(u, Math.min(v, b));
+    t.style.height = `${Math.ceil(n)}px`, t.style.overflowY = v > b ? "auto" : "hidden";
   }
   detectBadge(t) {
     const e = t.trim();
@@ -476,7 +475,7 @@ class S 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 n = new URL(r), i = n.pathname.toLowerCase(), a = n.hostname.toLowerCase();
+      const s = new URL(r), i = s.pathname.toLowerCase(), a = s.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"))
@@ -495,13 +494,13 @@ class S extends HTMLElement {
     return null;
   }
   bindEvents() {
-    var n;
+    var s;
     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-right"]'), r = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
-    e == null || e.addEventListener("slotchange", this.onActionsSlotChange), o == null || o.addEventListener("slotchange", this.onActionsSlotChange), typeof MutationObserver < "u" && ((n = this.lightDomObserver) == null || n.disconnect(), this.lightDomObserver = new MutationObserver(() => this.updateActionsLayout()), this.lightDomObserver.observe(this, {
+    e == null || e.addEventListener("slotchange", this.onActionsSlotChange), o == null || o.addEventListener("slotchange", this.onActionsSlotChange), typeof MutationObserver < "u" && ((s = this.lightDomObserver) == null || s.disconnect(), this.lightDomObserver = new MutationObserver(() => this.updateActionsLayout()), this.lightDomObserver.observe(this, {
       childList: !0,
       subtree: !0,
       attributes: !0,
@@ -509,10 +508,10 @@ class S extends HTMLElement {
     })), r == null || r.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 n, i, a, l;
+    var s, i, a, l;
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector("textarea"), e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-right"]'), r = 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), r == null || r.removeEventListener("click", this.onDefaultSubmitClick), e == null || e.removeEventListener("slotchange", this.onActionsSlotChange), o == null || o.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), (n = this.previewRowEl) == null || n.removeEventListener("scroll", this.onPreviewScroll), (i = this.previewSlotEl) == null || i.removeEventListener("slotchange", this.onPreviewSlotChange), (a = this.previewResizeObserver) == null || a.disconnect(), this.previewResizeObserver = null, (l = this.lightDomObserver) == null || l.disconnect(), this.lightDomObserver = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null;
+    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), r == null || r.removeEventListener("click", this.onDefaultSubmitClick), e == null || e.removeEventListener("slotchange", this.onActionsSlotChange), o == null || o.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), (s = this.previewRowEl) == null || s.removeEventListener("scroll", this.onPreviewScroll), (i = this.previewSlotEl) == null || i.removeEventListener("slotchange", this.onPreviewSlotChange), (a = this.previewResizeObserver) == null || a.disconnect(), this.previewResizeObserver = null, (l = this.lightDomObserver) == null || l.disconnect(), this.lightDomObserver = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null;
   }
   bindPreviewOverflow() {
     var t, e;
@@ -539,27 +538,27 @@ class S extends HTMLElement {
       });
       return;
     }
-    const n = e === "auto" ? this.hasAttribute("loading") : !0;
+    const s = e === "auto" ? this.hasAttribute("loading") : !0;
     r.forEach((a) => {
-      a.tagName.toLowerCase() === "mui-prompt-preview" && (n ? a.setAttribute("loading", "") : a.removeAttribute("loading"), o && a.setAttribute("loading-label", o));
+      a.tagName.toLowerCase() === "mui-prompt-preview" && (s ? a.setAttribute("loading", "") : a.removeAttribute("loading"), o && a.setAttribute("loading-label", o));
     });
   }
   normalizePreviewDetail(t) {
-    const e = String(t.value || "").trim(), o = String(t.bgImage || "").trim(), r = String(t.badge || "").trim(), n = 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(), s = String(t.label || "Pasted Content"), i = String(t.imageTint || "").trim(), a = o ? "image" : e ? "code" : "text";
     return {
       id: String(t.id || ""),
       value: e,
       badge: r || (o ? "IMG" : this.detectBadge(e)),
-      label: n,
+      label: s,
       bgImage: o,
       imageTint: i,
       type: a
     };
   }
   openInternalPreviewDialog(t) {
-    var f;
+    var y;
     if (!this.shadowRoot) return;
-    const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"), n = this.shadowRoot.querySelector("#promptAutoPreviewImage"), i = this.shadowRoot.querySelector("#promptAutoPreviewMedia"), a = this.shadowRoot.querySelector("#promptAutoPreviewMediaUrl"), l = this.normalizePreviewDetail(t), m = this.getAttribute("preview-dialog-title") || l.label, p = l.value, c = l.bgImage, d = l.badge, u = p ? this.detectMediaUrl(p) : null, b = !c && p.length > 0 && (d === "VIDEO" || d === "MUSIC"), h = !c && (!!(u && (u.kind === "video" || u.kind === "audio")) || b), v = c.length > 0, s = p.length > 0, y = (() => {
+    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), h = this.getAttribute("preview-dialog-title") || l.label, p = l.value, m = l.bgImage, c = l.badge, u = p ? this.detectMediaUrl(p) : null, b = !m && p.length > 0 && (c === "VIDEO" || c === "MUSIC"), v = !m && (!!(u && (u.kind === "video" || u.kind === "audio")) || b), n = m.length > 0, d = p.length > 0, f = (() => {
       if (!u || u.kind !== "audio") return !1;
       try {
         const g = new URL(u.url);
@@ -568,25 +567,25 @@ class S extends HTMLElement {
         return !1;
       }
     })(), w = (() => {
-      if (!u || !y) return "";
+      if (!u || !f) return "";
       try {
-        const x = new URL(u.url).pathname.split("/").filter(Boolean).pop() || "", A = decodeURIComponent(x), E = A.replace(/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/i, "") || A || "Audio";
+        const A = new URL(u.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);
       } catch {
         return "Audio";
       }
     })();
-    if (!(!v && !s && !h)) {
-      if (this.setAttribute("preview-dialog-value", p), this.setAttribute("preview-dialog-image", c), this.setAttribute("preview-dialog-type", d || (v ? "IMG" : "CODE")), o && (o.textContent = m), h ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
-        a && a.setAttribute("hidden", ""), n && (n.setAttribute("src", c), n.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
-      else if (h && u) {
+    if (!(!n && !d && !v)) {
+      if (this.setAttribute("preview-dialog-value", p), this.setAttribute("preview-dialog-image", m), this.setAttribute("preview-dialog-type", c || (n ? "IMG" : "CODE")), o && (o.textContent = h), v ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), n)
+        a && a.setAttribute("hidden", ""), s && (s.setAttribute("src", m), s.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
+      else if (v && u) {
         if (a) {
-          const g = y;
+          const g = f;
           a.textContent = g ? w : u.url, g ? (a.setAttribute("href", u.url), a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer")) : (a.removeAttribute("href"), a.removeAttribute("target"), a.removeAttribute("rel")), a.toggleAttribute("hidden", !g);
         }
-        i && (i.setAttribute("src", u.url), i.removeAttribute("type"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), n && (n.removeAttribute("src"), n.setAttribute("hidden", ""));
-      } else b ? (a && (a.textContent = p, a.toggleAttribute("hidden", !0)), i && (i.setAttribute("src", p), i.setAttribute("type", d === "VIDEO" ? "video" : "audio"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), n && (n.removeAttribute("src"), n.setAttribute("hidden", ""))) : (a && a.setAttribute("hidden", ""), r && (r.textContent = this.formatPreviewCode(p, d), r.removeAttribute("hidden")), i && (i.removeAttribute("src"), i.removeAttribute("prefer-native-controls"), i.setAttribute("hidden", "")), n && (n.removeAttribute("src"), n.setAttribute("hidden", "")));
-      (f = e == null ? void 0 : e.open) == null || f.call(e);
+        i && (i.setAttribute("src", u.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 = p, a.toggleAttribute("hidden", !0)), i && (i.setAttribute("src", p), i.setAttribute("type", c === "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(p, c), 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);
     }
   }
   syncPreviewEdgeShadows() {
@@ -609,9 +608,9 @@ class S extends HTMLElement {
       e && (e.setAttribute("hidden", ""), e.style.display = "none");
       return;
     }
-    const n = o.length === 1 && this.isContextOnlyAction(o[0]);
-    e && (e.toggleAttribute("hidden", n), e.style.display = n ? "none" : "inline-flex");
-    const i = n || !r ? null : e;
+    const s = o.length === 1 && this.isContextOnlyAction(o[0]);
+    e && (e.toggleAttribute("hidden", s), e.style.display = s ? "none" : "inline-flex");
+    const i = s || !r ? null : e;
     i && (this.triggerEl = i, this.triggerEl.addEventListener("click", this.toggleFanOpen), this.syncTriggerIconState());
   }
   syncTriggerIconState() {
@@ -636,74 +635,75 @@ class S extends HTMLElement {
     const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector("#promptDefaultActionsTrigger");
     if (!t) return;
     const o = t.assignedElements({ flatten: !0 }).filter(
-      (s) => !s.hasAttribute("hidden")
-    ), r = o.length > 0, n = this.shadowRoot.querySelector(".actions-slot-left");
-    n && (n.style.display = r ? "inline-flex" : "none");
+      (n) => !n.hasAttribute("hidden")
+    ), r = o.length > 0, s = this.shadowRoot.querySelector(".actions-slot-left");
+    s && (s.style.display = r ? "inline-flex" : "none");
     const i = o.length === 1 && this.isContextOnlyAction(o[0]);
     if (e) {
-      const s = !r || i;
-      e.toggleAttribute("hidden", s), e.style.display = s ? "none" : "inline-flex";
+      const n = !r || i;
+      e.toggleAttribute("hidden", n), e.style.display = n ? "none" : "inline-flex";
     }
-    const a = i || !r ? null : e, l = o.filter((s) => s !== a), m = a ? [a, ...l] : o, p = this.shadowRoot.querySelector('slot[name="actions-right"]'), c = (p == null ? void 0 : p.assignedElements({ flatten: !0 })) || [], d = l.length > 0;
-    this.toggleAttribute("has-actions", r), this.toggleAttribute("has-extra-actions", d);
-    const u = r || this.hasTruthyFlagAttribute("actions-fan"), b = this.hasAttribute("fan-open"), h = 100, v = "calc(var(--action-icon-only-size-medium) + var(--space-100))";
-    this.enforceActionVariants(), m.forEach((s, y) => {
-      s.style.transition = `transform ${h}ms ease, opacity ${h}ms ease`, s.style.zIndex = "";
-      const w = this.fanAnimations.get(s);
-      if (w && (w.cancel(), this.fanAnimations.delete(s)), !u) {
-        this.setFanItemInert(s, !1), s.style.transitionDelay = "", s.style.transform = "", s.style.opacity = "", s.style.pointerEvents = "", s.style.filter = "";
+    const a = i || !r ? null : e, l = o.filter((n) => n !== a), h = a ? [a, ...l] : o, p = this.shadowRoot.querySelector('slot[name="actions-right"]'), m = (p == null ? void 0 : p.assignedElements({ flatten: !0 })) || [], c = l.length > 0;
+    this.toggleAttribute("has-actions", r), this.toggleAttribute("has-extra-actions", c);
+    const u = r || this.hasTruthyFlagAttribute("actions-fan"), b = this.hasAttribute("fan-open"), v = 100;
+    this.enforceActionVariants(), h.forEach((n, d) => {
+      n.style.transition = `transform ${v}ms ease, opacity ${v}ms ease`, n.style.zIndex = "";
+      const f = this.fanAnimations.get(n);
+      if (f && (f.cancel(), this.fanAnimations.delete(n)), !u) {
+        this.setFanItemInert(n, !1), n.style.transitionDelay = "", n.style.transform = "", n.style.opacity = "", n.style.pointerEvents = "", n.style.filter = "";
         return;
       }
-      if (y === 0) {
-        this.setFanItemInert(s, !1), s.style.transitionDelay = "", s.style.transform = "translateX(0)", s.style.opacity = "1", s.style.pointerEvents = "", s.style.filter = "";
+      if (d === 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 (!b) {
-        this.setFanItemInert(s, !0), s.style.transitionDelay = "", s.style.transform = "translateX(0) scale(0.8)", s.style.opacity = "0", s.style.pointerEvents = "none", s.style.filter = "";
+        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 f = `calc(${v} * -${y})`, g = y * 50;
-      s.style.transition = `opacity ${Math.max(120, h - 40)}ms ease, transform ${h}ms cubic-bezier(0.22, 1, 0.36, 1)`, s.style.transitionDelay = `${g}ms`, s.style.transform = "translateX(0) scale(0.92)", s.style.opacity = "0", s.style.pointerEvents = "none", s.style.filter = "", this.setFanItemInert(s, !0), requestAnimationFrame(() => {
-        if (s.style.transform = `translateX(${f})`, s.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-          s.style.pointerEvents = "", this.setFanItemInert(s, !1);
+      const w = "0px", y = d * 50;
+      n.style.transition = `opacity ${Math.max(120, v - 40)}ms ease, transform ${v}ms cubic-bezier(0.22, 1, 0.36, 1)`, n.style.transitionDelay = `${y}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 A = s.animate(
+        const A = n.animate(
           [
             { transform: "translateX(0) scale(0.92)" },
-            { transform: `translateX(${f}) scale(1.03)`, offset: 0.68 },
-            { transform: `translateX(calc(${f} - var(--space-050))) scale(0.99)`, offset: 0.86 },
-            { transform: `translateX(${f}) 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: h + 180,
-            delay: g,
+            duration: v + 180,
+            delay: y,
             easing: "cubic-bezier(0.22, 1, 0.36, 1)",
             fill: "forwards"
           }
         );
-        this.fanAnimations.set(s, A), A.finished.catch(() => {
+        this.fanAnimations.set(n, A), A.finished.catch(() => {
         }).finally(() => {
-          s.style.pointerEvents = "", this.setFanItemInert(s, !1);
+          n.style.pointerEvents = "", this.setFanItemInert(n, !1);
         });
       });
-    }), c.forEach((s) => {
-      s.style.transition = "", s.style.zIndex = "";
+    }), m.forEach((n) => {
+      n.style.transition = "", n.style.zIndex = "";
     }), this.bindActionTrigger(), this.syncTriggerIconState();
   }
   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"), n = this.getAttribute("preview-dialog-width") || "560px", i = this.getAttribute("color-top-start") || "", a = this.getAttribute("color-top-mid") || "", l = this.getAttribute("color-top-end") || "", m = this.getAttribute("color-top-accent") || "", c = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", d = c ? l || "var(--prompt-color-top-end, var(--green-500))" : i || "var(--prompt-color-top-start, var(--blue-500))", u = c ? m || "var(--prompt-color-top-accent, var(--orange-500))" : a || "var(--prompt-color-top-mid, var(--blue-500))", b = c ? i || "var(--prompt-color-top-start, var(--blue-500))" : l || "var(--prompt-color-top-end, var(--green-500))", h = c ? a || "var(--prompt-color-top-mid, var(--blue-500))" : m || "var(--prompt-color-top-accent, var(--orange-500))", v = this.getAttribute("aria-label"), s = this.getAttribute("aria-labelledby"), y = this.getAttribute("aria-describedby"), w = !v && !s ? "Prompt input" : "", f = (this.getAttribute("error-message") || "").trim(), g = f;
+    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.hasAttribute("preview-dialog-bordered") ? "var(--border-thin)" : "var(--dialog-border)", a = this.getAttribute("color-top-start") || "", l = this.getAttribute("color-top-mid") || "", h = this.getAttribute("color-top-end") || "", p = this.getAttribute("color-top-accent") || "", c = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", u = c ? h || "var(--prompt-color-top-end, var(--green-500))" : a || "var(--prompt-color-top-start, var(--blue-500))", b = c ? p || "var(--prompt-color-top-accent, var(--orange-500))" : l || "var(--prompt-color-top-mid, var(--blue-500))", v = c ? a || "var(--prompt-color-top-start, var(--blue-500))" : h || "var(--prompt-color-top-end, var(--green-500))", n = c ? l || "var(--prompt-color-top-mid, var(--blue-500))" : p || "var(--prompt-color-top-accent, var(--orange-500))", d = this.getAttribute("aria-label"), f = this.getAttribute("aria-labelledby"), w = this.getAttribute("aria-describedby"), y = !d && !f ? "Prompt input" : "", g = (this.getAttribute("error-message") || "").trim(), A = g;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
           display: block;
           --prompt-action-radius: var(--chip-radius-small, var(--radius-400));
-          --prompt-color-top-start-source: ${d};
-          --prompt-color-top-mid-source: ${u};
-          --prompt-color-top-end-source: ${b};
-          --prompt-color-top-accent-source: ${h};
+          --prompt-preview-dialog-border: ${i};
+          --prompt-color-top-start-source: ${u};
+          --prompt-color-top-mid-source: ${b};
+          --prompt-color-top-end-source: ${v};
+          --prompt-color-top-accent-source: ${n};
           --prompt-accent-primary-derived: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--blue-500)));
           --prompt-accent-secondary-derived: var(--prompt-accent-secondary, var(--blue-500));
           --prompt-accent-mid: color-mix(
@@ -922,7 +922,7 @@ class S extends HTMLElement {
               var(--prompt-layer-accent-tint) 0%,
               transparent 64%
             ),
-            var(--prompt-focus-surface-background, var(--surface-elevated-100));
+            var(--prompt-focus-surface-background);
           mix-blend-mode: var(--prompt-spectrum-blend-mode-hover);
           animation: none;
         }
@@ -1407,6 +1407,31 @@ class S extends HTMLElement {
           margin-top: var(--space-400);
           padding-left: var(--space-100);
         }
+        .debug-region mui-body {
+          min-width: 0;
+          max-width: 100%;
+        }
+        .debug-region mui-body::part(width) {
+          width: 100%;
+          min-width: 0;
+          max-width: 100%;
+        }
+        .debug-payload-body::part(display) {
+          display: block;
+        }
+        .debug-payload-body::part(width) {
+          width: 100%;
+          min-width: 0;
+          max-width: 100%;
+        }
+        .debug-payload-text {
+          display: block;
+          min-width: 0;
+          max-width: 100%;
+          white-space: normal;
+          overflow-wrap: anywhere;
+          word-break: break-word;
+        }
       </style>
 
         <div class="surface">
@@ -1421,10 +1446,10 @@ class S extends HTMLElement {
             <textarea
               rows="${o}"
               placeholder="${t}"
-              ${v ? `aria-label="${v.replace(/"/g, "&quot;")}"` : ""}
-              ${s ? `aria-labelledby="${s.replace(/"/g, "&quot;")}"` : ""}
-              ${y ? `aria-describedby="${y.replace(/"/g, "&quot;")}"` : ""}
-              ${w ? `aria-label="${w}"` : ""}
+              ${d ? `aria-label="${d.replace(/"/g, "&quot;")}"` : ""}
+              ${f ? `aria-labelledby="${f.replace(/"/g, "&quot;")}"` : ""}
+              ${w ? `aria-describedby="${w.replace(/"/g, "&quot;")}"` : ""}
+              ${y ? `aria-label="${y}"` : ""}
               ${r ? "disabled" : ""}
             >${e}</textarea>
           </slot>
@@ -1456,22 +1481,25 @@ class S extends HTMLElement {
         </div>
         <div class="error-region" hidden>
    
-        <mui-body size="x-small" variant="error" class="error-default" ${f ? "" : "hidden"}>
+        <mui-body size="x-small" variant="error" class="error-default" ${g ? "" : "hidden"}>
           <mui-icon-attention slot="before"></mui-icon-attention>
-          <span class="error-text">${g}</span>
+          <span class="error-text">${A}</span>
         </mui-body>
      
       </div>
       </div>
       <mui-v-stack class="debug-region" space="var(--space-050)" ${this.hasAttribute("debug") ? "" : "hidden"}>
         <mui-body id="promptDebugStatus" size="x-small" variant="optional" weight="regular">Idle: no submit yet.</mui-body>
-        <mui-body id="promptDebugPayload" size="x-small" variant="optional" weight="regular">{"event":"idle"}</mui-body>
+        <mui-body class="debug-payload-body" size="x-small" variant="optional" weight="regular">
+          <span id="promptDebugPayload" class="debug-payload-text">{"event":"idle"}</span>
+        </mui-body>
       </mui-v-stack>
 
       <mui-dialog
         id="promptAutoPreviewDialog"
-        width="${n}"
+        width="${s}"
         content-padding="none"
+        style="--dialog-border: var(--prompt-preview-dialog-border);"
       >
         <mui-heading id="promptAutoPreviewTitle" slot="title" size="5">Pasted Content</mui-heading>
         <mui-code id="promptAutoPreviewCode" size="x-small" wrap hidden></mui-code>

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

@@ -159,7 +159,7 @@ class S extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("value") || "", a = e.trim() || "Paste long content to preview it here.", t = this.getBadge(e), s = C("text", "spacing", "layout", "visual"), r = this.getAttribute("accent") || "var(--prompt-preview-accent, var(--surface-elevated-200))", i = this.getAttribute("bg-image") || "", n = this.getAttribute("image-tint") || r, d = i ? n : r, v = this.hasAttribute("inverted"), g = this.hasAttribute("badge-only") ? !1 : !i || this.hasAttribute("show-text"), b = (this.getAttribute("animation-mode") || "loop").toLowerCase(), h = (this.getAttribute("variant") || "").toLowerCase(), l = this.hasAttribute("loading"), u = (this.getAttribute("loading-label") || "Loading preview").trim(), w = (this.hasAttribute("animated") || !!i) && b !== "off", f = b === "once" ? "1" : "infinite", c = h === "overlay" || !!i, x = c ? "overlay" : "neutral", y = c ? "overlay" : "secondary", A = `dismiss-action${c ? "" : " dismiss-secondary"}`, k = this.hasAttribute("clickable") && !l, o = this.extractUrl(e), $ = !!(o && this.isImageUrl(o)), z = !!(o && !i && (t === "VIDEO" || t === "MUSIC")), I = o ? this.escapeHtml(o) : "", P = i.replace(/"/g, """), E = i ? `
+    const e = this.getAttribute("value") || "", a = e.trim() || "Paste long content to preview it here.", t = this.getBadge(e), s = C("text", "spacing", "layout", "visual"), r = this.getAttribute("accent") || "var(--prompt-preview-accent, var(--surface-elevated-200))", i = this.getAttribute("bg-image") || "", n = this.getAttribute("image-tint") || r, u = i ? n : r, v = this.hasAttribute("inverted"), g = this.hasAttribute("badge-only") ? !1 : !i || this.hasAttribute("show-text"), d = (this.getAttribute("animation-mode") || "loop").toLowerCase(), h = (this.getAttribute("variant") || "").toLowerCase(), l = this.hasAttribute("loading"), b = (this.getAttribute("loading-label") || "Loading preview").trim(), w = (this.hasAttribute("animated") || !!i) && d !== "off", f = d === "once" ? "1" : "infinite", c = h === "overlay" || !!i, x = c ? "overlay" : "neutral", y = c ? "overlay" : "secondary", A = `dismiss-action${c ? "" : " dismiss-secondary"}`, k = this.hasAttribute("clickable") && !l, o = this.extractUrl(e), $ = !!(o && this.isImageUrl(o)), z = !!(o && !i && (t === "VIDEO" || t === "MUSIC")), I = o ? this.escapeHtml(o) : "", P = i.replace(/"/g, """), E = i ? `
             linear-gradient(
               180deg,
               color-mix(in srgb, ${n} 42%, transparent 58%) 0%,
@@ -193,6 +193,10 @@ class S extends HTMLElement {
               color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-400), transparent) 0%,
               color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-500), transparent) 30%,
               transparent 100%
+            ),
+            linear-gradient(
+              var(--prompt-preview-background),
+              var(--prompt-preview-background)
             )
       `, L = `box${i ? " has-image" : ""}${c ? " variant-overlay" : ""}${v ? " inverted" : ""}`;
     this.shadowRoot.innerHTML = /*html*/
@@ -216,17 +220,9 @@ class S extends HTMLElement {
         .box {
           position: relative;
           border: var(--border-thin);
-          border-color: var(--form-default-border-color);
           border-radius: var(--radius-200);
           box-shadow:
-            var(--shadow-200),
-            0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20),
-            inset 0 0 0 1px color-mix(in srgb, ${d} 12%, transparent 88%),
-            inset 0 calc(var(--space-050) * -1) var(--space-300) color-mix(in srgb, #000 12%, transparent 88%);
-          filter: var(
-            --prompt-preview-box-drop-shadow,
-            drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20))
-          );
+            0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-5);
           background: ${E};
           box-sizing: border-box;
           width: 100%;
@@ -296,19 +292,11 @@ class S extends HTMLElement {
         .box::before {
           background: radial-gradient(
             120% 80% at 50% -10%,
-            color-mix(in srgb, ${d} 32%, transparent 68%) 0%,
+            color-mix(in srgb, ${u} 32%, transparent 68%) 0%,
             transparent 70%
           );
           filter: blur(var(--space-050));
         }
-        .box::after {
-          background: radial-gradient(
-            120% 90% at 50% 110%,
-            color-mix(in srgb, #000 14%, transparent 86%) 0%,
-            transparent 72%
-          );
-          filter: blur(var(--space-100));
-        }
         .box.animated::before {
           animation: previewPulse 2400ms ease-in-out var(--prompt-preview-iterations);
         }
@@ -382,7 +370,7 @@ class S extends HTMLElement {
         mui-badge {
           position: absolute;
           z-index: 3;
-          top: calc(var(--space-100) + var(--stroke-size-100));
+          top: calc(var(--space-100) + var(--stroke-size-200));
           left: calc(var(--space-100) + var(--stroke-size-100));
 
         }
@@ -504,12 +492,12 @@ class S extends HTMLElement {
         <mui-button class="${A}" icon-only size="xx-small" variant="${y}" aria-label="Dismiss preview">
           <mui-icon-close size="xx-small"></mui-icon-close>
         </mui-button>
-        <mui-badge variant="${x}" size="x-small">${t}</mui-badge>
+        <mui-badge variant="${x}" size="xx-small">${t}</mui-badge>
         <mui-v-stack class="inner${z ? " media-inline" : ""}" space="var(--space-025)" alignX="stretch">
           ${g ? $ && !i ? `<img class="snippet-image" src="${I}" alt="${this.escapeHtml(t)} preview image" />` : `<mui-body class="snippet" size="x-small" variant="optional">${o ? `${t === "VIDEO" ? '<span class="snippet-media-only"><mui-icon-play-rectangle class="snippet-media-icon" size="medium"></mui-icon-play-rectangle></span>' : t === "MUSIC" ? '<span class="snippet-media-only"><mui-icon-music-microphone class="snippet-media-icon" size="medium"></mui-icon-music-microphone></span>' : this.escapeHtml(a.slice(0, 260))}` : this.escapeHtml(a.slice(0, 260))}</mui-body>` : ""}
         </mui-v-stack>
-        <div class="loading-overlay" aria-live="polite" aria-label="${this.escapeHtml(u)}">
-          <mui-spinner size="small" label="${this.escapeHtml(u)}"></mui-spinner>
+        <div class="loading-overlay" aria-live="polite" aria-label="${this.escapeHtml(b)}">
+          <mui-spinner size="small" label="${this.escapeHtml(b)}"></mui-spinner>
         </div>
       </div>
     `;