@bettercms-ai/kit 2.0.0 → 2.0.2

package/dist/controls/media.js

@@ -297,35 +297,6 @@ var NO_LIBRARY = "No media library is connected to this editor, so nothing can b
 var NO_UPLOAD = "No upload is connected to this editor, so files can't be uploaded here.";
 /** Transparency checker on the kit tokens (white in light, dimmed in dark), as the media grid draws it. */
 var CHECKER = "bg-kit-checker-a [background-image:conic-gradient(var(--kit-checker-b)_25%,var(--kit-checker-a)_0_50%,var(--kit-checker-b)_0_75%,var(--kit-checker-a)_0)] [background-size:12px_12px]";
-/** The preview frame's shape bounds: a tall or panoramic picture never makes the dock tall or a sliver. */
-var FRAME_MIN = 1;
-var FRAME_MAX = 2;
-/**
-* How a preview frames a picture of any shape: the frame follows the picture's ratio between square and 2:1, and the
-* picture fits inside it WHOLE, filling the frame's width or height (a portrait is boxed at the sides, a panorama above
-* and below, on the checker). With no known size (still loading, or an SVG with no intrinsic size) the frame is 16:9
-* and the picture is contained. Before 2026-10-16 every picture was cropped to a fixed 16:9 (`object-cover`).
-*/
-function frameFit(size) {
-	if (!size || !(size.w > 0) || !(size.h > 0)) return {
-		frame: 16 / 9,
-		image: null,
-		fill: "contain"
-	};
-	const image = size.w / size.h;
-	const frame = Math.min(FRAME_MAX, Math.max(FRAME_MIN, image));
-	return {
-		frame,
-		image,
-		fill: image < frame ? "height" : "width"
-	};
-}
-/** The picture's classes for a fit: it keeps its own ratio and the frame's width or height, never cut. */
-var FIT_CLASS = {
-	width: "h-auto max-h-full w-full object-contain",
-	height: "h-full w-auto max-w-full object-contain",
-	contain: "size-full object-contain"
-};
 /** V2's five crops (kit media.tsx CROPS, D46). */
 var CROPS = [
 	{
@@ -390,9 +361,7 @@ function ImageDetails({ v, onChange, readOnly, label, urlOnly, altOnly = false,
 	};
 	const choice = cropChoice(v.crop, size);
 	const crop = CROPS.find((c) => c.value === choice);
-	const own = choice === "original" && size ? frameFit(size) : null;
-	const pad = own?.image ? own : null;
-	const padRatio = crop && crop.ratio !== "auto" ? crop.ratio : pad ? String(pad.image) : customRatio(v.crop, size) ?? "3/2";
+	const padRatio = crop && crop.ratio !== "auto" ? crop.ratio : customRatio(v.crop, size) ?? "3/2";
 	const setFocal = (x, y) => {
 		const next = {
 			...v,
@@ -510,49 +479,45 @@ function ImageDetails({ v, onChange, readOnly, label, urlOnly, altOnly = false,
 						className: "text-kit-2xs text-kit-fg-3",
 						children: "The crop is cut from the picture's size, which is still loading."
 					}) : null,
-					/* @__PURE__ */ jsx("div", {
-						className: cn(pad ? "mt-1 flex items-center justify-center overflow-hidden rounded-kit-md border border-kit-line" : "contents", pad && CHECKER),
-						style: pad ? { aspectRatio: pad.frame } : void 0,
-						children: /* @__PURE__ */ jsxs("div", {
-							role: "slider",
-							"aria-label": "Focal point. Click the subject.",
-							"aria-valuetext": `${focal.x}% across, ${focal.y}% down`,
-							"aria-valuenow": focal.x,
-							"aria-valuemin": 0,
-							"aria-valuemax": 100,
-							"aria-readonly": readOnly || void 0,
-							tabIndex: 0,
-							onPointerDown: (e) => !readOnly && fromPointer(e),
-							onKeyDown: (e) => {
-								const d = e.shiftKey ? 10 : 2;
-								const step = {
-									ArrowLeft: [-d, 0],
-									ArrowRight: [d, 0],
-									ArrowUp: [0, -d],
-									ArrowDown: [0, d]
-								}[e.key];
-								if (!step || readOnly) return;
-								e.preventDefault();
-								setFocal(focal.x + step[0], focal.y + step[1]);
-							},
-							"data-pad-ratio": padRatio,
-							className: pad ? cn("relative cursor-crosshair overflow-hidden", pad.fill === "height" ? "h-full" : "w-full") : "relative mt-1 cursor-crosshair overflow-hidden rounded-kit-md border border-kit-line bg-kit-muted",
-							style: { aspectRatio: padRatio },
-							children: [/* @__PURE__ */ jsx("img", {
-								src: src(v.url),
-								alt: "",
-								draggable: false,
-								className: "pointer-events-none size-full select-none object-cover transition-[object-position] duration-200",
-								style: { objectPosition: `${focal.x}% ${focal.y}%` }
-							}), /* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-kit-media-handle bg-kit-media-handle-ring shadow-kit-md transition-[left,top] duration-150",
-								style: {
-									left: `${focal.x}%`,
-									top: `${focal.y}%`
-								}
-							})]
-						})
+					/* @__PURE__ */ jsxs("div", {
+						role: "slider",
+						"aria-label": "Focal point. Click the subject.",
+						"aria-valuetext": `${focal.x}% across, ${focal.y}% down`,
+						"aria-valuenow": focal.x,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-readonly": readOnly || void 0,
+						tabIndex: 0,
+						onPointerDown: (e) => !readOnly && fromPointer(e),
+						onKeyDown: (e) => {
+							const d = e.shiftKey ? 10 : 2;
+							const step = {
+								ArrowLeft: [-d, 0],
+								ArrowRight: [d, 0],
+								ArrowUp: [0, -d],
+								ArrowDown: [0, d]
+							}[e.key];
+							if (!step || readOnly) return;
+							e.preventDefault();
+							setFocal(focal.x + step[0], focal.y + step[1]);
+						},
+						"data-pad-ratio": padRatio,
+						className: "relative mt-1 cursor-crosshair overflow-hidden rounded-kit-md border border-kit-line bg-kit-muted",
+						style: { aspectRatio: padRatio },
+						children: [/* @__PURE__ */ jsx("img", {
+							src: src(v.url),
+							alt: "",
+							draggable: false,
+							className: "pointer-events-none size-full select-none object-cover transition-[object-position] duration-200",
+							style: { objectPosition: `${focal.x}% ${focal.y}%` }
+						}), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-kit-media-handle bg-kit-media-handle-ring shadow-kit-md transition-[left,top] duration-150",
+							style: {
+								left: `${focal.x}%`,
+								top: `${focal.y}%`
+							}
+						})]
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "text-kit-2xs text-kit-fg-3",
@@ -799,9 +764,11 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 			})
 		]
 	});
-	const fit = frameFit(size);
-	const vector = asset?.kind === "svg" || !!field.svgOnly || /\.svg(?:$|[?#])/i.test(v.url);
-	const cap = fit.image && size && !vector ? size : void 0;
+	const frameRatio = CROPS.find((c) => c.value === cropChoice(v.crop, size))?.ratio;
+	const focal = v.focal ?? {
+		x: 50,
+		y: 50
+	};
 	const alt = urlOnly ? asset?.alt : v.alt;
 	const name = asset?.name ?? v.name ?? fileNameFromUrl(v.url);
 	const replace = (a) => {
@@ -827,9 +794,8 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						"data-slot": "kit-image-frame",
-						"data-frame-ratio": String(fit.frame),
-						className: cn("group/img relative overflow-hidden rounded-kit-lg border border-kit-line", CHECKER),
-						style: { aspectRatio: fit.frame },
+						className: "group/img relative overflow-hidden rounded-kit-lg border border-kit-line bg-kit-muted",
+						style: { aspectRatio: frameRatio && frameRatio !== "auto" ? frameRatio : "16/9" },
 						children: [
 							/* @__PURE__ */ jsx("button", {
 								id,
@@ -843,17 +809,8 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 									alt: alt ?? "",
 									ref: readNatural,
 									onLoad: (e) => readNatural(e.currentTarget),
-									"data-fill": fit.fill,
-									"data-image-ratio": fit.image ?? void 0,
-									"data-cap": cap ? `${cap.w}x${cap.h}` : void 0,
-									className: FIT_CLASS[fit.fill],
-									style: fit.image ? {
-										aspectRatio: fit.image,
-										...cap ? {
-											maxWidth: `min(100%, ${cap.w}px)`,
-											maxHeight: `min(100%, ${cap.h}px)`
-										} : {}
-									} : void 0
+									className: "size-full object-cover",
+									style: { objectPosition: `${focal.x}% ${focal.y}%` }
 								})
 							}),
 							readOnly ? null : /* @__PURE__ */ jsxs("div", {
@@ -994,7 +951,7 @@ function Thumb({ item, label, readOnly, sort, onRemove, onOpen }) {
 		ref: sort.register(item.key),
 		role: "listitem",
 		style: sort.style(item.key),
-		className: cn("group/thumb relative aspect-square cursor-grab touch-none overflow-hidden rounded-kit-md border border-kit-line active:cursor-grabbing", CHECKER, sort.active === item.key && "z-10 opacity-90 shadow-kit-lg ring-2 ring-kit-line-strong"),
+		className: cn("group/thumb relative aspect-square cursor-grab touch-none overflow-hidden rounded-kit-md border border-kit-line bg-kit-muted active:cursor-grabbing", sort.active === item.key && "z-10 opacity-90 shadow-kit-lg ring-2 ring-kit-line-strong"),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				...readOnly ? {} : handle,
@@ -1020,7 +977,7 @@ function Thumb({ item, label, readOnly, sort, onRemove, onOpen }) {
 					src: src(item.v.url),
 					alt: item.v.alt ?? "",
 					"data-slot": "kit-gallery-thumb",
-					className: "pointer-events-none size-full select-none object-contain",
+					className: "pointer-events-none size-full select-none object-cover",
 					draggable: false
 				})
 			}),
@@ -1391,6 +1348,6 @@ function VideoControl({ field, value, onChange, readOnly, id, onBlur }) {
 	});
 }
 //#endregion
-export { FileControl, GalleryControl, ImageControl, MediaPicker, VideoControl, VideoPreview, acceptsFile, cropChoice, fileNameFromUrl, formatBytes, frameFit, fromAsset, isVideoUrl, normImage, useUpload, videoProvider, withCrop, youTubeId };
+export { FileControl, GalleryControl, ImageControl, MediaPicker, VideoControl, VideoPreview, acceptsFile, cropChoice, fileNameFromUrl, formatBytes, fromAsset, isVideoUrl, normImage, useUpload, videoProvider, withCrop, youTubeId };
 
 //# sourceMappingURL=media.js.map