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

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

@@ -2,7 +2,6 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { ref, effectScope } from "vue";
 
 // ── Mocks for all service providers ────────────────────────────────
-const mockRegisterWidget = vi.fn();
 const mockRegisterMobileButton = vi.fn();
 const mockRegisterSettingsMenuItem = vi.fn();
 const mockProvide = vi.fn();
@@ -14,7 +13,6 @@ vi.mock("vue", async (importOriginal) => {
     ...actual,
     provide: (...args: unknown[]) => mockProvide(...args),
     inject: (key: unknown) => {
-      if (key === AppBarWidgetServiceKey) return { register: mockRegisterWidget };
       if (key === SettingsMenuServiceKey) return { register: mockRegisterSettingsMenuItem };
       return undefined;
     },
@@ -65,7 +63,6 @@ vi.mock("../../../../../core/plugins/ai-agent", () => ({
 // ── Import after mocks ─────────────────────────────────────────────
 import { useShellBootstrap, type ShellBootstrapOptions } from "@ui/components/organisms/vc-app/composables/useShellBootstrap";
 import {
-  AppBarWidgetServiceKey,
   SettingsMenuServiceKey,
   EmbeddedModeKey,
   DynamicModulesKey,
@@ -95,20 +92,12 @@ describe("useShellBootstrap", () => {
     (hasUnreadNotifications as unknown as { value: boolean }).value = false;
   });
 
-  describe("default notifications widget", () => {
-    it("registers notification-dropdown to app-bar", () => {
-      bootstrapInScope(createOptions());
-
-      expect(mockRegisterWidget).toHaveBeenCalledWith(
-        expect.objectContaining({ id: "notification-dropdown", icon: "lucide-bell", order: 10 }),
-      );
-    });
-
-    it("registers notification-dropdown to mobile-topbar when not embedded", () => {
+  describe("default notifications mobile button", () => {
+    it("registers notifications to mobile-topbar when not embedded", () => {
       bootstrapInScope(createOptions({ isEmbedded: false }));
 
       expect(mockRegisterMobileButton).toHaveBeenCalledWith(
-        expect.objectContaining({ id: "notification-dropdown", isVisible: true }),
+        expect.objectContaining({ id: "notifications", isVisible: true }),
       );
     });
 

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

@@ -3,7 +3,6 @@ import { provideAppBarMobileButtonsService } from "@core/composables/useAppBarMo
 import { provideGlobalSearch } from "@core/composables/useGlobalSearch";
 import { provideDashboardService } from "@core/composables/useDashboard";
 import {
-  AppBarWidgetServiceKey,
   SettingsMenuServiceKey,
   EmbeddedModeKey,
   DynamicModulesKey,
@@ -11,15 +10,14 @@ import {
   InternalRoutesKey,
 } from "@framework/injection-keys";
 import { hasUnreadNotifications } from "@core/composables/useNotifications";
-import { NotificationDropdown } from "@shared/components";
+import { NotificationDropdown } from "@shared/components/notification-dropdown";
 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 { BladeRoutesRecord } from "@shared/components/blade-navigation/types";
 import type { AppBarButtonContent } from "@core/services/app-bar-mobile-buttons-service";
 import type { RegisterSettingsMenuItemOptions } from "@core/services/settings-menu-service";
 
@@ -33,7 +31,6 @@ export interface ShellBootstrapOptions {
 
 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)
@@ -61,7 +58,6 @@ export function useShellBootstrap(options: ShellBootstrapOptions) {
   // 4. Register default shell UI
   useShellDefaults({
     isEmbedded: options.isEmbedded,
-    registerWidget: appBarWidgetService.register,
     registerMobileButton: mobileButtons.register,
     registerSettingsMenuItem: settingsMenuService.register,
   });
@@ -70,21 +66,11 @@ export function useShellBootstrap(options: ShellBootstrapOptions) {
 // ── 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,
-  });
-
   if (!ctx.isEmbedded) {
     ctx.registerMobileButton({
       id: "notifications",
@@ -92,6 +78,7 @@ function useShellDefaults(ctx: ShellDefaultsContext) {
       icon: "lucide-bell",
       order: 10,
       isVisible: true,
+      badge: computed(() => hasUnreadNotifications.value),
     });
   }
 

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

@@ -1,5 +1,5 @@
 import { ref, watch, onUnmounted } from "vue";
-import { useNotifications } from "@core/composables";
+import { useNotifications } from "@core/composables/useNotifications";
 import { useUserManagement } from "@core/composables/useUserManagement";
 import { useAppSwitcher } from "@shared/components/app-switcher/composables/useAppSwitcher";
 

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

@@ -1,5 +1,5 @@
 import { useRoute, useRouter } from "vue-router";
-import { useBladeNavigation } from "@shared/components";
+import { useBladeNavigation } from "@shared/components/blade-navigation/composables";
 import { createLogger } from "@core/utilities";
 import type { MenuItem } from "@core/types";
 

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

@@ -1,14 +1,15 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import { computed, onUnmounted, provide, ref } from "vue";
+import { computed, onMounted, onUnmounted, provide, ref } from "vue";
 import { useRoute } from "vue-router";
 import VcApp from "@ui/components/organisms/vc-app/vc-app.vue";
-import { useMenuService, useAppBarWidget } from "@core/composables";
+import { useMenuService } from "@core/composables/useMenuService";
+import { useAppBarWidget } from "@core/composables/useAppBarWidget";
 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 { VcPopupContainer } from "@shared/components/popup-handler";
 import {
   VcAppDesktopLayout,
   VcAppMobileLayout,
@@ -266,7 +267,14 @@ export const Mobile: StoryFn = () => {
 
   return {
     components: { VcApp },
-    setup: () => useStorySetup(),
+    setup: () => {
+      const storySetup = useStorySetup();
+      // Provide sidebar state at story level so VcApp reuses it via inject
+      const sidebar = provideSidebarState();
+      // Auto-open the mobile slide-out menu so the story showcases the full mobile UI
+      onMounted(() => sidebar.openMenu());
+      return storySetup;
+    },
     template: `
       <div style="height: 600px;">
         <VcApp

package/ui/components/organisms/vc-app/vc-app.vue

@@ -9,7 +9,7 @@
     ref="appRootRef"
     class="vc-app"
     :class="{
-      'vc-app_mobile': $isMobile.value,
+      'vc-app--mobile': $isMobile.value,
     }"
   >
     <div class="vc-app__main-content">
@@ -98,17 +98,19 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { inject, provide, ref } from "vue";
+import { inject, provide, ref, watch } from "vue";
 import DesktopLayout from "@ui/components/organisms/vc-app/_internal/layouts/DesktopLayout.vue";
 import MobileLayout from "@ui/components/organisms/vc-app/_internal/layouts/MobileLayout.vue";
-import { VcPopupContainer, BladeRoutesRecord } from "@shared/components";
+import { VcPopupContainer } from "@shared/components/popup-handler";
+import type { BladeRoutesRecord } from "@shared/components/blade-navigation/types";
 import type { AppDescriptor } from "@core/api/platform";
 import type { MenuItem } from "@core/types";
 import type { SidebarStateReturn } from "@core/composables/useSidebarState";
 import { VcAiAgentPanel } from "@core/plugins/ai-agent";
 import type { IAiAgentConfig } from "@core/plugins/ai-agent";
+import { notification } from "@shared/components/notifications/core/notification";
 import { useRoute } from "vue-router";
-import { AppRootElementKey, DynamicModulesKey, BladeRoutesKey } from "@framework/injection-keys";
+import { AppRootElementKey, DynamicModulesKey, BladeRoutesKey, ModulesLoadErrorKey } from "@framework/injection-keys";
 import { createLogger } from "@core/utilities";
 import { provideSidebarState } from "@core/composables/useSidebarState";
 import { provideAppBarState } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarState";
@@ -176,6 +178,10 @@ const dynamicModules = inject(DynamicModulesKey, undefined);
 const aiAgentConfig = inject<IAiAgentConfig | undefined>("aiAgentConfig", undefined);
 const aiAgentAddGlobalToolbarButton = inject<boolean>("aiAgentAddGlobalToolbarButton", true);
 
+// Module load error state for notification toast
+// Default ref(false) = backward-compatible: no dynamic modules means no error
+const modulesLoadError = inject(ModulesLoadErrorKey, ref(false));
+
 // Bootstrap: provide services + register default shell UI
 useShellBootstrap({
   isEmbedded,
@@ -184,6 +190,16 @@ useShellBootstrap({
   aiAgentConfig,
   aiAgentAddGlobalToolbarButton,
 });
+
+// Progressive loading: show error as notification toast instead of blocking overlay
+watch(modulesLoadError, (hasError) => {
+  if (hasError) {
+    notification.error(
+      "Unable to load application modules. Please check your connection and try refreshing the page.",
+      { timeout: 10000 },
+    );
+  }
+});
 </script>
 
 <style lang="scss">
@@ -217,16 +233,17 @@ useShellBootstrap({
   &__workspace {
     @apply tw-w-full tw-overflow-hidden tw-flex tw-grow tw-basis-0 tw-relative;
 
-    .vc-app_mobile & {
+    .vc-app--mobile & {
       @apply tw-p-0;
     }
   }
 
+
   &__user-dropdown-button {
     @apply tw-p-0 tw-mb-2 tw-w-full tw-h-auto;
   }
 
-  &_mobile {
+  &--mobile {
     .vc-app__main-content {
       @apply tw-flex-col;
     }

package/ui/components/organisms/vc-blade/_internal/BladeContentSkeleton.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="vc-blade-content-skeleton">
+    <!-- Section 1: main fields -->
+    <div class="vc-blade-content-skeleton__section">
+      <VcSkeleton
+        variant="block"
+        :width="130"
+        :height="14"
+      />
+      <div class="vc-blade-content-skeleton__fields">
+        <div
+          v-for="i in 3"
+          :key="'a' + i"
+          class="vc-blade-content-skeleton__field"
+        >
+          <VcSkeleton
+            variant="block"
+            :width="60 + i * 20"
+            :height="11"
+          />
+          <div class="vc-blade-content-skeleton__input" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 2: more fields + textarea -->
+    <div class="vc-blade-content-skeleton__section">
+      <VcSkeleton
+        variant="block"
+        :width="110"
+        :height="14"
+      />
+      <div class="vc-blade-content-skeleton__fields">
+        <div
+          v-for="i in 2"
+          :key="'b' + i"
+          class="vc-blade-content-skeleton__field"
+        >
+          <VcSkeleton
+            variant="block"
+            :width="70 + i * 15"
+            :height="11"
+          />
+          <div class="vc-blade-content-skeleton__input" />
+        </div>
+        <div class="vc-blade-content-skeleton__field">
+          <VcSkeleton
+            variant="block"
+            :width="95"
+            :height="11"
+          />
+          <div class="vc-blade-content-skeleton__input vc-blade-content-skeleton__input--tall" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 3: short section -->
+    <div class="vc-blade-content-skeleton__section">
+      <VcSkeleton
+        variant="block"
+        :width="150"
+        :height="14"
+      />
+      <div class="vc-blade-content-skeleton__fields">
+        <div
+          v-for="i in 2"
+          :key="'c' + i"
+          class="vc-blade-content-skeleton__field"
+        >
+          <VcSkeleton
+            variant="block"
+            :width="55 + i * 25"
+            :height="11"
+          />
+          <div class="vc-blade-content-skeleton__input" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcSkeleton } from "@ui/components/atoms/vc-skeleton";
+
+defineOptions({ name: "BladeContentSkeleton" });
+</script>
+
+<style lang="scss">
+.vc-blade-content-skeleton {
+  @apply tw-flex-1 tw-overflow-auto tw-p-5 tw-flex tw-flex-col tw-gap-6;
+
+  &__section {
+    @apply tw-flex tw-flex-col tw-gap-4;
+  }
+
+  &__fields {
+    @apply tw-flex tw-flex-col tw-gap-4;
+  }
+
+  &__field {
+    @apply tw-flex tw-flex-col tw-gap-1.5;
+  }
+
+  &__input {
+    @apply tw-h-9 tw-rounded-md tw-animate-pulse;
+    @apply tw-bg-[color:var(--vc-skeleton-bg)];
+
+    &--tall {
+      @apply tw-h-20;
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-blade/_internal/BladeHeader.vue

@@ -19,7 +19,7 @@
         @mouseenter="tooltipVisible = true"
         @mouseleave="tooltipVisible = false"
       >
-        <teleport :to="teleportTarget" defer>
+        <teleport :to="teleportTarget">
           <span
             v-if="tooltipVisible"
             ref="tooltipRef"
@@ -104,7 +104,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import { inject, ref } from "vue";
 import { shift } from "@floating-ui/vue";
 import { BladeInstance } from "@framework/injection-keys";

package/ui/components/organisms/vc-blade/_internal/BladeHeaderSkeleton.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="vc-blade-header-skeleton">
+    <!-- Icon placeholder -->
+    <div class="vc-blade-header-skeleton__icon">
+      <VcSkeleton
+        variant="circle"
+        :width="24"
+        :height="24"
+      />
+    </div>
+
+    <div class="vc-blade-header-skeleton__text">
+      <!-- Title placeholder -->
+      <VcSkeleton
+        variant="block"
+        :width="180"
+        :height="19"
+      />
+      <!-- Subtitle placeholder -->
+      <div class="tw-mt-1.5">
+        <VcSkeleton
+          variant="block"
+          :width="120"
+          :height="12"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcSkeleton } from "@ui/components/atoms/vc-skeleton";
+
+defineOptions({ name: "BladeHeaderSkeleton" });
+</script>
+
+<style lang="scss">
+.vc-blade-header-skeleton {
+  @apply tw-shrink-0 tw-flex tw-items-center tw-gap-3 tw-px-6
+    tw-border-solid tw-border-b tw-border-b-[color:var(--blade-header-border-color)]
+    tw-bg-[color:var(--blade-header-background-color)];
+  height: var(--blade-header-height, 70px);
+
+  &__icon {
+    @apply tw-shrink-0;
+  }
+
+  &__text {
+    @apply tw-overflow-hidden;
+  }
+}
+</style>