@lotics/ui 7.16.0 → 7.18.0

package/AGENTS.md

@@ -21,9 +21,11 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
   app stays English. Wired so far: `Pagination`, `SortHeader`/`Table.sortLabels`, `OptionList`
   (+ `Select`/`Combobox` built on it), `FilterChip`, `Drawer`, `Confidence`, `RemainderMeter`,
   `ChangeReview`/`ChangeReviewActions`, `DateRangeFilterField`/`DateFilter` (presets + footer +
-  time-segment a11y, one `dateRange` slice), and `FormField` (the `optional` marker). Adding a string to a wired component's `*Labels` forces
+  time-segment a11y, one `dateRange` slice), `FormField` (the `optional` marker), and
+  `FileRows`/`FileGalleryModal`/`FilePreview` (one `gallery` slice: the ⋯ menu incl. remove+confirm,
+  the gallery chrome, and the preview captions). Adding a string to a wired component's `*Labels` forces
   both packs in `locale.tsx` to fill it (compile error) — that's how the kit avoids a silent English
-  leak. Not yet on the provider (pass `labels` for now): calendar/gantt, the file/preview/comment labels.
+  leak. Not yet on the provider (pass `labels` for now): calendar/gantt, the comment labels.
 
 ---
 
@@ -532,7 +534,8 @@ controls — while **status/severity/diffs use functional colour** the way the r
 - **Confidence** — a 3-tick meter + the full phrase ("High confidence" / "Medium" / "Low"), emerald /
   amber / zinc by level; `labels` to translate (one phrase per level).
 - **Finding severity** — a coloured dot `Badge` + metric: red critical, amber warning, blue note,
-  emerald on-track (+ stacking order, most severe first).
+  emerald on-track (+ stacking order, most severe first). The badge words localize through
+  `LoticsLocaleProvider` (`locale.finding`, override per-instance via `labels`) — never hardcode them.
 - **Stepper / AgentRun nodes** — progress dots on a spine: `current` a **pulsing accent ring** (white
   centre), `done` a filled accent dot + **white check**, `upcoming` a faint **grey** ring, the terminal
   `complete` a **blackish ring + black check**, `warning` **amber**. Default accent is neutral ink

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.16.0",
+  "version": "7.18.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/file_gallery_modal.tsx

@@ -18,7 +18,8 @@ import type { DisplayFile } from "./file_thumbnail";
 import { FilePreview } from "./file_preview";
 import { isImageMimeType } from "./mime";
 import { useImageRotation, type ImageRotation } from "./use_image_rotation";
-import { resolveGalleryLabels, type GalleryLabels } from "./file_preview_types";
+import { type GalleryLabels } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 import { downloadFileFromUrl } from "./download";
 import { ActionMenu, type ActionMenuItem } from "./action_menu";
 import { useScreenSize } from "./use_screen_size";
@@ -153,7 +154,7 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
   const file = files[activeIndex];
   if (!file) return null;
 
-  const l = resolveGalleryLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
   const isImage = isImageMimeType(file.mimeType);
   const total = files.length;
   const rotated = rot.rotationFor(file.id) !== 0;

package/src/file_preview.tsx

@@ -3,7 +3,8 @@ import { Text } from "./text";
 import { DocumentCard } from "./file_thumbnail";
 import { isImageMimeType } from "./mime";
 import { RotatableImage } from "./rotatable_image";
-import { type FilePreviewProps, resolveLabels } from "./file_preview_types";
+import { type FilePreviewProps } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 
 /**
  * Native (mobile) fallback: images render full-bleed; everything else shows a
@@ -11,7 +12,7 @@ import { type FilePreviewProps, resolveLabels } from "./file_preview_types";
  * the `.web.tsx` variant carries it; native consumers download instead.
  */
 export function FilePreview({ file, labels, rotation }: FilePreviewProps) {
-  const l = resolveLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
   if (isImageMimeType(file.mimeType)) {
     return <RotatableImage uri={file.url} alt={file.filename} rotation={rotation} />;
   }

package/src/file_preview.web.tsx

@@ -13,7 +13,8 @@ import {
   isAudioMimeType,
   isPreviewableMimeType,
 } from "./mime";
-import { type FilePreviewProps, resolveLabels, type PreviewLabels } from "./file_preview_types";
+import { type FilePreviewProps, type PreviewLabels } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 import { SpreadsheetView } from "./spreadsheet_view";
 import { RotatableImage } from "./rotatable_image";
 import { downloadFileFromUrl } from "./download";
@@ -36,7 +37,7 @@ import { colors } from "./colors";
  * (purity test). Lifted from the frontend gallery so both share one renderer.
  */
 export function FilePreview({ file, labels, onError, rotation, credentials }: FilePreviewProps) {
-  const l = resolveLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
 
   if (isImageMimeType(file.mimeType)) {
     return (

package/src/file_preview_types.ts

@@ -2,8 +2,9 @@ import type { DisplayFile } from "./file_thumbnail";
 
 /**
  * Caption/error strings shown inside the preview. `@lotics/ui` is i18n-free
- * (purity test forbids lingui), so the host passes translated strings; English
- * is the fallback.
+ * (purity test forbids lingui): the strings resolve from the `LoticsLocale`
+ * `gallery` slice (`LoticsLocaleProvider`, default English) with a per-instance
+ * `labels` prop as the one-off override.
  */
 export interface PreviewLabels {
   notAvailable: string;
@@ -12,13 +13,6 @@ export interface PreviewLabels {
   passwordProtected: string;
 }
 
-export const defaultPreviewLabels: PreviewLabels = {
-  notAvailable: "Preview not available",
-  loadFailed: "Failed to load preview",
-  download: "Download file",
-  passwordProtected: "This file is password-protected and cannot be previewed",
-};
-
 export interface FilePreviewProps {
   file: DisplayFile;
   /** Override any subset of the English default labels. */
@@ -40,14 +34,10 @@ export interface FilePreviewProps {
   credentials?: RequestCredentials;
 }
 
-export function resolveLabels(labels: Partial<PreviewLabels> | undefined): PreviewLabels {
-  return labels ? { ...defaultPreviewLabels, ...labels } : defaultPreviewLabels;
-}
-
 /**
  * Strings for the full-screen `FileGalleryModal` chrome (toolbar + nav), on top
- * of the inner `PreviewLabels`. Same i18n-free contract: host passes translated
- * strings, English is the fallback.
+ * of the inner `PreviewLabels`. Same contract: the `LoticsLocale` `gallery`
+ * slice supplies them; a per-instance `labels` prop overrides.
  */
 export interface GalleryLabels extends PreviewLabels {
   close: string;
@@ -65,22 +55,3 @@ export interface GalleryLabels extends PreviewLabels {
   saveRotation: string;
 }
 
-export const defaultGalleryLabels: GalleryLabels = {
-  ...defaultPreviewLabels,
-  close: "Close",
-  previous: "Previous",
-  next: "Next",
-  actions: "Actions",
-  openExternal: "Open in new tab",
-  remove: "Remove",
-  removeConfirmTitle: "Remove file",
-  removeConfirmMessage: (filename) => `Remove "${filename}"?`,
-  cancel: "Cancel",
-  rotateLeft: "Rotate left",
-  rotateRight: "Rotate right",
-  saveRotation: "Save rotation",
-};
-
-export function resolveGalleryLabels(labels: Partial<GalleryLabels> | undefined): GalleryLabels {
-  return labels ? { ...defaultGalleryLabels, ...labels } : defaultGalleryLabels;
-}

package/src/file_rows.tsx

@@ -12,7 +12,8 @@ import { ActionMenu, type ActionMenuItem } from "./action_menu";
 import { FileGalleryModal } from "./file_gallery_modal";
 import { resolveMime } from "./file_badge";
 import { downloadFileFromUrl } from "./download";
-import { resolveGalleryLabels, type GalleryLabels } from "./file_preview_types";
+import { type GalleryLabels } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 import type { DisplayFile } from "./file_thumbnail";
 
 export interface FileRowsProps {
@@ -47,7 +48,7 @@ export interface FileRowsProps {
  */
 export function FileRows({ files, meta, onRemove, onOpenExternal, onDownload, onError, labels, gap = 8, credentials }: FileRowsProps) {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const l = resolveGalleryLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
 
   if (files.length === 0) return null;
 

package/src/finding.tsx

@@ -4,11 +4,14 @@ import { Text } from "./text";
 import { Badge } from "./badge";
 import { Button } from "./button";
 import { Sources, type SourceRef } from "./sources";
+import { useLoticsLocale } from "./locale";
 
 export type FindingSeverity = "critical" | "warning" | "info" | "positive";
 
 export interface FindingProps {
   severity?: FindingSeverity;
+  /** Translated severity words. Defaults resolve through the locale ("Critical" …). */
+  labels?: Partial<FindingLabels>;
   /** The headline — what the agent found. */
   title: string;
   /** One or two lines explaining it. */
@@ -28,12 +31,13 @@ export interface FindingProps {
 
 // Severity reads through a coloured dot badge + the order it's stacked in (most
 // severe first): red critical, amber warning, blue note, emerald on-track. The
-// metric takes the same colour.
-const SEV: Record<FindingSeverity, { word: string; color: ColorName }> = {
-  critical: { word: "Critical", color: "red" },
-  warning: { word: "Warning", color: "amber" },
-  info: { word: "Note", color: "blue" },
-  positive: { word: "On track", color: "emerald" },
+// metric takes the same colour. Words resolve prop → locale → English default.
+export type FindingLabels = Record<FindingSeverity, string>;
+const SEV_COLOR: Record<FindingSeverity, ColorName> = {
+  critical: "red",
+  warning: "amber",
+  info: "blue",
+  positive: "emerald",
 };
 
 /**
@@ -45,7 +49,9 @@ const SEV: Record<FindingSeverity, { word: string; color: ColorName }> = {
  * carries its own next action.
  */
 export function Finding(props: FindingProps) {
-  const sev = SEV[props.severity ?? "info"];
+  const severity = props.severity ?? "info";
+  const words = { ...useLoticsLocale().finding, ...props.labels };
+  const sev = { word: words[severity], color: SEV_COLOR[severity] };
   return (
     <View style={styles.card}>
       <View style={styles.header}>

package/src/locale.tsx

@@ -2,8 +2,10 @@ import { createContext, useContext, type ReactNode } from "react";
 import { type PaginationLabels } from "./pagination";
 import { type SortHeaderLabels } from "./sort_header";
 import { type ConfidenceLabels } from "./confidence";
+import { type FindingLabels } from "./finding";
 import { type RemainderMeterLabels } from "./remainder_meter";
 import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
+import { type GalleryLabels } from "./file_preview_types";
 
 /**
  * The kit's localizable strings, one slice per string-bearing component. A
@@ -36,6 +38,8 @@ export interface LoticsLocale {
   drawer: { previous: string; next: string; close: string };
   /** `Confidence`: the full level phrase ("High confidence" …). */
   confidence: ConfidenceLabels;
+  /** `Finding`: the severity badge word ("Critical" …). */
+  finding: FindingLabels;
   /** `RemainderMeter`: the applied / remaining / over / exact captions. */
   remainderMeter: Required<RemainderMeterLabels>;
   /** `ChangeReview` (+ `ChangeReviewActions`): the review-card chrome — the
@@ -58,6 +62,10 @@ export interface LoticsLocale {
    *  from/to, the footer Clear/Done, the trigger placeholder, and the time-field
    *  segment a11y names. */
   dateRange: DateRangeFilterFieldLabels;
+  /** `FileRows` / `FileGalleryModal` / `FilePreview`: the per-row ⋯ menu
+   *  (open/download/remove + the confirm), the gallery chrome (close, prev/next,
+   *  rotate), and the preview captions (not-available / load-failed / password). */
+  gallery: GalleryLabels;
 }
 
 /** The platform default — English. Every component's hardcoded default lives
@@ -81,6 +89,7 @@ export const en: LoticsLocale = {
   formField: { optional: "Optional" },
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
+  finding: { critical: "Critical", warning: "Warning", info: "Note", positive: "On track" },
   remainderMeter: {
     applied: (allocated, total) => `${allocated} of ${total} applied`,
     remaining: (remainder) => `${remainder} unapplied`,
@@ -108,6 +117,24 @@ export const en: LoticsLocale = {
     selectDateRange: "Select date range", selectDate: "Select date",
     clear: "Clear", done: "Done", placeholder: "All time",
   },
+  gallery: {
+    close: "Close",
+    previous: "Previous",
+    next: "Next",
+    actions: "Actions",
+    openExternal: "Open in new tab",
+    remove: "Remove",
+    removeConfirmTitle: "Remove file",
+    removeConfirmMessage: (filename) => `Remove "${filename}"?`,
+    cancel: "Cancel",
+    rotateLeft: "Rotate left",
+    rotateRight: "Rotate right",
+    saveRotation: "Save rotation",
+    notAvailable: "Preview not available",
+    loadFailed: "Failed to load preview",
+    download: "Download file",
+    passwordProtected: "This file is password-protected and cannot be previewed",
+  },
 };
 
 /** Vietnamese. Maintained once here so every app (and the frontend) shares one
@@ -131,6 +158,7 @@ export const vi: LoticsLocale = {
   formField: { optional: "Tùy chọn" },
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
+  finding: { critical: "Nghiêm trọng", warning: "Cảnh báo", info: "Ghi chú", positive: "Đúng tiến độ" },
   remainderMeter: {
     applied: (allocated, total) => `Đã phân bổ ${allocated}/${total}`,
     remaining: (remainder) => `Còn ${remainder}`,
@@ -158,6 +186,24 @@ export const vi: LoticsLocale = {
     selectDateRange: "Chọn khoảng ngày", selectDate: "Chọn ngày",
     clear: "Xóa", done: "Xong", placeholder: "Tất cả thời gian",
   },
+  gallery: {
+    close: "Đóng",
+    previous: "Trước",
+    next: "Sau",
+    actions: "Thao tác",
+    openExternal: "Mở trong thẻ mới",
+    remove: "Gỡ tệp",
+    removeConfirmTitle: "Gỡ tệp",
+    removeConfirmMessage: (filename) => `Gỡ "${filename}"?`,
+    cancel: "Hủy",
+    rotateLeft: "Xoay trái",
+    rotateRight: "Xoay phải",
+    saveRotation: "Lưu ảnh đã xoay",
+    notAvailable: "Không xem trước được định dạng này",
+    loadFailed: "Không tải được bản xem trước",
+    download: "Tải xuống",
+    passwordProtected: "Tệp có mật khẩu — không xem trước được",
+  },
 };
 
 const LoticsLocaleContext = createContext<LoticsLocale>(en);