@mechane-ai/elements 0.12.0 → 0.14.0

package/README.md

@@ -77,7 +77,8 @@ Every path below belongs to `@mechane-ai/elements`. There is one package, versio
 | `/theme`               | Light and dark theme props.                                                         |
 | `/csp`                 | Application-supplied content security policy configuration.                         |
 | `/tokens`              | Compiled token references for runtime styles.                                       |
-| `/tokens.stylex`       | Direct definitions for StyleX authoring and themes.                                 |
+| `/tokens.stylex`       | Variable definitions for StyleX authoring and themes.                               |
+| `/constants.stylex`    | Compile-time conditions, palette values, layers, and shared geometry.               |
 | `/styles.css`          | Component styles and token defaults.                                                |
 
 Focused entries keep renderer and chart dependencies out of basic controls. There is no all-components barrel. Renderers
@@ -98,10 +99,10 @@ Detail titles wrap; list metadata truncates. Sidebar items share contiguous hit
 navigation and reserve the divided sidebar footer for persistent account controls. Use
 `SidebarFooter layout="navigation"` for a group of commands; its intrinsic height keeps the scrolling navigation clear.
 
-`AppShell focus` temporarily hides navigation while retaining its expansion state. `ViewStack.Panel` keeps inactive
-content mounted and measurable but removes it from keyboard and assistive-technology navigation. The application owns
-which view is active and when to unmount it; use this for a draft or reading position that must survive inspection.
-`WorkbenchScroll` requires an accessible `label`; its `flush` mode leaves list insets to the table. Its
+`AppShell shouldFocus` temporarily hides navigation while retaining its expansion state. `ViewStack.Panel` keeps
+inactive content mounted and measurable but removes it from keyboard and assistive-technology navigation. The
+application owns which view is active and when to unmount it; use this for a draft or reading position that must survive
+inspection. `WorkbenchScroll` requires an accessible `label`; its `isFlush` mode leaves list insets to the table. Its
 `scrollRestorationId` identifies the actual scroll region for application-owned restoration.
 
 Each `DataTable` column declares a role: `primary`, `text`, `status`, `number`, `timestamp`, or `actions`. Roles own
@@ -136,13 +137,35 @@ The default theme is light, with system fonts and a compact spacing scale. Impor
 `@mechane-ai/elements/theme` and spread `themeProps.light` or `themeProps.dark` onto the document root. Portaled content
 then inherits the same theme. The application owns the preference; no theme provider is required.
 
-For custom StyleX themes, import definitions from `@mechane-ai/elements/tokens.stylex`, enable `useCSSLayers: true` and
-CommonJS module resolution in the StyleX plugin, and use `stylex.createTheme`. The defining path is preserved in the
-archive so generated variables match its compiled CSS. The ordinary `/tokens` entry supplies runtime references rather
-than compile-time definitions.
+For custom StyleX styles and themes, import variables from `@mechane-ai/elements/tokens.stylex` and compile-time
+constants from `@mechane-ai/elements/constants.stylex`. The archive preserves both defining paths. Variables retain the
+same names as the packaged CSS; constants need their source compiled with the consuming styles. The ordinary `/tokens`
+entry supplies runtime references and values for both groups.
+
+With Vite and StyleX 0.19.1, configure the consumer as follows:
+
+```ts
+import stylex from '@stylexjs/unplugin/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    stylex({
+      useCSSLayers: true,
+      debug: false,
+      runtimeInjection: false,
+      unstable_moduleResolution: { type: 'commonJS' },
+      externalPackages: ['@mechane-ai/elements'],
+    }),
+  ],
+  resolve: { alias: [{ find: /^@mechane-ai\/elements\/tokens\.stylex$/, replacement: '@mechane-ai/elements/tokens' }] },
+});
+```
 
-Set the consumer compiler's `debug: false` so placement overrides use the archive's property keys. Keep definition
-resolution for compilation; bundle `/tokens` runtime references to avoid reinjecting defaults over a chosen theme.
+The bundler alias uses compiled variable references without re-emitting defaults over the selected theme. StyleX still
+resolves the original defining path during compilation. Keep `/constants.stylex` direct so its metadata reaches the
+compiler. Consumer styles can then use `[conditions.coarsePointer]` from that entry, and
+`stylex.createTheme(colors, ...)` with `colors` from `/tokens.stylex`.
 
 When an application's Content Security Policy requires nonces, wrap its component tree in `CSPProvider` from
 `@mechane-ai/elements/csp` and pass the same request nonce used in its policy. Preserve that nonce during hydration.
