@almadar/ui 3.5.1 → 3.5.3

package/dist/avl/index.cjs

@@ -12098,6 +12098,20 @@ function bindTraitStateGetter(getter) {
     window.__orbitalVerification.getTraitState = getter;
   }
 }
+function registerTraitSnapshot(traitName, getter) {
+  if (typeof window === "undefined") return () => {
+  };
+  getState().traitSnapshots.set(traitName, getter);
+  exposeOnWindow();
+  notifyListeners();
+  return () => {
+    const s = getState();
+    if (s.traitSnapshots.get(traitName) === getter) {
+      s.traitSnapshots.delete(traitName);
+      notifyListeners();
+    }
+  };
+}
 function bindCanvasCapture(captureFn) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -46172,11 +46186,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -46213,6 +46229,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46245,7 +46262,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46258,6 +46275,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46265,9 +46283,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -46386,12 +46404,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46403,6 +46423,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46414,6 +46435,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46425,6 +46447,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46448,6 +46471,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -46458,7 +46483,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -46471,12 +46496,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46490,17 +46515,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
   return reactDom.createPortal(wrapper, portalRoot);
 }
@@ -51178,10 +51204,30 @@ function useTraitStateMachine(traitBindings, slotsActions, options) {
       const state = newManager.getState(traitName);
       return typeof state === "string" ? state : void 0;
     });
+    const snapshotUnregs = [];
+    for (const binding of traitBindingsRef.current) {
+      const traitName = binding.trait.name;
+      const unreg = registerTraitSnapshot(traitName, () => {
+        const managerState = managerRef.current.getState(traitName);
+        const currentState = managerState?.currentState ?? binding.trait.states[0]?.name ?? "unknown";
+        return {
+          traitName,
+          currentState,
+          states: binding.trait.states.map((s) => s.name),
+          events: binding.trait.events.map((e) => e.key),
+          data: {},
+          cascadeReceived: []
+        };
+      });
+      snapshotUnregs.push(unreg);
+    }
     console.log(
       "[TraitStateMachine] Reset states for page navigation:",
       Array.from(newManager.getAllStates().keys()).join(", ")
     );
+    return () => {
+      for (const unreg of snapshotUnregs) unreg();
+    };
   }, [traitBindings]);
   const runTickEffects = React126.useCallback((tick, binding) => {
     const actions = slotsActionsRef.current;

package/dist/avl/index.js

@@ -12052,6 +12052,20 @@ function bindTraitStateGetter(getter) {
     window.__orbitalVerification.getTraitState = getter;
   }
 }
+function registerTraitSnapshot(traitName, getter) {
+  if (typeof window === "undefined") return () => {
+  };
+  getState().traitSnapshots.set(traitName, getter);
+  exposeOnWindow();
+  notifyListeners();
+  return () => {
+    const s = getState();
+    if (s.traitSnapshots.get(traitName) === getter) {
+      s.traitSnapshots.delete(traitName);
+      notifyListeners();
+    }
+  };
+}
 function bindCanvasCapture(captureFn) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -46126,11 +46140,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -46167,6 +46183,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46199,7 +46216,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46212,6 +46229,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -46219,9 +46237,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsx(Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -46340,12 +46358,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46357,6 +46377,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46368,6 +46389,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46379,6 +46401,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -46402,6 +46425,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -46412,7 +46437,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -46425,12 +46450,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsx(
         Toast,
         {
           variant: content.props.variant ?? "info",
@@ -46444,17 +46469,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsx(
         Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsx(Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent });
   }
   return createPortal(wrapper, portalRoot);
 }
@@ -51132,10 +51158,30 @@ function useTraitStateMachine(traitBindings, slotsActions, options) {
       const state = newManager.getState(traitName);
       return typeof state === "string" ? state : void 0;
     });
+    const snapshotUnregs = [];
+    for (const binding of traitBindingsRef.current) {
+      const traitName = binding.trait.name;
+      const unreg = registerTraitSnapshot(traitName, () => {
+        const managerState = managerRef.current.getState(traitName);
+        const currentState = managerState?.currentState ?? binding.trait.states[0]?.name ?? "unknown";
+        return {
+          traitName,
+          currentState,
+          states: binding.trait.states.map((s) => s.name),
+          events: binding.trait.events.map((e) => e.key),
+          data: {},
+          cascadeReceived: []
+        };
+      });
+      snapshotUnregs.push(unreg);
+    }
     console.log(
       "[TraitStateMachine] Reset states for page navigation:",
       Array.from(newManager.getAllStates().keys()).join(", ")
     );
+    return () => {
+      for (const unreg of snapshotUnregs) unreg();
+    };
   }, [traitBindings]);
   const runTickEffects = useCallback((tick, binding) => {
     const actions = slotsActionsRef.current;

package/dist/components/index.cjs

@@ -37136,11 +37136,13 @@ function enrichFormFields(fields, entityDef) {
 }
 function renderContainedPortal(slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+  const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-start justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)", paddingTop: "10%" },
           onClick: onDismiss,
@@ -37177,6 +37179,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 overflow-hidden",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37209,7 +37212,7 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "toast":
-      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37222,6 +37225,7 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "absolute inset-0 z-50 flex items-center justify-center overflow-auto",
           style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
           onClick: onDismiss,
@@ -37229,9 +37233,9 @@ function renderContainedPortal(slot, content, onDismiss) {
         }
       );
     case "center":
-      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: "absolute inset-0 z-50 flex items-center justify-center pointer-events-none overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto max-h-full overflow-auto", children: slotContent }) });
     default:
-      return slotContent;
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent });
   }
 }
 function UISlotComponent({
@@ -37350,12 +37354,14 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
     eventBus.clear(slot);
   };
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
     case "modal":
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37367,6 +37373,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37378,6 +37385,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37389,6 +37397,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: cn("ui-slot", `ui-slot-${slot}`, className),
           "data-pattern": pattern,
           "data-source-trait": sourceTrait,
@@ -37412,6 +37421,8 @@ function SlotPortal({
     if (portalRoot) getOrCreatePortalRoot();
   });
   if (!portalRoot) return null;
+  const slotId = `slot-${slot}`;
+  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -37422,7 +37433,7 @@ function SlotPortal({
           onClose: onDismiss,
           title: content.props.title,
           size: content.props.size,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent })
         }
       );
       break;
@@ -37435,12 +37446,12 @@ function SlotPortal({
           title: content.props.title,
           position: content.props.position ?? "right",
           width: content.props.width,
-          children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent })
         }
       );
       break;
     case "toast":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: cn("fixed z-50", getToastPosition(position)), children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.Toast,
         {
           variant: content.props.variant ?? "info",
@@ -37454,17 +37465,18 @@ function SlotPortal({
       wrapper = /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
+          id: slotId,
           className: "fixed inset-0 z-50 bg-foreground/50 flex items-center justify-center",
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { onClick: (e) => e.stopPropagation(), children: slotContent })
         }
       );
       break;
     case "center":
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) }) });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "pointer-events-auto", children: slotContent }) });
       break;
     default:
-      wrapper = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+      wrapper = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { id: slotId, children: slotContent });
   }
   return reactDom.createPortal(wrapper, portalRoot);
 }