@muibook/components 14.0.1 → 14.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/mui-prompt/index.js +125 -137
- package/dist/esm/css/mui-brand.css +1 -1
- package/dist/esm/custom-elements.json +2082 -2082
- package/package.json +1 -1
|
@@ -20,8 +20,8 @@ class k extends HTMLElement {
|
|
|
20
20
|
constructor() {
|
|
21
21
|
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 = () => {
|
|
22
22
|
if (!this.shadowRoot) return;
|
|
23
|
-
const e = Array.from(this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-trigger"], slot[name="actions-right"]')), o = (r,
|
|
24
|
-
if (!
|
|
23
|
+
const e = Array.from(this.shadowRoot.querySelectorAll('slot[name="actions"], slot[name="actions-trigger"], slot[name="actions-right"]')), o = (r, s) => {
|
|
24
|
+
if (!s || r.tagName.toLowerCase() !== "mui-button") return;
|
|
25
25
|
if (r.hasAttribute("icon-only")) {
|
|
26
26
|
r.style.marginRight = "var(--space-025)";
|
|
27
27
|
return;
|
|
@@ -29,16 +29,16 @@ class k extends HTMLElement {
|
|
|
29
29
|
r.style.marginRight === "var(--space-025)" && (r.style.marginRight = "");
|
|
30
30
|
};
|
|
31
31
|
e.forEach((r) => {
|
|
32
|
-
const
|
|
33
|
-
r.assignedElements({ flatten: !0 }).forEach((
|
|
34
|
-
[
|
|
35
|
-
const
|
|
36
|
-
if (
|
|
37
|
-
c.setAttribute("variant", "tertiary"), o(c,
|
|
32
|
+
const s = r.name === "actions";
|
|
33
|
+
r.assignedElements({ flatten: !0 }).forEach((a) => {
|
|
34
|
+
[a, ...Array.from(a.querySelectorAll("*"))].forEach((c) => {
|
|
35
|
+
const h = c.tagName.toLowerCase();
|
|
36
|
+
if (h === "mui-button") {
|
|
37
|
+
c.setAttribute("variant", "tertiary"), o(c, s);
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
h === "mui-dropdown" && c.querySelectorAll('[slot="action"]').forEach((u) => {
|
|
41
|
+
u instanceof HTMLElement && u.tagName.toLowerCase() === "mui-button" && (u.setAttribute("variant", "tertiary"), o(u, s));
|
|
42
42
|
});
|
|
43
43
|
});
|
|
44
44
|
});
|
|
@@ -48,20 +48,20 @@ class k extends HTMLElement {
|
|
|
48
48
|
}, this.onPaste = (t) => {
|
|
49
49
|
const e = t, o = e.clipboardData;
|
|
50
50
|
if (!o) return;
|
|
51
|
-
const r = Array.from(o.files || []),
|
|
52
|
-
if (!
|
|
53
|
-
(
|
|
54
|
-
const v = r.map((
|
|
55
|
-
kind:
|
|
56
|
-
mimeType:
|
|
57
|
-
file:
|
|
58
|
-
fileName:
|
|
59
|
-
size:
|
|
60
|
-
badge:
|
|
61
|
-
preview:
|
|
62
|
-
value:
|
|
51
|
+
const r = Array.from(o.files || []), s = o.getData("text/plain") || "", i = s.trim(), a = i.length > 0, l = a ? this.detectMediaUrl(i) : null, c = this.getAttribute("preview-overflow-to-preview") !== "false", h = this.getAttribute("preview-threshold-chars"), p = Number.isFinite(Number.parseInt(h || "", 10)) ? Math.max(1, Number.parseInt(h || "", 10)) : 220, u = a ? this.detectBadge(i) : "", m = u !== "" && u !== "Insightful", g = c && a && (!!(l != null && l.url) || i.length >= p || m), b = r.length > 0;
|
|
52
|
+
if (!b && !a) return;
|
|
53
|
+
(b || g) && e.preventDefault();
|
|
54
|
+
const v = r.map((d) => ({
|
|
55
|
+
kind: d.type.startsWith("image/") ? "image" : d.type.startsWith("video/") ? "video" : d.type.startsWith("audio/") ? "audio" : "file",
|
|
56
|
+
mimeType: d.type || "",
|
|
57
|
+
file: d,
|
|
58
|
+
fileName: d.name || "",
|
|
59
|
+
size: d.size || 0,
|
|
60
|
+
badge: d.type.startsWith("image/") ? "IMG" : d.type.startsWith("video/") ? "VIDEO" : d.type.startsWith("audio/") ? "MUSIC" : "FILE",
|
|
61
|
+
preview: d.name || "Pasted file",
|
|
62
|
+
value: d.name || ""
|
|
63
63
|
}));
|
|
64
|
-
|
|
64
|
+
g && i && (l != null && l.url ? v.unshift({
|
|
65
65
|
kind: l.kind === "image" ? "image" : "text",
|
|
66
66
|
mimeType: l.mimeType,
|
|
67
67
|
badge: l.badge,
|
|
@@ -72,13 +72,13 @@ class k extends HTMLElement {
|
|
|
72
72
|
mimeType: "text/plain",
|
|
73
73
|
badge: this.detectBadge(i),
|
|
74
74
|
preview: i.slice(0, 260),
|
|
75
|
-
value:
|
|
75
|
+
value: s
|
|
76
76
|
})), this.emitPromptItems({
|
|
77
77
|
source: "paste",
|
|
78
78
|
items: v,
|
|
79
|
-
text:
|
|
80
|
-
textBadge: (l == null ? void 0 : l.badge) ||
|
|
81
|
-
overflowed:
|
|
79
|
+
text: s || "",
|
|
80
|
+
textBadge: (l == null ? void 0 : l.badge) || u,
|
|
81
|
+
overflowed: g,
|
|
82
82
|
thresholdChars: p
|
|
83
83
|
});
|
|
84
84
|
}, this.onInput = (t) => {
|
|
@@ -116,27 +116,27 @@ class k extends HTMLElement {
|
|
|
116
116
|
const e = t.composedPath();
|
|
117
117
|
if (e.some((i) => {
|
|
118
118
|
if (!(i instanceof HTMLElement)) return !1;
|
|
119
|
-
const
|
|
120
|
-
return
|
|
119
|
+
const a = i.tagName.toLowerCase();
|
|
120
|
+
return a === "textarea" || a === "input" || i.isContentEditable;
|
|
121
121
|
})) return;
|
|
122
122
|
if (e.find((i) => {
|
|
123
|
-
var
|
|
124
|
-
return i instanceof HTMLElement && ((
|
|
123
|
+
var a;
|
|
124
|
+
return i instanceof HTMLElement && ((a = i.hasAttribute) == null ? void 0 : a.call(i, "context-close"));
|
|
125
125
|
})) {
|
|
126
126
|
this.setContextMode("icon", "dismiss"), this.updateActionsLayout();
|
|
127
127
|
return;
|
|
128
128
|
}
|
|
129
129
|
e.find(
|
|
130
130
|
(i) => {
|
|
131
|
-
var
|
|
132
|
-
return i instanceof HTMLElement && (((
|
|
131
|
+
var a, l;
|
|
132
|
+
return i instanceof HTMLElement && (((a = i.hasAttribute) == null ? void 0 : a.call(i, "context-toggle")) || ((l = i.getAttribute) == null ? void 0 : l.call(i, "slot")) === "toggle");
|
|
133
133
|
}
|
|
134
134
|
) && (this.setContextMode("chip", "click"), this.updateActionsLayout());
|
|
135
135
|
}, this.onContextChipDismiss = (t) => {
|
|
136
136
|
t.composedPath().find(
|
|
137
137
|
(r) => {
|
|
138
|
-
var
|
|
139
|
-
return r instanceof HTMLElement && (((
|
|
138
|
+
var s, i, a;
|
|
139
|
+
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")));
|
|
140
140
|
}
|
|
141
141
|
) && (this.setContextMode("icon", "dismiss"), this.updateActionsLayout());
|
|
142
142
|
}, this.toggleFanOpen = () => {
|
|
@@ -183,17 +183,17 @@ class k extends HTMLElement {
|
|
|
183
183
|
}
|
|
184
184
|
setDebugState(t, e) {
|
|
185
185
|
if (!this.shadowRoot) return;
|
|
186
|
-
const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"),
|
|
187
|
-
if (!o || !r || !
|
|
186
|
+
const o = this.shadowRoot.querySelector(".debug-region"), r = this.shadowRoot.querySelector("#promptDebugStatus"), s = this.shadowRoot.querySelector("#promptDebugPayload");
|
|
187
|
+
if (!o || !r || !s) return;
|
|
188
188
|
const i = this.hasAttribute("debug");
|
|
189
|
-
o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)),
|
|
189
|
+
o.toggleAttribute("hidden", !i), i && (r.textContent = t, e && (this.lastDebugPayload = JSON.stringify(e)), s.textContent = this.lastDebugPayload);
|
|
190
190
|
}
|
|
191
191
|
emitPromptItems({
|
|
192
192
|
items: t,
|
|
193
193
|
text: e,
|
|
194
194
|
textBadge: o,
|
|
195
195
|
overflowed: r,
|
|
196
|
-
thresholdChars:
|
|
196
|
+
thresholdChars: s,
|
|
197
197
|
source: i
|
|
198
198
|
}) {
|
|
199
199
|
this.dispatchEvent(
|
|
@@ -204,7 +204,7 @@ class k extends HTMLElement {
|
|
|
204
204
|
text: e,
|
|
205
205
|
textBadge: o,
|
|
206
206
|
overflowed: r,
|
|
207
|
-
thresholdChars:
|
|
207
|
+
thresholdChars: s,
|
|
208
208
|
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
209
209
|
},
|
|
210
210
|
bubbles: !0,
|
|
@@ -240,12 +240,12 @@ class k extends HTMLElement {
|
|
|
240
240
|
)
|
|
241
241
|
).flatMap((r) => r.assignedElements({ flatten: !0 })).forEach((r) => {
|
|
242
242
|
[r, ...Array.from(r.querySelectorAll("*"))].forEach((i) => {
|
|
243
|
-
const l = i.tagName.toLowerCase() === "mui-prompt-toggle", c = i.hasAttribute("context-toggle"),
|
|
243
|
+
const l = i.tagName.toLowerCase() === "mui-prompt-toggle", c = i.hasAttribute("context-toggle"), h = i.hasAttribute("context-active") || i.hasAttribute("context-close") || i.hasAttribute("context-chip") || i.hasAttribute("context-spinner");
|
|
244
244
|
if (l) {
|
|
245
245
|
i.setAttribute("mode", t);
|
|
246
246
|
return;
|
|
247
247
|
}
|
|
248
|
-
if (c ||
|
|
248
|
+
if (c || h) {
|
|
249
249
|
i.hasAttribute("context-chip") && i.tagName.toLowerCase() === "mui-chip" && !i.hasAttribute("variant") && i.setAttribute("variant", "ghost");
|
|
250
250
|
const p = c ? t === "icon" : t === "chip";
|
|
251
251
|
i.toggleAttribute("hidden", !p), i.style.display = p ? "inline-flex" : "none";
|
|
@@ -286,9 +286,9 @@ class k extends HTMLElement {
|
|
|
286
286
|
return;
|
|
287
287
|
}
|
|
288
288
|
if (t === "context-mode") {
|
|
289
|
-
const
|
|
290
|
-
if (o !==
|
|
291
|
-
this.setAttribute("context-mode",
|
|
289
|
+
const s = this.normalizeContextMode(o);
|
|
290
|
+
if (o !== s) {
|
|
291
|
+
this.setAttribute("context-mode", s);
|
|
292
292
|
return;
|
|
293
293
|
}
|
|
294
294
|
this.syncContextModeUI(), this.updateActionsLayout();
|
|
@@ -434,10 +434,10 @@ class k extends HTMLElement {
|
|
|
434
434
|
t == null || t.focus();
|
|
435
435
|
}
|
|
436
436
|
syncTextareaHeight(t) {
|
|
437
|
-
const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10),
|
|
437
|
+
const o = Number.parseInt(this.getAttribute("rows") || String(3), 10) || 3, r = Math.max(o + 6, 10), s = getComputedStyle(t), a = (Number.parseFloat(s.fontSize) || 16) * 1.55, l = Number.parseFloat(s.paddingTop) || 0, c = Number.parseFloat(s.paddingBottom) || 0, h = Number.parseFloat(s.borderTopWidth) || 0, p = Number.parseFloat(s.borderBottomWidth) || 0, u = l + c + h + p, m = 3 * a + u, g = r * a + u;
|
|
438
438
|
t.style.height = "auto";
|
|
439
|
-
const
|
|
440
|
-
t.style.height = `${Math.ceil(v)}px`, t.style.overflowY =
|
|
439
|
+
const b = t.scrollHeight, v = Math.max(m, Math.min(b, g));
|
|
440
|
+
t.style.height = `${Math.ceil(v)}px`, t.style.overflowY = b > g ? "auto" : "hidden";
|
|
441
441
|
}
|
|
442
442
|
detectBadge(t) {
|
|
443
443
|
const e = t.trim();
|
|
@@ -476,14 +476,14 @@ class k extends HTMLElement {
|
|
|
476
476
|
const o = e.match(/https?:\/\/[^\s]+/i), r = ((o == null ? void 0 : o[0]) || e).trim();
|
|
477
477
|
if (!/^https?:\/\//i.test(r)) return null;
|
|
478
478
|
try {
|
|
479
|
-
const
|
|
479
|
+
const s = new URL(r), i = s.pathname.toLowerCase(), a = s.hostname.toLowerCase();
|
|
480
480
|
if (/\.(png|jpe?g|gif|webp|svg|avif|bmp)$/.test(i))
|
|
481
481
|
return { url: r, kind: "image", badge: "IMG", mimeType: "image/*" };
|
|
482
|
-
if (
|
|
482
|
+
if (a === "youtu.be" || a.endsWith("youtube.com") || a.endsWith("youtube-nocookie.com"))
|
|
483
483
|
return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
|
|
484
|
-
if (
|
|
484
|
+
if (a.endsWith("vimeo.com") || a.endsWith("twitch.tv"))
|
|
485
485
|
return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
|
|
486
|
-
if (
|
|
486
|
+
if (a.endsWith("soundcloud.com") || a.endsWith("spotify.com") || a.endsWith("bandcamp.com") || a.endsWith("mixcloud.com"))
|
|
487
487
|
return { url: r, kind: "audio", badge: "MUSIC", mimeType: "audio/*" };
|
|
488
488
|
if (/\.(mp4|webm|mov|m4v|ogv)$/.test(i))
|
|
489
489
|
return { url: r, kind: "video", badge: "VIDEO", mimeType: "video/*" };
|
|
@@ -500,19 +500,19 @@ class k extends HTMLElement {
|
|
|
500
500
|
this.unbindEvents();
|
|
501
501
|
const t = this.shadowRoot.querySelector("textarea");
|
|
502
502
|
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);
|
|
503
|
-
const e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'),
|
|
503
|
+
const e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'), s = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
|
|
504
504
|
e == null || e.addEventListener("slotchange", this.onActionsSlotChange), o == null || o.addEventListener("slotchange", this.onActionsSlotChange), r == null || r.addEventListener("slotchange", this.onActionsSlotChange), typeof MutationObserver < "u" && ((i = this.lightDomObserver) == null || i.disconnect(), this.lightDomObserver = new MutationObserver(() => this.updateActionsLayout()), this.lightDomObserver.observe(this, {
|
|
505
505
|
childList: !0,
|
|
506
506
|
subtree: !0,
|
|
507
507
|
attributes: !0,
|
|
508
508
|
attributeFilter: ["slot", "hidden"]
|
|
509
|
-
})),
|
|
509
|
+
})), s == null || s.addEventListener("click", this.onDefaultSubmitClick), this.addEventListener("prompt-preview-open", this.onPreviewOpen), this.addEventListener("click", this.onContextToggleClick), this.addEventListener("dismiss", this.onContextChipDismiss), this.syncErrorVisibility(), this.bindPreviewOverflow(), this.bindActionTrigger(), this.syncLoadingState();
|
|
510
510
|
}
|
|
511
511
|
unbindEvents() {
|
|
512
|
-
var i,
|
|
512
|
+
var i, a, l, c;
|
|
513
513
|
if (!this.shadowRoot) return;
|
|
514
|
-
const t = this.shadowRoot.querySelector("textarea"), e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'),
|
|
515
|
-
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),
|
|
514
|
+
const t = this.shadowRoot.querySelector("textarea"), e = this.shadowRoot.querySelector('slot[name="actions"]'), o = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), r = this.shadowRoot.querySelector('slot[name="actions-right"]'), s = this.shadowRoot.querySelector("#promptDefaultSubmitAction");
|
|
515
|
+
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), s == null || s.removeEventListener("click", this.onDefaultSubmitClick), e == null || e.removeEventListener("slotchange", this.onActionsSlotChange), o == null || o.removeEventListener("slotchange", this.onActionsSlotChange), r == null || r.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), (i = this.previewRowEl) == null || i.removeEventListener("scroll", this.onPreviewScroll), (a = this.previewSlotEl) == null || a.removeEventListener("slotchange", this.onPreviewSlotChange), (l = this.previewResizeObserver) == null || l.disconnect(), this.previewResizeObserver = null, (c = this.lightDomObserver) == null || c.disconnect(), this.lightDomObserver = null, this.previewShellEl = null, this.previewRowEl = null, this.previewSlotEl = null;
|
|
516
516
|
}
|
|
517
517
|
bindPreviewOverflow() {
|
|
518
518
|
var t, e;
|
|
@@ -534,59 +534,59 @@ class k extends HTMLElement {
|
|
|
534
534
|
var i;
|
|
535
535
|
const e = this.getAttribute("preview-loading"), o = (this.getAttribute("preview-loading-label") || "").trim(), r = t || ((i = this.previewSlotEl) == null ? void 0 : i.assignedElements({ flatten: !0 })) || [];
|
|
536
536
|
if (!e) {
|
|
537
|
-
r.forEach((
|
|
538
|
-
|
|
537
|
+
r.forEach((a) => {
|
|
538
|
+
a.tagName.toLowerCase() === "mui-prompt-preview" && a.removeAttribute("loading");
|
|
539
539
|
});
|
|
540
540
|
return;
|
|
541
541
|
}
|
|
542
|
-
const
|
|
543
|
-
r.forEach((
|
|
544
|
-
|
|
542
|
+
const s = e === "auto" ? this.hasAttribute("loading") : !0;
|
|
543
|
+
r.forEach((a) => {
|
|
544
|
+
a.tagName.toLowerCase() === "mui-prompt-preview" && (s ? a.setAttribute("loading", "") : a.removeAttribute("loading"), o && a.setAttribute("loading-label", o));
|
|
545
545
|
});
|
|
546
546
|
}
|
|
547
547
|
normalizePreviewDetail(t) {
|
|
548
|
-
const e = String(t.value || "").trim(), o = String(t.bgImage || "").trim(), r = String(t.badge || "").trim(),
|
|
548
|
+
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";
|
|
549
549
|
return {
|
|
550
550
|
id: String(t.id || ""),
|
|
551
551
|
value: e,
|
|
552
552
|
badge: r || (o ? "IMG" : this.detectBadge(e)),
|
|
553
|
-
label:
|
|
553
|
+
label: s,
|
|
554
554
|
bgImage: o,
|
|
555
555
|
imageTint: i,
|
|
556
|
-
type:
|
|
556
|
+
type: a
|
|
557
557
|
};
|
|
558
558
|
}
|
|
559
559
|
openInternalPreviewDialog(t) {
|
|
560
|
-
var
|
|
560
|
+
var y;
|
|
561
561
|
if (!this.shadowRoot) return;
|
|
562
|
-
const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"),
|
|
563
|
-
if (!
|
|
562
|
+
const e = this.shadowRoot.querySelector("#promptAutoPreviewDialog"), o = this.shadowRoot.querySelector("#promptAutoPreviewTitle"), r = this.shadowRoot.querySelector("#promptAutoPreviewCode"), s = this.shadowRoot.querySelector("#promptAutoPreviewImage"), i = this.shadowRoot.querySelector("#promptAutoPreviewMedia"), a = this.shadowRoot.querySelector("#promptAutoPreviewMediaUrl"), l = this.normalizePreviewDetail(t), c = this.getAttribute("preview-dialog-title") || l.label, h = l.value, p = l.bgImage, u = l.badge, m = h ? this.detectMediaUrl(h) : null, g = !p && h.length > 0 && (u === "VIDEO" || u === "MUSIC"), b = !p && (!!(m && (m.kind === "video" || m.kind === "audio")) || g), v = p.length > 0, d = h.length > 0, w = (() => {
|
|
563
|
+
if (!m || m.kind !== "audio") return !1;
|
|
564
564
|
try {
|
|
565
|
-
const f = new URL(
|
|
565
|
+
const f = new URL(m.url);
|
|
566
566
|
return /\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(f.pathname.toLowerCase());
|
|
567
567
|
} catch {
|
|
568
568
|
return !1;
|
|
569
569
|
}
|
|
570
|
-
})(),
|
|
571
|
-
if (!
|
|
570
|
+
})(), n = (() => {
|
|
571
|
+
if (!m || !w) return "";
|
|
572
572
|
try {
|
|
573
|
-
const
|
|
574
|
-
return
|
|
573
|
+
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";
|
|
574
|
+
return E.charAt(0).toUpperCase() + E.slice(1);
|
|
575
575
|
} catch {
|
|
576
576
|
return "Audio";
|
|
577
577
|
}
|
|
578
578
|
})();
|
|
579
|
-
if (!(!v && !
|
|
580
|
-
if (this.setAttribute("preview-dialog-value",
|
|
581
|
-
|
|
582
|
-
else if (
|
|
583
|
-
if (
|
|
584
|
-
const f =
|
|
585
|
-
|
|
586
|
-
}
|
|
587
|
-
i && (i.setAttribute("src",
|
|
588
|
-
} else
|
|
589
|
-
(
|
|
579
|
+
if (!(!v && !d && !b)) {
|
|
580
|
+
if (this.setAttribute("preview-dialog-value", h), this.setAttribute("preview-dialog-image", p), this.setAttribute("preview-dialog-type", u || (v ? "IMG" : "CODE")), o && (o.textContent = c), b ? e == null || e.setAttribute("content-max-height", "none") : e == null || e.removeAttribute("content-max-height"), v)
|
|
581
|
+
a && a.setAttribute("hidden", ""), s && (s.setAttribute("src", p), s.removeAttribute("hidden")), i && i.setAttribute("hidden", ""), r && r.setAttribute("hidden", "");
|
|
582
|
+
else if (b && m) {
|
|
583
|
+
if (a) {
|
|
584
|
+
const f = w;
|
|
585
|
+
a.textContent = f ? n : m.url, f ? (a.setAttribute("href", m.url), a.setAttribute("target", "_blank"), a.setAttribute("rel", "noopener noreferrer")) : (a.removeAttribute("href"), a.removeAttribute("target"), a.removeAttribute("rel")), a.toggleAttribute("hidden", !f);
|
|
586
|
+
}
|
|
587
|
+
i && (i.setAttribute("src", m.url), i.removeAttribute("type"), i.removeAttribute("prefer-native-controls"), i.removeAttribute("hidden")), r && r.setAttribute("hidden", ""), s && (s.removeAttribute("src"), s.setAttribute("hidden", ""));
|
|
588
|
+
} else g ? (a && (a.textContent = h, a.toggleAttribute("hidden", !0)), i && (i.setAttribute("src", h), i.setAttribute("type", u === "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(h, u), r.removeAttribute("hidden")), i && (i.removeAttribute("src"), i.removeAttribute("prefer-native-controls"), i.setAttribute("hidden", "")), s && (s.removeAttribute("src"), s.setAttribute("hidden", "")));
|
|
589
|
+
(y = e == null ? void 0 : e.open) == null || y.call(e);
|
|
590
590
|
}
|
|
591
591
|
}
|
|
592
592
|
syncPreviewEdgeShadows() {
|
|
@@ -604,16 +604,16 @@ class k extends HTMLElement {
|
|
|
604
604
|
this.triggerEl && (this.triggerEl.removeEventListener("click", this.toggleFanOpen), this.triggerEl = null);
|
|
605
605
|
const r = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
|
|
606
606
|
(c) => !c.hasAttribute("hidden")
|
|
607
|
-
),
|
|
607
|
+
), s = t.assignedElements({ flatten: !0 }).filter(
|
|
608
608
|
(c) => !c.hasAttribute("hidden")
|
|
609
609
|
);
|
|
610
|
-
if (!(
|
|
610
|
+
if (!(s.length > 0)) {
|
|
611
611
|
o && (o.setAttribute("hidden", ""), o.style.display = "none");
|
|
612
612
|
return;
|
|
613
613
|
}
|
|
614
|
-
const
|
|
615
|
-
o && (o.toggleAttribute("hidden",
|
|
616
|
-
const l =
|
|
614
|
+
const a = r.length === 0 && s.length === 1 && this.isContextOnlyAction(s[0]);
|
|
615
|
+
o && (o.toggleAttribute("hidden", a), o.style.display = a ? "none" : "inline-flex");
|
|
616
|
+
const l = a ? null : r.find((c) => c.hasAttribute("fan-trigger")) || r[0] || o || s.find((c) => c.hasAttribute("fan-trigger")) || s[0] || null;
|
|
617
617
|
l && (this.triggerEl = l, this.triggerEl.addEventListener("click", this.toggleFanOpen), this.syncTriggerIconState());
|
|
618
618
|
}
|
|
619
619
|
syncTriggerIconState() {
|
|
@@ -635,83 +635,79 @@ class k extends HTMLElement {
|
|
|
635
635
|
updateActionsLayout() {
|
|
636
636
|
if (!this.shadowRoot) return;
|
|
637
637
|
this.syncContextModeUI();
|
|
638
|
-
const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), o = this.shadowRoot.querySelector("#promptDefaultActionsTrigger")
|
|
638
|
+
const t = this.shadowRoot.querySelector('slot[name="actions"]'), e = this.shadowRoot.querySelector('slot[name="actions-trigger"]'), o = this.shadowRoot.querySelector("#promptDefaultActionsTrigger");
|
|
639
639
|
if (!t) return;
|
|
640
|
-
const
|
|
640
|
+
const r = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) || []).filter(
|
|
641
641
|
(n) => !n.hasAttribute("hidden")
|
|
642
|
-
),
|
|
642
|
+
), s = t.assignedElements({ flatten: !0 }).filter(
|
|
643
643
|
(n) => !n.hasAttribute("hidden")
|
|
644
|
-
),
|
|
645
|
-
|
|
646
|
-
const
|
|
644
|
+
), i = s.length > 0, a = this.shadowRoot.querySelector(".actions-slot-left");
|
|
645
|
+
a && (a.style.display = i ? "inline-flex" : "none");
|
|
646
|
+
const l = r.length === 0 && s.length === 1 && this.isContextOnlyAction(s[0]);
|
|
647
647
|
if (o) {
|
|
648
|
-
const n = !
|
|
648
|
+
const n = !i || l;
|
|
649
649
|
o.toggleAttribute("hidden", n), o.style.display = n ? "none" : "inline-flex";
|
|
650
650
|
}
|
|
651
|
-
const
|
|
652
|
-
this.toggleAttribute("has-actions",
|
|
653
|
-
const
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
this.enforceActionVariants(), h.forEach((n, f) => {
|
|
659
|
-
n.style.transition = `transform ${y}ms ease, opacity ${y}ms ease`, n.style.zIndex = "";
|
|
660
|
-
const S = this.fanAnimations.get(n);
|
|
661
|
-
if (S && (S.cancel(), this.fanAnimations.delete(n)), !v) {
|
|
651
|
+
const c = l ? null : r.find((n) => n.hasAttribute("fan-trigger")) || r[0] || o || s.find((n) => n.hasAttribute("fan-trigger")) || s[0] || null, h = s.filter((n) => n !== c), p = c ? [c, ...h] : s, u = this.shadowRoot.querySelector('slot[name="actions-right"]'), m = (u == null ? void 0 : u.assignedElements({ flatten: !0 })) || [], g = h.length > 0;
|
|
652
|
+
this.toggleAttribute("has-actions", i), this.toggleAttribute("has-extra-actions", g);
|
|
653
|
+
const b = i || this.hasTruthyFlagAttribute("actions-fan"), v = this.hasAttribute("fan-open"), d = 100, w = "calc(var(--action-icon-only-size-medium) + var(--space-100))";
|
|
654
|
+
this.enforceActionVariants(), p.forEach((n, y) => {
|
|
655
|
+
n.style.transition = `transform ${d}ms ease, opacity ${d}ms ease`, n.style.zIndex = "";
|
|
656
|
+
const f = this.fanAnimations.get(n);
|
|
657
|
+
if (f && (f.cancel(), this.fanAnimations.delete(n)), !b) {
|
|
662
658
|
this.setFanItemInert(n, !1), n.style.transitionDelay = "", n.style.transform = "", n.style.opacity = "", n.style.pointerEvents = "", n.style.filter = "";
|
|
663
659
|
return;
|
|
664
660
|
}
|
|
665
|
-
if (
|
|
661
|
+
if (y === 0) {
|
|
666
662
|
this.setFanItemInert(n, !1), n.style.transitionDelay = "", n.style.transform = "translateX(0)", n.style.opacity = "1", n.style.pointerEvents = "", n.style.filter = "";
|
|
667
663
|
return;
|
|
668
664
|
}
|
|
669
|
-
if (!
|
|
665
|
+
if (!v) {
|
|
670
666
|
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 = "";
|
|
671
667
|
return;
|
|
672
668
|
}
|
|
673
|
-
const
|
|
674
|
-
n.style.transition = `opacity ${Math.max(120,
|
|
675
|
-
if (n.style.transform = `translateX(${
|
|
669
|
+
const A = `calc(${w} * -${y})`, x = y * 50;
|
|
670
|
+
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(() => {
|
|
671
|
+
if (n.style.transform = `translateX(${A})`, n.style.opacity = "1", window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
676
672
|
n.style.pointerEvents = "", this.setFanItemInert(n, !1);
|
|
677
673
|
return;
|
|
678
674
|
}
|
|
679
|
-
const
|
|
675
|
+
const S = n.animate(
|
|
680
676
|
[
|
|
681
677
|
{ transform: "translateX(0) scale(0.92)" },
|
|
682
|
-
{ transform: `translateX(${
|
|
683
|
-
{ transform: `translateX(calc(${
|
|
684
|
-
{ transform: `translateX(${
|
|
678
|
+
{ transform: `translateX(${A}) scale(1.03)`, offset: 0.68 },
|
|
679
|
+
{ transform: `translateX(calc(${A} - var(--space-050))) scale(0.99)`, offset: 0.86 },
|
|
680
|
+
{ transform: `translateX(${A}) scale(1)` }
|
|
685
681
|
],
|
|
686
682
|
{
|
|
687
|
-
duration:
|
|
683
|
+
duration: d + 180,
|
|
688
684
|
delay: x,
|
|
689
685
|
easing: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
690
686
|
fill: "forwards"
|
|
691
687
|
}
|
|
692
688
|
);
|
|
693
|
-
this.fanAnimations.set(n,
|
|
689
|
+
this.fanAnimations.set(n, S), S.finished.catch(() => {
|
|
694
690
|
}).finally(() => {
|
|
695
691
|
n.style.pointerEvents = "", this.setFanItemInert(n, !1);
|
|
696
692
|
});
|
|
697
693
|
});
|
|
698
|
-
}),
|
|
694
|
+
}), m.forEach((n) => {
|
|
699
695
|
n.style.transition = "", n.style.zIndex = "";
|
|
700
696
|
}), this.bindActionTrigger(), this.syncTriggerIconState();
|
|
701
697
|
}
|
|
702
698
|
render() {
|
|
703
699
|
if (!this.shadowRoot) return;
|
|
704
|
-
const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"),
|
|
700
|
+
const t = this.getAttribute("placeholder") || "Reply to Mui...", e = this.getAttribute("value") || "", o = this.getAttribute("rows") || "3", r = this.hasAttribute("disabled"), s = this.getAttribute("preview-dialog-width") || "560px", i = this.getAttribute("color-top-start") || "", a = this.getAttribute("color-top-mid") || "", l = this.getAttribute("color-top-end") || "", c = this.getAttribute("color-top-accent") || "", p = (this.getAttribute("color-layout") || "default").toLowerCase() === "swap", u = p ? l || "var(--prompt-color-top-end, var(--green-500))" : i || "var(--prompt-color-top-start, var(--blue-500))", m = p ? c || "var(--prompt-color-top-accent, var(--orange-500))" : a || "var(--prompt-color-top-mid, var(--blue-500))", g = p ? i || "var(--prompt-color-top-start, var(--blue-500))" : l || "var(--prompt-color-top-end, var(--green-500))", b = p ? a || "var(--prompt-color-top-mid, var(--blue-500))" : c || "var(--prompt-color-top-accent, var(--orange-500))", v = this.getAttribute("aria-label"), d = this.getAttribute("aria-labelledby"), w = this.getAttribute("aria-describedby"), n = !v && !d ? "Prompt input" : "", y = (this.getAttribute("error-message") || "").trim(), f = y;
|
|
705
701
|
this.shadowRoot.innerHTML = /*html*/
|
|
706
702
|
`
|
|
707
703
|
<style>
|
|
708
704
|
:host {
|
|
709
705
|
display: block;
|
|
710
706
|
--prompt-action-radius: var(--chip-radius-small, var(--radius-400));
|
|
711
|
-
--_prompt-color-top-start-source: ${
|
|
712
|
-
--_prompt-color-top-mid-source: ${
|
|
713
|
-
--_prompt-color-top-end-source: ${
|
|
714
|
-
--_prompt-color-top-accent-source: ${
|
|
707
|
+
--_prompt-color-top-start-source: ${u};
|
|
708
|
+
--_prompt-color-top-mid-source: ${m};
|
|
709
|
+
--_prompt-color-top-end-source: ${g};
|
|
710
|
+
--_prompt-color-top-accent-source: ${b};
|
|
715
711
|
--_prompt-accent-primary: var(--prompt-accent-primary, var(--prompt-spectrum-start, var(--blue-500)));
|
|
716
712
|
--_prompt-accent-secondary: var(--prompt-accent-secondary, var(--blue-500));
|
|
717
713
|
--_prompt-accent-mid: color-mix(in srgb, var(--_prompt-accent-primary) 52%, var(--_prompt-accent-secondary) 48%);
|
|
@@ -1280,13 +1276,6 @@ class k extends HTMLElement {
|
|
|
1280
1276
|
pointer-events: none;
|
|
1281
1277
|
margin-inline-end: var(--space-100);
|
|
1282
1278
|
}
|
|
1283
|
-
.actions-separator {
|
|
1284
|
-
margin-inline: var(--space-200);
|
|
1285
|
-
pointer-events: none;
|
|
1286
|
-
}
|
|
1287
|
-
.actions-separator[hidden] {
|
|
1288
|
-
display: none !important;
|
|
1289
|
-
}
|
|
1290
1279
|
.actions-slot mui-button {
|
|
1291
1280
|
--action-radius-x-small: var(--prompt-action-radius);
|
|
1292
1281
|
--action-radius-small: var(--prompt-action-radius);
|
|
@@ -1439,9 +1428,9 @@ class k extends HTMLElement {
|
|
|
1439
1428
|
rows="${o}"
|
|
1440
1429
|
placeholder="${t}"
|
|
1441
1430
|
${v ? `aria-label="${v.replace(/"/g, """)}"` : ""}
|
|
1442
|
-
${
|
|
1443
|
-
${
|
|
1444
|
-
${
|
|
1431
|
+
${d ? `aria-labelledby="${d.replace(/"/g, """)}"` : ""}
|
|
1432
|
+
${w ? `aria-describedby="${w.replace(/"/g, """)}"` : ""}
|
|
1433
|
+
${n ? `aria-label="${n}"` : ""}
|
|
1445
1434
|
${r ? "disabled" : ""}
|
|
1446
1435
|
>${e}</textarea>
|
|
1447
1436
|
</slot>
|
|
@@ -1455,7 +1444,6 @@ class k extends HTMLElement {
|
|
|
1455
1444
|
</mui-icon-toggle>
|
|
1456
1445
|
</mui-button>
|
|
1457
1446
|
</slot>
|
|
1458
|
-
<mui-rule class="actions-separator" direction="vertical" length="var(--space-400)" weight="var(--stroke-size-100)" aria-hidden="true"></mui-rule>
|
|
1459
1447
|
<slot name="actions"></slot>
|
|
1460
1448
|
</div>
|
|
1461
1449
|
<div class="actions-slot actions-slot-right">
|
|
@@ -1476,7 +1464,7 @@ class k extends HTMLElement {
|
|
|
1476
1464
|
</div>
|
|
1477
1465
|
<div class="error-region" hidden>
|
|
1478
1466
|
|
|
1479
|
-
<mui-body size="x-small" variant="error" class="error-default" ${
|
|
1467
|
+
<mui-body size="x-small" variant="error" class="error-default" ${y ? "" : "hidden"}>
|
|
1480
1468
|
<mui-icon-attention slot="before"></mui-icon-attention>
|
|
1481
1469
|
<span class="error-text">${f}</span>
|
|
1482
1470
|
</mui-body>
|
|
@@ -1490,7 +1478,7 @@ class k extends HTMLElement {
|
|
|
1490
1478
|
|
|
1491
1479
|
<mui-dialog
|
|
1492
1480
|
id="promptAutoPreviewDialog"
|
|
1493
|
-
width="${
|
|
1481
|
+
width="${s}"
|
|
1494
1482
|
content-padding="none"
|
|
1495
1483
|
>
|
|
1496
1484
|
<mui-heading id="promptAutoPreviewTitle" slot="title" size="5">Pasted Content</mui-heading>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/* ================================================================================================== */
|
|
3
|
-
/* Don't edit directly • Generated on Fri, 27 Feb 2026
|
|
3
|
+
/* Don't edit directly • Generated on Fri, 27 Feb 2026 06:15:52 GMT • muibook.com */
|
|
4
4
|
/* ================================================================================================== */
|
|
5
5
|
|
|
6
6
|
/* ================================================================================================== */
|