@lotics/ui 47.13.1 → 47.15.0

package/examples/tpl_record.tsx

@@ -23,14 +23,12 @@ import { Section, SectionHeading, SectionHeadingTitle, SectionHeadingMeta, Subse
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
 import { Checklist, ChecklistActions, ChecklistGroup, ChecklistItem, ChecklistNote } from "@lotics/ui/checklist";
 import { DateStamp } from "@lotics/ui/date_stamp";
-import { MenuButton } from "@lotics/ui/menu_button";
-import { Popover, PopoverContent } from "@lotics/ui/popover";
+import { SectionNav } from "@lotics/ui/section_nav";
 import { useSectionNav } from "@lotics/ui/use_section_nav";
 import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle, DialogScrollArea } from "@lotics/ui/dialog";
 import { formatMoney } from "@lotics/ui/format_money";
 import { RecordSummary } from "@lotics/ui/record_summary";
 import { SummaryLine } from "@lotics/ui/summary_line";
-import { Badge } from "@lotics/ui/badge";
 import { daysUntil, deadlineAnnotation } from "@lotics/ui/deadline";
 import { useLoticsLocale } from "@lotics/ui/locale";
 import { Skeleton } from "@lotics/ui/skeleton";
@@ -2662,26 +2660,10 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   // since a reference is a field); everything after it is supplementary
   // (discussion, work, documents, money, lifecycle).
   //
-  // THE SECTION NAV IS HAND-ROLLED ON PURPOSE, for now. `useSectionNav` is the kit
-  // half — the scroll-spy, `activeKey`, `jumpTo`, unit-tested RN-free — and the
-  // CHROME below is this template's. It has exactly one consumer, and the kit's bar
-  // is the SECOND hand-roll, so lifting it today would ship an abstraction shaped by
-  // a single surface. `ReferenceField` sat here under this same note until a
-  // register's drawer needed it, and that is what let the extraction land on the
-  // PEEK contract instead of on the layout.
-  //
-  // When a second surface wants this, the contract worth lifting is: one section
-  // list, rendered as a RAIL where the container affords a gutter and as a pinned
-  // CURRENT-SECTION bar where it does not, the switch reading the CONTAINER (never
-  // the window); the picker anchored to the control that opens it, never a Modal
-  // that escapes its container; and the per-section attention dot, which is what
-  // makes the rail answer "where is the problem" and not merely "where am I".
-  //
-  // What is NOT the contract, and would poison it if lifted along: the issue-tone
-  // MAP below (its keys are this record's domain), the comments toggle (drawer
-  // chrome), the BackButton (page chrome), the gutter arithmetic (28 page / 20
-  // drawer, minus the trigger's padding) and the `wide` threshold. One consumer
-  // cannot tell those apart from the contract — two can.
+  // `SectionNav` draws both forms; `useSectionNav` spies the scroll. What stays
+  // HERE is what reads this record's domain or this page's layout: the issue map
+  // below (its keys are this record's), the BackButton, the gutter arithmetic
+  // and the `wide` threshold.
   const SECTIONS = [
     // PROGRESS leads. The header already IDENTIFIES the record — it titles the
     // customer and carries the code and city beneath it — so the first section
@@ -2694,7 +2676,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     //
     // The rail lists sections in PAGE order, or the scroll-spy highlights one
     // entry while the reader is looking at another.
-    { key: "progress", label: "Progress", icon: "git-branch" },
+    { key: "progress", label: "Progress", icon: "trending-up" },
     { key: "activity", label: "Activity", icon: "message-square" },
     { key: "general", label: "General", icon: "file-text" },
     // Only a SECTION when the page is too narrow to seat the panel — so the wide
@@ -2749,15 +2731,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     transport: scheduleNote !== "on-time" ? "warning" : undefined,
     billing: customer === null ? "warning" : undefined,
   };
-  // Narrow: the rail becomes a pinned bar naming the CURRENT section; tapping
-  // it opens a full-page section picker (Escape / the close control dismiss).
-  const [sectionsOpen, setSectionsOpen] = useState(false);
-  // The picker anchors to the BAR BUTTON, so it is scoped to whatever container
-  // that button sits in — the page, or a drawer. A Modal escaped the container
-  // and took the whole window, which inside a drawer covered the register behind
-  // it. `triggerRef` (not `PopoverTrigger`) because the trigger IS a Button and a
-  // button must not nest in another pressable.
-  const sectionsAnchor = useRef<View>(null);
   const [pageWidth, setPageWidth] = useState<number | null>(null);
   // THREE COLUMNS: the outline rail in the left gutter, the record, and the
   // discussion panel in the right. The right gutter used to be empty — reserved
@@ -2853,63 +2826,21 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     <View style={{ flex: 1, backgroundColor: colors.white, opacity: pageWidth == null ? 0 : 1 }} onLayout={(e) => setPageWidth(e.nativeEvent.layout.width)}>
       {pageWidth == null || wide ? null : (
         // Narrow: a pinned bar names the CURRENT section (the spy keeps it
-        // honest while scrolling); tapping opens the full-page section picker —
-        // no tab strip the thumb has to scroll.
-        // 18, not 12: the bar's gutter is derived from the CONTENT's (28) minus the
-        // trigger's own horizontal padding (10), so the section NAME starts on the
-        // same left edge as every section title below it. A fill-less button shows
-        // no box, so its ink is what the eye lines up — 18 + 10 = 28. Set the bar,
-        // not a negative margin on the button: the gutter belongs to the bar, and
-        // one number here cannot drift out of step with itself.
-        <View style={{ borderBottomWidth: 1, borderBottomColor: colors.zinc[200], paddingHorizontal: (isDrawer ? DRAWER_GUTTER : 28) - 10, paddingVertical: 6, flexDirection: "row", alignItems: "center", gap: 8 }}>
-          {/* narrow keeps the standard too — the bare back glyph beside the
-              section bar (the rail that would carry it is collapsed). A DRAWER
-              already has one in its own header; two would be two exits. */}
-          {isDrawer ? null : <BackButton onPress={() => {}} />}
-          <Popover open={sectionsOpen} onOpenChange={setSectionsOpen} triggerRef={sectionsAnchor} side="bottom" align="start">
-            <View ref={sectionsAnchor}>
-              {/* MUTED, not `secondary`: this names WHERE YOU ARE, so it is a
-                  position readout that happens to be pressable, and a filled chip
-                  competes with the record's own actions for the eye. The usual cost
-                  of a fill-less button does not apply here — it is chrome in a bar
-                  with its own gutter, not a verb aligned to a column of text, so
-                  there is nothing below it for its ink to line up with. The glyph
-                  carries the affordance: `list-collapse` says WHAT the list is,
-                  where `Switcher` uses a chevron for the same shape. */}
-              <Button
-                title={SECTIONS.find((sec) => sec.key === nav.activeKey)?.label ?? "Sections"}
-                color="muted"
-                onPress={() => setSectionsOpen(true)}
-              />
-            </View>
-            <PopoverContent style={{ width: 248 }} disableBodyScroll>
-              <View style={{ gap: 2 }}>
-                {SECTIONS.map((sec) => (
-                  <MenuButton
-                    key={sec.key}
-                    icon={sec.icon}
-                    title={sec.label}
-                    current={nav.activeKey === sec.key}
-                    onPress={() => {
-                      setSectionsOpen(false);
-                      nav.jumpTo(sec.key);
-                    }}
-                  />
-                ))}
-              </View>
-            </PopoverContent>
-          </Popover>
-          <View style={{ flex: 1 }} />
-          {/* WHERE it sits carries the meaning: sections on the left (where you
-              ARE), the discussion on the right (what is being SAID) — the same
-              two poles the wide layout puts in its two gutters. */}
-          {/* A LABEL with its count, not a bare glyph: this is one of the two
-              things the body can show, so it has to say which — and how much is
-              waiting, which is what decides whether you look now. In drawer chrome
-              it toggles the body; on a narrow page it still opens the sheet, which
-              is that layout's panel. The pair reads as a switch: whichever side the
-              body is showing wears the filled `secondary`. */}
-        </View>
+        // honest while scrolling); tapping opens the section picker — no tab
+        // strip the thumb has to scroll. The bar's gutter is the CONTENT's, and
+        // `SectionNav` takes the trigger's own padding off it so the section
+        // NAME starts on the same left edge as every section title below.
+        //
+        // Narrow keeps the back standard too, EXCEPT in a drawer, which already
+        // has one in its own header — two would be two exits.
+        <SectionNav
+          items={SECTIONS.map((sec) => ({ ...sec, issue: sectionIssue[sec.key] }))}
+          activeKey={nav.activeKey}
+          onJump={nav.jumpTo}
+          wide={false}
+          barGutter={isDrawer ? DRAWER_GUTTER : 28}
+          back={isDrawer ? undefined : <BackButton onPress={() => {}} />}
+        />
       )}
     <View style={{ flex: 1 }}>
     {/* FULL-WIDTH scroller: the whole page scrolls, wherever the pointer is. */}
