@tastic/hud 0.21.0 → 0.23.0

package/dist/index.mjs

@@ -10,16 +10,24 @@ import {
   ConfirmDialog,
   ContentGutter,
   CornerActionButtons,
+  InlineColorPicker,
   LOCKED_BADGE_COLOR,
   MONO_FONT,
+  PopoverBody,
+  PressAwayOverlay,
   RotatedFrame,
   StaggeredWord,
   StatRow,
   StatSection,
   UpdateDialog,
+  WELL_SHADOW,
+  getInlineColorPickerContentSize,
   getStaggeredWordDuration,
-  useCompactDialog
-} from "./chunk-UOA35OWJ.mjs";
+  useAutoAlign,
+  useCompactDialog,
+  usePopoverHost,
+  useWellColors
+} from "./chunk-BXG44LIA.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,
@@ -83,132 +91,18 @@ import { Platform } from "react-native";
 import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
 import { IconButton, TouchableRipple } from "@rific/feedback-press";
 import { useRotation } from "@tastic/core";
-import { ScrollView, StyleSheet as StyleSheet3, View as View4 } from "react-native";
+import { ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { Icon as Icon2, Text as Text2 } from "react-native-paper";
 
-// src/PopoverBody.tsx
-import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var CARET_SIZE = 7;
-var CARET_RING_OFFSET = 2;
-var CARET_DIP = 1;
-function PopoverBody({ visible, children, align = "center", verticalAlign = "below", caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }) {
-  if (!visible) return null;
-  const above = verticalAlign === "above";
-  const alignStyle = align === "left" ? styles2.contentLeft : align === "right" ? styles2.contentRight : styles2.contentCenter;
-  const verticalStyle = above ? styles2.contentAbove : styles2.contentBelow;
-  const ringSize = CARET_SIZE + caretBorderWidth;
-  const caretOffset = (halfFootprint) => align === "right" ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint };
-  const caretFill = above ? "borderTopColor" : "borderBottomColor";
-  const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
-  const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
-  return /* @__PURE__ */ jsxs2(View2, { style: [styles2.content, alignStyle, verticalStyle], children: [
-    children,
-    caretColor && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(View2, { style: [styles2.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ jsx2(View2, { style: [styles2.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
-    ] })
-  ] });
-}
-var styles2 = StyleSheet2.create({
-  caret: {
-    borderLeftColor: "transparent",
-    borderRightColor: "transparent",
-    height: 0,
-    position: "absolute",
-    width: 0,
-    // Explicit, not left to DOM order - the box it dips into is itself a position:'relative' view,
-    // which React Native Web always gives an implicit zIndex:0 (see PopoverBody's stacking-context
-    // notes elsewhere in this codebase), so painting on top needs a real zIndex to beat that
-    // reliably rather than relying on being the later sibling.
-    zIndex: 1
-  },
-  content: {
-    position: "absolute",
-    zIndex: 50
-  },
-  contentAbove: {
-    bottom: "100%",
-    marginBottom: 8
-  },
-  contentBelow: {
-    marginTop: 8,
-    top: "100%"
-  },
-  // Stretched to the anchor's own (trigger) width, with alignItems centering the actual (usually
-  // much wider) popover box inside via plain flexbox - not `left:'50%'` plus a percentage
-  // `transform`, which depends on native resolving the box's own auto width before applying the
-  // transform and has proven unreliable there, visibly shifting the box off-center.
-  contentCenter: {
-    alignItems: "center",
-    left: 0,
-    right: 0
-  },
-  contentLeft: {
-    left: 0
-  },
-  contentRight: {
-    right: 0
-  }
-});
-
 // src/TriggerGaugeHost.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var getTriggerGauge = () => import("./TriggerGauge-GIHKGAZE.mjs").then((mod) => ({ default: mod.TriggerGauge }));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ jsx3(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
-}
-
-// src/useAutoAlign.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useWindowDimensions } from "react-native";
-var EDGE_MARGIN = 12;
-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 } = useWindowDimensions();
-  const [align, setAlign] = useState("center");
-  const [verticalAlign, setVerticalAlign] = useState("below");
-  const [maxHeight, setMaxHeight] = useState(contentHeight);
-  const [measured, setMeasured] = useState(false);
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (open) setMeasured(false);
-  }
-  const measure = 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;
-      const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN;
-      const overflowsLeft = centerX - contentWidth / 2 < EDGE_MARGIN;
-      if (overflowsRight && !overflowsLeft) setAlign("right");
-      else if (overflowsLeft && !overflowsRight) setAlign("left");
-      else setAlign("center");
-      const roomBelow = windowHeight - (y + triggerHeight) - EDGE_MARGIN;
-      const roomAbove = y - EDGE_MARGIN;
-      const above = contentHeight > roomBelow && roomAbove > roomBelow;
-      setVerticalAlign(above ? "above" : "below");
-      setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
-      setMeasured(true);
-    });
-  }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
-  useEffect(() => {
-    if (open) measure();
-  }, [open, measure]);
-  return { align, maxHeight, measured, triggerRef, verticalAlign };
+  return /* @__PURE__ */ jsx2(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
 }
 
 // src/SectionedDropdown.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MENU_BORDER_WIDTH = 1;
 var TRIGGER_SIZE = 44;
 var MENU_MIN_WIDTH = 200;
