@bysages/svelte 0.3.1 → 0.4.1

package/dist/{form-BTL9S1gn.mjs → form-pjuBsPy-.mjs}

@@ -1,19 +1,9 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { Field } from "@ark-ui/svelte/field";
-import { getContext, setContext } from "svelte";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { getContext, untrack } from "svelte";
 import { createField, createField as useField, createForm, createForm as useForm } from "@tanstack/svelte-form";
-//#region src/components/form/context.ts
-const FORM_KEY = Symbol("bysages-form");
-function provideForm(engine) {
-	setContext(FORM_KEY, engine);
-	return engine;
-}
-function useForm$1() {
-	return getContext(FORM_KEY) ?? null;
-}
-//#endregion
 //#region src/components/form/Form.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -27,7 +17,7 @@ function Form$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("form");
 	let rest = $.rest_props($$props, rest_excludes$1);
-	provideForm($$props.form);
+	provideForm(untrack(() => $$props.form));
 	var form_1 = root$1();
 	var event_handler = (event) => {
 		event.preventDefault();
@@ -47,6 +37,12 @@ function Form$1($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
+//#region src/components/form/context.ts
+const FORM_KEY = Symbol("bysages-form");
+function useForm$1() {
+	return getContext(FORM_KEY) ?? null;
+}
+//#endregion
 //#region src/components/form/FormField.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -77,85 +73,68 @@ function FormField$1($$anchor, $$props) {
 		var node = $.child(div);
 		{
 			let $0 = $.derived(() => invalid() || $.get(errors).length > 0);
-			$.component(node, () => Field.Root, ($$anchor, ArkField_Root) => {
-				ArkField_Root($$anchor, {
-					get invalid() {
-						return $.get($0);
-					},
-					get required() {
-						return required();
-					},
-					get disabled() {
-						return disabled();
-					},
-					children: ($$anchor, $$slotProps) => {
-						var fragment = root();
-						var node_1 = $.first_child(fragment);
-						var consequent = ($$anchor) => {
-							var fragment_1 = $.comment();
-							var node_2 = $.first_child(fragment_1);
-							$.component(node_2, () => Field.Label, ($$anchor, ArkField_Label) => {
-								ArkField_Label($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text = $.text();
-										$.template_effect(() => $.set_text(text, $$props.label));
-										$.append($$anchor, text);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_1);
-						};
-						$.if(node_1, ($$render) => {
-							if ($$props.label) $$render(consequent);
+			ArkField.Root(node, {
+				get invalid() {
+					return $.get($0);
+				},
+				get required() {
+					return required();
+				},
+				get disabled() {
+					return disabled();
+				},
+				children: ($$anchor, $$slotProps) => {
+					var fragment = root();
+					var node_1 = $.first_child(fragment);
+					var consequent = ($$anchor) => {
+						ArkField.Label($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								$.next();
+								var text = $.text();
+								$.template_effect(() => $.set_text(text, $$props.label));
+								$.append($$anchor, text);
+							},
+							$$slots: { default: true }
 						});
-						var node_3 = $.sibling(node_1, 2);
-						$.snippet(node_3, () => $$props.children ?? $.noop, field);
-						var node_4 = $.sibling(node_3, 2);
-						var consequent_1 = ($$anchor) => {
-							var fragment_3 = $.comment();
-							var node_5 = $.first_child(fragment_3);
-							$.component(node_5, () => Field.HelperText, ($$anchor, ArkField_HelperText) => {
-								ArkField_HelperText($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text_1 = $.text();
-										$.template_effect(() => $.set_text(text_1, $$props.hint));
-										$.append($$anchor, text_1);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_3);
-						};
-						$.if(node_4, ($$render) => {
-							if ($$props.hint && $.get(errors).length === 0) $$render(consequent_1);
+					};
+					$.if(node_1, ($$render) => {
+						if ($$props.label) $$render(consequent);
+					});
+					var node_2 = $.sibling(node_1, 2);
+					$.snippet(node_2, () => $$props.children ?? $.noop, field);
+					var node_3 = $.sibling(node_2, 2);
+					var consequent_1 = ($$anchor) => {
+						ArkField.HelperText($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								$.next();
+								var text_1 = $.text();
+								$.template_effect(() => $.set_text(text_1, $$props.hint));
+								$.append($$anchor, text_1);
+							},
+							$$slots: { default: true }
 						});
-						var node_6 = $.sibling(node_4, 2);
-						var consequent_2 = ($$anchor) => {
-							var fragment_5 = $.comment();
-							var node_7 = $.first_child(fragment_5);
-							$.component(node_7, () => Field.ErrorText, ($$anchor, ArkField_ErrorText) => {
-								ArkField_ErrorText($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text_2 = $.text();
-										$.template_effect(() => $.set_text(text_2, $.get(errors)[0]));
-										$.append($$anchor, text_2);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_5);
-						};
-						$.if(node_6, ($$render) => {
-							if ($.get(errors).length > 0) $$render(consequent_2);
+					};
+					$.if(node_3, ($$render) => {
+						if ($$props.hint && $.get(errors).length === 0) $$render(consequent_1);
+					});
+					var node_4 = $.sibling(node_3, 2);
+					var consequent_2 = ($$anchor) => {
+						ArkField.ErrorText($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								$.next();
+								var text_2 = $.text();
+								$.template_effect(() => $.set_text(text_2, $.get(errors)[0]));
+								$.append($$anchor, text_2);
+							},
+							$$slots: { default: true }
 						});
-						$.append($$anchor, fragment);
-					},
-					$$slots: { default: true }
-				});
+					};
+					$.if(node_4, ($$render) => {
+						if ($.get(errors).length > 0) $$render(consequent_2);
+					});
+					$.append($$anchor, fragment);
+				},
+				$$slots: { default: true }
 			});
 		}
 		$.reset(div);
@@ -163,7 +142,8 @@ function FormField$1($$anchor, $$props) {
 	};
 	injectComponentStyle("form");
 	let required = $.prop($$props, "required", 3, false), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
-	const engine = $$props.form ?? useForm$1();
+	const injectedForm = untrack(() => useForm$1());
+	const engine = $.derived(() => $$props.form ?? injectedForm);
 	function errorText(error) {
 		if (error == null) return "";
 		if (typeof error === "string") return error;
@@ -171,15 +151,15 @@ function FormField$1($$anchor, $$props) {
 		return String(error);
 	}
 	var fragment_7 = $.comment();
-	var node_8 = $.first_child(fragment_7);
+	var node_5 = $.first_child(fragment_7);
 	var consequent_3 = ($$anchor) => {
 		var fragment_8 = $.comment();
-		var node_9 = $.first_child(fragment_8);
+		var node_6 = $.first_child(fragment_8);
 		{
 			const children = ($$anchor, field = $.noop) => {
 				assemble($$anchor, field);
 			};
-			$.component(node_9, () => engine.Field, ($$anchor, engine_Field) => {
+			$.component(node_6, () => $.get(engine).Field, ($$anchor, engine_Field) => {
 				engine_Field($$anchor, $.spread_props(() => rest, {
 					get name() {
 						return $$props.name;
@@ -194,8 +174,8 @@ function FormField$1($$anchor, $$props) {
 	var alternate = ($$anchor) => {
 		assemble($$anchor, () => void 0);
 	};
-	$.if(node_8, ($$render) => {
-		if (engine) $$render(consequent_3);
+	$.if(node_5, ($$render) => {
+		if ($.get(engine)) $$render(consequent_3);
 		else $$render(alternate, -1);
 	});
 	$.append($$anchor, fragment_7);
@@ -205,8 +185,8 @@ function FormField$1($$anchor, $$props) {
 //#region src/components/form/index.ts
 /** The engine owns the values and the validation; these two are the
 * assembly — one grid, one error routing. */
-const Form = Form$1;
-const FormField = FormField$1;
+const Form = withSelfRoot(Form$1);
+const FormField = withSelfRoot(FormField$1);
 injectComponentStyle("field");
 //#endregion
 export { useField as a, createForm as i, FormField as n, useForm as o, createField as r, Form as t };

package/dist/{grid-DNgTWYSL.mjs → grid-CinYh-s4.mjs}

@@ -1,6 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/grid/Grid.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -49,6 +50,6 @@ function Grid$1($$anchor, $$props) {
 //#region src/components/grid/index.ts
 /** An alignment lattice: tracks of equal measure, sized by column count
 * — or, with `minChildWidth`, as many tracks as the container fits. */
-const Grid = Grid$1;
+const Grid = withSelfRoot(Grid$1);
 //#endregion
 export { Grid as t };

package/dist/{icon-D7AeDq0M.mjs → icon-BF1JO1ek.mjs}

@@ -1,6 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/Icon.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
@@ -19,8 +20,10 @@ function Icon$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("icon");
 	let size = $.prop($$props, "size", 3, "inherit"), rest = $.rest_props($$props, rest_excludes);
-	const resolved = $$props.glyph ?? ($$props.name && $$props.children == null ? getIcon($$props.name) : void 0);
-	if ($$props.name && $$props.children == null && $$props.glyph == null && !resolved) console.error(`[icons] unknown icon name "${$$props.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	const resolved = $.derived(() => $$props.glyph ?? ($$props.name && $$props.children == null ? getIcon($$props.name) : void 0));
+	$.user_effect(() => {
+		if ($$props.name && $$props.children == null && $$props.glyph == null && !$.get(resolved)) console.error(`[icons] unknown icon name "${$$props.name}" — not in the core default registry; pass it explicitly as glyph`);
+	});
 	var span = root_1();
 	$.attribute_effect(span, () => ({
 		...rest,
@@ -40,14 +43,14 @@ function Icon$1($$anchor, $$props) {
 	};
 	var consequent_1 = ($$anchor) => {
 		var svg = root();
-		$.html(svg, () => resolved.body, true);
+		$.html(svg, () => $.get(resolved).body, true);
 		$.reset(svg);
-		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${resolved.width ?? 24 ?? ""} ${resolved.height ?? 24 ?? ""}`));
+		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${$.get(resolved).width ?? 24 ?? ""} ${$.get(resolved).height ?? 24 ?? ""}`));
 		$.append($$anchor, svg);
 	};
 	$.if(node, ($$render) => {
 		if ($$props.children) $$render(consequent);
-		else if (resolved) $$render(consequent_1, 1);
+		else if ($.get(resolved)) $$render(consequent_1, 1);
 	});
 	$.reset(span);
 	$.append($$anchor, span);
@@ -57,7 +60,7 @@ function Icon$1($$anchor, $$props) {
 //#region src/components/icon/index.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
 * measure and in the text's own ink — the icon carries no pigment and
-* no size of its own. Bring the glyph; it ships no set. */
-const Icon = Icon$1;
+* no size of its own. Bring the icon; it ships no set. */
+const Icon = withSelfRoot(Icon$1);
 //#endregion
 export { Icon as t };

package/dist/icon-lWVQxDG6.mjs

@@ -0,0 +1,18 @@
+import { getIcon } from "@bysages/core/icons";
+//#region src/internal/icon.ts
+/** Render a curated core icon as an SVG string, for enhancements that write
+* innerHTML rather than mount elements. */
+function iconHtml(name, attrs = {}) {
+	const icon = getIcon(name);
+	if (!icon) throw new Error(`Unknown icon "${name}" in the curated core registry`);
+	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>`;
+}
+//#endregion
+export { iconHtml as t };

package/dist/id-Alz497yI.mjs

@@ -0,0 +1,7 @@
+//#region src/internal/id.ts
+/** Generates an SSR-stable machine base id while honoring an explicit id. */
+function useElementId(scope, generatedId, explicitId) {
+	return typeof explicitId === "string" && explicitId ? explicitId : `bs-${scope}-${generatedId}`;
+}
+//#endregion
+export { useElementId as t };

package/dist/{image-u_H4LtAC.mjs → image-ojKJgHcu.mjs}

@@ -1,6 +1,8 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/image/Image.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -14,19 +16,20 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"loading",
 	"fallback"
 ]);
-var root = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="1.5"></rect><circle cx="9" cy="10" r="1.5"></circle><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></path></svg>`);
-var root_1 = $.from_html(`<div data-scope="image" data-part="fallback"><!></div>`);
-var root_2 = $.from_html(`<figure><img data-scope="image" data-part="img" decoding="async"/> <!></figure>`);
+var root = $.from_html(`<div data-scope="image" data-part="fallback"><!></div>`);
+var root_1 = $.from_html(`<figure><img data-scope="image" data-part="img" decoding="async"/> <!></figure>`);
 function Image$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("image");
 	let alt = $.prop($$props, "alt", 3, ""), fit = $.prop($$props, "fit", 3, "cover"), loading = $.prop($$props, "loading", 3, "lazy"), rest = $.rest_props($$props, rest_excludes);
 	let state = $.state("loading");
+	let image = $.state(void 0);
 	$.user_effect(() => {
 		$$props.src;
 		$.set(state, "loading");
+		if ($.get(image)?.complete) $.set(state, $.get(image).naturalWidth > 0 ? "loaded" : "error", true);
 	});
-	var figure = root_2();
+	var figure = root_1();
 	$.attribute_effect(figure, () => ({
 		...rest,
 		"data-scope": "image",
@@ -35,9 +38,10 @@ function Image$1($$anchor, $$props) {
 		"data-fit": fit()
 	}));
 	var img = $.child(figure);
+	$.bind_this(img, ($$value) => $.set(image, $$value), () => $.get(image));
 	var node = $.sibling(img, 2);
 	var consequent_1 = ($$anchor) => {
-		var div = root_1();
+		var div = root();
 		var node_1 = $.child(div);
 		var consequent = ($$anchor) => {
 			var fragment = $.comment();
@@ -46,8 +50,7 @@ function Image$1($$anchor, $$props) {
 			$.append($$anchor, fragment);
 		};
 		var alternate = ($$anchor) => {
-			var svg = root();
-			$.append($$anchor, svg);
+			InternalIcon($$anchor, { name: "image" });
 		};
 		$.if(node_1, ($$render) => {
 			if ($$props.fallback) $$render(consequent);
@@ -77,9 +80,9 @@ function Image$1($$anchor, $$props) {
 //#region src/components/image/index.ts
 /** A framed picture: while the source loads, the frame keeps the
 * skeleton's breath; the picture dissolves in when it lands; a broken
-* source leaves the fallback snippet — or the placeholder glyph when
+* source leaves the fallback snippet — or the placeholder icon when
 * the caller has nothing local to say. The frame's size is the
 * consumer's to give. */
-const Image = Image$1;
+const Image = withSelfRoot(Image$1);
 //#endregion
 export { Image as t };

package/dist/{index-KoqiUxmN.d.mts → index-3TmqYBnT.d.mts}

@@ -15,6 +15,8 @@ interface DataViewProps extends HTMLAttributes<HTMLDivElement> {
 //#region src/components/data-view/index.d.ts
 /** One vessel, two layouts: a ledger or a lattice, paged with the
  * pagination family's own parts. */
-declare const DataView: import("svelte").Component<DataViewProps, {}, "">;
+declare const DataView: import("svelte").Component<DataViewProps, {}, ""> & {
+  Root: import("svelte").Component<DataViewProps, {}, "">;
+};
 //#endregion
 export { DataViewProps as n, DataView as t };

package/dist/index-550dAp3p.d.mts

@@ -0,0 +1,35 @@
+import { n as ImagePreview, t as ImageViewer$1 } from "./ImageViewer-CuTn5ho6.mjs";
+import { Dialog } from "./components/dialog/index.mjs";
+import { Snippet } from "svelte";
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/image-viewer/props.d.ts
+interface ImageViewerProps extends HTMLAttributes<HTMLElement> {
+  src: string;
+  alt?: string;
+  /** The large image handed to the lightbox. */
+  width?: number | string;
+  /** The large image handed to the lightbox. */
+  height?: number | string;
+  /** The wrapped content that opens the lightbox. */
+  children?: Snippet;
+  /** Whether the lightbox is up. Bind it (`bind:open`) to control the
+   * viewer; left alone it keeps the state to itself. */
+  open?: boolean;
+  zoomable?: boolean;
+  /** The viewer's open state turned. */
+  onOpenChange?: (open: boolean) => void;
+}
+interface ImageViewerPreviewProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** Visible beside the affordance over custom content. */
+  label?: string;
+  /** Custom doorway content; omit it for the default curated icon. */
+  children?: Snippet;
+}
+//#endregion
+//#region src/components/image-viewer/index.d.ts
+declare const ImageViewer: typeof ImageViewer$1 & Omit<typeof Dialog, "Root"> & {
+  Root: (typeof Dialog)["Root"];
+  Preview: typeof ImagePreview;
+};
+//#endregion
+export { ImageViewerPreviewProps as n, ImageViewerProps as r, ImageViewer as t };

package/dist/index-9GiGGnGa.d.mts

@@ -0,0 +1,136 @@
+//#region src/components/media-player/props.d.ts
+interface MediaSourceOption {
+  src: string;
+  type?: string;
+}
+interface MediaTextTrackOption {
+  src: string;
+  kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+  label?: string;
+  srcLang?: string;
+  default?: boolean;
+}
+interface MediaPlayerProps {
+  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;
+  class?: string;
+  style?: string;
+  id?: string;
+  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;
+  [key: string]: unknown;
+}
+//#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: import("svelte").Component<MediaPlayerProps, {}, ""> & {
+  Root: import("svelte").Component<MediaPlayerProps & {
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  Stage: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  Media: import("svelte").Component<{
+    [key: string]: unknown;
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  Controls: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  PlayButton: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Timeline: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Time: import("svelte").Component<{
+    [key: string]: unknown;
+  }, {}, "">;
+  MuteButton: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Volume: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Rate: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+};
+declare const Video: import("svelte").Component<MediaPlayerProps, {}, ""> & {
+  Root: import("svelte").Component<MediaPlayerProps & {
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  Stage: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  Media: import("svelte").Component<{
+    [key: string]: unknown;
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  Controls: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+  }, {}, "">;
+  PlayButton: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Timeline: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Time: import("svelte").Component<{
+    [key: string]: unknown;
+  }, {}, "">;
+  MuteButton: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Volume: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Rate: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  Captions: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  PipButton: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+  FullscreenButton: import("svelte").Component<{
+    [key: string]: unknown;
+    label?: string;
+  }, {}, "">;
+};
+//#endregion
+export { MediaTextTrackOption as a, MediaSourceOption as i, Video as n, MediaPlayerProps as r, Audio as t };

package/dist/{index-ZUvVz2Fd.d.mts → index-BFKqgbq-.d.mts}

@@ -19,6 +19,8 @@ interface DynamicInputProps extends HTMLAttributes<HTMLDivElement> {
 /** A column of entry rows: one Input per line, each with a quiet remove
  * seal, and an add row at the tail — the bound array stays the only
  * truth. */
-declare const DynamicInput: import("svelte").Component<DynamicInputProps, {}, "value">;
+declare const DynamicInput: import("svelte").Component<DynamicInputProps, {}, "value"> & {
+  Root: import("svelte").Component<DynamicInputProps, {}, "value">;
+};
 //#endregion
 export { DynamicInputProps as n, DynamicInput as t };

package/dist/{index-CY4EuxyF.d.mts → index-BIHw8Gzt.d.mts}

@@ -16,6 +16,8 @@ interface AutoCompleteProps extends HTMLAttributes<HTMLDivElement> {
 /** Free text with suggestions: the reader types anything, the list
  * narrows to help, and both a pick and a custom value end up in the
  * same `value`. A preset of the combobox machinery. */
-declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "value">;
+declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "value"> & {
+  Root: import("svelte").Component<AutoCompleteProps, {}, "value">;
+};
 //#endregion
 export { AutoCompleteProps as n, AutoComplete as t };

package/dist/{index-DGOBhwXN.d.mts → index-BKZC0MtK.d.mts}

@@ -13,6 +13,8 @@ interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
 //#endregion
 //#region src/components/virtual-list/index.d.ts
 /** A ledger that only mounts the rows on stage. */
-declare const VirtualList: import("svelte").Component<VirtualListProps, {}, "">;
+declare const VirtualList: import("svelte").Component<VirtualListProps, {}, ""> & {
+  Root: import("svelte").Component<VirtualListProps, {}, "">;
+};
 //#endregion
 export { VirtualListProps as n, VirtualList as t };

package/dist/{index-Dy335EhR.d.mts → index-BfpbvgWG.d.mts}

@@ -1,4 +1,4 @@
-import { t as ClipboardRoot } from "./ClipboardRoot-UmyQFn27.mjs";
+import { n as ClipboardRoot, t as Clipboard$2 } from "./Clipboard-BHy1YrlL.mjs";
 import { Clipboard, ClipboardRootProps } from "@ark-ui/svelte/clipboard";
 //#region src/components/clipboard/props.d.ts
 type ClipboardRootProps$1 = ClipboardRootProps & {
@@ -8,7 +8,7 @@ type ClipboardRootProps$1 = ClipboardRootProps & {
 };
 //#endregion
 //#region src/components/clipboard/index.d.ts
-declare const Clipboard$1: Omit<typeof Clipboard, "Root"> & {
+declare const Clipboard$1: typeof Clipboard$2 & Omit<typeof Clipboard, "Root"> & {
   Root: typeof ClipboardRoot;
 };
 //#endregion

package/dist/{index-zZy5ZnA5.d.mts → index-BhTdJwBA.d.mts}

@@ -15,6 +15,8 @@ interface CommentProps extends HTMLAttributes<HTMLElement> {
 /** A voice on the record: the portrait hangs left (the avatar snippet),
  * the body carries the byline from `author` and `datetime`, the ink is
  * the children snippet, and the actions snippet is the row of answers. */
-declare const Comment: import("svelte").Component<CommentProps, {}, "">;
+declare const Comment: import("svelte").Component<CommentProps, {}, ""> & {
+  Root: import("svelte").Component<CommentProps, {}, "">;
+};
 //#endregion
 export { CommentProps as n, Comment as t };