@tastic/hud 0.23.0 → 0.24.0

package/README.md

@@ -668,6 +668,64 @@ type-checks hud's source and needs it installed. `AchievementUnlockList` isn't h
 Metro resolves both entries to the same source files, so an app that imports some components from here and
 others from `@tastic/hud` still bundles each module once.
 
+## Skia on web (`@tastic/hud/skia`)
+
+On web, Skia draws through CanvasKit, a WASM file fetched at runtime. `@shopify/react-native-skia` builds
+its `Skia` object from CanvasKit when the module is first evaluated, so a component that imports Skia can't
+even be imported until CanvasKit has loaded. On native there is nothing to wait for.
+
+Every app in the fleet loads Skia the same way, with a host pair: two small files per Skia component, side
+by side, that Metro picks between by platform.
+
+```tsx
+// BoardHost.tsx: native renders the board directly, on the first frame
+import { Board, type BoardProps } from './Board'
+
+export default function BoardHost(props: BoardProps) {
+  return <Board {...props} />
+}
+```
+
+```tsx
+// BoardHost.web.tsx: web imports the board only once CanvasKit has loaded
+import { loadSkiaWeb } from '@tastic/hud/skia'
+import { lazy, Suspense } from 'react'
+
+import type { BoardProps } from './Board'
+
+const LazyBoard = lazy(() => loadSkiaWeb().then(() => import('./Board').then((m) => ({ default: m.Board }))))
+
+export default function BoardHost(props: BoardProps) {
+  return (
+    <Suspense fallback={null}>
+      <LazyBoard {...props} />
+    </Suspense>
+  )
+}
+```
+
+- Import the host, never `Board` itself, everywhere else in the app.
+- Keep `lazy()` at module scope, as above, so the component is created once.
+- Import from `@tastic/hud/skia` (also exported from `@tastic/hud`). It carries none of the main entry's
+  heavier peers, so it works in every app.
+- A test that imports a native host imports Skia, which throws under Jest (no native bindings). Mock the
+  host, or don't import the screen that uses it.
+
+`loadSkiaWeb()` fetches the app's `public/canvaskit.wasm` from `<baseUrl>/canvaskit.wasm`: under the Expo base
+URL (`experiments.baseUrl`, e.g. `/snake/canvaskit.wasm`) when the app has one, and `/canvaskit.wasm` when it
+doesn't. There's nothing to wire up: babel-preset-expo inlines `process.env.EXPO_BASE_URL` into hud's source
+when Metro bundles it, the same as in the app's own code. It's idempotent, so every host can call it.
+
+That rule is `locateSkiaWebFile(file: string): string`, also exported from `@tastic/hud/skia`, for code that
+calls Skia's own `LoadSkiaWeb` or `WithSkiaWeb` (`opts={{ locateFile: locateSkiaWebFile }}`). Without it,
+canvaskit looks for the file next to the running script or the page, which under a base URL is the wrong
+place: from `/snake` (no trailing slash) it asks for `/canvaskit.wasm`, and a static-output app can end up
+asking under `/_expo/static/js/web/`. `LoadSkiaWeb` also keeps its first call's result, a failed load
+included, for the rest of the page's life.
+
+`TriggerGaugeHost` uses the web half on both platforms: the main entry can't import Skia up front, since every
+app that imports `@tastic/hud` would then load Skia, including in its tests.
+
 ## Install
 
 Published to the public npm registry as `@tastic/hud`. Everything described above, including the
@@ -710,5 +768,5 @@ resolve module".
 | `@rific/updater` | >=0.4.0, optional | main entry and `./chrome`: `BaseSettingsDialog`, `UpdateDialog` |
 | `@tastic/profile` | >=0.4.0, optional | main entry: `PlayerSetupPanel`, `AchievementUnlockList` (`ProfileChip`) |
 | `@tastic/split-screen` | >=0.5.0, optional | main entry: `useZoneClampedAlign` |
-| `@shopify/react-native-skia` | >=2.6.0, optional | `TriggerGaugeHost`'s gauge (lazy-loaded behind `SkiaGate`) and `./skia-gate` |
+| `@shopify/react-native-skia` | >=2.6.0, optional | `TriggerGaugeHost`'s gauge (loaded when one mounts) and `./skia` |
 | `@tastic/achievements` | >=0.2.0, optional | `AchievementCatalogSection`, `AchievementUnlockList`, type-only (`AchievementCatalogRow`, first exported in 0.2.0; `AchievementTier`); `./chrome` needs it installed only to type-check |

package/dist/chunk-3TCJHMJP.mjs

@@ -0,0 +1,14 @@
+// src/loadSkiaWeb.ts
+function loadSkiaWeb() {
+  return Promise.resolve();
+}
+
+// src/locateSkiaWebFile.ts
+function locateSkiaWebFile(file) {
+  return `${process.env.EXPO_BASE_URL ?? ""}/${file}`;
+}
+
+export {
+  loadSkiaWeb,
+  locateSkiaWebFile
+};

package/dist/index.d.mts

@@ -5,8 +5,8 @@ import { ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';
 import { Profile } from '@tastic/profile';
 import { ViewStyle, StyleProp } from 'react-native';
+export { loadSkiaWeb, locateSkiaWebFile } from './skia/index.mjs';
 import { SeedColor } from '@rific/auto-paper';
-export { SkiaGate, SkiaGateProps } from './SkiaGate.mjs';
 import '@tastic/core';
 
 interface UnlockedAchievement {
@@ -125,8 +125,6 @@ interface Props$2<T extends string> {
 }
 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>;
-
 declare function getColorPopoverId(idPrefix: string): string;
 declare function getProfilePopoverId(idPrefix: string): string;
 declare function getCpuDifficultyPopoverId(idPrefix: string): string;
@@ -210,4 +208,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, 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 };
+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, useAutoAlign, useQuitConfirmation, useZoneClampedAlign };

package/dist/index.d.ts

@@ -5,8 +5,8 @@ import { ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';
 import { Profile } from '@tastic/profile';
 import { ViewStyle, StyleProp } from 'react-native';
+export { loadSkiaWeb, locateSkiaWebFile } from './skia/index.js';
 import { SeedColor } from '@rific/auto-paper';
-export { SkiaGate, SkiaGateProps } from './SkiaGate.js';
 import '@tastic/core';
 
 interface UnlockedAchievement {
@@ -125,8 +125,6 @@ interface Props$2<T extends string> {
 }
 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>;
-
 declare function getColorPopoverId(idPrefix: string): string;
 declare function getProfilePopoverId(idPrefix: string): string;
 declare function getCpuDifficultyPopoverId(idPrefix: string): string;
@@ -210,4 +208,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, 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 };
+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, useAutoAlign, useQuitConfirmation, useZoneClampedAlign };

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) });
@@ -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_core8, 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_core8 = require("@tastic/core");
-    import_react9 = require("react");
+    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,
@@ -1114,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
@@ -1188,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;
@@ -1241,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,
@@ -1261,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)) }) })
   ] });
 }
@@ -1273,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);
   }) });
@@ -1298,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;
@@ -1306,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({
@@ -1384,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_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({
@@ -1413,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({
@@ -1450,7 +1440,7 @@ var import_feedback_press6 = require("@rific/feedback-press");
 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;
@@ -1486,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,
@@ -1503,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
       );
@@ -1586,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;
@@ -1609,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);
     }) }) })
   ] });
