@bysages/react 0.2.2 → 0.3.0

package/dist/components/transfer/index.mjs

@@ -0,0 +1,154 @@
+import { Button } from "../button/index.mjs";
+import { t as Input } from "../../input-2oezH-dY.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Checkbox } from "@ark-ui/react/checkbox";
+//#region src/components/transfer/index.tsx
+const checkGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
+});
+function arrowGlyph(direction) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6" })
+	});
+}
+/**
+* Two ledgers and a crossing: items sit in the source column until the
+* reader checks them and walks them across — and back, the same way.
+* `value` is the target column's value list; everything else in `data`
+* stays on the left. `searchable` adds a filter line to each panel.
+*/
+function Transfer({ value = [], data, titles = ["Source", "Target"], searchable = false, disabled = false, onValueChange, ...rest }) {
+	injectComponentStyle("transfer");
+	injectComponentStyle("checkbox");
+	const [checkedSource, setCheckedSource] = useState(() => /* @__PURE__ */ new Set());
+	const [checkedTarget, setCheckedTarget] = useState(() => /* @__PURE__ */ new Set());
+	const [sourceQuery, setSourceQuery] = useState("");
+	const [targetQuery, setTargetQuery] = useState("");
+	const target = new Set(value);
+	function panelItems(values, inTarget, query) {
+		return values.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) && target.has(item.value) === inTarget);
+	}
+	function toggle(side, option) {
+		(side === "source" ? setCheckedSource : setCheckedTarget)((prev) => {
+			const next = new Set(prev);
+			if (next.has(option)) next.delete(option);
+			else next.add(option);
+			return next;
+		});
+	}
+	function move(toTarget) {
+		const moving = toTarget ? checkedSource : checkedTarget;
+		if (moving.size === 0) return;
+		const next = toTarget ? [...value, ...moving].filter((entry, index, all) => all.indexOf(entry) === index) : value.filter((entry) => !moving.has(entry));
+		if (toTarget) setCheckedSource(/* @__PURE__ */ new Set());
+		else setCheckedTarget(/* @__PURE__ */ new Set());
+		onValueChange?.(next);
+	}
+	function panel(side, title, query, onQuery, checked, items) {
+		return /* @__PURE__ */ jsxs("div", {
+			"data-scope": "transfer",
+			"data-part": "panel",
+			"data-side": side,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					"data-scope": "transfer",
+					"data-part": "head",
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-scope": "transfer",
+						"data-part": "title",
+						children: title
+					}), /* @__PURE__ */ jsx("span", {
+						"data-scope": "transfer",
+						"data-part": "count",
+						children: items.length
+					})]
+				}),
+				searchable ? /* @__PURE__ */ jsx("div", {
+					"data-scope": "transfer",
+					"data-part": "search",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: query,
+						onValueChange: onQuery,
+						placeholder: "Filter…",
+						"aria-label": `Filter ${title}`
+					})
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					"data-scope": "transfer",
+					"data-part": "list",
+					children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
+						"data-scope": "transfer",
+						"data-part": "empty",
+						children: "Nothing here"
+					}) : items.map((item) => {
+						const locked = disabled || item.disabled === true;
+						return /* @__PURE__ */ jsxs(Checkbox.Root, {
+							checked: checked.has(item.value),
+							disabled: locked,
+							onCheckedChange: () => toggle(side, item.value),
+							children: [
+								/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkGlyph }) }),
+								/* @__PURE__ */ jsx(Checkbox.Label, {
+									"data-part": "label",
+									children: item.label
+								}),
+								/* @__PURE__ */ jsx(Checkbox.HiddenInput, {})
+							]
+						}, item.value);
+					})
+				})
+			]
+		});
+	}
+	const items = panelItems(data, false, sourceQuery);
+	const targetItems = panelItems(data, true, targetQuery);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "transfer",
+		"data-part": "root",
+		children: [
+			panel("source", titles[0], sourceQuery, setSourceQuery, checkedSource, items),
+			/* @__PURE__ */ jsxs("div", {
+				"data-scope": "transfer",
+				"data-part": "operations",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					square: true,
+					disabled: checkedSource.size === 0 || disabled,
+					"aria-label": "Move right",
+					onClick: () => move(true),
+					children: arrowGlyph("right")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					square: true,
+					disabled: checkedTarget.size === 0 || disabled,
+					"aria-label": "Move left",
+					onClick: () => move(false),
+					children: arrowGlyph("left")
+				})]
+			}),
+			panel("target", titles[1], targetQuery, setTargetQuery, checkedTarget, targetItems)
+		]
+	});
+}
+//#endregion
+export { Transfer };

