@brftech/filex-core 0.42.2 → 0.43.0

package/src/components/LogoMark.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// The filex mark — the ONE copy of it in the product's own code.
+//
+// A tiny folder + checkmark: recognisable as a file manager, inline SVG so it
+// needs no asset pipeline. `class` falls through to the root element, so a
+// caller sizes it.
+//
+// ⚠⚠ It lives in `packages/core` and not in `web/` because the public shell
+// (`components/public/PublicShell.vue`) draws it too, and `packages/core`
+// cannot import out of the web app. `web/src/components/LogoMark.vue` is a
+// re-export of this file; every existing call site keeps working.
+// `scripts/dup-scan.mjs` names THIS path as the concept's home
+// (`brand-mark`), and `web/tests/quality/duplication.test.ts` fails on a
+// second hand-typed copy — for a reason with a date on it: the public share
+// page carried the pre-rebrand indigo for a whole release because its mark
+// was re-typed in Go rather than generated from here.
+//
+// gorunum:v1 — flat product blue, not the old indigo→violet gradient ("maviye
+// çekelim"). The fill is the palette's own `--fe-primary`, so the mark is
+// #2f6ceb on a light page and #5b8cff on a dark one, and it follows any theme
+// the product ever ships rather than being a colour no theme can reach. On a
+// public link with an instance accent set the same token carries the
+// operator's colour (`accentStyleOf`), which is the behaviour a brandable
+// mark should have.
+//
+// ⚠ The literal is a floor, not the value in use: `fill` has no inherited
+// value to fall back to, so an unstyled context (core's stylesheet missing)
+// would paint the mark BLACK rather than blue. Measured in the browser on
+// /admin/login, /admin/dashboard and /admin/about: the computed fill is the
+// token in all three, in both variants — the literal never renders today.
+//
+// The same blue is written out by hand in three static files that have no
+// token scope at all: web/public/favicon.svg, web/public/icons/icon.svg and
+// the `theme-color` meta in web/index.html (plus the PWA manifest's
+// theme_color in web/vite.config.ts). Change one, change all four.
+</script>
+
+<template>
+  <svg viewBox="0 0 32 32" aria-hidden="true">
+    <rect width="32" height="32" rx="7" fill="var(--fe-primary, #2f6ceb)" />
+    <path
+      d="M7 11a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V11z"
+      fill="none"
+      stroke="#fff"
+      stroke-width="1.8"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.5 17.5l3 2.5 5.5-6"
+      fill="none"
+      stroke="#fff"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/NFSExportsPanel.vue

@@ -16,6 +16,8 @@ import { computed, onMounted, ref } from 'vue';
 import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
 import type { NFSExport } from '../types/NFSExports';
 import { useLocale } from '../composables/useLocale';
+import DataTable, { type DataColumn } from './DataTable.vue';
+import type { ContextAction } from './ContextMenu.vue';
 import { useNFSExports } from '../composables/useNFSExports';
 import { resolveLocale } from '../locales/resolve';
 
@@ -94,6 +96,61 @@ async function mint() {
   }
 }
 
