@bysages/solid 0.4.3 → 0.5.0

package/dist/components/layout/index.mjs

@@ -1,14 +1,14 @@
-import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { createComponent, delegateEvents, effect, insert, memo, ref, setAttribute, spread, template } from "@solidjs/web";
+import { n as useComponentMessages } from "../../use-component-messages-DS9ppb4C.mjs";
+import { createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { createContext, createEffect, createSignal, splitProps, useContext } from "solid-js";
-//#region src/components/layout/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<header>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<main>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<footer>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<aside><!><!>`);
+// src/components/layout/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<header>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<main>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<footer>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<aside>`);
 const LayoutContext = createContext();
 /**
 * The application skeleton: Root, Header, Sider, Content, Footer —
@@ -22,40 +22,46 @@ function LayoutRoot(props) {
 		value: { siderPlacement: () => own.sider },
 		get children() {
 			var _el$ = _tmpl$();
-			spread(_el$, [rest, {
+			spread(_el$, mergeProps(rest, {
 				"data-scope": "layout",
 				"data-part": "root",
-				get "data-sider"() {
+				get ["data-sider"]() {
 					return own.sider;
 				}
-			}], false);
+			}), false, false);
 			return _el$;
 		}
 	});
 }
 function LayoutHeader(props) {
-	var _el$2 = _tmpl$2();
-	spread(_el$2, [props, {
-		"data-scope": "layout",
-		"data-part": "header"
-	}], false);
-	return _el$2;
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps(props, {
+			"data-scope": "layout",
+			"data-part": "header"
+		}), false, false);
+		return _el$2;
+	})();
 }
 function LayoutContent(props) {
-	var _el$3 = _tmpl$3();
-	spread(_el$3, [props, {
-		"data-scope": "layout",
-		"data-part": "content"
-	}], false);
-	return _el$3;
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps(props, {
+			"data-scope": "layout",
+			"data-part": "content"
+		}), false, false);
+		return _el$3;
+	})();
 }
 function LayoutFooter(props) {
-	var _el$4 = _tmpl$4();
-	spread(_el$4, [props, {
-		"data-scope": "layout",
-		"data-part": "footer"
-	}], false);
-	return _el$4;
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps(props, {
+			"data-scope": "layout",
+			"data-part": "footer"
+		}), false, false);
+		return _el$4;
+	})();
 }
 /** One step of the arrow-key resize, in px. */
 const RESIZE_STEP = 16;
@@ -95,6 +101,15 @@ function LayoutSider(props) {
 	let startPointerX = 0;
 	let startWidth = 0;
 	const railWidth = () => rail ? Math.round(rail.getBoundingClientRect().width) : 0;
+	const clampWidth = (next) => {
+		const toPx = (value) => {
+			const size = Number.parseFloat(value);
+			if (Number.isNaN(size)) return 0;
+			if (value.endsWith("rem")) return size * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+			return size;
+		};
+		return Math.min(Math.max(next, toPx(own.minWidth ?? "12rem")), toPx(own.maxWidth ?? "24rem"));
+	};
 	const onPointerDown = (event) => {
 		setDragging(true);
 		startPointerX = event.clientX;
@@ -104,7 +119,7 @@ function LayoutSider(props) {
 	const onPointerMove = (event) => {
 		if (!dragging()) return;
 		const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
-		const next = Math.round(startWidth + towardFlow * (event.clientX - startPointerX));
+		const next = clampWidth(Math.round(startWidth + towardFlow * (event.clientX - startPointerX)));
 		setInnerWidth(`${next}px`);
 		own.onWidthChange?.(`${next}px`);
 	};
@@ -116,67 +131,61 @@ function LayoutSider(props) {
 		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
 		event.preventDefault();
 		const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
-		const next = railWidth() + (widen ? RESIZE_STEP : -16);
+		const next = clampWidth(railWidth() + (widen ? RESIZE_STEP : -16));
 		setInnerWidth(`${next}px`);
 		own.onWidthChange?.(`${next}px`);
 	};
 	const handle = () => own.resizable && !collapsed() ? (() => {
 		var _el$5 = _tmpl$5();
-		_el$5._$$keydown = onKeyDown;
-		_el$5._$$pointerup = onPointerUp;
-		_el$5._$$pointermove = onPointerMove;
-		_el$5._$$pointerdown = onPointerDown;
-		effect(() => {
-			return {
-				e: dragging() ? "" : void 0,
-				t: messages().sidebar.resize,
-				a: railWidth()
-			};
-		}, ({ e, t, a }, _p$) => {
-			e !== _p$?.e && setAttribute(_el$5, "data-dragging", e);
-			t !== _p$?.t && setAttribute(_el$5, "aria-label", t);
-			a !== _p$?.a && setAttribute(_el$5, "aria-valuenow", a);
+		_el$5.$$keydown = onKeyDown;
+		_el$5.$$pointerup = onPointerUp;
+		_el$5.$$pointermove = onPointerMove;
+		_el$5.$$pointerdown = onPointerDown;
+		effect((_p$) => {
+			var _v$ = dragging() ? "" : void 0, _v$2 = messages().sidebar.resize, _v$3 = railWidth();
+			_v$ !== _p$.e && setAttribute(_el$5, "data-dragging", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$5, "aria-label", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$5, "aria-valuenow", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
 		});
 		return _el$5;
 	})() : null;
 	const foldedWidth = () => own.collapsedWidth ?? "3.5rem";
-	var _el$6 = _tmpl$6();
-	var _el$7 = _el$6.firstChild;
-	var _el$8 = _el$7.nextSibling;
-	ref(() => {
-		return (el) => rail = el;
-	}, _el$6);
-	spread(_el$6, [rest, {
-		get style() {
-			return {
-				...typeof own.style === "object" ? own.style : {},
-				"--bs-layout-sider-width": collapsed() ? foldedWidth() : width(),
-				"--bs-layout-sider-min": collapsed() ? foldedWidth() : own.minWidth ?? "12rem",
-				"--bs-layout-sider-max": collapsed() ? foldedWidth() : own.maxWidth ?? "24rem"
-			};
-		},
-		"data-scope": "layout",
-		"data-part": "sider",
-		get "data-collapsed"() {
-			return collapsed() ? "" : void 0;
-		},
-		get "data-dragging"() {
-			return dragging() ? "" : void 0;
-		},
-		get "data-resizable"() {
-			return own.resizable ? "" : void 0;
-		}
-	}], true);
-	insert(_el$6, (() => {
-		var _c$ = memo(() => {
-			return typeof own.children === "function";
-		});
-		return () => {
-			return _c$() ? own.children({ collapsed: collapsed() }) : own.children;
-		};
-	})(), _el$7);
-	insert(_el$6, handle, _el$8);
-	return _el$6;
+	return (() => {
+		var _el$6 = _tmpl$6();
+		use((el) => rail = el, _el$6);
+		spread(_el$6, mergeProps(rest, {
+			get style() {
+				return {
+					...typeof own.style === "object" ? own.style : {},
+					"--bs-layout-sider-width": collapsed() ? foldedWidth() : width(),
+					"--bs-layout-sider-min": collapsed() ? foldedWidth() : own.minWidth ?? "12rem",
+					"--bs-layout-sider-max": collapsed() ? foldedWidth() : own.maxWidth ?? "24rem"
+				};
+			},
+			"data-scope": "layout",
+			"data-part": "sider",
+			get ["data-collapsed"]() {
+				return collapsed() ? "" : void 0;
+			},
+			get ["data-dragging"]() {
+				return dragging() ? "" : void 0;
+			},
+			get ["data-resizable"]() {
+				return own.resizable ? "" : void 0;
+			}
+		}), false, true);
+		insert(_el$6, (() => {
+			var _c$ = memo(() => typeof own.children === "function");
+			return () => _c$() ? own.children({ collapsed: collapsed() }) : own.children;
+		})(), null);
+		insert(_el$6, handle, null);
+		return _el$6;
+	})();
 }
 const Layout = Object.assign(LayoutRoot, {
 	Root: LayoutRoot,
@@ -192,5 +201,4 @@ delegateEvents([
 	"pointerup",
 	"keydown"
 ]);
-//#endregion
 export { Layout };

package/dist/components/link/index.d.mts

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/link/index.d.ts
 export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
   underline?: "always" | "hover" | "none";
 }
@@ -8,5 +7,4 @@ export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
  * always, on hover, or never. */
 export declare const Link: ((props: LinkProps) => JSX.Element) & {
   Root: (props: LinkProps) => JSX.Element;
-};
-//#endregion
+};

package/dist/components/link/index.mjs

@@ -1,25 +1,25 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { claimElement, spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-//#region src/components/link/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<a>`);
+// src/components/link/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<a>`);
 /** A link is ink in the accent's voice: quiet at rest, deepening under
 * the hand, the halo at focus. The underline follows the prose —
 * always, on hover, or never. */
 const Link = withSelfRoot(function Link(props) {
 	injectComponentStyle("link");
 	const [own, rest] = splitProps(props, ["underline"]);
-	var _el$ = _tmpl$();
-	claimElement(_el$);
-	spread(_el$, [rest, {
-		"data-scope": "link",
-		"data-part": "root",
-		get "data-underline"() {
-			return own.underline ?? "hover";
-		}
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "link",
+			"data-part": "root",
+			get ["data-underline"]() {
+				return own.underline ?? "hover";
+			}
+		}), false, false);
+		return _el$;
+	})();
 });
-//#endregion
 export { Link };

package/dist/components/list/index.d.mts

@@ -1,5 +1,4 @@
 import { Component, JSX } from "solid-js";
-//#region src/components/list/index.d.ts
 declare function Item(props: JSX.HTMLAttributes<HTMLLIElement>): JSX.Element;
 export interface ListRootProps extends JSX.HTMLAttributes<HTMLUListElement> {
   /** One hairline between rows. */
@@ -24,4 +23,4 @@ export declare const List: typeof Root & {
   Content: typeof Content;
   Actions: Component<JSX.HTMLAttributes<HTMLElement>>;
 };
-//#endregion
+export {};

package/dist/components/list/index.mjs

@@ -1,12 +1,12 @@
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, splitProps } from "solid-js";
-//#region src/components/list/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<li>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<ul>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=list data-part=title>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=list data-part=description>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div><!><!><!>`);
+// src/components/list/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<li>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-scope=list data-part=title>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=list data-part=description>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div>`);
 /** A ledger of rows: Root is the list, Item one row, Leading the mark
 * before the words, Content the title and its quiet echo, Actions the
 * way out. The bordered variant draws the hairlines; the hoverable
@@ -16,7 +16,7 @@ function part(name, tag) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "list",
-			get "data-part"() {
+			get ["data-part"]() {
 				return name.toLowerCase();
 			}
 		}));
@@ -25,29 +25,33 @@ function part(name, tag) {
 }
 function Item(props) {
 	const [, rest] = splitProps(props, ["role"]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		"data-scope": "list",
-		"data-part": "item"
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "list",
+			"data-part": "item"
+		}), false, false);
+		return _el$;
+	})();
 }
 const Leading = part("Leading", "div");
 const Actions = part("Actions", "div");
 function Root(props) {
 	const [own, rest] = splitProps(props, ["bordered", "hoverable"]);
-	var _el$2 = _tmpl$2();
-	spread(_el$2, [rest, {
-		"data-scope": "list",
-		"data-part": "root",
-		get "data-bordered"() {
-			return own.bordered || void 0;
-		},
-		get "data-hoverable"() {
-			return own.hoverable || void 0;
-		}
-	}], false);
-	return _el$2;
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps(rest, {
+			"data-scope": "list",
+			"data-part": "root",
+			get ["data-bordered"]() {
+				return own.bordered || void 0;
+			},
+			get ["data-hoverable"]() {
+				return own.hoverable || void 0;
+			}
+		}), false, false);
+		return _el$2;
+	})();
 }
 /** The row's words: `title` and `description` ride their own named
 * parts, the children follow them for anything else. */
@@ -57,42 +61,35 @@ function Content(props) {
 		"description",
 		"children"
 	]);
-	var _el$3 = _tmpl$5();
-	var _el$5 = _el$3.firstChild;
-	var _el$7 = _el$5.nextSibling;
-	var _el$8 = _el$7.nextSibling;
-	spread(_el$3, [rest, {
-		"data-scope": "list",
-		"data-part": "content"
-	}], true);
-	insert(_el$3, createComponent(Show, {
-		get when() {
-			return own.title;
-		},
-		get children() {
-			var _el$4 = _tmpl$3();
-			insert(_el$4, () => {
+	return (() => {
+		var _el$3 = _tmpl$5();
+		spread(_el$3, mergeProps(rest, {
+			"data-scope": "list",
+			"data-part": "content"
+		}), false, true);
+		insert(_el$3, createComponent(Show, {
+			get when() {
 				return own.title;
-			});
-			return _el$4;
-		}
-	}), _el$5);
-	insert(_el$3, createComponent(Show, {
-		get when() {
-			return own.description;
-		},
-		get children() {
-			var _el$6 = _tmpl$4();
-			insert(_el$6, () => {
+			},
+			get children() {
+				var _el$4 = _tmpl$3();
+				insert(_el$4, () => own.title);
+				return _el$4;
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
 				return own.description;
-			});
-			return _el$6;
-		}
-	}), _el$7);
-	insert(_el$3, () => {
-		return own.children;
-	}, _el$8);
-	return _el$3;
+			},
+			get children() {
+				var _el$5 = _tmpl$4();
+				insert(_el$5, () => own.description);
+				return _el$5;
+			}
+		}), null);
+		insert(_el$3, () => own.children, null);
+		return _el$3;
+	})();
 }
 const List = Object.assign(Root, {
 	Root,
@@ -102,5 +99,4 @@ const List = Object.assign(Root, {
 	Actions
 });
 injectComponentStyle("list");
-//#endregion
 export { List };

package/dist/components/listbox/index.d.mts

@@ -1,6 +1,5 @@
 import { CollectionItem } from "@ark-ui/solid/collection";
 import { Listbox as Listbox$1, ListboxRootProps } from "@ark-ui/solid/listbox";
-//#region src/components/listbox/index.d.ts
 /** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
  * where the checked row alone takes the flat primary fill. The API is
  * Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
@@ -34,4 +33,4 @@ type ListboxParts = Omit<typeof Listbox$1, "Root"> & {
   Root: typeof ListboxRoot;
 };
 export declare const Listbox: typeof ListboxFacade & ListboxParts;
-//#endregion
+export {};

package/dist/components/listbox/index.mjs

@@ -1,11 +1,11 @@
-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 { createComponent, mergeProps } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, mergeProps } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createMemo, splitProps } from "solid-js";
 import { Listbox as Listbox$1, createListCollection } from "@ark-ui/solid/listbox";
-//#region src/components/listbox/index.tsx
+// src/components/listbox/index.tsx
 const ArkRoot = Listbox$1.Root;
 function ListboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
@@ -14,7 +14,7 @@ function ListboxRoot(props) {
 		get id() {
 			return id();
 		},
-		get "data-size"() {
+		get ["data-size"]() {
 			return own.size ?? "md";
 		}
 	}));
@@ -39,15 +39,13 @@ function ListboxFacade(props) {
 		get disabled() {
 			return props.disabled;
 		},
-		get "aria-label"() {
+		get ["aria-label"]() {
 			return props.label;
 		},
 		get selectionMode() {
 			return props.multiple ? "multiple" : "single";
 		}
-	}, () => {
-		return props.value === void 0 ? {} : { value: toListboxValue(props.value) };
-	}, {
+	}, () => props.value === void 0 ? {} : { value: toListboxValue(props.value) }, {
 		onValueChange: (details) => props.onValueChange?.(props.multiple ? details.value : details.value.at(0)),
 		get children() {
 			return createComponent(Listbox$1.Content, { get children() {
@@ -78,5 +76,4 @@ const Listbox = defineFamily(ListboxFacade, {
 	Root: ListboxRoot
 });
 injectComponentStyle("listbox");
-//#endregion
 export { Listbox };

package/dist/components/marquee/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "solid-js";
 import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
-//#region src/components/marquee/index.d.ts
 /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
  * seal-cut chips that dissolves into the paper at its edges rather than
  * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
@@ -19,4 +18,4 @@ declare function MarqueeFacade(props: MarqueeFacadeProps): import("solid-js").JS
 export declare const Marquee: typeof MarqueeFacade & Omit<typeof Marquee$1, "Root"> & {
   Root: typeof MarqueeRoot;
 };
-//#endregion
+export {};

package/dist/components/marquee/index.mjs

@@ -1,12 +1,12 @@
-import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
-import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { createComponent, insert, template } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, insert, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Index, createComponent as createComponent$1, createMemo, mergeProps as mergeProps$1 } from "solid-js";
 import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
-//#region src/components/marquee/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=currentColor aria-hidden=true>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+// src/components/marquee/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=currentColor aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
 /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
 * seal-cut chips that dissolves into the paper at its edges rather than
 * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
@@ -21,7 +21,7 @@ function MarqueeFacade(props) {
 	injectComponentStyle("marquee");
 	const items = createMemo(() => props.items.map((item) => typeof item === "string" ? item : item.label));
 	return createComponent(MarqueeRoot, {
-		get "aria-label"() {
+		get ["aria-label"]() {
 			return props.label;
 		},
 		get spacing() {
@@ -59,5 +59,4 @@ const Marquee = defineFamily(MarqueeFacade, {
 	Root: MarqueeRoot
 });
 injectComponentStyle("marquee");
-//#endregion
 export { Marquee };

package/dist/components/masonry/index.d.mts

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/masonry/index.d.ts
 /** A wall of uneven heights: items flow down each column before
  * crossing to the next, so the order is column-first. A row-flow wall
  * would need grid masonry, which browsers do not ship yet. */
@@ -9,5 +8,4 @@ export interface MasonryProps extends JSX.HTMLAttributes<HTMLDivElement> {
 }
 export declare const Masonry: ((props: MasonryProps) => JSX.Element) & {
   Root: (props: MasonryProps) => JSX.Element;
-};
-//#endregion
+};

package/dist/components/masonry/index.mjs

@@ -1,9 +1,9 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-//#region src/components/masonry/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+// src/components/masonry/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 /** The same named steps of the space ramp the stack uses — one
 * vocabulary of distance across the layout primitives. */
 const gapVars = {
@@ -17,19 +17,20 @@ const gapVars = {
 const Masonry = withSelfRoot(function Masonry(props) {
 	injectComponentStyle("masonry");
 	const [own, rest] = splitProps(props, ["columns", "gap"]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		get style() {
-			return {
-				...rest.style,
-				"--bs-masonry-columns": String(own.columns ?? 3),
-				"--bs-masonry-gap": gapVars[own.gap ?? "md"] ?? gapVars.md
-			};
-		},
-		"data-scope": "masonry",
-		"data-part": "root"
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					"--bs-masonry-columns": String(own.columns ?? 3),
+					"--bs-masonry-gap": gapVars[own.gap ?? "md"] ?? gapVars.md
+				};
+			},
+			"data-scope": "masonry",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
 });
-//#endregion
 export { Masonry };

package/dist/components/media-player/index.d.mts

@@ -1,2 +1,2 @@
-import { a as MediaTextTrackOption, i as MediaSourceOption, n as Video, o as formatMediaTime, r as MediaPlayerProps, t as Audio } from "../../index-wW28BYf1.mjs";
+import { a as MediaTextTrackOption, i as MediaSourceOption, n as Video, o as formatMediaTime, r as MediaPlayerProps, t as Audio } from "../../index-CwmZdzxT.mjs";
 export { Audio, type MediaPlayerProps, type MediaSourceOption, type MediaTextTrackOption, Video, formatMediaTime };

package/dist/components/media-player/index.mjs

@@ -1,2 +1 @@
-import { n as Video, r as formatMediaTime, t as Audio } from "../../media-player-yF7KVUxM.mjs";
-export { Audio, Video, formatMediaTime };
+export { t as Audio, n as Video, r as formatMediaTime } from "../../media-player-LHnTiSiN.mjs";