@kbach/react 0.6.4 → 0.6.6

package/README.md

@@ -88,6 +88,8 @@ import './kbach.css';
 
 The plugin scans your source files and writes generated CSS between the `/* kbach:start */`/`/* kbach:end */` markers. Importing `kbach.css` automatically disables runtime injection — all styles come from the file instead. On HMR, only the changed file is rescanned; unchanged tokens reuse cached CSS.
 
+While it's scanning, the plugin also indexes every `.css`/`.scss`/`.sass`/`.less` file under the same directories and warns in the terminal (not the browser console) for any class that's neither a real Kbach utility nor defined anywhere in those stylesheets — likely a typo. A class you've defined yourself elsewhere (CSS Modules, styled-components, a third-party component's class) is recognized as soon as something in the project literally has a `.that-class-name` rule, so it won't get flagged just because Kbach itself doesn't know it. Each warning includes a `file:line:column` location that most terminals (VS Code's integrated terminal included) turn into a clickable link straight to that class.
+
 ## Next.js
 
 Step 1 (tsconfig `jsxImportSource`) and step 2 (`ThemeProvider`) above apply as-is — Next.js's SWC compiler reads `jsxImportSource` from `tsconfig.json` the same way Vite does, and `@kbach/react` shipping its own `"use client"` directive means `ThemeProvider` works directly in a Server Component tree (e.g. the App Router root `layout.tsx`) with no wrapper of your own needed.
@@ -298,6 +300,17 @@ Negated: `not-hover:`, `not-focus:`, `not-pressed:`, `not-active:`, `not-disable
 <p className="peer-focus:text-blue-6" />
 ```
 
+Nested groups need names, or the inner element reacts to whichever `.group` is nearest — not necessarily the one you meant:
+
+```jsx
+<div className="group/card">
+  <div className="group/icon">
+    <span className="group-hover/icon:opacity-100" /> {/* only the inner group */}
+  </div>
+  <span className="group-hover/card:underline" />      {/* only the outer group */}
+</div>
+```
+
 ### Responsive
 
 | Modifier | Min-width |

package/dist/{chunk-EU7RK3K4.mjs → chunk-5YN6PIXQ.mjs}

@@ -23,7 +23,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-SVPKCLOI.mjs";
+} from "./chunk-LXOMVLQI.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-SVPKCLOI.mjs → chunk-LXOMVLQI.mjs}

@@ -565,6 +565,15 @@ function escapeCSSSelector(cls) {
   return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
+
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
@@ -640,7 +649,7 @@ function _invalidate() {
 }
 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.`);
+    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
     return;
   }
   _pluginModifiers[name] = def;
@@ -650,11 +659,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2331,10 +2359,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2352,7 +2382,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -2413,7 +2443,7 @@ function parseClass(className) {
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
     if (process.env.NODE_ENV !== "production") {
-      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
     }
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
@@ -2880,7 +2910,7 @@ function resolve(classString, theme, darkMode = "attribute") {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
       if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
-        console.warn(`[kbach] Unknown utility "${parsed.utility}" in class "${parsed.original}"`);
+        kbachWarn(`Unknown class "${parsed.original}"`);
       }
       continue;
     }
@@ -3035,7 +3065,7 @@ function buildConfig(userConfig) {
       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.`);
+            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
           }
           continue;
         }
@@ -3631,9 +3661,19 @@ var InteractiveWrapper = forwardRef(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
-      // (and any component that accepts both prop names) depend on receiving them directly.
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/index.js

@@ -690,6 +690,15 @@ function escapeCSSSelector(cls) {
   return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
+
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
@@ -765,7 +774,7 @@ function _invalidate() {
 }
 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.`);
+    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
     return;
   }
   _pluginModifiers[name] = def;
@@ -775,11 +784,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2450,10 +2478,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2471,7 +2501,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -2532,7 +2562,7 @@ function parseClass(className) {
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
     if (process.env.NODE_ENV !== "production") {
-      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
     }
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
@@ -2958,7 +2988,7 @@ function resolve(classString, theme, darkMode = "attribute") {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
       if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
-        console.warn(`[kbach] Unknown utility "${parsed.utility}" in class "${parsed.original}"`);
+        kbachWarn(`Unknown class "${parsed.original}"`);
       }
       continue;
     }
@@ -3113,7 +3143,7 @@ function buildConfig(userConfig) {
       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.`);
+            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
           }
           continue;
         }
@@ -3917,8 +3947,25 @@ function styled(Component, baseClasses = "") {
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // onPressIn/onPressOut are forwarded on web too (not just native) since
-        // react-native-web components rely on receiving them directly.
-        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // react-native-web components rely on receiving them directly — but only
+        // when effectiveComponent is an actual component, never a literal HTML tag
+        // string ('div', 'a', …). React DOM warns "Unknown event handler property"
+        // for onPressIn/onPressOut on a host element even when the value is
+        // undefined — the check is on the prop KEY being present at all, not its
+        // value — so the key must be omitted entirely for string components.
+        ...isWeb ? hasInteractive ? {
+          onPointerDown: handlePointerDown,
+          onPointerUp: handlePointerUp,
+          onPointerLeave: handlePointerLeave,
+          onPointerCancel: handlePointerCancel,
+          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+        } : {
+          onPointerDown,
+          onPointerUp,
+          onPointerLeave,
+          onPointerCancel,
+          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+        } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,
@@ -4039,9 +4086,19 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
-      // (and any component that accepts both prop names) depend on receiving them directly.
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/index.mjs

@@ -36,7 +36,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-SVPKCLOI.mjs";
+} from "./chunk-LXOMVLQI.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -330,8 +330,25 @@ function styled(Component, baseClasses = "") {
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // onPressIn/onPressOut are forwarded on web too (not just native) since
-        // react-native-web components rely on receiving them directly.
-        ...isWeb ? hasInteractive ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onPressIn, onPressOut } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
+        // react-native-web components rely on receiving them directly — but only
+        // when effectiveComponent is an actual component, never a literal HTML tag
+        // string ('div', 'a', …). React DOM warns "Unknown event handler property"
+        // for onPressIn/onPressOut on a host element even when the value is
+        // undefined — the check is on the prop KEY being present at all, not its
+        // value — so the key must be omitted entirely for string components.
+        ...isWeb ? hasInteractive ? {
+          onPointerDown: handlePointerDown,
+          onPointerUp: handlePointerUp,
+          onPointerLeave: handlePointerLeave,
+          onPointerCancel: handlePointerCancel,
+          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+        } : {
+          onPointerDown,
+          onPointerUp,
+          onPointerLeave,
+          onPointerCancel,
+          ...typeof effectiveComponent !== "string" ? { onPressIn, onPressOut } : {}
+        } : hasInteractive ? { onPressIn: handlePressIn, onPressOut: handlePressOut } : { onPressIn, onPressOut },
         onMouseEnter: hasInteractive ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hasInteractive ? handleMouseLeave : onMouseLeave,
         onFocus: hasInteractive ? handleFocus : onFocus,

package/dist/jsx-dev-runtime.js

@@ -643,6 +643,15 @@ function escapeCSSSelector(cls) {
   return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
+
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
@@ -718,7 +727,7 @@ function _invalidate() {
 }
 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.`);
+    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
     return;
   }
   _pluginModifiers[name] = def;
@@ -728,11 +737,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2409,10 +2437,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2430,7 +2460,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -2491,7 +2521,7 @@ function parseClass(className) {
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
     if (process.env.NODE_ENV !== "production") {
-      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
     }
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
@@ -2902,7 +2932,7 @@ function resolve(classString, theme, darkMode = "attribute") {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
       if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
-        console.warn(`[kbach] Unknown utility "${parsed.utility}" in class "${parsed.original}"`);
+        kbachWarn(`Unknown class "${parsed.original}"`);
       }
       continue;
     }
@@ -3046,7 +3076,7 @@ function buildConfig(userConfig) {
       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.`);
+            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
           }
           continue;
         }
@@ -3328,9 +3358,19 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
-      // (and any component that accepts both prop names) depend on receiving them directly.
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-EU7RK3K4.mjs";
-import "./chunk-SVPKCLOI.mjs";
+} from "./chunk-5YN6PIXQ.mjs";
+import "./chunk-LXOMVLQI.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -644,6 +644,15 @@ function escapeCSSSelector(cls) {
   return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
+
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
@@ -719,7 +728,7 @@ function _invalidate() {
 }
 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.`);
+    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
     return;
   }
   _pluginModifiers[name] = def;
@@ -729,11 +738,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 function _allEntries() {
   return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
@@ -2410,10 +2438,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2431,7 +2461,7 @@ function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
 }
 function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
 }
 var _sortedPrefixes = null;
 var _standaloneNames = null;
@@ -2492,7 +2522,7 @@ function parseClass(className) {
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
     if (process.env.NODE_ENV !== "production") {
-      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
     }
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
@@ -2903,7 +2933,7 @@ function resolve(classString, theme, darkMode = "attribute") {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
       if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
-        console.warn(`[kbach] Unknown utility "${parsed.utility}" in class "${parsed.original}"`);
+        kbachWarn(`Unknown class "${parsed.original}"`);
       }
       continue;
     }
@@ -3047,7 +3077,7 @@ function buildConfig(userConfig) {
       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.`);
+            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
           }
           continue;
         }
@@ -3329,9 +3359,19 @@ var InteractiveWrapper = (0, import_react2.forwardRef)(
       style: finalStyle,
       ...!isNative && className ? { className } : {},
       // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch),
-      // but onPressIn/onPressOut are still forwarded unchanged — react-native-web components
-      // (and any component that accepts both prop names) depend on receiving them directly.
-      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onPointerCancel: handlePointerCancel, onPressIn, onPressOut } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      // and onPressIn/onPressOut are ALSO forwarded — but only when Component is an actual
+      // component (react-native-web components accept both prop names), never when it's a
+      // literal HTML tag string ('div', 'a', …). React DOM warns "Unknown event handler
+      // property" for onPressIn/onPressOut on a host element even when the value is
+      // undefined — the check is on the prop KEY being present at all, not its value — so
+      // the key must be omitted entirely for string components, not just set to undefined.
+      ...!isNative ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        ...typeof Component !== "string" ? { onPressIn, onPressOut } : {}
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-EU7RK3K4.mjs";
+} from "./chunk-5YN6PIXQ.mjs";
 import {
   registerWebElement
-} from "./chunk-SVPKCLOI.mjs";
+} from "./chunk-LXOMVLQI.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -2269,10 +2269,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2305,6 +2307,15 @@ function getBuiltinStandaloneNames() {
   return _standaloneNames;
 }
 
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
+
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
@@ -2380,7 +2391,7 @@ function _invalidate() {
 }
 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.`);
+    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
     return;
   }
   _pluginModifiers[name] = def;
@@ -2390,11 +2401,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 
 // src/core/parser.ts
@@ -2440,7 +2470,7 @@ function parseClass(className) {
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
     if (process.env.NODE_ENV !== "production") {
-      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
     }
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
@@ -2876,7 +2906,7 @@ function buildConfig(userConfig) {
       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.`);
+            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
           }
           continue;
         }
@@ -2975,6 +3005,39 @@ function normPath(p) {
   return process2.platform === "win32" ? fwd.toLowerCase() : fwd;
 }
 setCSSGenMode(true);
+var useColor = !!process2.stdout?.isTTY && !process2.env.NO_COLOR;
+var paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
+var purple = (s) => paint("35", s);
+var yellow = (s) => paint("33", s);
+var dim = (s) => paint("2", s);
+var bold = (s) => paint("1", s);
+var TAG = () => `${bold(purple("[kbach]"))}`;
+function warn(message) {
+  console.warn(`${TAG()} ${yellow(message)}`);
+}
+function warnBlock(header, ...lines) {
+  console.warn([`${TAG()} ${yellow(header)}`, ...lines].join("\n"));
+}
+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 warnAt(message, root, filePath, code, needle) {
+  const pos = findLineCol(code, needle);
+  const relPath = (0, import_path.relative)(root, filePath).replace(/\\/g, "/");
+  const location = pos ? `${relPath}:${pos.line}:${pos.column}` : relPath;
+  console.warn(`${TAG()} ${yellow(message)}
+  ${dim("at")} ${location}`);
+}
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
 var GROUPS = [
@@ -3097,8 +3160,9 @@ function findKbachCSS(root) {
   if (found.length === 0) return null;
   found.sort((a, b) => a.split(/[\\/]/g).length - b.split(/[\\/]/g).length);
   if (found.length > 1) {
-    console.warn(
-      "[kbach] Multiple kbach.css files found \u2014 only the shallowest will receive generated styles.\n        Remove duplicates to avoid confusion:\n" + found.map((f) => `          ${f}`).join("\n")
+    warnBlock(
+      `Multiple kbach.css found, using the shallowest \u2014 remove the rest:`,
+      ...found.map((f) => dim(`  ${f}`))
     );
   }
   return found[0];
@@ -3187,7 +3251,7 @@ function scanDir(dir, onFile) {
     entries = (0, import_fs.readdirSync)(dir);
   } catch (err) {
     if (err.code !== "ENOENT") {
-      console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+      warn(`Can't read ${dir}: ${err.message}`);
     }
     return;
   }
@@ -3199,10 +3263,42 @@ function scanDir(dir, onFile) {
       if (st.isDirectory()) scanDir(full, onFile);
       else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, (0, import_fs.readFileSync)(full, "utf-8"));
     } catch (err) {
-      console.warn(`[kbach] Cannot process ${full}:`, err.message);
+      warn(`Can't process ${full}: ${err.message}`);
     }
   }
 }
