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

package/README.md

@@ -16,13 +16,13 @@ resolved to a real `StyleSheet`-ready style object instead of injected CSS.
 npm install @kbach/react-native
 ```
 
-That pulls in [`@kbach/android`](https://www.npmjs.com/package/@kbach/android)
-too — the actual native module — as a real dependency. Android's
-autolinking discovers it automatically the moment it's in `node_modules`;
-no manual `MainApplication.kt` edit needed. Works the same way whether
-your app was created with the React Native CLI or with Expo — **except
-Expo Go**, which can never load this (or any) custom native module; see
-below.
+One package, nothing else to install — the Kotlin TurboModule and its
+prebuilt native `.so` ship inside this same package's own `android/`
+folder. Android's autolinking discovers it automatically the moment it's
+in `node_modules`; no manual `MainApplication.kt` edit needed. Works the
+same way whether your app was created with the React Native CLI or with
+Expo — **except Expo Go**, which can never load this (or any) custom
+native module; see below.
 
 ### React Native CLI
 
@@ -49,8 +49,8 @@ from npm).
 ### Expo
 
 **Expo Go doesn't work** — it's a fixed pre-built binary with no way to
-load a custom native module like `@kbach/android`. You need a **dev
-client** instead (a custom build of your app with this module baked in) —
+load a custom native module like this one. You need a **dev client**
+instead (a custom build of your app with this module baked in) —
 functionally the same "real native project" setup as the CLI path above,
 just generated and driven through Expo's own tooling:
 
@@ -68,7 +68,7 @@ npx expo run:android # builds and installs a dev client with the native module i
 ```
 
 Also requires the New Architecture enabled (Expo's default in current SDK
-versions) — `@kbach/android` is a TurboModule, which doesn't exist under
+versions) — the native module is a TurboModule, which doesn't exist under
 the legacy bridge at all. If you're on an older SDK/config with the New
 Architecture off, turn it on in `app.json`
 (`"newArchEnabled": true` under `expo`) before prebuilding.
@@ -88,14 +88,22 @@ extra configuration beyond the two steps above.
   scale — the same `ThemeConfig` shape `@kbach/react` uses, kept as an
   independent type here so a native-only project isn't forced to depend on
   a web-oriented package.
-- `shadow-*` resolves to real native shadows — iOS's discrete
-  `shadowColor`/`shadowOffset`/`shadowOpacity`/`shadowRadius` and Android's
-  `elevation`, both derived from the same named tiers (`sm`/`DEFAULT`/`md`/
-  `lg`/`xl`/`2xl`) `@kbach/react`'s CSS `box-shadow` scale uses — one class
-  produces a real shadow on both platforms. `shadow-inner` and arbitrary
-  `shadow-[...]` values aren't supported — neither platform's native shadow
-  API can express an inset shadow, and an arbitrary value is a raw CSS
+- `shadow-*` resolves to real native shadows — RN's discrete
+  `shadowColor`/`shadowOffset`/`shadowOpacity`/`shadowRadius` props plus
+  Android's `elevation` (both emitted together; `elevation` is what
+  actually renders a shadow on Android — the `shadow*` props are iOS-only
+  in RN itself, ready for whenever this package gets an iOS bridge),
+  derived from the same named tiers (`sm`/`DEFAULT`/`md`/`lg`/`xl`/`2xl`)
+  `@kbach/react`'s CSS `box-shadow` scale uses. `shadow-inner` and
+  arbitrary `shadow-[...]` values aren't supported — RN's native shadow
+  props can't express an inset shadow, and an arbitrary value is a raw CSS
   string with no mechanical translation into discrete native props.
+- Responsive breakpoints (`sm:`/`md:`/`lg:`/`xl:`/`2xl:`) — gated live
+  against the current window width (`Dimensions.get('window').width`),
+  same mobile-first "min-width and up" semantics as web, and freely
+  combinable with `dark:`/`active:` (e.g. `dark:md:bg-blue-8`). Call RN's
+  own `useWindowDimensions()` somewhere in your tree to re-render on
+  rotation/resize — same role `useColorScheme()` plays for `dark:` below.
 
 ## Dark mode
 

package/android/build.gradle

