@vc-shell/framework 1.1.21 → 1.1.23

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -1,19 +1,10 @@
-import { computed, getCurrentInstance, inject, warn, Component, isVNode, h, shallowRef, ComputedRef, watch } from "vue";
+import { computed, getCurrentInstance, inject, warn, Component, ComputedRef } from "vue";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createSharedComposable, reactifyObject, reactiveComputed, toValue, watchDebounced } from "@vueuse/core";
+import { createSharedComposable } from "@vueuse/core";
 import * as _ from "lodash-es";
-import {
-  RouteLocationNormalized,
-  useRoute,
-  NavigationFailure,
-  RouteRecordName,
-  RouteParams,
-  Router,
-  LocationQuery,
-  RouteParamsGeneric,
-  RouteRecordNameGeneric,
-} from "vue-router";
-import { bladeNavigationInstance } from "../../plugin";
+import { RouteLocationNormalized, useRoute, NavigationFailure, RouteLocationRaw } from "vue-router";
+import { bladeNavigationInstance as globalBladeNavigationPluginInstanceFallback } from "../../plugin";
+import { useBladeRegistry, IBladeRegistry } from "../../../../../core/composables/useBladeRegistry";
 import {
   BladeComponentInternalInstance,
   BladeNavigationPlugin,
@@ -21,646 +12,257 @@ import {
   IBladeEvent,
   IParentCallArgs,
   BladeInstanceConstructor,
-  BladeRoutesRecord,
-  ExtractedBladeOptions,
+  CoreBladeAdditionalSettings,
 } from "../../types";
 import { navigationViewLocation } from "../../../../../injection-keys";
 import { useAppInsights, usePermissions } from "../../../../../core/composables";
-import { notification } from "./../../../notifications";
+import { notification as notificationService } from "./../../../notifications";
 import "core-js/actual/array/find-last";
 import "core-js/actual/array/find-last-index";
 import { i18n } from "../../../../../core/plugins/i18n";
 
+// Internal modules
+import { _createBladeStateManagement } from "./internal/bladeState";
+import { _createRouterUtils } from "./internal/routerUtils";
+import { _createBladeActions } from "./internal/bladeActions";
+import { _createBladeRouteResolver } from "./internal/bladeRouteResolver";
+import { _createBladeWatchers } from "./internal/bladeWatchers";
+
 interface IUseBladeNavigation {
   readonly blades: ComputedRef<BladeVNode[]>;
-  readonly currentBladeNavigationData: ComputedRef<BladeVNode["props"]["navigation"]>;
+  readonly activeWorkspace: ComputedRef<BladeVNode | undefined>;
+  readonly currentBladeNavigationData: ComputedRef<BladeVNode["props"]["navigation"] | undefined>;
   openBlade: <Blade extends Component>(
-    { blade, param, options, onOpen, onClose, replaceCurrentBlade }: IBladeEvent<Blade>,
+    args: IBladeEvent<Blade>,
     isWorkspace?: boolean,
   ) => Promise<void | NavigationFailure>;
   closeBlade: (index: number) => Promise<boolean>;
-  goToRoot: () => {
-    name: RouteRecordNameGeneric;
-    params: RouteParamsGeneric;
-  };
+  goToRoot: () => RouteLocationRaw;
   onParentCall: (parentExposedMethods: Record<string, any>, args: IParentCallArgs) => void;
   onBeforeClose: (cb: () => Promise<boolean | undefined>) => void;
-  resolveBladeByName: (name: string) => BladeInstanceConstructor;
-  routeResolver: (to: RouteLocationNormalized) =>
-    | Promise<
-        | {
-            name: RouteRecordName | undefined;
-            params: RouteParams;
-          }
-        | undefined
-      >
-    | undefined;
+  resolveBladeByName: (name: string) => BladeInstanceConstructor | undefined;
+  routeResolver: (to: RouteLocationNormalized) => Promise<RouteLocationRaw | undefined> | RouteLocationRaw | undefined;
   setNavigationQuery: (query: Record<string, string | number>) => void;
   getNavigationQuery: () => Record<string, string | number> | undefined;
 }
 
-const activeWorkspace = shallowRef<BladeVNode>();
-const mainRouteBaseParamURL = shallowRef<string>();
-
-const utils = (router: Router) => {
-  const route = useRoute();
-  const routes = router.getRoutes();
-
-  function parseUrl(url: string) {
-    // remove parts of url that does not contain workspace, blade or param - everything before workspace
-    const parts = url.split("/");
-    const workspaceIndex = parts.findIndex((part) => {
-      const route = routes.find(
-        (r) => r.path.endsWith("/" + part) && (r.components?.default as BladeVNode)?.type?.isWorkspace,
-      );
-
-      return route !== undefined;
-    });
-    const cleanUrl = "/" + parts.slice(workspaceIndex).join("/");
-
-    const urlRegex = /^\/([a-zA-Z0-9_-]+)(?:\/([a-zA-Z0-9_-]+))?(?:\/([a-zA-Z0-9_-]+))?$/;
-    const match = cleanUrl.match(urlRegex);
-
-    if (!match) {
-      return undefined;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [_, workspace, blade, param] = match;
-
-    return {
-      workspace,
-      blade: blade || undefined,
-      param: param || undefined,
-    };
-  }
-
-  function parseWorkspaceUrl(path: string): string {
-    // Object.values(route.params)[0] will always be base path of the app
-    mainRouteBaseParamURL.value = "/" + (Object.values(route.params)?.[0] ?? "");
-
-    const pathWithoutBase = path.startsWith(mainRouteBaseParamURL.value)
-      ? path.slice(mainRouteBaseParamURL.value.length)
-      : path;
-    const segments = pathWithoutBase.split("/").filter(Boolean);
-    const workspaceUrl = segments.slice(0, 1).join("/");
-    return "/" + workspaceUrl;
-  }
-
-  function getURLQuery() {
-    if (route.query && Object.keys(route.query).length) {
-      return {
-        params: new URLSearchParams(route.query as Record<string, string>).toString(),
-        obj: route.query,
-      };
-    }
-
-    const [, query] = window.location.href.split("#")[1].split("?");
-    const params = new URLSearchParams(query).toString();
-
-    return { params, obj: Object.fromEntries(new URLSearchParams(query)) };
-  }
-
-  return {
-    parseUrl,
-    parseWorkspaceUrl,
-    getURLQuery,
-    routes,
-  };
-};
-
+// --- Singleton for useBladeNavigation ---
 const useBladeNavigationSingleton = createSharedComposable(() => {
   const route = useRoute();
-  const { setupPageTracking } = useAppInsights();
-
-  const instance = getCurrentInstance() as BladeComponentInternalInstance;
-  const navigationInstance =
-    (instance !== null && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
-  const router = navigationInstance?.router;
-
-  const { parseUrl, parseWorkspaceUrl, getURLQuery } = utils(router);
-
-  watch(
-    () => route.path,
-    async (newVal, oldVal) => {
-      const workspaceUrl = parseWorkspaceUrl(newVal);
-
-      const wsRouteComponent = getWorkspaceRouteComponent(workspaceUrl);
-
-      if (wsRouteComponent !== undefined) {
-        if (isVNode(wsRouteComponent) && wsRouteComponent.type.isBlade) {
-          updateActiveWorkspace(wsRouteComponent);
-        } else {
-          await handleNonBladePage(oldVal);
-        }
-      }
-    },
-    { immediate: true },
-  );
-
-  async function handleNonBladePage(oldVal?: string) {
-    const isPrevented = await closeBlade(0);
-    if (!isPrevented) {
-      navigationInstance.blades.value = [];
-      activeWorkspace.value = undefined;
-    } else {
-      if (oldVal) router.push({ path: oldVal });
-    }
-  }
-
-  function updateActiveWorkspace(wsRouteComponent: BladeVNode) {
-    if (wsRouteComponent.props?.navigation) {
-      wsRouteComponent.props.navigation.idx = 0;
-    }
-    navigationInstance.blades.value[0] = wsRouteComponent;
-    activeWorkspace.value = wsRouteComponent;
-    closeBlade(1);
-  }
-
-  function getWorkspaceRouteComponent(workspaceUrl: string) {
-    return (
-      (route?.matched?.[1]?.components?.default as BladeVNode) ??
-      (router.resolve({ path: workspaceUrl })?.matched?.[1]?.components?.default as BladeVNode)
-    );
-  }
+  const injectedPlugin = inject<BladeNavigationPlugin>("bladeNavigationPlugin");
+  const router = injectedPlugin?.router || globalBladeNavigationPluginInstanceFallback.router;
 
-  watchDebounced(
-    navigationInstance.blades,
-    async (newVal) => {
-      const workspace = navigationInstance.blades.value[0];
-      const lastBlade = getLastItemWithUrl(newVal);
-
-      if (workspace?.type?.url) {
-        const url = constructUrl(workspace, lastBlade);
-        if (url) {
-          updateRouterHistory(url, lastBlade?.type.name);
-        }
-      }
-    },
-    { deep: true, debounce: 1 },
-  );
-
-  function getLastItemWithUrl(newVal: BladeVNode[]) {
-    for (let i = newVal.length - 1; i > 0; i--) {
-      if (newVal[i].type.url) {
-        return newVal[i];
-      }
-    }
+  if (!router) {
+    throw new Error("[@vc-shell/framework#useBladeNavigation] Vue Router instance is not available.");
   }
 
-  function constructUrl(workspace: BladeVNode, lastBlade?: BladeVNode) {
-    const wsBladeUrl = workspace?.type.url;
-    const lastBladeUrl = lastBlade?.type.url;
-    const param = lastBlade?.props?.param;
-    const parsedWorkspaceUrl = parseUrl(wsBladeUrl || "")?.workspace;
-
-    if (lastBlade && wsBladeUrl && parsedWorkspaceUrl) {
-      return "/" + parsedWorkspaceUrl + lastBladeUrl + (param ? "/" + param : "");
-    } else {
-      return wsBladeUrl;
-    }
-  }
+  const bladeRegistry: IBladeRegistry = useBladeRegistry();
 
-  function updateRouterHistory(url: string, name?: string) {
-    const params = getURLQuery().params;
+  // Base modules initialization
+  const bladeState = _createBladeStateManagement(router);
+  const routerUtils = _createRouterUtils(router, route);
 
-    const fullUrl =
-      (mainRouteBaseParamURL.value && !url.startsWith(mainRouteBaseParamURL.value) ? mainRouteBaseParamURL.value : "") +
-      url +
-      (params ? "?" + params : "");
-
-    router.options.history.replace(fullUrl);
-
-    if (name) {
-      setupPageTracking.afterEach({ name: name, fullPath: fullUrl });
-    }
-  }
-
-  async function closeBlade(index: number) {
-    console.debug(`[@vc-shell/framework#useBladeNavigation] - closeBlade called.`);
+  const { setupPageTracking } = useAppInsights();
+  const { hasAccess } = usePermissions();
+  const currentInstance = getCurrentInstance() as BladeComponentInternalInstance | null;
 
-    if (navigationInstance.blades.value.length === 0) {
-      return false;
+  function ensureBladeComponent<Blade extends Component>(
+    bladeInput: BladeInstanceConstructor<Blade> | { name: string } | null | undefined,
+  ): BladeInstanceConstructor<Blade> {
+    if (!bladeInput) {
+      throw new Error("ensureBladeComponent: bladeInput cannot be null or undefined.");
     }
-
-    try {
-      const children = navigationInstance.blades.value.slice(index).reverse();
-      let isPrevented = false;
-      for (let i = 0; i < children.length; i++) {
-        const element = children[i];
-
-        if (element.props?.navigation?.onBeforeClose) {
-          const result = await element.props.navigation.onBeforeClose();
-
-          if (result === false) {
-            isPrevented = true;
-            console.debug(`[@vc-shell/framework#useBladeNavigation] - Navigation is prevented`);
-          }
-          // we use break here to prevent running onBeforeClose for all children, cause it can be prevented by first child
-          break;
-        }
+    if (typeof bladeInput === "object" && "name" in bladeInput) {
+      if (!bladeInput.name) {
+        throw new Error("ensureBladeComponent: bladeInput.name cannot be empty when resolving by name.");
       }
-
-      if (!isPrevented) {
-        const prevBlade = navigationInstance.blades.value[index - 1];
-
-        if (index > 0 && prevBlade?.props?.navigation?.isVisible === false) {
-          prevBlade.props.navigation.isVisible = true;
-        }
-
-        // Clear param of table blade when closing child blade to prevent table row selection from being preserved
-        if (
-          prevBlade &&
-          prevBlade.props.navigation.idx === 0 &&
-          toValue(prevBlade.props?.param) === toValue(navigationInstance.blades.value[index]?.props?.param)
-        ) {
-          prevBlade.props.param = undefined;
-        }
-
-        navigationInstance.blades.value.splice(index);
+      const resolvedComponent = bladeRegistry.getBladeComponent(bladeInput.name);
+      if (!resolvedComponent) {
+        throw new Error(
+          `ensureBladeComponent: Failed to resolve blade by name '${bladeInput.name}' via BladeRegistry. Blade component not registered or plugin issue.`,
+        );
       }
-
-      return isPrevented;
-    } finally {
-      console.debug(`[@vc-shell/framework#useBladeNavigation] - closeBlade finished.`);
+      return resolvedComponent as BladeInstanceConstructor<Blade>;
     }
+    return bladeInput as BladeInstanceConstructor<Blade>;
   }
 
-  return {
-    navigationInstance,
+  const bladeActions = _createBladeActions(
     router,
     route,
-    closeBlade,
+    bladeState,
+    routerUtils,
+    ensureBladeComponent,
+    hasAccess,
+    notificationService,
+    i18n,
     setupPageTracking,
-  };
-});
-
-export function useBladeNavigation(): IUseBladeNavigation {
-  const navigationView = inject(navigationViewLocation, undefined) as BladeVNode;
-
-  const { hasAccess } = usePermissions();
-
-  const instance = getCurrentInstance() as BladeComponentInternalInstance;
-
-  const { router, route, navigationInstance, closeBlade, setupPageTracking } = useBladeNavigationSingleton();
-
-  const { parseUrl, getURLQuery, routes: routerRoutes } = utils(router);
-  const mainRoute = routerRoutes.find((r) => r.meta?.root);
-  if (!mainRoute) {
-    throw new Error("Main route not found");
-  }
-
-  async function openWorkspace<Blade extends Component>(
-    { blade, param, options }: IBladeEvent<Blade>,
-    query: LocationQuery | undefined = undefined,
-    params: RouteParams = {},
-    replace = false,
-  ) {
-    const createdComponent = h(
-      blade,
-      reactifyObject({
-        // param: computed(() => {
-        //   const isChildWithSameParamOpened = navigationInstance.blades.value.some(
-        //     (x) => x.props?.param === toValue(param),
-        //   );
-        //   if (isChildWithSameParamOpened) {
-        //     return toValue(param);
-        //   }
-        //   return undefined;
-        // }) as unknown as string,
-        param,
-        options,
-        navigation: {
-          idx: 0,
-        },
-      }),
-    ) as BladeVNode;
+  );
 
-    try {
-      const isPrevented = await closeBlade(0);
+  const routeResolverInstance = _createBladeRouteResolver(
+    router,
+    route,
+    bladeRegistry,
+    routerUtils,
+    bladeActions,
+    bladeState,
+    ensureBladeComponent,
+    hasAccess,
+  );
 
-      if (!isPrevented && createdComponent.type?.url) {
-        if (hasAccess(blade.permissions)) {
-          if (
-            hasAccess(blade.permissions) &&
-            navigationInstance.blades.value.length > 0 &&
-            navigationInstance.blades.value[0].type.url === createdComponent.type.url
-          ) {
-            return;
-          }
-          navigationInstance.blades.value = [createdComponent];
-          // Find the route with the matching URL and update the components.default property with the new component
-          const wsroute = routerRoutes.find((r) => r.path.endsWith(createdComponent.type?.url as string));
-          if (wsroute && wsroute.components) {
-            wsroute.components.default = createdComponent;
-          }
+  _createBladeWatchers(router, route, bladeState, routerUtils, setupPageTracking);
 
-          return await router.push({
-            name: wsroute?.name,
-            params: { ...params, ...route.params },
-            query,
-            replace,
-          });
-        } else {
-          notification.error(i18n.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), {
-            timeout: 3000,
-          });
-        }
+  return {
+    blades: bladeState.blades,
+    activeWorkspace: bladeState.activeWorkspace,
+    _internal_openBlade: bladeActions.openBlade,
+    closeBlade: bladeState.removeBladesStartingFrom,
+    goToRoot: routerUtils.goToRoot,
+    routeResolver: routeResolverInstance,
+    onParentCall: async (parentExposedMethods: Record<string, any>, args: IParentCallArgs) => {
+      if (args.method && parentExposedMethods && typeof parentExposedMethods[args.method] === "function") {
+        const method = parentExposedMethods[args.method];
+        const result = await method(args.args);
+        if (typeof args.callback === "function") args.callback(result);
+      } else {
+        console.error(
+          `No such method: ${args.method}. Please, add method with name ${args.method} and use defineExpose to expose it in parent blade`,
+        );
       }
-    } catch (e) {
-      console.error(e);
-      throw new Error(`Opening workspace '${blade?.type?.name || "Unknown"}' is prevented`);
-    }
-  }
-
-  async function openBlade<Blade extends Component>(
-    { blade, param, options, onOpen, onClose, replaceCurrentBlade = false }: IBladeEvent<Blade>,
-    isWorkspace = false,
-  ) {
-    if (!blade) {
-      throw new Error("You should pass blade component as openBlade argument");
-    }
-
-    if (isWorkspace) {
-      return await openWorkspace({ blade, param, options });
-    }
-
-    try {
-      const instanceComponent = navigationView || activeWorkspace.value;
-
-      if (!(isVNode(instanceComponent) || activeWorkspace.value)) {
-        throw new Error("No workspace found");
+    },
+    onBeforeClose: (cb: () => Promise<boolean | undefined>) => {
+      const targetBlade = bladeState.activeWorkspace.value;
+      if (targetBlade && targetBlade.props.navigation) {
+        targetBlade.props.navigation.onBeforeClose = cb;
+      } else {
+        warn("Singleton onBeforeClose: Could not identify a target blade (e.g., active workspace).");
       }
-
-      const instanceComponentIndex = findInstanceComponentIndex(instanceComponent);
-      const instanceComponentChild =
-        instanceComponentIndex >= 0 ? navigationInstance.blades.value[instanceComponentIndex + 1] : undefined;
-
-      let isPrevented = false;
-
-      if (instanceComponentChild) {
-        isPrevented = await closeBlade(instanceComponentChild.props?.navigation?.idx);
+    },
+    setNavigationQuery: (query: Record<string, string | number>) => {
+      if (!currentInstance) {
+        warn("Singleton's setNavigationQuery called in a context without a component instance.");
+        return;
       }
-
-      const currentBladeIdx = instanceComponent.props?.navigation?.idx ?? 0;
-
-      const bladeNode = createBladeNode<Blade>({
-        blade,
-        currentBladeIdx,
-        options,
-        param,
-        onClose,
-        onOpen,
-      });
-
-      if (!isPrevented) {
-        if (hasAccess(blade.permissions)) {
-          if (replaceCurrentBlade) {
-            navigationInstance.blades.value[currentBladeIdx].props.navigation.isVisible = false;
-          }
-          setupPageTracking.beforeEach({ name: bladeNode.type.name! });
-          navigationInstance.blades.value.push(bladeNode);
-        } else {
-          notification.error(i18n.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), { timeout: 3000 });
-        }
+      const typeName = (currentInstance.vnode.type as CoreBladeAdditionalSettings).name?.toLowerCase();
+      if (
+        typeName &&
+        bladeState.activeWorkspace.value &&
+        bladeState.activeWorkspace.value.props.navigation?.idx === 0
+      ) {
+        const namedQuery = _.mapKeys(_.mapValues(query, String), (v, k) => `${typeName}_${k}`);
+        const cleanQuery = _.omitBy(namedQuery, _.isNil);
+        router.options.history.replace(
+          decodeURIComponent(
+            `${window.location.hash.substring(1).split("?")[0]}?${new URLSearchParams(cleanQuery).toString()}`,
+          ),
+        );
       }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  function findInstanceComponentIndex(instanceComponent: BladeVNode) {
-    return _.findLastIndex(navigationInstance.blades.value, (x) => _.isEqual(x.type, instanceComponent.type));
-  }
-
-  function createBladeNode<Blade extends Component>(args: {
-    blade: BladeInstanceConstructor<Blade>;
-    currentBladeIdx: number;
-    options: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<Blade>>["$props"], "options"> | undefined;
-    param?: string;
-    onClose?: () => void;
-    onOpen?: () => void;
-  }) {
-    const { blade, currentBladeIdx, options, param, onClose, onOpen } = args;
-    return h(
-      blade,
-      Object.assign(
-        {},
-        reactiveComputed(() => ({ options, param })),
-        {
-          navigation: {
-            onClose,
-            onOpen,
-            idx: currentBladeIdx + 1,
-          },
-        },
-      ),
-    ) as BladeVNode;
-  }
-
-  async function onParentCall(parentExposedMethods: Record<string, any>, args: IParentCallArgs) {
-    console.debug(`vc-app#onParentCall({ method: ${args.method} }) called.`);
-
-    if (args.method && parentExposedMethods && typeof parentExposedMethods[args.method] === "function") {
-      const method = parentExposedMethods[args.method];
-      const result = await method(args.args);
-
-      if (typeof args.callback === "function") {
-        args.callback(result);
+    },
+    getNavigationQuery: () => {
+      if (!currentInstance) {
+        warn("Singleton's getNavigationQuery called in a context without a component instance.");
+        return undefined;
       }
-    } else {
-      console.error(
-        `No such method: ${args.method}. Please, add method with name ${args.method} and use defineExpose to expose it in parent blade`,
-      );
-    }
-  }
-
-  function resolveBladeByName(name: string): BladeInstanceConstructor {
-    if (!instance) {
-      warn("resolveComponentByName can only be used in setup().");
+      const typeName = (currentInstance.vnode.type as CoreBladeAdditionalSettings).name?.toLowerCase();
+      if (
+        typeName &&
+        bladeState.activeWorkspace.value &&
+        bladeState.activeWorkspace.value.props.navigation?.idx === 0
+      ) {
+        const queryKeys = Object.keys(route.query);
+        const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(typeName));
+        const namedQuery = _.mapKeys(_.pick(route.query, bladeQueryKeys), (v, k) => k.replace(`${typeName}_`, ""));
+
+        const result: Record<string, string | number> = {};
+        for (const [key, value] of Object.entries(namedQuery)) {
+          const numValue = Number(value);
+          result[key] = isNaN(numValue) ? (value as string) : numValue;
+        }
+        return result;
+      }
+      return undefined;
+    },
+    currentBladeNavigationData: computed(() => {
+      return bladeState.activeWorkspace.value?.props?.navigation ?? undefined;
+    }),
+  };
+});
 
-      return null as unknown as BladeInstanceConstructor;
+export function useBladeNavigation(): IUseBladeNavigation {
+  const singleton = useBladeNavigationSingleton() as typeof useBladeNavigationSingleton extends () => infer R
+    ? R
+    : never;
+  const currentCallingInstance = getCurrentInstance() as BladeComponentInternalInstance | null;
+  const bladeRegistry = useBladeRegistry();
+
+  const currentBladeNavigationData = computed(() => {
+    if (!currentCallingInstance) return undefined;
+    const viewNode = (currentCallingInstance as any).provides[navigationViewLocation as any] as BladeVNode | undefined;
+    if (
+      !viewNode &&
+      singleton.activeWorkspace.value &&
+      currentCallingInstance.vnode &&
+      _.isEqual(currentCallingInstance.vnode.type, singleton.activeWorkspace.value.type)
+    ) {
+      return singleton.activeWorkspace.value.props?.navigation;
     }
+    return viewNode?.props?.navigation;
+  });
 
-    if (!name) {
-      throw new Error("Blade name is required.");
+  const onBeforeClose = (cb: () => Promise<boolean | undefined>) => {
+    if (!currentCallingInstance) {
+      warn("onBeforeClose called outside of a component setup context.");
+      return;
     }
-
-    const components = instance?.appContext.components;
-    if (components[name]) {
-      return components[name] as BladeInstanceConstructor;
+    const viewNode = (currentCallingInstance as any).provides[navigationViewLocation as any] as BladeVNode | undefined;
+    const targetBlade = singleton.blades.value.find(
+      (b) =>
+        (b && viewNode && _.isEqual(b, viewNode)) ||
+        (b &&
+          b.props?.navigation?.idx === 0 &&
+          currentCallingInstance.vnode &&
+          _.isEqual(b.type, currentCallingInstance.vnode.type)),
+    );
+    if (targetBlade && targetBlade.props.navigation) {
+      targetBlade.props.navigation.onBeforeClose = cb;
     } else {
-      throw new Error(`Blade '${name}' not found.`);
-    }
-  }
-
-  function routeResolver(to: RouteLocationNormalized) {
-    if (!hasNecessaryRoute(to)) {
-      return generateRoute(to, navigationInstance.internalRoutes);
+      warn("Context-specific onBeforeClose: Could not identify the target blade in the global list.");
     }
-  }
-
-  function hasNecessaryRoute(to: RouteLocationNormalized) {
-    return routerRoutes.find((route) => route.path === to.path);
-  }
-
-  /**
-   * Generates and handles navigation for dynamic routes based on the provided route information.
-   *
-   * Supports App component URLs with variable like '/:userId?'.
-   * @link https://router.vuejs.org/guide/essentials/dynamic-matching.html
-   *
-   * @param to - The target route.
-   * @param routes - The array of BladeRoutesRecord containing the registered routes.
-   */
-  async function generateRoute(to: RouteLocationNormalized, routes: BladeRoutesRecord[]) {
-    // Extract parameters excluding "pathMatch". This is necessary if a variable is used as the App component URL, for example, /:userId?
-    const params = Object.fromEntries(Object.entries(to.params).filter(([key]) => key !== "pathMatch"));
-
-    // Get the raw path of the main route.
-    const parentRawPath = routerRoutes.find((route) => route.name === mainRoute?.name)?.path;
-
-    // Determine the parent path based on the parameters.
-    const parentPath =
-      parentRawPath && parentRawPath.includes(Object.keys(params)[0]) ? `/${Object.values(params)[0]}` : "";
-
-    // Set the base param value.
-    mainRouteBaseParamURL.value = parentPath;
-
-    // Parse the URL to extract relevant route information.
-    const parsedRoutes = parseUrl(parentPath !== "/" ? to.path.slice(parentPath.length) : to.path);
-
-    if (parsedRoutes !== undefined) {
-      const { workspace, blade, param } = parsedRoutes;
-
-      // Find the registered route component.
-      const registeredWorkspaceComponent = routes.find((route) => route.route === `/${workspace}`)?.component;
-      const registeredRouteComponent = routes.find((route) => route.route === `/${blade}`)?.component;
+  };
 
-      if (!hasAccess(registeredWorkspaceComponent?.type.permissions) || !registeredWorkspaceComponent) {
-        return goToRoot();
+  return {
+    blades: singleton.blades,
+    activeWorkspace: singleton.activeWorkspace,
+    openBlade: <Blade extends Component>(
+      args: IBladeEvent<Blade>,
+      isWorkspace?: boolean,
+    ): Promise<void | NavigationFailure> => {
+      let sourceBladeInstanceForOpening: BladeVNode | undefined = undefined;
+      if (currentCallingInstance) {
+        sourceBladeInstanceForOpening = (currentCallingInstance as any).provides[navigationViewLocation as any] as
+          | BladeVNode
+          | undefined;
       }
 
-      // Open the workspace component or workspace route.
-      if (registeredRouteComponent?.type.isWorkspace) {
-        await openWorkspace(
-          {
-            blade: registeredRouteComponent as unknown as BladeInstanceConstructor,
-          },
-          undefined,
-          undefined,
-          true,
-        );
-        return { name: registeredRouteComponent?.type.name, params };
+      if (!sourceBladeInstanceForOpening) {
+        sourceBladeInstanceForOpening = singleton.activeWorkspace.value;
       }
 
-      // Open the workspace component with param or workspace route.
-      if (registeredWorkspaceComponent) {
-        await openWorkspace(
-          reactifyObject({
-            blade: registeredWorkspaceComponent as unknown as BladeInstanceConstructor,
-            param: computed(() => {
-              if (registeredRouteComponent?.type.moduleUid === registeredWorkspaceComponent.type.moduleUid) {
-                return param;
-              }
-              return undefined;
-            }) as unknown as string,
-          }),
-          getURLQuery().obj,
-          params,
-          true,
-        );
-
-        // Open the route if it's routable.
-        if (
-          registeredRouteComponent?.type.routable &&
-          registeredWorkspaceComponent.type.moduleUid === registeredRouteComponent.type.moduleUid
-        ) {
-          await openBlade({
-            blade: registeredRouteComponent as unknown as BladeInstanceConstructor,
-            param: param,
-          });
-        }
-
-        return { name: registeredWorkspaceComponent?.type.name, params, query: to.query };
-      }
-    } else {
-      return goToRoot();
-    }
-  }
-
-  function goToRoot() {
-    const mainRoute = routerRoutes.find((route) => route.meta?.root);
-    const mainRouteAlias = routerRoutes.find((route) => route.aliasOf?.path === mainRoute?.path) || mainRoute;
-    return { name: mainRouteAlias?.name, params: route.params };
-  }
-
-  const currentBladeNavigationData = computed(() => navigationView?.props?.navigation ?? undefined);
-
-  function onBeforeClose(cb: () => Promise<boolean | undefined>) {
-    const instanceComponent = navigationView;
-
-    const currentBlade = navigationInstance.blades.value.find((x: any) => _.isEqual(x, instanceComponent));
-
-    if (currentBlade) {
-      currentBlade.props.navigation.onBeforeClose = cb;
-    }
-  }
-
-  function setNavigationQuery(query: Record<string, string | number>) {
-    const typeName = instance.vnode.type.name?.toLowerCase();
-    if (typeName && instance.vnode.props.navigation.idx === 0) {
-      // add blade name to query keys
-      const namedQuery = _.mapKeys(
-        _.mapValues(query, (value) => value?.toString()),
-        (value, key) => typeName + "_" + key,
-      );
-      const cleanQuery = _.omitBy(namedQuery, _.isNil);
-
-      router.options.history.replace(
-        decodeURIComponent(
-          `${window.location.hash.substring(1).split("?")[0]}?${new URLSearchParams(cleanQuery).toString()}`,
-        ),
-      );
-    }
-  }
-
-  function getNavigationQuery() {
-    const typeName = instance.vnode.type.name?.toLowerCase();
-    if (typeName && instance.vnode.props.navigation.idx === 0) {
-      const queryKeys = Array.from(Object.keys(route.query));
-      const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(typeName));
-
-      const namedQuery = _.mapKeys(_.pick(route.query, bladeQueryKeys), (value, key) =>
-        key.replace(typeName + "_", ""),
-      ) as Record<string, string | number>;
-
-      const obj: typeof namedQuery = {};
-      for (const [key, value] of Object.entries(namedQuery)) {
-        const numValue = Number(value);
-
-        if (!isNaN(numValue)) {
-          obj[key] = numValue;
-        } else {
-          obj[key] = value;
-        }
+      if (typeof singleton._internal_openBlade === "function") {
+        return singleton._internal_openBlade(args, isWorkspace, sourceBladeInstanceForOpening);
+      } else {
+        console.error("Internal _internal_openBlade method not found on singleton.");
+        return Promise.reject(new Error("Blade navigation internal error."));
       }
-
-      return obj;
-    }
-  }
-
-  return {
-    blades: computed(() => navigationInstance.blades.value),
-    openBlade,
-    closeBlade,
-    goToRoot,
-    onParentCall,
-    resolveBladeByName,
-    routeResolver,
+    },
+    closeBlade: singleton.closeBlade,
+    goToRoot: singleton.goToRoot,
+    onParentCall: singleton.onParentCall,
+    resolveBladeByName: (name: string) => bladeRegistry.getBladeComponent(name),
+    routeResolver: singleton.routeResolver,
     currentBladeNavigationData,
     onBeforeClose,
-    setNavigationQuery,
-    getNavigationQuery,
+    setNavigationQuery: singleton.setNavigationQuery,
+    getNavigationQuery: singleton.getNavigationQuery,
   };
 }