@tastic/profile 0.16.2 → 0.18.0

package/dist/index.mjs

@@ -5,6 +5,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
+// src/OptionPicker.tsx
+import { Fragment as Fragment2 } from "react";
+
 // src/PickerMenu.tsx
 import { defaultColors, FadingScrollView, getContrastColor as getContrastColor2 } from "@rific/auto-paper";
 import { TouchableRipple } from "@rific/feedback-press";
@@ -90,6 +93,12 @@ var MENU_BORDER_WIDTH = 2;
 var ROW_INSET = 12;
 var CHIP_SIZE = 32;
 var CHIP_TRIGGER_PADDING = 6;
+var CHIP_TRIGGER_END_PADDING = CHIP_TRIGGER_PADDING + 8;
+var CHIP_TRIGGER_GAP = 8;
+var PLAIN_TRIGGER_GAP = 2;
+var CHEVRON_SIZE = 16;
+var CHIP_TRIGGER_FIXED_WIDTH = CHIP_TRIGGER_PADDING + CHIP_SIZE + 2 * CHIP_TRIGGER_GAP + CHEVRON_SIZE + CHIP_TRIGGER_END_PADDING;
+var PLAIN_TRIGGER_FIXED_WIDTH = PLAIN_TRIGGER_GAP + CHEVRON_SIZE;
 var SWATCH_SIZE = 28;
 var SWATCH_MIN_GAP = 6;
 var SWATCH_RING_WIDTH = 2;
@@ -97,7 +106,7 @@ var COLOR_ROW_SWATCH_SIZE = 22;
 var COLOR_ROW_CAPTIONED_HEIGHT = 48;
 var COLOR_LABEL_LINE = 18;
 var COLOR_CAPTION_LINE = 16;
-var COLOR_ROW_DIVIDER = 9;
+var DIVIDER_HEIGHT = 9;
 var GRID_TOP = 4;
 var GRID_BOTTOM = 8;
 var GRID_WIDTH = POPOVER_WIDTH - 2 * MENU_BORDER_WIDTH - 2 * LIST_PADDING - 2 * ROW_INSET;
@@ -110,8 +119,8 @@ 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 pickerContentSize(rowCount, colorSection) {
-  const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0);
+function pickerContentSize(rowCount, colorSection, dividerCount = 0) {
+  const list = rowCount * ROW_HEIGHT + dividerCount * DIVIDER_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + DIVIDER_HEIGHT : 0);
   const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? defaultColors)) : list;
   return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content };
 }
@@ -134,11 +143,15 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
   };
   const triggerLabel = label.toUpperCase();
   const showFooter = !!footer && !showColorPage;
-  return /* @__PURE__ */ jsxs2(View3, { style: [styles3.anchor, open && styles3.anchorOpen], onLayout: handleAnchorLayout, children: [
-    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles3.trigger, chipTrigger && styles3.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ jsxs2(View3, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles3.chipTriggerInner : styles3.triggerInner, children: [
+  const flatTriggerStyle = StyleSheet3.flatten(triggerStyle) ?? {};
+  const { flexShrink, ...pillStyle } = flatTriggerStyle;
+  const shrinks = typeof flexShrink === "number" && flexShrink > 0;
+  const anchorShrink = shrinks ? { flexShrink, minWidth: chipTrigger ? CHIP_TRIGGER_FIXED_WIDTH : PLAIN_TRIGGER_FIXED_WIDTH } : void 0;
+  return /* @__PURE__ */ jsxs2(View3, { style: [styles3.anchor, anchorShrink, open && styles3.anchorOpen], onLayout: handleAnchorLayout, children: [
+    /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles3.trigger, chipTrigger && styles3.chipTrigger, shrinks && styles3.triggerShrinks, shrinks ? pillStyle : triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ jsxs2(View3, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles3.chipTriggerInner : styles3.triggerInner, children: [
       chip && /* @__PURE__ */ jsx4(IdentityChip, { color, tag: chip.tag, icon: chip.icon, size: CHIP_SIZE }),
       /* @__PURE__ */ jsx4(Text2, { style: [styles3.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
-      /* @__PURE__ */ jsx4(Icon2, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
+      /* @__PURE__ */ jsx4(Icon2, { source: "menu-down", size: CHEVRON_SIZE, color: chipTrigger ? fg : color })
     ] }) }),
     /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs2(
       View3,
@@ -158,7 +171,7 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
             children
           ] }) }, showColorPage ? "color" : "list"),
           showFooter && /* @__PURE__ */ jsxs2(View3, { style: styles3.menuFooter, children: [
-            /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ jsx4(MenuDivider, { color }),
             footer
           ] })
         ]
@@ -187,9 +200,12 @@ function ColorRow({ section, fg, dividerColor, onPress }) {
       ] }),
       /* @__PURE__ */ jsx4(Icon2, { source: "chevron-right", size: 18, color: fg })
     ] }) }),
