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

package/dist/chunk-F5XNPWS7.js

@@ -0,0 +1,1024 @@
+import { Avatar } from './chunk-QDYDBCFP.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React4 from 'react';
+import { Platform, View, Text, Pressable, Animated, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { MEDIA, OVERLAY_ALPHA } from '@btndprojects/loam-tokens';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var APP_ICON_ASSET_PX = {
+  store: 1024,
+  home: 180,
+  spotlight: 120,
+  settings: 58
+};
+var APP_ICON_PREVIEW_PX = {
+  store: 76,
+  home: 56,
+  spotlight: 40,
+  settings: 28
+};
+var IOS_ICON_CORNER_RATIO = 0.23;
+var ANDROID_ICON_MASK_RATIO = 0.5;
+var ICON_SAFE_MARGIN = { iOS: 0.18, android: 0.25 };
+var ICON_MARK_RATIO = { size: 0.46, radius: 0.1 };
+var LAUNCH_MARK = { size: 64, radius: 18 };
+var DYNAMIC_ISLAND = { height: 37, minWidth: 122 };
+var DYNAMIC_ISLAND_FILL = "#000000";
+var LIVE_ACTIVITY_MAX_H = 160;
+var LIVE_ACTIVITY_CARD = { tile: 34, tileRadius: 11, trackH: 4 };
+var WIDGET_SIZE = {
+  small: { width: 170, height: 170 },
+  medium: { width: 364, height: 170 },
+  large: { width: 364, height: 382 }
+};
+var WIDGET_CORNER = { iOS: 22, android: 28 };
+var WIDGET_INNER_CORNER_ANDROID = 20;
+var IOS_EDIT_MENU_RADIUS = 10;
+var SHEET_GRABBER_W = 36;
+var OS_MATERIAL = {
+  /** Live-activity / prominent card fill (reference: `rgba(255,255,255,.14)`). */
+  fill: `rgba(255,255,255,${OVERLAY_ALPHA.a5})`,
+  /** Notification card fill (reference: `rgba(255,255,255,.12)`). */
+  fillWeak: `rgba(255,255,255,${OVERLAY_ALPHA.a4})`,
+  /** Progress track over material (reference: `rgba(255,255,255,.25)`). */
+  track: `rgba(255,255,255,${OVERLAY_ALPHA.a8})`,
+  /** Primary ink on material. White, because the backdrop is a wallpaper. */
+  ink: MEDIA.ink,
+  /**
+   * Divider between items in a system menu (reference: `rgba(128,128,128,.35)`).
+   *
+   * The one value here that is genuinely not a ramp stop, and could not be: a
+   * mid-grey at 35% is the only wash that stays visible over *both* light and
+   * dark OS chrome, which is a different requirement from every other entry —
+   * those all know the backdrop is dark. Neither a white nor a black stop can
+   * do it, so the literal stands, with this as the reason.
+   */
+  divider: "rgba(128,128,128,0.35)"
+};
+var OS_MATERIAL_INK_OPACITY = { secondary: 0.85, tertiary: 0.7 };
+var LOCK_SCREEN_WALLPAPER = "#2b2620";
+function AppIconPreview({
+  sizeClass = "home",
+  size,
+  shape,
+  showCaption = false,
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const px = size ?? APP_ICON_PREVIEW_PX[sizeClass];
+  const resolved = shape ?? (Platform.OS === "android" ? "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__ */ jsxs(View, { style: styles.cell, children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "image",
+        accessibilityLabel: accessibilityLabel ?? `App icon preview, ${APP_ICON_ASSET_PX[sizeClass]} px ${sizeClass}, ${resolved} mask`,
+        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: theme.color.accent
+          }
+        ],
+        children: /* @__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
+  }
+}));
+function LaunchScreenPreview({
+  wordmark,
+  reviewNote,
+  accessibilityLabel = "Launch screen preview"
+}) {
+  const { styles } = useStyles(sheet2);
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "image", accessibilityLabel, style: styles.screen, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.mark }),
+      wordmark ? /* @__PURE__ */ jsx(Text, { style: styles.wordmark, children: wordmark }) : 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 };
+var GROUP_STACK_OFFSET = 6;
+function announce({ title, body, time }) {
+  return [title, body, time].filter(Boolean).join(", ");
+}
+function NotificationBanner(props) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme();
+  const { appName, icon, title, body, time, actionLabel, onAction, onPress, groupCount, style } = props;
+  const android = Platform.OS === "android";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: icon ?? "bell", size: theme.icon.sm, color: theme.color.accentInk }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+      android && appName ? /* @__PURE__ */ jsxs(Text, { style: styles.appName, children: [
+        appName,
+        time ? ` \xB7 ${time}` : ""
+      ] }) : null,
+      /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.title, numberOfLines: 1, children: title }),
+        !android && time ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: time }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: styles.body, numberOfLines: 2, children: body }),
+      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.group, children: `+${groupCount} more` }) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(View, { style: styles.stackRoot, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.banner, style], children: [
+      onPress ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: announce(props),
+          onPress,
+          style: ({ pressed }) => [styles.bannerBody, pressed ? styles.pressed : null],
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: announce(props), 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, children: actionLabel })
+        }
+      ) : null
+    ] }),
+    groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.stackPeek }) : null
+  ] });
+}
+function LockScreenNotification(props) {
+  const { styles } = useStyles(sheet3);
+  const { title, body, time, actionLabel, onAction, onPress, groupCount, style } = props;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { style: styles.materialTile }),
+    /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.materialTitle, numberOfLines: 1, children: title }),
+        time ? /* @__PURE__ */ jsx(Text, { style: styles.materialTime, children: time }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: styles.materialBody, numberOfLines: 2, children: body }),
+      groupCount && groupCount > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.materialTime, children: `+${groupCount} more` }) : null
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(View, { style: styles.stackRoot, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.materialCard, style], children: [
+      onPress ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: announce(props),
+          onPress,
+          style: ({ pressed }) => [styles.materialBodyRow, pressed ? styles.pressed : null],
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: announce(props), 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, children: actionLabel })
+        }
+      ) : 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
+}) {
+  const { styles } = useStyles(sheet3);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: "Lock screen preview",
+      style: [styles.lockScreen, { backgroundColor: wallpaperColor }],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.clock, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.clockDate, children: date }),
+          /* @__PURE__ */ jsx(Text, { style: styles.clockTime, children: time })
+        ] }),
+        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
+  },
+  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 },
+  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
+  },
+  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 = "Cancel",
+  onCancel,
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet4);
+  const theme = useLoamTheme();
+  const announced = accessibilityLabel ?? [title, status, detail].filter(Boolean).join(", ");
+  const fraction = progress === void 0 ? void 0 : clamp01(progress);
+  const percent = fraction === void 0 ? void 0 : Math.round(fraction * 100);
+  const grow = React4.useRef(new Animated.Value(fraction ?? 0)).current;
+  React4.useEffect(() => {
+    if (fraction === void 0) return;
+    Animated.timing(grow, {
+      toValue: fraction,
+      duration: theme.motion.expand.duration,
+      easing: Easing.bezier(...theme.motion.expand.easing),
+      useNativeDriver: false
+    }).start();
+  }, [fraction, grow, theme.motion.expand.duration, theme.motion.expand.easing]);
+  const width = grow.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0%", "100%"]
+  });
+  if (presentation === "island") {
+    const android = Platform.OS === "android";
+    return /* @__PURE__ */ jsxs(
+      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.island, android ? styles.islandAndroid : null],
+        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],
+              numberOfLines: 1,
+              children: title
+            }
+          ),
+          status ? /* @__PURE__ */ jsx(Text, { style: [styles.islandStatus, android ? styles.islandLabelAndroid : null], 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", style: styles.card, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.cardTile, 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, numberOfLines: 1, children: title }),
+          status ? /* @__PURE__ */ jsx(Text, { style: styles.cardStatus, 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, numberOfLines: 1, children: detail }) : null
+      ] }),
+      onCancel ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: cancelLabel,
+          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
+  },
+  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
+}) {
+  const { styles } = useStyles(sheet5);
+  const theme = useLoamTheme();
+  const size = WIDGET_SIZE[sizeClass];
+  const android = Platform.OS === "android";
+  const radius = android ? WIDGET_CORNER.android : WIDGET_CORNER.iOS;
+  const innerRadius = android ? WIDGET_INNER_CORNER_ANDROID : theme.radius.md;
+  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, numberOfLines: 1, children: appName })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: styles.title, numberOfLines: TITLE_LINES[sizeClass], children: title }),
+      subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.subtitle, 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, numberOfLines: 1, children: s.value }),
+        /* @__PURE__ */ jsx(Text, { style: styles.statLabel, numberOfLines: 1, children: s.label })
+      ] }, s.id)) }) : null,
+      caption ? /* @__PURE__ */ jsx(Text, { style: styles.caption, numberOfLines: 1, children: caption }) : null
+    ] }) : null
+  ] });
+  const frame = [styles.widget, { width: size.width, height: size.height, borderRadius: radius }];
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: announced,
+        onPress,
+        style: frame,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: announced, style: frame, children: body });
+}
+var sheet5 = createStyleSheet((theme) => ({
+  // `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
+  },
+  glance: { gap: theme.space.s1 },
+  readout: { gap: theme.space.s1, marginTop: "auto" },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  appName: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
+    textTransform: "uppercase",
+    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
+}) {
+  const { styles } = useStyles(sheet6);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: "Share sheet preview", style: styles.sheet, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.grabber }),
+    /* @__PURE__ */ jsxs(View, { style: styles.preview, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.previewTile, 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, numberOfLines: 1, children: fileName }),
+        fileMeta ? /* @__PURE__ */ jsx(Text, { style: styles.previewMeta, numberOfLines: 1, children: fileMeta }) : null
+      ] })
+    ] }),
+    people.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.people, children: people.map((p) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `Share with ${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: "lg", 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, children: a.label })
+        ]
+      },
+      a.id
+    )) }) : null
+  ] });
+}
+function TextSelectionMenu({
+  items,
+  onItemPress,
+  platform
+}) {
+  const { styles } = useStyles(sheet6);
+  const resolved = platform ?? (Platform.OS === "android" ? "Android" : "iOS");
+  const ios = resolved === "iOS";
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "menu",
+      accessibilityLabel: "Text selection menu",
+      style: [styles.menu, ios ? styles.menuIOS : styles.menuAndroid],
+      children: items.map((item, i) => /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "menuitem",
+          accessibilityLabel: item.label,
+          onPress: onItemPress ? () => onItemPress(item.id) : void 0,
+          style: ({ pressed }) => [
+            styles.menuItem,
+            i > 0 ? styles.menuItemDivided : null,
+            pressed ? styles.pressed : null
+          ],
+          children: /* @__PURE__ */ jsx(Text, { style: [styles.menuLabel, ios ? styles.menuLabelIOS : styles.menuLabelAndroid], children: item.label })
+        },
+        item.id
+      ))
+    }
+  );
+}
+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
+  },
+  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 },
+  // ---- 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
+  },
+  menuLabelIOS: { color: theme.color.bg },
+  menuLabelAndroid: { color: theme.color.text }
+}));
+
+export { ANDROID_ICON_MASK_RATIO, APP_ICON_ASSET_PX, APP_ICON_PREVIEW_PX, AppIconPreview, DYNAMIC_ISLAND, DYNAMIC_ISLAND_FILL, ICON_MARK_RATIO, ICON_SAFE_MARGIN, IOS_EDIT_MENU_RADIUS, IOS_ICON_CORNER_RATIO, LAUNCH_MARK, LIVE_ACTIVITY_CARD, LIVE_ACTIVITY_MAX_H, LOCK_SCREEN_WALLPAPER, LaunchScreenPreview, LiveActivityPreview, LockScreenNotification, LockScreenPreview, NotificationBanner, OS_MATERIAL, OS_MATERIAL_INK_OPACITY, SHEET_GRABBER_W, ShareSheetPreview, TextSelectionMenu, WIDGET_CORNER, WIDGET_INNER_CORNER_ANDROID, WIDGET_SIZE, WidgetPreview };