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

package/dist/chunk-VXDZFJGP.js

@@ -0,0 +1,874 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React2 from 'react';
+import { StyleSheet, Pressable, Text, useWindowDimensions, Animated, Easing, AccessibilityInfo, Platform, findNodeHandle, BackHandler, PanResponder, View } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/navigation/geometry.ts
+var NAV_PARALLAX_RATIO = 0.3;
+var NAV_EDGE_HIT_WIDTH = 20;
+var NAV_AXIS_LOCK_SLOP = 8;
+var NAV_SWIPE_COMPLETE_FRACTION = 0.5;
+var NAV_SWIPE_COMPLETE_VELOCITY = 0.5;
+var NAV_TAB_FADE_SCALE = 0.97;
+var NAV_HERO_CONTENT_FADE_START = 0.5;
+var NAV_MODAL_TOP_INSET = 34;
+var NAV_MODAL_HEADER_HEIGHT = 48;
+function clampProgress(progress) {
+  if (Number.isNaN(progress)) return 0;
+  return Math.max(0, Math.min(1, progress));
+}
+function directionSign(rtl) {
+  return rtl ? -1 : 1;
+}
+function incomingTranslateX(progress, width, rtl) {
+  return (1 - clampProgress(progress)) * width * directionSign(rtl);
+}
+function parallaxTranslateX(progress, width, rtl) {
+  return -clampProgress(progress) * width * NAV_PARALLAX_RATIO * directionSign(rtl);
+}
+function parallaxDimOpacity(progress) {
+  return clampProgress(progress);
+}
+function progressFromEdgeSwipe(dx, width, rtl) {
+  if (width <= 0) return 1;
+  const travelled = dx * directionSign(rtl);
+  return 1 - clampProgress(travelled / width);
+}
+function shouldCompletePop(dx, vx, width, rtl) {
+  const sign = directionSign(rtl);
+  const travelled = dx * sign;
+  const velocity = vx * sign;
+  if (travelled <= 0) return false;
+  return travelled >= width * NAV_SWIPE_COMPLETE_FRACTION || velocity >= NAV_SWIPE_COMPLETE_VELOCITY;
+}
+function claimsHorizontalAxis(dx, dy, slop = NAV_AXIS_LOCK_SLOP) {
+  return Math.abs(dx) > slop && Math.abs(dx) > Math.abs(dy);
+}
+function isFromLeadingEdge(x, width, rtl, edgeWidth = NAV_EDGE_HIT_WIDTH) {
+  return rtl ? x >= width - edgeWidth : x <= edgeWidth;
+}
+function modalTranslateY(progress, height) {
+  return (1 - clampProgress(progress)) * height;
+}
+function tabFadeScale(progress) {
+  const p = clampProgress(progress);
+  return NAV_TAB_FADE_SCALE + (1 - NAV_TAB_FADE_SCALE) * p;
+}
+function heroContentOpacity(progress) {
+  const p = clampProgress(progress);
+  if (p <= NAV_HERO_CONTENT_FADE_START) return 0;
+  return (p - NAV_HERO_CONTENT_FADE_START) / (1 - NAV_HERO_CONTENT_FADE_START);
+}
+function heroTransform(from, to, progress) {
+  const p = clampProgress(progress);
+  const scaleX = to.width > 0 ? from.width / to.width : 1;
+  const scaleY = to.height > 0 ? from.height / to.height : 1;
+  const dx = from.x + from.width / 2 - (to.x + to.width / 2);
+  const dy = from.y + from.height / 2 - (to.y + to.height / 2);
+  return {
+    translateX: dx * (1 - p),
+    translateY: dy * (1 - p),
+    scaleX: scaleX + (1 - scaleX) * p,
+    scaleY: scaleY + (1 - scaleY) * p
+  };
+}
+function NavBackButton({
+  onPress,
+  previousTitle,
+  platform: platformProp,
+  accessibilityLabel,
+  disabled = false
+}) {
+  const theme = useLoamTheme();
+  const platform = platformProp ?? navPlatform(theme.platform);
+  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 label = accessibilityLabel ?? (previousTitle ? `Back to ${previousTitle}` : "Back");
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled },
+      disabled,
+      onPress: disabled ? void 0 : onPress,
+      hitSlop: theme.space.s2,
+      style: ({ pressed }) => [
+        styles.back,
+        disabled ? styles.backDisabled : null,
+        pressed && !disabled ? styles.backPressed : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: platform === "iOS" ? back : arrow,
+            size: theme.icon.md,
+            color: theme.color.accentStrong
+          }
+        ),
+        showTitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.backLabel, children: previousTitle }) : null
+      ]
+    }
+  );
+}
+function NavBar({
+  platform,
+  title,
+  previousTitle,
+  onBack,
+  backLabel,
+  leading,
+  trailing
+}) {
+  const { styles } = useStyles(sheet, { platform });
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "header", style: styles.bar, children: [
+    onBack ? /* @__PURE__ */ jsx(
+      NavBackButton,
+      {
+        platform,
+        previousTitle,
+        accessibilityLabel: previousTitle ? void 0 : backLabel,
+        onPress: onBack
+      }
+    ) : leading,
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.barTitle, children: title }),
+    trailing ? /* @__PURE__ */ jsx(View, { style: styles.barTrailing, children: trailing }) : null
+  ] });
+}
+function navPlatform(platform) {
+  return platform === "Android" ? "Android" : "iOS";
+}
+function NavigationStack({
+  screens,
+  onPop,
+  onExit,
+  platform: platformProp,
+  swipeEnabled,
+  backLabel = "Back",
+  announce = true,
+  style
+}) {
+  const theme = useLoamTheme();
+  const platform = platformProp ?? navPlatform(theme.platform);
+  const { styles } = useStyles(sheet, { platform });
+  const rtl = theme.rtl;
+  const reduce = theme.reduceMotion;
+  const window = useWindowDimensions();
+  const depth = screens.length;
+  const top = depth > 0 ? screens[depth - 1] : void 0;
+  const below = depth > 1 ? screens[depth - 2] : void 0;
+  const [width, setWidth] = React2.useState(window.width);
+  const onRootLayout = (e) => {
+    const next = e.nativeEvent.layout.width;
+    if (next > 0) setWidth(next);
+  };
+  const progress = React2.useRef(new Animated.Value(1)).current;
+  const [exiting, setExiting] = React2.useState(null);
+  const over = exiting ?? top;
+  const under = exiting ? top : below;
+  const page = theme.motion.page;
+  const pageEasing = React2.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
+  const live = React2.useRef({ top, below, onPop, onExit, width, rtl });
+  live.current = { top, below, onPop, onExit, width, rtl };
+  const screenRef = React2.useRef(null);
+  const announceRef = React2.useRef(null);
+  const pendingFocusRef = React2.useRef(null);
+  const skipExitRef = React2.useRef(false);
+  const historyRef = React2.useRef(null);
+  const revealTop = React2.useCallback(
+    (screen) => {
+      if (announce) {
+        const text = screen.announcement ?? screen.title;
+        if (announceRef.current !== text) AccessibilityInfo.announceForAccessibility(text);
+        announceRef.current = text;
+      }
+      pendingFocusRef.current = screen.key;
+    },
+    [announce]
+  );
+  React2.useEffect(() => {
+    const wanted = pendingFocusRef.current;
+    if (wanted === null || wanted !== top?.key) return;
+    pendingFocusRef.current = null;
+    const node = screenRef.current;
+    if (!node || Platform.OS === "web") return;
+    const tag = findNodeHandle(node);
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  });
+  React2.useEffect(() => {
+    const previous = historyRef.current;
+    if (top) historyRef.current = { depth, key: top.key, screen: top };
+    if (!top) return;
+    if (!previous) return;
+    if (previous.key === top.key) return;
+    if (skipExitRef.current) {
+      skipExitRef.current = false;
+      progress.setValue(1);
+      revealTop(top);
+      return;
+    }
+    if (depth < previous.depth) {
+      setExiting(previous.screen);
+      progress.setValue(1);
+      Animated.timing(progress, {
+        toValue: 0,
+        duration: page.duration,
+        easing: pageEasing,
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished) {
+          setExiting(null);
+          progress.setValue(1);
+        }
+      });
+    } else {
+      progress.setValue(0);
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: page.duration,
+        easing: pageEasing,
+        useNativeDriver: true
+      }).start();
+    }
+    revealTop(top);
+  }, [depth, top?.key]);
+  React2.useEffect(() => {
+    if (platform !== "Android") return;
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      const { top: current, below: parent, onPop: pop, onExit: exit } = live.current;
+      if (!current || !parent) {
+        exit?.();
+        return false;
+      }
+      pop?.(current, "system-back");
+      return true;
+    });
+    return () => subscription?.remove();
+  }, [platform]);
+  const canPop = under !== void 0 && over !== void 0;
+  const swipeActive = (swipeEnabled ?? platform === "iOS") && canPop && exiting === null;
+  const startXRef = React2.useRef(0);
+  const swipeRef = React2.useRef({ active: swipeActive, page, pageEasing });
+  swipeRef.current = { active: swipeActive, page, pageEasing };
+  const pan = React2.useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponderCapture: (e) => {
+        startXRef.current = e.nativeEvent.locationX;
+        return false;
+      },
+      onMoveShouldSetPanResponder: (_e, g) => {
+        if (!swipeRef.current.active) return false;
+        if (!claimsHorizontalAxis(g.dx, g.dy)) return false;
+        const { width: w, rtl: isRtl } = live.current;
+        return isFromLeadingEdge(startXRef.current, w, isRtl);
+      },
+      onPanResponderMove: (_e, g) => {
+        const { width: w, rtl: isRtl } = live.current;
+        progress.setValue(progressFromEdgeSwipe(g.dx, w, isRtl));
+      },
+      onPanResponderRelease: (_e, g) => {
+        const { top: current, width: w, rtl: isRtl, onPop: pop } = live.current;
+        const { page: spec, pageEasing: easing } = swipeRef.current;
+        if (current && shouldCompletePop(g.dx, g.vx, w, isRtl)) {
+          Animated.timing(progress, {
+            toValue: 0,
+            duration: spec.duration,
+            easing,
+            useNativeDriver: true
+          }).start(({ finished }) => {
+            if (!finished) return;
+            skipExitRef.current = true;
+            pop?.(current, "edge-swipe");
+          });
+          return;
+        }
+        Animated.spring(progress, { toValue: 1, useNativeDriver: true }).start();
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(progress, { toValue: 1, useNativeDriver: true }).start();
+      }
+    }),
+    [progress]
+  );
+  const overTranslateX = React2.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [incomingTranslateX(0, width, rtl), incomingTranslateX(1, width, rtl)]
+    }),
+    [progress, width, rtl]
+  );
+  const underTranslateX = React2.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [parallaxTranslateX(0, width, rtl), parallaxTranslateX(1, width, rtl)]
+    }),
+    [progress, width, rtl]
+  );
+  const dimOpacity = React2.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [parallaxDimOpacity(0), parallaxDimOpacity(1)]
+    }),
+    [progress]
+  );
+  const overStyle = reduce ? { opacity: progress } : { transform: [{ translateX: overTranslateX }] };
+  const underStyle = reduce ? {} : { transform: [{ translateX: underTranslateX }] };
+  if (!over) return /* @__PURE__ */ jsx(View, { style: [styles.root, style] });
+  const rootScreen = screens[0];
+  const overIsRoot = over === rootScreen;
+  const underIsRoot = under !== void 0 && under === rootScreen;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], onLayout: onRootLayout, children: [
+    under ? /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        ref: exiting ? screenRef : void 0,
+        role: "group",
+        accessibilityLabel: under.title,
+        style: [styles.screen, underIsRoot ? styles.screenRoot : styles.screenPushed, underStyle],
+        children: [
+          under.hideBar ? null : /* @__PURE__ */ jsx(
+            NavBar,
+            {
+              platform,
+              title: under.title,
+              leading: under.leading,
+              trailing: under.trailing,
+              backLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: styles.body, children: under.content }),
+          reduce ? null : /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              pointerEvents: "none",
+              style: [StyleSheet.absoluteFill, styles.dim, { opacity: dimOpacity }]
+            }
+          )
+        ]
+      },
+      under.key
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        ref: exiting ? void 0 : screenRef,
+        role: "group",
+        accessibilityLabel: over.title,
+        pointerEvents: exiting ? "none" : "auto",
+        style: [styles.screen, overIsRoot ? styles.screenRoot : styles.screenPushed, overStyle],
+        ...swipeActive ? pan.panHandlers : {},
+        children: [
+          over.hideBar ? null : /* @__PURE__ */ jsx(
+            NavBar,
+            {
+              platform,
+              title: over.title,
+              previousTitle: under?.title,
+              onBack: canPop ? () => {
+                const { top: current, onPop: pop } = live.current;
+                if (current) pop?.(current, "back-button");
+              } : void 0,
+              leading: over.leading,
+              trailing: over.trailing,
+              backLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: styles.body, children: over.content })
+        ]
+      },
+      over.key
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    overflow: "hidden",
+    backgroundColor: theme.color.bg
+  },
+  screen: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: "column"
+  },
+  // The base screen sits on the canvas; a pushed one is a `surface` card with
+  // `shadow.lg` (the design reference's `box-shadow: var(--sh-lg)`), which also
+  // carries `elevation` for Android's depth model.
+  screenRoot: {
+    backgroundColor: theme.color.bg
+  },
+  // loam-contrast-ignore — a pushed screen is full-bleed and its parent is
+  // dimmed by `scrimLight` (which high contrast leaves alone), so the shadow is
+  // depth during the transition, never the thing that draws the screen.
+  screenPushed: {
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
+  // The wash over the parallaxing parent. `scrimLight` already carries the
+  // alpha, so the animation only scales it from 0 to 1.
+  dim: {
+    backgroundColor: theme.color.scrimLight
+  },
+  body: {
+    flex: 1
+  },
+  // Matches `Header`'s metrics: `layout.appbarH` is the only height in the
+  // system that branches on platform (44 on iOS, 64 on Android).
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.layout.appbarH,
+    paddingHorizontal: theme.space.s3,
+    gap: theme.space.s2,
+    backgroundColor: theme.color.surface,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  // Headline is the nav-bar title role on both ramps (HIG headline / M3 title).
+  // 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,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text,
+    variants: {
+      platform: {
+        iOS: {},
+        Android: { marginStart: theme.space.s2 }
+      }
+    }
+  },
+  barTrailing: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1
+  },
+  back: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.tapMin,
+    paddingEnd: theme.space.s1,
+    borderRadius: theme.radius.full,
+    variants: {
+      platform: {
+        // 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" }
+      }
+    }
+  },
+  backPressed: {
+    backgroundColor: theme.state.pressed
+  },
+  backDisabled: {
+    opacity: theme.state.disabledOpacity
+  },
+  backLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.accentStrong,
+    variants: {
+      platform: {
+        iOS: {},
+        Android: { display: "none" }
+      }
+    }
+  }
+}));
+var FALLBACK_PANEL_HEIGHT = 640;
+function NavModal({
+  open,
+  title,
+  onDismiss,
+  dismissLabel = "Cancel",
+  confirmLabel,
+  onConfirm,
+  children,
+  announcement,
+  scrimLabel = "Dismiss"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const [mounted, setMounted] = React2.useState(open);
+  const progress = React2.useRef(new Animated.Value(0)).current;
+  const heightRef = React2.useRef(FALLBACK_PANEL_HEIGHT);
+  const enter = theme.motion.enter;
+  const exit = theme.motion.exit;
+  const enterEasing = React2.useMemo(() => Easing.bezier(...enter.easing), [enter.easing]);
+  const exitEasing = React2.useMemo(() => Easing.bezier(...exit.easing), [exit.easing]);
+  React2.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      AccessibilityInfo.announceForAccessibility(announcement ?? title);
+      return;
+    }
+    if (!mounted) return;
+    Animated.timing(progress, {
+      toValue: 0,
+      duration: exit.duration,
+      easing: exitEasing,
+      useNativeDriver: true
+    }).start(({ finished }) => {
+      if (finished) setMounted(false);
+    });
+  }, [open]);
+  React2.useEffect(() => {
+    if (!mounted || !open) return;
+    progress.setValue(0);
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: enter.duration,
+      easing: enterEasing,
+      useNativeDriver: true
+    }).start();
+  }, [mounted]);
+  const [panelHeight, setPanelHeight] = React2.useState(FALLBACK_PANEL_HEIGHT);
+  const onPanelLayout = (e) => {
+    const next = e.nativeEvent.layout.height;
+    if (next > 0 && next !== heightRef.current) {
+      heightRef.current = next;
+      setPanelHeight(next);
+    }
+  };
+  const translateY = React2.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [modalTranslateY(0, panelHeight), modalTranslateY(1, panelHeight)]
+    }),
+    [progress, panelHeight]
+  );
+  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(
+      Pressable,
+      {
+        style: StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: scrimLabel,
+        onPress: onDismiss
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        role: "dialog",
+        accessibilityViewIsModal: true,
+        accessibilityLabel: title,
+        onLayout: onPanelLayout,
+        style: [styles.panel, { 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 })
+          ] }),
+          /* @__PURE__ */ jsx(View, { style: styles.modalBody, children })
+        ]
+      }
+    )
+  ] });
+}
+function NavTabView({
+  value,
+  tabs,
+  announce = true,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const page = theme.motion.page;
+  const pageEasing = React2.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
+  const active = tabs.find((tab) => tab.value === value);
+  const [outgoing, setOutgoing] = React2.useState(null);
+  const previousRef = React2.useRef(active);
+  const visited = React2.useRef(new Set(active ? [active.value] : []));
+  if (active) visited.current.add(active.value);
+  const panes = tabs.filter((tab) => visited.current.has(tab.value));
+  const fade = React2.useRef(new Animated.Value(1)).current;
+  React2.useEffect(() => {
+    const previous = previousRef.current;
+    previousRef.current = active;
+    if (!active || !previous || previous.value === active.value) return;
+    if (announce) AccessibilityInfo.announceForAccessibility(active.announcement ?? active.title);
+    setOutgoing(previous);
+    fade.setValue(0);
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: page.duration,
+      easing: pageEasing,
+      useNativeDriver: true
+    }).start(({ finished }) => {
+      if (finished) setOutgoing(null);
+    });
+  }, [value]);
+  const incomingScale = fade.interpolate({
+    inputRange: [0, 1],
+    outputRange: [NAV_TAB_FADE_SCALE, 1]
+  });
+  const outgoingOpacity = fade.interpolate({ inputRange: [0, 1], outputRange: [1, 0] });
+  const outgoingScale = fade.interpolate({
+    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,
+      {
+        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
+    );
+  }) });
+}
+function NavHero({
+  active,
+  from,
+  to,
+  children,
+  onMorphEnd,
+  accessibilityLabel,
+  announcement
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const reduce = theme.reduceMotion;
+  const hero = theme.motion.hero;
+  const heroEasing = React2.useMemo(() => Easing.bezier(...hero.easing), [hero.easing]);
+  const [mounted, setMounted] = React2.useState(active);
+  const progress = React2.useRef(new Animated.Value(0)).current;
+  const [bounds, setBounds] = React2.useState(null);
+  const onRootLayout = (e) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) setBounds({ x: 0, y: 0, width, height });
+  };
+  const endRef = React2.useRef(onMorphEnd);
+  endRef.current = onMorphEnd;
+  React2.useEffect(() => {
+    if (active) {
+      setMounted(true);
+      if (announcement ?? accessibilityLabel) {
+        AccessibilityInfo.announceForAccessibility(announcement ?? accessibilityLabel);
+      }
+      return;
+    }
+    if (!mounted) return;
+    Animated.timing(progress, {
+      toValue: 0,
+      duration: hero.duration,
+      easing: heroEasing,
+      useNativeDriver: true
+    }).start(({ finished }) => {
+      if (!finished) return;
+      setMounted(false);
+      endRef.current?.(false);
+    });
+  }, [active]);
+  React2.useEffect(() => {
+    if (!mounted || !active) return;
+    progress.setValue(0);
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: hero.duration,
+      easing: heroEasing,
+      useNativeDriver: true
+    }).start(({ finished }) => {
+      if (finished) endRef.current?.(true);
+    });
+  }, [mounted]);
+  const target = to ?? bounds;
+  const start = target ? heroTransform(from, target, 0) : null;
+  const morphStyle = reduce || !start ? { opacity: progress } : {
+    transform: [
+      {
+        translateX: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [start.translateX, 0]
+        })
+      },
+      {
+        translateY: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [start.translateY, 0]
+        })
+      },
+      {
+        scaleX: progress.interpolate({ inputRange: [0, 1], outputRange: [start.scaleX, 1] })
+      },
+      {
+        scaleY: progress.interpolate({ inputRange: [0, 1], outputRange: [start.scaleY, 1] })
+      }
+    ]
+  };
+  const contentOpacity = reduce ? progress : progress.interpolate({
+    inputRange: [NAV_HERO_CONTENT_FADE_START, 1],
+    outputRange: [0, 1],
+    extrapolate: "clamp"
+  });
+  const frame = to ? { position: "absolute", top: to.y, start: to.x, width: to.width, height: to.height } : StyleSheet.absoluteFillObject;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: styles.overlayRoot,
+      pointerEvents: mounted ? "auto" : "none",
+      onLayout: onRootLayout,
+      children: mounted ? /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          role: "group",
+          accessibilityLabel,
+          style: [styles.heroSurface, frame, morphStyle],
+          children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.heroContent, { opacity: contentOpacity }], children })
+        }
+      ) : null
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  // Both the modal and the hero layer float over whatever container they are
+  // placed in, rather than taking part in its flow.
+  overlayRoot: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: theme.z.overlay
+  },
+  scrim: {
+    backgroundColor: theme.color.scrim
+  },
+  // `NAV_MODAL_TOP_INSET` (34px) is the design reference's literal: the sliver of
+  // the covered screen that keeps the presentation reading as "over".
+  // loam-contrast-ignore — the boundary here is the scrim, not the shadow.
+  // `color.scrim` is a 44% wash and is *not* re-resolved by high contrast, so
+  // this surface is still separated from the page when the elevation zeroes
+  // out. A border would put a hairline around every modal for no gain.
+  panel: {
+    position: "absolute",
+    top: NAV_MODAL_TOP_INSET,
+    start: 0,
+    end: 0,
+    bottom: 0,
+    backgroundColor: theme.color.surface,
+    borderTopStartRadius: theme.radius["2xl"],
+    borderTopEndRadius: theme.radius["2xl"],
+    overflow: "hidden",
+    zIndex: theme.z.modal,
+    ...theme.shadow.lg
+  },
+  modalBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: NAV_MODAL_HEADER_HEIGHT,
+    paddingHorizontal: theme.space.s3,
+    gap: theme.space.s2,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  modalAction: {
+    minHeight: theme.tapMin,
+    minWidth: theme.space.s7,
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    paddingHorizontal: theme.space.s1
+  },
+  modalActionPressed: {
+    backgroundColor: theme.state.pressed
+  },
+  // The dismiss is quieter than the confirm on purpose — it is always available,
+  // so it does not need to compete.
+  modalDismiss: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text2
+  },
+  modalConfirm: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.accentStrong
+  },
+  modalTitle: {
+    flex: 1,
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text
+  },
+  modalBody: {
+    flex: 1,
+    padding: theme.layout.screenPad
+  },
+  tabRoot: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  // Panes overlap so they can cross-fade; the inactive ones are taken out of
+  // layout (and out of the accessibility tree) rather than stacked invisibly.
+  tabPane: {
+    ...StyleSheet.absoluteFillObject
+  },
+  tabPaneHidden: {
+    display: "none"
+  },
+  heroSurface: {
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.md,
+    overflow: "hidden",
+    zIndex: theme.z.raised
+  },
+  heroContent: {
+    flex: 1
+  }
+}));
+
+export { NAV_AXIS_LOCK_SLOP, NAV_EDGE_HIT_WIDTH, NAV_HERO_CONTENT_FADE_START, NAV_MODAL_HEADER_HEIGHT, NAV_MODAL_TOP_INSET, NAV_PARALLAX_RATIO, NAV_SWIPE_COMPLETE_FRACTION, NAV_SWIPE_COMPLETE_VELOCITY, NAV_TAB_FADE_SCALE, NavBackButton, NavHero, NavModal, NavTabView, NavigationStack, claimsHorizontalAxis, clampProgress, directionSign, heroContentOpacity, heroTransform, incomingTranslateX, isFromLeadingEdge, modalTranslateY, parallaxDimOpacity, parallaxTranslateX, progressFromEdgeSwipe, shouldCompletePop, tabFadeScale };