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

package/dist/chunk-OS7EPBH5.mjs

@@ -0,0 +1,40 @@
+import {
+  resolveClassName
+} from "./chunk-AG7ZQ2K4.mjs";
+
+// src/jsxRuntimeCoreWeb.ts
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+function makeElement(isStaticChildren, type, props, key) {
+  return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
+}
+function processElement(resolveClassName2, type, rawProps, key, isStaticChildren) {
+  if (type === null || typeof type === "symbol" || !rawProps) {
+    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
+  }
+  const { className: classStrRaw, dataSet: userDataSet, ...rest } = rawProps;
+  if (typeof classStrRaw !== "string") {
+    return makeElement(isStaticChildren, type, rawProps, key);
+  }
+  const resolved = resolveClassName2(classStrRaw);
+  const dataSet = { ...userDataSet, kb: resolved };
+  return makeElement(isStaticChildren, type, { ...rest, dataSet }, key);
+}
+function createJsxFunctionsWeb(resolveClassName2) {
+  function jsx2(type, props, key) {
+    return processElement(resolveClassName2, type, props, key, false);
+  }
+  function jsxs2(type, props, key) {
+    return processElement(resolveClassName2, type, props, key, true);
+  }
+  return { jsx: jsx2, jsxs: jsxs2 };
+}
+
+// src/jsx-runtime.web.tsx
+var { jsx, jsxs } = createJsxFunctionsWeb(resolveClassName);
+
+export {
+  Fragment,
+  jsx,
+  jsxs
+};

package/dist/chunk-TS2EEVOE.mjs

@@ -0,0 +1,107 @@
+import {
+  getTheme
+} from "./chunk-AG7ZQ2K4.mjs";
+
+// 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";
+}
+function applyToDom(dark) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const strategy = getTheme().darkMode;
+  if (strategy === "class") {
+    root.classList.toggle("dark", dark);
+    root.classList.toggle("light", !dark);
+  } else if (strategy === "attribute") {
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+}
+var mode = "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+var hasExplicitChoice = false;
+var subscription = Appearance.addChangeListener(({ colorScheme }) => {
+  if (mode !== "system") return;
+  isDark = colorScheme === "dark";
+  applyToDom(isDark);
+  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;
+  applyToDom(isDark);
+  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);
+  applyToDom(isDark);
+  notify();
+}
+
+// src/dynamicTokens.ts
+var tokens = /* @__PURE__ */ new Map();
+var listeners2 = /* @__PURE__ */ new Set();
+var version = 0;
+function applyToDom2(name, value) {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.setProperty(`--${name}`, value);
+}
+function notify2() {
+  version++;
+  for (const listener of listeners2) listener();
+}
+function setDynamicToken(name, value) {
+  tokens.set(name, value);
+  applyToDom2(name, value);
+  notify2();
+}
+function getDynamicToken(name) {
+  return tokens.get(name);
+}
+function deleteDynamicToken(name) {
+  if (!tokens.delete(name)) return;
+  if (typeof document !== "undefined") document.documentElement.style.removeProperty(`--${name}`);
+  notify2();
+}
+function subscribeDynamicTokens(listener) {
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
+}
+
+export {
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  setGlobalThemeMode,
+  toggleGlobalDarkMode,
+  subscribeGlobalDarkMode,
+  seedDefaultMode,
+  setDynamicToken,
+  getDynamicToken,
+  deleteDynamicToken,
+  subscribeDynamicTokens
+};

package/dist/darkModeStore.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Native port of @kbach/react's darkModeStore.ts — same architecture (a
+ * single module-level store is the real source of truth;
+ * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
+ * function here works standalone with no provider mounted anywhere), with
+ * two real platform differences from the web version:
+ *
+ * 1. No persistence. There's no React-Native-builtin equivalent of
+ *    localStorage — adding one would mean forcing a real native dependency
+ *    (e.g. @react-native-async-storage/async-storage) on every consumer,
+ *    even ones that don't want it. The mode always starts at 'system' on a
+ *    fresh app launch. If you want persistence, read your own storage at
+ *    startup (before your first render) and call setGlobalThemeMode() with
+ *    the result — same "seed once, no built-in write-back" shape as
+ *    seedDefaultMode() below, just driven by your own storage instead of
+ *    one this package picks for you.
+ * 2. `applyToDom` below IS needed here, unlike what an earlier version of
+ *    this file's own comment claimed ("no DOM to apply the resolved mode
+ *    to") — that reasoning only holds for real native (Android/iOS), where
+ *    nativeBridge.ts's resolveStyle() reads getGlobalDarkMode() directly on
+ *    every call, no DOM involved at all. This file is ALSO used by Expo
+ *    Web, though (no `.web.ts` sibling — Metro has nothing to swap in), and
+ *    Expo Web resolves `dark:` classes to REAL CSS with `[data-theme=
+ *    "dark"]`-style selectors (see nativeBridge.web.ts) that only ever
+ *    match if something writes that attribute to the DOM — nothing did,
+ *    which is exactly why toggling the mode changed `useTheme()`'s own
+ *    state (a consumer reading `mode`/`isDark` directly, e.g. for a label,
+ *    updated correctly) while every `dark:`-prefixed style silently never
+ *    applied. `typeof document === 'undefined'` is what makes one function
+ *    safe on both platforms: real native's Hermes has no `document` global
+ *    at all (not even `undefined` as a defined-but-empty value — genuinely
+ *    unset, which `typeof` can check without throwing), so this always
+ *    no-ops there, while Expo Web's react-native-web renders into a real
+ *    browser DOM where it's needed.
+ */
+type ThemeMode = 'light' | 'dark' | 'system';
+declare function getGlobalDarkMode(): boolean;
+declare function getGlobalThemeMode(): ThemeMode;
+/** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
+declare function setGlobalThemeMode(nextMode: ThemeMode): void;
+declare function toggleGlobalDarkMode(): void;
+declare function subscribeGlobalDarkMode(listener: () => void): () => void;
+/**
+ * Applies `fallback` as the initial mode, but ONLY if nothing has made an
+ * explicit choice yet — called once by `<ThemeProvider defaultMode>` on
+ * mount, never exported for direct use elsewhere. Unlike the web store,
+ * there's no persisted-value check here (nothing to check); the only
+ * thing that can beat a seed is a `setGlobalThemeMode()` call that
+ * happened first (e.g. your own storage-restore logic run before the
+ * provider mounts).
+ */
+declare function seedDefaultMode(fallback: ThemeMode): void;
+/** Exported for tests only — resets every module-level field back to its as-if-just-imported state. */
+declare function _resetForTests(): void;
+/** Exported for tests only — removes the Appearance change subscription so a test's mock doesn't leak into the next one. */
+declare function _unsubscribeForTests(): void;
+
+export { type ThemeMode, _resetForTests, _unsubscribeForTests, getGlobalDarkMode, getGlobalThemeMode, seedDefaultMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode };

package/dist/darkModeStore.js

@@ -0,0 +1,112 @@
+"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/darkModeStore.ts
+var darkModeStore_exports = {};
+__export(darkModeStore_exports, {
+  _resetForTests: () => _resetForTests,
+  _unsubscribeForTests: () => _unsubscribeForTests,
+  getGlobalDarkMode: () => getGlobalDarkMode,
+  getGlobalThemeMode: () => getGlobalThemeMode,
+  seedDefaultMode: () => seedDefaultMode,
+  setGlobalThemeMode: () => setGlobalThemeMode,
+  subscribeGlobalDarkMode: () => subscribeGlobalDarkMode,
+  toggleGlobalDarkMode: () => toggleGlobalDarkMode
+});
+module.exports = __toCommonJS(darkModeStore_exports);
+var import_react_native = require("react-native");
+var import_theme = require("./theme");
+var listeners = /* @__PURE__ */ new Set();
+function systemPrefersDark() {
+  return import_react_native.Appearance.getColorScheme() === "dark";
+}
+function resolveIsDark(m) {
+  return m === "system" ? systemPrefersDark() : m === "dark";
+}
+function applyToDom(dark) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const strategy = (0, import_theme.getTheme)().darkMode;
+  if (strategy === "class") {
+    root.classList.toggle("dark", dark);
+    root.classList.toggle("light", !dark);
+  } else if (strategy === "attribute") {
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+}
+var mode = "system";
+var isDark = resolveIsDark(mode);
+applyToDom(isDark);
+var hasExplicitChoice = false;
+var subscription = import_react_native.Appearance.addChangeListener(({ colorScheme }) => {
+  if (mode !== "system") return;
+  isDark = colorScheme === "dark";
+  applyToDom(isDark);
+  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;
+  applyToDom(isDark);
+  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);
+  applyToDom(isDark);
+  notify();
+}
+function _resetForTests() {
+  mode = "system";
+  isDark = resolveIsDark(mode);
+  hasExplicitChoice = false;
+  listeners.clear();
+}
+function _unsubscribeForTests() {
+  subscription.remove();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  _resetForTests,
+  _unsubscribeForTests,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+});

package/dist/dynamicTokens.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Cross-platform runtime-settable style values — the native counterpart to
+ * a real CSS custom property. Real `var(--sidebar-width)` already works on
+ * Expo Web today with ZERO code here (raw CSS text, resolved by the
+ * browser's own engine — see `jsxRuntimeCoreWeb.ts`, which does no
+ * className rewriting at all). Native has no such thing: RN's style system
+ * needs an actual JS-computed value at render time, so this module exists
+ * to give `var(--x)` an equivalent that works there too — same
+ * "module-level store is the real source of truth, no Context required"
+ * architecture as `darkModeStore.ts`, and `setDynamicToken` ALSO writes the
+ * real CSS custom property to the DOM when one exists (mirroring that
+ * file's own `applyToDom`), so a single call updates both platforms
+ * identically: instantly via native CSS reactivity on web, via this
+ * store's subscribers (see `jsxRuntimeCore.ts`'s `ReactiveElement`, which
+ * substitutes a registered token's current value into the className
+ * string before every resolve) on native.
+ *
+ * Deliberately ONE listener set shared by every token, not per-token
+ * subscriptions — same trade-off `darkModeStore.ts` already makes for
+ * "any relevant change re-renders every subscribed element" simplicity.
+ * An unrelated token's change still re-renders every subscribed element
+ * (there's no per-token filtering), but `substituteDynamicTokens` in
+ * `jsxRuntimeCore.ts` re-reads each token's CURRENT value fresh on every
+ * one of those re-renders, so the resolved style stays correct regardless
+ * — the redundant re-render is a cheap, accepted trade-off, not a bug.
+ */
+/** `name` is the bare token name, WITHOUT the leading `--` (matching how `getDynamicToken`/`var(--name)` substitution both address it). */
+declare function setDynamicToken(name: string, value: string): void;
+declare function getDynamicToken(name: string): string | undefined;
+declare function deleteDynamicToken(name: string): void;
+declare function subscribeDynamicTokens(listener: () => void): () => void;
+declare function getDynamicTokensVersion(): number;
+/** Exported for tests only — resets every module-level field back to its as-if-just-imported state. */
+declare function _resetForTests(): void;
+
+export { _resetForTests, deleteDynamicToken, getDynamicToken, getDynamicTokensVersion, setDynamicToken, subscribeDynamicTokens };

package/dist/dynamicTokens.js

@@ -0,0 +1,75 @@
+"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/dynamicTokens.ts
+var dynamicTokens_exports = {};
+__export(dynamicTokens_exports, {
+  _resetForTests: () => _resetForTests,
+  deleteDynamicToken: () => deleteDynamicToken,
+  getDynamicToken: () => getDynamicToken,
+  getDynamicTokensVersion: () => getDynamicTokensVersion,
+  setDynamicToken: () => setDynamicToken,
+  subscribeDynamicTokens: () => subscribeDynamicTokens
+});
+module.exports = __toCommonJS(dynamicTokens_exports);
+var tokens = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var version = 0;
+function applyToDom(name, value) {
+  if (typeof document === "undefined") return;
+  document.documentElement.style.setProperty(`--${name}`, value);
+}
+function notify() {
+  version++;
+  for (const listener of listeners) listener();
+}
+function setDynamicToken(name, value) {
+  tokens.set(name, value);
+  applyToDom(name, value);
+  notify();
+}
+function getDynamicToken(name) {
+  return tokens.get(name);
+}
+function deleteDynamicToken(name) {
+  if (!tokens.delete(name)) return;
+  if (typeof document !== "undefined") document.documentElement.style.removeProperty(`--${name}`);
+  notify();
+}
+function subscribeDynamicTokens(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getDynamicTokensVersion() {
+  return version;
+}
+function _resetForTests() {
+  tokens.clear();
+  listeners.clear();
+  version = 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  _resetForTests,
+  deleteDynamicToken,
+  getDynamicToken,
+  getDynamicTokensVersion,
+  setDynamicToken,
+  subscribeDynamicTokens
+});

package/dist/index.d.ts

@@ -1,19 +1,15 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface ThemeConfig {
-    /** Plain hex only, this pass — e.g. "blue-6" -> "#2563eb" */
-    colors: Record<string, string>;
-    spacing: Record<string, number>;
-    screens: Record<string, number>;
-    darkMode: 'attribute' | 'class' | 'media';
-}
-declare const defaultTheme: ThemeConfig;
-declare function setTheme(theme: ThemeConfig): void;
-declare function getTheme(): ThemeConfig;
+export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
+export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as applyKbachConfig, r as resolveKbachConfig, u as useColors, e as useDynamicToken, f as useTheme } from './useDynamicToken-Dr15c88t.js';
+export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
+export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
+import 'react';
 
