@tastic/profile 0.11.0 → 0.13.0

package/src/ProfilePicker.tsx

@@ -17,7 +17,7 @@ const LIST_PADDING = 8
 // A complete placement decision for the popover: which way it opens, how tall it may grow, whether
 // this open's measurement has landed yet, and the ref attached to the measured trigger.
 // Structurally identical to @tastic/hud's own `AlignResult` (exported from hud >= 0.12.0, and the
-// same shape `useAutoAlign` itself returns) — declared here rather than imported so this package's
+// same shape `useAutoAlign` itself returns) - declared here rather than imported so this package's
 // public types don't start requiring a newer @tastic/hud than its peer range already admits. A
 // hud `AlignResult` (e.g. from `useZoneClampedAlign`) is assignable to this as-is.
 export interface ProfilePickerAlignResult {
@@ -36,9 +36,9 @@ export interface ProfilePickerContentSize {
 // The popover's content footprint for a given roster size: always POPOVER_WIDTH wide, tall enough
 // for the null/"guest" row + one row per profile + (when `hasManageRow`, i.e. when the picker is
 // given an `onManage`) the trailing Manage row, plus the list's own padding. This is the size
-// ProfilePicker hands to `useAutoAlign` — the ONE formula, used by the component itself (it leaves
+// ProfilePicker hands to `useAutoAlign` - the ONE formula, used by the component itself (it leaves
 // out the menu's 2pt border and the Manage divider, ~13pt in all, so treat it as a placement
-// estimate, not a pixel-exact measurement) — exported
+// estimate, not a pixel-exact measurement) - exported
 // so a host supplying its own placement through `alignOverride` can size that placement hook (its
 // own useAutoAlign/useZoneClampedAlign call) to match the popover it is actually positioning,
 // instead of copying these constants and drifting whenever they change here.
@@ -48,32 +48,32 @@ export function getProfilePickerContentSize(profileCount: number, hasManageRow =
 }
 
 interface ProfilePickerProps<P extends Profile> {
-  // Namespaces this trigger's id — pass something unique per instance whenever more than one of
+  // Namespaces this trigger's id - pass something unique per instance whenever more than one of
   // these shares a PopoverHost (e.g. one per seat).
   idPrefix: string
-  // The host this trigger's popover opens against — share one host across sibling pickers (a
+  // The host this trigger's popover opens against - share one host across sibling pickers (a
   // seat's color/tag/profile triggers) so opening one closes any other in the same group.
   host: PopoverHost
   profiles: P[]
   selectedId: string | null
-  // Another picker's currently-selected profile id, if any — disabled in this list. Useful when a
+  // Another picker's currently-selected profile id, if any - disabled in this list. Useful when a
   // profile shouldn't be selectable in two places at once (e.g. two seats in a local-multiplayer
   // game, where double-selecting one profile would double-count its stats as both winner and
-  // loser) — omit if that doesn't apply.
+  // loser) - omit if that doesn't apply.
   takenId?: string | null
-  // Tint for the trigger's own label/icon — pass the seat/context's current live color so the
+  // Tint for the trigger's own label/icon - pass the seat/context's current live color so the
   // trigger reads as one identity with whatever it's paired with.
   color: string
   dark: boolean
   // Forces a specific horizontal alignment, beating whatever the placement (the automatic
   // measurement, or `alignOverride` below) would have picked. Omit to let placement decide.
   align?: 'left' | 'right' | 'center'
-  // Substitutes the popover's whole placement — horizontal/vertical alignment, max height, the
-  // `measured` gate and the trigger ref — for the automatic `useAutoAlign` one, for a host whose
+  // Substitutes the popover's whole placement - horizontal/vertical alignment, max height, the
+  // `measured` gate and the trigger ref - for the automatic `useAutoAlign` one, for a host whose
   // trigger sits somewhere that hook's plain window-relative measurement gets wrong. The motivating
   // case is a FAKE-rotated frame (a View turned +-90deg while the OS stays portrait-locked):
   // `measureInWindow` reports a rect in true screen space, `useAutoAlign` compares it against the
-  // raw portrait window, and so measures along the wrong axes — flipping the list upward off-screen
+  // raw portrait window, and so measures along the wrong axes - flipping the list upward off-screen
   // or running it past the frame's bottom. The host runs its own rotation-aware placement hook
   // (sized with `getProfilePickerContentSize`, passing `open` from its own `host.openId === ...`
   // check) and hands the result in here; `align` above still wins over this result's own `align`.
@@ -81,7 +81,7 @@ interface ProfilePickerProps<P extends Profile> {
   // produced it is measuring the right element. Omit for the default automatic placement.
   alignOverride?: ProfilePickerAlignResult
   // Rotation of an ancestor frame turned by a fake landscape (or equivalent), forwarded to the
-  // automatic `useAutoAlign` measurement — the same seam @tastic/hud's InlineColorPicker/
+  // automatic `useAutoAlign` measurement - the same seam @tastic/hud's InlineColorPicker/
   // SectionedDropdown expose (needs @tastic/hud >= 0.8.0; older versions ignore it). Defaults to 0
   // (measurement used as-is), which is exactly how this picker behaved before this prop existed.
   // Deliberately NOT read from an ambient provider the way hud's own pickers do: this component
@@ -89,35 +89,35 @@ interface ProfilePickerProps<P extends Profile> {
   // every existing caller already living under a rotation provider. Ignored when `alignOverride` is
   // supplied (the override replaces the placement this feeds).
   rotation?: PopoverRotation
-  // Trigger's own idle-state text (uppercased here regardless of casing passed in) — shown until a
+  // Trigger's own idle-state text (uppercased here regardless of casing passed in) - shown until a
   // profile is selected.
   guestLabel: string
-  // The null-selection row's own label/icon — defaults to a generic anonymous-player row, but
+  // The null-selection row's own label/icon - defaults to a generic anonymous-player row, but
   // overridable for a caller where null means something else (e.g. an "All Profiles" combined view
   // reusing this same component for its own picker).
   nullLabel?: string
   nullIcon?: string
   onSelect: (profile: P | null) => void
-  // Renders a row for navigating to a dedicated create/rename/delete screen — omit to hide it
+  // Renders a row for navigating to a dedicated create/rename/delete screen - omit to hide it
   // entirely. This component never manages profiles itself (see ProfilesManager for that); this is
   // selection-only.
   onManage?: () => void
 }
 
 // Generic over P (an app's own Profile type, richer than this package's base Profile) so that a
-// caller's own onSelect — typed to accept its own richer profile shape — type-checks against the
+// caller's own onSelect - typed to accept its own richer profile shape - type-checks against the
 // objects this component actually hands back, which are always exactly whatever came in through
 // `profiles` (see handleSelectExisting below). Without this, TypeScript would only ever let
 // onSelect declare the base Profile type, since that's all a non-generic prop signature could
-// promise it receives — even though at runtime it always receives the caller's own richer objects.
+// promise it receives - even though at runtime it always receives the caller's own richer objects.
 // ProfileChip doesn't need this same treatment: it only ever takes a profile in, never hands one
 // back out, so plain structural covariance already lets a richer object through.
 //
 // A name trigger + selection popover: pick an existing profile, fall back to a null/"guest"
 // selection, or (if onManage is passed) navigate to manage the roster. Creating, renaming, and
-// deleting profiles all live outside this component (see ProfilesManager) — this is selection-only,
+// deleting profiles all live outside this component (see ProfilesManager) - this is selection-only,
 // both because that keeps this component simple enough to drop into a HUD trigger row, and because
-// it keeps this popover from needing its own destructive-delete confirmation. Fully prop-driven —
+// it keeps this popover from needing its own destructive-delete confirmation. Fully prop-driven -
 // no internal profile-storage access of its own, so the host app stays the one place that reads
 // its own persistence hook.
 export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage }: ProfilePickerProps<P>) {
@@ -129,12 +129,12 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
 
   const open = host.openId === id
   const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null
-  // Alphabetical — this is the list that sees the most real use, so it's the one that benefits
+  // Alphabetical - this is the list that sees the most real use, so it's the one that benefits
   // most from staying scannable once there are more than a handful of saved profiles.
   const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles])
   // Null row + each saved profile + (if passed) the manage row.
   const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage)
