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

package/dist/index.js

@@ -1,16 +1,15 @@
-// src/HAI3Provider.tsx
-import { useMemo, useEffect } from "react";
+// src/FrontXProvider.tsx
+import { useEffect as useEffect3 } from "react";
 import { Provider as ReduxProvider } from "react-redux";
-import { createHAI3App } 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 +34,644 @@ var MfeProvider = ({ value, children }) => {
   return /* @__PURE__ */ jsx(MfeContext.Provider, { value, children });
 };
 
-// src/HAI3Provider.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var HAI3Provider = ({
-  children,
-  config,
-  app: providedApp,
-  mfeBridge
-}) => {
-  const app = useMemo(() => {
-    if (providedApp) {
-      return providedApp;
+// 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 {
+  readQueryCacheScopeGeneration,
+  recordQueryCacheScopeWriteDropped,
+  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)
+      });
     }
-    return createHAI3App(config);
-  }, [providedApp, config]);
+  };
+}
+
+// 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" ? 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;
+  }
+  if (typeof staleTime === "function") {
+    return 0;
+  }
+  return typeof staleTime === "number" ? staleTime : void 0;
+}
+function resolveFetchStaleTime(queryClient, queryKey, descriptor, overrideStaleTime) {
+  const clientDefaults = {
+    ...queryClient.getDefaultOptions().queries,
+    ...queryClient.getQueryDefaults(queryKey)
+  };
+  return normalizeFetchStaleTime(
+    overrideStaleTime ?? descriptor.staleTime ?? clientDefaults.staleTime
+  );
+}
+function cacheTimeOptions(staleTime, gcTime) {
+  return {
+    ...staleTime === void 0 ? {} : { staleTime },
+    ...gcTime === void 0 ? {} : { gcTime }
+  };
+}
+function fetchDescriptor(descriptor, options) {
+  return descriptor.fetch(options);
+}
+function useFrontXQuery(descriptor, overrides) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const staleTime = resolveFetchStaleTime(
+    queryClient,
+    descriptor.key,
+    descriptor,
+    overrides?.staleTime
+  );
+  const result = useQuery({
+    queryKey: descriptor.key,
+    queryFn: ({ signal }) => fetchDescriptor(descriptor, { signal, staleTime }),
+    ...cacheTimeOptions(
+      overrides?.staleTime ?? descriptor.staleTime,
+      overrides?.gcTime ?? descriptor.gcTime
+    ),
+    ...overrides?.enabled === void 0 ? {} : { enabled: overrides.enabled }
+  });
+  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.key,
+    descriptor,
+    overrides?.staleTime
+  );
+  const result = useSuspenseQuery({
+    queryKey: descriptor.key,
+    queryFn: ({ signal }) => fetchDescriptor(descriptor, { signal, staleTime }),
+    ...cacheTimeOptions(
+      overrides?.staleTime ?? descriptor.staleTime,
+      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,
+        options.initialPage.key,
+        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,
+    ...cacheTimeOptions(
+      options.staleTime ?? options.initialPage.staleTime,
+      options.gcTime ?? options.initialPage.gcTime
+    ),
+    maxPages: options.maxPages,
+    ...options.enabled === void 0 ? {} : { enabled: options.enabled }
+  });
+  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,
+        options.initialPage.key,
+        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,
+    ...cacheTimeOptions(
+      options.staleTime ?? options.initialPage.staleTime,
+      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();
+    }
+  };
+}
+var mutationScopes = /* @__PURE__ */ new WeakMap();
+function scopeBoundQueryCache(queryCache2, scope) {
+  const scopeChanged = () => readQueryCacheScopeGeneration(scope.queryClient) !== scope.generation;
+  const dropped = () => {
+    if (!scopeChanged()) return false;
+    recordQueryCacheScopeWriteDropped(scope.queryClient, scope.generation);
+    return true;
+  };
+  return {
+    get: queryCache2.get,
+    getState: queryCache2.getState,
+    set: (key, dataOrUpdater) => {
+      if (!dropped()) queryCache2.set(key, dataOrUpdater);
+    },
+    cancel: (key) => scopeChanged() ? Promise.resolve() : queryCache2.cancel(key),
+    invalidate: (key) => dropped() ? Promise.resolve() : queryCache2.invalidate(key),
+    invalidateMany: (filters) => dropped() ? Promise.resolve() : queryCache2.invalidateMany(filters),
+    remove: (key) => {
+      if (!dropped()) queryCache2.remove(key);
+    }
+  };
+}
+function scopeBoundCallbackCtx(callbackCtx, scope) {
+  return scope ? { queryCache: scopeBoundQueryCache(createQueryCache(scope.queryClient), scope) } : callbackCtx;
+}
+function useFrontXMutation(options, callbackCtx) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const latestRef = useLatest({ options, callbackCtx, queryClient });
+  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 () => {
-      if (!providedApp) {
-        app.destroy();
+      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(async (variables, mutationFnContext) => {
+    const current = latestRef.current;
+    const scope = {
+      queryClient: current.queryClient,
+      generation: readQueryCacheScopeGeneration(current.queryClient)
     };
-  }, [app, providedApp]);
-  const content = /* @__PURE__ */ jsx2(HAI3Context.Provider, { value: app, children: /* @__PURE__ */ jsx2(ReduxProvider, { store: app.store, children }) });
+    mutationScopes.set(mutationFnContext, scope);
+    return current.options.onMutate?.(
+      variables,
+      scopeBoundCallbackCtx(current.callbackCtx, scope)
+    );
+  }, [latestRef]);
+  const onSuccess = React.useCallback((data, variables, context, mutationFnContext) => {
+    const current = latestRef.current;
+    return current.options.onSuccess?.(
+      data,
+      variables,
+      context,
+      scopeBoundCallbackCtx(current.callbackCtx, mutationScopes.get(mutationFnContext))
+    );
+  }, [latestRef]);
+  const onError = React.useCallback((error, variables, context, mutationFnContext) => {
+    const current = latestRef.current;
+    return current.options.onError?.(
+      error,
+      variables,
+      context,
+      scopeBoundCallbackCtx(current.callbackCtx, mutationScopes.get(mutationFnContext))
+    );
+  }, [latestRef]);
+  const onSettled = React.useCallback((data, error, variables, context, mutationFnContext) => {
+    const current = latestRef.current;
+    return current.options.onSettled?.(
+      data,
+      error,
+      variables,
+      context,
+      scopeBoundCallbackCtx(current.callbackCtx, mutationScopes.get(mutationFnContext))
+    );
+  }, [latestRef]);
+  const mutation = useMutation({
+    mutationFn,
+    onMutate,
+    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";
+var FrontXProvider = ({
+  children,
+  app,
+  mfeBridge
+}) => {
+  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]);
+  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 useState2 } 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] = useState2(() => query);
+  const [runState, setRunState] = useState2({ auth: auth2, stableKey });
+  const [result, setResult] = useState2({ 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() {
@@ -76,7 +685,7 @@ var useAppSelector = useSelector;
 // src/hooks/useTranslation.ts
 import { useMemo as useMemo2, useCallback, useSyncExternalStore } from "react";
 function useTranslation() {
-  const app = useHAI3();
+  const app = useFrontX();
   const { i18nRegistry: i18nRegistry2 } = app;
   const version = useSyncExternalStore(
     useCallback(
@@ -119,16 +728,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 useState3, useEffect as useEffect5, useMemo as useMemo3, 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] = useState3(null);
+  const [error, setError] = useState3(null);
   const version = useSyncExternalStore2(
     useCallback2(
       (callback) => i18nRegistry2.subscribe(callback),
@@ -154,12 +762,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 +775,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,7 +788,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 };
 }
 
@@ -226,7 +831,7 @@ function useFormatters() {
 // src/hooks/useTheme.ts
 import { useCallback as useCallback3, useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useTheme() {
-  const app = useHAI3();
+  const app = useFrontX();
   const { themeRegistry } = app;
   const version = useSyncExternalStore3(
     useCallback3(
@@ -264,6 +869,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 useMemo6 } from "react";
+function useApiMutation(options) {
+  const queryClient = useRequiredFrontXQueryClient();
+  const queryCache2 = useMemo6(() => createQueryCache(queryClient), [queryClient]);
+  const callbackCtx = useMemo6(() => ({ queryCache: queryCache2 }), [queryCache2]);
+  return useFrontXMutation(options, callbackCtx);
+}
+
+// src/hooks/useApiStream.ts
+import { useEffect as useEffect6, useMemo as useMemo7, useRef as useRef2, useState as useState4, useCallback as useCallback4 } from "react";
+function useApiStream(descriptor, options) {
+  const mode = options?.mode ?? "latest";
+  const enabled = options?.enabled ?? true;
+  const [data, setData] = useState4(void 0);
+  const [events, setEvents] = useState4([]);
+  const [status, setStatus] = useState4(() => enabled ? "connecting" : "idle");
+  const [error, setError] = useState4(null);
+  const connectPromiseRef = useRef2(null);
+  const connectionIdRef = useRef2(null);
+  const disconnectRequestedRef = useRef2(false);
+  const descriptorRef = useLatest(descriptor);
+  const descriptorKey = useMemo7(() => JSON.stringify(descriptor.key), [descriptor.key]);
+  const resetKey = `${descriptorKey}:${mode}`;
+  const [prevResetKey, setPrevResetKey] = useState4(resetKey);
+  if (resetKey !== prevResetKey) {
+    setPrevResetKey(resetKey);
+    setData(void 0);
+    setEvents([]);
+    setError(null);
+  }
+  const connectKey = `${resetKey}:${enabled}`;
+  const [prevConnectKey, setPrevConnectKey] = useState4(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 useMemo8 } 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 useMemo8(() => createQueryCache(queryClient), [queryClient]);
+}
+
 // src/mfe/hooks/useMfeBridge.ts
 function useMfeBridge() {
   const { bridge } = useMfeContext();
@@ -271,61 +1015,73 @@ function useMfeBridge() {
 }
 
 // src/mfe/hooks/useSharedProperty.ts
-import { useSyncExternalStore as useSyncExternalStore4, useCallback as useCallback4 } from "react";
-function useSharedProperty(propertyTypeId) {
-  const { bridge } = useMfeContext();
-  const subscribe = useCallback4((callback) => {
-    return bridge.subscribeToProperty(propertyTypeId, () => {
-      callback();
-    });
-  }, [bridge, propertyTypeId]);
-  const getSnapshot = useCallback4(() => {
-    const property = bridge.getProperty(propertyTypeId);
-    return property?.value;
-  }, [bridge, propertyTypeId]);
-  const value = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
-  return value;
+import { useCallback as useCallback5, useContext as useContext4, useSyncExternalStore as useSyncExternalStore4 } from "react";
+function useSharedProperty(propertyTypeId, options) {
+  const contextValue = useContext4(MfeContext);
+  const bridge = options?.bridge ?? contextValue?.bridge;
+  const fallback = options?.fallback;
+  if (!bridge) {
+    throw new Error(
+      "useSharedProperty must be used within a MfeProvider, or given an explicit `bridge` option, for components that never mount MfeProvider."
+    );
+  }
+  const subscribe = useCallback5(
+    (onStoreChange) => bridge.subscribeToProperty(propertyTypeId, () => {
+      onStoreChange();
+    }),
+    [bridge, propertyTypeId]
+  );
+  const getSnapshot = useCallback5(() => {
+    const raw = bridge.getProperty(propertyTypeId)?.value;
+    return raw === void 0 ? fallback : raw;
+  }, [bridge, propertyTypeId, fallback]);
+  return useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
 }
 
 // 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
       }
     };
-    bridge.executeActionsChain(chain).catch((error) => {
-      console.error(
-        `[useHostAction] Failed to send action '${actionTypeId}':`,
-        error
-      );
-    });
+    bridge.executeActionsChain(chain);
   }, [actionTypeId, bridge]);
 }
 
-// src/mfe/hooks/useDomainExtensions.ts
-import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback6, useRef } from "react";
-function useDomainExtensions(domainId) {
-  const app = useHAI3();
-  const registry = app.screensetsRegistry;
+// src/mfe/hooks/useMfeRegistry.ts
+function resolveMfeRegistry(app, callerName) {
+  const registry = app.mfeRegistry;
   if (!registry) {
     throw new Error(
-      "useDomainExtensions requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
+      `${callerName} requires the microfrontends plugin. Add microfrontends() to your Gears FrontX app configuration.`
     );
   }
-  const subscribe = useCallback6(
+  return registry;
+}
+function useMfeRegistry() {
+  const app = useFrontX();
+  return resolveMfeRegistry(app, "useMfeRegistry");
+}
+
+// src/mfe/hooks/useDomainExtensions.ts
+import { useSyncExternalStore as useSyncExternalStore5, useCallback as useCallback7, useRef as useRef3 } from "react";
+function useDomainExtensions(domainId) {
+  const app = useFrontX();
+  const registry = resolveMfeRegistry(app, "useDomainExtensions");
+  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) {
@@ -337,23 +1093,18 @@ function useDomainExtensions(domainId) {
 }
 
 // src/mfe/hooks/useRegisteredPackages.ts
-import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback7, useRef as useRef2 } from "react";
+import { useSyncExternalStore as useSyncExternalStore6, useCallback as useCallback8, useRef as useRef4 } from "react";
 function useRegisteredPackages() {
-  const app = useHAI3();
-  const registry = app.screensetsRegistry;
-  if (!registry) {
-    throw new Error(
-      "useRegisteredPackages requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
-    );
-  }
-  const subscribe = useCallback7(
+  const app = useFrontX();
+  const registry = resolveMfeRegistry(app, "useRegisteredPackages");
+  const subscribe = useCallback8(
     (onStoreChange) => {
       return app.store.subscribe(onStoreChange);
     },
     [app.store]
   );
-  const cacheRef = useRef2({ packages: "", list: [] });
-  const getSnapshot = useCallback7(() => {
+  const cacheRef = useRef4({ packages: "", list: [] });
+  const getSnapshot = useCallback8(() => {
     const list = registry.getRegisteredPackages();
     const packages = list.join(",");
     if (packages !== cacheRef.current.packages) {
@@ -364,195 +1115,331 @@ function useRegisteredPackages() {
   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;
-  if (!registry) {
+// src/mfe/ThemeAwareReactLifecycle.tsx
+import { createRoot } from "react-dom/client";
+
+// src/mfe/domainTeardownCollector.ts
+var activeCollector;
+function collectDomainTeardowns(fn) {
+  const previousCollector = activeCollector;
+  const collector = [];
+  activeCollector = collector;
+  try {
+    fn();
+  } finally {
+    activeCollector = previousCollector;
+  }
+  return collector;
+}
+function registerDomainTeardown(promise) {
+  activeCollector?.push(promise);
+}
+
+// src/mfe/ThemeAwareReactLifecycle.tsx
+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 cssToCopy(style) {
+  const text = style.textContent ?? "";
+  const sheet = style.sheet;
+  if (text.trim() || !sheet) return text;
+  return Array.from(sheet.cssRules, (rule) => rule.cssText).join("\n");
+}
+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(
-      "useActivePackage requires the microfrontends plugin. Add microfrontends() to your HAI3 app configuration."
+      "[FrontXProvider] Mounted MFEs require queryCacheShared() in the child app and queryCache() in the host app before loading the MFE app."
     );
   }
-  const subscribe = useCallback8(
-    (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 };
-    }
-    return cacheRef.current.activePackage;
-  }, [registry]);
-  return useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  return {
+    mfeBridge: isMountedMfe ? { bridge, extensionId, domainId } : void 0
+  };
 }
-
-// src/mfe/components/RefContainerProvider.ts
-import { ContainerProvider } from "@gears-frontx/framework";
-var RefContainerProvider = class extends ContainerProvider {
-  constructor(containerRef) {
-    super();
-    this.containerRef = containerRef;
+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) {
+    void this.app.mfeRegistry;
+    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)
+        }
+      )
+    );
   }
-  releaseContainer(_extensionId) {
+  /**
+   * `Root.unmount()` itself is synchronous, but a nested `ExtensionDomainSlot`
+   * mounted anywhere in this root's own tree cannot make ITS cleanup
+   * synchronous too — its mounter's own `detach()` awaits per-extension
+   * unmounts. Collecting whatever that cleanup fire-and-forgets (through
+   * `domainTeardownCollector`, scoped to this one `Root.unmount()` call) and
+   * awaiting it here is what makes this method's own returned promise settle
+   * only once every nested domain this root owns has actually finished
+   * tearing down — never before. A root with no routed nested domain
+   * collects nothing, and this resolves exactly as before (a microtask after
+   * the synchronous unmount, same observable timing `void | Promise<void>`
+   * already allows).
+   */
+  async unmount(_container) {
+    if (!this.root) return;
+    const root = this.root;
+    this.root = null;
+    const pendingTeardowns = collectDomainTeardowns(() => root.unmount());
+    const settled = await Promise.allSettled(pendingTeardowns);
+    const failed = settled.find((result) => result.status === "rejected");
+    if (failed) throw failed.reason;
+  }
+  /**
+   * 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.
+   *
+   * A `<style>` is copied into a new element that holds the host's CSS - see
+   * `cssToCopy` - and takes three things from the host element: `media`,
+   * without which a print-only host style applies on screen inside the MFE;
+   * `type`, which keeps the copy of a non-CSS element as inert as the original;
+   * and the nonce, without which a nonce-based CSP blocks the copy. The nonce is read from the `nonce` property, because
+   * browsers blank the attribute in a document served with a CSP header.
+   * Nothing else is carried over, because libraries look for their own
+   * attributes inside the shadow root: styled-components, rendering into it,
+   * puts its tag right after the last `style[data-styled]` there, so a copy of
+   * the host's tag would pull the MFE's rules ahead of the base resets and the
+   * MFE's own CSS. A `<link>` is a deep clone and is loaded from its `href`
+   * again.
+   *
+   * 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 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 copy = document.createElement("style");
+        if (el.media) copy.media = el.media;
+        if (el.type) copy.type = el.type;
+        if (el.nonce) copy.nonce = el.nonce;
+        copy.textContent = cssToCopy(el);
+        copy.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
+        adoptedStyles.appendChild(copy);
+        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 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;
+        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: var(--foreground);
+        background-color: var(--background);
+      }
+    `;
+    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
+   * 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 useRef5, useState as useState5 } 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 = useRef5(null);
+  const emitAttached = useEffectEvent((root) => {
+    onAttached?.(root);
+  });
+  const emitDetached = useEffectEvent(() => {
+    onDetached?.();
+  });
+  const [attached, setAttached] = useState5(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();
-          }
-        });
-      }
+      const detachPromise = mounter.detach();
+      registerDomainTeardown(detachPromise);
+      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,
   presets,
   ACCOUNTS_DOMAIN,
   I18nRegistry,
-  screensets,
   themes,
   layout,
   i18n,
   effects,
+  queryCache,
+  queryCacheShared,
+  subscribeQueryCacheRuntimeChanged as subscribeQueryCacheRuntimeChanged2,
   createThemeRegistry,
   createStore,
   getStore,
   registerSlice,
   hasSlice,
   createSlice,
-  LayoutDomain,
   layoutReducer,
   layoutDomainReducers,
   LAYOUT_SLICE_NAME,
@@ -560,14 +1447,12 @@ import {
   footerSlice,
   menuSlice,
   sidebarSlice,
-  screenSlice,
   popupSlice,
   overlaySlice,
   headerActions,
   footerActions,
   menuActions,
   sidebarActions,
-  screenActions,
   popupActions,
   overlayActions,
   setUser,
@@ -588,10 +1473,6 @@ import {
   setSidebarVisible,
   setSidebarWidth,
   setSidebarConfig,
-  setActiveScreen,
-  setScreenLoading,
-  navigateTo,
-  clearActiveScreen,
   openPopup,
   closePopup,
   closeTopPopup,
@@ -617,13 +1498,15 @@ import {
   initMockEffects,
   toggleMockMode,
   MockEvents,
+  auth,
+  AuthEvents,
+  frontxApiTransport,
   apiRegistry,
   BaseApiService,
   RestProtocol,
+  RestEndpointProtocol,
   SseProtocol,
-  RestMockPlugin,
-  SseMockPlugin,
-  MockEventSource,
+  SseStreamProtocol,
   ApiPluginBase,
   ApiPlugin,
   ApiProtocol,
@@ -662,7 +1545,7 @@ import {
 import {
   FRONTX_POPUP_DOMAIN,
   FRONTX_SIDEBAR_DOMAIN,
-  FRONTX_SCREEN_DOMAIN as FRONTX_SCREEN_DOMAIN2,
+  FRONTX_SCREEN_DOMAIN,
   FRONTX_OVERLAY_DOMAIN,
   screenDomain,
   sidebarDomain,
@@ -675,102 +1558,118 @@ 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,
+  AuthEvents,
   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,
   Language,
   LanguageDisplayMode,
-  LayoutDomain,
   MOCK_PLUGIN,
   MfeBridgeFactory,
   MfeContext,
   MfeHandler,
   MfeHandlerMF,
   MfeProvider,
-  MockEventSource,
+  MfeRegistry,
+  MfeRegistryFactory,
   MockEvents,
-  RefContainerProvider,
-  RestMockPlugin,
+  MountStrategy,
+  OptionalMountStrategy,
+  ParentMfeBridge,
+  RestEndpointProtocol,
   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,
   createI18nRegistry,
   createShadowRoot,
   createSlice,
   createStore,
   createThemeRegistry,
   effects,
-  eventBus,
-  extensionScreenSchema,
-  extractGtsPackage2 as extractGtsPackage,
+  eventBus2 as eventBus,
+  extractGtsPackage,
   footerActions,
   footerSlice,
+  frontxApiTransport,
   getLanguageMetadata,
   getStore,
   gtsPlugin,
@@ -783,23 +1682,23 @@ export {
   initMockEffects,
   initTenantEffects,
   injectCssVariables,
+  invalidateQueryCacheForApp,
   isMockPlugin,
   isRestShortCircuit,
   isShortCircuit,
   isSseShortCircuit,
-  languageSchema,
   layout,
   layoutDomainReducers,
   layoutReducer,
   loadExtension,
   menuActions,
   menuSlice,
+  mfeRegistryFactory,
   microfrontends,
   mock,
   mockActions,
   mockSlice,
   mountExtension,
-  navigateTo,
   openPopup,
   overlayActions,
   overlayDomain,
@@ -808,17 +1707,14 @@ export {
   popupDomain,
   popupSlice,
   presets,
+  queryCache,
+  queryCacheShared,
   registerExtension,
   registerSlice,
-  screenActions,
   screenDomain,
-  screenSlice,
-  screensets,
-  screensetsRegistryFactory,
   selectExtensionError,
   selectExtensionState,
   selectRegisteredExtensions,
-  setActiveScreen,
   setFooterConfig,
   setFooterVisible,
   setHeaderLoading,
@@ -828,7 +1724,6 @@ export {
   setMenuVisible,
   setMockEnabled,
   setOverlayVisible,
-  setScreenLoading,
   setSidebarCollapsed,
   setSidebarConfig,
   setSidebarContent,
@@ -844,25 +1739,33 @@ export {
   sidebarActions,
   sidebarDomain,
   sidebarSlice,
+  subscribeQueryCacheRuntimeChanged2 as subscribeQueryCacheRuntimeChanged,
   tenantActions,
   tenantReducer,
   tenantSlice,
-  themeSchema,
   themes,
   toggleMenu,
   toggleMockMode,
   toggleSidebar,
   unmountExtension,
   unregisterExtension,
-  useActivePackage,
+  useApiInfiniteQuery,
+  useApiMutation,
+  useApiQuery,
+  useApiStream,
+  useApiSuspenseInfiniteQuery,
+  useApiSuspenseQuery,
   useAppDispatch,
   useAppSelector,
+  useCanAccess,
   useDomainExtensions,
   useFormatters,
-  useHAI3,
+  useFrontX,
   useHostAction,
   useMfeBridge,
   useMfeContext,
+  useMfeRegistry,
+  useQueryCache,
   useRegisteredPackages,
   useScreenTranslations,
   useSharedProperty,