@almadar/ui 3.5.1 → 3.5.3

package/dist/components/index.js

@@ -37091,11 +37091,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,
@@ -37132,6 +37134,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,
@@ -37164,7 +37167,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",
@@ -37177,6 +37180,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,
@@ -37184,9 +37188,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({
@@ -37305,12 +37309,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,
@@ -37322,6 +37328,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,
@@ -37333,6 +37340,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,
@@ -37344,6 +37352,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,
@@ -37367,6 +37376,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":
@@ -37377,7 +37388,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;
@@ -37390,12 +37401,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",
@@ -37409,17 +37420,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);
 }

package/dist/providers/index.cjs

@@ -37645,11 +37645,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,
@@ -37686,6 +37688,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,
@@ -37718,7 +37721,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",
@@ -37731,6 +37734,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,
@@ -37738,9 +37742,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({
@@ -37859,12 +37863,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,
@@ -37876,6 +37882,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,
@@ -37887,6 +37894,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,
@@ -37898,6 +37906,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,
@@ -37921,6 +37930,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":
@@ -37931,7 +37942,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;
@@ -37944,12 +37955,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",
@@ -37963,17 +37974,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);
 }

package/dist/providers/index.js

@@ -37600,11 +37600,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,
@@ -37641,6 +37643,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,
@@ -37673,7 +37676,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",
@@ -37686,6 +37689,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,
@@ -37693,9 +37697,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({
@@ -37814,12 +37818,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,
@@ -37831,6 +37837,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,
@@ -37842,6 +37849,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,
@@ -37853,6 +37861,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,
@@ -37876,6 +37885,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":
@@ -37886,7 +37897,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;
@@ -37899,12 +37910,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",
@@ -37918,17 +37929,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);
 }

package/dist/runtime/index.cjs

@@ -1048,6 +1048,20 @@ function bindTraitStateGetter(getter) {
     window.__orbitalVerification.getTraitState = getter;
   }
 }
+function registerTraitSnapshot(traitName, getter) {
+  if (typeof window === "undefined") return () => {
+  };
+  getState().traitSnapshots.set(traitName, getter);
+  exposeOnWindow();
+  notifyListeners2();
+  return () => {
+    const s = getState();
+    if (s.traitSnapshots.get(traitName) === getter) {
+      s.traitSnapshots.delete(traitName);
+      notifyListeners2();
+    }
+  };
+}
 function bindCanvasCapture(captureFn) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -37217,11 +37231,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,
@@ -37258,6 +37274,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,
@@ -37290,7 +37307,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",
@@ -37303,6 +37320,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,
@@ -37310,9 +37328,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({
@@ -37431,12 +37449,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,
@@ -37448,6 +37468,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,
@@ -37459,6 +37480,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,
@@ -37470,6 +37492,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,
@@ -37493,6 +37516,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":
@@ -37503,7 +37528,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;
@@ -37516,12 +37541,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",
@@ -37535,17 +37560,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);
 }
@@ -37974,10 +38000,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 = React116.useCallback((tick, binding) => {
     const actions = slotsActionsRef.current;