@lotics/ui 7.19.0 → 7.19.2

package/AGENTS.md

@@ -655,13 +655,16 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
   cross-cutting numbers, drop them. Do NOT put a `KPIStrip` on a register page or a `SummaryLine` on
   a dashboard. Card stat rails use `KPICard`.
 - **Numbers**: free-standing numerals `<Text tabular>`. Money: `formatMoney(n)` from
-  `@lotics/ui/format_money` (`compact` for strip captions). Dates: `formatDate(value, opts)` from
+  `@lotics/ui/format_money` (`compact` for strip captions; it emits a non-breaking space before `₫` —
+  normalize `\s` in test asserts). Dates: `formatDate(value, opts)` from
   `@lotics/ui/format_date` — the date-VALUE formatter. `format` (date STYLE) ∈ `date` (22/05/2026) ·
   `medium` (22 thg 5, 2026) · `long` (22 tháng 5, 2026) · `dayMonth` (22 thg 5) · `monthYear`
   (Tháng 5 2026); **`time: true` is orthogonal** — prepends the 24h time to ANY style
   (`14:30 22/05/2026`, `14:30 22 tháng 5, 2026`); `compact` drops the year on `date`. It's `Intl` +
   the product's conventions (stable `/`, naive-ISO parse, 24h time-first, `emptyLabel`) — never
