@tastic/hud 0.8.5 → 0.13.0

package/dist/guide/index.js

@@ -0,0 +1,543 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/guide/index.ts
+var guide_exports = {};
+__export(guide_exports, {
+  DirectionKeysHint: () => DirectionKeysHint,
+  GuideProvider: () => GuideProvider,
+  HowToPlayDialog: () => HowToPlayDialog,
+  SeatDevicesHint: () => SeatDevicesHint,
+  SeatDiagram: () => SeatDiagram,
+  SwipeHint: () => SwipeHint,
+  createGuideSlice: () => createGuideSlice,
+  createReturningPlayerMigrate: () => createReturningPlayerMigrate,
+  getGuideCardSize: () => getGuideCardSize,
+  useAutoShowGuide: () => useAutoShowGuide,
+  useGuide: () => useGuide
+});
+module.exports = __toCommonJS(guide_exports);
+
+// src/guide/DirectionKeysHint.tsx
+var import_auto_paper = require("@rific/auto-paper");
+var import_react_native = require("react-native");
+var import_react_native_paper = require("react-native-paper");
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.cap, { borderColor: color }], children: label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "titleMedium", style: [styles.capLabel, { color }], children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color }) });
+}
+function DirectionKeysHint({ labels, axis = "both", color }) {
+  const { colors } = (0, import_auto_paper.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__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessible: true, accessibilityLabel: accessibilityLabel2, style: styles.cluster, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyCap, { label: labels?.up, icon: ARROWS.up, color: tint }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { accessible: true, accessibilityLabel, style: styles.cluster, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyCap, { label: labels?.up, icon: ARROWS.up, color: tint }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyCap, { label: labels?.left, icon: ARROWS.left, color: tint }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyCap, { label: labels?.down, icon: ARROWS.down, color: tint }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyCap, { label: labels?.right, icon: ARROWS.right, color: tint })
+    ] })
+  ] });
+}
+var styles = import_react_native.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
+var import_react2 = require("react");
+
+// src/guide/HowToPlayDialog.tsx
+var import_auto_paper2 = 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_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",
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlay: {
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.72)",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  }
+});
+var overlayActionStyles = import_react_native2.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
+  // row instead (see actions' flexWrap below). This used to be flexBasis: 128, which measured
+  // correctly on web but rendered every button roughly SQUARE on iOS - confirmed live (see the
+  // "Quit Match?" Cancel/Quit buttons and the single-button "OK" dialogs both coming out ~128pt
+  // tall instead of wide). Root cause: react-native-paper's Button renders its Surface as two
+  // nested views on iOS only (Surface.tsx's SurfaceIOS, for shadow rendering) - only a curated
+  // allowlist of style keys (flex/flexGrow/flexShrink/width/height/position/... - notably NOT
+  // flexBasis) reaches the outer view, which is the real flex item inside this row; every other
+  // key, flexBasis included, falls through to an inner view whose own unspecified flexDirection
+  // defaults to column. flexGrow: 1 landed on the (row-context) outer view and grew width
+  // correctly; flexBasis: 128 landed on the (column-context) inner view instead, where a flexBasis
+  // sets HEIGHT, not width. minWidth isn't axis-relative like flexBasis, so it constrains width
+  // correctly regardless of which of the two views it ends up on. react-native-paper's Button also
+  // hardcodes numberOfLines={1} on its label with no override, so a button squeezed under its
+  // label's natural width silently ellipsizes ("Cancel" -> "Can...") instead of wrapping - assumed
+  // fixable by just giving the row more width, until confirmed live that these two-word labels
+  // (Cancel/Reset/New Game) can still lose the truncation fight even with the extra room ConfirmDialog's own
+  // card width fix provides, on a narrow enough screen.
+  actionButton: {
+    flexGrow: 1,
+    minWidth: 128
+  },
+  // A lone confirm button (no cancel - BaseSettingsDialog's info-only "OK" dialogs, e.g. the
+  // update-check "no update found" message) has nothing left to share actions' width with, so
+  // actionButton's own flexGrow: 1 would stretch it across the entire row instead of reading as a
+  // normal button. Same 128 floor, no flexGrow, so it stays at that natural size instead of filling
+  // the card - centered by actions' own justifyContent below.
+  actionButtonSingle: {
+    minWidth: 128
+  },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    justifyContent: "center",
+    width: "100%"
+  }
+});
+
+// src/guide/HowToPlayDialog.tsx
+var import_jsx_runtime2 = 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);
+  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 } = (0, import_auto_paper2.useAutoPaperTheme)();
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native3.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", () => {
+      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 = (0, import_react.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__ */ (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 })
+    ] }, 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" })
+    ] })
+  ] }) }) });
+}
+function HowToPlayDialog({ visible, steps, ...rest }) {
+  if (!visible || steps.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HowToPlayCard, { steps, ...rest });
+}
+var styles2 = import_react_native3.StyleSheet.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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var noop = () => {
+};
+var GuideContext = (0, import_react2.createContext)({ isOpen: false, open: noop, close: noop, requestAutoShow: noop });
+function GuideProvider({ steps, currentVersion, seenVersion, onSeen, rotation, children }) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const autoShownRef = (0, import_react2.useRef)(false);
+  const unseen = seenVersion < currentVersion;
+  const open = (0, import_react2.useCallback)(() => setIsOpen(true), []);
+  const close = (0, import_react2.useCallback)(() => {
+    setIsOpen(false);
+    if (unseen) onSeen(currentVersion);
+  }, [unseen, onSeen, currentVersion]);
+  const requestAutoShow = (0, import_react2.useCallback)(() => {
+    if (!unseen || autoShownRef.current) return;
+    autoShownRef.current = true;
+    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: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HowToPlayDialog, { visible: isOpen, steps, onFinish: close, onSkip: close, rotation })
+  ] });
+}
+function useGuide() {
+  return (0, import_react2.useContext)(GuideContext);
+}
+function useAutoShowGuide(enabled = true) {
+  const { requestAutoShow } = useGuide();
+  (0, import_react2.useEffect)(() => {
+    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
+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 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 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) => {
+    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);
+  }) });
+}
+var styles3 = import_react_native4.StyleSheet.create({
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 20
+  }
+});
+
+// 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 DEVICE_WIDTH = 88;
+var DEVICE_HEIGHT = 120;
+function SeatDiagram({ topColor, bottomColor, topLabel = "P2", bottomLabel = "P1" }) {
+  const { colors } = (0, import_auto_paper4.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 })
+    ] }),
+    /* @__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 })
+    ] })
+  ] });
+}
+var styles4 = import_react_native5.StyleSheet.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
+var import_auto_paper5 = 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_native_reanimated2 = __toESM(require("react-native-reanimated"));
+var import_jsx_runtime6 = require("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 } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const tint = color ?? colors.primary;
+  const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
+  const progress = (0, import_react_native_reanimated2.useSharedValue)(0.5);
+  const horizontal = direction === "left" || direction === "right";
+  const sign = direction === "right" || direction === "down" ? 1 : -1;
+  (0, import_react3.useEffect)(() => {
+    if (reducedMotion) {
+      progress.value = 0.5;
+      return;
+    }
+    progress.value = 0;
+    progress.value = (0, import_react_native_reanimated2.withRepeat)((0, import_react_native_reanimated2.withSequence)((0, import_react_native_reanimated2.withTiming)(1, { duration: SWEEP_MS, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.cubic) }), (0, import_react_native_reanimated2.withTiming)(1, { duration: PAUSE_MS }), (0, import_react_native_reanimated2.withTiming)(0, { duration: 0 })), -1);
+  }, [reducedMotion]);
+  const fingerStyle = (0, import_react_native_reanimated2.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__ */ (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] })
+  ] });
+}
+var styles5 = import_react_native6.StyleSheet.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"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DirectionKeysHint,
+  GuideProvider,
+  HowToPlayDialog,
+  SeatDevicesHint,
+  SeatDiagram,
+  SwipeHint,
+  createGuideSlice,
+  createReturningPlayerMigrate,
+  getGuideCardSize,
+  useAutoShowGuide,
+  useGuide
+});