@bysages/svelte 0.2.3 → 0.3.0

package/dist/result-4Oee2ndu.mjs

@@ -0,0 +1,159 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/result/Description.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$4 = $.from_html(`<p><!></p>`);
+function Description($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes$4);
+	var p = root$4();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "description"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/Extra.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function Extra($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var div = root$3();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "extra"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/Result.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"status",
+	"children"
+]);
+var root$2 = $.from_html(`<div><!></div>`);
+function Result$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	/** The verdict the operation returned; the fixed pigments speak it. */
+	let status = $.prop($$props, "status", 3, "info"), rest = $.rest_props($$props, rest_excludes$2);
+	var div = root$2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-status": status(),
+		"data-scope": "result",
+		"data-part": "root"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/ResultIcon.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_svg(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"></svg>`);
+var root_1 = $.from_html(`<div><!></div>`);
+function ResultIcon($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	const MARK = "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>";
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "icon"
+	}));
+	var node = $.child(div);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children ?? $.noop);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var svg = root$1();
+		$.html(svg, () => MARK, true);
+		$.reset(svg);
+		$.append($$anchor, svg);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/Title.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<h3><!></h3>`);
+function Title($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes);
+	var h3 = root();
+	$.attribute_effect(h3, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "title"
+	}));
+	var node = $.child(h3);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(h3);
+	$.append($$anchor, h3);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/index.ts
+/** A verdict drawn after the deed — Result, Result.Icon, Result.Title,
+* Result.Description, Result.Extra. */
+const Result = Object.assign(Result$1, {
+	Icon: ResultIcon,
+	Title,
+	Description,
+	Extra
+});
+//#endregion
+export { Result as t };

package/dist/select-rkY0qJKI.mjs

@@ -0,0 +1,95 @@
+import { t as SelectRoot } from "./SelectRoot-l-rb18FH.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { useFieldContext } from "@ark-ui/svelte/field";
+import { Select } from "@ark-ui/svelte/select";
+//#region src/components/select/NativeSelect.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"options",
+	"size",
+	"invalid",
+	"placeholder",
+	"disabled"
+]);
+var root = $.from_html(`<option disabled=""> </option>`);
+var root_1 = $.from_html(`<option> </option>`);
+var root_2 = $.from_html(`<span><select><!><!></select> <svg data-scope="select" data-part="native-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>`);
+function NativeSelect$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("select");
+	let value = $.prop($$props, "value", 15, ""), size = $.prop($$props, "size", 3, "md"), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const field = useFieldContext();
+	const fieldProps = $.derived(() => field?.()?.getInputProps() ?? {});
+	const isInvalid = $.derived(() => invalid() || field?.()?.invalid === true);
+	const isDisabled = $.derived(() => disabled() || field?.()?.disabled === true);
+	const isEmpty = $.derived(() => value() == null || value() === "");
+	var span = root_2();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "select",
+		"data-part": "native-root",
+		"data-size": size(),
+		"data-invalid": $.get(isInvalid) ? "" : void 0,
+		"data-disabled": $.get(isDisabled) ? "" : void 0,
+		"data-placeholder-shown": $.get(isEmpty) ? "" : void 0
+	}));
+	var select = $.child(span);
+	$.attribute_effect(select, () => ({
+		...$.get(fieldProps),
+		"data-scope": "select",
+		"data-part": "native",
+		disabled: $.get(isDisabled) || void 0
+	}));
+	var node = $.child(select);
+	var consequent = ($$anchor) => {
+		var option_1 = root();
+		var text = $.only_child(option_1, true);
+		option_1.value = option_1.__value = "";
+		$.template_effect(() => {
+			$.set_attribute(option_1, "hidden", $.get(isEmpty) ? void 0 : true);
+			$.set_text(text, $$props.placeholder);
+		});
+		$.append($$anchor, option_1);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.placeholder) $$render(consequent);
+	});
+	var node_1 = $.sibling(node);
+	$.each(node_1, 17, () => $$props.options, (option) => option.value, ($$anchor, option) => {
+		var option_2 = root_1();
+		var text_1 = $.only_child(option_2, true);
+		var option_2_value = {};
+		$.template_effect(() => {
+			option_2.disabled = $.get(option).disabled;
+			$.set_text(text_1, $.get(option).label);
+			if (option_2_value !== (option_2_value = $.get(option).value)) option_2.value = (option_2.__value = option_2_value) ?? "";
+		});
+		$.append($$anchor, option_2);
+	});
+	$.reset(select);
+	$.next(2);
+	$.reset(span);
+	$.bind_select_value(select, value);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/select/index.ts
+/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
+* whole control and its list dissolves open as a paper vessel, the checked
+* row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
+* Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
+* Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
+const Select$1 = {
+	...Select,
+	Root: SelectRoot
+};
+/** The platform's own list wearing the control recipe. */
+const NativeSelect = NativeSelect$1;
+//#endregion
+export { Select$1 as n, NativeSelect as t };

