@gears-frontx/react 0.1.0 → 0.2.0-alpha.2

package/dist/index.js

@@ -1,16 +1,18 @@
-// src/HAI3Provider.tsx
-import { useMemo, useEffect } from "react";
+// src/FrontXProvider.tsx
+import { useMemo as useMemo2, useEffect as useEffect3, useState as useState2 } from "react";
 import { Provider as ReduxProvider } from "react-redux";
-import { createHAI3App } from "@gears-frontx/framework";
+import {
+  createFrontXApp
+} from "@gears-frontx/framework";
 
-// src/HAI3Context.tsx
+// src/FrontXContext.tsx
 import { createContext, useContext } from "react";
-var HAI3Context = createContext(null);
-function useHAI3() {
-  const context = useContext(HAI3Context);
+var FrontXContext = createContext(null);
+function useFrontX() {
+  const context = useContext(FrontXContext);
   if (!context) {
     throw new Error(
-      "useHAI3 must be used within a HAI3Provider. Wrap your application with <HAI3Provider> to access HAI3 features."
+      "useFrontX must be used within a FrontXProvider. Wrap your application with <FrontXProvider> to access Gears FrontX features."
     );
   }
   return context;
@@ -35,34 +37,590 @@ var MfeProvider = ({ value, children }) => {
   return /* @__PURE__ */ jsx(MfeContext.Provider, { value, children });
 };
 
-// src/HAI3Provider.tsx
+// src/queryClient.tsx
+import React, {
+  createContext as createContext3,
+  useContext as useContext3,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from "react";
+import {
+  QueryClientContext,
+  QueryClientProvider,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useSuspenseInfiniteQuery,
+  useSuspenseQuery
+} from "@tanstack/react-query";
+import {
+  subscribeQueryCacheRuntimeChanged
+} from "@gears-frontx/framework";
+
+// src/hooks/QueryCache.ts
+import { eventBus } from "@gears-frontx/framework";
+var QUERY_CLIENT_BROADCAST_TARGET = /* @__PURE__ */ Symbol.for("frontx:query-cache:broadcast-target");
+var QUERY_CLIENT_BROADCAST_COUNTER = /* @__PURE__ */ Symbol.for("frontx:query-cache:broadcast-counter");
+function emitCacheEvent(event, payload) {
+  eventBus.emit(event, payload);
+}
+function ensureBroadcastSource(queryClient) {
+  const clientWithMetadata = queryClient;
+  const existingSource = clientWithMetadata[QUERY_CLIENT_BROADCAST_TARGET];
+  if (typeof existingSource === "string" && existingSource.length > 0) {
+    return existingSource;
+  }
+  const host = globalThis;
+  const nextCounter = (host[QUERY_CLIENT_BROADCAST_COUNTER] ?? 0) + 1;
+  host[QUERY_CLIENT_BROADCAST_COUNTER] = nextCounter;
+  const source = `query-cache-${nextCounter}`;
+  clientWithMetadata[QUERY_CLIENT_BROADCAST_TARGET] = source;
+  return source;
+}
+function resolveKey(target) {
+  if (target !== null && typeof target === "object" && !Array.isArray(target) && "key" in target && "fetch" in target && Array.isArray(target.key) && typeof target.fetch === "function") {
+    return target.key;
+  }
+  return target;
+}
+function toQueryUpdater(dataOrUpdater) {
+  if (typeof dataOrUpdater === "function") {
+    return dataOrUpdater;
+  }
+  return () => dataOrUpdater;
+}
+function mapQueryState(state) {
+  return {
+    data: state.data,
+    dataUpdatedAt: state.dataUpdatedAt,
+    error: state.error,
+    errorUpdatedAt: state.errorUpdatedAt,
+    fetchFailureCount: state.fetchFailureCount,
+    fetchFailureReason: state.fetchFailureReason,
+    fetchStatus: state.fetchStatus,
+    isInvalidated: state.isInvalidated,
+    status: state.status
+  };
+}
+function createQueryCache(queryClient) {
+  return {
+    get: (key) => {
+      return queryClient.getQueryData(resolveKey(key));
+    },
+    getState: (key) => {
+      const state = queryClient.getQueryState(resolveKey(key));
+      return state ? mapQueryState(state) : void 0;
+    },
+    set: (key, dataOrUpdater) => {
+      const resolvedKey = resolveKey(key);
+      queryClient.setQueryData(resolvedKey, toQueryUpdater(dataOrUpdater));
+      emitCacheEvent("cache/set", {
+        queryKey: resolvedKey,
+        dataOrUpdater,
+        source: ensureBroadcastSource(queryClient)
+      });
+    },
+    cancel: (key) => {
+      return queryClient.cancelQueries({ queryKey: resolveKey(key) });
+    },
+    invalidate: (key) => {
+      const resolvedKey = resolveKey(key);
+      const result = queryClient.invalidateQueries({ queryKey: resolvedKey });
+      emitCacheEvent("cache/invalidate", {
+        queryKey: resolvedKey,
+        source: ensureBroadcastSource(queryClient)
+      });
+      return result;
+    },
+    invalidateMany: (filters) => {
+      if (filters?.queryKey == null) {
+        return Promise.resolve();
+      }
+      const resolvedKey = resolveKey(filters.queryKey);
+      if (!Array.isArray(resolvedKey) || resolvedKey.length === 0) {
+        return Promise.resolve();
+      }
+      const payload = {
+        ...filters,
+        queryKey: resolvedKey
+      };
+      const result = queryClient.invalidateQueries(payload);
+      emitCacheEvent("cache/invalidate", {
+        ...payload,
+        source: ensureBroadcastSource(queryClient)
+      });
+      return result;
+    },
+    remove: (key) => {
+      const resolvedKey = resolveKey(key);
+      queryClient.removeQueries({ queryKey: resolvedKey });
+      emitCacheEvent("cache/remove", {
+        queryKey: resolvedKey,
+        source: ensureBroadcastSource(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 HAI3Provider = ({
+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" ? useEffect2 : useLayoutEffect;
+function resolveFrontXQueryClient(app) {
+  const clientApp = app;
+  return clientApp[APP_QUERY_CLIENT_SYMBOL] ?? clientApp[APP_QUERY_CLIENT_RESOLVER_SYMBOL]?.();
+}
+function hasFrontXQueryClientActivator(app) {
+  return typeof app[APP_QUERY_CLIENT_ACTIVATOR_SYMBOL] === "function";
+}
+function activateFrontXQueryClient(app) {
+  const clientApp = app;
+  return clientApp[APP_QUERY_CLIENT_SYMBOL] ?? clientApp[APP_QUERY_CLIENT_ACTIVATOR_SYMBOL]?.();
+}
+async function invalidateQueryCacheForApp(app, target) {
+  const queryClient = resolveFrontXQueryClient(app) ?? activateFrontXQueryClient(app);
+  if (!queryClient) {
+    throw new Error(
+      "[invalidateQueryCacheForApp] No QueryClient on app. Ensure queryCache() or queryCacheShared() is in the plugin chain."
+    );
+  }
+  await createQueryCache(queryClient).invalidate(target);
+}
+function bootstrapFrontXQueryClient(app) {
+  return resolveFrontXQueryClient(app);
+}
+function useBootstrappedFrontXQueryClient(app) {
+  const fromApp = useMemo(() => bootstrapFrontXQueryClient(app), [app]);
+  const [eventResolvedClient, setEventResolvedClient] = useState(
+    void 0
+  );
+  const queryClient = fromApp ?? (eventResolvedClient?.app === app ? eventResolvedClient.queryClient : void 0);
+  useCommitEffect(() => {
+    if (fromApp || !hasFrontXQueryClientActivator(app)) {
+      return;
+    }
+    const tryResolveQueryClient = () => {
+      const nextQueryClient = resolveFrontXQueryClient(app) ?? activateFrontXQueryClient(app);
+      if (nextQueryClient) {
+        setEventResolvedClient((current) => {
+          if (current?.app === app && current.queryClient === nextQueryClient) {
+            return current;
+          }
+          return {
+            app,
+            queryClient: nextQueryClient
+          };
+        });
+      }
+    };
+    tryResolveQueryClient();
+    const subscription = subscribeQueryCacheRuntimeChanged(() => {
+      tryResolveQueryClient();
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [app, fromApp]);
+  return queryClient;
+}
+function FrontXQueryClientProvider({
+  queryClient,
+  children
+}) {
+  if (!queryClient) {
+    return /* @__PURE__ */ jsx2(FrontXQueryClientContext.Provider, { value: void 0, children: /* @__PURE__ */ jsx2(QueryClientContext.Provider, { value: void 0, children }) });
+  }
+  return /* @__PURE__ */ jsx2(FrontXQueryClientContext.Provider, { value: queryClient, children: /* @__PURE__ */ jsx2(QueryClientProvider, { client: queryClient, children }) });
+}
+function useOptionalFrontXQueryClient() {
+  return useContext3(FrontXQueryClientContext);
+}
+function useRequiredFrontXQueryClient() {
+  const queryClient = useOptionalFrontXQueryClient();
+  if (!queryClient) {
+    throw new Error(
+      "[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition."
+    );
+  }
+  return queryClient;
+}
+function buildPageContext(page, pages, descriptor, descriptors) {
+  return {
+    page,
+    pages,
+    descriptor,
+    descriptors
+  };
+}
+function normalizeFetchStaleTime(staleTime) {
+  if (staleTime === "static") {
+    return Number.POSITIVE_INFINITY;
+  }
+  return typeof staleTime === "number" ? staleTime : void 0;
+}
+function resolveFetchStaleTime(queryClient, descriptor, overrideStaleTime) {
+  return normalizeFetchStaleTime(
+    overrideStaleTime ?? descriptor.staleTime ?? queryClient.getDefaultOptions().queries?.staleTime
+  );
+}
+function fetchDescriptor(descriptor, options) {
+  return descriptor.fetch(options);
+}
+function useFrontXQuery(descriptor, overrides) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const staleTime = resolveFetchStaleTime(queryClient, descriptor, overrides?.staleTime);
+  const result = useQuery({
+    queryKey: descriptor.key,
+    queryFn: ({ signal }) => fetchDescriptor(descriptor, { signal, staleTime }),
+    staleTime: overrides?.staleTime ?? descriptor.staleTime,
+    gcTime: overrides?.gcTime ?? descriptor.gcTime
+  });
+  return {
+    data: result.data,
+    error: result.error,
+    isLoading: result.isLoading,
+    isFetching: result.isFetching,
+    isError: result.isError,
+    refetch: result.refetch
+  };
+}
+function useFrontXSuspenseQuery(descriptor, overrides) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const staleTime = resolveFetchStaleTime(queryClient, descriptor, overrides?.staleTime);
+  const result = useSuspenseQuery({
+    queryKey: descriptor.key,
+    queryFn: ({ signal }) => fetchDescriptor(descriptor, { signal, staleTime }),
+    staleTime: overrides?.staleTime ?? descriptor.staleTime,
+    gcTime: overrides?.gcTime ?? descriptor.gcTime
+  });
+  return {
+    data: result.data,
+    error: result.error,
+    isFetching: result.isFetching,
+    refetch: async () => {
+      await result.refetch();
+    }
+  };
+}
+function useFrontXInfiniteQuery(options) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const result = useInfiniteQuery({
+    queryKey: options.initialPage.key,
+    initialPageParam: options.initialPage,
+    queryFn: ({ pageParam, signal }) => fetchDescriptor(pageParam, {
+      signal,
+      staleTime: resolveFetchStaleTime(queryClient, pageParam, options.staleTime)
+    }),
+    getNextPageParam: (lastPage, allPages, lastPageDescriptor, allPageDescriptors) => options.getNextPage(
+      buildPageContext(
+        lastPage,
+        allPages,
+        lastPageDescriptor,
+        allPageDescriptors
+      )
+    ),
+    getPreviousPageParam: options.getPreviousPage ? (firstPage, allPages, firstPageDescriptor, allPageDescriptors) => options.getPreviousPage?.(
+      buildPageContext(
+        firstPage,
+        allPages,
+        firstPageDescriptor,
+        allPageDescriptors
+      )
+    ) : void 0,
+    select: (data) => data.pages,
+    staleTime: options.staleTime ?? options.initialPage.staleTime,
+    gcTime: options.gcTime ?? options.initialPage.gcTime,
+    maxPages: options.maxPages
+  });
+  return {
+    data: result.data,
+    error: result.error,
+    isLoading: result.isLoading,
+    isFetching: result.isFetching,
+    isError: result.isError,
+    hasNextPage: result.hasNextPage ?? false,
+    hasPreviousPage: result.hasPreviousPage ?? false,
+    isFetchingNextPage: result.isFetchingNextPage,
+    isFetchingPreviousPage: result.isFetchingPreviousPage,
+    fetchNextPage: async () => {
+      await result.fetchNextPage();
+    },
+    fetchPreviousPage: async () => {
+      await result.fetchPreviousPage();
+    },
+    refetch: async () => {
+      await result.refetch();
+    }
+  };
+}
+function useFrontXSuspenseInfiniteQuery(options) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const result = useSuspenseInfiniteQuery({
+    queryKey: options.initialPage.key,
+    initialPageParam: options.initialPage,
+    queryFn: ({ pageParam, signal }) => fetchDescriptor(pageParam, {
+      signal,
+      staleTime: resolveFetchStaleTime(queryClient, pageParam, options.staleTime)
+    }),
+    getNextPageParam: (lastPage, allPages, lastPageDescriptor, allPageDescriptors) => options.getNextPage(
+      buildPageContext(
+        lastPage,
+        allPages,
+        lastPageDescriptor,
+        allPageDescriptors
+      )
+    ),
+    getPreviousPageParam: options.getPreviousPage ? (firstPage, allPages, firstPageDescriptor, allPageDescriptors) => options.getPreviousPage?.(
+      buildPageContext(
+        firstPage,
+        allPages,
+        firstPageDescriptor,
+        allPageDescriptors
+      )
+    ) : void 0,
+    select: (data) => data.pages,
+    staleTime: options.staleTime ?? options.initialPage.staleTime,
+    gcTime: options.gcTime ?? options.initialPage.gcTime,
+    maxPages: options.maxPages
+  });
+  return {
+    data: result.data,
+    error: result.error,
+    isFetching: result.isFetching,
+    hasNextPage: result.hasNextPage ?? false,
+    hasPreviousPage: result.hasPreviousPage ?? false,
+    isFetchingNextPage: result.isFetchingNextPage,
+    isFetchingPreviousPage: result.isFetchingPreviousPage,
+    fetchNextPage: async () => {
+      await result.fetchNextPage();
+    },
+    fetchPreviousPage: async () => {
+      await result.fetchPreviousPage();
+    },
+    refetch: async () => {
+      await result.refetch();
+    }
+  };
+}
+function useFrontXMutation(options, callbackCtx) {
+  useRequiredFrontXQueryClient();
+  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(() => {
+    return () => {
+      abortFetchesOnUnmount();
+    };
+  }, []);
+  const mutationFn = React.useCallback((variables, context) => {
+    const cancelOnSupersede = latestRef.current.options.cancelOnSupersede;
+    if (cancelOnSupersede) {
+      for (const controller2 of fetchAbortControllersRef.current) {
+        controller2.abort();
+      }
+      fetchAbortControllersRef.current.clear();
+    }
+    const controller = new AbortController();
+    fetchAbortControllersRef.current.add(controller);
+    const librarySignal = context.signal;
+    if (cancelOnSupersede && librarySignal) {
+      if (librarySignal.aborted) {
+        controller.abort();
+      } else {
+        librarySignal.addEventListener("abort", () => controller.abort(), { once: true });
+      }
+    }
+    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?.(
+      data,
+      error,
+      variables,
+      context,
+      current.callbackCtx
+    );
+  }, [latestRef]);
+  const mutation = useMutation({
+    mutationFn,
+    onMutate: options.onMutate ? onMutate : void 0,
+    onSuccess: options.onSuccess ? onSuccess : void 0,
+    onError: options.onError ? onError : void 0,
+    onSettled: options.onSettled ? onSettled : void 0
+  });
+  return {
+    mutate: mutation.mutate,
+    mutateAsync: mutation.mutateAsync,
+    isPending: mutation.isPending,
+    error: mutation.error,
+    data: mutation.data,
+    reset: mutation.reset
+  };
+}
+
+// src/FrontXProvider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) return false;
+  return keysA.every((k) => Object.is(a[k], b[k]));
+}
+function createProviderOwnedApp(config) {
+  return createFrontXApp(config);
+}
+var FrontXProvider = ({
   children,
   config,
   app: providedApp,
   mfeBridge
 }) => {
-  const app = useMemo(() => {
+  const [stableConfig, setStableConfig] = useState2(config);
+  if (!shallowEqual(
+    stableConfig,
+    config
+  )) {
+    setStableConfig(config);
+  }
+  const app = useMemo2(() => {
     if (providedApp) {
       return providedApp;
     }
-    return createHAI3App(config);
-  }, [providedApp, config]);
-  useEffect(() => {
+    return createProviderOwnedApp(stableConfig);
+  }, [providedApp, stableConfig]);
+  const queryClient = useBootstrappedFrontXQueryClient(app);
+  const deferQuerySubtree = hasFrontXQueryClientActivator(app) && queryClient === void 0;
+  useEffect3(() => {
+    if (queryClient || hasFrontXQueryClientActivator(app) || process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test" || process.env.VITEST === "true") {
+      return;
+    }
+    console.warn(
+      "[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition. useApiQuery/useApiMutation will fail without it."
+    );
+  }, [app, queryClient]);
+  useEffect3(() => {
     return () => {
       if (!providedApp) {
         app.destroy();
       }
     };
   }, [app, providedApp]);
-  const content = /* @__PURE__ */ jsx2(HAI3Context.Provider, { value: app, children: /* @__PURE__ */ jsx2(ReduxProvider, { store: app.store, children }) });
+  const content = /* @__PURE__ */ jsx3(FrontXContext.Provider, { value: app, children: /* @__PURE__ */ jsx3(ReduxProvider, { store: app.store, children: /* @__PURE__ */ jsx3(FrontXQueryClientProvider, { queryClient, children: deferQuerySubtree ? null : children }) }) });
   if (mfeBridge) {
-    return /* @__PURE__ */ jsx2(MfeProvider, { value: mfeBridge, children: content });
+    return /* @__PURE__ */ jsx3(MfeProvider, { value: mfeBridge, children: content });
   }
   return content;
 };
 
+// src/hooks/useCanAccess.ts
+import { useEffect as useEffect4, useState as useState3 } from "react";
+function serializeRecordValue(value) {
+  if (value === null) return "n:";
+  if (typeof value === "string") return `s:${value}`;
+  if (typeof value === "number") {
+    return `d:${Object.is(value, -0) ? "-0" : String(value)}`;
+  }
+  return value ? "b:1" : "b:0";
+}
+function accessQueryKey(query) {
+  const { action, resource, record } = query;
+  const normalizedRecord = record ? Object.entries(record).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => [k, serializeRecordValue(v)]) : null;
+  return JSON.stringify([action, resource, normalizedRecord]);
+}
+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 [runState, setRunState] = useState3({ auth: auth2, stableKey });
+  const [result, setResult] = useState3({ allow: false, isResolving: true });
+  if (runState.auth !== auth2 || runState.stableKey !== stableKey) {
+    setRunState({ auth: auth2, stableKey });
+    setStableQuery(query);
+    setResult({ allow: false, isResolving: true });
+  }
+  useEffect4(() => {
+    if (!auth2) {
+      return;
+    }
+    let alive = true;
+    const controller = new AbortController();
+    void auth2.canAccess(stableQuery, { signal: controller.signal }).then((decision) => {
+      if (alive) {
+        setResult({ allow: decision === "allow", isResolving: false });
+      }
+    }).catch(() => {
+      if (alive) {
+        setResult({ allow: false, isResolving: false });
+      }
+    });
+    return () => {
+      alive = false;
+      controller.abort();
+    };
+  }, [auth2, stableQuery]);
+  return auth2 ? result : DENIED_NO_AUTH;
+}
+
+// src/components/CanAccess.tsx
+function CanAccess({
+  query,
+  allowed,
+  denied = null,
+  loading
+}) {
+  const { allow, isResolving } = useCanAccess(query);
+  if (isResolving) {
+    return loading !== void 0 ? loading : denied;
+  }
+  return allow ? allowed : denied;
+}
+
 // src/hooks/useAppDispatch.ts
 import { useDispatch } from "react-redux";
 function useAppDispatch() {
@@ -74,9 +632,9 @@ import { useSelector } from "react-redux";
 var useAppSelector = useSelector;
 
 // src/hooks/useTranslation.ts
-import { useMemo as useMemo2, useCallback, useSyncExternalStore } from "react";
+import { useMemo as useMemo3, useCallback, useSyncExternalStore } from "react";
 function useTranslation() {
-  const app = useHAI3();
+  const app = useFrontX();
   const { i18nRegistry: i18nRegistry2 } = app;
   const version = useSyncExternalStore(
     useCallback(
@@ -88,7 +646,7 @@ function useTranslation() {
     () => i18nRegistry2.getVersion(),
     () => i18nRegistry2.getVersion()
   );
-  const language = useMemo2(() => {
+  const language = useMemo3(() => {
     void version;
     return i18nRegistry2.getLanguage();
   }, [i18nRegistry2, version]);
@@ -106,7 +664,7 @@ function useTranslation() {
     },
     [app.actions]
   );
-  const isRTL = useMemo2(() => {
+  const isRTL = useMemo3(() => {
     void language;
     return i18nRegistry2.isRTL();
   }, [i18nRegistry2, language]);
@@ -119,16 +677,15 @@ function useTranslation() {
 }
 
 // src/hooks/useScreenTranslations.ts
-import { useState, useEffect as useEffect2, useMemo as useMemo3, 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";
 }
 function useScreenTranslations(screensetId, screenId, translations) {
-  const app = useHAI3();
+  const app = useFrontX();
   const { i18nRegistry: i18nRegistry2 } = app;
-  const [loadedLanguage, setLoadedLanguage] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
+  const [loadedLanguage, setLoadedLanguage] = useState4(null);
+  const [error, setError] = useState4(null);
   const version = useSyncExternalStore2(
     useCallback2(
       (callback) => i18nRegistry2.subscribe(callback),
@@ -137,11 +694,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
     () => i18nRegistry2.getVersion(),
     () => i18nRegistry2.getVersion()
   );
-  const currentLanguage = useMemo3(() => {
+  const currentLanguage = useMemo4(() => {
     void version;
     return i18nRegistry2.getLanguage();
   }, [i18nRegistry2, version]);
-  const loader = useMemo3(() => {
+  const loader = useMemo4(() => {
     if (isTranslationLoader(translations)) {
       return translations;
     }
@@ -154,12 +711,11 @@ function useScreenTranslations(screensetId, screenId, translations) {
       return module.default;
     };
   }, [translations]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (!currentLanguage || currentLanguage === loadedLanguage) {
       return;
     }
     let cancelled = false;
-    setIsLoading(true);
     const loadTranslations = async () => {
       try {
         const namespace = `screen.${screensetId}.${screenId}`;
@@ -168,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);
         }
       }
     };
@@ -183,12 +737,12 @@ 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 };
 }
 
 // src/hooks/useFormatters.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import {
   formatDate as formatDateFn,
   formatTime as formatTimeFn,
@@ -203,7 +757,7 @@ import {
 } from "@gears-frontx/framework";
 function useFormatters() {
   const { language } = useTranslation();
-  return useMemo4(
+  return useMemo5(
     () => {
       void language;
       return {
@@ -224,9 +778,9 @@ function useFormatters() {
 }
 
 // src/hooks/useTheme.ts
-import { useCallback as useCallback3, useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useTheme() {
-  const app = useHAI3();
+  const app = useFrontX();
   const { themeRegistry } = app;
   const version = useSyncExternalStore3(
     useCallback3(
@@ -238,12 +792,12 @@ function useTheme() {
     () => themeRegistry.getVersion(),
     () => themeRegistry.getVersion()
   );
-  const currentTheme = useMemo5(() => {
+  const currentTheme = useMemo6(() => {
     void version;
     const theme = themeRegistry.getCurrent();
     return theme?.id;
   }, [themeRegistry, version]);
-  const themes2 = useMemo5(() => {
+  const themes2 = useMemo6(() => {
     return themeRegistry.getAll().map((theme) => ({
       id: theme.id,
       name: theme.name
@@ -264,6 +818,145 @@ function useTheme() {
   };
 }
 
+// src/hooks/useApiQuery.ts
+function useApiQuery(descriptor, overrides) {
+  return useFrontXQuery(descriptor, overrides);
+}
+
+// src/hooks/useApiSuspenseQuery.ts
+function useApiSuspenseQuery(descriptor, overrides) {
+  return useFrontXSuspenseQuery(descriptor, overrides);
+}
+
+// src/hooks/useApiInfiniteQuery.ts
+function useApiInfiniteQuery(options) {
+  return useFrontXInfiniteQuery(options);
+}
+
+// src/hooks/useApiSuspenseInfiniteQuery.ts
+function useApiSuspenseInfiniteQuery(options) {
+  return useFrontXSuspenseInfiniteQuery(options);
+}
+
+// src/hooks/useApiMutation.ts
+import { useMemo as useMemo7 } from "react";
+function useApiMutation(options) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const queryCache2 = useMemo7(() => createQueryCache(queryClient), [queryClient]);
+  const callbackCtx = useMemo7(() => ({ queryCache: queryCache2 }), [queryCache2]);
+  return useFrontXMutation(options, callbackCtx);
+}
+
+// src/hooks/useApiStream.ts
+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(() => enabled ? "connecting" : "idle");
+  const [error, setError] = useState5(null);
+  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]);
+  const resetKey = `${descriptorKey}:${mode}`;
+  const [prevResetKey, setPrevResetKey] = useState5(resetKey);
+  if (resetKey !== prevResetKey) {
+    setPrevResetKey(resetKey);
+    setData(void 0);
+    setEvents([]);
+    setError(null);
+  }
+  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) {
+      descriptorRef.current.disconnect(connectionIdRef.current);
+      connectionIdRef.current = null;
+      disconnectRequestedRef.current = false;
+    }
+    setStatus("disconnected");
+  }, [descriptorRef]);
+  useEffect6(() => {
+    if (!enabled) {
+      return;
+    }
+    let cancelled = false;
+    disconnectRequestedRef.current = false;
+    const d = descriptorRef.current;
+    const connectPromise = d.connect(
+      (event) => {
+        if (cancelled) return;
+        setData(event);
+        setStatus("connected");
+        if (mode === "accumulate") {
+          setEvents((prev) => [...prev, event]);
+        }
+      },
+      () => {
+        if (cancelled) return;
+        setStatus("disconnected");
+        connectionIdRef.current = null;
+      }
+    );
+    connectPromiseRef.current = connectPromise;
+    connectPromise.then((id) => {
+      if (cancelled) return;
+      if (disconnectRequestedRef.current) {
+        d.disconnect(id);
+        disconnectRequestedRef.current = false;
+        return;
+      }
+      connectionIdRef.current = id;
+      setStatus("connected");
+    }).catch((err) => {
+      if (cancelled) return;
+      if (disconnectRequestedRef.current) {
+        disconnectRequestedRef.current = false;
+        setStatus("disconnected");
+        return;
+      }
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setStatus("error");
+    });
+    return () => {
+      cancelled = true;
+      connectPromise.then(
+        (id) => d.disconnect(id),
+        () => {
+        }
+      );
+      connectPromiseRef.current = null;
+      connectionIdRef.current = null;
+    };
+  }, [descriptorKey, enabled, mode, descriptorRef]);
+  return { data, events, status: enabled ? status : "idle", error, disconnect };
+}
+
+// src/hooks/useQueryCache.ts
+import { useMemo as useMemo9 } from "react";
+function useQueryCache() {
+  const queryClient = useOptionalFrontXQueryClient();
+  if (!queryClient) {
+    throw new Error(
+      "[FrontXProvider] No query cache available. Add queryCache() or queryCacheShared() to your plugin composition."
+    );
+  }
+  return useMemo9(() => createQueryCache(queryClient), [queryClient]);
+}
+
 // src/mfe/hooks/useMfeBridge.ts
 function useMfeBridge() {
   const { bridge } = useMfeContext();
@@ -271,15 +964,15 @@ function useMfeBridge() {
 }
 
 // src/mfe/hooks/useSharedProperty.ts
-import { useSyncExternalStore as useSyncExternalStore4, useCallback as useCallback4 } from "react";
+import { useSyncExternalStore as useSyncExternalStore4, useCallback as useCallback5 } from "react";
 function useSharedProperty(propertyTypeId) {
   const { bridge } = useMfeContext();
-  const subscribe = useCallback4((callback) => {
+  const subscribe = useCallback5((callback) => {
     return bridge.subscribeToProperty(propertyTypeId, () => {
       callback();
     });
   }, [bridge, propertyTypeId]);
-  const getSnapshot = useCallback4(() => {
+  const getSnapshot = useCallback5(() => {
     const property = bridge.getProperty(propertyTypeId);
     return property?.value;
   }, [bridge, propertyTypeId]);
@@ -288,14 +981,14 @@ function useSharedProperty(propertyTypeId) {
 }
 
 // src/mfe/hooks/useHostAction.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 function useHostAction(actionTypeId) {
   const { bridge } = useMfeContext();
-  return useCallback5((payload) => {
+  return useCallback6((payload) => {
     const chain = {
       action: {
         type: actionTypeId,
-        target: bridge.domainId,
+        target: bridge.extDomainId,
         payload
       }
     };
@@ -309,23 +1002,23 @@ function useHostAction(actionTypeId) {
 }
 
 // src/mfe/hooks/useDomainExtensions.ts
-import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback6, useRef } from "react";
+import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback7, useRef as useRef3 } from "react";
 function useDomainExtensions(domainId) {
-  const app = useHAI3();
-  const registry = app.screensetsRegistry;
+  const app = useFrontX();
+  const registry = app.mfeRegistry;
   if (!registry) {
     throw new Error(
-      "useDomainExtensions requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
+      "useDomainExtensions requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
     );
   }
-  const subscribe = useCallback6(
+  const subscribe = useCallback7(
     (onStoreChange) => {
       return app.store.subscribe(onStoreChange);
     },
     [app.store]
   );
-  const cacheRef = useRef({ ids: "", extensions: [] });
-  const getSnapshot = useCallback6(() => {
+  const cacheRef = useRef3({ ids: "", extensions: [] });
+  const getSnapshot = useCallback7(() => {
     const extensions = registry.getExtensionsForDomain(domainId);
     const ids = extensions.map((e) => e.id).join(",");
     if (ids !== cacheRef.current.ids) {
@@ -336,216 +1029,230 @@ function useDomainExtensions(domainId) {
   return useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
 }
 
-// src/mfe/hooks/useRegisteredPackages.ts
-import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback7, useRef as useRef2 } from "react";
-function useRegisteredPackages() {
-  const app = useHAI3();
-  const registry = app.screensetsRegistry;
+// src/mfe/hooks/useMountedExtensions.ts
+import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback8, useRef as useRef4 } from "react";
+function useMountedExtensions(domainId) {
+  const app = useFrontX();
+  const registry = app.mfeRegistry;
   if (!registry) {
     throw new Error(
-      "useRegisteredPackages requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
+      "useMountedExtensions requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
     );
   }
-  const subscribe = useCallback7(
+  const subscribe = useCallback8(
     (onStoreChange) => {
       return app.store.subscribe(onStoreChange);
     },
     [app.store]
   );
-  const cacheRef = useRef2({ packages: "", list: [] });
-  const getSnapshot = useCallback7(() => {
-    const list = registry.getRegisteredPackages();
-    const packages = list.join(",");
-    if (packages !== cacheRef.current.packages) {
-      cacheRef.current = { packages, list };
+  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);
+    const key = ids.join(",");
+    if (key !== cacheRef.current.key) {
+      cacheRef.current = { key, extensions: resolved };
     }
-    return cacheRef.current.list;
-  }, [registry]);
+    return cacheRef.current.extensions;
+  }, [registry, domainId]);
   return useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
 }
 
-// src/mfe/hooks/useActivePackage.ts
-import { useSyncExternalStore as useSyncExternalStore7, useCallback as useCallback8, useRef as useRef3 } from "react";
-import { extractGtsPackage, FRONTX_SCREEN_DOMAIN } from "@gears-frontx/framework";
-function useActivePackage() {
-  const app = useHAI3();
-  const registry = app.screensetsRegistry;
+// src/mfe/hooks/useRegisteredPackages.ts
+import { useSyncExternalStore as useSyncExternalStore7, useCallback as useCallback9, useRef as useRef5 } from "react";
+function useRegisteredPackages() {
+  const app = useFrontX();
+  const registry = app.mfeRegistry;
   if (!registry) {
     throw new Error(
-      "useActivePackage requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
+      "useRegisteredPackages requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration."
     );
   }
-  const subscribe = useCallback8(
+  const subscribe = useCallback9(
     (onStoreChange) => {
       return app.store.subscribe(onStoreChange);
     },
     [app.store]
   );
-  const cacheRef = useRef3({ activePackage: void 0 });
-  const getSnapshot = useCallback8(() => {
-    const mountedExtensionId = registry.getMountedExtension(FRONTX_SCREEN_DOMAIN);
-    if (!mountedExtensionId) {
-      const result = void 0;
-      if (result !== cacheRef.current.activePackage) {
-        cacheRef.current = { activePackage: result };
-      }
-      return cacheRef.current.activePackage;
-    }
-    const activePackage = extractGtsPackage(mountedExtensionId);
-    if (activePackage !== cacheRef.current.activePackage) {
-      cacheRef.current = { activePackage };
+  const cacheRef = useRef5({ packages: "", list: [] });
+  const getSnapshot = useCallback9(() => {
+    const list = registry.getRegisteredPackages();
+    const packages = list.join(",");
+    if (packages !== cacheRef.current.packages) {
+      cacheRef.current = { packages, list };
     }
-    return cacheRef.current.activePackage;
+    return cacheRef.current.list;
   }, [registry]);
   return useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
 }
 
-// src/mfe/components/RefContainerProvider.ts
-import { ContainerProvider } from "@gears-frontx/framework";
-var RefContainerProvider = class extends ContainerProvider {
-  constructor(containerRef) {
-    super();
-    this.containerRef = containerRef;
+// src/mfe/ThemeAwareReactLifecycle.tsx
+import { createRoot } from "react-dom/client";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function resolveProviderMountOptions(app, bridge, mountContext) {
+  const extensionId = mountContext?.extensionId;
+  const domainId = mountContext?.domainId;
+  const isMountedMfe = typeof extensionId === "string" && typeof domainId === "string";
+  if (isMountedMfe && !resolveFrontXQueryClient(app) && !hasFrontXQueryClientActivator(app)) {
+    throw new Error(
+      "[FrontXProvider] Mounted MFEs require queryCacheShared() in the child app and queryCache() in the host app before loading the MFE app."
+    );
+  }
+  return {
+    mfeBridge: isMountedMfe ? { bridge, extensionId, domainId } : void 0
+  };
+}
+function MountRuntimeAwareProvider({
+  app,
+  mfeBridge,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(FrontXProvider, { app, mfeBridge, children });
+}
+var ThemeAwareReactLifecycle = class {
+  constructor(app) {
+    this.app = app;
   }
-  getContainer(_extensionId) {
-    if (!this.containerRef.current) {
-      throw new Error("Container ref is not attached -- component may not be mounted yet");
+  app;
+  root = null;
+  mount(container, bridge, mountContext) {
+    if (container instanceof ShadowRoot) {
+      this.adoptHostStylesIntoShadowRoot(container);
     }
-    return this.containerRef.current;
+    this.injectBaseResets(container);
+    this.initializeStyles(container);
+    const providerMountOptions = resolveProviderMountOptions(this.app, bridge, mountContext);
+    this.root = createRoot(container);
+    this.root.render(
+      /* @__PURE__ */ jsx4(
+        MountRuntimeAwareProvider,
+        {
+          app: this.app,
+          mfeBridge: providerMountOptions.mfeBridge,
+          children: this.renderContent(bridge)
+        }
+      )
+    );
+  }
+  unmount(_container) {
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
+  }
+  /**
+   * 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.
+   */
+  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);
+    });
+  }
+  /**
+   * 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.
+   */
+  injectBaseResets(container) {
+    const style = document.createElement("style");
+    style.textContent = `
+      *, *::before, *::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: currentColor;
+      }
+      * { margin: 0; padding: 0; }
+      :host {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        color: hsl(var(--foreground));
+        background-color: hsl(var(--background));
+      }
+    `;
+    container.appendChild(style);
   }
-  releaseContainer(_extensionId) {
+  /**
+   * Hook for subclasses to inject additional CSS not covered by the adopted host
+   * stylesheet (e.g., MFE-specific @font-face rules or custom animations).
+   * No-op by default: host styles adopted in adoptHostStylesIntoShadowRoot()
+   * already include all Tailwind utilities compiled from MFE source files.
+   */
+  initializeStyles(_container) {
   }
 };
 
 // src/mfe/components/ExtensionDomainSlot.tsx
-import { useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "react";
-import {
-  FRONTX_ACTION_MOUNT_EXT,
-  FRONTX_ACTION_UNMOUNT_EXT
-} from "@gears-frontx/framework";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+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 {
     registry,
     domainId,
-    extensionId,
     className,
-    onMounted,
-    onUnmounted,
-    onError,
-    loadingComponent,
-    errorComponent
+    onAttached,
+    onDetached,
+    loadingComponent = null
   } = props;
-  const containerRef = useRef4(null);
-  const [isLoading, setIsLoading] = useState2(true);
-  const [error, setError] = useState2(null);
-  const [bridge, setBridge] = useState2(null);
-  useEffect3(() => {
-    let mounted = true;
-    let currentBridge = null;
-    async function mountExtension2() {
-      if (!containerRef.current) {
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        await registry.executeActionsChain({
-          action: {
-            type: FRONTX_ACTION_MOUNT_EXT,
-            target: domainId,
-            payload: {
-              extensionId
-            }
-          }
-        });
-        if (!mounted) {
-          await registry.executeActionsChain({
-            action: {
-              type: FRONTX_ACTION_UNMOUNT_EXT,
-              target: domainId,
-              payload: {
-                extensionId
-              }
-            }
-          });
-          return;
-        }
-        const newBridge = registry.getParentBridge(extensionId);
-        if (!newBridge) {
-          throw new Error(`Failed to obtain bridge for extension ${extensionId} after mount`);
-        }
-        currentBridge = newBridge;
-        setBridge(newBridge);
-        setIsLoading(false);
-        if (onMounted) {
-          onMounted(newBridge);
-        }
-      } catch (err) {
-        if (!mounted) {
-          return;
-        }
-        const errorObj = err instanceof Error ? err : new Error(String(err));
-        setError(errorObj);
-        setIsLoading(false);
-        if (onError) {
-          onError(errorObj);
-        }
-      }
+  const rootRef = useRef6(null);
+  const emitAttached = useEffectEvent((root) => {
+    onAttached?.(root);
+  });
+  const emitDetached = useEffectEvent(() => {
+    onDetached?.();
+  });
+  const [attached, setAttached] = useState6(false);
+  useEffect7(() => {
+    const root = rootRef.current;
+    if (!root) {
+      return;
     }
-    void mountExtension2();
+    const mounter = registry.getMounter(domainId);
+    mounter.attach(root);
+    setAttached(true);
+    emitAttached(root);
     return () => {
-      mounted = false;
-      if (currentBridge) {
-        void registry.executeActionsChain({
-          action: {
-            type: FRONTX_ACTION_UNMOUNT_EXT,
-            target: domainId,
-            payload: {
-              extensionId
-            }
-          }
-        }).then(() => {
-          if (onUnmounted) {
-            onUnmounted();
-          }
-        });
-      }
+      void mounter.detach();
+      setAttached(false);
+      emitDetached();
     };
-  }, [registry, domainId, extensionId, onMounted, onUnmounted, onError]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx3("div", { className, "data-domain-id": domainId, "data-extension-id": extensionId, children: loadingComponent ?? /* @__PURE__ */ jsx3("div", { children: "Loading extension..." }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx3("div", { className, "data-domain-id": domainId, "data-extension-id": extensionId, children: errorComponent ? errorComponent(error) : /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx3("strong", { children: "Error loading extension:" }),
-      /* @__PURE__ */ jsx3("pre", { children: error.message })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx3(
+  }, [registry, domainId]);
+  return /* @__PURE__ */ jsx5(
     "div",
     {
-      ref: containerRef,
+      ref: rootRef,
       className,
       "data-domain-id": domainId,
-      "data-extension-id": extensionId,
-      "data-bridge-active": bridge !== null
+      children: !attached ? loadingComponent : null
     }
   );
 }
 
 // src/index.ts
 import {
-  createHAI3,
-  createHAI3App as createHAI3App2,
+  createFrontX,
+  createFrontXApp as createFrontXApp2,
   presets,
   ACCOUNTS_DOMAIN,
   I18nRegistry,
-  screensets,
   themes,
   layout,
   i18n,
   effects,
+  queryCache,
+  queryCacheShared,
+  subscribeQueryCacheRuntimeChanged as subscribeQueryCacheRuntimeChanged2,
   createThemeRegistry,
   createStore,
   getStore,
@@ -560,14 +1267,12 @@ import {
   footerSlice,
   menuSlice,
   sidebarSlice,
-  screenSlice,
   popupSlice,
   overlaySlice,
   headerActions,
   footerActions,
   menuActions,
   sidebarActions,
-  screenActions,
   popupActions,
   overlayActions,
   setUser,
@@ -588,10 +1293,6 @@ import {
   setSidebarVisible,
   setSidebarWidth,
   setSidebarConfig,
-  setActiveScreen,
-  setScreenLoading,
-  navigateTo,
-  clearActiveScreen,
   openPopup,
   closePopup,
   closeTopPopup,
@@ -617,10 +1318,14 @@ import {
   initMockEffects,
   toggleMockMode,
   MockEvents,
+  auth,
+  frontxApiTransport,
   apiRegistry,
   BaseApiService,
   RestProtocol,
+  RestEndpointProtocol,
   SseProtocol,
+  SseStreamProtocol,
   RestMockPlugin,
   SseMockPlugin,
   MockEventSource,
@@ -644,7 +1349,7 @@ import {
 } from "@gears-frontx/framework";
 import { Language, TextDirection, LanguageDisplayMode } from "@gears-frontx/framework";
 import {
-  microfrontends,
+  microfrontends as microfrontends2,
   mock
 } from "@gears-frontx/framework";
 import {
@@ -657,12 +1362,13 @@ import {
 import {
   selectExtensionState,
   selectRegisteredExtensions,
-  selectExtensionError
+  selectExtensionError,
+  selectMountedExtensions
 } from "@gears-frontx/framework";
 import {
   FRONTX_POPUP_DOMAIN,
   FRONTX_SIDEBAR_DOMAIN,
-  FRONTX_SCREEN_DOMAIN as FRONTX_SCREEN_DOMAIN2,
+  FRONTX_SCREEN_DOMAIN,
   FRONTX_OVERLAY_DOMAIN,
   screenDomain,
   sidebarDomain,
@@ -675,51 +1381,67 @@ import {
 } from "@gears-frontx/framework";
 import {
   FRONTX_ACTION_LOAD_EXT,
-  FRONTX_ACTION_MOUNT_EXT as FRONTX_ACTION_MOUNT_EXT2,
-  FRONTX_ACTION_UNMOUNT_EXT as FRONTX_ACTION_UNMOUNT_EXT2
+  FRONTX_ACTION_MOUNT_EXT,
+  FRONTX_ACTION_UNMOUNT_EXT
 } from "@gears-frontx/framework";
 import {
   FRONTX_SHARED_PROPERTY_THEME,
   FRONTX_SHARED_PROPERTY_LANGUAGE
 } from "@gears-frontx/framework";
 import {
+  ChildMfeBridge,
+  ParentMfeBridge,
   MfeHandler,
   MfeBridgeFactory,
-  ScreensetsRegistry,
-  ScreensetsRegistryFactory,
-  screensetsRegistryFactory,
-  ContainerProvider as ContainerProvider2
+  MfeRegistry,
+  MfeRegistryFactory,
+  mfeRegistryFactory,
+  ActionHandler,
+  ExtensionDomainImplementation,
+  ExtensionDomainImplementationFactory,
+  ExtensionMounter,
+  MountStrategy,
+  ConcurrentMountStrategy,
+  OptionalMountStrategy,
+  ExclusiveMountStrategy
 } from "@gears-frontx/framework";
 import { MfeHandlerMF, gtsPlugin } from "@gears-frontx/framework";
 import { themeSchema, languageSchema, extensionScreenSchema } from "@gears-frontx/framework";
 import {
   createShadowRoot,
   injectCssVariables,
-  extractGtsPackage as extractGtsPackage2
+  extractGtsPackage
 } from "@gears-frontx/framework";
 import { eventBus as frameworkEventBus } from "@gears-frontx/framework";
-var eventBus = frameworkEventBus;
+var eventBus2 = frameworkEventBus;
 export {
   ACCOUNTS_DOMAIN,
+  ActionHandler,
   ApiPlugin,
   ApiPluginBase,
   ApiProtocol,
   BaseApiService,
-  ContainerProvider2 as ContainerProvider,
+  CanAccess,
+  ChildMfeBridge,
+  ConcurrentMountStrategy,
+  ExclusiveMountStrategy,
+  ExtensionDomainImplementation,
+  ExtensionDomainImplementationFactory,
   ExtensionDomainSlot,
+  ExtensionMounter,
   FRONTX_ACTION_LOAD_EXT,
-  FRONTX_ACTION_MOUNT_EXT2 as FRONTX_ACTION_MOUNT_EXT,
-  FRONTX_ACTION_UNMOUNT_EXT2 as FRONTX_ACTION_UNMOUNT_EXT,
+  FRONTX_ACTION_MOUNT_EXT,
+  FRONTX_ACTION_UNMOUNT_EXT,
   FRONTX_MFE_ENTRY_MF,
   FRONTX_OVERLAY_DOMAIN,
   FRONTX_POPUP_DOMAIN,
-  FRONTX_SCREEN_DOMAIN2 as FRONTX_SCREEN_DOMAIN,
+  FRONTX_SCREEN_DOMAIN,
   FRONTX_SCREEN_EXTENSION_TYPE,
   FRONTX_SHARED_PROPERTY_LANGUAGE,
   FRONTX_SHARED_PROPERTY_THEME,
   FRONTX_SIDEBAR_DOMAIN,
-  HAI3Context,
-  HAI3Provider,
+  FrontXContext,
+  FrontXProvider,
   I18nRegistry,
   I18nRegistryImpl,
   LAYOUT_SLICE_NAME,
@@ -732,45 +1454,51 @@ export {
   MfeHandler,
   MfeHandlerMF,
   MfeProvider,
+  MfeRegistry,
+  MfeRegistryFactory,
   MockEventSource,
   MockEvents,
-  RefContainerProvider,
+  MountStrategy,
+  OptionalMountStrategy,
+  ParentMfeBridge,
+  RestEndpointProtocol,
   RestMockPlugin,
   RestPlugin,
   RestPluginWithConfig,
   RestProtocol,
   SUPPORTED_LANGUAGES,
-  ScreensetsRegistry,
-  ScreensetsRegistryFactory,
   SseMockPlugin,
   SsePlugin,
   SsePluginWithConfig,
   SseProtocol,
+  SseStreamProtocol,
   TENANT_SLICE_NAME,
   TenantEvents,
   TextDirection,
+  ThemeAwareReactLifecycle,
   apiRegistry,
+  auth,
   changeTenant,
-  clearActiveScreen,
   clearTenant,
   clearTenantAction,
   clearUser,
   closeAllPopups,
   closePopup,
   closeTopPopup,
-  createHAI3,
-  createHAI3App2 as createHAI3App,
+  createFrontX,
+  createFrontXApp2 as createFrontXApp,
   createI18nRegistry,
   createShadowRoot,
   createSlice,
   createStore,
   createThemeRegistry,
   effects,
-  eventBus,
+  eventBus2 as eventBus,
   extensionScreenSchema,
-  extractGtsPackage2 as extractGtsPackage,
+  extractGtsPackage,
   footerActions,
   footerSlice,
+  frontxApiTransport,
   getLanguageMetadata,
   getStore,
   gtsPlugin,
@@ -783,6 +1511,7 @@ export {
   initMockEffects,
   initTenantEffects,
   injectCssVariables,
+  invalidateQueryCacheForApp,
   isMockPlugin,
   isRestShortCircuit,
   isShortCircuit,
@@ -794,12 +1523,12 @@ export {
   loadExtension,
   menuActions,
   menuSlice,
-  microfrontends,
+  mfeRegistryFactory,
+  microfrontends2 as microfrontends,
   mock,
   mockActions,
   mockSlice,
   mountExtension,
-  navigateTo,
   openPopup,
   overlayActions,
   overlayDomain,
@@ -808,17 +1537,15 @@ export {
   popupDomain,
   popupSlice,
   presets,
+  queryCache,
+  queryCacheShared,
   registerExtension,
   registerSlice,
-  screenActions,
   screenDomain,
-  screenSlice,
-  screensets,
-  screensetsRegistryFactory,
   selectExtensionError,
   selectExtensionState,
+  selectMountedExtensions,
   selectRegisteredExtensions,
-  setActiveScreen,
   setFooterConfig,
   setFooterVisible,
   setHeaderLoading,
@@ -828,7 +1555,6 @@ export {
   setMenuVisible,
   setMockEnabled,
   setOverlayVisible,
-  setScreenLoading,
   setSidebarCollapsed,
   setSidebarConfig,
   setSidebarContent,
@@ -844,6 +1570,7 @@ export {
   sidebarActions,
   sidebarDomain,
   sidebarSlice,
+  subscribeQueryCacheRuntimeChanged2 as subscribeQueryCacheRuntimeChanged,
   tenantActions,
   tenantReducer,
   tenantSlice,
@@ -854,15 +1581,23 @@ export {
   toggleSidebar,
   unmountExtension,
   unregisterExtension,
-  useActivePackage,
+  useApiInfiniteQuery,
+  useApiMutation,
+  useApiQuery,
+  useApiStream,
+  useApiSuspenseInfiniteQuery,
+  useApiSuspenseQuery,
   useAppDispatch,
   useAppSelector,
+  useCanAccess,
   useDomainExtensions,
   useFormatters,
-  useHAI3,
+  useFrontX,
   useHostAction,
   useMfeBridge,
   useMfeContext,
+  useMountedExtensions,
+  useQueryCache,
   useRegisteredPackages,
   useScreenTranslations,
   useSharedProperty,