@brftech/filex-core 0.40.0 → 0.41.1

package/src/viewers/ArchiveViewer.vue

@@ -10,6 +10,8 @@
  * decide whether to extract or download.
  */
 import { computed, onMounted, ref, watch } from 'vue';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { fileIconTile } from '../lib/fileIcons'; /* ikon:emoji */
 
 interface ArchiveEntry {
   name: string;
@@ -22,7 +24,7 @@ const props = defineProps<{
   url: string;
   filePath?: string;
   ext: string;
-  t?: (key: string) => string;
+  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',
@@ -37,8 +39,11 @@ const entries = ref<ArchiveEntry[]>([]);
 const loading = ref(true);
 const error = ref<string | null>(null);
 
-function tt(key: string, fallback: string): string {
-  return props.t ? props.t(key) : fallback;
+/** ⚠ `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
+ *  only do that if it is told the count. Same shape CsvViewer's helper has. */
+function tt(key: string, fallback: string, vars?: Record<string, string | number>): string {
+  return props.t ? props.t(key, vars) : fallback;
 }
 
 function fmtSize(n: number): string {
@@ -87,25 +92,54 @@ watch(() => props.filePath, load);
 
 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
+ * 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 }));
+
+/** A row inside the archive, drawn the way the listing draws the same kind. */
+function entryTile(e: ArchiveEntry): string {
+  const name = e.name || '';
+  const dot = name.lastIndexOf('.');
+  return fileIconTile({
+    type: e.is_dir ? 'dir' : 'file',
+    extension: dot > 0 ? name.slice(dot + 1) : '',
+    basename: name,
+  });
+}
 </script>
 
 <template>
   <div class="filex-viewer-archive">
     <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-if="entries.length === 0" 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>{{ tt('viewer.archive.empty', 'Archive is empty.') }}</p>
     </div>
     <div v-else class="filex-viewer-archive__pane">
       <div class="filex-viewer-archive__summary">
-        {{ fileCount }} {{ tt('viewer.archive.entries', '{n} files').replace('{n}', String(fileCount)) }}
+        <!-- ⚠ The count is IN the message ("{n} files"). A `{{ fileCount }}`
+             printed in front of it read "3 3 files". -->
+        {{ tt('viewer.archive.entries', `${fileCount} files`, { n: fileCount }) }}
         · {{ fmtSize(totalSize) }}
       </div>
       <table class="filex-viewer-archive__table">
@@ -118,7 +152,11 @@ const fileCount = computed(() => entries.value.filter((e) => !e.is_dir).length);
         <tbody>
           <tr v-for="(e, i) in entries" :key="i" :data-dir="e.is_dir ? '1' : '0'">
             <td>
-              <span class="filex-viewer-archive__icon">{{ e.is_dir ? '📁' : '📄' }}</span>
+              <!-- 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(e)"></span>
               {{ e.name }}
             </td>
             <td class="filex-viewer-archive__size">{{ e.is_dir ? '' : fmtSize(e.size) }}</td>

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>