@tastic/profile 0.1.0

package/dist/index.mjs

@@ -0,0 +1,482 @@
+// src/ProfileChip.tsx
+import { getContrastColor } from "@rific/auto-paper";
+import { StyleSheet, View } from "react-native";
+import { Icon, Text } from "react-native-paper";
+import { jsx } from "react/jsx-runtime";
+var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+function ProfileChip({ profile, size = 22, filled = true }) {
+  const contrastColor = getContrastColor(profile.color);
+  const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4);
+  return /* @__PURE__ */ jsx(View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: profile.color }], children: profile.tag ? /* @__PURE__ */ jsx(Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ jsx(Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
+}
+var styles = StyleSheet.create({
+  chip: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tag: {
+    fontWeight: "700",
+    paddingHorizontal: 2
+  }
+});
+
+// src/ProfilePicker.tsx
+import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
+import { TouchableRipple } from "@rific/feedback-press";
+import { PopoverBody, useAutoAlign } from "@tastic/hud";
+import { useMemo } from "react";
+import { ScrollView, StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { Icon as Icon2, Text as Text2 } from "react-native-paper";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TRIGGER_HEIGHT = 28;
+var POPOVER_WIDTH = 220;
+var ROW_HEIGHT = 36;
+var LIST_PADDING = 8;
+function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: alignOverride, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage }) {
+  const id = `${idPrefix}-profile`;
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const open = host.openId === id;
+  const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
+  const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const rowCount = profiles.length + 1 + (onManage ? 1 : 0);
+  const contentHeight = LIST_PADDING * 2 + rowCount * ROW_HEIGHT;
+  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, POPOVER_WIDTH, contentHeight);
+  const align = alignOverride ?? autoAlign;
+  const handleSelectGuest = () => {
+    onSelect(null);
+    host.close();
+  };
+  const handleSelectExisting = (profile) => {
+    if (profile.id === takenId) return;
+    onSelect(profile);
+    host.close();
+  };
+  const handleManage = () => {
+    host.close();
+    onManage?.();
+  };
+  return /* @__PURE__ */ jsxs(View2, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
+    /* @__PURE__ */ jsx2(TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ jsxs(View2, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
+      /* @__PURE__ */ jsx2(Text2, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
+      /* @__PURE__ */ jsx2(Icon2, { source: "menu-down", size: 16, color })
+    ] }) }),
+    /* @__PURE__ */ jsx2(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs(
+      ScrollView,
+      {
+        style: [
+          styles2.menu,
+          {
+            backgroundColor: menuBg,
+            borderColor: color,
+            width: POPOVER_WIDTH,
+            maxHeight
+          }
+        ],
+        contentContainerStyle: styles2.menuContent,
+        showsVerticalScrollIndicator: false,
+        children: [
+          /* @__PURE__ */ jsx2(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
+            /* @__PURE__ */ jsx2(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx2(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
+            /* @__PURE__ */ jsx2(Text2, { style: [styles2.rowLabel, { color: selectedId === null ? getContrastColor2(color) : fg }], children: nullLabel })
+          ] }) }),
+          sortedProfiles.map((profile) => {
+            const taken = profile.id === takenId;
+            const selected = selectedId === profile.id;
+            return /* @__PURE__ */ jsx2(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: profile.color }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+              /* @__PURE__ */ jsx2(ProfileChip, { profile, filled: !selected }),
+              /* @__PURE__ */ jsx2(
+                Text2,
+                {
+                  style: [
+                    styles2.rowLabel,
+                    {
+                      color: selected ? getContrastColor2(profile.color) : fg
+                    }
+                  ],
+                  numberOfLines: 1,
+                  children: profile.name
+                }
+              )
+            ] }) }, profile.id);
+          }),
+          onManage && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx2(View2, { style: [styles2.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ jsx2(TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ jsxs(View2, { style: styles2.manageRowInner, children: [
+              /* @__PURE__ */ jsx2(Icon2, { source: "account-cog-outline", size: 16, color }),
+              /* @__PURE__ */ jsx2(Text2, { style: [styles2.manageLabel, { color }], children: "Manage" })
+            ] }) })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+var styles2 = StyleSheet2.create({
+  anchor: {
+    position: "relative"
+  },
+  // See InlineColorPicker's identical comment — React Native Web gives every position:'relative'
+  // view its own stacking context, so the elevation has to live on the anchor itself.
+  anchorOpen: {
+    zIndex: 100
+  },
+  // Separates Manage (a navigation action) from the selectable rows above it — different kind of
+  // action, not just another row in the same list. Tinted with the seat's own color (passed in as
+  // backgroundColor) rather than a flat gray, matching the border/caret's own accent-tinted look.
+  divider: {
+    height: 1,
+    marginVertical: 4,
+    opacity: 0.25
+  },
+  // Matches ProfileChip's own default size/shape exactly (see this row's own render-site comment)
+  // — no backgroundColor, unlike ProfileChip's own default: this row has no identity color of its
+  // own to fill it with, and the render site now colors the icon directly instead.
+  guestChip: {
+    alignItems: "center",
+    borderRadius: 11,
+    height: 22,
+    justifyContent: "center",
+    width: 22
+  },
+  manageLabel: {
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  // Centered rather than left-aligned like a normal row — see this row's own render-site comment
+  // for why (a footer action, not another selectable identity).
+  manageRowInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 6,
+    height: "100%",
+    justifyContent: "center"
+  },
+  menu: {
+    borderRadius: 12,
+    borderWidth: 2,
+    elevation: 8,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  // Padded on every side (not just top/bottom) — a selected row's own full-color background (see
+  // `row`'s borderRadius) needs real margin from the menu's own straight edges to read as a rounded
+  // pill instead of looking clipped against them.
+  menuContent: {
+    padding: LIST_PADDING
+  },
+  row: {
+    borderRadius: 8,
+    height: ROW_HEIGHT
+  },
+  rowDisabled: {
+    opacity: 0.35
+  },
+  rowInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    flex: 1,
+    gap: 8,
+    paddingHorizontal: 12
+  },
+  rowLabel: {
+    flex: 1,
+    fontSize: 14
+  },
+  trigger: {
+    alignSelf: "flex-start"
+  },
+  triggerInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 2,
+    height: TRIGGER_HEIGHT
+  },
+  triggerLabel: {
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 1
+  }
+});
+
+// src/ProfilesManager.tsx
+import { useAutoPaperTheme } from "@rific/auto-paper";
+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 { 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";
+
+// src/profilesValidation.ts
+var MAX_PROFILE_NAME_LENGTH = 20;
+var MAX_TAG_LENGTH = 3;
+function isValidHexColor(value) {
+  return typeof value === "string" && /^#[0-9a-f]{6}$/i.test(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");
+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;
+}
+function isValidProfile(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return typeof v.id === "string" && v.id.length > 0 && typeof v.name === "string" && v.name.trim().length > 0 && v.name.length <= MAX_PROFILE_NAME_LENGTH && isValidHexColor(v.color) && isValidTag(v.tag) && typeof v.createdAt === "number" && typeof v.updatedAt === "number";
+}
+
+// src/ProfilesManager.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CHIP_SIZE = 40;
+function deriveTag(name) {
+  const trimmed = name.trim();
+  return trimmed ? trimmed[0].toUpperCase() : "";
+}
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }) {
+  const { dark, colors } = useAutoPaperTheme();
+  const insets = useSafeAreaInsets();
+  const { error: showErrorToast } = useToast();
+  const host = usePopoverHost();
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const cardBg = dark ? "#111111" : "#F2F2F2";
+  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
+  const cancelBg = dark ? "#2A2A2A" : "#E0E0E0";
+  const cancelFg = dark ? "#FFFFFF" : "#000000";
+  const [editingId, setEditingId] = useState(null);
+  const [draftName, setDraftName] = useState("");
+  const [draftColor, setDraftColor] = useState(defaultColor);
+  const [draftTag, setDraftTag] = useState("");
+  const [tagManuallySet, setTagManuallySet] = useState(false);
+  const [confirmDeleteId, setConfirmDeleteId] = useState(null);
+  const commitEdit = useCallback(() => {
+    const name = draftName.trim();
+    if (editingId && name) {
+      const tagValid = isValidTag(draftTag);
+      if (draftTag && !tagValid) showErrorToast("Invalid tag", "Use up to 3 letters or a single emoji");
+      const tag = tagValid ? draftTag : "";
+      if (editingId === "new") onCreate({ color: draftColor, name, tag });
+      else onSave(editingId, { color: draftColor, name, tag });
+    }
+    setEditingId(null);
+  }, [editingId, draftName, draftColor, draftTag, onCreate, onSave, showErrorToast]);
+  const commitEditRef = useRef(commitEdit);
+  useEffect(() => {
+    commitEditRef.current = commitEdit;
+  });
+  useEffect(() => () => commitEditRef.current(), []);
+  const startEdit = useCallback(
+    (target) => {
+      commitEdit();
+      if (target === "new") {
+        setDraftName("");
+        setDraftColor(defaultColor);
+        setDraftTag("");
+        setTagManuallySet(false);
+      } else {
+        setDraftName(target.name);
+        setDraftColor(target.color);
+        setDraftTag(target.tag);
+        setTagManuallySet(target.tag !== "");
+      }
+      setEditingId(target === "new" ? "new" : target.id);
+    },
+    [commitEdit, defaultColor]
+  );
+  const handleNameChange = useCallback(
+    (name) => {
+      setDraftName(name);
+      if (!tagManuallySet) setDraftTag(deriveTag(name));
+    },
+    [tagManuallySet]
+  );
+  const handleTagChange = useCallback((tag) => {
+    setDraftTag(tag);
+    setTagManuallySet(true);
+  }, []);
+  const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
+  const handleConfirmDelete = useCallback(() => {
+    if (confirmDeleteId) {
+      onDelete(confirmDeleteId);
+      if (editingId === confirmDeleteId) setEditingId(null);
+    }
+    setConfirmDeleteId(null);
+  }, [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,
+      /* @__PURE__ */ jsx3(Text3, { variant: "displaySmall", style: [styles3.title, { color: fg }], children: "Profiles" })
+    ] }),
+    /* @__PURE__ */ jsx3(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ jsx3(ScrollView2, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
+      if (row.kind === "new") {
+        if (editingId !== "new") {
+          return /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
+            /* @__PURE__ */ jsx3(View3, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx3(Icon3, { source: "plus", size: 20, color: fg }) }),
+            /* @__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");
+      }
+      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(TouchableRipple2, { onPress: () => startEdit(profile), style: styles3.row, children: /* @__PURE__ */ jsxs2(View3, { style: styles3.rowInner, children: [
+        /* @__PURE__ */ jsx3(ProfileChip, { profile, size: CHIP_SIZE }),
+        /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      ] }) }, profile.id);
+    }) }) }),
+    confirmDeleteProfile && /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(View3, { style: styles3.overlay, children: /* @__PURE__ */ jsxs2(View3, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
+      /* @__PURE__ */ jsx3(Icon3, { source: "alert-outline", size: 64, color: colors.danger }),
+      /* @__PURE__ */ jsx3(Text3, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
+      /* @__PURE__ */ jsxs2(Text3, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: [
+        "This permanently deletes ",
+        confirmDeleteProfile.name,
+        "\u2019s profile. This cannot be undone."
+      ] }),
+      /* @__PURE__ */ jsx3(Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
+      /* @__PURE__ */ jsx3(Button, { mode: "contained", onPress: handleConfirmDelete, style: styles3.overlayButton, buttonColor: colors.danger, textColor: colors.onDanger, children: "Delete" })
+    ] }) }) })
+  ] });
+}
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
+  const register = useFocusChain();
+  const tag = register();
+  const name = register();
+  return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
+    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark, size: CHIP_SIZE }),
+    /* @__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: name.ref, ...name.props, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput, onSubmitEditing: onSubmit }),
+    onDelete && /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx3(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
+  ] });
+}
+var styles3 = StyleSheet3.create({
+  content: {
+    gap: 4,
+    paddingHorizontal: 20
+  },
+  editRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    paddingVertical: 6
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4,
+    paddingBottom: 8
+  },
+  iconButton: {
+    alignItems: "center",
+    borderRadius: 8,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  keyboardAvoiding: {
+    flex: 1
+  },
+  nameInput: {
+    flex: 1
+  },
+  newChip: {
+    backgroundColor: "transparent",
+    borderStyle: "dashed",
+    borderWidth: 2
+  },
+  overlay: {
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.72)",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
+  overlayBody: { textAlign: "center" },
+  overlayButton: { width: 160 },
+  overlayCard: {
+    alignItems: "center",
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlayTitle: { fontWeight: "bold", marginBottom: -8 },
+  row: {
+    borderRadius: 8,
+    paddingVertical: 8
+  },
+  rowChip: {
+    alignItems: "center",
+    borderRadius: CHIP_SIZE / 2,
+    height: CHIP_SIZE,
+    justifyContent: "center",
+    width: CHIP_SIZE
+  },
+  rowInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  },
+  rowName: {
+    flex: 1
+  },
+  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"
+  },
+  title: {
+    flexShrink: 1,
+    fontWeight: "bold"
+  }
+});
+export {
+  MAX_PROFILE_NAME_LENGTH,
+  MAX_TAG_LENGTH,
+  ProfileChip,
+  ProfilePicker,
+  ProfilesManager,
+  isValidProfile,
+  isValidTag
+};

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@tastic/profile",
+  "version": "0.1.0",
+  "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",
+    "expo",
+    "local-multiplayer",
+    "couch-multiplayer",
+    "profile",
+    "player-identity",
+    "avatar"
+  ],
+  "homepage": "https://github.com/jayrdeaton/react-native-game-profile#readme",
+  "bugs": {
+    "url": "https://github.com/jayrdeaton/react-native-game-profile/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jayrdeaton/react-native-game-profile.git"
+  },
+  "license": "MIT",
+  "author": "Jay Deaton",
+  "sideEffects": false,
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "react-native": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__mocks__"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build:watch": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "fix": "eslint --fix",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build",
+    "release": "git push --follow-tags",
+    "release:major": "npm version major && git push --follow-tags",
+    "release:minor": "npm version minor && git push --follow-tags",
+    "release:patch": "npm version patch && git push --follow-tags",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "typecheck": "tsc --noEmit",
+    "preversion": "npm run lint && npm test && npm run build"
+  },
+  "devDependencies": {
+    "@rific/auto-paper": "file:.yalc/@rific/auto-paper",
+    "@rific/feedback-press": "^0.10.4",
+    "@rific/focus-chain": "^0.4.3",
+    "@rific/toaster": "^0.4.1",
+    "@tastic/core": "^0.1.2",
+    "@tastic/hud": "file:.yalc/@tastic/hud",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.0",
+    "@typescript-eslint/parser": "^8.59.3",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-package-json": "^1.0.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-native": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "prettier": "^3.8.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native": "^0.85.3",
+    "react-native-paper": "^5.15.2",
+    "react-native-safe-area-context": "^5.0.0",
+    "ts-jest": "^29.4.9",
+    "tsup": "^8.0.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.3"
+  },
+  "peerDependencies": {
+    "@rific/auto-paper": ">=0.9.0",
+    "@rific/feedback-press": ">=0.10.0",
+    "@rific/focus-chain": ">=0.4.0",
+    "@rific/toaster": ">=0.4.0",
+    "@tastic/core": ">=0.1.0",
+    "@tastic/hud": ">=0.1.3",
+    "react": ">=19.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-paper": ">=5.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/ProfileChip.tsx

@@ -0,0 +1,60 @@
+import { getContrastColor } from '@rific/auto-paper'
+import { StyleSheet, View } from 'react-native'
+import { Icon, Text } from 'react-native-paper'
+
+import { Profile } from './types'
+
+// Presence check, not isValidTag's own full-string emoji validation (profilesValidation.ts) — this
+// only decides a font-size ratio, so it doesn't need that check's ZWJ/variation-selector precision,
+// just "does this tag contain a pictograph at all."
+const EMOJI_PATTERN = /\p{Extended_Pictographic}/u
+
+interface Props {
+  profile: Profile
+  size?: number
+  // False on a selected row, whose own background already fills with the profile's color (see
+  // ProfilePicker's own selected-row handling) — a second circle behind the tag there would either
+  // double up decoratively or, filled some other flat color, look like a stray badge next to the
+  // plain icon+text every other selected row in the app uses. Contrast is still computed against
+  // the profile's own color either way (that's what's actually behind the glyph whether this chip
+  // paints it itself or the row already has), and the chip keeps the same size/shape footprint
+  // filled or not, so a row's tag/icon stays lined up with every other row in the list regardless
+  // of which one happens to be selected.
+  filled?: boolean
+}
+
+// A profile's identity at a glance — its own color as a filled circle, with its tag (or a generic
+// fallback icon, for a profile with none set) in a contrast-safe color on top. The same combination
+// @tastic/hud's InlineColorPicker trigger shows for live color selection, just as a small static
+// badge for a list row (ProfilePicker's dropdown, ProfilesManager's roster) rather than an
+// interactive picker trigger.
+export function ProfileChip({ profile, size = 22, filled = true }: Props) {
+  const contrastColor = getContrastColor(profile.color)
+  // An emoji glyph reads visually smaller than a bold letter at the same fontSize (the system emoji
+  // font leaves more of its own em-box empty), so a plain-text ratio that looks right for "J" still
+  // looks small for "🎮" 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 a line of text.
+  const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4)
+  return (
+    <View style={[styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: profile.color }]}>
+      {profile.tag ? (
+        <Text style={[styles.tag, { color: contrastColor, fontSize: tagFontSize }]} numberOfLines={1} adjustsFontSizeToFit>
+          {profile.tag}
+        </Text>
+      ) : (
+        <Icon source='account' size={size * 0.6} color={contrastColor} />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tag: {
+    fontWeight: '700',
+    paddingHorizontal: 2
+  }
+})