@tastic/profile 0.16.2 → 0.18.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;
@@ -31,8 +31,9 @@ interface OptionPickerOption<T extends string> {
     label: string;
     icon?: string;
     color?: string;
+    dividerBefore?: boolean;
 }
-declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
+declare function getOptionPickerContentSize(options: number | readonly OptionPickerOption<string>[], colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
     id: string;
     host: PopoverHost;
@@ -123,7 +124,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;
@@ -31,8 +31,9 @@ interface OptionPickerOption<T extends string> {
     label: string;
     icon?: string;
     color?: string;
+    dividerBefore?: boolean;
 }
-declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
+declare function getOptionPickerContentSize(options: number | readonly OptionPickerOption<string>[], colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
     id: string;
     host: PopoverHost;
@@ -123,7 +124,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

@@ -53,6 +53,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/OptionPicker.tsx
+var import_react3 = require("react");
+
 // src/PickerMenu.tsx
 var import_auto_paper2 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
@@ -138,6 +141,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;
@@ -145,7 +154,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;
@@ -158,8 +167,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 ?? import_auto_paper2.defaultColors)) : list;
   return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content };
 }
@@ -182,11 +191,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,
@@ -206,7 +219,7 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
             children
           ] }) }, showColorPage ? "color" : "list"),
           showFooter && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.menuFooter, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuDivider, { color }),
             footer
           ] })
         ]
@@ -235,9 +248,12 @@ function ColorRow({ section, fg, dividerColor, onPress }) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "chevron-right", size: 18, color: fg })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.divider, { backgroundColor: dividerColor }] })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuDivider, { color: dividerColor })
   ] });
 }
+function MenuDivider({ color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.divider, { backgroundColor: color }] });
+}
 function ColorPage({ section, homeColor, fg, onBack }) {
   const { value, onChange, previewValue, swatches = import_auto_paper2.defaultColors, label = "Color", takenValue, allowSwapTaken } = section;
   const renderSwatch = useProfileSwatchRenderer();
@@ -304,10 +320,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,
@@ -329,7 +345,8 @@ var styles3 = import_react_native3.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: {
@@ -416,20 +433,33 @@ 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%"
   }
 });
 
 // src/OptionPicker.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function getOptionPickerContentSize(optionCount, colorSection) {
