@tastic/profile 0.3.5 → 0.3.7

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { PopoverHost } from '@tastic/hud';
 
 interface Profile {
@@ -40,6 +40,9 @@ interface ProfileEditPatch {
     color: string;
     tag: string;
 }
+interface ProfilesManagerHandle {
+    commitPendingEdit: () => void;
+}
 interface ProfilesManagerProps {
     profiles: Profile[];
     defaultColor: string;
@@ -47,8 +50,9 @@ interface ProfilesManagerProps {
     onSave: (id: string, patch: ProfileEditPatch) => void;
     onDelete: (id: string) => void;
     headerLeft?: ReactNode;
+    ref?: Ref<ProfilesManagerHandle>;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;
@@ -59,4 +63,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };
+export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { PopoverHost } from '@tastic/hud';
 
 interface Profile {
@@ -40,6 +40,9 @@ interface ProfileEditPatch {
     color: string;
     tag: string;
 }
+interface ProfilesManagerHandle {
+    commitPendingEdit: () => void;
+}
 interface ProfilesManagerProps {
     profiles: Profile[];
     defaultColor: string;
@@ -47,8 +50,9 @@ interface ProfilesManagerProps {
     onSave: (id: string, patch: ProfileEditPatch) => void;
     onDelete: (id: string) => void;
     headerLeft?: ReactNode;
+    ref?: Ref<ProfilesManagerHandle>;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;
@@ -59,4 +63,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };
+export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };

package/dist/index.js

@@ -257,11 +257,22 @@ function isValidHexColor(value) {
 var VARIATION_SELECTOR = String.fromCodePoint(65039);
 var ZERO_WIDTH_JOINER = String.fromCodePoint(8205);
 var EMOJI_PATTERN2 = new RegExp(`^\\p{Extended_Pictographic}${VARIATION_SELECTOR}?(${ZERO_WIDTH_JOINER}\\p{Extended_Pictographic}${VARIATION_SELECTOR}?)*$`, "u");
+var EMOJI_PRESENT = /\p{Extended_Pictographic}/u;
 function isValidTag(value) {
   if (typeof value !== "string") return false;
   if (value.length === 0) return true;
   if (EMOJI_PATTERN2.test(value)) return true;
-  return !/\p{Extended_Pictographic}/u.test(value) && Array.from(value).length <= MAX_TAG_LENGTH;
+  return !EMOJI_PRESENT.test(value) && Array.from(value).length <= MAX_TAG_LENGTH;
+}
+function clampTag(previous, next) {
+  const previousCodepoints = Array.from(previous);
+  const nextCodepoints = Array.from(next);
+  if (nextCodepoints.length <= previousCodepoints.length) return next;
+  let sharedPrefixLength = 0;
+  while (sharedPrefixLength < previousCodepoints.length && previousCodepoints[sharedPrefixLength] === nextCodepoints[sharedPrefixLength]) sharedPrefixLength++;
+  const added = nextCodepoints.slice(sharedPrefixLength).join("");
+  if (EMOJI_PRESENT.test(added) || EMOJI_PRESENT.test(previous)) return added;
+  return nextCodepoints.length > MAX_TAG_LENGTH ? previous : next;
 }
 function isValidProfile(value) {
   if (!value || typeof value !== "object") return false;
@@ -276,7 +287,7 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }) {
   const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
@@ -309,6 +320,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     commitEditRef.current = commitEdit;
   });
   (0, import_react2.useEffect)(() => () => commitEditRef.current(), []);
+  (0, import_react2.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
   const startEdit = (0, import_react2.useCallback)(
     (target) => {
       commitEdit();
@@ -335,7 +347,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     [tagManuallySet]
   );
   const handleTagChange = (0, import_react2.useCallback)((tag) => {
-    setDraftTag(tag);
+    setDraftTag((previous) => clampTag(previous, tag));
     setTagManuallySet(true);
   }, []);
   const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
@@ -348,7 +360,6 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   }, [confirmDeleteId, editingId, onDelete]);
   const sortedProfiles = (0, import_react2.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
-  const tagInvalid = draftTag.length > 0 && !isValidTag(draftTag);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
@@ -362,11 +373,11 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, tagInvalid, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark }, "new");
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark }, "new");
       }
       const { profile } = row;
       if (editingId === profile.id) {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, tagInvalid, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark }, profile.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark }, profile.id);
       }
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProfileChip, { profile, size: CHIP_SIZE }),
@@ -386,7 +397,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     ] }) }) })
   ] });
 }
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
   const register = (0, import_focus_chain.useFocusChain)();
   const tag = register();
   const name = register();
@@ -399,7 +410,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   }, [host.openId]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, tag: draftTag, dark }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
@@ -482,31 +493,14 @@ var styles3 = import_react_native3.StyleSheet.create({
   scrollView: {
     flex: 1
   },
-  // Wide enough for MAX_TAG_LENGTH monospace characters (or one emoji) plus its own padding/border
-  // — matched to CHIP_SIZE (the same footprint every other circle on this screen uses), not a
-  // fraction of the row's width, since the name field next to it is what should actually get the
-  // row's remaining space.
-  tagInput: {
-    height: CHIP_SIZE,
-    width: CHIP_SIZE
-  },
-  tagInputContent: {
-    // react-native-paper's outlined TextInput sets its own native input's minWidth from the
-    // placeholder/label's measured layout width (sized for a real label, not this field's own
-    // 3-character placeholder) — left alone, that floor is wider than CHIP_SIZE, so the actual
-    // editable box silently overflows past this field's own visible outline and centers within
-    // that wider, partly invisible box instead. Zeroing it here lets the input size to CHIP_SIZE
-    // instead, which is what actually makes `textAlign: 'center'` below center against the
-    // visible box rather than an overflowing invisible one.
-    minWidth: 0,
-    // Same reasoning as minWidth above, for the horizontal direction: the outlined input's own
-    // default padding (16px a side) is sized for a normal-width field, and at CHIP_SIZE's 40px
-    // that leaves only 8px total for actual text — not enough to fit the "Tag" placeholder itself
-    // (3 characters), which is what was clipping it to just "T" once minWidth stopped letting the
-    // box silently overflow wider to compensate.
-    paddingHorizontal: 2,
-    textAlign: "center",
-    textAlignVertical: "center"
+  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
+  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
+  hiddenTagInput: {
+    height: 1,
+    opacity: 0,
+    position: "absolute",
+    width: 1
   },
   title: {
     flexShrink: 1,

package/dist/index.mjs

@@ -215,7 +215,7 @@ import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
 import { InlineColorPicker, usePopoverHost } from "@tastic/hud";
-import { useCallback, useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
 import { KeyboardAvoidingView, Platform, ScrollView as ScrollView2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Button, Icon as Icon3, Portal, Text as Text3, TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -229,11 +229,22 @@ function isValidHexColor(value) {
 var VARIATION_SELECTOR = String.fromCodePoint(65039);
 var ZERO_WIDTH_JOINER = String.fromCodePoint(8205);
 var EMOJI_PATTERN2 = new RegExp(`^\\p{Extended_Pictographic}${VARIATION_SELECTOR}?(${ZERO_WIDTH_JOINER}\\p{Extended_Pictographic}${VARIATION_SELECTOR}?)*$`, "u");
+var EMOJI_PRESENT = /\p{Extended_Pictographic}/u;
 function isValidTag(value) {
   if (typeof value !== "string") return false;
   if (value.length === 0) return true;
   if (EMOJI_PATTERN2.test(value)) return true;
-  return !/\p{Extended_Pictographic}/u.test(value) && Array.from(value).length <= MAX_TAG_LENGTH;
+  return !EMOJI_PRESENT.test(value) && Array.from(value).length <= MAX_TAG_LENGTH;
+}
+function clampTag(previous, next) {
+  const previousCodepoints = Array.from(previous);
+  const nextCodepoints = Array.from(next);
+  if (nextCodepoints.length <= previousCodepoints.length) return next;
+  let sharedPrefixLength = 0;
+  while (sharedPrefixLength < previousCodepoints.length && previousCodepoints[sharedPrefixLength] === nextCodepoints[sharedPrefixLength]) sharedPrefixLength++;
+  const added = nextCodepoints.slice(sharedPrefixLength).join("");
+  if (EMOJI_PRESENT.test(added) || EMOJI_PRESENT.test(previous)) return added;
+  return nextCodepoints.length > MAX_TAG_LENGTH ? previous : next;
 }
 function isValidProfile(value) {
   if (!value || typeof value !== "object") return false;
@@ -248,7 +259,7 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }) {
   const { dark, colors } = useAutoPaperTheme();
   const insets = useSafeAreaInsets();
   const { error: showErrorToast } = useToast();
@@ -281,6 +292,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     commitEditRef.current = commitEdit;
   });
   useEffect(() => () => commitEditRef.current(), []);
+  useImperativeHandle(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
   const startEdit = useCallback(
     (target) => {
       commitEdit();
@@ -307,7 +319,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     [tagManuallySet]
   );
   const handleTagChange = useCallback((tag) => {
-    setDraftTag(tag);
+    setDraftTag((previous) => clampTag(previous, tag));
     setTagManuallySet(true);
   }, []);
   const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
@@ -320,7 +332,6 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   }, [confirmDeleteId, editingId, onDelete]);
   const sortedProfiles = useMemo2(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
-  const tagInvalid = draftTag.length > 0 && !isValidTag(draftTag);
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2(View3, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
@@ -334,11 +345,11 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
             /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, tagInvalid, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark }, "new");
+        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark }, "new");
       }
       const { profile } = row;
       if (editingId === profile.id) {
-        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, tagInvalid, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark }, profile.id);
+        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark }, profile.id);
       }
       return /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
         /* @__PURE__ */ jsx3(ProfileChip, { profile, size: CHIP_SIZE }),
@@ -358,7 +369,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     ] }) }) })
   ] });
 }
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
   const register = useFocusChain();
   const tag = register();
   const name = register();
@@ -371,7 +382,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   }, [host.openId]);
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
     /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, tag: draftTag, dark }),
-    /* @__PURE__ */ jsx3(TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
+    /* @__PURE__ */ jsx3(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
     /* @__PURE__ */ jsx3(TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx3(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
@@ -454,31 +465,14 @@ var styles3 = StyleSheet3.create({
   scrollView: {
     flex: 1
   },
-  // Wide enough for MAX_TAG_LENGTH monospace characters (or one emoji) plus its own padding/border
-  // — matched to CHIP_SIZE (the same footprint every other circle on this screen uses), not a
-  // fraction of the row's width, since the name field next to it is what should actually get the
-  // row's remaining space.
-  tagInput: {
-    height: CHIP_SIZE,
-    width: CHIP_SIZE
-  },
-  tagInputContent: {
-    // react-native-paper's outlined TextInput sets its own native input's minWidth from the
-    // placeholder/label's measured layout width (sized for a real label, not this field's own
-    // 3-character placeholder) — left alone, that floor is wider than CHIP_SIZE, so the actual
-    // editable box silently overflows past this field's own visible outline and centers within
-    // that wider, partly invisible box instead. Zeroing it here lets the input size to CHIP_SIZE
-    // instead, which is what actually makes `textAlign: 'center'` below center against the
-    // visible box rather than an overflowing invisible one.
-    minWidth: 0,
-    // Same reasoning as minWidth above, for the horizontal direction: the outlined input's own
-    // default padding (16px a side) is sized for a normal-width field, and at CHIP_SIZE's 40px
-    // that leaves only 8px total for actual text — not enough to fit the "Tag" placeholder itself
-    // (3 characters), which is what was clipping it to just "T" once minWidth stopped letting the
-    // box silently overflow wider to compensate.
-    paddingHorizontal: 2,
-    textAlign: "center",
-    textAlignVertical: "center"
+  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
+  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
+  hiddenTagInput: {
+    height: 1,
+    opacity: 0,
+    position: "absolute",
+    width: 1
   },
   title: {
     flexShrink: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "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",

package/src/ProfilesManager.tsx

@@ -3,18 +3,17 @@ import { TouchableRipple } from '@rific/feedback-press'
 import { useFocusChain } from '@rific/focus-chain'
 import { useToast } from '@rific/toaster'
 import { InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ReactNode, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Button, Icon, Portal, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ProfileChip } from './ProfileChip'
-import { isValidTag, MAX_PROFILE_NAME_LENGTH } from './profilesValidation'
+import { clampTag, isValidTag, MAX_PROFILE_NAME_LENGTH } from './profilesValidation'
 import { Profile } from './types'
 
-// Shared by the New Profile row's own dashed circle, every profile row's own ProfileChip, the edit
-// row's color trigger, and its tag field — one size for every circle on this screen, rather than
-// each picking its own.
+// Shared by the New Profile row's own dashed circle and every profile row's own ProfileChip — one
+// size for every circle on this screen, rather than each picking its own.
 const CHIP_SIZE = 40
 
 interface ProfileEditPatch {
@@ -23,6 +22,18 @@ interface ProfileEditPatch {
   tag: string
 }
 
+export interface ProfilesManagerHandle {
+  // Flushes whatever row is currently being edited — the same thing this component's own unmount
+  // effect does, but callable explicitly. Exists because "unmount" isn't a reliable "the user is
+  // navigating away" signal on every host: React Navigation's web renderer keeps a popped screen
+  // mounted-but-hidden instead of unmounting it, so a host relying only on the unmount fallback
+  // silently loses an in-progress edit on `router.back()` there. A host whose router doesn't
+  // genuinely unmount this component on navigation should hold a ref and call this right before
+  // navigating away (e.g. in its own back-button handler). Safe to call any time, including when
+  // nothing is being edited — a no-op then, same as the unmount effect already is.
+  commitPendingEdit: () => void
+}
+
 export interface ProfilesManagerProps {
   profiles: Profile[]
   // The color a brand-new profile's draft starts on — this component doesn't have (and shouldn't
@@ -38,6 +49,9 @@ export interface ProfilesManagerProps {
   // rendering slot, not an onBack-style callback: this component doesn't know or care that it's a
   // back button, only that the host wants something shown there. Omit to hide the slot.
   headerLeft?: ReactNode
+  // React 19 accepts `ref` as a plain prop on a function component (no forwardRef needed) — see
+  // ProfilesManagerHandle's own doc for why a host may need this.
+  ref?: Ref<ProfilesManagerHandle>
 }
 
 type Row = { kind: 'profile'; profile: Profile } | { kind: 'new' }
@@ -56,7 +70,11 @@ function deriveTag(name: string): string {
 // would still assume *some* host owns navigation; this component doesn't even go that far), so any
 // consuming screen just renders it as its body inside its own routed wrapper (back button, native
 // push/pop transition, whatever persistence hook backs `profiles`/`onCreate`/`onSave`/`onDelete`).
-export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }: ProfilesManagerProps) {
+// Staying router-agnostic means this component can't know for itself whether "navigating away"
+// really unmounts it on a given host's router — see ProfilesManagerHandle's own doc for the
+// react-navigation-web case where it doesn't, and why a host there needs the `ref` escape hatch
+// instead of relying on the unmount fallback alone.
+export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps) {
   const { dark, colors } = useAutoPaperTheme()
   const insets = useSafeAreaInsets()
   const { error: showErrorToast } = useToast()
@@ -117,6 +135,11 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
     commitEditRef.current = commitEdit
   })
   useEffect(() => () => commitEditRef.current(), [])
+  // The explicit escape hatch for hosts whose "navigate away" doesn't genuinely unmount this
+  // component — see ProfilesManagerHandle's own doc. `[]` deps: the handle object itself never
+  // needs to change identity, since it always calls through the ref to whatever commitEdit is
+  // current at call time, the same indirection the unmount effect above already relies on.
+  useImperativeHandle(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), [])
 
   const startEdit = useCallback(
     (target: 'new' | Profile) => {
@@ -145,8 +168,14 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
     [tagManuallySet]
   )
 
+  // The functional setDraftTag form — reading `previous` from React's own latest-applied state
+  // rather than closing over the `draftTag` variable — matters here, not just style: fast/rapid
+  // keystrokes can fire their onChangeText calls before a re-render lands, batched into the same
+  // update, and clamping every one of them against the same stale `draftTag` (captured once at
+  // render time) would let the later ones silently clobber what the earlier ones already clamped
+  // to, rather than each building on the last.
   const handleTagChange = useCallback((tag: string) => {
-    setDraftTag(tag)
+    setDraftTag((previous) => clampTag(previous, tag))
     setTagManuallySet(true)
   }, [])
 
@@ -164,7 +193,6 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
   // handful of profiles on one shared device.
   const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles])
   const rows: Row[] = [...sortedProfiles.map((profile): Row => ({ kind: 'profile', profile })), { kind: 'new' }]
-  const tagInvalid = draftTag.length > 0 && !isValidTag(draftTag)
 
   return (
     <>
@@ -198,12 +226,12 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
                   </TouchableRipple>
                 )
               }
-              return <EditRow key='new' draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} tagInvalid={tagInvalid} onSubmit={commitEdit} autoFocus fgMuted={fgMuted} host={host} dark={dark} />
+              return <EditRow key='new' draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} autoFocus fgMuted={fgMuted} host={host} dark={dark} />
             }
 
             const { profile } = row
             if (editingId === profile.id) {
-              return <EditRow key={profile.id} draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} tagInvalid={tagInvalid} onSubmit={commitEdit} onDelete={() => setConfirmDeleteId(profile.id)} fgMuted={fgMuted} host={host} dark={dark} />
+              return <EditRow key={profile.id} draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} onDelete={() => setConfirmDeleteId(profile.id)} fgMuted={fgMuted} host={host} dark={dark} />
             }
 
             // No delete affordance at rest — tap the row to start editing, which is the one place
@@ -260,7 +288,6 @@ interface EditRowProps {
   onColorChange: (color: string) => void
   draftTag: string
   onTagChange: (tag: string) => void
-  tagInvalid: boolean
   onSubmit: () => void
   // Omitted for the 'new' row — nothing saved yet to delete.
   onDelete?: () => void
@@ -270,18 +297,19 @@ interface EditRowProps {
   dark: boolean
 }
 
-// One row, expanded: the color trigger (@tastic/hud's InlineColorPicker), a tag field clamped to
-// CHIP_SIZE, the name taking up whatever's
-// left, and — only for an existing profile — a delete icon at the very end. `tag={draftTag}` IS
-// passed to the color trigger here (unlike a plain identity badge elsewhere) so it shows the same
-// live draft value the tag field itself does — the two effects below are what wires tapping the
-// swatch to popping the keyboard on the tag field too, so typing a tag and picking a color read as
-// one combined action instead of two separate taps.
+// One row, expanded: the color trigger (@tastic/hud's InlineColorPicker) — doubling as the tag's
+// own display via its `tag` prop below, since there's no separate visible tag field anymore — an
+// invisible TextInput that exists purely to actually capture what's typed (RN has no way to bring
+// up a keyboard without a real focusable input; this one is just never meant to be *seen*), the
+// name taking up the row's remaining space, and — only for an existing profile — a delete icon at
+// the very end. The two effects below are what wires tapping the swatch to popping the keyboard on
+// the hidden tag field too, so typing a tag and picking a color read as one combined action instead
+// of two separate taps, with the swatch itself as the only place the tag ever visibly shows.
 // Return-key chains tag -> name via @rific/focus-chain rather than each field submitting on its
 // own — submitting the *name* field is what actually commits the row, so its registration's own
 // onSubmitEditing (a no-op — it's last in the chain) is overridden with onSubmit below, matching
 // how a normal multi-field form reads: fill fields in order, the last one finishes it.
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }: EditRowProps) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark }: EditRowProps) {
   const register = useFocusChain()
   const tag = register()
   const name = register()
@@ -309,12 +337,21 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   return (
     <View style={styles.editRow}>
       <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} tag={draftTag} dark={dark} />
-      {/* selectTextOnFocus so tapping into an already-set tag selects it for wholesale replacement
-      — the far more common edit than inserting into the middle of a 1-3 character value. */}
+      {/* Invisible on purpose (styles.hiddenTagInput: zero footprint, position: 'absolute' so it
+      doesn't reserve space in the row's own flex layout) — the swatch above is the only place this
+      value is ever meant to be seen. pointerEvents='none' is what actually keeps it out of the
+      way: without it, this field — even at 1x1 and fully transparent — still sits in front of the
+      swatch for hit-testing purposes and swallows the tap meant to open the color popover, since
+      focusing this field is never done by tapping it directly anyway (see the effect above, which
+      focuses it programmatically). accessibilityLabel stands in for the placeholder a visible field
+      would have had, so a screen reader still identifies it, and so this file's own tests can still
+      find it as "Tag" the same way they find the Name field by its placeholder. selectTextOnFocus
+      so re-tapping the swatch to revise an already-set tag replaces it wholesale rather than
+      inserting mid-string. */}
       {/* eslint-disable-next-line react-hooks/refs -- tag.ref/tag.props come from useFocusChain's
       register(), called during render by design (see the hook's own doc); the actual DOM/native
       focus() call it wraps only ever fires later, from an event handler, never synchronously here */}
-      <TextInput ref={tag.ref} {...tag.props} mode='outlined' dense value={draftTag} onChangeText={onTagChange} placeholder='Tag' autoCapitalize='characters' selectTextOnFocus error={tagInvalid} returnKeyType='next' style={styles.tagInput} contentStyle={styles.tagInputContent} />
+      <TextInput ref={tag.ref} {...tag.props} value={draftTag} onChangeText={onTagChange} accessibilityLabel='Tag' autoCapitalize='characters' selectTextOnFocus returnKeyType='next' style={styles.hiddenTagInput} pointerEvents='none' />
       {/* eslint-disable-next-line react-hooks/refs -- see the tag field's identical note above */}
       <TextInput ref={name.ref} {...name.props} onSubmitEditing={onSubmit} mode='outlined' dense value={draftName} onChangeText={onNameChange} maxLength={MAX_PROFILE_NAME_LENGTH} placeholder='Name' autoFocus={autoFocus} returnKeyType='done' style={styles.nameInput} />
       {onDelete && (
@@ -404,31 +441,14 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1
   },
-  // Wide enough for MAX_TAG_LENGTH monospace characters (or one emoji) plus its own padding/border
-  // — matched to CHIP_SIZE (the same footprint every other circle on this screen uses), not a
-  // fraction of the row's width, since the name field next to it is what should actually get the
-  // row's remaining space.
-  tagInput: {
-    height: CHIP_SIZE,
-    width: CHIP_SIZE
-  },
-  tagInputContent: {
-    // react-native-paper's outlined TextInput sets its own native input's minWidth from the
-    // placeholder/label's measured layout width (sized for a real label, not this field's own
-    // 3-character placeholder) — left alone, that floor is wider than CHIP_SIZE, so the actual
-    // editable box silently overflows past this field's own visible outline and centers within
-    // that wider, partly invisible box instead. Zeroing it here lets the input size to CHIP_SIZE
-    // instead, which is what actually makes `textAlign: 'center'` below center against the
-    // visible box rather than an overflowing invisible one.
-    minWidth: 0,
-    // Same reasoning as minWidth above, for the horizontal direction: the outlined input's own
-    // default padding (16px a side) is sized for a normal-width field, and at CHIP_SIZE's 40px
-    // that leaves only 8px total for actual text — not enough to fit the "Tag" placeholder itself
-    // (3 characters), which is what was clipping it to just "T" once minWidth stopped letting the
-    // box silently overflow wider to compensate.
-    paddingHorizontal: 2,
-    textAlign: 'center',
-    textAlignVertical: 'center'
+  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
+  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
+  hiddenTagInput: {
+    height: 1,
+    opacity: 0,
+    position: 'absolute',
+    width: 1
   },
   title: {
     flexShrink: 1,

package/src/index.ts

@@ -1,6 +1,6 @@
 export { ProfileChip } from './ProfileChip'
 export { ProfilePicker } from './ProfilePicker'
-export { ProfilesManager, type ProfilesManagerProps } from './ProfilesManager'
+export { ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
 export { isValidProfile, isValidTag, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH } from './profilesValidation'
 export { isSharedProfileStoreAvailable, loadSharedProfiles, saveSharedProfiles } from './sharedProfileStore'
 export type { Profile } from './types'

package/src/profilesValidation.ts

@@ -21,6 +21,12 @@ const ZERO_WIDTH_JOINER = String.fromCodePoint(0x200d)
 // segmentation (Intl.Segmenter's own Hermes support is inconsistent enough not to lean on here).
 const EMOJI_PATTERN = new RegExp(`^\\p{Extended_Pictographic}${VARIATION_SELECTOR}?(${ZERO_WIDTH_JOINER}\\p{Extended_Pictographic}${VARIATION_SELECTOR}?)*$`, 'u')
 
+// Presence check, not the full anchored EMOJI_PATTERN above — clampTag below only needs to know
+// whether a just-typed chunk contains a pictograph at all, not whether an entire value is exactly
+// one (possibly ZWJ-joined) emoji. Same distinction @tastic/hud's InlineColorPicker draws for its
+// own font-sizing check.
+const EMOJI_PRESENT = /\p{Extended_Pictographic}/u
+
 // Empty is valid too — a profile can have no tag yet, same as it can go without ever entering an
 // editor's own tag field at all; every place this renders falls back to a generic icon in that case
 // (see ProfileChip).
@@ -28,7 +34,33 @@ export function isValidTag(value: unknown): value is string {
   if (typeof value !== 'string') return false
   if (value.length === 0) return true
   if (EMOJI_PATTERN.test(value)) return true
-  return !/\p{Extended_Pictographic}/u.test(value) && Array.from(value).length <= MAX_TAG_LENGTH
+  return !EMOJI_PRESENT.test(value) && Array.from(value).length <= MAX_TAG_LENGTH
+}
+
+// Clamps a tag field's live value on every keystroke so it's never possible to type your way into
+// a state isValidTag would reject, rather than allowing it and only catching it later (a toast on
+// save, or a swatch preview that overflows/truncates). `previous` is the value before this
+// keystroke, `next` is what the field reports after it.
+export function clampTag(previous: string, next: string): string {
+  const previousCodepoints = Array.from(previous)
+  const nextCodepoints = Array.from(next)
+
+  // Shrinking (backspace/delete, or a selectTextOnFocus-driven wholesale replacement — see
+  // ProfilesManager's own EditRow — reporting its own replacement text as no longer than what it
+  // overwrote) always passes through untouched: there's nothing to clamp about removing content.
+  if (nextCodepoints.length <= previousCodepoints.length) return next
+
+  let sharedPrefixLength = 0
+  while (sharedPrefixLength < previousCodepoints.length && previousCodepoints[sharedPrefixLength] === nextCodepoints[sharedPrefixLength]) sharedPrefixLength++
+  const added = nextCodepoints.slice(sharedPrefixLength).join('')
+
+  // A tag is either a handful of plain characters or exactly one emoji, never a mix — typing more
+  // of either kind on top of the other one starts fresh with just what's newly typed, rather than
+  // producing a combination isValidTag would reject anyway (an emoji followed by letters, or a
+  // second emoji tacked onto the first).
+  if (EMOJI_PRESENT.test(added) || EMOJI_PRESENT.test(previous)) return added
+
+  return nextCodepoints.length > MAX_TAG_LENGTH ? previous : next
 }
 
 // Validates only the fields this package's own `Profile` type declares — an app that extends