@vc-shell/framework 1.2.4-beta.2 → 1.2.4-beta.4

package/core/composables/index.ts

@@ -1,25 +1,26 @@
-export * from "./useFunctions";
-export * from "./useUser";
-export * from "./useNotifications";
-export * from "./useSettings";
-export * from "./usePermissions";
-export * from "./useAsync";
-export * from "./useApiClient";
-export * from "./useLoading";
-export * from "./useErrorHandler";
-export * from "./useAssets";
-export * from "./useMenuService";
-export * from "./useBeforeUnload";
-export * from "./useLanguages";
-export * from "./useBreadcrumbs";
-export * from "./useAppInsights";
-export * from "./useTheme";
-export * from "./useWidgets";
-export * from "./useDashboard";
-export * from "./useAppBarWidget";
-export * from "./useSettingsMenu";
-export * from "./useToolbar";
-export * from "./useDynamicProperties";
-export * from "./useBlade";
+export * from "@core/composables/useFunctions";
+export * from "@core/composables/useUser";
+export * from "@core/composables/useNotifications";
+export * from "@core/composables/useSettings";
+export * from "@core/composables/usePermissions";
+export * from "@core/composables/useAsync";
+export * from "@core/composables/useApiClient";
+export * from "@core/composables/useLoading";
+export * from "@core/composables/useErrorHandler";
+export * from "@core/composables/useAssets";
+export * from "@core/composables/useMenuService";
+export * from "@core/composables/useBeforeUnload";
+export * from "@core/composables/useLanguages";
+export * from "@core/composables/useBreadcrumbs";
+export * from "@core/composables/useAppInsights";
+export * from "@core/composables/useTheme";
+export * from "@core/composables/useWidgets";
+export * from "@core/composables/useDashboard";
+export * from "@core/composables/useAppBarWidget";
+export * from "@core/composables/useSettingsMenu";
+export * from "@core/composables/useToolbar";
+export * from "@core/composables/useDynamicProperties";
+export * from "@core/composables/useBlade";
+export * from "@core/composables/useSidebarState";
 // useBladeSelection and useAiAgent are now part of the ai-agent plugin
 // export * from "./core/plugins/ai-agent";

package/core/composables/useAppBarMobileButtons/index.ts

@@ -1,11 +1,11 @@
-import { inject, provide } from "vue";
-import { AppBarMobileButtonsServiceKey } from "../../../injection-keys";
-import { createAppBarMobileButtonsService } from "../../services/app-bar-mobile-buttons-service";
-import { createLogger, InjectionError } from "../../utilities";
+import { inject, provide, getCurrentScope, onScopeDispose } from "vue";
+import { AppBarMobileButtonsServiceKey } from "@framework/injection-keys";
+import { createAppBarMobileButtonsService, IAppBarMobileButtonsService } from "@core/services/app-bar-mobile-buttons-service";
+import { createLogger, InjectionError } from "@core/utilities";
 
 const logger = createLogger("use-app-bar-mobile-buttons");
 
-export function provideAppBarMobileButtonsService() {
+export function provideAppBarMobileButtonsService(): IAppBarMobileButtonsService {
   const existingService = inject(AppBarMobileButtonsServiceKey, null);
   if (existingService) {
     return existingService;
@@ -13,6 +13,13 @@ export function provideAppBarMobileButtonsService() {
 
   const service = createAppBarMobileButtonsService();
   provide(AppBarMobileButtonsServiceKey, service);
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      // Service cleanup on scope disposal
+    });
+  }
+
   return service;
 }
 

package/core/composables/useAppBarWidget/index.test.ts

@@ -1,9 +1,9 @@
 import { describe, it, expect } from "vitest";
 import { defineComponent, h, inject } from "vue";
 import { mount } from "@vue/test-utils";
-import { AppBarWidgetServiceKey } from "../../../injection-keys";
-import { provideAppBarWidget, useAppBarWidget } from "./index";
-import { createAppBarWidgetService } from "../../services/app-bar-menu-service";
+import { AppBarWidgetServiceKey } from "@framework/injection-keys";
+import { provideAppBarWidget, useAppBarWidget } from "@core/composables/useAppBarWidget";
+import { createAppBarWidgetService } from "@core/services/app-bar-menu-service";
 
 describe("useAppBarWidget", () => {
   it("throws InjectionError when no service is provided", () => {

package/core/composables/useAppBarWidget/index.ts

@@ -1,12 +1,7 @@
 import { inject, provide, getCurrentScope, onScopeDispose } from "vue";
-import {
-  addAppBarWidget,
-  createAppBarWidgetService,
-  IAppBarWidgetService,
-  appBarWidgetBus,
-} from "../../services/app-bar-menu-service";
-import { AppBarWidgetServiceKey } from "../../../injection-keys";
-import { createLogger, InjectionError } from "../../utilities";
+import { createAppBarWidgetService, IAppBarWidgetService, appBarWidgetBus } from "@core/services/app-bar-menu-service";
+import { AppBarWidgetServiceKey } from "@framework/injection-keys";
+import { createLogger, InjectionError } from "@core/utilities";
 
 const logger = createLogger("use-app-bar-widget");
 
@@ -34,5 +29,3 @@ export function useAppBarWidget(): IAppBarWidgetService {
   }
   return service;
 }
-
-export { addAppBarWidget };

package/core/composables/useAppInsights/index.ts

@@ -1,9 +1,11 @@
-import { inject } from "vue";
+import { inject, type InjectionKey } from "vue";
 import { AppInsightsPluginOptions, useAppInsights as useInsights } from "vue3-application-insights";
 import { generateW3CId } from "@microsoft/applicationinsights-core-js";
-import { useUserManagement } from "./../useUserManagement";
+import { useUserManagement } from "@core/composables/useUserManagement";
 import { ApplicationInsights, Snippet } from "@microsoft/applicationinsights-web";
 
+export const AppInsightsOptionsKey: InjectionKey<AppInsightsPluginOptions> = Symbol("AppInsightsOptions");
+
 export interface IUseAppInsights {
   setupPageTracking: {
     beforeEach: (route: { name: string }) => void;
@@ -15,7 +17,7 @@ export interface IUseAppInsights {
 export function useAppInsights(): IUseAppInsights {
   const appInsights = useInsights();
   const { user } = useUserManagement();
-  const appInsightsOptions = inject<AppInsightsPluginOptions>("appInsightsOptions");
+  const appInsightsOptions = inject(AppInsightsOptionsKey, undefined);
 
   function setupPageTracking() {
     const appName = appInsightsOptions?.appName ? `[${appInsightsOptions.appName}] ` : "";

package/core/composables/useAssets/index.ts

@@ -1,7 +1,7 @@
 import { computed, ref, ComputedRef } from "vue";
 import * as _ from "lodash-es";
-import { ICommonAsset } from "../../types";
-import { createLogger } from "../../utilities";
+import { ICommonAsset } from "@core/types";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("use-assets");
 

package/core/composables/useAsync/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { readonly, ref } from "vue";
-import { HasLoading } from "../useLoading";
-import { createLogger } from "../../utilities";
+import { HasLoading } from "@core/composables/useLoading";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("use-async");
 

package/core/composables/useBlade/index.ts

@@ -1,16 +1,16 @@
 import { inject, computed } from "vue";
-import { BladeInstance } from "../../../injection-keys";
+import { BladeInstance } from "@framework/injection-keys";
 import {
     BladeDescriptorKey,
     BladeStackKey,
     BladeMessagingKey,
-} from "../../../shared/components/blade-navigation/types";
+} from "@shared/components/blade-navigation/types";
 import type {
     BladeDescriptor,
     BladeOpenEvent,
     IBladeStack,
     IBladeMessaging,
-} from "../../../shared/components/blade-navigation/types";
+} from "@shared/components/blade-navigation/types";
 
 /**
  * Composable for accessing the current blade instance (legacy API).

package/core/composables/useBladeRegistry/index.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createApp, defineComponent, h } from "vue";
-import { createBladeRegistry } from "./index";
-import type { IBladeRegistrationData } from "./index";
+import { createBladeRegistry } from "@core/composables/useBladeRegistry";
+import type { IBladeRegistrationData } from "@core/composables/useBladeRegistry";
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 

package/core/composables/useBladeRegistry/index.ts

@@ -1,6 +1,6 @@
 import { App, inject, shallowRef, computed, ComputedRef, readonly as vueReadonly } from "vue";
-import { BladeInstanceConstructor } from "../../../shared/components/blade-navigation/types";
-import { createLogger } from "../../utilities";
+import { BladeInstanceConstructor } from "@shared/components/blade-navigation/types";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("blade-registry");
 

package/core/composables/useBreadcrumbs/index.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect, vi } from "vitest";
+import { useBreadcrumbs } from "@core/composables/useBreadcrumbs";
+
+describe("useBreadcrumbs", () => {
+  it("starts with empty breadcrumbs", () => {
+    const { breadcrumbs } = useBreadcrumbs();
+    expect(breadcrumbs.value).toEqual([]);
+  });
+
+  it("push adds a breadcrumb", () => {
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    expect(breadcrumbs.value).toHaveLength(1);
+    expect(breadcrumbs.value[0].id).toBe("home");
+  });
+
+  it("push multiple breadcrumbs builds a trail", () => {
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    push({ id: "products", title: "Products" });
+    push({ id: "electronics", title: "Electronics" });
+    expect(breadcrumbs.value).toHaveLength(3);
+    expect(breadcrumbs.value.map((b) => b.id)).toEqual(["home", "products", "electronics"]);
+  });
+
+  it("push deduplicates by id — updates existing instead of adding duplicate", () => {
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    push({ id: "products", title: "Products" });
+    push({ id: "home", title: "Home Updated" });
+    // Should NOT create a duplicate — update in place
+    expect(breadcrumbs.value).toHaveLength(2);
+    expect(breadcrumbs.value[0].id).toBe("home");
+    expect(breadcrumbs.value[1].id).toBe("products");
+  });
+
+  it("remove filters out breadcrumbs by ids", () => {
+    const { breadcrumbs, push, remove } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    push({ id: "products", title: "Products" });
+    push({ id: "electronics", title: "Electronics" });
+    remove(["products"]);
+    expect(breadcrumbs.value.map((b) => b.id)).toEqual(["home", "electronics"]);
+  });
+
+  it("remove all clears breadcrumbs", () => {
+    const { breadcrumbs, push, remove } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    push({ id: "products", title: "Products" });
+    remove(["home", "products"]);
+    expect(breadcrumbs.value).toHaveLength(0);
+  });
+
+  it("remove non-existent id is a no-op", () => {
+    const { breadcrumbs, push, remove } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    remove(["nonexistent"]);
+    expect(breadcrumbs.value).toHaveLength(1);
+  });
+
+  it("clickHandler trims trail after clicked breadcrumb", async () => {
+    const handler = vi.fn().mockResolvedValue(true);
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home", clickHandler: handler });
+    push({ id: "products", title: "Products" });
+    push({ id: "electronics", title: "Electronics" });
+
+    expect(breadcrumbs.value).toHaveLength(3);
+
+    // Click on "home" — should trim everything after it
+    await breadcrumbs.value[0].clickHandler!("home");
+
+    expect(handler).toHaveBeenCalledWith("home");
+    expect(breadcrumbs.value.map((b) => b.id)).toEqual(["home"]);
+  });
+
+  it("clickHandler returning void (undefined) trims trail", async () => {
+    const handler = vi.fn().mockResolvedValue(undefined);
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home", clickHandler: handler });
+    push({ id: "products", title: "Products" });
+
+    await breadcrumbs.value[0].clickHandler!("home");
+
+    expect(breadcrumbs.value.map((b) => b.id)).toEqual(["home"]);
+  });
+
+  it("clickHandler returning false prevents trail trimming", async () => {
+    const handler = vi.fn().mockResolvedValue(false);
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home", clickHandler: handler });
+    push({ id: "products", title: "Products" });
+
+    await breadcrumbs.value[0].clickHandler!("home");
+
+    // Trail should NOT be trimmed
+    expect(breadcrumbs.value).toHaveLength(2);
+  });
+
+  it("clickHandler error is caught and trail is not trimmed", async () => {
+    const handler = vi.fn().mockRejectedValue(new Error("fail"));
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home", clickHandler: handler });
+    push({ id: "products", title: "Products" });
+
+    // Should not throw
+    await breadcrumbs.value[0].clickHandler!("home");
+
+    // Trail should NOT be trimmed on error
+    expect(breadcrumbs.value).toHaveLength(2);
+  });
+
+  it("breadcrumb without clickHandler has no wrapper", () => {
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    expect(breadcrumbs.value[0].clickHandler).toBeUndefined();
+  });
+
+  it("clicking middle breadcrumb trims only items after it", async () => {
+    const handler = vi.fn().mockResolvedValue(true);
+    const { breadcrumbs, push } = useBreadcrumbs();
+    push({ id: "home", title: "Home" });
+    push({ id: "products", title: "Products", clickHandler: handler });
+    push({ id: "electronics", title: "Electronics" });
+    push({ id: "laptops", title: "Laptops" });
+
+    await breadcrumbs.value[1].clickHandler!("products");
+
+    expect(breadcrumbs.value.map((b) => b.id)).toEqual(["home", "products"]);
+  });
+
+  it("each useBreadcrumbs call creates an independent instance", () => {
+    const instance1 = useBreadcrumbs();
+    const instance2 = useBreadcrumbs();
+    instance1.push({ id: "a", title: "A" });
+    expect(instance1.breadcrumbs.value).toHaveLength(1);
+    expect(instance2.breadcrumbs.value).toHaveLength(0);
+  });
+});

package/core/composables/useBreadcrumbs/index.ts

@@ -1,83 +1,65 @@
-import { Breadcrumbs } from "./../../../ui/types/index";
-import { ComputedRef, computed, reactive, toValue } from "vue";
-import * as _ from "lodash-es";
-import { createLogger } from "../../utilities";
+import { Breadcrumbs } from "@ui/types";
+import { ComputedRef, computed, shallowRef } from "vue";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("use-breadcrumbs");
 
-interface HistoryRecord {
-  records: Breadcrumbs[];
-  current?: Breadcrumbs;
-}
-
 export interface IUseBreadcrumbs {
   breadcrumbs: ComputedRef<Breadcrumbs[]>;
   push: (breadcrumb: Breadcrumbs) => void;
   remove: (ids: string[]) => void;
 }
 
-export function useBreadcrumbs() {
-  const history = reactive({
-    current: undefined,
-    records: [],
-  }) as HistoryRecord;
+export function useBreadcrumbs(): IUseBreadcrumbs {
+  const items = shallowRef<Breadcrumbs[]>([]);
 
-  function isBreadcrumbsEqual(x: Breadcrumbs | undefined, y: Breadcrumbs | undefined) {
-    return x && y && (toValue(x.id) === toValue(y.id) || toValue(x.title) === toValue(y.title));
-  }
-
-  function removeNext(id: string) {
-    const index = history.records.findIndex((record) => record.id === id);
+  /**
+   * Trim the trail: keep everything up to and including the item with `id`.
+   * Called when a breadcrumb's clickHandler returns true (or void).
+   */
+  function trimAfter(id: string): void {
+    const index = items.value.findIndex((item) => item.id === id);
     if (index !== -1) {
-      history.current = history.records[index];
-
-      history.records.splice(index);
+      items.value = items.value.slice(0, index + 1);
     }
   }
 
-  function push(breadcrumb: Breadcrumbs) {
-    const bread = {
+  function push(breadcrumb: Breadcrumbs): void {
+    // Wrap the clickHandler to auto-trim the trail on successful click
+    const wrapped: Breadcrumbs = {
       ...breadcrumb,
-      clickHandler: async (id: string) => {
-        if (breadcrumb.clickHandler) {
-          try {
-            const res = await breadcrumb.clickHandler?.(id);
-
-            if (typeof res === "undefined" || res) {
-              // remove next items in history.records
-              removeNext(id);
+      clickHandler: breadcrumb.clickHandler
+        ? async (id: string) => {
+            try {
+              const result = await breadcrumb.clickHandler!(id);
+              // Trim trail unless handler explicitly returned false
+              if (result !== false) {
+                trimAfter(id);
+              }
+            } catch (e) {
+              logger.error("Breadcrumb click handler failed:", e);
             }
-          } catch (e) {
-            logger.error("Breadcrumb click handler failed:", e);
           }
-        }
-      },
+        : undefined,
     };
 
-    if (
-      history.current &&
-      !isBreadcrumbsEqual(history.current, bread) &&
-      !isBreadcrumbsEqual(history.current, _.last(history.records))
-    ) {
-      history.records.push(history.current);
-    }
-
-    if (bread) {
-      history.current = bread;
+    // Dedup by id: if a breadcrumb with this id already exists, update in place
+    const existingIndex = items.value.findIndex((item) => item.id === wrapped.id);
+    if (existingIndex !== -1) {
+      const updated = [...items.value];
+      updated[existingIndex] = wrapped;
+      items.value = updated;
+    } else {
+      items.value = [...items.value, wrapped];
     }
   }
 
-  function remove(ids: string[]) {
-    // remove items with ids from history.records
-    history.records = history.records.filter((record) => !ids.includes(record.id));
-
-    if (history.current && ids.includes(history.current.id)) {
-      history.current = undefined;
-    }
+  function remove(ids: string[]): void {
+    items.value = items.value.filter((item) => !ids.includes(item.id));
   }
 
   return {
-    breadcrumbs: computed(() => (history.current ? history.records.concat([history.current]) : [])),
+    breadcrumbs: computed(() => items.value),
     push,
     remove,
   };

package/core/composables/useDashboard/index.test.ts

@@ -1,9 +1,9 @@
 import { describe, it, expect } from "vitest";
 import { defineComponent, h, inject } from "vue";
 import { mount } from "@vue/test-utils";
-import { DashboardServiceKey } from "../../../injection-keys";
-import { provideDashboardService, useDashboard } from "./index";
-import { createDashboardService } from "../../services/dashboard-service";
+import { DashboardServiceKey } from "@framework/injection-keys";
+import { provideDashboardService, useDashboard } from "@core/composables/useDashboard";
+import { createDashboardService } from "@core/services/dashboard-service";
 
 describe("useDashboard", () => {
   it("throws InjectionError when no service is provided", () => {

package/core/composables/useDashboard/index.ts

@@ -3,11 +3,11 @@ import {
   IDashboardService,
   registerDashboardWidget,
   dashboardBus,
-} from "../../services/dashboard-service";
+} from "@core/services/dashboard-service";
 import { provide, inject, getCurrentScope, onScopeDispose } from "vue";
-import { DashboardServiceKey } from "../../../injection-keys";
-import { usePermissions } from "../usePermissions";
-import { createLogger, InjectionError } from "../../utilities";
+import { DashboardServiceKey } from "@framework/injection-keys";
+import { usePermissions } from "@core/composables/usePermissions";
+import { createLogger, InjectionError } from "@core/utilities";
 
 const logger = createLogger("use-dashboard");
 

package/core/composables/useDynamicProperties/index.ts

@@ -1,5 +1,5 @@
-import { useLoading } from "../useLoading";
-import { useAsync } from "../useAsync";
+import { useLoading } from "@core/composables/useLoading";
+import { useAsync } from "@core/composables/useAsync";
 import { ComputedRef } from "vue";
 
 // === TYPE DEFINITIONS ===

package/core/composables/useErrorHandler/index.ts

@@ -1,8 +1,8 @@
 import { onErrorCaptured, getCurrentInstance, ref, Ref, nextTick } from "vue";
 import { useAppInsights } from "..";
-import { useUserManagement } from "../useUserManagement";
-import { DisplayableError, parseError } from "../../utilities/error";
-import { createLogger } from "../../utilities";
+import { useUserManagement } from "@core/composables/useUserManagement";
+import { DisplayableError, parseError } from "@core/utilities/error";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("use-error-handler");
 

package/core/composables/useFunctions/index.ts

@@ -1,7 +1,7 @@
-import debounce from "./debounce";
-import delay from "./delay";
-import once from "./once";
-import throttle from "./throttle";
+import debounce from "@core/composables/useFunctions/debounce";
+import delay from "@core/composables/useFunctions/delay";
+import once from "@core/composables/useFunctions/once";
+import throttle from "@core/composables/useFunctions/throttle";
 
 interface IUseFunctions {
   debounce: typeof debounce;

package/core/composables/useGlobalSearch/index.ts

@@ -1,7 +1,7 @@
-import { inject, provide } from "vue";
-import { GlobalSearchKey } from "../../../injection-keys";
-import { GlobalSearchState, createGlobalSearchService } from "../../services/global-search-service";
-import { createLogger, InjectionError } from "../../utilities";
+import { inject, provide, getCurrentScope, onScopeDispose } from "vue";
+import { GlobalSearchKey } from "@framework/injection-keys";
+import { GlobalSearchState, createGlobalSearchService } from "@core/services/global-search-service";
+import { createLogger, InjectionError } from "@core/utilities";
 
 const logger = createLogger("use-global-search");
 
@@ -13,6 +13,14 @@ export function provideGlobalSearch(): GlobalSearchState {
 
   const state = createGlobalSearchService();
   provide(GlobalSearchKey, state);
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      state.isSearchVisible.value = {};
+      state.searchQuery.value = {};
+    });
+  }
+
   return state;
 }
 

package/core/composables/useLanguages/index.ts

@@ -1,7 +1,7 @@
 import { hasInjectionContext, inject, provide } from "vue";
-import { LanguageServiceKey } from "../../../injection-keys";
-import { ILanguageService, createLanguageService } from "../../services/language-service";
-import { createLogger, InjectionError } from "../../utilities";
+import { LanguageServiceKey } from "@framework/injection-keys";
+import { ILanguageService, createLanguageService } from "@core/services/language-service";
+import { createLogger, InjectionError } from "@core/utilities";
 
 const logger = createLogger("use-languages");
 let fallbackLanguageService: ILanguageService | null = null;

package/core/composables/useMenuService/index.test.ts

@@ -1,9 +1,9 @@
 import { describe, it, expect } from "vitest";
 import { defineComponent, h, inject } from "vue";
 import { mount } from "@vue/test-utils";
-import { MenuServiceKey } from "../../../injection-keys";
-import { provideMenuService, useMenuService } from "./index";
-import { createMenuService } from "../../services/menu-service";
+import { MenuServiceKey } from "@framework/injection-keys";
+import { provideMenuService, useMenuService } from "@core/composables/useMenuService";
+import { createMenuService } from "@core/services/menu-service";
 
 describe("useMenuService", () => {
   it("throws InjectionError when no service is provided", () => {

package/core/composables/useMenuService/index.ts

@@ -8,9 +8,9 @@ import {
   removeMenuBadge,
   getMenuBadges,
   menuServiceBus,
-} from "../../services/menu-service";
-import { MenuServiceKey } from "../../../injection-keys";
-import { createLogger, InjectionError } from "../../utilities";
+} from "@core/services/menu-service";
+import { MenuServiceKey } from "@framework/injection-keys";
+import { createLogger, InjectionError } from "@core/utilities";
 
 const logger = createLogger("use-menu-service");