@bysages/svelte 0.2.2 → 0.3.0

package/README.md

@@ -4,11 +4,11 @@
 ![npm downloads](https://img.shields.io/npm/dw/@bysages/svelte)
 ![npm license](https://img.shields.io/npm/l/@bysages/svelte)
 
-> By Sages Elements for Svelte — 90+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
+> By Sages Elements for Svelte — 140+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
 
 ## Features
 
-- 🧩 **90+ families** — actions, forms, overlays, navigation, data, layout, and an AI conversation family on ai-sdk formats
+- 🧩 **140+ families** — actions, forms, overlays, navigation, data, layout, an AI conversation family on ai-sdk formats, and a full generative vocabulary
 - 🏛️ **Headless inside** — interaction, state, ARIA, and positioning come from proven headless state machines; wrappers add API narrowing and style injection, no DOM of their own
 - 🎨 **Token-styled** — every visual value is a CSS custom property from `@bysages/core`; light/dark, accent pigments, contrast and density tiers are data, never hardcoded styles
 - 📦 **Container-driven** — components respond to `@container`, not the viewport; the same component composes in a sidebar, a card, or a page
@@ -65,6 +65,20 @@ mount(App, { target: document.getElementById("app")! });
 </Dialog.Root>
 ```
 
+## Generative UI
+
+Every family carries a generative face — a zod-typed catalog entry that
+lives beside the component. The faces compose into a
+[json-render](https://json-render.dev) catalog and render through the
+same package:
+
+```ts
+import { catalog } from "@bysages/svelte/generative";
+```
+
+Point an AI SDK stream at the renderer and a prompt becomes real,
+on-brand components — constrained to the families you registered.
+
 ## Documentation
 
 The [documentation site](https://elements.bysages.com) carries every family with live demos and props tables.

package/dist/AiLoader-0jlig3fe.mjs

@@ -0,0 +1,108 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/ai/Ai.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function Ai($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var div = root$3();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: "log",
+		"aria-label": "Conversation",
+		"data-scope": "ai",
+		"data-part": "conversation"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/ai/AiActions.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<div><!></div>`);
+function AiActions($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var div = root$2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "ai",
+		"data-part": "actions"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/ai/AiContent.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<div><!></div>`);
+function AiContent($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var div = root$1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "ai",
+		"data-part": "content"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/ai/AiLoader.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<span><!></span>`);
+function AiLoader($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes);
+	var span = root();
+	$.attribute_effect(span, () => ({
+		...rest,
+		role: "status",
+		"aria-label": "Loading",
+		"data-scope": "ai",
+		"data-part": "loader"
+	}));
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+export { Ai as i, AiContent as n, AiActions as r, AiLoader as t };

package/dist/AngleSliderRoot-CUe5sgWU.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { AngleSlider } from "@ark-ui/svelte/angle-slider";
+//#region src/components/angle-slider/AngleSliderRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function AngleSliderRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("angle-slider");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => AngleSlider.Root, ($$anchor, ArkAngleSlider_Root) => {
+		ArkAngleSlider_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 { AngleSliderRoot as t };

package/dist/CheckboxRoot-BP4ynFLq.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Checkbox } from "@ark-ui/svelte/checkbox";
+//#region src/components/checkbox/CheckboxRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function CheckboxRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("checkbox");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Checkbox.Root, ($$anchor, ArkCheckbox_Root) => {
+		ArkCheckbox_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 { CheckboxRoot as t };

package/dist/ChevronIcon-CVJJYda-.mjs

