@almadar/ui 4.22.4 → 4.24.0

package/dist/runtime/index.cjs

@@ -18144,6 +18144,7 @@ var init_DashboardLayout = __esm({
     init_Typography();
     init_Icon();
     init_useAuthContext();
+    init_useEventBus();
     init_useTranslate();
     DashboardLayout = ({
       appName = "{{APP_TITLE}}",
@@ -18151,11 +18152,29 @@ var init_DashboardLayout = __esm({
       navItems = [],
       user: userProp,
       headerActions,
-      showSearch = true,
+      showSearch = false,
+      searchEvent,
+      onSearchSubmit,
+      notifications,
+      notificationClickEvent,
+      onNotificationClick,
+      showThemeToggle = true,
       sidebarFooter,
       onSignOut: onSignOutProp,
       children
     }) => {
+      const eventBus = useEventBus();
+      const searchEnabled = showSearch || Boolean(searchEvent) || Boolean(onSearchSubmit);
+      const notificationsEnabled = Array.isArray(notifications);
+      const unreadCount = notificationsEnabled ? notifications.filter((n) => n.read !== true).length : 0;
+      const handleSearchSubmit = (value) => {
+        if (searchEvent) eventBus.emit(`UI:${searchEvent}`, { value });
+        if (onSearchSubmit) onSearchSubmit(value);
+      };
+      const handleNotificationClick = () => {
+        if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
+        if (onNotificationClick) onNotificationClick();
+      };
       const [sidebarOpen, setSidebarOpen] = React113.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React113.useState(false);
       const location = reactRouterDom.useLocation();
@@ -18236,17 +18255,7 @@ var init_DashboardLayout = __esm({
                   ))
                 }
               ),
-              sidebarFooter || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                reactRouterDom.Link,
-                {
-                  to: "/settings",
-                  className: "flex items-center gap-3 px-3 py-2 text-sm text-muted-foreground dark:text-muted-foreground rounded-lg hover:bg-muted dark:hover:bg-muted",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Settings, { className: "h-5 w-5" }),
-                    t("common.settings")
-                  ]
-                }
-              ) })
+              sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
             ]
           }
         ),
@@ -18273,32 +18282,40 @@ var init_DashboardLayout = __esm({
                         children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Menu, { className: "h-5 w-5" })
                       }
                     ),
-                    showSearch && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
+                    searchEnabled && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden sm:block flex-1 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,
                         {
                           type: "search",
                           placeholder: t("common.search"),
-                          className: "pl-10 w-full"
+                          className: "pl-10 w-full",
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                              handleSearchSubmit(e.target.value);
+                            }
+                          }
                         }
                       )
                     ] }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
                       headerActions,
