@tastic/profile 0.16.2 → 0.17.0

package/README.md

@@ -57,7 +57,10 @@ see its own doc comment for why that component is generic over your own `Profile
   (`{ 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
+  that button. A `flexShrink` in `triggerStyle` lets the button give way in a row too narrow for
+  it: its label is cut off with an ellipsis while the chip and chevron keep their size, and it never
+  gets narrower than those. With room it lays out as before. `OptionPicker` takes the same
+  `triggerStyle`. 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
@@ -84,7 +87,10 @@ see its own doc comment for why that component is generic over your own `Profile
   in that app's own local extension table yet - e.g. it was created on a different app in the
   group). This split is deliberate, not a limitation to work around: it's this package's own
   base-fields-only `Profile` boundary (see above), just applied to storage instead of just to the
-  TypeScript type.
+  TypeScript type. A read drops any stored entry that this version's `isValidProfile` rejects (a
+  profile saved by a newer app under a rule loosened since), and `saveSharedProfiles` writes those
+  entries back after your roster as they were, so an older app can't delete a newer app's profile
+  just by saving.
 
   ```ts
   // Conceptual sketch of the pattern - see "Redux helpers for the shared roster" below for a
@@ -174,14 +180,16 @@ rect). Pass a placement **hook** as `useColorPickerAlign`:
 <ProfilesScreen useColorPickerAlign={useFrameAutoAlign} /* ...the usual props */ />
 ```
 
-It is called as `useColorPickerAlign(open, contentWidth, contentHeight)` - `open` is whether the swatch
-popover is showing, and the size is what `InlineColorPicker` itself computes (`@tastic/hud`'s
-`getInlineColorPickerContentSize` for the default swatch list at the raw window width) - and must return a
+It is called as `useColorPickerAlign(open, contentWidth, contentHeight, column)` - `open` is whether the swatch
+popover is showing, the size is what `InlineColorPicker` itself computes (`@tastic/hud`'s
+`getInlineColorPickerContentSize` for the default swatch list at the raw window width), and `column` is a ref
+to the roster's scroll view, which clips the popover at its edges: measure it to keep the popover inside a
+roster narrower than the frame (a column capped in a wide window) - and must return a
 `ProfilePickerAlignResult`, which is handed to `InlineColorPicker` as its `alignOverride` (its `triggerRef`
 is the ref that gets measured). It is a hook, not a plain function: give it a stable identity for the life of
 the mount (a module-level function), since switching it at runtime remounts the swatch. Omit it and behaviour is
-identical to before. **Needs `@tastic/hud` >= 0.12.0** to have any effect - older hud has no `alignOverride`
-on `InlineColorPicker` and ignores it.
+identical to before, and without a hook the popover is kept inside that column for you (`InlineColorPicker`'s
+`bounds`, `@tastic/hud` 0.25.0+).
 
 ### Routed screens: `ProfilesScreen`
 
@@ -327,9 +335,10 @@ const renderSwatch: ProfileSwatchRenderer = (color, size, place) => (place === '
 ```
 
 (`TriadPie` is your own component, e.g. three `react-native-svg` arcs.) Give it a stable identity
