@lotics/ui 11.8.1 → 11.8.3

package/docs/catalog.md

@@ -267,7 +267,7 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   (the heading ramp: `xl` = `##` section title, `xxl` = `#` page/record title, `xxxl` = hero
   numbers), `weight`, `color`, alignment, tabular numerals.
 - **`markdown`** — `Markdown`: the single canonical markdown renderer for chat, apps, and
-  `AgentRun`; rich on web via react-markdown/remark-gfm with copyable tables, plain-text on
+  `AgentRun`; rich GFM markdown on web with copyable tables, plain-text on
   native; takes a markdown `children` string.
 - **`markdown.css`** — import once for the web markdown styling.
 - **`format_date`** — `formatDate` / `parseDate` / `toISODate` + `DateFormatStyle`.
@@ -370,7 +370,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`danger_zone`** — `DangerZone`: the destructive section — a soft danger-tinted frame
   (the kit's `tint`/`solid`, never raw hex) + a danger heading + a description + a
   destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a
-  record/settings surface.
+  record/settings surface. The heading defaults to the locale's `dangerZone.title`
+  ("Danger zone" / "Vùng nguy hiểm") — pass `title` only to override.
 - **`landmark`** — `Landmark`: the semantic region wrapper — `kind`
   banner|navigation|main|complementary|contentinfo|region maps to the matching HTML element
   on web for screen-reader landmark navigation, `accessibilityRole` on native;
@@ -390,8 +391,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`icon_button`** — `IconButton`: the icon-only circular action (see
   [Actions](#actions)).
 - **`back_button`** — `BackButton`: the chevron-left `IconButton` (lg, secondary) heading a
-  screen/panel: `onPress` + translated `accessibilityLabel` (default "Back"); the one
-  go-back glyph — don't hand-roll it.
+  screen/panel: `onPress` + `accessibilityLabel` (defaults to the locale's `nav.back` —
+  "Back" / "Quay lại"); the one go-back glyph — don't hand-roll it.
 - **`link`** — `Link`: the EXTERNAL hyperlink — fixed underline+blue + `role="link"`;
   `onPress` only (the consumer wires the opener).
 - **`text_link`** — `TextLink`: underlined text that's optionally an `onPress` action or an
@@ -804,7 +805,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   browser file dialog imperatively — the trigger half behind every Add-file CTA; cancel
   resolves `[]` on modern engines.
 - **`file_dropzone`** — `FileDropzone`: the drag-drop capture well (`onFiles`, `accept`,
-  `label`/`hint`/`dropLabel`, `height`); click falls back to a picker.
+  `label`/`hint`/`dropLabel`, `height`); click falls back to a picker. `label`/`dropLabel`
+  default from the locale's `fileDropzone` slice — pass them only to override.
 - **`files_editor`** — `FilesEditor` — THE all-in-one attachment field: `FileGrid` + a
   toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode
   (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.8.1",
+  "version": "11.8.3",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -238,9 +238,14 @@
   "dependencies": {
     "@lotics/docx": "^0.1.0",
     "@lotics/xlsx": "^0.1.0",
+    "mdast-util-from-markdown": "^2.0.3",
+    "mdast-util-gfm-footnote": "^2.1.0",
+    "mdast-util-gfm-strikethrough": "^2.0.0",
+    "mdast-util-gfm-table": "^2.0.0",
+    "mdast-util-gfm-task-list-item": "^2.0.0",
+    "micromark-extension-gfm": "^3.0.0",
     "pdfjs-dist": "^6.0.227",
-    "react-markdown": "^10.0.0",
-    "remark-gfm": "^4.0.0"
+    "react-markdown": "^10.0.0"
   },
   "peerDependencies": {
     "@react-native-picker/picker": ">=2.0.0",
@@ -279,6 +284,8 @@
     "lucide-react": "^0.562.0",
     "react-dom": "^19.2.0",
     "react-native-web": "^0.21.0",
+    "remark-parse": "^11.0.0",
+    "unified": "^11.0.5",
     "vite": "^7.2.4"
   }
 }

package/src/agent_run.tsx

@@ -10,6 +10,7 @@ import { PressableHighlight } from "./pressable_highlight";
 import { Marker, type StepStatus } from "./stepper";
 import { AnimationFadeIn } from "./animation_fade_in";
 import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
+import { useLoticsLocale, type LoticsLocale } from "./locale";
 
 export type AgentStepStatus = "running" | "done" | "error";
 
@@ -235,19 +236,20 @@ function StepBody({ label, detail, status }: { label: string; detail?: string; s
 
 // The press-to-open reveal for a tool step: the caller's `peek` wins; else Input /
 // Output / Error panels auto-built from the carried I/O; else nothing (no reveal).
-// Raw I/O stays OUT of the row — only shown here, on demand.
-function stepPeek(s: AgentRunStep): ReactNode {
+// Raw I/O stays OUT of the row — only shown here, on demand. Panel titles come from
+// the locale (the caller supplies a whole `peek` to override).
+function stepPeek(s: AgentRunStep, labels: LoticsLocale["agentRun"]): ReactNode {
   if (s.peek) return s.peek;
   const hasInput = s.input !== undefined;
   const hasOutput = s.output !== undefined;
   if (!hasInput && !hasOutput && !s.errorText) return null;
   return (
     <View style={{ gap: 8 }}>
-      {hasInput ? <JsonPanel title="Input" value={stringifyData(s.input)} /> : null}
+      {hasInput ? <JsonPanel title={labels.input} value={stringifyData(s.input)} /> : null}
       {s.errorText ? (
-        <JsonPanel title="Error" value={s.errorText} />
+        <JsonPanel title={labels.error} value={s.errorText} />
       ) : hasOutput ? (
-        <JsonPanel title="Output" value={stringifyData(s.output)} />
+        <JsonPanel title={labels.output} value={stringifyData(s.output)} />
       ) : null}
     </View>
   );
@@ -256,7 +258,8 @@ function stepPeek(s: AgentRunStep): ReactNode {
 // A step's body, wrapped in a Peek when there's something to reveal (I/O or a
 // caller peek), plain otherwise.
 function StepContent({ s, label }: { s: AgentRunStep; label: string }) {
-  const peek = stepPeek(s);
+  const locale = useLoticsLocale();
+  const peek = stepPeek(s, locale.agentRun);
   const body = <StepBody label={label} detail={s.detail} status={s.status} />;
   return peek ? (
     <Peek accessibilityLabel={label} content={peek}>
@@ -271,15 +274,16 @@ function StepContent({ s, label }: { s: AgentRunStep; label: string }) {
 // agent's reasoning never crowds the answer. Pulses while it's still streaming.
 function ReasoningDisclosure(props: { text: string; streaming?: boolean; expanded: boolean; onToggle: () => void }) {
   const { text, streaming, expanded, onToggle } = props;
+  const locale = useLoticsLocale();
   return (
     <View style={styles.group}>
-      <PressableHighlight focusRing onPress={onToggle} accessibilityRole="button" accessibilityLabel="Thinking" style={styles.row}>
+      <PressableHighlight focusRing onPress={onToggle} accessibilityRole="button" accessibilityLabel={locale.agentRun.thinking} style={styles.row}>
         <View style={styles.dotCol}>
           <Marker status={streaming ? "current" : "done"} color={colors.zinc[400]} live={!!streaming} />
         </View>
         <View style={styles.rowBody}>
           <Text size="sm" color="muted">
-            {streaming ? "Thinking…" : "Thinking"}
+            {streaming ? locale.agentRun.thinkingStreaming : locale.agentRun.thinking}
           </Text>
         </View>
         {chevron(expanded ? "up" : "down")}

package/src/avatar.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle, ImageStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
 
 interface AvatarProps {
   size?: number;
@@ -20,7 +21,8 @@ interface AvatarProps {
 }
 
 export function Avatar(props: AvatarProps) {
-  const { source, size = 32, name = "Unknown", style, contentFit, announce } = props;
+  const locale = useLoticsLocale();
+  const { source, size = 32, name = locale.avatar.unknown, style, contentFit, announce } = props;
   const decorative = !announce;
 
   if (!source || !source.uri) {

package/src/avatar.web.tsx

@@ -2,6 +2,7 @@ import type { ImageContentFit, ImageSource } from "expo-image";
 import { Image, View, StyleSheet, StyleProp, ViewStyle, ImageStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
 
 interface AvatarProps {
   size?: number;
@@ -28,7 +29,8 @@ interface AvatarProps {
  * type-only imports so no expo-image module is ever loaded.
  */
 export function Avatar(props: AvatarProps) {
-  const { source, size = 32, name = "Unknown", style, contentFit, announce } = props;
+  const locale = useLoticsLocale();
+  const { source, size = 32, name = locale.avatar.unknown, style, contentFit, announce } = props;
   const decorative = !announce;
 
   if (!source || !source.uri) {

package/src/back_button.tsx

@@ -1,14 +1,16 @@
 import { IconButton } from "./icon_button";
 import { View } from "react-native";
+import { useLoticsLocale } from "./locale";
 
 interface BackButtonProps {
   onPress: () => void;
-  /** Accessible name. Default: "Back". Pass a translated string from the consumer. */
+  /** Accessible name. Defaults to the locale's `nav.back` ("Back" / "Quay lại"). */
   accessibilityLabel?: string;
 }
 
 export function BackButton(props: BackButtonProps) {
-  const { onPress, accessibilityLabel = "Back" } = props;
+  const locale = useLoticsLocale();
+  const { onPress, accessibilityLabel = locale.nav.back } = props;
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
       <IconButton

package/src/bar_chart.tsx

@@ -2,6 +2,7 @@ import { View, StyleSheet } from "react-native";
 import { useMemo } from "react";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
 
 const DEFAULT_BAR_COLOR = colors.blue[500];
 
@@ -66,11 +67,12 @@ function useAxisTicks(maxValue: number) {
  * one inline trend use `Sparkline`; for parts-of-a-whole, `PieChart` / `Breakdown`.
  */
 export function BarChart(props: BarChartProps) {
+  const locale = useLoticsLocale();
   const {
     data,
     orientation = "vertical",
     formatNumber = defaultFormatNumber,
-    emptyLabel = "No data",
+    emptyLabel = locale.chart.noData,
   } = props;
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const axisTicks = useAxisTicks(maxValue);

package/src/composer.tsx

@@ -5,6 +5,7 @@ import { colors } from "./colors";
 import { Text } from "./text";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
+import { useLoticsLocale } from "./locale";
 
 /**
  * The pure composer *chrome* — a bordered, auto-growing multiline text input
@@ -63,6 +64,7 @@ export interface ComposerProps {
 }
 
 export function Composer(props: ComposerProps) {
+  const locale = useLoticsLocale();
   const {
     onSend,
     onStop,
@@ -78,8 +80,8 @@ export function Composer(props: ComposerProps) {
     actionsButton,
     footerRight,
     maxLines = 10,
-    sendLabel = "Send",
-    stopLabel = "Stop",
+    sendLabel = locale.composer.send,
+    stopLabel = locale.composer.stop,
   } = props;
 
   const [internalText, setInternalText] = useState("");

package/src/danger_zone.tsx

@@ -3,9 +3,11 @@ import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { solid, tint } from "./colors";
+import { useLoticsLocale } from "./locale";
 
 export interface DangerZoneProps {
-  /** Section heading. Default "Danger zone". */
+  /** Section heading. Defaults to the locale's `dangerZone.title`
+   *  ("Danger zone" / "Vùng nguy hiểm"). */
   title?: string;
   /** A short line spelling out the consequence of the action (it's usually
    *  irreversible — say so here). */
@@ -23,7 +25,8 @@ export interface DangerZoneProps {
  * action(s) go in `children`.
  */
 export function DangerZone(props: DangerZoneProps) {
-  const { title = "Danger zone", description, children } = props;
+  const locale = useLoticsLocale();
+  const { title = locale.dangerZone.title, description, children } = props;
   return (
     <View style={styles.zone}>
       <View style={styles.heading}>

package/src/dialog.tsx

@@ -7,6 +7,7 @@ import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { BackButton } from "@lotics/ui/back_button";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
+import { useLoticsLocale } from "@lotics/ui/locale";
 import {
   ScreenRouterContext,
   ScreenRouterInternalContext,
@@ -98,6 +99,7 @@ export function Dialog(props: DialogProps) {
 
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const screenSize = useScreenSize();
+  const locale = useLoticsLocale();
 
   const isControlled = controlledOpen !== undefined;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
@@ -163,7 +165,7 @@ export function Dialog(props: DialogProps) {
                   <PortalHost>
                     <View testID={testID} style={[styles.dialogContainer, { borderRadius }]}>
                       <View style={[styles.closeButtonContainer, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
-                        <IconButton icon="x" size="lg" accessibilityLabel="Close" onPress={handleClose} />
+                        <IconButton icon="x" size="lg" accessibilityLabel={locale.overlay.close} onPress={handleClose} />
                       </View>
                       <View style={styles.container}>{children}</View>
                     </View>

package/src/file_dropzone.tsx

@@ -6,6 +6,7 @@ import { Text } from "./text";
 import { pickFiles } from "./file_picker";
 import { FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
+import { useLoticsLocale } from "./locale";
 
 export interface FileDropzoneProps {
   /** Receives the picked/dropped files. Bytes/upload belong to the host —
@@ -18,7 +19,9 @@ export interface FileDropzoneProps {
   multiple?: boolean;
   /** Main line ("Kéo thả tệp vào đây"). */
   label?: string;
-  /** Secondary line ("hoặc bấm để chọn tệp · PDF, ảnh"). */
+  /** Secondary line. Defaults to the locale's `fileDropzone.hint` ("or click to
+   *  browse" / "hoặc bấm để chọn"); override with an accepted-types line
+   *  ("… · PDF, ảnh"). */
   hint?: string;
   /** Main line while a drag hovers the zone ("Thả để tải lên"). */
   dropLabel?: string;
@@ -52,13 +55,14 @@ function matchesAccept(file: File, accept: string | undefined): boolean {
  * `dropLabel`. On native (no drag events) it degrades to press-to-pick.
  */
 export function FileDropzone(props: FileDropzoneProps) {
+  const locale = useLoticsLocale();
   const {
     onFiles,
     accept,
     multiple = true,
-    label = "Drag files here",
-    hint = "or click to browse",
-    dropLabel = "Drop to upload",
+    label = locale.fileDropzone.label,
+    hint = locale.fileDropzone.hint,
+    dropLabel = locale.fileDropzone.drop,
     height = 160,
     disabled = false,
     accessibilityLabel,

package/src/file_thumbnail.tsx

@@ -8,6 +8,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { colors } from "./colors";
 import { FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
+import { useLoticsLocale } from "./locale";
 import { useCallback, useState } from "react";
 import {
   GestureResponderEvent,
@@ -366,7 +367,8 @@ function TileScrim({ hovered, pressed }: { hovered?: boolean; pressed: boolean }
   return <View style={[styles.tileScrim, pressed && styles.tileScrimPressed]} pointerEvents="none" />;
 }
 
-export function RemoveButton({ onPress, label = "Remove" }: { onPress: () => void; label?: string }) {
+export function RemoveButton({ onPress, label }: { onPress: () => void; label?: string }) {
+  const locale = useLoticsLocale();
   const handlePress = useCallback(
     (e: GestureResponderEvent) => {
       e.stopPropagation();
@@ -376,7 +378,7 @@ export function RemoveButton({ onPress, label = "Remove" }: { onPress: () => voi
   );
   return (
     <View style={styles.removeButtonAnchor}>
-      <IconButton icon="x" size="sm" elevated accessibilityLabel={label} onPress={handlePress} />
+      <IconButton icon="x" size="sm" elevated accessibilityLabel={label ?? locale.fileThumbnail.remove} onPress={handlePress} />
     </View>
   );
 }

package/src/image_gallery.tsx

@@ -18,6 +18,7 @@ import { FileThumbnail, type DisplayFile } from "./file_thumbnail";
 import { FileGalleryModal } from "./file_gallery_modal";
 import { RotatableImage } from "./rotatable_image";
 import { useImageRotation } from "./use_image_rotation";
+import { useLoticsLocale } from "./locale";
 
 const GAP = 12;
 
@@ -33,7 +34,8 @@ const rotateButtonStyle: ViewStyle = {
 export interface ImageGalleryProps {
   images: DisplayFile[];
   loading?: boolean;
-  /** Shown when there are no images and not loading. Pass a translated string. */
+  /** Shown when there are no images and not loading. Defaults to the locale's
+   *  `imageGallery.empty` ("No images." / "Chưa có ảnh."). */
   emptyText?: string;
   /** Optional max width. Omit to fill the container. */
   maxWidth?: number;
@@ -52,13 +54,14 @@ export interface ImageGalleryProps {
 export function ImageGallery({
   images,
   loading = false,
-  emptyText = "No images.",
+  emptyText,
   maxWidth,
   thumbnailPosition = "bottom",
   mainAspectRatio = 4 / 3,
   mainFraction = 0.6,
   rotatable = true,
 }: ImageGalleryProps) {
+  const locale = useLoticsLocale();
   const [selected, setSelected] = useState(0);
   const [zoomIdx, setZoomIdx] = useState<number | null>(null);
   const [containerWidth, setContainerWidth] = useState(0);
@@ -66,7 +69,7 @@ export function ImageGallery({
   const rotation = useImageRotation();
 
   if (loading) return <ActivityIndicator />;
-  if (images.length === 0) return <Text size="sm" color="muted">{emptyText}</Text>;
+  if (images.length === 0) return <Text size="sm" color="muted">{emptyText ?? locale.imageGallery.empty}</Text>;
 
   const idx = Math.min(selected, images.length - 1);
   const main = images[idx];
@@ -79,7 +82,7 @@ export function ImageGallery({
     <View style={{ width: "100%" }}>
       <FocusRingPressable accessibilityRole="button"
         onPress={() => setZoomIdx(idx)}
-        accessibilityLabel="Zoom image"
+        accessibilityLabel={locale.imageGallery.zoom}
         style={{
           width: "100%",
           aspectRatio: mainAspectRatio,
@@ -97,14 +100,14 @@ export function ImageGallery({
         <View style={{ position: "absolute", top: 8, right: 8, flexDirection: "row", gap: 6 }}>
           <FocusRingPressable accessibilityRole="button"
             onPress={() => rotation.rotate(main.id, -1)}
-            accessibilityLabel="Rotate left"
+            accessibilityLabel={locale.imageGallery.rotateLeft}
             style={rotateButtonStyle}
           >
             <Icon name="rotate-ccw" size={16} color={colors.white} />
           </FocusRingPressable>
           <FocusRingPressable accessibilityRole="button"
             onPress={() => rotation.rotate(main.id, 1)}
-            accessibilityLabel="Rotate right"
+            accessibilityLabel={locale.imageGallery.rotateRight}
             style={rotateButtonStyle}
           >
             <Icon name="rotate-cw" size={16} color={colors.white} />

package/src/info_popover.tsx

@@ -4,11 +4,13 @@ import type { PopoverSide, PopoverAlign } from "./popover";
 import { IconButton } from "./icon_button";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
 
 export interface InfoPopoverProps {
   /** Explanatory text shown when the popover opens. */
   text: string;
-  /** Accessible name for the trigger button. */
+  /** Accessible name for the trigger button. Defaults to the locale's
+   *  `infoPopover.more` ("More information" / "Thông tin thêm"). */
   accessibilityLabel?: string;
   /** Popover placement relative to the trigger. */
   side?: PopoverSide;
@@ -25,7 +27,8 @@ export interface InfoPopoverProps {
  * label) without inflating the line.
  */
 export function InfoPopover(props: InfoPopoverProps) {
-  const { text, accessibilityLabel = "More information", side = "bottom", align = "end" } = props;
+  const locale = useLoticsLocale();
+  const { text, accessibilityLabel = locale.infoPopover.more, side = "bottom", align = "end" } = props;
   return (
     <Popover side={side} align={align}>
       <PopoverTrigger>

package/src/line_chart.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { colors } from "./colors";
 import { useMemo, useState, useCallback } from "react";
 import Svg, { Circle, Defs, Line, LinearGradient, Polygon, Polyline, Stop } from "react-native-svg";
+import { useLoticsLocale } from "./locale";
 
 export interface LineChartPoint {
   x: string | number;
@@ -28,12 +29,13 @@ const defaultFormatXLabel = (x: string | number): string => String(x);
  * axes, `lineColor`, `height`. (No recharts.) For a tiny inline trend use `Sparkline`.
  */
 export function LineChart(props: LineChartProps) {
+  const locale = useLoticsLocale();
   const {
     points: data,
     height: chartHeight = 160,
     formatNumber = defaultFormatNumber,
     formatXLabel = defaultFormatXLabel,
-    emptyLabel = "No data",
+    emptyLabel = locale.chart.noData,
     lineColor = colors.blue[500],
   } = props;
 

package/src/locale.tsx

@@ -41,6 +41,8 @@ export interface LoticsLocale {
   floatingActionBar: { clear: string };
   /** `FormField`: the "Optional" marker shown next to the label when `optional`. */
   formField: { optional: string };
+  /** `DangerZone`: the section heading shown when no `title` prop is given. */
+  dangerZone: { title: string };
   /** `Drawer`: the record prev/next + close controls (screen-reader names). */
   drawer: { previous: string; next: string; close: string };
   /** The `Inline*` editor family: the shared save-error line and the
@@ -88,6 +90,38 @@ export interface LoticsLocale {
    *  (open/download/remove + the confirm), the gallery chrome (close, prev/next,
    *  rotate), and the preview captions (not-available / load-failed / password). */
   gallery: GalleryLabels;
+  /** `Avatar`: the fallback name (initials + a11y label) shown when no `name`. */
+  avatar: { unknown: string };
+  /** `BackButton` + `PopoverNavHeader`: the back-chevron's a11y name. */
+  nav: { back: string };
+  /** `BarChart` / `LineChart` / `PieChart`: the empty-state caption and the
+   *  `PieChart` center total's caption. */
+  chart: { noData: string; total: string };
+  /** `Composer`: the send / stop button a11y + tooltip names. */
+  composer: { send: string; stop: string };
+  /** `Dialog` / `Modal` / `Popover`: the dismiss control's a11y / tooltip name. */
+  overlay: { close: string };
+  /** `FileDropzone`: the resting main line, the secondary hint, and the
+   *  drag-hover line. `hint` is a generic default — apps override the prop with
+   *  an accepted-types line ("… · PDF, ảnh"). */
+  fileDropzone: { label: string; hint: string; drop: string };
+  /** `FileThumbnail`'s `RemoveButton`: the ✕ a11y name. */
+  fileThumbnail: { remove: 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 };
+  /** `InfoPopover`: the ⓘ trigger's a11y name. */
+  infoPopover: { more: string };
+  /** `Matrix`: the total column/row header and the legend's less→more ends. */
+  matrix: { total: string; less: string; more: string };
+  /** `ScrollToBottom`: the jump-to-latest tooltip. */
+  scrollToBottom: { tooltip: string };
+  /** `TextInputField`: the clear-button tooltip. */
+  textInputField: { clear: string };
+  /** `AgentRun`: the reasoning disclosure's label (settled / streaming) and the
+   *  auto-built tool peek's Input / Error / Output panel titles. (Tool-step labels
+   *  and the "{n} steps" suffix stay prop-localized — `labelForTool` / `stepsLabel`.) */
+  agentRun: { thinking: string; thinkingStreaming: string; input: string; error: string; output: string };
 }
 
 /** The platform default — English. Every component's hardcoded default lives
@@ -112,6 +146,7 @@ export const en: LoticsLocale = {
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
   formField: { optional: "Optional" },
+  dangerZone: { title: "Danger zone" },
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
   inline: { saveError: "Couldn't save. Try again.", save: "Save", cancel: "Cancel" },
   ledger: { rowDetails: (label) => `${label} details` },
@@ -168,6 +203,19 @@ export const en: LoticsLocale = {
     download: "Download file",
     passwordProtected: "This file is password-protected and cannot be previewed",
   },
+  avatar: { unknown: "Unknown" },
+  nav: { back: "Back" },
+  chart: { noData: "No data", total: "Total" },
+  composer: { send: "Send", stop: "Stop" },
+  overlay: { close: "Close" },
+  fileDropzone: { label: "Drag files here", hint: "or click to browse", drop: "Drop to upload" },
+  fileThumbnail: { remove: "Remove" },
+  imageGallery: { empty: "No images.", rotateLeft: "Rotate left", rotateRight: "Rotate right", zoom: "Zoom image" },
+  infoPopover: { more: "More information" },
+  matrix: { total: "Total", less: "Less", more: "More" },
+  scrollToBottom: { tooltip: "Scroll to bottom" },
+  textInputField: { clear: "Clear" },
+  agentRun: { thinking: "Thinking", thinkingStreaming: "Thinking…", input: "Input", error: "Error", output: "Output" },
 };
 
 /** Vietnamese. Maintained once here so every app (and the frontend) shares one
@@ -192,6 +240,7 @@ export const vi: LoticsLocale = {
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },
   formField: { optional: "Tùy chọn" },
+  dangerZone: { title: "Vùng nguy hiểm" },
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
   inline: { saveError: "Không lưu được. Thử lại.", save: "Lưu", cancel: "Hủy" },
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
@@ -248,6 +297,19 @@ export const vi: LoticsLocale = {
     download: "Tải xuống",
     passwordProtected: "Tệp có mật khẩu — không xem trước được",
   },
+  avatar: { unknown: "Không rõ" },
+  nav: { back: "Quay lại" },
+  chart: { noData: "Không có dữ liệu", total: "Tổng" },
+  composer: { send: "Gửi", stop: "Dừng" },
+  overlay: { close: "Đóng" },
+  fileDropzone: { label: "Kéo tệp vào đây", hint: "hoặc bấm để chọn", drop: "Thả để tải lên" },
+  fileThumbnail: { remove: "Xóa" },
+  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" },
+  scrollToBottom: { tooltip: "Cuộn xuống cuối" },
+  textInputField: { clear: "Xóa" },
+  agentRun: { thinking: "Suy nghĩ", thinkingStreaming: "Đang suy nghĩ…", input: "Đầu vào", error: "Lỗi", output: "Kết quả" },
 };
 
 const LoticsLocaleContext = createContext<LoticsLocale>(en);

package/src/markdown.web.tsx

@@ -2,7 +2,7 @@ import "./markdown.css";
 import React, { useCallback, useRef, useState } from "react";
 import { View } from "react-native";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { remarkGfmSafe } from "./remark_gfm_safe";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 
@@ -10,7 +10,7 @@ export function Markdown({ children }: { children: string }) {
   return (
     <View>
       <div className="ui-markdown">
-        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+        <ReactMarkdown remarkPlugins={[remarkGfmSafe]} components={markdownComponents}>
           {children}
         </ReactMarkdown>
       </div>

package/src/matrix.tsx

@@ -4,6 +4,7 @@ import { colors, withAlpha, type ColorName } from "./colors";
 import { Text } from "./text";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { matrixTotals, type MatrixAxisItem, type MatrixCellRef } from "./matrix_totals";
+import { useLoticsLocale } from "./locale";
 
 type Display = "number" | "heat" | "both";
 
@@ -121,8 +122,10 @@ export interface MatrixHeaderProps {
   totalLabel?: string;
 }
 
-function MatrixHeader({ corner, totalLabel = "Total" }: MatrixHeaderProps) {
+function MatrixHeader({ corner, totalLabel }: MatrixHeaderProps) {
   const { cols, rowLabelWidth, totalColWidth, hasTotals } = useMatrix();
+  const locale = useLoticsLocale();
+  const resolvedTotalLabel = totalLabel ?? locale.matrix.total;
   return (
     <View style={styles.headRow}>
       <View style={[styles.rowLabel, { width: rowLabelWidth }]}>
@@ -141,7 +144,7 @@ function MatrixHeader({ corner, totalLabel = "Total" }: MatrixHeaderProps) {
       ))}
       {hasTotals ? (
         <Text size="xs" color="muted" weight="medium" align="center" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
-          {totalLabel}
+          {resolvedTotalLabel}
         </Text>
       ) : null}
     </View>
@@ -240,12 +243,13 @@ export interface MatrixTotalsProps {
   label?: string;
 }
 
-function MatrixTotals({ label = "Total" }: MatrixTotalsProps) {
+function MatrixTotals({ label }: MatrixTotalsProps) {
   const { cols, colTotals, grandTotal, formatValue, rowLabelWidth, totalColWidth } = useMatrix();
+  const locale = useLoticsLocale();
   return (
     <View style={styles.totalsRow}>
       <Text size="sm" weight="semibold" color="muted" numberOfLines={1} style={[styles.rowLabel, { width: rowLabelWidth }]}>
-        {label}
+        {label ?? locale.matrix.total}
       </Text>
       {cols.map((c) => (
         <Text key={c.key} size="sm" weight="semibold" tabular align="center" numberOfLines={1} style={styles.colCell}>
@@ -264,18 +268,19 @@ export interface MatrixLegendProps {
   moreLabel?: string;
 }
 
-function MatrixLegend({ lessLabel = "Less", moreLabel = "More" }: MatrixLegendProps) {
+function MatrixLegend({ lessLabel, moreLabel }: MatrixLegendProps) {
   const { heatBase } = useMatrix();
+  const locale = useLoticsLocale();
   return (
     <View style={styles.scale}>
       <Text size="xs" color="muted">
-        {lessLabel}
+        {lessLabel ?? locale.matrix.less}
       </Text>
       {[0.15, 0.36, 0.57, 0.78, 1].map((alpha) => (
         <View key={alpha} style={[styles.swatch, { backgroundColor: withAlpha(heatBase, alpha) }]} />
       ))}
       <Text size="xs" color="muted">
-        {moreLabel}
+        {moreLabel ?? locale.matrix.more}
       </Text>
     </View>
   );

package/src/modal.tsx

@@ -5,6 +5,7 @@ import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { PortalHost } from "@lotics/ui/portal";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
+import { useLoticsLocale } from "@lotics/ui/locale";
 
 export interface ModalProps {
   open: boolean;
@@ -59,6 +60,7 @@ export interface ModalHeaderProps {
  */
 export function ModalHeader(props: ModalHeaderProps) {
   const { title, eyebrow, actions, onClose, style } = props;
+  const locale = useLoticsLocale();
 
   return (
     <View style={[styles.header, style]}>
@@ -83,7 +85,7 @@ export function ModalHeader(props: ModalHeaderProps) {
         ) : null}
       </View>
       {actions !== undefined ? <View style={styles.headerActions}>{actions}</View> : null}
-      <IconButton icon="x" size="lg" accessibilityLabel="Close" onPress={onClose} />
+      <IconButton icon="x" size="lg" accessibilityLabel={locale.overlay.close} onPress={onClose} />
     </View>
   );
 }

package/src/pie_chart.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { colors } from "./colors";
 import { useMemo, useState, useCallback } from "react";
 import Svg, { Path, G } from "react-native-svg";
+import { useLoticsLocale } from "./locale";
 
 const FALLBACK_PIE_COLORS = [
   colors.blue[300],
@@ -40,13 +41,14 @@ export interface PieChartProps {
 }
 
 export function PieChart(props: PieChartProps) {
+  const locale = useLoticsLocale();
   const {
     slices: chartData,
     size = PIE_SIZE,
     showLegend = true,
     formatNumber = defaultFormatNumber,
-    emptyLabel = "No data",
-    centerLabel = "Total",
+    emptyLabel = locale.chart.noData,
+    centerLabel = locale.chart.total,
   } = props;
 
   const [isVerticalLayout, setIsVerticalLayout] = useState(false);

package/src/popover.tsx

@@ -19,6 +19,7 @@ import {
   snapshotOpenModalLayers,
 } from "./popover_layers";
 import { PopoverNavContext, type PopoverNavContextValue } from "./popover_nav";
+import { useLoticsLocale } from "./locale";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -187,7 +188,7 @@ export interface PopoverContentProps {
   disableBodyScroll?: boolean;
   /** When true, renders as bottom sheet on small screens (close button, slide-up animation) */
   small?: boolean;
-  /** Accessible name for the bottom-sheet close button. Default: "Close". Pass a translated string from the consumer. */
+  /** Accessible name for the bottom-sheet close button. Defaults to the locale's `overlay.close` ("Close" / "Đóng"). */
   closeLabel?: string;
   /** When true (default), the popover moves focus into its content on open and
    *  restores it on close. Set false for an anchored panel whose trigger must
@@ -198,6 +199,7 @@ export interface PopoverContentProps {
 }
 
 export function PopoverContent(props: PopoverContentProps) {
+  const locale = useLoticsLocale();
   const {
     testID,
     children,
@@ -205,7 +207,7 @@ export function PopoverContent(props: PopoverContentProps) {
     contentContainerStyle,
     disableBodyScroll,
     small = false,
-    closeLabel = "Close",
+    closeLabel = locale.overlay.close,
     manageFocus = true,
   } = props;
   const { open, onOpenChange, triggerRef, side, align, offset, inheritTriggerWidth } =

package/src/popover_nav.tsx

@@ -2,6 +2,7 @@ import { createContext, ReactNode, useContext } from "react";
 import { IconButton } from "./icon_button";
 import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
+import { useLoticsLocale } from "./locale";
 
 export interface PopoverNavContextValue {
   currentRoute: string;
@@ -37,7 +38,7 @@ export function PopoverScreen(props: PopoverScreenProps) {
 export interface PopoverNavHeaderProps {
   title: string;
   right?: ReactNode;
-  /** Accessible name for the back button. Default: "Back". Pass a translated string from the consumer. */
+  /** Accessible name for the back button. Defaults to the locale's `nav.back` ("Back" / "Quay lại"). */
   backLabel?: string;
 }
 
@@ -46,7 +47,8 @@ export interface PopoverNavHeaderProps {
  *  Pairs with `PopoverScreen`. Distinct from `Popover`'s own plain
  *  `PopoverHeader` children container. */
 export function PopoverNavHeader(props: PopoverNavHeaderProps) {
-  const { title, right, backLabel = "Back" } = props;
+  const locale = useLoticsLocale();
+  const { title, right, backLabel = locale.nav.back } = props;
   const { goBack, canGoBack } = usePopoverNav();
 
   return (

package/src/remark_gfm_safe.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import { remarkGfmSafe } from "./remark_gfm_safe";
+
+/** Parse markdown to an mdast tree and serialize it, so tests assert on the
+ *  resulting document structure without depending on mdast node typings. */
+function parse(markdown: string): string {
+  return JSON.stringify(unified().use(remarkParse).use(remarkGfmSafe).parse(markdown));
+}
+
+describe("remarkGfmSafe", () => {
+  it("autolinks a bare URL in normal text (micromark tokenizer, no lookbehind)", () => {
+    expect(parse("see https://example.com now")).toContain('"url":"https://example.com"');
+  });
+
+  it("autolinks a bare email in normal text (the case the removed sweep also handled)", () => {
+    expect(parse("contact me at a@b.com please")).toContain('"url":"mailto:a@b.com"');
+  });
+
+  it("autolinks a bare www link", () => {
+    expect(parse("visit www.example.com today")).toContain('"url":"http://www.example.com"');
+  });
+
+  it("still parses GFM tables", () => {
+    expect(parse("| a | b |\n| --- | --- |\n| 1 | 2 |")).toContain('"type":"table"');
+  });
+
+  it("still parses strikethrough and task lists", () => {
+    expect(parse("~~gone~~")).toContain('"type":"delete"');
+    expect(parse("- [x] done")).toContain('"checked":true');
+  });
+});

package/src/remark_gfm_safe.ts

@@ -0,0 +1,84 @@
+import type { CompileContext, Extension, Token } from "mdast-util-from-markdown";
+import { gfmFootnoteFromMarkdown } from "mdast-util-gfm-footnote";
+import { gfmStrikethroughFromMarkdown } from "mdast-util-gfm-strikethrough";
+import { gfmTableFromMarkdown } from "mdast-util-gfm-table";
+import { gfmTaskListItemFromMarkdown } from "mdast-util-gfm-task-list-item";
+import { gfm } from "micromark-extension-gfm";
+import type { Plugin } from "unified";
+
+/**
+ * `remark-gfm`, rebuilt so no regex lookbehind reaches the bundle.
+ *
+ * `remark-gfm` pulls `mdast-util-gfm-autolink-literal`, whose module contains an
+ * email autolink regex *literal* with a lookbehind `(?<=…)`. Lookbehind is a
+ * **parse-time** `SyntaxError` on WebKit older than Safari 16.4 — iOS Safari and
+ * every in-app WebView built on it (Zalo, Facebook). Because a regex literal is
+ * validated when the script is parsed, that one literal aborts parsing of the
+ * whole JS bundle, so the entire app fails to load, not just markdown. Merely
+ * disabling the code at runtime is not enough — the literal must never be
+ * bundled, i.e. the module must never be imported.
+ *
+ * So we compose GFM from its parts and provide the autolink-literal fromMarkdown
+ * handlers ourselves (below). These are exactly the upstream token→link
+ * handlers, minus the post-parse regex *sweep* that carried the lookbehind — the
+ * micromark tokenizer already autolinks URLs and emails in normal text without
+ * any lookbehind, so the common case is unchanged; only the rare residual cases
+ * that sweep additionally caught are lost. Tables, strikethrough, task lists,
+ * and footnotes are untouched. No toMarkdown extensions: this feeds
+ * `react-markdown`, which parses only and never serializes.
+ */
+
+function enterLiteralAutolink(this: CompileContext, token: Token): void {
+  this.enter({ type: "link", title: null, url: "", children: [] }, token);
+}
+
+function enterLiteralAutolinkValue(this: CompileContext, token: Token): void {
+  this.config.enter.autolinkProtocol.call(this, token);
+}
+
+function exitLiteralAutolinkHttp(this: CompileContext, token: Token): void {
+  this.config.exit.autolinkProtocol.call(this, token);
+}
+
+function exitLiteralAutolinkWww(this: CompileContext, token: Token): void {
+  this.config.exit.data.call(this, token);
+  const node = this.stack[this.stack.length - 1];
+  if (node?.type === "link") node.url = "http://" + this.sliceSerialize(token);
+}
+
+function exitLiteralAutolinkEmail(this: CompileContext, token: Token): void {
+  this.config.exit.autolinkEmail.call(this, token);
+}
+
+function exitLiteralAutolink(this: CompileContext, token: Token): void {
+  this.exit(token);
+}
+
+const autolinkLiteralFromMarkdown: Extension = {
+  enter: {
+    literalAutolink: enterLiteralAutolink,
+    literalAutolinkEmail: enterLiteralAutolinkValue,
+    literalAutolinkHttp: enterLiteralAutolinkValue,
+    literalAutolinkWww: enterLiteralAutolinkValue,
+  },
+  exit: {
+    literalAutolink: exitLiteralAutolink,
+    literalAutolinkEmail: exitLiteralAutolinkEmail,
+    literalAutolinkHttp: exitLiteralAutolinkHttp,
+    literalAutolinkWww: exitLiteralAutolinkWww,
+  },
+};
+
+export const remarkGfmSafe: Plugin<[]> = function () {
+  const data = this.data();
+  const micromarkExtensions = (data.micromarkExtensions ??= []);
+  const fromMarkdownExtensions = (data.fromMarkdownExtensions ??= []);
+  micromarkExtensions.push(gfm());
+  fromMarkdownExtensions.push([
+    autolinkLiteralFromMarkdown,
+    gfmFootnoteFromMarkdown(),
+    gfmStrikethroughFromMarkdown(),
+    gfmTableFromMarkdown(),
+    gfmTaskListItemFromMarkdown(),
+  ]);
+};

package/src/scroll_to_bottom.tsx

@@ -2,15 +2,18 @@ import { colors } from "./colors";
 import { StyleSheet } from "react-native";
 import { Icon } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
+import { useLoticsLocale } from "./locale";
 
 interface ScrollToBottomProps {
   onPress: () => void;
-  /** Tooltip text. Default: "Scroll to bottom". Pass a translated string from the consumer. */
+  /** Tooltip text. Defaults to the locale's `scrollToBottom.tooltip`
+   *  ("Scroll to bottom" / "Cuộn xuống cuối"). */
   tooltip?: string;
 }
 
 export function ScrollToBottom(props: ScrollToBottomProps) {
-  const { onPress, tooltip = "Scroll to bottom" } = props;
+  const locale = useLoticsLocale();
+  const { onPress, tooltip = locale.scrollToBottom.tooltip } = props;
 
   return (
     <PressableHighlight

package/src/text_input_field.tsx

@@ -16,6 +16,7 @@ import { fontFamilyRegular, getInputLineHeight, getInputTextStyle } from "./text
 import { useScreenSize } from "./use_screen_size";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { useFormField } from "./form_field";
+import { useLoticsLocale } from "./locale";
 import type { ShortcutDescriptor } from "./keyboard";
 
 interface TextInputFieldProps extends RNTextInputProps {
@@ -29,7 +30,8 @@ interface TextInputFieldProps extends RNTextInputProps {
   autoGrow?: boolean;
   /** Keyboard shortcut badge shown in the right slot when the input is empty. */
   shortcut?: string | ShortcutDescriptor;
-  /** Accessible name for the clear button. Default: "Clear". Pass a translated string from the consumer. */
+  /** Accessible name for the clear button. Defaults to the locale's
+   *  `textInputField.clear` ("Clear" / "Xóa"). */
   clearLabel?: string;
   // DOM-only ARIA attrs not declared on React Native's TextInputProps. They
   // are forwarded verbatim to the underlying web input.
@@ -39,6 +41,7 @@ interface TextInputFieldProps extends RNTextInputProps {
 }
 
 export function TextInputField(props: TextInputFieldProps) {
+  const locale = useLoticsLocale();
   const {
     style,
     icon,
@@ -51,7 +54,7 @@ export function TextInputField(props: TextInputFieldProps) {
     disabled,
     autoGrow,
     shortcut,
-    clearLabel = "Clear",
+    clearLabel = locale.textInputField.clear,
     ref,
     "aria-controls": ariaControls,
     "aria-activedescendant": ariaActivedescendant,