@bysages/solid 0.3.0 → 0.4.0

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

@@ -13,5 +13,7 @@ export interface WatermarkProps extends JSX.HTMLAttributes<HTMLDivElement> {
   rotate?: number;
   fontSize?: string;
 }
-export declare function Watermark(props: WatermarkProps): JSX.Element;
+export declare const Watermark: ((props: WatermarkProps) => JSX.Element) & {
+  Root: (props: WatermarkProps) => JSX.Element;
+};
 //#endregion

package/dist/components/watermark/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
 import { createEffect, createSignal, splitProps } from "solid-js";
@@ -12,7 +13,7 @@ function toPx(size) {
 	if (size.includes("em")) return value * root;
 	return value;
 }
-function Watermark(props) {
+const Watermark = withSelfRoot(function Watermark(props) {
 	injectComponentStyle("watermark");
 	const [own, rest] = splitProps(props, [
 		"content",
@@ -69,9 +70,9 @@ function Watermark(props) {
 		return rest.children;
 	});
 	effect(() => tile(), (_v$) => {
-		setStyleProperty(_el$3, "background-image", _v$);
+		setStyleProperty(_el$3, "--bs-watermark-image", _v$);
 	});
 	return _el$;
-}
+});
 //#endregion
 export { Watermark };

package/dist/element-dGIhOTJ6.mjs

@@ -0,0 +1,16 @@
+import { spread } from "solid-js/web";
+//#region src/internal/element.tsx
+/** Detect a host element without assuming one exists during SSR. */
+function isElement(value) {
+	return typeof Element !== "undefined" && value instanceof Element;
+}
+/** Graft machine props onto a caller-owned Solid element. Solid elements
+* are concrete nodes rather than cloneable vnodes, so this uses the same
+* runtime spread that JSX spread compiles to.
+*/
+function withElementProps(element, props) {
+	spread(element, props, element instanceof SVGElement, true);
+	return element;
+}
+//#endregion
+export { withElementProps as n, isElement as t };

package/dist/family-Cmd8HEyK.mjs

@@ -0,0 +1,11 @@
+//#region src/internal/family.ts
+/** Attaches anatomy parts to a callable family facade. */
+function defineFamily(facade, parts) {
+	return Object.assign(facade, parts);
+}
+/** Gives a single-component family the same callable + Root surface. */
+function withSelfRoot(component) {
+	return Object.assign(component, { Root: component });
+}
+//#endregion
+export { withSelfRoot as n, defineFamily as t };

package/dist/icon-DTqmJCd5.mjs

@@ -0,0 +1,48 @@
+import { spread, template } from "@solidjs/web";
+import { getIcon } from "@bysages/core/icons";
+//#region src/internal/icon.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg>`);
+function resolve(name) {
+	const icon = getIcon(name);
+	if (!icon) throw new Error(`Unknown icon "${name}" in the curated core registry`);
+	return icon;
+}
+/** Render a curated core icon as a bare svg node — the components' own
+* default icons. No span shell: the part rules size the svg directly.
+* Extra body appends after the icon's own body, for composed marks. */
+function iconNode(name, attrs = {}, extraBody = "") {
+	const icon = resolve(name);
+	var _el$ = _tmpl$();
+	spread(_el$, [
+		{
+			get viewBox() {
+				return `0 0 ${icon.width} ${icon.height}`;
+			},
+			"aria-hidden": "true"
+		},
+		attrs,
+		{ get innerHTML() {
+			return icon.body + extraBody;
+		} }
+	], false);
+	return _el$;
+}
+/** The same curated icon as an HTML string, for enhancements that write
+* innerHTML rather than mount elements. */
+function iconHtml(name, attrs = {}) {
+	const icon = resolve(name);
+	const attributes = {
+		width: String(icon.width),
+		height: String(icon.height),
+		viewBox: `0 0 ${icon.width} ${icon.height}`,
+		"aria-hidden": "true",
+		...attrs
+	};
+	return `<svg${Object.entries(attributes).map(([key, value]) => ` ${key}="${value}"`).join("")}>${icon.body}</svg>`;
+}
+/** The curated icon's drawing body, for composed marks that share one svg. */
+function iconBody(name) {
+	return resolve(name).body;
+}
+//#endregion
+export { iconHtml as n, iconNode as r, iconBody as t };

package/dist/id-2ygNzPHF.mjs

@@ -0,0 +1,12 @@
+import { createUniqueId } from "solid-js";
+//#region src/internal/id.ts
+/** Generates an SSR-stable machine base id while honoring an explicit id. */
+function useElementId(scope, explicit) {
+	const generated = createUniqueId();
+	return () => {
+		const id = explicit?.();
+		return typeof id === "string" && id ? id : `bs-${scope}-${generated}`;
+	};
+}
+//#endregion
+export { useElementId as t };

package/dist/image-viewer-B9A5lXsk.mjs

@@ -0,0 +1,228 @@
+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 { Button } from "./components/button/index.mjs";
+import { n as useComponentMessages } from "./use-component-messages-C4SCVYjD.mjs";
+import { ButtonGroup } from "./components/button-group/index.mjs";
+import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
+import { Show, createEffect, createSignal, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import { Dialog } from "@ark-ui/solid/dialog";
+//#region src/components/image-viewer/preview.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<span data-part=preview-label>`);
+var _tmpl$2$1 = /* @__PURE__ */ template(`<span data-scope=image-viewer data-part=preview-overlay aria-hidden=true><!><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+/** The default doorway is the curated preview icon; custom content keeps
+* that icon as its hover and focus affordance. */
+function ImageViewerPreview(props) {
+	injectComponentStyle("image-viewer");
+	const messages = useComponentMessages();
+	const [own, triggerProps, rest] = splitProps(props, ["label", "children"], ["data-part"]);
+	const parts = [triggerProps["data-part"], "preview"].filter(Boolean).join(" ");
+	const isIcon = () => own.children == null;
+	var _el$ = _tmpl$3();
+	spread(_el$, [
+		rest,
+		{
+			"data-scope": "image-viewer",
+			"data-part": parts
+		},
+		() => {
+			return isIcon() ? {
+				"data-empty": "true",
+				"aria-label": messages().imageViewer.preview
+			} : {};
+		}
+	], true);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return own.children;
+		},
+		get fallback() {
+			return iconNode("eye");
+		},
+		get children() {
+			return [memo(() => {
+				return own.children;
+			}), (() => {
+				var _el$2 = _tmpl$2$1();
+				var _el$3 = _el$2.firstChild;
+				var _el$5 = _el$3.nextSibling;
+				insert(_el$2, () => {
+					return iconNode("eye");
+				}, _el$3);
+				insert(_el$2, createComponent(Show, {
+					get when() {
+						return own.label;
+					},
+					get children() {
+						var _el$4 = _tmpl$$1();
+						insert(_el$4, () => {
+							return own.label;
+						});
+						return _el$4;
+					}
+				}), _el$5);
+				return _el$2;
+			})()];
+		}
+	}));
+	return _el$;
+}
+//#endregion
+//#region src/components/image-viewer/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<img data-scope=image-viewer data-part=viewport>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=image-viewer data-part=toolbar>`);
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+/** The toolbar's icons, drawn from the house icon set. */
+const TOOL_ICONS = {
+	zoomIn: () => iconNode("zoom-in"),
+	zoomOut: () => iconNode("zoom-out"),
+	rotate: () => iconNode("rotate-cw"),
+	close: () => iconNode("x")
+};
+function ImageViewerImpl(props) {
+	injectComponentStyle("image-viewer");
+	const [own] = splitProps(props, [
+		"src",
+		"alt",
+		"width",
+		"height",
+		"open",
+		"zoomable",
+		"onOpenChange",
+		"children"
+	]);
+	const id = useElementId("image-viewer");
+	const messages = useComponentMessages();
+	const [localOpen, setLocalOpen] = createSignal(false);
+	const [scale, setScale] = createSignal(1);
+	const [rotation, setRotation] = createSignal(0);
+	const isOpen = () => own.open ?? localOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setLocalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (isOpen()) {
+			setScale(1);
+			setRotation(0);
+		}
+	});
+	function zoom(step) {
+		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
+	}
+	function rotate() {
+		setRotation((rotation() + 90) % 360);
+	}
+	function toolButton(label, icon, onClick) {
+		return createComponent(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			get children() {
+				return icon();
+			}
+		});
+	}
+	return createComponent(Dialog.Root, {
+		get id() {
+			return id();
+		},
+		get open() {
+			return isOpen();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		get children() {
+			return [createComponent(Dialog.Trigger, {
+				asChild: () => own.children ?? createComponent(ImageViewerPreview, {}),
+				"data-scope": "image-viewer",
+				"data-part": "trigger"
+			}), createComponent(Portal, { get children() {
+				return [createComponent(Dialog.Backdrop, { class: "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
+					class: "bs-image-viewer-positioner",
+					get children() {
+						return createComponent(Dialog.Content, {
+							class: "bs-image-viewer-content",
+							get "aria-label"() {
+								return own.alt || "Image preview";
+							},
+							onClick: (event) => {
+								if (event.target === event.currentTarget) setOpen(false);
+							},
+							get children() {
+								return [(() => {
+									var _el$ = _tmpl$();
+									effect(() => {
+										return {
+											e: own.src,
+											t: own.alt ?? "",
+											a: own.width,
+											o: own.height,
+											i: `scale(${scale()}) rotate(${rotation()}deg)`
+										};
+									}, ({ e, t, a, o, i }, _p$) => {
+										e !== _p$?.e && setAttribute(_el$, "src", e);
+										t !== _p$?.t && setAttribute(_el$, "alt", t);
+										a !== _p$?.a && setAttribute(_el$, "width", a);
+										o !== _p$?.o && setAttribute(_el$, "height", o);
+										i !== _p$?.i && setStyleProperty(_el$, "--bs-image-viewer-transform", i);
+									});
+									return _el$;
+								})(), (() => {
+									var _el$2 = _tmpl$2();
+									insert(_el$2, createComponent(ButtonGroup, { get children() {
+										return [
+											createComponent(Show, {
+												get when() {
+													return own.zoomable ?? true;
+												},
+												get children() {
+													return [memo(() => {
+														return toolButton(messages().imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => zoom(SCALE_STEP));
+													}), memo(() => {
+														return toolButton(messages().imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => zoom(-.25));
+													})];
+												}
+											}),
+											memo(() => {
+												return toolButton(messages().imageViewer.rotate, TOOL_ICONS.rotate, rotate);
+											}),
+											createComponent(Dialog.CloseTrigger, { asChild: (closeProps) => createComponent(Button, mergeProps(closeProps, {
+												variant: "ghost",
+												square: true,
+												size: "lg",
+												get "aria-label"() {
+													return messages().imageViewer.close;
+												},
+												get children() {
+													return TOOL_ICONS.close();
+												}
+											})) })
+										];
+									} }));
+									return _el$2;
+								})()];
+							}
+						});
+					}
+				})];
+			} })];
+		}
+	});
+}
+const viewerParts = {
+	...Dialog$1,
+	Preview: ImageViewerPreview
+};
+const ImageViewer = defineFamily(ImageViewerImpl, viewerParts);
+//#endregion
+export { ImageViewer as t };

