@tastic/hud 0.16.0 → 0.18.0

package/dist/guide/index.d.ts

@@ -80,6 +80,7 @@ declare function getGuideCardSize(windowWidth: number, windowHeight: number, rot
     pageWidth: number;
     maxHeight: number;
     artHeight: number;
+    compact: boolean;
 };
 interface HowToPlayDialogProps {
     visible: boolean;
@@ -87,6 +88,8 @@ interface HowToPlayDialogProps {
     onFinish: () => void;
     onSkip: () => void;
     rotation?: GuideRotation;
+    title?: string;
+    icon?: string;
 }
 declare function HowToPlayDialog({ visible, steps, ...rest }: HowToPlayDialogProps): react.JSX.Element | null;
 

package/dist/guide/index.js

@@ -100,31 +100,65 @@ var styles = import_react_native.StyleSheet.create({
 var import_react2 = require("react");
 
 // src/guide/HowToPlayDialog.tsx
-var import_auto_paper2 = require("@rific/auto-paper");
+var import_auto_paper4 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
 var import_react = require("react");
-var import_react_native3 = require("react-native");
-var import_react_native_paper2 = require("react-native-paper");
+var import_react_native5 = require("react-native");
+var import_react_native_paper3 = require("react-native-paper");
 var import_react_native_reanimated = require("react-native-reanimated");
 
-// src/overlayCard.ts
+// src/DialogHeader.tsx
+var import_auto_paper2 = require("@rific/auto-paper");
 var import_react_native2 = require("react-native");
-function getOverlayCardColors(dark) {
-  return {
-    fg: dark ? "#FFFFFF" : "#000000",
-    fgMuted: dark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)",
-    cardBg: dark ? "#111111" : "#F2F2F2",
-    cardBorder: dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)"
-  };
+var import_react_native_paper2 = require("react-native-paper");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var COMPACT_DIALOG_HEIGHT = 528;
+function isCompactDialogHeight(height) {
+  return height < COMPACT_DIALOG_HEIGHT;
 }
-var overlayStyles = import_react_native2.StyleSheet.create({
+function DialogHeader({ icon, title, color, compact = false, style }) {
+  const { colors } = (0, import_auto_paper2.useAutoPaperTheme)();
+  const accent = color ?? colors.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [compact ? styles2.compact : styles2.full, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: icon, size: compact ? COMPACT_ICON_SIZE : ICON_SIZE, color: accent }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { accessibilityRole: "header", variant: compact ? "headlineSmall" : "headlineLarge", style: [styles2.title, compact && styles2.titleCompact, { color: accent }], children: title })
+  ] });
+}
+var ICON_SIZE = 64;
+var COMPACT_ICON_SIZE = 32;
+var styles2 = import_react_native2.StyleSheet.create({
+  compact: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    flexDirection: "row",
+    gap: 12,
+    justifyContent: "center"
+  },
+  full: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: 16
+  },
+  // textAlign matters once a title wraps: the card centers the Text's block, but each wrapped line
+  // still defaults to left-aligned without it.
+  title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  titleCompact: {
+    flexShrink: 1
+  }
+});
+
+// src/overlayCard.ts
+var import_react_native3 = require("react-native");
+var overlayStyles = import_react_native3.StyleSheet.create({
   card: {
     alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
+    borderRadius: 28,
     gap: 16,
     maxWidth: 360,
-    padding: 32
+    padding: 24
   },
   overlay: {
     alignItems: "center",
@@ -137,7 +171,7 @@ var overlayStyles = import_react_native2.StyleSheet.create({
     top: 0
   }
 });
-var overlayActionStyles = import_react_native2.StyleSheet.create({
+var overlayActionStyles = import_react_native3.StyleSheet.create({
   // minWidth (not flexBasis) is each button's real floor - whenever both fit side by side, flexGrow
   // still splits any leftover width evenly beyond that floor, same visual result as a plain flex: 1
   // on a roomy screen, but a button can never be squeezed narrower than 128, only wrap to its own
@@ -179,42 +213,64 @@ var overlayActionStyles = import_react_native2.StyleSheet.create({
   }
 });
 
+// src/OverlaySurface.tsx
+var import_auto_paper3 = require("@rific/auto-paper");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function useOverlayCardColors() {
+  const { colors } = (0, import_auto_paper3.useAutoPaperTheme)();
+  return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
+}
+function OverlayBackdrop({ children, style, onLayout }) {
+  const { backdrop } = useOverlayCardColors();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { onLayout, style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
+}
+function OverlayCard({ children, style, ...rest }) {
+  const { isV3, roundness } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const blur = (0, import_auto_paper3.useBlur)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_auto_paper3.BlurView, { blur, style: [overlayStyles.card, styles3.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
+}
+var styles3 = import_react_native4.StyleSheet.create({
+  card: { overflow: "hidden" }
+});
+
 // src/guide/HowToPlayDialog.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("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);
+  const compact = isCompactDialogHeight(turned ? windowWidth : windowHeight);
   return {
     width,
     pageWidth: width - CARD_PADDING * 2,
     maxHeight: availableHeight,
-    artHeight: availableHeight < COMPACT_BELOW ? ART_HEIGHT_COMPACT : ART_HEIGHT
+    artHeight: compact ? ART_HEIGHT_COMPACT : ART_HEIGHT,
+    compact
   };
 }
-function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
-  const { dark, colors } = (0, import_auto_paper2.useAutoPaperTheme)();
-  const { width: windowWidth, height: windowHeight } = (0, import_react_native3.useWindowDimensions)();
+function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0, title = "How to Play", icon = "help-circle-outline" }) {
+  const { dark, colors } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native5.useWindowDimensions)();
   const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
   const [index, setIndex] = (0, import_react.useState)(0);
   const scrollRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
-    const subscription = import_react_native3.BackHandler.addEventListener("hardwareBackPress", () => {
+    const subscription = import_react_native5.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 { fg, fgMuted } = useOverlayCardColors();
+  const { width: cardWidth, pageWidth, maxHeight, artHeight, compact } = getGuideCardSize(windowWidth, windowHeight, rotation);
   const rotationStyle = rotation === 0 ? void 0 : { transform: [{ rotate: `${rotation}deg` }] };
   const isFirst = index === 0;
   const isLast = index === steps.length - 1;
@@ -242,24 +298,25 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
     targetRef.current = null;
     syncToOffset(e.nativeEvent.contentOffset.x);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: [overlayStyles.overlay, styles2.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { accessibilityViewIsModal: true, style: [overlayStyles.card, styles2.card, { width: cardWidth, maxHeight, backgroundColor: cardBg, borderColor: cardBorder }, rotationStyle], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.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__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.ScrollView, { nestedScrollEnabled: true, showsVerticalScrollIndicator: false, style: { width: pageWidth }, contentContainerStyle: styles2.page, children: [
-      step.art !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: [styles2.art, { height: artHeight, backgroundColor: artBackground }], children: step.art }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "headlineSmall", style: [styles2.title, { color: fg }], children: step.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyMedium", style: [styles2.body, { color: fg }], children: step.body })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OverlayBackdrop, { style: styles4.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(OverlayCard, { accessibilityViewIsModal: true, style: [styles4.card, { width: cardWidth, maxHeight }, rotationStyle], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogHeader, { icon, title, compact }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.ScrollView, { ref: scrollRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, scrollEventThrottle: 16, onMomentumScrollEnd: handleMomentumEnd, style: [styles4.pager, { width: pageWidth }], children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.ScrollView, { nestedScrollEnabled: true, showsVerticalScrollIndicator: false, style: { width: pageWidth }, contentContainerStyle: [styles4.page, compact && styles4.pageCompact], children: [
+      step.art !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { style: [styles4.art, { height: artHeight, backgroundColor: artBackground }], children: step.art }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "headlineSmall", style: [styles4.title, { color: fg }], children: step.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: [styles4.body, { color: fg }], children: step.body })
     ] }, i)) }),
-    steps.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles2.dots, children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: [styles2.dot, { backgroundColor: i === index ? colors.primary : fgMuted }] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: overlayActionStyles.actions, children: [
-      !isOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: isFirst ? onSkip : () => goTo(index - 1), style: overlayActionStyles.actionButton, children: isFirst ? "Skip" : "Back" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.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" })
+    steps.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles4.dots, children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { style: i === index ? [styles4.dot, { backgroundColor: colors.primary }] : [styles4.dot, styles4.dotInactive, { backgroundColor: fgMuted }] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: overlayActionStyles.actions, children: [
+      !isOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: isFirst ? onSkip : () => goTo(index - 1), style: overlayActionStyles.actionButton, children: isFirst ? "Skip" : "Back" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.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__ */ (0, import_jsx_runtime2.jsx)(HowToPlayCard, { steps, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HowToPlayCard, { steps, ...rest });
 }
-var styles2 = import_react_native3.StyleSheet.create({
+var styles4 = import_react_native5.StyleSheet.create({
   art: {
     alignItems: "center",
     borderRadius: 12,
@@ -270,8 +327,7 @@ var styles2 = import_react_native3.StyleSheet.create({
   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.
+  // overlayCard's shared `card` padding, restated: the page width above is computed from it.
   card: {
     padding: CARD_PADDING
   },
@@ -280,6 +336,9 @@ var styles2 = import_react_native3.StyleSheet.create({
     height: 8,
     width: 8
   },
+  dotInactive: {
+    opacity: 0.5
+  },
   dots: {
     flexDirection: "row",
     gap: 8
@@ -291,6 +350,11 @@ var styles2 = import_react_native3.StyleSheet.create({
     alignItems: "center",
     gap: 12
   },
+  // The 8pt this saves is what the compact dialog header cost a page on a 402pt-tall window (a
+  // Pro-size iPhone held sideways, measured on web): without it the body's second line scrolled.
+  pageCompact: {
+    gap: 8
+  },
   pager: {
     flexShrink: 1
   },
@@ -301,7 +365,7 @@ var styles2 = import_react_native3.StyleSheet.create({
 });
 
 // src/guide/GuideProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var noop = () => {
 };
 var GuideContext = (0, import_react2.createContext)({ isOpen: false, open: noop, close: noop, requestAutoShow: noop });
@@ -320,9 +384,9 @@ function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, c
     setIsOpen(true);
   }, [unseen]);
   const value = (0, import_react2.useMemo)(() => ({ isOpen, open, close, requestAutoShow }), [isOpen, open, close, requestAutoShow]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(GuideContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(GuideContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
   ] });
 }
 function useGuide() {
@@ -375,27 +439,27 @@ function createReturningPlayerMigrate(storage, legacyKeys) {
 }
 
 // src/guide/SeatDevicesHint.tsx
-var import_auto_paper3 = require("@rific/auto-paper");
-var import_react_native4 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_auto_paper5 = require("@rific/auto-paper");
+var import_react_native6 = require("react-native");
+var import_react_native_paper4 = require("react-native-paper");
+var import_jsx_runtime6 = require("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 } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
   const tints = seatColors ?? [colors.primary, colors.secondary];
   const accessibilityLabel = devices.map((device, i) => `Player ${i + 1} uses the ${device}`).join(", ");
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { accessible: true, accessibilityLabel, style: styles3.row, children: ORDER.map((device) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { accessible: true, accessibilityLabel, style: styles5.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__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Icon, { source: ICON[device].source, size: ICON[device].size, color }, device);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper4.Icon, { source: ICON[device].source, size: ICON[device].size, color }, device);
   }) });
 }
-var styles3 = import_react_native4.StyleSheet.create({
+var styles5 = import_react_native6.StyleSheet.create({
   row: {
     alignItems: "center",
     flexDirection: "row",
@@ -404,28 +468,28 @@ var styles3 = import_react_native4.StyleSheet.create({
 });
 
 // src/guide/SeatDiagram.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
-var import_react_native5 = require("react-native");
-var import_react_native_paper4 = require("react-native-paper");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_auto_paper6 = require("@rific/auto-paper");
+var import_react_native7 = require("react-native");
+var import_react_native_paper5 = require("react-native-paper");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEVICE_WIDTH = 88;
 var DEVICE_HEIGHT = 120;
 function SeatDiagram({ topColor, bottomColor, topLabel = "P2", bottomLabel = "P1" }) {
-  const { colors } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
   const top = topColor ?? colors.secondary;
   const bottom = bottomColor ?? colors.primary;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { accessible: true, accessibilityLabel: `${bottomLabel} plays the bottom half, ${topLabel} plays the top half`, style: [styles4.device, { borderColor: colors.onSurface }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles4.half, { borderColor: top }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [import_react_native5.StyleSheet.absoluteFill, styles4.tint, { backgroundColor: top }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper4.Text, { variant: "titleMedium", style: [styles4.label, styles4.flipped, { color: top }], children: topLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { accessible: true, accessibilityLabel: `${bottomLabel} plays the bottom half, ${topLabel} plays the top half`, style: [styles6.device, { borderColor: colors.onSurface }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [styles6.half, { borderColor: top }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [import_react_native7.StyleSheet.absoluteFill, styles6.tint, { backgroundColor: top }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Text, { variant: "titleMedium", style: [styles6.label, styles6.flipped, { color: top }], children: topLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles4.half, styles4.bottomHalf, { borderColor: bottom }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [import_react_native5.StyleSheet.absoluteFill, styles4.tint, { backgroundColor: bottom }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper4.Text, { variant: "titleMedium", style: [styles4.label, { color: bottom }], children: bottomLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [styles6.half, styles6.bottomHalf, { borderColor: bottom }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [import_react_native7.StyleSheet.absoluteFill, styles6.tint, { backgroundColor: bottom }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Text, { variant: "titleMedium", style: [styles6.label, { color: bottom }], children: bottomLabel })
     ] })
   ] });
 }
-var styles4 = import_react_native5.StyleSheet.create({
+var styles6 = import_react_native7.StyleSheet.create({
   bottomHalf: {
     borderTopWidth: 0
   },
@@ -456,12 +520,12 @@ var styles4 = import_react_native5.StyleSheet.create({
 });
 
 // src/guide/SwipeHint.tsx
-var import_auto_paper5 = require("@rific/auto-paper");
+var import_auto_paper7 = require("@rific/auto-paper");
 var import_react3 = require("react");
-var import_react_native6 = require("react-native");
-var import_react_native_paper5 = require("react-native-paper");
+var import_react_native8 = require("react-native");
+var import_react_native_paper6 = require("react-native-paper");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DOT_COUNT = 7;
 var FINGER_SIZE = 28;
 var MOUSE_SIZE = 30;
@@ -469,7 +533,7 @@ 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 } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
   const tint = color ?? colors.primary;
   const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
   const progress = (0, import_react_native_reanimated2.useSharedValue)(0.5);
@@ -491,13 +555,13 @@ function SwipeHint({ direction = "right", pointer = "finger", color, length = 96
     };
   });
   const axis = horizontal ? sign > 0 ? "row" : "row-reverse" : sign > 0 ? "column" : "column-reverse";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { accessibilityLabel: `${pointer === "mouse" ? "Drag" : "Swipe"} ${direction}`, accessible: true, style: [styles5.path, { flexDirection: axis }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [styles5.dots, { flexDirection: axis, [horizontal ? "width" : "height"]: length }], children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [styles5.dot, { backgroundColor: tint, opacity: 0.35 + 0.65 * i / (DOT_COUNT - 1) }] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Icon, { source: ARROW_ICON[direction], size: 28, color: tint }),
-    pointer === "mouse" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated2.default.View, { style: [styles5.mouse, fingerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Icon, { source: "mouse", size: MOUSE_SIZE, color: tint }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated2.default.View, { style: [styles5.finger, { borderColor: tint }, fingerStyle] })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { accessibilityLabel: `${pointer === "mouse" ? "Drag" : "Swipe"} ${direction}`, accessible: true, style: [styles7.path, { flexDirection: axis }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: [styles7.dots, { flexDirection: axis, [horizontal ? "width" : "height"]: length }], children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: [styles7.dot, { backgroundColor: tint, opacity: 0.35 + 0.65 * i / (DOT_COUNT - 1) }] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Icon, { source: ARROW_ICON[direction], size: 28, color: tint }),
+    pointer === "mouse" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_reanimated2.default.View, { style: [styles7.mouse, fingerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Icon, { source: "mouse", size: MOUSE_SIZE, color: tint }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_reanimated2.default.View, { style: [styles7.finger, { borderColor: tint }, fingerStyle] })
   ] });
 }
-var styles5 = import_react_native6.StyleSheet.create({
+var styles7 = import_react_native8.StyleSheet.create({
   dot: {
     borderRadius: 3,
     height: 6,

package/dist/guide/index.mjs

@@ -1,8 +1,11 @@
 import {
-  getOverlayCardColors,
+  DialogHeader,
+  OverlayBackdrop,
+  OverlayCard,
+  isCompactDialogHeight,
   overlayActionStyles,
-  overlayStyles
-} from "../chunk-32U2OIRW.mjs";
+  useOverlayCardColors
+} from "../chunk-PUF6TABL.mjs";
 
 // src/guide/DirectionKeysHint.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
@@ -72,21 +75,22 @@ 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);
+  const compact = isCompactDialogHeight(turned ? windowWidth : windowHeight);
   return {
     width,
     pageWidth: width - CARD_PADDING * 2,
     maxHeight: availableHeight,
-    artHeight: availableHeight < COMPACT_BELOW ? ART_HEIGHT_COMPACT : ART_HEIGHT
+    artHeight: compact ? ART_HEIGHT_COMPACT : ART_HEIGHT,
+    compact
   };
 }
-function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
+function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0, title = "How to Play", icon = "help-circle-outline" }) {
   const { dark, colors } = useAutoPaperTheme2();
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   const reducedMotion = useReducedMotion();
@@ -99,8 +103,8 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
     });
     return () => subscription.remove();
   }, [onSkip]);
-  const { fg, cardBg, cardBorder, fgMuted } = getOverlayCardColors(dark);
-  const { width: cardWidth, pageWidth, maxHeight, artHeight } = getGuideCardSize(windowWidth, windowHeight, rotation);
+  const { fg, fgMuted } = useOverlayCardColors();
+  const { width: cardWidth, pageWidth, maxHeight, artHeight, compact } = getGuideCardSize(windowWidth, windowHeight, rotation);
   const rotationStyle = rotation === 0 ? void 0 : { transform: [{ rotate: `${rotation}deg` }] };
   const isFirst = index === 0;
   const isLast = index === steps.length - 1;
@@ -128,13 +132,14 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
     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: [
+  return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(OverlayBackdrop, { style: styles2.overlay, children: /* @__PURE__ */ jsxs2(OverlayCard, { accessibilityViewIsModal: true, style: [styles2.card, { width: cardWidth, maxHeight }, rotationStyle], children: [
+    /* @__PURE__ */ jsx2(DialogHeader, { icon, title, compact }),
+    /* @__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, compact && styles2.pageCompact], 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)) }),
+    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: i === index ? [styles2.dot, { backgroundColor: colors.primary }] : [styles2.dot, styles2.dotInactive, { backgroundColor: 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" })
@@ -156,8 +161,7 @@ var styles2 = StyleSheet2.create({
   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.
+  // overlayCard's shared `card` padding, restated: the page width above is computed from it.
   card: {
     padding: CARD_PADDING
   },
@@ -166,6 +170,9 @@ var styles2 = StyleSheet2.create({
     height: 8,
     width: 8
   },
+  dotInactive: {
+    opacity: 0.5
+  },
   dots: {
     flexDirection: "row",
     gap: 8
@@ -177,6 +184,11 @@ var styles2 = StyleSheet2.create({
     alignItems: "center",
     gap: 12
   },
+  // The 8pt this saves is what the compact dialog header cost a page on a 402pt-tall window (a
+  // Pro-size iPhone held sideways, measured on web): without it the body's second line scrolled.
+  pageCompact: {
+    gap: 8
+  },
   pager: {
     flexShrink: 1
   },

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, OverlayCardColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles } from './chrome/index.mjs';
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors } from './chrome/index.mjs';
 import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, OverlayCardColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles } from './chrome/index.js';
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, BaseSettingsDialogProps, BaseStatsScreen, COMPACT_DIALOG_HEIGHT, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, DialogHeader, DialogHeaderProps, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardProps, OverlayCardThemeColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, getStaggeredWordDuration, isCompactDialogHeight, overlayActionStyles, overlayStyles, useCompactDialog, useOverlayCardColors } from './chrome/index.js';
 import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';