@kbach/react 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/index.mjs

@@ -4,14 +4,20 @@ import {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb
-} from "./chunk-ROZXCQSM.mjs";
+} from "./chunk-ZQJKL2MV.mjs";
+import {
+  applyKbachConfig,
+  ensureColorVariablesInjected,
+  parseHexRgb,
+  resolveKbachConfig
+} from "./chunk-NKR3PSWO.mjs";
 import {
   BASE_RESET,
   RESET_STYLE_ID,
   defaultTheme,
   getTheme,
   setTheme
-} from "./chunk-FOQWQDF4.mjs";
+} from "./chunk-N5HCQIBB.mjs";
 
 // src/KbachReset.tsx
 import { jsx } from "react/jsx-runtime";
@@ -20,6 +26,9 @@ function KbachReset() {
   return /* @__PURE__ */ jsx("style", { id: RESET_STYLE_ID, children: BASE_RESET });
 }
 
+// src/useTheme.ts
+import { useMemo, useSyncExternalStore } from "react";
+
 // src/darkModeStore.ts
 var STORAGE_KEY = "kbach-theme";
 var listeners = /* @__PURE__ */ new Set();
@@ -107,31 +116,19 @@ function seedDefaultMode(fallback) {
   notify();
 }
 
-// src/useGlobalDarkMode.ts
-import { useSyncExternalStore } from "react";
-var getServerSnapshot = () => false;
-function useGlobalDarkMode() {
-  return useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode, getServerSnapshot);
-}
-
-// src/ThemeProvider.tsx
-import { useEffect, useMemo, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
-
-// src/ThemeContext.tsx
-import { createContext, useContext } from "react";
-var ThemeContext = createContext(null);
+// src/useTheme.ts
 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" instead.'
-    );
-  }
-  return ctx;
+  const isDark2 = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
+  const mode2 = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalThemeMode, () => "system");
+  return useMemo(
+    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode2, isDark2]
+  );
 }
 
 // src/ThemeProvider.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 var mountedProviderCount = 0;
 var warnedMultipleProviders = false;
 function ThemeProvider({ children, defaultMode = "system" }) {
@@ -140,7 +137,7 @@ function ThemeProvider({ children, defaultMode = "system" }) {
     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."
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store useTheme() reads everywhere, not scoped per-provider, so their defaultMode seeds will fight over the same state."
       );
     }
     return () => {
@@ -153,17 +150,76 @@ function ThemeProvider({ children, defaultMode = "system" }) {
     seeded.current = true;
     seedDefaultMode(defaultMode);
   }, []);
