@tastic/hud 0.14.1 → 0.15.0

package/dist/chrome/index.js

@@ -0,0 +1,772 @@
+"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/chrome/index.ts
+var chrome_exports = {};
+__export(chrome_exports, {
+  AchievementCatalogSection: () => AchievementCatalogSection,
+  AchievementRow: () => AchievementRow,
+  ActivityStatSection: () => ActivityStatSection,
+  BaseSettingsDialog: () => BaseSettingsDialog,
+  BaseStatsScreen: () => BaseStatsScreen,
+  ConfirmDialog: () => ConfirmDialog,
+  ContentGutter: () => ContentGutter,
+  CornerActionButtons: () => CornerActionButtons,
+  LOCKED_BADGE_COLOR: () => LOCKED_BADGE_COLOR,
+  MONO_FONT: () => MONO_FONT,
+  RotatedFrame: () => RotatedFrame,
+  StaggeredWord: () => StaggeredWord,
+  StatRow: () => StatRow,
+  StatSection: () => StatSection,
+  UpdateDialog: () => UpdateDialog,
+  getOverlayCardColors: () => getOverlayCardColors,
+  getStaggeredWordDuration: () => getStaggeredWordDuration,
+  overlayActionStyles: () => overlayActionStyles,
+  overlayStyles: () => overlayStyles
+});
+module.exports = __toCommonJS(chrome_exports);
+
+// src/AchievementCatalogSection.tsx
+var import_auto_paper2 = require("@rific/auto-paper");
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+var import_react_native_paper2 = require("react-native-paper");
+
+// src/AchievementRow.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 LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
+function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
+  const { dark } = (0, import_auto_paper.useAutoPaperTheme)();
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const unlocked = unlockedLabel !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.text, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodyLarge", style: [styles.boldText, { color: fg }], children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodySmall", style: { color: fgMuted }, children: description }),
+      deviceMarker && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.deviceMarker, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: "earth", size: 11, color: fgMuted }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "labelSmall", style: { color: fgMuted }, children: "Same for every profile" })
+      ] }),
+      !unlocked && progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.ProgressBar, { progress, color: checkColor ?? badgeColor, style: styles.progressBar })
+    ] }),
+    unlocked ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.status, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: "check-circle", size: 20, color: checkColor ?? badgeColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "labelSmall", style: { color: fgMuted }, children: unlockedLabel })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: "lock-outline", size: 20, color: fgMuted })
+  ] });
+}
+var styles = import_react_native.StyleSheet.create({
+  badge: {
+    alignItems: "center",
+    borderRadius: 10,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  boldText: {
+    fontWeight: "bold"
+  },
+  deviceMarker: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4
+  },
+  progressBar: {
+    borderRadius: 4,
+    height: 6,
+    marginTop: 6
+  },
+  row: {
+    alignItems: "center",
+    borderRadius: 12,
+    flexDirection: "row",
+    gap: 12,
+    padding: 12
+  },
+  status: {
+    alignItems: "center",
+    gap: 2,
+    width: 64
+  },
+  text: {
+    flex: 1,
+    gap: 2
+  }
+});
+
+// src/fonts.ts
+var import_react_native2 = require("react-native");
+var MONO_FONT = import_react_native2.Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
+
+// src/AchievementCatalogSection.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
+  const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
+    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: row.tierColor, unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+  ] });
+}
+var styles2 = import_react_native3.StyleSheet.create({
+  label: {
+    letterSpacing: 2,
+    marginTop: 8
+  }
+});
+
+// src/StatRow.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_runtime3 = require("react/jsx-runtime");
+function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
+  const { dark } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyMedium", style: [styles3.value, { color: fg }], children: value })
+  ] });
+}
+var styles3 = import_react_native4.StyleSheet.create({
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  value: {
+    fontWeight: "bold"
+  }
+});
+
+// src/StatSection.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_runtime4 = require("react/jsx-runtime");
+function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
+  const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: [styles4.section, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "labelMedium", style: [styles4.label, { color: fg }], children: label }),
+    children
+  ] });
+}
+var styles4 = import_react_native5.StyleSheet.create({
+  // Bold and full-contrast (fg), not the original fontless/fgMuted treatment - that read at the
+  // same visual weight as StatRow's own row labels below it (both used the identical muted color;
+  // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
+  // at a glance). Matches AchievementRow's own title styling (bold + fg) below it in the same list.
+  label: {
+    fontWeight: "bold",
+    letterSpacing: 2
+  },
+  section: {
+    borderRadius: 12,
+    gap: 8,
+    padding: 16
+  }
+});
+
+// src/ActivityStatSection.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ActivityStatSection({ stats }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(StatSection, { label: "ACTIVITY", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak) })
+  ] });
+}
+
+// src/BaseSettingsDialog.tsx
+var import_auto_paper6 = require("@rific/auto-paper");
+var import_feedback_press2 = require("@rific/feedback-press");
+var import_updater = require("@rific/updater");
+var import_core3 = require("@tastic/core");
+var import_react4 = require("react");
+var import_react_native9 = require("react-native");
+var import_react_native_paper7 = require("react-native-paper");
+
+// src/ConfirmDialog.tsx
+var import_auto_paper5 = require("@rific/auto-paper");
+var import_feedback_press = require("@rific/feedback-press");
+var import_core = require("@tastic/core");
+var import_react_native7 = require("react-native");
+var import_react_native_paper5 = require("react-native-paper");
+
+// src/overlayCard.ts
+var import_react_native6 = 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_native6.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_native6.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/ConfirmDialog.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
+  const { dark, colors } = (0, import_auto_paper5.useAutoPaperTheme)();
+  if (!visible) return null;
+  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark);
+  const accent = destructive ? colors.danger : colors.primary;
+  const onAccent = destructive ? colors.onDanger : colors.onPrimary;
+  const showCancel = cancelLabel !== void 0 && onCancel !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native7.View, { style: [overlayStyles.overlay, styles5.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native7.View, { style: [overlayStyles.card, styles5.card, { backgroundColor: cardBg, borderColor: cardBorder }, (0, import_core.toRotationStyle)(rotation)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Icon, { source: icon, size: 64, color: accent }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Text, { variant: "headlineLarge", style: [styles5.title, { color: accent }], children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Text, { variant: "bodyLarge", style: [styles5.body, { color: fg }], children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native7.View, { style: overlayActionStyles.actions, children: [
+      showCancel && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: onCancel, style: overlayActionStyles.actionButton, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_feedback_press.Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+    ] })
+  ] }) }) });
+}
+var styles5 = import_react_native7.StyleSheet.create({
+  body: {
+    textAlign: "center"
+  },
+  // Additive on top of overlayCard's own shared `card` shape (borderRadius/borderWidth/gap/maxWidth/
+  // padding) - claims its full allowance instead of just maxWidth alone, which only caps how wide the
+  // card is allowed to get - without an explicit width, a flex-centered child sizes to its own content
+  // instead of stretching, so the card (and therefore actions below) can end up narrower than the
+  // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
+  card: {
+    width: "100%"
+  },
+  // Additive on top of overlayCard's own shared `overlay` backdrop - gives the card room to breathe
+  // from the screen edges now that it reliably stretches to fill its full width allowance (see
+  // card's own width comment) - without this, width: '100%' would run the card edge-to-edge on a
+  // screen narrower than maxWidth's own 360.
+  overlay: {
+    paddingHorizontal: 24
+  },
+  // textAlign is load-bearing, not decorative, once `title` wraps to more than one line - centered
+  // within card's own alignItems: 'center' only centers the Text's block as a whole; each wrapped
+  // line inside that block still defaults to left-aligned without this.
+  title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+
+// src/RotatedFrame.tsx
+var import_core2 = require("@tastic/core");
+var import_react2 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_native_paper6 = require("react-native-paper");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea = false, portalHost = false, passThrough = false, maxContentWidth }) {
+  const ambientRotation = (0, import_core2.useRotation)();
+  const rotation = rotationOverride ?? ambientRotation;
+  const window = (0, import_react_native8.useWindowDimensions)();
+  const { width, height } = (0, import_core2.rotateDimensions)(window.width, window.height, rotation);
+  const rawInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const insets = (0, import_react2.useMemo)(() => rotatedSafeArea ? (0, import_core2.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
+  const cappedWidth = maxContentWidth !== void 0 && width > height ? maxContentWidth : void 0;
+  const column = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { style: [styles6.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core2.FakeLandscapeView, { rotation, passThrough, style: styles6.root, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper6.Portal.Host, { children: column }) : column }) });
+}
+var styles6 = import_react_native8.StyleSheet.create({
+  // A centred column: full width up to `maxWidth`, so a capped frame sits in the middle of a wider window.
+  column: {
+    alignSelf: "center",
+    flex: 1,
+    width: "100%"
+  },
+  root: {
+    flex: 1
+  }
+});
+
+// src/useUpdateConfirmBridge.ts
+var import_react3 = require("react");
+function useUpdateConfirmBridge() {
+  const [manifest, setManifest] = (0, import_react3.useState)(null);
+  const resolveRef = (0, import_react3.useRef)(null);
+  const onConfirm = (0, import_react3.useCallback)(
+    (next) => new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setManifest(next);
+    }),
+    []
+  );
+  const respond = (0, import_react3.useCallback)((confirmed) => {
+    setManifest(null);
+    resolveRef.current?.(confirmed);
+    resolveRef.current = null;
+  }, []);
+  return { manifest, onConfirm, respond };
+}
+
+// src/BaseSettingsDialog.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SettingIcon({ source, color, containerColor }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, { style: [styles7.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Icon, { source, size: 18, color }) });
+}
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
+  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core3.useRotation)();
+  const rotation = rotationOverride ?? ambientRotation;
+  const isTouchPrimary = (0, import_core3.useIsTouchPrimaryDevice)();
+  const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press2.useHapticSettings)();
+  const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
+  const sound = (0, import_react4.useContext)(import_feedback_press2.SoundContext);
+  const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
+  const [infoMessage, setInfoMessage] = (0, import_react4.useState)(null);
+  const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
+  const { check, checking, updateReady } = (0, import_updater.useUpdater)({
+    autoCheck: false,
+    autoPrompt: false,
+    onConfirm: onUpdateConfirm,
+    onError: onUpdateError,
+    onInfo: (title, message) => setInfoMessage({ title, message })
+  });
+  const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
+  const [opened, setOpened] = (0, import_react4.useState)(visible);
+  if (visible && !opened) setOpened(true);
+  const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
+  const showEdgeGuard = import_react_native9.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showHaptics = import_react_native9.Platform.OS !== "web" && !hideHaptics;
+  const showSound = !hideSound;
+  const showAppearance = !hideAppearance;
+  const showUpdateCheck = import_react_native9.Platform.OS !== "web" && !hideUpdateCheck;
+  if (!opened) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_auto_paper6.Dialog, { visible, onDismiss, style: styles7.dialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper6.Dialog.Title, { children: "Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper6.Dialog.ScrollArea, { style: styles7.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.ScrollView, { contentContainerStyle: styles7.content, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.toggleGroup, children: [
+          showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles7.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.toggleContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.flexShrink, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
+            ] })
+          ] }) }),
+          showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles7.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.toggleContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.flexShrink, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
+            ] })
+          ] }) }),
+          (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.toggleRow, children: [
+            showSound && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_feedback_press2.TouchableRipple,
+              {
+                soundDisabled: true,
+                onPress: () => {
+                  const enabled = !soundSettings.enabled;
+                  setSoundSettings({ enabled });
+                  if (enabled) sound.selection?.();
+                },
+                style: styles7.toggleButtonInRow,
+                accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
+                ] })
+              }
+            ),
+            showHaptics && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_feedback_press2.TouchableRipple,
+              {
+                hapticDisabled: true,
+                onPress: () => {
+                  const vibrate = !hapticSettings.vibrate;
+                  setHapticSettings({ vibrate });
+                  if (vibrate) forceHapticFeedback();
+                },
+                style: styles7.toggleButtonInRow,
+                accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                ] })
+              }
+            )
+          ] }),
+          onShowHowToPlay && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_feedback_press2.TouchableRipple,
+            {
+              onPress: () => {
+                onDismiss();
+                onShowHowToPlay();
+              },
+              style: styles7.toggleButton,
+              accessibilityLabel: "How to Play",
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.toggleContent, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.flexShrink, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay the quick intro" })
+                ] })
+              ] })
+            }
+          )
+        ] }),
+        showAppearance && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper7.Text, { variant: "labelMedium", style: [styles7.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper6.AutoAppearancePicker, { showLabels: false })
+        ] }),
+        children,
+        showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: styles7.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_paper7.Text, { variant: "labelSmall", style: [styles7.sectionLabel, { color: colors.onSurfaceVariant }], children: [
+            "VERSION ",
+            version,
+            updateReady ? " \xB7 UPDATE READY" : ""
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ConfirmDialog, { visible: !!updateManifest, title: "Update Available", message: updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation: 0, onConfirm: () => respondToUpdateConfirm(true), onCancel: () => respondToUpdateConfirm(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
+  ] }) });
+}
+var styles7 = import_react_native9.StyleSheet.create({
+  content: {
+    gap: 24,
+    paddingVertical: 20
+  },
+  // Caps the card so it never grows past the screen - without this the dialog just keeps
+  // growing to fit its content and the overflow gets clipped by the screen edge, which is
+  // what happened in landscape where there's less height to work with. Dialog.ScrollArea +
+  // ScrollView below then take over and let the content scroll within that bound.
+  dialog: {
+    maxHeight: "90%"
+  },
+  flexShrink: {
+    flexShrink: 1
+  },
+  iconBadge: {
+    alignItems: "center",
+    borderRadius: 10,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  scrollArea: {
+    marginBottom: 0
+  },
+  section: {
+    gap: 12
+  },
+  sectionLabel: {
+    letterSpacing: 2
+  },
+  // Used to carry marginHorizontal: -12 + paddingHorizontal: 12 (netting to the same inset as
+  // APPEARANCE/SOUND & HAPTICS below, while giving the ripple/hover highlight room to breathe
+  // into the dialog's own gutter beyond that). Removed: this dialog scrolls (Dialog.ScrollArea +
+  // ScrollView above), and on web a ScrollView's own content wrapper clips to its own bounds
+  // regardless of a child's negative margin - confirmed live, the icon's own rounded-square badge
+  // was getting its left edge sliced off by exactly that overhang. No horizontal inset of its own
+  // now - it relies purely on the same dialog padding APPEARANCE/every other row already does,
+  // which can never overflow because it's never negative.
+  toggleButton: {
+    borderRadius: 12,
+    overflow: "hidden",
+    paddingVertical: 10
+  },
+  // Same shape as toggleButton, `flex: 1` instead of its own width - two of these side by side in
+  // toggleRow share the row's own edge alignment instead of each carrying their own.
+  toggleButtonInRow: {
+    borderRadius: 12,
+    flex: 1,
+    overflow: "hidden",
+    paddingVertical: 10
+  },
+  toggleContent: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  },
+  toggleGroup: {
+    gap: 4
+  },
+  // No horizontal margin of its own now either - see toggleButton's identical note.
+  toggleRow: {
+    flexDirection: "row",
+    gap: 4
+  }
+});
+
+// src/BaseStatsScreen.tsx
+var import_auto_paper7 = require("@rific/auto-paper");
+var import_feedback_press3 = require("@rific/feedback-press");
+var import_core4 = require("@tastic/core");
+var import_react5 = require("react");
+var import_react_native10 = require("react-native");
+var import_react_native_paper8 = require("react-native-paper");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", titleVariant = "headlineSmall", onBack, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", fg: fgOverride, bg: bgOverride, children }) {
+  const { dark, colors } = (0, import_auto_paper7.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core4.useRotation)();
+  const rotation = rotationOverride ?? ambientRotation;
+  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react5.useState)(false);
+  const showReset = !!onReset;
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: [styles8.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: [styles8.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper8.Text, { variant: titleVariant, style: [styles8.title, { color: fg }], children: title })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.ScrollView, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+      children,
+      showReset && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles8.resetButton, children: resetLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ConfirmDialog,
+      {
+        visible: confirmResetVisible,
+        title: resetConfirmTitle,
+        message: resetConfirmBody,
+        confirmLabel: "Reset",
+        cancelLabel: "Cancel",
+        icon: "alert-outline",
+        destructive: true,
+        rotation,
+        onCancel: () => setConfirmResetVisible(false),
+        onConfirm: () => {
+          onReset?.();
+          setConfirmResetVisible(false);
+        }
+      }
+    )
+  ] });
+}
+var styles8 = import_react_native10.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    gap: 12,
+    paddingHorizontal: 20
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4,
+    paddingBottom: 8
+  },
+  resetButton: {
+    marginTop: 16
+  },
+  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
+  // can render at its full unclipped content height instead of the screen's), which leaves the
+  // header's back button touch target unreliable underneath it.
+  scrollView: {
+    flex: 1
+  },
+  title: {
+    flexShrink: 1,
+    fontWeight: "bold"
+  }
+});
+
+// src/ContentGutter.tsx
+var import_core5 = require("@tastic/core");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
+  const { width: windowWidth } = (0, import_core5.useRotatedWindowDimensions)();
+  const { contentWidth, gutterWidth } = (0, import_core5.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: [styles9.row, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { style: [styles9.gutter, { width: gutterWidth }], children: leftGutter }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { style: { width: contentWidth }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { style: [styles9.gutter, { width: gutterWidth }], children: rightGutter })
+  ] });
+}
+var styles9 = import_react_native11.StyleSheet.create({
+  // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
+  // column instead of clipping cleanly at its own real width.
+  gutter: {
+    overflow: "hidden"
+  },
+  row: {
+    flexDirection: "row"
+  }
+});
+
+// src/CornerActionButtons.tsx
+var import_feedback_press4 = require("@rific/feedback-press");
+var import_react_native12 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press4.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles10.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles10.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+  ] });
+}
+var styles10 = import_react_native12.StyleSheet.create({
+  back: {
+    position: "absolute"
+  },
+  topRight: {
+    position: "absolute"
+  }
+});
+
+// src/StaggeredWord.tsx
+var import_react6 = require("react");
+var import_react_native13 = require("react-native");
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var STAGGER_MS = 45;
+var LETTER_DURATION_MS = 320;
+function getStaggeredWordDuration(letterCount) {
+  return (letterCount - 1) * STAGGER_MS + LETTER_DURATION_MS;
+}
+function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
+  const progress = (0, import_react_native_reanimated.useSharedValue)(reducedMotion ? 1 : 0);
+  (0, import_react6.useEffect)(() => {
+    if (reducedMotion) return;
+    progress.value = (0, import_react_native_reanimated.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.back(1.5)) }));
+  }, [reducedMotion]);
+  const style = (0, import_react_native_reanimated.useAnimatedStyle)(() => ({
+    opacity: progress.value,
+    transform: [{ translateY: (1 - progress.value) * 12 }, { scale: 0.85 + progress.value * 0.15 }]
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
+}
+function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native13.View, { style: [styles11.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+}
+var styles11 = import_react_native13.StyleSheet.create({
+  row: {
+    flexDirection: "row"
+  }
+});
+
+// src/UpdateDialog.tsx
+var import_updater2 = require("@rific/updater");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onError }) {
+  const { manifest, onConfirm, respond } = useUpdateConfirmBridge();
+  (0, import_updater2.useUpdater)({ autoCheck, autoPrompt, onConfirm, onError });
+  const date = manifest ? new Date(manifest.createdAt) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ConfirmDialog, { visible: !!manifest, title: "Update Available", message: date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respond(true), onCancel: () => respond(false) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AchievementCatalogSection,
+  AchievementRow,
+  ActivityStatSection,
+  BaseSettingsDialog,
+  BaseStatsScreen,
+  ConfirmDialog,
+  ContentGutter,
+  CornerActionButtons,
+  LOCKED_BADGE_COLOR,
+  MONO_FONT,
+  RotatedFrame,
+  StaggeredWord,
+  StatRow,
+  StatSection,
+  UpdateDialog,
+  getOverlayCardColors,
+  getStaggeredWordDuration,
+  overlayActionStyles,
+  overlayStyles
+});