@tastic/hud 0.12.0 → 0.13.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;
@@ -437,4 +474,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, 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 };

package/dist/index.d.ts

@@ -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.js';
 
-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;
@@ -437,4 +474,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, 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 };