@whop/elements-react-native 0.1.0

package/src/native/index.ts

@@ -0,0 +1,173 @@
+import { Platform } from 'react-native';
+
+import type { ParsedPlaceAddress } from '../core/address/places';
+import type { AddressSuggestion } from '../core/address/suggest';
+import { parseComponents, parseSuggestions } from '../core/address/suggest';
+import type { Spec as AddressSuggestionsSpec } from '../specs/NativeWhopAddressSuggestions';
+import type { Spec as AuthSessionSpec } from '../specs/NativeWhopAuthSession';
+import type { Spec as PlatformPaySpec } from '../specs/NativeWhopPlatformPay';
+
+/**
+ * The three native units, resolved lazily and tolerantly.
+ *
+ * A missing module is not a crash: it means the app has not rebuilt since adding this package, and
+ * the honest consequence is that redirect steps and wallet tiles are unavailable while everything
+ * else keeps working. Throwing at import time would take the whole checkout down instead.
+ */
+
+function optional<T>(load: () => T | null): T | null {
+	try {
+		return load() ?? null;
+	} catch {
+		return null;
+	}
+}
+
+let authSession: AuthSessionSpec | null | undefined;
+let platformPay: PlatformPaySpec | null | undefined;
+let addressSuggestions: AddressSuggestionsSpec | null | undefined;
+
+function auth(): AuthSessionSpec | null {
+	if (authSession === undefined) {
+		authSession = optional(() => require('../specs/NativeWhopAuthSession').default as AuthSessionSpec);
+	}
+	return authSession;
+}
+
+function pay(): PlatformPaySpec | null {
+	if (platformPay === undefined) {
+		platformPay = optional(() => require('../specs/NativeWhopPlatformPay').default as PlatformPaySpec);
+	}
+	return platformPay;
+}
+
+export const WhopAuthSession = {
+	isAvailable(): boolean {
+		return auth()?.isAvailable() ?? false;
+	},
+	/** Resolves the callback URL, or null when the buyer dismissed the browser. */
+	present(url: string, options?: { callbackScheme?: string; prefersEphemeral?: boolean }): Promise<string | null> {
+		const module = auth();
+		if (!module) {
+			return Promise.reject(
+				new Error(
+					'whop elements: the native module is not linked — rebuild the app after installing @whop/elements-react-native.',
+				),
+			);
+		}
+		return module.present(url, options?.callbackScheme ?? null, options?.prefersEphemeral ?? false);
+	},
+	dismiss(): void {
+		auth()?.dismiss();
+	},
+};
+
+export interface WalletSheetConfig {
+	networks: string[];
+	allowedCardNetworks?: string[];
+	allowedAuthMethods?: string[];
+	environment?: string;
+}
+
+export interface WalletSheetRequest extends WalletSheetConfig {
+	merchantIdentifier: string;
+	merchantName?: string;
+	countryCode: string;
+	currencyCode: string;
+	/** Major units as a decimal string; PassKit and Google Pay both price in major units. */
+	totalPrice: string;
+	lineItems: Array<{ label: string; amount: string }>;
+	requiresBillingAddress: boolean;
+	requiresEmail: boolean;
+	gateway?: string;
+	gatewayMerchantId?: string;
+}
+
+export type WalletCapability = 'apple' | 'google' | 'none';
+
+export const WhopPlatformPay = {
+	capability(): WalletCapability {
+		const value = pay()?.capability();
+		return value === 'apple' || value === 'google' ? value : 'none';
+	},
+	async canPay(config: WalletSheetConfig): Promise<boolean> {
+		const module = pay();
+		if (!module) return false;
+		try {
+			return await module.canPay(JSON.stringify(config));
+		} catch {
+			return false;
+		}
+	},
+	/** Resolves the raw network payload, or null when the buyer dismissed the sheet. */
+	present(request: WalletSheetRequest): Promise<string | null> {
+		const module = pay();
+		if (!module) return Promise.resolve(null);
+		return module.present(JSON.stringify(request));
+	},
+	/** Apple's sheet stays open until the confirm outcome is known; Google's dismisses itself. */
+	complete(success: boolean): void {
+		pay()?.complete(success);
+	},
+};
+
+export const WALLET_TYPE_FOR_PLATFORM = Platform.OS === 'ios' ? 'apple_pay' : 'google_pay';
+
+export { default as WhopPayButton } from '../specs/WhopPayButtonNativeComponent';
+
+let warnedMissingSuggestions = false;
+
+function suggestions(): AddressSuggestionsSpec | null {
+	if (addressSuggestions === undefined) {
+		addressSuggestions = optional(
+			() => require('../specs/NativeWhopAddressSuggestions').default as AddressSuggestionsSpec,
+		);
+	}
+	// Absence here is silent by design at runtime — a checkout must never break over suggestions —
+	// but for whoever is building it, "no autocomplete" and "module not linked" look identical.
+	// Say which, once, in development only.
+	if (addressSuggestions === null && !warnedMissingSuggestions && typeof __DEV__ !== 'undefined' && __DEV__) {
+		warnedMissingSuggestions = true;
+		console.warn(
+			'whop elements: address autocomplete is off because the WhopAddressSuggestions native module is not linked. ' +
+				'Rebuild the app after installing or updating @whop/elements-react-native — in the example, `node scripts/setup-native.mjs --force` then `pnpm run ios`.',
+		);
+	}
+	return addressSuggestions;
+}
+
+/**
+ * Street suggestions from the platform geocoder: MapKit on iOS, android.location.Geocoder on
+ * Android. No key, no account, no third-party SDK on either side.
+ *
+ * Two calls, because MapKit's as-you-type API answers with display strings only and the components
+ * come from a second lookup. Android resolves from its own cache, so the shape costs it nothing.
+ *
+ * Every failure path answers empty rather than throwing. A geocoder that is missing, throttled,
+ * offline or simply unhelpful should leave the buyer typing the address by hand, which is where
+ * they started — it must never take down a checkout.
+ */
+export const WhopAddressSuggestions = {
+	isAvailable(): boolean {
+		return suggestions()?.isAvailable() ?? false;
+	},
+	async suggest(query: string): Promise<AddressSuggestion[]> {
+		const module = suggestions();
+		if (!module) return [];
+		try {
+			return parseSuggestions(await module.suggest(query));
+		} catch {
+			return [];
+		}
+	},
+	/** `formCountry` is not sent to the geocoder; it backfills a result that comes back without one. */
+	async resolve(id: string, formCountry?: string): Promise<ParsedPlaceAddress | null> {
+		const module = suggestions();
+		if (!module) return null;
+		try {
+			return parseComponents(await module.details(id), formCountry);
+		} catch {
+			return null;
+		}
+	},
+};

