@tastic/profile 0.1.0

package/dist/index.js

@@ -0,0 +1,515 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MAX_PROFILE_NAME_LENGTH: () => MAX_PROFILE_NAME_LENGTH,
+  MAX_TAG_LENGTH: () => MAX_TAG_LENGTH,
+  ProfileChip: () => ProfileChip,
+  ProfilePicker: () => ProfilePicker,
+  ProfilesManager: () => ProfilesManager,
+  isValidProfile: () => isValidProfile,
+  isValidTag: () => isValidTag
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ProfileChip.tsx
+var import_auto_paper = require("@rific/auto-paper");
+var import_react_native = require("react-native");
+var import_react_native_paper = require("react-native-paper");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
+function ProfileChip({ profile, size = 22, filled = true }) {
+  const contrastColor = (0, import_auto_paper.getContrastColor)(profile.color);
+  const tagFontSize = size * (profile.tag && EMOJI_PATTERN.test(profile.tag) ? 0.6 : 0.4);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.chip, { borderRadius: size / 2, height: size, width: size }, filled && { backgroundColor: profile.color }], children: profile.tag ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { style: [styles.tag, { color: contrastColor, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: profile.tag }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: "account", size: size * 0.6, color: contrastColor }) });
+}
+var styles = import_react_native.StyleSheet.create({
+  chip: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tag: {
+    fontWeight: "700",
+    paddingHorizontal: 2
+  }
+});
+
+// src/ProfilePicker.tsx
+var import_auto_paper2 = require("@rific/auto-paper");
+var import_feedback_press = require("@rific/feedback-press");
+var import_hud = require("@tastic/hud");
+var import_react = require("react");
+var import_react_native2 = require("react-native");
+var import_react_native_paper2 = require("react-native-paper");
+var import_jsx_runtime2 = require("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 = (0, import_react.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 } = (0, import_hud.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__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), style: styles2.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: styles2.triggerInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color }], numberOfLines: 1, children: (selectedProfile?.name ?? guestLabel).toUpperCase() }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_react_native2.ScrollView,
+      {
+        style: [
+          styles2.menu,
+          {
+            backgroundColor: menuBg,
+            borderColor: color,
+            width: POPOVER_WIDTH,
+            maxHeight
+          }
+        ],
+        contentContainerStyle: styles2.menuContent,
+        showsVerticalScrollIndicator: false,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.rowLabel, { color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }], children: nullLabel })
+          ] }) }),
+          sortedProfiles.map((profile) => {
+            const taken = profile.id === takenId;
+            const selected = selectedId === profile.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: profile.color }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProfileChip, { profile, filled: !selected }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_react_native_paper2.Text,
+                {
+                  style: [
+                    styles2.rowLabel,
+                    {
+                      color: selected ? (0, import_auto_paper2.getContrastColor)(profile.color) : fg
+                    }
+                  ],
+                  numberOfLines: 1,
+                  children: profile.name
+                }
+              )
+            ] }) }, profile.id);
+          }),
+          onManage && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles2.manageRowInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "account-cog-outline", size: 16, color }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { style: [styles2.manageLabel, { color }], children: "Manage" })
+            ] }) })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+var styles2 = import_react_native2.StyleSheet.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
+var import_auto_paper3 = require("@rific/auto-paper");
+var import_feedback_press2 = require("@rific/feedback-press");
+var import_focus_chain = require("@rific/focus-chain");
+var import_toaster = require("@rific/toaster");
+var import_hud2 = require("@tastic/hud");
+var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+var import_react_native_paper3 = require("react-native-paper");
+var import_react_native_safe_area_context = require("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
+var import_jsx_runtime3 = require("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 } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const { error: showErrorToast } = (0, import_toaster.useToast)();
+  const host = (0, import_hud2.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] = (0, import_react2.useState)(null);
+  const [draftName, setDraftName] = (0, import_react2.useState)("");
+  const [draftColor, setDraftColor] = (0, import_react2.useState)(defaultColor);
+  const [draftTag, setDraftTag] = (0, import_react2.useState)("");
+  const [tagManuallySet, setTagManuallySet] = (0, import_react2.useState)(false);
+  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react2.useState)(null);
+  const commitEdit = (0, import_react2.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 = (0, import_react2.useRef)(commitEdit);
+  (0, import_react2.useEffect)(() => {
+    commitEditRef.current = commitEdit;
+  });
+  (0, import_react2.useEffect)(() => () => commitEditRef.current(), []);
+  const startEdit = (0, import_react2.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 = (0, import_react2.useCallback)(
+    (name) => {
+      setDraftName(name);
+      if (!tagManuallySet) setDraftTag(deriveTag(name));
+    },
+    [tagManuallySet]
+  );
+  const handleTagChange = (0, import_react2.useCallback)((tag) => {
+    setDraftTag(tag);
+    setTagManuallySet(true);
+  }, []);
+  const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
+  const handleConfirmDelete = (0, import_react2.useCallback)(() => {
+    if (confirmDeleteId) {
+      onDelete(confirmDeleteId);
+      if (editingId === confirmDeleteId) setEditingId(null);
+    }
+    setConfirmDeleteId(null);
+  }, [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,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "displaySmall", style: [styles3.title, { color: fg }], children: "Profiles" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.KeyboardAvoidingView, { behavior: import_react_native3.Platform.OS === "ios" ? "padding" : void 0, style: styles3.keyboardAvoiding, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.ScrollView, { 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__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => startEdit("new"), style: styles3.row, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.rowInner, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.rowChip, styles3.newChip, { borderColor: fg }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "plus", size: 20, color: fg }) }),
+            /* @__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");
+      }
+      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)(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 }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
+      ] }) }, profile.id);
+    }) }) }),
+    confirmDeleteProfile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: styles3.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "alert-outline", size: 64, color: colors.danger }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.danger }], children: "Delete Profile?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: [
+        "This permanently deletes ",
+        confirmDeleteProfile.name,
+        "\u2019s profile. This cannot be undone."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Button, { mode: "contained", onPress: () => setConfirmDeleteId(null), style: styles3.overlayButton, buttonColor: cancelBg, textColor: cancelFg, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.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 = (0, import_focus_chain.useFocusChain)();
+  const tag = register();
+  const name = register();
+  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, size: CHIP_SIZE }),
+    /* @__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: 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__ */ (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 }) })
+  ] });
+}
+var styles3 = import_react_native3.StyleSheet.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"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MAX_PROFILE_NAME_LENGTH,
+  MAX_TAG_LENGTH,
+  ProfileChip,
+  ProfilePicker,
+  ProfilesManager,
+  isValidProfile,
+  isValidTag
+});