@tastic/profile 0.3.7 → 0.3.8

package/dist/index.d.mts

@@ -35,6 +35,7 @@ interface ProfilePickerProps<P extends Profile> {
 }
 declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: alignOverride, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
 
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
     name: string;
     color: string;
@@ -51,8 +52,13 @@ interface ProfilesManagerProps {
     onDelete: (id: string) => void;
     headerLeft?: ReactNode;
     ref?: Ref<ProfilesManagerHandle>;
+    fg?: string;
+    fgMuted?: string;
+    cardBg?: string;
+    titleVariant?: MD3TextVariant;
+    colorPreview?: (hex: string) => string;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview }: ProfilesManagerProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;

package/dist/index.d.ts

@@ -35,6 +35,7 @@ interface ProfilePickerProps<P extends Profile> {
 }
 declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: alignOverride, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
 
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
     name: string;
     color: string;
@@ -51,8 +52,13 @@ interface ProfilesManagerProps {
     onDelete: (id: string) => void;
     headerLeft?: ReactNode;
     ref?: Ref<ProfilesManagerHandle>;
+    fg?: string;
+    fgMuted?: string;
+    cardBg?: string;
+    titleVariant?: MD3TextVariant;
+    colorPreview?: (hex: string) => string;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview }: ProfilesManagerProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;

package/dist/index.js

@@ -287,14 +287,14 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview }) {
   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 fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const cardBg = cardBgOverride ?? (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";
@@ -363,7 +363,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   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_native_paper3.Text, { variant: titleVariant, 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") {
@@ -373,11 +373,11 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark }, "new");
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview }, "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, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark }, profile.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview }, 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 }),
@@ -397,7 +397,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     ] }) }) })
   ] });
 }
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview }) {
   const register = (0, import_focus_chain.useFocusChain)();
   const tag = register();
   const name = register();
@@ -409,7 +409,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, tag: draftTag, dark }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
@@ -432,6 +432,15 @@ var styles3 = import_react_native3.StyleSheet.create({
     gap: 4,
     paddingBottom: 8
   },
+  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
+  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
+  hiddenTagInput: {
+    height: 1,
+    opacity: 0,
+    position: "absolute",
+    width: 1
+  },
   iconButton: {
     alignItems: "center",
     borderRadius: 8,
@@ -493,15 +502,6 @@ var styles3 = import_react_native3.StyleSheet.create({
   scrollView: {
     flex: 1
   },
-  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
-  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
-  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
-  hiddenTagInput: {
-    height: 1,
-    opacity: 0,
-    position: "absolute",
-    width: 1
-  },
   title: {
     flexShrink: 1,
     fontWeight: "bold"

package/dist/index.mjs

@@ -259,14 +259,14 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview }) {
   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 fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const cardBg = cardBgOverride ?? (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";
@@ -335,7 +335,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   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(Text3, { variant: titleVariant, 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") {
@@ -345,11 +345,11 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
             /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: { color: fg }, children: "New Profile" })
           ] }) }, "new");
         }
-        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark }, "new");
+        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview }, "new");
       }
       const { profile } = row;
       if (editingId === profile.id) {
-        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark }, profile.id);
+        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, onDelete: () => setConfirmDeleteId(profile.id), fgMuted, host, dark, colorPreview }, 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 }),
@@ -369,7 +369,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     ] }) }) })
   ] });
 }
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview }) {
   const register = useFocusChain();
   const tag = register();
   const name = register();
@@ -381,7 +381,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
     if (host.openId === "color") tagFocusRef.current();
   }, [host.openId]);
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
-    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, tag: draftTag, dark }),
+    /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, tag: draftTag, dark }),
     /* @__PURE__ */ jsx3(TextInput, { ref: tag.ref, ...tag.props, value: draftTag, onChangeText: onTagChange, accessibilityLabel: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, returnKeyType: "next", style: styles3.hiddenTagInput, pointerEvents: "none" }),
     /* @__PURE__ */ jsx3(TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx3(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
@@ -404,6 +404,15 @@ var styles3 = StyleSheet3.create({
     gap: 4,
     paddingBottom: 8
   },
+  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
+  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
+  hiddenTagInput: {
+    height: 1,
+    opacity: 0,
+    position: "absolute",
+    width: 1
+  },
   iconButton: {
     alignItems: "center",
     borderRadius: 8,
@@ -465,15 +474,6 @@ var styles3 = StyleSheet3.create({
   scrollView: {
     flex: 1
   },
-  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
-  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
-  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
-  hiddenTagInput: {
-    height: 1,
-    opacity: 0,
-    position: "absolute",
-    width: 1
-  },
   title: {
     flexShrink: 1,
     fontWeight: "bold"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "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",
@@ -62,15 +62,15 @@
   },
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@infinitetoken/eslint-config": "^0.1.8",
-    "@infinitetoken/jest-config": "^0.2.1",
-    "@infinitetoken/tsconfig": "^0.3.0",
+    "@infinitetoken/eslint-config": "0.2.0",
+    "@infinitetoken/jest-config": "^0.2.4",
+    "@infinitetoken/tsconfig": "^0.4.1",
     "@rific/auto-paper": "^0.10.3",
     "@rific/feedback-press": "^0.10.8",
     "@rific/focus-chain": "^0.4.7",
     "@rific/toaster": "^0.6.3",
-    "@tastic/core": "^0.1.5",
-    "@tastic/hud": "^0.1.6",
+    "@tastic/core": "^0.2.0",
+    "@tastic/hud": "^0.6.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/src/ProfilesManager.tsx

@@ -16,6 +16,11 @@ import { Profile } from './types'
 // size for every circle on this screen, rather than each picking its own.
 const CHIP_SIZE = 40
 
+// react-native-paper's own MD3 Text variant names — mirrored locally rather than importing its
+// internal VariantProp/MD3TypescaleKey (not exported from the package's public entry point), same
+// as @tastic/hud's BaseStatsScreen does for its own identical titleVariant prop.
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
+
 interface ProfileEditPatch {
   name: string
   color: string
@@ -52,6 +57,25 @@ export interface ProfilesManagerProps {
   // React 19 accepts `ref` as a plain prop on a function component (no forwardRef needed) — see
   // ProfilesManagerHandle's own doc for why a host may need this.
   ref?: Ref<ProfilesManagerHandle>
+  // Independently optional overrides for this screen's text/card colors — each defaults to the same
+  // literal-black/white-by-appearance formula as before when omitted, so every existing caller
+  // (none of which pass these) renders identically to before. Same convention as @tastic/hud's
+  // BaseStatsScreen fg/cardBg overrides, for a caller with its own app-wide chrome palette instead
+  // of that literal black/white convention. cardBorder/cancelBg/cancelFg have no override, matching
+  // BaseStatsScreen's identical reasoning for cardBorder: their low-alpha/neutral values already
+  // read fine against any cardBg, and (for Cancel specifically) are deliberately neutral rather than
+  // theme-derived so a host's own live gameplay/seat color can't land there by coincidence.
+  fg?: string
+  fgMuted?: string
+  cardBg?: string
+  // 'headlineSmall' (this screen's own default, below), matching BaseStatsScreen's own settled
+  // default and the reasoning behind it — this title sits next to a small headerLeft back-button
+  // glyph the same way, and the previous hardcoded 'displaySmall' read as oversized there too.
+  titleVariant?: MD3TextVariant
+  // Transforms the color swatch grid's own preview per-swatch — forwarded straight to the internal
+  // InlineColorPicker's identical prop (see its own doc). Leaves draftColor/onCreate/onSave's actual
+  // color value untouched; only what's rendered changes.
+  colorPreview?: (hex: string) => string
 }
 
 type Row = { kind: 'profile'; profile: Profile } | { kind: 'new' }
@@ -74,16 +98,16 @@ function deriveTag(name: string): string {
 // really unmounts it on a given host's router — see ProfilesManagerHandle's own doc for the
 // react-navigation-web case where it doesn't, and why a host there needs the `ref` escape hatch
 // instead of relying on the unmount fallback alone.
-export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps) {
+export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = 'headlineSmall', colorPreview }: ProfilesManagerProps) {
   const { dark, colors } = useAutoPaperTheme()
   const insets = useSafeAreaInsets()
   const { error: showErrorToast } = useToast()
   // Only one row is ever in edit mode at a time (see commitEdit, called before any new row opens),
   // so every EditRow instance can safely share this one host instead of each needing its own.
   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 fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
+  const cardBg = cardBgOverride ?? (dark ? '#111111' : '#F2F2F2')
   const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
   // A contained neutral, not an outlined one — reads as "the other button" next to Delete's solid
   // danger fill, rather than looking unfinished/secondary beside it.
@@ -198,7 +222,7 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
     <>
       <View style={[styles.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }]}>
         {headerLeft}
-        <Text variant='displaySmall' style={[styles.title, { color: fg }]}>
+        <Text variant={titleVariant} style={[styles.title, { color: fg }]}>
           Profiles
         </Text>
       </View>
@@ -226,12 +250,12 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
                   </TouchableRipple>
                 )
               }
-              return <EditRow key='new' draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} autoFocus fgMuted={fgMuted} host={host} dark={dark} />
+              return <EditRow key='new' draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} autoFocus fgMuted={fgMuted} host={host} dark={dark} colorPreview={colorPreview} />
             }
 
             const { profile } = row
             if (editingId === profile.id) {
-              return <EditRow key={profile.id} draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} onDelete={() => setConfirmDeleteId(profile.id)} fgMuted={fgMuted} host={host} dark={dark} />
+              return <EditRow key={profile.id} draftName={draftName} onNameChange={handleNameChange} draftColor={draftColor} onColorChange={setDraftColor} draftTag={draftTag} onTagChange={handleTagChange} onSubmit={commitEdit} onDelete={() => setConfirmDeleteId(profile.id)} fgMuted={fgMuted} host={host} dark={dark} colorPreview={colorPreview} />
             }
 
             // No delete affordance at rest — tap the row to start editing, which is the one place
