@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-QWCMU5B2.js → chunk-ZTXMK2G7.js}

@@ -1,12 +1,16 @@
-import { Textarea } from './chunk-BTTFCMKG.js';
-import { KeyboardSpacer } from './chunk-HPPW424V.js';
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { KeyboardSpacer } from './chunk-LXJCP4PL.js';
+import { Textarea } from './chunk-RIK6UX2K.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { SkeletonText } from './chunk-YJ5PXOX3.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import { iconNameOr } from '@btndprojects/loam-icons';
-import * as React from 'react';
-import { View, Text, Pressable, ScrollView } from 'react-native';
+import * as React4 from 'react';
+import { View, Text, Animated, Easing, Pressable, ScrollView } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { nodeType, SEVERITIES, rule, RUN_STATES, flowStepWalk, nodeCount, runStateFor } from '@btndprojects/loam-workflow';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -31,6 +35,85 @@ var FLOW_TONE_BADGE = {
   good: "good",
   "text-3": "neutral"
 };
+
+// src/flow-run/flow-run-labels.ts
+var FLOW_RUN_LABELS = {
+  failedAt: (name) => `Failed at ${name}.`,
+  failedBody: "The error edge is the one that fired, and the run continued along it \u2014 which is why the error path belongs in the graph rather than in node config.",
+  runLog: "Run log",
+  runLogEmpty: "Press Run. The canvas shows state; this pane shows time.",
+  duration: (ms) => `${ms}ms`,
+  stepLabel: (n, name, state, ms) => `Step ${n}: ${name}, ${state}, ${ms} milliseconds`,
+  failed: "failed",
+  running: "running",
+  succeeded: "succeeded",
+  stepList: "Flow steps",
+  preset: "Flow",
+  flowTitle: (preset) => `${preset} flow`,
+  stepCount: (count) => `${count} steps \xB7 read-only on a phone`,
+  run: "Run",
+  replay: "Replay",
+  openMap: "Open the map",
+  phoneNote: "Approving a run on a phone: yes. Rewiring sixteen nodes on a phone: no.",
+  stepName: (type, label, f) => `${type}: ${label}` + (f.decide ? " \u2014 waiting on you, tap to approve" : "") + (f.repeat ? " \u2014 repeats" : "") + (f.orphan ? " \u2014 not reachable from the trigger" : ""),
+  tapToDecide: "Tap to decide",
+  notReachable: "Not reachable",
+  note: "Note",
+  validation: "Validation",
+  decideApproval: "Decide this approval",
+  noteLabel: "Note (optional)",
+  configuration: "Configuration",
+  waitingOnYou: "Waiting on you",
+  reject: "Reject",
+  approve: "Approve"
+};
+function useFlowRunLabels(own) {
+  return useLabels("flowRun", FLOW_RUN_LABELS, own);
+}
+var DEFAULT_LABELS = {
+  nodeTypes: {},
+  severities: {},
+  rules: {},
+  issues: {},
+  runStates: {},
+  edgeKinds: {},
+  lanes: {},
+  routes: {}
+};
+function flowVocabulary(labels) {
+  return {
+    nodeLabel: (def) => labels.nodeTypes[def.id]?.label ?? def.label,
+    nodeBlurb: (def) => labels.nodeTypes[def.id]?.blurb ?? def.blurb,
+    configNote: (def, key, fallback) => labels.nodeTypes[def.id]?.config?.[key] ?? fallback,
+    portLabel: (def, portId, fallback) => labels.nodeTypes[def.id]?.ports?.[portId] ?? fallback,
+    severity: (sev, fallback) => labels.severities[sev] ?? fallback,
+    ruleWhy: (ruleId, fallback) => labels.rules[ruleId]?.why ?? fallback,
+    issue: (issue) => {
+      const fn = issue.code ? labels.issues[issue.code] : void 0;
+      return fn ? fn(issue.params ?? {}) : issue.msg;
+    },
+    runState: (state, fallback) => labels.runStates[state] ?? fallback,
+    edgeKind: (kind, fallback) => labels.edgeKinds[kind]?.label ?? fallback,
+    edgeKindBlurb: (kind, fallback) => labels.edgeKinds[kind]?.blurb ?? fallback,
+    laneLabel: (lane) => labels.lanes[lane.id]?.label ?? lane.label,
+    laneNote: (lane) => labels.lanes[lane.id]?.note ?? lane.note,
+    route: (style, fallback) => labels.routes[style] ?? fallback
+  };
+}
+function useFlowVocabulary(own) {
+  const labels = useLabels("flowVocabulary", DEFAULT_LABELS, own);
+  return React4.useMemo(() => flowVocabulary(labels), [labels]);
+}
+
+// src/flow-run/flow-run-sheet.ts
+var FLOW_SHEET_DETENTS = {
+  sm: ["peek", "half"],
+  md: ["half", "full"],
+  lg: ["full"]
+};
+function flowSheetDetents(detents, size) {
+  return detents ?? FLOW_SHEET_DETENTS[size ?? "md"];
+}
 function FlowApprovalSheet({
   node,
   type,
@@ -38,33 +121,51 @@ function FlowApprovalSheet({
   layout = "sheet",
   open = false,
   onOpenChange,
-  detents = ["half", "full"],
+  detents: detentsProp,
+  size,
+  side,
+  presentation,
+  readOnly = false,
   noteField = false,
-  noteLabel = "Note (optional)",
+  noteLabel: noteLabelProp,
   noteValue,
   onNoteChange,
   noteError,
   safeAreaBottom = 0,
-  rejectLabel = "Reject",
-  approveLabel = "Approve",
+  rejectLabel: rejectLabelProp,
+  approveLabel: approveLabelProp,
   motion = "full",
+  loading = false,
+  notice,
   onDecide,
   onIntent,
   style,
-  testID
+  testID,
+  surface,
+  labels: labelsProp,
+  vocabulary
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("flow-run");
   const { styles } = useStyles(sheetStyles);
   const def = type ?? nodeType(node.type);
-  const labelId = React.useId();
-  const errorId = React.useId();
-  const [internalNote, setInternalNote] = React.useState("");
+  const detents = flowSheetDetents(detentsProp, size);
+  const labels = useFlowRunLabels(labelsProp);
+  const v = useFlowVocabulary(vocabulary);
+  const noteLabel = noteLabelProp ?? labels.noteLabel;
+  const rejectLabel = rejectLabelProp ?? labels.reject;
+  const approveLabel = approveLabelProp ?? labels.approve;
+  const labelId = React4.useId();
+  const errorId = React4.useId();
+  const [internalNote, setInternalNote] = React4.useState("");
   const note = noteValue ?? internalNote;
   const setNote = (next) => {
     if (noteValue === void 0) setInternalNote(next);
     onNoteChange?.(next);
   };
+  const [chosen, setChosen] = React4.useState(null);
   const decide = (decision) => {
+    if (loading) return;
+    setChosen(decision);
     const trimmed = note.trim();
     onDecide?.(decision, trimmed || void 0);
     onIntent?.({
@@ -76,21 +177,13 @@ function FlowApprovalSheet({
     onOpenChange?.(false);
   };
   const body = /* @__PURE__ */ jsxs(View, { testID, style: [styles.body, style], children: [
-    layout === "inline" ? /* @__PURE__ */ jsx(
-      Text,
-      {
-        accessibilityRole: "header",
-        style: styles.title,
-        ...{ "aria-level": 2 },
-        children: context.title
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(Text, { style: styles.eyebrow, children: def.label }),
+    layout === "inline" ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, ...{ "aria-level": 2 }, children: context.title }) : null,
+    /* @__PURE__ */ jsx(Text, { style: styles.eyebrow, children: v.nodeLabel(def) }),
     /* @__PURE__ */ jsxs(Text, { style: styles.nodeLine, children: [
       node.label,
       node.detail ? ` \xB7 ${node.detail}` : ""
     ] }),
-    /* @__PURE__ */ jsx(Text, { style: styles.blurb, children: def.blurb }),
+    /* @__PURE__ */ jsx(Text, { style: styles.blurb, children: v.nodeBlurb(def) }),
     /* @__PURE__ */ jsx(View, { style: styles.context, children: typeof context.body === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.contextText, children: context.body }) : context.body }),
     /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
       /* @__PURE__ */ jsx(
@@ -99,15 +192,15 @@ function FlowApprovalSheet({
           accessibilityRole: "header",
           style: styles.eyebrow,
           ...{ "aria-level": 3 },
-          children: "Configuration"
+          children: labels.configuration
         }
       ),
       def.config.map(([key, description]) => /* @__PURE__ */ jsxs(View, { style: styles.configRow, children: [
         /* @__PURE__ */ jsx(Text, { style: styles.configKey, children: key }),
-        /* @__PURE__ */ jsx(Text, { style: styles.configValue, children: description })
+        /* @__PURE__ */ jsx(Text, { style: styles.configValue, children: v.configNote(def, key, description) })
       ] }, key))
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.waiting, children: [
+    notice ? /* @__PURE__ */ jsxs(View, { style: styles.waiting, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.waitingHead, children: [
         /* @__PURE__ */ jsx(
           Icon,
@@ -124,19 +217,22 @@ function FlowApprovalSheet({
             accessibilityRole: "header",
             style: styles.waitingEyebrow,
             ...{ "aria-level": 3 },
-            children: "Waiting on you"
+            children: labels.waitingOnYou
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Text, { style: styles.waitingBody, children: "Approve is recorded with your name, the time and what you were shown. Reject continues the run along the rejected edge." })
-    ] }),
+      typeof notice === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.waitingBody, children: notice }) : notice
+    ] }) : null,
     noteField ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
       /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.fieldLabel, children: noteLabel }),
       /* @__PURE__ */ jsx(
         Textarea,
         {
           rows: 2,
+          surface,
           value: note,
+          readOnly: readOnly || void 0,
+          editable: !readOnly,
           onChangeText: setNote,
           error: Boolean(noteError),
           "aria-labelledby": labelId,
@@ -146,7 +242,7 @@ function FlowApprovalSheet({
       noteError ? /* @__PURE__ */ jsx(Text, { nativeID: errorId, accessibilityLiveRegion: "polite", style: styles.fieldError, children: noteError }) : null,
       /* @__PURE__ */ jsx(KeyboardSpacer, {})
     ] }) : null,
-    /* @__PURE__ */ jsxs(View, { style: [styles.commit, { marginBottom: safeAreaBottom }], children: [
+    readOnly ? null : /* @__PURE__ */ jsxs(View, { style: [styles.commit, { marginBottom: safeAreaBottom }], children: [
       /* @__PURE__ */ jsx(View, { style: styles.rejectSlot, children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -155,6 +251,7 @@ function FlowApprovalSheet({
           fullWidth: true,
           leadingIcon: "x",
           accessibilityLabel: rejectLabel,
+          loading: loading && chosen === "rejected",
           onPress: () => decide("rejected"),
           children: rejectLabel
         }
@@ -167,6 +264,7 @@ function FlowApprovalSheet({
           fullWidth: true,
           leadingIcon: "check",
           accessibilityLabel: approveLabel,
+          loading: loading && chosen === "approved",
           onPress: () => decide("approved"),
           children: approveLabel
         }
@@ -180,6 +278,9 @@ function FlowApprovalSheet({
       open,
       title: context.title,
       detents,
+      initialDetent: detents.includes("full") ? "full" : void 0,
+      ...side ? { side } : null,
+      ...presentation ? { presentation } : null,
       motion,
       onOpenChange,
       children: body
@@ -193,8 +294,8 @@ var sheetStyles = createStyleSheet((theme) => ({
   title: {
     fontFamily: theme.font.display,
     fontWeight: theme.font.displayWeight,
-    fontSize: theme.type.title2.fontSize,
-    lineHeight: theme.type.title2.lineHeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
     color: theme.color.text
   },
   eyebrow: {
@@ -290,18 +391,13 @@ var sheetStyles = createStyleSheet((theme) => ({
     alignItems: "stretch",
     gap: theme.space.s2
   },
-  // Approve is the wider half: the decision the flow is waiting for, and the one
-  // an approver reaches for with a thumb. The `lg` control tier already clears
-  // the 44px touch minimum; `space[50]` is the spec's taller commit bar.
+  // Approve and Reject share the width (F53); the `lg` control tier (44) already
+  // clears the touch minimum.
   rejectSlot: {
-    flex: 1,
-    minHeight: theme.space[50]
+    flex: 1
   },
   approveSlot: {
-    flexGrow: 1.4,
-    flexShrink: 1,
-    flexBasis: 0,
-    minHeight: theme.space[50]
+    flex: 1
   }
 }));
 function FlowStepSheet({
@@ -311,22 +407,34 @@ function FlowStepSheet({
   issues = [],
   open,
   onOpenChange,
-  detents = ["half", "full"],
+  detents: detentsProp,
+  size,
+  side,
+  presentation,
+  readOnly = false,
+  loading = false,
   canApprove = false,
-  approveLabel = "Decide this approval",
+  approveLabel: approveLabelProp,
   onApprove,
   motion = "full",
   style,
-  testID
+  testID,
+  labels: labelsProp,
+  vocabulary
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("flow-run");
+  const labels = useFlowRunLabels(labelsProp);
+  const v = useFlowVocabulary(vocabulary);
+  const locale = useLoamLocale();
+  const approveLabel = approveLabelProp ?? labels.decideApproval;
   const def = type ?? (node ? nodeType(node.type) : null);
   const tone = def ? def.tone : "text-3";
   const { styles } = useStyles(sheetStyles2, { tone });
-  const mine = React.useMemo(
+  const mine = React4.useMemo(
     () => node ? issues.filter((i) => i.node === node.id).slice().sort((a, b) => SEVERITIES[a.sev].rank - SEVERITIES[b.sev].rank) : [],
     [issues, node]
   );
+  const detents = flowSheetDetents(detentsProp, size);
   const isOpen = open ?? node != null;
   const human = def?.kind === "human";
   const body = node && def ? /* @__PURE__ */ jsxs(View, { testID, style: [styles.body, style], children: [
@@ -340,7 +448,7 @@ function FlowStepSheet({
           strokeWidth: theme.icon.stroke
         }
       ) }),
-      /* @__PURE__ */ jsx(Text, { style: styles.eyebrow, children: def.label })
+      /* @__PURE__ */ jsx(Text, { style: styles.eyebrow, children: v.nodeLabel(def) })
     ] }),
     layout === "inline" ? /* @__PURE__ */ jsx(
       Text,
@@ -351,8 +459,8 @@ function FlowStepSheet({
         children: node.label
       }
     ) : null,
-    /* @__PURE__ */ jsx(Text, { style: styles.detail, children: node.detail || def.label.toLowerCase() }),
-    /* @__PURE__ */ jsx(Text, { style: styles.blurb, children: def.blurb }),
+    /* @__PURE__ */ jsx(Text, { style: styles.detail, children: node.detail || v.nodeLabel(def).toLocaleLowerCase(locale) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.blurb, children: v.nodeBlurb(def) }),
     /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
       /* @__PURE__ */ jsx(
         Text,
@@ -360,29 +468,31 @@ function FlowStepSheet({
           accessibilityRole: "header",
           style: styles.eyebrow,
           ...{ "aria-level": 3 },
-          children: "Configuration"
+          children: labels.configuration
         }
       ),
       def.config.map(([key, description]) => /* @__PURE__ */ jsxs(View, { style: styles.configRow, children: [
         /* @__PURE__ */ jsx(Text, { style: styles.configKey, children: key }),
-        /* @__PURE__ */ jsx(Text, { style: styles.configValue, children: description })
+        /* @__PURE__ */ jsx(Text, { style: styles.configValue, children: v.configNote(def, key, description) })
       ] }, key))
     ] }),
-    mine.length > 0 ? /* @__PURE__ */ jsxs(View, { accessibilityLabel: "Validation", style: styles.section, children: [
+    mine.length > 0 ? /* @__PURE__ */ jsxs(View, { accessibilityLabel: labels.validation, style: styles.section, children: [
       /* @__PURE__ */ jsx(
         Text,
         {
           accessibilityRole: "header",
           style: styles.eyebrow,
           ...{ "aria-level": 3 },
-          children: "Validation"
+          children: labels.validation
         }
       ),
-      mine.map((issue) => /* @__PURE__ */ jsx(IssueRow, { issue }, `${issue.rule}:${issue.msg}`))
+      mine.map((issue) => /* @__PURE__ */ jsx(IssueRow, { issue, v }, `${issue.rule}:${issue.msg}`))
     ] }) : null,
-    human && canApprove && onApprove ? /* @__PURE__ */ jsx(
+    loading ? /* @__PURE__ */ jsx(SkeletonText, { lines: 2 }) : null,
+    human && canApprove && onApprove && !readOnly ? /* @__PURE__ */ jsx(
       Button,
       {
+        loading,
         variant: "primary",
         size: "lg",
         fullWidth: true,
@@ -399,19 +509,24 @@ function FlowStepSheet({
       open: isOpen,
       title: node ? node.label : void 0,
       detents,
+      ...side ? { side } : null,
+      ...presentation ? { presentation } : null,
       motion,
       onOpenChange,
       children: body
     }
   );
 }
-function IssueRow({ issue }) {
+function IssueRow({
+  issue,
+  v
+}) {
   const sev = SEVERITIES[issue.sev];
   const { styles } = useStyles(issueSheet, { sev: sev.tone });
-  const why = rule(issue.rule)?.why;
+  const why = v.ruleWhy(issue.rule, rule(issue.rule)?.why);
   return /* @__PURE__ */ jsxs(View, { style: styles.box, children: [
-    /* @__PURE__ */ jsx(Badge, { variant: FLOW_TONE_BADGE[sev.tone], size: "sm", leadingIcon: flowIconName(sev.icon), children: sev.label }),
-    /* @__PURE__ */ jsx(Text, { style: styles.msg, children: issue.msg }),
+    /* @__PURE__ */ jsx(Badge, { variant: FLOW_TONE_BADGE[sev.tone], size: "sm", leadingIcon: flowIconName(sev.icon), children: v.severity(issue.sev, sev.label) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.msg, children: v.issue(issue) }),
     why ? /* @__PURE__ */ jsx(Text, { style: styles.why, children: why }) : null
   ] });
 }
@@ -529,7 +644,7 @@ var issueSheet = createStyleSheet((theme) => ({
   }
 }));
 function useToneInk(tone) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("flow-run");
   switch (tone) {
     case "accent":
       return theme.color.accentOnSoft;
@@ -558,11 +673,49 @@ function FlowStepRow({
   canDecide = false,
   last = false,
   onPress,
+  platform,
   accessibilityLabel,
   style,
-  testID
+  testID,
+  motion = "full",
+  labels: labelsProp,
+  vocabulary
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("flow-run");
+  const labels = useFlowRunLabels(labelsProp);
+  const v = useFlowVocabulary(vocabulary);
+  const locale = useLoamLocale();
+  const level = useResolvedMotion(motion, "flow-run");
+  const breathe = React4.useRef(new Animated.Value(1)).current;
+  React4.useEffect(() => {
+    if (runState !== "running" || level !== "full") {
+      breathe.setValue(1);
+      return;
+    }
+    const half = theme.loop.pulse / 2;
+    const easing = Easing.bezier(...theme.easing.inOut);
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(breathe, { toValue: 0.4, duration: half, easing, useNativeDriver: true }),
+        Animated.timing(breathe, { toValue: 1, duration: half, easing, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [runState, level, theme.loop.pulse, theme.easing.inOut, breathe]);
+  const pop = React4.useRef(new Animated.Value(1)).current;
+  const prevRun = React4.useRef(runState);
+  React4.useEffect(() => {
+    const was = prevRun.current;
+    prevRun.current = runState;
+    if (runState !== "ok" || was === "ok" || level !== "full") return;
+    pop.setValue(0.5);
+    Animated.spring(pop, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [runState, level, pop, theme]);
   const def = type ?? nodeType(node.type);
   const human = def.kind === "human";
   const running = runState !== "idle";
@@ -570,8 +723,9 @@ function FlowStepRow({
   const glyph = running ? FLOW_RUN_STATE_ICON[runState] : flowIconName(def.icon);
   const { styles } = useStyles(sheet, { tone, note });
   const ink = useToneInk(tone);
-  const detail = node.detail || def.label.toLowerCase();
-  const name = accessibilityLabel ?? `${def.label}: ${node.label}` + (human && canDecide ? " \u2014 waiting on you, tap to approve" : "") + (repeat ? " \u2014 repeats" : "") + (orphan ? " \u2014 not reachable from the trigger" : "");
+  const typeName = v.nodeLabel(def);
+  const detail = node.detail || typeName.toLocaleLowerCase(locale);
+  const name = accessibilityLabel ?? labels.stepName(typeName, node.label, { decide: human && canDecide, repeat, orphan });
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -584,12 +738,14 @@ function FlowStepRow({
         // The indent is the edge information: `flowStepWalk` already clamped the
         // depth, so this can never walk off the phone.
         { paddingStart: theme.space[12] + depth * theme.space[16] },
+        // OS list metrics (F14, F15): iOS two-line 60, Android 72.
+        { minHeight: isAndroidIdiom(theme, platform) ? theme.space[72] : theme.space[60] },
         pressed && styles.rowPressed,
         style
       ],
       children: [
         /* @__PURE__ */ jsxs(View, { style: styles.rail, pointerEvents: "none", children: [
-          /* @__PURE__ */ jsx(View, { style: styles.node, children: /* @__PURE__ */ jsx(Icon, { name: glyph, size: theme.icon.xs, color: ink, strokeWidth: theme.icon.stroke }) }),
+          /* @__PURE__ */ jsx(Animated.View, { style: [styles.node, { opacity: breathe, transform: [{ scale: pop }] }], children: /* @__PURE__ */ jsx(Icon, { name: glyph, size: theme.icon.xs, color: ink, strokeWidth: theme.icon.stroke }) }),
           last ? null : /* @__PURE__ */ jsx(View, { style: styles.connector })
         ] }),
         /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
@@ -605,13 +761,13 @@ function FlowStepRow({
                 strokeWidth: theme.icon.stroke
               }
             ) : null,
-            running ? /* @__PURE__ */ jsx(Badge, { variant: FLOW_TONE_BADGE[tone], size: "sm", leadingIcon: glyph, children: RUN_STATES[runState].label }) : null,
-            human && canDecide ? /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", leadingIcon: "user", children: "Tap to decide" }) : null,
-            orphan ? /* @__PURE__ */ jsx(Badge, { variant: "danger", size: "sm", leadingIcon: "alert-triangle", children: "Not reachable" }) : null,
-            note ? /* @__PURE__ */ jsx(Badge, { variant: "warn", size: "sm", leadingIcon: "edit", children: "Note" }) : null
+            running ? /* @__PURE__ */ jsx(Badge, { variant: FLOW_TONE_BADGE[tone], size: "sm", leadingIcon: glyph, children: v.runState(runState, RUN_STATES[runState].label) }) : null,
+            human && canDecide ? /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", leadingIcon: "user", children: labels.tapToDecide }) : null,
+            orphan ? /* @__PURE__ */ jsx(Badge, { variant: "danger", size: "sm", leadingIcon: "alert-triangle", children: labels.notReachable }) : null,
+            note ? /* @__PURE__ */ jsx(Badge, { variant: "warn", size: "sm", leadingIcon: "edit", children: labels.note }) : null
           ] }),
-          /* @__PURE__ */ jsxs(Text, { numberOfLines: 1, style: styles.sub, children: [
-            def.label,
+          /* @__PURE__ */ jsxs(Text, { numberOfLines: 2, style: styles.sub, children: [
+            typeName,
             " \xB7 ",
             detail
           ] })
@@ -633,71 +789,86 @@ function FlowStepList({
   graph,
   steps,
   run = null,
-  presetLabel = "Flow",
+  presetLabel: presetLabelProp,
   canApprove = false,
-  label = "Flow steps",
+  label: labelProp,
+  readOnly = false,
+  loading = false,
   safeAreaBottom = 0,
   onStepOpen,
   onOpenMap,
   onIntent,
   style,
-  testID
+  testID,
+  labels: labelsProp,
+  vocabulary
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("flow-run");
+  const labels = useFlowRunLabels(labelsProp);
+  const presetLabel = presetLabelProp ?? labels.preset;
+  const label = labelProp ?? labels.stepList;
   const { styles } = useStyles(listSheet);
-  const walked = React.useMemo(() => steps ?? flowStepWalk(graph), [steps, graph]);
-  const count = React.useMemo(() => nodeCount(graph), [graph]);
+  const walked = React4.useMemo(() => steps ?? flowStepWalk(graph), [steps, graph]);
+  const count = React4.useMemo(() => nodeCount(graph), [graph]);
   return /* @__PURE__ */ jsxs(View, { accessibilityLabel: label, testID, style: [styles.root, style], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           Text,
           {
             accessibilityRole: "header",
             numberOfLines: 1,
             style: styles.title,
             ...{ "aria-level": 2 },
-            children: [
-              presetLabel,
-              " flow"
-            ]
+            children: labels.flowTitle(presetLabel)
           }
         ),
-        /* @__PURE__ */ jsxs(Text, { numberOfLines: 1, style: styles.headerSub, children: [
-          count,
-          " steps \xB7 read-only on a phone"
-        ] })
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.headerSub, children: labels.stepCount(count) })
       ] }),
-      /* @__PURE__ */ jsx(
+      readOnly ? null : /* @__PURE__ */ jsx(
         Button,
         {
           variant: "tonal",
           size: "sm",
+          loading,
           leadingIcon: run ? "refresh" : "play",
           onPress: () => onIntent?.({ t: "run" }),
-          children: run ? "Replay" : "Run"
+          children: run ? labels.replay : labels.run
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(ScrollView, { style: styles.scroll, contentContainerStyle: styles.scrollContent, role: "list", children: walked.map((step, i) => /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
-      FlowStepRow,
+    /* @__PURE__ */ jsxs(
+      ScrollView,
       {
-        node: step.node,
-        type: step.type,
-        depth: step.depth,
-        ...step.branchLabel ? { branchLabel: step.branchLabel } : {},
-        repeat: step.repeat,
-        note: step.note,
-        orphan: step.orphan,
-        runState: run ? runStateFor(graph, run.trace, run.index, step.node.id) : "idle",
-        canDecide: canApprove && step.type.kind === "human",
-        last: i === walked.length - 1,
-        ...onStepOpen ? { onPress: onStepOpen } : {}
+        style: styles.scroll,
+        contentContainerStyle: styles.scrollContent,
+        ...!loading && walked.length > 0 ? { role: "list" } : {},
+        children: [
+          loading ? /* @__PURE__ */ jsx(SkeletonText, { lines: 4 }) : null,
+          (loading ? [] : walked).map((step, i) => /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
+            FlowStepRow,
+            {
+              node: step.node,
+              type: step.type,
+              depth: step.depth,
+              ...step.branchLabel ? { branchLabel: step.branchLabel } : {},
+              repeat: step.repeat,
+              note: step.note,
+              orphan: step.orphan,
+              runState: run ? runStateFor(graph, run.trace, run.index, step.node.id) : "idle",
+              canDecide: canApprove && !readOnly && step.type.kind === "human",
+              last: i === walked.length - 1,
+              labels: labelsProp,
+              ...vocabulary ? { vocabulary } : {},
+              ...onStepOpen && !readOnly ? { onPress: onStepOpen } : {}
+            }
+          ) }, step.key))
+        ]
       }
-    ) }, step.key)) }),
+    ),
     /* @__PURE__ */ jsxs(View, { style: [styles.footer, { paddingBottom: theme.space[12] + safeAreaBottom }], children: [
-      onOpenMap ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", fullWidth: true, leadingIcon: "map-pin", onPress: onOpenMap, children: "Open the map" }) : null,
-      /* @__PURE__ */ jsx(Text, { style: styles.footerNote, children: "Approving a run on a phone: yes. Rewiring sixteen nodes on a phone: no." })
+      onOpenMap ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", fullWidth: true, leadingIcon: "map-pin", onPress: onOpenMap, children: labels.openMap }) : null,
+      /* @__PURE__ */ jsx(Text, { style: styles.footerNote, children: labels.phoneNote })
     ] })
   ] });
 }
@@ -830,10 +1001,13 @@ var listSheet = createStyleSheet((theme) => ({
     letterSpacing: theme.type.headline.letterSpacing,
     color: theme.color.text
   },
+  // The count style: mono 12 / 500, tabular, text-2.
   headerSub: {
     fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[11],
-    color: theme.color.text3
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text2
   },
   scroll: {
     flex: 1
@@ -851,10 +1025,10 @@ var listSheet = createStyleSheet((theme) => ({
   },
   footerNote: {
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[11],
-    lineHeight: theme.fontSize[11] * theme.lineHeight.snug,
-    color: theme.color.text3
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * theme.lineHeight.snug,
+    color: theme.color.text2
   }
 }));
 
-export { FLOW_RUN_STATE_ICON, FLOW_TONE_BADGE, FlowApprovalSheet, FlowStepList, FlowStepRow, FlowStepSheet, flowIconName };
+export { FLOW_RUN_STATE_ICON, FLOW_TONE_BADGE, FlowApprovalSheet, FlowStepList, FlowStepRow, FlowStepSheet, flowIconName, flowVocabulary, useFlowRunLabels, useFlowVocabulary };