-  return pickerContentSize(optionCount, colorSection);
+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";
@@ -438,7 +468,10 @@ function OptionPicker({ id, host, options, value, onChange, color, dark, icon, r
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsx)(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsxs)(import_react3.Fragment, { children: [
+    hasDividerBefore(option, index) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuDivider, { color }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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
@@ -451,7 +484,7 @@ function ProfileChip({ profile, size = 22, filled = true }) {
 // src/ProfilePicker.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_native4 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -463,7 +496,7 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, takenIds
   const colorPreview = useProfileColorPreview();
   const fg = dark ? "#FFFFFF" : "#000000";
   const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
-  const sortedProfiles = (0, import_react3.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const sortedProfiles = (0, import_react4.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const contentSize = getProfilePickerContentSize(profiles.length, !!onManage, colorSection);
   const isTaken = (profileId) => profileId === takenId || profileId !== selectedId && !!takenIds?.includes(profileId);
   const handleSelectGuest = () => {
@@ -531,7 +564,7 @@ var import_feedback_press3 = require("@rific/feedback-press");
 var import_focus_chain = require("@rific/focus-chain");
 var import_toaster = require("@rific/toaster");
 var import_chrome2 = require("@tastic/hud/chrome");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_native5 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
@@ -571,6 +604,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,16 +615,18 @@ 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_react5.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)");
-  const [editingId, setEditingId] = (0, import_react4.useState)(null);
-  const [draftName, setDraftName] = (0, import_react4.useState)("");
-  const [draftColor, setDraftColor] = (0, import_react4.useState)(defaultColor);
-  const [draftTag, setDraftTag] = (0, import_react4.useState)("");
-  const [tagManuallySet, setTagManuallySet] = (0, import_react4.useState)(false);
-  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react4.useState)(null);
-  const commitEdit = (0, import_react4.useCallback)(() => {
+  const [editingId, setEditingId] = (0, import_react5.useState)(null);
+  const [draftName, setDraftName] = (0, import_react5.useState)("");
+  const [draftColor, setDraftColor] = (0, import_react5.useState)(defaultColor);
+  const [draftTag, setDraftTag] = (0, import_react5.useState)("");
+  const [tagManuallySet, setTagManuallySet] = (0, import_react5.useState)(false);
+  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
+  const commitEdit = (0, import_react5.useCallback)(() => {
     const name = draftName.trim();
     if (editingId && name) {
       const tagValid = isValidTag(draftTag);
@@ -601,13 +637,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     }
     setEditingId(null);
   }, [editingId, draftName, draftColor, draftTag, onCreate, onSave, showErrorToast]);
-  const commitEditRef = (0, import_react4.useRef)(commitEdit);
-  (0, import_react4.useEffect)(() => {
+  const commitEditRef = (0, import_react5.useRef)(commitEdit);
+  (0, import_react5.useEffect)(() => {
     commitEditRef.current = commitEdit;
   });
-  (0, import_react4.useEffect)(() => () => commitEditRef.current(), []);
-  (0, import_react4.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
-  const startEdit = (0, import_react4.useCallback)(
+  (0, import_react5.useEffect)(() => () => commitEditRef.current(), []);
+  (0, import_react5.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
+  const startEdit = (0, import_react5.useCallback)(
     (target) => {
       commitEdit();
       if (target === "new") {
@@ -625,33 +661,33 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     },
     [commitEdit, defaultColor]
   );
-  const handleNameChange = (0, import_react4.useCallback)(
+  const handleNameChange = (0, import_react5.useCallback)(
     (name) => {
       setDraftName(name);
       if (!tagManuallySet) setDraftTag(deriveTag(name));
     },
     [tagManuallySet]
   );
-  const handleTagChange = (0, import_react4.useCallback)((tag) => {
+  const handleTagChange = (0, import_react5.useCallback)((tag) => {
     setDraftTag((previous) => clampTag(previous, tag));
     setTagManuallySet(true);
   }, []);
   const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
-  const handleConfirmDelete = (0, import_react4.useCallback)(() => {
+  const handleConfirmDelete = (0, import_react5.useCallback)(() => {
     if (confirmDeleteId) {
       onDelete(confirmDeleteId);
       if (editingId === confirmDeleteId) setEditingId(null);
     }
     setConfirmDeleteId(null);
   }, [confirmDeleteId, editingId, onDelete]);
-  const sortedProfiles = (0, import_react4.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const sortedProfiles = (0, import_react5.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: [styles5.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       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,45 +695,50 @@ 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_react5.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();
-  const tagFocusRef = (0, import_react4.useRef)(tag.props.focus);
-  (0, import_react4.useEffect)(() => {
+  const tagFocusRef = (0, import_react5.useRef)(tag.props.focus);
+  (0, import_react5.useEffect)(() => {
     tagFocusRef.current = tag.props.focus;
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     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
@@ -778,12 +819,12 @@ var styles5 = import_react_native5.StyleSheet.create({
 // src/ProfilesScreen.tsx
 var import_auto_paper5 = require("@rific/auto-paper");
 var import_feedback_press4 = require("@rific/feedback-press");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_native6 = require("react-native");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = (0, import_auto_paper5.useAutoPaperTheme)();
-  const managerRef = (0, import_react5.useRef)(null);
+  const managerRef = (0, import_react6.useRef)(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
   const handleBack = () => {
@@ -971,10 +1012,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 {
   }
 }
@@ -1056,15 +1116,15 @@ function createSeatColorsSlice(namespace, defaultState, mountKey = "seatColors")
 }
 
 // src/redux/useSharedProfilesSync.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_native8 = require("react-native");
 function useSharedProfilesSync({ groupId, onRemoteChange }) {
-  const pendingWriteRef = (0, import_react6.useRef)(false);
-  const onRemoteChangeRef = (0, import_react6.useRef)(onRemoteChange);
-  (0, import_react6.useEffect)(() => {
+  const pendingWriteRef = (0, import_react7.useRef)(false);
+  const onRemoteChangeRef = (0, import_react7.useRef)(onRemoteChange);
+  (0, import_react7.useEffect)(() => {
     onRemoteChangeRef.current = onRemoteChange;
   }, [onRemoteChange]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isSharedProfileStoreAvailable) return;
     let cancelled = false;
     const sub = import_react_native8.AppState.addEventListener("change", (next) => {
@@ -1082,7 +1142,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
       unsubscribe();
     };
   }, [groupId]);
-  const syncToShared = (0, import_react6.useCallback)(
+  const syncToShared = (0, import_react7.useCallback)(
     (next) => {
       if (!isSharedProfileStoreAvailable) return;
       pendingWriteRef.current = true;