@tastic/hud 0.19.0 → 0.21.0

package/dist/index.js

@@ -38,22 +38,22 @@ __export(TriggerGauge_exports, {
 function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, dashWidth, startDeg = DEFAULT_START_DEG, endDeg = startDeg }) {
   const totalDurationMs = MOUNT_DURATION_MS + Math.max(0, segments - 1) * MOUNT_STAGGER_MS;
   const mountProgress = (0, import_react_native_reanimated.useSharedValue)(0);
-  (0, import_react8.useLayoutEffect)(() => {
+  (0, import_react9.useLayoutEffect)(() => {
     mountProgress.value = (0, import_react_native_reanimated.withTiming)(1, { duration: totalDurationMs, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
   }, []);
   const rawSweepDeg = ((endDeg - startDeg) % 360 + 360) % 360;
   const totalSweepDeg = rawSweepDeg === 0 ? 360 : rawSweepDeg;
   const step = segments > 0 ? totalSweepDeg / segments : 0;
-  const centerDeg = (0, import_react8.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
+  const centerDeg = (0, import_react9.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
   const singleSelect = litIndices.length === 1;
   const angleDeg = (0, import_react_native_reanimated.useSharedValue)(centerDeg(litIndices[0] ?? 0));
   const litIndicesKey = [...litIndices].sort((a, b) => a - b).join(",");
-  const [transitionFrom, setTransitionFrom] = (0, import_react8.useState)(litIndices);
+  const [transitionFrom, setTransitionFrom] = (0, import_react9.useState)(litIndices);
   const transitionFromKey = [...transitionFrom].sort((a, b) => a - b).join(",");
-  const lastKeyRef = (0, import_react8.useRef)(litIndicesKey);
-  const lastIndicesRef = (0, import_react8.useRef)(litIndices);
+  const lastKeyRef = (0, import_react9.useRef)(litIndicesKey);
+  const lastIndicesRef = (0, import_react9.useRef)(litIndices);
   const selectionProgress = (0, import_react_native_reanimated.useSharedValue)(1);
-  (0, import_react8.useLayoutEffect)(() => {
+  (0, import_react9.useLayoutEffect)(() => {
     if (litIndicesKey !== lastKeyRef.current) {
       if (singleSelect && lastIndicesRef.current.length === 1) {
         angleDeg.value = (0, import_react_native_reanimated.withTiming)(centerDeg(litIndices[0]), { duration: SELECTION_TRANSITION_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
@@ -135,13 +135,13 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_core7, import_react8, import_react_native17, import_react_native_reanimated, import_jsx_runtime16, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles14;
+var import_react_native_skia, import_core7, import_react9, import_react_native17, import_react_native_reanimated, import_jsx_runtime16, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles14;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
     import_core7 = require("@tastic/core");
-    import_react8 = require("react");
+    import_react9 = require("react");
     import_react_native17 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
     import_jsx_runtime16 = require("react/jsx-runtime");
@@ -204,6 +204,7 @@ __export(index_exports, {
   getCpuDifficultyPopoverId: () => getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize: () => getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight: () => getLabeledDropdownContentHeight,
+  getProfilePopoverId: () => getProfilePopoverId,
   getStaggeredWordDuration: () => getStaggeredWordDuration,
   isCompactDialogHeight: () => isCompactDialogHeight,
   loadSkiaWeb: () => loadSkiaWeb,
@@ -301,9 +302,10 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const tierAccent = (tierColor) => dark ? tierColor : (0, import_auto_paper2.getBlendedColor)("#000000", tierColor, 0.5);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
-    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: row.tierColor, unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
   ] });
 }
 var styles2 = import_react_native3.StyleSheet.create({
@@ -427,7 +429,7 @@ var import_auto_paper9 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
 var import_core4 = require("@tastic/core");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_native13 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
@@ -436,6 +438,7 @@ var import_react_native_safe_area_context2 = require("react-native-safe-area-con
 var import_auto_paper8 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
+var import_react3 = require("react");
 var import_react_native11 = require("react-native");
 var import_react_native_paper7 = require("react-native-paper");
 
@@ -589,6 +592,18 @@ function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onC
   const { colors } = (0, import_auto_paper8.useAutoPaperTheme)();
   const { fg } = useOverlayCardColors();
   const { compact, onLayout } = useCompactDialog(rotation);
+  const onCancelRef = (0, import_react3.useRef)(onCancel);
+  (0, import_react3.useEffect)(() => {
+    onCancelRef.current = onCancel;
+  });
+  (0, import_react3.useEffect)(() => {
+    if (!visible) return;
+    const subscription = import_react_native11.BackHandler.addEventListener("hardwareBackPress", () => {
+      onCancelRef.current?.();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [visible]);
   if (!visible) return null;
   const accent = destructive ? colors.danger : colors.primary;
   const onAccent = destructive ? colors.onDanger : colors.onPrimary;
@@ -625,7 +640,7 @@ var styles8 = import_react_native11.StyleSheet.create({
 
 // src/RotatedFrame.tsx
 var import_core3 = require("@tastic/core");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_native12 = require("react-native");
 var import_react_native_paper8 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
@@ -636,7 +651,7 @@ function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea =
   const window = (0, import_react_native12.useWindowDimensions)();
   const { width, height } = (0, import_core3.rotateDimensions)(window.width, window.height, rotation);
   const rawInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const insets = (0, import_react3.useMemo)(() => rotatedSafeArea ? (0, import_core3.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
+  const insets = (0, import_react4.useMemo)(() => rotatedSafeArea ? (0, import_core3.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
   const cappedWidth = maxContentWidth !== void 0 && width > height ? maxContentWidth : void 0;
   const column = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [styles9.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core3.FakeLandscapeView, { rotation, passThrough, style: styles9.root, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Portal.Host, { children: column }) : column }) });
@@ -654,18 +669,18 @@ var styles9 = import_react_native12.StyleSheet.create({
 });
 
 // src/useUpdateConfirmBridge.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useUpdateConfirmBridge() {
-  const [manifest, setManifest] = (0, import_react4.useState)(null);
-  const resolveRef = (0, import_react4.useRef)(null);
-  const onConfirm = (0, import_react4.useCallback)(
+  const [manifest, setManifest] = (0, import_react5.useState)(null);
+  const resolveRef = (0, import_react5.useRef)(null);
+  const onConfirm = (0, import_react5.useCallback)(
     (next) => new Promise((resolve) => {
       resolveRef.current = resolve;
       setManifest(next);
     }),
     []
   );
-  const respond = (0, import_react4.useCallback)((confirmed) => {
+  const respond = (0, import_react5.useCallback)((confirmed) => {
     setManifest(null);
     resolveRef.current?.(confirmed);
     resolveRef.current = null;
@@ -690,11 +705,11 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const isTouchPrimary = (0, import_core4.useIsTouchPrimaryDevice)();
   const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press2.useHapticSettings)();
   const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
-  const sound = (0, import_react5.useContext)(import_feedback_press2.SoundContext);
+  const sound = (0, import_react6.useContext)(import_feedback_press2.SoundContext);
   const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
   const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper9.useThemeSettings)();
   const expoBlur = (0, import_auto_paper9.useBlurModule)();
-  const [infoMessage, setInfoMessage] = (0, import_react5.useState)(null);
+  const [infoMessage, setInfoMessage] = (0, import_react6.useState)(null);
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = (0, import_updater.useUpdater)({
     autoCheck: false,
@@ -704,7 +719,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     onInfo: (title, message) => setInfoMessage({ title, message })
   });
   const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
-  const [opened, setOpened] = (0, import_react5.useState)(visible);
+  const [opened, setOpened] = (0, import_react6.useState)(visible);
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = import_react_native13.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
@@ -822,7 +837,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: [overlayActionStyles.actions, styles10.footer], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ConfirmDialog, { visible: !!updateManifest, title: "Update Available", message: updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation: 0, onConfirm: () => respondToUpdateConfirm(true), onCancel: () => respondToUpdateConfirm(false) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null), onCancel: () => setInfoMessage(null) })
   ] }) });
 }
 var SHEET_GUTTER = 24;
@@ -913,24 +928,24 @@ var styles10 = import_react_native13.StyleSheet.create({
 var import_auto_paper10 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
 var import_core5 = require("@tastic/core");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_native14 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
+function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, backLabel = "Back", hitSlop, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
   const { dark, colors } = (0, import_auto_paper10.useAutoPaperTheme)();
   const ambientRotation = (0, import_core5.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
-  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react6.useState)(false);
+  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react7.useState)(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [styles11.container, { backgroundColor: bg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [styles11.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper10.Text, { variant: titleVariant, style: [styles11.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.ScrollView, { style: styles11.scrollView, contentContainerStyle: [styles11.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_auto_paper10.FadingScrollView, { style: styles11.scrollView, contentContainerStyle: [styles11.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles11.resetButton, children: resetLabel })
     ] }),
@@ -971,7 +986,7 @@ var styles11 = import_react_native14.StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.
@@ -1086,11 +1101,11 @@ var styles13 = import_react_native16.StyleSheet.create({
 });
 
 // src/SkiaGate.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function SkiaGate({ getComponent, componentProps, fallback = null }) {
-  const [Component, setComponent] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const [Component, setComponent] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
     let cancelled = false;
     getComponent().then((mod) => {
       if (!cancelled) setComponent(() => mod.default);
@@ -1111,7 +1126,7 @@ function TriggerGaugeHost(props) {
 }
 
 // src/useAutoAlign.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_native18 = require("react-native");
 var EDGE_MARGIN = 12;
 function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
@@ -1124,18 +1139,18 @@ function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
 }
 function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const triggerRef = (0, import_react9.useRef)(null);
+  const triggerRef = (0, import_react10.useRef)(null);
   const { width: windowWidth, height: windowHeight } = (0, import_react_native18.useWindowDimensions)();
-  const [align, setAlign] = (0, import_react9.useState)("center");
-  const [verticalAlign, setVerticalAlign] = (0, import_react9.useState)("below");
-  const [maxHeight, setMaxHeight] = (0, import_react9.useState)(contentHeight);
-  const [measured, setMeasured] = (0, import_react9.useState)(false);
-  const [prevOpen, setPrevOpen] = (0, import_react9.useState)(open);
+  const [align, setAlign] = (0, import_react10.useState)("center");
+  const [verticalAlign, setVerticalAlign] = (0, import_react10.useState)("below");
+  const [maxHeight, setMaxHeight] = (0, import_react10.useState)(contentHeight);
+  const [measured, setMeasured] = (0, import_react10.useState)(false);
+  const [prevOpen, setPrevOpen] = (0, import_react10.useState)(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
     if (open) setMeasured(false);
   }
-  const measure = (0, import_react9.useCallback)(() => {
+  const measure = (0, import_react10.useCallback)(() => {
     triggerRef.current?.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
       const { x, y, width: triggerWidth, height: triggerHeight } = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
       const centerX = x + triggerWidth / 2;
@@ -1152,7 +1167,7 @@ function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
       setMeasured(true);
     });
   }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (open) measure();
   }, [open, measure]);
   return { align, maxHeight, measured, triggerRef, verticalAlign };
@@ -1654,7 +1669,7 @@ function loadSkiaWeb() {
 
 // src/PlayerSetupPanel.tsx
 var import_profile2 = require("@tastic/profile");
-var import_react_native26 = require("react-native");
+var import_react_native27 = require("react-native");
 var import_react_native_paper16 = require("react-native-paper");
 
 // src/ReadyButton.tsx
@@ -1681,42 +1696,89 @@ var styles20 = import_react_native25.StyleSheet.create({
 });
 
 // src/usePopoverHost.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function usePopoverHost() {
-  const [openId, setOpenId] = (0, import_react10.useState)(null);
-  const toggle = (0, import_react10.useCallback)((id) => {
+  const [openId, setOpenId] = (0, import_react11.useState)(null);
+  const toggle = (0, import_react11.useCallback)((id) => {
     setOpenId((prev) => prev === id ? null : id);
   }, []);
-  const close = (0, import_react10.useCallback)(() => setOpenId(null), []);
+  const close = (0, import_react11.useCallback)(() => setOpenId(null), []);
   return { openId, toggle, close };
 }
 
+// src/useZoneClampedAlign.ts
+var import_split_screen = require("@tastic/split-screen");
+var import_react12 = require("react");
+var import_react_native26 = require("react-native");
+var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
+var EDGE_MARGIN2 = 12;
+function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
+  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
+  const zone = (0, import_split_screen.useZoneBounds)();
+  const { height: windowHeight } = (0, import_react_native26.useWindowDimensions)();
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const shouldMeasure = open && auto.measured && zone !== null;
+  const [ownBounds, setOwnBounds] = (0, import_react12.useState)(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react12.useState)(shouldMeasure);
+  if (shouldMeasure !== prevShouldMeasure) {
+    setPrevShouldMeasure(shouldMeasure);
+    setOwnBounds(null);
+  }
+  (0, import_react12.useEffect)(() => {
+    if (!shouldMeasure) return;
+    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
+      const belowShared = zone.zoneSide === "belowShared";
+      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
+      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
+      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
+      let awaySide = belowShared ? "below" : "above";
+      let towardSide = belowShared ? "above" : "below";
+      if (zone.rotated) {
+        awaySide = awaySide === "above" ? "below" : "above";
+        towardSide = towardSide === "above" ? "below" : "above";
+      }
+      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
+    });
+  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
+  if (!zone) return auto;
+  if (!ownBounds) return { ...auto, measured: false };
+  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
+}
+
 // src/PlayerSetupPanel.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
+function getProfilePopoverId(idPrefix) {
+  return `${idPrefix}-profile`;
+}
 function getCpuDifficultyPopoverId(idPrefix) {
   return `${idPrefix}-difficulty`;
 }
-function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon = "face-man", cpuIcon = "robot" }) {
+function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor = true, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon = "face-man", cpuIcon = "robot" }) {
   const ownHost = usePopoverHost();
   const popover = host ?? ownHost;
   const ownPopoverOpen = popover.openId?.startsWith(`${idPrefix}-`) ?? false;
   const pickerRowPopoverOpen = popover.openId === getColorPopoverId(idPrefix) || secondPickerId !== void 0 && popover.openId === secondPickerId;
   const showProfilePicker = isHuman && profiles !== void 0 && !!onProfileSelect;
   const showCpuDifficulty = !isHuman && cpuDifficulty !== void 0 && cpuDifficultyOptions !== void 0 && !!onCpuDifficultyChange;
+  const seatButton = showProfilePicker || showCpuDifficulty;
   const selectedProfile = profiles?.find((p) => p.id === selectedProfileId) ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LabeledDropdown, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, alignOverride: cpuDifficultyAlignOverride }) : label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
+  const colorSection = showColor ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: showProfilePicker && selectedProfile ? colorCaption : void 0 } : void 0;
+  const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix);
+  const seatPickerSize = showProfilePicker ? (0, import_profile2.getProfilePickerContentSize)(profiles.length, !!onManageProfiles, colorSection) : (0, import_profile2.getOptionPickerContentSize)(cpuDifficultyOptions?.length ?? 0, colorSection);
+  const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
+    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles, colorSection, alignOverride: seatPickerAlign }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    (!seatButton || secondPicker) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
+      !seatButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
       secondPicker
     ] }),
     isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
-var styles21 = import_react_native26.StyleSheet.create({
+var styles21 = import_react_native27.StyleSheet.create({
   panel: {
     alignItems: "center",
     gap: 12
@@ -1727,9 +1789,9 @@ var styles21 = import_react_native26.StyleSheet.create({
   panelOpen: {
     zIndex: 100
   },
-  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the color picker and (when
-  // present) secondPicker sit side by side within this row instead of stacked in the panel's own
-  // column.
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the fallback color swatch and
+  // (when present) secondPicker sit side by side within this row instead of stacked in the panel's
+  // own column.
   pickerRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1748,20 +1810,20 @@ var styles21 = import_react_native26.StyleSheet.create({
 });
 
 // src/PressAwayOverlay.tsx
-var import_react_native27 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native27.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native28.StyleSheet.absoluteFill, style] });
 }
 
 // src/SharedActionBand.tsx
 var import_feedback_press9 = require("@rific/feedback-press");
-var import_react_native28 = require("react-native");
+var import_react_native29 = require("react-native");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: styles22.actionsRow, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: styles22.actionsRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
       onRandomize && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
       onReset && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
@@ -1770,7 +1832,7 @@ function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popove
     children
   ] });
 }
-var styles22 = import_react_native28.StyleSheet.create({
+var styles22 = import_react_native29.StyleSheet.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1786,8 +1848,8 @@ var styles22 = import_react_native28.StyleSheet.create({
 });
 
 // src/StaggeredWord.tsx
-var import_react11 = require("react");
-var import_react_native29 = require("react-native");
+var import_react13 = require("react");
+var import_react_native30 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var STAGGER_MS = 45;
@@ -1797,7 +1859,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = (0, import_react_native_reanimated2.useSharedValue)(reducedMotion ? 1 : 0);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (reducedMotion) return;
     progress.value = (0, import_react_native_reanimated2.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated2.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.back(1.5)) }));
   }, [reducedMotion]);
@@ -1808,9 +1870,9 @@ function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSiz
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_reanimated2.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
 }
-var styles23 = import_react_native29.StyleSheet.create({
+var styles23 = import_react_native30.StyleSheet.create({
   row: {
     flexDirection: "row"
   }
@@ -1827,63 +1889,24 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
 }
 
 // src/useQuitConfirmation.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = (0, import_react12.useState)(false);
-  const hasProgressRef = (0, import_react12.useRef)(hasProgress);
-  (0, import_react12.useEffect)(() => {
+  const [confirmVisible, setConfirmVisible] = (0, import_react14.useState)(false);
+  const hasProgressRef = (0, import_react14.useRef)(hasProgress);
+  (0, import_react14.useEffect)(() => {
     hasProgressRef.current = hasProgress;
   });
-  const onConfirmedBackRef = (0, import_react12.useRef)(onConfirmedBack);
-  (0, import_react12.useEffect)(() => {
+  const onConfirmedBackRef = (0, import_react14.useRef)(onConfirmedBack);
+  (0, import_react14.useEffect)(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
-  const requestBack = (0, import_react12.useCallback)(() => {
+  const requestBack = (0, import_react14.useCallback)(() => {
     if (hasProgressRef.current()) setConfirmVisible(true);
     else onConfirmedBackRef.current();
   }, []);
-  const cancelBack = (0, import_react12.useCallback)(() => setConfirmVisible(false), []);
+  const cancelBack = (0, import_react14.useCallback)(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
-
-// src/useZoneClampedAlign.ts
-var import_split_screen = require("@tastic/split-screen");
-var import_react13 = require("react");
-var import_react_native30 = require("react-native");
-var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var EDGE_MARGIN2 = 12;
-function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
-  const zone = (0, import_split_screen.useZoneBounds)();
-  const { height: windowHeight } = (0, import_react_native30.useWindowDimensions)();
-  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = (0, import_react13.useState)(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react13.useState)(shouldMeasure);
-  if (shouldMeasure !== prevShouldMeasure) {
-    setPrevShouldMeasure(shouldMeasure);
-    setOwnBounds(null);
-  }
-  (0, import_react13.useEffect)(() => {
-    if (!shouldMeasure) return;
-    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
-      const belowShared = zone.zoneSide === "belowShared";
-      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
-      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
-      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
-      let awaySide = belowShared ? "below" : "above";
-      let towardSide = belowShared ? "above" : "below";
-      if (zone.rotated) {
-        awaySide = awaySide === "above" ? "below" : "above";
-        towardSide = towardSide === "above" ? "below" : "above";
-      }
-      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
-    });
-  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
-  if (!zone) return auto;
-  if (!ownBounds) return { ...auto, measured: false };
-  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AchievementCatalogSection,
@@ -1923,6 +1946,7 @@ function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
   getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight,
+  getProfilePopoverId,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,