@tastic/profile 0.16.1 → 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`
 
@@ -310,23 +318,27 @@ untouched. `useProfileColorPreview()` returns the provider's function (or `undef
 
 `renderSwatch` (also optional, with or without `preview`) draws the fill of every round swatch this
 package draws, in place of the flat color: `ProfileChip`, the pickers' chip trigger, the Color row's
-swatch and the color page's swatches. It's called as `renderSwatch(color, size)` with the drawn
-color (after `preview`) and the circle's diameter, and its drawing is clipped to the circle, behind
-the tag, icon or check. The tag and check still take their contrast from `color`, so treat it as
-the primary color of whatever you draw. Hangman draws a pie of each color's triad:
+swatch and the color page's swatches. It's called as `renderSwatch(color, size, place)` with the
+drawn color (after `preview`), the circle's diameter and where the swatch is (`ProfileSwatchPlace`:
+`'chip'`, `'colorRow'` or `'colorPage'`, 0.16.2+), and its drawing is clipped to the circle, behind
+the tag, icon or check. Return `null` (or `undefined`) to keep a swatch's flat fill there. The tag and
+check still take their contrast from `color`, so treat it as the primary color of whatever you draw.
+Hangman draws a pie of each color's triad where colors are chosen, and keeps its chips flat so their
+tags stay legible:
 
 ```tsx
 import { getTriadicPalette } from '@rific/auto-paper'
 import { ProfileColorProvider, type ProfileSwatchRenderer } from '@tastic/profile'
 
-const renderSwatch: ProfileSwatchRenderer = (color, size) => <TriadPie colors={getTriadicPalette(color)} size={size} />
+const renderSwatch: ProfileSwatchRenderer = (color, size, place) => (place === 'chip' ? null : <TriadPie colors={getTriadicPalette(color)} size={size} />)
 <ProfileColorProvider renderSwatch={renderSwatch}>{children}</ProfileColorProvider>
 ```
 
 (`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;
@@ -67,7 +67,8 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
-type ProfileSwatchRenderer = (color: string, size: number) => ReactNode;
+type ProfileSwatchPlace = 'chip' | 'colorRow' | 'colorPage';
+type ProfileSwatchRenderer = (color: string, size: number, place: ProfileSwatchPlace) => ReactNode;
 interface ProfileColorProviderProps {
     preview?: (hex: string) => string;
     renderSwatch?: ProfileSwatchRenderer;
@@ -122,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;
 
@@ -266,4 +267,4 @@ declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 declare function subscribeSharedProfiles(groupId: string, listener: (profiles: Profile[]) => void): () => void;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, type ProfileSwatchRenderer, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, subscribeSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, type ProfileSwatchPlace, type ProfileSwatchRenderer, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, subscribeSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer, useSharedProfilesSync };

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;
@@ -67,7 +67,8 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
-type ProfileSwatchRenderer = (color: string, size: number) => ReactNode;
+type ProfileSwatchPlace = 'chip' | 'colorRow' | 'colorPage';
+type ProfileSwatchRenderer = (color: string, size: number, place: ProfileSwatchPlace) => ReactNode;
 interface ProfileColorProviderProps {
     preview?: (hex: string) => string;
     renderSwatch?: ProfileSwatchRenderer;
@@ -122,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;
 
@@ -266,4 +267,4 @@ declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 declare function subscribeSharedProfiles(groupId: string, listener: (profiles: Profile[]) => void): () => void;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, type ProfileSwatchRenderer, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, subscribeSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, OptionPicker, type OptionPickerOption, type Profile, ProfileChip, type ProfileColorPick, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, type ProfileSwatchPlace, type ProfileSwatchRenderer, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileColorPayload, type SetProfileExtensionPayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getOptionPickerContentSize, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profileSeatColor, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, subscribeSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer, useSharedProfilesSync };

package/dist/index.js

@@ -88,8 +88,11 @@ function useProfileDisplayColor(hex) {
 // src/SwatchLayer.tsx
 var import_react_native = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function SwatchLayer({ render, color, size }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: [styles.layer, { borderRadius: size / 2, height: size, width: size }], children: render(color, size) });
+function drawSwatch(render, color, size, place) {
+  return render ? render(color, size, place) ?? null : null;
+}
+function SwatchLayer({ size, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: [styles.layer, { borderRadius: size / 2, height: size, width: size }], children });
 }
 var styles = import_react_native.StyleSheet.create({
   layer: {
@@ -106,10 +109,11 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 function IdentityChip({ color, tag, icon, size, filled = true }) {
   const renderSwatch = useProfileSwatchRenderer();
+  const drawing = filled ? drawSwatch(renderSwatch, color, size, "chip") : null;
   const contrastColor = (0, import_auto_paper.getContrastColor)(color);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [styles2.chip, { borderRadius: size / 2, height: size, width: size }, filled && !renderSwatch && { backgroundColor: color }], children: [
-    filled && renderSwatch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SwatchLayer, { render: renderSwatch, color, size }),
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [styles2.chip, { borderRadius: size / 2, height: size, width: size }, filled && drawing === null && { backgroundColor: color }], children: [
+    drawing !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SwatchLayer, { size, children: drawing }),
     tag ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper.Text, { style: [styles2.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper.Icon, { source: icon, size: size * 0.6, color: contrastColor })
   ] });
 }
@@ -134,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;
@@ -178,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,
@@ -221,9 +235,10 @@ function ColorRow({ section, fg, dividerColor, onPress }) {
   const { value, previewValue, label = "Color", caption } = section;
   const renderSwatch = useProfileSwatchRenderer();
   const drawn = previewValue ? previewValue(value) : value;
+  const drawing = drawSwatch(renderSwatch, drawn, COLOR_ROW_SWATCH_SIZE, "colorRow");
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress, style: [pickerMenuStyles.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: pickerMenuStyles.rowInner, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.colorRowSwatch, !renderSwatch && { backgroundColor: drawn }], children: renderSwatch && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SwatchLayer, { render: renderSwatch, color: drawn, size: COLOR_ROW_SWATCH_SIZE }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.colorRowSwatch, drawing === null && { backgroundColor: drawn }], children: drawing !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SwatchLayer, { size: COLOR_ROW_SWATCH_SIZE, children: drawing }) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.colorRowText, children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles3.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
         caption ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles3.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
@@ -250,9 +265,11 @@ function ColorPage({ section, homeColor, fg, onBack }) {
       const swatchDisplay = displayFor(swatch.value);
       const contrast = (0, import_auto_paper2.getContrastColor)(swatchDisplay);
       const accessibilityLabel = swappable ? `${swatch.label}, swap` : taken ? `${swatch.label}, taken` : isHomeColor ? `${swatch.label}, profile color` : swatch.label;
+      const drawnSize = selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE;
+      const drawing = drawSwatch(renderSwatch, swatchDisplay, drawnSize, "colorPage");
       const mark = selected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "check", size: 16, color: contrast }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "swap-horizontal", size: 16, color: contrast }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "close", size: 16, color: contrast }) : isHomeColor ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.homeDot, { backgroundColor: contrast }] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, {});
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled: taken && !swappable, onPress: () => onChange(swatch.value), borderless: true, style: [styles3.swatch, !renderSwatch && { backgroundColor: swatchDisplay }, selected && styles3.swatchSelected, taken && !swappable && styles3.swatchTaken], accessibilityRole: "button", accessibilityLabel, accessibilityState: { selected, disabled: taken && !swappable }, children: renderSwatch ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.swatchFace, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SwatchLayer, { render: renderSwatch, color: swatchDisplay, size: selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE }),
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled: taken && !swappable, onPress: () => onChange(swatch.value), borderless: true, style: [styles3.swatch, drawing === null && { backgroundColor: swatchDisplay }, selected && styles3.swatchSelected, taken && !swappable && styles3.swatchTaken], accessibilityRole: "button", accessibilityLabel, accessibilityState: { selected, disabled: taken && !swappable }, children: drawing !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.swatchFace, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SwatchLayer, { size: drawnSize, children: drawing }),
         mark
       ] }) : mark }, swatch.value);
     }) })
@@ -297,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,
@@ -409,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%"
   }
 });
 
@@ -564,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() : "";
@@ -574,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)");
@@ -644,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: [
@@ -652,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();
@@ -684,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
@@ -964,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 {
   }
 }