@lotics/ui 9.0.0 → 10.0.0

package/AGENTS.md

@@ -12,6 +12,10 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
   `PortalHost` at the app root.
 - RN-Web only: `View`/`ScrollView` from `react-native`, the `Text` primitive (no raw
   `div`/`span`, no raw `fontSize`/`fontWeight`); styles are RN objects.
+- Fonts: the app entry imports the Inter sheet ONCE — `import "@lotics/ui/fonts.css"` (400/500/600,
+  served by absolute URL so it resolves on every origin an app runs from) — or every `Text` falls
+  back to system fonts. File picking: `pickFiles` (`@lotics/ui/file_picker`) opens the browser
+  picker and resolves the chosen `File[]` — the imperative half behind every Add-file CTA.
 - i18n: most components are string-free. For the rest, set the language ONCE at the root with
   **`LoticsLocaleProvider`** (`@lotics/ui/locale`, the sibling of `LoticsThemeProvider`) — wrap
   `<LoticsLocaleProvider locale={vi}>` and every wired component picks up the pack, no per-instance
@@ -1020,7 +1024,7 @@ member_select (MemberSelect — a Picker of MemberChip options; the member picke
 status_badge · button · icon_button · link · text_link (TextLink — underlined text that's optionally an `onPress` action or an `href` link, or plain underlined text to wrap in your own pressable; the neutral counterpart to the fixed-blue `Link`) · chip (Chip — the generic pill: pressable when `onPress` (announces as a button; pass `accessibilityLabel` when children aren't self-describing text) + an absolutely-positioned dismiss ✕ sibling when `onDismiss` (its name = `dismissTooltip` ?? the `chip.remove` locale slice). Suggestion pills → `SuggestionChip`) · tabs (Tabs — switch between content sections; WAI-ARIA tablist + roving tabindex; each TabOption takes an optional `status` ColorName → a small attention dot before its label, for a tab whose area needs work) · segmented_control ·
 picker (native `<select>`, plain label-only single) · select (Select — rich/custom-rendered, single/multi, select-all, chips via `renderSelected` + `searchable` + `allowCustom` — the tag field is just a multi Select; opens `OptionList`) · option_list (OptionList — the ONE shared searchable listbox body every selector opens: single/multi, optional internal search, create row, keyboard + native-`<select>` typeahead; host it directly in a `Popover`/`Dialog` for a command palette) · combobox (COMPOUND single-select editable search: `Combobox` root + `ComboboxInput` + `ComboboxContent`, optional `ComboboxEmpty`/`ComboboxFooter`, `useCombobox()`; over the shared `useOptionList` engine; browses on focus; no `multi` — multi-value chips → `Select multi`) ·
 text_input_field · number_input · search_input · form_field · checkbox · checkbox_input · switch ·
-radio_picker · counter · range_slider · date_picker · date_range_filter_field · time_picker ·
+radio_picker · counter · range_slider · date_picker · date_range_filter_field · date_calendar (Calendar — the bare month grid: `mode="single"` or `"range"` ({start,end} — two months side by side on desktop), month/year pickers + arrows, localized weekday/month names via BCP-47 `locale`, `firstDayOfWeek` (default Monday), `ref.navigateToMonth`. The engine DatePicker/DateFilter wrap in field chrome — reach for it bare only when the calendar lives permanently on the surface, not behind a field) · form_switch (FormSwitch — the FormField-labeled twin of `Switch`: toggle + clickable `label` (pressing it flips the value) + optional `description`/`error`; the settings-form boolean row. A bare toggle in a cell/toolbar → `Switch`; a full-row menu toggle → `SwitchButton`) · form_text_input (FormTextInput — `FormField` (label / description / error / optional) wrapping a `TextInputField`; the one-line labeled text field. Controls without a Form* twin just wrap in `FormField`) · switch_button (SwitchButton — the full-ROW toggle: a PressableHighlight row (optional icon + medium title left, `Switch` pinned right) where the whole row IS the switch (`accessibilityRole="switch"`, the inner Switch read-only). The settings-panel/menu row toggle; vs `Switch` (bare control) and `FormSwitch` (form stack)) · use_form (useForm — THE batch draft-form state hook: `values` = `initialValues` + an edits overlay (a revalidation refreshes untouched fields, no sync effect), `validate` (sync/async, gates submit, editing clears the field's error), `onSubmit(values, helpers)` with a re-entry-guarded `submitting`, and `changes`/`changed` — the touched-fields diff that feeds DIFF-writes (send only edited fields); `setFieldValue` (curried or direct) + `setValues`/`setFieldError`/`reset`. Pairs with the Form* family for dialog/settings forms — the draft-validate-COMMIT-together twin of the self-persisting Inline* editors) · time_picker ·
 inline_text_input · inline_number_input · inline_select · inline_member_select · inline_date_picker ·
 inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
 `InlineEditView`; `InlineSelect`/`InlineMemberSelect` render the resting value like its option — `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not just text) ·
@@ -1031,14 +1035,14 @@ check_circle (CheckCircle — the completion ring: an empty ring that springs to
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·
 sort_header · table · data_grid (DataGrid — the inline-managed grouped table: a grouped, sortable grid of LIVE inline-editor cells (`columns[].cell` → ANY field) + optional per-row `leading` (a CheckCircle) + `renderGroupFooter` (per-group add, align with the exported `gridRowStyle`) + `labels` (localize the sort-header a11y via `SortHeaderLabels`). Owns header/sections/rows; consumer owns data + sort/group/filter/collapse state + toolbar. Renders ALL rows — MODERATE data; 10k+ → the paginated `Table` register. Example: `tpl_task_board`) · pagination · accordion · stepper (Stepper + Step — done/current/upcoming/warning/complete progress on a track (horizontal) or spine (vertical); compound `<Step status>children` OR data `steps[]`+`current`; **navigable** via `Step.onPress` (both orientations — the whole step is the tap target) + `active` to wash the selected one, so it doubles as a section/phase switcher; the guided-run / agent-feed primitive — subsumes the old StepList) ·
-step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · modal (Modal + ModalHeader + ModalBody + ModalFooter — the full-bleed, edge-to-edge takeover: an OPAQUE surface that COVERS THE WHOLE SCREEN, so unlike Dialog (centered card WITH scrim) and Drawer (docked panel WITH scrim) there is nothing behind it to dim — NO scrim, NO backdrop. Lays children as a flex column: a pinned ModalHeader (eyebrow/title + an actions slot + close), a flex:1 scrolling ModalBody, a pinned ModalFooter (the commit bar, same chrome as DialogFooter/DrawerFooter). Reach for it for a focused capture / multi-step wizard / a console the user steps INTO, where surrounding chrome is a distraction; pick Dialog when the surface is a card the user can see context around) · screen_router (ScreenRouter + Screen + useScreenRouter — the SCREENS compound: a flat navigation stack (`navigate("/case/:id")` pushes, `goBack` pops, `canGoBack`, route `params`; stacked screens stay mounted `display:none` so scroll survives the round trip). Dialog BAKES a router in (`<Dialog><Screen route="">…`); ANY other container hosts the standalone `<ScreenRouter>` — and it wraps AROUND the container so the CHROME can read the stack: a Drawer drilling into a LINKED record swaps its header to a BACK IconButton + the pushed record's id while `canGoBack` (sequence ◀ ▶ hides — stepping the root from inside a linked record disorients), and the pushed `<Screen route="/case/:id">` is a REAL editable workspace with its own footer CTAs. Key the router by record id so stepping ◀ ▶ resets the stack. Worked example: `tpl_item_list` drawer) · popover · tooltip ·
+step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · modal (Modal + ModalHeader + ModalBody + ModalFooter — the full-bleed, edge-to-edge takeover: an OPAQUE surface that COVERS THE WHOLE SCREEN, so unlike Dialog (centered card WITH scrim) and Drawer (docked panel WITH scrim) there is nothing behind it to dim — NO scrim, NO backdrop. Lays children as a flex column: a pinned ModalHeader (eyebrow/title + an actions slot + close), a flex:1 scrolling ModalBody, a pinned ModalFooter (the commit bar, same chrome as DialogFooter/DrawerFooter). Reach for it for a focused capture / multi-step wizard / a console the user steps INTO, where surrounding chrome is a distraction; pick Dialog when the surface is a card the user can see context around) · screen_router (ScreenRouter + Screen + useScreenRouter — the SCREENS compound: a flat navigation stack (`navigate("/case/:id")` pushes, `goBack` pops, `canGoBack`, route `params`; stacked screens stay mounted `display:none` so scroll survives the round trip). Dialog BAKES a router in (`<Dialog><Screen route="">…`); ANY other container hosts the standalone `<ScreenRouter>` — and it wraps AROUND the container so the CHROME can read the stack: a Drawer drilling into a LINKED record swaps its header to a BACK IconButton + the pushed record's id while `canGoBack` (sequence ◀ ▶ hides — stepping the root from inside a linked record disorients), and the pushed `<Screen route="/case/:id">` is a REAL editable workspace with its own footer CTAs. Key the router by record id so stepping ◀ ▶ resets the stack. Worked example: `tpl_item_list` drawer) · popover · popover_nav (usePopoverNav + PopoverScreen + PopoverNavHeader — the popover's built-in mini-router: EVERY `Popover` provides the nav context (`navigate(route)` pushes, `goBack`, `currentRoute`, `canGoBack`; resets on close), `PopoverScreen route=""` is the root and screens render conditionally (unmounted when inactive — no scroll preservation), `PopoverNavHeader` is the title row whose back chevron auto-appears while `canGoBack` (`right` slot, `backLabel`). For a multi-screen menu inside ONE popover (an avatar/settings menu drilling into a sub-panel); route PATTERNS, `params`, and stacked-alive screens are `screen_router`'s job. Distinct from `Popover`'s plain `PopoverHeader` children container) · tooltip ·
 alert · peek · empty_state · completion_state · callout (Callout · CalloutTitle ·
 CalloutText · CalloutActions) · kpi_card · kpi_strip · summary_line (SummaryLine — the light inline summary of a register/list's FILTERED view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band) · metric · trend_chip · sparkline ·
 bar_chart · line_chart · pie_chart · ring_gauge · progress_bar · stacked_progress_bar · breakdown ·
 funnel (Funnel — conversion funnel: narrowing bars + the step rate as a bold aligned headline row, count below; `orientation` vertical|horizontal, `onSelect`/`selectedKey` press-to-drill; the subset/drop-off sibling of stacked_progress_bar's whole-split) ·
 status_grid (StatusGrid + StatusLegend) · heatmap (density cross-tab — colour-only, no numbers) · matrix (Matrix — the PIVOT cross-tab: band-compound `Matrix` root + `Matrix.Header` (corner + axis labels) + `Matrix.Grid` (`display` number|heat|both — the cells, pressable, the value IN the cell) + `Matrix.Totals` (row + column + grand) + `Matrix.Legend`; the data layer `matrixTotals`/`MatrixAxisItem`/`MatrixCellRef` import from `@lotics/ui/matrix_totals`. Pick over `Heatmap` when the NUMBER and totals matter, not just where it clusters) · legend_item · remainder_meter · allocation_row ·
 scan_field · file_dropzone · 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, never in the default view; `selectTileRemove={false}` drops even that so delete is menu-only) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `selectTileRemove`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines (pdf.js · `@lotics/docx` · `@lotics/xlsx`) are LAZY (dynamic-imported, ~free until a doc of that type is opened) and SHIP AS `@lotics/ui` deps (7.14.0+) — custom-code apps get PDF/Word/Excel preview with ZERO extra install. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
-file_gallery_modal · image_gallery · use_selection (useSelection — always-on multi-select state for a register/list: the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`; selectability gating stays with the caller. The checkbox-always-visible counterpart to `use_selection_mode`) · use_selection_mode · use_section_nav (useSectionNav — scroll-spy for a LONG record surface with a left outline rail: keys in page order → {scrollRef, onScroll, register(key)→onLayout, jumpTo(key), activeKey}; rail items are `MenuButton`s (selected={activeKey===key}); section wrappers must be DIRECT children of the ScrollView content. On NARROW containers the rail becomes a PINNED bar naming the CURRENT section (the spy keeps it honest) that opens a full-page section-picker `Modal` (`MenuButton` list; Escape / the close control dismiss) — never a horizontal tab strip the thumb has to scroll. Worked example: `tpl_record`) · share_or_download · rotate_image · avatar · skeleton · activity_indicator · loading · divider ·
+app_icon (AppIcon — the app's launcher tile: a brand-gradient square from a `themeColor` palette token (unknown → neutral zinc) holding any Lucide icon by runtime name via DynamicIcon; `size` sm|md. One render wherever an app shows — launcher, list, picker, settings) · dynamic_icon (DynamicIcon — any Lucide icon by RUNTIME name (kebab-case string), for user/config-chosen icons a compile-time `IconName` can't express; web lazy-loads per icon, unknown name → blank. Decorative — the enclosing control carries the accessible name. A fixed, code-chosen glyph → `Icon`) · group_avatar (GroupAvatar — the first letter of `name` in a zinc rounded square (`size`, default 40); the avatar for image-less entities — groups, organizations. A person → `Avatar`/`MemberChip`) · rotatable_image (RotatableImage — an image rotating in 90° steps that REFITS: at a quarter turn the box lays out in SWAPPED dimensions then rotates into place, so a rotated landscape fills the frame; the VIEW half of image rotation — `rotate_image` bakes the pixels for re-upload; FilePreview/ImageGallery compose it) · file_preview_types (PreviewLabels / FilePreviewProps / GalleryLabels — the shared label + prop contracts of the file-preview family; types only) · file_gallery_modal · image_gallery · use_selection (useSelection — always-on multi-select state for a register/list: the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`; selectability gating stays with the caller. The checkbox-always-visible counterpart to `use_selection_mode`) · use_selection_mode · use_section_nav (useSectionNav — scroll-spy for a LONG record surface with a left outline rail: keys in page order → {scrollRef, onScroll, register(key)→onLayout, jumpTo(key), activeKey}; rail items are `MenuButton`s (selected={activeKey===key}); section wrappers must be DIRECT children of the ScrollView content. On NARROW containers the rail becomes a PINNED bar naming the CURRENT section (the spy keeps it honest) that opens a full-page section-picker `Modal` (`MenuButton` list; Escape / the close control dismiss) — never a horizontal tab strip the thumb has to scroll. Worked example: `tpl_record`) · share_or_download · rotate_image · avatar · skeleton · activity_indicator · loading · divider ·
 spacer · stack · section_card · page_header · page_content · calendar (calendar/index.ts) · gantt ·
 comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating
 expandable form — a composer's working state) · composer (Composer — the adaptive command/chat
@@ -1059,6 +1063,6 @@ children slot — with FindingComparison, the expected-vs-actual body: labeled s
 delta; the `finding` locale slice) ·
 format_money · format_date · colors (solid · tint · ramp · ColorName ·
 isColorName · asColorName — coerce a stored option/status token to a ColorName, neutral fallback) ·
-use_focus_ring (useFocusRing — keyboard-aware focus state for painting a control's own ring; see Focus rings) ·
+auto_sizer (AutoSizer — measures its own box via onLayout and renders the render-prop child only once `{width,height}` exist; `autoSizeWidthOnly`/`autoSizeHeightOnly`, `onResize`. For content needing pixel dimensions before first paint — a canvas, a virtualized grid) · separator (Separator — a `Divider` pre-wrapped in vertical padding (`padding: SpacerSize`, default 8): the between-groups rule WITH breathing room — what `Stack useSeparator` inserts and what menus/popovers put between option groups; `Divider` is the bare hairline) · 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) · info_popover (InfoPopover — the ⓘ button opening a 280px popover of explanatory `text`; the middle ground between Tooltip (short hover label) and composing Popover (rich content) — it is what `SectionHeadingTitle.info`/`CardHeaderTitle.info` render) · shortcut_badge (ShortcutBadge — the keycap hint pill: a zinc-50 badge rendering a shortcut from a raw string or `ShortcutDescriptor` (⌘B on Mac, Ctrl+B elsewhere); null on small screens. `TextInputField shortcut` renders it built-in) · trend_footer (TrendFooter — the "Up X% vs last period" caption under a chart card: signed `value` (0 = flat), `periodLabel`, optional `detail`; `goodDirection="down"` flips green/red for metrics where down is good; SKIP it when there's no comparator. Direction words via the `trendFooter` locale slice; goes in `SectionCard footer`) · dots_indicator (DotsIndicator — three looping bouncing dots (`size`/`color`); the indeterminate "working/typing" pulse `Loading` composes; use bare beside a caption while an agent thinks. Determinate work → ProgressBar) · scroll_to_bottom (ScrollToBottom — the floating jump-to-latest circle button for a chat/feed; ONLY the affordance — the caller owns positioning, visibility, and the actual scroll) · animation_fade_in (AnimationFadeIn — the mount transition: children fade (+ optional `translateY` rise) into place on first render, once; the entrance polish Accordion/Timeline/Stepper/AgentRun rows use) · 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; `accessibilityLabel` required for `region`) · skip_link (SkipLink — the a11y bypass link: parked off-screen until keyboard focus slides it in; `href="#targetId"` jumps past repeated nav into the main region. One per app shell, FIRST in the tree; web-only) · use_async_fn (useAsyncFn — wrap an async function into a manual-trigger mutation: `[run, {loading, data, error}]`, unmount-safe, the error lands in state AND rethrows; the pending-state engine for a submit/download/upload action) · use_hover (useHover — pointer-hover state `{hovered, hoverProps}` for raw inputs/DOM controls that lack a hovered style state; native stays false. Pressable-based controls use the built-in `hovered` state instead) · use_auto_grow_height (useAutoGrowHeight — the grows-with-content textarea engine ({minLines,maxLines} → container height + `scrollEnabled` at the cap); powers Composer and multiline TextInputField — reach for it only when hand-rolling a growing input) · overlay_scope (isOverlayScopeActive / useOverlayScope — the module-level open-overlay counter every overlay primitive reports into; the host's shortcut registry reads it synchronously to floor page-level shortcuts while any overlay is open. Lives in the primitives — never call it from a screen) · route_matching (pure `:param` route-pattern utilities — routeMatches / parseRouteParams / findBestPattern (exact beats parameterized); the matching core under ScreenRouter/Dialog) · text_utils (text/typography plumbing: `getTextColor` (the TextColor→hex map incl. the AA-cleared valence set), the Inter `fontFamily*` stacks, and `getInputTextStyle`/`getInputLineHeight` — the 16px-mobile/14px-desktop input contract that stops Safari iOS auto-zoom; only for hand-rolled raw inputs) · use_focus_ring (useFocusRing — keyboard-aware focus state for painting a control's own ring; see Focus rings) ·
 focus_ring_pressable (FocusRingPressable — a Pressable that rings on keyboard focus; the raw-control default) ·
 control_surface (CONTROL_HEIGHT · CONTROL_RADIUS · FOCUS_RING · chipSurfaceStyle — the shared control-surface tokens).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -69,7 +69,6 @@
     "./theme": "./src/theme.tsx",
     "./progress_bar": "./src/progress_bar.tsx",
     "./form_date_picker": "./src/form_date_picker.tsx",
-    "./form_time_picker": "./src/form_time_picker.tsx",
     "./form_picker": "./src/form_picker.tsx",
     "./picker": "./src/picker.tsx",
     "./select": "./src/select.tsx",
@@ -170,7 +169,6 @@
     "./container": "./src/container.tsx",
     "./count": "./src/count.tsx",
     "./dots_indicator": "./src/dots_indicator.tsx",
-    "./highlighted_text": "./src/highlighted_text.tsx",
     "./list": "./src/list.tsx",
     "./list_item": "./src/list_item.tsx",
     "./section": "./src/section.tsx",
@@ -185,11 +183,9 @@
     "./tabs": "./src/tabs.tsx",
     "./segmented_control": "./src/segmented_control.tsx",
     "./auto_sizer": "./src/auto_sizer.tsx",
-    "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",
     "./page_content": "./src/page_content.tsx",
     "./page_header": "./src/page_header.tsx",
-    "./pager_view": "./src/pager_view.tsx",
     "./date_picker": "./src/date_picker.tsx",
     "./date_filter": "./src/date_filter.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
@@ -200,7 +196,6 @@
     "./modal": "./src/modal.tsx",
     "./screen_router": "./src/screen_router.tsx",
     "./route_matching": "./src/route_matching.ts",
-    "./menu_title": "./src/menu_title.tsx",
     "./avatar": {
       "react-native": "./src/avatar.tsx",
       "default": "./src/avatar.web.tsx"
@@ -216,7 +211,6 @@
     "./json_panel": "./src/json_panel.tsx",
     "./timeline": "./src/timeline.tsx",
     "./loading": "./src/loading.tsx",
-    "./popover_header": "./src/popover_header.tsx",
     "./switch_button": "./src/switch_button.tsx",
     "./alert": "./src/alert.tsx",
     "./landmark": "./src/landmark.tsx",

package/src/locale.tsx

@@ -45,6 +45,8 @@ export interface LoticsLocale {
   sectionHeading: { info: string };
   /** `Chip`: the ✕ default name when no `dismissTooltip` is given. */
   chip: { remove: string };
+  /** `TrendFooter`: the direction words of the trend sentence. */
+  trendFooter: { up: string; down: string };
   /** `SuggestionChip`: the press target's default name and the ✕ tooltip. */
   suggestionChip: { add: (label: string) => string; dismiss: string };
   /** `Confidence`: the full level phrase ("High confidence" …). */
@@ -105,6 +107,7 @@ export const en: LoticsLocale = {
   ledger: { rowDetails: (label) => `${label} details` },
   sectionHeading: { info: "About this data" },
   chip: { remove: "Remove" },
+  trendFooter: { up: "Up", down: "Down" },
   suggestionChip: { add: (label) => `Add: ${label}`, dismiss: "Dismiss suggestion" },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
@@ -181,6 +184,7 @@ export const vi: LoticsLocale = {
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
   sectionHeading: { info: "Giải thích dữ liệu" },
   chip: { remove: "Xóa" },
+  trendFooter: { up: "Tăng", down: "Giảm" },
   suggestionChip: { add: (label) => `Thêm: ${label}`, dismiss: "Bỏ gợi ý" },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {

package/src/page_header.tsx

@@ -1,7 +1,6 @@
 import { View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { ReactNode } from "react";
-import { useScreenSize } from "@lotics/ui/use_screen_size";
 
 interface PageHeaderProps {
   title: string;
@@ -12,7 +11,6 @@ interface PageHeaderProps {
 
 export function PageHeader(props: PageHeaderProps) {
   const { title, description, left, right } = props;
-  const screenSize = useScreenSize();
 
   const hasNav = !!left || !!right;
 

package/src/popover_nav.tsx

@@ -1,4 +1,7 @@
 import { createContext, ReactNode, useContext } from "react";
+import { IconButton } from "./icon_button";
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
 
 export interface PopoverNavContextValue {
   currentRoute: string;
@@ -30,3 +33,40 @@ export function PopoverScreen(props: PopoverScreenProps) {
 
   return <>{children}</>;
 }
+
+export interface PopoverNavHeaderProps {
+  title: string;
+  right?: ReactNode;
+  /** Accessible name for the back button. Default: "Back". Pass a translated string from the consumer. */
+  backLabel?: string;
+}
+
+/** The routed-popover title row: a back chevron auto-appears while `canGoBack`
+ *  (reads `usePopoverNav`), sm-medium title fills, `right` a trailing action.
+ *  Pairs with `PopoverScreen`. Distinct from `Popover`'s own plain
+ *  `PopoverHeader` children container. */
+export function PopoverNavHeader(props: PopoverNavHeaderProps) {
+  const { title, right, backLabel = "Back" } = props;
+  const { goBack, canGoBack } = usePopoverNav();
+
+  return (
+    <View style={navHeaderStyles.container}>
+      {canGoBack && (
+        <IconButton icon="chevron-left" size="lg" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
+      )}
+      <Text size="sm" weight="medium" style={{ flex: 1 }}>
+        {title}
+      </Text>
+      {right}
+    </View>
+  );
+}
+
+const navHeaderStyles = StyleSheet.create({
+  container: {
+    paddingLeft: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+});

package/src/trend_footer.tsx

@@ -1,4 +1,5 @@
 import { TrendingDown, TrendingUp } from "lucide-react";
+import { useLoticsLocale } from "./locale";
 import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
@@ -32,13 +33,14 @@ export function TrendFooter(props: TrendFooterProps) {
   const flat = value === 0;
   const isGood = flat ? null : (up && goodDirection === "up") || (!up && goodDirection === "down");
   const color = isGood === null ? colors.zinc[600] : isGood ? colors.green[700] : colors.red[700];
+  const labels = useLoticsLocale().trendFooter;
   const Icon = up ? TrendingUp : TrendingDown;
   return (
     <View style={styles.container}>
       <View style={styles.row}>
         <Icon size={16} color={color} />
         <Text size="sm" weight="medium" style={{ color }}>
-          {up ? "Up" : "Down"} {Math.abs(value)}% {periodLabel}
+          {up ? labels.up : labels.down} {Math.abs(value)}% {periodLabel}
         </Text>
       </View>
       {detail && (

package/src/use_screen_size.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Dimensions, Platform } from "react-native";
+import { Dimensions } from "react-native";
 
 const breakpoints = {
   // small (mobile)

package/src/animation_horizontal_slide.tsx

@@ -1,75 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Animated, StyleProp, ViewStyle } from "react-native";
-
-interface AnimationHorizontalSlideProps {
-  width: number;
-  visible: boolean;
-  children?: React.ReactNode;
-  onSlideAnimationEnd?: () => void;
-  onCollapseAnimationEnd?: () => void;
-  style?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-}
-
-export function AnimationHorizontalSlide(props: AnimationHorizontalSlideProps) {
-  const {
-    width: intrinsicWidth,
-    visible,
-    children,
-    onSlideAnimationEnd,
-    onCollapseAnimationEnd,
-    style,
-    contentContainerStyle,
-  } = props;
-  const widthAnim = useRef(new Animated.Value(visible ? intrinsicWidth : 0)).current;
-  const opacityAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(widthAnim, {
-        toValue: visible ? intrinsicWidth : 0,
-        bounciness: 0,
-        useNativeDriver: false,
-      }),
-      Animated.spring(opacityAnim, {
-        toValue: visible ? 1 : 0,
-        bounciness: 0,
-        useNativeDriver: false,
-      }),
-    ]).start((animation) => {
-      if (animation.finished) {
-        if (visible) {
-          onSlideAnimationEnd?.();
-        } else {
-          onCollapseAnimationEnd?.();
-        }
-      }
-    });
-  }, [
-    widthAnim,
-    opacityAnim,
-    visible,
-    intrinsicWidth,
-    onSlideAnimationEnd,
-    onCollapseAnimationEnd,
-  ]);
-
-  return (
-    <Animated.View style={[{ width: widthAnim, opacity: opacityAnim }, style]}>
-      <Animated.View
-        style={[
-          {
-            display: visible ? "flex" : "none",
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            width: intrinsicWidth,
-          },
-          contentContainerStyle,
-        ]}
-      >
-        {children}
-      </Animated.View>
-    </Animated.View>
-  );
-}

package/src/form_time_picker.tsx

@@ -1,22 +0,0 @@
-import { FormField, FormFieldProps } from "./form_field";
-import { TimePicker, TimePickerProps } from "./time_picker";
-
-export interface FormTimePickerProps
-  extends Omit<FormFieldProps, "style">,
-    TimePickerProps {}
-
-export function FormTimePicker(props: FormTimePickerProps) {
-  const { label, description, optional, optionalLabel, error, ...timePickerProps } = props;
-
-  return (
-    <FormField
-      label={label}
-      description={description}
-      error={error}
-      optional={optional}
-      optionalLabel={optionalLabel}
-    >
-      <TimePicker {...timePickerProps} />
-    </FormField>
-  );
-}

package/src/highlighted_text.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { Text, TextProps } from "./text";
-import { colors } from "./colors";
-import { View, StyleSheet } from "react-native";
-
-interface HighlightedTextProps extends Omit<TextProps, "children"> {
-  text: string;
-  searchTerm: string;
-  singleLine?: boolean;
-}
-
-export function HighlightedText({
-  text,
-  searchTerm,
-  singleLine = false,
-  ...textProps
-}: HighlightedTextProps) {
-  const parts = highlightSearchTerm(text || "", searchTerm || "");
-
-  // Use numberOfLines prop for single line display instead of custom CSS
-  const numberOfLines = singleLine ? 1 : undefined;
-
-  return (
-    <Text {...textProps} numberOfLines={numberOfLines}>
-      {parts.map((part, index) => (
-        <Text key={index} style={part.isHighlighted ? styles.highlightedText : undefined}>
-          {part.text}
-        </Text>
-      ))}
-    </Text>
-  );
-}
-
-interface TextPart {
-  text: string;
-  isHighlighted: boolean;
-}
-
-function highlightSearchTerm(text: string, searchTerm: string): TextPart[] {
-  if (!searchTerm.trim()) {
-    return [{ text, isHighlighted: false }];
-  }
-
-  const searchRegex = new RegExp(`(${escapeRegExp(searchTerm.trim())})`, "gi");
-  const parts: TextPart[] = [];
-  let lastIndex = 0;
-
-  text.replace(searchRegex, (match, ...args) => {
-    const index = args[args.length - 2] as number; // offset index from regex replace
-
-    // Add text before the match
-    if (index > lastIndex) {
-      parts.push({
-        text: text.slice(lastIndex, index),
-        isHighlighted: false,
-      });
-    }
-
-    // Add the highlighted match
-    parts.push({
-      text: match,
-      isHighlighted: true,
-    });
-
-    lastIndex = index + match.length;
-    return match;
-  });
-
-  // Add any remaining text after the last match
-  if (lastIndex < text.length) {
-    parts.push({
-      text: text.slice(lastIndex),
-      isHighlighted: false,
-    });
-  }
-
-  return parts.length > 0 ? parts : [{ text, isHighlighted: false }];
-}
-
-function escapeRegExp(string: string): string {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-const styles = StyleSheet.create({
-  highlightedText: {
-    backgroundColor: colors.yellow[100],
-    color: colors.yellow[900],
-    fontWeight: "bold" as const,
-    paddingHorizontal: 2,
-    borderRadius: 2,
-  },
-});

package/src/menu_title.tsx

@@ -1,15 +0,0 @@
-import { Text } from "./text";
-
-export interface MenuTitleProps {
-  title: string;
-}
-
-export function MenuTitle(props: MenuTitleProps) {
-  const { title } = props;
-
-  return (
-    <Text size="lg" weight="semibold" style={{ paddingLeft: 8, lineHeight: 32, paddingBottom: 16 }}>
-      {title}
-    </Text>
-  );
-}

package/src/pager_view.tsx

@@ -1,167 +0,0 @@
-import React, { Ref, useCallback, useEffect, useImperativeHandle, useRef } from "react";
-import { Animated, View, PanResponder, StyleSheet, NativeSyntheticEvent } from "react-native";
-import type RNPagerView from "react-native-pager-view";
-import type { PagerViewProps } from "react-native-pager-view";
-import { AutoSizer } from "@lotics/ui/auto_sizer";
-
-type PagerViewHandle = Pick<
-  RNPagerView,
-  "setPage" | "setPageWithoutAnimation" | "setScrollEnabled"
->;
-
-export function PagerView(props: PagerViewProps & { ref?: Ref<PagerViewHandle> }) {
-  const {
-    ref,
-    children,
-    initialPage = 0,
-    scrollEnabled = true,
-    overdrag = false,
-    onPageSelected,
-  } = props;
-  const pageWidthRef = useRef(0);
-  const pan = useRef(new Animated.Value(0)).current;
-  const offset = useRef(0);
-  const pageRef = useRef(initialPage);
-  const scroll = useRef(!!scrollEnabled);
-
-  const setPage = useCallback(
-    (newPage: number) => {
-      if (newPage < 0 || newPage >= React.Children.count(children)) {
-        return; // Ignore invalid pageRef
-      }
-
-      pageRef.current = newPage;
-
-      Animated.spring(pan, {
-        toValue: -newPage * pageWidthRef.current,
-        useNativeDriver: false,
-        bounciness: 0,
-      }).start();
-    },
-    [children, pan],
-  );
-
-  const setPageWithoutAnimation = useCallback(
-    (newPage: number) => {
-      if (newPage < 0 || newPage >= React.Children.count(children)) {
-        return; // Ignore invalid pageRef
-      }
-
-      pageRef.current = newPage;
-      pan.setValue(-newPage * pageWidthRef.current);
-    },
-    [children, pan],
-  );
-
-  const setScrollEnabled = useCallback((enabled: boolean) => {
-    scroll.current = enabled;
-  }, []);
-
-  useEffect(() => {
-    // Update the scroll when the scrollEnabled prop changes
-    scroll.current = !!scrollEnabled;
-  }, [scrollEnabled]);
-
-  useImperativeHandle(ref, () => ({
-    setPage,
-    setPageWithoutAnimation,
-    setScrollEnabled,
-  }));
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => scroll.current,
-      onPanResponderMove: (_evt, gestureState) => {
-        let newOffset = gestureState.dx - pageRef.current * pageWidthRef.current;
-
-        // Prevent overdragging at the start
-        if (overdrag === false && pageRef.current === 0 && gestureState.dx > 0) {
-          newOffset = 0;
-        }
-
-        // Prevent overdragging at the end
-        if (
-          overdrag === false &&
-          pageRef.current === React.Children.count(children) - 1 &&
-          gestureState.dx < 0
-        ) {
-          newOffset = -pageRef.current * pageWidthRef.current;
-        }
-
-        offset.current = newOffset;
-        pan.setValue(newOffset);
-      },
-      onPanResponderRelease: (evt, gestureState) => {
-        // Consider both the offset and the swipe velocity for the snap. Adjust according to preference
-        const swipeVelocityThreshold = 0.5;
-        const swipeDistanceThreshold = pageWidthRef.current / 4;
-
-        let newPage = pageRef.current;
-
-        if (
-          Math.abs(gestureState.vx) > swipeVelocityThreshold ||
-          Math.abs(gestureState.dx) > swipeDistanceThreshold
-        ) {
-          newPage =
-            gestureState.dx > 0
-              ? Math.max(pageRef.current - 1, 0)
-              : Math.min(pageRef.current + 1, React.Children.count(children) - 1);
-        }
-
-        pageRef.current = newPage;
-
-        Animated.spring(pan, {
-          toValue: -newPage * pageWidthRef.current,
-          useNativeDriver: false,
-          bounciness: 0,
-        }).start(() => {
-          // Update the offset after the animation completes
-          offset.current = -newPage * pageWidthRef.current;
-        });
-
-        onPageSelected?.({
-          nativeEvent: { position: newPage },
-        } as NativeSyntheticEvent<Readonly<{ position: number }>>);
-      },
-    }),
-  ).current;
-
-  const handleResize = useCallback(
-    (size: { width: number; height: number }) => {
-      const width = size.width;
-
-      pan.setValue(-pageRef.current * width);
-      offset.current = -pageRef.current * width;
-      pageWidthRef.current = width;
-    },
-    [pan],
-  );
-
-  return (
-    <AutoSizer onResize={handleResize}>
-      {({ width }) => (
-        <View style={styles.container}>
-          <Animated.View
-            style={{
-              flex: 1,
-              flexDirection: "row",
-              transform: [{ translateX: pan }],
-            }}
-            {...panResponder.panHandlers}
-          >
-            {React.Children.map(children, (child) => (
-              <View style={{ width }}>{child}</View>
-            ))}
-          </Animated.View>
-        </View>
-      )}
-    </AutoSizer>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    overflow: "hidden",
-  },
-});

package/src/popover_header.tsx

@@ -1,38 +0,0 @@
-import { ReactNode } from "react";
-import { View, StyleSheet } from "react-native";
-import { IconButton } from "./icon_button";
-import { Text } from "./text";
-import { usePopoverNav } from "./popover_nav";
-
-interface PopoverHeaderProps {
-  title: string;
-  right?: ReactNode;
-  /** Accessible name for the back button. Default: "Back". Pass a translated string from the consumer. */
-  backLabel?: string;
-}
-
-export function PopoverHeader(props: PopoverHeaderProps) {
-  const { title, right, backLabel = "Back" } = props;
-  const { goBack, canGoBack } = usePopoverNav();
-
-  return (
-    <View style={styles.container}>
-      {canGoBack && (
-        <IconButton icon="chevron-left" size="lg" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
-      )}
-      <Text size="sm" weight="medium" style={{ flex: 1 }}>
-        {title}
-      </Text>
-      {right}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingLeft: 8,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-});