@brftech/filex-core 0.42.1 → 0.43.0

package/src/types/Public.ts

@@ -0,0 +1,212 @@
+/**
+ * Public surfaces — what a visitor with a link, and no account, is told.
+ *
+ * ⚠⚠ ONE shell draws all of them (`components/public/PublicShell.vue`): a
+ * share (`/s/<token>`), a file request (`/d/<token>`) and an app plugin's
+ * page (a share whose `kind` is `app`). Before v3 the first two were HTML
+ * that Go wrote by hand and the third was a Vue screen, so the PIN box of a
+ * signature request looked nothing like the PIN box of a download and
+ * neither carried the instance's own colours. The shapes below are the
+ * seam: everything the shell needs to draw ANY of the three, and nothing
+ * that depends on which one it is.
+ *
+ * ⚠⚠ MIRROR, not a second design. Every field here exists because it exists
+ * in `backend/internal/api/handlers/public_api.go` under the same JSON name
+ * (`PublicBranding`, `PublicShare`, `PublicNode`, `PublicApp`,
+ * `PublicDrop`). When the Go side grows one, add it here with the same
+ * spelling; when the two disagree, the Go file is right.
+ */
+import type { PluginText, PublicPageFile } from './Plugins';
+
+/* ── branding ─────────────────────────────────────────────────────────── */
+
+/**
+ * `GET /api/public/branding` — unauthenticated, cached.
+ *
+ * ⚠ Deliberately NOT the payload `/api/branding` serves: that one also
+ * carries the SSO button label, which a stranger has no business receiving.
+ *
+ * ⚠⚠ It used to carry the operator's custom stylesheet too, and that is the
+ * sentence that was wrong here for a release: the sheet left `/api/branding`
+ * for `GET /api/me/custom-css` behind auth, so no anonymous surface — this
+ * one included — can be handed a stylesheet that repaints a sign-in form.
+ */
+export interface PublicBranding {
+  /** The instance's own name. Empty = the product's. */
+  name?: string;
+  logo_url?: string;
+  /** `#rgb` / `#rrggbb` — becomes `--fe-primary` on the public shell. */
+  accent?: string;
+  footer_text?: string;
+  hide_powered_by?: boolean;
+  /** The appearance a visitor gets before they choose: `system` | `light` | `dark`. */
+  theme?: 'system' | 'light' | 'dark' | string;
+  /** The instance's own default language. */
+  locale?: string;
+  /** The languages the public pages can be rendered in. */
+  locales?: string[];
+  /**
+   * The languages installed apps add (`manifest.ui_locales`): one row each —
+   * `code`, `source: "plugin"`, the `plugin` that brought it, `rtl` — and NO
+   * `strings`. One language's strings are `GET /api/public/ui-locales/{code}`
+   * (`lib/uiLocales.ensureLocaleStrings`), fetched when it is first used.
+   *
+   * ⚠⚠ Typed from the SERVER's bytes, not from belief: this field was a map
+   * on the wire and a list here for a whole release, and no pack's string
+   * ever reached a screen. web/tests/lib/uiLocales.test.ts reads
+   * backend/internal/api/handlers/testdata/wire/public-branding.json, which
+   * the Go handler's own test writes.
+   */
+  ui_locales?: PublicLocaleOption[];
+}
+
+/* ── the states every public link shares ──────────────────────────────── */
+
+/** Why a link draws nothing, for a caller that logs it. */
+export type PublicFailure = '' | 'not_found' | 'gone' | 'error';
+
+/**
+ * What every public link answers, whatever kind it is.
+ *
+ * ⚠ `expired` and `revoked` are BOTH reported, and they are different facts:
+ * the clock ran out, versus the link is dead for another reason (its visit
+ * ceiling is spent, the app behind it was stopped, the file is gone). The
+ * shell shows one sentence for both — a visitor must not be told which —
+ * but the distinction is the server's to make, not the client's to lose.
+ *
+ * ⚠ `locked` is NOT one of them. It is the PIN gate shut after too many
+ * wrong answers, and it lifts by itself.
+ */
+export interface PublicLinkBase {
+  needs_pin: boolean;
+  unlocked: boolean;
+  expired?: boolean;
+  revoked?: boolean;
+  locked?: boolean;
+  /** RFC 3339, or absent for "no expiry". */
+  expires_at?: string | null;
+  /** Words for the shell's header — a subject line, a file name. */
+  subject?: string;
+}
+
+/* ── a share: `/s/<token>` ────────────────────────────────────────────── */
+
+/**
+ * `kind` decides the BODY the shell draws and nothing else — the header,
+ * the PIN gate, the language picker and the footer are the shell's.
+ *
+ *   file   → one document: download it
+ *   folder → a folder, downloaded whole or walked
+ *   app    → an app plugin's screen, drawn by SurfaceRenderer
+ */
+export type PublicShareKind = 'file' | 'folder' | 'app';
+
+/**
+ * The little a visitor learns about the thing behind a link: what it is
+ * called, how big it is, what kind of thing it is. Never its path, never its
+ * storage, never who owns it. Absent until the link is unlocked.
+ */
+export interface PublicNode {
+  name: string;
+  size?: number;
+  mime?: string;
+}
+
+/** The app surface a link carries, once it is unlocked. */
+export interface PublicApp {
+  plugin: string;
+  page: string;
+  title?: PluginText;
+  /** Copies the app exposed to this visitor (`pub:N`). */
+  files?: PublicPageFile[];
+}
+
+/** One row of a folder share's listing, when the server sends one. */
+export interface PublicEntry {
+  name: string;
+  /** Path relative to the share root, for the browse and download URLs. */
+  path: string;
+  is_dir: boolean;
+  size?: number;
+  mime?: string;
+  /** Epoch seconds or milliseconds, as the rest of the wire sends them. */
+  modified?: number;
+  /** Where the browser downloads this entry from; built from the token when absent. */
+  url?: string;
+}
+
+/** `GET /api/public/s/{token}`. */
+export interface PublicShareInfo extends PublicLinkBase {
+  kind: PublicShareKind;
+  /** Visits left before the link stops answering; null = uncounted. */
+  visits_left?: number | null;
+  node?: PublicNode | null;
+  app?: PublicApp | null;
+  /**
+   * A folder share's listing.
+   *
+   * ⚠ Not sent today — the server answers a folder share with its NAME and
+   * leaves the walking to the no-JS page. Declared because the shell draws a
+   * listing the moment one arrives, and because the alternative (a second
+   * browse implementation in the SPA, reading a different endpoint) is the
+   * thing this round exists to stop.
+   */
+  entries?: PublicEntry[];
+  /** The path being listed, relative to the share root. */
+  path?: string;
+}
+
+/* ── a file request: `/d/<token>` ─────────────────────────────────────── */
+
+/** What a file request will accept. */
+export interface PublicDropLimits {
+  max_files?: number;
+  /** Megabytes, as the server states it. */
+  max_file_size_mb?: number;
+  /** Lower-case extensions, no dot. Empty = anything. */
+  allowed_ext?: string[];
+  /** The uploader is asked for their name. */
+  ask_name?: boolean;
+}
+
+/** `GET /api/public/d/{token}` — the drop box an outsider uploads into. */
+export interface PublicRequestInfo extends PublicLinkBase {
+  kind?: 'drop' | string;
+  /** The destination's NAME — never its path, and never a listing. */
+  folder?: string;
+  /** How many files may still be dropped; null/absent = uncounted. */
+  uploads_left?: number | null;
+  limits?: PublicDropLimits;
+}
+
+/* ── languages ────────────────────────────────────────────────────────── */
+
+/**
+ * One entry of the language list the interface offers.
+ *
+ * ⚠ The list is NOT a constant any more (v3 §5). It is the product's own
+ * languages plus whatever the server adds — including a language an app
+ * plugin ships (`manifest.ui_locales`), which is marked with the app it came
+ * from and leaves with it. A key the extra language does not carry falls
+ * back to English, exactly as a missing key always has.
+ */
+export interface PublicLocaleOption {
+  /** BCP-47 primary subtag, e.g. `en`, `tr`, `ar`. */
+  code: string;
+  /** The language's name IN that language ("Türkçe"), not in the viewer's. */
+  label?: string;
+  /** `builtin` = shipped with filex; `plugin` = added by an app. */
+  source?: 'builtin' | 'plugin' | string;
+  /** The app that ships it, when `source` is `plugin` — shown beside the name. */
+  plugin?: string;
+  /**
+   * That language's strings by filex's own keys — absent on the branding
+   * list, present once `ensureLocaleStrings` has fetched them.
+   */
+  strings?: Record<string, string>;
+  /**
+   * Written right to left (Arabic, Hebrew, Persian, Urdu, …): the page's
+   * `dir` follows (lib/direction, docs/RTL.md).
+   */
+  rtl?: boolean;
+}

