@tastic/profile 0.3.4 → 0.3.6

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;
@@ -335,7 +346,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 +359,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 +372,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,13 +396,20 @@ 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();
+  const tagFocusRef = (0, import_react2.useRef)(tag.props.focus);
+  (0, import_react2.useEffect)(() => {
+    tagFocusRef.current = tag.props.focus;
+  });
+  (0, import_react2.useEffect)(() => {
+    if (host.openId === "color") tagFocusRef.current();
+  }, [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, 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_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, 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 }) })
   ] });
@@ -475,31 +492,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

@@ -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;
@@ -307,7 +318,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 +331,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 +344,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,13 +368,20 @@ 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();
+  const tagFocusRef = useRef(tag.props.focus);
+  useEffect(() => {
+    tagFocusRef.current = tag.props.focus;
+  });
+  useEffect(() => {
+    if (host.openId === "color") tagFocusRef.current();
+  }, [host.openId]);
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
-    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, 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(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, tag: draftTag, dark }),
+    /* @__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 }) })
   ] });
@@ -447,31 +464,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.4",
+  "version": "0.3.6",
   "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

@@ -9,12 +9,11 @@ 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 {
@@ -145,8 +144,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 +169,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 +202,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 +264,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,30 +273,61 @@ 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. No `tag` passed to the
-// color trigger here — it keeps its plain palette icon regardless of the row's own tag field, since
-// the tag is already right next to it in its own field, so repeating it on the color trigger too
-// would be redundant rather than informative.
+// 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()
 
+  // tag.props.focus (from @rific/focus-chain's own register(), not tag.ref — that's a callback
+  // ref, not a ref object, so it has no .current to read) is the hook's own imperative "focus this
+  // exact registered field" call. Mirrored into a ref every render, same as commitEditRef above,
+  // rather than read directly in the effect below: register() returns a brand-new props object on
+  // every render (it isn't memoized), so depending on tag.props.focus directly would rerun that
+  // effect — and refocus an already-focused field — on every keystroke into the tag field itself,
+  // re-triggering its own selectTextOnFocus mid-type and wiping out what's being typed.
+  const tagFocusRef = useRef(tag.props.focus)
+  useEffect(() => {
+    tagFocusRef.current = tag.props.focus
+  })
+
+  // Lets tapping the swatch itself hand focus straight to the tag field, so one tap both opens the
+  // color popover (host.toggle, inside InlineColorPicker's own onPress) and pops the keyboard on
+  // the tag field right next to it. Scoped to host.openId so this only fires on an actual open
+  // transition, not on every re-render while it's already open.
+  useEffect(() => {
+    if (host.openId === 'color') tagFocusRef.current()
+  }, [host.openId])
+
   return (
     <View style={styles.editRow}>
-      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} 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. */}
+      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} tag={draftTag} dark={dark} />
+      {/* 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 && (
@@ -383,31 +417,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/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