@brftech/filex-core 0.41.0 → 0.41.2

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')}`;
     }

package/src/composables/usePendingOps.ts

@@ -23,6 +23,9 @@ export 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;
@@ -69,6 +72,8 @@ function normalizeOp(raw: Record<string, unknown>): PendingOp {
     status,
     progress_total: num(raw.progress_total, raw.total, sources.length),
     progress_done: num(raw.progress_done, raw.done),
+    bytes_total: num(raw.bytes_total),
+    bytes_done: num(raw.bytes_done),
     target_path: str(raw.target_path, raw.dest),
     source_dir: str(raw.source_dir),
     source_count: num(raw.source_count, sources.length),

package/src/composables/useRowTouch.ts

@@ -0,0 +1,126 @@
+/**
+ * useRowTouch — the one touch grammar every file view speaks (list, grid,
+ * gallery).
+ *
+ * A mouse selects with a click and opens with a double-click. A finger has no
+ * double-click: the browser swallows the second tap into a zoom or never sends
+ * `dblclick` at all, so on a phone the desktop grammar left nothing openable
+ * (issue #26). What a finger does instead is what every mobile file manager
+ * does:
+ *
+ *   - a long press opens the item's menu (and, through it, selects the item);
+ *   - a tap is reported AS a tap, so the host can open instead of select.
+ *
+ * The views only report. What a tap means is decided once, in FilePane.
+ *
+ * Issue #26, second round (the reporter's rule, on EVERY device):
+ *   - a press on the item's NAME opens it — mouse click or finger tap, with or
+ *     without a selection;
+ *   - a long press (finger) or a right click (mouse) opens the menu;
+ *   - the checkbox selects, exactly as before.
+ * So the views also report whether the click landed on the name (`name`).
+ *
+ * ⚠ A tap is judged from the gesture that produced the click, never from the
+ * screen: `pointerType` where the browser sets it on click (Chromium, Firefox),
+ * and the touchend that just preceded the click where it does not (older
+ * WebKit). A touch laptop's trackpad therefore keeps the desktop grammar while
+ * its screen gets the phone one. A `(pointer: coarse)` media query cannot tell
+ * those two apart.
+ *
+ * ⚠ It used to live as three identical copies of the long-press timer, one per
+ * view; the tap rule is exactly the kind of addition a copy misses.
+ */
+import { onBeforeUnmount } from 'vue';
+
+/** How long a finger rests before the press becomes a long press. */
+export const LONG_PRESS_MS = 500;
+/** A click this soon after a touchend is the tap that touchend ended. */
+const TAP_WINDOW_MS = 800;
+/** A finger that travels further than this is scrolling, not pressing. */
+const MOVE_TOLERANCE_PX = 10;
+
+export interface TouchPoint {
+  clientX: number;
+  clientY: number;
+}
+
+/** What a view reports about a click on one of its items. */
+export interface ClickMod {
+  ctrl: boolean;
+  shift: boolean;
+  /** The click was a finger's tap. */
+  touch?: boolean;
+  /** The click landed on the item's name. */
+  name?: boolean;
+}
+
+/**
+ * The one place a view turns a click into a `ClickMod`. `nameSelector` is the
+ * view's own name element (`.fe-list__name`, `.fe-grid__label`, …).
+ */
+export function clickMod(ev: MouseEvent, touch: boolean, nameSelector: string): ClickMod {
+  const target = ev.target as Element | null;
+  return {
+    ctrl: ev.ctrlKey || ev.metaKey,
+    shift: ev.shiftKey,
+    touch,
+    name: typeof target?.closest === 'function' && target.closest(nameSelector) !== null,
+  };
+}
+
+export function useRowTouch<T>(onLongPress: (item: T, at: TouchPoint) => void) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let target: T | null = null;
+  let origin: TouchPoint = { clientX: 0, clientY: 0 };
+  let longPressed = false;
+  let tapEndedAt = 0;
+
+  function stopTimer() {
+    if (timer) clearTimeout(timer);
+    timer = undefined;
+  }
+
+  function onTouchStart(item: T, ev: TouchEvent) {
+    const t0 = ev.touches[0];
+    if (!t0) return;
+    stopTimer();
+    target = item;
+    longPressed = false;
+    origin = { clientX: t0.clientX, clientY: t0.clientY };
+    timer = setTimeout(() => {
+      timer = undefined;
+      if (target === null) return;
+      longPressed = true;
+      onLongPress(target, origin);
+    }, LONG_PRESS_MS);
+  }
+
+  function onTouchMove(ev: TouchEvent) {
+    const t0 = ev.touches[0];
+    if (
+      !t0 ||
+      Math.abs(t0.clientX - origin.clientX) > MOVE_TOLERANCE_PX ||
+      Math.abs(t0.clientY - origin.clientY) > MOVE_TOLERANCE_PX
+    ) {
+      stopTimer();
+      target = null;
+    }
+  }
+
+  function onTouchEnd() {
+    stopTimer();
+    if (target !== null && !longPressed) tapEndedAt = Date.now();
+    target = null;
+  }
+
+  /** Whether this click is a finger's tap. */
+  function isTap(ev: MouseEvent): boolean {
+    const kind = (ev as PointerEvent).pointerType;
+    if (kind) return kind === 'touch';
+    return Date.now() - tapEndedAt < TAP_WINDOW_MS;
+  }
+
+  onBeforeUnmount(stopTimer);
+
+  return { onTouchStart, onTouchMove, onTouchEnd, isTap };
+}

