@lotics/ui 20.1.0 → 21.0.0

package/src/files_editor.tsx

@@ -1,8 +1,6 @@
-import { useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import { Button } from "./button";
-import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { MenuButton } from "./menu_button";
 import { Alert } from "./alert";
 import { FileGrid, type FileUpload } from "./file_grid";
 import { FileGalleryModal } from "./file_gallery_modal";
@@ -10,21 +8,22 @@ import type { GalleryLabels } from "./file_preview_types";
 import { type DisplayFile } from "./file_thumbnail";
 import { pickFiles } from "./file_picker";
 import { downloadFileFromUrl } from "./download";
+import { useLoticsLocale } from "./locale";
 
+/**
+ * The words the shipped bar pieces say. Each resolves **prop → `LoticsLocale`
+ * (`filesEditor`) → nothing**, so an app localizes by supplying its pack once at
+ * the root. A HOST verb is a plain `Button` and names itself.
+ */
 export interface FilesEditorLabels {
   upload: string;
   select: string;
   selectAll: string;
   deselectAll: string;
   done: string;
-  /** The select-mode actions menu trigger. */
-  menu: string;
   downloadAll: string;
-  /** Download-selected menu item, given the count. */
+  /** Download-selected, given the count. */
   downloadSelected: (n: number) => string;
-  /** Download-as-ZIP menu item (shown when `onDownloadZipSelected` + 2+ selected). */
-  downloadZip: string;
-  share: string;
   delete: string;
   removeTitle: string;
   removeMessage: string;
@@ -32,83 +31,151 @@ export interface FilesEditorLabels {
   removeConfirm: string;
 }
 
-const DEFAULT_LABELS: FilesEditorLabels = {
-  upload: "Upload",
-  select: "Select",
-  selectAll: "Select all",
-  deselectAll: "Deselect all",
-  done: "Done",
-  menu: "Menu",
-  downloadAll: "Download all",
-  downloadSelected: (n) => `Download (${n})`,
-  downloadZip: "Download as ZIP",
-  share: "Share",
-  delete: "Delete",
-  removeTitle: "Remove attachment?",
-  removeMessage: "This removes the file.",
-  removeCancel: "Cancel",
-  removeConfirm: "Remove",
-};
+interface FilesEditorCtx {
+  files: DisplayFile[];
+  selectMode: boolean;
+  setSelectMode: (on: boolean) => void;
+  selectedIds: Set<string>;
+  selected: DisplayFile[];
+  toggle: (id: string) => void;
+  setAll: (on: boolean) => void;
+  clear: () => void;
+  exit: () => void;
+  onAdd?: (files: File[]) => void;
+  onUpload?: () => void;
+  onRemove?: (id: string) => void;
+  accept?: string;
+  labels: FilesEditorLabels;
+  download: (files: DisplayFile[]) => void;
+  confirmRemove: (files: DisplayFile[], onConfirm: () => void) => void;
+}
+
+const Ctx = createContext<FilesEditorCtx | null>(null);
+
+function useCtx(who: string): FilesEditorCtx {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error(`<${who}> must be rendered inside <FilesEditor>`);
+  return ctx;
+}
+
+/**
+ * What a HOST verb reads: the files the user picked, and how to stand down
+ * afterwards. This is the whole point of the compound — an action the kit has
+ * never heard of ("read these with AI", "attach to the shipment", "send to the
+ * broker") is a plain `Button` in the bar that calls this.
+ *
+ * ```tsx
+ * function ReadWithAi() {
+ *   const { selected, exit } = useFilesEditorSelection();
+ *   return <Button title="Đọc bằng AI" disabled={selected.length === 0}
+ *                  onPress={() => { run(selected); exit(); }} />;
+ * }
+ * ```
+ */
+export function useFilesEditorSelection(): {
+  /** The picked files, in the grid's order. Empty outside select mode. */
+  selected: DisplayFile[];
+  /** Their ids. */
+  selectedIds: string[];
+  /** Every file on the surface, picked or not. */
+  files: DisplayFile[];
+  /** Is the surface in batch-select mode? */
+  selectMode: boolean;
+  /** Drop the selection, stay in select mode. */
+  clear: () => void;
+  /** Drop the selection AND leave select mode — what a verb does when it is done. */
+  exit: () => void;
+} {
+  const ctx = useCtx("useFilesEditorSelection");
+  return {
+    selected: ctx.selected,
+    selectedIds: ctx.selected.map((f) => f.id),
+    files: ctx.files,
+    selectMode: ctx.selectMode,
+    clear: ctx.clear,
+    exit: ctx.exit,
+  };
+}
 
 export interface FilesEditorProps {
   /** Completed/saved files. */
   files: DisplayFile[];
   /** The live add-queue (in-flight uploads) — pass through from your upload mechanism. */
   uploads?: FileUpload[];
-  /** Picked files → the host uploads + appends to `files`. Omit to hide Upload. */
+  /** Picked files → the host uploads + appends to `files`. Omit to hide `FilesEditorUpload`. */
   onAdd?: (files: File[]) => void;
   /** Override the Upload action's picker (e.g. a native document picker). When
-   *  set, the Upload button calls this instead of the built-in web `pickFiles`. */
+   *  set, `FilesEditorUpload` calls this instead of the built-in web `pickFiles`. */
   onUpload?: () => void;
-  /** Show a "Download as ZIP" action in select mode (2+ selected), given the files. */
-  onDownloadZipSelected?: (files: DisplayFile[]) => void;
-  /** Remove a completed file. Omit (or `readOnly`) for a view-only surface. */
+  /** Remove a completed file. Omit to hide `FilesEditorRemove` and the per-tile ✕. */
   onRemove?: (id: string) => void;
   /** Show the per-tile ✕ during SELECT mode (default `true`). The default
    *  (non-select) view NEVER shows a ✕ regardless — this governs select mode
-   *  only. Set `false` when batch Select → Menu → Delete is the sole delete
-   *  path (e.g. a cell popover), so a tile in select mode toggles selection and
-   *  nothing else. */
+   *  only. Set `false` when a bar action is the sole delete path, so a tile in
+   *  select mode toggles selection and nothing else. */
   selectTileRemove?: boolean;
   /** Cancel an in-flight upload / retry a failed one (when using `uploads`). */
   onUploadRemove?: (id: string) => void;
   onRetry?: (id: string) => void;
   onRetryAll?: () => void;
-  /** Show a Share action in select mode, given the selected files. Omit to hide it. */
-  onShareSelected?: (files: DisplayFile[]) => void;
   /** Override the default download (`downloadFileFromUrl`). */
   onDownload?: (file: DisplayFile) => void;
-  /** Download + preview only (no Upload / Select / remove). */
-  readOnly?: boolean;
   /** Native `accept` filter for the file picker. */
   accept?: string;
   itemSize?: number;
   minItemWidth?: number;
   /** Fixed column count for the grid (passed through to `FileGrid`). */
   columns?: number;
-  /** Cap the grid's height (px) so it SCROLLS and the toolbar pins below it —
+  /** Cap the grid's height (px) so it SCROLLS and the bar pins below it —
    *  for a height-bounded container (a popover, a drawer). Omit in free-flow
    *  layouts (a form field) where the grid should grow and the page scrolls. */
   gridMaxHeight?: number;
-  /** Translated labels. Defaults to English. */
+  /** Per-instance overrides for the shipped bar pieces. Falls back to the
+   *  active `LoticsLocale`. */
   labels?: Partial<FilesEditorLabels>;
   /** Credentials mode for the built-in gallery's preview fetches — `"include"`
    *  for the host's auth-gated proxy URLs, omitted for an app's presigned URLs.
    *  See `FilePreviewProps`. */
   credentials?: RequestCredentials;
   /** Translated labels for the built-in full-screen gallery (its toolbar action
-   *  buttons + confirm dialog). Defaults to English. */
+   *  buttons + confirm dialog). Defaults to the active locale. */
   galleryLabels?: Partial<GalleryLabels>;
+  /**
+   * The bar (and anything else) BELOW the grid. Compose it from the shipped
+   * pieces plus your own verbs; omit it entirely for a grid that only previews.
+   */
+  children?: ReactNode;
 }
 
 /**
- * The all-in-one attachment surface: an upload-aware thumbnail grid (`FileGrid`)
- * with a toolbar BELOW it, a batch SELECT mode, full-screen preview
- * (`FileGalleryModal`), and download / share / Alert-confirmed remove. Agnostic —
- * the host wires `onAdd` (picked files → its upload) and `onRemove`; select mode,
- * the gallery, download and the remove confirm are all internal. Mirrors the
- * frontend `files_editor`. For a plain row list use `FileRows`; for the bare
- * upload grid use `FileGrid`.
+ * The attachment surface, as a COMPOUND: this root owns the parts a host cannot
+ * reasonably re-implement — the batch selection, the full-screen gallery, and the
+ * Alert-confirmed remove — and renders the upload-aware grid (`FileGrid`). What
+ * you can DO to the files is composed below it, so a surface offers exactly its
+ * own verbs in its own order.
+ *
+ * It was a monolith with a fixed toolbar and a generic "Menu" holding whatever
+ * the kit happened to support (download, share, delete). That shape had two
+ * costs, and both showed up in real apps: a HOST verb had nowhere to go, so a
+ * screen that needed one (an AI read over the picked papers) hand-rolled the
+ * whole grid and lost the gallery and the upload queue with it; and the actions
+ * that DID exist hid behind a label that names a widget rather than an act, five
+ * interactions deep for "delete this scan".
+ *
+ * ```tsx
+ * <FilesEditor files={docs} uploads={queue} onAdd={add} onRemove={remove}>
+ *   <FilesEditorBar>
+ *     <FilesEditorUpload />
+ *     <FilesEditorSelect />
+ *     <FilesEditorBarSpacer />
+ *     <FilesEditorDownload />
+ *     <FilesEditorRemove />
+ *   </FilesEditorBar>
+ * </FilesEditor>
+ * ```
+ *
+ * For a plain row list use `FileRows`; for the bare grid with no selection or
+ * gallery, `FileGrid`.
  */
 export function FilesEditor(props: FilesEditorProps) {
   const {
@@ -116,15 +183,12 @@ export function FilesEditor(props: FilesEditorProps) {
     uploads,
     onAdd,
     onUpload,
-    onDownloadZipSelected,
     onRemove,
     selectTileRemove = true,
     onUploadRemove,
     onRetry,
     onRetryAll,
-    onShareSelected,
     onDownload,
-    readOnly = false,
     accept,
     itemSize,
     minItemWidth,
@@ -133,31 +197,44 @@ export function FilesEditor(props: FilesEditorProps) {
     labels,
     credentials,
     galleryLabels,
+    children,
   } = props;
-  const l = { ...DEFAULT_LABELS, ...labels };
+  const loc = useLoticsLocale().filesEditor;
+  const l = useMemo(() => ({ ...loc, ...labels }), [loc, labels]);
 
-  const [selectMode, setSelectMode] = useState(false);
-  const [selected, setSelected] = useState<Set<string>>(() => new Set());
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [selectMode, setSelectModeState] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
   const [galleryIndex, setGalleryIndex] = useState<number | null>(null);
 
-  const hasFiles = files.length > 0;
-  const allSelected = hasFiles && selected.size === files.length;
-  const selectedFiles = files.filter((f) => selected.has(f.id));
+  const selected = useMemo(() => files.filter((f) => selectedIds.has(f.id)), [files, selectedIds]);
+
+  const clear = useCallback(() => setSelectedIds(new Set()), []);
+  const exit = useCallback(() => { setSelectModeState(false); setSelectedIds(new Set()); }, []);
+  const setSelectMode = useCallback((on: boolean) => { if (on) setSelectModeState(true); else exit(); }, [exit]);
+  const toggle = useCallback((id: string) => {
+    setSelectedIds((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
+  }, []);
+  const setAll = useCallback((on: boolean) => {
+    setSelectedIds(on ? new Set(files.map((f) => f.id)) : new Set());
+  }, [files]);
+
+  const download = useCallback((fs: DisplayFile[]) => {
+    for (const f of fs) {
+      if (onDownload) onDownload(f);
+      else void downloadFileFromUrl(f.url, f.filename, { credentials });
+    }
+  }, [onDownload, credentials]);
 
-  const toggle = (id: string) =>
-    setSelected((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
-  const exitSelect = () => { setSelectMode(false); setSelected(new Set()); };
-  const download = (fs: DisplayFile[]) =>
-    fs.forEach((f) => (onDownload ? onDownload(f) : void downloadFileFromUrl(f.url, f.filename, { credentials })));
-  const confirmRemove = (onConfirm: () => void) =>
+  const confirmRemove = useCallback((fs: DisplayFile[], onConfirm: () => void) => {
     Alert.alert(l.removeTitle, l.removeMessage, [
       { text: l.removeCancel, style: "cancel" },
       { text: l.removeConfirm, style: "destructive", onPress: onConfirm },
     ]);
-  const upload = () => {
-    if (!onAdd) return;
-    void pickFiles({ multiple: true, accept }).then((picked) => { if (picked.length > 0) onAdd(picked); });
+  }, [l.removeTitle, l.removeMessage, l.removeCancel, l.removeConfirm]);
+
+  const ctx: FilesEditorCtx = {
+    files, selectMode, setSelectMode, selectedIds, selected, toggle, setAll, clear, exit,
+    onAdd, onUpload, onRemove, accept, labels: l, download, confirmRemove,
   };
 
   const grid = (
@@ -167,14 +244,16 @@ export function FilesEditor(props: FilesEditorProps) {
       itemSize={itemSize}
       minItemWidth={minItemWidth}
       columns={columns}
-      selectedIds={selectMode ? selected : undefined}
+      selectedIds={selectMode ? selectedIds : undefined}
       onToggleSelect={selectMode ? toggle : undefined}
       onFilePress={selectMode ? undefined : (f) => setGalleryIndex(files.findIndex((x) => x.id === f.id))}
       // The per-tile ✕ is a SELECT-mode affordance (opt-out via `selectTileRemove`)
       // — the default view stays a clean preview surface so a stray tap can't drop a
-      // file, and a `selectTileRemove={false}` surface deletes only via the menu.
+      // file, and a `selectTileRemove={false}` surface deletes only via the bar.
       onDisplayRemove={
-        !readOnly && selectMode && selectTileRemove && onRemove ? (id) => confirmRemove(() => onRemove(id)) : undefined
+        selectMode && selectTileRemove && onRemove
+          ? (id) => confirmRemove(files.filter((f) => f.id === id), () => onRemove(id))
+          : undefined
       }
       onUploadRemove={onUploadRemove}
       onRetry={onRetry}
@@ -183,74 +262,104 @@ export function FilesEditor(props: FilesEditorProps) {
   );
 
   return (
-    <View style={styles.root}>
-      {gridMaxHeight !== undefined ? (
-        <ScrollView style={{ maxHeight: gridMaxHeight }}>{grid}</ScrollView>
-      ) : (
-        grid
-      )}
+    <Ctx.Provider value={ctx}>
+      <View style={styles.root}>
+        {gridMaxHeight !== undefined ? <ScrollView style={{ maxHeight: gridMaxHeight }}>{grid}</ScrollView> : grid}
+        {children}
+        <FileGalleryModal
+          files={files}
+          activeIndex={galleryIndex}
+          onIndexChange={setGalleryIndex}
+          onRemove={onRemove}
+          onDownload={onDownload}
+          credentials={credentials}
+          labels={galleryLabels}
+        />
+      </View>
+    </Ctx.Provider>
+  );
+}
+
+/** The action row under the grid. Lay it out left-to-right; a
+ *  `FilesEditorBarSpacer` pushes what follows to the right edge. */
+export function FilesEditorBar({ children }: { children: ReactNode }) {
+  return <View style={styles.bar}>{children}</View>;
+}
 
-      {readOnly ? (
-        hasFiles ? (
-          <View style={styles.bar}>
-            <View style={styles.spacer} />
-            <Button title={l.downloadAll} color="secondary" onPress={() => download(files)} />
-          </View>
-        ) : null
-      ) : selectMode ? (
-        <View style={styles.bar}>
-          <Button
-            title={allSelected ? l.deselectAll : l.selectAll}
-            color="muted"
-            onPress={() => setSelected(allSelected ? new Set() : new Set(files.map((f) => f.id)))}
-          />
-          <Popover open={menuOpen} onOpenChange={setMenuOpen} align="start">
-            <PopoverTrigger>
-              <Button title={l.menu} color="secondary" disabled={selected.size === 0} onPress={() => setMenuOpen(true)} />
-            </PopoverTrigger>
-            <PopoverContent>
-              <View style={styles.menu}>
-                <MenuButton icon="download" title={l.downloadSelected(selected.size)} onPress={() => { setMenuOpen(false); download(selectedFiles); }} />
-                {onDownloadZipSelected && selected.size > 1 ? (
-                  <MenuButton icon="file-down" title={l.downloadZip} onPress={() => { setMenuOpen(false); onDownloadZipSelected(selectedFiles); }} />
-                ) : null}
-                {onShareSelected ? (
-                  <MenuButton icon="share" title={l.share} onPress={() => { setMenuOpen(false); onShareSelected(selectedFiles); }} />
-                ) : null}
-                {onRemove ? (
-                  <MenuButton icon="trash" title={l.delete} danger onPress={() => { setMenuOpen(false); confirmRemove(() => { selectedFiles.forEach((f) => onRemove(f.id)); exitSelect(); }); }} />
-                ) : null}
-              </View>
-            </PopoverContent>
-          </Popover>
-          <View style={styles.spacer} />
-          <Button title={l.done} color="secondary" onPress={exitSelect} />
-        </View>
-      ) : (
-        <View style={styles.bar}>
-          {onAdd || onUpload ? <Button title={l.upload} color="primary" onPress={onUpload ?? upload} /> : null}
-          {hasFiles ? <Button title={l.select} color="secondary" onPress={() => setSelectMode(true)} /> : null}
-          <View style={styles.spacer} />
-          {hasFiles ? <Button title={l.downloadAll} color="secondary" onPress={() => download(files)} /> : null}
-        </View>
-      )}
+/** Pushes the rest of the bar to the right edge. */
+export function FilesEditorBarSpacer() {
+  return <View style={styles.spacer} />;
+}
 
-      <FileGalleryModal
-        files={files}
-        activeIndex={galleryIndex}
-        onIndexChange={setGalleryIndex}
-        onRemove={!readOnly && onRemove ? onRemove : undefined}
-        onDownload={onDownload}
-        credentials={credentials}
-        labels={galleryLabels}
-      />
-    </View>
+/** Add files. Renders nothing when the root was given neither `onAdd` nor
+ *  `onUpload` — a surface cannot offer an upload it has no handler for. */
+export function FilesEditorUpload({ title }: { title?: string } = {}) {
+  const { onAdd, onUpload, accept, labels } = useCtx("FilesEditorUpload");
+  if (!onAdd && !onUpload) return null;
+  const pick = () => {
+    if (onUpload) { onUpload(); return; }
+    void pickFiles({ multiple: true, accept }).then((picked) => { if (picked.length > 0) onAdd?.(picked); });
+  };
+  return <Button title={title ?? labels.upload} color="primary" onPress={pick} />;
+}
+
+/** Enter batch-select mode, and leave it. One control, because it is one
+ *  toggle — it reads "Chọn" at rest and "Xong" while selecting. */
+export function FilesEditorSelect() {
+  const { files, selectMode, setSelectMode, labels } = useCtx("FilesEditorSelect");
+  if (files.length === 0) return null;
+  return selectMode ? (
+    <Button title={labels.done} color="secondary" onPress={() => setSelectMode(false)} />
+  ) : (
+    <Button title={labels.select} color="secondary" onPress={() => setSelectMode(true)} />
+  );
+}
+
+/** Select-all / deselect-all. Only meaningful while selecting, so it renders
+ *  nothing at rest. */
+export function FilesEditorSelectAll() {
+  const { files, selectMode, selectedIds, setAll, labels } = useCtx("FilesEditorSelectAll");
+  if (!selectMode || files.length === 0) return null;
+  const allSelected = selectedIds.size === files.length;
+  return <Button title={allSelected ? labels.deselectAll : labels.selectAll} color="muted" onPress={() => setAll(!allSelected)} />;
+}
+
+/**
+ * Download. Acts on the SELECTION while selecting and on everything at rest, so
+ * it is one control rather than two that mean the same thing in different modes.
+ */
+export function FilesEditorDownload() {
+  const { files, selectMode, selected, download, labels } = useCtx("FilesEditorDownload");
+  if (files.length === 0) return null;
+  if (!selectMode) return <Button title={labels.downloadAll} color="secondary" onPress={() => download(files)} />;
+  return (
+    <Button
+      title={labels.downloadSelected(selected.length)}
+      color="secondary"
+      disabled={selected.length === 0}
+      onPress={() => download(selected)}
+    />
+  );
+}
+
+/** Remove the picked files, behind the root's Alert confirm. Renders nothing
+ *  when the root was given no `onRemove`, and nothing at rest — removing is an
+ *  act on a chosen set, never on "everything". */
+export function FilesEditorRemove() {
+  const { selectMode, selected, onRemove, confirmRemove, exit, labels } = useCtx("FilesEditorRemove");
+  if (!onRemove || !selectMode) return null;
+  return (
+    <Button
+      title={labels.delete}
+      color="danger-secondary"
+      disabled={selected.length === 0}
+      onPress={() => confirmRemove(selected, () => { for (const f of selected) onRemove(f.id); exit(); })}
+    />
   );
 }
 
 const styles = StyleSheet.create({
   root: { gap: 10 },
-  bar: { flexDirection: "row", alignItems: "center", gap: 8 },
+  bar: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
   spacer: { flex: 1 },
-  menu: { minWidth: 200, gap: 2, padding: 4 },
 });

package/src/locale.tsx

@@ -118,6 +118,36 @@ export interface LoticsLocale {
   fileDropzone: { label: string; hint: string; drop: string };
   /** `FileThumbnail`'s `RemoveButton`: the ✕ a11y name. */
   fileThumbnail: { remove: string };
+  /** `FilesEditor`'s shipped bar pieces (upload · select · select-all · download
+   *  · remove) and the remove confirm. A HOST verb is a plain `Button` and names
+   *  itself, so nothing here is about what an app happens to do with a file. */
+  filesEditor: {
+    upload: string;
+    select: string;
+    selectAll: string;
+    deselectAll: string;
+    done: string;
+    downloadAll: string;
+    downloadSelected: (n: number) => string;
+    delete: string;
+    removeTitle: string;
+    removeMessage: string;
+    removeCancel: string;
+    removeConfirm: string;
+  };
+  /** `FileGrid`'s in-flight tiles (`UploadingThumbnail`) + its retry-all footer:
+   *  the states an upload can be caught in, and what to press about them. The
+   *  plain `uploading` state has no entry on purpose — a spinner needs no word in
+   *  any language, and only a state that wants ATTENTION earns one. */
+  fileUpload: {
+    paused: string;
+    retrying: string;
+    failed: string;
+    /** Retry is futile on the same input — a dead picker ref, or zero bytes. */
+    unavailable: string;
+    retry: string;
+    retryAll: string;
+  };
   /** `ImageGallery`: the empty state, the inline rotate controls, and the
    *  press-to-zoom a11y name. */
   imageGallery: { empty: string; rotateLeft: string; rotateRight: string; zoom: string };
@@ -250,6 +280,28 @@ export const en: LoticsLocale = {
   overlay: { close: "Close" },
   fileDropzone: { label: "Drag files here", hint: "or click, or paste (⌘V)", drop: "Drop to upload" },
   fileThumbnail: { remove: "Remove" },
+  filesEditor: {
+    upload: "Upload",
+    select: "Select",
+    selectAll: "Select all",
+    deselectAll: "Deselect all",
+    done: "Done",
+    downloadAll: "Download all",
+    downloadSelected: (n: number) => `Download (${n})`,
+    delete: "Delete",
+    removeTitle: "Remove attachment?",
+    removeMessage: "This removes the file.",
+    removeCancel: "Cancel",
+    removeConfirm: "Remove",
+  },
+  fileUpload: {
+    paused: "Paused",
+    retrying: "Retrying",
+    failed: "Upload failed",
+    unavailable: "Can't upload",
+    retry: "Retry upload",
+    retryAll: "Retry all",
+  },
   imageGallery: { empty: "No images.", rotateLeft: "Rotate left", rotateRight: "Rotate right", zoom: "Zoom image" },
   infoPopover: { more: "More information" },
   matrix: { total: "Total", less: "Less", more: "More" },
@@ -376,6 +428,28 @@ export const vi: LoticsLocale = {
   overlay: { close: "Đóng" },
   fileDropzone: { label: "Kéo tệp vào đây", hint: "hoặc bấm chọn, hoặc dán (Ctrl+V)", drop: "Thả để tải lên" },
   fileThumbnail: { remove: "Xóa" },
+  filesEditor: {
+    upload: "Tải lên",
+    select: "Chọn",
+    selectAll: "Chọn tất cả",
+    deselectAll: "Bỏ chọn",
+    done: "Xong",
+    downloadAll: "Tải tất cả",
+    downloadSelected: (n: number) => `Tải ${n} tệp`,
+    delete: "Xóa",
+    removeTitle: "Xóa tệp?",
+    removeMessage: "Tệp sẽ bị gỡ khỏi bản ghi.",
+    removeCancel: "Hủy",
+    removeConfirm: "Xóa",
+  },
+  fileUpload: {
+    paused: "Tạm dừng",
+    retrying: "Đang thử lại",
+    failed: "Không tải lên được",
+    unavailable: "Tệp không đọc được",
+    retry: "Thử lại",
+    retryAll: "Thử lại tất cả",
+  },
   imageGallery: { empty: "Chưa có ảnh.", rotateLeft: "Xoay trái", rotateRight: "Xoay phải", zoom: "Phóng to ảnh" },
   infoPopover: { more: "Thông tin thêm" },
   matrix: { total: "Tổng", less: "Ít", more: "Nhiều" },

package/src/uploading_thumbnail.tsx

@@ -14,9 +14,11 @@ import { isImageMimeType } from "./mime";
 /** In-flight upload states (everything except a completed file). */
 export type UploadStatus = "preparing" | "queued" | "uploading" | "paused_offline" | "retrying" | "error";
 
-/** Status text for the non-happy-path states. i18n-free defaults (English); the
- *  Lotics host injects translations. The common `uploading` state stays text-free
- *  (a spinner is self-evident) — only states that need attention get a word. */
+/** Status text for the non-happy-path states. This component stays i18n-free —
+ *  `FileGrid` resolves the words (per-instance labels over the active
+ *  `LoticsLocale`) and hands them in, so nothing below it reads context. The
+ *  common `uploading` state stays text-free (a spinner is self-evident) — only
+ *  states that need attention get a word. */
 export interface UploadStatusLabels {
   /** Upload paused because the device is offline. Default "Paused". */
   paused?: string;