@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-U5NLHYV6.js → chunk-7CGJBQUA.js}

@@ -1,12 +1,48 @@
+import { Sheet } from './chunk-B7JZ3N5G.js';
 import { expandedProps } from './chunk-W23G6JLF.js';
 import { haptics } from './chunk-NY2U3PBI.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import * as React from 'react';
-import { useWindowDimensions, Animated, Easing, Modal, View, StyleSheet, Pressable, Text, Platform } from 'react-native';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useWindowDimensions, Platform, View, Pressable, Text, Animated, Easing, Modal, StyleSheet } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var ANDROID_ANCHORED_MENU_MAX = 5;
+function resolveOverlayPresentation({
+  kind,
+  platform,
+  width,
+  regularWidth,
+  itemCount = 0,
+  presentation
+}) {
+  if (presentation) return presentation;
+  if (platform === "ios") {
+    if (width >= regularWidth) return "anchored";
+    return kind === "combobox" ? "full" : "sheet";
+  }
+  if (kind === "menu" && itemCount <= ANDROID_ANCHORED_MENU_MAX) return "anchored";
+  return kind === "combobox" ? "full" : "sheet";
+}
+function useOverlayPresentation({
+  kind,
+  itemCount,
+  presentation,
+  platform
+}) {
+  const theme = useLoamTheme("overlay-presentation");
+  const { width } = useWindowDimensions();
+  const os = platform ?? (Platform.OS === "ios" ? "ios" : Platform.OS === "android" ? "android" : theme.platform === "iOS" ? "ios" : "android");
+  return resolveOverlayPresentation({
+    kind,
+    platform: os,
+    width,
+    itemCount,
+    presentation,
+    regularWidth: theme.breakpoint.tablet
+  });
+}
 var LONG_PRESS_DELAY_MS = 360;
 var PRE_PRESS_SCALE = 0.95;
 var LIFT_SCALE = 1.06;
@@ -21,6 +57,7 @@ var MENU_OFFSET_Y_ANDROID = -6;
 var MENU_OFFSET_X_IOS = 0;
 var MENU_OFFSET_X_ANDROID = 10;
 var MENU_FROM_SCALE_IOS = 0.7;
+var PREVIEW_MAX_WIDTH = 320;
 var MENU_FROM_SCALE_ANDROID = 0.85;
 var IOS_MENU_TRANSLUCENCY = 0.82;
 var IOS_FROST_OPACITY = 0.22;
@@ -61,18 +98,101 @@ function useResolvedPlatform(explicit) {
   if (Platform.OS === "android") return "android";
   return theme.platform === "iOS" ? "ios" : "android";
 }
-function ContextMenuOverlay({
+function ContextMenuOverlay(props) {
+  const os = useResolvedPlatform(props.platform);
+  const presentation = useOverlayPresentation({
+    kind: "menu",
+    itemCount: props.items.length,
+    platform: os
+  });
+  if (os === "android" && presentation !== "anchored" && !props.preview) {
+    return /* @__PURE__ */ jsx(ContextMenuSheet, { ...props });
+  }
+  return /* @__PURE__ */ jsx(AnchoredContextMenu, { ...props });
+}
+function sizeType(theme, size) {
+  if (size === "sm") return theme.type.footnote;
+  if (size === "lg") return theme.type.body;
+  return null;
+}
+function ContextMenuSheet({
+  open,
+  onClose,
+  items,
+  accessibilityLabel,
+  labels: labelsProp,
+  density,
+  size
+}) {
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const { styles, theme } = useStyles(sheet, { platform: "android" });
+  const ordered = orderContextMenuItems(items);
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, children: /* @__PURE__ */ jsxs(View, { accessibilityRole: "menu", accessibilityLabel: accessibilityLabel ?? labels.actions, children: [
+    ordered.map((item) => {
+      const tint = item.destructive ? theme.color.dangerOnSoft : theme.color.text;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "menuitem",
+          accessibilityLabel: item.label,
+          accessibilityState: { disabled: item.disabled === true, checked: item.checked },
+          disabled: item.disabled === true,
+          onPress: () => {
+            haptics.selection();
+            onClose();
+            item.onSelect?.();
+          },
+          style: ({ pressed }) => [
+            styles.sheetRow,
+            density === "compact" ? { paddingVertical: theme.space.s2 } : null,
+            pressed ? item.destructive ? styles.rowPressedDanger : styles.sheetRowPressed : null,
+            item.disabled ? styles.rowDisabled : null
+          ],
+          children: [
+            item.icon ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: item.icon,
+                size: theme.icon.md,
+                color: item.destructive ? theme.color.dangerOnSoft : theme.color.text2
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(Text, { style: [styles.sheetLabel, sizeType(theme, size), { color: tint }], children: item.label }),
+            item.checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: tint }) : null
+          ]
+        },
+        item.key
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "menuitem",
+        accessibilityLabel: labels.cancel,
+        onPress: onClose,
+        style: ({ pressed }) => [styles.sheetRow, pressed ? styles.sheetRowPressed : null],
+        children: /* @__PURE__ */ jsx(Text, { style: [styles.sheetLabel, styles.sheetCancel], children: labels.cancel })
+      }
+    )
+  ] }) });
+}
+function AnchoredContextMenu({
   open,
   onClose,
   items,
   anchor,
   platform,
   lift,
+  preview,
+  onPreviewPress,
+  previewLabel,
   radius,
   accessibilityLabel,
   closeLabel,
   labels: labelsProp,
-  motion = "full"
+  motion = "full",
+  density,
+  size
 }) {
   const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
   const theme = useLoamTheme("context-menu");
@@ -215,6 +335,13 @@ function ContextMenuOverlay({
   const place = placeContextMenu(rect, window, os);
   const ordered = orderContextMenuItems(items);
   const liftRadius = radius ?? theme.radius.lg;
+  const [columnHeight, setColumnHeight] = React.useState(0);
+  const withPreview = ios && preview != null;
+  const columnWidth = Math.min(PREVIEW_MAX_WIDTH, window.width - theme.space.s4 * 2);
+  const columnTop = Math.max(
+    MENU_MIN_TOP,
+    Math.min(rect.y + rect.height + theme.space.s2, window.height - columnHeight - theme.space.s4)
+  );
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -237,7 +364,7 @@ function ContextMenuOverlay({
             }
           )
         ] }),
-        ios && lift != null ? /* @__PURE__ */ jsx(
+        ios && lift != null && !withPreview ? /* @__PURE__ */ jsx(
           Animated.View,
           {
             pointerEvents: "none",
@@ -260,7 +387,61 @@ function ContextMenuOverlay({
             children: lift
           }
         ) : null,
-        /* @__PURE__ */ jsxs(
+        withPreview ? /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            onLayout: (e) => setColumnHeight(e.nativeEvent.layout.height),
+            style: [
+              styles.previewColumn,
+              {
+                top: columnTop,
+                left: (window.width - columnWidth) / 2,
+                width: columnWidth,
+                opacity: menuOpacity,
+                transform: [{ scale: menuScale }]
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: previewLabel,
+                  onPress: () => {
+                    onClose();
+                    onPreviewPress?.();
+                  },
+                  style: styles.platter,
+                  children: preview
+                }
+              ),
+              ordered.length > 0 ? /* @__PURE__ */ jsxs(
+                View,
+                {
+                  accessibilityViewIsModal: true,
+                  accessibilityRole: "menu",
+                  accessibilityLabel: accessibilityLabel ?? labels.actions,
+                  style: [styles.menu, styles.menuInColumn, { width: place.width }],
+                  children: [
+                    /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.translucency] }),
+                    ordered.map((item, i) => /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        item,
+                        platform: os,
+                        last: i === ordered.length - 1,
+                        onClose,
+                        density,
+                        size
+                      },
+                      item.key
+                    ))
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
           Animated.View,
           {
             accessibilityViewIsModal: true,
@@ -284,7 +465,9 @@ function ContextMenuOverlay({
                   item,
                   platform: os,
                   last: i === ordered.length - 1,
-                  onClose
+                  onClose,
+                  density,
+                  size
                 },
                 item.key
               ))
@@ -299,7 +482,10 @@ function MenuItem({
   item,
   platform,
   last,
-  onClose
+  onClose,
+  density,
+  size: labelSize,
+  highlighted = false
 }) {
   const theme = useLoamTheme("context-menu");
   const ios = platform === "ios";
@@ -354,31 +540,45 @@ function MenuItem({
     if (ios) onClose();
     else timer.current = setTimeout(onClose, theme.duration.fast);
   };
-  const tint = item.destructive === true ? theme.color.danger : theme.color.text;
+  const tint = item.destructive === true ? theme.color.dangerOnSoft : theme.color.text;
   const glyph = item.icon == null ? null : /* @__PURE__ */ jsx(
     Icon,
     {
       name: item.icon,
       size: theme.icon.sm,
-      color: item.destructive === true ? theme.color.danger : theme.color.text3
+      color: item.destructive === true ? theme.color.dangerOnSoft : theme.color.text3
     }
   );
+  const check = item.checked ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: tint }) : null;
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "menuitem",
       accessibilityLabel: item.label,
+      accessibilityState: { disabled: item.disabled === true, checked: item.checked },
+      disabled: item.disabled === true,
       onLayout,
       onPress,
       style: ({ pressed }) => [
         styles.item,
-        // iOS has no ripple, so it gets the state layer instead.
-        pressed && ios ? styles.itemPressed : null
+        density === "compact" ? { paddingVertical: theme.space.s2 } : null,
+        // iOS has no ripple, so it gets the state layer instead; a destructive
+        // row presses to the danger-soft fill.
+        pressed && ios || highlighted ? item.destructive ? styles.rowPressedDanger : styles.itemPressed : null,
+        item.disabled === true ? styles.rowDisabled : null
       ],
       children: [
         ios ? null : /* @__PURE__ */ jsx(View, { style: styles.androidGlyph, children: glyph }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.itemLabel, { color: tint }], numberOfLines: 1, children: item.label }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [styles.itemLabel, sizeType(theme, labelSize), { color: tint }],
+            numberOfLines: 1,
+            children: item.label
+          }
+        ),
         ios ? glyph : null,
+        check,
         ripple ? /* @__PURE__ */ jsx(
           Animated.View,
           {
@@ -401,10 +601,56 @@ function MenuItem({
     }
   );
 }
+function ContextMenuPreview({
+  items,
+  platform,
+  highlightedKey,
+  title,
+  density,
+  size,
+  labels: labelsProp
+}) {
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const os = useResolvedPlatform(platform);
+  const { styles } = useStyles(sheet, { platform: os });
+  const ordered = orderContextMenuItems(items);
+  const { width: menuWidth } = placeContextMenu(
+    { x: 0, y: 0, height: 0 },
+    { width: Infinity, height: Infinity },
+    os
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "menu",
+      accessibilityLabel: title ?? labels.actions,
+      style: [styles.menu, styles.menuInline, { width: menuWidth }],
+      children: [
+        os === "ios" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.translucency] }) : null,
+        title ? /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: title }) : null,
+        ordered.map((item, i) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            item,
+            platform: os,
+            last: i === ordered.length - 1,
+            onClose: () => {
+            },
+            density,
+            size,
+            highlighted: item.key === highlightedKey
+          },
+          item.key
+        ))
+      ]
+    }
+  );
+}
 var DEFAULT_LABELS = {
   actions: "Actions",
   closeMenu: "Close menu",
-  showActions: "Show actions"
+  showActions: "Show actions",
+  cancel: "Cancel"
 };
 function ContextMenu({
   items,
@@ -414,10 +660,14 @@ function ContextMenu({
   platform,
   accessibilityLabel,
   radius,
+  androidRipple,
   style,
   onOpen,
   onClose,
   motion = "full",
+  density,
+  size,
+  selected = false,
   labels: labelsProp
 }) {
   const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
@@ -472,10 +722,14 @@ function ContextMenu({
         children: /* @__PURE__ */ jsx(
           Pressable,
           {
-            style: { borderRadius: triggerRadius },
+            style: [
+              { borderRadius: triggerRadius },
+              selected ? { backgroundColor: theme.state.selected } : null
+            ],
+            android_ripple: androidRipple,
             accessibilityRole: "button",
             accessibilityLabel,
-            accessibilityState: { disabled, expanded: open },
+            accessibilityState: { disabled, expanded: open, selected: selected || void 0 },
             ...expandedProps(open),
             accessibilityActions: [{ name: "longpress", label: labels.showActions }],
             onAccessibilityAction: (e) => {
@@ -523,12 +777,33 @@ function ContextMenu({
         radius: triggerRadius,
         accessibilityLabel,
         labels: labelsProp,
-        motion
+        motion,
+        density,
+        size
       }
     )
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
+  sheetRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.space[48],
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md
+  },
+  sheetRowPressed: { backgroundColor: theme.state.pressed },
+  sheetLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16]
+  },
+  sheetCancel: {
+    textAlign: "center",
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
   /** The dim behind the menu. iOS whispers (`scrimLight`), Android commits (`scrim`). */
   dim: {
     variants: {
@@ -548,6 +823,25 @@ var sheet = createStyleSheet((theme) => ({
     position: "absolute",
     ...theme.shadow.lg
   },
+  /** The preview platter and the menu under it (iOS context preview). */
+  previewColumn: {
+    position: "absolute",
+    gap: theme.space.s2,
+    alignItems: "flex-start",
+    transformOrigin: "top center"
+  },
+  platter: {
+    alignSelf: "stretch",
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    padding: theme.space.s4,
+    gap: theme.space.s3,
+    ...theme.shadow.lg
+  },
+  /** The menu laid out in the column rather than placed absolutely. */
+  menuInColumn: { position: "relative", transformOrigin: "top left" },
   /** The in-place trigger while its copy is lifted. */
   liftedAway: { opacity: 0 },
   menu: {
@@ -556,11 +850,12 @@ var sheet = createStyleSheet((theme) => ({
     // The reference sets `transform-origin: top left` so the menu grows out of
     // the anchor's corner. RN 0.74+ supports `transformOrigin`.
     transformOrigin: "top left",
-    ...theme.shadow.lg,
+    // An anchored overlay sits at sh-md (was sh-lg); the lifted copy keeps lg.
+    ...theme.shadow.md,
     variants: {
       platform: {
-        // Reference radius 16 → `radius.lg` (19); 12 → `radius.md` (13).
-        ios: { borderRadius: theme.radius.lg },
+        // r 12 on both platforms → `radius.md`.
+        ios: { borderRadius: theme.radius.md },
         android: {
           borderRadius: theme.radius.md,
           backgroundColor: theme.color.surface,
@@ -604,6 +899,22 @@ var sheet = createStyleSheet((theme) => ({
     }
   },
   itemPressed: { backgroundColor: theme.state.pressed },
+  // ContextMenuPreview: the anchored menu in flow, at the reference width.
+  menuInline: { position: "relative" },
+  sectionLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    textTransform: "uppercase",
+    color: theme.color.text3,
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s3,
+    paddingBottom: theme.space.s1
+  },
+  // loam-contrast-ignore — transient pressed-row wash inside a bordered menu; the row has no surface of its own.
+  rowPressedDanger: { backgroundColor: theme.color.dangerSoft },
+  rowDisabled: { opacity: theme.state.disabledOpacity },
   itemLabel: {
     flexShrink: 1,
     fontFamily: theme.font.sans,
@@ -631,4 +942,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { ContextMenu, ContextMenuOverlay, LONG_PRESS_DELAY_MS, orderContextMenuItems, placeContextMenu };
+export { ANDROID_ANCHORED_MENU_MAX, ContextMenu, ContextMenuOverlay, ContextMenuPreview, LONG_PRESS_DELAY_MS, orderContextMenuItems, placeContextMenu, useOverlayPresentation };

package/dist/{chunk-I4FHVKEC.js → chunk-7IVF6JLJ.js}

@@ -1,4 +1,5 @@
-import { Spinner } from './chunk-KQZ3GLHR.js';
+import { alignItemsStyle } from './chunk-TUACVJNG.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
 import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { FlatList, View } from 'react-native';
@@ -13,8 +14,15 @@ function loadMoreIfNeeded(opts) {
 }
 var FOOTER_SPINNER_SIZE = "lg";
 function Footer({ label }) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(Spinner, { size: FOOTER_SPINNER_SIZE, accessibilityLabel: label }) });
+  const { styles, theme } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      size: FOOTER_SPINNER_SIZE,
+      color: theme.color.text2,
+      accessibilityLabel: label
+    }
+  ) });
 }
 function InfiniteList({
   data,
@@ -28,7 +36,9 @@ function InfiniteList({
   // not animate (recycled rows would flicker). Destructured so it is never
   // forwarded onto the underlying FlatList.
   motion: _motion = "full",
-  labels: labelsProp
+  labels: labelsProp,
+  orientation = "vertical",
+  align
 }) {
   const { styles } = useStyles(sheet);
   const labels = useLabels("infiniteList", DEFAULT_LABELS, labelsProp);
@@ -48,7 +58,8 @@ function InfiniteList({
       keyExtractor,
       onEndReached: handleEndReached,
       onEndReachedThreshold,
-      contentContainerStyle: styles.content,
+      horizontal: orientation === "horizontal",
+      contentContainerStyle: [styles.content, alignItemsStyle(align)],
       ListFooterComponent: loading ? /* @__PURE__ */ jsx(Footer, { label: labels.loadingMore }) : null
     }
   );

package/dist/chunk-7IWCGXYA.js

@@ -0,0 +1,143 @@
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PageHeader({
+  breadcrumb,
+  title,
+  titleAdornment,
+  meta,
+  actions,
+  back,
+  tabs,
+  // Accepted for API consistency; intentionally unused (see PageHeaderMotion).
+  motion: _motion = "none",
+  condensed = false,
+  density = "comfortable",
+  variant = "plain",
+  size,
+  titleFace = "system",
+  platform
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("pageHeader");
+  const android = isAndroidIdiom(theme, platform);
+  const titleType = android ? condensed ? {
+    fontSize: theme.fontSize[22],
+    lineHeight: theme.space[28],
+    fontWeight: theme.fontWeight.regular
+  } : {
+    fontSize: theme.fontSize[28],
+    lineHeight: theme.space[36],
+    fontWeight: theme.fontWeight.regular
+  } : condensed ? {
+    fontSize: theme.fontSize[17],
+    lineHeight: theme.space[22],
+    fontWeight: theme.fontWeight.semibold
+  } : {
+    // iOS Large Title (34 on the Dynamic Type base), at 700.
+    fontSize: theme.type.largeTitle.fontSize,
+    lineHeight: theme.type.largeTitle.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    // loam-audit-ignore raw-style-length: F19 pins the HIG large-title tracking at 0.37; the role token rounds it to 0.4.
+    letterSpacing: 0.37
+  };
+  const smallTitle = size === "sm" && !condensed ? android ? { fontSize: theme.fontSize[22], lineHeight: theme.space[28] } : {
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    letterSpacing: theme.type.title1.letterSpacing
+  } : null;
+  const metaType = android ? { fontSize: theme.fontSize[14], lineHeight: theme.space[20] } : { fontSize: theme.fontSize[15], lineHeight: theme.space[20] };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.container,
+        condensed && styles.condensed,
+        density === "compact" && styles.compact,
+        variant !== "plain" && styles.bordered,
+        variant === "filled" && styles.filled
+      ],
+      children: [
+        back != null ? /* @__PURE__ */ jsx(View, { style: styles.backRow, children: back }) : null,
+        breadcrumb != null ? /* @__PURE__ */ jsx(View, { children: breadcrumb }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.titleGroup, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                accessibilityRole: "header",
+                numberOfLines: condensed ? 1 : void 0,
+                style: [styles.title, titleType, smallTitle, titleFace === "brand" && styles.titleBrand],
+                children: title
+              }
+            ),
+            titleAdornment != null ? /* @__PURE__ */ jsx(View, { style: styles.adornment, children: titleAdornment }) : null
+          ] }),
+          actions != null ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions }) : null
+        ] }),
+        meta != null && !condensed ? typeof meta === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.meta, metaType], children: meta }) : /* @__PURE__ */ jsx(View, { children: meta }) : null,
+        tabs != null ? /* @__PURE__ */ jsx(View, { style: styles.tabs, children: tabs }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s4,
+    backgroundColor: theme.color.bg,
+    borderBottomWidth: theme.borderWidth.hair,
+    borderBottomColor: "transparent"
+  },
+  condensed: { paddingVertical: theme.space.s2, borderBottomColor: theme.color.border },
+  compact: { paddingVertical: theme.space.s2, gap: theme.space.s2 },
+  bordered: { borderBottomColor: theme.color.border },
+  filled: { backgroundColor: theme.color.surface2 },
+  backRow: { flexDirection: "row", alignItems: "center" },
+  // Wraps the actions block below the title on a narrow viewport.
+  titleRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    // Actions sit on the title's first baseline (Final 05).
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: theme.space.s3
+  },
+  // `flexShrink: 1` + `minWidth: 0` lets a long title ellipsize / wrap instead
+  // of pushing the actions off the row.
+  titleGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 1,
+    minWidth: 0,
+    gap: theme.space.s2
+  },
+  // `title1` (28/34) is the content page-title role on the mobile ramp — one
+  // step below the app bar's `largeTitle`, so the two never read as the same
+  // element.
+  // The OS face; size, weight and tracking come from the per-OS ramp above.
+  title: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    flexShrink: 1
+  },
+  // The brand display face; the size ramp stays the OS one.
+  titleBrand: {
+    fontFamily: theme.font.display,
+    fontWeight: `${theme.font.displayWeight}`
+  },
+  adornment: { flexDirection: "row", alignItems: "center" },
+  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space.s2 },
+  // Secondary ink, callout size — the AA-safe muted line under the title.
+  meta: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2
+  },
+  tabs: { marginTop: theme.space.s1 }
+}));
+
+export { PageHeader };