@bysages/svelte 0.2.2 → 0.3.0

package/dist/ai-response-D5IkRFMN.mjs

@@ -0,0 +1,146 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { renderHtml } from "@tanstack/markdown/html";
+//#region src/components/ai-response/code-copy.ts
+/** The two glyphs a copy affordance needs: the stamp and its
+* confirmation. Inline SVG keeps the enhancement framework-agnostic —
+* it lives beside the renderer's generated code HTML. */
+const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+/** How long the confirmation stays before the stamp returns. */
+const REVERT_MS = 1500;
+/** Make sure every fenced block under `host` carries its copy stamp.
+* The stamp anchors to a wrapper outside the scrolling `pre` — inside,
+* it would fix to the overflow area and travel out of view with the
+* code. The renderer rebuilds the markdown as one HTML string on every
+* stream tick, so this stays idempotent and cheap enough to re-run
+* after each patch. */
+function decorateCodeCopy(host, copyLabel) {
+	for (const pre of host.querySelectorAll("pre")) {
+		let body = pre.parentElement;
+		if (!body || body.getAttribute("data-part") !== "code-body") {
+			body = document.createElement("div");
+			body.setAttribute("data-scope", "ai");
+			body.setAttribute("data-part", "code-body");
+			pre.replaceWith(body);
+			body.appendChild(pre);
+		}
+		let button = body.querySelector("[data-part=\"code-copy\"]");
+		if (!button) {
+			button = document.createElement("button");
+			button.type = "button";
+			button.setAttribute("data-scope", "ai");
+			button.setAttribute("data-part", "code-copy");
+			button.innerHTML = COPY_CODE_ICON;
+			body.appendChild(button);
+		}
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}
+}
+/** The one delegated click for the whole response: copy the block's
+* text and confirm in place, then return the stamp after a beat. */
+async function clickCodeCopy(event, copyLabel, copiedLabel) {
+	const button = event.target?.closest("[data-part=\"code-copy\"]");
+	const pre = button?.closest("[data-part=\"code-body\"]")?.querySelector("pre");
+	if (!button || !pre) return;
+	await navigator.clipboard.writeText(pre.textContent ?? "");
+	button.innerHTML = COPIED_CODE_ICON;
+	button.setAttribute("data-state", "copied");
+	button.title = copiedLabel;
+	button.setAttribute("aria-label", copiedLabel);
+	setTimeout(() => {
+		if (!button.isConnected) return;
+		button.innerHTML = COPY_CODE_ICON;
+		button.removeAttribute("data-state");
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}, REVERT_MS);
+}
+//#endregion
+//#region src/components/ai-response/tables.ts
+/** Wide tables ride a scrolling lane instead of bursting the column.
+* The lane is a plain div: the table-as-scroll-container form is what
+* ate the mouse wheel over plain tables. Idempotent, so it can run
+* after every stream patch. */
+const lanes = /* @__PURE__ */ new Set();
+let laneObserver;
+/** A lane's verdict must follow its box — the panel around it can
+* resize at any moment, so each lane stays observed and re-decided
+* whenever its width changes. */
+function watchLane(lane) {
+	if (lanes.has(lane)) return;
+	lanes.add(lane);
+	laneObserver ??= new ResizeObserver(() => {
+		for (const lane of lanes) {
+			if (!lane.isConnected) {
+				laneObserver.unobserve(lane);
+				lanes.delete(lane);
+				continue;
+			}
+			lane.toggleAttribute("data-scrollable", lane.scrollWidth > lane.clientWidth);
+		}
+	});
+	laneObserver.observe(lane);
+}
+function wrapResponseTables(root) {
+	for (const table of root.querySelectorAll("table")) {
+		if (table.parentElement?.hasAttribute("data-table-scroll")) continue;
+		const lane = document.createElement("div");
+		lane.setAttribute("data-table-scroll", "");
+		table.replaceWith(lane);
+		lane.append(table);
+	}
+	for (const lane of root.querySelectorAll("[data-table-scroll]")) {
+		lane.toggleAttribute("data-scrollable", lane.scrollWidth > lane.clientWidth);
+		watchLane(lane);
+	}
+}
+//#endregion
+//#region src/components/ai-response/AiResponse.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"content",
+	"highlighter",
+	"copyLabel",
+	"copiedLabel",
+	"onclick"
+]);
+var root_1 = $.from_html(`<div></div>`);
+function AiResponse$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let copyLabel = $.prop($$props, "copyLabel", 3, "Copy code"), copiedLabel = $.prop($$props, "copiedLabel", 3, "Copied"), rest = $.rest_props($$props, rest_excludes);
+	const html = $.derived(() => renderHtml($$props.content, $$props.highlighter ? { highlighter: $$props.highlighter } : void 0));
+	let root;
+	$.user_effect(() => {
+		$.get(html);
+		if (root) decorateCodeCopy(root, copyLabel());
+		if (root) wrapResponseTables(root);
+	});
+	const handleClick = (event) => {
+		clickCodeCopy(event, copyLabel(), copiedLabel());
+		$$props.onclick?.(event);
+	};
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "ai",
+		"data-part": "response",
+		onclick: handleClick
+	}));
+	$.html(div, () => $.get(html), true);
+	$.reset(div);
+	$.bind_this(div, ($$value) => root = $$value, () => root);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/ai-response/index.ts
+/** Markdown set on the paper — streaming-safe by construction. */
+const AiResponse = AiResponse$1;
+//#endregion
+export { AiResponse as t };

