@brftech/filex-core 0.41.0 → 0.41.1

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:
@@ -6373,43 +6375,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.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brftech/filex-core",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "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

@@ -236,7 +236,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,7 +443,19 @@ 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 }) {
+function onViewClick(n: FileNode, mod: { ctrl: boolean; shift: boolean; touch?: boolean }) {
+  /* issue #26 — a finger has no double-click, so a TAP is the open gesture:
+   * 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) a
+   * tap adds to or removes from the selection, so picking several files still
+   * works. A mouse 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);
 }

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 { useRowTouch } 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: { ctrl: boolean; shift: boolean; touch?: boolean }): 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, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey, touch: touch.isTap(ev) });
 }
 
 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 { useRowTouch } 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: { ctrl: boolean; shift: boolean; touch?: boolean }): 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, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey, touch: touch.isTap(ev) });
 }
 
 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.

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 { useRowTouch } 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: { ctrl: boolean; shift: boolean; touch?: boolean }): 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, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey, touch: touch.isTap(ev) });
 }
 
 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/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;
 }

package/src/composables/useLocale.ts

@@ -25,10 +25,10 @@
  *     printing the viewer's chosen one.
  */
 
-import { computed, type Ref } from 'vue';
+import { computed, getCurrentInstance, inject, type Ref } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { messages } from '../locales';
-import { activeTimeZone, deviceTimeZone } from '../lib/timezone';
+import { EXPLORER_CLOCK, activeTimeZoneFor, deviceTimeZone } from '../lib/timezone';
 
 /* ── the tag ──────────────────────────────────────────────────────────── */
 
@@ -181,8 +181,12 @@ const dtfCache = new Map<string, Intl.DateTimeFormat>();
  * was opened in. Reading `activeTimeZone()` on every call is also what keeps
  * a template that formats a date reactive to the preference changing.
  */
-function zonedFormatter(tag: string, opts: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {
-  const zone = activeTimeZone();
+function zonedFormatter(
+  tag: string,
+  opts: Intl.DateTimeFormatOptions,
+  owner?: symbol,
+): Intl.DateTimeFormat {
+  const zone = activeTimeZoneFor(owner);
   const key = `${tag}|${zone ?? `device:${deviceTimeZone()}`}|${JSON.stringify(opts)}`;
   let fmt = dtfCache.get(key);
   if (!fmt) {
@@ -201,9 +205,11 @@ export function formatInstant(
   d: Date,
   code: LocaleCode | string | undefined,
   opts: Intl.DateTimeFormatOptions,
+  /** The explorer whose clock applies (EXPLORER_CLOCK); omitted = page-wide. */
+  owner?: symbol,
 ): string {
   try {
-    return zonedFormatter(localeTag(code), opts).format(d);
+    return zonedFormatter(localeTag(code), opts, owner).format(d);
   } catch {
     return d.toISOString();
   }
@@ -260,6 +266,11 @@ export function useLocale(localeRef: Ref<LocaleCode> | (() => LocaleCode)) {
 
   const lookup = computed(() => messages[code()] ?? messages.en);
 
+  // The explorer this component sits in, whose clock its dates are read on
+  // (lib/timezone, timeZoneSourcesFor). Outside a component, or outside any
+  // explorer, the page-wide answer.
+  const clock = getCurrentInstance() ? inject(EXPLORER_CLOCK, undefined) : undefined;
+
   function t(key: string, vars: Record<string, string | number> = {}): string {
     const table = lookup.value;
     const raw = table[countedKey(key, vars, (k) => k in table)] ?? key;
@@ -319,13 +330,18 @@ export function useLocale(localeRef: Ref<LocaleCode> | (() => LocaleCode)) {
   function formatDate(ms: number | undefined | null, opts: { time?: boolean } = {}): string {
     const d = toDate(ms);
     if (!d) return '';
-    const date = formatInstant(d, code(), {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
+    const date = formatInstant(
+      d,
+      code(),
+      {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      },
+      clock,
+    );
     if (!opts.time) return date;
-    return `${date}, ${formatInstant(d, code(), { hour: 'numeric', minute: '2-digit' })}`;
+    return `${date}, ${formatInstant(d, code(), { hour: 'numeric', minute: '2-digit' }, clock)}`;
   }
 
   /**
@@ -342,8 +358,8 @@ export function useLocale(localeRef: Ref<LocaleCode> | (() => LocaleCode)) {
   function formatDateFull(ms: number | undefined | null): string {
     const d = toDate(ms);
     if (!d) return '';
-    const zone = activeTimeZone() ?? deviceTimeZone();
-    const stamp = formatInstant(d, code(), { dateStyle: 'full', timeStyle: 'long' });
+    const zone = activeTimeZoneFor(clock) ?? deviceTimeZone();
+    const stamp = formatInstant(d, code(), { dateStyle: 'full', timeStyle: 'long' }, clock);
     return `${stamp} (${zone})`;
   }
 
@@ -358,7 +374,7 @@ export function useLocale(localeRef: Ref<LocaleCode> | (() => LocaleCode)) {
   function formatMonthYear(value: number | Date | undefined | null): string {
     const d = value instanceof Date ? value : toDate(value);
     if (!d) return '';
-    return formatInstant(d, code(), { month: 'long', year: 'numeric' });
+    return formatInstant(d, code(), { month: 'long', year: 'numeric' }, clock);
   }
 
   /**
@@ -373,7 +389,7 @@ export function useLocale(localeRef: Ref<LocaleCode> | (() => LocaleCode)) {
     const d = value instanceof Date ? value : toDate(value);
     if (!d) return '';
     try {
-      return zonedFormatter('en-CA', { year: 'numeric', month: '2-digit' }).format(d);
+      return zonedFormatter('en-CA', { year: 'numeric', month: '2-digit' }, clock).format(d);
     } catch {
       return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
     }