@@ -0,0 +1,36 @@
+apply plugin: "com.android.library"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def getExtOrDefault(name) {
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : null
+}
+
+android {
+    // NOT "com.kbachnative" — that's the app module's own namespace (Phase 5
+    // deliberately made the app's package match KbachModule's Kotlin package
+    // for simpler JNI symbol names), and AGP requires unique namespaces per
+    // module. This is purely a Gradle build-identity value, separate from
+    // the actual `package com.kbachnative` declared in the .kt files below —
+    // JNI symbol resolution depends on that Kotlin package, not this.
+    namespace "com.kbachnative.nativemodule"
+    compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+    defaultConfig {
+        minSdkVersion getExtOrDefault("minSdkVersion")
+        targetSdkVersion getExtOrDefault("targetSdkVersion")
+    }
+}
+
+repositories {
+    google()
+    maven {
+        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm.
+        url "$rootDir/../node_modules/react-native/android"
+    }
+    mavenCentral()
+}
+
+dependencies {
+    implementation "com.facebook.react:react-native:+"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,14 @@
+<!--
+  Deliberately NO `package="..."` attribute here, even though this
+  module's Kotlin package (com.kbachnative, see KbachModule.kt) differs
+  from its Gradle build.gradle `namespace` (com.kbachnative.nativemodule)
+  — adding one here to help React Native's autolinking guess the right
+  Kotlin package (see react-native.config.js at this package's root, which
+  fixes that instead) breaks the actual Gradle build on AGP 9+: it now
+  hard-errors ("Setting the namespace via the package attribute in the
+  source AndroidManifest.xml is no longer supported") whenever the
+  manifest's package doesn't match the namespace exactly. If you're
+  tempted to add one back to fix an autolinking symbol-resolution error,
+  fix react-native.config.js's packageImportPath/packageInstance instead.
+-->
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/android/src/main/java/com/kbachnative/KbachModule.kt

@@ -0,0 +1,83 @@
+package com.kbachnative
+
+import com.facebook.react.bridge.ReactApplicationContext
+
+/**
+ * Bridges to the same Rust core engine every other Kbach platform uses
+ * (packages/core-engine) — via JNI here instead of WASM. The native
+ * `generateCss`/`resolveStyle` externs below (in the companion object) must
+ * match `Java_com_kbachnative_KbachModule_generateCss`/`resolveStyle`'s
+ * signatures exactly (packages/core-engine/src/jni_bridge.rs): STATIC
+ * native methods (hence @JvmStatic in a companion object, not instance
+ * methods — the Rust side takes JClass, not JObject, as its second
+ * parameter).
+ *
+ * TurboModule since Phase 13 (was the legacy bridge's
+ * `isBlockingSynchronousMethod` support directly on `ReactContextBaseJavaModule`
+ * before) — extends the Codegen-generated `NativeKbachModuleSpec`
+ * (packages/react-native/specs/NativeKbachModule.ts -> this package's own
+ * codegenConfig in package.json, discovered via autolinking ->
+ * android/build/generated/source/codegen/java/com/kbachnative/NativeKbachModuleSpec.java),
+ * which already provides `getName()` and declares `generateCss`/`resolveStyle`
+ * as abstract `@ReactMethod(isBlockingSynchronousMethod = true)` methods —
+ * Codegen still routes a synchronously-returning TurboModule method through
+ * that same Android bridge mechanism; the real gain here is JSI-backed
+ * dispatch + build-time type checking against the JS spec, not the removal
+ * of `isBlockingSynchronousMethod` as a concept.
+ *
+ * The companion's JNI externs are named `nativeGenerateCss`/`nativeResolveStyle`
+ * — NOT the same names as the spec's `generateCss`/`resolveStyle` overrides.
+ * Tried keeping identical names first (disambiguated via an explicit
+ * `Companion.generateCss(...)` qualifier) since that would've meant zero
+ * Rust changes, but that fails to compile: `@JvmStatic` duplicates each
+ * companion function directly onto the outer class for Java-interop
+ * purposes, which collides at the JVM bytecode level with the identically-
+ * named, identically-shaped instance override ("platform declaration
+ * clash"), regardless of how the Kotlin-source call site is qualified. The
+ * rename requires matching `Java_com_kbachnative_KbachModule_nativeGenerateCss`/
+ * `nativeResolveStyle` `#[no_mangle]` export names in
+ * packages/core-engine/src/jni_bridge.rs — JNI's implicit symbol linking
+ * binds by the extern's own method name, not by whatever calls it.
+ *
+ * Moved here from apps/native-sandbox/android/app in Phase 13 — Android
+ * autolinking only discovers native modules from npm dependencies with
+ * their own `android/` folder, never from native code declared directly
+ * inside the app itself, so `KbachModule` had to become a real (locally
+ * `file:`-linked) package to be found by `TurboModuleRegistry.getEnforcing`.
+ * Originally that "real package" was a separate `@kbach/android` npm
+ * package; later folded directly into `@kbach/react-native` (this
+ * package's own `android/` folder, sibling to its `src/`) once it became
+ * clear the same autolinking requirement is satisfied just as well by a
+ * SINGLE npm package containing both JS and native code — the same layout
+ * react-native-safe-area-context itself uses — so consumers only ever run
+ * one `npm install @kbach/react-native`, not two.
+ */
+class KbachModule(reactContext: ReactApplicationContext) : NativeKbachModuleSpec(reactContext) {
+
+    companion object {
+        init {
+            System.loadLibrary("kbach_core_engine")
+        }
+
+        @JvmStatic
+        external fun nativeGenerateCss(classString: String, themeJson: String): String
+
+        @JvmStatic
+        external fun nativeResolveStyle(classString: String, themeJson: String, colorScheme: String, pressed: Boolean, width: Double): String
+    }
+
+    override fun generateCss(classString: String, themeJson: String): String {
+        return nativeGenerateCss(classString, themeJson)
+    }
+
+    /**
+     * `colorScheme` ("light"/"dark", from Appearance.getColorScheme() on the
+     * JS side) gates whether `dark:` declarations are applied; `pressed`
+     * (only ever true when the caller is RN's Pressable) gates `active:`;
+     * `width` (the JS side's current `Dimensions.get('window').width`) gates
+     * `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the theme's `screens` scale.
+     */
+    override fun resolveStyle(classString: String, themeJson: String, colorScheme: String, pressed: Boolean, width: Double): String {
+        return nativeResolveStyle(classString, themeJson, colorScheme, pressed, width)
+    }
+}

package/android/src/main/java/com/kbachnative/KbachPackage.kt

@@ -0,0 +1,54 @@
+package com.kbachnative
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+/**
+ * `BaseReactPackage` (not plain `ReactPackage`) since Phase 13's TurboModule
+ * migration — a plain `ReactPackage`'s `createNativeModules()`-provided
+ * modules stay visible to the legacy `NativeModules` interop but are never
+ * consulted by `TurboModuleRegistry`'s resolution path, which only walks
+ * packages that can answer `getModule(name, ...)` directly. Modeled on
+ * react-native-safe-area-context's own `SafeAreaContextPackage.kt` (a real,
+ * New-Architecture-compatible package already in this project's
+ * dependencies) rather than reflection over a `@ReactModule` annotation —
+ * KbachModule doesn't have one, and there's only ever this one module, so
+ * building its `ReactModuleInfo` directly is simpler than adding an
+ * annotation just to read it back via reflection.
+ *
+ * Auto-discovered via Android autolinking, not manually registered in
+ * apps/native-sandbox's MainApplication.kt — same as SafeAreaContextPackage
+ * already was, and the entire reason this module became a real npm package
+ * with its own `android/` folder (this one — `@kbach/react-native` itself,
+ * see KbachModule.kt's own doc comment) in Phase 13 rather than living
+ * inside the app.
+ */
+class KbachPackage : BaseReactPackage() {
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+        return if (name == NativeKbachModuleSpec.NAME) KbachModule(reactContext) else null
+    }
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+        return ReactModuleInfoProvider {
+            mapOf(
+                NativeKbachModuleSpec.NAME to
+                    ReactModuleInfo(
+                        NativeKbachModuleSpec.NAME,
+                        KbachModule::class.java.name,
+                        false, // canOverrideExistingModule
+                        false, // needsEagerInit
+                        false, // isCxxModule
+                        true, // isTurboModule
+                    )
+            )
+        }
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return emptyList()
+    }
+}

