@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-2TXERVVA.js

@@ -1,1081 +0,0 @@
-import { Avatar } from './chunk-V2OEB75Z.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.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";
-
-// 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"
-};
-function AppIconPreview({
-  sizeClass = "home",
-  size,
-  shape,
-  showCaption = false,
-  accessibilityLabel,
-  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 ?? (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 ?? 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: 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,
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet2);
-  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      accessibilityRole: "image",
-      accessibilityLabel: accessibilityLabel ?? labels.launchScreenPreview,
-      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({ 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 } = 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: labels.moreGrouped(groupCount) }) : 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, labels),
-          onPress,
-          style: ({ pressed }) => [styles.bannerBody, pressed ? styles.pressed : null],
-          children: content
-        }
-      ) : /* @__PURE__ */ jsx(
-        View,
-        {
-          accessibilityRole: "image",
-          accessibilityLabel: announce(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, children: actionLabel })
-        }
-      ) : 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 { 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: labels.moreGrouped(groupCount) }) : 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, labels),
-          onPress,
-          style: ({ pressed }) => [styles.materialBodyRow, pressed ? styles.pressed : null],
-          children: content
-        }
-      ) : /* @__PURE__ */ jsx(
-        View,
-        {
-          accessibilityRole: "image",
-          accessibilityLabel: announce(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, 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,
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet3);
-  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      role: "group",
-      accessibilityLabel: labels.lockScreenPreview,
-      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,
-  onCancel,
-  accessibilityLabel,
-  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 ? 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 ?? 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
-  },
-  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("os-surfaces");
-  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,
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet6);
-  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
-  const theme = useLoamTheme("os-surfaces");
-  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: labels.shareSheetPreview, 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: 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: "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,
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet6);
-  const labels = useLabels("osSurfaces", DEFAULT_LABELS, labelsProp);
-  const resolved = platform ?? (Platform.OS === "android" ? "Android" : "iOS");
-  const ios = resolved === "iOS";
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      accessibilityRole: "menu",
-      accessibilityLabel: labels.textSelectionMenu,
-      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 };