-(module level, or `useCallback`). Rows that fill with a color (a selected picker row) stay flat, and
-so do `@tastic/hud`'s `InlineColorPicker` swatches in `ProfilesManager`'s edit row, which don't read
-this provider. `useProfileSwatchRenderer()` returns it (or `undefined`).
+(module level, or `useCallback`). `ProfilesManager`'s edit row hands it to `@tastic/hud`'s
+`InlineColorPicker` too: its trigger (the profile's color with its tag on it) as a `'chip'`, its grid
+as the `'colorPage'`. Rows that fill with a color (a selected picker row) stay flat.
+`useProfileSwatchRenderer()` returns it (or `undefined`).
 
 ## Per-seat color persistence
 

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { RefObject, ReactNode, Ref } from 'react';
-import { PopoverHost, PopoverRotation } from '@tastic/hud/chrome';
-import { View, StyleProp, ViewStyle } from 'react-native';
+import { ViewInstance, PopoverHost, PopoverRotation } from '@tastic/hud/chrome';
+import { StyleProp, ViewStyle } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
 
 interface ProfilePickerColorSection {
@@ -19,7 +19,7 @@ interface ProfilePickerAlignResult {
     verticalAlign: 'below' | 'above';
     maxHeight: number;
     measured: boolean;
-    triggerRef: RefObject<View | null>;
+    triggerRef: RefObject<ViewInstance | null>;
 }
 interface ProfilePickerContentSize {
     width: number;
@@ -123,7 +123,7 @@ interface ProfilesManagerProps {
     fgMuted?: string;
     titleVariant?: MD3TextVariant$1;
     colorPreview?: (hex: string) => string;
-    useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
+    useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number, column: RefObject<ViewInstance | null>) => ProfilePickerAlignResult;
 }
 declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { RefObject, ReactNode, Ref } from 'react';
-import { PopoverHost, PopoverRotation } from '@tastic/hud/chrome';
-import { View, StyleProp, ViewStyle } from 'react-native';
+import { ViewInstance, PopoverHost, PopoverRotation } from '@tastic/hud/chrome';
+import { StyleProp, ViewStyle } from 'react-native';
 import { SeedColor } from '@rific/auto-paper';
 
 interface ProfilePickerColorSection {
@@ -19,7 +19,7 @@ interface ProfilePickerAlignResult {
     verticalAlign: 'below' | 'above';
     maxHeight: number;
     measured: boolean;
-    triggerRef: RefObject<View | null>;
+    triggerRef: RefObject<ViewInstance | null>;
 }
 interface ProfilePickerContentSize {
     width: number;
@@ -123,7 +123,7 @@ interface ProfilesManagerProps {
     fgMuted?: string;
     titleVariant?: MD3TextVariant$1;
     colorPreview?: (hex: string) => string;
-    useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
+    useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number, column: RefObject<ViewInstance | null>) => ProfilePickerAlignResult;
 }
 declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, titleVariant, colorPreview: colorPreviewProp, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 

package/dist/index.js

@@ -138,6 +138,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;
@@ -182,11 +188,15 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
   };
   const triggerLabel = label.toUpperCase();
   const showFooter = !!footer && !showColorPage;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.anchor, open && styles3.anchorOpen], onLayout: handleAnchorLayout, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles3.trigger, chipTrigger && styles3.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles3.chipTriggerInner : styles3.triggerInner, children: [
+  const flatTriggerStyle = import_react_native3.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 } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.anchor, anchorShrink, open && styles3.anchorOpen], onLayout: handleAnchorLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles3.trigger, chipTrigger && styles3.chipTrigger, shrinks && styles3.triggerShrinks, shrinks ? pillStyle : triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles3.chipTriggerInner : styles3.triggerInner, children: [
       chip && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IdentityChip, { color, tag: chip.tag, icon: chip.icon, size: CHIP_SIZE }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles3.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_runtime4.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: CHEVRON_SIZE, color: chipTrigger ? fg : color })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_chrome.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.jsxs)(
       import_react_native3.View,
@@ -304,10 +314,10 @@ var styles3 = import_react_native3.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,
@@ -416,13 +426,22 @@ var styles3 = import_react_native3.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%"
   }
 });
 
