@brftech/filex-core 0.43.0 → 0.44.0

package/src/viewers/ArchiveViewer.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 /**
- * ArchiveViewer — minimal zip / archive contents preview.
+ * ArchiveViewer — read-only preview of an archive's contents, browsed like a
+ * folder (a breadcrumb, folders first), for every format the server reads.
  *
  * Hits the configured archive-list endpoint (`archiveListUrl`, default
- * `POST /api/files/archive/list`) with the adapter-qualified path
- * and renders the member list as a flat table (name, size, mtime).
- * Read-only — extraction is exposed elsewhere (context menu / actions
- * panel). The viewer's job is just "what's inside?" so the user can
- * decide whether to extract or download.
+ * `POST /api/files/archive/list`) with the adapter-qualified path. An
+ * encrypted archive answers PASSWORD_REQUIRED / BAD_PASSWORD and the shared
+ * password dialog asks; the listing it unlocks is remembered for the session
+ * (`archivePreviewCache`). Extraction is exposed elsewhere (context menu /
+ * actions panel): the viewer's job is just "what's inside?".
  */
 import { computed, onMounted, ref, watch } from 'vue';
 import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
 import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import DataTable, { type DataColumn } from '../components/DataTable.vue';
 import { useLocale } from '../composables/useLocale';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import type { ArchivePreviewCache } from '../lib/archivePreviewCache';
+import ArchivePasswordModal from '../modals/ArchivePasswordModal.vue';
 
 interface ArchiveEntry {
   name: string;
@@ -22,14 +26,19 @@ interface ArchiveEntry {
   is_dir?: boolean;
 }
 
-const props = defineProps<{
+interface ArchiveRow extends ArchiveEntry {
+  displayName: string;
+  fullPath: string;
+}
+
+const props = withDefaults(defineProps<{
   url: string;
   filePath?: string;
   ext: string;
-  t?: (key: string, vars?: Record<string, string | number>) => string;
   /** The interface language — the size column is written the way it writes
    *  numbers ("1,96 KB"), like every other size in the product. */
-  locale?: string;
+  locale?: LocaleCode;
+  t?: (key: string, vars?: Record<string, string | number>) => string;
   authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   authCredentials?: RequestCredentials;
   /** ⚠ Where to ask. This used to be the literal '/api/files/archive/list',
@@ -38,11 +47,19 @@ const props = defineProps<{
    *  every other call in the package honoured the configured base. The default
    *  keeps a same-origin install working unchanged. */
   archiveListUrl?: string;
-}>();
+  archivePreviewCache?: ArchivePreviewCache;
+}>(), {
+  locale: 'en',
+});
 
+const emit = defineEmits<{ (e: 'close'): void }>();
 const entries = ref<ArchiveEntry[]>([]);
+const currentDir = ref('');
 const loading = ref(true);
 const error = ref<string | null>(null);
+const password = ref('');
+const passwordNeeded = ref(false);
+const passwordError = ref('');
 
 /** ⚠ `vars` go THROUGH `t()`, not into a `.replace()` afterwards: `t()` is what
  *  picks the singular (`viewer.archive.entries_one`) from the count, and it can
@@ -63,15 +80,22 @@ function fmtSize(n: number): string {
 async function load(): Promise<void> {
   loading.value = true;
   error.value = null;
+  passwordError.value = '';
   entries.value = [];
-  // The viewer is mounted with the resolved file path. Hit the API
-  // endpoint with the same adapter-qualified path the preview URL
-  // points at — the backend resolves storage + relative path itself.
   if (!props.filePath) {
     error.value = tt('viewer.archive.error', 'Could not read archive contents.');
     loading.value = false;
     return;
   }
+  if (!password.value) {
+    const cached = props.archivePreviewCache?.recall(props.filePath);
+    if (cached) {
+      entries.value = cached;
+      passwordNeeded.value = false;
+      loading.value = false;
+      return;
+    }
+  }
   try {
     const res = await fetch(props.archiveListUrl || '/api/files/archive/list', {
       method: 'POST',
@@ -80,7 +104,7 @@ async function load(): Promise<void> {
         'Content-Type': 'application/json',
         ...(props.authHeaders ? await props.authHeaders() : {}),
       },
-      body: JSON.stringify({ path: props.filePath }),
+      body: JSON.stringify({ path: props.filePath, password: password.value || undefined }),
     });
     if (!res.ok) {
       /* ⚠ Never the raw status. This printed "503 Service Unavailable" (or a
@@ -89,10 +113,21 @@ async function load(): Promise<void> {
        * the HTTP layer instead of what happened. The server's reason, when it
        * sent one we know, becomes a sentence; anything else is the generic
        * "could not read the archive". */
-      throw new ArchiveError(await archiveErrorText(res));
+      const body = await res.json().catch(() => ({})) as { code?: string; error?: string };
+      if (body.code === 'PASSWORD_REQUIRED' || body.code === 'BAD_PASSWORD') {
+        props.archivePreviewCache?.forget(props.filePath);
+        passwordNeeded.value = true;
+        passwordError.value = body.code === 'BAD_PASSWORD'
+          ? tt('archive.bad_password', 'The archive password is incorrect.')
+          : '';
+        return;
+      }
+      throw new ArchiveError(archiveErrorText(res.status, body.code ?? body.error ?? ''));
     }
     const body = (await res.json()) as { entries?: ArchiveEntry[] };
     entries.value = body.entries ?? [];
