@vc-shell/vc-app-skill 2.0.0-alpha.32 → 2.0.0-alpha.33-pr220.455e322

package/runtime/knowledge/docs/core/composables/useResponsive/useResponsive.docs.md

@@ -21,7 +21,10 @@ const { isMobile, isDesktop } = useResponsive();
 <template>
   <VcBlade title="Orders">
     <!-- Vue auto-unwraps refs from script setup — no .value needed -->
-    <div v-if="isDesktop" class="tw-flex tw-gap-4">
+    <div
+      v-if="isDesktop"
+      class="tw-flex tw-gap-4"
+    >
       <OrdersTable />
       <OrdersSummary />
     </div>
@@ -38,13 +41,13 @@ None. The composable reads breakpoint state from the framework's provide/inject
 
 ### Returns (`UseResponsiveReturn`)
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `isMobile` | `Ref<boolean>` | `false` | `true` when viewport width < 1024px |
-| `isDesktop` | `Ref<boolean>` | `true` | `true` when viewport width >= 1024px |
-| `isPhone` | `Ref<boolean>` | `false` | `true` when viewport width < 480px |
-| `isTablet` | `Ref<boolean>` | `false` | `true` when 480px <= viewport width < 1024px |
-| `isTouch` | `boolean` | `false` | `true` on touch-capable devices (not reactive — set once at app init) |
+| Property    | Type           | Default | Description                                                           |
+| ----------- | -------------- | ------- | --------------------------------------------------------------------- |
+| `isMobile`  | `Ref<boolean>` | `false` | `true` when viewport width < 1024px                                   |
+| `isDesktop` | `Ref<boolean>` | `true`  | `true` when viewport width >= 1024px                                  |
+| `isPhone`   | `Ref<boolean>` | `false` | `true` when viewport width < 480px                                    |
+| `isTablet`  | `Ref<boolean>` | `false` | `true` when 480px <= viewport width < 1024px                          |
+| `isTouch`   | `boolean`      | `false` | `true` on touch-capable devices (not reactive — set once at app init) |
 
 Breakpoint thresholds: phone < 480px, tablet 480–1023px, desktop >= 1024px. These match the framework's `setupBreakpoints()` configuration.
 
@@ -89,9 +92,23 @@ const { openBlade } = useBlade();
         mobile-role="title"
       />
       <!-- Extra columns visible only on desktop -->
-      <VcColumn id="sku" :title="t('SKU')" :sortable="true" />
-      <VcColumn id="price" :title="t('PRICE')" type="money" :sortable="true" />
-      <VcColumn id="createdDate" :title="t('DATE')" type="date-ago" :sortable="true" />
+      <VcColumn
+        id="sku"
+        :title="t('SKU')"
+        :sortable="true"
+      />
+      <VcColumn
+        id="price"
+        :title="t('PRICE')"
+        type="money"
+        :sortable="true"
+      />
+      <VcColumn
+        id="createdDate"
+        :title="t('DATE')"
+        type="date-ago"
+        :sortable="true"
+      />
     </VcDataTable>
   </VcBlade>
 </template>
@@ -120,6 +137,7 @@ const { isTouch } = useResponsive();
 ## Common Mistakes
 
 **Wrong: using `$isMobile.value` in template (deprecated)**
+
 ```vue
 <template>
   <!-- $isMobile is a global property — requires .value, no auto-unwrap -->
@@ -128,6 +146,7 @@ const { isTouch } = useResponsive();
 ```
 
 **Correct: using `useResponsive()` destructure**
+
 ```vue
 <script setup lang="ts">
 import { useResponsive } from "@vc-shell/framework";
@@ -142,6 +161,7 @@ const { isMobile } = useResponsive();
 ---
 
 **Wrong: using `inject(IsMobileKey)` directly**
+
 ```vue
 <script setup lang="ts">
 import { inject, ref } from "vue";
@@ -152,6 +172,7 @@ const isMobile = inject(IsMobileKey, ref(false));
 ```
 
 **Correct: using `useResponsive()`**
+
 ```vue
 <script setup lang="ts">
 import { useResponsive } from "@vc-shell/framework";

package/runtime/knowledge/docs/core/composables/useSettings/useSettings.docs.md

