@templatical/editor 0.0.3 → 0.0.5

package/dist/cdn/chunks/src-3i8rPuqd.js

@@ -0,0 +1,494 @@
+import { $ as e, F as t, H as n, N as r, P as i, S as a, _ as o, at as s, b as c, ct as l, d as u, g as d, h as f, j as ee, lt as p, m, n as h, p as g, r as _, st as te, u as v, w as y, y as b } from "./draggable-BQNU47zu.js";
+import { O as x, Tt as ne, w as S, yt as re } from "./features-Ds0XUfte.js";
+import { L as ie, U as ae, k as oe, y as se, z as ce } from "./icons-fWsuSvgd.js";
+import { t as C } from "./_rolldown_dynamic_import_helper-DMEI4TQ3.js";
+import { a as le, c as w, d as T, f as E, h as D, i as O, l as k, n as A, o as j, p as M, r as N, s as P, t as F, u as I } from "./media-library-BGQm_OyC.js";
+//#region ../media-library/src/standalone/MediaLibrary.vue?vue&type=script&setup=true&lang.ts
+var L = {
+	class: "tpl tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]",
+	style: {
+		width: "100%",
+		height: "100%",
+		"background-color": "var(--tpl-bg-elevated)",
+		border: "1px solid var(--tpl-border)"
+	}
+}, R = {
+	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-3.5",
+	style: { "border-color": "var(--tpl-border)" }
+}, z = {
+	class: "tpl:text-sm tpl:font-semibold",
+	style: { color: "var(--tpl-text)" }
+}, B = { class: "tpl:flex tpl:items-center tpl:gap-3" }, V = { class: "tpl:relative" }, H = ["value", "placeholder"], U = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, W = {
+	key: 0,
+	class: "tpl:flex tpl:w-48 tpl:shrink-0 tpl:flex-col tpl:border-r",
+	style: {
+		"border-color": "var(--tpl-border)",
+		"background-color": "var(--tpl-bg)"
+	}
+}, ue = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, de = {
+	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-4 tpl:py-2.5",
+	style: { "border-color": "var(--tpl-border)" }
+}, fe = { class: "tpl:flex tpl:items-center tpl:gap-2" }, pe = ["title"], me = {
+	key: 1,
+	class: "tpl:text-xs tpl:font-medium",
+	style: { color: "var(--tpl-text)" }
+}, he = {
+	class: "tpl:flex tpl:rounded-md tpl:p-0.5",
+	style: {
+		border: "1px solid var(--tpl-border)",
+		"background-color": "var(--tpl-bg)"
+	}
+}, ge = ["title"], _e = ["title"], ve = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ye = ["value"], be = { value: "" }, xe = ["value"], Se = ["value"], Ce = { value: "newest" }, we = { value: "oldest" }, Te = { value: "name_asc" }, Ee = { value: "name_desc" }, De = { value: "size_asc" }, Oe = { value: "size_desc" }, ke = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, Ae = {
+	key: 0,
+	class: "tpl:px-4 tpl:pt-3"
+}, je = {
+	class: "tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
+	style: {
+		"background-color": "var(--tpl-bg-elevated)",
+		"box-shadow": "var(--tpl-shadow-xl)"
+	}
+}, Me = {
+	class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
+	style: { color: "var(--tpl-text)" }
+}, Ne = {
+	key: 0,
+	class: "tpl:mb-4 tpl:text-xs",
+	style: { color: "var(--tpl-text-muted)" }
+}, Pe = {
+	key: 1,
+	class: "tpl:mb-4 tpl:max-h-32 tpl:overflow-y-auto tpl:rounded tpl:border tpl:p-2",
+	style: { "border-color": "var(--tpl-border)" }
+}, Fe = { class: "tpl:font-medium" }, Ie = { style: { color: "var(--tpl-text-muted)" } }, Le = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Re = {
+	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3",
+	style: { "border-color": "var(--tpl-border)" }
+}, ze = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Be = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Ve = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:gap-2"
+}, He = {
+	key: 1,
+	class: "tpl:relative"
+}, G = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Ue = ["disabled"], K = /* @__PURE__ */ a({
+	__name: "MediaLibrary",
+	props: {
+		authManager: {},
+		projectId: {},
+		planConfig: {},
+		translations: {},
+		onSelect: { type: Function },
+		onError: { type: Function }
+	},
+	emits: ["ready"],
+	setup(a, { emit: _ }) {
+		let y = a, x = _, S = g(() => y.translations);
+		i("translations", y.translations), i("authManager", y.authManager), i("projectId", g(() => y.projectId)), i("planConfig", {
+			config: e(y.planConfig),
+			isLoading: e(!1),
+			hasFeature: (e) => y.planConfig.features[e] ?? !1,
+			features: g(() => y.planConfig.features),
+			fetchConfig: async () => {}
+		});
+		let C = g(() => y.planConfig.features.media_folders ?? !1), F = g(() => y.planConfig.features.import_from_url ?? !1), K = g(() => y.planConfig.storage.used_bytes ?? 0), q = g(() => y.planConfig.storage.limit_bytes ?? 0), { availableCategories: J } = E(), Y = D({
+			projectId: y.projectId,
+			authManager: y.authManager,
+			onError: y.onError
+		}), X = A({
+			library: Y,
+			canUseMediaFolders: C,
+			translations: S
+		});
+		function Z() {
+			if (!Y.previewItem.value) return;
+			let e = Y.previewItem.value;
+			y.onSelect?.({
+				...e,
+				url: X.selectedUrl.value || e.url
+			});
+		}
+		return ee(() => {
+			Y.loadItems(), Y.loadFrequentlyUsed(), x("ready");
+		}), (e, i) => (r(), o("div", L, [
+			m("div", R, [m("h2", z, p(S.value.mediaLibrary.title), 1), m("div", B, [c(N, {
+				"used-bytes": K.value,
+				"limit-bytes": q.value,
+				size: 22
+			}, null, 8, ["used-bytes", "limit-bytes"]), m("div", V, [m("input", {
+				value: s(X).searchInput.value,
+				type: "text",
+				class: "tpl:w-52 tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-xs tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:outline-none tpl:focus:shadow-[var(--tpl-ring)]",
+				style: {
+					"border-color": "var(--tpl-border)",
+					"background-color": "var(--tpl-bg)",
+					color: "var(--tpl-text)"
+				},
+				placeholder: S.value.mediaLibrary.searchPlaceholder,
+				onInput: i[0] ||= (e) => s(X).handleSearchInput(e.target.value)
+			}, null, 40, H), c(s(se), {
+				class: "tpl:absolute tpl:top-1/2 tpl:left-2.5 tpl:-translate-y-1/2",
+				size: 13,
+				"stroke-width": 2,
+				style: { color: "var(--tpl-text-dim)" }
+			})])])]),
+			m("div", U, [c(h, {
+				"enter-active-class": "tpl:transition-all tpl:duration-200 tpl:ease-out",
+				"enter-from-class": "tpl:-ml-48 tpl:opacity-0",
+				"enter-to-class": "tpl:ml-0 tpl:opacity-100",
+				"leave-active-class": "tpl:transition-all tpl:duration-150 tpl:ease-in",
+				"leave-from-class": "tpl:ml-0 tpl:opacity-100",
+				"leave-to-class": "tpl:-ml-48 tpl:opacity-0"
+			}, {
+				default: n(() => [C.value && s(X).showSidebar.value ? (r(), o("div", W, [c(I, {
+					folders: s(Y).folders.value,
+					"current-folder-id": s(Y).currentFolderId.value,
+					"view-mode": s(Y).viewMode.value,
+					"has-frequently-used": s(X).hasFrequentlyUsed.value,
+					onNavigate: s(Y).navigateToFolder,
+					onCreateFolder: s(X).handleCreateFolder,
+					onRenameFolder: s(X).handleRenameFolder,
+					onDeleteFolder: s(X).handleDeleteFolder,
+					onShowFrequentlyUsed: s(Y).showFrequentlyUsed
+				}, null, 8, [
+					"folders",
+					"current-folder-id",
+					"view-mode",
+					"has-frequently-used",
+					"onNavigate",
+					"onCreateFolder",
+					"onRenameFolder",
+					"onDeleteFolder",
+					"onShowFrequentlyUsed"
+				])])) : d("", !0)]),
+				_: 1
+			}), m("div", ue, [m("div", de, [m("div", fe, [
+				C.value ? (r(), o("button", {
+					key: 0,
+					class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:transition-all tpl:duration-150",
+					style: l({
+						color: s(X).showSidebar.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: s(X).showSidebar.value ? "var(--tpl-bg)" : "transparent",
+						border: s(X).showSidebar.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
+					}),
+					title: s(X).showSidebar.value ? S.value.mediaLibrary.hideFolders : S.value.mediaLibrary.showFolders,
+					onClick: i[1] ||= (e) => s(X).showSidebar.value = !s(X).showSidebar.value
+				}, [c(s(oe), {
+					size: 16,
+					"stroke-width": 2
+				})], 12, pe)) : d("", !0),
+				s(Y).viewMode.value === "frequently-used" ? (r(), o("span", me, p(S.value.mediaLibrary.frequentlyUsed), 1)) : (r(), f(M, {
+					key: 2,
+					folders: s(Y).folders.value,
+					"current-folder-id": s(Y).currentFolderId.value,
+					onNavigate: s(Y).navigateToFolder
+				}, null, 8, [
+					"folders",
+					"current-folder-id",
+					"onNavigate"
+				])),
+				m("div", he, [m("button", {
+					class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150",
+					style: l({
+						color: s(X).layoutMode.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: s(X).layoutMode.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
+					}),
+					title: S.value.mediaLibrary.viewGrid,
+					onClick: i[2] ||= (e) => s(X).layoutMode.value = "grid"
+				}, [c(s(ae), {
+					size: 14,
+					"stroke-width": 2
+				})], 12, ge), m("button", {
+					class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150",
+					style: l({
+						color: s(X).layoutMode.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: s(X).layoutMode.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
+					}),
+					title: S.value.mediaLibrary.viewList,
+					onClick: i[3] ||= (e) => s(X).layoutMode.value = "list"
+				}, [c(s(ie), {
+					size: 14,
+					"stroke-width": 2
+				})], 12, _e)])
+			]), m("div", ve, [s(J).length > 1 ? (r(), o("select", {
+				key: 0,
+				class: "tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none",
+				style: {
+					"border-color": "var(--tpl-border)",
+					"background-color": "var(--tpl-bg)",
+					color: "var(--tpl-text)"
+				},
+				value: s(Y).categoryFilter.value ?? "",
+				onChange: i[4] ||= (e) => s(Y).filterByCategory(e.target.value || null)
+			}, [m("option", be, p(S.value.mediaLibrary.filterAll), 1), (r(!0), o(u, null, t(s(J), (e) => (r(), o("option", {
+				key: e,
+				value: e
+			}, p(s(X).getCategoryLabel(e)), 9, xe))), 128))], 40, ye)) : d("", !0), m("select", {
+				class: "tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none",
+				style: {
+					"border-color": "var(--tpl-border)",
+					"background-color": "var(--tpl-bg)",
+					color: "var(--tpl-text)"
+				},
+				value: s(Y).sortOption.value,
+				onChange: i[5] ||= (e) => s(Y).sortBy(e.target.value)
+			}, [
+				m("option", Ce, p(S.value.mediaLibrary.sortNewest), 1),
+				m("option", we, p(S.value.mediaLibrary.sortOldest), 1),
+				m("option", Te, p(S.value.mediaLibrary.sortNameAsc), 1),
+				m("option", Ee, p(S.value.mediaLibrary.sortNameDesc), 1),
+				m("option", De, p(S.value.mediaLibrary.sortSizeAsc), 1),
+				m("option", Oe, p(S.value.mediaLibrary.sortSizeDesc), 1)
+			], 40, Se)])]), m("div", ke, [s(Y).viewMode.value === "files" ? (r(), o("div", Ae, [c(O, {
+				"is-uploading": s(Y).isUploading.value,
+				"upload-progress": s(Y).uploadProgress.value,
+				onUpload: s(X).handleUpload
+			}, null, 8, [
+				"is-uploading",
+				"upload-progress",
+				"onUpload"
+			]), F.value ? (r(), o("button", {
+				key: 0,
+				class: "tpl:mt-2 tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+				style: {
+					"border-color": "var(--tpl-border)",
+					color: "var(--tpl-text-muted)",
+					"background-color": "var(--tpl-bg)"
+				},
+				onClick: i[6] ||= (e) => s(X).showImportUrlModal.value = !0
+			}, [c(s(ce), {
+				size: 14,
+				"stroke-width": 2
+			}), b(" " + p(S.value.mediaLibrary.importFromUrl), 1)])) : d("", !0)])) : d("", !0), c(k, {
+				items: s(X).displayItems.value,
+				"selected-ids": s(Y).selectedItems.value,
+				"is-loading": s(Y).isLoading.value,
+				"has-more": s(Y).viewMode.value === "files" && s(Y).hasMore.value,
+				layout: s(X).layoutMode.value,
+				onSelect: s(X).handleSelect,
+				onToggle: s(Y).toggleSelection,
+				onLoadMore: s(Y).loadMore,
+				onEdit: s(X).handleEditItem,
+				onReplace: s(X).handleReplaceItem
+			}, null, 8, [
+				"items",
+				"selected-ids",
+				"is-loading",
+				"has-more",
+				"layout",
+				"onSelect",
+				"onToggle",
+				"onLoadMore",
+				"onEdit",
+				"onReplace"
+			])])])]),
+			c(w, {
+				visible: s(X).showImportUrlModal.value,
+				"is-importing": s(Y).isImportingFromUrl.value,
+				error: s(Y).importFromUrlError.value,
+				onImport: s(X).handleImportFromUrl,
+				onClose: i[7] ||= (e) => s(X).showImportUrlModal.value = !1
+			}, null, 8, [
+				"visible",
+				"is-importing",
+				"error",
+				"onImport"
+			]),
+			c(T, {
+				visible: !!s(X).editingItem.value,
+				item: s(X).editingItem.value,
+				onSave: s(X).handleEditSave,
+				onClose: i[8] ||= (e) => s(X).editingItem.value = null
+			}, null, 8, [
+				"visible",
+				"item",
+				"onSave"
+			]),
+			c(le, {
+				visible: s(Y).showReplaceWarning.value,
+				item: s(Y).pendingReplaceItem.value,
+				"usage-info": s(Y).replaceUsageInfo.value,
+				"is-replacing": s(Y).isReplacing.value,
+				error: s(Y).replaceError.value,
+				onReplace: s(X).handleReplaceFile,
+				onClose: s(Y).cancelReplace
+			}, null, 8, [
+				"visible",
+				"item",
+				"usage-info",
+				"is-replacing",
+				"error",
+				"onReplace",
+				"onClose"
+			]),
+			c(h, {
+				"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
+				"enter-from-class": "tpl:opacity-0",
+				"enter-to-class": "tpl:opacity-100",
+				"leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+				"leave-from-class": "tpl:opacity-100",
+				"leave-to-class": "tpl:opacity-0"
+			}, {
+				default: n(() => [s(Y).showDeleteWarning.value ? (r(), o("div", {
+					key: 0,
+					class: "tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-lg)]",
+					style: {
+						"background-color": "rgba(0, 0, 0, 0.5)",
+						"backdrop-filter": "blur(8px)",
+						"-webkit-backdrop-filter": "blur(8px)"
+					},
+					onClick: i[11] ||= v((...e) => s(Y).cancelDelete && s(Y).cancelDelete(...e), ["self"])
+				}, [m("div", je, [
+					m("h3", Me, p(S.value.mediaLibrary.deleteWarningTitle), 1),
+					m("p", {
+						class: te(["tpl:text-xs", s(X).hasUsedFiles.value ? "tpl:mb-2" : "tpl:mb-4"]),
+						style: { color: "var(--tpl-text-muted)" }
+					}, p(S.value.mediaLibrary.deleteWarningMessage), 3),
+					s(X).hasUsedFiles.value ? (r(), o("p", Ne, p(S.value.mediaLibrary.deleteWarningUsageNote), 1)) : d("", !0),
+					s(X).hasUsedFiles.value ? (r(), o("div", Pe, [(r(!0), o(u, null, t(s(Y).deleteUsageInfo.value, (e, t) => (r(), o("div", {
+						key: t,
+						class: "tpl:text-xs",
+						style: { color: "var(--tpl-text)" }
+					}, [e.template_count > 0 ? (r(), o(u, { key: 0 }, [m("span", Fe, p(s(X).displayItems.value.find((e) => e.id === t)?.filename || t), 1), m("span", Ie, " - " + p(S.value.mediaLibrary.usedInTemplates.replace("{count}", e.template_count.toString())), 1)], 64)) : d("", !0)]))), 128))])) : d("", !0),
+					m("div", Le, [m("button", {
+						class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+						style: {
+							"border-color": "var(--tpl-border)",
+							color: "var(--tpl-text)",
+							"background-color": "var(--tpl-bg)"
+						},
+						onClick: i[9] ||= (...e) => s(Y).cancelDelete && s(Y).cancelDelete(...e)
+					}, p(S.value.mediaLibrary.cancel), 1), m("button", {
+						class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+						style: {
+							"border-color": "var(--tpl-danger)",
+							color: "var(--tpl-danger)",
+							"background-color": "var(--tpl-danger-light)"
+						},
+						onClick: i[10] ||= (...e) => s(Y).confirmDelete && s(Y).confirmDelete(...e)
+					}, p(s(X).hasUsedFiles.value ? S.value.mediaLibrary.deleteAnyway : S.value.mediaLibrary.confirmDelete), 1)])
+				])])) : d("", !0)]),
+				_: 1
+			}),
+			m("div", Re, [m("div", ze, [s(Y).previewItem.value ? (r(), f(j, {
+				key: 0,
+				"selected-conversion": s(X).selectedConversion.value,
+				"onUpdate:selectedConversion": i[12] ||= (e) => s(X).selectedConversion.value = e,
+				item: s(Y).previewItem.value,
+				folders: s(Y).folders.value
+			}, null, 8, [
+				"selected-conversion",
+				"item",
+				"folders"
+			])) : d("", !0)]), m("div", Be, [s(Y).selectedItems.value.size > 0 ? (r(), o("div", Ve, [s(Y).previewItem.value ? (r(), o("button", {
+				key: 0,
+				class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+				style: l({
+					borderColor: s(X).copied.value ? "var(--tpl-success)" : "var(--tpl-border)",
+					color: s(X).copied.value ? "var(--tpl-success)" : "var(--tpl-text)",
+					backgroundColor: "var(--tpl-bg)"
+				}),
+				onClick: i[13] ||= (e) => s(X).copy(s(X).selectedUrl.value)
+			}, [s(X).copied.value ? (r(), f(s(ne), {
+				key: 1,
+				size: 12,
+				"stroke-width": 2
+			})) : (r(), f(s(re), {
+				key: 0,
+				size: 12,
+				"stroke-width": 2
+			})), b(" " + p(s(X).copied.value ? S.value.mediaLibrary.copied : S.value.mediaLibrary.copyUrl), 1)], 4)) : d("", !0), C.value ? (r(), o("div", He, [m("button", {
+				class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+				style: {
+					"border-color": "var(--tpl-border)",
+					color: "var(--tpl-text)",
+					"background-color": "var(--tpl-bg)"
+				},
+				onClick: i[14] ||= (e) => s(X).showMovePicker.value = !s(X).showMovePicker.value
+			}, p(S.value.mediaLibrary.moveSelected), 1), s(X).showMovePicker.value ? (r(), f(P, {
+				key: 0,
+				folders: s(Y).folders.value,
+				"current-folder-id": s(Y).currentFolderId.value,
+				onSelect: s(X).handleMoveToFolder,
+				onClose: i[15] ||= (e) => s(X).showMovePicker.value = !1
+			}, null, 8, [
+				"folders",
+				"current-folder-id",
+				"onSelect"
+			])) : d("", !0)])) : d("", !0)])) : d("", !0), m("div", G, [s(Y).selectedItems.value.size > 0 ? (r(), o("button", {
+				key: 0,
+				class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+				style: {
+					"border-color": "var(--tpl-danger)",
+					color: "var(--tpl-danger)",
+					"background-color": "var(--tpl-danger-light)"
+				},
+				onClick: i[16] ||= (...e) => s(X).handleDeleteClick && s(X).handleDeleteClick(...e)
+			}, p(S.value.mediaLibrary.deleteSelected), 1)) : d("", !0), a.onSelect ? (r(), o("button", {
+				key: 1,
+				class: "tpl:cursor-pointer tpl:rounded-md tpl:px-4 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
+				style: {
+					"background-color": "var(--tpl-primary)",
+					color: "var(--tpl-bg)"
+				},
+				disabled: !s(Y).previewItem.value,
+				onClick: Z
+			}, p(S.value.mediaLibrary.selectFile), 9, Ue)) : d("", !0)])])])
+		]));
+	}
+}), q = ["en", "de"];
+function J(e) {
+	return e.split("-")[0].toLowerCase();
+}
+async function Y(e) {
+	let t = J(e), n = q.includes(t) ? t : "en";
+	return (await C(/* @__PURE__ */ Object.assign({
+		"./locales/de.ts": () => import("./de-BvYD17KT.js"),
+		"./locales/en.ts": () => import("./en-CpotcOPr.js")
+	}), `./locales/${n}.ts`, 3)).default;
+}
+//#endregion
+//#region ../media-library/src/standalone/visual.ts
+var X = null, Z = e(null);
+async function We(e) {
+	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
+	if (!t) throw Error(`Container element not found: ${e.container}`);
+	X && Q();
+	let n = x(e.auth, e.onError);
+	await n.initialize();
+	let r = await new S(n).fetchConfig(), i = await Y(e.locale ?? "en");
+	return $(t, e.theme), new Promise((a, o) => {
+		try {
+			X = _({ setup() {
+				let o = () => {
+					a({
+						setTheme: (e) => $(t, e),
+						unmount: Q
+					});
+				};
+				return () => y(K, {
+					authManager: n,
+					projectId: n.projectId,
+					planConfig: r,
+					translations: i,
+					onSelect: e.onSelect,
+					onError: e.onError,
+					ref: Z,
+					onReady: o
+				});
+			} }), X.mount(t);
+		} catch (e) {
+			o(e);
+		}
+	});
+}
+function Q() {
+	X && (X.unmount(), X = null, Z.value = null);
+}
+function $(e, t) {
+	t && (t.primaryColor && e.style.setProperty("--tpl-primary", t.primaryColor), t.borderRadius !== void 0 && (e.style.setProperty("--tpl-radius", `${t.borderRadius}px`), e.style.setProperty("--tpl-radius-sm", `${Math.max(0, t.borderRadius - 3)}px`), e.style.setProperty("--tpl-radius-lg", `${t.borderRadius + 4}px`)));
+}
+typeof window < "u" && (window.TemplaticalMedia = {
+	init: We,
+	unmount: Q
+});
+//#endregion
+export { F as MediaLibraryModal };
+
+//# sourceMappingURL=src-3i8rPuqd.js.map

package/dist/cdn/chunks/src-3i8rPuqd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src-3i8rPuqd.js","names":[],"sources":["../../../../media-library/src/standalone/MediaLibrary.vue","../../../../media-library/src/standalone/MediaLibrary.vue","../../../../media-library/src/i18n/index.ts","../../../../media-library/src/standalone/visual.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport MediaBreadcrumb from \"../components/media/MediaBreadcrumb.vue\";\nimport MediaEditModal from \"../components/media/MediaEditModal.vue\";\nimport MediaFolderTree from \"../components/media/MediaFolderTree.vue\";\nimport MediaGrid from \"../components/media/MediaGrid.vue\";\nimport MediaImportUrlModal from \"../components/media/MediaImportUrlModal.vue\";\nimport MediaMovePicker from \"../components/media/MediaMovePicker.vue\";\nimport MediaPreviewPanel from \"../components/media/MediaPreviewPanel.vue\";\nimport MediaReplaceModal from \"../components/media/MediaReplaceModal.vue\";\nimport MediaUploadZone from \"../components/media/MediaUploadZone.vue\";\nimport StorageProgressRing from \"../components/media/StorageProgressRing.vue\";\nimport { useMediaLibrary } from \"../composable\";\nimport { useMediaCategories } from \"../composables/useMediaCategories\";\nimport { useMediaLibraryUI } from \"../composables/useMediaLibraryUI\";\nimport type { PlanConfig, PlanFeatures } from \"@templatical/types\";\nimport type { MediaItem } from \"../types\";\nimport type { AuthManager } from \"@templatical/core/cloud\";\nimport type { MediaTranslations } from \"../i18n\";\nimport {\n  Check,\n  Copy,\n  Grid2x2,\n  Link,\n  List,\n  PanelLeft,\n  Search,\n} from \"@lucide/vue\";\nimport { computed, onMounted, provide, ref } from \"vue\";\n\nconst props = defineProps<{\n  authManager: AuthManager;\n  projectId: string;\n  planConfig: PlanConfig;\n  translations: MediaTranslations;\n  onSelect?: (item: MediaItem) => void;\n  onError?: (error: Error) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\"): void;\n}>();\n\nconst t = computed(() => props.translations);\n\n// Provide translations for sub-components that use inject('translations')\nprovide(\"translations\", props.translations);\nprovide(\"authManager\", props.authManager);\nprovide(\n  \"projectId\",\n  computed(() => props.projectId),\n);\n\n// Provide planConfig in the format that sub-components expect\nconst planConfigRef = ref<PlanConfig | null>(props.planConfig);\nprovide(\"planConfig\", {\n  config: planConfigRef,\n  isLoading: ref(false),\n  hasFeature: (feature: keyof PlanFeatures) =>\n    props.planConfig.features[feature] ?? false,\n  features: computed(() => props.planConfig.features),\n  fetchConfig: async () => {},\n});\n\n// Feature flags\nconst canUseMediaFolders = computed(\n  () => props.planConfig.features.media_folders ?? false,\n);\nconst canImportFromUrl = computed(\n  () => props.planConfig.features.import_from_url ?? false,\n);\n\n// Storage info\nconst storageUsedBytes = computed(\n  () => props.planConfig.storage.used_bytes ?? 0,\n);\nconst storageLimitBytes = computed(\n  () => props.planConfig.storage.limit_bytes ?? 0,\n);\n\nconst { availableCategories } = useMediaCategories();\n\nconst library = useMediaLibrary({\n  projectId: props.projectId,\n  authManager: props.authManager,\n  onError: props.onError,\n});\n\nconst ui = useMediaLibraryUI({\n  library,\n  canUseMediaFolders,\n  translations: t,\n});\n\n// Standalone-specific: confirm selection via callback\nfunction confirmSelection(): void {\n  if (!library.previewItem.value) {\n    return;\n  }\n\n  const item = library.previewItem.value;\n  const itemWithSelectedUrl: MediaItem = {\n    ...item,\n    url: ui.selectedUrl.value || item.url,\n  };\n  props.onSelect?.(itemWithSelectedUrl);\n}\n\nonMounted(() => {\n  library.loadItems();\n  library.loadFrequentlyUsed();\n  emit(\"ready\");\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]\"\n    style=\"\n      width: 100%;\n      height: 100%;\n      background-color: var(--tpl-bg-elevated);\n      border: 1px solid var(--tpl-border);\n    \"\n  >\n    <!-- Header -->\n    <div\n      class=\"tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-3.5\"\n      style=\"border-color: var(--tpl-border)\"\n    >\n      <h2 class=\"tpl:text-sm tpl:font-semibold\" style=\"color: var(--tpl-text)\">\n        {{ t.mediaLibrary.title }}\n      </h2>\n      <div class=\"tpl:flex tpl:items-center tpl:gap-3\">\n        <StorageProgressRing\n          :used-bytes=\"storageUsedBytes\"\n          :limit-bytes=\"storageLimitBytes\"\n          :size=\"22\"\n        />\n        <div class=\"tpl:relative\">\n          <input\n            :value=\"ui.searchInput.value\"\n            type=\"text\"\n            class=\"tpl:w-52 tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-xs tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:outline-none tpl:focus:shadow-[var(--tpl-ring)]\"\n            style=\"\n              border-color: var(--tpl-border);\n              background-color: var(--tpl-bg);\n              color: var(--tpl-text);\n            \"\n            :placeholder=\"t.mediaLibrary.searchPlaceholder\"\n            @input=\"\n              ui.handleSearchInput(($event.target as HTMLInputElement).value)\n            \"\n          />\n          <Search\n            class=\"tpl:absolute tpl:top-1/2 tpl:left-2.5 tpl:-translate-y-1/2\"\n            :size=\"13\"\n            :stroke-width=\"2\"\n            style=\"color: var(--tpl-text-dim)\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Sidebar (only when media folders feature is enabled and toggled on) -->\n      <Transition\n        enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n        enter-from-class=\"tpl:-ml-48 tpl:opacity-0\"\n        enter-to-class=\"tpl:ml-0 tpl:opacity-100\"\n        leave-active-class=\"tpl:transition-all tpl:duration-150 tpl:ease-in\"\n        leave-from-class=\"tpl:ml-0 tpl:opacity-100\"\n        leave-to-class=\"tpl:-ml-48 tpl:opacity-0\"\n      >\n        <div\n          v-if=\"canUseMediaFolders && ui.showSidebar.value\"\n          class=\"tpl:flex tpl:w-48 tpl:shrink-0 tpl:flex-col tpl:border-r\"\n          style=\"\n            border-color: var(--tpl-border);\n            background-color: var(--tpl-bg);\n          \"\n        >\n          <MediaFolderTree\n            :folders=\"library.folders.value\"\n            :current-folder-id=\"library.currentFolderId.value\"\n            :view-mode=\"library.viewMode.value\"\n            :has-frequently-used=\"ui.hasFrequentlyUsed.value\"\n            @navigate=\"library.navigateToFolder\"\n            @create-folder=\"ui.handleCreateFolder\"\n            @rename-folder=\"ui.handleRenameFolder\"\n            @delete-folder=\"ui.handleDeleteFolder\"\n            @show-frequently-used=\"library.showFrequentlyUsed\"\n          />\n        </div>\n      </Transition>\n\n      <!-- Content area -->\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Breadcrumb + Upload -->\n        <div\n          class=\"tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-4 tpl:py-2.5\"\n          style=\"border-color: var(--tpl-border)\"\n        >\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <!-- Sidebar toggle (only when media folders feature is enabled) -->\n            <button\n              v-if=\"canUseMediaFolders\"\n              class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:transition-all tpl:duration-150\"\n              :style=\"{\n                color: ui.showSidebar.value\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-text-muted)',\n                backgroundColor: ui.showSidebar.value\n                  ? 'var(--tpl-bg)'\n                  : 'transparent',\n                border: ui.showSidebar.value\n                  ? '1px solid var(--tpl-border)'\n                  : '1px solid transparent',\n              }\"\n              :title=\"\n                ui.showSidebar.value\n                  ? t.mediaLibrary.hideFolders\n                  : t.mediaLibrary.showFolders\n              \"\n              @click=\"ui.showSidebar.value = !ui.showSidebar.value\"\n            >\n              <PanelLeft :size=\"16\" :stroke-width=\"2\" />\n            </button>\n\n            <template v-if=\"library.viewMode.value === 'frequently-used'\">\n              <span\n                class=\"tpl:text-xs tpl:font-medium\"\n                style=\"color: var(--tpl-text)\"\n              >\n                {{ t.mediaLibrary.frequentlyUsed }}\n              </span>\n            </template>\n            <template v-else>\n              <MediaBreadcrumb\n                :folders=\"library.folders.value\"\n                :current-folder-id=\"library.currentFolderId.value\"\n                @navigate=\"library.navigateToFolder\"\n              />\n            </template>\n\n            <!-- Layout toggle -->\n            <div\n              class=\"tpl:flex tpl:rounded-md tpl:p-0.5\"\n              style=\"\n                border: 1px solid var(--tpl-border);\n                background-color: var(--tpl-bg);\n              \"\n            >\n              <button\n                class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150\"\n                :style=\"{\n                  color:\n                    ui.layoutMode.value === 'grid'\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-text-muted)',\n                  backgroundColor:\n                    ui.layoutMode.value === 'grid'\n                      ? 'var(--tpl-bg-elevated)'\n                      : 'transparent',\n                }\"\n                :title=\"t.mediaLibrary.viewGrid\"\n                @click=\"ui.layoutMode.value = 'grid'\"\n              >\n                <Grid2x2 :size=\"14\" :stroke-width=\"2\" />\n              </button>\n              <button\n                class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150\"\n                :style=\"{\n                  color:\n                    ui.layoutMode.value === 'list'\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-text-muted)',\n                  backgroundColor:\n                    ui.layoutMode.value === 'list'\n                      ? 'var(--tpl-bg-elevated)'\n                      : 'transparent',\n                }\"\n                :title=\"t.mediaLibrary.viewList\"\n                @click=\"ui.layoutMode.value = 'list'\"\n              >\n                <List :size=\"14\" :stroke-width=\"2\" />\n              </button>\n            </div>\n          </div>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <select\n              v-if=\"availableCategories.length > 1\"\n              class=\"tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none\"\n              style=\"\n                border-color: var(--tpl-border);\n                background-color: var(--tpl-bg);\n                color: var(--tpl-text);\n              \"\n              :value=\"library.categoryFilter.value ?? ''\"\n              @change=\"\n                library.filterByCategory(\n                  ($event.target as HTMLSelectElement).value || null,\n                )\n              \"\n            >\n              <option value=\"\">\n                {{ t.mediaLibrary.filterAll }}\n              </option>\n              <option\n                v-for=\"category in availableCategories\"\n                :key=\"category\"\n                :value=\"category\"\n              >\n                {{ ui.getCategoryLabel(category) }}\n              </option>\n            </select>\n            <select\n              class=\"tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none\"\n              style=\"\n                border-color: var(--tpl-border);\n                background-color: var(--tpl-bg);\n                color: var(--tpl-text);\n              \"\n              :value=\"library.sortOption.value\"\n              @change=\"\n                library.sortBy(($event.target as HTMLSelectElement).value)\n              \"\n            >\n              <option value=\"newest\">\n                {{ t.mediaLibrary.sortNewest }}\n              </option>\n              <option value=\"oldest\">\n                {{ t.mediaLibrary.sortOldest }}\n              </option>\n              <option value=\"name_asc\">\n                {{ t.mediaLibrary.sortNameAsc }}\n              </option>\n              <option value=\"name_desc\">\n                {{ t.mediaLibrary.sortNameDesc }}\n              </option>\n              <option value=\"size_asc\">\n                {{ t.mediaLibrary.sortSizeAsc }}\n              </option>\n              <option value=\"size_desc\">\n                {{ t.mediaLibrary.sortSizeDesc }}\n              </option>\n            </select>\n          </div>\n        </div>\n\n        <!-- Scrollable content area -->\n        <div class=\"tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto\">\n          <!-- Upload zone (only in files mode) -->\n          <div\n            v-if=\"library.viewMode.value === 'files'\"\n            class=\"tpl:px-4 tpl:pt-3\"\n          >\n            <MediaUploadZone\n              :is-uploading=\"library.isUploading.value\"\n              :upload-progress=\"library.uploadProgress.value\"\n              @upload=\"ui.handleUpload\"\n            />\n            <button\n              v-if=\"canImportFromUrl\"\n              class=\"tpl:mt-2 tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-text-muted);\n                background-color: var(--tpl-bg);\n              \"\n              @click=\"ui.showImportUrlModal.value = true\"\n            >\n              <Link :size=\"14\" :stroke-width=\"2\" />\n              {{ t.mediaLibrary.importFromUrl }}\n            </button>\n          </div>\n\n          <!-- Image grid -->\n          <MediaGrid\n            :items=\"ui.displayItems.value\"\n            :selected-ids=\"library.selectedItems.value\"\n            :is-loading=\"library.isLoading.value\"\n            :has-more=\"\n              library.viewMode.value === 'files' && library.hasMore.value\n            \"\n            :layout=\"ui.layoutMode.value\"\n            @select=\"ui.handleSelect\"\n            @toggle=\"library.toggleSelection\"\n            @load-more=\"library.loadMore\"\n            @edit=\"ui.handleEditItem\"\n            @replace=\"ui.handleReplaceItem\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Import from URL Modal -->\n    <MediaImportUrlModal\n      :visible=\"ui.showImportUrlModal.value\"\n      :is-importing=\"library.isImportingFromUrl.value\"\n      :error=\"library.importFromUrlError.value\"\n      @import=\"ui.handleImportFromUrl\"\n      @close=\"ui.showImportUrlModal.value = false\"\n    />\n\n    <!-- Edit Modal -->\n    <MediaEditModal\n      :visible=\"!!ui.editingItem.value\"\n      :item=\"ui.editingItem.value\"\n      @save=\"ui.handleEditSave\"\n      @close=\"ui.editingItem.value = null\"\n    />\n\n    <!-- Replace Modal -->\n    <MediaReplaceModal\n      :visible=\"library.showReplaceWarning.value\"\n      :item=\"library.pendingReplaceItem.value\"\n      :usage-info=\"library.replaceUsageInfo.value\"\n      :is-replacing=\"library.isReplacing.value\"\n      :error=\"library.replaceError.value\"\n      @replace=\"ui.handleReplaceFile\"\n      @close=\"library.cancelReplace\"\n    />\n\n    <!-- Delete Warning Dialog -->\n    <Transition\n      enter-active-class=\"tpl:transition tpl:ease-out tpl:duration-150\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition tpl:ease-in tpl:duration-100\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <div\n        v-if=\"library.showDeleteWarning.value\"\n        class=\"tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-lg)]\"\n        style=\"\n          background-color: rgba(0, 0, 0, 0.5);\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n        @click.self=\"library.cancelDelete\"\n      >\n        <div\n          class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n          style=\"\n            background-color: var(--tpl-bg-elevated);\n            box-shadow: var(--tpl-shadow-xl);\n          \"\n        >\n          <h3\n            class=\"tpl:mb-2 tpl:text-sm tpl:font-semibold\"\n            style=\"color: var(--tpl-text)\"\n          >\n            {{ t.mediaLibrary.deleteWarningTitle }}\n          </h3>\n          <p\n            class=\"tpl:text-xs\"\n            :class=\"ui.hasUsedFiles.value ? 'tpl:mb-2' : 'tpl:mb-4'\"\n            style=\"color: var(--tpl-text-muted)\"\n          >\n            {{ t.mediaLibrary.deleteWarningMessage }}\n          </p>\n          <p\n            v-if=\"ui.hasUsedFiles.value\"\n            class=\"tpl:mb-4 tpl:text-xs\"\n            style=\"color: var(--tpl-text-muted)\"\n          >\n            {{ t.mediaLibrary.deleteWarningUsageNote }}\n          </p>\n\n          <div\n            v-if=\"ui.hasUsedFiles.value\"\n            class=\"tpl:mb-4 tpl:max-h-32 tpl:overflow-y-auto tpl:rounded tpl:border tpl:p-2\"\n            style=\"border-color: var(--tpl-border)\"\n          >\n            <div\n              v-for=\"(info, mediaId) in library.deleteUsageInfo.value\"\n              :key=\"mediaId\"\n              class=\"tpl:text-xs\"\n              style=\"color: var(--tpl-text)\"\n            >\n              <template v-if=\"info.template_count > 0\">\n                <span class=\"tpl:font-medium\">\n                  {{\n                    ui.displayItems.value.find((i) => i.id === mediaId)\n                      ?.filename || mediaId\n                  }}\n                </span>\n                <span style=\"color: var(--tpl-text-muted)\">\n                  -\n                  {{\n                    t.mediaLibrary.usedInTemplates.replace(\n                      \"{count}\",\n                      info.template_count.toString(),\n                    )\n                  }}\n                </span>\n              </template>\n            </div>\n          </div>\n\n          <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n            <button\n              class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-text);\n                background-color: var(--tpl-bg);\n              \"\n              @click=\"library.cancelDelete\"\n            >\n              {{ t.mediaLibrary.cancel }}\n            </button>\n            <button\n              class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-danger);\n                color: var(--tpl-danger);\n                background-color: var(--tpl-danger-light);\n              \"\n              @click=\"library.confirmDelete\"\n            >\n              {{\n                ui.hasUsedFiles.value\n                  ? t.mediaLibrary.deleteAnyway\n                  : t.mediaLibrary.confirmDelete\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Footer -->\n    <div\n      class=\"tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3\"\n      style=\"border-color: var(--tpl-border)\"\n    >\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3\">\n        <MediaPreviewPanel\n          v-if=\"library.previewItem.value\"\n          v-model:selected-conversion=\"ui.selectedConversion.value\"\n          :item=\"library.previewItem.value\"\n          :folders=\"library.folders.value\"\n        />\n      </div>\n      <div class=\"tpl:flex tpl:items-center tpl:gap-5\">\n        <!-- Copy URL + Move group -->\n        <div\n          v-if=\"library.selectedItems.value.size > 0\"\n          class=\"tpl:flex tpl:items-center tpl:gap-2\"\n        >\n          <button\n            v-if=\"library.previewItem.value\"\n            class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n            :style=\"{\n              borderColor: ui.copied.value\n                ? 'var(--tpl-success)'\n                : 'var(--tpl-border)',\n              color: ui.copied.value ? 'var(--tpl-success)' : 'var(--tpl-text)',\n              backgroundColor: 'var(--tpl-bg)',\n            }\"\n            @click=\"ui.copy(ui.selectedUrl.value!)\"\n          >\n            <Copy v-if=\"!ui.copied.value\" :size=\"12\" :stroke-width=\"2\" />\n            <Check v-else :size=\"12\" :stroke-width=\"2\" />\n            {{\n              ui.copied.value ? t.mediaLibrary.copied : t.mediaLibrary.copyUrl\n            }}\n          </button>\n          <div v-if=\"canUseMediaFolders\" class=\"tpl:relative\">\n            <button\n              class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-text);\n                background-color: var(--tpl-bg);\n              \"\n              @click=\"ui.showMovePicker.value = !ui.showMovePicker.value\"\n            >\n              {{ t.mediaLibrary.moveSelected }}\n            </button>\n            <MediaMovePicker\n              v-if=\"ui.showMovePicker.value\"\n              :folders=\"library.folders.value\"\n              :current-folder-id=\"library.currentFolderId.value\"\n              @select=\"ui.handleMoveToFolder\"\n              @close=\"ui.showMovePicker.value = false\"\n            />\n          </div>\n        </div>\n        <!-- Delete + Select group -->\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <button\n            v-if=\"library.selectedItems.value.size > 0\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n            style=\"\n              border-color: var(--tpl-danger);\n              color: var(--tpl-danger);\n              background-color: var(--tpl-danger-light);\n            \"\n            @click=\"ui.handleDeleteClick\"\n          >\n            {{ t.mediaLibrary.deleteSelected }}\n          </button>\n          <button\n            v-if=\"onSelect\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-4 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50\"\n            style=\"background-color: var(--tpl-primary); color: var(--tpl-bg)\"\n            :disabled=\"!library.previewItem.value\"\n            @click=\"confirmSelection\"\n          >\n            {{ t.mediaLibrary.selectFile }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport MediaBreadcrumb from \"../components/media/MediaBreadcrumb.vue\";\nimport MediaEditModal from \"../components/media/MediaEditModal.vue\";\nimport MediaFolderTree from \"../components/media/MediaFolderTree.vue\";\nimport MediaGrid from \"../components/media/MediaGrid.vue\";\nimport MediaImportUrlModal from \"../components/media/MediaImportUrlModal.vue\";\nimport MediaMovePicker from \"../components/media/MediaMovePicker.vue\";\nimport MediaPreviewPanel from \"../components/media/MediaPreviewPanel.vue\";\nimport MediaReplaceModal from \"../components/media/MediaReplaceModal.vue\";\nimport MediaUploadZone from \"../components/media/MediaUploadZone.vue\";\nimport StorageProgressRing from \"../components/media/StorageProgressRing.vue\";\nimport { useMediaLibrary } from \"../composable\";\nimport { useMediaCategories } from \"../composables/useMediaCategories\";\nimport { useMediaLibraryUI } from \"../composables/useMediaLibraryUI\";\nimport type { PlanConfig, PlanFeatures } from \"@templatical/types\";\nimport type { MediaItem } from \"../types\";\nimport type { AuthManager } from \"@templatical/core/cloud\";\nimport type { MediaTranslations } from \"../i18n\";\nimport {\n  Check,\n  Copy,\n  Grid2x2,\n  Link,\n  List,\n  PanelLeft,\n  Search,\n} from \"@lucide/vue\";\nimport { computed, onMounted, provide, ref } from \"vue\";\n\nconst props = defineProps<{\n  authManager: AuthManager;\n  projectId: string;\n  planConfig: PlanConfig;\n  translations: MediaTranslations;\n  onSelect?: (item: MediaItem) => void;\n  onError?: (error: Error) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"ready\"): void;\n}>();\n\nconst t = computed(() => props.translations);\n\n// Provide translations for sub-components that use inject('translations')\nprovide(\"translations\", props.translations);\nprovide(\"authManager\", props.authManager);\nprovide(\n  \"projectId\",\n  computed(() => props.projectId),\n);\n\n// Provide planConfig in the format that sub-components expect\nconst planConfigRef = ref<PlanConfig | null>(props.planConfig);\nprovide(\"planConfig\", {\n  config: planConfigRef,\n  isLoading: ref(false),\n  hasFeature: (feature: keyof PlanFeatures) =>\n    props.planConfig.features[feature] ?? false,\n  features: computed(() => props.planConfig.features),\n  fetchConfig: async () => {},\n});\n\n// Feature flags\nconst canUseMediaFolders = computed(\n  () => props.planConfig.features.media_folders ?? false,\n);\nconst canImportFromUrl = computed(\n  () => props.planConfig.features.import_from_url ?? false,\n);\n\n// Storage info\nconst storageUsedBytes = computed(\n  () => props.planConfig.storage.used_bytes ?? 0,\n);\nconst storageLimitBytes = computed(\n  () => props.planConfig.storage.limit_bytes ?? 0,\n);\n\nconst { availableCategories } = useMediaCategories();\n\nconst library = useMediaLibrary({\n  projectId: props.projectId,\n  authManager: props.authManager,\n  onError: props.onError,\n});\n\nconst ui = useMediaLibraryUI({\n  library,\n  canUseMediaFolders,\n  translations: t,\n});\n\n// Standalone-specific: confirm selection via callback\nfunction confirmSelection(): void {\n  if (!library.previewItem.value) {\n    return;\n  }\n\n  const item = library.previewItem.value;\n  const itemWithSelectedUrl: MediaItem = {\n    ...item,\n    url: ui.selectedUrl.value || item.url,\n  };\n  props.onSelect?.(itemWithSelectedUrl);\n}\n\nonMounted(() => {\n  library.loadItems();\n  library.loadFrequentlyUsed();\n  emit(\"ready\");\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]\"\n    style=\"\n      width: 100%;\n      height: 100%;\n      background-color: var(--tpl-bg-elevated);\n      border: 1px solid var(--tpl-border);\n    \"\n  >\n    <!-- Header -->\n    <div\n      class=\"tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-3.5\"\n      style=\"border-color: var(--tpl-border)\"\n    >\n      <h2 class=\"tpl:text-sm tpl:font-semibold\" style=\"color: var(--tpl-text)\">\n        {{ t.mediaLibrary.title }}\n      </h2>\n      <div class=\"tpl:flex tpl:items-center tpl:gap-3\">\n        <StorageProgressRing\n          :used-bytes=\"storageUsedBytes\"\n          :limit-bytes=\"storageLimitBytes\"\n          :size=\"22\"\n        />\n        <div class=\"tpl:relative\">\n          <input\n            :value=\"ui.searchInput.value\"\n            type=\"text\"\n            class=\"tpl:w-52 tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-xs tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:outline-none tpl:focus:shadow-[var(--tpl-ring)]\"\n            style=\"\n              border-color: var(--tpl-border);\n              background-color: var(--tpl-bg);\n              color: var(--tpl-text);\n            \"\n            :placeholder=\"t.mediaLibrary.searchPlaceholder\"\n            @input=\"\n              ui.handleSearchInput(($event.target as HTMLInputElement).value)\n            \"\n          />\n          <Search\n            class=\"tpl:absolute tpl:top-1/2 tpl:left-2.5 tpl:-translate-y-1/2\"\n            :size=\"13\"\n            :stroke-width=\"2\"\n            style=\"color: var(--tpl-text-dim)\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Sidebar (only when media folders feature is enabled and toggled on) -->\n      <Transition\n        enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n        enter-from-class=\"tpl:-ml-48 tpl:opacity-0\"\n        enter-to-class=\"tpl:ml-0 tpl:opacity-100\"\n        leave-active-class=\"tpl:transition-all tpl:duration-150 tpl:ease-in\"\n        leave-from-class=\"tpl:ml-0 tpl:opacity-100\"\n        leave-to-class=\"tpl:-ml-48 tpl:opacity-0\"\n      >\n        <div\n          v-if=\"canUseMediaFolders && ui.showSidebar.value\"\n          class=\"tpl:flex tpl:w-48 tpl:shrink-0 tpl:flex-col tpl:border-r\"\n          style=\"\n            border-color: var(--tpl-border);\n            background-color: var(--tpl-bg);\n          \"\n        >\n          <MediaFolderTree\n            :folders=\"library.folders.value\"\n            :current-folder-id=\"library.currentFolderId.value\"\n            :view-mode=\"library.viewMode.value\"\n            :has-frequently-used=\"ui.hasFrequentlyUsed.value\"\n            @navigate=\"library.navigateToFolder\"\n            @create-folder=\"ui.handleCreateFolder\"\n            @rename-folder=\"ui.handleRenameFolder\"\n            @delete-folder=\"ui.handleDeleteFolder\"\n            @show-frequently-used=\"library.showFrequentlyUsed\"\n          />\n        </div>\n      </Transition>\n\n      <!-- Content area -->\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Breadcrumb + Upload -->\n        <div\n          class=\"tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-4 tpl:py-2.5\"\n          style=\"border-color: var(--tpl-border)\"\n        >\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <!-- Sidebar toggle (only when media folders feature is enabled) -->\n            <button\n              v-if=\"canUseMediaFolders\"\n              class=\"tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:transition-all tpl:duration-150\"\n              :style=\"{\n                color: ui.showSidebar.value\n                  ? 'var(--tpl-primary)'\n                  : 'var(--tpl-text-muted)',\n                backgroundColor: ui.showSidebar.value\n                  ? 'var(--tpl-bg)'\n                  : 'transparent',\n                border: ui.showSidebar.value\n                  ? '1px solid var(--tpl-border)'\n                  : '1px solid transparent',\n              }\"\n              :title=\"\n                ui.showSidebar.value\n                  ? t.mediaLibrary.hideFolders\n                  : t.mediaLibrary.showFolders\n              \"\n              @click=\"ui.showSidebar.value = !ui.showSidebar.value\"\n            >\n              <PanelLeft :size=\"16\" :stroke-width=\"2\" />\n            </button>\n\n            <template v-if=\"library.viewMode.value === 'frequently-used'\">\n              <span\n                class=\"tpl:text-xs tpl:font-medium\"\n                style=\"color: var(--tpl-text)\"\n              >\n                {{ t.mediaLibrary.frequentlyUsed }}\n              </span>\n            </template>\n            <template v-else>\n              <MediaBreadcrumb\n                :folders=\"library.folders.value\"\n                :current-folder-id=\"library.currentFolderId.value\"\n                @navigate=\"library.navigateToFolder\"\n              />\n            </template>\n\n            <!-- Layout toggle -->\n            <div\n              class=\"tpl:flex tpl:rounded-md tpl:p-0.5\"\n              style=\"\n                border: 1px solid var(--tpl-border);\n                background-color: var(--tpl-bg);\n              \"\n            >\n              <button\n                class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150\"\n                :style=\"{\n                  color:\n                    ui.layoutMode.value === 'grid'\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-text-muted)',\n                  backgroundColor:\n                    ui.layoutMode.value === 'grid'\n                      ? 'var(--tpl-bg-elevated)'\n                      : 'transparent',\n                }\"\n                :title=\"t.mediaLibrary.viewGrid\"\n                @click=\"ui.layoutMode.value = 'grid'\"\n              >\n                <Grid2x2 :size=\"14\" :stroke-width=\"2\" />\n              </button>\n              <button\n                class=\"tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150\"\n                :style=\"{\n                  color:\n                    ui.layoutMode.value === 'list'\n                      ? 'var(--tpl-primary)'\n                      : 'var(--tpl-text-muted)',\n                  backgroundColor:\n                    ui.layoutMode.value === 'list'\n                      ? 'var(--tpl-bg-elevated)'\n                      : 'transparent',\n                }\"\n                :title=\"t.mediaLibrary.viewList\"\n                @click=\"ui.layoutMode.value = 'list'\"\n              >\n                <List :size=\"14\" :stroke-width=\"2\" />\n              </button>\n            </div>\n          </div>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <select\n              v-if=\"availableCategories.length > 1\"\n              class=\"tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none\"\n              style=\"\n                border-color: var(--tpl-border);\n                background-color: var(--tpl-bg);\n                color: var(--tpl-text);\n              \"\n              :value=\"library.categoryFilter.value ?? ''\"\n              @change=\"\n                library.filterByCategory(\n                  ($event.target as HTMLSelectElement).value || null,\n                )\n              \"\n            >\n              <option value=\"\">\n                {{ t.mediaLibrary.filterAll }}\n              </option>\n              <option\n                v-for=\"category in availableCategories\"\n                :key=\"category\"\n                :value=\"category\"\n              >\n                {{ ui.getCategoryLabel(category) }}\n              </option>\n            </select>\n            <select\n              class=\"tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none\"\n              style=\"\n                border-color: var(--tpl-border);\n                background-color: var(--tpl-bg);\n                color: var(--tpl-text);\n              \"\n              :value=\"library.sortOption.value\"\n              @change=\"\n                library.sortBy(($event.target as HTMLSelectElement).value)\n              \"\n            >\n              <option value=\"newest\">\n                {{ t.mediaLibrary.sortNewest }}\n              </option>\n              <option value=\"oldest\">\n                {{ t.mediaLibrary.sortOldest }}\n              </option>\n              <option value=\"name_asc\">\n                {{ t.mediaLibrary.sortNameAsc }}\n              </option>\n              <option value=\"name_desc\">\n                {{ t.mediaLibrary.sortNameDesc }}\n              </option>\n              <option value=\"size_asc\">\n                {{ t.mediaLibrary.sortSizeAsc }}\n              </option>\n              <option value=\"size_desc\">\n                {{ t.mediaLibrary.sortSizeDesc }}\n              </option>\n            </select>\n          </div>\n        </div>\n\n        <!-- Scrollable content area -->\n        <div class=\"tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto\">\n          <!-- Upload zone (only in files mode) -->\n          <div\n            v-if=\"library.viewMode.value === 'files'\"\n            class=\"tpl:px-4 tpl:pt-3\"\n          >\n            <MediaUploadZone\n              :is-uploading=\"library.isUploading.value\"\n              :upload-progress=\"library.uploadProgress.value\"\n              @upload=\"ui.handleUpload\"\n            />\n            <button\n              v-if=\"canImportFromUrl\"\n              class=\"tpl:mt-2 tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-text-muted);\n                background-color: var(--tpl-bg);\n              \"\n              @click=\"ui.showImportUrlModal.value = true\"\n            >\n              <Link :size=\"14\" :stroke-width=\"2\" />\n              {{ t.mediaLibrary.importFromUrl }}\n            </button>\n          </div>\n\n          <!-- Image grid -->\n          <MediaGrid\n            :items=\"ui.displayItems.value\"\n            :selected-ids=\"library.selectedItems.value\"\n            :is-loading=\"library.isLoading.value\"\n            :has-more=\"\n              library.viewMode.value === 'files' && library.hasMore.value\n            \"\n            :layout=\"ui.layoutMode.value\"\n            @select=\"ui.handleSelect\"\n            @toggle=\"library.toggleSelection\"\n            @load-more=\"library.loadMore\"\n            @edit=\"ui.handleEditItem\"\n            @replace=\"ui.handleReplaceItem\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Import from URL Modal -->\n    <MediaImportUrlModal\n      :visible=\"ui.showImportUrlModal.value\"\n      :is-importing=\"library.isImportingFromUrl.value\"\n      :error=\"library.importFromUrlError.value\"\n      @import=\"ui.handleImportFromUrl\"\n      @close=\"ui.showImportUrlModal.value = false\"\n    />\n\n    <!-- Edit Modal -->\n    <MediaEditModal\n      :visible=\"!!ui.editingItem.value\"\n      :item=\"ui.editingItem.value\"\n      @save=\"ui.handleEditSave\"\n      @close=\"ui.editingItem.value = null\"\n    />\n\n    <!-- Replace Modal -->\n    <MediaReplaceModal\n      :visible=\"library.showReplaceWarning.value\"\n      :item=\"library.pendingReplaceItem.value\"\n      :usage-info=\"library.replaceUsageInfo.value\"\n      :is-replacing=\"library.isReplacing.value\"\n      :error=\"library.replaceError.value\"\n      @replace=\"ui.handleReplaceFile\"\n      @close=\"library.cancelReplace\"\n    />\n\n    <!-- Delete Warning Dialog -->\n    <Transition\n      enter-active-class=\"tpl:transition tpl:ease-out tpl:duration-150\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition tpl:ease-in tpl:duration-100\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <div\n        v-if=\"library.showDeleteWarning.value\"\n        class=\"tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-lg)]\"\n        style=\"\n          background-color: rgba(0, 0, 0, 0.5);\n          backdrop-filter: blur(8px);\n          -webkit-backdrop-filter: blur(8px);\n        \"\n        @click.self=\"library.cancelDelete\"\n      >\n        <div\n          class=\"tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n          style=\"\n            background-color: var(--tpl-bg-elevated);\n            box-shadow: var(--tpl-shadow-xl);\n          \"\n        >\n          <h3\n            class=\"tpl:mb-2 tpl:text-sm tpl:font-semibold\"\n            style=\"color: var(--tpl-text)\"\n          >\n            {{ t.mediaLibrary.deleteWarningTitle }}\n          </h3>\n          <p\n            class=\"tpl:text-xs\"\n            :class=\"ui.hasUsedFiles.value ? 'tpl:mb-2' : 'tpl:mb-4'\"\n            style=\"color: var(--tpl-text-muted)\"\n          >\n            {{ t.mediaLibrary.deleteWarningMessage }}\n          </p>\n          <p\n            v-if=\"ui.hasUsedFiles.value\"\n            class=\"tpl:mb-4 tpl:text-xs\"\n            style=\"color: var(--tpl-text-muted)\"\n          >\n            {{ t.mediaLibrary.deleteWarningUsageNote }}\n          </p>\n\n          <div\n            v-if=\"ui.hasUsedFiles.value\"\n            class=\"tpl:mb-4 tpl:max-h-32 tpl:overflow-y-auto tpl:rounded tpl:border tpl:p-2\"\n            style=\"border-color: var(--tpl-border)\"\n          >\n            <div\n              v-for=\"(info, mediaId) in library.deleteUsageInfo.value\"\n              :key=\"mediaId\"\n              class=\"tpl:text-xs\"\n              style=\"color: var(--tpl-text)\"\n            >\n              <template v-if=\"info.template_count > 0\">\n                <span class=\"tpl:font-medium\">\n                  {{\n                    ui.displayItems.value.find((i) => i.id === mediaId)\n                      ?.filename || mediaId\n                  }}\n                </span>\n                <span style=\"color: var(--tpl-text-muted)\">\n                  -\n                  {{\n                    t.mediaLibrary.usedInTemplates.replace(\n                      \"{count}\",\n                      info.template_count.toString(),\n                    )\n                  }}\n                </span>\n              </template>\n            </div>\n          </div>\n\n          <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n            <button\n              class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-text);\n                background-color: var(--tpl-bg);\n              \"\n              @click=\"library.cancelDelete\"\n            >\n              {{ t.mediaLibrary.cancel }}\n            </button>\n            <button\n              class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-danger);\n                color: var(--tpl-danger);\n                background-color: var(--tpl-danger-light);\n              \"\n              @click=\"library.confirmDelete\"\n            >\n              {{\n                ui.hasUsedFiles.value\n                  ? t.mediaLibrary.deleteAnyway\n                  : t.mediaLibrary.confirmDelete\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Footer -->\n    <div\n      class=\"tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3\"\n      style=\"border-color: var(--tpl-border)\"\n    >\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3\">\n        <MediaPreviewPanel\n          v-if=\"library.previewItem.value\"\n          v-model:selected-conversion=\"ui.selectedConversion.value\"\n          :item=\"library.previewItem.value\"\n          :folders=\"library.folders.value\"\n        />\n      </div>\n      <div class=\"tpl:flex tpl:items-center tpl:gap-5\">\n        <!-- Copy URL + Move group -->\n        <div\n          v-if=\"library.selectedItems.value.size > 0\"\n          class=\"tpl:flex tpl:items-center tpl:gap-2\"\n        >\n          <button\n            v-if=\"library.previewItem.value\"\n            class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n            :style=\"{\n              borderColor: ui.copied.value\n                ? 'var(--tpl-success)'\n                : 'var(--tpl-border)',\n              color: ui.copied.value ? 'var(--tpl-success)' : 'var(--tpl-text)',\n              backgroundColor: 'var(--tpl-bg)',\n            }\"\n            @click=\"ui.copy(ui.selectedUrl.value!)\"\n          >\n            <Copy v-if=\"!ui.copied.value\" :size=\"12\" :stroke-width=\"2\" />\n            <Check v-else :size=\"12\" :stroke-width=\"2\" />\n            {{\n              ui.copied.value ? t.mediaLibrary.copied : t.mediaLibrary.copyUrl\n            }}\n          </button>\n          <div v-if=\"canUseMediaFolders\" class=\"tpl:relative\">\n            <button\n              class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-text);\n                background-color: var(--tpl-bg);\n              \"\n              @click=\"ui.showMovePicker.value = !ui.showMovePicker.value\"\n            >\n              {{ t.mediaLibrary.moveSelected }}\n            </button>\n            <MediaMovePicker\n              v-if=\"ui.showMovePicker.value\"\n              :folders=\"library.folders.value\"\n              :current-folder-id=\"library.currentFolderId.value\"\n              @select=\"ui.handleMoveToFolder\"\n              @close=\"ui.showMovePicker.value = false\"\n            />\n          </div>\n        </div>\n        <!-- Delete + Select group -->\n        <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <button\n            v-if=\"library.selectedItems.value.size > 0\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n            style=\"\n              border-color: var(--tpl-danger);\n              color: var(--tpl-danger);\n              background-color: var(--tpl-danger-light);\n            \"\n            @click=\"ui.handleDeleteClick\"\n          >\n            {{ t.mediaLibrary.deleteSelected }}\n          </button>\n          <button\n            v-if=\"onSelect\"\n            class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-4 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50\"\n            style=\"background-color: var(--tpl-primary); color: var(--tpl-bg)\"\n            :disabled=\"!library.previewItem.value\"\n            @click=\"confirmSelection\"\n          >\n            {{ t.mediaLibrary.selectFile }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","import type en from \"./locales/en\";\n\nexport type MediaTranslations = typeof en;\n\nconst supportedLocales = [\"en\", \"de\"];\n\nfunction getBaseLocale(locale: string): string {\n  return locale.split(\"-\")[0].toLowerCase();\n}\n\nexport async function loadMediaTranslations(\n  locale: string,\n): Promise<MediaTranslations> {\n  const baseLocale = getBaseLocale(locale);\n  const targetLocale = supportedLocales.includes(baseLocale)\n    ? baseLocale\n    : \"en\";\n\n  const module = await import(`./locales/${targetLocale}.ts`);\n  return module.default as MediaTranslations;\n}\n","import { createSdkAuthManager } from \"@templatical/core/cloud\";\nimport type { PlanConfig } from \"@templatical/types\";\nimport { ApiClient } from \"@templatical/core/cloud\";\nimport MediaLibrary from \"./MediaLibrary.vue\";\nimport { loadMediaTranslations, type MediaTranslations } from \"../i18n\";\nimport type { MediaLibraryConfig, MediaLibraryInstance } from \"./types\";\nimport { createApp, h, ref, type App, type Ref } from \"vue\";\n\n// Import SDK styles\nimport \"../styles/index.css\";\n\n// Re-export types for consumers\nexport type { MediaFolder, MediaItem } from \"../types\";\nexport type { MediaLibraryConfig, MediaLibraryInstance } from \"./types\";\n\nlet appInstance: App | null = null;\nconst mediaLibraryRef: Ref<InstanceType<typeof MediaLibrary> | null> =\n  ref(null);\n\nasync function init(config: MediaLibraryConfig): Promise<MediaLibraryInstance> {\n  const container =\n    typeof config.container === \"string\"\n      ? document.querySelector(config.container)\n      : config.container;\n\n  if (!container) {\n    throw new Error(`Container element not found: ${config.container}`);\n  }\n\n  if (appInstance) {\n    unmount();\n  }\n\n  // Initialize auth\n  const authManager = createSdkAuthManager(config.auth, config.onError);\n  await authManager.initialize();\n\n  // Fetch plan config\n  const apiClient = new ApiClient(authManager);\n  const planConfig: PlanConfig = await apiClient.fetchConfig();\n\n  // Load translations\n  const translations: MediaTranslations = await loadMediaTranslations(\n    config.locale ?? \"en\",\n  );\n\n  // Apply theme overrides to container\n  applyTheme(container as HTMLElement, config.theme);\n\n  return new Promise((resolve, reject) => {\n    try {\n      appInstance = createApp({\n        setup() {\n          const onReady = () => {\n            const instance: MediaLibraryInstance = {\n              setTheme: (theme) => applyTheme(container as HTMLElement, theme),\n              unmount,\n            };\n\n            resolve(instance);\n          };\n\n          return () =>\n            h(MediaLibrary, {\n              authManager,\n              projectId: authManager.projectId,\n              planConfig,\n              translations,\n              onSelect: config.onSelect,\n              onError: config.onError,\n              ref: mediaLibraryRef,\n              onReady,\n            });\n        },\n      });\n\n      appInstance.mount(container);\n    } catch (error) {\n      reject(error);\n    }\n  });\n}\n\nfunction unmount(): void {\n  if (appInstance) {\n    appInstance.unmount();\n    appInstance = null;\n    mediaLibraryRef.value = null;\n  }\n}\n\nfunction applyTheme(\n  container: HTMLElement,\n  theme?: { primaryColor?: string; borderRadius?: number },\n): void {\n  if (!theme) {\n    return;\n  }\n\n  if (theme.primaryColor) {\n    container.style.setProperty(\"--tpl-primary\", theme.primaryColor);\n  }\n\n  if (theme.borderRadius !== undefined) {\n    container.style.setProperty(\"--tpl-radius\", `${theme.borderRadius}px`);\n    container.style.setProperty(\n      \"--tpl-radius-sm\",\n      `${Math.max(0, theme.borderRadius - 3)}px`,\n    );\n    container.style.setProperty(\n      \"--tpl-radius-lg\",\n      `${theme.borderRadius + 4}px`,\n    );\n  }\n}\n\nconst TemplaticalMedia = {\n  init,\n  unmount,\n};\n\n// Assign to window for IIFE usage\nif (typeof window !== \"undefined\") {\n  (\n    window as unknown as Window & { TemplaticalMedia: typeof TemplaticalMedia }\n  ).TemplaticalMedia = TemplaticalMedia;\n}\n\n// Named exports for destructured imports\nexport { init, unmount };\n\n// Default export for library mode\nexport default TemplaticalMedia;\n"],"mappings":"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"}