@bettercms-ai/kit 1.0.0 → 2.0.0-next.1

package/{controls → dist/controls}/media.js

@@ -1,15 +1,19 @@
+import { cropPreset, cropRect, isCropRect } from "../adapters/values.js";
 import { cn } from "../lib/cn.js";
-import { isObj } from "../lib/path.js";
 import { useKitEnv, useKitServices } from "../context.js";
-import { Button } from "../ui/button.js";
+import { isObj } from "../lib/path.js";
+import { Button, IconButton } from "../ui/button.js";
 import { Progress } from "../ui/controls.js";
 import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverAnchor, PopoverContent, Tooltip } from "../ui/overlay.js";
+import { RowChrome } from "../engine/bits.js";
+import { isIconImage } from "../lib/icon-image.js";
 import { Input, Textarea } from "../ui/input.js";
+import { Select } from "../ui/select.js";
 import { useDragReorder } from "../engine/item-list.js";
 import * as React from "react";
-import { IconAlertTriangle, IconDots, IconDownload, IconExternalLink, IconFileText, IconFocusCentered, IconLink, IconPhoto, IconPlayerPlay, IconPlus, IconReplace, IconTrash, IconUpload, IconVideo, IconWorld, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/controls/media.tsx
+import { IconAlertTriangle, IconCrop, IconDots, IconDownload, IconExternalLink, IconFileText, IconFocusCentered, IconLink, IconPhoto, IconPlayerPlay, IconPlus, IconRefresh, IconReplace, IconTrash, IconUpload, IconVideo, IconWorld, IconX } from "@tabler/icons-react";
+//#region src/controls/media.tsx
 /**
 * MEDIA — image · gallery · file · video (V2 HEAD 9829bf1 kit/controls/media.tsx, DESIGN.md 8.15).
 *
@@ -19,8 +23,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * (media-services.ts): the kit never imports a feature, and a missing service is named in words, never faked.
 *
 * Kit deviations from V2, each because of what the backend stores (adapters/values.ts):
-*  - no "Crop for this placement" dropdown: `imageToProd` cannot store a crop preset (it becomes a pixel rect only with
-*    the asset's size, and never reads back as the preset), so the dock would refuse every write that carried one;
+*  - "Crop for this placement" is V2's five-crop dropdown, stored as the rect prod keeps (cut from the picture's own size,
+*    centred on the focal point); a stored rect reads back as its preset when the size is known, and is kept as it is
+*    otherwise. With no size yet, the dropdown waits, and says why;
 *  - a picked asset's width / height / size are read for the caption, never written into the value (prod rebuilds the
 *    value from url, id, name, altText and focal; the rest would be refused);
 *  - where the host stores the URL string only (`imageStoresUrl`, the dock's top-level image props) the value stays a
@@ -31,11 +36,15 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *    refuses a half-typed address.
 */
 var fileNameFromUrl = (url) => {
-	const last = url.split("?")[0].split("#")[0].split("/").filter(Boolean).pop() ?? "";
+	const inline = /^data:image\/([a-z0-9.+-]+)/i.exec(url.trim());
+	if (inline) return `Embedded ${inline[1].replace(/\+xml$/i, "").replace(/^jpeg$/i, "jpg").toUpperCase()} image`;
 	try {
-		return decodeURIComponent(last);
+		const u = new URL(url, typeof window === "undefined" ? "https://x.invalid" : window.location.href);
+		if (u.protocol === "data:" || u.protocol === "blob:") return "Image";
+		const file = u.pathname.split("/").filter(Boolean).reverse().find((x) => /\.[a-z0-9]{2,5}$/i.test(x));
+		return file ? decodeURIComponent(file) : `Image from ${u.hostname.replace(/^www\./, "")}`;
 	} catch {
-		return last;
+		return "Image";
 	}
 };
 var normImage = (v) => {
@@ -44,10 +53,10 @@ var normImage = (v) => {
 };
 /** What an asset becomes in a value: the keys prod keeps (url, id, name, alt), nothing measured. */
 var fromAsset = (a) => {
-	const out = {
+	const out = a.id ? {
 		url: a.url,
 		id: a.id
-	};
+	} : { url: a.url };
 	if (a.name) out.name = a.name;
 	if (a.alt) out.alt = a.alt;
 	return out;
@@ -57,6 +66,7 @@ var HTTP = /^https?:\/\/\S+$/i;
 /** An http(s) URL or a site path: what prod's video value takes (video-value.ts isVideoUrl). */
 var isVideoUrl = (s) => s === "" || HTTP.test(s.trim()) || /^\/(?!\/)\S*$/.test(s.trim());
 var NO_ASSET = () => void 0;
+var NO_ICONS = () => [];
 var NO_SRC = (u) => u;
 /** The services the media controls read, each hook stable across renders. */
 function useMedia() {
@@ -183,8 +193,8 @@ function DropWell({ id, title, hint, accept, multiple, icon, disabled, onFiles,
 				className: "text-kit-xs text-kit-fg-3",
 				children: hint
 			}) : null] }),
-			urlMode && onUrl ? /* @__PURE__ */ jsxs("form", {
-				className: "flex w-full max-w-sm flex-col gap-1.5",
+			urlMode && onUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("form", {
+				className: "flex w-full max-w-sm items-center gap-1.5",
 				onSubmit: (e) => {
 					e.preventDefault();
 					e.stopPropagation();
@@ -203,26 +213,22 @@ function DropWell({ id, title, hint, accept, multiple, icon, disabled, onFiles,
 						setUrlError(null);
 					}
 				},
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1.5",
-					children: [/* @__PURE__ */ jsx(Input, {
-						autoFocus: true,
-						size: "sm",
-						value: url,
-						"aria-label": "Image URL",
-						"aria-invalid": urlError ? true : void 0,
-						onChange: (e) => setUrl(e.target.value),
-						placeholder: "https://…/photo.jpg",
-						leading: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
-						className: "flex-1"
-					}), /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						type: "submit",
-						variant: "primary",
-						children: "Add"
-					})]
-				}), urlError ? /* @__PURE__ */ jsx(Reason, { children: urlError }) : null]
-			}) : /* @__PURE__ */ jsxs("div", {
+				children: [/* @__PURE__ */ jsx(Input, {
+					autoFocus: true,
+					size: "sm",
+					value: url,
+					"aria-label": "Image URL",
+					"aria-invalid": urlError ? true : void 0,
+					onChange: (e) => setUrl(e.target.value),
+					placeholder: "https://…/photo.jpg",
+					leading: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 })
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					type: "submit",
+					variant: "primary",
+					children: "Add"
+				})]
+			}), urlError ? /* @__PURE__ */ jsx(Reason, { children: urlError }) : null] }) : /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap justify-center gap-1.5",
 				children: [
 					onLibrary || refuse ? /* @__PURE__ */ jsx(Button, {
@@ -289,19 +295,83 @@ function DropWell({ id, title, hint, accept, multiple, icon, disabled, onFiles,
 var NO_SOURCE = "No media library or upload is connected to this editor, so nothing can be chosen here.";
 var NO_LIBRARY = "No media library is connected to this editor, so nothing can be picked from it here.";
 var NO_UPLOAD = "No upload is connected to this editor, so files can't be uploaded here.";
-function ImageDetails({ v, onChange, readOnly, label, urlOnly, size, asset }) {
+/** 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]";
+/** V2's five crops (kit media.tsx CROPS, D46). */
+var CROPS = [
+	{
+		value: "original",
+		label: "Original",
+		ratio: "auto",
+		description: "Keep the uploaded shape"
+	},
+	{
+		value: "16:9",
+		label: "16:9",
+		ratio: "16/9",
+		description: "Widescreen"
+	},
+	{
+		value: "4:3",
+		label: "4:3",
+		ratio: "4/3",
+		description: "Landscape"
+	},
+	{
+		value: "1:1",
+		label: "1:1",
+		ratio: "1/1",
+		description: "Square"
+	},
+	{
+		value: "4:5",
+		label: "4:5",
+		ratio: "4/5",
+		description: "Portrait"
+	}
+];
+var CUSTOM_CROP = "custom";
+/** The crop a value shows: its preset, a stored rect read against the picture's size, or a rect that is none of them. */
+function cropChoice(crop, size) {
+	if (!crop) return "original";
+	if (typeof crop === "string") return crop;
+	if (!isCropRect(crop)) return "original";
+	return size && cropPreset(crop, size.w, size.h) || CUSTOM_CROP;
+}
+/** A custom rect's own shape (its fractions of the picture, in pixels), when the picture's size is known. */
+function customRatio(crop, size) {
+	if (!size || !crop || typeof crop === "string" || !isCropRect(crop)) return void 0;
+	const w = (1 - crop.left - crop.right) * size.w;
+	const h = (1 - crop.top - crop.bottom) * size.h;
+	return w > 0 && h > 0 ? String(w / h) : void 0;
+}
+/** The value with `choice` cut from the picture (centred on its focal point), or with no crop for Original. */
+function withCrop(v, choice, size) {
+	const next = { ...v };
+	delete next.crop;
+	const rect = choice === "original" ? void 0 : cropRect(choice, size.w, size.h, v.focal);
+	if (rect) next.crop = rect;
+	return next;
+}
+function ImageDetails({ v, onChange, readOnly, label, urlOnly, altOnly = false, size, asset }) {
 	const { src } = useMedia();
 	const focal = v.focal ?? {
 		x: 50,
 		y: 50
 	};
-	const setFocal = (x, y) => onChange({
-		...v,
-		focal: {
-			x: Math.round(Math.min(100, Math.max(0, x))),
-			y: Math.round(Math.min(100, Math.max(0, y)))
-		}
-	});
+	const choice = cropChoice(v.crop, size);
+	const crop = CROPS.find((c) => c.value === choice);
+	const padRatio = crop && crop.ratio !== "auto" ? crop.ratio : customRatio(v.crop, size) ?? "3/2";
+	const setFocal = (x, y) => {
+		const next = {
+			...v,
+			focal: {
+				x: Math.round(Math.min(100, Math.max(0, x))),
+				y: Math.round(Math.min(100, Math.max(0, y)))
+			}
+		};
+		onChange(crop && crop.value !== "original" && size ? withCrop(next, crop.value, size) : next);
+	};
 	const fromPointer = (e) => {
 		const r = e.currentTarget.getBoundingClientRect();
 		if (!r.width || !r.height) return;
@@ -356,21 +426,29 @@ function ImageDetails({ v, onChange, readOnly, label, urlOnly, size, asset }) {
 					className: "min-h-14 text-kit-sm",
 					"aria-label": `${label} alt text`
 				})]
-			}), /* @__PURE__ */ jsxs("div", {
+			}), altOnly ? /* @__PURE__ */ jsx(Reason, {
+				tone: "muted",
+				children: "This image block keeps its address and alt text. A crop or focal point isn't stored with it."
+			}) : /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1.5",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center justify-between",
 						children: [/* @__PURE__ */ jsxs("span", {
 							className: "flex items-center gap-1 text-kit-xs text-kit-fg-3",
-							children: [/* @__PURE__ */ jsx(IconFocusCentered, {
+							children: [/* @__PURE__ */ jsx(IconCrop, {
 								className: "size-3.5",
 								stroke: 1.5,
 								"aria-hidden": true
-							}), "Focal point"]
+							}), "Crop for this placement"]
 						}), /* @__PURE__ */ jsxs("span", {
-							className: "tabular-nums text-kit-2xs text-kit-fg-3",
+							className: "flex items-center gap-1 text-kit-2xs text-kit-fg-3",
 							children: [
+								/* @__PURE__ */ jsx(IconFocusCentered, {
+									className: "size-3",
+									stroke: 1.5,
+									"aria-hidden": true
+								}),
 								"Focal ",
 								focal.x,
 								"%, ",
@@ -379,6 +457,28 @@ function ImageDetails({ v, onChange, readOnly, label, urlOnly, size, asset }) {
 							]
 						})]
 					}),
+					/* @__PURE__ */ jsx(Select, {
+						size: "sm",
+						"aria-label": `${label} crop`,
+						disabled: readOnly || !size,
+						triggerClassName: "w-full",
+						value: choice,
+						onValueChange: (c) => size && c !== CUSTOM_CROP && onChange(withCrop(v, c, size)),
+						options: [...CROPS.map((c) => ({
+							value: c.value,
+							label: c.label,
+							meta: c.description
+						})), ...choice === CUSTOM_CROP ? [{
+							value: CUSTOM_CROP,
+							label: "Custom",
+							meta: "Cut elsewhere",
+							disabled: true
+						}] : []]
+					}),
+					!size && !readOnly ? /* @__PURE__ */ jsx("span", {
+						className: "text-kit-2xs text-kit-fg-3",
+						children: "The crop is cut from the picture's size, which is still loading."
+					}) : null,
 					/* @__PURE__ */ jsxs("div", {
 						role: "slider",
 						"aria-label": "Focal point. Click the subject.",
@@ -401,16 +501,18 @@ function ImageDetails({ v, onChange, readOnly, label, urlOnly, size, asset }) {
 							e.preventDefault();
 							setFocal(focal.x + step[0], focal.y + step[1]);
 						},
-						className: "relative mt-1 aspect-[3/2] cursor-crosshair overflow-hidden rounded-kit-md border border-kit-line bg-kit-muted",
+						"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 motion-reduce:transition-none",
+							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-fg-inverse bg-kit-inverse/30 shadow-kit-md transition-[left,top] duration-150 motion-reduce:transition-none",
+							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}%`
@@ -423,7 +525,7 @@ function ImageDetails({ v, onChange, readOnly, label, urlOnly, size, asset }) {
 					})
 				]
 			})] }),
-			/* @__PURE__ */ jsxs("div", {
+			urlOnly || altOnly ? /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1.5",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-kit-xs text-kit-fg-3",
@@ -432,6 +534,26 @@ function ImageDetails({ v, onChange, readOnly, label, urlOnly, size, asset }) {
 					className: "truncate font-kit-mono text-kit-xs text-kit-fg",
 					children: asset?.name ?? v.name ?? fileNameFromUrl(v.url)
 				})]
+			}) : /* @__PURE__ */ jsxs("label", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: "File name"
+				}), /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					value: v.name ?? asset?.name ?? fileNameFromUrl(v.url),
+					readOnly,
+					spellCheck: false,
+					autoComplete: "off",
+					onChange: (e) => {
+						const next = { ...v };
+						if (e.target.value) next.name = e.target.value;
+						else delete next.name;
+						onChange(next);
+					},
+					className: "font-kit-mono [&_input]:font-kit-mono",
+					"aria-label": `${label} file name`
+				})]
 			})
 		]
 	});
@@ -445,19 +567,105 @@ function storedSize(value) {
 		h: height
 	} : void 0;
 }
-var PILL = "flex h-7 items-center gap-1 rounded-full border border-kit-swatch-ring bg-kit-control-bg px-2.5 text-kit-xs font-medium text-kit-fg shadow-kit-sm";
+/**
+* V2's icon control shape (controls/icon.tsx): ONE button — a 24px glyph tile, the field's name, a quiet replace cue —
+* that opens the library. No Replace pill, no ×, no alt text, crop or details: an icon's alt text is "" (aria-hidden on
+* the page) and Remove sits in the picker's footer. Empty: a dashed tile, "Add icon", and an SVG dropped on it uploads.
+*/
+function IconImageRow({ id, title, url, readOnly, onOpen, onFiles, busy, pickerOpen }) {
+	const row = React.useRef(null);
+	const [over, setOver] = React.useState(false);
+	const wasOpen = React.useRef(false);
+	React.useEffect(() => {
+		if (wasOpen.current && !pickerOpen) row.current?.focus({ preventScroll: true });
+		wasOpen.current = pickerOpen;
+	}, [pickerOpen]);
+	const empty = !url;
+	const inert = readOnly || busy || !onOpen;
+	const droppable = empty && !inert && !!onFiles;
+	const chrome = React.useContext(RowChrome);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-8 min-w-0 items-center rounded-kit-md border bg-kit-field-bg pointer-coarse:min-h-11", "transition-colors duration-[120ms] ease-out motion-reduce:transition-none", over ? "border-kit-emphasis-line bg-kit-hover" : "border-kit-line-strong", inert ? "opacity-60" : "[@media(hover:hover)]:hover:bg-kit-hover"),
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: title,
+			children: /* @__PURE__ */ jsxs("button", {
+				ref: row,
+				id,
+				type: "button",
+				"data-slot": "kit-icon-row",
+				disabled: inert,
+				onClick: onOpen,
+				"aria-label": empty ? `Add icon, ${title}` : `Replace ${title}`,
+				onDragOver: droppable ? (e) => {
+					e.preventDefault();
+					setOver(true);
+				} : void 0,
+				onDragLeave: droppable ? () => setOver(false) : void 0,
+				onDrop: droppable ? (e) => {
+					e.preventDefault();
+					setOver(false);
+					onFiles(Array.from(e.dataTransfer.files));
+				} : void 0,
+				className: "flex min-w-0 flex-1 touch-manipulation items-center gap-3 self-stretch rounded-[5px] pl-[3px] pr-2 text-left text-kit-sm focus-visible:-outline-offset-2 disabled:cursor-not-allowed",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("grid size-6 shrink-0 place-items-center overflow-hidden rounded-kit-sm border", empty ? "border-dashed border-kit-emphasis-line" : cn("border-kit-line p-1", CHECKER)),
+						children: empty ? /* @__PURE__ */ jsx(IconPlus, {
+							className: "size-3.5 text-kit-fg-3",
+							stroke: 1.5
+						}) : /* @__PURE__ */ jsx("img", {
+							src: url,
+							alt: "",
+							className: "size-full object-contain"
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("min-w-0 flex-1 truncate", empty ? "text-kit-fg-3" : "text-kit-fg"),
+						children: empty ? busy ? "Uploading…" : "Add icon" : title
+					}),
+					empty ? null : /* @__PURE__ */ jsx(IconRefresh, {
+						"aria-hidden": true,
+						className: "size-3.5 shrink-0 text-kit-fg-3",
+						stroke: 1.5
+					})
+				]
+			})
+		}), chrome ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "kit-icon-row-chrome",
+			className: "flex shrink-0 items-center gap-0.5 pr-1 empty:hidden",
+			children: chrome
+		}) : null]
+	});
+}
 function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 	const { s, useAsset, src } = useMedia();
 	const env = useKitEnv();
 	const urlOnly = !!s.imageStoresUrl?.(path);
+	const altOnly = !urlOnly && !!s.imageAltOnly?.(path);
 	const legacyString = typeof value === "string" || field.valueShape === "string";
 	const v = normImage(value);
 	const asset = useAsset({
 		id: v?.id,
 		url: v?.url ?? ""
 	});
-	const [natural, setNatural] = React.useState();
-	React.useEffect(() => setNatural(void 0), [v?.url]);
+	const accept = field.svgOnly ? "image/svg+xml" : "image/*";
+	const kinds = field.svgOnly ? ["svg"] : ["image", "svg"];
+	const [loaded, setLoaded] = React.useState();
+	const natural = loaded && v && loaded.url === v.url ? {
+		w: loaded.w,
+		h: loaded.h
+	} : void 0;
+	const readNatural = (img) => {
+		if (!img || !v || !img.complete || !img.naturalWidth || !img.naturalHeight) return;
+		const next = {
+			url: v.url,
+			w: img.naturalWidth,
+			h: img.naturalHeight
+		};
+		setLoaded((prev) => prev && prev.url === next.url && prev.w === next.w && prev.h === next.h ? prev : next);
+	};
 	const stored = storedSize(value);
 	const size = asset?.width && asset.height ? {
 		w: asset.width,
@@ -466,13 +674,68 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 	const onChange = (n) => {
 		if (!n) return write(urlOnly ? "" : null);
 		if (urlOnly) return write(n.url);
-		if (legacyString && !n.alt && !n.focal) return write(n.url);
+		if (legacyString && !n.alt && !n.focal && !n.crop && !n.name && !n.id) return write(n.url);
 		write(n);
 	};
 	const [picker, setPicker] = React.useState(false);
 	const [details, setDetails] = React.useState(false);
-	const up = useUpload("image/*", "image", (a) => a[0] && onChange(fromAsset(a[0])));
+	const up = useUpload(accept, "image", (a) => a[0] && onChange(fromAsset(a[0])));
 	const library = s.MediaPicker && !readOnly ? () => setPicker(true) : void 0;
+	const known = (s.useSiteIcons ?? NO_ICONS)();
+	if (isIconImage(field, value)) {
+		const icons = s.useSiteIcons ? [...v ? [{
+			url: v.url,
+			value,
+			current: true
+		}] : [], ...known.filter((i) => i.url !== v?.url && !(v?.id && i.assetId === v.id)).map(({ url, value: stored }) => ({
+			url,
+			value: stored
+		}))] : void 0;
+		const pickIcon = (stored) => {
+			const n = normImage(stored);
+			if (n) onChange(fromAsset({
+				id: n.id ?? "",
+				url: n.url,
+				name: n.name,
+				alt: n.alt ?? (typeof n.altText === "string" ? n.altText : void 0),
+				kind: "svg"
+			}));
+			setPicker(false);
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx(IconImageRow, {
+					id,
+					title: field.title,
+					url: v ? src(v.url) : void 0,
+					readOnly,
+					onOpen: library,
+					onFiles: up.run,
+					busy: up.progress != null,
+					pickerOpen: picker
+				}),
+				up.error ? /* @__PURE__ */ jsx(Reason, { children: up.error }) : null,
+				!readOnly && !library ? /* @__PURE__ */ jsx(Reason, {
+					tone: "muted",
+					children: NO_LIBRARY
+				}) : null,
+				/* @__PURE__ */ jsx(MediaPicker, {
+					open: picker,
+					onOpenChange: setPicker,
+					accept: ["svg"],
+					title: v ? "Replace icon" : "Select an icon",
+					onPick: (a) => a[0] && onChange(fromAsset(a[0])),
+					onRemove: v && !readOnly ? () => {
+						onChange(null);
+						setPicker(false);
+					} : void 0,
+					icons,
+					onPickIcon: readOnly ? void 0 : pickIcon
+				})
+			]
+		});
+	}
 	if (!v) return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-1.5",
 		children: [
@@ -480,7 +743,7 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 				id,
 				title: "Add an image",
 				hint: "Or drop or paste one here",
-				accept: "image/*",
+				accept,
 				icon: /* @__PURE__ */ jsx(IconPhoto, { stroke: 1.5 }),
 				onFiles: up.run,
 				onLibrary: library,
@@ -496,11 +759,12 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 			/* @__PURE__ */ jsx(MediaPicker, {
 				open: picker,
 				onOpenChange: setPicker,
-				accept: ["image", "svg"],
+				accept: kinds,
 				onPick: (a) => a[0] && onChange(fromAsset(a[0]))
 			})
 		]
 	});
+	const frameRatio = CROPS.find((c) => c.value === cropChoice(v.crop, size))?.ratio;
 	const focal = v.focal ?? {
 		x: 50,
 		y: 50
@@ -529,7 +793,9 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 				},
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "group/img relative aspect-video overflow-hidden rounded-kit-lg border border-kit-line bg-kit-muted",
+						"data-slot": "kit-image-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,
@@ -537,17 +803,12 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 								disabled: readOnly,
 								onClick: () => library ? library() : openDetails(),
 								"aria-label": library ? `Replace ${field.title}` : `${field.title} details`,
-								className: "block size-full outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-kit-focus-ring focus-visible:[outline-style:solid] [html[data-input-modality=pointer]_&]:focus-visible:outline-none",
+								className: "flex size-full items-center justify-center outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-kit-focus-ring focus-visible:[outline-style:solid] [html[data-input-modality=pointer]_&]:focus-visible:outline-none",
 								children: /* @__PURE__ */ jsx("img", {
 									src: src(v.url),
 									alt: alt ?? "",
-									onLoad: (e) => {
-										const img = e.currentTarget;
-										if (img.naturalWidth && img.naturalHeight) setNatural({
-											w: img.naturalWidth,
-											h: img.naturalHeight
-										});
-									},
+									ref: readNatural,
+									onLoad: (e) => readNatural(e.currentTarget),
 									className: "size-full object-cover",
 									style: { objectPosition: `${focal.x}% ${focal.y}%` }
 								})
@@ -557,7 +818,7 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 								children: [library ? /* @__PURE__ */ jsxs("button", {
 									type: "button",
 									onClick: library,
-									className: PILL,
+									className: "flex h-7 items-center gap-1 rounded-full border border-kit-swatch-ring bg-kit-media-control px-2.5 text-kit-xs font-medium text-kit-media-control-fg shadow-kit-sm",
 									children: [/* @__PURE__ */ jsx(IconReplace, {
 										className: "size-3.5",
 										stroke: 1.5,
@@ -569,7 +830,7 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 										type: "button",
 										"aria-label": "Remove image",
 										onClick: () => onChange(null),
-										className: cn(PILL, "size-7 justify-center px-0"),
+										className: "flex size-7 items-center justify-center rounded-full border border-kit-swatch-ring bg-kit-media-control text-kit-media-control-fg shadow-kit-sm",
 										children: /* @__PURE__ */ jsx(IconX, {
 											className: "size-3.5",
 											stroke: 1.5,
@@ -634,22 +895,25 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 									onClick: openDetails,
 									children: "Alt text and details"
 								}),
-								library ? /* @__PURE__ */ jsx(MenuItem, {
+								/* @__PURE__ */ jsx(MenuItem, {
 									icon: /* @__PURE__ */ jsx(IconReplace, { stroke: 1.5 }),
+									disabled: !library,
 									onClick: library,
 									children: "Replace"
-								}) : null,
+								}),
 								/* @__PURE__ */ jsx(MenuItem, {
 									icon: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.5 }),
 									onClick: () => window.open(src(v.url), "_blank", "noopener"),
 									children: "Open original"
 								}),
-								readOnly ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
+								/* @__PURE__ */ jsx(MenuSeparator, {}),
+								/* @__PURE__ */ jsx(MenuItem, {
 									danger: true,
 									icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
-									onClick: () => onChange(null),
+									disabled: readOnly,
+									onClick: () => !readOnly && onChange(null),
 									children: "Remove"
-								})] })
+								})
 							]
 						})] })]
 					}),
@@ -666,6 +930,7 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 					readOnly,
 					label: field.title,
 					urlOnly,
+					altOnly,
 					size,
 					asset
 				})
@@ -673,7 +938,7 @@ function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
 			/* @__PURE__ */ jsx(MediaPicker, {
 				open: picker,
 				onOpenChange: setPicker,
-				accept: ["image", "svg"],
+				accept: kinds,
 				onPick: (a) => a[0] && replace(a[0])
 			})
 		]
@@ -686,10 +951,11 @@ 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 overflow-hidden rounded-kit-md border border-kit-line bg-kit-muted", sort.active === item.key && "z-10 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,
+				role: void 0,
 				tabIndex: 0,
 				"aria-label": readOnly ? label : `${label}, drag to reorder`,
 				onDoubleClick: onOpen,
@@ -706,10 +972,11 @@ function Thumb({ item, label, readOnly, sort, onRemove, onOpen }) {
 					}
 					if (!readOnly) handle.onKeyDown(e);
 				},
-				className: cn("size-full touch-none outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-kit-focus-ring focus-visible:[outline-style:solid] [html[data-input-modality=pointer]_&]:focus-visible:outline-none", !readOnly && "cursor-grab active:cursor-grabbing"),
+				className: "size-full outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-kit-focus-ring focus-visible:[outline-style:solid] [html[data-input-modality=pointer]_&]:focus-visible:outline-none",
 				children: /* @__PURE__ */ jsx("img", {
 					src: src(item.v.url),
 					alt: item.v.alt ?? "",
+					"data-slot": "kit-gallery-thumb",
 					className: "pointer-events-none size-full select-none object-cover",
 					draggable: false
 				})
@@ -721,10 +988,13 @@ function Thumb({ item, label, readOnly, sort, onRemove, onOpen }) {
 			}) : null,
 			readOnly ? null : /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": `Remove ${label}`,
+				"aria-label": (() => {
+					const what = item.v.alt || item.v.name || fileNameFromUrl(item.v.url);
+					return what ? `Remove ${what}` : "Remove image";
+				})(),
 				onPointerDown: (e) => e.stopPropagation(),
 				onClick: onRemove,
-				className: "absolute right-1 top-1 flex size-6 items-center justify-center rounded-kit-md bg-kit-inverse/80 text-kit-fg-inverse opacity-0 transition-opacity focus-visible:opacity-100 group-hover/thumb:opacity-100 [@media(pointer:coarse)]:opacity-100",
+				className: "absolute right-1 top-1 flex size-6 items-center justify-center rounded-kit-md bg-kit-inverse/80 text-kit-fg-inverse opacity-0 transition-opacity focus-visible:opacity-100 group-hover/thumb:opacity-100 pointer-coarse:opacity-100",
 				children: /* @__PURE__ */ jsx(IconX, {
 					className: "size-3.5",
 					stroke: 1.5,
@@ -735,8 +1005,9 @@ function Thumb({ item, label, readOnly, sort, onRemove, onOpen }) {
 	});
 }
 /** An array of images: a sortable grid of tiles with a dashed "Add images" tile last (hidden at `max`). */
-function GalleryControl({ value, onChange, readOnly, field, id }) {
+function GalleryControl({ value, onChange, readOnly, field, id, path }) {
 	const { s, src } = useMedia();
+	const env = useKitEnv();
 	const raw = Array.isArray(value) ? value : [];
 	const seen = /* @__PURE__ */ new Map();
 	const items = raw.map((x) => {
@@ -756,7 +1027,8 @@ function GalleryControl({ value, onChange, readOnly, field, id }) {
 	const add = (assets) => write([...raw, ...assets.map((a) => out(fromAsset(a)))]);
 	const [picker, setPicker] = React.useState(false);
 	const up = useUpload("image/*", "image", add);
-	const sort = useDragReorder(items.map((it) => it.key), (from, to) => {
+	const keys = items.map((it) => it.key);
+	const sort = useDragReorder(keys, (from, to) => {
 		const next = [...raw];
 		const [moved] = next.splice(from, 1);
 		next.splice(to, 0, moved);
@@ -781,7 +1053,11 @@ function GalleryControl({ value, onChange, readOnly, field, id }) {
 					label: noun(i, it),
 					readOnly,
 					sort,
-					onOpen: () => window.open(src(it.v.url), "_blank", "noopener"),
+					onOpen: () => s.editImage && !readOnly ? s.editImage({
+						docId: env.docId,
+						path: [...path, i],
+						title: noun(i, it)
+					}) : window.open(src(it.v.url), "_blank", "noopener"),
 					onRemove: () => write(raw.filter((_, j) => j !== i))
 				}, it.key)), canAdd ? /* @__PURE__ */ jsx("div", {
 					role: "listitem",
@@ -894,58 +1170,59 @@ function FileControl({ value, onChange, readOnly, id }) {
 	const ext = (name.includes(".") ? name.split(".").pop() : "")?.toUpperCase() || "FILE";
 	const meta = [ext.toLowerCase(), asset?.size ? formatBytes(asset.size) : null].filter(Boolean).join(" · ");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-control-bg p-2",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "flex size-14 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-subtle font-kit-mono text-kit-2xs font-medium text-kit-fg-2",
-					children: ext
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsx("a", {
-						id,
-						href: src(v.url),
-						target: "_blank",
-						rel: "noreferrer",
-						className: "block truncate text-kit-sm font-medium text-kit-accent-fg hover:underline",
-						children: name
-					}), /* @__PURE__ */ jsx("div", {
-						className: "text-kit-xs text-kit-fg-3",
-						children: meta
-					})]
+		className: "flex items-center gap-3 rounded-kit-lg border border-kit-line bg-kit-control-bg p-2",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "flex size-14 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-subtle font-kit-mono text-kit-2xs font-medium text-kit-fg-2",
+				children: ext
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("a", {
+					id,
+					href: src(v.url),
+					target: "_blank",
+					rel: "noreferrer",
+					className: "block truncate text-kit-sm font-medium text-kit-accent-fg hover:underline",
+					children: name
+				}), /* @__PURE__ */ jsx("div", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: meta
+				})]
+			}),
+			library ? /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				onClick: library,
+				children: "Replace"
+			}) : null,
+			/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+				render: /* @__PURE__ */ jsx(IconButton, {
+					label: "File actions",
+					size: "sm"
 				}),
-				library ? /* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					variant: "ghost",
-					onClick: library,
-					children: "Replace"
-				}) : null,
-				/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
-					"aria-label": "File actions",
-					className: "flex size-7 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover",
-					children: /* @__PURE__ */ jsx(IconDots, {
-						className: "size-4",
-						stroke: 1.5,
-						"aria-hidden": true
-					})
-				}), /* @__PURE__ */ jsxs(MenuContent, {
-					align: "end",
-					children: [/* @__PURE__ */ jsx(MenuItem, {
+				children: /* @__PURE__ */ jsx(IconDots, { stroke: 1.5 })
+			}), /* @__PURE__ */ jsxs(MenuContent, {
+				align: "end",
+				children: [
+					/* @__PURE__ */ jsx(MenuItem, {
 						icon: /* @__PURE__ */ jsx(IconDownload, { stroke: 1.5 }),
 						onClick: () => window.open(src(v.url), "_blank", "noopener"),
 						children: "Open"
-					}), readOnly ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
+					}),
+					/* @__PURE__ */ jsx(MenuSeparator, {}),
+					/* @__PURE__ */ jsx(MenuItem, {
 						danger: true,
 						icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
-						onClick: () => onChange(null),
+						disabled: readOnly,
+						onClick: () => !readOnly && onChange(null),
 						children: "Remove"
-					})] })]
-				})] })
-			]
-		}), pickerEl]
+					})
+				]
+			})] }),
+			pickerEl
+		]
 	});
 }
 var videoProvider = (url) => /youtu/.test(url) ? "YouTube" : /vimeo/.test(url) ? "Vimeo" : /loom/.test(url) ? "Loom" : /\.(mp4|webm|mov)(\?|$)/i.test(url) ? "MP4" : url ? "Link" : "";
@@ -968,11 +1245,11 @@ function VideoPreview({ url, poster, title }) {
 		poster: thumb,
 		controls: true,
 		autoPlay: true,
-		className: "aspect-video w-full rounded-kit-lg border border-kit-line bg-kit-inverse"
+		className: "aspect-video w-full rounded-kit-lg border border-kit-line bg-kit-media-backdrop"
 	});
 	const playable = !!yt || isFileVideo(url);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative aspect-video overflow-hidden rounded-kit-lg border border-kit-line bg-kit-inverse",
+		className: "relative aspect-video overflow-hidden rounded-kit-lg border border-kit-line bg-kit-media-backdrop",
 		children: [
 			thumb ? /* @__PURE__ */ jsx("img", {
 				src: thumb,
@@ -983,7 +1260,7 @@ function VideoPreview({ url, poster, title }) {
 				type: "button",
 				"aria-label": playable ? "Play preview" : "Open video link",
 				onClick: () => playable ? setPlaying(true) : window.open(src(url), "_blank", "noopener"),
-				className: "absolute inset-0 m-auto flex size-12 items-center justify-center rounded-full bg-kit-control-bg text-kit-fg shadow-kit-lg transition-transform hover:scale-105",
+				className: "absolute inset-0 m-auto flex size-12 items-center justify-center rounded-full bg-kit-media-control text-kit-media-control-fg shadow-kit-lg transition-transform hover:scale-105",
 				children: playable ? /* @__PURE__ */ jsx(IconPlayerPlay, {
 					className: "size-5",
 					stroke: 1.5,
@@ -995,7 +1272,7 @@ function VideoPreview({ url, poster, title }) {
 				})
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded-kit-md bg-kit-inverse/70 px-1.5 py-0.5 text-kit-xs text-kit-fg-inverse",
+				className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded-kit-md bg-kit-scrim px-1.5 py-0.5 text-kit-xs text-kit-on-scrim",
 				children: [/* @__PURE__ */ jsx(IconVideo, {
 					className: "size-3.5",
 					stroke: 1.5,
@@ -1071,6 +1348,6 @@ function VideoControl({ field, value, onChange, readOnly, id, onBlur }) {
 	});
 }
 //#endregion
-export { FileControl, GalleryControl, ImageControl, VideoControl };
+export { FileControl, GalleryControl, ImageControl, MediaPicker, VideoControl, VideoPreview, acceptsFile, cropChoice, fileNameFromUrl, formatBytes, fromAsset, isVideoUrl, normImage, useUpload, videoProvider, withCrop, youTubeId };
 
 //# sourceMappingURL=media.js.map