@bettercms-ai/kit 0.1.0 → 1.0.0

package/controls/media.js

@@ -0,0 +1,1076 @@
+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 { Progress } from "../ui/controls.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverAnchor, PopoverContent, Tooltip } from "../ui/overlay.js";
+import { Input, Textarea } from "../ui/input.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
+/**
+* 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):
+*  - 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;
+*  - 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 last = url.split("?")[0].split("#")[0].split("/").filter(Boolean).pop() ?? "";
+	try {
+		return decodeURIComponent(last);
+	} catch {
+		return last;
+	}
+};
+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 = {
+		url: a.url,
+		id: a.id
+	};
+	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_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("form", {
+				className: "flex w-full max-w-sm flex-col 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__ */ 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", {
+				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.";
+function ImageDetails({ v, onChange, readOnly, label, urlOnly, 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 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`
+				})]
+			}), /* @__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, {
+								className: "size-3.5",
+								stroke: 1.5,
+								"aria-hidden": true
+							}), "Focal point"]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "tabular-nums text-kit-2xs text-kit-fg-3",
+							children: [
+								"Focal ",
+								focal.x,
+								"%, ",
+								focal.y,
+								"%"
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						role: "slider",
+						"aria-label": "Focal point. Click the subject.",
+						"aria-valuetext": `${focal.x}% across, ${focal.y}% down`,
+						"aria-valuenow": focal.x,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-readonly": readOnly || void 0,
+						tabIndex: 0,
+						onPointerDown: (e) => !readOnly && fromPointer(e),
+						onKeyDown: (e) => {
+							const d = e.shiftKey ? 10 : 2;
+							const step = {
+								ArrowLeft: [-d, 0],
+								ArrowRight: [d, 0],
+								ArrowUp: [0, -d],
+								ArrowDown: [0, d]
+							}[e.key];
+							if (!step || readOnly) return;
+							e.preventDefault();
+							setFocal(focal.x + step[0], focal.y + step[1]);
+						},
+						className: "relative mt-1 aspect-[3/2] cursor-crosshair overflow-hidden rounded-kit-md border border-kit-line bg-kit-muted",
+						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",
+							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",
+							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."
+					})
+				]
+			})] }),
+			/* @__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)
+				})]
+			})
+		]
+	});
+}
+/** 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;
+}
+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";
+function ImageControl({ field, value, onChange: write, readOnly, id, path }) {
+	const { s, useAsset, src } = useMedia();
+	const env = useKitEnv();
+	const urlOnly = !!s.imageStoresUrl?.(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 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) 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 library = s.MediaPicker && !readOnly ? () => setPicker(true) : void 0;
+	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: "image/*",
+				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: ["image", "svg"],
+				onPick: (a) => a[0] && onChange(fromAsset(a[0]))
+			})
+		]
+	});
+	const focal = v.focal ?? {
+		x: 50,
+		y: 50
+	};
+	const alt = urlOnly ? asset?.alt : v.alt;
+	const name = asset?.name ?? v.name ?? fileNameFromUrl(v.url);
+	const replace = (a) => {
+		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", {
+						className: "group/img relative aspect-video overflow-hidden rounded-kit-lg border border-kit-line bg-kit-muted",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								id,
+								type: "button",
+								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",
+								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
+										});
+									},
+									className: "size-full object-cover",
+									style: { objectPosition: `${focal.x}% ${focal.y}%` }
+								})
+							}),
+							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: PILL,
+									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: cn(PILL, "size-7 justify-center px-0"),
+										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"
+								}),
+								library ? /* @__PURE__ */ jsx(MenuItem, {
+									icon: /* @__PURE__ */ jsx(IconReplace, { stroke: 1.5 }),
+									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, {
+									danger: true,
+									icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+									onClick: () => 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,
+					size,
+					asset
+				})
+			}),
+			/* @__PURE__ */ jsx(MediaPicker, {
+				open: picker,
+				onOpenChange: setPicker,
+				accept: ["image", "svg"],
+				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 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"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				...readOnly ? {} : handle,
+				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: 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"),
+				children: /* @__PURE__ */ jsx("img", {
+					src: src(item.v.url),
+					alt: item.v.alt ?? "",
+					className: "pointer-events-none size-full select-none object-cover",
+					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": `Remove ${label}`,
+				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",
+				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 }) {
+	const { s, src } = useMedia();
+	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 sort = useDragReorder(items.map((it) => it.key), (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: () => 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 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
+					})]
+				}),
+				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, {
+						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, {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+						onClick: () => 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-inverse"
+	});
+	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",
+		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-control-bg text-kit-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-inverse/70 px-1.5 py-0.5 text-kit-xs text-kit-fg-inverse",
+				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, VideoControl };
+
+//# sourceMappingURL=media.js.map