@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.34

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

@@ -13,25 +13,25 @@ Every service follows the same architecture:
 
 ### Internal Building Blocks (`_internal/`)
 
-| Helper | Purpose |
-|---|---|
-| `createPreregistrationBus` | Generic bus that stores items by key and replays them into a service. Supports live-register (after service is up) and broadcast. |
-| `createBladeScopedRegistry` | Reactive `Map<bladeId, Item[]>` with register/unregister/update/clear. Used by WidgetService and ToolbarService. |
-| `createSimpleMapRegistry` | Reactive `Map<id, Item>` with sorted computed output. Used by SettingsMenuService and AppBarMenuService. |
+| Helper                      | Purpose                                                                                                                           |
+| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `createPreregistrationBus`  | Generic bus that stores items by key and replays them into a service. Supports live-register (after service is up) and broadcast. |
+| `createBladeScopedRegistry` | Reactive `Map<bladeId, Item[]>` with register/unregister/update/clear. Used by WidgetService and ToolbarService.                  |
+| `createSimpleMapRegistry`   | Reactive `Map<id, Item>` with sorted computed output. Used by SettingsMenuService and AppBarMenuService.                          |
 
 ## 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()` | `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         |
 
 ## Usage
 
@@ -48,10 +48,7 @@ addMenuItem({
   priority: 10,
 });
 
-registerWidget(
-  { id: "order-stats", component: OrderStatsWidget },
-  "OrderDetails",
-);
+registerWidget({ id: "order-stats", component: OrderStatsWidget }, "OrderDetails");
 ```
 
 ### Using inside a component
@@ -59,8 +56,8 @@ registerWidget(
 ```typescript
 import { useMenu, useToolbar } from "@vc-shell/framework";
 
-const { menuItems } = useMenu();           // reactive menu tree
-const { toolbarItems } = useToolbar();     // toolbar items for current blade
+const { menuItems } = useMenu(); // reactive menu tree
+const { toolbarItems } = useToolbar(); // toolbar items for current blade
 ```
 
 ### Menu badges

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

@@ -14,66 +14,66 @@ All types are re-exported from `@vc-shell/framework`, so module developers impor
 
 ### Validation
 
-| Type | Description |
-|------|-------------|
+| Type               | Description                                                                                                                                                                                 |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `IValidationRules` | Validation rule map for form fields. Supports `required`, `email`, `min`, `max`, `regex`, `between`, `confirmed`, `ext`, `mimes`, `dimensions`, `before`/`after` date comparison, and more. |
 
 ### 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`, `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`.              |
 
 ### 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`. |
+| `ToolbarMenu<T>` | Generic toolbar menu item that infers component props from the provided component type.                            |
 
 ### 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, 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 }`.                                                                                                                                    |
 
 ### Assets
 
-| Type | Description |
-|------|-------------|
-| `ICommonAsset` | Asset record: `url`, `relativeUrl`, `title`, `name`, `size`, `sortOrder`, `typeId`, dates. |
+| Type               | Description                                                                                |
+| ------------------ | ------------------------------------------------------------------------------------------ |
+| `ICommonAsset`     | Asset record: `url`, `relativeUrl`, `title`, `name`, `size`, `sortOrder`, `typeId`, dates. |
 | `AssetsHandler<T>` | Asset operations: `upload()`, `edit()`, `remove()`, `loading` ref, `noRemoveConfirmation`. |
 
 ### 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`, `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.                                               |
+| `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`.                                     |
 
 ## Usage Examples
 

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

@@ -8,13 +8,13 @@ The framework migrated from Moment.js to `date-fns`. These utilities handle the
 
 ## Exports
 
-| Export | Description |
-|---|---|
-| `formatDateRelative` | Formats a date as relative time (e.g., "3 hours ago", "2 days ago") |
-| `formatDateWithPattern` | Formats a date using a Moment.js-compatible format string |
-| `convertMomentFormat` | Converts a Moment.js format string to date-fns format |
-| `resolveLocale` | Async: loads and caches a date-fns locale by code (e.g., "fr", "de") |
-| `resolveLocaleSync` | Sync: returns cached locale or falls back to `enUS` while loading |
+| Export                  | Description                                                          |
+| ----------------------- | -------------------------------------------------------------------- |
+| `formatDateRelative`    | Formats a date as relative time (e.g., "3 hours ago", "2 days ago")  |
+| `formatDateWithPattern` | Formats a date using a Moment.js-compatible format string            |
+| `convertMomentFormat`   | Converts a Moment.js format string to date-fns format                |
+| `resolveLocale`         | Async: loads and caches a date-fns locale by code (e.g., "fr", "de") |
+| `resolveLocaleSync`     | Sync: returns cached locale or falls back to `enUS` while loading    |
 
 ## Usage
 