package/dist/{chunk-YHF3QLRL.mjs → chunk-7KUNKZBM.mjs}

@@ -289,7 +289,13 @@ var defaultTheme = {
     "6": 24,
     "8": 32
   },
-  screens: {},
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
   darkMode: "attribute"
 };
 var activeTheme = defaultTheme;
@@ -352,11 +358,12 @@ function seedDefaultMode(fallback) {
 }
 
 // src/nativeBridge.ts
-import { TurboModuleRegistry } from "react-native";
+import { Dimensions, 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);
+  const width = Dimensions.get("window").width;
+  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
   return JSON.parse(json);
 }
 

package/dist/{chunk-SVMYVXY6.mjs → chunk-UP5ZN7CN.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveStyle
-} from "./chunk-YHF3QLRL.mjs";
+} from "./chunk-7KUNKZBM.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.d.mts

@@ -59,6 +59,19 @@ interface StyleObject {
  * `Pressable` ever knows this, so it's passed in directly by the caller
  * (jsx-runtime, from Pressable's own style-function callback) rather than
  * queried here. Defaults to `false` for every other element type.
+ *
+ * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
+ * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
+ * from `Dimensions.get('window').width` on every call, the same "no
+ * caching, no store" choice `colorScheme`/`pressed` already make, and for
+ * the same reason: unlike dark mode there's no explicit-override concept to
+ * preserve here (nobody manually overrides their screen width), so a plain
+ * synchronous read is enough — no need for the subscribable store
+ * darkModeStore.ts is for. As with `colorScheme`, this function has no
+ * subscription of its own, so rotating/resizing the window doesn't
+ * re-render anything by itself — call RN's own `useWindowDimensions()`
+ * somewhere in the tree for that (same role `useColorScheme()` plays for
+ * `dark:` in apps/native-sandbox/App.tsx).
  */
 declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 

package/dist/index.d.ts

@@ -59,6 +59,19 @@ interface StyleObject {
  * `Pressable` ever knows this, so it's passed in directly by the caller
  * (jsx-runtime, from Pressable's own style-function callback) rather than
  * queried here. Defaults to `false` for every other element type.
+ *
+ * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
+ * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
+ * from `Dimensions.get('window').width` on every call, the same "no
+ * caching, no store" choice `colorScheme`/`pressed` already make, and for
+ * the same reason: unlike dark mode there's no explicit-override concept to
+ * preserve here (nobody manually overrides their screen width), so a plain
+ * synchronous read is enough — no need for the subscribable store
+ * darkModeStore.ts is for. As with `colorScheme`, this function has no
+ * subscription of its own, so rotating/resizing the window doesn't
+ * re-render anything by itself — call RN's own `useWindowDimensions()`
+ * somewhere in the tree for that (same role `useColorScheme()` plays for
+ * `dark:` in apps/native-sandbox/App.tsx).
  */
 declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 

package/dist/index.js

@@ -326,7 +326,13 @@ var defaultTheme = {
     "6": 24,
     "8": 32
   },
-  screens: {},
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
   darkMode: "attribute"
 };
 var activeTheme = defaultTheme;
@@ -395,7 +401,8 @@ function seedDefaultMode(fallback) {
 function resolveStyle(classString, pressed = false) {
   const KbachModule = import_react_native2.TurboModuleRegistry.getEnforcing("KbachModule");
   const colorScheme = getGlobalDarkMode() ? "dark" : "light";
-  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed);
+  const width = import_react_native2.Dimensions.get("window").width;
+  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
   return JSON.parse(json);
 }
 

package/dist/index.mjs

@@ -9,7 +9,7 @@ import {
   setTheme,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-YHF3QLRL.mjs";
+} from "./chunk-7KUNKZBM.mjs";
 
 // src/useGlobalDarkMode.ts
 import { useSyncExternalStore } from "react";

package/dist/jsx-dev-runtime.js

@@ -324,7 +324,13 @@ var defaultTheme = {
     "6": 24,
     "8": 32
   },
-  screens: {},
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
   darkMode: "attribute"
 };
 var activeThemeJson = JSON.stringify(defaultTheme);
@@ -359,7 +365,8 @@ function getGlobalDarkMode() {
 function resolveStyle(classString, pressed = false) {
   const KbachModule = import_react_native2.TurboModuleRegistry.getEnforcing("KbachModule");
   const colorScheme = getGlobalDarkMode() ? "dark" : "light";
-  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed);
+  const width = import_react_native2.Dimensions.get("window").width;
+  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
   return JSON.parse(json);
 }
 

package/dist/jsx-dev-runtime.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-SVMYVXY6.mjs";
-import "./chunk-YHF3QLRL.mjs";
+} from "./chunk-UP5ZN7CN.mjs";
+import "./chunk-7KUNKZBM.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.d.mts

@@ -7,10 +7,13 @@ export { Fragment, JSX } from 'react';
  * Drop-in replacement for react/jsx-runtime — same interception shape as
  * @kbach/react/jsx-runtime (Phase 3), but the resolved value becomes the
  * `style` prop instead of `className`: View/Text have no `className` prop
- * at all. Covers layout, color, spacing, border, typography, dark:, and
- * active: (Pressable only) — see nativeBridge.ts / resolve_style.rs for
- * exactly what's resolved; every other modifier (hover:/responsive/...)
- * parses but isn't applied yet.
+ * at all. Covers layout, color, spacing, border, typography, dark:,
+ * active: (Pressable only), and sm:/md:/lg:/xl:/2xl: (gated against the
+ * current window width, live) — see nativeBridge.ts / resolve_style.rs for
+ * exactly what's resolved; every other modifier (hover:, group- and peer-
+ * variants, has-[...], container queries, ...) parses but isn't applied —
+ * there's no selector/pseudo-state/ancestor system on native to apply them
+ * with.
  *
  * `active:` needs different handling from every other modifier: whether an
  * element is "pressed" isn't a value that can be read once and reused like

