@kbach/react 1.0.0-beta.27 → 1.0.0-beta.29

package/dist/vite-plugin.js

@@ -23,6 +23,7 @@ __export(vite_plugin_exports, {
   CSS_SYNC_DEBOUNCE_MS: () => CSS_SYNC_DEBOUNCE_MS,
   DEFAULT_SCAN_DIRS: () => DEFAULT_SCAN_DIRS,
   findMainCSSFile: () => findMainCSSFile,
+  isConfigFile: () => isConfigFile,
   kbach: () => kbach,
   loadConfigFile: () => loadConfigFile,
   resolveEffectiveTheme: () => resolveEffectiveTheme
@@ -269,6 +270,59 @@ function buildResetCSS(usedTags) {
   return RESET_RULES.filter((r) => !r.tags || r.tags.some((t) => usedTags.has(t))).map((r) => r.css).join("\n");
 }
 
+// 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];
+}
+function wrapDarkDecls(strategy, decls) {
+  switch (strategy) {
+    case "class":
+      return `.dark { ${decls} }`;
+    case "media":
+      return `@media (prefers-color-scheme: dark) { :root { ${decls} } }`;
+    case "attribute":
+    default:
+      return `[data-theme="dark"] { ${decls} }`;
+  }
+}
+function modeAwareDecls(theme) {
+  const light = [];
+  const dark = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (typeof value === "string") continue;
+    const l = parseHexRgb(value.light);
+    const d = parseHexRgb(value.dark);
+    if (!l || !d) continue;
+    light.push(`--kb-color-${name}: ${l.join(",")};`);
+    dark.push(`--kb-color-${name}: ${d.join(",")};`);
+  }
+  return { light, dark };
+}
+function colorVariablesCss(theme) {
+  const { light, dark } = modeAwareDecls(theme);
+  if (light.length === 0) return "";
+  return `:root { ${light.join(" ")} }
+${wrapDarkDecls(theme.darkMode, dark.join(" "))}`;
+}
+function withColorVariables(theme) {
+  let changed = false;
+  const colors = {};
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (typeof value !== "string" && parseHexRgb(value.light) && parseHexRgb(value.dark)) {
+      colors[name] = `rgb(var(--kb-color-${name}))`;
+      changed = true;
+    } else {
+      colors[name] = value;
+    }
+  }
+  return changed ? { ...theme, colors } : theme;
+}
+
 // src/vite-plugin/format.ts
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
@@ -288,6 +342,8 @@ function formatKbachCSS(tokenRules, theme, usedTags) {
   lines.push("", ":root {", `  --kb-dark-mode: ${theme.darkMode};`);
   for (const [varName, val] of declarations) lines.push(`  ${varName}: ${val};`);
   lines.push("}");
+  const colorVars = colorVariablesCss(theme);
+  if (colorVars) lines.push("", prettifyCSS(colorVars));
   lines.push("", prettifyCSS(text));
   return lines.join("\n");
 }
@@ -694,16 +750,6 @@ function detectDarkModeStrategyFromDom() {
   setTheme({ ...activeTheme, darkMode: raw });
 }
 
-// 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/darkModeStore.ts
 var STORAGE_KEY = "kbach-theme";
 var listeners = /* @__PURE__ */ new Set();
@@ -768,7 +814,13 @@ function applyOpacityToHex(hex, opacityText) {
   return `rgba(${rgb.join(",")},${clamped})`;
 }
 function resolveColorEntry(value, lookup) {
-  if (typeof value !== "string") return value;
+  if (typeof value !== "string") {
+    const side = (v, mode2) => {
+      const r = resolveColorEntry(v, lookup);
+      return typeof r === "string" ? r : r[mode2];
+    };
+    return { light: side(value.light, "light"), dark: side(value.dark, "dark") };
+  }
   const slash = value.indexOf("/");
   const name = slash === -1 ? value : value.slice(0, slash);
   const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
@@ -835,6 +887,9 @@ var import_node = require("@kbach/core-engine/node");
 function generateCssForToken(token, themeJson) {
   return JSON.parse((0, import_node.generate_css)(token, themeJson));
 }
+function suggestClassForToken(token, themeJson) {
+  return (0, import_node.suggest_class)(token, themeJson) || null;
+}
 
 // src/vite-plugin/scan.ts
 var import_fs = require("fs");
@@ -1094,17 +1149,18 @@ function isMarkerClass(base) {
   if (slashIdx === -1) return false;
   return MARKER_CLASSES.has(base.slice(0, slashIdx)) && slashIdx < base.length - 1;
 }
-function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens) {
+var TAILWIND_SHADE = /-(?:50|[1-9]00|950)(?:\/|$)/;
+function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens, suggest) {
   if (isResolvable || warnedTokens.has(token)) return;
   const base = stripModifierPrefix(token);
   if (!base || projectCssClasses.has(base) || isMarkerClass(base)) return;
   warnedTokens.add(token);
   const pos = findLineCol(code, token);
   const location = pos ? `${blue(filePath)}${green(`:${pos.line}:${pos.column}`)}` : blue(filePath);
-  console.warn(
-    `${kbachTag()} ${gray("Unknown class")} ${highlight(token)} ${gray("\u2014 no Kbach utility or project CSS rule matches it. Typo?")}
-  ${bold("at")} ${location}`
-  );
+  const suggestion = suggest?.(token) ?? null;
+  const hint = suggestion ? `${gray("\u2014 did you mean")} ${highlight(suggestion)}${gray("?")}${TAILWIND_SHADE.test(token) ? gray(" Kbach color shades run 1\u201312, not 50\u2013950.") : ""}` : gray("\u2014 no Kbach utility or project CSS rule matches it. Typo?");
+  console.warn(`${kbachTag()} ${gray("Unknown class")} ${highlight(token)} ${hint}
+  ${bold("at")} ${location}`);
 }
 
 // src/staticCss/engine.ts