@@ -1676,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
@@ -1690,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: {
@@ -1760,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`;
 }
@@ -1783,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({
@@ -1825,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
   ] });
@@ -1865,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) {
@@ -1881,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: {
@@ -1894,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
@@ -1950,7 +1940,6 @@ function useQuitConfirmation(hasProgress, onConfirmedBack) {
   RotatedFrame,
   SectionedDropdown,
   SharedActionBand,
-  SkiaGate,
   StaggeredWord,
   StatRow,
   StatSection,
@@ -1965,6 +1954,7 @@ function useQuitConfirmation(hasProgress, onConfirmedBack) {
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,
+  locateSkiaWebFile,
   overlayActionStyles,
   overlayStyles,
   useAutoAlign,

package/dist/index.mjs

@@ -1,6 +1,3 @@
-import {
-  SkiaGate
-} from "./chunk-XEOFR236.mjs";
 import {
   AchievementCatalogSection,
   AchievementRow,
@@ -38,6 +35,10 @@ import {
   overlayStyles,
   useOverlayCardColors
 } from "./chunk-PUF6TABL.mjs";
+import {
+  loadSkiaWeb,
+  locateSkiaWebFile
+} from "./chunk-3TCJHMJP.mjs";
 
 // src/AchievementUnlockList.tsx
 import { getContrastColor, useAutoPaperTheme } from "@rific/auto-paper";
@@ -95,10 +96,11 @@ import { ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-nati
 import { Icon as Icon2, Text as Text2 } from "react-native-paper";
 
 // src/TriggerGaugeHost.tsx
+import { lazy, Suspense } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var getTriggerGauge = () => import("./TriggerGauge-GIHKGAZE.mjs").then((mod) => ({ default: mod.TriggerGauge }));
+var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-GIHKGAZE.mjs").then((mod) => ({ default: mod.TriggerGauge }))));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ jsx2(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
+  return /* @__PURE__ */ jsx2(Suspense, { fallback: null, children: /* @__PURE__ */ jsx2(LazyTriggerGauge, { ...props }) });
 }
 
 // src/SectionedDropdown.tsx
@@ -434,11 +436,6 @@ var styles4 = StyleSheet4.create({
   }
 });
 
-// src/loadSkiaWeb.ts
-function loadSkiaWeb() {
-  return Promise.resolve();
-}
-
 // src/PlayerSetupPanel.tsx
 import { getOptionPickerContentSize, getProfilePickerContentSize, OptionPicker, ProfilePicker } from "@tastic/profile";
 import { StyleSheet as StyleSheet6, View as View5 } from "react-native";
@@ -647,7 +644,6 @@ export {
   RotatedFrame,
   SectionedDropdown,
   SharedActionBand,
-  SkiaGate,
   StaggeredWord,
   StatRow,
   StatSection,
@@ -662,6 +658,7 @@ export {
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,
+  locateSkiaWebFile,
   overlayActionStyles,
   overlayStyles,
   useAutoAlign,

package/dist/skia/index.d.mts

@@ -0,0 +1,5 @@
+declare function loadSkiaWeb(): Promise<void>;
+
+declare function locateSkiaWebFile(file: string): string;
+
+export { loadSkiaWeb, locateSkiaWebFile };

package/dist/skia/index.d.ts

@@ -0,0 +1,5 @@
+declare function loadSkiaWeb(): Promise<void>;
+
+declare function locateSkiaWebFile(file: string): string;
+
+export { loadSkiaWeb, locateSkiaWebFile };

package/dist/{SkiaGate.js → skia/index.js}

@@ -17,29 +17,25 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/SkiaGate.tsx
-var SkiaGate_exports = {};
-__export(SkiaGate_exports, {
-  SkiaGate: () => SkiaGate
+// src/skia/index.ts
+var skia_exports = {};
+__export(skia_exports, {
+  loadSkiaWeb: () => loadSkiaWeb,
+  locateSkiaWebFile: () => locateSkiaWebFile
 });
-module.exports = __toCommonJS(SkiaGate_exports);
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-function SkiaGate({ getComponent, componentProps, fallback = null }) {
-  const [Component, setComponent] = (0, import_react.useState)(null);
-  (0, import_react.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_runtime.jsx)(Component, { ...componentProps });
+module.exports = __toCommonJS(skia_exports);
+
+// src/loadSkiaWeb.ts
+function loadSkiaWeb() {
+  return Promise.resolve();
+}
+
+// src/locateSkiaWebFile.ts
+function locateSkiaWebFile(file) {
+  return `${process.env.EXPO_BASE_URL ?? ""}/${file}`;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  SkiaGate
+  loadSkiaWeb,
+  locateSkiaWebFile
 });

package/dist/skia/index.mjs

@@ -0,0 +1,8 @@
+import {
+  loadSkiaWeb,
+  locateSkiaWebFile
+} from "../chunk-3TCJHMJP.mjs";
+export {
+  loadSkiaWeb,
+  locateSkiaWebFile
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",
@@ -48,12 +48,12 @@
       "import": "./dist/guide/index.mjs",
       "require": "./dist/guide/index.js"
     },
-    "./skia-gate": {
-      "react-native": "./src/SkiaGate.tsx",
-      "browser": "./src/SkiaGate.web.tsx",
-      "types": "./dist/SkiaGate.d.ts",
-      "import": "./dist/SkiaGate.mjs",
-      "require": "./dist/SkiaGate.js"
+    "./skia": {
+      "react-native": "./src/skia/index.ts",
+      "browser": "./src/skia/index.ts",
+      "types": "./dist/skia/index.d.ts",
+      "import": "./dist/skia/index.mjs",
+      "require": "./dist/skia/index.js"
     }
   },
   "main": "dist/index.js",

package/src/TriggerGaugeHost.tsx

@@ -1,18 +1,24 @@
-import { SkiaGate } from './SkiaGate'
-import { TriggerGaugeProps } from './TriggerGauge'
+import { lazy, Suspense } from 'react'
 
-// TriggerGauge.tsx's `Skia` import binds to global.CanvasKit at module-evaluation time, which on web
-// only exists once CanvasKit's WASM fetch resolves - a plain `import { TriggerGauge } from
-// './TriggerGauge'` at the top of this file would already have evaluated that binding, against a
-// not-yet-loaded, undefined CanvasKit, before anything in a consuming app renders at all, since
-// bundlers evaluate the whole static import graph up front. This file therefore never imports
-// TriggerGauge itself except as a type (erased at compile time, carrying no runtime module
-// reference) - getTriggerGauge below, hoisted to module scope so its identity stays stable across
-// renders (see SkiaGate's own comment on why that matters), is what actually defers the real import
-// to runtime. No explicit loadSkiaWeb() call here on web: SkiaGate.web.tsx (WithSkiaWeb) already
-// gates its own mount behind CanvasKit being ready, and on native there's nothing to wait on at all.
-const getTriggerGauge = () => import('./TriggerGauge').then((mod) => ({ default: mod.TriggerGauge }))
+import { loadSkiaWeb } from './loadSkiaWeb'
+import type { TriggerGaugeProps } from './TriggerGauge'
+
+// TriggerGauge.tsx imports @shopify/react-native-skia at its top level, and this file is reached from
+// the main barrel, so a static import here would evaluate Skia the moment any app imports
+// `@tastic/hud`. On web that binds Skia to a CanvasKit that hasn't loaded yet (its `Skia` object is
+// built from global.CanvasKit at module-evaluation time), and in every app's Jest run it throws
+// ("Native Skia Module failed to correctly install JSI Bindings!": no app mocks Skia). So the gauge
+// module is only imported when a gauge mounts, behind loadSkiaWeb(), which loads CanvasKit on web and
+// resolves at once on native. This is the web half of the fleet's Skia host pair (see the README's
+// "Skia on web"), used on both platforms here: an app's own native host file can import its Skia
+// component directly, but a package barrel can't. The lazy component is created once, at module
+// scope, so its identity never changes between renders.
+const LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import('./TriggerGauge').then((mod) => ({ default: mod.TriggerGauge }))))
 
 export default function TriggerGaugeHost(props: TriggerGaugeProps) {
-  return <SkiaGate getComponent={getTriggerGauge} componentProps={props} />
+  return (
+    <Suspense fallback={null}>
+      <LazyTriggerGauge {...props} />
+    </Suspense>
+  )
 }

