@tastic/hud 0.22.0 → 0.24.0

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.22.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",
@@ -88,7 +88,7 @@
     "@infinitetoken/jest-config": "^0.5.2",
     "@infinitetoken/tsconfig": "^0.6.0",
     "@rific/auto-paper": "^0.13.3",
-    "@rific/core": "^0.3.1",
+    "@rific/core": "^0.4.0",
     "@rific/feedback-press": "^0.13.0",
     "@rific/updater": "^0.7.1",
     "@shopify/react-native-skia": "^2.14.0",
@@ -117,6 +117,7 @@
   },
   "peerDependencies": {
     "@rific/auto-paper": "^0.13.0",
+    "@rific/core": ">=0.4.0",
     "@rific/feedback-press": ">=0.10.2",
     "@rific/updater": ">=0.4.0",
     "@shopify/react-native-skia": ">=2.6.0",

package/src/BaseSettingsDialog.tsx

@@ -1,4 +1,5 @@
 import { AutoAppearancePicker, Dialog, FadingScrollView, useAutoPaperTheme, useBlurModule, useThemeSettings } from '@rific/auto-paper'
+import { useExpoKeepAwake, useKeepAwakeSettings } from '@rific/core'
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from '@rific/feedback-press'
 import { useUpdater } from '@rific/updater'
 import { rotateInsets, useIsTouchPrimaryDevice, useRotation, type ViewRotation } from '@tastic/core'
@@ -56,13 +57,7 @@ export interface BaseSettingsDialogProps {
   // @tastic/edge-guard's own swizzle is a no-op on every other platform.
   deferBottomEdgeGestures?: boolean
   onDeferBottomEdgeGestures?: (value: boolean) => void
-  // Optional, and always passed as a pair - omit both for an app that doesn't keep the screen awake.
-  // This dialog only shows and reports the toggle; the app itself keeps the screen on while it's set
-  // (expo-keep-awake on its match screen), so this package needs no native dependency for it. Shown
-  // on the same devices as Lock Orientation (see isTouchPrimary below): a desktop/laptop browser
-  // stays awake on its own while someone is playing with its keyboard or mouse.
-  keepAwake?: boolean
-  onKeepAwakeChange?: (value: boolean) => void
+  // No Keep Awake props: that row reads @rific/core's Keep Awake setting itself (see showKeepAwake).
   // Explicit opt-outs for the rows that pull their own state straight from @rific/feedback-press,
   // @rific/auto-paper, and @rific/updater's own shared contexts/hooks rather than from anything the
   // caller passes in - unlike Lock Orientation/Edge Guard above, there's no "value" to omit for
@@ -97,7 +92,7 @@ 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: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps) {
+export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps) {
   const { colors } = useAutoPaperTheme()
   const ambientRotation = useRotation()
   const rotation = rotationOverride ?? ambientRotation
@@ -113,7 +108,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   // Dialog's own 32pt padding is simply overhung.
   const insets = rotateInsets(useSafeAreaInsets(), rotation)
   const sheetWidth = Math.min(overlayStyles.card.maxWidth, (turned ? window.height : window.width) - 2 * Math.max(insets.left, insets.right, SHEET_GUTTER))
-  // Also gates the Lock Orientation and Keep Awake rows below (alongside their own props) - true
+  // Also gates the Lock Orientation and Keep Awake rows below (alongside their own conditions) - 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
   // against; a resize there would just make the setting silently stop reflowing the layout instead
@@ -121,6 +116,8 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   const isTouchPrimary = useIsTouchPrimaryDevice()
   const { settings: hapticSettings, set: setHapticSettings } = useHapticSettings()
   const { settings: soundSettings, set: setSoundSettings } = useSoundSettings()
+  const { settings: keepAwakeSettings, set: setKeepAwakeSettings } = useKeepAwakeSettings()
+  const expoKeepAwake = useExpoKeepAwake()
   // Sound/Haptics toggle themselves: the ripple's automatic press feedback fires on onPressIn,
   // before onPress applies the toggle, so it reflects the OLD enabled value - backwards from what
   // a settings toggle should confirm (turning off would click/buzz, turning on would go silent).
@@ -160,7 +157,10 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
 
   const showLockOrientation = isTouchPrimary && lockOrientation !== undefined && onLockOrientationChange !== undefined
   const showEdgeGuard = Platform.OS === 'ios' && deferBottomEdgeGestures !== undefined && onDeferBottomEdgeGestures !== undefined
-  const showKeepAwake = isTouchPrimary && keepAwake !== undefined && onKeepAwakeChange !== undefined
+  // Only in an app that opted in by handing expo-keep-awake to @rific/core's KeepAwakeProvider:
+  // without the module the setting would do nothing. On the same devices as Lock Orientation, since a
+  // desktop/laptop browser stays awake on its own while someone plays with its keyboard or mouse.
+  const showKeepAwake = isTouchPrimary && expoKeepAwake !== undefined
   const showHaptics = Platform.OS !== 'web' && !hideHaptics
   const showSound = !hideSound
   const showAppearance = !hideAppearance
@@ -243,11 +243,11 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                     </TouchableRipple>
                   )}
 
