@muibook/components 20.0.0 → 20.1.0

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

@@ -31,14 +31,14 @@ class S extends HTMLElement {
       e.forEach((r) => {
         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, s);
+              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, s));
+            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,18 +48,18 @@ class S 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, 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) : "", h = d !== "" && d !== "Insightful", b = m && a && (!!(l != null && l.url) || i.length >= c || h), v = r.length > 0;
+      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((u) => ({
-        kind: u.type.startsWith("image/") ? "image" : u.type.startsWith("video/") ? "video" : u.type.startsWith("audio/") ? "audio" : "file",
-        mimeType: u.type || "",
-        file: u,
-        fileName: u.name || "",
-        size: u.size || 0,
-        badge: u.type.startsWith("image/") ? "IMG" : u.type.startsWith("video/") ? "VIDEO" : u.type.startsWith("audio/") ? "MUSIC" : "FILE",
-        preview: u.name || "Pasted file",
-        value: u.name || ""
+      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 ? n.unshift({
         kind: l.kind === "image" ? "image" : "text",
@@ -77,9 +77,9 @@ class S extends HTMLElement {
         source: "paste",
         items: n,
         text: s || "",
-        textBadge: (l == null ? void 0 : l.badge) || d,
+        textBadge: (l == null ? void 0 : l.badge) || c,
         overflowed: b,
-        thresholdChars: c
+        thresholdChars: m
       });
     }, this.onInput = (t) => {
       const e = t.target;
@@ -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",
@@ -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";
         }
       });
     });
