@muibook/components 19.5.1 → 20.0.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();
             if (p === "mui-button") {
-              m.setAttribute("variant", "tertiary"), o(m, n);
+              m.setAttribute("variant", "tertiary"), o(m, 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));
+              d instanceof HTMLElement && d.tagName.toLowerCase() === "mui-button" && (d.setAttribute("variant", "tertiary"), o(d, s));
             });
           });
         });
@@ -48,35 +48,35 @@ 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, 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;
+      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 || ""
       }));
-      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 || "",
+        items: n,
+        text: s || "",
         textBadge: (l == null ? void 0 : l.badge) || d,
         overflowed: b,
         thresholdChars: c
@@ -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 = () => {
@@ -183,17 +183,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 +204,7 @@ class S extends HTMLElement {
           text: e,
           textBadge: o,
           overflowed: r,
-          thresholdChars: n,
+          thresholdChars: s,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         },
         bubbles: !0,
@@ -286,9 +286,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 +434,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, 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;
     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(h, 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 +476,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 +495,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 +509,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,54 +539,54 @@ 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 w;
     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 = (() => {
-      if (!u || u.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), 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;
       try {
-        const g = new URL(u.url);
-        return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(g.pathname.toLowerCase());
+        const f = new URL(h.url);
+        return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(f.pathname.toLowerCase());
       } catch {
         return !1;
       }
-    })(), w = (() => {
-      if (!u || !y) return "";
+    })(), g = (() => {
+      if (!h || !y) 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(h.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 && !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 (a) {
-          const g = y;
-          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);
+          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);
         }
-        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", 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);
     }
   }
   syncPreviewEdgeShadows() {
@@ -609,9 +609,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,64 +636,64 @@ 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;
+    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 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 h = r || this.hasTruthyFlagAttribute("actions-fan"), b = this.hasAttribute("fan-open"), v = 100;
+    this.enforceActionVariants(), m.forEach((n, u) => {
+      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) {
+        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 (u === 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 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) {
+          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(${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)` }
           ],
           {
-            duration: h + 180,
-            delay: g,
+            duration: v + 180,
+            delay: w,
             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 = "";
+    }), c.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.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;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -701,9 +701,9 @@ class S extends HTMLElement {
           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-mid-source: ${h};
           --prompt-color-top-end-source: ${b};
-          --prompt-color-top-accent-source: ${h};
+          --prompt-color-top-accent-source: ${v};
           --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(
@@ -1421,10 +1421,10 @@ class S extends HTMLElement {
             <textarea
               rows="${o}"
               placeholder="${t}"
-              ${v ? `aria-label="${v.replace(/"/g, "&quot;")}"` : ""}
-              ${s ? `aria-labelledby="${s.replace(/"/g, "&quot;")}"` : ""}
+              ${n ? `aria-label="${n.replace(/"/g, "&quot;")}"` : ""}
+              ${u ? `aria-labelledby="${u.replace(/"/g, "&quot;")}"` : ""}
               ${y ? `aria-describedby="${y.replace(/"/g, "&quot;")}"` : ""}
-              ${w ? `aria-label="${w}"` : ""}
+              ${g ? `aria-label="${g}"` : ""}
               ${r ? "disabled" : ""}
             >${e}</textarea>
           </slot>
@@ -1456,9 +1456,9 @@ 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" ${w ? "" : "hidden"}>
           <mui-icon-attention slot="before"></mui-icon-attention>
-          <span class="error-text">${g}</span>
+          <span class="error-text">${f}</span>
         </mui-body>
      
       </div>
@@ -1470,7 +1470,7 @@ class S extends HTMLElement {
 
       <mui-dialog
         id="promptAutoPreviewDialog"
-        width="${n}"
+        width="${s}"
         content-padding="none"
       >
         <mui-heading id="promptAutoPreviewTitle" slot="title" size="5">Pasted Content</mui-heading>

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

@@ -15,8 +15,15 @@ class s extends HTMLElement {
     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);
   }
+  getRuleWeight() {
+    const t = this.getAttribute("weight") || "var(--stroke-size-100)";
+    return {
+      thin: "var(--stroke-size-100)",
+      thick: "var(--stroke-size-200)"
+    }[t] || t;
+  }
   updateStyles() {
-    const t = this.getAttribute("length") || "100%", e = this.getAttribute("weight") || "1px", i = (
+    const t = this.getAttribute("length") || "100%", e = this.getRuleWeight(), i = (
       /*css*/
       `
       :host {

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

@@ -108,25 +108,25 @@ class x extends HTMLElement {
           appearance: none;
         }
         select.size-x-small {
-          min-height: var(--action-icon-only-size-x-small);
+          min-height: var(--action-size-x-small);
           padding: var(--action-padding-x-small);
           font-size: var(--text-font-size-xs);
           line-height: var(--text-line-height-xs);
         }
         select.size-small {
-          min-height: var(--action-icon-only-size-small);
+          min-height: var(--action-size-small);
           padding: var(--action-padding-small);
           font-size: var(--text-font-size-s);
           line-height: var(--text-line-height-s);
         }
         select.size-medium {
-          min-height: 4.4rem;
+          min-height: var(--action-size-medium);
           padding: var(--space-200) var(--space-300);
           font-size: var(--text-font-size);
           line-height: var(--text-line-height);
         }
         select.size-large {
-          min-height: var(--action-icon-only-size-large);
+          min-height: var(--action-size-large);
           padding: var(--space-300) var(--space-400);
           font-size: var(--text-font-size-l);
           line-height: var(--text-line-height-l);

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

@@ -39,7 +39,7 @@ class i extends HTMLElement {
     return this.querySelector('[slot="accessory"]') !== null;
   }
   render() {
-    const a = this.variant === "action", t = this.getAttribute("col") || "1fr 1fr", r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
+    const a = this.variant === "action", t = this.getAttribute("col") || (a ? "minmax(0, 1fr) auto" : "1fr 1fr"), r = this.getAttribute("space") || "var(--space-500)", e = this.hasAccessorySlot(), s = (
       /*css*/
       `
       :host {
@@ -72,6 +72,14 @@ class i extends HTMLElement {
         text-align: left;
       }
 
+      .action::part(grid-template-columns) {
+        grid-template-columns: ${t};
+      }
+
+      .action::part(gap) {
+        gap: ${r};
+      }
+
       .action:focus {
         z-index: 1;
       }

package/dist/esm/components/mui-stack/hstack/index.js

@@ -1,10 +1,10 @@
 import { getPartMap as a } from "../../../utils/part-map/index.js";
-class h extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "aligny", "alignx", "padding", "height", "width", "viewport", "fill"];
+    return ["space", "aligny", "alignx", "padding", "height", "width", "viewport", "fill", "wrap"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.styles = /*css*/
+    super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.wrap = "nowrap", this.styles = /*css*/
     `
       :host {
         display: block;
@@ -20,6 +20,7 @@ class h extends HTMLElement {
         padding: var(--padding);
         align-items: var(--alignY);
         justify-content: var(--alignX);
+        flex-wrap: var(--wrap);
       }
       :host([height]) slot,
       :host([viewport]) slot,
@@ -46,6 +47,7 @@ class h extends HTMLElement {
           --padding: ${this.getAttribute("padding") || "var(--space-000)"};
           --alignY: ${this.getAttribute("aligny") || this.alignY};
           --alignX: ${this.getAttribute("alignx") || this.alignX};
+          --wrap: ${this.resolveWrap(this.getAttribute("wrap"))};
         ">
       </slot>
     `;
@@ -53,12 +55,15 @@ class h extends HTMLElement {
   attributeChangedCallback(t, i, s) {
     if (i === s || ((t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions(), !this.shadowRoot)) return;
     const e = this.shadowRoot.querySelector("slot");
-    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX));
+    e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "wrap" && e.style.setProperty("--wrap", this.resolveWrap(s)));
   }
   syncDimensions() {
     const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
     this.style.setProperty("--stack-height", t), this.style.setProperty("--stack-width", i);
   }
+  resolveWrap(t) {
+    return t === null || t === "" ? this.hasAttribute("wrap") ? "wrap" : this.wrap : t;
+  }
   waitForPartMap() {
     return new Promise((t) => {
       if (typeof a == "function") return t();
@@ -69,4 +74,4 @@ class h extends HTMLElement {
     });
   }
 }
-customElements.get("mui-h-stack") || customElements.define("mui-h-stack", h);
+customElements.get("mui-h-stack") || customElements.define("mui-h-stack", r);