@lotics/ui 47.5.1 → 47.6.0

package/docs/catalog.md

@@ -389,7 +389,10 @@ Worked example: [`tpl_board`](../examples/tpl_board.tsx).
 `TrendChip` (delta), `Sparkline`, `BarChart` / `LineChart` / `PieChart` (the canonical SVG
 set — no recharts), `ProgressRing`, `ProgressBar` (its `compact` prop = ONE row, track + a
 plain sm tabular count beside it — the cell/heading/peek-trigger meter. **The track clamps at
-100%, the caption does not** — over its max it reads `2,100 / 2,000 (105%)`. Numbers format in the
+100%, the caption does not** — over its max it reads `2,100 / 2,000 (105%)`. **`max: null` is an
+unbounded meter** — the caption states the value and the caller's `unboundedLabel`
+(`1,250 (no limit)`) and the track stays empty, so a capped and an uncapped allowance side by
+side stay one widget rather than a bar beside a hand-rolled lookalike. Numbers format in the
 reader's locale, so
 never hand-format the value you pass in — when display precision differs from the true value
 (whole credits off a fractional balance), `formatValue` reshapes the caption text and leaves
@@ -1028,7 +1031,7 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`switcher`** — `Switcher`: current-item trigger opening a popover of `MenuButton` items
   (`SwitcherItem { id, label }`, `currentId`, `onSelect`) — the compact entity/workspace
   switcher.
-- **`count`** — `Count`: a small circular count bubble (`color` highlight|muted|red).
+- **`count`** — `Count`: a 20px count disc that grows into a pill past one digit (`color` highlight|muted|red).
 - **`shortcut_badge`** — `ShortcutBadge`: the keycap hint pill — a zinc-50 badge rendering a
   shortcut from a raw string or `ShortcutDescriptor` (⌘B on Mac, Ctrl+B elsewhere); null on
   small screens. `TextInputField shortcut` renders it built-in, while the field is EMPTY —
@@ -2011,7 +2014,7 @@ component rather than showing it at zero.
   sizes the fixed label column (default 80, which fits a date and not a company name), and each
   item's **`leading`** slot carries that entity's own mark ahead of its name.
 - **`progress_bar`** — `ProgressBar`: the determinate meter; `compact` = ONE row, track + a
-  plain sm tabular count beside it.
+  plain sm tabular count beside it; `max: null` + `unboundedLabel` = the same meter with no bound.
 - **`progress_ring`** — `ProgressRing`: the same meter in a circle, and the ONLY circular one. Same API shape as the bar — a real `value`/`max` rather than a
   pre-computed percentage, optional `label`/`caption`, and a `format` that turns the centre
   figure off. `format="none"` with no label leaves the arc bare at any size: that is the

package/docs/composition.md

@@ -136,6 +136,19 @@ the subject into rows.
 | Register / work list / calendar | 1040 |
 | Wide wallboard / report | 1100 |
 
+**A row that navigates PAINTS.** A link is not a row: it paints nothing, so a row tall enough to
+hold an identity mark becomes a large silent target — the pointer crosses it and the only thing
+saying it is pressable is the cursor. Reach for the row surface (`PressableRow`), never a
+hand-rolled hover on the anchor: the wash has to span the WHOLE row *including its trailing
+controls*, and a parent's Pressability hover is released to the innermost nested pressable, which
+stops the wash short of the `⋯` and leaves a gap exactly where the eye is going. Keep the anchor
+INSIDE as the accessible door — a row of places to go owes middle-click, cmd-click and copy-link,
+which only a real anchor gives.
+
+Without that wash the trailing controls are what look wrong: nothing ties a `⋯` to its row, so the
+right edge reads as a floating column competing with the names, and the instinct is to hide the
+control. Paint the row first — the clutter usually WAS the missing wash.
+
 **ONE LEFT EDGE — the whole page, and then the whole APP.** Headings, detail labels, prose, a
 table's first column, a footer's totals, a dialog's title. Then check the screen this one OPENS: a
 list and the record it opens are one reading column seen twice, and both must derive from ONE

package/docs/reviewing.md

@@ -137,6 +137,11 @@ rule behind it lives in the area doc named beside it; this file never restates o
 - **Same shape → same treatment.** Group every element by its visual SHAPE (label-over-value,
   figure+caption, icon+row, chip) and check each group has ONE treatment. A reader parses shape
   before meaning, so an unexplained difference reads as an accident however principled the reason.
+  **The source-side signature is a branch that renders a kit component on one arm and a
+  hand-built lookalike on the other** — a meter with no bound, a row with no value — written to
+  match the primitive on the day it was built. The primitive moves and the copy does not, and the
+  two arms never render side by side on the fixture that was screenshotted, so measure a screen
+  where BOTH arms show. The fix is the missing state on the primitive, never a closer copy.
 - **Singletons.** A rung/weight/ink combination appearing ONCE either wants siblings or wants to
   join an existing class. Pick the sibling set by STRUCTURAL ROLE, not visual resemblance.
 - **Count DISTINCT rungs on the surface, then name the role each one carries.** More rungs than

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.5.1",
+  "version": "47.6.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/count.tsx

@@ -1,5 +1,5 @@
 import { Text } from "./text";
-import { View } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { colors } from "./colors";
 
 interface CountProps {
@@ -7,28 +7,33 @@ interface CountProps {
   color?: "highlight" | "muted" | "red";
 }
 
+/**
+ * A count in a 20px disc that grows into a pill past one digit. `xs` because its line box (18)
+ * is the only body rung that fits inside the disc — `sm` is 24 tall, taller than the disc, so
+ * the digit was clipped and sat off-centre.
+ */
 export function Count(props: CountProps) {
   const { count, color = "muted" } = props;
 
   return (
     <View
-      style={{
-        width: 20,
-        height: 20,
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: 999,
-        backgroundColor:
-          color === "highlight"
-            ? colors.zinc["700"]
-            : color === "red"
-              ? colors.red["700"]
-              : undefined,
-      }}
+      style={[
+        styles.pill,
+        {
+          backgroundColor:
+            color === "highlight"
+              ? colors.zinc["700"]
+              : color === "red"
+                ? colors.red["700"]
+                : undefined,
+        },
+      ]}
     >
       <Text
         numberOfLines={1}
-        size="sm"
+        size="xs"
+        weight="medium"
+        tabular
         color={color === "muted" ? "zinc-500" : "inverted"}
         userSelect="none"
       >
@@ -37,3 +42,14 @@ export function Count(props: CountProps) {
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  pill: {
+    minWidth: 20,
+    height: 20,
+    paddingHorizontal: 6,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 999,
+  },
+});

package/src/popover.tsx

@@ -433,6 +433,34 @@ export function PopoverContent(props: PopoverContentProps) {
     return () => document.removeEventListener("click", onOutsideClick, true);
   }, [open, small, onOpenChange, triggerRef]);
 
+  // The one press the click listener above CANNOT see: one that lands inside a
+  // cross-origin iframe. Those events are dispatched in the frame's own document
+  // and never cross into this one, so a popover anchored over an embedded app —
+  // the app page's own chrome is exactly this shape — stayed open while the user
+  // clicked around underneath it, with no way to dismiss but pressing the trigger
+  // again or hitting Escape.
+  //
+  // Focus is the signal that survives the boundary: clicking into a frame moves
+  // this document's `activeElement` to the IFRAME element and blurs the window.
+  //
+  // Checking `activeElement` is what keeps this from over-firing. A window blur
+  // alone also means "switched tab" or "moved to another app", and dismissing
+  // then is a menu that quietly disappears while the user was reading something
+  // else. Only a blur that HANDED FOCUS TO A FRAME is a press we missed.
+  useEffect(() => {
+    if (!open || small) return;
+    const onWindowBlur = () => {
+      // Deferred: at blur time the browser has not always moved `activeElement`
+      // to the frame yet, so reading it synchronously can still report the
+      // trigger and miss the dismissal entirely.
+      setTimeout(() => {
+        if (document.activeElement instanceof HTMLIFrameElement) onOpenChange(false);
+      }, 0);
+    };
+    window.addEventListener("blur", onWindowBlur);
+    return () => window.removeEventListener("blur", onWindowBlur);
+  }, [open, small, onOpenChange]);
+
   const calculatePosition = useCallback(() => {
     if (!popoverRef.current) return;
     if (small) return;

package/src/progress_bar.tsx

@@ -8,15 +8,20 @@ export type ProgressBarFormat = "percentage" | "fraction" | "none";
 
 export interface ProgressBarProps {
   value: number;
-  max: number;
-  /** What this bar measures ("Đã nhận", "Tiến độ giao") — the xs muted
-   * uppercase eyebrow above the bar. Omit inside a band that already names
-   * it. */
+  /** `null` = no bound. The caption states the value and `unboundedLabel` in place of a
+   * fraction and the track stays empty, so a capped and an uncapped allowance side by side
+   * read as one widget. */
+  max: number | null;
+  /** What this bar measures ("Đã nhận", "Tiến độ giao") — the `Eyebrow` above the
+   * bar. Omit inside a band that already names it. */
   title?: string;
   /** Caption above-right of the bar: `percentage` → "50%", `fraction` →
    * "1,250 / 2,500 (50%)" (separators follow the reader's locale). Reports the
    * TRUE ratio — over `max` it reads "105%" while the track stays clamped. */
   format?: ProgressBarFormat;
+  /** The qualifier beside the value when `max` is null — "1,250 (no limit)". The kit carries
+   * no i18n, so the caller supplies the words; without them the caption is the bare value. */
+  unboundedLabel?: string;
   /**
    * How `value` and `max` render inside the caption. Defaults to the reader's locale grouping.
    *
@@ -61,6 +66,7 @@ export function ProgressBar(props: ProgressBarProps) {
     format = "percentage",
     formatValue,
     formatPercent,
+    unboundedLabel,
     color = colors.blue["500"],
     completeColor = colors.green["500"],
     compact = false,
@@ -76,17 +82,18 @@ export function ProgressBar(props: ProgressBarProps) {
    * never exceeds its max, so this only diverges for the over-allowance case, where the true
    * figure is the whole point.
    */
-  const ratio = max > 0 ? Math.max(0, (value / max) * 100) : 0;
+  const ratio = max !== null && max > 0 ? Math.max(0, (value / max) * 100) : 0;
   const percentage = Math.min(100, ratio);
   const isComplete = ratio >= 100;
   const num = formatValue ?? ((n: number) => n.toLocaleString(localeTag));
   const pct = formatPercent
     ? (r: number) => formatPercent(r / 100)
     : (r: number) => `${Math.round(r)}%`;
+  const unbounded = unboundedLabel ? `${num(value)} (${unboundedLabel})` : num(value);
 
   if (compact) {
     const label =
-      format === "percentage" ? pct(ratio) : `${num(value)}/${num(max)}`;
+      max === null ? unbounded : format === "percentage" ? pct(ratio) : `${num(value)}/${num(max)}`;
     return (
       <View style={styles.compactRow}>
         <View style={[styles.track, styles.compactTrack]}>
@@ -109,11 +116,13 @@ export function ProgressBar(props: ProgressBarProps) {
   }
 
   const caption =
-    format === "fraction"
-      ? `${num(value)} / ${num(max)} (${pct(ratio)})`
-      : format === "percentage"
-        ? pct(ratio)
-        : null;
+    format === "none"
+      ? null
+      : max === null
+        ? unbounded
+        : format === "fraction"
+          ? `${num(value)} / ${num(max)} (${pct(ratio)})`
+          : pct(ratio);
 
   return (
     <View style={styles.container}>