@selectwin/kit 0.1.220 → 0.1.222

package/dist/SelectAssistant.js

@@ -1,20 +1,21 @@
 /* empty css           */
 import { CloseIcon as e, SendIcon as t } from "./icons.js";
 import { useSelectMessages as n } from "./SelectLocale.js";
-import { useEffect as r, useId as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { AssistantLauncherButton as r } from "./SelectAssistantLauncher.js";
+import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/SelectAssistant.tsx
-var l = 240;
-function u({ open: u, onOpenChange: d, icon: f, title: h, subtitle: g, launcherLabel: _, badge: v, children: y, scrollKey: b, suggestions: x, onSuggestion: S, onSend: C, placeholder: w, disabled: T = !1, typing: E = !1, headerAction: D, anchor: O = "viewport", closeLabel: k, sendLabel: A, inputLabel: j, className: M }) {
-	let N = n(), P = k ?? N.common.close, F = A ?? N.assistant.send, I = j ?? N.assistant.input, L = i(), R = a(null), z = a(null), B = a(null), [V, H] = o(""), U = a(0), W = E !== !1;
-	r(() => {
-		let e = R.current;
-		if (!u || !e) {
-			U.current = 0;
+var u = 240;
+function d({ open: d, onOpenChange: f, icon: p, title: g, subtitle: _, launcherLabel: v, badge: y, children: b, scrollKey: x, suggestions: S, onSuggestion: C, onSend: w, placeholder: T, disabled: E = !1, typing: D = !1, headerAction: O, anchor: k = "viewport", closeLabel: A, sendLabel: j, inputLabel: M, className: N }) {
+	let P = n(), F = A ?? P.common.close, I = j ?? P.assistant.send, L = M ?? P.assistant.input, R = a(), z = o(null), B = o(null), V = o(null), [H, U] = s(""), W = o(0), G = D !== !1;
+	i(() => {
+		let e = z.current;
+		if (!d || !e) {
+			W.current = 0;
 			return;
 		}
-		let t = U.current === 0, n = e.children[U.current];
-		U.current = e.children.length;
+		let t = W.current === 0, n = e.children[W.current];
+		W.current = e.children.length;
 		let r = e.querySelectorAll(":scope > .select-chat__turn"), i = r.length > 0 ? r[r.length - 1] : null;
 		if (!i && n && !t) {
 			let e = n.previousElementSibling;
@@ -23,162 +24,161 @@ function u({ open: u, onOpenChange: d, icon: f, title: h, subtitle: g, launcherL
 		let a = e.scrollHeight - e.clientHeight, o = i ? Math.min(a, i.getBoundingClientRect().top - e.getBoundingClientRect().top + e.scrollTop - 12) : a;
 		t ? e.scrollTop = o : o > e.scrollTop + 1 && (typeof e.scrollTo == "function" ? e.scrollTo({
 			top: o,
-			behavior: m() ? "auto" : "smooth"
+			behavior: h() ? "auto" : "smooth"
 		}) : e.scrollTop = o);
 	}, [
-		u,
-		b,
-		W
-	]), r(() => {
+		d,
+		x,
+		G
+	]), i(() => {
 		var e;
-		u && typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(hover: hover) and (pointer: fine)").matches && ((e = z.current) == null || e.focus());
-	}, [u]);
-	let G = () => {
+		d && typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(hover: hover) and (pointer: fine)").matches && ((e = B.current) == null || e.focus());
+	}, [d]);
+	let K = o(!1);
+	i(() => {
 		var e;
-		d(!1), (e = B.current) == null || e.focus();
-	}, K = (e) => {
-		e.key === "Escape" && (e.stopPropagation(), G());
-	}, q = (e) => {
-		e.preventDefault();
-		let t = V.trim();
-		!t || T || W || (C == null || C(t), H(""));
-	}, J = typeof v == "number" && v > 0;
-	return /* @__PURE__ */ c("div", {
-		className: "select-assistant" + (O === "container" ? " select-assistant--container" : "") + (u ? " is-open" : "") + (M ? " " + M : ""),
-		children: [u && /* @__PURE__ */ c("section", {
-			id: L,
+		!d && K.current && (K.current = !1, (e = V.current) == null || e.focus());
+	}, [d]);
+	let q = () => {
+		var e;
+		K.current = !0, f(!1), (e = V.current) == null || e.focus();
+	};
+	return /* @__PURE__ */ l("div", {
+		className: "select-assistant" + (k === "container" ? " select-assistant--container" : "") + (d ? " is-open" : "") + (N ? " " + N : ""),
+		children: [d && /* @__PURE__ */ l("section", {
+			id: R,
 			className: "select-assistant__panel",
 			role: "dialog",
 			"aria-modal": "false",
-			"aria-label": typeof h == "string" ? h : _,
-			onKeyDown: K,
+			"aria-label": typeof g == "string" ? g : v,
+			onKeyDown: (e) => {
+				e.key === "Escape" && (e.stopPropagation(), q());
+			},
 			children: [
-				/* @__PURE__ */ c("header", {
+				/* @__PURE__ */ l("header", {
 					className: "select-assistant__head",
 					children: [
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "select-assistant__mark",
 							"aria-hidden": "true",
-							children: f
+							children: p
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "select-assistant__heading",
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ c("span", {
 								className: "select-assistant__title",
-								children: h
-							}), g != null && /* @__PURE__ */ s("span", {
-								className: "select-assistant__subtitle",
 								children: g
+							}), _ != null && /* @__PURE__ */ c("span", {
+								className: "select-assistant__subtitle",
+								children: _
 							})]
 						}),
-						D,
-						/* @__PURE__ */ s("button", {
+						O,
+						/* @__PURE__ */ c("button", {
 							type: "button",
 							className: "select-assistant__close",
-							onClick: G,
-							"aria-label": P,
-							title: P,
-							children: /* @__PURE__ */ s(e, {})
+							onClick: q,
+							"aria-label": F,
+							title: F,
+							children: /* @__PURE__ */ c(e, {})
 						})
 					]
 				}),
-				/* @__PURE__ */ c("div", {
-					ref: R,
+				/* @__PURE__ */ l("div", {
+					ref: z,
 					className: "select-assistant__body",
 					role: "log",
 					"aria-live": "polite",
-					children: [y, W ? /* @__PURE__ */ s(p, { label: typeof E == "string" ? E : void 0 }) : null]
+					children: [b, G ? /* @__PURE__ */ c(m, { label: typeof D == "string" ? D : void 0 }) : null]
 				}),
-				(C || x && x.length > 0) && /* @__PURE__ */ c("footer", {
+				(w || S && S.length > 0) && /* @__PURE__ */ l("footer", {
 					className: "select-assistant__foot",
-					children: [x && x.length > 0 && /* @__PURE__ */ s("div", {
+					children: [S && S.length > 0 && /* @__PURE__ */ c("div", {
 						className: "select-assistant__suggestions",
-						children: x.map((e) => /* @__PURE__ */ s("button", {
+						children: S.map((e) => /* @__PURE__ */ c("button", {
 							type: "button",
 							className: "select-assistant__chip",
-							disabled: T || W,
-							onClick: () => S == null ? void 0 : S(e.id),
+							disabled: E || G,
+							onClick: () => C == null ? void 0 : C(e.id),
 							children: e.label
 						}, e.id))
-					}), C && /* @__PURE__ */ c("form", {
+					}), w && /* @__PURE__ */ l("form", {
 						className: "select-assistant__composer",
-						onSubmit: q,
-						children: [/* @__PURE__ */ s("input", {
-							ref: z,
+						onSubmit: (e) => {
+							e.preventDefault();
+							let t = H.trim();
+							!t || E || G || (w == null || w(t), U(""));
+						},
+						children: [/* @__PURE__ */ c("input", {
+							ref: B,
 							className: "select-assistant__input",
 							type: "text",
-							value: V,
-							onChange: (e) => H(e.target.value),
-							placeholder: w,
-							"aria-label": I,
-							maxLength: l,
+							value: H,
+							onChange: (e) => U(e.target.value),
+							placeholder: T,
+							"aria-label": L,
+							maxLength: u,
 							autoComplete: "off",
 							enterKeyHint: "send",
-							disabled: T
-						}), /* @__PURE__ */ s("button", {
+							disabled: E
+						}), /* @__PURE__ */ c("button", {
 							type: "submit",
 							className: "select-assistant__send",
-							disabled: T || W || V.trim() === "",
-							"aria-label": F,
-							title: F,
-							children: /* @__PURE__ */ s(t, {})
+							disabled: E || G || H.trim() === "",
+							"aria-label": I,
+							title: I,
+							children: /* @__PURE__ */ c(t, {})
 						})]
 					})]
 				})
 			]
-		}), /* @__PURE__ */ c("button", {
-			ref: B,
-			type: "button",
-			className: "select-assistant__launcher",
-			onClick: () => d(!u),
-			"aria-expanded": u,
-			"aria-controls": u ? L : void 0,
-			"aria-label": J ? `${_} (${v})` : _,
-			title: _,
-			children: [u ? /* @__PURE__ */ s(e, {}) : f, J && !u && /* @__PURE__ */ s("span", {
-				className: "select-assistant__badge",
-				"aria-hidden": "true",
-				children: v > 99 ? "99+" : v
-			})]
+		}), /* @__PURE__ */ c(r, {
+			buttonRef: V,
+			icon: p,
+			label: v,
+			badge: y,
+			open: d,
+			controls: d ? R : void 0,
+			onClick: () => f(!d)
 		})]
 	});
 }
-function d({ from: e, bare: t = !1, children: n }) {
-	return /* @__PURE__ */ s("div", {
+function f({ from: e, bare: t = !1, children: n }) {
+	return /* @__PURE__ */ c("div", {
 		className: `select-chat__msg select-chat__msg--${e}${t ? " select-chat__msg--bare" : ""}`,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: "select-chat__bubble",
 			children: n
 		})
 	});
 }
-function f({ children: e }) {
-	return /* @__PURE__ */ s("div", {
+function p({ children: e }) {
+	return /* @__PURE__ */ c("div", {
 		className: "select-chat__turn",
 		children: e
 	});
 }
-function p({ label: e }) {
+function m({ label: e }) {
 	let t = n().assistant.typing;
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ c("div", {
 		className: "select-chat__msg select-chat__msg--assistant select-chat__msg--typing",
 		role: "status",
 		"aria-label": e ?? t,
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ l("div", {
 			className: "select-chat__bubble",
 			"aria-hidden": "true",
 			children: [
-				/* @__PURE__ */ s("span", { className: "select-chat__dot" }),
-				/* @__PURE__ */ s("span", { className: "select-chat__dot" }),
-				/* @__PURE__ */ s("span", { className: "select-chat__dot" })
+				/* @__PURE__ */ c("span", { className: "select-chat__dot" }),
+				/* @__PURE__ */ c("span", { className: "select-chat__dot" }),
+				/* @__PURE__ */ c("span", { className: "select-chat__dot" })
 			]
 		})
 	});
 }
-function m() {
+function h() {
 	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 //#endregion
-export { u as SelectAssistant, d as SelectChatMessage, f as SelectChatTurn, p as SelectChatTyping };
+export { d as SelectAssistant, f as SelectChatMessage, p as SelectChatTurn, m as SelectChatTyping };
 
 //# sourceMappingURL=SelectAssistant.js.map

package/dist/SelectAssistantLauncher.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, Ref } from 'react';
+/** O botão em si (o `SelectAssistant` usa o mesmo). */
+export declare function AssistantLauncherButton({ icon, label, badge, open, controls, onClick, buttonRef, }: {
+    icon: ReactNode;
+    label: string;
+    badge?: number;
+    open?: boolean;
+    controls?: string;
+    onClick: () => void;
+    buttonRef?: Ref<HTMLButtonElement>;
+}): import("react").JSX.Element;
+/** O botão no canto, antes de a janela existir: no mesmo lugar do `SelectAssistant` (`anchor`, as distâncias). */
+export declare function SelectAssistantLauncher({ icon, label, badge, onClick, anchor, className, }: {
+    icon: ReactNode;
+    /** O nome do botão ("Ao vivo"). */
+    label: string;
+    badge?: number;
+    onClick: () => void;
+    anchor?: 'viewport' | 'container';
+    className?: string;
+}): import("react").JSX.Element;

package/dist/SelectAssistantLauncher.js

@@ -0,0 +1,37 @@
+/* empty css           */
+import { CloseIcon as e } from "./icons.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectAssistantLauncher.tsx
+function r({ icon: r, label: i, badge: a, open: o = !1, controls: s, onClick: c, buttonRef: l }) {
+	let u = typeof a == "number" && a > 0;
+	return /* @__PURE__ */ n("button", {
+		ref: l,
+		type: "button",
+		className: "select-assistant__launcher",
+		onClick: c,
+		"aria-expanded": o,
+		"aria-controls": s,
+		"aria-label": u ? `${i} (${a})` : i,
+		title: i,
+		children: [o ? /* @__PURE__ */ t(e, {}) : r, u && !o && /* @__PURE__ */ t("span", {
+			className: "select-assistant__badge",
+			"aria-hidden": "true",
+			children: a > 99 ? "99+" : a
+		})]
+	});
+}
+function i({ icon: e, label: n, badge: i, onClick: a, anchor: o = "viewport", className: s }) {
+	return /* @__PURE__ */ t("div", {
+		className: "select-assistant" + (o === "container" ? " select-assistant--container" : "") + (s ? " " + s : ""),
+		children: /* @__PURE__ */ t(r, {
+			icon: e,
+			label: n,
+			badge: i,
+			onClick: a
+		})
+	});
+}
+//#endregion
+export { r as AssistantLauncherButton, i as SelectAssistantLauncher };
+
+//# sourceMappingURL=SelectAssistantLauncher.js.map

package/dist/SelectConversation.d.ts

@@ -1,7 +1,12 @@
-import { ReactNode } from 'react';
-export declare function SelectConversation({ children, 'aria-label': ariaLabel }: {
+import { MouseEvent, ReactNode } from 'react';
+export declare function SelectConversation({ children, 'aria-label': ariaLabel, onPinnedChange, }: {
     children: ReactNode;
     'aria-label'?: string;
+    /**
+     * 0.1.222: quem lê está no fim (acompanha o que chega) ou rolou para cima para reler. Para quem conta o que chegou
+     * enquanto a pessoa estava acima (o "N novos" do `SelectConversationNewer`).
+     */
+    onPinnedChange?: (pinned: boolean) => void;
 }): import("react").JSX.Element;
 /** O separador de dia ("Hoje", "Ontem", "12 out"). */
 export declare function SelectConversationDay({ children }: {
@@ -34,5 +39,37 @@ export interface SelectConversationBubbleProps {
     avatar?: ReactNode;
     /** 0.1.184: a hora ao lado do nome, em cima do balão ("Você · 26/10, 08:46"). */
     time?: ReactNode;
+    /** 0.1.221: a mídia dentro do balão, acima do texto (a legenda): o `SelectConversationMedia`. */
+    media?: ReactNode;
+    /** 0.1.222: chegou com a conversa aberta e ainda não foi visto — a borda do acento no balão. */
+    fresh?: boolean;
+    /**
+     * 0.1.222: o balão inteiro é um LINK (o evento que abre a mensagem): `to` é um endereço do app (o `<Link>` do roteador)
+     * e `href`, um de fora. `onClick` vem junto (fechar a janela no celular, por exemplo).
+     */
+    to?: string;
+    href?: string;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
-export declare function SelectConversationBubble({ direction, author, label, attachment, meta, metaTone, children, avatar, time }: SelectConversationBubbleProps): import("react").JSX.Element;
+export declare function SelectConversationBubble({ direction, author, label, attachment, meta, metaTone, children, avatar, time, media, fresh, to, href, onClick, }: SelectConversationBubbleProps): import("react").JSX.Element;
+/**
+ * 0.1.221: a mídia de uma mensagem, dentro do balão — a foto, a figurinha (sem fundo, menor), o vídeo e o áudio (com os
+ * controles do navegador). Nada é baixado antes de aparecer (`loading="lazy"`, `preload="none"`). Quando o arquivo não
+ * abre (o link da mídia expirou), `onError` avisa quem usa, que troca pela nota.
+ */
+export declare function SelectConversationMedia({ kind, src, alt, onError, }: {
+    kind: 'image' | 'sticker' | 'video' | 'audio';
+    src: string;
+    /** O que a imagem mostra (a legenda, ou "Imagem"). */
+    alt?: string;
+    onError?: () => void;
+}): import("react").JSX.Element;
+/**
+ * 0.1.222: o "N novos ↓" — o que chegou enquanto quem lê estava acima, num botão que fica no pé da caixa que rola. O
+ * clique leva ao fim (a caixa de quem contém a conversa) e avisa quem usa, que zera a conta. Quem decide quando mostrar
+ * (e o número) é quem usa: o `onPinnedChange` da `SelectConversation` diz quando a pessoa saiu do fim.
+ */
+export declare function SelectConversationNewer({ children, onClick }: {
+    children: ReactNode;
+    onClick?: () => void;
+}): import("react").JSX.Element;

package/dist/SelectConversation.js

@@ -1,97 +1,170 @@
-import { useEffect as e, useLayoutEffect as t, useRef as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { safeHref as e } from "./internal/safeHref.js";
+import { useEffect as t, useLayoutEffect as n, useRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Link as s } from "react-router-dom";
 //#region src/SelectConversation.tsx
-var o = (...e) => e.filter(Boolean).join(" "), s = 48;
-function c(e) {
+var c = (...e) => e.filter(Boolean).join(" "), l = 48;
+function u(e) {
 	for (let t = (e == null ? void 0 : e.parentElement) ?? null; t; t = t.parentElement) {
 		let { overflowY: e } = getComputedStyle(t);
 		if (e === "auto" || e === "scroll") return t;
 	}
 	return null;
 }
-function l({ children: r, "aria-label": a }) {
-	let o = n(null), l = n(!0);
-	return e(() => {
-		let e = c(o.current);
+function d({ children: e, "aria-label": i, onPinnedChange: o }) {
+	let s = r(null), c = r(!0), d = r(o);
+	return d.current = o, t(() => {
+		let e = u(s.current);
 		if (!e) return;
 		let t = () => {
-			l.current = e.scrollHeight - e.scrollTop - e.clientHeight <= s;
+			var t;
+			let n = e.scrollHeight - e.scrollTop - e.clientHeight <= l;
+			n !== c.current && ((t = d.current) == null || t.call(d, n)), c.current = n;
 		};
 		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
-	}, []), t(() => {
-		if (!l.current) return;
-		let e = c(o.current);
+	}, []), n(() => {
+		if (!c.current) return;
+		let e = u(s.current);
 		e && (e.scrollTop = e.scrollHeight);
-	}), /* @__PURE__ */ i("div", {
-		ref: o,
+	}), t(() => {
+		let e = s.current, t = u(e);
+		if (!e || !t || typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(() => {
+			c.current && (t.scrollTop = t.scrollHeight);
+		});
+		return n.observe(e), () => n.disconnect();
+	}, []), /* @__PURE__ */ a("div", {
+		ref: s,
 		className: "select-convo",
 		role: "log",
 		"aria-live": "polite",
-		"aria-label": a,
-		children: r
+		"aria-label": i,
+		children: e
 	});
 }
-function u({ children: e }) {
-	return /* @__PURE__ */ i("div", {
+function f({ children: e }) {
+	return /* @__PURE__ */ a("div", {
 		className: "select-convo__day",
 		role: "separator",
 		"aria-label": typeof e == "string" ? e : void 0,
 		children: e
 	});
 }
-function d({ children: e, time: t }) {
-	return /* @__PURE__ */ a("div", {
+function p({ children: e, time: t }) {
+	return /* @__PURE__ */ o("div", {
 		className: "select-convo__event",
-		children: [e, t ? /* @__PURE__ */ a("span", {
+		children: [e, t ? /* @__PURE__ */ o("span", {
 			className: "select-convo__event-time",
 			children: [" · ", t]
 		}) : null]
 	});
 }
-function f({ direction: e, author: t, label: n, attachment: s, meta: c, metaTone: l, children: u, avatar: d, time: f }) {
-	let p = u != null && u !== "", m = /* @__PURE__ */ a(r, { children: [
-		t || f ? /* @__PURE__ */ a("span", {
+function m({ direction: t, author: n, label: r, attachment: l, meta: u, metaTone: d, children: f, avatar: p, time: m, media: h, fresh: g = !1, to: _, href: v, onClick: y }) {
+	let b = f != null && f !== "", x = b || !!r || h != null, S = _ != null || v != null ? e(_ ?? v) : void 0, C = c("select-convo__bubble", S !== void 0 && "select-convo__bubble--link"), w = /* @__PURE__ */ o(i, { children: [
+		r ? /* @__PURE__ */ a("span", {
+			className: "select-convo__label",
+			children: r
+		}) : null,
+		h == null ? null : /* @__PURE__ */ a("div", {
+			className: "select-convo__media",
+			children: h
+		}),
+		b ? /* @__PURE__ */ a("div", {
+			className: "select-convo__text",
+			children: f
+		}) : null
+	] }), T = /* @__PURE__ */ o(i, { children: [
+		n || m ? /* @__PURE__ */ o("span", {
 			className: "select-convo__author",
-			children: [t, f ? /* @__PURE__ */ i("span", {
+			children: [n, m ? /* @__PURE__ */ a("span", {
 				className: "select-convo__time",
-				children: f
+				children: m
 			}) : null]
 		}) : null,
-		p || n ? /* @__PURE__ */ a("div", {
-			className: "select-convo__bubble",
-			children: [n ? /* @__PURE__ */ i("span", {
-				className: "select-convo__label",
-				children: n
-			}) : null, p ? /* @__PURE__ */ i("div", {
-				className: "select-convo__text",
-				children: u
-			}) : null]
+		x ? S !== void 0 && _ != null ? /* @__PURE__ */ a(s, {
+			to: S,
+			className: C,
+			onClick: y,
+			children: w
+		}) : S === void 0 ? /* @__PURE__ */ a("div", {
+			className: C,
+			children: w
+		}) : /* @__PURE__ */ a("a", {
+			href: S,
+			className: C,
+			onClick: y,
+			children: w
 		}) : null,
-		s ? /* @__PURE__ */ i("div", {
+		l ? /* @__PURE__ */ a("div", {
 			className: "select-convo__attachment",
-			children: s
+			children: l
 		}) : null,
-		c ? /* @__PURE__ */ i("span", {
-			className: o("select-convo__meta", l && `select-convo__meta--${l}`),
-			children: c
+		u ? /* @__PURE__ */ a("span", {
+			className: c("select-convo__meta", d && `select-convo__meta--${d}`),
+			children: u
 		}) : null
 	] });
-	return d ? /* @__PURE__ */ a("div", {
-		className: o("select-convo__msg", `select-convo__msg--${e}`, "select-convo__msg--avatar"),
-		children: [/* @__PURE__ */ i("span", {
+	return p ? /* @__PURE__ */ o("div", {
+		className: c("select-convo__msg", `select-convo__msg--${t}`, "select-convo__msg--avatar", g && "is-fresh"),
+		children: [/* @__PURE__ */ a("span", {
 			className: "select-convo__avatar",
 			"aria-hidden": "true",
-			children: d
-		}), /* @__PURE__ */ i("div", {
+			children: p
+		}), /* @__PURE__ */ a("div", {
 			className: "select-convo__stack",
-			children: m
+			children: T
 		})]
-	}) : /* @__PURE__ */ i("div", {
-		className: o("select-convo__msg", `select-convo__msg--${e}`),
-		children: m
+	}) : /* @__PURE__ */ a("div", {
+		className: c("select-convo__msg", `select-convo__msg--${t}`, g && "is-fresh"),
+		children: T
+	});
+}
+function h({ kind: e, src: t, alt: n, onError: r }) {
+	return e === "audio" ? /* @__PURE__ */ a("audio", {
+		className: "select-convo__audio",
+		controls: !0,
+		preload: "none",
+		src: t,
+		onError: r
+	}) : e === "video" ? /* @__PURE__ */ a("video", {
+		className: "select-convo__video",
+		controls: !0,
+		preload: "none",
+		src: t,
+		onError: r
+	}) : /* @__PURE__ */ a("img", {
+		className: `select-convo__image${e === "sticker" ? " select-convo__image--sticker" : ""}`,
+		src: t,
+		alt: n ?? "",
+		loading: "lazy",
+		onError: r
+	});
+}
+function g({ children: e, onClick: t }) {
+	let n = r(null);
+	return /* @__PURE__ */ o("button", {
+		ref: n,
+		type: "button",
+		className: "select-convo__newer",
+		onClick: () => {
+			let e = u(n.current);
+			e && (e.scrollTop = e.scrollHeight), t == null || t();
+		},
+		children: [/* @__PURE__ */ a("svg", {
+			viewBox: "0 0 20 20",
+			width: "16",
+			height: "16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.8",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ a("path", { d: "M5 8l5 5 5-5" })
+		}), e]
 	});
 }
 //#endregion
-export { l as SelectConversation, f as SelectConversationBubble, u as SelectConversationDay, d as SelectConversationEvent };
+export { d as SelectConversation, m as SelectConversationBubble, f as SelectConversationDay, p as SelectConversationEvent, h as SelectConversationMedia, g as SelectConversationNewer };
 
 //# sourceMappingURL=SelectConversation.js.map

package/dist/SelectLocale.d.ts

@@ -84,6 +84,30 @@ export interface SelectKitMessages {
     sideNav: {
         pending: (hint: string) => string;
     };
+    /** 0.1.221: a caixa de entrada (SelectInbox, a lista, o leitor, o compositor e o anexo), que só falava português. */
+    inbox: {
+        list: string;
+        reader: string;
+        aside: string;
+        unread: string;
+        unreadCount: (n: number) => string;
+        messages: (n: number) => string;
+        flagged: string;
+        attachments: (n: number) => string;
+        back: string;
+        tools: string;
+        close: string;
+        drop: string;
+        open: string;
+        minimize: string;
+        message: string;
+        attachmentLoading: string;
+        attachmentReady: string;
+        attachmentFailed: string;
+        attachmentOpen: (name: string) => string;
+        attachmentBusy: (name: string) => string;
+        attachmentGet: (name: string) => string;
+    };
     /** 0.1.220: o SelectCarousel — o nome, o papel, a posição e os botões. */
     carousel: {
         label: string;