@bysages/svelte 0.2.1 → 0.2.3

package/dist/mentions-DjhgNRmY.mjs

@@ -0,0 +1,204 @@
+import { Field } from "./components/field/index.mjs";
+import { t as useMentions } from "./use-mentions-DeF_38di.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Popover } from "@ark-ui/svelte/popover";
+import { Portal } from "@ark-ui/svelte/portal";
+//#region src/components/mentions/MentionsVessel.svelte
+var root$1 = $.from_html(`<div data-scope="mentions" data-part="option"> </div>`);
+var root_1 = $.from_html(`<div></div>`);
+function MentionsVessel$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("mentions");
+	let open = $.prop($$props, "open", 3, false), matches = $.prop($$props, "matches", 19, () => []), active = $.prop($$props, "active", 3, 0), anchor = $.prop($$props, "anchor", 3, null), size = $.prop($$props, "size", 3, "md");
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Popover.Root, ($$anchor, ArkPopover_Root) => {
+		ArkPopover_Root($$anchor, {
+			get open() {
+				return open();
+			},
+			positioning: {
+				placement: "bottom-start",
+				getAnchorRect: () => anchor()?.getBoundingClientRect() ?? null
+			},
+			onOpenChange: (details) => $$props.onOpenChange?.(details.open),
+			children: ($$anchor, $$slotProps) => {
+				Portal($$anchor, {
+					children: ($$anchor, $$slotProps) => {
+						var fragment_2 = $.comment();
+						var node_1 = $.first_child(fragment_2);
+						$.component(node_1, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
+							ArkPopover_Positioner($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_3 = $.comment();
+									var node_2 = $.first_child(fragment_3);
+									{
+										const asChild = ($$anchor, contentProps = $.noop) => {
+											var div = root_1();
+											$.attribute_effect(div, ($0) => ({
+												...$0,
+												"data-scope": "mentions",
+												"data-part": "popup",
+												"data-size": size()
+											}), [() => contentProps()()]);
+											$.each(div, 23, matches, (entry) => entry.value, ($$anchor, entry, index) => {
+												var div_1 = root$1();
+												var text = $.only_child(div_1, true);
+												$.template_effect(() => {
+													$.set_attribute(div_1, "data-active", $.get(index) === active() ? "" : void 0);
+													$.set_text(text, $.get(entry).label);
+												});
+												$.event("mouseenter", div_1, () => $$props.onActiveChange?.($.get(index)));
+												$.delegated("mousedown", div_1, (event) => event.preventDefault());
+												$.delegated("click", div_1, () => $$props.onInsert?.($.get(entry)));
+												$.append($$anchor, div_1);
+											});
+											$.reset(div);
+											$.append($$anchor, div);
+										};
+										$.component(node_2, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
+											ArkPopover_Content($$anchor, {
+												asChild,
+												$$slots: { asChild: true }
+											});
+										});
+									}
+									$.append($$anchor, fragment_3);
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_2);
+					},
+					$$slots: { default: true }
+				});
+			},
+			$$slots: { default: true }
+		});
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+$.delegate(["mousedown", "click"]);
+//#endregion
+//#region src/components/mentions/Mentions.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"items",
+	"value",
+	"trigger",
+	"placeholder",
+	"autoresize",
+	"invalid",
+	"size",
+	"onValueChange"
+]);
+var root = $.from_html(`<div><!> <!></div>`);
+function Mentions$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("mentions");
+	let items = $.prop($$props, "items", 19, () => []), value = $.prop($$props, "value", 15, ""), trigger = $.prop($$props, "trigger", 3, "@"), autoresize = $.prop($$props, "autoresize", 3, false), invalid = $.prop($$props, "invalid", 3, false), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	let textareaEl = $.state(null);
+	const mentions = useMentions(() => ({
+		items: items(),
+		trigger: trigger()
+	}), () => $.get(textareaEl), {
+		getText: () => $.get(textareaEl)?.value ?? value(),
+		setText: (next) => {
+			value(next);
+			$$props.onValueChange?.(next);
+		}
+	});
+	function onInput(event) {
+		$$props.onValueChange?.(event.currentTarget.value);
+		mentions.onInput();
+	}
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "mentions",
+		"data-part": "root",
+		"data-size": size()
+	}));
+	var node = $.child(div);
+	{
+		let $0 = $.derived(() => invalid() ? "true" : void 0);
+		$.component(node, () => Field.Textarea, ($$anchor, Field_Textarea) => {
+			Field_Textarea($$anchor, {
+				get autoresize() {
+					return autoresize();
+				},
+				rows: 3,
+				get placeholder() {
+					return $$props.placeholder;
+				},
+				get "aria-invalid"() {
+					return $.get($0);
+				},
+				"data-scope": "mentions",
+				"data-part": "textarea",
+				oninput: onInput,
+				get onkeydown() {
+					return mentions.onKeydown;
+				},
+				get ref() {
+					return $.get(textareaEl);
+				},
+				set ref($$value) {
+					$.set(textareaEl, $$value, true);
+				},
+				get value() {
+					return value();
+				},
+				set value($$value) {
+					value($$value);
+				}
+			});
+		});
+	}
+	MentionsVessel$1($.sibling(node, 2), {
+		get open() {
+			return mentions.open;
+		},
+		get matches() {
+			return mentions.matches;
+		},
+		get active() {
+			return mentions.active;
+		},
+		get anchor() {
+			return $.get(textareaEl);
+		},
+		get size() {
+			return size();
+		},
+		get onInsert() {
+			return mentions.insert;
+		},
+		onActiveChange: (index) => mentions.active = index,
+		onOpenChange: (open) => {
+			if (!open) mentions.close();
+		}
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/mentions/index.ts
+/** @-mentions: a plain textarea that, when the text before the caret
+* ends with the trigger character followed by a token, offers the
+* matching candidates in a small anchored vessel; choosing one replaces
+* the token with `trigger + label` and hands the whole text back
+* through `bind:value`. Arrows move, Enter inserts, Escape dismisses. */
+const Mentions = Mentions$1;
+/** The vessel: the candidates themselves as a floating card. Composers
+* that keep their own field anatomy wire it up with `useMentions`
+* directly. */
+const MentionsVessel = MentionsVessel$1;
+//#endregion
+export { MentionsVessel as n, Mentions as t };

package/dist/menubar-Crrkg2tZ.mjs

@@ -0,0 +1,148 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Portal } from "@ark-ui/svelte/portal";
+import { Menu } from "@ark-ui/svelte/menu";
+//#region src/components/menubar/Menubar.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"items",
+	"onSelect"
+]);
+var root = $.from_html(`<button> </button>`);
+var root_1 = $.from_html(`<!> <!>`, 1);
+var root_2 = $.from_html(`<div></div>`);
+function Menubar$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("menubar");
+	let items = $.prop($$props, "items", 19, () => []), rest = $.rest_props($$props, rest_excludes);
+	var div = root_2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "menubar",
+		"data-part": "root",
+		role: "menubar"
+	}));
+	$.each(div, 21, items, (group) => group.label, ($$anchor, group) => {
+		var fragment = $.comment();
+		var node = $.first_child(fragment);
+		$.component(node, () => Menu.Root, ($$anchor, ArkMenu_Root) => {
+			ArkMenu_Root($$anchor, {
+				positioning: { placement: "bottom-start" },
+				children: ($$anchor, $$slotProps) => {
+					var fragment_1 = root_1();
+					var node_1 = $.first_child(fragment_1);
+					{
+						const asChild = ($$anchor, props = $.noop) => {
+							var button = root();
+							$.attribute_effect(button, ($0) => ({
+								...$0,
+								type: "button",
+								"data-scope": "menubar",
+								"data-part": "trigger"
+							}), [() => props()()]);
+							var text = $.only_child(button, true);
+							$.template_effect(() => $.set_text(text, $.get(group).label));
+							$.append($$anchor, button);
+						};
+						$.component(node_1, () => Menu.Trigger, ($$anchor, ArkMenu_Trigger) => {
+							ArkMenu_Trigger($$anchor, {
+								asChild,
+								$$slots: { asChild: true }
+							});
+						});
+					}
+					var node_2 = $.sibling(node_1, 2);
+					Portal(node_2, {
+						children: ($$anchor, $$slotProps) => {
+							var fragment_2 = $.comment();
+							var node_3 = $.first_child(fragment_2);
+							$.component(node_3, () => Menu.Positioner, ($$anchor, ArkMenu_Positioner) => {
+								ArkMenu_Positioner($$anchor, {
+									children: ($$anchor, $$slotProps) => {
+										var fragment_3 = $.comment();
+										var node_4 = $.first_child(fragment_3);
+										$.component(node_4, () => Menu.Content, ($$anchor, ArkMenu_Content) => {
+											ArkMenu_Content($$anchor, {
+												children: ($$anchor, $$slotProps) => {
+													var fragment_4 = $.comment();
+													var node_5 = $.first_child(fragment_4);
+													$.each(node_5, 17, () => $.get(group).items, (entry) => entry.value, ($$anchor, entry) => {
+														var fragment_5 = $.comment();
+														var node_6 = $.first_child(fragment_5);
+														{
+															let $0 = $.derived(() => $.get(entry).danger ? "" : void 0);
+															$.component(node_6, () => Menu.Item, ($$anchor, ArkMenu_Item) => {
+																ArkMenu_Item($$anchor, {
+																	get value() {
+																		return $.get(entry).value;
+																	},
+																	get disabled() {
+																		return $.get(entry).disabled;
+																	},
+																	get "data-danger"() {
+																		return $.get($0);
+																	},
+																	onSelect: () => $$props.onSelect?.($.get(entry).value),
+																	children: ($$anchor, $$slotProps) => {
+																		var fragment_6 = $.comment();
+																		var node_7 = $.first_child(fragment_6);
+																		$.component(node_7, () => Menu.ItemText, ($$anchor, ArkMenu_ItemText) => {
+																			ArkMenu_ItemText($$anchor, {
+																				children: ($$anchor, $$slotProps) => {
+																					$.next();
+																					var text_1 = $.text();
+																					$.template_effect(() => $.set_text(text_1, $.get(entry).label));
+																					$.append($$anchor, text_1);
+																				},
+																				$$slots: { default: true }
+																			});
+																		});
+																		$.append($$anchor, fragment_6);
+																	},
+																	$$slots: { default: true }
+																});
+															});
+														}
+														$.append($$anchor, fragment_5);
+													});
+													$.append($$anchor, fragment_4);
+												},
+												$$slots: { default: true }
+											});
+										});
+										$.append($$anchor, fragment_3);
+									},
+									$$slots: { default: true }
+								});
+							});
+							$.append($$anchor, fragment_2);
+						},
+						$$slots: { default: true }
+					});
+					$.append($$anchor, fragment_1);
+				},
+				$$slots: { default: true }
+			});
+		});
+		$.append($$anchor, fragment);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/menubar/index.ts
+/** A desktop-style menu bar: a row of quiet ghost triggers, each
+* opening the same paper vessel as the menu family. The triggers are
+* our own buttons grafted onto the menu machine's trigger via
+* `asChild` — the machine keeps the trigger element (positioning,
+* focus restore, `data-state`) while the element wears the menubar
+* scope. The popups keep the menu parts untouched, so the menu
+* stylesheet dresses them. */
+const Menubar = Menubar$1;
+injectComponentStyle("menu");
+//#endregion
+export { Menubar as t };

package/dist/meter-BgsJ2g-v.mjs

@@ -0,0 +1,164 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/meter/MeterLabel.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<span><!></span>`);
+function MeterLabel($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("meter");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var span = root$3();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "meter",
+		"data-part": "label"
+	}));
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/meter/MeterValueText.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<span><!></span>`);
+function MeterValueText($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("meter");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var span = root$2();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "meter",
+		"data-part": "value-text"
+	}));
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/meter/MeterTrack.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<span><span data-scope="meter" data-part="range"></span></span>`);
+function MeterTrack($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("meter");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var span = root$1();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "meter",
+		"data-part": "track"
+	}));
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/meter/Meter.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"min",
+	"max",
+	"level",
+	"label",
+	"size",
+	"children"
+]);
+var root = $.from_html(`<!> <!> <!>`, 1);
+var root_1 = $.from_html(`<div><!></div>`);
+function Meter$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("meter");
+	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), level = $.prop($$props, "level", 3, "normal"), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	const ratio = $.derived(() => {
+		const span = max() - min();
+		return span > 0 ? Math.min(Math.max(($$props.value - min()) / span, 0), 1) : 0;
+	});
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: "meter",
+		"aria-valuemin": min(),
+		"aria-valuemax": max(),
+		"aria-valuenow": $$props.value,
+		"aria-label": $$props.label ?? rest["aria-label"],
+		"data-scope": "meter",
+		"data-part": "root",
+		"data-level": level() !== "normal" ? level() : void 0,
+		"data-size": size(),
+		[$.STYLE]: { "--_percent": `${$.get(ratio) * 100}%` }
+	}));
+	var node = $.child(div);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var fragment_1 = root();
+		var node_2 = $.first_child(fragment_1);
+		MeterLabel(node_2, {
+			children: ($$anchor, $$slotProps) => {
+				$.next();
+				var text = $.text();
+				$.template_effect(() => $.set_text(text, $$props.label));
+				$.append($$anchor, text);
+			},
+			$$slots: { default: true }
+		});
+		var node_3 = $.sibling(node_2, 2);
+		MeterValueText(node_3, {
+			children: ($$anchor, $$slotProps) => {
+				$.next();
+				var text_1 = $.text();
+				$.template_effect(($0) => $.set_text(text_1, $0), [() => `${Math.round($.get(ratio) * 100)}%`]);
+				$.append($$anchor, text_1);
+			},
+			$$slots: { default: true }
+		});
+		MeterTrack($.sibling(node_3, 2), {});
+		$.append($$anchor, fragment_1);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/meter/index.ts
+/** A measure in the world, not a task in flight: how much of the toner
+* remains, how full the cistern stands. The level chooses the pigment. */
+const Meter = Object.assign(Meter$1, {
+	Root: Meter$1,
+	Label: MeterLabel,
+	ValueText: MeterValueText,
+	Track: MeterTrack
+});
+//#endregion
+export { Meter as t };

package/dist/page-header-DKpKUkTe.mjs

@@ -0,0 +1,167 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/page-header/PageHeader.svelte
+var rest_excludes$5 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$5 = $.from_html(`<header><!></header>`);
+function PageHeader$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("page-header");
+	let rest = $.rest_props($$props, rest_excludes$5);
+	var header = root$5();
+	$.attribute_effect(header, () => ({
+		...rest,
+		"data-scope": "page-header",
+		"data-part": "root"
+	}));
+	var node = $.child(header);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(header);
+	$.append($$anchor, header);
+	$.pop();
+}
+//#endregion
+//#region src/components/page-header/PageHeaderActions.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$4 = $.from_html(`<div><!></div>`);
+function PageHeaderActions($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("page-header");
+	let rest = $.rest_props($$props, rest_excludes$4);
+	var div = root$4();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "page-header",
+		"data-part": "actions"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/page-header/PageHeaderDescription.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<p><!></p>`);
+function PageHeaderDescription($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("page-header");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var p = root$3();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "page-header",
+		"data-part": "description"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/page-header/PageHeaderEyebrow.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<p><!></p>`);
+function PageHeaderEyebrow($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("page-header");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var p = root$2();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "page-header",
+		"data-part": "eyebrow"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/page-header/PageHeaderHeading.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<div><!></div>`);
+function PageHeaderHeading($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("page-header");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var div = root$1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "page-header",
+		"data-part": "heading"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/page-header/PageHeaderTitle.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<h1><!></h1>`);
+function PageHeaderTitle($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("page-header");
+	let rest = $.rest_props($$props, rest_excludes);
+	var h1 = root();
+	$.attribute_effect(h1, () => ({
+		...rest,
+		"data-scope": "page-header",
+		"data-part": "title"
+	}));
+	var node = $.child(h1);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(h1);
+	$.append($$anchor, h1);
+	$.pop();
+}
+//#endregion
+//#region src/components/page-header/index.ts
+/** The page's face: an eyebrow whisper, a serif title, one line of
+* description, and the actions resting beside the title on the same
+* baseline. Heading groups title and actions; the rest compose below. */
+const PageHeader = Object.assign(PageHeader$1, {
+	Root: PageHeader$1,
+	Heading: PageHeaderHeading,
+	Eyebrow: PageHeaderEyebrow,
+	Title: PageHeaderTitle,
+	Description: PageHeaderDescription,
+	Actions: PageHeaderActions
+});
+//#endregion
+export { PageHeader as t };