@tastic/hud 0.12.0 → 0.14.0

package/dist/guide/index.mjs

@@ -0,0 +1,428 @@
+import {
+  getOverlayCardColors,
+  overlayActionStyles,
+  overlayStyles
+} from "../chunk-32U2OIRW.mjs";
+
+// src/guide/DirectionKeysHint.tsx
+import { useAutoPaperTheme } from "@rific/auto-paper";
+import { StyleSheet, View } from "react-native";
+import { Icon, Text } from "react-native-paper";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CAP_SIZE = 34;
+var ARROWS = { up: "arrow-up", left: "arrow-left", down: "arrow-down", right: "arrow-right" };
+function KeyCap({ label, icon, color }) {
+  return /* @__PURE__ */ jsx(View, { style: [styles.cap, { borderColor: color }], children: label !== void 0 ? /* @__PURE__ */ jsx(Text, { variant: "titleMedium", style: [styles.capLabel, { color }], children: label }) : /* @__PURE__ */ jsx(Icon, { source: icon, size: 20, color }) });
+}
+function DirectionKeysHint({ labels, axis = "both", color }) {
+  const { colors } = useAutoPaperTheme();
+  const tint = color ?? colors.primary;
+  if (axis === "vertical") {
+    const accessibilityLabel2 = labels?.up && labels.down ? `Keys ${labels.up} and ${labels.down}` : "Up and down arrow keys";
+    return /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel: accessibilityLabel2, style: styles.cluster, children: [
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.up, icon: ARROWS.up, color: tint }),
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.down, icon: ARROWS.down, color: tint })
+    ] });
+  }
+  const accessibilityLabel = labels?.up && labels.left && labels.down && labels.right ? `Keys ${labels.up}, ${labels.left}, ${labels.down}, ${labels.right}` : "Arrow keys";
+  return /* @__PURE__ */ jsxs(View, { accessible: true, accessibilityLabel, style: styles.cluster, children: [
+    /* @__PURE__ */ jsx(KeyCap, { label: labels?.up, icon: ARROWS.up, color: tint }),
+    /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.left, icon: ARROWS.left, color: tint }),
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.down, icon: ARROWS.down, color: tint }),
+      /* @__PURE__ */ jsx(KeyCap, { label: labels?.right, icon: ARROWS.right, color: tint })
+    ] })
+  ] });
+}
+var styles = StyleSheet.create({
+  cap: {
+    alignItems: "center",
+    borderRadius: 8,
+    borderWidth: 2,
+    height: CAP_SIZE,
+    justifyContent: "center",
+    width: CAP_SIZE
+  },
+  capLabel: {
+    fontWeight: "bold"
+  },
+  cluster: {
+    alignItems: "center",
+    gap: 6
+  },
+  row: {
+    flexDirection: "row",
+    gap: 6
+  }
+});
+
+// src/guide/GuideProvider.tsx
+import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/guide/HowToPlayDialog.tsx
+import { useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
+import { Button } from "@rific/feedback-press";
+import { useEffect, useRef, useState } from "react";
+import { BackHandler, ScrollView, StyleSheet as StyleSheet2, useWindowDimensions, View as View2 } from "react-native";
+import { Portal, Text as Text2 } from "react-native-paper";
+import { useReducedMotion } from "react-native-reanimated";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OVERLAY_GUTTER = 24;
+var CARD_PADDING = 24;
+var MAX_CARD_WIDTH = 360;
+var MAX_CARD_WIDTH_TURNED = 520;
+var ART_HEIGHT = 132;
+var COMPACT_BELOW = 480;
+var ART_HEIGHT_COMPACT = 88;
+function getGuideCardSize(windowWidth, windowHeight, rotation) {
+  const turned = rotation === 90 || rotation === -90;
+  const availableWidth = (turned ? windowHeight : windowWidth) - OVERLAY_GUTTER * 2;
+  const availableHeight = (turned ? windowWidth : windowHeight) - OVERLAY_GUTTER * 2;
+  const width = Math.min(turned ? MAX_CARD_WIDTH_TURNED : MAX_CARD_WIDTH, availableWidth);
+  return {
+    width,
+    pageWidth: width - CARD_PADDING * 2,
+    maxHeight: availableHeight,
+    artHeight: availableHeight < COMPACT_BELOW ? ART_HEIGHT_COMPACT : ART_HEIGHT
+  };
+}
+function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
+  const { dark, colors } = useAutoPaperTheme2();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const reducedMotion = useReducedMotion();
+  const [index, setIndex] = useState(0);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      onSkip();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [onSkip]);
+  const { fg, cardBg, cardBorder, fgMuted } = getOverlayCardColors(dark);
+  const { width: cardWidth, pageWidth, maxHeight, artHeight } = getGuideCardSize(windowWidth, windowHeight, rotation);
+  const rotationStyle = rotation === 0 ? void 0 : { transform: [{ rotate: `${rotation}deg` }] };
+  const isFirst = index === 0;
+  const isLast = index === steps.length - 1;
+  const isOnly = steps.length === 1;
+  const artBackground = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+  const targetRef = useRef(null);
+  function goTo(next) {
+    targetRef.current = next;
+    setIndex(next);
+    scrollRef.current?.scrollTo({ x: next * pageWidth, animated: !reducedMotion });
+  }
+  function syncToOffset(offsetX) {
+    const page = Math.round(offsetX / pageWidth);
+    if (page < 0 || page >= steps.length) return;
+    if (targetRef.current !== null) {
+      if (page === targetRef.current) targetRef.current = null;
+      return;
+    }
+    setIndex(page);
+  }
+  function handleScroll(e) {
+    syncToOffset(e.nativeEvent.contentOffset.x);
+  }
+  function handleMomentumEnd(e) {
+    targetRef.current = null;
+    syncToOffset(e.nativeEvent.contentOffset.x);
+  }
+  return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(View2, { style: [overlayStyles.overlay, styles2.overlay], children: /* @__PURE__ */ jsxs2(View2, { accessibilityViewIsModal: true, style: [overlayStyles.card, styles2.card, { width: cardWidth, maxHeight, backgroundColor: cardBg, borderColor: cardBorder }, rotationStyle], children: [
+    /* @__PURE__ */ jsx2(ScrollView, { ref: scrollRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, scrollEventThrottle: 16, onMomentumScrollEnd: handleMomentumEnd, style: [styles2.pager, { width: pageWidth }], children: steps.map((step, i) => /* @__PURE__ */ jsxs2(ScrollView, { nestedScrollEnabled: true, showsVerticalScrollIndicator: false, style: { width: pageWidth }, contentContainerStyle: styles2.page, children: [
+      step.art !== void 0 && /* @__PURE__ */ jsx2(View2, { style: [styles2.art, { height: artHeight, backgroundColor: artBackground }], children: step.art }),
+      /* @__PURE__ */ jsx2(Text2, { variant: "headlineSmall", style: [styles2.title, { color: fg }], children: step.title }),
+      /* @__PURE__ */ jsx2(Text2, { variant: "bodyMedium", style: [styles2.body, { color: fg }], children: step.body })
+    ] }, i)) }),
+    steps.length > 1 && /* @__PURE__ */ jsx2(View2, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles2.dots, children: steps.map((_, i) => /* @__PURE__ */ jsx2(View2, { style: [styles2.dot, { backgroundColor: i === index ? colors.primary : fgMuted }] }, i)) }),
+    /* @__PURE__ */ jsxs2(View2, { style: overlayActionStyles.actions, children: [
+      !isOnly && /* @__PURE__ */ jsx2(Button, { mode: "outlined", onPress: isFirst ? onSkip : () => goTo(index - 1), style: overlayActionStyles.actionButton, children: isFirst ? "Skip" : "Back" }),
+      /* @__PURE__ */ jsx2(Button, { mode: "contained", onPress: isLast ? onFinish : () => goTo(index + 1), style: isOnly ? overlayActionStyles.actionButtonSingle : overlayActionStyles.actionButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: isLast ? "Ready" : "Next" })
+    ] })
+  ] }) }) });
+}
+function HowToPlayDialog({ visible, steps, ...rest }) {
+  if (!visible || steps.length === 0) return null;
+  return /* @__PURE__ */ jsx2(HowToPlayCard, { steps, ...rest });
+}
+var styles2 = StyleSheet2.create({
+  art: {
+    alignItems: "center",
+    borderRadius: 12,
+    justifyContent: "center",
+    overflow: "hidden",
+    width: "100%"
+  },
+  body: {
+    textAlign: "center"
+  },
+  // Additive on top of overlayCard's own shared `card` shape — its default 32px padding is tighter
+  // here (a paged card wants more width for its art) and the shared 16px gap is right.
+  card: {
+    padding: CARD_PADDING
+  },
+  dot: {
+    borderRadius: 4,
+    height: 8,
+    width: 8
+  },
+  dots: {
+    flexDirection: "row",
+    gap: 8
+  },
+  overlay: {
+    paddingHorizontal: OVERLAY_GUTTER
+  },
+  page: {
+    alignItems: "center",
+    gap: 12
+  },
+  pager: {
+    flexShrink: 1
+  },
+  title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+
+// src/guide/GuideProvider.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var noop = () => {
+};
+var GuideContext = createContext({ isOpen: false, open: noop, close: noop, requestAutoShow: noop });
+function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, children }) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const autoShownRef = useRef2(false);
+  const unseen = seenVersion < currentVersion;
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    if (unseen) onSeen(currentVersion);
+  }, [unseen, onSeen, currentVersion]);
+  const requestAutoShow = useCallback(() => {
+    if (!unseen || autoShownRef.current) return;
+    autoShownRef.current = true;
+    setIsOpen(true);
+  }, [unseen]);
+  const value = useMemo(() => ({ isOpen, open, close, requestAutoShow }), [isOpen, open, close, requestAutoShow]);
+  return /* @__PURE__ */ jsxs3(GuideContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx3(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
+  ] });
+}
+function useGuide() {
+  return useContext(GuideContext);
+}
+function useAutoShowGuide(enabled = true) {
+  const { requestAutoShow } = useGuide();
+  useEffect2(() => {
+    if (enabled) requestAutoShow();
+  }, [enabled, requestAutoShow]);
+}
+
+// src/guide/guideSlice.ts
+var REHYDRATE = "persist/REHYDRATE";
+function createGuideSlice({ currentVersion, mountKey = "guide", persistKey = "root" }) {
+  const MARK_SEEN = `${mountKey}/markSeen`;
+  const initialState = { versionSeen: 0 };
+  function markSeen(version) {
+    return { type: MARK_SEEN, payload: version };
+  }
+  function reducer(state = initialState, action) {
+    if (action.type === REHYDRATE) {
+      if (action.key !== void 0 && action.key !== persistKey) return state;
+      const payload = action.payload;
+      if (!payload) return state;
+      const persisted = payload[mountKey];
+      if (typeof persisted?.versionSeen === "number") return { versionSeen: persisted.versionSeen };
+      return { versionSeen: currentVersion };
+    }
+    if (action.type === MARK_SEEN && typeof action.payload === "number") {
+      return { versionSeen: Math.max(state.versionSeen, action.payload) };
+    }
+    return state;
+  }
+  function selectVersionSeen(rootState) {
+    return rootState[mountKey]?.versionSeen ?? 0;
+  }
+  return { actions: { markSeen }, reducer, selectVersionSeen };
+}
+function createReturningPlayerMigrate(storage, legacyKeys) {
+  return async (state, version) => {
+    if (state !== void 0 || legacyKeys.length === 0) return state;
+    try {
+      const values = await Promise.all(legacyKeys.map((key) => storage.getItem(key)));
+      return values.some((value) => value !== null) ? { _persist: { version, rehydrated: false } } : void 0;
+    } catch {
+      return void 0;
+    }
+  };
+}
+
+// src/guide/SeatDevicesHint.tsx
+import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Icon as Icon2 } from "react-native-paper";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ICON = {
+  keyboard: { source: "keyboard-outline", size: 56 },
+  mouse: { source: "mouse-outline", size: 44 }
+};
+var ORDER = ["keyboard", "mouse"];
+function SeatDevicesHint({ devices, seatColors }) {
+  const { colors } = useAutoPaperTheme3();
+  const tints = seatColors ?? [colors.primary, colors.secondary];
+  const accessibilityLabel = devices.map((device, i) => `Player ${i + 1} uses the ${device}`).join(", ");
+  return /* @__PURE__ */ jsx4(View3, { accessible: true, accessibilityLabel, style: styles3.row, children: ORDER.map((device) => {
+    const seats = devices.flatMap((d, i) => d === device ? [i] : []);
+    if (seats.length === 0) return null;
+    const color = seats.length === 1 ? tints[seats[0]] ?? colors.onSurface : colors.onSurface;
+    return /* @__PURE__ */ jsx4(Icon2, { source: ICON[device].source, size: ICON[device].size, color }, device);
+  }) });
+}
+var styles3 = StyleSheet3.create({
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 20
+  }
+});
+
+// src/guide/SeatDiagram.tsx
+import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { Text as Text3 } from "react-native-paper";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEVICE_WIDTH = 88;
+var DEVICE_HEIGHT = 120;
+function SeatDiagram({ topColor, bottomColor, topLabel = "P2", bottomLabel = "P1" }) {
+  const { colors } = useAutoPaperTheme4();
+  const top = topColor ?? colors.secondary;
+  const bottom = bottomColor ?? colors.primary;
+  return /* @__PURE__ */ jsxs4(View4, { accessible: true, accessibilityLabel: `${bottomLabel} plays the bottom half, ${topLabel} plays the top half`, style: [styles4.device, { borderColor: colors.onSurface }], children: [
+    /* @__PURE__ */ jsxs4(View4, { style: [styles4.half, { borderColor: top }], children: [
+      /* @__PURE__ */ jsx5(View4, { style: [StyleSheet4.absoluteFill, styles4.tint, { backgroundColor: top }] }),
+      /* @__PURE__ */ jsx5(Text3, { variant: "titleMedium", style: [styles4.label, styles4.flipped, { color: top }], children: topLabel })
+    ] }),
+    /* @__PURE__ */ jsxs4(View4, { style: [styles4.half, styles4.bottomHalf, { borderColor: bottom }], children: [
+      /* @__PURE__ */ jsx5(View4, { style: [StyleSheet4.absoluteFill, styles4.tint, { backgroundColor: bottom }] }),
+      /* @__PURE__ */ jsx5(Text3, { variant: "titleMedium", style: [styles4.label, { color: bottom }], children: bottomLabel })
+    ] })
+  ] });
+}
+var styles4 = StyleSheet4.create({
+  bottomHalf: {
+    borderTopWidth: 0
+  },
+  device: {
+    borderRadius: 16,
+    borderWidth: 2,
+    height: DEVICE_HEIGHT,
+    overflow: "hidden",
+    width: DEVICE_WIDTH
+  },
+  flipped: {
+    transform: [{ rotate: "180deg" }]
+  },
+  half: {
+    alignItems: "center",
+    borderWidth: 2,
+    flex: 1,
+    justifyContent: "center"
+  },
+  label: {
+    fontWeight: "bold"
+  },
+  // A wash of the seat color behind its own label rather than an rgba() fill — the theme's colors
+  // aren't guaranteed to be 6-digit hex, so an opacity layer is the only alpha that always works.
+  tint: {
+    opacity: 0.2
+  }
+});
+
+// src/guide/SwipeHint.tsx
+import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
+import { useEffect as useEffect3 } from "react";
+import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
+import { Icon as Icon3 } from "react-native-paper";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion as useReducedMotion2, useSharedValue, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var DOT_COUNT = 7;
+var FINGER_SIZE = 28;
+var MOUSE_SIZE = 30;
+var SWEEP_MS = 900;
+var PAUSE_MS = 500;
+var ARROW_ICON = { up: "arrow-up", down: "arrow-down", left: "arrow-left", right: "arrow-right" };
+function SwipeHint({ direction = "right", pointer = "finger", color, length = 96 }) {
+  const { colors } = useAutoPaperTheme5();
+  const tint = color ?? colors.primary;
+  const reducedMotion = useReducedMotion2();
+  const progress = useSharedValue(0.5);
+  const horizontal = direction === "left" || direction === "right";
+  const sign = direction === "right" || direction === "down" ? 1 : -1;
+  useEffect3(() => {
+    if (reducedMotion) {
+      progress.value = 0.5;
+      return;
+    }
+    progress.value = 0;
+    progress.value = withRepeat(withSequence(withTiming(1, { duration: SWEEP_MS, easing: Easing.out(Easing.cubic) }), withTiming(1, { duration: PAUSE_MS }), withTiming(0, { duration: 0 })), -1);
+  }, [reducedMotion]);
+  const fingerStyle = useAnimatedStyle(() => {
+    const travel = (progress.value - 0.5) * length * sign;
+    return {
+      opacity: reducedMotion ? 1 : Math.min(1, progress.value * 6, (1 - progress.value) * 6 + 1e-3),
+      transform: horizontal ? [{ translateX: travel }] : [{ translateY: travel }]
+    };
+  });
+  const axis = horizontal ? sign > 0 ? "row" : "row-reverse" : sign > 0 ? "column" : "column-reverse";
+  return /* @__PURE__ */ jsxs5(View5, { accessibilityLabel: `${pointer === "mouse" ? "Drag" : "Swipe"} ${direction}`, accessible: true, style: [styles5.path, { flexDirection: axis }], children: [
+    /* @__PURE__ */ jsx6(View5, { style: [styles5.dots, { flexDirection: axis, [horizontal ? "width" : "height"]: length }], children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ jsx6(View5, { style: [styles5.dot, { backgroundColor: tint, opacity: 0.35 + 0.65 * i / (DOT_COUNT - 1) }] }, i)) }),
+    /* @__PURE__ */ jsx6(Icon3, { source: ARROW_ICON[direction], size: 28, color: tint }),
+    pointer === "mouse" ? /* @__PURE__ */ jsx6(Animated.View, { style: [styles5.mouse, fingerStyle], children: /* @__PURE__ */ jsx6(Icon3, { source: "mouse", size: MOUSE_SIZE, color: tint }) }) : /* @__PURE__ */ jsx6(Animated.View, { style: [styles5.finger, { borderColor: tint }, fingerStyle] })
+  ] });
+}
+var styles5 = StyleSheet5.create({
+  dot: {
+    borderRadius: 3,
+    height: 6,
+    width: 6
+  },
+  dots: {
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  // Centered on the whole path (not on the dots row alone) by the container's own alignItems/
+  // justifyContent, then pushed along the axis by its own animated translate — absolute so it never
+  // takes space from the dots and arrowhead it's drawn over.
+  finger: {
+    borderRadius: FINGER_SIZE / 2,
+    borderWidth: 3,
+    height: FINGER_SIZE,
+    position: "absolute",
+    width: FINGER_SIZE
+  },
+  // Positioned exactly like `finger` (absolute, centered by the container, moved by the same animated
+  // translate); only what's drawn differs.
+  mouse: {
+    position: "absolute"
+  },
+  path: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  DirectionKeysHint,
+  GuideProvider,
+  HowToPlayDialog,
+  SeatDevicesHint,
+  SeatDiagram,
+  SwipeHint,
+  createGuideSlice,
+  createReturningPlayerMigrate,
+  getGuideCardSize,
+  useAutoShowGuide,
+  useGuide
+};

package/dist/index.d.mts

@@ -1,22 +1,22 @@
 import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
-import { AchievementCatalogRow } from '@tastic/achievements';
+import { AchievementCatalogRow, AchievementTier } from '@tastic/achievements';
+import { Profile } from '@tastic/profile';
+import { ViewStyle, StyleProp, View, TextStyle, LayoutChangeEvent } from 'react-native';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, View, TextStyle, LayoutChangeEvent } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
-import { Profile } from '@tastic/profile';
 export { SkiaGate, SkiaGateProps } from './SkiaGate.mjs';
 
-interface Props$e {
+interface Props$f {
     rows: AchievementCatalogRow[];
     label?: string;
     fg?: string;
     fgMuted?: string;
 }
-declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$e): react.JSX.Element;
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$f): react.JSX.Element;
 
 declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
-interface Props$d {
+interface Props$e {
     icon: string;
     title: string;
     description: string;
@@ -29,7 +29,27 @@ interface Props$d {
     fgMuted?: string;
     sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$d): react.JSX.Element;
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$e): react.JSX.Element;
+
+interface UnlockedAchievement {
+    id: string;
+    icon: string;
+    title: string;
+    tier: AchievementTier;
+}
+interface AchievementUnlockOwner {
+    profile?: Profile | null;
+    color: string;
+}
+interface Props$d<Seat extends number> {
+    unlocks: Partial<Record<Seat, UnlockedAchievement[]>>;
+    seats: readonly Seat[];
+    owners: Record<Seat, AchievementUnlockOwner>;
+    tierColors: Record<AchievementTier, string>;
+    fg?: string;
+    style?: ViewStyle;
+}
+declare function AchievementUnlockList<Seat extends number>({ unlocks, seats, owners, tierColors, fg: fgOverride, style }: Props$d<Seat>): react.JSX.Element | null;
 
 interface ActivityStats {
     distinctDaysPlayed: number;
@@ -55,9 +75,10 @@ interface BaseSettingsDialogProps {
     hideAppearance?: boolean;
     hideUpdateCheck?: boolean;
     onUpdateError?: (message: string) => void;
+    onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, 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, onShowHowToPlay, 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 {
@@ -296,6 +317,22 @@ declare const overlayStyles: {
         top: number;
     };
 };
+declare const overlayActionStyles: {
+    actionButton: {
+        flexGrow: number;
+        minWidth: number;
+    };
+    actionButtonSingle: {
+        minWidth: number;
+    };
+    actions: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+        justifyContent: "center";
+        width: "100%";
+    };
+};
 
 declare function getColorPopoverId(idPrefix: string): string;
 declare function getCpuDifficultyPopoverId(idPrefix: string): string;
@@ -361,6 +398,40 @@ interface Props$3 {
 }
 declare function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily }: Props$3): 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
+     * when the caller already has the exact angle it wants, e.g. a dialog handed its caller's rotation, or 0 for
+     * one that already sits inside a turned frame. */
+    rotation?: ViewRotation;
+    /** Give everything inside the frame the safe-area insets already remapped onto the frame's own edges (see
+     * @tastic/core's rotateInsets), so a component that reads `useSafeAreaInsets()` itself (a library screen,
+     * Paper's Modal, a toaster) lands on the right edge when the frame is turned. Leave it off for content that
+     * rotates the insets itself, which would otherwise rotate them twice. */
+    rotatedSafeArea?: boolean;
+    /** Mount a Paper Portal.Host INSIDE the frame, so a dialog (Paper's Portal otherwise mounts at the app root,
+     * outside the frame) is laid out against the frame's footprint and turned with it. The dialog must then be
+     * told `rotation={0}`. */
+    portalHost?: boolean;
+    /** Let touches fall through the frame to whatever is beneath it, so only its children claim them. For a frame
+     * laid OVER other content (a dialog layer, a root-level overlay); a screen that owns the window leaves it off. */
+    passThrough?: boolean;
+    /** Cap on the content column's width in the WIDE layout only (the rotated footprint is landscape), centred: a
+     * stats list or a roster stretched across an 874pt-wide landscape screen reads badly. Portrait is never capped,
+     * so a portrait iPad or desktop window keeps its full width. Omit for no cap. */
+    maxContentWidth?: number;
+}
+/** A frame turned to follow the phone while the OS stays portrait-locked (see @tastic/core's FakeLandscapeView),
+ * sized to the turned footprint so its content lays out against the short edge at +/-90. The tree is IDENTICAL
+ * at every angle, so a rotation never remounts what is inside: `FakeLandscapeView > SafeArea provider >
+ * [Portal.Host] > column`. `rotation`, `rotatedSafeArea`, `passThrough` and `maxContentWidth` only change styles
+ * and values, but `portalHost` adds or removes the Portal.Host element, so it must be STATIC per call site
+ * (flipping it at runtime would remount everything inside).
+ *
+ * Safe for tap-driven content only: react-native-gesture-handler's translation deltas are untransformed, so
+ * never put a gesture-tracked game board inside it. */
+declare function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea, portalHost, passThrough, maxContentWidth }: RotatedFrameProps): react.JSX.Element;
+
 interface Props$2 {
     onBack: () => void;
     onSettings: () => void;
@@ -437,4 +508,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
 
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, type AlignResult, 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 OverlayCardColors, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, UpdateDialog, type UpdateDialogProps, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getOverlayCardColors, getStaggeredWordDuration, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };
+export { AchievementCatalogSection, AchievementRow, AchievementUnlockList, type AchievementUnlockOwner, ActivityStatSection, type AlignResult, 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 OverlayCardColors, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, RotatedFrame, type RotatedFrameProps, SectionedDropdown, SharedActionBand, type SingleSelectSection, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, UpdateDialog, type UpdateDialogProps, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getOverlayCardColors, getStaggeredWordDuration, loadSkiaWeb, overlayActionStyles, overlayStyles, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };