@btndprojects/loam-ui-native 0.2.1 → 0.3.1

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

@@ -1,10 +1,12 @@
-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 { 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-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import { iconNameOr } from '@btndprojects/loam-icons';
 import * as React4 from 'react';
@@ -102,6 +104,16 @@ 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,
@@ -109,7 +121,11 @@ function FlowApprovalSheet({
   layout = "sheet",
   open = false,
   onOpenChange,
-  detents = ["half", "full"],
+  detents: detentsProp,
+  size,
+  side,
+  presentation,
+  readOnly = false,
   noteField = false,
   noteLabel: noteLabelProp,
   noteValue,
@@ -125,12 +141,14 @@ function FlowApprovalSheet({
   onIntent,
   style,
   testID,
+  surface,
   labels: labelsProp,
   vocabulary
 }) {
   const theme = useLoamTheme("flow-run");
   const { styles } = useStyles(sheetStyles);
   const def = type ?? nodeType(node.type);
+  const detents = flowSheetDetents(detentsProp, size);
   const labels = useFlowRunLabels(labelsProp);
   const v = useFlowVocabulary(vocabulary);
   const noteLabel = noteLabelProp ?? labels.noteLabel;
@@ -211,7 +229,10 @@ function FlowApprovalSheet({
         Textarea,
         {
           rows: 2,
+          surface,
           value: note,
+          readOnly: readOnly || void 0,
+          editable: !readOnly,
           onChangeText: setNote,
           error: Boolean(noteError),
           "aria-labelledby": labelId,
@@ -221,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,
         {
@@ -257,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
@@ -270,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: {
@@ -367,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({
@@ -388,7 +407,12 @@ function FlowStepSheet({
   issues = [],
   open,
   onOpenChange,
-  detents = ["half", "full"],
+  detents: detentsProp,
+  size,
+  side,
+  presentation,
+  readOnly = false,
+  loading = false,
   canApprove = false,
   approveLabel: approveLabelProp,
   onApprove,
@@ -410,6 +434,7 @@ function FlowStepSheet({
     () => 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: [
@@ -463,9 +488,11 @@ function FlowStepSheet({
       ),
       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,
@@ -482,6 +509,8 @@ function FlowStepSheet({
       open: isOpen,
       title: node ? node.label : void 0,
       detents,
+      ...side ? { side } : null,
+      ...presentation ? { presentation } : null,
       motion,
       onOpenChange,
       children: body
@@ -644,6 +673,7 @@ function FlowStepRow({
   canDecide = false,
   last = false,
   onPress,
+  platform,
   accessibilityLabel,
   style,
   testID,
@@ -708,6 +738,8 @@ 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
       ],
@@ -760,6 +792,8 @@ function FlowStepList({
   presetLabel: presetLabelProp,
   canApprove = false,
   label: labelProp,
+  readOnly = false,
+  loading = false,
   safeAreaBottom = 0,
   onStepOpen,
   onOpenMap,
@@ -791,35 +825,47 @@ function FlowStepList({
         ),
         /* @__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 ? 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,
-        labels: labelsProp,
-        ...vocabulary ? { vocabulary } : {},
-        ...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: labels.openMap }) : null,
       /* @__PURE__ */ jsx(Text, { style: styles.footerNote, children: labels.phoneNote })
@@ -955,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
@@ -976,9 +1025,9 @@ 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
   }
 }));