-                      /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
-                      /* @__PURE__ */ jsxRuntime.jsxs(
+                      showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
+                      notificationsEnabled && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LucideIcons.Bell, { className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(
+                            unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                               Box,
                               {
                                 as: "span",
-                                className: "absolute top-1 right-1 w-2 h-2 bg-error rounded-full"
+                                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
                               }
                             )
                           ]
@@ -18363,17 +18380,6 @@ var init_DashboardLayout = __esm({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsxRuntime.jsxs(
-                              reactRouterDom.Link,
-                              {
-                                to: "/settings",
-                                className: "flex items-center gap-2 px-4 py-2 text-sm text-foreground dark:text-foreground hover:bg-muted dark:hover:bg-muted",
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Settings, { className: "h-4 w-4" }),
-                                  t("common.settings")
-                                ]
-                              }
-                            ),
                             /* @__PURE__ */ jsxRuntime.jsxs(
                               Button,
                               {
@@ -39525,6 +39531,7 @@ function prepareSchemaForPreview(input) {
 // runtime/OrbPreview.tsx
 init_logger();
 var xOrbitalLog2 = createLogger("almadar:runtime:cross-orbital");
+var navLog = createLogger("almadar:runtime:navigation");
 function normalizeChild(child) {
   if (typeof child === "string") return child;
   if (child === null || typeof child !== "object" || Array.isArray(child)) {
@@ -39600,6 +39607,19 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
   }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, embeddedTraits]);
   const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits };
   const { sendEvent } = useTraitStateMachine(traits2, uiSlots, opts);
+  const prevTraitNamesRef = React113.useRef("");
+  React113.useEffect(() => {
+    const traitNames = traits2.map((b) => b.trait?.name ?? "").filter(Boolean).sort().join(",");
+    if (prevTraitNamesRef.current && prevTraitNamesRef.current !== traitNames) {
+      navLog.info("page:trait-set-changed", {
+        from: prevTraitNamesRef.current,
+        to: traitNames,
+        action: "clearAll-slots"
+      });
+      uiSlots.clearAll();
+    }
+    prevTraitNamesRef.current = traitNames;
+  }, [traits2, uiSlots]);
   const initSentRef = React113.useRef(false);
   React113.useEffect(() => {
     if (!orbitalNames?.length) {
@@ -39614,6 +39634,10 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
     }, 5e3);
     return () => clearTimeout(fallback);
   }, [traits2, orbitalNames, sendEvent, onLocalFallback]);
+  const orbitalsKey = (orbitalNames ?? []).slice().sort().join(",");
+  React113.useEffect(() => {
+    initSentRef.current = false;
+  }, [orbitalsKey]);
   React113.useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
@@ -39854,8 +39878,19 @@ function OrbPreview({
   }, [initialPageName, currentPage]);
   const handleNavigate = React113.useCallback((path) => {
     const match = pages.find(({ page }) => page.path === path);
+    navLog.info("handleNavigate", {
+      path,
+      matched: match?.page.name ?? null,
+      availablePaths: pages.map((p2) => p2.page.path)
+    });
     if (match) {
       setCurrentPage(match.page.name);
+      if (typeof window !== "undefined") {
+        const url = new URL(window.location.href);
+        url.searchParams.set("page", path);
+        window.history.pushState({}, "", url.toString());
+        window.dispatchEvent(new PopStateEvent("popstate"));
+      }
     }
   }, [pages]);
   if (!parseResult.ok) {
@@ -39867,18 +39902,30 @@ function OrbPreview({
   const containerRef = React113.useRef(null);
   React113.useEffect(() => {
     const el = containerRef.current;
-    if (!el || pages.length <= 1) return;
+    if (!el) return;
+    if (pages.length <= 1) {
+      navLog.info("interceptor:skipped", { reason: "single-page schema", pageCount: pages.length });
+      return;
+    }
     const handler = (e) => {
       const anchor = e.target.closest("a");
       if (!anchor) return;
       const href = anchor.getAttribute("href") ?? anchor.getAttribute("to") ?? "";
-      if (!href || href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#")) return;
+      navLog.info("click:intercepted", {
+        href,
+        anchorText: anchor.textContent?.trim().slice(0, 40)
+      });
+      if (!href || href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#")) {
+        navLog.info("click:skipped", { href, reason: "external/empty/hash" });
+        return;
+      }
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
       handleNavigate(href);
     };
     el.addEventListener("click", handler, true);
+    navLog.info("interceptor:installed", { pageCount: pages.length, paths: pages.map((p2) => p2.page.path) });
     return () => el.removeEventListener("click", handler, true);
   }, [pages, handleNavigate]);
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/runtime/index.js

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons from 'lucide-react';
-import { X, AlertTriangle, Info, AlertCircle, CheckCircle, Loader2, List, Printer, ChevronRight, ChevronLeft, Check, Copy, Code, FileText, WrapText, Trash2, Settings, Menu as Menu$1, Search, Bell, ChevronDown, LogOut, ZoomOut, ZoomIn, Download, FileQuestion, Inbox, XCircle, Filter, Plus, Pause, Play, RotateCcw, Package, Calendar, Pencil, Eye, MoreHorizontal, Image as Image$1, Upload, Minus, ArrowLeft, HelpCircle, ChevronUp, Eraser, Star, TrendingUp, TrendingDown, ArrowUp, ArrowDown, MoreVertical, Sun, Moon, Circle, Clock, CheckCircle2, ArrowRight, FileWarning, SkipForward, Bug, Send, Wrench, User, Tag, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
+import { X, AlertTriangle, Info, AlertCircle, CheckCircle, Loader2, List, Printer, ChevronRight, ChevronLeft, Check, Copy, Code, FileText, WrapText, Trash2, Menu as Menu$1, Search, Bell, ChevronDown, LogOut, ZoomOut, ZoomIn, Download, FileQuestion, Inbox, XCircle, Filter, Plus, Pause, Play, RotateCcw, Package, Calendar, Pencil, Eye, MoreHorizontal, Image as Image$1, Upload, Minus, ArrowLeft, HelpCircle, ChevronUp, Eraser, Star, TrendingUp, TrendingDown, ArrowUp, ArrowDown, MoreVertical, Sun, Moon, Circle, Clock, CheckCircle2, ArrowRight, FileWarning, SkipForward, Bug, Send, Wrench, User, Tag, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { useUISlots, UISlotProvider } from '@almadar/ui/context';
 import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
@@ -18099,6 +18099,7 @@ var init_DashboardLayout = __esm({
     init_Typography();
     init_Icon();
     init_useAuthContext();
+    init_useEventBus();
     init_useTranslate();
     DashboardLayout = ({
       appName = "{{APP_TITLE}}",
@@ -18106,11 +18107,29 @@ var init_DashboardLayout = __esm({
       navItems = [],
       user: userProp,
       headerActions,
-      showSearch = true,
+      showSearch = false,
+      searchEvent,
+      onSearchSubmit,
+      notifications,
+      notificationClickEvent,
+      onNotificationClick,
+      showThemeToggle = true,
       sidebarFooter,
       onSignOut: onSignOutProp,
       children
     }) => {
+      const eventBus = useEventBus();
+      const searchEnabled = showSearch || Boolean(searchEvent) || Boolean(onSearchSubmit);
+      const notificationsEnabled = Array.isArray(notifications);
+      const unreadCount = notificationsEnabled ? notifications.filter((n) => n.read !== true).length : 0;
+      const handleSearchSubmit = (value) => {
+        if (searchEvent) eventBus.emit(`UI:${searchEvent}`, { value });
+        if (onSearchSubmit) onSearchSubmit(value);
+      };
+      const handleNotificationClick = () => {
+        if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
+        if (onNotificationClick) onNotificationClick();
+      };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
       const location = useLocation();
@@ -18191,17 +18210,7 @@ var init_DashboardLayout = __esm({
                   ))
                 }
               ),
-              sidebarFooter || /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: /* @__PURE__ */ jsxs(
-                Link,
-                {
-                  to: "/settings",
-                  className: "flex items-center gap-3 px-3 py-2 text-sm text-muted-foreground dark:text-muted-foreground rounded-lg hover:bg-muted dark:hover:bg-muted",
-                  children: [
-                    /* @__PURE__ */ jsx(Settings, { className: "h-5 w-5" }),
-                    t("common.settings")
-                  ]
-                }
-              ) })
+              sidebarFooter && /* @__PURE__ */ jsx(Box, { className: "p-4 border-t border-border dark:border-border", children: sidebarFooter })
             ]
           }
         ),
@@ -18228,32 +18237,40 @@ var init_DashboardLayout = __esm({
                         children: /* @__PURE__ */ jsx(Menu$1, { className: "h-5 w-5" })
                       }
                     ),
-                    showSearch && /* @__PURE__ */ jsx(Box, { className: "hidden sm:block flex-1 max-w-md", children: /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
+                    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"
+                          className: "pl-10 w-full",
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                              handleSearchSubmit(e.target.value);
+                            }
+                          }
                         }
                       )
                     ] }) }),
                     /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
                       headerActions,
-                      /* @__PURE__ */ jsx(ThemeToggle, {}),
-                      /* @__PURE__ */ jsxs(
+                      showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
+                      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" }),
-                            /* @__PURE__ */ jsx(
+                            unreadCount > 0 && /* @__PURE__ */ jsx(
                               Box,
                               {
                                 as: "span",
-                                className: "absolute top-1 right-1 w-2 h-2 bg-error rounded-full"
+                                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
                               }
                             )
                           ]
@@ -18318,17 +18335,6 @@ var init_DashboardLayout = __esm({
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ jsxs(
-                              Link,
-                              {
-                                to: "/settings",
-                                className: "flex items-center gap-2 px-4 py-2 text-sm text-foreground dark:text-foreground hover:bg-muted dark:hover:bg-muted",
-                                children: [
-                                  /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
-                                  t("common.settings")
-                                ]
-                              }
-                            ),
                             /* @__PURE__ */ jsxs(
                               Button,
                               {
@@ -39480,6 +39486,7 @@ function prepareSchemaForPreview(input) {
 // runtime/OrbPreview.tsx
 init_logger();
 var xOrbitalLog2 = createLogger("almadar:runtime:cross-orbital");
+var navLog = createLogger("almadar:runtime:navigation");
 function normalizeChild(child) {
   if (typeof child === "string") return child;
   if (child === null || typeof child !== "object" || Array.isArray(child)) {
@@ -39555,6 +39562,19 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
   }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, embeddedTraits]);
   const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits };
   const { sendEvent } = useTraitStateMachine(traits2, uiSlots, opts);
+  const prevTraitNamesRef = useRef("");
+  useEffect(() => {
+    const traitNames = traits2.map((b) => b.trait?.name ?? "").filter(Boolean).sort().join(",");
+    if (prevTraitNamesRef.current && prevTraitNamesRef.current !== traitNames) {
+      navLog.info("page:trait-set-changed", {
+        from: prevTraitNamesRef.current,
+        to: traitNames,
+        action: "clearAll-slots"
+      });
+      uiSlots.clearAll();
+    }
+    prevTraitNamesRef.current = traitNames;
+  }, [traits2, uiSlots]);
   const initSentRef = useRef(false);
   useEffect(() => {
     if (!orbitalNames?.length) {
@@ -39569,6 +39589,10 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
     }, 5e3);
     return () => clearTimeout(fallback);
   }, [traits2, orbitalNames, sendEvent, onLocalFallback]);
+  const orbitalsKey = (orbitalNames ?? []).slice().sort().join(",");
+  useEffect(() => {
+    initSentRef.current = false;
+  }, [orbitalsKey]);
   useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
@@ -39809,8 +39833,19 @@ function OrbPreview({
   }, [initialPageName, currentPage]);
   const handleNavigate = useCallback((path) => {
     const match = pages.find(({ page }) => page.path === path);
+    navLog.info("handleNavigate", {
+      path,
+      matched: match?.page.name ?? null,
+      availablePaths: pages.map((p2) => p2.page.path)
+    });
     if (match) {
       setCurrentPage(match.page.name);
+      if (typeof window !== "undefined") {
+        const url = new URL(window.location.href);
+        url.searchParams.set("page", path);
+        window.history.pushState({}, "", url.toString());
+        window.dispatchEvent(new PopStateEvent("popstate"));
+      }
     }
   }, [pages]);
   if (!parseResult.ok) {
@@ -39822,18 +39857,30 @@ function OrbPreview({
   const containerRef = useRef(null);
   useEffect(() => {
     const el = containerRef.current;
-    if (!el || pages.length <= 1) return;
+    if (!el) return;
+    if (pages.length <= 1) {
+      navLog.info("interceptor:skipped", { reason: "single-page schema", pageCount: pages.length });
+      return;
+    }
     const handler = (e) => {
       const anchor = e.target.closest("a");
       if (!anchor) return;
       const href = anchor.getAttribute("href") ?? anchor.getAttribute("to") ?? "";
-      if (!href || href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#")) return;
+      navLog.info("click:intercepted", {
+        href,
+        anchorText: anchor.textContent?.trim().slice(0, 40)
+      });
+      if (!href || href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#")) {
+        navLog.info("click:skipped", { href, reason: "external/empty/hash" });
+        return;
+      }
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
       handleNavigate(href);
     };
     el.addEventListener("click", handler, true);
+    navLog.info("interceptor:installed", { pageCount: pages.length, paths: pages.map((p2) => p2.page.path) });
     return () => el.removeEventListener("click", handler, true);
   }, [pages, handleNavigate]);
   return /* @__PURE__ */ jsxs(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.22.4",
+  "version": "4.24.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",