@@ -434,9 +433,9 @@ 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), s = getComputedStyle(t), a = (Number.parseFloat(s.fontSize) || 16) * 1.55, l = Number.parseFloat(s.paddingTop) || 0, m = Number.parseFloat(s.paddingBottom) || 0, p = Number.parseFloat(s.borderTopWidth) || 0, c = Number.parseFloat(s.borderBottomWidth) || 0, d = l + m + p + c, h = 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 v = t.scrollHeight, n = Math.max(h, Math.min(v, b));
+    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) {
@@ -557,36 +556,36 @@ class S extends HTMLElement {
     };
   }
   openInternalPreviewDialog(t) {
-    var w;
+    var y;
     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), m = this.getAttribute("preview-dialog-title") || l.label, p = l.value, c = l.bgImage, d = l.badge, h = p ? this.detectMediaUrl(p) : null, b = !c && p.length > 0 && (d === "VIDEO" || d === "MUSIC"), v = !c && (!!(h && (h.kind === "video" || h.kind === "audio")) || b), n = c.length > 0, u = p.length > 0, y = (() => {
-      if (!h || h.kind !== "audio") return !1;
+    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 f = new URL(h.url);
-        return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(f.pathname.toLowerCase());
+        const g = new URL(u.url);
+        return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(g.pathname.toLowerCase());
       } catch {
         return !1;
       }
-    })(), g = (() => {
-      if (!h || !y) return "";
+    })(), w = (() => {
+      if (!u || !f) return "";
       try {
-        const A = new URL(h.url).pathname.split("/").filter(Boolean).pop() || "", x = decodeURIComponent(A), E = x.replace(/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/i, "") || x || "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 (!(!n && !u && !v)) {
-      if (this.setAttribute("preview-dialog-value", p), this.setAttribute("preview-dialog-image", c), this.setAttribute("preview-dialog-type", d || (n ? "IMG" : "CODE")), o && (o.textContent = m), 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", c), s.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
-      else if (v && h) {
+    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 f = y;
-          a.textContent = f ? g : h.url, f ? (a.setAttribute("href", h.url), a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer")) : (a.removeAttribute("href"), a.removeAttribute("target"), a.removeAttribute("rel")), a.toggleAttribute("hidden", !f);
+          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", h.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", d === "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, d), r.removeAttribute("hidden")), i && (i.removeAttribute("src"), i.removeAttribute("prefer-native-controls"), i.setAttribute("hidden", "")), s && (s.removeAttribute("src"), s.setAttribute("hidden", "")));
-      (w = e == null ? void 0 : e.open) == null || w.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() {
@@ -644,17 +643,17 @@ class S extends HTMLElement {
       const n = !r || i;
       e.toggleAttribute("hidden", n), e.style.display = n ? "none" : "inline-flex";
     }
-    const a = i || !r ? null : e, l = o.filter((n) => n !== 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 h = r || this.hasTruthyFlagAttribute("actions-fan"), b = this.hasAttribute("fan-open"), v = 100;
-    this.enforceActionVariants(), m.forEach((n, u) => {
+    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 y = this.fanAnimations.get(n);
-      if (y && (y.cancel(), this.fanAnimations.delete(n)), !h) {
+      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 (u === 0) {
+      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;
       }
@@ -662,22 +661,22 @@ class S extends HTMLElement {
         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 g = "0px", w = u * 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 = `${w}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(${g})`, n.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      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 = n.animate(
           [
             { transform: "translateX(0) scale(0.92)" },
-            { transform: `translateX(${g}) scale(1.03)`, offset: 0.68 },
-            { transform: `translateX(calc(${g} - var(--space-050))) scale(0.99)`, offset: 0.86 },
-            { transform: `translateX(${g}) 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: v + 180,
-            delay: w,
+            delay: y,
             easing: "cubic-bezier(0.22, 1, 0.36, 1)",
             fill: "forwards"
           }
@@ -687,23 +686,24 @@ class S extends HTMLElement {
           n.style.pointerEvents = "", this.setFanItemInert(n, !1);
         });
       });
-    }), c.forEach((n) => {
+    }), 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"), 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") || "", 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))", h = 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))", v = c ? a || "var(--prompt-color-top-mid, var(--blue-500))" : m || "var(--prompt-color-top-accent, var(--orange-500))", n = this.getAttribute("aria-label"), u = this.getAttribute("aria-labelledby"), y = this.getAttribute("aria-describedby"), g = !n && !u ? "Prompt input" : "", w = (this.getAttribute("error-message") || "").trim(), f = w;
+    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: ${h};
-          --prompt-color-top-end-source: ${b};
-          --prompt-color-top-accent-source: ${v};
+          --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}"
-              ${n ? `aria-label="${n.replace(/"/g, "&quot;")}"` : ""}
-              ${u ? `aria-labelledby="${u.replace(/"/g, "&quot;")}"` : ""}
-              ${y ? `aria-describedby="${y.replace(/"/g, "&quot;")}"` : ""}
-              ${g ? `aria-label="${g}"` : ""}
+              ${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" ${w ? "" : "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">${f}</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="${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>
     `;

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

@@ -6,41 +6,62 @@ class c extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  get checked() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    return (e == null ? void 0 : e.checked) ?? this.hasAttribute("checked");
+  }
+  set checked(e) {
+    this.toggleAttribute("checked", !!e);
+  }
+  get value() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    return (e == null ? void 0 : e.value) ?? this.getAttribute("value") ?? "";
+  }
+  set value(e) {
+    this.setAttribute("value", e ?? "");
+  }
+  focus(e) {
+    var a;
+    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("input");
+    t ? t.focus(e) : super.focus(e);
+  }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, i, a) {
+  attributeChangedCallback(e, t, a) {
     var r;
-    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
     if (e === "checked") {
-      t && (t.checked = a !== null);
+      i && (i.checked = a !== null);
       return;
     }
     if (e === "disabled") {
-      t && (t.disabled = a !== null);
+      i && (i.disabled = a !== null);
       return;
     }
     ["id", "name", "value", "aria-label", "size"].includes(e) && (this.render(), this.setupListener());
   }
   cleanupListeners() {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
     e && this._changeHandler && e.removeEventListener("change", this._changeHandler);
   }
   setupListener() {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
     e && (this.cleanupListeners(), this._changeHandler = (a) => {
-      const t = a.target;
-      t.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(
+      const i = a.target;
+      i.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(
         new CustomEvent("change", {
           detail: {
-            checked: t.checked,
-            value: t.value,
-            name: t.name
+            checked: i.checked,
+            value: i.value,
+            name: i.name
           },
           bubbles: !0,
           composed: !0
@@ -49,7 +70,7 @@ class c extends HTMLElement {
     }, e.addEventListener("change", this._changeHandler));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-radio-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("name") || "", a = this.getAttribute("value") || "", t = this.hasAttribute("checked"), r = this.hasAttribute("disabled"), o = this.getAttribute("aria-label") || "", s = this.getAttribute("size") || "medium", d = ["x-small", "small", "medium", "large"].includes(s) ? s : "medium", l = this.innerHTML.trim().length > 0;
+    const e = this.getAttribute("id") || `mui-radio-${Math.random().toString(36).substr(2, 9)}`, t = this.getAttribute("name") || "", a = this.getAttribute("value") || "", i = this.hasAttribute("checked"), r = this.hasAttribute("disabled"), s = this.getAttribute("aria-label") || "", o = this.getAttribute("size") || "medium", d = ["x-small", "small", "medium", "large"].includes(o) ? o : "medium", l = this.innerHTML.trim().length > 0;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -141,11 +162,11 @@ class c extends HTMLElement {
         <input
           type="radio"
           id="${e}"
-          name="${i}"
+          name="${t}"
           value="${a}"
-          ${t ? "checked" : ""}
+          ${i ? "checked" : ""}
           ${r ? "disabled" : ""}
-          ${o ? `aria-label="${o}"` : ""}
+          ${s ? `aria-label="${s}"` : ""}
         />
         ${l ? `<mui-body size="${d === "x-small" || d === "small" ? "x-small" : "small"}"><slot></slot></mui-body>` : ""}
       </label>

package/dist/esm/components/mui-range-input/index.js

@@ -18,6 +18,11 @@ class u extends HTMLElement {
   set value(e) {
     this.setAttribute("value", String(Number.isFinite(e) ? e : 0));
   }
+  focus(e) {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    t ? t.focus(e) : super.focus(e);
+  }
   getThumbSize() {
     return Number(this.getAttribute("thumb-size") || "16");
   }
@@ -32,8 +37,8 @@ class u extends HTMLElement {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("input"), t = this.shadowRoot.querySelector('[data-role="bubble"]');
     if (!e || !t) return;
-    const r = Number(e.min || "0"), a = Number(e.max || "0"), i = Number(e.value || "0"), o = Math.max(0, a - r), s = o > 0 ? Math.max(0, Math.min(1, (i - r) / o)) : 0, n = this.getThumbSize();
-    t.textContent = this.formatBubble(i), t.style.left = `calc(${s * 100}% - ${(s - 0.5) * n}px)`;
+    const r = Number(e.min || "0"), a = Number(e.max || "0"), i = Number(e.value || "0"), s = Math.max(0, a - r), o = s > 0 ? Math.max(0, Math.min(1, (i - r) / s)) : 0, n = this.getThumbSize();
+    t.textContent = this.formatBubble(i), t.style.left = `calc(${o * 100}% - ${(o - 0.5) * n}px)`;
   }
   bind() {
     if (!this.shadowRoot) return;
@@ -64,7 +69,7 @@ class u extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("min") || "0", t = this.getAttribute("max") || "100", r = this.getAttribute("value") || "0", a = this.getAttribute("step") || "1", i = this.hasAttribute("disabled"), o = this.getAttribute("label") || "Range input";
+    const e = this.getAttribute("min") || "0", t = this.getAttribute("max") || "100", r = this.getAttribute("value") || "0", a = this.getAttribute("step") || "1", i = this.hasAttribute("disabled"), s = this.getAttribute("label") || "Range input";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -111,7 +116,7 @@ class u extends HTMLElement {
           max="${t}"
           value="${r}"
           step="${a}"
-          aria-label="${o.replace(/"/g, "&quot;")}"
+          aria-label="${s.replace(/"/g, "&quot;")}"
           ${i ? "disabled" : ""}
         />
         <mui-body data-role="bubble" size="x-small" variant="optional" aria-hidden="true">0</mui-body>