package/dist/components/tree-select/index.d.mts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from "react";
+//#region src/components/tree-select/index.d.ts
+export interface TreeSelectNode {
+  label: string;
+  value: string;
+  children?: TreeSelectNode[];
+  disabled?: boolean;
+}
+/**
+ * A tree behind a field: the control reads like an input, the vessel
+ * below walks the hierarchy, and one leaf click closes the deal. Single
+ * selection — the chosen label rides on the control, its value rides in
+ * `value`. `filterable` puts a filter line at the top of the vessel;
+ * matches keep their ancestors and the branches fan open.
+ */
+export interface TreeSelectProps extends HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  data: TreeSelectNode[];
+  placeholder?: string;
+  filterable?: boolean;
+  disabled?: boolean;
+  /** One rung of the ladder: the trigger height and the vessel's row
+   * register follow it together. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+export declare function TreeSelect({ value, data, placeholder, filterable, disabled, size, onValueChange, ...rest }: TreeSelectProps): import("react").JSX.Element;
+//#endregion

package/dist/components/tree-select/index.mjs

@@ -0,0 +1,157 @@
+import { t as Input } from "../../input-2oezH-dY.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Popover } from "@ark-ui/react/popover";
+import { Portal } from "@ark-ui/react/portal";
+import { useFilter } from "@ark-ui/react/locale";
+import { TreeView, createTreeCollection } from "@ark-ui/react/tree-view";
+//#region src/components/tree-select/index.tsx
+const chevron = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const chevronDown = /* @__PURE__ */ jsx("span", {
+	"data-part": "chevron",
+	"aria-hidden": "true",
+	children: chevron
+});
+function TreeSelectRow({ node, indexPath }) {
+	return /* @__PURE__ */ jsx(TreeView.NodeProvider, {
+		node,
+		indexPath,
+		children: node.children ? /* @__PURE__ */ jsxs(TreeView.Branch, { children: [/* @__PURE__ */ jsxs(TreeView.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView.BranchIndicator, { children: chevron }), /* @__PURE__ */ jsx(TreeView.BranchText, { children: node.label })] }), /* @__PURE__ */ jsxs(TreeView.BranchContent, { children: [/* @__PURE__ */ jsx(TreeView.BranchIndentGuide, {}), node.children.map((child, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
+			node: child,
+			indexPath: [...indexPath, index]
+		}, child.value))] })] }) : /* @__PURE__ */ jsx(TreeView.Item, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					inlineSize: "100%"
+				},
+				children: /* @__PURE__ */ jsx(TreeView.ItemText, { children: node.label })
+			})
+		})
+	});
+}
+function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, size = "md", onValueChange, ...rest }) {
+	injectComponentStyle("tree-select");
+	injectComponentStyle("tree-view");
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const collection = useMemo(() => createTreeCollection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: data
+		}
+	}), [data]);
+	const filtering = filterable && query.trim().length > 0;
+	/** The collection pruned to the matches — each hit keeping its
+	* ancestors, so a deep match still reads inside its hierarchy. */
+	const visibleCollection = useMemo(() => filtering ? collection.filter((node) => filterFns.contains(node.label, query.trim())) : collection, [
+		filtering,
+		collection,
+		filterFns,
+		query
+	]);
+	const firstLevel = data.map((node) => node.value);
+	const expandedWhileFiltering = useMemo(() => {
+		if (!filtering) return void 0;
+		const values = [];
+		const walk = (nodes) => {
+			for (const node of nodes) if (node.children?.length) {
+				values.push(node.value);
+				walk(node.children);
+			}
+		};
+		walk(visibleCollection.rootNode.children ?? []);
+		return values;
+	}, [filtering, visibleCollection]);
+	let found;
+	const walk = (nodes) => {
+		for (const node of nodes ?? []) {
+			if (node.value === value) found = node.label;
+			walk(node.children);
+		}
+	};
+	walk(data);
+	const label = found;
+	function pick(details) {
+		const [selected] = details.selectedValue;
+		if (selected == null) return;
+		onValueChange?.(selected);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		...rest,
+		open,
+		onOpenChange: (details) => {
+			setOpen(details.open);
+			if (!details.open) setQuery("");
+		},
+		positioning: {
+			sameWidth: true,
+			placement: "bottom-start"
+		},
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			disabled,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-scope": "tree-select",
+				"data-part": "control",
+				"data-size": size,
+				"data-open": open ? "" : void 0,
+				"data-placeholder": label == null ? "" : void 0,
+				disabled,
+				children: [label ?? placeholder, chevronDown]
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			"data-scope": "tree-select",
+			"data-part": "content",
+			"data-size": size,
+			children: [filterable ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "tree-select",
+				"data-part": "search",
+				children: /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					value: query,
+					onValueChange: setQuery,
+					placeholder: "Filter…",
+					"aria-label": "Filter options"
+				})
+			}) : null, /* @__PURE__ */ jsx("div", {
+				"data-scope": "tree-select",
+				"data-part": "body",
+				children: (visibleCollection.rootNode.children ?? []).length === 0 ? /* @__PURE__ */ jsx("p", {
+					"data-scope": "tree-select",
+					"data-part": "empty",
+					children: "Nothing matches"
+				}) : /* @__PURE__ */ jsx(TreeView.Root, {
+					collection: visibleCollection,
+					selectionMode: "single",
+					selectedValue: value ? [value] : [],
+					...filtering ? { expandedValue: expandedWhileFiltering } : { defaultExpandedValue: firstLevel },
+					onSelectionChange: pick,
+					children: /* @__PURE__ */ jsx(TreeView.Tree, { children: visibleCollection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
+						node,
+						indexPath: [index]
+					}, node.value)) })
+				})
+			})]
+		}) }) })]
+	});
+}
+//#endregion
+export { TreeSelect };