@@ -48,30 +48,30 @@ formatDateWithPattern("2024-03-15T14:30:00Z", "LLL", "de");
 ```typescript
 import { convertMomentFormat } from "@vc-shell/framework";
 
-convertMomentFormat("YYYY-MM-DD");  // => "yyyy-MM-dd"
-convertMomentFormat("DD/MM/YYYY");  // => "dd/MM/yyyy"
-convertMomentFormat("LLL");         // => "PPp"
-convertMomentFormat("dddd");        // => "EEEE"
+convertMomentFormat("YYYY-MM-DD"); // => "yyyy-MM-dd"
+convertMomentFormat("DD/MM/YYYY"); // => "dd/MM/yyyy"
+convertMomentFormat("LLL"); // => "PPp"
+convertMomentFormat("dddd"); // => "EEEE"
 ```
 
 ### Token mapping reference
 
-| Moment | date-fns | Meaning |
-|--------|----------|---------|
-| `YYYY` | `yyyy` | 4-digit year |
-| `YY` | `yy` | 2-digit year |
-| `DD` | `dd` | Day of month (zero-padded) |
-| `D` | `d` | Day of month |
-| `Do` | `do` | Day ordinal |
-| `dddd` | `EEEE` | Weekday name |
-| `ddd` | `EEE` | Weekday abbreviation |
-| `A` | `a` | AM/PM |
-| `L` | `P` | Localized date |
-| `LL` | `PP` | Localized date (long) |
-| `LLL` | `PPp` | Localized date + time |
-| `LLLL` | `PPPp` | Localized date + time (full) |
-| `LT` | `p` | Localized time |
-| `LTS` | `pp` | Localized time with seconds |
+| Moment | date-fns | Meaning                      |
+| ------ | -------- | ---------------------------- |
+| `YYYY` | `yyyy`   | 4-digit year                 |
+| `YY`   | `yy`     | 2-digit year                 |
+| `DD`   | `dd`     | Day of month (zero-padded)   |
+| `D`    | `d`      | Day of month                 |
+| `Do`   | `do`     | Day ordinal                  |
+| `dddd` | `EEEE`   | Weekday name                 |
+| `ddd`  | `EEE`    | Weekday abbreviation         |
+| `A`    | `a`      | AM/PM                        |
+| `L`    | `P`      | Localized date               |
+| `LL`   | `PP`     | Localized date (long)        |
+| `LLL`  | `PPp`    | Localized date + time        |
+| `LLLL` | `PPPp`   | Localized date + time (full) |
+| `LT`   | `p`      | Localized time               |
+| `LTS`  | `pp`     | Localized time with seconds  |
 
 ### Locale resolution
 

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

@@ -8,18 +8,18 @@ This directory provides small, focused utility modules for asset handling, color
 
 ## 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) |
+| `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                                     |
 
 ## Usage
 
@@ -28,15 +28,15 @@ This directory provides small, focused utility modules for asset handling, color
 ```typescript
 import { isImage, getFileThumbnail, readableSize } from "@vc-shell/framework";
 
-isImage("photo.jpg");           // true
-isImage("document.pdf");        // false
+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"
+readableSize(1536); // "1.5 KB"
+readableSize(0); // "0 Bytes"
 ```
 
 ### Color utilities
@@ -44,14 +44,14 @@ readableSize(0);                // "0 Bytes"
 ```typescript
 import { convertColorNameToHex, isValidHexColor, normalizeHexColor } from "@vc-shell/framework";
 
-convertColorNameToHex("red");     // "#ff0000"
+convertColorNameToHex("red"); // "#ff0000"
 convertColorNameToHex("invalid"); // null
 
-isValidHexColor("#ff0000");       // true
-isValidHexColor("ff0000");        // true (checks with/without #)
-isValidHexColor("#fff");          // false (only 6-digit supported)
+isValidHexColor("#ff0000"); // true
+isValidHexColor("ff0000"); // true (checks with/without #)
+isValidHexColor("#fff"); // false (only 6-digit supported)
 
