@bysages/svelte 0.2.2 → 0.3.0

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

@@ -0,0 +1,59 @@
+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,
+		"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/dist/watermark-C2d3-EAM.mjs

@@ -0,0 +1,90 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/watermark/Watermark.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"content",
+	"opacity",
+	"rotate",
+	"fontSize",
+	"children"
+]);
+var root_1 = $.from_html(`<div><div data-scope="watermark" data-part="content"><!></div> <div data-scope="watermark" data-part="marks" aria-hidden="true"></div></div>`);
+function Watermark$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("watermark");
+	let opacity = $.prop($$props, "opacity", 3, .06), rotate = $.prop($$props, "rotate", 19, () => -20), fontSize = $.prop($$props, "fontSize", 3, "0.875rem"), rest = $.rest_props($$props, rest_excludes);
+	let host = $.state(null);
+	let tile = $.state("");
+	/** Font-relative measures ride the root's own measure; absolute units
+	* pass through untouched — the canvas needs a number, the prop may
+	* speak in CSS. */
+	function toPx(size) {
+		const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+		const value = Number.parseFloat(size) || 0;
+		if (size.includes("em")) return value * root;
+		return value;
+	}
+	$.user_effect(() => {
+		const node = $.get(host);
+		if (!node) return;
+		const canvas = document.createElement("canvas");
+		const paint = canvas.getContext("2d");
+		if (!paint) return;
+		const styles = getComputedStyle(node);
+		const fontSizePx = toPx(fontSize());
+		const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
+		paint.font = font;
+		const textWidth = paint.measureText($$props.content).width;
+		const margin = fontSizePx;
+		const boxWidth = Math.ceil(textWidth + margin * 2);
+		const boxHeight = Math.ceil(fontSizePx + margin * 2);
+		const radian = rotate() * Math.PI / 180;
+		const cos = Math.cos(radian);
+		const sin = Math.sin(radian);
+		const width = Math.ceil(Math.abs(boxWidth * cos) + Math.abs(boxHeight * sin));
+		const height = Math.ceil(Math.abs(boxWidth * sin) + Math.abs(boxHeight * cos));
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		paint.scale(dpr, dpr);
+		paint.translate(width / 2, height / 2);
+		paint.rotate(radian);
+		paint.globalAlpha = opacity();
+		paint.font = font;
+		paint.textAlign = "center";
+		paint.textBaseline = "middle";
+		paint.fillStyle = styles.getPropertyValue("--bs-color-text-tertiary").trim() || styles.color;
+		paint.fillText($$props.content, 0, 0);
+		$.set(tile, `url(${canvas.toDataURL()})`);
+	});
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "watermark",
+		"data-part": "root"
+	}));
+	var div_1 = $.child(div);
+	var node_1 = $.child(div_1);
+	$.snippet(node_1, () => $$props.children ?? $.noop);
+	$.reset(div_1);
+	var div_2 = $.sibling(div_1, 2);
+	let styles_1;
+	$.reset(div);
+	$.bind_this(div, ($$value) => $.set(host, $$value), () => $.get(host));
+	$.template_effect(() => styles_1 = $.set_style(div_2, "", styles_1, { "background-image": $.get(tile) }));
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/watermark/index.ts
+/** The paper bears its seal beneath the content: a canvas draws the
+* text once into a tile (rotated, faint, crisp at the screen's pixel
+* density) and the marks layer repeats it over the children. The seal
+* redraws itself when a prop turns — and it never takes a pointer. */
+const Watermark = Watermark$1;
+//#endregion
+export { Watermark as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/svelte",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "By Sages Elements components for Svelte — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -31,33 +31,83 @@
     "dist"
   ],
   "type": "module",
+  "sideEffects": [
+    "./dist/components/accordion/index.mjs",
+    "./dist/components/carousel/index.mjs",
+    "./dist/components/collapsible/index.mjs",
+    "./dist/components/dialog/index.mjs",
+    "./dist/components/drawer/index.mjs",
+    "./dist/components/field/index.mjs",
+    "./dist/components/fieldset/index.mjs",
+    "./dist/components/floating-panel/index.mjs",
+    "./dist/components/highlight/index.mjs",
+    "./dist/components/hover-card/index.mjs",
+    "./dist/components/image-cropper/index.mjs",
+    "./dist/components/json-tree-view/index.mjs",
+    "./dist/components/marquee/index.mjs",
+    "./dist/components/navigation-menu/index.mjs",
+    "./dist/components/popover/index.mjs",
+    "./dist/components/qr-code/index.mjs",
+    "./dist/components/scroll-area/index.mjs",
+    "./dist/components/signature-pad/index.mjs",
+    "./dist/components/splitter/index.mjs",
+    "./dist/components/swap/index.mjs",
+    "./dist/components/timer/index.mjs",
+    "./dist/components/toast/index.mjs",
+    "./dist/components/toc/index.mjs",
+    "./dist/components/toggle/index.mjs",
+    "./dist/components/tooltip/index.mjs",
+    "./dist/components/tour/index.mjs"
+  ],
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "exports": {
     ".": {
       "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/icons": "0.2.2",
-    "@bysages/core": "0.2.2"
+    "@bysages/core": "0.3.0",
+    "@bysages/icons": "0.3.0"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "7.3.0",
-    "ai": "7.0.107",
+    "@json-render/core": "0.21.0",
+    "@json-render/svelte": "0.21.0",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "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",