@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-JYIUZUIQ.js

@@ -0,0 +1,1567 @@
+import { LAUNCH_MARK, OS_MATERIAL, OS_MATERIAL_INK_OPACITY, LIVE_ACTIVITY_CARD, LIVE_ACTIVITY_MAX_H, DYNAMIC_ISLAND_FILL, DYNAMIC_ISLAND, IOS_EDIT_MENU_RADIUS, SHEET_GRABBER_W, APP_ICON_PREVIEW_PX, ICON_MARK_RATIO, APP_ICON_ASSET_PX, LOCK_SCREEN_WALLPAPER, WIDGET_SIZE, WIDGET_CORNER, WIDGET_INNER_CORNER_ANDROID, ANDROID_ICON_MASK_RATIO, IOS_ICON_CORNER_RATIO, OS_SIZE_RATIO } from './chunk-XWGXVQF6.js';
+import { Avatar } from './chunk-JWCVBFDU.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { StyleSheet, View, Text, ActivityIndicator, Pressable, Animated, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/os-surfaces/labels.ts
+var DEFAULT_LABELS = {
+  appIconPreview: (px, sizeClass, shape) => `App icon preview, ${px} px ${sizeClass}, ${shape} mask`,
+  launchScreenPreview: "Launch screen preview",
+  cancel: "Cancel",
+  moreGrouped: (count) => `+${count} more`,
+  lockScreenPreview: "Lock screen preview",
+  shareSheetPreview: "Share sheet preview",
+  shareWith: (name) => `Share with ${name}`,
+  textSelectionMenu: "Text selection menu",
+  dismiss: "Dismiss",
+  loading: "Loading"
+};
+function OsEntrance({
+  motion,
+  component,
+  style,
+  children
+}) {
+  const theme = useLoamTheme("os-surfaces");
+  const level = useResolvedMotion(motion ?? "none", component);
+  const animated = motion !== void 0 && level !== "none";
+  const progress = React.useRef(new Animated.Value(animated ? 0 : 1)).current;
+  const { duration, easing } = theme.motion.expand;
+  React.useEffect(() => {
+    if (!animated) {
+      progress.setValue(1);
+      return;
+    }
+    progress.setValue(0);
+    Animated.timing(progress, {
+      ...level === "reduced" ? motionTiming(level) : { duration, easing: Easing.bezier(...easing) },
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [animated, level, progress, duration, easing]);
+  if (motion === void 0) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [
+        style,
+        {
+          opacity: progress,
+          transform: level === "full" ? [
+            {
+              translateY: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [theme.space.s2, 0]
+              })
+            }
+          ] : []
+        }
+      ],
+      children
+    }
+  );
+}
+function AppIconPreview({
+  sizeClass = "home",
+  size,
+  shape,
+  showCaption = false,
+  accessibilityLabel,
+  loading = false,
+  motion,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("os-surfaces");
+  const px = size ?? APP_ICON_PREVIEW_PX[sizeClass];
+  const resolved = shape ?? (isAndroidIdiom(theme) ? "circle" : "squircle");
+  const radius = resolved === "circle" ? px * ANDROID_ICON_MASK_RATIO : Math.round(px * IOS_ICON_CORNER_RATIO);
+  const mark = Math.round(px * ICON_MARK_RATIO.size);
+  const caption = `${APP_ICON_ASSET_PX[sizeClass]} ${sizeClass}`;
+  return /* @__PURE__ */ jsx(OsEntrance, { motion, component: "app-icon-preview", children: /* @__PURE__ */ jsxs(View, { style: styles.cell, children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "image",
+        "aria-busy": loading || void 0,
+        accessibilityLabel: accessibilityLabel ?? labels.appIconPreview(APP_ICON_ASSET_PX[sizeClass], sizeClass, resolved),
+        style: [
+          styles.tile,
+          {
+            width: px,
+            height: px,
+            borderRadius: radius,
+            // The reference paints a 160° accent gradient; RN has no gradient
+            // primitive without a dependency, so the icon is a flat accent.
+            backgroundColor: loading ? theme.color.surface3 : theme.color.accent
+          }
+        ],
+        children: loading ? null : /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.mark,
+              {
+                width: mark,
+                height: mark,
+                borderRadius: Math.round(px * ICON_MARK_RATIO.radius)
+              }
+            ]
+          }
+        )
+      }
+    ),
+    showCaption ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  cell: { alignItems: "center", gap: theme.space.s1 },
+  tile: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    ...theme.shadow.md
+  },
+  // `accentInk` is the measured foreground for the accent fill — the mark must
+  // stay legible on it in both modes and under every tenant.
+  mark: { backgroundColor: theme.color.accentInk, opacity: theme.opacity[92] },
+  caption: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
+  }
+}));
+
+// src/os-surfaces/os-size.ts
+function osScale(px, size) {
+  return size === void 0 ? px : Math.round(px * OS_SIZE_RATIO[size]);
+}
+function osType(theme, size, role) {
+  if (size === void 0 || size === "md") return null;
+  const t = theme.type;
+  const step = size === "sm" ? { title: t.caption1, body: t.caption1, meta: t.caption2 } : { title: t.subheadline, body: t.subheadline, meta: t.caption1 };
+  return { fontSize: step[role].fontSize, lineHeight: step[role].lineHeight };
+}
+function LaunchScreenPreview({
+  wordmark,
+  reviewNote,
+  loading = false,
+  accessibilityLabel,
+  motion,
+  size,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme("os-surfaces");
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel ?? labels.launchScreenPreview,
+      "aria-busy": loading || void 0,
+      style: styles.screen,
+      children: [
+        /* @__PURE__ */ jsx(OsEntrance, { motion, component: "launch-screen-preview", children: /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.mark,
+                size === void 0 ? null : {
+                  width: osScale(LAUNCH_MARK.size, size),
+                  height: osScale(LAUNCH_MARK.size, size),
+                  borderRadius: osScale(LAUNCH_MARK.radius, size)
+                }
+              ]
+            }
+          ),
+          wordmark ? /* @__PURE__ */ jsx(Text, { style: styles.wordmark, children: wordmark }) : null,
+          loading ? /* @__PURE__ */ jsx(
+            ActivityIndicator,
+            {
+              size: "small",
+              color: theme.color.accentInk,
+              accessibilityLabel: labels.loading
+            }
+          ) : null
+        ] }) }),
+        reviewNote ? /* @__PURE__ */ jsx(Text, { style: styles.note, children: reviewNote }) : null
+      ]
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  // The reference paints a flat `var(--accent)` here — the one screen in the
+  // system that is a single brand colour edge to edge.
+  screen: {
+    flex: 1,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.layout.screenPad
+  },
+  stack: { alignItems: "center", gap: theme.space.s4 },
+  // OS-mandated-ish geometry: 64px at an 18px radius, from the reference. It has
+  // to match the app icon's mark, not a Loam radius step.
+  mark: {
+    width: LAUNCH_MARK.size,
+    height: LAUNCH_MARK.size,
+    borderRadius: LAUNCH_MARK.radius,
+    backgroundColor: theme.color.accentInk,
+    opacity: theme.opacity[96]
+  },
+  wordmark: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    letterSpacing: theme.type.title3.letterSpacing,
+    color: theme.color.accentInk
+  },
+  note: {
+    position: "absolute",
+    bottom: theme.space.s6,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    // Full `accentInk` (no alpha): at 0.7 it composited to ~#ecccc4 on the accent
+    // fill = 3.02:1 (WCAG fail); the solid ink clears AA at 4.53:1.
+    color: theme.color.accentInk,
+    textAlign: "center"
+  }
+}));
+var NOTIFICATION_TILE = { size: 26, radius: 8 };
+function notificationTile(size) {
+  if (size === void 0) return null;
+  return {
+    width: osScale(NOTIFICATION_TILE.size, size),
+    height: osScale(NOTIFICATION_TILE.size, size),
+    borderRadius: osScale(NOTIFICATION_TILE.radius, size)
+  };
+}
+var GROUP_STACK_OFFSET = 6;
+function notificationLabel({ appName, title, body, time, groupCount }, labels) {
+  return [
+    appName,
+    title,
+    body,
+    time,
+    groupCount && groupCount > 0 ? labels.moreGrouped(groupCount) : void 0
+  ].filter(Boolean).join(", ");
+}
+function NotificationBanner(props) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("os-surfaces");
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, props.labels);
+  const {
+    appName,
+    icon,
+    title,
+    body,
+    time,
+    actionLabel,
+    onAction,
+    onPress,
+    groupCount,
+    style,
+    tone,
+    variant = "soft",
+    dismissible,
+    onDismiss,
+    size,
+    motion,
+    layout = "default"
+  } = props;
+  const skin = tone ? softToneSkin(theme, tone) : null;
+  const solid = variant === "solid";
+  const ink = solid ? { color: theme.color.accentInk } : null;
+  const headed = layout === "header";
+  const tileSize = notificationTile(size);
+  const android = isAndroidIdiom(theme);
+  const content = headed ? /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.appName, styles.headerName, osType(theme, size, "meta"), ink], children: appName }),
+      time ? /* @__PURE__ */ jsx(Text, { style: [styles.time, osType(theme, size, "meta"), ink], children: time }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.titleFlat, osType(theme, size, "title"), ink], numberOfLines: 1, children: title }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.body, osType(theme, size, "body"), ink], numberOfLines: 2, children: body }),
+    groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.group, osType(theme, size, "meta"), ink], children: labels.moreGrouped(groupCount) }) : null
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.tile,
+          tileSize,
+          skin ? { backgroundColor: skin.fill } : null,
+          solid ? { backgroundColor: theme.color.accentInk } : null
+        ],
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: icon ?? "bell",
+            size: theme.icon.sm,
+            color: solid ? theme.color.accent : skin ? skin.ink : theme.color.accentInk
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+      android && appName ? /* @__PURE__ */ jsxs(Text, { style: [styles.appName, osType(theme, size, "meta"), ink], children: [
+        appName,
+        time ? ` \xB7 ${time}` : ""
+      ] }) : null,
+      /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.title, osType(theme, size, "title"), ink], numberOfLines: 1, children: title }),
+        !android && time ? /* @__PURE__ */ jsx(Text, { style: [styles.time, osType(theme, size, "meta"), ink], children: time }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.body, osType(theme, size, "body"), ink], numberOfLines: 2, children: body }),
+      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.group, osType(theme, size, "meta"), ink], children: labels.moreGrouped(groupCount) }) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(OsEntrance, { motion, component: "notification-banner", style: styles.stackRoot, children: /* @__PURE__ */ jsxs(View, { style: styles.stackRoot, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.banner,
+          solid ? styles.bannerSolid : null,
+          variant === "outline" ? styles.bannerOutline : null,
+          style
+        ],
+        children: [
+          onPress ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: notificationLabel(props, labels),
+              onPress,
+              style: ({ pressed }) => [styles.bannerBody, pressed ? styles.pressed : null],
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityRole: "image",
+              accessibilityLabel: notificationLabel(props, labels),
+              style: styles.bannerBody,
+              children: content
+            }
+          ),
+          actionLabel ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: actionLabel,
+              onPress: onAction,
+              style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
+              children: /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, ink], children: actionLabel })
+            }
+          ) : null,
+          dismissible ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.dismiss,
+              onPress: onDismiss,
+              style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "x",
+                  size: theme.icon.sm,
+                  color: solid ? theme.color.accentInk : theme.color.text2
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    ),
+    groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.stackPeek }) : null
+  ] }) });
+}
+function LockScreenNotification(props) {
+  const { styles } = useStyles(sheet3);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, props.labels);
+  const theme = useLoamTheme("os-surfaces");
+  const {
+    title,
+    body,
+    time,
+    actionLabel,
+    onAction,
+    onPress,
+    groupCount,
+    style,
+    tone,
+    variant = "soft",
+    dismissible,
+    onDismiss,
+    size,
+    motion,
+    appName,
+    layout = "default"
+  } = props;
+  const skin = tone ? softToneSkin(theme, tone) : null;
+  const solid = variant === "solid";
+  const ink = solid ? { color: theme.color.accentInk, opacity: 1 } : null;
+  const tileSize = notificationTile(size);
+  const content = layout === "header" ? /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.materialTime, styles.headerName, osType(theme, size, "meta"), ink], children: appName }),
+      time ? /* @__PURE__ */ jsx(Text, { style: [styles.materialTime, osType(theme, size, "meta"), ink], children: time }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [styles.materialTitleFlat, osType(theme, size, "title"), ink],
+        numberOfLines: 1,
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: [styles.materialBody, osType(theme, size, "body"), ink], numberOfLines: 2, children: body }),
+    groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.materialTime, osType(theme, size, "meta"), ink], children: labels.moreGrouped(groupCount) }) : null
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.materialTile,
+          tileSize,
+          skin ? { backgroundColor: skin.fill } : null,
+          solid ? { backgroundColor: theme.color.accentInk } : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [styles.materialTitle, osType(theme, size, "title"), ink],
+            numberOfLines: 1,
+            children: title
+          }
+        ),
+        time ? /* @__PURE__ */ jsx(Text, { style: [styles.materialTime, osType(theme, size, "meta"), ink], children: time }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.materialBody, osType(theme, size, "body"), ink], numberOfLines: 2, children: body }),
+      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.materialTime, osType(theme, size, "meta"), ink], children: labels.moreGrouped(groupCount) }) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(OsEntrance, { motion, component: "lock-screen-notification", style: styles.stackRoot, children: /* @__PURE__ */ jsxs(View, { style: styles.stackRoot, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.materialCard,
+          solid ? styles.materialSolid : null,
+          variant === "outline" ? styles.materialOutline : null,
+          style
+        ],
+        children: [
+          onPress ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: notificationLabel(props, labels),
+              onPress,
+              style: ({ pressed }) => [styles.materialBodyRow, pressed ? styles.pressed : null],
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityRole: "image",
+              accessibilityLabel: notificationLabel(props, labels),
+              style: styles.materialBodyRow,
+              children: content
+            }
+          ),
+          actionLabel ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: actionLabel,
+              onPress: onAction,
+              style: ({ pressed }) => [styles.materialAction, pressed ? styles.pressed : null],
+              children: /* @__PURE__ */ jsx(Text, { style: [styles.materialActionLabel, ink], children: actionLabel })
+            }
+          ) : null,
+          dismissible ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.dismiss,
+              onPress: onDismiss,
+              style: ({ pressed }) => [styles.materialAction, pressed ? styles.pressed : null],
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "x",
+                  size: theme.icon.sm,
+                  color: solid ? theme.color.accentInk : OS_MATERIAL.ink
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    ),
+    groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: [styles.stackPeek, styles.stackPeekMaterial] }) : null
+  ] }) });
+}
+function LockScreenPreview({
+  time,
+  date,
+  activity,
+  notifications = [],
+  onNotificationPress,
+  wallpaperColor = LOCK_SCREEN_WALLPAPER,
+  loading = false,
+  size,
+  motion,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet3);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("os-surfaces");
+  const clockPx = osScale(theme.fontSize[56], size);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: labels.lockScreenPreview,
+      "aria-busy": loading || void 0,
+      style: [styles.lockScreen, { backgroundColor: wallpaperColor }],
+      children: [
+        /* @__PURE__ */ jsx(OsEntrance, { motion, component: "lock-screen-preview", children: /* @__PURE__ */ jsxs(View, { style: styles.clock, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.clockDate, children: date }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.clockTime,
+                size === void 0 ? null : { fontSize: clockPx, lineHeight: clockPx * theme.lineHeight.tight }
+              ],
+              children: time
+            }
+          )
+        ] }) }),
+        loading ? /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            size: "small",
+            color: OS_MATERIAL.ink,
+            accessibilityLabel: labels.loading
+          }
+        ) : null,
+        activity,
+        notifications.map((n) => /* @__PURE__ */ jsx(
+          LockScreenNotification,
+          {
+            title: n.title,
+            body: n.body,
+            time: n.time,
+            appName: n.appName,
+            icon: n.icon,
+            onPress: onNotificationPress ? () => onNotificationPress(n.id) : void 0
+          },
+          n.id
+        ))
+      ]
+    }
+  );
+}
+var sheet3 = createStyleSheet((theme) => ({
+  stackRoot: { alignSelf: "stretch" },
+  // Sits directly under the card, inset on both sides and rounded only at the
+  // bottom, so it reads as a second card behind the front one without ever
+  // intersecting it (no translucency doubling) or leaving the entry's own box.
+  stackPeek: {
+    height: theme.space[GROUP_STACK_OFFSET],
+    marginHorizontal: theme.space.s2,
+    borderBottomStartRadius: theme.radius.lg,
+    borderBottomEndRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface2
+  },
+  // Dimmed, because two layers of the same material would read as one tall card
+  // rather than as a stack. `surface2` behind the opaque banner needs no help.
+  stackPeekMaterial: {
+    backgroundColor: OS_MATERIAL.fillWeak,
+    opacity: OS_MATERIAL_INK_OPACITY.tertiary
+  },
+  // ---- banner (over the app's own window: Loam tokens) ----
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    ...theme.shadow.lg
+  },
+  bannerBody: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin
+  },
+  bannerSolid: { backgroundColor: theme.color.accent, borderColor: theme.color.accent },
+  bannerOutline: { borderColor: theme.color.borderStrong, shadowOpacity: 0, elevation: 0 },
+  pressed: { opacity: theme.state.pressedOpacity },
+  tile: {
+    width: NOTIFICATION_TILE.size,
+    height: NOTIFICATION_TILE.size,
+    borderRadius: NOTIFICATION_TILE.radius,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.accent
+  },
+  main: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  titleRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  headerName: { flex: 1 },
+  titleFlat: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  materialTitleFlat: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: OS_MATERIAL.ink
+  },
+  appName: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
+  },
+  title: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  time: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
+  },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  group: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
+  },
+  action: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s3,
+    flexShrink: 0
+  },
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.accentStrong
+  },
+  // ---- lock screen / notification centre (OS material over a wallpaper) ----
+  lockScreen: {
+    flex: 1,
+    paddingHorizontal: theme.space.s3,
+    paddingTop: theme.space.s6,
+    gap: theme.space.s3
+  },
+  clock: { alignItems: "center", gap: theme.space.s1 },
+  clockDate: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: OS_MATERIAL.ink,
+    opacity: OS_MATERIAL_INK_OPACITY.secondary
+  },
+  // The lock-screen clock is OS chrome with no counterpart in the semantic ramp,
+  // so it takes the size-only `hero` step (52) the reference specifies.
+  clockTime: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.fontSize[56],
+    lineHeight: theme.fontSize[56] * theme.lineHeight.tight,
+    color: OS_MATERIAL.ink
+  },
+  materialCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    // Translucent scrim, NOT a blur: RN has no `backdrop-filter`. See OS_MATERIAL.
+    backgroundColor: OS_MATERIAL.fillWeak
+  },
+  materialSolid: { backgroundColor: theme.color.accent },
+  materialOutline: { borderWidth: theme.borderWidth.thin, borderColor: OS_MATERIAL.ink },
+  materialBodyRow: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin
+  },
+  materialTile: {
+    width: NOTIFICATION_TILE.size,
+    height: NOTIFICATION_TILE.size,
+    borderRadius: NOTIFICATION_TILE.radius,
+    flexShrink: 0,
+    backgroundColor: theme.color.accent
+  },
+  materialTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: OS_MATERIAL.ink
+  },
+  materialTime: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: OS_MATERIAL.ink,
+    opacity: OS_MATERIAL_INK_OPACITY.tertiary
+  },
+  materialBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: OS_MATERIAL.ink,
+    opacity: OS_MATERIAL_INK_OPACITY.secondary
+  },
+  materialAction: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s3,
+    flexShrink: 0
+  },
+  materialActionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    color: OS_MATERIAL.ink
+  }
+}));
+function clamp01(n) {
+  return Math.max(0, Math.min(1, n));
+}
+function LiveActivityPreview({
+  title,
+  progress,
+  status,
+  detail,
+  icon = "upload",
+  presentation = "lockScreen",
+  cancelLabel,
+  onCancel,
+  accessibilityLabel,
+  interactive = true,
+  loading = false,
+  motion = "standard",
+  padding = "md",
+  variant = "default",
+  size,
+  elevation,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet4);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("os-surfaces");
+  const announced = accessibilityLabel ?? [title, status, detail].filter(Boolean).join(", ");
+  const fraction = progress === void 0 || loading ? void 0 : clamp01(progress);
+  const percent = fraction === void 0 ? void 0 : Math.round(fraction * 100);
+  const grow = React.useRef(new Animated.Value(fraction ?? 0)).current;
+  React.useEffect(() => {
+    if (fraction === void 0) return;
+    if (motion === "none") {
+      grow.setValue(fraction);
+      return;
+    }
+    Animated.timing(grow, {
+      toValue: fraction,
+      duration: theme.motion.expand.duration,
+      easing: Easing.bezier(...theme.motion.expand.easing),
+      useNativeDriver: false
+    }).start();
+  }, [fraction, grow, motion, theme.motion.expand.duration, theme.motion.expand.easing]);
+  const width = grow.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0%", "100%"]
+  });
+  if (presentation === "island") {
+    const android = isAndroidIdiom(theme);
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        accessibilityRole: "progressbar",
+        "aria-busy": loading || void 0,
+        accessibilityLabel: announced,
+        accessibilityValue: percent === void 0 ? void 0 : { now: percent, min: 0, max: 100 },
+        "aria-valuenow": percent,
+        "aria-valuemin": percent === void 0 ? void 0 : 0,
+        "aria-valuemax": percent === void 0 ? void 0 : 100,
+        style: [
+          styles.island,
+          android ? styles.islandAndroid : null,
+          size === void 0 ? null : { height: osScale(DYNAMIC_ISLAND.height, size) }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: icon,
+              size: theme.icon.sm,
+              color: android ? theme.color.accentInk : OS_MATERIAL.ink
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.islandLabel,
+                android ? styles.islandLabelAndroid : null,
+                osType(theme, size, "title")
+              ],
+              numberOfLines: 1,
+              children: title
+            }
+          ),
+          status ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.islandStatus,
+                android ? styles.islandLabelAndroid : null,
+                osType(theme, size, "meta")
+              ],
+              children: status
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return (
+    // A `group`, not a `progressbar`: the card also holds the interactive cancel
+    // control, and `progressbar` (like `img`) makes its children presentational —
+    // nesting a focusable button inside it is a nested-interactive violation. The
+    // progressbar role lives on the track below, which owns no interactive content.
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        role: "group",
+        "aria-busy": loading || void 0,
+        style: [
+          styles.card,
+          padding === "md" ? null : padding === "sm" ? styles.cardSm : styles.cardLg,
+          variant === "elevated" ? styles.cardElevated : null,
+          variant === "outline" ? styles.cardOutline : null,
+          elevation === void 0 ? null : elevation === "flat" ? styles.cardFlat : elevation === "raised" ? styles.cardRaised : styles.cardDefault
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.cardTile,
+                size === void 0 ? null : {
+                  width: osScale(LIVE_ACTIVITY_CARD.tile, size),
+                  height: osScale(LIVE_ACTIVITY_CARD.tile, size),
+                  borderRadius: osScale(LIVE_ACTIVITY_CARD.tileRadius, size)
+                }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.accentInk })
+            }
+          ),
+          /* @__PURE__ */ jsxs(View, { style: styles.cardMain, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.cardTitleRow, children: [
+              /* @__PURE__ */ jsx(Text, { style: [styles.cardTitle, osType(theme, size, "title")], numberOfLines: 1, children: title }),
+              status ? /* @__PURE__ */ jsx(Text, { style: [styles.cardStatus, osType(theme, size, "meta")], numberOfLines: 1, children: status }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                accessibilityRole: "progressbar",
+                accessibilityLabel: announced,
+                accessibilityValue: percent === void 0 ? void 0 : { now: percent, min: 0, max: 100 },
+                "aria-valuenow": percent,
+                "aria-valuemin": percent === void 0 ? void 0 : 0,
+                "aria-valuemax": percent === void 0 ? void 0 : 100,
+                style: styles.track,
+                children: /* @__PURE__ */ jsx(
+                  Animated.View,
+                  {
+                    style: [styles.fill, fraction === void 0 ? styles.fillIndeterminate : { width }]
+                  }
+                )
+              }
+            ),
+            detail ? /* @__PURE__ */ jsx(Text, { style: [styles.cardDetail, osType(theme, size, "meta")], numberOfLines: 1, children: detail }) : null
+          ] }),
+          onCancel && interactive ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: cancelLabel ?? labels.cancel,
+              onPress: onCancel,
+              style: ({ pressed }) => [styles.cancel, pressed ? styles.pressed : null],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: OS_MATERIAL.ink })
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
+var sheet4 = createStyleSheet((theme) => ({
+  // ---- compact: the Dynamic Island pill ----
+  island: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s2,
+    minWidth: DYNAMIC_ISLAND.minWidth,
+    height: DYNAMIC_ISLAND.height,
+    // Fully rounded: the housing is a capsule, so the radius is half its height,
+    // not a Loam radius step.
+    borderRadius: DYNAMIC_ISLAND.height / 2,
+    paddingHorizontal: theme.space.s3,
+    backgroundColor: DYNAMIC_ISLAND_FILL
+  },
+  islandAndroid: { backgroundColor: theme.color.accent },
+  islandLabel: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: OS_MATERIAL.ink
+  },
+  islandLabelAndroid: { color: theme.color.accentInk },
+  islandStatus: {
+    marginStart: "auto",
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: OS_MATERIAL.ink,
+    opacity: OS_MATERIAL_INK_OPACITY.secondary
+  },
+  // ---- expanded: the lock-screen card, on system material ----
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    // The OS clips an expanded Live Activity at 160pt.
+    maxHeight: LIVE_ACTIVITY_MAX_H,
+    borderRadius: theme.radius.lg,
+    // Translucent scrim, NOT a blur — RN has no `backdrop-filter`. See OS_MATERIAL.
+    backgroundColor: OS_MATERIAL.fill
+  },
+  cardElevated: { ...theme.shadow.lg },
+  cardFlat: { shadowOpacity: 0, elevation: 0 },
+  cardDefault: { ...theme.shadow.sm },
+  cardRaised: { ...theme.shadow.md },
+  cardOutline: { borderWidth: theme.borderWidth.thin, borderColor: OS_MATERIAL.ink },
+  cardSm: { padding: theme.space.s2 },
+  cardLg: { padding: theme.space.s4 },
+  cardTile: {
+    width: LIVE_ACTIVITY_CARD.tile,
+    height: LIVE_ACTIVITY_CARD.tile,
+    borderRadius: LIVE_ACTIVITY_CARD.tileRadius,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.accent
+  },
+  cardMain: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  cardTitleRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s2 },
+  cardTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: OS_MATERIAL.ink
+  },
+  cardDetail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: OS_MATERIAL.ink,
+    opacity: OS_MATERIAL_INK_OPACITY.secondary
+  },
+  track: {
+    height: LIVE_ACTIVITY_CARD.trackH,
+    borderRadius: LIVE_ACTIVITY_CARD.trackH / 2,
+    overflow: "hidden",
+    backgroundColor: OS_MATERIAL.track
+  },
+  fill: { height: "100%", backgroundColor: OS_MATERIAL.ink },
+  fillIndeterminate: { width: "100%", opacity: OS_MATERIAL_INK_OPACITY.tertiary },
+  cardStatus: {
+    flexShrink: 0,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: OS_MATERIAL.ink,
+    opacity: OS_MATERIAL_INK_OPACITY.secondary
+  },
+  cancel: {
+    width: theme.icon["2xl"],
+    height: theme.icon["2xl"],
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+var STAT_BUDGET = { small: 1, medium: 2, large: 4 };
+var TITLE_LINES = { small: 2, medium: 2, large: 3 };
+function WidgetPreview({
+  sizeClass = "small",
+  appName,
+  icon = "grid",
+  title,
+  subtitle,
+  stats = [],
+  caption,
+  onPress,
+  accessibilityLabel,
+  variant = "default",
+  elevation = "md",
+  padding = "md",
+  tone,
+  loading = false,
+  size: tier,
+  motion
+}) {
+  const { styles } = useStyles(sheet5);
+  const theme = useLoamTheme("os-surfaces");
+  const size = WIDGET_SIZE[sizeClass];
+  const android = isAndroidIdiom(theme);
+  const radius = android ? WIDGET_CORNER.android : WIDGET_CORNER.iOS;
+  const innerRadius = android ? WIDGET_INNER_CORNER_ANDROID : theme.radius.md;
+  const skin = tone ? softToneSkin(theme, tone) : null;
+  const shown = stats.slice(0, STAT_BUDGET[sizeClass]);
+  const announced = accessibilityLabel ?? [appName, title, subtitle].filter(Boolean).join(", ");
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.glance, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.xs, color: theme.color.accentStrong }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.appName, skin ? { color: skin.ink } : null], numberOfLines: 1, children: appName })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [styles.title, osType(theme, tier, "title"), loading ? styles.redacted : null],
+          numberOfLines: TITLE_LINES[sizeClass],
+          children: title
+        }
+      ),
+      subtitle ? /* @__PURE__ */ jsx(Text, { style: [styles.subtitle, osType(theme, tier, "meta")], numberOfLines: 1, children: subtitle }) : null
+    ] }),
+    shown.length > 0 || caption ? /* @__PURE__ */ jsxs(View, { style: styles.readout, children: [
+      shown.length > 0 ? /* @__PURE__ */ jsx(View, { style: [styles.stats, sizeClass === "large" ? styles.statsWrap : null], children: shown.map((s) => /* @__PURE__ */ jsxs(View, { style: [styles.stat, { borderRadius: innerRadius }], children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [styles.statValue, osType(theme, tier, "body"), loading ? styles.redacted : null],
+            numberOfLines: 1,
+            children: s.value
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: [styles.statLabel, osType(theme, tier, "meta")], numberOfLines: 1, children: s.label })
+      ] }, s.id)) }) : null,
+      caption ? /* @__PURE__ */ jsx(Text, { style: [styles.caption, osType(theme, tier, "meta")], numberOfLines: 1, children: caption }) : null
+    ] }) : null
+  ] });
+  const frame = [
+    styles.widget,
+    variant === "outline" ? styles.widgetOutline : null,
+    variant === "tinted" ? styles.widgetTinted : null,
+    elevation === "none" || variant === "outline" ? styles.shadowNone : elevation === "sm" ? styles.shadowSm : null,
+    padding === "sm" ? styles.padSm : padding === "lg" ? styles.padLg : null,
+    skin ? { backgroundColor: skin.fill, borderColor: skin.edge } : null,
+    { width: size.width, height: size.height, borderRadius: radius }
+  ];
+  if (onPress) {
+    return /* @__PURE__ */ jsx(OsEntrance, { motion, component: "widget-preview", style: styles.entrance, children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: announced,
+        "aria-busy": loading || void 0,
+        onPress,
+        style: frame,
+        children: body
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(OsEntrance, { motion, component: "widget-preview", style: styles.entrance, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: announced,
+      "aria-busy": loading || void 0,
+      style: frame,
+      children: body
+    }
+  ) });
+}
+var sheet5 = createStyleSheet((theme) => ({
+  entrance: { alignSelf: "flex-start" },
+  // `s3` padding, not `s4`: a `systemSmall` widget is 170pt square, so 16pt on
+  // every side spent a fifth of the canvas on margin and left the glance and the
+  // stat tile fighting over what was left.
+  widget: {
+    overflow: "hidden",
+    padding: theme.space.s3,
+    gap: theme.space.s2,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    ...theme.shadow.md
+  },
+  widgetOutline: { backgroundColor: "transparent" },
+  widgetTinted: { backgroundColor: theme.color.accentSoft },
+  shadowNone: {
+    shadowColor: "transparent",
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    shadowOffset: { width: 0, height: 0 },
+    elevation: 0
+  },
+  shadowSm: { ...theme.shadow.sm },
+  padSm: { padding: theme.space.s2 },
+  padLg: { padding: theme.space.s4 },
+  redacted: {
+    color: "transparent",
+    backgroundColor: theme.color.surface3,
+    borderRadius: theme.radius.sm
+  },
+  glance: { gap: theme.space.s1 },
+  readout: { gap: theme.space.s1, marginTop: "auto" },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  appName: {
+    ...theme.type.overline,
+    flex: 1,
+    fontFamily: theme.font.sans,
+    color: theme.color.text3
+  },
+  // `subheadline`, not `title3`: two lines of a 20pt serif is 50pt of a 146pt
+  // content box, which is what made the headline collide with the rows either
+  // side of it. 15/20 is the smallest step that still reads as the glance's
+  // headline, and two lines of it fit the family with room to spare.
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
+    color: theme.color.text
+  },
+  subtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  stats: { flexDirection: "row", gap: theme.space.s2 },
+  statsWrap: { flexWrap: "wrap" },
+  stat: {
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: theme.space.s8,
+    paddingVertical: theme.space.s1,
+    paddingHorizontal: theme.space.s2,
+    backgroundColor: theme.color.surface2
+  },
+  statValue: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  statLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
+  },
+  caption: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
+  }
+}));
+var SHARE_TILE = 40;
+function ShareSheetPreview({
+  fileName,
+  fileMeta,
+  icon = "filedoc",
+  people = [],
+  onPersonPress,
+  actions = [],
+  onActionPress,
+  dismissible = false,
+  onDismiss,
+  size,
+  side = "bottom",
+  presentation = "sheet",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet6);
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("os-surfaces");
+  const grabber = presentation === "inline" ? null : /* @__PURE__ */ jsx(View, { style: styles.grabber });
+  const tile = osScale(SHARE_TILE, size);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: labels.shareSheetPreview,
+      style: [styles.sheet, side === "top" ? styles.sheetTop : null],
+      children: [
+        side === "top" ? null : grabber,
+        /* @__PURE__ */ jsxs(View, { style: styles.preview, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.previewTile,
+                size === void 0 ? null : { width: tile, height: tile }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: theme.color.accentOnSoft })
+            }
+          ),
+          /* @__PURE__ */ jsxs(View, { style: styles.previewMain, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.previewTitle, osType(theme, size, "title")], numberOfLines: 1, children: fileName }),
+            fileMeta ? /* @__PURE__ */ jsx(Text, { style: [styles.previewMeta, osType(theme, size, "meta")], numberOfLines: 1, children: fileMeta }) : null
+          ] }),
+          dismissible ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.dismiss,
+              onPress: onDismiss,
+              style: ({ pressed }) => [styles.close, pressed ? styles.pressed : null],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.text2 })
+            }
+          ) : null
+        ] }),
+        people.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.people, children: people.map((p) => /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.shareWith(p.name),
+            onPress: onPersonPress ? () => onPersonPress(p.id) : void 0,
+            style: ({ pressed }) => [styles.person, pressed ? styles.pressed : null],
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { name: p.name, src: p.src, size: size === "sm" ? "lg" : "xl", accent: true }),
+              /* @__PURE__ */ jsx(Text, { style: styles.personName, numberOfLines: 1, children: p.name.split(" ")[0] })
+            ]
+          },
+          p.id
+        )) }) : null,
+        actions.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions.map((a, i) => /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: a.label,
+            onPress: onActionPress ? () => onActionPress(a.id) : void 0,
+            style: ({ pressed }) => [
+              styles.actionRow,
+              i > 0 ? styles.actionRowDivided : null,
+              pressed ? styles.pressed : null
+            ],
+            children: [
+              a.icon ? /* @__PURE__ */ jsx(Icon, { name: a.icon, size: theme.icon.md, color: theme.color.text2 }) : null,
+              /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, osType(theme, size, "body")], children: a.label })
+            ]
+          },
+          a.id
+        )) }) : null,
+        side === "top" ? grabber : null
+      ]
+    }
+  );
+}
+function TextSelectionMenu({
+  items,
+  onItemPress,
+  platform,
+  dismissible = false,
+  onDismiss,
+  density,
+  size,
+  selected = false,
+  side,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet6);
+  const theme = useLoamTheme("os-surfaces");
+  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
+  const resolved = platform ?? (isAndroidIdiom(theme) ? "Android" : "iOS");
+  const ios = resolved === "iOS";
+  const rowPad = density === "compact" ? { paddingVertical: theme.space.s2 } : density === "comfortable" ? { paddingVertical: theme.space.s3 } : null;
+  const labelSize = size === "sm" ? theme.type.caption1 : size === "lg" ? theme.type.subheadline : null;
+  const labelStyle = labelSize ? { fontSize: labelSize.fontSize, lineHeight: labelSize.lineHeight } : null;
+  const menu = /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "menu",
+      accessibilityLabel: labels.textSelectionMenu,
+      accessibilityState: selected ? { selected: true } : void 0,
+      style: [styles.menu, ios ? styles.menuIOS : styles.menuAndroid],
+      children: [
+        selected ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.menuSelected }) : null,
+        items.map((item, i) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "menuitem",
+            accessibilityLabel: item.label,
+            onPress: onItemPress ? () => onItemPress(item.id) : void 0,
+            style: ({ pressed }) => [
+              styles.menuItem,
+              rowPad,
+              i > 0 ? styles.menuItemDivided : null,
+              pressed ? styles.pressed : null
+            ],
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [
+                  styles.menuLabel,
+                  ios ? styles.menuLabelIOS : styles.menuLabelAndroid,
+                  labelStyle
+                ],
+                children: item.label
+              }
+            )
+          },
+          item.id
+        )),
+        dismissible ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "menuitem",
+            accessibilityLabel: labels.dismiss,
+            onPress: onDismiss,
+            style: ({ pressed }) => [
+              styles.menuItem,
+              rowPad,
+              items.length > 0 ? styles.menuItemDivided : null,
+              pressed ? styles.pressed : null
+            ],
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: ios ? theme.color.bg : theme.color.text })
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!side) return menu;
+  return /* @__PURE__ */ jsxs(View, { style: styles.menuHost, testID: `edit-menu-arrow-${side}`, children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-hidden": true,
+        pointerEvents: "none",
+        style: [
+          styles.menuArrow,
+          ios ? styles.menuArrowIOS : styles.menuArrowAndroid,
+          side === "top" ? styles.menuArrowTop : side === "bottom" ? styles.menuArrowBottom : side === "left" ? styles.menuArrowLeft : styles.menuArrowRight
+        ]
+      }
+    ),
+    menu
+  ] });
+}
+var sheet6 = createStyleSheet((theme) => ({
+  // ---- share sheet ----
+  sheet: {
+    // A sheet's top corners are `radius['2xl']` per the reference; the bottom two are
+    // square because it is anchored to the screen edge.
+    borderTopLeftRadius: theme.radius["2xl"],
+    borderTopRightRadius: theme.radius["2xl"],
+    backgroundColor: theme.color.surface,
+    padding: theme.space.s4,
+    gap: theme.space.s4,
+    // Anchored to the screen edge with no scrim of its own: `edge.neutral` is
+    // what draws the sheet once high contrast zeroes the elevation, and it is
+    // `transparent` before that.
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.edge.neutral,
+    ...theme.shadow.lg
+  },
+  // Anchored to the top edge: the rounded corners and the rule flip to the bottom.
+  sheetTop: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderTopWidth: 0,
+    borderBottomLeftRadius: theme.radius["2xl"],
+    borderBottomRightRadius: theme.radius["2xl"],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.edge.neutral
+  },
+  grabber: {
+    alignSelf: "center",
+    width: SHEET_GRABBER_W,
+    // `sheetGrabber` is fixed at 5 and is deliberately not scaled by density.
+    height: theme.layout.sheetGrabber,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  preview: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  previewTile: {
+    width: SHARE_TILE,
+    height: SHARE_TILE,
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  previewMain: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  previewTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.type.headline.fontWeight,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text
+  },
+  previewMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  people: { flexDirection: "row", gap: theme.space.s4, overflow: "hidden" },
+  person: { alignItems: "center", gap: theme.space.s1, maxWidth: theme.space.s8 },
+  personName: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text2
+  },
+  actions: {
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2,
+    overflow: "hidden"
+  },
+  actionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3
+  },
+  actionRowDivided: {
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  actionLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  pressed: { opacity: theme.state.pressedOpacity },
+  close: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // ---- system edit menu ----
+  menu: {
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    overflow: "hidden",
+    ...theme.shadow.lg
+  },
+  // iOS: dark chrome at the system callout's own tight radius (OS-mandated, not a
+  // Loam radius step) — the menu has to look like the OS's, not ours.
+  menuIOS: { backgroundColor: theme.color.text, borderRadius: IOS_EDIT_MENU_RADIUS },
+  // Android: a Material menu surface, which *is* a Loam radius.
+  menuAndroid: { backgroundColor: theme.color.surface, borderRadius: theme.radius.md },
+  menuItem: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s3
+  },
+  // A grey with enough contrast on both the dark iOS chrome and the light Android
+  // surface — the OS's own separator, not a Loam border token.
+  menuItemDivided: {
+    borderStartWidth: theme.borderWidth.base,
+    borderStartColor: OS_MATERIAL.divider
+  },
+  menuLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight
+  },
+  menuSelected: { ...StyleSheet.absoluteFillObject, backgroundColor: theme.state.selected },
+  // The callout arrow: a rotated square in the menu's own fill, half of it
+  // tucked behind the menu so only the point shows.
+  menuHost: { alignSelf: "flex-start" },
+  menuArrow: {
+    position: "absolute",
+    width: theme.space.s2,
+    height: theme.space.s2,
+    transform: [{ rotate: "45deg" }]
+  },
+  menuArrowIOS: { backgroundColor: theme.color.text },
+  menuArrowAndroid: { backgroundColor: theme.color.surface },
+  menuArrowTop: { top: -theme.space.s1, start: "50%", marginStart: -theme.space.s1 },
+  menuArrowBottom: { bottom: -theme.space.s1, start: "50%", marginStart: -theme.space.s1 },
+  menuArrowLeft: { start: -theme.space.s1, top: "50%", marginTop: -theme.space.s1 },
+  menuArrowRight: { end: -theme.space.s1, top: "50%", marginTop: -theme.space.s1 },
+  menuLabelIOS: { color: theme.color.bg },
+  menuLabelAndroid: { color: theme.color.text }
+}));
+
+export { AppIconPreview, LaunchScreenPreview, LiveActivityPreview, LockScreenNotification, LockScreenPreview, NotificationBanner, ShareSheetPreview, TextSelectionMenu, WidgetPreview };