@bysages/solid 0.4.4 → 0.5.0

package/dist/{image-viewer-19s75Hz_.mjs → image-viewer-TEia4PaY.mjs}

@@ -1,19 +1,19 @@
-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 { t as defineFamily } from "./family-B5HtE0on.mjs";
+import { r as iconNode } from "./icon-DQqYA2fO.mjs";
+import { t as useElementId } from "./id-DGvz-2rQ.mjs";
 import { Button } from "./components/button/index.mjs";
-import { n as useComponentMessages } from "./use-component-messages-C4SCVYjD.mjs";
+import { n as useComponentMessages } from "./use-component-messages-DS9ppb4C.mjs";
 import { ButtonGroup } from "./components/button-group/index.mjs";
 import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
-import { createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
+import { createImageViewerGestures } from "@bysages/core";
+import { Portal, createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { Show, createEffect, createSignal, splitProps } from "solid-js";
-import { Portal } from "solid-js/web";
+import { Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
 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>`);
+// 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) {
@@ -22,61 +22,46 @@ function ImageViewerPreview(props) {
 	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,
-		{
+	return (() => {
+		var _el$ = _tmpl$3();
+		spread(_el$, mergeProps(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(() => {
+		}, () => isIcon() ? {
+			"data-empty": "true",
+			"aria-label": messages().imageViewer.preview
+		} : {}), false, true);
+		insert(_el$, createComponent(Show, {
+			get when() {
 				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, () => {
+			},
+			get fallback() {
+				return iconNode("eye");
+			},
+			get children() {
+				return [memo(() => own.children), (() => {
+					var _el$2 = _tmpl$2$1();
+					insert(_el$2, () => iconNode("eye"), null);
+					insert(_el$2, createComponent(Show, {
+						get when() {
 							return own.label;
-						});
-						return _el$4;
-					}
-				}), _el$5);
-				return _el$2;
-			})()];
-		}
-	}));
-	return _el$;
+						},
+						get children() {
+							var _el$3 = _tmpl$$1();
+							insert(_el$3, () => own.label);
+							return _el$3;
+						}
+					}), null);
+					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;
+// 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 SCALE_STEP = .25;
 /** The toolbar's icons, drawn from the house icon set. */
 const TOOL_ICONS = {
@@ -100,25 +85,20 @@ function ImageViewerImpl(props) {
 	const id = useElementId("image-viewer");
 	const messages = useComponentMessages();
 	const [localOpen, setLocalOpen] = createSignal(false);
-	const [scale, setScale] = createSignal(1);
-	const [rotation, setRotation] = createSignal(0);
+	const [viewport, setViewport] = createSignal(null);
+	let gestures;
 	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);
-		}
+		gestures?.stop();
+		gestures = void 0;
+		const node = viewport();
+		if (node) gestures = createImageViewerGestures(node, { zoomable: own.zoomable ?? true });
 	});
-	function zoom(step) {
-		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
-	}
-	function rotate() {
-		setRotation((rotation() + 90) % 360);
-	}
+	onCleanup(() => gestures?.stop());
 	function toolButton(label, icon, onClick) {
 		return createComponent(Button, {
 			variant: "ghost",
@@ -147,12 +127,12 @@ function ImageViewerImpl(props) {
 				"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",
+				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"() {
+							"class": "bs-image-viewer-content",
+							get ["aria-label"]() {
 								return own.alt || "Image preview";
 							},
 							onClick: (event) => {
@@ -161,20 +141,19 @@ function ImageViewerImpl(props) {
 							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);
+									use((element) => setViewport(element), _el$);
+									effect((_p$) => {
+										var _v$ = own.src, _v$2 = own.alt ?? "", _v$3 = own.width, _v$4 = own.height;
+										_v$ !== _p$.e && setAttribute(_el$, "src", _p$.e = _v$);
+										_v$2 !== _p$.t && setAttribute(_el$, "alt", _p$.t = _v$2);
+										_v$3 !== _p$.a && setAttribute(_el$, "width", _p$.a = _v$3);
+										_v$4 !== _p$.o && setAttribute(_el$, "height", _p$.o = _v$4);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0,
+										o: void 0
 									});
 									return _el$;
 								})(), (() => {
@@ -186,21 +165,15 @@ function ImageViewerImpl(props) {
 													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));
-													})];
+													return [memo(() => toolButton(messages().imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => gestures?.zoomBy(SCALE_STEP))), memo(() => toolButton(messages().imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => gestures?.zoomBy(-.25)))];
 												}
 											}),
-											memo(() => {
-												return toolButton(messages().imageViewer.rotate, TOOL_ICONS.rotate, rotate);
-											}),
+											memo(() => toolButton(messages().imageViewer.rotate, TOOL_ICONS.rotate, () => gestures?.rotate())),
 											createComponent(Dialog.CloseTrigger, { asChild: (closeProps) => createComponent(Button, mergeProps(closeProps, {
 												variant: "ghost",
 												square: true,
 												size: "lg",
-												get "aria-label"() {
+												get ["aria-label"]() {
 													return messages().imageViewer.close;
 												},
 												get children() {
@@ -224,5 +197,4 @@ const viewerParts = {
 	Preview: ImageViewerPreview
 };
 const ImageViewer = defineFamily(ImageViewerImpl, viewerParts);
-//#endregion
 export { ImageViewer as t };

package/dist/{index-BU5U5w04.d.mts → index-B4WyTngM.d.mts}

@@ -1,11 +1,8 @@
 import { ComponentProps } from "solid-js";
 import { Toc } from "@ark-ui/solid/toc";
-//#region src/components/toc/TocIndicator.d.ts
 /** The active stroke is decoration; hidden so the list reads as links
  * alone. */
 declare function TocIndicator(props: ComponentProps<typeof Toc.Indicator>): import("solid-js").JSX.Element;
-//#endregion
-//#region src/components/toc/index.d.ts
 /** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
  * beside the scroll, one stroke of primary ink marking where the reader
  * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
@@ -31,5 +28,4 @@ declare const Toc$1: typeof TocFacade & Omit<typeof Toc, "Root" | "Indicator" |
   Indicator: typeof TocIndicator;
   Content: typeof TocContent;
 };
-//#endregion
 export { TocFacadeProps as n, Toc$1 as t };

package/dist/index-BRvSfkKs.d.mts

@@ -0,0 +1,25 @@
+import { ComponentProps, JSX } from "solid-js";
+import { Popover } from "@ark-ui/solid/popover";
+/** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
+ * dissolves in on elevation, anchored to its trigger by a whisker arrow. The
+ * API is Ark's own — Root, Trigger, Anchor, Indicator, Positioner, Content,
+ * Title, Description, CloseTrigger, Arrow, ArrowTip. */
+declare function PopoverRoot(props: ComponentProps<typeof Popover.Root>): JSX.Element;
+type PopoverPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+interface PopoverFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string | Element;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  placement?: PopoverPlacement;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function PopoverFacade(props: PopoverFacadeProps): JSX.Element;
+declare const Popover$1: typeof PopoverFacade & Omit<typeof Popover, "Root"> & {
+  Root: typeof PopoverRoot;
+};
+export { PopoverFacadeProps as n, Popover$1 as t };

package/dist/{index-DhripUtf.d.mts → index-CTsFsYdA.d.mts}

@@ -1,6 +1,5 @@
 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;
@@ -11,8 +10,6 @@ interface ImageViewerPreviewProps extends Omit<JSX.HTMLAttributes<HTMLElement>,
 /** 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
@@ -35,5 +32,4 @@ 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-CutrHCzU.d.mts

@@ -0,0 +1,153 @@
+import { t as Popover } from "./index-BRvSfkKs.mjs";
+import { Accessor, JSX } from "solid-js";
+type MentionCommitKey = "Enter" | "Tab" | " ";
+type MentionTriggers = string | string[];
+interface UseMentionsOptions {
+  /** The candidates offered once a trigger character is typed. */
+  items: MentionEntry[];
+  /** The character that summons the candidates. */
+  trigger?: string;
+  /** One or more summoning characters; the token closest to the caret
+   * wins when several triggers are active. */
+  triggers?: MentionTriggers;
+  /** Keys that choose the highlighted candidate. */
+  commitKeys?: MentionCommitKey[];
+}
+interface UseMentionsHandlers {
+  /** The text the field holds right now — read at keystroke time, never
+   * from a controlled prop that lags a render behind the caret. */
+  getText: () => string;
+  /** Writes the field's next text: a mention inserted at the token. */
+  setText: (value: string) => void;
+  /** The absolute text offset of the field caret; a rich editor supplies this.
+   * A textarea is read from its own selection when omitted. */
+  getCaret?: () => number | undefined;
+  /** Called before insertion. Return `false` to record the choice without
+   * rewriting composer text — useful for slash commands and context chips. */
+  select?: (entry: MentionEntry) => boolean | void;
+  /** Replaces default insertion so rich editors can commit their own token. */
+  commit?: (entry: MentionEntry) => void;
+}
+/** The @-detection machinery behind a mention field: watch the caret,
+ * offer the matching candidates, and answer for the keys that drive
+ * them. The field element arrives as an accessor because hosts wrap it
+ * differently (a bare textarea, a field's own part).
+ *
+ * `onKeydown` answers whether the vessel consumed the key, so a host
+ * with its own Enter semantics — a composer that sends — can yield to
+ * the candidates first and act only when the vessel stands down. */
+declare function useMentions(options: Accessor<UseMentionsOptions>, textarea: Accessor<HTMLTextAreaElement | null>, handlers: UseMentionsHandlers): {
+  open: Accessor<boolean>;
+  matches: Accessor<MentionEntry[]>;
+  active: Accessor<number>;
+  setActive: import("solid-js").Setter<number>;
+  anchorIndex: Accessor<number>;
+  caretIndex: Accessor<number>;
+  activeTrigger: Accessor<string>;
+  insert: (entry: MentionEntry) => void;
+  close: () => void;
+  onInput: () => void;
+  onKeydown: (event: KeyboardEvent) => boolean;
+};
+/** 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 {
+  /** Stable identity for tests, popups and business handlers. */
+  id?: string;
+  /** The primary words shown in the popup and inserted by default. */
+  label: string;
+  /** The semantic value reported by the field. */
+  value: string;
+  /** One line of supporting copy under the label. */
+  description?: string;
+  /** A curated core icon name. */
+  icon?: string;
+  /** Optional section heading; entries with the same heading travel together. */
+  group?: string;
+  /** The consumer's coarse entry type, such as `file`, `agent` or `command`. */
+  kind?: string;
+  /** A visible candidate the keyboard and pointer cannot choose. */
+  disabled?: boolean;
+  /** Exact composer text to insert; it bypasses `trigger + label`. */
+  insertText?: string;
+  /** Extra consumer data carried back through `onSelect`. */
+  meta?: Record<string, unknown>;
+}
+type MentionPlacement = "bottom-start" | "top-start";
+interface MentionsVesselProps {
+  open?: boolean;
+  matches?: MentionEntry[];
+  active?: number;
+  /** The live element the vessel points at — the anchor is virtual, a
+   * rectangle read off the host's field. */
+  anchor?: HTMLElement | null;
+  /** Which side of the anchor hosts the candidates. */
+  placement?: MentionPlacement;
+  /** The host field's rung, so the rows keep the field's register. */
+  size?: "sm" | "md" | "lg";
+  /** The vessel's stable base id; popup ids derive from it. */
+  id?: string;
+  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. 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" | "onSelect"> {
+  /** The candidates offered once the trigger character is typed. */
+  items?: MentionEntry[];
+  /** The text held by the field. Supply it to control the field;
+   * changes are reported through `onValueChange`. */
+  value?: string;
+  /** The character that summons the candidates. */
+  trigger?: string;
+  /** One or more summoning characters, such as `@` and `/`. */
+  triggers?: MentionTriggers;
+  /** Keep composer text untouched when a candidate is selected. */
+  insertOnSelect?: boolean;
+  /** Keys that choose the highlighted candidate. */
+  commitKeys?: MentionCommitKey[];
+  /** Which side of the field hosts the candidates. */
+  placement?: MentionPlacement;
+  placeholder?: string;
+  /** Let the field grow with its text instead of holding `rows`. */
+  autoresize?: boolean;
+  /** Standing alone, the field styles itself from this flag; inside a
+   * `Field.Root` the field's own invalid state takes over. */
+  invalid?: boolean;
+  /** One rung of the control-height ladder for the resting field. */
+  size?: "sm" | "md" | "lg";
+  /** The field's text changed. */
+  onValueChange?: (value: string) => void;
+  /** A candidate was chosen, including when `insertOnSelect` keeps the
+   * composer text untouched. */
+  onSelect?: (entry: MentionEntry) => void;
+}
+/**
+ * @-mentions: a plain textarea that, when the text before the caret ends
+ * with a trigger character followed by a token, offers matching
+ * candidates in a small anchored vessel. Entries may carry descriptions,
+ * icons, groups and consumer metadata. Selecting reports the whole
+ * entry; by default it also replaces the token with the trigger that
+ * opened it plus the label. Arrows move, Enter inserts, Escape dismisses.
+ *
+ * The field is the shared `Field.Textarea` — field wiring (label ids,
+ * the invalid state, autoresize) rides on it for free — and the vessel
+ * anchors to the field as a whole (popover machinery), not to the caret
+ * coordinates; caret-precise positioning would need a second positioning
+ * system for no practical gain at typical field sizes. Composers that
+ * keep their own field anatomy (the AI prompt input) skip this shell and
+ * wire `useMentions` plus `MentionsVessel` themselves.
+ */
+declare function MentionsImpl(props: MentionsProps): JSX.Element;
+declare const Mentions: typeof MentionsImpl & typeof Popover;
+export { MentionsVessel as a, MentionTriggers as c, useMentions as d, MentionsProps as i, UseMentionsHandlers as l, MentionPlacement as n, MentionsVesselProps as o, Mentions as r, MentionCommitKey as s, MentionEntry as t, UseMentionsOptions as u };

package/dist/{index-wW28BYf1.d.mts → index-CwmZdzxT.d.mts}

@@ -1,5 +1,4 @@
 import { Accessor, Component, JSX } from "solid-js";
-//#region src/components/media-player/parts.d.ts
 type MediaPartProps = JSX.HTMLAttributes<HTMLElement>;
 type ButtonPartProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
   label?: string;
@@ -34,8 +33,6 @@ declare function Captions(props: LabeledDivPartProps): JSX.Element;
 declare function PipButton(props: ButtonPartProps): JSX.Element;
 /** Fullscreen takes the whole vessel, not just the moving picture. */
 declare function FullscreenButton(props: ButtonPartProps): JSX.Element;
-//#endregion
-//#region src/components/media-player/use-media-controls.d.ts
 /** One alternative encoding offered to the browser before playback. */
 interface MediaSourceOption {
   src: string;
@@ -52,8 +49,6 @@ interface MediaTextTrackOption {
 /** A compact clock for player chrome: hours only when the media asks
  * for them, stable digits so the time never jitters the controls. */
 declare function formatMediaTime(seconds: number): string;
-//#endregion
-//#region src/components/media-player/shell.d.ts
 type MediaEventName = "onPlay" | "onPause" | "onEnded" | "onTimeupdate" | "onVolumechange" | "onRatechange" | "onError";
 interface MediaPlayerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, MediaEventName | "onPlay" | "onPause"> {
   label?: string;
@@ -78,8 +73,6 @@ interface MediaPlayerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, Medi
   onRatechange?: (event: Event) => void;
   onError?: (event: Event) => void;
 }
-//#endregion
-//#region src/components/media-player/index.d.ts
 /** Audio and video share one instrument: the same state, the same keys,
  * and the same control rhythm, while each face keeps its native element's
  * own semantics. The parts — Root, Stage, Media, Controls, PlayButton,
@@ -120,5 +113,4 @@ declare const Video: Component<MediaPlayerProps> & {
   PipButton: typeof PipButton;
   FullscreenButton: typeof FullscreenButton;
 };
-//#endregion
 export { MediaTextTrackOption as a, MediaSourceOption as i, Video as n, formatMediaTime as o, MediaPlayerProps as r, Audio as t };

package/dist/index-DK7YgaAU.d.mts

@@ -0,0 +1,37 @@
+import { JSX } from "solid-js";
+type ToolStatus = "pending" | "running" | "completed" | "error" | "denied";
+type ToolApproval = "required" | "approved" | "denied";
+type ToolValue = string | number | boolean | null | ToolValue[] | {
+  [key: string]: ToolValue;
+};
+interface ToolProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The name the tool was reached by — shown raw on the trigger
+   * unless friendlier `label` words are given. */
+  name: string;
+  /** Friendlier trigger words than the raw tool name. */
+  label?: JSX.Element;
+  /** The state the call reached — pending, running, completed, error,
+   * or denied; stamped on the fold and whispered in the status chip. */
+  status?: ToolStatus;
+  /** The human approval gate, when the call needs one. */
+  approval?: ToolApproval;
+  /** Custom request display. */
+  input?: JSX.Element;
+  /** The machine-readable request, formatted automatically. */
+  inputValue?: ToolValue;
+  /** Custom answer display. */
+  output?: JSX.Element;
+  /** The machine-readable answer, formatted automatically. */
+  outputValue?: ToolValue;
+  /** The fold arrives open when set — rides the shared collapsible. */
+  defaultOpen?: boolean;
+  onApprove?: () => void;
+  onDeny?: () => void;
+}
+/** A tool call: the shared collapsible as the vessel — the name it was
+ * reached by and the state it reached in on the trigger, its input and
+ * output folded inside. */
+declare const Tool: ((props: ToolProps) => JSX.Element) & {
+  Root: (props: ToolProps) => JSX.Element;
+};
+export { ToolValue as a, ToolStatus as i, ToolApproval as n, ToolProps as r, Tool as t };

package/dist/index-Dms00480.d.mts

@@ -0,0 +1,115 @@
+import { a as ToolValue } from "./index-DK7YgaAU.mjs";
+import { JSX } from "solid-js";
+import { CustomContentUIPart, DataUIPart, DynamicToolUIPart, FileUIPart, ReasoningFileUIPart, ReasoningUIPart, SourceDocumentUIPart, SourceUrlUIPart, StepStartUIPart, TextUIPart, ToolUIPart, UIDataTypes, UIMessage, UITools } from "ai";
+type AiSdkMessage = UIMessage<unknown, UIDataTypes, UITools>;
+type AiSdkMessagePart<MESSAGE extends AiSdkMessage = AiSdkMessage> = MESSAGE["parts"][number];
+type AiSdkTextPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, TextUIPart>;
+type AiSdkCustomPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, CustomContentUIPart>;
+type AiSdkReasoningPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, ReasoningUIPart>;
+type AiSdkReasoningFilePart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, ReasoningFileUIPart>;
+type AiSdkToolPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, ToolUIPart<UITools> | DynamicToolUIPart>;
+type AiSdkSourceUrlPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, SourceUrlUIPart>;
+type AiSdkSourceDocumentPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, SourceDocumentUIPart>;
+type AiSdkFilePart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, FileUIPart>;
+type AiSdkDataPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, DataUIPart<UIDataTypes>>;
+type AiSdkStepStartPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = Extract<AiSdkMessagePart<MESSAGE>, StepStartUIPart>;
+type AiSdkMediaPart<MESSAGE extends AiSdkMessage = AiSdkMessage> = AiSdkFilePart<MESSAGE> | AiSdkReasoningFilePart<MESSAGE>;
+type AiMediaKind = "image" | "audio" | "video" | "file";
+type AiToolDisplay = {
+  name: string;
+  status: "pending" | "running" | "completed" | "error" | "denied";
+  approval?: "required" | "approved" | "denied";
+  input?: ToolValue;
+  output?: ToolValue;
+};
+interface AiPartsSlots<MESSAGE extends AiSdkMessage = AiSdkMessage> {
+  default?: (props: {
+    message: MESSAGE;
+  }) => JSX.Element;
+  text?: (props: {
+    part: AiSdkTextPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  custom?: (props: {
+    part: AiSdkCustomPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  reasoning?: (props: {
+    part: AiSdkReasoningPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  reasoningFile?: (props: {
+    part: AiSdkReasoningFilePart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  tool?: (props: {
+    part: AiSdkToolPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  sourceUrl?: (props: {
+    part: AiSdkSourceUrlPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  sourceDocument?: (props: {
+    part: AiSdkSourceDocumentPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  file?: (props: {
+    part: AiSdkFilePart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  data?: (props: {
+    part: AiSdkDataPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  stepStart?: (props: {
+    part: AiSdkStepStartPart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+  fallback?: (props: {
+    part: AiSdkMessagePart<MESSAGE>;
+    index: number;
+  }) => JSX.Element;
+}
+interface AiPartsProps<MESSAGE extends AiSdkMessage = AiSdkMessage> {
+  message: MESSAGE;
+  highlighter?: (code: string, lang?: string) => string;
+  slots?: AiPartsSlots<MESSAGE>;
+  onApprove?: (event: {
+    part: AiSdkToolPart<MESSAGE>;
+    index: number;
+  }) => void;
+  onDeny?: (event: {
+    part: AiSdkToolPart<MESSAGE>;
+    index: number;
+  }) => void;
+}
+interface AiMediaProps<MESSAGE extends AiSdkMessage = AiSdkMessage> {
+  part?: AiSdkMediaPart<MESSAGE>;
+  mediaType?: string;
+  url?: string;
+  filename?: string;
+  alt?: string;
+}
+declare function toolPartDisplay<MESSAGE extends AiSdkMessage = AiSdkMessage>(part: AiSdkToolPart<MESSAGE>): AiToolDisplay;
+declare const AiMedia: ((props: AiMediaProps) => JSX.Element) & {
+  Root: (props: AiMediaProps) => JSX.Element;
+};
+declare function AiPartsRenderer<MESSAGE extends AiSdkMessage>(props: AiPartsProps<MESSAGE>): JSX.Element;
+declare const AiParts: typeof AiPartsRenderer & {
+  Root: typeof AiPartsRenderer;
+};
+type MessageRole = "user" | "assistant" | "system";
+interface MessageProps<MESSAGE extends AiSdkMessage = AiSdkMessage> extends Omit<JSX.HTMLAttributes<HTMLElement>, "role"> {
+  /** Whose stroke this is — the user's words sit in a recessed
+   * bubble, the assistant speaks flat on the paper. */
+  role?: MessageRole;
+  /** The AI SDK message; its id and role become the article identity. */
+  message?: MESSAGE;
+}
+/** Whose stroke this is — the user's words sit in a recessed bubble,
+ * the assistant speaks flat on the paper. */
+declare const Message: ((props: MessageProps) => JSX.Element) & {
+  Root: (props: MessageProps) => JSX.Element;
+};
+export { AiToolDisplay as C, AiSdkToolPart as S, AiSdkReasoningPart as _, AiMediaKind as a, AiSdkStepStartPart as b, AiPartsProps as c, AiSdkDataPart as d, AiSdkFilePart as f, AiSdkReasoningFilePart as g, AiSdkMessagePart as h, AiMedia as i, AiPartsSlots as l, AiSdkMessage as m, MessageProps as n, AiMediaProps as o, AiSdkMediaPart as p, MessageRole as r, AiParts as s, Message as t, AiSdkCustomPart as u, AiSdkSourceDocumentPart as v, toolPartDisplay as w, AiSdkTextPart as x, AiSdkSourceUrlPart as y };