@tastic/profile 0.12.0 → 0.13.0

package/README.md

@@ -180,7 +180,7 @@ Same `profiles`/`defaultColor`/`onCreate`/`onSave`/`onDelete` props as `Profiles
 `ProfileEditPatch`-shaped, still deliberately not widened to your own richer `CreateProfileInput`;
 compose any extra required fields (a key/control scheme, whatever's specific to your game) in your
 own closure at the call site, exactly as you already would calling `ProfilesManager` directly -
-plus `onBack`. `fg`/`fgMuted`/`bg`/`cardBg`/`titleVariant`/`colorPreview` are all independently
+plus `onBack`. `fg`/`fgMuted`/`bg`/`titleVariant`/`colorPreview` are all independently
 optional and forward straight through to the internal `ProfilesManager` (`bg` is new here -
 `ProfilesManager` itself has no `bg`, since it doesn't own a container `View` of its own).
 
@@ -312,13 +312,10 @@ it.
   saved color live." Cleared only when that seat's own profile selection genuinely changes, never by
   merely leaving and returning to the screen.
 
-None of these three are exports of this package today. `lastGuestColor`/`lastCpuColor` predate it
-entirely, and `profileOverride` is still hand-rolled per app - typically alongside
-`createProfileSelectionSlice`'s own selection state, in the same seat-scoped slice (see e.g.
-BoxHockey's `src/redux/seatColorsSlice.ts`) or folded into the app's own `gameSlice.ts` when there's
-no dedicated slice to put it in (see Snake's `src/redux/gameSlice.ts`). This section exists so a new
-app's author reads the convention here first, rather than hand-rolling something that quietly can't
-interop with the rest of the fleet.
+All three live in one slice from this package's `createSeatColorsSlice` (since 0.5.0), which every
+flagship game uses (see e.g. BoxHockey's or Snake's `src/redux/seatColorsSlice.ts`). This section
+exists so a new app's author reads the convention here first, rather than hand-rolling something
+that quietly can't interop with the rest of the fleet.
 
 The resolution order at a loadout/lobby screen, for one seat:
 

package/dist/index.d.mts

@@ -77,12 +77,11 @@ interface ProfilesManagerProps {
     ref?: Ref<ProfilesManagerHandle>;
     fg?: string;
     fgMuted?: string;
-    cardBg?: string;
     titleVariant?: MD3TextVariant$1;
     colorPreview?: (hex: string) => string;
     useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfilesScreenProps {
@@ -95,12 +94,11 @@ interface ProfilesScreenProps {
     fg?: string;
     fgMuted?: string;
     bg?: string;
-    cardBg?: string;
     titleVariant?: MD3TextVariant;
     colorPreview?: (hex: string) => string;
     useColorPickerAlign?: ProfilesManagerProps['useColorPickerAlign'];
 }
-declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps): react.JSX.Element;
+declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;

package/dist/index.d.ts

@@ -77,12 +77,11 @@ interface ProfilesManagerProps {
     ref?: Ref<ProfilesManagerHandle>;
     fg?: string;
     fgMuted?: string;
-    cardBg?: string;
     titleVariant?: MD3TextVariant$1;
     colorPreview?: (hex: string) => string;
     useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfilesScreenProps {
@@ -95,12 +94,11 @@ interface ProfilesScreenProps {
     fg?: string;
     fgMuted?: string;
     bg?: string;
-    cardBg?: string;
     titleVariant?: MD3TextVariant;
     colorPreview?: (hex: string) => string;
     useColorPickerAlign?: ProfilesManagerProps['useColorPickerAlign'];
 }
-declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps): react.JSX.Element;
+declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;

package/dist/index.js

@@ -327,19 +327,15 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
   const contextColorPreview = useProfileColorPreview();
   const colorPreview = colorPreviewProp ?? contextColorPreview;
-  const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const { dark } = (0, import_auto_paper3.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
   const host = (0, import_hud2.usePopoverHost)();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const cardBg = cardBgOverride ?? (dark ? "#111111" : "#F2F2F2");
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
-  const cancelBg = dark ? "#2A2A2A" : "#E0E0E0";
-  const cancelFg = dark ? "#FFFFFF" : "#000000";
   const [editingId, setEditingId] = (0, import_react3.useState)(null);
   const [draftName, setDraftName] = (0, import_react3.useState)("");
   const [draftColor, setDraftColor] = (0, import_react3.useState)(defaultColor);
@@ -426,17 +422,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    confirmDeleteProfile && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: styles3.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Icon, { source: "alert-outline", size: 64, color: colors.danger }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: [
-        "This permanently deletes ",
-        confirmDeleteProfile.name,
-        "\u2019s profile. This cannot be undone."
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Button, { mode: "contained", onPress: handleConfirmDelete, style: styles3.overlayButton, buttonColor: colors.danger, textColor: colors.onDanger, children: "Delete" })
-    ] }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud2.ConfirmDialog, { visible: confirmDeleteProfile !== null, title: "Delete Profile?", message: confirmDeleteProfile ? `This permanently deletes ${confirmDeleteProfile.name}\u2019s profile. This cannot be undone.` : "", confirmLabel: "Delete", cancelLabel: "Cancel", icon: "alert-outline", destructive: true, onConfirm: handleConfirmDelete, onCancel: () => setConfirmDeleteId(null) })
   ] });
 }
 function AlignedColorPicker({ useAlign, ...props }) {
@@ -507,27 +493,6 @@ var styles3 = import_react_native3.StyleSheet.create({
     borderStyle: "dashed",
     borderWidth: 2
   },
-  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", marginBottom: -8 },
   row: {
     borderRadius: 8,
     paddingVertical: 8
@@ -562,7 +527,7 @@ var import_feedback_press3 = require("@rific/feedback-press");
 var import_react4 = require("react");
 var import_react_native4 = require("react-native");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }) {
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
   const managerRef = (0, import_react4.useRef)(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -571,7 +536,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = import_react_native4.StyleSheet.create({
   container: {

package/dist/index.mjs

@@ -239,10 +239,10 @@ import { defaultColors, useAutoPaperTheme } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
-import { getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud";
+import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud";
 import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
 import { KeyboardAvoidingView, Platform, ScrollView as ScrollView2, StyleSheet as StyleSheet3, useWindowDimensions, View as View3 } from "react-native";
-import { Button, Icon as Icon3, Portal, Text as Text3, TextInput } from "react-native-paper";
+import { Icon as Icon3, Text as Text3, TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/profilesValidation.ts
@@ -284,19 +284,15 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant = "headlineSmall", colorPreview: colorPreviewProp, useColorPickerAlign }) {
   const contextColorPreview = useProfileColorPreview();
   const colorPreview = colorPreviewProp ?? contextColorPreview;
-  const { dark, colors } = useAutoPaperTheme();
+  const { dark } = useAutoPaperTheme();
   const insets = useSafeAreaInsets();
   const { error: showErrorToast } = useToast();
   const host = usePopoverHost();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const cardBg = cardBgOverride ?? (dark ? "#111111" : "#F2F2F2");
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
-  const cancelBg = dark ? "#2A2A2A" : "#E0E0E0";
-  const cancelFg = dark ? "#FFFFFF" : "#000000";
   const [editingId, setEditingId] = useState(null);
   const [draftName, setDraftName] = useState("");
   const [draftColor, setDraftColor] = useState(defaultColor);
@@ -383,17 +379,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
         /* @__PURE__ */ jsx4(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    confirmDeleteProfile && /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsx4(View3, { style: styles3.overlay, children: /* @__PURE__ */ jsxs2(View3, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
-      /* @__PURE__ */ jsx4(Icon3, { source: "alert-outline", size: 64, color: colors.danger }),
-      /* @__PURE__ */ jsx4(Text3, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
-      /* @__PURE__ */ jsxs2(Text3, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: [
-        "This permanently deletes ",
-        confirmDeleteProfile.name,
-        "\u2019s profile. This cannot be undone."
-      ] }),
-      /* @__PURE__ */ jsx4(Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
-      /* @__PURE__ */ jsx4(Button, { mode: "contained", onPress: handleConfirmDelete, style: styles3.overlayButton, buttonColor: colors.danger, textColor: colors.onDanger, children: "Delete" })
-    ] }) }) })
+    /* @__PURE__ */ jsx4(ConfirmDialog, { visible: confirmDeleteProfile !== null, title: "Delete Profile?", message: confirmDeleteProfile ? `This permanently deletes ${confirmDeleteProfile.name}\u2019s profile. This cannot be undone.` : "", confirmLabel: "Delete", cancelLabel: "Cancel", icon: "alert-outline", destructive: true, onConfirm: handleConfirmDelete, onCancel: () => setConfirmDeleteId(null) })
   ] });
 }
 function AlignedColorPicker({ useAlign, ...props }) {
@@ -464,27 +450,6 @@ var styles3 = StyleSheet3.create({
     borderStyle: "dashed",
     borderWidth: 2
   },
-  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", marginBottom: -8 },
   row: {
     borderRadius: 8,
     paddingVertical: 8
@@ -519,7 +484,7 @@ import { IconButton } from "@rific/feedback-press";
 import { useRef as useRef2 } from "react";
 import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
 import { jsx as jsx5 } from "react/jsx-runtime";
-function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }) {
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = useAutoPaperTheme2();
   const managerRef = useRef2(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -528,7 +493,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ jsx5(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx5(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx5(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ jsx5(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx5(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx5(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = StyleSheet4.create({
   container: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Player profile identity for local-multiplayer React Native games: a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",
@@ -65,13 +65,13 @@
     "@infinitetoken/eslint-config": "0.2.0",
     "@infinitetoken/jest-config": "^0.4.0",
     "@infinitetoken/tsconfig": "^0.5.0",
-    "@rific/auto-paper": "^0.12.0",
-    "@rific/core": "^0.2.0",
-    "@rific/feedback-press": "^0.12.0",
-    "@rific/focus-chain": "^0.4.7",
-    "@rific/toaster": "^0.7.0",
-    "@tastic/core": "^0.9.0",
-    "@tastic/hud": "^0.12.0",
+    "@rific/auto-paper": "^0.13.2",
+    "@rific/core": "^0.3.1",
+    "@rific/feedback-press": "^0.13.0",
+    "@rific/focus-chain": "^0.4.8",
+    "@rific/toaster": "^0.8.0",
+    "@tastic/core": "^0.14.0",
+    "@tastic/hud": "^0.19.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -85,7 +85,7 @@
     "prettier": "^3.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native": "^0.85.3",
+    "react-native": "^0.86.3",
     "react-native-paper": "^5.15.2",
     "react-native-safe-area-context": "^5.0.0",
     "tsup": "^8.0.0",

package/src/ProfilesManager.tsx

@@ -2,10 +2,10 @@ import { defaultColors, useAutoPaperTheme } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
 import { useFocusChain } from '@rific/focus-chain'
 import { useToast } from '@rific/toaster'
-import { getInlineColorPickerContentSize, InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
+import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
 import { ComponentProps, ReactNode, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { Button, Icon, Portal, Text, TextInput } from 'react-native-paper'
+import { Icon, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ProfileChip } from './ProfileChip'
@@ -62,17 +62,13 @@ export interface ProfilesManagerProps {
   // React 19 accepts `ref` as a plain prop on a function component (no forwardRef needed) - see
   // ProfilesManagerHandle's own doc for why a host may need this.
   ref?: Ref<ProfilesManagerHandle>
-  // Independently optional overrides for this screen's text/card colors - each defaults to the same
-  // literal-black/white-by-appearance formula as before when omitted, so every existing caller
-  // (none of which pass these) renders identically to before. Same convention as @tastic/hud's
-  // BaseStatsScreen fg/cardBg overrides, for a caller with its own app-wide chrome palette instead
-  // of that literal black/white convention. cardBorder/cancelBg/cancelFg have no override, matching
-  // BaseStatsScreen's identical reasoning for cardBorder: their low-alpha/neutral values already
-  // read fine against any cardBg, and (for Cancel specifically) are deliberately neutral rather than
-  // theme-derived so a host's own live gameplay/seat color can't land there by coincidence.
+  // Independently optional overrides for this screen's text colors - each defaults to the same
+  // literal-black/white-by-appearance formula as before when omitted. Same convention as @tastic/hud's
+  // BaseStatsScreen fg override, for a caller with its own app-wide chrome palette instead of that
+  // literal black/white convention. (cardBg, which only colored the delete confirmation, went with it
+  // when that became hud's ConfirmDialog, 0.13.0.)
   fg?: string
   fgMuted?: string
-  cardBg?: string
   // 'headlineSmall' (this screen's own default, below), matching BaseStatsScreen's own settled
   // default and the reasoning behind it - this title sits next to a small headerLeft back-button
   // glyph the same way, and the previous hardcoded 'displaySmall' read as oversized there too.
@@ -115,12 +111,12 @@ function deriveTag(name: string): string {
 // really unmounts it on a given host's router - see ProfilesManagerHandle's own doc for the
 // react-navigation-web case where it doesn't, and why a host there needs the `ref` escape hatch
 // instead of relying on the unmount fallback alone.
-export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = 'headlineSmall', colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps) {
+export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant = 'headlineSmall', colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps) {
   // An explicit prop wins; otherwise the app-wide ProfileColorProvider's, so the swatch previews
   // match the ProfileChips drawn in the list.
   const contextColorPreview = useProfileColorPreview()
   const colorPreview = colorPreviewProp ?? contextColorPreview
-  const { dark, colors } = useAutoPaperTheme()
+  const { dark } = useAutoPaperTheme()
   const insets = useSafeAreaInsets()
   const { error: showErrorToast } = useToast()
   // Only one row is ever in edit mode at a time (see commitEdit, called before any new row opens),
@@ -128,12 +124,6 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
   const host = usePopoverHost()
   const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
   const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
-  const cardBg = cardBgOverride ?? (dark ? '#111111' : '#F2F2F2')
-  const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
-  // A contained neutral, not an outlined one - reads as "the other button" next to Delete's solid
-  // danger fill, rather than looking unfinished/secondary beside it.
-  const cancelBg = dark ? '#2A2A2A' : '#E0E0E0'
-  const cancelFg = dark ? '#FFFFFF' : '#000000'
 
   // 'new' clears back to null once a commit resolves - there's only ever one row open at a time.
   const [editingId, setEditingId] = useState<string | 'new' | null>(null)
@@ -296,32 +286,11 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
         </ScrollView>
       </KeyboardAvoidingView>
 
-      {confirmDeleteProfile && (
-        <Portal>
-          <View style={styles.overlay}>
-            <View style={[styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }]}>
-              <Icon source='alert-outline' size={64} color={colors.danger} />
-              <Text variant='headlineLarge' style={[styles.overlayTitle, { color: colors.danger }]}>
-                Delete Profile?
-              </Text>
-              <Text variant='bodyLarge' style={[styles.overlayBody, { color: fg }]}>
-                This permanently deletes {confirmDeleteProfile.name}&rsquo;s profile. This cannot be undone.
-              </Text>
-              {/* Contained neutral, not buttonColor={colors.primary} - colors.primary is often a
-              live gameplay/seat color in host apps, so a contained Cancel in that color would just
-              be whatever's currently painted there, with no relation to "safe to tap". */}
-              <Button mode='contained' onPress={() => setConfirmDeleteId(null)} style={styles.overlayButton} buttonColor={cancelBg} textColor={cancelFg}>
-                Cancel
-              </Button>
-              {/* colors.danger/onDanger - auto-paper's actual semantic role for this, not a seat's
-              own live color by luck of the default palette. */}
-              <Button mode='contained' onPress={handleConfirmDelete} style={styles.overlayButton} buttonColor={colors.danger} textColor={colors.onDanger}>
-                Delete
-              </Button>
-            </View>
-          </View>
-        </Portal>
-      )}
+      {/* hud's ConfirmDialog, the one confirm card every app in the fleet uses, so this reads like the
+        Reset Everything?/New Game confirms beside it (Jay, 2026-10-15: one look for every dialog). It
+        used to be its own card here, in this screen's literal black/white (or the host's cardBg), with
+        two stacked contained buttons. */}
+      <ConfirmDialog visible={confirmDeleteProfile !== null} title='Delete Profile?' message={confirmDeleteProfile ? `This permanently deletes ${confirmDeleteProfile.name}\u2019s profile. This cannot be undone.` : ''} confirmLabel='Delete' cancelLabel='Cancel' icon='alert-outline' destructive onConfirm={handleConfirmDelete} onCancel={() => setConfirmDeleteId(null)} />
     </>
   )
 }
@@ -466,27 +435,6 @@ const styles = StyleSheet.create({
     borderStyle: 'dashed',
     borderWidth: 2
   },
-  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', marginBottom: -8 },
   row: {
     borderRadius: 8,
     paddingVertical: 8

package/src/ProfilesScreen.tsx

@@ -33,11 +33,10 @@ export interface ProfilesScreenProps {
   // Independently optional overrides, each defaulting to the same literal-black/white-by-appearance
   // formula every current caller renders with unchanged (none of them pass these today) - same
   // convention as BaseStatsScreen's and ProfilesManager's own fg/bg-shaped overrides. fg/fgMuted/
-  // cardBg/titleVariant/colorPreview are forwarded straight through to the internal ProfilesManager.
+  // titleVariant/colorPreview are forwarded straight through to the internal ProfilesManager.
   fg?: string
   fgMuted?: string
   bg?: string
-  cardBg?: string
   titleVariant?: MD3TextVariant
   colorPreview?: (hex: string) => string
   // Forwarded straight through to the internal ProfilesManager - a placement hook for the color swatch popover, for
@@ -53,7 +52,7 @@ export interface ProfilesScreenProps {
 // still doesn't call useProfiles()/useGameStats() (or any host-specific hook) itself - those two
 // hooks' shapes are genuinely app-specific (different CreateProfileInput/GameStatsContextValue per
 // app), so this stays props-in/callbacks-out, exactly like ProfilesManager itself.
-export function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps) {
+export function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps) {
   const { dark } = useAutoPaperTheme()
   // Owns the ref itself - nothing outside this component ever needs it, since this is now the one
   // thing that both renders ProfilesManager AND owns the only navigation trigger next to it.
@@ -75,7 +74,7 @@ export function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDel
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
-      <ProfilesManager ref={managerRef} profiles={profiles} defaultColor={defaultColor} onCreate={onCreate} onSave={onSave} onDelete={onDelete} fg={fg} fgMuted={fgMuted} cardBg={cardBg} titleVariant={titleVariant} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} headerLeft={<IconButton icon='arrow-left' iconColor={fg} size={24} onPress={handleBack} accessibilityLabel='Back' />} />
+      <ProfilesManager ref={managerRef} profiles={profiles} defaultColor={defaultColor} onCreate={onCreate} onSave={onSave} onDelete={onDelete} fg={fg} fgMuted={fgMuted} titleVariant={titleVariant} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} headerLeft={<IconButton icon='arrow-left' iconColor={fg} size={24} onPress={handleBack} accessibilityLabel='Back' />} />
     </View>
   )
 }