@@ -571,6 +590,7 @@ function isValidProfile(value) {
 // src/ProfilesManager.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var CHIP_SIZE2 = 40;
+var textInputRef = (ref) => ref;
 function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
@@ -581,6 +601,8 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
+  const columnRef = (0, import_react4.useRef)(null);
+  const renderSwatch = useProfileSwatchRenderer();
   const host = (0, import_chrome2.usePopoverHost)();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
@@ -651,7 +673,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
       headerLeft,
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.Text, { variant: titleVariant, style: [styles5.title, { color: fg }], children: "Profiles" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.KeyboardAvoidingView, { behavior: import_react_native5.Platform.OS === "ios" ? "padding" : void 0, style: styles5.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper4.FadingScrollView, { style: styles5.scrollView, contentContainerStyle: [styles5.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.KeyboardAvoidingView, { behavior: import_react_native5.Platform.OS === "ios" ? "padding" : void 0, style: styles5.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { ref: columnRef, collapsable: false, style: styles5.column, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper4.FadingScrollView, { 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__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => startEdit("new"), style: styles5.row, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.rowInner, children: [
@@ -659,27 +681,28 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => startEdit(profile), style: styles5.row, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.rowInner, children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProfileChip, { profile, size: CHIP_SIZE2 }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.Text, { variant: "bodyLarge", style: [styles5.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
-    }) }) }),
+    }) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_chrome2.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 } = (0, import_react_native5.useWindowDimensions)();
   const { width, height } = (0, import_chrome2.getInlineColorPickerContentSize)(import_auto_paper4.defaultColors.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__ */ (0, import_jsx_runtime8.jsx)(import_chrome2.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 = (0, import_react4.useMemo)(() => renderSwatch ? (color, size, place) => renderSwatch(color, size, place === "trigger" ? "chip" : "colorPage") : void 0, [renderSwatch]);
   const register = (0, import_focus_chain.useFocusChain)();
   const tag = register();
   const name = register();
@@ -691,13 +714,17 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.editRow, children: [
-    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_chrome2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles5.hiddenTagInput, pointerEvents: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.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 }),
+    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, column, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark, renderSwatch: pickerSwatch }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_chrome2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark, renderSwatch: pickerSwatch, bounds: column }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.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__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.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__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press3.TouchableRipple, { onPress: onDelete, style: styles5.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper4.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }
 var styles5 = import_react_native5.StyleSheet.create({
+  // The roster's column, around the scroll view (see columnRef).
+  column: {
+    flex: 1
+  },
   content: {
     gap: 4,
     paddingHorizontal: 20
@@ -971,10 +998,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/dist/index.mjs

@@ -90,6 +90,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;
@@ -134,11 +140,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,
@@ -256,10 +266,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,
@@ -368,13 +378,22 @@ 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%"
   }
 });
 
@@ -523,6 +542,7 @@ function isValidProfile(value) {
 // src/ProfilesManager.tsx
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } 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 +553,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)");
@@ -603,7 +625,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
       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: [
@@ -611,27 +633,28 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
             /* @__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: [
         /* @__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();
@@ -643,13 +666,17 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
     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 }),
+    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 +950,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.17.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

@@ -41,6 +41,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>
 }
 

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
@@ -74,16 +83,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 {
@@ -134,6 +143,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 +183,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 +206,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>
 
@@ -395,10 +418,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,
@@ -507,12 +530,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
 }

package/src/ProfilePicker.tsx

@@ -100,7 +100,8 @@ interface ProfilePickerProps<P extends Profile> {
   // exactly as before.
   colorSection?: ProfilePickerColorSection
   // Extra style for the trigger (its pressable box) - e.g. a background behind the chip trigger's
-  // pill. The chip trigger already pads itself and rounds into a pill.
+  // pill. The chip trigger already pads itself and rounds into a pill. A `flexShrink` here lets the
+  // trigger give way in a row too narrow for it, cutting its label off (see PickerMenu).
   triggerStyle?: StyleProp<ViewStyle>
 }
 

package/src/ProfilesManager.tsx

@@ -2,15 +2,15 @@ import { defaultColors, FadingScrollView, useAutoPaperTheme } from '@rific/auto-
 import { TouchableRipple } from '@rific/feedback-press'
 import { useFocusChain } from '@rific/focus-chain'
 import { useToast } from '@rific/toaster'
-import type { PopoverHost } from '@tastic/hud/chrome'
+import type { InlineColorPickerSwatchRenderer, PopoverHost, ViewInstance } from '@tastic/hud/chrome'
 import { ConfirmDialog, getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from '@tastic/hud/chrome'
-import { ComponentProps, ReactNode, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { ComponentProps, ReactNode, Ref, RefObject, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { KeyboardAvoidingView, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Icon, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ProfileChip } from './ProfileChip'
-import { useProfileColorPreview } from './ProfileColorContext'
+import { type ProfileSwatchRenderer, useProfileColorPreview, useProfileSwatchRenderer } from './ProfileColorContext'
 import { type ProfilePickerAlignResult } from './ProfilePicker'
 import { clampTag, isValidTag, MAX_PROFILE_NAME_LENGTH } from './profilesValidation'
 import { Profile } from './types'
@@ -88,12 +88,21 @@ export interface ProfilesManagerProps {
   // measured). It is a hook, not a plain function: give it a STABLE identity for the life of the mount (a
   // module-level function) - switching it at runtime remounts the swatch. Omit for the ordinary case;
   // behaviour is then identical to before. Needs @tastic/hud >= 0.12.0 to have any effect (older hud has no
-  // `alignOverride` and ignores it).
-  useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult
+  // `alignOverride` and ignores it). Its fourth argument, `column`, is the roster's scroll view: the popover
+  // opens inside it and is clipped at its edges, so where it's narrower than the frame (a column capped in a
+  // wide window) the placement should keep the popover inside it. A hook that measures it never has to be
+  // told the column's width. A hook that ignores it behaves as before.
+  useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number, column: RefObject<ViewInstance | null>) => ProfilePickerAlignResult
 }
 
 type Row = { kind: 'profile'; profile: Profile } | { kind: 'new' }
 
+// A focus-chain ref as a Paper TextInput takes it. Paper types its input's handle as
+// Pick<TextInput, 'focus' | ...>, which React Native 0.88's strict types read as `focus: unknown`
+// (TextInput is a function there, not a class), so focus-chain's ref, which wants `focus(): void`,
+// no longer fits the prop. The handle does have focus() at run time.
+const textInputRef = (ref: (el: { focus: () => void } | null) => void) => ref as (el: unknown) => void
+
 // First letter of the name, uppercased - the tag's own default for as long as it hasn't been typed
 // into directly (see the tagManuallySet state below). Empty name -> empty tag, same as typing
 // nothing into the tag field yourself would leave it.
@@ -120,6 +129,11 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
   const { dark } = useAutoPaperTheme()
   const insets = useSafeAreaInsets()
   const { error: showErrorToast } = useToast()
+  // The roster's scroll view, which clips the color popover: the color picker keeps its popover
+  // inside it (InlineColorPicker's `bounds`), and a host's useColorPickerAlign is handed it.
+  const columnRef = useRef<ViewInstance>(null)
+  // ProfileColorProvider's swatch renderer, for the color picker's trigger and swatches.
+  const renderSwatch = useProfileSwatchRenderer()
   // Only one row is ever in edit mode at a time (see commitEdit, called before any new row opens),
   // so every EditRow instance can safely share this one host instead of each needing its own.
   const host = usePopoverHost()
@@ -247,46 +261,50 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
       fade out at an edge while there is more past it, the same cue as the Settings sheet and the
       Achievements screen (Jay, 2026-10-16: every scrolling screen alike). */}
       <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.keyboardAvoiding}>