-  // Always called, even when `alignOverride` is supplied and this result goes unused — hooks can't
+  // Always called, even when `alignOverride` is supplied and this result goes unused - hooks can't
   // be conditional (see @tastic/hud's InlineColorPicker for the identical pattern). With an
   // override its triggerRef is never attached, so this hook's own measurement is a no-op.
   const auto = useAutoAlign(open, contentWidth, contentHeight, rotation)
@@ -169,7 +169,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
         </View>
       </TouchableRipple>
 
-      {/* Gated on `measured`, not just `open` — see InlineColorPicker's identical fix. */}
+      {/* Gated on `measured`, not just `open` - see InlineColorPicker's identical fix. */}
       <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={color} caretBorderWidth={2} triggerSize={TRIGGER_HEIGHT}>
         <ScrollView
           style={[
@@ -185,12 +185,12 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
           showsVerticalScrollIndicator={false}
         >
           {/* Selected row's own background fills entirely with its identity color (this seat's own
-          accent for the null row, the profile's own saved color otherwise) — matching how a
+          accent for the null row, the profile's own saved color otherwise) - matching how a
           selected row reads elsewhere (see @tastic/hud's SectionedDropdown) rather than a checkmark
           bolted onto an otherwise-plain row. */}
           <TouchableRipple onPress={handleSelectGuest} style={[styles.row, selectedId === null && { backgroundColor: color }]}>
             <View style={styles.rowInner}>
-              {/* Unfilled, matching a selected profile row's own ProfileChip treatment — no
+              {/* Unfilled, matching a selected profile row's own ProfileChip treatment - no
               background circle, but still the same fixed-size slot every row's icon/chip sits in
               (see ProfileChip's own doc), so this row's icon stays lined up with every other row
               regardless of selection. */}
@@ -208,7 +208,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
             return (
               <TouchableRipple key={profile.id} disabled={taken} onPress={() => handleSelectExisting(profile)} style={[styles.row, selected && { backgroundColor: rowColor }]}>
                 <View style={[styles.rowInner, taken && styles.rowDisabled]}>
-                  {/* Unfilled on a selected row — its own background already fills with the
+                  {/* Unfilled on a selected row - its own background already fills with the
                   profile's color, so a second circle behind the tag would just be a redundant badge
                   where every other selected row in the app has plain icon+text instead. */}
                   <ProfileChip profile={profile} filled={!selected} />
@@ -231,7 +231,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
           {onManage && (
             <>
               <View style={[styles.divider, { backgroundColor: color }]} />
-              {/* Tertiary — a navigation action, not another selectable identity in the list above
+              {/* Tertiary - a navigation action, not another selectable identity in the list above
               it, so it reads more like @tastic/hud's SectionedDropdown All/Clear footer button
               (centered, bold, accent-colored) than a normal row. */}
               <TouchableRipple onPress={handleManage} style={styles.row}>
@@ -252,12 +252,12 @@ const styles = StyleSheet.create({
   anchor: {
     position: 'relative'
   },
-  // See InlineColorPicker's identical comment — React Native Web gives every position:'relative'
+  // See InlineColorPicker's identical comment - React Native Web gives every position:'relative'
   // view its own stacking context, so the elevation has to live on the anchor itself.
   anchorOpen: {
     zIndex: 100
   },
-  // Separates Manage (a navigation action) from the selectable rows above it — different kind of
+  // Separates Manage (a navigation action) from the selectable rows above it - different kind of
   // action, not just another row in the same list. Tinted with the seat's own color (passed in as
   // backgroundColor) rather than a flat gray, matching the border/caret's own accent-tinted look.
   divider: {
@@ -266,7 +266,7 @@ const styles = StyleSheet.create({
     opacity: 0.25
   },
   // Matches ProfileChip's own default size/shape exactly (see this row's own render-site comment)
-  // — no backgroundColor, unlike ProfileChip's own default: this row has no identity color of its
+  // - no backgroundColor, unlike ProfileChip's own default: this row has no identity color of its
   // own to fill it with, and the render site now colors the icon directly instead.
   guestChip: {
     alignItems: 'center',
@@ -280,7 +280,7 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     letterSpacing: 0.5
   },
-  // Centered rather than left-aligned like a normal row — see this row's own render-site comment
+  // Centered rather than left-aligned like a normal row - see this row's own render-site comment
   // for why (a footer action, not another selectable identity).
   manageRowInner: {
     alignItems: 'center',
@@ -298,7 +298,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 8
   },
-  // Padded on every side (not just top/bottom) — a selected row's own full-color background (see
+  // Padded on every side (not just top/bottom) - a selected row's own full-color background (see
   // `row`'s borderRadius) needs real margin from the menu's own straight edges to read as a rounded
   // pill instead of looking clipped against them.
   menuContent: {

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'
@@ -14,17 +14,17 @@ import { type ProfilePickerAlignResult } from './ProfilePicker'
 import { clampTag, isValidTag, MAX_PROFILE_NAME_LENGTH } from './profilesValidation'
 import { Profile } from './types'
 
-// Shared by the New Profile row's own dashed circle and every profile row's own ProfileChip — one
+// Shared by the New Profile row's own dashed circle and every profile row's own ProfileChip - one
 // size for every circle on this screen, rather than each picking its own.
 const CHIP_SIZE = 40
 
-// react-native-paper's own MD3 Text variant names — mirrored locally rather than importing its
+// react-native-paper's own MD3 Text variant names - mirrored locally rather than importing its
 // internal VariantProp/MD3TypescaleKey (not exported from the package's public entry point), same
 // as @tastic/hud's BaseStatsScreen does for its own identical titleVariant prop.
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
 
-// Exported (not just used internally) so a host composing a screen around this component — e.g.
-// @tastic/profile's own ProfilesScreen — can reference this exact shape in its own onCreate/onSave
+// Exported (not just used internally) so a host composing a screen around this component - e.g.
+// @tastic/profile's own ProfilesScreen - can reference this exact shape in its own onCreate/onSave
 // prop types without redeclaring it.
 export interface ProfileEditPatch {
   name: string
@@ -33,51 +33,47 @@ export interface ProfileEditPatch {
 }
 
 export interface ProfilesManagerHandle {
-  // Flushes whatever row is currently being edited — the same thing this component's own unmount
+  // Flushes whatever row is currently being edited - the same thing this component's own unmount
   // effect does, but callable explicitly. Exists because "unmount" isn't a reliable "the user is
   // navigating away" signal on every host: React Navigation's web renderer keeps a popped screen
   // mounted-but-hidden instead of unmounting it, so a host relying only on the unmount fallback
   // silently loses an in-progress edit on `router.back()` there. A host whose router doesn't
   // genuinely unmount this component on navigation should hold a ref and call this right before
   // navigating away (e.g. in its own back-button handler). Safe to call any time, including when
-  // nothing is being edited — a no-op then, same as the unmount effect already is.
+  // nothing is being edited - a no-op then, same as the unmount effect already is.
   commitPendingEdit: () => void
 }
 
 export interface ProfilesManagerProps {
   profiles: Profile[]
-  // The color a brand-new profile's draft starts on — this component doesn't have (and shouldn't
+  // The color a brand-new profile's draft starts on - this component doesn't have (and shouldn't
   // invent) an opinion about the host app's own palette, so this is required rather than defaulted.
   defaultColor: string
   onCreate: (input: ProfileEditPatch) => void
   onSave: (id: string, patch: ProfileEditPatch) => void
-  // Irreversible — this only fires after this component's own confirmation card, not on the first
+  // Irreversible - this only fires after this component's own confirmation card, not on the first
   // tap. If the host app tracks anything else keyed by profile id (stats, history), clear that on
   // its own side when this fires.
   onDelete: (id: string) => void
-  // Rendered inline, before the "Profiles" title, in this component's own header row — a plain
+  // Rendered inline, before the "Profiles" title, in this component's own header row - a plain
   // rendering slot, not an onBack-style callback: this component doesn't know or care that it's a
   // back button, only that the host wants something shown there. Omit to hide the slot.
   headerLeft?: ReactNode
-  // React 19 accepts `ref` as a plain prop on a function component (no forwardRef needed) — see
+  // 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
+  // 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.
   titleVariant?: MD3TextVariant
-  // Transforms the color swatch grid's own preview per-swatch — forwarded straight to the internal
+  // Transforms the color swatch grid's own preview per-swatch - forwarded straight to the internal
   // InlineColorPicker's identical prop (see its own doc). Leaves draftColor/onCreate/onSave's actual
   // color value untouched; only what's rendered changes. Defaults to ProfileColorProvider's preview.
   colorPreview?: (hex: string) => string
@@ -97,7 +93,7 @@ export interface ProfilesManagerProps {
 
 type Row = { kind: 'profile'; profile: Profile } | { kind: 'new' }
 
-// First letter of the name, uppercased — the tag's own default for as long as it hasn't been typed
+// First letter of the name, uppercased - the tag's own default for as long as it hasn't been typed
 // into directly (see the tagManuallySet state below). Empty name -> empty tag, same as typing
 // nothing into the tag field yourself would leave it.
 function deriveTag(name: string): string {
@@ -105,22 +101,22 @@ function deriveTag(name: string): string {
   return trimmed ? trimmed[0].toUpperCase() : ''
 }
 
-// The profile roster itself — create/rename/recolor/retag/delete, editing inline right in the row
-// you tapped — with no navigation of its own: just data in (`profiles`) and callbacks out, plus
+// The profile roster itself - create/rename/recolor/retag/delete, editing inline right in the row
+// you tapped - with no navigation of its own: just data in (`profiles`) and callbacks out, plus
 // this file's own internal edit-draft state. Deliberately router-agnostic (an `onBack`-style prop
 // would still assume *some* host owns navigation; this component doesn't even go that far), so any
 // consuming screen just renders it as its body inside its own routed wrapper (back button, native
 // push/pop transition, whatever persistence hook backs `profiles`/`onCreate`/`onSave`/`onDelete`).
 // Staying router-agnostic means this component can't know for itself whether "navigating away"
-// really unmounts it on a given host's router — see ProfilesManagerHandle's own doc for the
+// 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,37 +124,31 @@ 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.
+  // '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)
   const [draftName, setDraftName] = useState('')
   const [draftColor, setDraftColor] = useState(defaultColor)
   const [draftTag, setDraftTag] = useState('')
-  // Whether the tag has been typed into directly this session — once true, editing the name stops
+  // Whether the tag has been typed into directly this session - once true, editing the name stops
   // overwriting it (see deriveTag's own doc). Starts true for an existing profile that already has
-  // a tag (don't clobber a deliberate choice just because the name changed), false otherwise — a
+  // a tag (don't clobber a deliberate choice just because the name changed), false otherwise - a
   // brand new profile, or one that's never had a tag set at all.
   const [tagManuallySet, setTagManuallySet] = useState(false)
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
 
-  // Commits whichever row is currently open, using its own latest draft state, then closes it —
+  // Commits whichever row is currently open, using its own latest draft state, then closes it -
   // always closes, even when there's nothing valid to save (an empty name just discards the draft
   // rather than leaving the row stuck open). This is the only way a row ever closes: submitting the
-  // name field (see EditRow's own focus-chain wiring — tag submits to name, name submits this),
+  // name field (see EditRow's own focus-chain wiring - tag submits to name, name submits this),
   // switching to a different row (see startEdit, which calls this before opening a new one), or
-  // leaving the screen entirely (see the unmount effect below) — no explicit save/cancel buttons,
+  // leaving the screen entirely (see the unmount effect below) - no explicit save/cancel buttons,
   // just scoped to the whole row instead of one field, since there's more than one field to touch.
   const commitEdit = useCallback(() => {
     const name = draftName.trim()
     if (editingId && name) {
       const tagValid = isValidTag(draftTag)
-      // Surfaced here, not just the field's own live `error` outline — that outline disappears the
+      // Surfaced here, not just the field's own live `error` outline - that outline disappears the
       // moment this row closes, so without this a still-invalid tag would just silently vanish
       // (saved as empty) with no explanation of why it didn't stick.
       if (draftTag && !tagValid) showErrorToast('Invalid tag', 'Use up to 3 letters or a single emoji')
@@ -169,11 +159,11 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
     setEditingId(null)
   }, [editingId, draftName, draftColor, draftTag, onCreate, onSave, showErrorToast])
 
-  // Flushes whatever's currently being edited if this whole screen goes away mid-edit — a hardware
+  // Flushes whatever's currently being edited if this whole screen goes away mid-edit - a hardware
   // back gesture or swipe-back can bypass a host screen's own back button (which should already
   // call commitEdit before navigating away) but still unmounts this component the same as any other
   // exit does. Reads the always-current commitEdit through a ref rather than depending on it
-  // directly in the effect — one that re-ran (and re-cleaned-up) on every keystroke would commit on
+  // directly in the effect - one that re-ran (and re-cleaned-up) on every keystroke would commit on
   // every keystroke too, not just on a genuine unmount.
   const commitEditRef = useRef(commitEdit)
   useEffect(() => {
@@ -181,7 +171,7 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
   })
   useEffect(() => () => commitEditRef.current(), [])
   // The explicit escape hatch for hosts whose "navigate away" doesn't genuinely unmount this
-  // component — see ProfilesManagerHandle's own doc. `[]` deps: the handle object itself never
+  // component - see ProfilesManagerHandle's own doc. `[]` deps: the handle object itself never
   // needs to change identity, since it always calls through the ref to whatever commitEdit is
   // current at call time, the same indirection the unmount effect above already relies on.
   useImperativeHandle(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), [])
@@ -213,8 +203,8 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
     [tagManuallySet]
   )
 
-  // The functional setDraftTag form — reading `previous` from React's own latest-applied state
-  // rather than closing over the `draftTag` variable — matters here, not just style: fast/rapid
+  // The functional setDraftTag form - reading `previous` from React's own latest-applied state
+  // rather than closing over the `draftTag` variable - matters here, not just style: fast/rapid
   // keystrokes can fire their onChangeText calls before a re-render lands, batched into the same
   // update, and clamping every one of them against the same stale `draftTag` (captured once at
   // render time) would let the later ones silently clobber what the earlier ones already clamped
@@ -233,7 +223,7 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
     setConfirmDeleteId(null)
   }, [confirmDeleteId, editingId, onDelete])
 
-  // Alphabetical — this list has no other natural order (creation order isn't meaningful to look
+  // Alphabetical - this list has no other natural order (creation order isn't meaningful to look
   // something up by), and it's the one that actually stays usable once there are more than a
   // handful of profiles on one shared device.
   const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles])
@@ -279,7 +269,7 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
               return <EditRow key={profile.id} draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} onDelete={() => setConfirmDeleteId(profile.id)} fgMuted={fgMuted} host={host} dark={dark} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} />
             }
 
-            // No delete affordance at rest — tap the row to start editing, which is the one place
+            // No delete affordance at rest - tap the row to start editing, which is the one place
             // delete shows (see EditRow): a deliberate extra step before a destructive action is
             // even reachable, not just before it's confirmed.
             return (
@@ -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)} />
     </>
   )
 }
@@ -334,7 +303,7 @@ interface EditRowProps {
   draftTag: string
   onTagChange: (tag: string) => void
   onSubmit: () => void
-  // Omitted for the 'new' row — nothing saved yet to delete.
+  // Omitted for the 'new' row - nothing saved yet to delete.
   onDelete?: () => void
   autoFocus?: boolean
   fgMuted: string
@@ -356,29 +325,29 @@ function AlignedColorPicker({ useAlign, ...props }: ComponentProps<typeof Inline
   return <InlineColorPicker {...props} alignOverride={alignOverride} />
 }
 
-// One row, expanded: the color trigger (@tastic/hud's InlineColorPicker) — doubling as the tag's
-// own display via its `tag` prop below, since there's no separate visible tag field anymore — an
+// One row, expanded: the color trigger (@tastic/hud's InlineColorPicker) - doubling as the tag's
+// own display via its `tag` prop below, since there's no separate visible tag field anymore - an
 // invisible TextInput that exists purely to actually capture what's typed (RN has no way to bring
 // up a keyboard without a real focusable input; this one is just never meant to be *seen*), the
-// name taking up the row's remaining space, and — only for an existing profile — a delete icon at
+// name taking up the row's remaining space, and - only for an existing profile - a delete icon at
 // the very end. The two effects below are what wires tapping the swatch to popping the keyboard on
 // the hidden tag field too, so typing a tag and picking a color read as one combined action instead
 // of two separate taps, with the swatch itself as the only place the tag ever visibly shows.
 // Return-key chains tag -> name via @rific/focus-chain rather than each field submitting on its
-// own — submitting the *name* field is what actually commits the row, so its registration's own
-// onSubmitEditing (a no-op — it's last in the chain) is overridden with onSubmit below, matching
+// own - submitting the *name* field is what actually commits the row, so its registration's own
+// onSubmitEditing (a no-op - it's last in the chain) is overridden with onSubmit below, matching
 // how a normal multi-field form reads: fill fields in order, the last one finishes it.
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }: EditRowProps) {
   const register = useFocusChain()
   const tag = register()
   const name = register()
 
-  // tag.props.focus (from @rific/focus-chain's own register(), not tag.ref — that's a callback
+  // tag.props.focus (from @rific/focus-chain's own register(), not tag.ref - that's a callback
   // ref, not a ref object, so it has no .current to read) is the hook's own imperative "focus this
   // exact registered field" call. Mirrored into a ref every render, same as commitEditRef above,
   // rather than read directly in the effect below: register() returns a brand-new props object on
   // every render (it isn't memoized), so depending on tag.props.focus directly would rerun that
-  // effect — and refocus an already-focused field — on every keystroke into the tag field itself,
+  // effect - and refocus an already-focused field - on every keystroke into the tag field itself,
   // re-triggering its own selectTextOnFocus mid-type and wiping out what's being typed.
   const tagFocusRef = useRef(tag.props.focus)
   useEffect(() => {
@@ -397,9 +366,9 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
     <View style={styles.editRow}>
       {useColorPickerAlign ? <AlignedColorPicker useAlign={useColorPickerAlign} id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} /> : <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} />}
       {/* Invisible on purpose (styles.hiddenTagInput: zero footprint, position: 'absolute' so it
-      doesn't reserve space in the row's own flex layout) — the swatch above is the only place this
+      doesn't reserve space in the row's own flex layout) - the swatch above is the only place this
       value is ever meant to be seen. pointerEvents='none' is what actually keeps it out of the
-      way: without it, this field — even at 1x1 and fully transparent — still sits in front of the
+      way: without it, this field - even at 1x1 and fully transparent - still sits in front of the
       swatch for hit-testing purposes and swallows the tap meant to open the color popover, since
       focusing this field is never done by tapping it directly anyway (see the effect above, which
       focuses it programmatically). accessibilityLabel stands in for the placeholder a visible field
@@ -439,7 +408,7 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingBottom: 8
   },
-  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // 1x1 and fully transparent - there's nothing to see here on purpose (see EditRow's own comment
   // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
   // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
   hiddenTagInput: {
@@ -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