-    /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: dividerColor }] })
+    /* @__PURE__ */ jsx4(MenuDivider, { color: dividerColor })
   ] });
 }
+function MenuDivider({ color }) {
+  return /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: color }] });
+}
 function ColorPage({ section, homeColor, fg, onBack }) {
   const { value, onChange, previewValue, swatches = defaultColors, label = "Color", takenValue, allowSwapTaken } = section;
   const renderSwatch = useProfileSwatchRenderer();
@@ -256,10 +272,10 @@ var styles3 = StyleSheet3.create({
   chipTriggerInner: {
     alignItems: "center",
     flexDirection: "row",
-    gap: 8,
+    gap: CHIP_TRIGGER_GAP,
     height: CHIP_SIZE + 2 * CHIP_TRIGGER_PADDING,
     paddingLeft: CHIP_TRIGGER_PADDING,
-    paddingRight: CHIP_TRIGGER_PADDING + 8
+    paddingRight: CHIP_TRIGGER_END_PADDING
   },
   colorRowCaption: {
     fontSize: 12,
@@ -281,7 +297,8 @@ var styles3 = StyleSheet3.create({
     flex: 1
   },
   // Separates the footer (a navigation action) and the Color row from the selectable rows - a
-  // different kind of action, not just another row in the same list. Tinted with the seat's own color
+  // different kind of action, not just another row in the same list - and an OptionPicker's groups
+  // of options from each other (its `dividerBefore`). 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: {
@@ -368,20 +385,33 @@ var styles3 = StyleSheet3.create({
   triggerInner: {
     alignItems: "center",
     flexDirection: "row",
-    gap: 2,
+    gap: PLAIN_TRIGGER_GAP,
     height: TRIGGER_HEIGHT
   },
+  // Lets the label, alone in its row, give way to a trigger narrower than its name (see `shrinks`).
+  // With room it keeps its natural width, so this changes nothing there.
   triggerLabel: {
+    flexShrink: 1,
     fontSize: 13,
     fontWeight: "700",
-    letterSpacing: 1
+    letterSpacing: 1,
+    minWidth: 0
+  },
+  // A shrinking trigger (see `shrinks`): no wider than its anchor. Its row is then laid out at that
+  // width, which is what cuts the label off.
+  triggerShrinks: {
+    maxWidth: "100%"
   }
 });
 
 // src/OptionPicker.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function getOptionPickerContentSize(optionCount, colorSection) {
-  return pickerContentSize(optionCount, colorSection);
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function hasDividerBefore(option, index) {
+  return index > 0 && !!option.dividerBefore;
+}
+function getOptionPickerContentSize(options, colorSection) {
+  if (typeof options === "number") return pickerContentSize(options, colorSection);
+  return pickerContentSize(options.length, colorSection, options.filter(hasDividerBefore).length);
 }
 function OptionPicker({ id, host, options, value, onChange, color, dark, icon, rowIcon = icon, colorSection, align, alignOverride, rotation = 0, triggerStyle }) {
   const fg = dark ? "#FFFFFF" : "#000000";
@@ -390,7 +420,10 @@ function OptionPicker({ id, host, options, value, onChange, color, dark, icon, r
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option, index) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    hasDividerBefore(option, index) && /* @__PURE__ */ jsx5(MenuDivider, { color }),
+    /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) })
+  ] }, option.value)) });
 }
 
 // src/ProfileChip.tsx
@@ -406,7 +439,7 @@ import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useMemo as useMemo2 } from "react";
 import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
 import { Icon as Icon3, Text as Text3 } from "react-native-paper";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function getProfilePickerContentSize(profileCount, hasManageRow = false, colorSection) {
   return pickerContentSize(profileCount + 1 + (hasManageRow ? 1 : 0), colorSection);
 }
