@bysages/react 0.4.3 → 0.5.0

package/dist/generative/index.mjs

@@ -1,15 +1,18 @@
-import { r as iconNode } from "../icon-Cri0-7-x.mjs";
+import { r as iconNode } from "../icon-C9udWCyz.mjs";
 import { Button } from "../components/button/index.mjs";
 import { Alert } from "../components/alert/index.mjs";
 import { Avatar } from "../components/avatar/index.mjs";
 import { Badge } from "../components/badge/index.mjs";
+import { Banner } from "../components/banner/index.mjs";
 import { Spinner } from "../components/spinner/index.mjs";
+import { Breadcrumb } from "../components/breadcrumb/index.mjs";
 import { Card } from "../components/card/index.mjs";
-import { t as Input } from "../input-BDpQ0e6G.mjs";
+import { t as Input } from "../input-YRjehBhU.mjs";
 import { Checkbox } from "../components/checkbox/index.mjs";
+import { FloatButton } from "../components/float-button/index.mjs";
 import { Progress } from "../components/progress/index.mjs";
 import { RadioGroup } from "../components/radio-group/index.mjs";
-import { t as Select } from "../select-D_soVdWK.mjs";
+import { t as Select } from "../select-DQ5669_K.mjs";
 import { Separator } from "../components/separator/index.mjs";
 import { Slider } from "../components/slider/index.mjs";
 import { Stack } from "../components/stack/index.mjs";
@@ -17,14 +20,13 @@ import { Stat } from "../components/stat/index.mjs";
 import { Switch } from "../components/switch/index.mjs";
 import { Textarea } from "../components/textarea/index.mjs";
 import { Typography } from "../components/typography/index.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
