@brftech/filex-core 0.42.1 → 0.43.0

package/src/modals/ConvertModal.vue

@@ -29,6 +29,8 @@ const props = defineProps<{
   /** Upload the produced File into the current folder (api.uploadMultipart bound to dir). */
   upload: (file: File) => Promise<void>;
   locale: LocaleCode;
+  /** For an administrator: this converter is being retired, and by what. */
+  adminNote?: string;
 }>();
 
 const { t } = useLocale(() => props.locale);
@@ -96,10 +98,34 @@ function send(cmd: string, extra: Record<string, unknown> = {}, transfer: Transf
   });
 }
 
+/**
+ * ⚠ The converter has to SAY it is there. The iframe posts `ready` when it
+ * has loaded; a converter that is down never does, and this modal used to sit
+ * on "Loading the converter…" for ever. 20 s is far longer than a healthy
+ * converter needs to boot and short enough that a person is not left
+ * wondering.
+ */
+const READY_TIMEOUT_MS = 20000;
+let readyTimer: ReturnType<typeof setTimeout> | undefined;
+
+/** Every failure a person sees here is a sentence (owner, 2026-09-21: never
+ *  the raw status or body — which is what `fetchBytes`/`upload` errors carry,
+ *  `${status} ${statusText} — <json>`). The detail goes to the console. */
+function failWith(key: string, detail: unknown): void {
+  console.warn('[filex] convert:', key, detail);
+  error.value = t(key);
+  status.value = 'error';
+}
+
 function onMessage(ev: MessageEvent) {
   const d = ev.data;
   if (!d || d.source !== 'convert-embed') return;
-  if (d.event === 'ready') { void loadFormats(); return; }
+  if (d.event === 'ready') {
+    if (readyTimer) clearTimeout(readyTimer);
+    readyTimer = undefined;
+    void loadFormats();
+    return;
+  }
   const p = pending.get(d.id);
   if (!p) return;
   pending.delete(d.id);
@@ -115,8 +141,7 @@ async function loadFormats() {
       error.value = t('convert.unsupported_input');
     }
   } catch (e) {
-    error.value = (e as Error).message;
-    status.value = 'error';
+    failWith('convert.unreachable', e);
   }
 }
 
