@jfrader/ui 0.5.1 → 0.7.0

package/dist/photo-grid-Dtl17D74.js

@@ -0,0 +1,830 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as ee } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as te } from "./renderable-DzcIj1Lo.js";
+import { i as o, r as ne, t as re } from "./use-native-dialog-FB0p7lkg.js";
+import { useEffect as s, useId as ie, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { createElement as ae } from "@emotion/react";
+import { Fragment as oe, jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+import { LayoutGroup as m, MotionConfig as h, motion as g, useMotionValue as se, useReducedMotion as ce } from "motion/react";
+import { useMergeRefs as le } from "@floating-ui/react";
+//#region src/components/photo-grid/photo-grid.tsx
+var _ = [
+	5,
+	3,
+	2
+], v = 3, ue = [], y = 3, b = .15, x = .5, S = 3, C = 40, de = 100, w = "--photo-grid-min-cell-unit", T = 2, fe = {
+	type: "spring",
+	stiffness: 360,
+	damping: 36
+}, E = e({
+	from: { transform: "scale(0.85)" },
+	to: { transform: "scale(1)" }
+}), pe = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), me = {
+	larger: "Larger thumbnails",
+	smaller: "Smaller thumbnails",
+	density: "Thumbnail size",
+	empty: "No photos",
+	unavailable: "Photo unavailable",
+	imageUnavailable: "Image unavailable",
+	close: "Close viewer",
+	previous: "Previous photo",
+	next: "Next photo",
+	filmstrip: "Choose photo",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	resetZoom: "Reset zoom",
+	panLeft: "Pan left",
+	panRight: "Pan right",
+	panUp: "Pan up",
+	panDown: "Pan down",
+	favorite: (e, t) => `${t ? "Remove" : "Add"} ${e} ${t ? "from" : "to"} favorites`,
+	openPhoto: (e, t, n) => `${e}${t && t !== e ? `, ${t}` : ""}${n ? ", favorite" : ""}`,
+	position: (e, t, n) => `${n}, ${e} / ${t}`,
+	columns: (e) => `${e} columns`
+}, D = t({
+	label: "photo-grid",
+	display: "grid",
+	gap: d.space[4],
+	minInlineSize: 0,
+	fontFamily: d.font.sans,
+	color: d.color.text,
+	lineHeight: d.lineHeight.base,
+	"&:focus-visible": n
+}), he = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: d.space[3]
+}), ge = t({
+	margin: 0,
+	fontSize: d.textSize.lg,
+	overflowWrap: "anywhere"
+}), _e = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: d.space[2]
+}), O = t({
+	appearance: "none",
+	boxSizing: "border-box",
+	minBlockSize: d.space[8],
+	minInlineSize: d.space[8],
+	paddingBlock: d.space[1],
+	paddingInline: d.space[3],
+	border: `1px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.sm,
+	background: d.color.surfaceRaised,
+	color: d.color.text,
+	font: "inherit",
+	fontSize: d.textSize.sm,
+	cursor: "pointer",
+	overflowWrap: "anywhere",
+	"&:disabled": {
+		cursor: "default",
+		color: d.color.textMuted
+	},
+	"&:focus-visible": n,
+	"&[aria-pressed=\"true\"]": {
+		color: d.color.accentText,
+		borderColor: d.color.accentText
+	},
+	transitionProperty: "background-color, border-color",
+	transitionDuration: d.motion.duration.fast,
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		borderColor: "ButtonText",
+		"&[aria-pressed=\"true\"]": {
+			borderColor: "Highlight",
+			outline: "1px solid Highlight"
+		}
+	}
+}), k = t({
+	display: "grid",
+	gridTemplateColumns: "repeat(var(--photo-grid-columns), minmax(0, 1fr))",
+	gap: d.space[3],
+	padding: 0,
+	margin: 0,
+	listStyle: "none",
+	[w]: d.space[12],
+	touchAction: "pan-y"
+}), A = t({
+	display: "grid",
+	gap: d.space[2],
+	minInlineSize: 0
+}), j = t({
+	position: "relative",
+	display: "grid",
+	placeItems: "center",
+	inlineSize: "100%",
+	aspectRatio: "1",
+	padding: 0,
+	borderRadius: d.radius.md,
+	background: d.color.surfaceInset
+}), ve = t({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	objectFit: "cover",
+	borderRadius: "inherit"
+}), ye = t({
+	padding: d.space[3],
+	boxSizing: "border-box",
+	textAlign: "center",
+	color: d.color.textMuted
+}), be = t({
+	justifySelf: "start",
+	maxInlineSize: "100%",
+	"&[aria-pressed=\"true\"]": { animation: `${E} ${d.motion.duration.base} ${d.motion.easeStandard}` },
+	[i]: { "&[aria-pressed=\"true\"]": { animation: "none" } }
+}), xe = t({
+	inlineSize: "100%",
+	blockSize: "100%",
+	borderRadius: "inherit"
+}), M = t({
+	boxSizing: "border-box",
+	inlineSize: `calc(100% - ${d.space[8]})`,
+	maxInlineSize: "100%",
+	maxBlockSize: `calc(100dvh - ${d.space[8]})`,
+	overflow: "auto",
+	border: `1px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.lg,
+	padding: d.space[4],
+	background: d.color.surfaceRaised,
+	color: d.color.text,
+	boxShadow: d.shadow.floating,
+	fontFamily: d.font.sans,
+	"&::backdrop": { background: d.color.scrim }
+}), Se = t({
+	display: "grid",
+	gap: d.space[3]
+}), Ce = t({
+	position: "relative",
+	display: "grid",
+	placeItems: "center",
+	blockSize: "min(55dvh, 40rem)",
+	overflow: "hidden",
+	borderRadius: d.radius.md,
+	background: d.color.surfaceInset,
+	touchAction: "none",
+	"&:focus-visible": n
+}), we = t({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	objectFit: "contain",
+	userSelect: "none",
+	pointerEvents: "none"
+}), Te = t({
+	inlineSize: "100%",
+	minBlockSize: d.space[8],
+	accentColor: d.color.accent,
+	"&:focus-visible": n
+}), Ee = t({
+	fontSize: d.textSize.sm,
+	color: d.color.textMuted,
+	overflowWrap: "anywhere"
+}), De = t({
+	margin: 0,
+	color: d.color.textMuted,
+	fontSize: d.textSize.sm,
+	overflowWrap: "anywhere",
+	animation: `${pe} ${d.motion.duration.slow} ${d.motion.easeStandard}`,
+	[i]: { animation: "none" }
+});
+function Oe(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function ke(e) {
+	let t = [...new Set(e.filter((e) => Number.isInteger(e) && e > 0))].sort((e, t) => t - e);
+	return t.length ? t : [..._];
+}
+function N(e, t) {
+	return e === void 0 || !Number.isFinite(e) ? t.includes(v) ? v : t[0] : t.reduce((t, n) => Math.abs(n - e) < Math.abs(t - e) ? n : t, t[0]);
+}
+function P(e, t) {
+	let n = e;
+	for (; n;) {
+		if (/(auto|scroll)/.test(getComputedStyle(n).overflowY) && n.scrollHeight > n.clientHeight) {
+			n.scrollTop += t;
+			return;
+		}
+		n = n.parentElement;
+	}
+	e.ownerDocument.defaultView?.scrollBy(0, t);
+}
+function Ae({ photo: e, full: t, unavailable: n }) {
+	let [r, i] = u(!1);
+	return r || !e.src ? /* @__PURE__ */ f("span", {
+		"data-image-state": "error",
+		"aria-hidden": !t || void 0,
+		title: n,
+		css: ye,
+		children: t ? n : /* @__PURE__ */ p(oe, { children: ["▧ ", e.title] })
+	}) : /* @__PURE__ */ f("img", {
+		src: e.src,
+		srcSet: e.srcSet,
+		sizes: e.sizes,
+		alt: "",
+		width: e.width,
+		height: e.height,
+		loading: t ? "eager" : "lazy",
+		decoding: "async",
+		draggable: !1,
+		css: t ? we : ve,
+		onError: () => i(!0)
+	});
+}
+function F({ ref: e, register: t, ...n }) {
+	let r = le([e, t]);
+	return /* @__PURE__ */ f("button", {
+		...n,
+		ref: r
+	});
+}
+function I({ photos: e, selected: t, open: n, controller: r, select: i, favorites: ee, toggleFavorite: a, labels: o, format: c, slots: d, restore: ae }) {
+	let m = ie(), h = l(null), _ = l(null), v = l(null), ue = le([_, d?.stage?.ref]), y = r, b = re(d?.viewer ?? {}), w = ne({
+		...y,
+		open: n && e.length > 0
+	}, {
+		onCancel: (e) => {
+			e.target === e.currentTarget && b.onCancel?.(e);
+		},
+		onClick: b.onClick,
+		onClose: (e) => {
+			e.target === e.currentTarget && (b.onClose?.(e), ae());
+		}
+	}, b.ref, h), T = e.findIndex((e) => e.id === t), E = e[T], [pe, me] = u({
+		id: t,
+		value: 1
+	}), D = pe.id === t ? pe.value : 1, k = se(0), A = se(0), j = se(1), ve = ce(), we = E ? o.position(c.format(T + 1), c.format(e.length), E.title) : o.unavailable, ke = E && te(E.detail) && E.detail !== "", N = l(/* @__PURE__ */ new Map()), P = l(null);
+	s(() => {
+		k.set(0), A.set(0), j.set(1), n || me({
+			id: t,
+			value: 1
+		}), N.current.clear(), P.current = null;
+	}, [
+		t,
+		n,
+		k,
+		A,
+		j
+	]), s(() => {
+		h.current?.open && v.current?.focus({ preventScroll: !0 });
+	}, [n, y.repairToken]), s(() => {
+		if (!n || !E || h.current?.ownerDocument.visibilityState === "hidden") return;
+		let t = h.current?.ownerDocument.defaultView?.Image;
+		if (!t) return;
+		let r = [e[T - 1], e[T + 1]].filter((e) => e !== void 0).map((e) => {
+			let n = new t();
+			return e.sizes && (n.sizes = e.sizes), e.srcSet && (n.srcset = e.srcSet), n.src = e.src, n;
+		});
+		return () => {
+			for (let e of r) e.src = "";
+		};
+	}, [
+		n,
+		E,
+		T,
+		e
+	]);
+	let F = (e) => {
+		let n = Math.min(S, Math.max(1, e));
+		me({
+			id: t,
+			value: n
+		}), j.set(n), k.set(0), A.set(0);
+	}, I = (e, t) => {
+		let n = _.current?.getBoundingClientRect(), r = (n?.width ?? 0) * (D - 1) / 2, i = (n?.height ?? 0) * (D - 1) / 2;
+		k.set(Math.min(r, Math.max(-r, k.get() + e))), A.set(Math.min(i, Math.max(-i, A.get() + t)));
+	}, L = (t) => {
+		let n = e[Math.min(e.length - 1, Math.max(0, t))];
+		n && i(n.id);
+	}, R = (t) => {
+		if (t.defaultPrevented || !E || t.target.closest("input, button, textarea, select")) return;
+		let n = t.currentTarget.matches(":dir(rtl)") ? -1 : 1;
+		if (D > 1 && t.target === _.current) {
+			let e = {
+				ArrowLeft: [C, 0],
+				ArrowRight: [-40, 0],
+				ArrowUp: [0, C],
+				ArrowDown: [0, -40]
+			}[t.key];
+			if (e) {
+				t.preventDefault(), I(...e);
+				return;
+			}
+		}
+		let r = {
+			ArrowLeft: T - n,
+			ArrowRight: T + n,
+			Home: 0,
+			End: e.length - 1
+		};
+		D === 1 && r[t.key] !== void 0 && (t.preventDefault(), L(r[t.key])), (t.key === "+" || t.key === "=") && (t.preventDefault(), F(D + x)), t.key === "-" && (t.preventDefault(), F(D - x));
+	}, z = (e, t, n = !1) => /* @__PURE__ */ f("button", {
+		type: "button",
+		css: O,
+		disabled: n,
+		onClick: t,
+		children: e
+	});
+	return /* @__PURE__ */ f("dialog", {
+		...b,
+		ref: w.ref,
+		"data-ui": "photo-grid-viewer",
+		"aria-modal": "true",
+		"aria-labelledby": Oe(b["aria-labelledby"], `${m}-title`),
+		"aria-describedby": Oe(b["aria-describedby"], ke && `${m}-detail`),
+		css: [M, b.css],
+		onCancel: (e) => {
+			e.target === e.currentTarget && w.onCancel(e);
+		},
+		onClose: (e) => {
+			e.target === e.currentTarget && w.onClose(e);
+		},
+		onClick: w.onClick,
+		onKeyDown: (e) => {
+			b.onKeyDown?.(e), R(e);
+		},
+		children: /* @__PURE__ */ p("div", {
+			css: Se,
+			children: [
+				/* @__PURE__ */ p("header", {
+					role: "presentation",
+					css: he,
+					children: [/* @__PURE__ */ f("h2", {
+						id: `${m}-title`,
+						css: ge,
+						children: E?.title ?? o.unavailable
+					}), /* @__PURE__ */ f("button", {
+						ref: v,
+						type: "button",
+						css: O,
+						onClick: y.requestClose,
+						children: o.close
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					...d?.stage,
+					ref: ue,
+					"data-ui": "photo-grid-stage",
+					tabIndex: E ? 0 : void 0,
+					role: "group",
+					"aria-label": d?.stage?.["aria-label"] ?? E?.title ?? o.unavailable,
+					css: [Ce, d?.stage?.css],
+					"data-zoom": D,
+					onPointerDown: (e) => {
+						if (d?.stage?.onPointerDown?.(e), e.defaultPrevented || !E || e.button !== 0) return;
+						N.current.set(e.pointerId, {
+							x: e.clientX,
+							y: e.clientY
+						}), e.currentTarget.setPointerCapture(e.pointerId);
+						let t = [...N.current.values()];
+						P.current = {
+							originX: e.clientX,
+							originY: e.clientY,
+							x: k.get(),
+							y: A.get(),
+							zoom: D,
+							distance: t.length === 2 ? Math.hypot(t[1].x - t[0].x, t[1].y - t[0].y) : void 0
+						};
+					},
+					onPointerMove: (e) => {
+						d?.stage?.onPointerMove?.(e);
+						let t = P.current;
+						if (e.defaultPrevented || !t || !N.current.has(e.pointerId)) return;
+						N.current.set(e.pointerId, {
+							x: e.clientX,
+							y: e.clientY
+						});
+						let n = [...N.current.values()];
+						if (n.length === 2 && t.distance) {
+							let e = Math.hypot(n[1].x - n[0].x, n[1].y - n[0].y) / t.distance;
+							j.set(Math.min(S, Math.max(1, t.zoom * e)));
+						} else D > 1 ? I(t.x + e.clientX - t.originX - k.get(), t.y + e.clientY - t.originY - A.get()) : ve || (k.set(e.clientX - t.originX), A.set(e.clientY - t.originY));
+					},
+					onPointerUp: (e) => {
+						d?.stage?.onPointerUp?.(e);
+						let t = P.current;
+						if (N.current.delete(e.pointerId), !N.current.size) {
+							if (P.current = null, t?.distance) {
+								e.defaultPrevented ? j.set(D) : F(j.get());
+								return;
+							}
+							D === 1 && (!e.defaultPrevented && t && Math.abs(e.clientY - t.originY) > de ? y.requestClose() : !e.defaultPrevented && t && Math.abs(e.clientX - t.originX) > de && L(T + (e.clientX < t.originX ? 1 : -1)), k.set(0), A.set(0));
+						}
+					},
+					onPointerCancel: (e) => {
+						d?.stage?.onPointerCancel?.(e), N.current.clear(), P.current = null, k.set(0), A.set(0), j.set(D);
+					},
+					onLostPointerCapture: (e) => {
+						d?.stage?.onLostPointerCapture?.(e), N.current.delete(e.pointerId), N.current.size || (P.current = null);
+					},
+					children: E ? /* @__PURE__ */ f(g.div, {
+						layoutId: n && !ve ? E.id : void 0,
+						transition: fe,
+						css: xe,
+						children: /* @__PURE__ */ f(g.div, {
+							style: {
+								x: k,
+								y: A,
+								scale: j
+							},
+							css: xe,
+							children: n && /* @__PURE__ */ f(Ae, {
+								photo: E,
+								full: !0,
+								unavailable: o.imageUnavailable
+							}, `${E.src}\u0000${E.srcSet ?? ""}`)
+						})
+					}, E.id) : /* @__PURE__ */ f("span", {
+						css: ye,
+						children: o.unavailable
+					})
+				}),
+				/* @__PURE__ */ p("div", {
+					...d?.controls,
+					css: [_e, d?.controls?.css],
+					children: [
+						z(o.previous, () => L(T - 1), T <= 0),
+						z(o.next, () => L(T + 1), T < 0 || T >= e.length - 1),
+						z(o.zoomIn, () => F(D + x), !E || D >= S),
+						z(o.zoomOut, () => F(D - x), !E || D <= 1),
+						z(o.resetZoom, () => F(1), !E || D === 1),
+						D > 1 && /* @__PURE__ */ p(oe, { children: [
+							z(o.panLeft, () => I(C, 0)),
+							z(o.panRight, () => I(-40, 0)),
+							z(o.panUp, () => I(0, C)),
+							z(o.panDown, () => I(0, -40))
+						] })
+					]
+				}),
+				/* @__PURE__ */ f("input", {
+					...d?.filmstrip,
+					type: "range",
+					"data-ui": "photo-grid-filmstrip",
+					min: 0,
+					max: Math.max(0, e.length - 1),
+					step: 1,
+					value: Math.max(0, T),
+					disabled: e.length < 2 || !E,
+					"aria-label": d?.filmstrip?.["aria-label"] ?? o.filmstrip,
+					"aria-valuetext": we,
+					css: [Te, d?.filmstrip?.css],
+					onChange: (e) => {
+						d?.filmstrip?.onChange?.(e), e.defaultPrevented || L(e.currentTarget.valueAsNumber);
+					}
+				}),
+				E && /* @__PURE__ */ p("button", {
+					...d?.favorite,
+					type: "button",
+					"aria-pressed": ee.has(E.id),
+					css: [
+						O,
+						be,
+						d?.favorite?.css
+					],
+					onClick: (e) => {
+						d?.favorite?.onClick?.(e), e.defaultPrevented || a(E.id);
+					},
+					children: [
+						ee.has(E.id) ? "★" : "☆",
+						" ",
+						o.favorite(E.title, ee.has(E.id))
+					]
+				}),
+				ke && /* @__PURE__ */ f("p", {
+					id: `${m}-detail`,
+					css: De,
+					children: E.detail
+				}, E.id),
+				/* @__PURE__ */ f("div", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: Ee,
+					children: we
+				})
+			]
+		})
+	});
+}
+function L({ ref: e, photos: t, title: n, densitySteps: r = _, density: i, defaultDensity: te, onDensityChange: ne, favorites: re, defaultFavorites: d = ue, onFavoritesChange: oe, onFavoriteChange: v, value: x, defaultValue: S, onValueChange: C, open: de, defaultOpen: E = !1, onOpenChange: pe, labels: ve, locale: ye, slotProps: M, className: Se, sx: Ce, onKeyDown: we, ...Te }) {
+	let L = ie(), R = ke(r), [z] = u(() => N(te, R)), [je, Me] = a(i, z, ne), B = N(je, R), [Ne, Pe] = a(re, d, (e) => oe?.([...e])), V = new Set(Ne ?? ue), [H, Fe] = a(x, S === void 0 ? t[0]?.id ?? null : S, C), [U, Ie] = a(de, E, pe), Le = o((U ?? !1) && t.length > 0, Ie), W = {
+		...me,
+		...ve
+	}, Re = new Intl.NumberFormat(ye), G = l(null), ze = l(null), Be = le([G, e]), Ve = le([ze, M?.list?.ref]), K = l(/* @__PURE__ */ new Map()), q = l(null), He = l(null), J = l(null), [Ue, We] = u(B), Y = Math.min(B, Ue), Ge = ce(), [Ke, qe] = u(!0), X = l(/* @__PURE__ */ new Map()), Z = l(null), Q = se(1), Je = R.indexOf(B), [Ye, Xe] = u(""), Ze = l({
+		density: B,
+		selected: H,
+		favorites: V
+	});
+	if (process.env.NODE_ENV !== "production") {
+		let e = /* @__PURE__ */ new Set();
+		for (let n of t) {
+			if (e.has(n.id)) throw Error("PhotoGrid: photo IDs must be unique.");
+			if (!Number.isFinite(n.width) || n.width <= 0 || !Number.isFinite(n.height) || n.height <= 0) throw Error("PhotoGrid: photo dimensions must be finite positive numbers.");
+			e.add(n.id);
+		}
+	}
+	c(() => {
+		let e = ze.current;
+		if (!e) return;
+		let t = () => {
+			let t = getComputedStyle(e), n = Number.parseFloat(t.getPropertyValue(w)) * T, r = Number.parseFloat(t.columnGap) || 0;
+			We(n > 0 ? Math.max(1, Math.floor((e.clientWidth + r) / (n + r))) : Infinity);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [t.length === 0]), s(() => {
+		let e = G.current;
+		if (!e) return;
+		let t = e.ownerDocument, n = !0, r = () => qe(n && t.visibilityState !== "hidden"), i = new IntersectionObserver(([e]) => {
+			n = e?.isIntersecting ?? !1, r();
+		});
+		return i.observe(e), t.addEventListener("visibilitychange", r), () => {
+			i.disconnect(), t.removeEventListener("visibilitychange", r);
+		};
+	}, []), s(() => {
+		let e = G.current?.ownerDocument;
+		if (!e) return;
+		let t = (e) => {
+			ze.current?.contains(e.target) || (X.current.delete(e.pointerId), Z.current = null, Q.set(1));
+		};
+		return e.addEventListener("pointerup", t, !0), e.addEventListener("pointercancel", t, !0), () => {
+			e.removeEventListener("pointerup", t, !0), e.removeEventListener("pointercancel", t, !0);
+		};
+	}, [Q]), c(() => {
+		let e = J.current;
+		if (!e || e.density !== B) return;
+		J.current = null;
+		let t = K.current.get(e.id);
+		t && G.current && (t.focus({ preventScroll: !0 }), P(G.current, t.getBoundingClientRect().top - e.top));
+	}, [B, Y]), c(() => {
+		let e = q.current;
+		if (!e || t.some((t) => t.id === e.id) || U) return;
+		let n = t[Math.min(e.index, t.length - 1)], r = G.current?.ownerDocument.activeElement;
+		r !== G.current?.ownerDocument.body && r?.isConnected || (n ? K.current.get(n.id)?.focus() : G.current?.focus());
+	}, [t, U]), s(() => {
+		let e = Ze.current;
+		if (e.density !== B) Xe(W.columns(Re.format(B)));
+		else if (e.selected !== H && U) {
+			let e = t.findIndex((e) => e.id === H);
+			Xe(e >= 0 ? W.position(Re.format(e + 1), Re.format(t.length), t[e].title) : W.unavailable);
+		} else if (e.favorites.size !== V.size || [...V].some((t) => !e.favorites.has(t))) {
+			let n = t.find((t) => V.has(t.id) !== e.favorites.has(t.id));
+			n && Xe(W.favorite(n.title, V.has(n.id)));
+		}
+		Ze.current = {
+			density: B,
+			selected: H,
+			favorites: V
+		};
+	}, [
+		B,
+		H,
+		Ne,
+		U
+	]);
+	let Qe = (e) => {
+		let t = new Set(V), n = !t.has(e);
+		n ? t.add(e) : t.delete(e), Pe([...t]), v?.(e, n);
+	}, $ = (e, n = q.current?.id ?? t[0]?.id) => {
+		let r = R[Math.min(R.length - 1, Math.max(0, Je + e))];
+		if (r === B) return;
+		let i = n ? K.current.get(n) : void 0;
+		J.current = i && n ? {
+			id: n,
+			top: i.getBoundingClientRect().top,
+			density: r
+		} : null, Me(r);
+	}, $e = (e) => {
+		let n = t[Math.min(t.length - 1, Math.max(0, e))];
+		n && K.current.get(n.id)?.focus();
+	}, et = (e, n) => {
+		if (e.defaultPrevented) return;
+		let r = e.currentTarget.matches(":dir(rtl)") ? -1 : 1, i = {
+			ArrowLeft: n - r,
+			ArrowRight: n + r,
+			ArrowUp: n - Y,
+			ArrowDown: n + Y,
+			PageUp: n - y * Y,
+			PageDown: n + y * Y,
+			Home: 0,
+			End: t.length - 1
+		};
+		i[e.key] !== void 0 && (e.preventDefault(), $e(i[e.key])), (e.key === "+" || e.key === "=") && (e.preventDefault(), $(1, t[n].id)), e.key === "-" && (e.preventDefault(), $(-1, t[n].id));
+	}, tt = () => {
+		let e = t[Math.min(q.current?.index ?? 0, t.length - 1)];
+		(K.current.get(He.current ?? "") ?? (e ? K.current.get(e.id) : null) ?? G.current)?.focus({ preventScroll: !0 });
+	};
+	return /* @__PURE__ */ f(h, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ f(m, {
+			id: L,
+			children: /* @__PURE__ */ f(ee, {
+				className: Se,
+				styles: D,
+				sx: Ce,
+				children: (e) => /* @__PURE__ */ p("div", {
+					...Te,
+					ref: Be,
+					className: e,
+					"data-ui": "photo-grid",
+					role: "region",
+					tabIndex: Te.tabIndex ?? -1,
+					"aria-labelledby": Oe(Te["aria-labelledby"], M?.title?.id ?? `${L}-title`),
+					"data-density": B,
+					"data-columns": Y,
+					onKeyDown: we,
+					children: [
+						/* @__PURE__ */ p("header", {
+							...M?.header,
+							role: M?.header?.role ?? "presentation",
+							css: [he, M?.header?.css],
+							children: [/* @__PURE__ */ f("h2", {
+								...M?.title,
+								id: M?.title?.id ?? `${L}-title`,
+								css: [ge, M?.title?.css],
+								children: n
+							}), /* @__PURE__ */ p("div", {
+								...M?.density,
+								role: "group",
+								"aria-label": M?.density?.["aria-label"] ?? W.density,
+								css: [_e, M?.density?.css],
+								children: [/* @__PURE__ */ f("button", {
+									type: "button",
+									css: O,
+									disabled: !t.length || Je === R.length - 1,
+									onClick: () => $(1),
+									children: W.larger
+								}), /* @__PURE__ */ f("button", {
+									type: "button",
+									css: O,
+									disabled: !t.length || Je === 0,
+									onClick: () => $(-1),
+									children: W.smaller
+								})]
+							})]
+						}),
+						t.length ? /* @__PURE__ */ f(g.div, {
+							style: { scale: Q },
+							children: /* @__PURE__ */ f("ul", {
+								...M?.list,
+								ref: Ve,
+								css: [k, M?.list?.css],
+								"data-ui": "photo-grid-list",
+								"aria-labelledby": Oe(M?.list?.["aria-labelledby"], M?.title?.id ?? `${L}-title`),
+								style: {
+									...M?.list?.style,
+									"--photo-grid-columns": Y
+								},
+								onPointerDown: (e) => {
+									if (M?.list?.onPointerDown?.(e), !(e.defaultPrevented || e.pointerType !== "touch") && (X.current.set(e.pointerId, {
+										x: e.clientX,
+										y: e.clientY
+									}), X.current.size === 2)) {
+										let t = [...X.current.values()], n = e.target.closest("[data-photo-id]");
+										Z.current = {
+											distance: Math.hypot(t[1].x - t[0].x, t[1].y - t[0].y),
+											ratio: 1,
+											focalId: n?.dataset.photoId ?? q.current?.id ?? null
+										}, e.currentTarget.setPointerCapture(e.pointerId);
+									}
+								},
+								onPointerMove: (e) => {
+									if (M?.list?.onPointerMove?.(e), e.defaultPrevented || !X.current.has(e.pointerId)) return;
+									X.current.set(e.pointerId, {
+										x: e.clientX,
+										y: e.clientY
+									});
+									let t = Z.current, n = [...X.current.values()];
+									t && n.length === 2 && t.distance && (t.ratio = Math.hypot(n[1].x - n[0].x, n[1].y - n[0].y) / t.distance, !Ge && Ke && Q.set(Math.min(1.15, Math.max(.85, t.ratio))));
+								},
+								onPointerUp: (e) => {
+									M?.list?.onPointerUp?.(e);
+									let t = Z.current;
+									X.current.delete(e.pointerId), Z.current = null, Q.set(1), !e.defaultPrevented && t && Math.abs(t.ratio - 1) >= b && $(t.ratio > 1 ? 1 : -1, t.focalId ?? void 0);
+								},
+								onPointerCancel: (e) => {
+									M?.list?.onPointerCancel?.(e), X.current.clear(), Z.current = null, Q.set(1);
+								},
+								onLostPointerCapture: (e) => {
+									M?.list?.onLostPointerCapture?.(e), X.current.clear(), Z.current = null, Q.set(1);
+								},
+								children: t.map((e, t) => /* @__PURE__ */ ae("li", {
+									...M?.item,
+									key: e.id,
+									"data-photo-id": e.id,
+									css: M?.item?.css
+								}, /* @__PURE__ */ p(g.div, {
+									layout: !Ge && Ke && q.current?.id !== e.id && J.current?.id !== e.id ? "position" : !1,
+									transition: fe,
+									css: A,
+									children: [/* @__PURE__ */ f(F, {
+										...M?.photo,
+										ref: M?.photo?.ref,
+										register: (t) => (t && K.current.set(e.id, t), () => {
+											K.current.delete(e.id);
+										}),
+										"data-ui": "photo-grid-photo",
+										type: "button",
+										"aria-label": M?.photo?.["aria-label"] ?? W.openPhoto(e.title, e.alt, V.has(e.id)),
+										css: [
+											O,
+											j,
+											M?.photo?.css
+										],
+										onFocus: (n) => {
+											M?.photo?.onFocus?.(n), K.current.set(e.id, n.currentTarget), q.current = {
+												id: e.id,
+												index: t,
+												kind: "photo"
+											};
+										},
+										onClick: (t) => {
+											M?.photo?.onClick?.(t), !t.defaultPrevented && (He.current = e.id, Fe(e.id), Le.setOpen(!0));
+										},
+										onKeyDown: (e) => {
+											M?.photo?.onKeyDown?.(e), e.defaultPrevented || et(e, t);
+										},
+										children: /* @__PURE__ */ f(g.div, {
+											layoutId: !Ge && Ke ? e.id : void 0,
+											transition: fe,
+											css: xe,
+											children: /* @__PURE__ */ f(Ae, {
+												photo: e,
+												unavailable: W.imageUnavailable
+											}, `${e.src}\u0000${e.srcSet ?? ""}`)
+										})
+									}), /* @__PURE__ */ f("button", {
+										...M?.favorite,
+										type: "button",
+										"data-ui": "photo-grid-favorite",
+										"aria-pressed": V.has(e.id),
+										"aria-label": M?.favorite?.["aria-label"] ?? W.favorite(e.title, V.has(e.id)),
+										css: [
+											O,
+											be,
+											M?.favorite?.css
+										],
+										onFocus: (n) => {
+											M?.favorite?.onFocus?.(n), q.current = {
+												id: e.id,
+												index: t,
+												kind: "favorite"
+											};
+										},
+										onClick: (t) => {
+											M?.favorite?.onClick?.(t), t.defaultPrevented || Qe(e.id);
+										},
+										children: V.has(e.id) ? "★" : "☆"
+									})]
+								})))
+							})
+						}) : /* @__PURE__ */ f("p", {
+							css: De,
+							children: W.empty
+						}),
+						/* @__PURE__ */ f("div", {
+							...M?.status,
+							role: "status",
+							"aria-live": "polite",
+							"aria-atomic": "true",
+							css: [Ee, M?.status?.css],
+							children: Ye
+						}),
+						/* @__PURE__ */ f(I, {
+							photos: t,
+							selected: H,
+							open: U ?? !1,
+							controller: {
+								...Le,
+								open: (U ?? !1) && t.length > 0
+							},
+							select: Fe,
+							favorites: V,
+							toggleFavorite: Qe,
+							labels: W,
+							format: Re,
+							slots: M,
+							restore: tt
+						})
+					]
+				})
+			})
+		})
+	});
+}
+L.displayName = "PhotoGrid";
+//#endregion
+export { L as t };