@bysages/svelte 0.4.3 → 0.5.0

package/README.md

@@ -36,9 +36,10 @@ Theme the document, then use the components — the component import
 carries the whole token layer in with it:
 
 ```ts
+import { applyTheme } from "@bysages/svelte";
 // main.ts
 import { mount } from "svelte";
-import { applyTheme } from "@bysages/svelte";
+
 import App from "./App.svelte";
 
 applyTheme({ mode: "system", accent: "ink" });

package/dist/{Accordion-DUUod-V6.mjs → Accordion-uJ1bTltg.mjs}

@@ -1,10 +1,10 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
-import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
+import { t as InternalIcon } from "./InternalIcon-34cw8jr_.mjs";
 import { Accordion } from "@ark-ui/svelte/accordion";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
-//#region src/components/accordion/AccordionRoot.svelte
+// src/components/accordion/AccordionRoot.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -50,8 +50,7 @@ function AccordionRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/accordion/Accordion.svelte
+// src/components/accordion/Accordion.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -143,5 +142,4 @@ function Accordion$1($$anchor, $$props) {
 		$$slots: { default: true }
 	}));
 }
-//#endregion
 export { AccordionRoot as n, Accordion$1 as t };

package/dist/AiLoader-gWAgLlVT.mjs

@@ -0,0 +1,184 @@
+import { n as useComponentMessages } from "./messages-BZoDXYu3.mjs";
+import { createConversationFollower } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+// src/components/ai/Ai.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"aria-label",
+	"autoScroll",
+	"children"
+]);
+var root$4 = $.from_html(`<div><!></div>`);
+function Ai($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let autoScroll = $.prop($$props, "autoScroll", 3, true), rest = $.rest_props($$props, rest_excludes$4);
+	const messages = useComponentMessages();
+	let rootEl = $.state(null);
+	$.user_effect(() => {
+		const node = $.get(rootEl);
+		if (!node || !autoScroll()) return;
+		return createConversationFollower(node);
+	});
+	var div = root$4();
+	$.attribute_effect(div, ($0) => ({
+		...rest,
+		role: "log",
+		"aria-label": $0,
+		"data-scope": "ai",
+		"data-part": "conversation"
+	}), [() => $$props["aria-label"] ?? messages().ai.conversation]);
+	var node_1 = $.child(div);
+	$.snippet(node_1, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.bind_this(div, ($$value) => $.set(rootEl, $$value), () => $.get(rootEl));
+	$.append($$anchor, div);
+	$.pop();
+}
+// src/components/ai/AiActions.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function AiActions($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var div = root$3();
+	$.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();
+}
+// src/components/ai/AiContent.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<div><!></div>`);
+function AiContent($$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": "content"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+// src/components/ai/AiJumpToLatest.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"threshold",
+	"onjump",
+	"children"
+]);
+var root$1 = $.from_html(`<button><!></button>`);
+function AiJumpToLatest($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let threshold = $.prop($$props, "threshold", 3, 96), rest = $.rest_props($$props, rest_excludes$1);
+	const messages = useComponentMessages();
+	let buttonEl = $.state(null);
+	let visible = $.state(false);
+	$.user_effect(() => {
+		const button = $.get(buttonEl);
+		if (!button) return;
+		const conversation = button.closest("[data-scope=\"ai\"][data-part=\"conversation\"]");
+		const measure = () => {
+			if (!conversation) return;
+			$.set(visible, conversation.scrollHeight - conversation.scrollTop - conversation.clientHeight > threshold());
+		};
+		measure();
+		conversation?.addEventListener("scroll", measure, { passive: true });
+		return () => conversation?.removeEventListener("scroll", measure);
+	});
+	const jump = () => {
+		const conversation = $.get(buttonEl)?.closest("[data-scope=\"ai\"][data-part=\"conversation\"]");
+		if (conversation) conversation.scrollTop = conversation.scrollHeight;
+		$$props.onjump?.();
+	};
+	var button_1 = root$1();
+	$.attribute_effect(button_1, ($0) => ({
+		...rest,
+		type: "button",
+		"data-scope": "ai",
+		"data-part": "jump-to-latest",
+		"data-visible": $.get(visible) ? "" : void 0,
+		tabindex: $.get(visible) ? 0 : -1,
+		"aria-label": $0,
+		onclick: jump
+	}), [() => messages().ai.jumpToLatest]);
+	var node = $.child(button_1);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var text = $.text();
+		$.template_effect(($0) => $.set_text(text, $0), [() => messages().ai.jumpToLatest]);
+		$.append($$anchor, text);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(button_1);
+	$.bind_this(button_1, ($$value) => $.set(buttonEl, $$value), () => $.get(buttonEl));
+	$.append($$anchor, button_1);
+	$.pop();
+}
+// src/components/ai/AiLoader.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"aria-label",
+	"children"
+]);
+var root = $.from_html(`<span><!></span>`);
+function AiLoader($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
+	var span = root();
+	$.attribute_effect(span, ($0) => ({
+		...rest,
+		role: "status",
+		"aria-label": $0,
+		"data-scope": "ai",
+		"data-part": "loader"
+	}), [() => $$props["aria-label"] ?? messages().ai.loading]);
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+export { Ai as a, AiActions as i, AiJumpToLatest as n, AiContent as r, AiLoader as t };

package/dist/{AngleSlider-BDmLIZcL.mjs → AngleSlider-1HJ7tzno.mjs}

@@ -1,9 +1,9 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { AngleSlider } from "@ark-ui/svelte/angle-slider";
-//#region src/components/angle-slider/AngleSliderRoot.svelte
+// src/components/angle-slider/AngleSliderRoot.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -39,8 +39,7 @@ function AngleSliderRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/angle-slider/AngleSlider.svelte
+// src/components/angle-slider/AngleSlider.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -163,5 +162,4 @@ function AngleSlider$1($$anchor, $$props) {
 	}));
 	$.pop();
 }
