@bysages/svelte 0.3.1 → 0.4.0

package/dist/{terminal-Dgw5JEz4.mjs → terminal-C0XnhwEh.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -75,6 +76,6 @@ $.delegate(["keydown"]);
 //#endregion
 //#region src/components/terminal/index.ts
 /** A quiet console: the transcript above, the prompt line below. */
-const Terminal = Terminal$1;
+const Terminal = withSelfRoot(Terminal$1);
 //#endregion
 export { Terminal as t };

package/dist/{textarea-DzDc678j.mjs → textarea-BUzu42K0.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -39,6 +40,6 @@ function Textarea$1($$anchor, $$props) {
 /** The bare multi-line input, dressed in the field recipe: border,
 * surface, focus halo — no shadow. Inside a Field.Root it picks up the
 * label wiring and the invalid state from the context. */
-const Textarea = Textarea$1;
+const Textarea = withSelfRoot(Textarea$1);
 //#endregion
 export { Textarea as t };

package/dist/{toolbar-SNwuRrJr.mjs → toolbar-CiXQAM_F.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -63,6 +64,6 @@ function Toolbar$1($$anchor, $$props) {
 //#region src/components/toolbar/index.ts
 /** A workbench rail: the start tools at the leading edge, the end
 * tools at the trailing. */
-const Toolbar = Toolbar$1;
+const Toolbar = withSelfRoot(Toolbar$1);
 //#endregion
 export { Toolbar as t };

package/dist/{transfer-C0FLA8W1.mjs → transfer-B0EAGhLK.mjs}

@@ -1,4 +1,6 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { t as Button } from "./button-CghWQD3J.mjs";
 import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { Input } from "./components/input/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
@@ -18,16 +20,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 ]);
 var root = $.from_html(`<div data-scope="transfer" data-part="search"><!></div>`);
 var root_1 = $.from_html(`<p data-scope="transfer" data-part="empty">Nothing here</p>`);
-var root_2 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 5 5L19 7"></path></svg>`);
-var root_3 = $.from_html(`<!> <!> <!>`, 1);
-var root_4 = $.from_html(`<div data-scope="transfer" data-part="panel"><div data-scope="transfer" data-part="head"><span data-scope="transfer" data-part="title"> </span> <span data-scope="transfer" data-part="count"> </span></div> <!> <div data-scope="transfer" data-part="list"><!></div></div>`);
-var root_5 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"></path></svg>`);
-var root_6 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6-6-6 6 6 6"></path></svg>`);
-var root_7 = $.from_html(`<div><!> <div data-scope="transfer" data-part="operations"><!> <!></div> <!></div>`);
+var root_2 = $.from_html(`<!> <!> <!>`, 1);
+var root_3 = $.from_html(`<div data-scope="transfer" data-part="panel"><div data-scope="transfer" data-part="head"><span data-scope="transfer" data-part="title"> </span> <span data-scope="transfer" data-part="count"> </span></div> <!> <div data-scope="transfer" data-part="list"><!></div></div>`);
+var root_4 = $.from_html(`<div><!> <div data-scope="transfer" data-part="operations"><!> <!></div> <!></div>`);
 function Transfer$1($$anchor, $$props) {
 	$.push($$props, true);
 	const panel = ($$anchor, side = $.noop, title = $.noop, items = $.noop, checked = $.noop) => {
-		var div = root_4();
+		var div = root_3();
 		var div_1 = $.child(div);
 		var span = $.child(div_1);
 		var text = $.only_child(span, true);
@@ -91,7 +90,7 @@ function Transfer$1($$anchor, $$props) {
 							},
 							onCheckedChange: () => toggle(checked(), $.get(item).value),
 							children: ($$anchor, $$slotProps) => {
-								var fragment_2 = root_3();
+								var fragment_2 = root_2();
 								var node_5 = $.first_child(fragment_2);
 								$.component(node_5, () => Checkbox.Control, ($$anchor, ArkCheckbox_Control) => {
 									ArkCheckbox_Control($$anchor, {
@@ -101,8 +100,7 @@ function Transfer$1($$anchor, $$props) {
 											$.component(node_6, () => Checkbox.Indicator, ($$anchor, ArkCheckbox_Indicator) => {
 												ArkCheckbox_Indicator($$anchor, {
 													children: ($$anchor, $$slotProps) => {
-														var svg = root_2();
-														$.append($$anchor, svg);
+														InternalIcon($$anchor, { name: "check" });
 													},
 													$$slots: { default: true }
 												});
@@ -176,7 +174,7 @@ function Transfer$1($$anchor, $$props) {
 		moving.clear();
 		value(next);
 	}
-	var div_4 = root_7();
+	var div_4 = root_4();
 	$.attribute_effect(div_4, () => ({
 		...rest,
 		"data-scope": "transfer",
@@ -201,8 +199,7 @@ function Transfer$1($$anchor, $$props) {
 			},
 			onclick: () => move(true),
 			children: ($$anchor, $$slotProps) => {
-				var svg_1 = root_5();
-				$.append($$anchor, svg_1);
+				InternalIcon($$anchor, { name: "arrow-right" });
 			},
 			$$slots: { default: true }
 		});
@@ -223,8 +220,7 @@ function Transfer$1($$anchor, $$props) {
 			},
 			onclick: () => move(false),
 			children: ($$anchor, $$slotProps) => {
-				var svg_2 = root_6();
-				$.append($$anchor, svg_2);
+				InternalIcon($$anchor, { name: "arrow-left" });
 			},
 			$$slots: { default: true }
 		});
@@ -240,7 +236,7 @@ function Transfer$1($$anchor, $$props) {
 /** Two ledgers and a crossing: items sit in the source column until
 * the reader checks them and walks them across — and back, the same
 * way. */
-const Transfer = Transfer$1;
+const Transfer = withSelfRoot(Transfer$1);
 injectComponentStyle("checkbox");
 //#endregion
 export { Transfer as t };

package/dist/{tree-select-CSYSYZDN.mjs → tree-select-BEK7cdxE.mjs}

@@ -1,3 +1,5 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
 import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { t as Input } from "./Input-CZhcEeFU.mjs";
 import { injectComponentStyle } from "@bysages/core";
@@ -28,18 +30,17 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 					$.component(node_3, () => TreeView.Branch, ($$anchor, ArkTreeView_Branch) => {
 						ArkTreeView_Branch($$anchor, {
 							children: ($$anchor, $$slotProps) => {
-								var fragment_3 = root_1();
+								var fragment_3 = root();
 								var node_4 = $.first_child(fragment_3);
 								$.component(node_4, () => TreeView.BranchControl, ($$anchor, ArkTreeView_BranchControl) => {
 									ArkTreeView_BranchControl($$anchor, {
 										children: ($$anchor, $$slotProps) => {
-											var fragment_4 = root_1();
+											var fragment_4 = root();
 											var node_5 = $.first_child(fragment_4);
 											$.component(node_5, () => TreeView.BranchIndicator, ($$anchor, ArkTreeView_BranchIndicator) => {
 												ArkTreeView_BranchIndicator($$anchor, {
 													children: ($$anchor, $$slotProps) => {
-														var svg = root();
-														$.append($$anchor, svg);
+														InternalIcon($$anchor, { name: "chevron-right" });
 													},
 													$$slots: { default: true }
 												});
@@ -65,8 +66,8 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 								$.component(node_7, () => TreeView.BranchContent, ($$anchor, ArkTreeView_BranchContent) => {
 									ArkTreeView_BranchContent($$anchor, {
 										children: ($$anchor, $$slotProps) => {
-											var fragment_6 = root_1();
-											var node_8 = $.first_child(fragment_6);
+											var fragment_7 = root();
+											var node_8 = $.first_child(fragment_7);
 											$.component(node_8, () => TreeView.BranchIndentGuide, ($$anchor, ArkTreeView_BranchIndentGuide) => {
 												ArkTreeView_BranchIndentGuide($$anchor, {});
 											});
@@ -77,7 +78,7 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 													row($$anchor, () => $.get(child), () => $.get($0));
 												}
 											});
-											$.append($$anchor, fragment_6);
+											$.append($$anchor, fragment_7);
 										},
 										$$slots: { default: true }
 									});
@@ -90,13 +91,13 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 					$.append($$anchor, fragment_2);
 				};
 				var alternate = ($$anchor) => {
-					var fragment_8 = $.comment();
-					var node_10 = $.first_child(fragment_8);
+					var fragment_9 = $.comment();
+					var node_10 = $.first_child(fragment_9);
 					$.component(node_10, () => TreeView.Item, ($$anchor, ArkTreeView_Item) => {
 						ArkTreeView_Item($$anchor, {
 							children: ($$anchor, $$slotProps) => {
-								var fragment_9 = $.comment();
-								var node_11 = $.first_child(fragment_9);
+								var fragment_10 = $.comment();
+								var node_11 = $.first_child(fragment_10);
 								$.component(node_11, () => TreeView.ItemText, ($$anchor, ArkTreeView_ItemText) => {
 									ArkTreeView_ItemText($$anchor, {
 										children: ($$anchor, $$slotProps) => {
@@ -108,12 +109,12 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 										$$slots: { default: true }
 									});
 								});
-								$.append($$anchor, fragment_9);
+								$.append($$anchor, fragment_10);
 							},
 							$$slots: { default: true }
 						});
 					});
-					$.append($$anchor, fragment_8);
+					$.append($$anchor, fragment_9);
 				};
 				$.if(node_2, ($$render) => {
 					if (node().children) $$render(consequent);
@@ -137,12 +138,11 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"size",
 	"disabled"
 ]);
-var root = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg>`);
-var root_1 = $.from_html(`<!> <!>`, 1);
-var root_2 = $.from_html(`<button> <span data-part="chevron" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span></button>`);
-var root_3 = $.from_html(`<div data-scope="tree-select" data-part="search"><!></div>`);
-var root_4 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing matches</p>`);
-var root_5 = $.from_html(`<!> <div data-scope="tree-select" data-part="body"><!></div>`, 1);
+var root = $.from_html(`<!> <!>`, 1);
+var root_1 = $.from_html(`<button> <span data-part="chevron" aria-hidden="true"><!></span></button>`);
+var root_2 = $.from_html(`<div data-scope="tree-select" data-part="search"><!></div>`);
+var root_3 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing matches</p>`);
+var root_4 = $.from_html(`<!> <div data-scope="tree-select" data-part="body"><!></div>`, 1);
 function TreeSelect$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("tree-select");
@@ -194,8 +194,8 @@ function TreeSelect$1($$anchor, $$props) {
 		value(selected);
 		$.set(open, false);
 	}
-	var fragment_11 = $.comment();
-	var node_12 = $.first_child(fragment_11);
+	var fragment_12 = $.comment();
+	var node_12 = $.first_child(fragment_12);
 	$.component(node_12, () => Popover.Root, ($$anchor, ArkPopover_Root) => {
 		ArkPopover_Root($$anchor, {
 			get open() {
@@ -210,11 +210,11 @@ function TreeSelect$1($$anchor, $$props) {
 				if (!details.open) $.set(query, "");
 			},
 			children: ($$anchor, $$slotProps) => {
-				var fragment_12 = root_1();
-				var node_13 = $.first_child(fragment_12);
+				var fragment_13 = root();
+				var node_13 = $.first_child(fragment_13);
 				{
 					const asChild = ($$anchor, props = $.noop) => {
-						var button = root_2();
+						var button = root_1();
 						$.attribute_effect(button, ($0) => ({
 							...$0,
 							...rest,
@@ -227,7 +227,10 @@ function TreeSelect$1($$anchor, $$props) {
 							disabled: disabled()
 						}), [() => props()()]);
 						var text_2 = $.child(button);
-						$.next();
+						var span = $.sibling(text_2);
+						var node_14 = $.child(span);
+						InternalIcon(node_14, { name: "chevron-right" });
+						$.reset(span);
 						$.reset(button);
 						$.template_effect(() => $.set_text(text_2, `${$.get(label) ?? placeholder() ?? ""} `));
 						$.append($$anchor, button);
@@ -242,17 +245,17 @@ function TreeSelect$1($$anchor, $$props) {
 						});
 					});
 				}
-				var node_14 = $.sibling(node_13, 2);
-				Portal(node_14, {
+				var node_15 = $.sibling(node_13, 2);
+				Portal(node_15, {
 					children: ($$anchor, $$slotProps) => {
-						var fragment_13 = $.comment();
-						var node_15 = $.first_child(fragment_13);
-						$.component(node_15, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
+						var fragment_14 = $.comment();
+						var node_16 = $.first_child(fragment_14);
+						$.component(node_16, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
 							ArkPopover_Positioner($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									var fragment_14 = $.comment();
-									var node_16 = $.first_child(fragment_14);
-									$.component(node_16, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
+									var fragment_15 = $.comment();
+									var node_17 = $.first_child(fragment_15);
+									$.component(node_17, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
 										ArkPopover_Content($$anchor, {
 											"data-scope": "tree-select",
 											"data-part": "content",
@@ -260,15 +263,15 @@ function TreeSelect$1($$anchor, $$props) {
 												return size();
 											},
 											children: ($$anchor, $$slotProps) => {
-												var fragment_15 = root_5();
-												var node_17 = $.first_child(fragment_15);
+												var fragment_16 = root_4();
+												var node_18 = $.first_child(fragment_16);
 												var consequent_1 = ($$anchor) => {
-													var div = root_3();
-													var node_18 = $.child(div);
+													var div = root_2();
+													var node_19 = $.child(div);
 													{
 														let $0 = $.derived(() => messages().select.filter);
 														let $1 = $.derived(() => messages().select.filter);
-														Input(node_18, {
+														Input(node_19, {
 															size: "sm",
 															get placeholder() {
 																return $.get($0);
@@ -287,23 +290,23 @@ function TreeSelect$1($$anchor, $$props) {
 													$.reset(div);
 													$.append($$anchor, div);
 												};
-												$.if(node_17, ($$render) => {
+												$.if(node_18, ($$render) => {
 													if (filterable()) $$render(consequent_1);
 												});
-												var div_1 = $.sibling(node_17, 2);
-												var node_19 = $.child(div_1);
+												var div_1 = $.sibling(node_18, 2);
+												var node_20 = $.child(div_1);
 												var consequent_2 = ($$anchor) => {
-													var p = root_4();
+													var p = root_3();
 													$.append($$anchor, p);
 												};
 												var alternate_1 = ($$anchor) => {
-													var fragment_16 = $.comment();
-													var node_20 = $.first_child(fragment_16);
+													var fragment_17 = $.comment();
+													var node_21 = $.first_child(fragment_17);
 													{
 														let $0 = $.derived(() => value() ? [value()] : []);
 														let $1 = $.derived(() => $.get(filtering) ? $.get(expandedWhileFiltering) : void 0);
 														let $2 = $.derived(() => $.get(filtering) ? void 0 : $.get(firstLevel));
-														$.component(node_20, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
+														$.component(node_21, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
 															ArkTreeView_Root($$anchor, {
 																get collection() {
 																	return $.get(visibleCollection);
@@ -320,61 +323,61 @@ function TreeSelect$1($$anchor, $$props) {
 																},
 																onSelectionChange: pick,
 																children: ($$anchor, $$slotProps) => {
-																	var fragment_17 = $.comment();
-																	var node_21 = $.first_child(fragment_17);
-																	$.component(node_21, () => TreeView.Tree, ($$anchor, ArkTreeView_Tree) => {
+																	var fragment_18 = $.comment();
+																	var node_22 = $.first_child(fragment_18);
+																	$.component(node_22, () => TreeView.Tree, ($$anchor, ArkTreeView_Tree) => {
 																		ArkTreeView_Tree($$anchor, {
 																			children: ($$anchor, $$slotProps) => {
-																				var fragment_18 = $.comment();
-																				var node_22 = $.first_child(fragment_18);
-																				$.each(node_22, 19, () => $.get(visibleCollection).rootNode.children ?? [], (node) => node.value, ($$anchor, node, index) => {
+																				var fragment_19 = $.comment();
+																				var node_23 = $.first_child(fragment_19);
+																				$.each(node_23, 19, () => $.get(visibleCollection).rootNode.children ?? [], (node) => node.value, ($$anchor, node, index) => {
 																					row($$anchor, () => $.get(node), () => [$.get(index)]);
 																				});
-																				$.append($$anchor, fragment_18);
+																				$.append($$anchor, fragment_19);
 																			},
 																			$$slots: { default: true }
 																		});
 																	});
-																	$.append($$anchor, fragment_17);
+																	$.append($$anchor, fragment_18);
 																},
 																$$slots: { default: true }
 															});
 														});
 													}
-													$.append($$anchor, fragment_16);
+													$.append($$anchor, fragment_17);
 												};
-												$.if(node_19, ($$render) => {
+												$.if(node_20, ($$render) => {
 													if (($.get(visibleCollection).rootNode.children ?? []).length === 0) $$render(consequent_2);
 													else $$render(alternate_1, -1);
 												});
 												$.reset(div_1);
-												$.append($$anchor, fragment_15);
+												$.append($$anchor, fragment_16);
 											},
 											$$slots: { default: true }
 										});
 									});
-									$.append($$anchor, fragment_14);
+									$.append($$anchor, fragment_15);
 								},
 								$$slots: { default: true }
 							});
 						});
-						$.append($$anchor, fragment_13);
+						$.append($$anchor, fragment_14);
 					},
 					$$slots: { default: true }
 				});
-				$.append($$anchor, fragment_12);
+				$.append($$anchor, fragment_13);
 			},
 			$$slots: { default: true }
 		});
 	});
-	$.append($$anchor, fragment_11);
+	$.append($$anchor, fragment_12);
 	$.pop();
 }
 //#endregion
 //#region src/components/tree-select/index.ts
 /** A tree behind a field: the control reads like an input, the vessel
 * below walks the hierarchy, and one leaf click closes the deal. */
-const TreeSelect = TreeSelect$1;
+const TreeSelect = withSelfRoot(TreeSelect$1);
 injectComponentStyle("tree-view");
 //#endregion
 export { TreeSelect as t };

package/dist/{typography-Cygr9XaD.mjs → typography-Bl6MxaeI.mjs}

@@ -156,6 +156,7 @@ function TypographyMuted($$anchor, $$props) {
 * heading ride the song-serif, the rest ride the hei. Nothing here is
 * decorative — hierarchy is size, weight, and space. */
 const Typography = Object.assign(TypographyDisplay, {
+	Root: TypographyDisplay,
 	Display: TypographyDisplay,
 	Heading: TypographyHeading,
 	Lead: TypographyLead,

package/dist/use-media-controls-BYYG0DgO.mjs

@@ -0,0 +1,149 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/media-player/use-media-controls.svelte
+function useMediaControls(media) {
+	let currentTime = $.state(0);
+	let duration = $.state(0);
+	let playing = $.state(false);
+	let muted = $.state(false);
+	let volume = $.state(1);
+	let playbackRate = $.state(1);
+	let selectedTextTrack = $.state(-1);
+	let error = $.state(false);
+	function readMedia(element) {
+		$.set(currentTime, element.currentTime || 0, true);
+		$.set(duration, Number.isFinite(element.duration) ? element.duration : 0, true);
+		$.set(playing, !element.paused && !element.ended, true);
+		$.set(muted, element.muted, true);
+		$.set(volume, element.volume, true);
+		$.set(playbackRate, element.playbackRate, true);
+		$.set(error, false);
+	}
+	function readTextTracks(element) {
+		$.set(selectedTextTrack, Array.from(element.textTracks).findIndex((track) => track.mode === "showing"), true);
+	}
+	function clamp(value, min, max) {
+		return Math.min(Math.max(value, min), max);
+	}
+	$.user_effect(() => {
+		const element = media.current;
+		if (!element) return;
+		const updateFromEvent = (event) => {
+			readMedia(element);
+			$.set(error, event.type === "error");
+		};
+		const syncTracks = () => {
+			readTextTracks(element);
+			window.setTimeout(() => readTextTracks(element), 0);
+		};
+		const events = [
+			"loadedmetadata",
+			"durationchange",
+			"timeupdate",
+			"progress",
+			"play",
+			"pause",
+			"ended",
+			"waiting",
+			"playing",
+			"seeking",
+			"seeked",
+			"volumechange",
+			"ratechange",
+			"error"
+		];
+		for (const event of events) element.addEventListener(event, updateFromEvent);
+		element.addEventListener("loadedmetadata", syncTracks);
+		element.addEventListener("loadstart", syncTracks);
+		readMedia(element);
+		readTextTracks(element);
+		return () => {
+			for (const event of events) element.removeEventListener(event, updateFromEvent);
+			element.removeEventListener("loadedmetadata", syncTracks);
+			element.removeEventListener("loadstart", syncTracks);
+			element.pause();
+		};
+	});
+	return {
+		get currentTime() {
+			return $.get(currentTime);
+		},
+		get duration() {
+			return $.get(duration);
+		},
+		get playing() {
+			return $.get(playing);
+		},
+		get muted() {
+			return $.get(muted);
+		},
+		get volume() {
+			return $.get(volume);
+		},
+		get playbackRate() {
+			return $.get(playbackRate);
+		},
+		get selectedTextTrack() {
+			return $.get(selectedTextTrack);
+		},
+		get error() {
+			return $.get(error);
+		},
+		seek(time) {
+			const element = media.current;
+			if (!element) return;
+			element.currentTime = clamp(time, 0, Number.isFinite(element.duration) ? element.duration : Number.MAX_SAFE_INTEGER);
+		},
+		setVolume(value) {
+			const element = media.current;
+			if (!element) return;
+			element.volume = clamp(value, 0, 1);
+		},
+		setPlaybackRate(value) {
+			const element = media.current;
+			if (!element) return;
+			element.playbackRate = value;
+		},
+		toggleMuted() {
+			const element = media.current;
+			if (!element) return;
+			element.muted = !element.muted;
+		},
+		async toggle() {
+			const element = media.current;
+			if (!element) return;
+			if (element.paused) await element.play();
+			else element.pause();
+		},
+		selectTextTrack(index) {
+			const element = media.current;
+			if (!element) return;
+			Array.from(element.textTracks).forEach((track, trackIndex) => {
+				track.mode = trackIndex === index ? "showing" : "disabled";
+			});
+			$.set(selectedTextTrack, index, true);
+		},
+		async togglePictureInPicture() {
+			const pipElement = element;
+			if (!pipElement.requestPictureInPicture) return;
+			if (document.pictureInPictureElement) await document.exitPictureInPicture();
+			else await pipElement.requestPictureInPicture();
+		},
+		async toggleFullscreen(root) {
+			if (document.fullscreenElement) await document.exitFullscreen();
+			else await root.requestFullscreen();
+		}
+	};
+}
+/** A compact clock for player chrome: hours only when the media asks
+* for them, stable digits so the time never jitters the controls. */
+function formatMediaTime(seconds) {
+	if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+	const whole = Math.floor(seconds);
+	const hours = Math.floor(whole / 3600);
+	const minutes = Math.floor(whole % 3600 / 60);
+	const secs = String(whole % 3600 % 60).padStart(2, "0");
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${secs}` : `${minutes}:${secs}`;
+}
+//#endregion
+export { useMediaControls as n, formatMediaTime as t };