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

package/ui/components/organisms/vc-app/composables/useShellBootstrap.ts

@@ -1,87 +1,114 @@
-import { computed, provide } from "vue";
-import { provideAppBarWidget, useNotifications } from "../../../../../core/composables";
-import { provideAppBarMobileButtonsService } from "../../../../../core/composables/useAppBarMobileButtons";
-import { provideSettingsMenu } from "../../../../../core/composables/useSettingsMenu";
-import { provideMenuService } from "../../../../../core/composables/useMenuService";
-import { provideGlobalSearch } from "../../../../../core/composables/useGlobalSearch";
-import { provideDashboardService } from "../../../../../core/composables/useDashboard";
-import { provideAiAgentService } from "../../../../../core/plugins/ai-agent";
-import type { IAiAgentConfig } from "../../../../../core/plugins/ai-agent";
-import { EMBEDDED_MODE, DynamicModulesKey } from "../../../../../injection-keys";
-import type { ShellFeature, ShellContext } from "../../../../../core/types/shell-feature";
-import type { BladeRoutesRecord } from "../../../../../shared/components";
-
-export interface ShellBootstrapOptions {
-  isEmbedded: boolean;
-  internalRoutes?: BladeRoutesRecord[];
-  dynamicModules?: typeof window.VcShellDynamicModules;
-  aiAgentConfig?: IAiAgentConfig;
-  aiAgentAddGlobalToolbarButton?: boolean;
-  context: ShellContext;
-}
-
-/**
- * Bootstraps the shell: provides all core services and processes shell features.
- * This replaces the ~100 lines of service provisioning and registration
- * that were previously inline in vc-app.vue setup.
- */
-export function useShellBootstrap(features: ShellFeature[], options: ShellBootstrapOptions) {
-  // 1. Provide core services
-  const { register: registerSettingsMenuItem } = provideSettingsMenu();
-  const { register: registerWidget } = provideAppBarWidget();
-  const { register: registerMobileButton } = provideAppBarMobileButtonsService();
-  const { notifications } = useNotifications();
-  provideMenuService();
+import { provide, inject, computed } from "vue";
+import { provideAppBarMobileButtonsService } from "@core/composables/useAppBarMobileButtons";
+import { provideGlobalSearch } from "@core/composables/useGlobalSearch";
+import { provideDashboardService } from "@core/composables/useDashboard";
+import {
+  AppBarWidgetServiceKey,
+  SettingsMenuServiceKey,
+  EmbeddedModeKey,
+  DynamicModulesKey,
+  ShellIndicatorsKey,
+  InternalRoutesKey,
+} from "@framework/injection-keys";
+import { hasUnreadNotifications } from "@core/composables/useNotifications";
+import { NotificationDropdown } from "@shared/components";
+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 { provideAiAgentService } from "@core/plugins/ai-agent";
+import type { IAiAgentConfig } from "@core/plugins/ai-agent";
+import type { BladeRoutesRecord } from "@shared/components";
+import type { registerAppBarWidgetOptions } from "@core/services/app-bar-menu-service";
+import type { AppBarButtonContent } from "@core/services/app-bar-mobile-buttons-service";
+import type { RegisterSettingsMenuItemOptions } from "@core/services/settings-menu-service";
+
+export interface ShellBootstrapOptions {
+  isEmbedded: boolean;
+  internalRoutes?: BladeRoutesRecord[];
+  dynamicModules?: typeof window.VcShellDynamicModules;
+  aiAgentConfig?: IAiAgentConfig;
+  aiAgentAddGlobalToolbarButton?: boolean;
+}
+
+export function useShellBootstrap(options: ShellBootstrapOptions) {
+  // 1a. App-level services (created by framework plugin install)
+  const appBarWidgetService = inject(AppBarWidgetServiceKey)!;
+  const settingsMenuService = inject(SettingsMenuServiceKey)!;
+
+  // 1b. Component-scoped services (created here for VcApp descendants)
+  const mobileButtons = provideAppBarMobileButtonsService();
   provideGlobalSearch();
   provideDashboardService();
 
-  const hasUnreadNotifications = computed(() => notifications.value.some((item) => item.isNew));
-
-  // 2. Provide injection keys
-  provide(EMBEDDED_MODE, options.isEmbedded);
-  if (options.internalRoutes) {
-    provide("internalRoutes", options.internalRoutes);
-  }
-  if (options.dynamicModules !== undefined) {
-    provide(DynamicModulesKey, options.dynamicModules);
-  }
-
-  // 3. Process features — register their widgets/items/buttons into services
-  for (const feature of features) {
-    feature.appBarWidgets?.forEach((widget) => {
-      // Keep legacy notification behavior: badge reflects unread notifications.
-      if (widget.id === "notification-dropdown" && widget.badge === undefined) {
-        registerWidget({
-          ...widget,
-          badge: () => hasUnreadNotifications.value,
-        });
-        return;
-      }
+  // 2. Provide injection keys
+  provide(EmbeddedModeKey, options.isEmbedded);
+  if (options.internalRoutes) {
+    provide(InternalRoutesKey, options.internalRoutes);
+  }
+  if (options.dynamicModules !== undefined) {
+    provide(DynamicModulesKey, options.dynamicModules);
+  }
+
+  // 3. AI agent (conditional)
+  if (options.aiAgentConfig?.url) {
+    provideAiAgentService({
+      config: options.aiAgentConfig,
+      addGlobalToolbarButton: options.aiAgentAddGlobalToolbarButton ?? true,
+    });
+  }
+
+  // 4. Register default shell UI
+  useShellDefaults({
+    isEmbedded: options.isEmbedded,
+    registerWidget: appBarWidgetService.register,
+    registerMobileButton: mobileButtons.register,
+    registerSettingsMenuItem: settingsMenuService.register,
+  });
+}
+
+// ── Internal: default UI element registration ─────────────────────
+interface ShellDefaultsContext {
+  isEmbedded: boolean;
+  registerWidget: (options: registerAppBarWidgetOptions) => string;
+  registerMobileButton: (button: AppBarButtonContent) => void;
+  registerSettingsMenuItem: (options: RegisterSettingsMenuItemOptions) => string;
+}
+
+function useShellDefaults(ctx: ShellDefaultsContext) {
+  // Notification widget
+  ctx.registerWidget({
+    id: "notifications",
+    component: NotificationDropdown,
+    icon: "lucide-bell",
+    order: 10,
+    badge: () => hasUnreadNotifications.value,
+  });
 
-      registerWidget(widget);
+  if (!ctx.isEmbedded) {
+    ctx.registerMobileButton({
+      id: "notifications",
+      component: NotificationDropdown,
+      icon: "lucide-bell",
+      order: 10,
+      isVisible: true,
     });
-
-    feature.settingsMenuItems?.forEach((item) => registerSettingsMenuItem(item));
-
-    feature.mobileButtons?.forEach((button) => {
-      registerMobileButton({
-        ...button,
-        // Embedded mode hides all mobile buttons by default
-        isVisible: options.isEmbedded ? false : (button.isVisible ?? true),
-      });
-    });
-  }
-
-  // 4. Conditional AI agent setup
-  if (options.aiAgentConfig?.url) {
-    provideAiAgentService({
-      config: options.aiAgentConfig,
-      addGlobalToolbarButton: options.aiAgentAddGlobalToolbarButton ?? true,
-    });
-  }
-
-  // 5. Run feature onSetup hooks
-  for (const feature of features) {
-    feature.onSetup?.(options.context);
-  }
-}
+  }
+
+  // Settings menu items
+  ctx.registerSettingsMenuItem({ id: "theme-selector", component: ThemeSelector, group: "preferences", order: 10 });
+  ctx.registerSettingsMenuItem({
+    id: "language-selector",
+    component: LanguageSelector,
+    group: "preferences",
+    order: 20,
+  });
+  ctx.registerSettingsMenuItem({ id: "change-password", component: ChangePasswordButton, group: "account", order: 30 });
+  ctx.registerSettingsMenuItem({ id: "logout", component: LogoutButton, group: "account", order: 100 });
+
+  // Shell indicator state for SidebarHeader
+  provide(
+    ShellIndicatorsKey,
+    computed(() => hasUnreadNotifications.value),
+  );
+}

package/ui/components/organisms/vc-app/composables/useShellLifecycle.ts

@@ -1,7 +1,7 @@
 import { ref, watch, onUnmounted } from "vue";
-import { useNotifications } from "../../../../../core/composables";
-import { useUserManagement } from "../../../../../core/composables/useUserManagement";
-import { useAppSwitcher } from "../../../../../shared/components/app-switcher/composables/useAppSwitcher";
+import { useNotifications } from "@core/composables";
+import { useUserManagement } from "@core/composables/useUserManagement";
+import { useAppSwitcher } from "@shared/components/app-switcher/composables/useAppSwitcher";
 
 /**
  * Manages app readiness and authentication lifecycle.

package/ui/components/organisms/vc-app/composables/useShellNavigation.ts

@@ -1,7 +1,7 @@
 import { useRoute, useRouter } from "vue-router";
-import { useBladeNavigation } from "../../../../../shared/components";
-import { createLogger } from "../../../../../core/utilities";
-import type { MenuItem } from "../../../../../core/types";
+import { useBladeNavigation } from "@shared/components";
+import { createLogger } from "@core/utilities";
+import type { MenuItem } from "@core/types";
 
 const logger = createLogger("useShellNavigation");
 

package/ui/components/organisms/vc-app/composition/app-bar/index.ts

@@ -1,6 +1,6 @@
-export { default as VcAppMenuSidebar } from "../../_internal/app-bar/components/MenuSidebar.vue";
-export { default as VcAppBarMobileActions } from "../../_internal/app-bar/components/AppBarMobileActions.vue";
-export { default as VcAppBarOverlay } from "../../_internal/app-bar/components/AppBarOverlay.vue";
-export { default as VcAppBarWidgetContent } from "../../_internal/app-bar/components/AppBarWidgetContent.vue";
-export { default as VcAppBarWidgetItem } from "../../_internal/app-bar/components/AppBarWidgetItem.vue";
-export { default as VcAppBarWidgetsMenu } from "../../_internal/app-bar/components/AppBarWidgetsMenu.vue";
+export { default as VcAppMenuSidebar } from "@ui/components/organisms/vc-app/_internal/app-bar/components/MenuSidebar.vue";
+export { default as VcAppBarMobileActions } from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarMobileActions.vue";
+export { default as VcAppBarOverlay } from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarOverlay.vue";
+export { default as VcAppBarWidgetContent } from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetContent.vue";
+export { default as VcAppBarWidgetItem } from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetItem.vue";
+export { default as VcAppBarWidgetsMenu } from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetsMenu.vue";

package/ui/components/organisms/vc-app/composition/index.ts

@@ -1,6 +1,6 @@
-export * from "./layouts";
-export * from "./sidebar";
-export * from "./menu";
-export * from "./app-bar";
-export * from "./state";
-export * from "./shell";
+export * from "@ui/components/organisms/vc-app/composition/layouts";
+export * from "@ui/components/organisms/vc-app/composition/sidebar";
+export * from "@ui/components/organisms/vc-app/composition/menu";
+export * from "@ui/components/organisms/vc-app/composition/app-bar";
+export * from "@ui/components/organisms/vc-app/composition/state";
+export * from "@ui/components/organisms/vc-app/composition/shell";

package/ui/components/organisms/vc-app/composition/layouts/index.ts

@@ -1,2 +1,2 @@
-export { default as VcAppDesktopLayout } from "../../_internal/layouts/DesktopLayout.vue";
-export { default as VcAppMobileLayout } from "../../_internal/layouts/MobileLayout.vue";
+export { default as VcAppDesktopLayout } from "@ui/components/organisms/vc-app/_internal/layouts/DesktopLayout.vue";
+export { default as VcAppMobileLayout } from "@ui/components/organisms/vc-app/_internal/layouts/MobileLayout.vue";

package/ui/components/organisms/vc-app/composition/menu/index.ts

@@ -1,6 +1,6 @@
-export { default as VcAppMenu } from "../../_internal/menu/VcAppMenu.vue";
-export { default as VcAppMenuGroup } from "../../_internal/menu/VcAppMenuGroup.vue";
-export { default as VcAppMenuItem } from "../../_internal/menu/VcAppMenuItem.vue";
+export { default as VcAppMenu } from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenu.vue";
+export { default as VcAppMenuGroup } from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenuGroup.vue";
+export { default as VcAppMenuItem } from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenuItem.vue";
 
-export { useMenuActiveState, stripTenantPrefix } from "../../_internal/menu/composables/useMenuActiveState";
-export { useBadge } from "../../_internal/menu/composables/useBadge";
+export { useMenuActiveState, stripTenantPrefix } from "@ui/components/organisms/vc-app/_internal/menu/composables/useMenuActiveState";
+export { useBadge } from "@ui/components/organisms/vc-app/_internal/menu/composables/useBadge";

package/ui/components/organisms/vc-app/composition/shell/index.ts

@@ -1,3 +1,3 @@
-export { useShellBootstrap } from "../../composables/useShellBootstrap";
-export { useShellLifecycle } from "../../composables/useShellLifecycle";
-export { useShellNavigation } from "../../composables/useShellNavigation";
+export { useShellBootstrap } from "@ui/components/organisms/vc-app/composables/useShellBootstrap";
+export { useShellLifecycle } from "@ui/components/organisms/vc-app/composables/useShellLifecycle";
+export { useShellNavigation } from "@ui/components/organisms/vc-app/composables/useShellNavigation";

package/ui/components/organisms/vc-app/composition/sidebar/index.ts

@@ -1,3 +1,3 @@
-export { default as VcAppSidebarHeader } from "../../_internal/sidebar/SidebarHeader.vue";
-export { default as VcAppSidebarContent } from "../../_internal/sidebar/SidebarContent.vue";
-export { default as VcAppSidebarCollapseButton } from "../../_internal/sidebar/SidebarCollapseButton.vue";
+export { default as VcAppSidebarHeader } from "@ui/components/organisms/vc-app/_internal/sidebar/SidebarHeader.vue";
+export { default as VcAppSidebarContent } from "@ui/components/organisms/vc-app/_internal/sidebar/SidebarContent.vue";
+export { default as VcAppSidebarCollapseButton } from "@ui/components/organisms/vc-app/_internal/sidebar/SidebarCollapseButton.vue";

package/ui/components/organisms/vc-app/composition/state/index.ts

@@ -1,6 +1,6 @@
-export { provideSidebarState, useSidebarState } from "../../composables/useSidebarState";
+// provideSidebarState and useSidebarState are now exported from core/composables/useSidebarState
 
-export { provideAppBarState, useAppBarState } from "../../_internal/app-bar/composables/useAppBarState";
-export { useAppBarWidgets } from "../../_internal/app-bar/composables/useAppBarWidgets";
-export { useAppBarMobileActions } from "../../_internal/app-bar/composables/useAppBarMobileActions";
-export { useToggleableContent } from "../../_internal/app-bar/composables/useToggleableContent";
+export { provideAppBarState, useAppBarState } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarState";
+export { useAppBarWidgets } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarWidgets";
+export { useAppBarMobileActions } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarMobileActions";
+export { useToggleableContent } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useToggleableContent";

package/ui/components/organisms/vc-app/index.ts

@@ -1,2 +1,2 @@
-export { default as VcApp } from "./vc-app.vue";
-export * from "./composition";
+export { default as VcApp } from "@ui/components/organisms/vc-app/vc-app.vue";
+export * from "@ui/components/organisms/vc-app/composition";

package/ui/components/organisms/vc-app/vc-app-shell.stories.ts

@@ -1,20 +1,21 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import { computed, onUnmounted, provide, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import VcApp from "./vc-app.vue";
-import { useMenuService } from "../../../../core/composables";
-import type { AppDescriptor } from "../../../../core/api/platform";
-import type { MenuItem } from "../../../../core/types";
-import { defaultFeatures } from "../../../../core/shell-features";
-import { AppRootElementKey } from "../../../../injection-keys";
-import { VcPopupContainer } from "../../../../shared/components";
+import { useRoute } from "vue-router";
+import VcApp from "@ui/components/organisms/vc-app/vc-app.vue";
+import { useMenuService, useAppBarWidget } from "@core/composables";
+import type { AppDescriptor } from "@core/api/platform";
+import { AppsClient, SecurityClient, PushNotificationClient } from "@core/api/platform";
+import { useUserManagement } from "@core/composables/useUserManagement";
+import type { MenuItem } from "@core/types";
+import { AppRootElementKey, BladeRoutesKey } from "@framework/injection-keys";
+import { VcPopupContainer } from "@shared/components";
 import {
   VcAppDesktopLayout,
   VcAppMobileLayout,
   provideAppBarState,
-  provideSidebarState,
   useShellBootstrap,
-} from "./composition";
+} from "@ui/components/organisms/vc-app/composition";
+import { provideSidebarState } from "@core/composables/useSidebarState";
 import { withMobileView } from "../../../../../.storybook/decorators";
 
 /**
@@ -83,11 +84,86 @@ const mockMenuItems: Partial<MenuItem>[] = [
   },
 ];
 
+/** SVG data URI helper — renders an emoji-like icon for apps */
+function appIconSvg(emoji: string, bg: string): string {
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='10' fill='${encodeURIComponent(bg)}'/%3E%3Ctext x='24' y='33' text-anchor='middle' font-size='24'%3E${encodeURIComponent(emoji)}%3C/text%3E%3C/svg%3E`;
+}
+
+const mockApps: AppDescriptor[] = [
+  { id: "commerce", title: "Commerce Manager", description: "Manage your store", iconUrl: appIconSvg("🛒", "#E3F2FD"), relativeUrl: "/commerce" },
+  { id: "catalog", title: "Catalog", description: "Product catalog management", iconUrl: appIconSvg("📦", "#FFF3E0"), relativeUrl: "/catalog" },
+  { id: "orders", title: "Orders", description: "Order processing", iconUrl: appIconSvg("📋", "#E8F5E9"), relativeUrl: "/orders" },
+  { id: "customers", title: "Customers", description: "Customer management", iconUrl: appIconSvg("👥", "#F3E5F5"), relativeUrl: "/customers" },
+  { id: "marketing", title: "Marketing", description: "Campaigns & promotions", iconUrl: appIconSvg("📣", "#FFF8E1"), relativeUrl: "/marketing" },
+  { id: "inventory", title: "Inventory", description: "Stock management", iconUrl: appIconSvg("🏭", "#ECEFF1"), relativeUrl: "/inventory" },
+  { id: "pricing", title: "Pricing", description: "Price lists & rules", iconUrl: appIconSvg("💲", "#E0F7FA"), relativeUrl: "/pricing" },
+  { id: "content", title: "Content", description: "CMS & pages", iconUrl: appIconSvg("📝", "#FCE4EC"), relativeUrl: "/content" },
+  { id: "analytics", title: "Analytics", description: "Reports & dashboards", iconUrl: appIconSvg("📊", "#EDE7F6"), relativeUrl: "/analytics" },
+  { id: "search", title: "App Search", description: "Search configuration", iconUrl: appIconSvg("🔍", "#E8EAF6"), relativeUrl: "/search" },
+  { id: "settings", title: "Settings", description: "Platform settings", iconUrl: appIconSvg("⚙️", "#EFEBE9"), relativeUrl: "/settings" },
+  { id: "users", title: "User Management", description: "Users & roles", iconUrl: appIconSvg("🔑", "#FBE9E7"), relativeUrl: "/users" },
+  { id: "notifications", title: "Notifications Hub", description: "Notification settings", iconUrl: appIconSvg("🔔", "#FFFDE7"), relativeUrl: "/notifications" },
+  { id: "imports", title: "Import/Export", description: "Data import & export", iconUrl: appIconSvg("📤", "#E0F2F1"), relativeUrl: "/imports" },
+  { id: "themes", title: "Themes", description: "Storefront themes", iconUrl: appIconSvg("🎨", "#F9FBE7"), relativeUrl: "/themes" },
+  { id: "integrations", title: "Integrations", description: "Third-party connections", iconUrl: appIconSvg("🔗", "#E1F5FE"), relativeUrl: "/integrations" },
+  { id: "taxes", title: "Tax Management", description: "Tax rules & rates", iconUrl: appIconSvg("🧾", "#F1F8E9"), relativeUrl: "/taxes" },
+  { id: "shipping", title: "Shipping", description: "Delivery & logistics", iconUrl: appIconSvg("🚚", "#E8F5E9"), relativeUrl: "/shipping" },
+  { id: "reviews", title: "Reviews", description: "Product reviews", iconUrl: appIconSvg("⭐", "#FFF3E0"), relativeUrl: "/reviews" },
+  { id: "vendor-portal", title: "Vendor Portal", description: "Marketplace vendors", iconUrl: appIconSvg("🏪", "#F3E5F5"), relativeUrl: "/vendor" },
+] as AppDescriptor[];
+
+// ── Mock notifications (PushNotification format for loadFromHistory) ──
+const now = Date.now();
+const MIN = 60_000;
+const HOUR = 3_600_000;
+
+const mockNotifications = [
+  { id: "n1", title: "New order #SO-10042", description: "3 items, total $450.00", isNew: true, created: new Date(now - 2 * MIN).toISOString(), notifyType: "OrderCreated" },
+  { id: "n2", title: "Payment received — $1,250.00", description: "Order #SO-10038, Visa ending 4242", isNew: true, created: new Date(now - 5 * MIN).toISOString(), notifyType: "PaymentReceived" },
+  { id: "n3", title: "Low stock alert: SKU-8812", description: "\"Wireless Keyboard\" — only 3 left in warehouse A", isNew: true, created: new Date(now - 12 * MIN).toISOString(), notifyType: "LowStock" },
+  { id: "n4", title: "Customer refund request #RF-331", description: "Amount: $89.99 — reason: defective item", isNew: true, created: new Date(now - 18 * MIN).toISOString(), notifyType: "RefundRequested" },
+  { id: "n5", title: "New review on \"Premium Headphones\"", description: "★★★★★ — \"Best headphones I've ever owned!\"", isNew: false, created: new Date(now - 25 * MIN).toISOString(), notifyType: "ReviewCreated" },
+  { id: "n6", title: "Shipping label created #SH-9921", description: "FedEx Ground, tracking: 7489203841", isNew: false, created: new Date(now - 30 * MIN).toISOString(), notifyType: "ShipmentCreated" },
+  { id: "n7", title: "Catalog import completed", description: "1,247 products imported, 3 skipped", isNew: false, created: new Date(now - 45 * MIN).toISOString(), notifyType: "ImportCompleted" },
+  { id: "n8", title: "New vendor application", description: "TechGadgets Inc. — pending approval", isNew: false, created: new Date(now - 1 * HOUR).toISOString(), notifyType: "VendorApplication" },
+  { id: "n9", title: "Price rule expired: Summer Sale", description: "20% off all electronics — ended today", isNew: false, created: new Date(now - 1.5 * HOUR).toISOString(), notifyType: "PriceRuleExpired" },
+  { id: "n10", title: "System backup completed", description: "Full backup — 4.2 GB, duration: 12 min", isNew: false, created: new Date(now - 2 * HOUR).toISOString(), notifyType: "SystemBackup" },
+  { id: "n11", title: "New order #SO-10041", description: "1 item, total $29.99", isNew: false, created: new Date(now - 2.5 * HOUR).toISOString(), notifyType: "OrderCreated" },
+  { id: "n12", title: "User login from new device", description: "Chrome on macOS — IP: 203.0.113.42", isNew: false, created: new Date(now - 3 * HOUR).toISOString(), notifyType: "SecurityAlert" },
+  { id: "n13", title: "Inventory sync finished", description: "Warehouse B — 892 SKUs updated", isNew: false, created: new Date(now - 3.5 * HOUR).toISOString(), notifyType: "InventorySync" },
+  { id: "n14", title: "Marketing campaign started", description: "\"Spring Collection Launch\" — 15,000 recipients", isNew: false, created: new Date(now - 4 * HOUR).toISOString(), notifyType: "CampaignStarted" },
+  { id: "n15", title: "New order #SO-10040", description: "5 items, total $1,120.00", isNew: false, created: new Date(now - 5 * HOUR).toISOString(), notifyType: "OrderCreated" },
+];
+
+// ── Override API calls so VcApp stories get mock data ──
+AppsClient.prototype.getApps = () => Promise.resolve(mockApps as AppDescriptor[]);
+SecurityClient.prototype.getCurrentUser = () =>
+  Promise.resolve({ userName: "storybook-user", isAdministrator: true } as any);
+PushNotificationClient.prototype.markAllAsRead = () => Promise.resolve();
+
+// Intercept fetch for the pushnotifications endpoint used by loadFromHistory()
+const _origFetch = window.fetch;
+window.fetch = function (input: RequestInfo | URL, init?: RequestInit) {
+  const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+  if (url.includes("/api/platform/pushnotifications") && init?.method === "POST") {
+    return Promise.resolve(new Response(JSON.stringify({ notifyEvents: mockNotifications }), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    }));
+  }
+  return _origFetch.call(this, input, init);
+} as typeof window.fetch;
+
 /** Common setup for all VcApp stories */
 function useStorySetup() {
   const { addMenuItem } = useMenuService();
   mockMenuItems.forEach((item) => addMenuItem(item as MenuItem));
-  provide("bladeRoutes", []);
+  provide(BladeRoutesKey, []);
+
+  // Load mock user so isAuthenticated becomes true → VcApp triggers getApps()
+  const { loadUser } = useUserManagement();
+  loadUser();
+
   return { logo: MOCK_LOGO };
 }
 
@@ -229,19 +305,15 @@ export const CustomShellFromParts: StoryFn = () => {
     },
     setup() {
       const route = useRoute();
-      const router = useRouter();
       const isEmbedded = route.query.EmbeddedMode === "true";
       const isAuthenticated = ref(true);
       const isAppReady = ref(true);
-      const appsList = ref<AppDescriptor[]>([
-        { id: "admin", title: "Admin", relativeUrl: "/" },
-        { id: "catalog", title: "Catalog", relativeUrl: "/catalog" },
-      ]);
+      const appsList = ref<AppDescriptor[]>(mockApps);
       const activeSection = ref("Dashboard");
       const activeApp = ref(appsList.value[0]?.title ?? "Admin");
 
       // Required providers for custom shell assembly.
-      provide("bladeRoutes", []);
+      provide(BladeRoutesKey, []);
       const appRootRef = ref<HTMLElement>();
       provide(AppRootElementKey, appRootRef);
       const sidebar = provideSidebarState();
@@ -249,11 +321,25 @@ export const CustomShellFromParts: StoryFn = () => {
       const isSidebarPinned = computed(() => sidebar.isPinned.value);
       const isShellMenuOpened = computed(() => sidebar.isMenuOpen.value);
 
-      useShellBootstrap(defaultFeatures, {
+      useShellBootstrap({
         isEmbedded,
         internalRoutes: [],
         dynamicModules: undefined,
-        context: { router, route, isAuthenticated, isEmbedded },
+      });
+
+      // Register extra mock widgets (notifications is already registered by useShellBootstrap)
+      const { register: registerWidget } = useAppBarWidget();
+      registerWidget({
+        id: "mock-imports",
+        title: "Import Jobs",
+        icon: "lucide-upload",
+        order: 30,
+      });
+      registerWidget({
+        id: "mock-tasks",
+        title: "Background Tasks",
+        icon: "lucide-list-checks",
+        order: 40,
       });
 
       const { addMenuItem } = useMenuService();
@@ -318,22 +404,7 @@ export const CustomShellFromParts: StoryFn = () => {
               @logo:click="openRoot"
               @item:click="handleMenuItemClick"
               @switch-app="switchApp"
-            >
-              <template #app-switcher="{ appsList: customAppsList, switchApp: onSwitchApp }">
-                <div class="tw-px-4 tw-py-3 tw-space-y-2 tw-text-xs tw-text-[var(--neutrals-700)]">
-                  <p class="tw-font-semibold tw-uppercase tw-tracking-wide">Custom app switcher slot</p>
-                  <button
-                    v-for="app in customAppsList"
-                    :key="app.id"
-                    type="button"
-                    class="tw-w-full tw-text-left tw-px-3 tw-py-2 tw-rounded tw-bg-[var(--neutrals-100)] hover:tw-bg-[var(--neutrals-200)]"
-                    @click="onSwitchApp(app)"
-                  >
-                    {{ app.title }}
-                  </button>
-                </div>
-              </template>
-            </VcAppDesktopLayout>
+            />
 
             <VcAppMobileLayout
               v-else
@@ -345,46 +416,31 @@ export const CustomShellFromParts: StoryFn = () => {
               :apps-list="appsList"
               @item:click="handleMenuItemClick"
               @switch-app="switchApp"
-            >
-              <template #app-switcher="{ appsList: customAppsList, switchApp: onSwitchApp }">
-                <div class="tw-px-4 tw-py-3 tw-space-y-2 tw-text-xs tw-text-[var(--neutrals-700)]">
-                  <p class="tw-font-semibold tw-uppercase tw-tracking-wide">Custom app switcher slot</p>
-                  <button
-                    v-for="app in customAppsList"
-                    :key="app.id"
-                    type="button"
-                    class="tw-w-full tw-text-left tw-px-3 tw-py-2 tw-rounded tw-bg-[var(--neutrals-100)] hover:tw-bg-[var(--neutrals-200)]"
-                    @click="onSwitchApp(app)"
-                  >
-                    {{ app.title }}
-                  </button>
-                </div>
-              </template>
-            </VcAppMobileLayout>
+            />
 
             <div v-if="isAuthenticated" class="vc-app__workspace">
-              <div class="tw-w-full tw-overflow-auto tw-p-6 tw-space-y-4 tw-text-[var(--neutrals-800)]">
+              <div class="tw-w-full tw-overflow-auto tw-p-6 tw-space-y-4 tw-text-neutrals-800">
                 <div class="tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-gap-4">
                   <div class="tw-space-y-1">
-                    <p class="tw-text-xs tw-uppercase tw-tracking-wide tw-text-[var(--neutrals-600)]">
+                    <p class="tw-text-xs tw-uppercase tw-tracking-wide tw-text-neutrals-600">
                       Custom shell composition
                     </p>
                     <h2 class="tw-text-2xl tw-font-semibold">{{ activeSection }}</h2>
-                    <p class="tw-text-sm tw-text-[var(--neutrals-700)]">
+                    <p class="tw-text-sm tw-text-neutrals-700">
                       Current app: <span class="tw-font-medium">{{ activeApp }}</span>
                     </p>
                   </div>
                   <div class="tw-flex tw-flex-wrap tw-gap-2">
                     <button
                       type="button"
-                      class="tw-px-3 tw-py-2 tw-rounded tw-border tw-border-[var(--neutrals-300)] tw-bg-white hover:tw-bg-[var(--neutrals-100)]"
+                      class="tw-px-3 tw-py-2 tw-rounded tw-border tw-border-neutrals-300 tw-bg-white hover:tw-bg-neutrals-100"
                       @click="sidebar.togglePin"
                     >
                       {{ isSidebarPinned ? "Unpin sidebar" : "Pin sidebar" }}
                     </button>
                     <button
                       type="button"
-                      class="tw-px-3 tw-py-2 tw-rounded tw-bg-[var(--primary-500)] tw-text-white hover:tw-bg-[var(--primary-600)]"
+                      class="tw-px-3 tw-py-2 tw-rounded tw-bg-primary-500 tw-text-white hover:tw-bg-primary-600"
                       @click="toggleShellMenu"
                     >
                       {{ isShellMenuOpened ? "Close shell menu" : "Open shell menu" }}
@@ -393,21 +449,21 @@ export const CustomShellFromParts: StoryFn = () => {
                 </div>
 
                 <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3">
-                  <div class="tw-rounded-lg tw-bg-white tw-border tw-border-[var(--neutrals-200)] tw-p-4">
-                    <p class="tw-text-xs tw-text-[var(--neutrals-500)]">Active menu group</p>
+                  <div class="tw-rounded-lg tw-bg-white tw-border tw-border-neutrals-200 tw-p-4">
+                    <p class="tw-text-xs tw-text-neutrals-500">Active menu group</p>
                     <p class="tw-text-lg tw-font-semibold">{{ activeSection }}</p>
                   </div>
-                  <div class="tw-rounded-lg tw-bg-white tw-border tw-border-[var(--neutrals-200)] tw-p-4">
-                    <p class="tw-text-xs tw-text-[var(--neutrals-500)]">Sidebar mode</p>
+                  <div class="tw-rounded-lg tw-bg-white tw-border tw-border-neutrals-200 tw-p-4">
+                    <p class="tw-text-xs tw-text-neutrals-500">Sidebar mode</p>
                     <p class="tw-text-lg tw-font-semibold">{{ isSidebarPinned ? "Pinned" : "Collapsible" }}</p>
                   </div>
-                  <div class="tw-rounded-lg tw-bg-white tw-border tw-border-[var(--neutrals-200)] tw-p-4">
-                    <p class="tw-text-xs tw-text-[var(--neutrals-500)]">Shell menu</p>
+                  <div class="tw-rounded-lg tw-bg-white tw-border tw-border-neutrals-200 tw-p-4">
+                    <p class="tw-text-xs tw-text-neutrals-500">Shell menu</p>
                     <p class="tw-text-lg tw-font-semibold">{{ isShellMenuOpened ? "Opened" : "Closed" }}</p>
                   </div>
                 </div>
 
-                <p class="tw-text-sm tw-text-[var(--neutrals-700)]">
+                <p class="tw-text-sm tw-text-neutrals-700">
                   This workspace is rendered from composition parts and wires required shell providers, emits and slots.
                 </p>
               </div>