package/dist/jsx-runtime.d.ts

@@ -7,10 +7,13 @@ export { Fragment, JSX } from 'react';
  * Drop-in replacement for react/jsx-runtime — same interception shape as
  * @kbach/react/jsx-runtime (Phase 3), but the resolved value becomes the
  * `style` prop instead of `className`: View/Text have no `className` prop
- * at all. Covers layout, color, spacing, border, typography, dark:, and
- * active: (Pressable only) — see nativeBridge.ts / resolve_style.rs for
- * exactly what's resolved; every other modifier (hover:/responsive/...)
- * parses but isn't applied yet.
+ * at all. Covers layout, color, spacing, border, typography, dark:,
+ * active: (Pressable only), and sm:/md:/lg:/xl:/2xl: (gated against the
+ * current window width, live) — see nativeBridge.ts / resolve_style.rs for
+ * exactly what's resolved; every other modifier (hover:, group- and peer-
+ * variants, has-[...], container queries, ...) parses but isn't applied —
+ * there's no selector/pseudo-state/ancestor system on native to apply them
+ * with.
  *
  * `active:` needs different handling from every other modifier: whether an
  * element is "pressed" isn't a value that can be read once and reused like

package/dist/jsx-runtime.js

@@ -323,7 +323,13 @@ var defaultTheme = {
     "6": 24,
     "8": 32
   },
-  screens: {},
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
   darkMode: "attribute"
 };
 var activeThemeJson = JSON.stringify(defaultTheme);
@@ -358,7 +364,8 @@ function getGlobalDarkMode() {
 function resolveStyle(classString, pressed = false) {
   const KbachModule = import_react_native2.TurboModuleRegistry.getEnforcing("KbachModule");
   const colorScheme = getGlobalDarkMode() ? "dark" : "light";
-  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed);
+  const width = import_react_native2.Dimensions.get("window").width;
+  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
   return JSON.parse(json);
 }
 

package/dist/jsx-runtime.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "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).",
+  "version": "1.0.0-beta.3",
+  "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. Ships its own native Android module (Kotlin + prebuilt Rust/JNI .so) — one npm install, no separate native package. 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"],
   "license": "MIT",
   "author": "semsakadanupol",
@@ -17,7 +17,7 @@
   "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",
@@ -50,9 +50,6 @@
     "lint": "tsc --noEmit",
     "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts"
   },
-  "dependencies": {
-    "@kbach/android": "1.0.0-beta.0"
-  },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",
@@ -65,5 +62,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');