package/src/provider.tsx

@@ -0,0 +1,76 @@
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+
+import type { WhopEnvironment } from './api/client';
+import { type Appearance, assertNativeAppearance } from './theme/appearance';
+import { ThemeProvider } from './theme/provider';
+import { LocaleProvider } from './i18n';
+
+export interface WhopElementsConfig {
+	/**
+	 * Which Whop API the elements talk to. An ENUM over two Whop-owned origins, never a URL: a
+	 * consumer-supplied host would let the embedding app read everything a buyer types.
+	 */
+	environment?: WhopEnvironment;
+	appearance?: Appearance | null;
+	locale?: string;
+	/**
+	 * Resolves a buyer or account token per request. There is no cookie in an app, so this is how a
+	 * surface that needs credentials gets them. Called again before every call, so fetch rather than
+	 * cache.
+	 */
+	getToken?: () => Promise<string | null | undefined> | string | null | undefined;
+	/** Opt in to the same event names and property allowlists the web elements emit. */
+	analytics?: { writeKey: string } | false;
+}
+
+export interface WhopElementsProps extends WhopElementsConfig {
+	children: ReactNode;
+	/**
+	 * @deprecated There is no hosted script to load on React Native — the elements are in this
+	 * package. Remove the prop.
+	 */
+	elements?: never;
+}
+
+interface RootValue {
+	config: WhopElementsConfig;
+}
+
+const RootContext = createContext<RootValue | null>(null);
+
+export function useRootConfig(): WhopElementsConfig {
+	const root = useContext(RootContext);
+	if (!root) throw new Error('Whop Elements components must be used within <WhopElements>');
+	return root.config;
+}
+
+/**
+ * The root. Holds the environment, the appearance, the locale, and the token resolver, and puts a
+ * resolved theme in context for every element beneath it.
+ */
+export function WhopElements(props: WhopElementsProps): ReactNode {
+	const { children, environment = 'production', appearance, locale, getToken, analytics } = props;
+
+	// `elements={loadWhop()}` is the single most-copied line in the web docs. Failing loudly on it
+	// is kinder than ignoring a prop someone believed was load-bearing.
+	if ((props as unknown as Record<string, unknown>).elements !== undefined) {
+		throw new Error(
+			'whop elements: `<WhopElements elements={…}>` is a web-only prop — React Native has no hosted script to load. Remove it.',
+		);
+	}
+	assertNativeAppearance(appearance ?? undefined);
+
+	const config = useMemo<WhopElementsConfig>(
+		() => ({ environment, appearance, locale, getToken, analytics }),
+		[environment, appearance, locale, getToken, analytics],
+	);
+	const value = useMemo<RootValue>(() => ({ config }), [config]);
+
+	return (
+		<RootContext.Provider value={value}>
+			<LocaleProvider locale={locale}>
+				<ThemeProvider appearance={appearance}>{children}</ThemeProvider>
+			</LocaleProvider>
+		</RootContext.Provider>
+	);
+}

