wimui 0.55.0 → 0.56.0

package/dist/components/form/ImageCropper/ImageCropper.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),i=require("../Button/Button.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../Slider/Slider.cjs"),s=require("../IconButton/IconButton.cjs"),c=require("../../overlay/Dialog/Dialog.cjs"),l=require("./image-cropper.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=10,m=50,h=u.default.forwardRef(({src:e,aspectRatio:h=1,circular:g=!1,onCrop:_,showRotation:v=!0,showZoom:y=!0,showApplyButton:b=!0,applyLabel:x,onApply:S,className:C,...w},T)=>{let{t:E}=t.useWimTranslation([a.formNs,n.commonNs]),[D,O]=(0,u.useState)(1),[k,A]=(0,u.useState)(0),[j,M]=(0,u.useState)({x:0,y:0}),[N,P]=(0,u.useState)(!1),[F,I]=(0,u.useState)({x:0,y:0}),[L,R]=(0,u.useState)(!1),z=(0,u.useRef)(null),B=(0,u.useRef)(null),V=(0,u.useId)();(0,u.useEffect)(()=>{M({x:0,y:0}),O(1),A(0)},[e]);let H=e=>{P(!0),I({x:e.clientX-j.x,y:e.clientY-j.y})},U=(0,u.useCallback)(e=>{N&&M({x:e.clientX-F.x,y:e.clientY-F.y})},[N,F]),W=(0,u.useCallback)(()=>{P(!1)},[]);(0,u.useEffect)(()=>(N?(window.addEventListener(`mousemove`,U),window.addEventListener(`mouseup`,W)):(window.removeEventListener(`mousemove`,U),window.removeEventListener(`mouseup`,W)),()=>{window.removeEventListener(`mousemove`,U),window.removeEventListener(`mouseup`,W)}),[N,U,W]);let G=e=>{let t=e.shiftKey?m:p,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n?(e.preventDefault(),M(e=>({x:e.x+n[0],y:e.y+n[1]}))):e.key===`Home`&&(e.preventDefault(),M({x:0,y:0}))},K=()=>{A(e=>(e+90)%360)},q=()=>{R(!0)},J=()=>{let t=e||``;_?.(t),S?.(t),R(!1)};return e?(0,f.jsxs)(`div`,{ref:T,className:(0,d.default)(`wim-image-cropper`,l.default.root,C),...w,children:[(0,f.jsxs)(`div`,{ref:B,className:l.default.viewer,onMouseDown:H,onKeyDown:G,role:`application`,tabIndex:0,"aria-label":E(`image_cropper.position_label`),"aria-describedby":V,children:[(0,f.jsx)(r.VisuallyHidden,{id:V,children:E(`image_cropper.position_hint`)}),(0,f.jsx)(`div`,{className:l.default.imageContainer,children:(0,f.jsx)(`img`,{ref:z,src:e,alt:E(`a11y.crop_target`),className:l.default.image,style:{transform:`translate(${j.x}px, ${j.y}px) rotate(${k}deg) scale(${D})`},draggable:!1})}),(0,f.jsx)(`div`,{className:l.default.overlay,children:(0,f.jsx)(`div`,{className:(0,d.default)(l.default.cropArea,{[l.default.circular]:g}),style:{aspectRatio:h}})})]}),(0,f.jsxs)(`div`,{className:l.default.controls,children:[y&&(0,f.jsx)(`div`,{className:l.default.zoomControl,children:(0,f.jsx)(o.Slider,{min:1,max:3,step:.1,value:D,onChange:e=>O(e),label:E(`image_cropper.zoom`),styles:{root:l.default.zoomSlider}})}),v&&(0,f.jsx)(`div`,{className:l.default.rotationControl,children:(0,f.jsx)(s.IconButton,{iconName:`RefreshIcon`,onClick:K,"aria-label":E(`image_cropper.rotate`),variant:`outline`,size:`sm`})}),b&&(0,f.jsx)(`div`,{className:l.default.applyControl,children:(0,f.jsx)(i.Button,{onClick:q,size:`sm`,variant:`solid`,children:x||E(`image_cropper.apply`)})})]}),(0,f.jsx)(c.Dialog,{open:L,onOpenChange:R,children:(0,f.jsxs)(c.DialogContent,{children:[(0,f.jsx)(c.DialogHeader,{children:(0,f.jsx)(c.DialogTitle,{children:E(`image_cropper.confirm_title`)})}),(0,f.jsx)(c.DialogDescription,{children:E(`image_cropper.confirm_message`)}),(0,f.jsxs)(c.DialogFooter,{children:[(0,f.jsx)(c.DialogClose,{asChild:!0,children:(0,f.jsx)(i.Button,{variant:`ghost`,children:E(`image_cropper.cancel`)})}),(0,f.jsx)(i.Button,{onClick:J,variant:`solid`,children:E(`image_cropper.confirm`)})]})]})})]}):(0,f.jsx)(`div`,{ref:T,className:(0,d.default)(`wim-image-cropper`,l.default.root,l.default.empty,C),...w,children:(0,f.jsx)(`div`,{className:l.default.emptyContent,children:E(`image_cropper.no_image`)})})});h.displayName=`ImageCropper`,exports.ImageCropper=h;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),i=require("../Button/Button.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../Slider/Slider.cjs"),s=require("../IconButton/IconButton.cjs"),c=require("../../overlay/Dialog/Dialog.cjs"),l=require("./cropImage.cjs"),u=require("./image-cropper.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=10,h=50,g=d.default.forwardRef(({src:e,aspectRatio:g=1,circular:_=!1,onCrop:v,showRotation:y=!0,showZoom:b=!0,showApplyButton:x=!0,applyLabel:S,onApply:C,onCropError:w,maxOutputSize:T,outputType:E=`image/png`,outputQuality:D=.92,crossOrigin:O,className:k,...A},j)=>{let{t:M}=t.useWimTranslation([a.formNs,n.commonNs]),[N,P]=(0,d.useState)(1),[F,I]=(0,d.useState)(0),[L,R]=(0,d.useState)({x:0,y:0}),[z,B]=(0,d.useState)(!1),[V,H]=(0,d.useState)({x:0,y:0}),[U,W]=(0,d.useState)(!1),G=(0,d.useRef)(null),K=(0,d.useRef)(null),q=(0,d.useRef)(null),J=(0,d.useId)();(0,d.useEffect)(()=>{R({x:0,y:0}),P(1),I(0)},[e]);let Y=e=>{B(!0),H({x:e.clientX-L.x,y:e.clientY-L.y})},X=(0,d.useCallback)(e=>{z&&R({x:e.clientX-V.x,y:e.clientY-V.y})},[z,V]),Z=(0,d.useCallback)(()=>{B(!1)},[]);(0,d.useEffect)(()=>(z?(window.addEventListener(`mousemove`,X),window.addEventListener(`mouseup`,Z)):(window.removeEventListener(`mousemove`,X),window.removeEventListener(`mouseup`,Z)),()=>{window.removeEventListener(`mousemove`,X),window.removeEventListener(`mouseup`,Z)}),[z,X,Z]);let Q=e=>{let t=e.shiftKey?h:m,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n?(e.preventDefault(),R(e=>({x:e.x+n[0],y:e.y+n[1]}))):e.key===`Home`&&(e.preventDefault(),R({x:0,y:0}))},$=()=>{I(e=>(e+90)%360)},ee=()=>{W(!0)},te=()=>{let e=G.current,t=q.current;if(W(!1),!e||!t)return;let n={x:L.x,y:L.y,zoom:N,rotation:F,frameWidth:t.clientWidth,frameHeight:t.clientHeight,layoutWidth:e.offsetWidth,layoutHeight:e.offsetHeight,naturalWidth:e.naturalWidth,naturalHeight:e.naturalHeight,maxOutputSize:T};try{let{dataUrl:t,detail:r}=l.cropImage(e,n,E,D);v?.(t,r),C?.(t,r)}catch(e){w?.(e instanceof Error?e:Error(String(e)),l.resolveCropDetail(n).detail)}};return e?(0,p.jsxs)(`div`,{ref:j,className:(0,f.default)(`wim-image-cropper`,u.default.root,k),...A,children:[(0,p.jsxs)(`div`,{ref:K,className:u.default.viewer,onMouseDown:Y,onKeyDown:Q,role:`application`,tabIndex:0,"aria-label":M(`image_cropper.position_label`),"aria-describedby":J,children:[(0,p.jsx)(r.VisuallyHidden,{id:J,children:M(`image_cropper.position_hint`)}),(0,p.jsx)(`div`,{className:u.default.imageContainer,children:(0,p.jsx)(`img`,{ref:G,src:e,alt:M(`a11y.crop_target`),crossOrigin:O,className:u.default.image,style:{transform:`translate(${L.x}px, ${L.y}px) rotate(${F}deg) scale(${N})`},draggable:!1})}),(0,p.jsx)(`div`,{className:u.default.overlay,children:(0,p.jsx)(`div`,{ref:q,className:(0,f.default)(u.default.cropArea,{[u.default.circular]:_}),style:{aspectRatio:g}})})]}),(0,p.jsxs)(`div`,{className:u.default.controls,children:[b&&(0,p.jsx)(`div`,{className:u.default.zoomControl,children:(0,p.jsx)(o.Slider,{min:1,max:3,step:.1,value:N,onChange:e=>P(e),label:M(`image_cropper.zoom`),styles:{root:u.default.zoomSlider}})}),y&&(0,p.jsx)(`div`,{className:u.default.rotationControl,children:(0,p.jsx)(s.IconButton,{iconName:`RefreshIcon`,onClick:$,"aria-label":M(`image_cropper.rotate`),variant:`outline`,size:`sm`})}),x&&(0,p.jsx)(`div`,{className:u.default.applyControl,children:(0,p.jsx)(i.Button,{onClick:ee,size:`sm`,variant:`solid`,children:S||M(`image_cropper.apply`)})})]}),(0,p.jsx)(c.Dialog,{open:U,onOpenChange:W,children:(0,p.jsxs)(c.DialogContent,{children:[(0,p.jsx)(c.DialogHeader,{children:(0,p.jsx)(c.DialogTitle,{children:M(`image_cropper.confirm_title`)})}),(0,p.jsx)(c.DialogDescription,{children:M(`image_cropper.confirm_message`)}),(0,p.jsxs)(c.DialogFooter,{children:[(0,p.jsx)(c.DialogClose,{asChild:!0,children:(0,p.jsx)(i.Button,{variant:`ghost`,children:M(`image_cropper.cancel`)})}),(0,p.jsx)(i.Button,{onClick:te,variant:`solid`,children:M(`image_cropper.confirm`)})]})]})})]}):(0,p.jsx)(`div`,{ref:j,className:(0,f.default)(`wim-image-cropper`,u.default.root,u.default.empty,k),...A,children:(0,p.jsx)(`div`,{className:u.default.emptyContent,children:M(`image_cropper.no_image`)})})});g.displayName=`ImageCropper`,exports.ImageCropper=g;

package/dist/components/form/ImageCropper/ImageCropper.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
+import { ImageCropDetail, ImageCropOutputType } from './cropImage';
+export type { ImageCropDetail, ImageCropOutputType };
 export interface ImageCropperProps extends React.ComponentPropsWithoutRef<"div"> {
     /** URL or data URL of the image to crop */
     src?: string;
@@ -6,8 +8,11 @@ export interface ImageCropperProps extends React.ComponentPropsWithoutRef<"div">
     aspectRatio?: number;
     /** Whether to display a circular crop area (for profile images) */
     circular?: boolean;
-    /** Callback when the crop result is finalized */
-    onCrop?: (dataUrl: string) => void;
+    /**
+     * Called with the cropped image as a data URL once the crop is confirmed. The second argument
+     * describes the crop (offset, zoom, rotation, frame and output size) so it can be redone elsewhere.
+     */
+    onCrop?: (dataUrl: string, detail: ImageCropDetail) => void;
     /** Whether to show the rotation button */
     showRotation?: boolean;
     /** Whether to show the zoom slider */
@@ -16,8 +21,35 @@ export interface ImageCropperProps extends React.ComponentPropsWithoutRef<"div">
     showApplyButton?: boolean;
     /** Label of the apply button */
     applyLabel?: string;
-    /** Callback when the crop is applied (after confirming in the dialog) */
-    onApply?: (dataUrl: string) => void;
+    /** Called with the cropped image and the crop detail when the crop is applied (after confirming in the dialog) */
+    onApply?: (dataUrl: string, detail: ImageCropDetail) => void;
+    /**
+     * Called instead of onCrop and onApply when the image cannot be produced, with the crop detail.
+     * The usual cause is an image from another origin drawn without CORS approval: the browser then
+     * refuses to read the canvas. Set crossOrigin and serve the image with CORS headers, or crop on
+     * the server from the detail.
+     */
+    onCropError?: (error: Error, detail: ImageCropDetail) => void;
+    /**
+     * Upper bound, in px, for the longer side of the output image. The crop is taken at the
+     * resolution of the source image; without a bound a large photo produces a large data URL.
+     */
+    maxOutputSize?: number;
+    /**
+     * Image format of the output. "image/png" keeps transparency where the image does not cover the frame.
+     * @default "image/png"
+     */
+    outputType?: ImageCropOutputType;
+    /**
+     * Quality from 0 to 1 for "image/jpeg" and "image/webp". Ignored for "image/png".
+     * @default 0.92
+     */
+    outputQuality?: number;
+    /**
+     * CORS mode used to load the image. Needed to crop an image served from another origin;
+     * the server must send matching CORS headers or the image will not load at all.
+     */
+    crossOrigin?: "anonymous" | "use-credentials";
 }
 /**
  * Component for cropping and rotating an image.

package/dist/components/form/ImageCropper/ImageCropper.js

@@ -6,173 +6,195 @@ import { Button as r } from "../Button/Button.js";
 import { formNs as i } from "../../../i18n/generated/form.js";
 import { Slider as a } from "../Slider/Slider.js";
 import { IconButton as o } from "../IconButton/IconButton.js";
-import { Dialog as s, DialogClose as c, DialogContent as l, DialogDescription as u, DialogFooter as d, DialogHeader as f, DialogTitle as ee } from "../../overlay/Dialog/Dialog.js";
-import p from "./image-cropper.module.js";
-import m, { useCallback as h, useEffect as g, useId as _, useRef as v, useState as y } from "react";
-import b from "classnames";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Dialog as s, DialogClose as c, DialogContent as l, DialogDescription as u, DialogFooter as ee, DialogHeader as d, DialogTitle as te } from "../../overlay/Dialog/Dialog.js";
+import { cropImage as f, resolveCropDetail as p } from "./cropImage.js";
+import m from "./image-cropper.module.js";
+import h, { useCallback as g, useEffect as _, useId as v, useRef as y, useState as b } from "react";
+import x from "classnames";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/components/form/ImageCropper/ImageCropper.tsx
-var C = 10, w = 50, T = m.forwardRef(({ src: m, aspectRatio: T = 1, circular: E = !1, onCrop: D, showRotation: O = !0, showZoom: te = !0, showApplyButton: k = !0, applyLabel: A, onApply: j, className: M, ...N }, P) => {
-	let { t: F } = e([i, t]), [I, L] = y(1), [R, z] = y(0), [B, V] = y({
+var w = 10, T = 50, E = h.forwardRef(({ src: h, aspectRatio: E = 1, circular: ne = !1, onCrop: re, showRotation: ie = !0, showZoom: ae = !0, showApplyButton: oe = !0, applyLabel: D, onApply: O, onCropError: k, maxOutputSize: A, outputType: j = "image/png", outputQuality: M = .92, crossOrigin: N, className: P, ...F }, I) => {
+	let { t: L } = e([i, t]), [R, z] = b(1), [B, V] = b(0), [H, U] = b({
 		x: 0,
 		y: 0
-	}), [H, U] = y(!1), [W, G] = y({
+	}), [W, G] = b(!1), [K, q] = b({
 		x: 0,
 		y: 0
-	}), [K, q] = y(!1), J = v(null), Y = v(null), X = _();
-	g(() => {
-		V({
+	}), [se, J] = b(!1), Y = y(null), ce = y(null), X = y(null), Z = v();
+	_(() => {
+		U({
 			x: 0,
 			y: 0
-		}), L(1), z(0);
-	}, [m]);
-	let Z = (e) => {
-		U(!0), G({
-			x: e.clientX - B.x,
-			y: e.clientY - B.y
+		}), z(1), V(0);
+	}, [h]);
+	let le = (e) => {
+		G(!0), q({
+			x: e.clientX - H.x,
+			y: e.clientY - H.y
 		});
-	}, Q = h((e) => {
-		H && V({
-			x: e.clientX - W.x,
-			y: e.clientY - W.y
+	}, Q = g((e) => {
+		W && U({
+			x: e.clientX - K.x,
+			y: e.clientY - K.y
 		});
-	}, [H, W]), $ = h(() => {
-		U(!1);
+	}, [W, K]), $ = g(() => {
+		G(!1);
 	}, []);
-	g(() => (H ? (window.addEventListener("mousemove", Q), window.addEventListener("mouseup", $)) : (window.removeEventListener("mousemove", Q), window.removeEventListener("mouseup", $)), () => {
+	_(() => (W ? (window.addEventListener("mousemove", Q), window.addEventListener("mouseup", $)) : (window.removeEventListener("mousemove", Q), window.removeEventListener("mouseup", $)), () => {
 		window.removeEventListener("mousemove", Q), window.removeEventListener("mouseup", $);
 	}), [
-		H,
+		W,
 		Q,
 		$
 	]);
-	let ne = (e) => {
-		let t = e.shiftKey ? w : C, n = {
+	let ue = (e) => {
+		let t = e.shiftKey ? T : w, n = {
 			ArrowLeft: [-t, 0],
 			ArrowRight: [t, 0],
 			ArrowUp: [0, -t],
 			ArrowDown: [0, t]
 		}[e.key];
-		n ? (e.preventDefault(), V((e) => ({
+		n ? (e.preventDefault(), U((e) => ({
 			x: e.x + n[0],
 			y: e.y + n[1]
-		}))) : e.key === "Home" && (e.preventDefault(), V({
+		}))) : e.key === "Home" && (e.preventDefault(), U({
 			x: 0,
 			y: 0
 		}));
-	}, re = () => {
-		z((e) => (e + 90) % 360);
-	}, ie = () => {
-		q(!0);
-	}, ae = () => {
-		let e = m || "";
-		D?.(e), j?.(e), q(!1);
+	}, de = () => {
+		V((e) => (e + 90) % 360);
+	}, fe = () => {
+		J(!0);
+	}, pe = () => {
+		let e = Y.current, t = X.current;
+		if (J(!1), !e || !t) return;
+		let n = {
+			x: H.x,
+			y: H.y,
+			zoom: R,
+			rotation: B,
+			frameWidth: t.clientWidth,
+			frameHeight: t.clientHeight,
+			layoutWidth: e.offsetWidth,
+			layoutHeight: e.offsetHeight,
+			naturalWidth: e.naturalWidth,
+			naturalHeight: e.naturalHeight,
+			maxOutputSize: A
+		};
+		try {
+			let { dataUrl: t, detail: r } = f(e, n, j, M);
+			re?.(t, r), O?.(t, r);
+		} catch (e) {
+			k?.(e instanceof Error ? e : Error(String(e)), p(n).detail);
+		}
 	};
-	return m ? /* @__PURE__ */ S("div", {
-		ref: P,
-		className: b("wim-image-cropper", p.root, M),
-		...N,
+	return h ? /* @__PURE__ */ C("div", {
+		ref: I,
+		className: x("wim-image-cropper", m.root, P),
+		...F,
 		children: [
-			/* @__PURE__ */ S("div", {
-				ref: Y,
-				className: p.viewer,
-				onMouseDown: Z,
-				onKeyDown: ne,
+			/* @__PURE__ */ C("div", {
+				ref: ce,
+				className: m.viewer,
+				onMouseDown: le,
+				onKeyDown: ue,
 				role: "application",
 				tabIndex: 0,
-				"aria-label": F("image_cropper.position_label"),
-				"aria-describedby": X,
+				"aria-label": L("image_cropper.position_label"),
+				"aria-describedby": Z,
 				children: [
-					/* @__PURE__ */ x(n, {
-						id: X,
-						children: F("image_cropper.position_hint")
+					/* @__PURE__ */ S(n, {
+						id: Z,
+						children: L("image_cropper.position_hint")
 					}),
-					/* @__PURE__ */ x("div", {
-						className: p.imageContainer,
-						children: /* @__PURE__ */ x("img", {
-							ref: J,
-							src: m,
-							alt: F("a11y.crop_target"),
-							className: p.image,
-							style: { transform: `translate(${B.x}px, ${B.y}px) rotate(${R}deg) scale(${I})` },
+					/* @__PURE__ */ S("div", {
+						className: m.imageContainer,
+						children: /* @__PURE__ */ S("img", {
+							ref: Y,
+							src: h,
+							alt: L("a11y.crop_target"),
+							crossOrigin: N,
+							className: m.image,
+							style: { transform: `translate(${H.x}px, ${H.y}px) rotate(${B}deg) scale(${R})` },
 							draggable: !1
 						})
 					}),
-					/* @__PURE__ */ x("div", {
-						className: p.overlay,
-						children: /* @__PURE__ */ x("div", {
-							className: b(p.cropArea, { [p.circular]: E }),
-							style: { aspectRatio: T }
+					/* @__PURE__ */ S("div", {
+						className: m.overlay,
+						children: /* @__PURE__ */ S("div", {
+							ref: X,
+							className: x(m.cropArea, { [m.circular]: ne }),
+							style: { aspectRatio: E }
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ S("div", {
-				className: p.controls,
+			/* @__PURE__ */ C("div", {
+				className: m.controls,
 				children: [
-					te && /* @__PURE__ */ x("div", {
-						className: p.zoomControl,
-						children: /* @__PURE__ */ x(a, {
+					ae && /* @__PURE__ */ S("div", {
+						className: m.zoomControl,
+						children: /* @__PURE__ */ S(a, {
 							min: 1,
 							max: 3,
 							step: .1,
-							value: I,
-							onChange: (e) => L(e),
-							label: F("image_cropper.zoom"),
-							styles: { root: p.zoomSlider }
+							value: R,
+							onChange: (e) => z(e),
+							label: L("image_cropper.zoom"),
+							styles: { root: m.zoomSlider }
 						})
 					}),
-					O && /* @__PURE__ */ x("div", {
-						className: p.rotationControl,
-						children: /* @__PURE__ */ x(o, {
+					ie && /* @__PURE__ */ S("div", {
+						className: m.rotationControl,
+						children: /* @__PURE__ */ S(o, {
 							iconName: "RefreshIcon",
-							onClick: re,
-							"aria-label": F("image_cropper.rotate"),
+							onClick: de,
+							"aria-label": L("image_cropper.rotate"),
 							variant: "outline",
 							size: "sm"
 						})
 					}),
-					k && /* @__PURE__ */ x("div", {
-						className: p.applyControl,
-						children: /* @__PURE__ */ x(r, {
-							onClick: ie,
+					oe && /* @__PURE__ */ S("div", {
+						className: m.applyControl,
+						children: /* @__PURE__ */ S(r, {
+							onClick: fe,
 							size: "sm",
 							variant: "solid",
-							children: A || F("image_cropper.apply")
+							children: D || L("image_cropper.apply")
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ x(s, {
-				open: K,
-				onOpenChange: q,
-				children: /* @__PURE__ */ S(l, { children: [
-					/* @__PURE__ */ x(f, { children: /* @__PURE__ */ x(ee, { children: F("image_cropper.confirm_title") }) }),
-					/* @__PURE__ */ x(u, { children: F("image_cropper.confirm_message") }),
-					/* @__PURE__ */ S(d, { children: [/* @__PURE__ */ x(c, {
+			/* @__PURE__ */ S(s, {
+				open: se,
+				onOpenChange: J,
+				children: /* @__PURE__ */ C(l, { children: [
+					/* @__PURE__ */ S(d, { children: /* @__PURE__ */ S(te, { children: L("image_cropper.confirm_title") }) }),
+					/* @__PURE__ */ S(u, { children: L("image_cropper.confirm_message") }),
+					/* @__PURE__ */ C(ee, { children: [/* @__PURE__ */ S(c, {
 						asChild: !0,
-						children: /* @__PURE__ */ x(r, {
+						children: /* @__PURE__ */ S(r, {
 							variant: "ghost",
-							children: F("image_cropper.cancel")
+							children: L("image_cropper.cancel")
 						})
-					}), /* @__PURE__ */ x(r, {
-						onClick: ae,
+					}), /* @__PURE__ */ S(r, {
+						onClick: pe,
 						variant: "solid",
-						children: F("image_cropper.confirm")
+						children: L("image_cropper.confirm")
 					})] })
 				] })
 			})
 		]
-	}) : /* @__PURE__ */ x("div", {
-		ref: P,
-		className: b("wim-image-cropper", p.root, p.empty, M),
-		...N,
-		children: /* @__PURE__ */ x("div", {
-			className: p.emptyContent,
-			children: F("image_cropper.no_image")
+	}) : /* @__PURE__ */ S("div", {
+		ref: I,
+		className: x("wim-image-cropper", m.root, m.empty, P),
+		...F,
+		children: /* @__PURE__ */ S("div", {
+			className: m.emptyContent,
+			children: L("image_cropper.no_image")
 		})
 	});
 });
-T.displayName = "ImageCropper";
+E.displayName = "ImageCropper";
 //#endregion
-export { T as ImageCropper };
+export { E as ImageCropper };

package/dist/components/form/ImageCropper/cropImage.cjs

@@ -0,0 +1,2 @@
+"use client";
+function e(e){let t=(e.layoutWidth>0?e.naturalWidth/e.layoutWidth:1)/e.zoom,n=Math.max(e.frameWidth,e.frameHeight)*t;e.maxOutputSize!==void 0&&e.maxOutputSize>0&&n>e.maxOutputSize&&(t*=e.maxOutputSize/n);let r=Math.max(1,Math.round(e.frameWidth*t)),i=Math.max(1,Math.round(e.frameHeight*t));return{detail:{x:e.x,y:e.y,zoom:e.zoom,rotation:e.rotation,frameWidth:e.frameWidth,frameHeight:e.frameHeight,width:r,height:i,naturalWidth:e.naturalWidth,naturalHeight:e.naturalHeight},scale:r/e.frameWidth}}function t(t,n,r,i){let{detail:a,scale:o}=e(n);if(!t.complete||n.naturalWidth===0||n.naturalHeight===0)throw Error(`ImageCropper: the image has not loaded, so there is nothing to crop.`);let s=document.createElement(`canvas`);s.width=a.width,s.height=a.height;let c=s.getContext(`2d`);if(!c)throw Error(`ImageCropper: a 2D canvas context is not available.`);return r===`image/jpeg`&&(c.fillStyle=`#fff`,c.fillRect(0,0,a.width,a.height)),c.translate(a.width/2,a.height/2),c.scale(o,o),c.translate(n.x,n.y),c.rotate(n.rotation*Math.PI/180),c.scale(n.zoom,n.zoom),c.drawImage(t,-n.layoutWidth/2,-n.layoutHeight/2,n.layoutWidth,n.layoutHeight),{dataUrl:s.toDataURL(r,i),detail:a}}exports.cropImage=t,exports.resolveCropDetail=e;

package/dist/components/form/ImageCropper/cropImage.d.ts

@@ -0,0 +1,58 @@
+/** What the crop was made from. Enough to redo the crop elsewhere (for example on a server). */
+export type ImageCropDetail = {
+    /** Horizontal offset of the image center from the center of the crop frame, in CSS px. */
+    x: number;
+    /** Vertical offset of the image center from the center of the crop frame, in CSS px. */
+    y: number;
+    /** Zoom factor applied to the image (1 = the size it is laid out at). */
+    zoom: number;
+    /** Clockwise rotation in degrees. */
+    rotation: number;
+    /** Width of the crop frame on screen, in CSS px. */
+    frameWidth: number;
+    /** Height of the crop frame on screen, in CSS px. */
+    frameHeight: number;
+    /** Width of the output image in px, after `maxOutputSize` is applied. */
+    width: number;
+    /** Height of the output image in px, after `maxOutputSize` is applied. */
+    height: number;
+    /** Natural width of the source image in px. */
+    naturalWidth: number;
+    /** Natural height of the source image in px. */
+    naturalHeight: number;
+};
+export type ImageCropOutputType = "image/png" | "image/jpeg" | "image/webp";
+export type CropGeometry = {
+    x: number;
+    y: number;
+    zoom: number;
+    rotation: number;
+    frameWidth: number;
+    frameHeight: number;
+    /** 画像が、拡大の前に画面で占めている大きさ（CSS px）。 */
+    layoutWidth: number;
+    layoutHeight: number;
+    naturalWidth: number;
+    naturalHeight: number;
+    maxOutputSize?: number;
+};
+/**
+ * 出力の大きさと、枠の 1 CSS px が出力の何 px になるかを決める。
+ *
+ * 画面の枠の大きさで切ると、拡大して見ている写真は粗くなる。元の画像の解像度で切る ──
+ * 枠が元の画像の何 px ぶんを覆っているかを、出力の大きさにする。`maxOutputSize` は長いほうの辺の上限。
+ */
+export declare function resolveCropDetail(g: CropGeometry): {
+    detail: ImageCropDetail;
+    scale: number;
+};
+/**
+ * 画面に見えている枠の中を、Canvas に描いて data URL にする。
+ *
+ * 画面の `transform`（`translate → rotate → scale`。原点は画像の中心）を、枠の中心を原点にして
+ * そのまま Canvas に写す。失敗（画像が読めていない・別オリジンの画像で Canvas が汚染された）は投げる。
+ */
+export declare function cropImage(image: HTMLImageElement, g: CropGeometry, type: ImageCropOutputType, quality: number): {
+    dataUrl: string;
+    detail: ImageCropDetail;
+};

package/dist/components/form/ImageCropper/cropImage.js

@@ -0,0 +1,36 @@
+"use client";
+//#region src/components/form/ImageCropper/cropImage.ts
+function e(e) {
+	let t = (e.layoutWidth > 0 ? e.naturalWidth / e.layoutWidth : 1) / e.zoom, n = Math.max(e.frameWidth, e.frameHeight) * t;
+	e.maxOutputSize !== void 0 && e.maxOutputSize > 0 && n > e.maxOutputSize && (t *= e.maxOutputSize / n);
+	let r = Math.max(1, Math.round(e.frameWidth * t)), i = Math.max(1, Math.round(e.frameHeight * t));
+	return {
+		detail: {
+			x: e.x,
+			y: e.y,
+			zoom: e.zoom,
+			rotation: e.rotation,
+			frameWidth: e.frameWidth,
+			frameHeight: e.frameHeight,
+			width: r,
+			height: i,
+			naturalWidth: e.naturalWidth,
+			naturalHeight: e.naturalHeight
+		},
+		scale: r / e.frameWidth
+	};
+}
+function t(t, n, r, i) {
+	let { detail: a, scale: o } = e(n);
+	if (!t.complete || n.naturalWidth === 0 || n.naturalHeight === 0) throw Error("ImageCropper: the image has not loaded, so there is nothing to crop.");
+	let s = document.createElement("canvas");
+	s.width = a.width, s.height = a.height;
+	let c = s.getContext("2d");
+	if (!c) throw Error("ImageCropper: a 2D canvas context is not available.");
+	return r === "image/jpeg" && (c.fillStyle = "#fff", c.fillRect(0, 0, a.width, a.height)), c.translate(a.width / 2, a.height / 2), c.scale(o, o), c.translate(n.x, n.y), c.rotate(n.rotation * Math.PI / 180), c.scale(n.zoom, n.zoom), c.drawImage(t, -n.layoutWidth / 2, -n.layoutHeight / 2, n.layoutWidth, n.layoutHeight), {
+		dataUrl: s.toDataURL(r, i),
+		detail: a
+	};
+}
+//#endregion
+export { t as cropImage, e as resolveCropDetail };

package/dist/components/navigation/Anchor/Anchor.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./anchor.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({items:e=[],bounds:a=5,offset:o=0,direction:s=`vertical`,className:c,style:l})=>{let[u,d]=(0,n.useState)(``),[f,p]=(0,n.useState)({}),m=(0,n.useRef)(null),h=(e,t)=>{e.preventDefault();let n=t.replace(`#`,``),r=document.getElementById(n);r&&(window.scrollTo({top:r.offsetTop-o,behavior:`smooth`}),d(t))};(0,n.useLayoutEffect)(()=>{let t=()=>{let t=(e,n)=>{let r=[];return e.forEach(e=>{r.push({href:e.href,parentHref:n}),e.children&&(r=r.concat(t(e.children,n||e.href)))}),r},n=t(e),r=``,i=window.scrollY||document.documentElement.scrollTop,c=document.documentElement.scrollHeight,l=document.documentElement.clientHeight;if(i>0&&Math.ceil(i+l)>=c&&n.length>0){let e=n[n.length-1];r=s===`horizontal`&&e.parentHref?e.parentHref:e.href}else for(let e of n){let t=e.href.replace(`#`,``),n=document.getElementById(t);if(n){if(n.getBoundingClientRect().top<=o+a)r=s===`horizontal`&&e.parentHref?e.parentHref:e.href;else break}}r&&r!==u&&d(r)};return window.addEventListener(`scroll`,t),t(),()=>window.removeEventListener(`scroll`,t)},[e,o,a,u,s]),(0,n.useLayoutEffect)(()=>{if(!u||!m.current)return;let e=m.current.querySelector(`a[href="${u}"]`);if(e){let n=m.current.getBoundingClientRect();if(s===`vertical`){let t=e.getBoundingClientRect();p({top:t.top-n.top,height:t.height,opacity:1})}else{let r=m.current.querySelector(`.${t.default.list}`);if(r){let t=e.getBoundingClientRect(),i=r.getBoundingClientRect(),a=t.left-i.left+r.scrollLeft,o=a-i.width/2+t.width/2,s=r.scrollWidth-i.width,c=Math.max(0,Math.min(o,s)),l=a-c+(i.left-n.left);p({left:l,width:t.width,opacity:1}),r.scrollTo({left:c,behavior:`smooth`})}else{let t=e.getBoundingClientRect();p({left:t.left-m.current.getBoundingClientRect().left,width:t.width,opacity:1})}}}else p({opacity:0})},[u,s]);let g=e=>(0,i.jsx)(`ul`,{className:(0,r.default)(t.default.list,t.default[s]),children:e.map(e=>(0,i.jsxs)(`li`,{className:(0,r.default)(t.default.item,u===e.href&&t.default.active),children:[(0,i.jsx)(`a`,{href:e.href,className:t.default.link,"aria-current":u===e.href?`location`:void 0,onClick:t=>h(t,e.href),title:typeof e.title==`string`?e.title:void 0,children:e.title}),e.children&&s===`vertical`&&g(e.children)]},e.key))});return(0,i.jsxs)(`div`,{className:(0,r.default)(`wim-anchor`,t.default.root,t.default[s],c),style:l,ref:m,children:[(0,i.jsx)(`div`,{className:t.default.ink,children:(0,i.jsx)(`span`,{className:t.default.inkBall,style:f})}),g(e)]})};exports.Anchor=a,exports.default=a;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./anchor.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({items:e=[],bounds:a=5,offset:o=0,direction:s=`vertical`,className:c,style:l})=>{let[u,d]=(0,n.useState)(``),[f,p]=(0,n.useState)({}),m=(0,n.useRef)(null),h=(e,t)=>{e.preventDefault();let n=t.replace(`#`,``),r=document.getElementById(n);r&&(window.scrollTo({top:r.offsetTop-o,behavior:`smooth`}),d(t))};(0,n.useLayoutEffect)(()=>{let t=()=>{let t=(e,n)=>{let r=[];return e.forEach(e=>{r.push({href:e.href,parentHref:n}),e.children&&(r=r.concat(t(e.children,n||e.href)))}),r},n=t(e),r=``,i=window.scrollY||document.documentElement.scrollTop,c=document.documentElement.scrollHeight,l=document.documentElement.clientHeight;if(i>0&&Math.ceil(i+l)>=c&&n.length>0){let e=n[n.length-1];r=s===`horizontal`&&e.parentHref?e.parentHref:e.href}else for(let e of n){let t=e.href.replace(`#`,``),n=document.getElementById(t);if(n){if(n.getBoundingClientRect().top<=o+a)r=s===`horizontal`&&e.parentHref?e.parentHref:e.href;else break}}r&&r!==u&&d(r)};return window.addEventListener(`scroll`,t),t(),()=>window.removeEventListener(`scroll`,t)},[e,o,a,u,s]);let g=(0,n.useCallback)(()=>{if(!u||!m.current)return;let e=m.current.querySelector(`a[href="${u}"]`);if(e){let n=m.current.getBoundingClientRect();if(s===`vertical`){let t=e.getBoundingClientRect();p({top:t.top-n.top,height:t.height,opacity:1})}else{let r=m.current.querySelector(`.${t.default.list}`);if(r){let t=e.getBoundingClientRect(),i=r.getBoundingClientRect(),a=t.left-i.left+r.scrollLeft,o=a-i.width/2+t.width/2,s=r.scrollWidth-i.width,c=Math.max(0,Math.min(o,s)),l=a-c+(i.left-n.left);p({left:l,width:t.width,opacity:1}),r.scrollTo({left:c,behavior:`smooth`})}else{let t=e.getBoundingClientRect();p({left:t.left-m.current.getBoundingClientRect().left,width:t.width,opacity:1})}}}else p({opacity:0})},[u,s]);(0,n.useLayoutEffect)(()=>{g()},[g]),(0,n.useEffect)(()=>{let e=m.current;if(!e||typeof ResizeObserver>`u`)return;let t=new ResizeObserver(()=>g());return t.observe(e),e.querySelectorAll(`a`).forEach(e=>t.observe(e)),()=>t.disconnect()},[g,e]);let _=e=>(0,i.jsx)(`ul`,{className:(0,r.default)(t.default.list,t.default[s]),children:e.map(e=>(0,i.jsxs)(`li`,{className:(0,r.default)(t.default.item,u===e.href&&t.default.active),children:[(0,i.jsx)(`a`,{href:e.href,className:t.default.link,"aria-current":u===e.href?`location`:void 0,onClick:t=>h(t,e.href),title:typeof e.title==`string`?e.title:void 0,children:e.title}),e.children&&s===`vertical`&&_(e.children)]},e.key))});return(0,i.jsxs)(`div`,{className:(0,r.default)(`wim-anchor`,t.default.root,t.default[s],c),style:l,ref:m,children:[(0,i.jsx)(`div`,{className:t.default.ink,children:(0,i.jsx)(`span`,{className:t.default.inkBall,style:f})}),_(e)]})};exports.Anchor=a,exports.default=a;