@@ -124,8 +149,10 @@ async function doConvert() {
   if (!selectedTo.value || !fromFmt.value) return;
   status.value = 'converting';
   error.value = null;
+  let stage: 'read' | 'convert' | 'save' = 'read';
   try {
     const buf = await props.fetchBytes();
+    stage = 'convert';
     const res = await send(
       'convert',
       { name: props.fileName, bytes: buf, fromIndex: fromFmt.value.index, toIndex: selectedTo.value.index },
@@ -135,17 +162,28 @@ async function doConvert() {
     const ext = res.ext || selectedTo.value.ext || selectedTo.value.format;
     const outName = `${base}.${ext}`;
     const file = new File([res.bytes], outName, { type: selectedTo.value.mime || 'application/octet-stream' });
+    stage = 'save';
     await props.upload(file);
     status.value = 'done';
     emit('done', outName);
   } catch (e) {
-    error.value = (e as Error).message;
-    status.value = 'error';
+    failWith(
+      stage === 'read' ? 'convert.read_failed' : stage === 'save' ? 'convert.save_failed' : 'convert.failed',
+      e,
+    );
   }
 }
 
-onMounted(() => window.addEventListener('message', onMessage));
-onBeforeUnmount(() => window.removeEventListener('message', onMessage));
+onMounted(() => {
+  window.addEventListener('message', onMessage);
+  readyTimer = setTimeout(() => {
+    if (status.value === 'loading') failWith('convert.unreachable', 'no ready message');
+  }, READY_TIMEOUT_MS);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('message', onMessage);
+  if (readyTimer) clearTimeout(readyTimer);
+});
 </script>
 
 <template>
@@ -165,10 +203,18 @@ onBeforeUnmount(() => window.removeEventListener('message', onMessage));
         </button>
       </header>
 
+      <p v-if="adminNote" class="filex-cv__note" data-testid="convert-legacy-note">{{ adminNote }}</p>
+
       <div v-if="status === 'loading'" class="filex-cv__msg">
         {{ t('convert.loading') }}
       </div>
 
+      <!-- The converter never answered: there is nothing to pick from, so the
+           sentence stands alone rather than above an empty format list. -->
+      <div v-else-if="status === 'error' && formats.length === 0" class="filex-cv__msg filex-cv__err">
+        {{ error }}
+      </div>
+
       <div v-else-if="status === 'done'" class="filex-cv__msg filex-cv__ok">
         <p>
           <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
@@ -195,7 +241,7 @@ onBeforeUnmount(() => window.removeEventListener('message', onMessage));
             @click="selectedTo = f"
           >
             <b>{{ (f.ext || f.format).toUpperCase() }}</b>
-            <small>{{ f.name }}</small>
+            <small><bdi>{{ f.name }}</bdi></small>
           </button>
           <div v-if="toList.length === 0" class="filex-cv__empty">
             {{ t('convert.no_format') }}
@@ -253,6 +299,11 @@ onBeforeUnmount(() => window.removeEventListener('message', onMessage));
 .filex-cv__x .fe-aicon { color: currentColor; }
 .filex-cv__ok .fe-icon { display: inline-flex; vertical-align: -0.2em; }
 .filex-cv__msg { padding: 28px; text-align: center; color: var(--fe-text-muted, #5a6475); }
+.filex-cv__note {
+  margin: 12px 16px 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45;
+  background: var(--fe-bg-elev, #f7f8fa); color: var(--fe-text-muted, #5a6475);
+  border: 1px solid var(--fe-border, #e2e6ed);
+}
 .filex-cv__ok { color: #059669; }
 .filex-cv__src { padding: 12px 16px 0; font-size: 13px; color: var(--fe-text-muted, #5a6475); }
 .filex-cv__search {
@@ -266,7 +317,7 @@ onBeforeUnmount(() => window.removeEventListener('message', onMessage));
 }
 .filex-cv__fmt {
   display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
-  padding: 8px 10px; cursor: pointer; text-align: left;
+  padding: 8px 10px; cursor: pointer; text-align: start;
   border: 1px solid var(--fe-border, #e2e6ed); border-radius: 8px;
   background: var(--fe-bg-elev, #f7f8fa); color: inherit;
 }
@@ -274,11 +325,11 @@ onBeforeUnmount(() => window.removeEventListener('message', onMessage));
 .filex-cv__fmt.is-sel { border-color: #44c878; background: rgba(68, 200, 120, 0.12); }
 .filex-cv__empty { grid-column: 1 / -1; text-align: center; color: var(--fe-text-muted, #5a6475); padding: 16px; }
 .filex-cv__err { padding: 0 16px; color: var(--fe-danger, #dc2626); font-size: 13px; }
-.filex-cv__foot { padding: 12px 16px; border-top: 1px solid var(--fe-border, #e2e6ed); text-align: right; }
+.filex-cv__foot { padding: 12px 16px; border-top: 1px solid var(--fe-border, #e2e6ed); text-align: end; }
 .filex-cv__convert {
   padding: 8px 18px; border: 0; border-radius: 8px; cursor: pointer;
   background: #44c878; color: #03200f; font-weight: 600; font-size: 13px;
 }
 .filex-cv__convert:disabled { opacity: 0.5; cursor: default; }
-.filex-cv__frame { position: absolute; width: 0; height: 0; border: 0; left: -9999px; }
+.filex-cv__frame { position: absolute; width: 0; height: 0; border: 0; inset-inline-start: -9999px; }
 </style>

package/src/modals/DestinationPickerModal.vue

@@ -42,7 +42,7 @@ import Modal from './Modal.vue';
 import { useLocale } from '../composables/useLocale';
 import type { FileApi, ManagerResponse } from '../composables/useFileApi';
 import type { LocaleCode } from '../types/ExplorerConfig';
-import { iconTile } from '../lib/fileIcons';
+import { fileIconTile, iconTile } from '../lib/fileIcons';
 import {
   DRIVES,
   type DestinationRow,
@@ -72,6 +72,13 @@ const props = defineProps<{
   moving?: string[];
   /** Titles the dialog and names its confirm button. */
   mode?: 'move' | 'copy' | 'choose';
+  /**
+   * What the answer is. `dir` (the default) is the folder you are standing in;
+   * `file` lists the files too and the answer is the one you tick — an app
+   * plugin's `file-chooser` asks for this. A file pick has no write check:
+   * the chooser reads, it never writes.
+   */
+  pick?: 'dir' | 'file';
   /** The parent is running the operation: the dialog stays up but inert. */
   busy?: boolean;
 }>();
@@ -91,6 +98,10 @@ const here = ref<ManagerResponse | undefined>(undefined);
 const failed = ref(false);
 
 const multiDrive = computed(() => (props.storages?.length ?? 0) > 1);
+const drivesLabel = computed(() => t('destpicker.drives'));
+const pickingFile = computed(() => props.pick === 'file');
+/** The file ticked in this folder — file pick only. */
+const picked = ref<string | null>(null);
 
 /**
  * One listing cache for the life of the dialog.
@@ -129,6 +140,7 @@ async function load(path: string): Promise<ManagerResponse | undefined> {
 async function goTo(path: string): Promise<void> {
   at.value = path;
   failed.value = false;
+  picked.value = null;
   if (path === DRIVES) {
     here.value = undefined;
     rows.value = driveRows(props.storages, props.moving);
@@ -142,7 +154,7 @@ async function goTo(path: string): Promise<void> {
   loading.value = false;
   here.value = resp;
   failed.value = !resp;
-  rows.value = destinationRows(resp?.files, props.moving);
+  rows.value = destinationRows(resp?.files, props.moving, { files: pickingFile.value });
 }
 
 const parent = computed(() => parentOfWire(at.value, multiDrive.value));
@@ -158,9 +170,11 @@ const hereWritable = computed(() => {
   return permAllowsWrite(here.value.perm as string | undefined);
 });
 
-const canChoose = computed(
-  () => !props.busy && at.value !== DRIVES && hereWritable.value && hereBlocked.value === null,
-);
+const canChoose = computed(() => {
+  if (props.busy || at.value === DRIVES) return false;
+  if (pickingFile.value) return picked.value !== null;
+  return hereWritable.value && hereBlocked.value === null;
+});
 
 /**
  * Is the line under the list a REFUSAL or a prompt?
@@ -170,11 +184,15 @@ const canChoose = computed(
  * colour, which is what happened the first time this was drawn, makes the very
  * first screen of the dialog look like something has gone wrong.
  */
-const reasonIsRefusal = computed(() => at.value !== DRIVES);
+const reasonIsRefusal = computed(() => at.value !== DRIVES && !(pickingFile.value && !failed.value));
 
 /** The one line under the list that says why Choose is off, if it is. */
 const reason = computed<string>(() => {
   if (at.value === DRIVES) return t('destpicker.pick_a_drive');
+  if (pickingFile.value) {
+    if (failed.value) return t('destpicker.unreadable');
+    return picked.value === null ? t('destpicker.pick_a_file') : '';
+  }
   if (hereBlocked.value === 'self') return t('destpicker.blocked.self');
   if (hereBlocked.value === 'descendant') return t('destpicker.blocked.descendant');
   if (failed.value) return t('destpicker.unreadable');
@@ -185,16 +203,28 @@ const reason = computed<string>(() => {
 const title = computed(() => {
   if (props.mode === 'move') return t('destpicker.title.move');
   if (props.mode === 'copy') return t('destpicker.title.copy');
-  return t('destpicker.title.choose');
+  return pickingFile.value ? t('destpicker.title.choose_file') : t('destpicker.title.choose');
 });
 
 const confirmLabel = computed(() => {
   if (props.mode === 'move') return t('destpicker.confirm.move');
   if (props.mode === 'copy') return t('destpicker.confirm.copy');
-  return t('destpicker.confirm.choose');
+  return pickingFile.value ? t('destpicker.confirm.choose_file') : t('destpicker.confirm.choose');
 });
 
+/** What the line under the list names: the ticked file, else the folder. */
+const targetName = computed(() =>
+  pickingFile.value && picked.value !== null
+    ? labelOfWire(picked.value, drivesLabel.value)
+    : labelOfWire(at.value, drivesLabel.value),
+);
+
+function rowIcon(row: DestinationRow): string {
+  return row.kind === 'file' ? fileIconTile({ type: 'file', basename: row.label }) : iconTile('folder');
+}
+
 function rowTitle(row: DestinationRow): string {
+  if (row.kind === 'file') return row.label;
   if (row.blocked === 'self') return t('destpicker.blocked.self');
   if (row.blocked === 'descendant') return t('destpicker.blocked.descendant');
   if (!row.writable) return t('destpicker.readonly');
@@ -202,6 +232,11 @@ function rowTitle(row: DestinationRow): string {
 }
 
 function openRow(row: DestinationRow): void {
+  // A file is the answer, not a place to go.
+  if (row.kind === 'file') {
+    picked.value = row.path;
+    return;
+  }
   // A blocked row is a dead end — everything under it is blocked too — so
   // walking into it would be navigation that cannot end anywhere.
   if (row.blocked) return;
@@ -210,10 +245,8 @@ function openRow(row: DestinationRow): void {
 
 function choose(): void {
   if (!canChoose.value) return;
-  emit('pick', at.value);
+  emit('pick', pickingFile.value && picked.value !== null ? picked.value : at.value);
 }
-
-const drivesLabel = computed(() => t('destpicker.drives'));
 </script>
 
 <template>
@@ -278,22 +311,32 @@ const drivesLabel = computed(() => t('destpicker.drives'));
       <ul class="fe-destpick__rows" data-testid="destpicker-rows">
         <li v-if="loading" class="fe-destpick__note">{{ t('destpicker.loading') }}</li>
         <li v-else-if="failed" class="fe-destpick__note">{{ t('destpicker.unreadable') }}</li>
-        <li v-else-if="!rows.length" class="fe-destpick__note">{{ t('destpicker.empty') }}</li>
+        <li v-else-if="!rows.length" class="fe-destpick__note">
+          {{ pickingFile ? t('destpicker.empty_files') : t('destpicker.empty') }}
+        </li>
         <li v-for="row in rows" :key="row.path">
           <button
             type="button"
             class="fe-destpick__row"
-            :class="{ 'is-locked': !row.writable, 'is-blocked': !!row.blocked }"
+            :class="{
+              'is-locked': !row.writable,
+              'is-blocked': !!row.blocked,
+              'is-file': row.kind === 'file',
+              'is-picked': row.kind === 'file' && picked === row.path,
+            }"
             :disabled="!!row.blocked"
             :title="rowTitle(row)"
+            :aria-pressed="row.kind === 'file' ? picked === row.path : undefined"
             :data-testid="'destpicker-row-' + row.label"
             @click="openRow(row)"
           >
-            <span class="fe-destpick__rowicon" aria-hidden="true" v-html="iconTile('folder')"></span>
-            <span class="fe-destpick__rowname">{{ row.label }}</span>
+            <!-- eslint-disable-next-line vue/no-v-html -- static markup from lib/fileIcons -->
+            <span class="fe-destpick__rowicon" aria-hidden="true" v-html="rowIcon(row)"></span>
+            <span class="fe-destpick__rowname"><bdi>{{ row.label }}</bdi></span>
             <span v-if="row.blocked" class="fe-destpick__rowtag">{{ t('destpicker.tag.blocked') }}</span>
             <span v-else-if="!row.writable" class="fe-destpick__rowtag">{{ t('destpicker.readonly') }}</span>
             <svg
+              v-if="row.kind === 'dir'"
               class="fe-destpick__rowinto"
               viewBox="0 0 24 24"
               fill="none"
@@ -319,7 +362,7 @@ const drivesLabel = computed(() => t('destpicker.drives'));
         {{ reason }}
       </p>
       <p v-else class="fe-destpick__target" data-testid="destpicker-target">
-        {{ t('destpicker.target', { name: labelOfWire(at, drivesLabel) }) }}
+        {{ t('destpicker.target', { name: targetName }) }}
       </p>
     </div>
 

package/src/modals/Modal.vue

@@ -1,20 +1,47 @@
 <script setup lang="ts">
 /**
  * Modal — tiny headless wrapper. Backdrop + centered card + ESC + autofocus.
+ *
+ * ⚠⚠ Every dialog the explorer draws is this one — rename, new folder, the
+ * delete confirmation, and the frame EVERY app plugin's screen opens in
+ * (PluginViewModal). What it does on Escape, on a click outside the card
+ * and with the focus is therefore what all of them do, and until v0.43.0
+ * it did none of the three for a dialog MOUNTED open:
+ *
+ *   • the keys and the focus were wired in a `watch` on `open` without
+ *     `immediate`, so a dialog created with `open` already true (the plugin
+ *     frame is `v-if` + `:open="true"`) never heard Escape and never took
+ *     the focus — the converter's dialog stayed up on Escape while the share
+ *     dialog next to it closed (release-candidate sweep, 2026-09-21);
+ *   • `closeOnBackdrop` was read as `!== false`, but Vue casts an absent
+ *     boolean prop to `false`, so NO dialog closed on an outside click.
  */
 import { watch, onBeforeUnmount, ref } from 'vue';
+import { isTopModal, popModal, pushModal } from '../lib/modalStack';
+import { useLocale } from '../composables/useLocale';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  /** The explorer's language, for the close button's name. Absent = English. */
+  locale?: string;
   open: boolean;
   title?: string;
   size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** A click outside the card closes the dialog (the default, as the share
+   *  dialog and the admin panel's dialogs do). `false` for a dialog that
+   *  must be answered — the recovery key a person has to write down. */
   closeOnBackdrop?: boolean;
   /** When true, drop the dialog chrome (backdrop tint, header, footer,
    *  centered card with border-radius) and render the slot full-bleed.
    *  Used by the standalone /files/edit route where the browser tab IS
    *  the container — a modal frame on top of it just steals real estate
-   *  from the editor. ESC + emit('close') still wire through so the
-   *  parent route can window.close() the tab. */
+   *  from the editor.
+   *
+   *  ⚠ Escape does NOT close a chromeless dialog. There it would close the
+   *  TAB (the route answers `close` with window.close()), and Escape is a
+   *  key editors use for themselves — dismissing a suggestion list in the
+   *  text editor must not throw the document away. It never did in
+   *  practice (the route mounts the dialog open, see above); now it is a
+   *  rule rather than an accident. */
   chromeless?: boolean;
   /**
    * gorunum:v1 — full-bleed overlay. Like `chromeless` it drops the dialog
@@ -35,7 +62,10 @@ const props = defineProps<{
    *  rather than a child of the parent component, so plain DOM
    *  inheritance isn't always enough). */
   theme?: 'light' | 'dark' | 'auto';
-}>();
+}>(), {
+  closeOnBackdrop: true,
+});
+const { t } = useLocale(() => props.locale ?? 'en');
 
 const emit = defineEmits<{
   (e: 'close'): void;
@@ -54,29 +84,74 @@ const FOCUSABLE =
   'input:not([disabled]),select:not([disabled]),textarea:not([disabled]),' +
   'button:not([disabled]),a[href],[tabindex]:not([tabindex="-1"])';
 
+/** This dialog's place in lib/modalStack: only the top one answers keys. */
+const me = Symbol('fe-modal');
+let wired = false;
+let focusTimer: ReturnType<typeof setTimeout> | undefined;
+
+/**
+ * The first thing to focus: something in the BODY when there is one, so a
+ * form's first box — or a plugin screen's first choice — has the cursor,
+ * not the header's ×; then the footer; then anything in the card (the ×).
+ */
+function focusFirst() {
+  const card = cardEl.value;
+  if (!card) return;
+  const within = (sel: string) => card.querySelector(sel)?.querySelector<HTMLElement>(FOCUSABLE) ?? null;
+  const target = within('.fe-modal__body') ?? within('.fe-modal__actions') ?? card.querySelector<HTMLElement>(FOCUSABLE);
+  target?.focus();
+}
+
+function wire() {
+  if (wired) return;
+  wired = true;
+  prevFocus = (document.activeElement as HTMLElement | null) ?? null; /* wiring:c4 */
+  pushModal(me);
+  document.addEventListener('keydown', onKey);
+  // ⚠ The handle is kept and cleared on unwire: a dialog closed (or torn
+  // down, as a test environment is) inside these 30 ms must not reach for a
+  // document that is gone — vitest reported exactly that as an unhandled
+  // "document is not defined" once dialogs created open were wired.
+  focusTimer = setTimeout(() => {
+    focusTimer = undefined;
+    if (typeof document === 'undefined') return;
+    // Only if the focus is not already inside (a component that focuses its
+    // own field on mount keeps it).
+    if (wired && !cardEl.value?.contains(document.activeElement)) focusFirst();
+  }, 30);
+}
+
+function unwire() {
+  if (!wired) return;
+  wired = false;
+  if (focusTimer !== undefined) {
+    clearTimeout(focusTimer);
+    focusTimer = undefined;
+  }
+  document.removeEventListener('keydown', onKey);
+  popModal(me);
+  /* wiring:c4 — return focus to the opener. */
+  prevFocus?.focus?.();
+  prevFocus = null;
+}
+
+// ⚠ `immediate`: a dialog created open (v-if + :open="true", which is how
+// the explorer mounts every plugin screen) must be wired exactly like one
+// that opens later. See the header for what happened without it.
 watch(
   () => props.open,
-  (v) => {
-    if (v) {
-      prevFocus = (document.activeElement as HTMLElement | null) ?? null; /* wiring:c4 */
-      document.addEventListener('keydown', onKey);
-      setTimeout(() => {
-        const focusable = cardEl.value?.querySelector<HTMLElement>(FOCUSABLE);
-        focusable?.focus();
-      }, 30);
-    } else {
-      document.removeEventListener('keydown', onKey);
-      /* wiring:c4 — return focus to the opener. */
-      prevFocus?.focus?.();
-      prevFocus = null;
-    }
-  },
+  (v) => (v ? wire() : unwire()),
+  { immediate: true },
 );
 
-onBeforeUnmount(() => document.removeEventListener('keydown', onKey));
+// Removed while still open (the parent's v-if went false first): the keys
+// come off and the focus goes home, as if it had closed.
+onBeforeUnmount(unwire);
 
 function onKey(e: KeyboardEvent) {
+  if (!isTopModal(me)) return;
   if (e.key === 'Escape') {
+    if (props.chromeless) return;
     emit('close');
     return;
   }
@@ -100,8 +175,22 @@ function onKey(e: KeyboardEvent) {
   }
 }
 
-function onBackdrop() {
-  if (props.closeOnBackdrop !== false) emit('close');
+/**
+ * A click outside the card closes the dialog — but only a click that also
+ * STARTED outside it. A drag that selects text in a field and is released
+ * over the backdrop fires `click` on the backdrop (the common ancestor), and
+ * closing then would throw away what was being typed.
+ */
+let downOnBackdrop = false;
+function onBackdropDown(e: PointerEvent) {
+  downOnBackdrop = e.target === e.currentTarget;
+}
+function onBackdrop(e: MouseEvent) {
+  const started = downOnBackdrop;
+  downOnBackdrop = false;
+  if (!props.closeOnBackdrop || props.chromeless) return;
+  if (e.target !== e.currentTarget || !started) return;
+  emit('close');
 }
 </script>
 
@@ -117,6 +206,7 @@ function onBackdrop() {
         theme === 'dark' ? 'fe--theme-dark' : '',
       ]"
       role="presentation"
+      @pointerdown="onBackdropDown"
       @click="onBackdrop"
     >
       <div
@@ -138,7 +228,7 @@ function onBackdrop() {
           <button
             type="button"
             class="fe-modal__close"
-            aria-label="Close"
+            :aria-label="t('modal.close')"
             @click="emit('close')"
           >×</button>
         </header>

package/src/modals/NewDocumentModal.vue

@@ -59,6 +59,7 @@ import { iconTile, iconFamilyFor, typeLabelFor } from '../lib/fileIcons';
 import { crumbsOfWire, permAllowsWrite, splitWire } from '../lib/destinationTree';
 import Modal from './Modal.vue';
 import DestinationPickerModal from './DestinationPickerModal.vue';
+import { inlineKeyStep } from '../lib/direction';
 
 const props = defineProps<{
   open: boolean;
@@ -79,6 +80,9 @@ const props = defineProps<{
   /** Resolved by the host: is there a usable OnlyOffice / drawio? */
   onlyOfficeReady?: boolean;
   drawioReady?: boolean;
+  /** Could this person set a missing service up (`capabilities.caller_admin`)?
+   *  Adds WHERE to the line that says which families are missing. */
+  canConfigure?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -87,7 +91,7 @@ const emit = defineEmits<{
   (e: 'error', payload: { message: string }): void;
 }>();
 
-const { t } = useLocale(() => props.locale);
+const { t, dir } = useLocale(() => props.locale);
 
 /* ================================================================== types */
 
@@ -117,9 +121,13 @@ const withheld = computed(() => {
  * ("...here.Diagrams need...") — measured in a browser, invisible in a unit
  * test that asserts on textContent.
  */
-const withheldText = computed(() =>
-  withheld.value.map((svc) => t('newdoc.withheld.' + svc)).join(' '),
-);
+const withheldText = computed(() => {
+  const parts = withheld.value.map((svc) => t('newdoc.withheld.' + svc));
+  /* Someone who can fix it is told where (the owner's rule for a missing
+     service, lib/serviceGate); everybody else reads only what is missing. */
+  if (parts.length && props.canConfigure) parts.push(t('newdoc.withheld_admin'));
+  return parts.join(' ');
+});
 
 /** Sections, in the order the server listed them. */
 const groups = computed(() => {
@@ -313,8 +321,10 @@ function onTileKey(e: KeyboardEvent, ext: string) {
   const list = offered.value.map((ty) => ty.ext);
   const i = list.indexOf(ext);
   let next = -1;
-  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (i + 1) % list.length;
-  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (i - 1 + list.length) % list.length;
+  // ⚠ RTL: ← / → move the way they point — in a right-to-left grid the next
+  // tile is to the LEFT (lib/direction).
+  const step = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : inlineKeyStep(e.key, dir.value);
+  if (step) next = (i + step + list.length) % list.length;
   else if (e.key === 'Home') next = 0;
   else if (e.key === 'End') next = list.length - 1;
   if (next < 0) return;

package/src/modals/NewFolderModal.vue

@@ -3,6 +3,7 @@ import { ref, watch } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
+import { isInternalName } from '../lib/internalPaths';
 import Modal from './Modal.vue';
 
 const props = defineProps<{
@@ -42,6 +43,13 @@ function submit() {
     err.value = t('modal.newfolder.invalid');
     return;
   }
+  // The server refuses these (403 RESERVED_NAME, handlers/reserved_guard.go)
+  // in English; saying it here, in the reader's language, is the courtesy —
+  // the server is still the check.
+  if (isInternalName(clean)) {
+    err.value = t('names.reserved', { name: clean });
+    return;
+  }
   emit('submit', clean);
 }
 </script>