@tastic/hud 0.17.0 → 0.18.0

package/README.md

@@ -79,6 +79,8 @@ corner of the screen.
 - **`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
 
@@ -244,14 +246,15 @@ export function SettingsDialog({ visible, onDismiss, rotation = 0, settings, set
 own overlay (a result banner, a game-over card) should too, so every card in the fleet looks the same:
 
 ```tsx
-import { OverlayBackdrop, OverlayCard, overlayActionStyles, useOverlayCardColors } from '@tastic/hud'
+import { DialogHeader, OverlayBackdrop, OverlayCard, overlayActionStyles, useCompactDialog, useOverlayCardColors } from '@tastic/hud'
 
 function GameOverCard({ onRestart }: { onRestart: () => void }) {
-  const { fg, fgMuted } = useOverlayCardColors()
+  const { fgMuted } = useOverlayCardColors()
+  const { compact, onLayout } = useCompactDialog()
   return (
-    <OverlayBackdrop>
+    <OverlayBackdrop onLayout={onLayout}>
       <OverlayCard accessibilityViewIsModal>
-        <Text style={{ color: fg }}>Game Over</Text>
+        <DialogHeader icon='flag-checkered' title='Game Over' compact={compact} />
         <Text style={{ color: fgMuted }}>Score 42</Text>
         <View style={overlayActionStyles.actions}>...</View>
       </OverlayCard>
@@ -261,9 +264,18 @@ function GameOverCard({ onRestart }: { onRestart: () => void }) {
 ```
 
 - **Colors come from the app's theme.** Text is `onSurface` (`fg`) and `onSurfaceVariant` (`fgMuted`),
-  the edge is `outlineVariant`, and the dim is the theme's `backdrop`, the same scrim auto-paper's own
-  `Dialog` uses. The card is auto-paper's `BlurView` at elevation 3: the theme's surface with a light
-  wash of its primary, MD3's dialog color. So a card follows each game's palette and light/dark mode.
+  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
@@ -273,9 +285,8 @@ function GameOverCard({ onRestart }: { onRestart: () => void }) {
   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(dark)` is deprecated.** It returns the old fixed black/white card
-  (`#F2F2F2`/`#111111`), which ignores the theme and never blurs. It stays until every game has moved
-  its own cards onto `OverlayCard`.
+- **`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`)
 
@@ -607,8 +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`
-- Overlay cards: `OverlayCard`, `OverlayBackdrop`, `useOverlayCardColors`
-- Style tokens: `overlayStyles`, `overlayActionStyles`, `MONO_FONT`, and the deprecated `getOverlayCardColors`
+- 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:
 
@@ -669,5 +680,5 @@ resolve module".
 | `@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,25 +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;
-}
-/**
- * @deprecated The literal black/white card colors. hud's own cards moved to the theme-driven, blur-aware
- * OverlayCard / OverlayBackdrop / useOverlayCardColors (OverlaySurface.tsx) on 2026-10-15; this stays
- * only until every app's own result cards have moved over too.
- */
-declare function getOverlayCardColors(dark: boolean): OverlayCardColors;
 declare const overlayStyles: {
     card: {
         alignItems: "center";
         borderRadius: number;
-        borderWidth: number;
         gap: number;
         maxWidth: number;
         padding: number;
@@ -178,8 +176,9 @@ declare function useOverlayCardColors(): OverlayCardThemeColors;
 interface OverlayBackdropProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
 }
-declare function OverlayBackdrop({ children, style }: OverlayBackdropProps): react.JSX.Element;
+declare function OverlayBackdrop({ children, style, onLayout }: OverlayBackdropProps): react.JSX.Element;
 interface OverlayCardProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -262,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, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardColors, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles, useOverlayCardColors };
+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,25 +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;
-}
-/**
- * @deprecated The literal black/white card colors. hud's own cards moved to the theme-driven, blur-aware
- * OverlayCard / OverlayBackdrop / useOverlayCardColors (OverlaySurface.tsx) on 2026-10-15; this stays
- * only until every app's own result cards have moved over too.
- */
-declare function getOverlayCardColors(dark: boolean): OverlayCardColors;
 declare const overlayStyles: {
     card: {
         alignItems: "center";
         borderRadius: number;
-        borderWidth: number;
         gap: number;
         maxWidth: number;
         padding: number;
@@ -178,8 +176,9 @@ declare function useOverlayCardColors(): OverlayCardThemeColors;
 interface OverlayBackdropProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
 }
-declare function OverlayBackdrop({ children, style }: OverlayBackdropProps): react.JSX.Element;
+declare function OverlayBackdrop({ children, style, onLayout }: OverlayBackdropProps): react.JSX.Element;
 interface OverlayCardProps {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -262,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, OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardColors, type OverlayCardProps, type OverlayCardThemeColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles, useOverlayCardColors };
+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 };