@tastic/hud 0.16.0 → 0.18.0

package/README.md

@@ -76,6 +76,11 @@ corner of the screen.
   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.
+- **`OverlayCard`** / **`OverlayBackdrop`** / **`useOverlayCardColors`** - the card and dim behind
+  `ConfirmDialog` and the how-to-play guide, in the app's own theme colors and blurred when the
+  player's Blur setting allows it. See Overlay cards below.
+- **`DialogHeader`** / **`useCompactDialog`** - the one header every dialog opens with (an icon over
+  a bold title in the theme's primary), and the rule for its compact form. See Overlay cards below.
 
 ## Rotation
 
@@ -235,6 +240,54 @@ export function SettingsDialog({ visible, onDismiss, rotation = 0, settings, set
 }
 ```
 
+## Overlay cards (`OverlayCard`, `OverlayBackdrop`, `useOverlayCardColors`)
+
+`ConfirmDialog` and `HowToPlayDialog` draw their card and the dim behind it with these, and a game's
+own overlay (a result banner, a game-over card) should too, so every card in the fleet looks the same:
+
+```tsx
+import { DialogHeader, OverlayBackdrop, OverlayCard, overlayActionStyles, useCompactDialog, useOverlayCardColors } from '@tastic/hud'
+
+function GameOverCard({ onRestart }: { onRestart: () => void }) {
+  const { fgMuted } = useOverlayCardColors()
+  const { compact, onLayout } = useCompactDialog()
+  return (
+    <OverlayBackdrop onLayout={onLayout}>
+      <OverlayCard accessibilityViewIsModal>
+        <DialogHeader icon='flag-checkered' title='Game Over' compact={compact} />
+        <Text style={{ color: fgMuted }}>Score 42</Text>
+        <View style={overlayActionStyles.actions}>...</View>
+      </OverlayCard>
+    </OverlayBackdrop>
+  )
+}
+```
+
+- **Colors come from the app's theme.** Text is `onSurface` (`fg`) and `onSurfaceVariant` (`fgMuted`),
+  and the dim is the theme's `backdrop`, the same scrim auto-paper's own `Dialog` uses. The card is the
+  Settings sheet's surface: auto-paper's `BlurView` with no elevation (the theme's plain surface, no
+  wash of the primary), no border, and the `Dialog`'s corner radius. So every card and the Settings
+  sheet look like one family, in each game's palette and light/dark mode.
+- **Every dialog opens with `DialogHeader`.** A 64pt icon over a large bold title, both in the theme's
+  primary (pass `color` for another role, as `ConfirmDialog` does with danger when `destructive`).
+  `ConfirmDialog`, the how-to-play guide (titled "How to Play") and `BaseSettingsDialog` all use it;
+  an app's own cards should too. With `compact` the icon shrinks to 32pt and sits beside a smaller
+  title. `useCompactDialog(rotation?)` decides it: put its `onLayout` on the `OverlayBackdrop`, and it
+  is compact when the space the dialog lays out in is under `COMPACT_DIALOG_HEIGHT` (528pt) along the
+  card's own vertical axis, so a phone held sideways. One-button dialogs end in a single contained
+  primary button (`overlayActionStyles.actionButtonSingle`), the Settings sheet's Done included.
+- **Blur is automatic.** The card blurs what's behind it when the player's Blur setting is on and the
+  app hands `expo-blur` to auto-paper's `Provider` (`expoBlur={ExpoBlur}`). Otherwise it paints that
+  raised surface color instead: on Android (`BlurView` needs a blur target there, which a card has
+  none of), in an app without `expo-blur`, or with Blur off. Beyond passing `expoBlur`, a game wires
+  nothing for this.
+- **The Blur setting lives in `BaseSettingsDialog`.** Its APPEARANCE section shows a Blur row under the
+  appearance picker that flips auto-paper's own `blur` theme setting, which the settings sheet, Paper
+  menus and these cards all follow. The row only shows where blur can actually happen: not on
+  Android, not in an app that never passed `expoBlur`, and not with `hideAppearance`.
+- **`getOverlayCardColors` is gone.** It returned the old fixed black/white card (`#F2F2F2`/`#111111`),
+  which ignored the theme and never blurred. Use `useOverlayCardColors` for a card's text and edges.
+
 ## Zone-aware popovers (`useZoneClampedAlign`)
 
 `useAutoAlign` - and everything built on it, including `SectionedDropdown`, `InlineColorPicker`, and
@@ -565,7 +618,8 @@ touches the main barrel. It's for an app that has `@tastic/core` and `@rific/upd
 - Stats: `BaseStatsScreen`, `StatSection`, `StatRow`, `AchievementRow`, `LOCKED_BADGE_COLOR`,
   `AchievementCatalogSection`, `ActivityStatSection`
 - Chrome: `CornerActionButtons`, `ContentGutter`, `StaggeredWord`, `getStaggeredWordDuration`
-- Style tokens: `getOverlayCardColors`, `overlayStyles`, `overlayActionStyles`, `MONO_FONT`
+- Overlay cards: `OverlayCard`, `OverlayBackdrop`, `useOverlayCardColors`, `DialogHeader`, `useCompactDialog`, `isCompactDialogHeight`, `COMPACT_DIALOG_HEIGHT`
+- Style tokens: `overlayStyles`, `overlayActionStyles`, `MONO_FONT`
 
 Each is the same component the main entry exports and is documented above. Only the import path changes:
 
@@ -619,12 +673,12 @@ resolve module".
 | `react`, `react-native` | >=19.0.0, >=0.76.0 | every entry |
 | `react-native-paper` | >=5.0.0 | main entry, `./guide`, `./chrome` |
 | `react-native-reanimated` | >=3.0.0 | main entry (`StaggeredWord`), `./guide`, `./chrome` (`StaggeredWord`) |
-| `@rific/auto-paper` | >=0.12.2 | main entry (`BaseSettingsDialog` needs the nested `Portal.Host` first shipped in 0.12.2), `./guide`, `./chrome` |
+| `@rific/auto-paper` | >=0.12.2 | main entry (`BaseSettingsDialog` needs the nested `Portal.Host` first shipped in 0.12.2; `OverlayCard` uses `BlurView` and `useBlur`, and `BaseSettingsDialog`'s Blur row uses `useBlurModule` and `useThemeSettings`, all in 0.12.2), `./guide`, `./chrome` |
 | `@rific/feedback-press` | >=0.10.2 | main entry (`useSoundSettings` first shipped in 0.10.2), `./guide`, `./chrome` |
 | `react-native-safe-area-context` | >=5.0.0 | main entry (`useZoneClampedAlign`), `./chrome` (`RotatedFrame`, `BaseSettingsDialog`) |
 | `@tastic/core` | >=0.12.0, optional | main entry: `useRotation()` and most dialogs; `RotatedFrame` and `BaseSettingsDialog` need `FakeLandscapeView`'s `rotation`/`passThrough`, first shipped in 0.12.0; `./chrome` (the same dialogs) |
 | `@rific/updater` | >=0.4.0, optional | main entry and `./chrome`: `BaseSettingsDialog`, `UpdateDialog` |
 | `@tastic/profile` | >=0.4.0, optional | main entry: `PlayerSetupPanel`, `AchievementUnlockList` (`ProfileChip`) |
 | `@tastic/split-screen` | >=0.5.0, optional | main entry: `useZoneClampedAlign` |
-| `@shopify/react-native-skia` | >=1.5.0, optional | `TriggerGaugeHost`'s gauge (lazy-loaded behind `SkiaGate`) and `./skia-gate` |
+| `@shopify/react-native-skia` | >=2.6.0, optional | `TriggerGaugeHost`'s gauge (lazy-loaded behind `SkiaGate`) and `./skia-gate` |
 | `@tastic/achievements` | >=0.2.0, optional | `AchievementCatalogSection`, `AchievementUnlockList`, type-only (`AchievementCatalogRow`, first exported in 0.2.0; `AchievementTier`); `./chrome` needs it installed only to type-check |

package/dist/{TriggerGauge-2OJOOF6I.mjs → TriggerGauge-GIHKGAZE.mjs}

@@ -54,7 +54,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
   const canvasSize = diameter + LIT_THICKNESS;
   const oval = Skia.XYWHRect(LIT_THICKNESS / 2, LIT_THICKNESS / 2, diameter, diameter);
   const unlitPath = useDerivedValue(() => {
-    const path = Skia.Path.Make();
+    const path = Skia.PathBuilder.Make();
     for (let i = 0; i < segments; i++) {
       if (litIndices.includes(i)) continue;
       let local = 1;
@@ -68,13 +68,13 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       const dashCenterDeg = startDeg + (i + 0.5) * step;
       path.addArc(oval, dashCenterDeg - 90 - sweep / 2, sweep);
     }
-    return path;
+    return path.detach();
   }, [segments, litIndicesKey, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
   const litPath = useDerivedValue(() => {
-    const path = Skia.Path.Make();
+    const path = Skia.PathBuilder.Make();
     if (mountProgress.value >= 1 && singleSelect) {
       path.addArc(oval, angleDeg.value - 90 - dashAngleDeg / 2, dashAngleDeg);
-      return path;
+      return path.detach();
     }
     for (let i = 0; i < segments; i++) {
       const isLitNow = litIndices.includes(i);
@@ -98,7 +98,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       const dashCenterDeg = startDeg + (i + 0.5) * step;
       path.addArc(oval, dashCenterDeg - 90 - sweep / 2, sweep);
     }
-    return path;
+    return path.detach();
   }, [segments, litIndicesKey, transitionFromKey, singleSelect, step, startDeg, dashAngleDeg, totalDurationMs, oval.x, oval.y, oval.width, oval.height]);
   if (segments < 2) return null;
   const gaugeSizeStyle = {

package/dist/chrome/index.d.mts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, Insets, TextStyle, LayoutChangeEvent } from 'react-native';
+import { StyleProp, ViewStyle, Insets, LayoutChangeEvent, TextStyle } from 'react-native';
 
 interface Props$7 {
     rows: AchievementCatalogRow[];
@@ -117,20 +117,23 @@ interface Props$2 {
 }
 declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
 
+declare const COMPACT_DIALOG_HEIGHT = 528;
+declare function isCompactDialogHeight(height: number): boolean;
+interface DialogHeaderProps {
+    icon: string;
+    title: string;
+    color?: string;
+    compact?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function DialogHeader({ icon, title, color, compact, style }: DialogHeaderProps): react.JSX.Element;
+
 declare const MONO_FONT: string;
 
-interface OverlayCardColors {
-    fg: string;
-    fgMuted: string;
-    cardBg: string;
-    cardBorder: string;
-}
-declare function getOverlayCardColors(dark: boolean): OverlayCardColors;
 declare const overlayStyles: {
     card: {
         alignItems: "center";
         borderRadius: number;
-        borderWidth: number;
         gap: number;
         maxWidth: number;
         padding: number;
@@ -163,6 +166,27 @@ declare const overlayActionStyles: {
     };
 };
 
+interface OverlayCardThemeColors {
+    fg: string;
+    fgMuted: string;
+    cardBorder: string;
+    backdrop: string;
+}
+declare function useOverlayCardColors(): OverlayCardThemeColors;
+interface OverlayBackdropProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
+}
+declare function OverlayBackdrop({ children, style, onLayout }: OverlayBackdropProps): react.JSX.Element;
+interface OverlayCardProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    accessibilityViewIsModal?: boolean;
+    testID?: string;
+}
+declare function OverlayCard({ children, style, ...rest }: OverlayCardProps): react.JSX.Element;
+
 interface RotatedFrameProps {
     children: ReactNode;
     /** The angle to turn the frame by. Defaults to the live physical hold (@tastic/core's useRotation); pass it
@@ -237,4 +261,9 @@ interface UpdateDialogProps {
 }
 declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
 
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, type OverlayCardColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles };
+declare function useCompactDialog(rotation?: ViewRotation): {
+    compact: boolean;
+    onLayout: (e: LayoutChangeEvent) => void;
+};
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors };

package/dist/chrome/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, Insets, TextStyle, LayoutChangeEvent } from 'react-native';
+import { StyleProp, ViewStyle, Insets, LayoutChangeEvent, TextStyle } from 'react-native';
 
 interface Props$7 {
     rows: AchievementCatalogRow[];
@@ -117,20 +117,23 @@ interface Props$2 {
 }
 declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
 
+declare const COMPACT_DIALOG_HEIGHT = 528;
+declare function isCompactDialogHeight(height: number): boolean;
+interface DialogHeaderProps {
+    icon: string;
+    title: string;
+    color?: string;
+    compact?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function DialogHeader({ icon, title, color, compact, style }: DialogHeaderProps): react.JSX.Element;
+
 declare const MONO_FONT: string;
 
-interface OverlayCardColors {
-    fg: string;
-    fgMuted: string;
-    cardBg: string;
-    cardBorder: string;
-}
-declare function getOverlayCardColors(dark: boolean): OverlayCardColors;
 declare const overlayStyles: {
     card: {
         alignItems: "center";
         borderRadius: number;
-        borderWidth: number;
         gap: number;
         maxWidth: number;
         padding: number;
@@ -163,6 +166,27 @@ declare const overlayActionStyles: {
     };
 };
 
+interface OverlayCardThemeColors {
+    fg: string;
+    fgMuted: string;
+    cardBorder: string;
+    backdrop: string;
+}
+declare function useOverlayCardColors(): OverlayCardThemeColors;
+interface OverlayBackdropProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
+}
+declare function OverlayBackdrop({ children, style, onLayout }: OverlayBackdropProps): react.JSX.Element;
+interface OverlayCardProps {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    accessibilityViewIsModal?: boolean;
+    testID?: string;
+}
+declare function OverlayCard({ children, style, ...rest }: OverlayCardProps): react.JSX.Element;
+
 interface RotatedFrameProps {
     children: ReactNode;
     /** The angle to turn the frame by. Defaults to the live physical hold (@tastic/core's useRotation); pass it
@@ -237,4 +261,9 @@ interface UpdateDialogProps {
 }
 declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
 
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, type OverlayCardColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles };
+declare function useCompactDialog(rotation?: ViewRotation): {
+    compact: boolean;
+    onLayout: (e: LayoutChangeEvent) => void;
+};
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, type DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors };