@tastic/hud 0.8.2 → 0.8.3

package/dist/index.mjs

@@ -74,10 +74,43 @@ var styles = StyleSheet.create({
 import { AutoAppearancePicker, Dialog, useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from "@rific/feedback-press";
 import { useUpdater } from "@rific/updater";
-import { useIsTouchPrimaryDevice, useRotation } from "@tastic/core";
+import { toRotationStyle, useIsTouchPrimaryDevice, useRotation } from "@tastic/core";
 import { useContext, useState } from "react";
-import { Platform, ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { Platform, ScrollView, StyleSheet as StyleSheet3, View as View2 } from "react-native";
 import { Icon as Icon2, Portal, Text as Text2 } from "react-native-paper";
+
+// src/overlayCard.ts
+import { StyleSheet as StyleSheet2 } from "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 = StyleSheet2.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
+  }
+});
+
+// src/BaseSettingsDialog.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ jsx2(View2, { style: [styles2.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx2(Icon2, { source, size: 18, color }) });
@@ -104,11 +137,9 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
   const showUpdateCheck = Platform.OS !== "web" && !hideUpdateCheck;
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const cardBg = dark ? "#111111" : "#F2F2F2";
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
+  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2(Dialog, { visible, onDismiss, style: [styles2.dialog, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+    /* @__PURE__ */ jsxs2(Dialog, { visible, onDismiss, style: [styles2.dialog, toRotationStyle(rotation)], children: [
       /* @__PURE__ */ jsx2(Dialog.Title, { children: "Settings" }),
       /* @__PURE__ */ jsx2(Dialog.ScrollArea, { style: styles2.scrollArea, children: /* @__PURE__ */ jsxs2(ScrollView, { contentContainerStyle: styles2.content, showsVerticalScrollIndicator: false, children: [
         /* @__PURE__ */ jsxs2(View2, { style: styles2.toggleGroup, children: [
@@ -178,7 +209,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
         ] })
       ] }) })
     ] }),
-    infoMessage && /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(View2, { style: styles2.overlay, children: /* @__PURE__ */ jsxs2(View2, { style: [styles2.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+    infoMessage && /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(View2, { style: overlayStyles.overlay, children: /* @__PURE__ */ jsxs2(View2, { style: [overlayStyles.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)], children: [
       /* @__PURE__ */ jsx2(Icon2, { source: "information-outline", size: 64, color: colors.secondary }),
       /* @__PURE__ */ jsx2(Text2, { variant: "headlineLarge", style: [styles2.overlayTitle, { color: colors.secondary }], children: infoMessage.title }),
       /* @__PURE__ */ jsx2(Text2, { variant: "bodyLarge", style: [styles2.overlayBody, { color: fg }], children: infoMessage.message }),
@@ -186,7 +217,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     ] }) }) })
   ] });
 }
-var styles2 = StyleSheet2.create({
+var styles2 = StyleSheet3.create({
   content: {
     gap: 24,
     paddingVertical: 20
@@ -208,26 +239,8 @@ var styles2 = StyleSheet2.create({
     justifyContent: "center",
     width: 36
   },
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
   overlayBody: { textAlign: "center" },
   overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
   overlayTitle: { fontWeight: "bold" },
   scrollArea: {
     marginBottom: 0
@@ -279,24 +292,23 @@ import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
 import { Button as Button3, IconButton } from "@rific/feedback-press";
 import { useRotation as useRotation2 } from "@tastic/core";
 import { useState as useState2 } from "react";
-import { ScrollView as ScrollView2, StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { ScrollView as ScrollView2, StyleSheet as StyleSheet5, View as View4 } from "react-native";
 import { Text as Text4 } from "react-native-paper";
 
 // src/ConfirmDialog.tsx
 import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { Button as Button2 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { toRotationStyle as toRotationStyle2 } from "@tastic/core";
+import { StyleSheet as StyleSheet4, View as View3 } from "react-native";
 import { Icon as Icon3, Portal as Portal2, Text as Text3 } from "react-native-paper";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
   const { dark, colors } = useAutoPaperTheme3();
   if (!visible) return null;
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const cardBg = dark ? "#111111" : "#F2F2F2";
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
+  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark);
   const accent = destructive ? colors.danger : colors.primary;
   const onAccent = destructive ? colors.onDanger : colors.onPrimary;
-  return /* @__PURE__ */ jsx3(Portal2, { children: /* @__PURE__ */ jsx3(View3, { style: styles3.overlay, children: /* @__PURE__ */ jsxs3(View3, { style: [styles3.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+  return /* @__PURE__ */ jsx3(Portal2, { children: /* @__PURE__ */ jsx3(View3, { style: [overlayStyles.overlay, styles3.overlay], children: /* @__PURE__ */ jsxs3(View3, { style: [overlayStyles.card, styles3.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle2(rotation)], children: [
     /* @__PURE__ */ jsx3(Icon3, { source: icon, size: 64, color: accent }),
     /* @__PURE__ */ jsx3(Text3, { variant: "headlineLarge", style: [styles3.title, { color: accent }], children: title }),
     /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: [styles3.body, { color: fg }], children: message }),
@@ -306,7 +318,7 @@ function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onC
     ] })
   ] }) }) });
 }
-var styles3 = StyleSheet3.create({
+var styles3 = StyleSheet4.create({
   // flexBasis (not flex: 1's own 0%) 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 the
   // old flex: 1 on a roomy screen - but a button can never be squeezed narrower than 128, only
@@ -331,32 +343,20 @@ var styles3 = StyleSheet3.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: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32,
-    // 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.
     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: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    // 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.
-    paddingHorizontal: 24,
-    position: "absolute",
-    right: 0,
-    top: 0
+    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
@@ -406,7 +406,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
     )
   ] });
 }
-var styles4 = StyleSheet4.create({
+var styles4 = StyleSheet5.create({
   container: {
     flex: 1
   },
@@ -438,7 +438,7 @@ var styles4 = StyleSheet4.create({
 
 // src/ContentGutter.tsx
 import { computeContentBounds } from "@tastic/core";
-import { StyleSheet as StyleSheet5, useWindowDimensions, View as View5 } from "react-native";
+import { StyleSheet as StyleSheet6, useWindowDimensions, View as View5 } from "react-native";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
   const { width: windowWidth } = useWindowDimensions();
@@ -449,7 +449,7 @@ function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, childr
     /* @__PURE__ */ jsx5(View5, { style: [styles5.gutter, { width: gutterWidth }], children: rightGutter })
   ] });
 }
-var styles5 = StyleSheet5.create({
+var styles5 = StyleSheet6.create({
   // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
   // column instead of clipping cleanly at its own real width.
   gutter: {
@@ -468,7 +468,7 @@ import { Platform as Platform3 } from "react-native";
 import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
 import { IconButton as IconButton2, TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useRotation as useRotation3 } from "@tastic/core";
-import { ScrollView as ScrollView3, StyleSheet as StyleSheet7, View as View8 } from "react-native";
+import { ScrollView as ScrollView3, StyleSheet as StyleSheet8, View as View8 } from "react-native";
 import { Icon as Icon4, Text as Text5 } from "react-native-paper";
 
 // src/fonts.ts
@@ -476,7 +476,7 @@ import { Platform as Platform2 } from "react-native";
 var MONO_FONT = Platform2.select({ ios: "Menlo", android: "monospace", default: "monospace" });
 
 // src/PopoverBody.tsx
-import { StyleSheet as StyleSheet6, View as View6 } from "react-native";
+import { StyleSheet as StyleSheet7, View as View6 } from "react-native";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
@@ -499,7 +499,7 @@ function PopoverBody({ visible, children, align = "center", verticalAlign = "bel
     ] })
   ] });
 }
-var styles6 = StyleSheet6.create({
+var styles6 = StyleSheet7.create({
   caret: {
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
@@ -721,7 +721,7 @@ function MultiSection({
     section.allClear && /* @__PURE__ */ jsx8(TouchableRipple2, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles7.item, children: /* @__PURE__ */ jsx8(Text5, { variant: "labelLarge", style: [styles7.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles7 = StyleSheet7.create({
+var styles7 = StyleSheet8.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -738,7 +738,7 @@ var styles7 = StyleSheet7.create({
     zIndex: 100
   },
   divider: {
-    height: StyleSheet7.hairlineWidth,
+    height: StyleSheet8.hairlineWidth,
     marginVertical: 4
   },
   item: {
@@ -800,7 +800,7 @@ function ControlSchemePicker({ id, host, value, onChange, options, takenValue, a
 
 // src/CornerActionButtons.tsx
 import { IconButton as IconButton3 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet8 } from "react-native";
+import { StyleSheet as StyleSheet9 } from "react-native";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
   return /* @__PURE__ */ jsxs8(Fragment4, { children: [
@@ -808,7 +808,7 @@ function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow
     /* @__PURE__ */ jsx10(IconButton3, { icon: "cog", iconColor: fg, size: 24, style: [styles8.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
-var styles8 = StyleSheet8.create({
+var styles8 = StyleSheet9.create({
   back: {
     position: "absolute"
   },
@@ -818,7 +818,7 @@ var styles8 = StyleSheet8.create({
 });
 
 // src/CornerStatusBadges.tsx
-import { StyleSheet as StyleSheet9, View as View9 } from "react-native";
+import { StyleSheet as StyleSheet10, View as View9 } from "react-native";
 import { Icon as Icon5 } from "react-native-paper";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var BADGE_SIZE = 30;
@@ -833,7 +833,7 @@ function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }) {
     p2 && /* @__PURE__ */ jsx11(View9, { pointerEvents: "none", style: p2OnLeftSide ? styles9.topLeft : styles9.topRight, children: /* @__PURE__ */ jsx11(StatusBadge, { icon: p2.icon }) })
   ] });
 }
-var styles9 = StyleSheet9.create({
+var styles9 = StyleSheet10.create({
   badge: {
     alignItems: "center",
     backgroundColor: "rgba(0,0,0,0.28)",
@@ -855,7 +855,7 @@ var styles9 = StyleSheet9.create({
 import { defaultColors, getContrastColor } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
 import { clamp, useRotation as useRotation4 } from "@tastic/core";
-import { ScrollView as ScrollView4, StyleSheet as StyleSheet10, useWindowDimensions as useWindowDimensions3, View as View10 } from "react-native";
+import { ScrollView as ScrollView4, StyleSheet as StyleSheet11, useWindowDimensions as useWindowDimensions3, View as View10 } from "react-native";
 import { Icon as Icon6, Text as Text6 } from "react-native-paper";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
@@ -911,7 +911,7 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
     }) }) })
   ] });
 }
-var styles10 = StyleSheet10.create({
+var styles10 = StyleSheet11.create({
   anchor: {
     position: "relative"
   },
@@ -985,7 +985,7 @@ var styles10 = StyleSheet10.create({
 // src/LabeledDropdown.tsx
 import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
-import { ScrollView as ScrollView5, StyleSheet as StyleSheet11, View as View11 } from "react-native";
+import { ScrollView as ScrollView5, StyleSheet as StyleSheet12, View as View11 } from "react-native";
 import { Icon as Icon7, Text as Text7 } from "react-native-paper";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
@@ -1025,7 +1025,7 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     }) }) })
   ] });
 }
-var styles11 = StyleSheet11.create({
+var styles11 = StyleSheet12.create({
   anchor: {
     position: "relative"
   },
@@ -1083,16 +1083,16 @@ function loadSkiaWeb() {
 }
 
 // src/PressAwayOverlay.tsx
-import { Pressable, StyleSheet as StyleSheet12 } from "react-native";
+import { Pressable, StyleSheet as StyleSheet13 } from "react-native";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ jsx14(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet12.absoluteFill, style] });
+  return /* @__PURE__ */ jsx14(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet13.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
 import { TouchableRipple as TouchableRipple5 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet13 } from "react-native";
+import { StyleSheet as StyleSheet14 } from "react-native";
 import { Text as Text8 } from "react-native-paper";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
@@ -1101,7 +1101,7 @@ function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MON
   const labelColorStyle = { color: ready ? "#000000" : color };
   return /* @__PURE__ */ jsx15(TouchableRipple5, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx15(Text8, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles12 = StyleSheet13.create({
+var styles12 = StyleSheet14.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -1115,7 +1115,7 @@ var styles12 = StyleSheet13.create({
 
 // src/SharedActionBand.tsx
 import { IconButton as IconButton4 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet14, View as View12 } from "react-native";
+import { StyleSheet as StyleSheet15, View as View12 } from "react-native";
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
   return /* @__PURE__ */ jsxs12(View12, { style: [styles13.column, popoverOpen && styles13.columnOpen], children: [
@@ -1128,7 +1128,7 @@ function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popove
     children
   ] });
 }
-var styles13 = StyleSheet14.create({
+var styles13 = StyleSheet15.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1145,7 +1145,7 @@ var styles13 = StyleSheet14.create({
 
 // src/StatRow.tsx
 import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
-import { StyleSheet as StyleSheet15, View as View13 } from "react-native";
+import { StyleSheet as StyleSheet16, View as View13 } from "react-native";
 import { Text as Text9 } from "react-native-paper";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
@@ -1157,7 +1157,7 @@ function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
     /* @__PURE__ */ jsx17(Text9, { variant: "bodyMedium", style: [styles14.value, { color: fg }], children: value })
   ] });
 }
-var styles14 = StyleSheet15.create({
+var styles14 = StyleSheet16.create({
   row: {
     alignItems: "center",
     flexDirection: "row",
@@ -1170,7 +1170,7 @@ var styles14 = StyleSheet15.create({
 
 // src/StatSection.tsx
 import { useAutoPaperTheme as useAutoPaperTheme6 } from "@rific/auto-paper";
-import { StyleSheet as StyleSheet16, View as View14 } from "react-native";
+import { StyleSheet as StyleSheet17, View as View14 } from "react-native";
 import { Text as Text10 } from "react-native-paper";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
@@ -1182,7 +1182,7 @@ function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, chil
     children
   ] });
 }
-var styles15 = StyleSheet16.create({
+var styles15 = StyleSheet17.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"
@@ -1232,7 +1232,9 @@ export {
   StatSection,
   TriggerGaugeHost,
   getLabeledDropdownContentHeight,
+  getOverlayCardColors,
   loadSkiaWeb,
+  overlayStyles,
   useAutoAlign,
   usePopoverHost
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",
@@ -77,7 +77,7 @@
     "@rific/feedback-press": "^0.10.8",
     "@rific/updater": "^0.6.0",
     "@shopify/react-native-skia": "^2.6.2",
-    "@tastic/core": "^0.3.0",
+    "@tastic/core": "^0.4.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/src/BaseSettingsDialog.tsx

@@ -1,11 +1,13 @@
 import { AutoAppearancePicker, Dialog, useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from '@rific/feedback-press'
 import { useUpdater } from '@rific/updater'
-import { useIsTouchPrimaryDevice, useRotation } from '@tastic/core'
+import { toRotationStyle, useIsTouchPrimaryDevice, useRotation, type ViewRotation } from '@tastic/core'
 import { ReactNode, useContext, useState } from 'react'
 import { Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
+import { getOverlayCardColors, overlayStyles } from './overlayCard'
+
 interface SettingIconProps {
   source: string
   color: string
@@ -31,7 +33,7 @@ export interface BaseSettingsDialogProps {
   // dialog), so it just rotates its own content in place. Defaults to a live ambient read via
   // useRotation() when omitted; pass this only when a caller's own reading needs to differ from the
   // ambient one (rare — most callers should simply omit it).
-  rotation?: number
+  rotation?: ViewRotation
   // Each app's own OTA version (e.g. release.otaVersion) — not something this package can read
   // itself, since every consuming app tracks its own release.ts independently. Accepts a number too
   // since that's what release.otaVersion actually is in most apps (a bare incrementing counter, not
@@ -118,15 +120,11 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   const showAppearance = !hideAppearance
   const showUpdateCheck = Platform.OS !== 'web' && !hideUpdateCheck
 
-  // High-contrast retro look: literal black/white by appearance, not auto-paper's own (slightly
-  // tinted) background role.
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const cardBg = dark ? '#111111' : '#F2F2F2'
-  const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
+  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark)
 
   return (
     <>
-      <Dialog visible={visible} onDismiss={onDismiss} style={[styles.dialog, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+      <Dialog visible={visible} onDismiss={onDismiss} style={[styles.dialog, toRotationStyle(rotation)]}>
         <Dialog.Title>Settings</Dialog.Title>
         {/* react-native-paper's Dialog.ScrollArea has a fixed 24px marginBottom baked in (meant to
           reserve room for a Dialog.Actions row below it) — overridden to 0 since this dialog has
@@ -265,8 +263,8 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
       </Dialog>
       {infoMessage && (
         <Portal>
-          <View style={styles.overlay}>
-            <View style={[styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+          <View style={overlayStyles.overlay}>
+            <View style={[overlayStyles.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)]}>
               <Icon source='information-outline' size={64} color={colors.secondary} />
               <Text variant='headlineLarge' style={[styles.overlayTitle, { color: colors.secondary }]}>
                 {infoMessage.title}
@@ -307,26 +305,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 36
   },
-  overlay: {
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.72)',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0
-  },
   overlayBody: { textAlign: 'center' },
   overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: 'center',
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
   overlayTitle: { fontWeight: 'bold' },
   scrollArea: {
     marginBottom: 0

package/src/BaseStatsScreen.tsx

@@ -1,6 +1,6 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, IconButton } from '@rific/feedback-press'
-import { useRotation } from '@tastic/core'
+import { useRotation, type ViewRotation } from '@tastic/core'
 import { ReactNode, useState } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
@@ -20,7 +20,7 @@ interface Props {
   // read via useRotation() when omitted — note this does NOT make the header/scrollable content
   // below rotate; the caller's own screen still needs its own FakeLandscapeView wrap for that
   // (this component has no transform on its own main body).
-  rotation?: number
+  rotation?: ViewRotation
   title?: string
   // 'headlineSmall' (this screen's own default, below) — was originally 'displaySmall' (the full
   // display tier's own smallest step), then 'headlineLarge', both still read as oversized for a

package/src/ConfirmDialog.tsx

@@ -1,8 +1,11 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { Button } from '@rific/feedback-press'
+import { toRotationStyle, type ViewRotation } from '@tastic/core'
 import { StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
+import { getOverlayCardColors, overlayStyles } from './overlayCard'
+
 export interface ConfirmDialogProps {
   visible: boolean
   title: string
@@ -11,10 +14,10 @@ export interface ConfirmDialogProps {
   cancelLabel: string
   onConfirm: () => void
   onCancel: () => void
-  // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) - same convention as
+  // Live physical-hold rotation (see @tastic/core's getViewRotation) - same convention as
   // BaseSettingsDialog's own rotation prop; defaults to 0 for a caller with no per-player zone to
   // match (a portrait-only or single-player game has nothing to stay consistent with).
-  rotation?: number
+  rotation?: ViewRotation
   // Any react-native-paper Icon `source` name, shown above the title - defaults to a plain
   // question mark, since this component has no way to know why a caller is asking.
   icon?: string
@@ -35,18 +38,14 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
   const { dark, colors } = useAutoPaperTheme()
   if (!visible) return null
 
-  // High-contrast retro look: literal black/white by appearance, not auto-paper's own (slightly
-  // tinted) background role - same convention BaseSettingsDialog's own overlay card uses.
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const cardBg = dark ? '#111111' : '#F2F2F2'
-  const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
+  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark)
   const accent = destructive ? colors.danger : colors.primary
   const onAccent = destructive ? colors.onDanger : colors.onPrimary
 
   return (
     <Portal>
-      <View style={styles.overlay}>
-        <View style={[styles.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+      <View style={[overlayStyles.overlay, styles.overlay]}>
+        <View style={[overlayStyles.card, styles.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)]}>
           <Icon source={icon} size={64} color={accent} />
           <Text variant='headlineLarge' style={[styles.title, { color: accent }]}>
             {title}
@@ -93,32 +92,20 @@ const styles = 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: {
-    alignItems: 'center',
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32,
-    // 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.
     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: {
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.72)',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    // 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.
-    paddingHorizontal: 24,
-    position: 'absolute',
-    right: 0,
-    top: 0
+    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

package/src/index.ts

@@ -10,6 +10,7 @@ export { MONO_FONT } from './fonts'
 export { InlineColorPicker } from './InlineColorPicker'
 export { getLabeledDropdownContentHeight, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption } from './LabeledDropdown'
 export { loadSkiaWeb } from './loadSkiaWeb'
+export { getOverlayCardColors, type OverlayCardColors, overlayStyles } from './overlayCard'
 export { PopoverBody } from './PopoverBody'
 export { PressAwayOverlay } from './PressAwayOverlay'
 export { ReadyButton } from './ReadyButton'