@@ -30,21 +30,21 @@ const { uiSettings, loading } = useSettings();
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `uiSettings` | `Ref<IUISetting>` | Reactive object with current UI customization values |
-| `loading` | `ComputedRef<boolean>` | Whether settings are being fetched from the API |
+| Property        | Type                                                | Description                                               |
+| --------------- | --------------------------------------------------- | --------------------------------------------------------- |
+| `uiSettings`    | `Ref<IUISetting>`                                   | Reactive object with current UI customization values      |
+| `loading`       | `ComputedRef<boolean>`                              | Whether settings are being fetched from the API           |
 | `applySettings` | `(args: { logo?, title?, avatar?, role? }) => void` | Override settings with custom values (prevents API fetch) |
 
 ### IUISetting
 
-| Property | Type | Description |
-|----------|------|-------------|
+| Property        | Type      | Description                                |
+| --------------- | --------- | ------------------------------------------ |
 | `contrast_logo` | `string?` | Logo variant for dark/contrast backgrounds |
-| `logo` | `string?` | Primary application logo URL |
-| `title` | `string?` | Application title |
-| `avatar` | `string?` | Current user avatar URL |
-| `role` | `string?` | Current user role display name |
+| `logo`          | `string?` | Primary application logo URL               |
+| `title`         | `string?` | Application title                          |
+| `avatar`        | `string?` | Current user avatar URL                    |
+| `role`          | `string?` | Current user role display name             |
 
 ## Common Patterns
 
@@ -58,14 +58,20 @@ const { uiSettings, loading } = useSettings();
 </script>
 
 <template>
-  <div v-loading="loading" class="tw-min-h-[40px]">
+  <div
+    v-loading="loading"
+    class="tw-min-h-[40px]"
+  >
     <img
       v-if="uiSettings.logo"
       :src="uiSettings.logo"
       :alt="uiSettings.title ?? 'Application Logo'"
       class="tw-h-10"
     />
-    <span v-if="uiSettings.title" class="tw-ml-2 tw-text-lg tw-font-semibold">
+    <span
+      v-if="uiSettings.title"
+      class="tw-ml-2 tw-text-lg tw-font-semibold"
+    >
       {{ uiSettings.title }}
     </span>
   </div>
@@ -82,8 +88,8 @@ const { applySettings } = useSettings();
 
 // Override default platform settings with module-specific branding
 applySettings({
-  logo: "/modules/vendor-portal/logo.svg",
-  title: "Vendor Portal",
+  logo: "/modules/my-module/logo.svg",
+  title: "My Module",
 });
 </script>
 ```
@@ -117,7 +123,10 @@ watch(user, (currentUser) => {
       alt="User avatar"
       class="tw-w-8 tw-h-8 tw-rounded-full"
     />
-    <span v-if="uiSettings.role" class="tw-text-sm tw-text-gray-500">
+    <span
+      v-if="uiSettings.role"
+      class="tw-text-sm tw-text-gray-500"
+    >
       {{ uiSettings.role }}
     </span>
   </div>

package/runtime/knowledge/docs/core/composables/useSettingsMenu/useSettingsMenu.docs.md

@@ -29,16 +29,16 @@ const items = settingsMenu.items.value;
 
 ### Returns (`ISettingsMenuService`)
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `register` | `(options: RegisterSettingsMenuItemOptions) => string` | Register a settings menu item; returns the item ID |
-| `unregister` | `(id: string) => void` | Remove a settings menu item by ID |
-| `items` | `ComputedRef<ISettingsMenuItem[]>` | Reactive array of all registered settings menu items |
+| Property     | Type                                                   | Description                                          |
+| ------------ | ------------------------------------------------------ | ---------------------------------------------------- |
+| `register`   | `(options: RegisterSettingsMenuItemOptions) => string` | Register a settings menu item; returns the item ID   |
+| `unregister` | `(id: string) => void`                                 | Remove a settings menu item by ID                    |
+| `items`      | `ComputedRef<ISettingsMenuItem[]>`                     | Reactive array of all registered settings menu items |
 
 ### Related Exports
 
-| Export | Description |
-|--------|-------------|
+| Export                  | Description                                        |
+| ----------------------- | -------------------------------------------------- |
 | `provideSettingsMenu()` | Create and provide the service in a root component |
 
 ## Common Patterns

package/runtime/knowledge/docs/core/composables/useSidebarState/useSidebarState.docs.md

@@ -15,7 +15,7 @@ Internally, it delegates to `useMenuExpanded()` to share reactive state with oth
 
 ```vue
 <script setup lang="ts">
