@brftech/filex-core 0.1.56

package/src/composables/useKeyboardShortcuts.ts

@@ -0,0 +1,144 @@
+/**
+ * useKeyboardShortcuts — binds FileExplorer's keyboard affordances.
+ *
+ * Activated whenever the explorer is mounted (only one instance per
+ * page is expected). Skips events that originate inside form controls
+ * so the user can type filenames in the search box, modals, etc.
+ */
+
+import { onMounted, onBeforeUnmount, type Ref } from 'vue';
+
+export interface ShortcutHandlers {
+  onDelete?: () => void;
+  onRename?: () => void; // F2
+  onSelectAll?: () => void; // Ctrl+A
+  onCut?: () => void; // Ctrl+X
+  onCopy?: () => void; // Ctrl+C
+  onPaste?: () => void; // Ctrl+V
+  onOpen?: () => void; // Enter
+  onClose?: () => void; // Escape
+  onFocusSearch?: () => void; // /
+  onDuplicate?: () => void; // Ctrl+D
+  onPathJump?: () => void; // Cmd+K / Ctrl+K
+  onGoUp?: () => void; // Alt+Up / Backspace (when nothing selected)
+  hasSelection?: () => boolean; // disambiguates Backspace
+}
+
+export function useKeyboardShortcuts(rootEl: Ref<HTMLElement | null>, handlers: ShortcutHandlers) {
+  function onKey(e: KeyboardEvent) {
+    const root = rootEl.value;
+    if (!root) return;
+
+    // Skip when the event originates inside a form control — don't
+    // want `Delete` while editing a filename, `/` while typing in the
+    // search box, etc. Escape always goes through so modals can close.
+    const target = e.target as HTMLElement | null;
+    if (
+      target &&
+      (target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable)
+    ) {
+      if (e.key !== 'Escape') return;
+    }
+
+    const ctrl = e.ctrlKey || e.metaKey;
+
+    switch (e.key) {
+      case 'Delete':
+        if (handlers.onDelete) {
+          e.preventDefault();
+          handlers.onDelete();
+        }
+        break;
+      case 'Backspace':
+        // Backspace = delete when something is selected (file-manager
+        // convention), parent-dir navigation otherwise. Without this
+        // disambiguation Backspace was firing onDelete with an empty
+        // selection and nothing happened, leaving users wondering why
+        // the obvious 'go back' key did nothing.
+        if (handlers.hasSelection?.() && handlers.onDelete) {
+          e.preventDefault();
+          handlers.onDelete();
+        } else if (handlers.onGoUp) {
+          e.preventDefault();
+          handlers.onGoUp();
+        }
+        break;
+      case 'F2':
+        if (handlers.onRename) {
+          e.preventDefault();
+          handlers.onRename();
+        }
+        break;
+      case 'Enter':
+        if (handlers.onOpen) {
+          handlers.onOpen();
+        }
+        break;
+      case 'Escape':
+        if (handlers.onClose) {
+          handlers.onClose();
+        }
+        break;
+      case '/':
+        if (handlers.onFocusSearch && !ctrl) {
+          e.preventDefault();
+          handlers.onFocusSearch();
+        }
+        break;
+      case 'a':
+      case 'A':
+        if (ctrl && handlers.onSelectAll) {
+          e.preventDefault();
+          handlers.onSelectAll();
+        }
+        break;
+      case 'x':
+      case 'X':
+        if (ctrl && handlers.onCut) {
+          e.preventDefault();
+          handlers.onCut();
+        }
+        break;
+      case 'c':
+      case 'C':
+        if (ctrl && handlers.onCopy) {
+          e.preventDefault();
+          handlers.onCopy();
+        }
+        break;
+      case 'v':
+      case 'V':
+        if (ctrl && handlers.onPaste) {
+          e.preventDefault();
+          handlers.onPaste();
+        }
+        break;
+      case 'd':
+      case 'D':
+        if (ctrl && handlers.onDuplicate) {
+          e.preventDefault();
+          handlers.onDuplicate();
+        }
+        break;
+      case 'k':
+      case 'K':
+        if (ctrl && handlers.onPathJump) {
+          e.preventDefault();
+          handlers.onPathJump();
+        }
+        break;
+      case 'ArrowUp':
+        // Alt+Up = parent dir (matches Finder / Files / Explorer).
+        if (e.altKey && handlers.onGoUp) {
+          e.preventDefault();
+          handlers.onGoUp();
+        }
+        break;
+    }
+  }
+
+  onMounted(() => window.addEventListener('keydown', onKey));
+  onBeforeUnmount(() => window.removeEventListener('keydown', onKey));
+}

package/src/composables/useLocale.ts

@@ -0,0 +1,60 @@
+/**
+ * useLocale — tr/en string table with a tiny `t()` helper.
+ *
+ * No i18n library — the catalogue is small enough to ship inline (see
+ * src/locales).
+ */
+
+import { computed, type Ref } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { messages } from '../locales';
+
+export function useLocale(localeRef: Ref<LocaleCode> | (() => LocaleCode)) {
+  const lookup = computed(() => {
+    const code = typeof localeRef === 'function' ? localeRef() : localeRef.value;
+    return messages[code] ?? messages.tr;
+  });
+
+  function t(key: string, vars: Record<string, string | number> = {}): string {
+    const raw = lookup.value[key] ?? key;
+    return Object.entries(vars).reduce(
+      (acc, [k, v]) => acc.replaceAll(`{${k}}`, String(v)),
+      raw,
+    );
+  }
+
+  function formatSize(bytes: number | undefined | null): string {
+    if (bytes == null || bytes <= 0) return '—';
+    const units: Array<[number, string]> = [
+      [1024 ** 4, 'unit.tb'],
+      [1024 ** 3, 'unit.gb'],
+      [1024 ** 2, 'unit.mb'],
+      [1024, 'unit.kb'],
+      [1, 'unit.bytes'],
+    ];
+    for (const [div, key] of units) {
+      if (bytes >= div) {
+        const val = bytes / div;
+        const rounded = val >= 100 ? Math.round(val) : val.toFixed(val >= 10 ? 1 : 2);
+        return `${rounded} ${t(key)}`;
+      }
+    }
+    return `${bytes} ${t('unit.bytes')}`;
+  }
+
+  /**
+   * Render a FileNode's basename with locale-aware overrides:
+   *   - `.trash` directory → "Çöp Kutusu" / "Trash"
+   *   - Trash entries are stored as `<Ymd-His>-<rand>__<original>` so
+   *     listings inside .trash/ would otherwise show timestamps. Strip
+   *     that prefix so the user sees the original basename.
+   */
+  function nodeDisplayName(node: { basename: string }): string {
+    if (node.basename === '.trash') return t('node.trash');
+    const m = node.basename.match(/^\d{8}-\d{6}-[A-Za-z0-9]+__(.+)$/);
+    if (m) return m[1];
+    return node.basename;
+  }
+
+  return { t, formatSize, nodeDisplayName };
+}

package/src/composables/useMonacoLoader.ts

@@ -0,0 +1,98 @@
+/**
+ * useMonacoLoader — fire-and-forget Monaco preloader.
+ *
+ * The preview/edit flow wants Monaco when available (best-in-class
+ * editor) and highlight.js for read-only syntax colour as a graceful
+ * fallback. Monaco is heavy (~5 MB), so we kick off the dynamic import
+ * at module-init time — by the time the user clicks "edit" on a code
+ * file (typically several seconds in), the chunk is already cached.
+ *
+ *   - `monacoPromise`     resolves to the Monaco namespace, or `null`
+ *                         if the package is not installed (peer
+ *                         missing) / load fails.
+ *   - `highlightPromise`  resolves to the highlight.js export, or
+ *                         `null` similarly.
+ *   - `getMonaco()`       returns the cached module synchronously
+ *                         (after `await monacoPromise`) so a click
+ *                         handler doesn't re-trigger the import.
+ *
+ * Both modules are externalized in the bundler config — the consumer
+ * either declares them as direct deps (Monaco UX) or doesn't (the
+ * highlight.js read-only path takes over). No build-time hard dep here.
+ */
+
+let monacoPromise: Promise<unknown | null> | null = null;
+let highlightPromise: Promise<unknown | null> | null = null;
+let monacoCached: unknown | null = null;
+let highlightCached: unknown | null = null;
+
+/**
+ * Kick off the Monaco import the first time someone calls
+ * `preloadEditor()` (typically the FileExplorer onMounted hook). Cheap
+ * to call repeatedly — only the first call actually triggers the
+ * dynamic import.
+ */
+export function preloadEditor(): void {
+  if (!monacoPromise) {
+    monacoPromise = import(/* @vite-ignore */ 'monaco-editor')
+      .then((mod) => {
+        monacoCached = (mod as { default?: unknown }).default ?? mod;
+        return monacoCached;
+      })
+      .catch(() => {
+        monacoCached = null;
+        return null;
+      });
+  }
+  if (!highlightPromise) {
+    highlightPromise = import(/* @vite-ignore */ 'highlight.js')
+      .then((mod) => {
+        highlightCached = (mod as { default?: unknown }).default ?? mod;
+        return highlightCached;
+      })
+      .catch(() => {
+        highlightCached = null;
+        return null;
+      });
+  }
+}
+
+/**
+ * Resolve Monaco. If preload hasn't been kicked off yet, this triggers
+ * it (and pays the load cost on the spot). Returns `null` when the
+ * package isn't installed.
+ */
+export async function ensureMonaco(): Promise<unknown | null> {
+  if (!monacoPromise) preloadEditor();
+  return monacoPromise!;
+}
+
+export async function ensureHighlight(): Promise<unknown | null> {
+  if (!highlightPromise) preloadEditor();
+  return highlightPromise!;
+}
+
+/** Synchronous cached lookup — null if Monaco not yet ready or absent. */
+export function getMonaco(): unknown | null {
+  return monacoCached;
+}
+
+export function getHighlight(): unknown | null {
+  return highlightCached;
+}
+
+/**
+ * Composable wrapper — components that want reactive "is Monaco ready
+ * yet?" semantics can read the resolved promise. The implementation is
+ * intentionally tiny: components don't need anything fancier than
+ * `await ensureMonaco()` inside the click handler.
+ */
+export function useMonacoLoader() {
+  preloadEditor();
+  return {
+    ensureMonaco,
+    ensureHighlight,
+    getMonaco,
+    getHighlight,
+  };
+}

package/src/composables/usePendingOps.ts

@@ -0,0 +1,200 @@
+/**
+ * usePendingOps — track async copy/move/delete operations.
+ *
+ * Backend POST /files/{copy,move,delete} returns `{op}` immediately
+ * (status='pending') and the actual S3 work runs in a worker. The
+ * client polls `/files/ops` every 2s while there's anything still
+ * pending or running so the user gets live feedback ("3/5 kopyalandı").
+ *
+ * Polling is reference-counted: callers `register(op)` after starting a
+ * new op; an interval ticks while the registered set has any non-
+ * terminal entries. Terminal ops (done/error) stay in the local cache
+ * for `RETAIN_MS` so the UI can flash a final state before they fade
+ * out, then a sweep removes them.
+ */
+
+import { computed, ref, onBeforeUnmount } from 'vue';
+import type { ExplorerConfig } from '../types/ExplorerConfig';
+import type { FileApi } from './useFileApi';
+
+export interface PendingOp {
+  id: number;
+  op_type: 'copy' | 'move' | 'delete';
+  status: 'pending' | 'running' | 'done' | 'error';
+  progress_total: number;
+  progress_done: number;
+  target_path: string | null;
+  source_dir: string | null;
+  source_count: number;
+  error_message: string | null;
+  started_at: string | null;
+  finished_at: string | null;
+  created_at: string | null;
+}
+
+const POLL_MS = 2000;
+const RETAIN_MS = 8000;
+
+/**
+ * normalizeOp maps the backend ops row (`{kind,total,done,failed,error,dest,
+ * status:'ok'|'failed'|'partial'|…}`) onto the PendingOp contract the tray
+ * renders (`{op_type,progress_total,progress_done,error_message,status:'done'|
+ * 'error'|…}`). Without this the tray showed "undefined/undefined" for a
+ * running op (progress_* were undefined) and never treated an 'ok'/'failed'
+ * row as terminal. Tolerant of an already-normalized shape (idempotent).
+ */
+function normalizeOp(raw: Record<string, unknown>): PendingOp {
+  const num = (...vals: unknown[]): number => {
+    for (const v of vals) if (typeof v === 'number') return v;
+    return 0;
+  };
+  const str = (...vals: unknown[]): string | null => {
+    for (const v of vals) if (typeof v === 'string' && v !== '') return v;
+    return null;
+  };
+  const rawStatus = String(raw.status ?? 'pending');
+  const status: PendingOp['status'] =
+    rawStatus === 'ok' || rawStatus === 'done'
+      ? 'done'
+      : rawStatus === 'failed' || rawStatus === 'partial' || rawStatus === 'error'
+        ? 'error'
+        : rawStatus === 'running'
+          ? 'running'
+          : 'pending';
+  const sources = Array.isArray(raw.sources) ? raw.sources : [];
+  const opType = str(raw.op_type, raw.kind) ?? 'delete';
+  return {
+    id: num(raw.id),
+    op_type: (opType === 'copy' || opType === 'move' ? opType : 'delete') as PendingOp['op_type'],
+    status,
+    progress_total: num(raw.progress_total, raw.total, sources.length),
+    progress_done: num(raw.progress_done, raw.done),
+    target_path: str(raw.target_path, raw.dest),
+    source_dir: str(raw.source_dir),
+    source_count: num(raw.source_count, sources.length),
+    error_message: str(raw.error_message, raw.error),
+    started_at: str(raw.started_at),
+    finished_at: str(raw.finished_at),
+    created_at: str(raw.created_at),
+  };
+}
+
+export interface UsePendingOpsOptions {
+  /** Called once an op flips into a terminal state (done|error). */
+  onSettled?: (op: PendingOp) => void;
+}
+
+export function usePendingOps(
+  config: ExplorerConfig,
+  api: FileApi,
+  opts: UsePendingOpsOptions = {},
+) {
+  void config; // kept for future per-instance config knobs
+  const ops = ref<PendingOp[]>([]);
+  const announced = new Set<number>();
+  const settledAt = new Map<number, number>();
+  // First poll after mount returns the server's recent-history window
+  // (last 5 min of done/error rows). Mark them announced silently and
+  // skip the callback so we don't double-fire toasts on F5.
+  let firstPollDone = false;
+
+  const hasActive = computed(() =>
+    ops.value.some((o) => o.status === 'pending' || o.status === 'running'),
+  );
+
+  let timer: ReturnType<typeof setInterval> | undefined;
+
+  function startPolling() {
+    if (timer) return;
+    if (!api.endpoints.opsList) return;
+    timer = setInterval(() => {
+      void poll();
+    }, POLL_MS);
+    // Kick a poll right away.
+    void poll();
+  }
+
+  function stopPolling() {
+    if (timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+  }
+
+  async function poll(): Promise<void> {
+    if (!api.endpoints.opsList) return;
+    try {
+      const res = await api.jsonFetch<{ ops: Record<string, unknown>[] }>(api.endpoints.opsList);
+      const incoming = (res.ops || []).map(normalizeOp);
+
+      for (const op of incoming) {
+        if ((op.status === 'done' || op.status === 'error') && !announced.has(op.id)) {
+          announced.add(op.id);
+          settledAt.set(op.id, Date.now());
+          if (firstPollDone) {
+            opts.onSettled?.(op);
+          }
+        }
+      }
+
+      // Filter incoming: pending/running always; settled only if user
+      // is currently seeing them in the local tray.
+      const localIds = new Set(ops.value.map((o) => o.id));
+      const visibleIncoming = incoming.filter((op) => {
+        if (op.status === 'pending' || op.status === 'running') return true;
+        if (!firstPollDone) return false;
+        return localIds.has(op.id);
+      });
+
+      const visibleIds = new Set(visibleIncoming.map((o) => o.id));
+      const local = ops.value.filter((o) => !visibleIds.has(o.id));
+      const merged = [...visibleIncoming, ...local];
+
+      firstPollDone = true;
+
+      // Sweep: drop terminal ops past RETAIN_MS.
+      const now = Date.now();
+      const after = merged.filter((o) => {
+        if (o.status === 'pending' || o.status === 'running') return true;
+        const at = settledAt.get(o.id);
+        return at !== undefined && now - at < RETAIN_MS;
+      });
+      ops.value = after;
+
+      if (!hasActive.value && after.length === 0) {
+        stopPolling();
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn('[usePendingOps] poll failed:', err);
+    }
+  }
+
+  function register(raw: PendingOp | Record<string, unknown>): void {
+    const op = normalizeOp(raw as Record<string, unknown>);
+    const exists = ops.value.some((o) => o.id === op.id);
+    if (!exists) {
+      ops.value = [op, ...ops.value];
+    }
+    startPolling();
+  }
+
+  function dismiss(id: number): void {
+    ops.value = ops.value.filter((o) => o.id !== id);
+    settledAt.delete(id);
+  }
+
+  onBeforeUnmount(() => {
+    stopPolling();
+  });
+
+  return {
+    ops,
+    hasActive,
+    register,
+    dismiss,
+    poll,
+    startPolling,
+    stopPolling,
+  };
+}

package/src/composables/useSelection.ts

@@ -0,0 +1,81 @@
+/**
+ * useSelection — multi-select state with Ctrl/Shift semantics.
+ *
+ * click(path, {ctrl, shift})
+ *   no-mod  → replace selection with [path]
+ *   ctrl    → toggle path in selection
+ *   shift   → range select from anchor to path
+ */
+
+import { ref, computed } from 'vue';
+import type { FileNode } from '../types/FileNode';
+
+export function useSelection(items: () => FileNode[]) {
+  const selected = ref<Set<string>>(new Set());
+  const anchor = ref<string | null>(null);
+
+  function click(path: string, mod: { ctrl?: boolean; shift?: boolean } = {}) {
+    if (mod.shift && anchor.value) {
+      const list = items();
+      const aIdx = list.findIndex((n) => n.path === anchor.value);
+      const bIdx = list.findIndex((n) => n.path === path);
+      if (aIdx === -1 || bIdx === -1) {
+        selected.value = new Set([path]);
+        anchor.value = path;
+        return;
+      }
+      const [lo, hi] = aIdx < bIdx ? [aIdx, bIdx] : [bIdx, aIdx];
+      const next = new Set<string>();
+      for (let i = lo; i <= hi; i++) next.add(list[i].path);
+      selected.value = next;
+      return;
+    }
+
+    if (mod.ctrl) {
+      const next = new Set(selected.value);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      selected.value = next;
+      anchor.value = path;
+      return;
+    }
+
+    selected.value = new Set([path]);
+    anchor.value = path;
+  }
+
+  function clear() {
+    selected.value = new Set();
+    anchor.value = null;
+  }
+
+  function selectAll() {
+    selected.value = new Set(items().map((n) => n.path));
+  }
+
+  function has(path: string): boolean {
+    return selected.value.has(path);
+  }
+
+  function add(path: string) {
+    const next = new Set(selected.value);
+    next.add(path);
+    selected.value = next;
+  }
+
+  function remove(path: string) {
+    const next = new Set(selected.value);
+    next.delete(path);
+    selected.value = next;
+  }
+
+  const size = computed(() => selected.value.size);
+  const isEmpty = computed(() => selected.value.size === 0);
+
+  const nodes = computed(() => {
+    const list = items();
+    return list.filter((n) => selected.value.has(n.path));
+  });
+
+  return { selected, anchor, click, clear, selectAll, has, add, remove, size, isEmpty, nodes };
+}