@muibook/components 11.0.0 → 12.0.0

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

@@ -20,8 +20,8 @@ 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 = () => {
       if (!this.shadowRoot) 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;
+      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;
         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 a = r.name === "actions";
-        r.assignedElements({ flatten: !0 }).forEach((s) => {
-          [s, ...Array.from(s.querySelectorAll("*"))].forEach((c) => {
+        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, a);
+              c.setAttribute("variant", "tertiary"), o(c, s);
               return;
             }
             u === "mui-dropdown" && c.querySelectorAll('[slot="action"]').forEach((h) => {
-              h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-button" && (h.setAttribute("variant", "tertiary"), o(h, a));
+              h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-button" && (h.setAttribute("variant", "tertiary"), o(h, s));
             });
           });
         });
@@ -48,8 +48,8 @@ class k extends HTMLElement {
     }, this.onPaste = (t) => {
       const e = t, o = e.clipboardData;
       if (!o) 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", u = this.getAttribute("preview-threshold-chars"), p = Number.isFinite(Number.parseInt(u || "", 10)) ? Math.max(1, Number.parseInt(u || "", 10)) : 220, h = s ? this.detectBadge(i) : "", m = h !== "" && h !== "Insightful", b = c && s && (!!(l != null && l.url) || i.length >= p || m), g = r.length > 0;
-      if (!g && !s) 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;
       (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",
@@ -72,11 +72,11 @@ class k extends HTMLElement {
         mimeType: "text/plain",
         badge: this.detectBadge(i),
         preview: i.slice(0, 260),
-        value: a
+        value: s
       })), this.emitPromptItems({
         source: "paste",
         items: v,
-        text: a || "",
+        text: s || "",
         textBadge: (l == null ? void 0 : l.badge) || h,
         overflowed: b,
         thresholdChars: p
@@ -116,31 +116,31 @@ class k extends HTMLElement {
       const e = t.composedPath();
       if (e.some((i) => {
         if (!(i instanceof HTMLElement)) return !1;
-        const s = i.tagName.toLowerCase();
-        return s === "textarea" || s === "input" || i.isContentEditable;
+        const a = i.tagName.toLowerCase();
+        return a === "textarea" || a === "input" || i.isContentEditable;
       })) return;
       if (e.find((i) => {
-        var s;
-        return i instanceof HTMLElement && ((s = i.hasAttribute) == null ? void 0 : s.call(i, "context-close"));
+        var a;
+        return i instanceof HTMLElement && ((a = i.hasAttribute) == null ? void 0 : a.call(i, "context-close"));
       })) {
         this.setContextMode("icon", "dismiss"), this.updateActionsLayout();
         return;
       }
       e.find(
         (i) => {
-          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");
+          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");
         }
       ) && (this.setContextMode("chip", "click"), this.updateActionsLayout());
     }, this.onContextChipDismiss = (t) => {
       t.composedPath().find(
         (r) => {
-          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")));
+          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 = () => {
-      this.hasAttribute("actions-fan") && (this.toggleAttribute("fan-open"), this.updateActionsLayout());
+      this.toggleAttribute("fan-open"), this.updateActionsLayout();
     }, this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
@@ -156,6 +156,8 @@ class k extends HTMLElement {
       "preview-scrollbar",
       "preview-threshold-chars",
       "preview-auto-clickable",
+      "preview-loading",
+      "preview-loading-label",
       "preview-dialog-width",
       "preview-dialog-title",
       "context-mode",
@@ -181,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"), a = this.shadowRoot.querySelector("#promptDebugPayload");
-    if (!o || !r || !a) 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)), a.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: a,
+    thresholdChars: s,
     source: i
   }) {
     this.dispatchEvent(
@@ -202,7 +204,7 @@ class k extends HTMLElement {
           text: e,
           textBadge: o,
           overflowed: r,
-          thresholdChars: a,
+          thresholdChars: s,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         },
         bubbles: !0,
@@ -251,9 +253,12 @@ class k extends HTMLElement {
       });
     });
   }
+  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.render(), this.bindEvents(), this.updateActionsLayout();
+    this.hasAttribute("context-mode") || this.setAttribute("context-mode", "icon"), this.ensureFanMode(), this.render(), this.bindEvents(), this.updateActionsLayout();
     const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("textarea");
     t && (this.syncTextareaHeight(t), requestAnimationFrame(() => this.syncTextareaHeight(t)));
   }