@@ -1114,7 +1170,8 @@ function normPath(p) {
 }
 var SAFELIST_KEY = "\0kbach-safelist";
 function createKbachStaticCssEngine(options) {
-  const { root, theme, themeJson, includeDirs, safelist } = options;
+  const { root, theme, includeDirs, safelist } = options;
+  const themeJson = JSON.stringify(withColorVariables(theme));
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenRules = /* @__PURE__ */ new Map();
   const fileTags = /* @__PURE__ */ new Map();
@@ -1132,7 +1189,7 @@ function createKbachStaticCssEngine(options) {
       tokens.add(tok);
       const rules = resolveToken(tok);
       if (process.env.NODE_ENV !== "production") {
-        warnIfUnknownClass(tok, filePath, code, rules.length > 0, projectCssClasses, warnedTokens);
+        warnIfUnknownClass(tok, filePath, code, rules.length > 0, projectCssClasses, warnedTokens, (t) => suggestClassForToken(t, themeJson));
       }
     }
     fileTokens.set(normPath(filePath), tokens);
@@ -1217,13 +1274,27 @@ function isEsmRequireFailure(err) {
   return err.code === "ERR_REQUIRE_ESM" || /is not defined in ES module scope/.test(err.message);
 }
 async function importConfigModule(path) {
-  const mod = await import((0, import_url.pathToFileURL)(path).href);
+  const url = (0, import_url.pathToFileURL)(path).href;
+  let mod;
+  try {
+    mod = await nativeImport(url + "?t=" + Date.now());
+  } catch (err) {
+    if (err.code !== "ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING") throw err;
+    mod = await import(url);
+  }
   return mod.default ?? mod;
 }
+var nativeImport = new Function("url", "return import(url)");
 function requireConfigModule(root, path) {
-  const mod = (0, import_module.createRequire)(root)(path);
+  const req = (0, import_module.createRequire)(root);
+  delete req.cache[req.resolve(path)];
+  const mod = req(path);
   return mod.default ?? mod;
 }
+function isConfigFile(root, file) {
+  const norm = (p) => p.replace(/\\/g, "/").toLowerCase();
+  return /^kbach\.config\.(c|m)?js$/.test((0, import_path4.basename)(file)) && norm((0, import_path4.dirname)(file)) === norm(root);
+}
 async function loadConfigFile(root) {
   const cjsPath = (0, import_path4.join)(root, "kbach.config.cjs");
   if ((0, import_fs3.existsSync)(cjsPath)) return requireConfigModule(root, cjsPath);
@@ -1231,6 +1302,7 @@ async function loadConfigFile(root) {
   if ((0, import_fs3.existsSync)(mjsPath)) return importConfigModule(mjsPath);
   const jsPath = (0, import_path4.join)(root, "kbach.config.js");
   if (!(0, import_fs3.existsSync)(jsPath)) return void 0;
+  if (isEsmProject(root)) return importConfigModule(jsPath);
   try {
     return requireConfigModule(root, jsPath);
   } catch (err) {
@@ -1238,6 +1310,13 @@ async function loadConfigFile(root) {
     return importConfigModule(jsPath);
   }
 }
+function isEsmProject(root) {
+  try {
+    return JSON.parse((0, import_fs3.readFileSync)((0, import_path4.join)(root, "package.json"), "utf-8")).type === "module";
+  } catch {
+    return false;
+  }
+}
 async function resolveEffectiveTheme(root, options) {
   if (options.theme) return options.theme;
   if (options.config) return resolveKbachConfig(options.config);
@@ -1249,7 +1328,7 @@ function kbach(options = {}) {
   const safelist = options.safelist ?? [];
   let root = process.cwd();
   let theme = defaultTheme;
-  let engine = createKbachStaticCssEngine({ root, theme, themeJson: JSON.stringify(theme), includeDirs, safelist });
+  let engine = createKbachStaticCssEngine({ root, theme, includeDirs, safelist });
   let mainCSSFilePath = (0, import_path4.join)(root, "src", "kbach.css");
   function mainCSSFile() {
     return mainCSSFilePath;
@@ -1266,13 +1345,27 @@ function kbach(options = {}) {
       syncMainCSSFile(server);
     }, CSS_SYNC_DEBOUNCE_MS);
   }
+  async function reloadConfig(server) {
+    if (options.theme || options.config) return;
+    try {
+      theme = await resolveEffectiveTheme(root, options);
+    } catch (err) {
+      console.warn(`${kbachTag()} Couldn't reload kbach.config: ${err.message}`);
+      return;
+    }
+    engine = createKbachStaticCssEngine({ root, theme, includeDirs, safelist });
+    engine.scanProjectCssSelectorsOnce();
+    engine.initialScan();
+    engine.processSafelist();
+    syncMainCSSFile(server);
+  }
   return {
     name: "kbach",
     enforce: "pre",
     async configResolved(resolved) {
       root = resolved.root;
       theme = await resolveEffectiveTheme(root, options);
-      engine = createKbachStaticCssEngine({ root, theme, themeJson: JSON.stringify(theme), includeDirs, safelist });
+      engine = createKbachStaticCssEngine({ root, theme, includeDirs, safelist });
       mainCSSFilePath = findMainCSSFile(root, includeDirs, options.cssFile);
     },
     buildStart() {
@@ -1287,6 +1380,10 @@ function kbach(options = {}) {
     configureServer(server) {
       const onAddOrUnlink = (file, isUnlink) => {
         if (file.includes("node_modules")) return;
+        if (isConfigFile(root, file)) {
+          void reloadConfig(server);
+          return;
+        }
         if (!/\.(tsx?|jsx?)$/.test(file)) return;
         if (isUnlink) {
           engine.removeFile(file);
@@ -1302,8 +1399,12 @@ function kbach(options = {}) {
       server.watcher.on("add", (file) => onAddOrUnlink(file, false));
       server.watcher.on("unlink", (file) => onAddOrUnlink(file, true));
     },
-    handleHotUpdate({ file, server }) {
+    async handleHotUpdate({ file, server }) {
       if (file.includes("node_modules")) return;
+      if (isConfigFile(root, file)) {
+        await reloadConfig(server);
+        return;
+      }
       if (!/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         engine.processFile(file, readSourceFile(file));
@@ -1319,6 +1420,7 @@ function kbach(options = {}) {
   CSS_SYNC_DEBOUNCE_MS,
   DEFAULT_SCAN_DIRS,
   findMainCSSFile,
+  isConfigFile,
   kbach,
   loadConfigFile,
   resolveEffectiveTheme

package/dist/vite-plugin.mjs

@@ -2,16 +2,18 @@ import {
   CSS_SYNC_DEBOUNCE_MS,
   DEFAULT_SCAN_DIRS,
   findMainCSSFile,
+  isConfigFile,
   kbach,
   loadConfigFile,
   resolveEffectiveTheme
-} from "./chunk-KTRJZDVE.mjs";
-import "./chunk-43FOLRQA.mjs";
-import "./chunk-OVKVZA7B.mjs";
+} from "./chunk-NHWKWY2T.mjs";
+import "./chunk-UK5S55DF.mjs";
+import "./chunk-FBYS4BI3.mjs";
 export {
   CSS_SYNC_DEBOUNCE_MS,
   DEFAULT_SCAN_DIRS,
   findMainCSSFile,
+  isConfigFile,
   kbach,
   loadConfigFile,
   resolveEffectiveTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "1.0.0-beta.27",
+  "version": "1.0.0-beta.29",
   "description": "A utility-first styling engine for React, powered by a Rust/WASM core: Tailwind CSS-compatible utility class names with Kbach's own color palette.",
   "keywords": [
     "css",
@@ -74,7 +74,7 @@
     "generate:colors": "node ../core-engine/scripts/generate-palette.mjs src/generatedPalette.ts"
   },
   "dependencies": {
-    "@kbach/core-engine": "1.0.0-beta.16"
+    "@kbach/core-engine": "1.0.0-beta.18"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",