@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-QFA5WS2A.js

@@ -0,0 +1,750 @@
+import { Skeleton } from './chunk-YJ5PXOX3.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, springConfig, project, rubberband } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, ScrollView, Pressable, Text, Animated, PanResponder, Modal, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DOT = {
+  /** Width of the active dot. */
+  activeWidth: 16,
+  /** Width of an inactive dot. */
+  idleWidth: 5
+};
+function Dot({ active }) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("gallery");
+  const progress = React.useRef(new Animated.Value(active ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(progress, {
+      toValue: active ? 1 : 0,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.base),
+      useNativeDriver: false
+    }).start();
+  }, [active, progress, theme.duration.base, theme.easing.base]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [
+        styles.dot,
+        {
+          width: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [DOT.idleWidth, DOT.activeWidth]
+          }),
+          // The carousel sits on imagery, so the dots use the mode-invariant
+          // media ink rather than a surface token: an indicator that inverted
+          // with the mode would vanish over a bright photo. The idle dot is the
+          // 0.38 alpha stop — the same value the system dims a disabled control
+          // to. Both were `#ffffff` / `rgba(255,255,255,0.4)` literals in the
+          // module constant above, which is why they could not follow a theme.
+          backgroundColor: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [theme.white.a10, theme.media.ink]
+          })
+        }
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  item: (position) => `Item ${position}`,
+  image: (position) => `Image ${position}`,
+  thumbnails: "Thumbnails",
+  counter: (position, count) => `${position} / ${count}`,
+  loading: "Loading",
+  close: "Close",
+  share: "Share",
+  previous: "Previous image",
+  next: "Next image",
+  placeholder: (position, aspectRatio) => `Image ${position} \xB7 ${aspectRatio}`
+};
+function Gallery({
+  items,
+  columns = 3,
+  lightbox = true,
+  onSelect,
+  caption,
+  loop,
+  thumbnails,
+  zoom,
+  platform,
+  loading = false,
+  motion,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("gallery", DEFAULT_LABELS, labelsProp);
+  const [openIndex, setOpenIndex] = React.useState(null);
+  const tiles = React.useRef([]);
+  const origin = React.useCallback(
+    (i) => new Promise((resolve) => {
+      const el = tiles.current[i];
+      if (!el) return resolve(null);
+      el.measureInWindow((x, y, width, height) => resolve({ x, y, width, height }));
+    }),
+    []
+  );
+  const open = (i) => {
+    onSelect?.(i);
+    if (lightbox) setOpenIndex(i);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.galleryRoot, children: [
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        contentContainerStyle: styles.grid,
+        accessibilityState: loading ? { busy: true } : void 0,
+        "aria-busy": loading || void 0,
+        role: loading ? "group" : void 0,
+        accessibilityLabel: loading ? labels.loading : void 0,
+        children: loading ? Array.from({ length: Math.max(items.length, columns) }, (_, i) => /* @__PURE__ */ jsx(View, { style: [styles.tile, { width: `${100 / columns}%` }], children: /* @__PURE__ */ jsx(View, { style: styles.tileInner, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", decorative: true, style: styles.tileFill }) }) }, i)) : items.map((item, i) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: item.alt || labels.item(i + 1),
+            onPress: () => open(i),
+            style: [styles.tile, { width: `${100 / columns}%` }],
+            children: /* @__PURE__ */ jsxs(
+              View,
+              {
+                ref: (el) => {
+                  tiles.current[i] = el;
+                },
+                style: styles.tileInner,
+                children: [
+                  item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.tileIndex, children: i + 1 }),
+                  item.duration ? /* @__PURE__ */ jsx(View, { style: styles.durationBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: item.duration }) }) : null
+                ]
+              }
+            )
+          },
+          item.id
+        ))
+      }
+    ),
+    caption ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null,
+    openIndex != null ? /* @__PURE__ */ jsx(
+      GalleryLightbox,
+      {
+        items,
+        index: openIndex,
+        onIndexChange: setOpenIndex,
+        onClose: () => setOpenIndex(null),
+        loop,
+        thumbnails,
+        zoom,
+        origin,
+        platform,
+        motion,
+        labels: labelsProp
+      }
+    ) : null
+  ] });
+}
+function pinchDistance(e) {
+  const t = e.nativeEvent.touches;
+  if (!t || t.length < 2) return 0;
+  return Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY);
+}
+function GalleryLightbox({
+  items,
+  index,
+  onIndexChange,
+  onClose,
+  onShare,
+  maxZoom = 3,
+  loop = true,
+  thumbnails = false,
+  zoom = true,
+  origin,
+  motion = "full",
+  platform,
+  size = "lg",
+  loading = false,
+  tone = "default",
+  inline = false,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("gallery", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("gallery");
+  const level = useResolvedMotion(motion, "gallery");
+  const android = isAndroidIdiom(theme, platform);
+  const item = items[index];
+  const count = items.length;
+  const plate = size === "lg" ? void 0 : { width: theme.ctl[size], height: theme.ctl[size] };
+  const toned = tone === "default" ? null : softToneSkin(theme, tone);
+  const tx = React.useRef(new Animated.Value(0)).current;
+  const ty = React.useRef(new Animated.Value(0)).current;
+  const fade = React.useRef(new Animated.Value(1)).current;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const width = React.useRef(0);
+  const running = React.useRef(null);
+  const live = React.useRef({
+    index,
+    count,
+    level,
+    theme,
+    maxZoom,
+    onIndexChange,
+    loop,
+    zoom,
+    android,
+    close: () => {
+    }
+  });
+  live.current = {
+    index,
+    count,
+    level,
+    theme,
+    maxZoom,
+    onIndexChange,
+    loop,
+    zoom,
+    android,
+    close: live.current.close
+  };
+  const gesture = React.useRef({
+    pinch0: 0,
+    zoom: 1,
+    zoomAtStart: 1,
+    panX: 0,
+    panY: 0,
+    s: 1,
+    down: false
+  });
+  const canGo = React.useCallback((delta) => {
+    const l = live.current;
+    return l.loop ? l.count > 1 : l.index + delta >= 0 && l.index + delta < l.count;
+  }, []);
+  const go = React.useCallback((delta) => {
+    const l = live.current;
+    if (l.loop) l.onIndexChange((l.index + delta + l.count) % l.count);
+    else if (l.index + delta >= 0 && l.index + delta < l.count) l.onIndexChange(l.index + delta);
+  }, []);
+  const jump = (to) => {
+    if (to === live.current.index) return;
+    running.current?.stop();
+    running.current = null;
+    const g = gesture.current;
+    g.zoom = 1;
+    g.s = 1;
+    g.panX = 0;
+    g.panY = 0;
+    scale.setValue(1);
+    tx.setValue(0);
+    ty.setValue(0);
+    fade.setValue(1);
+    live.current.onIndexChange(to);
+  };
+  const leaveThen = React.useCallback(
+    (delta, velocity = 0) => {
+      const { level: lv, theme: th } = live.current;
+      if (!canGo(delta)) return;
+      const w = width.current || 320;
+      const g = gesture.current;
+      g.zoom = 1;
+      g.panX = 0;
+      g.panY = 0;
+      scale.setValue(1);
+      ty.setValue(0);
+      if (running.current) {
+        running.current.stop();
+        running.current = null;
+        tx.setValue(0);
+        fade.setValue(1);
+        go(delta);
+        return;
+      }
+      if (lv === "none") {
+        tx.setValue(0);
+        go(delta);
+        return;
+      }
+      if (lv === "reduced") {
+        const out2 = Animated.timing(fade, {
+          toValue: 0,
+          ...motionTiming(lv),
+          useNativeDriver: true
+        });
+        running.current = out2;
+        out2.start(({ finished }) => {
+          running.current = null;
+          tx.setValue(0);
+          go(delta);
+          if (!finished) return fade.setValue(1);
+          Animated.timing(fade, { toValue: 1, ...motionTiming(lv), useNativeDriver: true }).start();
+        });
+        return;
+      }
+      const out = Animated.parallel([
+        Animated.spring(tx, {
+          toValue: -delta * w,
+          ...springConfig(th, "fe", { velocity }),
+          useNativeDriver: true
+        }),
+        Animated.spring(fade, { toValue: 0, ...springConfig(th, "fe"), useNativeDriver: true })
+      ]);
+      running.current = out;
+      out.start(({ finished }) => {
+        running.current = null;
+        if (!finished) return;
+        tx.setValue(delta * w * 0.35);
+        go(delta);
+        Animated.parallel([
+          Animated.spring(tx, { toValue: 0, ...springConfig(th, "ds"), useNativeDriver: true }),
+          Animated.spring(fade, { toValue: 1, ...springConfig(th, "de"), useNativeDriver: true })
+        ]).start();
+      });
+    },
+    [canGo, fade, go, scale, tx, ty]
+  );
+  const settle = React.useCallback(() => {
+    const { theme: th, level: lv, maxZoom: max } = live.current;
+    const g = gesture.current;
+    const target = g.s < 1 ? 1 : g.s > max ? max : g.s;
+    g.zoom = target;
+    g.s = target;
+    if (target === 1) {
+      g.panX = 0;
+      g.panY = 0;
+    }
+    const spring = (v, to) => lv === "full" ? Animated.spring(v, { toValue: to, ...springConfig(th, "ds"), useNativeDriver: true }) : Animated.timing(v, { toValue: to, ...motionTiming(lv), useNativeDriver: true });
+    Animated.parallel([spring(scale, target), spring(tx, g.panX), spring(ty, g.panY)]).start();
+  }, [scale, tx, ty]);
+  const pan = React.useRef(
+    // Swipe and pinch share one responder on a full-screen modal with no
+    // competing gesture, and the native contract rules out a gesture library —
+    // the same reason `Sheet` and `Toast` use `PanResponder`.
+    // eslint-disable-next-line loam/no-pan-responder
+    PanResponder.create({
+      onStartShouldSetPanResponder: (e) => live.current.zoom && pinchDistance(e) > 0,
+      onMoveShouldSetPanResponder: (e, g) => live.current.zoom && pinchDistance(e) > 0 || gesture.current.zoom > 1 || Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) || // iOS: a downward drag on the unzoomed image dismisses.
+      !live.current.android && g.dy > 8 && g.dy > Math.abs(g.dx),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: () => {
+        running.current?.stop();
+        running.current = null;
+        const g = gesture.current;
+        g.pinch0 = 0;
+        g.zoomAtStart = g.zoom;
+        g.s = g.zoom;
+        g.down = false;
+      },
+      onPanResponderMove: (e, d) => {
+        const g = gesture.current;
+        const dist = live.current.zoom ? pinchDistance(e) : 0;
+        if (dist > 0) {
+          if (!g.pinch0) {
+            g.pinch0 = dist;
+            g.zoomAtStart = g.s;
+          }
+          const raw = g.zoomAtStart * (dist / g.pinch0);
+          const max = live.current.maxZoom;
+          g.s = raw < 1 ? 1 - rubberband(1 - raw, 0.5) : raw > max ? max + rubberband(raw - max, max) : raw;
+          scale.setValue(g.s);
+          return;
+        }
+        if (g.pinch0) return;
+        if (g.zoom > 1) {
+          tx.setValue(g.panX + d.dx);
+          ty.setValue(g.panY + d.dy);
+          return;
+        }
+        if (g.down || !live.current.android && d.dy > Math.abs(d.dx)) {
+          g.down = true;
+          ty.setValue(Math.max(0, d.dy));
+          return;
+        }
+        const past = d.dx < 0 ? !canGo(1) : !canGo(-1);
+        tx.setValue(past ? rubberband(d.dx, width.current || 320) : d.dx);
+      },
+      onPanResponderRelease: (_e, d) => {
+        const g = gesture.current;
+        if (g.pinch0) {
+          g.pinch0 = 0;
+          settle();
+          return;
+        }
+        if (g.zoom > 1) {
+          const w2 = width.current || 320;
+          const reach = w2 * (g.zoom - 1) / 2;
+          g.panX = Math.max(-reach, Math.min(reach, g.panX + d.dx));
+          g.panY = Math.max(-reach, Math.min(reach, g.panY + d.dy));
+          settle();
+          return;
+        }
+        if (g.down) {
+          g.down = false;
+          if (d.dy + project(d.vy * 1e3) > 120) {
+            live.current.close();
+            return;
+          }
+          Animated.spring(ty, {
+            toValue: 0,
+            ...springConfig(live.current.theme, "fs", { velocity: d.vy }),
+            useNativeDriver: true
+          }).start();
+          return;
+        }
+        const w = width.current || 320;
+        const aim = d.dx + project(d.vx * 1e3);
+        if (live.current.count > 1 && canGo(aim < 0 ? 1 : -1) && (Math.abs(d.dx) > w * 0.25 || Math.abs(aim) > w * 0.5)) {
+          leaveThen(aim < 0 ? 1 : -1, d.vx);
+          return;
+        }
+        Animated.spring(tx, {
+          toValue: 0,
+          ...springConfig(live.current.theme, "fs", { velocity: d.vx }),
+          useNativeDriver: true
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        gesture.current.pinch0 = 0;
+        settle();
+      }
+    })
+  ).current;
+  const imageRef = React.useRef(null);
+  const [placed, setPlaced] = React.useState(!origin);
+  const closing = React.useRef(false);
+  const fromRect = React.useCallback(
+    (rect) => new Promise((resolve) => {
+      const el = imageRef.current;
+      if (!el) return resolve(null);
+      el.measureInWindow((x, y, w, h) => {
+        if (w <= 0 || h <= 0 || rect.width <= 0) return resolve(null);
+        resolve({
+          s: rect.width / w,
+          x: rect.x + rect.width / 2 - (x + w / 2),
+          y: rect.y + rect.height / 2 - (y + h / 2)
+        });
+      });
+    }),
+    []
+  );
+  React.useEffect(() => {
+    if (!origin || level !== "full") {
+      setPlaced(true);
+      return;
+    }
+    let live_ = true;
+    void (async () => {
+      const rect = await origin(live.current.index);
+      const from = rect ? await fromRect(rect) : null;
+      if (!live_) return;
+      if (from) {
+        scale.setValue(from.s);
+        tx.setValue(from.x);
+        ty.setValue(from.y);
+      }
+      setPlaced(true);
+      if (!from) return;
+      const th = live.current.theme;
+      Animated.parallel([
+        Animated.spring(scale, { toValue: 1, ...springConfig(th, "ds"), useNativeDriver: true }),
+        Animated.spring(tx, { toValue: 0, ...springConfig(th, "ds"), useNativeDriver: true }),
+        Animated.spring(ty, { toValue: 0, ...springConfig(th, "ds"), useNativeDriver: true })
+      ]).start();
+    })();
+    return () => {
+      live_ = false;
+    };
+  }, []);
+  const dismiss = React.useCallback(async () => {
+    if (closing.current) return;
+    closing.current = true;
+    const { level: lv, theme: th, index: at } = live.current;
+    if (!origin || lv !== "full") return onClose();
+    const rect = await origin(at);
+    const to = rect ? await fromRect(rect) : null;
+    if (!to) return onClose();
+    running.current?.stop();
+    Animated.parallel([
+      Animated.spring(scale, { toValue: to.s, ...springConfig(th, "ds"), useNativeDriver: true }),
+      Animated.spring(tx, { toValue: to.x, ...springConfig(th, "ds"), useNativeDriver: true }),
+      Animated.spring(ty, { toValue: to.y, ...springConfig(th, "ds"), useNativeDriver: true })
+    ]).start(() => onClose());
+  }, [fromRect, onClose, origin, scale, tx, ty]);
+  live.current.close = () => void dismiss();
+  React.useEffect(() => {
+    return () => running.current?.stop();
+  }, []);
+  if (!item) return null;
+  const onLayout = (e) => {
+    width.current = e.nativeEvent.layout.width;
+  };
+  const content = /* @__PURE__ */ jsxs(View, { style: [styles.lightbox, inline && styles.lightboxInline], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.lightboxBar, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          testID: "gallery-lightbox-close",
+          accessibilityRole: "button",
+          accessibilityLabel: labels.close,
+          onPress: () => void dismiss(),
+          style: ({ pressed }) => [styles.glass, plate, pressed && styles.glassPressed],
+          children: /* @__PURE__ */ jsx(Icon, { name: android ? "arrow-left" : "x", size: theme.icon.md, color: theme.media.ink })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            styles.counterPill,
+            toned && { backgroundColor: toned.fill, borderColor: toned.edge }
+          ],
+          children: /* @__PURE__ */ jsx(Text, { style: [styles.counter, toned && { color: toned.ink }], children: labels.counter(index + 1, count) })
+        }
+      ),
+      onShare ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          testID: "gallery-lightbox-share",
+          accessibilityRole: "button",
+          accessibilityLabel: labels.share,
+          onPress: () => onShare(index),
+          style: ({ pressed }) => [styles.glass, plate, pressed && styles.glassPressed],
+          children: /* @__PURE__ */ jsx(Icon, { name: "share", size: theme.icon.md, color: theme.media.ink })
+        }
+      ) : /* @__PURE__ */ jsx(View, { style: [styles.barSpacer, plate && { width: plate.width }] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.lightboxStage, "aria-busy": loading || void 0, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.previous,
+          disabled: !canGo(-1),
+          onPress: () => leaveThen(-1),
+          style: ({ pressed }) => [
+            styles.glass,
+            plate,
+            pressed && styles.glassPressed,
+            !canGo(-1) && styles.lightboxNavOff
+          ],
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.md, color: theme.media.ink })
+        }
+      ),
+      /* @__PURE__ */ jsx(View, { style: styles.lightboxTrack, onLayout, ...pan.panHandlers, children: /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          ref: imageRef,
+          testID: "gallery-lightbox-image",
+          accessibilityRole: "image",
+          accessibilityLabel: item.alt || labels.item(index + 1),
+          style: [
+            styles.lightboxImage,
+            // In flow the frame's height is the limit: size the image to it so it
+            // never runs under the bar, the thumbnails or the dots.
+            inline && styles.lightboxImageInline,
+            {
+              aspectRatio: item.aspectRatio ?? 0.8,
+              opacity: placed ? fade : 0,
+              transform: [{ translateX: tx }, { translateY: ty }, { scale }]
+            }
+          ],
+          children: loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", decorative: true, style: styles.tileFill }) : item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.lightboxImageLabel, children: labels.placeholder(index + 1, String(item.aspectRatio ?? 0.8)) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.next,
+          disabled: !canGo(1),
+          onPress: () => leaveThen(1),
+          style: ({ pressed }) => [
+            styles.glass,
+            plate,
+            pressed && styles.glassPressed,
+            !canGo(1) && styles.lightboxNavOff
+          ],
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.md, color: theme.media.ink })
+        }
+      )
+    ] }),
+    thumbnails ? /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        accessibilityLabel: labels.thumbnails,
+        contentContainerStyle: styles.thumbs,
+        style: styles.thumbsRail,
+        children: items.map((it, i) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: it.alt || labels.image(i + 1),
+            accessibilityState: { selected: i === index },
+            onPress: () => jump(i),
+            style: [styles.thumb, i === index && styles.thumbActive],
+            children: it.render ? it.render() : /* @__PURE__ */ jsx(Text, { style: styles.tileIndex, children: i + 1 })
+          },
+          it.id
+        ))
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.dots, accessibilityElementsHidden: true, importantForAccessibility: "no", children: items.map((it, i) => /* @__PURE__ */ jsx(Dot, { active: i === index }, it.id)) })
+  ] });
+  return inline ? content : /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible: true,
+      transparent: true,
+      animationType: origin && level === "full" ? "none" : "fade",
+      onRequestClose: () => void dismiss(),
+      children: content
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  galleryRoot: { flex: 1 },
+  grid: { flexDirection: "row", flexWrap: "wrap", padding: theme.space[2] },
+  tile: { padding: theme.space[2] },
+  tileInner: {
+    aspectRatio: 1,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  tileFill: { width: "100%", height: "100%" },
+  tileIndex: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  durationBadge: {
+    position: "absolute",
+    end: theme.space[4],
+    bottom: theme.space[4],
+    borderRadius: theme.radius.xs,
+    paddingHorizontal: theme.space[4],
+    paddingVertical: theme.space[1],
+    backgroundColor: theme.color.scrim
+  },
+  durationText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    color: theme.media.ink
+  },
+  // Not `color.scrim`: a lightbox backdrop sits on imagery rather than on a
+  // token surface, and it is deliberately far heavier than a modal's scrim. The
+  // alpha ramp's top stop is cut at 0.92 for exactly this surface, so the value
+  // is a token now rather than the raw literal the doc leaves it as.
+  lightbox: { flex: 1, backgroundColor: theme.black.a14 },
+  // In flow the viewer takes the height its frame gives it, with the same rounded dark stage.
+  lightboxInline: { borderRadius: theme.radius.xl, overflow: "hidden" },
+  lightboxBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space[14]
+  },
+  // The F37 glass control: a 44 round plate, dark tint with a hairline edge.
+  glass: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  glassPressed: { backgroundColor: theme.black.a14 },
+  barSpacer: { width: theme.ctl.lg },
+  // The counter sits on a glass pill in the count style (12 / 600, tabular).
+  counterPill: {
+    height: theme.space[28],
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.radius.full,
+    justifyContent: "center",
+    backgroundColor: theme.black.a12,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.white.a5
+  },
+  counter: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"],
+    color: theme.media.ink
+  },
+  lightboxStage: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[12]
+  },
+  lightboxNavOff: { opacity: theme.opacity[38] },
+  thumbsRail: { flexGrow: 0 },
+  thumbs: {
+    gap: theme.space[6],
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space[8]
+  },
+  thumb: {
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent",
+    backgroundColor: theme.color.surface3,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: theme.opacity[64]
+  },
+  thumbActive: { borderColor: theme.media.ink, opacity: 1 },
+  caption: {
+    paddingHorizontal: theme.space[2],
+    paddingVertical: theme.space[8],
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  lightboxTrack: {
+    flex: 1,
+    alignSelf: "stretch",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxImageInline: { width: void 0, height: "100%", maxWidth: "100%" },
+  lightboxImage: {
+    width: "100%",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxImageLabel: {
+    ...theme.type.overline,
+    fontFamily: theme.font.mono,
+    // Uppercase wants the caps tracking step, which is a ratio — multiply it by
+    // the size rather than restating the product as a bare 1.2.
+    color: theme.color.text3
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: DOT.idleWidth,
+    paddingVertical: theme.space.s4
+  },
+  // Width and background are animated per-dot; see {@link Dot}.
+  dot: { height: DOT.idleWidth, borderRadius: theme.radius.full }
+}));
+
+export { Gallery, GalleryLightbox };