-        <FadingScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps='handled'>
-          {rows.map((row) => {
-            if (row.kind === 'new') {
-              if (editingId !== 'new') {
-                return (
-                  <TouchableRipple key='new' onPress={() => startEdit('new')} style={styles.row}>
-                    <View style={styles.rowInner}>
-                      <View style={[styles.rowChip, styles.newChip, { borderColor: fg }]}>
-                        <Icon source='plus' size={20} color={fg} />
+        {/* A plain View around the scroll view, the same size, for the column the color popover
+        is kept inside (see columnRef): the scroll view takes no ref. */}
+        <View ref={columnRef} collapsable={false} style={styles.column}>
+          <FadingScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps='handled'>
+            {rows.map((row) => {
+              if (row.kind === 'new') {
+                if (editingId !== 'new') {
+                  return (
+                    <TouchableRipple key='new' onPress={() => startEdit('new')} style={styles.row}>
+                      <View style={styles.rowInner}>
+                        <View style={[styles.rowChip, styles.newChip, { borderColor: fg }]}>
+                          <Icon source='plus' size={20} color={fg} />
+                        </View>
+                        <Text variant='bodyLarge' style={{ color: fg }}>
+                          New Profile
+                        </Text>
                       </View>
-                      <Text variant='bodyLarge' style={{ color: fg }}>
-                        New Profile
-                      </Text>
-                    </View>
-                  </TouchableRipple>
-                )
+                    </TouchableRipple>
+                  )
+                }
+                return <EditRow key='new' draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} autoFocus fgMuted={fgMuted} host={host} dark={dark} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} column={columnRef} renderSwatch={renderSwatch} />
               }
-              return <EditRow key='new' draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} autoFocus fgMuted={fgMuted} host={host} dark={dark} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} />
-            }
 
-            const { profile } = row
-            if (editingId === profile.id) {
-              return <EditRow key={profile.id} draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} onDelete={() => setConfirmDeleteId(profile.id)} fgMuted={fgMuted} host={host} dark={dark} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} />
-            }
+              const { profile } = row
+              if (editingId === profile.id) {
+                return <EditRow key={profile.id} draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} onDelete={() => setConfirmDeleteId(profile.id)} fgMuted={fgMuted} host={host} dark={dark} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} column={columnRef} renderSwatch={renderSwatch} />
+              }
 
-            // No delete affordance at rest - tap the row to start editing, which is the one place
-            // delete shows (see EditRow): a deliberate extra step before a destructive action is
-            // even reachable, not just before it's confirmed.
-            return (
-              <TouchableRipple key={profile.id} onPress={() => startEdit(profile)} style={styles.row}>
-                <View style={styles.rowInner}>
-                  <ProfileChip profile={profile} size={CHIP_SIZE} />
-                  <Text variant='bodyLarge' style={[styles.rowName, { color: fg }]} numberOfLines={1}>
-                    {profile.name}
-                  </Text>
-                </View>
-              </TouchableRipple>
-            )
-          })}
-        </FadingScrollView>
+              // No delete affordance at rest - tap the row to start editing, which is the one place
+              // delete shows (see EditRow): a deliberate extra step before a destructive action is
+              // even reachable, not just before it's confirmed.
+              return (
+                <TouchableRipple key={profile.id} onPress={() => startEdit(profile)} style={styles.row}>
+                  <View style={styles.rowInner}>
+                    <ProfileChip profile={profile} size={CHIP_SIZE} />
+                    <Text variant='bodyLarge' style={[styles.rowName, { color: fg }]} numberOfLines={1}>
+                      {profile.name}
+                    </Text>
+                  </View>
+                </TouchableRipple>
+              )
+            })}
+          </FadingScrollView>
+        </View>
       </KeyboardAvoidingView>
 
       {/* hud's ConfirmDialog, the one confirm card every app in the fleet uses, so this reads like the
@@ -314,6 +332,8 @@ interface EditRowProps {
   dark: boolean
   colorPreview?: (hex: string) => string
   useColorPickerAlign?: ProfilesManagerProps['useColorPickerAlign']
+  column: RefObject<ViewInstance | null>
+  renderSwatch?: ProfileSwatchRenderer
 }
 
 // InlineColorPicker with its placement supplied by a host hook (see ProfilesManagerProps.useColorPickerAlign).
@@ -321,10 +341,10 @@ interface EditRowProps {
 // unconditionally here, and the plain path below stays byte-identical to what it was. Sized exactly as
 // InlineColorPicker sizes itself (the default swatch list at the raw window width), so the host's placement and
 // the popover it positions agree on its footprint.
-function AlignedColorPicker({ useAlign, ...props }: ComponentProps<typeof InlineColorPicker> & { useAlign: NonNullable<ProfilesManagerProps['useColorPickerAlign']> }) {
+function AlignedColorPicker({ useAlign, column, ...props }: ComponentProps<typeof InlineColorPicker> & { useAlign: NonNullable<ProfilesManagerProps['useColorPickerAlign']>; column: EditRowProps['column'] }) {
   const { width: windowWidth } = useWindowDimensions()
   const { width, height } = getInlineColorPickerContentSize(defaultColors.length, windowWidth)
-  const alignOverride = useAlign(props.host.openId === props.id, width, height)
+  const alignOverride = useAlign(props.host.openId === props.id, width, height, column)
   return <InlineColorPicker {...props} alignOverride={alignOverride} />
 }
 
@@ -340,7 +360,11 @@ function AlignedColorPicker({ useAlign, ...props }: ComponentProps<typeof Inline
 // own - submitting the *name* field is what actually commits the row, so its registration's own
 // onSubmitEditing (a no-op - it's last in the chain) is overridden with onSubmit below, matching
 // how a normal multi-field form reads: fill fields in order, the last one finishes it.
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }: EditRowProps) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign, column, renderSwatch }: EditRowProps) {
+  // ProfileColorProvider's renderer in the color picker: its trigger is the profile's color with its
+  // tag on it, an identity like a chip, and its grid is where a color is chosen, like a picker's color
+  // page (Hangman draws its triad pies on the grid only).
+  const pickerSwatch = useMemo<InlineColorPickerSwatchRenderer | undefined>(() => (renderSwatch ? (color, size, place) => renderSwatch(color, size, place === 'trigger' ? 'chip' : 'colorPage') : undefined), [renderSwatch])
   const register = useFocusChain()
   const tag = register()
   const name = register()
@@ -367,7 +391,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
 
   return (
     <View style={styles.editRow}>
-      {useColorPickerAlign ? <AlignedColorPicker useAlign={useColorPickerAlign} id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} /> : <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} />}
+      {useColorPickerAlign ? <AlignedColorPicker useAlign={useColorPickerAlign} column={column} id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} renderSwatch={pickerSwatch} /> : <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} renderSwatch={pickerSwatch} bounds={column} />}
       {/* Invisible on purpose (styles.hiddenTagInput: zero footprint, position: 'absolute' so it
       doesn't reserve space in the row's own flex layout) - the swatch above is the only place this
       value is ever meant to be seen. pointerEvents='none' is what actually keeps it out of the
@@ -379,12 +403,10 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
       find it as "Tag" the same way they find the Name field by its placeholder. selectTextOnFocus
       so re-tapping the swatch to revise an already-set tag replaces it wholesale rather than
       inserting mid-string. */}
