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

package/runtime/knowledge/docs/core/plugins/extension-points/extension-points.docs.md

@@ -50,7 +50,11 @@ This is how vc-shell achieves its modular architecture: modules can extend each
     <form><!-- main form fields --></form>
 
     <!-- Other modules can inject components here -->
-    <ExtensionPoint name="seller:commissions" separator gap="1rem" />
+    <ExtensionPoint
+      name="entity:custom-fields"
+      separator
+      gap="1rem"
+    />
   </VcBlade>
 </template>
 
@@ -62,22 +66,24 @@ import { ExtensionPoint } from "@vc-shell/framework";
 **Plugin module** -- registers a component into that extension point:
 
 ```typescript
-// modules/marketplace-commissions/index.ts
+// modules/entity-extensions/index.ts
 import { defineAppModule, useExtensionPoint } from "@vc-shell/framework";
-import CommissionFields from "./components/CommissionFields.vue";
+import CustomFields from "./components/CustomFields.vue";
 
-const { add } = useExtensionPoint("seller:commissions");
+const { add } = useExtensionPoint("entity:custom-fields");
 add({
-  id: "marketplace-commission",
-  component: CommissionFields,
+  id: "entity-extension",
+  component: CustomFields,
   props: { showAdvanced: true },
   priority: 10,
 });
 
-export default defineAppModule({ /* ... */ });
+export default defineAppModule({
+  /* ... */
+});
 ```
 
-When the seller details page renders, `CommissionFields` appears automatically below the main form -- with a separator and 1rem gap.
+When the seller details page renders, `CustomFields` appears automatically below the main form -- with a separator and 1rem gap.
 
 ---
 
@@ -91,9 +97,9 @@ Extension points follow a two-role architecture:
 HOST (declares)                      PLUGIN (registers)
 -----------------                    ------------------
 "I have a slot called                "I want to put my
- seller:commissions                   CommissionFields
+ entity:custom-fields                   CustomFields
  where plugins can                    component in the
- inject content."                     seller:commissions slot."
+ inject content."                     entity:custom-fields slot."
 
       |                                       |
       v                                       v
@@ -110,8 +116,8 @@ Neither side imports the other. They communicate through a shared **name string*
 
 Plugins can register components **before** the host declares the extension point. The reactive store handles this gracefully:
 
-1. Plugin calls `useExtensionPoint("seller:commissions")` and `add(...)` -- the store creates an undeclared entry and stores the component.
-2. Later, host calls `defineExtensionPoint("seller:commissions")` -- the store upgrades the entry to "declared" and preserves all previously registered components.
+1. Plugin calls `useExtensionPoint("entity:custom-fields")` and `add(...)` -- the store creates an undeclared entry and stores the component.
+2. Later, host calls `defineExtensionPoint("entity:custom-fields")` -- the store upgrades the entry to "declared" and preserves all previously registered components.
 3. The host's `components` computed ref reactively picks up the registered components.
 
 This means module load order does not matter. Remote modules loaded via Module Federation may install in any sequence, and extensions still work.
@@ -125,7 +131,7 @@ Components are sorted by `priority` (ascending). Lower numbers render first:
 ```typescript
 add({ id: "a", component: A, priority: 20 }); // Renders second
 add({ id: "b", component: B, priority: 10 }); // Renders first
-add({ id: "c", component: C });                // priority=0, renders first (tie)
+add({ id: "c", component: C }); // priority=0, renders first (tie)
 ```
 
 Default priority is `0`. Components with the same priority render in registration order.
@@ -159,7 +165,7 @@ Used in pages or components that **accept** plugin content. Declares the extensi
 ```typescript
 import { defineExtensionPoint } from "@vc-shell/framework";
 
-const { components, hasComponents } = defineExtensionPoint("seller:commissions", {
+const { components, hasComponents } = defineExtensionPoint("entity:custom-fields", {
   description: "Commission fee fields in the seller details form",
 });
 
@@ -171,7 +177,10 @@ Use in templates:
 
 ```vue
 <template>
-  <div v-if="hasComponents" class="extensions-area">
+  <div
+    v-if="hasComponents"
+    class="extensions-area"
+  >
     <component
       v-for="ext in components"
       :key="ext.id"
@@ -192,7 +201,7 @@ Used in modules that **provide** content to an extension point. Returns `add` an
 import { useExtensionPoint } from "@vc-shell/framework";
 import MyComponent from "./MyComponent.vue";
 