@@ -268,9 +273,9 @@ class k extends HTMLElement {
       return;
     }
     if (t === "context-mode") {
-      const a = this.normalizeContextMode(o);
-      if (o !== a) {
-        this.setAttribute("context-mode", a);
+      const s = this.normalizeContextMode(o);
+      if (o !== s) {
+        this.setAttribute("context-mode", s);
         return;
       }
       this.syncContextModeUI(), this.updateActionsLayout();
@@ -293,7 +298,7 @@ class k extends HTMLElement {
       return;
     }
     if (t === "fan-open" || t === "actions-fan") {
-      this.updateActionsLayout();
+      this.ensureFanMode(), this.updateActionsLayout();
       return;
     }
     if (t === "debug") {
@@ -301,7 +306,11 @@ class k extends HTMLElement {
       return;
     }
     if (t === "loading" || t === "loading-label") {
-      this.syncLoadingState();
+      this.syncLoadingState(), this.syncPreviewLoadingState();
+      return;
+    }
+    if (t === "preview-loading" || t === "preview-loading-label") {
+      this.syncPreviewLoadingState();
       return;
     }
     (t === "color-layout" || t === "color-top-start" || t === "color-top-mid" || t === "color-top-end" || t === "color-top-accent") && (this.pendingColorFade = !0), this.render(), this.bindEvents(), this.updateActionsLayout(), this.pendingColorFade && (this.runColorFade(), this.pendingColorFade = !1);
@@ -412,7 +421,7 @@ 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), a = getComputedStyle(t), s = (Number.parseFloat(a.fontSize) || 16) * 1.55, l = Number.parseFloat(a.paddingTop) || 0, c = Number.parseFloat(a.paddingBottom) || 0, u = Number.parseFloat(a.borderTopWidth) || 0, p = Number.parseFloat(a.borderBottomWidth) || 0, h = l + c + u + p, m = 3 * s + h, b = r * s + h;
+    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;
     t.style.height = "auto";
     const g = t.scrollHeight, v = Math.max(m, Math.min(g, b));
     t.style.height = `${Math.ceil(v)}px`, t.style.overflowY = g > b ? "auto" : "hidden";
@@ -454,14 +463,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 a = new URL(r), i = a.pathname.toLowerCase(), s = a.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 (s === "youtu.be" || s.endsWith("youtube.com") || s.endsWith("youtube-nocookie.com"))
+      if (a === "youtu.be" || a.endsWith("youtube.com") || a.endsWith("youtube-nocookie.com"))
         return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
-      if (s.endsWith("vimeo.com") || s.endsWith("twitch.tv"))
+      if (a.endsWith("vimeo.com") || a.endsWith("twitch.tv"))
         return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
-      if (s.endsWith("soundcloud.com") || s.endsWith("spotify.com") || s.endsWith("bandcamp.com") || s.endsWith("mixcloud.com"))
+      if (a.endsWith("soundcloud.com") || a.endsWith("spotify.com") || a.endsWith("bandcamp.com") || a.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/*" };
@@ -477,14 +486,14 @@ class k extends HTMLElement {
     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"]'), a = 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()), 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();
+    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();
   }
   unbindEvents() {
-    var o, r, a;
+    var o, r, s;
     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), (a = this.previewResizeObserver) == null || a.disconnect(), this.previewResizeObserver = 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), 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;
   }
   bindPreviewOverflow() {
     var t, e;
@@ -493,7 +502,7 @@ class k extends HTMLElement {
   syncPreviewVisibility() {
     if (!this.previewShellEl || !this.previewSlotEl) return;
     const t = this.previewSlotEl.assignedElements({ flatten: !0 }), e = t.length > 0;
-    this.previewShellEl.toggleAttribute("hidden", !e), this.syncPreviewInteractivity(t);
+    this.previewShellEl.toggleAttribute("hidden", !e), this.syncPreviewInteractivity(t), this.syncPreviewLoadingState(t);
   }
   syncPreviewInteractivity(t) {
     var o;
@@ -502,22 +511,36 @@ class k extends HTMLElement {
       r.tagName.toLowerCase() === "mui-prompt-preview" && r.getAttribute("clickable") !== "false" && r.setAttribute("clickable", "");
     });
   }
+  syncPreviewLoadingState(t) {
+    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");
+      });
+      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));
+    });
+  }
   normalizePreviewDetail(t) {
-    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";
+    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: a,
+      label: s,
       bgImage: o,
       imageTint: i,
-      type: s
+      type: a
     };
   }
   openInternalPreviewDialog(t) {
     var y;
     if (!this.shadowRoot) return;
-    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, 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 = (() => {
+    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;
       try {
         const f = new URL(m.url);
@@ -536,14 +559,14 @@ class k extends HTMLElement {
     })();
     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)
-        s && s.setAttribute("hidden", ""), a && (a.setAttribute("src", p), a.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
+        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 (s) {
+        if (a) {
           const f = w;
-          s.textContent = f ? n : m.url, f ? (s.setAttribute("href", m.url), s.setAttribute("target", "_blank"), s.setAttribute("rel", "noopener noreferrer")) : (s.removeAttribute("href"), s.removeAttribute("target"), s.removeAttribute("rel")), s.toggleAttribute("hidden", !f);
+          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", ""), a && (a.removeAttribute("src"), a.setAttribute("hidden", ""));
-      } else b ? (s && (s.textContent = u, s.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", ""), a && (a.removeAttribute("src"), a.setAttribute("hidden", ""))) : (s && s.setAttribute("hidden", ""), r && (r.textContent = this.formatPreviewCode(u, h), r.removeAttribute("hidden")), i && (i.removeAttribute("src"), i.removeAttribute("prefer-native-controls"), i.setAttribute("hidden", "")), a && (a.removeAttribute("src"), a.setAttribute("hidden", "")));
+        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);
     }
   }
@@ -562,16 +585,16 @@ class k extends HTMLElement {
     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")
-    ), a = t.assignedElements({ flatten: !0 }).filter(
+    ), s = t.assignedElements({ flatten: !0 }).filter(
       (c) => !c.hasAttribute("hidden")
     );
-    if (!(a.length > 0)) {
+    if (!(s.length > 0)) {
       o && (o.setAttribute("hidden", ""), o.style.display = "none");
       return;
     }
-    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;
+    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;
     l && (this.triggerEl = l, this.triggerEl.addEventListener("click", this.toggleFanOpen), this.syncTriggerIconState());
   }
   syncTriggerIconState() {
@@ -595,18 +618,18 @@ 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 a = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
+    const s = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
       (n) => !n.hasAttribute("hidden")
     ), i = t.assignedElements({ flatten: !0 }).filter(
       (n) => !n.hasAttribute("hidden")
-    ), 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]);
+    ), 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]);
     if (o) {
-      const n = !s || c;
+      const n = !a || c;
       o.toggleAttribute("hidden", n), o.style.display = n ? "none" : "inline-flex";
     }
-    const u = 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 !== 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 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))";
     if (r) {
       const n = g && v && i.length > 0;
       r.toggleAttribute("hidden", !n), r.style.display = n ? "inline-flex" : "none";
@@ -657,7 +680,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"), 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(--mui-brand-400))", m = 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(--mui-brand-400))" : 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"), 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"), 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;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -668,7 +691,7 @@ class k extends HTMLElement {
           --_prompt-color-top-mid-source: ${m};
           --_prompt-color-top-end-source: ${b};
           --_prompt-color-top-accent-source: ${g};
-          --_prompt-accent-primary: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--mui-brand-400)));
+          --_prompt-accent-primary: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--blue-500)));
           --_prompt-accent-secondary: var(--prompt-accent-secondary, var(--blue-500));
           --_prompt-accent-mid: color-mix(in srgb, var(--_prompt-accent-primary) 52%, var(--_prompt-accent-secondary) 48%);
           --_prompt-start-tint: color-mix(in srgb, var(--_prompt-color-top-start-source) 24%, transparent 76%);
@@ -1446,7 +1469,7 @@ class k extends HTMLElement {
 
       <mui-dialog
         id="promptAutoPreviewDialog"
-        width="${a}"
+        width="${s}"
         content-padding="none"
       >
         <mui-heading id="promptAutoPreviewTitle" slot="title" size="5">Pasted Content</mui-heading>

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

@@ -4,9 +4,10 @@ import "../mui-button/index.js";
 import "../mui-icons/close/index.js";
 import "../mui-icons/play-rectangle/index.js";
 import "../mui-icons/music-microphone/index.js";
+import "../mui-spinner/index.js";
 import "../mui-stack/vstack/index.js";
-import { getPartMap as E } from "../../utils/part-map/index.js";
-class C extends HTMLElement {
+import { getPartMap as C } from "../../utils/part-map/index.js";
+class S extends HTMLElement {
   constructor() {
     super(), this.onDismiss = (e) => {
       e.preventDefault(), e.stopPropagation(), this.dispatchEvent(
@@ -60,7 +61,9 @@ class C extends HTMLElement {
       "animated",
       "animation-mode",
       "variant",
-      "clickable"
+      "clickable",
+      "loading",
+      "loading-label"
     ];
   }
   get value() {
@@ -156,14 +159,14 @@ class C 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 = E("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, m = i ? n : r, b = this.hasAttribute("inverted"), u = this.hasAttribute("badge-only") ? !1 : !i || this.hasAttribute("show-text"), d = (this.getAttribute("animation-mode") || "loop").toLowerCase(), v = (this.getAttribute("variant") || "").toLowerCase(), h = (this.hasAttribute("animated") || !!i) && d !== "off", g = d === "once" ? "1" : "infinite", c = v === "overlay" || !!i, w = c ? "overlay" : "neutral", f = c ? "overlay" : "secondary", x = `dismiss-action${c ? "" : " dismiss-secondary"}`, y = this.hasAttribute("clickable"), o = this.extractUrl(e), A = !!(o && this.isImageUrl(o)), k = !!(o && !i && (t === "VIDEO" || t === "MUSIC")), $ = o ? this.escapeHtml(o) : "", z = i.replace(/"/g, """), I = 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, 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 ? `
             linear-gradient(
               180deg,
               color-mix(in srgb, ${n} 42%, transparent 58%) 0%,
               color-mix(in srgb, ${n} 22%, transparent 78%) 30%,
               color-mix(in srgb, #000 24%, transparent 76%) 100%
             ),
-            url("${z}") center / cover no-repeat
+            url("${P}") center / cover no-repeat
       ` : `
             radial-gradient(
               circle at 12% 18%,
@@ -191,7 +194,7 @@ class C extends HTMLElement {
               color-mix(in srgb, ${r} var(--prompt-preview-accent-mix-500), transparent) 30%,
               transparent 100%
             )
-      `, P = `box${i ? " has-image" : ""}${c ? " variant-overlay" : ""}${b ? " inverted" : ""}`;
+      `, L = `box${i ? " has-image" : ""}${c ? " variant-overlay" : ""}${v ? " inverted" : ""}`;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -218,13 +221,13 @@ class C extends HTMLElement {
           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, ${m} 12%, transparent 88%),
+            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))
           );
-          background: ${I};
+          background: ${E};
           box-sizing: border-box;
           width: 100%;
           min-height: calc(var(--space-600) * 2);
@@ -238,6 +241,25 @@ class C extends HTMLElement {
           --prompt-preview-top-shade-end-active: var(--prompt-preview-top-shade-end);
           color: var(--prompt-preview-text-color);
         }
+        .box.loading .inner,
+        .box.loading mui-badge,
+        .box.loading .dismiss-action {
+          display: none;
+        }
+        .loading-overlay {
+          position: absolute;
+          inset: 0;
+          z-index: 4;
+          display: none;
+          align-items: center;
+          justify-content: center;
+          pointer-events: none;
+          background: color-mix(in srgb, var(--surface-elevated-100) 35%, transparent 65%);
+          backdrop-filter: blur(var(--space-025));
+        }
+        .box.loading .loading-overlay {
+          display: inline-flex;
+        }
         .box.animated {
           overflow: hidden;
         }
@@ -274,7 +296,7 @@ class C extends HTMLElement {
         .box::before {
           background: radial-gradient(
             120% 80% at 50% -10%,
-            color-mix(in srgb, ${m} 32%, transparent 68%) 0%,
+            color-mix(in srgb, ${d} 32%, transparent 68%) 0%,
             transparent 70%
           );
           filter: blur(var(--space-050));
@@ -476,22 +498,25 @@ class C extends HTMLElement {
         }
       </style>
 
-      <div class="${P}${h ? " animated" : ""}" part="${s}" style="--prompt-preview-iterations: ${g};">
+      <div class="${L}${w ? " animated" : ""}${l ? " loading" : ""}" part="${s}" style="--prompt-preview-iterations: ${f};" ${l ? 'aria-busy="true"' : ""}>
         <span class="top-shade"></span>
         <span class="scanline"></span>
-        <mui-button class="${x}" icon-only size="xx-small" variant="${f}" aria-label="Dismiss preview">
+        <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="${w}" size="x-small">${t}</mui-badge>
-        <mui-v-stack class="inner${k ? " media-inline" : ""}" space="var(--space-025)" alignX="stretch">
-          ${u ? A && !i ? `<img class="snippet-image" src="${$}" 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-badge variant="${x}" size="x-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>
       </div>
     `;
-    const l = this.shadowRoot.querySelector(".dismiss-action");
-    l == null || l.addEventListener("click", this.onDismiss);
+    const m = this.shadowRoot.querySelector(".dismiss-action");
+    m == null || m.addEventListener("click", this.onDismiss);
     const p = this.shadowRoot.querySelector(".box");
-    p == null || p.removeEventListener("click", this.onOpenPreview), this.removeEventListener("keydown", this.onKeyOpenPreview), y ? (this.setAttribute("tabindex", this.getAttribute("tabindex") || "0"), this.setAttribute("role", this.getAttribute("role") || "button"), this.setAttribute("aria-haspopup", this.getAttribute("aria-haspopup") || "dialog"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", this.getAccessibleSummary(e, t)), p == null || p.addEventListener("click", this.onOpenPreview), this.addEventListener("keydown", this.onKeyOpenPreview)) : (this.getAttribute("tabindex") === "0" && this.removeAttribute("tabindex"), this.getAttribute("role") === "button" && this.removeAttribute("role"), this.getAttribute("aria-haspopup") === "dialog" && this.removeAttribute("aria-haspopup"));
+    p == null || p.removeEventListener("click", this.onOpenPreview), this.removeEventListener("keydown", this.onKeyOpenPreview), k ? (this.setAttribute("tabindex", this.getAttribute("tabindex") || "0"), this.setAttribute("role", this.getAttribute("role") || "button"), this.setAttribute("aria-haspopup", this.getAttribute("aria-haspopup") || "dialog"), this.hasAttribute("aria-label") || this.setAttribute("aria-label", this.getAccessibleSummary(e, t)), p == null || p.addEventListener("click", this.onOpenPreview), this.addEventListener("keydown", this.onKeyOpenPreview)) : (this.getAttribute("tabindex") === "0" && this.removeAttribute("tabindex"), this.getAttribute("role") === "button" && this.removeAttribute("role"), this.getAttribute("aria-haspopup") === "dialog" && this.removeAttribute("aria-haspopup"));
   }
 }
-customElements.get("mui-prompt-preview") || customElements.define("mui-prompt-preview", C);
+customElements.get("mui-prompt-preview") || customElements.define("mui-prompt-preview", S);

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

@@ -1,4 +1,4 @@
-class o extends HTMLElement {
+class s extends HTMLElement {
   static get observedAttributes() {
     return ["length", "weight", "direction"];
   }
@@ -12,8 +12,8 @@ class o extends HTMLElement {
     this.updateStyles();
   }
   syncContextAttributes() {
-    const t = !!this.closest("mui-card"), e = !!this.closest("mui-form-section");
-    this.toggleAttribute("in-card", t), this.toggleAttribute("in-form-section", e);
+    const t = !!this.closest("mui-card"), e = !!this.closest("mui-form-section"), i = !!this.closest("mui-dialog"), o = !!this.closest("mui-drawer");
+    this.toggleAttribute("in-card", t), this.toggleAttribute("in-form-section", e), this.toggleAttribute("in-dialog", i), this.toggleAttribute("in-drawer", o);
   }
   updateStyles() {
     const t = this.getAttribute("length") || "100%", e = this.getAttribute("weight") || "1px", i = (
@@ -24,7 +24,9 @@ class o extends HTMLElement {
         background: var(--border-color);
       }
       :host([in-card]),
-      :host([in-form-section]) {
+      :host([in-form-section]),
+      :host([in-dialog]),
+      :host([in-drawer]) {
         background: color-mix(in srgb, var(--border-color) 50%, transparent);
       }
       :host([direction="horizontal"]) {
@@ -40,4 +42,4 @@ class o extends HTMLElement {
     this.shadowRoot.innerHTML = `<style>${i}</style>`;
   }
 }
-customElements.get("mui-rule") || customElements.define("mui-rule", o);
+customElements.get("mui-rule") || customElements.define("mui-rule", s);