@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-3QMEOFW5.js → chunk-GM7YIPB7.js}

@@ -1,15 +1,18 @@
-import { Timeline } from './chunk-NBEF4EPJ.js';
-import { List, ListRow } from './chunk-C4GTDLRC.js';
-import { EmptyState } from './chunk-KFJGFLMW.js';
-import { Amount } from './chunk-QHAITQIF.js';
-import { Sheet } from './chunk-QYPE5JX3.js';
-import { methodIcon } from './chunk-ROCUG24E.js';
-import { usePayLabels } from './chunk-GEIGMWNF.js';
-import { Badge } from './chunk-TN2ZNJUI.js';
-import { Alert } from './chunk-QDZGFXQD.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { Timeline } from './chunk-T77WJA74.js';
+import { StageTimeline } from './chunk-NNJLVA7M.js';
+import { List, ListRow } from './chunk-JA6TK7H2.js';
+import { Amount } from './chunk-GVQQG435.js';
+import { methodIcon } from './chunk-TDWWVJA4.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { MetricDelta } from './chunk-N7AX4OA4.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Platform, findNodeHandle, AccessibilityInfo, View, Text, Pressable, Animated } from 'react-native';
@@ -91,7 +94,15 @@ function ReceivablesCardList({
   cancelLabel: cancelLabelProp,
   locale: localeProp,
   labels: labelsProp,
-  style
+  style,
+  platform,
+  density,
+  selected,
+  onSelectedChange,
+  disabled = false,
+  tone = "status",
+  loading = false,
+  error
 }) {
   const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const pay = usePayLabels(labelsProp);
@@ -126,6 +137,20 @@ function ReceivablesCardList({
       if (handle) AccessibilityInfo.setAccessibilityFocus(handle);
     }
   }, [confirming]);
+  if (error) return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error });
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "group",
+        "aria-busy": true,
+        accessibilityState: { busy: true },
+        accessibilityLabel: labels.actions,
+        style: [styles.loadingRows, style],
+        children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, radius: "md" }, i))
+      }
+    );
+  }
   if (rows.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -151,6 +176,15 @@ function ReceivablesCardList({
             ListRow,
             {
               onPress: onOpenRow ? () => onOpenRow(r.no) : void 0,
+              ...density ? { density } : {},
+              disabled,
+              ...selected ? {
+                selectable: true,
+                selected: selected.includes(r.no),
+                onSelectedChange: (on) => onSelectedChange?.(
+                  on ? [...selected, r.no] : selected.filter((n) => n !== r.no)
+                )
+              } : null,
               accessibilityLabel: onOpenRow ? labels.openRowDetail(
                 openLabel,
                 r.no,
@@ -174,7 +208,7 @@ function ReceivablesCardList({
               ] }),
               subtitle: /* @__PURE__ */ jsxs(View, { style: styles.subRow, children: [
                 /* @__PURE__ */ jsx(Text, { style: styles.no, children: r.no }),
-                /* @__PURE__ */ jsx(Badge, { variant: s.tone, size: "sm", children: s.label }),
+                /* @__PURE__ */ jsx(Badge, { variant: tone === "status" ? s.tone : tone, size: "sm", children: s.label }),
                 /* @__PURE__ */ jsx(Text, { style: styles.due, children: dueWords(r.dueIn, labels) }),
                 /* @__PURE__ */ jsxs(View, { style: styles.methodRow, children: [
                   /* @__PURE__ */ jsx(
@@ -195,8 +229,9 @@ function ReceivablesCardList({
             {
               accessibilityRole: "button",
               accessibilityLabel: labels.actionsFor(actionsLabel, r.no),
+              disabled,
               onPress: () => setMenuFor(r.no),
-              style: styles.menuTrigger,
+              style: [styles.menuTrigger, disabled ? styles.menuDisabled : null],
               children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: theme.icon.md, color: theme.color.text2 })
             }
           ) : null
@@ -235,39 +270,39 @@ function ReceivablesCardList({
           // fighting over the same node, and react-native-web resolves it
           // by dropping the button — which leaves the row unpressable to
           // assistive tech and to a keyboard.
-          /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsxs(
-            Pressable,
+          // Refinement 12 (F39): each action is a ListRow on the
+          // one-line tier (iOS 44, Android 56) with a chevron.
+          /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
+            ListRow,
             {
-              accessibilityRole: "button",
+              platform,
               accessibilityLabel: a.label,
               accessibilityHint: a.danger ? labels.asksConfirm : void 0,
               onPress: () => a.danger ? setConfirming(a) : run(a.id),
-              style: ({ pressed }) => [
-                styles.actionRow,
-                pressed ? styles.actionRowPressed : null
-              ],
-              children: [
-                a.icon ? /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    name: a.icon,
-                    size: theme.icon.md,
-                    color: a.danger ? theme.color.danger : theme.color.text2
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, a.danger ? styles.actionLabelDanger : null], children: a.label }),
-                a.danger ? (
-                  // Destructive is said in shape too, not in red alone.
-                  /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      name: "alert-triangle",
-                      size: theme.icon.sm,
-                      color: theme.color.danger
-                    }
-                  ) })
-                ) : null
-              ]
+              leading: a.icon ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: a.icon,
+                  size: theme.icon.md,
+                  color: a.danger ? theme.color.danger : theme.color.text2
+                }
+              ) : void 0,
+              title: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [styles.actionLabel, a.danger ? styles.actionLabelDanger : null],
+                  children: a.label
+                }
+              ),
+              trailing: a.danger ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "alert-triangle",
+                  size: theme.icon.sm,
+                  color: theme.color.danger
+                }
+              ) : void 0,
+              chevron: !a.danger
             }
           ) }, a.id)
         )) })
