@kbach/react 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/index.mjs

@@ -4,14 +4,20 @@ import {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb
-} from "./chunk-G3RJJNSY.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-AFY36PRX.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

@@ -334,21 +334,54 @@ var defaultTheme = {
     ...PALETTE,
     surface: { light: "#f9fafb", dark: "#111827" }
   },
+  // 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). 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" is always a hardcoded zero in real Tailwind's own scale too,
-    // regardless of the base spacing unit — needed for `p-0`/`m-0`/
-    // `top-0`/`inset-0`/etc., and specifically for `sticky top-0` (a
-    // sticky element needs an explicit offset to have any stick point at
-    // all; without one it behaves just like `relative`, no different from
-    // omitting `top-0` outright). Confirmed missing by hand: this
-    // sandbox's own header used `sticky top-0`, which silently never
-    // resolved (no "0" spacing key existed) until this was added.
     "0": 0,
+    "px": 1,
+    "0.5": 2,
     "1": 4,
+    "1.5": 6,
     "2": 8,
+    "2.5": 10,
+    "3": 12,
+    "3.5": 14,
     "4": 16,
+    "5": 20,
     "6": 24,
-    "8": 32
+    "7": 28,
+    "8": 32,
+    "9": 36,
+    "10": 40,
+    "11": 44,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "28": 112,
+    "32": 128,
+    "36": 144,
+    "40": 160,
+    "44": 176,
+    "48": 192,
+    "52": 208,
+    "56": 224,
+    "60": 240,
+    "64": 256,
+    "72": 288,
+    "80": 320,
+    "96": 384
   },
   screens: {
     sm: 640,
@@ -357,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-VBPQAIZL.mjs";
-import "./chunk-G3RJJNSY.mjs";
-import "./chunk-AFY36PRX.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

@@ -333,21 +333,54 @@ var defaultTheme = {
     ...PALETTE,
     surface: { light: "#f9fafb", dark: "#111827" }
   },
+  // 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). 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" is always a hardcoded zero in real Tailwind's own scale too,
-    // regardless of the base spacing unit — needed for `p-0`/`m-0`/
-    // `top-0`/`inset-0`/etc., and specifically for `sticky top-0` (a
-    // sticky element needs an explicit offset to have any stick point at
-    // all; without one it behaves just like `relative`, no different from
-    // omitting `top-0` outright). Confirmed missing by hand: this
-    // sandbox's own header used `sticky top-0`, which silently never
-    // resolved (no "0" spacing key existed) until this was added.
     "0": 0,
+    "px": 1,
+    "0.5": 2,
     "1": 4,
+    "1.5": 6,
     "2": 8,
+    "2.5": 10,
+    "3": 12,
+    "3.5": 14,
     "4": 16,
+    "5": 20,
     "6": 24,
-    "8": 32
+    "7": 28,
+    "8": 32,
+    "9": 36,
+    "10": 40,
+    "11": 44,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "28": 112,
+    "32": 128,
+    "36": 144,
+    "40": 160,
+    "44": 176,
+    "48": 192,
+    "52": 208,
+    "56": 224,
+    "60": 240,
+    "64": 256,
+    "72": 288,
+    "80": 320,
+    "96": 384
   },
   screens: {
     sm: 640,
@@ -356,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-VBPQAIZL.mjs";
-import "./chunk-G3RJJNSY.mjs";
-import "./chunk-AFY36PRX.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");
@@ -1421,21 +1422,54 @@ var defaultTheme = {
     ...PALETTE,
     surface: { light: "#f9fafb", dark: "#111827" }
   },
+  // 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). 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" is always a hardcoded zero in real Tailwind's own scale too,
-    // regardless of the base spacing unit — needed for `p-0`/`m-0`/
-    // `top-0`/`inset-0`/etc., and specifically for `sticky top-0` (a
-    // sticky element needs an explicit offset to have any stick point at
-    // all; without one it behaves just like `relative`, no different from
-    // omitting `top-0` outright). Confirmed missing by hand: this
-    // sandbox's own header used `sticky top-0`, which silently never
-    // resolved (no "0" spacing key existed) until this was added.
     "0": 0,
+    "px": 1,
+    "0.5": 2,
     "1": 4,
+    "1.5": 6,
     "2": 8,
+    "2.5": 10,
+    "3": 12,
+    "3.5": 14,
     "4": 16,
+    "5": 20,
     "6": 24,
-    "8": 32
+    "7": 28,
+    "8": 32,
+    "9": 36,
+    "10": 40,
+    "11": 44,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "28": 112,
+    "32": 128,
+    "36": 144,
+    "40": 160,
+    "44": 176,
+    "48": 192,
+    "52": 208,
+    "56": 224,
+    "60": 240,
+    "64": 256,
+    "72": 288,
+    "80": 320,
+    "96": 384
   },
   screens: {
     sm: 640,
@@ -1444,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) {
@@ -1465,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();
@@ -1547,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-AFY36PRX.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);