@tastic/profile 0.7.0 → 0.8.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,40 @@ 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).
+
 ### 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 {
@@ -190,4 +205,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 {
@@ -190,4 +205,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();
@@ -725,6 +731,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();
@@ -687,6 +692,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.8.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",
+    "@rific/toaster": "^0.7.0",
     "@tastic/core": "^0.8.0",
-    "@tastic/hud": "^0.8.5",
+    "@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/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'