@almadar/ui 4.30.0 → 4.32.0

package/dist/runtime/index.js

@@ -17149,255 +17149,265 @@ var init_DashboardLayout = __esm({
       const user = userProp || (null);
       const { t } = useTranslate();
       const handleSignOut = onSignOutProp || authSignOut;
-      return /* @__PURE__ */ jsxs(Box, { className: "min-h-screen bg-background dark:bg-background", children: [
-        sidebarOpen && /* @__PURE__ */ jsx(
-          Box,
-          {
-            className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 lg:hidden",
-            onClick: () => setSidebarOpen(false)
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            as: "aside",
-            className: cn(
-              "fixed inset-y-0 left-0 z-30 w-64 bg-card dark:bg-card border-r border-border dark:border-border",
-              "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
-              sidebarOpen ? "translate-x-0" : "-translate-x-full"
+      return /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          gap: "none",
+          className: "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",
+                onClick: () => setSidebarOpen(false)
+              }
             ),
-            children: [
-              /* @__PURE__ */ jsxs(
-                HStack,
-                {
-                  align: "center",
-                  justify: "between",
-                  className: "h-16 px-4 border-b border-border dark:border-border",
-                  children: [
-                    /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
-                      logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "small",
-                          className: "text-white font-bold text-sm",
-                          as: "span",
-                          children: appName.charAt(0).toUpperCase()
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "label",
-                          className: "font-semibold text-foreground dark:text-foreground",
-                          as: "span",
-                          children: appName
-                        }
-                      )
-                    ] }),
-                    /* @__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",
-                        onClick: () => setSidebarOpen(false),
-                        children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                VStack,
-                {
-                  as: "nav",
-                  gap: "none",
-                  className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
-                  children: navItems.map((item) => /* @__PURE__ */ jsx(
-                    NavLink,
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                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",
+                  "transform transition-transform duration-200 ease-in-out",
+                  "flex flex-col",
+                  sidebarOpen ? "translate-x-0" : "-translate-x-full"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    HStack,
                     {
-                      item,
-                      currentPath: location.pathname
-                    },
-                    item.href
-                  ))
-                }
-              ),
-              sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(Box, { className: "lg:pl-64", children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              as: "header",
-              className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
-              children: /* @__PURE__ */ jsxs(
-                HStack,
-                {
-                  align: "center",
-                  justify: "between",
-                  className: "h-full px-4 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",
-                        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 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,
-                        {
-                          type: "search",
-                          placeholder: t("common.search"),
-                          className: "pl-10 w-full",
-                          onKeyDown: (e) => {
-                            if (e.key === "Enter") {
-                              handleSearchSubmit(e.target.value);
+                      align: "center",
+                      justify: "between",
+                      className: "h-16 px-4 border-b border-border dark:border-border",
+                      children: [
+                        /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
+                          logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "small",
+                              className: "text-white font-bold text-sm",
+                              as: "span",
+                              children: appName.charAt(0).toUpperCase()
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "label",
+                              className: "font-semibold text-foreground dark:text-foreground",
+                              as: "span",
+                              children: appName
                             }
+                          )
+                        ] }),
+                        /* @__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",
+                            onClick: () => setSidebarOpen(false),
+                            children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
                           }
-                        }
-                      )
-                    ] }) }),
-                    /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
-                      headerActions,
-                      showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
-                      topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                        Button,
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    VStack,
+                    {
+                      as: "nav",
+                      gap: "none",
+                      className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
+                      children: navItems.map((item) => /* @__PURE__ */ jsx(
+                        NavLink,
                         {
-                          variant: "ghost",
-                          className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
-                          onClick: () => handleTopBarActionClick(action.event),
-                          "aria-label": action.label ?? action.icon,
-                          children: [
-                            /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
-                            action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
-                              Box,
-                              {
-                                as: "span",
-                                className: cn(
-                                  "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
-                                  action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
-                                ),
-                                children: action.badge
-                              }
-                            )
-                          ]
+                          item,
+                          currentPath: location.pathname
                         },
-                        `${action.event}-${idx}`
-                      )),
-                      notificationsEnabled && /* @__PURE__ */ jsxs(
-                        Button,
-                        {
-                          variant: "ghost",
-                          className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
-                          onClick: handleNotificationClick,
-                          "aria-label": t("common.notifications"),
-                          children: [
-                            /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
-                            unreadCount > 0 && /* @__PURE__ */ jsx(
-                              Box,
-                              {
-                                as: "span",
-                                className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
-                                children: unreadCount > 99 ? "99+" : unreadCount
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
-                        /* @__PURE__ */ jsxs(
+                        item.href
+                      ))
+                    }
+                  ),
+                  sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "header",
+                  className: "sticky top-0 z-20 h-16 bg-card dark:bg-card border-b border-border dark:border-border",
+                  children: /* @__PURE__ */ jsxs(
+                    HStack,
+                    {
+                      align: "center",
+                      justify: "between",
+                      className: "h-full px-3 sm:px-4 gap-2 sm:gap-4",
+                      children: [
+                        /* @__PURE__ */ jsx(
                           Button,
                           {
                             variant: "ghost",
-                            className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
-                            onClick: () => setUserMenuOpen(!userMenuOpen),
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                Avatar,
-                                {
-                                  src: user.avatar,
-                                  alt: user.name,
-                                  initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
-                                  size: "sm"
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                Typography,
-                                {
-                                  variant: "small",
-                                  className: "hidden sm: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" })
-                            ]
+                            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",
+                            onClick: () => setSidebarOpen(true),
+                            "aria-label": "Open sidebar",
+                            children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
                           }
                         ),
-                        userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        searchEnabled && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 min-w-0 xl: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(
-                            Box,
+                            Input,
                             {
-                              className: "fixed inset-0 z-20",
-                              onClick: () => setUserMenuOpen(false)
+                              type: "search",
+                              placeholder: t("common.search"),
+                              className: "pl-10 w-full",
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                  handleSearchSubmit(e.target.value);
+                                }
+                              }
+                            }
+                          )
+                        ] }) }),
+                        !searchEnabled && /* @__PURE__ */ jsx(Box, { className: "flex-1" }),
+                        /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
+                          headerActions,
+                          showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
+                          topBarActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              variant: "ghost",
+                              className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
+                              onClick: () => handleTopBarActionClick(action.event),
+                              "aria-label": action.label ?? action.icon,
+                              children: [
+                                /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
+                                action.badge !== void 0 && action.badge !== null && action.badge !== 0 && action.badge !== "" && /* @__PURE__ */ jsx(
+                                  Box,
+                                  {
+                                    as: "span",
+                                    className: cn(
+                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
+                                      action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
+                                    ),
+                                    children: action.badge
+                                  }
+                                )
+                              ]
+                            },
+                            `${action.event}-${idx}`
+                          )),
+                          notificationsEnabled && /* @__PURE__ */ jsxs(
+                            Button,
+                            {
+                              variant: "ghost",
+                              className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
+                              onClick: handleNotificationClick,
+                              "aria-label": t("common.notifications"),
+                              children: [
+                                /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
+                                unreadCount > 0 && /* @__PURE__ */ jsx(
+                                  Box,
+                                  {
+                                    as: "span",
+                                    className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
+                                    children: unreadCount > 99 ? "99+" : unreadCount
+                                  }
+                                )
+                              ]
                             }
                           ),
-                          /* @__PURE__ */ jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: [
-                            /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
-                              /* @__PURE__ */ jsx(
-                                Typography,
-                                {
-                                  variant: "small",
-                                  className: "text-sm font-medium text-foreground dark:text-foreground",
-                                  as: "p",
-                                  children: user.name
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                Typography,
-                                {
-                                  variant: "caption",
-                                  className: "text-xs text-muted-foreground dark:text-muted-foreground",
-                                  as: "p",
-                                  children: user.email
-                                }
-                              )
-                            ] }),
+                          user && /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
                             /* @__PURE__ */ jsxs(
                               Button,
                               {
                                 variant: "ghost",
-                                onClick: () => {
-                                  setUserMenuOpen(false);
-                                  handleSignOut?.();
-                                },
-                                className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-error dark:text-error hover:bg-error/10 dark:hover:bg-error/20",
+                                className: "flex items-center gap-2 p-2 rounded-lg hover:bg-muted dark:hover:bg-muted",
+                                onClick: () => setUserMenuOpen(!userMenuOpen),
                                 children: [
-                                  /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
-                                  t("auth.signOut")
+                                  /* @__PURE__ */ jsx(
+                                    Avatar,
+                                    {
+                                      src: user.avatar,
+                                      alt: user.name,
+                                      initials: user.name.split(" ").map((n) => n[0]).join("").substring(0, 2),
+                                      size: "sm"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      variant: "small",
+                                      className: "hidden sm: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" })
                                 ]
                               }
-                            )
+                            ),
+                            userMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx(
+                                Box,
+                                {
+                                  className: "fixed inset-0 z-20",
+                                  onClick: () => setUserMenuOpen(false)
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(Box, { className: "absolute right-0 mt-2 w-48 bg-card dark:bg-card rounded-lg shadow-lg border border-border dark:border-border py-1 z-30", children: [
+                                /* @__PURE__ */ jsxs(Box, { className: "px-4 py-2 border-b border-border dark:border-border", children: [
+                                  /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      variant: "small",
+                                      className: "text-sm font-medium text-foreground dark:text-foreground",
+                                      as: "p",
+                                      children: user.name
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      variant: "caption",
+                                      className: "text-xs text-muted-foreground dark:text-muted-foreground",
+                                      as: "p",
+                                      children: user.email
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs(
+                                  Button,
+                                  {
+                                    variant: "ghost",
+                                    onClick: () => {
+                                      setUserMenuOpen(false);
+                                      handleSignOut?.();
+                                    },
+                                    className: "w-full flex items-center gap-2 px-4 py-2 text-sm text-error dark:text-error hover:bg-error/10 dark:hover:bg-error/20",
+                                    children: [
+                                      /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
+                                      t("auth.signOut")
+                                    ]
+                                  }
+                                )
+                              ] })
+                            ] })
                           ] })
                         ] })
