@lotics/ui 46.1.0 → 46.3.0

package/src/agent_run.tsx

@@ -8,7 +8,6 @@ import { Callout, CalloutActions, CalloutText } from "./callout";
 import { Markdown } from "./markdown";
 import { JsonPanel, stringifyData } from "./json_panel";
 import { PressableHighlight } from "./pressable_highlight";
-import { FollowScroll } from "./follow_scroll";
 import { Marker, type StepStatus } from "./stepper";
 import { NODE } from "./stepper_layout";
 import { AnimationFadeIn } from "./animation_fade_in";
@@ -86,7 +85,7 @@ export interface AgentRunProps {
 // ── Tool → display meta ───────────────────────────────────────────────────────
 // The ICON per platform tool. The LABEL lives in the locale (`agentRun.tools`)
 // because it is language, and this component already renders localized chrome
-// around these rows — an English tool row under a Vietnamese "Đang suy nghĩ…"
+// around these rows — an English tool row under a Vietnamese "Đang suy nghĩ"
 // was the kit contradicting itself. An icon is not language, so it stays here.
 // A tool neither map knows falls back to a prettified name + a neutral icon.
 const TOOL_ICONS: Record<string, IconName> = {
@@ -149,6 +148,37 @@ function stepLabel(
 
 const INK = colors.zinc[700];
 
+// The "still working" breath, and the ONE rhythm every unsettled row shares.
+// Half-cycle 750ms — so a full breath is the 1500ms the `Marker`'s live halo
+// already runs, and a row's dot and its label breathe together instead of
+// drifting apart into two unrelated animations on one line. The floor is
+// `Skeleton`'s: the kit says "in progress" with an opacity rhythm, in one
+// vocabulary, whether the thing pulsing is a placeholder tile or a live label.
+const BREATH_HALF = 750;
+const BREATH_FLOOR = 0.6;
+
+/** Breathe `children` while the work behind them is unsettled. Settled, it
+ *  holds full opacity and runs no animation — a finished row is not working,
+ *  and neither is one parked `awaiting` a human decision. */
+function Breathing({ active, children }: { active: boolean; children: ReactNode }) {
+  const v = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (!active) {
+      v.setValue(1);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(v, { toValue: BREATH_FLOOR, duration: BREATH_HALF, useNativeDriver: true }),
+        Animated.timing(v, { toValue: 1, duration: BREATH_HALF, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [active, v]);
+  return <Animated.View style={{ opacity: v }}>{children}</Animated.View>;
+}
+
 /**
  * A live feed of an AI agent's work as a TIMELINE — the prose it streams and the
  * tools it calls, in the order they happened. While the agent is mid-tools the
@@ -197,9 +227,9 @@ export function AgentRun(props: AgentRunProps) {
   // answer, and hiding THAT behind a row until settle would be the real loss.
   //
   // SETTLED, the collapse covers the work and the answer stands below it.
-  // Expanding differs between the two, and only there: LIVE the timeline is
-  // capped and self-pinning (opening a run mid-flight must not hand the page a
-  // feed that grows for another minute), SETTLED it opens in full.
+  // Expanding is the same either way — the timeline opens IN FULL, and what
+  // keeps the newest row in view is the host's own scroller, which every host
+  // of a live run already has.
   //
   // The settled clauses are cases where collapsing would hide something needed:
   //  · no answer — the run stopped ON a tool call, so the fold would leave an
@@ -211,7 +241,7 @@ export function AgentRun(props: AgentRunProps) {
   const folded = managed && (streaming ? process.length > 0 : process.length > 1 && steps.length > 0 && result.length > 0);
 
   // What the row SAYS right now: the tool in flight, or — when the model is
-  // writing rather than calling — "Thinking…". Naming the last finished action
+  // writing rather than calling — "Thinking". Naming the last finished action
   // while the agent composes prose reports a moment that has passed.
   const thinking = streaming && !lastRunningStep(segments);
 
@@ -415,29 +445,19 @@ function StepRow({ s, label, renderToolOutput }: { s: AgentStep; label: string;
 
 // Thinking — a muted, COLLAPSED "Thinking" disclosure (revealed on press), so the
 // agent's reasoning never crowds the answer. Pulses while it's still streaming.
-/** The empty-live feed row: the live dot's halo plus a BREATHING label — the
- *  message itself pulses (Skeleton's opacity rhythm), so "work has started"
- *  reads at a glance even before the first token. */
+/** The empty-live feed row: the live dot's halo plus a BREATHING label, so
+ *  "work has started" reads at a glance even before the first token. */
 function StartingRow({ label }: { label: string }) {
-  const v = useRef(new Animated.Value(0.45)).current;
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(v, { toValue: 1, duration: 700, useNativeDriver: false }),
-        Animated.timing(v, { toValue: 0.45, duration: 700, useNativeDriver: false }),
-      ]),
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [v]);
   return (
     <View style={styles.row}>
       <View style={styles.dotCol}>
         <Marker status="current" color={colors.zinc[400]} live />
       </View>
-      <Animated.View style={[styles.rowBody, { opacity: v }]}>
-        <Text size="sm" color="muted">{label}</Text>
-      </Animated.View>
+      <View style={styles.rowBody}>
+        <Breathing active>
+          <Text size="sm" color="muted">{label}</Text>
+        </Breathing>
+      </View>
     </View>
   );
 }
@@ -452,9 +472,11 @@ function ReasoningDisclosure(props: { text: string; streaming?: boolean; expande
           <Marker status={streaming ? "current" : "done"} color={colors.zinc[400]} live={!!streaming} />
         </View>
         <View style={styles.rowBody}>
-          <Text size="sm" color="muted">
-            {streaming ? locale.agentRun.thinkingStreaming : locale.agentRun.thinking}
-          </Text>
+          <Breathing active={!!streaming}>
+            <Text size="sm" color="muted">
+              {streaming ? locale.agentRun.thinkingStreaming : locale.agentRun.thinking}
+            </Text>
+          </Breathing>
         </View>
         {chevron(expanded ? "up" : "down")}
       </PressableHighlight>
@@ -514,7 +536,7 @@ function WorkSummary(props: {
   const { steps, live, thinking, expanded, onToggle, labelForCall, summarizeRun, children } = props;
   const locale = useLoticsLocale();
   const final = steps[steps.length - 1];
-  // "Thinking…" WINS over a host summary while the model writes: `summarizeRun`
+  // "Thinking" WINS over a host summary while the model writes: `summarizeRun`
   // names what the run DID, and mid-compose that is a moment already past.
   const label = thinking
     ? locale.agentRun.thinkingStreaming
@@ -537,32 +559,30 @@ function WorkSummary(props: {
         trailing={chevron(expanded ? "up" : "down")}
       >
         {/* Keyed by what the row is SAYING, so a new call (or the switch to
-            "Thinking…") rises + fades into the SAME row — the label swaps, the
+            "Thinking") rises + fades into the SAME row — the label swaps, the
             row does not move. Exactly what a settled `ToolGroup` does mid-burst,
-            held for the whole run. */}
-        <AnimationFadeIn key={live ? label : "settled"} translateY={4}>
-          <SummaryLabel label={label} />
-        </AnimationFadeIn>
+            held for the whole run.
+            The breath sits OUTSIDE that key: inside it, the rhythm would restart
+            from full opacity on every label swap and fight the fade's own — two
+            animations writing one opacity. Outside, the row breathes steadily
+            for the whole run while its label changes underneath. */}
+        <Breathing active={live}>
+          <AnimationFadeIn key={live ? label : "settled"} translateY={4}>
+            <SummaryLabel label={label} />
+          </AnimationFadeIn>
+        </Breathing>
       </ActivityRow>
       {/* The run's own 10px rhythm, not the group's 2px: what rolls out here is
           whole segments — prose, thinking, tool groups — not sibling step rows.
-          Opened while the run is still LIVE it is also CAPPED and self-pinning:
-          a reader who opens a run mid-flight asked to see the work, not to hand
-          the page a feed that grows for another minute. `FollowScroll` follows at
-          LAYOUT level (an inverted single-cell list), so each new call paints
-          already pinned — no scroll-after-paint flash. Settled, it opens in full:
-          nothing is arriving, so there is nothing to cap. */}
-      {expanded ? (
-        live ? (
-          <View testID="agent-run-work-capped" style={styles.work}>
-            <FollowScroll style={styles.liveFrame}>
-              <View style={{ gap: 10 }}>{children}</View>
-            </FollowScroll>
-          </View>
-        ) : (
-          <View testID="agent-run-work" style={styles.work}>{children}</View>
-        )
-      ) : null}
+          It opens IN FULL, live or settled, and the HOST owns the scrolling. A
+          self-imposed window here was a scroller nested inside whatever scroller
+          the run already sits in — in chat, an inverted list inside an inverted
+          list — which paints stale content over its neighbours and captures the
+          wheel from the surface the reader is actually on. A component in
+          document flow cannot know whether it is inside a scroll container, so
+          it must not act as though it were one; a host that needs a bound frames
+          the run itself (`collapseProcess={false}` + `FollowScroll`). */}
+      {expanded ? <View testID="agent-run-work" style={styles.work}>{children}</View> : null}
     </View>
   );
 }
@@ -597,9 +617,11 @@ function ToolGroup(props: {
     return (
       <View style={styles.group}>
         <ActivityRow markerStatus="current" live>
-          <AnimationFadeIn key={current.id} translateY={4}>
-            <StepBody label={resolve(current)} />
-          </AnimationFadeIn>
+          <Breathing active>
+            <AnimationFadeIn key={current.id} translateY={4}>
+              <StepBody label={resolve(current)} />
+            </AnimationFadeIn>
+          </Breathing>
         </ActivityRow>
       </View>
     );
@@ -654,12 +676,6 @@ const styles = StyleSheet.create({
   // The folded work, opened: segment spacing (the run's own gap), and a small
   // lead-in under the header so the rolled-out work reads as its content.
   work: { gap: 10, paddingTop: 6 },
-  // The cap on work OPENED mid-run. ~5 rows: enough to read what is happening,
-  // short enough that opening a p90 94s run does not push the composer off the
-  // screen for the rest of it. No border and no background — the run sits flush
-  // in the consumer's gutter by law, and a frame that appeared only while
-  // streaming would be the loudest thing on the surface.
-  liveFrame: { maxHeight: 220 },
   row: {
     flexDirection: "row",
     alignItems: "center",

package/src/agent_run_pane.tsx

@@ -174,14 +174,16 @@ export function AgentRunPane<TLanding>(props: AgentRunPaneProps<TLanding>) {
     // 24` here is a fifth copy of a number that has to agree with four others.
     <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: gutter }}>
       {/* No empty-state slot on purpose. `AgentRun` renders its own breathing
-          "Starting…" row while streaming with zero parts, localized through the
+          "Starting" row while streaming with zero parts, localized through the
           `agentRun` locale slice — and ai_patterns states the law outright:
           never hand-roll a placeholder in front of the feed. A slot here would
           invite exactly that, and every app would localize it again. */}
-      {/* collapseProcess=false: this pane took the framing job — the FollowScroll
-          above IS the bound, sized by the dialog. Leaving the default on would
-          nest the run's own 220px window inside it, and the dialog's scroller
-          would then never overflow while the inner one held every step. */}
+      {/* collapseProcess=false: the run IS this pane's subject. A dialog opened
+          to watch one run, that then folds it behind a row the reader has to
+          press, hides the only thing it exists to show — the fold is for a run
+          sharing a surface with other content (a chat thread), not for one that
+          owns the surface. The FollowScroll above is the bound, sized by the
+          dialog; taking the framing job is what earns the right to add one. */}
       <AgentRun
         parts={run.parts}
         state={run.status === "error" ? "error" : run.status === "streaming" ? "streaming" : "done"}

package/src/alert.css

@@ -9,7 +9,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10000;
   animation: lotics-alert-fade-in 0.2s ease-out;
   padding: 16px;
 }

package/src/alert.tsx

@@ -4,6 +4,7 @@ import "./alert.css";
 import { Text } from "./text";
 import { Button, ButtonColor } from "./button";
 import { useOverlayScope } from "./overlay_scope";
+import { OVERLAY_Z_ABOVE } from "./overlay_layer";
 
 export type AlertButtonStyle = "default" | "cancel" | "destructive";
 
@@ -27,6 +28,13 @@ class Alert {
     if (!this.container) {
       this.container = document.createElement("div");
       this.container.id = "alert-container";
+      // The rung lives here rather than on the overlay's CSS class, because it
+      // is a fact about where an alert sits among the OTHER body-level layers —
+      // one table answers that (`overlay_layer.tsx`), and a stylesheet cannot
+      // read it. The box is zero-height, so making it a stacking context is
+      // free; the fixed overlay inside paints in it.
+      this.container.style.position = "relative";
+      this.container.style.zIndex = String(OVERLAY_Z_ABOVE);
       document.body.appendChild(this.container);
     }
     if (!this.root) {

package/src/axis_label_indices.ts

@@ -0,0 +1,84 @@
+/**
+ * Which of a CATEGORICAL AXIS's positions get a printed label.
+ *
+ * The rule belongs to the axis, not to one chart: a line's x labels and a bar
+ * chart's per-bar labels have the same failure — a label is roughly
+ * `minLabelWidth` wide, so only so many fit across the track, and past that the
+ * axis either overlaps or ellipsises its own labels. Neither is a typography
+ * problem to solve by shortening the data; the labels are what thin out.
+ *
+ * ONE model serves both geometries. How many labels fit is a function of the
+ * TRACK and the label width — `floor(track / minLabelWidth)` — and that is the
+ * same question whether the labels are points on the track (a line's, at
+ * `i/(count-1)`) or slot centres (a bar's, at `(i+0.5)·track/count`). The two
+ * geometries differ only in the distance from position 0 to the first kept
+ * index, and by less than one slot; the count and the step are shared.
+ *
+ * What the caller must NOT assume is that thinning alone widens a label. On a
+ * SLOT geometry the survivor still sits in its own slot, so the space the
+ * dropped neighbours freed has to be handed to it explicitly — see
+ * {@link axisLabelStep} and `BarChart`'s label box.
+ *
+ * The rule that matters is WHERE the thinning is anchored: stepping forwards
+ * from the first position and then forcing the last one in collides whenever the
+ * count minus one is not a multiple of the step — the newest label lands a few
+ * pixels from the one before it while every other pair is a full step apart.
+ * Anchoring on the LAST position makes the spacing uniform by construction, and
+ * the last position is the one a reader looks up first. The first position is
+ * then kept only when it clears the same distance.
+ */
+/**
+ * How many positions the axis skips between printed labels — 1 when every label
+ * fits, `count` when the track has room for only one. Exported because a SLOT
+ * geometry needs it twice: once to pick the labels, and once to give a survivor
+ * the width of the span its dropped neighbours vacated. Deriving it a second
+ * time at the call site is how the two drift.
+ *
+ * The floor is ONE label, not two. Forcing a second onto a track that fits one
+ * breaks this module's own rule — the two then land closer together than a label
+ * is wide, which is the overlap the thinning exists to prevent — and it is the
+ * narrow end that needs the rule most, because that is where a track can go to
+ * zero or below.
+ */
+export function axisLabelStep(count: number, chartWidth: number, minLabelWidth = 50): number {
+  if (count <= 1) return 1;
+  const maxLabels = Math.max(1, Math.floor(chartWidth / minLabelWidth));
+  return Math.max(1, Math.ceil(count / maxLabels));
+}
+
+/**
+ * The positions to print, thinned to what the track fits.
+ *
+ * THE CONTRACT: the result is empty ONLY when there is nothing to label
+ * (`count <= 0`). An axis that HAS positions always prints at least one of them
+ * — the last, the one a reader looks up — however little room it has, so a card
+ * too narrow to fit a second label shows one rather than none.
+ *
+ * Whether the track has been MEASURED yet is the caller's fact, not this
+ * function's: a host with no layout pass reports 0 exactly as a 0px track does,
+ * and only the caller knows which it is holding. It answers that itself (show
+ * every label until measured) before asking here. Returning `[]` for both a
+ * zero width and a zero count made one value mean two things, and the two call
+ * sites duly read it two ways — the line chart as "not measured", the bar chart
+ * as "kept nothing", which is how a narrow card came to erase its whole label
+ * row.
+ */
+export function axisLabelIndices(
+  count: number,
+  chartWidth: number,
+  minLabelWidth = 50,
+): number[] {
+  if (count <= 0) return [];
+  if (count === 1) return [0];
+
+  const last = count - 1;
+  const step = axisLabelStep(count, chartWidth, minLabelWidth);
+
+  const kept: number[] = [];
+  for (let i = last; i >= 0; i -= step) kept.unshift(i);
+
+  const firstKept = kept[0] ?? 0;
+  if (firstKept > 0 && (firstKept / last) * chartWidth >= minLabelWidth) kept.unshift(0);
+
+  return kept;
+}

package/src/bar_chart.tsx

@@ -1,11 +1,23 @@
-import { View, StyleSheet, type ViewStyle } from "react-native";
-import { useMemo } from "react";
+import { View, StyleSheet, type LayoutChangeEvent, type ViewStyle } from "react-native";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { axisLabelIndices } from "./axis_label_indices";
 import { useLoticsLocale } from "./locale";
 
 const DEFAULT_BAR_COLOR = colors.blue[500];
 
+/** The horizontal orientation's label column, in px, when the caller names none. */
+const DEFAULT_LABEL_WIDTH = 80;
+
+/** The value axis's own column — the gutter the vertical bars start after. */
+const AXIS_LABEL_WIDTH = 56;
+
+/** The gap between bar slots, and therefore between label slots. Named because
+ *  the label box's width is computed from the slot PITCH (slot + gap), and a
+ *  second literal there would silently stop matching the row it measures. */
+const LABEL_GAP = 8;
+
 const defaultFormatNumber = (n: number): string =>
   new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(n);
 
@@ -13,6 +25,17 @@ export interface BarChartItem {
   label: string;
   value: number;
   color?: string;
+  /**
+   * The entity's own mark, before its name — a `BrandMark`, an `Avatar`, a
+   * status dot. A bar is one entity, and a chart beside a table over the same
+   * entities has to draw them the same way; the bar's COLOUR belongs to the
+   * measure, so it cannot carry identity as a legend swatch does.
+   *
+   * Horizontal: in the label column, ahead of the name. Vertical: above it,
+   * where the axis label sits — and thinned out with that label when the axis
+   * cannot fit them all.
+   */
+  leading?: ReactNode;
 }
 
 export interface BarChartProps {
@@ -20,6 +43,13 @@ export interface BarChartProps {
   orientation?: "vertical" | "horizontal";
   formatNumber?: (n: number) => string;
   emptyLabel?: string;
+  /**
+   * The horizontal orientation's fixed label column, in px (default 80). It is
+   * fixed because every row's bar has to start on one left edge; it is a prop
+   * because 80 fits a date and not a company name, and how long an entity's
+   * name runs is the caller's fact, not the chart's.
+   */
+  labelWidth?: number;
 }
 
 function useAxisTicks(maxValue: number) {
@@ -62,9 +92,13 @@ function useAxisTicks(maxValue: number) {
 }
 
 /**
- * The canonical SVG bar chart over `data: { label, value, color? }[]` — `orientation`
- * vertical|horizontal, nice auto axis ticks, `formatNumber` for value labels. (No recharts.) For
- * one inline trend use `Sparkline`; for parts-of-a-whole, `PieChart` / `Breakdown`.
+ * The canonical SVG bar chart over `data: { label, value, color?, leading? }[]` —
+ * `orientation` vertical|horizontal, nice auto axis ticks, `formatNumber` for value labels,
+ * `labelWidth` for the horizontal label column. (No recharts.) For one inline trend use
+ * `Sparkline`; for parts-of-a-whole, `PieChart` / `Breakdown`.
+ *
+ * The vertical axis prints as many labels as it fits and thins the rest, so the number of
+ * bars is never decided by how wide a label happens to be.
  */
 export function BarChart(props: BarChartProps) {
   const locale = useLoticsLocale();
@@ -73,12 +107,73 @@ export function BarChart(props: BarChartProps) {
     orientation = "vertical",
     formatNumber = defaultFormatNumber,
     emptyLabel = locale.chart.noData,
+    labelWidth = DEFAULT_LABEL_WIDTH,
   } = props;
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const axisTicks = useAxisTicks(maxValue);
   const axisMax = axisTicks[axisTicks.length - 1] || maxValue;
   const barAreaHeight = 200;
 
+  // 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
+  // chart's. Without it the label box IS the bar slot: 13 bars in a 1000px card
+  // give each label 38px, so a `dd/MM` ellipsises and the axis stops being
+  // readable at exactly the density that makes a bar chart worth drawing. The
+  // BARS never thin — dropping data to fit typography is the wrong trade.
+  const [labelsWidth, setLabelsWidth] = useState(0);
+  const handleLabelsLayout = useCallback((event: LayoutChangeEvent) => {
+    setLabelsWidth(event.nativeEvent.layout.width);
+  }, []);
+  // 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
+  // it.
+  //
+  // THE SPACE THE THINNING FREED, HANDED TO THE LABEL THAT SURVIVED.
+  //
+  // Dropping a neighbour is only half the fix: the survivor still sits in its
+  // own bar slot, and a one-line `Text` is capped at that slot's width and
+  // ellipsises inside it — so the axis kept fewer labels and clipped them just
+  // the same, with a blank slot beside each one. The label box therefore spans
+  // the STEP: `step` slots and the gaps between them, centred on its bar, which
+  // is exactly the room the dropped labels vacated. The bar slots themselves
+  // never move, so an unlabelled bar stays a blank slot rather than a narrower
+  // one — the box overflows the slot instead of resizing it.
+  const axisLabels = useMemo(() => {
+    // Unmeasured (first paint, and any host with no layout pass) shows every
+    // label, which is where this started — thinning is what measurement BUYS,
+    // never a precondition for rendering an axis at all.
+    if (labelsWidth <= 0 || data.length === 0) return null;
+    // `labelsRow` holds the axis spacer AND one slot per bar, so its N slots
+    // carry N gaps rather than N-1: `track` is already `sum(slots) + N·gap`, and
+    // the slot PITCH is therefore `track / N` — the gaps net out exactly. The
+    // survivor's box spans `step` slots and the `step - 1` gaps between them,
+    // which is `step · pitch - gap`.
+    const track = labelsWidth - AXIS_LABEL_WIDTH;
+    const pitch = track / data.length;
+    const keptIndices = axisLabelIndices(data.length, track);
+    // The span comes from the KEPT SET, never from `axisLabelStep`. The two are
+    // allowed to disagree — `axisLabelIndices` re-adds index 0 when there is
+    // room for it, so a step of `count` can still yield two survivors — and
+    // sizing off the step then hands EACH of them a box spanning the whole
+    // track, so the two labels overlap. Reading one source of truth cannot
+    // drift, whatever the thinning rule becomes later.
+    const gaps = keptIndices.slice(1).map((v, i) => v - keptIndices[i]);
+    const span = gaps.length > 0 ? Math.min(...gaps) : data.length;
+    const boxWidth = span > 1 ? span * pitch - LABEL_GAP : 0;
+    return {
+      kept: new Set(keptIndices),
+      // Undefined when nothing was dropped (`step === 1`): the slot IS the box,
+      // and an explicit width there would only re-state it. Undefined too when
+      // the span is not a positive number of pixels — a card narrower than the
+      // value axis's own gutter leaves a track of zero or less, and a `width: 0`
+      // box would ERASE the label the thinning just chose to keep. Letting it
+      // overflow its slot is the same trade the row makes everywhere else: the
+      // axis thins labels, it never deletes them.
+      boxWidth: boxWidth > 0 ? boxWidth : undefined,
+    };
+  }, [data.length, labelsWidth]);
+
   if (data.length === 0) {
     return (
       <View style={styles.chartContainer}>
@@ -97,7 +192,8 @@ export function BarChart(props: BarChartProps) {
 
             return (
               <View key={index} style={styles.horizontalBarContainer}>
-                <View style={styles.horizontalBarLabel}>
+                <View style={[styles.horizontalBarLabel, { width: labelWidth }]}>
+                  {item.leading !== undefined ? item.leading : null}
                   <Text size="sm" numberOfLines={1}>
                     {item.label}
                   </Text>
@@ -122,7 +218,7 @@ export function BarChart(props: BarChartProps) {
             );
           })}
           <View style={styles.horizontalAxisContainer}>
-            <View style={styles.horizontalBarLabel} />
+            <View style={{ width: labelWidth }} />
             <View style={styles.horizontalAxisTrack}>
               {axisTicks.map((tick, index) => (
                 <View
@@ -186,14 +282,27 @@ export function BarChart(props: BarChartProps) {
             })}
           </View>
         </View>
-        <View style={styles.labelsRow}>
+        <View style={styles.labelsRow} onLayout={handleLabelsLayout}>
           <View style={styles.axisLabelSpacer} />
           {data.map((item, index) => (
+            // The slot stays whatever the axis prints, so the bars above it keep
+            // their positions — an unlabelled bar is a blank slot, never a
+            // narrower one.
             <View key={index} style={styles.labelContainer}>
-              <Text numberOfLines={1} weight="medium">
-                {item.label}
-              </Text>
-              <Text color="muted">{formatNumber(item.value)}</Text>
+              {axisLabels === null || axisLabels.kept.has(index) ? (
+                <View
+                  style={[
+                    styles.labelBox,
+                    axisLabels?.boxWidth !== undefined && { width: axisLabels.boxWidth },
+                  ]}
+                >
+                  {item.leading !== undefined ? item.leading : null}
+                  <Text numberOfLines={1} weight="medium">
+                    {item.label}
+                  </Text>
+                  <Text color="muted">{formatNumber(item.value)}</Text>
+                </View>
+              ) : null}
             </View>
           ))}
         </View>
@@ -215,7 +324,7 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   verticalAxis: {
-    width: 56,
+    width: AXIS_LABEL_WIDTH,
     position: "relative",
   },
   verticalAxisTick: {
@@ -243,15 +352,23 @@ const styles = StyleSheet.create({
   },
   labelsRow: {
     flexDirection: "row",
-    gap: 8,
+    gap: LABEL_GAP,
   },
   labelContainer: {
     flex: 1,
     alignItems: "center",
     gap: 2,
   },
+  // Wider than its slot when the axis thinned, and centred on the bar by the
+  // slot's own `alignItems` — a flex item wider than its cross-axis space
+  // overflows both edges equally, which is what puts the label over the blank
+  // slots beside it rather than clipping it inside its own.
+  labelBox: {
+    alignItems: "center",
+    gap: 2,
+  },
   axisLabelSpacer: {
-    width: 56,
+    width: AXIS_LABEL_WIDTH,
   },
   horizontalChart: {
     gap: 8,
@@ -264,8 +381,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 8,
   },
+  // The width is the instance's `labelWidth`; what lives here is the row shape —
+  // the entity's mark, then its name, on one line.
   horizontalBarLabel: {
-    width: 80,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
   },
   horizontalBarTrack: {
     flex: 1,