@whop/elements-react-native 0.1.0

package/scripts/codegen-shims.mjs

@@ -0,0 +1,409 @@
+#!/usr/bin/env node
+/**
+ * Emits the Objective-C++ that React Native Codegen requires on iOS and that nobody should ever
+ * hand-maintain.
+ *
+ * A Fabric component view must be an ObjC++ class conforming to RCTComponentViewProtocol, because
+ * its props are C++ templates that Swift cannot see; a Turbo module must subclass the Codegen-emitted
+ * NativeXSpecBase for the same reason. Expo solves this with one generic ObjC++ base written once in
+ * expo-modules-core; this file solves it by generating the layer from the same specs Codegen reads,
+ * so a rename can never land on one side only.
+ *
+ * Output goes to ios/generated/, which is gitignored and rebuilt on `prepare`. Everything a human
+ * writes on iOS lives in ios/Sources/WhopElements and is Swift.
+ */
+import { mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+const specsDir = join(root, 'src', 'specs');
+const outDir = join(root, 'ios', 'generated');
+
+const SPEC_LIBRARY = 'WhopElementsSpec';
+
+/** codegen prop type -> { objc, cxx accessor, swift } */
+const PROP_TYPES = {
+	string: { objc: 'NSString *', convert: (expr) => `RCTNSStringFromString(${expr})`, compare: (a, b) => `${a} != ${b}` },
+	boolean: { objc: 'BOOL', convert: (expr) => expr, compare: (a, b) => `${a} != ${b}` },
+	double: { objc: 'double', convert: (expr) => expr, compare: (a, b) => `${a} != ${b}` },
+	enum: {
+		objc: 'NSString *',
+		convert: (expr, name) => `RCTNSStringFrom${name}(${expr})`,
+		compare: (a, b) => `${a} != ${b}`,
+	},
+};
+
+function read(file) {
+	return readFileSync(join(specsDir, file), 'utf8');
+}
+
+/** a commented-out example member would otherwise register as a real one */
+function stripComments(src) {
+	return src.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^[ \t]*\/\/.*$/gm, '');
+}
+
+function parseComponentSpec(file) {
+	const src = stripComments(read(file));
+	const name = /codegenNativeComponent<NativeProps>\(\s*'([^']+)'/.exec(src)?.[1];
+	if (!name) throw new Error(`${file}: no codegenNativeComponent<NativeProps>('Name') call found`);
+
+	const body = /export interface NativeProps extends ViewProps \{([\s\S]*?)\n\}/.exec(src)?.[1] ?? '';
+	const props = [];
+	const events = [];
+	for (const line of body.split('\n')) {
+		const m = /^\s*(\w+)\??:\s*(.+?);\s*$/.exec(line);
+		if (!m) continue;
+		const [, key, type] = m;
+		if (/DirectEventHandler|BubblingEventHandler/.test(type)) {
+			events.push({ key });
+			continue;
+		}
+		if (/WithDefault<\s*'/.test(type)) props.push({ key, kind: 'enum' });
+		else if (/WithDefault<\s*boolean|(^|\W)boolean(\W|$)/.test(type)) props.push({ key, kind: 'boolean' });
+		else if (/Double|Float|Int32/.test(type)) props.push({ key, kind: 'double' });
+		else props.push({ key, kind: 'string' });
+	}
+	return { name, props, events };
+}
+
+function parseModuleSpec(file) {
+	const src = stripComments(read(file));
+	// Either verb: `get` returns null for a module the binary lacks, `getEnforcing` throws.
+	const name = /TurboModuleRegistry\.get(?:Enforcing)?<Spec>\(\s*'([^']+)'/.exec(src)?.[1];
+	if (!name) throw new Error(`${file}: no TurboModuleRegistry.get<Spec>('Name') call found`);
+
+	const body = /export interface Spec extends TurboModule \{([\s\S]*?)\n\}/.exec(src)?.[1] ?? '';
+	const methods = [];
+	for (const line of body.split('\n')) {
+		const m = /^\s*(\w+)\(([^)]*)\)\s*:\s*(.+?);\s*$/.exec(line);
+		if (!m) continue;
+		const [, key, rawArgs, ret] = m;
+		const args = rawArgs
+			.split(',')
+			.map((a) => a.trim())
+			.filter(Boolean)
+			.map((a) => {
+				const [argName, argType] = a.split(':').map((p) => p.trim());
+				const optional = argName.endsWith('?') || /\|\s*null/.test(argType ?? '');
+				const base = argName.replace(/\?$/, '');
+				// `id` is a type in Objective-C, and a few others are keywords: emitting one as a
+				// parameter name produces a .mm that fails to compile, with the error pointing at
+				// generated code rather than at the spec that caused it.
+				if (RESERVED_OBJC_NAMES.has(base)) {
+					throw new Error(
+						`src/specs: '${base}' cannot be a parameter name — it is reserved in Objective-C, and the ` +
+							`generated bridge would not compile. Rename it in the spec (e.g. '${base}Value').`,
+					);
+				}
+				let objc = 'NSString *';
+				if (/\bboolean\b/.test(argType ?? '')) objc = 'BOOL';
+				else if (/\bnumber\b/.test(argType ?? '')) objc = 'double';
+				return { name: base, objc, optional };
+			});
+		methods.push({ key, args, promise: ret.trim().startsWith('Promise<'), returns: ret.trim() });
+	}
+	return { name, methods };
+}
+
+const RESERVED_OBJC_NAMES = new Set(['id', 'self', 'super', 'nil', 'Nil', 'BOOL', 'YES', 'NO', 'Class', 'SEL', 'IMP']);
+
+const HEADER = `// GENERATED by scripts/codegen-shims.mjs — do not edit, do not commit.\n// Source of truth: src/specs/. Implementations are Swift, in ios/Sources/WhopElements.\n`;
+
+function upperFirst(s) {
+	return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function componentHeader(spec) {
+	return `${HEADER}
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ${spec.name}ComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+`;
+}
+
+/** The ObjC mirror of the Swift view's @objc surface. Emitted from the same spec as the shim, so
+ *  the two sides cannot drift; a Swift rename fails the ObjC compile instead of failing at runtime. */
+function componentMirror(spec) {
+	const setters = spec.props
+		.map((p) => {
+			const t = PROP_TYPES[p.kind];
+			const objcType = t.objc === 'NSString *' ? 'NSString * _Nonnull' : t.objc;
+			return `- (void)set${upperFirst(p.key)}:(${objcType})value;`;
+		})
+		.join('\n');
+	const eventBlocks = spec.events.map((e) => `@property (nonatomic, copy, nullable) void (^${e.key})(void);`).join('\n');
+	return `${HEADER}
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ${spec.name}Impl : UIView
+${eventBlocks}
+${setters}
+@end
+
+NS_ASSUME_NONNULL_END
+`;
+}
+
+function componentImpl(spec) {
+	const propDiffs = spec.props
+		.map((p) => {
+			const t = PROP_TYPES[p.kind];
+			const value = p.kind === 'enum' ? `${spec.name}${upperFirst(p.key)}ToString(newViewProps.${p.key})` : t.convert(`newViewProps.${p.key}`);
+			return `  if (oldViewProps.${p.key} != newViewProps.${p.key}) {
+    [_impl set${upperFirst(p.key)}:${value}];
+  }`;
+		})
+		.join('\n');
+
+	const enumHelpers = spec.props
+		.filter((p) => p.kind === 'enum')
+		.map(
+			(p) => `static NSString *${spec.name}${upperFirst(p.key)}ToString(${spec.name}${upperFirst(p.key)} value)
+{
+  return RCTNSStringFromString(toString(value));
+}`,
+		)
+		.join('\n\n');
+
+	const eventWiring = spec.events
+		.map(
+			(e) => `    __weak __typeof(self) weakSelf = self;
+    _impl.${e.key} = ^{
+      __strong __typeof(weakSelf) strongSelf = weakSelf;
+      if (!strongSelf || !strongSelf->_eventEmitter) { return; }
+      std::static_pointer_cast<const ${spec.name}EventEmitter>(strongSelf->_eventEmitter)->${e.key}({});
+    };`,
+		)
+		.join('\n');
+
+	return `${HEADER}
+#import "${spec.name}ComponentView.h"
+#import "WhopElementsShims.h"
+
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+
+#import <react/renderer/components/${SPEC_LIBRARY}/ComponentDescriptors.h>
+#import <react/renderer/components/${SPEC_LIBRARY}/EventEmitters.h>
+#import <react/renderer/components/${SPEC_LIBRARY}/Props.h>
+#import <react/renderer/components/${SPEC_LIBRARY}/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+
+${enumHelpers}
+
+@interface ${spec.name}ComponentView () <RCT${spec.name}ViewProtocol>
+@end
+
+@implementation ${spec.name}ComponentView {
+  ${spec.name}Impl *_impl;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<${spec.name}ComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const ${spec.name}Props>();
+    _props = defaultProps;
+    _impl = [[${spec.name}Impl alloc] initWithFrame:frame];
+${eventWiring}
+    self.contentView = _impl;
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<${spec.name}Props const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<${spec.name}Props const>(props);
+
+${propDiffs}
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> ${spec.name}Cls(void)
+{
+  return ${spec.name}ComponentView.class;
+}
+`;
+}
+
+/**
+ * Codegen's own Objective-C conventions, verified against its emitted protocol:
+ *  - a boolean return is NSNumber *, a string return is NSString *, void stays void
+ *  - a promise becomes trailing resolve/reject blocks
+ *  - the first argument rides the selector, the rest are named keywords
+ */
+function objcReturn(ret) {
+	if (/\bboolean\b/.test(ret)) return 'NSNumber *';
+	if (/\bstring\b/.test(ret)) return 'NSString *';
+	return 'void';
+}
+
+/** What Swift's @objc bridging actually produces: a Bool becomes BOOL, not a boxed NSNumber. */
+function swiftReturn(ret) {
+	if (/\bboolean\b/.test(ret)) return 'BOOL';
+	if (/\bstring\b/.test(ret)) return 'NSString * _Nonnull';
+	return 'void';
+}
+
+function objcArgType(arg) {
+	if (arg.objc !== 'NSString *') return arg.objc;
+	return arg.optional ? 'NSString * _Nullable' : 'NSString *';
+}
+
+function selector(m, tail = []) {
+	const parts = m.args.map((a, i) =>
+		i === 0 ? `${m.key}:(${objcArgType(a)})${a.name}` : `${a.name}:(${objcArgType(a)})${a.name}`,
+	);
+	if (parts.length === 0) parts.push(m.key);
+	return [...parts, ...tail].join(' ');
+}
+
+/** The Swift class's @objc surface, mirrored so a rename fails the compile instead of the app. */
+function moduleMirror(spec) {
+	const decls = spec.methods
+		.map((m) => {
+			if (m.promise) {
+				return `- (void)${selector(m, [
+					'resolve:(void (^ _Nonnull)(id _Nullable))resolve',
+					'reject:(void (^ _Nonnull)(NSString * _Nonnull, NSString * _Nonnull))reject',
+				])};`;
+			}
+			return `- (${swiftReturn(m.returns)})${selector(m)};`;
+		})
+		.join('\n');
+
+	return `@interface ${spec.name}Impl : NSObject
+${decls}
+@end
+`;
+}
+
+function moduleImpl(spec) {
+	const body = spec.methods
+		.map((m) => {
+			const call = m.args.map((a, i) => (i === 0 ? `:${a.name}` : ` ${a.name}:${a.name}`)).join('');
+			const head = m.args.length === 0 ? m.key : '';
+
+			if (m.promise) {
+				return `- (void)${selector(m, ['resolve:(RCTPromiseResolveBlock)resolve', 'reject:(RCTPromiseRejectBlock)reject'])}
+{
+  [_impl ${m.key}${call} resolve:^(id _Nullable value) { resolve(value); }
+${' '.repeat(m.key.length + 8)}reject:^(NSString *code, NSString *message) { reject(code, message, nil); }];
+}`;
+			}
+
+			const ret = objcReturn(m.returns);
+			if (ret === 'void') {
+				return `- (void)${selector(m)}
+{
+  [_impl ${head || m.key}${call}];
+}`;
+			}
+			// Codegen declares a boolean return as NSNumber *, so box the Swift BOOL.
+			const expr = ret === 'NSNumber *' ? `@([_impl ${head || m.key}${call}])` : `[_impl ${head || m.key}${call}]`;
+			return `- (${ret})${selector(m)}
+{
+  return ${expr};
+}`;
+		})
+		.join('\n\n');
+
+	return `${HEADER}
+#import "${spec.name}Module.h"
+#import "WhopElementsShims.h"
+
+@implementation ${spec.name}Module {
+  ${spec.name}Impl *_impl;
+}
+
+// The JS name, explicitly: bare RCT_EXPORT_MODULE() registers under the CLASS name
+// ("${spec.name}Module"), and TurboModuleRegistry then cannot find "${spec.name}".
+RCT_EXPORT_MODULE(${spec.name})
+
+- (instancetype)init
+{
+  if (self = [super init]) {
+    _impl = [${spec.name}Impl new];
+  }
+  return self;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::Native${spec.name}SpecJSI>(params);
+}
+
+${body}
+
+@end
+`;
+}
+
+function moduleHeader(spec) {
+	return `${HEADER}
+#import <${SPEC_LIBRARY}/${SPEC_LIBRARY}.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ${spec.name}Module : NSObject <Native${spec.name}Spec>
+@end
+
+NS_ASSUME_NONNULL_END
+`;
+}
+
+function main() {
+	rmSync(outDir, { recursive: true, force: true });
+	mkdirSync(outDir, { recursive: true });
+
+	const files = readdirSync(specsDir).filter((f) => f.endsWith('.ts'));
+	const components = files.filter((f) => f.endsWith('NativeComponent.ts')).map(parseComponentSpec);
+	const modules = files.filter((f) => /^Native\w+\.ts$/.test(f)).map(parseModuleSpec);
+
+	for (const spec of components) {
+		writeFileSync(join(outDir, `${spec.name}ComponentView.h`), componentHeader(spec));
+		writeFileSync(join(outDir, `${spec.name}ComponentView.mm`), componentImpl(spec));
+	}
+	for (const spec of modules) {
+		writeFileSync(join(outDir, `${spec.name}Module.h`), moduleHeader(spec));
+		writeFileSync(join(outDir, `${spec.name}Module.mm`), moduleImpl(spec));
+	}
+
+	const mirrors = [...components.map(componentMirror), ...modules.map(moduleMirror)]
+		.map((m) =>
+			m
+				.replace(HEADER, '')
+				.replace(/#import <UIKit\/UIKit\.h>/, '')
+				.replace(/NS_ASSUME_NONNULL_(BEGIN|END)/g, '')
+				.trim(),
+		)
+		.join('\n\n');
+	writeFileSync(
+		join(outDir, 'WhopElementsShims.h'),
+		`${HEADER}\n#import <UIKit/UIKit.h>\n\nNS_ASSUME_NONNULL_BEGIN\n\n${mirrors}\n\nNS_ASSUME_NONNULL_END\n`,
+	);
+
+	const names = [...components.map((c) => c.name), ...modules.map((m) => m.name)];
+	console.log(`whop elements: emitted ios/generated for ${names.join(', ')}`);
+}
+
+main();

package/scripts/gen-country-names.mjs

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Emits src/core/address/country-names.generated.ts — English display names for exactly the
+ * countries in the address catalog.
+ *
+ * Hermes does not ship `Intl.DisplayNames`, so the address element's country selector cannot
+ * resolve names at runtime the way the web element does. Node has full ICU, so the table is
+ * resolved here at build time instead. A runtime that DOES have DisplayNames still gets localized
+ * names; this is the floor, not a replacement.
+ *
+ * Run after bumping the country catalog: pnpm country-names
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+const catalog = join(root, 'src', 'core', 'address', 'country-data.ts');
+
+function codes() {
+	const source = readFileSync(catalog, 'utf8');
+	const found = new Set();
+	for (const match of source.matchAll(/^ {2}([A-Z]{2}): \{/gm)) found.add(match[1]);
+	return [...found].sort();
+}
+
+function main() {
+	const display = new Intl.DisplayNames(['en'], { type: 'region' });
+	const rows = [];
+	for (const code of codes()) {
+		let name;
+		try {
+			name = display.of(code);
+		} catch {
+			name = undefined;
+		}
+		// An unknown region resolves to the code itself; no row is better than a fake name.
+		if (name && name !== code) rows.push([code, name]);
+	}
+
+	const body = rows.map(([code, name]) => `\t${code}: ${JSON.stringify(name)},`).join('\n');
+	writeFileSync(
+		join(root, 'src', 'core', 'address', 'country-names.generated.ts'),
+		[
+			'// GENERATED by scripts/gen-country-names.mjs from Node\'s ICU. Run `pnpm country-names`.',
+			'//',
+			'// Hermes ships no Intl.DisplayNames, so this is the country selector\'s name source there.',
+			'',
+			'export const COUNTRY_NAMES_EN: Record<string, string> = {',
+			body,
+			'};',
+			'',
+		].join('\n'),
+	);
+	console.log(`whop elements: wrote country-names.generated.ts (${rows.length} countries)`);
+}
+
+main();

package/scripts/gen-theme.mjs

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+/**
+ * Emits src/theme/scales.generated.ts from frosted-ui's own stylesheet.
+ *
+ * NOT from @radix-ui/colors, which is what this generator used to read while claiming the result
+ * was "the same scales the web elements resolve through frosted-ui". It is not: frosted-ui
+ * customizes them, so raw Radix put blue-9 at #0090ff where the web renders #1754d8 — a visibly
+ * different accent on a payments button, in a package whose docs promise one styling vocabulary
+ * across both surfaces.
+ *
+ * frosted-ui publishes the palette only as CSS custom properties, so the values are parsed out of
+ * styles.css. It stays a devDependency: generation-time only, and the emitted file is committed.
+ *
+ * Run after bumping frosted-ui: pnpm theme
+ */
+import { createRequire } from 'node:module';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+// The named scales the Appearance type accepts, from
+// frontend/packages/elements-framework/src/builder/appearance/parse-theme.ts.
+const ACCENTS = [
+	'ruby', 'blue', 'red', 'yellow', 'green', 'gray', 'tomato', 'crimson', 'pink', 'plum',
+	'purple', 'violet', 'iris', 'cyan', 'teal', 'jade', 'grass', 'brown', 'orange', 'indigo',
+	'sky', 'mint', 'amber', 'lime', 'lemon', 'magenta', 'gold', 'bronze',
+];
+const GRAYS = ['gray', 'mauve', 'slate', 'sage', 'olive', 'sand'];
+
+// Radix has no `lemon` or `magenta`; frosted maps them onto their nearest published scale.
+const ALIASES = { lemon: 'yellow', magenta: 'pink' };
+
+/** Steps 9 and 10 are solid brand colors; every other step is a surface or a border. */
+const CONTRAST_ON_9 = new Set(['sky', 'mint', 'lime', 'yellow', 'amber', 'lemon']);
+
+/**
+ * The light and dark variable blocks, hex values only.
+ *
+ * frosted-ui also emits a display-p3 copy of every scale inside an @supports block. Those are not
+ * colors React Native can parse, and they appear LATER in the file, so a naive last-wins parse
+ * would collect them instead. Anything that is not a hex literal is skipped.
+ */
+function readPalette(css) {
+	const light = {};
+	const dark = {};
+	// Blocks are introduced by their selector; the dark one is `.dark, .dark-theme`.
+	const blocks = css.split(/(?=^\s*[.:][^{]*\{)/m);
+	for (const block of blocks) {
+		const header = block.slice(0, block.indexOf('{'));
+		if (/display-p3/.test(block.slice(0, 200))) continue;
+		const target = /\.dark/.test(header) ? dark : /:root|\.light/.test(header) ? light : null;
+		if (!target) continue;
+		for (const [, name, step, value] of block.matchAll(/--([a-z]+)-(a?\d{1,2}):\s*(#[0-9a-fA-F]{3,8})/g)) {
+			target[`${name}-${step}`] = value;
+		}
+	}
+	if (!light['blue-9'] || !dark['blue-9']) {
+		throw new Error('could not read frosted-ui scales from styles.css — did its structure change?');
+	}
+	return { light, dark };
+}
+
+function scale(palette, name, dark, alpha) {
+	const source = ALIASES[name] ?? name;
+	const bag = dark ? palette.dark : palette.light;
+	return Array.from({ length: 12 }, (_, i) => {
+		const key = `${source}-${alpha ? 'a' : ''}${i + 1}`;
+		const step = bag[key];
+		if (!step) throw new Error(`frosted-ui is missing --${key} in the ${dark ? 'dark' : 'light'} block`);
+		return step;
+	});
+}
+
+function main() {
+	const css = readFileSync(require.resolve('frosted-ui/styles.css'), 'utf8');
+	const colors = readPalette(css);
+	const out = [];
+
+	out.push('// GENERATED by scripts/gen-theme.mjs from frosted-ui/styles.css. Run `pnpm theme` to refresh.');
+	out.push('');
+	out.push('export type Scale = readonly [string, string, string, string, string, string, string, string, string, string, string, string];');
+	out.push('');
+	out.push('export interface ColorScales {');
+	out.push('\tsolid: Scale;');
+	out.push('\talpha: Scale;');
+	out.push('\t/** Text that sits on step 9. */');
+	out.push('\tcontrast: string;');
+	out.push('}');
+	out.push('');
+
+	const emit = (label, names) => {
+		out.push(`export const ${label}: Record<string, { light: ColorScales; dark: ColorScales }> = {`);
+		for (const name of names) {
+			const contrast = CONTRAST_ON_9.has(name) ? '#1c2024' : '#ffffff';
+			out.push(`\t${name}: {`);
+			for (const mode of ['light', 'dark']) {
+				const dark = mode === 'dark';
+				out.push(`\t\t${mode}: {`);
+				out.push(`\t\t\tsolid: [${scale(colors, name, dark, false).map((c) => `'${c}'`).join(', ')}],`);
+				out.push(`\t\t\talpha: [${scale(colors, name, dark, true).map((c) => `'${c}'`).join(', ')}],`);
+				out.push(`\t\t\tcontrast: '${contrast}',`);
+				out.push('\t\t},');
+			}
+			out.push('\t},');
+		}
+		out.push('};');
+		out.push('');
+	};
+
+	emit('ACCENT_SCALES', ACCENTS);
+	emit('GRAY_SCALES', GRAYS);
+
+	out.push(`export const ACCENT_NAMES = [${ACCENTS.map((a) => `'${a}'`).join(', ')}] as const;`);
+	out.push(`export const GRAY_NAMES = [${GRAYS.map((g) => `'${g}'`).join(', ')}] as const;`);
+	out.push('');
+
+	writeFileSync(join(root, 'src', 'theme', 'scales.generated.ts'), out.join('\n'));
+	console.log(`whop elements: wrote src/theme/scales.generated.ts (${ACCENTS.length} accents, ${GRAYS.length} grays)`);
+}
+
+main();

package/scripts/gen-wordmark.mjs

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+/**
+ * Renders assets/whop-wordmark-{light,dark}{,@2x,@3x}.png from the same paths the web element draws
+ * (frontend/apps/web/src/elements/payments/whop-logo.tsx).
+ *
+ * A bitmap rather than react-native-svg: a required native peer would have to ship its own
+ * Package.swift for a Swift Package Manager consumer to build, and an optional one is impossible
+ * because Metro resolves `require` statically.
+ *
+ * Needs rsvg-convert (`brew install librsvg`). Run after changing the paths: pnpm wordmark
+ */
+import { execFileSync } from 'node:child_process';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+const assets = join(root, 'assets');
+
+/** Whop's brand orange, the same default the web wordmark carries. */
+const MARK_FILL = '#FA4616';
+const WIDTH = 119;
+const HEIGHT = 26;
+
+const MARK_PATHS = [
+	'M6.29654 0.0205078C3.70387 0.0205078 1.92397 1.15863 0.565903 2.45194C0.565903 2.45194 0.0206171 2.96927 0.0309055 2.98996L5.71011 8.70125L11.3893 2.98996C10.309 1.50006 8.28221 0.0205078 6.29654 0.0205078Z',
+	'M20.3194 0.0205078C17.7267 0.0205078 15.9468 1.16897 14.5888 2.45194C14.5888 2.45194 14.0949 2.95892 14.0641 2.98996L7.04736 10.0463L12.7163 15.7472L25.4019 2.98996C24.3216 1.50006 22.2948 0.0205078 20.3194 0.0205078Z',
+	'M34.3738 0.0205078C31.7811 0.0205078 30.0012 1.16897 28.6431 2.45194C28.6431 2.45194 28.1287 2.95893 28.1081 2.98997L14.0645 17.1026L15.546 18.5925C17.8403 20.8998 21.6059 20.8998 23.9105 18.5925L39.4357 2.98997C38.3657 1.50006 36.3594 0.0205078 34.3738 0.0205078Z',
+];
+
+const WORD_PATHS = [
+	'M49.8827 20.3443L45.5576 2.99365H49.4193L52.3233 15.0096H52.3748L56.5557 2.99365H59.8716L64.0525 15.0096H64.104L67.0286 2.99365H70.8696L66.5446 20.3443H62.6108L58.2342 8.74266H58.1827L53.7856 20.3443H49.8827Z',
+	'M72.0435 2.99365H75.6786V8.74266H75.7301C76.0493 8.15222 76.6878 7.67572 77.4292 7.35461C78.1192 7.05421 79.1181 6.86776 80.0037 6.86776C80.982 6.86776 82.3207 7.11636 83.2784 7.61357C84.2464 8.14186 84.9775 8.84624 85.4615 9.73708C85.9867 10.659 86.2441 11.6948 86.2441 12.855V20.3443H82.609V13.3419C82.609 12.3164 82.3104 11.5291 81.7028 10.9697C81.0952 10.4104 80.2714 10.1307 79.221 10.1307C78.1707 10.1307 77.3365 10.4311 76.6672 11.0215C76.0081 11.612 75.6889 12.3889 75.6889 13.3419V20.3443H72.0538V2.99365H72.0435Z',
+	'M87.521 13.7976C87.521 12.7617 87.7166 11.8087 88.108 10.949C88.4993 10.0892 89.0348 9.36409 89.7144 8.76329C90.3941 8.1625 91.1767 7.69636 92.0623 7.36489C92.9479 7.03341 93.885 6.86768 94.8633 6.86768C95.8416 6.86768 96.8302 7.03341 97.7261 7.37525C98.622 7.71708 99.3944 8.18321 100.064 8.78401C100.723 9.38481 101.248 10.1099 101.639 10.9593C102.02 11.8087 102.216 12.7513 102.216 13.7872C102.216 14.8231 102.02 15.7968 101.629 16.6462C101.238 17.4956 100.702 18.2207 100.033 18.8215C99.3635 19.4223 98.5808 19.8884 97.6849 20.2199C96.789 20.5513 95.8519 20.7171 94.8736 20.7171C93.8953 20.7171 92.9273 20.5513 92.0314 20.2095C91.1355 19.8677 90.3632 19.4015 89.6938 18.7904C89.0348 18.1792 88.4993 17.4541 88.108 16.6047C87.7166 15.745 87.521 14.8127 87.521 13.7976ZM98.5808 13.7976C98.5808 12.6788 98.241 11.7776 97.5614 11.1043C96.8817 10.431 95.9858 10.0892 94.8736 10.0892C94.3278 10.0892 93.8336 10.1824 93.3702 10.3585C92.9067 10.545 92.5154 10.7936 92.1859 11.1147C91.8564 11.4358 91.6092 11.8294 91.4239 12.2852C91.2385 12.7513 91.1561 13.2486 91.1561 13.7976C91.1561 14.3466 91.2488 14.8438 91.4239 15.2996C91.6092 15.7553 91.8667 16.149 92.1962 16.4701C92.536 16.8015 92.9273 17.0501 93.3804 17.2366C93.8336 17.4231 94.3278 17.5059 94.8736 17.5059C95.4194 17.5059 95.9137 17.4127 96.3771 17.2366C96.8405 17.0501 97.2318 16.8015 97.5614 16.4804C97.8909 16.1593 98.1483 15.7657 98.3234 15.3099C98.4985 14.8438 98.5808 14.3362 98.5808 13.7976Z',
+	'M103.544 6.85742H107.035V8.74268H107.087C107.313 8.24547 108.271 7.41679 109.033 7.19926C109.785 6.98173 110.547 6.86778 111.319 6.86778C112.298 6.86778 113.204 7.05423 114.028 7.41679C114.851 7.77934 115.552 8.27655 116.159 8.89806C116.757 9.52993 117.22 10.255 117.56 11.0941C117.9 11.9331 118.064 12.8343 118.064 13.7873C118.064 14.7403 117.9 15.6933 117.56 16.5323C117.22 17.3714 116.757 18.1068 116.159 18.718C115.562 19.3395 114.851 19.8264 114.017 20.1785C113.193 20.5307 112.287 20.7068 111.33 20.7068C111.021 20.7068 110.671 20.6758 110.289 20.624C109.898 20.5618 109.527 20.4789 109.157 20.365C108.786 20.2511 108.436 20.106 108.096 19.9299C107.756 19.7538 107.478 19.557 107.252 19.3188H107.2V25.8965H103.565L103.544 6.85742ZM114.409 13.7977C114.409 12.6789 114.069 11.7777 113.399 11.1148C112.73 10.4518 111.834 10.11 110.722 10.11C110.331 10.11 109.919 10.1722 109.507 10.3068C109.085 10.4415 108.704 10.6279 108.364 10.8765C108.024 11.1252 107.736 11.4256 107.519 11.7674C107.303 12.1092 107.19 12.5132 107.19 12.9586V14.616C107.19 15.1961 107.355 15.6933 107.694 16.1283C108.024 16.553 108.456 16.8845 108.961 17.1124C109.486 17.3714 110.084 17.506 110.753 17.506C111.855 17.506 112.74 17.1642 113.41 16.4805C114.069 15.7969 114.409 14.8957 114.409 13.7977Z',
+];
+
+/** The mark keeps Whop's orange in both themes; only the wordmark's ink changes. */
+const INK = { light: '#1c2024', dark: '#f5f5f7' };
+
+function svg(wordFill) {
+	const paths = [
+		...MARK_PATHS.map((d) => `<path d="${d}" fill="${MARK_FILL}"/>`),
+		...WORD_PATHS.map((d) => `<path d="${d}" fill="${wordFill}"/>`),
+	].join('');
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${WIDTH}" height="${HEIGHT}" viewBox="0 0 ${WIDTH} ${HEIGHT}" fill="none">${paths}</svg>`;
+}
+
+function main() {
+	mkdirSync(assets, { recursive: true });
+	for (const [mode, ink] of Object.entries(INK)) {
+		const source = join(tmpdir(), `whop-wordmark-${mode}.svg`);
+		writeFileSync(source, svg(ink));
+		for (const scale of [1, 2, 3]) {
+			const suffix = scale === 1 ? '' : `@${scale}x`;
+			execFileSync('rsvg-convert', [
+				'-w', String(WIDTH * scale),
+				'-h', String(HEIGHT * scale),
+				source,
+				'-o', join(assets, `whop-wordmark-${mode}${suffix}.png`),
+			]);
+		}
+	}
+	console.log('whop elements: wrote assets/whop-wordmark-{light,dark}{,@2x,@3x}.png');
+}
+
+main();