@bysages/solid 0.3.1 → 0.4.1

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

@@ -1,14 +1,22 @@
+import { n as withSelfRoot } from "./family-Cmd8HEyK.mjs";
+import { n as iconHtml } from "./icon-DTqmJCd5.mjs";
 import { n as useComponentMessages } from "./use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { ref, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { createEffect, createMemo, onMount, splitProps } from "solid-js";
 import { renderHtml } from "@tanstack/markdown/html";
 //#region src/components/ai-response/code-copy.ts
-/** The two glyphs a copy affordance needs: the stamp and its
+/** The two icons a copy affordance needs: the stamp and its
 * confirmation. Inline SVG keeps the enhancement framework-agnostic —
 * it lives beside the renderer's generated code HTML. */
-const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
-const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+const COPY_CODE_ICON = iconHtml("copy", {
+	width: "14",
+	height: "14"
+});
+const COPIED_CODE_ICON = iconHtml("check", {
+	width: "14",
+	height: "14"
+});
 /** How long the confirmation stays before the stamp returns. */
 const REVERT_MS = 1500;
 /** Make sure every fenced block under `host` carries its copy stamp.
@@ -104,7 +112,7 @@ 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. */
-function Response(props) {
+const Response = withSelfRoot(function Response(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, [
 		"content",
@@ -136,6 +144,6 @@ function Response(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Response as t };

package/dist/chevron-BHQrYKPM.mjs

@@ -0,0 +1,8 @@
+import { r as iconNode } from "./icon-DTqmJCd5.mjs";
+//#region src/components/ai/chevron.tsx
+/** The folding chevron the shared indicator turns. */
+function chevron() {
+	return iconNode("chevron-right");
+}
+//#endregion
+export { chevron as t };

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

@@ -1,7 +1,27 @@
-import { Accordion as Accordion$1 } from "@ark-ui/solid/accordion";
+import { Accordion as Accordion$1, AccordionRootProps } from "@ark-ui/solid/accordion";
 //#region src/components/accordion/index.d.ts
 /** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
  * folded by quiet rows, unfolding with a spring-chevoned dissolve. The
  * API is Ark's own — Root, Item, ItemTrigger, ItemContent, ItemIndicator. */
-export declare const Accordion: typeof Accordion$1;
+declare function AccordionRoot(props: AccordionRootProps): import("solid-js").JSX.Element;
+export type AccordionItem = {
+  value: string;
+  title: string;
+  content: string;
+};
+export interface AccordionFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  items: AccordionItem[];
+  multiple?: boolean;
+  collapsible?: boolean;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+  onValueChange?: (value: string[]) => void;
+}
+declare function AccordionFacade(props: AccordionFacadeProps): import("solid-js").JSX.Element;
+type AccordionParts = Omit<typeof Accordion$1, "Root"> & {
+  Root: typeof AccordionRoot;
+};
+export declare const Accordion: typeof AccordionFacade & AccordionParts;
 //#endregion

package/dist/components/accordion/index.mjs

@@ -1,10 +1,76 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
 import { Accordion as Accordion$1 } from "@ark-ui/solid/accordion";
-//#region src/components/accordion/index.ts
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For } from "solid-js";
+//#region src/components/accordion/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<p>`);
 /** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
 * folded by quiet rows, unfolding with a spring-chevoned dissolve. The
 * API is Ark's own — Root, Item, ItemTrigger, ItemContent, ItemIndicator. */
-const Accordion = Accordion$1;
+function AccordionRoot(props) {
+	const id = useElementId("accordion", () => props.id);
+	return createComponent(Accordion$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+function AccordionFacade(props) {
+	injectComponentStyle("accordion");
+	return createComponent(AccordionRoot, mergeProps({
+		get disabled() {
+			return props.disabled;
+		},
+		get multiple() {
+			return props.multiple;
+		},
+		get collapsible() {
+			return props.collapsible;
+		},
+		get orientation() {
+			return props.orientation ?? "vertical";
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return props.items;
+				},
+				children: (item) => createComponent(Accordion$1.Item, {
+					get value() {
+						return item.value;
+					},
+					get children() {
+						return [createComponent(Accordion$1.ItemTrigger, { get children() {
+							return [memo(() => {
+								return item.title;
+							}), createComponent(Accordion$1.ItemIndicator, { get children() {
+								return iconNode("chevron-down");
+							} })];
+						} }), createComponent(Accordion$1.ItemContent, { get children() {
+							var _el$ = _tmpl$();
+							insert(_el$, () => {
+								return item.content;
+							});
+							return _el$;
+						} })];
+					}
+				})
+			});
+		}
+	}));
+}
+const Accordion = defineFamily(AccordionFacade, {
+	...Accordion$1,
+	Root: AccordionRoot
+});
 injectComponentStyle("accordion");
 //#endregion
 export { Accordion };

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

@@ -16,5 +16,7 @@ export interface AffixProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * `overflow: hidden` clips the pin. Both offsets may be given: the
  * content then holds its place inside that band.
  */
-export declare function Affix(props: AffixProps): JSX.Element;
+export declare const Affix: ((props: AffixProps) => JSX.Element) & {
+  Root: (props: AffixProps) => JSX.Element;
+};
 //#endregion

package/dist/components/affix/index.mjs

@@ -1,5 +1,6 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/affix/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
@@ -12,7 +13,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 * `overflow: hidden` clips the pin. Both offsets may be given: the
 * content then holds its place inside that band.
 */
-function Affix(props) {
+const Affix = withSelfRoot(function Affix(props) {
 	injectComponentStyle("affix");
 	const [own, rest] = splitProps(props, ["offsetTop", "offsetBottom"]);
 	var _el$ = _tmpl$();
@@ -20,14 +21,14 @@ function Affix(props) {
 		get style() {
 			return {
 				...rest.style,
-				top: own.offsetTop ?? "0px",
-				bottom: own.offsetBottom ?? "0px"
+				"--bs-affix-top": own.offsetTop,
+				"--bs-affix-bottom": own.offsetBottom
 			};
 		},
 		"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-IfofF-SW.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-DVc1L_zt.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,14 +1,15 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 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-slzE03wh.mjs";
+import { t as Response } from "../../ai-response-CJ-uEAgj.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 { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/ai/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function part(name, extra = {}) {
@@ -38,14 +39,14 @@ const AiConversation = part("Conversation", (messages) => ({
 }));
 /** The bubble's inner measure — content that belongs to neither side
 * specifically. */
-const AiContent = part("Content");
+const AiContent = withSelfRoot(part("Content"));
 /** The quiet row under a message — copy, retry, feedback. */
-const AiActions = part("Actions");
+const AiActions = withSelfRoot(part("Actions"));
 /** The while-it-works whisper for the in-flight turns. */
-const AiLoader = part("Loader", (messages) => ({
+const AiLoader = withSelfRoot(part("Loader", (messages) => ({
 	role: "status",
 	"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.d.mts

@@ -8,6 +8,8 @@ export interface ActionProps extends JSX.HTMLAttributes<HTMLButtonElement> {
 /** A quiet icon button — copy, retry, thumbs. The label names it to
  * assistive tech and as the hover title. The control itself is the
  * shared Button in its ghost register. */
-export declare function Action(props: ActionProps): JSX.Element;
+export declare const Action: ((props: ActionProps) => JSX.Element) & {
+  Root: (props: ActionProps) => JSX.Element;
+};
 //#endregion
 export { Action as AiAction };

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

@@ -1,12 +1,13 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { Button } from "../button/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/ai-action/index.tsx
 /** A quiet icon button — copy, retry, thumbs. The label names it to
 * assistive tech and as the hover title. The control itself is the
 * shared Button in its ghost register. */
-function Action(props) {
+const Action = withSelfRoot(function Action(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["label", "children"]);
 	return createComponent(Button, mergeProps({
@@ -22,6 +23,6 @@ function Action(props) {
 	}, rest, { get children() {
 		return own.children;
 	} }));
-}
+});
 //#endregion
 export { Action, Action as AiAction };

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

@@ -2,7 +2,7 @@ import { JSX } from "solid-js";
 //#region src/components/ai-attachments/index.d.ts
 export type AttachmentStatus = "uploading" | "ready" | "error";
 export interface AttachmentProps extends JSX.HTMLAttributes<HTMLSpanElement> {
-  /** The file's name — it picks the glyph by extension. */
+  /** The file's name — it picks the icon by extension. */
   name: string;
   /** The file's size in bytes, when known — rendered human. */
   size?: number;
@@ -10,11 +10,15 @@ export interface AttachmentProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   status?: AttachmentStatus;
   onRemove?: () => void;
 }
-/** One file riding the prompt: its glyph by extension, its name and
+/** One file riding the prompt: its icon by extension, its name and
  * human size, and a quiet way to take it back off. Uploading reads as
  * a dashed ghost, error as danger ink. */
-export declare function Attachment(props: AttachmentProps): JSX.Element;
+export declare const Attachment: ((props: AttachmentProps) => JSX.Element) & {
+  Root: (props: AttachmentProps) => JSX.Element;
+};
 /** The row the files ride in — a wrapping line of chips. */
-export declare function Attachments(props: JSX.HTMLAttributes<HTMLSpanElement>): JSX.Element;
+export declare const Attachments: ((props: JSX.HTMLAttributes<HTMLSpanElement>) => JSX.Element) & {
+  Root: (props: JSX.HTMLAttributes<HTMLSpanElement>) => JSX.Element;
+};
 //#endregion
 export { Attachment as AiAttachment, Attachments as AiAttachments };

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

@@ -1,21 +1,23 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { delegateEvents, effect, insert, memo, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 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>`);
-function imageGlyph() {
-	return _tmpl$();
+var _tmpl$ = /* @__PURE__ */ template(`<span><span></span><button type=button data-remove>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+function imageIcon() {
+	return iconNode("image");
 }
-function fileGlyph() {
-	return _tmpl$2();
+function fileIcon() {
+	return iconNode("file");
 }
-function removeGlyph() {
-	return _tmpl$3();
+function removeIcon() {
+	return iconNode("x", {
+		width: "12",
+		height: "12"
+	});
 }
 const IMAGE_EXTS = [
 	"png",
@@ -44,10 +46,10 @@ const humanSize = (bytes) => {
 	} while (value >= 1024 && unit < units.length - 1);
 	return `${value.toFixed(1)} ${units[unit]}`;
 };
-/** One file riding the prompt: its glyph by extension, its name and
+/** One file riding the prompt: its icon by extension, its name and
 * human size, and a quiet way to take it back off. Uploading reads as
 * a dashed ghost, error as danger ink. */
-function Attachment(props) {
+const Attachment = withSelfRoot(function Attachment(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, [
 		"name",
@@ -56,57 +58,57 @@ function Attachment(props) {
 		"onRemove"
 	]);
 	const messages = useComponentMessages();
-	var _el$4 = _tmpl$4();
-	var _el$5 = _el$4.firstChild;
-	var _el$6 = _el$5.nextSibling;
-	spread(_el$4, [rest, {
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
+	spread(_el$, [rest, {
 		"data-scope": "ai",
 		"data-part": "attachment",
 		get "data-status"() {
 			return own.status ?? "ready";
 		}
 	}], true);
-	insert(_el$4, (() => {
+	insert(_el$, (() => {
 		var _c$ = memo(() => {
 			return !!isImage(own.name);
 		});
 		return () => {
-			return _c$() ? imageGlyph() : fileGlyph();
+			return _c$() ? imageIcon() : fileIcon();
 		};
-	})(), _el$5);
-	insert(_el$5, () => {
+	})(), _el$2);
+	insert(_el$2, () => {
 		return own.name;
 	});
-	insert(_el$4, (() => {
+	insert(_el$, (() => {
 		var _c$2 = memo(() => {
 			return own.size !== void 0;
 		});
 		return () => {
 			return _c$2() ? (() => {
-				var _el$7 = _tmpl$5();
-				insert(_el$7, () => {
+				var _el$4 = _tmpl$2();
+				insert(_el$4, () => {
 					return humanSize(own.size);
 				});
-				return _el$7;
+				return _el$4;
 			})() : null;
 		};
-	})(), _el$6);
-	_el$6._$$click = () => own.onRemove?.();
-	insert(_el$6, removeGlyph);
+	})(), _el$3);
+	_el$3._$$click = () => own.onRemove?.();
+	insert(_el$3, removeIcon);
 	effect(() => formatComponentMessage(messages().ai.removeAttachment, { name: own.name }), (_v$) => {
-		setAttribute(_el$6, "aria-label", _v$);
+		setAttribute(_el$3, "aria-label", _v$);
 	});
-	return _el$4;
-}
+	return _el$;
+});
 /** The row the files ride in — a wrapping line of chips. */
-function Attachments(props) {
-	var _el$8 = _tmpl$5();
-	spread(_el$8, [props, {
+const Attachments = withSelfRoot(function Attachments(props) {
+	var _el$5 = _tmpl$2();
+	spread(_el$5, [props, {
 		"data-scope": "ai",
 		"data-part": "attachments"
 	}], false);
-	return _el$8;
-}
+	return _el$5;
+});
 delegateEvents(["click"]);
 //#endregion
 export { Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments };

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

@@ -8,6 +8,8 @@ export interface MessageProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "rol
 }
 /** Whose stroke this is — the user's words sit in a recessed bubble,
  * the assistant speaks flat on the paper. */
-export declare function Message(props: MessageProps): JSX.Element;
+export declare const Message: ((props: MessageProps) => JSX.Element) & {
+  Root: (props: MessageProps) => JSX.Element;
+};
 //#endregion
 export { Message as AiMessage };

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

@@ -1,11 +1,12 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/ai-message/index.tsx
 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) {
+const Message = withSelfRoot(function Message(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["role"]);
 	var _el$ = _tmpl$();
@@ -17,6 +18,6 @@ function Message(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Message as AiMessage, Message };

package/dist/components/ai-prompt-input/index.d.mts

@@ -40,6 +40,8 @@ export interface PromptInputProps extends Omit<JSX.HTMLAttributes<HTMLFormElemen
  * and take the text on `onSubmit`. Enter sends; Shift+Enter breaks the
  * line. While `busy` the seal becomes a stop seal and Enter holds its
  * breath. */
-export declare function PromptInput(props: PromptInputProps): JSX.Element;
+export declare const PromptInput: ((props: PromptInputProps) => JSX.Element) & {
+  Root: (props: PromptInputProps) => JSX.Element;
+};
 //#endregion
 export { PromptInput as AiPromptInput };

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

@@ -1,20 +1,24 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 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 { claimElement, createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 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><!><!><!></div><!>`);
-function arrowUpGlyph() {
-	return _tmpl$();
+var _tmpl$ = /* @__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$2 = /* @__PURE__ */ template(`<div data-scope=ai>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end><!><!>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<form><div data-scope=ai data-part=prompt-main><!><!><!></div><!>`);
+function arrowUpIcon() {
+	return iconNode("arrow-up", {
+		width: "14",
+		height: "14"
+	});
 }
-function stopGlyph() {
-	return _tmpl$2();
+function stopIcon() {
+	return _tmpl$();
 }
 /** The prompt vessel: the shared field textarea — self-growing on the
 * machine's autoresize — with the submit seal riding its last line.
@@ -28,7 +32,7 @@ function stopGlyph() {
 * and take the text on `onSubmit`. Enter sends; Shift+Enter breaks the
 * line. While `busy` the seal becomes a stop seal and Enter holds its
 * breath. */
-function PromptInput(props) {
+const PromptInput = withSelfRoot(function PromptInput(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -52,10 +56,10 @@ function PromptInput(props) {
 		own.onValueChange?.("");
 	};
 	const row = (part, content) => content != null ? (() => {
-		var _el$3 = _tmpl$3();
-		setAttribute(_el$3, "data-part", part);
-		insert(_el$3, content);
-		return _el$3;
+		var _el$2 = _tmpl$2();
+		setAttribute(_el$2, "data-part", part);
+		insert(_el$2, content);
+		return _el$2;
 	})() : null;
 	const seal = () => own.busy ? createComponent(Button, {
 		variant: "solid",
@@ -70,7 +74,7 @@ function PromptInput(props) {
 		},
 		onClick: () => own.onStop?.(),
 		get children() {
-			return stopGlyph();
+			return stopIcon();
 		}
 	}) : createComponent(Button, {
 		variant: "solid",
@@ -84,18 +88,18 @@ function PromptInput(props) {
 			return own.disabled || !(own.value ?? "").trim();
 		},
 		get children() {
-			return arrowUpGlyph();
+			return arrowUpIcon();
 		}
 	});
 	const trailing = () => own.footer != null ? own.trailing : own.trailing ?? seal();
-	var _el$4 = _tmpl$5();
+	var _el$3 = _tmpl$4();
+	var _el$4 = _el$3.firstChild;
 	var _el$5 = _el$4.firstChild;
-	var _el$6 = _el$5.firstChild;
+	var _el$6 = _el$5.nextSibling;
 	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, {
+	var _el$12 = _el$4.nextSibling;
+	claimElement(_el$3);
+	spread(_el$3, [rest, {
 		"data-scope": "ai",
 		"data-part": "prompt",
 		onSubmit: (event) => {
@@ -103,13 +107,13 @@ function PromptInput(props) {
 			send();
 		}
 	}], true);
-	insert(_el$4, () => {
+	insert(_el$3, () => {
 		return row("prompt-header", own.header);
-	}, _el$5);
-	insert(_el$5, () => {
+	}, _el$4);
+	insert(_el$4, () => {
 		return row("prompt-leading", own.leading);
-	}, _el$6);
-	insert(_el$5, createComponent(Field.Root, { get children() {
+	}, _el$5);
+	insert(_el$4, createComponent(Field.Root, { get children() {
 		return createComponent(Field.Textarea, {
 			autoresize: true,
 			rows: 1,
@@ -133,30 +137,30 @@ function PromptInput(props) {
 				}
 			}
 		});
-	} }), _el$7);
-	insert(_el$5, () => {
+	} }), _el$6);
+	insert(_el$4, () => {
 		return row("prompt-trailing", trailing());
-	}, _el$8);
-	insert(_el$4, createComponent(Show, {
+	}, _el$7);
+	insert(_el$3, createComponent(Show, {
 		get when() {
 			return own.footer != null;
 		},
 		get children() {
-			var _el$9 = _tmpl$4();
+			var _el$8 = _tmpl$3();
+			var _el$9 = _el$8.firstChild;
 			var _el$10 = _el$9.firstChild;
-			var _el$11 = _el$10.firstChild;
-			var _el$12 = _el$11.nextSibling;
-			insert(_el$9, () => {
+			var _el$11 = _el$10.nextSibling;
+			insert(_el$8, () => {
 				return own.footer;
-			}, _el$10);
-			insert(_el$10, () => {
+			}, _el$9);
+			insert(_el$9, () => {
 				return own.footerEnd;
-			}, _el$11);
-			insert(_el$10, seal, _el$12);
-			return _el$9;
+			}, _el$10);
+			insert(_el$9, seal, _el$11);
+			return _el$8;
 		}
-	}), _el$13);
-	return _el$4;
-}
+	}), _el$12);
+	return _el$3;
+});
 //#endregion
 export { PromptInput as AiPromptInput, PromptInput };