package/src/specs/NativeWhopAddressSuggestions.ts

@@ -0,0 +1,14 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+	/** Whether the platform has a geocoder to ask. Android devices can ship without a backend. */
+	isAvailable(): boolean;
+	/** Candidates for a partial address, as a JSON array of `{ id, label }`. Display only. */
+	suggest(query: string): Promise<string>;
+	/** One candidate's raw components as JSON, by the `id` its `suggest` row carried. */
+	details(suggestionId: string): Promise<string>;
+}
+
+/** `get`, not `getEnforcing`: an app that has not rebuilt loses suggestions, it does not crash. */
+export default TurboModuleRegistry.get<Spec>('WhopAddressSuggestions');

package/src/specs/NativeWhopAuthSession.ts

@@ -0,0 +1,21 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+	isAvailable(): boolean;
+	/**
+	 * Presents `url` in the system browser — ASWebAuthenticationSession on iOS, a Chrome Custom
+	 * Tab on Android. Resolves with the callback URL when one arrives, or null when the buyer
+	 * dismissed it. Never an in-app WebView: the page runs out of process, so the host app can
+	 * neither read nor script it.
+	 */
+	present(url: string, callbackScheme: string | null, prefersEphemeral: boolean): Promise<string | null>;
+	dismiss(): void;
+}
+
+/**
+ * `get`, not `getEnforcing`: a host app that has not rebuilt since adding this package should lose
+ * the redirect and wallet surfaces, not crash on import. The wrappers in src/native treat null as
+ * "unavailable".
+ */
+export default TurboModuleRegistry.get<Spec>('WhopAuthSession');

package/src/specs/NativeWhopPlatformPay.ts

@@ -0,0 +1,25 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+	/** 'apple' on iOS, 'google' on Android, 'none' where neither is usable. */
+	capability(): string;
+	/** `configJson` is a WalletSheetConfig. Answers whether the OS will present a sheet at all. */
+	canPay(configJson: string): Promise<boolean>;
+	/**
+	 * Presents the OS wallet sheet for a WalletSheetRequest. Resolves with the raw network payload
+	 * as a JSON string — PKPaymentToken.paymentData on iOS, PaymentData's tokenization token on
+	 * Android — or null when the buyer dismissed it. The payload goes straight to Basis Theory as a
+	 * token intent; it never enters the SDK's own state.
+	 */
+	present(requestJson: string): Promise<string | null>;
+	/** Settles a presented sheet once the confirm outcome is known. */
+	complete(success: boolean): void;
+}
+
+/**
+ * `get`, not `getEnforcing`: a host app that has not rebuilt since adding this package should lose
+ * the redirect and wallet surfaces, not crash on import. The wrappers in src/native treat null as
+ * "unavailable".
+ */
+export default TurboModuleRegistry.get<Spec>('WhopPlatformPay');

