@tastic/hud 0.1.3 → 0.1.4

package/README.md

@@ -28,8 +28,12 @@ corner of the screen.
   `maxHeight` for the caller to cap content and scroll when neither direction has enough room.
 - **`SectionedDropdown`** — a popover holding any mix of single-select ("pick one", radio-style) and
   multi-select ("pick some", checkbox-style, optional all/clear footer) sections, divided by rules.
-- **`InlineColorPicker`** — swatch-grid color popover, auto-sized columns, with an optional "taken"
-  color (shown disabled, or swappable).
+- **`InlineColorPicker`** — swatch-grid color popover, columns auto-clamped to 4 or 5 (the default
+  `swatches` list is exactly 20 colors, so that's the only range that fills every row completely),
+  with an optional "taken" color (shown disabled, or swappable). The trigger itself is a `size`-
+  configurable circle showing either an `icon` or a short `tag` (e.g. a saved player identity's own
+  initial or emoji) — `tag` renders at a larger ratio automatically when it's an emoji, since an
+  emoji glyph reads visually smaller than a bold letter at the same font size.
 - **`TriggerGauge`** — decorative ring of tick marks around a trigger, showing which option(s) are
   active without opening the popover.
 - **`ReadyButton`** — a per-player or standalone ready toggle.

package/dist/index.d.mts

@@ -23,10 +23,13 @@ interface Props$4 {
     dark: boolean;
     align?: 'left' | 'right' | 'center';
     icon?: string;
+    tag?: string;
+    labelFontFamily?: string;
     autoDismiss?: boolean;
     columns?: number;
+    size?: number;
 }
-declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, autoDismiss, columns }: Props$4): react.JSX.Element;
+declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$4): react.JSX.Element;
 
 declare function loadSkiaWeb(): Promise<void>;
 

package/dist/index.d.ts

@@ -23,10 +23,13 @@ interface Props$4 {
     dark: boolean;
     align?: 'left' | 'right' | 'center';
     icon?: string;
+    tag?: string;
+    labelFontFamily?: string;
     autoDismiss?: boolean;
     columns?: number;
+    size?: number;
 }
-declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, autoDismiss, columns }: Props$4): react.JSX.Element;
+declare function InlineColorPicker({ id, host, value, onChange, swatches, takenValue, allowSwapTaken, dark, align: alignOverride, icon, tag, labelFontFamily, autoDismiss, columns, size }: Props$4): react.JSX.Element;
 
 declare function loadSkiaWeb(): Promise<void>;
 

package/dist/index.js

@@ -287,18 +287,19 @@ function useAutoAlign(open, contentWidth, contentHeight) {
 
 // src/InlineColorPicker.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var SIZE = 48;
+var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
 var SWATCHES_PADDING = 8;
 var SWATCHES_GAP = 6;
 var SWATCHES_BORDER_WIDTH = 2;
-var MIN_COLUMNS = 3;
-var MAX_COLUMNS = 6;
+var MIN_COLUMNS = 4;
+var MAX_COLUMNS = 5;
 var SCREEN_MARGIN = 40;
 function widthForColumns(columns) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
 }
-function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_paper.defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", autoDismiss = true, columns }) {
+function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_paper.defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = (0, import_react_native4.useWindowDimensions)();
   const autoColumns = (0, import_core.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
@@ -309,9 +310,11 @@ function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_p
   const open = host.openId === id;
   const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight);
   const align = alignOverride ?? autoAlign;