package/dist/{index-B1xiJ5ki.d.mts → index-B1-quIrl.d.mts}

@@ -1787,7 +1787,9 @@ interface AnyFormApi {
 interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {
   form: AnyFormApi;
 }
-declare function Form(props: FormProps): JSX.Element;
+declare const Form: ((props: FormProps) => JSX.Element) & {
+  Root: (props: FormProps) => JSX.Element;
+};
 /**
  * The named slot in the grid: label, control, hint — and the engine's
  * errors for this name, shown through the same parts the standalone
@@ -1806,6 +1808,8 @@ interface FormFieldProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "child
   disabled?: boolean;
   children?: JSX.Element | ((field: any) => JSX.Element);
 }
-declare function FormField(props: FormFieldProps): JSX.Element;
+declare const FormField: ((props: FormFieldProps) => JSX.Element) & {
+  Root: (props: FormFieldProps) => JSX.Element;
+};
 //#endregion
 export { SolidFormApi as a, FormApi as c, FormProps as i, FieldApi as l, FormField as n, createField as o, FormFieldProps as r, createForm as s, Form as t };

package/dist/{index-DDX7x8aT.d.mts → index-DEArHiFI.d.mts}

@@ -1,3 +1,4 @@
+import { Popover } from "./components/popover/index.mjs";
 import { Accessor, JSX } from "solid-js";
 //#region src/components/mentions/use-mentions.d.ts
 interface UseMentionsOptions {
@@ -33,6 +34,9 @@ declare function useMentions(options: Accessor<UseMentionsOptions>, textarea: Ac
 };
 //#endregion
 //#region src/components/mentions/index.d.ts
+/** The Anchor's polymorphic wiring is div-typed at the API boundary; the
+ * textarea host supplies the concrete element type. */
+type MentionsAnchorProps = JSX.HTMLAttributes<HTMLTextAreaElement>;
 interface MentionEntry {
   label: string;
   value: string;
@@ -49,13 +53,17 @@ interface MentionsVesselProps {
   onInsert?: (entry: MentionEntry) => void;
   onActiveChange?: (index: number) => void;
   onOpenChange?: (open: boolean) => void;
+  /** The host's field, rendered with the popover Anchor's wiring. When
+   * absent, the vessel falls back to the `anchor` rectangle. */
+  children?: JSX.Element | ((anchorProps: MentionsAnchorProps) => JSX.Element);
 }
-/** The vessel: the candidates themselves as a floating card. The anchor
- * is virtual — a live rectangle off the host's field — so a host keeps
- * its own anatomy (the textarea rides where the host puts it) and the
- * vessel still points at the right place. Shares the detection state
- * with the host through `useMentions`. */
-declare function MentionsVessel(props: MentionsVesselProps): JSX.Element;
+/** The vessel: the candidates themselves as a floating card. A host can
+ * render its field through the Anchor; the rectangle fallback keeps the
+ * textarea in the host's own anatomy. Shares the detection state with
+ * the host through `useMentions`. */
+declare const MentionsVessel: ((props: MentionsVesselProps) => JSX.Element) & {
+  Root: (props: MentionsVesselProps) => JSX.Element;
+};
 interface MentionsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onInput"> {
   /** The candidates offered once the trigger character is typed. */
   items?: MentionEntry[];
@@ -90,6 +98,7 @@ interface MentionsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onInpu
  * own field anatomy (the AI prompt input) skip this shell and wire
  * `useMentions` plus `MentionsVessel` themselves.
  */
-declare function Mentions(props: MentionsProps): JSX.Element;
+declare function MentionsImpl(props: MentionsProps): JSX.Element;
+declare const Mentions: typeof MentionsImpl & typeof Popover;
 //#endregion
 export { MentionsVesselProps as a, useMentions as c, MentionsVessel as i, Mentions as n, UseMentionsHandlers as o, MentionsProps as r, UseMentionsOptions as s, MentionEntry as t };

package/dist/index-DhripUtf.d.mts

@@ -0,0 +1,39 @@
+import { Dialog } from "./components/dialog/index.mjs";
+import { JSX } from "solid-js";
+//#region src/components/image-viewer/preview.d.ts
+interface ImageViewerPreviewProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /** Visible beside the affordance over custom content. */
+  label?: string;
+  "data-part"?: string;
+  /** Custom doorway content; omit it for the default curated icon. */
+  children?: JSX.Element;
+}
+/** The default doorway is the curated preview icon; custom content keeps
+ * that icon as its hover and focus affordance. */
+declare function ImageViewerPreview(props: ImageViewerPreviewProps): JSX.Element;
+//#endregion
+//#region src/components/image-viewer/index.d.ts
+/**
+ * Opens the full lightbox from a curated icon by default, or from any
+ * wrapped button, image or other doorway. Zoom, rotation, Escape and the scrim
+ * stay in the viewer. Anatomy remains available on `ImageViewer.Root`.
+ */
+interface ImageViewerProps {
+  src: string;
+  alt?: string;
+  /** The large image handed to the lightbox. */
+  width?: number | string;
+  height?: number | string;
+  /** The wrapped content that opens the lightbox. */
+  children?: JSX.Element;
+  open?: boolean;
+  zoomable?: boolean;
+  /** The openness changed — from the scrim, Escape or the toolbar. */
+  onOpenChange?: (open: boolean) => void;
+}
+declare function ImageViewerImpl(props: ImageViewerProps): JSX.Element;
+declare const ImageViewer: typeof ImageViewerImpl & (typeof Dialog & {
+  Preview: typeof ImageViewerPreview;
+});
+//#endregion
+export { ImageViewerProps as n, ImageViewer as t };

package/dist/{index-YPUiqD3n.d.mts → index-ID48LCMU.d.mts}

@@ -35,8 +35,34 @@ type SelectOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SelectRoot<T extends CollectionItem>(props: SelectRootProps<T> & SelectOwnProps): import("solid-js").JSX.Element;
-declare const Select$1: Omit<typeof Select, "Root"> & {
+type SelectFacadeValue = string | string[];
+type SelectParts = Omit<typeof Select, "Root"> & {
   Root: typeof SelectRoot;
 };
+interface SelectFacadeProps {
+  value?: SelectFacadeValue;
+  defaultValue?: SelectFacadeValue;
+  options: NativeSelectOption[];
+  multiple?: boolean;
+  deselectable?: boolean;
+  /** Show the clear-value control when the machine allows it. */
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  label?: string;
+  /** Heading above the flat option list. */
+  groupLabel?: string;
+  placeholder?: string;
+  name?: string;
+  form?: string;
+  autoComplete?: string;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string | string[]) => void;
+}
+declare function SelectFacade(props: SelectFacadeProps): import("solid-js").JSX.Element;
+declare const Select$1: typeof SelectFacade & SelectParts;
 //#endregion
-export { NativeSelectProps as i, NativeSelect as n, NativeSelectOption as r, Select$1 as t };
+export { NativeSelectProps as a, NativeSelectOption as i, SelectFacadeProps as n, NativeSelect as r, Select$1 as t };

package/dist/{index-IfofF-SW.d.mts → index-nFXK_8hJ.d.mts}

@@ -1,11 +1,11 @@
-import { Action } from "./components/ai-action/index.mjs";
-import { AiMessage as Message } from "./components/ai-message/index.mjs";
-import { AiPromptInput as PromptInput } from "./components/ai-prompt-input/index.mjs";
-import { AiReasoning as Reasoning } from "./components/ai-reasoning/index.mjs";
-import { AiResponse as Response$1 } from "./components/ai-response/index.mjs";
-import { AiSource as Source$1, AiSources as Sources } from "./components/ai-source/index.mjs";
-import { AiSuggestion as Suggestion } from "./components/ai-suggestion/index.mjs";
-import { AiTool as Tool$1 } from "./components/ai-tool/index.mjs";
+import { ActionProps } from "./components/ai-action/index.mjs";
+import { MessageProps } from "./components/ai-message/index.mjs";
+import { PromptInputProps } from "./components/ai-prompt-input/index.mjs";
+import { ReasoningProps } from "./components/ai-reasoning/index.mjs";
+import { ResponseProps } from "./components/ai-response/index.mjs";
+import { SourceProps } from "./components/ai-source/index.mjs";
+import { SuggestionProps } from "./components/ai-suggestion/index.mjs";
+import { ToolProps } from "./components/ai-tool/index.mjs";
 import { JSX } from "solid-js";
 import { JSONSchema7, JSONSchema7 as JSONSchema7$1 } from "json-schema";
 import { $ZodType } from "zod/v4/core";
@@ -10330,27 +10330,57 @@ declare global {
 declare const AiConversation: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 /** The bubble's inner measure — content that belongs to neither side
  * specifically. */
-declare const AiContent: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+declare const AiContent: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+  Root: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};
 /** The quiet row under a message — copy, retry, feedback. */
-declare const AiActions: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+declare const AiActions: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+  Root: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};
 /** The while-it-works whisper for the in-flight turns. */
-declare const AiLoader: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+declare const AiLoader: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+  Root: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};
 /** The whole family under one handle — `Ai.Conversation`,
  * `Ai.MessageContent`, and the rest. */
 declare const Ai: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
   Conversation: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
-  MessageContent: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
-  Actions: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
-  Loader: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
-  Message: typeof Message;
-  Response: typeof Response$1;
-  Reasoning: typeof Reasoning;
-  Tool: typeof Tool$1;
-  Sources: typeof Sources;
-  Source: typeof Source$1;
-  Action: typeof Action;
-  Suggestion: typeof Suggestion;
-  PromptInput: typeof PromptInput;
+  MessageContent: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+    Root: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  };
+  Actions: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+    Root: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  };
+  Loader: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+    Root: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  };
+  Message: ((props: MessageProps) => JSX.Element) & {
+    Root: (props: MessageProps) => JSX.Element;
+  };
+  Response: ((props: ResponseProps) => JSX.Element) & {
+    Root: (props: ResponseProps) => JSX.Element;
+  };
+  Reasoning: ((props: ReasoningProps) => JSX.Element) & {
+    Root: (props: ReasoningProps) => JSX.Element;
+  };
+  Tool: ((props: ToolProps) => JSX.Element) & {
+    Root: (props: ToolProps) => JSX.Element;
+  };
+  Sources: ((props: JSX.HTMLAttributes<HTMLOListElement>) => JSX.Element) & {
+    Root: (props: JSX.HTMLAttributes<HTMLOListElement>) => JSX.Element;
+  };
+  Source: ((props: SourceProps) => JSX.Element) & {
+    Root: (props: SourceProps) => JSX.Element;
+  };
+  Action: ((props: ActionProps) => JSX.Element) & {
+    Root: (props: ActionProps) => JSX.Element;
+  };
+  Suggestion: ((props: SuggestionProps) => JSX.Element) & {
+    Root: (props: SuggestionProps) => JSX.Element;
+  };
+  PromptInput: ((props: PromptInputProps) => JSX.Element) & {
+    Root: (props: PromptInputProps) => JSX.Element;
+  };
 };
 //#endregion
 export { AiLoader as a, ReasoningUIPart as c, StepStartUIPart as d, TextUIPart as f, UIMessagePart as h, AiConversation as i, SourceDocumentUIPart as l, UIMessage as m, AiActions as n, DataUIPart as o, ToolUIPart as p, AiContent as r, FileUIPart as s, Ai as t, SourceUrlUIPart as u };