@btndprojects/loam-ui-native 0.1.0 → 0.2.1

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

@@ -1,12 +1,14 @@
-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 { Textarea } from './chunk-74FLKD24.js';
+import { KeyboardSpacer } from './chunk-XTORZWRF.js';
+import { Sheet } from './chunk-QYPE5JX3.js';
+import { Badge } from './chunk-TN2ZNJUI.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.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 +33,75 @@ 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]);
+}
 function FlowApprovalSheet({
   node,
   type,
@@ -40,31 +111,43 @@ function FlowApprovalSheet({
   onOpenChange,
   detents = ["half", "full"],
   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,
+  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 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 +159,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 +174,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,12 +199,12 @@ 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(
@@ -155,6 +230,7 @@ function FlowApprovalSheet({
           fullWidth: true,
           leadingIcon: "x",
           accessibilityLabel: rejectLabel,
+          loading: loading && chosen === "rejected",
           onPress: () => decide("rejected"),
           children: rejectLabel
         }
@@ -167,6 +243,7 @@ function FlowApprovalSheet({
           fullWidth: true,
           leadingIcon: "check",
           accessibilityLabel: approveLabel,
+          loading: loading && chosen === "approved",
           onPress: () => decide("approved"),
           children: approveLabel
         }
@@ -313,17 +390,23 @@ function FlowStepSheet({
   onOpenChange,
   detents = ["half", "full"],
   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]
   );
@@ -340,7 +423,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 +434,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,25 +443,25 @@ 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(
       Button,
@@ -405,13 +488,16 @@ function FlowStepSheet({
     }
   );
 }
-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 +615,7 @@ var issueSheet = createStyleSheet((theme) => ({
   }
 }));
 function useToneInk(tone) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("flow-run");
   switch (tone) {
     case "accent":
       return theme.color.accentOnSoft;
@@ -560,9 +646,46 @@ function FlowStepRow({
   onPress,
   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 +693,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,
     {
@@ -589,7 +713,7 @@ function FlowStepRow({
       ],
       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 +729,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,40 +757,39 @@ function FlowStepList({
   graph,
   steps,
   run = null,
-  presetLabel = "Flow",
+  presetLabel: presetLabelProp,
   canApprove = false,
-  label = "Flow steps",
+  label: labelProp,
   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(
         Button,
@@ -675,7 +798,7 @@ function FlowStepList({
           size: "sm",
           leadingIcon: run ? "refresh" : "play",
           onPress: () => onIntent?.({ t: "run" }),
-          children: run ? "Replay" : "Run"
+          children: run ? labels.replay : labels.run
         }
       )
     ] }),
@@ -692,12 +815,14 @@ function FlowStepList({
         runState: run ? runStateFor(graph, run.trace, run.index, step.node.id) : "idle",
         canDecide: canApprove && step.type.kind === "human",
         last: i === walked.length - 1,
+        labels: labelsProp,
+        ...vocabulary ? { vocabulary } : {},
         ...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." })
+      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 })
     ] })
   ] });
 }
@@ -857,4 +982,4 @@ var listSheet = createStyleSheet((theme) => ({
   }
 }));
 
-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 };

package/dist/{chunk-ZVFE5QGU.js → chunk-QYPE5JX3.js}

@@ -1,6 +1,7 @@
-import { defaultRememberStorage } from './chunk-OPXFZ4Y5.js';
+import { defaultRememberStorage } from './chunk-GDKVKNR2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
-import { useWindowDimensions, Animated, Easing, PanResponder, Modal, View, StyleSheet, Pressable, Text, ScrollView } from 'react-native';
+import { useWindowDimensions, Animated, Easing, PanResponder, Platform, findNodeHandle, AccessibilityInfo, Modal, View, StyleSheet, Pressable, Text, ScrollView } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -30,6 +31,11 @@ function SheetStackProvider({
   }
   return /* @__PURE__ */ jsx(SheetStackContext.Provider, { value, children });
 }
+var DEFAULT_LABELS = {
+  close: "Close",
+  grabber: "Resize sheet",
+  detents: { peek: "peek", half: "half", full: "full" }
+};
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
@@ -43,17 +49,20 @@ function Sheet({
   children,
   footer,
   safeAreaBottom = 0,
-  closeLabel = "Close",
+  closeLabel,
   dismissible = true,
   detents,
-  grabberLabel = "Resize sheet",
+  initialDetent,
+  grabberLabel,
+  labels: labelsProp,
   dismissFraction = DEFAULT_DISMISS_FRACTION,
   remember = false,
   rememberKey,
   storage = defaultRememberStorage,
   motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("sheet");
+  const labels = useLabels("sheet", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   const { height: windowHeight } = useWindowDimensions();
   const controlled = open !== void 0;
@@ -97,7 +106,7 @@ function Sheet({
       const n = raw == null ? NaN : Number(raw);
       if (Number.isInteger(n)) return n;
     }
-    return 0;
+    return initialDetent ? Math.max(0, detentList.indexOf(initialDetent)) : 0;
   });
   const activeIndex = hasDetents ? clamp(detentIndex, 0, detentList.length - 1) : 0;
   const detentPx = React.useCallback(
@@ -353,6 +362,25 @@ function Sheet({
   const headerPan = !hasDetents && dismissible ? pan.panHandlers : {};
   const pushScale = pushAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 0.955] });
   const pushLift = pushAnim.interpolate({ inputRange: [0, 1], outputRange: [0, -10] });
+  const titleRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!mounted || !actualOpen || Platform.OS === "web") return;
+    const node = titleRef.current ?? panelRef.current;
+    const tag = node ? findNodeHandle(node) : null;
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [mounted, actualOpen]);
+  const onGrabberKey = (event) => {
+    const last = detentList.length - 1;
+    let next = null;
+    if (event.key === "ArrowUp" || event.key === "ArrowRight") next = activeIndex + 1;
+    else if (event.key === "ArrowDown" || event.key === "ArrowLeft") next = activeIndex - 1;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = last;
+    if (next === null) return;
+    event.preventDefault?.();
+    commitDetent(next);
+  };
   const onDetentAction = (name) => {
     if (name === "increment") commitDetent(activeIndex + 1);
     else if (name === "decrement") commitDetent(activeIndex - 1);
@@ -375,7 +403,7 @@ function Sheet({
               {
                 style: StyleSheet.absoluteFill,
                 accessibilityRole: "button",
-                accessibilityLabel: closeLabel,
+                accessibilityLabel: closeLabel ?? labels.close,
                 onPress: requestDismiss
               }
             ) : null
@@ -384,6 +412,7 @@ function Sheet({
         /* @__PURE__ */ jsxs(
           Animated.View,
           {
+            ref: panelRef,
             role: "dialog",
             accessibilityViewIsModal: true,
             accessibilityLabel: title,
@@ -403,13 +432,15 @@ function Sheet({
                   View,
                   {
                     accessibilityRole: "adjustable",
-                    accessibilityLabel: grabberLabel,
+                    accessibilityLabel: grabberLabel ?? labels.grabber,
                     "aria-valuemin": 0,
                     "aria-valuemax": detentList.length - 1,
                     "aria-valuenow": activeIndex,
-                    "aria-valuetext": detentList[activeIndex],
+                    "aria-valuetext": detentList[activeIndex] ? labels.detents[detentList[activeIndex]] : void 0,
                     accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
                     onAccessibilityAction: (e) => onDetentAction(e.nativeEvent.actionName),
+                    focusable: true,
+                    ...{ onKeyDown: onGrabberKey },
                     style: styles.grabberHit,
                     ...grabberPan.panHandlers,
                     children: /* @__PURE__ */ jsx(View, { style: styles.handle })
@@ -419,7 +450,16 @@ function Sheet({
                   // `role="heading"` + a cast `aria-level`, the idiom this repo
                   // already uses in `calendar.tsx` — RN's own `accessibilityRole`
                   // carries no level, and react-native-web needs the ARIA pair.
-                  /* @__PURE__ */ jsx(Text, { style: styles.title, role: "heading", ...{ "aria-level": titleLevel }, children: title })
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      ref: titleRef,
+                      style: styles.title,
+                      role: "heading",
+                      ...{ "aria-level": titleLevel },
+                      children: title
+                    }
+                  )
                 ) : null
               ] }),
               /* @__PURE__ */ jsx(