@@ -295,6 +319,7 @@ interface EditRowProps {
   fgMuted: string
   host: PopoverHost
   dark: boolean
+  colorPreview?: (hex: string) => string
 }
 
 // One row, expanded: the color trigger (@tastic/hud's InlineColorPicker) — doubling as the tag's
@@ -309,7 +334,7 @@ interface EditRowProps {
 // own — submitting the *name* field is what actually commits the row, so its registration's own
 // onSubmitEditing (a no-op — it's last in the chain) is overridden with onSubmit below, matching
 // how a normal multi-field form reads: fill fields in order, the last one finishes it.
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark }: EditRowProps) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview }: EditRowProps) {
   const register = useFocusChain()
   const tag = register()
   const name = register()
@@ -336,7 +361,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
 
   return (
     <View style={styles.editRow}>
-      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} tag={draftTag} dark={dark} />
+      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} />
       {/* Invisible on purpose (styles.hiddenTagInput: zero footprint, position: 'absolute' so it
       doesn't reserve space in the row's own flex layout) — the swatch above is the only place this
       value is ever meant to be seen. pointerEvents='none' is what actually keeps it out of the
@@ -380,6 +405,15 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingBottom: 8
   },
+  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
+  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
+  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
+  hiddenTagInput: {
+    height: 1,
+    opacity: 0,
+    position: 'absolute',
+    width: 1
+  },
   iconButton: {
     alignItems: 'center',
     borderRadius: 8,
@@ -441,15 +475,6 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1
   },
-  // 1x1 and fully transparent — there's nothing to see here on purpose (see EditRow's own comment
-  // above the field this styles). position: 'absolute' pulls it out of editRow's flex flow
-  // entirely, so it doesn't reserve a gap in the row the way a normal flex sibling would.
-  hiddenTagInput: {
-    height: 1,
-    opacity: 0,
-    position: 'absolute',
-    width: 1
-  },
   title: {
     flexShrink: 1,
     fontWeight: 'bold'