@almadar/ui 4.3.0 → 4.4.0

package/dist/avl/index.cjs

@@ -46317,18 +46317,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -46353,18 +46359,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -46408,6 +46420,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React126.useContext(SuspenseConfigContext);
   const contained = React126.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -46454,6 +46467,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -46503,7 +46520,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React126.useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   React126.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -46511,7 +46529,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -46859,6 +46881,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/avl/index.js

@@ -46271,18 +46271,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -46307,18 +46313,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -46362,6 +46374,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -46408,6 +46421,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -46457,7 +46474,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -46465,7 +46483,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -46813,6 +46835,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/components/index.cjs

@@ -37163,18 +37163,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     exports.Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37199,18 +37205,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     exports.Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37254,6 +37266,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = context.useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React110.useContext(SuspenseConfigContext);
   const contained = React110.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37300,6 +37313,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37349,7 +37366,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React110.useState(null);
-  const eventBus = context.useUISlots();
+  const slotsBus = context.useUISlots();
+  const eventBus = useEventBus();
   React110.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37357,7 +37375,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37704,6 +37726,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/components/index.js

@@ -37118,18 +37118,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37154,18 +37160,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37209,6 +37221,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37255,6 +37268,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37304,7 +37321,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37312,7 +37330,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37659,6 +37681,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/components/organisms/Form.d.ts

@@ -155,8 +155,13 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
     className?: string;
     /** Entity type name or schema object. When OrbitalEntity, fields are auto-derived if not provided. */
     entity?: string | OrbitalEntity | readonly Record<string, unknown>[];
-    /** Form mode - 'create' for new records, 'edit' for updating existing */
-    mode?: "create" | "edit";
+    /**
+     * Form mode — 'create' for new records, 'edit' for updating existing.
+     * Accepts `string` so schema-driven callers (whose `config.mode` is typed
+     * as `string` per the trait's declared config block) compile cleanly. The
+     * runtime treats anything other than 'edit' as 'create'.
+     */
+    mode?: "create" | "edit" | string;
     /** Fields definition (schema format) - accepts readonly for generated const arrays */
     fields: readonly Readonly<SchemaField>[];
     /** Initial form data */

package/dist/providers/index.cjs

@@ -37672,18 +37672,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37708,18 +37714,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37763,6 +37775,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = context.useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React115.useContext(SuspenseConfigContext);
   const contained = React115.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37809,6 +37822,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37858,7 +37875,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React115.useState(null);
-  const eventBus = context.useUISlots();
+  const slotsBus = context.useUISlots();
+  const eventBus = useEventBus();
   React115.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37866,7 +37884,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -38213,6 +38235,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/providers/index.js

@@ -37627,18 +37627,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37663,18 +37669,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37718,6 +37730,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37764,6 +37777,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37813,7 +37830,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37821,7 +37839,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -38168,6 +38190,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/runtime/index.cjs

@@ -37258,18 +37258,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37294,18 +37300,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37349,6 +37361,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = context.useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = React115.useContext(SuspenseConfigContext);
   const contained = React115.useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37395,6 +37408,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37444,7 +37461,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = React115.useState(null);
-  const eventBus = context.useUISlots();
+  const slotsBus = context.useUISlots();
+  const eventBus = useEventBus();
   React115.useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37452,7 +37470,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37799,6 +37821,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/dist/runtime/index.js

@@ -37213,18 +37213,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               style: { minWidth: "520px", maxWidth: "700px", maxHeight: "80%" },
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close modal",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-auto p-4", children: slotContent })
               ]
             }
@@ -37249,18 +37255,24 @@ function renderContainedPortal(slot, content, onDismiss) {
               ),
               onClick: (e) => e.stopPropagation(),
               children: [
-                content.props.title ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b border-border", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }),
+                /* @__PURE__ */ jsxs(Box, { className: cn(
+                  "flex items-center p-4",
+                  content.props.title ? "justify-between border-b border-border" : "justify-end"
+                ), children: [
+                  content.props.title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-semibold", children: String(content.props.title) }) : null,
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       as: "button",
                       className: "text-muted-foreground hover:text-foreground cursor-pointer",
                       onClick: onDismiss,
+                      "data-event": "CLOSE",
+                      "data-testid": "action-CLOSE",
+                      "aria-label": "Close drawer",
                       children: "\u2715"
                     }
                   )
-                ] }) : null,
+                ] }),
                 /* @__PURE__ */ jsx(Box, { className: "p-4", children: slotContent })
               ]
             }
@@ -37304,6 +37316,7 @@ function UISlotComponent({
   sourceTrait
 }) {
   const { slots, clear } = useUISlots();
+  const eventBus = useEventBus();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
   const content = slots[slot];
@@ -37350,6 +37363,10 @@ function UISlotComponent({
     return null;
   }
   const handleDismiss = () => {
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
     clear(slot);
   };
   if (portal) {
@@ -37399,7 +37416,8 @@ function getOrCreatePortalRoot() {
 }
 function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const [portalRoot, setPortalRoot] = useState(null);
-  const eventBus = useUISlots();
+  const slotsBus = useUISlots();
+  const eventBus = useEventBus();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -37407,7 +37425,11 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     if (portalRoot) getOrCreatePortalRoot();
   });
   const handleDismiss = () => {
-    eventBus.clear(slot);
+    if (slot === "modal" || slot === "drawer") {
+      eventBus.emit("UI:CLOSE");
+      eventBus.emit("UI:CANCEL");
+    }
+    slotsBus.clear(slot);
   };
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
@@ -37754,6 +37776,7 @@ var init_UISlotRenderer = __esm({
     init_Toast();
     init_Box();
     init_Typography();
+    init_useEventBus();
     init_cn();
     init_ErrorBoundary();
     init_Skeleton();

package/package.json

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