-      {/* eslint-disable-next-line react-hooks/refs -- tag.ref/tag.props come from useFocusChain's
-      register(), called during render by design (see the hook's own doc); the actual DOM/native
-      focus() call it wraps only ever fires later, from an event handler, never synchronously here */}
-      <TextInput ref={tag.ref} {...tag.props} value={draftTag} onChangeText={onTagChange} accessibilityLabel='Tag' autoCapitalize='characters' selectTextOnFocus returnKeyType='next' style={styles.hiddenTagInput} pointerEvents='none' />
-      {/* eslint-disable-next-line react-hooks/refs -- see the tag field's identical note above */}
-      <TextInput ref={name.ref} {...name.props} onSubmitEditing={onSubmit} mode='outlined' dense value={draftName} onChangeText={onNameChange} maxLength={MAX_PROFILE_NAME_LENGTH} placeholder='Name' autoFocus={autoFocus} returnKeyType='done' style={styles.nameInput} />
+      {}
+      <TextInput ref={textInputRef(tag.ref)} {...tag.props} value={draftTag} onChangeText={onTagChange} accessibilityLabel='Tag' autoCapitalize='characters' selectTextOnFocus returnKeyType='next' style={styles.hiddenTagInput} pointerEvents='none' />
+      {}
+      <TextInput ref={textInputRef(name.ref)} {...name.props} onSubmitEditing={onSubmit} mode='outlined' dense value={draftName} onChangeText={onNameChange} maxLength={MAX_PROFILE_NAME_LENGTH} placeholder='Name' autoFocus={autoFocus} returnKeyType='done' style={styles.nameInput} />
       {onDelete && (
         <TouchableRipple onPress={onDelete} style={styles.iconButton}>
           <Icon source='trash-can-outline' size={18} color={fgMuted} />
@@ -395,6 +417,10 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
 }
 
 const styles = StyleSheet.create({
+  // The roster's column, around the scroll view (see columnRef).
+  column: {
+    flex: 1
+  },
   content: {
     gap: 4,
     paddingHorizontal: 20

package/src/sharedProfileStore.ts

@@ -122,15 +122,45 @@ export async function loadSharedProfiles(groupId: string): Promise<Profile[]> {
   return (await readSharedProfiles(groupId)) ?? []
 }
 
+const hasId = (entry: unknown): entry is { id: string } => typeof entry === 'object' && entry !== null && typeof (entry as { id?: unknown }).id === 'string' && (entry as { id: string }).id !== ''
+
+// The stored roster's entries this version can't read (they fail isValidProfile: a newer app's
+// profile under a rule loosened since, say) and that aren't in `profiles`, so saveSharedProfiles can
+// write them back as they are. This app never had them in its roster, so a save that left them out
+// would delete them for every app in the group. Only entries with an id are kept (anything else is
+// unusable to every app). [] when the stored roster can't be read at all. The web store is read
+// directly, past its failed-write latch: that latch is there so a stale roster can't replace a
+// local one, and nothing read here replaces anything.
+async function unreadableEntries(groupId: string, profiles: Profile[]): Promise<unknown[]> {
+  let json: string | null | undefined
+  try {
+    json = web ? web.storage.getItem(webKey(groupId, PROFILES_KEY)) : await native?.getSharedJSON(groupId, PROFILES_KEY)
+  } catch {
+    return []
+  }
+  if (!json) return []
+  try {
+    const parsed: unknown = 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 []
+  }
+}
+
 // Overwrites the entire shared roster - same whole-blob-write discipline a host app's own
-// AsyncStorage-backed profile store already uses, not an incremental per-profile update. A write
-// failure (store unavailable, or some other native error) is swallowed rather than thrown: the
-// caller's own local state is already the source of truth for what just changed, and this is a
-// best-effort mirror of it, not the other way around.
+// AsyncStorage-backed profile store already uses, not an incremental per-profile update - except
+// for the stored entries this version can't read, which it keeps (see unreadableEntries), after
+// `profiles`. A write failure (store unavailable, or some other native error) is swallowed rather
+// than thrown: the caller's own local state is already the source of truth for what just changed,
+// and this is a best-effort mirror of it, not the other way around. A failed read before it writes
+// `profiles` alone, as every save did before entries were kept.
 export async function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void> {
   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 {
     // Best-effort - see doc comment above.
   }