@alepha/react 0.6.10 → 0.7.1

package/dist/{useActive-4QlZKGbw.cjs → useRouterState-AdK-XeM2.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var core = require('@alepha/core');
+var React = require('react');
 var server = require('@alepha/server');
 var client = require('react-dom/client');
 var router = require('@alepha/router');
@@ -28,27 +28,161 @@ const $page = (options) => {
     [core.OPTIONS]: options,
     render: () => {
       throw new core.NotImplementedError(KEY);
-    },
-    go: () => {
-      throw new core.NotImplementedError(KEY);
-    },
-    createAnchorProps: () => {
-      throw new core.NotImplementedError(KEY);
-    },
-    can: () => {
-      if (options.can) {
-        return options.can();
-      }
-      return true;
     }
   };
 };
 $page[core.KIND] = KEY;
 
+const ClientOnly = (props) => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  if (props.disabled) {
+    return props.children;
+  }
+  return mounted ? props.children : props.fallback;
+};
+
 const RouterContext = React.createContext(
   void 0
 );
 
+const useAlepha = () => {
+  const routerContext = React.useContext(RouterContext);
+  if (!routerContext) {
+    throw new Error("useAlepha must be used within a RouterProvider");
+  }
+  return routerContext.alepha;
+};
+
+const ErrorViewer = ({ error }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const isProduction = useAlepha().isProduction();
+  if (isProduction) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorViewerProduction, {});
+  }
+  const stackLines = error.stack?.split("\n") ?? [];
+  const previewLines = stackLines.slice(0, 5);
+  const hiddenLineCount = stackLines.length - previewLines.length;
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text).catch((err) => {
+      console.error("Clipboard error:", err);
+    });
+  };
+  const styles = {
+    container: {
+      padding: "24px",
+      backgroundColor: "#FEF2F2",
+      color: "#7F1D1D",
+      border: "1px solid #FECACA",
+      borderRadius: "16px",
+      boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
+      fontFamily: "monospace",
+      maxWidth: "768px",
+      margin: "40px auto"
+    },
+    heading: {
+      fontSize: "20px",
+      fontWeight: "bold",
+      marginBottom: "4px"
+    },
+    name: {
+      fontSize: "16px",
+      fontWeight: 600
+    },
+    message: {
+      fontSize: "14px",
+      marginBottom: "16px"
+    },
+    sectionHeader: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: "12px",
+      marginBottom: "4px",
+      color: "#991B1B"
+    },
+    copyButton: {
+      fontSize: "12px",
+      color: "#DC2626",
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      textDecoration: "underline"
+    },
+    stackContainer: {
+      backgroundColor: "#FEE2E2",
+      padding: "12px",
+      borderRadius: "8px",
+      fontSize: "13px",
+      lineHeight: "1.4",
+      overflowX: "auto",
+      whiteSpace: "pre-wrap"
+    },
+    expandLine: {
+      color: "#F87171",
+      cursor: "pointer",
+      marginTop: "8px"
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.heading, children: "\u{1F525} Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.name, children: error.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.message, children: error.message })
+    ] }),
+    stackLines.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.sectionHeader, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Stack trace" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => copyToClipboard(error.stack),
+            style: styles.copyButton,
+            children: "Copy all"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("pre", { style: styles.stackContainer, children: [
+        (expanded ? stackLines : previewLines).map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i)),
+        !expanded && hiddenLineCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.expandLine, onClick: () => setExpanded(true), children: [
+          "+ ",
+          hiddenLineCount,
+          " more lines..."
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const ErrorViewerProduction = () => {
+  const styles = {
+    container: {
+      padding: "24px",
+      backgroundColor: "#FEF2F2",
+      color: "#7F1D1D",
+      border: "1px solid #FECACA",
+      borderRadius: "16px",
+      boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
+      fontFamily: "monospace",
+      maxWidth: "768px",
+      margin: "40px auto",
+      textAlign: "center"
+    },
+    heading: {
+      fontSize: "20px",
+      fontWeight: "bold",
+      marginBottom: "8px"
+    },
+    message: {
+      fontSize: "14px",
+      opacity: 0.85
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.heading, children: "\u{1F6A8} An error occurred" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.message, children: "Something went wrong. Please try again later." })
+  ] });
+};
+
 const RouterLayerContext = React.createContext(void 0);
 
 const useRouterEvents = (opts = {}, deps = []) => {
@@ -93,6 +227,36 @@ const useRouterEvents = (opts = {}, deps = []) => {
   }, deps);
 };
 
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  /**
+   * Update state so the next render shows the fallback UI.
+   */
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  /**
+   * Lifecycle method called when an error is caught.
+   * You can log the error or perform side effects here.
+   */
+  componentDidCatch(error, info) {
+    if (this.props.onError) {
+      this.props.onError(error, info);
+    }
+  }
+  render() {
+    if (this.state.error) {
+      return this.props.fallback(this.state.error);
+    }
+    return this.props.children;
+  }
+}
+
 const NestedView = (props) => {
   const app = React.useContext(RouterContext);
   const layer = React.useContext(RouterLayerContext);
@@ -108,18 +272,27 @@ const NestedView = (props) => {
     },
     [app]
   );
-  return view ?? props.children ?? null;
+  if (!app) {
+    throw new Error("NestedView must be used within a RouterContext.");
+  }
+  const element = view ?? props.children ?? null;
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { fallback: app.context.onError, children: element });
 };
 
 class RedirectionError extends Error {
+  page;
   constructor(page) {
     super("Redirection");
     this.page = page;
   }
 }
 
+const envSchema$1 = core.t.object({
+  REACT_STRICT_MODE: core.t.boolean({ default: true })
+});
 class PageDescriptorProvider {
   log = core.$logger();
+  env = core.$inject(envSchema$1);
   alepha = core.$inject(core.Alepha);
   pages = [];
   getPages() {
@@ -133,8 +306,25 @@ class PageDescriptorProvider {
     }
     throw new Error(`Page ${name} not found`);
   }
-  root(state, context = {}) {
-    return React.createElement(
+  url(name, options = {}) {
+    const page = this.page(name);
+    if (!page) {
+      throw new Error(`Page ${name} not found`);
+    }
+    let url = page.path ?? "";
+    let parent = page.parent;
+    while (parent) {
+      url = `${parent.path ?? ""}/${url}`;
+      parent = parent.parent;
+    }
+    url = this.compile(url, options.params ?? {});
+    return new URL(
+      url.replace(/\/\/+/g, "/") || "/",
+      options.base ?? `http://localhost`
+    );
+  }
+  root(state, context) {
+    const root = React.createElement(
       RouterContext.Provider,
       {
         value: {
@@ -145,12 +335,17 @@ class PageDescriptorProvider {
       },
       React.createElement(NestedView, {}, state.layers[0]?.element)
     );
+    if (this.env.REACT_STRICT_MODE) {
+      return React.createElement(React.StrictMode, {}, root);
+    }
+    return root;
   }
   async createLayers(route, request) {
     const { pathname, search } = request.url;
     const layers = [];
     let context = {};
     const stack = [{ route }];
+    request.onError = (error) => this.renderError(error);
     let parent = route.parent;
     while (parent) {
       stack.unshift({ route: parent });
@@ -222,7 +417,6 @@ class PageDescriptorProvider {
           return {
             layers: [],
             redirect: typeof e.page === "string" ? e.page : this.href(e.page),
-            head: request.head,
             pathname,
             search
           };
@@ -249,26 +443,28 @@ class PageDescriptorProvider {
       acc += "/";
       acc += it.route.path ? this.compile(it.route.path, params) : "";
       const path = acc.replace(/\/+/, "/");
+      const localErrorHandler = this.getErrorHandler(it.route);
+      if (localErrorHandler) {
+        request.onError = localErrorHandler;
+      }
       if (it.error) {
-        const errorHandler = this.getErrorHandler(it.route);
-        const element = await (errorHandler ? errorHandler({
-          ...it.config,
-          error: it.error,
-          url: ""
-        }) : this.renderError(it.error));
+        let element2 = await request.onError(it.error);
+        if (element2 === null) {
+          element2 = this.renderError(it.error);
+        }
         layers.push({
           props,
           error: it.error,
           name: it.route.name,
           part: it.route.path,
           config: it.config,
-          element: this.renderView(i + 1, path, element),
+          element: this.renderView(i + 1, path, element2, it.route),
           index: i + 1,
           path
         });
         break;
       }
-      const layer = await this.createElement(it.route, {
+      const element = await this.createElement(it.route, {
         ...props,
         ...context
       });
@@ -277,12 +473,12 @@ class PageDescriptorProvider {
         props,
         part: it.route.path,
         config: it.config,
-        element: this.renderView(i + 1, path, layer),
+        element: this.renderView(i + 1, path, element, it.route),
         index: i + 1,
         path
       });
     }
-    return { layers, head: request.head, pathname, search };
+    return { layers, pathname, search };
   }
   getErrorHandler(route) {
     if (route.errorHandler) return route.errorHandler;
@@ -333,8 +529,8 @@ class PageDescriptorProvider {
       ctx.head.meta = [...ctx.head.meta ?? [], ...head.meta ?? []];
     }
   }
-  renderError(e) {
-    return React.createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
+  renderError(error) {
+    return React.createElement(ErrorViewer, { error });
   }
   renderEmptyView() {
     return React.createElement(NestedView, {});
@@ -359,7 +555,13 @@ class PageDescriptorProvider {
     }
     return path;
   }
-  renderView(index, path, view = this.renderEmptyView()) {
+  renderView(index, path, view, page) {
+    view ??= this.renderEmptyView();
+    const element = page.client ? React.createElement(
+      ClientOnly,
+      typeof page.client === "object" ? page.client : {},
+      view
+    ) : view;
     return React.createElement(
       RouterLayerContext.Provider,
       {
@@ -368,7 +570,7 @@ class PageDescriptorProvider {
           path
         }
       },
-      view
+      element
     );
   }
   configure = core.$hook({
@@ -377,6 +579,8 @@ class PageDescriptorProvider {
       const pages = this.alepha.getDescriptorValues($page);
       for (const { value, key } of pages) {
         value[core.OPTIONS].name ??= key;
+      }
+      for (const { value } of pages) {
         if (value[core.OPTIONS].parent) {
           continue;
         }
@@ -386,11 +590,6 @@ class PageDescriptorProvider {
   });
   map(pages, target) {
     const children = target[core.OPTIONS].children ?? [];
-    for (const it of pages) {
-      if (it.value[core.OPTIONS].parent === target) {
-        children.push(it.value);
-      }
-    }
     return {
       ...target[core.OPTIONS],
       parent: void 0,
@@ -499,10 +698,17 @@ class BrowserRouterProvider extends router.RouterProvider {
     const state = {
       pathname,
       search,
-      layers: [],
-      head: {}
+      layers: []
     };
-    await this.alepha.emit("react:transition:begin", { state });
+    const context = {
+      url,
+      query: {},
+      params: {},
+      head: {},
+      onError: () => null,
+      ...options.context ?? {}
+    };
+    await this.alepha.emit("react:transition:begin", { state, context });
     try {
       const previous = options.previous;
       const { route, params } = this.match(pathname);
@@ -512,29 +718,22 @@ class BrowserRouterProvider extends router.RouterProvider {
           query[key] = String(value);
         }
       }
+      context.query = query;
+      context.params = params ?? {};
+      context.previous = previous;
       if (isPageRoute(route)) {
         const result = await this.pageDescriptorProvider.createLayers(
           route.page,
-          {
-            url,
-            params: params ?? {},
-            query,
-            previous,
-            ...state,
-            head: state.head,
-            ...options.context ?? {}
-          }
+          context
         );
         if (result.redirect) {
           return {
-            element: null,
-            layers: [],
             redirect: result.redirect,
-            head: state.head
+            state,
+            context
           };
         }
         state.layers = result.layers;
-        state.head = result.head;
       }
       if (state.layers.length === 0) {
         state.layers.push({
@@ -557,33 +756,25 @@ class BrowserRouterProvider extends router.RouterProvider {
       ];
       await this.alepha.emit("react:transition:error", {
         error: e,
-        state
+        state,
+        context
       });
     }
-    if (!options.state) {
-      await this.alepha.emit("react:transition:end", {
-        state
-      });
-      return {
-        element: this.root(state, options.context),
-        layers: state.layers,
-        head: state.head
-      };
+    if (options.state) {
+      options.state.layers = state.layers;
+      options.state.pathname = state.pathname;
+      options.state.search = state.search;
     }
-    options.state.layers = state.layers;
-    options.state.pathname = state.pathname;
-    options.state.search = state.search;
-    options.state.head = state.head;
     await this.alepha.emit("react:transition:end", {
-      state: options.state
+      state: options.state,
+      context
     });
     return {
-      element: this.root(state, options.context),
-      layers: options.state.layers,
-      head: state.head
+      context,
+      state
     };
   }
-  root(state, context = {}) {
+  root(state, context) {
     return this.pageDescriptorProvider.root(state, context);
   }
 }
@@ -603,8 +794,7 @@ class ReactBrowserProvider {
   state = {
     layers: [],
     pathname: "",
-    search: "",
-    head: {}
+    search: ""
   };
   get document() {
     return window.document;
@@ -645,8 +835,8 @@ class ReactBrowserProvider {
     const result = await this.render({
       url
     });
-    if (result.url !== url) {
-      this.history.replaceState({}, "", result.url);
+    if (result.context.url.pathname !== url) {
+      this.history.replaceState({}, "", result.context.url.pathname);
       return;
     }
     if (options.replace) {
@@ -670,7 +860,7 @@ class ReactBrowserProvider {
       return await this.render({ url: result.redirect });
     }
     this.transitioning = void 0;
-    return { url, head: result.head };
+    return result;
   }
   /**
    * Get embedded layers from the server.
@@ -711,14 +901,16 @@ class ReactBrowserProvider {
       const hydration = this.getHydrationState();
       const previous = hydration?.layers ?? [];
       if (hydration?.links) {
-        this.client.links = hydration.links;
+        for (const link of hydration.links.links) {
+          this.client.pushLink(link);
+        }
       }
-      const { head } = await this.render({ previous });
-      if (head) {
-        this.headProvider.renderHead(this.document, head);
+      const { context } = await this.render({ previous });
+      if (context.head) {
+        this.headProvider.renderHead(this.document, context.head);
       }
-      const context = {};
       await this.alepha.emit("react:browser:render", {
+        state: this.state,
         context,
         hydration
       });
@@ -734,23 +926,19 @@ class ReactBrowserProvider {
       window.addEventListener("popstate", () => {
         this.render();
       });
-      this.alepha.on("react:transition:end", {
-        callback: ({ state }) => {
-          this.headProvider.renderHead(this.document, state.head);
-        }
-      });
     }
   });
   onTransitionEnd = core.$hook({
     name: "react:transition:end",
-    handler: async ({ state }) => {
-      this.headProvider.renderHead(this.document, state.head);
+    handler: async ({ context }) => {
+      this.headProvider.renderHead(this.document, context.head);
     }
   });
 }
 
 class RouterHookApi {
-  constructor(state, layer, browser) {
+  constructor(pages, state, layer, browser) {
+    this.pages = pages;
     this.state = state;
     this.layer = layer;
     this.browser = browser;
@@ -804,32 +992,40 @@ class RouterHookApi {
    * @param pathname
    * @param layer
    */
-  createHref(pathname, layer = this.layer) {
+  createHref(pathname, layer = this.layer, options = {}) {
     if (typeof pathname === "object") {
       pathname = pathname.options.path ?? "";
     }
+    if (options.params) {
+      for (const [key, value] of Object.entries(options.params)) {
+        pathname = pathname.replace(`:${key}`, String(value));
+      }
+    }
     return pathname.startsWith("/") ? pathname : `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
   }
-  /**
-   *
-   * @param path
-   * @param options
-   */
-  async go(path, options = {}) {
-    return await this.browser?.go(this.createHref(path, this.layer), options);
+  async go(path, options) {
+    for (const page of this.pages) {
+      if (page.name === path) {
+        path = page.path ?? "";
+        break;
+      }
+    }
+    await this.browser?.go(this.createHref(path, this.layer, options), options);
   }
-  /**
-   *
-   * @param path
-   */
-  createAnchorProps(path) {
-    const href = this.createHref(path, this.layer);
+  anchor(path, options = {}) {
+    for (const page of this.pages) {
+      if (page.name === path) {
+        path = page.path ?? "";
+        break;
+      }
+    }
+    const href = this.createHref(path, this.layer, options);
     return {
       href,
       onClick: (ev) => {
         ev.stopPropagation();
         ev.preventDefault();
-        this.go(path).catch(console.error);
+        this.go(path, options).catch(console.error);
       }
     };
   }
@@ -840,14 +1036,8 @@ class RouterHookApi {
    * @param options
    */
   setQueryParams(record, options = {}) {
-    const search = new URLSearchParams(
-      options.merge ? {
-        ...this.query,
-        ...record
-      } : {
-        ...record
-      }
-    ).toString();
+    const func = typeof record === "function" ? record : () => record;
+    const search = new URLSearchParams(func(this.query)).toString();
     const state = search ? `${this.pathname}?${search}` : this.pathname;
     if (options.push) {
       window.history.pushState({}, "", state);
@@ -863,8 +1053,12 @@ const useRouter = () => {
   if (!ctx || !layer) {
     throw new Error("useRouter must be used within a RouterProvider");
   }
+  const pages = React.useMemo(() => {
+    return ctx.alepha.get(PageDescriptorProvider).getPages();
+  }, []);
   return React.useMemo(
     () => new RouterHookApi(
+      pages,
       ctx.state,
       layer,
       ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
@@ -875,6 +1069,7 @@ const useRouter = () => {
 
 const Link = (props) => {
   React.useContext(RouterContext);
+  const router = useRouter();
   const to = typeof props.to === "string" ? props.to : props.to[core.OPTIONS].path;
   if (!to) {
     return null;
@@ -884,8 +1079,49 @@ const Link = (props) => {
     return null;
   }
   const name = typeof props.to === "string" ? void 0 : props.to[core.OPTIONS].name;
+  const anchorProps = {
+    ...props,
+    to: void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.anchor(to), ...anchorProps, children: props.children ?? name });
+};
+
+const useActive = (path) => {
   const router = useRouter();
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.createAnchorProps(to), ...props, children: props.children ?? name });
+  const ctx = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  let name;
+  if (typeof path === "object" && path.options.name) {
+    name = path.options.name;
+  }
+  const [current, setCurrent] = React.useState(ctx.state.pathname);
+  const href = React.useMemo(() => router.createHref(path, layer), [path, layer]);
+  const [isPending, setPending] = React.useState(false);
+  const isActive = current === href;
+  useRouterEvents({
+    onEnd: ({ state }) => setCurrent(state.pathname)
+  });
+  return {
+    name,
+    isPending,
+    isActive,
+    anchorProps: {
+      href,
+      onClick: (ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (isActive) return;
+        if (isPending) return;
+        setPending(true);
+        router.go(href).then(() => {
+          setPending(false);
+        });
+      }
+    }
+  };
 };
 
 const useInject = (clazz) => {
@@ -893,18 +1129,10 @@ const useInject = (clazz) => {
   if (!ctx) {
     throw new Error("useRouter must be used within a <RouterProvider>");
   }
-  return React.useMemo(
-    () => ctx.alepha.get(clazz, {
-      skipRegistration: true
-    }),
-    []
-  );
+  return React.useMemo(() => ctx.alepha.get(clazz), []);
 };
 
-const useClient = () => {
-  return useInject(server.HttpClient);
-};
-const useApi = () => {
+const useClient = (_scope) => {
   return useInject(server.HttpClient).of();
 };
 
@@ -926,12 +1154,9 @@ const useQueryParams = (schema, options = {}) => {
     queryParams,
     (queryParams2) => {
       setQueryParams(queryParams2);
-      router.setQueryParams(
-        { [key]: encode(ctx.alepha, schema, queryParams2) },
-        {
-          merge: true
-        }
-      );
+      router.setQueryParams((data) => {
+        return { ...data, [key]: encode(ctx.alepha, schema, queryParams2) };
+      });
     }
   ];
 };
@@ -941,7 +1166,7 @@ const encode = (alepha, schema, data) => {
 const decode = (alepha, schema, data) => {
   try {
     return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-  } catch (error) {
+  } catch (_error) {
     return {};
   }
 };
@@ -959,46 +1184,10 @@ const useRouterState = () => {
   return state;
 };
 
-const useActive = (path) => {
-  const router = useRouter();
-  const ctx = React.useContext(RouterContext);
-  const layer = React.useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  let name;
-  if (typeof path === "object" && path.options.name) {
-    name = path.options.name;
-  }
-  const [current, setCurrent] = React.useState(ctx.state.pathname);
-  const href = React.useMemo(() => router.createHref(path, layer), [path, layer]);
-  const [isPending, setPending] = React.useState(false);
-  const isActive = current === href;
-  useRouterEvents({
-    onEnd: ({ state }) => setCurrent(state.pathname)
-  });
-  return {
-    name,
-    isPending,
-    isActive,
-    anchorProps: {
-      href,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        if (isActive) return;
-        if (isPending) return;
-        setPending(true);
-        router.go(href).then(() => {
-          setPending(false);
-        });
-      }
-    }
-  };
-};
-
 exports.$page = $page;
 exports.BrowserRouterProvider = BrowserRouterProvider;
+exports.ClientOnly = ClientOnly;
+exports.ErrorBoundary = ErrorBoundary;
 exports.Link = Link;
 exports.NestedView = NestedView;
 exports.PageDescriptorProvider = PageDescriptorProvider;
@@ -1009,11 +1198,10 @@ exports.RouterHookApi = RouterHookApi;
 exports.RouterLayerContext = RouterLayerContext;
 exports.isPageRoute = isPageRoute;
 exports.useActive = useActive;
-exports.useApi = useApi;
+exports.useAlepha = useAlepha;
 exports.useClient = useClient;
 exports.useInject = useInject;
 exports.useQueryParams = useQueryParams;
 exports.useRouter = useRouter;
 exports.useRouterEvents = useRouterEvents;
 exports.useRouterState = useRouterState;
-//# sourceMappingURL=useActive-4QlZKGbw.cjs.map