@tastic/hud 0.6.0 → 0.8.1

package/dist/index.mjs

@@ -1,3 +1,7 @@
+import {
+  SkiaGate
+} from "./chunk-XEOFR236.mjs";
+
 // src/AchievementRow.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
 import { StyleSheet, View } from "react-native";
@@ -70,7 +74,7 @@ var styles = StyleSheet.create({
 import { AutoAppearancePicker, Dialog, useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from "@rific/feedback-press";
 import { useUpdater } from "@rific/updater";
-import { useIsTouchPrimaryDevice } from "@tastic/core";
+import { useIsTouchPrimaryDevice, useRotation } from "@tastic/core";
 import { useContext, useState } from "react";
 import { Platform, ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { Icon as Icon2, Portal, Text as Text2 } from "react-native-paper";
@@ -78,8 +82,10 @@ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ jsx2(View2, { style: [styles2.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx2(Icon2, { source, size: 18, color }) });
 }
-function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
   const { dark, colors } = useAutoPaperTheme2();
+  const ambientRotation = useRotation();
+  const rotation = rotationOverride ?? ambientRotation;
   const isTouchPrimary = useIsTouchPrimaryDevice();
   const { settings: hapticSettings, set: setHapticSettings } = useHapticSettings();
   const { settings: soundSettings, set: setSoundSettings } = useSoundSettings();
@@ -271,12 +277,15 @@ var styles2 = StyleSheet2.create({
 // src/BaseStatsScreen.tsx
 import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { Button as Button2, IconButton } from "@rific/feedback-press";
+import { useRotation as useRotation2 } from "@tastic/core";
 import { useState as useState2 } from "react";
 import { ScrollView as ScrollView2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Icon as Icon3, Portal as Portal2, Text as Text3 } from "react-native-paper";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function BaseStatsScreen({ rotation = 0, 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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }) {
+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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }) {
   const { dark, colors } = useAutoPaperTheme3();
+  const ambientRotation = useRotation2();
+  const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = useState2(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -369,20 +378,79 @@ var styles3 = StyleSheet3.create({
   }
 });
 
+// src/ConfirmDialog.tsx
+import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
+import { Button as Button3 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { Icon as Icon4, Portal as Portal3, Text as Text4 } from "react-native-paper";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
+  const { dark, colors } = useAutoPaperTheme4();
+  if (!visible) return null;
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const cardBg = dark ? "#111111" : "#F2F2F2";
+  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
+  const accent = destructive ? colors.danger : colors.primary;
+  const onAccent = destructive ? colors.onDanger : colors.onPrimary;
+  return /* @__PURE__ */ jsx4(Portal3, { children: /* @__PURE__ */ jsx4(View4, { style: styles4.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: [styles4.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+    /* @__PURE__ */ jsx4(Icon4, { source: icon, size: 64, color: accent }),
+    /* @__PURE__ */ jsx4(Text4, { variant: "headlineLarge", style: [styles4.title, { color: accent }], children: title }),
+    /* @__PURE__ */ jsx4(Text4, { variant: "bodyLarge", style: [styles4.body, { color: fg }], children: message }),
+    /* @__PURE__ */ jsxs4(View4, { style: styles4.actions, children: [
+      /* @__PURE__ */ jsx4(Button3, { mode: "outlined", onPress: onCancel, style: styles4.actionButton, children: cancelLabel }),
+      /* @__PURE__ */ jsx4(Button3, { mode: "contained", onPress: onConfirm, style: styles4.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+    ] })
+  ] }) }) });
+}
+var styles4 = StyleSheet4.create({
+  actionButton: {
+    flex: 1
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+    width: "100%"
+  },
+  body: {
+    textAlign: "center"
+  },
+  card: {
+    alignItems: "center",
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlay: {
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.72)",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
+  title: {
+    fontWeight: "bold"
+  }
+});
+
 // src/ContentGutter.tsx
 import { computeContentBounds } from "@tastic/core";
-import { StyleSheet as StyleSheet4, useWindowDimensions, View as View4 } from "react-native";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet5, useWindowDimensions, View as View5 } from "react-native";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
   const { width: windowWidth } = useWindowDimensions();
   const { contentWidth, gutterWidth } = computeContentBounds(windowWidth, maxContentWidth ?? Infinity);
-  return /* @__PURE__ */ jsxs4(View4, { style: [styles4.row, style], children: [
-    /* @__PURE__ */ jsx4(View4, { style: [styles4.gutter, { width: gutterWidth }], children: leftGutter }),
-    /* @__PURE__ */ jsx4(View4, { style: { width: contentWidth }, children }),
-    /* @__PURE__ */ jsx4(View4, { style: [styles4.gutter, { width: gutterWidth }], children: rightGutter })
+  return /* @__PURE__ */ jsxs5(View5, { style: [styles5.row, style], children: [
+    /* @__PURE__ */ jsx5(View5, { style: [styles5.gutter, { width: gutterWidth }], children: leftGutter }),
+    /* @__PURE__ */ jsx5(View5, { style: { width: contentWidth }, children }),
+    /* @__PURE__ */ jsx5(View5, { style: [styles5.gutter, { width: gutterWidth }], children: rightGutter })
   ] });
 }
-var styles4 = StyleSheet4.create({
+var styles5 = StyleSheet5.create({
   // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
   // column instead of clipping cleanly at its own real width.
   gutter: {
@@ -393,39 +461,24 @@ var styles4 = StyleSheet4.create({
   }
 });
 
-// src/CornerActionButtons.tsx
-import { IconButton as IconButton2 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet5 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function CornerActionButtons({ onBack, onSettings, fg, insets }) {
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(IconButton2, { icon: "arrow-left", iconColor: fg, size: 24, style: [styles5.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: "Back" }),
-    /* @__PURE__ */ jsx5(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles5.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
-  ] });
-}
-var styles5 = StyleSheet5.create({
-  back: {
-    position: "absolute"
-  },
-  topRight: {
-    position: "absolute"
-  }
-});
+// src/ControlSchemePicker.tsx
+import { useIsTouchPrimaryDevice as useIsTouchPrimaryDevice2 } from "@tastic/core";
+import { Platform as Platform3 } from "react-native";
+
+// src/SectionedDropdown.tsx
+import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
+import { IconButton as IconButton2, TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
+import { useRotation as useRotation3 } from "@tastic/core";
+import { ScrollView as ScrollView3, StyleSheet as StyleSheet7, View as View8 } from "react-native";
+import { Icon as Icon5, Text as Text5 } from "react-native-paper";
 
 // src/fonts.ts
 import { Platform as Platform2 } from "react-native";
 var MONO_FONT = Platform2.select({ ios: "Menlo", android: "monospace", default: "monospace" });
 
-// src/InlineColorPicker.tsx
-import { defaultColors, getContrastColor } from "@rific/auto-paper";
-import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
-import { clamp } from "@tastic/core";
-import { ScrollView as ScrollView3, StyleSheet as StyleSheet7, useWindowDimensions as useWindowDimensions3, View as View7 } from "react-native";
-import { Icon as Icon4, Text as Text4 } from "react-native-paper";
-
 // src/PopoverBody.tsx
-import { StyleSheet as StyleSheet6, View as View5 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet6, View as View6 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
 var CARET_DIP = 1;
@@ -439,11 +492,11 @@ function PopoverBody({ visible, children, align = "center", verticalAlign = "bel
   const caretFill = above ? "borderTopColor" : "borderBottomColor";
   const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
   const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
-  return /* @__PURE__ */ jsxs6(View5, { style: [styles6.content, alignStyle, verticalStyle], children: [
+  return /* @__PURE__ */ jsxs6(View6, { style: [styles6.content, alignStyle, verticalStyle], children: [
     children,
-    caretColor && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx6(View5, { style: [styles6.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ jsx6(View5, { style: [styles6.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    caretColor && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(View6, { style: [styles6.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ jsx6(View6, { style: [styles6.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
     ] })
   ] });
 }
@@ -489,11 +542,27 @@ var styles6 = StyleSheet6.create({
   }
 });
 
+// src/TriggerGaugeHost.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var getTriggerGauge = () => import("./TriggerGauge-2OJOOF6I.mjs").then((mod) => ({ default: mod.TriggerGauge }));
+function TriggerGaugeHost(props) {
+  return /* @__PURE__ */ jsx7(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
+}
+
 // src/useAutoAlign.ts
 import { useCallback, useEffect, useRef, useState as useState3 } from "react";
 import { useWindowDimensions as useWindowDimensions2 } from "react-native";
 var EDGE_MARGIN = 12;
-function useAutoAlign(open, contentWidth, contentHeight) {
+function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
+  if (rotation === 0) return { x, y, width, height };
+  const cx = windowWidth / 2;
+  const cy = windowHeight / 2;
+  const dx = x + width / 2 - cx;
+  const dy = y + height / 2 - cy;
+  const [newDx, newDy, newWidth, newHeight] = rotation === 180 ? [-dx, -dy, width, height] : rotation === 90 ? [-dy, dx, height, width] : [dy, -dx, height, width];
+  return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
+}
+function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
   const triggerRef = useRef(null);
   const { width: windowWidth, height: windowHeight } = useWindowDimensions2();
   const [align, setAlign] = useState3("center");
@@ -506,7 +575,8 @@ function useAutoAlign(open, contentWidth, contentHeight) {
     if (open) setMeasured(false);
   }
   const measure = useCallback(() => {
-    triggerRef.current?.measureInWindow((x, y, triggerWidth, triggerHeight) => {
+    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;
       const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN;
       const overflowsLeft = centerX - contentWidth / 2 < EDGE_MARGIN;
@@ -520,15 +590,275 @@ function useAutoAlign(open, contentWidth, contentHeight) {
       setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
       setMeasured(true);
     });
-  }, [contentWidth, contentHeight, windowWidth, windowHeight]);
+  }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
   useEffect(() => {
     if (open) measure();
   }, [open, measure]);
   return { align, maxHeight, measured, triggerRef, verticalAlign };
 }
 
+// src/SectionedDropdown.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var MENU_BORDER_WIDTH = 1;
+var TRIGGER_SIZE = 44;
+var MENU_MIN_WIDTH = 200;
+var MENU_MAX_WIDTH = 220;
+var MENU_ITEM_ICON_SIZE = 18;
+var MENU_ITEM_LABEL_MAX_WIDTH = 150;
+var MENU_ITEM_HEIGHT = 40;
+var MENU_ITEM_HEIGHT_WITH_DESCRIPTION = 58;
+var MENU_DIVIDER_HEIGHT = 9;
+var MENU_VERTICAL_PADDING = 12;
+function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, rotation: rotationOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
+  const ambientRotation = useRotation3();
+  const rotation = rotationOverride ?? ambientRotation;
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const menuBorderColor = getBlendedColor(mutedColor, menuBg, 0.5);
+  const resolvedOnAccentColor = onAccentColor ?? getColorRoles(accentColor, menuBg).onColor;
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const open = host.openId === id;
+  const estimatedHeight = MENU_VERTICAL_PADDING + sections.reduce((sum, section, sectionIndex) => {
+    const rows = section.options.reduce((rowSum, option) => rowSum + (option.description ? MENU_ITEM_HEIGHT_WITH_DESCRIPTION : MENU_ITEM_HEIGHT), 0);
+    const footer = section.kind === "multi" && section.allClear ? MENU_ITEM_HEIGHT : 0;
+    const divider = sectionIndex > 0 ? MENU_DIVIDER_HEIGHT : 0;
+    return sum + rows + footer + divider;
+  }, 0);
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, MENU_MAX_WIDTH, estimatedHeight, rotation);
+  const align = alignOverride ?? autoAlign;
+  const onlySection = sections.length === 1 ? sections[0] : null;
+  const selectedOption = onlySection?.kind === "single" ? onlySection.options.find((o) => o.value === onlySection.value) : void 0;
+  const triggerIcon = selectedOption?.icon ?? icon;
+  const triggerIconSize = selectedOption?.iconSize ?? 22;
+  const hasMultiSection = sections.some((s) => s.kind === "multi");
+  const anyMultiSelected = sections.some((s) => s.kind === "multi" && s.value.length > 0);
+  const triggerIconColor = hasMultiSection ? anyMultiSelected ? accentColor : fg : fg;
+  const gaugeSegments = sections.reduce((sum, section) => sum + section.options.length, 0);
+  const gaugeLitIndices = [];
+  let gaugeOffset = 0;
+  for (const section of sections) {
+    if (section.kind === "single") {
+      const index = section.options.findIndex((o) => o.value === section.value);
+      if (index >= 0) gaugeLitIndices.push(gaugeOffset + index);
+    } else {
+      section.options.forEach((o, i) => {
+        if (section.value.includes(o.value)) gaugeLitIndices.push(gaugeOffset + i);
+      });
+    }
+    gaugeOffset += section.options.length;
+  }
+  const anchorStyle = [styles7.anchor, open && styles7.anchorOpen];
+  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
+  const dividerStyle = { backgroundColor: menuBorderColor };
+  return /* @__PURE__ */ jsxs7(View8, { style: anchorStyle, children: [
+    /* @__PURE__ */ jsxs7(View8, { ref: triggerRef, collapsable: false, style: styles7.triggerBox, children: [
+      /* @__PURE__ */ jsx8(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ jsx8(IconButton2, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+    ] }),
+    /* @__PURE__ */ jsx8(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx8(ScrollView3, { style: [styles7.menu, menuStyle], contentContainerStyle: styles7.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs7(View8, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx8(View8, { style: [styles7.divider, dividerStyle] }),
+      section.kind === "single" ? /* @__PURE__ */ jsx8(
+        SingleSection,
+        {
+          section,
+          accentColor,
+          onAccentColor: resolvedOnAccentColor,
+          mutedColor,
+          labelFontFamily,
+          onSelect: (value) => {
+            section.onChange(value);
+            if (autoDismiss) host.close();
+          }
+        }
+      ) : /* @__PURE__ */ jsx8(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+    ] }, section.id)) }) })
+  ] });
+}
+function SingleSection({
+  section,
+  accentColor,
+  onAccentColor,
+  mutedColor,
+  labelFontFamily,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx8(Fragment3, { children: section.options.map((option) => {
+    const selected = option.value === section.value;
+    const taken = !selected && option.value === section.takenValue;
+    const rowColor = selected ? onAccentColor : mutedColor;
+    const itemStyle = [styles7.item, selected && { backgroundColor: accentColor }, taken && styles7.itemTaken];
+    const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+    const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
+    return /* @__PURE__ */ jsx8(TouchableRipple2, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs7(View8, { style: styles7.itemRow, children: [
+      option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ jsxs7(View8, { style: styles7.itemLabelColumn, children: [
+        /* @__PURE__ */ jsx8(Text5, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx8(Text5, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+      ] })
+    ] }) }, option.value);
+  }) });
+}
+function MultiSection({
+  section,
+  accentColor,
+  onAccentColor,
+  mutedColor,
+  labelFontFamily,
+  allClearLabels
+}) {
+  const allSelected = section.value.length === section.options.length;
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    section.options.map((option, i) => {
+      const selected = section.value.includes(option.value);
+      const rowColor = selected ? onAccentColor : mutedColor;
+      const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
+      const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
+      const itemStyle = [styles7.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
+      return /* @__PURE__ */ jsx8(TouchableRipple2, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs7(View8, { style: styles7.itemRow, children: [
+        option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ jsx8(Text5, { variant: "labelLarge", style: [styles7.itemLabelFlex, labelStyle], children: option.label })
+      ] }) }, option.value);
+    }),
+    section.allClear && /* @__PURE__ */ jsx8(TouchableRipple2, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles7.item, children: /* @__PURE__ */ jsx8(Text5, { variant: "labelLarge", style: [styles7.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+  ] });
+}
+var styles7 = StyleSheet7.create({
+  allClearLabel: {
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  anchor: {
+    position: "relative"
+  },
+  // React Native Web gives every position:'relative' view an explicit zIndex (0, not 'auto'),
+  // which makes each one its own stacking context — so a zIndex set only on the popover content
+  // below only wins comparisons within this anchor's own box, not against this anchor's own later
+  // siblings (e.g. a Ready button), which are otherwise painted on top by DOM-order tiebreak.
+  // Elevating the anchor itself, only while its popover is open, fixes that at the right level.
+  anchorOpen: {
+    zIndex: 100
+  },
+  divider: {
+    height: StyleSheet7.hairlineWidth,
+    marginVertical: 4
+  },
+  item: {
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  itemLabelColumn: {
+    maxWidth: MENU_ITEM_LABEL_MAX_WIDTH
+  },
+  itemLabelFlex: {
+    flex: 1
+  },
+  itemRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8
+  },
+  // Same opacity as ProfilePicker's rowDisabled / InlineColorPicker's swatchTaken — the fleet's
+  // established "shown, not removed" treatment for another seat's own current pick.
+  itemTaken: {
+    opacity: 0.35
+  },
+  menu: {
+    borderRadius: 12,
+    borderWidth: MENU_BORDER_WIDTH,
+    elevation: 8,
+    maxWidth: MENU_MAX_WIDTH,
+    minWidth: MENU_MIN_WIDTH,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  // Separate from `menu` itself — a ScrollView's own style sets the scrolling frame's bounds
+  // (including the maxHeight that actually caps it), while padding/gap belong to its
+  // contentContainerStyle, which sizes to the *unclamped* content instead of the frame.
+  menuContent: {
+    gap: 4,
+    padding: 6
+  },
+  // Fixed hit-area regardless of the current option's iconSize, so a small-vs-large trigger icon
+  // doesn't shift this picker's position within its row.
+  triggerBox: {
+    alignItems: "center",
+    height: TRIGGER_SIZE,
+    justifyContent: "center",
+    width: TRIGGER_SIZE
+  }
+});
+
+// src/ControlSchemePicker.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ControlSchemePicker({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }) {
+  const isTouchPrimary = useIsTouchPrimaryDevice2();
+  if (Platform3.OS !== "web" || isTouchPrimary) return null;
+  return /* @__PURE__ */ jsx9(SectionedDropdown, { id, host, icon: "keyboard-outline", accessibilityLabel: "Control scheme", sections: [{ kind: "single", id: "controls", options, value, onChange, takenValue }], accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily });
+}
+
+// src/CornerActionButtons.tsx
+import { IconButton as IconButton3 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet8 } from "react-native";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx10(IconButton3, { icon: backIcon, iconColor: fg, size: 24, style: [styles8.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ jsx10(IconButton3, { icon: "cog", iconColor: fg, size: 24, style: [styles8.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+  ] });
+}
+var styles8 = StyleSheet8.create({
+  back: {
+    position: "absolute"
+  },
+  topRight: {
+    position: "absolute"
+  }
+});
+
+// src/CornerStatusBadges.tsx
+import { StyleSheet as StyleSheet9, View as View9 } from "react-native";
+import { Icon as Icon6 } from "react-native-paper";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var BADGE_SIZE = 30;
+function StatusBadge({ icon }) {
+  return /* @__PURE__ */ jsx11(View9, { style: styles9.badge, children: icon && /* @__PURE__ */ jsx11(Icon6, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
+}
+function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }) {
+  const p1OnRightSide = orientationMode === "sideBySide" && p1OnRight;
+  const p2OnLeftSide = orientationMode === "sideBySide" && !p1OnRight;
+  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    p1 && /* @__PURE__ */ jsx11(View9, { pointerEvents: "none", style: p1OnRightSide ? styles9.bottomRight : styles9.bottomLeft, children: /* @__PURE__ */ jsx11(StatusBadge, { icon: p1.icon }) }),
+    p2 && /* @__PURE__ */ jsx11(View9, { pointerEvents: "none", style: p2OnLeftSide ? styles9.topLeft : styles9.topRight, children: /* @__PURE__ */ jsx11(StatusBadge, { icon: p2.icon }) })
+  ] });
+}
+var styles9 = StyleSheet9.create({
+  badge: {
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.28)",
+    borderColor: "rgba(255,255,255,0.18)",
+    borderRadius: BADGE_SIZE / 2,
+    borderWidth: 1,
+    height: BADGE_SIZE,
+    justifyContent: "center",
+    opacity: 0.7,
+    width: BADGE_SIZE
+  },
+  bottomLeft: { bottom: 12, left: 12, position: "absolute" },
+  bottomRight: { bottom: 12, position: "absolute", right: 12 },
+  topLeft: { left: 12, position: "absolute", top: 12 },
+  topRight: { position: "absolute", right: 12, top: 12 }
+});
+
 // src/InlineColorPicker.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { defaultColors, getContrastColor } from "@rific/auto-paper";
+import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
+import { clamp, useRotation as useRotation4 } from "@tastic/core";
+import { ScrollView as ScrollView4, StyleSheet as StyleSheet10, useWindowDimensions as useWindowDimensions3, View as View10 } from "react-native";
+import { Icon as Icon7, Text as Text6 } from "react-native-paper";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
@@ -541,7 +871,9 @@ var SCREEN_MARGIN = 40;
 function widthForColumns(columns) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
 }
-function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
+function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
+  const ambientRotation = useRotation4();
+  const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = useWindowDimensions3();
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
@@ -550,21 +882,21 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
   const swatchesHeight = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * swatchRows + SWATCHES_GAP * (swatchRows - 1);
   const open = host.openId === id;
-  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight);
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation);
   const align = alignOverride ?? autoAlign;
   const displayFor = previewValue ?? ((hex) => hex);
   const displayValue = displayFor(value);
   const contrastColor = getContrastColor(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ jsxs7(View7, { style: [styles7.anchor, open && styles7.anchorOpen], children: [
-    /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles7.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx7(View7, { ref: triggerRef, collapsable: false, style: styles7.triggerMeasure, children: tag ? /* @__PURE__ */ jsx7(Text4, { style: [styles7.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx7(Icon4, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ jsx7(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx7(ScrollView3, { style: [styles7.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles7.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  return /* @__PURE__ */ jsxs10(View10, { style: [styles10.anchor, open && styles10.anchorOpen], children: [
+    /* @__PURE__ */ jsx12(TouchableRipple3, { onPress: () => host.toggle(id), borderless: true, style: [styles10.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx12(View10, { ref: triggerRef, collapsable: false, style: styles10.triggerMeasure, children: tag ? /* @__PURE__ */ jsx12(Text6, { style: [styles10.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx12(Icon7, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx12(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx12(ScrollView4, { style: [styles10.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles10.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
       const swatchDisplay = displayFor(swatch.value);
-      return /* @__PURE__ */ jsx7(
-        TouchableRipple2,
+      return /* @__PURE__ */ jsx12(
+        TouchableRipple3,
         {
           disabled: taken && !swappable,
           onPress: () => {
@@ -572,15 +904,15 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
             if (autoDismiss) host.close();
           },
           borderless: true,
-          style: [styles7.swatch, { backgroundColor: swatchDisplay }, selected && styles7.swatchSelected, taken && !swappable && styles7.swatchTaken],
-          children: selected ? /* @__PURE__ */ jsx7(Icon4, { source: "check", size: 16, color: getContrastColor(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx7(Icon4, { source: "swap-horizontal", size: 16, color: getContrastColor(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx7(Icon4, { source: "close", size: 16, color: getContrastColor(swatchDisplay) }) : /* @__PURE__ */ jsx7(View7, {})
+          style: [styles10.swatch, { backgroundColor: swatchDisplay }, selected && styles10.swatchSelected, taken && !swappable && styles10.swatchTaken],
+          children: selected ? /* @__PURE__ */ jsx12(Icon7, { source: "check", size: 16, color: getContrastColor(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx12(Icon7, { source: "swap-horizontal", size: 16, color: getContrastColor(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx12(Icon7, { source: "close", size: 16, color: getContrastColor(swatchDisplay) }) : /* @__PURE__ */ jsx12(View10, {})
         },
         swatch.value
       );
     }) }) })
   ] });
 }
-var styles7 = StyleSheet7.create({
+var styles10 = StyleSheet10.create({
   anchor: {
     position: "relative"
   },
@@ -653,10 +985,10 @@ var styles7 = StyleSheet7.create({
 
 // src/LabeledDropdown.tsx
 import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
-import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
-import { ScrollView as ScrollView4, StyleSheet as StyleSheet8, View as View8 } from "react-native";
-import { Icon as Icon5, Text as Text5 } from "react-native-paper";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
+import { ScrollView as ScrollView5, StyleSheet as StyleSheet11, View as View11 } from "react-native";
+import { Icon as Icon8, Text as Text7 } from "react-native-paper";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 180;
 var ROW_HEIGHT = 36;
@@ -679,22 +1011,22 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsxs8(View8, { style: [styles8.anchor, open && styles8.anchorOpen], children: [
-    /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => host.toggle(id), style: styles8.trigger, children: /* @__PURE__ */ jsxs8(View8, { ref: triggerRef, collapsable: false, style: styles8.triggerInner, children: [
-      /* @__PURE__ */ jsx8(Text5, { style: [styles8.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
-      /* @__PURE__ */ jsx8(Icon5, { source: "menu-down", size: 16, color })
+  return /* @__PURE__ */ jsxs11(View11, { style: [styles11.anchor, open && styles11.anchorOpen], children: [
+    /* @__PURE__ */ jsx13(TouchableRipple4, { onPress: () => host.toggle(id), style: styles11.trigger, children: /* @__PURE__ */ jsxs11(View11, { ref: triggerRef, collapsable: false, style: styles11.triggerInner, children: [
+      /* @__PURE__ */ jsx13(Text7, { style: [styles11.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
+      /* @__PURE__ */ jsx13(Icon8, { source: "menu-down", size: 16, color })
     ] }) }),
-    /* @__PURE__ */ jsx8(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx8(ScrollView4, { style: [styles8.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles8.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+    /* @__PURE__ */ jsx13(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx13(ScrollView5, { style: [styles11.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles11.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
       const onColor = getContrastColor2(color);
-      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => handleSelect(option), style: [styles8.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs8(View8, { style: styles8.rowInner, children: [
-        option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
-        /* @__PURE__ */ jsx8(Text5, { style: [styles8.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
+      return /* @__PURE__ */ jsx13(TouchableRipple4, { onPress: () => handleSelect(option), style: [styles11.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs11(View11, { style: styles11.rowInner, children: [
+        option.icon && /* @__PURE__ */ jsx13(Icon8, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        /* @__PURE__ */ jsx13(Text7, { style: [styles11.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
       ] }) }, option.value);
     }) }) })
   ] });
 }
-var styles8 = StyleSheet8.create({
+var styles11 = StyleSheet11.create({
   anchor: {
     position: "relative"
   },
@@ -752,25 +1084,25 @@ function loadSkiaWeb() {
 }
 
 // src/PressAwayOverlay.tsx
-import { Pressable, StyleSheet as StyleSheet9 } from "react-native";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { Pressable, StyleSheet as StyleSheet12 } from "react-native";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ jsx9(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet9.absoluteFill, style] });
+  return /* @__PURE__ */ jsx14(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet12.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
-import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet10 } from "react-native";
-import { Text as Text6 } from "react-native-paper";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { TouchableRipple as TouchableRipple5 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet13 } from "react-native";
+import { Text as Text8 } from "react-native-paper";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  const readyButtonStyle = [styles9.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const readyButtonStyle = [styles12.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ jsx10(TouchableRipple4, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx10(Text6, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ jsx15(TouchableRipple5, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx15(Text8, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles9 = StyleSheet10.create({
+var styles12 = StyleSheet13.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -782,228 +1114,22 @@ var styles9 = StyleSheet10.create({
   }
 });
 
-// src/SectionedDropdown.tsx
-import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
-import { IconButton as IconButton3, TouchableRipple as TouchableRipple5 } from "@rific/feedback-press";
-import { ScrollView as ScrollView5, StyleSheet as StyleSheet11, View as View9 } from "react-native";
-import { Icon as Icon6, Text as Text7 } from "react-native-paper";
-
-// src/TriggerGaugeHost.tsx
-import { lazy, Suspense } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-2OJOOF6I.mjs").then((m) => ({ default: m.TriggerGauge }))));
-function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ jsx11(Suspense, { fallback: null, children: /* @__PURE__ */ jsx11(LazyTriggerGauge, { ...props }) });
-}
-
-// src/SectionedDropdown.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var MENU_BORDER_WIDTH = 1;
-var TRIGGER_SIZE = 44;
-var MENU_MIN_WIDTH = 200;
-var MENU_MAX_WIDTH = 220;
-var MENU_ITEM_ICON_SIZE = 18;
-var MENU_ITEM_LABEL_MAX_WIDTH = 150;
-var MENU_ITEM_HEIGHT = 40;
-var MENU_ITEM_HEIGHT_WITH_DESCRIPTION = 58;
-var MENU_DIVIDER_HEIGHT = 9;
-var MENU_VERTICAL_PADDING = 12;
-function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
-  const menuBg = dark ? "#000000" : "#FFFFFF";
-  const menuBorderColor = getBlendedColor(mutedColor, menuBg, 0.5);
-  const resolvedOnAccentColor = onAccentColor ?? getColorRoles(accentColor, menuBg).onColor;
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const open = host.openId === id;
-  const estimatedHeight = MENU_VERTICAL_PADDING + sections.reduce((sum, section, sectionIndex) => {
-    const rows = section.options.reduce((rowSum, option) => rowSum + (option.description ? MENU_ITEM_HEIGHT_WITH_DESCRIPTION : MENU_ITEM_HEIGHT), 0);
-    const footer = section.kind === "multi" && section.allClear ? MENU_ITEM_HEIGHT : 0;
-    const divider = sectionIndex > 0 ? MENU_DIVIDER_HEIGHT : 0;
-    return sum + rows + footer + divider;
-  }, 0);
-  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, MENU_MAX_WIDTH, estimatedHeight);
-  const align = alignOverride ?? autoAlign;
-  const onlySection = sections.length === 1 ? sections[0] : null;
-  const selectedOption = onlySection?.kind === "single" ? onlySection.options.find((o) => o.value === onlySection.value) : void 0;
-  const triggerIcon = selectedOption?.icon ?? icon;
-  const triggerIconSize = selectedOption?.iconSize ?? 22;
-  const hasMultiSection = sections.some((s) => s.kind === "multi");
-  const anyMultiSelected = sections.some((s) => s.kind === "multi" && s.value.length > 0);
-  const triggerIconColor = hasMultiSection ? anyMultiSelected ? accentColor : fg : fg;
-  const gaugeSegments = sections.reduce((sum, section) => sum + section.options.length, 0);
-  const gaugeLitIndices = [];
-  let gaugeOffset = 0;
-  for (const section of sections) {
-    if (section.kind === "single") {
-      const index = section.options.findIndex((o) => o.value === section.value);
-      if (index >= 0) gaugeLitIndices.push(gaugeOffset + index);
-    } else {
-      section.options.forEach((o, i) => {
-        if (section.value.includes(o.value)) gaugeLitIndices.push(gaugeOffset + i);
-      });
-    }
-    gaugeOffset += section.options.length;
-  }
-  const anchorStyle = [styles10.anchor, open && styles10.anchorOpen];
-  const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
-  const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ jsxs9(View9, { style: anchorStyle, children: [
-    /* @__PURE__ */ jsxs9(View9, { ref: triggerRef, collapsable: false, style: styles10.triggerBox, children: [
-      /* @__PURE__ */ jsx12(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
-      /* @__PURE__ */ jsx12(IconButton3, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
-    ] }),
-    /* @__PURE__ */ jsx12(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx12(ScrollView5, { style: [styles10.menu, menuStyle], contentContainerStyle: styles10.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs9(View9, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ jsx12(View9, { style: [styles10.divider, dividerStyle] }),
-      section.kind === "single" ? /* @__PURE__ */ jsx12(
-        SingleSection,
-        {
-          section,
-          accentColor,
-          onAccentColor: resolvedOnAccentColor,
-          mutedColor,
-          labelFontFamily,
-          onSelect: (value) => {
-            section.onChange(value);
-            if (autoDismiss) host.close();
-          }
-        }
-      ) : /* @__PURE__ */ jsx12(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
-    ] }, section.id)) }) })
-  ] });
-}
-function SingleSection({
-  section,
-  accentColor,
-  onAccentColor,
-  mutedColor,
-  labelFontFamily,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsx12(Fragment4, { children: section.options.map((option) => {
-    const selected = option.value === section.value;
-    const taken = !selected && option.value === section.takenValue;
-    const rowColor = selected ? onAccentColor : mutedColor;
-    const itemStyle = [styles10.item, selected && { backgroundColor: accentColor }, taken && styles10.itemTaken];
-    const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
-    const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ jsx12(TouchableRipple5, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs9(View9, { style: styles10.itemRow, children: [
-      option.icon && /* @__PURE__ */ jsx12(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ jsxs9(View9, { style: styles10.itemLabelColumn, children: [
-        /* @__PURE__ */ jsx12(Text7, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ jsx12(Text7, { variant: "labelSmall", style: descriptionStyle, children: option.description })
-      ] })
-    ] }) }, option.value);
-  }) });
-}
-function MultiSection({
-  section,
-  accentColor,
-  onAccentColor,
-  mutedColor,
-  labelFontFamily,
-  allClearLabels
-}) {
-  const allSelected = section.value.length === section.options.length;
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    section.options.map((option, i) => {
-      const selected = section.value.includes(option.value);
-      const rowColor = selected ? onAccentColor : mutedColor;
-      const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
-      const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
-      const itemStyle = [styles10.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
-      const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
-      return /* @__PURE__ */ jsx12(TouchableRipple5, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs9(View9, { style: styles10.itemRow, children: [
-        option.icon && /* @__PURE__ */ jsx12(Icon6, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ jsx12(Text7, { variant: "labelLarge", style: [styles10.itemLabelFlex, labelStyle], children: option.label })
-      ] }) }, option.value);
-    }),
-    section.allClear && /* @__PURE__ */ jsx12(TouchableRipple5, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles10.item, children: /* @__PURE__ */ jsx12(Text7, { variant: "labelLarge", style: [styles10.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
-  ] });
-}
-var styles10 = StyleSheet11.create({
-  allClearLabel: {
-    fontWeight: "bold",
-    textAlign: "center"
-  },
-  anchor: {
-    position: "relative"
-  },
-  // React Native Web gives every position:'relative' view an explicit zIndex (0, not 'auto'),
-  // which makes each one its own stacking context — so a zIndex set only on the popover content
-  // below only wins comparisons within this anchor's own box, not against this anchor's own later
-  // siblings (e.g. a Ready button), which are otherwise painted on top by DOM-order tiebreak.
-  // Elevating the anchor itself, only while its popover is open, fixes that at the right level.
-  anchorOpen: {
-    zIndex: 100
-  },
-  divider: {
-    height: StyleSheet11.hairlineWidth,
-    marginVertical: 4
-  },
-  item: {
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 8
-  },
-  itemLabelColumn: {
-    maxWidth: MENU_ITEM_LABEL_MAX_WIDTH
-  },
-  itemLabelFlex: {
-    flex: 1
-  },
-  itemRow: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 8
-  },
-  // Same opacity as ProfilePicker's rowDisabled / InlineColorPicker's swatchTaken — the fleet's
-  // established "shown, not removed" treatment for another seat's own current pick.
-  itemTaken: {
-    opacity: 0.35
-  },
-  menu: {
-    borderRadius: 12,
-    borderWidth: MENU_BORDER_WIDTH,
-    elevation: 8,
-    maxWidth: MENU_MAX_WIDTH,
-    minWidth: MENU_MIN_WIDTH,
-    shadowColor: "#000000",
-    shadowOffset: { height: 2, width: 0 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8
-  },
-  // Separate from `menu` itself — a ScrollView's own style sets the scrolling frame's bounds
-  // (including the maxHeight that actually caps it), while padding/gap belong to its
-  // contentContainerStyle, which sizes to the *unclamped* content instead of the frame.
-  menuContent: {
-    gap: 4,
-    padding: 6
-  },
-  // Fixed hit-area regardless of the current option's iconSize, so a small-vs-large trigger icon
-  // doesn't shift this picker's position within its row.
-  triggerBox: {
-    alignItems: "center",
-    height: TRIGGER_SIZE,
-    justifyContent: "center",
-    width: TRIGGER_SIZE
-  }
-});
-
 // src/SharedActionBand.tsx
 import { IconButton as IconButton4 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet12, View as View10 } from "react-native";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet14, View as View12 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ jsxs10(View10, { style: [styles11.column, popoverOpen && styles11.columnOpen], children: [
-    /* @__PURE__ */ jsxs10(View10, { style: styles11.actionsRow, children: [
-      /* @__PURE__ */ jsx13(IconButton4, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
-      onRandomize && /* @__PURE__ */ jsx13(IconButton4, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
-      onReset && /* @__PURE__ */ jsx13(IconButton4, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
-      /* @__PURE__ */ jsx13(IconButton4, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ jsxs12(View12, { style: [styles13.column, popoverOpen && styles13.columnOpen], children: [
+    /* @__PURE__ */ jsxs12(View12, { style: styles13.actionsRow, children: [
+      /* @__PURE__ */ jsx16(IconButton4, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
+      onRandomize && /* @__PURE__ */ jsx16(IconButton4, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
+      onReset && /* @__PURE__ */ jsx16(IconButton4, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
+      /* @__PURE__ */ jsx16(IconButton4, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
     ] }),
     children
   ] });
 }
-var styles11 = StyleSheet12.create({
+var styles13 = StyleSheet14.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1019,20 +1145,20 @@ var styles11 = StyleSheet12.create({
 });
 
 // src/StatRow.tsx
-import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
-import { StyleSheet as StyleSheet13, View as View11 } from "react-native";
-import { Text as Text8 } from "react-native-paper";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet15, View as View13 } from "react-native";
+import { Text as Text9 } from "react-native-paper";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
-  const { dark } = useAutoPaperTheme4();
+  const { dark } = useAutoPaperTheme5();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  return /* @__PURE__ */ jsxs11(View11, { style: styles12.row, children: [
-    /* @__PURE__ */ jsx14(Text8, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
-    /* @__PURE__ */ jsx14(Text8, { variant: "bodyMedium", style: [styles12.value, { color: fg }], children: value })
+  return /* @__PURE__ */ jsxs13(View13, { style: styles14.row, children: [
+    /* @__PURE__ */ jsx17(Text9, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
+    /* @__PURE__ */ jsx17(Text9, { variant: "bodyMedium", style: [styles14.value, { color: fg }], children: value })
   ] });
 }
-var styles12 = StyleSheet13.create({
+var styles14 = StyleSheet15.create({
   row: {
     alignItems: "center",
     flexDirection: "row",
@@ -1044,20 +1170,20 @@ var styles12 = StyleSheet13.create({
 });
 
 // src/StatSection.tsx
-import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
-import { StyleSheet as StyleSheet14, View as View12 } from "react-native";
-import { Text as Text9 } from "react-native-paper";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useAutoPaperTheme as useAutoPaperTheme6 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet16, View as View14 } from "react-native";
+import { Text as Text10 } from "react-native-paper";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
-  const { dark } = useAutoPaperTheme5();
+  const { dark } = useAutoPaperTheme6();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
-  return /* @__PURE__ */ jsxs12(View12, { style: [styles13.section, { backgroundColor: sectionBg }], children: [
-    /* @__PURE__ */ jsx15(Text9, { variant: "labelMedium", style: [styles13.label, { color: fg }], children: label }),
+  return /* @__PURE__ */ jsxs14(View14, { style: [styles15.section, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ jsx18(Text10, { variant: "labelMedium", style: [styles15.label, { color: fg }], children: label }),
     children
   ] });
 }
-var styles13 = StyleSheet14.create({
+var styles15 = StyleSheet16.create({
   // Bold and full-contrast (fg), not the original fontless/fgMuted treatment — that read at the
   // same visual weight as StatRow's own row labels below it (both used the identical muted color;
   // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
@@ -1087,8 +1213,11 @@ export {
   AchievementRow,
   BaseSettingsDialog,
   BaseStatsScreen,
+  ConfirmDialog,
   ContentGutter,
+  ControlSchemePicker,
   CornerActionButtons,
+  CornerStatusBadges,
   InlineColorPicker,
   LABELED_DROPDOWN_POPOVER_WIDTH,
   LOCKED_BADGE_COLOR,
@@ -1099,6 +1228,7 @@ export {
   ReadyButton,
   SectionedDropdown,
   SharedActionBand,
+  SkiaGate,
   StatRow,
   StatSection,
   TriggerGaugeHost,