-  hand-roll a date via `Intl`/`padStart` for value display. (Exempt: a component's own internal
+  hand-roll a date via `Intl`/`padStart` for value display. An order the presets lack (e.g.
+  time-first `HH:mm dd/MM/yyyy` in a doc builder): `parseDate` + assemble the missing order —
+  never a regex re-implementation. (Exempt: a component's own internal
   chrome — a calendar's header/weekday/a11y labels, a gantt axis — renders its own set.)
 - **Every number is a door** (except the KPI strip). A component that summarizes records leads to
   the records behind it when pressed — switch to the filtered list, expand in place, or navigate.
@@ -782,6 +785,10 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
   A status is ONE family NAME (`{ color: "emerald" }`) and every weight derives from it. One accent
   per screen purpose (blue=pipeline, emerald=money, red=danger, amber=waiting). Direct `colors.*` is
   reserved for NEUTRALS (`zinc`, `border`, `white`, the `*[50]` selection washes).
+  **TEXT never wears `solid()`** — the 500 is a FILL shade (dots, series). A status word/number uses
+  `Text`'s valence tokens: `color="danger"` (red-900) / `"warning"` (amber-700) / `"success"`
+  (emerald-700) — AA on white. Map a dynamic `ColorName` to a token at the call site; hue nuance
+  (rose vs orange) stays on `Badge`s. Links use `Link`/`TextLink` (blue-600), never `solid("blue")`.
 - **Status indicators have a WEIGHT — match to prominence, never to a metric.** colored `Text` (a
   verdict WORD in a header) < `Badge variant="dot"` (a categorical STATE in a scannable column /
   legend) < `Badge` tonal pill (a record's PROMINENT status, a drawer/detail header). A register's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.19.0",
+  "version": "7.19.2",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/agent_run.tsx

@@ -379,18 +379,20 @@ function ToolGroup(props: {
 }
 
 const styles = StyleSheet.create({
-  narration: { paddingHorizontal: 8 },
+  // No horizontal self-inset: the run sits flush so the CONSUMER'S gutter governs
+  // alignment (an 8px inset made its text misalign with dialog titles / sibling
+  // lines in every padded container).
+  narration: {},
   group: { gap: 2 },
   row: {
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
     minHeight: CONTROL_HEIGHT,
-    paddingHorizontal: 8,
     borderRadius: CONTROL_RADIUS,
   },
   dotCol: { width: 18, alignItems: "center" },
   rowBody: { flex: 1 },
   // Reasoning body aligns under the "Thinking" label (past the dot column + gap).
-  reasoning: { paddingLeft: 36, paddingRight: 8, paddingBottom: 4 },
+  reasoning: { paddingLeft: 28, paddingBottom: 4 },
 });

package/src/timeline.tsx

@@ -46,20 +46,17 @@ export function Timeline(props: TimelineProps) {
       {items.map((item, index) => {
         const expanded = expandedIds[item.id] ?? false;
         const hasDetails = !!item.details;
+        const hasBelow = !!item.description || !!item.error || (expanded && !!item.details);
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
 
+        // The label row: label + right + chevron only. Secondary lines
+        // (description/error) render BELOW in the spine band, so the disc can
+        // center against this row whatever its height (a plain 20px label or a
+        // 40px inline control in `right` both align label-on-disc).
         const row = (
-          <View style={[styles.row, item.description ? styles.rowTop : null]}>
-            <View style={{ flex: 1, gap: 2 }}>
-              <Text size="sm">{item.label}</Text>
-              {item.description ? (
-                <Text size="xs" color="muted">{item.description}</Text>
-              ) : null}
-              {item.error ? (
-                <Text size="xs" color="danger" numberOfLines={1}>
-                  {item.error}
-                </Text>
-              ) : null}
-            </View>
+          <View style={styles.row}>
+            <Text size="sm" style={{ flex: 1 }}>{item.label}</Text>
             {item.right}
             {hasDetails ? (
               <Icon name={expanded ? "chevron-up" : "chevron-down"} size={14} color={colors.zinc[400]} />
@@ -68,30 +65,47 @@ export function Timeline(props: TimelineProps) {
         );
 
         return (
-          <View key={item.id} style={styles.itemContainer}>
-            <View style={styles.spineColumn}>
-              <AnimationFadeIn key={`${item.id}-${item.icon}`}>
-                {/* Tinted disc: a low-alpha wash of the accent behind a full-color icon. */}
-                <View style={[styles.node, { backgroundColor: withAlpha(item.iconColor, 0.1) }]}>
-                  {item.isLoading ? (
-                    <ActivityIndicator size={13} color={item.iconColor} />
-                  ) : (
-                    <Icon name={item.icon} size={13} color={item.iconColor} />
-                  )}
-                </View>
-              </AnimationFadeIn>
-              {index < items.length - 1 && <View style={styles.spine} />}
+          <View key={item.id}>
+            {/* Band 1 — disc beside the label row, vertically CENTERED on it.
+                The half-spines above/below the disc keep the line continuous
+                through tall rows. */}
+            <View style={styles.labelBand}>
+              <View style={styles.discColumn}>
+                <View style={styles.halfSpineSlot}>{!isFirst ? <View style={styles.spineFill} /> : null}</View>
+                <AnimationFadeIn key={`${item.id}-${item.icon}`}>
+                  {/* Tinted disc: a low-alpha wash of the accent behind a full-color icon. */}
+                  <View style={[styles.node, { backgroundColor: withAlpha(item.iconColor, 0.1) }]}>
+                    {item.isLoading ? (
+                      <ActivityIndicator size={13} color={item.iconColor} />
+                    ) : (
+                      <Icon name={item.icon} size={13} color={item.iconColor} />
+                    )}
+                  </View>
+                </AnimationFadeIn>
+                <View style={styles.halfSpineSlot}>{!isLast ? <View style={styles.spineFill} /> : null}</View>
+              </View>
+              <View style={styles.rowColumn}>
+                {hasDetails ? (
+                  <PressableHighlight focusRing onPress={() => toggleItem(item.id)} style={styles.pressableRow}>
+                    {row}
+                  </PressableHighlight>
+                ) : (
+                  <View style={styles.plainRow}>{row}</View>
+                )}
+              </View>
             </View>
 
-            <View style={styles.contentColumn}>
-              {hasDetails ? (
-                <PressableHighlight focusRing onPress={() => toggleItem(item.id)} style={styles.pressableRow}>
-                  {row}
-                </PressableHighlight>
-              ) : (
-                <View style={styles.plainRow}>{row}</View>
-              )}
-              {expanded && item.details ? <View style={styles.detailsContainer}>{item.details}</View> : null}
+            {/* Band 2 — description/error/details under the label, beside the
+                continuing spine; also carries the inter-item gap. */}
+            <View style={styles.belowBand}>
+              <View style={styles.spineColumn}>{!isLast ? <View style={styles.spineFill} /> : null}</View>
+              <View style={[styles.belowColumn, isLast && !hasBelow ? styles.belowColumnLast : null]}>
+                {item.description ? <Text size="xs" color="muted">{item.description}</Text> : null}
+                {item.error ? (
+                  <Text size="xs" color="danger" numberOfLines={1}>{item.error}</Text>
+                ) : null}
+                {expanded && item.details ? <View style={styles.detailsContainer}>{item.details}</View> : null}
+              </View>
             </View>
           </View>
         );
@@ -101,16 +115,27 @@ export function Timeline(props: TimelineProps) {
 }
 
 const styles = StyleSheet.create({
-  itemContainer: {
+  labelBand: {
     flexDirection: "row",
     gap: 12,
   },
-  spineColumn: {
+  // Stretches to the label row's height; the disc centers on it, half-spines
+  // fill the remainder so the line never breaks on a tall row.
+  discColumn: {
     width: 24,
+    alignSelf: "stretch",
     alignItems: "center",
-    // Align the node with the FIRST line of content (not the centre of a
-    // multi-line block), so the spine reads as connected.
-    paddingTop: 2,
+  },
+  halfSpineSlot: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  spineFill: {
+    width: 1.5,
+    flex: 1,
+    borderRadius: 1,
+    backgroundColor: colors.zinc[200],
   },
   node: {
     width: 24,
@@ -118,33 +143,36 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     justifyContent: "center",
     alignItems: "center",
+    marginVertical: 3,
   },
-  spine: {
-    width: 1.5,
+  rowColumn: {
     flex: 1,
-    minHeight: 12,
-    borderRadius: 1,
-    backgroundColor: colors.zinc[200],
-    marginVertical: 3,
   },
-  contentColumn: {
+  belowBand: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  spineColumn: {
+    width: 24,
+    alignItems: "center",
+    alignSelf: "stretch",
+  },
+  belowColumn: {
     flex: 1,
+    gap: 2,
     paddingBottom: 14,
   },
+  belowColumnLast: {
+    paddingBottom: 0,
+  },
   row: {
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
     flex: 1,
   },
-  // With a description the row is taller than one line — top-align so the
-  // timestamp (`right`) sits beside the label instead of centred on the block.
-  rowTop: {
-    alignItems: "flex-start",
-  },
   // The press target for expandable rows; pressable rows bleed the hover wash
-  // past the text column. paddingVertical pairs with the spineColumn paddingTop
-  // so the node lines up with the first line.
+  // past the text column.
   pressableRow: {
     borderRadius: 8,
     paddingHorizontal: 8,
@@ -166,3 +194,4 @@ const styles = StyleSheet.create({
     paddingLeft: 2,
   },
 });
+