@@ -294,8 +329,10 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space.s2
   },
+  // Refinement 12: the one reference style — mono 12 / 500, tabular, text-2.
   no: {
     fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.medium,
     fontVariant: ["tabular-nums"],
     fontSize: theme.type.caption1.fontSize,
     lineHeight: theme.type.caption1.lineHeight,
@@ -321,16 +358,9 @@ var sheet = createStyleSheet((theme) => ({
     alignItems: "center",
     justifyContent: "center"
   },
-  actionList: { gap: theme.space.s1 },
-  actionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    minHeight: theme.tapMin,
-    paddingHorizontal: theme.space.s3,
-    borderRadius: theme.radius.md
-  },
-  actionRowPressed: { backgroundColor: theme.state.pressed },
+  menuDisabled: { opacity: theme.state.disabledOpacity },
+  loadingRows: { alignSelf: "stretch", gap: theme.space.s2 },
+  actionList: {},
   actionLabel: {
     fontFamily: theme.font.sans,
     fontSize: theme.type.body.fontSize,
@@ -402,7 +432,18 @@ function AgingBucketCard({
   labels: labelsProp,
   style,
   motion = "full",
-  delay = 0
+  delay = 0,
+  roll = false,
+  loading = false,
+  delta,
+  deltaDirection,
+  invert = false,
+  size = "md",
+  variant = "soft",
+  elevation = "flat",
+  padding = "none",
+  align = "start",
+  error
 }) {
   const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const pay = usePayLabels(labelsProp);
@@ -410,7 +451,9 @@ function AgingBucketCard({
   const locale = localeProp ?? providerLocale;
   const theme = useLoamTheme("receivables");
   const { styles } = useStyles(sheet2);
-  const paint = tilePaint(theme, tone);
+  const paint = tilePaint(theme, error ? "danger" : tone);
+  const PAD = { none: 0, sm: theme.space.s2, md: theme.space.s4, lg: theme.space.s6 };
+  const ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
   const pct = Math.round(Math.min(1, Math.max(0, fill)) * 100);
   const level = useResolvedMotion(motion, "receivables");
   const grow = React.useRef(new Animated.Value(level === "full" ? 0 : pct)).current;
@@ -427,71 +470,93 @@ function AgingBucketCard({
     return () => run.stop();
   }, [pct, level]);
   const countText = countLabel ? `${count} ${countLabel}` : labels.invoiceCount(count);
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { style: [styles.bucketName, { color: paint.ink }], children: agingLabel({ bucket }, pay) }),
-    /* @__PURE__ */ jsx(
-      Amount,
-      {
-        minor,
-        currency,
-        size: "lg",
-        weight: "bold",
-        locale,
-        style: { color: paint.ink }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        "aria-hidden": true,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no-hide-descendants",
-        style: styles.rail,
-        children: /* @__PURE__ */ jsx(
-          Animated.View,
+  const name = agingLabel({ bucket }, pay);
+  const row = /* @__PURE__ */ jsx(
+    ListRow,
+    {
+      chevron: Boolean(onSelect),
+      onPress: onSelect,
+      accessibilityLabel: onSelect ? labels.bucketSummary(name, money(minor, currency, { locale }), countText) : void 0,
+      title: /* @__PURE__ */ jsxs(View, { style: [styles.titleRow, { justifyContent: ALIGN[align] }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.bucketName, { color: paint.ink }], children: name }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.count, { color: paint.ink }], children: countText })
+      ] }),
+      trailing: (
+        // The tile's own on-soft ink, which is the one measured to clear AA
+        // against this tint. `color.text` would be a second, unmeasured ink on a
+        // tinted ground.
+        /* @__PURE__ */ jsx(
+          Amount,
+          {
+            minor,
+            currency,
+            size,
+            weight: "bold",
+            locale,
+            style: { color: paint.ink },
+            loading,
+            roll,
+            motion
+          }
+        )
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      "aria-busy": loading || void 0,
+      accessibilityState: loading ? { busy: true } : void 0,
+      style: [
+        styles.tile,
+        {
+          borderColor: paint.edge,
+          backgroundColor: variant === "outline" ? "transparent" : paint.fill
+        },
+        padding !== "none" ? { padding: PAD[padding] } : null,
+        elevation === "raised" ? theme.shadow.md : null,
+        style
+      ],
+      children: [
+        row,
+        delta !== void 0 && delta !== "" && !loading ? /* @__PURE__ */ jsx(View, { style: [styles.delta, { alignSelf: ALIGN[align] }], children: /* @__PURE__ */ jsx(MetricDelta, { delta, deltaDirection, invert, size: "sm" }) }) : null,
+        error ? /* @__PURE__ */ jsx(
+          Text,
           {
-            style: [
-              styles.railFill,
+            role: "alert",
+            accessibilityRole: "alert",
+            style: [styles.count, styles.errorText, { color: paint.ink }],
+            children: error
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            "aria-hidden": true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: styles.rail,
+            children: /* @__PURE__ */ jsx(
+              Animated.View,
               {
-                width: grow.interpolate({
-                  inputRange: [0, 100],
-                  outputRange: ["0%", "100%"],
-                  extrapolate: "clamp"
-                }),
-                backgroundColor: paint.bar
+                style: [
+                  styles.railFill,
+                  {
+                    width: grow.interpolate({
+                      inputRange: [0, 100],
+                      outputRange: ["0%", "100%"],
+                      extrapolate: "clamp"
+                    }),
+                    backgroundColor: paint.bar
+                  }
+                ]
               }
-            ]
+            )
           }
         )
-      }
-    ),
-    /* @__PURE__ */ jsx(Text, { style: [styles.count, { color: paint.ink }], children: countText })
-  ] });
-  const tile = [
-    styles.tile,
-    { borderColor: paint.edge, backgroundColor: paint.fill },
-    style
-  ];
-  if (onSelect) {
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: labels.bucketSummary(
-          agingLabel({ bucket }, pay),
-          money(minor, currency, { locale }),
-          countText
-        ),
-        onPress: onSelect,
-        style: tile,
-        children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          body,
-          pressed ? /* @__PURE__ */ jsx(View, { style: styles.tilePressed, pointerEvents: "none" }) : null
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(View, { style: tile, children: body });
+      ]
+    }
+  );
 }
 function AgingSummary({
   buckets,
@@ -501,62 +566,97 @@ function AgingSummary({
   label,
   labels: labelsProp,
   style,
-  motion = "full"
+  motion = "full",
+  roll = false,
+  loading = false,
+  size = "md",
+  delta,
+  align = "start",
+  error
 }) {
   const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("receivables");
   const { styles } = useStyles(sheet2);
   const peak = buckets.reduce((m, b) => Math.max(m, Math.abs(b.minor)), 0);
-  return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label ?? labels.agingLabel, style: [styles.strip, style], children: buckets.map((b, i) => /* @__PURE__ */ jsx(
-    AgingBucketCard,
+  return /* @__PURE__ */ jsxs(
+    View,
     {
-      bucket: b.bucket.bucket,
-      minor: b.minor,
-      currency,
-      count: b.count,
-      tone: b.bucket.tone,
-      fill: peak === 0 ? 0 : Math.abs(b.minor) / peak,
-      locale,
-      motion,
-      labels: labelsProp,
-      delay: Math.min(i, 8) * 30,
-      onSelect: onSelectBucket ? () => onSelectBucket(b.bucket.bucket) : void 0
-    },
-    b.bucket.bucket
-  )) });
+      role: "group",
+      accessibilityLabel: label ?? labels.agingLabel,
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: [styles.strip, style],
+      children: [
+        loading ? buckets.map((b) => (
+          // Tile footprint: the one-line row tier, the rail and the tile padding.
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              variant: "rect",
+              height: theme.ctl.lg + theme.space[4] + theme.space.s3 + theme.space.s1,
+              radius: "md"
+            },
+            b.bucket.bucket
+          )
+        )) : buckets.map((b, i) => /* @__PURE__ */ jsx(
+          AgingBucketCard,
+          {
+            bucket: b.bucket.bucket,
+            minor: b.minor,
+            currency,
+            count: b.count,
+            tone: b.bucket.tone,
+            fill: peak === 0 ? 0 : Math.abs(b.minor) / peak,
+            locale,
+            motion,
+            roll,
+            size,
+            align,
+            ...delta?.[b.bucket.bucket] !== void 0 ? { delta: delta[b.bucket.bucket] } : {},
+            labels: labelsProp,
+            delay: Math.min(i, 8) * 30,
+            onSelect: onSelectBucket ? () => onSelectBucket(b.bucket.bucket) : void 0
+          },
+          b.bucket.bucket
+        )),
+        error ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            role: "alert",
+            accessibilityRole: "alert",
+            style: [styles.count, { color: theme.color.dangerOnSoft }],
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
 }
 var sheet2 = createStyleSheet((theme) => ({
   strip: { alignSelf: "stretch", gap: theme.space.s3 },
   tile: {
-    gap: theme.space.s2,
-    padding: theme.space.s3,
+    overflow: "hidden",
+    paddingBottom: theme.space.s3,
+    gap: theme.space.s1,
     borderRadius: theme.radius.md,
     borderWidth: theme.borderWidth.base
   },
-  tilePressed: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.state.pressed
-  },
+  delta: { alignSelf: "flex-start", paddingHorizontal: theme.space.s4 },
+  titleRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s2 },
   bucketName: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.caption2.fontSize,
-    lineHeight: theme.type.caption2.lineHeight,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase"
+    ...theme.type.overline,
+    fontFamily: theme.font.sans
   },
   // `Progress`'s own `sm` track height — see the module note.
   rail: {
     height: theme.space[4],
+    marginHorizontal: theme.space.s4,
     overflow: "hidden",
     borderRadius: theme.radius.full,
     backgroundColor: theme.color.surface3
   },
   railFill: { height: "100%", borderRadius: theme.radius.full },
+  errorText: { paddingHorizontal: theme.space.s4 },
   count: {
     fontFamily: theme.font.sans,
     fontVariant: ["tabular-nums"],
@@ -579,6 +679,13 @@ var RUNG_ICON = {
   danger: "alert-triangle",
   neutral: "lock"
 };
+var RUNG_BADGE = {
+  info: "info",
+  good: "good",
+  warn: "warn",
+  danger: "danger",
+  "text-3": "neutral"
+};
 function rungPaint(theme, tone) {
   switch (tone) {
     case "info":
@@ -619,6 +726,21 @@ function rungPaint(theme, tone) {
       };
   }
 }
+function LoadingRows({ label }) {
+  const theme = useLoamTheme("receivables");
+  const { styles } = useStyles(sheet3);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      role: "group",
+      "aria-busy": true,
+      accessibilityLabel: label,
+      accessibilityState: { busy: true },
+      style: styles.loadingRows,
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, radius: "md" }, i))
+    }
+  );
+}
 function DunningRung({
   day,
   attempt,
@@ -627,40 +749,90 @@ function DunningRung({
   current = false,
   dayLabel,
   labels: labelsProp,
-  style
+  style,
+  density = "comfortable",
+  selected = false,
+  disabled = false,
+  onPress,
+  loading = false,
+  error,
+  orientation = "vertical"
 }) {
   const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const theme = useLoamTheme("receivables");
   const { styles } = useStyles(sheet3);
-  const paint = rungPaint(theme, tone);
+  const paint = rungPaint(theme, error ? "danger" : tone);
   const currentAttr = current ? { "aria-current": "step" } : {};
-  return /* @__PURE__ */ jsxs(
+  const rungStyle = [
+    styles.rung,
+    density === "compact" ? styles.rungCompact : null,
+    orientation === "horizontal" ? styles.rungStacked : null,
+    current || selected ? styles.rungCurrent : null,
+    disabled ? styles.rungDisabled : null,
+    style
+  ];
+  const a11yState = { disabled, busy: loading, selected };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Badge, { variant: RUNG_BADGE[tone], size: "sm", style: styles.dayBadge, children: dayLabel ? `${dayLabel} ${day}` : labels.dayN(day) }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        style: [styles.dot, { backgroundColor: paint.dot }]
+      }
+    ),
+    loading ? /* @__PURE__ */ jsxs(View, { style: styles.rungBody, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space.s3, radius: "sm" }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space.s3, radius: "sm" })
+    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.rungBody, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.attempt, error ? { color: paint.ink } : null], children: attempt }),
+      /* @__PURE__ */ jsx(Text, { style: styles.surface, children: surface }),
+      error ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          role: "alert",
+          accessibilityRole: "alert",
+          style: [styles.surface, { color: paint.ink }],
+          children: error
+        }
+      ) : null
+    ] }),
+    current && !loading ? (
+      // The third marker. Never colour alone.
+      /* @__PURE__ */ jsx(Text, { style: styles.now, children: labels.now })
+    ) : null
+  ] });
+  return onPress ? /* @__PURE__ */ jsx(
     View,
     {
       role: "listitem",
       ...currentAttr,
+      "aria-busy": loading || void 0,
       testID: `dunning-rung-${day}${current ? "-current" : ""}`,
-      style: [styles.rung, current ? styles.rungCurrent : null, style],
-      children: [
-        /* @__PURE__ */ jsx(View, { style: [styles.dayBadge, { borderColor: paint.edge, backgroundColor: paint.fill }], children: /* @__PURE__ */ jsx(Text, { style: [styles.dayLabel, { color: paint.ink }], children: dayLabel ? `${dayLabel} ${day}` : labels.dayN(day) }) }),
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            "aria-hidden": true,
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            style: [styles.dot, { backgroundColor: paint.dot }]
-          }
-        ),
-        /* @__PURE__ */ jsxs(View, { style: styles.rungBody, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.attempt, children: attempt }),
-          /* @__PURE__ */ jsx(Text, { style: styles.surface, children: surface })
-        ] }),
-        current ? (
-          // The third marker. Never colour alone.
-          /* @__PURE__ */ jsx(Text, { style: styles.now, children: labels.now })
-        ) : null
-      ]
+      children: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: a11yState,
+          disabled: disabled || loading,
+          onPress,
+          style: rungStyle,
+          children: content
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    View,
+    {
+      role: "listitem",
+      ...currentAttr,
+      accessibilityState: a11yState,
+      "aria-busy": loading || void 0,
+      testID: `dunning-rung-${day}${current ? "-current" : ""}`,
+      style: rungStyle,
+      children: content
     }
   );
 }
