@tastic/hud 0.6.0 → 0.8.1

package/README.md

@@ -5,10 +5,11 @@ dropdowns, color pickers, gauges, ready buttons, and dialogs. Every interactive
 to one player's own zone on a shared screen, so it never blocks the rest of the screen the way a
 full-screen modal would.
 
-Sibling to [`@tastic/split-screen`](https://github.com/jayrdeaton/react-native-split-screen), the
-two-player layout/orientation engine this kit's components are built to render correctly inside —
-in particular, `PopoverBody`'s positioning survives an ancestor's 180° rotation. Neither package
-depends on the other; they compose at your own screen.
+Depends on [`@tastic/core`](https://github.com/jayrdeaton/react-native-game-core) for live device-
+rotation tracking (see Rotation below) — every popover/dialog here reads it directly, so it stays
+legible even rotated 180° inside a [`@tastic/split-screen`](https://github.com/jayrdeaton/react-native-split-screen)
+zone (that package's own two-player layout engine is what actually owns the rotated zone; this kit
+and split-screen don't depend on each other, they just both sit on `@tastic/core`).
 
 ## Why not a modal?
 
@@ -39,6 +40,34 @@ corner of the screen.
 - **`ReadyButton`** — a per-player or standalone ready toggle.
 - **`PressAwayOverlay`** — an invisible full-bleed tap-catcher for press-away-to-close. This is the
   one piece that needs care in a split-screen layout — see below.
+- **`BaseSettingsDialog`** / **`BaseStatsScreen`** / **`ConfirmDialog`** — shared shells for the
+  settings sheet, an achievements/stats screen, and a plain confirm-or-cancel dialog, each factored
+  out after being independently copied into several games. See Rotation below for how each of these
+  (plus `SectionedDropdown`/`InlineColorPicker`) handles rotating inside a `@tastic/split-screen`
+  zone.
+
+## Rotation
+
+`SectionedDropdown`, `InlineColorPicker`, `BaseSettingsDialog`, and `BaseStatsScreen` all read the
+device's live rotation themselves, via [`@tastic/core`](https://github.com/jayrdeaton/react-native-game-core)'s
+`useRotation()` — you don't need to pass anything for a popover/dialog to read correctly no matter
+which way the phone is held, as long as your app mounts `@tastic/core`'s `OrientationProvider`
+(or `@tastic/split-screen`'s `AccelerometerOrientationProvider`, a compat alias for the same thing)
+somewhere above it.
+
+Each of the four also still accepts an explicit `rotation` prop, which overrides the ambient read
+when present — reach for it only when a specific instance genuinely needs to differ from the live
+app-wide rotation (e.g. a fading, lagged `panelLayout` value mid-transition, rather than the raw
+live reading — see `@tastic/split-screen`'s own `DualZoneLayout` docs for why that lag exists).
+
+This matters more than it might look: `useAutoAlign` (what `SectionedDropdown`/`InlineColorPicker`
+use to pick left/right/above/below) measures a trigger via `measureInWindow`, which reports the
+trigger's **pre-transform** layout position — confirmed against a real rotated screen, not just
+reasoned about. Inside a `FakeLandscapeView`-rotated zone (or any other ancestor rotated the same
+way — a bare CSS `transform: rotate()`, not a real OS-level orientation change), that pre-transform
+position can be nowhere near where the trigger actually is on screen, which is exactly the bug this
+rotation-awareness fixes: without it, a popover can pick an alignment for where its trigger *used to
+be* before rotating, clipping off the edge it's actually now near instead of the one it was near.
 
 ## The press-away pattern (read this before wiring it up)
 
@@ -89,9 +118,19 @@ your shared/global settings) gets the whole-screen overlay; every other player's
 must stay mounted (shielding, if not actually closing anything) whenever *any* host with broader
 reach is open — not just their own.
 
-## Install (local dev via yalc)
+## Install
 
-Not published to the public npm registry yet.
+Published to the public npm registry as `@tastic/hud`. The self-reading rotation behavior described
+above is newer than the latest published version, though — for now it only exists in local,
+`yalc`-linked builds (see below) until it's published for real; the published version's `rotation`
+prop on these four components defaults to a plain `0` rather than reading `@tastic/core`'s
+`useRotation()`.
+
+```bash
+npm install @tastic/hud
+```
+
+### Local dev via yalc (for unpublished changes)
 
 ```bash
 cd react-native-hud
@@ -110,5 +149,6 @@ linked consumer at once.
 
 `react`, `react-native`, `react-native-paper` (`Icon`, `IconButton`, `Text`), `@rific/auto-paper`
 (`defaultColors`, `getContrastColor`, `getBlendedColor`, `SeedColor`), `@rific/feedback-press`
-(`IconButton`, `TouchableRipple`) — none of these are bundled, so use whatever versions your app
-already has.
+(`IconButton`, `TouchableRipple`), [`@tastic/core`](https://github.com/jayrdeaton/react-native-game-core)
+(>=0.1.0 — `useRotation()`, see Rotation above) — none of these are bundled, so use whatever
+versions your app already has.

package/dist/SkiaGate.d.mts

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

@@ -0,0 +1,13 @@
+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.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/SkiaGate.tsx
+var SkiaGate_exports = {};
+__export(SkiaGate_exports, {
+  SkiaGate: () => SkiaGate
+});
+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 });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SkiaGate
+});

package/dist/SkiaGate.mjs

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

package/dist/chunk-XEOFR236.mjs

@@ -0,0 +1,21 @@
+// 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/dist/index.d.mts

@@ -1,7 +1,9 @@
 import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
 import { StyleProp, ViewStyle, View } from 'react-native';
+import { ViewRotation } from '@tastic/core';
 import { SeedColor } from '@rific/auto-paper';
+export { SkiaGate, SkiaGateProps } from './SkiaGate.mjs';
 
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
 interface Props$c {
@@ -35,7 +37,7 @@ interface BaseSettingsDialogProps {
     onUpdateError?: (message: string) => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$b {
@@ -59,7 +61,21 @@ interface Props$b {
     accentColor?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$b): react.JSX.Element;
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$b): react.JSX.Element;
+
+interface ConfirmDialogProps {
+    visible: boolean;
+    title: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    rotation?: number;
+    icon?: string;
+    destructive?: boolean;
+}
+declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
 
 interface Props$a {
     maxContentWidth?: number;
@@ -70,7 +86,86 @@ interface Props$a {
 }
 declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$a): react.JSX.Element;
 
+type PopoverAlign = 'left' | 'right' | 'center';
+type PopoverVerticalAlign = 'below' | 'above';
+type PopoverRotation = ViewRotation;
+declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): {
+    align: PopoverAlign;
+    maxHeight: number;
+    measured: boolean;
+    triggerRef: react.RefObject<View | null>;
+    verticalAlign: PopoverVerticalAlign;
+};
+
+interface PopoverHost {
+    openId: string | null;
+    toggle: (id: string) => void;
+    close: () => void;
+}
+declare function usePopoverHost(): PopoverHost;
+
+interface MenuOption<T extends string | number> {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: string;
+    iconSize?: number;
+}
+interface SingleSelectSection<T extends string | number> {
+    kind: 'single';
+    id: string;
+    options: MenuOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    takenValue?: T;
+}
+interface MultiSelectSection<T extends string | number> {
+    kind: 'multi';
+    id: string;
+    options: MenuOption<T>[];
+    value: T[];
+    onChange: (value: T[]) => void;
+    allClear?: boolean;
+}
+type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
 interface Props$9 {
+    id: string;
+    host: PopoverHost;
+    icon: string;
+    accessibilityLabel: string;
+    sections: MenuSection[];
+    accentColor: string;
+    mutedColor: string;
+    onAccentColor?: string;
+    dark: boolean;
+    align?: 'left' | 'right' | 'center';
+    rotation?: PopoverRotation;
+    autoDismiss?: boolean;
+    labelFontFamily?: string;
+    allClearLabels?: {
+        all: string;
+        clear: string;
+    };
+}
+declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, rotation: rotationOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$9): react.JSX.Element;
+
+interface ControlSchemePickerProps<T extends string | number> {
+    id: string;
+    host: PopoverHost;
+    value: T;
+    onChange: (value: T) => void;
+    options: MenuOption<T>[];
+    takenValue?: T;
+    accentColor: string;
+    mutedColor: string;
+    onAccentColor?: string;
+    dark: boolean;
+    align?: 'left' | 'right' | 'center';
+    labelFontFamily?: string;
+}
+declare function ControlSchemePicker<T extends string | number>({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, labelFontFamily }: ControlSchemePickerProps<T>): react.JSX.Element | null;
+
+interface Props$8 {
     onBack: () => void;
     onSettings: () => void;
     fg: string;
@@ -79,19 +174,26 @@ interface Props$9 {
         left: number;
         right: number;
     };
+    backIcon?: string;
+    backLabel?: string;
 }
-declare function CornerActionButtons({ onBack, onSettings, fg, insets }: Props$9): react.JSX.Element;
+declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel }: Props$8): react.JSX.Element;
 
-declare const MONO_FONT: string;
-
-interface PopoverHost {
-    openId: string | null;
-    toggle: (id: string) => void;
-    close: () => void;
+type OrientationMode = 'faceToFace' | 'sideBySide';
+interface CornerStatusBadgeSeat {
+    icon?: string;
 }
-declare function usePopoverHost(): PopoverHost;
+interface CornerStatusBadgesProps {
+    orientationMode: OrientationMode;
+    p1OnRight: boolean;
+    p1?: CornerStatusBadgeSeat;
+    p2?: CornerStatusBadgeSeat;
+}
+declare function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }: CornerStatusBadgesProps): react.JSX.Element;
 
-interface Props$8 {
+declare const MONO_FONT: string;
+
+interface Props$7 {
     id: string;
     host: PopoverHost;
     value: string;
@@ -102,6 +204,7 @@ interface Props$8 {
     allowSwapTaken?: boolean;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    rotation?: PopoverRotation;
     icon?: string;
     tag?: string;
     labelFontFamily?: string;
@@ -109,17 +212,7 @@ interface Props$8 {
     columns?: number;
     size?: number;
 }
-declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$8): react.JSX.Element;
-
-type PopoverAlign = 'left' | 'right' | 'center';
-type PopoverVerticalAlign = 'below' | 'above';
-declare function useAutoAlign(open: boolean, contentWidth: number, contentHeight: number): {
-    align: PopoverAlign;
-    maxHeight: number;
-    measured: boolean;
-    triggerRef: react.RefObject<View | null>;
-    verticalAlign: PopoverVerticalAlign;
-};
+declare function InlineColorPicker({ id, host, value, onChange, previewValue, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, rotation: rotationOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$7): react.JSX.Element;
 
 declare const LABELED_DROPDOWN_POPOVER_WIDTH = 180;
 declare function getLabeledDropdownContentHeight(optionCount: number): number;
@@ -135,7 +228,7 @@ interface AlignResult {
     measured: boolean;
     triggerRef: RefObject<View | null>;
 }
-interface Props$7<T extends string> {
+interface Props$6<T extends string> {
     id: string;
     host: PopoverHost;
     options: LabeledDropdownOption<T>[];
@@ -146,11 +239,11 @@ interface Props$7<T extends string> {
     align?: 'left' | 'right' | 'center';
     alignOverride?: AlignResult;
 }
-declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$7<T>): react.JSX.Element;
+declare function LabeledDropdown<T extends string>({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }: Props$6<T>): react.JSX.Element;
 
 declare function loadSkiaWeb(): Promise<void>;
 
-interface Props$6 {
+interface Props$5 {
     visible: boolean;
     children: ReactNode;
     align?: 'left' | 'right' | 'center';
@@ -160,67 +253,23 @@ interface Props$6 {
     caretBorderWidth?: number;
     triggerSize?: number;
 }
-declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$6): react.JSX.Element | null;
+declare function PopoverBody({ visible, children, align, verticalAlign, caretColor, caretBorderColor, caretBorderWidth, triggerSize }: Props$5): react.JSX.Element | null;
 
-interface Props$5 {
+interface Props$4 {
     active: boolean;
     onPress: () => void;
     style?: StyleProp<ViewStyle>;
 }
-declare function PressAwayOverlay({ active, onPress, style }: Props$5): react.JSX.Element | null;
+declare function PressAwayOverlay({ active, onPress, style }: Props$4): react.JSX.Element | null;
 
-interface Props$4 {
+interface Props$3 {
     color: string;
     ready: boolean;
     onToggleReady: () => void;
     style?: StyleProp<ViewStyle>;
     labelFontFamily?: string;
 }
-declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$4): react.JSX.Element;
-
-interface MenuOption<T extends string | number> {
-    value: T;
-    label: string;
-    description?: string;
-    icon?: string;
-    iconSize?: number;
-}
-interface SingleSelectSection<T extends string | number> {
-    kind: 'single';
-    id: string;
-    options: MenuOption<T>[];
-    value: T;
-    onChange: (value: T) => void;
-    takenValue?: T;
-}
-interface MultiSelectSection<T extends string | number> {
-    kind: 'multi';
-    id: string;
-    options: MenuOption<T>[];
-    value: T[];
-    onChange: (value: T[]) => void;
-    allClear?: boolean;
-}
-type MenuSection = SingleSelectSection<any> | MultiSelectSection<any>;
-interface Props$3 {
-    id: string;
-    host: PopoverHost;
-    icon: string;
-    accessibilityLabel: string;
-    sections: MenuSection[];
-    accentColor: string;
-    mutedColor: string;
-    onAccentColor?: string;
-    dark: boolean;
-    align?: 'left' | 'right' | 'center';
-    autoDismiss?: boolean;
-    labelFontFamily?: string;
-    allClearLabels?: {
-        all: string;
-        clear: string;
-    };
-}
-declare function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss, labelFontFamily, allClearLabels }: Props$3): react.JSX.Element;
+declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$3): react.JSX.Element;
 
 interface Props$2 {
     onBack: () => void;
@@ -262,4 +311,4 @@ interface TriggerGaugeProps {
 
 declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
 
-export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ContentGutter, CornerActionButtons, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };
+export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost };