@kbach/react 0.5.56 → 0.5.58

package/dist/{types-D-24rbXu.d.mts → types-BESBQANS.d.ts}

@@ -44,7 +44,7 @@ interface ModifierDef {
 
 type ThemeMode = 'light' | 'dark' | 'system';
 interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | unknown[];
+    [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
 }
 interface ParsedClass {
     /** The original class string, e.g. "dark:hover:bg-[#fff]" */
@@ -83,11 +83,16 @@ interface ThemeConfig {
     lineHeight: Record<string, number | string>;
     letterSpacing: Record<string, number | string>;
     zIndex: Record<string, number | string>;
-    flex: Record<string, number>;
+    flex: Record<string, number | string>;
     shadow: Record<string, StyleValue>;
     screens: Record<string, string | number>;
     [key: string]: unknown;
 }
+/**
+ * 'class'     — toggles .dark class on <html>
+ * 'media'     — uses prefers-color-scheme media query
+ * 'attribute' — uses data-theme="dark" attribute on <html>
+ */
 type DarkMode = 'attribute' | 'class' | 'media';
 interface PluginAPI {
     addUtility(name: string, styles: StyleValue): void;

package/dist/vite-plugin.d.mts

@@ -1,6 +1,11 @@
 import { Plugin } from 'vite';
-import { F as FrameworkConfig } from './types-D-24rbXu.mjs';
+import { F as FrameworkConfig } from './types-BESBQANS.mjs';
 
-declare function kbach(userConfig?: FrameworkConfig): Plugin;
+interface KbachPluginOptions {
+    framework?: FrameworkConfig;
+    /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
+    include?: string[];
+}
+declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
 
-export { kbach };
+export { type KbachPluginOptions, kbach };

package/dist/vite-plugin.d.ts

@@ -1,6 +1,11 @@
 import { Plugin } from 'vite';
-import { F as FrameworkConfig } from './types-D-24rbXu.js';
+import { F as FrameworkConfig } from './types-BESBQANS.js';
 
-declare function kbach(userConfig?: FrameworkConfig): Plugin;
+interface KbachPluginOptions {
+    framework?: FrameworkConfig;
+    /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
+    include?: string[];
+}
+declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
 
-export { kbach };
+export { type KbachPluginOptions, kbach };

package/dist/vite-plugin.js

@@ -28,7 +28,7 @@ var import_path = require("path");
 
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative");
+var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined");
 var _cssGenMode = false;
 function setCSSGenMode(on) {
   _cssGenMode = on;
@@ -44,7 +44,7 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
 // src/core/reset.ts
@@ -504,14 +504,15 @@ var defaultTheme = {
     normal: 1.5,
     relaxed: 1.625,
     loose: 2,
-    3: 12,
-    4: 16,
-    5: 20,
-    6: 24,
-    7: 28,
-    8: 32,
-    9: 36,
-    10: 40
+    // Pixel values stored as strings; styleValueToCSS passes them through, toNativeValue strips the unit
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    7: "28px",
+    8: "32px",
+    9: "36px",
+    10: "40px"
   },
   letterSpacing: {
     tighter: -0.8,
@@ -532,9 +533,12 @@ var defaultTheme = {
   },
   flex: {
     1: 1,
-    auto: 1,
-    initial: 0,
-    none: 0
+    auto: "auto",
+    // CSS: flex: auto = 1 1 auto; native: mapped to 1 in resolver
+    initial: "initial",
+    // CSS: flex: initial = 0 1 auto; native: mapped to 1
+    none: "none"
+    // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
   shadow: {
     sm: {
@@ -643,7 +647,7 @@ function resolveColor(value, colors, isArbitrary) {
   }
   if (!hex) return null;
   if (!opacityPart) {
-    if (!isWeb && hex.startsWith("#") && hex.length === 9) {
+    if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
       return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
     }
     return hex;
@@ -677,7 +681,10 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
     if (negative) {
       if (typeof resolved === "number") return -resolved;
-      if (typeof resolved === "string" && /^\d/.test(resolved)) return `-${resolved}`;
+      if (typeof resolved === "string") {
+        if (/^\d/.test(resolved)) return `-${resolved}`;
+        if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
+      }
     }
     return resolved;
   }
@@ -1183,7 +1190,11 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     if (color) return { borderColor: color };
     const w = borderWidth[value] ?? spacing[value];
-    if (w !== void 0) return { borderWidth: typeof w === "number" ? w : parseFloat(String(w)) };
+    if (w !== void 0) {
+      const numW = typeof w === "number" ? w : parseFloat(String(w));
+      if (isNaN(numW)) return null;
+      return { borderWidth: numW };
+    }
     return null;
   },
   "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
@@ -1886,7 +1897,7 @@ var RESOLVERS = {
   },
   // ── Tint color (native-only, for Image and icon components) ──────────────
   tint: ({ value, isArbitrary }, { colors }) => {
-    if (isWeb) return null;
+    if (getEffectiveIsWeb()) return null;
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { tintColor: color } : null;
   },
@@ -1958,7 +1969,15 @@ var RESOLVERS = {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
     }
-    if (value in flex) return { flex: flex[value] };
+    if (value in flex) {
+      const v = flex[value];
+      if (typeof v === "string" && !getEffectiveIsWeb()) {
+        if (v === "auto" || v === "initial") return { flex: 1 };
+        if (v === "none") return { flex: 0 };
+        return null;
+      }
+      return { flex: v };
+    }
     const n = parseFloat(value);
     return isNaN(n) ? null : { flex: n };
   },
@@ -2061,7 +2080,9 @@ var RESOLVERS = {
   leading: ({ value, isArbitrary }, { lineHeight }) => {
     if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
     const v = lineHeight[value];
-    return v !== void 0 ? { lineHeight: v } : null;
+    if (v === void 0) return null;
+    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
+    return { lineHeight: v };
   },
   // ── Letter spacing ─────────────────────────────────────────────────────────
   tracking: ({ value, isArbitrary }, { letterSpacing }) => {
@@ -2137,7 +2158,7 @@ var RESOLVERS = {
   transition: ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
     const presets = {
-      "": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
+      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
       all: "all 150ms",
       none: "none",
       colors: "color 150ms, background-color 150ms, border-color 150ms",
@@ -2150,11 +2171,13 @@ var RESOLVERS = {
   },
   duration: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDuration: ms };
   },
   delay: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
@@ -2197,14 +2220,20 @@ var RESOLVERS = {
       boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
     };
   },
-  // ── Space between (uses CSS gap or margin fallback) ────────────────────────
+  // ── Space between ─────────────────────────────────────────────────────────
+  // On web: emits __spaceX/__spaceY markers → resolver generates > * + * CSS rules.
+  // On native (RN 0.71+): uses columnGap/rowGap directly.
   "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { columnGap: v } : null;
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceX: v };
+    return { columnGap: v };
   },
   "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { rowGap: v } : null;
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceY: v };
+    return { rowGap: v };
   }
 };
 function resolveUtility(parsed, theme) {
@@ -2317,6 +2346,10 @@ function _invalidate() {
   _responsiveNames = null;
 }
 function registerModifier(name, def) {
+  if (process.env.NODE_ENV !== "production" && name in BUILTIN_MODIFIERS) {
+    console.warn(`[kbach] registerModifier: "${name}" is a built-in modifier and cannot be overridden. Use a different name.`);
+    return;
+  }
   _pluginModifiers[name] = def;
   _invalidate();
 }
@@ -2355,12 +2388,28 @@ function parseClass(className) {
     negative = true;
     remaining = remaining.slice(1);
   }
-  const bracketStart = remaining.lastIndexOf("-[");
-  if (bracketStart > 0 && remaining.endsWith("]")) {
-    const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
+  let bracketDepth = 0;
+  let bracketStart = -1;
+  for (let i = remaining.length - 1; i >= 0; i--) {
+    if (remaining[i] === "]") bracketDepth++;
+    else if (remaining[i] === "[") {
+      bracketDepth--;
+      if (bracketDepth === 0) {
+        bracketStart = i;
+        break;
+      }
+    }
+  }
+  if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
+    const utility = remaining.slice(0, bracketStart - 1);
+    const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.endsWith("]") && bracketStart === -1) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+    }
+  }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
     const value = remaining.slice(1, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
@@ -2395,6 +2444,7 @@ function splitClassTokens(classString) {
   const tokens = [];
   let current = "";
   let depth = 0;
+  let parenDepth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
     if (ch === "[") {
@@ -2407,8 +2457,18 @@ function splitClassTokens(classString) {
       current += ch;
       continue;
     }
+    if (ch === "(") {
+      parenDepth++;
+      current += ch;
+      continue;
+    }
+    if (ch === ")") {
+      parenDepth--;
+      current += ch;
+      continue;
+    }
     if (/\s/.test(ch)) {
-      if (depth === 0) {
+      if (depth === 0 && parenDepth === 0) {
         if (current) {
           tokens.push(current);
           current = "";
@@ -2444,6 +2504,7 @@ function findOuterColon(s) {
 var LRUCache = class {
   constructor(capacity = 1e4) {
     this.capacity = capacity;
+    if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
     this.cache = /* @__PURE__ */ new Map();
   }
   get(key) {
@@ -2463,11 +2524,7 @@ var LRUCache = class {
     return this;
   }
   has(key) {
-    if (!this.cache.has(key)) return false;
-    const value = this.cache.get(key);
-    this.cache.delete(key);
-    this.cache.set(key, value);
-    return true;
+    return this.cache.has(key);
   }
   delete(key) {
     return this.cache.delete(key);
@@ -2510,24 +2567,41 @@ function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [BASE_RESET];
   const ff = theme.fontFamily;
+  if (!ff) return;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
     rules.push(`body { font-family: ${family}; }`);
   }
   getGlobalStyleEl().textContent = rules.join("\n");
 }
-function buildDivideDecls(styles) {
+function buildDivideDecls(styles, forceImportant) {
+  const imp = forceImportant ? " !important" : "";
   const parts = [];
   if ("__divideX" in styles) {
     const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px`, "border-right-width: 0px");
+    parts.push(`border-left-width: ${w}px${imp}`, `border-right-width: 0px${imp}`);
   }
   if ("__divideY" in styles) {
     const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px`, "border-bottom-width: 0px");
+    parts.push(`border-top-width: ${w}px${imp}`, `border-bottom-width: 0px${imp}`);
+  }
+  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}${imp}`);
+  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}${imp}`);
+  return parts.join("; ");
+}
+function buildSpaceDecls(styles, forceImportant) {
+  const imp = forceImportant ? " !important" : "";
+  const parts = [];
+  if ("__spaceX" in styles) {
+    const v = styles.__spaceX;
+    const val = typeof v === "number" ? `${v}px` : String(v);
+    parts.push(`margin-left: ${val}${imp}`);
+  }
+  if ("__spaceY" in styles) {
+    const v = styles.__spaceY;
+    const val = typeof v === "number" ? `${v}px` : String(v);
+    parts.push(`margin-top: ${val}${imp}`);
   }
-  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
-  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
   return parts.join("; ");
 }
 var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
@@ -2547,7 +2621,9 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "__divideY",
   "__divideColor",
   "__divideStyle",
-  "__keyframe"
+  "__keyframe",
+  "__spaceX",
+  "__spaceY"
 ]);
 var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "opacity",
@@ -2600,10 +2676,12 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
     rules.push(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
+  const isSpace = "__spaceX" in styles || "__spaceY" in styles;
+  const isChildCombinator = isDivide || isSpace;
   const escaped = escapeCSSSelector(cls);
-  const childSuffix = isDivide ? " > * + *" : "";
+  const childSuffix = isChildCombinator ? " > * + *" : "";
   if (bucketKey === "base") {
-    const decls2 = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    const decls2 = isDivide ? buildDivideDecls(styles, important) : isSpace ? buildSpaceDecls(styles, important) : styleValueToCSS(styles, important);
     if (!decls2) return rules;
     rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
     return rules;
@@ -2644,7 +2722,7 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
   const ancestorPrefix = ancestorParts.join("");
   const dirPrefix = dirParts.join("");
   const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const decls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  const decls = isDivide ? buildDivideDecls(styles, needsImportant) : isSpace ? buildSpaceDecls(styles, needsImportant) : styleValueToCSS(styles, needsImportant);
   if (!decls) return rules;
   let rule;
   if (darkScheme === "dark") {
@@ -2737,19 +2815,24 @@ function buildConfig(userConfig) {
     theme = deepMerge(theme, userConfig.theme);
   }
   if (userConfig.extend) {
-    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    const extendConfig = userConfig.extend;
+    const { theme: nestedTheme, ...directKeys } = extendConfig;
     const extSources = [];
     if (nestedTheme) extSources.push(nestedTheme);
     if (Object.keys(directKeys).length) extSources.push(directKeys);
     for (const ext of extSources) {
       for (const [key, value] of Object.entries(ext)) {
+        if (typeof value !== "object" || value === null || Array.isArray(value)) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(`[kbach] config.extend.${key} must be a plain object, got ${typeof value}. Skipping.`);
+          }
+          continue;
+        }
         if (value !== null && typeof value === "object" && !Array.isArray(value)) {
           theme[key] = deepMerge(
             theme[key] ?? {},
             value
           );
-        } else if (value !== void 0) {
-          theme[key] = value;
         }
       }
     }
@@ -2760,8 +2843,10 @@ function buildConfig(userConfig) {
     theme,
     plugins: userConfig.plugins ?? []
   };
-  clearPluginUtilities();
-  clearPluginModifiers();
+  if (userConfig.plugins !== void 0) {
+    clearPluginUtilities();
+    clearPluginModifiers();
+  }
   const _store = getConfigStore();
   for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
@@ -2779,7 +2864,7 @@ function _selectorToModifierDef(selector) {
   if (s.startsWith("@media ")) {
     return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
   }
-  if (s.startsWith("::") || s.startsWith(":")) {
+  if (s.startsWith("::") || s.startsWith(":") && !s.includes(" ") && !s.includes("&") && !s.includes("(")) {
     return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
   }
   return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
@@ -2792,8 +2877,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
-      customVariants[name] = selector;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? null;
+      if (selector !== null && selector !== name) customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -2975,7 +3060,7 @@ ${css}
 ${KBACH_END}`;
   const start = existing.indexOf(KBACH_START);
   const end = existing.indexOf(KBACH_END);
-  const next = start !== -1 && end !== -1 ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
+  const next = start !== -1 && end !== -1 && end > start ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
 
 ${block}` : block;
   if (next === existing) return false;
@@ -3032,7 +3117,7 @@ function extractClassStrings(code) {
   }
   const templateRe = /`([^`]{1,2000})`/g;
   while ((m = templateRe.exec(code)) !== null) {
-    const staticParts = m[1].replace(/\$\{[^}]*\}/g, " ");
+    const staticParts = m[1].replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " ");
     pushTokens(staticParts, found);
   }
   return [...found];
@@ -3064,7 +3149,11 @@ function scanDir(dir, onFile) {
     }
   }
 }
-function kbach(userConfig) {
+var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components", "views", "layouts"];
+function kbach(userConfigOrOptions) {
+  const isOptions = userConfigOrOptions != null && ("framework" in userConfigOrOptions || "include" in userConfigOrOptions);
+  const userConfig = isOptions ? userConfigOrOptions.framework : userConfigOrOptions;
+  const includeDirs = (isOptions ? userConfigOrOptions.include : void 0) ?? DEFAULT_SCAN_DIRS;
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const screenKeys = Object.keys(cfg.theme.screens ?? {});
@@ -3096,7 +3185,7 @@ function kbach(userConfig) {
     return view;
   }
   function initialScan() {
-    for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
+    for (const dir of includeDirs) {
       scanDir((0, import_path.join)(root, dir), processFile);
     }
   }
@@ -3113,7 +3202,7 @@ function kbach(userConfig) {
     // so styles come solely from the static stylesheet — no duplicate injection.
     transform(code, id) {
       if (!/\.(tsx?|jsx?|mjs?)$/.test(id)) return;
-      if (!/['"].*kbach\.css['"]/i.test(code)) return;
+      if (!/\bimport\b[^;]*['"].*kbach\.css['"]/i.test(code)) return;
       return {
         code: `import { disableRuntimeCSS } from '@kbach/react';
 disableRuntimeCSS();

package/dist/vite-plugin.mjs

@@ -4,7 +4,7 @@ import {
   generateClassCSS,
   setCSSGenMode,
   splitClassTokens
-} from "./chunk-JBV2R655.mjs";
+} from "./chunk-2HWRNTJG.mjs";
 
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
@@ -152,7 +152,7 @@ ${css}
 ${KBACH_END}`;
   const start = existing.indexOf(KBACH_START);
   const end = existing.indexOf(KBACH_END);
-  const next = start !== -1 && end !== -1 ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
+  const next = start !== -1 && end !== -1 && end > start ? existing.slice(0, start) + block + existing.slice(end + KBACH_END.length) : existing ? `${existing}
 
 ${block}` : block;
   if (next === existing) return false;
@@ -209,7 +209,7 @@ function extractClassStrings(code) {
   }
   const templateRe = /`([^`]{1,2000})`/g;
   while ((m = templateRe.exec(code)) !== null) {
-    const staticParts = m[1].replace(/\$\{[^}]*\}/g, " ");
+    const staticParts = m[1].replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " ");
     pushTokens(staticParts, found);
   }
   return [...found];
@@ -241,7 +241,11 @@ function scanDir(dir, onFile) {
     }
   }
 }
-function kbach(userConfig) {
+var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components", "views", "layouts"];
+function kbach(userConfigOrOptions) {
+  const isOptions = userConfigOrOptions != null && ("framework" in userConfigOrOptions || "include" in userConfigOrOptions);
+  const userConfig = isOptions ? userConfigOrOptions.framework : userConfigOrOptions;
+  const includeDirs = (isOptions ? userConfigOrOptions.include : void 0) ?? DEFAULT_SCAN_DIRS;
   const cfg = buildConfig(userConfig ?? {});
   const screens = toNumericScreens(cfg.theme.screens ?? {});
   const screenKeys = Object.keys(cfg.theme.screens ?? {});
@@ -273,7 +277,7 @@ function kbach(userConfig) {
     return view;
   }
   function initialScan() {
-    for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
+    for (const dir of includeDirs) {
       scanDir(join(root, dir), processFile);
     }
   }
@@ -290,7 +294,7 @@ function kbach(userConfig) {
     // so styles come solely from the static stylesheet — no duplicate injection.
     transform(code, id) {
       if (!/\.(tsx?|jsx?|mjs?)$/.test(id)) return;
-      if (!/['"].*kbach\.css['"]/i.test(code)) return;
+      if (!/\bimport\b[^;]*['"].*kbach\.css['"]/i.test(code)) return;
       return {
         code: `import { disableRuntimeCSS } from '@kbach/react';
 disableRuntimeCSS();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.5.56",
+  "version": "0.5.58",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",