+type StyleValue = string | number | {
+    width: number;
+    height: number;
+};
 interface StyleObject {
-    [key: string]: string | number;
+    [key: string]: StyleValue;
 }
 /**
  * Calls the Rust engine via the KbachModule TurboModule (see
@@ -32,10 +28,9 @@ interface StyleObject {
  * whenever the mode is `'system'` (its own default), so nothing regresses
  * for apps that never touch the override API at all. This function itself
  * has no subscription of its own, so nothing re-renders just because the
- * store's value changed — call `useGlobalDarkMode()` (or consume
- * `useTheme()`'s `isDark`) somewhere in the tree for that, NOT React
- * Native's own `useColorScheme()`, which only reflects the raw OS setting
- * and would miss an explicit override entirely.
+ * store's value changed — call `useTheme()` (its `isDark`) somewhere in
+ * the tree for that, NOT React Native's own `useColorScheme()`, which only
+ * reflects the raw OS setting and would miss an explicit override entirely.
  *
  * Phase 11 originally shipped with live in-place theme switching unverified
  * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`
@@ -59,90 +54,46 @@ 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.
- */
-declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
-
-/**
- * Native port of @kbach/react's darkModeStore.ts — same architecture (a
- * single module-level store is the real source of truth;
- * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
- * function here works standalone with no provider mounted anywhere), with
- * two real platform differences from the web version:
  *
- * 1. No persistence. There's no React-Native-builtin equivalent of
- *    localStorage — adding one would mean forcing a real native dependency
- *    (e.g. @react-native-async-storage/async-storage) on every consumer,
- *    even ones that don't want it. The mode always starts at 'system' on a
- *    fresh app launch. If you want persistence, read your own storage at
- *    startup (before your first render) and call setGlobalThemeMode() with
- *    the result — same "seed once, no built-in write-back" shape as
- *    seedDefaultMode() below, just driven by your own storage instead of
- *    one this package picks for you.
- * 2. No DOM to "apply" the resolved mode to. On web, applyToDom() flips a
- *    class/attribute the generated CSS's `dark:` selectors match against.
- *    On native there's no CSS at all — nativeBridge.ts's resolveStyle()
- *    reads getGlobalDarkMode() directly on every call instead of querying
- *    Appearance.getColorScheme() itself, which is what actually makes an
- *    explicit override affect rendering (previously that function always
- *    read the raw OS setting, so it had no way to reflect a user choice —
- *    see nativeBridge.ts's own comment on this for why that's the one
- *    genuinely fixed bug this change introduces, not just a new feature).
- */
-type ThemeMode = 'light' | 'dark' | 'system';
-declare function getGlobalDarkMode(): boolean;
-declare function getGlobalThemeMode(): ThemeMode;
-/** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
-declare function setGlobalThemeMode(nextMode: ThemeMode): void;
-declare function toggleGlobalDarkMode(): void;
-declare function subscribeGlobalDarkMode(listener: () => void): () => void;
-
-/**
- * Reactive read of the global dark-mode store — works with or without a
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
- * `darkModeStore.ts` directly. 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 useGlobalDarkMode(): boolean;
-
-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;
-}
-/**
- * Native port of @kbach/react's `ThemeProvider` — a thin, OPTIONAL React
- * Context wrapper around `darkModeStore.ts`'s single global store, not the
- * source of truth itself. Because the store is global, MULTIPLE mounted
- * providers share the exact same `mode`/`isDark` state rather than each
- * getting their own scoped value — mounting more than one is very likely a
- * mistake (each fighting over the same state via a different
- * `defaultMode`), so this warns once in dev, matching the web version's
- * identical guard.
- */
-declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
-
-interface ThemeContextValue {
-    mode: ThemeMode;
-    isDark: boolean;
-    setMode: (mode: ThemeMode) => void;
-    toggle: () => void;
-}
-/**
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
- * component that destructures `{ mode, setMode }` genuinely needs Context
- * (unlike a component that just wants the dark/light boolean, which should
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
- * all).
+ * `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).
+ *
+ * Falls back to `./jsEngine` (a pure-JS, no-WASM/no-native reimplementation
+ * of this same resolution logic — see that directory's own doc comments)
+ * when `KbachModule` isn't registered at all — Expo Go, which can never
+ * load ANY custom native module (not even Expo's own Modules API), so the
+ * TurboModule this file otherwise depends on simply doesn't exist there.
+ * `TurboModuleRegistry.get` (not `.getEnforcing`, which throws) is what
+ * makes this detectable at all — `get` returns `null`/`undefined` instead.
+ * A real dev-client/CLI build always has the module registered, so this
+ * fallback only ever activates in Expo Go itself; everywhere else behaves
+ * exactly as before. The JS engine covers a strict subset of what the
+ * native/WASM engines resolve (see jsEngine/resolveUtilityNative.ts) — an
+ * intentional, documented parity gap, not a bug.
+ *
+ * An arbitrary value that couldn't be resolved to something RN's style
+ * system can actually use (an unreduced percentage/viewport-relative
+ * `calc()`, a raw `var(...)`, ...) is dropped from the returned style —
+ * never passed through as an invalid string — and surfaced via
+ * `console.warn` here (dev builds only, mirroring RN's own convention for
+ * this kind of non-fatal correctness warning) rather than failing
+ * silently. The native/JNI path embeds these under a `"__kbachWarnings"`
+ * key in the same JSON `resolve_style_json` already returns (see that
+ * function's own doc comment for why — reusing the one JSON round-trip
+ * rather than adding a second FFI call); the jsEngine fallback returns
+ * them directly via `resolveStyleJsWithWarnings`. Both paths converge here
+ * so call sites never need to know which engine actually resolved anything.
  */
-declare function useTheme(): ThemeContextValue;
+declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 
-export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };
+export { type StyleObject, resolveStyle };