@tastic/hud 0.22.0 → 0.24.0

package/dist/index.js

@@ -38,22 +38,22 @@ __export(TriggerGauge_exports, {
 function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, dashWidth, startDeg = DEFAULT_START_DEG, endDeg = startDeg }) {
   const totalDurationMs = MOUNT_DURATION_MS + Math.max(0, segments - 1) * MOUNT_STAGGER_MS;
   const mountProgress = (0, import_react_native_reanimated.useSharedValue)(0);
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     mountProgress.value = (0, import_react_native_reanimated.withTiming)(1, { duration: totalDurationMs, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
   }, []);
   const rawSweepDeg = ((endDeg - startDeg) % 360 + 360) % 360;
   const totalSweepDeg = rawSweepDeg === 0 ? 360 : rawSweepDeg;
   const step = segments > 0 ? totalSweepDeg / segments : 0;
-  const centerDeg = (0, import_react9.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
+  const centerDeg = (0, import_react8.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
   const singleSelect = litIndices.length === 1;
   const angleDeg = (0, import_react_native_reanimated.useSharedValue)(centerDeg(litIndices[0] ?? 0));
   const litIndicesKey = [...litIndices].sort((a, b) => a - b).join(",");
-  const [transitionFrom, setTransitionFrom] = (0, import_react9.useState)(litIndices);
+  const [transitionFrom, setTransitionFrom] = (0, import_react8.useState)(litIndices);
   const transitionFromKey = [...transitionFrom].sort((a, b) => a - b).join(",");
-  const lastKeyRef = (0, import_react9.useRef)(litIndicesKey);
-  const lastIndicesRef = (0, import_react9.useRef)(litIndices);
+  const lastKeyRef = (0, import_react8.useRef)(litIndicesKey);
+  const lastIndicesRef = (0, import_react8.useRef)(litIndices);
   const selectionProgress = (0, import_react_native_reanimated.useSharedValue)(1);
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     if (litIndicesKey !== lastKeyRef.current) {
       if (singleSelect && lastIndicesRef.current.length === 1) {
         angleDeg.value = (0, import_react_native_reanimated.withTiming)(centerDeg(litIndices[0]), { duration: SELECTION_TRANSITION_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
@@ -82,7 +82,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       if (mountProgress.value < 1) {
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = (0, import_core7.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
+        local = (0, import_core8.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       }
       const sweep = dashAngleDeg * local;
       if (sweep <= 0) continue;
@@ -106,7 +106,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
         if (!isLitNow) continue;
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = (0, import_core7.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
+        local = (0, import_core8.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       } else if (isLitNow === wasLit) {
         local = 1;
       } else if (isLitNow) {
@@ -130,21 +130,21 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     height: canvasSize,
     width: canvasSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native17.View, { style: [styles14.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native17.View, { style: [styles14.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_core7, import_react9, import_react_native17, import_react_native_reanimated, import_jsx_runtime16, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles14;
+var import_react_native_skia, import_core8, import_react8, import_react_native17, import_react_native_reanimated, import_jsx_runtime15, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles14;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
-    import_core7 = require("@tastic/core");
-    import_react9 = require("react");
+    import_core8 = require("@tastic/core");
+    import_react8 = require("react");
     import_react_native17 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
-    import_jsx_runtime16 = require("react/jsx-runtime");
+    import_jsx_runtime15 = require("react/jsx-runtime");
     UNLIT_THICKNESS = 3;
     LIT_THICKNESS = 7;
     DASH_GAP_PX = 9;
@@ -194,7 +194,6 @@ __export(index_exports, {
   RotatedFrame: () => RotatedFrame,
   SectionedDropdown: () => SectionedDropdown,
   SharedActionBand: () => SharedActionBand,
-  SkiaGate: () => SkiaGate,
   StaggeredWord: () => StaggeredWord,
   StatRow: () => StatRow,
   StatSection: () => StatSection,
@@ -209,6 +208,7 @@ __export(index_exports, {
   getStaggeredWordDuration: () => getStaggeredWordDuration,
   isCompactDialogHeight: () => isCompactDialogHeight,
   loadSkiaWeb: () => loadSkiaWeb,
+  locateSkiaWebFile: () => locateSkiaWebFile,
   overlayActionStyles: () => overlayActionStyles,
   overlayStyles: () => overlayStyles,
   useAutoAlign: () => useAutoAlign,
@@ -437,9 +437,10 @@ function ActivityStatSection({ stats, fg, fgMuted, sectionBg }) {
 
 // src/BaseSettingsDialog.tsx
 var import_auto_paper7 = require("@rific/auto-paper");
+var import_core4 = require("@rific/core");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
-var import_core4 = require("@tastic/core");
+var import_core5 = require("@tastic/core");
 var import_react6 = require("react");
 var import_react_native13 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
@@ -704,18 +705,20 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: [styles10.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Icon, { 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 } = (0, import_auto_paper7.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core4.useRotation)();
+  const ambientRotation = (0, import_core5.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const window = (0, import_react_native13.useWindowDimensions)();
   const turned = rotation === 90 || rotation === -90;
   const compactHeader = isCompactDialogHeight(turned ? window.width : window.height);
-  const insets = (0, import_core4.rotateInsets)((0, import_react_native_safe_area_context2.useSafeAreaInsets)(), rotation);
+  const insets = (0, import_core5.rotateInsets)((0, import_react_native_safe_area_context2.useSafeAreaInsets)(), rotation);
   const sheetWidth = Math.min(overlayStyles.card.maxWidth, (turned ? window.height : window.width) - 2 * Math.max(insets.left, insets.right, SHEET_GUTTER));
-  const isTouchPrimary = (0, import_core4.useIsTouchPrimaryDevice)();
+  const isTouchPrimary = (0, import_core5.useIsTouchPrimaryDevice)();
   const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press2.useHapticSettings)();
   const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
+  const { settings: keepAwakeSettings, set: setKeepAwakeSettings } = (0, import_core4.useKeepAwakeSettings)();
+  const expoKeepAwake = (0, import_core4.useExpoKeepAwake)();
   const sound = (0, import_react6.useContext)(import_feedback_press2.SoundContext);
   const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
   const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper7.useThemeSettings)();
@@ -734,7 +737,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = import_react_native13.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
-  const showKeepAwake = isTouchPrimary && keepAwake !== void 0 && onKeepAwakeChange !== void 0;
+  const showKeepAwake = isTouchPrimary && expoKeepAwake !== void 0;
   const showHaptics = import_react_native13.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
@@ -761,8 +764,8 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
               ] })
             ] }) }),
-            showKeepAwake && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onKeepAwakeChange(!keepAwake), style: styles10.toggleButton, accessibilityLabel: `Keep awake ${keepAwake ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.toggleContent, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: keepAwake ? "eye" : "eye-closed", color: keepAwake ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwake ? colors.tertiaryContainer : colors.surfaceVariant }),
+            showKeepAwake && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => setKeepAwakeSettings({ enabled: !keepAwakeSettings.enabled }), style: styles10.toggleButton, accessibilityLabel: `Keep awake ${keepAwakeSettings.enabled ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: keepAwakeSettings.enabled ? "eye" : "eye-closed", color: keepAwakeSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwakeSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
               /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.flexShrink, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
@@ -938,14 +941,14 @@ var styles10 = import_react_native13.StyleSheet.create({
 // src/BaseStatsScreen.tsx
 var import_auto_paper8 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
-var import_core5 = require("@tastic/core");
+var import_core6 = require("@tastic/core");
 var import_react7 = require("react");
 var import_react_native14 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, backLabel = "Back", hitSlop, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
   const { dark, colors } = (0, import_auto_paper8.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core5.useRotation)();
+  const ambientRotation = (0, import_core6.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = (0, import_react7.useState)(false);
   const showReset = !!onReset;
@@ -1011,12 +1014,12 @@ var styles11 = import_react_native14.StyleSheet.create({
 });
 
 // src/ContentGutter.tsx
-var import_core6 = require("@tastic/core");
+var import_core7 = require("@tastic/core");
 var import_react_native15 = require("react-native");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
-  const { width: windowWidth } = (0, import_core6.useRotatedWindowDimensions)();
-  const { contentWidth, gutterWidth } = (0, import_core6.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
+  const { width: windowWidth } = (0, import_core7.useRotatedWindowDimensions)();
+  const { contentWidth, gutterWidth } = (0, import_core7.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native15.View, { style: [styles12.row, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.View, { style: [styles12.gutter, { width: gutterWidth }], children: leftGutter }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.View, { style: { width: contentWidth }, children }),
@@ -1035,13 +1038,13 @@ var styles12 = import_react_native15.StyleSheet.create({
 });
 
 // src/ControlSchemePicker.tsx
-var import_core9 = require("@tastic/core");
+var import_core10 = require("@tastic/core");
 var import_react_native20 = require("react-native");
 
 // src/SectionedDropdown.tsx
 var import_auto_paper9 = require("@rific/auto-paper");
 var import_feedback_press4 = require("@rific/feedback-press");
-var import_core8 = require("@tastic/core");
+var import_core9 = require("@tastic/core");
 var import_react_native19 = require("react-native");
 var import_react_native_paper11 = require("react-native-paper");
 
@@ -1111,29 +1114,19 @@ var styles13 = import_react_native16.StyleSheet.create({
   }
 });
 
-// src/SkiaGate.tsx
-var import_react8 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function SkiaGate({ getComponent, componentProps, fallback = null }) {
-  const [Component, setComponent] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
-    let cancelled = false;
-    getComponent().then((mod) => {
-      if (!cancelled) setComponent(() => mod.default);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [getComponent]);
-  if (!Component) return fallback;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Component, { ...componentProps });
+// src/TriggerGaugeHost.tsx
+var import_react9 = require("react");
+
+// src/loadSkiaWeb.ts
+function loadSkiaWeb() {
+  return Promise.resolve();
 }
 
 // src/TriggerGaugeHost.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var getTriggerGauge = () => Promise.resolve().then(() => (init_TriggerGauge(), TriggerGauge_exports)).then((mod) => ({ default: mod.TriggerGauge }));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var LazyTriggerGauge = (0, import_react9.lazy)(() => loadSkiaWeb().then(() => Promise.resolve().then(() => (init_TriggerGauge(), TriggerGauge_exports)).then((mod) => ({ default: mod.TriggerGauge }))));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react9.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LazyTriggerGauge, { ...props }) });
 }
 
 // src/useAutoAlign.ts
@@ -1185,7 +1178,7 @@ function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
 }
 
 // src/SectionedDropdown.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var MENU_BORDER_WIDTH = 1;
 var TRIGGER_SIZE = 44;
 var MENU_MIN_WIDTH = 200;
@@ -1197,7 +1190,7 @@ 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: forcedAlign, alignOverride, rotation: rotationOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
-  const ambientRotation = (0, import_core8.useRotation)();
+  const ambientRotation = (0, import_core9.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const menuBorderColor = (0, import_auto_paper9.getBlendedColor)(mutedColor, menuBg, 0.5);
@@ -1238,14 +1231,14 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
   const anchorStyle = [styles15.anchor, open && styles15.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: anchorStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { ref: triggerRef, collapsable: false, style: styles15.triggerBox, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: anchorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { ref: triggerRef, collapsable: false, style: styles15.triggerBox, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_feedback_press4.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native19.ScrollView, { style: [styles15.menu, menuStyle], contentContainerStyle: styles15.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native19.View, { style: [styles15.divider, dividerStyle] }),
-      section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native19.ScrollView, { style: [styles15.menu, menuStyle], contentContainerStyle: styles15.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native19.View, { style: [styles15.divider, dividerStyle] }),
+      section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         SingleSection,
         {
           section,
@@ -1258,7 +1251,7 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
             if (autoDismiss) host.close();
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
     ] }, section.id)) }) })
   ] });
 }
@@ -1270,18 +1263,18 @@ function SingleSection({
   labelFontFamily,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: section.options.map((option) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.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 = [styles15.item, selected && { backgroundColor: accentColor }, taken && styles15.itemTaken];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.TouchableRipple, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: styles15.itemRow, children: [
-      option.icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper11.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: styles15.itemLabelColumn, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper11.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper11.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_feedback_press4.TouchableRipple, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: styles15.itemRow, children: [
+      option.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper11.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: styles15.itemLabelColumn, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper11.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper11.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -1295,7 +1288,7 @@ function MultiSection({
   allClearLabels
 }) {
   const allSelected = section.value.length === section.options.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     section.options.map((option, i) => {
       const selected = section.value.includes(option.value);
       const rowColor = selected ? onAccentColor : mutedColor;
@@ -1303,12 +1296,12 @@ function MultiSection({
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
       const itemStyle = [styles15.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__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native19.View, { style: styles15.itemRow, children: [
-        option.icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper11.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper11.Text, { variant: "labelLarge", style: [styles15.itemLabelFlex, labelStyle], children: option.label })
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: styles15.itemRow, children: [
+        option.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper11.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper11.Text, { variant: "labelLarge", style: [styles15.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
-    section.allClear && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles15.item, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper11.Text, { variant: "labelLarge", style: [styles15.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+    section.allClear && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles15.item, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper11.Text, { variant: "labelLarge", style: [styles15.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
 var styles15 = import_react_native19.StyleSheet.create({
@@ -1381,21 +1374,21 @@ var styles15 = import_react_native19.StyleSheet.create({
 });
 
 // src/ControlSchemePicker.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ControlSchemePicker({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily }) {
-  const isTouchPrimary = (0, import_core9.useIsTouchPrimaryDevice)();
+  const isTouchPrimary = (0, import_core10.useIsTouchPrimaryDevice)();
   if (import_react_native20.Platform.OS !== "web" || isTouchPrimary) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(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__ */ (0, import_jsx_runtime18.jsx)(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/CornerActionButtons.tsx
 var import_feedback_press5 = require("@rific/feedback-press");
 var import_react_native21 = require("react-native");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back", hitSlop }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_feedback_press5.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles16.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_feedback_press5.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles16.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_feedback_press5.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles16.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_feedback_press5.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles16.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
 var styles16 = import_react_native21.StyleSheet.create({
@@ -1410,17 +1403,17 @@ var styles16 = import_react_native21.StyleSheet.create({
 // src/CornerStatusBadges.tsx
 var import_react_native22 = require("react-native");
 var import_react_native_paper12 = require("react-native-paper");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var BADGE_SIZE = 30;
 function StatusBadge({ icon }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native22.View, { style: styles17.badge, children: icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_paper12.Icon, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: styles17.badge, children: icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_paper12.Icon, { 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__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    p1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native22.View, { pointerEvents: "none", style: p1OnRightSide ? styles17.bottomRight : styles17.bottomLeft, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StatusBadge, { icon: p1.icon }) }),
-    p2 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native22.View, { pointerEvents: "none", style: p2OnLeftSide ? styles17.topLeft : styles17.topRight, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StatusBadge, { icon: p2.icon }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    p1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { pointerEvents: "none", style: p1OnRightSide ? styles17.bottomRight : styles17.bottomLeft, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StatusBadge, { icon: p1.icon }) }),
+    p2 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { pointerEvents: "none", style: p2OnLeftSide ? styles17.topLeft : styles17.topRight, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StatusBadge, { icon: p2.icon }) })
   ] });
 }
 var styles17 = import_react_native22.StyleSheet.create({
@@ -1444,10 +1437,10 @@ var styles17 = import_react_native22.StyleSheet.create({
 // src/InlineColorPicker.tsx
 var import_auto_paper10 = require("@rific/auto-paper");
 var import_feedback_press6 = require("@rific/feedback-press");
-var import_core10 = require("@tastic/core");
+var import_core11 = require("@tastic/core");
 var import_react_native23 = require("react-native");
 var import_react_native_paper13 = require("react-native-paper");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
@@ -1461,7 +1454,7 @@ 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 = (0, import_core10.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
+  const autoColumns = (0, import_core11.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);
@@ -1469,7 +1462,7 @@ function getInlineColorPickerContentSize(swatchCount, windowWidth, columns) {
   return { width, height };
 }
 function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = import_auto_paper10.defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
-  const ambientRotation = (0, import_core10.useRotation)();
+  const ambientRotation = (0, import_core11.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = (0, import_react_native23.useWindowDimensions)();
@@ -1483,14 +1476,14 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const displayValue = displayFor(value);
   const contrastColor = (0, import_auto_paper10.getContrastColor)(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native23.View, { style: [styles18.anchor, open && styles18.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles18.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native23.View, { ref: triggerRef, collapsable: false, style: styles18.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Text, { style: [styles18.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native23.ScrollView, { style: [styles18.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles18.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native23.View, { style: [styles18.anchor, open && styles18.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles18.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.View, { ref: triggerRef, collapsable: false, style: styles18.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_paper13.Text, { style: [styles18.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_paper13.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.ScrollView, { style: [styles18.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles18.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__ */ (0, import_jsx_runtime22.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_feedback_press6.TouchableRipple,
         {
           disabled: taken && !swappable,
@@ -1500,7 +1493,7 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
           },
           borderless: true,
           style: [styles18.swatch, { backgroundColor: swatchDisplay }, selected && styles18.swatchSelected, taken && !swappable && styles18.swatchTaken],
-          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "check", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper13.Icon, { source: "close", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native23.View, {})
+          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_paper13.Icon, { source: "check", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_paper13.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_paper13.Icon, { source: "close", size: 16, color: (0, import_auto_paper10.getContrastColor)(swatchDisplay) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.View, {})
         },
         swatch.value
       );
@@ -1583,7 +1576,7 @@ var import_auto_paper11 = require("@rific/auto-paper");
 var import_feedback_press7 = require("@rific/feedback-press");
 var import_react_native24 = require("react-native");
 var import_react_native_paper14 = require("react-native-paper");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 180;
 var ROW_HEIGHT = 36;
@@ -1606,17 +1599,17 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native24.View, { style: [styles19.anchor, open && styles19.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => host.toggle(id), style: styles19.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native24.View, { ref: triggerRef, collapsable: false, style: styles19.triggerInner, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_paper14.Text, { style: [styles19.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_paper14.Icon, { source: "menu-down", size: 16, color })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native24.View, { style: [styles19.anchor, open && styles19.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => host.toggle(id), style: styles19.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native24.View, { ref: triggerRef, collapsable: false, style: styles19.triggerInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper14.Text, { style: [styles19.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper14.Icon, { source: "menu-down", size: 16, color })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native24.ScrollView, { style: [styles19.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles19.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native24.ScrollView, { style: [styles19.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles19.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
       const onColor = (0, import_auto_paper11.getContrastColor)(color);
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => handleSelect(option), style: [styles19.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native24.View, { style: styles19.rowInner, children: [
-        option.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_paper14.Icon, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_paper14.Text, { style: [styles19.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_feedback_press7.TouchableRipple, { onPress: () => handleSelect(option), style: [styles19.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native24.View, { style: styles19.rowInner, children: [
+        option.icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper14.Icon, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_paper14.Text, { style: [styles19.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
       ] }) }, option.value);
     }) }) })
   ] });
@@ -1673,9 +1666,9 @@ var styles19 = import_react_native24.StyleSheet.create({
   }
 });
 
-// src/loadSkiaWeb.ts
-function loadSkiaWeb() {
-  return Promise.resolve();
+// src/locateSkiaWebFile.ts
+function locateSkiaWebFile(file) {
+  return `${process.env.EXPO_BASE_URL ?? ""}/${file}`;
 }
 
 // src/PlayerSetupPanel.tsx
@@ -1687,12 +1680,12 @@ var import_react_native_paper16 = require("react-native-paper");
 var import_feedback_press8 = require("@rific/feedback-press");
 var import_react_native25 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
   const readyButtonStyle = [styles20.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_feedback_press8.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_paper15.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_feedback_press8.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_paper15.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
 var styles20 = import_react_native25.StyleSheet.create({
   readyButton: {
@@ -1757,7 +1750,7 @@ function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
 }
 
 // src/PlayerSetupPanel.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
@@ -1780,13 +1773,13 @@ function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onCol
   const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix);
   const seatPickerSize = showProfilePicker ? (0, import_profile2.getProfilePickerContentSize)(profiles.length, !!onManageProfiles, colorSection) : (0, import_profile2.getOptionPickerContentSize)(cpuDifficultyOptions?.length ?? 0, colorSection);
   const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles, colorSection, alignOverride: seatPickerAlign }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_profile2.OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    (!seatButton || secondPicker) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
-      !seatButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native27.View, { style: [styles21.panel, ownPopoverOpen && styles21.panelOpen], children: [
+    showProfilePicker ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_profile2.ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles, colorSection, alignOverride: seatPickerAlign }) : showCpuDifficulty ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_profile2.OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_paper16.Text, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    (!seatButton || secondPicker) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native27.View, { style: [styles21.pickerRow, pickerRowPopoverOpen && styles21.pickerRowOpen], children: [
+      !seatButton && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
       secondPicker
     ] }),
-    isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReadyButton, { color, ready: ready ?? false, onToggleReady })
+    isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
 var styles21 = import_react_native27.StyleSheet.create({
@@ -1822,23 +1815,23 @@ var styles21 = import_react_native27.StyleSheet.create({
 
 // src/PressAwayOverlay.tsx
 var import_react_native28 = require("react-native");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native28.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native28.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native28.StyleSheet.absoluteFill, style] });
 }
 
 // src/SharedActionBand.tsx
 var import_feedback_press9 = require("@rific/feedback-press");
 var import_react_native29 = require("react-native");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: styles22.actionsRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
-      onRandomize && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
-      onReset && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_feedback_press9.IconButton, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native29.View, { style: [styles22.column, popoverOpen && styles22.columnOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native29.View, { style: styles22.actionsRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_feedback_press9.IconButton, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
+      onRandomize && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_feedback_press9.IconButton, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
+      onReset && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_feedback_press9.IconButton, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_feedback_press9.IconButton, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
     ] }),
     children
   ] });
@@ -1862,7 +1855,7 @@ var styles22 = import_react_native29.StyleSheet.create({
 var import_react13 = require("react");
 var import_react_native30 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var STAGGER_MS = 45;
 var LETTER_DURATION_MS = 320;
 function getStaggeredWordDuration(letterCount) {
@@ -1878,10 +1871,10 @@ 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__ */ (0, import_jsx_runtime28.jsx)(import_react_native_reanimated2.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native_reanimated2.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native30.View, { style: [styles23.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
 }
 var styles23 = import_react_native30.StyleSheet.create({
   row: {
@@ -1891,12 +1884,12 @@ var styles23 = import_react_native30.StyleSheet.create({
 
 // src/UpdateDialog.tsx
 var import_updater2 = require("@rific/updater");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onError }) {
   const { manifest, onConfirm, respond } = useUpdateConfirmBridge();
   (0, import_updater2.useUpdater)({ autoCheck, autoPrompt, onConfirm, onError });
   const date = manifest ? new Date(manifest.createdAt) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(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__ */ (0, import_jsx_runtime28.jsx)(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) });
 }
 
 // src/useQuitConfirmation.ts
@@ -1947,7 +1940,6 @@ function useQuitConfirmation(hasProgress, onConfirmedBack) {
   RotatedFrame,
   SectionedDropdown,
   SharedActionBand,
-  SkiaGate,
   StaggeredWord,
   StatRow,
   StatSection,
@@ -1962,6 +1954,7 @@ function useQuitConfirmation(hasProgress, onConfirmedBack) {
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,
+  locateSkiaWebFile,
   overlayActionStyles,
   overlayStyles,
   useAutoAlign,