@tastic/hud 0.7.0 → 0.8.2

package/src/BaseStatsScreen.tsx

@@ -1,8 +1,11 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, IconButton } from '@rific/feedback-press'
+import { useRotation } from '@tastic/core'
 import { ReactNode, useState } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { Icon, Portal, Text } from 'react-native-paper'
+import { Text } from 'react-native-paper'
+
+import { ConfirmDialog } from './ConfirmDialog'
 
 // react-native-paper's own MD3 Text variant names — mirrored locally rather than importing its
 // internal VariantProp/MD3TypescaleKey (not exported from the package's public entry point) just
@@ -10,12 +13,13 @@ import { Icon, Portal, Text } from 'react-native-paper'
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
 
 interface Props {
-  // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) — this dialog renders
-  // as a centered Portal modal, unaffected by whichever screen's own FakeLandscapeView wraps its
-  // trigger, so it has to rotate its own card content to read right-side-up for whichever way the
-  // phone is actually being held. Defaults to 0 for a caller that doesn't track one — matches
-  // BaseSettingsDialog's own identical prop, though the first apps consuming this screen shell
-  // don't wrap it in a FakeLandscapeView at all and so never have a nonzero one to give.
+  // Explicit override for the live physical-hold rotation (see @tastic/core's useRotation) — only
+  // affects this component's own Portal-rendered reset-confirm dialog (via ConfirmDialog's own
+  // rotation prop), which (like any Portal content) is unaffected by whichever screen's own
+  // FakeLandscapeView wraps the trigger and so has to rotate itself. Defaults to a live ambient
+  // read via useRotation() when omitted — note this does NOT make the header/scrollable content
+  // below rotate; the caller's own screen still needs its own FakeLandscapeView wrap for that
+  // (this component has no transform on its own main body).
   rotation?: number
   title?: string
   // 'headlineSmall' (this screen's own default, below) — was originally 'displaySmall' (the full
@@ -35,54 +39,50 @@ interface Props {
   resetLabel?: string
   resetConfirmTitle?: string
   resetConfirmBody?: string
-  // Independently optional overrides for this screen's own background/text colors — each defaults
-  // to the literal-black/white-by-appearance formula described below when omitted, so every
-  // existing caller (none of which pass these) renders identically to before. A caller with its own
-  // app-wide chrome palette (e.g. a tinted background rather than neutral black/white) passes
-  // whichever of the three it needs; cardBorder on the reset-confirm overlay stays fixed regardless,
-  // since its low alpha already reads fine against any cardBg.
+  // Independently optional overrides for this screen's own header/background colors — each
+  // defaults to the literal-black/white-by-appearance formula described below when omitted, so
+  // every existing caller (none of which pass these) renders identically to before. A caller with
+  // its own app-wide chrome palette (e.g. a tinted background rather than neutral black/white)
+  // passes whichever of the two it needs.
+  //
+  // There used to be a third override here, cardBg, plus a separate accentColor override for the
+  // reset-confirm dialog's own icon/title/card. Both are gone: the reset-confirm step used to be a
+  // hand-rolled lookalike of ConfirmDialog with its own copy of the overlay/card/button styling,
+  // which is exactly how it drifted from ConfirmDialog's real look in the first place (different
+  // button layout, different Cancel styling, and — via cardBg — a different, caller-tintable card
+  // background no other ConfirmDialog in the fleet has). It now renders a real ConfirmDialog
+  // instance below instead of its own copy, which by construction can never drift from every other
+  // confirm prompt in the app again — at the cost of losing that per-caller tinting, which is the
+  // right trade: a "you're about to erase everything" prompt should look and read identically
+  // everywhere, not take on whichever screen happened to trigger it.
   fg?: string
   bg?: string
-  cardBg?: string
-  // Overrides the confirm-overlay's alert icon/title, which otherwise default to auto-paper's
-  // colors.secondary. That default is tuned to read against auto-paper's OWN background role, not
-  // necessarily against a cardBg override above — a caller passing cardBg should generally pass a
-  // matching accentColor too, rather than risk colors.secondary landing close in hue/lightness to
-  // its own custom card background (this is what actually happened with a tinted felt cardBg in the
-  // app this was first overridden for). Every button on this screen (the reset trigger included)
-  // fills with colors.secondary/onSecondary as a self-contained, always-legible pair instead of
-  // relying on a text-only color read against the surrounding chrome, so none of them need this —
-  // only the bare icon/title do.
-  accentColor?: string
   children: ReactNode
 }
 
 // The stats/achievements screen shell every @tastic game shares — back button + title header,
 // scrollable content area, and an optional reset-everything action with its own confirm-before-
-// destroying overlay — extracted after the same header/scroll/reset-confirm shape was independently
+// destroying dialog — extracted after the same header/scroll/reset-confirm shape was independently
 // built into LightCycles' own achievements.tsx. Colors default to the same literal-black/white-by-
 // appearance formula BaseSettingsDialog hardcodes internally (same as this package's own
-// BaseSettingsDialog) — zero-config for every existing caller — but fg/bg/cardBg are each
-// independently overridable for a caller whose own app-wide chrome palette isn't that literal
-// black/white convention. `children` is the seam for whatever isn't shared: this component has no
-// opinion on what a "stat" is or how achievements are catalogued — see StatRow/StatSection/
-// AchievementRow for the smaller presentational pieces built to go inside it.
-export function BaseStatsScreen({ rotation = 0, title = 'Achievements', titleVariant = 'headlineSmall', onBack, insets, onReset, resetLabel = 'Reset All Stats', resetConfirmTitle = 'Reset Everything?', resetConfirmBody = 'This permanently erases all stats and achievements. This cannot be undone.', fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props) {
+// BaseSettingsDialog) — zero-config for every existing caller — but fg/bg are each independently
+// overridable for a caller whose own app-wide chrome palette isn't that literal black/white
+// convention. `children` is the seam for whatever isn't shared: this component has no opinion on
+// what a "stat" is or how achievements are catalogued — see StatRow/StatSection/AchievementRow for
+// the smaller presentational pieces built to go inside it.
+export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achievements', titleVariant = 'headlineSmall', onBack, insets, onReset, resetLabel = 'Reset All Stats', resetConfirmTitle = 'Reset Everything?', resetConfirmBody = 'This permanently erases all stats and achievements. This cannot be undone.', fg: fgOverride, bg: bgOverride, children }: Props) {
   const { dark, colors } = useAutoPaperTheme()
+  const ambientRotation = useRotation()
+  const rotation = rotationOverride ?? ambientRotation
   const [confirmResetVisible, setConfirmResetVisible] = useState(false)
   const showReset = !!onReset
 
   // High-contrast retro look by default: literal black/white by appearance, matching every other
   // screen in this ecosystem (title/loadout/settings all use this identical formula) rather than
-  // auto-paper's own (slightly tinted) background role — same convention BaseSettingsDialog's own
-  // fg/cardBg/cardBorder use internally. Overridable per-instance via the props above for a caller
-  // whose own chrome isn't that literal black/white convention; cardBorder has no override (see the
-  // Props doc above for why).
+  // auto-paper's own (slightly tinted) background role. Overridable per-instance via the props
+  // above for a caller whose own chrome isn't that literal black/white convention.
   const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
   const bg = bgOverride ?? (dark ? '#000000' : '#FFFFFF')
-  const cardBg = cardBgOverride ?? (dark ? '#111111' : '#F2F2F2')
-  const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
-  const accentColor = accentColorOverride ?? colors.secondary
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
@@ -97,42 +97,27 @@ export function BaseStatsScreen({ rotation = 0, title = 'Achievements', titleVar
         {children}
 
         {showReset && (
-          <Button mode='contained' onPress={() => setConfirmResetVisible(true)} buttonColor={colors.secondary} textColor={colors.onSecondary} style={styles.resetButton}>
+          <Button mode='contained' onPress={() => setConfirmResetVisible(true)} buttonColor={colors.danger} textColor={colors.onDanger} style={styles.resetButton}>
             {resetLabel}
           </Button>
         )}
       </ScrollView>
 
-      {confirmResetVisible && (
-        <Portal>
-          <View style={[styles.overlay, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
-            <View style={[styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }]}>
-              <Icon source='alert-outline' size={64} color={accentColor} />
-              <Text variant='headlineLarge' style={[styles.overlayTitle, { color: accentColor }]}>
-                {resetConfirmTitle}
-              </Text>
-              <Text variant='bodyLarge' style={[styles.overlayBody, { color: fg }]}>
-                {resetConfirmBody}
-              </Text>
-              <Button mode='contained' onPress={() => setConfirmResetVisible(false)} style={styles.overlayButton}>
-                Cancel
-              </Button>
-              <Button
-                mode='contained'
-                onPress={() => {
-                  onReset?.()
-                  setConfirmResetVisible(false)
-                }}
-                style={styles.overlayButton}
-                buttonColor={colors.secondary}
-                textColor={colors.onSecondary}
-              >
-                Reset
-              </Button>
-            </View>
-          </View>
-        </Portal>
-      )}
+      <ConfirmDialog
+        visible={confirmResetVisible}
+        title={resetConfirmTitle}
+        message={resetConfirmBody}
+        confirmLabel='Reset'
+        cancelLabel='Cancel'
+        icon='alert-outline'
+        destructive
+        rotation={rotation}
+        onCancel={() => setConfirmResetVisible(false)}
+        onConfirm={() => {
+          onReset?.()
+          setConfirmResetVisible(false)
+        }}
+      />
     </View>
   )
 }
@@ -151,30 +136,6 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingBottom: 8
   },
-  // Same overlay shape BaseSettingsDialog's own info overlay uses (backdrop + centered card),
-  // rotated in place the same way rather than via Portal-root transform for the same reason — see
-  // that component's own identical styles for the full rationale.
-  overlay: {
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.72)',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0
-  },
-  overlayBody: { textAlign: 'center' },
-  overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: 'center',
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlayTitle: { fontWeight: 'bold', marginBottom: -8 },
   resetButton: {
     marginTop: 16
   },

package/src/ConfirmDialog.tsx

@@ -69,11 +69,24 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
 }
 
 const styles = StyleSheet.create({
+  // flexBasis (not flex: 1's own 0%) is each button's real floor: whenever both fit side by side,
+  // flexGrow still splits any leftover width evenly beyond that floor, same visual result as the
+  // old flex: 1 on a roomy screen - but a button can never be squeezed narrower than 128, only
+  // wrap to its own row instead (see actions' flexWrap below). react-native-paper's Button
+  // hardcodes numberOfLines={1} on its label with no override, so a button squeezed under its
+  // label's natural width silently ellipsizes ("Cancel" -> "Can...") instead of wrapping - assumed
+  // fixable by just giving the row more width, until confirmed live that these two-word labels
+  // (Cancel/Reset/New Game) can still lose the truncation fight even with the extra room card's own
+  // width fix below provides, on a narrow enough screen. flexBasis is the real fix: past a certain
+  // width there's no side-by-side arrangement that fits both buttons at their natural label size,
+  // so the layout has to give (stack) rather than the label (truncate).
   actionButton: {
-    flex: 1
+    flexBasis: 128,
+    flexGrow: 1
   },
   actions: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     gap: 12,
     width: '100%'
   },
@@ -86,7 +99,12 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     gap: 16,
     maxWidth: 360,
-    padding: 32
+    padding: 32,
+    // Claims its full allowance instead of just maxWidth alone, which only caps how wide the card
+    // is allowed to get - without an explicit width, a flex-centered child sizes to its own content
+    // instead of stretching, so the card (and therefore actions below) can end up narrower than the
+    // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
+    width: '100%'
   },
   overlay: {
     alignItems: 'center',
@@ -94,11 +112,19 @@ const styles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center',
     left: 0,
+    // Gives the card room to breathe from the screen edges now that it reliably stretches to fill
+    // its full width allowance (see card's own width comment) - without this, width: '100%' would
+    // run the card edge-to-edge on a screen narrower than maxWidth's own 360.
+    paddingHorizontal: 24,
     position: 'absolute',
     right: 0,
     top: 0
   },
+  // textAlign is load-bearing, not decorative, once `title` wraps to more than one line - centered
+  // within card's own alignItems: 'center' only centers the Text's block as a whole; each wrapped
+  // line inside that block still defaults to left-aligned without this.
   title: {
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    textAlign: 'center'
   }
 })

