@tastic/profile 0.8.0 → 0.9.0

package/README.md

@@ -136,6 +136,28 @@ const placement = useMyRotatedAlign(open, width, height) // returns a ProfilePic
 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

@@ -72,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 {
@@ -89,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;

package/dist/index.d.ts

@@ -72,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 {
@@ -89,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;

package/dist/index.js

@@ -302,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)();
@@ -388,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 }),
@@ -412,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();
@@ -424,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 }) })
@@ -529,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");
@@ -538,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: {

package/dist/index.mjs

@@ -215,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";
 
@@ -264,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();
@@ -350,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 }),
@@ -374,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();
@@ -386,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 }) })
@@ -491,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");
@@ -500,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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.8.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",
@@ -70,7 +70,7 @@
     "@rific/feedback-press": "^0.12.0",
     "@rific/focus-chain": "^0.4.7",
     "@rific/toaster": "^0.7.0",
-    "@tastic/core": "^0.8.0",
+    "@tastic/core": "^0.9.0",
     "@tastic/hud": "^0.12.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",

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>
   )
 }