@@ -0,0 +1,11 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import "svelte/internal/flags/legacy";
+//#region src/components/ai/ChevronIcon.svelte
+var root = $.from_svg(`<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
+function ChevronIcon($$anchor) {
+	var svg = root();
+	$.append($$anchor, svg);
+}
+//#endregion
+export { ChevronIcon as t };

package/dist/ClipboardRoot-UmyQFn27.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Clipboard } from "@ark-ui/svelte/clipboard";
+//#region src/components/clipboard/ClipboardRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function ClipboardRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("clipboard");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Clipboard.Root, ($$anchor, ArkClipboard_Root) => {
+		ArkClipboard_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 { ClipboardRoot as t };

package/dist/ColorPickerRoot-DLgI9s3u.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { ColorPicker } from "@ark-ui/svelte/color-picker";
+//#region src/components/color-picker/ColorPickerRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function ColorPickerRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("color-picker");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => ColorPicker.Root, ($$anchor, ArkColorPicker_Root) => {
+		ArkColorPicker_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 { ColorPickerRoot as t };

package/dist/ComboboxRoot-BsVcmUOj.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Combobox } from "@ark-ui/svelte/combobox";
+//#region src/components/combobox/ComboboxRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function ComboboxRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("combobox");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Combobox.Root, ($$anchor, ArkCombobox_Root) => {
+		ArkCombobox_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 { ComboboxRoot as t };

package/dist/DateInputRoot-nROaFmB7.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { DateInput } from "@ark-ui/svelte/date-input";
+//#region src/components/date-input/DateInputRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function DateInputRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("date-input");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => DateInput.Root, ($$anchor, ArkDateInput_Root) => {
+		ArkDateInput_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 { DateInputRoot as t };

package/dist/DatePickerRoot-CkeHEAcG.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { DatePicker } from "@ark-ui/svelte/date-picker";
+//#region src/components/date-picker/DatePickerRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function DatePickerRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("date-picker");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => DatePicker.Root, ($$anchor, ArkDatePicker_Root) => {
+		ArkDatePicker_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 { DatePickerRoot as t };

package/dist/EditableRoot-CLmP5sIH.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Editable } from "@ark-ui/svelte/editable";
+//#region src/components/editable/EditableRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function EditableRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("editable");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Editable.Root, ($$anchor, ArkEditable_Root) => {
+		ArkEditable_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 { EditableRoot as t };

package/dist/FileUploadRoot-IVcTAZp-.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { FileUpload } from "@ark-ui/svelte/file-upload";
+//#region src/components/file-upload/FileUploadRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function FileUploadRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("file-upload");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => FileUpload.Root, ($$anchor, ArkFileUpload_Root) => {
+		ArkFileUpload_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 { FileUploadRoot as t };

package/dist/Input-CZhcEeFU.mjs

@@ -0,0 +1,75 @@
+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/mask.ts
+function accepts(slot, ch) {
+	if (slot === "9") return /\d/.test(ch);
+	if (slot === "a") return /[a-zA-Z]/.test(ch);
+	return /[\da-zA-Z]/.test(ch);
+}
+/** Apply the entry mask: `9` takes a digit, `a` a letter, `*` either;
+* every other character is literal. A literal already typed is consumed,
+* not duplicated; a literal met out of place holds the walk and lets its
+* own slot claim it — so deleting through the middle reflows the shape
+* instead of corrupting it. */
+function applyMask(raw, mask) {
+	const literals = new Set(mask.split("").filter((s) => s !== "9" && s !== "a" && s !== "*"));
+	let out = "";
+	let at = 0;
+	slots: for (const slot of mask) {
+		if (at >= raw.length) break;
+		if (slot === "9" || slot === "a" || slot === "*") {
+			let ch = raw[at];
+			while (ch !== void 0 && !accepts(slot, ch)) {
+				if (literals.has(ch)) continue slots;
+				at += 1;
+				ch = raw[at];
+			}
+			if (ch === void 0) break;
+			out += ch;
+			at += 1;
+		} else if (raw[at] === slot) {
+			at += 1;
+			out += slot;
+		} else out += slot;
+	}
+	return out;
+}
+//#endregion
+//#region src/components/input/Input.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"size",
+	"invalid",
+	"mask"
+]);
+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($$props.mask ? applyMask(event.currentTarget.value, $$props.mask) : 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/ListboxRoot-DhFAnZ_c.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Listbox } from "@ark-ui/svelte/listbox";
+//#region src/components/listbox/ListboxRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function ListboxRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("listbox");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Listbox.Root, ($$anchor, ArkListbox_Root) => {
+		ArkListbox_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 { ListboxRoot as t };