@openrails/contentkit-ui 0.0.0-placeholder → 0.68.0

package/dist/components/media-gallery.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { ContentKitUiAppearance } from '../appearance.js';
+import { GalleryItem } from '../client/gallery.js';
+import { GalleryViewOptions, HlsPlayerOptions } from '../react/gallery.js';
+import { PublicPreset } from '../client/public.js';
+import { ContentKitClient } from '../client/client.js';
+import { ReadResult, RefBody } from '../client/generated/wire.js';
+export interface MediaGalleryProps extends GalleryViewOptions, Pick<HlsPlayerOptions, "xhrSetup" | "refresh" | "abr"> {
+    /**
+     * The item to show, read through the client: its read (refreshed before
+     * the URLs expire, after commits), HLS bases, playlist auth and grant
+     * refresh. Or pass `read` (and hlsBase, xhrSetup, refresh) yourself.
+     */
+    item?: RefBody;
+    /** With item: only files under this path prefix. */
+    prefix?: string;
+    /** With item: each audio file's download name signed into its URL. */
+    download?: boolean;
+    /**
+     * The read API result: files in manifest order with this viewer's access
+     * (scope it with a prefix). A download read adds each audio file's download.
+     * With `refresh`, the gallery reads again shortly before `read.expires`.
+     */
+    read?: ReadResult | null;
+    /** A ladder's HLS folder from the read's `hls` dir: client.media.hlsBase(ref, dir). */
+    hlsBase?: (dir: string) => string;
+    /** The item's poster (its public preset, or a URL), drawn on the first video. */
+    poster?: PublicPreset | string | null;
+    /** Where the first video's preview starts, seconds (e.g. the poster's frame); default 10% in. */
+    previewStart?: number;
+    /** Playable videos preview muted inline (hover, or in view on touch); default the provider's. */
+    inlinePreview?: boolean;
+    /** The host's unlock call to action, drawn over the locked item. */
+    renderLocked?: (locked: {
+        count: number;
+        videos: number;
+    }) => ReactNode;
+    /** Below the carousel, for its current item (e.g. downloads). */
+    renderDetails?: (item: GalleryItem) => ReactNode;
+    /** `sizes` for carousel images. Default "(min-width: 768px) 720px, 100vw". */
+    sizes?: string;
+    /** Tallest the carousel gets; taller media letterboxes. Default "80svh": every slide at its native aspect, full width, never taller than the screen; "none" lifts it. */
+    maxHeight?: string;
+    label?: string;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+    /** Overrides the provider's client (item). */
+    client?: ContentKitClient;
+}
+/**
+ * A post's images and videos as a swipeable carousel or a tile grid that opens
+ * a lightbox, with a view toggle. One item renders alone.
+ */
+export declare function MediaGallery(given: MediaGalleryProps): import('react').JSX.Element | null;

package/dist/components/media-gallery.js

@@ -0,0 +1,597 @@
+import { useInlinePreview as e } from "../react/inline-preview.js";
+import { RenditionImg as t } from "./rendition-img.js";
+import { publicRenditions as n } from "../client/public.js";
+import { useMessages as r } from "../i18n/context.js";
+import { ContentKitUiRoot as i, useScopeProps as a } from "../scope.js";
+import { useOptionalContentKitClient as o } from "../react/context.js";
+import { useMediaRead as s } from "../react/read.js";
+import { Button as c } from "../ui/button.js";
+import { formatDuration as l, galleryItems as u, stageAspect as d } from "../client/gallery.js";
+import { useCarousel as f, useGalleryView as p, useHlsPlayer as m, useRefreshBeforeExpiry as h } from "../react/gallery.js";
+import { SpriteFrame as g, VideoPlayer as _, previewStartAt as v } from "./video-player.js";
+import { ToggleGroup as y, ToggleGroupItem as b } from "../ui/toggle-group.js";
+import { useCallback as x, useMemo as S, useState as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { cn as D } from "cn";
+import { AlertCircleIcon as O, ArrowLeft01Icon as k, ArrowRight01Icon as A, Cancel01Icon as j, CarouselHorizontalIcon as M, Download01Icon as N, GridViewIcon as P, MusicNote01Icon as F, PlayIcon as I, SquareLock02Icon as L } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as R } from "@hugeicons/react";
+import { Dialog as z } from "@base-ui/react/dialog";
+//#region src/components/media-gallery.tsx
+function B(e, t) {
+	let n = e.items.find((e) => e.kind === "video") === t;
+	return {
+		poster: n ? e.poster ?? void 0 : void 0,
+		start: v(n ? e.previewStart : void 0, t.file.dur)
+	};
+}
+var V = (e, t) => t.dir && e.hlsBase ? e.hlsBase(t.dir) : null;
+function H(e) {
+	let t = W(e), { read: n, label: a, className: o, appearance: s, view: c, defaultView: l, onViewChange: d, storageKey: f } = t, { t: m } = r(), g = S(() => u(n), [n]);
+	h(n?.expires, t.refresh);
+	let [_, v] = p({
+		view: c,
+		defaultView: l,
+		onViewChange: d,
+		storageKey: f
+	}), [x, O] = C(0), [k, A] = C(null);
+	if (g.length === 0) return null;
+	let j = {
+		...t,
+		items: g
+	}, N = g.length > 1, F = Math.min(x, g.length - 1), I = N ? _ : "carousel";
+	return /* @__PURE__ */ E(i, {
+		appearance: s,
+		className: D("@container grid gap-2", o),
+		"data-ckui": "media-gallery",
+		"data-view": I,
+		role: "region",
+		"aria-label": a ?? m("gallery.label"),
+		children: [
+			N && /* @__PURE__ */ E("div", {
+				className: "flex items-center justify-between gap-2",
+				"data-ckui": "gallery-header",
+				children: [/* @__PURE__ */ T("span", {
+					className: "text-sm text-muted-foreground tabular-nums",
+					"data-ckui": "gallery-count",
+					children: I === "carousel" ? m("gallery.counter", {
+						current: F + 1,
+						total: g.length
+					}) : null
+				}), /* @__PURE__ */ E(y, {
+					"aria-label": m("gallery.view"),
+					value: [I],
+					onValueChange: (e) => e[0] && v(e[0]),
+					children: [/* @__PURE__ */ T(b, {
+						value: "carousel",
+						"aria-label": m("gallery.carousel"),
+						title: m("gallery.carousel"),
+						children: /* @__PURE__ */ T(R, {
+							icon: M,
+							strokeWidth: 2
+						})
+					}), /* @__PURE__ */ T(b, {
+						value: "grid",
+						"aria-label": m("gallery.grid"),
+						title: m("gallery.grid"),
+						children: /* @__PURE__ */ T(R, {
+							icon: P,
+							strokeWidth: 2
+						})
+					})]
+				})]
+			}),
+			I === "carousel" ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(G, {
+				ctx: j,
+				index: F,
+				onIndex: O
+			}), t.renderDetails?.(g[F])] }) : /* @__PURE__ */ T(ee, {
+				ctx: j,
+				onOpen: A
+			}),
+			/* @__PURE__ */ T(re, {
+				ctx: j,
+				index: k,
+				onIndex: A
+			})
+		]
+	});
+}
+var U = {
+	kind: "",
+	id: ""
+};
+function W(e) {
+	let t = o(e.client);
+	if (e.item && !t) throw Error("contentkit-ui: MediaGallery item needs `client` or a <ContentKitProvider>");
+	let n = s(e.item ?? U, {
+		prefix: e.prefix,
+		download: e.download,
+		read: e.item ? e.read : null,
+		refresh: !1,
+		client: t
+	}), r = e.item, i = x((e) => t.media.hlsBase(r, e), [t, r]);
+	return !r || !t ? e : {
+		...e,
+		read: n.read,
+		hlsBase: e.hlsBase ?? i,
+		xhrSetup: e.xhrSetup ?? t.media.xhrSetup,
+		refresh: e.refresh ?? n.refresh
+	};
+}
+function G({ ctx: e, index: t, onIndex: n, lightbox: i }) {
+	let { t: a } = r(), { items: o } = e, s = f({
+		count: o.length,
+		index: t,
+		onIndexChange: n
+	}), { index: c } = s, l = o.length > 1, u = i ? {} : {
+		aspectRatio: String(d(o, c)),
+		maxHeight: e.maxHeight ?? "80svh"
+	};
+	return /* @__PURE__ */ E("div", {
+		className: D("group/carousel relative outline-none", i ? "size-full" : "grid gap-2"),
+		role: l ? "group" : void 0,
+		"aria-roledescription": l ? "carousel" : void 0,
+		"aria-label": l ? e.label ?? a("gallery.label") : void 0,
+		tabIndex: l && !i ? 0 : void 0,
+		onKeyDown: l && !i ? s.onKeyDown : void 0,
+		"data-ckui": "carousel",
+		children: [/* @__PURE__ */ E("div", {
+			className: D("relative w-full touch-pan-y overflow-hidden select-none", i ? "h-full" : "rounded-lg bg-muted transition-[aspect-ratio] duration-300 ease-out motion-reduce:transition-none"),
+			style: u,
+			"data-ckui": "stage",
+			...l ? s.swipe : {},
+			children: [/* @__PURE__ */ T("div", {
+				className: D("flex h-full", s.dragging ? "transition-none" : "transition-transform duration-300 ease-out motion-reduce:transition-none"),
+				style: { transform: `translateX(calc(${-c * 100}% + ${s.offset}px))` },
+				children: o.map((t, n) => {
+					let r = Math.abs(n - c) <= 1;
+					return /* @__PURE__ */ T("div", {
+						className: "relative h-full w-full shrink-0 overflow-hidden",
+						role: l ? "group" : void 0,
+						"aria-roledescription": l ? "slide" : void 0,
+						"aria-label": l ? a("gallery.slide", {
+							current: n + 1,
+							total: o.length
+						}) : void 0,
+						"aria-hidden": n !== c || void 0,
+						inert: n !== c,
+						"data-ckui": "slide",
+						"data-current": n === c ? "" : void 0,
+						children: r && /* @__PURE__ */ T(q, {
+							ctx: e,
+							item: t,
+							position: n,
+							active: n === c,
+							lightbox: i
+						})
+					}, t.key);
+				})
+			}), l && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(K, {
+				side: "prev",
+				hidden: c === 0,
+				last: c === 1,
+				onClick: s.prev,
+				label: a("gallery.previous"),
+				lightbox: i
+			}), /* @__PURE__ */ T(K, {
+				side: "next",
+				hidden: c === o.length - 1,
+				last: c === o.length - 2,
+				onClick: s.next,
+				label: a("gallery.next"),
+				lightbox: i
+			})] })]
+		}), l && !i && o.length <= 12 && /* @__PURE__ */ T("div", {
+			className: "flex justify-center gap-0.5",
+			"data-ckui": "dots",
+			children: o.map((e, t) => /* @__PURE__ */ T("button", {
+				type: "button",
+				className: "group/dot flex size-4 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				"aria-label": a("gallery.goTo", { index: t + 1 }),
+				"aria-current": t === c || void 0,
+				onClick: () => s.go(t),
+				children: /* @__PURE__ */ T("span", { className: D("size-1.5 rounded-full transition-colors", t === c ? "bg-foreground" : "bg-foreground/25 group-hover/dot:bg-foreground/50") })
+			}, e.key))
+		})]
+	});
+}
+function K({ side: e, hidden: t, last: n, onClick: r, label: i, lightbox: a }) {
+	return t ? null : /* @__PURE__ */ T("button", {
+		type: "button",
+		"aria-label": i,
+		"data-ckui": "gallery-nav",
+		"data-side": e,
+		onClick: (e) => {
+			let t = e.currentTarget.closest("[data-ckui=lightbox], [data-ckui=carousel][tabindex]");
+			r(), n && document.activeElement === e.currentTarget && t?.focus({ preventScroll: !0 });
+		},
+		className: D("group/nav absolute top-0 bottom-14 z-10 flex items-center outline-none", a ? "w-16 sm:w-20" : "w-12", e === "prev" ? a ? "left-0 justify-start pl-3 sm:pl-5" : "left-0 justify-start pl-2" : a ? "right-0 justify-end pr-3 sm:pr-5" : "right-0 justify-end pr-2"),
+		children: /* @__PURE__ */ T("span", {
+			className: D("flex items-center justify-center rounded-full backdrop-blur-sm transition-colors group-focus-visible/nav:ring-3 group-focus-visible/nav:ring-ring/60", a ? "size-10 bg-white/10 text-white group-hover/nav:bg-white/20" : "size-8 bg-white/85 text-zinc-900 shadow-md group-hover/nav:bg-white"),
+			children: /* @__PURE__ */ T(R, {
+				icon: e === "prev" ? k : A,
+				strokeWidth: 2,
+				className: "size-4"
+			})
+		})
+	});
+}
+function q({ ctx: e, item: t, position: n, active: i, lightbox: a }) {
+	let { t: o } = r();
+	if (t.kind === "locked") return /* @__PURE__ */ T(Q, {
+		ctx: e,
+		item: t
+	});
+	let s = t.file;
+	if (t.kind === "audio") return /* @__PURE__ */ T(J, {
+		item: t,
+		position: n
+	});
+	if (t.kind === "image") {
+		if (!s.url) return s.failed ? /* @__PURE__ */ T(Y, { file: s }) : /* @__PURE__ */ T(X, { children: o("gallery.processingImage") });
+		let r = t.key.startsWith("preview/") && !a ? e.items.find((e) => e.kind === "locked") : void 0;
+		return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("img", {
+			src: s.url,
+			alt: o("gallery.image", { index: n + 1 }),
+			width: s.w,
+			height: s.h,
+			sizes: a ? "100vw" : e.sizes ?? "(min-width: 768px) 720px, 100vw",
+			loading: i ? "eager" : "lazy",
+			decoding: "async",
+			draggable: !1,
+			className: "absolute inset-0 size-full object-contain"
+		}), r && /* @__PURE__ */ T($, {
+			ctx: e,
+			item: r
+		})] });
+	}
+	let { poster: c, start: l } = B(e, t);
+	return /* @__PURE__ */ T(_, {
+		inlinePreview: !a && e.inlinePreview,
+		previewStart: l,
+		layout: "fill",
+		base: V(e, t),
+		poster: c,
+		width: s.w,
+		height: s.h,
+		duration: s.dur,
+		active: i,
+		xhrSetup: e.xhrSetup,
+		refresh: e.refresh,
+		expires: e.read?.expires,
+		abr: e.abr,
+		label: o("gallery.video", { index: n + 1 }),
+		className: a ? "bg-transparent" : void 0
+	});
+}
+function J({ item: e, position: t }) {
+	let { t: n } = r(), i = e.file, a = (e.dir ?? i.path).replace(/\/$/, "").split("/").pop(), o = n("gallery.audio", { index: t + 1 });
+	return /* @__PURE__ */ E("div", {
+		className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-muted p-4",
+		"data-ckui": "audio",
+		children: [
+			/* @__PURE__ */ E("div", {
+				className: "flex min-w-0 items-center gap-2 text-sm text-muted-foreground",
+				children: [
+					/* @__PURE__ */ T(R, {
+						icon: F,
+						className: "size-5 shrink-0",
+						strokeWidth: 1.75
+					}),
+					a && /* @__PURE__ */ T("span", {
+						className: "truncate",
+						children: a
+					}),
+					i.dur ? /* @__PURE__ */ T("span", {
+						className: "tabular-nums",
+						children: l(i.dur)
+					}) : null
+				]
+			}),
+			i.failed ? /* @__PURE__ */ T("p", {
+				className: "text-sm text-destructive",
+				role: "alert",
+				children: n("gallery.failedAudio")
+			}) : i.url ? /* @__PURE__ */ T("audio", {
+				src: i.url,
+				controls: !0,
+				preload: "metadata",
+				"aria-label": o,
+				className: "w-full max-w-md",
+				"data-ckui-noswipe": ""
+			}) : /* @__PURE__ */ T("p", {
+				className: "text-sm text-muted-foreground",
+				children: n("gallery.processingAudio")
+			}),
+			i.download && i.url && /* @__PURE__ */ E("a", {
+				href: i.url,
+				download: i.download,
+				className: "inline-flex items-center gap-1.5 text-sm underline-offset-4 hover:underline",
+				"data-ckui-noswipe": "",
+				children: [/* @__PURE__ */ T(R, {
+					icon: N,
+					className: "size-4",
+					strokeWidth: 2
+				}), n("gallery.download")]
+			})
+		]
+	});
+}
+function Y({ file: e }) {
+	let { t, error: n } = r(), i = e.failed, a = i?.code ? n({
+		code: i.code,
+		message: i.message,
+		details: i.details,
+		refusal: !0
+	}) : t("gallery.failedImage");
+	return /* @__PURE__ */ E("div", {
+		className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted p-4 text-center text-sm text-destructive",
+		role: "alert",
+		"data-ckui": "image-failed",
+		children: [/* @__PURE__ */ T(R, {
+			icon: O,
+			className: "size-6"
+		}), /* @__PURE__ */ T("p", {
+			className: "max-w-sm text-balance",
+			children: a
+		})]
+	});
+}
+function X({ children: e }) {
+	return /* @__PURE__ */ E("div", {
+		className: "absolute inset-0 flex items-center justify-center gap-2 bg-muted text-sm text-muted-foreground",
+		children: [/* @__PURE__ */ T("span", {
+			"aria-hidden": !0,
+			className: "size-4 rounded-full border-2 border-current/30 border-t-current motion-safe:animate-spin"
+		}), e]
+	});
+}
+function Z(e, t) {
+	return t === 1 ? e("gallery.lockedOne") : e("gallery.lockedMany", { count: t });
+}
+function Q({ ctx: e, item: t, tile: n }) {
+	let { t: i } = r();
+	return /* @__PURE__ */ E("div", {
+		className: "absolute inset-0 overflow-hidden bg-muted",
+		"data-ckui": "locked",
+		children: [t.backdrop && /* @__PURE__ */ T("img", {
+			src: t.backdrop,
+			alt: "",
+			draggable: !1,
+			className: "absolute inset-0 size-full scale-110 object-cover blur-xl"
+		}), /* @__PURE__ */ E("div", {
+			className: D("absolute inset-0 flex flex-col items-center justify-center gap-3 p-4 text-center", t.backdrop ? "bg-black/45 text-white" : "text-foreground"),
+			children: [/* @__PURE__ */ T(R, {
+				icon: L,
+				className: n ? "size-6" : "size-8",
+				strokeWidth: 1.75
+			}), n ? /* @__PURE__ */ E("span", {
+				className: "text-lg font-semibold tabular-nums",
+				children: ["+", t.count]
+			}) : /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("p", {
+				className: "text-sm font-medium text-balance",
+				children: Z(i, t.count)
+			}), e.renderLocked && /* @__PURE__ */ T("div", {
+				"data-ckui-noswipe": "",
+				children: e.renderLocked({
+					count: t.count,
+					videos: t.videos
+				})
+			})] })]
+		})]
+	});
+}
+function $({ ctx: e, item: t }) {
+	let { t: n } = r();
+	return /* @__PURE__ */ E("div", {
+		className: "absolute inset-x-0 bottom-0 flex flex-wrap items-center justify-between gap-x-3 gap-y-2 bg-linear-to-t from-black/75 via-black/45 to-transparent px-4 pt-10 pb-4 text-white",
+		"data-ckui": "locked-bar",
+		children: [/* @__PURE__ */ E("span", {
+			className: "flex items-center gap-2 text-sm font-medium",
+			children: [/* @__PURE__ */ T(R, {
+				icon: L,
+				className: "size-5 shrink-0",
+				strokeWidth: 1.75
+			}), Z(n, t.count)]
+		}), e.renderLocked && /* @__PURE__ */ T("div", {
+			"data-ckui-noswipe": "",
+			children: e.renderLocked({
+				count: t.count,
+				videos: t.videos
+			})
+		})]
+	});
+}
+function ee({ ctx: e, onOpen: t }) {
+	let { t: n } = r(), i = e.items.length;
+	return /* @__PURE__ */ T("ul", {
+		className: D("grid gap-1", i === 2 || i === 4 ? "grid-cols-2" : "grid-cols-2 @md:grid-cols-3"),
+		"data-ckui": "grid",
+		children: e.items.map((r, a) => /* @__PURE__ */ T("li", { children: /* @__PURE__ */ T(te, {
+			ctx: e,
+			item: r,
+			label: n("gallery.open", {
+				index: a + 1,
+				total: i
+			}),
+			onOpen: () => t(a)
+		}) }, r.key))
+	});
+}
+function te({ ctx: e, item: r, label: i, onOpen: a }) {
+	let [o, s] = C(null), c;
+	if (r.kind === "locked") c = /* @__PURE__ */ T(Q, {
+		ctx: e,
+		item: r,
+		tile: !0
+	});
+	else if (r.kind === "audio") c = /* @__PURE__ */ E("span", {
+		className: "absolute inset-0 flex flex-col items-center justify-center gap-1 bg-muted text-muted-foreground",
+		children: [/* @__PURE__ */ T(R, {
+			icon: r.file.failed ? O : F,
+			className: D("size-7", r.file.failed && "text-destructive"),
+			strokeWidth: 1.75
+		}), r.file.dur ? /* @__PURE__ */ T("span", {
+			className: "text-[11px] font-medium tabular-nums",
+			children: l(r.file.dur)
+		}) : null]
+	});
+	else if (r.kind === "image") c = r.file.url ? /* @__PURE__ */ T("img", {
+		src: r.file.url,
+		alt: "",
+		loading: "lazy",
+		decoding: "async",
+		draggable: !1,
+		className: "absolute inset-0 size-full object-cover transition-transform duration-300 motion-safe:group-hover:scale-[1.03]"
+	}) : r.file.failed ? /* @__PURE__ */ T("span", {
+		className: "absolute inset-0 flex items-center justify-center bg-muted text-destructive",
+		children: /* @__PURE__ */ T(R, {
+			icon: O,
+			className: "size-6"
+		})
+	}) : /* @__PURE__ */ T(X, { children: "" });
+	else {
+		let i = r.file, { poster: a, start: s } = B(e, r), u = typeof a == "string" ? [] : n(a), d = V(e, r);
+		c = /* @__PURE__ */ E(w, { children: [
+			typeof a == "string" ? /* @__PURE__ */ T("img", {
+				src: a,
+				alt: "",
+				loading: "lazy",
+				decoding: "async",
+				className: "absolute inset-0 size-full object-cover"
+			}) : u.length ? /* @__PURE__ */ T(t, {
+				outputs: u,
+				loading: "lazy",
+				className: "absolute inset-0 size-full object-cover"
+			}) : d ? /* @__PURE__ */ T(g, {
+				vtt: `${d}sprite.vtt`,
+				xhrSetup: e.xhrSetup,
+				fit: "cover"
+			}) : null,
+			d && /* @__PURE__ */ T(ne, {
+				ctx: e,
+				base: d,
+				start: s,
+				target: o
+			}),
+			i.failed ? /* @__PURE__ */ T("span", {
+				className: "absolute inset-0 flex items-center justify-center bg-muted text-destructive",
+				children: /* @__PURE__ */ T(R, {
+					icon: O,
+					className: "size-6"
+				})
+			}) : d ? /* @__PURE__ */ T("span", {
+				className: "pointer-events-none absolute top-1/2 left-1/2 flex size-10 -translate-1/2 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur-sm transition-opacity group-hover:opacity-0",
+				children: /* @__PURE__ */ T(R, {
+					icon: I,
+					className: "ml-0.5 size-5 fill-current",
+					strokeWidth: 1.5
+				})
+			}) : /* @__PURE__ */ T(X, { children: "" }),
+			i.dur ? /* @__PURE__ */ T("span", {
+				className: "pointer-events-none absolute right-1.5 bottom-1.5 rounded bg-black/65 px-1.5 py-0.5 text-[11px] font-medium text-white tabular-nums",
+				children: l(i.dur)
+			}) : null
+		] });
+	}
+	return /* @__PURE__ */ T("button", {
+		type: "button",
+		"aria-label": i,
+		onClick: a,
+		ref: s,
+		className: "group relative block aspect-square w-full overflow-hidden rounded-md bg-muted outline-none focus-visible:ring-3 focus-visible:ring-ring/60",
+		"data-ckui": "tile",
+		"data-kind": r.kind,
+		children: c
+	});
+}
+function ne({ ctx: t, base: n, start: r, target: i }) {
+	let a = m({
+		src: `${n}master.m3u8`,
+		xhrSetup: t.xhrSetup,
+		refresh: t.refresh,
+		expires: t.read?.expires,
+		abr: t.abr,
+		qualityKey: null
+	});
+	return e({
+		setting: t.inlinePreview,
+		available: !0,
+		target: i,
+		start: () => a.preview(r),
+		stop: a.unload
+	}), /* @__PURE__ */ T("video", {
+		ref: a.ref,
+		muted: !0,
+		playsInline: !0,
+		preload: "none",
+		"aria-hidden": !0,
+		tabIndex: -1,
+		className: D("pointer-events-none absolute inset-0 size-full object-cover opacity-0 transition-opacity duration-300 motion-reduce:transition-none", a.previewing && a.status === "playing" && "opacity-100"),
+		"data-ckui": "tile-preview"
+	});
+}
+function re({ ctx: e, index: t, onIndex: n }) {
+	let { t: i } = r(), o = a(e.appearance), [s, l] = C(t ?? 0), [u, d] = C(t);
+	t !== u && (d(t), t !== null && l(t));
+	let p = t !== null, m = f({
+		count: e.items.length,
+		index: s,
+		onIndexChange: l
+	});
+	return /* @__PURE__ */ T(z.Root, {
+		open: p,
+		onOpenChange: (e) => !e && n(null),
+		children: /* @__PURE__ */ E(z.Portal, {
+			...o,
+			"data-ckui-theme": "dark",
+			children: [/* @__PURE__ */ T(z.Backdrop, { className: "fixed inset-0 z-50 bg-black duration-150 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:animate-none" }), /* @__PURE__ */ E(z.Popup, {
+				className: "fixed inset-0 z-50 flex flex-col bg-black text-white outline-none duration-150 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:animate-none",
+				"data-ckui": "lightbox",
+				onKeyDown: m.onKeyDown,
+				children: [
+					/* @__PURE__ */ T(z.Title, {
+						className: "sr-only",
+						children: e.label ?? i("gallery.lightbox")
+					}),
+					/* @__PURE__ */ E("div", {
+						className: "flex h-14 shrink-0 items-center justify-between px-4",
+						children: [/* @__PURE__ */ T("span", {
+							className: "text-sm text-white/80 tabular-nums",
+							children: e.items.length > 1 ? i("gallery.counter", {
+								current: s + 1,
+								total: e.items.length
+							}) : null
+						}), /* @__PURE__ */ E(z.Close, {
+							render: /* @__PURE__ */ T(c, {
+								variant: "ghost",
+								size: "icon",
+								className: "rounded-full text-white hover:bg-white/10 hover:text-white"
+							}),
+							children: [/* @__PURE__ */ T(R, {
+								icon: j,
+								strokeWidth: 2
+							}), /* @__PURE__ */ T("span", {
+								className: "sr-only",
+								children: i("common.close")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "min-h-0 flex-1 pb-4 sm:px-4 sm:pb-6",
+						children: p && /* @__PURE__ */ T(G, {
+							ctx: e,
+							index: s,
+							onIndex: l,
+							lightbox: !0
+						})
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { H as MediaGallery };
+
+//# sourceMappingURL=media-gallery.js.map