@@ -154,6 +177,22 @@ structural styles in the published stylesheet, so the production package injects
 initial-read failures and field validation local; retained-content refresh failures can use one notification with Retry.
 The application owns stable notification IDs and dismissal on recovery or navigation.
 
+## Loading content
+
+Use `AsyncRegion` from `/feedback` with an explicit `pending`, `ready`, or `failed` state and a destination-specific
+`placeholder`. Pending reserves that geometry immediately and reveals it after two seconds. Ready content enters in
+80ms; ready-at-mount and failed content appear immediately. Reduced motion removes the fades. There is no minimum
+loading duration, and ordinary callers do not configure timing.
+
+Wrap a page in `LoadingScope` and pass its navigation `identity` to share one clock across dependent reads. Updating the
+identity resets pending presentation without remounting ready children. Use `initialStartedAt` only to preserve elapsed
+document loading time at hydration; later identities start their own clock. Keep refreshes in the ready state and retain
+their content, focus, and drafts; display progress or failure alongside the last result.
+
+Build placeholders from the same layouts as their destinations. `DataTablePlaceholder` accepts the real table's
+`DataTableColumnLayout` definitions and optional decorative cells. The async region owns the loading announcement; its
+placeholders must not contain interactive controls, invented records, or independent status announcements.
+
 ## Develop and release
 
 From `workspaces/core`:

package/dist/ai.js

