@kbach/react-native 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/{jsx-runtime.mjs → jsx-runtime.web.mjs}

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-SVMYVXY6.mjs";
-import "./chunk-YHF3QLRL.mjs";
+} from "./chunk-MJWWZJMH.mjs";
+import "./chunk-OGFB3OXS.mjs";
 export {
   Fragment,
   jsx,

package/dist/theme.d.ts

@@ -0,0 +1,54 @@
+/**
+ * A plain hex value (static — same in both modes), or a `{ light, dark }`
+ * pair a caller sets manually in their own theme. Fully opt-in per color:
+ * nothing here picks a "dark variant" automatically. Only `useColors()`
+ * (a JS-value read, not a `className`) understands this shape — utility
+ * CLASS resolution (`bg-blue-6`) on native/Expo Go stays plain-string-only,
+ * same as it always was (dark mode for a CLASS is the separate `dark:`
+ * modifier, gated live at resolve time — see `resolve_style.rs`); a
+ * mode-aware entry referenced directly by a class name just doesn't
+ * resolve there, mirroring `resolvers/color.rs`'s own `lookup_hex`
+ * (`ColorValue::Plain` only, `ModeAware` -> `None`) exactly, same as it
+ * would on the web engine too.
+ */
+type ColorEntry = string | {
+    light: string;
+    dark: string;
+};
+/**
+ * Real Tailwind's `theme.container` config, mirroring
+ * `packages/core-engine/src/theme.rs`'s `ContainerConfig` exactly. `center`/
+ * `padding` DO reach native now (unlike the max-width breakpoint ladder,
+ * which is a `css.rs`-only concept with nothing to generate on native at
+ * all) — `resolvers::layout::resolve`'s `"container"` arm is shared by both
+ * dispatchers, and `margin`/`padding` are ordinary RN style properties.
+ */
+interface ContainerConfig {
+    center?: boolean;
+    padding?: string;
+}
+interface ThemeConfig {
+    colors: Record<string, ColorEntry>;
+    spacing: Record<string, number>;
+    screens: Record<string, number>;
+    /**
+     * e.g. "sans" -> "Inter, sans-serif". Optional, matching the Rust
+     * engine's own `#[serde(default)]`. Write it as a real web-shaped
+     * fallback stack even on this native-first package — native's own
+     * resolver strips it down to a single bare name at resolve time (RN's
+     * `fontFamily` prop can't take a fallback list — see
+     * `resolvers/mod.rs`'s `first_font_name`), so the SAME config still
+     * works unmodified on Expo Web, which needs the full stack.
+     */
+    fontFamily?: Record<string, string>;
+    darkMode: 'attribute' | 'class' | 'media';
+    /** Optional, matching `ContainerConfig`'s own `#[serde(default)]` on the Rust side. */
+    container?: ContainerConfig;
+}
+declare const defaultTheme: ThemeConfig;
+declare function setTheme(theme: ThemeConfig): void;
+declare function getTheme(): ThemeConfig;
+/** Memoized JSON serialization of the active theme — passed across the JNI boundary. */
+declare function getThemeJson(): string;
+
+export { type ColorEntry, type ContainerConfig, type ThemeConfig, defaultTheme, getTheme, getThemeJson, setTheme };

package/dist/{chunk-YHF3QLRL.mjs → theme.js}

@@ -1,3 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/theme.ts
+var theme_exports = {};
+__export(theme_exports, {
+  defaultTheme: () => defaultTheme,
+  getTheme: () => getTheme,
+  getThemeJson: () => getThemeJson,
+  setTheme: () => setTheme
+});
+module.exports = __toCommonJS(theme_exports);
+
 // src/generatedPalette.ts
 var PALETTE = {
   "amber-1": "#fffbeb",
@@ -278,19 +307,73 @@ var PALETTE = {
 // src/theme.ts
 var defaultTheme = {
   colors: PALETTE,
+  // Real Tailwind's default spacing scale in full — every step is exactly
+  // `n * 4px`, including the fractional `.5` steps (`1.5` -> 6px, `2.5` ->
+  // 10px, `3.5` -> 14px) and the "px" literal (a bare 1px). Only the
+  // "usual stops", though — `jsEngine/shared.ts`'s `spacingPx` (and the
+  // native Rust dispatcher's own `spacing_px`) falls back to Tailwind v4's
+  // live `n * 4px` formula for any bare numeric step not listed here
+  // (`p-0.25`, `w-13`, ...), so this table names the common values and
+  // gives a theme override something to target, not the full resolvable
+  // set. Mirrors @kbach/react's theme.ts exactly.
   spacing: {
-    // "0" is always a hardcoded zero in real Tailwind's own scale too,
-    // regardless of the base spacing unit — needed for `p-0`/`m-0`/etc.
-    // Mirrors the identical fix in @kbach/react's theme.ts.
     "0": 0,
+    "px": 1,
+    "0.5": 2,
     "1": 4,
+    "1.5": 6,
     "2": 8,
+    "2.5": 10,
+    "3": 12,
+    "3.5": 14,
     "4": 16,
+    "5": 20,
     "6": 24,
-    "8": 32
+    "7": 28,
+    "8": 32,
+    "9": 36,
+    "10": 40,
+    "11": 44,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "28": 112,
+    "32": 128,
+    "36": 144,
+    "40": 160,
+    "44": 176,
+    "48": 192,
+    "52": 208,
+    "56": 224,
+    "60": 240,
+    "64": 256,
+    "72": 288,
+    "80": 320,
+    "96": 384
   },
-  screens: {},
-  darkMode: "attribute"
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
+  // Byte-for-byte the same three stacks
+  // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
+  // falls back to. On native these three still effectively no-op (see
+  // `first_font_name`'s own doc comment for why a generic CSS keyword
+  // isn't a real loadable font) — only a caller-configured custom name
+  // changes native rendering; Expo Web uses the full stack as-is.
+  fontFamily: {
+    sans: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+  },
+  darkMode: "attribute",
+  // Empty by default, matching real Tailwind's own defaults.
+  container: {}
 };
 var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
@@ -304,71 +387,10 @@ function getTheme() {
 function getThemeJson() {
   return activeThemeJson;
 }
-
-// src/darkModeStore.ts
-import { Appearance } from "react-native";
-var listeners = /* @__PURE__ */ new Set();
-function systemPrefersDark() {
-  return Appearance.getColorScheme() === "dark";
-}
-function resolveIsDark(m) {
-  return m === "system" ? systemPrefersDark() : m === "dark";
-}
-var mode = "system";
-var isDark = resolveIsDark(mode);
-var hasExplicitChoice = false;
-var subscription = Appearance.addChangeListener(({ colorScheme }) => {
-  if (mode !== "system") return;
-  isDark = colorScheme === "dark";
-  notify();
-});
-function notify() {
-  for (const listener of listeners) listener();
-}
-function getGlobalDarkMode() {
-  return isDark;
-}
-function getGlobalThemeMode() {
-  return mode;
-}
-function setGlobalThemeMode(nextMode) {
-  mode = nextMode;
-  isDark = resolveIsDark(nextMode);
-  hasExplicitChoice = true;
-  notify();
-}
-function toggleGlobalDarkMode() {
-  setGlobalThemeMode(isDark ? "light" : "dark");
-}
-function subscribeGlobalDarkMode(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-function seedDefaultMode(fallback) {
-  if (hasExplicitChoice || mode === fallback) return;
-  mode = fallback;
-  isDark = resolveIsDark(fallback);
-  notify();
-}
-
-// src/nativeBridge.ts
-import { TurboModuleRegistry } from "react-native";
-function resolveStyle(classString, pressed = false) {
-  const KbachModule = TurboModuleRegistry.getEnforcing("KbachModule");
-  const colorScheme = getGlobalDarkMode() ? "dark" : "light";
-  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed);
-  return JSON.parse(json);
-}
-
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   defaultTheme,
-  setTheme,
   getTheme,
-  getGlobalDarkMode,
-  getGlobalThemeMode,
-  setGlobalThemeMode,
-  toggleGlobalDarkMode,
-  subscribeGlobalDarkMode,
-  seedDefaultMode,
-  resolveStyle
-};
+  getThemeJson,
+  setTheme
+});

package/dist/useDynamicToken-Dr15c88t.d.ts

@@ -0,0 +1,160 @@
+import { ThemeConfig, ContainerConfig } from './theme';
+import { ThemeMode } from './darkModeStore';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * A `kbach.config.js`-style theme customization — same shape as
+ * @kbach/react's `KbachConfig`, minus mode-aware `{ light, dark }` color
+ * entries in `extend.colors` specifically: aliasing/opacity math here only
+ * ever operates on plain hex (`brand: 'blue-6'`, `brandSoft: 'brand/30'`),
+ * matching `jsEngine/resolvers/color.ts`'s `lookupHex`'s own Plain-only
+ * convention — a reference to an EXISTING color that happens to be
+ * mode-aware (`theme.colors` can hold those now, for `useColors()`; see
+ * `theme.ts`'s own `ColorEntry` doc comment) just doesn't resolve as an
+ * alias, falling through to "literal CSS value" the same way an unknown
+ * name would. A config object goes in, a resolved `ThemeConfig` comes out,
+ * via one PURE function (`resolveKbachConfig`) — no plugins, no
+ * live-update store, nothing to keep "in sync."
+ */
+interface KbachConfig {
+    darkMode?: ThemeConfig['darkMode'];
+    /**
+     * REPLACES the named section of `defaultTheme` entirely — use `extend` to
+     * add instead of replace. `container` isn't here (only under `extend`
+     * below) — see @kbach/react's identical `KbachConfig.theme` doc comment
+     * for why.
+     */
+    theme?: Partial<Pick<ThemeConfig, 'colors' | 'spacing' | 'screens' | 'fontFamily'>>;
+    /** Merges INTO `defaultTheme` (or `theme` above, if also supplied) — the common case. */
+    extend?: {
+        /**
+         * A value is either a literal hex color, or a REFERENCE to another
+         * color name, optionally with an opacity suffix. Two things can be
+         * referenced: a BUILT-IN palette color, always available regardless of
+         * ordering (`accent: 'orange-5'`, `accentSoft: 'orange-5/50'`), or a
+         * custom color defined EARLIER in this same object (`{ brand:
+         * '#ff6b35', brandSoft: 'brand/30' }` — `brandSoft` resolves to
+         * `brand`'s own value at 30% opacity). A string that doesn't match any
+         * known color name is treated as a literal CSS value instead.
+         */
+        colors?: Record<string, string>;
+        spacing?: Record<string, number>;
+        screens?: Record<string, number>;
+        /**
+         * Named font stacks, e.g. `{ display: '"Cal Sans", sans-serif' }` —
+         * adds to (or overrides one of) `defaultTheme.fontFamily`'s three
+         * names. Write it as a real web-shaped fallback stack even though this
+         * is the React Native package — native's own resolver strips it down
+         * to a single bare name at resolve time (RN's `fontFamily` prop can't
+         * take a fallback list), so the SAME config still works unmodified on
+         * Expo Web, which needs the full stack.
+         */
+        fontFamily?: Record<string, string>;
+        /** `{ center: true, padding: '2rem' }` — see `ContainerConfig`'s own doc comment. */
+        container?: ContainerConfig;
+    };
+}
+/** Merges a `KbachConfig` into `defaultTheme` — a pure function, no side effects. */
+declare function resolveKbachConfig(config: KbachConfig): ThemeConfig;
+/** `resolveKbachConfig()` + `setTheme()` in one call — the usual entry point from app code. */
+declare function applyKbachConfig(config: KbachConfig): ThemeConfig;
+
+interface ThemeState {
+    mode: ThemeMode;
+    isDark: boolean;
+    setMode: (mode: ThemeMode) => void;
+    toggle: () => void;
+}
+/**
+ * The one hook for reading and writing Kbach's dark-mode state. Reads
+ * `darkModeStore.ts`'s global store directly via `useSyncExternalStore` —
+ * that module-level store, not React Context, is the actual source of
+ * truth (every provider used to just mirror it into a Context value), so
+ * this works from ANY component, with or without a `<ThemeProvider>`
+ * mounted anywhere in the tree. `<ThemeProvider>` still exists, but purely
+ * as an optional convenience for seeding an app's initial `defaultMode` —
+ * see its own doc comment. No server-snapshot argument (unlike
+ * @kbach/react's web version) — React Native has no SSR concept at all,
+ * so there's no third argument for `useSyncExternalStore` to need.
+ */
+declare function useTheme(): ThemeState;
+
+interface ThemeProviderProps {
+    children: ReactNode;
+    /**
+     * Applied once, on this provider's first mount, but ONLY if nothing has
+     * made an explicit mode choice yet (see
+     * `darkModeStore.ts::seedDefaultMode`) — an explicit prior choice always
+     * wins over a component's own default. Unlike @kbach/react's web
+     * version, there's no persisted value to check here — see
+     * darkModeStore.ts's own doc comment on why this package doesn't persist
+     * the mode across app launches.
+     */
+    defaultMode?: ThemeMode;
+}
+/**
+ * Optional — `useTheme()` reads `darkModeStore.ts`'s global store directly
+ * and works anywhere without this mounted at all. The only thing this
+ * component does is seed that store's initial `defaultMode` once, for apps
+ * that want to declare a startup default in JSX rather than calling
+ * `setGlobalThemeMode()` imperatively before their first render. It
+ * renders `children` as-is — no Context.Provider, since there's no value
+ * left to distribute; `useTheme()` never reads from Context.
+ *
+ * Because the store is global, MULTIPLE mounted providers would each try
+ * to seed the exact same store rather than getting their own scoped
+ * state — mounting more than one is very likely a mistake, so this warns
+ * once in dev.
+ */
+declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
+
+interface ColorScale {
+    /** `colors.blue[6]` -> raw value */
+    readonly [shade: number]: string;
+    /** `colors.blue['6/50']` -> shade 6 at 50% opacity */
+    readonly [key: string]: string;
+}
+type ColorsAPI = {
+    /** `colors.white`, `colors.blue` (a shade family), ... */
+    readonly [name: string]: string | ColorScale;
+} & {
+    /** Applies an opacity (0–100) to any color string this hook can return. */
+    readonly alpha: (color: string, opacity?: number) => string;
+};
+/**
+ * Resolved theme colors as real values — for anywhere you need an actual
+ * color (a chart library prop, a raw SVG `fill`), not a `className`. Ported
+ * from old-kbach's `useColors()`, adapted to this engine's flat
+ * `"blue-6"`-keyed palette (`colors.blue[6]` looks up `"blue-6"`).
+ *
+ * Any color — a shade-family entry like `"blue-6"` or a standalone name —
+ * can be defined in the theme as either a plain string (static, same in
+ * both modes) or a `{ light, dark }` pair — fully manual, no automatic
+ * shade-shifting or other assumption about what a "dark variant" should
+ * be; see `resolveEntry`'s own doc comment for how a `{ light, dark }`
+ * entry resolves on this platform specifically.
+ *
+ * ```ts
+ * const colors = useColors();
+ * colors.blue[6];        // "#2563eb" — static, same value in both modes
+ * colors.blue['6/50'];   // same, at 50% opacity
+ * colors.brand;          // resolves per isDark if defined as { light, dark }
+ * ```
+ */
+declare function useColors(): ColorsAPI;
+
+/**
+ * Reads a dynamic token's CURRENT value reactively — the JS-value
+ * counterpart to using `var(--name)` directly in a `className` (see
+ * `jsxRuntimeCore.ts`'s own `substituteDynamicTokens`/`ReactiveElement` for
+ * how that path stays live). Useful when a component needs the raw value
+ * itself (e.g. to drive an Animated value, or a calculation), not just a
+ * resolved style. Subscribes to the store's shared version counter (same
+ * one every token change bumps — see `dynamicTokens.ts`'s own doc comment
+ * on why there's no per-token subscription), so this re-renders on ANY
+ * token change, then re-reads just the one name it was asked for.
+ */
+declare function useDynamicToken(name: string): string | undefined;
+
+export { type ColorScale as C, type KbachConfig as K, ThemeProvider as T, type ColorsAPI as a, type ThemeProviderProps as b, type ThemeState as c, applyKbachConfig as d, useDynamicToken as e, useTheme as f, resolveKbachConfig as r, useColors as u };

package/package.json

@@ -1,8 +1,18 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.2",
-  "description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule. Beta, Android-only. Works with the React Native CLI or an Expo dev client (not Expo Go).",
-  "keywords": ["css", "react-native", "expo", "tailwind", "utility-first", "styling", "android"],
+  "version": "1.0.0-beta.20",
+  "description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule (native), the same WASM engine @kbach/react uses (Expo Web / react-native-web), or a pure-JS fallback engine (Expo Go). Ships its own native Android module — one npm install, no separate native package. Beta. Native is Android-only (no iOS bridge yet); works with the React Native CLI, an Expo dev client, AND Expo Go (a reduced-coverage pure-JS fallback, since Expo Go can't load any custom native module).",
+  "keywords": [
+    "css",
+    "react-native",
+    "expo",
+    "tailwind",
+    "utility-first",
+    "styling",
+    "android",
+    "web",
+    "wasm"
+  ],
   "license": "MIT",
   "author": "semsakadanupol",
   "repository": {
@@ -17,45 +27,75 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": ["dist", "src/babel-plugin.js"],
+  "files": [
+    "dist",
+    "src/babel-plugin.js",
+    "android/build.gradle",
+    "android/src",
+    "specs",
+    "react-native.config.js"
+  ],
   "source": "./src/index.ts",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./dist/index.mjs",
+      "browser": {
+        "import": "./dist/index.web.mjs",
+        "require": "./dist/index.web.js"
+      },
+      "node": {
+        "import": "./dist/index.web.mjs",
+        "require": "./dist/index.web.js"
+      },
+      "react-native": "./dist/index.js",
       "require": "./dist/index.js"
     },
     "./jsx-runtime": {
       "types": "./dist/jsx-runtime.d.ts",
       "source": "./src/jsx-runtime.tsx",
-      "import": "./dist/jsx-runtime.mjs",
+      "browser": {
+        "import": "./dist/jsx-runtime.web.mjs",
+        "require": "./dist/jsx-runtime.web.js"
+      },
+      "node": {
+        "import": "./dist/jsx-runtime.web.mjs",
+        "require": "./dist/jsx-runtime.web.js"
+      },
+      "react-native": "./dist/jsx-runtime.js",
       "require": "./dist/jsx-runtime.js"
     },
     "./jsx-dev-runtime": {
       "types": "./dist/jsx-dev-runtime.d.ts",
       "source": "./src/jsx-dev-runtime.tsx",
-      "import": "./dist/jsx-dev-runtime.mjs",
+      "browser": {
+        "import": "./dist/jsx-dev-runtime.web.mjs",
+        "require": "./dist/jsx-dev-runtime.web.js"
+      },
+      "node": {
+        "import": "./dist/jsx-dev-runtime.web.mjs",
+        "require": "./dist/jsx-dev-runtime.web.js"
+      },
+      "react-native": "./dist/jsx-dev-runtime.js",
       "require": "./dist/jsx-dev-runtime.js"
     },
     "./babel-plugin": "./src/babel-plugin.js"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup",
+    "dev": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup --watch",
     "test": "vitest run --passWithNoTests",
     "lint": "tsc --noEmit",
-    "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts"
-  },
-  "dependencies": {
-    "@kbach/android": "1.0.0-beta.0"
+    "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts",
+    "generate:wasm-base64": "node ../core-engine/scripts/generate-wasm-base64.mjs src/wasmBinary.generated.ts",
+    "generate:web-glue": "node ../core-engine/scripts/generate-web-glue.mjs src/wasmGlue.generated.ts"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",
+    "jsdom": "^30.0.1",
     "react-native": "^0.87.0",
     "react-test-renderer": "^19.2.0",
     "tsup": "^8.0.0",
@@ -65,5 +105,13 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": ">=0.70.0"
+  },
+  "codegenConfig": {
+    "name": "KbachSpec",
+    "type": "modules",
+    "jsSrcsDir": "specs",
+    "android": {
+      "javaPackageName": "com.kbachnative"
+    }
   }
 }

