@tastic/hud 0.16.0 → 0.17.0

package/dist/{chunk-32U2OIRW.mjs → chunk-AX4GC5KU.mjs}

@@ -70,8 +70,32 @@ var overlayActionStyles = StyleSheet.create({
   }
 });
 
+// src/OverlaySurface.tsx
+import { BlurView, useAutoPaperTheme, useBlur } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet2, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function useOverlayCardColors() {
+  const { colors } = useAutoPaperTheme();
+  return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
+}
+function OverlayBackdrop({ children, style }) {
+  const { backdrop } = useOverlayCardColors();
+  return /* @__PURE__ */ jsx(View, { style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
+}
+function OverlayCard({ children, style, ...rest }) {
+  const { cardBorder } = useOverlayCardColors();
+  const blur = useBlur();
+  return /* @__PURE__ */ jsx(BlurView, { blur, elevation: 3, style: [overlayStyles.card, styles.card, { borderColor: cardBorder }, style], ...rest, children });
+}
+var styles = StyleSheet2.create({
+  card: { overflow: "hidden" }
+});
+
 export {
   getOverlayCardColors,
   overlayStyles,
-  overlayActionStyles
+  overlayActionStyles,
+  useOverlayCardColors,
+  OverlayBackdrop,
+  OverlayCard
 };

package/dist/guide/index.js

@@ -100,23 +100,15 @@ 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_paper3 = 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_native4 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 var import_react_native_reanimated = require("react-native-reanimated");
 
 // src/overlayCard.ts
 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 overlayStyles = import_react_native2.StyleSheet.create({
   card: {
     alignItems: "center",
@@ -179,8 +171,29 @@ var overlayActionStyles = import_react_native2.StyleSheet.create({
   }
 });
 
-// src/guide/HowToPlayDialog.tsx
+// src/OverlaySurface.tsx
+var import_auto_paper2 = require("@rific/auto-paper");
+var import_react_native3 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function useOverlayCardColors() {
+  const { colors } = (0, import_auto_paper2.useAutoPaperTheme)();
+  return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
+}
+function OverlayBackdrop({ children, style }) {
+  const { backdrop } = useOverlayCardColors();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
+}
+function OverlayCard({ children, style, ...rest }) {
+  const { cardBorder } = useOverlayCardColors();
+  const blur = (0, import_auto_paper2.useBlur)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.BlurView, { blur, elevation: 3, style: [overlayStyles.card, styles2.card, { borderColor: cardBorder }, style], ...rest, children });
+}
+var styles2 = import_react_native3.StyleSheet.create({
+  card: { overflow: "hidden" }
+});
+
+// src/guide/HowToPlayDialog.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var OVERLAY_GUTTER = 24;
 var CARD_PADDING = 24;
 var MAX_CARD_WIDTH = 360;
@@ -201,19 +214,19 @@ function getGuideCardSize(windowWidth, windowHeight, rotation) {
   };
 }
 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)();
+  const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native4.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_native4.BackHandler.addEventListener("hardwareBackPress", () => {
       onSkip();
       return true;
     });
     return () => subscription.remove();
   }, [onSkip]);
-  const { fg, cardBg, cardBorder, fgMuted } = getOverlayCardColors(dark);
+  const { fg, fgMuted } = useOverlayCardColors();
   const { width: cardWidth, pageWidth, maxHeight, artHeight } = getGuideCardSize(windowWidth, windowHeight, rotation);
   const rotationStyle = rotation === 0 ? void 0 : { transform: [{ rotate: `${rotation}deg` }] };
   const isFirst = index === 0;
@@ -242,24 +255,24 @@ 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_runtime3.jsx)(import_react_native_paper2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OverlayBackdrop, { style: styles3.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(OverlayCard, { accessibilityViewIsModal: true, style: [styles3.card, { width: cardWidth, maxHeight }, rotationStyle], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.ScrollView, { ref: scrollRef, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, scrollEventThrottle: 16, onMomentumScrollEnd: handleMomentumEnd, style: [styles3.pager, { width: pageWidth }], children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.ScrollView, { nestedScrollEnabled: true, showsVerticalScrollIndicator: false, style: { width: pageWidth }, contentContainerStyle: styles3.page, children: [
+      step.art !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: [styles3.art, { height: artHeight, backgroundColor: artBackground }], children: step.art }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Text, { variant: "headlineSmall", style: [styles3.title, { color: fg }], children: step.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Text, { variant: "bodyMedium", style: [styles3.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_runtime3.jsx)(import_react_native4.View, { accessible: true, accessibilityLabel: `Step ${index + 1} of ${steps.length}`, style: styles3.dots, children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: i === index ? [styles3.dot, { backgroundColor: colors.primary }] : [styles3.dot, styles3.dotInactive, { backgroundColor: fgMuted }] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: overlayActionStyles.actions, children: [
+      !isOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: isFirst ? onSkip : () => goTo(index - 1), style: overlayActionStyles.actionButton, children: isFirst ? "Skip" : "Back" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(HowToPlayCard, { steps, ...rest });
 }
-var styles2 = import_react_native3.StyleSheet.create({
+var styles3 = import_react_native4.StyleSheet.create({
   art: {
     alignItems: "center",
     borderRadius: 12,
@@ -280,6 +293,9 @@ var styles2 = import_react_native3.StyleSheet.create({
     height: 8,
     width: 8
   },
+  dotInactive: {
+    opacity: 0.5
+  },
   dots: {
     flexDirection: "row",
     gap: 8
@@ -301,7 +317,7 @@ var styles2 = import_react_native3.StyleSheet.create({
 });
 
 // src/guide/GuideProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var noop = () => {
 };
 var GuideContext = (0, import_react2.createContext)({ isOpen: false, open: noop, close: noop, requestAutoShow: noop });
@@ -320,9 +336,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_runtime4.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_runtime4.jsx)(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
   ] });
 }
 function useGuide() {
@@ -375,27 +391,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_auto_paper4 = require("@rific/auto-paper");
+var import_react_native5 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = 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_paper4.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_runtime5.jsx)(import_react_native5.View, { accessible: true, accessibilityLabel, style: styles4.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_runtime5.jsx)(import_react_native_paper3.Icon, { source: ICON[device].source, size: ICON[device].size, color }, device);
   }) });
 }
-var styles3 = import_react_native4.StyleSheet.create({
+var styles4 = import_react_native5.StyleSheet.create({
   row: {
     alignItems: "center",
     flexDirection: "row",
@@ -404,28 +420,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_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_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = 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_paper5.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_runtime6.jsxs)(import_react_native6.View, { accessible: true, accessibilityLabel: `${bottomLabel} plays the bottom half, ${topLabel} plays the top half`, style: [styles5.device, { borderColor: colors.onSurface }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [styles5.half, { borderColor: top }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [import_react_native6.StyleSheet.absoluteFill, styles5.tint, { backgroundColor: top }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper4.Text, { variant: "titleMedium", style: [styles5.label, styles5.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_runtime6.jsxs)(import_react_native6.View, { style: [styles5.half, styles5.bottomHalf, { borderColor: bottom }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [import_react_native6.StyleSheet.absoluteFill, styles5.tint, { backgroundColor: bottom }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper4.Text, { variant: "titleMedium", style: [styles5.label, { color: bottom }], children: bottomLabel })
     ] })
   ] });
 }
-var styles4 = import_react_native5.StyleSheet.create({
+var styles5 = import_react_native6.StyleSheet.create({
   bottomHalf: {
     borderTopWidth: 0
   },
@@ -456,12 +472,12 @@ var styles4 = import_react_native5.StyleSheet.create({
 });
 
 // src/guide/SwipeHint.tsx
-var import_auto_paper5 = require("@rific/auto-paper");
+var import_auto_paper6 = require("@rific/auto-paper");
 var import_react3 = require("react");
-var import_react_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_react_native_paper5 = 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_runtime7 = require("react/jsx-runtime");
 var DOT_COUNT = 7;
 var FINGER_SIZE = 28;
 var MOUSE_SIZE = 30;
@@ -469,7 +485,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_paper6.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 +507,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_runtime7.jsxs)(import_react_native7.View, { accessibilityLabel: `${pointer === "mouse" ? "Drag" : "Swipe"} ${direction}`, accessible: true, style: [styles6.path, { flexDirection: axis }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [styles6.dots, { flexDirection: axis, [horizontal ? "width" : "height"]: length }], children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [styles6.dot, { backgroundColor: tint, opacity: 0.35 + 0.65 * i / (DOT_COUNT - 1) }] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Icon, { source: ARROW_ICON[direction], size: 28, color: tint }),
+    pointer === "mouse" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_reanimated2.default.View, { style: [styles6.mouse, fingerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Icon, { source: "mouse", size: MOUSE_SIZE, color: tint }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_reanimated2.default.View, { style: [styles6.finger, { borderColor: tint }, fingerStyle] })
   ] });
 }
-var styles5 = import_react_native6.StyleSheet.create({
+var styles6 = import_react_native7.StyleSheet.create({
   dot: {
     borderRadius: 3,
     height: 6,

package/dist/guide/index.mjs

@@ -1,8 +1,9 @@
 import {
-  getOverlayCardColors,
+  OverlayBackdrop,
+  OverlayCard,
   overlayActionStyles,
-  overlayStyles
-} from "../chunk-32U2OIRW.mjs";
+  useOverlayCardColors
+} from "../chunk-AX4GC5KU.mjs";
 
 // src/guide/DirectionKeysHint.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
@@ -99,7 +100,7 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }) {
     });
     return () => subscription.remove();
   }, [onSkip]);
-  const { fg, cardBg, cardBorder, fgMuted } = getOverlayCardColors(dark);
+  const { fg, fgMuted } = useOverlayCardColors();
   const { width: cardWidth, pageWidth, maxHeight, artHeight } = getGuideCardSize(windowWidth, windowHeight, rotation);
   const rotationStyle = rotation === 0 ? void 0 : { transform: [{ rotate: `${rotation}deg` }] };
   const isFirst = index === 0;
@@ -128,13 +129,13 @@ 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: [
+  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(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)) }),
+    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" })
@@ -166,6 +167,9 @@ var styles2 = StyleSheet2.create({
     height: 8,
     width: 8
   },
+  dotInactive: {
+    opacity: 0.5
+  },
   dots: {
     flexDirection: "row",
     gap: 8

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, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardColors, OverlayCardProps, OverlayCardThemeColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles, 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, ConfirmDialog, ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, OverlayBackdrop, OverlayBackdropProps, OverlayCard, OverlayCardColors, OverlayCardProps, OverlayCardThemeColors, RotatedFrame, RotatedFrameProps, StaggeredWord, StaggeredWordProps, StatRow, StatSection, UpdateDialog, UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles, useOverlayCardColors } from './chrome/index.js';
 import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
 import { AchievementTier } from '@tastic/achievements';