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

package/dist/postcss-plugin.js

@@ -0,0 +1,1152 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/postcss-plugin/index.ts
+var postcss_plugin_exports = {};
+__export(postcss_plugin_exports, {
+  default: () => kbachPostcss
+});
+module.exports = __toCommonJS(postcss_plugin_exports);
+var import_postcss = __toESM(require("postcss"));
+var import_path5 = require("path");
+
+// src/staticCss/engine.ts
+var import_path3 = require("path");
+
+// src/vite-plugin/wasmNode.ts
+var import_node = require("@kbach/core-engine/node");
+function generateCssForToken(token, themeJson) {
+  return JSON.parse((0, import_node.generate_css)(token, themeJson));
+}
+
+// src/vite-plugin/scan.ts
+var import_fs = require("fs");
+var import_path = require("path");
+function stripComments(code) {
+  let out = "";
+  let i = 0;
+  const n = code.length;
+  while (i < n) {
+    const two = code[i] + (code[i + 1] ?? "");
+    if (two === "//") {
+      i += 2;
+      while (i < n && code[i] !== "\n") i++;
+      continue;
+    }
+    if (two === "/*") {
+      i += 2;
+      while (i < n && code[i] + (code[i + 1] ?? "") !== "*/") i++;
+      i += 2;
+      continue;
+    }
+    const ch = code[i];
+    if (ch === '"' || ch === "'") {
+      out += ch;
+      i++;
+      while (i < n && code[i] !== ch) {
+        if (code[i] === "\\") {
+          out += code[i] + (code[i + 1] ?? "");
+          i += 2;
+          continue;
+        }
+        out += code[i];
+        i++;
+      }
+      out += code[i] ?? "";
+      i++;
+      continue;
+    }
+    if (ch === "`") {
+      out += ch;
+      i++;
+      let interpolationDepth = 0;
+      while (i < n) {
+        if (interpolationDepth === 0 && code[i] === "`") {
+          out += code[i];
+          i++;
+          break;
+        }
+        if (interpolationDepth === 0 && code[i] === "\\") {
+          out += code[i] + (code[i + 1] ?? "");
+          i += 2;
+          continue;
+        }
+        if (interpolationDepth === 0 && code[i] + (code[i + 1] ?? "") === "${") {
+          out += "${";
+          i += 2;
+          interpolationDepth = 1;
+          continue;
+        }
+        if (interpolationDepth > 0) {
+          if (code[i] === "{") interpolationDepth++;
+          else if (code[i] === "}") {
+            interpolationDepth--;
+            if (interpolationDepth === 0) {
+              out += "}";
+              i++;
+              continue;
+            }
+          }
+        }
+        out += code[i];
+        i++;
+      }
+      continue;
+    }
+    out += ch;
+    i++;
+  }
+  return out;
+}
+function splitClassTokens(str) {
+  return str.split(/\s+/).filter(Boolean);
+}
+var NOT_A_CLASS_NAME_RE = /[${}]|-$|^[?:&|!"'=<>]+$/;
+function pushTokens(str, into) {
+  for (const tok of splitClassTokens(str)) {
+    if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
+  }
+}
+function pushTemplateLiteralBody(body, into) {
+  const interpolationRe = /\$\{(?:[^{}]|\{[^{}]*\})*\}/g;
+  let im;
+  while ((im = interpolationRe.exec(body)) !== null) {
+    pushClassLikeStrings(im[0], into);
+  }
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, () => "$"), into);
+}
+function pushClassLikeStrings(text, into) {
+  const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
+  let qm;
+  while ((qm = quotedStringRe.exec(text)) !== null) {
+    const [, quote, content] = qm;
+    if (quote === "`") pushTemplateLiteralBody(content, into);
+    else pushTokens(content, into);
+  }
+}
+var JSX_TAG_RE = /<([a-z][a-zA-Z0-9]*)[\s/>]/g;
+function scanUsedTags(code) {
+  const cleaned = stripComments(code);
+  const tags = /* @__PURE__ */ new Set();
+  let m;
+  JSX_TAG_RE.lastIndex = 0;
+  while ((m = JSX_TAG_RE.exec(cleaned)) !== null) tags.add(m[1]);
+  return tags;
+}
+function extractClassStrings(rawCode) {
+  const code = stripComments(rawCode);
+  const found = /* @__PURE__ */ new Set();
+  const simpleRe = /(?:className|kb)=(["'])((?:(?!\1).)*)\1/g;
+  let m;
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[2], found);
+  const jsxExprRe = /(?:className|kb)=\{/g;
+  while ((m = jsxExprRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "{") depth++;
+      else if (ch === "}") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    jsxExprRe.lastIndex = i + 1;
+    pushClassLikeStrings(block, found);
+  }
+  const classComposerCallRe = /(?:clsx|cn|classnames|cx|kb)\(/g;
+  while ((m = classComposerCallRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "(") depth++;
+      else if (ch === ")") {
+        if (--depth === 0) break;
+      }
+      block += ch;
+      i++;
+    }
+    classComposerCallRe.lastIndex = i + 1;
+    pushClassLikeStrings(block, found);
+  }
+  const templateRe = /`([^`]{1,2000})`/g;
+  while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
+  return [...found];
+}
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", "dist", "build", "out", ".next", ".output", ".git", ".svn", ".cache", "coverage"]);
+var MAX_SCAN_DEPTH = 10;
+var DEFAULT_FILE_MATCH = /\.(tsx?|jsx?)$/;
+function scanDir(dir, onFile, depth = 0, fileMatch = DEFAULT_FILE_MATCH) {
+  if (depth > MAX_SCAN_DEPTH) return;
+  let entries;
+  try {
+    entries = (0, import_fs.readdirSync)(dir);
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || SKIP_DIRS.has(entry)) continue;
+    const full = (0, import_path.join)(dir, entry);
+    try {
+      const st = (0, import_fs.statSync)(full);
+      if (st.isDirectory()) scanDir(full, onFile, depth + 1, fileMatch);
+      else if (fileMatch.test(entry)) onFile(full, (0, import_fs.readFileSync)(full, "utf-8"));
+    } catch {
+    }
+  }
+}
+
+// src/vite-plugin/cssVars.ts
+function hexToRgbTriplet(hex) {
+  const h = hex.replace("#", "");
+  const expand = (s) => s.length === 3 ? s.split("").map((c) => c + c).join("") : s;
+  const full = expand(h);
+  if (full.length !== 6) return null;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+  return `${r},${g},${b}`;
+}
+function buildColorVarMap(theme, cssText) {
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (typeof value !== "string") continue;
+    const varName = `--color-${name}`;
+    if (cssText.includes(value)) {
+      replacements.set(value, `var(${varName})`);
+      declarations.set(varName, value);
+    }
+    const triplet = hexToRgbTriplet(value);
+    if (!triplet) continue;
+    const rgbaPrefix = `rgba(${triplet},`;
+    if (cssText.includes(rgbaPrefix)) {
+      const rgbVarName = `--color-${name}-rgb`;
+      replacements.set(rgbaPrefix, `rgba(var(${rgbVarName}),`);
+      declarations.set(rgbVarName, triplet);
+    }
+  }
+  return { replacements, declarations };
+}
+var SPACING_PROPS = /* @__PURE__ */ new Set([
+  "padding",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "gap",
+  "column-gap",
+  "row-gap",
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "top",
+  "right",
+  "bottom",
+  "left"
+]);
+function buildSpacingVarMap(theme, cssText) {
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
+  const pxToKey = /* @__PURE__ */ new Map();
+  for (const [key, val] of Object.entries(theme.spacing)) {
+    if (!pxToKey.has(val)) pxToKey.set(val, key);
+  }
+  const varNameFor = (key) => `--spacing-${key.replace(/\./g, "_")}`;
+  const declRe = /([a-z-]+): (\d+(?:\.\d+)?)px/g;
+  let m;
+  while ((m = declRe.exec(cssText)) !== null) {
+    const [, prop, numStr] = m;
+    if (!SPACING_PROPS.has(prop)) continue;
+    const key = pxToKey.get(parseFloat(numStr));
+    if (key === void 0) continue;
+    const varName = varNameFor(key);
+    replacements.set(`${prop}: ${numStr}px`, `${prop}: var(${varName})`);
+    declarations.set(varName, `${numStr}px`);
+  }
+  return { replacements, declarations };
+}
+function applyVarMap(cssText, ...maps) {
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
+  for (const map of maps) {
+    for (const [k, v] of map.replacements) replacements.set(k, v);
+    for (const [k, v] of map.declarations) declarations.set(k, v);
+  }
+  const sorted = [...replacements].sort(([a], [b]) => b.length - a.length);
+  const escapeRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const patterns = sorted.map(([pattern, replacement]) => [new RegExp(escapeRegex(pattern), "g"), replacement]);
+  const text = cssText.replace(/\{([^{}]*)\}/g, (_whole, inner) => {
+    let replaced = inner;
+    for (const [re, replacement] of patterns) {
+      replaced = replaced.replace(re, () => replacement);
+    }
+    return `{${replaced}}`;
+  });
+  return { text, declarations };
+}
+
+// src/vite-plugin/mediaMerge.ts
+var RESPONSIVE_MEDIA_RE = /^@media \(min-width: (\d+)px\) \{ (.+) \}$/;
+function mergeResponsiveMediaBlocks(rules) {
+  const byWidth = /* @__PURE__ */ new Map();
+  const widthOrder = [];
+  const unwrapped = [];
+  for (const rule of rules) {
+    const m = RESPONSIVE_MEDIA_RE.exec(rule);
+    if (!m) {
+      unwrapped.push(rule);
+      continue;
+    }
+    const width = Number(m[1]);
+    if (!byWidth.has(width)) {
+      byWidth.set(width, []);
+      widthOrder.push(width);
+    }
+    byWidth.get(width).push(m[2]);
+  }
+  widthOrder.sort((a, b) => a - b);
+  const merged = widthOrder.map((w) => `@media (min-width: ${w}px) { ${byWidth.get(w).join(" ")} }`);
+  return [...unwrapped, ...merged];
+}
+
+// src/vite-plugin/prettify.ts
+function prettifyCSS(css) {
+  const out = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of css) {
+    if (ch === "{") {
+      const selector = current.trim();
+      if (selector) out.push(`${"  ".repeat(depth)}${selector} {`);
+      depth++;
+      current = "";
+    } else if (ch === "}") {
+      const decl = current.trim();
+      if (decl) out.push(`${"  ".repeat(depth)}${decl};`);
+      depth = Math.max(0, depth - 1);
+      out.push(`${"  ".repeat(depth)}}`);
+      current = "";
+    } else if (ch === ";") {
+      const decl = current.trim();
+      if (decl) out.push(`${"  ".repeat(depth)}${decl};`);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  const trailing = current.trim();
+  if (trailing) out.push(trailing);
+  return out.join("\n");
+}
+
+// src/reset.ts
+var RESET_RULES = [
+  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
+  // border-width: 0 keeps all elements borderless by default.
+  { css: "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }" },
+  { css: "body { margin: 0; padding: 0; }" },
+  { css: "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }", tags: ["h1", "h2", "h3", "h4", "h5", "h6"] },
+  { css: "p { margin: 0; }", tags: ["p"] },
+  { css: "a { color: inherit; text-decoration: none; }", tags: ["a"] },
+  { css: "ul, ol { margin: 0; padding: 0; list-style: none; }", tags: ["ul", "ol"] },
+  // svg here only covers a literal <svg> tag in JSX — an icon imported as
+  // a component (e.g. `<ArrowIcon />`) never appears as the text "svg" in
+  // source, so this rule won't be pulled in by that usage alone. Same
+  // caveat applies to every tag-gated rule below: detection is a literal
+  // source-text scan (see vite-plugin/scan.ts's scanUsedTags), not a real
+  // DOM/type check.
+  { css: "img, video, svg { display: block; max-width: 100%; }", tags: ["img", "video", "svg"] },
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  {
+    css: "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+    tags: ["input", "textarea"]
+  },
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch. Wrapped in :where() for the exact
+  // same reason as the input:not(...) exclusions above — a bare
+  // `input[type='range']` attribute selector has specificity (0,1,1),
+  // MORE than any single utility class (0,1,0), so an `accent-*` utility
+  // (Phase 23) applied directly to a checkbox/radio/range would resolve and
+  // inject correctly but silently never paint, losing the cascade to this
+  // reset regardless of source order — confirmed by hand via
+  // getComputedStyle on a real `accent-red-6` range input, which reported
+  // `currentColor`'s inherited value instead. `:where()` zeroes this
+  // selector's specificity contribution entirely, so any `accent-*`
+  // utility trivially wins once applied.
+  {
+    css: ":where(input[type='checkbox'], input[type='radio'], input[type='range']) { margin: 0; font: inherit; accent-color: currentColor; }",
+    tags: ["input"]
+  },
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  { css: "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }", tags: ["select"] },
+  { css: "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }", tags: ["button"] },
+  // Also covers any element opted into the button role (`role="button"` on
+  // a <div>/<span>) — but only when a literal <button> tag is ALSO
+  // somewhere in the scanned source, since detection here is purely
+  // tag-name-based; a project using role="button" exclusively, with no
+  // real <button> anywhere, won't pull this rule in. Acceptable tradeoff
+  // for this project's scope (rare pattern) — cheap enough that scanning
+  // for it separately isn't worth the added complexity.
+  { css: "button, [role='button'] { cursor: pointer; }", tags: ["button"] },
+  { css: ":disabled { cursor: default; }", tags: ["button", "input", "select", "textarea"] },
+  { css: "textarea { resize: vertical; }", tags: ["textarea"] },
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  { css: "::placeholder { opacity: 1; }", tags: ["input", "textarea"] },
+  { css: "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }", tags: ["input"] },
+  { css: "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }", tags: ["input"] },
+  { css: "fieldset { padding: 0; margin: 0; }", tags: ["fieldset"] },
+  { css: "table { border-collapse: collapse; border-spacing: 0; }", tags: ["table"] }
+];
+var BASE_RESET = RESET_RULES.map((r) => r.css).join("\n");
+function buildResetCSS(usedTags) {
+  if (!usedTags) return BASE_RESET;
+  return RESET_RULES.filter((r) => !r.tags || r.tags.some((t) => usedTags.has(t))).map((r) => r.css).join("\n");
+}
+
+// src/vite-plugin/format.ts
+function formatKbachCSS(tokenRules, theme, usedTags) {
+  const allEntries = [];
+  for (const rules of tokenRules.values()) {
+    for (const entry of rules) allEntries.push(entry);
+  }
+  allEntries.sort((a, b) => a.order - b.order);
+  const allRules = allEntries.map((e) => e.rule);
+  const merged = mergeResponsiveMediaBlocks(allRules);
+  const compact = merged.join("\n");
+  const colorMap = buildColorVarMap(theme, compact);
+  const spacingMap = buildSpacingVarMap(theme, compact);
+  const { text, declarations } = applyVarMap(compact, colorMap, spacingMap);
+  const lines = ["/* Generated by Kbach \u2014 do not edit */", "", buildResetCSS(usedTags)];
+  if (declarations.size > 0) {
+    lines.push("", ":root {");
+    for (const [varName, val] of declarations) lines.push(`  ${varName}: ${val};`);
+    lines.push("}");
+  }
+  lines.push("", prettifyCSS(text));
+  return lines.join("\n");
+}
+
+// src/vite-plugin/unknownClassWarnings.ts
+var import_path2 = require("path");
+var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
+var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
+var useColor = !!process.stdout?.isTTY && !process.env.NO_COLOR;
+var paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
+var green = (s) => paint("32", s);
+var blue = (s) => paint("34", s);
+var white = (s) => paint("97", s);
+var gray = (s) => paint("90", s);
+var bold = (s) => paint("1", s);
+var ARROW = () => green("\u2192");
+var TAG = () => bold(green("[kbach]"));
+var highlight = (s) => bold(white(s));
+function findLineCol(code, needle) {
+  const index = code.indexOf(needle);
+  if (index === -1) return null;
+  let line = 1;
+  let lastNewline = -1;
+  for (let i = 0; i < index; i++) {
+    if (code.charCodeAt(i) === 10) {
+      line++;
+      lastNewline = i;
+    }
+  }
+  return { line, column: index - lastNewline };
+}
+function scanCssFileInto(code, into) {
+  const re = new RegExp(CSS_CLASS_SELECTOR_RE.source, "g");
+  let m;
+  while ((m = re.exec(code)) !== null) into.add(m[1]);
+}
+function scanProjectCssSelectors(root, includeDirs) {
+  const projectCssClasses = /* @__PURE__ */ new Set();
+  for (const dir of includeDirs) {
+    scanDir((0, import_path2.join)(root, dir), (_filePath, code) => scanCssFileInto(code, projectCssClasses), 0, CSS_FILE_RE);
+  }
+  return projectCssClasses;
+}
+function stripModifierPrefix(token) {
+  return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
+}
+var MARKER_CLASSES = /* @__PURE__ */ new Set(["group", "peer"]);
+function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens) {
+  if (isResolvable || warnedTokens.has(token)) return;
+  const base = stripModifierPrefix(token);
+  if (!base || projectCssClasses.has(base) || MARKER_CLASSES.has(base)) return;
+  warnedTokens.add(token);
+  const pos = findLineCol(code, token);
+  const location = pos ? `${blue(filePath)}${green(`:${pos.line}:${pos.column}`)}` : blue(filePath);
+  console.warn(
+    `${ARROW()} ${TAG()} ${gray("Unknown class")} ${highlight(token)} ${gray("\u2014 no Kbach utility or project CSS rule matches it. Typo?")}
+  ${bold("at")} ${location}`
+  );
+}
+
+// src/staticCss/engine.ts
+function normPath(p) {
+  const fwd = p.replace(/\\/g, "/");
+  return process.platform === "win32" ? fwd.toLowerCase() : fwd;
+}
+var SAFELIST_KEY = "\0kbach-safelist";
+function createKbachStaticCssEngine(options) {
+  const { root, theme, themeJson, includeDirs, safelist } = options;
+  const fileTokens = /* @__PURE__ */ new Map();
+  const tokenRules = /* @__PURE__ */ new Map();
+  const fileTags = /* @__PURE__ */ new Map();
+  let projectCssClasses = /* @__PURE__ */ new Set();
+  const warnedTokens = /* @__PURE__ */ new Set();
+  function resolveToken(tok) {
+    if (!tokenRules.has(tok)) {
+      tokenRules.set(tok, generateCssForToken(tok, themeJson).rules);
+    }
+    return tokenRules.get(tok);
+  }
+  function processFile(filePath, code) {
+    const tokens = /* @__PURE__ */ new Set();
+    for (const tok of extractClassStrings(code)) {
+      tokens.add(tok);
+      const rules = resolveToken(tok);
+      if (process.env.NODE_ENV !== "production") {
+        warnIfUnknownClass(tok, filePath, code, rules.length > 0, projectCssClasses, warnedTokens);
+      }
+    }
+    fileTokens.set(normPath(filePath), tokens);
+    fileTags.set(normPath(filePath), scanUsedTags(code));
+  }
+  function removeFile(filePath) {
+    fileTokens.delete(normPath(filePath));
+    fileTags.delete(normPath(filePath));
+  }
+  function processSafelist() {
+    if (safelist.length === 0) return;
+    const tokens = new Set(safelist);
+    for (const tok of tokens) resolveToken(tok);
+    fileTokens.set(SAFELIST_KEY, tokens);
+  }
+  function activeTokens() {
+    const active = /* @__PURE__ */ new Set();
+    for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+    return active;
+  }
+  function activeTags() {
+    const active = /* @__PURE__ */ new Set();
+    for (const tags of fileTags.values()) for (const t of tags) active.add(t);
+    return active;
+  }
+  function generateCSS() {
+    const active = activeTokens();
+    const view = /* @__PURE__ */ new Map();
+    for (const tok of active) {
+      const rules = tokenRules.get(tok);
+      if (rules) view.set(tok, rules);
+    }
+    for (const tok of tokenRules.keys()) {
+      if (!active.has(tok)) tokenRules.delete(tok);
+    }
+    return formatKbachCSS(view, theme, activeTags());
+  }
+  function initialScan() {
+    for (const dir of includeDirs) {
+      scanDir((0, import_path3.join)(root, dir), processFile);
+    }
+  }
+  function scanProjectCssSelectorsOnce() {
+    projectCssClasses = scanProjectCssSelectors(root, includeDirs);
+  }
+  return { processFile, removeFile, initialScan, processSafelist, generateCSS, scanProjectCssSelectorsOnce };
+}
+
+// src/vite-plugin/index.ts
+var import_fs2 = require("fs");
+var import_path4 = require("path");
+var import_url = require("url");
+var import_module = require("module");
+
+// src/generatedPalette.ts
+var PALETTE = {
+  "amber-1": "#fffbeb",
+  "amber-10": "#78350f",
+  "amber-11": "#451a03",
+  "amber-12": "#291002",
+  "amber-2": "#fef3c7",
+  "amber-3": "#fde68a",
+  "amber-4": "#fcd34d",
+  "amber-5": "#fbbf24",
+  "amber-6": "#f59e0b",
+  "amber-7": "#d97706",
+  "amber-8": "#b45309",
+  "amber-9": "#92400e",
+  "black": "#000000",
+  "blue-1": "#eff6ff",
+  "blue-10": "#1e3a8a",
+  "blue-11": "#172554",
+  "blue-12": "#0d1633",
+  "blue-2": "#dbeafe",
+  "blue-3": "#bfdbfe",
+  "blue-4": "#93c5fd",
+  "blue-5": "#60a5fa",
+  "blue-6": "#3b82f6",
+  "blue-7": "#2563eb",
+  "blue-8": "#1d4ed8",
+  "blue-9": "#1e40af",
+  "bronze": "#cd7f32",
+  "coal": "#1c1c1c",
+  "copper": "#b87333",
+  "current": "currentColor",
+  "cyan-1": "#ecfeff",
+  "cyan-10": "#164e63",
+  "cyan-11": "#083344",
+  "cyan-12": "#041e28",
+  "cyan-2": "#cffafe",
+  "cyan-3": "#a5f3fc",
+  "cyan-4": "#67e8f9",
+  "cyan-5": "#22d3ee",
+  "cyan-6": "#06b6d4",
+  "cyan-7": "#0891b2",
+  "cyan-8": "#0e7490",
+  "cyan-9": "#155e75",
+  "emerald-1": "#ecfdf5",
+  "emerald-10": "#064e3b",
+  "emerald-11": "#022c22",
+  "emerald-12": "#011a14",
+  "emerald-2": "#d1fae5",
+  "emerald-3": "#a7f3d0",
+  "emerald-4": "#6ee7b7",
+  "emerald-5": "#34d399",
+  "emerald-6": "#10b981",
+  "emerald-7": "#059669",
+  "emerald-8": "#047857",
+  "emerald-9": "#065f46",
+  "fuchsia-1": "#fdf4ff",
+  "fuchsia-10": "#701a75",
+  "fuchsia-11": "#4a044e",
+  "fuchsia-12": "#2d022f",
+  "fuchsia-2": "#fae8ff",
+  "fuchsia-3": "#f5d0fe",
+  "fuchsia-4": "#f0abfc",
+  "fuchsia-5": "#e879f9",
+  "fuchsia-6": "#d946ef",
+  "fuchsia-7": "#c026d3",
+  "fuchsia-8": "#a21caf",
+  "fuchsia-9": "#86198f",
+  "gold": "#d4af37",
+  "gray-1": "#f9fafb",
+  "gray-10": "#111827",
+  "gray-11": "#030712",
+  "gray-12": "#020409",
+  "gray-2": "#f3f4f6",
+  "gray-3": "#e5e7eb",
+  "gray-4": "#d1d5db",
+  "gray-5": "#9ca3af",
+  "gray-6": "#6b7280",
+  "gray-7": "#4b5563",
+  "gray-8": "#374151",
+  "gray-9": "#1f2937",
+  "green-1": "#f0fdf4",
+  "green-10": "#14532d",
+  "green-11": "#052e16",
+  "green-12": "#031b0d",
+  "green-2": "#dcfce7",
+  "green-3": "#bbf7d0",
+  "green-4": "#86efac",
+  "green-5": "#4ade80",
+  "green-6": "#22c55e",
+  "green-7": "#16a34a",
+  "green-8": "#15803d",
+  "green-9": "#166534",
+  "indigo-1": "#eef2ff",
+  "indigo-10": "#312e81",
+  "indigo-11": "#1e1b4b",
+  "indigo-12": "#12102d",
+  "indigo-2": "#e0e7ff",
+  "indigo-3": "#c7d2fe",
+  "indigo-4": "#a5b4fc",
+  "indigo-5": "#818cf8",
+  "indigo-6": "#6366f1",
+  "indigo-7": "#4f46e5",
+  "indigo-8": "#4338ca",
+  "indigo-9": "#3730a3",
+  "lime-1": "#f7fee7",
+  "lime-10": "#365314",
+  "lime-11": "#1a2e05",
+  "lime-12": "#0f1b03",
+  "lime-2": "#ecfccb",
+  "lime-3": "#d9f99d",
+  "lime-4": "#bef264",
+  "lime-5": "#a3e635",
+  "lime-6": "#84cc16",
+  "lime-7": "#65a30d",
+  "lime-8": "#4d7c0f",
+  "lime-9": "#3f6212",
+  "neutral-1": "#fafafa",
+  "neutral-10": "#171717",
+  "neutral-11": "#0a0a0a",
+  "neutral-12": "#050505",
+  "neutral-2": "#f5f5f5",
+  "neutral-3": "#e5e5e5",
+  "neutral-4": "#d4d4d4",
+  "neutral-5": "#a3a3a3",
+  "neutral-6": "#737373",
+  "neutral-7": "#525252",
+  "neutral-8": "#404040",
+  "neutral-9": "#262626",
+  "orange-1": "#fff7ed",
+  "orange-10": "#7c2d12",
+  "orange-11": "#431407",
+  "orange-12": "#270c04",
+  "orange-2": "#ffedd5",
+  "orange-3": "#fed7aa",
+  "orange-4": "#fdba74",
+  "orange-5": "#fb923c",
+  "orange-6": "#f97316",
+  "orange-7": "#ea580c",
+  "orange-8": "#c2410c",
+  "orange-9": "#9a3412",
+  "pink-1": "#fdf2f8",
+  "pink-10": "#831843",
+  "pink-11": "#500724",
+  "pink-12": "#300415",
+  "pink-2": "#fce7f3",
+  "pink-3": "#fbcfe8",
+  "pink-4": "#f9a8d4",
+  "pink-5": "#f472b6",
+  "pink-6": "#ec4899",
+  "pink-7": "#db2777",
+  "pink-8": "#be185d",
+  "pink-9": "#9d174d",
+  "purple-1": "#faf5ff",
+  "purple-10": "#581c87",
+  "purple-11": "#3b0764",
+  "purple-12": "#23043c",
+  "purple-2": "#f3e8ff",
+  "purple-3": "#e9d5ff",
+  "purple-4": "#d8b4fe",
+  "purple-5": "#c084fc",
+  "purple-6": "#a855f7",
+  "purple-7": "#9333ea",
+  "purple-8": "#7e22ce",
+  "purple-9": "#6b21a8",
+  "red-1": "#fef2f2",
+  "red-10": "#7f1d1d",
+  "red-11": "#450a0a",
+  "red-12": "#280606",
+  "red-2": "#fee2e2",
+  "red-3": "#fecaca",
+  "red-4": "#fca5a5",
+  "red-5": "#f87171",
+  "red-6": "#ef4444",
+  "red-7": "#dc2626",
+  "red-8": "#b91c1c",
+  "red-9": "#991b1b",
+  "rose-1": "#fff1f2",
+  "rose-10": "#881337",
+  "rose-11": "#4c0519",
+  "rose-12": "#2d030e",
+  "rose-2": "#ffe4e6",
+  "rose-3": "#fecdd3",
+  "rose-4": "#fda4af",
+  "rose-5": "#fb7185",
+  "rose-6": "#f43f5e",
+  "rose-7": "#e11d48",
+  "rose-8": "#be123c",
+  "rose-9": "#9f1239",
+  "silver": "#c0c0c0",
+  "sky-1": "#f0f9ff",
+  "sky-10": "#0c4a6e",
+  "sky-11": "#082f49",
+  "sky-12": "#041b2b",
+  "sky-2": "#e0f2fe",
+  "sky-3": "#bae6fd",
+  "sky-4": "#7dd3fc",
+  "sky-5": "#38bdf8",
+  "sky-6": "#0ea5e9",
+  "sky-7": "#0284c7",
+  "sky-8": "#0369a1",
+  "sky-9": "#075985",
+  "slate-1": "#f8fafc",
+  "slate-10": "#0f172a",
+  "slate-11": "#020617",
+  "slate-12": "#01020a",
+  "slate-2": "#f1f5f9",
+  "slate-3": "#e2e8f0",
+  "slate-4": "#cbd5e1",
+  "slate-5": "#94a3b8",
+  "slate-6": "#64748b",
+  "slate-7": "#475569",
+  "slate-8": "#334155",
+  "slate-9": "#1e293b",
+  "stone-1": "#fafaf9",
+  "stone-10": "#1c1917",
+  "stone-11": "#0c0a09",
+  "stone-12": "#070605",
+  "stone-2": "#f5f5f4",
+  "stone-3": "#e7e5e4",
+  "stone-4": "#d6d3d1",
+  "stone-5": "#a8a29e",
+  "stone-6": "#78716c",
+  "stone-7": "#57534e",
+  "stone-8": "#44403c",
+  "stone-9": "#292524",
+  "teal-1": "#f0fdfa",
+  "teal-10": "#134e4a",
+  "teal-11": "#042f2e",
+  "teal-12": "#021c1b",
+  "teal-2": "#ccfbf1",
+  "teal-3": "#99f6e4",
+  "teal-4": "#5eead4",
+  "teal-5": "#2dd4bf",
+  "teal-6": "#14b8a6",
+  "teal-7": "#0d9488",
+  "teal-8": "#0f766e",
+  "teal-9": "#115e59",
+  "transparent": "transparent",
+  "violet-1": "#f5f3ff",
+  "violet-10": "#4c1d95",
+  "violet-11": "#2e1065",
+  "violet-12": "#1c0a3d",
+  "violet-2": "#ede9fe",
+  "violet-3": "#ddd6fe",
+  "violet-4": "#c4b5fd",
+  "violet-5": "#a78bfa",
+  "violet-6": "#8b5cf6",
+  "violet-7": "#7c3aed",
+  "violet-8": "#6d28d9",
+  "violet-9": "#5b21b6",
+  "white": "#ffffff",
+  "yellow-1": "#fefce8",
+  "yellow-10": "#713f12",
+  "yellow-11": "#422006",
+  "yellow-12": "#271304",
+  "yellow-2": "#fef9c3",
+  "yellow-3": "#fef08a",
+  "yellow-4": "#fde047",
+  "yellow-5": "#facc15",
+  "yellow-6": "#eab308",
+  "yellow-7": "#ca8a04",
+  "yellow-8": "#a16207",
+  "yellow-9": "#854d0e",
+  "zinc-1": "#fafafa",
+  "zinc-10": "#18181b",
+  "zinc-11": "#09090b",
+  "zinc-12": "#050506",
+  "zinc-2": "#f4f4f5",
+  "zinc-3": "#e4e4e7",
+  "zinc-4": "#d4d4d8",
+  "zinc-5": "#a1a1aa",
+  "zinc-6": "#71717a",
+  "zinc-7": "#52525b",
+  "zinc-8": "#3f3f46",
+  "zinc-9": "#27272a"
+};
+
+// src/theme.ts
+var defaultTheme = {
+  colors: {
+    ...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": 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,
+    "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,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
+  // 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'
+  },
+  // Matches real Tailwind's own default (`darkMode: 'media'`): pure
+  // `@media (prefers-color-scheme: dark)`, works with zero JS — a project
+  // using only static `className` strings gets working `dark:` classes
+  // out of the box, with no runtime import required to write `data-theme`/
+  // `.dark` onto `<html>` (see darkModeStore.ts's `applyToDom`). The
+  // tradeoff: `'media'` can't be overridden by a manual light/dark toggle —
+  // `useTheme()`/`toggleGlobalDarkMode()` still track `isDark` correctly
+  // for JS consumers, but flipping it has no visible effect on `dark:`
+  // classes, since the browser's media query only ever reflects the real
+  // OS setting. Opt into `darkMode: 'class'` or `'attribute'` explicitly
+  // (via `kbach.config.js` or the `config`/`theme` plugin option) as soon
+  // as an app wants a real in-app toggle.
+  darkMode: "media",
+  // 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 isEsmRequireFailure(err) {
+  if (!(err instanceof Error)) return false;
+  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);
+  return mod.default ?? mod;
+}
+function requireConfigModule(root, path) {
+  const mod = (0, import_module.createRequire)(root)(path);
+  return mod.default ?? mod;
+}
+async function loadConfigFile(root) {
+  const cjsPath = (0, import_path4.join)(root, "kbach.config.cjs");
+  if ((0, import_fs2.existsSync)(cjsPath)) return requireConfigModule(root, cjsPath);
+  const mjsPath = (0, import_path4.join)(root, "kbach.config.mjs");
+  if ((0, import_fs2.existsSync)(mjsPath)) return importConfigModule(mjsPath);
+  const jsPath = (0, import_path4.join)(root, "kbach.config.js");
+  if (!(0, import_fs2.existsSync)(jsPath)) return void 0;
+  try {
+    return requireConfigModule(root, jsPath);
+  } catch (err) {
+    if (!isEsmRequireFailure(err)) throw err;
+    return importConfigModule(jsPath);
+  }
+}
+async function resolveEffectiveTheme(root, options) {
+  if (options.theme) return options.theme;
+  if (options.config) return resolveKbachConfig(options.config);
+  const discovered = await loadConfigFile(root);
+  return discovered ? resolveKbachConfig(discovered) : defaultTheme;
+}
+
+// src/postcss-plugin/index.ts
+var KBACH_START_TEXT = "kbach:start";
+var KBACH_END_TEXT = "kbach:end";
+function isKbachMarker(node, text) {
+  return !!node && node.type === "comment" && node.text === text;
+}
+function spliceGeneratedCss(root, generatedCss) {
+  const nodes = root.nodes;
+  let startIdx = -1;
+  let endIdx = -1;
+  for (let i = 0; i < nodes.length; i++) {
+    if (startIdx === -1 && isKbachMarker(nodes[i], KBACH_START_TEXT)) {
+      startIdx = i;
+      continue;
+    }
+    if (startIdx !== -1 && isKbachMarker(nodes[i], KBACH_END_TEXT)) {
+      endIdx = i;
+      break;
+    }
+  }
+  if (startIdx === -1 || endIdx === -1) {
+    console.warn(
+      `[kbach] postcss plugin: no "/* kbach:start */" / "/* kbach:end */" marker pair found \u2014 add both to the file this plugin processes (see @kbach/react/vite's own convention). Nothing was generated.`
+    );
+    return;
+  }
+  for (const stale of nodes.slice(startIdx + 1, endIdx)) stale.remove();
+  const parsed = import_postcss.default.parse(generatedCss);
+  const newNodes = [...parsed.nodes];
+  let after = nodes[startIdx];
+  for (const node of newNodes) {
+    root.insertAfter(after, node);
+    after = node;
+  }
+}
+function kbachPostcss(options = {}) {
+  return {
+    postcssPlugin: "kbach",
+    async Once(root, { result }) {
+      const projectRoot = options.root ?? process.cwd();
+      const theme = await resolveEffectiveTheme(projectRoot, options);
+      const includeDirs = options.include ?? DEFAULT_SCAN_DIRS;
+      const safelist = options.safelist ?? [];
+      const engine = createKbachStaticCssEngine({
+        root: projectRoot,
+        theme,
+        themeJson: JSON.stringify(theme),
+        includeDirs,
+        safelist
+      });
+      engine.scanProjectCssSelectorsOnce();
+      engine.initialScan();
+      engine.processSafelist();
+      for (const dir of includeDirs) {
+        result.messages.push({
+          type: "dir-dependency",
+          plugin: "kbach",
+          dir: (0, import_path5.resolve)(projectRoot, dir),
+          glob: "**/*"
+        });
+      }
+      spliceGeneratedCss(root, engine.generateCSS());
+    }
+  };
+}
+kbachPostcss.postcss = true;