@alivecss/aliveui 1.0.0 → 1.0.2

package/README.md

@@ -9,7 +9,7 @@ Modern interfaces are visually structured but temporally dead. AliveUI treats mo
 ## Install
 
 ```bash
-npm install @pratikshadake/aliveui
+npm install @alivecss/aliveui
 ```
 
 ---
@@ -23,7 +23,7 @@ Add to `postcss.config.js`:
 ```js
 module.exports = {
   plugins: {
-    '@pratikshadake/aliveui': {
+    '@alivecss/aliveui': {
       content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
     },
   },
@@ -41,19 +41,19 @@ In your CSS entry file:
 
 ```bash
 # Create config
-npx @pratikshadake/aliveui init
+npx @alivecss/aliveui init
 
 # Build once
-npx @pratikshadake/aliveui build
+npx @alivecss/aliveui build
 
 # Watch mode
-npx @pratikshadake/aliveui watch
+npx @alivecss/aliveui watch
 ```
 
 Config file (`aliveui.config.js`):
 
 ```js
-/** @type {import('@pratikshadake/aliveui').AliveUIConfig} */
+/** @type {import('@alivecss/aliveui').AliveUIConfig} */
 module.exports = {
   content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
   output: './public/alive.css',
@@ -267,7 +267,7 @@ AliveUI ships three primitive components — thin semantic wrappers for common p
 ## Configuration
 
 ```js
-/** @type {import('@pratikshadake/aliveui').AliveUIConfig} */
+/** @type {import('@alivecss/aliveui').AliveUIConfig} */
 module.exports = {
   content: ['./src/**/*.{html,jsx,tsx}'],
   output: './public/alive.css',

package/dist/cli.js

@@ -587,6 +587,42 @@ function generateBase(_config) {
   box-sizing: border-box;
 }
 
+html {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
 /* \u2500\u2500 Design tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 :root {
   /* Motion durations */
@@ -2672,9 +2708,23 @@ function matchTypography(cls, fontSize, fontWeight, lineHeight) {
 }
 
 // src/generator/layout.ts
-function generateLayout(classes, _config) {
+function has2(obj, key) {
+  return typeof obj[key] === "string";
+}
+function generateLayout(classes, config) {
+  const { spacing } = config.theme;
   const rules = [];
   for (const cls of classes) {
+    const spaceYMatch = cls.match(/^space-y-(.+)$/);
+    if (spaceYMatch && has2(spacing, spaceYMatch[1])) {
+      rules.push(`.${escapeSelector(cls)} > * + * { margin-top: ${spacing[spaceYMatch[1]]}; }`);
+      continue;
+    }
+    const spaceXMatch = cls.match(/^space-x-(.+)$/);
+    if (spaceXMatch && has2(spacing, spaceXMatch[1])) {
+      rules.push(`.${escapeSelector(cls)} > * + * { margin-left: ${spacing[spaceXMatch[1]]}; }`);
+      continue;
+    }
     const generated = matchLayout(cls);
     if (generated) rules.push(generated);
   }
@@ -2717,6 +2767,10 @@ function matchLayout(cls) {
   if (cls === "flex-grow-0") return `.${cls} { flex-grow: 0; }`;
   if (cls === "flex-shrink") return `.${cls} { flex-shrink: 1; }`;
   if (cls === "flex-shrink-0") return `.${cls} { flex-shrink: 0; }`;
+  if (cls === "grow") return `.${cls} { flex-grow: 1; }`;
+  if (cls === "grow-0") return `.${cls} { flex-grow: 0; }`;
+  if (cls === "shrink") return `.${cls} { flex-shrink: 1; }`;
+  if (cls === "shrink-0") return `.${cls} { flex-shrink: 0; }`;
   if (cls === "items-start") return `.${cls} { align-items: flex-start; }`;
   if (cls === "items-end") return `.${cls} { align-items: flex-end; }`;
   if (cls === "items-center") return `.${cls} { align-items: center; }`;
@@ -2893,7 +2947,7 @@ function matchLayout(cls) {
 }
 
 // src/generator/sizing.ts
-function has2(obj, key) {
+function has3(obj, key) {
   return typeof obj[key] === "string";
 }
 function generateSizing(classes, config) {
@@ -2944,8 +2998,8 @@ function matchSizing(cls, spacing) {
     if (key === "min") return `.${cls} { width: min-content; }`;
     if (key === "max") return `.${cls} { width: max-content; }`;
     if (key === "fit") return `.${cls} { width: fit-content; }`;
-    if (has2(fractions, key)) return `.${cls} { width: ${fractions[key]}; }`;
-    if (has2(spacing, key)) return `.${cls} { width: ${spacing[key]}; }`;
+    if (has3(fractions, key)) return `.${cls} { width: ${fractions[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { width: ${spacing[key]}; }`;
   }
   const minWMatch = cls.match(/^min-w-(.+)$/);
   if (minWMatch) {
@@ -2955,7 +3009,7 @@ function matchSizing(cls, spacing) {
     if (key === "min") return `.${cls} { min-width: min-content; }`;
     if (key === "max") return `.${cls} { min-width: max-content; }`;
     if (key === "fit") return `.${cls} { min-width: fit-content; }`;
-    if (has2(spacing, key)) return `.${cls} { min-width: ${spacing[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { min-width: ${spacing[key]}; }`;
   }
   const maxWMap = {
     none: "none",
@@ -2982,7 +3036,7 @@ function matchSizing(cls, spacing) {
     "screen-2xl": "1536px"
   };
   const maxWMatch = cls.match(/^max-w-(.+)$/);
-  if (maxWMatch && has2(maxWMap, maxWMatch[1])) {
+  if (maxWMatch && has3(maxWMap, maxWMatch[1])) {
     return `.${cls} { max-width: ${maxWMap[maxWMatch[1]]}; }`;
   }
   const hMatch = cls.match(/^h-(.+)$/);
@@ -2996,8 +3050,8 @@ function matchSizing(cls, spacing) {
     if (key === "min") return `.${cls} { height: min-content; }`;
     if (key === "max") return `.${cls} { height: max-content; }`;
     if (key === "fit") return `.${cls} { height: fit-content; }`;
-    if (has2(fractions, key)) return `.${cls} { height: ${fractions[key]}; }`;
-    if (has2(spacing, key)) return `.${cls} { height: ${spacing[key]}; }`;
+    if (has3(fractions, key)) return `.${cls} { height: ${fractions[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { height: ${spacing[key]}; }`;
   }
   const minHMatch = cls.match(/^min-h-(.+)$/);
   if (minHMatch) {
@@ -3008,7 +3062,7 @@ function matchSizing(cls, spacing) {
     if (key === "svh") return `.${cls} { min-height: 100svh; }`;
     if (key === "dvh") return `.${cls} { min-height: 100dvh; }`;
     if (key === "fit") return `.${cls} { min-height: fit-content; }`;
-    if (has2(spacing, key)) return `.${cls} { min-height: ${spacing[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { min-height: ${spacing[key]}; }`;
   }
   const maxHMatch = cls.match(/^max-h-(.+)$/);
   if (maxHMatch) {
@@ -3019,13 +3073,22 @@ function matchSizing(cls, spacing) {
     if (key === "svh") return `.${cls} { max-height: 100svh; }`;
     if (key === "dvh") return `.${cls} { max-height: 100dvh; }`;
     if (key === "fit") return `.${cls} { max-height: fit-content; }`;
-    if (has2(spacing, key)) return `.${cls} { max-height: ${spacing[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { max-height: ${spacing[key]}; }`;
+  }
+  const basisMatch = cls.match(/^basis-(.+)$/);
+  if (basisMatch) {
+    const key = basisMatch[1];
+    if (key === "auto") return `.${cls} { flex-basis: auto; }`;
+    if (key === "full") return `.${cls} { flex-basis: 100%; }`;
+    if (key === "0") return `.${cls} { flex-basis: 0px; }`;
+    if (has3(fractions, key)) return `.${cls} { flex-basis: ${fractions[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { flex-basis: ${spacing[key]}; }`;
   }
   return null;
 }
 
 // src/generator/effects.ts
-function has3(obj, key) {
+function has4(obj, key) {
   return typeof obj[key] === "string";
 }
 function generateEffects(classes, config) {
@@ -3039,7 +3102,7 @@ function generateEffects(classes, config) {
 }
 function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
   const opacityMatch = cls.match(/^opacity-(.+)$/);
-  if (opacityMatch && has3(opacity, opacityMatch[1])) {
+  if (opacityMatch && has4(opacity, opacityMatch[1])) {
     return `.${cls} {
   opacity: ${opacity[opacityMatch[1]]};
   transition-property: opacity;
@@ -3048,47 +3111,47 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
 }`;
   }
   const zMatch = cls.match(/^z-(.+)$/);
-  if (zMatch && has3(zIndex, zMatch[1])) {
+  if (zMatch && has4(zIndex, zMatch[1])) {
     return `.${cls} { z-index: ${zIndex[zMatch[1]]}; }`;
   }
   const shadowMatch = cls.match(/^shadow(?:-(.+))?$/);
   if (shadowMatch) {
     const key = shadowMatch[1] ?? "DEFAULT";
-    if (has3(boxShadow, key)) {
+    if (has4(boxShadow, key)) {
       return `.${cls} { box-shadow: ${boxShadow[key]}; }`;
     }
-    if (!shadowMatch[1] && has3(boxShadow, "DEFAULT")) {
+    if (!shadowMatch[1] && has4(boxShadow, "DEFAULT")) {
       return `.${cls} { box-shadow: ${boxShadow["DEFAULT"]}; }`;
     }
   }
   const roundedMatch = cls.match(/^rounded(?:-(.+))?$/);
   if (roundedMatch) {
     const key = roundedMatch[1] ?? "DEFAULT";
-    if (has3(borderRadius, key)) return `.${cls} { border-radius: ${borderRadius[key]}; }`;
-    if (!roundedMatch[1] && has3(borderRadius, "DEFAULT")) return `.${cls} { border-radius: ${borderRadius["DEFAULT"]}; }`;
+    if (has4(borderRadius, key)) return `.${cls} { border-radius: ${borderRadius[key]}; }`;
+    if (!roundedMatch[1] && has4(borderRadius, "DEFAULT")) return `.${cls} { border-radius: ${borderRadius["DEFAULT"]}; }`;
   }
   const roundedTMatch = cls.match(/^rounded-t(?:-(.+))?$/);
   if (roundedTMatch) {
     const rkey = roundedTMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-top-left-radius: ${val}; border-top-right-radius: ${val}; }`;
   }
   const roundedBMatch = cls.match(/^rounded-b(?:-(.+))?$/);
   if (roundedBMatch) {
     const rkey = roundedBMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-bottom-left-radius: ${val}; border-bottom-right-radius: ${val}; }`;
   }
   const roundedLMatch = cls.match(/^rounded-l(?:-(.+))?$/);
   if (roundedLMatch) {
     const rkey = roundedLMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-top-left-radius: ${val}; border-bottom-left-radius: ${val}; }`;
   }
   const roundedRMatch = cls.match(/^rounded-r(?:-(.+))?$/);
   if (roundedRMatch) {
     const rkey = roundedRMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-top-right-radius: ${val}; border-bottom-right-radius: ${val}; }`;
   }
   if (cls === "border") return `.${cls} { border-width: 1px; border-style: solid; }`;
@@ -3142,15 +3205,15 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
     "150": "1.5"
   };
   const scaleMatch = cls.match(/^scale-(\d+)$/);
-  if (scaleMatch && has3(scaleMap, scaleMatch[1])) {
+  if (scaleMatch && has4(scaleMap, scaleMatch[1])) {
     return `.${cls} { transform: scale(${scaleMap[scaleMatch[1]]}); }`;
   }
   const scaleXMatch = cls.match(/^scale-x-(\d+)$/);
-  if (scaleXMatch && has3(scaleMap, scaleXMatch[1])) {
+  if (scaleXMatch && has4(scaleMap, scaleXMatch[1])) {
     return `.${cls} { transform: scaleX(${scaleMap[scaleXMatch[1]]}); }`;
   }
   const scaleYMatch = cls.match(/^scale-y-(\d+)$/);
-  if (scaleYMatch && has3(scaleMap, scaleYMatch[1])) {
+  if (scaleYMatch && has4(scaleMap, scaleYMatch[1])) {
     return `.${cls} { transform: scaleY(${scaleMap[scaleYMatch[1]]}); }`;
   }
   const rotateMatch = cls.match(/^-?rotate-(\d+)$/);
@@ -3193,7 +3256,7 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
       "3xl": "64px"
     };
     const key = blurMatch[1] ?? "DEFAULT";
-    if (has3(blurMap, key)) return `.${cls} { filter: blur(${blurMap[key]}); }`;
+    if (has4(blurMap, key)) return `.${cls} { filter: blur(${blurMap[key]}); }`;
   }
   const backdropBlurMatch = cls.match(/^backdrop-blur(?:-(.+))?$/);
   if (backdropBlurMatch) {
@@ -3208,7 +3271,7 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
       "3xl": "64px"
     };
     const key = backdropBlurMatch[1] ?? "DEFAULT";
-    if (has3(blurMap, key)) return `.${cls} { backdrop-filter: blur(${blurMap[key]}); }`;
+    if (has4(blurMap, key)) return `.${cls} { backdrop-filter: blur(${blurMap[key]}); }`;
   }
   const arbOpacityMatch = cls.match(/^opacity-\[(.+)\]$/);
   if (arbOpacityMatch) {

package/dist/index.js

@@ -595,6 +595,42 @@ function generateBase(_config) {
   box-sizing: border-box;
 }
 
+html {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
 /* \u2500\u2500 Design tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 :root {
   /* Motion durations */
@@ -2680,9 +2716,23 @@ function matchTypography(cls, fontSize, fontWeight, lineHeight) {
 }
 
 // src/generator/layout.ts
-function generateLayout(classes, _config) {
+function has2(obj, key) {
+  return typeof obj[key] === "string";
+}
+function generateLayout(classes, config) {
+  const { spacing } = config.theme;
   const rules = [];
   for (const cls of classes) {
+    const spaceYMatch = cls.match(/^space-y-(.+)$/);
+    if (spaceYMatch && has2(spacing, spaceYMatch[1])) {
+      rules.push(`.${escapeSelector(cls)} > * + * { margin-top: ${spacing[spaceYMatch[1]]}; }`);
+      continue;
+    }
+    const spaceXMatch = cls.match(/^space-x-(.+)$/);
+    if (spaceXMatch && has2(spacing, spaceXMatch[1])) {
+      rules.push(`.${escapeSelector(cls)} > * + * { margin-left: ${spacing[spaceXMatch[1]]}; }`);
+      continue;
+    }
     const generated = matchLayout(cls);
     if (generated) rules.push(generated);
   }
@@ -2725,6 +2775,10 @@ function matchLayout(cls) {
   if (cls === "flex-grow-0") return `.${cls} { flex-grow: 0; }`;
   if (cls === "flex-shrink") return `.${cls} { flex-shrink: 1; }`;
   if (cls === "flex-shrink-0") return `.${cls} { flex-shrink: 0; }`;
+  if (cls === "grow") return `.${cls} { flex-grow: 1; }`;
+  if (cls === "grow-0") return `.${cls} { flex-grow: 0; }`;
+  if (cls === "shrink") return `.${cls} { flex-shrink: 1; }`;
+  if (cls === "shrink-0") return `.${cls} { flex-shrink: 0; }`;
   if (cls === "items-start") return `.${cls} { align-items: flex-start; }`;
   if (cls === "items-end") return `.${cls} { align-items: flex-end; }`;
   if (cls === "items-center") return `.${cls} { align-items: center; }`;
@@ -2901,7 +2955,7 @@ function matchLayout(cls) {
 }
 
 // src/generator/sizing.ts
-function has2(obj, key) {
+function has3(obj, key) {
   return typeof obj[key] === "string";
 }
 function generateSizing(classes, config) {
@@ -2952,8 +3006,8 @@ function matchSizing(cls, spacing) {
     if (key === "min") return `.${cls} { width: min-content; }`;
     if (key === "max") return `.${cls} { width: max-content; }`;
     if (key === "fit") return `.${cls} { width: fit-content; }`;
-    if (has2(fractions, key)) return `.${cls} { width: ${fractions[key]}; }`;
-    if (has2(spacing, key)) return `.${cls} { width: ${spacing[key]}; }`;
+    if (has3(fractions, key)) return `.${cls} { width: ${fractions[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { width: ${spacing[key]}; }`;
   }
   const minWMatch = cls.match(/^min-w-(.+)$/);
   if (minWMatch) {
@@ -2963,7 +3017,7 @@ function matchSizing(cls, spacing) {
     if (key === "min") return `.${cls} { min-width: min-content; }`;
     if (key === "max") return `.${cls} { min-width: max-content; }`;
     if (key === "fit") return `.${cls} { min-width: fit-content; }`;
-    if (has2(spacing, key)) return `.${cls} { min-width: ${spacing[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { min-width: ${spacing[key]}; }`;
   }
   const maxWMap = {
     none: "none",
@@ -2990,7 +3044,7 @@ function matchSizing(cls, spacing) {
     "screen-2xl": "1536px"
   };
   const maxWMatch = cls.match(/^max-w-(.+)$/);
-  if (maxWMatch && has2(maxWMap, maxWMatch[1])) {
+  if (maxWMatch && has3(maxWMap, maxWMatch[1])) {
     return `.${cls} { max-width: ${maxWMap[maxWMatch[1]]}; }`;
   }
   const hMatch = cls.match(/^h-(.+)$/);
@@ -3004,8 +3058,8 @@ function matchSizing(cls, spacing) {
     if (key === "min") return `.${cls} { height: min-content; }`;
     if (key === "max") return `.${cls} { height: max-content; }`;
     if (key === "fit") return `.${cls} { height: fit-content; }`;
-    if (has2(fractions, key)) return `.${cls} { height: ${fractions[key]}; }`;
-    if (has2(spacing, key)) return `.${cls} { height: ${spacing[key]}; }`;
+    if (has3(fractions, key)) return `.${cls} { height: ${fractions[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { height: ${spacing[key]}; }`;
   }
   const minHMatch = cls.match(/^min-h-(.+)$/);
   if (minHMatch) {
@@ -3016,7 +3070,7 @@ function matchSizing(cls, spacing) {
     if (key === "svh") return `.${cls} { min-height: 100svh; }`;
     if (key === "dvh") return `.${cls} { min-height: 100dvh; }`;
     if (key === "fit") return `.${cls} { min-height: fit-content; }`;
-    if (has2(spacing, key)) return `.${cls} { min-height: ${spacing[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { min-height: ${spacing[key]}; }`;
   }
   const maxHMatch = cls.match(/^max-h-(.+)$/);
   if (maxHMatch) {
@@ -3027,13 +3081,22 @@ function matchSizing(cls, spacing) {
     if (key === "svh") return `.${cls} { max-height: 100svh; }`;
     if (key === "dvh") return `.${cls} { max-height: 100dvh; }`;
     if (key === "fit") return `.${cls} { max-height: fit-content; }`;
-    if (has2(spacing, key)) return `.${cls} { max-height: ${spacing[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { max-height: ${spacing[key]}; }`;
+  }
+  const basisMatch = cls.match(/^basis-(.+)$/);
+  if (basisMatch) {
+    const key = basisMatch[1];
+    if (key === "auto") return `.${cls} { flex-basis: auto; }`;
+    if (key === "full") return `.${cls} { flex-basis: 100%; }`;
+    if (key === "0") return `.${cls} { flex-basis: 0px; }`;
+    if (has3(fractions, key)) return `.${cls} { flex-basis: ${fractions[key]}; }`;
+    if (has3(spacing, key)) return `.${cls} { flex-basis: ${spacing[key]}; }`;
   }
   return null;
 }
 
 // src/generator/effects.ts
-function has3(obj, key) {
+function has4(obj, key) {
   return typeof obj[key] === "string";
 }
 function generateEffects(classes, config) {
@@ -3047,7 +3110,7 @@ function generateEffects(classes, config) {
 }
 function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
   const opacityMatch = cls.match(/^opacity-(.+)$/);
-  if (opacityMatch && has3(opacity, opacityMatch[1])) {
+  if (opacityMatch && has4(opacity, opacityMatch[1])) {
     return `.${cls} {
   opacity: ${opacity[opacityMatch[1]]};
   transition-property: opacity;
@@ -3056,47 +3119,47 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
 }`;
   }
   const zMatch = cls.match(/^z-(.+)$/);
-  if (zMatch && has3(zIndex, zMatch[1])) {
+  if (zMatch && has4(zIndex, zMatch[1])) {
     return `.${cls} { z-index: ${zIndex[zMatch[1]]}; }`;
   }
   const shadowMatch = cls.match(/^shadow(?:-(.+))?$/);
   if (shadowMatch) {
     const key = shadowMatch[1] ?? "DEFAULT";
-    if (has3(boxShadow, key)) {
+    if (has4(boxShadow, key)) {
       return `.${cls} { box-shadow: ${boxShadow[key]}; }`;
     }
-    if (!shadowMatch[1] && has3(boxShadow, "DEFAULT")) {
+    if (!shadowMatch[1] && has4(boxShadow, "DEFAULT")) {
       return `.${cls} { box-shadow: ${boxShadow["DEFAULT"]}; }`;
     }
   }
   const roundedMatch = cls.match(/^rounded(?:-(.+))?$/);
   if (roundedMatch) {
     const key = roundedMatch[1] ?? "DEFAULT";
-    if (has3(borderRadius, key)) return `.${cls} { border-radius: ${borderRadius[key]}; }`;
-    if (!roundedMatch[1] && has3(borderRadius, "DEFAULT")) return `.${cls} { border-radius: ${borderRadius["DEFAULT"]}; }`;
+    if (has4(borderRadius, key)) return `.${cls} { border-radius: ${borderRadius[key]}; }`;
+    if (!roundedMatch[1] && has4(borderRadius, "DEFAULT")) return `.${cls} { border-radius: ${borderRadius["DEFAULT"]}; }`;
   }
   const roundedTMatch = cls.match(/^rounded-t(?:-(.+))?$/);
   if (roundedTMatch) {
     const rkey = roundedTMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-top-left-radius: ${val}; border-top-right-radius: ${val}; }`;
   }
   const roundedBMatch = cls.match(/^rounded-b(?:-(.+))?$/);
   if (roundedBMatch) {
     const rkey = roundedBMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-bottom-left-radius: ${val}; border-bottom-right-radius: ${val}; }`;
   }
   const roundedLMatch = cls.match(/^rounded-l(?:-(.+))?$/);
   if (roundedLMatch) {
     const rkey = roundedLMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-top-left-radius: ${val}; border-bottom-left-radius: ${val}; }`;
   }
   const roundedRMatch = cls.match(/^rounded-r(?:-(.+))?$/);
   if (roundedRMatch) {
     const rkey = roundedRMatch[1] ?? "DEFAULT";
-    const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
+    const val = has4(borderRadius, rkey) ? borderRadius[rkey] : has4(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
     if (val) return `.${cls} { border-top-right-radius: ${val}; border-bottom-right-radius: ${val}; }`;
   }
   if (cls === "border") return `.${cls} { border-width: 1px; border-style: solid; }`;
@@ -3150,15 +3213,15 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
     "150": "1.5"
   };
   const scaleMatch = cls.match(/^scale-(\d+)$/);
-  if (scaleMatch && has3(scaleMap, scaleMatch[1])) {
+  if (scaleMatch && has4(scaleMap, scaleMatch[1])) {
     return `.${cls} { transform: scale(${scaleMap[scaleMatch[1]]}); }`;
   }
   const scaleXMatch = cls.match(/^scale-x-(\d+)$/);
-  if (scaleXMatch && has3(scaleMap, scaleXMatch[1])) {
+  if (scaleXMatch && has4(scaleMap, scaleXMatch[1])) {
     return `.${cls} { transform: scaleX(${scaleMap[scaleXMatch[1]]}); }`;
   }
   const scaleYMatch = cls.match(/^scale-y-(\d+)$/);
-  if (scaleYMatch && has3(scaleMap, scaleYMatch[1])) {
+  if (scaleYMatch && has4(scaleMap, scaleYMatch[1])) {
     return `.${cls} { transform: scaleY(${scaleMap[scaleYMatch[1]]}); }`;
   }
   const rotateMatch = cls.match(/^-?rotate-(\d+)$/);
@@ -3201,7 +3264,7 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
       "3xl": "64px"
     };
     const key = blurMatch[1] ?? "DEFAULT";
-    if (has3(blurMap, key)) return `.${cls} { filter: blur(${blurMap[key]}); }`;
+    if (has4(blurMap, key)) return `.${cls} { filter: blur(${blurMap[key]}); }`;
   }
   const backdropBlurMatch = cls.match(/^backdrop-blur(?:-(.+))?$/);
   if (backdropBlurMatch) {
@@ -3216,7 +3279,7 @@ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
       "3xl": "64px"
     };
     const key = backdropBlurMatch[1] ?? "DEFAULT";
-    if (has3(blurMap, key)) return `.${cls} { backdrop-filter: blur(${blurMap[key]}); }`;
+    if (has4(blurMap, key)) return `.${cls} { backdrop-filter: blur(${blurMap[key]}); }`;
   }
   const arbOpacityMatch = cls.match(/^opacity-\[(.+)\]$/);
   if (arbOpacityMatch) {
@@ -3721,14 +3784,23 @@ var aliveui = (userConfig = {}) => {
     postcssPlugin: "aliveui",
     async Once(root, { result, postcss }) {
       const classes = await scanContent(config);
+      const hasAliveDirective = root.some((node) => node.type === "atrule" && node.name === "aliveui");
+      if (hasAliveDirective) {
+        const layerDecl = postcss.atRule({ name: "layer", params: "aliveui.base, aliveui.utilities" });
+        root.prepend(layerDecl);
+      }
       root.walkAtRules("aliveui", (atRule) => {
         const param = atRule.params.trim();
         if (param === "base") {
-          const css = generateBase(config);
+          const css = `@layer aliveui.base {
+${generateBase(config)}
+}`;
           const parsed = postcss.parse(css, { from: atRule.source?.input.file });
           atRule.replaceWith(parsed.nodes);
         } else if (param === "utilities") {
-          const css = generateUtilities(classes, config);
+          const css = `@layer aliveui.utilities {
+${generateUtilities(classes, config)}
+}`;
           const parsed = postcss.parse(css, { from: atRule.source?.input.file });
           atRule.replaceWith(parsed.nodes);
         } else {