package/src/guide/index.ts

@@ -1,5 +1,5 @@
 // The how-to-play entry point (`@tastic/hud/guide`) - a standalone build reachable without ever
-// touching the main barrel, the same reason `@tastic/hud/skia-gate` is. This file and everything it
+// touching the main barrel, the same reason `@tastic/hud/skia` is. This file and everything it
 // imports must stay free of @tastic/core, @tastic/profile, @tastic/split-screen, @tastic/achievements,
 // @rific/updater and Skia: those are optional peers of this package (see package.json's
 // peerDependenciesMeta) precisely so an app with none of them can install @tastic/hud and use only

package/src/index.ts

@@ -14,6 +14,7 @@ export { MONO_FONT } from './fonts'
 export { getInlineColorPickerContentSize, InlineColorPicker } from './InlineColorPicker'
 export { getLabeledDropdownContentHeight, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption } from './LabeledDropdown'
 export { loadSkiaWeb } from './loadSkiaWeb'
+export { locateSkiaWebFile } from './locateSkiaWebFile'
 export { overlayActionStyles, overlayStyles } from './overlayCard'
 export { OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, useOverlayCardColors } from './OverlaySurface'
 export { getColorPopoverId, getCpuDifficultyPopoverId, getProfilePopoverId, PlayerSetupPanel, type PlayerSetupPanelProps } from './PlayerSetupPanel'
