@tastic/profile 0.13.0 → 0.14.0

package/README.md

@@ -51,8 +51,12 @@ see its own doc comment for why that component is generic over your own `Profile
   only - creating, renaming, and deleting all live in `ProfilesManager`. Generic over your own
   `Profile` type (see above). Placement props (all optional, see "Fake-rotated frames" below):
   `align` (force a horizontal side), `alignOverride` (substitute the whole placement result), and
-  `rotation` (forwarded to the automatic measurement). Also exports
-  `getProfilePickerContentSize(profileCount, hasManageRow?)` - the popover's
+  `rotation` (forwarded to the automatic measurement). `colorSection`
+  (`{ value, onChange, previewValue?, swatches?, label?, caption? }`) puts a Color row at the top of
+  the popover that opens a page of swatches (with a back row), and turns the trigger into one
+  button that leads with a chip in `color` with the selected profile's tag; `triggerStyle` styles
+  that button. Also exports
+  `getProfilePickerContentSize(profileCount, hasManageRow?, colorSection?)` - the popover's
   `{ width, height }`, for sizing your own placement hook.
 - **`ProfilesManager`**: the roster screen itself: create/rename/recolor/retag/delete, editing
   inline in the row you tap, with a destructive-delete confirmation. No navigation of its own (no
@@ -142,7 +146,10 @@ const placement = useMyRotatedAlign(open, width, height) // returns a ProfilePic
 
 `getProfilePickerContentSize(profileCount, hasManageRow = false)` returns `{ width, height }`: 220
 wide, and `8 * 2 + (profileCount + 1 + (hasManageRow ? 1 : 0)) * 36` tall (the null/"guest" row, one
-row per profile, and the Manage row when `onManage` is passed).
+row per profile, and the Manage row when `onManage` is passed), or with a color section (pass the same
+object the picker gets) the taller of its two pages: that list plus the Color row (48 with a
+caption, 36 without) and its 9pt divider, or the color page (a 36pt back row and the swatches, 187
+for 20 colors), plus the padding.
 
 
 #### The Profiles screen's color swatch: `useColorPickerAlign`

package/dist/index.d.mts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode, RefObject, Ref } from 'react';
+import { SeedColor } from '@rific/auto-paper';
 import { PopoverHost, PopoverRotation } from '@tastic/hud';
-import { View } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 
 interface Profile {
     id: string;
@@ -27,6 +28,14 @@ declare function ProfileColorProvider({ preview, children }: ProfileColorProvide
 declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
 declare function useProfileDisplayColor(hex: string): string;
 
+interface ProfilePickerColorSection {
+    value: string;
+    onChange: (hex: string) => void;
+    previewValue?: (hex: string) => string;
+    swatches?: SeedColor[];
+    label?: string;
+    caption?: string;
+}
 interface ProfilePickerAlignResult {
     align: 'left' | 'right' | 'center';
     verticalAlign: 'below' | 'above';
@@ -38,7 +47,7 @@ interface ProfilePickerContentSize {
     width: number;
     height: number;
 }
-declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean): ProfilePickerContentSize;
+declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface ProfilePickerProps<P extends Profile> {
     idPrefix: string;
     host: PopoverHost;
@@ -55,8 +64,10 @@ interface ProfilePickerProps<P extends Profile> {
     nullIcon?: string;
     onSelect: (profile: P | null) => void;
     onManage?: () => void;
+    colorSection?: ProfilePickerColorSection;
+    triggerStyle?: StyleProp<ViewStyle>;
 }
-declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -217,4 +228,4 @@ declare function readSharedProfiles(groupId: string): Promise<Profile[] | null>;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode, RefObject, Ref } from 'react';
+import { SeedColor } from '@rific/auto-paper';
 import { PopoverHost, PopoverRotation } from '@tastic/hud';
-import { View } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 
 interface Profile {
     id: string;
@@ -27,6 +28,14 @@ declare function ProfileColorProvider({ preview, children }: ProfileColorProvide
 declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
 declare function useProfileDisplayColor(hex: string): string;
 
+interface ProfilePickerColorSection {
+    value: string;
+    onChange: (hex: string) => void;
+    previewValue?: (hex: string) => string;
+    swatches?: SeedColor[];
+    label?: string;
+    caption?: string;
+}
 interface ProfilePickerAlignResult {
     align: 'left' | 'right' | 'center';
     verticalAlign: 'below' | 'above';
@@ -38,7 +47,7 @@ interface ProfilePickerContentSize {
     width: number;
     height: number;
 }
-declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean): ProfilePickerContentSize;
+declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface ProfilePickerProps<P extends Profile> {
     idPrefix: string;
     host: PopoverHost;
@@ -55,8 +64,10 @@ interface ProfilePickerProps<P extends Profile> {
     nullIcon?: string;
     onSelect: (profile: P | null) => void;
     onManage?: () => void;
+    colorSection?: ProfilePickerColorSection;
+    triggerStyle?: StyleProp<ViewStyle>;
 }
-declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -217,4 +228,4 @@ declare function readSharedProfiles(groupId: string): Promise<Profile[] | null>;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };

package/dist/index.js

@@ -48,17 +48,34 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/ProfileChip.tsx
+// src/IdentityChip.tsx
 var import_auto_paper = require("@rific/auto-paper");
 var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+function IdentityChip({ color, tag, icon, size, filled = true }) {
+  const contrastColor = (0, import_auto_paper.getContrastColor)(color);
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }], children: tag ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: icon, size: size * 0.6, color: contrastColor }) });
+}
+var styles = import_react_native.StyleSheet.create({
+  chip: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tag: {
+    fontWeight: "700",
+    paddingHorizontal: 2
+  }
+});
 
 // src/ProfileColorContext.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ProfileColorContext = (0, import_react.createContext)(void 0);
 function ProfileColorProvider({ preview, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileColorContext.Provider, { value: preview, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProfileColorContext.Provider, { value: preview, children });
 }
 function useProfileColorPreview() {
   return (0, import_react.useContext)(ProfileColorContext);
@@ -69,24 +86,11 @@ function useProfileDisplayColor(hex) {
 }
 
 // src/ProfileChip.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function ProfileChip({ profile, size = 22, filled = true }) {
   const color = useProfileDisplayColor(profile.color);
-  const contrastColor = (0, import_auto_paper.getContrastColor)(color);
-  const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }], children: profile.tag ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IdentityChip, { color, tag: profile.tag, icon: "account", size, filled });
 }
-var styles = import_react_native.StyleSheet.create({
-  chip: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  tag: {
-    fontWeight: "700",
-    paddingHorizontal: 2
-  }
-});
 
 // src/ProfilePicker.tsx
 var import_auto_paper2 = require("@rific/auto-paper");
@@ -95,16 +99,40 @@ var import_hud = require("@tastic/hud");
 var import_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 220;
 var ROW_HEIGHT = 36;
 var LIST_PADDING = 8;
-function getProfilePickerContentSize(profileCount, hasManageRow = false) {
+var MENU_BORDER_WIDTH = 2;
+var ROW_INSET = 12;
+var CHIP_SIZE = 32;
+var CHIP_TRIGGER_PADDING = 6;
+var SWATCH_SIZE = 28;
+var SWATCH_MIN_GAP = 6;
+var COLOR_ROW_CAPTIONED_HEIGHT = 48;
+var COLOR_LABEL_LINE = 18;
+var COLOR_CAPTION_LINE = 16;
+var COLOR_ROW_DIVIDER = 9;
+var GRID_TOP = 4;
+var GRID_BOTTOM = 8;
+var GRID_WIDTH = POPOVER_WIDTH - 2 * MENU_BORDER_WIDTH - 2 * LIST_PADDING - 2 * ROW_INSET;
+var GRID_COLUMNS = Math.floor((GRID_WIDTH + SWATCH_MIN_GAP) / (SWATCH_SIZE + SWATCH_MIN_GAP));
+var GRID_GAP = (GRID_WIDTH - GRID_COLUMNS * SWATCH_SIZE) / (GRID_COLUMNS - 1);
+function colorRowHeight(caption) {
+  return caption ? COLOR_ROW_CAPTIONED_HEIGHT : ROW_HEIGHT;
+}
+function colorPageHeight(swatches) {
+  const rows = Math.ceil(swatches.length / GRID_COLUMNS);
+  return ROW_HEIGHT + GRID_TOP + rows * SWATCH_SIZE + (rows - 1) * GRID_GAP + GRID_BOTTOM;
+}
+function getProfilePickerContentSize(profileCount, hasManageRow = false, colorSection) {
   const rowCount = profileCount + 1 + (hasManageRow ? 1 : 0);
-  return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + rowCount * ROW_HEIGHT };
+  const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0);
+  const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? import_auto_paper2.defaultColors)) : list;
+  return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content };
 }
-function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage }) {
+function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage, colorSection, triggerStyle }) {
   const id = `${idPrefix}-profile`;
   const colorPreview = useProfileColorPreview();
   const menuBg = dark ? "#000000" : "#FFFFFF";
@@ -112,7 +140,7 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
   const open = host.openId === id;
   const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
   const sortedProfiles = (0, import_react2.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
-  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage);
+  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage, colorSection);
   const auto = (0, import_hud.useAutoAlign)(open, contentWidth, contentHeight, rotation);
   const placement = alignOverride ?? auto;
   const { maxHeight, measured, triggerRef, verticalAlign } = placement;
@@ -130,13 +158,23 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
     host.close();
     onManage?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color })
+  const chipTrigger = !!colorSection;
+  const [triggerWidth, setTriggerWidth] = (0, import_react2.useState)(0);
+  const handleAnchorLayout = chipTrigger ? (e) => setTriggerWidth(e.nativeEvent.layout.width) : void 0;
+  const [colorPage, setColorPage] = (0, import_react2.useState)(false);
+  const handleTriggerPress = () => {
+    setColorPage(false);
+    host.toggle(id);
+  };
+  const triggerLabel = (selectedProfile?.name ?? guestLabel).toUpperCase();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], onLayout: handleAnchorLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles2.trigger, chipTrigger && styles2.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles2.chipTriggerInner : styles2.triggerInner, children: [
+      chipTrigger && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IdentityChip, { color, tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon, size: CHIP_SIZE }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_react_native2.ScrollView,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native2.View,
       {
         style: [
           styles2.menu,
@@ -147,20 +185,19 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
             maxHeight
           }
         ],
-        contentContainerStyle: styles2.menuContent,
-        showsVerticalScrollIndicator: false,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Text, { style: [styles2.rowLabel, { color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }], children: nullLabel })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper2.FadingScrollView, { contentContainerStyle: styles2.menuContent, showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          colorSection && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.rowLabel, { color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }], children: nullLabel })
           ] }) }),
           sortedProfiles.map((profile) => {
             const taken = profile.id === takenId;
             const selected = selectedId === profile.id;
             const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProfileChip, { profile, filled: !selected }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileChip, { profile, filled: !selected }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 import_react_native_paper2.Text,
                 {
                   style: [
@@ -175,18 +212,49 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
               )
             ] }) }, profile.id);
           }),
-          onManage && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press.TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: styles2.manageRowInner, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Icon, { source: "account-cog-outline", size: 16, color }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper2.Text, { style: [styles2.manageLabel, { color }], children: "Manage" })
+          onManage && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.manageRowInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "account-cog-outline", size: 16, color }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.manageLabel, { color: fg }], children: "Manage" })
             ] }) })
           ] })
-        ]
+        ] }) }, colorSection && colorPage ? "color" : "list")
       }
     ) })
   ] });
 }
+function ColorRow({ section, fg, dividerColor, onPress }) {
+  const { value, previewValue, label = "Color", caption } = section;
+  const drawn = previewValue ? previewValue(value) : value;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress, style: [styles2.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.colorRowSwatch, { backgroundColor: drawn }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.colorRowText, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "chevron-right", size: 18, color: fg })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: dividerColor }] })
+  ] });
+}
+function ColorPage({ section, profileColor, fg, onBack }) {
+  const { value, onChange, previewValue, swatches = import_auto_paper2.defaultColors, label = "Color" } = section;
+  const displayFor = previewValue ?? ((hex) => hex);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: onBack, style: styles2.row, accessibilityRole: "button", accessibilityLabel: "Back", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "chevron-left", size: 20, color: fg }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.swatches, children: swatches.map((swatch) => {
+      const selected = swatch.value.toLowerCase() === value.toLowerCase();
+      const isProfileColor = !!profileColor && swatch.value.toLowerCase() === profileColor.toLowerCase();
+      const swatchDisplay = displayFor(swatch.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onChange(swatch.value), borderless: true, style: [styles2.swatch, { backgroundColor: swatchDisplay }, selected && styles2.swatchSelected], accessibilityRole: "button", accessibilityLabel: isProfileColor ? `${swatch.label}, profile color` : swatch.label, accessibilityState: { selected }, children: selected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "check", size: 16, color: (0, import_auto_paper2.getContrastColor)(swatchDisplay) }) : isProfileColor ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.profileDot, { backgroundColor: (0, import_auto_paper2.getContrastColor)(swatchDisplay) }] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, {}) }, swatch.value);
+    }) })
+  ] });
+}
 var styles2 = import_react_native2.StyleSheet.create({
   anchor: {
     position: "relative"
@@ -196,6 +264,40 @@ var styles2 = import_react_native2.StyleSheet.create({
   anchorOpen: {
     zIndex: 100
   },
+  // The pill, rounded at both ends. The host adds its own background through `triggerStyle`.
+  chipTrigger: {
+    borderRadius: (CHIP_SIZE + 2 * CHIP_TRIGGER_PADDING) / 2
+  },
+  // The padding lives on the measured view, not the pressable around it, so the placement measures
+  // the pill's real edge: measured from inside the padding, a popover opening toward a screen edge
+  // was sized as if the pill were 6pt further from it, and ran 2pt past that edge.
+  chipTriggerInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    height: CHIP_SIZE + 2 * CHIP_TRIGGER_PADDING,
+    paddingLeft: CHIP_TRIGGER_PADDING,
+    paddingRight: CHIP_TRIGGER_PADDING + 8
+  },
+  colorRowCaption: {
+    fontSize: 12,
+    lineHeight: COLOR_CAPTION_LINE,
+    opacity: 0.6
+  },
+  // A row's label, with a line height so the captioned Color row's height is exact.
+  colorRowLabel: {
+    fontSize: 14,
+    lineHeight: COLOR_LABEL_LINE
+  },
+  // The color in effect, in the same 22pt slot as every row's chip.
+  colorRowSwatch: {
+    borderRadius: 11,
+    height: 22,
+    width: 22
+  },
+  colorRowText: {
+    flex: 1
+  },
   // 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.
@@ -230,7 +332,7 @@ var styles2 = import_react_native2.StyleSheet.create({
   },
   menu: {
     borderRadius: 12,
-    borderWidth: 2,
+    borderWidth: MENU_BORDER_WIDTH,
     elevation: 8,
     shadowColor: "#000000",
     shadowOffset: { height: 2, width: 0 },
@@ -243,6 +345,12 @@ var styles2 = import_react_native2.StyleSheet.create({
   menuContent: {
     padding: LIST_PADDING
   },
+  // The selected profile's own color (see ColorSection).
+  profileDot: {
+    borderRadius: 4,
+    height: 8,
+    width: 8
+  },
   row: {
     borderRadius: 8,
     height: ROW_HEIGHT
@@ -255,12 +363,33 @@ var styles2 = import_react_native2.StyleSheet.create({
     flexDirection: "row",
     flex: 1,
     gap: 8,
-    paddingHorizontal: 12
+    paddingHorizontal: ROW_INSET
   },
   rowLabel: {
     flex: 1,
     fontSize: 14
   },
+  swatch: {
+    alignItems: "center",
+    borderRadius: SWATCH_SIZE / 2,
+    height: SWATCH_SIZE,
+    justifyContent: "center",
+    width: SWATCH_SIZE
+  },
+  swatchSelected: {
+    borderColor: "#ffffff",
+    borderWidth: 2
+  },
+  swatches: {
+    columnGap: GRID_GAP,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginBottom: GRID_BOTTOM,
+    marginHorizontal: ROW_INSET,
+    marginTop: GRID_TOP,
+    rowGap: GRID_GAP,
+    width: GRID_WIDTH
+  },
   trigger: {
     alignSelf: "flex-start"
   },
@@ -321,8 +450,8 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CHIP_SIZE = 40;
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CHIP_SIZE2 = 40;
 function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
@@ -398,38 +527,38 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   }, [confirmDeleteId, editingId, onDelete]);
   const sortedProfiles = (0, import_react3.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.KeyboardAvoidingView, { behavior: import_react_native3.Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.ScrollView, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.KeyboardAvoidingView, { behavior: import_react_native3.Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.ScrollView, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
       if (row.kind === "new") {
         if (editingId !== "new") {
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Icon, { source: "plus", size: 20, color: fg }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Icon, { source: "plus", size: 20, color: fg }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
       }
       const { profile } = row;
       if (editingId === profile.id) {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview, useColorPickerAlign }, profile.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview, useColorPickerAlign }, profile.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileChip, { profile, size: CHIP_SIZE }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProfileChip, { profile, size: CHIP_SIZE2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    /* @__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) })
+    /* @__PURE__ */ (0, import_jsx_runtime5.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 }) {
   const { width: windowWidth } = (0, import_react_native3.useWindowDimensions)();
   const { width, height } = (0, import_hud2.getInlineColorPickerContentSize)(import_auto_paper3.defaultColors.length, windowWidth);
   const alignOverride = useAlign(props.host.openId === props.id, width, height);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud2.InlineColorPicker, { ...props, alignOverride });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_hud2.InlineColorPicker, { ...props, alignOverride });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
   const register = (0, import_focus_chain.useFocusChain)();
@@ -442,11 +571,11 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   (0, import_react3.useEffect)(() => {
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
+    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
 var styles3 = import_react_native3.StyleSheet.create({
@@ -454,11 +583,17 @@ var styles3 = import_react_native3.StyleSheet.create({
     gap: 4,
     paddingHorizontal: 20
   },
+  // zIndex: the color popover lives inside this row, and a zIndex only orders siblings of one parent
+  // (React Native Web also gives every positioned view its own stacking context), so the popover's
+  // own zIndex never reached the rows after this one: they were drawn over it (a Kid row and the New
+  // Profile row across the swatches, 2026-10-16). Raising the row lifts the popover with it. There
+  // is only ever one edit row.
   editRow: {
     alignItems: "center",
     flexDirection: "row",
     gap: 8,
-    paddingVertical: 6
+    paddingVertical: 6,
+    zIndex: 1
   },
   header: {
     alignItems: "center",
@@ -499,10 +634,10 @@ var styles3 = import_react_native3.StyleSheet.create({
   },
   rowChip: {
     alignItems: "center",
-    borderRadius: CHIP_SIZE / 2,
-    height: CHIP_SIZE,
+    borderRadius: CHIP_SIZE2 / 2,
+    height: CHIP_SIZE2,
     justifyContent: "center",
-    width: CHIP_SIZE
+    width: CHIP_SIZE2
   },
   rowInner: {
     alignItems: "center",
@@ -526,7 +661,7 @@ var import_auto_paper4 = require("@rific/auto-paper");
 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");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 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);
@@ -536,7 +671,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, 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_runtime6.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = import_react_native4.StyleSheet.create({
   container: {