@tastic/hud 0.22.0 → 0.23.0

package/dist/{chunk-N7A7W72S.mjs → chunk-BXG44LIA.mjs}

@@ -281,6 +281,7 @@ var styles6 = StyleSheet6.create({
 
 // src/BaseSettingsDialog.tsx
 import { AutoAppearancePicker, Dialog, FadingScrollView, useAutoPaperTheme as useAutoPaperTheme4, useBlurModule, useThemeSettings } from "@rific/auto-paper";
+import { useExpoKeepAwake, useKeepAwakeSettings } from "@rific/core";
 import { Button as Button2, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from "@rific/feedback-press";
 import { useUpdater } from "@rific/updater";
 import { rotateInsets as rotateInsets2, useIsTouchPrimaryDevice, useRotation as useRotation2 } from "@tastic/core";
@@ -314,7 +315,7 @@ import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ jsx8(View6, { style: [styles7.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx8(Icon2, { source, size: 18, color }) });
 }
-function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
   const { colors } = useAutoPaperTheme4();
   const ambientRotation = useRotation2();
   const rotation = rotationOverride ?? ambientRotation;
@@ -326,6 +327,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const isTouchPrimary = useIsTouchPrimaryDevice();
   const { settings: hapticSettings, set: setHapticSettings } = useHapticSettings();
   const { settings: soundSettings, set: setSoundSettings } = useSoundSettings();
+  const { settings: keepAwakeSettings, set: setKeepAwakeSettings } = useKeepAwakeSettings();
+  const expoKeepAwake = useExpoKeepAwake();
   const sound = useContext(SoundContext);
   const { forceShort: forceHapticFeedback } = useVibration();
   const { settings: themeSettings, set: setThemeSettings } = useThemeSettings();
@@ -344,7 +347,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = Platform2.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
-  const showKeepAwake = isTouchPrimary && keepAwake !== void 0 && onKeepAwakeChange !== void 0;
+  const showKeepAwake = isTouchPrimary && expoKeepAwake !== void 0;
   const showHaptics = Platform2.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
@@ -371,8 +374,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
               ] })
             ] }) }),
