@signalflare-ai/ui 0.5.0 → 1.0.0

package/dist/ai-prompt-input-Dy1LfxPk.js

@@ -0,0 +1,1541 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { t as Button } from "./button-De0267YU.js";
+import { t as InputGroup } from "./input-DddtBN-g.js";
+import { Fragment, createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, ArrowsClockwiseIcon, CaretDownIcon, CheckIcon, FileIcon, FileTextIcon, ImageIcon, MicrophoneIcon, PaperclipIcon, PlusIcon, SpinnerGapIcon, SquareIcon, XIcon } from "@phosphor-icons/react";
+import { Menu } from "@base-ui/react/menu";
+import { Select } from "@base-ui/react/select";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
+//#region ../../node_modules/.bun/@tanstack+store@0.11.0/node_modules/@tanstack/store/dist/alien.js
+var ReactiveFlags = /* @__PURE__ */ function(ReactiveFlags) {
+	ReactiveFlags[ReactiveFlags["None"] = 0] = "None";
+	ReactiveFlags[ReactiveFlags["Mutable"] = 1] = "Mutable";
+	ReactiveFlags[ReactiveFlags["Watching"] = 2] = "Watching";
+	ReactiveFlags[ReactiveFlags["RecursedCheck"] = 4] = "RecursedCheck";
+	ReactiveFlags[ReactiveFlags["Recursed"] = 8] = "Recursed";
+	ReactiveFlags[ReactiveFlags["Dirty"] = 16] = "Dirty";
+	ReactiveFlags[ReactiveFlags["Pending"] = 32] = "Pending";
+	return ReactiveFlags;
+}({});
+/* @__NO_SIDE_EFFECTS__ */
+function createReactiveSystem({ update, notify, unwatched }) {
+	return {
+		link,
+		unlink,
+		propagate,
+		checkDirty,
+		shallowPropagate
+	};
+	function link(dep, sub, version) {
+		const prevDep = sub.depsTail;
+		if (prevDep !== void 0 && prevDep.dep === dep) return;
+		const nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
+		if (nextDep !== void 0 && nextDep.dep === dep) {
+			nextDep.version = version;
+			sub.depsTail = nextDep;
+			return;
+		}
+		const prevSub = dep.subsTail;
+		if (prevSub !== void 0 && prevSub.version === version && prevSub.sub === sub) return;
+		const newLink = sub.depsTail = dep.subsTail = {
+			version,
+			dep,
+			sub,
+			prevDep,
+			nextDep,
+			prevSub,
+			nextSub: void 0
+		};
+		if (nextDep !== void 0) nextDep.prevDep = newLink;
+		if (prevDep !== void 0) prevDep.nextDep = newLink;
+		else sub.deps = newLink;
+		if (prevSub !== void 0) prevSub.nextSub = newLink;
+		else dep.subs = newLink;
+	}
+	function unlink(link, sub = link.sub) {
+		const dep = link.dep;
+		const prevDep = link.prevDep;
+		const nextDep = link.nextDep;
+		const nextSub = link.nextSub;
+		const prevSub = link.prevSub;
+		if (nextDep !== void 0) nextDep.prevDep = prevDep;
+		else sub.depsTail = prevDep;
+		if (prevDep !== void 0) prevDep.nextDep = nextDep;
+		else sub.deps = nextDep;
+		if (nextSub !== void 0) nextSub.prevSub = prevSub;
+		else dep.subsTail = prevSub;
+		if (prevSub !== void 0) prevSub.nextSub = nextSub;
+		else if ((dep.subs = nextSub) === void 0) unwatched(dep);
+		return nextDep;
+	}
+	function propagate(link) {
+		let next = link.nextSub;
+		let stack;
+		top: do {
+			const sub = link.sub;
+			let flags = sub.flags;
+			if (!(flags & (ReactiveFlags.RecursedCheck | ReactiveFlags.Recursed | ReactiveFlags.Dirty | ReactiveFlags.Pending))) sub.flags = flags | ReactiveFlags.Pending;
+			else if (!(flags & (ReactiveFlags.RecursedCheck | ReactiveFlags.Recursed))) flags = ReactiveFlags.None;
+			else if (!(flags & ReactiveFlags.RecursedCheck)) sub.flags = flags & ~ReactiveFlags.Recursed | ReactiveFlags.Pending;
+			else if (!(flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)) && isValidLink(link, sub)) {
+				sub.flags = flags | (ReactiveFlags.Recursed | ReactiveFlags.Pending);
+				flags &= ReactiveFlags.Mutable;
+			} else flags = ReactiveFlags.None;
+			if (flags & ReactiveFlags.Watching) notify(sub);
+			if (flags & ReactiveFlags.Mutable) {
+				const subSubs = sub.subs;
+				if (subSubs !== void 0) {
+					const nextSub = (link = subSubs).nextSub;
+					if (nextSub !== void 0) {
+						stack = {
+							value: next,
+							prev: stack
+						};
+						next = nextSub;
+					}
+					continue;
+				}
+			}
+			if ((link = next) !== void 0) {
+				next = link.nextSub;
+				continue;
+			}
+			while (stack !== void 0) {
+				link = stack.value;
+				stack = stack.prev;
+				if (link !== void 0) {
+					next = link.nextSub;
+					continue top;
+				}
+			}
+			break;
+		} while (true);
+	}
+	function checkDirty(link, sub) {
+		let stack;
+		let checkDepth = 0;
+		let dirty = false;
+		top: do {
+			const dep = link.dep;
+			const flags = dep.flags;
+			if (sub.flags & ReactiveFlags.Dirty) dirty = true;
+			else if ((flags & (ReactiveFlags.Mutable | ReactiveFlags.Dirty)) === (ReactiveFlags.Mutable | ReactiveFlags.Dirty)) {
+				if (update(dep)) {
+					const subs = dep.subs;
+					if (subs.nextSub !== void 0) shallowPropagate(subs);
+					dirty = true;
+				}
+			} else if ((flags & (ReactiveFlags.Mutable | ReactiveFlags.Pending)) === (ReactiveFlags.Mutable | ReactiveFlags.Pending)) {
+				if (link.nextSub !== void 0 || link.prevSub !== void 0) stack = {
+					value: link,
+					prev: stack
+				};
+				link = dep.deps;
+				sub = dep;
+				++checkDepth;
+				continue;
+			}
+			if (!dirty) {
+				const nextDep = link.nextDep;
+				if (nextDep !== void 0) {
+					link = nextDep;
+					continue;
+				}
+			}
+			while (checkDepth--) {
+				const firstSub = sub.subs;
+				const hasMultipleSubs = firstSub.nextSub !== void 0;
+				if (hasMultipleSubs) {
+					link = stack.value;
+					stack = stack.prev;
+				} else link = firstSub;
+				if (dirty) {
+					if (update(sub)) {
+						if (hasMultipleSubs) shallowPropagate(firstSub);
+						sub = link.sub;
+						continue;
+					}
+					dirty = false;
+				} else sub.flags &= ~ReactiveFlags.Pending;
+				sub = link.sub;
+				const nextDep = link.nextDep;
+				if (nextDep !== void 0) {
+					link = nextDep;
+					continue top;
+				}
+			}
+			return dirty;
+		} while (true);
+	}
+	function shallowPropagate(link) {
+		do {
+			const sub = link.sub;
+			const flags = sub.flags;
+			if ((flags & (ReactiveFlags.Pending | ReactiveFlags.Dirty)) === ReactiveFlags.Pending) {
+				sub.flags = flags | ReactiveFlags.Dirty;
+				if ((flags & (ReactiveFlags.Watching | ReactiveFlags.RecursedCheck)) === ReactiveFlags.Watching) notify(sub);
+			}
+		} while ((link = link.nextSub) !== void 0);
+	}
+	function isValidLink(checkLink, sub) {
+		let link = sub.depsTail;
+		while (link !== void 0) {
+			if (link === checkLink) return true;
+			link = link.prevDep;
+		}
+		return false;
+	}
+}
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+store@0.11.0/node_modules/@tanstack/store/dist/atom.js
+function toObserver(nextHandler, errorHandler, completionHandler) {
+	const isObserver = typeof nextHandler === "object";
+	const self = isObserver ? nextHandler : void 0;
+	return {
+		next: (isObserver ? nextHandler.next : nextHandler)?.bind(self),
+		error: (isObserver ? nextHandler.error : errorHandler)?.bind(self),
+		complete: (isObserver ? nextHandler.complete : completionHandler)?.bind(self)
+	};
+}
+var queuedEffects = [];
+var cycle = 0;
+var { link, unlink, propagate, checkDirty, shallowPropagate } = /* @__PURE__ */ createReactiveSystem({
+	update(atom) {
+		return atom._update();
+	},
+	notify(effect) {
+		queuedEffects[queuedEffectsLength++] = effect;
+		effect.flags &= ~ReactiveFlags.Watching;
+	},
+	unwatched(atom) {
+		if (atom.depsTail !== void 0) {
+			atom.depsTail = void 0;
+			atom.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
+			purgeDeps(atom);
+		}
+	}
+});
+var notifyIndex = 0;
+var queuedEffectsLength = 0;
+var activeSub;
+var batchDepth = 0;
+function purgeDeps(sub) {
+	const depsTail = sub.depsTail;
+	let dep = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
+	while (dep !== void 0) dep = unlink(dep, sub);
+}
+function flush() {
+	if (batchDepth > 0) return;
+	while (notifyIndex < queuedEffectsLength) {
+		const effect = queuedEffects[notifyIndex];
+		queuedEffects[notifyIndex++] = void 0;
+		effect.notify();
+	}
+	notifyIndex = 0;
+	queuedEffectsLength = 0;
+}
+function createAtom(valueOrFn, options) {
+	const isComputed = typeof valueOrFn === "function";
+	const getter = valueOrFn;
+	const atom = {
+		_snapshot: isComputed ? void 0 : valueOrFn,
+		subs: void 0,
+		subsTail: void 0,
+		deps: void 0,
+		depsTail: void 0,
+		flags: isComputed ? ReactiveFlags.None : ReactiveFlags.Mutable,
+		get() {
+			if (activeSub !== void 0) link(atom, activeSub, cycle);
+			return atom._snapshot;
+		},
+		subscribe(observerOrFn) {
+			const obs = toObserver(observerOrFn);
+			const observed = { current: false };
+			const e = effect(() => {
+				atom.get();
+				if (!observed.current) observed.current = true;
+				else obs.next?.(atom._snapshot);
+			});
+			return { unsubscribe: () => {
+				e.stop();
+			} };
+		},
+		_update(getValue) {
+			const prevSub = activeSub;
+			const compare = options?.compare ?? Object.is;
+			if (isComputed) {
+				activeSub = atom;
+				++cycle;
+				atom.depsTail = void 0;
+			} else if (getValue === void 0) return false;
+			if (isComputed) atom.flags = ReactiveFlags.Mutable | ReactiveFlags.RecursedCheck;
+			try {
+				const oldValue = atom._snapshot;
+				const newValue = typeof getValue === "function" ? getValue(oldValue) : getValue === void 0 && isComputed ? getter(oldValue) : getValue;
+				if (oldValue === void 0 || !compare(oldValue, newValue)) {
+					atom._snapshot = newValue;
+					return true;
+				}
+				return false;
+			} finally {
+				activeSub = prevSub;
+				if (isComputed) atom.flags &= ~ReactiveFlags.RecursedCheck;
+				purgeDeps(atom);
+			}
+		}
+	};
+	if (isComputed) {
+		atom.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
+		atom.get = function() {
+			const flags = atom.flags;
+			if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && checkDirty(atom.deps, atom)) {
+				if (atom._update()) {
+					const subs = atom.subs;
+					if (subs !== void 0) shallowPropagate(subs);
+				}
+			} else if (flags & ReactiveFlags.Pending) atom.flags = flags & ~ReactiveFlags.Pending;
+			if (activeSub !== void 0) link(atom, activeSub, cycle);
+			return atom._snapshot;
+		};
+	} else atom.set = function(valueOrFn) {
+		if (atom._update(valueOrFn)) {
+			const subs = atom.subs;
+			if (subs !== void 0) {
+				propagate(subs);
+				shallowPropagate(subs);
+				flush();
+			}
+		}
+	};
+	return atom;
+}
+function effect(fn) {
+	const run = () => {
+		const prevSub = activeSub;
+		activeSub = effectObj;
+		++cycle;
+		effectObj.depsTail = void 0;
+		effectObj.flags = ReactiveFlags.Watching | ReactiveFlags.RecursedCheck;
+		try {
+			return fn();
+		} finally {
+			activeSub = prevSub;
+			effectObj.flags &= ~ReactiveFlags.RecursedCheck;
+			purgeDeps(effectObj);
+		}
+	};
+	const effectObj = {
+		deps: void 0,
+		depsTail: void 0,
+		subs: void 0,
+		subsTail: void 0,
+		flags: ReactiveFlags.Watching | ReactiveFlags.RecursedCheck,
+		notify() {
+			const flags = this.flags;
+			if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && checkDirty(this.deps, this)) run();
+			else this.flags = ReactiveFlags.Watching;
+		},
+		stop() {
+			this.flags = ReactiveFlags.None;
+			this.depsTail = void 0;
+			purgeDeps(this);
+		}
+	};
+	run();
+	return effectObj;
+}
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+store@0.11.0/node_modules/@tanstack/store/dist/store.js
+var Store = class {
+	constructor(valueOrFn, actionsFactory) {
+		this.atom = createAtom(valueOrFn);
+		this.get = this.get.bind(this);
+		this.setState = this.setState.bind(this);
+		this.subscribe = this.subscribe.bind(this);
+		if (actionsFactory) this.actions = actionsFactory(this);
+	}
+	setState(updater) {
+		this.atom.set(updater);
+	}
+	get state() {
+		return this.atom.get();
+	}
+	get() {
+		return this.state;
+	}
+	subscribe(observerOrFn) {
+		return this.atom.subscribe(toObserver(observerOrFn));
+	}
+};
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+react-store@0.11.0+21ccd8898788a04d/node_modules/@tanstack/react-store/dist/useSelector.js
+function defaultCompare(a, b) {
+	return a === b;
+}
+/**
+* Selects a slice of state from an atom or store and subscribes the component
+* to that selection.
+*
+* This is the primary React read hook for TanStack Store. It works with any
+* source that exposes `get()` and `subscribe()`, including atoms, readonly
+* atoms, stores, and readonly stores.
+*
+* Omit the selector to subscribe to the whole value.
+*
+* @example
+* ```tsx
+* const count = useSelector(counterStore, (state) => state.count)
+* ```
+*
+* @example
+* ```tsx
+* const value = useSelector(countAtom)
+* ```
+*/
+function useSelector(source, selector = (s) => s, options) {
+	const compare = options?.compare ?? defaultCompare;
+	const subscribe = useCallback((handleStoreChange) => {
+		const { unsubscribe } = source.subscribe(handleStoreChange);
+		return unsubscribe;
+	}, [source]);
+	const getSnapshot = useCallback(() => source.get(), [source]);
+	return useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, selector, compare);
+}
+//#endregion
+//#region ../../node_modules/.bun/@tanstack+react-store@0.11.0+21ccd8898788a04d/node_modules/@tanstack/react-store/dist/useStore.js
+/**
+* Deprecated alias for {@link useSelector}.
+*
+* @example
+* ```tsx
+* const count = useStore(counterStore, (state) => state.count)
+* ```
+*
+* @deprecated Use `useSelector` instead.
+*/
+var useStore = (source, selector = (s) => s, compare) => useSelector(source, selector, { compare });
+//#endregion
+//#region src/components/ai-prompt-input/controller.ts
+/**
+* PromptInputController — the single source of truth for a prompt input tree.
+*
+* Built on @tanstack/store for per-slice subscriptions (sub-components
+* re-render only when the fields they read change). The controller exposes
+* two stores:
+*
+* - `request` : outbound state (text, files, mode, model, …extensions). The
+*   user edits these; `submit()` ships them to `onSubmit`.
+* - `display` : inbound state (sendStatus, tasks, pendingQuestion, pendingPlan,
+*   usage). The harness writes these in; sub-components read them.
+*
+* Consumers never touch the stores directly. They use:
+*
+*   const mode = useRequestField('mode');           // read
+*   const setMode = useSetRequestField('mode');     // write
+*   const status = useDisplayField('sendStatus');   // read
+*
+* Or, for advanced use, subscribe to the whole store with
+* `useStore(controller.request)`.
+*/
+var DEFAULT_REQUEST = {
+	text: "",
+	files: []
+};
+var DEFAULT_DISPLAY = { sendStatus: "idle" };
+function createPromptInputRequestController(options = {}) {
+	const request = new Store({
+		...DEFAULT_REQUEST,
+		...options.initialRequest
+	});
+	const display = new Store({
+		...DEFAULT_DISPLAY,
+		...options.initialDisplay
+	});
+	return {
+		request,
+		display,
+		setRequestField(key, value) {
+			request.setState((prev) => ({
+				...prev,
+				[key]: value
+			}));
+		},
+		setDisplayField(key, value) {
+			display.setState((prev) => ({
+				...prev,
+				[key]: value
+			}));
+		},
+		addAttachments(files) {
+			request.setState((prev) => ({
+				...prev,
+				files: [...prev.files, ...files]
+			}));
+		},
+		removeAttachment(id) {
+			request.setState((prev) => {
+				const removed = prev.files.find((f) => f.id === id);
+				if (removed?.url.startsWith("blob:")) URL.revokeObjectURL(removed.url);
+				return {
+					...prev,
+					files: prev.files.filter((f) => f.id !== id)
+				};
+			});
+		},
+		clearAttachments() {
+			request.setState((prev) => {
+				for (const f of prev.files) if (f.url.startsWith("blob:")) URL.revokeObjectURL(f.url);
+				return {
+					...prev,
+					files: []
+				};
+			});
+		},
+		resetRequest() {
+			request.setState((prev) => {
+				for (const f of prev.files) if (f.url.startsWith("blob:")) URL.revokeObjectURL(f.url);
+				return {
+					...prev,
+					text: "",
+					files: []
+				};
+			});
+		},
+		snapshot() {
+			return request.state;
+		}
+	};
+}
+var PromptInputRequestControllerContext = createContext(null);
+var PromptInputRequestControllerProvider = PromptInputRequestControllerContext.Provider;
+function usePromptInputRequestController() {
+	const ctx = useContext(PromptInputRequestControllerContext);
+	if (!ctx) throw new Error("usePromptInputRequestController must be used inside <PromptInput> or <PromptInputRequestProvider>");
+	return ctx;
+}
+/** Optional variant — returns null if no controller is in context. */
+function useOptionalPromptInputRequestController() {
+	return useContext(PromptInputRequestControllerContext);
+}
+/**
+* Subscribe to one field of the request context. Component re-renders only
+* when that field changes.
+*/
+function useRequestField(key) {
+	return useStore(usePromptInputRequestController().request, (state) => state[key]);
+}
+/** Returns a stable setter for one field of the request context. */
+function useSetRequestField(key) {
+	const ctrl = usePromptInputRequestController();
+	return useMemo(() => (value) => {
+		ctrl.setRequestField(key, value);
+	}, [ctrl, key]);
+}
+/**
+* Subscribe to one field of the display context. Component re-renders only
+* when that field changes.
+*/
+function useDisplayField(key) {
+	return useStore(usePromptInputRequestController().display, (state) => state[key]);
+}
+//#endregion
+//#region src/components/ai-prompt-input/ai-prompt-input.tsx
+var FALLBACK_REQUEST_STORE = new Store({});
+var SF_AI_PROMPT_INPUT_VARIANTS = { status: {
+	idle: {
+		classes: "",
+		description: "Ready to accept input"
+	},
+	submitted: {
+		classes: "",
+		description: "Waiting for response (shows spinner)"
+	},
+	streaming: {
+		classes: "",
+		description: "Streaming response (shows stop)"
+	},
+	error: {
+		classes: "",
+		description: "Error state (shows X)"
+	}
+} };
+var SF_AI_PROMPT_INPUT_DEFAULT_VARIANTS = { status: "idle" };
+var PromptInputContext = createContext(null);
+var ProviderAttachmentsContext = createContext(null);
+var usePromptInputController = () => {
+	const ctx = useContext(PromptInputContext);
+	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
+	return ctx;
+};
+var useOptionalPromptInputController = () => useContext(PromptInputContext);
+var useProviderAttachments = () => {
+	const ctx = useContext(ProviderAttachmentsContext);
+	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use useProviderAttachments().");
+	return ctx;
+};
+var useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext);
+/**
+* Optional global provider that lifts PromptInput state outside of PromptInput.
+* If you don't use it, PromptInput stays fully self-managed.
+*
+* @example
+* ```tsx
+* <PromptInputProvider>
+*   <PromptInput onSubmit={handleSubmit}>...</PromptInput>
+* </PromptInputProvider>
+* ```
+*/
+function PromptInputProvider({ initialInput = "", children }) {
+	const [textInput, setTextInput] = useState(initialInput);
+	const clearInput = useCallback(() => setTextInput(""), []);
+	const [attachmentItems, setAttachmentItems] = useState([]);
+	const fileInputRef = useRef(null);
+	const openRef = useRef(() => {});
+	const add = useCallback((files) => {
+		const incoming = Array.from(files);
+		if (incoming.length === 0) return;
+		setAttachmentItems((prev) => prev.concat(incoming.map((file) => ({
+			id: `${Date.now()}-${Math.random()}`,
+			url: URL.createObjectURL(file),
+			mediaType: file.type,
+			filename: file.name
+		}))));
+	}, []);
+	const remove = useCallback((id) => {
+		setAttachmentItems((prev) => {
+			const found = prev.find((f) => f.id === id);
+			if (found?.url) URL.revokeObjectURL(found.url);
+			return prev.filter((f) => f.id !== id);
+		});
+	}, []);
+	const clear = useCallback(() => {
+		setAttachmentItems((prev) => {
+			for (const f of prev) if (f.url) URL.revokeObjectURL(f.url);
+			return [];
+		});
+	}, []);
+	const openFileDialog = useCallback(() => {
+		openRef.current?.();
+	}, []);
+	const attachments = useMemo(() => ({
+		files: attachmentItems,
+		add,
+		remove,
+		clear,
+		openFileDialog,
+		fileInputRef
+	}), [
+		attachmentItems,
+		add,
+		remove,
+		clear,
+		openFileDialog
+	]);
+	const __registerFileInput = useCallback((ref, open) => {
+		fileInputRef.current = ref.current;
+		openRef.current = open;
+	}, []);
+	const controller = useMemo(() => ({
+		textInput: {
+			value: textInput,
+			setInput: setTextInput,
+			clear: clearInput
+		},
+		attachments,
+		__registerFileInput
+	}), [
+		textInput,
+		clearInput,
+		attachments,
+		__registerFileInput
+	]);
+	return /* @__PURE__ */ jsx(PromptInputContext.Provider, {
+		value: controller,
+		children: /* @__PURE__ */ jsx(ProviderAttachmentsContext.Provider, {
+			value: attachments,
+			children
+		})
+	});
+}
+var LocalAttachmentsContext = createContext(null);
+var usePromptInputAttachments = () => {
+	const provider = useOptionalProviderAttachments();
+	const local = useContext(LocalAttachmentsContext);
+	const context = provider ?? local;
+	if (!context) throw new Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider");
+	return context;
+};
+/** Convert a blob URL to a base64 data URL for serialization. */
+async function convertBlobToDataUrl(url) {
+	const blob = await (await fetch(url)).blob();
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.addEventListener("loadend", () => resolve(reader.result));
+		reader.addEventListener("error", () => reject(/* @__PURE__ */ new Error("FileReader error")));
+		reader.readAsDataURL(blob);
+	});
+}
+function makeAttachmentId() {
+	return `${Date.now()}-${Math.random()}`;
+}
+/**
+* Prompt input form. Can be self-managed or controlled via `PromptInputProvider`.
+*
+* @example
+* ```tsx
+* <PromptInput onSubmit={({ text, files }) => send(text, files)}>
+*   <PromptInputAttachments>{(f) => <PromptInputAttachment data={f} />}</PromptInputAttachments>
+*   <PromptInputTextarea placeholder="Ask anything…" />
+*   <PromptInputToolbar>
+*     <PromptInputTools>
+*       <PromptInputAttachButton />
+*     </PromptInputTools>
+*     <PromptInputSubmit />
+*   </PromptInputToolbar>
+* </PromptInput>
+* ```
+*/
+var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileSize, onError, onSubmit, children, backLayer, backLayerTitle = "Context", backLayerOpen, onBackLayerOpenChange, autoOpenBackLayerWhen, ...props }) => {
+	const hasBackLayer = backLayer !== void 0;
+	const controller = useOptionalPromptInputController();
+	const usingProvider = !!controller;
+	const inputRef = useRef(null);
+	const anchorRef = useRef(null);
+	const formRef = useRef(null);
+	useEffect(() => {
+		const root = anchorRef.current?.closest("form");
+		if (root instanceof HTMLFormElement) formRef.current = root;
+	}, []);
+	useEffect(() => {
+		if (autoOpenBackLayerWhen) onBackLayerOpenChange?.(true);
+	}, [autoOpenBackLayerWhen, onBackLayerOpenChange]);
+	const [items, setItems] = useState([]);
+	const files = usingProvider ? controller.attachments.files : items;
+	const openFileDialogLocal = useCallback(() => {
+		inputRef.current?.click();
+	}, []);
+	const matchesAccept = useCallback((f) => {
+		if (!accept || accept.trim() === "") return true;
+		if (accept.includes("image/*")) return f.type.startsWith("image/");
+		return true;
+	}, [accept]);
+	const addLocal = useCallback((fileList) => {
+		const incoming = Array.from(fileList);
+		const accepted = incoming.filter((f) => matchesAccept(f));
+		if (incoming.length && accepted.length === 0) {
+			onError?.({
+				code: "accept",
+				message: "No files match the accepted types."
+			});
+			return;
+		}
+		const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+		const sized = accepted.filter(withinSize);
+		if (accepted.length > 0 && sized.length === 0) {
+			onError?.({
+				code: "max_file_size",
+				message: "All files exceed the maximum size."
+			});
+			return;
+		}
+		setItems((prev) => {
+			const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : void 0;
+			const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+			if (typeof capacity === "number" && sized.length > capacity) onError?.({
+				code: "max_files",
+				message: "Too many files. Some were not added."
+			});
+			const next = capped.map((file) => ({
+				id: makeAttachmentId(),
+				url: URL.createObjectURL(file),
+				mediaType: file.type,
+				filename: file.name
+			}));
+			return prev.concat(next);
+		});
+	}, [
+		matchesAccept,
+		maxFiles,
+		maxFileSize,
+		onError
+	]);
+	const add = usingProvider ? (f) => controller.attachments.add(f) : addLocal;
+	const remove = usingProvider ? (id) => controller.attachments.remove(id) : (id) => setItems((prev) => {
+		const found = prev.find((f) => f.id === id);
+		if (found?.url) URL.revokeObjectURL(found.url);
+		return prev.filter((f) => f.id !== id);
+	});
+	const clear = usingProvider ? () => controller.attachments.clear() : () => setItems((prev) => {
+		for (const f of prev) if (f.url) URL.revokeObjectURL(f.url);
+		return [];
+	});
+	const openFileDialog = usingProvider ? () => controller.attachments.openFileDialog() : openFileDialogLocal;
+	useEffect(() => {
+		if (!usingProvider) return;
+		controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+	}, [usingProvider, controller]);
+	useEffect(() => {
+		const form = formRef.current;
+		if (!form) return;
+		const onDragOver = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+		};
+		const onDrop = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+			if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+		};
+		form.addEventListener("dragover", onDragOver);
+		form.addEventListener("drop", onDrop);
+		return () => {
+			form.removeEventListener("dragover", onDragOver);
+			form.removeEventListener("drop", onDrop);
+		};
+	}, [add]);
+	useEffect(() => {
+		if (!globalDrop) return;
+		const onDragOver = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+		};
+		const onDrop = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+			if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+		};
+		document.addEventListener("dragover", onDragOver);
+		document.addEventListener("drop", onDrop);
+		return () => {
+			document.removeEventListener("dragover", onDragOver);
+			document.removeEventListener("drop", onDrop);
+		};
+	}, [add, globalDrop]);
+	useEffect(() => {
+		return () => {
+			if (!usingProvider) {
+				for (const f of files) if (f.url) URL.revokeObjectURL(f.url);
+			}
+		};
+	}, [usingProvider, files]);
+	const handleFileInputChange = (event) => {
+		if (event.currentTarget.files) add(event.currentTarget.files);
+	};
+	const ctx = useMemo(() => ({
+		files,
+		add,
+		remove,
+		clear,
+		openFileDialog,
+		fileInputRef: inputRef
+	}), [
+		files,
+		add,
+		remove,
+		clear,
+		openFileDialog
+	]);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		const form = event.currentTarget;
+		const text = usingProvider ? controller.textInput.value : new FormData(form).get("message") || "";
+		if (!usingProvider) form.reset();
+		const doSubmit = async () => {
+			const convertedFiles = await Promise.all(files.map(async (item) => {
+				if (item.url.startsWith("blob:")) return {
+					...item,
+					url: await convertBlobToDataUrl(item.url)
+				};
+				return item;
+			}));
+			try {
+				await onSubmit({
+					text,
+					files: convertedFiles
+				}, event);
+				clear();
+				if (usingProvider) controller.textInput.clear();
+			} catch {}
+		};
+		doSubmit().catch(() => {});
+	};
+	const isBackLayerOpen = backLayerOpen ?? false;
+	const inputShell = hasBackLayer ? /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col rounded-xl bg-sf-elevated ring ring-sf-line/50",
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				"aria-expanded": isBackLayerOpen,
+				"aria-label": isBackLayerOpen ? "Collapse context" : "Expand context",
+				className: "flex w-full items-center justify-between gap-2 px-3 py-2 text-left",
+				onClick: () => onBackLayerOpenChange?.(!isBackLayerOpen),
+				type: "button",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-sf-subtle uppercase tracking-wide select-none",
+					children: backLayerTitle
+				}), /* @__PURE__ */ jsx(CaretDownIcon, { className: cn("size-3.5 text-sf-subtle transition-transform duration-200", isBackLayerOpen && "rotate-180") })]
+			}),
+			/* @__PURE__ */ jsx(PromptInputBackLayerPanel, {
+				open: isBackLayerOpen,
+				children: backLayer
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col overflow-hidden rounded-xl bg-sf-base ring ring-sf-line/50 focus-within:ring-sf-ring",
+				children
+			})
+		]
+	}) : /* @__PURE__ */ jsx(InputGroup, { children });
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "hidden",
+			ref: anchorRef
+		}),
+		/* @__PURE__ */ jsx("input", {
+			accept,
+			"aria-label": "Upload files",
+			className: "hidden",
+			multiple,
+			onChange: handleFileInputChange,
+			ref: inputRef,
+			type: "file"
+		}),
+		/* @__PURE__ */ jsx("form", {
+			className: cn("w-full", className),
+			onSubmit: handleSubmit,
+			...props,
+			children: inputShell
+		})
+	] });
+	return usingProvider ? inner : /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, {
+		value: ctx,
+		children: inner
+	});
+};
+var PromptInputBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("contents", className),
+	...props
+});
+function PromptInputBackLayerPanel({ open, children }) {
+	const isOpen = open ?? false;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": !isOpen,
+		className: "grid",
+		style: {
+			gridTemplateRows: isOpen ? "1fr" : "0fr",
+			opacity: isOpen ? 1 : 0,
+			transition: "grid-template-rows 200ms ease-out, opacity 200ms ease-out"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 overflow-hidden",
+			children
+		})
+	});
+}
+/**
+* Container for back-layer content (HITL approvals, task lists, agent status,
+* etc.). Pass instances of this as the `backLayer` prop on `PromptInput`.
+*
+* @example
+* ```tsx
+* <PromptInput
+*   onSubmit={handleSubmit}
+*   backLayer={<PromptInputBackLayer>...</PromptInputBackLayer>}
+*   backLayerOpen={open}
+*   onBackLayerOpenChange={setOpen}
+* >
+*   <PromptInputTextarea />
+*   <PromptInputToolbar>
+*     <PromptInputTools />
+*     <PromptInputSubmit />
+*   </PromptInputToolbar>
+* </PromptInput>
+* ```
+*/
+function PromptInputBackLayer({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2 px-3 py-2.5 text-sm text-sf-default", className),
+		children
+	});
+}
+var handleTextareaKeyDown = (e) => {
+	if (e.key === "Enter") {
+		if (e.nativeEvent.isComposing) return;
+		if (e.shiftKey) return;
+		e.preventDefault();
+		e.currentTarget.form?.requestSubmit();
+	}
+};
+/**
+* Auto-resizing textarea for the prompt. Submits on Enter (Shift+Enter for newline).
+* Pastes files into attachments.
+*/
+var PromptInputTextarea = ({ onChange, className, placeholder = "What would you like to know?", ...props }) => {
+	const controller = useOptionalPromptInputController();
+	const attachments = usePromptInputAttachments();
+	const handlePaste = (event) => {
+		const items = event.clipboardData?.items;
+		if (!items) return;
+		const pastedFiles = [];
+		for (const item of items) if (item.kind === "file") {
+			const file = item.getAsFile();
+			if (file) pastedFiles.push(file);
+		}
+		if (pastedFiles.length > 0) {
+			event.preventDefault();
+			attachments.add(pastedFiles);
+		}
+	};
+	const controlledProps = controller ? {
+		value: controller.textInput.value,
+		onChange: (e) => {
+			controller.textInput.setInput(e.currentTarget.value);
+			onChange?.(e);
+		}
+	} : { onChange };
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cn("field-sizing-content max-h-48 min-h-16 w-full resize-none border-0 bg-transparent px-3 py-2 text-sm text-sf-default outline-none placeholder:text-sf-inactive", className),
+		name: "message",
+		onKeyDown: handleTextareaKeyDown,
+		onPaste: handlePaste,
+		placeholder,
+		rows: 1,
+		...props,
+		...controlledProps
+	});
+};
+var PromptInputToolbar = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 items-center justify-between gap-1 px-2 py-1.5", className),
+	...props
+});
+var PromptInputTools = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 items-center gap-1", className),
+	...props
+});
+var PromptInputButton = ({ variant = "ghost", size = "sm", className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	className: cn("text-sf-subtle hover:text-sf-default", className),
+	size,
+	type: "button",
+	variant,
+	...props
+});
+/**
+* Submit button. Icon changes based on `status`:
+* - `idle` → send arrow
+* - `submitted` → spinner
+* - `streaming` → stop square
+* - `error` → X
+*/
+var PromptInputSubmit = ({ className, variant = "primary", size = "sm", status = "idle", children, ...props }) => {
+	let Icon;
+	if (status === "submitted") Icon = /* @__PURE__ */ jsx(SpinnerGapIcon, { className: "size-4 animate-spin" });
+	else if (status === "streaming") Icon = /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" });
+	else if (status === "error") Icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4" });
+	else Icon = /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4" });
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Submit",
+		className: cn(className),
+		size,
+		type: "submit",
+		variant,
+		...props,
+		children: children ?? Icon
+	});
+};
+var DropdownMenu = Menu;
+var PromptInputActionMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu.Root, { ...props });
+var PromptInputActionMenuTrigger = ({ className, children, "aria-label": ariaLabel = "More actions", ...props }) => /* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+	"aria-label": ariaLabel,
+	className: cn("text-sf-subtle hover:text-sf-default", className),
+	size: "sm",
+	type: "button",
+	variant: "ghost",
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+}) });
+var PromptInputActionMenuContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(DropdownMenu.Positioner, {
+	className: "z-50",
+	side: "top",
+	align: "start",
+	...props,
+	children: /* @__PURE__ */ jsx(DropdownMenu.Popup, {
+		className: cn("min-w-[160px] rounded-lg bg-sf-elevated p-1 shadow-md", "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity duration-100", className),
+		children
+	})
+});
+var PromptInputActionMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
+	className: cn("flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-sf-default outline-none", "data-highlighted:bg-sf-tint", className),
+	...props
+});
+var PromptInputActionAddAttachments = ({ label = "Add photos or files", ...props }) => {
+	const attachments = usePromptInputAttachments();
+	const handleSelect = useCallback(() => {
+		attachments.openFileDialog();
+	}, [attachments]);
+	return /* @__PURE__ */ jsxs(PromptInputActionMenuItem, {
+		...props,
+		onSelect: handleSelect,
+		children: [/* @__PURE__ */ jsx(ImageIcon, { className: "size-4" }), label]
+	});
+};
+var PromptInputModeSelector = ({ options, value: valueProp, onChange: onChangeProp, "aria-label": ariaLabel = "Select mode", className }) => {
+	const controller = useOptionalPromptInputRequestController();
+	const ctxMode = useStore(controller?.request ?? FALLBACK_REQUEST_STORE, (s) => s.mode);
+	if (options.length === 0) return null;
+	const isControlled = valueProp !== void 0 || onChangeProp !== void 0;
+	const value = isControlled ? valueProp : ctxMode;
+	const handleSelect = (next) => {
+		if (onChangeProp) {
+			onChangeProp(next);
+			return;
+		}
+		if (!isControlled && controller) controller.setRequestField("mode", next);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-0.5 rounded-md bg-sf-tint p-0.5", className),
+		role: "group",
+		"aria-label": ariaLabel,
+		children: options.map((opt) => {
+			const isSelected = opt.value === value;
+			return /* @__PURE__ */ jsxs("button", {
+				"aria-pressed": isSelected,
+				disabled: opt.disabled,
+				className: cn("flex cursor-pointer items-center gap-1 rounded-[4px] px-2 py-0.5 text-[11px] font-medium transition-colors", "disabled:cursor-not-allowed disabled:opacity-50", isSelected ? "bg-sf-elevated text-sf-default shadow-sm" : "text-sf-subtle hover:text-sf-default"),
+				onClick: () => handleSelect(opt.value),
+				title: opt.description,
+				type: "button",
+				children: [opt.icon, opt.label]
+			}, opt.value);
+		})
+	});
+};
+/**
+* Compact Select primitive sized for the PromptInput toolbar.
+*
+* - 24px-tall trigger with `text-[11px]` label and truncating value
+* - Matching compact popup with the same text scale
+*
+* Build toolbar-specific selectors (mode, model, voice, tone, ...) by
+* wrapping this and wiring `value`/`onChange` to your state source.
+*/
+var PromptInputCompactSelect = ({ options, value, onChange, placeholder = "Select", "aria-label": ariaLabel = "Select", maxWidth = 160, className }) => {
+	if (options.length === 0) return null;
+	const selected = options.find((o) => o.value === value);
+	const triggerMaxWidth = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		value: value ?? "",
+		onValueChange: (v) => {
+			if (typeof v === "string") onChange?.(v);
+		},
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			"aria-label": ariaLabel,
+			style: { maxWidth: triggerMaxWidth },
+			className: cn("flex h-6 min-w-0 shrink cursor-pointer items-center gap-1 rounded-[4px] px-2 text-[11px] leading-none font-medium text-sf-subtle transition-colors", "hover:text-sf-default focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sf-ring", className),
+			children: [/* @__PURE__ */ jsx(Select.Value, {
+				className: "min-w-0 truncate",
+				children: selected ? selected.label ?? selected.value : placeholder
+			}), /* @__PURE__ */ jsx(Select.Icon, {
+				className: "flex shrink-0 items-center",
+				children: /* @__PURE__ */ jsx(CaretDownIcon, { className: "size-3" })
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				className: cn("overflow-hidden rounded-lg bg-sf-control p-1 text-[11px] text-sf-default shadow-lg ring ring-sf-line", "min-w-[calc(var(--anchor-width)+3px)]"),
+				children: options.map((opt) => /* @__PURE__ */ jsxs(Select.Item, {
+					value: opt.value,
+					disabled: opt.disabled,
+					className: cn("flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 text-[11px] leading-tight outline-none", "data-[highlighted]:bg-sf-tint data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"),
+					children: [/* @__PURE__ */ jsx(Select.ItemText, { children: opt.label ?? opt.value }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }) })]
+				}, opt.value))
+			})
+		}) })]
+	});
+};
+function getModelLabel(option) {
+	if (option.label) return option.label;
+	return option.value.split("/").pop() ?? option.value;
+}
+/**
+* Compact model selector for the PromptInput toolbar.
+*
+* - Controlled: pass `value` + `onChange`.
+* - Controller-bound: omit both and wrap in `PromptInputRequestControllerProvider`
+*   — the selector reads/writes `requestContext.model` automatically.
+*/
+var PromptInputModelSelect = ({ options, value: valueProp, onChange: onChangeProp, "aria-label": ariaLabel = "Select model", className }) => {
+	const controller = useOptionalPromptInputRequestController();
+	const ctxModel = useStore(controller?.request ?? FALLBACK_REQUEST_STORE, (s) => s.model);
+	const isControlled = valueProp !== void 0 || onChangeProp !== void 0;
+	const value = isControlled ? valueProp : ctxModel;
+	const handleChange = (next) => {
+		if (onChangeProp) {
+			onChangeProp(next);
+			return;
+		}
+		if (!isControlled && controller) controller.setRequestField("model", next);
+	};
+	return /* @__PURE__ */ jsx(PromptInputCompactSelect, {
+		options: options.map((o) => ({
+			value: o.value,
+			label: getModelLabel(o),
+			disabled: o.disabled
+		})),
+		value,
+		onChange: handleChange,
+		placeholder: "Select model",
+		"aria-label": ariaLabel,
+		className
+	});
+};
+/**
+* Compact mode selector for the PromptInput toolbar — matches
+* `PromptInputModelSelect` visually. For a segmented button-group look
+* (multi-mode headers, empty states), use `PromptInputModeSelector` instead.
+*
+* - Controlled: pass `value` + `onChange`.
+* - Controller-bound: omit both and wrap in `PromptInputRequestControllerProvider`
+*   — the selector reads/writes `requestContext.mode` automatically.
+*/
+var PromptInputModeSelect = ({ options, value: valueProp, onChange: onChangeProp, "aria-label": ariaLabel = "Select mode", className }) => {
+	const controller = useOptionalPromptInputRequestController();
+	const ctxMode = useStore(controller?.request ?? FALLBACK_REQUEST_STORE, (s) => s.mode);
+	const isControlled = valueProp !== void 0 || onChangeProp !== void 0;
+	const value = isControlled ? valueProp : ctxMode;
+	const handleChange = (next) => {
+		if (onChangeProp) {
+			onChangeProp(next);
+			return;
+		}
+		if (!isControlled && controller) controller.setRequestField("mode", next);
+	};
+	return /* @__PURE__ */ jsx(PromptInputCompactSelect, {
+		options: options.map((o) => ({
+			value: o.value,
+			label: o.label ?? o.value,
+			disabled: o.disabled
+		})),
+		value,
+		onChange: handleChange,
+		placeholder: "Select mode",
+		"aria-label": ariaLabel,
+		className
+	});
+};
+/**
+* Single compact button that cycles through `options` on click.
+*
+* - Click / Enter / Space → next option (wraps at end)
+* - Shift+Click / Shift+Enter → previous option
+* - Skips `disabled` options
+*
+* Useful for binary or 2–3 option toggles where a dropdown feels heavy.
+*/
+var PromptInputCompactCycle = ({ options, value, onChange, "aria-label": ariaLabel = "Cycle option", showIcon = true, maxWidth = 160, className }) => {
+	const enabledOptions = options.filter((o) => !o.disabled);
+	if (enabledOptions.length === 0) return null;
+	const currentIndex = options.findIndex((o) => o.value === value);
+	const current = currentIndex !== -1 ? options[currentIndex] : enabledOptions[0];
+	const advance = (direction) => {
+		const start = currentIndex !== -1 ? currentIndex : -direction;
+		const len = options.length;
+		for (let step = 1; step <= len; step++) {
+			const candidate = options[(start + direction * step + len * len) % len];
+			if (candidate && !candidate.disabled) {
+				onChange?.(candidate.value);
+				return;
+			}
+		}
+	};
+	const triggerMaxWidth = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": ariaLabel,
+		title: `${current?.label ?? current?.value ?? ""} — click to cycle`,
+		style: { maxWidth: triggerMaxWidth },
+		onClick: (e) => advance(e.shiftKey ? -1 : 1),
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				advance(e.shiftKey ? -1 : 1);
+			}
+		},
+		className: cn("flex h-6 min-w-0 shrink cursor-pointer items-center gap-1 rounded-[4px] px-2 text-[11px] leading-none font-medium text-sf-subtle transition-colors", "hover:text-sf-default focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sf-ring", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: current?.label ?? current?.value ?? ""
+		}), showIcon && /* @__PURE__ */ jsx(ArrowsClockwiseIcon, { className: "size-3 shrink-0 opacity-70" })]
+	});
+};
+/**
+* Click-to-cycle mode picker. Single compact button that advances through
+* `options` on each click. Best for 2–3 modes.
+*
+* - Controlled: pass `value` + `onChange`.
+* - Controller-bound: omit both and wrap in `PromptInputRequestControllerProvider`
+*   — reads/writes `requestContext.mode` automatically.
+*/
+var PromptInputModeCycle = ({ options, value: valueProp, onChange: onChangeProp, "aria-label": ariaLabel = "Cycle mode", showIcon = true, className }) => {
+	const controller = useOptionalPromptInputRequestController();
+	const ctxMode = useStore(controller?.request ?? FALLBACK_REQUEST_STORE, (s) => s.mode);
+	const isControlled = valueProp !== void 0 || onChangeProp !== void 0;
+	const value = isControlled ? valueProp : ctxMode;
+	const handleChange = (next) => {
+		if (onChangeProp) {
+			onChangeProp(next);
+			return;
+		}
+		if (!isControlled && controller) controller.setRequestField("mode", next);
+	};
+	return /* @__PURE__ */ jsx(PromptInputCompactCycle, {
+		options: options.map((o) => ({
+			value: o.value,
+			label: o.label ?? o.value,
+			disabled: o.disabled
+		})),
+		value,
+		onChange: handleChange,
+		"aria-label": ariaLabel,
+		showIcon,
+		className
+	});
+};
+/**
+* Click-to-cycle model picker. Single compact button that advances through
+* `options` on each click. Best for 2–3 models.
+*
+* - Controlled: pass `value` + `onChange`.
+* - Controller-bound: omit both and wrap in `PromptInputRequestControllerProvider`
+*   — reads/writes `requestContext.model` automatically.
+*/
+var PromptInputModelCycle = ({ options, value: valueProp, onChange: onChangeProp, "aria-label": ariaLabel = "Cycle model", showIcon = true, className }) => {
+	const controller = useOptionalPromptInputRequestController();
+	const ctxModel = useStore(controller?.request ?? FALLBACK_REQUEST_STORE, (s) => s.model);
+	const isControlled = valueProp !== void 0 || onChangeProp !== void 0;
+	const value = isControlled ? valueProp : ctxModel;
+	const handleChange = (next) => {
+		if (onChangeProp) {
+			onChangeProp(next);
+			return;
+		}
+		if (!isControlled && controller) controller.setRequestField("model", next);
+	};
+	return /* @__PURE__ */ jsx(PromptInputCompactCycle, {
+		options: options.map((o) => ({
+			value: o.value,
+			label: getModelLabel(o),
+			disabled: o.disabled
+		})),
+		value,
+		onChange: handleChange,
+		"aria-label": ariaLabel,
+		showIcon,
+		className
+	});
+};
+var IMAGE_EXTS = new Set([
+	"jpg",
+	"jpeg",
+	"png",
+	"gif",
+	"webp",
+	"svg"
+]);
+function getFileIcon(filename) {
+	const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+	if (IMAGE_EXTS.has(ext)) return /* @__PURE__ */ jsx(ImageIcon, { className: "size-3.5" });
+	if ([
+		"pdf",
+		"doc",
+		"docx",
+		"txt",
+		"md"
+	].includes(ext)) return /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" });
+	return /* @__PURE__ */ jsx(FileIcon, { className: "size-3.5" });
+}
+/**
+* Single attachment chip for images or files. Includes a remove button.
+*/
+function PromptInputAttachment({ data, className, ...props }) {
+	const attachments = usePromptInputAttachments();
+	const isImage = data.mediaType?.startsWith("image/") && data.url;
+	const handleRemove = useCallback(() => {
+		attachments.remove(data.id);
+	}, [attachments, data.id]);
+	if (isImage) return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative size-14 overflow-hidden rounded-md", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("img", {
+			alt: data.filename || "attachment",
+			className: "size-full object-cover",
+			src: data.url
+		}), /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Remove attachment",
+			className: "absolute top-1 right-1 size-5 rounded-full bg-sf-overlay/80 p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100",
+			onClick: handleRemove,
+			size: "sm",
+			type: "button",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+		})]
+	});
+	const ext = data.filename.split(".").pop()?.toUpperCase() ?? "FILE";
+	const name = data.filename.replace(/\.[^/.]+$/, "");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative inline-flex h-8 items-center gap-2 rounded-md bg-sf-tint/50 px-2 text-sm", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex size-5 shrink-0 items-center justify-center text-sf-subtle",
+				children: getFileIcon(data.filename)
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				content: data.filename,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "max-w-[160px] truncate font-medium text-sf-default",
+					children: name || "File"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "rounded bg-sf-tint px-1 py-0.5 font-semibold text-sf-subtle text-[10px] uppercase",
+				children: ext
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Remove attachment",
+				className: "ml-0.5 size-4 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100",
+				onClick: handleRemove,
+				size: "sm",
+				type: "button",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+			})
+		]
+	});
+}
+/**
+* Renders all attachments using a render prop. Hidden when no files.
+* Animates height as files are added/removed.
+*/
+function PromptInputAttachments({ className, children, ...props }) {
+	const attachments = usePromptInputAttachments();
+	const [height, setHeight] = useState(0);
+	const contentRef = useRef(null);
+	useLayoutEffect(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver(() => {
+			setHeight(el.getBoundingClientRect().height);
+		});
+		ro.observe(el);
+		setHeight(el.getBoundingClientRect().height);
+		return () => ro.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		const el = contentRef.current;
+		if (el) setHeight(el.getBoundingClientRect().height);
+	}, [attachments.files.length]);
+	if (attachments.files.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": "polite",
+		className: cn("overflow-hidden px-2 transition-[height] duration-200 ease-out", className),
+		style: { height: attachments.files.length ? height : 0 },
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-2 py-1",
+			ref: contentRef,
+			children: attachments.files.map((file) => /* @__PURE__ */ jsx(Fragment, { children: children(file) }, file.id))
+		})
+	});
+}
+/**
+* Voice input button. Uses the Web Speech API (Chrome/Edge). Hidden on unsupported browsers.
+* Pulses while listening.
+*/
+var PromptInputSpeechButton = ({ className, textareaRef, onTranscriptionChange, "aria-label": ariaLabel = "Voice input", ...props }) => {
+	const [isListening, setIsListening] = useState(false);
+	const [recognition, setRecognition] = useState(null);
+	const recognitionRef = useRef(null);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const SR = window.SpeechRecognition ?? window.webkitSpeechRecognition;
+		if (!SR) return;
+		const sr = new SR();
+		sr.continuous = true;
+		sr.interimResults = true;
+		sr.lang = "en-US";
+		const handleStart = () => setIsListening(true);
+		const handleEnd = () => setIsListening(false);
+		const handleResult = (event) => {
+			const e = event;
+			let final = "";
+			for (const result of Array.from({ length: e.results.length }, (_, i) => e.results[i])) if (result?.isFinal && result[0]?.transcript) final += result[0].transcript;
+			if (final && textareaRef?.current) {
+				const ta = textareaRef.current;
+				const next = ta.value + (ta.value ? " " : "") + final;
+				ta.value = next;
+				ta.dispatchEvent(new Event("input", { bubbles: true }));
+				onTranscriptionChange?.(next);
+			}
+		};
+		const handleError = (_event) => setIsListening(false);
+		sr.addEventListener("start", handleStart);
+		sr.addEventListener("end", handleEnd);
+		sr.addEventListener("result", handleResult);
+		sr.addEventListener("error", handleError);
+		recognitionRef.current = sr;
+		setRecognition(sr);
+		return () => {
+			sr.removeEventListener("start", handleStart);
+			sr.removeEventListener("end", handleEnd);
+			sr.removeEventListener("result", handleResult);
+			sr.removeEventListener("error", handleError);
+			recognitionRef.current?.stop();
+		};
+	}, [textareaRef, onTranscriptionChange]);
+	const handleToggleListening = useCallback(() => {
+		if (!recognition) return;
+		const sr = recognition;
+		if (isListening) sr.stop();
+		else sr.start();
+	}, [recognition, isListening]);
+	const button = /* @__PURE__ */ jsx(Button, {
+		"aria-label": ariaLabel,
+		className: cn("text-sf-subtle hover:text-sf-default transition-all", isListening && "animate-pulse text-sf-brand", className),
+		disabled: !recognition,
+		onClick: handleToggleListening,
+		size: "sm",
+		type: "button",
+		variant: "ghost",
+		...props,
+		children: /* @__PURE__ */ jsx(MicrophoneIcon, { className: "size-4" })
+	});
+	if (!recognition) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: isListening ? "Stop listening" : "Voice input",
+		children: button
+	});
+};
+/**
+* Convenience button that opens the file dialog directly (no dropdown needed).
+*/
+var PromptInputAttachButton = ({ "aria-label": ariaLabel = "Attach file", className, ...props }) => {
+	const attachments = usePromptInputAttachments();
+	const handleClick = useCallback(() => {
+		attachments.openFileDialog();
+	}, [attachments]);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: ariaLabel,
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": ariaLabel,
+			className: cn("text-sf-subtle hover:text-sf-default", className),
+			onClick: handleClick,
+			size: "sm",
+			type: "button",
+			variant: "ghost",
+			...props,
+			children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" })
+		})
+	});
+};
+//#endregion
+export { useProviderAttachments as A, PromptInputTextarea as C, SF_AI_PROMPT_INPUT_VARIANTS as D, SF_AI_PROMPT_INPUT_DEFAULT_VARIANTS as E, usePromptInputRequestController as F, useRequestField as I, useSetRequestField as L, createPromptInputRequestController as M, useDisplayField as N, usePromptInputAttachments as O, useOptionalPromptInputRequestController as P, PromptInputSubmit as S, PromptInputTools as T, PromptInputModeSelector as _, PromptInputActionMenuItem as a, PromptInputProvider as b, PromptInputAttachment as c, PromptInputBody as d, PromptInputButton as f, PromptInputModeSelect as g, PromptInputModeCycle as h, PromptInputActionMenuContent as i, PromptInputRequestControllerProvider as j, usePromptInputController as k, PromptInputAttachments as l, PromptInputCompactSelect as m, PromptInputActionAddAttachments as n, PromptInputActionMenuTrigger as o, PromptInputCompactCycle as p, PromptInputActionMenu as r, PromptInputAttachButton as s, PromptInput as t, PromptInputBackLayer as u, PromptInputModelCycle as v, PromptInputToolbar as w, PromptInputSpeechButton as x, PromptInputModelSelect as y };
+
+//# sourceMappingURL=ai-prompt-input-Dy1LfxPk.js.map