+/** The row's verbs, behind its one `Actions` control. ⚠ `revoke` keeps the
+ *  two-step confirmation it had as a loose button. */
+function rowActions(e: NFSExport): ContextAction[] {
+  /* The whole control used to be `:disabled="busy"`; the table draws the
+     control now, so each verb carries it. */
+  return [
+    {
+      key: 'toggle',
+      label: e.disabled_at ? t('conn.nfs.enable') : t('conn.nfs.disable'),
+      icon: e.disabled_at ? 'check' : 'lock',
+      disabled: busy.value,
+    },
+    {
+      key: 'revoke',
+      label: confirmRemove.value === e.id ? t('conn.nfs.confirm') : t('conn.nfs.revoke'),
+      icon: 'delete',
+      danger: true,
+      disabled: busy.value,
+    },
+  ];
+}
+
+/** The list's columns — the product's one table (DataTable). */
+const columns = computed<DataColumn<NFSExport>[]>(() => [
+  {
+    id: 'label',
+    label: t('conn.nfs.col.label'),
+    sortable: true,
+    width: 180,
+    format: (e) => e.label || t('conn.nfs.noLabel'),
+  },
+  { id: 'scope', label: t('conn.nfs.col.scope'), sortable: true, width: 180, format: scopeOf },
+  {
+    id: 'mode',
+    label: t('conn.nfs.col.mode'),
+    sortable: true,
+    width: 120,
+    format: (e) => (e.read_only ? t('conn.nfs.modeRead') : t('conn.nfs.modeWrite')),
+  },
+  {
+    id: 'lastUsed',
+    label: t('conn.nfs.col.lastUsed'),
+    sortable: true,
+    sortDir: 'desc',
+    width: 140,
+    format: (e) => (e.last_used_at ? shortDate(e.last_used_at) : t('conn.nfs.neverUsed')),
+    sortValue: (e) => (e.last_used_at ? new Date(e.last_used_at).getTime() : null),
+  },
+]);
+
+function onRowAction(key: string, e: NFSExport) {
+  if (key === 'toggle') void toggle(e);
+  else if (key === 'revoke') void drop(e);
+}
+
 async function toggle(e: NFSExport) {
   busy.value = true;
   try {
@@ -234,35 +291,26 @@ function scopeOf(e: NFSExport): string {
       </button>
     </div>
 
+    <!-- ⚠ THE table (DataTable — the explorer's own), not a table of its own:
+         reachable from the admin panel's Connections menu and from the
+         explorer, so it resizes, sorts, hides and moves columns and remembers
+         that on the account (`conn.nfs`), like every other table. (It once had
+         no scroll container at all, so its actions cell could not pin; the
+         one table owns that now.) -->
     <p v-if="loading" class="fe-s3keys__muted">…</p>
-    <table v-else-if="exports.length" class="fe-s3keys__table">
-      <thead>
-        <tr>
-          <th>{{ t('conn.nfs.col.label') }}</th>
-          <th>{{ t('conn.nfs.col.scope') }}</th>
-          <th>{{ t('conn.nfs.col.mode') }}</th>
-          <th>{{ t('conn.nfs.col.lastUsed') }}</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="e in exports" :key="e.id" :class="{ 'is-off': !!e.disabled_at }">
-          <td>{{ e.label || t('conn.nfs.noLabel') }}</td>
-          <td>{{ scopeOf(e) }}</td>
-          <td>{{ e.read_only ? t('conn.nfs.modeRead') : t('conn.nfs.modeWrite') }}</td>
-          <td>{{ e.last_used_at ? shortDate(e.last_used_at) : t('conn.nfs.neverUsed') }}</td>
-          <td class="fe-s3keys__actions">
-            <button class="fe-s3keys__link" :disabled="busy" @click="toggle(e)">
-              {{ e.disabled_at ? t('conn.nfs.enable') : t('conn.nfs.disable') }}
-            </button>
-            <button class="fe-s3keys__link is-danger" :disabled="busy" @click="drop(e)">
-              {{ confirmRemove === e.id ? t('conn.nfs.confirm') : t('conn.nfs.revoke') }}
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <p v-else-if="canMint" class="fe-s3keys__muted">{{ t('conn.nfs.empty') }}</p>
+    <DataTable
+      v-else
+      table-id="conn.nfs"
+      :columns="columns"
+      :rows="exports"
+      row-key="id"
+      :locale="locale"
+      :empty="t('conn.nfs.empty')"
+      :row-class="(e: NFSExport) => (e.disabled_at ? 'is-muted' : undefined)"
+      :row-actions="rowActions"
+      :row-actions-test-id="(e: NFSExport) => `nfs-export-actions-${e.id}`"
+      @row-action="(key: string, e: NFSExport) => onRowAction(key, e)"
+    />
   </section>
 </template>
 

package/src/components/OnboardingTour.vue

@@ -19,6 +19,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { inlineKeyStep } from '../lib/direction';
 import { shortcutHint } from '../composables/useKeyboardShortcuts';
 
 const props = defineProps<{
@@ -33,7 +34,8 @@ const emit = defineEmits<{
   (e: 'close'): void;
 }>();
 
-const { t } = useLocale(() => props.locale);
+// ⚠ RTL: `dir` goes on the teleported tour and orders its choices below.
+const { t, dir } = useLocale(() => props.locale);
 
 /* The tour teaches two keys by name, and both are remappable. Read them
  * from the registry so the sentence stays true for whoever is taking the
@@ -260,6 +262,14 @@ async function place() {
   const midX = clampX(rect.left + rect.width / 2 - cw / 2);
   const midY = clampY(rect.top + rect.height / 2 - ch / 2);
 
+  /* Beside it: toward the inline END first — right in LTR, LEFT in RTL, where
+     the reading eye goes next. ⚠ The spotlight and these numbers stay
+     PHYSICAL (they are the target's own viewport box); only which side is
+     tried first follows the direction. */
+  const toRight = { fits: sRight + GAP + cw <= vw - 12, left: sRight + GAP };
+  const toLeft = { fits: sLeft - GAP - cw >= 12, left: sLeft - GAP - cw };
+  const beside = dir.value === 'rtl' ? [toLeft, toRight] : [toRight, toLeft];
+
   let top: number;
   let left: number;
   if (sBottom + GAP + ch <= vh - 12) {
@@ -268,11 +278,11 @@ async function place() {
   } else if (sTop - GAP - ch >= 12) {
     top = sTop - GAP - ch;
     left = midX;
-  } else if (sRight + GAP + cw <= vw - 12) {
-    left = sRight + GAP;
+  } else if (beside[0].fits) {
+    left = beside[0].left;
     top = midY;
-  } else if (sLeft - GAP - cw >= 12) {
-    left = sLeft - GAP - cw;
+  } else if (beside[1].fits) {
+    left = beside[1].left;
     top = midY;
   } else {
     // Nothing fits — a target that fills the viewport. Clamp, and accept the
@@ -338,10 +348,11 @@ function onKey(e: KeyboardEvent) {
   if (e.key === 'Escape') {
     e.stopPropagation();
     skip();
-  } else if (e.key === 'ArrowRight' || e.key === 'Enter') {
+  } else if (e.key === 'Enter' || inlineKeyStep(e.key, dir.value) === 1) {
+    // ⚠ RTL: "forward" is the arrow that points the way the line reads — ←.
     e.preventDefault();
     next();
-  } else if (e.key === 'ArrowLeft') {
+  } else if (inlineKeyStep(e.key, dir.value) === -1) {
     e.preventDefault();
     back();
   }
@@ -399,6 +410,7 @@ const themeClass = computed(() => `fe-ctx-backdrop--theme-${props.theme || 'auto
       <div
         v-if="open && step"
         class="fe-tour"
+        :dir="dir"
         :class="themeClass"
         :data-prefers-dark="prefersDark ? '1' : '0'"
         role="dialog"

package/src/components/OperationsCenter.vue

@@ -65,6 +65,11 @@ const KIND_ICONS: Record<Operation['kind'], string> = {
   delete: 'M5 7h14M9 7V5h6v2M8 7l1 13h6l1-13',
   convert: 'M20 8A8 8 0 0 0 6 6L4 8M4 16a8 8 0 0 0 14 2l2-2M20 3v5h-5M4 21v-5h5',
   archive: 'M4 8V5h16v3zM5 8h14v12H5zM10 12h4',
+  /* "Empty the trash" — the bin, with the lines of what is going. */
+  trash: 'M5 7h14M9 7V5h6v2M8 7l1 13h6l1-13M10.5 11v5M13.5 11v5',
+  /* An app-plugin job — the puzzle piece its menu row wears (lib/actionIcons). */
+  plugin:
+    'M9.5 4.5a2 2 0 1 1 4 0h3a1.5 1.5 0 0 1 1.5 1.5v3a2 2 0 1 1 0 4v3a1.5 1.5 0 0 1-1.5 1.5h-3a2 2 0 1 1-4 0h-3A1.5 1.5 0 0 1 5 16v-3a2 2 0 1 1 0-4V6a1.5 1.5 0 0 1 1.5-1.5z',
 };
 
 function kindLabel(o: Operation): string {
@@ -75,9 +80,30 @@ function rowTitle(o: Operation): string {
   return o.name || kindLabel(o);
 }
 
+/**
+ * The words for an app job's output mode, or `''`. ⚠ Only the two WRITING
+ * modes get a chip: `none` is the normal case for a job that reports rather
+ * than produces (a probe, a notification), and labelling it "no output"
+ * would put a badge on almost every row for no information.
+ */
+function outputModeLabel(o: Operation): string {
+  if (o.outputMode === 'sibling') return t('plugin.output.sibling');
+  if (o.outputMode === 'version') return t('plugin.output.version');
+  return '';
+}
+
+function outputModeTitle(o: Operation): string {
+  if (o.outputMode === 'sibling') return t('plugin.output.sibling_title');
+  if (o.outputMode === 'version') return t('plugin.output.version_title');
+  return '';
+}
+
 function statusText(o: Operation): string {
   if (o.status === 'running') {
     if (o.queued) return t('opc.queued');
+    // A plugin job says what it is doing in its own words (`job_progress`
+    // message); that beats a bare count.
+    if (o.message) return o.message;
     if (o.totalBytes && o.totalBytes > 0) {
       return `${formatSize(o.uploadedBytes ?? 0)} / ${formatSize(o.totalBytes)}`;
     }
@@ -86,11 +112,16 @@ function statusText(o: Operation): string {
     }
     return t('opc.status.running');
   }
-  if (o.status === 'done') return t('opc.status.done');
+  if (o.status === 'done') return o.message || t('opc.status.done');
   if (o.status === 'aborted') return t('opc.status.aborted');
   return o.error || t('opc.status.error');
 }
 
+/** A finished job that produced files can be opened from its row. */
+function canOpen(o: Operation): boolean {
+  return o.status === 'done' && o.outputs.length > 0;
+}
+
 function chipText(o: Operation): string {
   return t(`opc.status.${o.status === 'running' ? 'running' : o.status}`);
 }
@@ -159,9 +190,24 @@ onBeforeUnmount(() => {
                   <div class="fe-opc__name" :title="rowTitle(o)">{{ rowTitle(o) }}</div>
                   <div class="fe-opc__sub">
                     <span class="fe-opc__kind">{{ kindLabel(o) }}</span>
+                    <template v-if="outputModeLabel(o)">
+                      <span class="fe-opc__dot" aria-hidden="true">·</span>
+                      <span class="fe-opc__outmode" :title="outputModeTitle(o)" data-testid="opc-output-mode">
+                        {{ outputModeLabel(o) }}
+                      </span>
+                    </template>
                     <span class="fe-opc__dot" aria-hidden="true">·</span>
                     <span class="fe-opc__state">{{ statusText(o) }}</span>
                   </div>
+                  <!-- An administrator's second line (lib/errorWords): the raw
+                       words behind the sentence above. Nobody else gets them. -->
+                  <div
+                    v-if="o.status === 'error' && o.errorDetail"
+                    class="fe-opc__sub fe-opc__sub--detail"
+                    data-testid="opc-error-detail"
+                  >
+                    {{ o.errorDetail }}
+                  </div>
                   <div
                     v-if="o.status === 'running' && o.percent !== null"
                     class="fe-opc__bar"
@@ -185,6 +231,13 @@ onBeforeUnmount(() => {
                     class="fe-opc__act"
                     @click="center.cancel(o.key)"
                   >{{ t('opc.cancel') }}</button>
+                  <button
+                    v-if="canOpen(o)"
+                    type="button"
+                    class="fe-opc__act"
+                    data-testid="opc-open"
+                    @click="center.open(o.key)"
+                  >{{ t('opc.open') }}</button>
                   <button
                     v-if="o.status === 'error' && o.retryable"
                     type="button"
@@ -232,10 +285,33 @@ onBeforeUnmount(() => {
                 </svg>
                 <div class="fe-opc__mid">
                   <div class="fe-opc__name" :title="rowTitle(o)">{{ rowTitle(o) }}</div>
+                  <!-- ⚠ The history row keeps the chip: in `version` mode
+                       "Open" lands on the file the job started from, and
+                       without these words that reads as "it did nothing". -->
+                  <div v-if="outputModeLabel(o)" class="fe-opc__sub">
+                    <span class="fe-opc__outmode" :title="outputModeTitle(o)" data-testid="opc-output-mode">
+                      {{ outputModeLabel(o) }}
+                    </span>
+                  </div>
                   <div v-if="o.status === 'error' && o.error" class="fe-opc__sub fe-opc__sub--err">
                     {{ o.error }}
                   </div>
+                  <!-- An administrator's second line: the raw words behind the
+                       sentence (lib/errorWords). Nobody else is given them. -->
+                  <div
+                    v-if="o.status === 'error' && o.errorDetail"
+                    class="fe-opc__sub fe-opc__sub--detail"
+                    data-testid="opc-error-detail"
+                  >
+                    {{ o.errorDetail }}
+                  </div>
                 </div>
+                <button
+                  v-if="canOpen(o)"
+                  type="button"
+                  class="fe-opc__act"
+                  @click="center.open(o.key)"
+                >{{ t('opc.open') }}</button>
                 <span class="fe-opc__chip" :class="`is-${o.status}`">{{ chipText(o) }}</span>
               </li>
             </ul>

package/src/components/PendingOpsTray.vue

@@ -16,26 +16,73 @@
 import { watch } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import type { PendingOp } from '../composables/usePendingOps';
-import type { OperationsStore, OperationStatus } from '../composables/useOperations';
+import type { OperationKind, OperationsStore, OperationStatus } from '../composables/useOperations';
 import { opPercent } from '../lib/opProgress';
+import { opFailure } from '../lib/errorWords';
+import { useLocale } from '../composables/useLocale';
 
 const props = defineProps<{
   ops: PendingOp[];
   /** Kept for mount compatibility — strings now render in OperationsCenter. */
   locale: LocaleCode;
   center: OperationsStore;
+  /**
+   * An app-plugin job's output mode, as the host resolves it (the explorer
+   * reads the cached actions list). ⚠ A resolver rather than a field on the
+   * row: the ops endpoint does not carry it, so only a caller that holds the
+   * actions list can answer — and one that does not simply draws no chip.
+   */
+  outputModeOf?: (op: PendingOp) => string | undefined;
+  /** May the viewer administer this instance? Then a failure's raw words are
+   *  shown as a second line (lib/errorWords); nobody else ever sees them. */
+  callerAdmin?: boolean;
 }>();
 
+const { t } = useLocale(() => props.locale);
+
+/** A failed op, said — lib/errorWords `opFailure`, the same call the
+ *  explorer's toast makes. */
+function failureOf(op: PendingOp) {
+  return opFailure(op, t, { callerAdmin: props.callerAdmin === true });
+}
+
 const emit = defineEmits<{
   (e: 'dismiss', id: number): void;
+  /** A plugin job's Cancel — the explorer posts `opsCancel`. */
+  (e: 'cancel', id: number): void;
+  /** "Open" on a finished job: reveal this output path in the listing. */
+  (e: 'open', id: number, path: string): void;
 }>();
 
 function mapStatus(op: PendingOp): OperationStatus {
   if (op.status === 'done') return 'done';
   if (op.status === 'error') return 'error';
+  if (op.status === 'cancelled') return 'aborted';
   return 'running'; // pending | running
 }
 
+const DRAWN_KINDS: ReadonlySet<string> = new Set(['copy', 'move', 'delete', 'plugin']);
+
+/** A queue kind the center can draw. Anything it has no glyph for is shown as
+ *  a generic job (`plugin`), never folded into delete. */
+function mapKind(op: PendingOp): OperationKind {
+  if (op.op_type === 'trash-empty') return 'trash';
+  return (DRAWN_KINDS.has(op.op_type) ? op.op_type : 'plugin') as OperationKind;
+}
+
+function isPluginJob(op: PendingOp): boolean {
+  return op.op_type === 'plugin';
+}
+
+/** Who may stop a row: a plugin job's starter (the server answers anyone
+ *  else 403), and an "empty the trash" — which only an administrator
+ *  starts — for an administrator. */
+function mayCancel(op: PendingOp): boolean {
+  if (op.status !== 'pending' && op.status !== 'running') return false;
+  if (isPluginJob(op)) return true;
+  return op.op_type === 'trash-empty' && props.callerAdmin === true;
+}
+
 /* issue #27 — bytes when a cross-storage transfer reports them, no fake 0%
  * otherwise; the rule is shared with the admin tray (lib/opProgress). */
 const percentOf = (op: PendingOp): number | null => opPercent(op);
@@ -48,19 +95,26 @@ watch(
       ops.map((op) => ({
         input: {
           id: op.id,
-          kind: op.op_type,
-          name: op.target_path || op.source_dir || '',
+          kind: mapKind(op),
+          /* A trash empty names no file: its kind is its title. */
+          name: op.op_type === 'trash-empty' ? '' : op.label || op.target_path || op.source_dir || '',
           percent: percentOf(op),
           status: mapStatus(op),
-          error: op.error_message,
+          error: op.status === 'error' ? failureOf(op).text : null,
+          errorDetail: op.status === 'error' ? (failureOf(op).detail ?? null) : null,
           queued: op.status === 'pending',
           doneCount: op.progress_done,
           totalCount: op.progress_total,
-          cancellable: false,
+          cancellable: mayCancel(op),
           retryable: false,
+          message: op.message ?? null,
+          outputs: (op.outputs ?? []).map((o) => o.path),
+          outputMode: (isPluginJob(op) ? props.outputModeOf?.(op) : undefined) ?? null,
         },
         actions: {
           dismiss: () => emit('dismiss', op.id),
+          cancel: () => emit('cancel', op.id),
+          open: (path: string) => emit('open', op.id, path),
         },
       })),
     );

package/src/components/PresenceBar.vue

@@ -71,7 +71,7 @@ function label(u: PresenceUser): string {
         :title="label(u)"
       >
         <PresenceAvatar :user="u" />
-        <span class="fx-presence-chip-name">{{ u.name }}</span>
+        <span class="fx-presence-chip-name"><bdi>{{ u.name }}</bdi></span>
         <span v-if="u.file" class="fx-presence-chip-file">· {{ u.file }}</span>
       </span>
     </div>
@@ -131,7 +131,7 @@ function label(u: PresenceUser): string {
   justify-content: center;
   width: 1.5rem;
   height: 1.5rem;
-  margin-left: -0.4rem;
+  margin-inline-start: -0.4rem;
   border-radius: 9999px;
   border: 2px solid var(--fx-presence-ring, #ffffff);
   color: #fff;
@@ -141,7 +141,7 @@ function label(u: PresenceUser): string {
   user-select: none;
 }
 .fx-presence-avatar:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 /* A photo fills the circle; the identity colour stays as the ring backdrop so
    a picture with transparency still reads as that person. */
@@ -157,7 +157,7 @@ function label(u: PresenceUser): string {
 }
 .fx-presence-dot {
   position: absolute;
-  right: -1px;
+  inset-inline-end: -1px;
   bottom: -1px;
   width: 0.5rem;
   height: 0.5rem;
@@ -166,7 +166,7 @@ function label(u: PresenceUser): string {
   border: 1.5px solid var(--fx-presence-ring, #ffffff);
 }
 .fx-presence-more {
-  margin-left: 0.15rem;
+  margin-inline-start: 0.15rem;
   font-size: 0.7rem;
   color: rgb(113 113 122); /* zinc-500 */
 }
@@ -188,7 +188,7 @@ function label(u: PresenceUser): string {
   align-items: center;
   gap: 0.35rem;
   flex: 0 0 auto;
-  padding: 0.15rem 0.5rem 0.15rem 0.2rem;
+  padding-block: 0.15rem; padding-inline: 0.2rem 0.5rem;
   border-radius: 9999px;
   background: rgb(244 244 245); /* zinc-100 */
   font-size: 0.75rem;
@@ -196,7 +196,7 @@ function label(u: PresenceUser): string {
   white-space: nowrap;
 }
 .fx-presence-chip .fx-presence-avatar {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .fx-presence-chip-name {
   font-weight: 500;

package/src/components/ProductVersion.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * ProductVersion — `filex 0.43.0`, as a quiet line (lib/productVersion).
+ *
+ * The one piece every place that shows the version draws: the admin panel's
+ * account menu, the explorer's avatar menu, the user settings dialog. Written
+ * once here so the desktop shell (which draws the web app) and an embedding
+ * host (which draws its own chrome and can mount this) print the same line.
+ *
+ * ⚠ `<bdi>`: a Latin name and a dotted number inside a right-to-left menu
+ * must keep their own order, and the line still starts on the menu's start
+ * side. `dir="ltr"` on the element would flip its alignment as well.
+ *
+ * ⚠ Its rules are `.fe-version` in styles/base.css, not a `<style>` block
+ * here: a component's own styles reach only a bundle that imports it, and
+ * the two shipped stylesheets drift (lesson #416).
+ */
+import { computed } from 'vue';
+import { productVersionLine } from '../lib/productVersion';
+
+const props = defineProps<{
+  /** The server's version string (capabilities). Unknown → nothing drawn. */
+  version?: string | null;
+}>();
+
+const line = computed(() => productVersionLine(props.version));
+</script>
+
+<template>
+  <p v-if="line" class="fe-version" data-testid="product-version"><bdi>{{ line }}</bdi></p>
+</template>

package/src/components/QuickLook.vue

@@ -26,6 +26,7 @@ import { computed, onBeforeUnmount, watch } from 'vue';
 import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { inlineKeyStep } from '../lib/direction';
 import { eventMatchesShortcut, shortcutHint } from '../composables/useKeyboardShortcuts';
 import PreviewModal from '../modals/PreviewModal.vue';
 
@@ -70,7 +71,9 @@ const emit = defineEmits<{
   (e: 'starred', value: boolean): void;
 }>();
 
-const { t } = useLocale(() => props.locale);
+// ⚠ RTL: `dir` on the teleported hint, and ← is "next" in a right-to-left
+// interface (the next file's chevron is on the left there).
+const { t, dir } = useLocale(() => props.locale);
 
 function inFormControl(target: EventTarget | null): boolean {
   const el = target as HTMLElement | null;
@@ -114,19 +117,11 @@ function onKeydown(e: KeyboardEvent) {
   }
 
   if (e.ctrlKey || e.metaKey || e.altKey) return;
-  switch (e.key) {
-    case 'ArrowRight':
-    case 'ArrowDown':
-      e.preventDefault();
-      e.stopPropagation();
-      emit('nav', 1);
-      break;
-    case 'ArrowLeft':
-    case 'ArrowUp':
-      e.preventDefault();
-      e.stopPropagation();
-      emit('nav', -1);
-      break;
+  const step = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : inlineKeyStep(e.key, dir.value);
+  if (step) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('nav', step);
   }
 }
 
@@ -200,6 +195,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown, true));
       <div
         v-if="open"
         class="fe fe-ql-hint"
+        :dir="dir"
         :class="{
           'fe--theme-light': theme === 'light',
           'fe--theme-dark': theme === 'dark',