+    if (password.value) props.archivePreviewCache?.remember(props.filePath, entries.value);
+    passwordNeeded.value = false;
   } catch (err) {
     error.value =
       err instanceof ArchiveError ? err.message : tt('viewer.archive.error', 'Could not read archive contents.');
@@ -105,25 +140,16 @@ async function load(): Promise<void> {
  *  network, a JSON parse) reads as the generic sentence. */
 class ArchiveError extends Error {}
 
-async function archiveErrorText(res: Response): Promise<string> {
-  let code = '';
-  try {
-    const body = (await res.json()) as { error?: unknown; code?: unknown };
-    code = String(body?.code ?? body?.error ?? '');
-  } catch {
-    /* not JSON — the generic sentence below */
-  }
+function archiveErrorText(status: number, code: string): string {
   if (/not a zip|unsupported|not supported|format/i.test(code)) {
     return tt('viewer.archive.unsupported', 'This kind of archive cannot be listed here. Download it to see what is inside.');
   }
-  if (res.status === 413 || /too large|too big/i.test(code)) {
+  if (status === 413 || /too large|too big/i.test(code)) {
     return tt('viewer.archive.too_large', 'This archive is too large to list here. Download it to see what is inside.');
   }
   return tt('viewer.archive.error', 'Could not read archive contents.');
 }
 
-onMounted(load);
-watch(() => props.filePath, load);
 
 /**
  * The entries, in THE table (DataTable — the explorer's own). ⚠ It used to be
@@ -134,7 +160,7 @@ watch(() => props.filePath, load);
  * to be sorted by size and have its Name column widened exactly the way the
  * folder it came from does.
  */
-const columns = computed<DataColumn<ArchiveEntry>[]>(() => [
+const columns = computed<DataColumn<ArchiveRow>[]>(() => [
   {
     id: 'name',
     label: tt('viewer.name', 'Name'),
@@ -155,8 +181,6 @@ const columns = computed<DataColumn<ArchiveEntry>[]>(() => [
   },
 ]);
 
-const totalSize = computed(() => entries.value.reduce((sum, e) => sum + (e.size || 0), 0));
-const fileCount = computed(() => entries.value.filter((e) => !e.is_dir).length);
 
 /* === ikon:emoji — the fallback screen's mark ==========================
  * Every viewer opened its "cannot show this" / "still loading" screen with a
@@ -165,14 +189,66 @@ const fileCount = computed(() => entries.value.filter((e) => !e.is_dir).length);
  * the person just clicked is wearing, so the fallback is recognisably about
  * that file — and "loading" is the stroked ring, spun by CSS, because no
  * still picture can say "still going". */
+function submitPassword(value: string) {
+  password.value = value;
+  void load();
+}
+
+onMounted(load);
+watch(() => props.filePath, () => {
+  currentDir.value = '';
+  password.value = '';
+  passwordNeeded.value = false;
+  void load();
+});
+
+const totalSize = computed(() => entries.value.reduce((sum, entry) => sum + (entry.size || 0), 0));
+const fileCount = computed(() => entries.value.filter((entry) => !entry.is_dir).length);
+
+function cleanPath(value: string): string {
+  return value.replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');
+}
+
+const visibleEntries = computed<ArchiveRow[]>(() => {
+  const rows = new Map<string, ArchiveRow>();
+  for (const entry of entries.value) {
+    const fullPath = cleanPath(entry.name);
+    if (!fullPath || (currentDir.value && !fullPath.startsWith(currentDir.value))) continue;
+    const rest = currentDir.value ? fullPath.slice(currentDir.value.length) : fullPath;
+    if (!rest) continue;
+    const slash = rest.indexOf('/');
+    if (slash >= 0) {
+      const displayName = rest.slice(0, slash);
+      const dirPath = `${currentDir.value}${displayName}`;
+      if (!rows.has(dirPath)) {
+        rows.set(dirPath, { name: dirPath, fullPath: dirPath, displayName, size: 0, is_dir: true });
+      }
+      continue;
+    }
+    rows.set(fullPath, { ...entry, name: fullPath, fullPath, displayName: rest });
+  }
+  return [...rows.values()].sort((a, b) => {
+    if (!!a.is_dir !== !!b.is_dir) return a.is_dir ? -1 : 1;
+    return a.displayName.localeCompare(b.displayName, undefined, { numeric: true, sensitivity: 'base' });
+  });
+});
+
+const breadcrumbs = computed(() => {
+  const parts = cleanPath(currentDir.value).split('/').filter(Boolean);
+  return parts.map((name, index) => ({ name, path: `${parts.slice(0, index + 1).join('/')}/` }));
+});
+
+function openRow(row: ArchiveRow) {
+  if (row.is_dir) currentDir.value = `${cleanPath(row.fullPath)}/`;
+
+}
 const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 
-/** A row inside the archive, drawn the way the listing draws the same kind. */
-function entryTile(e: ArchiveEntry): string {
-  const name = e.name || '';
+function entryTile(entry: ArchiveEntry): string {
+  const name = entry.name || '';
   const dot = name.lastIndexOf('.');
   return fileIconTile({
-    type: e.is_dir ? 'dir' : 'file',
+    type: entry.is_dir ? 'dir' : 'file',
     extension: dot > 0 ? name.slice(dot + 1) : '',
     basename: name,
   });
@@ -181,7 +257,12 @@ function entryTile(e: ArchiveEntry): string {
 
 <template>
   <div class="filex-viewer-archive">
-    <div v-if="error" class="filex-viewer-fallback">
+    <div v-if="passwordNeeded" class="filex-viewer-fallback">
+      <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+      <span class="filex-viewer-fallback__icon" aria-hidden="true" v-html="actionIconSvg('lock')"></span>
+      <p>{{ tt('archive.password_required', 'This archive requires a password.') }}</p>
+    </div>
+    <div v-else-if="error" class="filex-viewer-fallback">
       <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
       <span class="filex-viewer-fallback__icon" aria-hidden="true" v-html="typeTile"></span>
       <p>{{ error }}</p>
@@ -201,6 +282,13 @@ function entryTile(e: ArchiveEntry): string {
       <p>{{ tt('viewer.archive.empty', 'Archive is empty.') }}</p>
     </div>
     <div v-else class="filex-viewer-archive__pane">
+      <nav class="filex-viewer-archive__crumbs" :aria-label="tt('viewer.archive.location', 'Archive location')">
+        <button type="button" @click="currentDir = ''">{{ tt('viewer.archive.root', 'Archive') }}</button>
+        <template v-for="crumb in breadcrumbs" :key="crumb.path">
+          <span aria-hidden="true">›</span>
+          <button type="button" @click="currentDir = crumb.path">{{ crumb.name }}</button>
+        </template>
+      </nav>
       <div class="filex-viewer-archive__summary">
         <!-- ⚠ The count is IN the message ("{n} files"). A `{{ fileCount }}`
              printed in front of it read "3 3 files". -->
@@ -210,20 +298,31 @@ function entryTile(e: ArchiveEntry): string {
       <DataTable
         table-id="viewer.archive"
         :columns="columns"
-        :rows="entries"
-        :row-key="(e: ArchiveEntry) => e.name"
-        :row-attrs="(e: ArchiveEntry) => ({ 'data-dir': e.is_dir ? '1' : '0' })"
+        :rows="visibleEntries"
+        :row-key="(e: ArchiveRow) => e.fullPath"
+        :row-attrs="(e: ArchiveRow) => ({ 'data-dir': e.is_dir ? '1' : '0', onDblclick: () => openRow(e) })"
       >
         <template #cell-name="{ row }">
           <!-- ikon:emoji — the same tile the listing draws for the same kind
                of file, so an archive's contents and the folder it came from
                read as one product. -->
-          <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons -->
-          <span class="filex-viewer-archive__icon" aria-hidden="true" v-html="entryTile(row)"></span>
-          <span class="fe-list__cell-text">{{ row.name }}</span>
+          <button type="button" class="filex-viewer-archive__entry" :disabled="!row.is_dir" @click="openRow(row)">
+            <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons -->
+            <span class="filex-viewer-archive__icon" aria-hidden="true" v-html="entryTile(row)"></span>
+            <span class="fe-list__cell-text">{{ row.displayName }}</span>
+          </button>
         </template>
       </DataTable>
     </div>
+    <ArchivePasswordModal
+      :open="passwordNeeded"
+      :locale="props.locale"
+      :archive-name="(props.filePath || '').split('/').pop() || ''"
+      :busy="loading"
+      :error="passwordError"
+      @close="emit('close')"
+      @submit="submitPassword"
+    />
   </div>
 </template>
 
@@ -281,4 +380,10 @@ function entryTile(e: ArchiveEntry): string {
   display: block;
   margin-bottom: 12px;
 }
+.filex-viewer-archive__crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--fe-text-muted, #5a6475); }
+.filex-viewer-archive__crumbs button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
+.filex-viewer-archive__crumbs button:hover { background: var(--fe-bg-elev, #f7f8fa); color: var(--fe-text, #1a1e27); }
+.filex-viewer-archive__entry { display: inline-flex; align-items: center; max-width: 100%; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; text-align: start; }
+.filex-viewer-archive__entry:not(:disabled) { cursor: pointer; }
+.filex-viewer-archive__entry:disabled { opacity: 1; }
 </style>

package/dist/ArchiveViewer-BqU761Wk.js

@@ -1,149 +0,0 @@
-import { defineComponent as z, ref as h, onMounted as H, watch as C, computed as d, openBlock as c, createElementBlock as u, createElementVNode as n, toDisplayString as l, unref as M, createVNode as S, withCtx as E } from "vue";
-import { u as P, f as x, a as N, _ as V } from "./index-DuWnGuv5.js";
-const j = { class: "filex-viewer-archive" }, A = {
-  key: 0,
-  class: "filex-viewer-fallback"
-}, D = ["innerHTML"], I = {
-  key: 1,
-  class: "filex-viewer-fallback"
-}, O = ["innerHTML"], B = {
-  key: 2,
-  class: "filex-viewer-fallback"
-}, F = ["innerHTML"], U = {
-  key: 3,
-  class: "filex-viewer-archive__pane"
-}, $ = { class: "filex-viewer-archive__summary" }, J = ["innerHTML"], q = { class: "fe-list__cell-text" }, Q = /* @__PURE__ */ z({
-  __name: "ArchiveViewer",
-  props: {
-    url: {},
-    filePath: {},
-    ext: {},
-    t: { type: Function },
-    locale: {},
-    authHeaders: { type: Function },
-    authCredentials: {},
-    archiveListUrl: {}
-  },
-  setup(y) {
-    const a = y, s = h([]), v = h(!0), o = h(null);
-    function r(e, t, i) {
-      return a.t ? a.t(e, i) : t;
-    }
-    const { formatSize: g } = P(() => a.locale ?? "en");
-    function f(e) {
-      return g(e);
-    }
-    async function _() {
-      if (v.value = !0, o.value = null, s.value = [], !a.filePath) {
-        o.value = r("viewer.archive.error", "Could not read archive contents."), v.value = !1;
-        return;
-      }
-      try {
-        const e = await fetch(a.archiveListUrl || "/api/files/archive/list", {
-          method: "POST",
-          credentials: a.authCredentials || "same-origin",
-          headers: {
-            "Content-Type": "application/json",
-            ...a.authHeaders ? await a.authHeaders() : {}
-          },
-          body: JSON.stringify({ path: a.filePath })
-        });
-        if (!e.ok)
-          throw new w(await k(e));
-        const t = await e.json();
-        s.value = t.entries ?? [];
-      } catch (e) {
-        o.value = e instanceof w ? e.message : r("viewer.archive.error", "Could not read archive contents.");
-      } finally {
-        v.value = !1;
-      }
-    }
-    class w extends Error {
-    }
-    async function k(e) {
-      let t = "";
-      try {
-        const i = await e.json();
-        t = String((i == null ? void 0 : i.code) ?? (i == null ? void 0 : i.error) ?? "");
-      } catch {
-      }
-      return /not a zip|unsupported|not supported|format/i.test(t) ? r("viewer.archive.unsupported", "This kind of archive cannot be listed here. Download it to see what is inside.") : e.status === 413 || /too large|too big/i.test(t) ? r("viewer.archive.too_large", "This archive is too large to list here. Download it to see what is inside.") : r("viewer.archive.error", "Could not read archive contents.");
-    }
-    H(_), C(() => a.filePath, _);
-    const T = d(() => [
-      {
-        id: "name",
-        label: r("viewer.name", "Name"),
-        sortable: !0,
-        width: 360,
-        class: "filex-viewer-archive__name",
-        title: (e) => e.name
-      },
-      {
-        id: "size",
-        label: r("viewer.size", "Size"),
-        sortable: !0,
-        width: 110,
-        align: "right",
-        class: "filex-viewer-archive__size",
-        format: (e) => e.is_dir ? "" : f(e.size),
-        sortValue: (e) => e.is_dir ? -1 : e.size
-      }
-    ]), b = d(() => s.value.reduce((e, t) => e + (t.size || 0), 0)), p = d(() => s.value.filter((e) => !e.is_dir).length), m = d(() => x({ type: "file", extension: a.ext }));
-    function L(e) {
-      const t = e.name || "", i = t.lastIndexOf(".");
-      return x({
-        type: e.is_dir ? "dir" : "file",
-        extension: i > 0 ? t.slice(i + 1) : "",
-        basename: t
-      });
-    }
-    return (e, t) => (c(), u("div", j, [
-      o.value ? (c(), u("div", A, [
-        n("span", {
-          class: "filex-viewer-fallback__icon",
-          "aria-hidden": "true",
-          innerHTML: m.value
-        }, null, 8, D),
-        n("p", null, l(o.value), 1)
-      ])) : v.value ? (c(), u("div", I, [
-        n("span", {
-          class: "filex-viewer-fallback__icon filex-viewer-fallback__icon--spin",
-          "aria-hidden": "true",
-          innerHTML: M(N)("progress")
-        }, null, 8, O),
-        n("p", null, l(r("viewer.loading", "Loading…")), 1)
-      ])) : s.value.length === 0 ? (c(), u("div", B, [
-        n("span", {
-          class: "filex-viewer-fallback__icon",
-          "aria-hidden": "true",
-          innerHTML: m.value
-        }, null, 8, F),
-        n("p", null, l(r("viewer.archive.empty", "Archive is empty.")), 1)
-      ])) : (c(), u("div", U, [
-        n("div", $, l(r("viewer.archive.entries", `${p.value} files`, { n: p.value })) + " · " + l(f(b.value)), 1),
-        S(V, {
-          "table-id": "viewer.archive",
-          columns: T.value,
-          rows: s.value,
-          "row-key": (i) => i.name,
-          "row-attrs": (i) => ({ "data-dir": i.is_dir ? "1" : "0" })
-        }, {
-          "cell-name": E(({ row: i }) => [
-            n("span", {
-              class: "filex-viewer-archive__icon",
-              "aria-hidden": "true",
-              innerHTML: L(i)
-            }, null, 8, J),
-            n("span", q, l(i.name), 1)
-          ]),
-          _: 1
-        }, 8, ["columns", "rows", "row-key", "row-attrs"])
-      ]))
-    ]));
-  }
-});
-export {
-  Q as default
-};
-//# sourceMappingURL=ArchiveViewer-BqU761Wk.js.map

package/dist/ArchiveViewer-BqU761Wk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArchiveViewer-BqU761Wk.js","sources":["../src/viewers/ArchiveViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ArchiveViewer — minimal zip / archive contents preview.\n *\n * Hits the configured archive-list endpoint (`archiveListUrl`, default\n * `POST /api/files/archive/list`) with the adapter-qualified path\n * and renders the member list as a flat table (name, size, mtime).\n * Read-only — extraction is exposed elsewhere (context menu / actions\n * panel). The viewer's job is just \"what's inside?\" so the user can\n * decide whether to extract or download.\n */\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */\nimport { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */\nimport DataTable, { type DataColumn } from '../components/DataTable.vue';\nimport { useLocale } from '../composables/useLocale';\n\ninterface ArchiveEntry {\n  name: string;\n  size: number;\n  mtime?: string;\n  is_dir?: boolean;\n}\n\nconst props = defineProps<{\n  url: string;\n  filePath?: string;\n  ext: string;\n  t?: (key: string, vars?: Record<string, string | number>) => string;\n  /** The interface language — the size column is written the way it writes\n   *  numbers (\"1,96 KB\"), like every other size in the product. */\n  locale?: string;\n  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;\n  authCredentials?: RequestCredentials;\n  /** ⚠ Where to ask. This used to be the literal '/api/files/archive/list',\n   *  which is the ONE thing an embed cannot assume: with `apiBase` pointing at\n   *  another origin the request went to the host page instead and 404'd, while\n   *  every other call in the package honoured the configured base. The default\n   *  keeps a same-origin install working unchanged. */\n  archiveListUrl?: string;\n}>();\n\nconst entries = ref<ArchiveEntry[]>([]);\nconst loading = ref(true);\nconst error = ref<string | null>(null);\n\n/** ⚠ `vars` go THROUGH `t()`, not into a `.replace()` afterwards: `t()` is what\n *  picks the singular (`viewer.archive.entries_one`) from the count, and it can\n *  only do that if it is told the count. Same shape CsvViewer's helper has. */\nfunction tt(key: string, fallback: string, vars?: Record<string, string | number>): string {\n  return props.t ? props.t(key, vars) : fallback;\n}\n\n/* ⚠ The product's one byte formatter (useLocale.formatSize). This file had\n   its own — base 1024, a dot, English units — so a zip's member read\n   \"1.9 KB\" beside the explorer's \"1,96 KB\" for the same bytes (QA,\n   2026-09-21). */\nconst { formatSize } = useLocale(() => props.locale ?? 'en');\nfunction fmtSize(n: number): string {\n  return formatSize(n);\n}\n\nasync function load(): Promise<void> {\n  loading.value = true;\n  error.value = null;\n  entries.value = [];\n  // The viewer is mounted with the resolved file path. Hit the API\n  // endpoint with the same adapter-qualified path the preview URL\n  // points at — the backend resolves storage + relative path itself.\n  if (!props.filePath) {\n    error.value = tt('viewer.archive.error', 'Could not read archive contents.');\n    loading.value = false;\n    return;\n  }\n  try {\n    const res = await fetch(props.archiveListUrl || '/api/files/archive/list', {\n      method: 'POST',\n      credentials: props.authCredentials || 'same-origin',\n      headers: {\n        'Content-Type': 'application/json',\n        ...(props.authHeaders ? await props.authHeaders() : {}),\n      },\n      body: JSON.stringify({ path: props.filePath }),\n    });\n    if (!res.ok) {\n      /* ⚠ Never the raw status. This printed \"503 Service Unavailable\" (or a\n       * JSON body) straight into the preview — the same failure the owner\n       * reported for ONLYOFFICE (\"Config fetch 503: {…}\"): a person is shown\n       * the HTTP layer instead of what happened. The server's reason, when it\n       * sent one we know, becomes a sentence; anything else is the generic\n       * \"could not read the archive\". */\n      throw new ArchiveError(await archiveErrorText(res));\n    }\n    const body = (await res.json()) as { entries?: ArchiveEntry[] };\n    entries.value = body.entries ?? [];\n  } catch (err) {\n    error.value =\n      err instanceof ArchiveError ? err.message : tt('viewer.archive.error', 'Could not read archive contents.');\n  } finally {\n    loading.value = false;\n  }\n}\n\n/** A failure already worded for a person. Anything else that throws (the\n *  network, a JSON parse) reads as the generic sentence. */\nclass ArchiveError extends Error {}\n\nasync function archiveErrorText(res: Response): Promise<string> {\n  let code = '';\n  try {\n    const body = (await res.json()) as { error?: unknown; code?: unknown };\n    code = String(body?.code ?? body?.error ?? '');\n  } catch {\n    /* not JSON — the generic sentence below */\n  }\n  if (/not a zip|unsupported|not supported|format/i.test(code)) {\n    return tt('viewer.archive.unsupported', 'This kind of archive cannot be listed here. Download it to see what is inside.');\n  }\n  if (res.status === 413 || /too large|too big/i.test(code)) {\n    return tt('viewer.archive.too_large', 'This archive is too large to list here. Download it to see what is inside.');\n  }\n  return tt('viewer.archive.error', 'Could not read archive contents.');\n}\n\nonMounted(load);\nwatch(() => props.filePath, load);\n\n/**\n * The entries, in THE table (DataTable — the explorer's own). ⚠ It used to be\n * the one table in the package allowed to be its own, with the reasoning that\n * a file's contents answer to the viewer's layout. The owner's rule since\n * 2026-09-21 has no such exception — \"bir yere tablo gerekiyorsa bu tabloyu\n * koymak zorundayız\" — and an archive's listing is a file listing: it wants\n * to be sorted by size and have its Name column widened exactly the way the\n * folder it came from does.\n */\nconst columns = computed<DataColumn<ArchiveEntry>[]>(() => [\n  {\n    id: 'name',\n    label: tt('viewer.name', 'Name'),\n    sortable: true,\n    width: 360,\n    class: 'filex-viewer-archive__name',\n    title: (e) => e.name,\n  },\n  {\n    id: 'size',\n    label: tt('viewer.size', 'Size'),\n    sortable: true,\n    width: 110,\n    align: 'right',\n    class: 'filex-viewer-archive__size',\n    format: (e) => (e.is_dir ? '' : fmtSize(e.size)),\n    sortValue: (e) => (e.is_dir ? -1 : e.size),\n  },\n]);\n\nconst totalSize = computed(() => entries.value.reduce((sum, e) => sum + (e.size || 0), 0));\nconst fileCount = computed(() => entries.value.filter((e) => !e.is_dir).length);\n\n/* === ikon:emoji — the fallback screen's mark ==========================\n * Every viewer opened its \"cannot show this\" / \"still loading\" screen with a\n * 48px colour emoji, one per format, each from whatever emoji font the OS\n * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row\n * the person just clicked is wearing, so the fallback is recognisably about\n * that file — and \"loading\" is the stroked ring, spun by CSS, because no\n * still picture can say \"still going\". */\nconst typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));\n\n/** A row inside the archive, drawn the way the listing draws the same kind. */\nfunction entryTile(e: ArchiveEntry): string {\n  const name = e.name || '';\n  const dot = name.lastIndexOf('.');\n  return fileIconTile({\n    type: e.is_dir ? 'dir' : 'file',\n    extension: dot > 0 ? name.slice(dot + 1) : '',\n    basename: name,\n  });\n}\n</script>\n\n<template>\n  <div class=\"filex-viewer-archive\">\n    <div v-if=\"error\" class=\"filex-viewer-fallback\">\n      <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->\n      <span class=\"filex-viewer-fallback__icon\" aria-hidden=\"true\" v-html=\"typeTile\"></span>\n      <p>{{ error }}</p>\n    </div>\n    <div v-else-if=\"loading\" class=\"filex-viewer-fallback\">\n      <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->\n      <span\n        class=\"filex-viewer-fallback__icon filex-viewer-fallback__icon--spin\"\n        aria-hidden=\"true\"\n        v-html=\"actionIconSvg('progress')\"\n      ></span>\n      <p>{{ tt('viewer.loading', 'Loading…') }}</p>\n    </div>\n    <div v-else-if=\"entries.length === 0\" class=\"filex-viewer-fallback\">\n      <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->\n      <span class=\"filex-viewer-fallback__icon\" aria-hidden=\"true\" v-html=\"typeTile\"></span>\n      <p>{{ tt('viewer.archive.empty', 'Archive is empty.') }}</p>\n    </div>\n    <div v-else class=\"filex-viewer-archive__pane\">\n      <div class=\"filex-viewer-archive__summary\">\n        <!-- ⚠ The count is IN the message (\"{n} files\"). A `{{ fileCount }}`\n             printed in front of it read \"3 3 files\". -->\n        {{ tt('viewer.archive.entries', `${fileCount} files`, { n: fileCount }) }}\n        · {{ fmtSize(totalSize) }}\n      </div>\n      <DataTable\n        table-id=\"viewer.archive\"\n        :columns=\"columns\"\n        :rows=\"entries\"\n        :row-key=\"(e: ArchiveEntry) => e.name\"\n        :row-attrs=\"(e: ArchiveEntry) => ({ 'data-dir': e.is_dir ? '1' : '0' })\"\n      >\n        <template #cell-name=\"{ row }\">\n          <!-- ikon:emoji — the same tile the listing draws for the same kind\n               of file, so an archive's contents and the folder it came from\n               read as one product. -->\n          <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons -->\n          <span class=\"filex-viewer-archive__icon\" aria-hidden=\"true\" v-html=\"entryTile(row)\"></span>\n          <span class=\"fe-list__cell-text\">{{ row.name }}</span>\n        </template>\n      </DataTable>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ⚠ NOT `scoped`, deliberately. Vue's scoped styles compile to\n   `.cls[data-v-HASH]`, and in the web-component build the hash baked into\n   this CSS does not match the one Vue stamps onto the DOM — so every rule\n   here silently stopped applying. Measured in the desktop app: the share\n   dialog had `position: static`, no background and no radius, i.e. raw\n   unstyled HTML, in EVERY embedded surface.\n   Safe to drop: every selector below is prefixed (fx-/fe-/filex-), so\n   there is nothing here that can leak into a host page. */\n.filex-viewer-archive {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 70vh;\n  background: var(--fe-bg, #fff);\n  color: var(--fe-text, #1a1e27);\n}\n.filex-viewer-archive__pane {\n  flex: 1;\n  overflow: auto;\n  padding: 16px 20px;\n}\n.filex-viewer-archive__summary {\n  font-size: 12px;\n  color: var(--fe-text-muted, #5a6475);\n  margin-bottom: 12px;\n  font-variant-numeric: tabular-nums;\n}\n/* The table itself is DataTable's (styles/base.css); only the viewer's own\n   touches stay here — tabular figures and muted sizes, a folder row read as\n   quieter than a file. */\n.filex-viewer-archive__size {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  color: var(--fe-text-muted, #5a6475);\n}\n.filex-viewer-archive__icon {\n  margin-inline-end: 6px;\n}\n.filex-viewer-archive .fe-list__row[data-dir=\"1\"] {\n  color: var(--fe-text-muted, #5a6475);\n}\n.filex-viewer-fallback {\n  text-align: center;\n  padding: 32px;\n  color: var(--fe-text-muted, #5a6475);\n}\n.filex-viewer-fallback__icon {\n  font-size: 48px;\n  display: block;\n  margin-bottom: 12px;\n}\n</style>\n"],"names":["props","__props","entries","ref","loading","error","tt","key","fallback","vars","formatSize","useLocale","fmtSize","n","load","res","ArchiveError","archiveErrorText","body","err","code","onMounted","watch","columns","computed","totalSize","sum","e","fileCount","typeTile","fileIconTile","entryTile","name","dot","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_4","_unref","actionIconSvg","_hoisted_6","_hoisted_8","_hoisted_9","_toDisplayString","_createVNode","DataTable","_withCtx","row","_hoisted_11"],"mappings":"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"}