package/dist/ai-source-CvglcFw1.mjs

@@ -0,0 +1,78 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/ai-source/AiSource.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"href",
+	"children"
+]);
+var root$1 = $.from_html(`<li data-scope="ai" data-part="source"><a><!></a></li>`);
+function AiSource$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var li = root$1();
+	var a = $.child(li);
+	$.attribute_effect(a, () => ({
+		...rest,
+		href: $$props.href,
+		target: "_blank",
+		rel: "noreferrer"
+	}));
+	var node = $.child(a);
+	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(() => $.set_text(text, $$props.href));
+		$.append($$anchor, text);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(a);
+	$.reset(li);
+	$.append($$anchor, li);
+	$.pop();
+}
+//#endregion
+//#region src/components/ai-source/AiSources.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<ol><!></ol>`);
+function AiSources$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes);
+	var ol = root();
+	$.attribute_effect(ol, () => ({
+		...rest,
+		"data-scope": "ai",
+		"data-part": "sources"
+	}));
+	var node = $.child(ol);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(ol);
+	$.append($$anchor, ol);
+	$.pop();
+}
+//#endregion
+//#region src/components/ai-source/index.ts
+/** One place the ink came from, and the reading list that gathers
+* them under a response. */
+const AiSource = AiSource$1;
+const AiSources = AiSources$1;
+//#endregion
+export { AiSources as n, AiSource as t };

package/dist/ai-suggestion-zGAQ1kkf.mjs

@@ -0,0 +1,38 @@
+import { t as Button } from "./button-BCcX7lHq.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/ai-suggestion/AiSuggestion.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"prompt",
+	"onSelect"
+]);
+function AiSuggestion$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes);
+	Button($$anchor, $.spread_props({
+		variant: "outline",
+		size: "sm"
+	}, () => rest, {
+		onclick: () => $$props.onSelect?.($$props.prompt),
+		children: ($$anchor, $$slotProps) => {
+			$.next();
+			var text = $.text();
+			$.template_effect(() => $.set_text(text, $$props.prompt));
+			$.append($$anchor, text);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+//#region src/components/ai-suggestion/index.ts
+/** A seal-cut button proposing the next stroke; selection hands back
+* the prompt. */
+const AiSuggestion = AiSuggestion$1;
+//#endregion
+export { AiSuggestion as t };

package/dist/ai-tool-DY_iNbMk.mjs

@@ -0,0 +1,117 @@
+import { Collapsible } from "./components/collapsible/index.mjs";
+import { t as ChevronIcon } from "./ChevronIcon-CVJJYda-.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/ai-tool/AiTool.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"name",
+	"label",
+	"status",
+	"input",
+	"output"
+]);
+var root = $.from_html(`<span data-scope="ai" data-part="tool-status"> </span>`);
+var root_1 = $.from_html(`<span> </span> <!> <!>`, 1);
+var root_2 = $.from_html(`<span data-scope="ai" data-part="tool-label">Input</span> <pre> </pre>`, 1);
+var root_3 = $.from_html(`<span data-scope="ai" data-part="tool-label">Output</span> <pre> </pre>`, 1);
+var root_4 = $.from_html(`<div data-scope="ai" data-part="tool-body"><!> <!></div>`);
+var root_5 = $.from_html(`<!> <!>`, 1);
+function AiTool$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("ai");
+	let rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Collapsible.Root, ($$anchor, Collapsible_Root) => {
+		Collapsible_Root($$anchor, $.spread_props(() => rest, {
+			"data-ai": "tool",
+			get "data-status"() {
+				return $$props.status;
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = root_5();
+				var node_1 = $.first_child(fragment_1);
+				$.component(node_1, () => Collapsible.Trigger, ($$anchor, Collapsible_Trigger) => {
+					Collapsible_Trigger($$anchor, {
+						children: ($$anchor, $$slotProps) => {
+							var fragment_2 = root_1();
+							var span = $.first_child(fragment_2);
+							var text = $.only_child(span, true);
+							var node_2 = $.sibling(span, 2);
+							var consequent = ($$anchor) => {
+								var span_1 = root();
+								var text_1 = $.only_child(span_1, true);
+								$.template_effect(($0) => $.set_text(text_1, $0), [() => $$props.status.charAt(0).toUpperCase() + $$props.status.slice(1)]);
+								$.append($$anchor, span_1);
+							};
+							$.if(node_2, ($$render) => {
+								if ($$props.status) $$render(consequent);
+							});
+							var node_3 = $.sibling(node_2, 2);
+							$.component(node_3, () => Collapsible.Indicator, ($$anchor, Collapsible_Indicator) => {
+								Collapsible_Indicator($$anchor, {
+									children: ($$anchor, $$slotProps) => {
+										ChevronIcon($$anchor, {});
+									},
+									$$slots: { default: true }
+								});
+							});
+							$.template_effect(() => $.set_text(text, $$props.label ?? $$props.name));
+							$.append($$anchor, fragment_2);
+						},
+						$$slots: { default: true }
+					});
+				});
+				var node_4 = $.sibling(node_1, 2);
+				$.component(node_4, () => Collapsible.Content, ($$anchor, Collapsible_Content) => {
+					Collapsible_Content($$anchor, {
+						children: ($$anchor, $$slotProps) => {
+							var div = root_4();
+							var node_5 = $.child(div);
+							var consequent_1 = ($$anchor) => {
+								var fragment_4 = root_2();
+								var pre = $.sibling($.first_child(fragment_4), 2);
+								var text_2 = $.only_child(pre, true);
+								$.template_effect(() => $.set_text(text_2, $$props.input));
+								$.append($$anchor, fragment_4);
+							};
+							$.if(node_5, ($$render) => {
+								if ($$props.input !== void 0) $$render(consequent_1);
+							});
+							var node_6 = $.sibling(node_5, 2);
+							var consequent_2 = ($$anchor) => {
+								var fragment_5 = root_3();
+								var pre_1 = $.sibling($.first_child(fragment_5), 2);
+								var text_3 = $.only_child(pre_1, true);
+								$.template_effect(() => $.set_text(text_3, $$props.output));
+								$.append($$anchor, fragment_5);
+							};
+							$.if(node_6, ($$render) => {
+								if ($$props.output !== void 0) $$render(consequent_2);
+							});
+							$.reset(div);
+							$.append($$anchor, div);
+						},
+						$$slots: { default: true }
+					});
+				});
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/ai-tool/index.ts
+/** 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. */
+const AiTool = AiTool$1;
+//#endregion
+export { AiTool as t };

package/dist/alert-Xp8I8IY9.mjs

@@ -0,0 +1,156 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { getContext, setContext } from "svelte";
+//#region src/components/alert/Alert.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"status",
+	"children"
+]);
+var root$4 = $.from_html(`<div><!></div>`);
+function Alert$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("alert");
+	let status = $.prop($$props, "status", 3, "ink"), rest = $.rest_props($$props, rest_excludes$4);
+	setContext("alert:status", () => status());
+	var div = root$4();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: status() === "ink" || status() === "info" ? "status" : "alert",
+		"data-scope": "alert",
+		"data-part": "root",
+		"data-status": status()
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/alert/AlertBody.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function AlertBody($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("alert");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var div = root$3();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "alert",
+		"data-part": "body"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/alert/AlertDescription.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<p><!></p>`);
+function AlertDescription($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("alert");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var p = root$2();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "alert",
+		"data-part": "description"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/alert/AlertIcon.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy"
+]);
+var root$1 = $.from_html(`<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path></path></svg></span>`);
+function AlertIcon($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("alert");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	const readStatus = getContext("alert:status");
+	const paths = {
+		info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+		success: "m4 12.5 5 5L20 6.5",
+		warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
+		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"
+	};
+	var span = root$1();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "alert",
+		"data-part": "icon"
+	}));
+	var svg = $.child(span);
+	$.set_attribute(svg, "width", 16);
+	$.set_attribute(svg, "height", 16);
+	var path = $.only_child(svg);
+	$.reset(span);
+	$.template_effect(($0) => $.set_attribute(path, "d", $0), [() => paths[readStatus()]]);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/alert/AlertTitle.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<p><!></p>`);
+function AlertTitle($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("alert");
+	let rest = $.rest_props($$props, rest_excludes);
+	var p = root();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "alert",
+		"data-part": "title"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/alert/index.ts
+/** A notice drawn on the page: a wash of the status pigment, one heavier
+* hairline on the leading edge, the serif for its title. Root, Icon,
+* Body, Title, Description — the icon reads the status from the Root. */
+const Alert = Object.assign(Alert$1, {
+	Root: Alert$1,
+	Icon: AlertIcon,
+	Body: AlertBody,
+	Title: AlertTitle,
+	Description: AlertDescription
+});
+//#endregion
+export { Alert as t };

package/dist/aspect-ratio-COOgu44A.mjs

@@ -0,0 +1,36 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/aspect-ratio/AspectRatio.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"ratio",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function AspectRatio$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("aspect-ratio");
+	let ratio = $.prop($$props, "ratio", 3, "1 / 1"), rest = $.rest_props($$props, rest_excludes);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "aspect-ratio",
+		"data-part": "root",
+		[$.STYLE]: { "--bs-aspect-ratio": ratio() }
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/aspect-ratio/index.ts
+/** A frame that keeps its shape: the box holds the given ratio whatever
+* the width it is dealt, and the child fills the frame it is given. */
+const AspectRatio = AspectRatio$1;
+//#endregion
+export { AspectRatio as t };