package/src/InlineColorPicker.tsx

@@ -1,12 +1,12 @@
 import { defaultColors, getContrastColor, SeedColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
-import { clamp } from '@tastic/core'
+import { clamp, useRotation } from '@tastic/core'
 import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
 import { MONO_FONT } from './fonts'
 import { PopoverBody } from './PopoverBody'
-import { useAutoAlign } from './useAutoAlign'
+import { PopoverRotation, useAutoAlign } from './useAutoAlign'
 import { PopoverHost } from './usePopoverHost'
 
 // Presence check, not a full-string "is this exactly one emoji" validation — this only decides a
@@ -62,6 +62,10 @@ interface Props {
   // Manual override — omit to let the popover measure its own trigger and pick whichever alignment
   // keeps it from overflowing the screen edge (see useAutoAlign).
   align?: 'left' | 'right' | 'center'
+  // Explicit override for the rotation a @tastic/split-screen-style FakeLandscapeView (or
+  // equivalent) ancestor is currently applying — see SectionedDropdown's identical prop for the
+  // full reasoning. Defaults to a live ambient read via @tastic/core's useRotation() when omitted.
+  rotation?: PopoverRotation
   // Trigger glyph — defaults to a plain palette. Pass a distinct icon per slot (e.g. a face for a
   // human, a robot for CPU) to convey identity through the icon itself. Overridden by `tag` below
   // when present.
@@ -89,7 +93,9 @@ interface Props {
 // Renders inline rather than as a full-screen modal, scoped to its own panel — a modal color
 // picker would block the whole screen for one player while another can't touch their own panel at
 // the same time, which defeats the point of a split-screen lobby.
-export function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
+export function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, rotation: rotationOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
+  const ambientRotation = useRotation()
+  const rotation = rotationOverride ?? ambientRotation
   const menuBg = dark ? '#000000' : '#FFFFFF'
   const { width: windowWidth } = useWindowDimensions()
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS)
@@ -99,7 +105,7 @@ export function InlineColorPicker({ id, host, value, onChange, previewValue, swa
   const swatchesHeight = SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * swatchRows + SWATCHES_GAP * (swatchRows - 1)
 
   const open = host.openId === id
-  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight)
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation)
   const align = alignOverride ?? autoAlign
   const displayFor = previewValue ?? ((hex: string) => hex)
   const displayValue = displayFor(value)

package/src/SectionedDropdown.tsx

@@ -1,12 +1,13 @@
 import { getBlendedColor, getColorRoles } from '@rific/auto-paper'
 import { IconButton, TouchableRipple } from '@rific/feedback-press'
+import { useRotation } from '@tastic/core'
 import { ScrollView, StyleSheet, TextStyle, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
 import { MONO_FONT } from './fonts'
 import { PopoverBody } from './PopoverBody'
 import TriggerGaugeHost from './TriggerGaugeHost'
-import { useAutoAlign } from './useAutoAlign'
+import { PopoverRotation, useAutoAlign } from './useAutoAlign'
 import { PopoverHost } from './usePopoverHost'
 
 const MENU_BORDER_WIDTH = 1
@@ -99,6 +100,17 @@ interface Props {
   // keeps it from overflowing the screen edge (see useAutoAlign). Only pass this to force a specific
   // side regardless of where the trigger actually sits.
   align?: 'left' | 'right' | 'center'
+  // Explicit override for the rotation a @tastic/split-screen-style FakeLandscapeView (or any other
+  // ancestor rotated the same way — a bare CSS `transform: rotate()`, not an actual OS-level
+  // orientation change) is currently applying. Defaults to a live ambient read via @tastic/core's
+  // useRotation() when omitted, so most callers never need to pass this at all. Pass it explicitly
+  // only when a caller's own reading needs to differ from the ambient one (e.g. a fading dual-zone
+  // layout whose panel content deliberately lags the live reading behind a transition). Correctness
+  // matters here regardless of source: measureInWindow reports the trigger's PRE-rotation layout
+  // position (see useAutoAlign's own doc comment for why, and why it can't recover this any other
+  // way), so a wrong rotation value picks an alignment for where the trigger *used to be* before
+  // rotating, clipping off the edge it's actually now near instead of the one it was near.
+  rotation?: PopoverRotation
   // Whether picking a value in a *single-select* section closes the popover. Defaults to true
   // (the old, pre-press-away default: pick one thing, you're done). Multi-select rows never
   // auto-close regardless of this — see MultiSelectSection's own comment. Worth setting false for a
@@ -116,7 +128,9 @@ interface Props {
 // powerups are enabled, say) is just this with one 'multi' section (optionally with allClear); a
 // combined menu (e.g. spawn frequency + which types, in one menu) is just two sections in the same
 // array.
-export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: 'All', clear: 'Clear' } }: Props) {
+export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, rotation: rotationOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: 'All', clear: 'Clear' } }: Props) {
+  const ambientRotation = useRotation()
+  const rotation = rotationOverride ?? ambientRotation
   const menuBg = dark ? '#000000' : '#FFFFFF'
   // mutedColor is translucent (fine for the icon/text tints below, each a single paint), but the
   // caret is deliberately drawn overlapping the box's own top border (PopoverBody's CARET_DIP,
@@ -142,7 +156,7 @@ export function SectionedDropdown({ id, host, icon, accessibilityLabel, sections
       const divider = sectionIndex > 0 ? MENU_DIVIDER_HEIGHT : 0
       return sum + rows + footer + divider
     }, 0)
-  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, MENU_MAX_WIDTH, estimatedHeight)
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, MENU_MAX_WIDTH, estimatedHeight, rotation)
   const align = alignOverride ?? autoAlign
 
   // Trigger reflects the selected option's own icon only when there's exactly one section and it's

