@brftech/filex-core 0.41.0 → 0.41.2

package/dist/index.d.ts

@@ -4614,7 +4614,9 @@ export declare function formatByteSize(bytes: number | null | undefined, opts?:
  * chosen clock, together, in one call. Every date on every surface goes
  * through here — that is the whole point of it being here.
  */
-export declare function formatInstant(d: Date, code: LocaleCode | string | undefined, opts: Intl.DateTimeFormatOptions): string;
+export declare function formatInstant(d: Date, code: LocaleCode | string | undefined, opts: Intl.DateTimeFormatOptions, 
+/** The explorer whose clock applies (EXPLORER_CLOCK); omitted = page-wide. */
+owner?: symbol): string;
 
 /**
  * Format 20 raw bytes as the string the user writes down:
@@ -5261,6 +5263,37 @@ export declare type OperationsStore = ReturnType<typeof useOperations>;
 
 export declare type OperationStatus = 'running' | 'done' | 'error' | 'aborted';
 
+/** 0–100, or `null` when there is no honest number to draw. */
+export declare function opPercent(op: OpProgressLike): number | null;
+
+/**
+ * opProgress — the one rule for "how far along is this queued operation".
+ *
+ * Both progress surfaces read it: the explorer's operations center
+ * (PendingOpsTray → OperationsCenter) and the admin app's bottom-right tray.
+ * Two copies of this rule are how one tray starts saying something the other
+ * does not (filex lesson #119).
+ *
+ * Issue #27: a queued op counts SOURCES, so moving one large file — or one
+ * folder of a thousand files — is "0 of 1" until the very end. Drawn as a
+ * percentage that is a bar frozen at 0% that then vanishes, which the reporter
+ * read as stuck. So:
+ *
+ *   - a running cross-storage transfer reports bytes (`bytes_done` /
+ *     `bytes_total`); when the total is known that is the percentage;
+ *   - bytes moving with no total yet, or a single source with nothing but a
+ *     source count, has NO honest percentage: `null`, and the surface shows
+ *     an indeterminate indicator instead of a fake 0%;
+ *   - several sources still report per source, as before.
+ */
+export declare interface OpProgressLike {
+    status: string;
+    progress_total: number;
+    progress_done: number;
+    bytes_total?: number;
+    bytes_done?: number;
+}
+
 declare type PaneId = 'main' | 'split';
 
 /**
@@ -5292,6 +5325,9 @@ export declare interface PendingOp {
     status: 'pending' | 'running' | 'done' | 'error';
     progress_total: number;
     progress_done: number;
+    /** Running cross-storage transfer's bytes (issue #27); absent otherwise. */
+    bytes_total?: number;
+    bytes_done?: number;
     target_path: string | null;
     source_dir: string | null;
     source_count: number;
@@ -6373,43 +6409,6 @@ export declare type TimeZoneSources = Partial<Record<Exclude<TimeZoneTier, 'devi
 /** What each tier currently holds (`''` = nothing). Reactive. */
 export declare function timeZoneSources(): Required<TimeZoneSources>;
 
-/**
- * timezone.ts — whose clock an instant is read on.
- *
- * A timestamp is an instant. `last_modified` is the same number for everybody
- * on the planet; what differs is the clock it is read against. The owner's
- * rule, verbatim: *"ben 03'te video yükledim, GMT 0 eleman o videonun yüklenme
- * saatini kendi zaman diliminde görecek."* So the instant stays untouched on
- * the wire and the READER picks the clock.
- *
- * ⚠⚠ WHICH reader is a question with several answers, and this module is the
- * ONE place they are ranked. Before it, the admin web app followed the account
- * and an embedded `<filex-explorer>` on another origin followed the browser —
- * a person who chose Tokyo saw Tokyo in one and their laptop's zone in the
- * other, for the same file. That disagreement is the bug this exists to end,
- * so every surface resolves through `resolveTimeZone()` and nothing else
- * decides.
- *
- * The owner's ruling (2026-09-14): three tiers — the embedder, then the
- * account behind the key when it IS a person's key, then the browser — plus a
- * setting inside the embed, kept in the browser, because an embed has no
- * user-settings dialog. Where that setting ranks is `TIME_ZONE_TIERS` below,
- * and the reasoning is on it.
- *
- * Scope: page-level, deliberately. The clock belongs to the person looking at
- * the page, and there is one of them. Host and account zones are REGISTERED by
- * whoever knows them (an explorer instance, the web app's auth store) under an
- * owner key, so an explorer that unmounts takes its zones with it instead of
- * leaving them behind for the next one. Two explorers on one page that
- * disagree about a host zone, or hold different people's tokens, resolve to
- * the most recently written value for both — one viewer, one clock.
- *
- * The same-tab `filex:timezone` event survives from the previous design and for
- * the same reason: the admin app and a `<filex-explorer>` web component on one
- * page can be two different BUNDLES, i.e. two copies of this module, and a ref
- * in one says nothing to the other. The event crosses that gap for the one tier
- * that is shared state by nature — the browser's.
- */
 /**
  * The places a zone can come from.
  *
@@ -7047,6 +7046,8 @@ export declare function usePendingOps(config: ExplorerConfig, api: FileApi, opts
     status: "pending" | "running" | "done" | "error";
     progress_total: number;
     progress_done: number;
+    bytes_total?: number | undefined;
+    bytes_done?: number | undefined;
     target_path: string | null;
     source_dir: string | null;
     source_count: number;
@@ -7060,6 +7061,8 @@ export declare function usePendingOps(config: ExplorerConfig, api: FileApi, opts
     status: "pending" | "running" | "done" | "error";
     progress_total: number;
     progress_done: number;
+    bytes_total?: number | undefined;
+    bytes_done?: number | undefined;
     target_path: string | null;
     source_dir: string | null;
     source_count: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brftech/filex-core",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "description": "filex core — Vue 3 source of truth for the filex file manager (FileExplorer + ConnectionsPanel SFCs, composables, types)",
   "type": "module",
   "main": "./dist/filex-core.umd.cjs",

package/src/components/FilePane.vue

@@ -66,6 +66,7 @@
 import { computed, provide, ref, watch } from 'vue';
 
 import type { FileApi } from '../composables/useFileApi';
+import type { ClickMod } from '../composables/useRowTouch';
 import type { FileNode, ViewMode } from '../types/FileNode';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
@@ -236,7 +237,7 @@ const emit = defineEmits<{
   /** The virtual `.trash` row was opened — the trash view carries the restore
    *  actions and belongs to the main pane, so the host decides. */
   (e: 'open-trash'): void;
-  (e: 'click-row', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'click-row', node: FileNode, mod: { ctrl: boolean; shift: boolean; touch?: boolean }): void;
   /** Right-click. `null` = empty space (nothing selected → "Paste" only). */
   (e: 'context', node: FileNode | null, ev: MouseEvent): void;
   (e: 'clear-selection'): void;
@@ -443,11 +444,51 @@ const paneSubfolders = computed(() =>
  * `useSelection` instance for this pane answers. One set of Ctrl/Shift
  * semantics for both panes — the old right pane had a simplified copy in
  * which Shift behaved as Ctrl. */
-function onViewClick(n: FileNode, mod: { ctrl: boolean; shift: boolean }) {
+/* issue #26, second round — a press on the NAME opens, so the second click of
+ * a habitual double-click lands on whatever the NEW listing put under the
+ * pointer (the folder already opened on the first click). Without this guard
+ * that click would open or select a row the user never aimed at, and a file's
+ * name would open twice (two viewer tabs). */
+const NAME_OPEN_GUARD_MS = 500;
+let nameOpenedAt = 0;
+
+function withinNameOpenGuard(): boolean {
+  return Date.now() - nameOpenedAt < NAME_OPEN_GUARD_MS;
+}
+
+function onViewClick(n: FileNode, mod: ClickMod) {
+  if (withinNameOpenGuard()) return;
+  /* issue #26, second round — the reporter's rule on every device: a press on
+   * the item's name opens it, mouse or finger, selection or not. Ctrl/shift
+   * still mean "add to / extend the selection", so a modifier click on a name
+   * selects as it always did. The checkbox selects on its own path. */
+  if (mod.name && !mod.ctrl && !mod.shift) {
+    nameOpenedAt = Date.now();
+    onRowOpen(n);
+    return;
+  }
+  /* issue #26 — a finger has no double-click, so a TAP elsewhere on the item
+   * is the open gesture too: with nothing selected it opens what it lands on,
+   * exactly as a double-click would. Once something is selected (a long press
+   * selects, via its menu) such a tap adds to or removes from the selection,
+   * so picking several files still works. A mouse click beside the name keeps
+   * click-to-select; see composables/useRowTouch. */
+  if (mod.touch && !mod.ctrl && !mod.shift) {
+    if (props.selected.size === 0) {
+      onRowOpen(n);
+      return;
+    }
+    mod = { ...mod, ctrl: true };
+  }
   emit('activate');
   emit('click-row', n, mod);
 }
 
+function onViewDbl(n: FileNode) {
+  if (withinNameOpenGuard()) return;
+  onRowOpen(n);
+}
+
 function onViewContext(n: FileNode, ev: MouseEvent) {
   ev.preventDefault();
   ev.stopPropagation();
@@ -879,7 +920,7 @@ watch(panePath, () => {
         :auth-credentials="authCredentials"
         @click-row="onViewClick"
         @display-order="(nodes: FileNode[]) => emit('display-order', nodes)"
-        @dbl-row="onRowOpen"
+        @dbl-row="onViewDbl"
         @context-row="onViewContext"
         @item-drag-start="onRowDragStart"
         @item-drop-into="onViewDropInto"
@@ -905,7 +946,7 @@ watch(panePath, () => {
         :auth-credentials="authCredentials"
         @click-card="onViewClick"
         @display-order="(nodes: FileNode[]) => emit('display-order', nodes)"
-        @dbl-card="onRowOpen"
+        @dbl-card="onViewDbl"
         @context-card="onViewContext"
         @item-drag-start="onRowDragStart"
         @item-drop-into="onViewDropInto"
@@ -928,7 +969,7 @@ watch(panePath, () => {
         :auth-headers="authHeaders"
         :auth-credentials="authCredentials"
         @click-card="onViewClick"
-        @dbl-card="onRowOpen"
+        @dbl-card="onViewDbl"
         @context-card="onViewContext"
         @item-drag-start="onRowDragStart"
         @item-drop-into="onViewDropInto"

package/src/components/GalleryView.vue

@@ -13,6 +13,7 @@ import { hasInternalDrag } from '../lib/dragOut';
 import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
 import { encryptedFolderTile, fileIconTile, isEncryptedFolder } from '../lib/fileIcons';
 import {
   createFilePreviews,
@@ -76,7 +77,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'click-card', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'click-card', node: FileNode, mod: ClickMod): void;
   (e: 'dbl-card', node: FileNode): void;
   (e: 'context-card', node: FileNode, ev: MouseEvent): void;
   (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
@@ -158,7 +159,7 @@ function isSelected(n: FileNode): boolean {
 }
 
 function onClick(n: FileNode, ev: MouseEvent) {
-  emit('click-card', n, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey });
+  emit('click-card', n, clickMod(ev, touch.isTap(ev), '.fe-gal__label'));
 }
 
 function onDbl(n: FileNode) {
@@ -205,27 +206,10 @@ function onItemDrop(n: FileNode, ev: DragEvent) {
   emit('item-drop-into', n, ev);
 }
 
-// Long-press → context menu, same as GridView (touch parity).
-let pressTimer: ReturnType<typeof setTimeout> | undefined;
-let pressTarget: FileNode | null = null;
-function onTouchStart(n: FileNode, ev: TouchEvent) {
-  pressTarget = n;
-  if (pressTimer) clearTimeout(pressTimer);
-  pressTimer = setTimeout(() => {
-    if (pressTarget) {
-      const t0 = ev.touches[0];
-      emit('context-card', pressTarget, {
-        clientX: t0.clientX,
-        clientY: t0.clientY,
-        preventDefault: () => {},
-      } as unknown as MouseEvent);
-    }
-  }, 500);
-}
-function cancelPress() {
-  if (pressTimer) clearTimeout(pressTimer);
-  pressTarget = null;
-}
+/* Long press → the card's menu; a tap is reported as a tap (issue #26). */
+const touch = useRowTouch<FileNode>((n, at) =>
+  emit('context-card', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+);
 
 /**
  * zaman:z1 — routed through useLocale.formatDate, the package's one date
@@ -283,9 +267,9 @@ function metaFor(n: FileNode): string {
       @dragover="onItemDragOver(n, $event)"
       @dragleave="onItemDragLeave(n)"
       @drop="onItemDrop(n, $event)"
-      @touchstart.passive="onTouchStart(n, $event)"
-      @touchend="cancelPress"
-      @touchmove="cancelPress"
+      @touchstart.passive="touch.onTouchStart(n, $event)"
+      @touchend.passive="touch.onTouchEnd"
+      @touchmove.passive="touch.onTouchMove"
     >
       <div class="fe-gal__thumb" :ref="(el) => bindPreview(el, n)">
         <!-- gorunum:v1-preview — a text-readable file shows its own first

package/src/components/GridView.vue

@@ -20,6 +20,7 @@ import type { FileNode } from '../types/FileNode';
 import { hasInternalDrag } from '../lib/dragOut';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
 import { encryptedFolderTile, fileIconTile, isEncryptedFolder } from '../lib/fileIcons';
 import {
   createFilePreviews,
@@ -110,7 +111,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'click-card', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'click-card', node: FileNode, mod: ClickMod): void;
   (e: 'dbl-card', node: FileNode): void;
   (e: 'context-card', node: FileNode, ev: MouseEvent): void;
   (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
@@ -267,7 +268,7 @@ function isSelected(n: FileNode): boolean {
 }
 
 function onClick(n: FileNode, ev: MouseEvent) {
-  emit('click-card', n, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey });
+  emit('click-card', n, clickMod(ev, touch.isTap(ev), '.fe-grid__label'));
 }
 
 function onDbl(n: FileNode) {
@@ -327,26 +328,10 @@ function onItemDrop(n: FileNode, ev: DragEvent) {
   emit('item-drop-into', n, ev);
 }
 
-let pressTimer: ReturnType<typeof setTimeout> | undefined;
-let pressTarget: FileNode | null = null;
-function onTouchStart(n: FileNode, ev: TouchEvent) {
-  pressTarget = n;
-  if (pressTimer) clearTimeout(pressTimer);
-  pressTimer = setTimeout(() => {
-    if (pressTarget) {
-      const t0 = ev.touches[0];
-      emit('context-card', pressTarget, {
-        clientX: t0.clientX,
-        clientY: t0.clientY,
-        preventDefault: () => {},
-      } as unknown as MouseEvent);
-    }
-  }, 500);
-}
-function cancelPress() {
-  if (pressTimer) clearTimeout(pressTimer);
-  pressTarget = null;
-}
+/* Long press → the card's menu; a tap is reported as a tap (issue #26). */
+const touch = useRowTouch<FileNode>((n, at) =>
+  emit('context-card', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+);
 
 /**
  * The card's second line. A file prints "1.7 MB • Sep 9, 2026"; a folder
@@ -432,9 +417,9 @@ function snippetTitle(snippet: string): string {
       @dragover="onItemDragOver(n, $event)"
       @dragleave="onItemDragLeave(n) /* wiring:c4 */"
       @drop="onItemDrop(n, $event)"
-      @touchstart.passive="onTouchStart(n, $event)"
-      @touchend="cancelPress"
-      @touchmove="cancelPress"
+      @touchstart.passive="touch.onTouchStart(n, $event)"
+      @touchend.passive="touch.onTouchEnd"
+      @touchmove.passive="touch.onTouchMove"
     >
       <!-- gorunum:v1 — the preview, files only: 184×108. A thumbnail when
            there is one, otherwise the type tile centred on --fe-bg-elev.
@@ -562,11 +547,15 @@ function snippetTitle(snippet: string): string {
             >{{ keepGlyph(keepBadgeFor(n)!) }}</span>
           </div>
           <div class="fe-grid__meta">{{ captionFor(n) }}</div>
+          <!-- A card at a storage's root has no parent folder to name: no line,
+               not an em dash — the same rule the gallery follows and the list's
+               Location cell (tablo:t1). The dash read as a stray character under
+               the filename in search results. -->
           <div
-            v-if="showParentPath"
+            v-if="showParentPath && parentDirOf(n.path)"
             class="fe-grid__parent"
             :title="parentDirOf(n.path)"
-          >{{ parentDirOf(n.path) || '—' }}</div>
+          >{{ parentDirOf(n.path) }}</div>
           <!-- bul:s3 — content snippet («» → <mark> via TEXT segments, no innerHTML) -->
           <div v-if="cardSnippet(n)" class="fe-grid__snippet" :title="snippetTitle(cardSnippet(n))">
             <template v-for="(seg, si) in snippetSegments(cardSnippet(n))" :key="si">

package/src/components/ListView.vue

@@ -11,6 +11,7 @@ import { hasInternalDrag } from '../lib/dragOut';
 import type { FileNode } from '../types/FileNode';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
 import {
   arrivedFromOutside,
   ownedByViewer,
@@ -138,7 +139,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'click-row', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'click-row', node: FileNode, mod: ClickMod): void;
   (e: 'dbl-row', node: FileNode): void;
   (e: 'context-row', node: FileNode, ev: MouseEvent): void;
   (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
@@ -173,7 +174,7 @@ function isSelected(n: FileNode): boolean {
 }
 
 function onRowClick(n: FileNode, ev: MouseEvent) {
-  emit('click-row', n, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey });
+  emit('click-row', n, clickMod(ev, touch.isTap(ev), '.fe-list__name'));
 }
 
 function onRowDbl(n: FileNode) {
@@ -264,28 +265,10 @@ function onItemDrop(n: FileNode, ev: DragEvent) {
   emit('item-drop-into', n, ev);
 }
 
-let pressTimer: ReturnType<typeof setTimeout> | undefined;
-let pressTarget: FileNode | null = null;
-
-function onTouchStart(n: FileNode, ev: TouchEvent) {
-  pressTarget = n;
-  if (pressTimer) clearTimeout(pressTimer);
-  pressTimer = setTimeout(() => {
-    if (pressTarget) {
-      const t0 = ev.touches[0];
-      emit('context-row', pressTarget, {
-        clientX: t0.clientX,
-        clientY: t0.clientY,
-        preventDefault: () => {},
-      } as unknown as MouseEvent);
-    }
-  }, 500);
-}
-
-function cancelPress() {
-  if (pressTimer) clearTimeout(pressTimer);
-  pressTarget = null;
-}
+/* Long press → the row's menu; a tap is reported as a tap (issue #26). */
+const touch = useRowTouch<FileNode>((n, at) =>
+  emit('context-row', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+);
 
 function keepGlyph(b: 'kept' | 'syncing' | 'cloud' | 'partial'): string {
   if (b === 'kept') return '\u2713';
@@ -359,7 +342,12 @@ function thumbOf(n: FileNode): string | null {
   return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
 }
 
-/** The muted "Folder" said beside a directory's name — not on the sentinels. */
+/** Whether the Type column is on screen. While it is, it already says "Folder"
+ *  in its own cell, and the word beside the name printed it twice per row. */
+const typeColumnShown = computed(() => visibleCols.value.includes('type'));
+
+/** The muted "Folder" said beside a directory's name — not on the sentinels,
+ *  and only while no Type column says it (see typeColumnShown). */
 function isPlainDir(n: FileNode): boolean {
   return n.type === 'dir' && !isPinnedSpecial(n);
 }
@@ -1237,9 +1225,9 @@ const segments = computed<DateRun<FileNode>[]>(() =>
         @dragover="onItemDragOver(n, $event)"
         @dragleave="onItemDragLeave(n) /* wiring:c4 */"
         @drop="onItemDrop(n, $event)"
-        @touchstart.passive="onTouchStart(n, $event)"
-        @touchend="cancelPress"
-        @touchmove="cancelPress"
+        @touchstart.passive="touch.onTouchStart(n, $event)"
+        @touchend.passive="touch.onTouchEnd"
+        @touchmove.passive="touch.onTouchMove"
       >
         <!-- gorunum:v1 — the tick drives the SAME selection the row click
              does (onCheckClick → click-row → useSelection.click), so shift
@@ -1324,7 +1312,7 @@ const segments = computed<DateRun<FileNode>[]>(() =>
                `.fe-list__name`: the shot scripts read that element's
                textContent as the filename (e2e/shots/starstags.mjs), and a
                row whose name reads "Reports Folder" breaks them silently. -->
-          <span v-if="isPlainDir(n)" class="fe-list__kind">{{ t('node.folder') }}</span>
+          <span v-if="isPlainDir(n) && !typeColumnShown" class="fe-list__kind">{{ t('node.folder') }}</span>
         </div>
         <!-- tablo:t1 — one loop over the SAME list the header draws, so a
              column cannot exist in one and not the other, and the values land

package/src/components/PendingOpsTray.vue

@@ -17,6 +17,7 @@ import { watch } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import type { PendingOp } from '../composables/usePendingOps';
 import type { OperationsStore, OperationStatus } from '../composables/useOperations';
+import { opPercent } from '../lib/opProgress';
 
 const props = defineProps<{
   ops: PendingOp[];
@@ -35,11 +36,9 @@ function mapStatus(op: PendingOp): OperationStatus {
   return 'running'; // pending | running
 }
 
-function percentOf(op: PendingOp): number | null {
-  if (op.status === 'done') return 100;
-  if (op.progress_total <= 0) return null;
-  return Math.min(100, Math.round((op.progress_done / op.progress_total) * 100));
-}
+/* 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);
 
 watch(
   () => props.ops,

package/src/components/TimeZoneDialog.vue

@@ -17,15 +17,16 @@
  * device's — by asking the resolver with the viewer tier blanked. A reset
  * whose outcome you have to guess is not a reset.
  */
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { formatInstant, useLocale } from '../composables/useLocale';
 import {
+  EXPLORER_CLOCK,
   deviceTimeZone,
   resolveTimeZone,
-  resolvedTimeZone,
+  resolvedTimeZoneFor,
   setViewerTimeZone,
-  timeZoneSources,
+  timeZoneSourcesFor,
   viewerTimeZone,
 } from '../lib/timezone';
 import Modal from '../modals/Modal.vue';
@@ -43,8 +44,10 @@ const { t } = useLocale(() => props.locale);
 
 const inputId = `fe-tzdialog-${Math.random().toString(36).slice(2, 9)}`;
 
-const fallback = computed(() => resolveTimeZone({ ...timeZoneSources(), viewer: '' }));
-const inForce = computed(() => resolvedTimeZone());
+// This explorer's clock, not the page's newest (lib/timezone, timeZoneSourcesFor).
+const clock = inject(EXPLORER_CLOCK, undefined);
+const fallback = computed(() => resolveTimeZone({ ...timeZoneSourcesFor(clock), viewer: '' }));
+const inForce = computed(() => resolvedTimeZoneFor(clock));
 const inForceZone = computed(() => inForce.value.zone ?? deviceTimeZone());
 
 /** "Right now in Asia/Tokyo: 14:05:09" — the fastest way to see a wrong pick. */
@@ -54,11 +57,16 @@ function refresh(): void {
   // Through the shared formatter, which reads the RESOLVED zone — the readout
   // must say what every date on the page is actually drawn in, not what this
   // dialog thinks it chose.
-  now.value = formatInstant(new Date(), props.locale, {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
+  now.value = formatInstant(
+    new Date(),
+    props.locale,
+    {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    },
+    clock,
+  );
 }
 watch(
   () => props.open,

package/src/components/TokensPanel.vue

@@ -101,19 +101,28 @@ onMounted(async () => {
   emit('active', { hasToken: tokens.value.length > 0 });
 });
 
+/**
+ * The name a token gets when the field is left empty — one the user will
+ * recognise in the list later.
+ *
+ * A protocol guide knows both halves: `WebDAV — files.example.com`, the host
+ * being the PUBLIC address the guide resolved (connectionsOrigin). The API
+ * keys page knows neither, and it used to make a host up from `apiBase`,
+ * which is whatever the page happens to talk to: every key on a local
+ * instance was called `127.0.0.1:5297`, and that address was printed as the
+ * placeholder in the README screenshots. It names the key by the day it was
+ * made instead.
+ */
 function defaultLabel(): string {
   const p = (props.protocol || '').toUpperCase();
-  return p ? `${p} — ${hostLabel()}` : hostLabel();
+  if (p) return props.host ? `${p} — ${props.host}` : p;
+  return t('conn.tokens.defaultName', { date: new Date().toISOString().slice(0, 10) });
 }
 
-/** A name the user will recognise in the list later. */
-function hostLabel(): string {
-  if (props.host) return props.host;
-  try {
-    return new URL(props.config.apiBase || window.location.origin).host;
-  } catch {
-    return 'filex';
-  }
+/** What the empty name field suggests: the saved default on a protocol guide,
+ *  an example of a useful name on the API keys page. */
+function labelPlaceholder(): string {
+  return props.protocol ? defaultLabel() : t('conn.tokens.namePlaceholder');
 }
 
 async function mint(): Promise<void> {
@@ -206,7 +215,7 @@ function usedLabel(row: ApiToken): string {
       <input
         v-model="label"
         class="fe-cfield__input"
-        :placeholder="defaultLabel()"
+        :placeholder="labelPlaceholder()"
         data-testid="token-label"
       />
       <button class="fe-s3keys__btn" :disabled="busy" data-testid="token-mint" @click="mint">
@@ -220,7 +229,7 @@ function usedLabel(row: ApiToken): string {
       <input
         v-model="label"
         class="fe-cfield__input"
-        :placeholder="defaultLabel()"
+        :placeholder="labelPlaceholder()"
         data-testid="token-label"
       />
 

package/src/composables/useExplorerTimeZone.ts

@@ -32,10 +32,10 @@
  * the browser's zone answers. A clock must never throw.
  */
 
-import { onBeforeUnmount, watch, type Ref } from 'vue';
+import { onBeforeUnmount, provide, watch, type Ref } from 'vue';
 import type { ExplorerConfig } from '../types/ExplorerConfig';
 import type { Capabilities } from '../types/FileNode';
-import { releaseTimeZoneOwner, setAccountTimeZone, setHostTimeZone } from '../lib/timezone';
+import { EXPLORER_CLOCK, releaseTimeZoneOwner, setAccountTimeZone, setHostTimeZone } from '../lib/timezone';
 
 export interface ExplorerTimeZoneDeps {
   config: () => ExplorerConfig;
@@ -45,8 +45,11 @@ export interface ExplorerTimeZoneDeps {
   fetchMe: () => Promise<{ user?: { timezone?: unknown } | null } | undefined>;
 }
 
-export function useExplorerTimeZone(deps: ExplorerTimeZoneDeps): void {
+export function useExplorerTimeZone(deps: ExplorerTimeZoneDeps): symbol {
   const owner = Symbol('filex-explorer');
+  // Every component under this explorer reads its dates on this owner's
+  // tiers, not the page's newest (lib/timezone, timeZoneSourcesFor).
+  provide(EXPLORER_CLOCK, owner);
 
   watch(
     () => deps.config().timeZone,
@@ -82,4 +85,5 @@ export function useExplorerTimeZone(deps: ExplorerTimeZoneDeps): void {
   );
 
   onBeforeUnmount(() => releaseTimeZoneOwner(owner));
+  return owner;
 }