-import { useSidebarState } from '@vc-shell/framework';
+import { useSidebarState } from "@vc-shell/framework";
 
 const { isExpanded, isPinned, togglePin, openMenu, closeMenu } = useSidebarState();
 </script>
@@ -24,10 +24,17 @@ const { isExpanded, isPinned, togglePin, openMenu, closeMenu } = useSidebarState
   <div class="tw-flex tw-items-center">
     <!-- Show full label when expanded, icon-only when collapsed -->
     <VcIcon icon="fas fa-box" />
-    <span v-if="isExpanded" class="tw-ml-2">Products</span>
+    <span
+      v-if="isExpanded"
+      class="tw-ml-2"
+      >Products</span
+    >
 
     <!-- Pin/unpin toggle button -->
-    <button @click="togglePin" class="tw-ml-auto">
+    <button
+      @click="togglePin"
+      class="tw-ml-auto"
+    >
       <VcIcon :icon="isPinned ? 'fas fa-thumbtack' : 'fas fa-thumbtack tw-rotate-45'" />
     </button>
   </div>
@@ -38,21 +45,21 @@ const { isExpanded, isPinned, togglePin, openMenu, closeMenu } = useSidebarState
 
 ### Returns -- State
 
-| Property | Type | Description |
-|---|---|---|
-| `isPinned` | `Ref<boolean>` | Sidebar is pinned open by the user. Persisted to localStorage so it survives page reloads. |
-| `isHoverExpanded` | `Ref<boolean>` | Sidebar is temporarily expanded because the mouse is hovering over it (desktop only). |
-| `isMenuOpen` | `Ref<boolean>` | Mobile menu overlay is visible. |
-| `isExpanded` | `ComputedRef<boolean>` | Derived: `isPinned || isHoverExpanded`. Use this when you just need to know if sidebar content is visible. |
+| Property          | Type                   | Description                                                                                |
+| ----------------- | ---------------------- | ------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------ |
+| `isPinned`        | `Ref<boolean>`         | Sidebar is pinned open by the user. Persisted to localStorage so it survives page reloads. |
+| `isHoverExpanded` | `Ref<boolean>`         | Sidebar is temporarily expanded because the mouse is hovering over it (desktop only).      |
+| `isMenuOpen`      | `Ref<boolean>`         | Mobile menu overlay is visible.                                                            |
+| `isExpanded`      | `ComputedRef<boolean>` | Derived: `isPinned                                                                         |     | isHoverExpanded`. Use this when you just need to know if sidebar content is visible. |
 
 ### Returns -- Actions
 
-| Property | Type | Description |
-|---|---|---|
-| `togglePin` | `() => void` | Toggle pinned state. Persists the new value to localStorage immediately. |
+| Property           | Type                       | Description                                                                                                      |
+| ------------------ | -------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `togglePin`        | `() => void`               | Toggle pinned state. Persists the new value to localStorage immediately.                                         |
 | `setHoverExpanded` | `(value: boolean) => void` | Set hover expansion. Opening has a 200ms delay to prevent flicker from brief mouse passes; closing is immediate. |
-| `openMenu` | `() => void` | Show the mobile menu overlay. |
-| `closeMenu` | `() => void` | Hide the mobile menu overlay. |
+| `openMenu`         | `() => void`               | Show the mobile menu overlay.                                                                                    |
+| `closeMenu`        | `() => void`               | Hide the mobile menu overlay.                                                                                    |
 
 ## Setup
 
@@ -60,7 +67,7 @@ const { isExpanded, isPinned, togglePin, openMenu, closeMenu } = useSidebarState
 
 ```typescript
 // Inside VcApp.vue setup
-import { provideSidebarState } from '@vc-shell/framework';
+import { provideSidebarState } from "@vc-shell/framework";
 
 provideSidebarState();
 ```
@@ -69,8 +76,8 @@ provideSidebarState();
 
 ```vue
 <script setup lang="ts">
-import { useSidebarState } from '@vc-shell/framework';
-import { useBladeContext } from '@vc-shell/framework';
+import { useSidebarState } from "@vc-shell/framework";
+import { useBladeContext } from "@vc-shell/framework";
 
 const { closeMenu, isMenuOpen } = useSidebarState();
 const { openBlade } = useBladeContext();
@@ -83,7 +90,7 @@ async function navigateToProducts() {
 
   await openBlade({
     component: ProductListBlade,
-    param: { catalogId: 'default' },
+    param: { catalogId: "default" },
   });
 }
 </script>
@@ -100,18 +107,19 @@ async function navigateToProducts() {
 
 ```vue
 <script setup lang="ts">
-import { useSidebarState } from '@vc-shell/framework';
-import { computed } from 'vue';
+import { useSidebarState } from "@vc-shell/framework";
+import { computed } from "vue";
 
 const { isExpanded } = useSidebarState();
 
-const contentClass = computed(() =>
-  isExpanded.value ? 'tw-ml-64' : 'tw-ml-16',
-);
+const contentClass = computed(() => (isExpanded.value ? "tw-ml-64" : "tw-ml-16"));
 </script>
 
 <template>
-  <div :class="contentClass" class="tw-transition-all tw-duration-200">
+  <div
+    :class="contentClass"
+    class="tw-transition-all tw-duration-200"
+  >
     <slot />
   </div>
 </template>

package/runtime/knowledge/docs/core/composables/useSlowNetworkDetection/useSlowNetworkDetection.docs.md

@@ -17,14 +17,18 @@ The composable is initialized automatically at app startup. To reactively read t
 
 ```vue
 <script setup lang="ts">
-import { useSlowNetworkDetection } from '@vc-shell/framework';
+import { useSlowNetworkDetection } from "@vc-shell/framework";
 
 const { isSlowNetwork } = useSlowNetworkDetection();
 </script>
 
 <template>
   <VcBlade title="Products">
-    <VcBanner v-if="isSlowNetwork" variant="warning" icon="lucide-wifi">
+    <VcBanner
+      v-if="isSlowNetwork"
+      variant="warning"
+      icon="lucide-wifi"
+    >
       <template #title>Slow connection</template>
       Loading may take longer than usual.
     </VcBanner>
@@ -38,19 +42,19 @@ const { isSlowNetwork } = useSlowNetworkDetection();
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `isSlowNetwork` | `Readonly<Ref<boolean>>` | `true` when the network is slow (either channel active). Read-only. |
-| `trackRequest` | `(id: string) => void` | Start tracking a request. If it isn't untracked within 10 s, it counts as slow. |
-| `untrackRequest` | `(id: string) => void` | Stop tracking a request. Cancels the timer or decrements the slow count. |
+| Property         | Type                     | Description                                                                     |
+| ---------------- | ------------------------ | ------------------------------------------------------------------------------- |
+| `isSlowNetwork`  | `Readonly<Ref<boolean>>` | `true` when the network is slow (either channel active). Read-only.             |
+| `trackRequest`   | `(id: string) => void`   | Start tracking a request. If it isn't untracked within 10 s, it counts as slow. |
+| `untrackRequest` | `(id: string) => void`   | Stop tracking a request. Cancels the timer or decrements the slow count.        |
 
 ### Constants
 
-| Name | Value | Purpose |
-|---|---|---|
-| `SLOW_REQUEST_THRESHOLD_MS` | `10000` | Time before a pending request is considered slow |
-| `DISMISS_DELAY_MS` | `3000` | Delay before hiding the notification after recovery |
-| `SLOW_EFFECTIVE_TYPES` | `["slow-2g", "2g"]` | Connection types flagged as slow |
+| Name                        | Value               | Purpose                                             |
+| --------------------------- | ------------------- | --------------------------------------------------- |
+| `SLOW_REQUEST_THRESHOLD_MS` | `10000`             | Time before a pending request is considered slow    |
+| `DISMISS_DELAY_MS`          | `3000`              | Delay before hiding the notification after recovery |
+| `SLOW_EFFECTIVE_TYPES`      | `["slow-2g", "2g"]` | Connection types flagged as slow                    |
 
 ## How It Works
 
@@ -74,18 +78,18 @@ The fetch interceptor in `framework/core/interceptors/index.ts` calls `trackRequ
 
 ```vue
 <script setup lang="ts">
-import { watch } from 'vue';
-import { useSlowNetworkDetection } from '@vc-shell/framework';
+import { watch } from "vue";
+import { useSlowNetworkDetection } from "@vc-shell/framework";
 
 const { isSlowNetwork } = useSlowNetworkDetection();
 
 // Switch to a lightweight polling interval when the network is slow
-const pollInterval = computed(() => isSlowNetwork.value ? 30000 : 5000);
+const pollInterval = computed(() => (isSlowNetwork.value ? 30000 : 5000));
 
 // Warn before navigating away during slow network + unsaved changes
 watch(isSlowNetwork, (slow) => {
   if (slow) {
-    console.info('Network is slow — consider disabling auto-refresh');
+    console.info("Network is slow — consider disabling auto-refresh");
   }
 });
 </script>
@@ -96,7 +100,7 @@ watch(isSlowNetwork, (slow) => {
 If you bypass the standard fetch interceptor (e.g., direct `XMLHttpRequest` or third-party SDK), you can manually track the request:
 
 ```ts
-import { useSlowNetworkDetection } from '@vc-shell/framework';
+import { useSlowNetworkDetection } from "@vc-shell/framework";
 
 const { trackRequest, untrackRequest } = useSlowNetworkDetection();
 

package/runtime/knowledge/docs/core/composables/useTheme/useTheme.docs.md

@@ -13,15 +13,15 @@ Manages color theme registration, switching, and persistence. Themes are applied
 
 ```vue
 <script setup lang="ts">
-import { useTheme } from '@vc-shell/framework';
+import { useTheme } from "@vc-shell/framework";
 
 const { themes, currentThemeKey, currentLocalizedName, next, setTheme, register } = useTheme();
 
 // Register a dark theme from your module
-register({ key: 'dark', localizationKey: 'CORE.THEMES.DARK' });
+register({ key: "dark", localizationKey: "CORE.THEMES.DARK" });
 
 // Switch to it explicitly
-setTheme('dark');
+setTheme("dark");
 
 // Or cycle through all registered themes (light -> dark -> light -> ...)
 next();
@@ -39,28 +39,28 @@ next();
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `themes` | `ComputedRef<DisplayTheme[]>` | All registered themes with their `key` and localized `name`. Reactive -- updates when themes are registered/unregistered. |
-| `currentThemeKey` | `Ref<string>` | Active theme key (e.g., `"light"`, `"dark"`). Two-way reactive -- setting it switches the theme. |
-| `currentLocalizedName` | `ComputedRef<string>` | Localized display name of the active theme (e.g., "Light", "Dark"). Falls back to capitalized key. |
-| `next` | `() => void` | Cycle to the next registered theme in order. Wraps around at the end. |
-| `setTheme` | `(themeKey: string) => void` | Switch to a specific registered theme. Logs a warning if the key is not registered. |
-| `register` | `(themes: ThemeDefinition \| ThemeDefinition[]) => void` | Add one or more themes to the global registry. Duplicates (by key) are silently ignored. |
-| `unregister` | `(keys: string \| string[]) => void` | Remove themes from the registry by key. |
+| Property               | Type                                                     | Description                                                                                                               |
+| ---------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `themes`               | `ComputedRef<DisplayTheme[]>`                            | All registered themes with their `key` and localized `name`. Reactive -- updates when themes are registered/unregistered. |
+| `currentThemeKey`      | `Ref<string>`                                            | Active theme key (e.g., `"light"`, `"dark"`). Two-way reactive -- setting it switches the theme.                          |
+| `currentLocalizedName` | `ComputedRef<string>`                                    | Localized display name of the active theme (e.g., "Light", "Dark"). Falls back to capitalized key.                        |
+| `next`                 | `() => void`                                             | Cycle to the next registered theme in order. Wraps around at the end.                                                     |
+| `setTheme`             | `(themeKey: string) => void`                             | Switch to a specific registered theme. Logs a warning if the key is not registered.                                       |
+| `register`             | `(themes: ThemeDefinition \| ThemeDefinition[]) => void` | Add one or more themes to the global registry. Duplicates (by key) are silently ignored.                                  |
+| `unregister`           | `(keys: string \| string[]) => void`                     | Remove themes from the registry by key.                                                                                   |
 
 ### ThemeDefinition
 
-| Field | Type | Required | Description |
-|---|---|---|---|
-| `key` | `string` | Yes | Unique theme identifier. Used as the `data-theme` attribute value on `<html>` and as the localStorage persistence key. |
-| `localizationKey` | `string` | No | i18n key for the display name (e.g., `"CORE.THEMES.DARK"`). Falls back to the capitalized `key` (e.g., `"Dark"`). |
+| Field             | Type     | Required | Description                                                                                                            |
+| ----------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `key`             | `string` | Yes      | Unique theme identifier. Used as the `data-theme` attribute value on `<html>` and as the localStorage persistence key. |
+| `localizationKey` | `string` | No       | i18n key for the display name (e.g., `"CORE.THEMES.DARK"`). Falls back to the capitalized `key` (e.g., `"Dark"`).      |
 
 ### DisplayTheme
 
-| Field | Type | Description |
-|---|---|---|
-| `key` | `string` | Theme identifier |
+| Field  | Type     | Description                                                                  |
+| ------ | -------- | ---------------------------------------------------------------------------- |
+| `key`  | `string` | Theme identifier                                                             |
 | `name` | `string` | Localized display name, resolved from `localizationKey` or capitalized `key` |
 
 ## How It Works
@@ -77,16 +77,16 @@ next();
 
 ```typescript
 // my-module/index.ts
-import type { App } from 'vue';
-import { useTheme } from '@vc-shell/framework';
+import type { App } from "vue";
+import { useTheme } from "@vc-shell/framework";
 
 export default {
   install(app: App) {
     const { register } = useTheme();
 
     register([
-      { key: 'ocean', localizationKey: 'MY_MODULE.THEMES.OCEAN' },
-      { key: 'forest', localizationKey: 'MY_MODULE.THEMES.FOREST' },
+      { key: "ocean", localizationKey: "MY_MODULE.THEMES.OCEAN" },
+      { key: "forest", localizationKey: "MY_MODULE.THEMES.FOREST" },
     ]);
   },
 };
@@ -113,7 +113,7 @@ Then define your theme's CSS variables scoped by the `data-theme` attribute:
 
 ```vue
 <script setup lang="ts">
-import { useTheme } from '@vc-shell/framework';
+import { useTheme } from "@vc-shell/framework";
 
 const { themes, currentThemeKey, setTheme } = useTheme();
 </script>

package/runtime/knowledge/docs/core/composables/useToolbar/useToolbar.docs.md

@@ -170,10 +170,7 @@ By default, all methods operate on the current blade. Pass an explicit `targetBl
 
 ```typescript
 // Register a button on a specific child blade
-registerToolbarItem(
-  { id: "child-action", title: "Action", clickHandler: () => {} },
-  "ChildBlade",
-);
+registerToolbarItem({ id: "child-action", title: "Action", clickHandler: () => {} }, "ChildBlade");
 
 // Clear another blade's toolbar
 clearBladeToolbarItems("ChildBlade");
@@ -325,42 +322,42 @@ function helperFunction() {
 
 ### Parameters
 
-| Parameter | Type | Required | Default | Description |
-|-----------|------|----------|---------|-------------|
-| `options` | `UseToolbarOptions` | No | `{}` | Configuration options |
+| Parameter | Type                | Required | Default | Description           |
+| --------- | ------------------- | -------- | ------- | --------------------- |
+| `options` | `UseToolbarOptions` | No       | `{}`    | Configuration options |
 
 #### UseToolbarOptions
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `autoCleanup` | `boolean` | `true` | Clear all toolbar items for the current blade on component unmount |
+| Option        | Type      | Default | Description                                                        |
+| ------------- | --------- | ------- | ------------------------------------------------------------------ |
+| `autoCleanup` | `boolean` | `true`  | Clear all toolbar items for the current blade on component unmount |
 
 ### Returns: `UseToolbarReturn`
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `registerToolbarItem` | `(item: IToolbarItem, targetBladeId?: string) => void` | Register a toolbar button (scoped to current blade by default) |
-| `unregisterToolbarItem` | `(id: string, targetBladeId?: string) => void` | Remove a toolbar button by ID |
-| `updateToolbarItem` | `(id: string, partial: Partial<IToolbarItem>, targetBladeId?: string) => void` | Update properties of an existing toolbar button |
-| `getToolbarItems` | `(targetBladeId?: string) => IToolbarItem[]` | Get all toolbar items for a blade |
-| `clearBladeToolbarItems` | `(targetBladeId?: string) => void` | Remove all toolbar items for a blade |
-| `isToolbarItemRegistered` | `(id: string) => boolean` | Check if a toolbar item with the given ID exists |
-| `registeredToolbarItems` | `IToolbarRegistration[]` | All registered toolbar items across all blades |
+| Property                  | Type                                                                           | Description                                                    |
+| ------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------- |
+| `registerToolbarItem`     | `(item: IToolbarItem, targetBladeId?: string) => void`                         | Register a toolbar button (scoped to current blade by default) |
+| `unregisterToolbarItem`   | `(id: string, targetBladeId?: string) => void`                                 | Remove a toolbar button by ID                                  |
+| `updateToolbarItem`       | `(id: string, partial: Partial<IToolbarItem>, targetBladeId?: string) => void` | Update properties of an existing toolbar button                |
+| `getToolbarItems`         | `(targetBladeId?: string) => IToolbarItem[]`                                   | Get all toolbar items for a blade                              |
+| `clearBladeToolbarItems`  | `(targetBladeId?: string) => void`                                             | Remove all toolbar items for a blade                           |
+| `isToolbarItemRegistered` | `(id: string) => boolean`                                                      | Check if a toolbar item with the given ID exists               |
+| `registeredToolbarItems`  | `IToolbarRegistration[]`                                                       | All registered toolbar items across all blades                 |
 
 ### IToolbarItem
 
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `id` | `string` | Yes | Unique identifier for the button |
-| `title` | `string \| Ref<string> \| ComputedRef<string>` | No | Button label (supports reactive values) |
-| `icon` | `string \| (() => string)` | No | Icon class (e.g., `"fas fa-save"`) or a function returning one |
-| `clickHandler` | `(app?) => void` | No | Click callback |
-| `disabled` | `boolean \| ComputedRef<boolean>` | No | Whether the button is disabled |
-| `isVisible` | `boolean \| Ref<boolean> \| ComputedRef<boolean> \| ((blade?) => boolean)` | No | Controls button visibility |
-| `priority` | `number` | No | Sort order (higher = displayed first, default `0`) |
-| `separator` | `"left" \| "right" \| "both"` | No | Adds a visual divider next to the button |
-| `permissions` | `string \| string[]` | No | Required permission(s) to display the button |
-| `bladeId` | `string` | No | Target blade ID (auto-resolved from context) |
+| Property       | Type                                                                       | Required | Description                                                    |
+| -------------- | -------------------------------------------------------------------------- | -------- | -------------------------------------------------------------- |
+| `id`           | `string`                                                                   | Yes      | Unique identifier for the button                               |
+| `title`        | `string \| Ref<string> \| ComputedRef<string>`                             | No       | Button label (supports reactive values)                        |
+| `icon`         | `string \| (() => string)`                                                 | No       | Icon class (e.g., `"fas fa-save"`) or a function returning one |
+| `clickHandler` | `(app?) => void`                                                           | No       | Click callback                                                 |
+| `disabled`     | `boolean \| ComputedRef<boolean>`                                          | No       | Whether the button is disabled                                 |
+| `isVisible`    | `boolean \| Ref<boolean> \| ComputedRef<boolean> \| ((blade?) => boolean)` | No       | Controls button visibility                                     |
+| `priority`     | `number`                                                                   | No       | Sort order (higher = displayed first, default `0`)             |
+| `separator`    | `"left" \| "right" \| "both"`                                              | No       | Adds a visual divider next to the button                       |
+| `permissions`  | `string \| string[]`                                                       | No       | Required permission(s) to display the button                   |
+| `bladeId`      | `string`                                                                   | No       | Target blade ID (auto-resolved from context)                   |
 
 ## Related