npm - @templatical/editor - Versions diffs - 0.10.0 → 0.10.1 - Mend

@templatical/editor 0.10.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/dist/cdn/chunks/{src-CvzfrFlT.js.map → src-DfMSYqvE.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"src-CvzfrFlT.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\", \"pt-BR\"] as const;\ntype SupportedLocale = (typeof supportedLocales)[number];\n\nfunction canonicalize(locale: string): string {\n return locale.trim().replace(/_/g, \"-\").toLowerCase();\n}\n\nfunction findSupportedLocale(locale: string): SupportedLocale \| undefined {\n const canonical = canonicalize(locale);\n return supportedLocales.find((s) => canonicalize(s) === canonical);\n}\n\nfunction getBaseLocale(locale: string): string {\n return canonicalize(locale).split(\"-\")[0];\n}\n\nfunction resolveLocale(locale: string): SupportedLocale {\n return (\n findSupportedLocale(locale) ??\n findSupportedLocale(getBaseLocale(locale)) ??\n \"en\"\n );\n}\n\nexport async function loadMediaTranslations(\n locale: string,\n): Promise<MediaTranslations> {\n const target = resolveLocale(locale);\n const module = (await import(`./locales/${target}.ts`)) as {\n default: MediaTranslations;\n };\n return module.default;\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 // 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 // Unmount any prior app after awaits so concurrent init() calls don't\n // both pass an early check while appInstance is still null and orphan\n // the first-mounted app.\n if (appInstance) {\n unmount();\n }\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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"}
1	+ {"version":3,"file":"src-DfMSYqvE.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\", \"pt-BR\"] as const;\ntype SupportedLocale = (typeof supportedLocales)[number];\n\nfunction canonicalize(locale: string): string {\n return locale.trim().replace(/_/g, \"-\").toLowerCase();\n}\n\nfunction findSupportedLocale(locale: string): SupportedLocale \| undefined {\n const canonical = canonicalize(locale);\n return supportedLocales.find((s) => canonicalize(s) === canonical);\n}\n\nfunction getBaseLocale(locale: string): string {\n return canonicalize(locale).split(\"-\")[0];\n}\n\nfunction resolveLocale(locale: string): SupportedLocale {\n return (\n findSupportedLocale(locale) ??\n findSupportedLocale(getBaseLocale(locale)) ??\n \"en\"\n );\n}\n\nexport async function loadMediaTranslations(\n locale: string,\n): Promise<MediaTranslations> {\n const target = resolveLocale(locale);\n const module = (await import(`./locales/${target}.ts`)) as {\n default: MediaTranslations;\n };\n return module.default;\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 // 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 // Unmount any prior app after awaits so concurrent init() calls don't\n // both pass an early check while appInstance is still null and orphan\n // the first-mounted app.\n if (appInstance) {\n unmount();\n }\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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"}

package/dist/cdn/chunks/{styles-2P5yvfsS.js → styles-1uFWdD5T.js} RENAMED Viewed

@@ -1,11 +1,11 @@
-import { C as e, F as t, G as n, H as r, J as i, L as a, M as o, O as s, P as c, T as l, V as u, Y as d, Z as f, b as p, c as m, ct as h, f as g, g as _, h as v, it as y, l as b, m as x, n as S, o as C, ot as w, p as T, s as E, st as D, t as ee, u as O, v as k, x as A, y as j, z as M } from "./draggable-BwWMFq33.js";
-import { $ as N, Bt as P, Cn as te, Ct as F, Dn as I, Dt as L, F as R, Ft as z, G as B, Gt as ne, H as re, I as ie, J as ae, Jt as oe, K as se, Kt as ce, L as le, Lt as ue, M as de, Mt as fe, N as pe, O as V, P as me, Pt as he, Qt as ge, R as _e, St as ve, Tn as ye, Tt as be, U as xe, V as Se, Vt as Ce, W as we, Wt as Te, Xt as Ee, Yt as De, Zt as Oe, _n as ke, at as Ae, bt as je, ct as Me, dn as Ne, et as Pe, hn as Fe, in as Ie, it as Le, j as Re, kt as ze, mn as Be, mt as Ve, nn as He, q as Ue, qt as We, rn as Ge, rt as Ke, tn as qe, ut as Je, vn as Ye, wn as Xe, wt as Ze, xn as Qe, xt as $e, yn as et, yt as tt, z as nt, zt as rt } from "./features-CwZTdcbt.js";
-import { A as it, F as at, G as ot, I as st, M as ct, N as lt, O as ut, P as dt, T as H, V as ft, Y as pt, _ as mt, b as ht, c as gt, h as _t, m as vt, o as yt, s as bt, u as xt, v as St, y as Ct, z as wt } from "./icons-CbNEr1kc.js";
+import { C as e, F as t, G as n, H as r, J as i, L as a, M as o, O as s, P as c, T as l, V as u, Y as d, Z as f, b as p, c as m, ct as h, f as g, g as _, h as v, it as y, l as b, m as x, n as S, o as C, ot as w, p as T, s as E, st as D, t as ee, u as O, v as k, x as A, y as j, z as M } from "./draggable-J_1CPXYc.js";
+import { $ as N, Bt as P, Cn as te, Ct as F, Dn as I, Dt as L, F as R, Ft as z, G as B, Gt as ne, H as re, I as ie, J as ae, Jt as oe, K as se, Kt as ce, L as le, Lt as ue, M as de, Mt as fe, N as pe, O as V, P as me, Pt as he, Qt as ge, R as _e, St as ve, Tn as ye, Tt as be, U as xe, V as Se, Vt as Ce, W as we, Wt as Te, Xt as Ee, Yt as De, Zt as Oe, _n as ke, at as Ae, bt as je, ct as Me, dn as Ne, et as Pe, hn as Fe, in as Ie, it as Le, j as Re, kt as ze, mn as Be, mt as Ve, nn as He, q as Ue, qt as We, rn as Ge, rt as Ke, tn as qe, ut as Je, vn as Ye, wn as Xe, wt as Ze, xn as Qe, xt as $e, yn as et, yt as tt, z as nt, zt as rt } from "./features-_ar9QbVv.js";
+import { A as it, F as at, G as ot, I as st, M as ct, N as lt, O as ut, P as dt, T as H, V as ft, Y as pt, _ as mt, b as ht, c as gt, h as _t, m as vt, o as yt, s as bt, u as xt, v as St, y as Ct, z as wt } from "./icons-CnwCLJX-.js";
 import { t as Tt } from "./readableTextColor-f8Kykfnh.js";
