@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-5RENVKBQ.js → chunk-VJLSSSGC.js}

@@ -1,9 +1,11 @@
-import { PhaseAnnouncement, NoteBlock } from './chunk-LKFC4CS7.js';
-import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './chunk-YXOAPXMU.js';
-import { useAnalyzerCopy, decorativeProps, camInk } from './chunk-HJLPZA4X.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { PhaseAnnouncement, NoteBlock } from './chunk-SZLI34TA.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { CardHeader, CardTitle, CardContent, CardFooter, Card } from './chunk-PWFRDRGS.js';
+import { useAnalyzerCopy, decorativeProps, camInk } from './chunk-OCHPK5YV.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, motionTiming, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, View, Text, Platform, findNodeHandle, AccessibilityInfo } from 'react-native';
@@ -25,7 +27,19 @@ var STATE_ICON = {
   denied: "lock",
   unavailable: "monitor"
 };
+function Wrap({
+  layout,
+  style,
+  children
+}) {
+  if (layout === "card")
+    return /* @__PURE__ */ jsx(Card, { variant: "elevated", style, children });
+  return /* @__PURE__ */ jsx(View, { style, children });
+}
 function ScreenShell({
+  size = "lg",
+  variant = "primary",
+  loading = false,
   state,
   icon,
   onPrimary,
@@ -34,11 +48,16 @@ function ScreenShell({
   announce = true,
   autoFocus = false,
   body,
+  layout = "screen",
   copy: copyProp
 }) {
   const words = useAnalyzerCopy(copyProp);
   const theme = useLoamTheme("camera-permission");
-  const { styles } = useStyles(permissionSheet, { inert });
+  const { styles } = useStyles(permissionSheet, {
+    inert,
+    layout,
+    lead: layout === "screen" && isAndroidIdiom(theme)
+  });
   const screen = permissionScreen(state, words);
   const copy = body ?? screen.body;
   const heading = React.useRef(null);
@@ -74,15 +93,15 @@ function ScreenShell({
           transform: level === "full" ? [{ translateY: rise.interpolate({ inputRange: [0, 1], outputRange: [12, 0] }) }] : []
         }
       ],
-      children: /* @__PURE__ */ jsxs(Card, { variant: "elevated", style: styles.card, children: [
+      children: /* @__PURE__ */ jsxs(Wrap, { layout, style: styles.card, children: [
         /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? `${screen.heading}. ${copy}` : null }),
         /* @__PURE__ */ jsxs(CardHeader, { children: [
-          /* @__PURE__ */ jsx(View, { accessible: false, style: styles.glyph, ...decorativeProps(), children: /* @__PURE__ */ jsx(
-            Icon,
+          /* @__PURE__ */ jsx(View, { accessible: false, ...decorativeProps(), children: /* @__PURE__ */ jsx(
+            IconTile,
             {
-              name: icon ?? STATE_ICON[state],
-              size: theme.icon.lg,
-              color: theme.color.infoOnSoft
+              icon: icon ?? STATE_ICON[state],
+              tone: state === "denied" || state === "unavailable" ? "warn" : "accent",
+              size
             }
           ) }),
           /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(Text, { ref: heading, accessibilityRole: "header", style: styles.heading, children: screen.heading }) }),
@@ -94,31 +113,51 @@ function ScreenShell({
             Button,
             {
               variant: "outline",
-              size: "lg",
+              size,
               fullWidth: true,
               disabled: inert,
               onPress: onSecondary,
               children: screen.secondary
             }
           ) }) : null,
-          /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, disabled: inert, onPress: onPrimary, children: screen.primary }) })
+          /* @__PURE__ */ jsx(View, { style: styles.actionSlot, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant,
+              size,
+              loading,
+              fullWidth: true,
+              disabled: inert,
+              onPress: onPrimary,
+              children: screen.primary
+            }
+          ) })
         ] }) })
       ] })
     }
   );
 }
 function CameraPermissionPrimer({
+  size,
+  variant,
+  loading,
+  icon,
   privacyStatement,
   prompting = false,
   onContinue,
   onUpload,
   autoFocus,
   announce,
+  layout,
   copy
 }) {
   return /* @__PURE__ */ jsx(
     ScreenShell,
     {
+      size,
+      variant,
+      loading,
+      icon,
       state: prompting ? "prompting" : "undetermined",
       inert: prompting,
       body: privacyStatement,
@@ -126,47 +165,72 @@ function CameraPermissionPrimer({
       onSecondary: onUpload,
       autoFocus,
       announce,
+      layout,
       copy
     }
   );
 }
 function CameraDenied({
+  size,
+  variant,
+  loading,
+  icon,
   onOpenSettings,
   onUpload,
   autoFocus,
   announce,
+  layout,
   copy
 }) {
   return /* @__PURE__ */ jsx(
     ScreenShell,
     {
+      size,
+      variant,
+      loading,
       state: "denied",
+      icon,
       onPrimary: onOpenSettings,
       onSecondary: onUpload,
       autoFocus,
       announce,
+      layout,
       copy
     }
   );
 }
 function CameraUnavailable({
+  size,
+  variant,
+  loading,
+  icon,
   onUpload,
   autoFocus,
   announce,
+  layout,
   copy
 }) {
   return /* @__PURE__ */ jsx(
     ScreenShell,
     {
+      size,
+      variant,
+      loading,
+      icon,
       state: "unavailable",
       onPrimary: onUpload,
       autoFocus,
       announce,
+      layout,
       copy
     }
   );
 }
 function CameraPermissionScreen({
+  size,
+  variant,
+  loading,
+  icon,
   state,
   onRequestPermission,
   onOpenSettings,
@@ -174,6 +238,7 @@ function CameraPermissionScreen({
   privacyStatement,
   autoFocus,
   announce,
+  layout,
   copy
 }) {
   const theme = useLoamTheme("camera-permission");
@@ -205,10 +270,15 @@ function CameraPermissionScreen({
       return /* @__PURE__ */ jsx(
         CameraDenied,
         {
+          size,
+          variant,
+          loading,
+          icon,
           onOpenSettings,
           onUpload,
           autoFocus,
           announce,
+          layout,
           copy
         }
       );
@@ -217,9 +287,14 @@ function CameraPermissionScreen({
       return /* @__PURE__ */ jsx(
         CameraUnavailable,
         {
+          size,
+          variant,
+          loading,
+          icon,
           onUpload,
           autoFocus,
           announce,
+          layout,
           copy
         }
       );
@@ -227,18 +302,27 @@ function CameraPermissionScreen({
     return /* @__PURE__ */ jsx(
       CameraPermissionPrimer,
       {
+        size,
+        variant,
+        loading,
+        icon,
         prompting: state2 === "prompting",
         privacyStatement,
         onContinue: onRequestPermission,
         onUpload,
         autoFocus,
         announce,
+        layout,
         copy
       }
     );
   }
 }
 function CaptureDone({
+  size = "lg",
+  variant = "primary",
+  loading = false,
+  icon = "check",
   label: labelProp,
   actionLabel,
   labels,
@@ -253,9 +337,17 @@ function CaptureDone({
   const { styles } = useStyles(permissionSheet);
   return /* @__PURE__ */ jsxs(View, { testID: "loam-capture-done", style: styles.done, children: [
     /* @__PURE__ */ jsx(PhaseAnnouncement, { message: announce ? label : null }),
-    /* @__PURE__ */ jsx(View, { accessible: false, style: styles.doneMark, ...decorativeProps(), children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.lg, color: theme.color.goodInk }) }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessible: false,
+        style: [styles.doneMark, { width: theme.ctl[size], height: theme.ctl[size] }],
+        ...decorativeProps(),
+        children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.lg, color: theme.color.goodInk })
+      }
+    ),
     /* @__PURE__ */ jsx(Text, { style: [styles.doneLabel, { color: camInk(theme) }], children: label }),
-    /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", fullWidth: true, onPress: onTakeAnother, children: actionLabel ?? t.takeAnother })
+    /* @__PURE__ */ jsx(Button, { variant, size, loading, fullWidth: true, onPress: onTakeAnother, children: actionLabel ?? t.takeAnother })
   ] });
 }
 var permissionSheet = createStyleSheet((theme) => ({
@@ -264,27 +356,31 @@ var permissionSheet = createStyleSheet((theme) => ({
     alignItems: "center",
     variants: {
       // The OS owns the dialog that is up. We draw nothing over it, and we do
-      // not leave live controls under it either.
+      // not leave live controls under it either — and we do not dim the copy:
+      // the three clauses are the point of the screen. Both buttons are
+      // `disabled`, and the shell takes no touch.
       inert: {
-        true: { opacity: theme.state.disabledOpacity, pointerEvents: "none" },
+        true: { pointerEvents: "none" },
         false: { pointerEvents: "auto" }
-      }
+      },
+      // The full-screen layout: the system ground, centred (iOS) or leading
+      // (Android) content.
+      layout: {
+        screen: {
+          flexGrow: 1,
+          justifyContent: "center",
+          padding: theme.space[24],
+          backgroundColor: theme.color.bg
+        },
+        card: {}
+      },
+      lead: { true: { alignItems: "flex-start" }, false: {} }
     }
   },
   card: {
     width: "100%",
     maxWidth: theme.panel.lg
   },
-  glyph: {
-    width: theme.ctl.lg,
-    height: theme.ctl.lg,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.infoSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.info
-  },
   heading: {
     fontFamily: theme.font.sans,
     fontSize: theme.type.title3.fontSize,
@@ -320,7 +416,7 @@ var permissionSheet = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space[12],
     padding: theme.space[16],
-    borderRadius: theme.radius.xl,
+    borderRadius: theme.radius.lg,
     backgroundColor: theme.black.a12,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.white.a5

package/dist/chunk-VLMT6KYT.js

@@ -0,0 +1,350 @@
+import { LevelMeter } from './chunk-EOLZWRV6.js';
+import { StatusDot } from './chunk-OANH27AK.js';
+import { Thinking } from './chunk-LUZFCCSD.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Text } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { announce } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Animated, Easing } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  recording: "Recording",
+  listening: "Listening\u2026",
+  paused: "Paused",
+  saving: "Saving\u2026",
+  savingReason: "Saving the recording",
+  failed: (kind) => kind === "recording" ? "Recording stopped" : "Listening stopped",
+  stop: "Stop",
+  done: "Done",
+  pause: "Pause",
+  resume: "Resume",
+  retry: "Retry",
+  dismiss: "Dismiss",
+  started: (kind) => kind === "recording" ? "Recording started" : "Listening",
+  announcePaused: "Paused",
+  saved: "Saved"
+};
+function formatRecordingTime(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const sec = String(total % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+function useElapsed(startedAt, running) {
+  const start = startedAt === void 0 ? void 0 : +startedAt;
+  const pausedFor = React.useRef(0);
+  const pausedAt = React.useRef(null);
+  const [now, setNow] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    pausedFor.current = 0;
+    pausedAt.current = null;
+  }, [start]);
+  React.useEffect(() => {
+    if (!running) {
+      pausedAt.current ??= Date.now();
+      return void 0;
+    }
+    if (pausedAt.current !== null) {
+      pausedFor.current += Date.now() - pausedAt.current;
+      pausedAt.current = null;
+    }
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [running]);
+  if (start === void 0) return 0;
+  const end = pausedAt.current ?? now;
+  return end - start - pausedFor.current;
+}
+function RecordingDot({ still }) {
+  const { styles: s } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const p = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (still) {
+      p.setValue(1);
+      return void 0;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(p, {
+          toValue: 0.4,
+          duration: theme.duration[700],
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        }),
+        Animated.timing(p, {
+          toValue: 1,
+          duration: theme.duration[700],
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [still, p, theme]);
+  return /* @__PURE__ */ jsx(View, { testID: "recording-dot", style: s.dotRing, children: /* @__PURE__ */ jsx(Animated.View, { style: [s.dot, { opacity: p }] }) });
+}
+function RecordingIndicator({
+  kind = "recording",
+  status = "active",
+  startedAt,
+  source,
+  level,
+  muted,
+  onStop,
+  onPause,
+  onResume,
+  onRetry,
+  onDismiss,
+  error,
+  presentation = "bar",
+  spot = "bottom-center",
+  compact = false,
+  count,
+  density = "comfortable",
+  orientation = "horizontal",
+  motion,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles: s } = useStyles(sheet);
+  const labels = useLabels("recordingIndicator", DEFAULT_LABELS, labelsProp);
+  const resolved = useResolvedMotion(motion);
+  const pill = presentation === "pill";
+  const recording = kind === "recording";
+  const elapsed = useElapsed(startedAt, status === "active");
+  const previous = React.useRef(null);
+  React.useEffect(() => {
+    const prev = previous.current;
+    previous.current = status;
+    if (status === "active" && (prev === null || prev === "paused")) announce(labels.started(kind));
+    else if (status === "paused" && prev !== "paused") announce(labels.announcePaused);
+  }, [status, kind, labels]);
+  const statusRef = React.useRef(status);
+  statusRef.current = status;
+  React.useEffect(
+    () => () => {
+      if (statusRef.current === "finishing") announce(labels.saved);
+    },
+    [labels.saved]
+  );
+  const failed = status === "failed";
+  const live = status === "active";
+  const label = failed ? labels.failed(kind) : status === "finishing" ? labels.saving : status === "paused" ? labels.paused : recording ? labels.recording : labels.listening;
+  const dot = status === "finishing" ? /* @__PURE__ */ jsx(Thinking, { size: "sm", tone: "neutral", label: "", announce: false, motion }) : failed ? /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: 16, color: theme.color.dangerOnSoft }) : status === "paused" ? /* @__PURE__ */ jsx(StatusDot, { state: "paused", size: "sm" }) : recording ? /* @__PURE__ */ jsx(RecordingDot, { still: resolved !== "full" }) : /* @__PURE__ */ jsx(View, { testID: "listening-dot", style: s.listenRing, children: /* @__PURE__ */ jsx(View, { style: s.listenDot }) });
+  const showLabel = !(pill && compact);
+  const showTime = recording && !failed && showLabel && !(pill && status === "finishing");
+  const showSource = !pill && !compact && !failed && status !== "finishing" && !!source;
+  const meterSlot = level !== void 0 && (!pill || live);
+  const ink = failed ? theme.color.dangerOnSoft : theme.color.text;
+  const vertical = spot.startsWith("top") ? s.top : s.bottom;
+  const horizontal = spot.endsWith("start") ? s.start : spot.endsWith("end") ? s.end : s.center;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityRole: "summary",
+      accessibilityLabel: [
+        label,
+        showTime ? formatRecordingTime(elapsed) : "",
+        failed ? error ?? "" : source ?? ""
+      ].filter(Boolean).join(", "),
+      style: [
+        s.root,
+        failed && s.failed,
+        pill ? [s.pill, vertical, horizontal] : s.bar,
+        density === "compact" ? { minHeight: theme.space[36], paddingVertical: theme.space[2] } : null,
+        orientation === "vertical" ? { flexDirection: "column", alignItems: "flex-start", borderRadius: theme.radius[12] } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: s.slot, children: dot }),
+        /* @__PURE__ */ jsxs(View, { style: s.text, children: [
+          /* @__PURE__ */ jsxs(View, { style: s.line, children: [
+            showLabel ? /* @__PURE__ */ jsx(Text, { variant: "subheadline", numberOfLines: 1, style: [s.label, { color: ink }], children: label }) : null,
+            showTime ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                variant: "footnote",
+                style: [s.count, { color: live ? theme.color.text : theme.color.text2 }],
+                children: formatRecordingTime(elapsed)
+              }
+            ) : null,
+            count !== void 0 && count > 0 ? /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "neutral", children: String(count) }) : null
+          ] }),
+          failed && error ? /* @__PURE__ */ jsx(Text, { variant: "caption1", numberOfLines: 1, style: { color: ink }, children: error }) : showSource ? /* @__PURE__ */ jsx(Text, { variant: "caption1", tone: "secondary", numberOfLines: 1, children: source }) : null
+        ] }),
+        meterSlot ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "recording-meter",
+            style: [
+              s.meter,
+              pill ? compact ? s.meterCompact : s.meterPill : null,
+              !live && s.hidden
+            ],
+            children: /* @__PURE__ */ jsx(
+              LevelMeter,
+              {
+                level,
+                size: 24,
+                bars: pill ? compact ? 8 : 12 : 24,
+                muted,
+                showStatus: false,
+                motion
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(View, { style: s.spacer }),
+        recording && onPause && onResume && live && !compact ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "md",
+            accessibilityLabel: labels.pause,
+            leadingIcon: "pause",
+            onPress: onPause
+          }
+        ) : null,
+        recording && onPause && onResume && status === "paused" ? pill ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "md",
+            accessibilityLabel: labels.resume,
+            leadingIcon: "play",
+            onPress: onResume
+          }
+        ) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", onPress: onResume, children: labels.resume }) : null,
+        failed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          onRetry ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", onPress: onRetry, children: labels.retry }) : null,
+          onDismiss ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "md",
+              accessibilityLabel: labels.dismiss,
+              leadingIcon: "x",
+              onPress: onDismiss
+            }
+          ) : null
+        ] }) : onStop ? (
+          // Icon-only 36 on phones, so the meter keeps its width.
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: recording ? "danger" : "primary",
+              size: "md",
+              accessibilityLabel: recording ? labels.stop : labels.done,
+              softDisabled: status === "finishing",
+              disabledReason: status === "finishing" ? labels.savingReason : void 0,
+              onPress: onStop,
+              children: recording ? /* @__PURE__ */ jsx(View, { style: [s.stopGlyph, { backgroundColor: theme.color.dangerInk }] }) : /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, color: theme.color.accentInk })
+            }
+          )
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.space[44],
+    // Final 13: the 36 slots sit in p 3 + the 1 px edge, so the bar lands on 44 (not 46).
+    paddingVertical: theme.space[3],
+    paddingStart: theme.space[3],
+    paddingEnd: theme.space[3],
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  bar: { borderRadius: theme.radius[12], marginHorizontal: theme.space.s4 },
+  pill: {
+    position: "absolute",
+    borderRadius: theme.radius.full,
+    paddingEnd: theme.space[3],
+    ...theme.shadow.lg
+  },
+  top: { top: theme.space.s4 },
+  bottom: { bottom: theme.space.s4 },
+  start: { start: theme.space.s4 },
+  end: { end: theme.space.s4 },
+  center: { alignSelf: "center" },
+  slot: {
+    width: theme.space[36],
+    height: theme.space[36],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dotRing: {
+    width: theme.space[14],
+    height: theme.space[14],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.danger,
+    backgroundColor: theme.color.dangerSoft,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.danger
+  },
+  listenRing: {
+    width: theme.space[14],
+    height: theme.space[14],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.info,
+    backgroundColor: theme.color.infoSoft,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  listenDot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.status.working
+  },
+  failed: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+  meter: {
+    flex: 1,
+    minWidth: theme.space[24],
+    height: theme.space[24],
+    marginHorizontal: theme.space.s2,
+    overflow: "hidden",
+    flexDirection: "row",
+    justifyContent: "flex-end"
+  },
+  meterPill: { flex: 0, width: theme.space[48], marginHorizontal: theme.space[6] },
+  meterCompact: { flex: 0, width: theme.space[32], marginHorizontal: theme.space[6] },
+  hidden: { opacity: 0 },
+  spacer: { flex: 1 },
+  stopGlyph: { width: theme.space[10], height: theme.space[10], borderRadius: theme.radius[2] },
+  text: { flexShrink: 1, minWidth: 0 },
+  line: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s2 },
+  label: { fontWeight: theme.fontWeight.semibold, color: theme.color.text },
+  count: {
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+
+export { RecordingIndicator, formatRecordingTime, useElapsed };