package/src/index.ts

@@ -55,6 +55,11 @@ export {
 } from './lib/destinationTree';
 export type { DestinationRow } from './lib/destinationTree';
 
+/* issue #27 — the one "how far along is this queued op" rule, shared by the
+ * explorer's operations center and a host's own tray (the admin app's). */
+export { opPercent } from './lib/opProgress';
+export type { OpProgressLike } from './lib/opProgress';
+
 /* tasi:m1 — "download the selection as one archive". Exported so a host that
  * draws its own selection bar gets the real two-step flow (authorized mint,
  * then a navigation that streams) instead of reaching for window.open per

package/src/lib/opProgress.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 interface OpProgressLike {
+  status: string;
+  progress_total: number;
+  progress_done: number;
+  bytes_total?: number;
+  bytes_done?: number;
+}
+
+function clampPercent(n: number): number {
+  return Math.max(0, Math.min(100, Math.round(n)));
+}
+
+/** 0–100, or `null` when there is no honest number to draw. */
+export function opPercent(op: OpProgressLike): number | null {
+  if (op.status === 'done') return 100;
+  const bytesTotal = op.bytes_total ?? 0;
+  const bytesDone = op.bytes_done ?? 0;
+  if (bytesTotal > 0) return clampPercent((bytesDone / bytesTotal) * 100);
+  if (bytesDone > 0) return null;
+  if (op.progress_total <= 1) return null;
+  return clampPercent((op.progress_done / op.progress_total) * 100);
+}

package/src/lib/shareTtl.ts

@@ -74,7 +74,12 @@ export function expiryInputMax(maxDays: number | undefined, now: Date = new Date
 }
 
 /** "Valid until 30 Aug 2026, 14:05" / "Does not expire" from the server's `expires_at`. */
-export function validUntilLine(expiresAt: string | null | undefined, locale: 'tr' | 'en'): string {
+export function validUntilLine(
+  expiresAt: string | null | undefined,
+  locale: 'tr' | 'en',
+  /** The explorer whose clock applies (lib/timezone EXPLORER_CLOCK). */
+  clock?: symbol,
+): string {
   if (!expiresAt) return locale === 'tr' ? 'Bu bağlantının süresi yoktur.' : 'This link does not expire.';
   const d = new Date(expiresAt);
   // zaman:z1 — the viewer's chosen clock, not the browser's. "Valid until
@@ -87,7 +92,7 @@ export function validUntilLine(expiresAt: string | null | undefined, locale: 'tr
   // dialog and "Sep 20, 2026, 1:53 PM" in the listing behind it.
   const when = Number.isNaN(d.getTime())
     ? expiresAt
-    : formatInstant(d, locale, { dateStyle: 'medium', timeStyle: 'short' });
+    : formatInstant(d, locale, { dateStyle: 'medium', timeStyle: 'short' }, clock);
   return locale === 'tr' ? `Bu bağlantı ${when} tarihine kadar geçerli.` : `This link is valid until ${when}.`;
 }
 
@@ -99,3 +104,17 @@ export function ttlCeilingHint(maxDays: number | undefined, locale: 'tr' | 'en')
     ? `Bağlantılar en fazla ${max} gün geçerli olabilir (sunucu ayarı).`
     : `Links can be valid for at most ${max} day${max === 1 ? '' : 's'} (server setting).`;
 }
+
+/**
+ * The share dialog's muted detail line: its facts joined with " · ".
+ *
+ * ⚠ The first fact is a whole sentence ("This link is valid until …, 10:00
+ * AM.") and the ones after it are fragments ("3 downloads"), so a plain join
+ * printed "10:00 AM. · 3 downloads" — a full stop in the middle of a line. A
+ * fact that is followed by another loses its closing full stop; the last one
+ * keeps whatever it has.
+ */
+export function shareDetailLine(facts: Array<string | null | undefined>): string {
+  const kept = facts.filter((f): f is string => !!f);
+  return kept.map((f, i) => (i < kept.length - 1 ? f.replace(/\.\s*$/, '') : f)).join(' · ');
+}

package/src/lib/timezone.ts

@@ -36,7 +36,7 @@
  * that is shared state by nature — the browser's.
  */
 
-import { computed, ref, type Ref } from 'vue';
+import { computed, ref, type InjectionKey, type Ref } from 'vue';
 
 /* ── the order ────────────────────────────────────────────────────────── */
 
@@ -312,6 +312,11 @@ function ownedTier() {
       const list = entries.value;
       return list.length ? list[list.length - 1].zone : '';
     },
+    /** The newest answer among the owners `pick` accepts. */
+    currentWhere(pick: (owner: symbol) => boolean): string {
+      const list = entries.value.filter((e) => pick(e.owner));
+      return list.length ? list[list.length - 1].zone : '';
+    },
   };
 }
 
@@ -345,6 +350,46 @@ export function resolvedTimeZone(): ResolvedTimeZone {
   return resolved.value;
 }
 
+/**
+ * The owner key an explorer PROVIDES to its components, so the dates they
+ * print resolve against that explorer's own tiers (useLocale injects it).
+ */
+export const EXPLORER_CLOCK: InjectionKey<symbol> = Symbol('filex-explorer-clock');
+
+/**
+ * What the tiers hold for ONE explorer.
+ *
+ * ⚠⚠ The page-wide tiers answer with the NEWEST write, which is right for a
+ * surface outside every explorer and wrong inside one: two explorers on one
+ * page with different `config.timeZone` both printed the zone of whichever
+ * mounted last. The host tier is by definition one explorer's setting, so an
+ * explorer reads only its own. Its account tier is its own too; the only other
+ * account it may inherit is the one a HOST APP remembered for the person
+ * signed in (the admin app's session, `remember: true`) — never a sibling
+ * explorer's, which may belong to a different key altogether. The viewer tier
+ * is this browser's, shared by everything on the page.
+ *
+ * `owner` undefined is the page-wide answer, unchanged.
+ */
+export function timeZoneSourcesFor(owner: symbol | undefined): Required<TimeZoneSources> {
+  if (!owner) return timeZoneSources();
+  return {
+    viewer: viewerZone.value,
+    host: hostTier.of(owner) ?? '',
+    account: accountTier.of(owner) ?? accountTier.currentWhere((o) => rememberingOwners.has(o)),
+  };
+}
+
+/** resolvedTimeZone for ONE explorer (see timeZoneSourcesFor). Reactive. */
+export function resolvedTimeZoneFor(owner: symbol | undefined): ResolvedTimeZone {
+  return owner ? resolveTimeZone(timeZoneSourcesFor(owner)) : resolved.value;
+}
+
+/** activeTimeZone for ONE explorer (see timeZoneSourcesFor). Reactive. */
+export function activeTimeZoneFor(owner: symbol | undefined): string | undefined {
+  return resolvedTimeZoneFor(owner).zone;
+}
+
 /** What each tier currently holds (`''` = nothing). Reactive. */
 export function timeZoneSources(): Required<TimeZoneSources> {
   return {

package/src/locales/en.ts

@@ -1081,6 +1081,8 @@ export const en: Record<string, string> = {
   'conn.tokens.rootPlaceholder': 'storage://folder',
   'conn.tokens.expiry': 'Expires in (days)',
   'conn.tokens.expiryNever': 'never',
+  'conn.tokens.defaultName': 'API key {date}',
+  'conn.tokens.namePlaceholder': 'Name — e.g. backup script',
   'conn.tokens.capNote': 'Your account and its permissions are the ceiling — asking for more than you have is refused, not granted.',
   /* === /gezinti:g1 === */
 

package/src/locales/tr.ts

@@ -1079,6 +1079,8 @@ export const tr: Record<string, string> = {
   'conn.tokens.rootPlaceholder': 'depo://klasör',
   'conn.tokens.expiry': 'Geçerlilik (gün)',
   'conn.tokens.expiryNever': 'süresiz',
+  'conn.tokens.defaultName': 'API anahtarı {date}',
+  'conn.tokens.namePlaceholder': 'Ad — ör. yedekleme betiği',
   'conn.tokens.capNote': 'Tavan hesabın ve yetkilerin — sahip olduğundan fazlasını istemek reddedilir, verilmez.',
   /* === /gezinti:g1 === */
 

package/src/modals/PermissionsModal.vue

@@ -27,11 +27,19 @@
  * (`gorunum:v2-share`). A scoped style block here is silently dropped in the
  * web-component build — see web/tests/api/scopedStyles.test.ts.
  */
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, inject, watch } from 'vue';
 import type { FileApi, Grant, UserSuggestion } from '../composables/useFileApi';
 import type { ShareInfo } from '../types/FileNode';
 import { shareCliCommand } from '../lib/shareCli';
-import { STOCK_EXPIRY_DAYS, clampExpiryOptions, defaultExpiryDays, ttlCeilingHint, validUntilLine } from '../lib/shareTtl';
+import {
+  STOCK_EXPIRY_DAYS,
+  clampExpiryOptions,
+  defaultExpiryDays,
+  shareDetailLine,
+  ttlCeilingHint,
+  validUntilLine,
+} from '../lib/shareTtl';
+import { EXPLORER_CLOCK } from '../lib/timezone';
 import { resolveLocale } from '../locales/resolve';
 import { formatByteSize, useLocale } from '../composables/useLocale';
 import { actionIconSvg } from '../lib/actionIcons';
@@ -636,8 +644,11 @@ function expiryLine(days: number): string {
 }
 // What the server actually stored — shown under a fresh link so the real
 // expiry is visible even when the server shortened the request.
+// The explorer this dialog belongs to reads deadlines on its own clock.
+const clock = inject(EXPLORER_CLOCK, undefined);
+
 function validUntil(r: { expiresAt?: string | null } | null): string {
-  return validUntilLine(r?.expiresAt ?? null, tr.value ? 'tr' : 'en');
+  return validUntilLine(r?.expiresAt ?? null, tr.value ? 'tr' : 'en', clock);
 }
 
 /* ── the top tier: one switch, one sentence, one link ──────────────────── */
@@ -671,10 +682,10 @@ const linkDetail = computed(() => {
     if (shareMaxDl.value) bits.push(maxDlOptions.find((o) => o.v === shareMaxDl.value)?.l ?? '');
   } else if (downloadShares.value[0]) {
     const s = downloadShares.value[0];
-    bits.push(validUntilLine(s.expires_at ?? null, tr.value ? 'tr' : 'en'));
+    bits.push(validUntil({ expiresAt: s.expires_at ?? null }));
     if (s.max_downloads) bits.push(maxDlOptions.find((o) => o.v === s.max_downloads)?.l ?? String(s.max_downloads));
   }
-  return bits.filter(Boolean).join(' · ');
+  return shareDetailLine(bits);
 });
 
 /* Section summaries — a named section still has to say what is inside it, or