@factorialco/f0-react 12.3.0 → 12.4.0

package/dist/component-status.js

@@ -4,7 +4,7 @@ import { useCallback as i, useEffect as a, useRef as o, useState as s } from "re
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region \0virtual:f0-component-status-data
 var u = {
-	generatedAt: "2026-10-30T15:59:26.589Z",
+	generatedAt: "2026-10-31T12:18:02.614Z",
 	stats: {
 		total: 312,
 		byStatus: {

package/dist/experimental.d.ts

@@ -6279,6 +6279,12 @@ type F0ChatHeaderAction = {
    * Ignored for `inline` actions — the row of icon buttons has no such state.
    */
   critical?: boolean;
+  /**
+   * `promote` draws an inline action as an upsell (the `promote` button): the
+   * action exists, but the plan leaves it out and pressing it should explain
+   * why. Ignored in the overflow menu and for toggles (`active` set).
+   */
+  variant?: "default" | "promote";
 };
 /** The id of the built-in Messages tab, always first and the default. */
 export declare const F0_CHAT_MESSAGES_TAB_ID = "messages";
@@ -6673,10 +6679,17 @@ type F0ChatRuntime = {
   /**
    * Maximum size in bytes for each file selected, dropped, or pasted into the
    * composer. When any file exceeds the limit, the composer rejects the whole
-   * batch before calling `uploadFiles` and keeps the validation error visible
-   * until the next attachment attempt. Omit for no size limit.
+   * batch before calling `uploadFiles` and shows the limit as a transient
+   * error, gone after a few seconds like the other composer warnings. Omit for
+   * no size limit.
    */
   maxFileSizeBytes?: number;
+  /**
+   * Called when a batch is rejected for {@link maxFileSizeBytes}, after the
+   * composer shows its error. For hosts whose limit is a plan's, to offer the
+   * upgrade.
+   */
+  onFileTooLarge?: (files: File[], maxFileSizeBytes: number) => void;
   /**
    * Maximum number of characters allowed in a message. The composer keeps an
    * oversized draft in place and shows its existing validation banner instead

package/dist/experimental.js

@@ -15977,7 +15977,7 @@ var hO = () => mO(aO, "useChatJump"), gO = (e) => {
 		className: "flex shrink-0 items-center gap-0.5",
 		children: [
 			C.map((t) => t.active === void 0 ? /* @__PURE__ */ Q(er, {
-				variant: "ghost",
+				variant: t.variant === "promote" ? "promote" : "ghost",
 				hideLabel: !0,
 				label: t.label,
 				icon: t.icon,
@@ -20166,17 +20166,17 @@ var MP = {
 	size: e.size,
 	mimeType: e.type
 }, BP = (e, t) => e && t, VP = () => {
-	let e = W(), { sendMessage: t, editMessage: n, onInputActivity: r, stopTyping: i, uploadFiles: a, transcribe: o, maxFiles: s, maxFileSizeBytes: c, maxMessageCharacters: l, channel: u, searchMembers: d, capabilities: f } = gl(), p = !!a && zk("canUpload", u.type, f), { target: m } = _O(), { clearComposeTarget: h, registerComposerHandle: g } = vO(), _ = LP(), { registerFileDropHandler: v } = yO(), y = il(), { reducedMotion: b } = PO(), x = !!b, S = Y(null), [C, w] = X([]), T = Y(null), E = Y(null), D = Y(/* @__PURE__ */ new Set()), O = Y(0), { error: k, show: A, clear: j } = Rr(), M = m.kind === "edit", N = m.kind === "edit" ? m.message : null, P = m.kind === "reply" ? m.message : null, F = p, [I, ee] = X(!1), te = Y({ channelId: u.id });
-	te.current = {
-		channelId: u.id,
-		replyToId: P?.id
+	let e = W(), { sendMessage: t, editMessage: n, onInputActivity: r, stopTyping: i, uploadFiles: a, transcribe: o, maxFiles: s, maxFileSizeBytes: c, onFileTooLarge: l, maxMessageCharacters: u, channel: d, searchMembers: f, capabilities: p } = gl(), m = !!a && zk("canUpload", d.type, p), { target: h } = _O(), { clearComposeTarget: g, registerComposerHandle: _ } = vO(), v = LP(), { registerFileDropHandler: y } = yO(), b = il(), { reducedMotion: x } = PO(), S = !!x, C = Y(null), [w, T] = X([]), E = Y(null), D = Y(null), O = Y(/* @__PURE__ */ new Set()), k = Y(0), { error: A, show: j, clear: M } = Rr(), N = h.kind === "edit", P = h.kind === "edit" ? h.message : null, F = h.kind === "reply" ? h.message : null, I = m, [ee, te] = X(!1), ne = Y({ channelId: d.id });
+	ne.current = {
+		channelId: d.id,
+		replyToId: F?.id
 	};
-	let ne = Y(m);
-	ne.current = m;
-	let re = K(async (n, r) => {
+	let re = Y(h);
+	re.current = h;
+	let L = K(async (n, r) => {
 		if (!a) return;
-		ee(!0);
-		let { channelId: i, replyToId: o } = te.current, s = n.type || "audio/webm", c = s.includes("mp4") ? "m4a" : s.includes("ogg") ? "ogg" : "webm", l = new File([n], `voice-note.${c}`, { type: s });
+		te(!0);
+		let { channelId: i, replyToId: o } = ne.current, s = n.type || "audio/webm", c = s.includes("mp4") ? "m4a" : s.includes("ogg") ? "ogg" : "webm", l = new File([n], `voice-note.${c}`, { type: s });
 		try {
 			let [e] = await a([l]);
 			if (e && "url" in e) {
@@ -20191,88 +20191,88 @@ var MP = {
 						name: l.name
 					}]
 				});
-				let n = ne.current;
-				o && n.kind === "reply" && n.message.id === o && h();
+				let n = re.current;
+				o && n.kind === "reply" && n.message.id === o && g();
 			}
 		} catch {
-			A(e.chat.fileUploadError);
+			j(e.chat.fileUploadError);
 		} finally {
-			ee(!1);
+			te(!1);
 		}
 	}, [
 		a,
 		t,
-		h,
-		A,
+		g,
+		j,
 		e.chat.fileUploadError
-	]), L = CP({
-		searchMembers: d,
-		everyoneLabel: u.type === "group" ? e.chat.mentionEveryone : void 0
-	}), ie = K(({ mentions: t, mentionedEveryone: n }) => [...(t ?? []).map((e) => xP({
+	]), ie = CP({
+		searchMembers: f,
+		everyoneLabel: d.type === "group" ? e.chat.mentionEveryone : void 0
+	}), R = K(({ mentions: t, mentionedEveryone: n }) => [...(t ?? []).map((e) => xP({
 		id: e.id,
 		name: e.name,
 		avatar: e.avatar,
 		subtitle: e.subtitle,
 		profileHref: e.profileHref
-	})), ...n && u.type === "group" ? [xP({
+	})), ...n && d.type === "group" ? [xP({
 		id: _P,
 		name: e.chat.mentionEveryone
-	})] : []], [u.type, e.chat.mentionEveryone]), R = PP({
-		getComposer: K(() => S.current, []),
-		isEditing: M,
-		toComposerMentions: ie
-	}), ae = K((e) => {
-		R.noteTextChange(), r(), e.trim().length === 0 && i?.();
+	})] : []], [d.type, e.chat.mentionEveryone]), ae = PP({
+		getComposer: K(() => C.current, []),
+		isEditing: N,
+		toComposerMentions: R
+	}), oe = K((e) => {
+		ae.noteTextChange(), r(), e.trim().length === 0 && i?.();
 	}, [
-		R,
+		ae,
 		r,
 		i
 	]);
 	q(() => () => {
 		i?.();
 	}, [i]);
-	let oe = K((e) => {
-		D.current.delete(e) && URL.revokeObjectURL(e);
+	let se = K((e) => {
+		O.current.delete(e) && URL.revokeObjectURL(e);
 	}, []);
 	q(() => () => {
-		for (let e of D.current) URL.revokeObjectURL(e);
-		D.current.clear();
+		for (let e of O.current) URL.revokeObjectURL(e);
+		O.current.clear();
 	}, []);
-	let se = C.some((e) => e.status === "uploading"), ce = J(() => [...C.filter(RP), ...C.filter((e) => !RP(e))], [C]), le = Y(0);
+	let ce = w.some((e) => e.status === "uploading"), le = J(() => [...w.filter(RP), ...w.filter((e) => !RP(e))], [w]), ue = Y(0);
 	q(() => {
-		le.current = C.length;
-	}, [C]);
-	let ue = K(async (t, n) => {
-		if (t.length === 0 || !a || !p) return;
-		if (j(), s !== void 0 && le.current + t.length > s) {
-			A(e.chat.tooManyFilesError.replace("{{maxFiles}}", String(s)));
+		ue.current = w.length;
+	}, [w]);
+	let de = K(async (t, n) => {
+		if (t.length === 0 || !a || !m) return;
+		if (M(), s !== void 0 && ue.current + t.length > s) {
+			j(e.chat.tooManyFilesError.replace("{{maxFiles}}", String(s)));
 			return;
 		}
 		if (c !== void 0 && t.some((e) => e.size > c)) {
-			A(e.chat.fileTooLargeError.replace("{{maxFileSize}}", Oa(c)), { persistent: !0 });
+			j(e.chat.fileTooLargeError.replace("{{maxFileSize}}", Oa(c))), l?.(t, c);
 			return;
 		}
 		let r = t.map((e) => {
 			let t = URL.createObjectURL(e);
-			return D.current.add(t), {
-				id: `att-${O.current++}`,
+			return O.current.add(t), {
+				id: `att-${k.current++}`,
 				status: "uploading",
 				attachment: zP(e, t)
 			};
 		});
-		for (let e of r) y.onFileAttached({
+		for (let e of r) b.onFileAttached({
 			kind: YD(e.attachment),
 			source: n
 		});
-		w((e) => [...e, ...r]);
+		T((e) => [...e, ...r]);
 		let i = new Set(r.map((e) => e.id));
 		try {
 			let e = (await a(t)).map((e, t) => ({
-				id: r[t]?.id ?? `att-${O.current++}`,
+				id: r[t]?.id ?? `att-${k.current++}`,
 				status: "ready",
 				attachment: e
 			}));
-			w((t) => {
+			T((t) => {
 				let n = new Map(e.map((e) => [e.id, e]));
 				return t.flatMap((e) => {
 					if (!i.has(e.id)) return [e];
@@ -20280,134 +20280,135 @@ var MP = {
 					return t ? [t] : [];
 				});
 			});
-			for (let e of r) oe(e.attachment.url);
+			for (let e of r) se(e.attachment.url);
 		} catch {
-			w((e) => e.filter((e) => !i.has(e.id)));
-			for (let e of r) oe(e.attachment.url);
-			A(e.chat.fileUploadError);
+			T((e) => e.filter((e) => !i.has(e.id)));
+			for (let e of r) se(e.attachment.url);
+			j(e.chat.fileUploadError);
 		}
 	}, [
 		a,
-		p,
+		m,
 		s,
 		c,
+		l,
+		M,
 		j,
-		A,
 		e.chat.tooManyFilesError,
 		e.chat.fileTooLargeError,
 		e.chat.fileUploadError,
-		oe,
-		y
-	]), de = K((e) => {
-		let t = C.find((t) => t.id === e), n = t?.attachment;
-		n && n.kind !== "voice" && n.kind !== "location" && y.onAttachmentRemoved({ kind: YD(n) });
-		let r = C.some((t) => t.id !== e);
-		t?.status === "uploading" && oe(t.attachment.url), w((t) => t.filter((t) => t.id !== e)), requestAnimationFrame(() => {
-			r ? E.current?.focus() : S.current?.focus();
+		se,
+		b
+	]), fe = K((e) => {
+		let t = w.find((t) => t.id === e), n = t?.attachment;
+		n && n.kind !== "voice" && n.kind !== "location" && b.onAttachmentRemoved({ kind: YD(n) });
+		let r = w.some((t) => t.id !== e);
+		t?.status === "uploading" && se(t.attachment.url), T((t) => t.filter((t) => t.id !== e)), requestAnimationFrame(() => {
+			r ? D.current?.focus() : C.current?.focus();
 		});
 	}, [
-		C,
-		oe,
-		y
-	]), fe = K((e) => {
-		for (let t of e) t.status === "uploading" && oe(t.attachment.url);
-	}, [oe]);
+		w,
+		se,
+		b
+	]), pe = K((e) => {
+		for (let t of e) t.status === "uploading" && se(t.attachment.url);
+	}, [se]);
 	q(() => {
-		v((e) => void ue(e, "drop"));
-	}, [v, ue]);
-	let pe = K((e) => void ue(e, "paste"), [ue]), me = K(() => {
-		let e = S.current;
-		e?.cancelRecording(), e?.clear(), fe(C), w([]), e?.breakHistory();
-	}, [fe, C]), z = K((e) => {
-		w((t) => (fe(t), (e.attachments ?? []).filter((e) => e.kind !== "card").map((e) => ({
-			id: `att-${O.current++}`,
+		y((e) => void de(e, "drop"));
+	}, [y, de]);
+	let me = K((e) => void de(e, "paste"), [de]), z = K(() => {
+		let e = C.current;
+		e?.cancelRecording(), e?.clear(), pe(w), T([]), e?.breakHistory();
+	}, [pe, w]), he = K((e) => {
+		T((t) => (pe(t), (e.attachments ?? []).filter((e) => e.kind !== "card").map((e) => ({
+			id: `att-${k.current++}`,
 			status: "ready",
 			attachment: e
-		})))), S.current?.loadDraft({
+		})))), C.current?.loadDraft({
 			value: e.body,
-			mentions: ie(e)
+			mentions: R(e)
 		});
-	}, [ie, fe]), he = K((e, t) => {
+	}, [R, pe]), ge = K((e, t) => {
 		let n = e.kind === "edit" && t.kind !== "edit", r = e.kind === "edit" && t.kind === "edit" && e.message.id === t.message.id;
-		n && (me(), R.restore({ cleared: !0 })), t.kind === "edit" && !r && (e.kind !== "edit" && R.flush(), z(t.message)), t.kind !== "none" && S.current?.focus({ preventScroll: !0 });
+		n && (z(), ae.restore({ cleared: !0 })), t.kind === "edit" && !r && (e.kind !== "edit" && ae.flush(), he(t.message)), t.kind !== "none" && C.current?.focus({ preventScroll: !0 });
 	}, [
-		me,
 		z,
-		R
-	]), ge = J(() => ({
-		retarget: he,
+		he,
+		ae
+	]), _e = J(() => ({
+		retarget: ge,
 		abandonDraft: () => {
-			me(), R.restore({ cleared: !0 });
+			z(), ae.restore({ cleared: !0 });
 		}
 	}), [
-		he,
-		me,
-		R
+		ge,
+		z,
+		ae
 	]);
 	q(function() {
-		return g(ge), () => g(null);
-	}, [g, ge]), q(function() {
-		return h;
-	}, [h]);
-	let _e = K(() => {
-		N && y.onEditCancelled({ messageId: N.id }), h();
+		return _(_e), () => _(null);
+	}, [_, _e]), q(function() {
+		return g;
+	}, [g]);
+	let ve = K(() => {
+		P && b.onEditCancelled({ messageId: P.id }), g();
 	}, [
-		h,
-		N,
-		y
-	]), ve = K(() => {
-		P && y.onReplyCancelled({ messageId: P.id }), h();
+		g,
+		P,
+		b
+	]), ye = K(() => {
+		F && b.onReplyCancelled({ messageId: F.id }), g();
 	}, [
-		h,
-		y,
-		P
-	]), ye = K(({ text: e, mentions: r }) => {
+		g,
+		b,
+		F
+	]), be = K(({ text: e, mentions: r }) => {
 		let a = e.trim();
 		i?.();
-		let o = C.flatMap((e) => e.status === "ready" ? [e.attachment] : []), { mentions: s, mentionedEveryone: c } = wP(r);
-		N && n ? (n(N.id, {
+		let o = w.flatMap((e) => e.status === "ready" ? [e.attachment] : []), { mentions: s, mentionedEveryone: c } = wP(r);
+		P && n ? (n(P.id, {
 			body: a,
 			attachments: o.length > 0 ? o : void 0,
 			mentions: s.length > 0 ? s : void 0,
 			mentionedEveryone: c || void 0
-		}), h()) : (tl(u.id), R.noteSent(), t({
+		}), g()) : (tl(d.id), ae.noteSent(), t({
 			body: a,
 			attachments: o.length > 0 ? o : void 0,
-			replyToId: P?.id,
+			replyToId: F?.id,
 			mentions: s.length > 0 ? s : void 0,
 			mentionedEveryone: c || void 0
-		}), w([]), h());
+		}), T([]), g());
 	}, [
-		C,
-		u.id,
-		P,
+		w,
+		d.id,
+		F,
 		t,
-		h,
+		g,
 		i,
-		N,
+		P,
 		n,
-		R
-	]), be = K((e) => m.kind !== "none" && (e.preventDefault(), M ? _e() : ve(), !0), [
-		m.kind,
-		M,
-		_e,
-		ve
-	]), xe = K(() => C.length === 0 && m.kind === "none" && _(), [
-		C.length,
-		m.kind,
-		_
-	]), Se = K((e) => {
-		S.current?.insertText(e), y.onEmojiInserted({
+		ae
+	]), xe = K((e) => h.kind !== "none" && (e.preventDefault(), N ? ve() : ye(), !0), [
+		h.kind,
+		N,
+		ve,
+		ye
+	]), Se = K(() => w.length === 0 && h.kind === "none" && v(), [
+		w.length,
+		h.kind,
+		v
+	]), Ce = K((e) => {
+		C.current?.insertText(e), b.onEmojiInserted({
 			emoji: e,
 			source: "picker"
 		});
-	}, [y]), Ce = {
-		duration: x ? 0 : .18,
+	}, [b]), we = {
+		duration: S ? 0 : .18,
 		ease: Ga
-	}, we = /* @__PURE__ */ Q(jn, {
+	}, Te = /* @__PURE__ */ Q(jn, {
 		initial: !1,
 		mode: "popLayout",
-		children: M && N ? /* @__PURE__ */ Q(V.div, {
+		children: N && P ? /* @__PURE__ */ Q(V.div, {
 			className: "overflow-hidden",
 			initial: {
 				height: 0,
@@ -20421,12 +20422,12 @@ var MP = {
 				height: 0,
 				opacity: 0
 			},
-			transition: Ce,
+			transition: we,
 			children: /* @__PURE__ */ Q(hP, {
-				message: N,
-				onRemove: _e
+				message: P,
+				onRemove: ve
 			})
-		}, "edit-chip") : P ? /* @__PURE__ */ Q(V.div, {
+		}, "edit-chip") : F ? /* @__PURE__ */ Q(V.div, {
 			className: "overflow-hidden",
 			initial: {
 				height: 0,
@@ -20440,33 +20441,33 @@ var MP = {
 				height: 0,
 				opacity: 0
 			},
-			transition: Ce,
+			transition: we,
 			children: /* @__PURE__ */ Q(gP, {
-				message: P,
-				onRemove: ve
+				message: F,
+				onRemove: ye
 			})
 		}, "reply-chip") : null
-	}), Te = /* @__PURE__ */ Q(ui, {
-		items: ce.map((e) => ({
+	}), Ee = /* @__PURE__ */ Q(ui, {
+		items: le.map((e) => ({
 			id: e.id,
 			content: /* @__PURE__ */ Q(mP, {
 				attachment: e.attachment,
 				uploading: e.status === "uploading",
-				onRemove: () => de(e.id)
+				onRemove: () => fe(e.id)
 			})
 		})),
-		label: e.t(C.length === 1 ? "chat.attachmentCount.one" : "chat.attachmentCount.other", { count: C.length }),
-		busy: se,
-		reducedMotion: x,
-		stripRef: E
-	}), Ee = (t) => /* @__PURE__ */ $(Z, { children: [
+		label: e.t(w.length === 1 ? "chat.attachmentCount.one" : "chat.attachmentCount.other", { count: w.length }),
+		busy: ce,
+		reducedMotion: S,
+		stripRef: D
+	}), De = (t) => /* @__PURE__ */ $(Z, { children: [
 		/* @__PURE__ */ Q("input", {
-			ref: T,
+			ref: E,
 			type: "file",
 			multiple: !0,
 			className: "hidden",
 			onChange: (e) => {
-				ue(Array.from(e.target.files ?? []), "button"), e.target.value = "";
+				de(Array.from(e.target.files ?? []), "button"), e.target.value = "";
 			}
 		}),
 		/* @__PURE__ */ Q(er, {
@@ -20476,51 +20477,51 @@ var MP = {
 			hideLabel: !0,
 			label: e.chat.attachFile,
 			icon: _r,
-			onClick: () => T.current?.click(),
-			disabled: !p || t === "transcribing"
+			onClick: () => E.current?.click(),
+			disabled: !m || t === "transcribing"
 		}),
 		/* @__PURE__ */ Q(Hv, {
 			variant: "outline",
 			size: "md",
 			label: e.chat.addEmoji,
-			onSelect: Se
+			onSelect: Ce
 		})
-	] }), De = l === void 0 ? void 0 : e.chat.messageTooLongError.replace("{{maxCharacters}}", l.toLocaleString());
+	] }), Oe = u === void 0 ? void 0 : e.chat.messageTooLongError.replace("{{maxCharacters}}", u.toLocaleString());
 	return {
-		handleRef: S,
+		handleRef: C,
 		"data-testid": "chat-composer-surface",
-		onSend: ye,
-		sendKind: M ? "save" : "send",
-		hasAttachments: C.length > 0,
-		sendBlocked: se || I,
-		maxLength: l,
-		maxLengthError: De,
-		error: k,
+		onSend: be,
+		sendKind: N ? "save" : "send",
+		hasAttachments: w.length > 0,
+		sendBlocked: ce || ee,
+		maxLength: u,
+		maxLengthError: Oe,
+		error: A,
 		labels: { mentionPinnedDescription: e.chat.mentionEveryoneDescription },
 		mentions: {
-			...L,
-			scopeKey: u.id
+			...ie,
+			scopeKey: d.id
 		},
 		autocomplete: MP,
 		voice: {
 			onTranscribe: o,
-			onAudio: F ? (e, t) => void re(e, t) : void 0,
-			disabled: BP(M, F),
-			busy: I,
-			onStarted: y.onVoiceRecordingStarted,
-			onCancelled: y.onVoiceRecordingCancelled
+			onAudio: I ? (e, t) => void L(e, t) : void 0,
+			disabled: BP(N, I),
+			busy: ee,
+			onStarted: b.onVoiceRecordingStarted,
+			onCancelled: b.onVoiceRecordingCancelled
 		},
-		onTextChange: ae,
+		onTextChange: oe,
 		onCleared: () => {
-			i?.(), R.noteTextChange();
+			i?.(), ae.noteTextChange();
 		},
-		onEscape: be,
-		onArrowUpWhenEmpty: xe,
-		onPasteFiles: p ? pe : void 0,
-		header: we,
-		tray: Te,
-		toolbarStart: Ee,
-		reducedMotion: x
+		onEscape: xe,
+		onArrowUpWhenEmpty: Se,
+		onPasteFiles: m ? me : void 0,
+		header: Te,
+		tray: Ee,
+		toolbarStart: De,
+		reducedMotion: S
 	};
 }, HP = (e) => e.dataTransfer?.types?.includes("Files"), UP = () => {
 	let { dropFiles: e } = yO(), t = Y(0), [n, r] = X(!1), i = K((e) => HP(e) ? (e.preventDefault(), e.stopPropagation(), !0) : !1, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react",
-  "version": "12.3.0",
+  "version": "12.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/factorialco/f0.git",