@tastic/profile 0.17.0 → 0.18.0

package/dist/index.d.mts

@@ -31,8 +31,9 @@ interface OptionPickerOption<T extends string> {
     label: string;
     icon?: string;
     color?: string;
+    dividerBefore?: boolean;
 }
-declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
+declare function getOptionPickerContentSize(options: number | readonly OptionPickerOption<string>[], colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
     id: string;
     host: PopoverHost;

package/dist/index.d.ts

@@ -31,8 +31,9 @@ interface OptionPickerOption<T extends string> {
     label: string;
     icon?: string;
     color?: string;
+    dividerBefore?: boolean;
 }
-declare function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
+declare function getOptionPickerContentSize(options: number | readonly OptionPickerOption<string>[], colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface OptionPickerProps<T extends string> {
     id: string;
     host: PopoverHost;

package/dist/index.js

@@ -53,6 +53,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/OptionPicker.tsx
+var import_react3 = require("react");
+
 // src/PickerMenu.tsx
 var import_auto_paper2 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
@@ -151,7 +154,7 @@ var COLOR_ROW_SWATCH_SIZE = 22;
 var COLOR_ROW_CAPTIONED_HEIGHT = 48;
 var COLOR_LABEL_LINE = 18;
 var COLOR_CAPTION_LINE = 16;
-var COLOR_ROW_DIVIDER = 9;
+var DIVIDER_HEIGHT = 9;
 var GRID_TOP = 4;
 var GRID_BOTTOM = 8;
 var GRID_WIDTH = POPOVER_WIDTH - 2 * MENU_BORDER_WIDTH - 2 * LIST_PADDING - 2 * ROW_INSET;
@@ -164,8 +167,8 @@ function colorPageHeight(swatches) {
   const rows = Math.ceil(swatches.length / GRID_COLUMNS);
   return ROW_HEIGHT + GRID_TOP + rows * SWATCH_SIZE + (rows - 1) * GRID_GAP + GRID_BOTTOM;
 }
-function pickerContentSize(rowCount, colorSection) {
-  const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0);
+function pickerContentSize(rowCount, colorSection, dividerCount = 0) {
+  const list = rowCount * ROW_HEIGHT + dividerCount * DIVIDER_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + DIVIDER_HEIGHT : 0);
   const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? import_auto_paper2.defaultColors)) : list;
   return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content };
 }
@@ -216,7 +219,7 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
             children
           ] }) }, showColorPage ? "color" : "list"),
           showFooter && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: styles3.menuFooter, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuDivider, { color }),
             footer
           ] })
         ]
@@ -245,9 +248,12 @@ function ColorRow({ section, fg, dividerColor, onPress }) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "chevron-right", size: 18, color: fg })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.divider, { backgroundColor: dividerColor }] })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuDivider, { color: dividerColor })
   ] });
 }
+function MenuDivider({ color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.divider, { backgroundColor: color }] });
+}
 function ColorPage({ section, homeColor, fg, onBack }) {
   const { value, onChange, previewValue, swatches = import_auto_paper2.defaultColors, label = "Color", takenValue, allowSwapTaken } = section;
   const renderSwatch = useProfileSwatchRenderer();
@@ -339,7 +345,8 @@ var styles3 = import_react_native3.StyleSheet.create({
     flex: 1
   },
   // Separates the footer (a navigation action) and the Color row from the selectable rows - a
-  // different kind of action, not just another row in the same list. Tinted with the seat's own color
+  // different kind of action, not just another row in the same list - and an OptionPicker's groups
+  // of options from each other (its `dividerBefore`). 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: {
@@ -447,8 +454,12 @@ var styles3 = import_react_native3.StyleSheet.create({
 
 // src/OptionPicker.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function getOptionPickerContentSize(optionCount, colorSection) {
-  return pickerContentSize(optionCount, colorSection);
+function hasDividerBefore(option, index) {
+  return index > 0 && !!option.dividerBefore;
+}
+function getOptionPickerContentSize(options, colorSection) {
+  if (typeof options === "number") return pickerContentSize(options, colorSection);
+  return pickerContentSize(options.length, colorSection, options.filter(hasDividerBefore).length);
 }
 function OptionPicker({ id, host, options, value, onChange, color, dark, icon, rowIcon = icon, colorSection, align, alignOverride, rotation = 0, triggerStyle }) {
   const fg = dark ? "#FFFFFF" : "#000000";
@@ -457,7 +468,10 @@ function OptionPicker({ id, host, options, value, onChange, color, dark, icon, r
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react3.Fragment, { children: [
+    hasDividerBefore(option, index) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuDivider, { color }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) })
+  ] }, option.value)) });
 }
 
 // src/ProfileChip.tsx
