@tastic/profile 0.13.0 → 0.14.1

package/dist/index.mjs

@@ -5,17 +5,34 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-// src/ProfileChip.tsx
+// src/IdentityChip.tsx
 import { getContrastColor } from "@rific/auto-paper";
 import { StyleSheet, View } from "react-native";
 import { Icon, Text } from "react-native-paper";
+import { jsx } from "react/jsx-runtime";
+var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+function IdentityChip({ color, tag, icon, size, filled = true }) {
+  const contrastColor = getContrastColor(color);
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4);
+  return /* @__PURE__ */ jsx(View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }], children: tag ? /* @__PURE__ */ jsx(Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx(Icon, { source: icon, size: size * 0.6, color: contrastColor }) });
+}
+var styles = StyleSheet.create({
+  chip: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tag: {
+    fontWeight: "700",
+    paddingHorizontal: 2
+  }
+});
 
 // src/ProfileColorContext.tsx
 import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ProfileColorContext = createContext(void 0);
 function ProfileColorProvider({ preview, children }) {
-  return /* @__PURE__ */ jsx(ProfileColorContext.Provider, { value: preview, children });
+  return /* @__PURE__ */ jsx2(ProfileColorContext.Provider, { value: preview, children });
 }
 function useProfileColorPreview() {
   return useContext(ProfileColorContext);
@@ -26,42 +43,53 @@ function useProfileDisplayColor(hex) {
 }
 
 // src/ProfileChip.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+import { jsx as jsx3 } from "react/jsx-runtime";
 function ProfileChip({ profile, size = 22, filled = true }) {
   const color = useProfileDisplayColor(profile.color);
-  const contrastColor = getContrastColor(color);
-  const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ jsx2(View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }], children: profile.tag ? /* @__PURE__ */ jsx2(Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ jsx2(Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
+  return /* @__PURE__ */ jsx3(IdentityChip, { color, tag: profile.tag, icon: "account", size, filled });
 }
-var styles = StyleSheet.create({
-  chip: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  tag: {
-    fontWeight: "700",
-    paddingHorizontal: 2
-  }
-});
 
 // src/ProfilePicker.tsx
-import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
+import { defaultColors, FadingScrollView, getContrastColor as getContrastColor2 } from "@rific/auto-paper";
 import { TouchableRipple } from "@rific/feedback-press";
 import { PopoverBody, useAutoAlign } from "@tastic/hud";
-import { useMemo } from "react";
-import { ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { useMemo, useState } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { Icon as Icon2, Text as Text2 } from "react-native-paper";
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs } from "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 ?? 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";
@@ -69,7 +97,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 = 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 = useAutoAlign(open, contentWidth, contentHeight, rotation);
   const placement = alignOverride ?? auto;
   const { maxHeight, measured, triggerRef, verticalAlign } = placement;
@@ -87,13 +115,24 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
     host.close();
     onManage?.();
   };
-  return /* @__PURE__ */ jsxs(View2, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
-    /* @__PURE__ */ jsx3(TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ jsxs(View2, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
-      /* @__PURE__ */ jsx3(Text2, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
-      /* @__PURE__ */ jsx3(Icon2, { source: "menu-down", size: 16, color })
+  const chipTrigger = !!colorSection;
+  const [triggerWidth, setTriggerWidth] = useState(0);
+  const handleAnchorLayout = chipTrigger ? (e) => setTriggerWidth(e.nativeEvent.layout.width) : void 0;
+  const [colorPage, setColorPage] = useState(false);
+  const handleTriggerPress = () => {
+    setColorPage(false);
+    host.toggle(id);
+  };
+  const triggerLabel = (selectedProfile?.name ?? guestLabel).toUpperCase();
+  const manageFooter = !!onManage && !(colorSection && colorPage);
+  return /* @__PURE__ */ jsxs(View2, { style: [styles2.anchor, open && styles2.anchorOpen], onLayout: handleAnchorLayout, children: [
+    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles2.trigger, chipTrigger && styles2.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ jsxs(View2, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles2.chipTriggerInner : styles2.triggerInner, children: [
+      chipTrigger && /* @__PURE__ */ jsx4(IdentityChip, { color, tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon, size: CHIP_SIZE }),
+      /* @__PURE__ */ jsx4(Text2, { style: [styles2.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
+      /* @__PURE__ */ jsx4(Icon2, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
     ] }) }),
-    /* @__PURE__ */ jsx3(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs(
-      ScrollView,
+    /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs(
+      View2,
       {
         style: [
           styles2.menu,
@@ -104,39 +143,40 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
             maxHeight
           }
         ],
-        contentContainerStyle: styles2.menuContent,
-        showsVerticalScrollIndicator: false,
         children: [
-          /* @__PURE__ */ jsx3(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
-            /* @__PURE__ */ jsx3(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx3(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
-            /* @__PURE__ */ jsx3(Text2, { style: [styles2.rowLabel, { color: selectedId === null ? getContrastColor2(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__ */ jsx3(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-              /* @__PURE__ */ jsx3(ProfileChip, { profile, filled: !selected }),
-              /* @__PURE__ */ jsx3(
-                Text2,
-                {
-                  style: [
-                    styles2.rowLabel,
-                    {
-                      color: selected ? getContrastColor2(rowColor) : fg
-                    }
-                  ],
-                  numberOfLines: 1,
-                  children: profile.name
-                }
-              )
-            ] }) }, profile.id);
-          }),
-          onManage && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx3(View2, { style: [styles2.divider, { backgroundColor: color }] }),
-            /* @__PURE__ */ jsx3(TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ jsxs(View2, { style: styles2.manageRowInner, children: [
-              /* @__PURE__ */ jsx3(Icon2, { source: "account-cog-outline", size: 16, color }),
-              /* @__PURE__ */ jsx3(Text2, { style: [styles2.manageLabel, { color }], children: "Manage" })
+          /* @__PURE__ */ jsx4(FadingScrollView, { contentContainerStyle: [styles2.menuContent, manageFooter && styles2.menuContentAboveFooter], showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ jsx4(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            colorSection && /* @__PURE__ */ jsx4(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
+            /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
+              /* @__PURE__ */ jsx4(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx4(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
+              /* @__PURE__ */ jsx4(Text2, { style: [styles2.rowLabel, { color: selectedId === null ? getContrastColor2(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__ */ jsx4(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+                /* @__PURE__ */ jsx4(ProfileChip, { profile, filled: !selected }),
+                /* @__PURE__ */ jsx4(
+                  Text2,
+                  {
+                    style: [
+                      styles2.rowLabel,
+                      {
+                        color: selected ? getContrastColor2(rowColor) : fg
+                      }
+                    ],
+                    numberOfLines: 1,
+                    children: profile.name
+                  }
+                )
+              ] }) }, profile.id);
+            })
+          ] }) }, colorSection && colorPage ? "color" : "list"),
+          manageFooter && /* @__PURE__ */ jsxs(View2, { style: styles2.menuFooter, children: [
+            /* @__PURE__ */ jsx4(View2, { style: [styles2.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ jsxs(View2, { style: styles2.manageRowInner, children: [
+              /* @__PURE__ */ jsx4(Icon2, { source: "account-cog-outline", size: 16, color }),
+              /* @__PURE__ */ jsx4(Text2, { style: [styles2.manageLabel, { color: fg }], children: "Manage" })
             ] }) })
           ] })
         ]
@@ -144,6 +184,37 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
     ) })
   ] });
 }
+function ColorRow({ section, fg, dividerColor, onPress }) {
+  const { value, previewValue, label = "Color", caption } = section;
+  const drawn = previewValue ? previewValue(value) : value;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx4(TouchableRipple, { onPress, style: [styles2.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
+      /* @__PURE__ */ jsx4(View2, { style: [styles2.colorRowSwatch, { backgroundColor: drawn }] }),
+      /* @__PURE__ */ jsxs(View2, { style: styles2.colorRowText, children: [
+        /* @__PURE__ */ jsx4(Text2, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
+        caption ? /* @__PURE__ */ jsx4(Text2, { style: [styles2.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
+      ] }),
+      /* @__PURE__ */ jsx4(Icon2, { source: "chevron-right", size: 18, color: fg })
+    ] }) }),
+    /* @__PURE__ */ jsx4(View2, { style: [styles2.divider, { backgroundColor: dividerColor }] })
+  ] });
+}
+function ColorPage({ section, profileColor, fg, onBack }) {
+  const { value, onChange, previewValue, swatches = defaultColors, label = "Color" } = section;
+  const displayFor = previewValue ?? ((hex) => hex);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: onBack, style: styles2.row, accessibilityRole: "button", accessibilityLabel: "Back", children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
+      /* @__PURE__ */ jsx4(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx4(Icon2, { source: "chevron-left", size: 20, color: fg }) }),
+      /* @__PURE__ */ jsx4(Text2, { style: [styles2.colorRowLabel, { color: fg }], numberOfLines: 1, children: label })
+    ] }) }),
+    /* @__PURE__ */ jsx4(View2, { 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__ */ jsx4(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__ */ jsx4(Icon2, { source: "check", size: 16, color: getContrastColor2(swatchDisplay) }) : isProfileColor ? /* @__PURE__ */ jsx4(View2, { style: [styles2.profileDot, { backgroundColor: getContrastColor2(swatchDisplay) }] }) : /* @__PURE__ */ jsx4(View2, {}) }, swatch.value);
+    }) })
+  ] });
+}
 var styles2 = StyleSheet2.create({
   anchor: {
     position: "relative"
@@ -153,6 +224,40 @@ var styles2 = StyleSheet2.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.
@@ -187,7 +292,7 @@ var styles2 = StyleSheet2.create({
   },
   menu: {
     borderRadius: 12,
-    borderWidth: 2,
+    borderWidth: MENU_BORDER_WIDTH,
     elevation: 8,
     shadowColor: "#000000",
     shadowOffset: { height: 2, width: 0 },
@@ -200,6 +305,20 @@ var styles2 = StyleSheet2.create({
   menuContent: {
     padding: LIST_PADDING
   },
+  // With Manage pinned below, its own padding takes the bottom edge (same total height as before).
+  menuContentAboveFooter: {
+    paddingBottom: 0
+  },
+  menuFooter: {
+    paddingBottom: LIST_PADDING,
+    paddingHorizontal: LIST_PADDING
+  },
+  // The selected profile's own color (see ColorSection).
+  profileDot: {
+    borderRadius: 4,
+    height: 8,
+    width: 8
+  },
   row: {
     borderRadius: 8,
     height: ROW_HEIGHT
@@ -212,12 +331,33 @@ var styles2 = StyleSheet2.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"
   },
@@ -235,13 +375,13 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/ProfilesManager.tsx
-import { defaultColors, useAutoPaperTheme } from "@rific/auto-paper";
+import { defaultColors as defaultColors2, useAutoPaperTheme } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
 import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud";
-import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
-import { KeyboardAvoidingView, Platform, ScrollView as ScrollView2, StyleSheet as StyleSheet3, useWindowDimensions, View as View3 } from "react-native";
+import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet as StyleSheet3, useWindowDimensions, View as View3 } from "react-native";
 import { Icon as Icon3, Text as Text3, TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -278,8 +418,8 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var CHIP_SIZE = 40;
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var CHIP_SIZE2 = 40;
 function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
@@ -293,12 +433,12 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   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 [editingId, setEditingId] = useState(null);
-  const [draftName, setDraftName] = useState("");
-  const [draftColor, setDraftColor] = useState(defaultColor);
-  const [draftTag, setDraftTag] = useState("");
-  const [tagManuallySet, setTagManuallySet] = useState(false);
-  const [confirmDeleteId, setConfirmDeleteId] = useState(null);
+  const [editingId, setEditingId] = useState2(null);
+  const [draftName, setDraftName] = useState2("");
+  const [draftColor, setDraftColor] = useState2(defaultColor);
+  const [draftTag, setDraftTag] = useState2("");
+  const [tagManuallySet, setTagManuallySet] = useState2(false);
+  const [confirmDeleteId, setConfirmDeleteId] = useState2(null);
   const commitEdit = useCallback(() => {
     const name = draftName.trim();
     if (editingId && name) {
@@ -358,35 +498,35 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2(View3, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
-      /* @__PURE__ */ jsx4(Text3, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
+      /* @__PURE__ */ jsx5(Text3, { variant: titleVariant, style: [styles3.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ jsx4(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ jsx4(ScrollView2, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+    /* @__PURE__ */ jsx5(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ jsx5(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__ */ jsx4(TouchableRipple2, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
-            /* @__PURE__ */ jsx4(View3, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx4(Icon3, { source: "plus", size: 20, color: fg }) }),
-            /* @__PURE__ */ jsx4(Text3, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
+          return /* @__PURE__ */ jsx5(TouchableRipple2, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
+            /* @__PURE__ */ jsx5(View3, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx5(Icon3, { source: "plus", size: 20, color: fg }) }),
+            /* @__PURE__ */ jsx5(Text3, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ jsx4(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
+        return /* @__PURE__ */ jsx5(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__ */ jsx4(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__ */ jsx5(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__ */ jsx4(TouchableRipple2, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
-        /* @__PURE__ */ jsx4(ProfileChip, { profile, size: CHIP_SIZE }),
-        /* @__PURE__ */ jsx4(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      return /* @__PURE__ */ jsx5(TouchableRipple2, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
+        /* @__PURE__ */ jsx5(ProfileChip, { profile, size: CHIP_SIZE2 }),
+        /* @__PURE__ */ jsx5(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
     }) }) }),
-    /* @__PURE__ */ jsx4(ConfirmDialog, { visible: confirmDeleteProfile !== null, title: "Delete Profile?", message: confirmDeleteProfile ? `This permanently deletes ${confirmDeleteProfile.name}\u2019s profile. This cannot be undone.` : "", confirmLabel: "Delete", cancelLabel: "Cancel", icon: "alert-outline", destructive: true, onConfirm: handleConfirmDelete, onCancel: () => setConfirmDeleteId(null) })
+    /* @__PURE__ */ jsx5(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 } = useWindowDimensions();
-  const { width, height } = getInlineColorPickerContentSize(defaultColors.length, windowWidth);
+  const { width, height } = getInlineColorPickerContentSize(defaultColors2.length, windowWidth);
   const alignOverride = useAlign(props.host.openId === props.id, width, height);
-  return /* @__PURE__ */ jsx4(InlineColorPicker, { ...props, alignOverride });
+  return /* @__PURE__ */ jsx5(InlineColorPicker, { ...props, alignOverride });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
   const register = useFocusChain();
@@ -400,10 +540,10 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ jsx4(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ jsx4(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ jsx4(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
-    /* @__PURE__ */ jsx4(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__ */ jsx4(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx4(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
+    useColorPickerAlign ? /* @__PURE__ */ jsx5(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ jsx5(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
+    /* @__PURE__ */ jsx5(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx5(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__ */ jsx5(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx5(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
 var styles3 = StyleSheet3.create({
@@ -411,11 +551,17 @@ var styles3 = StyleSheet3.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",
@@ -456,10 +602,10 @@ var styles3 = StyleSheet3.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",
@@ -483,7 +629,7 @@ import { useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
 import { IconButton } from "@rific/feedback-press";
 import { useRef as useRef2 } from "react";
 import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = useAutoPaperTheme2();
   const managerRef = useRef2(null);
@@ -493,7 +639,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ jsx5(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx5(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx5(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ jsx6(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx6(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx6(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = StyleSheet4.create({
   container: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "Player profile identity for local-multiplayer React Native games: a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",
@@ -92,7 +92,7 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "@rific/auto-paper": ">=0.9.0",
+    "@rific/auto-paper": ">=0.13.0",
     "@rific/feedback-press": ">=0.10.0",
     "@rific/focus-chain": ">=0.4.0",
     "@rific/toaster": ">=0.4.0",

package/src/IdentityChip.tsx

@@ -0,0 +1,58 @@
+import { getContrastColor } from '@rific/auto-paper'
+import { StyleSheet, View } from 'react-native'
+import { Icon, Text } from 'react-native-paper'
+
+// Presence check, not isValidTag's own full-string emoji validation (profilesValidation.ts) - this
+// only decides a font-size ratio, so it doesn't need that check's ZWJ/variation-selector precision,
+// just "does this tag contain a pictograph at all."
+const EMOJI_PATTERN = /\p{Extended_Pictographic}/u
+
+interface Props {
+  // The color drawn, exactly as given (no ProfileColorProvider transform: the caller has already
+  // decided what is drawn).
+  color: string
+  // Shown when non-empty, else `icon`.
+  tag?: string
+  icon: string
+  size: number
+  // See ProfileChip's `filled`.
+  filled?: boolean
+}
+
+// A filled circle with a tag (or an icon) in a contrast-safe color on top: the drawing behind
+// ProfileChip (a profile's own colors) and ProfilePicker's chip trigger (the live color in effect,
+// which may not be any profile's saved one).
+export function IdentityChip({ color, tag, icon, size, filled = true }: Props) {
+  const contrastColor = getContrastColor(color)
+  // An emoji glyph reads visually smaller than a bold letter at the same fontSize (the system emoji
+  // font leaves more of its own em-box empty), so a plain-text ratio that looks right for "J" still
+  // looks small for "🎮" at the identical size - this bumps emoji up to the icon's own ratio instead,
+  // since a single emoji is closer in visual weight to an icon glyph than to a line of text.
+  //
+  // Three letters don't fit across the circle at 0.4 in a wide bold face (DAD in Solitaire's DejaVu
+  // Serif Bold is a whole chip wide), and the web build ignores adjustsFontSizeToFit, so it cut
+  // them off there ("D..."); 0.32 fits them, with adjustsFontSizeToFit still the backstop on native.
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4)
+  return (
+    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: color }]}>
+      {tag ? (
+        <Text style={[styles.tag, { color: contrastColor, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
+          {tag}
+        </Text>
+      ) : (
+        <Icon source={icon} size={size * 0.6} color={contrastColor} />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tag: {
+    fontWeight: '700',
+    paddingHorizontal: 2
+  }
+})