-import { t as Et } from "./CountdownBlock-BKsCWboK.js";
-import { t as Dt } from "./blockTypeIcons-C2cm4RjU.js";
+import { t as Et } from "./CountdownBlock-DU9ga9Ki.js";
+import { t as Dt } from "./blockTypeIcons-D05Wqf5u.js";
 import { _ as Ot, c as kt, f as U, g as At, h as W, l as jt, m as G, p as K, t as Mt } from "./styleConstants-lGobwiLH.js";
-import { i as q, n as J, r as Y, t as Nt } from "./NumberWithSuffix-DxoUtTMr.js";
+import { i as q, n as J, r as Y, t as Nt } from "./NumberWithSuffix-DuUcF2zG.js";
 //#region src/utils/resolveLintOptions.ts
 function Pt(e) {
 	return {
@@ -1860,7 +1860,7 @@ var Mi = {
 			{
 				value: "left",
 				label: i.title.alignLeft,
-				icon: bt
+				icon: yt
 			},
 			{
 				value: "center",
@@ -1870,7 +1870,7 @@ var Mi = {
 			{
 				value: "right",
 				label: i.title.alignRight,
-				icon: yt
+				icon: bt
 			}
 		]);
 		function l(e, t) {
@@ -2184,7 +2184,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 					{
 						value: "left",
 						label: y(i).title.alignLeft,
-						icon: y(bt)
+						icon: y(yt)
 					},
 					{
 						value: "center",
@@ -2194,7 +2194,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 					{
 						value: "right",
 						label: y(i).title.alignRight,
-						icon: y(yt)
+						icon: y(bt)
 					}
 				],
 				"model-value": e.block.align,
@@ -2363,7 +2363,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 					{
 						value: "left",
 						label: y(i).title.alignLeft,
-						icon: y(bt)
+						icon: y(yt)
 					},
 					{
 						value: "center",
@@ -2373,7 +2373,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 					{
 						value: "right",
 						label: y(i).title.alignRight,
-						icon: y(yt)
+						icon: y(bt)
 					}
 				],
 				"model-value": e.block.textAlign,
@@ -2421,7 +2421,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 					{
 						value: "left",
 						label: y(r).title.alignLeft,
-						icon: y(bt)
+						icon: y(yt)
 					},
 					{
 						value: "center",
@@ -2431,7 +2431,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 					{
 						value: "right",
 						label: y(r).title.alignRight,
-						icon: y(yt)
+						icon: y(bt)
 					}
 				],
 				"model-value": e.block.textAlign,
@@ -2560,7 +2560,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 		"duplicate"
 	],
 	setup(e, { emit: t }) {
-		let n = p(() => import("./CountdownToolbar-BLtECDNb.js")), r = e, i = t, { t: s } = z(), c = Ie(De, "Toolbar"), u = l(ne, []), d = g(() => r.block.type), f = g(() => I(r.block)), m = g(() => {
+		let n = p(() => import("./CountdownToolbar-BHWsxth7.js")), r = e, i = t, { t: s } = z(), c = Ie(De, "Toolbar"), u = l(ne, []), d = g(() => r.block.type), f = g(() => I(r.block)), m = g(() => {
 			if (f.value) return u.find((e) => e.type === r.block.customType);
 		}), b = g(() => f.value ? m.value?.name ?? r.block.customType : he(d.value, s)), S = c.fonts;
 		function C(e) {
@@ -2708,7 +2708,7 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 		"update-settings"
 	],
 	setup(e, { emit: t }) {
-		let n = p(() => import("./IssuesPanel-BW2piyvs.js")), r = e, i = t, { t: a } = z(), s = f("content"), c = l(qe, null), u = g(() => c !== null), d = g(() => c?.issues.value.length ?? 0);
+		let n = p(() => import("./IssuesPanel-BkYhij39.js")), r = e, i = t, { t: a } = z(), s = f("content"), c = l(qe, null), u = g(() => c !== null), d = g(() => c?.issues.value.length ?? 0);
 		function m(e) {
 			return s.value === e ? "tpl:flex-1 tpl:text-[var(--tpl-primary)]" : "tpl:shrink-0 tpl:text-[var(--tpl-text-muted)] hover:tpl:text-[var(--tpl-text)]";
 		}
@@ -3226,4 +3226,4 @@ var Ea = { class: "tpl:mb-3.5" }, Da = ["value"], Oa = ["value"], ka = /* @__PUR
 //#endregion
 export { Fs as a, Gt as c, Ls as i, Wt as l, Hs as n, Ms as o, zs as r, en as s, oc as t, Pt as u };
-//# sourceMappingURL=styles-2P5yvfsS.js.map
+//# sourceMappingURL=styles-1uFWdD5T.js.map