@@ -431,17 +464,17 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, takenIds
     host.close();
     onManage?.();
   };
-  const manageFooter = onManage ? /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: handleManage, style: pickerMenuStyles.row, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.manageRowInner, children: [
+  const manageFooter = onManage ? /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: handleManage, style: pickerMenuStyles.row, children: /* @__PURE__ */ jsxs4(View4, { style: styles4.manageRowInner, children: [
     /* @__PURE__ */ jsx7(Icon3, { source: "account-cog-outline", size: 16, color }),
     /* @__PURE__ */ jsx7(Text3, { style: [styles4.manageLabel, { color: fg }], children: "Manage" })
   ] }) }) : void 0;
-  return /* @__PURE__ */ jsxs3(PickerMenu, { id, host, color, dark, label: selectedProfile?.name ?? guestLabel, chip: colorSection ? { tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon } : void 0, colorSection, homeColor: selectedProfile?.color, contentSize, align, alignOverride, rotation, triggerStyle, footer: manageFooter, children: [
+  return /* @__PURE__ */ jsxs4(PickerMenu, { id, host, color, dark, label: selectedProfile?.name ?? guestLabel, chip: colorSection ? { tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon } : void 0, colorSection, homeColor: selectedProfile?.color, contentSize, align, alignOverride, rotation, triggerStyle, footer: manageFooter, children: [
     /* @__PURE__ */ jsx7(IconRow, { icon: nullIcon, label: nullLabel, selected: selectedId === null, color, fg, onPress: handleSelectGuest }),
     sortedProfiles.map((profile) => {
       const taken = isTaken(profile.id);
       const selected = selectedId === profile.id;
       const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
-      return /* @__PURE__ */ jsx7(TouchableRipple2, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [pickerMenuStyles.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs3(View4, { style: [pickerMenuStyles.rowInner, taken && pickerMenuStyles.rowDisabled], children: [
+      return /* @__PURE__ */ jsx7(TouchableRipple2, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [pickerMenuStyles.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs4(View4, { style: [pickerMenuStyles.rowInner, taken && pickerMenuStyles.rowDisabled], children: [
         /* @__PURE__ */ jsx7(ProfileChip, { profile, filled: !selected }),
         /* @__PURE__ */ jsx7(
           Text3,
@@ -521,8 +554,9 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var CHIP_SIZE2 = 40;
+var textInputRef = (ref) => ref;
 function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
@@ -533,6 +567,8 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   const { dark } = useAutoPaperTheme();
   const insets = useSafeAreaInsets();
   const { error: showErrorToast } = useToast();
+  const columnRef = useRef(null);
+  const renderSwatch = useProfileSwatchRenderer();
   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)");
@@ -598,40 +634,41 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   }, [confirmDeleteId, editingId, onDelete]);
   const sortedProfiles = useMemo3(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsxs4(View5, { style: [styles5.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsxs5(View5, { style: [styles5.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
       /* @__PURE__ */ jsx8(Text4, { variant: titleVariant, style: [styles5.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ jsx8(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles5.keyboardAvoiding, children: /* @__PURE__ */ jsx8(FadingScrollView2, { style: styles5.scrollView, contentContainerStyle: [styles5.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+    /* @__PURE__ */ jsx8(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles5.keyboardAvoiding, children: /* @__PURE__ */ jsx8(View5, { ref: columnRef, collapsable: false, style: styles5.column, children: /* @__PURE__ */ jsx8(FadingScrollView2, { style: styles5.scrollView, contentContainerStyle: [styles5.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
       if (row.kind === "new") {
         if (editingId !== "new") {
-          return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit("new"), style: styles5.row, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.rowInner, children: [
+          return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit("new"), style: styles5.row, children: /* @__PURE__ */ jsxs5(View5, { style: styles5.rowInner, children: [
             /* @__PURE__ */ jsx8(View5, { style: [styles5.rowChip, styles5.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx8(Icon4, { source: "plus", size: 20, color: fg }) }),
             /* @__PURE__ */ jsx8(Text4, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ jsx8(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "new");
+        return /* @__PURE__ */ jsx8(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign, column: columnRef, renderSwatch }, "new");
       }
       const { profile } = row;
       if (editingId === profile.id) {
-        return /* @__PURE__ */ jsx8(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__ */ jsx8(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview, useColorPickerAlign, column: columnRef, renderSwatch }, profile.id);
       }
-      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit(profile), style: styles5.row, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.rowInner, children: [
+      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit(profile), style: styles5.row, children: /* @__PURE__ */ jsxs5(View5, { style: styles5.rowInner, children: [
         /* @__PURE__ */ jsx8(ProfileChip, { profile, size: CHIP_SIZE2 }),
         /* @__PURE__ */ jsx8(Text4, { variant: "bodyLarge", style: [styles5.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
-    }) }) }),
+    }) }) }) }),
     /* @__PURE__ */ jsx8(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 }) {
+function AlignedColorPicker({ useAlign, column, ...props }) {
   const { width: windowWidth } = useWindowDimensions();
   const { width, height } = getInlineColorPickerContentSize(defaultColors2.length, windowWidth);
-  const alignOverride = useAlign(props.host.openId === props.id, width, height);
+  const alignOverride = useAlign(props.host.openId === props.id, width, height, column);
   return /* @__PURE__ */ jsx8(InlineColorPicker, { ...props, alignOverride });
 }
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign, column, renderSwatch }) {
+  const pickerSwatch = useMemo3(() => renderSwatch ? (color, size, place) => renderSwatch(color, size, place === "trigger" ? "chip" : "colorPage") : void 0, [renderSwatch]);
   const register = useFocusChain();
   const tag = register();
   const name = register();
@@ -642,14 +679,18 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   useEffect(() => {
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
-  return /* @__PURE__ */ jsxs4(View5, { style: styles5.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ jsx8(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ jsx8(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ jsx8(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles5.hiddenTagInput, pointerEvents: "none" }),
-    /* @__PURE__ */ jsx8(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: styles5.nameInput }),
+  return /* @__PURE__ */ jsxs5(View5, { style: styles5.editRow, children: [
+    useColorPickerAlign ? /* @__PURE__ */ jsx8(AlignedColorPicker, { useAlign: useColorPickerAlign, column, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark, renderSwatch: pickerSwatch }) : /* @__PURE__ */ jsx8(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark, renderSwatch: pickerSwatch, bounds: column }),
+    /* @__PURE__ */ jsx8(TextInput, { ref: textInputRef(tag.ref), ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles5.hiddenTagInput, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx8(TextInput, { ref: textInputRef(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: styles5.nameInput }),
     onDelete && /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: onDelete, style: styles5.iconButton, children: /* @__PURE__ */ jsx8(Icon4, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
 var styles5 = StyleSheet5.create({
+  // The roster's column, around the scroll view (see columnRef).
+  column: {
+    flex: 1
+  },
   content: {
     gap: 4,
     paddingHorizontal: 20
@@ -923,10 +964,29 @@ async function readSharedProfiles(groupId) {
 async function loadSharedProfiles(groupId) {
   return await readSharedProfiles(groupId) ?? [];
 }
+var hasId = (entry) => typeof entry === "object" && entry !== null && typeof entry.id === "string" && entry.id !== "";
+async function unreadableEntries(groupId, profiles) {
+  let json;
+  try {
+    json = web ? web.storage.getItem(webKey(groupId, PROFILES_KEY)) : await native?.getSharedJSON(groupId, PROFILES_KEY);
+  } catch {
+    return [];
+  }
+  if (!json) return [];
+  try {
+    const parsed = JSON.parse(json);
+    if (!Array.isArray(parsed)) return [];
+    const saved = new Set(profiles.map((profile) => profile.id));
+    return parsed.filter((entry) => !isValidProfile(entry) && hasId(entry) && !saved.has(entry.id));
+  } catch {
+    return [];
+  }
+}
 async function saveSharedProfiles(groupId, profiles) {
   if (!native) return;
   try {
-    await native.setSharedJSON(groupId, PROFILES_KEY, JSON.stringify(profiles));
+    const kept = await unreadableEntries(groupId, profiles);
+    await native.setSharedJSON(groupId, PROFILES_KEY, JSON.stringify([...profiles, ...kept]));
   } catch {
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.16.2",
+  "version": "0.18.0",
   "description": "Player profile identity for local-multiplayer React Native games: a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",
@@ -62,16 +62,17 @@
   },
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@infinitetoken/eslint-config": "0.2.0",
+    "@infinitetoken/eslint-config": "0.2.1",
     "@infinitetoken/jest-config": "^0.5.2",
     "@infinitetoken/tsconfig": "^0.6.0",
-    "@rific/auto-paper": "^0.13.3",
-    "@rific/core": "^0.4.0",
-    "@rific/feedback-press": "^0.13.0",
+    "@rific/auto-paper": "^0.13.4",
+    "@rific/core": "^0.5.0",
+    "@rific/feedback-press": "^0.13.1",
     "@rific/focus-chain": "^0.4.8",
-    "@rific/toaster": "^0.8.3",
+    "@rific/gestures": "^0.1.3",
+    "@rific/toaster": "^0.10.1",
     "@tastic/core": "^0.14.0",
-    "@tastic/hud": "^0.24.0",
+    "@tastic/hud": "^0.25.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -97,7 +98,7 @@
     "@rific/focus-chain": ">=0.4.0",
     "@rific/toaster": ">=0.4.0",
     "@tastic/core": ">=0.1.0",
-    "@tastic/hud": ">=0.23.0",
+    "@tastic/hud": ">=0.25.1",
     "expo-modules-core": ">=1.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",

package/src/OptionPicker.tsx

@@ -1,7 +1,8 @@
 import type { PopoverHost, PopoverRotation } from '@tastic/hud/chrome'
+import { Fragment } from 'react'
 import { type StyleProp, type ViewStyle } from 'react-native'
 
-import { IconRow, pickerContentSize, PickerMenu, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './PickerMenu'
+import { IconRow, MenuDivider, pickerContentSize, PickerMenu, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './PickerMenu'
 
 export interface OptionPickerOption<T extends string> {
   value: T
@@ -11,14 +12,24 @@ export interface OptionPickerOption<T extends string> {
   // one; the selected row still fills with the picker's `color`, its icon contrasting as always.
   // Without it the icon takes the row's text color.
   color?: string
+  // A divider above this row, setting it and the rows after it apart from the ones before as a
+  // different kind of choice (a person after a CPU's levels). Ignored on the first option, which the
+  // Color row's own divider, or nothing, already sits above.
+  dividerBefore?: boolean
 }
 
-// The popover's content footprint: one row per option, plus (with a `colorSection`) the Color row,
-// or the color page if that's taller - the same formula as getProfilePickerContentSize, for a host
-// that places this picker itself through `alignOverride` (a @tastic/split-screen zone's
-// useZoneClampedAlign, for one).
-export function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
-  return pickerContentSize(optionCount, colorSection)
+function hasDividerBefore(option: OptionPickerOption<string>, index: number): boolean {
+  return index > 0 && !!option.dividerBefore
+}
+
+// The popover's content footprint: one row per option and its dividers, plus (with a
+// `colorSection`) the Color row, or the color page if that's taller - the same formula as
+// getProfilePickerContentSize, for a host that places this picker itself through `alignOverride` (a
+// @tastic/split-screen zone's useZoneClampedAlign, for one). Given the options themselves it counts
+// their dividers too; given a count, rows only.
+export function getOptionPickerContentSize(options: number | readonly OptionPickerOption<string>[], colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
+  if (typeof options === 'number') return pickerContentSize(options, colorSection)
+  return pickerContentSize(options.length, colorSection, options.filter(hasDividerBefore).length)
 }
 
 interface OptionPickerProps<T extends string> {
@@ -41,6 +52,8 @@ interface OptionPickerProps<T extends string> {
   align?: 'left' | 'right' | 'center'
   alignOverride?: ProfilePickerAlignResult
   rotation?: PopoverRotation
+  // The pill's own style (a background), as ProfilePicker's; a `flexShrink` lets it give way in a
+  // narrow row, cutting its label off.
   triggerStyle?: StyleProp<ViewStyle>
 }
 
@@ -59,9 +72,12 @@ export function OptionPicker<T extends string>({ id, host, options, value, onCha
   }
 
   return (
-    <PickerMenu id={id} host={host} color={color} dark={dark} label={selected?.label ?? ''} chip={{ icon }} colorSection={colorSection} contentSize={getOptionPickerContentSize(options.length, colorSection)} align={align} alignOverride={alignOverride} rotation={rotation} triggerStyle={triggerStyle}>
-      {options.map((option) => (
-        <IconRow key={option.value} icon={option.icon ?? rowIcon} iconColor={option.color} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
+    <PickerMenu id={id} host={host} color={color} dark={dark} label={selected?.label ?? ''} chip={{ icon }} colorSection={colorSection} contentSize={getOptionPickerContentSize(options, colorSection)} align={align} alignOverride={alignOverride} rotation={rotation} triggerStyle={triggerStyle}>
+      {options.map((option, index) => (
+        <Fragment key={option.value}>
+          {hasDividerBefore(option, index) && <MenuDivider color={color} />}
+          <IconRow icon={option.icon ?? rowIcon} iconColor={option.color} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
+        </Fragment>
       ))}
     </PickerMenu>
   )

package/src/PickerMenu.tsx

@@ -1,6 +1,6 @@
 import { defaultColors, FadingScrollView, getContrastColor, type SeedColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
-import type { PopoverHost, PopoverRotation } from '@tastic/hud/chrome'
+import type { PopoverHost, PopoverRotation, ViewInstance } from '@tastic/hud/chrome'
 import { PopoverBody, useAutoAlign } from '@tastic/hud/chrome'
 import { ReactNode, RefObject, useState } from 'react'
 import { type LayoutChangeEvent, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
@@ -25,6 +25,15 @@ const ROW_INSET = 12
 // The chip trigger (see `colorSection`): a CHIP_SIZE circle inside a pill padded by CHIP_TRIGGER_PADDING.
 const CHIP_SIZE = 32
 const CHIP_TRIGGER_PADDING = 6
+const CHIP_TRIGGER_END_PADDING = CHIP_TRIGGER_PADDING + 8
+const CHIP_TRIGGER_GAP = 8
+const PLAIN_TRIGGER_GAP = 2
+const CHEVRON_SIZE = 16
+// Everything in a trigger but its label: the chip, the chevron, the gaps and the padding (84pt for the
+// chip pill, 18 for the plain trigger). A shrinking trigger (see `triggerStyle`) stops here, so its
+// chip and chevron always fit inside it.
+const CHIP_TRIGGER_FIXED_WIDTH = CHIP_TRIGGER_PADDING + CHIP_SIZE + 2 * CHIP_TRIGGER_GAP + CHEVRON_SIZE + CHIP_TRIGGER_END_PADDING
+const PLAIN_TRIGGER_FIXED_WIDTH = PLAIN_TRIGGER_GAP + CHEVRON_SIZE
 
 // The color row and page (see `colorSection`). Every height here is fixed (explicit line heights),
 // so pickerContentSize can size them exactly. Swatches are the same 28pt circles as
@@ -40,8 +49,9 @@ const COLOR_ROW_SWATCH_SIZE = 22
 const COLOR_ROW_CAPTIONED_HEIGHT = 48
 const COLOR_LABEL_LINE = 18
 const COLOR_CAPTION_LINE = 16
-// The divider under the Color row: 1pt plus 4pt above and below, the same as the Manage divider.
-const COLOR_ROW_DIVIDER = 9
+// Every divider in the menu (under the Color row, over Manage, and between an OptionPicker's groups
+// of options): 1pt plus 4pt above and below.
+const DIVIDER_HEIGHT = 9
 // The color page: a back row, then the grid with this much space above and below it.
 const GRID_TOP = 4
 const GRID_BOTTOM = 8
@@ -74,16 +84,16 @@ export interface ProfilePickerColorSection {
 
 // 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
-// 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.
+// Structurally identical to @tastic/hud's own `AlignResult` (the same shape `useAutoAlign` itself
+// returns), and a hud `AlignResult` (e.g. from `useZoneClampedAlign`) is assignable to this as-is.
+// The ref holds hud's `ViewInstance`, a View's instance under React Native's legacy types and its
+// strict ones alike (a bare `RefObject<View>` is a ref to the View function under the strict ones).
 export interface ProfilePickerAlignResult {
   align: 'left' | 'right' | 'center'
   verticalAlign: 'below' | 'above'
   maxHeight: number
   measured: boolean
-  triggerRef: RefObject<View | null>
+  triggerRef: RefObject<ViewInstance | null>
 }
 
 export interface ProfilePickerContentSize {
@@ -106,10 +116,11 @@ function colorPageHeight(swatches: SeedColor[]) {
 // pages, exactly: the list with the Color row and its divider on top, or the color page (a back row
 // and the swatches), so one placement fits whichever page is showing. 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. getProfilePickerContentSize and getOptionPickerContentSize count the
-// rows for their own picker.
-export function pickerContentSize(rowCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
-  const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0)
+// pixel-exact measurement. `dividerCount` is the dividers between the rows (an OptionPicker's
+// `dividerBefore`). getProfilePickerContentSize and getOptionPickerContentSize count the rows for
+// their own picker.
+export function pickerContentSize(rowCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>, dividerCount = 0): ProfilePickerContentSize {
+  const list = rowCount * ROW_HEIGHT + dividerCount * DIVIDER_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + DIVIDER_HEIGHT : 0)
   const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? defaultColors)) : list
   return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content }
 }
@@ -134,6 +145,8 @@ interface PickerMenuProps {
   align?: 'left' | 'right' | 'center'
   alignOverride?: ProfilePickerAlignResult
   rotation: PopoverRotation
+  // The pressable trigger's own style (a host's background behind the pill). A `flexShrink` in it lets
+  // the trigger give way in the host's row: see `shrinks` below.
   triggerStyle?: StyleProp<ViewStyle>
   // Pinned under the list page's rows, behind a divider (ProfilePicker's Manage row).
   footer?: ReactNode
@@ -172,9 +185,21 @@ export function PickerMenu({ id, host, color, dark, label, chip, colorSection, h
   // Shown on the list page only (see the footer below).
   const showFooter = !!footer && !showColorPage
 
+  // A host's `flexShrink` is how far the trigger gives way in the host's row, so it goes on the anchor,
+  // which is the host's flex item (on the pressable it would only squeeze the pill's height), down to
+  // the trigger's fixed parts. The pressable is then capped at the anchor's width, so its label is cut
+  // off with an ellipsis and the chip and chevron keep their size. With room, the anchor and the pill
+  // are their natural width, as before. The pill's edges, and so the measured trigger, the caret and
+  // the popover's alignment, follow the shrunk width. Without a flexShrink nothing here changes.
+  const flatTriggerStyle: ViewStyle = StyleSheet.flatten(triggerStyle) ?? {}
+  const { flexShrink, ...pillStyle } = flatTriggerStyle
+  const shrinks = typeof flexShrink === 'number' && flexShrink > 0
+  const anchorShrink = shrinks ? { flexShrink, minWidth: chipTrigger ? CHIP_TRIGGER_FIXED_WIDTH : PLAIN_TRIGGER_FIXED_WIDTH } : undefined
+
   return (
-    <View style={[styles.anchor, open && styles.anchorOpen]} onLayout={handleAnchorLayout}>
-      <TouchableRipple onPress={handleTriggerPress} borderless={chipTrigger} style={[styles.trigger, chipTrigger && styles.chipTrigger, triggerStyle]} accessibilityRole='button' accessibilityLabel={triggerLabel}>
+    <View style={[styles.anchor, anchorShrink, open && styles.anchorOpen]} onLayout={handleAnchorLayout}>
+      {/* The cap goes before the host's style, so a host's own maxWidth still wins. */}
+      <TouchableRipple onPress={handleTriggerPress} borderless={chipTrigger} style={[styles.trigger, chipTrigger && styles.chipTrigger, shrinks && styles.triggerShrinks, shrinks ? pillStyle : triggerStyle]} accessibilityRole='button' accessibilityLabel={triggerLabel}>
         <View ref={triggerRef} collapsable={false} style={chipTrigger ? styles.chipTriggerInner : styles.triggerInner}>
           {chip && <IdentityChip color={color} tag={chip.tag} icon={chip.icon} size={CHIP_SIZE} />}
           {/* The chip trigger's name and chevron are plain fg: the chip carries the color, and a muted
@@ -183,7 +208,7 @@ export function PickerMenu({ id, host, color, dark, label, chip, colorSection, h
           <Text style={[styles.triggerLabel, { color: chipTrigger ? fg : color }]} numberOfLines={1}>
             {triggerLabel}
           </Text>
-          <Icon source='menu-down' size={16} color={chipTrigger ? fg : color} />
+          <Icon source='menu-down' size={CHEVRON_SIZE} color={chipTrigger ? fg : color} />
         </View>
       </TouchableRipple>
 
@@ -219,7 +244,7 @@ export function PickerMenu({ id, host, color, dark, label, chip, colorSection, h
           below. Not on the color page, which only has the back row and the swatches. */}
           {showFooter && (
             <View style={styles.menuFooter}>
-              <View style={[styles.divider, { backgroundColor: color }]} />
+              <MenuDivider color={color} />
               {footer}
             </View>
           )}
@@ -292,11 +317,16 @@ function ColorRow({ section, fg, dividerColor, onPress }: { section: ProfilePick
           <Icon source='chevron-right' size={18} color={fg} />
         </View>
       </TouchableRipple>
-      <View style={[styles.divider, { backgroundColor: dividerColor }]} />
+      <MenuDivider color={dividerColor} />
     </>
   )
 }
 
+// A line across the list between kinds of rows (see `divider` below), in the seat's own color.
+export function MenuDivider({ color }: { color: string }) {
+  return <View style={[styles.divider, { backgroundColor: color }]} />
+}
+
 // The color page: a back row to the list, then the swatches. `homeColor` is the selected profile's
 // own color: its swatch carries a dot, so a player who has picked something else can find their way
 // back to it (the profile's row shows that color, but matching it to one of two similar swatches by
@@ -395,10 +425,10 @@ const styles = StyleSheet.create({
   chipTriggerInner: {
     alignItems: 'center',
     flexDirection: 'row',
-    gap: 8,
+    gap: CHIP_TRIGGER_GAP,
     height: CHIP_SIZE + 2 * CHIP_TRIGGER_PADDING,
     paddingLeft: CHIP_TRIGGER_PADDING,
-    paddingRight: CHIP_TRIGGER_PADDING + 8
+    paddingRight: CHIP_TRIGGER_END_PADDING
   },
   colorRowCaption: {
     fontSize: 12,
@@ -420,7 +450,8 @@ const styles = StyleSheet.create({
     flex: 1
   },
   // Separates the footer (a navigation action) and the Color row from the selectable rows - a
-  // different kind of action, not just another row in the same list. Tinted with the seat's own color
+  // different kind of action, not just another row in the same list - and an OptionPicker's groups
+  // of options from each other (its `dividerBefore`). 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: {
@@ -507,12 +538,21 @@ const styles = StyleSheet.create({
   triggerInner: {
     alignItems: 'center',
     flexDirection: 'row',
-    gap: 2,
+    gap: PLAIN_TRIGGER_GAP,
     height: TRIGGER_HEIGHT
   },
+  // Lets the label, alone in its row, give way to a trigger narrower than its name (see `shrinks`).
+  // With room it keeps its natural width, so this changes nothing there.
   triggerLabel: {
+    flexShrink: 1,
     fontSize: 13,
     fontWeight: '700',
-    letterSpacing: 1
+    letterSpacing: 1,
+    minWidth: 0
+  },
+  // A shrinking trigger (see `shrinks`): no wider than its anchor. Its row is then laid out at that
+  // width, which is what cuts the label off.
+  triggerShrinks: {
+    maxWidth: '100%'
   }
 })

package/src/ProfileColorContext.tsx

@@ -29,8 +29,8 @@ interface ProfileColorProviderProps {
   // where it is (ProfileSwatchPlace) and kept flat where it returns null. Hangman draws a pie of each
   // color's triad on the Color row and page only. The renderer is drawn behind the swatch's mark,
   // clipped to the circle.
-  // Rows that fill with a color (a selected picker row) stay flat, and so does hud's InlineColorPicker
-  // (ProfilesManager's color trigger and swatches), which doesn't read this context.
+  // ProfilesManager hands it to hud's InlineColorPicker too (its trigger as a 'chip', its grid as the
+  // 'colorPage'). Rows that fill with a color (a selected picker row) stay flat.
   renderSwatch?: ProfileSwatchRenderer
   children: ReactNode
 }