@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-35OFI3JG.js → chunk-Y3XKKO5K.js}

@@ -1,11 +1,87 @@
-import { Thinking } from './chunk-XXXEFXY5.js';
-import { Spinner } from './chunk-O7AE6DAF.js';
-import { Icon } from './chunk-TKVFVF5D.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-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { StyleSheet, View, Text, Pressable } 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" },
@@ -13,8 +89,19 @@ var SYSTEM_STATE_META = {
   maintenance: { tone: "warn", icon: "wrench", code: "Soon" },
   offline: { tone: "info", icon: "wifi-off", code: "Offline" }
 };
+var DEFAULT_LABELS = {
+  copyErrorId: (id) => `Copy error id ${id}`,
+  soon: "Soon",
+  offline: "Offline"
+};
+var TONE_TILE = {
+  muted: "neutral",
+  danger: "danger",
+  warn: "warn",
+  info: "info"
+};
 function useTone(tone) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("system-state");
   switch (tone) {
     case "danger":
       return theme.color.dangerOnSoft;
@@ -37,59 +124,74 @@ function SystemState({
   secondaryLabel,
   onSecondary,
   errorId,
-  onCopyErrorId
+  onCopyErrorId,
+  layout = "fullScreen",
+  platform,
+  tone: toneProp,
+  size,
+  iconShape,
+  labels: labelsProp
 }) {
+  const labels = useLabels("systemState", DEFAULT_LABELS, labelsProp);
   const meta = SYSTEM_STATE_META[variant];
-  const { styles } = useStyles(sheet, { tone: meta.tone });
-  const theme = useLoamTheme();
-  const tone = useTone(meta.tone);
+  const variantCode = variant === "maintenance" ? labels.soon : variant === "offline" ? labels.offline : meta.code;
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("system-state");
+  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 ?? meta.code }),
-      /* @__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: `Copy error id ${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) => ({
@@ -106,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"
   },
@@ -156,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
@@ -169,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) {
@@ -244,36 +305,93 @@ function useLate(active, after) {
   }, [active, after]);
   return late;
 }
+var AREA_DEFAULT_LABELS = {
+  loading: "Loading",
+  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."
+};
 function AreaState({
   state = "idle",
   children,
-  minHeight = 160,
+  minHeight: minHeightProp,
   loadingContent,
-  loadingLabel = "Loading",
-  lateLabel = "Still working\u2026",
+  loadingLabel: loadingLabelProp,
+  lateLabel: lateLabelProp,
   loadingFloor,
   lateAfter,
   empty,
   error,
-  errorTitle = "Couldn\u2019t load this",
+  errorTitle: errorTitleProp,
   errorDescription,
-  retryLabel = "Try again",
+  retryLabel: retryLabelProp,
   onRetry,
+  autoRetry = false,
   staleLabel,
-  refreshLabel = "Refresh",
+  refreshLabel: refreshLabelProp,
   onRefresh,
   refreshing = false,
   idle,
-  motion = "full"
+  motion = "full",
+  tone: toneProp,
+  icon: iconProp,
+  size,
+  variant = "plain",
+  label,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("system-state");
+  const labels = useLabels("areaState", AREA_DEFAULT_LABELS, labelsProp);
+  const loadingLabel = loadingLabelProp ?? labels.loading;
+  const lateLabel = lateLabelProp ?? labels.late;
+  const errorTitle = errorTitleProp ?? labels.errorTitle;
+  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";
   const showLoading = useLoadingFloor(isLoading, floor);
   const late = useLate(isLoading, lateMs);
   const busy = isLoading || showLoading;
+  const level = useResolvedMotion(motion, "system-state");
+  const phase = showLoading ? "loading" : state === "stale" ? "ready" : state;
+  const shownPhase = React.useRef(phase);
+  const through = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (shownPhase.current === phase) return;
+    shownPhase.current = phase;
+    if (level === "none") return;
+    through.setValue(0);
+    Animated.spring(through, {
+      ...springConfig(theme, "de"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [phase, level, through, theme]);
+  const throughStyle = {
+    opacity: through,
+    transform: level === "full" ? [
+      {
+        scale: through.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1 - MOTION_MOVE.scaleIn, 1]
+        })
+      }
+    ] : []
+  };
   const loadingView = /* @__PURE__ */ jsxs(View, { style: styles.center, children: [
     loadingContent ?? /* @__PURE__ */ jsx(Spinner, { size: "lg", accessibilityLabel: loadingLabel, motion }),
     late ? (
@@ -284,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) {
@@ -310,7 +436,7 @@ function AreaState({
         body = /* @__PURE__ */ jsx(View, { style: styles.fill });
         break;
       case "empty":
-        body = empty ?? /* @__PURE__ */ jsx(View, { style: styles.center, children: /* @__PURE__ */ jsx(Text, { style: styles.errorBody, children: "Nothing here yet." }) });
+        body = empty ?? /* @__PURE__ */ jsx(View, { style: styles.center, children: /* @__PURE__ */ jsx(Text, { style: styles.errorBody, children: labels.empty }) });
         break;
       case "error":
         body = errorView;
@@ -333,13 +459,13 @@ function AreaState({
               Pressable,
               {
                 accessibilityRole: "button",
-                accessibilityLabel: refreshing ? `${refreshLabel}\u2026` : refreshLabel,
+                accessibilityLabel: refreshing ? labels.refreshing(refreshLabel) : refreshLabel,
                 accessibilityState: { busy: refreshing, disabled: refreshing },
                 disabled: refreshing,
                 onPress: refreshing ? void 0 : onRefresh,
                 style: ({ pressed }) => [styles.refresh, pressed && styles.pressed],
                 children: [
-                  refreshing ? /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: `${refreshLabel}\u2026` }) : /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.xs, color: theme.color.text }),
+                  refreshing ? /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: labels.refreshing(refreshLabel) }) : /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.xs, color: theme.color.text }),
                   /* @__PURE__ */ jsx(Text, { style: styles.refreshLabel, children: refreshLabel })
                 ]
               }
@@ -359,12 +485,18 @@ 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 },
       ...{ "aria-live": "polite" },
-      children: body
+      children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.fill, throughStyle], children: body })
     }
   );
 }
@@ -374,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,
@@ -435,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,