package/dist/components/tree-view/index.d.mts

@@ -0,0 +1,19 @@
+import { CollectionItem } from "@ark-ui/react/collection";
+import { TreeView as TreeView$1, TreeViewRootComponentProps } from "@ark-ui/react/tree-view";
+//#region src/components/tree-view/index.d.ts
+/** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
+ * selection is pure light on the paper, one hairline plumb line per depth,
+ * and branches that swing open on the spring. The API is Ark's own —
+ * Root, Label, Tree, NodeProvider, NodeContext, Branch, BranchControl,
+ * BranchTrigger, BranchIndicator, BranchText, BranchContent,
+ * BranchIndentGuide, Item, ItemText, ItemIndicator, NodeCheckbox,
+ * NodeRenameInput, plus createTreeCollection. */
+type TreeViewOwnProps = {
+  /** One rung of the row register: the rows' breathing room follows it. */
+  size?: "sm" | "md" | "lg";
+};
+declare function TreeViewRoot<T extends CollectionItem>(props: TreeViewRootComponentProps<T, TreeViewOwnProps>): import("react").JSX.Element;
+export declare const TreeView: Omit<typeof TreeView$1, "Root"> & {
+  Root: typeof TreeViewRoot;
+};
+//#endregion

package/dist/components/tree-view/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { TreeView as TreeView$1 } from "@ark-ui/react/tree-view";
+//#region src/components/tree-view/index.tsx
+function TreeViewRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(TreeView$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const TreeView = {
+	...TreeView$1,
+	Root: TreeViewRoot
+};
+injectComponentStyle("tree-view");
+//#endregion
+export { TreeView };

package/dist/components/typography/index.d.mts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from "react";
+//#region src/components/typography/index.d.ts
+export declare const Typography: {
+  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Display: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Heading: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Lead: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Body: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Muted: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Label: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/typography/index.mjs

@@ -0,0 +1,34 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography/index.tsx
+/** The typographic voices, named so prose can ask for one: display and
+* heading ride the song-serif, the rest ride the hei. Nothing here is
+* decorative — hierarchy is size, weight, and space. */
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "typography",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Typography" + name;
+	return Component;
+}
+const Display = part("Display", "p");
+const Heading = part("Heading", "p");
+const Lead = part("Lead", "p");
+const Body = part("Body", "p");
+const Muted = part("Muted", "p");
+const Label = part("Label", "p");
+const Typography = Object.assign(Display, {
+	Display,
+	Heading,
+	Lead,
+	Body,
+	Muted,
+	Label
+});
+injectComponentStyle("typography");
+//#endregion
+export { Typography };

package/dist/components/user/index.d.mts

@@ -0,0 +1,20 @@
+import { AvatarSize } from "../avatar/index.mjs";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/user/index.d.ts
+export interface UserProps extends HTMLAttributes<HTMLDivElement> {
+  /** The person's name — the loud line. */
+  name: string;
+  /** The quiet echo beneath the name: a role, a title, an address. */
+  description?: string;
+  /** Seal diameter: one rung of the Avatar's own ladder. */
+  size?: AvatarSize;
+  src?: string;
+  shape?: "circle" | "square";
+  children?: ReactNode;
+}
+/** A person on one line: the seal before the words, the name and its
+ * quiet echo beneath. The mark is the Avatar itself — one component
+ * renders it here, so every size and shape the Avatar knows the user
+ * inherits; this row only lays the words out beside it. */
+export declare function User({ name, description, size, src, shape, children, ...rest }: UserProps): import("react").JSX.Element;
+//#endregion

package/dist/components/user/index.mjs

@@ -0,0 +1,42 @@
+import { Avatar } from "../avatar/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/user/index.tsx
+function initialsOf(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
+}
+/** A person on one line: the seal before the words, the name and its
+* quiet echo beneath. The mark is the Avatar itself — one component
+* renders it here, so every size and shape the Avatar knows the user
+* inherits; this row only lays the words out beside it. */
+function User({ name, description, size, src, shape = "circle", children, ...rest }) {
+	injectComponentStyle("user");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "user",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
+			size,
+			shape,
+			children: [src ? /* @__PURE__ */ jsx(Avatar.Image, { src }) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: initialsOf(name) })]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-scope": "user",
+			"data-part": "meta",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-scope": "user",
+					"data-part": "name",
+					children: name
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					"data-scope": "user",
+					"data-part": "description",
+					children: description
+				}) : null,
+				children
+			]
+		})]
+	});
+}
+//#endregion
+export { User };

