@tastic/hud 0.1.2 → 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/{TriggerGauge-XBKZ3KER.mjs → TriggerGauge-2OJOOF6I.mjs}

@@ -1,5 +1,6 @@
 // src/TriggerGauge.tsx
 import { Canvas, Path, Skia } from "@shopify/react-native-skia";
+import { clamp } from "@tastic/core";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { Easing, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
@@ -60,7 +61,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       if (mountProgress.value < 1) {
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       }
       const sweep = dashAngleDeg * local;
       if (sweep <= 0) continue;
@@ -84,7 +85,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
         if (!isLitNow) continue;
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       } else if (isLitNow === wasLit) {
         local = 1;
       } else if (isLitNow) {

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

@@ -72,7 +72,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       if (mountProgress.value < 1) {
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = (0, import_core2.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       }
       const sweep = dashAngleDeg * local;
       if (sweep <= 0) continue;
@@ -96,7 +96,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
         if (!isLitNow) continue;
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)));
+        local = (0, import_core2.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       } else if (isLitNow === wasLit) {
         local = 1;
       } else if (isLitNow) {
@@ -125,11 +125,12 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_react2, import_react_native7, import_react_native_reanimated, import_jsx_runtime5, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles4;
+var import_react_native_skia, import_core2, import_react2, import_react_native7, import_react_native_reanimated, import_jsx_runtime5, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles4;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
+    import_core2 = require("@tastic/core");
     import_react2 = require("react");
     import_react_native7 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
@@ -176,6 +177,7 @@ var MONO_FONT = import_react_native.Platform.select({ ios: "Menlo", android: "mo
 // src/InlineColorPicker.tsx
 var import_auto_paper = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
+var import_core = require("@tastic/core");
 var import_react_native4 = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
@@ -285,21 +287,22 @@ 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 = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))));
+  const autoColumns = (0, import_core.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
   const resolvedColumns = columns ?? autoColumns;
   const swatchesWidth = widthForColumns(resolvedColumns);
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
@@ -307,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;
@@ -376,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

@@ -5,8 +5,9 @@ var MONO_FONT = Platform.select({ ios: "Menlo", android: "monospace", default: "
 // src/InlineColorPicker.tsx
 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";
@@ -114,21 +115,22 @@ 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 = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))));
+  const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
   const resolvedColumns = columns ?? autoColumns;
   const swatchesWidth = widthForColumns(resolvedColumns);
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
@@ -136,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;
@@ -205,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
   }
 });
 
@@ -240,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: {
@@ -264,12 +274,12 @@ 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";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-XBKZ3KER.mjs").then((m) => ({ default: m.TriggerGauge }))));
+var LazyTriggerGauge = lazy(() => loadSkiaWeb().then(() => import("./TriggerGauge-2OJOOF6I.mjs").then((m) => ({ default: m.TriggerGauge }))));
 function TriggerGaugeHost(props) {
   return /* @__PURE__ */ jsx5(Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(LazyTriggerGauge, { ...props }) });
 }
@@ -365,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);
   }) });
@@ -390,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.2",
+  "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",
@@ -29,6 +29,7 @@
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
+      "browser": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
@@ -63,6 +64,7 @@
     "@rific/auto-paper": "^0.9.4",
     "@rific/feedback-press": "^0.10.4",
     "@shopify/react-native-skia": "^2.6.2",
+    "@tastic/core": "^0.1.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -92,6 +94,7 @@
     "@rific/auto-paper": ">=0.9.0",
     "@rific/feedback-press": ">=0.10.0",
     "@shopify/react-native-skia": ">=1.5.0",
+    "@tastic/core": ">=0.1.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",
     "react-native-paper": ">=5.0.0",

package/src/InlineColorPicker.tsx

@@ -1,22 +1,31 @@
 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.
@@ -47,23 +56,36 @@ 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 = Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP))))
+  const autoColumns = clamp(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS)
   const resolvedColumns = columns ?? autoColumns
   const swatchesWidth = widthForColumns(resolvedColumns)
   const swatchRows = Math.ceil(swatches.length / resolvedColumns)
@@ -72,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
@@ -163,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
   }
 })

package/src/TriggerGauge.tsx

@@ -1,4 +1,5 @@
 import { Canvas, Path, Skia } from '@shopify/react-native-skia'
+import { clamp } from '@tastic/core'
 import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Easing, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated'
@@ -207,7 +208,7 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
       if (mountProgress.value < 1) {
         const startFrac = (i * MOUNT_STAGGER_MS) / totalDurationMs
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)))
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1)
       }
       const sweep = dashAngleDeg * local
       if (sweep <= 0) continue
@@ -245,7 +246,7 @@ export function TriggerGauge({ segments, litIndices, size, accentColor, mutedCol
         if (!isLitNow) continue
         const startFrac = (i * MOUNT_STAGGER_MS) / totalDurationMs
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs
-        local = Math.min(1, Math.max(0, (mountProgress.value - startFrac) / (endFrac - startFrac)))
+        local = clamp((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1)
       } else if (isLitNow === wasLit) {
         local = 1 // steady — lit before and after (or the mount-only branch above already handled unlit)
       } else if (isLitNow) {