@kbach/react-native 1.0.0-beta.50 → 1.0.0-beta.51

package/AGENTS.md

@@ -345,3 +345,17 @@ Subpath exports: `@kbach/react-native/babel-plugin`,
   missing. It's required on every target, not just Android/dev-client
   builds; without it nothing routes `className` through this package's
   jsx-runtime at all, so RN just silently ignores the unrecognized prop.
+- **`ERROR [Error: Unable to find node on an unmounted component.]` on
+  Expo Fast Refresh, especially right after editing `kbach.config.js`** —
+  stale `@kbach/react-native` (`< 1.0.0-beta.51`). Root cause: the babel
+  plugin (§1) injects `applyKbachConfig(require('kbach.config.js'))` into
+  *every* user file, so editing that config forces Metro to re-execute the
+  entire app (every file requires it), not just the screen you're on;
+  before beta.51, `setTheme` (`theme.ts`) handed every one of those
+  redundant re-applications a brand-new theme object even when the config
+  content hadn't changed, invalidating every `useColors()` memo and
+  reactive-element check across the whole tree simultaneously, right as
+  Fast Refresh was already mid-teardown — worsening this normally-rare
+  React Native Fast Refresh race. `setTheme` is idempotent by content
+  since beta.51 (compares against the theme's own JSON serialization
+  before replacing it); update.

package/README.md

@@ -15,6 +15,13 @@ Utility-class styling for React Native — the same class names as
 npm install @kbach/react-native@beta
 ```
 
+Or skip straight to a working setup: `npx @kbach/cli init` detects Expo
+or React Native CLI, installs this package, and patches
+`babel.config.js` for you (on React Native CLI, it'll even offer to run
+the native rebuild) — see [`@kbach/cli`](https://www.npmjs.com/package/@kbach/cli).
+The steps below are what it automates, and still the fallback it prints
+if your `babel.config.js`'s shape is too unusual for it to edit safely.
+
 ## Setup
 
 The babel plugin (below) is **required on every target, including Expo

package/dist/{chunk-SC3L5I7H.mjs → chunk-CD5WFFIQ.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-3KLOVONL.mjs";
+} from "./chunk-IJAXJVB4.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-3KLOVONL.mjs → chunk-IJAXJVB4.mjs}

@@ -349,8 +349,10 @@ var defaultTheme = {
 var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
 function setTheme(theme) {
+  const json = JSON.stringify(theme);
+  if (json === activeThemeJson) return;
   activeTheme = theme;
-  activeThemeJson = JSON.stringify(theme);
+  activeThemeJson = json;
 }
 function getTheme() {
   return activeTheme;

package/dist/{chunk-XOH25F3E.mjs → chunk-KHQ2BWYH.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-3KLOVONL.mjs";
+} from "./chunk-IJAXJVB4.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";

package/dist/index.web.mjs

@@ -10,13 +10,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-XOH25F3E.mjs";
+} from "./chunk-KHQ2BWYH.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-3KLOVONL.mjs";
+} from "./chunk-IJAXJVB4.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {

package/dist/jsx-dev-runtime.web.mjs

@@ -1,10 +1,10 @@
-import "./chunk-XOH25F3E.mjs";
+import "./chunk-KHQ2BWYH.mjs";
 import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-SC3L5I7H.mjs";
-import "./chunk-3KLOVONL.mjs";
+} from "./chunk-CD5WFFIQ.mjs";
+import "./chunk-IJAXJVB4.mjs";
 
 // src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/jsx-runtime.web.mjs

@@ -2,8 +2,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-SC3L5I7H.mjs";
-import "./chunk-3KLOVONL.mjs";
+} from "./chunk-CD5WFFIQ.mjs";
+import "./chunk-IJAXJVB4.mjs";
 export {
   Fragment,
   jsx,

package/dist/theme.d.ts

@@ -46,6 +46,31 @@ interface ThemeConfig {
     container?: ContainerConfig;
 }
 declare const defaultTheme: ThemeConfig;
+/**
+ * Idempotent by CONTENT, not just a plain assignment — deliberately, not a
+ * micro-optimization. The babel plugin (`babel-plugin.js`) injects
+ * `applyKbachConfig(require('kbach.config.js'))` at the top of EVERY user
+ * file, not just one entry point, so it re-runs on every single file
+ * Metro (re-)executes. Editing `kbach.config.js` itself under Expo Fast
+ * Refresh forces Metro to invalidate and re-execute every file that
+ * requires it — which, because of that injection, is the entire app, not
+ * just the file you're looking at. A plain unconditional reassignment here
+ * would hand every one of those re-executions a BRAND NEW theme object
+ * (`resolveKbachConfig` always builds one fresh) even when the config's
+ * actual content hasn't changed, which in turn invalidates every
+ * `useColors()` call's `useMemo` (keyed on this object's identity) and
+ * re-evaluates `usesModeAwareColor()` for every reactive element
+ * (jsxRuntimeCore.ts) across the whole tree, all at once, right as Fast
+ * Refresh is already mid-teardown/rebuild for that same app-wide
+ * invalidation — reported live as "Unable to find node on an unmounted
+ * component," a known-flaky class of React Native Fast Refresh race that
+ * this amount of simultaneous churn measurably worsens. Comparing against
+ * the JSON serialization this function already computes (previously only
+ * for the JNI boundary, see `getThemeJson`) costs nothing new — it's the
+ * same computation the old code did unconditionally — it just skips the
+ * assignment (and therefore the reference change every downstream
+ * consumer sees) when the content is unchanged.
+ */
 declare function setTheme(theme: ThemeConfig): void;
 declare function getTheme(): ThemeConfig;
 /** Memoized JSON serialization of the active theme — passed across the JNI boundary. */

package/dist/theme.js

@@ -378,8 +378,10 @@ var defaultTheme = {
 var activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
 function setTheme(theme) {
+  const json = JSON.stringify(theme);
+  if (json === activeThemeJson) return;
   activeTheme = theme;
-  activeThemeJson = JSON.stringify(theme);
+  activeThemeJson = json;
 }
 function getTheme() {
   return activeTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.50",
+  "version": "1.0.0-beta.51",
   "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",