@gears-frontx/react 0.2.0-alpha.0 → 0.2.0-alpha.3

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/FrontXProvider.tsx
-import { useMemo as useMemo2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useMemo as useMemo2, useEffect as useEffect3, useState as useState2 } from "react";
 import { Provider as ReduxProvider } from "react-redux";
 import {
   createFrontXApp
@@ -41,7 +41,7 @@ var MfeProvider = ({ value, children }) => {
 import React, {
   createContext as createContext3,
   useContext as useContext3,
-  useEffect,
+  useEffect as useEffect2,
   useLayoutEffect,
   useMemo,
   useState
@@ -164,13 +164,23 @@ function createQueryCache(queryClient) {
   };
 }
 
+// src/hooks/useLatest.ts
+import { useEffect, useRef } from "react";
+function useLatest(value) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
 // src/queryClient.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var APP_QUERY_CLIENT_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client");
 var APP_QUERY_CLIENT_RESOLVER_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client-resolver");
 var APP_QUERY_CLIENT_ACTIVATOR_SYMBOL = /* @__PURE__ */ Symbol.for("frontx:query-cache:app-client-activator");
 var FrontXQueryClientContext = createContext3(void 0);
-var useCommitEffect = typeof globalThis.window === "undefined" ? useEffect : useLayoutEffect;
+var useCommitEffect = typeof globalThis.window === "undefined" ? useEffect2 : useLayoutEffect;
 function resolveFrontXQueryClient(app) {
   const clientApp = app;
   return clientApp[APP_QUERY_CLIENT_SYMBOL] ?? clientApp[APP_QUERY_CLIENT_RESOLVER_SYMBOL]?.();
@@ -409,18 +419,19 @@ function useFrontXSuspenseInfiniteQuery(options) {
 }
 function useFrontXMutation(options, callbackCtx) {
   useRequiredFrontXQueryClient();
-  const latestRef = React.useRef({ options, callbackCtx });
-  latestRef.current = { options, callbackCtx };
+  const latestRef = useLatest({ options, callbackCtx });
   const fetchAbortControllersRef = React.useRef(/* @__PURE__ */ new Set());
+  const abortFetchesOnUnmount = React.useEffectEvent(() => {
+    if (options.abortOnUnmount) {
+      for (const controller of fetchAbortControllersRef.current) {
+        controller.abort();
+      }
+      fetchAbortControllersRef.current.clear();
+    }
+  });
   React.useEffect(() => {
-    const fetchAbortControllers = fetchAbortControllersRef.current;
     return () => {
-      if (latestRef.current.options.abortOnUnmount) {
-        for (const controller of fetchAbortControllers) {
-          controller.abort();
-        }
-        fetchAbortControllers.clear();
-      }
+      abortFetchesOnUnmount();
     };
   }, []);
   const mutationFn = React.useCallback((variables, context) => {
@@ -444,22 +455,22 @@ function useFrontXMutation(options, callbackCtx) {
     return latestRef.current.options.endpoint.fetch(variables, { signal: controller.signal }).finally(() => {
       fetchAbortControllersRef.current.delete(controller);
     });
-  }, []);
+  }, [latestRef]);
   const onMutate = React.useCallback((variables, _context) => {
     const current = latestRef.current;
     if (!current.options.onMutate) {
       return void 0;
     }
     return current.options.onMutate(variables, current.callbackCtx);
-  }, []);
+  }, [latestRef]);
   const onSuccess = React.useCallback((data, variables, context) => {
     const current = latestRef.current;
     return current.options.onSuccess?.(data, variables, context, current.callbackCtx);
-  }, []);
+  }, [latestRef]);
   const onError = React.useCallback((error, variables, context) => {
     const current = latestRef.current;
     return current.options.onError?.(error, variables, context, current.callbackCtx);
-  }, []);
+  }, [latestRef]);
   const onSettled = React.useCallback((data, error, variables, context) => {
     const current = latestRef.current;
     return current.options.onSettled?.(
@@ -469,7 +480,7 @@ function useFrontXMutation(options, callbackCtx) {
       context,
       current.callbackCtx
     );
-  }, []);
+  }, [latestRef]);
   const mutation = useMutation({
     mutationFn,
     onMutate: options.onMutate ? onMutate : void 0,
@@ -520,7 +531,7 @@ var FrontXProvider = ({
   }, [providedApp, stableConfig]);
   const queryClient = useBootstrappedFrontXQueryClient(app);
   const deferQuerySubtree = hasFrontXQueryClientActivator(app) && queryClient === void 0;
-  useEffect2(() => {
+  useEffect3(() => {
     if (queryClient || hasFrontXQueryClientActivator(app) || process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test" || process.env.VITEST === "true") {
       return;
     }
@@ -528,7 +539,7 @@ var FrontXProvider = ({
       "[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition. useApiQuery/useApiMutation will fail without it."
     );
   }, [app, queryClient]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (!providedApp) {
         app.destroy();
@@ -543,7 +554,7 @@ var FrontXProvider = ({
 };
 
 // src/hooks/useCanAccess.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 function serializeRecordValue(value) {
   if (value === null) return "n:";
   if (typeof value === "string") return `s:${value}`;
@@ -560,24 +571,23 @@ function accessQueryKey(query) {
 function getAuthRuntime(app) {
   return app.auth ?? null;
 }
+var DENIED_NO_AUTH = { allow: false, isResolving: false };
 function useCanAccess(query) {
   const app = useFrontX();
+  const auth2 = getAuthRuntime(app);
   const stableKey = accessQueryKey(query);
   const [stableQuery, setStableQuery] = useState3(() => query);
-  const [storedKey, setStoredKey] = useState3(stableKey);
+  const [runState, setRunState] = useState3({ auth: auth2, stableKey });
   const [result, setResult] = useState3({ allow: false, isResolving: true });
-  if (storedKey !== stableKey) {
-    setStoredKey(stableKey);
+  if (runState.auth !== auth2 || runState.stableKey !== stableKey) {
+    setRunState({ auth: auth2, stableKey });
     setStableQuery(query);
     setResult({ allow: false, isResolving: true });
   }
-  useEffect3(() => {
-    const auth2 = getAuthRuntime(app);
+  useEffect4(() => {
     if (!auth2) {
-      setResult({ allow: false, isResolving: false });
       return;
     }
-    setResult({ allow: false, isResolving: true });
     let alive = true;
     const controller = new AbortController();
     void auth2.canAccess(stableQuery, { signal: controller.signal }).then((decision) => {
@@ -593,8 +603,8 @@ function useCanAccess(query) {
       alive = false;
       controller.abort();
     };
-  }, [app, stableQuery]);
-  return result;
+  }, [auth2, stableQuery]);
+  return auth2 ? result : DENIED_NO_AUTH;
 }
 
 // src/components/CanAccess.tsx
@@ -667,7 +677,7 @@ function useTranslation() {
 }
 
 // src/hooks/useScreenTranslations.ts
-import { useState as useState4, useEffect as useEffect4, useMemo as useMemo4, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useState as useState4, useEffect as useEffect5, useMemo as useMemo4, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function isTranslationLoader(input) {
   return typeof input === "function";
 }
@@ -675,7 +685,6 @@ function useScreenTranslations(screensetId, screenId, translations) {
   const app = useFrontX();
   const { i18nRegistry: i18nRegistry2 } = app;
   const [loadedLanguage, setLoadedLanguage] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(false);
   const [error, setError] = useState4(null);
   const version = useSyncExternalStore2(
     useCallback2(
@@ -702,12 +711,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
       return module.default;
     };
   }, [translations]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!currentLanguage || currentLanguage === loadedLanguage) {
       return;
     }
     let cancelled = false;
-    setIsLoading(true);
     const loadTranslations = async () => {
       try {
         const namespace = `screen.${screensetId}.${screenId}`;
@@ -716,13 +724,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
         i18nRegistry2.register(namespace, currentLanguage, loadedTranslations);
         if (!cancelled) {
           setLoadedLanguage(currentLanguage);
-          setIsLoading(false);
           setError(null);
         }
       } catch (err) {
         if (!cancelled) {
           setError(err instanceof Error ? err : new Error(String(err)));
-          setIsLoading(false);
         }
       }
     };
@@ -731,7 +737,7 @@ function useScreenTranslations(screensetId, screenId, translations) {
       cancelled = true;
     };
   }, [screensetId, screenId, loader, i18nRegistry2, currentLanguage, loadedLanguage]);
-  const isLoaded = currentLanguage !== null && currentLanguage === loadedLanguage && !isLoading;
+  const isLoaded = currentLanguage !== null && currentLanguage === loadedLanguage;
   return { isLoaded, error };
 }
 
@@ -842,25 +848,38 @@ function useApiMutation(options) {
 }
 
 // src/hooks/useApiStream.ts
-import { useEffect as useEffect5, useMemo as useMemo8, useRef, useState as useState5, useCallback as useCallback4 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef2, useState as useState5, useCallback as useCallback4 } from "react";
 function useApiStream(descriptor, options) {
   const mode = options?.mode ?? "latest";
   const enabled = options?.enabled ?? true;
   const [data, setData] = useState5(void 0);
   const [events, setEvents] = useState5([]);
-  const [status, setStatus] = useState5("idle");
+  const [status, setStatus] = useState5(() => enabled ? "connecting" : "idle");
   const [error, setError] = useState5(null);
-  const connectPromiseRef = useRef(null);
-  const connectionIdRef = useRef(null);
-  const disconnectRequestedRef = useRef(false);
-  const descriptorRef = useRef(descriptor);
-  descriptorRef.current = descriptor;
+  const connectPromiseRef = useRef2(null);
+  const connectionIdRef = useRef2(null);
+  const disconnectRequestedRef = useRef2(false);
+  const descriptorRef = useLatest(descriptor);
   const descriptorKey = useMemo8(() => JSON.stringify(descriptor.key), [descriptor.key]);
-  useEffect5(() => {
+  const resetKey = `${descriptorKey}:${mode}`;
+  const [prevResetKey, setPrevResetKey] = useState5(resetKey);
+  if (resetKey !== prevResetKey) {
+    setPrevResetKey(resetKey);
     setData(void 0);
     setEvents([]);
     setError(null);
-  }, [descriptorKey, mode]);
+  }
+  const connectKey = `${resetKey}:${enabled}`;
+  const [prevConnectKey, setPrevConnectKey] = useState5(connectKey);
+  if (connectKey !== prevConnectKey) {
+    setPrevConnectKey(connectKey);
+    if (enabled) {
+      setData(void 0);
+      setEvents([]);
+      setStatus("connecting");
+      setError(null);
+    }
+  }
   const disconnect = useCallback4(() => {
     disconnectRequestedRef.current = true;
     if (connectionIdRef.current) {
@@ -869,19 +888,14 @@ function useApiStream(descriptor, options) {
       disconnectRequestedRef.current = false;
     }
     setStatus("disconnected");
-  }, []);
-  useEffect5(() => {
+  }, [descriptorRef]);
+  useEffect6(() => {
     if (!enabled) {
-      setStatus("idle");
       return;
     }
     let cancelled = false;
     disconnectRequestedRef.current = false;
     const d = descriptorRef.current;
-    setData(void 0);
-    setEvents([]);
-    setStatus("connecting");
-    setError(null);
     const connectPromise = d.connect(
       (event) => {
         if (cancelled) return;
@@ -927,8 +941,8 @@ function useApiStream(descriptor, options) {
       connectPromiseRef.current = null;
       connectionIdRef.current = null;
     };
-  }, [descriptorKey, enabled, mode]);
-  return { data, events, status, error, disconnect };
+  }, [descriptorKey, enabled, mode, descriptorRef]);
+  return { data, events, status: enabled ? status : "idle", error, disconnect };
 }
 
 // src/hooks/useQueryCache.ts
@@ -974,7 +988,7 @@ function useHostAction(actionTypeId) {
     const chain = {
       action: {
         type: actionTypeId,
-        target: bridge.domainId,
+        target: bridge.extDomainId,
         payload
       }
     };
@@ -988,7 +1002,7 @@ function useHostAction(actionTypeId) {
 }
 
 // src/mfe/hooks/useDomainExtensions.ts
-import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback7, useRef as useRef2 } from "react";
+import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback7, useRef as useRef3 } from "react";
 function useDomainExtensions(domainId) {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1003,7 +1017,7 @@ function useDomainExtensions(domainId) {
     },
     [app.store]
   );
-  const cacheRef = useRef2({ ids: "", extensions: [] });
+  const cacheRef = useRef3({ ids: "", extensions: [] });
   const getSnapshot = useCallback7(() => {
     const extensions = registry.getExtensionsForDomain(domainId);
     const ids = extensions.map((e) => e.id).join(",");
@@ -1016,7 +1030,7 @@ function useDomainExtensions(domainId) {
 }
 
 // src/mfe/hooks/useMountedExtensions.ts
-import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback8, useRef as useRef3 } from "react";
+import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback8, useRef as useRef4 } from "react";
 function useMountedExtensions(domainId) {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1031,7 +1045,7 @@ function useMountedExtensions(domainId) {
     },
     [app.store]
   );
-  const cacheRef = useRef3({ key: "", extensions: [] });
+  const cacheRef = useRef4({ key: "", extensions: [] });
   const getSnapshot = useCallback8(() => {
     const ids = registry.getMountedExtensions(domainId);
     const resolved = ids.map((id) => registry.getExtension(id)).filter((ext) => ext !== void 0);
@@ -1045,7 +1059,7 @@ function useMountedExtensions(domainId) {
 }
 
 // src/mfe/hooks/useRegisteredPackages.ts
-import { useSyncExternalStore as useSyncExternalStore7, useCallback as useCallback9, useRef as useRef4 } from "react";
+import { useSyncExternalStore as useSyncExternalStore7, useCallback as useCallback9, useRef as useRef5 } from "react";
 function useRegisteredPackages() {
   const app = useFrontX();
   const registry = app.mfeRegistry;
@@ -1060,7 +1074,7 @@ function useRegisteredPackages() {
     },
     [app.store]
   );
-  const cacheRef = useRef4({ packages: "", list: [] });
+  const cacheRef = useRef5({ packages: "", list: [] });
   const getSnapshot = useCallback9(() => {
     const list = registry.getRegisteredPackages();
     const packages = list.join(",");
@@ -1075,6 +1089,9 @@ function useRegisteredPackages() {
 // src/mfe/ThemeAwareReactLifecycle.tsx
 import { createRoot } from "react-dom/client";
 import { jsx as jsx4 } from "react/jsx-runtime";
+var ADOPTED_HOST_STYLE_ATTR = "data-frontx-adopted-host-style";
+var BASE_RESETS_STYLE_ID = "__frontx-base-resets__";
+var SHELL_OWNED_SHADOW_STYLE_IDS = ["__frontx-shadow-isolation__", "__frontx-css-variables__"];
 function resolveProviderMountOptions(app, bridge, mountContext) {
   const extensionId = mountContext?.extensionId;
   const domainId = mountContext?.domainId;
@@ -1129,27 +1146,108 @@ var ThemeAwareReactLifecycle = class {
   /**
    * Copy all inline <style> and <link rel="stylesheet"> from the host document
    * into the shadow root so that Tailwind and component styles apply inside the MFE.
+   *
+   * The clones are inserted ahead of everything already in the shadow root, never
+   * appended, because adopted host styles are context rather than authority: where
+   * they and the MFE's own CSS declare the same property at equal specificity, the
+   * MFE has to win. Appending inverted that. `MfeHandlerMF` injects the MFE's
+   * compiled stylesheet into the shadow root before it calls mount, so an appended
+   * clone of the shell's Tailwind preflight - whose
+   * `button, [type='button'], [type='reset'], [type='submit']` rule sets
+   * `background-color: transparent` at specificity (0,1,0) - tied with
+   * `@gears-frontx/ui-kit`'s single-class button rule and won on document order,
+   * leaving every kit Button transparent until it was hovered.
+   *
+   * Inserting at the front rather than pushing MFE styles to the back is what makes
+   * the invariant hold for stylesheets that appear after mount too - a lazily
+   * imported component's CSS module, or whatever initializeStyles() adds - since
+   * those land behind the adopted block by construction.
+   *
+   * A cascade layer around the adopted CSS was the alternative and is rejected:
+   * layered rules lose to unlayered ones at *any* specificity, so a host utility
+   * class would stop overriding an MFE element selector. Document order keeps
+   * specificity in charge and only settles the ties.
+   *
+   * The block replaces its predecessor instead of stacking on it, the same
+   * upsert shape `injectStylesheet` and `injectCssVariables` use in
+   * `@gears-frontx/mfes`' shadow utilities, widened from one id-keyed node to a
+   * marked block. Replacement is required rather than tidy: `createShadowRoot`
+   * hands back an existing `element.shadowRoot` instead of attaching a new one,
+   * so remounting the same container runs this method again on a shadow root
+   * that already holds a full adopted block, and appending would grow it once
+   * per mount with no bound. It does not save re-resolving the cloned `<link>`s -
+   * every mount clones them afresh and the browser resolves each clone; what
+   * replacement buys is that the count stays at one block instead of one per
+   * mount.
+   *
+   * The block is rebuilt from the host head rather than left in place, because
+   * the head is not fixed: a lazily imported chunk adds stylesheets to it after
+   * the first mount, and the second mount has to pick those up.
+   *
+   * The fresh block goes in before the previous one comes out. Removing first
+   * leaves the shadow root with no host CSS at all, and everything between that
+   * removal and the insertion is synchronous work in this same task - so the gap
+   * never reaches a paint, but any code that reads computed styles from the tree
+   * in between sees an unstyled one. Inserting first costs one moment with two
+   * blocks present, which changes nothing: the old block is a clone of the same
+   * host head and loses every tie to the new one on document order anyway.
    */
   adoptHostStylesIntoShadowRoot(shadowRoot) {
-    const styleElements = document.head.querySelectorAll("style");
-    styleElements.forEach((el) => {
-      const clone = document.createElement("style");
-      clone.textContent = el.textContent ?? "";
-      shadowRoot.appendChild(clone);
-    });
-    const linkElements = document.head.querySelectorAll('link[rel="stylesheet"]');
-    linkElements.forEach((el) => {
-      const clone = el.cloneNode(true);
-      shadowRoot.appendChild(clone);
+    const supersededStyles = Array.from(shadowRoot.querySelectorAll(`[${ADOPTED_HOST_STYLE_ATTR}]`));
+    const adoptedStyles = document.createDocumentFragment();
+    const hostStyleNodes = document.head.querySelectorAll('style, link[rel="stylesheet"]');
+    hostStyleNodes.forEach((el) => {
+      if (el instanceof HTMLStyleElement) {
+        const clone = document.createElement("style");
+        clone.textContent = el.textContent ?? "";
+        clone.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
+        adoptedStyles.appendChild(clone);
+        return;
+      }
+      const linkClone = el.cloneNode(true);
+      linkClone.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
+      adoptedStyles.appendChild(linkClone);
     });
+    shadowRoot.insertBefore(adoptedStyles, shadowRoot.firstChild);
+    supersededStyles.forEach((el) => el.remove());
   }
   /**
    * Box-model resets and :host defaults needed inside every shadow root.
    * These aren't part of Tailwind's compiled output but are required for
    * consistent rendering across browsers.
+   *
+   * Reuses the node a previous mount left behind, exactly as `injectStylesheet`
+   * does in `@gears-frontx/mfes`' shadow utilities: a remount runs against a
+   * shadow root that `createShadowRoot` handed back intact, and appending a
+   * second copy would add one node per mount forever.
+   *
+   * Reuse alone is not enough, which is why the node is also positioned on every
+   * mount rather than left where the previous one sat. These resets are context
+   * like the adopted block is - `border-color: currentColor` on `*` is a 0-0-0
+   * declaration that beats an MFE preflight's own 0-0-0 reset purely on document
+   * order - so they have to stay ahead of the MFE's CSS, and where they land is
+   * not stable on its own. `MfeHandlerMF.wrapLifecycleWithStylesheets` removes the
+   * MFE's stylesheet on unmount and appends a fresh one before the next mount, so
+   * a node merely left in place ends up ahead of that stylesheet on a remount and
+   * behind it on the first mount: two different cascades for one component.
+   * Anchoring it to the end of the shell-owned head gives every mount the same
+   * order - adopted block, isolation, resets, MFE - which is also the order the
+   * adoption method's invariant is written against.
+   *
+   * With no shell-owned node to anchor to, the resets go to the front. That is the
+   * plain-`Element` container: no adopted block, no isolation style, and the MFE
+   * stylesheet already appended by the handler, so the front is again the only
+   * position that leaves the MFE winning ties.
+   *
+   * Looked up by attribute-selector form rather than `getElementById`, which
+   * `ShadowRoot` has but `Element` does not, and this hook takes either.
    */
   injectBaseResets(container) {
-    const style = document.createElement("style");
+    const existing = container.querySelector(
+      `style[id="${BASE_RESETS_STYLE_ID}"]`
+    );
+    const style = existing ?? document.createElement("style");
+    style.id = BASE_RESETS_STYLE_ID;
     style.textContent = `
       *, *::before, *::after {
         box-sizing: border-box;
@@ -1167,7 +1265,17 @@ var ThemeAwareReactLifecycle = class {
         background-color: hsl(var(--background));
       }
     `;
-    container.appendChild(style);
+    const shellOwnedHead = container.querySelectorAll(
+      [
+        `[${ADOPTED_HOST_STYLE_ATTR}]`,
+        ...SHELL_OWNED_SHADOW_STYLE_IDS.map((id) => `[id="${id}"]`)
+      ].join(", ")
+    );
+    const lastShellOwnedNode = shellOwnedHead[shellOwnedHead.length - 1];
+    container.insertBefore(
+      style,
+      lastShellOwnedNode ? lastShellOwnedNode.nextSibling : container.firstChild
+    );
   }
   /**
    * Hook for subclasses to inject additional CSS not covered by the adopted host
@@ -1180,7 +1288,7 @@ var ThemeAwareReactLifecycle = class {
 };
 
 // src/mfe/components/ExtensionDomainSlot.tsx
-import { useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect7, useEffectEvent, useRef as useRef6, useState as useState6 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function ExtensionDomainSlot(props) {
   const {
@@ -1191,13 +1299,15 @@ function ExtensionDomainSlot(props) {
     onDetached,
     loadingComponent = null
   } = props;
-  const rootRef = useRef5(null);
-  const onAttachedRef = useRef5(onAttached);
-  const onDetachedRef = useRef5(onDetached);
-  onAttachedRef.current = onAttached;
-  onDetachedRef.current = onDetached;
+  const rootRef = useRef6(null);
+  const emitAttached = useEffectEvent((root) => {
+    onAttached?.(root);
+  });
+  const emitDetached = useEffectEvent(() => {
+    onDetached?.();
+  });
   const [attached, setAttached] = useState6(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const root = rootRef.current;
     if (!root) {
       return;
@@ -1205,11 +1315,11 @@ function ExtensionDomainSlot(props) {
     const mounter = registry.getMounter(domainId);
     mounter.attach(root);
     setAttached(true);
-    onAttachedRef.current?.(root);
+    emitAttached(root);
     return () => {
       void mounter.detach();
       setAttached(false);
-      onDetachedRef.current?.();
+      emitDetached();
     };
   }, [registry, domainId]);
   return /* @__PURE__ */ jsx5(