package/src/SkiaGate.tsx

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,9 @@
+// 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'

package/src/TriggerGaugeHost.tsx

@@ -1,26 +1,18 @@
-import { lazy, Suspense } from 'react'
-
-import { loadSkiaWeb } from './loadSkiaWeb'
+import { SkiaGate } from './SkiaGate'
 import { TriggerGaugeProps } from './TriggerGauge'
 
 // TriggerGauge.tsx's `Skia` import binds to global.CanvasKit at module-evaluation time, which on web
-// only exists once loadSkiaWeb()'s WASM fetch resolves (see that file's own comment) — 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) — `lazy()` is what actually defers the real import to
-// runtime, after loadSkiaWeb() resolves. Always lazy, on every platform, rather than a native/web
-// branch here, purely to keep this file simple — loadSkiaWeb() itself already resolves immediately
-// on native (see its own file split), so the Suspense boundary there just clears on the next tick,
-// not a perceptible delay. The Suspense fallback renders nothing, so a
-// consumer's trigger icon still shows immediately and the gauge ring just pops in a beat later.
-const LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import('./TriggerGauge').then((m) => ({ default: m.TriggerGauge }))))
+// 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 }))
 
 export default function TriggerGaugeHost(props: TriggerGaugeProps) {
-  return (
-    <Suspense fallback={null}>
-      <LazyTriggerGauge {...props} />
-    </Suspense>
-  )
+  return <SkiaGate getComponent={getTriggerGauge} componentProps={props} />
 }

package/src/index.ts

@@ -15,16 +15,17 @@ export { PressAwayOverlay } from './PressAwayOverlay'
 export { ReadyButton } from './ReadyButton'
 export { type MenuOption, type MenuSection, type MultiSelectSection, SectionedDropdown, type SingleSelectSection } from './SectionedDropdown'
 export { SharedActionBand } from './SharedActionBand'
+export { SkiaGate, type SkiaGateProps } from './SkiaGate'
 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 Suspense/lazy-load
-// 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 lazy dynamic import too, it defeats TriggerGaugeHost's own
-// deferred loading for every consumer, on every platform, not just the ones reaching for the raw
-// component. TriggerGaugeHost is the only supported way to render this.
+// though a native-only consumer could safely skip TriggerGaugeHost's SkiaGate 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
+// every consumer, on every platform, not just the ones reaching for the raw component.
+// TriggerGaugeHost is the only supported way to render this.
 export type { TriggerGaugeProps } from './TriggerGauge'
 export { default as TriggerGaugeHost } from './TriggerGaugeHost'
-export { type PopoverAlign, type PopoverVerticalAlign, useAutoAlign } from './useAutoAlign'
+export { type PopoverAlign, type PopoverRotation, type PopoverVerticalAlign, useAutoAlign } from './useAutoAlign'
 export { type PopoverHost, usePopoverHost } from './usePopoverHost'