package/src/specs/WhopPayButtonNativeComponent.ts

@@ -0,0 +1,22 @@
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * The platform's own pay button. Apple and Google both require their branded control rather than a
+ * drawn imitation, so this is the one element surface that must be a native view.
+ */
+export interface NativeProps extends ViewProps {
+	variant?: CodegenTypes.WithDefault<'buy' | 'pay' | 'checkout' | 'book' | 'subscribe' | 'order', 'pay'>;
+	buttonAppearance?: CodegenTypes.WithDefault<'auto' | 'light' | 'dark', 'auto'>;
+	cornerRadius?: CodegenTypes.Double;
+	disabled?: CodegenTypes.WithDefault<boolean, false>;
+	/**
+	 * NOT `onPress`. Codegen derives the native event name by replacing the `on` prefix with `top`,
+	 * and React Native already registers `topPress` as a BUBBLING event for Pressable — a name
+	 * registered as both direct and bubbling fails the view-config invariant at render time, which
+	 * takes down the whole screen rather than just this button.
+	 */
+	onPayPress?: CodegenTypes.DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeProps>('WhopPayButton') as HostComponent<NativeProps>;

package/src/theme/appearance.ts

@@ -0,0 +1,150 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+import { ACCENT_NAMES, GRAY_NAMES } from './scales.generated';
+
+/**
+ * Copied from frontend/packages/elements-framework/src/builder/appearance/types.ts so an appearance
+ * object written for the web elements types identically here.
+ */
+export type AccentColor = (typeof ACCENT_NAMES)[number];
+export type GrayColor = (typeof GRAY_NAMES)[number] | 'auto';
+
+export type Theme = {
+	appearance?: 'light' | 'dark';
+	accentColor?: AccentColor;
+	grayColor?: GrayColor;
+	dangerColor?: 'ruby' | 'red' | 'tomato';
+	warningColor?: 'yellow' | 'amber';
+	successColor?: 'green' | 'teal' | 'jade' | 'grass';
+	infoColor?: 'sky' | 'blue';
+};
+
+/**
+ * The web's `variables` are CSS custom properties, which React Native has no analogue for. `tokens`
+ * is the closed, typed replacement: numbers rather than `"8px"` strings, because there are no units
+ * here.
+ */
+export interface Tokens {
+	radius: number;
+	spacing: number;
+	fontSize: number;
+	labelFontSize: number;
+	borderWidth: number;
+	controlHeight: number;
+	fontFamily: string | undefined;
+}
+
+/**
+ * The web's `classes` are CSS declarations keyed by `whop-*` part names. `parts` is the same idea
+ * with React Native style objects instead: flat per-part overrides applied after the theme, with no
+ * cascade, no pseudo-classes and no combinators.
+ *
+ * Names follow the web's wherever the two surfaces mean the same thing — `whop-PaymentMethodTile`,
+ * `whop-PaymentMethodDetail`, `whop-PaymentMethodRowSelected`, `whop-CardFieldGroup`. They diverge
+ * only where the surfaces genuinely differ, in three ways:
+ *
+ *   - This surface is MORE granular in places: `whop-CardNumberField`, `whop-CardExpiryField` and
+ *     `whop-CardCvcField` are separately themeable where the web has one `whop-CardFieldInput`.
+ *   - It is generic where the web is per-element: one `whop-Input` / `whop-Label` / `whop-ErrorText`
+ *     serves every field, where the web publishes `whop-PaymentFieldInput`, `whop-EmailInput`,
+ *     `whop-TaxIdInput` and so on. Matching that would mean adding parts, not renaming them.
+ *   - Some parts have no web counterpart at all: `whop-Sheet` and `whop-SheetRow` (the web uses a
+ *     dropdown, not a bottom sheet) and `whop-AddressSuggestions`.
+ *
+ * So a web appearance object does not port across wholesale, and the parts that do not match are
+ * the ones where the web has nothing to match.
+ */
+export type Parts = Partial<Record<PartName, ViewStyle & TextStyle>>;
+
+export type PartName =
+	| 'whop-Root'
+	| 'whop-Label'
+	| 'whop-Input'
+	| 'whop-InputFocused'
+	| 'whop-InputInvalid'
+	| 'whop-ErrorText'
+	| 'whop-HelperText'
+	| 'whop-Select'
+	| 'whop-SelectValue'
+	| 'whop-Sheet'
+	| 'whop-SheetRow'
+	| 'whop-CardNumberField'
+	| 'whop-CardExpiryField'
+	| 'whop-CardCvcField'
+	| 'whop-CardFieldGroup'
+	| 'whop-AddressCountrySelect'
+	| 'whop-AddressSuggestions'
+	| 'whop-AddressSuggestion'
+	| 'whop-AddressRow'
+	| 'whop-PaymentMethodTile'
+	| 'whop-PaymentMethodRowSelected'
+	| 'whop-MethodTileLabel'
+	| 'whop-PaymentMethodDetail'
+	| 'whop-Branding'
+	| 'whop-BrandingLink'
+	| 'whop-Skeleton';
+
+export type Appearance = {
+	theme?: Theme | null;
+	tokens?: Partial<Tokens> | null;
+	parts?: Parts | null;
+	/** @deprecated CSS custom properties do not exist on React Native. Use `tokens`. */
+	variables?: never;
+	/** @deprecated CSS declarations do not exist on React Native. Use `parts`. */
+	classes?: never;
+};
+
+const ACCENT_SET: ReadonlySet<string> = new Set(ACCENT_NAMES);
+const GRAY_SET: ReadonlySet<string> = new Set([...GRAY_NAMES, 'auto']);
+const VALUES = {
+	appearance: new Set(['light', 'dark']),
+	dangerColor: new Set(['ruby', 'red', 'tomato']),
+	warningColor: new Set(['yellow', 'amber']),
+	successColor: new Set(['green', 'teal', 'jade', 'grass']),
+	infoColor: new Set(['sky', 'blue']),
+} as const;
+
+/** An unknown value falls back rather than throwing, matching `parse-theme.ts`. */
+export function parseTheme(theme?: Theme | null): Theme {
+	if (!theme) return {};
+	const pick = <K extends keyof typeof VALUES>(key: K, value: unknown): Theme[K] =>
+		typeof value === 'string' && VALUES[key].has(value) ? (value as Theme[K]) : undefined;
+	return {
+		appearance: pick('appearance', theme.appearance),
+		accentColor: typeof theme.accentColor === 'string' && ACCENT_SET.has(theme.accentColor) ? theme.accentColor : undefined,
+		grayColor: typeof theme.grayColor === 'string' && GRAY_SET.has(theme.grayColor) ? theme.grayColor : undefined,
+		dangerColor: pick('dangerColor', theme.dangerColor),
+		warningColor: pick('warningColor', theme.warningColor),
+		successColor: pick('successColor', theme.successColor),
+		infoColor: pick('infoColor', theme.infoColor),
+	};
+}
+
+/**
+ * A silently-ignored style object is the worst failure available here, so a web appearance passed
+ * unchanged is refused by name rather than dropped.
+ */
+export function assertNativeAppearance(appearance: Appearance | undefined): void {
+	if (!appearance) return;
+	const bag = appearance as Record<string, unknown>;
+	if (bag.variables !== undefined) {
+		throw new Error(
+			'whop elements: `appearance.variables` is a CSS concept with no React Native equivalent — use `appearance.tokens` (numbers, not "8px" strings).',
+		);
+	}
+	if (bag.classes !== undefined) {
+		throw new Error(
+			'whop elements: `appearance.classes` is a CSS concept with no React Native equivalent — use `appearance.parts` (the same whop-* part names, React Native style objects).',
+		);
+	}
+}
+
+export const DEFAULT_TOKENS: Tokens = {
+	radius: 8,
+	spacing: 4,
+	fontSize: 15,
+	labelFontSize: 13,
+	borderWidth: 1,
+	controlHeight: 44,
+	fontFamily: undefined,
+};

package/src/theme/provider.tsx

@@ -0,0 +1,28 @@
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+
+import type { Appearance } from './appearance';
+import { type ResolvedTheme, resolveTheme } from './resolve';
+
+const ThemeContext = createContext<ResolvedTheme | null>(null);
+
+export function ThemeProvider({
+	appearance,
+	children,
+}: {
+	appearance?: Appearance | null;
+	children: ReactNode;
+}): ReactNode {
+	const system = useColorScheme();
+	const resolved = useMemo(() => resolveTheme(appearance ?? undefined, system ?? 'light'), [appearance, system]);
+	return <ThemeContext.Provider value={resolved}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ResolvedTheme {
+	const theme = useContext(ThemeContext);
+	if (!theme) throw new Error('Whop Elements components must be used within <WhopElements>');
+	return theme;
+}
+
+export { alphaStep, resolveTheme, step } from './resolve';
+export type { ResolvedTheme } from './resolve';

package/src/theme/resolve.ts

@@ -0,0 +1,68 @@
+import {
+	type Appearance,
+	DEFAULT_TOKENS,
+	type Parts,
+	parseTheme,
+	type Theme,
+	type Tokens,
+} from './appearance';
+import { ACCENT_SCALES, type ColorScales, GRAY_SCALES } from './scales.generated';
+
+export interface ResolvedTheme {
+	mode: 'light' | 'dark';
+	accent: ColorScales;
+	gray: ColorScales;
+	danger: ColorScales;
+	warning: ColorScales;
+	success: ColorScales;
+	info: ColorScales;
+	tokens: Tokens;
+	parts: Parts;
+}
+
+/** frosted's pairing: a neutral carrying a hint of the accent unless one is named. */
+const GRAY_FOR_ACCENT: Record<string, string> = {
+	tomato: 'mauve', red: 'mauve', ruby: 'mauve', crimson: 'mauve', pink: 'mauve', plum: 'mauve',
+	purple: 'mauve', violet: 'mauve', iris: 'slate', indigo: 'slate', blue: 'slate', sky: 'slate',
+	cyan: 'slate', teal: 'sage', jade: 'sage', mint: 'sage', green: 'sage', grass: 'olive',
+	lime: 'olive', yellow: 'sand', lemon: 'sand', amber: 'sand', orange: 'sand', brown: 'sand',
+	gold: 'sand', bronze: 'sand', magenta: 'mauve', gray: 'gray',
+};
+
+export function resolveTheme(appearance: Appearance | undefined, system: 'light' | 'dark'): ResolvedTheme {
+	const theme: Theme = parseTheme(appearance?.theme);
+	// An unset appearance follows the device, which is what a native buyer expects.
+	const mode = theme.appearance ?? system;
+
+	const accentName = theme.accentColor ?? 'blue';
+	const grayName =
+		theme.grayColor === 'auto' || theme.grayColor === undefined
+			? (GRAY_FOR_ACCENT[accentName] ?? 'gray')
+			: theme.grayColor;
+
+	return {
+		mode,
+		accent: pickAccent(accentName, mode),
+		gray: GRAY_SCALES[grayName]?.[mode] ?? GRAY_SCALES.gray![mode],
+		danger: pickAccent(theme.dangerColor ?? 'red', mode),
+		warning: pickAccent(theme.warningColor ?? 'amber', mode),
+		success: pickAccent(theme.successColor ?? 'green', mode),
+		info: pickAccent(theme.infoColor ?? 'blue', mode),
+		tokens: { ...DEFAULT_TOKENS, ...appearance?.tokens },
+		parts: appearance?.parts ?? {},
+	};
+}
+
+function pickAccent(name: string, mode: 'light' | 'dark'): ColorScales {
+	return ACCENT_SCALES[name]?.[mode] ?? ACCENT_SCALES.blue![mode];
+}
+
+/** Radix scales are 1-indexed in their own docs; keeping that here makes call sites read like the
+ *  design tokens they mirror. */
+export function step(scale: ColorScales, n: number): string {
+	return scale.solid[n - 1] ?? scale.solid[0]!;
+}
+
+export function alphaStep(scale: ColorScales, n: number): string {
+	return scale.alpha[n - 1] ?? scale.alpha[0]!;
+}