package/react-native.config.js

@@ -0,0 +1,29 @@
+/**
+ * Explicit override for React Native autolinking's Android package
+ * detection, which otherwise guesses `<packageName>.<PackageClassName>`
+ * from either AndroidManifest.xml's `package` attribute or (when absent,
+ * our case) build.gradle's `namespace` — see cli-config-android's
+ * getPackageName. That guess is wrong here on purpose: KbachModule.kt/
+ * KbachPackage.kt declare `package com.kbachnative` (chosen to match the
+ * JNI extern symbol names in packages/core-engine/src/jni_bridge.rs), but
+ * this module's Gradle `namespace` has to be a DIFFERENT value
+ * (com.kbachnative.nativemodule, see android/build.gradle's own comment)
+ * since AGP requires unique namespaces per module and the consuming app
+ * itself already claims "com.kbachnative" as its own. Without this
+ * override, the generated PackageList.java imports the non-existent
+ * `com.kbachnative.nativemodule.KbachPackage` and the app fails to
+ * compile. (A `package="com.kbachnative"` attribute in AndroidManifest.xml
+ * was tried first instead — simpler on paper — but AGP 9+ hard-errors on a
+ * manifest package that doesn't match the namespace, so this explicit
+ * config override is the only working fix.)
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        packageImportPath: 'import com.kbachnative.KbachPackage;',
+        packageInstance: 'new KbachPackage()',
+      },
+    },
+  },
+};

package/specs/NativeKbachModule.ts

@@ -0,0 +1,31 @@
+/**
+ * TurboModule spec for KbachModule — RN's Codegen convention requires this
+ * exact `Native<Name>.ts` filename and a default-exported
+ * `TurboModuleRegistry.getEnforcing<Spec>(...)`. Read by Codegen (see this
+ * package's own `codegenConfig` in package.json) to generate the native
+ * glue that ../android/src/main/java/com/kbachnative/KbachModule.kt
+ * implements. Lives in this same package (not the consuming app) alongside
+ * the native Android code it describes — Android autolinking only
+ * discovers native modules from npm dependencies with their own `android/`
+ * folder, not from native code declared directly inside an app, which is
+ * why `@kbach/react-native` ships its own `android/` + `specs/` at all
+ * (see Phase 13) rather than relying on the consuming app to provide one.
+ *
+ * Method names have no `Sync` suffix (unlike the pre-Phase-13 bridge's
+ * `generateCssSync`/`resolveStyleSync`) — every TurboModule call is
+ * synchronous by nature via JSI, so the suffix's whole point (flagging
+ * "this one blocks, unlike normal bridge methods") no longer applies.
+ */
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  generateCss(classString: string, themeJson: string): string;
+  // `width`: a plain `number` (not the `Int32`/`Float` CodegenTypes
+  // aliases) is Codegen's own default float-numeric mapping — it already
+  // compiles to Kotlin's `Double` on the native side, matching
+  // KbachModule.kt's `width: Double` parameter with no extra type alias.
+  resolveStyle(classString: string, themeJson: string, colorScheme: string, pressed: boolean, width: number): string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('KbachModule');