@tastic/profile 0.14.0 → 0.14.1

package/dist/index.js

@@ -167,13 +167,14 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
     host.toggle(id);
   };
   const triggerLabel = (selectedProfile?.name ?? guestLabel).toUpperCase();
+  const manageFooter = !!onManage && !(colorSection && colorPage);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: [styles2.anchor, open && styles2.anchorOpen], onLayout: handleAnchorLayout, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles2.trigger, chipTrigger && styles2.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles2.chipTriggerInner : styles2.triggerInner, children: [
       chipTrigger && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IdentityChip, { color, tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon, size: CHIP_SIZE }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hud.PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_react_native2.View,
       {
         style: [
@@ -185,41 +186,43 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
             maxHeight
           }
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper2.FadingScrollView, { contentContainerStyle: styles2.menuContent, showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          colorSection && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.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;
-            const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileChip, { profile, filled: !selected }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_react_native_paper2.Text,
-                {
-                  style: [
-                    styles2.rowLabel,
-                    {
-                      color: selected ? (0, import_auto_paper2.getContrastColor)(rowColor) : fg
-                    }
-                  ],
-                  numberOfLines: 1,
-                  children: profile.name
-                }
-              )
-            ] }) }, profile.id);
-          }),
-          onManage && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper2.FadingScrollView, { contentContainerStyle: [styles2.menuContent, manageFooter && styles2.menuContentAboveFooter], showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            colorSection && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.rowInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: styles2.guestChip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: nullIcon, size: 13, color: selectedId === null ? (0, import_auto_paper2.getContrastColor)(color) : fg }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.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;
+              const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileChip, { profile, filled: !selected }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_react_native_paper2.Text,
+                  {
+                    style: [
+                      styles2.rowLabel,
+                      {
+                        color: selected ? (0, import_auto_paper2.getContrastColor)(rowColor) : fg
+                      }
+                    ],
+                    numberOfLines: 1,
+                    children: profile.name
+                  }
+                )
+              ] }) }, profile.id);
+            })
+          ] }) }, colorSection && colorPage ? "color" : "list"),
+          manageFooter && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.menuFooter, children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.View, { style: [styles2.divider, { backgroundColor: color }] }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native2.View, { style: styles2.manageRowInner, children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "account-cog-outline", size: 16, color }),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles2.manageLabel, { color: fg }], children: "Manage" })
             ] }) })
           ] })
-        ] }) }, colorSection && colorPage ? "color" : "list")
+        ]
       }
     ) })
   ] });
@@ -345,6 +348,14 @@ var styles2 = import_react_native2.StyleSheet.create({
   menuContent: {
     padding: LIST_PADDING
   },
+  // With Manage pinned below, its own padding takes the bottom edge (same total height as before).
+  menuContentAboveFooter: {
+    paddingBottom: 0
+  },
+  menuFooter: {
+    paddingBottom: LIST_PADDING,
+    paddingHorizontal: LIST_PADDING
+  },
   // The selected profile's own color (see ColorSection).
   profileDot: {
     borderRadius: 4,

package/dist/index.mjs

@@ -124,13 +124,14 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
     host.toggle(id);
   };
   const triggerLabel = (selectedProfile?.name ?? guestLabel).toUpperCase();
+  const manageFooter = !!onManage && !(colorSection && colorPage);
   return /* @__PURE__ */ jsxs(View2, { style: [styles2.anchor, open && styles2.anchorOpen], onLayout: handleAnchorLayout, children: [
     /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleTriggerPress, borderless: chipTrigger, style: [styles2.trigger, chipTrigger && styles2.chipTrigger, triggerStyle], accessibilityRole: "button", accessibilityLabel: triggerLabel, children: /* @__PURE__ */ jsxs(View2, { ref: triggerRef, collapsable: false, style: chipTrigger ? styles2.chipTriggerInner : styles2.triggerInner, children: [
       chipTrigger && /* @__PURE__ */ jsx4(IdentityChip, { color, tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon, size: CHIP_SIZE }),
       /* @__PURE__ */ jsx4(Text2, { style: [styles2.triggerLabel, { color: chipTrigger ? fg : color }], numberOfLines: 1, children: triggerLabel }),
       /* @__PURE__ */ jsx4(Icon2, { source: "menu-down", size: 16, color: chipTrigger ? fg : color })
     ] }) }),
-    /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: chipTrigger ? triggerWidth : TRIGGER_HEIGHT, children: /* @__PURE__ */ jsxs(
       View2,
       {
         style: [
@@ -142,41 +143,43 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, d
             maxHeight
           }
         ],
-        children: /* @__PURE__ */ jsx4(FadingScrollView, { contentContainerStyle: styles2.menuContent, showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ jsx4(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          colorSection && /* @__PURE__ */ jsx4(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
-          /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
-            /* @__PURE__ */ jsx4(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx4(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
-            /* @__PURE__ */ jsx4(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;
-            const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
-            return /* @__PURE__ */ jsx4(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
-              /* @__PURE__ */ jsx4(ProfileChip, { profile, filled: !selected }),
-              /* @__PURE__ */ jsx4(
-                Text2,
-                {
-                  style: [
-                    styles2.rowLabel,
-                    {
-                      color: selected ? getContrastColor2(rowColor) : fg
-                    }
-                  ],
-                  numberOfLines: 1,
-                  children: profile.name
-                }
-              )
-            ] }) }, profile.id);
-          }),
-          onManage && /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: [
+          /* @__PURE__ */ jsx4(FadingScrollView, { contentContainerStyle: [styles2.menuContent, manageFooter && styles2.menuContentAboveFooter], showsVerticalScrollIndicator: false, children: colorSection && colorPage ? /* @__PURE__ */ jsx4(ColorPage, { section: colorSection, profileColor: selectedProfile?.color, fg, onBack: () => setColorPage(false) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            colorSection && /* @__PURE__ */ jsx4(ColorRow, { section: colorSection, fg, dividerColor: color, onPress: () => setColorPage(true) }),
+            /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleSelectGuest, style: [styles2.row, selectedId === null && { backgroundColor: color }], children: /* @__PURE__ */ jsxs(View2, { style: styles2.rowInner, children: [
+              /* @__PURE__ */ jsx4(View2, { style: styles2.guestChip, children: /* @__PURE__ */ jsx4(Icon2, { source: nullIcon, size: 13, color: selectedId === null ? getContrastColor2(color) : fg }) }),
+              /* @__PURE__ */ jsx4(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;
+              const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
+              return /* @__PURE__ */ jsx4(TouchableRipple, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [styles2.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs(View2, { style: [styles2.rowInner, taken && styles2.rowDisabled], children: [
+                /* @__PURE__ */ jsx4(ProfileChip, { profile, filled: !selected }),
+                /* @__PURE__ */ jsx4(
+                  Text2,
+                  {
+                    style: [
+                      styles2.rowLabel,
+                      {
+                        color: selected ? getContrastColor2(rowColor) : fg
+                      }
+                    ],
+                    numberOfLines: 1,
+                    children: profile.name
+                  }
+                )
+              ] }) }, profile.id);
+            })
+          ] }) }, colorSection && colorPage ? "color" : "list"),
+          manageFooter && /* @__PURE__ */ jsxs(View2, { style: styles2.menuFooter, children: [
             /* @__PURE__ */ jsx4(View2, { style: [styles2.divider, { backgroundColor: color }] }),
             /* @__PURE__ */ jsx4(TouchableRipple, { onPress: handleManage, style: styles2.row, children: /* @__PURE__ */ jsxs(View2, { style: styles2.manageRowInner, children: [
               /* @__PURE__ */ jsx4(Icon2, { source: "account-cog-outline", size: 16, color }),
               /* @__PURE__ */ jsx4(Text2, { style: [styles2.manageLabel, { color: fg }], children: "Manage" })
             ] }) })
           ] })
-        ] }) }, colorSection && colorPage ? "color" : "list")
+        ]
       }
     ) })
   ] });
@@ -302,6 +305,14 @@ var styles2 = StyleSheet2.create({
   menuContent: {
     padding: LIST_PADDING
   },
+  // With Manage pinned below, its own padding takes the bottom edge (same total height as before).
+  menuContentAboveFooter: {
+    paddingBottom: 0
+  },
+  menuFooter: {
+    paddingBottom: LIST_PADDING,
+    paddingHorizontal: LIST_PADDING
+  },
   // The selected profile's own color (see ColorSection).
   profileDot: {
     borderRadius: 4,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "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/ProfilePicker.tsx

@@ -245,6 +245,8 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
     host.toggle(id)
   }
   const triggerLabel = (selectedProfile?.name ?? guestLabel).toUpperCase()
+  // Shown on the list page only (see the footer below).
+  const manageFooter = !!onManage && !(colorSection && colorPage)
 
   return (
     <View style={[styles.anchor, open && styles.anchorOpen]} onLayout={handleAnchorLayout}>
@@ -278,7 +280,7 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
           ]}
         >
           {/* Keyed by page, so swapping pages starts the new one scrolled to its top. */}
-          <FadingScrollView key={colorSection && colorPage ? 'color' : 'list'} contentContainerStyle={styles.menuContent} showsVerticalScrollIndicator={false}>
+          <FadingScrollView key={colorSection && colorPage ? 'color' : 'list'} contentContainerStyle={[styles.menuContent, manageFooter && styles.menuContentAboveFooter]} showsVerticalScrollIndicator={false}>
             {colorSection && colorPage ? (
               <ColorPage section={colorSection} profileColor={selectedProfile?.color} fg={fg} onBack={() => setColorPage(false)} />
             ) : (
@@ -327,25 +329,27 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
                     </TouchableRipple>
                   )
                 })}
-
-                {onManage && (
-                  <>
-                    <View style={[styles.divider, { backgroundColor: color }]} />
-                    {/* Tertiary - a navigation action, not another selectable identity in the list above
-                    it, so it reads more like @tastic/hud's SectionedDropdown All/Clear footer button
-                    (centered, bold) than a normal row. The accent is on the icon only: a muted accent
-                    label on the menu's black read dim, almost disabled (2026-10-16). */}
-                    <TouchableRipple onPress={handleManage} style={styles.row}>
-                      <View style={styles.manageRowInner}>
-                        <Icon source='account-cog-outline' size={16} color={color} />
-                        <Text style={[styles.manageLabel, { color: fg }]}>Manage</Text>
-                      </View>
-                    </TouchableRipple>
-                  </>
-                )}
               </>
             )}
           </FadingScrollView>
+          {/* Manage is pinned below the scrolling rows, the way a dialog's Done sits below its rows:
+          always reachable, with the rows fading out above its divider while there are more below
+          (2026-10-16; it used to be the list's last row and scrolled away with it). Tertiary - a
+          navigation action, not another selectable identity in the list above it, so it reads more
+          like @tastic/hud's SectionedDropdown All/Clear footer button (centered, bold) than a normal
+          row. The accent is on the icon only: a muted accent label on the menu's black read dim,
+          almost disabled. Not on the color page, which only has the back row and the swatches. */}
+          {manageFooter && (
+            <View style={styles.menuFooter}>
+              <View style={[styles.divider, { backgroundColor: color }]} />
+              <TouchableRipple onPress={handleManage} style={styles.row}>
+                <View style={styles.manageRowInner}>
+                  <Icon source='account-cog-outline' size={16} color={color} />
+                  <Text style={[styles.manageLabel, { color: fg }]}>Manage</Text>
+                </View>
+              </TouchableRipple>
+            </View>
+          )}
         </View>
       </PopoverBody>
     </View>
@@ -509,6 +513,14 @@ const styles = StyleSheet.create({
   menuContent: {
     padding: LIST_PADDING
   },
+  // With Manage pinned below, its own padding takes the bottom edge (same total height as before).
+  menuContentAboveFooter: {
+    paddingBottom: 0
+  },
+  menuFooter: {
+    paddingBottom: LIST_PADDING,
+    paddingHorizontal: LIST_PADDING
+  },
   // The selected profile's own color (see ColorSection).
   profileDot: {
     borderRadius: 4,