@bysages/solid 0.2.3 → 0.3.1

package/README.md

@@ -4,11 +4,11 @@
 ![npm downloads](https://img.shields.io/npm/dw/@bysages/solid)
 ![npm license](https://img.shields.io/npm/l/@bysages/solid)
 
-> By Sages Elements for Solid — 90+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
+> By Sages Elements for Solid — 140+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
 
 ## Features
 
-- 🧩 **90+ families** — actions, forms, overlays, navigation, data, layout, and an AI conversation family on ai-sdk formats
+- 🧩 **140+ families** — actions, forms, overlays, navigation, data, layout, an AI conversation family on ai-sdk formats, and a full generative vocabulary
 - 🏛️ **Headless inside** — interaction, state, ARIA, and positioning come from proven headless state machines; wrappers add API narrowing and style injection, no DOM of their own
 - 🎨 **Token-styled** — every visual value is a CSS custom property from `@bysages/core`; light/dark, accent pigments, contrast and density tiers are data, never hardcoded styles
 - 📦 **Container-driven** — components respond to `@container`, not the viewport; the same component composes in a sidebar, a card, or a page
@@ -62,6 +62,20 @@ render(
 );
 ```
 
+## Generative UI
+
+Every family carries a generative face — a zod-typed catalog entry that
+lives beside the component. The faces compose into a
+[json-render](https://json-render.dev) catalog and render through the
+same package:
+
+```ts
+import { catalog } from "@bysages/solid/generative";
+```
+
+Point an AI SDK stream at the renderer and a prompt becomes real,
+on-brand components — constrained to the families you registered.
+
 ## Documentation
 
 The [documentation site](https://elements.bysages.com) carries every family with live demos and props tables.

package/dist/{ai-response-B_586r27.mjs → ai-response-slzE03wh.mjs}

@@ -1,5 +1,6 @@
+import { n as useComponentMessages } from "./use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template, use } from "solid-js/web";
+import { ref, spread, template } from "@solidjs/web";
 import { createEffect, createMemo, onMount, splitProps } from "solid-js";
 import { renderHtml } from "@tanstack/markdown/html";
 //#region src/components/ai-response/code-copy.ts
@@ -99,7 +100,7 @@ function wrapResponseTables(root) {
 }
 //#endregion
 //#region src/components/ai-response/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /** Markdown set on the paper. Rendering goes through
 * `@tanstack/markdown`, whose defaults leave raw HTML and executable
 * links inert — streaming-safe by construction. */
@@ -111,29 +112,30 @@ function Response(props) {
 		"copyLabel",
 		"copiedLabel"
 	]);
+	const messages = useComponentMessages();
 	const html = createMemo(() => renderHtml(own.content, own.highlighter ? { highlighter: own.highlighter } : void 0));
 	let root;
 	onMount(() => createEffect(() => {
 		html();
-		if (root) decorateCodeCopy(root, own.copyLabel ?? "Copy code");
+		if (root) decorateCodeCopy(root, own.copyLabel ?? messages().ai.copyCode);
 		if (root) wrapResponseTables(root);
 	}));
 	const onClick = (event) => {
-		clickCodeCopy(event, own.copyLabel ?? "Copy code", own.copiedLabel ?? "Copied");
+		clickCodeCopy(event, own.copyLabel ?? messages().ai.copyCode, own.copiedLabel ?? messages().ai.copied);
 	};
-	return (() => {
-		var _el$ = _tmpl$();
-		use((el) => root = el, _el$);
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "ai",
-			"data-part": "response",
-			"onClick": onClick,
-			get innerHTML() {
-				return html();
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	ref(() => {
+		return (el) => root = el;
+	}, _el$);
+	spread(_el$, [rest, {
+		"data-scope": "ai",
+		"data-part": "response",
+		onClick,
+		get innerHTML() {
+			return html();
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Response as t };

package/dist/chevron-D5RzcayK.mjs

@@ -0,0 +1,9 @@
+import { template } from "@solidjs/web";
+//#region src/components/ai/chevron.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M6 4l4 4-4 4"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>`);
+/** The folding chevron the shared indicator turns. */
+function chevron() {
+	return _tmpl$();
+}
+//#endregion
+export { chevron as t };

package/dist/components/affix/index.mjs

@@ -1,8 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/affix/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /**
 * A nail: the wrapped content travels with the page until it reaches its
 * offset, then stays put while the page moves on. The semantics are
@@ -15,21 +15,19 @@ var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 function Affix(props) {
 	injectComponentStyle("affix");
 	const [own, rest] = splitProps(props, ["offsetTop", "offsetBottom"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get style() {
-				return {
-					...rest.style,
-					top: own.offsetTop ?? "0px",
-					bottom: own.offsetBottom ?? "0px"
-				};
-			},
-			"data-scope": "affix",
-			"data-part": "root"
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				top: own.offsetTop ?? "0px",
+				bottom: own.offsetBottom ?? "0px"
+			};
+		},
+		"data-scope": "affix",
+		"data-part": "root"
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Affix };

package/dist/components/ai/index.d.mts

@@ -1,2 +1,2 @@
-import { a as AiLoader, c as ReasoningUIPart, d as StepStartUIPart, f as TextUIPart, h as UIMessagePart, i as AiConversation, l as SourceDocumentUIPart, m as UIMessage, n as AiActions, o as DataUIPart, p as ToolUIPart, r as AiContent, s as FileUIPart, t as Ai, u as SourceUrlUIPart } from "../../index-B4XS2n2y.mjs";
+import { a as AiLoader, c as ReasoningUIPart, d as StepStartUIPart, f as TextUIPart, h as UIMessagePart, i as AiConversation, l as SourceDocumentUIPart, m as UIMessage, n as AiActions, o as DataUIPart, p as ToolUIPart, r as AiContent, s as FileUIPart, t as Ai, u as SourceUrlUIPart } from "../../index-IfofF-SW.mjs";
 export { Ai, AiActions, AiContent, AiConversation, AiLoader, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };

package/dist/components/ai/index.mjs

@@ -1,52 +1,51 @@
 import { Action } from "../ai-action/index.mjs";
 import { AiMessage as Message } from "../ai-message/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { AiPromptInput as PromptInput } from "../ai-prompt-input/index.mjs";
 import { AiReasoning as Reasoning } from "../ai-reasoning/index.mjs";
-import { t as Response } from "../../ai-response-B_586r27.mjs";
+import { t as Response } from "../../ai-response-slzE03wh.mjs";
 import { AiSource as Source, AiSources as Sources } from "../ai-source/index.mjs";
 import { AiSuggestion as Suggestion } from "../ai-suggestion/index.mjs";
 import { AiTool as Tool } from "../ai-tool/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 //#region src/components/ai/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-/** A conversation column: Root is the log, Message carries a role, and
-* the speaking parts — Response, Reasoning, Tool, Sources — part the
-* stream. The interactive folds are the shared Collapsible wearing a
-* `data-ai` marker, so the machine work is never ours. Parts stay
-* agnostic of any client; consumers map their message format (e.g. the
-* `UIMessage` parts re-exported here) onto these primitives. */
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function part(name, extra = {}) {
 	function Component(props) {
-		return (() => {
-			var _el$ = _tmpl$();
-			spread(_el$, mergeProps(extra, props, {
+		const messages = useComponentMessages();
+		const partExtra = typeof extra === "function" ? extra(messages()) : extra;
+		var _el$ = _tmpl$();
+		spread(_el$, [
+			partExtra,
+			props,
+			{
 				"data-scope": "ai",
-				get ["data-part"]() {
+				get "data-part"() {
 					return name.toLowerCase();
 				}
-			}), false, false);
-			return _el$;
-		})();
+			}
+		], false);
+		return _el$;
 	}
 	return Component;
 }
 /** The log itself: the column every stroke lands in, a landmark to
 * screen readers. */
-const AiConversation = part("Conversation", {
+const AiConversation = part("Conversation", (messages) => ({
 	role: "log",
-	"aria-label": "Conversation"
-});
+	"aria-label": messages.ai.conversation
+}));
 /** The bubble's inner measure — content that belongs to neither side
 * specifically. */
 const AiContent = part("Content");
 /** The quiet row under a message — copy, retry, feedback. */
 const AiActions = part("Actions");
 /** The while-it-works whisper for the in-flight turns. */
-const AiLoader = part("Loader", {
+const AiLoader = part("Loader", (messages) => ({
 	role: "status",
-	"aria-label": "Loading"
-});
+	"aria-label": messages.ai.loading
+}));
 /** The whole family under one handle — `Ai.Conversation`,
 * `Ai.MessageContent`, and the rest. */
 const Ai = Object.assign(AiConversation, {

package/dist/components/ai-action/index.mjs

@@ -1,6 +1,6 @@
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/ai-action/index.tsx
 /** A quiet icon button — copy, retry, thumbs. The label names it to
@@ -13,7 +13,7 @@ function Action(props) {
 		variant: "ghost",
 		size: "sm",
 		square: true,
-		get ["aria-label"]() {
+		get "aria-label"() {
 			return own.label;
 		},
 		get title() {

package/dist/components/ai-attachments/index.mjs

@@ -1,12 +1,13 @@
+import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { delegateEvents, effect, insert, memo, setAttribute, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/ai-attachments/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><rect x=2.5 y=3.5 width=11 height=9></rect><path d="M2.5 10.5 6 7l3 3 2-1.5 2.5 2"></path><circle cx=6 cy=6 r=0.75 fill=currentColor stroke=none>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 2.5h5l3 3V13.5H4z"></path><path d="M9 2.5v3h3">`);
-var _tmpl$3 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=12 height=12 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 4l8 8M12 4l-8 8">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<span><span></span><button type=button data-remove>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><rect x=2.5 y=3.5 width=11 height=9></rect><path d="M2.5 10.5 6 7l3 3 2-1.5 2.5 2"></path><circle cx=6 cy=6 r=0.75 fill=currentColor stroke=none>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 2.5h5l3 3V13.5H4z"></path><path d="M9 2.5v3h3">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"width=12 height=12 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 4l8 8M12 4l-8 8">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span><span></span><button type=button data-remove>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span>`);
 function imageGlyph() {
 	return _tmpl$();
 }
@@ -54,44 +55,57 @@ function Attachment(props) {
 		"status",
 		"onRemove"
 	]);
-	return (() => {
-		var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
-		spread(_el$4, mergeProps(rest, {
-			"data-scope": "ai",
-			"data-part": "attachment",
-			get ["data-status"]() {
-				return own.status ?? "ready";
-			}
-		}), false, true);
-		insert(_el$4, (() => {
-			var _c$ = memo(() => !!isImage(own.name));
-			return () => _c$() ? imageGlyph() : fileGlyph();
-		})(), _el$5);
-		insert(_el$5, () => own.name);
-		insert(_el$4, (() => {
-			var _c$2 = memo(() => own.size !== void 0);
-			return () => _c$2() ? (() => {
+	const messages = useComponentMessages();
+	var _el$4 = _tmpl$4();
+	var _el$5 = _el$4.firstChild;
+	var _el$6 = _el$5.nextSibling;
+	spread(_el$4, [rest, {
+		"data-scope": "ai",
+		"data-part": "attachment",
+		get "data-status"() {
+			return own.status ?? "ready";
+		}
+	}], true);
+	insert(_el$4, (() => {
+		var _c$ = memo(() => {
+			return !!isImage(own.name);
+		});
+		return () => {
+			return _c$() ? imageGlyph() : fileGlyph();
+		};
+	})(), _el$5);
+	insert(_el$5, () => {
+		return own.name;
+	});
+	insert(_el$4, (() => {
+		var _c$2 = memo(() => {
+			return own.size !== void 0;
+		});
+		return () => {
+			return _c$2() ? (() => {
 				var _el$7 = _tmpl$5();
-				insert(_el$7, () => humanSize(own.size));
+				insert(_el$7, () => {
+					return humanSize(own.size);
+				});
 				return _el$7;
 			})() : null;
-		})(), _el$6);
-		_el$6.$$click = () => own.onRemove?.();
-		insert(_el$6, removeGlyph);
-		effect(() => setAttribute(_el$6, "aria-label", `Remove ${own.name}`));
-		return _el$4;
-	})();
+		};
+	})(), _el$6);
+	_el$6._$$click = () => own.onRemove?.();
+	insert(_el$6, removeGlyph);
+	effect(() => formatComponentMessage(messages().ai.removeAttachment, { name: own.name }), (_v$) => {
+		setAttribute(_el$6, "aria-label", _v$);
+	});
+	return _el$4;
 }
 /** The row the files ride in — a wrapping line of chips. */
 function Attachments(props) {
-	return (() => {
-		var _el$8 = _tmpl$5();
-		spread(_el$8, mergeProps(props, {
-			"data-scope": "ai",
-			"data-part": "attachments"
-		}), false, false);
-		return _el$8;
-	})();
+	var _el$8 = _tmpl$5();
+	spread(_el$8, [props, {
+		"data-scope": "ai",
+		"data-part": "attachments"
+	}], false);
+	return _el$8;
 }
 delegateEvents(["click"]);
 //#endregion

package/dist/components/ai-message/index.mjs

@@ -1,24 +1,22 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/ai-message/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<article>`);
+var _tmpl$ = /* @__PURE__ */ template(`<article>`);
 /** Whose stroke this is — the user's words sit in a recessed bubble,
 * the assistant speaks flat on the paper. */
 function Message(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["role"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "ai",
-			"data-part": "message",
-			get ["data-role"]() {
-				return own.role ?? "assistant";
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "ai",
+		"data-part": "message",
+		get "data-role"() {
+			return own.role ?? "assistant";
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Message as AiMessage, Message };

package/dist/components/ai-prompt-input/index.mjs

@@ -1,14 +1,15 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { Field } from "../field/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { claimElement, createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/ai-prompt-input/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div data-scope=ai>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<form><div data-scope=ai data-part=prompt-main>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=ai>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end><!><!>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<form><div data-scope=ai data-part=prompt-main><!><!><!></div><!>`);
 function arrowUpGlyph() {
 	return _tmpl$();
 }
@@ -43,6 +44,7 @@ function PromptInput(props) {
 		"footer",
 		"footerEnd"
 	]);
+	const messages = useComponentMessages();
 	const send = () => {
 		const value = (own.value ?? "").trim();
 		if (!value || own.disabled || own.busy) return;
@@ -60,7 +62,9 @@ function PromptInput(props) {
 		size: "sm",
 		square: true,
 		type: "button",
-		"aria-label": "Stop",
+		get "aria-label"() {
+			return messages().ai.stop;
+		},
 		get disabled() {
 			return own.disabled;
 		},
@@ -73,7 +77,9 @@ function PromptInput(props) {
 		size: "sm",
 		square: true,
 		type: "submit",
-		"aria-label": "Send",
+		get "aria-label"() {
+			return messages().ai.send;
+		},
 		get disabled() {
 			return own.disabled || !(own.value ?? "").trim();
 		},
@@ -82,55 +88,75 @@ function PromptInput(props) {
 		}
 	});
 	const trailing = () => own.footer != null ? own.trailing : own.trailing ?? seal();
-	return (() => {
-		var _el$4 = _tmpl$5(), _el$5 = _el$4.firstChild;
-		spread(_el$4, mergeProps(rest, {
-			"data-scope": "ai",
-			"data-part": "prompt",
-			"onSubmit": (event) => {
-				event.preventDefault();
-				send();
-			}
-		}), false, true);
-		insert(_el$4, () => row("prompt-header", own.header), _el$5);
-		insert(_el$5, () => row("prompt-leading", own.leading), null);
-		insert(_el$5, createComponent(Field.Root, { get children() {
-			return createComponent(Field.Textarea, {
-				autoresize: true,
-				rows: 1,
-				get value() {
-					return own.value ?? "";
-				},
-				get placeholder() {
-					return own.placeholder ?? "Send a message";
-				},
-				get disabled() {
-					return own.disabled;
-				},
-				onInput: (event) => own.onValueChange?.(event.currentTarget.value),
-				onKeyDown: (event) => {
-					if (event.key === "Enter" && !event.shiftKey) {
-						event.preventDefault();
-						send();
-					}
-				}
-			});
-		} }), null);
-		insert(_el$5, () => row("prompt-trailing", trailing()), null);
-		insert(_el$4, createComponent(Show, {
-			get when() {
-				return own.footer != null;
+	var _el$4 = _tmpl$5();
+	var _el$5 = _el$4.firstChild;
+	var _el$6 = _el$5.firstChild;
+	var _el$7 = _el$6.nextSibling;
+	var _el$8 = _el$7.nextSibling;
+	var _el$13 = _el$5.nextSibling;
+	claimElement(_el$4);
+	spread(_el$4, [rest, {
+		"data-scope": "ai",
+		"data-part": "prompt",
+		onSubmit: (event) => {
+			event.preventDefault();
+			send();
+		}
+	}], true);
+	insert(_el$4, () => {
+		return row("prompt-header", own.header);
+	}, _el$5);
+	insert(_el$5, () => {
+		return row("prompt-leading", own.leading);
+	}, _el$6);
+	insert(_el$5, createComponent(Field.Root, { get children() {
+		return createComponent(Field.Textarea, {
+			autoresize: true,
+			rows: 1,
+			get value() {
+				return own.value ?? "";
+			},
+			get placeholder() {
+				return own.placeholder ?? messages().ai.send;
 			},
-			get children() {
-				var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild;
-				insert(_el$6, () => own.footer, _el$7);
-				insert(_el$7, () => own.footerEnd, null);
-				insert(_el$7, seal, null);
-				return _el$6;
+			get "aria-label"() {
+				return messages().ai.conversation;
+			},
+			get disabled() {
+				return own.disabled;
+			},
+			onInput: (event) => own.onValueChange?.(event.currentTarget.value),
+			onKeyDown: (event) => {
+				if (event.key === "Enter" && !event.shiftKey) {
+					event.preventDefault();
+					send();
+				}
 			}
-		}), null);
-		return _el$4;
-	})();
+		});
+	} }), _el$7);
+	insert(_el$5, () => {
+		return row("prompt-trailing", trailing());
+	}, _el$8);
+	insert(_el$4, createComponent(Show, {
+		get when() {
+			return own.footer != null;
+		},
+		get children() {
+			var _el$9 = _tmpl$4();
+			var _el$10 = _el$9.firstChild;
+			var _el$11 = _el$10.firstChild;
+			var _el$12 = _el$11.nextSibling;
+			insert(_el$9, () => {
+				return own.footer;
+			}, _el$10);
+			insert(_el$10, () => {
+				return own.footerEnd;
+			}, _el$11);
+			insert(_el$10, seal, _el$12);
+			return _el$9;
+		}
+	}), _el$13);
+	return _el$4;
 }
 //#endregion
 export { PromptInput as AiPromptInput, PromptInput };

package/dist/components/ai-reasoning/index.mjs

@@ -1,11 +1,11 @@
-import { t as chevron } from "../../chevron-GWEoEYdO.mjs";
+import { t as chevron } from "../../chevron-D5RzcayK.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, mergeProps, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/ai-reasoning/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div data-scope=ai data-part=reasoning-content>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=ai data-part=reasoning-content>`);
 /** The model's thought, folded by the shared collapsible in its quiet
 * register: bare ink for a trigger, the thought on one hairline. */
 function Reasoning(props) {
@@ -17,14 +17,18 @@ function Reasoning(props) {
 			return [createComponent(Collapsible.Trigger, { get children() {
 				return [(() => {
 					var _el$ = _tmpl$();
-					insert(_el$, () => own.label ?? "Thinking");
+					insert(_el$, () => {
+						return own.label ?? "Thinking";
+					});
 					return _el$;
 				})(), createComponent(Collapsible.Indicator, { get children() {
 					return chevron();
 				} })];
 			} }), createComponent(Collapsible.Content, { get children() {
 				var _el$2 = _tmpl$2();
-				insert(_el$2, () => own.children);
+				insert(_el$2, () => {
+					return own.children;
+				});
 				return _el$2;
 			} })];
 		}

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-B_586r27.mjs";
+import { t as Response } from "../../ai-response-slzE03wh.mjs";
 export { Response as AiResponse, Response };