@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/dist/controls/media.js

@@ -0,0 +1,1396 @@
+import { cropPreset, cropRect, isCropRect } from "../adapters/values.js";
+import { cn } from "../lib/cn.js";
+import { useKitEnv, useKitServices } from "../context.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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).
+*
+* Production parity: dashed drop well ("Add an image / Or drop or paste one here"), filled 16:9 preview with Replace and
+* Remove pills, the caption "{file} · W × H · No alt text" and a ⋯ whose "Alt text and details" opens a popover (alt
+* text, focal point, file name). The media library picker, the upload and the asset metadata are KitServices
+* (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):
+*  - "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
+*    string, and alt text and focal point are the media library's (said in the details popover);
+*  - no built-in demo picker, no simulated upload, no stock poster frames;
+*  - the gallery sorts with the engine's `useDragReorder` (@dnd-kit is not on the kit allow-list);
+*  - a typed video URL is held as a draft until it is one prod stores (http(s) or a site path), so the dock never
+*    refuses a half-typed address.
+*/
+var fileNameFromUrl = (url) => {
+	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 {
+		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 "Image";
+	}
+};
+var normImage = (v) => {
+	if (typeof v === "string") return v ? { url: v } : null;
+	return isObj(v) && typeof v.url === "string" && v.url ? v : null;
+};
+/** What an asset becomes in a value: the keys prod keeps (url, id, name, alt), nothing measured. */
+var fromAsset = (a) => {
+	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;
+};
+var formatBytes = (n) => n >= 1e6 ? `${(n / 1e6).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1e3))} KB`;
+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() {
+	const s = useKitServices();
+	return {
+		s,
+		useAsset: s.useMediaAsset ?? NO_ASSET,
+		src: s.mediaSrc ?? NO_SRC
+	};
+}
+/** Files the field takes, by `accept` (an `image/*`, `.pdf`, `*` list). */
+function acceptsFile(accept, file) {
+	return accept.split(",").some((raw) => {
+		const rule = raw.trim().toLowerCase();
+		if (!rule || rule === "*" || rule === "*/*") return true;
+		if (rule.startsWith(".")) return file.name.toLowerCase().endsWith(rule);
+		if (rule.endsWith("/*")) return file.type.toLowerCase().startsWith(rule.slice(0, -1));
+		return file.type.toLowerCase() === rule;
+	});
+}
+function MediaPicker(p) {
+	const Picker = useKitServices().MediaPicker;
+	return Picker ? /* @__PURE__ */ jsx(Picker, { ...p }) : null;
+}
+/**
+* Upload through the host's media library: progress while it runs, the assets handed to `onDone`, and a named reason
+* when it fails or a file is the wrong kind. `run` is undefined when the host has no upload service.
+*/
+function useUpload(accept, kind, onDone) {
+	const { uploadMedia, onUploaded, toast } = useKitServices();
+	const [progress, setProgress] = React.useState(null);
+	const [error, setError] = React.useState(null);
+	const alive = React.useRef(true);
+	React.useEffect(() => () => {
+		alive.current = false;
+	}, []);
+	return {
+		progress,
+		error,
+		setError,
+		run: uploadMedia ? (files) => {
+			if (!files.length || progress != null) return;
+			const bad = files.find((f) => !acceptsFile(accept, f));
+			if (bad) {
+				setError(`${bad.name || "That file"} isn't ${kind === "file" ? "a file this field takes" : `an ${kind}`}.`);
+				return;
+			}
+			setError(null);
+			setProgress(0);
+			uploadMedia(files, { onProgress: (f) => alive.current && setProgress(Math.round(Math.min(1, Math.max(0, f)) * 100)) }).then((assets) => {
+				if (!alive.current) return;
+				setProgress(null);
+				onUploaded?.(assets);
+				onDone(assets);
+				toast?.success(files.length > 1 ? `${files.length} files uploaded` : `${assets[0]?.name ?? files[0].name} uploaded`, { description: "Added to the media library" });
+			}).catch((e) => {
+				if (!alive.current) return;
+				setProgress(null);
+				setError(`Upload failed: ${e instanceof Error ? e.message : String(e)}`);
+			});
+		} : void 0
+	};
+}
+/** A line under a control that says why something did not happen (role="alert": it is the answer to an action). */
+function Reason({ children, tone = "danger" }) {
+	return /* @__PURE__ */ jsx("p", {
+		role: tone === "danger" ? "alert" : "note",
+		className: cn("text-kit-xs", tone === "danger" ? "text-kit-danger-fg" : "text-kit-fg-3"),
+		children
+	});
+}
+function DropWell({ id, title, hint, accept, multiple, icon, disabled, onFiles, onLibrary, onUrl, refuse, progress }) {
+	const [over, setOver] = React.useState(false);
+	const [urlMode, setUrlMode] = React.useState(false);
+	const [url, setUrl] = React.useState("");
+	const [urlError, setUrlError] = React.useState(null);
+	const input = React.useRef(null);
+	const takesFiles = (!!onFiles || !!refuse) && !disabled;
+	const files = (f) => onFiles ? onFiles(f) : refuse?.(NO_UPLOAD);
+	const pickFiles = () => onFiles ? input.current?.click() : refuse?.(NO_UPLOAD);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		tabIndex: disabled ? -1 : 0,
+		role: "group",
+		"aria-label": takesFiles ? `${title}. Paste an image or press Enter to upload` : title,
+		onPaste: (e) => {
+			const pasted = Array.from(e.clipboardData.files);
+			if (pasted.length && takesFiles) {
+				e.preventDefault();
+				files(pasted);
+			}
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Enter" && e.target === e.currentTarget && takesFiles) {
+				e.preventDefault();
+				pickFiles();
+			}
+		},
+		onDragOver: (e) => {
+			if (!takesFiles) return;
+			e.preventDefault();
+			setOver(true);
+		},
+		onDragLeave: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) setOver(false);
+		},
+		onDrop: (e) => {
+			if (!takesFiles) return;
+			e.preventDefault();
+			setOver(false);
+			files(Array.from(e.dataTransfer.files));
+		},
+		"data-slot": "kit-drop-well",
+		className: cn("relative flex flex-col items-center gap-2.5 rounded-kit-lg border border-dashed px-4 py-5 text-center transition-colors", over ? "border-kit-accent bg-kit-accent-softer" : "border-kit-line-strong bg-kit-subtle hover:border-kit-field-border-hover"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("flex size-9 items-center justify-center rounded-kit-lg border border-kit-line bg-kit-control-bg text-kit-fg-3 [&_svg]:size-[18px]", over && "text-kit-accent-fg"),
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "text-kit-sm font-medium text-kit-fg",
+				children: over ? "Drop to upload" : title
+			}), takesFiles ? /* @__PURE__ */ jsx("div", {
+				className: "text-kit-xs text-kit-fg-3",
+				children: hint
+			}) : null] }),
+			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();
+					const v = url.trim();
+					if (HTTP.test(v)) {
+						onUrl(v);
+						setUrlMode(false);
+						setUrl("");
+						setUrlError(null);
+					} else setUrlError("Use a full image URL, like https://…/photo.jpg");
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Escape") {
+						e.stopPropagation();
+						setUrlMode(false);
+						setUrlError(null);
+					}
+				},
+				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, {
+						size: "sm",
+						variant: "secondary",
+						onClick: onLibrary ?? (() => refuse(NO_LIBRARY)),
+						disabled,
+						children: "Media library"
+					}) : null,
+					onFiles || refuse ? /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						leftIcon: /* @__PURE__ */ jsx(IconUpload, { stroke: 1.5 }),
+						onClick: pickFiles,
+						disabled,
+						children: "Upload"
+					}) : null,
+					onUrl ? /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => setUrlMode(true),
+						disabled,
+						children: "Paste URL"
+					}) : null
+				]
+			}),
+			onFiles ? /* @__PURE__ */ jsx("input", {
+				ref: input,
+				type: "file",
+				hidden: true,
+				tabIndex: -1,
+				"aria-hidden": true,
+				accept,
+				multiple,
+				onChange: (e) => {
+					onFiles(Array.from(e.target.files ?? []));
+					e.target.value = "";
+				}
+			}) : null,
+			progress != null ? /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-kit-lg bg-kit-surface px-8",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-kit-sm text-kit-fg-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							role: "status",
+							children: "Uploading…"
+						}),
+						" ",
+						progress,
+						"%"
+					]
+				}), /* @__PURE__ */ jsx(Progress, {
+					value: progress,
+					tone: "ink",
+					label: "Upload progress",
+					className: "max-w-56"
+				})]
+			}) : null
+		]
+	});
+}
+/** Why the drop well offers nothing to pick with (no library, no upload): said once, in words. */
+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.";
+/** 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 = [
+	{
+		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 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 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;
+		setFocal((e.clientX - r.left) / r.width * 100, (e.clientY - r.top) / r.height * 100);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm font-medium text-kit-fg",
+					children: "Alt text and details"
+				}), size ? /* @__PURE__ */ jsxs("span", {
+					className: "tabular-nums text-kit-2xs text-kit-fg-3",
+					children: [
+						size.w,
+						" × ",
+						size.h
+					]
+				}) : null]
+			}),
+			urlOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Reason, {
+				tone: "muted",
+				children: "This placement stores the image address only, so its alt text and focal point are the media library's."
+			}), asset?.alt ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: "Alt text in the media library"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm text-kit-fg",
+					children: asset.alt
+				})]
+			}) : null] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: "Alt text"
+				}), /* @__PURE__ */ jsx(Textarea, {
+					rows: 2,
+					value: v.alt ?? "",
+					readOnly,
+					onChange: (e) => {
+						const alt = e.target.value;
+						const next = { ...v };
+						if (alt) next.alt = alt;
+						else delete next.alt;
+						onChange(next);
+					},
+					placeholder: "Describe the image for accessibility",
+					className: "min-h-14 text-kit-sm",
+					"aria-label": `${label} alt text`
+				})]
+			}), 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(IconCrop, {
+								className: "size-3.5",
+								stroke: 1.5,
+								"aria-hidden": true
+							}), "Crop for this placement"]
+						}), /* @__PURE__ */ jsxs("span", {
+							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,
+								"%, ",
+								focal.y,
+								"%"
+							]
+						})]
+					}),
+					/* @__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__ */ 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__ */ jsx("span", {
+						className: "text-kit-2xs text-kit-fg-3",
+						children: "Click the subject. It stays in frame on every screen size."
+					})
+				]
+			})] }),
+			urlOnly || altOnly ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: "File name"
+				}), /* @__PURE__ */ jsx("span", {
+					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`
+				})]
+			})
+		]
+	});
+}
+/** The width × height a stored image value carries (positive numbers only), else undefined. */
+function storedSize(value) {
+	if (!value || typeof value !== "object") return void 0;
+	const { width, height } = value;
+	return typeof width === "number" && typeof height === "number" && width > 0 && height > 0 ? {
+		w: width,
+		h: height
+	} : void 0;
+}
+/**
+* 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 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,
+		h: asset.height
+	} : stored ?? natural;
+	const onChange = (n) => {
+		if (!n) return write(urlOnly ? "" : null);
+		if (urlOnly) 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(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: [
+			/* @__PURE__ */ jsx(DropWell, {
+				id,
+				title: "Add an image",
+				hint: "Or drop or paste one here",
+				accept,
+				icon: /* @__PURE__ */ jsx(IconPhoto, { stroke: 1.5 }),
+				onFiles: up.run,
+				onLibrary: library,
+				onUrl: readOnly ? void 0 : (url) => onChange({
+					url,
+					name: fileNameFromUrl(url) || void 0
+				}),
+				refuse: up.setError,
+				disabled: readOnly,
+				progress: up.progress
+			}),
+			up.error ? /* @__PURE__ */ jsx(Reason, { children: up.error }) : null,
+			/* @__PURE__ */ jsx(MediaPicker, {
+				open: picker,
+				onOpenChange: setPicker,
+				accept: kinds,
+				onPick: (a) => a[0] && onChange(fromAsset(a[0]))
+			})
+		]
+	});
+	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 alt = urlOnly ? asset?.alt : v.alt;
+	const name = asset?.name ?? v.name ?? fileNameFromUrl(v.url);
+	const replace = (a) => {
+		const next = fromAsset(a);
+		if (!next.alt && v.alt) next.alt = v.alt;
+		if (v.focal) next.focal = v.focal;
+		onChange(next);
+	};
+	const openDetails = () => window.setTimeout(() => setDetails(true), 0);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: details,
+		onOpenChange: setDetails,
+		children: [
+			/* @__PURE__ */ jsxs(PopoverAnchor, {
+				className: cn("flex flex-col gap-1.5", env.variant === "document" && "max-w-xl"),
+				onPaste: (e) => {
+					const files = Array.from(e.clipboardData.files);
+					if (files.length && up.run && !readOnly) {
+						e.preventDefault();
+						up.run(files);
+					}
+				},
+				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 },
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								id,
+								type: "button",
+								disabled: readOnly,
+								onClick: () => library ? library() : openDetails(),
+								"aria-label": library ? `Replace ${field.title}` : `${field.title} details`,
+								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 ?? "",
+									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
+								})
+							}),
+							readOnly ? null : /* @__PURE__ */ jsxs("div", {
+								className: "absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover/img:opacity-100 [@media(pointer:coarse)]:opacity-100",
+								children: [library ? /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: library,
+									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,
+										"aria-hidden": true
+									}), "Replace"]
+								}) : null, /* @__PURE__ */ jsx(Tooltip, {
+									content: "Remove image",
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": "Remove image",
+										onClick: () => onChange(null),
+										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,
+											"aria-hidden": true
+										})
+									})
+								})]
+							}),
+							up.progress != null ? /* @__PURE__ */ jsx("div", {
+								className: "absolute inset-x-3 bottom-3",
+								children: /* @__PURE__ */ jsx(Progress, {
+									value: up.progress,
+									tone: "ink",
+									size: "sm",
+									label: "Upload progress"
+								})
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-1.5 pl-0.5",
+						children: [/* @__PURE__ */ jsxs("span", {
+							"data-slot": "kit-image-caption",
+							className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
+							children: [
+								name,
+								size ? /* @__PURE__ */ jsxs(Fragment, { children: [" · ", /* @__PURE__ */ jsxs("span", {
+									className: "tabular-nums",
+									children: [
+										size.w,
+										" × ",
+										size.h
+									]
+								})] }) : null,
+								" · ",
+								alt ? /* @__PURE__ */ jsx("span", {
+									className: "text-kit-fg-2",
+									children: "Alt text set"
+								}) : /* @__PURE__ */ jsxs("span", {
+									className: "inline-flex items-center gap-0.5 text-kit-warning-fg",
+									children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+										className: "size-3",
+										stroke: 1.5,
+										"aria-hidden": true
+									}), "No alt text"]
+								})
+							]
+						}), /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+							"aria-label": "Image actions",
+							className: "flex size-6 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",
+							className: "w-52",
+							children: [
+								/* @__PURE__ */ jsx(MenuItem, {
+									icon: /* @__PURE__ */ jsx(IconFocusCentered, { stroke: 1.5 }),
+									onClick: openDetails,
+									children: "Alt text and details"
+								}),
+								/* @__PURE__ */ jsx(MenuItem, {
+									icon: /* @__PURE__ */ jsx(IconReplace, { stroke: 1.5 }),
+									disabled: !library,
+									onClick: library,
+									children: "Replace"
+								}),
+								/* @__PURE__ */ jsx(MenuItem, {
+									icon: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.5 }),
+									onClick: () => window.open(src(v.url), "_blank", "noopener"),
+									children: "Open original"
+								}),
+								/* @__PURE__ */ jsx(MenuSeparator, {}),
+								/* @__PURE__ */ jsx(MenuItem, {
+									danger: true,
+									icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+									disabled: readOnly,
+									onClick: () => !readOnly && onChange(null),
+									children: "Remove"
+								})
+							]
+						})] })]
+					}),
+					up.error ? /* @__PURE__ */ jsx(Reason, { children: up.error }) : null
+				]
+			}),
+			/* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-[320px]",
+				align: "start",
+				side: "bottom",
+				children: /* @__PURE__ */ jsx(ImageDetails, {
+					v,
+					onChange,
+					readOnly,
+					label: field.title,
+					urlOnly,
+					altOnly,
+					size,
+					asset
+				})
+			}),
+			/* @__PURE__ */ jsx(MediaPicker, {
+				open: picker,
+				onOpenChange: setPicker,
+				accept: kinds,
+				onPick: (a) => a[0] && replace(a[0])
+			})
+		]
+	});
+}
+function Thumb({ item, label, readOnly, sort, onRemove, onOpen }) {
+	const { src } = useMedia();
+	const handle = sort.handle(item.key);
+	return /* @__PURE__ */ jsxs("div", {
+		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"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				...readOnly ? {} : handle,
+				role: void 0,
+				tabIndex: 0,
+				"aria-label": readOnly ? label : `${label}, drag to reorder`,
+				onDoubleClick: onOpen,
+				onKeyDown: (e) => {
+					if (!readOnly && (e.key === "Delete" || e.key === "Backspace")) {
+						e.preventDefault();
+						onRemove();
+						return;
+					}
+					if (e.key === "Enter") {
+						e.preventDefault();
+						onOpen();
+						return;
+					}
+					if (!readOnly) handle.onKeyDown(e);
+				},
+				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-contain",
+					draggable: false
+				})
+			}),
+			!item.v.alt ? /* @__PURE__ */ jsx("span", {
+				role: "img",
+				className: "absolute bottom-1 left-1 size-1.5 rounded-full bg-kit-warning ring-2 ring-kit-surface",
+				"aria-label": "No alt text"
+			}) : null,
+			readOnly ? null : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"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 pointer-coarse:opacity-100",
+				children: /* @__PURE__ */ jsx(IconX, {
+					className: "size-3.5",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			})
+		]
+	});
+}
+/** 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, path }) {
+	const { s, src } = useMedia();
+	const env = useKitEnv();
+	const raw = Array.isArray(value) ? value : [];
+	const seen = /* @__PURE__ */ new Map();
+	const items = raw.map((x) => {
+		const v = normImage(x) ?? { url: "" };
+		const base = v.id ?? v.url;
+		const n = seen.get(base) ?? 0;
+		seen.set(base, n + 1);
+		return {
+			key: n ? `${base}#${n}` : base,
+			v,
+			raw: x
+		};
+	});
+	const asStrings = raw.length > 0 && raw.every((x) => typeof x === "string");
+	const out = (v) => asStrings && !v.alt && !v.focal ? v.url : v;
+	const write = (list) => onChange(list);
+	const add = (assets) => write([...raw, ...assets.map((a) => out(fromAsset(a)))]);
+	const [picker, setPicker] = React.useState(false);
+	const up = useUpload("image/*", "image", add);
+	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);
+		write(next);
+	}, {
+		axis: "grid",
+		disabled: readOnly
+	});
+	const max = field.validation?.max;
+	const canAdd = !readOnly && (max == null || items.length < max) && (s.MediaPicker || up.run);
+	const noun = (i, it) => it.v.name ?? (fileNameFromUrl(it.v.url) || `Image ${i + 1}`);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				id,
+				role: "list",
+				"aria-label": field.title,
+				className: "grid grid-cols-3 gap-1.5 @[520px]:grid-cols-5",
+				children: [items.map((it, i) => /* @__PURE__ */ jsx(Thumb, {
+					item: it,
+					label: noun(i, it),
+					readOnly,
+					sort,
+					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",
+					className: "grid",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => s.MediaPicker ? setPicker(true) : up.run && document.getElementById(`${id}-files`)?.click(),
+						onPaste: (e) => {
+							const files = Array.from(e.clipboardData.files);
+							if (files.length && up.run) {
+								e.preventDefault();
+								up.run(files);
+							}
+						},
+						onDragOver: (e) => up.run && e.preventDefault(),
+						onDrop: (e) => {
+							if (!up.run) return;
+							e.preventDefault();
+							up.run(Array.from(e.dataTransfer.files));
+						},
+						className: "flex aspect-square flex-col items-center justify-center gap-1 rounded-kit-md border border-dashed border-kit-line-strong bg-kit-subtle text-kit-xs text-kit-fg-3 transition-colors hover:border-kit-field-border-hover hover:text-kit-fg",
+						children: [/* @__PURE__ */ jsx(IconPlus, {
+							className: "size-4",
+							stroke: 1.5,
+							"aria-hidden": true
+						}), "Add images"]
+					})
+				}) : null]
+			}),
+			sort.a11y,
+			up.run && !s.MediaPicker ? /* @__PURE__ */ jsx("input", {
+				id: `${id}-files`,
+				type: "file",
+				hidden: true,
+				tabIndex: -1,
+				"aria-hidden": true,
+				accept: "image/*",
+				multiple: true,
+				onChange: (e) => {
+					up.run?.(Array.from(e.target.files ?? []));
+					e.target.value = "";
+				}
+			}) : null,
+			up.progress != null ? /* @__PURE__ */ jsx(Progress, {
+				value: up.progress,
+				tone: "ink",
+				size: "sm",
+				label: "Upload progress"
+			}) : null,
+			up.error ? /* @__PURE__ */ jsx(Reason, { children: up.error }) : null,
+			!readOnly && !s.MediaPicker && !up.run ? /* @__PURE__ */ jsx(Reason, {
+				tone: "muted",
+				children: NO_SOURCE
+			}) : null,
+			/* @__PURE__ */ jsx(MediaPicker, {
+				open: picker,
+				onOpenChange: setPicker,
+				multiple: true,
+				accept: ["image", "svg"],
+				onPick: (a) => a.length && add(max != null ? a.slice(0, Math.max(0, max - items.length)) : a)
+			})
+		]
+	});
+}
+var normFile = (v) => {
+	if (typeof v === "string") return v ? { url: v } : null;
+	return isObj(v) && typeof v.url === "string" && v.url ? v : null;
+};
+var fileFromAsset = (a) => ({
+	url: a.url,
+	id: a.id,
+	...a.name ? { name: a.name } : {}
+});
+function FileControl({ value, onChange, readOnly, id }) {
+	const { s, useAsset, src } = useMedia();
+	const v = normFile(value);
+	const asset = useAsset({
+		id: v?.id,
+		url: v?.url ?? ""
+	});
+	const [picker, setPicker] = React.useState(false);
+	const up = useUpload("*", "file", (a) => a[0] && onChange(fileFromAsset(a[0])));
+	const library = s.MediaPicker && !readOnly ? () => setPicker(true) : void 0;
+	const pickerEl = /* @__PURE__ */ jsx(MediaPicker, {
+		open: picker,
+		onOpenChange: setPicker,
+		accept: ["file"],
+		onPick: (a) => a[0] && onChange(fileFromAsset(a[0]))
+	});
+	if (!v) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx(DropWell, {
+				id,
+				title: "Add a file",
+				hint: "Or drop or paste one here",
+				accept: "*",
+				icon: /* @__PURE__ */ jsx(IconFileText, { stroke: 1.5 }),
+				onFiles: up.run,
+				onLibrary: library,
+				refuse: up.setError,
+				disabled: readOnly,
+				progress: up.progress
+			}),
+			up.error ? /* @__PURE__ */ jsx(Reason, { children: up.error }) : null,
+			pickerEl
+		]
+	});
+	const name = asset?.name ?? v.name ?? fileNameFromUrl(v.url);
+	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 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"
+				}),
+				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"
+					}),
+					/* @__PURE__ */ jsx(MenuSeparator, {}),
+					/* @__PURE__ */ jsx(MenuItem, {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+						disabled: readOnly,
+						onClick: () => !readOnly && onChange(null),
+						children: "Remove"
+					})
+				]
+			})] }),
+			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" : "";
+var youTubeId = (url) => url.match(/(?:youtu\.be\/|v=|embed\/|shorts\/)([\w-]{11})/)?.[1];
+var isFileVideo = (url) => /\.(mp4|webm|mov)(\?|$)/i.test(url);
+function VideoPreview({ url, poster, title }) {
+	const { src } = useMedia();
+	const [playing, setPlaying] = React.useState(false);
+	React.useEffect(() => setPlaying(false), [url]);
+	const yt = youTubeId(url);
+	const thumb = poster ? src(poster) : yt ? `https://i.ytimg.com/vi/${yt}/hqdefault.jpg` : void 0;
+	if (playing && yt) return /* @__PURE__ */ jsx("iframe", {
+		title,
+		src: `https://www.youtube-nocookie.com/embed/${yt}?autoplay=1`,
+		allow: "autoplay; encrypted-media",
+		className: "aspect-video w-full rounded-kit-lg border border-kit-line"
+	});
+	if (playing && isFileVideo(url)) return /* @__PURE__ */ jsx("video", {
+		src: src(url),
+		poster: thumb,
+		controls: true,
+		autoPlay: true,
+		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-media-backdrop",
+		children: [
+			thumb ? /* @__PURE__ */ jsx("img", {
+				src: thumb,
+				alt: `${title} poster`,
+				className: "size-full object-cover opacity-85"
+			}) : null,
+			/* @__PURE__ */ jsx("button", {
+				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-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,
+					"aria-hidden": true
+				}) : /* @__PURE__ */ jsx(IconExternalLink, {
+					className: "size-5",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				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,
+					"aria-hidden": true
+				}), videoProvider(url)]
+			})
+		]
+	});
+}
+/**
+* A URL input with a live preview. The value keeps its stored shape: a URL string stays a string, a `{ url, poster… }`
+* object keeps its other keys. What is typed is a draft until it is an address prod stores (http(s) or a site path);
+* until then the field keeps the saved value and says why under the input.
+*/
+function VideoControl({ field, value, onChange, readOnly, id, onBlur }) {
+	const obj = isObj(value) && typeof value.url === "string" ? value : null;
+	const stored = typeof value === "string" ? value : obj?.url ?? "";
+	const [draft, setDraft] = React.useState(stored);
+	const [touched, setTouched] = React.useState(false);
+	React.useEffect(() => setDraft(stored), [stored]);
+	const commit = (raw) => {
+		const url = raw.trim();
+		if (url === stored || !isVideoUrl(url)) return;
+		if (url === "") return onChange(obj ? null : "");
+		onChange(obj ? {
+			...obj,
+			url
+		} : url);
+	};
+	const bad = draft.trim() !== "" && !isVideoUrl(draft);
+	const errorId = `${id}-error`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				value: draft,
+				readOnly,
+				"aria-invalid": bad && touched ? true : void 0,
+				"aria-describedby": bad && touched ? errorId : void 0,
+				onBlur: () => {
+					setTouched(true);
+					onBlur?.();
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Escape" && draft !== stored) {
+						e.stopPropagation();
+						setDraft(stored);
+					}
+				},
+				placeholder: "Paste a YouTube, Vimeo, Loom or MP4 link",
+				leading: /* @__PURE__ */ jsx(IconWorld, { stroke: 1.5 }),
+				onChange: (e) => {
+					setDraft(e.target.value);
+					commit(e.target.value);
+				}
+			}),
+			bad && touched ? /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: "text-kit-xs text-kit-danger-fg",
+				children: "Not saved: use a full link starting with https://, or a site path starting with /."
+			}) : null,
+			stored ? /* @__PURE__ */ jsx(VideoPreview, {
+				url: stored,
+				poster: obj?.poster,
+				title: field.title
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "text-kit-xs text-kit-fg-3",
+				children: "No video yet. The embed lazy-loads on the page, so it doesn't block the first paint."
+			})
+		]
+	});
+}
+//#endregion
+export { FileControl, GalleryControl, ImageControl, MediaPicker, VideoControl, VideoPreview, acceptsFile, cropChoice, fileNameFromUrl, formatBytes, frameFit, fromAsset, isVideoUrl, normImage, useUpload, videoProvider, withCrop, youTubeId };
+
+//# sourceMappingURL=media.js.map