@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-MKSNFG7H.js → chunk-Y3XKKO5K.js}

@@ -1,14 +1,87 @@
-import { Thinking } from './chunk-W74TXYFB.js';
-import { Spinner } from './chunk-KQZ3GLHR.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Thinking } from './chunk-LUZFCCSD.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { stateLayout } from './chunk-TH4PW2WU.js';
 import { useLabels } 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 { StyleSheet, View, Text, Pressable, Animated } from 'react-native';
+import { StyleSheet, View, Text, Pressable, Animated, AppState } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { MOTION_MOVE } from '@btndprojects/loam-tokens';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+function backoffDelay(n, base = 5e3, factor = 2, max = 6e4) {
+  return Math.min(max, base * factor ** n);
+}
+function useAutoRetry({
+  active,
+  onRetry,
+  baseDelay = 5e3,
+  maxDelay = 6e4,
+  factor = 2,
+  maxAttempts = Infinity,
+  retryOnForeground = true
+}) {
+  const [attempt, setAttempt] = React.useState(0);
+  const [dueAt, setDueAt] = React.useState(null);
+  const [now, setNow] = React.useState(() => Date.now());
+  const [retrying, setRetrying] = React.useState(false);
+  const cb = React.useRef(onRetry);
+  cb.current = onRetry;
+  const run = React.useCallback(() => {
+    setDueAt(null);
+    setRetrying(true);
+    let result;
+    try {
+      result = cb.current();
+    } catch {
+      result = void 0;
+    }
+    const done = () => {
+      setRetrying(false);
+      setAttempt((a) => a + 1);
+    };
+    if (result && typeof result.then === "function") {
+      result.then(done, done);
+    } else {
+      done();
+    }
+  }, []);
+  React.useEffect(() => {
+    if (active) return;
+    setAttempt(0);
+    setDueAt(null);
+    setRetrying(false);
+  }, [active]);
+  React.useEffect(() => {
+    if (!active || retrying || attempt >= maxAttempts) return void 0;
+    const wait = backoffDelay(attempt, baseDelay, factor, maxDelay);
+    const due = Date.now() + wait;
+    setDueAt(due);
+    setNow(Date.now());
+    const fire = setTimeout(run, wait);
+    const tick = setInterval(() => setNow(Date.now()), 1e3);
+    return () => {
+      clearTimeout(fire);
+      clearInterval(tick);
+    };
+  }, [active, retrying, attempt, maxAttempts, baseDelay, factor, maxDelay, run]);
+  React.useEffect(() => {
+    if (!active || !retryOnForeground) return void 0;
+    const sub = AppState.addEventListener("change", (next) => {
+      if (next === "active") run();
+    });
+    return () => sub.remove();
+  }, [active, retryOnForeground, run]);
+  return {
+    secondsLeft: active && dueAt !== null ? Math.max(0, Math.ceil((dueAt - now) / 1e3)) : null,
+    attempt,
+    retrying,
+    retryNow: run
+  };
+}
 var SYSTEM_STATE_META = {
   "404": { tone: "muted", icon: "search", code: "404" },
   "403": { tone: "warn", icon: "lock", code: "403" },
@@ -21,6 +94,12 @@ var DEFAULT_LABELS = {
   soon: "Soon",
   offline: "Offline"
 };
+var TONE_TILE = {
+  muted: "neutral",
+  danger: "danger",
+  warn: "warn",
+  info: "info"
+};
 function useTone(tone) {
   const theme = useLoamTheme("system-state");
   switch (tone) {
@@ -46,61 +125,73 @@ function SystemState({
   onSecondary,
   errorId,
   onCopyErrorId,
+  layout = "fullScreen",
+  platform,
+  tone: toneProp,
+  size,
+  iconShape,
   labels: labelsProp
 }) {
   const labels = useLabels("systemState", DEFAULT_LABELS, labelsProp);
   const meta = SYSTEM_STATE_META[variant];
   const variantCode = variant === "maintenance" ? labels.soon : variant === "offline" ? labels.offline : meta.code;
-  const { styles } = useStyles(sheet, { tone: meta.tone });
+  const { styles } = useStyles(sheet);
   const theme = useLoamTheme("system-state");
-  const tone = useTone(meta.tone);
+  const resolvedTone = toneProp ?? meta.tone;
+  const tone = useTone(resolvedTone);
+  const geo = stateLayout(theme, layout, platform);
+  const full = layout === "fullScreen";
+  const chipHit = Math.max(0, Math.round((theme.tapMin - theme.ctl.sm) / 2));
   if (process.env.NODE_ENV !== "production" && !primaryLabel && !secondaryLabel) {
     console.warn(
       `[loam] <SystemState variant="${variant}"> has no action. Every system state must offer a route back to a working screen.`
     );
   }
-  return /* @__PURE__ */ jsxs(View, { style: styles.base, accessibilityRole: "alert", children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: icon ?? meta.icon, size: theme.icon.xl, color: tone }) }),
-      /* @__PURE__ */ jsx(Text, { style: [styles.code, { color: tone }], children: code ?? variantCode }),
-      /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
-      description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
-      errorId ? /* @__PURE__ */ jsxs(
-        Pressable,
+  return /* @__PURE__ */ jsxs(View, { style: full ? styles.base : styles.inline, accessibilityRole: "alert", children: [
+    /* @__PURE__ */ jsxs(View, { style: full ? styles.body : styles.inlineBody, children: [
+      /* @__PURE__ */ jsx(
+        IconTile,
         {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.copyErrorId(errorId),
-          onPress: onCopyErrorId ? () => onCopyErrorId(errorId) : void 0,
-          style: ({ pressed }) => [styles.errorChip, pressed && styles.pressed],
-          children: [
-            /* @__PURE__ */ jsx(Icon, { name: "copy", size: theme.icon.xs, color: theme.color.text2 }),
-            /* @__PURE__ */ jsx(Text, { style: styles.errorId, children: errorId })
-          ]
+          icon: icon ?? meta.icon,
+          tone: TONE_TILE[resolvedTone],
+          size: size ?? geo.tile,
+          shape: iconShape
         }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: [styles.code, { color: tone }], children: code ?? variantCode }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.title, geo.title], children: title }),
+      description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+      errorId ? (
+        // Final 03: the error code is an sm-tier chip — 30 high, r 8, px 10, mono.
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.copyErrorId(errorId),
+            onPress: onCopyErrorId ? () => onCopyErrorId(errorId) : void 0,
+            hitSlop: chipHit,
+            style: ({ pressed }) => [styles.errorChip, pressed && styles.pressed],
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "copy", size: theme.icon.xs, color: theme.color.text2 }),
+              /* @__PURE__ */ jsx(Text, { style: styles.errorId, children: errorId })
+            ]
+          }
+        )
       ) : null
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
-      primaryLabel ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: primaryLabel,
-          onPress: onPrimary,
-          style: ({ pressed }) => [styles.primary, pressed && styles.pressed],
-          children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: primaryLabel })
-        }
-      ) : null,
+    primaryLabel || secondaryLabel ? /* @__PURE__ */ jsxs(View, { style: full ? styles.actions : styles.inlineActions, children: [
+      primaryLabel ? /* @__PURE__ */ jsx(Button, { size: geo.button, onPress: onPrimary, accessibilityLabel: primaryLabel, children: primaryLabel }) : null,
       secondaryLabel ? /* @__PURE__ */ jsx(
-        Pressable,
+        Button,
         {
-          accessibilityRole: "button",
-          accessibilityLabel: secondaryLabel,
+          variant: "ghost",
+          size: geo.button,
           onPress: onSecondary,
-          style: ({ pressed }) => [styles.secondary, pressed && styles.pressed],
-          children: /* @__PURE__ */ jsx(Text, { style: styles.secondaryLabel, children: secondaryLabel })
+          accessibilityLabel: secondaryLabel,
+          children: secondaryLabel
         }
       ) : null
-    ] })
+    ] }) : null
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
@@ -117,42 +208,32 @@ var sheet = createStyleSheet((theme) => ({
     justifyContent: "center",
     gap: theme.space.s3
   },
-  // The tone tile: a soft tint plus an `edge` outline. At normal contrast the
-  // edge is transparent; under high contrast the tint collapses to the surface
-  // and the outline is what carries the meaning.
-  tile: {
-    width: theme.space.s8 + theme.space.s3,
-    height: theme.space.s8 + theme.space.s3,
-    borderRadius: theme.radius.full,
+  // Inline: the empty-state rhythm — gap 12, padding 40 / 32, min-h 240.
+  inline: {
     alignItems: "center",
     justifyContent: "center",
-    borderWidth: theme.borderWidth.base,
-    variants: {
-      tone: {
-        muted: { backgroundColor: theme.color.surface2, borderColor: theme.edge.neutral },
-        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
-        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
-        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info }
-      }
-    }
+    gap: theme.space.s3,
+    minHeight: theme.space[120] * 2,
+    paddingVertical: theme.space[40],
+    paddingHorizontal: theme.space[32]
+  },
+  inlineBody: { alignItems: "center", gap: theme.space.s3 },
+  inlineActions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    marginTop: theme.space.s2
   },
   code: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    lineHeight: theme.type.caption2.lineHeight,
+    ...theme.type.overline,
+    fontFamily: theme.font.mono
     // `tracking` steps are `em` multiples, so they have to be multiplied by the
     // size — the previous literal was the same value written out by hand.
-    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
-    textTransform: "uppercase"
   },
