@brftech/filex-core 0.39.1 → 0.41.0

package/src/viewers/CsvViewer.vue

@@ -14,6 +14,8 @@
  *   - tab vs comma auto-detection (manual override via toolbar)
  */
 import { computed, onMounted, ref, watch } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import { fetchViewerText } from '../composables/useViewerFetch';
 
 const props = defineProps<{
@@ -147,17 +149,32 @@ watch(filter, () => {
 function tt(key: string, fallback: string, vars?: Record<string, string | number>): string {
   return props.t ? props.t(key, vars) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
   <div class="filex-viewer-csv">
     <div class="filex-viewer-csv__pane">
       <div v-if="error" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">📊</span>
+        <!-- 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>
       </div>
       <div v-else-if="loading" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">⏳</span>
+        <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+      <span
+        class="filex-viewer-fallback__icon filex-viewer-fallback__icon--spin"
+        aria-hidden="true"
+        v-html="actionIconSvg('progress')"
+      ></span>
         <p>{{ tt('viewer.loading', 'Loading…') }}</p>
       </div>
       <table v-else class="filex-viewer-csv__table">

package/src/viewers/DrawioViewer.vue

@@ -15,6 +15,7 @@
  * (drawio uses the same shape: POST `{path, content}` body).
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import { fetchViewerText } from '../composables/useViewerFetch';
 
 const props = defineProps<{
@@ -180,12 +181,22 @@ onBeforeUnmount(() => {
 function tt(key: string, fallback: string): string {
   return props.t ? props.t(key) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
   <div class="filex-viewer-drawio">
     <div v-if="error" class="filex-viewer-fallback">
-      <span class="filex-viewer-fallback__icon">📐</span>
+      <!-- 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>
     </div>
     <iframe

package/src/viewers/EpubViewer.vue

@@ -13,7 +13,8 @@
  *   - font size +/- (Themes API)
  *   - graceful fallback if peer not installed
  */
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 
 const props = defineProps<{
   url: string;
@@ -42,6 +43,29 @@ const loading = ref(true);
 let book: any = null;
 let rendition: any = null;
 
+/**
+ * How long an epub.js step may hang before we call it a failure.
+ *
+ * Generous on purpose: a large publication on a slow disk legitimately takes
+ * seconds, and a false "cannot open" on a book that would have rendered is a
+ * worse bug than the one this guards against.
+ */
+const EPUB_STEP_TIMEOUT_MS = 15000;
+
+/** Reject if `p` has not settled within `EPUB_STEP_TIMEOUT_MS`. */
+function withTimeout<T>(p: Promise<T>, label: string): Promise<T> {
+  let timer: ReturnType<typeof setTimeout>;
+  return Promise.race([
+    p,
+    new Promise<never>((_, reject) => {
+      timer = setTimeout(
+        () => reject(new Error(`EPUB ${label} timed out after ${EPUB_STEP_TIMEOUT_MS}ms`)),
+        EPUB_STEP_TIMEOUT_MS,
+      );
+    }),
+  ]).finally(() => clearTimeout(timer)) as Promise<T>;
+}
+
 async function load(): Promise<void> {
   loading.value = true;
   ready.value = false;
@@ -81,14 +105,24 @@ async function load(): Promise<void> {
       flow: 'paginated',
       manager: 'default',
     });
-    await rendition.display();
+    // ⚠⚠ Both of these have to be raced against a clock. epub.js resolves
+    // `display()` and `loaded.navigation` from its own internal promises, and
+    // when the archive is not a readable EPUB it simply NEVER settles —
+    // neither resolve nor reject — so the `catch` below can't fire and
+    // `finally` never runs. Measured 2026-09-13 on an 8-byte `handbook.epub`:
+    // the pane sat on "Yükleniyor…" forever with no error anywhere.
+    await withTimeout(rendition.display(), 'display');
     rendition.themes.fontSize(fontSize.value + '%');
-    const nav = await book.loaded.navigation;
+    // `<any>` explicitly: `book` is `any`, so without it `T` infers as `{}`
+    // and `nav.toc` stops type-checking.
+    const nav = await withTimeout<any>(book.loaded.navigation, 'navigation');
     toc.value = (nav?.toc ?? []) as TocNode[];
     ready.value = true;
   } catch (err) {
-    error.value =
-      err instanceof Error ? err.message : 'EPUB load failed';
+    // The reader gets the localized sentence; epub.js's own wording (and the
+    // timeout marker) goes to the console for whoever is debugging.
+    console.warn('[filex] EPUB load failed:', err);
+    error.value = tt('viewer.failed_to_load', 'Failed to load file');
   } finally {
     loading.value = false;
   }
@@ -165,12 +199,22 @@ watch(
 function tt(key: string, fallback: string): string {
   return props.t ? props.t(key) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
   <div ref="root" class="filex-viewer-epub">
     <div v-if="error" class="filex-viewer-fallback">
-      <span class="filex-viewer-fallback__icon">📖</span>
+      <!-- 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>
     </div>
     <template v-else>

package/src/viewers/IpynbViewer.vue

@@ -14,6 +14,8 @@
  * notebook doesn't surprise the user.
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import { fetchViewerText } from '../composables/useViewerFetch';
 import { ensureHighlight } from '../composables/useMonacoLoader';
 
@@ -192,17 +194,32 @@ const stats = computed(() => {
 function tt(key: string, fallback: string): string {
   return props.t ? props.t(key) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
   <div class="filex-viewer-ipynb">
     <div class="filex-viewer-ipynb__pane">
       <div v-if="error" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">📓</span>
+        <!-- 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>
       </div>
       <div v-else-if="loading" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">⏳</span>
+        <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+      <span
+        class="filex-viewer-fallback__icon filex-viewer-fallback__icon--spin"
+        aria-hidden="true"
+        v-html="actionIconSvg('progress')"
+      ></span>
         <p>{{ tt('viewer.loading', 'Loading…') }}</p>
       </div>
       <div v-else>

package/src/viewers/MermaidViewer.vue

@@ -8,7 +8,9 @@
  * SVG node is inserted into a wrapper that supports pan + scale via
  * pure CSS transforms (no extra panzoom dep).
  */
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import { fetchViewerText } from '../composables/useViewerFetch';
 
 const props = defineProps<{
@@ -142,6 +144,15 @@ onBeforeUnmount(() => {
 function tt(key: string, fallback: string): string {
   return props.t ? props.t(key) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
@@ -158,14 +169,20 @@ function tt(key: string, fallback: string): string {
         v-if="error"
         class="filex-viewer-fallback"
       >
-        <span class="filex-viewer-fallback__icon">📊</span>
+        <!-- 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>
       </div>
       <div
         v-else-if="loading"
         class="filex-viewer-fallback"
       >
-        <span class="filex-viewer-fallback__icon">⏳</span>
+        <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+      <span
+        class="filex-viewer-fallback__icon filex-viewer-fallback__icon--spin"
+        aria-hidden="true"
+        v-html="actionIconSvg('progress')"
+      ></span>
         <p>{{ tt('viewer.loading', 'Loading…') }}</p>
       </div>
       <div

package/src/viewers/PdfViewer.vue

@@ -20,6 +20,8 @@
  * installed (the parent PreviewModal handles that branch).
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import { fetchViewerArrayBuffer } from '../composables/useViewerFetch';
 
 const props = defineProps<{
@@ -366,6 +368,15 @@ watch(() => props.url, load);
 function tt(key: string, fallback: string): string {
   return props.t ? props.t(key) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
@@ -410,11 +421,14 @@ function tt(key: string, fallback: string): string {
         :disabled="saveStatus === 'saving'"
         @click="saveAnnotations"
       >
+        <!-- ikon:emoji — the button said ⏳ / ✓, an emoji and a dingbat, in
+             a row of word buttons. Words are what this control has always
+             been; the two transient states get theirs. -->
         {{
           saveStatus === 'saving'
-            ? '⏳'
+            ? tt('viewer.saving', 'Saving…')
             : saveStatus === 'saved'
-              ? '✓'
+              ? tt('viewer.saved', 'Saved')
               : tt('viewer.save_annotations', 'Save')
         }}
       </button>
@@ -429,11 +443,17 @@ function tt(key: string, fallback: string): string {
         class="filex-viewer-pdf__embed"
       />
       <div v-else-if="error" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">📕</span>
+        <!-- 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>
       </div>
       <div v-else-if="loading" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">⏳</span>
+        <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+        <span
+          class="filex-viewer-fallback__icon filex-viewer-fallback__icon--spin"
+          aria-hidden="true"
+          v-html="actionIconSvg('progress')"
+        ></span>
         <p>{{ tt('viewer.loading', 'Loading…') }}</p>
       </div>
       <div ref="containerEl" v-show="!loading && !error" class="filex-viewer-pdf__pages" />

package/src/viewers/PsdViewer.vue

@@ -9,7 +9,9 @@
  * — left as TODO for V2 since `ag-psd` doesn't ship a composite
  * pipeline of its own).
  */
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import { fetchViewerArrayBuffer } from '../composables/useViewerFetch';
 
 const props = defineProps<{
@@ -108,7 +110,14 @@ async function load(): Promise<void> {
     flattenLayers(psd, flat);
     layers.value = flat;
   } catch (err) {
-    error.value = err instanceof Error ? err.message : 'PSD decode failed';
+    // ⚠ The person gets the localized sentence; the decoder's own words go to
+    // the console for whoever is debugging. `ag-psd` throws raw internals
+    // ("Offset is outside the bounds of the DataView" on a truncated file),
+    // and printing that verbatim put an untranslated English stack message in
+    // the middle of a Turkish UI — measured 2026-09-13 on a 6-byte
+    // `mockup.psd`.
+    console.warn('[filex] PSD decode failed:', err);
+    error.value = tt('viewer.failed_to_load', 'Failed to load file');
   } finally {
     loading.value = false;
   }
@@ -133,17 +142,32 @@ watch(() => props.url, load);
 function tt(key: string, fallback: string): string {
   return props.t ? props.t(key) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
   <div class="filex-viewer-psd">
     <div class="filex-viewer-psd__pane">
       <div v-if="error" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">🎨</span>
+        <!-- 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>
       </div>
       <div v-else-if="loading" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">⏳</span>
+        <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+      <span
+        class="filex-viewer-fallback__icon filex-viewer-fallback__icon--spin"
+        aria-hidden="true"
+        v-html="actionIconSvg('progress')"
+      ></span>
         <p>{{ tt('viewer.loading', 'Loading…') }}</p>
       </div>
       <canvas

package/src/viewers/TiffViewer.vue

@@ -9,6 +9,8 @@
  * conversion.
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 import { fetchViewerArrayBuffer } from '../composables/useViewerFetch';
 
 const props = defineProps<{
@@ -143,17 +145,32 @@ const pageLabel = computed(() => {
 function tt(key: string, fallback: string): string {
   return props.t ? props.t(key) : fallback;
 }
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
   <div class="filex-viewer-tiff">
     <div class="filex-viewer-tiff__pane">
       <div v-if="error" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">🖼️</span>
+        <!-- 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>
       </div>
       <div v-else-if="loading" class="filex-viewer-fallback">
-        <span class="filex-viewer-fallback__icon">⏳</span>
+        <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+      <span
+        class="filex-viewer-fallback__icon filex-viewer-fallback__icon--spin"
+        aria-hidden="true"
+        v-html="actionIconSvg('progress')"
+      ></span>
         <p>{{ tt('viewer.loading', 'Loading…') }}</p>
       </div>
       <canvas

package/src/viewers/Viewer3D.vue

@@ -19,6 +19,8 @@
  * (sweep-2026-05-09 bug 21.)
  */
 import { computed, onMounted, ref, watch } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 
 const props = defineProps<{
   url: string;
@@ -57,6 +59,22 @@ async function load(): Promise<void> {
   }
 }
 
+/**
+ * model-viewer failed to FETCH or PARSE the model.
+ *
+ * ⚠ `ready` only means the ~80 KB web component imported. The model itself is
+ * fetched and decoded by model-viewer AFTER it mounts, and when that throws
+ * (a truncated or non-glTF file) it renders an empty canvas and reports the
+ * failure only on this event. Without the listener the person got a silent
+ * black rectangle and nothing else — measured 2026-09-13 on an 8-byte
+ * `turbine.glb`, where the console had `RangeError: Invalid DataView length 12`
+ * and the pane had no text at all.
+ */
+function onModelError(): void {
+  ready.value = false;
+  error.value = props.t ? props.t('viewer.failed_to_load') : 'Failed to load file';
+}
+
 onMounted(load);
 
 watch(() => props.url, () => {
@@ -64,6 +82,15 @@ watch(() => props.url, () => {
   // fallback message).
   load();
 });
+
+/* === ikon:emoji — the fallback screen's mark ==========================
+ * Every viewer opened its "cannot show this" / "still loading" screen with a
+ * 48px colour emoji, one per format, each from whatever emoji font the OS
+ * shipped. The format mark is `lib/fileIcons`'s tile — the SAME tile the row
+ * 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". */
+const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ext }));
 </script>
 
 <template>
@@ -77,13 +104,20 @@ watch(() => props.url, () => {
       shadow-intensity="1"
       :alt="ext + ' model'"
       style="width: 100%; height: 100%; min-height: 480px; display: block"
+      @error="onModelError"
     />
     <div v-else-if="error" class="filex-viewer-fallback">
-      <span class="filex-viewer-fallback__icon">📦</span>
+      <!-- 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>
     </div>
     <div v-else class="filex-viewer-fallback">
-      <span class="filex-viewer-fallback__icon">⏳</span>
+      <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons + lib/actionIcons -->
+      <span
+        class="filex-viewer-fallback__icon filex-viewer-fallback__icon--spin"
+        aria-hidden="true"
+        v-html="actionIconSvg('progress')"
+      ></span>
       <p>{{ t ? t('viewer.loading') : 'Loading…' }}</p>
     </div>
   </div>

package/dist/ArchiveViewer-Cdfv9LFC.js

@@ -1,99 +0,0 @@
-import { defineComponent as y, ref as d, onMounted as k, watch as b, computed as p, openBlock as s, createElementBlock as n, createElementVNode as i, toDisplayString as a, Fragment as g, renderList as z, createTextVNode as C } from "vue";
-const S = { class: "filex-viewer-archive" }, B = {
-  key: 0,
-  class: "filex-viewer-fallback"
-}, F = {
-  key: 1,
-  class: "filex-viewer-fallback"
-}, $ = {
-  key: 2,
-  class: "filex-viewer-fallback"
-}, P = {
-  key: 3,
-  class: "filex-viewer-archive__pane"
-}, E = { class: "filex-viewer-archive__summary" }, L = { class: "filex-viewer-archive__table" }, N = { class: "filex-viewer-archive__size" }, T = ["data-dir"], H = { class: "filex-viewer-archive__icon" }, V = { class: "filex-viewer-archive__size" }, A = /* @__PURE__ */ y({
-  __name: "ArchiveViewer",
-  props: {
-    url: {},
-    filePath: {},
-    ext: {},
-    t: { type: Function },
-    authHeaders: { type: Function },
-    authCredentials: {},
-    archiveListUrl: {}
-  },
-  setup(w) {
-    const r = w, o = d([]), v = d(!0), c = d(null);
-    function l(e, t) {
-      return r.t ? r.t(e) : t;
-    }
-    function f(e) {
-      return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : e < 1024 * 1024 * 1024 ? `${(e / (1024 * 1024)).toFixed(1)} MB` : `${(e / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-    }
-    async function h() {
-      if (v.value = !0, c.value = null, o.value = [], !r.filePath) {
-        c.value = l("viewer.archive.error", "Could not read archive contents."), v.value = !1;
-        return;
-      }
-      try {
-        const e = await fetch(r.archiveListUrl || "/api/files/archive/list", {
-          method: "POST",
-          credentials: r.authCredentials || "same-origin",
-          headers: {
-            "Content-Type": "application/json",
-            ...r.authHeaders ? await r.authHeaders() : {}
-          },
-          body: JSON.stringify({ path: r.filePath })
-        });
-        if (!e.ok)
-          throw new Error(`${e.status} ${e.statusText}`);
-        const t = await e.json();
-        o.value = t.entries ?? [];
-      } catch (e) {
-        c.value = e instanceof Error ? e.message : l("viewer.archive.error", "Could not read archive contents.");
-      } finally {
-        v.value = !1;
-      }
-    }
-    k(h), b(() => r.filePath, h);
-    const x = p(() => o.value.reduce((e, t) => e + (t.size || 0), 0)), _ = p(() => o.value.filter((e) => !e.is_dir).length);
-    return (e, t) => (s(), n("div", S, [
-      c.value ? (s(), n("div", B, [
-        t[0] || (t[0] = i("span", { class: "filex-viewer-fallback__icon" }, "🗜️", -1)),
-        i("p", null, a(c.value), 1)
-      ])) : v.value ? (s(), n("div", F, [
-        t[1] || (t[1] = i("span", { class: "filex-viewer-fallback__icon" }, "⏳", -1)),
-        i("p", null, a(l("viewer.loading", "Loading…")), 1)
-      ])) : o.value.length === 0 ? (s(), n("div", $, [
-        t[2] || (t[2] = i("span", { class: "filex-viewer-fallback__icon" }, "🗜️", -1)),
-        i("p", null, a(l("viewer.archive.empty", "Archive is empty.")), 1)
-      ])) : (s(), n("div", P, [
-        i("div", E, a(_.value) + " " + a(l("viewer.archive.entries", "{n} files").replace("{n}", String(_.value))) + " · " + a(f(x.value)), 1),
-        i("table", L, [
-          i("thead", null, [
-            i("tr", null, [
-              i("th", null, a(l("viewer.name", "Name")), 1),
-              i("th", N, a(l("viewer.size", "Size")), 1)
-            ])
-          ]),
-          i("tbody", null, [
-            (s(!0), n(g, null, z(o.value, (u, m) => (s(), n("tr", {
-              key: m,
-              "data-dir": u.is_dir ? "1" : "0"
-            }, [
-              i("td", null, [
-                i("span", H, a(u.is_dir ? "📁" : "📄"), 1),
-                C(" " + a(u.name), 1)
-              ]),
-              i("td", V, a(u.is_dir ? "" : f(u.size)), 1)
-            ], 8, T))), 128))
-          ])
-        ])
-      ]))
-    ]));
-  }
-});
-export {
-  A as default
-};
-//# sourceMappingURL=ArchiveViewer-Cdfv9LFC.js.map

package/dist/ArchiveViewer-Cdfv9LFC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArchiveViewer-Cdfv9LFC.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';\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) => 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\nfunction tt(key: string, fallback: string): string {\n  return props.t ? props.t(key) : fallback;\n}\n\nfunction fmtSize(n: number): string {\n  if (n < 1024) return `${n} B`;\n  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;\n  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;\n  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;\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      throw new Error(`${res.status} ${res.statusText}`);\n    }\n    const body = (await res.json()) as { entries?: ArchiveEntry[] };\n    entries.value = body.entries ?? [];\n  } catch (err) {\n    error.value = err instanceof Error ? err.message : tt('viewer.archive.error', 'Could not read archive contents.');\n  } finally {\n    loading.value = false;\n  }\n}\n\nonMounted(load);\nwatch(() => props.filePath, load);\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</script>\n\n<template>\n  <div class=\"filex-viewer-archive\">\n    <div v-if=\"error\" class=\"filex-viewer-fallback\">\n      <span class=\"filex-viewer-fallback__icon\">🗜️</span>\n      <p>{{ error }}</p>\n    </div>\n    <div v-else-if=\"loading\" class=\"filex-viewer-fallback\">\n      <span class=\"filex-viewer-fallback__icon\">⏳</span>\n      <p>{{ tt('viewer.loading', 'Loading…') }}</p>\n    </div>\n    <div v-else-if=\"entries.length === 0\" class=\"filex-viewer-fallback\">\n      <span class=\"filex-viewer-fallback__icon\">🗜️</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        {{ fileCount }} {{ tt('viewer.archive.entries', '{n} files').replace('{n}', String(fileCount)) }}\n        · {{ fmtSize(totalSize) }}\n      </div>\n      <table class=\"filex-viewer-archive__table\">\n        <thead>\n          <tr>\n            <th>{{ tt('viewer.name', 'Name') }}</th>\n            <th class=\"filex-viewer-archive__size\">{{ tt('viewer.size', 'Size') }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr v-for=\"(e, i) in entries\" :key=\"i\" :data-dir=\"e.is_dir ? '1' : '0'\">\n            <td>\n              <span class=\"filex-viewer-archive__icon\">{{ e.is_dir ? '📁' : '📄' }}</span>\n              {{ e.name }}\n            </td>\n            <td class=\"filex-viewer-archive__size\">{{ e.is_dir ? '' : fmtSize(e.size) }}</td>\n          </tr>\n        </tbody>\n      </table>\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.filex-viewer-archive__table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n  font-family: var(--fe-font-mono, monospace);\n}\n.filex-viewer-archive__table th,\n.filex-viewer-archive__table td {\n  padding: 6px 12px;\n  border-bottom: 1px solid var(--fe-border, #e2e6ed);\n  text-align: left;\n}\n.filex-viewer-archive__table th {\n  background: var(--fe-bg-elev, #f7f8fa);\n  font-weight: 600;\n  position: sticky;\n  top: 0;\n}\n.filex-viewer-archive__size {\n  text-align: right;\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-right: 6px;\n}\n.filex-viewer-archive__table tr[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","fmtSize","n","load","res","body","err","onMounted","watch","totalSize","computed","sum","e","fileCount","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_cache","_createElementVNode","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_toDisplayString","_hoisted_7","_hoisted_8","_Fragment","_renderList","i","_hoisted_10","_hoisted_11"],"mappings":"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"}