@@ -672,7 +844,10 @@ function DunningTimeline({
   density = "comfortable",
   label,
   labels: labelsProp,
-  style
+  style,
+  loading = false,
+  error,
+  orientation = "vertical"
 }) {
   const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const pay = usePayLabels(labelsProp);
@@ -697,6 +872,22 @@ function DunningTimeline({
       testID: `dunning-rung-${s.day}${current ? "-current" : ""}`
     };
   });
+  if (error) return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error });
+  if (loading) return /* @__PURE__ */ jsx(LoadingRows, { label: label ?? labels.retrySchedule });
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label ?? labels.retrySchedule, style, children: /* @__PURE__ */ jsx(
+      StageTimeline,
+      {
+        orientation: "horizontal",
+        stages: items.map((it) => ({
+          id: it.id,
+          label: it.title,
+          detail: it.time,
+          state: it.current ? "working" : "pending"
+        }))
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsx(Timeline, { items, density, label: label ?? labels.retrySchedule, style });
 }
 function reminderTitle(day, labels = DEFAULT_LABELS) {
@@ -708,8 +899,11 @@ function ReminderTimeline({
   currentDay,
   titles = {},
   density = "comfortable",
+  orientation = "vertical",
   label,
-  labels: labelsProp
+  labels: labelsProp,
+  loading = false,
+  error
 }) {
   const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const items = days.map((d) => {
@@ -726,6 +920,22 @@ function ReminderTimeline({
       icon: sent ? "check" : isCurrent ? "mail" : "clock"
     };
   });
+  if (error) return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error });
+  if (loading) return /* @__PURE__ */ jsx(LoadingRows, { label: label ?? labels.reminderSchedule });
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label ?? labels.reminderSchedule, children: /* @__PURE__ */ jsx(
+      StageTimeline,
+      {
+        orientation: "horizontal",
+        stages: items.map((it) => ({
+          id: it.id,
+          label: it.title,
+          detail: it.time,
+          state: it.state ?? "pending"
+        }))
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsx(Timeline, { items, density, label: label ?? labels.reminderSchedule });
 }
 function overdueTone(daysLate) {
@@ -746,22 +956,47 @@ function OverdueNotice({
   action,
   dismissible,
   onDismiss,
+  loading = false,
+  error,
   locale: localeProp,
+  roll = false,
   labels: labelsProp,
-  style
+  style,
+  variant,
+  size,
+  icon,
+  motion
 }) {
   const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const providerLocale = useLoamLocale();
   const locale = localeProp ?? providerLocale;
   const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("receivables");
   const resolved = tone ?? overdueTone(daysLate);
   const late = daysLate > 0;
-  return /* @__PURE__ */ jsxs(View, { style: [styles.overdue, style], children: [
-    /* @__PURE__ */ jsx(Amount, { minor, currency, size: "hero", weight: "bold", locale }),
+  if (error)
+    return /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error, variant, size, motion });
+  return /* @__PURE__ */ jsxs(View, { "aria-busy": loading || void 0, style: [styles.overdue, style], children: [
     /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor,
+        currency,
+        size: "hero",
+        weight: "bold",
+        locale,
+        loading,
+        roll
+      }
+    ),
+    loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, radius: "md" }) : /* @__PURE__ */ jsx(
       Alert,
       {
         tone: resolved,
+        variant,
+        size,
+        icon,
+        motion,
         dismissible,
         onDismiss,
         action,
@@ -779,30 +1014,13 @@ var sheet3 = createStyleSheet((theme) => ({
     padding: theme.space.s3,
     borderRadius: theme.radius.md
   },
-  rungCurrent: {
-    // The soft tint always carries its tone edge.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent,
-    backgroundColor: theme.color.accentSoft
-  },
-  dayBadge: {
-    alignItems: "center",
-    justifyContent: "center",
-    minWidth: theme.space[56],
-    paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space[2],
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base
-  },
-  dayLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontVariant: ["tabular-nums"],
-    fontSize: theme.fontSize[11],
-    lineHeight: theme.type.caption2.lineHeight,
-    letterSpacing: theme.tracking.wide,
-    textTransform: "uppercase"
-  },
+  // Refinement 12: the selected-row fill, not accent-soft (no edge, ink unchanged).
+  rungCurrent: { backgroundColor: theme.state.selected },
+  rungCompact: { padding: theme.space.s2 },
+  rungStacked: { flexDirection: "column" },
+  rungDisabled: { opacity: theme.state.disabledOpacity },
+  loadingRows: { alignSelf: "stretch", gap: theme.space.s2 },
+  dayBadge: { minWidth: theme.space[56] },
   dot: {
     width: theme.space.s2,
     height: theme.space.s2,
@@ -824,12 +1042,8 @@ var sheet3 = createStyleSheet((theme) => ({
     color: theme.color.text2
   },
   now: {
+    ...theme.type.overline,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[11],
-    lineHeight: theme.type.caption2.lineHeight,
-    letterSpacing: theme.tracking.wide,
-    textTransform: "uppercase",
     color: theme.color.accentStrong
   },
   overdue: { alignSelf: "stretch", gap: theme.space.s2 }