@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

package/core/services/toolbar-widget-service.test.ts

@@ -0,0 +1,207 @@
+import { describe, it, expect, vi } from "vitest";
+
+async function loadToolbarServiceModule() {
+  vi.resetModules();
+  return import("./toolbar-service");
+}
+
+async function loadWidgetServiceModule() {
+  vi.resetModules();
+  return import("./widget-service");
+}
+
+describe("toolbar-service", () => {
+  it("keeps registration flag true while the same id is still registered in another blade", async () => {
+    const { createToolbarService } = await loadToolbarServiceModule();
+    const service = createToolbarService();
+
+    service.registerToolbarItem({ id: "duplicate" } as any, "blade-a");
+    service.registerToolbarItem({ id: "duplicate" } as any, "blade-b");
+
+    service.unregisterToolbarItem("duplicate", "blade-a");
+
+    expect(service.getToolbarItems("blade-b")).toHaveLength(1);
+    expect(service.isToolbarItemRegistered("duplicate")).toBe(true);
+  });
+
+  it("registers and retrieves toolbar items by blade", async () => {
+    const { createToolbarService } = await loadToolbarServiceModule();
+    const service = createToolbarService();
+
+    service.registerToolbarItem({ id: "btn-1", title: "Save" } as any, "blade-1");
+    service.registerToolbarItem({ id: "btn-2", title: "Delete" } as any, "blade-1");
+
+    const items = service.getToolbarItems("blade-1");
+    expect(items).toHaveLength(2);
+    expect(items.map((i) => i.id)).toEqual(["btn-1", "btn-2"]);
+  });
+
+  it("merges global * items into blade-specific items", async () => {
+    const { createToolbarService } = await loadToolbarServiceModule();
+    const service = createToolbarService();
+
+    service.registerToolbarItem({ id: "global-btn" } as any, "*");
+    service.registerToolbarItem({ id: "blade-btn" } as any, "blade-1");
+
+    const items = service.getToolbarItems("blade-1");
+    expect(items).toHaveLength(2);
+    expect(items.map((i) => i.id)).toContain("global-btn");
+    expect(items.map((i) => i.id)).toContain("blade-btn");
+  });
+
+  it("does not duplicate global items when blade has same id", async () => {
+    const { createToolbarService } = await loadToolbarServiceModule();
+    const service = createToolbarService();
+
+    service.registerToolbarItem({ id: "shared" } as any, "*");
+    service.registerToolbarItem({ id: "shared" } as any, "blade-1");
+
+    expect(service.getToolbarItems("blade-1")).toHaveLength(1);
+  });
+
+  it("clears all items for a blade", async () => {
+    const { createToolbarService } = await loadToolbarServiceModule();
+    const service = createToolbarService();
+
+    service.registerToolbarItem({ id: "a" } as any, "blade-1");
+    service.registerToolbarItem({ id: "b" } as any, "blade-1");
+    service.registerToolbarItem({ id: "c" } as any, "blade-2");
+
+    service.clearBladeToolbarItems("blade-1");
+
+    expect(service.getToolbarItems("blade-1")).toHaveLength(0);
+    expect(service.getToolbarItems("blade-2")).toHaveLength(1);
+    expect(service.isToolbarItemRegistered("a")).toBe(false);
+  });
+
+  it("updates a toolbar item in-place", async () => {
+    const { createToolbarService } = await loadToolbarServiceModule();
+    const service = createToolbarService();
+
+    service.registerToolbarItem({ id: "btn", title: "Old" } as any, "blade-1");
+    service.updateToolbarItem({ id: "btn", bladeId: "blade-1", toolbarItem: { title: "New" } as any });
+
+    const items = service.getToolbarItems("blade-1");
+    expect(items[0].title).toBe("New");
+  });
+
+  it("preregistration deduplicates by bladeId::itemId key", async () => {
+    const { registerToolbarItem, createToolbarService } = await loadToolbarServiceModule();
+
+    registerToolbarItem({ id: "pre", title: "V1" } as any, "blade-1");
+    registerToolbarItem({ id: "pre", title: "V2" } as any, "blade-1");
+
+    const service = createToolbarService();
+    const items = service.getToolbarItems("blade-1");
+    expect(items).toHaveLength(1);
+    expect(items[0].title).toBe("V2");
+  });
+
+  it("disposes service instance via bus", async () => {
+    const { createToolbarService, toolbarBus } = await loadToolbarServiceModule();
+    const service = createToolbarService();
+
+    expect(toolbarBus.instanceCount).toBe(1);
+    toolbarBus.dispose(service);
+    expect(toolbarBus.instanceCount).toBe(0);
+  });
+});
+
+describe("widget-service", () => {
+  it("keeps registration flag true while the same id is still registered in another blade", async () => {
+    const { createWidgetService } = await loadWidgetServiceModule();
+    const service = createWidgetService();
+
+    service.registerWidget({ id: "duplicate", component: {} as any }, "blade-a");
+    service.registerWidget({ id: "duplicate", component: {} as any }, "blade-b");
+
+    service.unregisterWidget("duplicate", "blade-a");
+
+    expect(service.getWidgets("blade-b")).toHaveLength(1);
+    expect(service.isWidgetRegistered("duplicate")).toBe(true);
+  });
+
+  it("returns a copy from getWidgets to prevent external mutations", async () => {
+    const { createWidgetService } = await loadWidgetServiceModule();
+    const service = createWidgetService();
+
+    service.registerWidget({ id: "widget-1", component: {} as any }, "blade-a");
+
+    const widgets = service.getWidgets("blade-a");
+    widgets.push({ id: "fake", component: {} as any });
+
+    expect(service.getWidgets("blade-a")).toHaveLength(1);
+  });
+
+  it("registers and retrieves widgets by blade", async () => {
+    const { createWidgetService } = await loadWidgetServiceModule();
+    const service = createWidgetService();
+
+    service.registerWidget({ id: "w1", component: {} as any }, "blade-1");
+    service.registerWidget({ id: "w2", component: {} as any }, "blade-1");
+
+    expect(service.getWidgets("blade-1")).toHaveLength(2);
+    expect(service.getWidgets("blade-2")).toHaveLength(0);
+  });
+
+  it("clears all widgets for a blade", async () => {
+    const { createWidgetService } = await loadWidgetServiceModule();
+    const service = createWidgetService();
+
+    service.registerWidget({ id: "w1", component: {} as any }, "blade-1");
+    service.registerWidget({ id: "w2", component: {} as any }, "blade-1");
+    service.clearBladeWidgets("blade-1");
+
+    expect(service.getWidgets("blade-1")).toHaveLength(0);
+    expect(service.isWidgetRegistered("w1")).toBe(false);
+  });
+
+  it("updates a widget in-place", async () => {
+    const { createWidgetService } = await loadWidgetServiceModule();
+    const service = createWidgetService();
+
+    service.registerWidget({ id: "w1", component: {} as any, title: "Old" }, "blade-1");
+    service.updateWidget({ id: "w1", bladeId: "blade-1", widget: { title: "New" } });
+
+    expect(service.getWidgets("blade-1")[0].title).toBe("New");
+  });
+
+  it("resolves widget props from blade data", async () => {
+    const { createWidgetService } = await loadWidgetServiceModule();
+    const service = createWidgetService();
+
+    const widget = {
+      id: "w1",
+      component: {} as any,
+      config: {
+        requiredData: ["userId"],
+        optionalData: ["role"],
+        fieldMapping: { userId: "currentUserId" },
+      },
+    };
+
+    const props = service.resolveWidgetProps(widget, { currentUserId: "42", role: "admin" });
+    expect(props).toEqual({ userId: "42", role: "admin" });
+  });
+
+  it("preregistration deduplicates by bladeId::widgetId key", async () => {
+    const { registerWidget, createWidgetService } = await loadWidgetServiceModule();
+
+    registerWidget({ id: "pre", component: {} as any, title: "V1" }, "blade-1");
+    registerWidget({ id: "pre", component: {} as any, title: "V2" }, "blade-1");
+
+    const service = createWidgetService();
+    const widgets = service.getWidgets("blade-1");
+    expect(widgets).toHaveLength(1);
+    expect(widgets[0].title).toBe("V2");
+  });
+
+  it("disposes service instance via bus", async () => {
+    const { createWidgetService, widgetBus } = await loadWidgetServiceModule();
+    const service = createWidgetService();
+
+    expect(widgetBus.instanceCount).toBe(1);
+    widgetBus.dispose(service);
+    expect(widgetBus.instanceCount).toBe(0);
+  });
+});

package/core/services/widget-service.ts

@@ -1,6 +1,7 @@
-import { Component, reactive, ref, ComponentInternalInstance, ComputedRef, Ref, markRaw, Raw } from "vue";
+import { Component, ref, ComponentInternalInstance, ComputedRef, Ref } from "vue";
 import { IBladeInstance } from "../../shared/components/blade-navigation/types";
 import { cloneDeep } from "lodash-es";
+import { createBladeScopedRegistry, createPreregistrationBus } from "./_internal";
 import { createLogger } from "../utilities";
 
 const logger = createLogger("widget-service");
@@ -10,19 +11,16 @@ export type WidgetEventHandler = (...args: unknown[]) => void;
 export interface IWidgetEvents {
   [key: string]: Set<WidgetEventHandler>;
 }
+
 export interface IExposedWidget {
   id?: string;
   [key: string]: unknown;
 }
 
 export interface IWidgetConfig {
-  // Required data that the widget MUST receive
   requiredData?: string[];
-  // Optional data that the widget can use if available
   optionalData?: string[];
-  // Function to transform blade data into widget props
   propsResolver?: (bladeData: Record<string, unknown>) => Record<string, unknown>;
-  // Field mapping (if names in blade and widget differ)
   fieldMapping?: Record<string, string>;
 }
 
@@ -42,12 +40,11 @@ export interface IWidgetRegistration {
   widget: IWidget;
 }
 
-// Interface for global registration of external widgets
 export interface IExternalWidgetRegistration {
   id: string;
   component: Component;
   config: IWidgetConfig;
-  targetBlades?: string[]; // For which blades is the widget intended
+  targetBlades?: string[];
   isVisible?: boolean | ComputedRef<boolean> | Ref<boolean> | ((blade?: IBladeInstance) => boolean);
   title?: string;
   updateFunctionName?: string;
@@ -70,112 +67,112 @@ export interface IWidgetService {
   cloneWidget: <T extends IWidget | IExternalWidgetRegistration>(widget: T) => T;
 }
 
-// Global state for pre-registering widgets
-const preregisteredWidgets: IWidgetRegistration[] = [];
-const preregisteredIds = new Set<string>();
+// --- External widgets (module-level, independent of service instances) ---
 
-// Global state for external widgets
-const externalWidgets: IExternalWidgetRegistration[] = [];
+const externalWidgets = new Map<string, IExternalWidgetRegistration>();
 
-/**
- * Registers a widget before the service is initialized
- */
-export function registerWidget(widget: IWidget, bladeId: string): void {
-  const normalizedBladeId = bladeId.toLowerCase();
-  preregisteredWidgets.push({ bladeId: normalizedBladeId, widget });
-  preregisteredIds.add(widget.id);
+function normalizeTargetBlades(targetBlades?: string[]): string[] | undefined {
+  return targetBlades?.map((bladeId) => bladeId.toLowerCase());
 }
 
 /**
- * Registers an external widget for use across different blades
+ * Registers an external widget for use across different blades.
  */
 export function registerExternalWidget(widget: IExternalWidgetRegistration): void {
-  externalWidgets.push(widget);
+  externalWidgets.set(widget.id, {
+    ...widget,
+    targetBlades: normalizeTargetBlades(widget.targetBlades),
+  });
 }
 
 /**
- * Gets list of external widgets for a specific blade type
+ * Gets list of external widgets for a specific blade type.
  */
 export function getExternalWidgetsForBlade(bladeId: string): IExternalWidgetRegistration[] {
-  return externalWidgets.filter((widget) => !widget.targetBlades || widget.targetBlades.includes(bladeId));
+  const normalizedBladeId = bladeId.toLowerCase();
+
+  return Array.from(externalWidgets.values())
+    .filter((widget) => !widget.targetBlades || widget.targetBlades.includes(normalizedBladeId))
+    .map((widget) => ({ ...widget, targetBlades: widget.targetBlades ? [...widget.targetBlades] : undefined }));
 }
 
 /**
- * Gets all external widgets
+ * Gets all external widgets.
  */
 export function getAllExternalWidgets(): IExternalWidgetRegistration[] {
-  return externalWidgets;
+  return Array.from(externalWidgets.values()).map((widget) => ({
+    ...widget,
+    targetBlades: widget.targetBlades ? [...widget.targetBlades] : undefined,
+  }));
 }
 
 /**
- * Deep clones a widget to avoid modifying the original registered widget
- * For now, this is a structured clone, but we can make it more robust if needed
+ * Deep clones a widget definition to avoid accidental shared mutations.
  */
 export function cloneWidget<T extends IWidget | IExternalWidgetRegistration>(widget: T): T {
-  // Using structuredClone for a deep copy
   return cloneDeep(widget);
 }
 
-export function createWidgetService(): IWidgetService {
-  const widgetRegistry = reactive<Record<string, IWidget[]>>({});
-  const registeredWidgets = reactive([]) as IWidgetRegistration[];
-  const activeWidget = ref<{ exposed: ComponentInternalInstance["exposed"]; widgetId: string } | undefined>();
-  const registeredIds = reactive(new Set<string>());
+// --- Preregistration bus ---
 
-  const registerWidget = (widget: IWidget, bladeId: string): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
+export const widgetBus = createPreregistrationBus<IWidgetRegistration, IWidgetService>({
+  name: "widget-service",
+  getKey: (reg) => `${reg.bladeId.toLowerCase()}::${reg.widget.id}`,
+  registerIntoService: (service, reg) => service.registerWidget(reg.widget, reg.bladeId),
+});
 
-    if (!widgetRegistry[normalizedBladeId]) {
-      widgetRegistry[normalizedBladeId] = [];
-    }
+/**
+ * Registers a widget before the service is initialized.
+ */
+export function registerWidget(widget: IWidget, bladeId: string): void {
+  const normalizedBladeId = bladeId.toLowerCase();
+  widgetBus.preregister({
+    bladeId: normalizedBladeId,
+    widget,
+  });
+}
 
-    const existingIndex = widgetRegistry[normalizedBladeId].findIndex((w) => w.id === widget.id);
-    if (existingIndex === -1) {
-      const rawWidget: IWidget = reactive(widget);
+// --- Service factory ---
 
-      widgetRegistry[normalizedBladeId].push(rawWidget);
-      registeredWidgets.push({ bladeId: normalizedBladeId, widget: rawWidget });
-      registeredIds.add(widget.id);
-    }
-  };
+export function createWidgetService(): IWidgetService {
+  const bladeRegistry = createBladeScopedRegistry<IWidget, IWidgetRegistration>({
+    createRegistration: (bladeId, item) => ({ bladeId, widget: item }),
+    getRegistrationBladeId: (r) => r.bladeId,
+    getRegistrationItemId: (r) => r.widget.id,
+  });
+
+  const activeWidget = ref<{ exposed: ComponentInternalInstance["exposed"]; widgetId: string } | undefined>();
 
-  // Add method to resolve props
   const resolveWidgetProps = (widget: IWidget, bladeData: Record<string, unknown>): Record<string, unknown> => {
-    // If no configuration, return existing props or empty object
     if (!widget.config) {
       return widget.props || {};
     }
 
     let resolvedProps: Record<string, unknown> = {};
 
-    // If there is a custom resolver
     if (widget.config.propsResolver) {
       try {
         const customProps = widget.config.propsResolver(bladeData);
         resolvedProps = { ...widget.props, ...customProps };
       } catch (error) {
         logger.error(`Error in propsResolver for widget '${widget.id}':`, error);
-        // Fallback to existing props if resolver fails
         resolvedProps = { ...widget.props };
       }
     } else {
-      // Start with existing props as base
       resolvedProps = { ...widget.props };
 
-      // Standard logic for resolving props
       const { requiredData = [], optionalData = [], fieldMapping = {} } = widget.config;
 
-      // Add required data
       requiredData.forEach((key) => {
         const bladeKey = fieldMapping[key] || key;
         if (bladeData[bladeKey] !== undefined) {
           resolvedProps[key] = bladeData[bladeKey];
         } else {
           logger.warn(`Required data '${key}' not found in blade data for widget '${widget.id}'`);
+          logger.warn(`Required data '${key}' not found in blade data for widget '${widget.id}'`);
         }
       });
 
-      // Add optional data
       optionalData.forEach((key) => {
         const bladeKey = fieldMapping[key] || key;
         if (bladeData[bladeKey] !== undefined) {
@@ -187,63 +184,6 @@ export function createWidgetService(): IWidgetService {
     return resolvedProps;
   };
 
-  const updateWidget = ({ id, bladeId, widget }: { id: string; bladeId: string; widget: Partial<IWidget> }): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
-
-    if (widgetRegistry[normalizedBladeId]) {
-      const index = widgetRegistry[normalizedBladeId].findIndex((w) => w.id === id);
-      if (index !== -1) {
-        // Preserve reactivity by updating properties instead of replacing the entire object
-        const existingWidget = widgetRegistry[normalizedBladeId][index];
-
-        // Update properties using Object.assign to maintain reactivity
-        Object.assign(existingWidget, widget);
-      }
-    }
-  };
-
-  const unregisterWidget = (widgetId: string, bladeId: string): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
-
-    if (widgetRegistry[normalizedBladeId]) {
-      const index = widgetRegistry[normalizedBladeId].findIndex((w) => w.id === widgetId);
-      if (index !== -1) {
-        widgetRegistry[normalizedBladeId].splice(index, 1);
-        registeredIds.delete(widgetId);
-      }
-    }
-
-    const regIndex = registeredWidgets.findIndex((w) => w.bladeId === normalizedBladeId && w.widget.id === widgetId);
-    if (regIndex !== -1) {
-      registeredWidgets.splice(regIndex, 1);
-    }
-  };
-
-  const getWidgets = (bladeId: string): IWidget[] => {
-    const normalizedBladeId = bladeId ? bladeId.toLowerCase() : "";
-    return widgetRegistry[normalizedBladeId] || [];
-  };
-
-  const clearBladeWidgets = (bladeId: string): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
-
-    if (widgetRegistry[normalizedBladeId]) {
-      widgetRegistry[normalizedBladeId].forEach((widget) => {
-        registeredIds.delete(widget.id);
-      });
-      delete widgetRegistry[normalizedBladeId];
-    }
-
-    const indices = registeredWidgets
-      .map((w, i) => (w.bladeId === normalizedBladeId ? i : -1))
-      .filter((i) => i !== -1)
-      .reverse();
-
-    indices.forEach((index) => {
-      registeredWidgets.splice(index, 1);
-    });
-  };
-
   const setActiveWidget = ({
     exposed,
     widgetId,
@@ -251,69 +191,49 @@ export function createWidgetService(): IWidgetService {
     exposed: ComponentInternalInstance["exposed"];
     widgetId: string;
   }): void => {
-    activeWidget.value = undefined;
-
-    activeWidget.value = {
-      exposed,
-      widgetId,
-    };
+    activeWidget.value = { exposed, widgetId };
   };
 
   const updateActiveWidget = (): void => {
     const activeExposed = activeWidget.value?.exposed as IExposedWidget | undefined;
-
-    if (!activeExposed) {
-      return;
-    }
+    if (!activeExposed) return;
 
     const widgetId = activeWidget.value?.widgetId;
+    if (!widgetId) return;
 
-    if (widgetId) {
-      const registration = registeredWidgets.find((reg) => reg.widget.id === widgetId);
-      const functionNameToCall = registration?.widget?.updateFunctionName;
+    const registration = bladeRegistry.registrations.find((r) => r.widget.id === widgetId);
+    const functionNameToCall = registration?.widget.updateFunctionName;
 
-      if (functionNameToCall && typeof activeExposed[functionNameToCall] === "function") {
-        activeExposed[functionNameToCall]();
-      } else {
-        logger.warn(`Widget '${widgetId}' does not have an exposed function named '${functionNameToCall}'.`);
-      }
+    if (functionNameToCall && typeof activeExposed[functionNameToCall] === "function") {
+      activeExposed[functionNameToCall]();
+      return;
     }
-  };
 
-  const isWidgetRegistered = (id: string): boolean => {
-    return registeredIds.has(id);
-  };
-
-  const isActiveWidget = (id: string): boolean => {
-    return activeWidget.value?.widgetId === id;
+    logger.warn(`Widget '${widgetId}' does not have an exposed function named '${functionNameToCall}'.`);
   };
 
   const getExternalWidgetsForBladeLocal = (bladeId: string): IExternalWidgetRegistration[] => {
     return getExternalWidgetsForBlade(bladeId.toLowerCase());
   };
 
-  preregisteredWidgets.forEach((widget) => {
-    try {
-      registerWidget(widget.widget, widget.bladeId);
-    } catch (e) {
-      logger.warn(`Failed to register preregistered widget ${widget.widget.id}:`, e);
-    }
-  });
-
-  return {
-    registerWidget,
-    unregisterWidget,
-    getWidgets,
-    clearBladeWidgets,
-    registeredWidgets,
-    isActiveWidget,
+  const service: IWidgetService = {
+    registerWidget: (widget, bladeId) => bladeRegistry.register(widget, bladeId),
+    unregisterWidget: (widgetId, bladeId) => bladeRegistry.unregister(widgetId, bladeId),
+    getWidgets: (bladeId) => bladeRegistry.get(bladeId),
+    clearBladeWidgets: (bladeId) => bladeRegistry.clear(bladeId),
+    registeredWidgets: bladeRegistry.registrations,
+    isActiveWidget: (id) => activeWidget.value?.widgetId === id,
     setActiveWidget,
     updateActiveWidget,
-    isWidgetRegistered,
-    updateWidget,
+    isWidgetRegistered: (id) => bladeRegistry.isRegistered(id),
+    updateWidget: ({ id, bladeId, widget }) => bladeRegistry.update(id, bladeId, widget),
     resolveWidgetProps,
     getExternalWidgetsForBlade: getExternalWidgetsForBladeLocal,
     getAllExternalWidgets,
     cloneWidget,
   };
+
+  widgetBus.replayInto(service);
+
+  return service;
 }

package/core/shell-features/ai-agent.ts

@@ -0,0 +1,22 @@
+import { provideAiAgentService } from "../plugins/ai-agent";
+import type { IAiAgentConfig } from "../plugins/ai-agent";
+import type { ShellFeature } from "../types/shell-feature";
+
+/**
+ * Creates an AI agent shell feature from the provided config.
+ * Not included in defaultFeatures — created conditionally when aiAgentConfig is injected.
+ */
+export function createAiAgentFeature(
+  config: IAiAgentConfig,
+  addGlobalToolbarButton = true,
+): ShellFeature {
+  return {
+    id: "ai-agent",
+    onSetup: () => {
+      provideAiAgentService({
+        config,
+        addGlobalToolbarButton,
+      });
+    },
+  };
+}

package/core/shell-features/index.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey } from "vue";
+import { notificationsFeature } from "./notifications";
+import { settingsFeature } from "./settings";
+import type { ShellFeature } from "../types/shell-feature";
+
+export const SHELL_FEATURES_KEY: InjectionKey<ShellFeature[]> = Symbol("ShellFeatures");
+
+/**
+ * Default shell features included when no custom features are provided.
+ * AI agent is NOT included — it requires runtime config and is added conditionally.
+ */
+export const defaultFeatures: ShellFeature[] = [notificationsFeature, settingsFeature];
+
+export { notificationsFeature, settingsFeature };
+export { createAiAgentFeature } from "./ai-agent";
+export type { ShellFeature, ShellContext } from "../types/shell-feature";

package/core/shell-features/notifications.ts

@@ -0,0 +1,22 @@
+import { NotificationDropdown } from "../../shared/components";
+import type { ShellFeature } from "../types/shell-feature";
+
+export const notificationsFeature: ShellFeature = {
+  id: "notifications",
+  appBarWidgets: [
+    {
+      id: "notification-dropdown",
+      component: NotificationDropdown,
+      icon: "lucide-bell",
+      order: 10,
+    },
+  ],
+  mobileButtons: [
+    {
+      id: "notification-dropdown",
+      component: NotificationDropdown,
+      icon: "lucide-bell",
+      order: 10,
+    },
+  ],
+};

package/core/shell-features/settings.ts

@@ -0,0 +1,15 @@
+import { LanguageSelector } from "../../shared/components/language-selector";
+import { ThemeSelector } from "../../shared/components/theme-selector";
+import { ChangePasswordButton } from "../../shared/components/change-password-button";
+import { LogoutButton } from "../../shared/components/logout-button";
+import type { ShellFeature } from "../types/shell-feature";
+
+export const settingsFeature: ShellFeature = {
+  id: "settings",
+  settingsMenuItems: [
+    { id: "theme-selector", component: ThemeSelector, order: 10 },
+    { id: "language-selector", component: LanguageSelector, order: 20 },
+    { id: "change-password", component: ChangePasswordButton, order: 30 },
+    { id: "logout", component: LogoutButton, order: 100 },
+  ],
+};