@openrails/contentkit-ui 0.0.0-stage → 0.68.1

package/dist/components/image-crop-dialog.js

@@ -0,0 +1,359 @@
+import { aspectOf as e, ratio as t } from "../client/aspect.js";
+import { useMessages as n } from "../i18n/context.js";
+import { editedSize as r, rotation as i, toRotated as a } from "../client/crop.js";
+import { useCrop as o } from "../react/upload.js";
+import { Progress as s } from "../ui/progress.js";
+import { editOutput as c } from "../react/slot.js";
+import { Alert as l, AlertDescription as u } from "../ui/alert.js";
+import { Button as d } from "../ui/button.js";
+import { Dialog as f, DialogContent as p, DialogDescription as m, DialogFooter as h, DialogHeader as g, DialogTitle as _ } from "../ui/dialog.js";
+import { Slider as ee } from "../ui/slider.js";
+import { progressLabel as v, progressValue as y } from "./progress.js";
+import { useEffect as b, useMemo as te, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { cn as E } from "cn";
+import { Alert02Icon as D, Image01Icon as O, RotateClockwiseIcon as k } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as A } from "@hugeicons/react";
+import ne from "react-easy-crop";
+//#region src/components/image-crop-dialog.tsx
+var re = 5, j = .25;
+function M(e) {
+	let { t } = n(), r = !!e.busy;
+	return /* @__PURE__ */ w(f, {
+		open: e.open,
+		onOpenChange: (t) => !r && e.onOpenChange(t),
+		children: /* @__PURE__ */ T(p, {
+			className: E("gap-0 overflow-hidden p-0 sm:max-w-xl", e.className),
+			showCloseButton: !r,
+			"data-ckui": "crop-dialog",
+			children: [/* @__PURE__ */ T(g, {
+				className: "px-5 pt-5 pb-4 pr-12",
+				children: [/* @__PURE__ */ w(_, { children: e.title ?? t("crop.title") }), /* @__PURE__ */ w(m, { children: e.description ?? t("crop.description") })]
+			}), e.source && /* @__PURE__ */ w(N, {
+				...e,
+				source: e.source
+			}, e.source.url)]
+		})
+	});
+}
+function N(e) {
+	let { t } = n(), r = e.aspects?.length ? e.aspects : null, i = r && !r.includes(e.aspect) ? r[0] : e.aspect, [a, o] = S(i), s = r && r.length > 1 && /* @__PURE__ */ T("div", {
+		className: "flex items-center gap-2 px-5 pb-3",
+		"data-ckui": "crop-shapes",
+		children: [/* @__PURE__ */ w("span", {
+			className: "text-xs text-muted-foreground",
+			children: t("crop.shape")
+		}), /* @__PURE__ */ w("div", {
+			className: "inline-flex flex-wrap gap-0.5 rounded-lg bg-muted p-0.5",
+			role: "group",
+			"aria-label": t("crop.shape"),
+			children: r.map((n) => /* @__PURE__ */ w("button", {
+				type: "button",
+				"aria-pressed": a === n,
+				disabled: !!e.busy,
+				onClick: () => o(n),
+				className: E("inline-flex h-7 items-center rounded-md px-2.5 text-xs font-medium text-muted-foreground tabular-nums transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50", a === n && "bg-background text-foreground shadow-xs"),
+				children: n || t("crop.original")
+			}, n || "original"))
+		})]
+	});
+	return /* @__PURE__ */ T(C, { children: [s, /* @__PURE__ */ w(P, {
+		...e,
+		aspect: a,
+		initialEdit: a === i ? e.initialEdit : null,
+		onReset: a === i ? void 0 : () => o(i)
+	}, a)] });
+}
+function P(a) {
+	let { t: f } = n(), { source: p } = a, [m, g] = S(() => i(a.initialEdit?.rotate ?? 0)), _ = t(a.aspect) ? a.aspect : m % 180 ? e(p.height, p.width) : e(p.width, p.height), E = te(() => ({
+		width: p.width,
+		height: p.height
+	}), [p.width, p.height]), M = o({
+		source: E,
+		aspect: _,
+		initial: a.initialEdit
+	}), N = x(_), { setCrop: P } = M;
+	b(() => {
+		N.current !== _ && (N.current = _, P({
+			x: 0,
+			y: 0,
+			w: E.width,
+			h: E.height
+		}));
+	}, [
+		_,
+		E,
+		P
+	]);
+	let [I, z] = S({
+		x: 0,
+		y: 0
+	}), [B, V] = S(1), [H, U] = S(!1), [W, ie] = S(() => a.initialEdit?.crop ? R(M.crop, E, M.rotate) : void 0), G = x(a.onEditChange);
+	G.current = a.onEditChange;
+	let K = !!a.busy;
+	b(() => G.current?.(M.edit), [M.edit]);
+	let q = c(E, M.edit, _), J = a.minWidth ?? 0, Y = c(E, { rotate: M.rotate }, _).width, X = Y < J, Z = X ? 1 : Math.max(1, Math.min(re, Y / Math.max(1, J))), ae = q.width < J, oe = !X && !!(a.targetWidth && q.width < a.targetWidth);
+	b(() => {
+		B > Z && V(Z);
+	}, [B, Z]);
+	let se = (e) => {
+		if (!(e.width > 0 && e.height > 0) || !Number.isFinite(e.x + e.y)) return;
+		let t = r(E, M.rotate), n = (e, t) => e / 100 * t;
+		M.setFromDisplay({
+			x: n(e.x, t.width),
+			y: n(e.y, t.height),
+			w: n(e.width, t.width),
+			h: n(e.height, t.height)
+		}, t);
+	}, Q = () => {
+		ie(void 0), z({
+			x: 0,
+			y: 0
+		}), V(1);
+	}, $ = (e) => {
+		g((t) => i(t + e)), M.rotateBy(e), Q();
+	};
+	return /* @__PURE__ */ T(C, { children: [
+		/* @__PURE__ */ w("div", {
+			className: "relative h-72 w-full bg-zinc-950 sm:h-80 [&_.reactEasyCrop_CropArea]:border-white/70 [&_.reactEasyCrop_CropArea]:text-black/65",
+			onKeyDown: (e) => {
+				if (!K) {
+					if (e.key === "+" || e.key === "=") V((e) => Math.min(Z, e + j));
+					else if (e.key === "-" || e.key === "_") V((e) => Math.max(1, e - j));
+					else if (a.rotatable !== !1 && (e.key === "r" || e.key === "R")) $(e.shiftKey ? -90 : 90);
+					else return;
+					e.preventDefault();
+				}
+			},
+			"data-ckui": "crop-stage",
+			children: /* @__PURE__ */ w("div", {
+				className: "absolute inset-3 sm:inset-4",
+				children: /* @__PURE__ */ w(ne, {
+					image: p.url,
+					crop: I,
+					zoom: B,
+					rotation: M.rotate,
+					aspect: t(_),
+					minZoom: 1,
+					maxZoom: Z,
+					zoomSpeed: .5,
+					cropShape: a.round ? "round" : "rect",
+					showGrid: !a.round || H,
+					objectFit: "contain",
+					initialCroppedAreaPercentages: W,
+					onCropChange: K ? F : z,
+					onZoomChange: K ? F : V,
+					onCropComplete: se,
+					onInteractionStart: () => U(!0),
+					onInteractionEnd: () => U(!1),
+					keyboardStep: 8,
+					disableAutomaticStylesInjection: !0,
+					mediaProps: {
+						alt: "",
+						draggable: !1
+					},
+					cropperProps: {
+						"aria-label": f("crop.area"),
+						role: "application"
+					}
+				})
+			})
+		}),
+		/* @__PURE__ */ T("div", {
+			className: "grid gap-3 px-5 pt-4",
+			children: [
+				/* @__PURE__ */ T("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ w(d, {
+							variant: "ghost",
+							size: "icon-sm",
+							"aria-label": f("crop.zoomOut"),
+							disabled: K || B <= 1,
+							onClick: () => V((e) => Math.max(1, e - j)),
+							children: /* @__PURE__ */ w(A, {
+								icon: O,
+								strokeWidth: 2,
+								className: "size-3.5"
+							})
+						}),
+						/* @__PURE__ */ w(ee, {
+							"aria-label": f("crop.zoom"),
+							className: "mx-1 flex-1",
+							min: 1,
+							max: Z,
+							step: .01,
+							value: B,
+							disabled: K,
+							onValueChange: (e) => V(Array.isArray(e) ? e[0] : e)
+						}),
+						/* @__PURE__ */ w(d, {
+							variant: "ghost",
+							size: "icon-sm",
+							"aria-label": f("crop.zoomIn"),
+							disabled: K || B >= Z,
+							onClick: () => V((e) => Math.min(Z, e + j)),
+							children: /* @__PURE__ */ w(A, {
+								icon: O,
+								strokeWidth: 2,
+								className: "size-5"
+							})
+						}),
+						a.rotatable !== !1 && /* @__PURE__ */ T(C, { children: [
+							/* @__PURE__ */ w("span", {
+								className: "mx-1 h-5 w-px bg-border",
+								"aria-hidden": !0
+							}),
+							/* @__PURE__ */ w(d, {
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": f("crop.rotateLeft"),
+								disabled: K,
+								onClick: () => $(-90),
+								children: /* @__PURE__ */ w(A, {
+									icon: k,
+									strokeWidth: 2
+								})
+							}),
+							/* @__PURE__ */ w(d, {
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": f("crop.rotateRight"),
+								disabled: K,
+								onClick: () => $(90),
+								children: /* @__PURE__ */ w(A, {
+									icon: k,
+									strokeWidth: 2,
+									className: "-scale-x-100"
+								})
+							})
+						] }),
+						/* @__PURE__ */ w(d, {
+							variant: "ghost",
+							size: "sm",
+							disabled: K,
+							onClick: () => {
+								if (a.onReset) return a.onReset();
+								g(0), M.reset(), Q();
+							},
+							className: "text-muted-foreground",
+							children: f("crop.reset")
+						})
+					]
+				}),
+				a.preview !== !1 && /* @__PURE__ */ w(L, {
+					source: p,
+					crop: M.crop,
+					rotate: M.rotate,
+					round: a.round,
+					size: q
+				}),
+				X && /* @__PURE__ */ T(l, {
+					variant: "destructive",
+					role: "alert",
+					"data-ckui": "too-small",
+					children: [/* @__PURE__ */ w(A, {
+						icon: D,
+						strokeWidth: 2
+					}), /* @__PURE__ */ w(u, { children: f("crop.tooSmall", {
+						width: Y,
+						min: J
+					}) })]
+				}),
+				oe && /* @__PURE__ */ T(l, {
+					className: "border-warning/30 bg-warning/10 text-warning",
+					"data-ckui": "undersized",
+					children: [/* @__PURE__ */ w(A, {
+						icon: D,
+						strokeWidth: 2
+					}), /* @__PURE__ */ w(u, {
+						className: "text-warning/90",
+						children: f("crop.undersized", {
+							width: q.width,
+							target: a.targetWidth
+						})
+					})]
+				}),
+				a.error && /* @__PURE__ */ T(l, {
+					variant: "destructive",
+					role: "alert",
+					children: [/* @__PURE__ */ w(A, {
+						icon: D,
+						strokeWidth: 2
+					}), /* @__PURE__ */ w(u, { children: a.error })]
+				}),
+				K && /* @__PURE__ */ w(s, {
+					value: y(a.progress, a.rendering),
+					className: "gap-2",
+					"aria-label": v(f, a.progress, a.rendering),
+					children: /* @__PURE__ */ w("span", {
+						className: "text-xs text-muted-foreground",
+						children: v(f, a.progress, a.rendering)
+					})
+				})
+			]
+		}),
+		/* @__PURE__ */ T(h, {
+			className: "px-5 pt-4 pb-5",
+			children: [/* @__PURE__ */ w(d, {
+				variant: "outline",
+				disabled: K,
+				onClick: () => a.onOpenChange(!1),
+				children: f("common.cancel")
+			}), /* @__PURE__ */ w(d, {
+				disabled: K || X || ae,
+				onClick: () => a.onConfirm(M.edit),
+				children: K ? f("common.saving") : a.confirmLabel ?? f("common.save")
+			})]
+		})
+	] });
+}
+function F() {}
+var I = 72;
+function L({ source: e, crop: t, rotate: r, round: i, size: a }) {
+	let { t: o } = n(), s = r % 180 != 0, c = I / Math.max(t.w, t.h);
+	return /* @__PURE__ */ T("div", {
+		className: "flex items-center gap-3",
+		"data-ckui": "crop-preview",
+		children: [/* @__PURE__ */ w("span", {
+			role: "img",
+			"aria-label": o("crop.preview"),
+			className: E("relative shrink-0 overflow-hidden bg-muted ring-1 ring-border", i ? "rounded-full" : "rounded-sm"),
+			style: {
+				width: (s ? t.h : t.w) * c,
+				height: (s ? t.w : t.h) * c
+			},
+			children: /* @__PURE__ */ w("span", {
+				className: "absolute top-1/2 left-1/2 bg-no-repeat",
+				style: {
+					width: t.w * c,
+					height: t.h * c,
+					backgroundImage: `url("${e.url}")`,
+					backgroundSize: `${e.width * c}px ${e.height * c}px`,
+					backgroundPosition: `${-t.x * c}px ${-t.y * c}px`,
+					transform: `translate(-50%, -50%) rotate(${r}deg)`
+				}
+			})
+		}), /* @__PURE__ */ w("span", {
+			className: "text-xs text-muted-foreground tabular-nums",
+			"data-ckui": "crop-size",
+			children: o("crop.size", {
+				width: a.width,
+				height: a.height
+			})
+		})]
+	});
+}
+function R(e, t, n) {
+	let i = a(e, t, n), o = r(t, n);
+	return {
+		x: i.x / o.width * 100,
+		y: i.y / o.height * 100,
+		width: i.w / o.width * 100,
+		height: i.h / o.height * 100
+	};
+}
+//#endregion
+export { M as ImageCropDialog };
+
+//# sourceMappingURL=image-crop-dialog.js.map

package/dist/components/image-crop-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-crop-dialog.js","names":[],"sources":["../../src/components/image-crop-dialog.tsx"],"sourcesContent":["import { aspectOf, ratio, type AspectRatio } from \"../client/aspect.js\";\nimport { Alert02Icon, Image01Icon, RotateClockwiseIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport Cropper, { type Area, type Point } from \"react-easy-crop\";\nimport type { Progress as UploadProgress } from \"../client/media/client.js\";\nimport { editedSize, rotation, toRotated, type Rotation, type Size } from \"../client/crop.js\";\nimport type { CropSource } from \"../client/image.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { useCrop } from \"../react/upload.js\";\nimport { editOutput } from \"../react/slot.js\";\nimport type { Edit } from \"../client/generated/wire.js\";\nimport { Alert, AlertDescription } from \"#ckui/ui/alert\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from \"#ckui/ui/dialog\";\nimport { Progress } from \"#ckui/ui/progress\";\nimport { Slider } from \"#ckui/ui/slider\";\nimport { progressLabel, progressValue } from \"./progress.js\";\n\nconst MAX_ZOOM = 5;\nconst ZOOM_STEP = 0.25;\n\nexport interface ImageCropDialogProps {\n  open: boolean;\n  /** Closing (Esc, the close button, Cancel) reports false. */\n  onOpenChange: (open: boolean) => void;\n  /** The image and its EXIF-oriented original size; edits are in those pixels. */\n  source: CropSource | null;\n  /** The output's \"W:H\" (after rotation); \"\" keeps the image's own shape. */\n  aspect: AspectRatio;\n  /**\n   * Shapes to choose from, \"\" being the original's (e.g. [\"\", \"1:1\", \"4:5\",\n   * \"16:9\"]). The chooser starts at aspect when listed, else the first.\n   */\n  aspects?: readonly AspectRatio[];\n  /** A small preview of the result beside the controls. Default true. */\n  preview?: boolean;\n  /** Circular mask (avatars); the saved crop is still the square around it. */\n  round?: boolean;\n  /** Offer 90° rotation. Default true. */\n  rotatable?: boolean;\n  /** Starting edit (re-crop); default centred at aspect, unrotated. */\n  initialEdit?: Edit | null;\n  /** Called with the edit on open and whenever its value changes (safe to pass a state setter). */\n  onEditChange?: (edit: Edit | null) => void;\n  /** The chosen edit; null is the full centred crop, unrotated. */\n  onConfirm: (edit: Edit | null) => void;\n  /** Warns when the output is narrower than this many source pixels. */\n  targetWidth?: number;\n  /** The narrowest edit the server accepts (the preset's Image.MinWidth): zoom stops there, and a smaller image cannot be confirmed. */\n  minWidth?: number;\n  title?: ReactNode;\n  description?: ReactNode;\n  confirmLabel?: ReactNode;\n  /** A save is running: controls lock and progress shows. */\n  busy?: boolean;\n  progress?: UploadProgress;\n  /** The worker is rendering the outputs (indeterminate progress). */\n  rendering?: boolean;\n  /** Shown above the footer, e.g. a mapped ContentKitError. */\n  error?: ReactNode;\n  className?: string;\n}\n\n/** Pan, zoom (slider, wheel, pinch, keyboard), rotate and confirm a fixed-aspect edit. */\nexport function ImageCropDialog(p: ImageCropDialogProps) {\n  const { t } = useMessages();\n  const busy = !!p.busy;\n  return (\n    <Dialog open={p.open} onOpenChange={(o) => !busy && p.onOpenChange(o)}>\n      <DialogContent className={cn(\"gap-0 overflow-hidden p-0 sm:max-w-xl\", p.className)} showCloseButton={!busy} data-ckui=\"crop-dialog\">\n        <DialogHeader className=\"px-5 pt-5 pb-4 pr-12\">\n          <DialogTitle>{p.title ?? t(\"crop.title\")}</DialogTitle>\n          <DialogDescription>{p.description ?? t(\"crop.description\")}</DialogDescription>\n        </DialogHeader>\n        {p.source && <CropShapes key={p.source.url} {...p} source={p.source} />}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n// The shape chooser: each choice crops afresh; the initial edit belongs to the starting shape.\nfunction CropShapes(p: ImageCropDialogProps & { source: CropSource }) {\n  const { t } = useMessages();\n  const shapes = p.aspects?.length ? p.aspects : null;\n  const start = shapes && !shapes.includes(p.aspect) ? shapes[0]! : p.aspect;\n  const [shape, setShape] = useState(start);\n  const chooser = shapes && shapes.length > 1 && (\n    <div className=\"flex items-center gap-2 px-5 pb-3\" data-ckui=\"crop-shapes\">\n      <span className=\"text-xs text-muted-foreground\">{t(\"crop.shape\")}</span>\n      <div className=\"inline-flex flex-wrap gap-0.5 rounded-lg bg-muted p-0.5\" role=\"group\" aria-label={t(\"crop.shape\")}>\n        {shapes.map((a) => (\n          <button\n            key={a || \"original\"}\n            type=\"button\"\n            aria-pressed={shape === a}\n            disabled={!!p.busy}\n            onClick={() => setShape(a)}\n            className={cn(\n              \"inline-flex h-7 items-center rounded-md px-2.5 text-xs font-medium text-muted-foreground tabular-nums transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50\",\n              shape === a && \"bg-background text-foreground shadow-xs\",\n            )}\n          >\n            {a || t(\"crop.original\")}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n  return (\n    <>\n      {chooser}\n      <CropBody key={shape} {...p} aspect={shape} initialEdit={shape === start ? p.initialEdit : null} onReset={shape === start ? undefined : () => setShape(start)} />\n    </>\n  );\n}\n\nfunction CropBody(p: ImageCropDialogProps & { source: CropSource; onReset?: () => void }) {\n  const { t } = useMessages();\n  const { source } = p;\n  // A native aspect (\"\") crops at the image's own shape.\n  // A native shape (\"\") is the image's own, turned with it: the whole image fits.\n  const [turn, setTurn] = useState<Rotation>(() => rotation(p.initialEdit?.rotate ?? 0));\n  const aspect = ratio(p.aspect) ? p.aspect : turn % 180 ? aspectOf(source.height, source.width) : aspectOf(source.width, source.height);\n  const size: Size = useMemo(() => ({ width: source.width, height: source.height }), [source.width, source.height]);\n  const c = useCrop({ source: size, aspect, initial: p.initialEdit });\n  // A native shape turned with the image: crop the whole image again, as the cropper recenters.\n  const shaped = useRef(aspect);\n  const { setCrop } = c;\n  useEffect(() => {\n    if (shaped.current === aspect) return;\n    shaped.current = aspect;\n    setCrop({ x: 0, y: 0, w: size.width, h: size.height });\n  }, [aspect, size, setCrop]);\n  const [pos, setPos] = useState<Point>({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [interacting, setInteracting] = useState(false);\n  const [initial, setInitial] = useState<Area | undefined>(() => (p.initialEdit?.crop ? percentOf(c.crop, size, c.rotate) : undefined));\n  const onEditChange = useRef(p.onEditChange);\n  onEditChange.current = p.onEditChange;\n  const busy = !!p.busy;\n\n  useEffect(() => onEditChange.current?.(c.edit), [c.edit]);\n\n  const out = editOutput(size, c.edit, aspect);\n  const min = p.minWidth ?? 0;\n  // Zoom z shows 1/z of the widest crop; stop where the crop would fall under min.\n  const widest = editOutput(size, { rotate: c.rotate }, aspect).width;\n  const tooSmall = widest < min;\n  const maxZoom = tooSmall ? 1 : Math.max(1, Math.min(MAX_ZOOM, widest / Math.max(1, min)));\n  const belowMin = out.width < min;\n  const undersized = !tooSmall && !!(p.targetWidth && out.width < p.targetWidth);\n  useEffect(() => {\n    if (zoom > maxZoom) setZoom(maxZoom);\n  }, [zoom, maxZoom]);\n\n  const complete = (area: Area) => {\n    // Before the media has a size the cropper reports NaN areas.\n    if (!(area.width > 0 && area.height > 0) || !Number.isFinite(area.x + area.y)) return;\n    const shown = editedSize(size, c.rotate);\n    const k = (v: number, of: number) => (v / 100) * of;\n    c.setFromDisplay(\n      { x: k(area.x, shown.width), y: k(area.y, shown.height), w: k(area.width, shown.width), h: k(area.height, shown.height) },\n      shown,\n    );\n  };\n\n  const recenter = () => {\n    setInitial(undefined);\n    setPos({ x: 0, y: 0 });\n    setZoom(1);\n  };\n  const rotate = (deg: number) => {\n    setTurn((r) => rotation(r + deg));\n    c.rotateBy(deg);\n    recenter();\n  };\n  const reset = () => {\n    if (p.onReset) return p.onReset();\n    setTurn(0);\n    c.reset();\n    recenter();\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (busy) return;\n    if (e.key === \"+\" || e.key === \"=\") setZoom((z) => Math.min(maxZoom, z + ZOOM_STEP));\n    else if (e.key === \"-\" || e.key === \"_\") setZoom((z) => Math.max(1, z - ZOOM_STEP));\n    else if (p.rotatable !== false && (e.key === \"r\" || e.key === \"R\")) rotate(e.shiftKey ? -90 : 90);\n    else return;\n    e.preventDefault();\n  };\n\n  return (\n    <>\n      <div\n        className=\"relative h-72 w-full bg-zinc-950 sm:h-80 [&_.reactEasyCrop_CropArea]:border-white/70 [&_.reactEasyCrop_CropArea]:text-black/65\"\n        onKeyDown={onKeyDown}\n        data-ckui=\"crop-stage\"\n      >\n        <div className=\"absolute inset-3 sm:inset-4\">\n          <Cropper\n            image={source.url}\n            crop={pos}\n            zoom={zoom}\n            rotation={c.rotate}\n            aspect={ratio(aspect)}\n            minZoom={1}\n            maxZoom={maxZoom}\n            zoomSpeed={0.5}\n            cropShape={p.round ? \"round\" : \"rect\"}\n            showGrid={!p.round || interacting}\n            objectFit=\"contain\"\n            initialCroppedAreaPercentages={initial}\n            onCropChange={busy ? noop : setPos}\n            onZoomChange={busy ? noop : setZoom}\n            onCropComplete={complete}\n            onInteractionStart={() => setInteracting(true)}\n            onInteractionEnd={() => setInteracting(false)}\n            keyboardStep={8}\n            disableAutomaticStylesInjection\n            mediaProps={{ alt: \"\", draggable: false }}\n            cropperProps={{ \"aria-label\": t(\"crop.area\"), role: \"application\" } as never}\n          />\n        </div>\n      </div>\n\n      <div className=\"grid gap-3 px-5 pt-4\">\n        <div className=\"flex items-center gap-1.5\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={t(\"crop.zoomOut\")}\n            disabled={busy || zoom <= 1}\n            onClick={() => setZoom((z) => Math.max(1, z - ZOOM_STEP))}\n          >\n            <HugeiconsIcon icon={Image01Icon} strokeWidth={2} className=\"size-3.5\" />\n          </Button>\n          <Slider\n            aria-label={t(\"crop.zoom\")}\n            className=\"mx-1 flex-1\"\n            min={1}\n            max={maxZoom}\n            step={0.01}\n            value={zoom}\n            disabled={busy}\n            onValueChange={(v) => setZoom(Array.isArray(v) ? v[0]! : (v as number))}\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={t(\"crop.zoomIn\")}\n            disabled={busy || zoom >= maxZoom}\n            onClick={() => setZoom((z) => Math.min(maxZoom, z + ZOOM_STEP))}\n          >\n            <HugeiconsIcon icon={Image01Icon} strokeWidth={2} className=\"size-5\" />\n          </Button>\n          {p.rotatable !== false && (\n            <>\n              <span className=\"mx-1 h-5 w-px bg-border\" aria-hidden />\n              <Button variant=\"ghost\" size=\"icon-sm\" aria-label={t(\"crop.rotateLeft\")} disabled={busy} onClick={() => rotate(-90)}>\n                <HugeiconsIcon icon={RotateClockwiseIcon} strokeWidth={2} />\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" aria-label={t(\"crop.rotateRight\")} disabled={busy} onClick={() => rotate(90)}>\n                <HugeiconsIcon icon={RotateClockwiseIcon} strokeWidth={2} className=\"-scale-x-100\" />\n              </Button>\n            </>\n          )}\n          <Button variant=\"ghost\" size=\"sm\" disabled={busy} onClick={reset} className=\"text-muted-foreground\">\n            {t(\"crop.reset\")}\n          </Button>\n        </div>\n\n        {p.preview !== false && <ResultPreview source={source} crop={c.crop} rotate={c.rotate} round={p.round} size={out} />}\n        {tooSmall && (\n          <Alert variant=\"destructive\" role=\"alert\" data-ckui=\"too-small\">\n            <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} />\n            <AlertDescription>{t(\"crop.tooSmall\", { width: widest, min })}</AlertDescription>\n          </Alert>\n        )}\n        {undersized && (\n          <Alert className=\"border-warning/30 bg-warning/10 text-warning\" data-ckui=\"undersized\">\n            <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} />\n            <AlertDescription className=\"text-warning/90\">{t(\"crop.undersized\", { width: out.width, target: p.targetWidth! })}</AlertDescription>\n          </Alert>\n        )}\n        {p.error && (\n          <Alert variant=\"destructive\" role=\"alert\">\n            <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} />\n            <AlertDescription>{p.error}</AlertDescription>\n          </Alert>\n        )}\n        {busy && (\n          <Progress value={progressValue(p.progress, p.rendering)} className=\"gap-2\" aria-label={progressLabel(t, p.progress, p.rendering)}>\n            <span className=\"text-xs text-muted-foreground\">{progressLabel(t, p.progress, p.rendering)}</span>\n          </Progress>\n        )}\n      </div>\n\n      <DialogFooter className=\"px-5 pt-4 pb-5\">\n        <Button variant=\"outline\" disabled={busy} onClick={() => p.onOpenChange(false)}>\n          {t(\"common.cancel\")}\n        </Button>\n        <Button disabled={busy || tooSmall || belowMin} onClick={() => p.onConfirm(c.edit)}>\n          {busy ? t(\"common.saving\") : (p.confirmLabel ?? t(\"common.save\"))}\n        </Button>\n      </DialogFooter>\n    </>\n  );\n}\n\nfunction noop() {}\n\nconst PREVIEW = 72;\n\n// The crop as it will render: the source drawn through the crop, turned.\nfunction ResultPreview({ source, crop, rotate, round, size }: { source: CropSource; crop: { x: number; y: number; w: number; h: number }; rotate: 0 | 90 | 180 | 270; round?: boolean; size: Size }) {\n  const { t } = useMessages();\n  const turned = rotate % 180 !== 0;\n  const k = PREVIEW / Math.max(crop.w, crop.h);\n  return (\n    <div className=\"flex items-center gap-3\" data-ckui=\"crop-preview\">\n      <span\n        role=\"img\"\n        aria-label={t(\"crop.preview\")}\n        className={cn(\"relative shrink-0 overflow-hidden bg-muted ring-1 ring-border\", round ? \"rounded-full\" : \"rounded-sm\")}\n        style={{ width: (turned ? crop.h : crop.w) * k, height: (turned ? crop.w : crop.h) * k }}\n      >\n        <span\n          className=\"absolute top-1/2 left-1/2 bg-no-repeat\"\n          style={{\n            width: crop.w * k,\n            height: crop.h * k,\n            backgroundImage: `url(\"${source.url}\")`,\n            backgroundSize: `${source.width * k}px ${source.height * k}px`,\n            backgroundPosition: `${-crop.x * k}px ${-crop.y * k}px`,\n            transform: `translate(-50%, -50%) rotate(${rotate}deg)`,\n          }}\n        />\n      </span>\n      <span className=\"text-xs text-muted-foreground tabular-nums\" data-ckui=\"crop-size\">\n        {t(\"crop.size\", { width: size.width, height: size.height })}\n      </span>\n    </div>\n  );\n}\n\n/** The crop as percentages of the rotated image, as the cropper takes it. */\nfunction percentOf(crop: { x: number; y: number; w: number; h: number }, source: Size, rot: 0 | 90 | 180 | 270): Area {\n  const r = toRotated(crop, source, rot);\n  const shown = editedSize(source, rot);\n  return { x: (r.x / shown.width) * 100, y: (r.y / shown.height) * 100, width: (r.w / shown.width) * 100, height: (r.h / shown.height) * 100 };\n}\n"],"mappings":"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"}

package/dist/components/lazy-mount.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, ReactNode } from 'react';
+import { NearViewportOptions } from '../react/viewport.js';
+export interface LazyMountProps extends NearViewportOptions, Omit<ComponentProps<"div">, "children"> {
+    /** Mounted once the box nears the viewport (and, with leaveMargin, unmounted far away). */
+    children?: ReactNode;
+    /** Rendered while not near, e.g. a box at the content's size so the page keeps its height. */
+    placeholder?: ReactNode;
+}
+/** A box whose children mount as it nears the viewport: feeds read and play media lazily. */
+export declare function LazyMount({ margin, leaveMargin, eager, root, children, placeholder, ...div }: LazyMountProps): import('react').JSX.Element;

package/dist/components/lazy-mount.js

@@ -0,0 +1,22 @@
+import { useNearViewport as e } from "../react/viewport.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/lazy-mount.tsx
+function n({ margin: n, leaveMargin: r, eager: i, root: a, children: o, placeholder: s, ...c }) {
+	let [l, u] = e({
+		margin: n,
+		leaveMargin: r,
+		eager: i,
+		root: a
+	});
+	return /* @__PURE__ */ t("div", {
+		...c,
+		ref: l,
+		"data-ckui": "lazy-mount",
+		"data-near": u ? "" : void 0,
+		children: u ? o : s
+	});
+}
+//#endregion
+export { n as LazyMount };
+
+//# sourceMappingURL=lazy-mount.js.map

package/dist/components/lazy-mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-mount.js","names":[],"sources":["../../src/components/lazy-mount.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\nimport { useNearViewport, type NearViewportOptions } from \"../react/viewport.js\";\n\nexport interface LazyMountProps extends NearViewportOptions, Omit<ComponentProps<\"div\">, \"children\"> {\n  /** Mounted once the box nears the viewport (and, with leaveMargin, unmounted far away). */\n  children?: ReactNode;\n  /** Rendered while not near, e.g. a box at the content's size so the page keeps its height. */\n  placeholder?: ReactNode;\n}\n\n/** A box whose children mount as it nears the viewport: feeds read and play media lazily. */\nexport function LazyMount({ margin, leaveMargin, eager, root, children, placeholder, ...div }: LazyMountProps) {\n  const [ref, near] = useNearViewport({ margin, leaveMargin, eager, root });\n  return (\n    <div {...div} ref={ref} data-ckui=\"lazy-mount\" data-near={near ? \"\" : undefined}>\n      {near ? children : placeholder}\n    </div>\n  );\n}\n"],"mappings":";;;AAWA,SAAgB,EAAU,EAAE,WAAQ,gBAAa,UAAO,SAAM,aAAU,gBAAa,GAAG,KAAuB;CAC7G,IAAM,CAAC,GAAK,KAAQ,EAAgB;EAAE;EAAQ;EAAa;EAAO;CAAK,CAAC;CACxE,OACE,kBAAC,OAAD;EAAK,GAAI;EAAU;EAAK,aAAU;EAAa,aAAW,IAAO,KAAK,KAAA;EACnE,UAAA,IAAO,IAAW;CAChB,CAAA;AAET"}

package/dist/components/media-folder-editor.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode, Ref } from 'react';
+import { ContentKitUiAppearance } from '../appearance.js';
+import { AspectRatio } from '../client/aspect.js';
+import { FileInfo, RefBody, UploadRule } from '../client/generated/wire.js';
+import { Translator } from '../i18n/messages.js';
+import { MediaFolderOptions, UseMediaFolder } from '../react/folder.js';
+export interface MediaFolderEditorHandle {
+    /** Stops every upload and empties the queue (before deleting a draft). */
+    discard: () => void;
+    /** Commits the uploaded files (commit="manual"). */
+    commit: () => Promise<FileInfo[]>;
+    /** The folder's state and updates. */
+    folder: UseMediaFolder;
+}
+export interface MediaFolderEditorViewProps {
+    ref?: Ref<MediaFolderEditorHandle>;
+    /** Heading; default "Media". */
+    label?: ReactNode;
+    /** Beside "Add files" in the header, e.g. a ZIP import. */
+    toolbar?: ReactNode;
+    /** Extra actions on each upload, beside crop, rename, replace and remove. */
+    rowActions?: (file: FileInfo) => ReactNode;
+    /** Below the lists, e.g. what readers without access see. */
+    footer?: ReactNode;
+    /** Shapes offered when cropping an image whose path has no preset shape; "" is the original's. */
+    aspects?: readonly AspectRatio[];
+    /** Asked before removing selected uploads; default the browser's confirm; false skips it. */
+    confirmRemove?: ((count: number) => boolean | Promise<boolean>) | false;
+    disabled?: boolean;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * Either the item, and the editor opens its folder with the options; or a
+ * folder the host opened (`folder={useMediaFolder(ref, options)}`), whose
+ * state the host reads and renders with.
+ */
+export type MediaFolderEditorProps = MediaFolderEditorViewProps & (({
+    /** The item whose folder this edits. */
+    item: RefBody;
+    folder?: never;
+} & MediaFolderOptions) | ({
+    /** The host's folder (useMediaFolder); its ref may be null until the item exists. */
+    folder: UseMediaFolder;
+    item?: never;
+} & {
+    [K in keyof MediaFolderOptions]?: never;
+}));
+/** The rules as a sentence for the drop zone: sizes, caps and video shapes. */
+export declare function describeRules(t: Translator["t"], rules: readonly UploadRule[]): string;
+/**
+ * An item's folder for its editors: drop or pick files (screened against the
+ * kind's upload rules), a queue with progress, retry and remove, and each
+ * upload path's uploads as a sortable list with thumbnail, name, edited
+ * badge, encode progress and failures; crop, rename, replace and bulk
+ * remove. commit="manual" adds the queue with "Add N"; "auto" commits as
+ * files finish (a draft; discard() through the ref).
+ */
+export declare function MediaFolderEditor(p: MediaFolderEditorProps): import('react').JSX.Element;