@@ -470,7 +484,7 @@ function ProfileChip({ profile, size = 22, filled = true }) {
 // src/ProfilePicker.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_native4 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -482,7 +496,7 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, takenIds
   const colorPreview = useProfileColorPreview();
   const fg = dark ? "#FFFFFF" : "#000000";
   const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
-  const sortedProfiles = (0, import_react3.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const sortedProfiles = (0, import_react4.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const contentSize = getProfilePickerContentSize(profiles.length, !!onManage, colorSection);
   const isTaken = (profileId) => profileId === takenId || profileId !== selectedId && !!takenIds?.includes(profileId);
   const handleSelectGuest = () => {
@@ -550,7 +564,7 @@ var import_feedback_press3 = require("@rific/feedback-press");
 var import_focus_chain = require("@rific/focus-chain");
 var import_toaster = require("@rific/toaster");
 var import_chrome2 = require("@tastic/hud/chrome");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_native5 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
@@ -601,18 +615,18 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
-  const columnRef = (0, import_react4.useRef)(null);
+  const columnRef = (0, import_react5.useRef)(null);
   const renderSwatch = useProfileSwatchRenderer();
   const host = (0, import_chrome2.usePopoverHost)();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  const [editingId, setEditingId] = (0, import_react4.useState)(null);
-  const [draftName, setDraftName] = (0, import_react4.useState)("");
-  const [draftColor, setDraftColor] = (0, import_react4.useState)(defaultColor);
-  const [draftTag, setDraftTag] = (0, import_react4.useState)("");
-  const [tagManuallySet, setTagManuallySet] = (0, import_react4.useState)(false);
-  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react4.useState)(null);
-  const commitEdit = (0, import_react4.useCallback)(() => {
+  const [editingId, setEditingId] = (0, import_react5.useState)(null);
+  const [draftName, setDraftName] = (0, import_react5.useState)("");
+  const [draftColor, setDraftColor] = (0, import_react5.useState)(defaultColor);
+  const [draftTag, setDraftTag] = (0, import_react5.useState)("");
+  const [tagManuallySet, setTagManuallySet] = (0, import_react5.useState)(false);
+  const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
+  const commitEdit = (0, import_react5.useCallback)(() => {
     const name = draftName.trim();
     if (editingId && name) {
       const tagValid = isValidTag(draftTag);
@@ -623,13 +637,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     }
     setEditingId(null);
   }, [editingId, draftName, draftColor, draftTag, onCreate, onSave, showErrorToast]);
-  const commitEditRef = (0, import_react4.useRef)(commitEdit);
-  (0, import_react4.useEffect)(() => {
+  const commitEditRef = (0, import_react5.useRef)(commitEdit);
+  (0, import_react5.useEffect)(() => {
     commitEditRef.current = commitEdit;
   });
-  (0, import_react4.useEffect)(() => () => commitEditRef.current(), []);
-  (0, import_react4.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
-  const startEdit = (0, import_react4.useCallback)(
+  (0, import_react5.useEffect)(() => () => commitEditRef.current(), []);
+  (0, import_react5.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
+  const startEdit = (0, import_react5.useCallback)(
     (target) => {
       commitEdit();
       if (target === "new") {
@@ -647,26 +661,26 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     },
     [commitEdit, defaultColor]
   );
-  const handleNameChange = (0, import_react4.useCallback)(
+  const handleNameChange = (0, import_react5.useCallback)(
     (name) => {
       setDraftName(name);
       if (!tagManuallySet) setDraftTag(deriveTag(name));
     },
     [tagManuallySet]
   );
-  const handleTagChange = (0, import_react4.useCallback)((tag) => {
+  const handleTagChange = (0, import_react5.useCallback)((tag) => {
     setDraftTag((previous) => clampTag(previous, tag));
     setTagManuallySet(true);
   }, []);
   const confirmDeleteProfile = profiles.find((p) => p.id === confirmDeleteId) ?? null;
-  const handleConfirmDelete = (0, import_react4.useCallback)(() => {
+  const handleConfirmDelete = (0, import_react5.useCallback)(() => {
     if (confirmDeleteId) {
       onDelete(confirmDeleteId);
       if (editingId === confirmDeleteId) setEditingId(null);
     }
     setConfirmDeleteId(null);
   }, [confirmDeleteId, editingId, onDelete]);
-  const sortedProfiles = (0, import_react4.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
+  const sortedProfiles = (0, import_react5.useMemo)(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: [styles5.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
@@ -702,15 +716,15 @@ function AlignedColorPicker({ useAlign, column, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_chrome2.InlineColorPicker, { ...props, alignOverride });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign, column, renderSwatch }) {
-  const pickerSwatch = (0, import_react4.useMemo)(() => renderSwatch ? (color, size, place) => renderSwatch(color, size, place === "trigger" ? "chip" : "colorPage") : void 0, [renderSwatch]);
+  const pickerSwatch = (0, import_react5.useMemo)(() => renderSwatch ? (color, size, place) => renderSwatch(color, size, place === "trigger" ? "chip" : "colorPage") : void 0, [renderSwatch]);
   const register = (0, import_focus_chain.useFocusChain)();
   const tag = register();
   const name = register();
-  const tagFocusRef = (0, import_react4.useRef)(tag.props.focus);
-  (0, import_react4.useEffect)(() => {
+  const tagFocusRef = (0, import_react5.useRef)(tag.props.focus);
+  (0, import_react5.useEffect)(() => {
     tagFocusRef.current = tag.props.focus;
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.editRow, children: [
@@ -805,12 +819,12 @@ var styles5 = import_react_native5.StyleSheet.create({
 // src/ProfilesScreen.tsx
 var import_auto_paper5 = require("@rific/auto-paper");
 var import_feedback_press4 = require("@rific/feedback-press");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_native6 = require("react-native");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = (0, import_auto_paper5.useAutoPaperTheme)();
-  const managerRef = (0, import_react5.useRef)(null);
+  const managerRef = (0, import_react6.useRef)(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
   const handleBack = () => {
@@ -1102,15 +1116,15 @@ function createSeatColorsSlice(namespace, defaultState, mountKey = "seatColors")
 }
 
 // src/redux/useSharedProfilesSync.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_native8 = require("react-native");
 function useSharedProfilesSync({ groupId, onRemoteChange }) {
-  const pendingWriteRef = (0, import_react6.useRef)(false);
-  const onRemoteChangeRef = (0, import_react6.useRef)(onRemoteChange);
-  (0, import_react6.useEffect)(() => {
+  const pendingWriteRef = (0, import_react7.useRef)(false);
+  const onRemoteChangeRef = (0, import_react7.useRef)(onRemoteChange);
+  (0, import_react7.useEffect)(() => {
     onRemoteChangeRef.current = onRemoteChange;
   }, [onRemoteChange]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isSharedProfileStoreAvailable) return;
     let cancelled = false;
     const sub = import_react_native8.AppState.addEventListener("change", (next) => {
@@ -1128,7 +1142,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
       unsubscribe();
     };
   }, [groupId]);
-  const syncToShared = (0, import_react6.useCallback)(
+  const syncToShared = (0, import_react7.useCallback)(
     (next) => {
       if (!isSharedProfileStoreAvailable) return;
       pendingWriteRef.current = true;

package/dist/index.mjs

@@ -5,6 +5,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
+// src/OptionPicker.tsx
+import { Fragment as Fragment2 } from "react";
+
 // src/PickerMenu.tsx
 import { defaultColors, FadingScrollView, getContrastColor as getContrastColor2 } from "@rific/auto-paper";
 import { TouchableRipple } from "@rific/feedback-press";
@@ -103,7 +106,7 @@ var COLOR_ROW_SWATCH_SIZE = 22;
 var COLOR_ROW_CAPTIONED_HEIGHT = 48;
 var COLOR_LABEL_LINE = 18;
 var COLOR_CAPTION_LINE = 16;
-var COLOR_ROW_DIVIDER = 9;
+var DIVIDER_HEIGHT = 9;
 var GRID_TOP = 4;
 var GRID_BOTTOM = 8;
 var GRID_WIDTH = POPOVER_WIDTH - 2 * MENU_BORDER_WIDTH - 2 * LIST_PADDING - 2 * ROW_INSET;
@@ -116,8 +119,8 @@ function colorPageHeight(swatches) {
   const rows = Math.ceil(swatches.length / GRID_COLUMNS);
   return ROW_HEIGHT + GRID_TOP + rows * SWATCH_SIZE + (rows - 1) * GRID_GAP + GRID_BOTTOM;
 }
-function pickerContentSize(rowCount, colorSection) {
-  const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0);
+function pickerContentSize(rowCount, colorSection, dividerCount = 0) {
+  const list = rowCount * ROW_HEIGHT + dividerCount * DIVIDER_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + DIVIDER_HEIGHT : 0);
   const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? defaultColors)) : list;
   return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content };
 }
@@ -168,7 +171,7 @@ function PickerMenu({ id, host, color, dark, label, chip, colorSection, homeColo
             children
           ] }) }, showColorPage ? "color" : "list"),
           showFooter && /* @__PURE__ */ jsxs2(View3, { style: styles3.menuFooter, children: [
-            /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: color }] }),
+            /* @__PURE__ */ jsx4(MenuDivider, { color }),
             footer
           ] })
         ]
@@ -197,9 +200,12 @@ function ColorRow({ section, fg, dividerColor, onPress }) {
       ] }),
       /* @__PURE__ */ jsx4(Icon2, { source: "chevron-right", size: 18, color: fg })
     ] }) }),
-    /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: dividerColor }] })
+    /* @__PURE__ */ jsx4(MenuDivider, { color: dividerColor })
   ] });
 }
+function MenuDivider({ color }) {
+  return /* @__PURE__ */ jsx4(View3, { style: [styles3.divider, { backgroundColor: color }] });
+}
 function ColorPage({ section, homeColor, fg, onBack }) {
   const { value, onChange, previewValue, swatches = defaultColors, label = "Color", takenValue, allowSwapTaken } = section;
   const renderSwatch = useProfileSwatchRenderer();
@@ -291,7 +297,8 @@ var styles3 = StyleSheet3.create({
     flex: 1
   },
   // Separates the footer (a navigation action) and the Color row from the selectable rows - a
-  // different kind of action, not just another row in the same list. Tinted with the seat's own color
+  // different kind of action, not just another row in the same list - and an OptionPicker's groups
+  // of options from each other (its `dividerBefore`). 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: {
@@ -398,9 +405,13 @@ var styles3 = StyleSheet3.create({
 });
 
 // src/OptionPicker.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function getOptionPickerContentSize(optionCount, colorSection) {
-  return pickerContentSize(optionCount, colorSection);
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function hasDividerBefore(option, index) {
+  return index > 0 && !!option.dividerBefore;
+}
+function getOptionPickerContentSize(options, colorSection) {
+  if (typeof options === "number") return pickerContentSize(options, colorSection);
+  return pickerContentSize(options.length, colorSection, options.filter(hasDividerBefore).length);
 }
 function OptionPicker({ id, host, options, value, onChange, color, dark, icon, rowIcon = icon, colorSection, align, alignOverride, rotation = 0, triggerStyle }) {
   const fg = dark ? "#FFFFFF" : "#000000";
@@ -409,7 +420,10 @@ function OptionPicker({ id, host, options, value, onChange, color, dark, icon, r
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options.length, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option) => /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) }, option.value)) });
+  return /* @__PURE__ */ jsx5(PickerMenu, { id, host, color, dark, label: selected?.label ?? "", chip: { icon }, colorSection, contentSize: getOptionPickerContentSize(options, colorSection), align, alignOverride, rotation, triggerStyle, children: options.map((option, index) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    hasDividerBefore(option, index) && /* @__PURE__ */ jsx5(MenuDivider, { color }),
+    /* @__PURE__ */ jsx5(IconRow, { icon: option.icon ?? rowIcon, iconColor: option.color, label: option.label, selected: option.value === value, color, fg, onPress: () => handleSelect(option) })
+  ] }, option.value)) });
 }
 
 // src/ProfileChip.tsx
@@ -425,7 +439,7 @@ import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useMemo as useMemo2 } from "react";
 import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
 import { Icon as Icon3, Text as Text3 } from "react-native-paper";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function getProfilePickerContentSize(profileCount, hasManageRow = false, colorSection) {
   return pickerContentSize(profileCount + 1 + (hasManageRow ? 1 : 0), colorSection);
 }
@@ -450,17 +464,17 @@ function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, takenIds
     host.close();
     onManage?.();
   };
-  const manageFooter = onManage ? /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: handleManage, style: pickerMenuStyles.row, children: /* @__PURE__ */ jsxs3(View4, { style: styles4.manageRowInner, children: [
+  const manageFooter = onManage ? /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: handleManage, style: pickerMenuStyles.row, children: /* @__PURE__ */ jsxs4(View4, { style: styles4.manageRowInner, children: [
     /* @__PURE__ */ jsx7(Icon3, { source: "account-cog-outline", size: 16, color }),
     /* @__PURE__ */ jsx7(Text3, { style: [styles4.manageLabel, { color: fg }], children: "Manage" })
   ] }) }) : void 0;
-  return /* @__PURE__ */ jsxs3(PickerMenu, { id, host, color, dark, label: selectedProfile?.name ?? guestLabel, chip: colorSection ? { tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon } : void 0, colorSection, homeColor: selectedProfile?.color, contentSize, align, alignOverride, rotation, triggerStyle, footer: manageFooter, children: [
+  return /* @__PURE__ */ jsxs4(PickerMenu, { id, host, color, dark, label: selectedProfile?.name ?? guestLabel, chip: colorSection ? { tag: selectedProfile?.tag, icon: selectedProfile ? "account" : nullIcon } : void 0, colorSection, homeColor: selectedProfile?.color, contentSize, align, alignOverride, rotation, triggerStyle, footer: manageFooter, children: [
     /* @__PURE__ */ jsx7(IconRow, { icon: nullIcon, label: nullLabel, selected: selectedId === null, color, fg, onPress: handleSelectGuest }),
     sortedProfiles.map((profile) => {
       const taken = isTaken(profile.id);
       const selected = selectedId === profile.id;
       const rowColor = colorPreview ? colorPreview(profile.color) : profile.color;
-      return /* @__PURE__ */ jsx7(TouchableRipple2, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [pickerMenuStyles.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs3(View4, { style: [pickerMenuStyles.rowInner, taken && pickerMenuStyles.rowDisabled], children: [
+      return /* @__PURE__ */ jsx7(TouchableRipple2, { disabled: taken, onPress: () => handleSelectExisting(profile), style: [pickerMenuStyles.row, selected && { backgroundColor: rowColor }], children: /* @__PURE__ */ jsxs4(View4, { style: [pickerMenuStyles.rowInner, taken && pickerMenuStyles.rowDisabled], children: [
         /* @__PURE__ */ jsx7(ProfileChip, { profile, filled: !selected }),
         /* @__PURE__ */ jsx7(
           Text3,
@@ -540,7 +554,7 @@ function isValidProfile(value) {
 }
 
 // src/ProfilesManager.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var CHIP_SIZE2 = 40;
 var textInputRef = (ref) => ref;
 function deriveTag(name) {
@@ -620,15 +634,15 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   }, [confirmDeleteId, editingId, onDelete]);
   const sortedProfiles = useMemo3(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
   const rows = [...sortedProfiles.map((profile) => ({ kind: "profile", profile })), { kind: "new" }];
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsxs4(View5, { style: [styles5.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsxs5(View5, { style: [styles5.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
       headerLeft,
       /* @__PURE__ */ jsx8(Text4, { variant: titleVariant, style: [styles5.title, { color: fg }], children: "Profiles" })
     ] }),
     /* @__PURE__ */ jsx8(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles5.keyboardAvoiding, children: /* @__PURE__ */ jsx8(View5, { ref: columnRef, collapsable: false, style: styles5.column, children: /* @__PURE__ */ jsx8(FadingScrollView2, { style: styles5.scrollView, contentContainerStyle: [styles5.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: rows.map((row) => {
       if (row.kind === "new") {
         if (editingId !== "new") {
-          return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit("new"), style: styles5.row, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.rowInner, children: [
+          return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit("new"), style: styles5.row, children: /* @__PURE__ */ jsxs5(View5, { style: styles5.rowInner, children: [
             /* @__PURE__ */ jsx8(View5, { style: [styles5.rowChip, styles5.newChip, { borderColor: fg }], children: /* @__PURE__ */ jsx8(Icon4, { source: "plus", size: 20, color: fg }) }),
             /* @__PURE__ */ jsx8(Text4, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
@@ -639,7 +653,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
       if (editingId === profile.id) {
         return /* @__PURE__ */ jsx8(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview, useColorPickerAlign, column: columnRef, renderSwatch }, profile.id);
       }
-      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit(profile), style: styles5.row, children: /* @__PURE__ */ jsxs4(View5, { style: styles5.rowInner, children: [
+      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => startEdit(profile), style: styles5.row, children: /* @__PURE__ */ jsxs5(View5, { style: styles5.rowInner, children: [
         /* @__PURE__ */ jsx8(ProfileChip, { profile, size: CHIP_SIZE2 }),
         /* @__PURE__ */ jsx8(Text4, { variant: "bodyLarge", style: [styles5.rowName, { color: fg }], numberOfLines: 1, children: profile.name })
       ] }) }, profile.id);
@@ -665,7 +679,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
   useEffect(() => {
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
-  return /* @__PURE__ */ jsxs4(View5, { style: styles5.editRow, children: [
+  return /* @__PURE__ */ jsxs5(View5, { style: styles5.editRow, children: [
     useColorPickerAlign ? /* @__PURE__ */ jsx8(AlignedColorPicker, { useAlign: useColorPickerAlign, column, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark, renderSwatch: pickerSwatch }) : /* @__PURE__ */ jsx8(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark, renderSwatch: pickerSwatch, bounds: column }),
     /* @__PURE__ */ jsx8(TextInput, { ref: textInputRef(tag.ref), ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles5.hiddenTagInput, pointerEvents: "none" }),
     /* @__PURE__ */ jsx8(TextInput, { ref: textInputRef(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: styles5.nameInput }),

package/package.json

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

package/src/OptionPicker.tsx

@@ -1,7 +1,8 @@
 import type { PopoverHost, PopoverRotation } from '@tastic/hud/chrome'
+import { Fragment } from 'react'
 import { type StyleProp, type ViewStyle } from 'react-native'
 
-import { IconRow, pickerContentSize, PickerMenu, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './PickerMenu'
+import { IconRow, MenuDivider, pickerContentSize, PickerMenu, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize } from './PickerMenu'
 
 export interface OptionPickerOption<T extends string> {
   value: T
@@ -11,14 +12,24 @@ export interface OptionPickerOption<T extends string> {
   // one; the selected row still fills with the picker's `color`, its icon contrasting as always.
   // Without it the icon takes the row's text color.
   color?: string
+  // A divider above this row, setting it and the rows after it apart from the ones before as a
+  // different kind of choice (a person after a CPU's levels). Ignored on the first option, which the
+  // Color row's own divider, or nothing, already sits above.
+  dividerBefore?: boolean
 }
 
-// The popover's content footprint: one row per option, plus (with a `colorSection`) the Color row,
-// or the color page if that's taller - the same formula as getProfilePickerContentSize, for a host
-// that places this picker itself through `alignOverride` (a @tastic/split-screen zone's
-// useZoneClampedAlign, for one).
-export function getOptionPickerContentSize(optionCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
-  return pickerContentSize(optionCount, colorSection)
+function hasDividerBefore(option: OptionPickerOption<string>, index: number): boolean {
+  return index > 0 && !!option.dividerBefore
+}
+
+// The popover's content footprint: one row per option and its dividers, plus (with a
+// `colorSection`) the Color row, or the color page if that's taller - the same formula as
+// getProfilePickerContentSize, for a host that places this picker itself through `alignOverride` (a
+// @tastic/split-screen zone's useZoneClampedAlign, for one). Given the options themselves it counts
+// their dividers too; given a count, rows only.
+export function getOptionPickerContentSize(options: number | readonly OptionPickerOption<string>[], colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
+  if (typeof options === 'number') return pickerContentSize(options, colorSection)
+  return pickerContentSize(options.length, colorSection, options.filter(hasDividerBefore).length)
 }
 
 interface OptionPickerProps<T extends string> {
@@ -61,9 +72,12 @@ export function OptionPicker<T extends string>({ id, host, options, value, onCha
   }
 
   return (
-    <PickerMenu id={id} host={host} color={color} dark={dark} label={selected?.label ?? ''} chip={{ icon }} colorSection={colorSection} contentSize={getOptionPickerContentSize(options.length, colorSection)} align={align} alignOverride={alignOverride} rotation={rotation} triggerStyle={triggerStyle}>
-      {options.map((option) => (
-        <IconRow key={option.value} icon={option.icon ?? rowIcon} iconColor={option.color} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
+    <PickerMenu id={id} host={host} color={color} dark={dark} label={selected?.label ?? ''} chip={{ icon }} colorSection={colorSection} contentSize={getOptionPickerContentSize(options, colorSection)} align={align} alignOverride={alignOverride} rotation={rotation} triggerStyle={triggerStyle}>
+      {options.map((option, index) => (
+        <Fragment key={option.value}>
+          {hasDividerBefore(option, index) && <MenuDivider color={color} />}
+          <IconRow icon={option.icon ?? rowIcon} iconColor={option.color} label={option.label} selected={option.value === value} color={color} fg={fg} onPress={() => handleSelect(option)} />
+        </Fragment>
       ))}
     </PickerMenu>
   )

package/src/PickerMenu.tsx

@@ -49,8 +49,9 @@ const COLOR_ROW_SWATCH_SIZE = 22
 const COLOR_ROW_CAPTIONED_HEIGHT = 48
 const COLOR_LABEL_LINE = 18
 const COLOR_CAPTION_LINE = 16
-// The divider under the Color row: 1pt plus 4pt above and below, the same as the Manage divider.
-const COLOR_ROW_DIVIDER = 9
+// Every divider in the menu (under the Color row, over Manage, and between an OptionPicker's groups
+// of options): 1pt plus 4pt above and below.
+const DIVIDER_HEIGHT = 9
 // The color page: a back row, then the grid with this much space above and below it.
 const GRID_TOP = 4
 const GRID_BOTTOM = 8
@@ -115,10 +116,11 @@ function colorPageHeight(swatches: SeedColor[]) {
 // pages, exactly: the list with the Color row and its divider on top, or the color page (a back row
 // and the swatches), so one placement fits whichever page is showing. It leaves out the menu's 2pt
 // border and the Manage divider, ~13pt in all, so treat it as a placement estimate, not a
-// pixel-exact measurement. getProfilePickerContentSize and getOptionPickerContentSize count the
-// rows for their own picker.
-export function pickerContentSize(rowCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize {
-  const list = rowCount * ROW_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + COLOR_ROW_DIVIDER : 0)
+// pixel-exact measurement. `dividerCount` is the dividers between the rows (an OptionPicker's
+// `dividerBefore`). getProfilePickerContentSize and getOptionPickerContentSize count the rows for
+// their own picker.
+export function pickerContentSize(rowCount: number, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>, dividerCount = 0): ProfilePickerContentSize {
+  const list = rowCount * ROW_HEIGHT + dividerCount * DIVIDER_HEIGHT + (colorSection ? colorRowHeight(colorSection.caption) + DIVIDER_HEIGHT : 0)
   const content = colorSection ? Math.max(list, colorPageHeight(colorSection.swatches ?? defaultColors)) : list
   return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + content }
 }
@@ -242,7 +244,7 @@ export function PickerMenu({ id, host, color, dark, label, chip, colorSection, h
           below. Not on the color page, which only has the back row and the swatches. */}
           {showFooter && (
             <View style={styles.menuFooter}>
-              <View style={[styles.divider, { backgroundColor: color }]} />
+              <MenuDivider color={color} />
               {footer}
             </View>
           )}
@@ -315,11 +317,16 @@ function ColorRow({ section, fg, dividerColor, onPress }: { section: ProfilePick
           <Icon source='chevron-right' size={18} color={fg} />
         </View>
       </TouchableRipple>
-      <View style={[styles.divider, { backgroundColor: dividerColor }]} />
+      <MenuDivider color={dividerColor} />
     </>
   )
 }
 
+// A line across the list between kinds of rows (see `divider` below), in the seat's own color.
+export function MenuDivider({ color }: { color: string }) {
+  return <View style={[styles.divider, { backgroundColor: color }]} />
+}
+
 // The color page: a back row to the list, then the swatches. `homeColor` is the selected profile's
 // own color: its swatch carries a dot, so a player who has picked something else can find their way
 // back to it (the profile's row shows that color, but matching it to one of two similar swatches by
@@ -443,7 +450,8 @@ const styles = StyleSheet.create({
     flex: 1
   },
   // Separates the footer (a navigation action) and the Color row from the selectable rows - a
-  // different kind of action, not just another row in the same list. Tinted with the seat's own color
+  // different kind of action, not just another row in the same list - and an OptionPicker's groups
+  // of options from each other (its `dividerBefore`). 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: {