@lotics/ui 47.13.1 → 47.14.0

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/cell_stack.tsx

@@ -11,6 +11,12 @@ export interface CellStackProps {
    *
    * One, not several: a stack of three is no longer a value and its annotation,
    * it is a row that wants to be a row.
+   *
+   * To RESERVE the line on a row that has nothing to say — which is how a column
+   * whose cells are sometimes two lines keeps one first-line height down the page
+   * (probe 8h-bis) — pass a whitespace string. `" "` is what everybody writes and
+   * the web renderer collapses it, so it is normalised to a non-breaking space
+   * here rather than in twelve call sites.
    */
   caption?: ReactNode;
   /**
@@ -24,6 +30,13 @@ export interface CellStackProps {
    * does, so the caption keeps body size beside one.
    */
   marked?: boolean;
+  /**
+   * The identity mark, drawn HERE — an `Avatar`, a `FileBadge`. Sets `marked`
+   * and owns the gap between the mark and the pair, so a register's subject
+   * column is not one more hand-rolled row of mark + stack with its own idea
+   * of the gap. The column still budgets the mark's width (`TableColumn.lead`).
+   */
+  leading?: ReactNode;
   /** The subject's rung. The pair takes ONE rung, so the caption follows it. */
   size?: TextSize;
   /** The subject's ink. The caption is always `muted` — it is supporting text. */
@@ -80,7 +93,8 @@ export function CellStack(props: CellStackProps) {
     title,
     caption,
     weight = "regular",
-    marked = false,
+    marked: markedProp = false,
+    leading,
     size = "sm",
     color,
     tabular,
@@ -90,7 +104,16 @@ export function CellStack(props: CellStackProps) {
     testID,
   } = props;
 
-  const hasCaption = caption !== undefined && caption !== null && caption !== false;
+  // A caption reserving the line with nothing in it. `" "` says "keep this line"
+  // unambiguously and collapses in the web renderer, so the reserved line loses
+  // its height and the cell drops to ONE line — while the row height, set by
+  // whichever sibling is two lines tall, never moves. The column then puts its
+  // first line at two different heights on rows that look identical to every
+  // spacing probe. One app wrote it twelve times.
+  const line = typeof caption === "string" && caption.length > 0 && caption.trim() === "" ? NBSP : caption;
+  const hasCaption = line !== undefined && line !== null && line !== false;
+  const hasLeading = leading !== undefined && leading !== null && leading !== false;
+  const marked = markedProp || hasLeading;
   // Rule 1 — the caption's rung, from what else is already separating the pair.
   const captionSize: TextSize = weight !== "regular" || marked ? size : "xs";
   // Rule 2 — tight closes a PAIR; `xs` is tight by construction, and a lone line
@@ -98,8 +121,8 @@ export function CellStack(props: CellStackProps) {
   const subjectTight = hasCaption ? "tight" : undefined;
   const captionTight = captionSize === "xs" ? undefined : "tight";
 
-  return (
-    <View style={[{ gap: 0, alignItems: ALIGN[align] }, style]} testID={testID}>
+  const stack = (
+    <View style={[{ gap: 0, alignItems: ALIGN[align] }, hasLeading ? { flex: 1, minWidth: 0 } : style]} testID={hasLeading ? undefined : testID}>
       {typeof title === "string" || typeof title === "number" ? (
         <Text
           size={size}
@@ -115,7 +138,7 @@ export function CellStack(props: CellStackProps) {
         title
       )}
       {hasCaption
-        ? typeof caption === "string" || typeof caption === "number"
+        ? typeof line === "string" || typeof line === "number"
           ? (
             <Text
               size={captionSize}
@@ -124,15 +147,28 @@ export function CellStack(props: CellStackProps) {
               tabular={tabular}
               numberOfLines={numberOfLines}
             >
-              {caption}
+              {line}
             </Text>
           )
-          : caption
+          : line
         : null}
     </View>
   );
+  if (!hasLeading) return stack;
+  return (
+    <View style={[{ flexDirection: "row", alignItems: "center", gap: LEADING_GAP, minWidth: 0 }, style]} testID={testID}>
+      {leading}
+      {stack}
+    </View>
+  );
 }
 
+const NBSP = "\u00a0";
+
+/** Mark to pair \u2014 the ONE gap between an identity mark and the label beside it,
+ *  wherever the kit draws that pair (`CellStack`, `Matrix`, `StateMatrix`). */
+export const LEADING_GAP = 10;
+
 const ALIGN = {
   left: "flex-start",
   right: "flex-end",

package/src/chip_group.tsx

@@ -147,12 +147,18 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
                 color={option.iconColor ?? (active ? colors.zinc[900] : colors.zinc[500])}
               />
             ) : null}
-            <Text
-              userSelect="none"
-              size="sm"
-              weight={active ? "semibold" : "medium"}
-              color={active ? "default" : "muted"}
-            >
+            {/* MEDIUM on both, never semibold on the active one.
+
+                A chip already answers "which one is on" twice — a doubled
+                zinc-900 edge and a ring — so the weight was a third signal, and
+                the wrong kind: semibold is a separate, genuinely heavier FILE
+                and the heading ramp is semibold at every rung, so an active chip
+                rendered a filter value at heading weight. State steps up in INK,
+                which is what `color` does here. It also made the active chip a
+                singleton treatment on every screen carrying one, while the
+                sibling that answers the same question — `Tabs` — steps
+                regular → medium. One question, one answer. */}
+            <Text userSelect="none" size="sm" weight="medium" color={active ? "default" : "muted"}>
               {option.label}
             </Text>
             {option.count != null ? (

package/src/danger_zone.tsx

@@ -23,24 +23,32 @@ export interface DangerZoneProps {
  * a danger heading mark it as a hazard without shouting (the kit's `tint`/`solid`
  * discipline, never a raw hex); the consequence goes in `description`, and the
  * action(s) go in `children`.
+ *
+ * ONE LEFT EDGE, and it is `Callout`'s anatomy that gets it: the icon sits in an
+ * outer ROW beside a column holding title, consequence and actions, so all three
+ * derive from the same edge. Put the icon INSIDE the heading row instead — the
+ * obvious way to write it — and only the TITLE moves right, so the loudest line
+ * in the block sits 22px past the sentence explaining it and the button under
+ * both starts somewhere else again. Three edges inside one 16px-padded box, on
+ * the one primitive that exists so a hazard is not hand-rolled.
  */
 export function DangerZone(props: DangerZoneProps) {
   const locale = useLoticsLocale();
   const { title = locale.dangerZone.title, description, children } = props;
   return (
     <View style={styles.zone}>
-      <View style={styles.heading}>
-        <Icon name="triangle-alert" size={16} color={solid("red")} />
+      <Icon name="triangle-alert" size={16} color={solid("red")} />
+      <View style={styles.body}>
         <Text size="sm" weight="semibold" color="danger">
           {title}
         </Text>
+        {description ? (
+          <Text size="sm" color="muted">
+            {description}
+          </Text>
+        ) : null}
+        <View style={styles.actions}>{children}</View>
       </View>
-      {description ? (
-        <Text size="sm" color="muted">
-          {description}
-        </Text>
-      ) : null}
-      <View style={styles.actions}>{children}</View>
     </View>
   );
 }
@@ -49,13 +57,18 @@ const styles = StyleSheet.create({
   // A soft danger frame: a low-alpha red hairline over the faintest red wash —
   // the "set apart, not shouting" treatment via the kit's tint discipline.
   zone: {
-    gap: 8,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
     padding: 16,
     borderRadius: 10,
     borderWidth: 1,
     borderColor: tint("red", 0.3),
     backgroundColor: tint("red", 0.03),
   },
-  heading: { flexDirection: "row", alignItems: "center", gap: 6 },
+  // The column every line in the block starts from — 1px down so the first line
+  // of type sits optically level with the 16px mark beside it, exactly as
+  // `Callout` does it.
+  body: { flex: 1, gap: 8, paddingTop: 1 },
   actions: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 4 },
 });

package/src/date_filter.tsx

@@ -33,6 +33,10 @@ export interface DateFilterLabels extends SegmentLabels {
   thisWeek: string;
   thisMonth: string;
   lastMonth: string;
+  thisQuarter: string;
+  lastQuarter: string;
+  thisYear: string;
+  lastYear: string;
   from: string;
   to: string;
   /** Accessible name of the field that OPENS this panel (`DateRangeFilterField`). */
@@ -71,6 +75,14 @@ function presetLabel(id: PresetId, labels: DateFilterLabels): string {
       return labels.thisMonth;
     case "last_month":
       return labels.lastMonth;
+    case "this_quarter":
+      return labels.thisQuarter;
+    case "last_quarter":
+      return labels.lastQuarter;
+    case "this_year":
+      return labels.thisYear;
+    case "last_year":
+      return labels.lastYear;
   }
 }
 
@@ -224,12 +236,10 @@ export function DateFilter(props: DateFilterProps) {
     (id: PresetId) => {
       // A preset replaces the whole range, so any half-picked start is abandoned.
       setPendingStart(null);
-      // Re-clicking the active preset clears the filter
-      if (activePresetId === id) {
-        onValueChange({ start: { date: null, time: null }, end: { date: null, time: null } });
-        return;
-      }
-
+      // Resolved against today on EVERY press, the active one included: a preset
+      // names a period, so re-pressing it re-anchors a range that has gone stale
+      // (a panel left open across midnight) rather than doing nothing. Clearing
+      // is the footer's Clear button — this list holds no null case.
       const presetValue = getPresetValue(id, new Date());
       onValueChange(presetValue);
 
@@ -240,7 +250,7 @@ export function DateFilter(props: DateFilterProps) {
         );
       }
     },
-    [onValueChange, activePresetId],
+    [onValueChange],
   );
 
   // `selected` + `role="option"` is the kit's listbox row, and `MenuButton` owns