@bysages/svelte 0.2.3 → 0.3.1

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

@@ -1,4 +1,5 @@
-import { t as Input } from "./Input-Biz4J1B6.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.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";
@@ -91,35 +92,27 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 				var alternate = ($$anchor) => {
 					var fragment_8 = $.comment();
 					var node_10 = $.first_child(fragment_8);
-					{
-						const asChild = ($$anchor, props = $.noop) => {
-							var span = root_2();
-							$.attribute_effect(span, ($0) => ({
-								...$0,
-								style: "display: flex; inline-size: 100%"
-							}), [() => props()()]);
-							var node_11 = $.child(span);
-							$.component(node_11, () => TreeView.ItemText, ($$anchor, ArkTreeView_ItemText) => {
-								ArkTreeView_ItemText($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text_1 = $.text();
-										$.template_effect(() => $.set_text(text_1, node().label));
-										$.append($$anchor, text_1);
-									},
-									$$slots: { default: true }
+					$.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);
+								$.component(node_11, () => TreeView.ItemText, ($$anchor, ArkTreeView_ItemText) => {
+									ArkTreeView_ItemText($$anchor, {
+										children: ($$anchor, $$slotProps) => {
+											$.next();
+											var text_1 = $.text();
+											$.template_effect(() => $.set_text(text_1, node().label));
+											$.append($$anchor, text_1);
+										},
+										$$slots: { default: true }
+									});
 								});
-							});
-							$.reset(span);
-							$.append($$anchor, span);
-						};
-						$.component(node_10, () => TreeView.Item, ($$anchor, ArkTreeView_Item) => {
-							ArkTreeView_Item($$anchor, {
-								asChild,
-								$$slots: { asChild: true }
-							});
+								$.append($$anchor, fragment_9);
+							},
+							$$slots: { default: true }
 						});
-					}
+					});
 					$.append($$anchor, fragment_8);
 				};
 				$.if(node_2, ($$render) => {
@@ -146,15 +139,15 @@ var rest_excludes = /* @__PURE__ */ new Set([
 ]);
 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(`<span><!></span>`);
-var root_3 = $.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_4 = $.from_html(`<div data-scope="tree-select" data-part="search"><!></div>`);
-var root_5 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing matches</p>`);
-var root_6 = $.from_html(`<!> <div data-scope="tree-select" data-part="body"><!></div>`, 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);
 function TreeSelect$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("tree-select");
 	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), filterable = $.prop($$props, "filterable", 3, false), size = $.prop($$props, "size", 3, "md"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	let open = $.state(false);
 	let query = $.state("");
 	const filterFns = useFilter({ sensitivity: "base" });
@@ -201,8 +194,8 @@ function TreeSelect$1($$anchor, $$props) {
 		value(selected);
 		$.set(open, false);
 	}
-	var fragment_10 = $.comment();
-	var node_12 = $.first_child(fragment_10);
+	var fragment_11 = $.comment();
+	var node_12 = $.first_child(fragment_11);
 	$.component(node_12, () => Popover.Root, ($$anchor, ArkPopover_Root) => {
 		ArkPopover_Root($$anchor, {
 			get open() {
@@ -217,11 +210,11 @@ function TreeSelect$1($$anchor, $$props) {
 				if (!details.open) $.set(query, "");
 			},
 			children: ($$anchor, $$slotProps) => {
-				var fragment_11 = root_1();
-				var node_13 = $.first_child(fragment_11);
+				var fragment_12 = root_1();
+				var node_13 = $.first_child(fragment_12);
 				{
 					const asChild = ($$anchor, props = $.noop) => {
-						var button = root_3();
+						var button = root_2();
 						$.attribute_effect(button, ($0) => ({
 							...$0,
 							...rest,
@@ -252,13 +245,13 @@ function TreeSelect$1($$anchor, $$props) {
 				var node_14 = $.sibling(node_13, 2);
 				Portal(node_14, {
 					children: ($$anchor, $$slotProps) => {
-						var fragment_12 = $.comment();
-						var node_15 = $.first_child(fragment_12);
+						var fragment_13 = $.comment();
+						var node_15 = $.first_child(fragment_13);
 						$.component(node_15, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
 							ArkPopover_Positioner($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									var fragment_13 = $.comment();
-									var node_16 = $.first_child(fragment_13);
+									var fragment_14 = $.comment();
+									var node_16 = $.first_child(fragment_14);
 									$.component(node_16, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
 										ArkPopover_Content($$anchor, {
 											"data-scope": "tree-select",
@@ -267,22 +260,30 @@ function TreeSelect$1($$anchor, $$props) {
 												return size();
 											},
 											children: ($$anchor, $$slotProps) => {
-												var fragment_14 = root_6();
-												var node_17 = $.first_child(fragment_14);
+												var fragment_15 = root_5();
+												var node_17 = $.first_child(fragment_15);
 												var consequent_1 = ($$anchor) => {
-													var div = root_4();
+													var div = root_3();
 													var node_18 = $.child(div);
-													Input(node_18, {
-														size: "sm",
-														placeholder: "Filter…",
-														"aria-label": "Filter options",
-														get value() {
-															return $.get(query);
-														},
-														set value($$value) {
-															$.set(query, $$value, true);
-														}
-													});
+													{
+														let $0 = $.derived(() => messages().select.filter);
+														let $1 = $.derived(() => messages().select.filter);
+														Input(node_18, {
+															size: "sm",
+															get placeholder() {
+																return $.get($0);
+															},
+															get "aria-label"() {
+																return $.get($1);
+															},
+															get value() {
+																return $.get(query);
+															},
+															set value($$value) {
+																$.set(query, $$value, true);
+															}
+														});
+													}
 													$.reset(div);
 													$.append($$anchor, div);
 												};
@@ -292,12 +293,12 @@ function TreeSelect$1($$anchor, $$props) {
 												var div_1 = $.sibling(node_17, 2);
 												var node_19 = $.child(div_1);
 												var consequent_2 = ($$anchor) => {
-													var p = root_5();
+													var p = root_4();
 													$.append($$anchor, p);
 												};
 												var alternate_1 = ($$anchor) => {
-													var fragment_15 = $.comment();
-													var node_20 = $.first_child(fragment_15);
+													var fragment_16 = $.comment();
+													var node_20 = $.first_child(fragment_16);
 													{
 														let $0 = $.derived(() => value() ? [value()] : []);
 														let $1 = $.derived(() => $.get(filtering) ? $.get(expandedWhileFiltering) : void 0);
@@ -319,54 +320,54 @@ function TreeSelect$1($$anchor, $$props) {
 																},
 																onSelectionChange: pick,
 																children: ($$anchor, $$slotProps) => {
-																	var fragment_16 = $.comment();
-																	var node_21 = $.first_child(fragment_16);
+																	var fragment_17 = $.comment();
+																	var node_21 = $.first_child(fragment_17);
 																	$.component(node_21, () => TreeView.Tree, ($$anchor, ArkTreeView_Tree) => {
 																		ArkTreeView_Tree($$anchor, {
 																			children: ($$anchor, $$slotProps) => {
-																				var fragment_17 = $.comment();
-																				var node_22 = $.first_child(fragment_17);
+																				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) => {
 																					row($$anchor, () => $.get(node), () => [$.get(index)]);
 																				});
-																				$.append($$anchor, fragment_17);
+																				$.append($$anchor, fragment_18);
 																			},
 																			$$slots: { default: true }
 																		});
 																	});
-																	$.append($$anchor, fragment_16);
+																	$.append($$anchor, fragment_17);
 																},
 																$$slots: { default: true }
 															});
 														});
 													}
-													$.append($$anchor, fragment_15);
+													$.append($$anchor, fragment_16);
 												};
 												$.if(node_19, ($$render) => {
 													if (($.get(visibleCollection).rootNode.children ?? []).length === 0) $$render(consequent_2);
 													else $$render(alternate_1, -1);
 												});
 												$.reset(div_1);
-												$.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);
 			},
 			$$slots: { default: true }
 		});
 	});
-	$.append($$anchor, fragment_10);
+	$.append($$anchor, fragment_11);
 	$.pop();
 }
 //#endregion

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-_10ypBUP.mjs

@@ -0,0 +1,60 @@
+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,
+		tabindex: 0,
+		"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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/svelte",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "By Sages Elements components for Svelte — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -65,28 +65,49 @@
     ".": {
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
+    },
+    "./generative": {
+      "types": "./dist/generative/index.d.mts",
+      "import": "./dist/generative/index.mjs"
     }
   },
   "dependencies": {
     "@ark-ui/svelte": "5.24.2",
-    "@tanstack/markdown": "0.0.15",
+    "@tanstack/markdown": "1.0.0",
     "@tanstack/svelte-form": "1.33.5",
     "@tanstack/svelte-table": "9.2.4",
     "@tanstack/svelte-virtual": "3.13.39",
     "@zag-js/cascade-select": "1.44.0",
     "@zag-js/svelte": "1.44.0",
-    "@bysages/core": "0.2.3",
-    "@bysages/icons": "0.2.3"
+    "@bysages/icons": "0.3.1",
+    "@bysages/core": "0.3.1"
   },
   "devDependencies": {
+    "@json-render/core": "0.21.0",
+    "@json-render/svelte": "0.21.0",
     "@sveltejs/vite-plugin-svelte": "7.3.1",
-    "ai": "7.0.118",
+    "ai": "7.0.126",
     "rollup-plugin-svelte": "7.2.3",
     "svelte": "5.57.1",
-    "svelte2tsx": "0.7.61"
+    "svelte2tsx": "0.7.61",
+    "zod": "4.6.5"
   },
   "peerDependencies": {
-    "svelte": "^5"
+    "@json-render/core": "^0.21.0",
+    "@json-render/svelte": "^0.21.0",
+    "svelte": "^5",
+    "zod": "^4.0"
+  },
+  "peerDependenciesMeta": {
+    "@json-render/core": {
+      "optional": true
+    },
+    "@json-render/svelte": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "scripts": {
     "dev": "basis build --stub",

package/dist/Input-Biz4J1B6.mjs

@@ -1,39 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { useFieldContext } from "@ark-ui/svelte/field";
-//#region src/components/input/Input.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"value",
-	"size",
-	"invalid"
-]);
-var root = $.from_html(`<input/>`);
-function Input($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("input");
-	let value = $.prop($$props, "value", 15), size = $.prop($$props, "size", 3, "md"), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes);
-	const field = useFieldContext();
-	const fieldProps = $.derived(() => field?.()?.getInputProps() ?? {});
-	var input = root();
-	var event_handler = (event) => {
-		value(event.currentTarget.value);
-	};
-	$.attribute_effect(input, () => ({
-		...$.get(fieldProps),
-		...rest,
-		"data-scope": "input",
-		"data-part": "root",
-		"data-size": size(),
-		"data-invalid": invalid() || $.get(fieldProps)["data-invalid"] != null ? "" : void 0,
-		oninput: event_handler
-	}), void 0, void 0, void 0, void 0, true);
-	$.bind_value(input, value);
-	$.append($$anchor, input);
-	$.pop();
-}
-//#endregion
-export { Input as t };

package/dist/TreeViewRoot-ConQj9TX.mjs

@@ -1,37 +0,0 @@
-import { injectComponentStyle } from "@bysages/core";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { TreeView } from "@ark-ui/svelte/tree-view";
-//#region src/components/tree-view/TreeViewRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function TreeViewRoot($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("tree-view");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
-		ArkTreeView_Root($$anchor, $.spread_props(() => rest, {
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-export { TreeViewRoot as t };