-const { add, remove } = useExtensionPoint("seller:commissions");
+const { add, remove } = useExtensionPoint("entity:custom-fields");
 
 // Register a component
 add({
@@ -208,10 +217,12 @@ remove("my-unique-id");
 ```
 
 **`add()` behavior:**
+
 - If a component with the same `id` already exists, it is **replaced** (not duplicated).
 - This makes `add()` idempotent -- safe to call multiple times.
 
 **`remove()` behavior:**
+
 - Removes the component by `id`. No-op if not found.
 
 ### ExtensionPoint Component (Declarative)
@@ -220,7 +231,7 @@ The `<ExtensionPoint>` component is the easiest way to render extensions in a te
 
 ```vue
 <template>
-  <ExtensionPoint name="seller:commissions" />
+  <ExtensionPoint name="entity:custom-fields" />
 </template>
 
 <script setup lang="ts">
@@ -230,14 +241,14 @@ import { ExtensionPoint } from "@vc-shell/framework";
 
 **Props:**
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | required | Extension point name |
-| `separator` | `boolean` | `false` | Adds an `<hr>` before components |
-| `separatorClass` | `string` | default style | Custom CSS class for the `<hr>` |
-| `wrapperClass` | `string` | none | CSS class for the wrapper `<div>` |
-| `gap` | `string` | none | CSS gap between components (e.g. `"1rem"`) |
-| `filter` | `Record<string, unknown>` | none | Filter components by `meta` fields |
+| Prop             | Type                      | Default       | Description                                |
+| ---------------- | ------------------------- | ------------- | ------------------------------------------ |
+| `name`           | `string`                  | required      | Extension point name                       |
+| `separator`      | `boolean`                 | `false`       | Adds an `<hr>` before components           |
+| `separatorClass` | `string`                  | default style | Custom CSS class for the `<hr>`            |
+| `wrapperClass`   | `string`                  | none          | CSS class for the wrapper `<div>`          |
+| `gap`            | `string`                  | none          | CSS gap between components (e.g. `"1rem"`) |
+| `filter`         | `Record<string, unknown>` | none          | Filter components by `meta` fields         |
 
 **Rendering modes:**
 
@@ -249,15 +260,10 @@ The component has three rendering modes, chosen automatically:
 
 ```vue
 <!-- Layout mode: separator + gap -->
-<ExtensionPoint
-  name="seller:commissions"
-  separator
-  gap="1rem"
-  wrapper-class="tw-p-4"
-/>
+<ExtensionPoint name="entity:custom-fields" separator gap="1rem" wrapper-class="tw-p-4" />
 
 <!-- Plain mode: no wrapper -->
-<ExtensionPoint name="seller:commissions" />
+<ExtensionPoint name="entity:custom-fields" />
 ```
 
 ### Scoped Slots for Custom Rendering
@@ -266,8 +272,14 @@ When you need full control over how extensions are rendered, use the scoped slot
 
 ```vue
 <template>
-  <ExtensionPoint name="order:actions" v-slot="{ components, hasComponents }">
-    <div v-if="hasComponents" class="action-bar tw-flex tw-gap-2">
+  <ExtensionPoint
+    name="order:actions"
+    v-slot="{ components, hasComponents }"
+  >
+    <div
+      v-if="hasComponents"
+      class="action-bar tw-flex tw-gap-2"
+    >
       <component
         v-for="ext in components"
         :key="ext.id"
@@ -281,10 +293,10 @@ When you need full control over how extensions are rendered, use the scoped slot
 
 The scoped slot receives:
 
-| Slot prop | Type | Description |
-|-----------|------|-------------|
-| `components` | `ExtensionComponent[]` | Sorted, filtered list |
-| `hasComponents` | `boolean` | Whether the list is non-empty |
+| Slot prop       | Type                   | Description                   |
+| --------------- | ---------------------- | ----------------------------- |
+| `components`    | `ExtensionComponent[]` | Sorted, filtered list         |
+| `hasComponents` | `boolean`              | Whether the list is non-empty |
 
 ### Metadata Filtering
 
@@ -293,8 +305,8 @@ The `<ExtensionPoint>` component supports filtering by metadata fields. Only com
 ```typescript
 // Plugin registers two components with different meta
 const { add } = useExtensionPoint("order:details");
-add({ id: "info-panel",  component: InfoPanel,  meta: { type: "info" } });
-add({ id: "action-btn",  component: ActionBtn,  meta: { type: "action" } });
+add({ id: "info-panel", component: InfoPanel, meta: { type: "info" } });
+add({ id: "action-btn", component: ActionBtn, meta: { type: "action" } });
 ```
 
 ```vue
@@ -318,11 +330,11 @@ const { add } = useExtensionPoint(ExtensionPoints.AUTH_AFTER_FORM);
 
 Currently defined constants:
 
-| Constant | Value | Location |
-|----------|-------|----------|
+| Constant                          | Value               | Location                           |
+| --------------------------------- | ------------------- | ---------------------------------- |
 | `ExtensionPoints.AUTH_AFTER_FORM` | `"auth:after-form"` | Login page, below the sign-in form |
 
-App-level extension point names (e.g., `"seller:commissions"`) are the app's responsibility to define. Consider creating a shared constants file in your application.
+App-level extension point names (e.g., `"entity:custom-fields"`) are the app's responsibility to define. Consider creating a shared constants file in your application.
 
 ---
 
@@ -344,7 +356,7 @@ Scenario: You want to add commission fee fields to the Seller Details page, whic
 
     <ExtensionPoint
       v-if="sellerDetails?.id"
-      name="seller:commissions"
+      name="entity:custom-fields"
       wrapper-class="tw-p-2"
     />
   </VcBlade>
@@ -356,13 +368,13 @@ Scenario: You want to add commission fee fields to the Seller Details page, whic
 ```typescript
 // commissions/index.ts
 import { defineAppModule, useExtensionPoint } from "@vc-shell/framework";
-import CommissionFields from "./components/CommissionFields.vue";
+import CustomFields from "./components/CustomFields.vue";
 import en from "./locales/en.json";
 
-const { add } = useExtensionPoint("seller:commissions");
+const { add } = useExtensionPoint("entity:custom-fields");
 add({
   id: "commission-fields",
-  component: CommissionFields,
+  component: CustomFields,
   props: { editable: true },
   priority: 10,
 });
@@ -370,14 +382,18 @@ add({
 export default defineAppModule({ locales: { en } });
 ```
 
-**Step 3:** `CommissionFields.vue` receives props and renders:
+**Step 3:** `CustomFields.vue` receives props and renders:
 
 ```vue
-<!-- commissions/components/CommissionFields.vue -->
+<!-- commissions/components/CustomFields.vue -->
 <template>
   <div class="commission-fields">
     <h3>{{ $t("COMMISSIONS.TITLE") }}</h3>
-    <VcInput v-if="editable" v-model="rate" label="Commission Rate (%)" />
+    <VcInput
+      v-if="editable"
+      v-model="rate"
+      label="Commission Rate (%)"
+    />
     <span v-else>{{ rate }}%</span>
   </div>
 </template>
@@ -433,14 +449,14 @@ The host renders them in order: ShippingInfo, PaymentInfo, OrderNotes.
 If you call `add()` with an `id` that already exists, the component is replaced:
 
 ```typescript
-const { add } = useExtensionPoint("seller:commissions");
+const { add } = useExtensionPoint("entity:custom-fields");
 
 // Original registration (e.g., from another module or earlier in the code)
-add({ id: "commission-fields", component: OldCommissionFields, priority: 10 });
+add({ id: "commission-fields", component: OldCustomFields, priority: 10 });
 
 // Override with a new component (same id)
-add({ id: "commission-fields", component: NewCommissionFields, priority: 10 });
-// Only NewCommissionFields is rendered
+add({ id: "commission-fields", component: NewCustomFields, priority: 10 });
+// Only NewCustomFields is rendered
 ```
 
 This is useful for overriding default behavior provided by a base module.
@@ -452,9 +468,9 @@ Use metadata to categorize extensions and filter them in different locations:
 ```typescript
 // Plugin registers multiple components with different categories
 const { add } = useExtensionPoint("product:details");
-add({ id: "specs-tab",     component: SpecsTab,     meta: { zone: "tabs" }, priority: 10 });
-add({ id: "review-tab",    component: ReviewTab,     meta: { zone: "tabs" }, priority: 20 });
-add({ id: "quick-action",  component: QuickAction,   meta: { zone: "toolbar" } });
+add({ id: "specs-tab", component: SpecsTab, meta: { zone: "tabs" }, priority: 10 });
+add({ id: "review-tab", component: ReviewTab, meta: { zone: "tabs" }, priority: 20 });
+add({ id: "quick-action", component: QuickAction, meta: { zone: "toolbar" } });
 ```
 
 ```vue
@@ -462,11 +478,17 @@ add({ id: "quick-action",  component: QuickAction,   meta: { zone: "toolbar" } }
 <template>
   <VcBlade title="Product Details">
     <div class="toolbar">
-      <ExtensionPoint name="product:details" :filter="{ zone: 'toolbar' }" />
+      <ExtensionPoint
+        name="product:details"
+        :filter="{ zone: 'toolbar' }"
+      />
     </div>
 
     <div class="tabs">
-      <ExtensionPoint name="product:details" :filter="{ zone: 'tabs' }" />
+      <ExtensionPoint
+        name="product:details"
+        :filter="{ zone: 'tabs' }"
+      />
     </div>
   </VcBlade>
 </template>
@@ -482,16 +504,17 @@ add({ id: "quick-action",  component: QuickAction,   meta: { zone: "toolbar" } }
 // WRONG -- typo: "seller:comissions" (single 'm')
 const { add } = useExtensionPoint("seller:comissions");
 add({ id: "my-fields", component: MyFields });
-// Component is registered but never rendered because the host declared "seller:commissions"
+// Component is registered but never rendered because the host declared "entity:custom-fields"
 ```
 
 The dev-mode console warning (`Extension point "seller:comissions" is not declared`) will alert you to this. Always check the console in development.
 
 > **Tip:** Define constants for your extension point names in a shared file:
+>
 > ```typescript
 > // shared/extension-points.ts
 > export const EP = {
->   SELLER_COMMISSIONS: "seller:commissions",
+>   ENTITY_CUSTOM_FIELDS: "entity:custom-fields",
 >   ORDER_SIDEBAR: "order:sidebar",
 > } as const;
 > ```
@@ -501,7 +524,7 @@ The dev-mode console warning (`Extension point "seller:comissions" is not declar
 ```vue
 <!-- WRONG -- ExtensionPoint is not imported -->
 <template>
-  <ExtensionPoint name="seller:commissions" />
+  <ExtensionPoint name="entity:custom-fields" />
 </template>
 
 <script setup lang="ts">
@@ -523,7 +546,7 @@ add({ id: "my-component", component: ComponentB });
 Use globally unique IDs. A good convention is `module-name:component-name`:
 
 ```typescript
-add({ id: "marketplace:commission-fields", component: CommissionFields });
+add({ id: "module:custom-fields", component: CustomFields });
 add({ id: "shipping:delivery-estimate", component: DeliveryEstimate });
 ```
 
@@ -547,10 +570,7 @@ function someUtility() {
 Declares an extension point (host-side). Returns reactive computed refs.
 
 ```typescript
-function defineExtensionPoint<M = Record<string, unknown>>(
-  name: string,
-  options?: ExtensionPointOptions,
-): DefineExtensionPointReturn<M>;
+function defineExtensionPoint<M = Record<string, unknown>>(name: string, options?: ExtensionPointOptions): DefineExtensionPointReturn<M>;
 
 interface DefineExtensionPointReturn<M> {
   /** Sorted list of registered components (by priority, ascending) */
@@ -603,23 +623,20 @@ interface ExtensionComponent {
 
 ### `<ExtensionPoint>` Component
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | required | Extension point name |
-| `separator` | `boolean` | `false` | Adds `<hr>` before components |
-| `separatorClass` | `string` | built-in style | CSS class for the separator |
-| `wrapperClass` | `string` | none | CSS class for the wrapper div |
-| `gap` | `string` | none | CSS gap value (e.g. `"1rem"`) |
-| `filter` | `Record<string, unknown>` | none | Filter by meta field equality |
+| Prop             | Type                      | Default        | Description                   |
+| ---------------- | ------------------------- | -------------- | ----------------------------- |
+| `name`           | `string`                  | required       | Extension point name          |
+| `separator`      | `boolean`                 | `false`        | Adds `<hr>` before components |
+| `separatorClass` | `string`                  | built-in style | CSS class for the separator   |
+| `wrapperClass`   | `string`                  | none           | CSS class for the wrapper div |
+| `gap`            | `string`                  | none           | CSS gap value (e.g. `"1rem"`) |
+| `filter`         | `Record<string, unknown>` | none           | Filter by meta field equality |
 
 **Scoped slot:**
 
 ```typescript
 defineSlots<{
-  default?: (props: {
-    components: ExtensionComponent[];
-    hasComponents: boolean;
-  }) => any;
+  default?: (props: { components: ExtensionComponent[]; hasComponents: boolean }) => any;
 }>();
 ```
 
@@ -641,20 +658,19 @@ type ExtensionPointName = "auth:after-form";
 
 These are used internally by `defineExtensionPoint` and `useExtensionPoint`. You typically do not call them directly, but they are available for testing and dev tools:
 
-| Function | Description |
-|----------|-------------|
-| `declarePoint(name, options)` | Declare a point. No-op if already declared. |
-| `getPoint(name)` | Get reactive state. Creates undeclared entry if missing. |
-| `getRegistry()` | Get the full reactive registry (for dev tools). |
+| Function                      | Description                                              |
+| ----------------------------- | -------------------------------------------------------- |
+| `declarePoint(name, options)` | Declare a point. No-op if already declared.              |
+| `getPoint(name)`              | Get reactive state. Creates undeclared entry if missing. |
+| `getRegistry()`               | Get the full reactive registry (for dev tools).          |
 
 ---
 
 ## Related
 
-| Resource | Path | Description |
-|----------|------|-------------|
-| Modularity Plugin | `core/plugins/modularity/` | Module definition and registration |
-| Extension Point Store | `core/plugins/extension-points/store.ts` | Reactive registry implementation |
-| ExtensionPoint Component | `core/plugins/extension-points/ExtensionPoint.vue` | Declarative render component |
-| Types | `core/plugins/extension-points/types.ts` | `ExtensionComponent`, `ExtensionPointOptions` |
-| Seller Details (usage example) | `apps/vendor-portal/src/modules/seller-details/` | Real-world extension point host |
+| Resource                 | Path                                               | Description                                   |
+| ------------------------ | -------------------------------------------------- | --------------------------------------------- |
+| Modularity Plugin        | `core/plugins/modularity/`                         | Module definition and registration            |
+| Extension Point Store    | `core/plugins/extension-points/store.ts`           | Reactive registry implementation              |
+| ExtensionPoint Component | `core/plugins/extension-points/ExtensionPoint.vue` | Declarative render component                  |
+| Types                    | `core/plugins/extension-points/types.ts`           | `ExtensionComponent`, `ExtensionPointOptions` |

package/runtime/knowledge/docs/core/plugins/global-error-handler/global-error-handler.docs.md

@@ -38,14 +38,14 @@ Module developers do not need to call this function. It is invoked once during t
 
 Installs all error handlers on the given Vue app instance.
 
-| Behavior | Description |
-|----------|-------------|
-| Chains to existing `errorHandler` | Does not replace a previously registered Vue error handler; calls it after processing |
-| Idempotent for window listeners | Uses `__VC_GLOBAL_ERROR_HANDLERS_INSTALLED__` guard to prevent duplicate listeners |
-| Deduplication | Same error (by `name:message` key) is suppressed for 3 seconds |
-| Notification IDs | Each toast gets a unique `notificationId` prefixed by source (`global-vue-`, `global-rejection-`, `global-error-`) |
-| SSR-safe | Skips `window` event listeners when `typeof window === "undefined"` |
-| Map cleanup | The deduplication map auto-prunes entries older than 3 seconds when it exceeds 50 entries |
+| Behavior                          | Description                                                                                                        |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| Chains to existing `errorHandler` | Does not replace a previously registered Vue error handler; calls it after processing                              |
+| Idempotent for window listeners   | Uses `__VC_GLOBAL_ERROR_HANDLERS_INSTALLED__` guard to prevent duplicate listeners                                 |
+| Deduplication                     | Same error (by `name:message` key) is suppressed for 3 seconds                                                     |
+| Notification IDs                  | Each toast gets a unique `notificationId` prefixed by source (`global-vue-`, `global-rejection-`, `global-error-`) |
+| SSR-safe                          | Skips `window` event listeners when `typeof window === "undefined"`                                                |
+| Map cleanup                       | The deduplication map auto-prunes entries older than 3 seconds when it exceeds 50 entries                          |
 
 ## Usage
 
@@ -112,8 +112,8 @@ try {
   await apiClient.updateOrder(order);
 } catch (err) {
   const parsed = parseError(err);
-  console.log(parsed.message);  // Human-readable message
-  console.log(parsed.details);  // Additional details (e.g., validation errors)
+  console.log(parsed.message); // Human-readable message
+  console.log(parsed.details); // Additional details (e.g., validation errors)
 }
 ```
 

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

@@ -32,19 +32,19 @@ The i18n instance is created once and shared as a singleton. Calling `app.use(i1
 
 ### Singleton Export
 
-| Export | Type | Description |
-|--------|------|-------------|
+| Export | Type   | Description                                                     |
+| ------ | ------ | --------------------------------------------------------------- |
 | `i18n` | `I18n` | The shared vue-i18n instance used across the entire application |
 
 ### Configuration (set by framework)
 
-| Option | Value | Description |
-|--------|-------|-------------|
-| `legacy` | `false` | Composition API mode |
-| `globalInjection` | `true` | Enables `$t()` in templates without explicit `useI18n()` |
-| `locale` | `"en"` | Default locale |
-| `fallbackLocale` | `"en"` | Fallback when a key is missing in the active locale |
-| `formatFallbackMessages` | `true` | Uses the message key itself as fallback text |
+| Option                   | Value   | Description                                              |
+| ------------------------ | ------- | -------------------------------------------------------- |
+| `legacy`                 | `false` | Composition API mode                                     |
+| `globalInjection`        | `true`  | Enables `$t()` in templates without explicit `useI18n()` |
+| `locale`                 | `"en"`  | Default locale                                           |
+| `fallbackLocale`         | `"en"`  | Fallback when a key is missing in the active locale      |
+| `formatFallbackMessages` | `true`  | Uses the message key itself as fallback text             |
 
 ## Usage
 
@@ -109,9 +109,7 @@ Thanks to `globalInjection: true`, `$t()` is available in every template without
 ```vue
 <template>
   <VcBlade :title="$t('ORDERS.PAGES.LIST.TITLE')">
-    <VcDataTable
-      :empty-text="$t('ORDERS.PAGES.LIST.EMPTY_STATE')"
-    />
+    <VcDataTable :empty-text="$t('ORDERS.PAGES.LIST.EMPTY_STATE')" />
   </VcBlade>
 </template>
 ```
@@ -188,9 +186,9 @@ The framework exports its locale files as typed ES modules. App developers can i
 ### Importing Framework Locales
 
 ```typescript
-import en from '@vc-shell/framework/locales/en'
-import de from '@vc-shell/framework/locales/de'
-import type { VcShellLocale, VcShellLocalePartial } from '@vc-shell/framework/locales/types'
+import en from "@vc-shell/framework/locales/en";
+import de from "@vc-shell/framework/locales/de";
+import type { VcShellLocale, VcShellLocalePartial } from "@vc-shell/framework/locales/types";
 ```
 
 The `VcShellLocale` interface provides autocomplete for all framework translation keys. Use it when creating a full translation to ensure no keys are missed.
@@ -200,8 +198,8 @@ The `VcShellLocale` interface provides autocomplete for all framework translatio
 Spread the English locale as a base and override all sections:
 
 ```typescript
-import en from '@vc-shell/framework/locales/en'
-import type { VcShellLocale } from '@vc-shell/framework/locales/types'
+import en from "@vc-shell/framework/locales/en";
+import type { VcShellLocale } from "@vc-shell/framework/locales/types";
 
 const fr: VcShellLocale = {
   ...en,
@@ -219,10 +217,10 @@ const fr: VcShellLocale = {
     ...en.COMPONENTS,
     // ... translate component strings
   },
-}
+};
 
 // Register in your app's main.ts or plugin setup:
-app.config.globalProperties.$mergeLocaleMessage('fr', fr)
+app.config.globalProperties.$mergeLocaleMessage("fr", fr);
 ```
 
 ### Overriding Specific Keys
@@ -230,13 +228,13 @@ app.config.globalProperties.$mergeLocaleMessage('fr', fr)
 Use `VcShellLocalePartial` for partial overrides — all keys are optional:
 
 ```typescript
-import type { VcShellLocalePartial } from '@vc-shell/framework/locales/types'
+import type { VcShellLocalePartial } from "@vc-shell/framework/locales/types";
 
 const overrides: VcShellLocalePartial = {
-  SHELL: { ACCOUNT: { LOGOUT: "Sign Out" } }
-}
+  SHELL: { ACCOUNT: { LOGOUT: "Sign Out" } },
+};
 
-app.config.globalProperties.$mergeLocaleMessage('en', overrides)
+app.config.globalProperties.$mergeLocaleMessage("en", overrides);
 ```
 
 ### Validating Your Translation