package/dist/spotlight-DMC5E1eS.mjs

@@ -0,0 +1,51 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/spotlight/Spotlight.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"radius",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function Spotlight$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("spotlight");
+	/** How far the lamp throws before the ink swallows it. */
+	let rest = $.rest_props($$props, rest_excludes);
+	function track(event) {
+		const host = event.currentTarget;
+		const rect = host.getBoundingClientRect();
+		host.style.setProperty("--bs-spot-x", `${event.clientX - rect.left}px`);
+		host.style.setProperty("--bs-spot-y", `${event.clientY - rect.top}px`);
+	}
+	var div = root();
+	var event_handler = (event) => {
+		track(event);
+		event.currentTarget.setAttribute("data-hovered", "");
+	};
+	var event_handler_1 = (event) => event.currentTarget.removeAttribute("data-hovered");
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "spotlight",
+		"data-part": "root",
+		onpointermove: track,
+		onpointerenter: event_handler,
+		onpointerleave: event_handler_1,
+		[$.STYLE]: { "--bs-spot-radius": $$props.radius }
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/spotlight/index.ts
+/** The ink-light card: a vessel whose rim and face take light from the
+* reader's hand. */
+const Spotlight = Spotlight$1;
+//#endregion
+export { Spotlight as t };

package/dist/{table-C0AcH5Dw.mjs → table-BnNK4_su.mjs}

@@ -1,5 +1,5 @@
 import { Pagination } from "./components/pagination/index.mjs";
-import { Select as Select$1 } from "./components/select/index.mjs";
+import { n as Select$1 } from "./select-rkY0qJKI.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";

package/dist/terminal-B3b4KzoN.mjs

@@ -0,0 +1,78 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/terminal/Terminal.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"lines",
+	"prompt",
+	"placeholder",
+	"label",
+	"onCommand"
+]);
+var root = $.from_html(`<div data-scope="terminal" data-part="line"> </div>`);
+var root_1 = $.from_html(`<div><div data-scope="terminal" data-part="scroll"></div> <div data-scope="terminal" data-part="entry"><span data-scope="terminal" data-part="sigil" aria-hidden="true"> </span> <input data-scope="terminal" data-part="input" spellcheck="false" autocomplete="off"/></div></div>`);
+function Terminal$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("terminal");
+	let lines = $.prop($$props, "lines", 19, () => []), prompt = $.prop($$props, "prompt", 3, "$"), rest = $.rest_props($$props, rest_excludes);
+	let draft = $.state("");
+	let scroll = $.state(void 0);
+	$.user_effect(() => {
+		lines().length;
+		$.get(scroll)?.scrollTo({ top: $.get(scroll).scrollHeight });
+	});
+	function submit() {
+		const text = $.get(draft).trim();
+		if (!text) return;
+		$.set(draft, "");
+		$$props.onCommand?.(text);
+	}
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: "log",
+		"aria-label": $$props.label,
+		"data-scope": "terminal",
+		"data-part": "root"
+	}));
+	var div_1 = $.child(div);
+	$.each(div_1, 21, lines, $.index, ($$anchor, line) => {
+		var div_2 = root();
+		var text_1 = $.only_child(div_2, true);
+		$.template_effect(() => $.set_text(text_1, $.get(line)));
+		$.append($$anchor, div_2);
+	});
+	$.reset(div_1);
+	$.bind_this(div_1, ($$value) => $.set(scroll, $$value), () => $.get(scroll));
+	var div_3 = $.sibling(div_1, 2);
+	var span = $.child(div_3);
+	var text_2 = $.only_child(span, true);
+	var input = $.sibling(span, 2);
+	$.remove_input_defaults(input);
+	$.reset(div_3);
+	$.reset(div);
+	$.template_effect(() => {
+		$.set_text(text_2, prompt());
+		$.set_attribute(input, "placeholder", $$props.placeholder);
+		$.set_attribute(input, "aria-label", $$props.label ? `${$$props.label} command line` : "Command line");
+	});
+	$.delegated("keydown", input, (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			submit();
+		}
+	});
+	$.bind_value(input, () => $.get(draft), ($$value) => $.set(draft, $$value));
+	$.append($$anchor, div);
+	$.pop();
+}
+$.delegate(["keydown"]);
+//#endregion
+//#region src/components/terminal/index.ts
+/** A quiet console: the transcript above, the prompt line below. */
+const Terminal = Terminal$1;
+//#endregion
+export { Terminal as t };

