@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-BL37SW6G.js

@@ -0,0 +1,1314 @@
+import { useOptionalConfirm } from './chunk-7QOYGENL.js';
+import { alignItemsStyle } from './chunk-TUACVJNG.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+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';
+
+// src/navigation/labels.ts
+var DEFAULT_NAVIGATION_LABELS = {
+  back: "Back",
+  backTo: (title) => `Back to ${title}`,
+  cancel: "Cancel",
+  dismiss: "Dismiss",
+  discardTitle: "Discard changes?",
+  discardBody: "Your changes won\u2019t be saved.",
+  discard: "Discard",
+  keepEditing: "Keep editing"
+};
+
+// 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_PREDICTIVE_SCALE = 0.9;
+var NAV_PREDICTIVE_SHIFT = 0.05;
+var NAV_PREDICTIVE_SPAN = 0.4;
+var NAV_PREDICTIVE_FADE = 0.7;
+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 isFromTrailingEdge(x, width, rtl, edgeWidth = NAV_EDGE_HIT_WIDTH) {
+  return isFromLeadingEdge(x, width, !rtl, edgeWidth);
+}
+function predictiveTravel(dx, fromLeading, rtl) {
+  return dx * directionSign(rtl) * (fromLeading ? 1 : -1);
+}
+function predictivePeek(travel, width) {
+  if (width <= 0) return 0;
+  return clampProgress(travel / (width * NAV_PREDICTIVE_SPAN));
+}
+function predictiveScale(peek) {
+  return 1 - (1 - NAV_PREDICTIVE_SCALE) * clampProgress(peek);
+}
+function predictiveShift(peek, width, fromLeading, rtl) {
+  return clampProgress(peek) * width * NAV_PREDICTIVE_SHIFT * directionSign(rtl) * (fromLeading ? 1 : -1);
+}
+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,
+  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);
+  const theme = useLoamTheme("navigation");
+  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 || 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, busy: loading || void 0 },
+      "aria-busy": loading || void 0,
+      disabled,
+      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 && motion === "full" && !theme.reduceMotion ? styles.backPressed : null
+      ],
+      children: [
+        leading,
+        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { "aria-hidden": true, color: ink }) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: platform === "iOS" ? back : arrow,
+            size: platform === "iOS" ? theme.icon.md : theme.icon.lg,
+            color: ink
+          }
+        ),
+        showTitle ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: 1,
+            style: [styles.backLabel, tone !== "default" ? { color: ink } : null],
+            children: previousTitle ?? labels.back
+          }
+        ) : null,
+        trailing
+      ]
+    }
+  );
+}
+function NavBar({
+  platform,
+  title,
+  previousTitle,
+  onBack,
+  backLabel,
+  labels,
+  leading,
+  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,
+        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;
+  node.inert = hidden;
+}
+function navPlatform(platform) {
+  return platform === "Android" ? "Android" : "iOS";
+}
+function NavStack({
+  screens,
+  onPop,
+  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);
+  const backLabel = backLabelProp ?? labels.back;
+  const theme = useLoamTheme("navigation");
+  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] = 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;
+  const [peekFrom, setPeekFrom] = React.useState(null);
+  const [exiting, setExiting] = React.useState(null);
+  const over = exiting ?? top;
+  const under = exiting ? top : below;
+  const page = theme.motion.page;
+  const pageEasing = React.useMemo(() => Easing.bezier(...page.easing), [page.easing]);
+  const live = React.useRef({ top, below, onPop, onExit, width, rtl });
+  live.current = { top, below, onPop, onExit, width, rtl };
+  const screenRef = React.useRef(null);
+  const announceRef = React.useRef(null);
+  const pendingFocusRef = React.useRef(null);
+  const skipExitRef = React.useRef(false);
+  const historyRef = React.useRef(null);
+  const revealTop = React.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]
+  );
+  React.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);
+  });
+  React.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);
+      peek.setValue(0);
+      setPeekFrom(null);
+      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]);
+  React.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 ?? 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 });
+  swipeRef.current = { active: swipeActive, page, pageEasing, platform, theme };
+  const settle = (t, android, speed, w) => {
+    if (android) {
+      const velocity2 = w > 0 ? speed / (w * NAV_PREDICTIVE_SPAN) * 1e3 : 0;
+      Animated.spring(peek, {
+        toValue: 0,
+        ...springConfig(t, "ss", { velocity: velocity2 }),
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished) setPeekFrom(null);
+      });
+      return;
+    }
+    const velocity = w > 0 ? -speed / w * 1e3 : 0;
+    Animated.spring(progress, {
+      toValue: 1,
+      ...springConfig(t, "ss", { velocity }),
+      useNativeDriver: true
+    }).start();
+  };
+  const settleRef = React.useRef(settle);
+  settleRef.current = settle;
+  const pan = React.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;
+        const x = startXRef.current;
+        if (isFromLeadingEdge(x, w, isRtl)) {
+          fromLeadingRef.current = true;
+          return true;
+        }
+        if (swipeRef.current.platform === "Android" && isFromTrailingEdge(x, w, isRtl)) {
+          fromLeadingRef.current = false;
+          return true;
+        }
+        return false;
+      },
+      onPanResponderGrant: () => {
+        if (swipeRef.current.platform !== "Android") return;
+        peek.stopAnimation();
+        setPeekFrom(fromLeadingRef.current ? "leading" : "trailing");
+      },
+      onPanResponderMove: (_e, g) => {
+        const { width: w, rtl: isRtl } = live.current;
+        if (swipeRef.current.platform === "Android") {
+          const travel = predictiveTravel(g.dx, fromLeadingRef.current, isRtl);
+          peek.setValue(predictivePeek(travel, w));
+          return;
+        }
+        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, platform: os } = swipeRef.current;
+        const android = os === "Android";
+        const fromLeading2 = android ? fromLeadingRef.current : true;
+        const travel = predictiveTravel(g.dx, fromLeading2, isRtl);
+        const speed = predictiveTravel(g.vx, fromLeading2, isRtl);
+        if (current && shouldCompletePop(travel, speed, w, false)) {
+          Animated.timing(progress, {
+            toValue: 0,
+            duration: spec.duration,
+            easing,
+            useNativeDriver: true
+          }).start(({ finished }) => {
+            if (!finished) return;
+            skipExitRef.current = true;
+            pop?.(current, android ? "system-back" : "edge-swipe");
+          });
+          return;
+        }
+        settleRef.current(swipeRef.current.theme, android, speed, w);
+      },
+      onPanResponderTerminate: () => {
+        const { platform: os, theme: t } = swipeRef.current;
+        settleRef.current(t, os === "Android", 0, live.current.width);
+      }
+    }),
+    [progress, peek]
+  );
+  const overTranslateX = React.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [incomingTranslateX(0, width, rtl), incomingTranslateX(1, width, rtl)]
+    }),
+    [progress, width, rtl]
+  );
+  const underTranslateX = React.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [parallaxTranslateX(0, width, rtl), parallaxTranslateX(1, width, rtl)]
+    }),
+    [progress, width, rtl]
+  );
+  const dimOpacity = React.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [parallaxDimOpacity(0), parallaxDimOpacity(1)]
+    }),
+    [progress]
+  );
+  const fromLeading = peekFrom !== "trailing";
+  const peekScale = React.useMemo(
+    () => peek.interpolate({
+      inputRange: [0, 1],
+      outputRange: [predictiveScale(0), predictiveScale(1)]
+    }),
+    [peek]
+  );
+  const peekShift = React.useMemo(
+    () => peek.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, predictiveShift(1, width, fromLeading, rtl)]
+    }),
+    [peek, width, fromLeading, rtl]
+  );
+  const peekUnwind = React.useMemo(
+    () => peek.interpolate({ inputRange: [0, 1], outputRange: [1, 0], extrapolate: "clamp" }),
+    [peek]
+  );
+  const peekFade = React.useMemo(
+    () => peek.interpolate({ inputRange: [0, 1], outputRange: [1, NAV_PREDICTIVE_FADE] }),
+    [peek]
+  );
+  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 || 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];
+  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: (node) => {
+          if (exiting) screenRef.current = node;
+          setInert(node, !exiting);
+        },
+        role: "group",
+        accessibilityLabel: under.title,
+        ...exiting ? null : {
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          pointerEvents: "none",
+          "aria-hidden": true
+        },
+        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,
+              labelled: showBackLabel,
+              labels: labelsProp,
+              size,
+              density,
+              variant
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: styles.body, children: under.content }),
+          reduce ? null : /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              pointerEvents: "none",
+              style: [StyleSheet.absoluteFill, styles.dim, { opacity: underDim }]
+            }
+          )
+        ]
+      },
+      under.key
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        ref: (node) => {
+          if (!exiting) screenRef.current = node;
+          setInert(node, exiting !== null);
+        },
+        role: "group",
+        accessibilityLabel: over.title,
+        pointerEvents: exiting ? "none" : "auto",
+        accessibilityElementsHidden: exiting !== null,
+        importantForAccessibility: exiting ? "no-hide-descendants" : "auto",
+        ...exiting ? { "aria-hidden": true } : null,
+        style: [
+          styles.screen,
+          overIsRoot ? styles.screenRoot : styles.screenPushed,
+          peekFrom !== null && !reduce ? styles.screenPeeking : null,
+          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,
+              labelled: showBackLabel,
+              labels: labelsProp,
+              size,
+              density,
+              variant
+            }
+          ),
+          /* @__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
+  },
+  // A screen held in a predictive-back preview reads as a card lifted off the
+  // stack: rounded and clipped to the radius while it is shrunk.
+  screenPeeking: {
+    borderRadius: theme.radius.lg,
+    overflow: "hidden"
+  },
+  // 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 `NavHeader`'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
+  },
+  // 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.semibold,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text,
+    variants: {
+      platform: {
+        iOS: {},
+        // 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
+        }
+      }
+    }
+  },
+  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: {
+          width: theme.hit.lg,
+          height: theme.hit.lg,
+          paddingEnd: 0,
+          justifyContent: "center"
+        }
+      }
+    }
+  },
+  backPressed: {
+    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.regular,
+    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;
+var ANDROID_MODAL_BAR_H = 64;
+function setInert2(node, hidden) {
+  if (Platform.OS !== "web" || node == null) return;
+  node.inert = hidden;
+}
+function NavModal({
+  open,
+  title,
+  onDismiss,
+  dismissLabel: dismissLabelProp,
+  confirmLabel,
+  onConfirm,
+  confirmDisabled = false,
+  dirty = false,
+  loading = false,
+  tone = "accent",
+  size = "md",
+  side = "bottom",
+  presentation = "overlay",
+  platform: platformProp,
+  children,
+  announcement,
+  scrimLabel: scrimLabelProp,
+  labels: labelsProp
+}) {
+  const labels = useLabels("navigation", DEFAULT_NAVIGATION_LABELS, labelsProp);
+  const dismissLabel = dismissLabelProp ?? labels.cancel;
+  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);
+  const enter = theme.motion.enter;
+  const exit = theme.motion.exit;
+  const enterEasing = React.useMemo(() => Easing.bezier(...enter.easing), [enter.easing]);
+  const exitEasing = React.useMemo(() => Easing.bezier(...exit.easing), [exit.easing]);
+  React.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]);
+  React.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] = React.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 = React.useMemo(
+    () => progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        modalTranslateY(0, panelHeight) * (side === "top" ? -1 : 1),
+        modalTranslateY(1, 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(
+      Pressable,
+      {
+        style: StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: scrimLabel,
+        onPress: requestDismiss
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        role: "dialog",
+        accessibilityViewIsModal: true,
+        accessibilityLabel: title,
+        onLayout: onPanelLayout,
+        style: [
+          styles.panel,
+          side === "top" ? styles.panelTop : null,
+          { transform: [{ translateY }] }
+        ],
+        children: [
+          header,
+          /* @__PURE__ */ jsx(View, { style: styles.modalBody, children })
+        ]
+      }
+    )
+  ] });
+}
+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);
+  const visited = React.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 = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    const previous = previousRef.current;
+    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, {
+      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,
+    {
+      "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,
+  children,
+  onMorphEnd,
+  accessibilityLabel,
+  announcement
+}) {
+  const theme = useLoamTheme("navigation");
+  const { styles } = useStyles(sheet2);
+  const reduce = theme.reduceMotion;
+  const hero = theme.motion.hero;
+  const heroEasing = React.useMemo(() => Easing.bezier(...hero.easing), [hero.easing]);
+  const [mounted, setMounted] = React.useState(active);
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const [bounds, setBounds] = React.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 = React.useRef(onMorphEnd);
+  endRef.current = onMorphEnd;
+  React.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]);
+  React.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,
+                orientation ? { flexDirection: orientation === "horizontal" ? "row" : "column" } : null,
+                alignItemsStyle(align),
+                { 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
+  },
+  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",
+    justifyContent: "space-between",
+    height: NAV_MODAL_HEADER_HEIGHT,
+    paddingHorizontal: theme.space.s3,
+    gap: theme.space.s2,
+    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[72],
+    justifyContent: "center",
+    alignItems: "flex-start"
+  },
+  modalActionEnd: {
+    alignItems: "flex-end"
+  },
+  modalActionPressed: {
+    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
+  },
+  // iOS: Cancel is the regular link (17 / 400), Save the emphasised one (17 / 600).
+  modalDismiss: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.regular,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.accentStrong
+  },
+  modalConfirm: {
+    fontFamily: theme.font.sans,
+    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",
+    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_PREDICTIVE_FADE, NAV_PREDICTIVE_SCALE, NAV_PREDICTIVE_SHIFT, NAV_PREDICTIVE_SPAN, NAV_SWIPE_COMPLETE_FRACTION, NAV_SWIPE_COMPLETE_VELOCITY, NAV_TAB_FADE_SCALE, NavBackButton, NavHero, NavModal, NavStack, NavTabView, claimsHorizontalAxis, clampProgress, directionSign, heroContentOpacity, heroTransform, incomingTranslateX, isFromLeadingEdge, isFromTrailingEdge, modalTranslateY, parallaxDimOpacity, parallaxTranslateX, predictivePeek, predictiveScale, predictiveShift, predictiveTravel, progressFromEdgeSwipe, shouldCompletePop, tabFadeScale };