@lotics/ui 46.14.1 → 47.0.0

package/src/calendar/time_grid_view.tsx

@@ -1,174 +1,124 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { View, ScrollView, StyleSheet, Text as RNText, type StyleProp, type ViewStyle } from "react-native";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { View, ScrollView, StyleSheet, Text as RNText } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
 import { FocusRingPressable } from "../focus_ring_pressable";
-
-function TimeGridPressable(props: {
-  onPress?: () => void;
-  accessibilityLabel?: string;
-  style: StyleProp<ViewStyle>;
-  children: ReactNode;
-}) {
-  return (
-    <FocusRingPressable
-      onPress={props.onPress}
-      accessibilityRole={props.onPress ? "button" : undefined}
-      accessibilityLabel={props.accessibilityLabel}
-      style={props.style}
-    >
-      {props.children}
-    </FocusRingPressable>
-  );
-}
-import { layoutDayColumns, packEventLanes } from "./layout";
-import {
-  daysInView,
-  formatTime,
-  hourLabel,
-  isSameDay,
-  isToday,
-  minutesSinceMidnight,
-  startOfDay,
-  weekdayShort,
-} from "./dates";
-import type { CalendarEvent, Weekday } from "./types";
+import { useCalendar } from "./context";
+import { EventChip } from "./event_chip";
+import { initialScrollMinutes, isBanner, layoutDayColumns, packEventLanes } from "./layout";
+import { daysInView, formatTime, hourLabel, isToday, minutesSinceMidnight, startOfDay } from "./dates";
+import type { CalendarEvent } from "./types";
 
 const HOUR_HEIGHT = 44;
 const PX_PER_MIN = HOUR_HEIGHT / 60;
-const GRID_HEIGHT = 24 * HOUR_HEIGHT;
-const GUTTER = 56;
-const ALLDAY_LANE_H = 24;
-const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const GUTTER = 52;
+const ALLDAY_LANE_H = 22;
 const COL_GAP = 2;
 
-export interface TimeGridViewProps<T = unknown> {
-  mode: "week" | "day";
-  date: Date;
-  events: CalendarEvent<T>[];
-  weekStartsOn?: Weekday;
-  locale?: string;
-  /** Hour to scroll to on mount. Default: an hour before now (clamped). */
-  scrollToHour?: number;
-  /** All-day lane label; defaults to English ("all-day"). */
-  allDayLabel?: string;
-  onEventPress?: (event: CalendarEvent<T>) => void;
+/**
+ * The hour window a grid actually draws.
+ *
+ * `dayStartMinutes`/`dayEndMinutes` are a VIEWPORT, never a filter: a calendar
+ * that quietly refuses to draw a 06:00 delivery because the working day was
+ * declared as 08:00–18:00 is a calendar that lies. The configured window is the
+ * floor; anything earlier or later widens it to fit.
+ */
+export function gridWindow(
+  events: { start: Date; end?: Date | null }[],
+  dayStartMinutes: number,
+  dayEndMinutes: number,
+): { startMinutes: number; endMinutes: number } {
+  let lo = dayStartMinutes;
+  let hi = dayEndMinutes;
+  for (const e of events) {
+    lo = Math.min(lo, Math.floor(minutesSinceMidnight(e.start) / 60) * 60);
+    if (e.end) {
+      const endMin = minutesSinceMidnight(e.end);
+      // An end at exactly midnight belongs to the day that just closed.
+      hi = Math.max(hi, endMin === 0 ? 1440 : Math.ceil(endMin / 60) * 60);
+    }
+  }
+  return { startMinutes: Math.max(0, Math.min(lo, hi - 60)), endMinutes: Math.min(1440, Math.max(hi, lo + 60)) };
 }
 
-function EventBlock<T>({
-  event,
-  top,
-  height,
-  leftPct,
-  widthPct,
-  onPress,
-  locale,
-}: {
-  event: CalendarEvent<T>;
-  top: number;
-  height: number;
-  leftPct: number;
-  widthPct: number;
-  onPress?: (e: CalendarEvent<T>) => void;
-  locale?: string;
-}) {
-  const accent = event.color || colors.teal[600];
-  const compact = height < 34;
-  return (
-    <FocusRingPressable
-      onPress={onPress ? () => onPress(event) : undefined}
-      accessibilityRole={onPress ? "button" : undefined}
-      accessibilityLabel={event.title}
-      style={{
-        position: "absolute",
-        top,
-        height: Math.max(height - 1, 14),
-        left: `${leftPct}%`,
-        width: `${widthPct}%`,
-        paddingHorizontal: COL_GAP,
-      }}
-    >
-      <View
-        style={{
-          flex: 1,
-          borderRadius: 6,
-          backgroundColor: accent + "1f",
-          borderLeftWidth: 3,
-          borderLeftColor: accent,
-          paddingHorizontal: 6,
-          paddingVertical: compact ? 1 : 3,
-          overflow: "hidden",
-        }}
-      >
-        <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.zinc[800] }}>
-          {event.title}
-        </Text>
-        {!compact ? (
-          <Text size="xs" numberOfLines={1} style={{ color: colors.zinc[500] }}>
-            {formatTime(event.start, locale)}
-          </Text>
-        ) : null}
-      </View>
-    </FocusRingPressable>
-  );
+export interface TimeGridProps {
+  mode: "week" | "day";
 }
 
-export function TimeGridView<T = unknown>(props: TimeGridViewProps<T>) {
-  const { mode, date, events, weekStartsOn = 1, locale, onEventPress } = props;
-  const days = useMemo(
-    () => daysInView(mode, date, weekStartsOn),
-    [mode, date, weekStartsOn],
-  );
+export function CalendarTimeGrid(props: TimeGridProps) {
+  const { mode } = props;
+  const {
+    events, date, weekStartsOn, locale, labels, now: referenceNow, dayStartMinutes, dayEndMinutes,
+    onEventPress, onSlotPress, renderEvent,
+  } = useCalendar();
+
+  const days = useMemo(() => daysInView(mode, date, weekStartsOn), [mode, date, weekStartsOn]);
 
-  // Live now-indicator: tick each minute.
-  const [now, setNow] = useState(() => new Date());
+  // The now-line has to move, but it must move from the reference the rest of
+  // the tree agrees on — so it advances by REAL elapsed time from that anchor
+  // rather than re-reading a clock the caller may have deliberately overridden.
+  const anchor = useRef({ reference: referenceNow.getTime(), mountedAt: Date.now() });
+  const [tick, setTick] = useState(0);
   useEffect(() => {
-    const id = setInterval(() => setNow(new Date()), 60_000);
+    const id = setInterval(() => setTick((t) => t + 1), 60_000);
     return () => clearInterval(id);
   }, []);
-
-  const scrollRef = useRef<ScrollView>(null);
   useEffect(() => {
-    const hour = props.scrollToHour ?? Math.max(0, now.getHours() - 1);
-    const id = setTimeout(() => scrollRef.current?.scrollTo({ y: hour * HOUR_HEIGHT, animated: false }), 0);
-    return () => clearTimeout(id);
-    // Only on mount / mode change — not every minute.
+    anchor.current = { reference: referenceNow.getTime(), mountedAt: Date.now() };
+  }, [referenceNow]);
+  const now = useMemo(
+    () => new Date(anchor.current.reference + (Date.now() - anchor.current.mountedAt)),
+    // `tick` is the whole point — it is what re-reads the elapsed time.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode]);
+    [tick, referenceNow],
+  );
 
-  const { timedByDay, allDay } = useMemo(() => {
-    const timed: CalendarEvent<T>[] = [];
-    const banner: CalendarEvent<T>[] = [];
-    for (const e of events) {
-      const multiDay = e.end ? !isSameDay(e.start, e.end) : false;
-      if (e.allDay || multiDay) banner.push(e);
-      else timed.push(e);
-    }
+  const { timedByDay, banners, inView } = useMemo(() => {
+    const timed: CalendarEvent<unknown>[] = [];
+    const bar: CalendarEvent<unknown>[] = [];
+    for (const e of events) (isBanner(e) ? bar : timed).push(e);
     const byDay = days.map((day) =>
-      timed.filter((e) => {
-        const s = startOfDay(e.start);
-        return s.getTime() === day.getTime();
-      }),
+      timed.filter((e) => startOfDay(e.start).getTime() === day.getTime()),
     );
-    return { timedByDay: byDay, allDay: banner };
+    return { timedByDay: byDay, banners: bar, inView: byDay.flat() };
   }, [events, days]);
 
-  const allDayPacked = useMemo(() => packEventLanes(allDay, days[0], days.length), [allDay, days]);
+  const win = useMemo(
+    () => gridWindow(inView, dayStartMinutes, dayEndMinutes),
+    [inView, dayStartMinutes, dayEndMinutes],
+  );
+  const gridHeight = ((win.endMinutes - win.startMinutes) / 60) * HOUR_HEIGHT;
+  const hours = useMemo(
+    () => Array.from({ length: Math.ceil((win.endMinutes - win.startMinutes) / 60) }, (_, i) => win.startMinutes / 60 + i),
+    [win],
+  );
+
+  const scrollRef = useRef<ScrollView>(null);
+  const target = initialScrollMinutes(inView, days, now, win.startMinutes);
+  useEffect(() => {
+    const y = Math.max(0, (target - win.startMinutes) * PX_PER_MIN);
+    const id = setTimeout(() => scrollRef.current?.scrollTo({ y, animated: false }), 0);
+    return () => clearTimeout(id);
+    // Re-aimed whenever the range changes — navigating to another week must
+    // land on THAT week's content, which is the bug the old "an hour before
+    // now" rule had: any week without today in it opened on empty grid.
+  }, [target, win.startMinutes]);
+
+  const allDayPacked = useMemo(() => packEventLanes(banners, days[0], days.length), [banners, days]);
 
   return (
     <View style={styles.root}>
-      {/* Header: day columns */}
       <View style={styles.headerRow}>
         <View style={{ width: GUTTER }} />
         {days.map((day) => {
           const today = isToday(day, now);
           return (
             <View key={day.toISOString()} style={styles.headerCell}>
-              <Text size="xs" style={{ color: today ? colors.teal[600] : colors.zinc[500] }}>
-                {weekdayShort(day, locale).toUpperCase()}
+              <Text size="xs" style={today ? styles.todayInk : styles.mutedInk}>
+                {new Intl.DateTimeFormat(locale, { weekday: "short" }).format(day).toUpperCase()}
               </Text>
-              <View style={[styles.dateBadge, today && { backgroundColor: colors.teal[600] }]}>
-                <Text size="sm" weight={today ? "semibold" : "medium"} style={{ color: today ? colors.white : colors.zinc[800] }}>
+              <View style={[styles.dateBadge, today && styles.dateBadgeToday]}>
+                <Text size="sm" weight={today ? "semibold" : "medium"} style={today ? styles.onAccent : styles.dateInk}>
                   {day.getDate()}
                 </Text>
               </View>
@@ -177,89 +127,99 @@ export function TimeGridView<T = unknown>(props: TimeGridViewProps<T>) {
         })}
       </View>
 
-      {/* All-day banner row */}
       {allDayPacked.lanes > 0 ? (
         <View style={[styles.allDayRow, { height: allDayPacked.lanes * (ALLDAY_LANE_H + 2) + 6 }]}>
-          <View style={{ width: GUTTER, justifyContent: "center" }}>
-            <Text size="xs" style={{ color: colors.zinc[400], textAlign: "right", paddingRight: 6 }}>
-              {props.allDayLabel ?? "all-day"}
-            </Text>
+          <View style={styles.allDayGutter}>
+            <Text size="xs" style={styles.allDayLabel}>{labels.allDay}</Text>
           </View>
           <View style={{ flex: 1 }}>
-            {allDayPacked.bars.map((bar) => {
-              const accent = bar.event.color || colors.teal[600];
-              return (
-                <TimeGridPressable
-                  key={bar.event.id}
-                  onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
-                  accessibilityLabel={bar.event.title}
-                  style={{
-                    position: "absolute",
-                    top: bar.lane * (ALLDAY_LANE_H + 2) + 3,
-                    height: ALLDAY_LANE_H,
-                    left: `${(bar.startCol / days.length) * 100}%`,
-                    width: `${(bar.span / days.length) * 100}%`,
-                    paddingHorizontal: COL_GAP,
-                  }}
-                >
-                  <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8 }}>
-                    <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>
-                      {bar.event.title}
-                    </Text>
-                  </View>
-                </TimeGridPressable>
-              );
-            })}
+            {allDayPacked.bars.map((bar) => (
+              <EventChip
+                key={bar.event.id}
+                event={bar.event}
+                variant="banner"
+                height={ALLDAY_LANE_H}
+                locale={locale}
+                render={renderEvent}
+                onPress={onEventPress ? () => onEventPress(bar.event.id) : undefined}
+                style={{
+                  position: "absolute",
+                  top: bar.lane * (ALLDAY_LANE_H + 2) + 3,
+                  height: ALLDAY_LANE_H,
+                  left: `${(bar.startCol / days.length) * 100}%`,
+                  width: `${(bar.span / days.length) * 100}%`,
+                  paddingHorizontal: COL_GAP,
+                }}
+              />
+            ))}
           </View>
         </View>
       ) : null}
 
-      {/* Scrollable time grid */}
       <ScrollView ref={scrollRef} style={{ flex: 1 }} showsVerticalScrollIndicator>
-        <View style={{ flexDirection: "row", height: GRID_HEIGHT }}>
-          {/* Hour gutter */}
+        <View style={{ flexDirection: "row", height: gridHeight }}>
           <View style={{ width: GUTTER }}>
-            {HOURS.map((h) =>
-              h === 0 ? null : (
-                <RNText
-                  key={h}
-                  style={{
-                    position: "absolute",
-                    top: h * HOUR_HEIGHT - 7,
-                    right: 6,
-                    fontSize: 11,
-                    color: colors.zinc[400],
-                  }}
-                >
+            {hours.map((h, i) =>
+              i === 0 ? null : (
+                <RNText key={h} style={[styles.hourLabel, { top: i * HOUR_HEIGHT - 7 }]}>
                   {hourLabel(h)}
                 </RNText>
               ),
             )}
           </View>
-          {/* Day columns */}
           {days.map((day, dayIdx) => {
             const placed = layoutDayColumns(day, timedByDay[dayIdx]);
             const today = isToday(day, now);
+            const nowOffset = (minutesSinceMidnight(now) - win.startMinutes) * PX_PER_MIN;
             return (
               <View key={day.toISOString()} style={styles.dayColumn}>
-                {HOURS.map((h) => (
-                  <View key={h} style={{ position: "absolute", top: h * HOUR_HEIGHT, left: 0, right: 0, borderTopWidth: 1, borderTopColor: colors.zinc[100] }} />
+                {hours.map((h, i) => (
+                  <View key={h} style={[styles.hourRule, { top: i * HOUR_HEIGHT }]} />
                 ))}
-                {placed.map((c) => (
-                  <EventBlock
-                    key={c.event.id}
-                    event={c.event}
-                    top={c.topMinutes * PX_PER_MIN}
-                    height={c.heightMinutes * PX_PER_MIN}
-                    leftPct={(c.column / c.columns) * 100}
-                    widthPct={(1 / c.columns) * 100}
-                    onPress={onEventPress}
-                    locale={locale}
-                  />
-                ))}
-                {today ? (
-                  <View style={{ position: "absolute", top: minutesSinceMidnight(now) * PX_PER_MIN, left: 0, right: 0, height: 2, backgroundColor: colors.red[500] }}>
-                    <View style={{ position: "absolute", left: -4, top: -3, width: 8, height: 8, borderRadius: 4, backgroundColor: colors.red[500] }} />
+                {/* One press target per hour. Fine-grained enough to mean
+                    something, coarse enough not to put 300 Tab stops in a week. */}
+                {onSlotPress
+                  ? hours.map((h, i) => (
+                      <FocusRingPressable
+                        key={`s${h}`}
+                        accessibilityRole="button"
+                        accessibilityLabel={labels.addAt(
+                          `${new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long" }).format(day)} ${hourLabel(h)}`,
+                        )}
+                        onPress={() => {
+                          const start = new Date(day.getFullYear(), day.getMonth(), day.getDate(), h, 0);
+                          onSlotPress(start, new Date(start.getTime() + 3_600_000));
+                        }}
+                        style={[styles.slot, { top: i * HOUR_HEIGHT }]}
+                      />
+                    ))
+                  : null}
+                {placed.map((c) => {
+                  const height = c.heightMinutes * PX_PER_MIN;
+                  return (
+                    <EventChip
+                      key={c.event.id}
+                      event={c.event}
+                      variant="block"
+                      compact={height < 34}
+                      height={Math.max(height - 1, 14)}
+                      locale={locale}
+                      render={renderEvent}
+                      onPress={onEventPress ? () => onEventPress(c.event.id) : undefined}
+                      style={{
+                        position: "absolute",
+                        top: (c.topMinutes - win.startMinutes) * PX_PER_MIN,
+                        height: Math.max(height - 1, 14),
+                        left: `${(c.column / c.columns) * 100}%`,
+                        width: `${(1 / c.columns) * 100}%`,
+                        paddingHorizontal: COL_GAP,
+                      }}
+                    />
+                  );
+                })}
+                {today && nowOffset >= 0 && nowOffset <= gridHeight ? (
+                  <View style={[styles.nowLine, { top: nowOffset }]} accessibilityLabel={formatTime(now, locale)}>
+                    <View style={styles.nowDot} />
                   </View>
                 ) : null}
               </View>
@@ -271,11 +231,31 @@ export function TimeGridView<T = unknown>(props: TimeGridViewProps<T>) {
   );
 }
 
+export function CalendarWeek() {
+  return <CalendarTimeGrid mode="week" />;
+}
+
+export function CalendarDay() {
+  return <CalendarTimeGrid mode="day" />;
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: colors.white },
-  headerRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 6 },
+  headerRow: { flexDirection: "row", paddingTop: 2, paddingBottom: 8 },
   headerCell: { flex: 1, alignItems: "center", gap: 3 },
   dateBadge: { minWidth: 26, height: 26, borderRadius: 13, alignItems: "center", justifyContent: "center", paddingHorizontal: 4 },
-  allDayRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, paddingVertical: 3 },
+  dateBadgeToday: { backgroundColor: colors.teal[600] },
+  todayInk: { color: colors.teal[600] },
+  mutedInk: { color: colors.zinc[500] },
+  dateInk: { color: colors.zinc[800] },
+  onAccent: { color: colors.white },
+  allDayRow: { flexDirection: "row", borderTopWidth: 1, borderTopColor: colors.zinc[100], paddingVertical: 4 },
+  allDayGutter: { width: GUTTER, justifyContent: "center" },
+  allDayLabel: { color: colors.zinc[400], textAlign: "right", paddingRight: 6 },
+  hourLabel: { position: "absolute", right: 6, fontSize: 11, color: colors.zinc[400] },
+  hourRule: { position: "absolute", left: 0, right: 0, borderTopWidth: 1, borderTopColor: colors.zinc[100] },
+  slot: { position: "absolute", left: 0, right: 0, height: HOUR_HEIGHT },
   dayColumn: { flex: 1, borderLeftWidth: 1, borderLeftColor: colors.zinc[100] },
+  nowLine: { position: "absolute", left: 0, right: 0, height: 2, backgroundColor: colors.red[500] },
+  nowDot: { position: "absolute", left: -4, top: -3, width: 8, height: 8, borderRadius: 4, backgroundColor: colors.red[500] },
 });

package/src/calendar/types.ts

@@ -1,3 +1,6 @@
+import type { ColorName } from "../color_tokens";
+import type { RepeatRule } from "./repeat";
+
 /**
  * Calendar primitive — data model. Mirrors the minimum shape every calendar API
  * converges on ({title, start, end}) plus the layered extras (all-day, color).
@@ -8,44 +11,67 @@ export interface CalendarEvent<T = unknown> {
   title: string;
   /** Event start (local time). For an all-day event, the day it begins. */
   start: Date;
-  /** Exclusive end. Null/undefined → a zero-length point (treated as 30 min in the time grid). */
+  /** INCLUSIVE end day for an all-day event; exclusive instant for a timed one.
+   *  Null/undefined → a zero-length point (floored in the time grid). */
   end?: Date | null;
   /** All-day / multi-day banner event (rendered in the all-day row, not the time grid). */
   allDay?: boolean;
-  /** Hex or design-token color for the event chip. */
-  color?: string | null;
+  /**
+   * Design-token colour for the event. A TOKEN, not a hex string: the views
+   * derive a fill, a tint and a border from it, and a raw hex cannot be tinted
+   * without string surgery — the previous version concatenated `"1f"` onto the
+   * value, which silently produced garbage for any colour that was not a
+   * 6-digit hex.
+   */
+  color?: ColorName;
+  /** Secondary line — a room, an owner, a status. Shown where there is room. */
+  meta?: string;
+  /**
+   * Repeat this event. The calendar expands it to the occurrences that fall in
+   * the view's own range, so a daily timetable costs one event, not a year of
+   * them. An occurrence's `id` encodes its source (see `sourceEventId`), so
+   * `onEventPress` still hands you the row the series came from.
+   */
+  repeat?: RepeatRule;
   data?: T;
 }
 
-export type CalendarViewMode = "month" | "week" | "day";
+export type CalendarViewMode = "month" | "week" | "day" | "agenda";
 
 /**
- * User-facing chrome strings. Primitives default to English and take these as a
- * prop — i18n is the consumer's responsibility (see the @lotics/ui convention in
- * grid/data_grid.tsx). Dates/weekday/month names come from `locale` via Intl and
- * are not part of this set.
+ * User-facing chrome strings. Resolution is **prop → `LoticsLocale.calendarView`
+ * → English default**, the kit-wide rule; `labels` overrides one instance.
+ * Dates/weekday/month names come from `locale` via Intl and are not part of this set.
  */
-export interface CalendarLabels {
+export interface CalendarViewLabels {
   today: string;
   month: string;
   week: string;
   day: string;
+  agenda: string;
   previous: string;
   next: string;
   allDay: string;
-  /** Month-cell overflow chip, e.g. (3) => "+3 more". */
+  /** Day-cell overflow chip, e.g. (3) => "+3 more". */
   more: (count: number) => string;
+  /** Agenda / empty range. */
+  noEvents: string;
+  /** Accessible name of an empty time slot's press target. */
+  addAt: (when: string) => string;
 }
 
-export const DEFAULT_CALENDAR_LABELS: CalendarLabels = {
+export const DEFAULT_CALENDAR_VIEW_LABELS: CalendarViewLabels = {
   today: "Today",
   month: "Month",
   week: "Week",
   day: "Day",
+  agenda: "Agenda",
   previous: "Previous",
   next: "Next",
   allDay: "all-day",
   more: (n) => `+${n} more`,
+  noEvents: "Nothing scheduled",
+  addAt: (when) => `Add at ${when}`,
 };
 
 /** 0 = Sunday … 6 = Saturday. */

package/src/control_surface.ts

@@ -69,6 +69,34 @@ export const MIN_VALUE_WIDTH = 200;
  *  (avatars, dots, switches, sliders, progress, icon buttons) stay full. */
 export const CONTROL_RADIUS = 10;
 
+/**
+ * The radius ladder's container rung — a surface that HOLDS content rather than
+ * one you press: a board card, a calendar's event chip, a panel.
+ *
+ * Two rungs, and the question that picks one is what the thing IS, never how
+ * big it is: `CONTROL_RADIUS` for something you press directly, this for
+ * something with content inside it. A whole card being pressable does not make
+ * it a control.
+ */
+export const CARD_RADIUS = 16;
+
+/**
+ * The radius a SHORT surface should take — proportionate to its height, capped
+ * at the control rung.
+ *
+ * A fixed radius does not survive a component whose height is data: at 22px,
+ * `CONTROL_RADIUS` is half the box and the thing renders as a pill, while the
+ * same 10 on a two-hour calendar block is barely a corner. Two boxes of the
+ * same family then look like two different vocabularies. Scaling by height and
+ * capping keeps one corner treatment across a chip, a bar and a block.
+ *
+ * The ratio is under a third, so the straight edge always dominates — a corner
+ * that eats half the side has stopped being a rounded rectangle.
+ */
+export function proportionalRadius(height: number): number {
+  return Math.round(Math.min(CARD_RADIUS, Math.max(0, height) * 0.3));
+}
+
 /**
  * HOW FAR A ROW'S WASH EXTENDS PAST ITS CONTENT — and the invariant that goes
  * with it: **a row that paints a hover/selection wash BLEEDS it outward; it

package/src/deadline.ts

@@ -120,6 +120,16 @@ export function countdownLabel(days: number, labels: DeadlineLabels): string {
  * same thing in a vocabulary the rest of the field grid does not speak.
  *
  *     <DetailRow label="SI cut-off" {...deadlineAnnotation(days, words.deadline)}>
+ *
+ * **Spread it BEFORE the row's own `description`, never after.** Outside the
+ * warning window this returns `{ description }`, so spreading it last silently
+ * overwrites a `description=` the caller wrote — and only on the rows that are
+ * NOT urgent, which is most of them. Nothing renders empty and nothing throws;
+ * the field's standing rule sentence simply stops appearing, and the screen
+ * that lost it looks finished. Put the spread first and a caller's own
+ * `description` wins, which is the order a reader expects anyway:
+ *
+ *     <DetailRow label="Đến ngày" {...deadlineAnnotation(d, w)} description="…">
  */
 export function deadlineAnnotation(
   days: number,

package/src/file_row.tsx

@@ -172,7 +172,16 @@ export function FileRow({
   const body = (
     <>
       <View style={styles.text}>
-        <Text size="sm" weight="medium" numberOfLines={1}>
+        {/* HAI dòng, không một. Ở một hàng chật không cách sắp xếp nào nhét vừa
+            một cái tên 280px vào 79px trên một dòng — nên lựa chọn thật sự là
+            cắt nó hay cho nó xuống dòng, và cái bị cắt ở đây là thứ NHẬN DIỆN
+            cả hàng. Chiều dọc thì không mất gì: tên ngắn vẫn một dòng, chỉ tên
+            dài mới cao thêm.
+
+            Cho khe `status` `flexShrink` là chưa đủ và đã thử: cái nút bên trong
+            khe ấy do người gọi dựng, nó cứng, nên co cái vỏ không làm nội dung
+            hẹp lại. */}
+        <Text size="sm" weight="medium" numberOfLines={2}>
           {name}
         </Text>
         {/* A STRING keeps the muted single-line treatment; a node renders as
@@ -294,6 +303,20 @@ const styles = StyleSheet.create({
   rowPressed: { backgroundColor: colors.zinc["100"] },
   // The accessible "Open" door — fills the row left of the trailing sibling.
   door: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12, cursor: CURSOR_DEFAULT },
-  status: { marginLeft: "auto", paddingLeft: 12 },
-  text: { flex: 1, gap: 1 },
+  // TRẠNG THÁI là bên nhường chỗ, không phải tên tệp.
+  //
+  // `flexShrink` trong React Native mặc định là 0 — khác web — nên ô trạng thái
+  // giữ nguyên bề ngang tự nhiên của nó mãi mãi, còn `text` (flex: 1, tức basis
+  // 0) nuốt trọn phần bị ép. Kết quả ở màn hẹp: một huy hiệu "Còn hiệu lực"
+  // chiếm 137 trên 202 pixel và cái bị cắt là TÊN TỆP — thứ nhận diện cả hàng.
+  // Hai đợt rà soát ứng dụng độc lập đều đâm vào chỗ này và đều phải lách ở
+  // phía ứng dụng.
+  //
+  // Bộ giao diện có sẵn luật cho việc này: một hàng phải nói rõ bên nào GIỮ.
+  // Bên giữ là tên; trạng thái co lại trước. Ở bề ngang rộng không có gì co cả
+  // — chỉ khi hàng chật thì thứ tự nhường mới có ý nghĩa.
+  status: { marginLeft: "auto", paddingLeft: 12, flexShrink: 1, minWidth: 0 },
+  // `minWidth: 0` là thứ cho một con flex thật sự nhỏ hơn nội dung của nó; thiếu
+  // nó thì `numberOfLines` không bao giờ có cơ hội cắt vì hộp không chịu hẹp lại.
+  text: { flex: 1, gap: 1, minWidth: 0 },
 });