-            showKeepAwake && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => onKeepAwakeChange(!keepAwake), style: styles7.toggleButton, accessibilityLabel: `Keep awake ${keepAwake ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
-              /* @__PURE__ */ jsx8(SettingIcon, { source: keepAwake ? "eye" : "eye-closed", color: keepAwake ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwake ? colors.tertiaryContainer : colors.surfaceVariant }),
+            showKeepAwake && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => setKeepAwakeSettings({ enabled: !keepAwakeSettings.enabled }), style: styles7.toggleButton, accessibilityLabel: `Keep awake ${keepAwakeSettings.enabled ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
+              /* @__PURE__ */ jsx8(SettingIcon, { source: keepAwakeSettings.enabled ? "eye" : "eye-closed", color: keepAwakeSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwakeSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
               /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
                 /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
                 /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
@@ -644,17 +647,131 @@ var styles9 = StyleSheet9.create({
   }
 });
 
+// src/PopoverBody.tsx
+import { StyleSheet as StyleSheet10, View as View9 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } 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" ? styles10.contentLeft : align === "right" ? styles10.contentRight : styles10.contentCenter;
+  const verticalStyle = above ? styles10.contentAbove : styles10.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__ */ jsxs10(View9, { style: [styles10.content, alignStyle, verticalStyle], children: [
+    children,
+    caretColor && /* @__PURE__ */ jsxs10(Fragment2, { children: [
+      /* @__PURE__ */ jsx11(View9, { style: [styles10.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ jsx11(View9, { style: [styles10.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    ] })
+  ] });
+}
+var styles10 = StyleSheet10.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/useAutoAlign.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState5 } from "react";
+import { useWindowDimensions as useWindowDimensions4 } 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 = useRef3(null);
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions4();
+  const [align, setAlign] = useState5("center");
+  const [verticalAlign, setVerticalAlign] = useState5("below");
+  const [maxHeight, setMaxHeight] = useState5(contentHeight);
+  const [measured, setMeasured] = useState5(false);
+  const [prevOpen, setPrevOpen] = useState5(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setMeasured(false);
+  }
+  const measure = useCallback3(() => {
+    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]);
+  useEffect2(() => {
+    if (open) measure();
+  }, [open, measure]);
+  return { align, maxHeight, measured, triggerRef, verticalAlign };
+}
+
 // src/CornerActionButtons.tsx
 import { IconButton as IconButton2 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet10 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet11 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back", hitSlop }) {
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsx11(IconButton2, { icon: backIcon, iconColor: fg, size: 24, style: [styles10.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ jsx11(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles10.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(IconButton2, { icon: backIcon, iconColor: fg, size: 24, style: [styles11.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ jsx12(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles11.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
-var styles10 = StyleSheet10.create({
+var styles11 = StyleSheet11.create({
   back: {
     position: "absolute"
   },
@@ -663,11 +780,167 @@ var styles10 = StyleSheet10.create({
   }
 });
 
+// src/InlineColorPicker.tsx
+import { defaultColors, getContrastColor } from "@rific/auto-paper";
+import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
+import { clamp, useRotation as useRotation4 } from "@tastic/core";
+import { ScrollView, StyleSheet as StyleSheet12, useWindowDimensions as useWindowDimensions5, View as View11 } from "react-native";
+import { Icon as Icon3, Text as Text8 } from "react-native-paper";
+import { jsx as jsx13, jsxs as jsxs12 } 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 = useRotation4();
+  const rotation = rotationOverride ?? ambientRotation;
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const { width: windowWidth } = useWindowDimensions5();
+  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 = getContrastColor(displayValue);
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
+  return /* @__PURE__ */ jsxs12(View11, { style: [styles12.anchor, open && styles12.anchorOpen], children: [
+    /* @__PURE__ */ jsx13(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles12.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx13(View11, { ref: triggerRef, collapsable: false, style: styles12.triggerMeasure, children: tag ? /* @__PURE__ */ jsx13(Text8, { style: [styles12.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx13(Icon3, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx13(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx13(ScrollView, { style: [styles12.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles12.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__ */ jsx13(
+        TouchableRipple2,
+        {
+          disabled: taken && !swappable,
+          onPress: () => {
+            onChange(swatch.value);
+            if (autoDismiss) host.close();
+          },
+          borderless: true,
+          style: [styles12.swatch, { backgroundColor: swatchDisplay }, selected && styles12.swatchSelected, taken && !swappable && styles12.swatchTaken],
+          children: selected ? /* @__PURE__ */ jsx13(Icon3, { source: "check", size: 16, color: getContrastColor(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx13(Icon3, { source: "swap-horizontal", size: 16, color: getContrastColor(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx13(Icon3, { source: "close", size: 16, color: getContrastColor(swatchDisplay) }) : /* @__PURE__ */ jsx13(View11, {})
+        },
+        swatch.value
+      );
+    }) }) })
+  ] });
+}
+var styles12 = StyleSheet12.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/usePopoverHost.ts
+import { useCallback as useCallback4, useState as useState6 } from "react";
+function usePopoverHost() {
+  const [openId, setOpenId] = useState6(null);
+  const toggle = useCallback4((id) => {
+    setOpenId((prev) => prev === id ? null : id);
+  }, []);
+  const close = useCallback4(() => setOpenId(null), []);
+  return { openId, toggle, close };
+}
+
+// src/PressAwayOverlay.tsx
+import { Pressable, StyleSheet as StyleSheet13 } from "react-native";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function PressAwayOverlay({ active, onPress, style }) {
+  if (!active) return null;
+  return /* @__PURE__ */ jsx14(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet13.absoluteFill, style] });
+}
+
 // src/StaggeredWord.tsx
-import { useEffect as useEffect2 } from "react";
-import { StyleSheet as StyleSheet11, View as View9 } from "react-native";
+import { useEffect as useEffect3 } from "react";
+import { StyleSheet as StyleSheet14, View as View12 } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var STAGGER_MS = 45;
 var LETTER_DURATION_MS = 320;
 function getStaggeredWordDuration(letterCount) {
@@ -675,7 +948,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = useSharedValue(reducedMotion ? 1 : 0);
-  useEffect2(() => {
+  useEffect3(() => {
     if (reducedMotion) return;
     progress.value = withDelay(index * STAGGER_MS, withTiming(1, { duration: LETTER_DURATION_MS, easing: Easing.out(Easing.back(1.5)) }));
   }, [reducedMotion]);
@@ -683,12 +956,12 @@ function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSiz
     opacity: progress.value,
     transform: [{ translateY: (1 - progress.value) * 12 }, { scale: 0.85 + progress.value * 0.15 }]
   }));
-  return /* @__PURE__ */ jsx12(Animated.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
+  return /* @__PURE__ */ jsx15(Animated.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ jsx12(View9, { style: [styles11.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ jsx12(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  return /* @__PURE__ */ jsx15(View12, { style: [styles13.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ jsx15(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
 }
-var styles11 = StyleSheet11.create({
+var styles13 = StyleSheet14.create({
   row: {
     flexDirection: "row"
   }
@@ -696,12 +969,12 @@ var styles11 = StyleSheet11.create({
 
 // src/UpdateDialog.tsx
 import { useUpdater as useUpdater2 } from "@rific/updater";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onError }) {
   const { manifest, onConfirm, respond } = useUpdateConfirmBridge();
   useUpdater2({ autoCheck, autoPrompt, onConfirm, onError });
   const date = manifest ? new Date(manifest.createdAt) : null;
-  return /* @__PURE__ */ jsx13(ConfirmDialog, { visible: !!manifest, title: "Update Available", message: date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respond(true), onCancel: () => respond(false) });
+  return /* @__PURE__ */ jsx16(ConfirmDialog, { visible: !!manifest, title: "Update Available", message: date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respond(true), onCancel: () => respond(false) });
 }
 
 export {
@@ -720,7 +993,13 @@ export {
   BaseSettingsDialog,
   BaseStatsScreen,
   ContentGutter,
+  PopoverBody,
+  useAutoAlign,
   CornerActionButtons,
+  getInlineColorPickerContentSize,
+  InlineColorPicker,
+  usePopoverHost,
+  PressAwayOverlay,
   getStaggeredWordDuration,
   StaggeredWord,
   UpdateDialog

package/dist/index.d.mts

@@ -1,12 +1,13 @@
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, WELL_SHADOW, WellColors, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, useWellColors } from './chrome/index.mjs';
+import { PopoverHost, AlignResult, PopoverRotation, useAutoAlign } from './chrome/index.mjs';
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, InlineColorPicker, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, PopoverAlign, PopoverBody, PopoverVerticalAlign, PressAwayOverlay, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, WELL_SHADOW, WellColors, getInlineColorPickerContentSize, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors, usePopoverHost, useWellColors } from './chrome/index.mjs';
 import * as react from 'react';
-import { RefObject, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';
 import { Profile } from '@tastic/profile';
-import { ViewStyle, View, StyleProp } from 'react-native';
-import { ViewRotation } from '@tastic/core';
+import { ViewStyle, StyleProp } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
 export { SkiaGate, SkiaGateProps } from './SkiaGate.mjs';
+import '@tastic/core';
 
 interface UnlockedAchievement {
     id: string;
@@ -18,7 +19,7 @@ interface AchievementUnlockOwner {
     profile?: Profile | null;
     color: string;
 }
-interface Props$7<Seat extends number> {
+interface Props$4<Seat extends number> {
     unlocks: Partial<Record<Seat, UnlockedAchievement[]>>;
     seats: readonly Seat[];
     owners: Record<Seat, AchievementUnlockOwner>;
@@ -26,32 +27,7 @@ interface Props$7<Seat extends number> {
     fg?: string;
     style?: ViewStyle;
 }
-declare function AchievementUnlockList<Seat extends number>({ unlocks, seats, owners, tierColors, fg: fgOverride, style }: Props$7<Seat>): react.JSX.Element | null;
-
-type PopoverAlign = 'left' | 'right' | 'center';
-type PopoverVerticalAlign = 'below' | 'above';
-type PopoverRotation = ViewRotation;
-interface AlignResult {
-    align: PopoverAlign;
-    verticalAlign: PopoverVerticalAlign;
-    maxHeight: number;
-    measured: boolean;
-    triggerRef: RefObject<View | null>;
-}
-declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): {
-    align: PopoverAlign;
-    maxHeight: number;
-    measured: boolean;
-    triggerRef: RefObject<View | null>;
-    verticalAlign: PopoverVerticalAlign;
-};
-
-interface PopoverHost {
-    openId: string | null;
-    toggle: (id: string) => void;
-    close: () => void;
-}
-declare function usePopoverHost(): PopoverHost;
+declare function AchievementUnlockList<Seat extends number>({ unlocks, seats, owners, tierColors, fg: fgOverride, style }: Props$4<Seat>): react.JSX.Element | null;
 
 interface MenuOption<T extends string | number> {
     value: T;
@@ -77,7 +53,7 @@ interface MultiSelectSection<T extends string | number> {
     allClear?: boolean;
 }
 type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
-interface Props$6 {
+interface Props$3 {
     id: string;
     host: PopoverHost;
     icon: string;
@@ -97,7 +73,7 @@ interface Props$6 {
         clear: string;
     };
 }
-declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$6): react.JSX.Element;
+declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
 
 interface ControlSchemePickerProps<T extends string | number> {
     id: string;
@@ -129,32 +105,6 @@ interface CornerStatusBadgesProps {
 }
 declare function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: CornerStatusBadgesProps): react.JSX.Element;
 
-declare function getInlineColorPickerContentSize(swatchCount: number, windowWidth: number, columns?: number): {
-    width: number;
-    height: number;
-};
-interface Props$5 {
-    id: string;
-    host: PopoverHost;
-    value: string;
-    onChange: (hex: string) => void;
-    previewValue?: (hex: string) => string;
-    swatches?: SeedColor[];
-    takenValue?: string;
-    allowSwapTaken?: boolean;
-    dark: boolean;
-    align?: 'left' | 'right' | 'center';
-    alignOverride?: AlignResult;
-    rotation?: PopoverRotation;
-    icon?: string;
-    tag?: string;
-    labelFontFamily?: string;
-    autoDismiss?: boolean;
-    columns?: number;
-    size?: number;
-}
-declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$5): react.JSX.Element;
-
 declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
 declare function getLabeledDropdownContentHeight(optionCount: number): number;
 interface LabeledDropdownOption<T extends string> {
@@ -162,7 +112,7 @@ interface LabeledDropdownOption<T extends string> {
     label: string;
     icon?: string;
 }
-interface Props$4<T extends string> {
+interface Props$2<T extends string> {
     id: string;
     host: PopoverHost;
     options: LabeledDropdownOption<T>[];
@@ -173,7 +123,7 @@ interface Props$4<T extends string> {
     align?: 'left' | 'right' | 'center';
     alignOverride?: AlignResult;
 }
-declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$4<T>): react.JSX.Element;
+declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$2<T>): react.JSX.Element;
 
 declare function loadSkiaWeb(): Promise<void>;
 
@@ -215,25 +165,6 @@ interface PlayerSetupPanelProps<C extends string = string> {
 }
 declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
 
-interface Props$3 {
-    visible: boolean;
-    children: ReactNode;
-    align?: 'left' | 'right' | 'center';
-    verticalAlign?: 'below' | 'above';
-    caretColor?: string;
-    caretBorderColor?: string;
-    caretBorderWidth?: number;
-    triggerSize?: number;
-}
-declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$3): react.JSX.Element | null;
-
-interface Props$2 {
-    active: boolean;
-    onPress: () => void;
-    style?: StyleProp<ViewStyle>;
-}
-declare function PressAwayOverlay({ active, onPress, style }: Props$2): react.JSX.Element | null;
-
 interface Props$1 {
     color: string;
     ready: boolean;
@@ -279,4 +210,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
 
-export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getProfilePopoverId, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };
+export { AchievementUnlockList, type AchievementUnlockOwner, AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, PopoverHost, PopoverRotation, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getLabeledDropdownContentHeight, getProfilePopoverId, loadSkiaWeb, useAutoAlign, useQuitConfirmation, useZoneClampedAlign };