-                  {/* See the keepAwake prop's own doc: the app does the keeping awake, this only toggles it. */}
+                  {/* The app's own useKeepAwake('game') does the keeping awake; this only flips the shared setting. */}
                   {showKeepAwake && (
-                    <TouchableRipple onPress={() => onKeepAwakeChange!(!keepAwake)} style={styles.toggleButton} accessibilityLabel={`Keep awake ${keepAwake ? 'on' : 'off'}`}>
+                    <TouchableRipple onPress={() => setKeepAwakeSettings({ enabled: !keepAwakeSettings.enabled })} style={styles.toggleButton} accessibilityLabel={`Keep awake ${keepAwakeSettings.enabled ? 'on' : 'off'}`}>
                       <View style={styles.toggleContent}>
-                        <SettingIcon source={keepAwake ? 'eye' : 'eye-closed'} color={keepAwake ? colors.tertiary : colors.onSurfaceVariant} containerColor={keepAwake ? colors.tertiaryContainer : colors.surfaceVariant} />
+                        <SettingIcon source={keepAwakeSettings.enabled ? 'eye' : 'eye-closed'} color={keepAwakeSettings.enabled ? colors.tertiary : colors.onSurfaceVariant} containerColor={keepAwakeSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant} />
                         <View style={styles.flexShrink}>
                           <Text variant='bodyLarge' style={{ color: colors.onSurface }}>
                             Keep Awake

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/chrome/index.ts

@@ -1,8 +1,11 @@
 // The fleet-chrome entry point (`@tastic/hud/chrome`): the shared dialogs, stats screen pieces, corner
-// buttons and style tokens, reachable without the main barrel, for an app that has none of its heavy
-// peers. Hangman is the reason it exists: it has @tastic/core, @rific/updater and the Paper stack, but
-// no Skia, no @tastic/profile and no @tastic/split-screen. Everything reachable from this file must stay
-// free of those three and of the main barrel; @tastic/achievements may appear only as `import type`.
+// buttons, popover primitives, color picker and style tokens, reachable without the main barrel, for an
+// app that has none of its heavy peers. Hangman is the reason it exists: it has @tastic/core,
+// @rific/updater and the Paper stack, but no Skia, no @tastic/profile and no @tastic/split-screen. The
+// popover pieces (PopoverBody, PressAwayOverlay, usePopoverHost, useAutoAlign) and InlineColorPicker are
+// here for @tastic/profile 0.16+, which imports them from this entry instead of the main barrel so its
+// ProfilePicker and ProfilesScreen work in Hangman. Everything reachable from this file must stay free of
+// those three and of the main barrel; @tastic/achievements may appear only as `import type`.
 // AchievementUnlockList is left out on purpose because it value-imports @tastic/profile's ProfileChip.
 // src/__tests__/chromeImports.test.ts walks the real import graph from here and enforces all of it.
 export { AchievementCatalogSection } from '../AchievementCatalogSection'
@@ -15,12 +18,17 @@ export { ContentGutter } from '../ContentGutter'
 export { CornerActionButtons } from '../CornerActionButtons'
 export { COMPACT_DIALOG_HEIGHT, DialogHeader, type DialogHeaderProps, isCompactDialogHeight } from '../DialogHeader'
 export { MONO_FONT } from '../fonts'
+export { getInlineColorPickerContentSize, InlineColorPicker } from '../InlineColorPicker'
 export { overlayActionStyles, overlayStyles } from '../overlayCard'
 export { OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, useOverlayCardColors } from '../OverlaySurface'
+export { PopoverBody } from '../PopoverBody'
+export { PressAwayOverlay } from '../PressAwayOverlay'
 export { RotatedFrame, type RotatedFrameProps } from '../RotatedFrame'
 export { getStaggeredWordDuration, StaggeredWord, type StaggeredWordProps } from '../StaggeredWord'
 export { StatRow } from '../StatRow'
 export { StatSection } from '../StatSection'
 export { UpdateDialog, type UpdateDialogProps } from '../UpdateDialog'
+export { type AlignResult, type PopoverAlign, type PopoverRotation, type PopoverVerticalAlign, useAutoAlign } from '../useAutoAlign'
 export { useCompactDialog } from '../useCompactDialog'
+export { type PopoverHost, usePopoverHost } from '../usePopoverHost'
 export { useWellColors, WELL_SHADOW, type WellColors } from '../wellSurface'

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'