-  const isDark2 = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
-  const mode2 = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalThemeMode, () => defaultMode);
-  const value = useMemo(
-    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
-    [mode2, isDark2]
-  );
-  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(Fragment, { children });
+}
+
+// src/useColors.ts
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  const varMatch = /^rgb\(var\((--[\w-]+)\)\)$/.exec(color);
+  if (varMatch) return `rgba(var(${varMatch[1]}), ${a})`;
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb(color);
+    return rgb ? `rgba(${rgb.join(",")},${a})` : color;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
+  return color;
+}
+function resolveEntry(name, entry, isDark2) {
+  if (typeof entry === "string") return entry;
+  const light = parseHexRgb(entry.light);
+  const dark = parseHexRgb(entry.dark);
+  if (light && dark) return `rgb(var(--kb-color-${name}))`;
+  return isDark2 ? entry.dark : entry.light;
+}
+function makeColorsProxy(theme, isDark2) {
+  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
+  const cache = /* @__PURE__ */ new Map();
+  function resolveNamed(key) {
+    let name = key;
+    let opacity;
+    if (key.includes("/")) {
+      const slash = key.indexOf("/");
+      name = key.slice(0, slash);
+      opacity = Number(key.slice(slash + 1));
+    }
+    const entry = theme.colors[name];
+    if (entry === void 0) return void 0;
+    const value = resolveEntry(name, entry, isDark2);
+    return opacity === void 0 ? value : applyOpacity(value, opacity);
+  }
+  function makeFamilyProxy(family) {
+    return new Proxy({}, {
+      get(_, prop) {
+        const key = String(prop);
+        if (key === "then") return void 0;
+        return resolveNamed(`${family}-${key}`);
+      }
+    });
+  }
+  return new Proxy({ alpha }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      const direct = resolveNamed(key);
+      if (direct !== void 0) return direct;
+      if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
+      return cache.get(key);
+    }
+  });
+}
+function useColors() {
+  const { isDark: isDark2 } = useTheme();
+  const theme = getTheme();
+  ensureColorVariablesInjected(theme);
+  return makeColorsProxy(theme, isDark2);
 }
 export {
   KbachReset,
   ThemeProvider,
+  applyKbachConfig,
   defaultTheme,
   disableRuntimeCSS,
   getGlobalDarkMode,
@@ -173,10 +229,11 @@ export {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb,
+  resolveKbachConfig,
   setGlobalThemeMode,
   setTheme,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode,
-  useGlobalDarkMode,
+  useColors,
   useTheme
 };

package/dist/jsx-dev-runtime.js

@@ -337,14 +337,15 @@ var defaultTheme = {
   // Real Tailwind's default spacing scale in full — every step is exactly
   // `n * 4px` (Tailwind's base spacing unit), including the fractional
   // `.5` steps (`1.5` -> 6px, `2.5` -> 10px, `3.5` -> 14px) and the "px"
-  // literal (a bare 1px, for `p-px`-style hairline spacing). Previously
-  // this only had {0,1,2,4,6,8} — a handful of spot-checked values, not
-  // the real scale — so anything else (`p-3`, `w-5`, `border-2`, `gap-10`,
-  // ...) silently failed to resolve (an unknown spacing key returns `None`
-  // the same way an unknown class does, with no error). "0" itself is
-  // still needed explicitly (not derivable as "any number * 4") for the
-  // same reason it always was: `sticky top-0` needs an actual "0" key to
-  // resolve at all, not just fall through as unresolvable.
+  // literal (a bare 1px, for `p-px`-style hairline spacing). This table is
+  // only the "usual stops", though — the Rust/JS engines' shared
+  // `spacing_px`/`spacingPx` helper falls back to Tailwind v4's own live
+  // `n * 4px` formula for any bare numeric step NOT listed here (`p-0.25`,
+  // `gap-1.75`, `w-13`, ...), so this table exists to name the common
+  // values and give a theme customization something to override, not to
+  // enumerate every resolvable step. "px" is the one exception that must
+  // stay listed explicitly — it isn't a number, so the formula can't
+  // derive it.
   spacing: {
     "0": 0,
     "px": 1,
@@ -389,7 +390,21 @@ var defaultTheme = {
     xl: 1280,
     "2xl": 1536
   },
-  darkMode: "attribute"
+  // Byte-for-byte the same three stacks
+  // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
+  // falls back to — kept here too (rather than leaving this empty and
+  // relying purely on the Rust-side fallback) so `defaultTheme.fontFamily.sans`
+  // is a real, readable value for anything that wants to extend rather
+  // than replace it (see `KbachConfig.extend.fontFamily` in config.ts).
+  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 (no forced
+  // centering/padding) — see `ContainerConfig`'s own doc comment.
+  container: {}
 };
 var activeThemeJson = JSON.stringify(defaultTheme);
 function getThemeJson() {

package/dist/jsx-dev-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-AD3G6RHY.mjs";
-import "./chunk-ROZXCQSM.mjs";
-import "./chunk-FOQWQDF4.mjs";
+} from "./chunk-PAJ6KHDB.mjs";
+import "./chunk-ZQJKL2MV.mjs";
+import "./chunk-N5HCQIBB.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -336,14 +336,15 @@ var defaultTheme = {
   // Real Tailwind's default spacing scale in full — every step is exactly
   // `n * 4px` (Tailwind's base spacing unit), including the fractional
   // `.5` steps (`1.5` -> 6px, `2.5` -> 10px, `3.5` -> 14px) and the "px"
-  // literal (a bare 1px, for `p-px`-style hairline spacing). Previously
-  // this only had {0,1,2,4,6,8} — a handful of spot-checked values, not
-  // the real scale — so anything else (`p-3`, `w-5`, `border-2`, `gap-10`,
-  // ...) silently failed to resolve (an unknown spacing key returns `None`
-  // the same way an unknown class does, with no error). "0" itself is
-  // still needed explicitly (not derivable as "any number * 4") for the
-  // same reason it always was: `sticky top-0` needs an actual "0" key to
-  // resolve at all, not just fall through as unresolvable.
+  // literal (a bare 1px, for `p-px`-style hairline spacing). This table is
+  // only the "usual stops", though — the Rust/JS engines' shared
+  // `spacing_px`/`spacingPx` helper falls back to Tailwind v4's own live
+  // `n * 4px` formula for any bare numeric step NOT listed here (`p-0.25`,
+  // `gap-1.75`, `w-13`, ...), so this table exists to name the common
+  // values and give a theme customization something to override, not to
+  // enumerate every resolvable step. "px" is the one exception that must
+  // stay listed explicitly — it isn't a number, so the formula can't
+  // derive it.
   spacing: {
     "0": 0,
     "px": 1,
@@ -388,7 +389,21 @@ var defaultTheme = {
     xl: 1280,
     "2xl": 1536
   },
-  darkMode: "attribute"
+  // Byte-for-byte the same three stacks
+  // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
+  // falls back to — kept here too (rather than leaving this empty and
+  // relying purely on the Rust-side fallback) so `defaultTheme.fontFamily.sans`
+  // is a real, readable value for anything that wants to extend rather
+  // than replace it (see `KbachConfig.extend.fontFamily` in config.ts).
+  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 (no forced
+  // centering/padding) — see `ContainerConfig`'s own doc comment.
+  container: {}
 };
 var activeThemeJson = JSON.stringify(defaultTheme);
 function getThemeJson() {

package/dist/jsx-runtime.mjs

@@ -2,9 +2,9 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-AD3G6RHY.mjs";
-import "./chunk-ROZXCQSM.mjs";
-import "./chunk-FOQWQDF4.mjs";
+} from "./chunk-PAJ6KHDB.mjs";
+import "./chunk-ZQJKL2MV.mjs";
+import "./chunk-N5HCQIBB.mjs";
 export {
   Fragment,
   jsx,

package/dist/vite-plugin.d.mts

@@ -1,9 +1,23 @@
 import { Plugin } from 'vite';
-import { T as ThemeConfig } from './theme-BKAb78KP.mjs';
+import { T as ThemeConfig, K as KbachConfig } from './config-BQ_b-qxF.mjs';
 
 interface KbachPluginOptions {
     /** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */
     theme?: ThemeConfig;
+    /**
+     * A `kbach.config.js`-style config object, resolved the same way
+     * `applyKbachConfig()` resolves it for the runtime — import the SAME
+     * config file here and in your app's own `applyKbachConfig()` call, and
+     * build-time CSS generation and runtime resolution always agree, with no
+     * synchronization step needed (`resolveKbachConfig` is a pure function:
+     * same input, same output, in Node.js here and in the browser there).
+     * Ignored if `theme` is also supplied. Only needed for an explicit
+     * override, though — if BOTH this and `theme` are omitted, `kbach()`
+     * auto-discovers a `kbach.config.js` at the project root on its own (see
+     * `loadConfigFile`'s own doc comment), the same zero-config convenience
+     * `tailwind.config.js` gets from Tailwind's own PostCSS plugin.
+     */
+    config?: KbachConfig;
     /** Directories to scan for class strings (relative to Vite root). */
     include?: string[];
     /**

package/dist/vite-plugin.d.ts

@@ -1,9 +1,23 @@
 import { Plugin } from 'vite';
-import { T as ThemeConfig } from './theme-BKAb78KP.js';
+import { T as ThemeConfig, K as KbachConfig } from './config-BQ_b-qxF.js';
 
 interface KbachPluginOptions {
     /** Defaults to the same defaultTheme the runtime uses — pass your own to keep both in sync. */
     theme?: ThemeConfig;
+    /**
+     * A `kbach.config.js`-style config object, resolved the same way
+     * `applyKbachConfig()` resolves it for the runtime — import the SAME
+     * config file here and in your app's own `applyKbachConfig()` call, and
+     * build-time CSS generation and runtime resolution always agree, with no
+     * synchronization step needed (`resolveKbachConfig` is a pure function:
+     * same input, same output, in Node.js here and in the browser there).
+     * Ignored if `theme` is also supplied. Only needed for an explicit
+     * override, though — if BOTH this and `theme` are omitted, `kbach()`
+     * auto-discovers a `kbach.config.js` at the project root on its own (see
+     * `loadConfigFile`'s own doc comment), the same zero-config convenience
+     * `tailwind.config.js` gets from Tailwind's own PostCSS plugin.
+     */
+    config?: KbachConfig;
     /** Directories to scan for class strings (relative to Vite root). */
     include?: string[];
     /**

package/dist/vite-plugin.js

@@ -25,6 +25,7 @@ __export(vite_plugin_exports, {
 module.exports = __toCommonJS(vite_plugin_exports);
 var import_fs2 = require("fs");
 var import_path3 = require("path");
+var import_module = require("module");
 
 // src/vite-plugin/wasmNode.ts
 var import_node = require("@kbach/core-engine/node");
@@ -1424,14 +1425,15 @@ var defaultTheme = {
   // Real Tailwind's default spacing scale in full — every step is exactly
   // `n * 4px` (Tailwind's base spacing unit), including the fractional
   // `.5` steps (`1.5` -> 6px, `2.5` -> 10px, `3.5` -> 14px) and the "px"
-  // literal (a bare 1px, for `p-px`-style hairline spacing). Previously
-  // this only had {0,1,2,4,6,8} — a handful of spot-checked values, not
-  // the real scale — so anything else (`p-3`, `w-5`, `border-2`, `gap-10`,
-  // ...) silently failed to resolve (an unknown spacing key returns `None`
-  // the same way an unknown class does, with no error). "0" itself is
-  // still needed explicitly (not derivable as "any number * 4") for the
-  // same reason it always was: `sticky top-0` needs an actual "0" key to
-  // resolve at all, not just fall through as unresolvable.
+  // literal (a bare 1px, for `p-px`-style hairline spacing). This table is
+  // only the "usual stops", though — the Rust/JS engines' shared
+  // `spacing_px`/`spacingPx` helper falls back to Tailwind v4's own live
+  // `n * 4px` formula for any bare numeric step NOT listed here (`p-0.25`,
+  // `gap-1.75`, `w-13`, ...), so this table exists to name the common
+  // values and give a theme customization something to override, not to
+  // enumerate every resolvable step. "px" is the one exception that must
+  // stay listed explicitly — it isn't a number, so the formula can't
+  // derive it.
   spacing: {
     "0": 0,
     "px": 1,
@@ -1476,10 +1478,83 @@ var defaultTheme = {
     xl: 1280,
     "2xl": 1536
   },
-  darkMode: "attribute"
+  // Byte-for-byte the same three stacks
+  // packages/core-engine/src/resolvers/typography.rs's `font_family_value`
+  // falls back to — kept here too (rather than leaving this empty and
+  // relying purely on the Rust-side fallback) so `defaultTheme.fontFamily.sans`
+  // is a real, readable value for anything that wants to extend rather
+  // than replace it (see `KbachConfig.extend.fontFamily` in config.ts).
+  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 (no forced
+  // centering/padding) — see `ContainerConfig`'s own doc comment.
+  container: {}
 };
 var activeThemeJson = JSON.stringify(defaultTheme);
 
+// src/colorVariables.ts
+function parseHexRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+
+// src/config.ts
+function applyOpacityToHex(hex, opacityText) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const a = Number(opacityText) / 100;
+  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
+  return `rgba(${rgb.join(",")},${clamped})`;
+}
+function resolveColorEntry(value, lookup) {
+  if (typeof value !== "string") return value;
+  const slash = value.indexOf("/");
+  const name = slash === -1 ? value : value.slice(0, slash);
+  const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
+  const base = lookup(name);
+  if (base === void 0) return value;
+  if (opacity === void 0) return base;
+  return typeof base === "string" ? applyOpacityToHex(base, opacity) : { light: applyOpacityToHex(base.light, opacity), dark: applyOpacityToHex(base.dark, opacity) };
+}
+function resolveColors(extend, existing) {
+  const resolved = {};
+  const lookup = (name) => resolved[name] ?? existing[name];
+  for (const [name, value] of Object.entries(extend)) {
+    resolved[name] = resolveColorEntry(value, lookup);
+  }
+  return resolved;
+}
+function resolveKbachConfig(config) {
+  let theme = { ...defaultTheme, ...config.theme };
+  if (config.extend?.colors) {
+    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
+  }
+  if (config.extend?.spacing) {
+    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
+  }
+  if (config.extend?.screens) {
+    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
+  }
+  if (config.extend?.fontFamily) {
+    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
+  }
+  if (config.extend?.container) {
+    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
+  }
+  if (config.darkMode) {
+    theme = { ...theme, darkMode: config.darkMode };
+  }
+  return theme;
+}
+
 // src/vite-plugin/index.ts
 var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components"];
 function normPath(p) {
@@ -1497,9 +1572,15 @@ function writeFileEnsuringDir(path, content) {
   (0, import_fs2.mkdirSync)((0, import_path3.dirname)(path), { recursive: true });
   (0, import_fs2.writeFileSync)(path, content, "utf-8");
 }
+function loadConfigFile(root) {
+  const path = (0, import_path3.join)(root, "kbach.config.js");
+  if (!(0, import_fs2.existsSync)(path)) return void 0;
+  const mod = (0, import_module.createRequire)(root)(path);
+  return mod.default ?? mod;
+}
 function kbach(options = {}) {
-  const theme = options.theme ?? defaultTheme;
-  const themeJson = JSON.stringify(theme);
+  let theme = options.theme ?? (options.config ? resolveKbachConfig(options.config) : defaultTheme);
+  let themeJson = JSON.stringify(theme);
   const includeDirs = options.include ?? DEFAULT_SCAN_DIRS;
   const safelist = options.safelist ?? [];
   let root = process.cwd();
@@ -1579,6 +1660,13 @@ function kbach(options = {}) {
     enforce: "pre",
     configResolved(resolved) {
       root = resolved.root;
+      if (!options.theme && !options.config) {
+        const discovered = loadConfigFile(root);
+        if (discovered) {
+          theme = resolveKbachConfig(discovered);
+          themeJson = JSON.stringify(theme);
+        }
+      }
     },
     buildStart() {
       projectCssClasses = scanProjectCssSelectors(root, includeDirs);

package/dist/vite-plugin.mjs

@@ -1,11 +1,15 @@
+import {
+  resolveKbachConfig
+} from "./chunk-NKR3PSWO.mjs";
 import {
   buildResetCSS,
   defaultTheme
-} from "./chunk-FOQWQDF4.mjs";
+} from "./chunk-N5HCQIBB.mjs";
 
 // src/vite-plugin/index.ts
-import { readFileSync as readFileSync2, writeFileSync, mkdirSync } from "fs";
+import { readFileSync as readFileSync2, writeFileSync, mkdirSync, existsSync } from "fs";
 import { join as join3, dirname } from "path";
+import { createRequire } from "module";
 
 // src/vite-plugin/wasmNode.ts
 import { generate_css } from "@kbach/core-engine/node";
@@ -1053,9 +1057,15 @@ function writeFileEnsuringDir(path, content) {
   mkdirSync(dirname(path), { recursive: true });
   writeFileSync(path, content, "utf-8");
 }
+function loadConfigFile(root) {
+  const path = join3(root, "kbach.config.js");
+  if (!existsSync(path)) return void 0;
+  const mod = createRequire(root)(path);
+  return mod.default ?? mod;
+}
 function kbach(options = {}) {
-  const theme = options.theme ?? defaultTheme;
-  const themeJson = JSON.stringify(theme);
+  let theme = options.theme ?? (options.config ? resolveKbachConfig(options.config) : defaultTheme);
+  let themeJson = JSON.stringify(theme);
   const includeDirs = options.include ?? DEFAULT_SCAN_DIRS;
   const safelist = options.safelist ?? [];
   let root = process.cwd();
@@ -1135,6 +1145,13 @@ function kbach(options = {}) {
     enforce: "pre",
     configResolved(resolved) {
       root = resolved.root;
+      if (!options.theme && !options.config) {
+        const discovered = loadConfigFile(root);
+        if (discovered) {
+          theme = resolveKbachConfig(discovered);
+          themeJson = JSON.stringify(theme);
+        }
+      }
     },
     buildStart() {
       projectCssClasses = scanProjectCssSelectors(root, includeDirs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "A utility-first styling engine for React, powered by a real Rust/WASM core — Tailwind CSS v4 feature parity with Kbach's own color palette.",
   "keywords": ["css", "react", "tailwind", "utility-first", "wasm", "styling"],
   "license": "MIT",
@@ -56,7 +56,7 @@
     "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts"
   },
   "dependencies": {
-    "@kbach/core-engine": "1.0.0-beta.2"
+    "@kbach/core-engine": "1.0.0-beta.4"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/dist/theme-BKAb78KP.d.mts

@@ -1,20 +0,0 @@
-/** A plain hex color, or a mode-aware pair auto-expanded into a light/dark class pair by the Rust engine. */
-type ColorEntry = string | {
-    light: string;
-    dark: string;
-};
-type DarkModeStrategy = 'attribute' | 'class' | 'media';
-interface ThemeConfig {
-    /** e.g. "blue-6" -> "#2563eb", or "surface" -> { light, dark } */
-    colors: Record<string, ColorEntry>;
-    /** e.g. "4" -> 16 (px) */
-    spacing: Record<string, number>;
-    /** e.g. "sm" -> 640 (min-width px) */
-    screens: Record<string, number>;
-    darkMode: DarkModeStrategy;
-}
-declare const defaultTheme: ThemeConfig;
-declare function setTheme(theme: ThemeConfig): void;
-declare function getTheme(): ThemeConfig;
-
-export { type ThemeConfig as T, defaultTheme as d, getTheme as g, setTheme as s };

package/dist/theme-BKAb78KP.d.ts

@@ -1,20 +0,0 @@
-/** A plain hex color, or a mode-aware pair auto-expanded into a light/dark class pair by the Rust engine. */
-type ColorEntry = string | {
-    light: string;
-    dark: string;
-};
-type DarkModeStrategy = 'attribute' | 'class' | 'media';
-interface ThemeConfig {
-    /** e.g. "blue-6" -> "#2563eb", or "surface" -> { light, dark } */
-    colors: Record<string, ColorEntry>;
-    /** e.g. "4" -> 16 (px) */
-    spacing: Record<string, number>;
-    /** e.g. "sm" -> 640 (min-width px) */
-    screens: Record<string, number>;
-    darkMode: DarkModeStrategy;
-}
-declare const defaultTheme: ThemeConfig;
-declare function setTheme(theme: ThemeConfig): void;
-declare function getTheme(): ThemeConfig;
-
-export { type ThemeConfig as T, defaultTheme as d, getTheme as g, setTheme as s };