@tastic/profile 0.16.0 → 0.16.2

package/README.md

@@ -310,16 +310,19 @@ 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>
 ```
 

package/dist/index.d.mts

@@ -30,6 +30,7 @@ interface OptionPickerOption<T extends string> {
     value: T;
     label: string;
     icon?: string;
+    color?: string;
 }
 declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
@@ -66,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;
@@ -265,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

@@ -30,6 +30,7 @@ interface OptionPickerOption<T extends string> {
     value: T;
     label: string;
     icon?: string;
+    color?: string;
 }
 declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
@@ -66,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;
@@ -265,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 })
   ] });
 }
@@ -210,10 +214,10 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
     ) })
   ] });
 }
-function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }) {
+function IconRow({ icon, iconColor, label, selected, color, fg, disabled = false, onPress }) {
   const textColor = selected ? (0, import_auto_paper2.getContrastColor)(color) : fg;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled, onPress, style: [pickerMenuStyles.row, selected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [pickerMenuStyles.rowInner, disabled && pickerMenuStyles.rowDisabled], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: styles3.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: icon, size: 13, color: textColor }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: styles3.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: icon, size: 13, color: selected ? textColor : iconColor ?? textColor }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [pickerMenuStyles.rowLabel, { color: textColor }], numberOfLines: 1, children: label })
   ] }) });
 }
@@ -221,9 +225,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 +255,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);
     }) })
@@ -431,7 +438,7 @@ 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, 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.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)) });
 }
 
 // src/ProfileChip.tsx

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 })
   ] });
 }
@@ -162,10 +166,10 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
     ) })
   ] });
 }
-function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }) {
+function IconRow({ icon, iconColor, label, selected, color, fg, disabled = false, onPress }) {
   const textColor = selected ? getContrastColor2(color) : fg;
   return /* @__PURE__ */ jsx4(TouchableRipple, { disabled, onPress, style: [pickerMenuStyles.row, selected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs2(View3, { style: [pickerMenuStyles.rowInner, disabled && pickerMenuStyles.rowDisabled], children: [
-    /* @__PURE__ */ jsx4(View3, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx4(Icon2, { source: icon, size: 13, color: textColor }) }),
+    /* @__PURE__ */ jsx4(View3, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx4(Icon2, { source: icon, size: 13, color: selected ? textColor : iconColor ?? textColor }) }),
     /* @__PURE__ */ jsx4(Text2, { style: [pickerMenuStyles.rowLabel, { color: textColor }], numberOfLines: 1, children: label })
   ] }) });
 }
@@ -173,9 +177,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 +207,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);
     }) })
@@ -383,7 +390,7 @@ function OptionPicker({ id, host, options, value, onChange, color, dark, icon, r
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
 }
 
 // src/ProfileChip.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "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",
@@ -66,12 +66,12 @@
     "@infinitetoken/jest-config": "^0.5.2",
     "@infinitetoken/tsconfig": "^0.6.0",
     "@rific/auto-paper": "^0.13.3",
-    "@rific/core": "^0.3.1",
+    "@rific/core": "^0.4.0",
     "@rific/feedback-press": "^0.13.0",
     "@rific/focus-chain": "^0.4.8",
-    "@rific/toaster": "^0.8.2",
+    "@rific/toaster": "^0.8.3",
     "@tastic/core": "^0.14.0",
-    "@tastic/hud": "^0.23.0",
+    "@tastic/hud": "^0.24.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.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

@@ -7,6 +7,10 @@ export interface OptionPickerOption<T extends string> {
   value: T
   label: string
   icon?: string
+  // The option's own color (e.g. a difficulty's), for its row's icon while the row isn't the selected
+  // one; the selected row still fills with the picker's `color`, its icon contrasting as always.
+  // Without it the icon takes the row's text color.
+  color?: string
 }
 
 // The popover's content footprint: one row per option, plus (with a `colorSection`) the Color row,
@@ -57,7 +61,7 @@ export function OptionPicker<T extends string>({ id, host, options, value, onCha
   return (
     <PickerMenu id={id} host={host} color={color} dark={dark} label={selected?.label ?? ''} chip={{ icon }} colorSection={colorSection} contentSize={getOptionPickerContentSize(options.length, colorSection)} align={align} alignOverride={alignOverride} rotation={rotation} triggerStyle={triggerStyle}>
       {options.map((option) => (
-        <IconRow key={option.value} icon={option.icon ?? rowIcon} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
+        <IconRow key={option.value} icon={option.icon ?? rowIcon} iconColor={option.color} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
       ))}
     </PickerMenu>
   )

package/src/PickerMenu.tsx

@@ -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
@@ -231,6 +231,9 @@ export function PickerMenu({ id, host, color, dark, label, chip, colorSection, h
 
 interface IconRowProps {
   icon: string
+  // The icon's color while the row isn't selected (an OptionPicker option's own `color`). Defaults to
+  // `fg`, like the label.
+  iconColor?: string
   label: string
   // Fills the row with `color` (its icon and label then contrast against it).
   selected: boolean
@@ -244,7 +247,7 @@ interface IconRowProps {
 // A selected row's own background fills entirely with its identity color - matching how a selected
 // row reads elsewhere (see @tastic/hud's SectionedDropdown) rather than a checkmark bolted onto an
 // otherwise-plain row.
-export function IconRow({ icon, label, selected, color, fg, disabled = false, onPress }: IconRowProps) {
+export function IconRow({ icon, iconColor, label, selected, color, fg, disabled = false, onPress }: IconRowProps) {
   const textColor = selected ? getContrastColor(color) : fg
   return (
     <TouchableRipple disabled={disabled} onPress={onPress} style={[pickerMenuStyles.row, selected && { backgroundColor: color }]}>
@@ -253,7 +256,7 @@ export function IconRow({ icon, label, selected, color, fg, disabled = false, on
         circle, but still the same fixed-size slot every row's icon/chip sits in (see ProfileChip's
         own doc), so this row's icon stays lined up with every other row regardless of selection. */}
         <View style={styles.iconSlot}>
-          <Icon source={icon} size={13} color={textColor} />
+          <Icon source={icon} size={13} color={selected ? textColor : (iconColor ?? textColor)} />
         </View>
         <Text style={[pickerMenuStyles.rowLabel, { color: textColor }]} numberOfLines={1}>
           {label}
@@ -269,12 +272,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}
@@ -326,15 +330,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>
               ) : (

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,9 +24,11 @@ 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.
+  // 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.
   // 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.
   renderSwatch?: ProfileSwatchRenderer

package/src/SwatchLayer.tsx

@@ -1,20 +1,26 @@
+import { type ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { type ProfileSwatchRenderer } from './ProfileColorContext'
+import { type ProfileSwatchPlace, type ProfileSwatchRenderer } from './ProfileColorContext'
 
 interface Props {
-  render: ProfileSwatchRenderer
-  // The drawn color, handed to `render` as is.
-  color: string
   // The circle's diameter: the swatch's own size, less any ring drawn inside it.
   size: number
+  // What the renderer drew (see drawSwatch).
+  children: ReactNode
+}
+
+// What a ProfileColorProvider `renderSwatch` draws for one swatch, or null for the flat fill: there's
+// no renderer, or it returned null or undefined for this place.
+export function drawSwatch(render: ProfileSwatchRenderer | undefined, color: string, size: number, place: ProfileSwatchPlace): ReactNode {
+  return render ? (render(color, size, place) ?? null) : null
 }
 
 // A ProfileColorProvider `renderSwatch` drawing in place of a swatch's flat fill: absolutely placed at
 // the swatch's top left (inside any border), behind the mark drawn after it, and clipped to the circle
 // so a square drawing still reads as the round swatch. Not exported from index.ts.
-export function SwatchLayer({ render, color, size }: Props) {
-  return <View style={[styles.layer, { borderRadius: size / 2, height: size, width: size }]}>{render(color, size)}</View>
+export function SwatchLayer({ size, children }: Props) {
+  return <View style={[styles.layer, { borderRadius: size / 2, height: size, width: size }]}>{children}</View>
 }
 
 const styles = StyleSheet.create({

package/src/index.ts

@@ -1,6 +1,6 @@
 export { getOptionPickerContentSize, OptionPicker, type OptionPickerOption } from './OptionPicker'
 export { ProfileChip } from './ProfileChip'
-export { ProfileColorProvider, type ProfileSwatchRenderer, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer } from './ProfileColorContext'
+export { ProfileColorProvider, type ProfileSwatchPlace, type ProfileSwatchRenderer, useProfileColorPreview, useProfileDisplayColor, useProfileSwatchRenderer } from './ProfileColorContext'
 export { getProfilePickerContentSize, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './ProfilePicker'
 export { type ProfileEditPatch, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
 export { ProfilesScreen, type ProfilesScreenProps } from './ProfilesScreen'