@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-QWCMU5B2.js

@@ -0,0 +1,860 @@
+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 { iconNameOr } from '@btndprojects/loam-icons';
+import * as React from 'react';
+import { View, Text, 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';
+
+function flowIconName(name) {
+  return iconNameOr(name, "circle");
+}
+var FLOW_RUN_STATE_ICON = {
+  idle: "circle",
+  queued: "list-ol",
+  running: "loader",
+  ok: "check-circle",
+  err: "alert-triangle",
+  skipped: "skip-forward",
+  waiting: "user"
+};
+var FLOW_TONE_BADGE = {
+  accent: "accent",
+  info: "info",
+  warn: "warn",
+  danger: "danger",
+  good: "good",
+  "text-3": "neutral"
+};
+function FlowApprovalSheet({
+  node,
+  type,
+  context,
+  layout = "sheet",
+  open = false,
+  onOpenChange,
+  detents = ["half", "full"],
+  noteField = false,
+  noteLabel = "Note (optional)",
+  noteValue,
+  onNoteChange,
+  noteError,
+  safeAreaBottom = 0,
+  rejectLabel = "Reject",
+  approveLabel = "Approve",
+  motion = "full",
+  onDecide,
+  onIntent,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheetStyles);
+  const def = type ?? nodeType(node.type);
+  const labelId = React.useId();
+  const errorId = React.useId();
+  const [internalNote, setInternalNote] = React.useState("");
+  const note = noteValue ?? internalNote;
+  const setNote = (next) => {
+    if (noteValue === void 0) setInternalNote(next);
+    onNoteChange?.(next);
+  };
+  const decide = (decision) => {
+    const trimmed = note.trim();
+    onDecide?.(decision, trimmed || void 0);
+    onIntent?.({
+      t: "approve",
+      nodeId: node.id,
+      decision,
+      ...trimmed ? { note: trimmed } : {}
+    });
+    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 }),
+    /* @__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(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(
+        Text,
+        {
+          accessibilityRole: "header",
+          style: styles.eyebrow,
+          ...{ "aria-level": 3 },
+          children: "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 })
+      ] }, key))
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.waiting, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.waitingHead, children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "user",
+            size: theme.icon.xs,
+            color: theme.color.accentOnSoft,
+            strokeWidth: theme.icon.stroke
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: styles.waitingEyebrow,
+            ...{ "aria-level": 3 },
+            children: "Waiting on you"
+          }
+        )
+      ] }),
+      /* @__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." })
+    ] }),
+    noteField ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.fieldLabel, children: noteLabel }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          rows: 2,
+          value: note,
+          onChangeText: setNote,
+          error: Boolean(noteError),
+          "aria-labelledby": labelId,
+          ...noteError ? { "aria-describedby": errorId, "aria-invalid": true } : null
+        }
+      ),
+      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: [
+      /* @__PURE__ */ jsx(View, { style: styles.rejectSlot, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "lg",
+          fullWidth: true,
+          leadingIcon: "x",
+          accessibilityLabel: rejectLabel,
+          onPress: () => decide("rejected"),
+          children: rejectLabel
+        }
+      ) }),
+      /* @__PURE__ */ jsx(View, { style: styles.approveSlot, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "lg",
+          fullWidth: true,
+          leadingIcon: "check",
+          accessibilityLabel: approveLabel,
+          onPress: () => decide("approved"),
+          children: approveLabel
+        }
+      ) })
+    ] })
+  ] });
+  if (layout === "inline") return body;
+  return /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      open,
+      title: context.title,
+      detents,
+      motion,
+      onOpenChange,
+      children: body
+    }
+  );
+}
+var sheetStyles = createStyleSheet((theme) => ({
+  body: {
+    gap: theme.space.s3
+  },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title2.fontSize,
+    lineHeight: theme.type.title2.lineHeight,
+    color: theme.color.text
+  },
+  eyebrow: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    letterSpacing: theme.fontSize[10] * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  nodeLine: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    color: theme.color.text3
+  },
+  blurb: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  context: {
+    gap: theme.space.s2
+  },
+  contextText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.fontSize[13] * theme.lineHeight.normal,
+    color: theme.color.text
+  },
+  section: {
+    gap: theme.space.s2
+  },
+  configRow: {
+    gap: theme.space[2]
+  },
+  configKey: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  configValue: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11],
+    lineHeight: theme.fontSize[11] * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  waiting: {
+    gap: theme.space.s1,
+    borderRadius: theme.radius.sm,
+    padding: theme.space[10],
+    backgroundColor: theme.color.accentSoft,
+    // The spec draws this card as `--accent-soft` on a **visible** `--accent`
+    // edge rather than the usual invisible-until-high-contrast `edge.accent`,
+    // because it is the one block on the screen that must be found first. An
+    // accent border is a graphical edge held to 3:1, so it reads the *measured*
+    // accent (`focus.ringColor`), not the raw one —
+    // `loam/accent-edge-must-be-measured`.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.focus.ringColor
+  },
+  waitingHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  waitingEyebrow: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    letterSpacing: theme.fontSize[10] * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.accentOnSoft
+  },
+  waitingBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * theme.lineHeight.snug,
+    color: theme.color.accentOnSoft
+  },
+  fieldLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[11],
+    color: theme.color.text2
+  },
+  fieldError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  },
+  commit: {
+    flexDirection: "row",
+    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.
+  rejectSlot: {
+    flex: 1,
+    minHeight: theme.space[50]
+  },
+  approveSlot: {
+    flexGrow: 1.4,
+    flexShrink: 1,
+    flexBasis: 0,
+    minHeight: theme.space[50]
+  }
+}));
+function FlowStepSheet({
+  node = null,
+  type,
+  layout = "sheet",
+  issues = [],
+  open,
+  onOpenChange,
+  detents = ["half", "full"],
+  canApprove = false,
+  approveLabel = "Decide this approval",
+  onApprove,
+  motion = "full",
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const def = type ?? (node ? nodeType(node.type) : null);
+  const tone = def ? def.tone : "text-3";
+  const { styles } = useStyles(sheetStyles2, { tone });
+  const mine = React.useMemo(
+    () => node ? issues.filter((i) => i.node === node.id).slice().sort((a, b) => SEVERITIES[a.sev].rank - SEVERITIES[b.sev].rank) : [],
+    [issues, node]
+  );
+  const isOpen = open ?? node != null;
+  const human = def?.kind === "human";
+  const body = node && def ? /* @__PURE__ */ jsxs(View, { testID, style: [styles.body, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: flowIconName(def.icon),
+          size: theme.icon.sm,
+          color: theme.color.text,
+          strokeWidth: theme.icon.stroke
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.eyebrow, children: def.label })
+    ] }),
+    layout === "inline" ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityRole: "header",
+        style: styles.inlineTitle,
+        ...{ "aria-level": 2 },
+        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__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          accessibilityRole: "header",
+          style: styles.eyebrow,
+          ...{ "aria-level": 3 },
+          children: "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 })
+      ] }, key))
+    ] }),
+    mine.length > 0 ? /* @__PURE__ */ jsxs(View, { accessibilityLabel: "Validation", style: styles.section, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          accessibilityRole: "header",
+          style: styles.eyebrow,
+          ...{ "aria-level": 3 },
+          children: "Validation"
+        }
+      ),
+      mine.map((issue) => /* @__PURE__ */ jsx(IssueRow, { issue }, `${issue.rule}:${issue.msg}`))
+    ] }) : null,
+    human && canApprove && onApprove ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        size: "lg",
+        fullWidth: true,
+        leadingIcon: "user",
+        onPress: () => onApprove(node.id),
+        children: approveLabel
+      }
+    ) : null
+  ] }) : null;
+  if (layout === "inline") return /* @__PURE__ */ jsx(Fragment, { children: body });
+  return /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      open: isOpen,
+      title: node ? node.label : void 0,
+      detents,
+      motion,
+      onOpenChange,
+      children: body
+    }
+  );
+}
+function IssueRow({ issue }) {
+  const sev = SEVERITIES[issue.sev];
+  const { styles } = useStyles(issueSheet, { sev: sev.tone });
+  const why = 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 }),
+    why ? /* @__PURE__ */ jsx(Text, { style: styles.why, children: why }) : null
+  ] });
+}
+var sheetStyles2 = createStyleSheet((theme) => ({
+  body: {
+    gap: theme.space.s3
+  },
+  head: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  // The type tile: the node's identity, carried by a glyph as well as a tint.
+  tile: {
+    width: theme.space[26],
+    height: theme.space[26],
+    borderRadius: theme.radius.sm,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent",
+    variants: {
+      tone: {
+        accent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info },
+        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+        good: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
+        "text-3": { backgroundColor: theme.color.surface3, borderColor: theme.edge.neutral }
+      }
+    }
+  },
+  eyebrow: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    letterSpacing: theme.fontSize[10] * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  inlineTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    color: theme.color.text
+  },
+  detail: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  blurb: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  section: {
+    gap: theme.space.s2
+  },
+  configRow: {
+    gap: theme.space[2]
+  },
+  configKey: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  configValue: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11],
+    lineHeight: theme.fontSize[11] * theme.lineHeight.normal,
+    color: theme.color.text3
+  }
+}));
+var issueSheet = createStyleSheet((theme) => ({
+  box: {
+    gap: theme.space.s1,
+    borderRadius: theme.radius.sm,
+    padding: theme.space[10],
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      sev: {
+        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 }
+      }
+    }
+  },
+  msg: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12] * theme.lineHeight.snug,
+    variants: {
+      sev: {
+        danger: { color: theme.color.dangerOnSoft },
+        warn: { color: theme.color.warnOnSoft },
+        info: { color: theme.color.infoOnSoft }
+      }
+    }
+  },
+  why: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11],
+    lineHeight: theme.fontSize[11] * theme.lineHeight.normal,
+    variants: {
+      sev: {
+        danger: { color: theme.color.dangerOnSoft },
+        warn: { color: theme.color.warnOnSoft },
+        info: { color: theme.color.infoOnSoft }
+      }
+    }
+  }
+}));
+function useToneInk(tone) {
+  const theme = useLoamTheme();
+  switch (tone) {
+    case "accent":
+      return theme.color.accentOnSoft;
+    case "info":
+      return theme.color.infoOnSoft;
+    case "warn":
+      return theme.color.warnOnSoft;
+    case "danger":
+      return theme.color.dangerOnSoft;
+    case "good":
+      return theme.color.goodOnSoft;
+    case "text-3":
+    default:
+      return theme.color.text2;
+  }
+}
+function FlowStepRow({
+  node,
+  type,
+  depth = 0,
+  branchLabel,
+  repeat = false,
+  note = false,
+  orphan = false,
+  runState = "idle",
+  canDecide = false,
+  last = false,
+  onPress,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const def = type ?? nodeType(node.type);
+  const human = def.kind === "human";
+  const running = runState !== "idle";
+  const tone = running ? RUN_STATES[runState].tone : def.tone;
+  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" : "");
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: name,
+      testID,
+      onPress: onPress ? () => onPress(node.id) : void 0,
+      style: ({ pressed }) => [
+        styles.row,
+        // 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] },
+        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 }) }),
+          last ? null : /* @__PURE__ */ jsx(View, { style: styles.connector })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+            branchLabel ? /* @__PURE__ */ jsx(Badge, { variant: "warn", size: "sm", children: branchLabel }) : null,
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.label, children: node.label }),
+            repeat ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "refresh",
+                size: theme.icon.xs,
+                color: theme.color.text2,
+                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
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { numberOfLines: 1, style: styles.sub, children: [
+            def.label,
+            " \xB7 ",
+            detail
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-right",
+            size: theme.icon.sm,
+            color: theme.color.text3,
+            strokeWidth: theme.icon.stroke
+          }
+        )
+      ]
+    }
+  );
+}
+function FlowStepList({
+  graph,
+  steps,
+  run = null,
+  presetLabel = "Flow",
+  canApprove = false,
+  label = "Flow steps",
+  safeAreaBottom = 0,
+  onStepOpen,
+  onOpenMap,
+  onIntent,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(listSheet);
+  const walked = React.useMemo(() => steps ?? flowStepWalk(graph), [steps, graph]);
+  const count = React.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(
+          Text,
+          {
+            accessibilityRole: "header",
+            numberOfLines: 1,
+            style: styles.title,
+            ...{ "aria-level": 2 },
+            children: [
+              presetLabel,
+              " flow"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { numberOfLines: 1, style: styles.headerSub, children: [
+          count,
+          " steps \xB7 read-only on a phone"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tonal",
+          size: "sm",
+          leadingIcon: run ? "refresh" : "play",
+          onPress: () => onIntent?.({ t: "run" }),
+          children: run ? "Replay" : "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,
+      {
+        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 } : {}
+      }
+    ) }, 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." })
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: theme.space.s2,
+    // The row is a real tap target before its content is measured.
+    minHeight: theme.space[60],
+    paddingEnd: theme.space[12],
+    paddingVertical: theme.space.s2
+  },
+  rowPressed: {
+    backgroundColor: theme.state.pressed
+  },
+  rail: {
+    width: theme.space[26],
+    alignItems: "center"
+  },
+  // The status tile: a tone plus a glyph, never a tone alone. The edge box lives
+  // on the base so every tone is the same size, and it becomes a real outline
+  // under `prefers-contrast: more`, where the soft fill collapses to `surface`.
+  node: {
+    marginTop: theme.space[14],
+    width: theme.space[22],
+    height: theme.space[22],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent",
+    variants: {
+      tone: {
+        accent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info },
+        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+        good: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
+        "text-3": { backgroundColor: theme.color.surface3, borderColor: theme.edge.neutral }
+      }
+    }
+  },
+  // A drawn rule rather than a gap, which is the cheat sheet's test for reaching
+  // for the static `borderWidth.*` ramp.
+  connector: {
+    flex: 1,
+    width: theme.borderWidth.heavy,
+    marginTop: theme.space.s1,
+    backgroundColor: theme.color.border
+  },
+  card: {
+    flex: 1,
+    gap: theme.space.s1,
+    borderRadius: theme.radius.sm,
+    padding: theme.space.s2,
+    variants: {
+      // A note is not part of the run (W14): dashed is the shape channel, the
+      // warn tint the colour one, and the row also carries a "Note" pill.
+      note: {
+        true: {
+          backgroundColor: theme.color.warnSoft,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.edge.warn,
+          borderStyle: "dashed"
+        },
+        false: { backgroundColor: theme.color.surface2 }
+      }
+    }
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: theme.space.s2
+  },
+  // Both inks re-resolve on the note card. `audit-contrast` caught the web row
+  // reading `--text-3` on `--warn-soft` at 2.88:1 in dark mode over a pressed
+  // state layer — the plain surface inks are measured against the neutral ramp
+  // only, so on a tone tint they need the tint's own measured ink. The native
+  // audit has no equivalent rule, which is exactly why this is written down.
+  label: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.extrabold,
+    fontSize: theme.fontSize[14],
+    variants: {
+      note: {
+        true: { color: theme.color.warnOnSoft },
+        false: { color: theme.color.text }
+      }
+    }
+  },
+  sub: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    variants: {
+      note: {
+        true: { color: theme.color.warnOnSoft },
+        false: { color: theme.color.text3 }
+      }
+    }
+  }
+}));
+var listSheet = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    backgroundColor: theme.color.bg
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[10],
+    backgroundColor: theme.color.surface,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  headerText: {
+    flex: 1
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.type.headline.fontWeight,
+    // The theme already resolved the platform's headline metrics, so there is no
+    // `platform` prop here and no `Platform.select`.
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text
+  },
+  headerSub: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    color: theme.color.text3
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingBottom: theme.space.s3
+  },
+  footer: {
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space[12],
+    paddingTop: theme.space[12],
+    backgroundColor: theme.color.surface,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  footerNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[11],
+    lineHeight: theme.fontSize[11] * theme.lineHeight.snug,
+    color: theme.color.text3
+  }
+}));
+
+export { FLOW_RUN_STATE_ICON, FLOW_TONE_BADGE, FlowApprovalSheet, FlowStepList, FlowStepRow, FlowStepSheet, flowIconName };