@stealthscale/component-media 0.2.1 → 0.2.2

package/dist/pages/image-cropper/image-cropper.js

@@ -0,0 +1,760 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { n as recipe } from "../../recipes-CBo6SSP8.js";
+import { D as Image$1, E as Root$1, a as Viewport, c as Image, d as useImageCropper, k as Fallback, l as Handle, o as Selection, r as handles, s as Root, u as Grid } from "../../shared-DH0DrBx7.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, IconButton } from "@stealthscale/component-actions";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { FlipHorizontal2Icon, RotateCcwIcon, RotateCwIcon, Undo2Icon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { Stack } from "@stealthscale/component-layout";
+import { Text } from "@stealthscale/component-typography";
+//#region src/image-cropper/examples/landscape.webp
+var landscape_default = "data:image/webp;base64,UklGRrQrAABXRUJQVlA4IKgrAABQegGdASrAA4ACPm02l0kkIyImIlQpKMANiWVu+F+oS/MuELTefqf7/cN8bvkdZn3PebM+LZ35Xf+T1t5rWUX5h7uz6r8v+rN678O/2D6RdR7uX9n3on1B5q9pfoA/hH+J9gD+AfxD/b/3/+5e+v0p/270B+f36ef+l6gX9f9P/1A//70d37v/Ct+337Sf+v4o/7n///YA///qAf//rv+w3+z8IOtFXz/pu7t19d6e8K8ZOCDxiNyZIn97l5ev/eDf8OiW7/ekj58HsH/dgGUXkrPz3BK0JFyWvESemsREnprERJ6axESemsREnprERJ6axESemsREnprERJ6awch+/PcErQkXJa8RJ6axESemsREnprERJ6axESemsREnprERJ6axESemsREnprERIiYiT01iIl/rxP8lb/Xif5K3+vE/yVv9eJ/krf68T/JW/14n+St/rxP8lb/Xif5K3+vEztliIk9NYiJPTWIiT01iIk9NYiJPTWIiT01iIk9NYiJPTWIiT01iIk9NYiJPTWId2Up6axESemsREnprERJ6axESemsREnprERJ6axESemsREnprERJ6axESemsREnpn2y/zmYNS14iT01iIk9NYiJPTWIiT01iIk9NYiJPTWIiT01iIk9NYiJPTWIiT01g4awT3BK0JFyWvESemsREnprERJ6axESemsREnprERJ6axESemsREnprERJ6axESImIk5CGk6LXiJPTWIiT01iIk9NYiJPTWIiT01iIk9NYiJPTWIiT01iIk9NYiJPTPl8s/PcErQkXJa8RJ6axESemsREnprERJ6axESemsREnprENZVueGOZipvjmYqb45mJtRUXJa8RJ6axESemsREnprERJ6axESemsREnpv//iFz68RHODD/5y2XS26DxscErQkXJa8O7KU9NYiJPTWIiT01iIk9NYiJPTWIiT01iIk9NY/3Ec9rMXLMWyPvJ///+wGuWpGUfHMxUxM8I+wlSxJjz1dsmmIsE/EgLm1lSxJlHsvESemsREnv///0f//LXiJPTWIn/G2NxGEkApbJpiLBPxIC6FmlnHUaLXW4rp5FeAxUm9raW5MrbgB4iU2QKnxqb1DFdW2k3///cE//z8aeCIB8cuRrv4NlfxizvmPSsX+a3pTG4rp5FeAxVrcV0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";
+//#endregion
+//#region src/image-cropper/examples/banner.example.tsx
+var banner_example_exports = /* @__PURE__ */ __exportAll({
+	Banner: () => Banner,
+	source: () => source$4
+});
+function Banner() {
+	const $ = c(14);
+	const { t } = useWords("image-cropper");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			aspectRatio: 3,
+			defaultZoom: 1.5,
+			fixedCropArea: true
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const cropper = useImageCropper(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("bannerLabel");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Image, { src: landscape_default });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("bannerInstructions");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Grid, { axis: "horizontal" });
+		t5 = /* @__PURE__ */ jsx(Grid, { axis: "vertical" });
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		t4 = $[6];
+		t5 = $[7];
+	}
+	let t6;
+	if ($[8] !== t3) {
+		t6 = /* @__PURE__ */ jsxs(Viewport, { children: [t2, /* @__PURE__ */ jsxs(Selection, {
+			"aria-description": t3,
+			children: [t4, t5]
+		})] });
+		$[8] = t3;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== cropper || $[11] !== t1 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t1,
+			cropper,
+			children: t6
+		});
+		$[10] = cropper;
+		$[11] = t1;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ImageCropper } from \"@stealthscale/component-media\";\n\nimport landscape from \"./landscape.webp\";\n\nexport function Banner(): ReactElement {\n  const { t } = useWords(\"image-cropper\");\n  const cropper = ImageCropper.useImageCropper({\n    aspectRatio: 3,\n    defaultZoom: 1.5,\n    fixedCropArea: true,\n  });\n\n  return (\n    <ImageCropper.Root aria-label={t(\"bannerLabel\")} cropper={cropper}>\n      <ImageCropper.Viewport>\n        <ImageCropper.Image src={landscape} />\n        <ImageCropper.Selection aria-description={t(\"bannerInstructions\")}>\n          <ImageCropper.Grid axis=\"horizontal\" />\n          <ImageCropper.Grid axis=\"vertical\" />\n        </ImageCropper.Selection>\n      </ImageCropper.Viewport>\n    </ImageCropper.Root>\n  );\n}\n";
+//#endregion
+//#region src/image-cropper/examples/cover.example.tsx
+var cover_example_exports = /* @__PURE__ */ __exportAll({
+	Cover: () => Cover,
+	source: () => source$3
+});
+function Cover() {
+	const $ = c(49);
+	const { t } = useWords("image-cropper");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { aspectRatio: 1.7777777777777777 };
+		$[0] = t0;
+	} else t0 = $[0];
+	const cropper = useImageCropper(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("coverLabel");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Image, { src: landscape_default });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs(Viewport, { children: [t2, /* @__PURE__ */ jsxs(Selection, { children: [
+			handles.map(_temp$3),
+			/* @__PURE__ */ jsx(Grid, { axis: "horizontal" }),
+			/* @__PURE__ */ jsx(Grid, { axis: "vertical" })
+		] })] });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== cropper || $[6] !== t1) {
+		t4 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t1,
+			cropper,
+			children: t3
+		});
+		$[5] = cropper;
+		$[6] = t1;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("rotateLeft");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== cropper) {
+		t6 = () => {
+			cropper.rotateBy(-90);
+		};
+		$[10] = cropper;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t5 || $[14] !== t6) {
+		t8 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t5,
+			onClick: t6,
+			variant: "outline",
+			children: t7
+		});
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("rotateRight");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== cropper) {
+		t10 = () => {
+			cropper.rotateBy(90);
+		};
+		$[18] = cropper;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(RotateCwIcon, {});
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t10 || $[22] !== t9) {
+		t12 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t9,
+			onClick: t10,
+			variant: "outline",
+			children: t11
+		});
+		$[21] = t10;
+		$[22] = t9;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== t) {
+		t13 = t("flip");
+		$[24] = t;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== cropper) {
+		t14 = () => {
+			cropper.flipHorizontally();
+		};
+		$[26] = cropper;
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(FlipHorizontal2Icon, {});
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== cropper.flip.horizontal || $[30] !== t13 || $[31] !== t14) {
+		t16 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t13,
+			"aria-pressed": cropper.flip.horizontal,
+			onClick: t14,
+			variant: "outline",
+			children: t15
+		});
+		$[29] = cropper.flip.horizontal;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t) {
+		t17 = t("reset");
+		$[33] = t;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== cropper) {
+		t18 = () => {
+			cropper.reset();
+		};
+		$[35] = cropper;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(Undo2Icon, {});
+		$[37] = t19;
+	} else t19 = $[37];
+	let t20;
+	if ($[38] !== t17 || $[39] !== t18) {
+		t20 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t17,
+			onClick: t18,
+			variant: "outline",
+			children: t19
+		});
+		$[38] = t17;
+		$[39] = t18;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== t12 || $[42] !== t16 || $[43] !== t20 || $[44] !== t8) {
+		t21 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "sm",
+			children: [
+				t8,
+				t12,
+				t16,
+				t20
+			]
+		});
+		$[41] = t12;
+		$[42] = t16;
+		$[43] = t20;
+		$[44] = t8;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t21 || $[47] !== t4) {
+		t22 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t4, t21]
+		});
+		$[46] = t21;
+		$[47] = t4;
+		$[48] = t22;
+	} else t22 = $[48];
+	return t22;
+}
+function _temp$3(position) {
+	return /* @__PURE__ */ jsx(Handle, { position }, position);
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { FlipHorizontal2Icon, RotateCcwIcon, RotateCwIcon, Undo2Icon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ImageCropper } from \"@stealthscale/component-media\";\n\nimport landscape from \"./landscape.webp\";\n\nexport function Cover(): ReactElement {\n  const { t } = useWords(\"image-cropper\");\n  const cropper = ImageCropper.useImageCropper({ aspectRatio: 16 / 9 });\n\n  return (\n    <Stack gap=\"md\">\n      <ImageCropper.Root aria-label={t(\"coverLabel\")} cropper={cropper}>\n        <ImageCropper.Viewport>\n          <ImageCropper.Image src={landscape} />\n          <ImageCropper.Selection>\n            {ImageCropper.handles.map((position) => (\n              <ImageCropper.Handle key={position} position={position} />\n            ))}\n            <ImageCropper.Grid axis=\"horizontal\" />\n            <ImageCropper.Grid axis=\"vertical\" />\n          </ImageCropper.Selection>\n        </ImageCropper.Viewport>\n      </ImageCropper.Root>\n      <Stack direction=\"row\" gap=\"sm\">\n        <IconButton\n          aria-label={t(\"rotateLeft\")}\n          onClick={() => {\n            cropper.rotateBy(-90);\n          }}\n          variant=\"outline\"\n        >\n          <RotateCcwIcon />\n        </IconButton>\n        <IconButton\n          aria-label={t(\"rotateRight\")}\n          onClick={() => {\n            cropper.rotateBy(90);\n          }}\n          variant=\"outline\"\n        >\n          <RotateCwIcon />\n        </IconButton>\n        <IconButton\n          aria-label={t(\"flip\")}\n          aria-pressed={cropper.flip.horizontal}\n          onClick={() => {\n            cropper.flipHorizontally();\n          }}\n          variant=\"outline\"\n        >\n          <FlipHorizontal2Icon />\n        </IconButton>\n        <IconButton\n          aria-label={t(\"reset\")}\n          onClick={() => {\n            cropper.reset();\n          }}\n          variant=\"outline\"\n        >\n          <Undo2Icon />\n        </IconButton>\n      </Stack>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/image-cropper/examples/free.example.tsx
+var free_example_exports = /* @__PURE__ */ __exportAll({
+	Free: () => Free,
+	source: () => source$2
+});
+function Free() {
+	const $ = c(22);
+	const { t } = useWords("image-cropper");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			height: 0,
+			width: 0
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [size, setSize] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			maxHeight: 200,
+			minHeight: 80,
+			minWidth: 80,
+			onCropChange: (t2) => {
+				const { crop } = t2;
+				setSize({
+					height: Math.round(crop.height),
+					width: Math.round(crop.width)
+				});
+			}
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const cropper = useImageCropper(t1);
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("label");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Image, { src: landscape_default });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t) {
+		t4 = (crop_0) => t("valueText", {
+			height: crop_0.height,
+			width: crop_0.width
+		});
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = handles.map(_temp$2);
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(Viewport, { children: [t3, /* @__PURE__ */ jsx(Selection, {
+			valueText: t4,
+			children: t5
+		})] });
+		$[8] = t4;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== cropper || $[11] !== t2 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t2,
+			cropper,
+			children: t6
+		});
+		$[10] = cropper;
+		$[11] = t2;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== size || $[15] !== t) {
+		t8 = t("size", size);
+		$[14] = size;
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			size: "sm",
+			tone: "muted",
+			children: t8
+		});
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t7 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t7, t9]
+		});
+		$[19] = t7;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	return t10;
+}
+function _temp$2(position) {
+	return /* @__PURE__ */ jsx(Handle, { position }, position);
+}
+const source$2 = "import { type ReactElement, useState } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ImageCropper } from \"@stealthscale/component-media\";\n\nimport landscape from \"./landscape.webp\";\n\nexport function Free(): ReactElement {\n  const { t } = useWords(\"image-cropper\");\n  const [size, setSize] = useState({ height: 0, width: 0 });\n  const cropper = ImageCropper.useImageCropper({\n    maxHeight: 200,\n    minHeight: 80,\n    minWidth: 80,\n    onCropChange: ({ crop }) => {\n      setSize({ height: Math.round(crop.height), width: Math.round(crop.width) });\n    },\n  });\n\n  return (\n    <Stack gap=\"sm\">\n      <ImageCropper.Root aria-label={t(\"label\")} cropper={cropper}>\n        <ImageCropper.Viewport>\n          <ImageCropper.Image src={landscape} />\n          <ImageCropper.Selection\n            valueText={(crop) => t(\"valueText\", { height: crop.height, width: crop.width })}\n          >\n            {ImageCropper.handles.map((position) => (\n              <ImageCropper.Handle key={position} position={position} />\n            ))}\n          </ImageCropper.Selection>\n        </ImageCropper.Viewport>\n      </ImageCropper.Root>\n      <Text as=\"output\" size=\"sm\" tone=\"muted\">\n        {t(\"size\", size)}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/image-cropper/examples/photo.example.tsx
+var photo_example_exports = /* @__PURE__ */ __exportAll({
+	Photo: () => Photo,
+	source: () => source$1
+});
+function Photo(props) {
+	const $ = c(8);
+	const { t } = useWords("image-cropper");
+	const cropper = useImageCropper();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Image, { src: landscape_default });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs(Viewport, { children: [t1, /* @__PURE__ */ jsxs(Selection, { children: [
+			handles.map(_temp$1),
+			/* @__PURE__ */ jsx(Grid, { axis: "horizontal" }),
+			/* @__PURE__ */ jsx(Grid, { axis: "vertical" })
+		] })] });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== cropper || $[5] !== props || $[6] !== t0) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			cropper,
+			...props,
+			children: t2
+		});
+		$[4] = cropper;
+		$[5] = props;
+		$[6] = t0;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+function _temp$1(position) {
+	return /* @__PURE__ */ jsx(Handle, { position }, position);
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ImageCropper } from \"@stealthscale/component-media\";\n\nimport landscape from \"./landscape.webp\";\n\nexport function Photo(props: Omit<ImageCropper.RootProps, \"cropper\">): ReactElement {\n  const { t } = useWords(\"image-cropper\");\n  const cropper = ImageCropper.useImageCropper();\n\n  return (\n    <ImageCropper.Root aria-label={t(\"label\")} cropper={cropper} {...props}>\n      <ImageCropper.Viewport>\n        <ImageCropper.Image src={landscape} />\n        <ImageCropper.Selection>\n          {ImageCropper.handles.map((position) => (\n            <ImageCropper.Handle key={position} position={position} />\n          ))}\n          <ImageCropper.Grid axis=\"horizontal\" />\n          <ImageCropper.Grid axis=\"vertical\" />\n        </ImageCropper.Selection>\n      </ImageCropper.Viewport>\n    </ImageCropper.Root>\n  );\n}\n";
+//#endregion
+//#region src/image-cropper/examples/profile.example.tsx
+var profile_example_exports = /* @__PURE__ */ __exportAll({
+	Profile: () => Profile,
+	source: () => source
+});
+function Profile() {
+	const $ = c(49);
+	const { t } = useWords("image-cropper");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			aspectRatio: 1,
+			cropShape: "circle"
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const cropper = useImageCropper(t0);
+	const [picture, setPicture] = useState();
+	let t1;
+	if ($[1] !== cropper) {
+		t1 = async () => {
+			const url = await cropper.getCroppedImage({
+				maxSize: {
+					height: 256,
+					width: 256
+				},
+				output: "dataUrl"
+			});
+			if (typeof url === "string") setPicture(url);
+		};
+		$[1] = cropper;
+		$[2] = t1;
+	} else t1 = $[2];
+	const save = t1;
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("profileLabel");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Image, { src: landscape_default });
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(Viewport, { children: [t3, /* @__PURE__ */ jsx(Selection, { children: handles.map(_temp) })] });
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== cropper || $[8] !== t2) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t2,
+			cropper,
+			children: t4
+		});
+		$[7] = cropper;
+		$[8] = t2;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("zoomOut");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== cropper) {
+		t7 = () => {
+			cropper.zoomBy(-.25);
+		};
+		$[12] = cropper;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ZoomOutIcon, {});
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t6 || $[16] !== t7) {
+		t9 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t6,
+			onClick: t7,
+			variant: "outline",
+			children: t8
+		});
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("zoomIn");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== cropper) {
+		t11 = () => {
+			cropper.zoomBy(.25);
+		};
+		$[20] = cropper;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(ZoomInIcon, {});
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t10 || $[24] !== t11) {
+		t13 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t10,
+			onClick: t11,
+			variant: "outline",
+			children: t12
+		});
+		$[23] = t10;
+		$[24] = t11;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== save) {
+		t14 = () => {
+			save();
+		};
+		$[26] = save;
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] !== t) {
+		t15 = t("save");
+		$[28] = t;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t14 || $[31] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Button, {
+			onClick: t14,
+			children: t15
+		});
+		$[30] = t14;
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t) {
+		t17 = t("name");
+		$[33] = t;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx(Fallback, {});
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== picture) {
+		t19 = picture === void 0 ? null : /* @__PURE__ */ jsx(Image$1, { src: picture });
+		$[36] = picture;
+		$[37] = t19;
+	} else t19 = $[37];
+	let t20;
+	if ($[38] !== t17 || $[39] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Root$1, {
+			name: t17,
+			size: "lg",
+			children: [t18, t19]
+		});
+		$[38] = t17;
+		$[39] = t19;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== t13 || $[42] !== t16 || $[43] !== t20 || $[44] !== t9) {
+		t21 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "sm",
+			children: [
+				t9,
+				t13,
+				t16,
+				t20
+			]
+		});
+		$[41] = t13;
+		$[42] = t16;
+		$[43] = t20;
+		$[44] = t9;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t21 || $[47] !== t5) {
+		t22 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t5, t21]
+		});
+		$[46] = t21;
+		$[47] = t5;
+		$[48] = t22;
+	} else t22 = $[48];
+	return t22;
+}
+function _temp(position) {
+	return /* @__PURE__ */ jsx(Handle, { position }, position);
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { ZoomInIcon, ZoomOutIcon } from \"lucide-react\";\n\nimport { Button, IconButton } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar, ImageCropper } from \"@stealthscale/component-media\";\n\nimport landscape from \"./landscape.webp\";\n\nexport function Profile(): ReactElement {\n  const { t } = useWords(\"image-cropper\");\n  const cropper = ImageCropper.useImageCropper({ aspectRatio: 1, cropShape: \"circle\" });\n  const [picture, setPicture] = useState<string>();\n\n  const save = async (): Promise<void> => {\n    const url = await cropper.getCroppedImage({\n      maxSize: { height: 256, width: 256 },\n      output: \"dataUrl\",\n    });\n\n    if (typeof url === \"string\") setPicture(url);\n  };\n\n  return (\n    <Stack gap=\"md\">\n      <ImageCropper.Root aria-label={t(\"profileLabel\")} cropper={cropper}>\n        <ImageCropper.Viewport>\n          <ImageCropper.Image src={landscape} />\n          <ImageCropper.Selection>\n            {ImageCropper.handles.map((position) => (\n              <ImageCropper.Handle key={position} position={position} />\n            ))}\n          </ImageCropper.Selection>\n        </ImageCropper.Viewport>\n      </ImageCropper.Root>\n      <Stack direction=\"row\" gap=\"sm\">\n        <IconButton\n          aria-label={t(\"zoomOut\")}\n          onClick={() => {\n            cropper.zoomBy(-0.25);\n          }}\n          variant=\"outline\"\n        >\n          <ZoomOutIcon />\n        </IconButton>\n        <IconButton\n          aria-label={t(\"zoomIn\")}\n          onClick={() => {\n            cropper.zoomBy(0.25);\n          }}\n          variant=\"outline\"\n        >\n          <ZoomInIcon />\n        </IconButton>\n        <Button\n          onClick={() => {\n            void save();\n          }}\n        >\n          {t(\"save\")}\n        </Button>\n        <Avatar.Root name={t(\"name\")} size=\"lg\">\n          <Avatar.Fallback />\n          {picture === undefined ? null : <Avatar.Image src={picture} />}\n        </Avatar.Root>\n      </Stack>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/image-cropper/image-cropper.specimen.tsx
+/**
+* Catalogue page for the image cropper.
+*
+* @remarks
+*   The hand-written scenes show a crop with every handle, a round profile picture exported into
+*   an avatar, a cover with rotation and flip, a fixed frame the picture pans under, and a free
+*   crop that reports its size. `scenesOf` generates the corner scene from the photo example. Each
+*   cropper renders in a room at its real width, and the picture is a generated file beside the
+*   examples. The words are keys under `image-cropper` in
+*   `locales/en/specimen/image-cropper.json`.
+*/
+/**
+* Hand-written scene for a crop with every handle and the lines of thirds.
+*/
+const photo = {
+	about: "image-cropper.photo.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Photo, {})
+	}),
+	example: photo_example_exports,
+	title: "image-cropper.photo.title"
+};
+/**
+* Hand-written scene for a round crop exported into an avatar.
+*/
+const profile = {
+	about: "image-cropper.profile.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Profile, {})
+	}),
+	example: profile_example_exports,
+	title: "image-cropper.profile.title"
+};
+/**
+* Hand-written scene for a 16:9 crop with rotation, flip and reset.
+*/
+const cover = {
+	about: "image-cropper.cover.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Cover, {})
+	}),
+	example: cover_example_exports,
+	title: "image-cropper.cover.title"
+};
+/**
+* Hand-written scene for a fixed frame the picture pans under.
+*/
+const banner = {
+	about: "image-cropper.banner.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Banner, {})
+	}),
+	example: banner_example_exports,
+	title: "image-cropper.banner.title"
+};
+/**
+* Hand-written scene for a crop of any shape that reports its size.
+*/
+const free = {
+	about: "image-cropper.free.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Free, {})
+	}),
+	example: free_example_exports,
+	title: "image-cropper.free.title"
+};
+var image_cropper_specimen_default = specimen({
+	about: "image-cropper.about",
+	id: "components/media/image-cropper",
+	imports: "import { ImageCropper } from \"@stealthscale/component-media\";",
+	scenes: [
+		photo,
+		profile,
+		cover,
+		banner,
+		free,
+		...scenesOf(recipe, {
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "xs",
+				children: /* @__PURE__ */ jsx(Photo, { ...props })
+			}),
+			example: photo_example_exports,
+			namespace: "image-cropper"
+		})
+	],
+	title: "image-cropper.title"
+});
+//#endregion
+export { banner, cover, image_cropper_specimen_default as default, free, photo, profile };