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

package/README.md

@@ -4,11 +4,12 @@ Kbach's utility-class styling engine for React Native — the same class
 names as [`@kbach/react`](https://www.npmjs.com/package/@kbach/react),
 resolved to a real `StyleSheet`-ready style object instead of injected CSS.
 
-> **Beta, Android-only.** Resolution runs through a Kotlin/JNI TurboModule
-> calling the same Rust core `@kbach/react` uses, so class semantics stay
-> identical across web and native. The native module ships prebuilt (see
-> Setup below) — no Rust toolchain or manual native wiring required — but
-> there's no iOS bridge yet.
+> **Beta.** Native (Android-only, no iOS bridge yet) resolves through a
+> Kotlin/JNI TurboModule; Expo Web / react-native-web resolves through the
+> same Rust engine compiled to WASM instead — both call the identical
+> resolution logic, so class semantics stay identical everywhere. The
+> native module ships prebuilt (see Setup below) — no Rust toolchain or
+> manual native wiring required on any platform.
 
 ## Setup
 
@@ -16,13 +17,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
 
@@ -46,13 +47,18 @@ one needs (a plain single-app install doesn't need any of that — it's
 only relevant if you're linking packages locally instead of installing
 from npm).
 
-### Expo
+### Expo (native — Android)
 
-**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) —
-functionally the same "real native project" setup as the CLI path above,
-just generated and driven through Expo's own tooling:
+**Expo Go can never work with this package, and that isn't specific to
+Kbach.** Expo Go is a single fixed binary Expo pre-builds and ships
+through the app stores, containing only the native code Expo bundled into
+it at their own build time — there is no mechanism for *any* third-party
+package to add native code to it at runtime, whether that's a raw
+TurboModule (what this package uses) or even Expo's own Modules API. This
+is exactly why the **dev client** concept exists: a custom build of your
+app — built once via `expo prebuild`/`expo run:android`, functionally the
+same "real native project" as the CLI path above — that *does* include
+this module:
 
 ```js
 // babel.config.js
@@ -68,7 +74,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.
@@ -76,6 +82,25 @@ Architecture off, turn it on in `app.json`
 EAS Build works the same way — it runs the same `prebuild` step, so no
 extra configuration beyond the two steps above.
 
+### Expo Web
+
+**Works — no extra setup, no separate package, no init call.** `expo start
+--web` (and EAS's web builds) render through `react-native-web` —
+`View`/`Text`/etc. become real DOM elements with real CSS, not a
+Kotlin/JNI bridge, so on web this package resolves classes through the
+same Rust engine [`@kbach/react`](https://www.npmjs.com/package/@kbach/react)
+uses — WASM instead of JNI — automatically. Metro picks the right
+implementation per platform on its own via this package's `"browser"`
+export condition; your app code and JSX never change. The WASM module
+initializes itself eagerly (synchronously, at import time — no `await`
+needed before your first render, unlike a from-scratch WASM setup).
+
+The only thing this doesn't cover on web is an iOS-parity feature gap —
+everything web-side resolves through the exact same
+[`resolve_style.rs`](https://github.com/semsakadanupol/kbach/blob/main/packages/core-engine/src/resolve_style.rs)
+logic real native uses, so see this README's "What this is" section above
+for what's covered.
+
 ## What this is
 
 - A JSX runtime (`@kbach/react-native/jsx-runtime`) that intercepts
@@ -88,14 +113,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-4KCCEMEN.mjs

@@ -0,0 +1,66 @@
+import {
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+} from "./chunk-AEVOM2NB.mjs";
+
+// src/useGlobalDarkMode.ts
+import { useSyncExternalStore } from "react";
+function useGlobalDarkMode() {
+  return useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+}
+
+// src/ThemeContext.tsx
+import { createContext, useContext } from "react";
+var ThemeContext = createContext(null);
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      'useTheme() must be called within a <ThemeProvider>. For dark-mode state without a provider, use useGlobalDarkMode() (read) or toggleGlobalDarkMode()/setGlobalThemeMode() (write) from "@kbach/react-native" instead.'
+    );
+  }
+  return ctx;
+}
+
+// src/ThemeProvider.tsx
+import { useEffect, useMemo, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var mountedProviderCount = 0;
+var warnedMultipleProviders = false;
+function ThemeProvider({ children, defaultMode = "system" }) {
+  useEffect(() => {
+    mountedProviderCount++;
+    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+      warnedMultipleProviders = true;
+      console.warn(
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store (the same one useGlobalDarkMode()/toggleGlobalDarkMode() read and write), not scoped per-provider, so they will fight over the same state instead of each getting their own."
+      );
+    }
+    return () => {
+      mountedProviderCount--;
+    };
+  }, []);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    seedDefaultMode(defaultMode);
+  }, []);
+  const isDark = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const mode = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalThemeMode);
+  const value = useMemo(
+    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode, isDark]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+
+export {
+  useGlobalDarkMode,
+  useTheme,
+  ThemeProvider
+};

package/dist/{chunk-YHF3QLRL.mjs → chunk-AEVOM2NB.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;
@@ -351,24 +357,15 @@ function seedDefaultMode(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 {
   defaultTheme,
   setTheme,
   getTheme,
+  getThemeJson,
   getGlobalDarkMode,
   getGlobalThemeMode,
   setGlobalThemeMode,
   toggleGlobalDarkMode,
   subscribeGlobalDarkMode,
-  seedDefaultMode,
-  resolveStyle
+  seedDefaultMode
 };

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

@@ -1,15 +1,11 @@
-import {
-  resolveStyle
-} from "./chunk-YHF3QLRL.mjs";
-
-// src/jsx-runtime.tsx
+// src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Pressable } from "react-native";
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
 }
-function resolvedStyleFor(classStrRaw, userStyle, pressed) {
+function resolvedStyleFor(resolveStyle, classStrRaw, userStyle, pressed) {
   const resolved = resolveStyle(classStrRaw, pressed);
   if (userStyle === void 0) {
     return resolved;
@@ -19,7 +15,7 @@ function resolvedStyleFor(classStrRaw, userStyle, pressed) {
   }
   return [resolved, userStyle];
 }
-function processElement(type, rawProps, key, isStaticChildren) {
+function processElement(resolveStyle, type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol" || !rawProps) {
     return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   }
@@ -27,18 +23,31 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
-  const finalStyle = type === Pressable ? (state) => resolvedStyleFor(classStrRaw, userStyle, state.pressed) : resolvedStyleFor(classStrRaw, userStyle, false);
+  const finalStyle = type === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
   return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
 }
-function jsx(type, props, key) {
-  return processElement(type, props, key, false);
+function createJsxFunctions(resolveStyle) {
+  function jsx(type, props, key) {
+    return processElement(resolveStyle, type, props, key, false);
+  }
+  function jsxs(type, props, key) {
+    return processElement(resolveStyle, type, props, key, true);
+  }
+  return { jsx, jsxs };
 }
-function jsxs(type, props, key) {
-  return processElement(type, props, key, true);
+function createJsxDEV(jsx, jsxs) {
+  return function jsxDEV(type, props, key, isStaticChildren, source, self) {
+    const element = (isStaticChildren ? jsxs : jsx)(type, props, key);
+    if (source && element && typeof element === "object" && Object.isExtensible(element)) {
+      element._source = source;
+      element._self = self;
+    }
+    return element;
+  };
 }
 
 export {
   Fragment,
-  jsx,
-  jsxs
+  createJsxFunctions,
+  createJsxDEV
 };

package/dist/chunk-FG5E4NLJ.mjs

@@ -0,0 +1,18 @@
+import {
+  getGlobalDarkMode,
+  getThemeJson
+} from "./chunk-AEVOM2NB.mjs";
+
+// src/nativeBridge.ts
+import { Dimensions, TurboModuleRegistry } from "react-native";
+function resolveStyle(classString, pressed = false) {
+  const KbachModule = TurboModuleRegistry.getEnforcing("KbachModule");
+  const colorScheme = getGlobalDarkMode() ? "dark" : "light";
+  const width = Dimensions.get("window").width;
+  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
+  return JSON.parse(json);
+}
+
+export {
+  resolveStyle
+};