@@ -1,65 +1,66 @@
-import { C as e, E as t, T as n, f as r, g as i, p as a, t as o, w as s } from "./src-3gzujMhN.js";
-import { t as c } from "./content-link-C460m-O7.js";
-import { r as l, t as u } from "./src-CVlgjAlw.js";
-import { c as d, u as f } from "./src-DOzle5d4.js";
-import { t as p } from "./accessibility-C-aIZ1Yx.js";
-import * as m from "@stylexjs/stylex";
-import { createContext as h, useContext as g, useId as _, useRef as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { ArrowDown as x, ArrowUp as S, File as C, GitBranch as w, Square as T } from "lucide-react";
-import { MessageScroller as E, useMessageScroller as D, useMessageScrollerScrollable as O } from "@shadcn/react/message-scroller";
+import { C as e, E as t, O as n, T as r, f as i, g as a, p as o, t as s, w as c } from "./src-CyJd2qSZ.js";
+import { t as l } from "./content-link-CEx2s1MU.js";
+import { r as u, t as d } from "./src-d7EAi61b.js";
+import { c as f, d as p } from "./src-C9GQP3px.js";
+import { c as m, u as h } from "./src-BkXlN6aZ.js";
+import { t as g } from "./accessibility-C-aIZ1Yx.js";
+import * as _ from "@stylexjs/stylex";
+import { createContext as v, useContext as y, useId as b, useRef as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { ArrowDown as w, ArrowUp as T, File as E, GitBranch as D, Square as O } from "lucide-react";
+import { MessageScroller as k, useMessageScroller as A, useMessageScrollerScrollable as j } from "@shadcn/react/message-scroller";
 // packages/ai/src/approval.tsx
-function k(t) {
-	return /* @__PURE__ */ b("section", {
+function M(t) {
+	return /* @__PURE__ */ C("section", {
 		"aria-label": t.title,
 		"data-request-id": t.requestId,
 		className: "x78zum5 xdt5ytf x1n8ia3y xeuugli x1c8xbx5 xmkeg23 x1y0btm7 x1ey3b81 x1ok0vyi xpvm0e4 xbixft x1hz01jw xtqrqnz x1778rvt xj57cvi",
 		children: [
-			/* @__PURE__ */ y("h3", {
+			/* @__PURE__ */ S("h3", {
 				className: "x1ghz6dp xtqrqnz x1778rvt xk4h15q xj0a0fe",
 				children: t.title
 			}),
-			t.description !== void 0 && /* @__PURE__ */ y("p", {
+			t.description !== void 0 && /* @__PURE__ */ S("p", {
 				className: "x1ghz6dp x153jb6y xj0a0fe",
 				children: t.description
 			}),
 			t.children,
-			t.status === "pending" ? /* @__PURE__ */ b(r, { children: [/* @__PURE__ */ y(e, {
+			t.status === "pending" ? /* @__PURE__ */ C(i, { children: [/* @__PURE__ */ S(e, {
 				variant: "solid",
 				onClick: t.onApprove,
-				disabled: t.disabled === !0 || t.busy !== void 0,
-				pending: t.busy === "approve",
+				disabled: t.isDisabled === !0 || t.busy !== void 0,
+				isPending: t.busy === "approve",
 				pendingLabel: "Approving…",
 				children: t.approveLabel ?? "Approve"
-			}), /* @__PURE__ */ y(e, {
+			}), /* @__PURE__ */ S(e, {
 				onClick: t.onDeny,
-				disabled: t.disabled === !0 || t.busy !== void 0,
-				pending: t.busy === "deny",
+				disabled: t.isDisabled === !0 || t.busy !== void 0,
+				isPending: t.busy === "deny",
 				pendingLabel: "Denying…",
 				children: t.denyLabel ?? "Deny"
-			})] }) : /* @__PURE__ */ y(o, { children: t.statusLabel })
+			})] }) : /* @__PURE__ */ S(s, { children: t.statusLabel })
 		]
 	});
 }
 // packages/ai/src/conversation.tsx
-var A = h(void 0);
-function j({ children: e, initialPosition: t = "end", follow: n = !0, viewportRef: r }) {
-	let i = v(null), a = r ?? i;
-	return /* @__PURE__ */ y(A.Provider, {
+var N = v(void 0);
+function P({ children: e, initialPosition: t = "end", shouldFollow: n = !0, viewportRef: r }) {
+	let i = x(null), a = r ?? i;
+	return /* @__PURE__ */ S(N.Provider, {
 		value: a,
-		children: /* @__PURE__ */ y(E.Provider, {
+		children: /* @__PURE__ */ S(k.Provider, {
 			autoScroll: n,
 			defaultScrollPosition: t,
-			children: /* @__PURE__ */ y(E.Root, {
+			children: /* @__PURE__ */ S(k.Root, {
 				className: "x1n2onr6 x78zum5 xdt5ytf x5yr21d x2lwn1j xeuugli xpvm0e4 xbixft x1hz01jw xtqrqnz x1778rvt xj57cvi",
 				children: e
 			})
 		})
 	});
 }
-function M({ label: e, children: t, scrollRestorationId: n }) {
-	let r = g(A);
-	return /* @__PURE__ */ y(E.Viewport, {
+function F({ label: e, children: t, scrollRestorationId: n }) {
+	let r = y(N);
+	return /* @__PURE__ */ S(k.Viewport, {
 		ref: r,
 		"aria-label": e,
 		"data-scroll-restoration-id": n,
@@ -67,8 +68,8 @@ function M({ label: e, children: t, scrollRestorationId: n }) {
 		children: t
 	});
 }
-function N({ children: e, streaming: t = !1 }) {
-	return /* @__PURE__ */ y(E.Content, {
+function I({ children: e, isStreaming: t = !1 }) {
+	return /* @__PURE__ */ S(k.Content, {
 		"aria-live": "polite",
 		"aria-relevant": "additions",
 		"aria-busy": t,
@@ -76,50 +77,50 @@ function N({ children: e, streaming: t = !1 }) {
 		children: e
 	});
 }
-function P({ messageId: e, children: t }) {
-	return /* @__PURE__ */ y(E.Item, {
+function L({ messageId: e, children: t }) {
+	return /* @__PURE__ */ S(k.Item, {
 		messageId: e,
 		className: "xeuugli xj0a0fe",
 		children: t
 	});
 }
-function F({ children: e }) {
-	return /* @__PURE__ */ y("div", {
+function R({ children: e }) {
+	return /* @__PURE__ */ S("div", {
 		className: "x9f619 x2lah0s xeuugli xh8yej3 xe10afn xvueqy4 xn9t2bk x1m92p3w",
 		children: e
 	});
 }
-function I({ label: e = "Jump to latest" }) {
-	let { end: t } = O();
-	return t ? /* @__PURE__ */ y("div", {
+function z({ label: e = "Jump to latest" }) {
+	let { end: t } = j();
+	return t ? /* @__PURE__ */ S("div", {
 		className: "x10l6tqk xwthv0x x1nrll8i xuuh30 x1tv4vx4 xeuugli",
-		children: /* @__PURE__ */ y(L, { label: e })
+		children: /* @__PURE__ */ S(B, { label: e })
 	}) : null;
 }
-function L({ label: t, onActivate: n }) {
-	let { scrollToEnd: r } = D(), i = g(A);
-	return /* @__PURE__ */ b(e, {
+function B({ label: t, onActivate: n }) {
+	let { scrollToEnd: r } = A(), i = y(N);
+	return /* @__PURE__ */ C(e, {
 		onClick: () => {
 			n?.(), requestAnimationFrame(() => {
 				let e = i?.current;
 				e != null && (r({ behavior: "instant" }), e.focus({ preventScroll: !0 }));
 			});
 		},
-		children: [/* @__PURE__ */ y(x, {
+		children: [/* @__PURE__ */ S(w, {
 			size: 14,
 			"aria-hidden": !0
 		}), t]
 	});
 }
-var R = {
-	Root: j,
-	Viewport: M,
-	Content: N,
-	Item: P,
-	Controls: F,
-	LatestButton: L,
-	JumpToLatest: I
-}, z = {
+var V = {
+	Root: P,
+	Viewport: F,
+	Content: I,
+	Item: L,
+	Controls: R,
+	LatestButton: B,
+	JumpToLatest: z
+}, H = {
 	root: {
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
@@ -145,72 +146,72 @@ var R = {
 		k8WAf4: "xn9t2bk",
 		$$css: !0
 	}
-}, B = {
-	user: z.user,
-	assistant: z.assistant,
-	system: z.system
-}, V = {
+}, U = {
+	user: H.user,
+	assistant: H.assistant,
+	system: H.system
+}, W = {
 	"x-default-marker": "x-default-marker",
 	$$css: !0
 };
-function H({ author: e, children: t, id: n, kind: r = "assistant", meta: i, avatar: a, actions: o, attachments: s }) {
-	return /* @__PURE__ */ b("article", {
+function G({ author: e, children: t, id: n, kind: r = "assistant", meta: i, avatar: a, actions: o, attachments: s }) {
+	return /* @__PURE__ */ C("article", {
 		id: n,
 		"aria-label": e,
-		...m.props(z.root, B[r], V),
+		..._.props(H.root, U[r], W),
 		children: [
-			/* @__PURE__ */ b("header", {
+			/* @__PURE__ */ C("header", {
 				className: "x78zum5 x6s0dn4 x1hnptsi x1a02dak xeuugli",
 				children: [
-					a !== void 0 && /* @__PURE__ */ y("span", {
+					a !== void 0 && /* @__PURE__ */ S("span", {
 						className: "x3nfvp2 x2lah0s",
 						children: a
 					}),
-					/* @__PURE__ */ y("span", {
+					/* @__PURE__ */ S("span", {
 						className: "xk4h15q xeuugli xj0a0fe",
 						children: e
 					}),
-					i !== void 0 && /* @__PURE__ */ y("div", {
+					i !== void 0 && /* @__PURE__ */ S("div", {
 						className: "x153jb6y xy8obcc xas2l8k xeuugli xj0a0fe",
 						children: i
 					})
 				]
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ S("div", {
 				className: "xeuugli xj0a0fe x1ytb0s6",
 				children: t
 			}),
-			s !== void 0 && /* @__PURE__ */ y("div", {
+			s !== void 0 && /* @__PURE__ */ S("div", {
 				className: "x78zum5 x1a02dak x1qjc9v5 x1hnptsi xeuugli",
 				children: s
 			}),
-			o !== void 0 && /* @__PURE__ */ y("footer", {
-				className: "x78zum5 x1a02dak x6s0dn4 xeuugli xunmzkg x1hc1fzr x1ac4sdd xea5s0o xbfgl4k",
+			o !== void 0 && /* @__PURE__ */ S("footer", {
+				className: "x78zum5 x1a02dak x6s0dn4 xeuugli xunmzkg x1hc1fzr x12vu8c0 xtf8l8m x1thm12b",
 				children: o
 			})
 		]
 	});
 }
-function U({ name: e, description: t, href: n, actions: r }) {
-	return /* @__PURE__ */ b("div", {
+function K({ name: e, description: t, href: n, actions: r }) {
+	return /* @__PURE__ */ C("div", {
 		className: "x78zum5 x1a02dak x6s0dn4 x1n8ia3y xeuugli x193iq5w x1mvvolr xmkeg23 x1y0btm7 x1ey3b81 x1ok0vyi xpvm0e4 x1hz01jw xtqrqnz x1778rvt xj57cvi",
 		children: [
-			/* @__PURE__ */ y(C, {
+			/* @__PURE__ */ S(E, {
 				size: 16,
 				"aria-hidden": !0,
 				className: "x153jb6y x2lah0s"
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ C("div", {
 				className: "x78zum5 xdt5ytf xfko13i x1slnebi xeuugli xj0a0fe",
-				children: [n === void 0 ? /* @__PURE__ */ y("span", { children: e }) : /* @__PURE__ */ y(c, {
+				children: [n === void 0 ? /* @__PURE__ */ S("span", { children: e }) : /* @__PURE__ */ S(l, {
 					href: n,
 					children: e
-				}), t !== void 0 && /* @__PURE__ */ y("span", {
+				}), t !== void 0 && /* @__PURE__ */ S("span", {
 					className: "x153jb6y xy8obcc xas2l8k xeuugli xj0a0fe",
 					children: t
 				})]
 			}),
-			r !== void 0 && /* @__PURE__ */ y("div", {
+			r !== void 0 && /* @__PURE__ */ S("div", {
 				className: "x78zum5 x1a02dak x6s0dn4 x1hnptsi xeuugli",
 				children: r
 			})
@@ -218,158 +219,184 @@ function U({ name: e, description: t, href: n, actions: r }) {
 	});
 }
 // packages/ai/src/message-action.tsx
-function W(e) {
+function q(e) {
 	if (e.kind === "link") {
-		let { kind: t, label: r, ...i } = e;
-		return /* @__PURE__ */ y(n, {
+		let { kind: t, label: n, ...i } = e;
+		return /* @__PURE__ */ S(r, {
 			...i,
-			"aria-label": r
+			"aria-label": n
 		});
 	}
-	let { kind: t, label: r, ...i } = e;
-	return /* @__PURE__ */ y(s, {
+	let { kind: t, label: n, ...i } = e;
+	return /* @__PURE__ */ S(c, {
 		...i,
 		variant: "ghost",
-		"aria-label": r
+		"aria-label": n
 	});
 }
-function G(e) {
-	return /* @__PURE__ */ b(u.Root, { children: [/* @__PURE__ */ y(u.Trigger, { render: W(e) }), /* @__PURE__ */ y(u.Portal, { children: /* @__PURE__ */ y(u.Positioner, { children: /* @__PURE__ */ y(u.Popup, { children: e.label }) }) })] });
+function J(e) {
+	return /* @__PURE__ */ C(d.Root, { children: [/* @__PURE__ */ S(d.Trigger, { render: q(e) }), /* @__PURE__ */ S(d.Portal, { children: /* @__PURE__ */ S(d.Positioner, { children: /* @__PURE__ */ S(d.Popup, { children: e.label }) }) })] });
 }
 // packages/ai/src/message-boundary.tsx
-function K({ label: e, children: t }) {
-	return /* @__PURE__ */ b(i.Root, {
+function Y({ label: e, children: t }) {
+	return /* @__PURE__ */ C(a.Root, {
 		className: "xeuugli x1kbiq1m xykt701 xpu655y",
-		children: [/* @__PURE__ */ b(i.Trigger, {
+		children: [/* @__PURE__ */ C(a.Trigger, {
 			className: "xlqzeqv x1hnptsi x153jb6y xy8obcc xas2l8k xj57cvi",
-			children: [/* @__PURE__ */ y(w, {
+			children: [/* @__PURE__ */ S(D, {
 				size: 14,
 				"aria-hidden": !0,
 				className: "x2lah0s"
-			}), /* @__PURE__ */ y("span", {
+			}), /* @__PURE__ */ S("span", {
 				className: "xeuugli xj0a0fe",
 				children: e
 			})]
-		}), /* @__PURE__ */ y(i.Panel, {
+		}), /* @__PURE__ */ S(a.Panel, {
 			className: "x153jb6y xy8obcc xas2l8k",
 			children: t
 		})]
 	});
 }
 // packages/ai/src/prompt-input.tsx
-var q = { action: {
+var X = { action: {
 	keTefX: "xvc5jky",
 	$$css: !0
 } };
-function J({ label: e, value: t, onValueChange: n, onSubmit: r, name: i = "prompt", placeholder: a, maxLength: o, required: c = !0, pending: l = !1, disabled: h = !1, submitDisabled: g = !1, submitLabel: v = "Send message", pendingLabel: x = "Sending…", enterBehavior: C = "newline", compact: w = !1, description: E, error: D, controls: O, attachments: k, onStop: A, stopPending: j = !1, stopLabel: M = "Stop response" }) {
-	let N = _(), P = h || l, F = v;
-	A === void 0 ? l ? F = x : C === "submit" && (F = `${v} · Enter`) : F = j ? "Stopping…" : M;
+function Z({ isCompact: e = !1 }) {
+	return /* @__PURE__ */ S("div", {
+		"aria-hidden": !0,
+		inert: !0,
+		className: "x78zum5 xdt5ytf x1hnptsi xeuugli xh8yej3 xe10afn xvueqy4 xbixft x1hz01jw xtqrqnz x1778rvt xj57cvi",
+		children: /* @__PURE__ */ C("div", {
+			className: "x78zum5 xdt5ytf x1hnptsi xeuugli x1mvvolr xmkeg23 x1y0btm7 x1ey3b81 xy32g2j x1r7kqkb x1gd1hh4 x1u8w8hx x14xc8xn x1nvizq4 xgzwmep",
+			children: [/* @__PURE__ */ S("div", {
+				..._.props(n.base, n.field, n.textarea, n.plainTextarea),
+				children: /* @__PURE__ */ S(p, {
+					lines: e ? 1 : 2,
+					width: "22ch"
+				})
+			}), /* @__PURE__ */ C("div", {
+				className: "x78zum5 x1a02dak x6s0dn4 x1qughib x1hnptsi",
+				children: [/* @__PURE__ */ S("div", {
+					className: "x78zum5 x1a02dak x6s0dn4 x1hnptsi xeuugli x12lumcd xy8obcc xas2l8k",
+					children: /* @__PURE__ */ S(p, { width: "8ch" })
+				}), /* @__PURE__ */ S(f, {
+					isIconOnly: !0,
+					xstyle: X.action
+				})]
+			})]
+		})
+	});
+}
+function Q({ label: e, value: t, onValueChange: n, onSubmit: r, name: i = "prompt", placeholder: a, maxLength: o, required: s = !0, isPending: l = !1, disabled: u = !1, isSubmitDisabled: f = !1, submitLabel: p = "Send message", pendingLabel: v = "Sending…", enterBehavior: y = "newline", isCompact: x = !1, description: w, error: E, controls: D, attachments: k, onStop: A, isStopPending: j = !1, stopLabel: M = "Stop response" }) {
+	let N = b(), P = u || l, F = p;
+	A === void 0 ? l ? F = v : y === "submit" && (F = `${p} · Enter`) : F = j ? "Stopping…" : M;
 	function I(e) {
-		if (C !== "submit" || e.key !== "Enter" || e.repeat) return;
+		if (y !== "submit" || e.key !== "Enter" || e.repeat) return;
 		let t = e.altKey || e.ctrlKey || e.metaKey;
-		e.shiftKey || t || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || (e.preventDefault(), !P && !g && A === void 0 && e.currentTarget.form?.requestSubmit());
+		e.shiftKey || t || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || (e.preventDefault(), !P && !f && A === void 0 && e.currentTarget.form?.requestSubmit());
 	}
 	function L(e) {
-		e.preventDefault(), !P && !g && A === void 0 && r(e);
+		e.preventDefault(), !P && !f && A === void 0 && r(e);
 	}
-	return /* @__PURE__ */ y("form", {
+	return /* @__PURE__ */ S("form", {
 		onSubmit: L,
 		className: "x78zum5 xdt5ytf x1hnptsi xeuugli xh8yej3 xe10afn xvueqy4 xbixft x1hz01jw xtqrqnz x1778rvt xj57cvi",
-		children: /* @__PURE__ */ b(d.Root, {
-			invalid: D !== void 0,
+		children: /* @__PURE__ */ C(m.Root, {
+			invalid: E !== void 0,
 			children: [
-				/* @__PURE__ */ y(d.Label, {
-					...m.props(p.hidden),
+				/* @__PURE__ */ S(m.Label, {
+					..._.props(g.hidden),
 					children: e
 				}),
-				/* @__PURE__ */ b("div", {
+				/* @__PURE__ */ C("div", {
 					...{
 						0: { className: "x78zum5 xdt5ytf x1hnptsi xeuugli x1mvvolr xmkeg23 x1y0btm7 x1ey3b81 xy32g2j x1r7kqkb x1gd1hh4 x1u8w8hx x14xc8xn x1nvizq4 xgzwmep" },
 						1: { className: "x78zum5 xdt5ytf x1hnptsi xeuugli x1mvvolr xmkeg23 x1y0btm7 xy32g2j x1r7kqkb x1gd1hh4 x1u8w8hx x14xc8xn x1nvizq4 xgzwmep x1oddvo6" }
-					}[D !== void 0 | 0],
+					}[E !== void 0 | 0],
 					children: [
-						/* @__PURE__ */ y(f, {
+						/* @__PURE__ */ S(h, {
 							appearance: "plain",
-							rows: w ? 1 : 2,
-							compact: w,
+							rows: x ? 1 : 2,
+							isCompact: x,
 							name: i,
 							value: t,
 							onChange: (e) => n(e.currentTarget.value),
 							onKeyDown: I,
 							placeholder: a ?? e,
 							maxLength: o,
-							required: c,
-							disabled: h,
+							required: s,
+							disabled: u,
 							readOnly: l,
-							"aria-errormessage": D === void 0 ? void 0 : N
+							"aria-errormessage": E === void 0 ? void 0 : N
 						}),
 						k,
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ C("div", {
 							className: "x78zum5 x1a02dak x6s0dn4 x1qughib x1hnptsi",
-							children: [O !== void 0 && /* @__PURE__ */ y("div", {
+							children: [D !== void 0 && /* @__PURE__ */ S("div", {
 								className: "x78zum5 x1a02dak x6s0dn4 x1hnptsi xeuugli x12lumcd",
-								children: O
-							}), /* @__PURE__ */ b(u.Root, { children: [/* @__PURE__ */ y(u.Trigger, { render: A === void 0 ? /* @__PURE__ */ y(s, {
-								xstyle: q.action,
+								children: D
+							}), /* @__PURE__ */ C(d.Root, { children: [/* @__PURE__ */ S(d.Trigger, { render: A === void 0 ? /* @__PURE__ */ S(c, {
+								xstyle: X.action,
 								type: "submit",
 								variant: "solid",
-								"aria-label": l ? x : v,
-								disabled: h || g,
-								pending: l,
-								children: /* @__PURE__ */ y(S, {
+								"aria-label": l ? v : p,
+								disabled: u || f,
+								isPending: l,
+								children: /* @__PURE__ */ S(T, {
 									size: 16,
 									"aria-hidden": !0
 								})
-							}) : /* @__PURE__ */ y(s, {
-								xstyle: q.action,
+							}) : /* @__PURE__ */ S(c, {
+								xstyle: X.action,
 								type: "button",
 								"aria-label": j ? "Stopping…" : M,
 								onClick: (e) => {
 									e.preventDefault(), A();
 								},
-								disabled: h,
-								pending: j,
-								children: /* @__PURE__ */ y(T, {
+								disabled: u,
+								isPending: j,
+								children: /* @__PURE__ */ S(O, {
 									size: 14,
 									"aria-hidden": !0
 								})
-							}) }), /* @__PURE__ */ y(u.Portal, { children: /* @__PURE__ */ y(u.Positioner, { children: /* @__PURE__ */ y(u.Popup, { children: F }) }) })] })]
+							}) }), /* @__PURE__ */ S(d.Portal, { children: /* @__PURE__ */ S(d.Positioner, { children: /* @__PURE__ */ S(d.Popup, { children: F }) }) })] })]
 						})
 					]
 				}),
-				E !== void 0 && /* @__PURE__ */ y(d.Description, { children: E }),
-				D !== void 0 && /* @__PURE__ */ y(d.Error, {
+				w !== void 0 && /* @__PURE__ */ S(m.Description, { children: w }),
+				E !== void 0 && /* @__PURE__ */ S(m.Error, {
 					id: N,
 					match: !0,
 					role: "alert",
-					children: D
+					children: E
 				})
 			]
 		})
 	});
 }
 // packages/ai/src/sources.tsx
-function Y({ sources: e, label: t = "Sources" }) {
-	return /* @__PURE__ */ b("section", {
+function $({ sources: e, label: t = "Sources" }) {
+	return /* @__PURE__ */ C("section", {
 		"aria-label": t,
 		className: "x78zum5 xdt5ytf x1hnptsi xeuugli x1hz01jw xtqrqnz x1778rvt xj57cvi xbixft",
 		children: [
-			/* @__PURE__ */ y("h3", {
+			/* @__PURE__ */ S("h3", {
 				className: "x1ghz6dp xtqrqnz x1778rvt xk4h15q xj0a0fe",
 				children: t
 			}),
-			e.length === 0 && /* @__PURE__ */ y("p", {
+			e.length === 0 && /* @__PURE__ */ S("p", {
 				className: "x1ghz6dp x153jb6y xy8obcc xas2l8k xj0a0fe",
 				children: "No sources supplied."
 			}),
-			/* @__PURE__ */ y("ol", {
+			/* @__PURE__ */ S("ol", {
 				className: "x78zum5 xdt5ytf x1n8ia3y x1ghz6dp x1717udv x3ct3a4",
-				children: e.map((e) => /* @__PURE__ */ b("li", {
+				children: e.map((e) => /* @__PURE__ */ C("li", {
 					className: "x78zum5 xdt5ytf xfko13i xeuugli xj0a0fe",
-					children: [/* @__PURE__ */ y("span", { children: /* @__PURE__ */ y(c, {
+					children: [/* @__PURE__ */ S("span", { children: /* @__PURE__ */ S(l, {
 						href: e.href,
 						children: e.title
-					}) }), e.description !== void 0 && /* @__PURE__ */ y("p", {
+					}) }), e.description !== void 0 && /* @__PURE__ */ S("p", {
 						className: "x1ghz6dp x153jb6y xy8obcc xas2l8k xj0a0fe",
 						children: e.description
 					})]
@@ -378,21 +405,21 @@ function Y({ sources: e, label: t = "Sources" }) {
 		]
 	});
 }
-function X({ source: e, label: n }) {
-	return /* @__PURE__ */ y("span", {
+function ee({ source: e, label: n }) {
+	return /* @__PURE__ */ S("span", {
 		className: "xt0psk2 x11njtxf xss6m8b",
-		children: /* @__PURE__ */ b(l.Root, { children: [/* @__PURE__ */ y(l.Trigger, {
-			render: /* @__PURE__ */ y(t, {}),
+		children: /* @__PURE__ */ C(u.Root, { children: [/* @__PURE__ */ S(u.Trigger, {
+			render: /* @__PURE__ */ S(t, {}),
 			"aria-label": `Source ${n}: ${e.title}`,
 			children: n
-		}), /* @__PURE__ */ y(l.Portal, { children: /* @__PURE__ */ y(l.Positioner, {
+		}), /* @__PURE__ */ S(u.Portal, { children: /* @__PURE__ */ S(u.Positioner, {
 			side: "top",
-			children: /* @__PURE__ */ y(l.Popup, { children: /* @__PURE__ */ b(a, {
-				compact: !0,
+			children: /* @__PURE__ */ S(u.Popup, { children: /* @__PURE__ */ C(o, {
+				isCompact: !0,
 				children: [
-					/* @__PURE__ */ y(l.Title, { children: e.title }),
-					e.description !== void 0 && /* @__PURE__ */ y(l.Description, { children: e.description }),
-					/* @__PURE__ */ y(c, {
+					/* @__PURE__ */ S(u.Title, { children: e.title }),
+					e.description !== void 0 && /* @__PURE__ */ S(u.Description, { children: e.description }),
+					/* @__PURE__ */ S(l, {
 						href: e.href,
 						children: "Open source"
 					})
@@ -401,4 +428,4 @@ function X({ source: e, label: n }) {
 		}) })] })
 	});
 }
-export { k as Approval, R as Conversation, X as InlineCitation, H as Message, G as MessageAction, U as MessageAttachment, K as MessageBoundary, J as PromptInput, Y as Sources };
+export { M as Approval, V as Conversation, ee as InlineCitation, G as Message, J as MessageAction, K as MessageAttachment, Y as MessageBoundary, Q as PromptInput, Z as PromptInputPlaceholder, $ as Sources };