-normalizeHexColor("ff0000");      // "#ff0000"
+normalizeHexColor("ff0000"); // "#ff0000"
 ```
 
 ### Badge formatting
@@ -59,8 +59,8 @@ normalizeHexColor("ff0000");      // "#ff0000"
 ```typescript
 import { formatBadgeCount } from "@vc-shell/framework";
 
-formatBadgeCount(5);         // "5"
-formatBadgeCount(150);       // "99+"
+formatBadgeCount(5); // "5"
+formatBadgeCount(150); // "99+"
 formatBadgeCount(undefined); // undefined
 ```
 

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

@@ -12,21 +12,21 @@ Transforms full-size image URLs into thumbnail variants by appending size suffix
 
 ### Named Presets
 
-| Preset | Use Case |
-|--------|----------|
-| `sm` | Small icons, table cells, avatar thumbnails |
-| `md` | Medium previews, cards |
-| `lg` | Large previews, hero images |
+| Preset | Use Case                                    |
+| ------ | ------------------------------------------- |
+| `sm`   | Small icons, table cells, avatar thumbnails |
+| `md`   | Medium previews, cards                      |
+| `lg`   | Large previews, hero images                 |
 
 ### Pixel Sizes
 
-| Size | Pixels | Use Case |
-|------|--------|----------|
-| `64x64` | 64px | Table cells, tiny thumbnails |
-| `128x128` | 128px | Small tiles, list items |
-| `168x168` | 168px | Medium tiles |
-| `216x216` | 216px | Gallery tiles (md) |
-| `348x348` | 348px | Large gallery tiles |
+| Size      | Pixels | Use Case                     |
+| --------- | ------ | ---------------------------- |
+| `64x64`   | 64px   | Table cells, tiny thumbnails |
+| `128x128` | 128px  | Small tiles, list items      |
+| `168x168` | 168px  | Medium tiles                 |
+| `216x216` | 216px  | Gallery tiles (md)           |
+| `348x348` | 348px  | Large gallery tiles          |
 
 ## API
 
@@ -37,20 +37,21 @@ Transforms an image URL by inserting a size suffix before the file extension.
 ```ts
 import { getThumbnailUrl } from "@core/utilities/thumbnail";
 
-getThumbnailUrl("https://cdn.example.com/photo.jpg", "sm")
+getThumbnailUrl("https://cdn.example.com/photo.jpg", "sm");
 // → "https://cdn.example.com/photo_sm.jpg"
 
-getThumbnailUrl("https://cdn.example.com/photo.jpg", "128x128")
+getThumbnailUrl("https://cdn.example.com/photo.jpg", "128x128");
 // → "https://cdn.example.com/photo_128x128.jpg"
 
-getThumbnailUrl("https://cdn.example.com/photo.jpg")
+getThumbnailUrl("https://cdn.example.com/photo.jpg");
 // → "https://cdn.example.com/photo.jpg" (unchanged)
 
-getThumbnailUrl(undefined, "sm")
+getThumbnailUrl(undefined, "sm");
 // → undefined
 ```
 
 **Parameters:**
+
 - `url` — Original image URL (string or undefined)
 - `size` — Thumbnail size preset or pixel dimensions (optional)
 
@@ -63,10 +64,10 @@ Maps a CSS pixel display size to the best-fit thumbnail preset. Picks the smalle
 ```ts
 import { getBestThumbnailSize } from "@core/utilities/thumbnail";
 
-getBestThumbnailSize(48)   // → "64x64"
-getBestThumbnailSize(96)   // → "128x128"
-getBestThumbnailSize(200)  // → "216x216"
-getBestThumbnailSize(500)  // → "lg"
+getBestThumbnailSize(48); // → "64x64"
+getBestThumbnailSize(96); // → "128x128"
+getBestThumbnailSize(200); // → "216x216"
+getBestThumbnailSize(500); // → "lg"
 ```
 
 ## Usage in Components
@@ -74,11 +75,7 @@ getBestThumbnailSize(500)  // → "lg"
 ### VcImage
 
 ```vue
-<VcImage
-  :src="product.imgSrc"
-  thumbnail-size="sm"
-  size="s"
-/>
+<VcImage :src="product.imgSrc" thumbnail-size="sm" size="s" />
 ```
 
 ### VcGallery