package/dist/{timeline-BV4eahUx.mjs → timeline-1yPOTbtY.mjs}

@@ -6,18 +6,20 @@ var rest_excludes$3 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
+	"orientation",
 	"children"
 ]);
 var root$3 = $.from_html(`<ol><!></ol>`);
 function Timeline$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("timeline");
-	let rest = $.rest_props($$props, rest_excludes$3);
+	let orientation = $.prop($$props, "orientation", 3, "vertical"), rest = $.rest_props($$props, rest_excludes$3);
 	var ol = root$3();
 	$.attribute_effect(ol, () => ({
 		...rest,
 		"data-scope": "timeline",
-		"data-part": "root"
+		"data-part": "root",
+		"data-orientation": orientation()
 	}));
 	var node = $.child(ol);
 	$.snippet(node, () => $$props.children ?? $.noop);

package/dist/toolbar-SNwuRrJr.mjs

@@ -0,0 +1,68 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/toolbar/Toolbar.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label",
+	"start",
+	"end",
+	"children"
+]);
+var root = $.from_html(`<div data-scope="toolbar" data-part="group" data-edge="end"><!></div>`);
+var root_1 = $.from_html(`<div><div data-scope="toolbar" data-part="group" data-edge="start"><!></div> <!></div>`);
+function Toolbar$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("toolbar");
+	let rest = $.rest_props($$props, rest_excludes);
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: "toolbar",
+		"aria-label": $$props.label,
+		"data-scope": "toolbar",
+		"data-part": "root"
+	}));
+	var div_1 = $.child(div);
+	var node = $.child(div_1);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.start);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var fragment_1 = $.comment();
+		var node_2 = $.first_child(fragment_1);
+		$.snippet(node_2, () => $$props.children ?? $.noop);
+		$.append($$anchor, fragment_1);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.start) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(div_1);
+	var node_3 = $.sibling(div_1, 2);
+	var consequent_1 = ($$anchor) => {
+		var div_2 = root();
+		var node_4 = $.child(div_2);
+		$.snippet(node_4, () => $$props.end);
+		$.reset(div_2);
+		$.append($$anchor, div_2);
+	};
+	$.if(node_3, ($$render) => {
+		if ($$props.end) $$render(consequent_1);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#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;
+//#endregion
+export { Toolbar as t };

package/dist/{tree-select-aHymj8Zu.mjs → tree-select-BSf4a_En.mjs}

@@ -1,4 +1,4 @@
-import { t as Input } from "./Input-Biz4J1B6.mjs";
+import { t as Input } from "./Input-CZhcEeFU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";

package/dist/user-BjJSjDYV.mjs

@@ -0,0 +1,100 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Avatar } from "@ark-ui/svelte/avatar";
+//#region src/components/user/User.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"name",
+	"description",
+	"size",
+	"src",
+	"shape",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+var root_1 = $.from_html(`<span data-scope="user" data-part="description"> </span>`);
+var root_2 = $.from_html(`<div><!> <div data-scope="user" data-part="meta"><span data-scope="user" data-part="name"> </span> <!> <!></div></div>`);
+function User$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("user");
+	let shape = $.prop($$props, "shape", 3, "circle"), rest = $.rest_props($$props, rest_excludes);
+	const initials = $.derived(() => $$props.name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => (word[0] ?? "").toUpperCase()).join(""));
+	var div = root_2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "user",
+		"data-part": "root"
+	}));
+	var node = $.child(div);
+	$.component(node, () => Avatar.Root, ($$anchor, ArkAvatar_Root) => {
+		ArkAvatar_Root($$anchor, {
+			get "data-size"() {
+				return $$props.size;
+			},
+			get "data-shape"() {
+				return shape();
+			},
+			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, () => Avatar.Image, ($$anchor, ArkAvatar_Image) => {
+						ArkAvatar_Image($$anchor, { get src() {
+							return $$props.src;
+						} });
+					});
+					$.append($$anchor, fragment_1);
+				};
+				$.if(node_1, ($$render) => {
+					if ($$props.src) $$render(consequent);
+				});
+				var node_3 = $.sibling(node_1, 2);
+				$.component(node_3, () => Avatar.Fallback, ($$anchor, ArkAvatar_Fallback) => {
+					ArkAvatar_Fallback($$anchor, {
+						children: ($$anchor, $$slotProps) => {
+							$.next();
+							var text = $.text();
+							$.template_effect(() => $.set_text(text, $.get(initials)));
+							$.append($$anchor, text);
+						},
+						$$slots: { default: true }
+					});
+				});
+				$.append($$anchor, fragment);
+			},
+			$$slots: { default: true }
+		});
+	});
+	var div_1 = $.sibling(node, 2);
+	var span = $.child(div_1);
+	var text_1 = $.only_child(span, true);
+	var node_4 = $.sibling(span, 2);
+	var consequent_1 = ($$anchor) => {
+		var span_1 = root_1();
+		var text_2 = $.only_child(span_1, true);
+		$.template_effect(() => $.set_text(text_2, $$props.description));
+		$.append($$anchor, span_1);
+	};
+	$.if(node_4, ($$render) => {
+		if ($$props.description) $$render(consequent_1);
+	});
+	var node_5 = $.sibling(node_4, 2);
+	$.snippet(node_5, () => $$props.children ?? $.noop);
+	$.reset(div_1);
+	$.reset(div);
+	$.template_effect(() => $.set_text(text_1, $$props.name));
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/user/index.ts
+/** A person on one line: the seal before the words, the name and its
+* quiet echo beneath. */
+const User = User$1;
+//#endregion
+export { User as t };

package/dist/virtual-list-psKQ_NVr.mjs

@@ -0,0 +1,59 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { createVirtualizer } from "@tanstack/svelte-virtual";
+//#region src/components/virtual-list/VirtualList.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"items",
+	"itemHeight",
+	"height",
+	"renderItem"
+]);
+var root = $.from_html(`<div data-scope="virtual-list" data-part="row"><!></div>`);
+var root_1 = $.from_html(`<div><div data-scope="virtual-list" data-part="inner"></div></div>`);
+function VirtualList$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("virtual-list");
+	let itemHeight = $.prop($$props, "itemHeight", 3, 40), height = $.prop($$props, "height", 3, 320), rest = $.rest_props($$props, rest_excludes);
+	let viewport = $.state(void 0);
+	const virtualizer = createVirtualizer({
+		count: $$props.items.length,
+		getScrollElement: () => $.get(viewport) ?? null,
+		estimateSize: () => itemHeight(),
+		overscan: 6
+	});
+	const rows = $.derived(() => virtualizer.getVirtualItems());
+	const total = $.derived(() => virtualizer.getTotalSize());
+	const blockHeight = $.derived(() => typeof height() === "number" ? `${height()}px` : height());
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "virtual-list",
+		"data-part": "root",
+		style: `block-size: ${$.get(blockHeight) ?? ""}`
+	}));
+	var div_1 = $.child(div);
+	$.each(div_1, 21, () => $.get(rows), (row) => row.key, ($$anchor, row) => {
+		var div_2 = root();
+		var node = $.child(div_2);
+		$.snippet(node, () => $$props.renderItem ?? $.noop, () => $$props.items[$.get(row).index], () => $.get(row).index);
+		$.reset(div_2);
+		$.template_effect(() => $.set_style(div_2, `position: absolute; top: 0; inset-inline-start: 0; inline-size: 100%; transform: translateY(${$.get(row).start ?? ""}px); block-size: ${$.get(row).size ?? ""}px`));
+		$.append($$anchor, div_2);
+	});
+	$.reset(div_1);
+	$.reset(div);
+	$.bind_this(div, ($$value) => $.set(viewport, $$value), () => $.get(viewport));
+	$.template_effect(() => $.set_style(div_1, `block-size: ${$.get(total) ?? ""}px; position: relative`));
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/virtual-list/index.ts
+/** A ledger that only mounts the rows on stage. */
+const VirtualList = VirtualList$1;
+//#endregion
+export { VirtualList as t };