@almadar/ui 4.26.0 → 4.28.0

package/dist/avl/index.cjs

@@ -41,6 +41,7 @@ var postprocessing = require('@react-three/postprocessing');
 var patterns = require('@almadar/patterns');
 var ELK = require('elkjs/lib/elk.bundled.js');
 var react = require('@xyflow/react');
+var OrbitalServerRuntime = require('@almadar/runtime/OrbitalServerRuntime');
 var runtime = require('@almadar/runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -10212,13 +10213,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect80, useRef: useRef81, useCallback: useCallback105, useState: useState106 } = React118__namespace.default;
+      const { useEffect: useEffect81, useRef: useRef81, useCallback: useCallback105, useState: useState107 } = React118__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef81({ centerLat, centerLng, zoom });
-        useEffect80(() => {
+        useEffect81(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -10229,7 +10230,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect80(() => {
+        useEffect81(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -10256,7 +10257,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState106(null);
+        const [clickedPosition, setClickedPosition] = useState107(null);
         const handleMapClick = useCallback105((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -20636,6 +20637,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -20656,6 +20658,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = React118.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React118.useState(false);
       const location = reactRouterDom.useLocation();
@@ -20782,6 +20787,30 @@ var init_DashboardLayout = __esm({
                     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
                       headerActions,
                       showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
+                      topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                         Button,
                         {
@@ -50322,6 +50351,48 @@ function OrbPreview({
   );
 }
 OrbPreview.displayName = "OrbPreview";
+function BrowserPlayground({
+  schema,
+  mode = "mock",
+  initialPagePath,
+  height,
+  className
+}) {
+  const [runtime] = React118.useState(
+    () => new OrbitalServerRuntime.OrbitalServerRuntime({ mode, debug: false })
+  );
+  React118.useEffect(() => {
+    void runtime.register(schema);
+    return () => {
+      runtime.unregisterAll();
+    };
+  }, [runtime, schema]);
+  const transport = React118.useMemo(() => ({
+    register: async (s) => {
+      await runtime.register(s);
+      return true;
+    },
+    unregister: async () => {
+      runtime.unregisterAll();
+    },
+    sendEvent: async (orbitalName, event, payload) => {
+      return runtime.processOrbitalEvent(orbitalName, {
+        event,
+        payload
+      });
+    }
+  }), [runtime]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    OrbPreview,
+    {
+      schema,
+      transport,
+      initialPagePath,
+      height,
+      className
+    }
+  );
+}
 
 // components/molecules/avl/OrbPreviewNode.tsx
 init_useEventBus();
@@ -50502,7 +50573,6 @@ var OrbPreviewNodeInner = (props) => {
     }
     return buildOrbitalSchema(fullSchema, data.orbitalName);
   }, [data._fullSchema, data.orbitalName, data.traitName, data.transitionEvent, data.fromState, data.toState, isExpanded]);
-  const mockData = data._mockData ?? void 0;
   const handleContentClick = React118.useCallback((e) => {
     e.stopPropagation();
     const target = e.target;
@@ -50676,10 +50746,10 @@ var OrbPreviewNodeInner = (props) => {
             onDragOver: handlePreviewDragOver,
             onDragLeave: handlePreviewDragLeave,
             children: orbitalSchema ? /* @__PURE__ */ jsxRuntime.jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(
-              OrbPreview,
+              BrowserPlayground,
               {
                 schema: orbitalSchema,
-                mockData,
+                mode: "mock",
                 height: "auto"
               }
             ) }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center justify-center", style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: "No preview available" }) })

package/dist/avl/index.js

@@ -42,6 +42,7 @@ import { EffectComposer, Bloom, DepthOfField, Vignette } from '@react-three/post
 import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1, isEntityAwarePattern } from '@almadar/patterns';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { MarkerType, Handle, Position, getBezierPath, EdgeLabelRenderer, BaseEdge, ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
+import { OrbitalServerRuntime } from '@almadar/runtime/OrbitalServerRuntime';
 import { InMemoryPersistence, StateMachineManager, createContextFromBindings, interpolateValue, collectDeclaredConfigDefaults, createServerEffectHandlers, EffectExecutor } from '@almadar/runtime';
 
 var __defProp = Object.defineProperty;
@@ -10166,13 +10167,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect80, useRef: useRef81, useCallback: useCallback105, useState: useState106 } = React118__default;
+      const { useEffect: useEffect81, useRef: useRef81, useCallback: useCallback105, useState: useState107 } = React118__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef81({ centerLat, centerLng, zoom });
-        useEffect80(() => {
+        useEffect81(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -10183,7 +10184,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect80(() => {
+        useEffect81(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -10210,7 +10211,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState106(null);
+        const [clickedPosition, setClickedPosition] = useState107(null);
         const handleMapClick = useCallback105((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -20590,6 +20591,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -20610,6 +20612,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
       const location = useLocation();
@@ -20736,6 +20741,30 @@ var init_DashboardLayout = __esm({
                     /* @__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,
                         {
@@ -50276,6 +50305,48 @@ function OrbPreview({
   );
 }
 OrbPreview.displayName = "OrbPreview";
+function BrowserPlayground({
+  schema,
+  mode = "mock",
+  initialPagePath,
+  height,
+  className
+}) {
+  const [runtime] = useState(
+    () => new OrbitalServerRuntime({ mode, debug: false })
+  );
+  useEffect(() => {
+    void runtime.register(schema);
+    return () => {
+      runtime.unregisterAll();
+    };
+  }, [runtime, schema]);
+  const transport = useMemo(() => ({
+    register: async (s) => {
+      await runtime.register(s);
+      return true;
+    },
+    unregister: async () => {
+      runtime.unregisterAll();
+    },
+    sendEvent: async (orbitalName, event, payload) => {
+      return runtime.processOrbitalEvent(orbitalName, {
+        event,
+        payload
+      });
+    }
+  }), [runtime]);
+  return /* @__PURE__ */ jsx(
+    OrbPreview,
+    {
+      schema,
+      transport,
+      initialPagePath,
+      height,
+      className
+    }
+  );
+}
 
 // components/molecules/avl/OrbPreviewNode.tsx
 init_useEventBus();
@@ -50456,7 +50527,6 @@ var OrbPreviewNodeInner = (props) => {
     }
     return buildOrbitalSchema(fullSchema, data.orbitalName);
   }, [data._fullSchema, data.orbitalName, data.traitName, data.transitionEvent, data.fromState, data.toState, isExpanded]);
-  const mockData = data._mockData ?? void 0;
   const handleContentClick = useCallback((e) => {
     e.stopPropagation();
     const target = e.target;
@@ -50630,10 +50700,10 @@ var OrbPreviewNodeInner = (props) => {
             onDragOver: handlePreviewDragOver,
             onDragLeave: handlePreviewDragLeave,
             children: orbitalSchema ? /* @__PURE__ */ jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(
-              OrbPreview,
+              BrowserPlayground,
               {
                 schema: orbitalSchema,
-                mockData,
+                mode: "mock",
                 height: "auto"
               }
             ) }) : /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center", style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: "No preview available" }) })

package/dist/components/index.cjs

@@ -17000,6 +17000,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -17020,6 +17021,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = React109.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React109.useState(false);
       const location = reactRouterDom.useLocation();
@@ -17150,6 +17154,30 @@ var init_DashboardLayout = __esm({
                     /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { align: "center", gap: "xs", children: [
                       headerActions,
                       showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(exports.ThemeToggle, {}),
+                      topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        exports.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__ */ jsxRuntime.jsx(exports.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__ */ jsxRuntime.jsx(
+                              exports.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__ */ jsxRuntime.jsxs(
                         exports.Button,
                         {

package/dist/components/index.js

@@ -16955,6 +16955,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -16975,6 +16976,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
       const location = useLocation();
@@ -17105,6 +17109,30 @@ var init_DashboardLayout = __esm({
                     /* @__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,
                         {

package/dist/components/templates/DashboardLayout.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { LucideIcon } from "lucide-react";
-import type { EventEmit } from "@almadar/core";
+import type { EventEmit, EventKey } from "@almadar/core";
 export interface NavItem {
     label: string;
     href: string;
@@ -20,6 +20,25 @@ export interface NotificationItem {
     /** Optional flag — bell badge counts items where read !== true. */
     read?: boolean;
 }
+/** A generic top-bar action button. Domain-agnostic — consumers wire any
+ *  combination (cart icon, profile, help, custom). Each entry renders as
+ *  an icon button between the search bar and the notifications bell;
+ *  click dispatches the configured event onto the bus. */
+export interface TopBarAction {
+    /** Lucide icon name (e.g. "shopping-cart", "user", "help-circle"). */
+    icon: string;
+    /** Optional aria-label / tooltip. Falls back to `icon`. */
+    label?: string;
+    /** Bus event fired on click. Dispatched as `UI:{event}` with empty payload.
+     *  Typed as `EventKey` so the pattern-sync detector marks `topBarActions`
+     *  as `event-list` and the validator checks references against trait
+     *  emit/listen sets. */
+    event: EventKey;
+    /** Optional badge — number or string rendered in the corner of the icon. */
+    badge?: number | string;
+    /** Visual variant. Default `"default"`. */
+    variant?: "default" | "primary" | "danger";
+}
 export interface DashboardLayoutProps {
     /** App name shown in sidebar */
     appName?: string;
@@ -49,6 +68,12 @@ export interface DashboardLayoutProps {
     /** React-side search submit callback. Used when the host wires the
      *  layout directly (not via render-ui pattern resolution). */
     onSearchSubmit?: (value: string) => void;
+    /** Generic top-bar action buttons rendered between the search bar and
+     *  the notifications bell. Each entry: `{icon, label?, event, badge?, variant?}`.
+     *  Domain-agnostic — consumers add a cart icon, profile button, help-bubble,
+     *  or any other top-bar action by appending entries. Empty array (default)
+     *  renders nothing. */
+    topBarActions?: TopBarAction[];
     /** Notification list. Pass an empty array to show the bell with no
      *  badge; omit / pass null to hide the bell entirely. */
     notifications?: NotificationItem[] | null;

package/dist/providers/index.cjs

@@ -17394,6 +17394,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -17414,6 +17415,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = React105.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React105.useState(false);
       const location = reactRouterDom.useLocation();
@@ -17540,6 +17544,30 @@ var init_DashboardLayout = __esm({
                     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
                       headerActions,
                       showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
+                      topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                         Button,
                         {

package/dist/providers/index.js

@@ -17349,6 +17349,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -17369,6 +17370,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
       const location = useLocation();
@@ -17495,6 +17499,30 @@ var init_DashboardLayout = __esm({
                     /* @__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,
                         {

package/dist/runtime/index.cjs

@@ -17163,6 +17163,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -17183,6 +17184,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = React104.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React104.useState(false);
       const location = reactRouterDom.useLocation();
@@ -17309,6 +17313,30 @@ var init_DashboardLayout = __esm({
                     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
                       headerActions,
                       showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, {}),
+                      topBarActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                         Button,
                         {

package/dist/runtime/index.js

@@ -17118,6 +17118,7 @@ var init_DashboardLayout = __esm({
       showSearch = false,
       searchEvent,
       onSearchSubmit,
+      topBarActions = [],
       notifications,
       notificationClickEvent,
       onNotificationClick,
@@ -17138,6 +17139,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
+      const handleTopBarActionClick = (event) => {
+        eventBus.emit(`UI:${event}`, {});
+      };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
       const location = useLocation();
@@ -17264,6 +17268,30 @@ var init_DashboardLayout = __esm({
                     /* @__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,
                         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.26.0",
+  "version": "4.28.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -124,7 +124,7 @@
   "dependencies": {
     "@almadar/core": ">=7.12.0",
     "@almadar/evaluator": ">=2.9.2",
-    "@almadar/patterns": "^2.20.2",
+    "@almadar/patterns": "^2.21.0",
     "@almadar/runtime": "^6.0.0",
     "@almadar/std": ">=6.4.1",
     "@almadar/syntax": ">=1.3.1",