@tastic/profile 0.16.1 → 0.17.0

package/dist/index.mjs

@@ -40,8 +40,11 @@ function useProfileDisplayColor(hex) {
 // src/SwatchLayer.tsx
 import { StyleSheet, View } from "react-native";
 import { jsx as jsx2 } from "react/jsx-runtime";
-function SwatchLayer({ render, color, size }) {
-  return /* @__PURE__ */ jsx2(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__ */ jsx2(View, { style: [styles.layer, { borderRadius: size / 2, height: size, width: size }], children });
 }
 var styles = StyleSheet.create({
   layer: {
@@ -58,10 +61,11 @@ import { jsx as jsx3, jsxs } from "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 = getContrastColor(color);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4);
-  return /* @__PURE__ */ jsxs(View2, { style: [styles2.chip, { borderRadius: size / 2, height: size, width: size }, filled && !renderSwatch && { backgroundColor: color }], children: [
-    filled && renderSwatch && /* @__PURE__ */ jsx3(SwatchLayer, { render: renderSwatch, color, size }),
+  return /* @__PURE__ */ jsxs(View2, { style: [styles2.chip, { borderRadius: size / 2, height: size, width: size }, filled && drawing === null && { backgroundColor: color }], children: [
+    drawing !== null && /* @__PURE__ */ jsx3(SwatchLayer, { size, children: drawing }),
     tag ? /* @__PURE__ */ jsx3(Text, { style: [styles2.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx3(Icon, { source: icon, size: size * 0.6, color: contrastColor })
   ] });
 }
@@ -86,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;
@@ -130,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,
@@ -173,9 +187,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__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx4(TouchableRipple, { onPress, style: [pickerMenuStyles.row, { height: colorRowHeight(caption) }], accessibilityRole: "button", accessibilityLabel: caption ? `${label}, ${caption}` : label, children: /* @__PURE__ */ jsxs2(View3, { style: pickerMenuStyles.rowInner, children: [
-      /* @__PURE__ */ jsx4(View3, { style: [styles3.colorRowSwatch, !renderSwatch && { backgroundColor: drawn }], children: renderSwatch && /* @__PURE__ */ jsx4(SwatchLayer, { render: renderSwatch, color: drawn, size: COLOR_ROW_SWATCH_SIZE }) }),
+      /* @__PURE__ */ jsx4(View3, { style: [styles3.colorRowSwatch, drawing === null && { backgroundColor: drawn }], children: drawing !== null && /* @__PURE__ */ jsx4(SwatchLayer, { size: COLOR_ROW_SWATCH_SIZE, children: drawing }) }),
       /* @__PURE__ */ jsxs2(View3, { style: styles3.colorRowText, children: [
         /* @__PURE__ */ jsx4(Text2, { style: [styles3.colorRowLabel, { color: fg }], numberOfLines: 1, children: label }),
         caption ? /* @__PURE__ */ jsx4(Text2, { style: [styles3.colorRowCaption, { color: fg }], numberOfLines: 1, children: caption }) : null
@@ -202,9 +217,11 @@ function ColorPage({ section, homeColor, fg, onBack }) {
       const swatchDisplay = displayFor(swatch.value);
       const contrast = getContrastColor2(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__ */ jsx4(Icon2, { source: "check", size: 16, color: contrast }) : swappable ? /* @__PURE__ */ jsx4(Icon2, { source: "swap-horizontal", size: 16, color: contrast }) : taken ? /* @__PURE__ */ jsx4(Icon2, { source: "close", size: 16, color: contrast }) : isHomeColor ? /* @__PURE__ */ jsx4(View3, { style: [styles3.homeDot, { backgroundColor: contrast }] }) : /* @__PURE__ */ jsx4(View3, {});
-      return /* @__PURE__ */ jsx4(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__ */ jsxs2(View3, { style: styles3.swatchFace, children: [
-        /* @__PURE__ */ jsx4(SwatchLayer, { render: renderSwatch, color: swatchDisplay, size: selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE }),
+      return /* @__PURE__ */ jsx4(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__ */ jsxs2(View3, { style: styles3.swatchFace, children: [
+        /* @__PURE__ */ jsx4(SwatchLayer, { size: drawnSize, children: drawing }),
         mark
       ] }) : mark }, swatch.value);
     }) })
@@ -249,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,
@@ -361,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%"
   }
 });
 
@@ -516,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() : "";
@@ -526,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)");
@@ -596,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: [
@@ -604,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();
@@ -636,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
@@ -916,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.1",
+  "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/IdentityChip.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
 import { useProfileSwatchRenderer } from './ProfileColorContext'
-import { SwatchLayer } from './SwatchLayer'
+import { drawSwatch, SwatchLayer } from './SwatchLayer'
 
 // Presence check, not isValidTag's own full-string emoji validation (profilesValidation.ts) - this
 // only decides a font-size ratio, so it doesn't need that check's ZWJ/variation-selector precision,
@@ -28,6 +28,7 @@ interface Props {
 // place of the flat color (a filled chip only); the tag's contrast still comes from `color`.
 export function IdentityChip({ color, tag, icon, size, filled = true }: Props) {
   const renderSwatch = useProfileSwatchRenderer()
+  const drawing = filled ? drawSwatch(renderSwatch, color, size, 'chip') : null
   const contrastColor = getContrastColor(color)
   // An emoji glyph reads visually smaller than a bold letter at the same fontSize (the system emoji
   // font leaves more of its own em-box empty), so a plain-text ratio that looks right for "J" still
@@ -39,8 +40,8 @@ export function IdentityChip({ color, tag, icon, size, filled = true }: Props) {
   // them off there ("D..."); 0.32 fits them, with adjustsFontSizeToFit still the backstop on native.
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : tag && Array.from(tag).length >= 3 ? 0.32 : 0.4)
   return (
-    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && !renderSwatch && { backgroundColor: color }]}>
-      {filled && renderSwatch && <SwatchLayer render={renderSwatch} color={color} size={size} />}
+    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && drawing === null && { backgroundColor: color }]}>
+      {drawing !== null && <SwatchLayer size={size}>{drawing}</SwatchLayer>}
       {tag ? (
         <Text style={[styles.tag, { color: contrastColor, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
           {tag}

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'
@@ -8,7 +8,7 @@ import { Icon, Text } from 'react-native-paper'
 
 import { IdentityChip } from './IdentityChip'
 import { useProfileSwatchRenderer } from './ProfileColorContext'
-import { SwatchLayer } from './SwatchLayer'
+import { drawSwatch, SwatchLayer } from './SwatchLayer'
 
 // The trigger and popover ProfilePicker and OptionPicker share: a name trigger (or the chip pill),
 // a bordered menu of rows, and with a `colorSection` a Color row that swaps the menu for a page of
@@ -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>
 
@@ -272,12 +295,13 @@ function ColorRow({ section, fg, dividerColor, onPress }: { section: ProfilePick
   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 (
     <>
       <TouchableRipple onPress={onPress} style={[pickerMenuStyles.row, { height: colorRowHeight(caption) }]} accessibilityRole='button' accessibilityLabel={caption ? `${label}, ${caption}` : label}>
         <View style={pickerMenuStyles.rowInner}>
           {/* A ProfileColorProvider renderSwatch draws it in place of the flat fill. */}
-          <View style={[styles.colorRowSwatch, !renderSwatch && { backgroundColor: drawn }]}>{renderSwatch && <SwatchLayer render={renderSwatch} color={drawn} size={COLOR_ROW_SWATCH_SIZE} />}</View>
+          <View style={[styles.colorRowSwatch, drawing === null && { backgroundColor: drawn }]}>{drawing !== null && <SwatchLayer size={COLOR_ROW_SWATCH_SIZE}>{drawing}</SwatchLayer>}</View>
           <View style={styles.colorRowText}>
             <Text style={[styles.colorRowLabel, { color: fg }]} numberOfLines={1}>
               {label}
@@ -329,15 +353,17 @@ function ColorPage({ section, homeColor, fg, onBack }: { section: ProfilePickerC
           const swatchDisplay = displayFor(swatch.value)
           const contrast = 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 ? <Icon source='check' size={16} color={contrast} /> : swappable ? <Icon source='swap-horizontal' size={16} color={contrast} /> : taken ? <Icon source='close' size={16} color={contrast} /> : isHomeColor ? <View style={[styles.homeDot, { backgroundColor: contrast }]} /> : <View />
           // The same swatch as @tastic/hud's InlineColorPicker: a filled circle, the selected one
           // ringed and checked, a taken one faded with an X. TouchableRipple takes one child, so a
           // drawn swatch and its mark share a face that fills the circle inside the ring.
           return (
-            <TouchableRipple key={swatch.value} disabled={taken && !swappable} onPress={() => onChange(swatch.value)} borderless style={[styles.swatch, !renderSwatch && { backgroundColor: swatchDisplay }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]} accessibilityRole='button' accessibilityLabel={accessibilityLabel} accessibilityState={{ selected, disabled: taken && !swappable }}>
-              {renderSwatch ? (
+            <TouchableRipple key={swatch.value} disabled={taken && !swappable} onPress={() => onChange(swatch.value)} borderless style={[styles.swatch, drawing === null && { backgroundColor: swatchDisplay }, selected && styles.swatchSelected, taken && !swappable && styles.swatchTaken]} accessibilityRole='button' accessibilityLabel={accessibilityLabel} accessibilityState={{ selected, disabled: taken && !swappable }}>
+              {drawing !== null ? (
                 <View style={styles.swatchFace}>
-                  <SwatchLayer render={renderSwatch} color={swatchDisplay} size={selected ? SWATCH_SIZE - 2 * SWATCH_RING_WIDTH : SWATCH_SIZE} />
+                  <SwatchLayer size={drawnSize}>{drawing}</SwatchLayer>
                   {mark}
                 </View>
               ) : (
@@ -392,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,
@@ -504,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

@@ -1,9 +1,16 @@
 import { createContext, type ReactNode, useContext, useMemo } from 'react'
 
-// Draws one color's swatch fill: a circle `size` across, standing in for the flat fill. `color` is the
-// drawn color (after `preview`), and it stays the primary one: the tag, icon, check or dot on top of
-// the swatch takes its contrast from it.
-export type ProfileSwatchRenderer = (color: string, size: number) => ReactNode
+// Where a swatch is drawn: an IdentityChip (ProfileChip, the pickers' chip trigger), a picker's Color
+// row, or a swatch on its color page. An app can tell an identity (a chip, which wants a legible mark
+// on one color) from a choice of color (the Color row and page, where previewing more of what the
+// color gives is the point): Hangman draws its triad pie only on the latter.
+export type ProfileSwatchPlace = 'chip' | 'colorRow' | 'colorPage'
+
+// Draws one color's swatch fill: a circle `size` across, standing in for the flat fill, at `place`.
+// `color` is the drawn color (after `preview`), and it stays the primary one: the tag, icon, check or
+// dot on top of the swatch takes its contrast from it. Returning null or undefined keeps that swatch's
+// flat fill.
+export type ProfileSwatchRenderer = (color: string, size: number, place: ProfileSwatchPlace) => ReactNode
 
 interface ProfileColorContextValue {
   preview?: (hex: string) => string
@@ -17,11 +24,13 @@ interface ProfileColorProviderProps {
   // toward its card-back palette so they read muted, not as the raw swatch; a context rather than a
   // module-level setting because that blend depends on light/dark mode.
   preview?: (hex: string) => string
-  // Replaces the flat fill of every round swatch this package draws: IdentityChip (ProfileChip and the
-  // pickers' chip trigger), the pickers' Color row swatch and their color page swatches. Hangman draws
-  // a pie of each color's triad. 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.
+  // Replaces the flat fill of the round swatches this package draws: IdentityChip (ProfileChip and the
+  // pickers' chip trigger), the pickers' Color row swatch and their color page swatches, each told
+  // 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.
+  // 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>
 }