package/dist/components/virtual-list/index.d.mts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/virtual-list/index.d.ts
+export interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** The height every row occupies — fixed rows keep it simple. */
+  itemHeight?: number;
+  /** The viewport height the ledger scrolls within. */
+  height?: number | string;
+  /** Renders one record into its positioned row. */
+  renderItem?: (item: unknown, index: number) => ReactNode;
+}
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+ * scroll length by a spacer sized from the row height, the rows
+ * themselves are positioned against it — a ten-thousand-row list
+ * costs the DOM a window, not the ledger. */
+export declare function VirtualList({ items, itemHeight, height, renderItem, ...rest }: VirtualListProps): import("react").JSX.Element;
+//#endregion

package/dist/components/virtual-list/index.mjs

@@ -0,0 +1,52 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/virtual-list/index.tsx
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+* scroll length by a spacer sized from the row height, the rows
+* themselves are positioned against it — a ten-thousand-row list
+* costs the DOM a window, not the ledger. */
+function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest }) {
+	injectComponentStyle("virtual-list");
+	const viewport = useRef(null);
+	const virtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => viewport.current,
+		estimateSize: () => itemHeight,
+		overscan: 6
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: viewport,
+		"data-scope": "virtual-list",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			blockSize: typeof height === "number" ? `${height}px` : height
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-scope": "virtual-list",
+			"data-part": "inner",
+			style: {
+				blockSize: virtualizer.getTotalSize(),
+				position: "relative"
+			},
+			children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx("div", {
+				"data-scope": "virtual-list",
+				"data-part": "row",
+				style: {
+					position: "absolute",
+					top: 0,
+					insetInlineStart: 0,
+					inlineSize: "100%",
+					transform: `translateY(${row.start}px)`,
+					blockSize: row.size
+				},
+				children: renderItem?.(items[row.index], row.index)
+			}, String(row.key)))
+		})
+	});
+}
+//#endregion
+export { VirtualList };

package/dist/components/watermark/index.d.mts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from "react";
+//#region src/components/watermark/index.d.ts
+export interface WatermarkProps extends HTMLAttributes<HTMLDivElement> {
+  content: string;
+  opacity?: number;
+  rotate?: number;
+  fontSize?: string;
+}
+/**
+ * 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.
+ */
+export declare function Watermark({ content, opacity, rotate, fontSize, children, ...rest }: WatermarkProps): import("react").JSX.Element;
+//#endregion

package/dist/components/watermark/index.mjs

@@ -0,0 +1,80 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/watermark/index.tsx
+/** 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;
+}
+/**
+* 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.
+*/
+function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
+	injectComponentStyle("watermark");
+	const [root, setRoot] = useState(null);
+	const [tile, setTile] = useState("");
+	useEffect(() => {
+		if (!root) return;
+		const canvas = document.createElement("canvas");
+		const paint = canvas.getContext("2d");
+		if (!paint) return;
+		const styles = getComputedStyle(root);
+		const fontSizePx = toPx(fontSize);
+		const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
+		paint.font = font;
+		const textWidth = paint.measureText(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(content, 0, 0);
+		setTile(`url(${canvas.toDataURL()})`);
+	}, [
+		root,
+		content,
+		opacity,
+		rotate,
+		fontSize
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: setRoot,
+		"data-scope": "watermark",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-scope": "watermark",
+			"data-part": "content",
+			children
+		}), /* @__PURE__ */ jsx("div", {
+			"data-scope": "watermark",
+			"data-part": "marks",
+			"aria-hidden": "true",
+			style: { backgroundImage: tile }
+		})]
+	});
+}
+//#endregion
+export { Watermark };