@@ -23,12 +24,11 @@ export { ReadyButton } from './ReadyButton'
 export { RotatedFrame, type RotatedFrameProps } from './RotatedFrame'
 export { type MenuOption, type MenuSection, type MultiSelectSection, SectionedDropdown, type SingleSelectSection } from './SectionedDropdown'
 export { SharedActionBand } from './SharedActionBand'
-export { SkiaGate, type SkiaGateProps } from './SkiaGate'
 export { getStaggeredWordDuration, StaggeredWord, type StaggeredWordProps } from './StaggeredWord'
 export { StatRow } from './StatRow'
 export { StatSection } from './StatSection'
 // TriggerGauge itself (the raw Skia-based component) is deliberately NOT exported here, even
-// though a native-only consumer could safely skip TriggerGaugeHost's SkiaGate indirection. A
+// though a native-only consumer could safely skip TriggerGaugeHost's lazy indirection. A
 // value re-export forces the bundler to fold TriggerGauge.tsx's own `Skia` import into a chunk
 // that this entry point imports eagerly at the top level - since that chunk is then shared with
 // TriggerGaugeHost's own dynamic import too, it defeats TriggerGaugeHost's deferred loading for

package/src/loadSkiaWeb.web.ts

@@ -1,11 +1,14 @@
 import { LoadSkiaWeb } from '@shopify/react-native-skia/src/web'
 
+import { locateSkiaWebFile } from './locateSkiaWebFile'
+
 // Skia's web target renders through CanvasKit, a WASM build of Skia fetched at runtime - nothing
 // using @shopify/react-native-skia's React components can draw a single frame until this resolves.
-// Kept as a thin wrapper (rather than importing LoadSkiaWeb directly at call sites) purely so this
-// file's `.ts` counterpart, loadSkiaWeb.ts, gives native an identically-shaped async no-op - Metro's
+// Kept as a thin wrapper (rather than importing LoadSkiaWeb directly at call sites) so this file's
+// `.ts` counterpart, loadSkiaWeb.ts, gives native an identically-shaped async no-op - Metro's
 // platform-extension resolution picks whichever one matches the bundle target, so canvaskit-wasm's
