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

package/dist/index.js

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   KbachReset: () => KbachReset,
   ThemeProvider: () => ThemeProvider,
+  applyKbachConfig: () => applyKbachConfig,
   defaultTheme: () => defaultTheme,
   disableRuntimeCSS: () => disableRuntimeCSS,
   getGlobalDarkMode: () => getGlobalDarkMode,
@@ -41,11 +42,12 @@ __export(src_exports, {
   isKbachReady: () => isKbachReady,
   isRuntimeCSSDisabled: () => isRuntimeCSSDisabled,
   kb: () => kb,
+  resolveKbachConfig: () => resolveKbachConfig,
   setGlobalThemeMode: () => setGlobalThemeMode,
   setTheme: () => setTheme,
   subscribeGlobalDarkMode: () => subscribeGlobalDarkMode,
   toggleGlobalDarkMode: () => toggleGlobalDarkMode,
-  useGlobalDarkMode: () => useGlobalDarkMode,
+  useColors: () => useColors,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
@@ -357,21 +359,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,
@@ -380,7 +415,33 @@ 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'
+  },
+  // 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 activeTheme = defaultTheme;
 var activeThemeJson = JSON.stringify(defaultTheme);
@@ -545,6 +606,113 @@ function KbachReset() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: RESET_STYLE_ID, children: BASE_RESET });
 }
 
+// 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} }`;
+  }
+}
+var STYLE_ID = "kbach-colors";
+var injectedForTheme = null;
+function ensureColorVariablesInjected(theme) {
+  if (typeof document === "undefined") return;
+  if (injectedForTheme === theme) return;
+  injectedForTheme = theme;
+  const lightDecls = [];
+  const darkDecls = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (typeof value === "string") continue;
+    const light = parseHexRgb(value.light);
+    const dark = parseHexRgb(value.dark);
+    if (!light || !dark) continue;
+    lightDecls.push(`--kb-color-${name}: ${light.join(",")};`);
+    darkDecls.push(`--kb-color-${name}: ${dark.join(",")};`);
+  }
+  let el = document.getElementById(STYLE_ID);
+  if (lightDecls.length === 0) {
+    el?.remove();
+    return;
+  }
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_ID;
+    document.head.insertBefore(el, document.head.firstChild);
+  }
+  el.textContent = `:root { ${lightDecls.join(" ")} }
+${wrapDarkDecls(theme.darkMode, darkDecls.join(" "))}`;
+}
+
+// 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;
+}
+function applyKbachConfig(config) {
+  const theme = resolveKbachConfig(config);
+  setTheme(theme);
+  return theme;
+}
+
+// src/useTheme.ts
+var import_react = require("react");
+
 // src/darkModeStore.ts
 var STORAGE_KEY = "kbach-theme";
 var listeners = /* @__PURE__ */ new Set();
@@ -632,64 +800,111 @@ function seedDefaultMode(fallback) {
   notify();
 }
 
-// src/useGlobalDarkMode.ts
-var import_react = require("react");
-var getServerSnapshot = () => false;
-function useGlobalDarkMode() {
-  return (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode, getServerSnapshot);
-}
-
-// src/ThemeProvider.tsx
-var import_react3 = require("react");
-
-// src/ThemeContext.tsx
-var import_react2 = require("react");
-var ThemeContext = (0, import_react2.createContext)(null);
+// src/useTheme.ts
 function useTheme() {
-  const ctx = (0, import_react2.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 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
+  const mode2 = (0, import_react.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalThemeMode, () => "system");
+  return (0, import_react.useMemo)(
+    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode2, isDark2]
+  );
 }
 
 // src/ThemeProvider.tsx
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var mountedProviderCount = 0;
 var warnedMultipleProviders = false;
 function ThemeProvider({ children, defaultMode = "system" }) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     mountedProviderCount++;
-    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+    if (mountedProviderCount > 1 && !warnedMultipleProviders && process.env.NODE_ENV !== "production") {
       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 () => {
       mountedProviderCount--;
     };
   }, []);
-  const seeded = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const seeded = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
     if (seeded.current) return;
     seeded.current = true;
     seedDefaultMode(defaultMode);
   }, []);
-  const isDark2 = (0, import_react3.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalDarkMode, () => false);
-  const mode2 = (0, import_react3.useSyncExternalStore)(subscribeGlobalDarkMode, getGlobalThemeMode, () => defaultMode);
-  const value = (0, import_react3.useMemo)(
-    () => ({ mode: mode2, isDark: isDark2, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
-    [mode2, isDark2]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.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);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   KbachReset,
   ThemeProvider,
+  applyKbachConfig,
   defaultTheme,
   disableRuntimeCSS,
   getGlobalDarkMode,
@@ -699,10 +914,11 @@ function ThemeProvider({ children, defaultMode = "system" }) {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb,
+  resolveKbachConfig,
   setGlobalThemeMode,
   setTheme,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode,
-  useGlobalDarkMode,
+  useColors,
   useTheme
 });

package/dist/index.mjs

@@ -4,14 +4,20 @@ import {
   isKbachReady,
   isRuntimeCSSDisabled,
   kb
-} from "./chunk-G3RJJNSY.mjs";
+} from "./chunk-ROKZPEHA.mjs";
+import {
+  applyKbachConfig,
+  ensureColorVariablesInjected,
+  parseHexRgb,
+  resolveKbachConfig
+} from "./chunk-4Y2QXNJY.mjs";
 import {
   BASE_RESET,
   RESET_STYLE_ID,
   defaultTheme,
   getTheme,
   setTheme
-} from "./chunk-AFY36PRX.mjs";
+} from "./chunk-EOSN5CYG.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,40 +116,28 @@ 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" }) {
   useEffect(() => {
     mountedProviderCount++;
-    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+    if (mountedProviderCount > 1 && !warnedMultipleProviders && process.env.NODE_ENV !== "production") {
       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,33 @@ 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'
+  },
+  // 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);
 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-L6B4DTLD.mjs";
+import "./chunk-ROKZPEHA.mjs";
+import "./chunk-EOSN5CYG.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {