@vc-shell/vc-app-skill 2.1.0 → 2.2.0-pr260.a8bd3a7

package/runtime/knowledge/docs/core/plugins/validation/validation.docs.md

@@ -21,7 +21,7 @@ This plugin auto-registers every rule from `@vee-validate/rules` (required, emai
 ## When to Use
 
 - Validate form fields in blades using `<Field>` components or `useField()` with declarative rules (`required`, `email`, `min`, etc.)
-- Use custom vc-shell rules: image dimensions (`validateImageMinSize`), file weight, date comparisons, BigInt safety
+- Use custom vc-shell rules: image dimensions (`mindimensions`), file weight, date comparisons, BigInt safety
 - When NOT to use: for API-level validation -- that belongs server-side; for simple presence checks on non-form data -- use plain conditionals
 
 The framework imports this module during setup. No manual installation is needed by module developers.
@@ -34,11 +34,11 @@ The framework imports this module during setup. No manual installation is needed
 
 // Under the hood, the plugin does:
 import { defineRule } from "vee-validate";
-import * as allRules from "@vee-validate/rules";
+import { all } from "@vee-validate/rules";
 
 // Register all standard rules
-Object.entries(allRules).forEach(([name, rule]) => {
-  defineRule(name, rule);
+Object.keys(all).forEach((rule) => {
+  defineRule(rule, all[rule]);
 });
 
 // Then register custom vc-shell rules
@@ -187,7 +187,7 @@ const { handleSubmit, errors } = useForm({
   },
 });
 
-const onSubmit = handleSubmit((values) => {
+const onSubmit = handleSubmit(async (values) => {
   // values is fully validated here
   await saveProduct(values);
 });
@@ -197,12 +197,15 @@ const onSubmit = handleSubmit((values) => {
 
 All custom rules use localized error messages via `i18n.global.t()`. To customize messages, add the corresponding keys to your module's locale file:
 
+`mindimensions` only treats files with a `.jpg`, `.svg`, `.jpeg`, `.png`, `.bmp`, or `.gif` extension as images; any other file fails with `messages.min_dimensions.not_image_error`.
+
 ```typescript
 // locales/en.ts
 export default {
   messages: {
     min_dimensions: {
       error: "Image must be at least {width}x{height} pixels",
+      not_image_error: "File is not a supported image",
     },
     file_weight: "File must not exceed {size} KB",
     before: "Date must be before {target}",
@@ -241,5 +244,5 @@ Do not forget that `mindimensions` and `fileWeight` rules work with File objects
 
 - [vee-validate docs](https://vee-validate.logaretm.com/v4/) -- upstream validation library
 - `framework/core/plugins/i18n/` -- error messages use `i18n.global.t()` for localization
-- Locale keys: `messages.min_dimensions.error`, `messages.file_weight`, `messages.before`, `messages.after`, `messages.bigint`
+- Locale keys: `messages.min_dimensions.error`, `messages.min_dimensions.not_image_error`, `messages.file_weight`, `messages.before`, `messages.after`, `messages.bigint`
 - `framework/ui/components/molecules/vc-field/` -- VcField wrapper component for validation display

package/runtime/knowledge/docs/core/services/services.docs.md

@@ -32,17 +32,17 @@ Every service follows the same architecture:
 
 ## Services
 
-| Service                        | Factory                              | Module-level API                                                | Key Type               |
-| ------------------------------ | ------------------------------------ | --------------------------------------------------------------- | ---------------------- |
-| **MenuService**                | `createMenuService()`                | `addMenuItem()`, `removeRegisteredMenuItem()`, `setMenuBadge()` | `MenuItem`             |
-| **WidgetService**              | `createWidgetService()`              | `registerWidget()`, `registerExternalWidget()`                  | `IWidget`              |
-| **ToolbarService**             | `createToolbarService()`             | `registerToolbarItem()`                                         | `IToolbarItem`         |
-| **DashboardService**           | `createDashboardService()`           | `registerDashboardWidget()`                                     | `DashboardWidget`      |
-| **SettingsMenuService**        | `createSettingsMenuService()`        | `addSettingsMenuItem()`                                         | `ISettingsMenuItem`    |
-| **AppBarWidgetService**        | `createAppBarWidgetService()`        | `addAppBarWidget()`                                             | `AppBarWidget`         |
-| **AppBarMobileButtonsService** | `createAppBarMobileButtonsService()` | (direct API)                                                    | `AppBarButtonContent`  |
-| **GlobalSearchService**        | `createGlobalSearchService()`        | (direct API)                                                    | per-blade search state |
-| **LanguageService**            | `createLanguageService()`            | (direct API)                                                    | locale strings         |
+| Service                        | Factory                                  | Module-level API                                                                                                          | Key Type                                  |
+| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| **MenuService**                | `createMenuService()`                    | `addMenuItem()`, `removeRegisteredMenuItem()`, `setMenuBadge()`, `removeMenuBadge()`, `getMenuBadge()`, `getMenuBadges()` | `MenuItem`                                |
+| **WidgetService**              | `createWidgetService()`                  | `registerWidget()`, `registerExternalWidget()`                                                                            | `IWidget` / `IExternalWidgetRegistration` |
+| **ToolbarService**             | `createToolbarService()`                 | `registerToolbarItem()`                                                                                                   | `IToolbarItem`                            |
+| **DashboardService**           | `createDashboardService({ hasAccess? })` | `registerDashboardWidget()`                                                                                               | `DashboardWidget`                         |
+| **SettingsMenuService**        | `createSettingsMenuService()`            | `addSettingsMenuItem()`                                                                                                   | `ISettingsMenuItem`                       |
+| **AppBarWidgetService**        | `createAppBarWidgetService()`            | `addAppBarWidget()`                                                                                                       | `AppBarWidget`                            |
+| **AppBarMobileButtonsService** | `createAppBarMobileButtonsService()`     | (direct API)                                                                                                              | `AppBarButtonContent`                     |
+| **GlobalSearchService**        | `createGlobalSearchService()`            | (direct API)                                                                                                              | per-blade search state                    |
+| **LanguageService**            | `createLanguageService()`                | (direct API)                                                                                                              | locale strings                            |
 
 ## Usage
 
@@ -59,7 +59,9 @@ addMenuItem({
   priority: 10,
 });
 
-registerWidget({ id: "order-stats", component: OrderStatsWidget }, "OrderDetails");
+// The `component` field on IWidget is deprecated; prefer headless widgets (via
+// `useBladeWidgets()`) or `registerExternalWidget()`.
+registerWidget({ id: "order-stats", headless: { icon: "lucide-chart-bar" } }, "OrderDetails");
 ```
 
 ### Using inside a component
@@ -76,7 +78,7 @@ const { toolbarItems } = useToolbar(); // toolbar items for current blade
 ```typescript
 import { setMenuBadge, removeMenuBadge } from "@vc-shell/framework";
 
-setMenuBadge("OrdersList", { value: computed(() => pendingCount.value) });
+setMenuBadge("OrdersList", { content: computed(() => pendingCount.value) });
 removeMenuBadge("OrdersList");
 ```
 

package/runtime/knowledge/docs/core/types/types.docs.md

@@ -27,60 +27,58 @@ All types are re-exported from `@vc-shell/framework`, so module developers impor
 
 ### Menu System (`menu-types.ts`)
 
-| Type                  | Description                                                                                                            |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| `MenuItemConfig`      | Configuration for registering a menu item: `title`, `icon`, `priority`, `permissions`, `group`/`groupConfig`, `badge`. |
-| `MenuItemBadge`       | Badge display config: `content` (static, ref, computed, or function), `variant`, `isDot`.                              |
-| `MenuItemBadgeConfig` | Union: full `MenuItemBadge` object or shorthand `number \| string \| Ref \| ComputedRef \| function`.                  |
-| `MenuItem`            | Runtime menu item extending `MenuItemConfig` with `routeId`, `url`, `children[]`, `groupIcon`, `groupId`.              |
+| Type                  | Description                                                                                                                                                                        |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `MenuItemConfig`      | Configuration for registering a menu item: `title`, `icon`, `priority`, `permissions`, `groupConfig`, `badge`. (`group` and `inGroupPriority` are deprecated — use `groupConfig`.) |
+| `MenuItemBadge`       | Badge display config: `content` (static, ref, computed, or function), `variant`, `isDot`.                                                                                          |
+| `MenuItemBadgeConfig` | Union: full `MenuItemBadge` object or shorthand `number \| string \| Ref \| ComputedRef \| function`.                                                                              |
+| `MenuItem`            | Runtime menu item extending `MenuItemConfig` with `routeId`, `url`, `children[]`, `groupId`. (`groupIcon` is deprecated — use `groupConfig.icon`.)                                 |
 
 ### Toolbar
 
-| Type             | Description                                                                                                        |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `IBladeToolbar`  | Toolbar button config: `id`, `icon`, `disabled`, `title`, `isVisible`, `clickHandler`, `separator`, `permissions`. |
-| `ToolbarMenu<T>` | Generic toolbar menu item that infers component props from the provided component type.                            |
+| Type            | Description                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `IBladeToolbar` | Toolbar button config: `id`, `icon`, `disabled`, `title`, `isVisible`, `clickHandler`, `separator`, `permissions`. |
 
 ### Table Columns
 
-| Type                  | Description                                                                                                                                                                  |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ITableColumnsBase`   | Column definition: `id`, `title`, `width`, `field`, `type` (money, date, image, status, etc.), `sortable`, `editable`, `rules`, `filter`, `mobilePosition`, `mobileVisible`. |
-| `ITableColumns`       | Union of `ITableColumnsBase` with specialized image and money column variants.                                                                                               |
-| `IColumnFilterConfig` | Column filter: `true` (text), `string` (custom field), `{ options }` (select), `{ range }` (date range).                                                                     |
-| `IFilterOption`       | Select filter option: `{ value, label }`.                                                                                                                                    |
+| Type                  | Description                                                                                                                                                                                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ITableColumnsBase`   | Column definition: `id`, `title`, `width`, `field`, `type` (`money`, `date-ago`, `date`, `time`, `image`, `date-time`, `status`, `status-icon`, `number`, `link`, `html`), `sortable`, `editable`, `rules`, `filter`, `mobilePosition`, `mobileVisible`. |
+| `ITableColumns`       | Union of `ITableColumnsBase` with specialized image and money column variants.                                                                                                                                                                           |
+| `IColumnFilterConfig` | Column filter: `true` (text), `string` (custom field), `{ options }` (select), `{ range }` (date range).                                                                                                                                                 |
+| `IFilterOption`       | Select filter option: `{ value, label }`.                                                                                                                                                                                                                |
 
 ### Assets
 
-| Type               | Description                                                                                |
-| ------------------ | ------------------------------------------------------------------------------------------ |
-| `ICommonAsset`     | Asset record: `url`, `relativeUrl`, `title`, `name`, `size`, `sortOrder`, `typeId`, dates. |
-| `AssetsHandler<T>` | Asset operations: `upload()`, `edit()`, `remove()`, `loading` ref, `noRemoveConfirmation`. |
+| Type               | Description                                                                                                                                                                                                  |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ICommonAsset`     | Alias of `AssetLike`: declares only `url`, `name`, `sortOrder` plus an open `[key: string]: any` index signature (other fields are untyped passthrough). **Deprecated** (removed in v3.0) — use `AssetLike`. |
+| `AssetsHandler<T>` | Asset operations: `upload()`, `edit()`, `remove()`, `loading` ref, `noRemoveConfirmation`. **Deprecated** (removed in v3.0) — use `UseAssetsManagerReturn`.                                                  |
 
 ### Service Abstractions (`services.ts`)
 
-| Type                           | Description                                                                                        |
-| ------------------------------ | -------------------------------------------------------------------------------------------------- |
-| `ServiceLifecycle<T>`          | Service create/provide/cleanup lifecycle.                                                          |
-| `PreregistrationQueue<T>`      | Queue for items registered before a service initializes: `register()`, `flush()`, `clear()`.       |
-| `RegistryService<TKey, TItem>` | Generic registry: `register()`, `unregister()`, `get()`, `has()`, `getAll()`, `clear()`.           |
-| `ListService<T>`               | Reactive list: `items` ref, `add()`, `remove()`, `find()`, `filter()`.                             |
-| `OrderedListService<T>`        | Extends `ListService` with `reorder()` and `getSorted()`.                                          |
-| `ObservableService<T>`         | Subscribe/getValue pattern for change observation.                                                 |
-| `ServiceResult<T>`             | Async operation result: `success`, `data?`, `error?` with code/message/details.                    |
-| `WidgetRegistration`           | Widget entry: `id`, `component`, `props`, `order`, `isVisible`.                                    |
-| `MenuItemRegistration`         | Menu item entry: `id`, `title`, `icon`, `priority`, `permissions`, `routeId`, `group`, `children`. |
-| `ToolbarItemRegistration`      | Toolbar item entry: `id`, `title`, `icon`, `order`, `disabled`, `clickHandler`, `permissions`.     |
+| Type                           | Description                                                                                               |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `ServiceLifecycle<T>`          | Service create/provide/cleanup lifecycle.                                                                 |
+| `PreregistrationQueue<T>`      | Queue for items registered before a service initializes: `register()`, `flush()`, `clear()`.              |
+| `RegistryService<TKey, TItem>` | Generic registry: `register()`, `unregister()`, `get()`, `has()`, `getAll()`, `clear()`.                  |
+| `ListService<T>`               | Reactive list: `items` ref, `add()`, `remove()`, `find()`, `filter()`.                                    |
+| `OrderedListService<T>`        | Extends `ListService` with `reorder()` and `getSorted()`.                                                 |
+| `ObservableService<T>`         | Subscribe/getValue pattern for change observation.                                                        |
+| `ServiceResult<T>`             | Async operation result: `success`, `data?`, `error?` with code/message/details.                           |
+| `WidgetRegistration`           | Widget entry: `id`, `component`, `props`, `order`, `isVisible`.                                           |
+| `MenuItemRegistration`         | Menu item entry: `id`, `title`, `icon`, `priority`, `permissions`, `routeId`, `url`, `group`, `children`. |
+| `ToolbarItemRegistration`      | Toolbar item entry: `id`, `title`, `icon`, `order`, `disabled`, `clickHandler`, `permissions`.            |
 
 ### Other
 
-| Type                              | Description                                                                                   |
-| --------------------------------- | --------------------------------------------------------------------------------------------- |
-| `IBladeDropdownItem`              | Blade dropdown option: `id`, `title`, `icon`, `clickHandler`.                                 |
-| `IMenuItem<T>`                    | Generic menu item with optional component slot.                                               |
-| `NotificationTemplateConstructor` | Component constructor with a `notifyType` static field.                                       |
-| `IActionBuilderResult<T>`         | Row action definition: `icon`, `title`, `type` (danger/success/warning/info), `clickHandler`. |
-| `RequestPasswordResult`           | Password reset result: `succeeded`, `error`, `errorCode`.                                     |
+| Type                      | Description                                                                                   |
+| ------------------------- | --------------------------------------------------------------------------------------------- |
+| `IBladeDropdownItem`      | Blade dropdown option: `id`, `title`, `icon`, `clickHandler`.                                 |
+| `IMenuItem<T>`            | Generic menu item with optional component slot.                                               |
+| `IActionBuilderResult<T>` | Row action definition: `icon`, `title`, `type` (danger/success/warning/info), `clickHandler`. |
+| `RequestPasswordResult`   | Password reset result: `succeeded`, `error`, `errorCode`.                                     |
 
 ## Usage Examples
 
@@ -94,7 +92,6 @@ const columns: ITableColumns[] = [
     id: "name",
     title: "Product Name",
     sortable: true,
-    type: "text",
   },
   {
     id: "price",

package/runtime/knowledge/docs/core/utilities/date/date-utilities.docs.md

@@ -103,5 +103,4 @@ The locale resolver tries the full code first (e.g., `pt-BR`), then the base lan
 
 ## Related
 
-- `framework/ui/components/organisms/vc-table/components/cells/` -- cell renderers use these for date/datetime/date-ago columns
-- `framework/shared/modules/assets-manager/` -- uses `formatDateRelative` for asset timestamps
+- `framework/ui/components/organisms/vc-data-table/components/cells/` -- cell renderers use these for date/datetime/date-ago columns

package/runtime/knowledge/docs/core/utilities/shared-utilities.docs.md

@@ -11,39 +11,39 @@ Helper functions and TypeScript type utilities used across the shared layer of t
 
 ## Overview
 
-This directory provides small, focused utility modules for asset handling, color manipulation, badge formatting, and Vue component type extraction.
+This directory provides small, focused utility modules for asset handling, color manipulation, and badge formatting.
 
 ## Exports
 
-| Export                        | Module                | Description                                                                 |
-| ----------------------------- | --------------------- | --------------------------------------------------------------------------- |
-| `isImage(name)`               | `assets.ts`           | Returns `true` if the file extension is an image (png, jpg, jpeg, svg, gif) |
-| `getFileThumbnail(name)`      | `assets.ts`           | Returns a Bootstrap icon class for the file type (e.g., `bi-filetype-pdf`)  |
-| `readableSize(bytes)`         | `assets.ts`           | Formats byte count as human-readable string (e.g., `"1.5 MB"`)              |
-| `convertColorNameToHex(name)` | `colorUtils.ts`       | Converts a CSS color name to hex using the Canvas API                       |
-| `isValidHexColor(value)`      | `colorUtils.ts`       | Validates a 6-digit hex color string                                        |
-| `normalizeHexColor(hex)`      | `colorUtils.ts`       | Ensures hex string starts with `#`                                          |
-| `formatBadgeCount(value)`     | `formatBadgeCount.ts` | Truncates numbers > 99 to `"99+"` for badge display                         |
-| `ComponentProps<T>`           | `vueUtils.ts`         | Extracts props type from a Vue component                                    |
-| `ComponentSlots<T>`           | `vueUtils.ts`         | Extracts slots type from a Vue component                                    |
-| `ComponentEmit<T>`            | `vueUtils.ts`         | Extracts emit type from a Vue component                                     |
+| Export                        | Module                | Description                                                                  |
+| ----------------------------- | --------------------- | ---------------------------------------------------------------------------- |
+| `isImage(name)`               | `assets.ts`           | Returns `true` if the file extension is an image (png, jpg, jpeg, svg, gif)  |
+| `readableSize(bytes)`         | `assets.ts`           | Formats byte count as human-readable string (e.g., `"1.5 MB"`)               |
+| `getExtensionColor(name)`     | `assets.ts`           | Returns a CSS color for the file type, falling back to `var(--neutrals-400)` |
+| `getExtensionLabel(name)`     | `assets.ts`           | Returns the uppercased file extension, or `"FILE"` when unknown              |
+| `convertColorNameToHex(name)` | `colorUtils.ts`       | Converts a CSS color name to hex using the Canvas API                        |
+| `isValidHexColor(value)`      | `colorUtils.ts`       | Validates a 6-digit hex color string                                         |
+| `normalizeHexColor(hex)`      | `colorUtils.ts`       | Ensures hex string starts with `#`                                           |
+| `formatBadgeCount(value)`     | `formatBadgeCount.ts` | Truncates numbers > 99 to `"99+"` for badge display                          |
 
 ## Usage
 
 ### Asset helpers
 
 ```typescript
-import { isImage, getFileThumbnail, readableSize } from "@vc-shell/framework";
+import { isImage, readableSize, getExtensionColor, getExtensionLabel } from "@vc-shell/framework";
 
 isImage("photo.jpg"); // true
 isImage("document.pdf"); // false
 
-getFileThumbnail("report.xlsx"); // "bi-filetype-xls"
-getFileThumbnail("archive.zip"); // "bi-file-zip"
-getFileThumbnail("unknown.abc"); // "bi-file-earmark"
-
 readableSize(1536); // "1.5 KB"
 readableSize(0); // "0 Bytes"
+
+getExtensionColor("report.pdf"); // "#e74c3c"
+getExtensionColor("unknown.abc"); // "var(--neutrals-400)"
+
+getExtensionLabel("report.xlsx"); // "XLSX"
+getExtensionLabel(undefined); // "FILE"
 ```
 
 ### Color utilities
@@ -71,23 +71,14 @@ formatBadgeCount(150); // "99+"
 formatBadgeCount(undefined); // undefined
 ```
 
-### Vue type utilities
-
-```typescript
-import type { ComponentProps, ComponentSlots } from "@vc-shell/framework";
-
-type MyProps = ComponentProps<typeof MyComponent>;
-type MySlots = ComponentSlots<typeof MyComponent>;
-```
-
 ## Tips
 
 - `convertColorNameToHex` creates a temporary Canvas element -- only use in browser context, not SSR.
 - `readableSize` defaults to 2 decimal places; pass a second argument to change precision.
 - `formatBadgeCount` is used by `VcWidget` and `WidgetDropdownItem` for consistent badge truncation.
-- The `vueUtils.ts` types work with both `defineComponent` and `<script setup>` components.
+- `getExtensionColor` / `getExtensionLabel` back the non-image file badges in assets-manager and assets-details.
 
 ## Related
 
-- `framework/shared/modules/assets-manager/` -- uses asset helpers for file display
-- `framework/ui/components/organisms/vc-table/components/` -- VcWidget uses `formatBadgeCount`
+- `framework/modules/assets-manager/` -- uses asset helpers for file display
+- `framework/ui/components/atoms/vc-widget/` -- VcWidget uses `formatBadgeCount`

package/runtime/knowledge/docs/core/utilities/thumbnail/thumbnail.docs.md

@@ -42,7 +42,7 @@ Transforms full-size image URLs into thumbnail variants by appending size suffix
 Transforms an image URL by inserting a size suffix before the file extension.
 
 ```ts
-import { getThumbnailUrl } from "@core/utilities/thumbnail";
+import { getThumbnailUrl } from "@vc-shell/framework";
 
 getThumbnailUrl("https://cdn.example.com/photo.jpg", "sm");
 // → "https://cdn.example.com/photo_sm.jpg"
@@ -69,7 +69,7 @@ getThumbnailUrl(undefined, "sm");
 Maps a CSS pixel display size to the best-fit thumbnail preset. Picks the smallest thumbnail that is >= the display size.
 
 ```ts
-import { getBestThumbnailSize } from "@core/utilities/thumbnail";
+import { getBestThumbnailSize } from "@vc-shell/framework";
 
 getBestThumbnailSize(48); // → "64x64"
 getBestThumbnailSize(96); // → "128x128"

package/runtime/knowledge/docs/core/utilities/utilities.docs.md

@@ -31,7 +31,8 @@ camelToSnake("myPropName"); // "my_prop_name"
 camelToSnake("backgroundColor"); // "background_color"
 
 camelize("some-prop-name"); // "somePropName"
-camelize("SOME_CONSTANT"); // "sOMECONSTANT" (splits on non-word chars)
+camelize("some prop.name"); // "somePropName" (splits on non-word chars)
+camelize("SOME_CONSTANT"); // "SOME_CONSTANT" (unchanged: underscore is a word char)
 
 kebabToCamel("vc-data-table"); // "vcDataTable"
 kebabToCamel("my-component-name"); // "myComponentName"
@@ -65,9 +66,9 @@ formatDateRelative(new Date(Date.now() - 3600000)); // "about 1 hour ago"
 formatDateRelative("2024-01-15", "de"); // "vor etwa 2 Jahren"
 
 // Formatted dates using Moment.js-style patterns (auto-converted to date-fns)
-formatDateWithPattern("2024-01-15", "LL"); // "January 15, 2024"
+formatDateWithPattern("2024-01-15", "LL"); // "Jan 15, 2024"
 formatDateWithPattern("2024-06-01", "DD/MM/YYYY"); // "01/06/2024"
-formatDateWithPattern("2024-01-15", "LL", "de"); // "15. Januar 2024"
+formatDateWithPattern("2024-01-15", "LL", "de"); // "15. Jan. 2024"
 
 // Format conversion
 convertMomentFormat("YYYY-MM-DD"); // "yyyy-MM-dd"
@@ -118,7 +119,7 @@ if (isFrameworkError(err)) {
   console.log(err.code); // e.g. "INJECTION_ERROR"
 }
 
-throw new InjectionError("WidgetService"); // "WidgetService is not provided. ..."
+throw new InjectionError("WidgetService"); // "WidgetService not provided. Make sure to call the corresponding 'provide' function."
 ```
 
 ## ID Generation
@@ -151,11 +152,11 @@ Factory-based logger with level filtering. Default level: `debug` in dev, `warn`
 import { createLogger, loggers } from "@vc-shell/framework";
 
 const log = createLogger("OrdersModule");
-log.info("Module initialized"); // [OrdersModule] Module initialized
-log.error("Failed to load orders", error); // [OrdersModule] Failed to load orders Error: ...
+log.info("Module initialized"); // [@vc-shell/framework#OrdersModule] Module initialized
+log.error("Failed to load orders", error); // [@vc-shell/framework#OrdersModule] Failed to load orders Error: ...
 
 const subLog = log.child("DataSync");
-subLog.debug("Syncing 50 records"); // [OrdersModule:DataSync] Syncing 50 records
+subLog.debug("Syncing 50 records"); // [@vc-shell/framework#OrdersModule:DataSync] Syncing 50 records
 
 log.setLevel("error"); // Only errors will be logged
 ```
@@ -186,4 +187,4 @@ convertMomentFormat("X"); // May not convert as expected
 
 - `framework/core/plugins/global-error-handler/` -- uses `parseError()` for global error catching
 - `framework/core/plugins/i18n/` -- date formatting respects the active locale
-- `framework/core/constants/` -- `UI_CONSTANTS.DEBOUNCE_DEFAULT_MS` for standard delays
+- `framework/core/constants/` -- `COMPONENT_DEFAULTS` (from `@core/constants/defaults`) holds standard delays (e.g. `select.debounce` 500, `input.debounce` 0)

package/runtime/knowledge/docs/injection-keys.docs.md

@@ -13,7 +13,7 @@ Centralized Vue `InjectionKey` symbols for the vc-shell framework's provide/inje
 
 The vc-shell framework uses Vue's provide/inject mechanism extensively to share services, navigation state, and configuration across the component tree. Instead of relying on global singletons or Pinia stores, the framework creates typed injection keys for each service, allowing components to declare their dependencies explicitly.
 
-All keys are defined in a single file (`framework/injection-keys.ts`) to avoid symbol duplication and ensure type safety. The app shell provides these values at the root during bootstrap; components and composables inject them using the corresponding key.
+Most keys live in `framework/injection-keys.ts` to avoid symbol duplication and ensure type safety; a few blade-stack keys such as `BladeDescriptorKey` are declared in `core/blade-navigation/types` and re-exported from there. The app shell provides these values at the root during bootstrap; components and composables inject them using the corresponding key.
 
 This centralized approach has several advantages:
 
@@ -34,6 +34,8 @@ This centralized approach has several advantages:
 | `BladeContextKey`    | `ComputedRef<Record<string, unknown>>` | Blade-exposed context for widgets/extensions |
 | `BladeRoutesKey`     | `BladeRoutesRecord[]`                  | Registered blade routes                      |
 | `InternalRoutesKey`  | `BladeRoutesRecord[]`                  | Internal framework routes                    |
+| `BladeFormKey`       | `BladeFormInjection`                   | Blade form context shared with child fields  |
+| `BladeLoadingKey`    | `Ref<boolean>`                         | Blade loading (skeleton) state for children  |
 
 ### Notifications
 
@@ -75,6 +77,8 @@ This centralized approach has several advantages:
 
 ### Breakpoints
 
+> **Deprecated.** All five breakpoint keys below are deprecated in favor of the `useResponsive()` composable. Prefer `useResponsive()` over injecting these keys directly.
+
 | Key            | Type           | Description            |
 | -------------- | -------------- | ---------------------- |
 | `IsMobileKey`  | `Ref<boolean>` | Mobile breakpoint      |
@@ -85,15 +89,6 @@ This centralized approach has several advantages:
 
 <!-- internal:start -->
 
-### Legacy Aliases (Deprecated)
-
-| Deprecated          | Use Instead          |
-| ------------------- | -------------------- |
-| `BladeDescriptor`   | `BladeDescriptorKey` |
-| `BLADE_BACK_BUTTON` | `BladeBackButtonKey` |
-| `TOOLBAR_SERVICE`   | `ToolbarServiceKey`  |
-| `EMBEDDED_MODE`     | `EmbeddedModeKey`    |
-
 ### Removed Keys (No Replacement)
 
 These keys existed in v1.2.3 but have been removed from the framework entirely. There is no drop-in symbol replacement.
@@ -194,5 +189,5 @@ const service = inject(MenuServiceKey); // MenuService instance
 
 - `framework/core/services/` -- Service implementations provided via these keys
 - `framework/core/notifications/store.ts` -- NotificationStore provided via `NotificationStoreKey`
-- `framework/shared/components/blade-navigation/types.ts` -- Blade types for navigation keys
+- `framework/core/blade-navigation/types/` -- Blade types for navigation keys
 - `framework/core/composables/` -- Composable wrappers for most injection keys

package/runtime/knowledge/docs/modules/assets/assets-details.docs.md

@@ -28,13 +28,13 @@ import { AssetsDetailsModule } from "@vc-shell/framework";
 
 The blade reads its configuration from `options` via `useBlade<AssetsDetailsOptions>()` (not props):
 
-| Option               | Type                                          | Description                                                                                                                                   |
-| -------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `asset`              | `AssetLike`                                   | The asset to edit. The blade clones it into local state — the source object is never mutated until `assetEditHandler` is called.              |
-| `disabled`           | `boolean?`                                    | When true, every input is read-only and the toolbar Save/Delete buttons are disabled.                                                         |
-| `hiddenFields`       | `string[]?`                                   | Field names to hide. Supported values: `"name"`, `"altText"`, `"description"`. The header (preview, size, created date, URL) is always shown. |
-| `assetEditHandler`   | `(asset: AssetLike) => void \| Promise<void>` | Called by the toolbar Save button with the edited copy. The blade closes itself after the handler resolves.                                   |
-| `assetRemoveHandler` | `(asset: AssetLike) => Promise<void>`         | Called by the toolbar Delete button. The blade closes itself after the handler resolves.                                                      |
+| Option               | Type                                     | Description                                                                                                                                                                              |
+| -------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `asset`              | `AssetLike`                              | The asset to edit. The blade clones it into local state — the source object is never mutated until `assetEditHandler` is called.                                                         |
+| `disabled`           | `boolean?`                               | When true, every input is read-only and the toolbar Save/Delete buttons are disabled.                                                                                                    |
+| `hiddenFields`       | `string[]?`                              | Field names to hide. Supported values: `"name"`, `"altText"`, `"description"`. The header (preview, size, created date, URL) is always shown.                                            |
+| `assetEditHandler`   | `((asset: AssetLike) => void)?`          | Called by the toolbar Save button with the edited copy. The blade closes itself after the handler resolves. If omitted, the Save button performs no action and the blade does not close. |
+| `assetRemoveHandler` | `((asset: AssetLike) => Promise<void>)?` | Called by the toolbar Delete button. The blade closes itself after the handler resolves. If omitted, the Delete button performs no action and the blade does not close.                  |
 
 ## Usage
 

package/runtime/knowledge/docs/modules/assets-manager/assets-manager.docs.md

@@ -22,7 +22,7 @@ import { AssetsManagerModule } from "@vc-shell/framework";
 // Exposes: AssetsManager blade component
 ```
 
-The module exports `AssetsManagerModule` (a Vue plugin) and the `AssetsManager` component, which is declared as a global component.
+The module exports `AssetsManagerModule` (a Vue plugin) which registers the `AssetsManager` blade in the blade registry. It is opened by name via `openBlade({ name: "AssetsManager" })`, not used as a global `<AssetsManager>` tag.
 
 ## Options (via `useBlade`)
 

package/runtime/knowledge/docs/shell/_internal/popup/common/popup-common.docs.md

@@ -19,18 +19,18 @@ These components provide ready-to-use modal dialogs for common scenarios. Each v
 
 The foundation component. Wraps `VcPopup` and adds footer action buttons based on the `mode`.
 
-| Prop                 | Type                         | Default         | Description                                                    |
-| -------------------- | ---------------------------- | --------------- | -------------------------------------------------------------- |
-| `title`              | `string`                     | --              | Dialog title                                                   |
-| `variant`            | `PopupVariant`               | `"default"`     | Visual style: `"default"`, `"warning"`, `"error"`, `"info"`    |
-| `mode`               | `"acknowledge" \| "confirm"` | `"acknowledge"` | `acknowledge` = single OK button; `confirm` = Confirm + Cancel |
-| `actionLabel`        | `string`                     | `""`            | Label for the single button in acknowledge mode                |
-| `confirmLabel`       | `string`                     | `""`            | Label for the confirm button                                   |
-| `cancelLabel`        | `string`                     | `""`            | Label for the cancel button                                    |
-| `confirmAsText`      | `boolean`                    | `false`         | Render confirm button as text-only style                       |
-| `closable`           | `boolean`                    | `true`          | Show close (X) button in the header                            |
-| `isMobileFullscreen` | `boolean`                    | `true`          | Expand to fullscreen on mobile                                 |
-| `closeOnConfirm`     | `boolean`                    | `false`         | Auto-close the popup after confirm is emitted                  |
+| Prop                 | Type                         | Default         | Description                                                              |
+| -------------------- | ---------------------------- | --------------- | ------------------------------------------------------------------------ |
+| `title`              | `string`                     | --              | Dialog title                                                             |
+| `variant`            | `PopupVariant`               | `"default"`     | Visual style: `"default"`, `"warning"`, `"error"`, `"success"`, `"info"` |
+| `mode`               | `"acknowledge" \| "confirm"` | `"acknowledge"` | `acknowledge` = single OK button; `confirm` = Confirm + Cancel           |
+| `actionLabel`        | `string`                     | `""`            | Label for the single button in acknowledge mode                          |
+| `confirmLabel`       | `string`                     | `""`            | Label for the confirm button                                             |
+| `cancelLabel`        | `string`                     | `""`            | Label for the cancel button                                              |
+| `confirmAsText`      | `boolean`                    | `false`         | Render confirm button as text-only style                                 |
+| `closable`           | `boolean`                    | `true`          | Show close (X) button in the header                                      |
+| `isMobileFullscreen` | `boolean`                    | `true`          | Expand to fullscreen on mobile                                           |
+| `closeOnConfirm`     | `boolean`                    | `false`         | Auto-close the popup after confirm is emitted                            |
 
 Events: `close`, `confirm`
 
@@ -118,6 +118,14 @@ Slots: `header`, `default`
 - All popups are fullscreen on mobile by default. Set `isMobileFullscreen="false"` to keep the centered dialog style.
 - Button labels default to i18n keys: `COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM`, `.CANCEL`, `.OK`.
 
+## CSS Variables
+
+| Variable                     | Default                | Description               |
+| ---------------------------- | ---------------------- | ------------------------- |
+| `--popup-base-confirm-color` | `var(--secondary-700)` | Confirm-button text color |
+
+The deprecated `--confirm-button-color` alias is still honored as a fallback: `--popup-base-confirm-color: var(--confirm-button-color, var(--secondary-700))`. Prefer `--popup-base-confirm-color`.
+
 ## Related
 
 - `framework/ui/components/organisms/vc-popup/` -- the underlying `VcPopup` organism

package/runtime/knowledge/docs/shell/auth/ChangePasswordPage/change-password-page.docs.md

@@ -19,12 +19,12 @@ Change password page with current, new, and confirm password fields. Supports a
 
 ```vue
 <template>
-  <ChangePassword />
+  <ChangePasswordPage />
 </template>
 
 <!-- Forced mode (expired password) -->
 <template>
-  <ChangePassword forced />
+  <ChangePasswordPage forced />
 </template>
 ```
 
@@ -32,7 +32,7 @@ With custom branding:
 
 ```vue
 <template>
-  <ChangePassword
+  <ChangePasswordPage
     forced
     logo="/assets/my-company-logo.svg"
     background="/assets/custom-background.jpg"
@@ -42,24 +42,24 @@ With custom branding:
 
 ## Key Props
 
-| Prop         | Type      | Default | Description                                          |
-| ------------ | --------- | ------- | ---------------------------------------------------- |
-| `forced`     | `boolean` | `false` | Show expired-password info banner and adjusted title |
-| `logo`       | `string`  | -       | Override logo image URL                              |
-| `background` | `string`  | -       | Custom background image URL                          |
+| Prop         | Type      | Default | Description                                                                  |
+| ------------ | --------- | ------- | ---------------------------------------------------------------------------- |
+| `forced`     | `boolean` | `false` | Show expired-password info banner and adjusted title                         |
+| `logo`       | `string`  | -       | Fallback logo image URL (used when the platform UI-settings logo is not set) |
+| `background` | `string`  | -       | Custom background image URL                                                  |
 
 ## Recipe: Router Configuration with Forced Mode
 
 Set up the route so the login page can redirect here when the password is expired:
 
 ```ts
-import ChangePassword from "@vc-shell/framework/shared/pages/ChangePasswordPage";
+import { ChangePasswordPage } from "@vc-shell/framework";
 
 const routes = [
   {
     path: "/change-password",
     name: "ChangePassword",
-    component: ChangePassword,
+    component: ChangePasswordPage,
     props: (route) => ({
       forced: route.query.forced === "true",
     }),

package/runtime/knowledge/docs/shell/auth/ForgotPasswordPage/forgot-password-page.docs.md

@@ -38,11 +38,11 @@ With custom branding:
 
 ## Key Props
 
-| Prop         | Type                       | Default | Description                                        |
-| ------------ | -------------------------- | ------- | -------------------------------------------------- |
-| `logo`       | `string`                   | -       | Override logo image URL                            |
-| `background` | `string`                   | -       | Custom background image URL                        |
-| `composable` | `() => { forgotPassword }` | -       | Custom composable providing `forgotPassword(args)` |
+| Prop         | Type                       | Default | Description                                                                  |
+| ------------ | -------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `logo`       | `string`                   | -       | Fallback logo image URL (used when the platform UI-settings logo is not set) |
+| `background` | `string`                   | -       | Custom background image URL                                                  |
+| `composable` | `() => { forgotPassword }` | -       | Custom composable providing `forgotPassword(args)`                           |
 
 ## Recipe: Custom Reset Flow with a Different API
 
@@ -73,7 +73,7 @@ export function useCustomPasswordReset() {
 Register the page in your application router:
 
 ```ts
-import ForgotPassword from "@vc-shell/framework/shared/pages/ForgotPasswordPage";
+import { ForgotPassword } from "@vc-shell/framework";
 
 const routes = [
   {