@bysages/svelte 0.2.2 → 0.2.3

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.2.3",
   "description": "By Sages Elements components for Svelte — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -31,6 +31,34 @@
     "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": {
@@ -42,16 +70,17 @@
   "dependencies": {
     "@ark-ui/svelte": "5.24.2",
     "@tanstack/markdown": "0.0.15",
+    "@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.2.3",
+    "@bysages/icons": "0.2.3"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "7.3.0",
-    "ai": "7.0.107",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "ai": "7.0.118",
     "rollup-plugin-svelte": "7.2.3",
     "svelte": "5.57.1",
     "svelte2tsx": "0.7.61"