@rific/auto-paper 0.11.0 → 0.12.0

package/README.md

@@ -201,6 +201,26 @@ dispatch(themeActions.setColor('#e91e63'))
 dispatch(themeActions.setAppearance('dark'))
 ```
 
+The `App.tsx` example above hand-builds the `initialValue`/`onReady` prop pair inline. Once you also need `onChange` wired back to `dispatch`, reach for `useThemeBridgeProps` instead of re-deriving that same three-field object by hand: it takes your already-resolved `settings`/`onChange`/`onReady` and reshapes them into the exact, memoized prop bag `Provider` expects.
+
+```tsx
+// Theme.tsx
+import { Provider as AutoPaperProvider, useThemeBridgeProps } from '@rific/auto-paper'
+import { useCallback } from 'react'
+import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+
+export function Theme({ children }: { children: React.ReactNode }) {
+  const settings = useSelector((state: RootState) => state.theme, shallowEqual)
+  const dispatch = useDispatch()
+  const onChange = useCallback((next: ThemeSettings) => dispatch(themeActions.initialize(next)), [dispatch])
+  const bridgeProps = useThemeBridgeProps({ initialValue: settings, onChange, onReady: SplashScreen.hideAsync })
+
+  return <AutoPaperProvider {...bridgeProps}>{children}</AutoPaperProvider>
+}
+```
+
+Keep the scope honest: this only replaces the final `<Provider initialValue={...} onChange={...} onReady={...}>` prop list with `<Provider {...bridgeProps}>`. It doesn't do the `useSelector`/`useDispatch` wiring above it — that's still yours to write, since `RootState`'s shape is app-local and this package has no opinion on it (or on state management being Redux at all; `useThemeBridgeProps` takes plain values and callbacks, not a `dispatch` function).
+
 ### With `useComputedTheme`
 
 Use the hook directly when you need to extend the theme before passing it to `PaperProvider`, for example to merge in a navigation theme or add custom color keys:
@@ -262,6 +282,21 @@ export default function App() {
 | `blur` | `boolean` | `true` |
 | `blurTint` | `number` | `0.2` |
 
+### `useThemeBridgeProps({ initialValue, onChange, onReady })`
+
+Reshapes already-resolved values into the exact `Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>` shape `Provider` expects, memoized on those three fields so the returned object is referentially stable across re-renders until an input actually changes. Meant for a consuming app's own Redux-backed "Theme" component — see "With Redux" above — but takes plain values and callbacks rather than a `dispatch` function or anything Redux-specific, so it works with any state management, or none.
+
+It only replaces the final prop list handed to `Provider`; it does not do any `useSelector`/`dispatch` wiring itself, and `onReady` is threaded through unchanged.
+
+```ts
+import { useThemeBridgeProps } from '@rific/auto-paper'
+
+const bridgeProps = useThemeBridgeProps({ initialValue: settings, onChange, onReady })
+// → { initialValue, onChange, onReady }
+
+<Provider {...bridgeProps}>{children}</Provider>
+```
+
 ### `useThemeSettings()`
 
 Returns `{ settings: ThemeSettings, set: (patch: Partial<ThemeSettings>) => void }`. Use this hook from any component inside `Provider` to read or update the current theme settings.

package/dist/index.d.mts

@@ -318,6 +318,47 @@ declare function Provider({ children, defaults, expoBlur, fontFamily, initialVal
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
+/**
+ * The subset of ProviderProps a consuming app's own Redux-backed "Theme" component is responsible
+ * for supplying. Every field here has an identically-named counterpart on ProviderProps itself
+ * (see ThemeProvider.tsx) - deliberately not renamed, so wiring this up needs no new vocabulary
+ * beyond the provider's own.
+ */
+type ThemeBridgeProps = Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>;
+/**
+ * Reshapes an app's own Redux-sourced theme state and callbacks into the exact prop object
+ * `<Provider>` expects, so a consuming app's own "Theme" component - every game in the fleet
+ * defines one, reading `state.theme` from its own store via `useSelector(..., shallowEqual)` and
+ * dispatching `themeActions.initialize` on change - can hand its own `useSelector`/`dispatch`
+ * results straight to this hook instead of re-deriving the same three-prop shape by hand in every
+ * app:
+ *
+ * ```tsx
+ * export function Theme({ children }: Props) {
+ *   const settings = useSelector((state: RootState) => state.theme, shallowEqual)
+ *   const dispatch = useDispatch()
+ *   const onChange = useCallback((next: ThemeSettings) => dispatch(themeActions.initialize(next)), [dispatch])
+ *   const onReady = useCallback(() => markSplashReady('theme'), [])
+ *   const bridgeProps = useThemeBridgeProps({ initialValue: settings, onChange, onReady })
+ *   return <Provider {...bridgeProps}>{children}</Provider>
+ * }
+ * ```
+ *
+ * Deliberately takes plain values and callbacks rather than a `dispatch` function or any
+ * Redux-specific type: this package has no opinion on any app's own RootState shape, or even that
+ * state management is Redux at all - the app does its own `useSelector`/`dispatch` wiring and
+ * passes just the results in.
+ *
+ * `onReady` is threaded through completely unchanged, never recomputed or wrapped here - it fires
+ * exactly once, the first time `<Provider>` itself reports its computed theme is ready, which is
+ * the timing a consuming app's own splash-gate mark depends on. A wrong `onReady` callback (e.g.
+ * one that marks the gate ready before `<Provider>` actually is) is a bug in the app's own
+ * callback, not something this hook can catch or fix - see BoxHockey's and LightCycles' own history
+ * of hand-fixing exactly that "marked ready before Provider was actually ready" bug in their own
+ * Theme.tsx before this hook existed.
+ */
+declare function useThemeBridgeProps(props: ThemeBridgeProps): ThemeBridgeProps;
+
 declare const useThemeSettings: () => _rific_core.SettingsContextValue<ThemeSettings>;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
@@ -352,4 +393,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.d.ts

@@ -318,6 +318,47 @@ declare function Provider({ children, defaults, expoBlur, fontFamily, initialVal
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
+/**
+ * The subset of ProviderProps a consuming app's own Redux-backed "Theme" component is responsible
+ * for supplying. Every field here has an identically-named counterpart on ProviderProps itself
+ * (see ThemeProvider.tsx) - deliberately not renamed, so wiring this up needs no new vocabulary
+ * beyond the provider's own.
+ */
+type ThemeBridgeProps = Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>;
+/**
+ * Reshapes an app's own Redux-sourced theme state and callbacks into the exact prop object
+ * `<Provider>` expects, so a consuming app's own "Theme" component - every game in the fleet
+ * defines one, reading `state.theme` from its own store via `useSelector(..., shallowEqual)` and
+ * dispatching `themeActions.initialize` on change - can hand its own `useSelector`/`dispatch`
+ * results straight to this hook instead of re-deriving the same three-prop shape by hand in every
+ * app:
+ *
+ * ```tsx
+ * export function Theme({ children }: Props) {
+ *   const settings = useSelector((state: RootState) => state.theme, shallowEqual)
+ *   const dispatch = useDispatch()
+ *   const onChange = useCallback((next: ThemeSettings) => dispatch(themeActions.initialize(next)), [dispatch])
+ *   const onReady = useCallback(() => markSplashReady('theme'), [])
+ *   const bridgeProps = useThemeBridgeProps({ initialValue: settings, onChange, onReady })
+ *   return <Provider {...bridgeProps}>{children}</Provider>
+ * }
+ * ```
+ *
+ * Deliberately takes plain values and callbacks rather than a `dispatch` function or any
+ * Redux-specific type: this package has no opinion on any app's own RootState shape, or even that
+ * state management is Redux at all - the app does its own `useSelector`/`dispatch` wiring and
+ * passes just the results in.
+ *
+ * `onReady` is threaded through completely unchanged, never recomputed or wrapped here - it fires
+ * exactly once, the first time `<Provider>` itself reports its computed theme is ready, which is
+ * the timing a consuming app's own splash-gate mark depends on. A wrong `onReady` callback (e.g.
+ * one that marks the gate ready before `<Provider>` actually is) is a bug in the app's own
+ * callback, not something this hook can catch or fix - see BoxHockey's and LightCycles' own history
+ * of hand-fixing exactly that "marked ready before Provider was actually ready" bug in their own
+ * Theme.tsx before this hook existed.
+ */
+declare function useThemeBridgeProps(props: ThemeBridgeProps): ThemeBridgeProps;
+
 declare const useThemeSettings: () => _rific_core.SettingsContextValue<ThemeSettings>;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
@@ -352,4 +393,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.js

@@ -76,6 +76,7 @@ __export(index_exports, {
   useNavBarContext: () => useNavBarContext,
   usePaperDefaults: () => usePaperDefaults,
   useReanimatedModule: () => useReanimatedModule,
+  useThemeBridgeProps: () => useThemeBridgeProps,
   useThemeSettings: () => useThemeSettings
 });
 module.exports = __toCommonJS(index_exports);
@@ -939,8 +940,8 @@ var styles4 = import_react_native7.StyleSheet.create({
   harmonyRow: { marginBottom: 4 },
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
-  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   ring: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
@@ -1078,6 +1079,13 @@ var selectThemeHarmony = themeSlice.selectors.selectHarmony;
 var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
+// src/useThemeBridgeProps.ts
+var import_react12 = require("react");
+function useThemeBridgeProps(props) {
+  const { initialValue, onChange, onReady } = props;
+  return (0, import_react12.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+}
+
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -1207,5 +1215,6 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   useNavBarContext,
   usePaperDefaults,
   useReanimatedModule,
+  useThemeBridgeProps,
   useThemeSettings
 });

package/dist/index.mjs

@@ -857,8 +857,8 @@ var styles4 = StyleSheet5.create({
   harmonyRow: { marginBottom: 4 },
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
-  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   ring: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
@@ -996,6 +996,13 @@ var selectThemeHarmony = themeSlice.selectors.selectHarmony;
 import { useTheme as usePaperTheme } from "react-native-paper";
 var useAutoPaperTheme = () => usePaperTheme();
 
+// src/useThemeBridgeProps.ts
+import { useMemo as useMemo2 } from "react";
+function useThemeBridgeProps(props) {
+  const { initialValue, onChange, onReady } = props;
+  return useMemo2(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+}
+
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -1124,5 +1131,6 @@ export {
   useNavBarContext,
   usePaperDefaults,
   useReanimatedModule,
+  useThemeBridgeProps,
   useThemeSettings
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -68,11 +68,11 @@
     "esbuild": "0.28.1"
   },
   "devDependencies": {
-    "@infinitetoken/eslint-config": "^0.1.8",
-    "@infinitetoken/jest-config": "^0.2.0",
-    "@infinitetoken/tsconfig": "^0.3.0",
+    "@infinitetoken/eslint-config": "0.2.0",
+    "@infinitetoken/jest-config": "^0.4.0",
+    "@infinitetoken/tsconfig": "^0.5.0",
     "@reduxjs/toolkit": "^2.0.0",
-    "@rific/core": "^0.1.1",
+    "@rific/core": "^0.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",

package/src/components/PalettePicker.tsx

@@ -119,8 +119,8 @@ const styles = StyleSheet.create({
   harmonyRow: { marginBottom: 4 },
   innerRotator: { height: '100%', left: '-100%', overflow: 'hidden', position: 'absolute', top: 0, width: '200%' },
   pie: { overflow: 'hidden' },
-  rotator: { height: '100%', left: 0, overflow: 'hidden', position: 'absolute', top: 0, width: '100%' },
   ring: { alignItems: 'center', bottom: 0, justifyContent: 'center', left: 0, position: 'absolute', right: 0, top: 0 },
+  rotator: { height: '100%', left: 0, overflow: 'hidden', position: 'absolute', top: 0, width: '100%' },
   swatch: { alignItems: 'center', justifyContent: 'center' },
   swatches: { flexDirection: 'row', flexWrap: 'wrap', gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: 'center', alignSelf: 'flex-start', borderRadius: SIZE / 2, height: SIZE, justifyContent: 'center', width: SIZE },

package/src/index.ts

@@ -35,6 +35,8 @@ export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsConte
 export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'
 export { SEMANTIC_BASE_COLORS, useComputedTheme } from './useComputedTheme'
 export { useAutoPaperTheme } from './useTheme'
+export type { ThemeBridgeProps } from './useThemeBridgeProps'
+export { useThemeBridgeProps } from './useThemeBridgeProps'
 export { useThemeSettings } from './useThemeSettings'
 export { getBlendedColor } from './utils/getBlendedColor'
 export type { ColorRoles } from './utils/getColorRoles'

package/src/useThemeBridgeProps.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+
+import type { ProviderProps } from './ThemeProvider'
+
+/**
+ * The subset of ProviderProps a consuming app's own Redux-backed "Theme" component is responsible
+ * for supplying. Every field here has an identically-named counterpart on ProviderProps itself
+ * (see ThemeProvider.tsx) - deliberately not renamed, so wiring this up needs no new vocabulary
+ * beyond the provider's own.
+ */
+export type ThemeBridgeProps = Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>
+
+/**
+ * Reshapes an app's own Redux-sourced theme state and callbacks into the exact prop object
+ * `<Provider>` expects, so a consuming app's own "Theme" component - every game in the fleet
+ * defines one, reading `state.theme` from its own store via `useSelector(..., shallowEqual)` and
+ * dispatching `themeActions.initialize` on change - can hand its own `useSelector`/`dispatch`
+ * results straight to this hook instead of re-deriving the same three-prop shape by hand in every
+ * app:
+ *
+ * ```tsx
+ * export function Theme({ children }: Props) {
+ *   const settings = useSelector((state: RootState) => state.theme, shallowEqual)
+ *   const dispatch = useDispatch()
+ *   const onChange = useCallback((next: ThemeSettings) => dispatch(themeActions.initialize(next)), [dispatch])
+ *   const onReady = useCallback(() => markSplashReady('theme'), [])
+ *   const bridgeProps = useThemeBridgeProps({ initialValue: settings, onChange, onReady })
+ *   return <Provider {...bridgeProps}>{children}</Provider>
+ * }
+ * ```
+ *
+ * Deliberately takes plain values and callbacks rather than a `dispatch` function or any
+ * Redux-specific type: this package has no opinion on any app's own RootState shape, or even that
+ * state management is Redux at all - the app does its own `useSelector`/`dispatch` wiring and
+ * passes just the results in.
+ *
+ * `onReady` is threaded through completely unchanged, never recomputed or wrapped here - it fires
+ * exactly once, the first time `<Provider>` itself reports its computed theme is ready, which is
+ * the timing a consuming app's own splash-gate mark depends on. A wrong `onReady` callback (e.g.
+ * one that marks the gate ready before `<Provider>` actually is) is a bug in the app's own
+ * callback, not something this hook can catch or fix - see BoxHockey's and LightCycles' own history
+ * of hand-fixing exactly that "marked ready before Provider was actually ready" bug in their own
+ * Theme.tsx before this hook existed.
+ */
+export function useThemeBridgeProps(props: ThemeBridgeProps): ThemeBridgeProps {
+  const { initialValue, onChange, onReady } = props
+  return useMemo(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady])
+}