-//#endregion
 export { AngleSliderRoot as n, AngleSlider$1 as t };

package/dist/{autocomplete-b65dChlK.mjs → AutoComplete-BY270ouT.mjs}

@@ -1,5 +1,4 @@
-import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
-import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
+import { n as useComponentMessages } from "./messages-BZoDXYu3.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
@@ -7,7 +6,7 @@ import { Portal } from "@ark-ui/svelte/portal";
 import { untrack } from "svelte";
 import { Combobox } from "@ark-ui/svelte/combobox";
 import { useListCollection } from "@ark-ui/svelte/collection";
-//#region src/components/autocomplete/AutoComplete.svelte
+// src/components/autocomplete/AutoComplete.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -19,7 +18,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"filter"
 ]);
 var root = $.from_html(`<!> <!>`, 1);
-function AutoComplete$1($$anchor, $$props) {
+function AutoComplete($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("combobox");
 	let value = $.prop($$props, "value", 15, ""), items = $.prop($$props, "items", 19, () => []), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
@@ -154,11 +153,4 @@ function AutoComplete$1($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/autocomplete/index.ts
-/** Free text with suggestions: the reader types anything, the list
-* narrows to help, and both a pick and a custom value end up in the
-* same `value`. A preset of the combobox machinery. */
-const AutoComplete = withSelfRoot(AutoComplete$1);
-//#endregion
 export { AutoComplete as t };

package/dist/AvatarFacade-CBILxhOm.mjs

@@ -0,0 +1,145 @@
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Avatar } from "@ark-ui/svelte/avatar";
+// src/components/avatar/Avatar.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"shape",
+	"children"
+]);
+function Avatar$1($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("avatar");
+	let size = $.prop($$props, "size", 3, "md"), shape = $.prop($$props, "shape", 3, "circle"), rest = $.rest_props($$props, rest_excludes$1);
+	const id = $.derived(() => useElementId("avatar", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Avatar.Root, ($$anchor, ArkAvatar_Root) => {
+		ArkAvatar_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get "data-size"() {
+				return size();
+			},
+			get "data-shape"() {
+				return shape();
+			},
+			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();
+}
+// src/components/avatar/AvatarFacade.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"name",
+	"src",
+	"size",
+	"shape",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+function AvatarFacade($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("avatar");
+	let size = $.prop($$props, "size", 3, "md"), shape = $.prop($$props, "shape", 3, "circle"), rest = $.rest_props($$props, rest_excludes);
+	const id = $.derived(() => useElementId("avatar", generatedId, $$props.id));
+	const initials = $.derived(() => ($$props.name ?? "").trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join(""));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Avatar.Root, ($$anchor, ArkAvatar_Root) => {
+		ArkAvatar_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get "data-size"() {
+				return size();
+			},
+			get "data-shape"() {
+				return shape();
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				var consequent = ($$anchor) => {
+					var fragment_2 = $.comment();
+					var node_2 = $.first_child(fragment_2);
+					$.snippet(node_2, () => $$props.children);
+					$.append($$anchor, fragment_2);
+				};
+				var alternate = ($$anchor) => {
+					var fragment_3 = root();
+					var node_3 = $.first_child(fragment_3);
+					var consequent_1 = ($$anchor) => {
+						var fragment_4 = $.comment();
+						var node_4 = $.first_child(fragment_4);
+						{
+							let $0 = $.derived(() => $$props.name ?? void 0);
+							$.component(node_4, () => Avatar.Image, ($$anchor, ArkAvatar_Image) => {
+								ArkAvatar_Image($$anchor, {
+									get src() {
+										return $$props.src;
+									},
+									get alt() {
+										return $.get($0);
+									}
+								});
+							});
+						}
+						$.append($$anchor, fragment_4);
+					};
+					$.if(node_3, ($$render) => {
+						if ($$props.src) $$render(consequent_1);
+					});
+					var node_5 = $.sibling(node_3, 2);
+					var consequent_2 = ($$anchor) => {
+						var fragment_5 = $.comment();
+						var node_6 = $.first_child(fragment_5);
+						$.component(node_6, () => 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_5);
+					};
+					$.if(node_5, ($$render) => {
+						if ($$props.name) $$render(consequent_2);
+					});
+					$.append($$anchor, fragment_3);
+				};
+				$.if(node_1, ($$render) => {
+					if ($$props.children) $$render(consequent);
+					else $$render(alternate, -1);
+				});
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+export { Avatar$1 as n, AvatarFacade as t };