@tastic/hud 0.7.0 → 0.8.1

package/dist/index.mjs

@@ -1,3 +1,7 @@
+import {
+  SkiaGate
+} from "./chunk-XEOFR236.mjs";
+
 // src/AchievementRow.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
 import { StyleSheet, View } from "react-native";
@@ -70,7 +74,7 @@ var styles = StyleSheet.create({
 import { AutoAppearancePicker, Dialog, useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from "@rific/feedback-press";
 import { useUpdater } from "@rific/updater";
-import { useIsTouchPrimaryDevice } from "@tastic/core";
+import { useIsTouchPrimaryDevice, useRotation } from "@tastic/core";
 import { useContext, useState } from "react";
 import { Platform, ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { Icon as Icon2, Portal, Text as Text2 } from "react-native-paper";
@@ -78,8 +82,10 @@ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ jsx2(View2, { style: [styles2.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx2(Icon2, { source, size: 18, color }) });
 }
-function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
   const { dark, colors } = useAutoPaperTheme2();
+  const ambientRotation = useRotation();
+  const rotation = rotationOverride ?? ambientRotation;
   const isTouchPrimary = useIsTouchPrimaryDevice();
   const { settings: hapticSettings, set: setHapticSettings } = useHapticSettings();
   const { settings: soundSettings, set: setSoundSettings } = useSoundSettings();
@@ -271,12 +277,15 @@ var styles2 = StyleSheet2.create({
 // src/BaseStatsScreen.tsx
 import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { Button as Button2, IconButton } from "@rific/feedback-press";
+import { useRotation as useRotation2 } from "@tastic/core";
 import { useState as useState2 } from "react";
 import { ScrollView as ScrollView2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Icon as Icon3, Portal as Portal2, Text as Text3 } from "react-native-paper";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-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 }) {
+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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }) {
   const { dark, colors } = useAutoPaperTheme3();
+  const ambientRotation = useRotation2();
+  const rotation = rotationOverride ?? ambientRotation;
   const [confirmResetVisible, setConfirmResetVisible] = useState2(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -459,6 +468,7 @@ import { Platform as Platform3 } from "react-native";
 // src/SectionedDropdown.tsx
 import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
 import { IconButton as IconButton2, TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
+import { useRotation as useRotation3 } from "@tastic/core";
 import { ScrollView as ScrollView3, StyleSheet as StyleSheet7, View as View8 } from "react-native";
 import { Icon as Icon5, Text as Text5 } from "react-native-paper";
 
@@ -532,26 +542,27 @@ var styles6 = StyleSheet6.create({
   }
 });
 
-// src/TriggerGaugeHost.tsx
-import { lazy, Suspense } from "react";
-
-// src/loadSkiaWeb.ts
-function loadSkiaWeb() {
-  return Promise.resolve();
-}
-
 // src/TriggerGaugeHost.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-2OJOOF6I.mjs").then((m) => ({ default: m.TriggerGauge }))));
+var getTriggerGauge = () => import("./TriggerGauge-2OJOOF6I.mjs").then((mod) => ({ default: mod.TriggerGauge }));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(LazyTriggerGauge, { ...props }) });
+  return /* @__PURE__ */ jsx7(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
 }
 
 // src/useAutoAlign.ts
 import { useCallback, useEffect, useRef, useState as useState3 } from "react";
 import { useWindowDimensions as useWindowDimensions2 } from "react-native";
 var EDGE_MARGIN = 12;
-function useAutoAlign(open, contentWidth, contentHeight) {
+function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
+  if (rotation === 0) return { x, y, width, height };
+  const cx = windowWidth / 2;
+  const cy = windowHeight / 2;
+  const dx = x + width / 2 - cx;
+  const dy = y + height / 2 - cy;
+  const [newDx, newDy, newWidth, newHeight] = rotation === 180 ? [-dx, -dy, width, height] : rotation === 90 ? [-dy, dx, height, width] : [dy, -dx, height, width];
+  return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
+}
+function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
   const triggerRef = useRef(null);
   const { width: windowWidth, height: windowHeight } = useWindowDimensions2();
   const [align, setAlign] = useState3("center");
@@ -564,7 +575,8 @@ function useAutoAlign(open, contentWidth, contentHeight) {
     if (open) setMeasured(false);
   }
   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;
@@ -578,7 +590,7 @@ function useAutoAlign(open, contentWidth, contentHeight) {
       setMaxHeight(Math.max(above ? roomAbove : roomBelow, 0));
       setMeasured(true);
     });
-  }, [contentWidth, contentHeight, windowWidth, windowHeight]);
+  }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
   useEffect(() => {
     if (open) measure();
   }, [open, measure]);
@@ -597,7 +609,9 @@ var MENU_ITEM_HEIGHT = 40;
 var MENU_ITEM_HEIGHT_WITH_DESCRIPTION = 58;
 var MENU_DIVIDER_HEIGHT = 9;
 var MENU_VERTICAL_PADDING = 12;
-function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
+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" } }) {
+  const ambientRotation = useRotation3();
+  const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const menuBorderColor = getBlendedColor(mutedColor, menuBg, 0.5);
   const resolvedOnAccentColor = onAccentColor ?? getColorRoles(accentColor, menuBg).onColor;
@@ -609,7 +623,7 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     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;
   const onlySection = sections.length === 1 ? sections[0] : null;
   const selectedOption = onlySection?.kind === "single" ? onlySection.options.find((o) => o.value === onlySection.value) : void 0;