-// `require('fs')' never even gets resolved into a native/iOS/Android bundle.
+// `require('fs')` never even gets resolved into a native/iOS/Android bundle - and so the wasm is
+// always fetched from the app's base URL (see locateSkiaWebFile.ts).
 export function loadSkiaWeb(): Promise<void> {
-  return LoadSkiaWeb()
+  return LoadSkiaWeb({ locateFile: locateSkiaWebFile })
 }

package/src/locateSkiaWebFile.ts

@@ -0,0 +1,16 @@
+// The `locateFile` for CanvasKit's WASM fetch: `<baseUrl>/<file>`, so `/snake/canvaskit.wasm` under
+// an Expo base URL of `/snake` and `/canvaskit.wasm` with none. That is where an Expo web export
+// serves the app's `public/canvaskit.wasm`. Without a `locateFile`, canvaskit-wasm 0.41 resolves the
+// file next to the running script, or next to the page when no script is running: at `/snake` (no
+// trailing slash) that is `/canvaskit.wasm`, and in a static-output app it can land under
+// `/_expo/static/js/web/`. LoadSkiaWeb also keeps its first load's promise, a failed one included,
+// for the life of the page, so whichever call loads CanvasKit first has to pass this.
+//
+// `process.env.EXPO_BASE_URL` is `experiments.baseUrl` with its trailing slashes stripped ('' when
+// unset). babel-preset-expo inlines it as a string literal in every file Metro transforms,
+// node_modules included, so this source picks up the consuming app's value with no wiring. It is
+// read at call time, so a test (where it isn't inlined) can set it. No Skia import, so the barrel and
+// `@tastic/hud/skia` can export it to native too.
+export function locateSkiaWebFile(file: string): string {
+  return `${process.env.EXPO_BASE_URL ?? ''}/${file}`
+}

package/src/skia/index.ts

@@ -0,0 +1,12 @@
+// The Skia entry point (`@tastic/hud/skia`): the web CanvasKit loader every app's Skia host files use,
+// and the wasm URL rule it applies, reachable without the main barrel. Several Skia apps lack the
+// barrel's heavier peers (@tastic/profile, @tastic/split-screen), and importing `@tastic/hud` there
+// fails to bundle, so this is the one import path every app's host files share.
+//
+// package.json points both "react-native" and "browser" at this file. That is fine because it has no
+// .web twin itself: Metro doesn't platform-resolve an exports-map target, but it does resolve the
+// relative imports below, so web bundles get loadSkiaWeb.web.ts and native ones the no-op. The
+// boundary (only @shopify/react-native-skia's /src/web subpath, and only from the .web file) is
+// enforced by src/__tests__/skiaImports.test.ts.
+export { loadSkiaWeb } from '../loadSkiaWeb'
+export { locateSkiaWebFile } from '../locateSkiaWebFile'

package/dist/SkiaGate.d.mts