-  // `type.title2`, not a hand-written 24/1.15: 24 is not a step on either ramp
-  // and the ratio was a raw multiplier rather than a `lineHeight` token.
+  // Size, line height and weight come from `stateLayout` (the OS ramp, R14).
   title: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.type.title2.fontSize,
-    lineHeight: theme.type.title2.lineHeight,
-    letterSpacing: theme.type.title2.letterSpacing,
+    fontFamily: theme.font.sans,
     color: theme.color.text,
     textAlign: "center"
   },
@@ -167,9 +248,9 @@ var sheet = createStyleSheet((theme) => ({
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s2,
-    minHeight: theme.tapMin,
-    paddingHorizontal: theme.space.s3,
-    borderRadius: theme.radius.md,
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.radius.sm,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border,
     backgroundColor: theme.color.surface2
@@ -180,38 +261,7 @@ var sheet = createStyleSheet((theme) => ({
     lineHeight: theme.type.footnote.lineHeight,
     color: theme.color.text2
   },
-  actions: { gap: theme.space.s3 },
-  primary: {
-    minHeight: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.accent,
-    paddingHorizontal: theme.space.s4
-  },
-  primaryLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    color: theme.color.accentInk
-  },
-  secondary: {
-    minHeight: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.strong,
-    borderColor: theme.color.borderStrong,
-    paddingHorizontal: theme.space.s4
-  },
-  secondaryLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    color: theme.color.text
-  },
+  actions: { gap: theme.space.s2 },
   pressed: { opacity: theme.state.pressedOpacity }
 }));
 function useLoadingFloor(active, floor) {
@@ -260,6 +310,8 @@ var AREA_DEFAULT_LABELS = {
   late: "Still working\u2026",
   errorTitle: "Couldn\u2019t load this",
   retry: "Try again",
+  retryNow: "Retry now",
+  retryingIn: (seconds) => `Retrying in ${seconds}s`,
   refresh: "Refresh",
   refreshing: (refresh) => `${refresh}\u2026`,
   empty: "Nothing here yet."
@@ -267,7 +319,7 @@ var AREA_DEFAULT_LABELS = {
 function AreaState({
   state = "idle",
   children,
-  minHeight = 160,
+  minHeight: minHeightProp,
   loadingContent,
   loadingLabel: loadingLabelProp,
   lateLabel: lateLabelProp,
@@ -279,12 +331,18 @@ function AreaState({
   errorDescription,
   retryLabel: retryLabelProp,
   onRetry,
+  autoRetry = false,
   staleLabel,
   refreshLabel: refreshLabelProp,
   onRefresh,
   refreshing = false,
   idle,
   motion = "full",
+  tone: toneProp,
+  icon: iconProp,
+  size,
+  variant = "plain",
+  label,
   labels: labelsProp
 }) {
   const theme = useLoamTheme("system-state");
@@ -295,6 +353,13 @@ function AreaState({
   const retryLabel = retryLabelProp ?? labels.retry;
   const refreshLabel = refreshLabelProp ?? labels.refresh;
   const { styles } = useStyles(areaSheet);
+  const minHeight = minHeightProp ?? (size === "sm" ? theme.space[120] : size === "lg" ? theme.space[120] * 2 : 160);
+  const customTile = toneProp !== void 0 || iconProp !== void 0 || size !== void 0;
+  const retry = useAutoRetry({
+    active: autoRetry && state === "error" && Boolean(onRetry),
+    onRetry: onRetry ?? (() => {
+    })
+  });
   const floor = loadingFloor ?? theme.timing.loadingFloor;
   const lateMs = lateAfter ?? theme.timing.lateAfter;
   const isLoading = state === "loading";
@@ -337,22 +402,30 @@ function AreaState({
     ) : null
   ] });
   const errorView = error ?? /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: styles.center, children: [
-    /* @__PURE__ */ jsx(View, { style: styles.errorTile, children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.lg, color: theme.color.dangerOnSoft }) }),
+    customTile ? /* @__PURE__ */ jsx(
+      IconTile,
+      {
+        icon: iconProp ?? "alert-triangle",
+        tone: TONE_TILE[toneProp ?? "danger"],
+        size: size === "sm" ? "md" : size === "lg" ? "xl" : "lg"
+      }
+    ) : /* @__PURE__ */ jsx(View, { style: styles.errorTile, children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.lg, color: theme.color.dangerOnSoft }) }),
     /* @__PURE__ */ jsx(Text, { style: styles.errorTitle, children: errorTitle }),
     errorDescription ? /* @__PURE__ */ jsx(Text, { style: styles.errorBody, children: errorDescription }) : null,
     onRetry ? /* @__PURE__ */ jsxs(
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: retryLabel,
-        onPress: onRetry,
+        accessibilityLabel: autoRetry ? labels.retryNow : retryLabel,
+        onPress: autoRetry ? retry.retryNow : () => void onRetry(),
         style: ({ pressed }) => [styles.retry, pressed && styles.pressed],
         children: [
           /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.sm, color: theme.color.accentInk }),
-          /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: retryLabel })
+          /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: autoRetry ? labels.retryNow : retryLabel })
         ]
       }
-    ) : null
+    ) : null,
+    autoRetry && onRetry && retry.secondsLeft !== null ? /* @__PURE__ */ jsx(Text, { style: [styles.errorBody, styles.retryCountdown], children: labels.retryingIn(retry.secondsLeft) }) : null
   ] });
   let body;
   if (showLoading) {
@@ -412,7 +485,13 @@ function AreaState({
   return /* @__PURE__ */ jsx(
     View,
     {
-      style: [styles.base, { minHeight }],
+      style: [
+        styles.base,
+        variant === "outline" && styles.outline,
+        variant === "filled" && styles.filled,
+        { minHeight }
+      ],
+      accessibilityLabel: label,
       accessibilityLiveRegion: "polite",
       "aria-busy": busy,
       accessibilityState: { busy },
@@ -427,6 +506,8 @@ var areaSheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface,
     borderRadius: theme.radius.lg
   },
+  outline: { borderWidth: theme.borderWidth.base, borderColor: theme.color.border },
+  filled: { backgroundColor: theme.color.surface2 },
   fill: { flex: 1 },
   center: {
     flex: 1,
@@ -488,6 +569,7 @@ var areaSheet = createStyleSheet((theme) => ({
     borderRadius: theme.radius.md,
     backgroundColor: theme.color.accent
   },
+  retryCountdown: { fontVariant: ["tabular-nums"], color: theme.color.text3 },
   retryLabel: {
     fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.bold,