@bysages/solid 0.3.1 → 0.4.0

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 };

package/dist/index-wW28BYf1.d.mts

@@ -0,0 +1,124 @@
+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;
+};
+type InputPartProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+};
+type DivPartProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  children?: JSX.Element;
+};
+type LabeledDivPartProps = DivPartProps & {
+  label?: string;
+};
+/** The native media element, framed by the shared shell's state machine. */
+declare function Media(props: MediaPartProps): JSX.Element;
+/** Play and pause share one seal-cut control: the state changes the mark,
+ * never the control's place in the hand. */
+declare function PlayButton(props: ButtonPartProps): JSX.Element;
+/** The elapsed and total time bracket the timeline. */
+declare function Time(props: JSX.HTMLAttributes<HTMLSpanElement>): JSX.Element;
+/** The timeline is the sheet on which the listener writes their place. */
+declare function Timeline(props: InputPartProps): JSX.Element;
+/** Muting stays at the left of the volume well, the way a hand expects. */
+declare function MuteButton(props: ButtonPartProps): JSX.Element;
+declare function Volume(props: InputPartProps): JSX.Element;
+/** Playback rate is a real choice, not hidden behind native menus. */
+declare function Rate(props: LabeledDivPartProps): JSX.Element;
+/** Text tracks use the browser's native model; the control chooses a
+ * track index, while rendering stays with the media element. */
+declare function Captions(props: LabeledDivPartProps): JSX.Element;
+/** Picture-in-picture is video-only and capability-detected. */
+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;
+  type?: string;
+}
+/** A WebVTT track handed to the native text-track model. */
+interface MediaTextTrackOption {
+  src: string;
+  kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+  label?: string;
+  srcLang?: string;
+  default?: boolean;
+}
+/** 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;
+  src?: string;
+  sources?: MediaSourceOption[];
+  tracks?: MediaTextTrackOption[];
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  preload?: "none" | "metadata" | "auto";
+  volume?: number;
+  playbackRate?: number;
+  playbackRates?: number[];
+  disabled?: boolean;
+  poster?: string;
+  playsInline?: boolean;
+  onPlay?: (event: Event) => void;
+  onPause?: (event: Event) => void;
+  onEnded?: (event: Event) => void;
+  onTimeupdate?: (event: Event) => void;
+  onVolumechange?: (event: Event) => void;
+  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,
+ * Timeline, Time, MuteButton, Volume, Rate, Captions, PipButton,
+ * FullscreenButton. */
+declare const Audio: Component<MediaPlayerProps> & {
+  Root: Component<MediaPlayerProps>;
+  Stage: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+    children?: JSX.Element;
+  }) => JSX.Element;
+  Media: typeof Media;
+  Controls: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+    children?: JSX.Element;
+  }) => JSX.Element;
+  PlayButton: typeof PlayButton;
+  Timeline: typeof Timeline;
+  Time: typeof Time;
+  MuteButton: typeof MuteButton;
+  Volume: typeof Volume;
+  Rate: typeof Rate;
+};
+declare const Video: Component<MediaPlayerProps> & {
+  Root: Component<MediaPlayerProps>;
+  Stage: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+    children?: JSX.Element;
+  }) => JSX.Element;
+  Media: typeof Media;
+  Controls: (props: JSX.HTMLAttributes<HTMLDivElement> & {
+    children?: JSX.Element;
+  }) => JSX.Element;
+  PlayButton: typeof PlayButton;
+  Timeline: typeof Timeline;
+  Time: typeof Time;
+  MuteButton: typeof MuteButton;
+  Volume: typeof Volume;
+  Rate: typeof Rate;
+  Captions: typeof Captions;
+  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 };