@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-QHTVYA65.js → chunk-BL37SW6G.js}

@@ -1,8 +1,10 @@
+import { useOptionalConfirm } from './chunk-7QOYGENL.js';
+import { alignItemsStyle } from './chunk-TUACVJNG.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { StyleSheet, Pressable, Text, useWindowDimensions, Animated, Easing, AccessibilityInfo, Platform, findNodeHandle, BackHandler, PanResponder, View } from 'react-native';
+import { StyleSheet, Pressable, ActivityIndicator, Text, useWindowDimensions, Animated, Easing, AccessibilityInfo, Platform, findNodeHandle, BackHandler, PanResponder, View, Alert } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -11,7 +13,11 @@ var DEFAULT_NAVIGATION_LABELS = {
   back: "Back",
   backTo: (title) => `Back to ${title}`,
   cancel: "Cancel",
-  dismiss: "Dismiss"
+  dismiss: "Dismiss",
+  discardTitle: "Discard changes?",
+  discardBody: "Your changes won\u2019t be saved.",
+  discard: "Discard",
+  keepEditing: "Keep editing"
 };
 
 // src/navigation/geometry.ts
@@ -106,9 +112,18 @@ function heroTransform(from, to, progress) {
 function NavBackButton({
   onPress,
   previousTitle,
+  labelled = false,
   platform: platformProp,
   accessibilityLabel,
   disabled = false,
+  variant = "ghost",
+  size,
+  tone = "default",
+  fullWidth = false,
+  leading,
+  trailing,
+  loading = false,
+  motion = "full",
   labels: labelsProp
 }) {
   const labels = useLabels("navigation", DEFAULT_NAVIGATION_LABELS, labelsProp);
@@ -117,32 +132,54 @@ function NavBackButton({
   const { styles } = useStyles(sheet, { platform });
   const back = theme.rtl ? "chevron-right" : "chevron-left";
   const arrow = theme.rtl ? "arrow-right" : "arrow-left";
-  const showTitle = platform === "iOS" && previousTitle !== void 0;
+  const showTitle = platform === "iOS" && (previousTitle !== void 0 || labelled);
   const label = accessibilityLabel ?? (previousTitle ? labels.backTo(previousTitle) : labels.back);
+  const ink = tone === "danger" ? theme.color.danger : tone === "accent" ? theme.color.accentStrong : platform === "iOS" ? theme.color.accentStrong : theme.color.text;
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
       accessibilityLabel: label,
-      accessibilityState: { disabled },
+      accessibilityState: { disabled, busy: loading || void 0 },
+      "aria-busy": loading || void 0,
       disabled,
-      onPress: disabled ? void 0 : onPress,
-      hitSlop: theme.space.s2,
+      onPress: disabled || loading ? void 0 : onPress,
+      android_ripple: platform === "Android" && motion === "full" && !theme.reduceMotion ? { color: theme.state.pressed, borderless: true } : void 0,
       style: ({ pressed }) => [
         styles.back,
+        size ? {
+          minHeight: theme.ctl[size],
+          ...platform === "Android" ? { width: theme.ctl[size], height: theme.ctl[size] } : null
+        } : null,
+        variant === "tonal" ? { backgroundColor: theme.color.accentSoft, paddingStart: theme.space.s2 } : null,
+        variant === "outline" ? {
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.color.borderStrong,
+          paddingStart: theme.space.s2
+        } : null,
+        fullWidth ? { alignSelf: "stretch", justifyContent: "center", width: void 0 } : null,
         disabled ? styles.backDisabled : null,
-        pressed && !disabled ? styles.backPressed : null
+        pressed && !disabled && motion === "full" && !theme.reduceMotion ? styles.backPressed : null
       ],
       children: [
-        /* @__PURE__ */ jsx(
+        leading,
+        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { "aria-hidden": true, color: ink }) : /* @__PURE__ */ jsx(
           Icon,
           {
             name: platform === "iOS" ? back : arrow,
-            size: theme.icon.md,
-            color: theme.color.accentStrong
+            size: platform === "iOS" ? theme.icon.md : theme.icon.lg,
+            color: ink
           }
         ),
-        showTitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.backLabel, children: previousTitle }) : null
+        showTitle ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: 1,
+            style: [styles.backLabel, tone !== "default" ? { color: ink } : null],
+            children: previousTitle ?? labels.back
+          }
+        ) : null,
+        trailing
       ]
     }
   );
@@ -155,23 +192,40 @@ function NavBar({
   backLabel,
   labels,
   leading,
-  trailing
+  trailing,
+  size = "md",
+  density = "standard",
+  variant = "bar",
+  labelled = false
 }) {
+  const theme = useLoamTheme("navigation");
   const { styles } = useStyles(sheet, { platform });
-  return /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
-    onBack ? /* @__PURE__ */ jsx(
-      NavBackButton,
-      {
-        platform,
-        previousTitle,
-        accessibilityLabel: previousTitle ? void 0 : backLabel,
-        labels,
-        onPress: onBack
-      }
-    ) : leading,
-    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: styles.barTitle, children: title }),
-    trailing ? /* @__PURE__ */ jsx(View, { style: styles.barTrailing, children: trailing }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.bar,
+        size === "compact" ? { height: theme.ctl.lg } : null,
+        density === "compact" ? { paddingHorizontal: theme.space.s2, gap: theme.space.s1 } : null,
+        variant === "borderless" ? { borderBottomWidth: 0 } : null
+      ],
+      children: [
+        onBack ? /* @__PURE__ */ jsx(
+          NavBackButton,
+          {
+            platform,
+            previousTitle,
+            labelled,
+            accessibilityLabel: previousTitle ? void 0 : backLabel,
+            labels,
+            onPress: onBack
+          }
+        ) : leading,
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: styles.barTitle, children: title }),
+        trailing ? /* @__PURE__ */ jsx(View, { style: styles.barTrailing, children: trailing }) : null
+      ]
+    }
+  );
 }
 function setInert(node, hidden) {
   if (Platform.OS !== "web" || node == null) return;
@@ -186,9 +240,14 @@ function NavStack({
   onExit,
   platform: platformProp,
   swipeEnabled,
+  orientation = "horizontal",
   backLabel: backLabelProp,
+  showBackLabel = false,
   labels: labelsProp,
   announce = true,
+  size = "md",
+  density = "standard",
+  variant = "bar",
   style
 }) {
   const labels = useLabels("navigation", DEFAULT_NAVIGATION_LABELS, labelsProp);
@@ -203,9 +262,13 @@ function NavStack({
   const top = depth > 0 ? screens[depth - 1] : void 0;
   const below = depth > 1 ? screens[depth - 2] : void 0;
   const [width, setWidth] = React.useState(window.width);
+  const [height, setHeight] = React.useState(window.height);
+  const vertical = orientation === "vertical";
   const onRootLayout = (e) => {
     const next = e.nativeEvent.layout.width;
     if (next > 0) setWidth(next);
+    const nextH = e.nativeEvent.layout.height;
+    if (nextH > 0) setHeight(nextH);
   };
   const progress = React.useRef(new Animated.Value(1)).current;
   const peek = React.useRef(new Animated.Value(0)).current;
@@ -295,7 +358,7 @@ function NavStack({
     return () => subscription?.remove();
   }, [platform]);
   const canPop = under !== void 0 && over !== void 0;
-  const swipeActive = (swipeEnabled ?? true) && canPop && exiting === null;
+  const swipeActive = (swipeEnabled ?? true) && !vertical && canPop && exiting === null;
   const startXRef = React.useRef(0);
   const fromLeadingRef = React.useRef(true);
   const swipeRef = React.useRef({ active: swipeActive, page, pageEasing, platform, theme });
@@ -429,10 +492,20 @@ function NavStack({
     () => peek.interpolate({ inputRange: [0, 1], outputRange: [1, NAV_PREDICTIVE_FADE] }),
     [peek]
   );
-  const overStyle = reduce ? { opacity: Animated.multiply(progress, peekFade) } : {
-    transform: [{ translateX: Animated.add(overTranslateX, peekShift) }, { scale: peekScale }]
+  const overTranslateY = React.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [modalTranslateY(0, height), modalTranslateY(1, height)]
+    }),
+    [progress, height]
+  );
+  const overStyle = reduce ? { opacity: Animated.multiply(progress, peekFade) } : vertical ? { transform: [{ translateY: overTranslateY }] } : {
+    transform: [
+      { translateX: Animated.add(overTranslateX, peekShift) },
+      { scale: peekScale }
+    ]
   };
-  const underStyle = reduce ? {} : { transform: [{ translateX: Animated.multiply(underTranslateX, peekUnwind) }] };
+  const underStyle = reduce || vertical ? {} : { transform: [{ translateX: Animated.multiply(underTranslateX, peekUnwind) }] };
   const underDim = Animated.multiply(dimOpacity, peekUnwind);
   if (!over) return /* @__PURE__ */ jsx(View, { style: [styles.root, style] });
   const rootScreen = screens[0];
@@ -464,7 +537,11 @@ function NavStack({
               leading: under.leading,
               trailing: under.trailing,
               backLabel,
-              labels: labelsProp
+              labelled: showBackLabel,
+              labels: labelsProp,
+              size,
+              density,
+              variant
             }
           ),
           /* @__PURE__ */ jsx(View, { style: styles.body, children: under.content }),
@@ -513,7 +590,11 @@ function NavStack({
               leading: over.leading,
               trailing: over.trailing,
               backLabel,
-              labels: labelsProp
+              labelled: showBackLabel,
+              labels: labelsProp,
+              size,
+              density,
+              variant
             }
           ),
           /* @__PURE__ */ jsx(View, { style: styles.body, children: over.content })
@@ -572,13 +653,13 @@ var sheet = createStyleSheet((theme) => ({
     borderBottomWidth: theme.borderWidth.base,
     borderBottomColor: theme.color.border
   },
-  // Headline is the nav-bar title role on both ramps (HIG headline / M3 title).
+  // iOS: headline 17/600. Android: M3 top app bar title 22/400 (Final 05, as NavHeader).
   // Android indents it, because its arrow carries no label to space it away
   // from — the reference's `margin-inline-start: 8px`.
   barTitle: {
     flex: 1,
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     fontSize: theme.type.headline.fontSize,
     lineHeight: theme.type.headline.lineHeight,
     letterSpacing: theme.type.headline.letterSpacing,
@@ -586,7 +667,14 @@ var sheet = createStyleSheet((theme) => ({
     variants: {
       platform: {
         iOS: {},
-        Android: { marginStart: theme.space.s2 }
+        // M3 top app bar title: 22 / 28 / 400 at the start (same as NavHeader).
+        Android: {
+          marginStart: theme.space.s2,
+          fontSize: theme.fontSize[22],
+          lineHeight: theme.space[28],
+          fontWeight: theme.fontWeight.regular,
+          letterSpacing: 0
+        }
       }
     }
   },
@@ -607,19 +695,30 @@ var sheet = createStyleSheet((theme) => ({
         // The chevron sits tight against its label; a bare arrow gets a square
         // touch target instead.
         iOS: { minWidth: theme.space.s7 },
-        Android: { minWidth: theme.tapMin, justifyContent: "center" }
+        Android: {
+          width: theme.hit.lg,
+          height: theme.hit.lg,
+          paddingEnd: 0,
+          justifyContent: "center"
+        }
       }
     }
   },
   backPressed: {
-    backgroundColor: theme.state.pressed
+    variants: {
+      platform: {
+        iOS: { opacity: theme.state.pressedOpacity },
+        Android: {}
+      }
+    }
   },
   backDisabled: {
     opacity: theme.state.disabledOpacity
   },
+  // The nav-header back (F66): body 17 / 400 accent-strong.
   backLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
+    fontWeight: theme.fontWeight.regular,
     fontSize: theme.type.body.fontSize,
     lineHeight: theme.type.body.lineHeight,
     letterSpacing: theme.type.body.letterSpacing,
@@ -633,6 +732,7 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 var FALLBACK_PANEL_HEIGHT = 640;
+var ANDROID_MODAL_BAR_H = 64;
 function setInert2(node, hidden) {
   if (Platform.OS !== "web" || node == null) return;
   node.inert = hidden;
@@ -644,6 +744,14 @@ function NavModal({
   dismissLabel: dismissLabelProp,
   confirmLabel,
   onConfirm,
+  confirmDisabled = false,
+  dirty = false,
+  loading = false,
+  tone = "accent",
+  size = "md",
+  side = "bottom",
+  presentation = "overlay",
+  platform: platformProp,
   children,
   announcement,
   scrimLabel: scrimLabelProp,
@@ -654,6 +762,40 @@ function NavModal({
   const scrimLabel = scrimLabelProp ?? labels.dismiss;
   const theme = useLoamTheme("navigation");
   const { styles } = useStyles(sheet2);
+  const confirmApi = useOptionalConfirm();
+  const android = (platformProp ?? (theme.platform === "Android" ? "Android" : "iOS")) === "Android";
+  const dirtyRef = React.useRef(dirty);
+  dirtyRef.current = dirty;
+  const requestDismiss = React.useCallback(() => {
+    if (!dirtyRef.current) {
+      onDismiss();
+      return;
+    }
+    if (confirmApi) {
+      void confirmApi.confirm({
+        title: labels.discardTitle,
+        body: labels.discardBody,
+        tone: "danger",
+        confirmLabel: labels.discard,
+        cancelLabel: labels.keepEditing
+      }).then((ok) => {
+        if (ok) onDismiss();
+      });
+      return;
+    }
+    Alert.alert(labels.discardTitle, labels.discardBody, [
+      { text: labels.keepEditing, style: "cancel" },
+      { text: labels.discard, style: "destructive", onPress: onDismiss }
+    ]);
+  }, [confirmApi, labels, onDismiss]);
+  React.useEffect(() => {
+    if (!open || Platform.OS === "web") return;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      requestDismiss();
+      return true;
+    });
+    return () => sub.remove();
+  }, [open, requestDismiss]);
   const [mounted, setMounted] = React.useState(open);
   const progress = React.useRef(new Animated.Value(0)).current;
   const heightRef = React.useRef(FALLBACK_PANEL_HEIGHT);
@@ -698,10 +840,94 @@ function NavModal({
   const translateY = React.useMemo(
     () => progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [modalTranslateY(0, panelHeight), modalTranslateY(1, panelHeight)]
+      outputRange: [
+        modalTranslateY(0, panelHeight) * (side === "top" ? -1 : 1),
+        modalTranslateY(1, panelHeight)
+      ]
     }),
-    [progress, panelHeight]
+    [progress, panelHeight, side]
+  );
+  const header = /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.modalBar,
+        android ? styles.modalBarAndroid : null,
+        size === "compact" ? { height: theme.ctl.lg } : null
+      ],
+      children: [
+        android ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: dismissLabel,
+            onPress: requestDismiss,
+            android_ripple: { color: theme.state.pressed, borderless: true },
+            style: styles.modalClose,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.lg, color: theme.color.text })
+          }
+        ) : /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: dismissLabel,
+            onPress: requestDismiss,
+            style: ({ pressed }) => [styles.modalAction, pressed ? styles.modalActionPressed : null],
+            children: /* @__PURE__ */ jsx(Text, { style: styles.modalDismiss, children: dismissLabel })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            numberOfLines: 1,
+            style: [styles.modalTitle, android ? styles.modalTitleAndroid : null],
+            children: title
+          }
+        ),
+        confirmLabel ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: confirmLabel,
+            accessibilityState: { disabled: confirmDisabled, busy: loading || void 0 },
+            "aria-busy": loading || void 0,
+            disabled: confirmDisabled,
+            onPress: confirmDisabled || loading ? void 0 : onConfirm,
+            style: ({ pressed }) => [
+              styles.modalAction,
+              styles.modalActionEnd,
+              pressed && !confirmDisabled ? styles.modalActionPressed : null,
+              confirmDisabled ? styles.modalActionDisabled : null
+            ],
+            children: loading ? /* @__PURE__ */ jsx(
+              ActivityIndicator,
+              {
+                "aria-hidden": true,
+                color: tone === "danger" ? theme.color.danger : theme.color.accentStrong
+              }
+            ) : /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [
+                  styles.modalConfirm,
+                  android ? styles.modalConfirmAndroid : null,
+                  tone === "danger" ? { color: theme.color.danger } : null
+                ],
+                children: confirmLabel
+              }
+            )
+          }
+        ) : android ? null : /* @__PURE__ */ jsx(View, { style: styles.modalAction })
+      ]
+    }
   );