@@ -258,17 +152,17 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  const anchorStyle = [styles3.anchor, open && styles3.anchorOpen];
+  const anchorStyle = [styles2.anchor, open && styles2.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ jsxs3(View4, { style: anchorStyle, children: [
-    /* @__PURE__ */ jsxs3(View4, { ref: triggerRef, collapsable: false, style: styles3.triggerBox, children: [
-      /* @__PURE__ */ jsx4(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
-      /* @__PURE__ */ jsx4(IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+  return /* @__PURE__ */ jsxs2(View2, { style: anchorStyle, children: [
+    /* @__PURE__ */ jsxs2(View2, { ref: triggerRef, collapsable: false, style: styles2.triggerBox, children: [
+      /* @__PURE__ */ jsx3(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ jsx3(IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx4(ScrollView, { style: [styles3.menu, menuStyle], contentContainerStyle: styles3.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs3(View4, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ jsx4(View4, { style: [styles3.divider, dividerStyle] }),
-      section.kind === "single" ? /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx3(ScrollView, { style: [styles2.menu, menuStyle], contentContainerStyle: styles2.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs2(View2, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx3(View2, { style: [styles2.divider, dividerStyle] }),
+      section.kind === "single" ? /* @__PURE__ */ jsx3(
         SingleSection,
         {
           section,
@@ -281,7 +175,7 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
             if (autoDismiss) host.close();
           }
         }
-      ) : /* @__PURE__ */ jsx4(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+      ) : /* @__PURE__ */ jsx3(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
     ] }, section.id)) }) })
   ] });
 }
@@ -293,18 +187,18 @@ function SingleSection({
   labelFontFamily,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx4(Fragment2, { children: section.options.map((option) => {
+  return /* @__PURE__ */ jsx3(Fragment, { 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 = [styles3.item, selected && { backgroundColor: accentColor }, taken && styles3.itemTaken];
+    const itemStyle = [styles2.item, selected && { backgroundColor: accentColor }, taken && styles2.itemTaken];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ jsx4(TouchableRipple, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles3.itemRow, children: [
-      option.icon && /* @__PURE__ */ jsx4(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ jsxs3(View4, { style: styles3.itemLabelColumn, children: [
-        /* @__PURE__ */ jsx4(Text2, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ jsx4(Text2, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+    return /* @__PURE__ */ jsx3(TouchableRipple, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs2(View2, { style: styles2.itemRow, children: [
+      option.icon && /* @__PURE__ */ jsx3(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ jsxs2(View2, { style: styles2.itemLabelColumn, children: [
+        /* @__PURE__ */ jsx3(Text2, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx3(Text2, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -318,23 +212,23 @@ function MultiSection({
   allClearLabels
 }) {
   const allSelected = section.value.length === section.options.length;
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { 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 = [styles3.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const itemStyle = [styles2.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__ */ jsx4(TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles3.itemRow, children: [
-        option.icon && /* @__PURE__ */ jsx4(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ jsx4(Text2, { variant: "labelLarge", style: [styles3.itemLabelFlex, labelStyle], children: option.label })
+      return /* @__PURE__ */ jsx3(TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs2(View2, { style: styles2.itemRow, children: [
+        option.icon && /* @__PURE__ */ jsx3(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ jsx3(Text2, { variant: "labelLarge", style: [styles2.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
-    section.allClear && /* @__PURE__ */ jsx4(TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles3.item, children: /* @__PURE__ */ jsx4(Text2, { variant: "labelLarge", style: [styles3.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+    section.allClear && /* @__PURE__ */ jsx3(TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles2.item, children: /* @__PURE__ */ jsx3(Text2, { variant: "labelLarge", style: [styles2.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles3 = StyleSheet3.create({
+var styles2 = StyleSheet2.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -351,7 +245,7 @@ var styles3 = StyleSheet3.create({
     zIndex: 100
   },
   divider: {
-    height: StyleSheet3.hairlineWidth,
+    height: StyleSheet2.hairlineWidth,
     marginVertical: 4
   },
   item: {
@@ -404,30 +298,30 @@ var styles3 = StyleSheet3.create({
 });
 
 // src/ControlSchemePicker.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function ControlSchemePicker({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily }) {
   const isTouchPrimary = useIsTouchPrimaryDevice();
   if (Platform.OS !== "web" || isTouchPrimary) return null;
-  return /* @__PURE__ */ jsx5(SectionedDropdown, { id, host, icon: "keyboard-outline", accessibilityLabel: "Control scheme", sections: [{ kind: "single", id: "controls", options, value, onChange, takenValue }], accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily });
+  return /* @__PURE__ */ jsx4(SectionedDropdown, { id, host, icon: "keyboard-outline", accessibilityLabel: "Control scheme", sections: [{ kind: "single", id: "controls", options, value, onChange, takenValue }], accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily });
 }
 
 // src/CornerStatusBadges.tsx
-import { StyleSheet as StyleSheet4, View as View5 } from "react-native";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Icon as Icon3 } from "react-native-paper";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var BADGE_SIZE = 30;
 function StatusBadge({ icon }) {
-  return /* @__PURE__ */ jsx6(View5, { style: styles4.badge, children: icon && /* @__PURE__ */ jsx6(Icon3, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
+  return /* @__PURE__ */ jsx5(View3, { style: styles3.badge, children: icon && /* @__PURE__ */ jsx5(Icon3, { 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__ */ jsxs4(Fragment3, { children: [
-    p1 && /* @__PURE__ */ jsx6(View5, { pointerEvents: "none", style: p1OnRightSide ? styles4.bottomRight : styles4.bottomLeft, children: /* @__PURE__ */ jsx6(StatusBadge, { icon: p1.icon }) }),
-    p2 && /* @__PURE__ */ jsx6(View5, { pointerEvents: "none", style: p2OnLeftSide ? styles4.topLeft : styles4.topRight, children: /* @__PURE__ */ jsx6(StatusBadge, { icon: p2.icon }) })
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    p1 && /* @__PURE__ */ jsx5(View3, { pointerEvents: "none", style: p1OnRightSide ? styles3.bottomRight : styles3.bottomLeft, children: /* @__PURE__ */ jsx5(StatusBadge, { icon: p1.icon }) }),
+    p2 && /* @__PURE__ */ jsx5(View3, { pointerEvents: "none", style: p2OnLeftSide ? styles3.topLeft : styles3.topRight, children: /* @__PURE__ */ jsx5(StatusBadge, { icon: p2.icon }) })
   ] });
 }
-var styles4 = StyleSheet4.create({
+var styles3 = StyleSheet3.create({
   badge: {
     alignItems: "center",
     backgroundColor: "rgba(0,0,0,0.28)",
@@ -445,149 +339,12 @@ var styles4 = StyleSheet4.create({
   topRight: { position: "absolute", right: 12, top: 12 }
 });
 
-// src/InlineColorPicker.tsx
-import { defaultColors, getContrastColor as getContrastColor2 } from "@rific/auto-paper";
+// src/LabeledDropdown.tsx
+import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
-import { clamp, useRotation as useRotation2 } from "@tastic/core";
-import { ScrollView as ScrollView2, StyleSheet as StyleSheet5, useWindowDimensions as useWindowDimensions2, View as View6 } from "react-native";
+import { ScrollView as ScrollView2, StyleSheet as StyleSheet4, View as View4 } from "react-native";
 import { Icon as Icon4, Text as Text3 } from "react-native-paper";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
-var DEFAULT_SIZE = 48;
-var SWATCH_SIZE = 28;
-var SWATCHES_PADDING = 8;
-var SWATCHES_GAP = 6;
-var SWATCHES_BORDER_WIDTH = 2;
-var MIN_COLUMNS = 4;
-var MAX_COLUMNS = 5;
-var SCREEN_MARGIN = 40;
-function widthForColumns(columns) {
-  return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
-}
-function getInlineColorPickerContentSize(swatchCount, windowWidth, columns) {
-  const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
-  const resolvedColumns = columns ?? autoColumns;
-  const width = widthForColumns(resolvedColumns);
-  const rows = Math.ceil(swatchCount / resolvedColumns);
-  const height = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * rows + SWATCHES_GAP * (rows - 1);
-  return { width, height };
-}
-function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
-  const ambientRotation = useRotation2();
-  const rotation = rotationOverride ?? ambientRotation;
-  const menuBg = dark ? "#000000" : "#FFFFFF";
-  const { width: windowWidth } = useWindowDimensions2();
-  const { width: swatchesWidth, height: swatchesHeight } = getInlineColorPickerContentSize(swatches.length, windowWidth, columns);
-  const open = host.openId === id;
-  const auto = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation);
-  const placement = alignOverride ?? auto;
-  const { maxHeight, measured, triggerRef, verticalAlign } = placement;
-  const align = forcedAlign ?? placement.align;
-  const displayFor = previewValue ?? ((hex) => hex);
-  const displayValue = displayFor(value);
-  const contrastColor = getContrastColor2(displayValue);
-  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ jsxs5(View6, { style: [styles5.anchor, open && styles5.anchorOpen], children: [
-    /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles5.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx7(View6, { ref: triggerRef, collapsable: false, style: styles5.triggerMeasure, children: tag ? /* @__PURE__ */ jsx7(Text3, { style: [styles5.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(ScrollView2, { style: [styles5.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles5.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,
-        {
-          disabled: taken && !swappable,
-          onPress: () => {
-            onChange(swatch.value);
-            if (autoDismiss) host.close();
-          },
-          borderless: true,
-          style: [styles5.swatch, { backgroundColor: swatchDisplay }, selected && styles5.swatchSelected, taken && !swappable && styles5.swatchTaken],
-          children: selected ? /* @__PURE__ */ jsx7(Icon4, { source: "check", size: 16, color: getContrastColor2(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx7(Icon4, { source: "swap-horizontal", size: 16, color: getContrastColor2(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx7(Icon4, { source: "close", size: 16, color: getContrastColor2(swatchDisplay) }) : /* @__PURE__ */ jsx7(View6, {})
-        },
-        swatch.value
-      );
-    }) }) })
-  ] });
-}
-var styles5 = StyleSheet5.create({
-  anchor: {
-    position: "relative"
-  },
-  // See SectionedDropdown's identical comment - React Native Web gives every position:'relative' view
-  // its own stacking context, so the elevation has to live on the anchor itself, not just the
-  // popover content nested inside it, to correctly paint above this anchor's own later siblings.
-  anchorOpen: {
-    zIndex: 100
-  },
-  swatch: {
-    alignItems: "center",
-    borderRadius: SWATCH_SIZE / 2,
-    height: SWATCH_SIZE,
-    justifyContent: "center",
-    width: SWATCH_SIZE
-  },
-  swatchSelected: {
-    borderColor: "#ffffff",
-    borderWidth: 2
-  },
-  swatchTaken: {
-    opacity: 0.35
-  },
-  swatches: {
-    borderRadius: 12,
-    borderWidth: SWATCHES_BORDER_WIDTH,
-    elevation: 8,
-    shadowColor: "#000000",
-    shadowOffset: { height: 2, width: 0 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8
-    // width is set inline above - border-box sizing means it has to include the border too
-    // (2*SWATCHES_BORDER_WIDTH), not just padding+content, or exactly enough room goes missing that
-    // the last column silently wraps to a new row. Anything wider than the exact sum just shows as
-    // dead space on the right edge of each row instead.
-  },
-  // Separate from `swatches` itself - see SectionedDropdown's identical menu/menuContent split.
-  // The scroll frame's own bounds (including maxHeight) live on the ScrollView; the actual grid
-  // wrapping belongs to its contentContainerStyle, which sizes to the unclamped content instead.
-  swatchesContent: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: SWATCHES_GAP,
-    padding: SWATCHES_PADDING
-  },
-  tagLabel: {
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  // borderRadius/height/width come from the `size` prop instead (see render-site override) - no
-  // fixed default here, since this style object is shared by every caller regardless of size.
-  trigger: {
-    alignItems: "center",
-    alignSelf: "flex-start",
-    justifyContent: "center"
-  },
-  // Wraps just the icon/tag, inside the TouchableRipple, purely so useAutoAlign has a plain View
-  // to attach its measurement ref to - TouchableRipple itself doesn't forward a ref to a
-  // measurable native node. Padded horizontally so a multi-character tag doesn't butt right up
-  // against the trigger's own circular edge (an icon alone doesn't need it, but this style is
-  // shared by both).
-  triggerMeasure: {
-    alignItems: "center",
-    height: "100%",
-    justifyContent: "center",
-    paddingHorizontal: 4,
-    width: "100%"
-  }
-});
-
-// src/LabeledDropdown.tsx
-import { getContrastColor as getContrastColor3 } from "@rific/auto-paper";
-import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
-import { ScrollView as ScrollView3, StyleSheet as StyleSheet6, View as View7 } from "react-native";
-import { Icon as Icon5, Text as Text4 } from "react-native-paper";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 180;
 var ROW_HEIGHT = 36;
@@ -610,22 +367,22 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsxs6(View7, { style: [styles6.anchor, open && styles6.anchorOpen], children: [
-    /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => host.toggle(id), style: styles6.trigger, children: /* @__PURE__ */ jsxs6(View7, { ref: triggerRef, collapsable: false, style: styles6.triggerInner, children: [
-      /* @__PURE__ */ jsx8(Text4, { style: [styles6.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
-      /* @__PURE__ */ jsx8(Icon5, { source: "menu-down", size: 16, color })
+  return /* @__PURE__ */ jsxs4(View4, { style: [styles4.anchor, open && styles4.anchorOpen], children: [
+    /* @__PURE__ */ jsx6(TouchableRipple2, { onPress: () => host.toggle(id), style: styles4.trigger, children: /* @__PURE__ */ jsxs4(View4, { ref: triggerRef, collapsable: false, style: styles4.triggerInner, children: [
+      /* @__PURE__ */ jsx6(Text3, { style: [styles4.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
+      /* @__PURE__ */ jsx6(Icon4, { 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(ScrollView3, { style: [styles6.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles6.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+    /* @__PURE__ */ jsx6(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx6(ScrollView2, { style: [styles4.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles4.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
-      const onColor = getContrastColor3(color);
-      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => handleSelect(option), style: [styles6.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs6(View7, { style: styles6.rowInner, children: [
-        option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
-        /* @__PURE__ */ jsx8(Text4, { style: [styles6.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
+      const onColor = getContrastColor2(color);
+      return /* @__PURE__ */ jsx6(TouchableRipple2, { onPress: () => handleSelect(option), style: [styles4.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs4(View4, { style: styles4.rowInner, children: [
+        option.icon && /* @__PURE__ */ jsx6(Icon4, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        /* @__PURE__ */ jsx6(Text3, { style: [styles4.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
       ] }) }, option.value);
     }) }) })
   ] });
 }
-var styles6 = StyleSheet6.create({
+var styles4 = StyleSheet4.create({
   anchor: {
     position: "relative"
   },
@@ -684,21 +441,21 @@ function loadSkiaWeb() {
 
 // src/PlayerSetupPanel.tsx
 import { getOptionPickerContentSize, getProfilePickerContentSize, OptionPicker, ProfilePicker } from "@tastic/profile";
-import { StyleSheet as StyleSheet8, View as View8 } from "react-native";
-import { Text as Text6 } from "react-native-paper";
+import { StyleSheet as StyleSheet6, View as View5 } from "react-native";
+import { Text as Text5 } from "react-native-paper";
 
 // src/ReadyButton.tsx
-import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet7 } from "react-native";
-import { Text as Text5 } from "react-native-paper";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet5 } from "react-native";
+import { Text as Text4 } from "react-native-paper";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  const readyButtonStyle = [styles7.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const readyButtonStyle = [styles5.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ jsx9(TouchableRipple4, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx9(Text5, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ jsx7(TouchableRipple3, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx7(Text4, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles7 = StyleSheet7.create({
+var styles5 = StyleSheet5.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -710,41 +467,30 @@ var styles7 = StyleSheet7.create({
   }
 });
 
-// src/usePopoverHost.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
-function usePopoverHost() {
-  const [openId, setOpenId] = useState2(null);
-  const toggle = useCallback2((id) => {
-    setOpenId((prev) => prev === id ? null : id);
-  }, []);
-  const close = useCallback2(() => setOpenId(null), []);
-  return { openId, toggle, close };
-}
-
 // src/useZoneClampedAlign.ts
 import { useZoneBounds } from "@tastic/split-screen";
-import { useEffect as useEffect2, useState as useState3 } from "react";
-import { useWindowDimensions as useWindowDimensions3 } from "react-native";
+import { useEffect, useState } from "react";
+import { useWindowDimensions } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-var EDGE_MARGIN2 = 12;
+var EDGE_MARGIN = 12;
 function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
   const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
   const zone = useZoneBounds();
-  const { height: windowHeight } = useWindowDimensions3();
+  const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = useState3(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = useState3(shouldMeasure);
+  const [ownBounds, setOwnBounds] = useState(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = useState(shouldMeasure);
   if (shouldMeasure !== prevShouldMeasure) {
     setPrevShouldMeasure(shouldMeasure);
     setOwnBounds(null);
   }
-  useEffect2(() => {
+  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 awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN : y - insets.top - EDGE_MARGIN;
+      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN : zone.sharedEdgeY - (y + height) - EDGE_MARGIN;
       const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
       let awaySide = belowShared ? "below" : "above";
       let towardSide = belowShared ? "above" : "below";
@@ -761,7 +507,7 @@ function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
 }
 
 // src/PlayerSetupPanel.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
@@ -784,16 +530,16 @@ function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onCol
   const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix);
   const seatPickerSize = showProfilePicker ? getProfilePickerContentSize(profiles.length, !!onManageProfiles, colorSection) : getOptionPickerContentSize(cpuDifficultyOptions?.length ?? 0, colorSection);
   const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height);
-  return /* @__PURE__ */ jsxs7(View8, { style: [styles8.panel, ownPopoverOpen && styles8.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ jsx10(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__ */ jsx10(OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ jsx10(Text6, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    (!seatButton || secondPicker) && /* @__PURE__ */ jsxs7(View8, { style: [styles8.pickerRow, pickerRowPopoverOpen && styles8.pickerRowOpen], children: [
-      !seatButton && /* @__PURE__ */ jsx10(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 }),
+  return /* @__PURE__ */ jsxs5(View5, { style: [styles6.panel, ownPopoverOpen && styles6.panelOpen], children: [
+    showProfilePicker ? /* @__PURE__ */ jsx8(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__ */ jsx8(OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ jsx8(Text5, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    (!seatButton || secondPicker) && /* @__PURE__ */ jsxs5(View5, { style: [styles6.pickerRow, pickerRowPopoverOpen && styles6.pickerRowOpen], children: [
+      !seatButton && /* @__PURE__ */ jsx8(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__ */ jsx10(ReadyButton, { color, ready: ready ?? false, onToggleReady })
+    isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ jsx8(ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
-var styles8 = StyleSheet8.create({
+var styles6 = StyleSheet6.create({
   panel: {
     alignItems: "center",
     gap: 12
@@ -824,30 +570,22 @@ var styles8 = StyleSheet8.create({
   }
 });
 
-// src/PressAwayOverlay.tsx
-import { Pressable, StyleSheet as StyleSheet9 } from "react-native";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function PressAwayOverlay({ active, onPress, style }) {
-  if (!active) return null;
-  return /* @__PURE__ */ jsx11(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet9.absoluteFill, style] });
-}
-
 // src/SharedActionBand.tsx
 import { IconButton as IconButton2 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet10, View as View9 } from "react-native";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet7, View as View6 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ jsxs8(View9, { style: [styles9.column, popoverOpen && styles9.columnOpen], children: [
-    /* @__PURE__ */ jsxs8(View9, { style: styles9.actionsRow, children: [
-      /* @__PURE__ */ jsx12(IconButton2, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
-      onRandomize && /* @__PURE__ */ jsx12(IconButton2, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
-      onReset && /* @__PURE__ */ jsx12(IconButton2, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
-      /* @__PURE__ */ jsx12(IconButton2, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ jsxs6(View6, { style: [styles7.column, popoverOpen && styles7.columnOpen], children: [
+    /* @__PURE__ */ jsxs6(View6, { style: styles7.actionsRow, children: [
+      /* @__PURE__ */ jsx9(IconButton2, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
+      onRandomize && /* @__PURE__ */ jsx9(IconButton2, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
+      onReset && /* @__PURE__ */ jsx9(IconButton2, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
+      /* @__PURE__ */ jsx9(IconButton2, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
     ] }),
     children
   ] });
 }
-var styles9 = StyleSheet10.create({
+var styles7 = StyleSheet7.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -863,22 +601,22 @@ var styles9 = StyleSheet10.create({
 });
 
 // src/useQuitConfirmation.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = useState4(false);
-  const hasProgressRef = useRef2(hasProgress);
-  useEffect3(() => {
+  const [confirmVisible, setConfirmVisible] = useState2(false);
+  const hasProgressRef = useRef(hasProgress);
+  useEffect2(() => {
     hasProgressRef.current = hasProgress;
   });
-  const onConfirmedBackRef = useRef2(onConfirmedBack);
-  useEffect3(() => {
+  const onConfirmedBackRef = useRef(onConfirmedBack);
+  useEffect2(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
-  const requestBack = useCallback3(() => {
+  const requestBack = useCallback(() => {
     if (hasProgressRef.current()) setConfirmVisible(true);
     else onConfirmedBackRef.current();
   }, []);
-  const cancelBack = useCallback3(() => setConfirmVisible(false), []);
+  const cancelBack = useCallback(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
 export {
@@ -915,6 +653,7 @@ export {
   StatSection,
   TriggerGaugeHost,
   UpdateDialog,
+  WELL_SHADOW,
   getColorPopoverId,
   getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize,
@@ -930,5 +669,6 @@ export {
   useOverlayCardColors,
   usePopoverHost,
   useQuitConfirmation,
+  useWellColors,
   useZoneClampedAlign
 };