+var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
+var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
+function scanCssFileInto(filePath, into) {
+  try {
+    const text = (0, import_fs.readFileSync)(filePath, "utf-8");
+    let m;
+    CSS_CLASS_SELECTOR_RE.lastIndex = 0;
+    while ((m = CSS_CLASS_SELECTOR_RE.exec(text)) !== null) into.add(m[1]);
+  } catch {
+  }
+}
+function scanCssSelectorsInto(dir, into) {
+  let entries;
+  try {
+    entries = (0, import_fs.readdirSync)(dir);
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = (0, import_path.join)(dir, entry);
+    try {
+      const st = (0, import_fs.statSync)(full);
+      if (st.isDirectory()) scanCssSelectorsInto(full, into);
+      else if (CSS_FILE_RE.test(entry)) scanCssFileInto(full, into);
+    } catch {
+    }
+  }
+}
+function stripModifierPrefix(token) {
+  return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
+}
 var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components", "views", "layouts"];
 function kbach(userConfigOrOptions) {
   const isOptions = userConfigOrOptions != null && ("framework" in userConfigOrOptions || "include" in userConfigOrOptions);
@@ -3217,6 +3313,17 @@ function kbach(userConfigOrOptions) {
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenCSS = /* @__PURE__ */ new Map();
+  const projectCssClasses = /* @__PURE__ */ new Set();
+  const warnedTokens = /* @__PURE__ */ new Set();
+  function checkUnknownToken(tok, filePath, code) {
+    if (process2.env.NODE_ENV === "production" || warnedTokens.has(tok) || tok.startsWith("__")) return;
+    const parsed = parseClass(tok);
+    if (parsed && resolveUtility(parsed, cfg.theme) !== null) return;
+    const base = stripModifierPrefix(tok);
+    if (!base || projectCssClasses.has(base)) return;
+    warnedTokens.add(tok);
+    warnAt(`Unknown class "${tok}" \u2014 no Kbach utility or project CSS rule matches it. Typo?`, root, filePath, code, tok);
+  }
   function processFile(filePath, code) {
     const key = normPath(filePath);
     const tokens = /* @__PURE__ */ new Set();
@@ -3225,9 +3332,13 @@ function kbach(userConfigOrOptions) {
       if (!tokenCSS.has(tok)) {
         tokenCSS.set(tok, generateClassCSS(tok, cfg.theme, cfg.darkMode, screens));
       }
+      checkUnknownToken(tok, filePath, code);
     }
     fileTokens.set(key, tokens);
   }
+  function scanProjectCssSelectors() {
+    for (const dir of includeDirs) scanCssSelectorsInto((0, import_path.join)(root, dir), projectCssClasses);
+  }
   function buildTokenCSSView() {
     const active = /* @__PURE__ */ new Set();
     for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
@@ -3253,8 +3364,10 @@ function kbach(userConfigOrOptions) {
       root = resolved.root;
       const names = new Set(resolved.plugins.map((p) => p.name));
       if (names.has("react-router") && names.has("vite:react-refresh")) {
-        console.warn(
-          `[kbach] Detected both @vitejs/plugin-react and @react-router/dev's reactRouter() plugin active together. reactRouter() already includes its own JSX transform and Fast Refresh integration \u2014 having both crashes the page at runtime with "Identifier 'RefreshRuntime' has already been declared" before React hydrates, which looks like every class silently failing to style. Remove the react() plugin from vite.config.ts; jsxImportSource in tsconfig.json is enough on its own.`
+        warnBlock(
+          "@vitejs/plugin-react + reactRouter() conflict \u2014 page will crash before styles apply.",
+          dim('  Both inject Fast Refresh ("RefreshRuntime already declared").'),
+          dim("  Fix: remove react() from vite.config.ts \u2014 tsconfig jsxImportSource is enough.")
         );
       }
     },
@@ -3272,11 +3385,17 @@ ${code}`,
     },
     buildStart() {
       mainCSSFile = findKbachCSS(root);
+      scanProjectCssSelectors();
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
     handleHotUpdate({ file, server }) {
-      if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
+      if (file.includes("node_modules")) return;
+      if (CSS_FILE_RE.test(file)) {
+        scanCssFileInto(file, projectCssClasses);
+        return;
+      }
+      if (!/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, (0, import_fs.readFileSync)(file, "utf-8"));
       } catch {

package/dist/vite-plugin.mjs

@@ -1,6 +1,6 @@
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
-import { join } from "path";
+import { join, relative } from "path";
 import processImport from "process";
 
 // src/core/platform.ts
@@ -2235,10 +2235,12 @@ for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
 for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
   RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
 }
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
 function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2271,6 +2273,15 @@ function getBuiltinStandaloneNames() {
   return _standaloneNames;
 }
 
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
+
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
@@ -2346,7 +2357,7 @@ function _invalidate() {
 }
 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.`);
+    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
     return;
   }
   _pluginModifiers[name] = def;
@@ -2356,11 +2367,30 @@ function clearPluginModifiers() {
   for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
   _invalidate();
 }
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = /* @__PURE__ */ new Map();
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
 function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
 }
 function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
 }
 
 // src/core/parser.ts
@@ -2406,7 +2436,7 @@ function parseClass(className) {
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
     if (process.env.NODE_ENV !== "production") {
-      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
     }
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
@@ -2842,7 +2872,7 @@ function buildConfig(userConfig) {
       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.`);
+            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
           }
           continue;
         }
@@ -2941,6 +2971,39 @@ function normPath(p) {
   return process2.platform === "win32" ? fwd.toLowerCase() : fwd;
 }
 setCSSGenMode(true);
+var useColor = !!process2.stdout?.isTTY && !process2.env.NO_COLOR;
+var paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
+var purple = (s) => paint("35", s);
+var yellow = (s) => paint("33", s);
+var dim = (s) => paint("2", s);
+var bold = (s) => paint("1", s);
+var TAG = () => `${bold(purple("[kbach]"))}`;
+function warn(message) {
+  console.warn(`${TAG()} ${yellow(message)}`);
+}
+function warnBlock(header, ...lines) {
+  console.warn([`${TAG()} ${yellow(header)}`, ...lines].join("\n"));
+}
+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 warnAt(message, root, filePath, code, needle) {
+  const pos = findLineCol(code, needle);
+  const relPath = relative(root, filePath).replace(/\\/g, "/");
+  const location = pos ? `${relPath}:${pos.line}:${pos.column}` : relPath;
+  console.warn(`${TAG()} ${yellow(message)}
+  ${dim("at")} ${location}`);
+}
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
 var GROUPS = [
@@ -3063,8 +3126,9 @@ function findKbachCSS(root) {
   if (found.length === 0) return null;
   found.sort((a, b) => a.split(/[\\/]/g).length - b.split(/[\\/]/g).length);
   if (found.length > 1) {
-    console.warn(
-      "[kbach] Multiple kbach.css files found \u2014 only the shallowest will receive generated styles.\n        Remove duplicates to avoid confusion:\n" + found.map((f) => `          ${f}`).join("\n")
+    warnBlock(
+      `Multiple kbach.css found, using the shallowest \u2014 remove the rest:`,
+      ...found.map((f) => dim(`  ${f}`))
     );
   }
   return found[0];
@@ -3153,7 +3217,7 @@ function scanDir(dir, onFile) {
     entries = readdirSync(dir);
   } catch (err) {
     if (err.code !== "ENOENT") {
-      console.warn(`[kbach] Cannot read directory ${dir}:`, err.message);
+      warn(`Can't read ${dir}: ${err.message}`);
     }
     return;
   }
@@ -3165,10 +3229,42 @@ function scanDir(dir, onFile) {
       if (st.isDirectory()) scanDir(full, onFile);
       else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
     } catch (err) {
-      console.warn(`[kbach] Cannot process ${full}:`, err.message);
+      warn(`Can't process ${full}: ${err.message}`);
     }
   }
 }
+var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
+var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
+function scanCssFileInto(filePath, into) {
+  try {
+    const text = readFileSync(filePath, "utf-8");
+    let m;
+    CSS_CLASS_SELECTOR_RE.lastIndex = 0;
+    while ((m = CSS_CLASS_SELECTOR_RE.exec(text)) !== null) into.add(m[1]);
+  } catch {
+  }
+}
+function scanCssSelectorsInto(dir, into) {
+  let entries;
+  try {
+    entries = readdirSync(dir);
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.startsWith(".") || entry === "node_modules") continue;
+    const full = join(dir, entry);
+    try {
+      const st = statSync(full);
+      if (st.isDirectory()) scanCssSelectorsInto(full, into);
+      else if (CSS_FILE_RE.test(entry)) scanCssFileInto(full, into);
+    } catch {
+    }
+  }
+}
+function stripModifierPrefix(token) {
+  return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
+}
 var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components", "views", "layouts"];
 function kbach(userConfigOrOptions) {
   const isOptions = userConfigOrOptions != null && ("framework" in userConfigOrOptions || "include" in userConfigOrOptions);
@@ -3183,6 +3279,17 @@ function kbach(userConfigOrOptions) {
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenCSS = /* @__PURE__ */ new Map();
+  const projectCssClasses = /* @__PURE__ */ new Set();
+  const warnedTokens = /* @__PURE__ */ new Set();
+  function checkUnknownToken(tok, filePath, code) {
+    if (process2.env.NODE_ENV === "production" || warnedTokens.has(tok) || tok.startsWith("__")) return;
+    const parsed = parseClass(tok);
+    if (parsed && resolveUtility(parsed, cfg.theme) !== null) return;
+    const base = stripModifierPrefix(tok);
+    if (!base || projectCssClasses.has(base)) return;
+    warnedTokens.add(tok);
+    warnAt(`Unknown class "${tok}" \u2014 no Kbach utility or project CSS rule matches it. Typo?`, root, filePath, code, tok);
+  }
   function processFile(filePath, code) {
     const key = normPath(filePath);
     const tokens = /* @__PURE__ */ new Set();
@@ -3191,9 +3298,13 @@ function kbach(userConfigOrOptions) {
       if (!tokenCSS.has(tok)) {
         tokenCSS.set(tok, generateClassCSS(tok, cfg.theme, cfg.darkMode, screens));
       }
+      checkUnknownToken(tok, filePath, code);
     }
     fileTokens.set(key, tokens);
   }
+  function scanProjectCssSelectors() {
+    for (const dir of includeDirs) scanCssSelectorsInto(join(root, dir), projectCssClasses);
+  }
   function buildTokenCSSView() {
     const active = /* @__PURE__ */ new Set();
     for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
@@ -3219,8 +3330,10 @@ function kbach(userConfigOrOptions) {
       root = resolved.root;
       const names = new Set(resolved.plugins.map((p) => p.name));
       if (names.has("react-router") && names.has("vite:react-refresh")) {
-        console.warn(
-          `[kbach] Detected both @vitejs/plugin-react and @react-router/dev's reactRouter() plugin active together. reactRouter() already includes its own JSX transform and Fast Refresh integration \u2014 having both crashes the page at runtime with "Identifier 'RefreshRuntime' has already been declared" before React hydrates, which looks like every class silently failing to style. Remove the react() plugin from vite.config.ts; jsxImportSource in tsconfig.json is enough on its own.`
+        warnBlock(
+          "@vitejs/plugin-react + reactRouter() conflict \u2014 page will crash before styles apply.",
+          dim('  Both inject Fast Refresh ("RefreshRuntime already declared").'),
+          dim("  Fix: remove react() from vite.config.ts \u2014 tsconfig jsxImportSource is enough.")
         );
       }
     },
@@ -3238,11 +3351,17 @@ ${code}`,
     },
     buildStart() {
       mainCSSFile = findKbachCSS(root);
+      scanProjectCssSelectors();
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
     handleHotUpdate({ file, server }) {
-      if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
+      if (file.includes("node_modules")) return;
+      if (CSS_FILE_RE.test(file)) {
+        scanCssFileInto(file, projectCssClasses);
+        return;
+      }
+      if (!/\.(tsx?|jsx?)$/.test(file)) return;
       try {
         processFile(file, readFileSync(file, "utf-8"));
       } catch {

package/kbach-react.md

@@ -67,6 +67,7 @@ The `kbach()` Vite plugin scans your source files and writes generated CSS betwe
 - Runs on `buildStart` (initial load) and on every HMR file change
 - Stateless: rescans all files fresh every time — removed classes are immediately evicted
 - Output is grouped by category with CSS custom properties for theme colors
+- Also indexes every `.css`/`.scss`/`.sass`/`.less` file the same `include` dirs cover, and warns (`console.warn`, dev-server terminal, not the browser) for any class that's neither a real Kbach utility NOR defined anywhere in those stylesheets — a likely typo. Classes intentionally handled elsewhere (CSS Modules, styled-components, a third-party component's own class) are recognized once anything in the project literally defines `.that-class-name` and stay silent. Each warning prints a `file:line:column` location that terminals with clickable-link support (VS Code's included) turn into a jump-to-that-class link.
 
 ```ts
 // vite.config.ts
@@ -253,6 +254,18 @@ Mark a parent with `group`, then use `group-hover:` etc. on children.
 | `peer-hover:` | Previous sibling `.peer` is hovered |
 | `peer-focus:` | Previous sibling `.peer` is focused |
 
+**Named groups/peers** — nested groups need names to avoid an inner element
+reacting to the wrong (nearest) ancestor: `group/{name}` + `group-hover/{name}:`,
+same for `peer/{name}` + `peer-hover/{name}:`/`peer-focus/{name}:`.
+```jsx
+<div className="group/card">
+  <div className="group/icon">
+    <span className="group-hover/icon:opacity-100" />
+  </div>
+  <span className="group-hover/card:underline" />
+</div>
+```
+
 ### Pseudo-element modifiers
 ```jsx
 <div className="before:content-['*'] before:text-red-6 relative" />

package/package.json

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