package/src/useAutoAlign.ts

@@ -1,3 +1,4 @@
+import { type ViewRotation } from '@tastic/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useWindowDimensions, View } from 'react-native'
 
@@ -7,15 +8,55 @@ const EDGE_MARGIN = 12
 
 export type PopoverAlign = 'left' | 'right' | 'center'
 export type PopoverVerticalAlign = 'below' | 'above'
+// Same set of values as @tastic/core's own ViewRotation — re-exported under this package's existing
+// name rather than switching every call site to import ViewRotation directly, since "popover
+// rotation" reads clearer at these call sites than the more general core name.
+export type PopoverRotation = ViewRotation
 
-// Measures a trigger's actual on-screen position (via measureInWindow, which resolves post-
-// transform — this is what makes it correct even for a trigger sitting inside a 180°-rotated zone,
-// unlike a plain onLayout which only ever reports pre-transform local coordinates) and picks
-// whichever alignment keeps a popover of `contentWidth`×`contentHeight` from overflowing a screen
-// edge — horizontally (left/right/center, preferring center) and vertically (below/above,
-// preferring below — the usual case — but flipping to above when the trigger doesn't have enough
-// room underneath it, which is what a short landscape screen with the trigger row near the top
-// actually runs into).
+// Reflects a rect from the PRE-rotation layout frame measureInWindow actually reports (see
+// useAutoAlign's own comment below for why that's what it reports, not the post-rotation visual
+// position) into its true, post-rotation position — needed for a trigger sitting inside a
+// @tastic/split-screen-style FakeLandscapeView, or any other ancestor rotated the same way (a bare
+// CSS `transform: rotate()`, not an actual OS-level orientation change).
+//
+// The pivot is always the window's own center, for every rotation amount: FakeLandscapeView (and
+// this package's own doc-recommended equivalent for a caller that rolls its own) always centers its
+// rotated container — width/height swapped first for ±90°, unchanged for 180° — within the original,
+// un-rotated screen bounds before applying the CSS rotation, so the transform's own effective pivot
+// lands at that shared center regardless of which of the three non-zero rotations it is.
+export function rotateRect(x: number, y: number, width: number, height: number, rotation: PopoverRotation, windowWidth: number, windowHeight: number): { x: number; y: number; width: number; height: number } {
+  if (rotation === 0) return { x, y, width, height }
+  const cx = windowWidth / 2
+  const cy = windowHeight / 2
+  const dx = x + width / 2 - cx
+  const dy = y + height / 2 - cy
+  // Clockwise-positive about (cx, cy) — matches CSS's own rotate(deg) sign convention, which is
+  // where every rotation value this ever receives ultimately comes from (getViewRotation and
+  // FakeLandscapeView both already commit to that same convention).
+  const [newDx, newDy, newWidth, newHeight] = rotation === 180 ? [-dx, -dy, width, height] : rotation === 90 ? [-dy, dx, height, width] : [dy, -dx, height, width]
+  return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight }
+}
+
+// Measures a trigger's on-screen position (via measureInWindow) and picks whichever alignment keeps
+// a popover of `contentWidth`×`contentHeight` from overflowing a screen edge — horizontally
+// (left/right/center, preferring center) and vertically (below/above, preferring below — the usual
+// case — but flipping to above when the trigger doesn't have enough room underneath it, which is
+// what a short landscape screen with the trigger row near the top actually runs into).
+//
+// measureInWindow resolves the trigger's PRE-transform layout frame — confirmed against a real
+// rotated screen, not just reasoned about: an earlier version of this comment claimed the opposite
+// (that measureInWindow "resolves post-transform"), which is what let a real bug ship unnoticed,
+// since nothing here ever actually exercised a rotated case to catch that claim being wrong (see
+// this file's own test suite, which now does). A plain `onLayout` reports the same pre-transform
+// frame — there is no plain RN layout API that reports a transformed descendant's true visual
+// position, which is exactly why `rotation` below exists: it's the one piece of information this
+// hook cannot recover from measurement alone, since Yoga's layout pass and a CSS `transform` are
+// deliberately independent stages, so the caller has to supply it.
+//
+// `rotation` defaults to 0 (measureInWindow's raw result used as-is) — every existing caller that
+// never sits inside a rotated ancestor keeps behaving identically; only a caller that both (a) can
+// end up inside a @tastic/split-screen-style rotated zone and (b) knows which rotation is currently
+// live needs to pass it (see SectionedDropdown's own `rotation` prop for the wiring this expects).
 //
 // Also returns `maxHeight`: the actual room available in whichever vertical direction got picked.
 // Flipping above-vs-below only ever picks the *better* side — on a screen short enough that neither
@@ -27,7 +68,7 @@ export type PopoverVerticalAlign = 'below' | 'above'
 //
 // Re-measures on every open (not continuously) — the trigger's screen position can't change while
 // its own popover is showing anyway, so there's nothing to gain from tracking it beyond that.
-export function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number) {
+export function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number, rotation: PopoverRotation = 0) {
   const triggerRef = useRef<View>(null)
   const { width: windowWidth, height: windowHeight } = useWindowDimensions()
   const [align, setAlign] = useState<PopoverAlign>('center')
@@ -52,7 +93,8 @@ export function useAutoAlign(open: boolean, contentWidth: number, contentHeight:
   }
 
   const measure = useCallback(() => {
-    triggerRef.current?.measureInWindow((x, y, triggerWidth, triggerHeight) => {
+    triggerRef.current?.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
+      const { x, y, width: triggerWidth, height: triggerHeight } = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight)
       const centerX = x + triggerWidth / 2
       const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN
       const overflowsLeft = centerX - contentWidth / 2 < EDGE_MARGIN
@@ -72,14 +114,14 @@ export function useAutoAlign(open: boolean, contentWidth: number, contentHeight:
       setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0))
       setMeasured(true)
     })
-  }, [contentWidth, contentHeight, windowWidth, windowHeight])
+  }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation])
 
   // Re-measures whenever `open` flips true, and also if `measure` itself changes identity (i.e.
-  // contentWidth/contentHeight/windowWidth/windowHeight changed) while already open — e.g. a live
-  // window resize — so it never goes stale while the popover is actually showing. `measured` only
-  // resets on a genuine (re)open, via the render-phase check above — not here on every re-measure,
-  // so an already-visible popover never flickers hidden again just because the window resized
-  // under it.
+  // contentWidth/contentHeight/windowWidth/windowHeight/rotation changed) while already open — e.g.
+  // a live window resize, or the device being physically turned while the popover is showing — so it
+  // never goes stale while the popover is actually showing. `measured` only resets on a genuine
+  // (re)open, via the render-phase check above — not here on every re-measure, so an already-visible
+  // popover never flickers hidden again just because the window resized (or rotated) under it.
   useEffect(() => {
     if (open) measure()
   }, [open, measure])