@bysages/solid 0.2.3 → 0.3.0

package/dist/components/ai-tool/index.mjs

@@ -1,15 +1,15 @@
-import { t as chevron } from "../../chevron-GWEoEYdO.mjs";
+import { t as chevron } from "../../chevron-D5RzcayK.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, mergeProps, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, template } from "@solidjs/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/ai-tool/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-status>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Input`);
-var _tmpl$4 = /*#__PURE__*/ template(`<pre>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Output`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div data-scope=ai data-part=tool-body>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=ai data-part=tool-status>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span data-scope=ai data-part=tool-label>Input`);
+var _tmpl$4 = /* @__PURE__ */ template(`<pre>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span data-scope=ai data-part=tool-label>Output`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div data-scope=ai data-part=tool-body><!><!>`);
 /** A tool call: the shared collapsible as the vessel — the name it was
 * reached by and the state it reached in on the trigger, its input and
 * output folded inside. */
@@ -22,12 +22,16 @@ function Tool(props) {
 		"input",
 		"output"
 	]);
-	return createComponent(Collapsible.Root, mergeProps(rest, { "data-ai": "tool" }, () => own.status ? { "data-status": own.status } : {}, { get children() {
+	return createComponent(Collapsible.Root, mergeProps(rest, { "data-ai": "tool" }, () => {
+		return own.status ? { "data-status": own.status } : {};
+	}, { get children() {
 		return [createComponent(Collapsible.Trigger, { get children() {
 			return [
 				(() => {
 					var _el$ = _tmpl$();
-					insert(_el$, () => own.label ?? own.name);
+					insert(_el$, () => {
+						return own.label ?? own.name;
+					});
 					return _el$;
 				})(),
 				createComponent(Show, {
@@ -36,7 +40,9 @@ function Tool(props) {
 					},
 					get children() {
 						var _el$2 = _tmpl$2();
-						insert(_el$2, () => own.status.charAt(0).toUpperCase() + own.status.slice(1));
+						insert(_el$2, () => {
+							return own.status.charAt(0).toUpperCase() + own.status.slice(1);
+						});
 						return _el$2;
 					}
 				}),
@@ -46,6 +52,8 @@ function Tool(props) {
 			];
 		} }), createComponent(Collapsible.Content, { get children() {
 			var _el$3 = _tmpl$6();
+			var _el$6 = _el$3.firstChild;
+			var _el$9 = _el$6.nextSibling;
 			insert(_el$3, createComponent(Show, {
 				get when() {
 					return own.input !== void 0;
@@ -53,23 +61,27 @@ function Tool(props) {
 				get children() {
 					return [_tmpl$3(), (() => {
 						var _el$5 = _tmpl$4();
-						insert(_el$5, () => own.input);
+						insert(_el$5, () => {
+							return own.input;
+						});
 						return _el$5;
 					})()];
 				}
-			}), null);
+			}), _el$6);
 			insert(_el$3, createComponent(Show, {
 				get when() {
 					return own.output !== void 0;
 				},
 				get children() {
 					return [_tmpl$5(), (() => {
-						var _el$7 = _tmpl$4();
-						insert(_el$7, () => own.output);
-						return _el$7;
+						var _el$8 = _tmpl$4();
+						insert(_el$8, () => {
+							return own.output;
+						});
+						return _el$8;
 					})()];
 				}
-			}), null);
+			}), _el$9);
 			return _el$3;
 		} })];
 	} }));

package/dist/components/alert/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
 import { createContext, splitProps, useContext } from "solid-js";
 //#region src/components/alert/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span data-scope=alert data-part=icon>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<p>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span data-scope=alert data-part=icon>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<p>`);
 const StatusContext = createContext(() => "ink");
 function glyph(status) {
 	const paths = {
@@ -15,11 +15,12 @@ function glyph(status) {
 		danger: "M6 6l12 12M18 6 6 18",
 		ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
 	};
-	return (() => {
-		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-		effect(() => setAttribute(_el$2, "d", paths[status]));
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	effect(() => paths[status], (_v$) => {
+		setAttribute(_el$2, "d", _v$);
+	});
+	return _el$;
 }
 function AlertRoot(props) {
 	const [own, rest] = splitProps(props, ["status"]);
@@ -28,57 +29,51 @@ function AlertRoot(props) {
 		value: status,
 		get children() {
 			var _el$3 = _tmpl$2();
-			spread(_el$3, mergeProps(rest, {
+			spread(_el$3, [rest, {
 				get role() {
 					return status() === "ink" || status() === "info" ? "status" : "alert";
 				},
 				"data-scope": "alert",
 				"data-part": "root",
-				get ["data-status"]() {
+				get "data-status"() {
 					return status();
 				}
-			}), false, false);
+			}], false);
 			return _el$3;
 		}
 	});
 }
 function Icon() {
 	const status = useContext(StatusContext);
-	return (() => {
-		var _el$4 = _tmpl$3();
-		insert(_el$4, () => glyph(status()));
-		return _el$4;
-	})();
+	var _el$4 = _tmpl$3();
+	insert(_el$4, () => {
+		return glyph(status());
+	});
+	return _el$4;
 }
 function Body(props) {
-	return (() => {
-		var _el$5 = _tmpl$2();
-		spread(_el$5, mergeProps(props, {
-			"data-scope": "alert",
-			"data-part": "body"
-		}), false, false);
-		return _el$5;
-	})();
+	var _el$5 = _tmpl$2();
+	spread(_el$5, [props, {
+		"data-scope": "alert",
+		"data-part": "body"
+	}], false);
+	return _el$5;
 }
 function Title(props) {
-	return (() => {
-		var _el$6 = _tmpl$4();
-		spread(_el$6, mergeProps(props, {
-			"data-scope": "alert",
-			"data-part": "title"
-		}), false, false);
-		return _el$6;
-	})();
+	var _el$6 = _tmpl$4();
+	spread(_el$6, [props, {
+		"data-scope": "alert",
+		"data-part": "title"
+	}], false);
+	return _el$6;
 }
 function Description(props) {
-	return (() => {
-		var _el$7 = _tmpl$4();
-		spread(_el$7, mergeProps(props, {
-			"data-scope": "alert",
-			"data-part": "description"
-		}), false, false);
-		return _el$7;
-	})();
+	var _el$7 = _tmpl$4();
+	spread(_el$7, [props, {
+		"data-scope": "alert",
+		"data-part": "description"
+	}], false);
+	return _el$7;
 }
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,

package/dist/components/angle-slider/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/solid/angle-slider";
 //#region src/components/angle-slider/index.tsx
 function AngleSliderRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(AngleSlider$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(AngleSlider$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/aspect-ratio/index.mjs

@@ -1,25 +1,23 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/aspect-ratio/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function AspectRatio(props) {
 	injectComponentStyle("aspect-ratio");
 	const [own, rest] = splitProps(props, ["ratio"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get style() {
-				return {
-					...rest.style,
-					"--bs-aspect-ratio": own.ratio ?? "1 / 1"
-				};
-			},
-			"data-scope": "aspect-ratio",
-			"data-part": "root"
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-aspect-ratio": own.ratio ?? "1 / 1"
+			};
+		},
+		"data-scope": "aspect-ratio",
+		"data-part": "root"
+	}], false);
+	return _el$;
 }
 //#endregion
 export { AspectRatio };

package/dist/components/autocomplete/index.mjs

@@ -1,8 +1,9 @@
 import { injectComponentStyle } from "@bysages/core";
-import { Portal, createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { For, splitProps } from "solid-js";
 import { useListCollection } from "@ark-ui/solid/collection";
 import { Combobox } from "@ark-ui/solid/combobox";
+import { Portal } from "solid-js/web";
 //#region src/components/autocomplete/index.tsx
 /**
 * Free text with suggestions: the reader types anything, the list
@@ -33,7 +34,7 @@ function AutoComplete(props) {
 		get inputValue() {
 			return own.value;
 		},
-		get ["data-size"]() {
+		get "data-size"() {
 			return own.size ?? "md";
 		},
 		allowCustomValue: true,

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

@@ -12,6 +12,9 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
    * default (large) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
+  /** The corner: round by default; square cuts it sharp, a stamp
+   * beside a round portrait. */
+  shape?: "circle" | "square";
 }
 declare function AvatarRoot(props: AvatarProps): import("solid-js").JSX.Element;
 export declare const Avatar: typeof Avatar$1 & {

package/dist/components/avatar/index.mjs

@@ -1,13 +1,18 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 //#region src/components/avatar/index.tsx
 function AvatarRoot(props) {
-	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Avatar$1.Root, mergeProps(rest, { get ["data-size"]() {
-		return own.size;
-	} }));
+	const [own, rest] = splitProps(props, ["size", "shape"]);
+	return createComponent(Avatar$1.Root, mergeProps(rest, {
+		get "data-size"() {
+			return own.size;
+		},
+		get "data-shape"() {
+			return own.shape ?? "circle";
+		}
+	}));
 }
 const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
 injectComponentStyle("avatar");

package/dist/components/avatar-group/index.mjs

@@ -1,22 +1,20 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/avatar-group/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function AvatarGroup(props) {
 	injectComponentStyle("avatar-group");
 	const [own, rest] = splitProps(props, ["size"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "avatar-group",
-			"data-part": "root",
-			get ["data-size"]() {
-				return own.size;
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "avatar-group",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size;
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { AvatarGroup };

package/dist/components/back-top/index.mjs

@@ -1,10 +1,10 @@
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { createSignal, onCleanup, onMount, splitProps } from "solid-js";
 //#region src/components/back-top/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div data-scope=back-top data-part=root>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 14 6-6 6 6">`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 14 6-6 6 6">`);
 /**
 * A way home: after the page has scrolled past `threshold`, a small
 * floating control rises at the page's corner and returns the reader to
@@ -55,31 +55,35 @@ function BackTop(props) {
 		if (el) el.removeEventListener("scroll", onScroll);
 		else window.removeEventListener("scroll", onScroll);
 	});
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps({ get ["data-state"]() {
+	var _el$ = _tmpl$();
+	spread(_el$, [{
+		"data-scope": "back-top",
+		"data-part": "root",
+		get "data-state"() {
 			return visible() ? "shown" : "hidden";
-		} }, () => scroller() ? { "data-container": "" } : {}), false, true);
-		insert(_el$, createComponent(Button, mergeProps(rest, {
-			variant: "outline",
-			square: true,
-			size: "lg",
-			get ["aria-label"]() {
-				return own.label ?? "Back to top";
-			},
-			get ["aria-hidden"]() {
-				return visible() ? void 0 : "true";
-			},
-			get tabindex() {
-				return visible() ? 0 : -1;
-			},
-			onClick: toTop,
-			get children() {
-				return rest.children ?? chevronUp();
-			}
-		})));
-		return _el$;
-	})();
+		}
+	}, () => {
+		return scroller() ? { "data-container": "" } : {};
+	}], true);
+	insert(_el$, createComponent(Button, mergeProps(rest, {
+		variant: "outline",
+		square: true,
+		size: "lg",
+		get "aria-label"() {
+			return own.label ?? "Back to top";
+		},
+		get "aria-hidden"() {
+			return visible() ? void 0 : "true";
+		},
+		get tabindex() {
+			return visible() ? 0 : -1;
+		},
+		onClick: toTop,
+		get children() {
+			return rest.children ?? chevronUp();
+		}
+	})));
+	return _el$;
 }
 /** The single glyph a way-home control needs: one stroke pointing up. */
 function chevronUp() {

package/dist/components/badge/index.mjs

@@ -1,25 +1,23 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/badge/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 function Badge(props) {
 	injectComponentStyle("badge");
 	const [own, rest] = splitProps(props, ["tone", "variant"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "badge",
-			"data-part": "root",
-			get ["data-tone"]() {
-				return own.tone ?? "ink";
-			},
-			get ["data-variant"]() {
-				return own.variant ?? "solid";
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "badge",
+		"data-part": "root",
+		get "data-tone"() {
+			return own.tone ?? "ink";
+		},
+		get "data-variant"() {
+			return own.variant ?? "solid";
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Badge };

package/dist/components/banner/index.mjs

@@ -1,9 +1,9 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/banner/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
 * for actions and a quiet close. Ink is the neutral register; the four
@@ -11,22 +11,20 @@ var _tmpl$2 = /*#__PURE__*/ template(`<button><svg viewBox="0 0 16 16"fill=none
 function Root(props) {
 	const [own, rest] = splitProps(props, ["status"]);
 	const status = own.status ?? "ink";
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"role": status === "ink" ? void 0 : "status",
-			"data-scope": "banner",
-			"data-part": "root",
-			"data-status": status
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		role: status === "ink" ? void 0 : "status",
+		"data-scope": "banner",
+		"data-part": "root",
+		"data-status": status
+	}], false);
+	return _el$;
 }
 function part(name, tag) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "banner",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));
@@ -42,20 +40,18 @@ const Actions = part("Actions", "div");
 * consumer's state. */
 function Close(props) {
 	const [own, rest] = splitProps(props, ["type"]);
-	return (() => {
-		var _el$2 = _tmpl$2();
-		spread(_el$2, mergeProps(rest, {
-			get type() {
-				return own.type ?? "button";
-			},
-			get ["aria-label"]() {
-				return rest["aria-label"] ?? "Dismiss";
-			},
-			"data-scope": "banner",
-			"data-part": "close"
-		}), false, true);
-		return _el$2;
-	})();
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [rest, {
+		get type() {
+			return own.type ?? "button";
+		},
+		get "aria-label"() {
+			return rest["aria-label"] ?? "Dismiss";
+		},
+		"data-scope": "banner",
+		"data-part": "close"
+	}], true);
+	return _el$2;
 }
 const Banner = Object.assign(Root, {
 	Root,

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

@@ -0,0 +1,24 @@
+import { JSX } from "solid-js";
+//#region src/components/bento/index.d.ts
+export interface BentoProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Tracks across the lattice. */
+  columns?: number;
+}
+export interface BentoCellProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Columns this tile claims. */
+  span?: number;
+  /** Rows this tile claims. */
+  rowSpan?: number;
+}
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+ * The container owns the track count; each cell claims its own span. */
+export declare function BentoRoot(props: BentoProps): JSX.Element;
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+ * of the plate stays in measure. */
+export declare function BentoCell(props: BentoCellProps): JSX.Element;
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+export declare const Bento: typeof BentoRoot & {
+  Root: typeof BentoRoot;
+  Cell: typeof BentoCell;
+};
+//#endregion

package/dist/components/bento/index.mjs

@@ -0,0 +1,51 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/bento/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+* The container owns the track count; each cell claims its own span. */
+function BentoRoot(props) {
+	injectComponentStyle("bento");
+	const [own, rest] = splitProps(props, ["columns"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "bento",
+		"data-part": "root",
+		get style() {
+			return { "--bs-bento-columns": String(own.columns ?? 3) };
+		}
+	}], true);
+	insert(_el$, () => {
+		return rest.children;
+	});
+	return _el$;
+}
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+* of the plate stays in measure. */
+function BentoCell(props) {
+	injectComponentStyle("bento");
+	const [own, rest] = splitProps(props, ["span", "rowSpan"]);
+	var _el$2 = _tmpl$();
+	spread(_el$2, [rest, {
+		"data-scope": "bento",
+		"data-part": "cell",
+		get style() {
+			return {
+				"--bs-bento-span-x": String(own.span ?? 1),
+				"--bs-bento-span-y": String(own.rowSpan ?? 1)
+			};
+		}
+	}], true);
+	insert(_el$2, () => {
+		return rest.children;
+	});
+	return _el$2;
+}
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+const Bento = Object.assign(BentoRoot, {
+	Root: BentoRoot,
+	Cell: BentoCell
+});
+//#endregion
+export { Bento, BentoCell, BentoRoot };

package/dist/components/block-ui/index.d.mts

@@ -0,0 +1,12 @@
+import { JSX } from "solid-js";
+//#region src/components/block-ui/index.d.ts
+export interface BlockUIProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Whether the curtain is drawn. */
+  blocked?: boolean;
+  children?: JSX.Element;
+}
+/** A curtain over content that must wait: the blocked region keeps its
+ * shape and dims under frosted paper while a quiet wheel reports the
+ * wait. Callers own the state; the curtain only answers it. */
+export declare function BlockUI(props: BlockUIProps): JSX.Element;
+//#endregion