-import { createListCollection } from "@ark-ui/react/collection";
 import { z } from "zod";
 import { defineRegistry, useBoundProp } from "@json-render/react";
 import { defineCatalog } from "@json-render/core";
 import { schema } from "@json-render/react/schema";
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
@@ -35,8 +37,7 @@ var __exportAll = (all, no_symbols) => {
 	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
-//#endregion
-//#region src/generative/faces.generated.ts
+// src/generative/faces.generated.ts
 /** Name the faces a family contributes; the identity keeps inference
 * honest at the call site. */
 function defineFace(faces) {
@@ -52,9 +53,6 @@ const headingClass = {
 	"5": "text-lg",
 	"6": "text-base"
 };
-function initials(name) {
-	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
-}
 function slug(value) {
 	return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || value;
 }
@@ -88,6 +86,25 @@ const faces$1 = defineFace({
 		}),
 		description: "A person's seal: image when given, initials as the fallback."
 	},
+	Banner: {
+		props: z.object({
+			status: z.enum([
+				"ink",
+				"info",
+				"success",
+				"warning",
+				"danger"
+			]).optional(),
+			title: z.string().optional(),
+			message: z.string().optional(),
+			dismissible: z.boolean().optional()
+		}),
+		description: "A full-width notice that speaks once across the page."
+	},
+	Breadcrumb: {
+		props: z.object({ items: z.array(z.string()).optional() }),
+		description: "A trail of waymarks from home to the current page."
+	},
 	Badge: {
 		props: z.object({
 			text: z.string(),
@@ -152,6 +169,29 @@ const faces$1 = defineFace({
 		}),
 		description: "One independent box with its label."
 	},
+	FloatButton: {
+		props: z.object({
+			label: z.string().optional(),
+			actions: z.array(z.object({
+				label: z.string(),
+				icon: z.string().optional(),
+				disabled: z.boolean().optional()
+			})).optional(),
+			placement: z.enum([
+				"bottom-end",
+				"bottom-start",
+				"top-end",
+				"top-start"
+			]).optional(),
+			size: z.enum([
+				"sm",
+				"md",
+				"lg"
+			]).optional(),
+			defaultOpen: z.boolean().optional()
+		}),
+		description: "A floating action and its fanned alternatives; actions use curated icon names."
+	},
 	Heading: {
 		props: z.object({
 			text: z.string(),
@@ -310,8 +350,7 @@ const faces$1 = defineFace({
 		description: "A multi-line field for prose-length answers."
 	}
 });
-//#endregion
-//#region src/generative/shared.ts
+// src/generative/shared.ts
 /** Name the entries a family contributes; the identity keeps inference
 * honest at the call site. */
 function defineEntry(entries) {
@@ -328,55 +367,66 @@ const textVoices = {
 function useBound(value, path) {
 	return useBoundProp(value, path);
 }
-const collectionCache = /* @__PURE__ */ new Map();
-function collectionFor(options) {
-	const key = JSON.stringify(options);
-	let collection = collectionCache.get(key);
-	if (!collection) {
-		collection = createListCollection({ items: options });
-		collectionCache.set(key, collection);
-	}
-	return collection;
-}
 /** A labelled field: the label whispers above, the control answers. */
 function labelled(label, control) {
 	return label ? createElement(Stack, { gap: "xs" }, createElement(Typography.Label, null, label), control) : control;
 }
-//#endregion
-//#region src/components/alert/generative.ts
-var generative_exports$17 = /* @__PURE__ */ __exportAll({ default: () => generative_default$17 });
+// src/components/alert/generative.ts
+var generative_exports$20 = /* @__PURE__ */ __exportAll({ default: () => generative_default$20 });
 /** A bordered notice; status picks the pigment. */
-var generative_default$17 = defineEntry({ Alert: {
+var generative_default$20 = defineEntry({ Alert: {
 	...faces$1.Alert,
 	component: ({ props }) => createElement(Alert.Root, { status: props.status ?? "ink" }, createElement(Alert.Icon), createElement(Alert.Body, null, createElement(Alert.Title, null, props.title), props.message != null ? createElement(Alert.Description, null, props.message) : null))
 } });
-//#endregion
-//#region src/components/avatar/generative.ts
-var generative_exports$16 = /* @__PURE__ */ __exportAll({ default: () => generative_default$16 });
+// src/components/avatar/generative.ts
+var generative_exports$19 = /* @__PURE__ */ __exportAll({ default: () => generative_default$19 });
 /** A person's seal: image when given, initials as the fallback. */
-var generative_default$16 = defineEntry({ Avatar: {
+var generative_default$19 = defineEntry({ Avatar: {
 	...faces$1.Avatar,
-	component: ({ props }) => createElement(Avatar.Root, { size: props.size }, [props.src != null ? createElement(Avatar.Image, {
-		src: props.src,
-		alt: props.name
-	}) : null, createElement(Avatar.Fallback, null, initials(props.name))])
+	component: ({ props }) => createElement(Avatar, { ...props })
 } });
-//#endregion
-//#region src/components/badge/generative.ts
-var generative_exports$15 = /* @__PURE__ */ __exportAll({ default: () => generative_default$15 });
+// src/components/badge/generative.ts
+var generative_exports$18 = /* @__PURE__ */ __exportAll({ default: () => generative_default$18 });
 /** A small status seal beside content; reads at a glance. */
-var generative_default$15 = defineEntry({ Badge: {
+var generative_default$18 = defineEntry({ Badge: {
 	...faces$1.Badge,
 	component: ({ props }) => createElement(Badge, {
 		tone: props.tone,
 		variant: props.variant
 	}, props.text)
 } });
-//#endregion
-//#region src/components/button/generative.ts
-var generative_exports$14 = /* @__PURE__ */ __exportAll({ default: () => generative_default$14 });
+// src/components/banner/generative.ts
+var generative_exports$17 = /* @__PURE__ */ __exportAll({ default: () => generative_default$17 });
+/** A full-width notice that speaks once across the page. */
+var generative_default$17 = defineEntry({ Banner: {
+	...faces$1.Banner,
+	component: ({ props }) => createElement(Banner, {
+		...props,
+		dismissible: true
+	})
+} });
+// src/components/breadcrumb/generative.ts
+var generative_exports$16 = /* @__PURE__ */ __exportAll({ default: () => generative_default$16 });
+/** A trail of waymarks from home to the current page. */
+var generative_default$16 = defineEntry({ Breadcrumb: {
+	...faces$1.Breadcrumb,
+	component: ({ props }) => {
+		const labels = props.items ?? [
+			"Home",
+			"Guides",
+			"Ink"
+		];
+		const items = labels.map((label, index) => index === labels.length - 1 ? { label } : {
+			label,
+			href: `#${slug(label)}`
+		});
+		return createElement(Breadcrumb, { items });
+	}
+} });
+// src/components/button/generative.ts
+var generative_exports$15 = /* @__PURE__ */ __exportAll({ default: () => generative_default$15 });
 /** The primary action register: solid ink for the one main action, outline, ghost, or subtle for the rest. */
-var generative_default$14 = defineEntry({ Button: {
+var generative_default$15 = defineEntry({ Button: {
 	...faces$1.Button,
 	component: ({ props, emit }) => createElement(Button, {
 		variant: props.variant ?? "solid",
@@ -386,11 +436,10 @@ var generative_default$14 = defineEntry({ Button: {
 		onClick: () => emit("press")
 	}, props.label)
 } });
-//#endregion
-//#region src/components/card/generative.ts
-var generative_exports$13 = /* @__PURE__ */ __exportAll({ default: () => generative_default$13 });
+// src/components/card/generative.ts
+var generative_exports$14 = /* @__PURE__ */ __exportAll({ default: () => generative_default$14 });
 /** Grouping vessel. Give title and description instead of hand-building a header; children render in the body; footer holds actions. */
-var generative_default$13 = defineEntry({ Card: {
+var generative_default$14 = defineEntry({ Card: {
 	...faces$1.Card,
 	component: ({ props, children, slots }) => {
 		const header = slots?.header ?? null;
@@ -398,11 +447,10 @@ var generative_default$13 = defineEntry({ Card: {
 		return createElement(Card.Root, null, header ? createElement(Card.Header, null, header) : props.title != null || props.description != null ? createElement(Card.Header, null, props.title != null ? createElement(Card.Title, null, props.title) : null, props.description != null ? createElement(Card.Description, null, props.description) : null) : null, createElement(Card.Content, null, children), footer ? createElement(Card.Footer, null, footer) : null);
 	}
 } });
-//#endregion
-//#region src/components/checkbox/generative.ts
-var generative_exports$12 = /* @__PURE__ */ __exportAll({ default: () => generative_default$12 });
+// src/components/checkbox/generative.ts
+var generative_exports$13 = /* @__PURE__ */ __exportAll({ default: () => generative_default$13 });
 /** One independent box with its label. */
-var generative_default$12 = defineEntry({ Checkbox: {
+var generative_default$13 = defineEntry({ Checkbox: {
 	...faces$1.Checkbox,
 	component: ({ props }) => {
 		const mark = iconNode("check");
@@ -416,8 +464,24 @@ var generative_default$12 = defineEntry({ Checkbox: {
 		]);
 	}
 } });
-//#endregion
-//#region src/components/input/generative.ts
+// src/components/float-button/generative.ts
+var generative_exports$12 = /* @__PURE__ */ __exportAll({ default: () => generative_default$12 });
+/** A floating action cluster; named actions fan out from one corner. */
+var generative_default$12 = defineEntry({ FloatButton: {
+	...faces$1.FloatButton,
+	component: ({ props }) => {
+		const actions = Array.isArray(props.actions) ? props.actions : [{ label: "Edit" }];
+		return createElement(FloatButton, {
+			...props,
+			actions: actions.map((action) => ({
+				...action,
+				icon: action.icon ?? "pencil"
+			})),
+			defaultOpen: true
+		});
+	}
+} });
+// src/components/input/generative.ts
 var generative_exports$11 = /* @__PURE__ */ __exportAll({ default: () => generative_default$11 });
 /** A single-line field; rely on border, surface and the focus halo. */
 var generative_default$11 = defineEntry({ Input: {
@@ -433,8 +497,7 @@ var generative_default$11 = defineEntry({ Input: {
 		}));
 	}
 } });
-//#endregion
-//#region src/components/progress/generative.ts
+// src/components/progress/generative.ts
 var generative_exports$10 = /* @__PURE__ */ __exportAll({ default: () => generative_default$10 });
 /** A working track that fills toward done. */
 var generative_default$10 = defineEntry({ Progress: {
@@ -444,8 +507,7 @@ var generative_default$10 = defineEntry({ Progress: {
 		max: props.max
 	}, props.label != null ? createElement(Progress.Label, null, props.label) : null, createElement(Progress.Track, null, createElement(Progress.Range)))
 } });
-//#endregion
-//#region src/components/radio-group/generative.ts
+// src/components/radio-group/generative.ts
 var generative_exports$9 = /* @__PURE__ */ __exportAll({ default: () => generative_default$9 });
 /** Several boxes where exactly one may hold. */
 var generative_default$9 = defineEntry({ RadioGroup: {
@@ -462,41 +524,25 @@ var generative_default$9 = defineEntry({ RadioGroup: {
 		}, createElement(RadioGroup.ItemControl), createElement(RadioGroup.ItemText, null, value), createElement(RadioGroup.ItemHiddenInput))))));
 	}
 } });
-//#endregion
-//#region src/components/select/generative.tsx
+// src/components/select/generative.tsx
 var generative_exports$8 = /* @__PURE__ */ __exportAll({ default: () => generative_default$8 });
 /** A choice field that opens a ruled list; options carry label and value. */
 var generative_default$8 = defineEntry({ Select: {
 	...faces$1.Select,
 	component: ({ props, bindings }) => {
 		const [value, setValue] = useBound(props.value, bindings?.value);
-		const selectedValue = props.multiple ? Array.isArray(value) ? value : value ? [value] : void 0 : typeof value === "string" ? [value] : void 0;
-		const collection = collectionFor(props.options);
-		return labelled(props.label, /* @__PURE__ */ jsxs(Select.Root, {
-			collection,
-			value: selectedValue,
-			disabled: props.disabled,
+		return /* @__PURE__ */ jsx(Select, {
+			label: props.label,
+			placeholder: props.placeholder,
+			options: props.options,
 			multiple: props.multiple,
-			onValueChange: (details) => setValue(props.multiple ? details.value : details.value[0] ?? ""),
-			children: [
-				/* @__PURE__ */ jsxs(Select.Control, { children: [/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.ValueText, { placeholder: props.placeholder }) }), /* @__PURE__ */ jsx(Select.Indicator, { children: iconNode("chevrons-up-down", {
-					width: 14,
-					height: 14
-				}) })] }),
-				/* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.ItemGroup, { children: props.options.map((option) => /* @__PURE__ */ jsxs(Select.Item, {
-					item: option,
-					children: [/* @__PURE__ */ jsx(Select.ItemText, { children: option.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: iconNode("check", {
-						width: 14,
-						height: 14
-					}) })]
-				}, option.value)) }) }) }),
-				/* @__PURE__ */ jsx(Select.HiddenSelect, {})
-			]
-		}));
+			disabled: props.disabled,
+			value: props.multiple ? Array.isArray(value) ? value : value ? [value] : void 0 : Array.isArray(value) ? value.at(0) ?? "" : value,
+			onValueChange: setValue
+		});
 	}
 } });
-//#endregion
-//#region src/components/separator/generative.ts
+// src/components/separator/generative.ts
 var generative_exports$7 = /* @__PURE__ */ __exportAll({ default: () => generative_default$7 });
 /** Hairline divider between sections. */
 var generative_default$7 = defineEntry({ Separator: {
@@ -506,8 +552,7 @@ var generative_default$7 = defineEntry({ Separator: {
 		decorative: true
 	})
 } });
-//#endregion
-//#region src/components/slider/generative.ts
+// src/components/slider/generative.ts
 var generative_exports$6 = /* @__PURE__ */ __exportAll({ default: () => generative_default$6 });
 /** A ruled track the hand slides between bounds. */
 var generative_default$6 = defineEntry({ Slider: {
@@ -522,8 +567,7 @@ var generative_default$6 = defineEntry({ Slider: {
 		key: 0
 	})])]))
 } });
-//#endregion
-//#region src/components/spinner/generative.ts
+// src/components/spinner/generative.ts
 var generative_exports$5 = /* @__PURE__ */ __exportAll({ default: () => generative_default$5 });
 /** A quiet wheel for work still settling. */
 var generative_default$5 = defineEntry({ Spinner: {
@@ -533,8 +577,7 @@ var generative_default$5 = defineEntry({ Spinner: {
 		"aria-label": props.label
 	})
 } });
-//#endregion
-//#region src/components/stack/generative.ts
+// src/components/stack/generative.ts
 var generative_exports$4 = /* @__PURE__ */ __exportAll({ default: () => generative_default$4 });
 /** Flex container for layout. direction column stacks vertically, row lays side by side. gap is a named spacing step. */
 var generative_default$4 = defineEntry({ Stack: {
@@ -547,8 +590,7 @@ var generative_default$4 = defineEntry({ Stack: {
 		wrap: props.wrap
 	}, children)
 } });
-//#endregion
-//#region src/components/stat/generative.ts
+// src/components/stat/generative.ts
 var generative_exports$3 = /* @__PURE__ */ __exportAll({ default: () => generative_default$3 });
 /** One loud figure with its quiet label and an optional delta. */
 var generative_default$3 = defineEntry({ Stat: {
@@ -559,8 +601,7 @@ var generative_default$3 = defineEntry({ Stat: {
 		props.change != null ? createElement(Stat.Delta, { direction: props.direction ?? "flat" }, props.change) : null
 	])
 } });
-//#endregion
-//#region src/components/switch/generative.ts
+// src/components/switch/generative.ts
 var generative_exports$2 = /* @__PURE__ */ __exportAll({ default: () => generative_default$2 });
 /** An instant on/off; label names what it switches. */
 var generative_default$2 = defineEntry({ Switch: {
@@ -578,8 +619,7 @@ var generative_default$2 = defineEntry({ Switch: {
 		]);
 	}
 } });
-//#endregion
-//#region src/components/textarea/generative.ts
+// src/components/textarea/generative.ts
 var generative_exports$1 = /* @__PURE__ */ __exportAll({ default: () => generative_default$1 });
 /** A multi-line field for prose-length answers. */
 var generative_default$1 = defineEntry({ Textarea: {
@@ -595,8 +635,7 @@ var generative_default$1 = defineEntry({ Textarea: {
 		}));
 	}
 } });
-//#endregion
-//#region src/components/typography/generative.ts
+// src/components/typography/generative.ts
 var generative_exports = /* @__PURE__ */ __exportAll({ default: () => generative_default });
 /** Section heading. One per view at level 1; do not skip levels. */
 var generative_default = defineEntry({
@@ -612,19 +651,21 @@ var generative_default = defineEntry({
 		}
 	}
 });
-//#endregion
-//#region src/generative/index.ts
+// src/generative/index.ts
 /** Every family writes its own generative face beside the component —
 * `components/<family>/generative.ts` — and this module is where they
 * meet: one glob picks the faces up, so a family that lands in the
 * package is in the vocabulary without anyone editing this file. */
 const modules = /* #__PURE__ */ Object.assign({
-	"../components/alert/generative.ts": generative_exports$17,
-	"../components/avatar/generative.ts": generative_exports$16,
-	"../components/badge/generative.ts": generative_exports$15,
-	"../components/button/generative.ts": generative_exports$14,
-	"../components/card/generative.ts": generative_exports$13,
-	"../components/checkbox/generative.ts": generative_exports$12,
+	"../components/alert/generative.ts": generative_exports$20,
+	"../components/avatar/generative.ts": generative_exports$19,
+	"../components/badge/generative.ts": generative_exports$18,
+	"../components/banner/generative.ts": generative_exports$17,
+	"../components/breadcrumb/generative.ts": generative_exports$16,
+	"../components/button/generative.ts": generative_exports$15,
+	"../components/card/generative.ts": generative_exports$14,
+	"../components/checkbox/generative.ts": generative_exports$13,
+	"../components/float-button/generative.ts": generative_exports$12,
 	"../components/input/generative.ts": generative_exports$11,
 	"../components/progress/generative.ts": generative_exports$10,
 	"../components/radio-group/generative.ts": generative_exports$9,
@@ -666,5 +707,4 @@ const { registry } = defineRegistry(catalog, {
 * several names - Layout plus its parts, Bento plus its cell - and the
 * palette groups by provenance, never by guessing from the name. */
 const faceFamilies = Object.fromEntries(Object.entries(entries).map(([name, entry]) => [name, entry._from]));
-//#endregion
 export { catalog, faceFamilies, registry };

package/dist/{icon-Cri0-7-x.mjs → icon-C9udWCyz.mjs}

@@ -1,6 +1,6 @@
 import { getIcon } from "@bysages/core/icons";
 import { jsx } from "react/jsx-runtime";
-//#region src/internal/icon.tsx
+// src/internal/icon.tsx
 /** Render a curated registry icon as a bare svg element — the components
 * own default icons. No span shell: the part rules size the svg directly.
 * Extra body appends after the icon's own body, for composed marks. */
@@ -34,5 +34,4 @@ function iconHtml(name, attrs = {}, extraBody = "") {
 	};
 	return `<svg${Object.entries(attributes).map(([key, value]) => ` ${key}="${value}"`).join("")}>${icon.body + extraBody}</svg>`;
 }
-//#endregion
 export { iconHtml as n, iconNode as r, iconBody as t };

package/dist/{id-C37UYLwJ.mjs → id-Ctic_3o8.mjs}

@@ -1,5 +1,5 @@
 import { useId } from "react";
-//#region src/internal/id.ts
+// src/internal/id.ts
 /** Zag composes owned-part ids with separators, so React's generated id
 * is narrowed to characters that survive both markup and selectors. */
 const UNSAFE_ID_CHARACTERS = /[^a-zA-Z0-9_-]/g;
@@ -9,5 +9,4 @@ function useElementId(scope, props = {}) {
 	const explicit = props.id;
 	return typeof explicit === "string" && explicit ? explicit : `bs-${scope}-${generated.replace(UNSAFE_ID_CHARACTERS, "-")}`;
 }
-//#endregion
 export { useElementId as t };

package/dist/{image-viewer-D4FuYrk6.mjs → image-viewer-BYiXpi1X.mjs}

@@ -1,15 +1,16 @@
-import { r as iconNode } from "./icon-Cri0-7-x.mjs";
-import { t as useElementId } from "./id-C37UYLwJ.mjs";
-import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
+import { r as iconNode } from "./icon-C9udWCyz.mjs";
+import { t as useElementId } from "./id-Ctic_3o8.mjs";
+import { n as useComponentMessages } from "./messages-B6n0lVyt.mjs";
 import { Button } from "./components/button/index.mjs";
 import { ButtonGroup } from "./components/button-group/index.mjs";
 import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
+import { createImageViewerGestures } from "@bysages/core";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Portal } from "@ark-ui/react/portal";
 import { Dialog } from "@ark-ui/react/dialog";
-//#region src/components/image-viewer/preview.tsx
+// src/components/image-viewer/preview.tsx
 /** The default doorway is the curated preview icon; custom content keeps
 * that icon as its hover and focus affordance. */
 function ImageViewerPreview({ label, children, "data-part": dataPart, ...rest }) {
@@ -36,10 +37,7 @@ function ImageViewerPreview({ label, children, "data-part": dataPart, ...rest })
 		})]
 	});
 }
-//#endregion
-//#region src/components/image-viewer/index.tsx
-const MIN_SCALE = .5;
-const MAX_SCALE = 3;
+// src/components/image-viewer/index.tsx
 const SCALE_STEP = .25;
 const TOOL_ICONS = {
 	zoomIn: "zoom-in",
@@ -52,25 +50,23 @@ function ImageViewerImpl({ src, alt = "", open, zoomable = true, width, height,
 	const hostId = useElementId("image-viewer", { id });
 	const messages = useComponentMessages();
 	const [localOpen, setLocalOpen] = useState(false);
-	const [scale, setScale] = useState(1);
-	const [rotation, setRotation] = useState(0);
+	const viewportRef = useRef(null);
+	const gesturesRef = useRef(null);
 	const isOpen = open ?? localOpen;
 	const setOpen = (value) => {
 		if (open === void 0) setLocalOpen(value);
 		onOpenChange?.(value);
 	};
 	useEffect(() => {
-		if (isOpen) {
-			setScale(1);
-			setRotation(0);
-		}
-	}, [isOpen]);
-	function zoom(step) {
-		setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
-	}
-	function rotate() {
-		setRotation((current) => (current + 90) % 360);
-	}
+		const node = viewportRef.current;
+		if (!node) return;
+		const gestures = createImageViewerGestures(node, { zoomable });
+		gesturesRef.current = gestures;
+		return () => {
+			gesturesRef.current = null;
+			gestures.stop();
+		};
+	}, [isOpen, zoomable]);
 	function toolButton(label, icon, onClick) {
 		return /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
@@ -119,13 +115,13 @@ function ImageViewerImpl({ src, alt = "", open, zoomable = true, width, height,
 					alt,
 					width,
 					height,
-					style: { "--bs-image-viewer-transform": `scale(${scale}) rotate(${rotation}deg)` }
+					ref: viewportRef
 				}), /* @__PURE__ */ jsx("div", {
 					"data-scope": "image-viewer",
 					"data-part": "toolbar",
 					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-						zoomable ? [toolButton(messages.imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => zoom(SCALE_STEP)), toolButton(messages.imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => zoom(-.25))] : null,
-						toolButton(messages.imageViewer.rotate, TOOL_ICONS.rotate, rotate),
+						zoomable ? [toolButton(messages.imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => gesturesRef.current?.zoomBy(SCALE_STEP)), toolButton(messages.imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => gesturesRef.current?.zoomBy(-.25))] : null,
+						toolButton(messages.imageViewer.rotate, TOOL_ICONS.rotate, () => gesturesRef.current?.rotate()),
 						closeToolButton(messages.imageViewer.close, TOOL_ICONS.close)
 					] })
 				})]
@@ -137,5 +133,4 @@ const ImageViewer = Object.assign(ImageViewerImpl, {
 	...Dialog$1,
 	Preview: ImageViewerPreview
 });
-//#endregion
 export { ImageViewer as t };

package/dist/{index-Eu-Bttta.d.mts → index-BVdkcSSY.d.mts}

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Popover } from "@ark-ui/react/popover";
-//#region src/components/popover/index.d.ts
 type PopoverPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 interface PopoverFacadeProps {
   open?: boolean;
@@ -20,5 +19,4 @@ declare namespace PopoverFacade {
 }
 type PopoverParts = typeof Popover;
 declare const Popover$1: typeof PopoverFacade & PopoverParts;
-//#endregion
 export { PopoverFacadeProps as n, Popover$1 as t };