katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/pages/admin/media.vue

@@ -0,0 +1,1054 @@
+<script setup>
+import { useHead } from "#imports";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { isImageMedia, RESERVED_SIZE_NAME } from "@katecms/core";
+import {
+  defaultMediaLibraryFilters,
+  localUtcOffsetMinutes,
+  mediaFiltersActive,
+  mediaLibraryQuery,
+  mediaMatchesFilters,
+  monthKey,
+  normalizeMediaLibraryFilters
+} from "../../utils/media-library-query";
+useHead({ title: "Media library" });
+const rootClass = "katecms-media";
+const POLL_MAX_ATTEMPTS = 60;
+const POLL_INTERVAL_MS = 2e3;
+const PAGE_SIZE = 40;
+const items = ref([]);
+const total = ref(0);
+const fetched = ref(0);
+const months = ref([]);
+const filters = ref(defaultMediaLibraryFilters());
+const loading = ref(false);
+const loadingMore = ref(false);
+const uploading = ref(false);
+const saving = ref(false);
+const regenerating = ref(false);
+const deleting = ref(false);
+const markedIds = ref([]);
+const error = ref(null);
+const notice = ref(null);
+const fileInput = ref(null);
+const scroller = ref(null);
+const sentinel = ref(null);
+let loadObserver = null;
+const selected = ref(null);
+const editAlt = ref("");
+const editCaption = ref("");
+const altField = { type: "text", label: "Alt text" };
+const captionField = { type: "textarea", label: "Caption", rows: 3 };
+const FORMAT_ORDER = { avif: 0, webp: 1 };
+function isProcessing(item) {
+  return item.variants_status === "pending";
+}
+function errMessage(err, fallback) {
+  const e = err;
+  return e.data?.statusMessage || e.data?.message || e.statusMessage || fallback;
+}
+function formatSize(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function formatDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
+}
+function pictureSources(item) {
+  return item.variants.filter((variant) => variant.size === RESERVED_SIZE_NAME).sort((a, b) => (FORMAT_ORDER[a.format] ?? 9) - (FORMAT_ORDER[b.format] ?? 9));
+}
+function replaceItem(next) {
+  items.value = items.value.map((item) => item.id === next.id ? next : item);
+  if (selected.value?.id === next.id) {
+    selected.value = next;
+  }
+}
+const hasMore = computed(() => fetched.value < total.value);
+const filtersActive = computed(() => mediaFiltersActive(filters.value));
+const markedCount = computed(() => markedIds.value.length);
+let requestId = 0;
+function rememberMonth(iso) {
+  const key = monthKey(iso, localUtcOffsetMinutes());
+  if (!key || months.value.includes(key)) {
+    return;
+  }
+  months.value = [...months.value, key].sort((a, b) => b.localeCompare(a));
+}
+async function fetchPage(offset) {
+  return $fetch("/api/_katecms/media", {
+    query: mediaLibraryQuery(filters.value, { limit: PAGE_SIZE, offset })
+  });
+}
+async function load(options) {
+  const id = ++requestId;
+  if (!options?.silent) {
+    loading.value = true;
+    error.value = null;
+    items.value = [];
+    fetched.value = 0;
+    markedIds.value = [];
+  }
+  try {
+    const res = await fetchPage(0);
+    if (id !== requestId) {
+      return;
+    }
+    total.value = res.total;
+    fetched.value = res.media.length;
+    months.value = res.months;
+    items.value = res.media;
+    pruneMarked();
+    if (selected.value) {
+      selected.value = items.value.find((entry) => entry.id === selected.value?.id) ?? selected.value;
+    }
+    pollVariants(res.media.filter((item) => item.variants_status === "pending").map((item) => item.id));
+  } catch (err) {
+    if (id === requestId) {
+      error.value = errMessage(err, "Could not load the media library.");
+    }
+  } finally {
+    if (id === requestId && !options?.silent) {
+      loading.value = false;
+    }
+  }
+}
+async function onLibraryFilters(next) {
+  filters.value = normalizeMediaLibraryFilters(next);
+  await load();
+}
+async function loadMore() {
+  if (loading.value || loadingMore.value || !hasMore.value) {
+    return;
+  }
+  const id = requestId;
+  loadingMore.value = true;
+  try {
+    const res = await fetchPage(fetched.value);
+    if (id !== requestId) {
+      return;
+    }
+    total.value = res.total;
+    if (!res.media.length) {
+      fetched.value = total.value;
+      return;
+    }
+    fetched.value += res.media.length;
+    const seen = new Set(items.value.map((item) => item.id));
+    const next = res.media.filter((item) => !seen.has(item.id));
+    if (!next.length && fetched.value >= total.value) {
+      return;
+    }
+    items.value = [...items.value, ...next];
+    pruneMarked();
+    pollVariants(next.filter((item) => item.variants_status === "pending").map((item) => item.id));
+  } catch (err) {
+    if (id === requestId) {
+      error.value = errMessage(err, "Could not load more files.");
+    }
+  } finally {
+    loadingMore.value = false;
+  }
+  void nextTick(() => {
+    const root = scroller.value;
+    const target = sentinel.value;
+    if (!root || !target || !hasMore.value || loadingMore.value) {
+      return;
+    }
+    const rootRect = root.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    if (targetRect.top <= rootRect.bottom + 240) {
+      void loadMore();
+    }
+  });
+}
+function stopLoadObserver() {
+  loadObserver?.disconnect();
+  loadObserver = null;
+}
+function startLoadObserver() {
+  stopLoadObserver();
+  const root = scroller.value;
+  const target = sentinel.value;
+  if (!root || !target || !hasMore.value) {
+    return;
+  }
+  loadObserver = new IntersectionObserver((entries) => {
+    if (entries.some((entry) => entry.isIntersecting)) {
+      void loadMore();
+    }
+  }, { root, rootMargin: "240px" });
+  loadObserver.observe(target);
+}
+function failedCount(ids) {
+  return ids.filter((id) => {
+    return items.value.find((entry) => entry.id === id)?.variants_status === "failed";
+  }).length;
+}
+function showRegenNotice(ids) {
+  const failed = failedCount(ids);
+  if (failed && failed === ids.length) {
+    notice.value = {
+      variant: "danger",
+      message: ids.length === 1 ? "Could not regenerate this image." : "Could not regenerate image variants."
+    };
+    return;
+  }
+  if (failed) {
+    notice.value = {
+      variant: "warning",
+      message: failed === 1 ? "Regeneration finished. 1 image failed." : `Regeneration finished. ${failed} images failed.`
+    };
+    return;
+  }
+  notice.value = {
+    variant: "success",
+    message: "Image variants regenerated."
+  };
+}
+function pollVariants(ids, options = {}) {
+  const tracked = ids.slice();
+  const maxAttempts = options.maxAttempts ?? POLL_MAX_ATTEMPTS;
+  const tick = (remaining, attempt) => {
+    if (!remaining.length) {
+      options.onComplete?.(tracked);
+      return;
+    }
+    if (maxAttempts > 0 && attempt >= maxAttempts) {
+      options.onTimeout?.();
+      return;
+    }
+    setTimeout(async () => {
+      await load({ silent: true });
+      const next = remaining.filter((id) => {
+        const item = items.value.find((entry) => entry.id === id);
+        return item?.variants_status === "pending";
+      });
+      tick(next, attempt + 1);
+    }, POLL_INTERVAL_MS);
+  };
+  tick(tracked, 0);
+}
+async function onFilesSelected(event) {
+  const input = event.target;
+  const files = Array.from(input.files ?? []);
+  if (!files.length) {
+    return;
+  }
+  uploading.value = true;
+  error.value = null;
+  const pendingIds = [];
+  let resort = false;
+  try {
+    for (const file of files) {
+      const form = new FormData();
+      form.append("file", file);
+      const res = await $fetch("/api/_katecms/media", {
+        method: "POST",
+        body: form
+      });
+      if (mediaMatchesFilters(res.media, { ...filters.value, month: "all" })) {
+        rememberMonth(res.media.created_at);
+      }
+      if (mediaMatchesFilters(res.media, filters.value)) {
+        if (filters.value.sort === "date-desc") {
+          items.value = [res.media, ...items.value.filter((entry) => entry.id !== res.media.id)];
+          total.value += 1;
+        } else {
+          resort = true;
+        }
+      }
+      if (res.media.variants_status === "pending") {
+        pendingIds.push(res.media.id);
+      }
+    }
+  } catch (err) {
+    error.value = errMessage(err, "Could not upload the file.");
+  } finally {
+    uploading.value = false;
+    input.value = "";
+  }
+  if (resort) {
+    await load({ silent: true });
+  }
+  pollVariants(pendingIds);
+}
+function openEditor(item) {
+  selected.value = item;
+  editAlt.value = item.alt ?? "";
+  editCaption.value = item.caption ?? "";
+  error.value = null;
+}
+function closeEditor() {
+  selected.value = null;
+}
+async function saveMeta() {
+  if (!selected.value) {
+    return;
+  }
+  saving.value = true;
+  error.value = null;
+  try {
+    const res = await $fetch(`/api/_katecms/media/${selected.value.id}`, {
+      method: "PATCH",
+      body: { alt: editAlt.value, caption: editCaption.value }
+    });
+    replaceItem(res.media);
+  } catch (err) {
+    error.value = errMessage(err, "Could not save changes.");
+  } finally {
+    saving.value = false;
+  }
+}
+function isMarked(id) {
+  return markedIds.value.includes(id);
+}
+function toggleMarked(id) {
+  markedIds.value = isMarked(id) ? markedIds.value.filter((entry) => entry !== id) : [...markedIds.value, id];
+}
+function pruneMarked() {
+  const visible = new Set(items.value.map((item) => item.id));
+  markedIds.value = markedIds.value.filter((id) => visible.has(id));
+}
+function dropDeleted(ids) {
+  if (!ids.length) {
+    return;
+  }
+  const removed = new Set(ids);
+  items.value = items.value.filter((entry) => !removed.has(entry.id));
+  markedIds.value = markedIds.value.filter((id) => !removed.has(id));
+  total.value = Math.max(0, total.value - ids.length);
+  fetched.value = Math.max(0, fetched.value - ids.length);
+  if (selected.value && removed.has(selected.value.id)) {
+    closeEditor();
+  }
+}
+async function remove(item) {
+  if (!confirm(`Delete \u201C${item.filename}\u201D?`)) {
+    return;
+  }
+  error.value = null;
+  try {
+    await $fetch(`/api/_katecms/media/${item.id}`, { method: "DELETE" });
+    dropDeleted([item.id]);
+  } catch (err) {
+    error.value = errMessage(err, "Could not delete the file.");
+  }
+}
+async function removeMarked() {
+  const ids = markedIds.value.slice();
+  if (!ids.length || deleting.value) {
+    return;
+  }
+  const label = ids.length === 1 ? "Delete 1 file?" : `Delete ${ids.length} files?`;
+  if (!confirm(label)) {
+    return;
+  }
+  deleting.value = true;
+  error.value = null;
+  const failed = [];
+  await Promise.all(ids.map(async (id) => {
+    try {
+      await $fetch(`/api/_katecms/media/${id}`, { method: "DELETE" });
+    } catch {
+      failed.push(id);
+    }
+  }));
+  const failedSet = new Set(failed);
+  dropDeleted(ids.filter((id) => !failedSet.has(id)));
+  if (failed.length) {
+    error.value = failed.length === 1 ? "Could not delete 1 file." : `Could not delete ${failed.length} files.`;
+  }
+  deleting.value = false;
+  if (!items.value.length && hasMore.value) {
+    await load();
+  }
+}
+async function regenerateAll() {
+  if (!confirm("Regenerate image variants for the whole library? This may take a while.")) {
+    return;
+  }
+  regenerating.value = true;
+  error.value = null;
+  notice.value = null;
+  try {
+    const res = await $fetch("/api/_katecms/media/regenerate", { method: "POST" });
+    await load({ silent: true });
+    const pendingIds = items.value.filter((item) => item.variants_status === "pending").map((item) => item.id);
+    if (!pendingIds.length) {
+      notice.value = {
+        variant: "success",
+        message: res.count ? "Image variants regenerated." : "No images to regenerate."
+      };
+      regenerating.value = false;
+      return;
+    }
+    pollVariants(pendingIds, {
+      maxAttempts: 0,
+      onComplete: (ids) => {
+        showRegenNotice(ids);
+        regenerating.value = false;
+      }
+    });
+  } catch (err) {
+    error.value = errMessage(err, "Could not start regeneration.");
+    regenerating.value = false;
+  }
+}
+async function regenerateOne(item) {
+  error.value = null;
+  notice.value = null;
+  try {
+    const res = await $fetch(`/api/_katecms/media/${item.id}/regenerate`, {
+      method: "POST"
+    });
+    replaceItem(res.media);
+    if (res.media.variants_status !== "pending") {
+      showRegenNotice([res.media.id]);
+      return;
+    }
+    pollVariants([res.media.id], {
+      maxAttempts: 0,
+      onComplete: (ids) => showRegenNotice(ids)
+    });
+  } catch (err) {
+    error.value = errMessage(err, "Could not regenerate this image.");
+  }
+}
+onMounted(async () => {
+  await load();
+});
+onBeforeUnmount(stopLoadObserver);
+watch([scroller, sentinel, hasMore], () => {
+  void nextTick(startLoadObserver);
+});
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader
+      title="Media library"
+      :count="total === 1 ? '1 item' : `${total} items`"
+    >
+      <input
+        ref="fileInput"
+        type="file"
+        :class="`${rootClass}__file`"
+        multiple
+        @change="onFilesSelected"
+      >
+      <KateCmsUiButton
+        v-if="markedCount"
+        tag="button"
+        variant="red"
+        :disabled="deleting"
+        @click="removeMarked"
+      >
+        {{ deleting ? "Deleting\u2026" : `Delete selected (${markedCount})` }}
+      </KateCmsUiButton>
+      <KateCmsUiButton
+        tag="button"
+        variant="secondary"
+        :disabled="regenerating || !items.length"
+        title="Regenerate image variants from the current media config"
+        @click="regenerateAll"
+      >
+        {{ regenerating ? "Regenerating\u2026" : "Regenerate" }}
+      </KateCmsUiButton>
+      <KateCmsUiButton
+        tag="button"
+        :disabled="uploading"
+        @click="fileInput?.click()"
+      >
+        {{ uploading ? "Uploading\u2026" : "Upload files" }}
+      </KateCmsUiButton>
+    </KateCmsAdminHeader>
+
+    <KateCmsMediaLibraryFilters
+      :filters="filters"
+      :months="months"
+      id-prefix="library"
+      :class="`${rootClass}__filters`"
+      @update:filters="onLibraryFilters"
+    />
+
+    <KateCmsUiNotice
+      v-if="notice"
+      placement="fixed"
+      :variant="notice.variant"
+      :message="notice.message"
+      @close="notice = null"
+    />
+    <KateCmsUiNotice
+      v-if="error"
+      placement="static"
+      variant="danger"
+      :message="error"
+      @close="error = null"
+    />
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="!items.length && !error"
+      placement="static"
+      variant="info"
+      :message="filtersActive ? 'No files match.' : 'No files yet. Upload the first one.'"
+      :closable="false"
+    />
+
+    <div
+      v-else-if="items.length"
+      ref="scroller"
+      :class="`${rootClass}__scroller`"
+    >
+      <div :class="`${rootClass}__grid`">
+        <div
+          v-for="item in items"
+          :key="item.id"
+          :class="[`${rootClass}__card`, { 'is-marked': isMarked(item.id) }]"
+        >
+          <label :class="`${rootClass}__check`">
+            <input
+              type="checkbox"
+              :checked="isMarked(item.id)"
+              :aria-label="`Select ${item.filename}`"
+              @change="toggleMarked(item.id)"
+            >
+          </label>
+          <button
+            type="button"
+            :class="`${rootClass}__thumb`"
+            @click="openEditor(item)"
+          >
+            <picture v-if="isImageMedia(item)">
+              <source
+                v-for="variant in pictureSources(item)"
+                :key="variant.format"
+                :srcset="variant.url"
+                :type="`image/${variant.format}`"
+              >
+              <img
+                :src="item.url"
+                :alt="item.alt || item.filename"
+                loading="lazy"
+              >
+            </picture>
+            <span
+              v-else
+              :class="`${rootClass}__ext`"
+            >{{ item.mime_type }}</span>
+            <span
+              v-if="isProcessing(item)"
+              :class="`${rootClass}__processing`"
+            >
+              <span :class="`${rootClass}__spinner`" />
+              Processing…
+            </span>
+          </button>
+          <div :class="`${rootClass}__meta`">
+            <span
+              :class="`${rootClass}__name`"
+              :title="item.filename"
+            >
+              {{ item.filename }}
+            </span>
+            <span :class="`${rootClass}__sub`">
+              {{ formatSize(item.filesize) }}
+              <template v-if="item.width && item.height">
+                · {{ item.width }}×{{ item.height }}
+              </template>
+            </span>
+          </div>
+          <KateCmsUiButton
+            tag="button"
+            :variant="['red', 'small']"
+            @click="remove(item)"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M3 6h18" />
+              <path d="M8 6V4h8v2" />
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+            </svg>
+            Delete
+          </KateCmsUiButton>
+        </div>
+      </div>
+      <div
+        v-if="hasMore"
+        ref="sentinel"
+        :class="`${rootClass}__more`"
+      >
+        {{ loadingMore ? "Loading\u2026" : "" }}
+      </div>
+    </div>
+
+    <div
+      v-if="selected"
+      :class="`${rootClass}__overlay`"
+      @click.self="closeEditor"
+    >
+      <div :class="`${rootClass}__modal`">
+        <div :class="`${rootClass}__modal-head`">
+          <div :class="`${rootClass}__modal-title`">
+            File details
+          </div>
+          <KateCmsUiButton
+            tag="button"
+            :variant="['tertiary', 'small', 'icon']"
+            aria-label="Close"
+            @click="closeEditor"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 640 640"
+              fill="currentColor"
+            >
+              <path
+                d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"
+              />
+            </svg>
+          </KateCmsUiButton>
+        </div>
+
+        <div :class="`${rootClass}__modal-body`">
+          <div :class="`${rootClass}__preview`">
+            <picture v-if="isImageMedia(selected)">
+              <source
+                v-for="variant in pictureSources(selected)"
+                :key="variant.format"
+                :srcset="variant.url"
+                :type="`image/${variant.format}`"
+              >
+              <img
+                :src="selected.url"
+                :alt="selected.alt || selected.filename"
+              >
+            </picture>
+            <span
+              v-else
+              :class="`${rootClass}__ext`"
+            >{{ selected.mime_type }}</span>
+          </div>
+
+          <div :class="`${rootClass}__side`">
+            <div :class="`${rootClass}__details`">
+              <div :class="`${rootClass}__row`">
+                <div :class="`${rootClass}__term`">
+                  Uploaded
+                </div>
+                <div :class="`${rootClass}__def`">
+                  {{ formatDate(selected.created_at) }}
+                </div>
+              </div>
+              <div :class="`${rootClass}__row`">
+                <div :class="`${rootClass}__term`">
+                  Author
+                </div>
+                <div :class="`${rootClass}__def`">
+                  {{ selected.uploaded_by_name || "\u2014" }}
+                </div>
+              </div>
+              <div :class="`${rootClass}__row`">
+                <div :class="`${rootClass}__term`">
+                  File name
+                </div>
+                <div :class="`${rootClass}__def`">
+                  {{ selected.filename }}
+                </div>
+              </div>
+              <div :class="`${rootClass}__row`">
+                <div :class="`${rootClass}__term`">
+                  Type
+                </div>
+                <div :class="`${rootClass}__def`">
+                  {{ selected.mime_type }}
+                </div>
+              </div>
+              <div :class="`${rootClass}__row`">
+                <div :class="`${rootClass}__term`">
+                  Size
+                </div>
+                <div :class="`${rootClass}__def`">
+                  {{ formatSize(selected.filesize) }}
+                </div>
+              </div>
+              <div
+                v-if="selected.width && selected.height"
+                :class="`${rootClass}__row`"
+              >
+                <div :class="`${rootClass}__term`">
+                  Dimensions
+                </div>
+                <div :class="`${rootClass}__def`">
+                  {{ selected.width }} × {{ selected.height }} px
+                </div>
+              </div>
+              <div :class="`${rootClass}__row`">
+                <div :class="`${rootClass}__term`">
+                  URL
+                </div>
+                <div :class="`${rootClass}__def`">
+                  <a
+                    :href="selected.url"
+                    target="_blank"
+                    rel="noopener"
+                  >{{ selected.url }}</a>
+                </div>
+              </div>
+              <div
+                v-if="isImageMedia(selected) && selected.variants.length"
+                :class="`${rootClass}__row`"
+              >
+                <div :class="`${rootClass}__term`">
+                  Variants
+                </div>
+                <div :class="`${rootClass}__def`">
+                  <div :class="`${rootClass}__variants`">
+                    <div
+                      v-for="variant in selected.variants"
+                      :key="variant.filename"
+                    >
+                      <a
+                        :href="variant.url"
+                        target="_blank"
+                        rel="noopener"
+                      >
+                        {{ variant.format.toUpperCase() }}
+                        · {{ variant.size }}
+                        · {{ variant.width }}×{{ variant.height }}
+                        · {{ formatSize(variant.filesize) }}
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <form
+              :class="`${rootClass}__form`"
+              @submit.prevent="saveMeta"
+            >
+              <KateCmsFieldWrapper
+                field-key="katecms-media-alt"
+                :field="altField"
+              >
+                <KateCmsInputControl
+                  v-model="editAlt"
+                  field-key="katecms-media-alt"
+                />
+              </KateCmsFieldWrapper>
+
+              <KateCmsTextareaField
+                v-model="editCaption"
+                field-key="katecms-media-caption"
+                :field="captionField"
+              />
+
+              <KateCmsUiButton
+                tag="button"
+                type="submit"
+                :disabled="saving"
+              >
+                {{ saving ? "Saving\u2026" : "Save" }}
+              </KateCmsUiButton>
+            </form>
+
+            <KateCmsUiButton
+              v-if="isImageMedia(selected)"
+              tag="button"
+              variant="secondary"
+              :disabled="selected.variants_status === 'pending'"
+              @click="regenerateOne(selected)"
+            >
+              {{ selected.variants_status === "pending" ? "Processing\u2026" : "Regenerate variants" }}
+            </KateCmsUiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-media {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0 0.5rem;
+}
+body#katecms-body .katecms-media__file {
+  display: none;
+}
+body#katecms-body .katecms-media__filters {
+  position: relative;
+  z-index: 2;
+  margin-bottom: 0.5rem;
+}
+body#katecms-body .katecms-media__scroller {
+  flex: 1;
+  min-height: 0;
+  padding: 0 0 0.5rem;
+  overflow: auto;
+}
+body#katecms-body .katecms-media__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: 1rem;
+  align-content: start;
+}
+body#katecms-body .katecms-media__more {
+  min-height: 2rem;
+  padding: 0.5rem 0;
+  color: var(--katecms-color-muted);
+  font-size: 0.8125rem;
+  text-align: center;
+}
+body#katecms-body .katecms-media__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+  box-shadow: var(--katecms-shadow-sm);
+}
+body#katecms-body .katecms-media__card.is-marked {
+  border-color: var(--katecms-color-accent);
+  box-shadow: 0 0 0 1px var(--katecms-color-accent);
+}
+body#katecms-body .katecms-media__card :deep(.katecms-btn) {
+  width: calc(100% - 1rem);
+  margin: 0 0.5rem 0.5rem;
+}
+body#katecms-body .katecms-media__check {
+  position: absolute;
+  z-index: 1;
+  top: 0.5rem;
+  left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: 0;
+  border-radius: var(--katecms-border-radius);
+  background: rgb(from var(--katecms-color-surface) r g b / 0.92);
+  box-shadow: var(--katecms-shadow-sm);
+  cursor: pointer;
+}
+body#katecms-body .katecms-media__check input {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--katecms-color-accent);
+  cursor: pointer;
+}
+body#katecms-body .katecms-media__thumb {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 4/3;
+  padding: 0;
+  overflow: hidden;
+  border: none;
+  background: var(--katecms-color-bg);
+  cursor: pointer;
+}
+body#katecms-body .katecms-media__thumb picture {
+  width: 100%;
+  height: 100%;
+}
+body#katecms-body .katecms-media__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+body#katecms-body .katecms-media__processing {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  background: var(--katecms-color-overlay);
+  color: var(--katecms-color-on-accent);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+body#katecms-body .katecms-media__spinner {
+  width: 0.875rem;
+  height: 0.875rem;
+  border: 2px solid rgb(from var(--katecms-color-on-accent) r g b / 0.4);
+  border-top-color: var(--katecms-color-on-accent);
+  border-radius: 50%;
+  animation: katecms-media-spin 0.7s linear infinite;
+}
+@keyframes katecms-media-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+body#katecms-body .katecms-media__ext {
+  padding: 0 0.5rem;
+  color: var(--katecms-color-muted);
+  font-size: 0.75rem;
+  text-align: center;
+  word-break: break-all;
+}
+body#katecms-body .katecms-media__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  padding: 0.5rem 0.625rem;
+}
+body#katecms-body .katecms-media__name {
+  overflow: hidden;
+  color: var(--katecms-color-ink);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+body#katecms-body .katecms-media__sub {
+  color: var(--katecms-color-muted);
+  font-size: 0.75rem;
+}
+body#katecms-body .katecms-media__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--katecms-color-overlay);
+}
+body#katecms-body .katecms-media__modal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 87.5rem;
+  max-height: 90vh;
+  overflow: hidden;
+  background: var(--katecms-color-surface);
+  border-radius: var(--katecms-border-radius);
+  box-shadow: var(--katecms-shadow-md);
+}
+body#katecms-body .katecms-media__modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-media__modal-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--katecms-color-ink);
+}
+body#katecms-body .katecms-media__modal-body {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  gap: 1.25rem;
+  padding: 1rem;
+  overflow: auto;
+}
+@media (max-width: 800px) {
+  body#katecms-body .katecms-media__modal-body {
+    grid-template-columns: 1fr;
+  }
+}
+body#katecms-body .katecms-media__preview {
+  min-height: 14rem;
+  overflow: hidden;
+  background: var(--katecms-color-bg);
+  border-radius: var(--katecms-border-radius);
+}
+body#katecms-body .katecms-media__preview picture {
+  width: 100%;
+  height: 100%;
+}
+body#katecms-body .katecms-media__preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+body#katecms-body .katecms-media__side {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+body#katecms-body .katecms-media__details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin: 0;
+  font-size: 0.8125rem;
+}
+body#katecms-body .katecms-media__variants {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.75rem;
+}
+body#katecms-body .katecms-media__term {
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-media__def {
+  margin: 0;
+  color: var(--katecms-color-ink);
+  word-break: break-word;
+}
+body#katecms-body .katecms-media__row {
+  display: grid;
+  grid-template-columns: 7rem minmax(0, 1fr);
+  gap: 0.5rem;
+}
+body#katecms-body .katecms-media__row a {
+  color: var(--katecms-color-accent);
+  text-decoration: none;
+}
+body#katecms-body .katecms-media__row a:hover {
+  text-decoration: underline;
+}
+body#katecms-body .katecms-media__form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--katecms-color-border);
+}
+</style>