@lotics/ui 47.13.1 → 47.15.0

package/src/drawer.tsx

@@ -104,6 +104,30 @@ export function Drawer(props: DrawerProps) {
     return () => document.removeEventListener("keydown", handler);
   }, [open, onPrev, onNext]);
 
+  // ONE definition for both placements. Written twice, the wide bar and the
+  // narrow line would drift the first time either gained a control.
+  const RecordNav = () => (
+    <View style={styles.nav}>
+      <IconButton
+        icon="chevron-left"
+        accessibilityLabel={loc.previous}
+        onPress={onPrev ?? (() => {})}
+        disabled={!onPrev}
+      />
+      {position ? (
+        <Text size="xs" color="muted" tabular>
+          {position}
+        </Text>
+      ) : null}
+      <IconButton
+        icon="chevron-right"
+        accessibilityLabel={loc.next}
+        onPress={onNext ?? (() => {})}
+        disabled={!onNext}
+      />
+    </View>
+  );
+
   // Mounted only while OPEN — see `overlay_layer.ts`. react-native-web appends a
   // `Modal`'s body-level div on first render and never re-orders it, so an
   // always-mounted overlay claims its slot ahead of one opened later and covers
@@ -117,36 +141,32 @@ export function Drawer(props: DrawerProps) {
         <Pressable style={styles.scrim} onPress={handleClose} accessibilityLabel={loc.close} tabIndex={-1} />
         <View style={[styles.panel, { width: screenSize.small ? "100%" : width }]}>
           <PortalHost>
-            <View style={styles.header}>
-              {typeof title === "string" ? (
-                <Text size="lg" weight="semibold" style={{ flex: 1 }}>
-                  {title}
-                </Text>
-              ) : (
-                <View style={{ flex: 1 }}>{title}</View>
-              )}
-              {hasNav ? (
-                <View style={styles.nav}>
-                  <IconButton
-                    icon="chevron-left"
-                    accessibilityLabel={loc.previous}
-                    onPress={onPrev ?? (() => {})}
-                    disabled={!onPrev}
-                  />
-                  {position ? (
-                    <Text size="xs" color="muted" tabular>
-                      {position}
-                    </Text>
-                  ) : null}
-                  <IconButton
-                    icon="chevron-right"
-                    accessibilityLabel={loc.next}
-                    onPress={onNext ?? (() => {})}
-                    disabled={!onNext}
-                  />
+            {/* THE TITLE IS THE LAST THING THE BAR GIVES UP.
+                It names the record — whose file is open — and on one bar with a
+                pager and three icon buttons it is the only element that CAN
+                give way, because every one of those is a fixed width. At 375
+                that made the drawer cut its own subject ("Hộ kinh doanh Vận tải
+                Đức Thắng" needed 261px and got 206) while the chrome beside it
+                sat whole. So below the split width the record navigation drops
+                to its own line and the name takes the full bar; the close stays
+                up top, where a reader reaches for it. */}
+            <View style={[styles.header, screenSize.small && hasNav ? styles.headerStacked : null]}>
+              <View style={styles.headerTopLine}>
+                {typeof title === "string" ? (
+                  <Text size="lg" weight="semibold" style={{ flex: 1 }}>
+                    {title}
+                  </Text>
+                ) : (
+                  <View style={{ flex: 1, minWidth: 0 }}>{title}</View>
+                )}
+                {hasNav && !screenSize.small ? <RecordNav /> : null}
+                <IconButton icon="x" size="lg" accessibilityLabel={loc.close} onPress={handleClose} />
+              </View>
+              {hasNav && screenSize.small ? (
+                <View style={styles.navLine}>
+                  <RecordNav />
                 </View>
               ) : null}
-              <IconButton icon="x" size="lg" accessibilityLabel={loc.close} onPress={handleClose} />
             </View>
             <SizeBoundary testID={testID} style={styles.body}>
               {children}
@@ -263,6 +283,24 @@ const styles = StyleSheet.create({
     borderLeftColor: colors.border,
     boxShadow: "-8px 0 24px rgba(0, 0, 0, 0.08)",
   },
+  // The narrow bar is a COLUMN: the title's line, then the record navigation
+  // under it. Two lines cost 32px; a cut record name costs the reader the one
+  // fact that says which file they are in.
+  headerStacked: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 4,
+  },
+  headerTopLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 0,
+  },
+  navLine: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",

package/src/format_date.ts

@@ -9,7 +9,8 @@ export type DateFormatStyle =
   | "medium" // 22 thg 5, 2026 / Sep 22, 2026 — readable, abbreviated month
   | "long" // 22 tháng 5, 2026 / September 22, 2026 — readable, full month
   | "dayMonth" // 22 thg 5 / Sep 22 — day + abbreviated month, no year
-  | "monthYear"; // Tháng 5 2026 / May 2026 — a period label (sentence-cased)
+  | "monthYear" // Tháng 5 năm 2026 / May 2026 — a period label (sentence-cased)
+  | "quarterYear"; // Quý 2 năm 2026 / Q2 2026 — the quarter the value falls in
 
 export interface FormatDateOptions {
   /** The date style. Default "date". */
@@ -34,6 +35,20 @@ const READABLE_OPTS: Record<"medium" | "long" | "dayMonth" | "monthYear", Intl.D
   monthYear: { month: "long", year: "numeric" },
 };
 
+/**
+ * How a quarter is SAID, by language.
+ *
+ * A table rather than `Intl`: CLDR carries no quarter pattern for
+ * `DateTimeFormat`, so there is nothing to ask it for. Every other language
+ * falls to the international "Q2 2026" — which is what an unlocalized surface
+ * should print, rather than a Vietnamese sentence it never asked for.
+ */
+const QUARTER_YEAR: Record<string, (quarter: number, year: number) => string> = {
+  vi: (quarter, year) => `Quý ${quarter} năm ${year}`,
+};
+
+const defaultQuarterYear = (quarter: number, year: number): string => `Q${quarter} ${year}`;
+
 const ISO_YEAR = /^(\d{4})$/;
 const ISO_YEAR_MONTH = /^(\d{4})-(\d{2})$/;
 const ISO_DATE_TIME = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?$/;
@@ -104,7 +119,8 @@ export function toISODate(value: Date | string | null | undefined): string {
  * THE date-value formatter — the date sibling of `formatMoney`. Accepts a `Date` OR an ISO string
  * and returns a localized display string; defaults to the home market. `format` picks the date
  * style: `date` → `22/05/2026`; `medium` → `22 thg 5, 2026`; `long` → `22 tháng 5, 2026`;
- * `dayMonth` → `22 thg 5`, `monthYear` → `Tháng 5 2026`. **`time: true` prepends the 24h time to
+ * `dayMonth` → `22 thg 5`, `monthYear` → `Tháng 5 năm 2026`, `quarterYear` → `Quý 2 năm 2026`
+ * (`Q2 2026` outside Vietnamese). **`time: true` prepends the 24h time to
  * ANY style** — `14:30 22/05/2026`, `14:30 22 tháng 5, 2026` (time-first). `compact` drops the
  * year on the numeric `date` style. Never hand-roll a date with `padStart` / `getMonth` / a raw
  * `Intl.DateTimeFormat` for VALUE display — call this. (Component-internal chrome is exempt — see
@@ -124,6 +140,16 @@ export function formatDate(value: Date | string | null | undefined, options: For
   if (precision === "year") {
     return String(date.getFullYear());
   }
+  // A quarter is read off the MONTH, so a month-precision value serves it
+  // exactly as a full date does — and, being a calendar period, it carries no
+  // day and no clock whatever `time` says.
+  if (format === "quarterYear") {
+    const language = locale.split("-")[0].toLowerCase();
+    return (QUARTER_YEAR[language] ?? defaultQuarterYear)(
+      Math.floor(date.getMonth() / 3) + 1,
+      date.getFullYear(),
+    );
+  }
   if (precision === "month") {
     return formatMonthYear(date, format, locale, compact, emptyLabel);
   }
@@ -166,7 +192,9 @@ export function formatDate(value: Date | string | null | undefined, options: For
  */
 function formatMonthYear(
   date: Date,
-  format: DateFormatStyle,
+  // `quarterYear` never arrives here — it answers before precision is consulted,
+  // and it takes no month options to strip a day out of.
+  format: Exclude<DateFormatStyle, "quarterYear">,
   locale: string,
   compact: boolean,
   emptyLabel: string,

package/src/gantt/gantt_view.tsx

@@ -5,7 +5,7 @@ import { colors, solid } from "../colors";
 import { proportionalRadius } from "../control_surface";
 import { FocusRingPressable } from "../focus_ring_pressable";
 import { SegmentedControl, type SegmentOption } from "../segmented_control";
-import { useLoticsLocale } from "../locale";
+import { useLoticsLocale, useLocaleTag } from "../locale";
 import { dayDiff } from "../calendar/dates";
 import { axisRange, barGeometry, buildRows, buildTicks, pxPerDay } from "./scale";
 import type { GanttLabels, GanttScale, GanttTask } from "./types";
@@ -23,6 +23,8 @@ export interface GanttViewProps<T = unknown> {
   defaultScale?: GanttScale;
   /** What counts as today for the marker and the opening scroll position. */
   today?: Date;
+  /** BCP-47 tag for the axis tick names. Defaults to the active
+   *  `LoticsLocaleProvider` pack's `bcp47`; pass one only to override it. */
   locale?: string;
   /** Optional toolbar caption shown left of the zoom switch. */
   title?: string;
@@ -48,9 +50,11 @@ export interface GanttViewProps<T = unknown> {
  * Renders at its natural height — wrap in a `ScrollView` for very long lists.
  */
 export function GanttView<T = unknown>(props: GanttViewProps<T>) {
-  const { tasks, defaultScale = "week", today = new Date(), locale, title, onTaskPress } = props;
+  const { tasks, defaultScale = "week", today = new Date(), title, onTaskPress } = props;
   const pack = useLoticsLocale();
   const L: GanttLabels = { ...pack.gantt, ...props.labels };
+  // The axis tick names come from Intl, so the active pack alone localizes them.
+  const locale = useLocaleTag(props.locale);
   const [scale, setScale] = useState<GanttScale>(defaultScale);
 
   const rows = useMemo(() => buildRows(tasks), [tasks]);

package/src/index.css

@@ -351,6 +351,24 @@ html {
   outline: none;
 }
 
+/* Native UA number-stepper reset — subtractive, like the focus reset above.
+   `NumberInput` renders `type="number"` for the numeric keypad and the parse,
+   and the browser throws in a stepper: two arrows that sit ON the right edge of
+   a right-aligned figure and take width out of the field, so a numeric column is
+   one width at rest and a narrower one the moment somebody focuses a cell.
+   Nothing in the kit steps a value by pressing an arrow — `Counter` draws its
+   own — so it is a control that costs layout and does nothing. */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
 /* @font-face declarations are NOT included here — each app provides its own
    font loading because paths differ per platform:
    - Frontend: /fonts/Inter_*.woff2 (served from public/)

package/src/ledger.tsx

@@ -256,24 +256,27 @@ export function LedgerRow(props: LedgerRowProps) {
   const { label, meta, value, tone = "default", peek, peekWidth = 300, reference, accessibilityLabel } = props;
   const rowDetails = useLoticsLocale().ledger.rowDetails;
   const { format, dropMeta } = useLedger();
-  // The caption goes entirely rather than shrinking to nothing. Yielding first
-  // (below) is the right ORDER but not a floor: at phone width a long caption
-  // still claims most of the text budget, clips, and takes the label down with
-  // it. Two separate
-  // authors had already worked around this by dropping `meta` at small widths
-  // in their own apps, which is the component's job.
+  // Below `META_MIN_ROW_WIDTH` the caption goes entirely rather than surviving as
+  // a sliver. Yielding first (see `yield`) is the right ORDER but not a floor: at
+  // phone width a caption clipped to two syllables is noise, and the space reads
+  // better spent on nothing. Two separate authors had already worked around this
+  // by dropping `meta` at small widths in their own apps, which is the
+  // component's job.
   const showMeta = meta != null && meta !== "" && !dropMeta;
   const content = (
     <>
       <Text size="sm" numberOfLines={1} style={styles.shrink}>
         {label}
       </Text>
+      {/* The caption IS the row's filler — it takes what the label and the figure
+          leave. With no caption to hold it open, an empty one does the same job. */}
       {showMeta ? (
         <Text size="xs" color="muted" numberOfLines={1} style={styles.yield}>
           {meta}
         </Text>
-      ) : null}
-      <View style={styles.grow} />
+      ) : (
+        <View style={styles.grow} />
+      )}
       {!peek && reference ? (
         <Link size="xs" onPress={reference.onPress} accessibilityLabel={reference.label}>
           {reference.label}
@@ -389,13 +392,18 @@ const styles = StyleSheet.create({
   rowHovered: { backgroundColor: colors.zinc[50] },
   grow: { flexGrow: 1, flexShrink: 1 },
   shrink: { flexShrink: 1 },
-  // The META yields BEFORE the label, and by more. Only the label carried a
-  // shrink, so under width pressure the row'''s IDENTITY was the one thing that
-  // gave way while its subordinate qualifier held full width — a narrow ledger
-  // read "Tổng thu (chư…" beside an intact "03/06, Cash". A caption qualifies a
-  // number; the label names it, and the name is what a reader needs when the
-  // row is too tight for both.
-  yield: { flexShrink: 3 },
+  // The META yields ENTIRELY before the label yields at all. A shrink RATIO (this
+  // was 3 against the label's 1) buys an order of magnitude, not an order of
+  // service: flexbox scales a shrink factor by the item's own width, so a caption
+  // longer than the label still handed part of the loss back to it, and a 375px
+  // ledger read "Ghi công … / nằm trong số còn phải t…" — both halves clipped,
+  // and the FIGURE squeezed along with them. Sizing the caption off the leftovers
+  // instead (`flexBasis: 0` + `flexGrow: 1`, so it is also the row's filler) makes
+  // the order exact: the label and the figure take their content width first, the
+  // caption gets what remains, and only once it is down to nothing does the label
+  // start clipping. A caption qualifies a number; the label names it, and the name
+  // is what a reader needs when the row is too tight for both.
+  yield: { flexGrow: 1, flexShrink: 1, flexBasis: 0 },
   total: { gap: 6 },
   // The BASIS row, the only one whose two sides can differ in height: its label may
   // carry a stacked `meta` while the figure stays one line. Centring then measures the