@@ -841,7 +855,7 @@ var styles9 = StyleSheet9.create({
 // src/InlineColorPicker.tsx
 import { defaultColors, getContrastColor } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
-import { clamp } from "@tastic/core";
+import { clamp, useRotation as useRotation4 } from "@tastic/core";
 import { ScrollView as ScrollView4, StyleSheet as StyleSheet10, useWindowDimensions as useWindowDimensions3, View as View10 } from "react-native";
 import { Icon as Icon7, Text as Text6 } from "react-native-paper";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -857,7 +871,9 @@ var SCREEN_MARGIN = 40;
 function widthForColumns(columns) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
 }
-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 }) {
+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 }) {
+  const ambientRotation = useRotation4();
+  const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = useWindowDimensions3();
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
@@ -866,7 +882,7 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
   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) => hex);
   const displayValue = displayFor(value);
@@ -1062,6 +1078,11 @@ var styles11 = StyleSheet11.create({
   }
 });
 
+// src/loadSkiaWeb.ts
+function loadSkiaWeb() {
+  return Promise.resolve();
+}
+
 // src/PressAwayOverlay.tsx
 import { Pressable, StyleSheet as StyleSheet12 } from "react-native";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -1207,6 +1228,7 @@ export {
   ReadyButton,
   SectionedDropdown,
   SharedActionBand,
+  SkiaGate,
   StatRow,
   StatSection,
   TriggerGaugeHost,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "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",
@@ -33,6 +33,13 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/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"
     }
   },
   "main": "dist/index.js",
@@ -63,14 +70,14 @@
   },
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@infinitetoken/eslint-config": "0.2.0",
-    "@infinitetoken/jest-config": "^0.2.0",
+    "@infinitetoken/eslint-config": "^0.2.0",
+    "@infinitetoken/jest-config": "^0.3.0",
     "@infinitetoken/tsconfig": "^0.4.1",
     "@rific/auto-paper": "^0.10.3",
     "@rific/feedback-press": "^0.10.8",
-    "@rific/updater": "^0.4.2",
+    "@rific/updater": "^0.6.0",
     "@shopify/react-native-skia": "^2.6.2",
-    "@tastic/core": "^0.2.0",
+    "@tastic/core": "^0.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -94,7 +101,7 @@
     "@rific/feedback-press": ">=0.10.0",
     "@rific/updater": ">=0.4.0",
     "@shopify/react-native-skia": ">=1.5.0",
-    "@tastic/core": ">=0.1.0",
+    "@tastic/core": ">=0.3.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",
     "react-native-paper": ">=5.0.0",

package/src/BaseSettingsDialog.tsx

@@ -1,7 +1,7 @@
 import { AutoAppearancePicker, Dialog, useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from '@rific/feedback-press'
 import { useUpdater } from '@rific/updater'
-import { useIsTouchPrimaryDevice } from '@tastic/core'
+import { useIsTouchPrimaryDevice, useRotation } from '@tastic/core'
 import { ReactNode, useContext, useState } from 'react'
 import { Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
@@ -26,10 +26,11 @@ function SettingIcon({ source, color, containerColor }: SettingIconProps) {
 export interface BaseSettingsDialogProps {
   visible: boolean
   onDismiss: () => void
-  // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) — this is a centered,
-  // app-wide modal with no per-player zone to match (unlike an in-game round-over dialog), so it
-  // just rotates its own content in place; defaults to 0 for a caller that doesn't track one (a
-  // game with no face-to-face two-player mode has nothing to stay consistent with anyway).
+  // Explicit override for the live physical-hold rotation (see @tastic/core's useRotation) — this is
+  // a centered, app-wide modal with no per-player zone to match (unlike an in-game round-over
+  // dialog), so it just rotates its own content in place. Defaults to a live ambient read via
+  // useRotation() when omitted; pass this only when a caller's own reading needs to differ from the
+  // ambient one (rare — most callers should simply omit it).
   rotation?: number
   // Each app's own OTA version (e.g. release.otaVersion) — not something this package can read
   // itself, since every consuming app tracks its own release.ts independently. Accepts a number too
@@ -76,8 +77,10 @@ export interface BaseSettingsDialogProps {
 // is the seam for whatever isn't shared: a game with its own board/difficulty settings (or a stats
 // backup flow, or anything else genuinely specific to it) renders those below Appearance, not by
 // forking this component.
-export function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }: BaseSettingsDialogProps) {
+export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }: BaseSettingsDialogProps) {
   const { dark, colors } = useAutoPaperTheme()
+  const ambientRotation = useRotation()
+  const rotation = rotationOverride ?? ambientRotation
   // Also gates the Lock Orientation row below (alongside showLockOrientation itself) — true
   // unconditionally on native (see the hook's own doc), so this only actually excludes a
   // desktop/laptop browser, where a mouse-driven window has no physical orientation to lock

package/src/BaseStatsScreen.tsx

@@ -1,5 +1,6 @@
 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'
@@ -10,12 +11,12 @@ 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 overlay, 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
@@ -67,8 +68,10 @@ interface Props {
 // 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) {
+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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props) {
   const { dark, colors } = useAutoPaperTheme()
+  const ambientRotation = useRotation()
+  const rotation = rotationOverride ?? ambientRotation
   const [confirmResetVisible, setConfirmResetVisible] = useState(false)
   const showReset = !!onReset
 

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'