@almadar/ui 4.52.0 → 4.53.1

package/dist/runtime/index.cjs

@@ -21357,12 +21357,12 @@ var init_DashboardLayout = __esm({
         HStack,
         {
           gap: "none",
-          className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
+          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
           children: [
             sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
               Box,
               {
-                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
+                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
                 onClick: () => setSidebarOpen(false)
               }
             ),
@@ -21372,7 +21372,7 @@ var init_DashboardLayout = __esm({
                 as: "aside",
                 className: cn(
                   "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
-                  "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
+                  "fixed inset-y-0 left-0 @lg/dashboard:static @lg/dashboard:translate-x-0 @lg/dashboard:h-auto",
                   "transform transition-transform duration-200 ease-in-out",
                   "flex flex-col",
                   sidebarOpen ? "translate-x-0" : "-translate-x-full"
@@ -21409,7 +21409,7 @@ var init_DashboardLayout = __esm({
                           Button,
                           {
                             variant: "ghost",
-                            className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
+                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
                             onClick: () => setSidebarOpen(false),
                             children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" })
                           }
@@ -21448,19 +21448,19 @@ var init_DashboardLayout = __esm({
                     {
                       align: "center",
                       justify: "between",
-                      className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
+                      className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           Button,
                           {
                             variant: "ghost",
-                            className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
+                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
                             onClick: () => setSidebarOpen(true),
                             "aria-label": "Open sidebar",
                             children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
                           }
                         ),
-                        searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
+                        searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden @sm/dashboard:block flex-1 min-w-0 @xl/dashboard:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
                           /* @__PURE__ */ jsxRuntime.jsx(
                             Input,
@@ -21545,12 +21545,12 @@ var init_DashboardLayout = __esm({
                                     Typography,
                                     {
                                       variant: "small",
-                                      className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
+                                      className: "hidden @sm/dashboard:block text-sm font-medium text-foreground dark:text-foreground",
                                       as: "span",
                                       children: user.name
                                     }
                                   ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
+                                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "hidden @sm/dashboard:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
                                 ]
                               }
                             ),
@@ -21607,7 +21607,7 @@ var init_DashboardLayout = __esm({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children })
             ] })
           ]
         }
@@ -28962,7 +28962,16 @@ var init_StepFlow = __esm({
             "flex items-center justify-center",
             "bg-primary text-primary-foreground"
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-primary-foreground leading-none", children: step.number ?? index + 1 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Typography,
+            {
+              as: "span",
+              variant: "small",
+              weight: "semibold",
+              className: "text-primary-foreground leading-none",
+              children: step.number ?? index + 1
+            }
+          )
         }
       );
     };
@@ -30687,64 +30696,68 @@ var init_PositionedCanvas = __esm({
         },
         [onSelect, selectEvent, eventBus]
       );
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          ref: containerRef,
-          "data-testid": "positioned-canvas",
-          className: cn(
-            "relative bg-background border border-border rounded-md overflow-hidden",
-            className
-          ),
-          style: { width, height },
-          onClick: handleContainerClick,
-          children: items.map((item) => {
-            const status = item.status ?? "empty";
-            const shape = item.shape ?? "round";
-            const isSelected = selectedId === item.id;
-            const isDragging = draggingId === item.id;
-            const statusBadge = STATUS_BADGE[status];
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              Box,
-              {
-                "data-testid": `item-node-${item.id}`,
-                "data-status": status,
-                className: cn(
-                  "absolute flex flex-col items-center justify-center gap-1 border-2 select-none",
-                  "transition-shadow",
-                  STATUS_CLASSES[status],
-                  getShapeClasses(shape),
-                  editable ? "cursor-move" : "cursor-pointer",
-                  isSelected && "outline outline-2 outline-offset-2 outline-primary shadow-md",
-                  isDragging && "shadow-lg z-10"
-                ),
-                style: { left: item.x, top: item.y, touchAction: "none" },
-                onPointerDown: (e) => handlePointerDown(e, item),
-                onPointerMove: handlePointerMove,
-                onPointerUp: (e) => handlePointerUp(e, item),
-                onPointerCancel: (e) => handlePointerUp(e, item),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-1", children: [
-                    getStatusIcon(status),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", weight: "semibold", children: item.label })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: item.partySize !== void 0 && status === "seated" ? `${item.partySize}/${item.capacity}` : `Cap ${item.capacity}` }),
-                  status === "seated" && item.serverName && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "truncate max-w-[80%]", children: item.serverName }),
-                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                    Badge,
-                    {
-                      variant: statusBadge.variant,
-                      size: "sm",
-                      className: "absolute -top-2 -right-2",
-                      children: statusBadge.label
-                    }
-                  )
-                ]
-              },
-              item.id
-            );
-          })
-        }
+      return (
+        // Outer scroll viewport: caps the visual footprint to the parent's
+        // available width on small screens. The inner plane keeps its fixed
+        // {width × height} coordinate system (items are positioned by
+        // absolute item.x/item.y), so a phone-sized viewport pans inside
+        // the larger logical canvas rather than busting the layout.
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("max-w-full overflow-auto rounded-md", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            ref: containerRef,
+            "data-testid": "positioned-canvas",
+            className: "relative bg-background border border-border rounded-md overflow-hidden",
+            style: { width, height },
+            onClick: handleContainerClick,
+            children: items.map((item) => {
+              const status = item.status ?? "empty";
+              const shape = item.shape ?? "round";
+              const isSelected = selectedId === item.id;
+              const isDragging = draggingId === item.id;
+              const statusBadge = STATUS_BADGE[status];
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  "data-testid": `item-node-${item.id}`,
+                  "data-status": status,
+                  className: cn(
+                    "absolute flex flex-col items-center justify-center gap-1 border-2 select-none",
+                    "transition-shadow",
+                    STATUS_CLASSES[status],
+                    getShapeClasses(shape),
+                    editable ? "cursor-move" : "cursor-pointer",
+                    isSelected && "outline outline-2 outline-offset-2 outline-primary shadow-md",
+                    isDragging && "shadow-lg z-10"
+                  ),
+                  style: { left: item.x, top: item.y, touchAction: "none" },
+                  onPointerDown: (e) => handlePointerDown(e, item),
+                  onPointerMove: handlePointerMove,
+                  onPointerUp: (e) => handlePointerUp(e, item),
+                  onPointerCancel: (e) => handlePointerUp(e, item),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-1", children: [
+                      getStatusIcon(status),
+                      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", weight: "semibold", children: item.label })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: item.partySize !== void 0 && status === "seated" ? `${item.partySize}/${item.capacity}` : `Cap ${item.capacity}` }),
+                    status === "seated" && item.serverName && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "truncate max-w-[80%]", children: item.serverName }),
+                    isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                      Badge,
+                      {
+                        variant: statusBadge.variant,
+                        size: "sm",
+                        className: "absolute -top-2 -right-2",
+                        children: statusBadge.label
+                      }
+                    )
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        ) })
       );
     };
     PositionedCanvas.displayName = "PositionedCanvas";

package/dist/runtime/index.js

@@ -21311,12 +21311,12 @@ var init_DashboardLayout = __esm({
         HStack,
         {
           gap: "none",
-          className: "min-h-screen w-full bg-background dark:bg-background items-stretch",
+          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
           children: [
             sidebarOpen && /* @__PURE__ */ jsx(
               Box,
               {
-                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
+                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
                 onClick: () => setSidebarOpen(false)
               }
             ),
@@ -21326,7 +21326,7 @@ var init_DashboardLayout = __esm({
                 as: "aside",
                 className: cn(
                   "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
-                  "fixed inset-y-0 left-0 lg:static lg:translate-x-0 lg:h-auto",
+                  "fixed inset-y-0 left-0 @lg/dashboard:static @lg/dashboard:translate-x-0 @lg/dashboard:h-auto",
                   "transform transition-transform duration-200 ease-in-out",
                   "flex flex-col",
                   sidebarOpen ? "translate-x-0" : "-translate-x-full"
@@ -21363,7 +21363,7 @@ var init_DashboardLayout = __esm({
                           Button,
                           {
                             variant: "ghost",
-                            className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
+                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
                             onClick: () => setSidebarOpen(false),
                             children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
                           }
@@ -21402,19 +21402,19 @@ var init_DashboardLayout = __esm({
                     {
                       align: "center",
                       justify: "between",
-                      className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
+                      className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
                       children: [
                         /* @__PURE__ */ jsx(
                           Button,
                           {
                             variant: "ghost",
-                            className: "lg:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
+                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
                             onClick: () => setSidebarOpen(true),
                             "aria-label": "Open sidebar",
                             children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
                           }
                         ),
-                        searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl:max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+                        searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden @sm/dashboard:block flex-1 min-w-0 @xl/dashboard:max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
                           /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground dark:text-muted-foreground" }),
                           /* @__PURE__ */ jsx(
                             Input,
@@ -21499,12 +21499,12 @@ var init_DashboardLayout = __esm({
                                     Typography,
                                     {
                                       variant: "small",
-                                      className: "hidden sm:block text-sm font-medium text-foreground dark:text-foreground",
+                                      className: "hidden @sm/dashboard:block text-sm font-medium text-foreground dark:text-foreground",
                                       as: "span",
                                       children: user.name
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(ChevronDown, { className: "hidden sm:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
+                                  /* @__PURE__ */ jsx(ChevronDown, { className: "hidden @sm/dashboard:block h-4 w-4 text-muted-foreground dark:text-muted-foreground" })
                                 ]
                               }
                             ),
@@ -21561,7 +21561,7 @@ var init_DashboardLayout = __esm({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
+              /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6", children })
             ] })
           ]
         }
@@ -28916,7 +28916,16 @@ var init_StepFlow = __esm({
             "flex items-center justify-center",
             "bg-primary text-primary-foreground"
           ),
-          children: /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-primary-foreground leading-none", children: step.number ?? index + 1 })
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              as: "span",
+              variant: "small",
+              weight: "semibold",
+              className: "text-primary-foreground leading-none",
+              children: step.number ?? index + 1
+            }
+          )
         }
       );
     };
@@ -30641,64 +30650,68 @@ var init_PositionedCanvas = __esm({
         },
         [onSelect, selectEvent, eventBus]
       );
-      return /* @__PURE__ */ jsx(
-        Box,
-        {
-          ref: containerRef,
-          "data-testid": "positioned-canvas",
-          className: cn(
-            "relative bg-background border border-border rounded-md overflow-hidden",
-            className
-          ),
-          style: { width, height },
-          onClick: handleContainerClick,
-          children: items.map((item) => {
-            const status = item.status ?? "empty";
-            const shape = item.shape ?? "round";
-            const isSelected = selectedId === item.id;
-            const isDragging = draggingId === item.id;
-            const statusBadge = STATUS_BADGE[status];
-            return /* @__PURE__ */ jsxs(
-              Box,
-              {
-                "data-testid": `item-node-${item.id}`,
-                "data-status": status,
-                className: cn(
-                  "absolute flex flex-col items-center justify-center gap-1 border-2 select-none",
-                  "transition-shadow",
-                  STATUS_CLASSES[status],
-                  getShapeClasses(shape),
-                  editable ? "cursor-move" : "cursor-pointer",
-                  isSelected && "outline outline-2 outline-offset-2 outline-primary shadow-md",
-                  isDragging && "shadow-lg z-10"
-                ),
-                style: { left: item.x, top: item.y, touchAction: "none" },
-                onPointerDown: (e) => handlePointerDown(e, item),
-                onPointerMove: handlePointerMove,
-                onPointerUp: (e) => handlePointerUp(e, item),
-                onPointerCancel: (e) => handlePointerUp(e, item),
-                children: [
-                  /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-1", children: [
-                    getStatusIcon(status),
-                    /* @__PURE__ */ jsx(Typography, { variant: "body2", weight: "semibold", children: item.label })
-                  ] }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: item.partySize !== void 0 && status === "seated" ? `${item.partySize}/${item.capacity}` : `Cap ${item.capacity}` }),
-                  status === "seated" && item.serverName && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "truncate max-w-[80%]", children: item.serverName }),
-                  isSelected && /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      variant: statusBadge.variant,
-                      size: "sm",
-                      className: "absolute -top-2 -right-2",
-                      children: statusBadge.label
-                    }
-                  )
-                ]
-              },
-              item.id
-            );
-          })
-        }
+      return (
+        // Outer scroll viewport: caps the visual footprint to the parent's
+        // available width on small screens. The inner plane keeps its fixed
+        // {width × height} coordinate system (items are positioned by
+        // absolute item.x/item.y), so a phone-sized viewport pans inside
+        // the larger logical canvas rather than busting the layout.
+        /* @__PURE__ */ jsx(Box, { className: cn("max-w-full overflow-auto rounded-md", className), children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: containerRef,
+            "data-testid": "positioned-canvas",
+            className: "relative bg-background border border-border rounded-md overflow-hidden",
+            style: { width, height },
+            onClick: handleContainerClick,
+            children: items.map((item) => {
+              const status = item.status ?? "empty";
+              const shape = item.shape ?? "round";
+              const isSelected = selectedId === item.id;
+              const isDragging = draggingId === item.id;
+              const statusBadge = STATUS_BADGE[status];
+              return /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  "data-testid": `item-node-${item.id}`,
+                  "data-status": status,
+                  className: cn(
+                    "absolute flex flex-col items-center justify-center gap-1 border-2 select-none",
+                    "transition-shadow",
+                    STATUS_CLASSES[status],
+                    getShapeClasses(shape),
+                    editable ? "cursor-move" : "cursor-pointer",
+                    isSelected && "outline outline-2 outline-offset-2 outline-primary shadow-md",
+                    isDragging && "shadow-lg z-10"
+                  ),
+                  style: { left: item.x, top: item.y, touchAction: "none" },
+                  onPointerDown: (e) => handlePointerDown(e, item),
+                  onPointerMove: handlePointerMove,
+                  onPointerUp: (e) => handlePointerUp(e, item),
+                  onPointerCancel: (e) => handlePointerUp(e, item),
+                  children: [
+                    /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-1", children: [
+                      getStatusIcon(status),
+                      /* @__PURE__ */ jsx(Typography, { variant: "body2", weight: "semibold", children: item.label })
+                    ] }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: item.partySize !== void 0 && status === "seated" ? `${item.partySize}/${item.capacity}` : `Cap ${item.capacity}` }),
+                    status === "seated" && item.serverName && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "truncate max-w-[80%]", children: item.serverName }),
+                    isSelected && /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: statusBadge.variant,
+                        size: "sm",
+                        className: "absolute -top-2 -right-2",
+                        children: statusBadge.label
+                      }
+                    )
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        ) })
       );
     };
     PositionedCanvas.displayName = "PositionedCanvas";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.52.0",
+  "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',
+      },
     },
   },
 };