@almadar/ui 4.51.16 → 4.53.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.51.16",
+  "version": "4.53.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -130,6 +130,7 @@
   },
   "dependencies": {
     "@almadar/core": ">=7.13.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@almadar/evaluator": ">=2.9.2",
     "@almadar/logger": "^1.3.0",
     "@almadar/patterns": "^2.26.0",

package/tailwind-preset.cjs

@@ -13,9 +13,12 @@
  *   presets: [require('@almadar/ui/tailwind-preset')]
  */
 
+const containerQueries = require('@tailwindcss/container-queries');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: 'class',
+  plugins: [containerQueries],
   safelist: [
   // Standard utilities used via dynamic className from .orb schemas
   'p-4', 'p-6', 'p-8',
@@ -330,6 +333,19 @@ module.exports = {
         normal: 'var(--transition-normal, 250ms)',
         slow: 'var(--transition-slow, 400ms)',
       },
+      // Container-query breakpoints aligned 1:1 with Tailwind's default
+      // viewport breakpoints (sm 640 / md 768 / lg 1024 / xl 1280 /
+      // 2xl 1536). Lets components use `@lg/foo:hidden` as a drop-in
+      // replacement for `lg:hidden` when they're rendered inside a
+      // CSS Container (the Studio preview, embedded iframes, etc.) so
+      // the layout responds to the container's width, not the viewport.
+      containers: {
+        sm: '40rem',
+        md: '48rem',
+        lg: '64rem',
+        xl: '80rem',
+        '2xl': '96rem',
+      },
     },
   },
 };