@djangocfg/layouts 1.4.13 → 1.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.4.13",
+  "version": "1.4.16",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.13",
-    "@djangocfg/og-image": "^1.4.13",
-    "@djangocfg/ui": "^1.4.13",
+    "@djangocfg/api": "^1.4.16",
+    "@djangocfg/og-image": "^1.4.16",
+    "@djangocfg/ui": "^1.4.16",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.13",
+    "@djangocfg/typescript-config": "^1.4.16",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/UserMenu.tsx

@@ -240,14 +240,14 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
                 <>
                   {/* Backdrop */}
                   <div
-                    className="fixed inset-0 z-[9995] bg-transparent"
+                    className="fixed inset-0 z-9995 bg-transparent"
                     onClick={closeUserMenu}
                     aria-hidden="true"
                     style={{ cursor: 'default' }}
                   />
                   {/* Dropdown */}
                   <div
-                    className="absolute top-full right-0 mt-2 w-52 rounded-sm shadow-sm backdrop-blur-xl z-[9996] bg-popover border border-border"
+                    className="absolute top-full right-0 mt-2 w-52 rounded-sm shadow-sm backdrop-blur-xl z-9996 bg-popover border border-border"
                     role="menu"
                     aria-label="User menu"
                   >

package/src/layouts/AppLayout/layouts/PublicLayout/components/MobileDrawer.tsx

@@ -87,16 +87,17 @@ export function MobileDrawer() {
     <>
       {/* Backdrop with fade animation */}
       <div
-        className={`fixed inset-0 z-[150] bg-black/50 backdrop-blur-sm transition-opacity duration-300 ease-in-out lg:hidden ${
+        className={`fixed inset-0 z-150 backdrop-blur-sm transition-opacity duration-300 ease-in-out lg:hidden ${
           isOpen ? 'opacity-100' : 'opacity-0'
         }`}
+        style={{ backgroundColor: 'rgb(0 0 0 / 0.5)' }}
         onClick={handleClose}
         aria-hidden="true"
       />
 
       {/* Menu Content with slide animation */}
       <div
-        className={`fixed top-0 right-0 bottom-0 w-80 z-[200] bg-popover border-l border-border shadow-2xl transition-transform duration-300 ease-in-out lg:hidden ${
+        className={`fixed top-0 right-0 bottom-0 w-80 z-200 bg-popover border-l border-border shadow-2xl transition-transform duration-300 ease-in-out lg:hidden ${
           isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
         role="dialog"

package/src/layouts/AppLayout/layouts/PublicLayout/components/Navigation.tsx

@@ -45,7 +45,7 @@ export function Navigation() {
   const { app, publicLayout } = config;
 
   return (
-    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-[100] bg-background/80 border-border/30 isolate">
+    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-100 isolate" style={{ backgroundColor: 'hsl(var(--background) / 0.8)', borderColor: 'hsl(var(--border) / 0.3)' }}>
       <div className="w-full px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between py-2 min-h-[40px]">
           {/* Left side - Logo and Navigation Menu */}

package/src/layouts/UILayout/components/layout/MobileOverlay/MobileOverlay.tsx

@@ -35,9 +35,10 @@ export function MobileOverlay({ isOpen = false, onClose }: MobileOverlayProps) {
   return createPortal(
     <div
       className={cn(
-        'fixed inset-0 bg-black/50 z-[150] transition-opacity duration-300',
+        'fixed inset-0 z-150 transition-opacity duration-300',
         isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
       )}
+      style={{ backgroundColor: 'rgb(0 0 0 / 0.5)' }}
       onClick={onClose}
       aria-hidden="true"
     />,

package/src/layouts/UILayout/components/layout/Sidebar/Sidebar.tsx

@@ -76,7 +76,7 @@ export function Sidebar({
   return createPortal(
     <aside
       className={cn(
-        'fixed inset-y-0 left-0 w-64 z-[200] bg-background border-r shadow-lg transition-transform duration-300',
+        'fixed inset-y-0 left-0 w-64 z-200 bg-background border-r shadow-lg transition-transform duration-300',
         isOpen ? 'translate-x-0' : '-translate-x-full'
       )}
     >

package/src/layouts/UILayout/config/tailwind.config.ts

@@ -30,10 +30,13 @@ export const TAILWIND_GUIDE: TailwindGuide = {
     "Use standard Tailwind classes only: py-16 sm:py-20 md:py-24 lg:py-32",
     "Responsive patterns: px-4 sm:px-6 lg:px-8",
     "Container pattern: container max-w-7xl mx-auto",
-    "IMPORTANT: Arbitrary values like h-[80px] may NOT work in v4 due to changed syntax",
+    "IMPORTANT: Arbitrary values like h-[80px], z-[100] may NOT work in v4 - define tokens in @theme instead",
     "For fixed sizes: Use inline styles style={{ width: '80px', height: '80px' }} - always reliable",
-    "Spacing utilities (h-20, p-4, etc.) require --spacing-* variables defined in @theme block before Tailwind import",
-    "Import order is critical but hard to fix: changing order breaks other styles",
+    "Spacing utilities (h-20, p-4, etc.) require --spacing-* variables defined in @theme block",
+    "Z-index utilities (z-50, z-100) require --z-* variables defined in @theme block",
+    "OPACITY MODIFIERS: bg-background/80 does NOT work with HSL colors in v4! Use inline styles: style={{ backgroundColor: 'hsl(var(--background) / 0.8)' }}",
+    "Border opacity: border-border/30 does NOT work - use style={{ borderColor: 'hsl(var(--border) / 0.3)' }}",
+    "Import order is critical: theme variables MUST come before @import 'tailwindcss'",
     "Use aspect-square for maintaining 1:1 ratio (circles, squares)",
     "Use overflow-hidden with rounded-full for perfect circles",
     "Avoid custom utilities like: section-padding, animate-*, shadow-brand",
@@ -89,6 +92,40 @@ export const TAILWIND_GUIDE: TailwindGuide = {
       code: `<button className="px-6 py-3 bg-primary text-primary-foreground rounded-md shadow-lg hover:shadow-xl transition-all duration-300">
   Click me
 </button>`
+    },
+    {
+      title: "Z-Index Theme Tokens",
+      description: "Define z-index values in @theme for z-50, z-100 to work",
+      code: `@theme {
+  --z-0: 0;
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+  --z-100: 100;
+  --z-auto: auto;
+}
+
+/* Now z-50, z-100 classes work */
+<nav className="sticky top-0 z-100">...</nav>`
+    },
+    {
+      title: "Opacity with HSL Colors (BROKEN in v4)",
+      description: "bg-background/80 does NOT work with HSL - use inline styles",
+      code: `/* ❌ BROKEN - does not work in Tailwind v4 */
+<nav className="bg-background/80 border-border/30">
+
+/* ✅ WORKING - use inline styles for opacity */
+<nav
+  className="sticky top-0 z-100 backdrop-blur-xl"
+  style={{
+    backgroundColor: 'hsl(var(--background) / 0.8)',
+    borderColor: 'hsl(var(--border) / 0.3)'
+  }}
+>
+  ...
+</nav>`
     }
   ]
 };

package/src/snippets/Chat/ChatWidget.tsx

@@ -225,7 +225,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
     const mobileContent = (
       <>
         <div
-          className={`fixed inset-0 z-[9999] bg-background ${
+          className={`fixed inset-0 z-9999 bg-background ${
             uiState.isOpen ? 'block' : 'hidden'
           } ${className}`}
         >