@tastic/profile 0.7.0 → 0.9.0

package/README.md

@@ -49,7 +49,11 @@ see its own doc comment for why that component is generic over your own `Profile
 - **`ProfilePicker`** — a name trigger + selection popover: pick an existing profile, fall back to a
   null/"guest" selection, or (if `onManage` is passed) navigate to a management screen. Selection
   only — creating, renaming, and deleting all live in `ProfilesManager`. Generic over your own
-  `Profile` type (see above).
+  `Profile` type (see above). Placement props (all optional, see "Fake-rotated frames" below):
+  `align` (force a horizontal side), `alignOverride` (substitute the whole placement result), and
+  `rotation` (forwarded to the automatic measurement). Also exports
+  `getProfilePickerContentSize(profileCount, hasManageRow?)` — the popover's
+  `{ width, height }`, for sizing your own placement hook.
 - **`ProfilesManager`** — the roster screen itself: create/rename/recolor/retag/delete, editing
   inline in the row you tap, with a destructive-delete confirmation. No navigation of its own (no
   router, no back button) — a host app renders this as a routed screen's body and supplies its own
@@ -98,6 +102,62 @@ see its own doc comment for why that component is generic over your own `Profile
   { "expo": { "ios": { "entitlements": { "com.apple.security.application-groups": ["group.com.yourteam.yourgames"] } } } }
   ```
 
+### Fake-rotated frames: `ProfilePicker` placement
+
+`ProfilePicker` positions its popover with `@tastic/hud`'s `useAutoAlign`, which measures the
+trigger with `measureInWindow` and compares that rect against the raw window. Inside a *fake*
+rotation (a `View` turned +-90deg while the OS stays portrait-locked) the rect is in true screen
+space but the frame is not, so the hook measures along the wrong axes and can pick the wrong side —
+flipping the list upward off-screen, or running it past the frame's bottom. Two optional props give
+you the same seam `@tastic/hud`'s `InlineColorPicker` has:
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `align` | `'left' \| 'right' \| 'center'` | — | Forces the horizontal side; always beats the placement's own `align`. |
+| `alignOverride` | `ProfilePickerAlignResult` (`{ align, verticalAlign, maxHeight, measured, triggerRef }`, the same shape as `useAutoAlign`'s return / `@tastic/hud`'s `AlignResult`) | — | Replaces the automatic placement wholesale: its `align`/`verticalAlign`/`maxHeight`/`measured` drive the popover, and its `triggerRef` is the ref attached to the measured trigger. |
+| `rotation` | `0 \| 90 \| -90 \| 180` | `0` | Forwarded to the automatic `useAutoAlign` call (needs `@tastic/hud` >= 0.8.0). Ignored when `alignOverride` is given. |
+
+With none of them set the picker behaves exactly as it always has. Note `rotation` is never read
+from an ambient provider here (unlike `@tastic/hud`'s own pickers) — this package doesn't touch
+`@tastic/core` at runtime — so pass it explicitly.
+
+To supply your own placement, run a rotation-aware placement hook against the popover's real size,
+using `getProfilePickerContentSize` so the two can't drift:
+
+```tsx
+const open = host.openId === `${idPrefix}-profile`
+const { width, height } = getProfilePickerContentSize(profiles.length, !!onManage)
+const placement = useMyRotatedAlign(open, width, height) // returns a ProfilePickerAlignResult
+
+<ProfilePicker idPrefix={idPrefix} host={host} profiles={profiles} /* ... */ alignOverride={placement} />
+```
+
+`getProfilePickerContentSize(profileCount, hasManageRow = false)` returns `{ width, height }`: 220
+wide, and `8 * 2 + (profileCount + 1 + (hasManageRow ? 1 : 0)) * 36` tall (the null/"guest" row, one
+row per profile, and the Manage row when `onManage` is passed).
+
+
+#### The Profiles screen's color swatch: `useColorPickerAlign`
+
+`ProfilesManager` (and `ProfilesScreen`, which forwards it) renders `@tastic/hud`'s `InlineColorPicker`
+for the swatch popover in an edit row, and owns the popover state internally — so the host cannot pass
+`alignOverride` to it directly. Inside a fake-rotated frame that popover has the same misplacement (and
+`InlineColorPicker` also feeds `useAutoAlign` its ambient rotation, double-rotating an already-transformed
+rect). Pass a placement **hook** as `useColorPickerAlign`:
+
+```tsx
+<ProfilesScreen useColorPickerAlign={useFrameAutoAlign} /* ...the usual props */ />
+```
+
+It is called as `useColorPickerAlign(open, contentWidth, contentHeight)` — `open` is whether the swatch
+popover is showing, and the size is what `InlineColorPicker` itself computes (`@tastic/hud`'s
+`getInlineColorPickerContentSize` for the default swatch list at the raw window width) — and must return a
+`ProfilePickerAlignResult`, which is handed to `InlineColorPicker` as its `alignOverride` (its `triggerRef`
+is the ref that gets measured). It is a hook, not a plain function: give it a stable identity for the life of
+the mount (a module-level function), since switching it at runtime remounts the swatch. Omit it and behaviour is
+identical to before. **Needs `@tastic/hud` >= 0.12.0** to have any effect — older hud has no `alignOverride`
+on `InlineColorPicker` and ignores it.
+
 ### Routed screens: `ProfilesScreen`
 
 `ProfilesScreen` is the routed-screen shell every app in the fleet was hand-rolling on its own

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode, Ref } from 'react';
-import { PopoverHost } from '@tastic/hud';
+import { RefObject, ReactNode, Ref } from 'react';
+import { PopoverHost, PopoverRotation } from '@tastic/hud';
+import { View } from 'react-native';
 
 interface Profile {
     id: string;
@@ -18,6 +19,18 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
+interface ProfilePickerAlignResult {
+    align: 'left' | 'right' | 'center';
+    verticalAlign: 'below' | 'above';
+    maxHeight: number;
+    measured: boolean;
+    triggerRef: RefObject<View | null>;
+}
+interface ProfilePickerContentSize {
+    width: number;
+    height: number;
+}
+declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean): ProfilePickerContentSize;
 interface ProfilePickerProps<P extends Profile> {
     idPrefix: string;
     host: PopoverHost;
@@ -27,13 +40,15 @@ interface ProfilePickerProps<P extends Profile> {
     color: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: ProfilePickerAlignResult;
+    rotation?: PopoverRotation;
     guestLabel: string;
     nullLabel?: string;
     nullIcon?: string;
     onSelect: (profile: P | null) => void;
     onManage?: () => void;
 }
-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;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -57,8 +72,9 @@ interface ProfilesManagerProps {
     cardBg?: string;
     titleVariant?: MD3TextVariant$1;
     colorPreview?: (hex: string) => string;
+    useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfilesScreenProps {
@@ -74,8 +90,9 @@ interface ProfilesScreenProps {
     cardBg?: string;
     titleVariant?: MD3TextVariant;
     colorPreview?: (hex: string) => string;
+    useColorPickerAlign?: ProfilesManagerProps['useColorPickerAlign'];
 }
-declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }: ProfilesScreenProps): react.JSX.Element;
+declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;
@@ -190,4 +207,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useSharedProfilesSync };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode, Ref } from 'react';
-import { PopoverHost } from '@tastic/hud';
+import { RefObject, ReactNode, Ref } from 'react';
+import { PopoverHost, PopoverRotation } from '@tastic/hud';
+import { View } from 'react-native';
 
 interface Profile {
     id: string;
@@ -18,6 +19,18 @@ interface Props {
 }
 declare function ProfileChip({ profile, size, filled }: Props): react.JSX.Element;
 
+interface ProfilePickerAlignResult {
+    align: 'left' | 'right' | 'center';
+    verticalAlign: 'below' | 'above';
+    maxHeight: number;
+    measured: boolean;
+    triggerRef: RefObject<View | null>;
+}
+interface ProfilePickerContentSize {
+    width: number;
+    height: number;
+}
+declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean): ProfilePickerContentSize;
 interface ProfilePickerProps<P extends Profile> {
     idPrefix: string;
     host: PopoverHost;
@@ -27,13 +40,15 @@ interface ProfilePickerProps<P extends Profile> {
     color: string;
     dark: boolean;
     align?: 'left' | 'right' | 'center';
+    alignOverride?: ProfilePickerAlignResult;
+    rotation?: PopoverRotation;
     guestLabel: string;
     nullLabel?: string;
     nullIcon?: string;
     onSelect: (profile: P | null) => void;
     onManage?: () => void;
 }
-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;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -57,8 +72,9 @@ interface ProfilesManagerProps {
     cardBg?: string;
     titleVariant?: MD3TextVariant$1;
     colorPreview?: (hex: string) => string;
+    useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant, colorPreview, useColorPickerAlign }: ProfilesManagerProps): react.JSX.Element;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfilesScreenProps {
@@ -74,8 +90,9 @@ interface ProfilesScreenProps {
     cardBg?: string;
     titleVariant?: MD3TextVariant;
     colorPreview?: (hex: string) => string;
+    useColorPickerAlign?: ProfilesManagerProps['useColorPickerAlign'];
 }
-declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }: ProfilesScreenProps): react.JSX.Element;
+declare function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;
@@ -190,4 +207,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, resolveInitialProfiles, saveSharedProfiles, useSharedProfilesSync };

package/dist/index.js

@@ -30,6 +30,7 @@ __export(index_exports, {
   createProfileRecord: () => createProfileRecord,
   createProfileSelectionSlice: () => createProfileSelectionSlice,
   createSeatColorsSlice: () => createSeatColorsSlice,
+  getProfilePickerContentSize: () => getProfilePickerContentSize,
   isSharedProfileStoreAvailable: () => isSharedProfileStoreAvailable,
   isValidProfile: () => isValidProfile,
   isValidTag: () => isValidTag,
@@ -76,17 +77,22 @@ 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 }) {
+function getProfilePickerContentSize(profileCount, hasManageRow = false) {
+  const rowCount = profileCount + 1 + (hasManageRow ? 1 : 0);
+  return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + rowCount * ROW_HEIGHT };
+}
+function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, 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 { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage);
+  const auto = (0, import_hud.useAutoAlign)(open, contentWidth, contentHeight, rotation);
+  const placement = alignOverride ?? auto;
+  const { maxHeight, measured, triggerRef, verticalAlign } = placement;
+  const align = forcedAlign ?? placement.align;
   const handleSelectGuest = () => {
     onSelect(null);
     host.close();
@@ -296,7 +302,7 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview, useColorPickerAlign }) {
   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)();
@@ -382,11 +388,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, colorPreview }, "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, useColorPickerAlign }, "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, colorPreview }, 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, useColorPickerAlign }, 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 }),
@@ -406,7 +412,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     ] }) }) })
   ] });
 }
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview }) {
+function AlignedColorPicker({ useAlign, ...props }) {
+  const { width: windowWidth } = (0, import_react_native3.useWindowDimensions)();
+  const { width, height } = (0, import_hud2.getInlineColorPickerContentSize)(import_auto_paper3.defaultColors.length, windowWidth);
+  const alignOverride = useAlign(props.host.openId === props.id, width, height);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { ...props, alignOverride });
+}
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
   const register = (0, import_focus_chain.useFocusChain)();
   const tag = register();
   const name = register();
@@ -418,7 +430,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, previewValue: colorPreview, tag: draftTag, dark }),
+    useColorPickerAlign ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, 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 }) })
@@ -523,7 +535,7 @@ var import_feedback_press3 = require("@rific/feedback-press");
 var import_react3 = require("react");
 var import_react_native4 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }) {
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = (0, import_auto_paper4.useAutoPaperTheme)();
   const managerRef = (0, import_react3.useRef)(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -532,7 +544,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = import_react_native4.StyleSheet.create({
   container: {
@@ -725,6 +737,7 @@ function useSharedProfilesSync({ groupId, onRemoteChange }) {
   createProfileRecord,
   createProfileSelectionSlice,
   createSeatColorsSlice,
+  getProfilePickerContentSize,
   isSharedProfileStoreAvailable,
   isValidProfile,
   isValidTag,

package/dist/index.mjs

@@ -39,17 +39,22 @@ 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 }) {
+function getProfilePickerContentSize(profileCount, hasManageRow = false) {
+  const rowCount = profileCount + 1 + (hasManageRow ? 1 : 0);
+  return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + rowCount * ROW_HEIGHT };
+}
+function ProfilePicker({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = "Player", nullIcon = "account-off-outline", onSelect, onManage }) {
   const id = `${idPrefix}-profile`;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const fg = dark ? "#FFFFFF" : "#000000";
   const open = host.openId === id;
   const selectedProfile = profiles.find((p) => p.id === selectedId) ?? null;
   const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles]);
-  const rowCount = profiles.length + 1 + (onManage ? 1 : 0);
-  const contentHeight = LIST_PADDING * 2 + rowCount * ROW_HEIGHT;
-  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, POPOVER_WIDTH, contentHeight);
-  const align = alignOverride ?? autoAlign;
+  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage);
+  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
+  const placement = alignOverride ?? auto;
+  const { maxHeight, measured, triggerRef, verticalAlign } = placement;
+  const align = forcedAlign ?? placement.align;
   const handleSelectGuest = () => {
     onSelect(null);
     host.close();
@@ -210,13 +215,13 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/ProfilesManager.tsx
-import { useAutoPaperTheme } from "@rific/auto-paper";
+import { defaultColors, useAutoPaperTheme } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
-import { InlineColorPicker, usePopoverHost } from "@tastic/hud";
+import { getInlineColorPickerContentSize, InlineColorPicker, usePopoverHost } from "@tastic/hud";
 import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
-import { KeyboardAvoidingView, Platform, ScrollView as ScrollView2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { KeyboardAvoidingView, Platform, ScrollView as ScrollView2, StyleSheet as StyleSheet3, useWindowDimensions, View as View3 } from "react-native";
 import { Button, Icon as Icon3, Portal, Text as Text3, TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -259,7 +264,7 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = "headlineSmall", colorPreview, useColorPickerAlign }) {
   const { dark, colors } = useAutoPaperTheme();
   const insets = useSafeAreaInsets();
   const { error: showErrorToast } = useToast();
@@ -345,11 +350,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, colorPreview }, "new");
+        return /* @__PURE__ */ jsx3(EditRow, { draftName, onNameChange: handleNameChange, draftColor, onColorChange: setDraftColor, draftTag, onTagChange: handleTagChange, onSubmit: commitEdit, autoFocus: true, fgMuted, host, dark, colorPreview, useColorPickerAlign }, "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, colorPreview }, 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, useColorPickerAlign }, 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 +374,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     ] }) }) })
   ] });
 }
-function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview }) {
+function AlignedColorPicker({ useAlign, ...props }) {
+  const { width: windowWidth } = useWindowDimensions();
+  const { width, height } = getInlineColorPickerContentSize(defaultColors.length, windowWidth);
+  const alignOverride = useAlign(props.host.openId === props.id, width, height);
+  return /* @__PURE__ */ jsx3(InlineColorPicker, { ...props, alignOverride });
+}
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }) {
   const register = useFocusChain();
   const tag = register();
   const name = register();
@@ -381,7 +392,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, previewValue: colorPreview, tag: draftTag, dark }),
+    useColorPickerAlign ? /* @__PURE__ */ jsx3(AlignedColorPicker, { useAlign: useColorPickerAlign, id: "color", host, value: draftColor, onChange: onColorChange, previewValue: colorPreview, 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 }) })
@@ -486,7 +497,7 @@ import { IconButton } from "@rific/feedback-press";
 import { useRef as useRef2 } from "react";
 import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
 import { jsx as jsx4 } from "react/jsx-runtime";
-function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }) {
+function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }) {
   const { dark } = useAutoPaperTheme2();
   const managerRef = useRef2(null);
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
@@ -495,7 +506,7 @@ function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, on
     managerRef.current?.commitPendingEdit();
     onBack();
   };
-  return /* @__PURE__ */ jsx4(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx4(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, headerLeft: /* @__PURE__ */ jsx4(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
+  return /* @__PURE__ */ jsx4(View4, { style: [styles4.container, { backgroundColor: bg }], children: /* @__PURE__ */ jsx4(ProfilesManager, { ref: managerRef, profiles, defaultColor, onCreate, onSave, onDelete, fg, fgMuted, cardBg, titleVariant, colorPreview, useColorPickerAlign, headerLeft: /* @__PURE__ */ jsx4(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: handleBack, accessibilityLabel: "Back" }) }) });
 }
 var styles4 = StyleSheet4.create({
   container: {
@@ -687,6 +698,7 @@ export {
   createProfileRecord,
   createProfileSelectionSlice,
   createSeatColorsSlice,
+  getProfilePickerContentSize,
   isSharedProfileStoreAvailable,
   isValidProfile,
   isValidTag,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.7.0",
+  "version": "0.9.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",
@@ -69,9 +69,9 @@
     "@rific/core": "^0.2.0",
     "@rific/feedback-press": "^0.12.0",
     "@rific/focus-chain": "^0.4.7",
-    "@rific/toaster": "^0.6.3",
-    "@tastic/core": "^0.8.0",
-    "@tastic/hud": "^0.8.5",
+    "@rific/toaster": "^0.7.0",
+    "@tastic/core": "^0.9.0",
+    "@tastic/hud": "^0.12.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -97,7 +97,7 @@
     "@rific/focus-chain": ">=0.4.0",
     "@rific/toaster": ">=0.4.0",
     "@tastic/core": ">=0.1.0",
-    "@tastic/hud": ">=0.1.3",
+    "@tastic/hud": ">=0.8.0",
     "expo-modules-core": ">=1.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",

package/src/ProfilePicker.tsx

@@ -1,7 +1,7 @@
 import { getContrastColor } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
-import { PopoverBody, PopoverHost, useAutoAlign } from '@tastic/hud'
-import { useMemo } from 'react'
+import { PopoverBody, PopoverHost, PopoverRotation, useAutoAlign } from '@tastic/hud'
+import { RefObject, useMemo } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Text } from 'react-native-paper'
 
@@ -13,6 +13,39 @@ const POPOVER_WIDTH = 220
 const ROW_HEIGHT = 36
 const LIST_PADDING = 8
 
+// A complete placement decision for the popover: which way it opens, how tall it may grow, whether
+// this open's measurement has landed yet, and the ref attached to the measured trigger.
+// Structurally identical to @tastic/hud's own `AlignResult` (exported from hud >= 0.12.0, and the
+// same shape `useAutoAlign` itself returns) — declared here rather than imported so this package's
+// public types don't start requiring a newer @tastic/hud than its peer range already admits. A
+// hud `AlignResult` (e.g. from `useZoneClampedAlign`) is assignable to this as-is.
+export interface ProfilePickerAlignResult {
+  align: 'left' | 'right' | 'center'
+  verticalAlign: 'below' | 'above'
+  maxHeight: number
+  measured: boolean
+  triggerRef: RefObject<View | null>
+}
+
+export interface ProfilePickerContentSize {
+  width: number
+  height: number
+}
+
+// The popover's content footprint for a given roster size: always POPOVER_WIDTH wide, tall enough
+// for the null/"guest" row + one row per profile + (when `hasManageRow`, i.e. when the picker is
+// given an `onManage`) the trailing Manage row, plus the list's own padding. This is the size
+// ProfilePicker hands to `useAutoAlign` — the ONE formula, used by the component itself (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) — exported
+// so a host supplying its own placement through `alignOverride` can size that placement hook (its
+// own useAutoAlign/useZoneClampedAlign call) to match the popover it is actually positioning,
+// instead of copying these constants and drifting whenever they change here.
+export function getProfilePickerContentSize(profileCount: number, hasManageRow = false): ProfilePickerContentSize {
+  const rowCount = profileCount + 1 + (hasManageRow ? 1 : 0)
+  return { width: POPOVER_WIDTH, height: LIST_PADDING * 2 + rowCount * ROW_HEIGHT }
+}
+
 interface ProfilePickerProps<P extends Profile> {
   // Namespaces this trigger's id — pass something unique per instance whenever more than one of
   // these shares a PopoverHost (e.g. one per seat).
@@ -31,7 +64,30 @@ interface ProfilePickerProps<P extends Profile> {
   // trigger reads as one identity with whatever it's paired with.
   color: string
   dark: boolean
+  // Forces a specific horizontal alignment, beating whatever the placement (the automatic
+  // measurement, or `alignOverride` below) would have picked. Omit to let placement decide.
   align?: 'left' | 'right' | 'center'
+  // Substitutes the popover's whole placement — horizontal/vertical alignment, max height, the
+  // `measured` gate and the trigger ref — for the automatic `useAutoAlign` one, for a host whose
+  // trigger sits somewhere that hook's plain window-relative measurement gets wrong. The motivating
+  // case is a FAKE-rotated frame (a View turned +-90deg while the OS stays portrait-locked):
+  // `measureInWindow` reports a rect in true screen space, `useAutoAlign` compares it against the
+  // raw portrait window, and so measures along the wrong axes — flipping the list upward off-screen
+  // or running it past the frame's bottom. The host runs its own rotation-aware placement hook
+  // (sized with `getProfilePickerContentSize`, passing `open` from its own `host.openId === ...`
+  // check) and hands the result in here; `align` above still wins over this result's own `align`.
+  // The result's `triggerRef` is the one attached to the measured trigger, so the hook that
+  // produced it is measuring the right element. Omit for the default automatic placement.
+  alignOverride?: ProfilePickerAlignResult
+  // Rotation of an ancestor frame turned by a fake landscape (or equivalent), forwarded to the
+  // automatic `useAutoAlign` measurement — the same seam @tastic/hud's InlineColorPicker/
+  // SectionedDropdown expose (needs @tastic/hud >= 0.8.0; older versions ignore it). Defaults to 0
+  // (measurement used as-is), which is exactly how this picker behaved before this prop existed.
+  // Deliberately NOT read from an ambient provider the way hud's own pickers do: this component
+  // never touches @tastic/core at runtime, and an ambient read would silently change placement for
+  // every existing caller already living under a rotation provider. Ignored when `alignOverride` is
+  // supplied (the override replaces the placement this feeds).
+  rotation?: PopoverRotation
   // Trigger's own idle-state text (uppercased here regardless of casing passed in) — shown until a
   // profile is selected.
   guestLabel: string
@@ -63,7 +119,7 @@ interface ProfilePickerProps<P extends Profile> {
 // it keeps this popover from needing its own destructive-delete confirmation. Fully prop-driven —
 // no internal profile-storage access of its own, so the host app stays the one place that reads
 // its own persistence hook.
-export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: alignOverride, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage }: ProfilePickerProps<P>) {
+export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation = 0, guestLabel, nullLabel = 'Player', nullIcon = 'account-off-outline', onSelect, onManage }: ProfilePickerProps<P>) {
   const id = `${idPrefix}-profile`
   const menuBg = dark ? '#000000' : '#FFFFFF'
   const fg = dark ? '#FFFFFF' : '#000000'
@@ -74,10 +130,14 @@ export function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, sel
   // most from staying scannable once there are more than a handful of saved profiles.
   const sortedProfiles = useMemo(() => [...profiles].sort((a, b) => a.name.localeCompare(b.name)), [profiles])
   // Null row + each saved profile + (if passed) the manage row.
-  const rowCount = profiles.length + 1 + (onManage ? 1 : 0)
-  const contentHeight = LIST_PADDING * 2 + rowCount * ROW_HEIGHT
-  const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, POPOVER_WIDTH, contentHeight)
-  const align = alignOverride ?? autoAlign
+  const { width: contentWidth, height: contentHeight } = getProfilePickerContentSize(profiles.length, !!onManage)
+  // Always called, even when `alignOverride` is supplied and this result goes unused — hooks can't
+  // be conditional (see @tastic/hud's InlineColorPicker for the identical pattern). With an
+  // override its triggerRef is never attached, so this hook's own measurement is a no-op.
+  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation)
+  const placement = alignOverride ?? auto
+  const { maxHeight, measured, triggerRef, verticalAlign } = placement
+  const align = forcedAlign ?? placement.align
 
   const handleSelectGuest = () => {
     onSelect(null)

package/src/ProfilesManager.tsx

@@ -1,14 +1,15 @@
-import { useAutoPaperTheme } from '@rific/auto-paper'
+import { defaultColors, useAutoPaperTheme } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
 import { useFocusChain } from '@rific/focus-chain'
 import { useToast } from '@rific/toaster'
-import { InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
-import { ReactNode, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native'
+import { getInlineColorPickerContentSize, InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
+import { ComponentProps, ReactNode, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { Button, Icon, Portal, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ProfileChip } from './ProfileChip'
+import { type ProfilePickerAlignResult } from './ProfilePicker'
 import { clampTag, isValidTag, MAX_PROFILE_NAME_LENGTH } from './profilesValidation'
 import { Profile } from './types'
 
@@ -79,6 +80,18 @@ export interface ProfilesManagerProps {
   // 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
+  // Substitutes the color swatch popover's own placement, for a host that renders this screen inside a
+  // FAKE-rotated frame (a View turned +-90deg while the OS stays portrait-locked). @tastic/hud's
+  // InlineColorPicker places its popover with useAutoAlign, which compares a screen-space
+  // measureInWindow rect against the raw portrait window and (through its ambient rotation) double-rotates
+  // an already-transformed rect - so under a fake rotation it lands off its trigger. A host that knows its
+  // frame passes its own placement HOOK here; it is called with the swatch popover's open state and content
+  // size, and its result is handed to InlineColorPicker as `alignOverride` (its `triggerRef` is what gets
+  // measured). It is a hook, not a plain function: give it a STABLE identity for the life of the mount (a
+  // module-level function) - switching it at runtime remounts the swatch. Omit for the ordinary case;
+  // behaviour is then identical to before. Needs @tastic/hud >= 0.12.0 to have any effect (older hud has no
+  // `alignOverride` and ignores it).
+  useColorPickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => ProfilePickerAlignResult
 }
 
 type Row = { kind: 'profile'; profile: Profile } | { kind: 'new' }
@@ -101,7 +114,7 @@ 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, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = 'headlineSmall', colorPreview }: ProfilesManagerProps) {
+export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref, fg: fgOverride, fgMuted: fgMutedOverride, cardBg: cardBgOverride, titleVariant = 'headlineSmall', colorPreview, useColorPickerAlign }: ProfilesManagerProps) {
   const { dark, colors } = useAutoPaperTheme()
   const insets = useSafeAreaInsets()
   const { error: showErrorToast } = useToast()
@@ -253,12 +266,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} colorPreview={colorPreview} />
+              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} useColorPickerAlign={useColorPickerAlign} />
             }
 
             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} colorPreview={colorPreview} />
+              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} useColorPickerAlign={useColorPickerAlign} />
             }
 
             // No delete affordance at rest — tap the row to start editing, which is the one place
@@ -323,6 +336,19 @@ interface EditRowProps {
   host: PopoverHost
   dark: boolean
   colorPreview?: (hex: string) => string
+  useColorPickerAlign?: ProfilesManagerProps['useColorPickerAlign']
+}
+
+// InlineColorPicker with its placement supplied by a host hook (see ProfilesManagerProps.useColorPickerAlign).
+// A component of its own - rather than a conditional hook call inside EditRow - so the hook is always called
+// unconditionally here, and the plain path below stays byte-identical to what it was. Sized exactly as
+// InlineColorPicker sizes itself (the default swatch list at the raw window width), so the host's placement and
+// the popover it positions agree on its footprint.
+function AlignedColorPicker({ useAlign, ...props }: ComponentProps<typeof InlineColorPicker> & { useAlign: NonNullable<ProfilesManagerProps['useColorPickerAlign']> }) {
+  const { width: windowWidth } = useWindowDimensions()
+  const { width, height } = getInlineColorPickerContentSize(defaultColors.length, windowWidth)
+  const alignOverride = useAlign(props.host.openId === props.id, width, height)
+  return <InlineColorPicker {...props} alignOverride={alignOverride} />
 }
 
 // One row, expanded: the color trigger (@tastic/hud's InlineColorPicker) — doubling as the tag's
@@ -337,7 +363,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, colorPreview }: EditRowProps) {
+function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, onSubmit, onDelete, autoFocus, fgMuted, host, dark, colorPreview, useColorPickerAlign }: EditRowProps) {
   const register = useFocusChain()
   const tag = register()
   const name = register()
@@ -364,7 +390,7 @@ function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag,
 
   return (
     <View style={styles.editRow}>
-      <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} tag={draftTag} dark={dark} />
+      {useColorPickerAlign ? <AlignedColorPicker useAlign={useColorPickerAlign} id='color' host={host} value={draftColor} onChange={onColorChange} previewValue={colorPreview} 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

package/src/ProfilesScreen.tsx

@@ -3,7 +3,7 @@ import { IconButton } from '@rific/feedback-press'
 import { useRef } from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { ProfileEditPatch, ProfilesManager, ProfilesManagerHandle } from './ProfilesManager'
+import { ProfileEditPatch, ProfilesManager, ProfilesManagerHandle, ProfilesManagerProps } from './ProfilesManager'
 import { Profile } from './types'
 
 // react-native-paper's own MD3 Text variant names — mirrored locally rather than importing its
@@ -40,6 +40,10 @@ export interface ProfilesScreenProps {
   cardBg?: string
   titleVariant?: MD3TextVariant
   colorPreview?: (hex: string) => string
+  // Forwarded straight through to the internal ProfilesManager - a placement hook for the color swatch popover, for
+  // a host inside a fake-rotated frame. See ProfilesManagerProps.useColorPickerAlign for what it is and its hud >= 0.12.0
+  // requirement.
+  useColorPickerAlign?: ProfilesManagerProps['useColorPickerAlign']
 }
 
 // The routed profiles-roster screen shell every app in this fleet hand-rolls around ProfilesManager
@@ -49,7 +53,7 @@ export interface ProfilesScreenProps {
 // still doesn't call useProfiles()/useGameStats() (or any host-specific hook) itself — those two
 // hooks' shapes are genuinely app-specific (different CreateProfileInput/GameStatsContextValue per
 // app), so this stays props-in/callbacks-out, exactly like ProfilesManager itself.
-export function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview }: ProfilesScreenProps) {
+export function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDelete, onBack, fg: fgOverride, fgMuted, bg: bgOverride, cardBg, titleVariant, colorPreview, useColorPickerAlign }: ProfilesScreenProps) {
   const { dark } = useAutoPaperTheme()
   // Owns the ref itself — nothing outside this component ever needs it, since this is now the one
   // thing that both renders ProfilesManager AND owns the only navigation trigger next to it.
@@ -71,7 +75,7 @@ export function ProfilesScreen({ profiles, defaultColor, onCreate, onSave, onDel
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
-      <ProfilesManager ref={managerRef} profiles={profiles} defaultColor={defaultColor} onCreate={onCreate} onSave={onSave} onDelete={onDelete} fg={fg} fgMuted={fgMuted} cardBg={cardBg} titleVariant={titleVariant} colorPreview={colorPreview} headerLeft={<IconButton icon='arrow-left' iconColor={fg} size={24} onPress={handleBack} accessibilityLabel='Back' />} />
+      <ProfilesManager ref={managerRef} profiles={profiles} defaultColor={defaultColor} onCreate={onCreate} onSave={onSave} onDelete={onDelete} fg={fg} fgMuted={fgMuted} cardBg={cardBg} titleVariant={titleVariant} colorPreview={colorPreview} useColorPickerAlign={useColorPickerAlign} headerLeft={<IconButton icon='arrow-left' iconColor={fg} size={24} onPress={handleBack} accessibilityLabel='Back' />} />
     </View>
   )
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 export { ProfileChip } from './ProfileChip'
-export { ProfilePicker } from './ProfilePicker'
+export { getProfilePickerContentSize, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize } from './ProfilePicker'
 export { type ProfileEditPatch, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
 export { ProfilesScreen, type ProfilesScreenProps } from './ProfilesScreen'
 export { isValidProfile, isValidTag, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH } from './profilesValidation'