+  if (presentation === "inline") {
+    return /* @__PURE__ */ jsxs(View, { role: "dialog", accessibilityLabel: title, style: styles.inlinePanel, children: [
+      header,
+      /* @__PURE__ */ jsx(View, { style: styles.modalBody, children })
+    ] });
+  }
   if (!mounted) return /* @__PURE__ */ jsx(Fragment, {});
   return /* @__PURE__ */ jsxs(View, { style: styles.overlayRoot, pointerEvents: "box-none", children: [
     /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, styles.scrim, { opacity: progress }], children: /* @__PURE__ */ jsx(
@@ -710,7 +936,7 @@ function NavModal({
         style: StyleSheet.absoluteFill,
         accessibilityRole: "button",
         accessibilityLabel: scrimLabel,
-        onPress: onDismiss
+        onPress: requestDismiss
       }
     ) }),
     /* @__PURE__ */ jsxs(
@@ -720,37 +946,13 @@ function NavModal({
         accessibilityViewIsModal: true,
         accessibilityLabel: title,
         onLayout: onPanelLayout,
-        style: [styles.panel, { transform: [{ translateY }] }],
+        style: [
+          styles.panel,
+          side === "top" ? styles.panelTop : null,
+          { transform: [{ translateY }] }
+        ],
         children: [
-          /* @__PURE__ */ jsxs(View, { style: styles.modalBar, children: [
-            /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                accessibilityRole: "button",
-                accessibilityLabel: dismissLabel,
-                onPress: onDismiss,
-                style: ({ pressed }) => [
-                  styles.modalAction,
-                  pressed ? styles.modalActionPressed : null
-                ],
-                children: /* @__PURE__ */ jsx(Text, { style: styles.modalDismiss, children: dismissLabel })
-              }
-            ),
-            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.modalTitle, children: title }),
-            confirmLabel ? /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                accessibilityRole: "button",
-                accessibilityLabel: confirmLabel,
-                onPress: onConfirm,
-                style: ({ pressed }) => [
-                  styles.modalAction,
-                  pressed ? styles.modalActionPressed : null
-                ],
-                children: /* @__PURE__ */ jsx(Text, { style: styles.modalConfirm, children: confirmLabel })
-              }
-            ) : /* @__PURE__ */ jsx(View, { style: styles.modalAction })
-          ] }),
+          header,
           /* @__PURE__ */ jsx(View, { style: styles.modalBody, children })
         ]
       }
@@ -761,12 +963,23 @@ function NavTabView({
   value,
   tabs,
   announce = true,
+  variant = "fade",
+  disabled = false,
+  size,
+  density = "standard",
+  orientation,
   style
 }) {
   const theme = useLoamTheme("navigation");
   const { styles } = useStyles(sheet2);
   const page = theme.motion.page;
   const pageEasing = React.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
+  const sizePad = size ? { sm: theme.space.s2, md: theme.space.s3, lg: theme.space.s4 }[size] : void 0;
+  const pad = density === "compact" ? sizePad === void 0 || sizePad > theme.space.s2 ? theme.space.s2 : sizePad : sizePad;
+  const paneLayout = pad !== void 0 || orientation ? {
+    ...pad !== void 0 ? { padding: pad } : null,
+    ...orientation ? { flexDirection: orientation === "horizontal" ? "row" : "column" } : null
+  } : null;
   const active = tabs.find((tab) => tab.value === value);
   const [outgoing, setOutgoing] = React.useState(null);
   const previousRef = React.useRef(active);
@@ -779,6 +992,10 @@ function NavTabView({
     previousRef.current = active;
     if (!active || !previous || previous.value === active.value) return;
     if (announce) AccessibilityInfo.announceForAccessibility(active.announcement ?? active.title);
+    if (variant === "none") {
+      fade.setValue(1);
+      return;
+    }
     setOutgoing(previous);
     fade.setValue(0);
     Animated.timing(fade, {
@@ -799,28 +1016,39 @@ function NavTabView({
     inputRange: [0, 1],
     outputRange: [1, NAV_TAB_FADE_SCALE]
   });
-  return /* @__PURE__ */ jsx(View, { style: [styles.tabRoot, style], children: panes.map((pane) => {
-    const isActive = pane.value === value;
-    const isOutgoing = outgoing?.value === pane.value;
-    return /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        ref: (node) => setInert2(node, !isActive),
-        role: "group",
-        accessibilityLabel: pane.title,
-        importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
-        pointerEvents: isActive ? "auto" : "none",
-        style: [
-          styles.tabPane,
-          isActive ? { opacity: fade, transform: [{ scale: incomingScale }] } : isOutgoing ? { opacity: outgoingOpacity, transform: [{ scale: outgoingScale }] } : styles.tabPaneHidden
-        ],
-        children: pane.content
-      },
-      pane.value
-    );
-  }) });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      "aria-disabled": disabled || void 0,
+      pointerEvents: disabled ? "none" : void 0,
+      style: [styles.tabRoot, style],
+      children: panes.map((pane) => {
+        const isActive = pane.value === value;
+        const isOutgoing = outgoing?.value === pane.value;
+        return /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            ref: (node) => setInert2(node, !isActive),
+            role: "group",
+            accessibilityLabel: pane.title,
+            importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
+            pointerEvents: isActive ? "auto" : "none",
+            style: [
+              styles.tabPane,
+              paneLayout,
+              isActive ? { opacity: fade, transform: [{ scale: incomingScale }] } : isOutgoing ? { opacity: outgoingOpacity, transform: [{ scale: outgoingScale }] } : styles.tabPaneHidden
+            ],
+            children: pane.content
+          },
+          pane.value
+        );
+      })
+    }
+  );
 }
 function NavHero({
+  orientation,
+  align,
   active,
   from,
   to,
@@ -917,7 +1145,18 @@ function NavHero({
           role: "group",
           accessibilityLabel,
           style: [styles.heroSurface, frame, morphStyle],
-          children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.heroContent, { opacity: contentOpacity }], children })
+          children: /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                styles.heroContent,
+                orientation ? { flexDirection: orientation === "horizontal" ? "row" : "column" } : null,
+                alignItemsStyle(align),
+                { opacity: contentOpacity }
+              ],
+              children
+            }
+          )
         }
       ) : null
     }