@@ -1,13 +0,0 @@
-import * as react from 'react';
-import { ComponentType, ReactNode } from 'react';
-
-interface SkiaGateProps<P extends object> {
-    getComponent: () => Promise<{
-        default: ComponentType<P>;
-    }>;
-    componentProps: P;
-    fallback?: ReactNode;
-}
-declare function SkiaGate<P extends object>({ getComponent, componentProps, fallback }: SkiaGateProps<P>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element | null;
-
-export { SkiaGate, type SkiaGateProps };

package/dist/SkiaGate.d.ts

@@ -1,13 +0,0 @@
-import * as react from 'react';
-import { ComponentType, ReactNode } from 'react';
-
-interface SkiaGateProps<P extends object> {
-    getComponent: () => Promise<{
-        default: ComponentType<P>;
-    }>;
-    componentProps: P;
-    fallback?: ReactNode;
-}
-declare function SkiaGate<P extends object>({ getComponent, componentProps, fallback }: SkiaGateProps<P>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element | null;
-
-export { SkiaGate, type SkiaGateProps };

package/dist/SkiaGate.mjs

@@ -1,6 +0,0 @@
-import {
-  SkiaGate
-} from "./chunk-XEOFR236.mjs";
-export {
-  SkiaGate
-};

package/dist/chunk-XEOFR236.mjs

@@ -1,21 +0,0 @@
-// src/SkiaGate.tsx
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-function SkiaGate({ getComponent, componentProps, fallback = null }) {
-  const [Component, setComponent] = useState(null);
-  useEffect(() => {
-    let cancelled = false;
-    getComponent().then((mod) => {
-      if (!cancelled) setComponent(() => mod.default);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [getComponent]);
-  if (!Component) return fallback;
-  return /* @__PURE__ */ jsx(Component, { ...componentProps });
-}
-
-export {
-  SkiaGate
-};

package/src/SkiaGate.tsx

@@ -1,45 +0,0 @@
-import type { ComponentType, ReactNode } from 'react'
-import { useEffect, useState } from 'react'
-
-export interface SkiaGateProps<P extends object> {
-  // A dynamic import, e.g. `() => import('./Board')` - hoist to module scope at the call site
-  // (never an inline closure written directly in JSX) so its identity stays stable across
-  // renders; it's this component's own useEffect dependency below.
-  getComponent: () => Promise<{ default: ComponentType<P> }>
-  componentProps: P
-  // Rendered while getComponent()'s promise is still pending. Defaults to null.
-  fallback?: ReactNode
-}
-
-// Native Skia renders through JSI - no WASM/CanvasKit fetch to wait on - so this file just
-// lazily mounts whatever getComponent() resolves to, once it resolves. The .web.tsx sibling
-// (picked by Metro/webpack's own platform-extension resolution for web bundles) is a different
-// implementation entirely: a direct re-export of @shopify/react-native-skia's own WithSkiaWeb,
-// which gates the same mount behind LoadSkiaWeb() first - CanvasKit's WASM build has to actually
-// finish loading before anything that imports '@shopify/react-native-skia' can evaluate its own
-// top-level `Skia` binding without crashing (see loadSkiaWeb.web.ts's own comment).
-//
-// No React.lazy()/Suspense here, deliberately: lazy() can't be called inline during render
-// (react-hooks/static-components - a getComponent prop that isn't referentially stable would
-// give a new component identity, and therefore an unwanted remount, on every render that passes
-// a fresh one) and can't be cached in a ref either (react-hooks/refs forbids reading or writing
-// ref.current during render, only inside an effect). Awaiting the import directly and setting
-// state from the resolved module sidesteps both - setState only ever runs from the promise
-// callback, never synchronously in render or in the effect body itself.
-export function SkiaGate<P extends object>({ getComponent, componentProps, fallback = null }: SkiaGateProps<P>) {
-  const [Component, setComponent] = useState<ComponentType<P> | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    getComponent().then((mod) => {
-      if (!cancelled) setComponent(() => mod.default)
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [getComponent])
-
-  if (!Component) return fallback
-
-  return <Component {...componentProps} />
-}

package/src/SkiaGate.web.tsx

@@ -1,9 +0,0 @@
-// Web needs CanvasKit's WASM loaded before any Skia <Canvas> evaluates - see loadSkiaWeb.web.ts's
-// own comment for why a plain useEffect-based loader can't fix this (it's a module-evaluation-
-// order problem, not a component-lifecycle one). Only this file (picked by Metro/webpack's
-// platform-extension resolution for web bundles) may import from
-// '@shopify/react-native-skia/src/web' - a static import of that subpath from a native-reachable
-// file pulls canvaskit-wasm's `require('fs')` into the native bundle and breaks iOS/Android
-// builds; this file vs. SkiaGate.tsx is what actually keeps it out, the same split
-// loadSkiaWeb.web.ts/loadSkiaWeb.ts already use.
-export { WithSkiaWeb as SkiaGate } from '@shopify/react-native-skia/src/web'