@phtngyn/cms 0.2.0-beta.8 → 0.3.0

package/studio/chunks/MediaPicker-BZs2wUFz.js

@@ -0,0 +1,837 @@
+import { $ as e, Dt as t, E as n, K as r, b as i, m as a, o, q as s, s as c, t as ee, u as l, y as u } from "./Button-BT3ztSPx.js";
+import { st as d } from "./Search-BEgCe9Aj.js";
+import { k as te, r as f } from "./studioContext-I8HozGU1.js";
+import { $r as p, $t as m, A as h, B as ne, Ci as g, Cr as _, E as v, K as y, M as b, N as x, Nn as S, Or as C, Pn as w, V as T, Yr as E, en as D, fa as O, gn as k, hr as A, k as j, mr as M, o as N, ra as P, ui as F, un as I } from "./runtime-core.esm-bundler-DKFA9Rep.js";
+import { t as re } from "./Select-B50WZMW-.js";
+import { n as ie } from "./overlay-DnqFLZTc.js";
+import { t as ae } from "./Switch-qKl1aDn7.js";
+import { t as oe } from "./FormField-CgM6l2Yn.js";
+import { n as L, t as se } from "./MediaUploadPanel-C7Kyg6aR.js";
+import { t as ce } from "./Alert-D0D24z_a.js";
+import { a as R, c as le, n as z, o as ue, r as de } from "./presentation-DF83w0hE.js";
+import { t as fe } from "./Modal-D6hSvxHd.js";
+import { t as B } from "./Skeleton-COz8dcrw.js";
+//#region virtual:nuxt-ui-templates/ui/textarea.ts
+var V = {
+	slots: {
+		root: "relative inline-flex items-center",
+		base: ["w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75", "transition-colors"],
+		leading: "absolute start-0 flex items-start",
+		leadingIcon: "shrink-0 text-dimmed",
+		leadingAvatar: "shrink-0",
+		leadingAvatarSize: "",
+		trailing: "absolute end-0 flex items-start",
+		trailingIcon: "shrink-0 text-dimmed"
+	},
+	variants: {
+		fieldGroup: {
+			horizontal: {
+				root: "group has-focus-visible:z-[1]",
+				base: "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
+			},
+			vertical: {
+				root: "group has-focus-visible:z-[1]",
+				base: "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
+			}
+		},
+		size: {
+			xs: {
+				base: "px-2 py-1 text-sm/4 gap-1",
+				leading: "ps-2 inset-y-1",
+				trailing: "pe-2 inset-y-1",
+				leadingIcon: "size-4",
+				leadingAvatarSize: "3xs",
+				trailingIcon: "size-4"
+			},
+			sm: {
+				base: "px-2.5 py-1.5 text-sm/4 gap-1.5",
+				leading: "ps-2.5 inset-y-1.5",
+				trailing: "pe-2.5 inset-y-1.5",
+				leadingIcon: "size-4",
+				leadingAvatarSize: "3xs",
+				trailingIcon: "size-4"
+			},
+			md: {
+				base: "px-2.5 py-1.5 text-base/5 gap-1.5",
+				leading: "ps-2.5 inset-y-1.5",
+				trailing: "pe-2.5 inset-y-1.5",
+				leadingIcon: "size-5",
+				leadingAvatarSize: "2xs",
+				trailingIcon: "size-5"
+			},
+			lg: {
+				base: "px-3 py-2 text-base/5 gap-2",
+				leading: "ps-3 inset-y-2",
+				trailing: "pe-3 inset-y-2",
+				leadingIcon: "size-5",
+				leadingAvatarSize: "2xs",
+				trailingIcon: "size-5"
+			},
+			xl: {
+				base: "px-3 py-2 text-base gap-2",
+				leading: "ps-3 inset-y-2",
+				trailing: "pe-3 inset-y-2",
+				leadingIcon: "size-6",
+				leadingAvatarSize: "xs",
+				trailingIcon: "size-6"
+			}
+		},
+		variant: {
+			outline: "text-highlighted bg-default ring ring-inset ring-accented",
+			soft: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
+			subtle: "text-highlighted bg-elevated ring ring-inset ring-accented",
+			ghost: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
+			none: "text-highlighted bg-transparent focus:outline-none"
+		},
+		color: {
+			primary: "",
+			secondary: "",
+			success: "",
+			info: "",
+			warning: "",
+			error: "",
+			neutral: ""
+		},
+		leading: { true: "" },
+		trailing: { true: "" },
+		loading: { true: "" },
+		highlight: { true: "" },
+		fixed: { false: "" },
+		type: { file: "file:me-1.5 file:font-medium file:text-muted file:outline-none" },
+		autoresize: { true: { base: "resize-none" } }
+	},
+	compoundVariants: [
+		{
+			color: "primary",
+			variant: ["outline", "subtle"],
+			class: "outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary"
+		},
+		{
+			color: "secondary",
+			variant: ["outline", "subtle"],
+			class: "outline-secondary/25 focus-visible:outline-3 focus-visible:ring-secondary"
+		},
+		{
+			color: "success",
+			variant: ["outline", "subtle"],
+			class: "outline-success/25 focus-visible:outline-3 focus-visible:ring-success"
+		},
+		{
+			color: "info",
+			variant: ["outline", "subtle"],
+			class: "outline-info/25 focus-visible:outline-3 focus-visible:ring-info"
+		},
+		{
+			color: "warning",
+			variant: ["outline", "subtle"],
+			class: "outline-warning/25 focus-visible:outline-3 focus-visible:ring-warning"
+		},
+		{
+			color: "error",
+			variant: ["outline", "subtle"],
+			class: "outline-error/25 focus-visible:outline-3 focus-visible:ring-error"
+		},
+		{
+			color: "primary",
+			variant: ["soft", "ghost"],
+			class: "outline-primary/25 focus-visible:outline-3"
+		},
+		{
+			color: "secondary",
+			variant: ["soft", "ghost"],
+			class: "outline-secondary/25 focus-visible:outline-3"
+		},
+		{
+			color: "success",
+			variant: ["soft", "ghost"],
+			class: "outline-success/25 focus-visible:outline-3"
+		},
+		{
+			color: "info",
+			variant: ["soft", "ghost"],
+			class: "outline-info/25 focus-visible:outline-3"
+		},
+		{
+			color: "warning",
+			variant: ["soft", "ghost"],
+			class: "outline-warning/25 focus-visible:outline-3"
+		},
+		{
+			color: "error",
+			variant: ["soft", "ghost"],
+			class: "outline-error/25 focus-visible:outline-3"
+		},
+		{
+			color: "primary",
+			highlight: !0,
+			class: "ring ring-inset ring-primary"
+		},
+		{
+			color: "secondary",
+			highlight: !0,
+			class: "ring ring-inset ring-secondary"
+		},
+		{
+			color: "success",
+			highlight: !0,
+			class: "ring ring-inset ring-success"
+		},
+		{
+			color: "info",
+			highlight: !0,
+			class: "ring ring-inset ring-info"
+		},
+		{
+			color: "warning",
+			highlight: !0,
+			class: "ring ring-inset ring-warning"
+		},
+		{
+			color: "error",
+			highlight: !0,
+			class: "ring ring-inset ring-error"
+		},
+		{
+			color: "neutral",
+			variant: ["outline", "subtle"],
+			class: "outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted"
+		},
+		{
+			color: "neutral",
+			variant: ["soft", "ghost"],
+			class: "outline-inverted/25 focus-visible:outline-3"
+		},
+		{
+			color: "neutral",
+			highlight: !0,
+			class: "ring ring-inset ring-inverted"
+		},
+		{
+			leading: !0,
+			size: "xs",
+			class: "ps-7"
+		},
+		{
+			leading: !0,
+			size: "sm",
+			class: "ps-8"
+		},
+		{
+			leading: !0,
+			size: "md",
+			class: "ps-9"
+		},
+		{
+			leading: !0,
+			size: "lg",
+			class: "ps-10"
+		},
+		{
+			leading: !0,
+			size: "xl",
+			class: "ps-11"
+		},
+		{
+			trailing: !0,
+			size: "xs",
+			class: "pe-7"
+		},
+		{
+			trailing: !0,
+			size: "sm",
+			class: "pe-8"
+		},
+		{
+			trailing: !0,
+			size: "md",
+			class: "pe-9"
+		},
+		{
+			trailing: !0,
+			size: "lg",
+			class: "pe-10"
+		},
+		{
+			trailing: !0,
+			size: "xl",
+			class: "pe-11"
+		},
+		{
+			loading: !0,
+			leading: !0,
+			class: { leadingIcon: "animate-spin" }
+		},
+		{
+			loading: !0,
+			leading: !1,
+			trailing: !0,
+			class: { trailingIcon: "animate-spin" }
+		},
+		{
+			fixed: !1,
+			size: "xs",
+			class: "md:text-xs"
+		},
+		{
+			fixed: !1,
+			size: "sm",
+			class: "md:text-xs"
+		},
+		{
+			fixed: !1,
+			size: "md",
+			class: "md:text-sm"
+		},
+		{
+			fixed: !1,
+			size: "lg",
+			class: "md:text-sm"
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		color: "primary",
+		variant: "outline"
+	}
+}, H = [
+	"id",
+	"value",
+	"name",
+	"rows",
+	"placeholder",
+	"disabled",
+	"required"
+], U = /*@__PURE__*/ Object.assign({ inheritAttrs: !1 }, {
+	__name: "Textarea",
+	props: {
+		as: {
+			type: null,
+			required: !1
+		},
+		id: {
+			type: String,
+			required: !1
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		placeholder: {
+			type: String,
+			required: !1
+		},
+		color: {
+			type: null,
+			required: !1
+		},
+		variant: {
+			type: null,
+			required: !1
+		},
+		size: {
+			type: null,
+			required: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1
+		},
+		autofocus: {
+			type: Boolean,
+			required: !1
+		},
+		autofocusDelay: {
+			type: Number,
+			required: !1,
+			default: 0
+		},
+		autoresize: {
+			type: Boolean,
+			required: !1
+		},
+		autoresizeDelay: {
+			type: Number,
+			required: !1,
+			default: 0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1
+		},
+		rows: {
+			type: Number,
+			required: !1,
+			default: 3
+		},
+		maxrows: {
+			type: Number,
+			required: !1,
+			default: 0
+		},
+		highlight: {
+			type: Boolean,
+			required: !1
+		},
+		fixed: {
+			type: Boolean,
+			required: !1
+		},
+		defaultValue: {
+			type: null,
+			required: !1
+		},
+		modelValue: {
+			type: null,
+			required: !1
+		},
+		modelModifiers: {
+			type: null,
+			required: !1
+		},
+		class: {
+			type: null,
+			required: !1
+		},
+		ui: {
+			type: Object,
+			required: !1
+		},
+		icon: {
+			type: null,
+			required: !1
+		},
+		avatar: {
+			type: Object,
+			required: !1
+		},
+		leading: {
+			type: Boolean,
+			required: !1
+		},
+		leadingIcon: {
+			type: null,
+			required: !1
+		},
+		trailing: {
+			type: Boolean,
+			required: !1
+		},
+		trailingIcon: {
+			type: null,
+			required: !1
+		},
+		loading: {
+			type: Boolean,
+			required: !1
+		},
+		loadingIcon: {
+			type: null,
+			required: !1
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"blur",
+		"change"
+	],
+	setup(ee, { expose: d, emit: te, attrs: f }) {
+		let ne = ee, y = te, S = M(), T = i("textarea", ne), E = t(T, "modelValue", y, { defaultValue: T.defaultValue }), O = e(), { emitFormFocus: N, emitFormBlur: F, emitFormInput: re, emitFormChange: ie, size: ae, color: oe, id: L, name: se, highlight: ce, disabled: R, ariaAttrs: le } = o(ne, { deferInputValidation: !0 }), z = v(() => oe.value ?? T.color), ue = v(() => ce.value ?? T.highlight), de = v(() => ae.value ?? T.size), fe = v(() => R.value ?? T.disabled), { isLeading: B, isTrailing: U, leadingIconName: W, trailingIconName: G } = l(T), K = v(() => u({
+			extend: V,
+			...O.ui?.textarea || {}
+		})({
+			color: z.value,
+			variant: T.variant,
+			size: de.value,
+			loading: T.loading,
+			highlight: ue.value,
+			fixed: T.fixed,
+			autoresize: T.autoresize,
+			leading: B.value || !!T.avatar || !!S.leading,
+			trailing: U.value || !!S.trailing
+		})), q = A("textareaRef");
+		function J(e) {
+			T.modelModifiers?.trim && (typeof e == "string" || e == null) && (e = e?.trim() ?? null), T.modelModifiers?.number && (e = s(e)), T.modelModifiers?.nullable && r(e) && (e = null), T.modelModifiers?.optional && !T.modelModifiers?.nullable && e !== null && r(e) && (e = void 0), E.value = e, re();
+		}
+		function pe(e) {
+			Y(), T.modelModifiers?.lazy || J(e.target.value);
+		}
+		function me(e) {
+			let t = e.target.value;
+			T.modelModifiers?.lazy && J(t), T.modelModifiers?.trim && (e.target.value = t.trim()), ie(), y("change", e);
+		}
+		function he(e) {
+			F(), y("blur", e);
+		}
+		function ge() {
+			T.autofocus && q.value?.focus();
+		}
+		function Y() {
+			if (T.autoresize && q.value) {
+				q.value.rows = T.rows;
+				let e = q.value.style.overflow;
+				q.value.style.overflow = "hidden";
+				let t = window.getComputedStyle(q.value), n = Number.parseInt(t.paddingTop) + Number.parseInt(t.paddingBottom), r = Number.parseInt(t.lineHeight), { scrollHeight: i } = q.value, a = (i - n) / r;
+				a > T.rows && (q.value.rows = T.maxrows ? Math.min(a, T.maxrows) : a), q.value.style.overflow = e;
+			}
+		}
+		_(E, () => {
+			D(Y);
+		});
+		let X, _e;
+		return I(() => {
+			X = setTimeout(() => {
+				ge();
+			}, T.autofocusDelay), _e = setTimeout(async () => {
+				await D(), Y();
+			}, T.autoresizeDelay);
+		}), p(() => {
+			clearTimeout(X), clearTimeout(_e);
+		}), d({
+			textareaRef: q,
+			autoResize: Y
+		}), (e, t) => (k(), h(g(n), {
+			as: g(T).as,
+			"data-slot": f["data-slot"] ?? "root",
+			class: P(K.value.root({ class: [g(T).ui?.root, g(T).class] }))
+		}, {
+			default: C(() => [
+				j("textarea", m({
+					id: g(L),
+					ref_key: "textareaRef",
+					ref: q,
+					value: g(E),
+					name: g(se),
+					rows: g(T).rows,
+					placeholder: g(T).placeholder,
+					class: K.value.base({ class: g(T).ui?.base }),
+					disabled: fe.value,
+					required: g(T).required
+				}, {
+					...f,
+					...g(le)
+				}, {
+					"data-slot": "base",
+					onInput: pe,
+					onBlur: he,
+					onChange: me,
+					onFocus: t[0] ||= (...e) => g(N) && g(N)(...e)
+				}), null, 16, H),
+				w(e.$slots, "default", { ui: K.value }),
+				g(B) || g(T).avatar || S.leading ? (k(), x("span", {
+					key: 0,
+					"data-slot": "leading",
+					class: P(K.value.leading({ class: g(T).ui?.leading }))
+				}, [w(e.$slots, "leading", { ui: K.value }, () => [g(B) && g(W) ? (k(), h(a, {
+					key: 0,
+					name: g(W),
+					"data-slot": "leadingIcon",
+					class: P(K.value.leadingIcon({ class: g(T).ui?.leadingIcon }))
+				}, null, 8, ["name", "class"])) : g(T).avatar ? (k(), h(c, m({
+					key: 1,
+					size: g(T).ui?.leadingAvatarSize || K.value.leadingAvatarSize()
+				}, g(T).avatar, {
+					"data-slot": "leadingAvatar",
+					class: K.value.leadingAvatar({ class: g(T).ui?.leadingAvatar })
+				}), null, 16, ["size", "class"])) : b("", !0)])], 2)) : b("", !0),
+				g(U) || S.trailing ? (k(), x("span", {
+					key: 1,
+					"data-slot": "trailing",
+					class: P(K.value.trailing({ class: g(T).ui?.trailing }))
+				}, [w(e.$slots, "trailing", { ui: K.value }, () => [g(G) ? (k(), h(a, {
+					key: 0,
+					name: g(G),
+					"data-slot": "trailingIcon",
+					class: P(K.value.trailingIcon({ class: g(T).ui?.trailingIcon }))
+				}, null, 8, ["name", "class"])) : b("", !0)])], 2)) : b("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"as",
+			"data-slot",
+			"class"
+		]));
+	}
+}), W = { class: "flex flex-wrap items-center gap-2 px-5 pb-4" }, G = { class: "max-h-[min(60vh,480px)] overflow-y-auto" }, K = { class: "flex min-h-40 min-w-0 flex-col" }, q = {
+	key: 1,
+	class: "grid grid-cols-2 gap-3 px-5 sm:grid-cols-4"
+}, J = {
+	key: 2,
+	class: "grid flex-1 place-items-center p-5 text-center"
+}, pe = { class: "max-w-xs" }, me = { class: "mt-3 text-sm font-medium text-highlighted" }, he = { class: "mt-1 text-sm text-muted" }, ge = {
+	key: 3,
+	class: "px-5 pb-4"
+}, Y = { class: "grid grid-cols-2 gap-3 sm:grid-cols-4" }, X = [
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], _e = ["src"], ve = {
+	key: 1,
+	class: "grid size-full place-items-center text-muted"
+}, ye = {
+	key: 2,
+	class: "absolute right-2 top-2 grid size-6 place-items-center rounded-full bg-inverted text-inverted"
+}, be = { class: "mt-2 block truncate text-xs font-medium text-highlighted" }, xe = {
+	key: 0,
+	class: "mt-0.5 block truncate text-xs text-muted"
+}, Se = {
+	key: 0,
+	class: "flex justify-center pt-5"
+}, Ce = {
+	key: 4,
+	class: "px-5 pb-4 pt-2 text-xs text-muted",
+	"aria-live": "polite"
+}, we = { key: 0 }, Te = {
+	key: 0,
+	class: "mx-5 mb-1 rounded-xl bg-muted/40 p-4"
+}, Ee = ["src"], De = { class: "min-w-0 flex flex-col gap-3" }, Oe = { class: "flex flex-wrap items-baseline gap-x-2 gap-y-1" }, ke = { class: "wrap-break-word text-sm font-medium text-highlighted" }, Ae = { class: "text-xs text-muted" }, je = {
+	key: 0,
+	class: "grid gap-3 sm:grid-cols-[minmax(0,1fr)_140px]"
+}, Me = { class: "grid gap-3" }, Ne = /* @__PURE__ */ y({
+	__name: "MediaPicker",
+	props: {
+		open: { type: Boolean },
+		kind: {},
+		allowUpload: { type: Boolean },
+		mode: { default: "insert" },
+		assetOnly: {
+			type: Boolean,
+			default: !1
+		},
+		initialLayout: { default: "natural" }
+	},
+	emits: ["cancel", "commit"],
+	setup(e, { emit: t }) {
+		let { t: n, locale: r } = d(), i = f(), o = e, s = t, { assets: c, folders: l, selected: u, search: p, folder: m, kind: y, total: w, loading: A, error: M, load: I, settled: V, reset: H, selectAsset: Ne } = L({
+			active: () => o.open,
+			initialKind: o.kind,
+			selectFirst: !1
+		}), Pe = v({
+			get: () => m.value === void 0 ? z : m.value || "/__unfiled__",
+			set: (e) => m.value = e === "/__all__" ? void 0 : e === "/__unfiled__" ? "" : e
+		}), Z = F(""), Q = F(!1), $ = F("natural"), Fe = F(null), Ie = F(null), Le = v(() => R(n)), Re = v(() => n(`media.picker.${o.kind}.${o.assetOnly || o.mode === "choose" ? "choose" : o.mode}`)), ze = v(() => [
+			{
+				label: n("media-picker.all-folders"),
+				value: z
+			},
+			{
+				label: n("media-asset-details.no-folder"),
+				value: le
+			},
+			...l.value.map((e) => ({
+				label: e,
+				value: e
+			}))
+		]), Be = v(() => !!u.value && (o.assetOnly || o.kind === "video" || Q.value || !!Z.value.trim())), Ve = v(() => p.value ? n(`media.picker.${o.kind}.no-matching`) : m.value === void 0 ? o.allowUpload ? n("media-picker.your-library-is-empty") : n(`media.picker.${o.kind}.none`) : n(`media.picker.${o.kind}.no-folder`)), He = v(() => p.value ? n("media-picker.try-a-different-filename-or-path") : m.value === void 0 ? o.allowUpload ? n(`media.picker.${o.kind}.get-started`) : n(`media.picker.${o.kind}.ask-administrator`) : o.allowUpload ? n("media-picker.upload-here-or-choose-another-folder") : n("media-picker.choose-another-folder"));
+		_(() => o.open, async (e) => {
+			e && (H(), p.value = "", m.value = void 0, y.value = o.kind, Z.value = "", Q.value = !1, $.value = o.kind === "image" ? o.initialLayout : "content", await V(), await D(), Ie.value?.$el.querySelector("input")?.focus());
+		}, { immediate: !0 }), _(() => o.kind, (e) => {
+			H(), y.value = e, o.open && I();
+		}, { flush: "sync" });
+		function Ue(e) {
+			Ne(e), Z.value = e.name.replace(/\.[^.]+$/u, "").replace(/[-_]+/gu, " "), Q.value = !1;
+		}
+		function We() {
+			u.value && Be.value && s("commit", {
+				asset: u.value,
+				alt: Q.value ? "" : Z.value.trim(),
+				title: u.value.name.trim() || u.value.name,
+				layout: $.value
+			});
+		}
+		function Ge() {
+			o.allowUpload && Fe.value?.open({ folder: m.value });
+		}
+		async function Ke(e) {
+			let t = e.at(-1);
+			t && (p.value = "", m.value = t.folder, await V(), Ue(t));
+		}
+		return (t, o) => {
+			let l = ie, d = re, f = ee, _ = ce, v = B, y = a, D = U, F = oe, L = ae, R = fe;
+			return k(), x(N, null, [T(R, {
+				open: e.open,
+				title: Re.value,
+				description: g(n)(`media.picker.${e.kind}.description`),
+				ui: {
+					content: "max-w-2xl",
+					body: "p-0 sm:p-0",
+					footer: "pt-4"
+				},
+				"onUpdate:open": o[7] ||= (e) => !e && s("cancel")
+			}, {
+				body: C(() => [j("div", W, [
+					T(l, {
+						ref_key: "searchInput",
+						ref: Ie,
+						modelValue: g(p),
+						"onUpdate:modelValue": o[0] ||= (e) => E(p) ? p.value = e : null,
+						placeholder: g(n)(`media.picker.${e.kind}.search`),
+						"aria-label": g(n)(`media.picker.${e.kind}.search`),
+						autofocus: "",
+						icon: "i-lucide-search",
+						class: "min-w-40 flex-1"
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"aria-label"
+					]),
+					T(d, {
+						modelValue: Pe.value,
+						"onUpdate:modelValue": o[1] ||= (e) => Pe.value = e,
+						items: ze.value,
+						"value-key": "value",
+						"aria-label": g(n)("media-picker.filter-by-folder"),
+						icon: "i-lucide-folder",
+						class: "w-40"
+					}, null, 8, [
+						"modelValue",
+						"items",
+						"aria-label"
+					]),
+					e.allowUpload ? (k(), h(f, {
+						key: 0,
+						color: "neutral",
+						variant: "outline",
+						icon: "i-lucide-upload",
+						label: g(n)("media-picker.upload"),
+						onClick: Ge
+					}, null, 8, ["label"])) : b("", !0)
+				]), j("div", G, [j("div", K, [g(M) ? (k(), h(_, {
+					key: 0,
+					role: "alert",
+					title: g(n)("media-picker.media-could-not-be-loaded"),
+					description: g(M),
+					icon: "i-lucide-circle-alert",
+					color: "error",
+					variant: "subtle",
+					class: "mx-5 mb-4",
+					actions: [{
+						label: g(i).actions.retry,
+						color: "error",
+						variant: "soft",
+						onClick: () => g(I)()
+					}]
+				}, null, 8, [
+					"title",
+					"description",
+					"actions"
+				])) : g(A) && !g(c).length ? (k(), x("div", q, [(k(), x(N, null, S(6, (e) => T(v, {
+					key: e,
+					class: "aspect-square rounded-lg"
+				})), 64))])) : g(c).length ? (k(), x("div", ge, [j("div", Y, [(k(!0), x(N, null, S(g(c), (t) => (k(), x("button", {
+					key: t.id,
+					type: "button",
+					class: "group min-w-0 cursor-pointer rounded-lg text-left focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-highlighted",
+					"aria-label": g(ue)(t),
+					"aria-pressed": g(u)?.id === t.id,
+					onClick: (e) => Ue(t)
+				}, [
+					j("span", { class: P(["relative block aspect-square overflow-hidden rounded-lg bg-muted ring-1 ring-inset transition-shadow duration-150 motion-reduce:transition-none", g(u)?.id === t.id ? "ring-2 ring-highlighted" : "ring-default group-hover:ring-accented"]) }, [e.kind === "image" ? (k(), x("img", {
+						key: 0,
+						src: g(te)(t.id, {
+							width: 320,
+							height: 320,
+							fit: "cover",
+							format: "webp",
+							quality: 75
+						}),
+						alt: "",
+						loading: "lazy",
+						class: "size-full object-cover"
+					}, null, 8, _e)) : (k(), x("span", ve, [T(y, {
+						name: "i-lucide-video",
+						class: "size-8"
+					})])), g(u)?.id === t.id ? (k(), x("span", ye, [T(y, {
+						name: "i-lucide-check",
+						class: "size-4"
+					})])) : b("", !0)], 2),
+					j("span", be, O(t.name), 1),
+					t.folder ? (k(), x("span", xe, O(t.folder), 1)) : b("", !0)
+				], 8, X))), 128))]), g(c).length < g(w) ? (k(), x("div", Se, [T(f, {
+					color: "neutral",
+					variant: "outline",
+					loading: g(A),
+					label: g(n)("media-picker.load-more"),
+					onClick: o[2] ||= (e) => g(I)(!1)
+				}, null, 8, ["loading", "label"])])) : b("", !0)])) : (k(), x("div", J, [j("div", pe, [
+					T(y, {
+						name: e.kind === "image" ? "i-lucide-image-off" : "i-lucide-video-off",
+						class: "size-7 text-dimmed"
+					}, null, 8, ["name"]),
+					j("p", me, O(Ve.value), 1),
+					j("p", he, O(He.value), 1),
+					!g(p) && e.allowUpload ? (k(), h(f, {
+						key: 0,
+						class: "mt-4",
+						color: "neutral",
+						variant: "outline",
+						icon: "i-lucide-upload",
+						label: g(m) === void 0 ? g(n)(`media.picker.${e.kind}.upload`) : g(n)("media-picker.upload-here"),
+						onClick: Ge
+					}, null, 8, ["label"])) : b("", !0)
+				])])), !g(M) && g(c).length ? (k(), x("p", Ce, [ne(O(g(n)(`media.picker.${e.kind}.count`, { count: g(w) })), 1), g(c).length < g(w) ? (k(), x("span", we, " · " + O(g(n)("media.showing", { count: g(c).length })), 1)) : b("", !0)])) : b("", !0)]), g(u) ? (k(), x("div", Te, [e.kind === "video" ? (k(), x("video", {
+					key: 0,
+					src: g(u).url,
+					controls: "",
+					preload: "metadata",
+					playsinline: "",
+					class: "mb-3 max-h-40 w-full rounded-lg"
+				}, null, 8, Ee)) : b("", !0), j("div", De, [j("div", Oe, [j("p", ke, O(g(u).name), 1), j("span", Ae, O(g(de)(g(u).byteSize, g(r), g(n))), 1)]), e.kind === "image" && !e.assetOnly ? (k(), x("div", je, [j("div", Me, [T(F, {
+					label: g(n)("media-picker.image-description"),
+					error: Be.value ? void 0 : g(n)("media-picker.add-a-description-or-mark-as-decorative")
+				}, {
+					default: C(() => [T(D, {
+						modelValue: Z.value,
+						"onUpdate:modelValue": o[3] ||= (e) => Z.value = e,
+						disabled: Q.value,
+						placeholder: g(n)("media-picker.what-does-this-image-show"),
+						rows: 2,
+						autoresize: "",
+						class: "w-full"
+					}, null, 8, [
+						"modelValue",
+						"disabled",
+						"placeholder"
+					])]),
+					_: 1
+				}, 8, ["label", "error"]), T(L, {
+					modelValue: Q.value,
+					"onUpdate:modelValue": o[4] ||= (e) => Q.value = e,
+					label: g(n)("media-picker.decorative-image"),
+					size: "sm"
+				}, null, 8, ["modelValue", "label"])]), T(F, { label: g(n)("media-picker.layout") }, {
+					default: C(() => [T(d, {
+						modelValue: $.value,
+						"onUpdate:modelValue": o[5] ||= (e) => $.value = e,
+						items: Le.value,
+						"value-key": "value",
+						class: "w-full"
+					}, null, 8, ["modelValue", "items"])]),
+					_: 1
+				}, 8, ["label"])])) : b("", !0)])])) : b("", !0)])]),
+				footer: C(() => [T(f, {
+					color: "neutral",
+					variant: "outline",
+					label: g(i).actions.cancel,
+					onClick: o[6] ||= (e) => s("cancel")
+				}, null, 8, ["label"]), T(f, {
+					color: "neutral",
+					disabled: !Be.value,
+					label: Re.value,
+					onClick: We
+				}, null, 8, ["disabled", "label"])]),
+				_: 1
+			}, 8, [
+				"open",
+				"title",
+				"description"
+			]), T(se, {
+				ref_key: "uploader",
+				ref: Fe,
+				kind: e.kind,
+				onUploaded: Ke
+			}, null, 8, ["kind"])], 64);
+		};
+	}
+});
+//#endregion
+export { U as n, Ne as t };