-                      ] })
-                    ] })
-                  ]
+                      ]
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { as: "main", className: "p-4 sm:p-6", children })
-        ] })
-      ] });
+              ),
+              /* @__PURE__ */ jsx(Box, { as: "main", className: "flex-1 p-3 sm:p-4 md:p-6", children })
+            ] })
+          ]
+        }
+      );
     };
     DashboardLayout.displayName = "DashboardLayout";
     NavLink = ({
@@ -35352,7 +35362,7 @@ init_logger();
 
 // runtime/createClientEffectHandlers.ts
 function createClientEffectHandlers(options) {
-  const { eventBus, slotSetter, navigate, notify } = options;
+  const { eventBus, slotSetter, navigate, notify, callService } = options;
   return {
     emit: (event, payload) => {
       const prefixedEvent = event.startsWith("UI:") ? event : `UI:${event}`;
@@ -35364,9 +35374,24 @@ function createClientEffectHandlers(options) {
     set: () => {
       console.warn("[ClientEffectHandlers] set is server-side only, ignored on client");
     },
-    callService: async () => {
-      console.warn("[ClientEffectHandlers] callService is server-side only, ignored on client");
-      return {};
+    callService: async (service, action, params) => {
+      if (callService) return callService(service, action, params);
+      const mockId = `mock_${service}_${action}_${Math.random().toString(36).slice(2, 10)}`;
+      const paramsEcho = {};
+      if (params) {
+        for (const [k, v] of Object.entries(params)) {
+          if (v !== void 0 && (typeof v === "string" || typeof v === "number" || typeof v === "boolean" || v === null || v instanceof Date)) {
+            paramsEcho[k] = v;
+          }
+        }
+      }
+      return {
+        id: mockId,
+        clientSecret: `secret_${mockId}`,
+        success: true,
+        status: "succeeded",
+        ...paramsEcho
+      };
     },
     renderUI: (slot, pattern, props) => {
       if (pattern === null) {
@@ -35860,7 +35885,8 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
             }
           },
           navigate: optionsRef.current?.navigate,
-          notify: optionsRef.current?.notify
+          notify: optionsRef.current?.notify,
+          callService: optionsRef.current?.callService
         });
         const persistence = optionsRef.current?.persistence;
         let handlers = clientHandlers;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.30.0",
+  "version": "4.32.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [