@vizejs/ui 0.426.3 → 0.427.0

package/dist/image-cropper-D7u1_m61.mjs

@@ -0,0 +1,1201 @@
+import { a as useDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { r as useSizeObserver } from "./measure-runtime-C4qYJp3_.mjs";
+import { normalizeMediaSource } from "./media-source.mjs";
+import { Fragment, computed, createElementBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, shallowRef, unref, useTemplateRef, watch } from "vue";
+//#region src/families/media/image-cropper/image-cropper-context.ts
+const imageCropperContext = createContext("ImageCropper");
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-geometry.ts
+/**
+* Pure geometry for the image cropper.
+*
+* Crop areas live in the rotated image's bounding box, measured in natural
+* image pixels: rotating a 400x200 image by 90 degrees yields 200x400 bounds.
+* The display maps bounds to the viewport with `scale = fitScale * zoom` around
+* a view center that is clamped so zoomed content never exposes empty space.
+*/
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function positive(value, fallback) {
+	return value !== void 0 && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+/** Normalize degrees into `[0, 360)`. Non-finite input normalizes to `0`. */
+function normalizeRotation(degrees) {
+	if (!Number.isFinite(degrees)) return 0;
+	const normalized = (degrees % 360 + 360) % 360;
+	return Object.is(normalized, -0) ? 0 : normalized;
+}
+/** Bounding box of an image rotated by `degrees` around its center. */
+function rotatedBounds(size, degrees) {
+	const rotation = normalizeRotation(degrees);
+	if (rotation % 180 === 0) return {
+		width: size.width,
+		height: size.height
+	};
+	if (rotation % 90 === 0) return {
+		width: size.height,
+		height: size.width
+	};
+	const radians = rotation * Math.PI / 180;
+	const cos = Math.abs(Math.cos(radians));
+	const sin = Math.abs(Math.sin(radians));
+	return {
+		width: size.width * cos + size.height * sin,
+		height: size.width * sin + size.height * cos
+	};
+}
+function limitsOf(bounds, constraints) {
+	const ratio = constraints.aspectRatio !== void 0 && Number.isFinite(constraints.aspectRatio) && constraints.aspectRatio > 0 ? constraints.aspectRatio : void 0;
+	const maxWidth = Math.min(positive(constraints.maxWidth, Infinity), bounds.width);
+	const maxHeight = Math.min(positive(constraints.maxHeight, Infinity), bounds.height);
+	return {
+		maxHeight,
+		maxWidth,
+		minHeight: Math.min(positive(constraints.minHeight, 1), maxHeight),
+		minWidth: Math.min(positive(constraints.minWidth, 1), maxWidth),
+		ratio
+	};
+}
+/** Largest width allowed by every limit, for a locked aspect ratio. */
+function lockedWidthRange(limits, ratio, availWidth, availHeight) {
+	const max = Math.min(limits.maxWidth, availWidth, limits.maxHeight * ratio, availHeight * ratio);
+	return {
+		min: Math.min(Math.max(limits.minWidth, limits.minHeight * ratio), max),
+		max
+	};
+}
+/**
+* Fit a crop inside `bounds`, honoring min/max size and the aspect ratio.
+*
+* Size is clamped first (bounds win over minimums), then the position is
+* clamped so the whole area stays inside the bounds.
+*/
+function clampCrop(crop, bounds, constraints = {}) {
+	const limits = limitsOf(bounds, constraints);
+	let width;
+	let height;
+	if (limits.ratio === void 0) {
+		width = clamp(crop.width, limits.minWidth, limits.maxWidth);
+		height = clamp(crop.height, limits.minHeight, limits.maxHeight);
+	} else {
+		const range = lockedWidthRange(limits, limits.ratio, bounds.width, bounds.height);
+		width = clamp(crop.width, range.min, range.max);
+		height = width / limits.ratio;
+	}
+	return {
+		x: clamp(Number.isFinite(crop.x) ? crop.x : 0, 0, Math.max(0, bounds.width - width)),
+		y: clamp(Number.isFinite(crop.y) ? crop.y : 0, 0, Math.max(0, bounds.height - height)),
+		width,
+		height
+	};
+}
+/**
+* The largest centered crop covering `coverage` of the bounds on its limiting
+* axis, honoring the aspect ratio and size limits.
+*/
+function centeredCrop(bounds, constraints = {}, coverage = 1) {
+	const fraction = clamp(Number.isFinite(coverage) ? coverage : 1, 0, 1);
+	const limits = limitsOf(bounds, constraints);
+	let width = bounds.width * fraction;
+	let height = bounds.height * fraction;
+	if (limits.ratio !== void 0) if (width / height > limits.ratio) width = height * limits.ratio;
+	else height = width / limits.ratio;
+	const sized = clampCrop({
+		x: 0,
+		y: 0,
+		width,
+		height
+	}, bounds, constraints);
+	return {
+		...sized,
+		x: (bounds.width - sized.width) / 2,
+		y: (bounds.height - sized.height) / 2
+	};
+}
+/** Translate a crop by `(dx, dy)` bounds pixels, keeping it inside the bounds. */
+function moveCrop(crop, dx, dy, bounds) {
+	return {
+		...crop,
+		x: clamp(crop.x + dx, 0, Math.max(0, bounds.width - crop.width)),
+		y: clamp(crop.y + dy, 0, Math.max(0, bounds.height - crop.height))
+	};
+}
+/**
+* Resize a crop by dragging one handle by `(dx, dy)` bounds pixels.
+*
+* The opposite edge or corner stays anchored. Edges never cross. With an aspect
+* ratio, corners follow the dominant drag axis and edge handles grow the other
+* axis symmetrically around the crop center, shifting only when a bound is hit.
+*/
+function resizeCrop(crop, handle, dx, dy, bounds, constraints = {}) {
+	const limits = limitsOf(bounds, constraints);
+	const west = handle.includes("w");
+	const east = handle.includes("e");
+	const north = handle.includes("n");
+	const south = handle.includes("s");
+	const left = crop.x;
+	const top = crop.y;
+	const right = crop.x + crop.width;
+	const bottom = crop.y + crop.height;
+	if (limits.ratio === void 0) {
+		let nextLeft = left;
+		let nextRight = right;
+		let nextTop = top;
+		let nextBottom = bottom;
+		if (west) nextLeft = clamp(left + dx, Math.max(0, right - limits.maxWidth), right - limits.minWidth);
+		if (east) nextRight = clamp(right + dx, left + limits.minWidth, Math.min(bounds.width, left + limits.maxWidth));
+		if (north) nextTop = clamp(top + dy, Math.max(0, bottom - limits.maxHeight), bottom - limits.minHeight);
+		if (south) nextBottom = clamp(bottom + dy, top + limits.minHeight, Math.min(bounds.height, top + limits.maxHeight));
+		return {
+			x: nextLeft,
+			y: nextTop,
+			width: nextRight - nextLeft,
+			height: nextBottom - nextTop
+		};
+	}
+	const ratio = limits.ratio;
+	const horizontal = west || east;
+	const vertical = north || south;
+	const growX = west ? -dx : east ? dx : 0;
+	const growY = north ? -dy : south ? dy : 0;
+	if (horizontal && vertical) {
+		const candidate = Math.max(crop.width + growX, (crop.height + growY) * ratio);
+		const range = lockedWidthRange(limits, ratio, west ? right : bounds.width - left, north ? bottom : bounds.height - top);
+		const width = clamp(candidate, range.min, range.max);
+		const height = width / ratio;
+		return {
+			x: west ? right - width : left,
+			y: north ? bottom - height : top,
+			width,
+			height
+		};
+	}
+	if (horizontal) {
+		const range = lockedWidthRange(limits, ratio, west ? right : bounds.width - left, bounds.height);
+		const width = clamp(crop.width + growX, range.min, range.max);
+		const height = width / ratio;
+		const centerY = top + crop.height / 2;
+		return {
+			x: west ? right - width : left,
+			y: clamp(centerY - height / 2, 0, bounds.height - height),
+			width,
+			height
+		};
+	}
+	const availHeight = north ? bottom : bounds.height - top;
+	const range = lockedWidthRange(limits, ratio, bounds.width, availHeight);
+	const width = clamp((crop.height + growY) * ratio, range.min, range.max);
+	const height = width / ratio;
+	return {
+		x: clamp(left + crop.width / 2 - width / 2, 0, bounds.width - width),
+		y: north ? bottom - height : top,
+		width,
+		height
+	};
+}
+/**
+* Re-fit a crop after the bounds change (e.g. a rotation): the crop center keeps
+* its relative position and the result is clamped into the new bounds.
+*/
+function refitCrop(crop, previous, next, constraints = {}) {
+	if (previous.width <= 0 || previous.height <= 0) return centeredCrop(next, constraints);
+	const centerX = (crop.x + crop.width / 2) / previous.width * next.width;
+	const centerY = (crop.y + crop.height / 2) / previous.height * next.height;
+	const sized = clampCrop({
+		x: 0,
+		y: 0,
+		width: crop.width,
+		height: crop.height
+	}, next, constraints);
+	return clampCrop({
+		...sized,
+		x: centerX - sized.width / 2,
+		y: centerY - sized.height / 2
+	}, next, constraints);
+}
+/** Scale that fits the whole bounds inside the viewport (`contain`). `0` when unmeasured. */
+function fitScale(viewport, bounds) {
+	if (viewport.width <= 0 || viewport.height <= 0 || bounds.width <= 0 || bounds.height <= 0) return 0;
+	return Math.min(viewport.width / bounds.width, viewport.height / bounds.height);
+}
+/**
+* Clamp a view center (bounds pixels) so zoomed content covers the viewport.
+* Axes whose content fits the viewport stay centered.
+*/
+function clampViewCenter(center, bounds, viewport, scale) {
+	const axis = (value, extent, visible) => {
+		if (scale <= 0 || extent * scale <= visible || !Number.isFinite(value)) return extent / 2;
+		const half = visible / (2 * scale);
+		return clamp(value, half, extent - half);
+	};
+	return {
+		x: axis(center.x, bounds.width, viewport.width),
+		y: axis(center.y, bounds.height, viewport.height)
+	};
+}
+/**
+* View center after zooming from `scale` to `nextScale` so the bounds point
+* `anchor` stays under the same viewport position.
+*/
+function zoomAroundPoint(center, anchor, scale, nextScale) {
+	if (scale <= 0 || nextScale <= 0) return center;
+	const factor = scale / nextScale;
+	return {
+		x: anchor.x - (anchor.x - center.x) * factor,
+		y: anchor.y - (anchor.y - center.y) * factor
+	};
+}
+/** Map a bounds point to viewport pixels. */
+function toViewport(point, center, viewport, scale) {
+	return {
+		x: (point.x - center.x) * scale + viewport.width / 2,
+		y: (point.y - center.y) * scale + viewport.height / 2
+	};
+}
+/** Map a viewport pixel to bounds pixels. */
+function fromViewport(point, center, viewport, scale) {
+	if (scale <= 0) return center;
+	return {
+		x: (point.x - viewport.width / 2) / scale + center.x,
+		y: (point.y - viewport.height / 2) / scale + center.y
+	};
+}
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-pointer.ts
+/**
+* Track one pointer from `pointerdown` until release. Movement is reported as a
+* total delta from the start position so repeated moves never accumulate
+* rounding error. Pointer capture keeps events flowing when the pointer leaves
+* the element. Returns a function that stops tracking early.
+*/
+function trackPointerDrag(element, start, callbacks) {
+	const pointerId = start.pointerId;
+	const originX = start.clientX;
+	const originY = start.clientY;
+	try {
+		element.setPointerCapture(pointerId);
+	} catch {}
+	const onMove = (event) => {
+		if (!(event instanceof PointerEvent) || event.pointerId !== pointerId) return;
+		event.preventDefault();
+		callbacks.onMove(event.clientX - originX, event.clientY - originY);
+	};
+	const finish = (cancelled) => (event) => {
+		if (!(event instanceof PointerEvent) || event.pointerId !== pointerId) return;
+		stop();
+		callbacks.onEnd(cancelled);
+	};
+	const onUp = finish(false);
+	const onCancel = finish(true);
+	function stop() {
+		element.removeEventListener("pointermove", onMove);
+		element.removeEventListener("pointerup", onUp);
+		element.removeEventListener("pointercancel", onCancel);
+	}
+	element.addEventListener("pointermove", onMove);
+	element.addEventListener("pointerup", onUp);
+	element.addEventListener("pointercancel", onCancel);
+	return stop;
+}
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-area.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = [
+	"tabindex",
+	"aria-roledescription",
+	"aria-label",
+	"aria-disabled",
+	"data-interaction"
+];
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-area.vue
+var image_cropper_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "image-cropper-area",
+	setup(__props, { expose: __expose }) {
+		const context = imageCropperContext.use();
+		const element = useTemplateRef("element");
+		let stopDrag = null;
+		function px(value) {
+			return `${Math.round(value * 100) / 100}px`;
+		}
+		const label = computed(() => context.crop.value === null ? void 0 : context.messages.value.area(context.crop.value));
+		const areaStyle = computed(() => {
+			const crop = context.crop.value;
+			if (!context.ready.value || crop === null) return void 0;
+			const scale = context.scale.value;
+			const origin = toViewport(crop, context.center.value, context.viewportSize.value, scale);
+			return {
+				"--vize-ui-image-cropper-crop-height": String(crop.height),
+				"--vize-ui-image-cropper-crop-width": String(crop.width),
+				"--vize-ui-image-cropper-crop-x": String(crop.x),
+				"--vize-ui-image-cropper-crop-y": String(crop.y),
+				boxSizing: "border-box",
+				height: px(crop.height * scale),
+				left: px(origin.x),
+				position: "absolute",
+				top: px(origin.y),
+				width: px(crop.width * scale)
+			};
+		});
+		function onPointerDown(event) {
+			const start = context.crop.value;
+			if (start === null || context.disabled.value || element.value === null) return;
+			if (event.pointerType === "mouse" && event.button !== 0) return;
+			if (event.target instanceof Element && event.target.closest("[data-vize-ui=\"image-cropper-handle\"]")) return;
+			event.preventDefault();
+			element.value.focus({ preventScroll: true });
+			const scale = context.scale.value;
+			context.setInteraction("moving");
+			stopDrag?.();
+			stopDrag = trackPointerDrag(element.value, event, {
+				onMove(dx, dy) {
+					if (scale > 0) context.moveFrom(start, dx / scale, dy / scale, "move");
+				},
+				onEnd() {
+					stopDrag = null;
+					context.setInteraction("idle");
+					context.commit();
+				}
+			});
+		}
+		const resizeKeys = {
+			ArrowDown: [
+				"s",
+				0,
+				1
+			],
+			ArrowLeft: [
+				"e",
+				-1,
+				0
+			],
+			ArrowRight: [
+				"e",
+				1,
+				0
+			],
+			ArrowUp: [
+				"s",
+				0,
+				-1
+			]
+		};
+		const moveKeys = {
+			ArrowDown: [0, 1],
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1]
+		};
+		function onKeydown(event) {
+			const crop = context.crop.value;
+			if (crop === null || context.disabled.value || event.target !== element.value) return;
+			const step = context.nudgeStep.value * (event.shiftKey ? 10 : 1);
+			const resize = resizeKeys[event.key];
+			const move = moveKeys[event.key];
+			const anchor = {
+				x: crop.x + crop.width / 2,
+				y: crop.y + crop.height / 2
+			};
+			let handled = true;
+			if ((event.altKey || event.ctrlKey || event.metaKey) && resize !== void 0) context.resizeFrom(crop, resize[0], resize[1] * step, resize[2] * step, "keyboard");
+			else if (move !== void 0) context.moveFrom(crop, move[0] * step, move[1] * step, "keyboard");
+			else if (event.key === "+" || event.key === "=") context.zoomBy(1, anchor);
+			else if (event.key === "-" || event.key === "_") context.zoomBy(-1, anchor);
+			else if (event.key === "]") context.rotateBy(1);
+			else if (event.key === "[") context.rotateBy(-1);
+			else handled = false;
+			if (!handled) return;
+			event.preventDefault();
+			context.commit();
+		}
+		onMounted(() => {
+			element.value?.addEventListener("pointerdown", onPointerDown);
+			element.value?.addEventListener("keydown", onKeydown);
+		});
+		onBeforeUnmount(() => {
+			stopDrag?.();
+			element.value?.removeEventListener("pointerdown", onPointerDown);
+			element.value?.removeEventListener("keydown", onKeydown);
+		});
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				role: "group",
+				tabindex: unref(context).disabled.value ? -1 : 0,
+				"aria-roledescription": unref(context).messages.value.areaRoleDescription,
+				"aria-label": label.value,
+				"aria-disabled": unref(context).disabled.value ? "true" : void 0,
+				"data-vize-ui": "image-cropper-area",
+				part: "area",
+				"data-interaction": unref(context).slotState.value.interaction,
+				style: normalizeStyle(areaStyle.value)
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 12, _hoisted_1$5);
+		};
+	}
+}), [["__scopeId", "data-v-ce6bc7ef"]]);
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-grid.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = ["data-interaction"];
+const _hoisted_2 = ["data-axis"];
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-grid.vue
+var image_cropper_grid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "image-cropper-grid",
+	props: { divisions: {
+		type: Number,
+		required: false,
+		default: 3
+	} },
+	setup(__props, { expose: __expose }) {
+		const context = imageCropperContext.use();
+		const element = useTemplateRef("element");
+		const lines = computed(() => {
+			const count = Math.max(1, Math.floor(Number.isFinite(__props.divisions) ? __props.divisions : 3));
+			const result = [];
+			for (const axis of ["x", "y"]) for (let index = 1; index < count; index += 1) {
+				const offset = `${Math.round(index / count * 1e5) / 1e3}%`;
+				result.push({
+					axis,
+					key: `${axis}-${index}`,
+					style: { "--vize-ui-image-cropper-grid-offset": offset }
+				});
+			}
+			return result;
+		});
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"aria-hidden": "true",
+				"data-vize-ui": "image-cropper-grid",
+				part: "grid",
+				"data-interaction": unref(context).slotState.value.interaction
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (line) => {
+				return openBlock(), createElementBlock("span", {
+					key: line.key,
+					"data-vize-ui": "image-cropper-grid-line",
+					"data-axis": line.axis,
+					style: normalizeStyle(line.style)
+				}, null, 12, _hoisted_2);
+			}), 128)), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 8, _hoisted_1$4);
+		};
+	}
+}), [["__scopeId", "data-v-14f30296"]]);
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-handle.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = ["data-position", "data-disabled"];
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-handle.vue
+var image_cropper_handle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "image-cropper-handle",
+	props: { position: {
+		type: String,
+		required: true
+	} },
+	setup(__props, { expose: __expose }) {
+		const context = imageCropperContext.use();
+		const element = useTemplateRef("element");
+		let stopDrag = null;
+		function onPointerDown(event) {
+			const start = context.crop.value;
+			if (start === null || context.disabled.value || element.value === null) return;
+			if (event.pointerType === "mouse" && event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const scale = context.scale.value;
+			context.setInteraction("resizing");
+			stopDrag?.();
+			stopDrag = trackPointerDrag(element.value, event, {
+				onMove(dx, dy) {
+					if (scale > 0) context.resizeFrom(start, __props.position, dx / scale, dy / scale, "resize");
+				},
+				onEnd() {
+					stopDrag = null;
+					context.setInteraction("idle");
+					context.commit();
+				}
+			});
+		}
+		onMounted(() => element.value?.addEventListener("pointerdown", onPointerDown));
+		onBeforeUnmount(() => {
+			stopDrag?.();
+			element.value?.removeEventListener("pointerdown", onPointerDown);
+		});
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"aria-hidden": "true",
+				"data-vize-ui": "image-cropper-handle",
+				part: "handle",
+				"data-position": __props.position,
+				"data-disabled": unref(context).disabled.value ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-620b0643"]]);
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-image.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["alt"];
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-image.vue
+var image_cropper_image_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "image-cropper-image",
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+		allowInsecure: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		alt: {
+			type: String,
+			required: true
+		},
+		crossOrigin: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		referrerPolicy: {
+			type: null,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["load", "error"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = imageCropperContext.use();
+		const element = useTemplateRef("element");
+		const imageAttributes = computed(() => ({
+			crossorigin: __props.crossOrigin,
+			referrerpolicy: __props.referrerPolicy,
+			src: safeSource(__props.src)
+		}));
+		function safeSource(source) {
+			try {
+				return normalizeMediaSource(source, {
+					kind: "image",
+					allowInsecure: __props.allowInsecure
+				});
+			} catch {
+				return;
+			}
+		}
+		function px(value) {
+			return `${Math.round(value * 100) / 100}px`;
+		}
+		const imageStyle = computed(() => {
+			const natural = context.naturalSize.value;
+			const bounds = context.bounds.value;
+			if (!context.ready.value || natural === null || bounds === null) return void 0;
+			const scale = context.scale.value;
+			const middle = toViewport({
+				x: bounds.width / 2,
+				y: bounds.height / 2
+			}, context.center.value, context.viewportSize.value, scale);
+			const width = natural.width * scale;
+			const height = natural.height * scale;
+			return {
+				height: px(height),
+				left: px(middle.x - width / 2),
+				maxWidth: "none",
+				pointerEvents: "none",
+				position: "absolute",
+				top: px(middle.y - height / 2),
+				transform: `rotate(${context.rotation.value}deg)`,
+				transformOrigin: "center",
+				userSelect: "none",
+				width: px(width)
+			};
+		});
+		function readSize(nativeEvent) {
+			if (element.value === null || element.value.naturalWidth <= 0) return;
+			context.setNaturalSize({
+				width: element.value.naturalWidth,
+				height: element.value.naturalHeight
+			});
+			emit("load", nativeEvent);
+		}
+		function onLoad(event) {
+			readSize(event);
+		}
+		function onError(event) {
+			emit("error", event);
+		}
+		onMounted(() => {
+			if (element.value?.complete === true) readSize(null);
+		});
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("img", mergeProps({
+				ref_key: "element",
+				ref: element,
+				alt: __props.alt
+			}, imageAttributes.value, {
+				draggable: "false",
+				"data-vize-ui": "image-cropper-image",
+				part: "image",
+				style: imageStyle.value,
+				onLoad,
+				onError
+			}), null, 16, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-e1bfa008"]]);
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-canvas.ts
+/** Typed error thrown by {@link cropImage}. `code` is stable across releases. */
+var ImageCropperError = class extends Error {
+	/** Stable diagnostic code. */
+	code;
+	constructor(code, message) {
+		super(`${code}: ${message}`);
+		this.name = "ImageCropperError";
+		this.code = code;
+	}
+};
+function loadImage(source, crossOrigin, allowInsecure) {
+	let safeSource;
+	if (typeof source === "string") try {
+		safeSource = normalizeMediaSource(source, {
+			kind: "image",
+			allowInsecure: allowInsecure === true
+		});
+	} catch {
+		return Promise.reject(new ImageCropperError("VIZE_UI_IMAGE_CROPPER_IMAGE_LOAD", "the image source is invalid"));
+	}
+	const image = typeof source === "string" ? document.createElement("img") : source;
+	if (typeof source !== "string" && image.complete) return image.naturalWidth > 0 ? Promise.resolve(image) : Promise.reject(new ImageCropperError("VIZE_UI_IMAGE_CROPPER_IMAGE_LOAD", "the image failed to load"));
+	return new Promise((resolve, reject) => {
+		const cleanup = () => {
+			image.removeEventListener("load", onLoad);
+			image.removeEventListener("error", onError);
+		};
+		const onLoad = () => {
+			cleanup();
+			resolve(image);
+		};
+		const onError = () => {
+			cleanup();
+			reject(new ImageCropperError("VIZE_UI_IMAGE_CROPPER_IMAGE_LOAD", "the image failed to load"));
+		};
+		image.addEventListener("load", onLoad);
+		image.addEventListener("error", onError);
+		if (safeSource !== void 0) {
+			image.crossOrigin = crossOrigin ?? "anonymous";
+			image.src = safeSource;
+		}
+	});
+}
+function encode(canvas, output, options) {
+	const type = options.type ?? "image/png";
+	if (output === "data-url") return Promise.resolve(canvas.toDataURL(type, options.quality));
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (blob === null) reject(new ImageCropperError("VIZE_UI_IMAGE_CROPPER_ENCODE_FAILED", `could not encode ${type}`));
+			else resolve(blob);
+		}, type, options.quality);
+	});
+}
+async function render(source, crop, options, output) {
+	if (typeof document === "undefined") throw new ImageCropperError("VIZE_UI_IMAGE_CROPPER_CANVAS_UNAVAILABLE", "cropping requires a browser canvas");
+	const x = Math.round(crop.x);
+	const y = Math.round(crop.y);
+	const width = Math.round(crop.width);
+	const height = Math.round(crop.height);
+	if (!(width >= 1 && height >= 1)) throw new ImageCropperError("VIZE_UI_IMAGE_CROPPER_EMPTY_CROP", "the crop area is empty");
+	const image = await loadImage(source, options.crossOrigin, options.allowInsecure);
+	const scale = Math.min(1, options.maxWidth !== void 0 && options.maxWidth > 0 ? options.maxWidth / width : 1, options.maxHeight !== void 0 && options.maxHeight > 0 ? options.maxHeight / height : 1);
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.max(1, Math.round(width * scale));
+	canvas.height = Math.max(1, Math.round(height * scale));
+	const context = canvas.getContext("2d");
+	if (context === null) throw new ImageCropperError("VIZE_UI_IMAGE_CROPPER_CANVAS_UNAVAILABLE", "the canvas 2D context is unavailable");
+	const rotation = normalizeRotation(options.rotation ?? 0);
+	const natural = {
+		width: image.naturalWidth,
+		height: image.naturalHeight
+	};
+	const bounds = rotatedBounds(natural, rotation);
+	context.scale(scale, scale);
+	context.translate(-x + bounds.width / 2, -y + bounds.height / 2);
+	context.rotate(rotation * Math.PI / 180);
+	context.drawImage(image, -natural.width / 2, -natural.height / 2);
+	return await encode(canvas, output, options);
+}
+async function cropImage(source, crop, options = {}) {
+	return await render(source, crop, options, options.output ?? "blob");
+}
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"id",
+	"data-ready",
+	"data-interaction",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-root.vue
+var image_cropper_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "image-cropper-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		zoom: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		defaultZoom: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		rotation: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		defaultRotation: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		aspectRatio: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		minWidth: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		minHeight: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		maxWidth: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		maxHeight: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		minZoom: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		maxZoom: {
+			type: Number,
+			required: false,
+			default: 5
+		},
+		zoomStep: {
+			type: Number,
+			required: false,
+			default: .1
+		},
+		rotationStep: {
+			type: Number,
+			required: false,
+			default: 90
+		},
+		nudgeStep: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		autoCropArea: {
+			type: Number,
+			required: false,
+			default: .8
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		messages: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:zoom",
+		"update:rotation",
+		"change",
+		"cropEnd"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const defaultMessages = {
+			area: (crop) => `Crop area ${Math.round(crop.width)} by ${Math.round(crop.height)} pixels at ${Math.round(crop.x)}, ${Math.round(crop.y)}`,
+			areaRoleDescription: "crop area"
+		};
+		const element = useTemplateRef("element");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "image-cropper"
+		});
+		const naturalSize = shallowRef(null);
+		const viewportSize = shallowRef({
+			width: 0,
+			height: 0
+		});
+		const interaction = shallowRef("idle");
+		const viewCenter = shallowRef(null);
+		const cropState = useControllableState({
+			value: () => __props.modelValue,
+			defaultValue: () => __props.defaultValue ?? null
+		});
+		const zoomState = useControllableState({
+			value: () => __props.zoom,
+			defaultValue: () => __props.defaultZoom
+		});
+		const rotationState = useControllableState({
+			value: () => __props.rotation,
+			defaultValue: () => __props.defaultRotation
+		});
+		const constraints = computed(() => ({
+			...__props.aspectRatio === void 0 ? {} : { aspectRatio: __props.aspectRatio },
+			...__props.maxHeight === void 0 ? {} : { maxHeight: __props.maxHeight },
+			...__props.maxWidth === void 0 ? {} : { maxWidth: __props.maxWidth },
+			...__props.minHeight === void 0 ? {} : { minHeight: __props.minHeight },
+			...__props.minWidth === void 0 ? {} : { minWidth: __props.minWidth }
+		}));
+		const zoomRange = computed(() => {
+			const low = Number.isFinite(__props.minZoom) && __props.minZoom > 0 ? __props.minZoom : 1;
+			return {
+				low,
+				high: Math.max(low, Number.isFinite(__props.maxZoom) ? __props.maxZoom : low)
+			};
+		});
+		const zoomValue = computed(() => clampZoom(zoomState.value.value));
+		const rotationValue = computed(() => normalizeRotation(rotationState.value.value));
+		const bounds = computed(() => naturalSize.value === null ? null : rotatedBounds(naturalSize.value, rotationValue.value));
+		const crop = computed(() => {
+			if (bounds.value === null) return null;
+			return clampCrop(cropState.value.value ?? centeredCrop(bounds.value, constraints.value, __props.autoCropArea), bounds.value, constraints.value);
+		});
+		const scale = computed(() => bounds.value === null ? 0 : fitScale(viewportSize.value, bounds.value) * zoomValue.value);
+		const center = computed(() => {
+			if (bounds.value === null) return {
+				x: 0,
+				y: 0
+			};
+			return clampViewCenter(viewCenter.value ?? {
+				x: bounds.value.width / 2,
+				y: bounds.value.height / 2
+			}, bounds.value, viewportSize.value, scale.value);
+		});
+		const ready = computed(() => bounds.value !== null && scale.value > 0);
+		const messageSet = computed(() => ({
+			area: __props.messages?.area ?? defaultMessages.area,
+			areaRoleDescription: __props.messages?.areaRoleDescription ?? defaultMessages.areaRoleDescription
+		}));
+		const slotState = computed(() => ({
+			crop: crop.value,
+			disabled: __props.disabled,
+			interaction: interaction.value,
+			naturalSize: naturalSize.value,
+			ready: ready.value,
+			rotation: rotationValue.value,
+			zoom: zoomValue.value
+		}));
+		function clampZoom(value) {
+			const { low, high } = zoomRange.value;
+			return Math.min(high, Math.max(low, Number.isFinite(value) ? value : low));
+		}
+		function sameCrop(left, right) {
+			return left !== null && left.x === right.x && left.y === right.y && left.width === right.width && left.height === right.height;
+		}
+		function setCrop(next, reason) {
+			if (bounds.value === null) return false;
+			const clamped = Object.freeze(clampCrop(next, bounds.value, constraints.value));
+			if (sameCrop(crop.value, clamped) && reason !== "init") return false;
+			cropState.set(clamped);
+			emit("update:modelValue", clamped);
+			emit("change", clamped, reason);
+			return true;
+		}
+		function moveFrom(start, dx, dy, reason) {
+			if (bounds.value === null || __props.disabled) return false;
+			return setCrop(moveCrop(start, dx, dy, bounds.value), reason);
+		}
+		function resizeFrom(start, handle, dx, dy, reason) {
+			if (bounds.value === null || __props.disabled) return false;
+			return setCrop(resizeCrop(start, handle, dx, dy, bounds.value, constraints.value), reason);
+		}
+		function currentZoom() {
+			return zoomValue.value;
+		}
+		function currentRotation() {
+			return rotationValue.value;
+		}
+		function zoomTo(next, anchor) {
+			const target = clampZoom(next);
+			if (target === currentZoom()) return false;
+			if (anchor !== void 0 && bounds.value !== null) {
+				const base = fitScale(viewportSize.value, bounds.value);
+				viewCenter.value = zoomAroundPoint(center.value, anchor, base * currentZoom(), base * target);
+			}
+			zoomState.set(target);
+			emit("update:zoom", target);
+			return true;
+		}
+		function zoomBy(steps, anchor) {
+			if (__props.disabled) return false;
+			const factor = Math.pow(1 + Math.max(0, __props.zoomStep), steps);
+			return zoomTo(zoomValue.value * factor, anchor);
+		}
+		function setRotation(degrees) {
+			const target = normalizeRotation(degrees);
+			if (target === currentRotation()) return false;
+			const refit = crop.value !== null && naturalSize.value !== null ? Object.freeze(refitCrop(crop.value, rotatedBounds(naturalSize.value, currentRotation()), rotatedBounds(naturalSize.value, target), constraints.value)) : null;
+			rotationState.set(target);
+			emit("update:rotation", target);
+			if (refit !== null) {
+				cropState.set(refit);
+				emit("update:modelValue", refit);
+				emit("change", refit, "rotate");
+			}
+			viewCenter.value = null;
+			return true;
+		}
+		function rotateBy(steps) {
+			if (__props.disabled) return false;
+			return setRotation(rotationValue.value + steps * __props.rotationStep);
+		}
+		function commit() {
+			if (crop.value !== null) emit("cropEnd", crop.value);
+		}
+		function reset() {
+			zoomTo(1);
+			setRotation(0);
+			viewCenter.value = null;
+			if (bounds.value !== null) setCrop(__props.defaultValue ?? centeredCrop(bounds.value, constraints.value, __props.autoCropArea), "api");
+		}
+		watch(naturalSize, (next, previous) => {
+			if (next === null || bounds.value === null) return;
+			const changedImage = previous !== null && (previous.width !== next.width || previous.height !== next.height);
+			if (cropState.value.value === null || changedImage) {
+				viewCenter.value = null;
+				setCrop(changedImage || __props.defaultValue === void 0 ? centeredCrop(bounds.value, constraints.value, __props.autoCropArea) : __props.defaultValue, "init");
+			}
+		});
+		function currentImage() {
+			const image = element.value?.querySelector("[data-vize-ui=\"image-cropper-image\"]");
+			return image instanceof HTMLImageElement ? image : null;
+		}
+		async function toBlob(options = {}) {
+			const image = currentImage();
+			if (image === null || crop.value === null) throw new ImageCropperError("VIZE_UI_IMAGE_CROPPER_IMAGE_LOAD", "no loaded image to crop");
+			return await cropImage(image, crop.value, {
+				...options,
+				rotation: rotationValue.value
+			});
+		}
+		async function toDataUrl(options = {}) {
+			const image = currentImage();
+			if (image === null || crop.value === null) throw new ImageCropperError("VIZE_UI_IMAGE_CROPPER_IMAGE_LOAD", "no loaded image to crop");
+			return await cropImage(image, crop.value, {
+				...options,
+				output: "data-url",
+				rotation: rotationValue.value
+			});
+		}
+		imageCropperContext.provide({
+			bounds,
+			center,
+			commit,
+			crop,
+			disabled: computed(() => __props.disabled),
+			id: baseId,
+			messages: messageSet,
+			moveFrom,
+			naturalSize,
+			nudgeStep: computed(() => Number.isFinite(__props.nudgeStep) && __props.nudgeStep > 0 ? __props.nudgeStep : 1),
+			panTo(next) {
+				viewCenter.value = next;
+			},
+			ready,
+			resizeFrom,
+			rotateBy,
+			rotation: rotationValue,
+			scale,
+			setCrop,
+			setInteraction(next) {
+				interaction.value = next;
+			},
+			setNaturalSize(size) {
+				naturalSize.value = size;
+			},
+			setViewportSize(size) {
+				if (size.width !== viewportSize.value.width || size.height !== viewportSize.value.height) viewportSize.value = size;
+			},
+			slotState,
+			viewportSize,
+			zoom: zoomValue,
+			zoomBy,
+			zoomTo: (next, anchor) => !__props.disabled && zoomTo(next, anchor)
+		});
+		__expose({
+			crop,
+			disabled: computed(() => __props.disabled),
+			element,
+			interaction,
+			naturalSize,
+			ready,
+			reset,
+			rotation: rotationValue,
+			setCrop: (next) => setCrop(next, "api"),
+			setRotation,
+			setZoom: (next) => zoomTo(next),
+			toBlob,
+			toDataUrl,
+			zoom: zoomValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "image-cropper-root",
+				part: "root",
+				"data-ready": ready.value ? "true" : void 0,
+				"data-interaction": interaction.value,
+				"data-disabled": __props.disabled ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-5a372d8b"]]);
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-viewport.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-ready"];
+//#endregion
+//#region src/families/media/image-cropper/image-cropper-viewport.vue
+var image_cropper_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "image-cropper-viewport",
+	props: { wheelZoom: {
+		type: Boolean,
+		required: false,
+		default: true
+	} },
+	setup(__props, { expose: __expose }) {
+		const context = imageCropperContext.use();
+		const element = useTemplateRef("element");
+		let stopDrag = null;
+		const viewportStyle = computed(() => ({
+			"--vize-ui-image-cropper-rotation": `${context.rotation.value}deg`,
+			"--vize-ui-image-cropper-scale": String(context.scale.value),
+			"--vize-ui-image-cropper-zoom": String(context.zoom.value),
+			overflow: "hidden",
+			position: "relative",
+			touchAction: "none"
+		}));
+		const sizeObserver = useSizeObserver({ onResize(entries) {
+			const latest = entries.at(-1);
+			if (latest !== void 0) context.setViewportSize({
+				width: latest.width,
+				height: latest.height
+			});
+		} });
+		function localPoint(event) {
+			const rect = element.value?.getBoundingClientRect();
+			return {
+				x: event.clientX - (rect?.left ?? 0),
+				y: event.clientY - (rect?.top ?? 0)
+			};
+		}
+		function onPointerDown(event) {
+			if (!context.ready.value || context.disabled.value || element.value === null) return;
+			if (event.pointerType === "mouse" && event.button !== 0) return;
+			if (event.target instanceof Element && event.target.closest("[data-vize-ui=\"image-cropper-area\"]")) return;
+			event.preventDefault();
+			const origin = context.center.value;
+			const scale = context.scale.value;
+			context.setInteraction("panning");
+			stopDrag?.();
+			stopDrag = trackPointerDrag(element.value, event, {
+				onMove(dx, dy) {
+					context.panTo({
+						x: origin.x - dx / scale,
+						y: origin.y - dy / scale
+					});
+				},
+				onEnd() {
+					stopDrag = null;
+					context.setInteraction("idle");
+				}
+			});
+		}
+		function onWheel(event) {
+			if (!__props.wheelZoom || !context.ready.value || context.disabled.value || event.deltaY === 0) return;
+			event.preventDefault();
+			const anchor = fromViewport(localPoint(event), context.center.value, context.viewportSize.value, context.scale.value);
+			context.zoomBy(event.deltaY < 0 ? 1 : -1, anchor);
+		}
+		onMounted(() => {
+			if (element.value === null) return;
+			const rect = element.value.getBoundingClientRect();
+			context.setViewportSize({
+				width: rect.width,
+				height: rect.height
+			});
+			sizeObserver.observe(element.value);
+			element.value.addEventListener("pointerdown", onPointerDown);
+			element.value.addEventListener("wheel", onWheel, { passive: false });
+		});
+		onBeforeUnmount(() => {
+			stopDrag?.();
+			element.value?.removeEventListener("pointerdown", onPointerDown);
+			element.value?.removeEventListener("wheel", onWheel);
+		});
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "image-cropper-viewport",
+				part: "viewport",
+				"data-ready": unref(context).ready.value ? "true" : void 0,
+				style: normalizeStyle(viewportStyle.value)
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 12, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-2eb78749"]]);
+//#endregion
+export { resizeCrop as _, image_cropper_image_default as a, zoomAroundPoint as b, image_cropper_area_default as c, clampViewCenter as d, fitScale as f, refitCrop as g, normalizeRotation as h, cropImage as i, centeredCrop as l, moveCrop as m, image_cropper_root_default as n, image_cropper_handle_default as o, fromViewport as p, ImageCropperError as r, image_cropper_grid_default as s, image_cropper_viewport_default as t, clampCrop as u, rotatedBounds as v, toViewport as y };