package/src/viewers/ArchiveViewer.vue

@@ -12,6 +12,8 @@
 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';
 
 interface ArchiveEntry {
   name: string;
@@ -25,6 +27,9 @@ const props = defineProps<{
   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;
   authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   authCredentials?: RequestCredentials;
   /** ⚠ Where to ask. This used to be the literal '/api/files/archive/list',
@@ -46,11 +51,13 @@ function tt(key: string, fallback: string, vars?: Record<string, string | number
   return props.t ? props.t(key, vars) : fallback;
 }
 
+/* ⚠ The product's one byte formatter (useLocale.formatSize). This file had
+   its own — base 1024, a dot, English units — so a zip's member read
+   "1.9 KB" beside the explorer's "1,96 KB" for the same bytes (QA,
+   2026-09-21). */
+const { formatSize } = useLocale(() => props.locale ?? 'en');
 function fmtSize(n: number): string {
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;
-  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+  return formatSize(n);
 }
 
 async function load(): Promise<void> {
@@ -76,20 +83,78 @@ async function load(): Promise<void> {
       body: JSON.stringify({ path: props.filePath }),
     });
     if (!res.ok) {
-      throw new Error(`${res.status} ${res.statusText}`);
+      /* ⚠ Never the raw status. This printed "503 Service Unavailable" (or a
+       * JSON body) straight into the preview — the same failure the owner
+       * reported for ONLYOFFICE ("Config fetch 503: {…}"): a person is shown
+       * 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()) as { entries?: ArchiveEntry[] };
     entries.value = body.entries ?? [];
   } catch (err) {
-    error.value = err instanceof Error ? err.message : tt('viewer.archive.error', 'Could not read archive contents.');
+    error.value =
+      err instanceof ArchiveError ? err.message : tt('viewer.archive.error', 'Could not read archive contents.');
   } finally {
     loading.value = false;
   }
 }
 
+/** A failure already worded for a person. Anything else that throws (the
+ *  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 */
+  }
+  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)) {
+    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
+ * the one table in the package allowed to be its own, with the reasoning that
+ * a file's contents answer to the viewer's layout. The owner's rule since
+ * 2026-09-21 has no such exception — "bir yere tablo gerekiyorsa bu tabloyu
+ * koymak zorundayız" — and an archive's listing is a file listing: it wants
+ * 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>[]>(() => [
+  {
+    id: 'name',
+    label: tt('viewer.name', 'Name'),
+    sortable: true,
+    width: 360,
+    class: 'filex-viewer-archive__name',
+    title: (e) => e.name,
+  },
+  {
+    id: 'size',
+    label: tt('viewer.size', 'Size'),
+    sortable: true,
+    width: 110,
+    align: 'right',
+    class: 'filex-viewer-archive__size',
+    format: (e) => (e.is_dir ? '' : fmtSize(e.size)),
+    sortValue: (e) => (e.is_dir ? -1 : e.size),
+  },
+]);
+
 const totalSize = computed(() => entries.value.reduce((sum, e) => sum + (e.size || 0), 0));
 const fileCount = computed(() => entries.value.filter((e) => !e.is_dir).length);
 
@@ -142,27 +207,22 @@ function entryTile(e: ArchiveEntry): string {
         {{ tt('viewer.archive.entries', `${fileCount} files`, { n: fileCount }) }}
         · {{ fmtSize(totalSize) }}
       </div>
-      <table class="filex-viewer-archive__table">
-        <thead>
-          <tr>
-            <th>{{ tt('viewer.name', 'Name') }}</th>
-            <th class="filex-viewer-archive__size">{{ tt('viewer.size', 'Size') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(e, i) in entries" :key="i" :data-dir="e.is_dir ? '1' : '0'">
-            <td>
-              <!-- 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>
-          </tr>
-        </tbody>
-      </table>
+      <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' })"
+      >
+        <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>
+        </template>
+      </DataTable>
     </div>
   </div>
 </template>
@@ -196,34 +256,19 @@ function entryTile(e: ArchiveEntry): string {
   margin-bottom: 12px;
   font-variant-numeric: tabular-nums;
 }
-.filex-viewer-archive__table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-family: var(--fe-font-mono, monospace);
-}
-.filex-viewer-archive__table th,
-.filex-viewer-archive__table td {
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--fe-border, #e2e6ed);
-  text-align: left;
-}
-.filex-viewer-archive__table th {
-  background: var(--fe-bg-elev, #f7f8fa);
-  font-weight: 600;
-  position: sticky;
-  top: 0;
-}
+/* The table itself is DataTable's (styles/base.css); only the viewer's own
+   touches stay here — tabular figures and muted sizes, a folder row read as
+   quieter than a file. */
 .filex-viewer-archive__size {
-  text-align: right;
+  text-align: end;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
   color: var(--fe-text-muted, #5a6475);
 }
 .filex-viewer-archive__icon {
-  margin-right: 6px;
+  margin-inline-end: 6px;
 }
-.filex-viewer-archive__table tr[data-dir="1"] {
+.filex-viewer-archive .fe-list__row[data-dir="1"] {
   color: var(--fe-text-muted, #5a6475);
 }
 .filex-viewer-fallback {

package/src/viewers/CsvViewer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { sayFailure } from '../lib/errorWords';
 /**
  * CsvViewer — lightweight CSV / TSV table preview.
  *
@@ -17,6 +18,7 @@ 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';
+import DataTable, { type DataColumn } from '../components/DataTable.vue';
 
 const props = defineProps<{
   url: string;
@@ -86,7 +88,7 @@ async function load(): Promise<void> {
       credentials: props.authCredentials,
     });
   } catch (err) {
-    error.value = err instanceof Error ? err.message : 'fetch failed';
+    error.value = sayFailure(err, tt('viewer.failed_to_load', 'Failed to load file'), { t: props.t }).text;
     loading.value = false;
     return;
   }
@@ -125,27 +127,93 @@ const dataRows = computed<string[][]>(() => {
   return firstRowHeader.value ? rows.value.slice(1) : rows.value;
 });
 
-const filtered = computed<string[][]>(() => {
+/** A parsed row with the line it came from, so `#` keeps naming the row in
+ *  the FILE after a sort re-orders the screen. */
+interface CsvRow {
+  n: number;
+  cells: string[];
+}
+
+const filtered = computed<CsvRow[]>(() => {
   const q = filter.value.trim().toLowerCase();
-  if (!q) return dataRows.value;
-  return dataRows.value.filter((r) =>
-    r.some((c) => (c || '').toLowerCase().includes(q)),
-  );
+  const all = dataRows.value.map((cells, i) => ({ n: i + 1, cells }));
+  if (!q) return all;
+  return all.filter((r) => r.cells.some((c) => (c || '').toLowerCase().includes(q)));
 });
 
+/**
+ * THE SORT, done here and handed to the table as CONTROLLED.
+ *
+ * ⚠⚠ Here and not in the table, because the table only ever holds one page
+ * (100 rows) of the parsed file, and a table that sorts the page it holds
+ * would call a re-ordered 100 of 1000 "sorted" — so it rightly closes its
+ * headers over a paged list. This component holds EVERY parsed row, so it can
+ * sort all of them and then page, which is the honest order.
+ */
+const sort = ref<{ key: string; dir: 'asc' | 'desc' } | null>(null);
+
+function cellOf(r: CsvRow, key: string): string {
+  if (key === 'n') return String(r.n);
+  return r.cells[Number(key.slice(1))] ?? '';
+}
+
+const sorted = computed<CsvRow[]>(() => {
+  const s = sort.value;
+  if (!s) return filtered.value;
+  const dir = s.dir === 'asc' ? 1 : -1;
+  return [...filtered.value].sort((a, b) => {
+    if (s.key === 'n') return dir * (a.n - b.n);
+    const x = cellOf(a, s.key);
+    const y = cellOf(b, s.key);
+    // Empty cells last in both directions; numbers as numbers.
+    if (!x !== !y) return x ? -1 : 1;
+    const nx = Number(x);
+    const ny = Number(y);
+    if (x && y && Number.isFinite(nx) && Number.isFinite(ny)) return dir * (nx - ny) || a.n - b.n;
+    return dir * x.localeCompare(y, undefined, { numeric: true, sensitivity: 'base' }) || a.n - b.n;
+  });
+});
+
+function onSort(next: { key: string; dir: 'asc' | 'desc' }) {
+  sort.value = next;
+}
+
 const totalPages = computed(() =>
-  Math.max(1, Math.ceil(filtered.value.length / PAGE_SIZE)),
+  Math.max(1, Math.ceil(sorted.value.length / PAGE_SIZE)),
 );
 
-const visibleRows = computed<string[][]>(() => {
+const visibleRows = computed<CsvRow[]>(() => {
   const start = (page.value - 1) * PAGE_SIZE;
-  return filtered.value.slice(start, start + PAGE_SIZE);
+  return sorted.value.slice(start, start + PAGE_SIZE);
 });
 
-watch(filter, () => {
+watch([filter, sort], () => {
   page.value = 1;
 });
 
+/** The file's columns, as THE table (DataTable — the explorer's own) draws
+ *  them. `#` is the lead: it is what names a row of a spreadsheet. */
+const columns = computed<DataColumn<CsvRow>[]>(() => [
+  {
+    id: 'n',
+    label: '#',
+    lead: true,
+    width: 64,
+    min: 48,
+    align: 'right',
+    sortable: true,
+    class: 'filex-viewer-csv__rownum',
+    format: (r) => r.n,
+  },
+  ...headers.value.map((h, i) => ({
+    id: `c${i}`,
+    label: h,
+    width: 140,
+    sortable: true,
+    format: (r: CsvRow) => r.cells[i] ?? '',
+  })),
+]);
+
 function tt(key: string, fallback: string, vars?: Record<string, string | number>): string {
   return props.t ? props.t(key, vars) : fallback;
 }
@@ -177,20 +245,19 @@ const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ex
       ></span>
         <p>{{ tt('viewer.loading', 'Loading…') }}</p>
       </div>
-      <table v-else class="filex-viewer-csv__table">
-        <thead>
-          <tr>
-            <th class="filex-viewer-csv__rownum">#</th>
-            <th v-for="(h, i) in headers" :key="i">{{ h }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, ri) in visibleRows" :key="ri">
-            <td class="filex-viewer-csv__rownum">{{ (page - 1) * 100 + ri + 1 }}</td>
-            <td v-for="(c, ci) in row" :key="ci">{{ c }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <!-- ⚠ No table id: a spreadsheet's columns are whatever THIS file has
+           (`c0`, `c1`, …), so widths remembered against them would land on a
+           different file's different columns next time. The arrangement
+           lives for this preview. -->
+      <DataTable
+        v-else
+        :table-id="undefined"
+        :columns="columns"
+        :rows="visibleRows"
+        :row-key="(r: CsvRow) => r.n"
+        :sort="sort"
+        @sort="onSort"
+      />
     </div>
     <div v-if="!loading && !error && totalPages > 1" class="filex-viewer-csv__pager">
       <button
@@ -199,7 +266,7 @@ const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ex
         :disabled="page <= 1"
         @click="page--"
       >‹</button>
-      <span class="filex-viewer-csv__pageno">{{ page }} / {{ totalPages }} ({{ tt('viewer.csv_rows', `${filtered.length} rows`, { n: filtered.length }) }})</span>
+      <span class="filex-viewer-csv__pageno"><bdi dir="ltr">{{ page }} / {{ totalPages }}</bdi> ({{ tt('viewer.csv_rows', `${filtered.length} rows`, { n: filtered.length }) }})</span>
       <button
         type="button"
         class="filex-viewer-btn"
@@ -266,39 +333,18 @@ const typeTile = computed(() => fileIconTile({ type: 'file', extension: props.ex
   flex: 1;
   overflow: auto;
 }
-.filex-viewer-csv__table {
-  border-collapse: collapse;
-  width: max-content;
-  min-width: 100%;
-  font-size: 12px;
+.filex-viewer-csv__pane .fe-list__cell {
   font-family: var(--fe-font-mono, monospace);
+  font-size: 12px;
 }
-.filex-viewer-csv__table th,
-.filex-viewer-csv__table td {
-  padding: 4px 10px;
-  border: 1px solid var(--fe-border, #e2e6ed);
-  white-space: nowrap;
-  max-width: 320px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.filex-viewer-csv__table th {
-  background: var(--fe-bg-elev, #f7f8fa);
-  position: sticky;
-  top: 0;
-  font-weight: 600;
-  text-align: left;
-}
-.filex-viewer-csv__table tbody tr:nth-child(even) {
-  background: var(--fe-bg-hover, rgba(0, 0, 0, 0.02));
-}
+/* The table itself is DataTable's (styles/base.css) — the product's one table.
+   ⚠ The row number used to pin itself (`position: sticky; left: 0`) because
+   this was a table of its own; it is the table's LEAD now, and the table
+   freezes its lead itself, only while there is room to (a pin written here
+   would fight that gate). What stays is the look of a row number. */
 .filex-viewer-csv__rownum {
   color: var(--fe-text-muted, #5a6475);
-  text-align: right;
-  background: var(--fe-bg-elev, #f7f8fa);
   font-variant-numeric: tabular-nums;
-  position: sticky;
-  left: 0;
 }
 .filex-viewer-csv__pager {
   display: flex;