@muibook/components 10.0.1 → 11.0.0

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

@@ -0,0 +1,1461 @@
+import "../mui-stack/hstack/index.js";
+import "../mui-stack/vstack/index.js";
+import "../mui-dialog/index.js";
+import "../mui-heading/index.js";
+import "../mui-code/index.js";
+import "../mui-media-player/index.js";
+import "../mui-button/index.js";
+import "../mui-body/index.js";
+import "../mui-link/index.js";
+import "../mui-spinner/index.js";
+import "../mui-icons/grid/index.js";
+import "../mui-icons/close/index.js";
+import "../mui-icons/toggle/index.js";
+import "../mui-icons/up-arrow/index.js";
+import "../mui-icons/stop/index.js";
+import "../mui-icons/attention/index.js";
+import "../mui-rule/index.js";
+import "../mui-prompt-toggle/index.js";
+class k extends HTMLElement {
+  constructor() {
+    super(), this.triggerEl = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null, this.previewResizeObserver = null, this.fanAnimations = /* @__PURE__ */ new Map(), this.pendingColorFade = !1, this.lastDebugPayload = '{"event":"idle"}', this.enforceActionVariants = () => {
+      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;
+        if (r.hasAttribute("icon-only")) {
+          r.style.marginRight = "var(--space-025)";
+          return;
+        }
+        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 u = c.tagName.toLowerCase();
+            if (u === "mui-button") {
+              c.setAttribute("variant", "tertiary"), o(c, a);
+              return;
+            }
+            u === "mui-dropdown" && c.querySelectorAll('[slot="action"]').forEach((h) => {
+              h instanceof HTMLElement && h.tagName.toLowerCase() === "mui-button" && (h.setAttribute("variant", "tertiary"), o(h, a));
+            });
+          });
+        });
+      });
+    }, this.onDefaultSubmitClick = (t) => {
+      t.preventDefault(), t.stopPropagation(), !this.hasAttribute("disabled") && this.submit("api");
+    }, 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;
+      (g || b) && e.preventDefault();
+      const v = r.map((d) => ({
+        kind: d.type.startsWith("image/") ? "image" : d.type.startsWith("video/") ? "video" : d.type.startsWith("audio/") ? "audio" : "file",
+        mimeType: d.type || "",
+        file: d,
+        fileName: d.name || "",
+        size: d.size || 0,
+        badge: d.type.startsWith("image/") ? "IMG" : d.type.startsWith("video/") ? "VIDEO" : d.type.startsWith("audio/") ? "MUSIC" : "FILE",
+        preview: d.name || "Pasted file",
+        value: d.name || ""
+      }));
+      b && i && (l != null && l.url ? v.unshift({
+        kind: l.kind === "image" ? "image" : "text",
+        mimeType: l.mimeType,
+        badge: l.badge,
+        preview: l.url,
+        value: l.url
+      }) : v.unshift({
+        kind: "text",
+        mimeType: "text/plain",
+        badge: this.detectBadge(i),
+        preview: i.slice(0, 260),
+        value: a
+      })), this.emitPromptItems({
+        source: "paste",
+        items: v,
+        text: a || "",
+        textBadge: (l == null ? void 0 : l.badge) || h,
+        overflowed: b,
+        thresholdChars: p
+      });
+    }, this.onInput = (t) => {
+      const e = t.target;
+      !e || e.tagName !== "TEXTAREA" || (this.syncTextareaHeight(e), this.hasAttribute("has-error") && !this.hasAttribute("persist-message") && this.clearError("input"), this.getAttribute("value") !== e.value && this.setAttribute("value", e.value), this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: e.value },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    }, this.onTextareaFocus = () => {
+      this.hasAttribute("persist-message") || this.clearError("focus");
+    }, this.onKeyDown = (t) => {
+      const e = t;
+      if (e.key === "Escape") {
+        this.hasAttribute("fan-open") && (this.removeAttribute("fan-open"), this.updateActionsLayout()), this.dispatchEvent(
+          new CustomEvent("escape", {
+            detail: { value: this.getValue() },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+        return;
+      }
+      this.getAttribute("enter-submit") !== "false" && (e.key !== "Enter" || e.shiftKey || e.isComposing || this.hasAttribute("disabled") || (e.preventDefault(), this.submit("keyboard")));
+    }, this.onPreviewScroll = () => {
+      this.syncPreviewEdgeShadows();
+    }, this.onPreviewSlotChange = () => {
+      this.syncPreviewVisibility(), this.syncPreviewEdgeShadows();
+    }, this.onPreviewOpen = (t) => {
+      const e = t, o = this.normalizePreviewDetail(e.detail || {});
+      this.openInternalPreviewDialog(o);
+    }, this.onContextToggleClick = (t) => {
+      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;
+      })) return;
+      if (e.find((i) => {
+        var s;
+        return i instanceof HTMLElement && ((s = i.hasAttribute) == null ? void 0 : s.call(i, "context-close"));
+      })) {
+        this.setContextMode("icon", "dismiss"), this.updateActionsLayout();
+        return;
+      }
+      e.find(
+        (i) => {
+          var s, l;
+          return i instanceof HTMLElement && (((s = i.hasAttribute) == null ? void 0 : s.call(i, "context-toggle")) || ((l = i.getAttribute) == null ? void 0 : l.call(i, "slot")) === "toggle");
+        }
+      ) && (this.setContextMode("chip", "click"), this.updateActionsLayout());
+    }, this.onContextChipDismiss = (t) => {
+      t.composedPath().find(
+        (r) => {
+          var a, i, s;
+          return r instanceof HTMLElement && (((a = r.hasAttribute) == null ? void 0 : a.call(r, "context-active")) || ((i = r.hasAttribute) == null ? void 0 : i.call(r, "context-chip")) || ((s = r.hasAttribute) == null ? void 0 : s.call(r, "context-spinner")));
+        }
+      ) && (this.setContextMode("icon", "dismiss"), this.updateActionsLayout());
+    }, this.toggleFanOpen = () => {
+      this.hasAttribute("actions-fan") && (this.toggleAttribute("fan-open"), this.updateActionsLayout());
+    }, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "placeholder",
+      "value",
+      "disabled",
+      "rows",
+      "enter-submit",
+      "actions-fan",
+      "fan-open",
+      "preview-overflow-to-preview",
+      "preview-scrollbar",
+      "preview-threshold-chars",
+      "preview-auto-clickable",
+      "preview-dialog-width",
+      "preview-dialog-title",
+      "context-mode",
+      "effects-off",
+      "color-layout",
+      "color-top-start",
+      "color-top-mid",
+      "color-top-end",
+      "color-top-accent",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "error-message",
+      "debug",
+      "loading",
+      "loading-label"
+    ];
+  }
+  syncLoadingState() {
+    if (!this.shadowRoot) return;
+    const t = this.hasAttribute("loading"), e = this.shadowRoot.querySelector(".prompt-loading-spinner"), o = this.shadowRoot.querySelector("#promptDefaultSubmitAction"), r = o == null ? void 0 : o.querySelector("mui-icon-toggle");
+    e && (e.toggleAttribute("hidden", !t), e.setAttribute("label", this.getAttribute("loading-label") || "Sending")), this.toggleAttribute("aria-busy", t), t ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy"), o && o.toggleAttribute("disabled", t), r && (r.toggleAttribute("toggle", t), r.setAttribute("aria-pressed", String(t)));
+  }
+  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 i = this.hasAttribute("debug");
+    o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)), a.textContent = this.lastDebugPayload);
+  }
+  emitPromptItems({
+    items: t,
+    text: e,
+    textBadge: o,
+    overflowed: r,
+    thresholdChars: a,
+    source: i
+  }) {
+    this.dispatchEvent(
+      new CustomEvent("prompt-paste", {
+        detail: {
+          source: i,
+          items: t,
+          text: e,
+          textBadge: o,
+          overflowed: r,
+          thresholdChars: a,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  normalizeContextMode(t) {
+    return t === "chip" ? "chip" : "icon";
+  }
+  setContextMode(t, e = "api") {
+    const o = this.normalizeContextMode(t);
+    this.getAttribute("context-mode") !== o && this.setAttribute("context-mode", o), this.syncContextModeUI(), this.dispatchEvent(
+      new CustomEvent("prompt-context-change", {
+        detail: { mode: o, source: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ), e === "dismiss" && this.dispatchEvent(
+      new CustomEvent("prompt-context-dismiss", {
+        detail: { mode: o },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  syncContextModeUI() {
+    if (!this.shadowRoot) return;
+    const t = this.normalizeContextMode(this.getAttribute("context-mode"));
+    Array.from(
+      this.shadowRoot.querySelectorAll(
+        'slot[name="actions"], slot[name="actions-right"], slot[name="actions-trigger"]'
+      )
+    ).flatMap((r) => r.assignedElements({ flatten: !0 })).forEach((r) => {
+      [r, ...Array.from(r.querySelectorAll("*"))].forEach((i) => {
+        const l = i.tagName.toLowerCase() === "mui-prompt-toggle", c = i.hasAttribute("context-toggle"), u = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
+        if (l) {
+          i.setAttribute("mode", t);
+          return;
+        }
+        if (c || u) {
+          i.hasAttribute("context-chip") && i.tagName.toLowerCase() === "mui-chip" && !i.hasAttribute("variant") && i.setAttribute("variant", "ghost");
+          const p = c ? t === "icon" : t === "chip";
+          i.toggleAttribute("hidden", !p), i.style.display = p ? "inline-flex" : "none";
+        }
+      });
+    });
+  }
+  connectedCallback() {
+    var e;
+    this.hasAttribute("context-mode") || this.setAttribute("context-mode", "icon"), 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)));
+  }
+  disconnectedCallback() {
+    this.unbindEvents();
+  }
+  attributeChangedCallback(t, e, o) {
+    if (!this.shadowRoot || e === o) return;
+    const r = this.shadowRoot.querySelector("textarea");
+    if (t === "value" && r) {
+      r.value = o ?? "", this.syncTextareaHeight(r);
+      return;
+    }
+    if (t === "context-mode") {
+      const a = this.normalizeContextMode(o);
+      if (o !== a) {
+        this.setAttribute("context-mode", a);
+        return;
+      }
+      this.syncContextModeUI(), this.updateActionsLayout();
+      return;
+    }
+    if (t === "disabled" && r) {
+      o === null || o === "false" ? r.removeAttribute("disabled") : r.setAttribute("disabled", "");
+      return;
+    }
+    if (t === "placeholder" && r) {
+      r.setAttribute("placeholder", o ?? "");
+      return;
+    }
+    if (t === "rows" && r) {
+      r.setAttribute("rows", o || "3"), this.syncTextareaHeight(r);
+      return;
+    }
+    if ((t === "aria-label" || t === "aria-labelledby" || t === "aria-describedby") && r) {
+      o === null ? r.removeAttribute(t) : r.setAttribute(t, o);
+      return;
+    }
+    if (t === "fan-open" || t === "actions-fan") {
+      this.updateActionsLayout();
+      return;
+    }
+    if (t === "debug") {
+      this.setDebugState("Idle: no submit yet.");
+      return;
+    }
+    if (t === "loading" || t === "loading-label") {
+      this.syncLoadingState();
+      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);
+  }
+  runColorFade() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".surface");
+    !t || typeof t.animate != "function" || t.animate(
+      [
+        { opacity: 0.82, filter: "saturate(0.92)" },
+        { opacity: 1, filter: "saturate(1)" }
+      ],
+      {
+        duration: 240,
+        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+        fill: "none"
+      }
+    );
+  }
+  getValue() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("textarea");
+    return (t == null ? void 0 : t.value) ?? this.getAttribute("value") ?? "";
+  }
+  get value() {
+    return this.getValue();
+  }
+  set value(t) {
+    var r;
+    const e = t == null ? "" : String(t);
+    if (this.getAttribute("value") !== e) {
+      this.setAttribute("value", e);
+      return;
+    }
+    const o = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea");
+    !o || o.value === e || (o.value = e, this.syncTextareaHeight(o));
+  }
+  submit(t = "api") {
+    if (this.hasAttribute("disabled") || this.hasAttribute("loading")) return !1;
+    const e = this.getValue(), o = t === "keyboard" ? "enter" : "api", r = {
+      event: "sent",
+      source: o,
+      prompt: e,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    return this.dispatchEvent(
+      new CustomEvent("before-submit", {
+        detail: { value: e, source: t },
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) ? (this.dispatchEvent(
+      new CustomEvent("submit", {
+        detail: { value: e, source: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.setDebugState(`Sent JSON (${o})`, r), !0) : (this.setDebugState(`Blocked JSON (${o})`, { ...r, event: "blocked" }), !1);
+  }
+  clear() {
+    this.value = "", this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: "" },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  get errorMessage() {
+    return this.getAttribute("error-message") || "";
+  }
+  set errorMessage(t) {
+    const e = t == null ? "" : String(t).trim();
+    if (!e) {
+      this.removeAttribute("error-message");
+      return;
+    }
+    this.setAttribute("error-message", e);
+  }
+  setError(t) {
+    this.errorMessage = t, this.errorMessage && this.dispatchEvent(
+      new CustomEvent("prompt-error-set", {
+        detail: { message: this.errorMessage },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  clearError(t = "api") {
+    const e = this.errorMessage;
+    this.removeAttribute("error-message"), this.removeAttribute("error-expanded"), e && this.dispatchEvent(
+      new CustomEvent("prompt-error-clear", {
+        detail: { source: t, message: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  syncErrorVisibility() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector(".error-region"), e = !!this.errorMessage.trim().length;
+    t == null || t.toggleAttribute("hidden", !e), this.toggleAttribute("has-error", e);
+  }
+  focus() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("textarea");
+    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;
+    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";
+  }
+  detectBadge(t) {
+    const e = t.trim();
+    if (!e) return "Insightful";
+    const o = this.detectMediaUrl(e);
+    if (o != null && o.badge) return o.badge;
+    if (e.startsWith("{") || e.startsWith("["))
+      try {
+        return JSON.parse(e), "JSON";
+      } catch {
+      }
+    return /(^|\n)\s*[@.#a-zA-Z0-9\-\s]+\{[\s\S]*:[\s\S]*\}/.test(e) ? "CSS" : /^\s{0,3}(#{1,6}|\* |- |\d+\. )/.test(e) ? "MD" : /\b(select|from|where|group by|order by|join)\b/i.test(e) ? "SQL" : /\b(const|let|function|=>|import|export|return)\b/.test(e) ? "JS" : "Insightful";
+  }
+  formatPreviewCode(t, e) {
+    const o = t.trim();
+    if (!o) return t;
+    if (e === "JSON")
+      try {
+        return JSON.stringify(JSON.parse(o), null, 2);
+      } catch {
+        return t;
+      }
+    return e === "CSS" ? o.replace(/\s+/g, " ").trim().replace(/\s*{\s*/g, ` {
+  `).replace(/;\s*/g, `;
+  `).replace(/\s*}\s*/g, `
+}
+`).replace(/\n\s*\n/g, `
+`).trim().replace(/\n {2}\n/g, `
+`).trim() : t;
+  }
+  detectMediaUrl(t) {
+    const e = t.trim();
+    if (!e) return null;
+    if (e.startsWith("blob:"))
+      return { url: e, kind: "video", badge: "VIDEO", mimeType: "video/*" };
+    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();
+      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"))
+        return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
+      if (s.endsWith("vimeo.com") || s.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"))
+        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/*" };
+      if (/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(i))
+        return { url: r, kind: "audio", badge: "MUSIC", mimeType: "audio/*" };
+    } catch {
+      return null;
+    }
+    return null;
+  }
+  bindEvents() {
+    if (!this.shadowRoot) return;
+    this.unbindEvents();
+    const t = this.shadowRoot.querySelector("textarea");
+    t == null || t.addEventListener("input", this.onInput), t == null || t.addEventListener("keydown", this.onKeyDown), t == null || t.addEventListener("paste", this.onPaste), t == null || t.addEventListener("focus", this.onTextareaFocus);
+    const e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'), 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();
+  }
+  unbindEvents() {
+    var o, r, a;
+    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;
+  }
+  bindPreviewOverflow() {
+    var t, e;
+    this.shadowRoot && (this.previewShellEl = this.shadowRoot.querySelector(".preview-shell"), this.previewRowEl = this.shadowRoot.querySelector(".preview-row"), this.previewSlotEl = this.shadowRoot.querySelector('slot[name="preview"]'), (t = this.previewRowEl) == null || t.addEventListener("scroll", this.onPreviewScroll, { passive: !0 }), (e = this.previewSlotEl) == null || e.addEventListener("slotchange", this.onPreviewSlotChange), typeof ResizeObserver < "u" && this.previewRowEl && (this.previewResizeObserver = new ResizeObserver(() => this.syncPreviewEdgeShadows()), this.previewResizeObserver.observe(this.previewRowEl)), this.syncPreviewVisibility(), this.syncPreviewEdgeShadows());
+  }
+  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);
+  }
+  syncPreviewInteractivity(t) {
+    var o;
+    if (this.getAttribute("preview-auto-clickable") === "false") return;
+    (t || ((o = this.previewSlotEl) == null ? void 0 : o.assignedElements({ flatten: !0 })) || []).forEach((r) => {
+      r.tagName.toLowerCase() === "mui-prompt-preview" && r.getAttribute("clickable") !== "false" && r.setAttribute("clickable", "");
+    });
+  }
+  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";
+    return {
+      id: String(t.id || ""),
+      value: e,
+      badge: r || (o ? "IMG" : this.detectBadge(e)),
+      label: a,
+      bgImage: o,
+      imageTint: i,
+      type: s
+    };
+  }
+  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 = (() => {
+      if (!m || m.kind !== "audio") return !1;
+      try {
+        const f = new URL(m.url);
+        return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(f.pathname.toLowerCase());
+      } catch {
+        return !1;
+      }
+    })(), n = (() => {
+      if (!m || !w) return "";
+      try {
+        const A = new URL(m.url).pathname.split("/").filter(Boolean).pop() || "", x = decodeURIComponent(A), E = x.replace(/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/i, "") || x || "Audio";
+        return E.charAt(0).toUpperCase() + E.slice(1);
+      } catch {
+        return "Audio";
+      }
+    })();
+    if (!(!v && !d && !g)) {
+      if (this.setAttribute("preview-dialog-value", u), this.setAttribute("preview-dialog-image", p), this.setAttribute("preview-dialog-type", h || (v ? "IMG" : "CODE")), o && (o.textContent = c), g ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
+        s && s.setAttribute("hidden", ""), a && (a.setAttribute("src", p), a.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
+      else if (g && m) {
+        if (s) {
+          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);
+        }
+        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", "")));
+      (y = e == null ? void 0 : e.open) == null || y.call(e);
+    }
+  }
+  syncPreviewEdgeShadows() {
+    if (!this.previewShellEl || !this.previewRowEl) return;
+    const t = Math.max(0, this.previewRowEl.scrollWidth - this.previewRowEl.clientWidth), e = t > 1, o = this.previewRowEl.scrollLeft <= 1, r = this.previewRowEl.scrollLeft >= t - 1;
+    this.previewShellEl.toggleAttribute("show-start", e && !o), this.previewShellEl.toggleAttribute("show-end", e && !r);
+  }
+  isContextOnlyAction(t) {
+    return t.tagName.toLowerCase() === "mui-prompt-toggle" || t.hasAttribute("context-toggle") ? !0 : !!t.querySelector("[context-toggle]");
+  }
+  bindActionTrigger() {
+    if (!this.shadowRoot || !this.hasAttribute("actions-fan")) return;
+    const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), o = this.shadowRoot.querySelector("#promptDefaultActionsTrigger");
+    if (!t) return;
+    this.triggerEl && (this.triggerEl.removeEventListener("click", this.toggleFanOpen), this.triggerEl = null);
+    const r = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
+      (c) => !c.hasAttribute("hidden")
+    ), a = t.assignedElements({ flatten: !0 }).filter(
+      (c) => !c.hasAttribute("hidden")
+    );
+    if (!(a.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;
+    l && (this.triggerEl = l, this.triggerEl.addEventListener("click", this.toggleFanOpen), this.syncTriggerIconState());
+  }
+  syncTriggerIconState() {
+    if (!this.triggerEl) return;
+    const t = this.triggerEl.querySelector("mui-icon-toggle");
+    if (!t) return;
+    const e = this.hasAttribute("fan-open");
+    t.toggleAttribute("toggle", e), t.setAttribute("aria-pressed", String(e));
+  }
+  setFanItemInert(t, e) {
+    if (!e) {
+      t.removeAttribute("inert"), t.removeAttribute("aria-hidden");
+      const o = t.getAttribute("data-fan-tabindex");
+      o !== null && (o === "__none__" ? t.removeAttribute("tabindex") : t.setAttribute("tabindex", o), t.removeAttribute("data-fan-tabindex"));
+      return;
+    }
+    t.hasAttribute("data-fan-tabindex") || t.setAttribute("data-fan-tabindex", t.getAttribute("tabindex") ?? "__none__"), t.setAttribute("tabindex", "-1"), t.setAttribute("inert", ""), t.setAttribute("aria-hidden", "true");
+  }
+  updateActionsLayout() {
+    if (!this.shadowRoot) return;
+    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(
+      (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]);
+    if (o) {
+      const n = !s || 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))";
+    if (r) {
+      const n = g && v && i.length > 0;
+      r.toggleAttribute("hidden", !n), r.style.display = n ? "inline-flex" : "none";
+    }
+    this.enforceActionVariants(), h.forEach((n, y) => {
+      n.style.transition = `transform ${d}ms ease, opacity ${d}ms ease`, n.style.zIndex = "";
+      const f = this.fanAnimations.get(n);
+      if (f && (f.cancel(), this.fanAnimations.delete(n)), !g) {
+        this.setFanItemInert(n, !1), n.style.transitionDelay = "", n.style.transform = "", n.style.opacity = "", n.style.pointerEvents = "", n.style.filter = "";
+        return;
+      }
+      if (y === 0) {
+        this.setFanItemInert(n, !1), n.style.transitionDelay = "", n.style.transform = "translateX(0)", n.style.opacity = "1", n.style.pointerEvents = "", n.style.filter = "";
+        return;
+      }
+      if (!v) {
+        this.setFanItemInert(n, !0), n.style.transitionDelay = "", n.style.transform = "translateX(0) scale(0.8)", n.style.opacity = "0", n.style.pointerEvents = "none", n.style.filter = "";
+        return;
+      }
+      const A = `calc(${w} * -${y})`, x = y * 50;
+      n.style.transition = `opacity ${Math.max(120, d - 40)}ms ease, transform ${d}ms cubic-bezier(0.22, 1, 0.36, 1)`, n.style.transitionDelay = `${x}ms`, n.style.transform = "translateX(0) scale(0.92)", n.style.opacity = "0", n.style.pointerEvents = "none", n.style.filter = "", this.setFanItemInert(n, !0), requestAnimationFrame(() => {
+        if (n.style.transform = `translateX(${A})`, n.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          n.style.pointerEvents = "", this.setFanItemInert(n, !1);
+          return;
+        }
+        const S = n.animate(
+          [
+            { transform: "translateX(0) scale(0.92)" },
+            { transform: `translateX(${A}) scale(1.03)`, offset: 0.68 },
+            { transform: `translateX(calc(${A} - var(--space-050))) scale(0.99)`, offset: 0.86 },
+            { transform: `translateX(${A}) scale(1)` }
+          ],
+          {
+            duration: d + 180,
+            delay: x,
+            easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+            fill: "forwards"
+          }
+        );
+        this.fanAnimations.set(n, S), S.finished.catch(() => {
+        }).finally(() => {
+          n.style.pointerEvents = "", this.setFanItemInert(n, !1);
+        });
+      });
+    }), b.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"), 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;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          --prompt-action-radius: var(--chip-radius-small, var(--radius-400));
+          --_prompt-color-top-start-source: ${h};
+          --_prompt-color-top-mid-source: ${m};
+          --_prompt-color-top-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-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%);
+          --_prompt-mid-tint: color-mix(in srgb, var(--_prompt-color-top-mid-source) 18%, transparent 82%);
+          --_prompt-end-tint: color-mix(in srgb, var(--_prompt-color-top-end-source) 20%, transparent 80%);
+          --_prompt-accent-tint: color-mix(
+            in srgb,
+            var(--_prompt-color-top-accent-source) 16%,
+            transparent 84%
+          );
+          --_prompt-layer-start-tint: ${p ? "var(--_prompt-end-tint)" : "var(--_prompt-start-tint)"};
+          --_prompt-layer-mid-tint: ${p ? "var(--_prompt-accent-tint)" : "var(--_prompt-mid-tint)"};
+          --_prompt-layer-end-tint: ${p ? "var(--_prompt-start-tint)" : "var(--_prompt-end-tint)"};
+          --_prompt-layer-accent-tint: ${p ? "var(--_prompt-mid-tint)" : "var(--_prompt-accent-tint)"};
+          --_prompt-spectrum-blend-mode-hover: normal;
+          --_prompt-spectrum-blend-mode-focus: normal;
+          --prompt-placeholder-color-hover-light: var(--grey-1200);
+          --prompt-placeholder-color-hover-dark: var(--white);
+          --prompt-placeholder-color-focus-light: var(--grey-1200);
+          --prompt-placeholder-color-focus-dark: var(--white);
+          --prompt-focus-border-color: var(--black-opacity-50);
+          --prompt-surface-filter: drop-shadow(
+            0 var(--stroke-size-100) 0 var(--black-opacity-5)
+          );
+          --prompt-focus-after-opacity: 0.28;
+          --prompt-focus-after-opacity-min: 0;
+          --prompt-focus-after-opacity-max: 0.28;
+          --prompt-focus-after-pulse-speed-global: calc(var(--speed-400) * 4);
+          --prompt-focus-after-pulse-speed-light: var(--prompt-focus-after-pulse-speed-global);
+          --prompt-focus-after-pulse-speed-dark: var(--prompt-focus-after-pulse-speed-global);
+          --prompt-focus-after-pulse-speed: var(--prompt-focus-after-pulse-speed-global);
+          --prompt-focus-surface-opacity: 0.35;
+          --prompt-mesh-scale-max-x: 1;
+          --prompt-mesh-scale-max-y: 1.09;
+          --prompt-mesh-scale-min-x: 0.98;
+          --prompt-mesh-scale-min-y: 1.04;
+          --prompt-mesh-overflow: calc((var(--prompt-mesh-scale-max-y) - 1) * 50%);
+          --prompt-mesh-blur-pad: var(--space-100);
+          --prompt-hover-border-pulse-start: color-mix(
+            in srgb,
+            var(--prompt-focus-border-color) 10%,
+            transparent 90%
+          );
+          --prompt-hover-border-pulse-end: color-mix(
+            in srgb,
+            var(--prompt-focus-border-color) 25%,
+            transparent 75%
+          );
+          --_prompt-border-hover-primary-soft: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 46%,
+            var(--form-default-border-color-hover) 54%
+          );
+          --_prompt-border-hover-primary-strong: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 70%,
+            var(--form-default-border-color-hover) 30%
+          );
+          --_prompt-border-hover-secondary-soft: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 46%,
+            var(--form-default-border-color-hover) 54%
+          );
+          --_prompt-border-hover-secondary-strong: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 70%,
+            var(--form-default-border-color-hover) 30%
+          );
+          overflow: visible;
+        }
+        .surface {
+          position: relative;
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--radius-300);
+          background: var(--surface-elevated-100);
+          padding: 0;
+          box-sizing: border-box;
+          overflow: visible;
+          isolation: isolate;
+          transition:
+            border-color var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1),
+            box-shadow var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1);
+          filter: var(--prompt-surface-filter);
+          box-shadow: none;
+        }
+        .surface::before {
+          content: "";
+          position: absolute;
+          inset: var(--stroke-size-200);
+          pointer-events: none;
+          border-radius: calc(var(--radius-300) - var(--stroke-size-200));
+          z-index: 1;
+          opacity: 1;
+          background: var(--surface-elevated-100);
+          transition: opacity var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1);
+        }
+        .surface::after {
+          content: "";
+          position: absolute;
+          inset: calc((var(--prompt-mesh-overflow) + var(--prompt-mesh-blur-pad)) * -1);
+          pointer-events: none;
+          border-radius: calc(var(--radius-300) + var(--prompt-mesh-overflow) + var(--prompt-mesh-blur-pad));
+          z-index: 0;
+          opacity: 0;
+          background:
+            radial-gradient(
+              90% 120% at 12% 16%,
+              var(--_prompt-layer-start-tint) 0%,
+              transparent 62%
+            ),
+            radial-gradient(
+              90% 120% at 72% 8%,
+              var(--_prompt-layer-mid-tint) 0%,
+              transparent 60%
+            ),
+            radial-gradient(
+              80% 120% at 86% 72%,
+              var(--_prompt-layer-end-tint) 0%,
+              transparent 58%
+            ),
+            radial-gradient(
+              110% 120% at 34% 88%,
+              var(--_prompt-layer-accent-tint) 0%,
+              transparent 64%
+            );
+          mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
+          filter: blur(var(--space-050));
+          transform: translate3d(0, 0, 0) scaleX(0.94) scaleY(1.01);
+          transform-origin: center;
+          will-change: transform, opacity, filter;
+          transition: opacity var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1), filter var(--speed-200) ease;
+        }
+        .surface:hover {
+          overflow: hidden;
+          background: var(--surface-elevated-100);
+          animation: promptBorderHoverPulse var(--prompt-hover-border-pulse-speed, var(--speed-500)) ease-in-out infinite;
+        }
+        :host(:has(.actions-slot:hover)) .surface,
+        :host(:has(.actions-slot:focus-within)) .surface {
+          overflow: visible;
+        }
+        .surface:hover::before {
+          opacity: 1;
+          background:
+            radial-gradient(
+              90% 120% at 12% 16%,
+              var(--_prompt-layer-start-tint) 0%,
+              transparent 62%
+            ),
+            radial-gradient(
+              90% 120% at 72% 8%,
+              var(--_prompt-layer-mid-tint) 0%,
+              transparent 60%
+            ),
+            radial-gradient(
+              80% 120% at 86% 72%,
+              var(--_prompt-layer-end-tint) 0%,
+              transparent 58%
+            ),
+            radial-gradient(
+              110% 120% at 34% 88%,
+              var(--_prompt-layer-accent-tint) 0%,
+              transparent 64%
+            ),
+            var(--surface-elevated-100);
+          mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
+          filter: none;
+          animation:
+            promptMeshHoverPulse var(--prompt-hover-sweep-speed, var(--speed-500)) ease-in-out infinite alternate,
+            promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
+        }
+        .surface:hover::after {
+          opacity: 0;
+          animation: none;
+        }
+        .surface:focus-within {
+          overflow: visible;
+          border-color: var(--prompt-focus-border-color);
+          background: var(--surface-elevated-100);
+          animation: none;
+        }
+        .surface:focus-within::after {
+          z-index: 1;
+          opacity: 0;
+          mix-blend-mode: normal;
+          filter: blur(var(--space-200));
+          animation: promptMeshPulseFocusSoft var(--prompt-focus-after-pulse-speed) ease-in-out infinite;
+        }
+        .surface:focus-within::before {
+          z-index: 2;
+          inset: 0;
+          border-radius: var(--radius-300);
+          opacity: var(--prompt-focus-surface-opacity);
+          background:
+            radial-gradient(
+              90% 120% at 12% 16%,
+              var(--_prompt-layer-start-tint) 0%,
+              transparent 62%
+            ),
+            radial-gradient(
+              90% 120% at 72% 8%,
+              var(--_prompt-layer-mid-tint) 0%,
+              transparent 60%
+            ),
+            radial-gradient(
+              80% 120% at 86% 72%,
+              var(--_prompt-layer-end-tint) 0%,
+              transparent 58%
+            ),
+            radial-gradient(
+              110% 120% at 34% 88%,
+              var(--_prompt-layer-accent-tint) 0%,
+              transparent 64%
+            ),
+            var(--prompt-focus-surface-background, var(--surface-elevated-100));
+          mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
+          animation: none;
+        }
+        :host([effects-off]) .surface::before {
+          inset: 0;
+          border-radius: var(--radius-300);
+          background: var(--surface-elevated-100);
+          mix-blend-mode: normal;
+          opacity: 1;
+          filter: none;
+          animation: none;
+        }
+        :host([effects-off]) .surface::after {
+          display: none;
+        }
+        :host([effects-off]) .surface:hover {
+          box-shadow: none;
+          border-color: var(--form-default-border-color-hover);
+        }
+        :host([effects-off]) .surface:focus-within {
+          background: var(--surface-elevated-100);
+        }
+        @keyframes promptMeshFloat {
+          0% {
+            transform: translate3d(0, 0, 0) scaleX(var(--prompt-mesh-scale-max-x)) scaleY(var(--prompt-mesh-scale-max-y));
+          }
+          100% {
+            transform: translate3d(0, 0, 0) scaleX(var(--prompt-mesh-scale-min-x)) scaleY(var(--prompt-mesh-scale-min-y));
+          }
+        }
+        @keyframes promptBorderHoverPulse {
+          0%,
+          100% {
+            border-color: var(--prompt-hover-border-pulse-start);
+          }
+          50% {
+            border-color: var(--prompt-hover-border-pulse-end);
+          }
+        }
+        @keyframes promptMeshPulse {
+          0%,
+          100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0;
+          }
+        }
+        @keyframes promptMeshPulseStrong {
+          0%,
+          100% {
+            opacity: 0.18;
+          }
+          50% {
+            opacity: 0.34;
+          }
+        }
+        @keyframes promptMeshPulseFocusSoft {
+          0%,
+          100% {
+            opacity: var(--prompt-focus-after-opacity-min);
+          }
+          50% {
+            opacity: var(--prompt-focus-after-opacity-max);
+          }
+        }
+        @keyframes promptMeshHoverPulse {
+          0% {
+            transform: translate3d(0, 0, 0) scale(1.02);
+          }
+          100% {
+            transform: translate3d(0, 0, 0) scale(1.04);
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .surface,
+          .surface::before,
+          .surface::after {
+            transition: none;
+            animation: none !important;
+          }
+          .surface:focus-within {
+            animation: none !important;
+          }
+        }
+        .input-wrap {
+          position: relative;
+          z-index: 2;
+          width: 100%;
+          padding-bottom: 5rem;
+          box-sizing: border-box;
+          overflow: visible;
+        }
+        :host([has-error]) .input-wrap {
+          padding-bottom: calc(5rem + var(--space-500));
+        }
+        .preview-shell {
+          position: relative;
+          width: 100%;
+          z-index: 2;
+          box-sizing: border-box;
+          margin-inline: 0;
+          padding-top: var(--space-300);
+        }
+        .preview-shell[hidden] {
+          display: none;
+        }
+        .preview-shell::before,
+        .preview-shell::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0px;
+          width: calc(var(--space-300) + var(--space-100));
+          pointer-events: none;
+          opacity: 0;
+          transition: opacity var(--speed-200) ease, filter var(--speed-200) ease;
+          z-index: 2;
+          filter: blur(var(--space-050));
+        }
+        .preview-shell::before {
+          left: 0;
+          background: linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--black-opacity-30) 90%, transparent 10%) 0%,
+            color-mix(in srgb, var(--black-opacity-20) 70%, transparent 30%) 35%,
+            transparent 100%
+          );
+        }
+        .preview-shell::after {
+          right: 0;
+          background: linear-gradient(
+            270deg,
+            color-mix(in srgb, var(--black-opacity-30) 90%, transparent 10%) 0%,
+            color-mix(in srgb, var(--black-opacity-20) 70%, transparent 30%) 35%,
+            transparent 100%
+          );
+        }
+        .preview-shell[show-start]::before {
+          opacity: 0.45;
+        }
+        .preview-shell[show-end]::after {
+          opacity: 0.45;
+        }
+        .preview-row {
+          display: block;
+          width: 100%;
+          max-width: 100%;
+          box-sizing: border-box;
+          overflow-x: auto;
+          overflow-y: hidden;
+          padding-inline: calc(var(--space-300) + var(--stroke-size-100));
+          padding-top:  var(--stroke-size-200);
+          padding-bottom:  var(--stroke-size-200);
+          scrollbar-width: thin;
+          scrollbar-color: color-mix(in srgb, var(--text-color-optional) 65%, transparent) transparent;
+        }
+        .preview-row::-webkit-scrollbar {
+          height: var(--space-100);
+        }
+        .preview-row::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .preview-row::-webkit-scrollbar-thumb {
+          background: color-mix(in srgb, var(--text-color-optional) 65%, transparent);
+          border-radius: var(--radius-300);
+          border: var(--stroke-size-100) solid transparent;
+          background-clip: padding-box;
+        }
+        .preview-row::-webkit-scrollbar-thumb:hover {
+          background: color-mix(in srgb, var(--text-color-optional) 85%, transparent);
+          background-clip: padding-box;
+        }
+        :host([preview-scrollbar="hidden"]) .preview-row {
+          scrollbar-width: none;
+        }
+        :host([preview-scrollbar="hidden"]) .preview-row::-webkit-scrollbar {
+          display: none;
+        }
+        .preview-row::part(display) {
+          display: flex;
+        }
+        .preview-row::part(flex-wrap) {
+          flex-wrap: nowrap;
+        }
+        .preview-row::part(gap) {
+          gap: var(--space-100);
+        }
+        .preview-end-spacer {
+          flex: 0 0 calc(var(--space-300) - var(--space-100) + var(--stroke-size-100));
+          width: calc(var(--space-300) - var(--space-100) + var(--stroke-size-100));
+          min-width: calc(var(--space-300) - var(--space-100) + var(--stroke-size-100));
+          pointer-events: none;
+        }
+        ::slotted([slot="preview"]) {
+          display: block;
+          flex: 0 0 auto;
+        }
+        textarea {
+          width: 100%;
+          border: none;
+          outline: none;
+          background: transparent;
+          color: var(--text-color);
+          font: inherit;
+          padding-block-start: calc(var(--space-300) + var(--space-050));
+          padding-inline: calc(var(--space-300) + var(--space-100));
+          padding-block-end: var(--space-000);
+          line-height: var(--text-line-height-medium);
+          resize: none;
+          height: calc(3 * 1.55em);
+          min-height: calc(3 * 1.55em);
+          box-sizing: border-box;
+        }
+        textarea::placeholder {
+          color: var(--prompt-placeholder-color, var(--form-default-placeholder-color, var(--text-color-optional)));
+          opacity: 1;
+          transition: color var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1);
+        }
+        .surface:hover textarea::placeholder {
+          color: var(
+            --prompt-placeholder-color-hover,
+            var(--prompt-placeholder-color-hover-light)
+          );
+        }
+        :host-context([data-theme="dark"]) .surface:hover textarea::placeholder,
+        :host-context([theme="dark"]) .surface:hover textarea::placeholder,
+        :host-context(.theme-dark) .surface:hover textarea::placeholder {
+          color: var(
+            --prompt-placeholder-color-hover,
+            var(--prompt-placeholder-color-hover-dark)
+          );
+        }
+        :host-context([data-theme="dark"]),
+        :host-context([theme="dark"]),
+        :host-context(.theme-dark) {
+          --prompt-focus-surface-opacity: 0.35;
+          --_prompt-accent-secondary: var(
+            --prompt-accent-secondary,
+            color-mix(in srgb, var(--_prompt-accent-primary) 64%, var(--grey-1200) 36%)
+          );
+          --_prompt-accent-mid: color-mix(
+            in srgb,
+            var(--_prompt-accent-primary) 56%,
+            var(--_prompt-accent-secondary) 44%
+          );
+          --_prompt-start-tint: color-mix(in srgb, var(--_prompt-color-top-start-source) 22%, transparent 78%);
+          --_prompt-mid-tint: color-mix(in srgb, var(--_prompt-color-top-mid-source) 18%, transparent 82%);
+          --_prompt-end-tint: color-mix(in srgb, var(--_prompt-color-top-end-source) 20%, transparent 80%);
+          --_prompt-accent-tint: color-mix(
+            in srgb,
+            var(--_prompt-color-top-accent-source) 16%,
+            transparent 84%
+          );
+          --_prompt-border-hover-primary-soft: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 56%,
+            var(--form-default-border-color-hover) 44%
+          );
+          --_prompt-border-hover-primary-strong: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-primary, var(--_prompt-accent-primary)) 78%,
+            var(--form-default-border-color-hover) 22%
+          );
+          --_prompt-border-hover-secondary-soft: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 56%,
+            var(--form-default-border-color-hover) 44%
+          );
+          --_prompt-border-hover-secondary-strong: color-mix(
+            in srgb,
+            var(--prompt-border-color-hover-secondary, var(--_prompt-accent-secondary)) 78%,
+            var(--form-default-border-color-hover) 22%
+          );
+          --prompt-hover-border-pulse-start: color-mix(
+            in srgb,
+            var(--prompt-focus-border-color) 10%,
+            transparent 90%
+          );
+          --prompt-hover-border-pulse-end: color-mix(
+            in srgb,
+            var(--prompt-focus-border-color) 25%,
+            transparent 75%
+          );
+          --prompt-focus-border-color: var(--white-opacity-50);
+          --prompt-surface-filter: drop-shadow(
+            0 var(--stroke-size-100) 0 var(--black-opacity-10)
+          );
+          --prompt-focus-after-opacity: 0.3;
+          --prompt-focus-after-opacity-min: 0;
+          --prompt-focus-after-opacity-max: 0.3;
+          --_prompt-spectrum-blend-mode-hover: soft-light;
+          --_prompt-spectrum-blend-mode-focus: normal;
+        }
+        :host-context([data-theme="light"]),
+        :host-context([theme="light"]),
+        :host-context(.theme-light) {
+          --prompt-focus-after-pulse-speed: var(--prompt-focus-after-pulse-speed-light);
+        }
+        :host-context([data-theme="dark"]),
+        :host-context([theme="dark"]),
+        :host-context(.theme-dark) {
+          --prompt-focus-after-pulse-speed: var(--prompt-focus-after-pulse-speed-dark);
+        }
+        .surface:focus-within textarea::placeholder {
+          color: var(
+            --prompt-placeholder-color-focus,
+            var(--prompt-placeholder-color-focus-light)
+          );
+        }
+        :host-context([data-theme="dark"]) .surface:focus-within textarea::placeholder,
+        :host-context([theme="dark"]) .surface:focus-within textarea::placeholder,
+        :host-context(.theme-dark) .surface:focus-within textarea::placeholder {
+          color: var(
+            --prompt-placeholder-color-focus,
+            var(--prompt-placeholder-color-focus-dark)
+          );
+        }
+        textarea:disabled {
+          cursor: not-allowed;
+        }
+        .actions-slot {
+          position: absolute;
+          z-index: 2;
+          bottom: var(--space-300);
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-100);
+          pointer-events: none;
+          overflow: visible;
+        }
+        .actions-slot > * {
+          pointer-events: auto;
+        }
+        .actions-slot-left {
+          left: var(--space-300);
+          gap: 0;
+        }
+        .actions-slot-right {
+          right: var(--space-300);
+        }
+        .prompt-loading-spinner[hidden] {
+          display: none !important;
+        }
+        .prompt-loading-spinner {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: none;
+          margin-inline-end: var(--space-100);
+        }
+        .actions-separator {
+          margin-inline: var(--space-200);
+          pointer-events: none;
+        }
+        .actions-separator[hidden] {
+          display: none !important;
+        }
+        .actions-slot mui-button {
+          --action-radius-x-small: var(--prompt-action-radius);
+          --action-radius-small: var(--prompt-action-radius);
+          --action-radius-medium: var(--prompt-action-radius);
+          --action-radius-large: var(--prompt-action-radius);
+        }
+        slot[name="actions-trigger"]::slotted(mui-button),
+        slot[name="actions"]::slotted(mui-button),
+        slot[name="actions-right"]::slotted(mui-button) {
+          --action-radius-x-small: var(--prompt-action-radius);
+          --action-radius-small: var(--prompt-action-radius);
+          --action-radius-medium: var(--prompt-action-radius);
+          --action-radius-large: var(--prompt-action-radius);
+        }
+        slot[name="actions-trigger"]::slotted(mui-dropdown),
+        slot[name="actions"]::slotted(mui-dropdown),
+        slot[name="actions-right"]::slotted(mui-dropdown) {
+          --action-radius-x-small: var(--prompt-action-radius);
+          --action-radius-small: var(--prompt-action-radius);
+          --action-radius-medium: var(--prompt-action-radius);
+          --action-radius-large: var(--prompt-action-radius);
+          position: relative;
+          z-index: 4;
+        }
+        slot[name="actions-trigger"]::slotted(mui-h-stack),
+        slot[name="actions"]::slotted(mui-h-stack),
+        slot[name="actions-right"]::slotted(mui-h-stack) {
+          --action-radius-x-small: var(--prompt-action-radius);
+          --action-radius-small: var(--prompt-action-radius);
+          --action-radius-medium: var(--prompt-action-radius);
+          --action-radius-large: var(--prompt-action-radius);
+        }
+        slot[name="actions-trigger"]::slotted(mui-prompt-toggle),
+        slot[name="actions"]::slotted(mui-prompt-toggle),
+        slot[name="actions-right"]::slotted(mui-prompt-toggle) {
+          --action-radius-x-small: var(--prompt-action-radius);
+          --action-radius-small: var(--prompt-action-radius);
+          --action-radius-medium: var(--prompt-action-radius);
+          --action-radius-large: var(--prompt-action-radius);
+        }
+        slot[name="actions-trigger"],
+        slot[name="actions"],
+        slot[name="actions-right"] {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-025);
+        }
+        slot[name="actions-trigger"] {
+          flex: 0 0 auto;
+        }
+        ::slotted([slot="actions"]:not([hidden])),
+        ::slotted([slot="actions-trigger"]:not([hidden])),
+        ::slotted([slot="actions-right"]:not([hidden])) {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-100);
+          pointer-events: auto;
+        }
+        .auto-preview-image {
+          display: block;
+          width: 100%;
+          height: auto;
+          border-radius: var(--radius-100);
+        }
+        .auto-preview-media-url {
+          display: inline-flex;
+          width: 100%;
+          box-sizing: border-box;
+          padding: var(--space-300);
+          background: var(--surface-elevated-200);
+        }
+        .auto-preview-media-url::part(width) {
+          width: 100%;
+        }
+        .auto-preview-media-url::part(display) {
+          display: block;
+        }
+        .auto-preview-media-url::part(white-space) {
+          white-space: nowrap;
+        }
+        .auto-preview-media-url::part(overflow) {
+          overflow: hidden;
+        }
+        .auto-preview-media-url::part(text-overflow) {
+          text-overflow: ellipsis;
+        }
+        #promptAutoPreviewCode[hidden],
+        #promptAutoPreviewImage[hidden],
+        #promptAutoPreviewMediaUrl[hidden],
+        #promptAutoPreviewMedia[hidden] {
+          display: none !important;
+        }
+        .error-region {
+          position: absolute;
+          left: calc(var(--space-300) + var(--space-100));
+          right: calc(var(--space-300) + var(--space-100));
+          bottom: calc(var(--space-300) + var(--action-icon-only-size-small) + var(--space-100));
+          display: grid;
+          gap: var(--space-100);
+          z-index: 3;
+          pointer-events: auto;
+        }
+        .error-default[hidden] {
+          display: none !important;
+        }
+        .error-default {
+          display: grid;
+          grid-template-columns: 1fr;
+          gap: var(--space-100);
+          align-items: start;
+          min-width: 0;
+          margin-left: var(--space-050);
+        }
+        .error-default mui-body {
+          min-width: 0;
+          max-width: 100%;
+        }
+        .error-default mui-body::part(width) {
+          width: 100%;
+          min-width: 0;
+          max-width: 100%;
+        }
+        .error-text {
+          display: block;
+          min-width: 0;
+          max-width: 100%;
+          white-space: normal;
+          overflow-wrap: anywhere;
+          word-break: break-word;
+        }
+        .debug-region[hidden] {
+          display: none !important;
+        }
+        .debug-region {
+          margin-top: var(--space-400);
+          padding-left: var(--space-100);
+        }
+      </style>
+
+        <div class="surface">
+        <div class="input-wrap">
+          <div class="preview-shell" part="preview-shell">
+            <mui-h-stack class="preview-row" part="preview-row" aligny="stretch" alignx="start" space="var(--space-100)">
+              <slot name="preview"></slot>
+              <span class="preview-end-spacer" aria-hidden="true"></span>
+            </mui-h-stack>
+          </div>
+          <slot name="input">
+            <textarea
+              rows="${o}"
+              placeholder="${t}"
+              ${v ? `aria-label="${v.replace(/"/g, "&quot;")}"` : ""}
+              ${d ? `aria-labelledby="${d.replace(/"/g, "&quot;")}"` : ""}
+              ${w ? `aria-describedby="${w.replace(/"/g, "&quot;")}"` : ""}
+              ${n ? `aria-label="${n}"` : ""}
+              ${r ? "disabled" : ""}
+            >${e}</textarea>
+          </slot>
+        </div>
+        <div class="actions-slot actions-slot-left">
+          <slot name="actions-trigger">
+            <mui-button id="promptDefaultActionsTrigger" variant="tertiary" fan-trigger icon-only size="small" aria-label="More actions">
+              <mui-icon-toggle rotate size="small">
+                <mui-icon-grid slot="start" size="small"></mui-icon-grid>
+                <mui-icon-close slot="end" size="small"></mui-icon-close>
+              </mui-icon-toggle>
+            </mui-button>
+          </slot>
+          <mui-rule class="actions-separator" direction="vertical" length="var(--space-400)" weight="var(--stroke-size-100)" aria-hidden="true"></mui-rule>
+          <slot name="actions"></slot>
+        </div>
+      <div class="actions-slot actions-slot-right">
+          <mui-spinner
+            class="prompt-loading-spinner"
+            size="small"
+            label="${(this.getAttribute("loading-label") || "Sending").replace(/"/g, "&quot;")}"
+            ${this.hasAttribute("loading") ? "" : "hidden"}
+          ></mui-spinner>
+          <slot name="actions-right">
+            <mui-button id="promptDefaultSubmitAction" variant="tertiary" size="small" icon-only aria-label="Submit prompt">
+              <mui-icon-toggle rotate size="small" style="--icon-toggle-size: 2.1rem;">
+                <mui-icon-up-arrow slot="start" size="small" class="mui-icon"></mui-icon-up-arrow>
+                <mui-icon-stop slot="end" size="small" class="mui-icon"></mui-icon-stop>
+              </mui-icon-toggle>
+            </mui-button>
+          </slot>
+        </div>
+        <div class="error-region" hidden>
+   
+        <mui-body size="x-small" variant="error" class="error-default" ${y ? "" : "hidden"}>
+          <mui-icon-attention slot="before"></mui-icon-attention>
+          <span class="error-text">${f}</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-v-stack>
+
+      <mui-dialog
+        id="promptAutoPreviewDialog"
+        width="${a}"
+        content-padding="none"
+      >
+        <mui-heading id="promptAutoPreviewTitle" slot="title" size="5">Pasted Content</mui-heading>
+        <mui-code id="promptAutoPreviewCode" size="x-small" wrap hidden></mui-code>
+        <img id="promptAutoPreviewImage" class="auto-preview-image" alt="Pasted preview" hidden />
+        <mui-link id="promptAutoPreviewMediaUrl" class="auto-preview-media-url" size="x-small" variant="tertiary" weight="regular" hidden></mui-link>
+        <mui-media-player id="promptAutoPreviewMedia" hidden></mui-media-player>
+      </mui-dialog>
+    `, this.setDebugState("Idle: no submit yet.");
+  }
+}
+customElements.get("mui-prompt") || customElements.define("mui-prompt", k);