@@ -5239,23 +5170,18 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         scrolls, and out of the scroll row so the page stays wheel-scrollable
         edge to edge. */}
     {pageWidth == null || !wide ? null : (
-      <View style={{ position: "absolute", top: 28, left: railLeft, width: RAIL_W, gap: 10 }}>
-        {/* THE PANEL STANDARD: it opens with BACK — the circular glyph, the
-            collection it returns to named beside it (the register route in a
-            real app), visually apart from the outline items. */}
-        <BackButton label="Records" onPress={() => {}} />
-        <View style={{ gap: 2 }}>
-          {SECTIONS.filter((sec) => sec.key !== "comments").map((sec) => (
-            <MenuButton
-              key={sec.key}
-              icon={sec.icon}
-              title={sec.label}
-              current={activeSection === sec.key}
-              right={sectionIssue[sec.key] ? <Badge variant="dot" color={sectionIssue[sec.key] === "danger" ? "red" : "amber"} /> : undefined}
-              onPress={() => nav.jumpTo(sec.key)}
-            />
-          ))}
-        </View>
+      <View style={{ position: "absolute", top: 28, left: railLeft }}>
+        <SectionNav
+          /* Comments is a section only while the page is too narrow to seat the
+             panel, so the wide rail drops it rather than offering a jump to
+             something that is not there. */
+          items={SECTIONS.filter((sec) => sec.key !== "comments").map((sec) => ({ ...sec, issue: sectionIssue[sec.key] }))}
+          activeKey={activeSection}
+          onJump={nav.jumpTo}
+          wide
+          railWidth={RAIL_W}
+          back={<BackButton label="Records" onPress={() => {}} />}
+        />
       </View>
     )}
     </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.13.1",
+  "version": "47.15.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",
@@ -71,6 +71,7 @@
     "./data_grid": "./src/data_grid.tsx",
     "./date_calendar": "./src/date_calendar.tsx",
     "./date_filter": "./src/date_filter.tsx",
+    "./date_filter_presets": "./src/date_filter_presets.ts",
     "./date_picker": "./src/date_picker.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
     "./date_stamp": "./src/date_stamp.tsx",
@@ -189,6 +190,8 @@
     "./markdown_types": "./src/markdown_types.ts",
     "./remark_gfm_safe": "./src/remark_gfm_safe.ts",
     "./matrix": "./src/matrix.tsx",
+    "./month_math": "./src/month_math.ts",
+    "./month_stepper": "./src/month_stepper.tsx",
     "./matrix_totals": "./src/matrix_totals.ts",
     "./media_player": {
       "react-native": "./src/media_player.tsx",
@@ -209,6 +212,7 @@
     "./option_badge": "./src/option_badge.tsx",
     "./option_list": "./src/option_list.tsx",
     "./option_picker": "./src/option_picker.tsx",
+    "./organization_name": "./src/organization_name.ts",
     "./overlay_layer": "./src/overlay_layer.ts",
     "./overlay_scope": "./src/overlay_scope.ts",
     "./page_content": "./src/page_content.tsx",
@@ -243,6 +247,7 @@
     "./search_match": "./src/search_match.ts",
     "./section_card": "./src/section_card.tsx",
     "./section_heading": "./src/section_heading.tsx",
+    "./section_nav": "./src/section_nav.tsx",
     "./section_stack": "./src/section_stack.tsx",
     "./segmented_control": "./src/segmented_control.tsx",
     "./select": "./src/select.tsx",
@@ -267,6 +272,7 @@
     "./stacked_bar_chart": "./src/stacked_bar_chart.tsx",
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",
     "./status_badge": "./src/status_badge.tsx",
+    "./state_matrix": "./src/state_matrix.tsx",
     "./status_grid": "./src/status_grid.tsx",
     "./step_progress": "./src/step_progress.tsx",
     "./stepper": "./src/stepper.tsx",
@@ -295,6 +301,8 @@
     "./time_options": "./src/time_options.ts",
     "./time_picker": "./src/time_picker.tsx",
     "./timeline": "./src/timeline.tsx",
+    "./timetable": "./src/timetable.tsx",
+    "./toggle_strip": "./src/toggle_strip.tsx",
     "./tokens": "./src/tokens.ts",
     "./tooltip": "./src/tooltip.tsx",
     "./trend_chip": "./src/trend_chip.tsx",

package/src/avatar_size.ts

@@ -48,14 +48,15 @@ export const AVATAR_PX: Record<AvatarSize, number> = {
    *  beside it. It was 48, which anchored to nothing: the bar's other controls
    *  are 40, and a 48px circle among them reads as the one thing that got out.
    *
-   *  **In a register, the rung follows what the row IS ABOUT, not the density.**
-   *  Where a person is one FIELD of the row — an owner, an assignee beside a
-   *  dozen other columns — the figure is a value like any other and takes `md`.
-   *  Where the person is the row's SUBJECT (a league table of reps, a roster,
-   *  anything grouped BY member), the avatar is that row's leading figure and
-   *  takes this rung; at `md` such a register reads as a list of numbers that
-   *  happens to carry faces. Budget for it: this rung is 12px wider than `md`,
-   *  and in a table it takes those 12 from the flexible column the name is in. */
+   *  **In a register, the rung follows what the reader AIMS AT, not the
+   *  density.** The row's subject takes this rung — and so does an ORGANIZATION
+   *  in its own column, because a book of movements is scanned by whose they
+   *  are, and at `md` such a register reads as a list of numbers that happens to
+   *  carry faces. `md` is for a mark incidental to the value the reader came for
+   *  — a person in an owner or assignee column, where the face is competing with
+   *  the row's own mark anyway. Budget for it: this rung is 12px wider than
+   *  `md`, and in a table it takes those 12 from the flexible column the name is
+   *  in, so a column too tight to seat one takes `md`. */
   lg: 40,
   /** A profile's own header. */
   xl: 72,

package/src/axis_ticks.ts

@@ -0,0 +1,63 @@
+/**
+ * The gridline VALUES a magnitude axis prints — the "nice" round numbers under
+ * the largest bar, chosen so the axis lands on about five of them.
+ *
+ * The rule belongs to the axis rather than to one chart, and it has one clause
+ * that is easy to miss: **an axis over whole things has no half.** A count of
+ * vehicles, contracts, trips or people cannot be 0,5, so a step finer than 1
+ * prints gridlines at quantities the data can never take — and it happens
+ * exactly where the numbers are smallest, because a max of 2 is where a
+ * five-tick target starts reaching below the unit. The reader is then asked to
+ * read "one and a half contracts", and the axis has stated something false
+ * about the subject rather than about the layout. So the candidate steps are
+ * filtered by what the DATA is made of: all-integer values take integer steps.
+ */
+
+/** The multipliers that make a step read as round rather than arbitrary. */
+const NICE_MULTIPLIERS = [1, 2, 2.5, 5, 10];
+
+const TARGET_TICKS = 5;
+
+export function axisTicks(values: number[]): number[] {
+  const maxValue = Math.max(...values, 1);
+  const integral = values.every((v) => Number.isInteger(v));
+  const magnitude = Math.pow(10, Math.floor(Math.log10(maxValue)));
+
+  const usable = (step: number) => step > 0 && (!integral || Number.isInteger(step));
+
+  let bestStep = magnitude;
+  let bestTickCount = Infinity;
+
+  for (const multiplier of NICE_MULTIPLIERS) {
+    const step = multiplier * magnitude;
+    if (!usable(step)) continue;
+    const tickCount = Math.ceil(maxValue / step) + 1;
+    if (Math.abs(tickCount - TARGET_TICKS) < Math.abs(bestTickCount - TARGET_TICKS)) {
+      bestStep = step;
+      bestTickCount = tickCount;
+    }
+  }
+
+  // A finer pass, so a max of 168 is not left on gridlines a hundred apart. It
+  // is bounded at both ends — three to eight ticks — because this is the pass
+  // that can run away, and for whole things it is also where the halves came
+  // from.
+  for (const multiplier of NICE_MULTIPLIERS) {
+    const step = multiplier * (magnitude / 10);
+    if (!usable(step)) continue;
+    const tickCount = Math.ceil(maxValue / step) + 1;
+    if (
+      tickCount >= 3 &&
+      tickCount <= 8 &&
+      Math.abs(tickCount - TARGET_TICKS) < Math.abs(bestTickCount - TARGET_TICKS)
+    ) {
+      bestStep = step;
+      bestTickCount = tickCount;
+    }
+  }
+
+  const stepsNeeded = Math.ceil(maxValue / bestStep);
+  const ticks: number[] = [];
+  for (let i = 0; i <= stepsNeeded; i++) ticks.push(i * bestStep);
+  return ticks;
+}

package/src/bar_chart.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { axisLabelIndices } from "./axis_label_indices";
+import { axisTicks } from "./axis_ticks";
 import { useLoticsLocale } from "./locale";
 
 const DEFAULT_BAR_COLOR = colors.blue[500];
@@ -18,6 +19,20 @@ const AXIS_LABEL_WIDTH = 56;
  *  second literal there would silently stop matching the row it measures. */
 const LABEL_GAP = 8;
 
+/** The horizontal orientation's fixed value column. Named because the label
+ *  column's cap is computed from it, and a second literal there would stop
+ *  matching the row it is measuring against. */
+const VALUE_COLUMN_WIDTH = 96;
+
+/** What the PLOT keeps whatever the label column asked for. A bar chart states
+ *  proportion; under this the bars sit on their own 2px floor and the picture
+ *  claims every row is equal. */
+const MIN_TRACK_WIDTH = 72;
+
+/** And what the label column keeps in return — a mark and a few characters,
+ *  so the rows can still be told apart. */
+const MIN_LABEL_WIDTH = 56;
+
 const defaultFormatNumber = (n: number): string =>
   new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(n);
 
@@ -60,45 +75,6 @@ export interface BarChartProps {
   height?: number;
 }
 
-function useAxisTicks(maxValue: number) {
-  return useMemo(() => {
-    const targetTickCount = 5;
-    const magnitude = Math.pow(10, Math.floor(Math.log10(maxValue)));
-    const niceMultipliers = [1, 2, 2.5, 5, 10];
-    let bestStep = magnitude;
-    let bestTickCount = Infinity;
-
-    for (const multiplier of niceMultipliers) {
-      const step = multiplier * magnitude;
-      const tickCount = Math.ceil(maxValue / step) + 1;
-      if (Math.abs(tickCount - targetTickCount) < Math.abs(bestTickCount - targetTickCount)) {
-        bestStep = step;
-        bestTickCount = tickCount;
-      }
-    }
-
-    for (const multiplier of niceMultipliers) {
-      const step = multiplier * (magnitude / 10);
-      const tickCount = Math.ceil(maxValue / step) + 1;
-      if (
-        tickCount >= 3 &&
-        tickCount <= 8 &&
-        Math.abs(tickCount - targetTickCount) < Math.abs(bestTickCount - targetTickCount)
-      ) {
-        bestStep = step;
-        bestTickCount = tickCount;
-      }
-    }
-
-    const stepsNeeded = Math.ceil(maxValue / bestStep);
-    const ticks: number[] = [];
-    for (let i = 0; i <= stepsNeeded; i++) {
-      ticks.push(i * bestStep);
-    }
-    return ticks;
-  }, [maxValue]);
-}
-
 /**
  * The canonical SVG bar chart over `data: { label, value, color?, leading? }[]` —
  * `orientation` vertical|horizontal, nice auto axis ticks, `formatNumber` for value labels,
@@ -119,8 +95,10 @@ export function BarChart(props: BarChartProps) {
     height: barAreaHeight = 200,
   } = props;
   const maxValue = Math.max(...data.map((d) => d.value), 1);
-  const axisTicks = useAxisTicks(maxValue);
-  const axisMax = axisTicks[axisTicks.length - 1] || maxValue;
+  // The gridlines come from the VALUES, not from their maximum, because an axis
+  // over whole things must not print a half — see `axis_ticks`.
+  const ticks = useMemo(() => axisTicks(data.map((d) => d.value)), [data]);
+  const axisMax = ticks[ticks.length - 1] || maxValue;
 
   // The vertical axis prints as many labels as the row fits and thins the rest —
   // the same rule `LineChart` runs, because it is the axis's rule and not one
@@ -132,6 +110,45 @@ export function BarChart(props: BarChartProps) {
   const handleLabelsLayout = useCallback((event: LayoutChangeEvent) => {
     setLabelsWidth(event.nativeEvent.layout.width);
   }, []);
+
+  // THE HORIZONTAL ORIENTATION IS MEASURED TOO, AND FOR TWO REASONS AT ONCE.
+  //
+  // Its label column and its value column are FIXED, so a narrow container
+  // spends its whole width on chrome and leaves the plot a few pixels: every
+  // bar then renders at its own minimum, and a row of identical stubs is a
+  // picture stating that every entity is equal. Measured at 375, a chart with a
+  // 184px label column had a 5px track. So `labelWidth` is a REQUEST, never a
+  // reservation — it gives way before the plot does, because a trimmed name
+  // beside a readable bar still says more than a full name beside a stub.
+  //
+  // The value axis under it thins by the categorical rule: its ticks are
+  // positioned by FRACTION, so a narrow track does not crowd them, it stacks
+  // them — five money labels on a short track paint one unreadable smudge, and
+  // nothing overflows, errors or clips while it happens. The tick MARKS stay: a
+  // 1px line collides with nothing, and it is the label that could not fit.
+  const [rowWidth, setRowWidth] = useState(0);
+  const handleRowLayout = useCallback((event: LayoutChangeEvent) => {
+    setRowWidth(event.nativeEvent.layout.width);
+  }, []);
+  const horizontal = useMemo(() => {
+    const chrome = VALUE_COLUMN_WIDTH + LABEL_GAP * 2;
+    const label =
+      rowWidth <= 0
+        ? labelWidth
+        : Math.min(labelWidth, Math.max(MIN_LABEL_WIDTH, rowWidth - chrome - MIN_TRACK_WIDTH));
+    const track = rowWidth <= 0 ? 0 : rowWidth - label - chrome;
+    return {
+      labelWidth: label,
+      // Evenly-spaced ticks from 0 to the axis maximum sit at `i / (count - 1)`
+      // — the POINT geometry `axisLabelIndices` already serves for a line's x
+      // axis, anchored on the last tick because that is the one setting scale.
+      // Keyed on the MEASUREMENT, not on the track: unmeasured shows every
+      // label (thinning is what measurement buys), while a measured track of
+      // zero is a real answer and `axisLabelIndices` returns the one label that
+      // states the scale.
+      keptTicks: rowWidth <= 0 ? null : new Set(axisLabelIndices(ticks.length, Math.max(track, 0))),
+    };
+  }, [rowWidth, labelWidth, ticks.length]);
   // ONE derivation from the ONE measurement — which labels survive AND how wide
   // the box each survivor gets. They are two answers about the same row, and a
   // second pass over the same numbers is exactly how they came to disagree about
@@ -193,14 +210,14 @@ export function BarChart(props: BarChartProps) {
   if (orientation === "horizontal") {
     return (
       <View style={styles.chartContainer}>
-        <View style={styles.horizontalChart}>
+        <View style={styles.horizontalChart} onLayout={handleRowLayout}>
           {data.map((item, index) => {
             const widthPercent = (item.value / axisMax) * 100;
             const barColor = item.color ?? DEFAULT_BAR_COLOR;
 
             return (
               <View key={index} style={styles.horizontalBarContainer}>
-                <View style={[styles.horizontalBarLabel, { width: labelWidth }]}>
+                <View style={[styles.horizontalBarLabel, { width: horizontal.labelWidth }]}>
                   {item.leading !== undefined ? item.leading : null}
                   <Text size="sm" numberOfLines={1}>
                     {item.label}
@@ -226,17 +243,19 @@ export function BarChart(props: BarChartProps) {
             );
           })}
           <View style={styles.horizontalAxisContainer}>
-            <View style={{ width: labelWidth }} />
+            <View style={{ width: horizontal.labelWidth }} />
             <View style={styles.horizontalAxisTrack}>
-              {axisTicks.map((tick, index) => (
+              {ticks.map((tick, index) => (
                 <View
                   key={index}
                   style={[styles.horizontalAxisTick, { left: `${(tick / axisMax) * 100}%` }]}
                 >
                   <View style={styles.tickMark} />
-                  <Text size="xs" color="muted">
-                    {formatNumber(tick)}
-                  </Text>
+                  {horizontal.keptTicks === null || horizontal.keptTicks.has(index) ? (
+                    <Text size="xs" color="muted">
+                      {formatNumber(tick)}
+                    </Text>
+                  ) : null}
                 </View>
               ))}
             </View>
@@ -252,7 +271,7 @@ export function BarChart(props: BarChartProps) {
       <View style={styles.verticalChartWrapper}>
         <View style={styles.verticalChartRow}>
           <View style={[styles.verticalAxis, { height: barAreaHeight }]}>
-            {axisTicks
+            {ticks
               .slice()
               .reverse()
               .map((tick, index) => (
@@ -411,7 +430,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   horizontalBarValue: {
-    width: 96,
+    width: VALUE_COLUMN_WIDTH,
     alignItems: "flex-end",
   },
   horizontalBar: {

package/src/calendar/calendar_view.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState, type ReactNode } from "react";
 import { View, StyleSheet, type LayoutChangeEvent } from "react-native";
 import { colors } from "../colors";
-import { useLoticsLocale } from "../locale";
+import { useLoticsLocale, useLocaleTag } from "../locale";
 import { CalendarProvider, useCalendar, type CalendarContextValue } from "./context";
 import { CalendarToolbar, CALENDAR_TOOLBAR_HEIGHT } from "./calendar_toolbar";
 import { CalendarMonth, MIN_MONTH_HEIGHT } from "./month_view";
@@ -33,6 +33,8 @@ export interface CalendarViewProps<T = unknown> {
   /** Which modes the built-in toolbar offers. Default: all four. */
   views?: CalendarViewMode[];
   weekStartsOn?: Weekday;
+  /** BCP-47 tag for the weekday / month / time names. Defaults to the active
+   *  `LoticsLocaleProvider` pack's `bcp47`; pass one only to override it. */
   locale?: string;
   /** Per-instance overrides; the rest resolve from `LoticsLocale.calendarView`. */
   labels?: Partial<CalendarViewLabels>;
@@ -88,13 +90,17 @@ export interface CalendarViewProps<T = unknown> {
  */
 export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
   const {
-    events, weekStartsOn = 1, locale, views = ALL_VIEWS,
+    events, weekStartsOn = 1, views = ALL_VIEWS,
     dayStartHour = 0, dayEndHour = 24, compactBelow = DEFAULT_COMPACT_BELOW, now,
     onEventPress, onSlotPress, renderEvent, children,
   } = props;
 
   const pack = useLoticsLocale();
   const labels: CalendarViewLabels = { ...pack.calendarView, ...props.labels };
+  // Every Intl rendering the grid does (weekday and month names, the times down
+  // the day axis) reads this, so the active pack alone localizes the calendar —
+  // an app that already supplies `vi` must not also thread a `locale` prop.
+  const locale = useLocaleTag(props.locale);
 
   // One reading of the clock for the whole tree, so the badge, the now line and
   // the scroll target cannot disagree across a midnight boundary mid-render.