+  const contrastColor = (0, import_auto_paper.getContrastColor)(value);
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native4.View, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles2.trigger, { backgroundColor: value }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { ref: triggerRef, collapsable: false, style: styles2.triggerMeasure, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color: (0, import_auto_paper.getContrastColor)(value) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.ScrollView, { style: [styles2.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles2.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles2.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { ref: triggerRef, collapsable: false, style: styles2.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Text, { style: [styles2.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.ScrollView, { style: [styles2.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles2.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
@@ -378,22 +381,28 @@ var styles2 = import_react_native4.StyleSheet.create({
     gap: SWATCHES_GAP,
     padding: SWATCHES_PADDING
   },
+  // borderRadius/height/width come from the `size` prop instead (see render-site override) — no
+  // fixed default here, since this style object is shared by every caller regardless of size.
   trigger: {
     alignItems: "center",
     alignSelf: "flex-start",
-    borderRadius: SIZE / 2,
-    height: SIZE,
-    justifyContent: "center",
-    width: SIZE
+    justifyContent: "center"
   },
-  // Wraps just the icon, inside the TouchableRipple, purely so useAutoAlign has a plain View to
-  // attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a measurable
-  // native node.
+  // Wraps just the icon/tag, inside the TouchableRipple, purely so useAutoAlign has a plain View
+  // to attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a
+  // measurable native node. Padded horizontally so a multi-character tag doesn't butt right up
+  // against the trigger's own circular edge (an icon alone doesn't need it, but this style is
+  // shared by both).
   triggerMeasure: {
     alignItems: "center",
     height: "100%",
     justifyContent: "center",
+    paddingHorizontal: 4,
     width: "100%"
+  },
+  tagLabel: {
+    fontWeight: "700",
+    letterSpacing: 0.5
   }
 });
 

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { defaultColors, getContrastColor } from "@rific/auto-paper";
 import { TouchableRipple } from "@rific/feedback-press";
 import { clamp } from "@tastic/core";
 import { ScrollView, StyleSheet as StyleSheet2, useWindowDimensions as useWindowDimensions2, View as View3 } from "react-native";
-import { Icon } from "react-native-paper";
+import { Icon, Text } from "react-native-paper";
 
 // src/PopoverBody.tsx
 import { StyleSheet, View } from "react-native";
@@ -115,18 +115,19 @@ function useAutoAlign(open, contentWidth, contentHeight) {
 
 // src/InlineColorPicker.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SIZE = 48;
+var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
 var SWATCHES_PADDING = 8;
 var SWATCHES_GAP = 6;
 var SWATCHES_BORDER_WIDTH = 2;
-var MIN_COLUMNS = 3;
-var MAX_COLUMNS = 6;
+var MIN_COLUMNS = 4;
+var MAX_COLUMNS = 5;
 var SCREEN_MARGIN = 40;
 function widthForColumns(columns) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
 }
-function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", autoDismiss = true, columns }) {
+function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const { width: windowWidth } = useWindowDimensions2();
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
@@ -137,9 +138,11 @@ function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors
   const open = host.openId === id;
   const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight);
   const align = alignOverride ?? autoAlign;
+  const contrastColor = getContrastColor(value);
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
   return /* @__PURE__ */ jsxs2(View3, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
-    /* @__PURE__ */ jsx2(TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles2.trigger, { backgroundColor: value }], children: /* @__PURE__ */ jsx2(View3, { ref: triggerRef, collapsable: false, style: styles2.triggerMeasure, children: /* @__PURE__ */ jsx2(Icon, { source: icon, size: 20, color: getContrastColor(value) }) }) }),
-    /* @__PURE__ */ jsx2(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: SIZE, children: /* @__PURE__ */ jsx2(ScrollView, { style: [styles2.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles2.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+    /* @__PURE__ */ jsx2(TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles2.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx2(View3, { ref: triggerRef, collapsable: false, style: styles2.triggerMeasure, children: tag ? /* @__PURE__ */ jsx2(Text, { style: [styles2.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx2(Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx2(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx2(ScrollView, { style: [styles2.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles2.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
@@ -206,22 +209,28 @@ var styles2 = StyleSheet2.create({
     gap: SWATCHES_GAP,
     padding: SWATCHES_PADDING
   },
+  // borderRadius/height/width come from the `size` prop instead (see render-site override) — no
+  // fixed default here, since this style object is shared by every caller regardless of size.
   trigger: {
     alignItems: "center",
     alignSelf: "flex-start",
-    borderRadius: SIZE / 2,
-    height: SIZE,
-    justifyContent: "center",
-    width: SIZE
+    justifyContent: "center"
   },
-  // Wraps just the icon, inside the TouchableRipple, purely so useAutoAlign has a plain View to
-  // attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a measurable
-  // native node.
+  // Wraps just the icon/tag, inside the TouchableRipple, purely so useAutoAlign has a plain View
+  // to attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a
+  // measurable native node. Padded horizontally so a multi-character tag doesn't butt right up
+  // against the trigger's own circular edge (an icon alone doesn't need it, but this style is
+  // shared by both).
   triggerMeasure: {
     alignItems: "center",
     height: "100%",
     justifyContent: "center",
+    paddingHorizontal: 4,
     width: "100%"
+  },
+  tagLabel: {
+    fontWeight: "700",
+    letterSpacing: 0.5
   }
 });
 
@@ -241,13 +250,13 @@ function PressAwayOverlay({ active, onPress, style }) {
 // src/ReadyButton.tsx
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { StyleSheet as StyleSheet4 } from "react-native";
-import { Text } from "react-native-paper";
+import { Text as Text2 } from "react-native-paper";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
   const readyButtonStyle = [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx4(Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ jsx4(TouchableRipple2, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx4(Text2, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
 var styles3 = StyleSheet4.create({
   readyButton: {
@@ -265,7 +274,7 @@ var styles3 = StyleSheet4.create({
 import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
 import { IconButton, TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
 import { ScrollView as ScrollView2, StyleSheet as StyleSheet5, View as View4 } from "react-native";
-import { Icon as Icon2, Text as Text2 } from "react-native-paper";
+import { Icon as Icon2, Text as Text3 } from "react-native-paper";
 
 // src/TriggerGaugeHost.tsx
 import { lazy, Suspense } from "react";
@@ -366,8 +375,8 @@ function SingleSection({
     return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
       option.icon && /* @__PURE__ */ jsx6(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
       /* @__PURE__ */ jsxs3(View4, { style: styles4.itemLabelColumn, children: [
-        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ jsx6(Text2, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+        /* @__PURE__ */ jsx6(Text3, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx6(Text3, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -391,10 +400,10 @@ function MultiSection({
       const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
       return /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.itemRow, children: [
         option.icon && /* @__PURE__ */ jsx6(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.itemLabelFlex, labelStyle], children: option.label })
+        /* @__PURE__ */ jsx6(Text3, { variant: "labelLarge", style: [styles4.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
-    section.allClear && /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles4.item, children: /* @__PURE__ */ jsx6(Text2, { variant: "labelLarge", style: [styles4.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+    section.allClear && /* @__PURE__ */ jsx6(TouchableRipple3, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles4.item, children: /* @__PURE__ */ jsx6(Text3, { variant: "labelLarge", style: [styles4.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
 var styles4 = StyleSheet5.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",

package/src/InlineColorPicker.tsx

@@ -2,22 +2,30 @@ import { defaultColors, getContrastColor, SeedColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
 import { clamp } from '@tastic/core'
 import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { Icon } from 'react-native-paper'
+import { Icon, Text } from 'react-native-paper'
 
+import { MONO_FONT } from './fonts'
 import { PopoverBody } from './PopoverBody'
 import { useAutoAlign } from './useAutoAlign'
 import { PopoverHost } from './usePopoverHost'
 
-const SIZE = 48
+// Presence check, not a full-string "is this exactly one emoji" validation — this only decides a
+// font-size ratio for the trigger's own `tag`, so it doesn't need that precision, just "does this
+// tag contain a pictograph at all."
+const EMOJI_PATTERN = /\p{Extended_Pictographic}/u
+
+const DEFAULT_SIZE = 48
 const SWATCH_SIZE = 28
 const SWATCHES_PADDING = 8
 const SWATCHES_GAP = 6
 const SWATCHES_BORDER_WIDTH = 2
-// However wide the actual screen is, the grid never goes narrower than 3 columns or wider than 6 —
-// below 3 it reads as a cramped single-file list, above 6 the swatches themselves get lost in a
-// wall of tiny color chips instead of reading as a deliberate palette.
-const MIN_COLUMNS = 3
-const MAX_COLUMNS = 6
+// Clamped to exactly 4 or 5, not a wider 3-6 range — `defaultColors` (this component's own default
+// `swatches`, and what every consumer actually ends up passing) is exactly 20 colors, so 4 or 5
+// columns are the only counts that fill every row completely (4x5 or 5x4) instead of leaving a
+// ragged, off-center last row. A caller passing a custom, non-20-length `swatches` list still gets
+// a reasonable grid either way — just not guaranteed to be a full rectangle.
+const MIN_COLUMNS = 4
+const MAX_COLUMNS = 5
 // How much screen width the grid leaves alone on either side when computing how many columns fit —
 // this trigger can sit anywhere (including flush against a player's own screen edge in split-screen
 // mode), so the budget is against the whole window, not this trigger's own local space.
@@ -48,20 +56,33 @@ interface Props {
   // keeps it from overflowing the screen edge (see useAutoAlign).
   align?: 'left' | 'right' | 'center'
   // Trigger glyph — defaults to a plain palette. Pass a distinct icon per slot (e.g. a face for a
-  // human, a robot for CPU) to convey identity through the icon itself.
+  // human, a robot for CPU) to convey identity through the icon itself. Overridden by `tag` below
+  // when present.
   icon?: string
+  // A short identity mark (an initial, an emoji, a couple of characters) shown as text on the
+  // trigger instead of `icon` — e.g. a saved player profile's own tag. Falls back to `icon` when
+  // empty/omitted, same as a seat with no such identity selected.
+  tag?: string
+  // Same convention as SectionedDropdown/ReadyButton's identical prop — defaults to this package's
+  // own MONO_FONT rather than inheriting whatever font the host app's theme happens to be using,
+  // so this trigger's tag reads consistently with the rest of this package's own chrome text.
+  labelFontFamily?: string
   // Whether picking a swatch closes the popover. Defaults to true — a color pick is a single,
   // complete choice the same way a single-select dropdown row is (see SectionedDropdown's identical
   // prop), so press-away isn't the only way out, but doesn't have to be either.
   autoDismiss?: boolean
   // Overrides the auto-computed column count (see MIN_COLUMNS/MAX_COLUMNS/SCREEN_MARGIN above).
   columns?: number
+  // Trigger circle's diameter — defaults to DEFAULT_SIZE. Overridable so a caller sharing a row
+  // with other fixed-size elements can line this trigger up with them instead of standing out at a
+  // mismatched size.
+  size?: number
 }
 
 // Renders inline rather than as a full-screen modal, scoped to its own panel — a modal color
 // picker would block the whole screen for one player while another can't touch their own panel at
 // the same time, which defeats the point of a split-screen lobby.
-export function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', autoDismiss = true, columns }: Props) {
+export function InlineColorPicker({ id, host, value, onChange, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = 'palette', tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }: Props) {
   const menuBg = dark ? '#000000' : '#FFFFFF'
   const { width: windowWidth } = useWindowDimensions()
   const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS)
@@ -73,19 +94,34 @@ export function InlineColorPicker({ id, host, value, onChange, swatches = defaul
   const open = host.openId === id
   const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight)
   const align = alignOverride ?? autoAlign
+  const contrastColor = getContrastColor(value)
+  // 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 an initial
+  // still looks small for an emoji tag at the identical size — this bumps emoji up to the icon's own
+  // ratio instead, since a single emoji is closer in visual weight to an icon glyph than to text.
+  const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4)
 
   return (
     <View style={[styles.anchor, open && styles.anchorOpen]}>
-      <TouchableRipple onPress={() => host.toggle(id)} borderless style={[styles.trigger, { backgroundColor: value }]}>
+      <TouchableRipple onPress={() => host.toggle(id)} borderless style={[styles.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }]}>
         <View ref={triggerRef} collapsable={false} style={styles.triggerMeasure}>
-          <Icon source={icon} size={20} color={getContrastColor(value)} />
+          {/* Sized as a fraction of the trigger's own diameter rather than a fixed pixel size, so
+          the glyph still reads as a deliberate part of the circle instead of shrinking toward its
+          center on a larger trigger. */}
+          {tag ? (
+            <Text style={[styles.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
+              {tag}
+            </Text>
+          ) : (
+            <Icon source={icon} size={size * 0.6} color={contrastColor} />
+          )}
         </View>
       </TouchableRipple>
 
       {/* Gated on `measured`, not just `open` — see useAutoAlign's own comment and
       SectionedDropdown's identical fix: without it, the popover mounts for one frame at a stale or
       guessed alignment and visibly jumps once this open's own measurement lands. */}
-      <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={value} caretBorderWidth={SWATCHES_BORDER_WIDTH} triggerSize={SIZE}>
+      <PopoverBody visible={open && measured} align={align} verticalAlign={verticalAlign} caretColor={menuBg} caretBorderColor={value} caretBorderWidth={SWATCHES_BORDER_WIDTH} triggerSize={size}>
         {/* Border matches this trigger's own current color (not a neutral gray) — two triggers can
         sit close together, so the popover needs a clear visual tie back to which one opened it,
         not just its screen position. maxHeight (see useAutoAlign) only actually clamps on a screen
@@ -164,21 +200,27 @@ const styles = StyleSheet.create({
     gap: SWATCHES_GAP,
     padding: SWATCHES_PADDING
   },
+  // borderRadius/height/width come from the `size` prop instead (see render-site override) — no
+  // fixed default here, since this style object is shared by every caller regardless of size.
   trigger: {
     alignItems: 'center',
     alignSelf: 'flex-start',
-    borderRadius: SIZE / 2,
-    height: SIZE,
-    justifyContent: 'center',
-    width: SIZE
+    justifyContent: 'center'
   },
-  // Wraps just the icon, inside the TouchableRipple, purely so useAutoAlign has a plain View to
-  // attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a measurable
-  // native node.
+  // Wraps just the icon/tag, inside the TouchableRipple, purely so useAutoAlign has a plain View
+  // to attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a
+  // measurable native node. Padded horizontally so a multi-character tag doesn't butt right up
+  // against the trigger's own circular edge (an icon alone doesn't need it, but this style is
+  // shared by both).
   triggerMeasure: {
     alignItems: 'center',
     height: '100%',
     justifyContent: 'center',
+    paddingHorizontal: 4,
     width: '100%'
+  },
+  tagLabel: {
+    fontWeight: '700',
+    letterSpacing: 0.5
   }
 })