@@ -952,6 +1191,20 @@ var sheet2 = createStyleSheet((theme) => ({
     zIndex: theme.z.modal,
     ...theme.shadow.lg
   },
+  inlinePanel: {
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius["2xl"],
+    overflow: "hidden",
+    alignSelf: "stretch"
+  },
+  panelTop: {
+    top: 0,
+    bottom: NAV_MODAL_TOP_INSET,
+    borderTopStartRadius: 0,
+    borderTopEndRadius: 0,
+    borderBottomStartRadius: theme.radius["2xl"],
+    borderBottomEndRadius: theme.radius["2xl"]
+  },
   modalBar: {
     flexDirection: "row",
     alignItems: "center",
@@ -962,32 +1215,65 @@ var sheet2 = createStyleSheet((theme) => ({
     borderBottomWidth: theme.borderWidth.base,
     borderBottomColor: theme.color.border
   },
+  // The Android full-screen dialog: a 64 top app bar, no edge.
+  modalBarAndroid: {
+    height: ANDROID_MODAL_BAR_H,
+    paddingHorizontal: theme.space[4],
+    gap: theme.space[4],
+    borderBottomWidth: 0
+  },
+  // iOS sheet bar buttons are 72-wide text links that dim on press.
   modalAction: {
     minHeight: theme.tapMin,
-    minWidth: theme.space.s7,
+    minWidth: theme.space[72],
     justifyContent: "center",
-    borderRadius: theme.radius.full,
-    paddingHorizontal: theme.space.s1
+    alignItems: "flex-start"
+  },
+  modalActionEnd: {
+    alignItems: "flex-end"
   },
   modalActionPressed: {
-    backgroundColor: theme.state.pressed
+    opacity: theme.state.pressedOpacity
+  },
+  modalActionDisabled: {
+    opacity: theme.state.disabledOpacity
+  },
+  modalClose: {
+    width: theme.hit.lg,
+    height: theme.hit.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
   },
-  // The dismiss is quieter than the confirm on purpose — it is always available,
-  // so it does not need to compete.
+  // iOS: Cancel is the regular link (17 / 400), Save the emphasised one (17 / 600).
   modalDismiss: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
+    fontWeight: theme.fontWeight.regular,
     fontSize: theme.type.body.fontSize,
     lineHeight: theme.type.body.lineHeight,
-    color: theme.color.text2
+    color: theme.color.accentStrong
   },
   modalConfirm: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.semibold,
     fontSize: theme.type.body.fontSize,
     lineHeight: theme.type.body.lineHeight,
     color: theme.color.accentStrong
   },
+  // Android: Save is a md link button, Material label large 14 / 500.
+  modalConfirmAndroid: {
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.space[20],
+    paddingHorizontal: theme.space.s3
+  },
+  modalTitleAndroid: {
+    textAlign: "left",
+    fontWeight: theme.fontWeight.regular,
+    fontSize: theme.fontSize[22],
+    lineHeight: theme.space[28],
+    letterSpacing: 0
+  },
   modalTitle: {
     flex: 1,
     textAlign: "center",