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

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

@@ -16,42 +16,41 @@ Internally uses a strategy pattern — each property type (regular, boolean, dic
 ```typescript
 import { useDynamicProperties } from "@vc-shell/framework";
 
-const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements, loading } =
-  useDynamicProperties({
-    searchDictionary: (criteria) => api.searchPropertyDictionaryItems(criteria),
-    searchMeasurements: (measureId, locale) => api.searchMeasurements(measureId, locale),
-  });
+const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements, loading } = useDynamicProperties({
+  searchDictionary: (criteria) => api.searchPropertyDictionaryItems(criteria),
+  searchMeasurements: (measureId, locale) => api.searchMeasurements(measureId, locale),
+});
 ```
 
 ## API
 
 ### Options
 
-| Option | Type | Required | Description |
-|--------|------|----------|-------------|
-| `searchDictionary` | `(criteria: IBasePropertyDictionaryItemSearchCriteria) => Promise<IBasePropertyDictionaryItem[] \| undefined>` | Yes | API function to search dictionary items by property ID and keyword |
-| `searchMeasurements` | `(measureId: string, locale?: string) => Promise<IBaseMeasurementDictionaryItem[] \| undefined>` | No | API function for loading measurement units. Only needed for measure-type properties |
+| Option               | Type                                                                                                           | Required | Description                                                                         |
+| -------------------- | -------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------- |
+| `searchDictionary`   | `(criteria: IBasePropertyDictionaryItemSearchCriteria) => Promise<IBasePropertyDictionaryItem[] \| undefined>` | Yes      | API function to search dictionary items by property ID and keyword                  |
+| `searchMeasurements` | `(measureId: string, locale?: string) => Promise<IBaseMeasurementDictionaryItem[] \| undefined>`               | No       | API function for loading measurement units. Only needed for measure-type properties |
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `getPropertyValue` | `(property, locale) => PropertyDisplayValue` | Read display value for a property. Returns string, boolean, or array depending on type. Does NOT mutate the property. |
-| `setPropertyValue` | `(params: SetPropertyValueParams) => void` | Write value to a property. Handles type-specific transformation and empty cleanup. |
-| `loadDictionaries` | `(propertyId, keyword?, locale?) => Promise<...>` | Load dictionary items. If locale is provided, resolves localized values. |
-| `loadMeasurements` | `(measureId, keyword?, locale?) => Promise<...>` | Load measurement units. No-op if `searchMeasurements` was not provided. |
-| `loading` | `ComputedRef<boolean>` | Whether a dictionary lookup is in progress. |
+| Property           | Type                                              | Description                                                                                                           |
+| ------------------ | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `getPropertyValue` | `(property, locale) => PropertyDisplayValue`      | Read display value for a property. Returns string, boolean, or array depending on type. Does NOT mutate the property. |
+| `setPropertyValue` | `(params: SetPropertyValueParams) => void`        | Write value to a property. Handles type-specific transformation and empty cleanup.                                    |
+| `loadDictionaries` | `(propertyId, keyword?, locale?) => Promise<...>` | Load dictionary items. If locale is provided, resolves localized values.                                              |
+| `loadMeasurements` | `(measureId, keyword?, locale?) => Promise<...>`  | Load measurement units. No-op if `searchMeasurements` was not provided.                                               |
+| `loading`          | `ComputedRef<boolean>`                            | Whether a dictionary lookup is in progress.                                                                           |
 
 ### SetPropertyValueParams
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `property` | `IBaseProperty` | The property object to update. Modified in place. |
-| `value` | `string \| IBasePropertyValue[] \| (IBasePropertyDictionaryItem & { value: string })[]` | The new value. Type depends on property configuration. |
-| `dictionary` | `IBasePropertyDictionaryItem[]?` | Dictionary items. Required when setting a dictionary value. |
-| `locale` | `string?` | Current locale for multilanguage properties. |
-| `unitOfMeasureId` | `string?` | Unit of measure ID for measure-type properties. |
-| `colorCode` | `string?` | Color hex code for color-type properties. |
+| Field             | Type                                                                                    | Description                                                 |
+| ----------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| `property`        | `IBaseProperty`                                                                         | The property object to update. Modified in place.           |
+| `value`           | `string \| IBasePropertyValue[] \| (IBasePropertyDictionaryItem & { value: string })[]` | The new value. Type depends on property configuration.      |
+| `dictionary`      | `IBasePropertyDictionaryItem[]?`                                                        | Dictionary items. Required when setting a dictionary value. |
+| `locale`          | `string?`                                                                               | Current locale for multilanguage properties.                |
+| `unitOfMeasureId` | `string?`                                                                               | Unit of measure ID for measure-type properties.             |
+| `colorCode`       | `string?`                                                                               | Color hex code for color-type properties.                   |
 
 ### PropertyDisplayValue
 
@@ -65,13 +64,13 @@ type PropertyDisplayValue = string | IBasePropertyValue[] | boolean;
 
 The composable resolves a strategy handler based on property flags:
 
-| Priority | Condition | Strategy | Handles |
-|----------|-----------|----------|---------|
-| 1 | `valueType === "Measure"` | measureStrategy | Numeric input with unit dropdown |
-| 2 | `valueType === "Color"` && !dictionary | colorStrategy | Color picker, multivalue colors |
-| 3 | `valueType === "Boolean"` | booleanStrategy | Checkbox/switch |
-| 4 | `dictionary === true` | dictionaryStrategy | Select dropdowns with localized options |
-| 5 | (default) | regularStrategy | ShortText, LongText, Number, Integer, DateTime |
+| Priority | Condition                              | Strategy           | Handles                                        |
+| -------- | -------------------------------------- | ------------------ | ---------------------------------------------- |
+| 1        | `valueType === "Measure"`              | measureStrategy    | Numeric input with unit dropdown               |
+| 2        | `valueType === "Color"` && !dictionary | colorStrategy      | Color picker, multivalue colors                |
+| 3        | `valueType === "Boolean"`              | booleanStrategy    | Checkbox/switch                                |
+| 4        | `dictionary === true`                  | dictionaryStrategy | Select dropdowns with localized options        |
+| 5        | (default)                              | regularStrategy    | ShortText, LongText, Number, Integer, DateTime |
 
 ### Value Getting
 
@@ -124,11 +123,10 @@ This ensures that `useBladeForm`'s deep comparison correctly detects "no change"
 <script setup lang="ts">
 import { useDynamicProperties } from "@vc-shell/framework";
 
-const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements } =
-  useDynamicProperties({
-    searchDictionary: searchDictionaryItems,
-    searchMeasurements: searchMeasurementItems,
-  });
+const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements } = useDynamicProperties({
+  searchDictionary: searchDictionaryItems,
+  searchMeasurements: searchMeasurementItems,
+});
 </script>
 ```
 

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

@@ -13,17 +13,24 @@ Captures and normalizes errors within a component's subtree using Vue's `onError
 
 ```vue
 <script setup lang="ts">
-import { useErrorHandler } from '@vc-shell/framework';
+import { useErrorHandler } from "@vc-shell/framework";
 
 // capture: true prevents the error from propagating further up the tree
 const { error, reset } = useErrorHandler(true);
 </script>
 
 <template>
-  <div v-if="error" class="tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded">
+  <div
+    v-if="error"
+    class="tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded"
+  >
     <p class="tw-text-red-700 tw-font-semibold">{{ error.message }}</p>
     <p class="tw-text-red-500 tw-text-sm tw-mt-1">{{ error.details }}</p>
-    <VcButton class="tw-mt-2" @click="reset">Dismiss</VcButton>
+    <VcButton
+      class="tw-mt-2"
+      @click="reset"
+      >Dismiss</VcButton
+    >
   </div>
   <slot v-else />
 </template>
@@ -33,28 +40,29 @@ const { error, reset } = useErrorHandler(true);
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `capture` | `boolean` | No | If `true`, prevents the error from propagating further up the component tree (the error is "swallowed" at this level). If `false` or `undefined`, the error continues propagating to parent error handlers. |
+| Parameter | Type      | Required | Description                                                                                                                                                                                                 |
+| --------- | --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `capture` | `boolean` | No       | If `true`, prevents the error from propagating further up the component tree (the error is "swallowed" at this level). If `false` or `undefined`, the error continues propagating to parent error handlers. |
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `error` | `Ref<DisplayableError \| null>` | The most recently captured error, or `null` if no error has occurred or it has been reset. |
-| `reset` | `() => void` | Clears the error state (sets `error` to `null`) and emits a `reset` event on the component instance. |
+| Property | Type                            | Description                                                                                          |
+| -------- | ------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `error`  | `Ref<DisplayableError \| null>` | The most recently captured error, or `null` if no error has occurred or it has been reset.           |
+| `reset`  | `() => void`                    | Clears the error state (sets `error` to `null`) and emits a `reset` event on the component instance. |
 
 ### DisplayableError
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `message` | `string` | Short, user-facing error message suitable for display in the UI. |
-| `details` | `string` | Detailed technical description (stack trace, API error body, etc.). |
-| `originalError` | `unknown` | The original thrown value, preserved for programmatic inspection. |
+| Property        | Type      | Description                                                         |
+| --------------- | --------- | ------------------------------------------------------------------- |
+| `message`       | `string`  | Short, user-facing error message suitable for display in the UI.    |
+| `details`       | `string`  | Detailed technical description (stack trace, API error body, etc.). |
+| `originalError` | `unknown` | The original thrown value, preserved for programmatic inspection.   |
 
 ### Emitted Events
 
 The composable emits events on the current component instance (accessible via `@error` and `@reset` in the parent template):
+
 - `error` -- emitted with the `DisplayableError` when an error is captured
 - `reset` -- emitted when `reset()` is called
 
@@ -75,7 +83,7 @@ Create a reusable error boundary that wraps any blade content:
 ```vue
 <!-- ErrorBoundary.vue -->
 <script setup lang="ts">
-import { useErrorHandler } from '@vc-shell/framework';
+import { useErrorHandler } from "@vc-shell/framework";
 
 const props = defineProps<{
   fallbackMessage?: string;
@@ -85,13 +93,23 @@ const { error, reset } = useErrorHandler(true);
 </script>
 
 <template>
-  <div v-if="error" class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-8">
-    <VcIcon icon="fas fa-exclamation-triangle" class="tw-text-4xl tw-text-warning-500 tw-mb-4" />
+  <div
+    v-if="error"
+    class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-8"
+  >
+    <VcIcon
+      icon="fas fa-exclamation-triangle"
+      class="tw-text-4xl tw-text-warning-500 tw-mb-4"
+    />
     <h3 class="tw-text-lg tw-font-semibold">
-      {{ fallbackMessage ?? 'Something went wrong' }}
+      {{ fallbackMessage ?? "Something went wrong" }}
     </h3>
     <p class="tw-text-sm tw-text-gray-500 tw-mt-2">{{ error.message }}</p>
-    <VcButton class="tw-mt-4" @click="reset">Try Again</VcButton>
+    <VcButton
+      class="tw-mt-4"
+      @click="reset"
+      >Try Again</VcButton
+    >
   </div>
   <slot v-else />
 </template>
@@ -113,17 +131,20 @@ Usage in a blade:
 
 ```vue
 <template>
-  <ChildBlade @error="onChildError" @reset="onChildReset" />
+  <ChildBlade
+    @error="onChildError"
+    @reset="onChildReset"
+  />
 </template>
 
 <script setup lang="ts">
 function onChildError(error: DisplayableError) {
-  console.error('Child blade error:', error.message);
+  console.error("Child blade error:", error.message);
   // Optionally show a notification or log to external service
 }
 
 function onChildReset() {
-  console.log('Child blade error was dismissed');
+  console.log("Child blade error was dismissed");
 }
 </script>
 ```

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

@@ -12,7 +12,7 @@ Provides lightweight utility functions for timing control: debounce, throttle, d
 ## Quick Start
 
 ```typescript
-import { useFunctions } from '@vc-shell/framework';
+import { useFunctions } from "@vc-shell/framework";
 
 const { debounce, throttle, delay, once } = useFunctions();
 
@@ -31,7 +31,7 @@ delay(() => showTooltip(), 500);
 
 // Ensure a function runs only once (e.g., expensive initialization)
 const initOnce = once(() => {
-  console.log('This runs exactly once');
+  console.log("This runs exactly once");
   return expensiveSetup();
 });
 initOnce(); // runs and caches the result
@@ -43,12 +43,12 @@ initOnce(); // still returns cached result
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `debounce` | `(fn, delay: number) => (...args) => void` | Delays invocation until `delay` ms after the last call. Each new call resets the timer. |
+| Property   | Type                                       | Description                                                                                              |
+| ---------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
+| `debounce` | `(fn, delay: number) => (...args) => void` | Delays invocation until `delay` ms after the last call. Each new call resets the timer.                  |
 | `throttle` | `(fn, delay: number) => (...args) => void` | Invokes at most once per `delay` ms on the leading edge. Subsequent calls within the window are ignored. |
-| `delay` | `(fn, ms?: number) => void` | Runs `fn` after `ms` milliseconds (default 0, which defers to the next macrotask via `setTimeout`). |
-| `once` | `(fn) => (...args) => unknown` | Ensures `fn` executes only once; subsequent calls return the cached result of the first invocation. |
+| `delay`    | `(fn, ms?: number) => void`                | Runs `fn` after `ms` milliseconds (default 0, which defers to the next macrotask via `setTimeout`).      |
+| `once`     | `(fn) => (...args) => unknown`             | Ensures `fn` executes only once; subsequent calls return the cached result of the first invocation.      |
 
 ## How They Work
 
@@ -61,11 +61,11 @@ initOnce(); // still returns cached result
 
 ```vue
 <script setup lang="ts">
-import { useFunctions } from '@vc-shell/framework';
-import { ref } from 'vue';
+import { useFunctions } from "@vc-shell/framework";
+import { ref } from "vue";
 
 const { debounce } = useFunctions();
-const searchQuery = ref('');
+const searchQuery = ref("");
 const results = ref<Product[]>([]);
 
 const performSearch = debounce(async (query: string) => {
@@ -91,7 +91,10 @@ function onSearchInput(value: string) {
         @update:model-value="onSearchInput"
       />
     </template>
-    <div v-for="product in results" :key="product.id">
+    <div
+      v-for="product in results"
+      :key="product.id"
+    >
       {{ product.name }}
     </div>
   </VcBlade>

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

@@ -14,11 +14,11 @@ The composable supports two attachment modes: **auto-attach** on mount via a CSS
 
 ```vue
 <script setup lang="ts">
-import { useKeyboardNavigation } from '@vc-shell/framework';
-import { ref } from 'vue';
+import { useKeyboardNavigation } from "@vc-shell/framework";
+import { ref } from "vue";
 
 const menuRef = ref<HTMLElement | null>(null);
-const items = ref(['Dashboard', 'Products', 'Orders', 'Settings']);
+const items = ref(["Dashboard", "Products", "Orders", "Settings"]);
 
 const { initKeyboardNavigation, focusFirstElement } = useKeyboardNavigation({
   itemSelector: '[role="menuitem"]',
@@ -43,7 +43,10 @@ function openMenu() {
 </script>
 
 <template>
-  <div ref="menuRef" role="menu">
+  <div
+    ref="menuRef"
+    role="menu"
+  >
     <div
       v-for="item in items"
       :key="item"
@@ -61,26 +64,26 @@ function openMenu() {
 
 ### Parameters (Options Object)
 
-| Parameter | Type | Default | Description |
-|---|---|---|---|
-| `containerSelector` | `string` | `'[role="menu"]'` | CSS selector to auto-find the container on mount. Set to empty string to disable auto-attach. |
-| `itemSelector` | `string` | `'[tabindex="0"]'` | CSS selector for focusable items inside the container. |
-| `onEnter` | `(el: HTMLElement) => void` | `undefined` | Called when Enter or Space is pressed on a focused item. Falls back to `el.click()` if not provided. |
-| `onEscape` | `() => void` | `undefined` | Called when Escape is pressed. Typically used to close the menu or popover. |
-| `loop` | `boolean` | `true` | When `true`, pressing ArrowDown on the last item wraps to the first, and ArrowUp on the first wraps to the last. |
+| Parameter           | Type                        | Default            | Description                                                                                                      |
+| ------------------- | --------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| `containerSelector` | `string`                    | `'[role="menu"]'`  | CSS selector to auto-find the container on mount. Set to empty string to disable auto-attach.                    |
+| `itemSelector`      | `string`                    | `'[tabindex="0"]'` | CSS selector for focusable items inside the container.                                                           |
+| `onEnter`           | `(el: HTMLElement) => void` | `undefined`        | Called when Enter or Space is pressed on a focused item. Falls back to `el.click()` if not provided.             |
+| `onEscape`          | `() => void`                | `undefined`        | Called when Escape is pressed. Typically used to close the menu or popover.                                      |
+| `loop`              | `boolean`                   | `true`             | When `true`, pressing ArrowDown on the last item wraps to the first, and ArrowUp on the first wraps to the last. |
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `initKeyboardNavigation` | `(el: HTMLElement) => void` | Manually attach keyboard listener to an element. Cleans up any previous attachment first. |
-| `cleanupKeyboardNavigation` | `() => void` | Remove listener and reset state. Called automatically on `onBeforeUnmount`. |
-| `focusNextElement` | `() => void` | Move focus to the next item. Wraps if `loop` is `true`. |
-| `focusPreviousElement` | `() => void` | Move focus to the previous item. Wraps if `loop` is `true`. |
-| `focusFirstElement` | `() => void` | Focus the first matching item in the container. |
-| `focusLastElement` | `() => void` | Focus the last matching item in the container. |
-| `setFocusedIndex` | `(index: number) => void` | Set focus to a specific index. No-op if index is out of bounds. |
-| `getFocusedIndex` | `() => number` | Get the currently focused index (`-1` if no item is focused). |
+| Property                    | Type                        | Description                                                                               |
+| --------------------------- | --------------------------- | ----------------------------------------------------------------------------------------- |
+| `initKeyboardNavigation`    | `(el: HTMLElement) => void` | Manually attach keyboard listener to an element. Cleans up any previous attachment first. |
+| `cleanupKeyboardNavigation` | `() => void`                | Remove listener and reset state. Called automatically on `onBeforeUnmount`.               |
+| `focusNextElement`          | `() => void`                | Move focus to the next item. Wraps if `loop` is `true`.                                   |
+| `focusPreviousElement`      | `() => void`                | Move focus to the previous item. Wraps if `loop` is `true`.                               |
+| `focusFirstElement`         | `() => void`                | Focus the first matching item in the container.                                           |
+| `focusLastElement`          | `() => void`                | Focus the last matching item in the container.                                            |
+| `setFocusedIndex`           | `(index: number) => void`   | Set focus to a specific index. No-op if index is out of bounds.                           |
+| `getFocusedIndex`           | `() => number`              | Get the currently focused index (`-1` if no item is focused).                             |
 
 ## How It Works
 
@@ -99,26 +102,25 @@ Auto-attach happens in `onMounted`: if `containerSelector` is set and a matching
 
 ```vue
 <script setup lang="ts">
-import { useKeyboardNavigation } from '@vc-shell/framework';
-import { ref, watch, nextTick } from 'vue';
+import { useKeyboardNavigation } from "@vc-shell/framework";
+import { ref, watch, nextTick } from "vue";
 
 const dropdownRef = ref<HTMLElement | null>(null);
 const isOpen = ref(false);
 const suggestions = ref<string[]>([]);
 
-const { initKeyboardNavigation, cleanupKeyboardNavigation, focusFirstElement } =
-  useKeyboardNavigation({
-    containerSelector: '', // disable auto-attach
-    itemSelector: '.suggestion-item',
-    onEnter: (el) => {
-      selectSuggestion(el.dataset.value!);
-      isOpen.value = false;
-    },
-    onEscape: () => {
-      isOpen.value = false;
-    },
-    loop: true,
-  });
+const { initKeyboardNavigation, cleanupKeyboardNavigation, focusFirstElement } = useKeyboardNavigation({
+  containerSelector: "", // disable auto-attach
+  itemSelector: ".suggestion-item",
+  onEnter: (el) => {
+    selectSuggestion(el.dataset.value!);
+    isOpen.value = false;
+  },
+  onEscape: () => {
+    isOpen.value = false;
+  },
+  loop: true,
+});
 
 watch(isOpen, async (open) => {
   if (open) {
@@ -139,8 +141,15 @@ function selectSuggestion(value: string) {
 
 <template>
   <div>
-    <VcInput @focus="isOpen = true" @input="fetchSuggestions" />
-    <div v-if="isOpen" ref="dropdownRef" class="suggestion-dropdown">
+    <VcInput
+      @focus="isOpen = true"
+      @input="fetchSuggestions"
+    />
+    <div
+      v-if="isOpen"
+      ref="dropdownRef"
+      class="suggestion-dropdown"
+    >
       <div
         v-for="item in suggestions"
         :key="item"

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

@@ -15,26 +15,35 @@ Also exports `provideLanguages()` for framework-level initialization.
 
 ```vue
 <script setup lang="ts">
-import { useLanguages } from '@vc-shell/framework';
-import { ref, onMounted } from 'vue';
+import { useLanguages } from "@vc-shell/framework";
+import { ref, onMounted } from "vue";
 
 const { currentLocale, setLocale, getFlag, getCountryCode } = useLanguages();
-const flagUrl = ref('');
+const flagUrl = ref("");
 
 onMounted(async () => {
   flagUrl.value = await getFlag(currentLocale.value);
 });
 
 function switchToGerman() {
-  setLocale('de-DE');
+  setLocale("de-DE");
 }
 </script>
 
 <template>
   <div class="tw-flex tw-items-center tw-gap-2">
-    <img v-if="flagUrl" :src="flagUrl" alt="flag" class="tw-w-6 tw-h-4" />
+    <img
+      v-if="flagUrl"
+      :src="flagUrl"
+      alt="flag"
+      class="tw-w-6 tw-h-4"
+    />
     <span>{{ currentLocale }}</span>
-    <VcButton size="sm" @click="switchToGerman">Deutsch</VcButton>
+    <VcButton
+      size="sm"
+      @click="switchToGerman"
+      >Deutsch</VcButton
+    >
   </div>
 </template>
 ```
@@ -47,19 +56,19 @@ None.
 
 ### Returns (`ILanguageService`)
 
-| Property / Method | Type | Description |
-|-------------------|------|-------------|
-| `currentLocale` | `ComputedRef<string>` | The currently active locale code (e.g., `"en-US"`, `"de-DE"`). |
-| `setLocale` | `(locale: string) => void` | Switches the application locale. This updates `vue-i18n`'s locale and triggers re-rendering of all translated text. |
-| `getLocaleByTag` | `(localeTag: string) => string \| undefined` | Resolves a locale tag to its display string (e.g., `"en-US"` to `"English (United States)"`). Returns `undefined` if the tag is not recognized. |
-| `resolveCamelCaseLocale` | `(locale: string) => string` | Converts a locale code to camelCase format (e.g., `"en-US"` to `"enUs"`). Useful for dynamic property access on objects keyed by locale. |
-| `getFlag` | `(language: string) => Promise<string>` | Fetches a flag image URL for the given language/locale. Returns a promise because flags may be loaded lazily. |
-| `getCountryCode` | `(language: string) => string` | Extracts the country code from a language tag (e.g., `"en-US"` to `"US"`, `"de-DE"` to `"DE"`). |
+| Property / Method        | Type                                         | Description                                                                                                                                     |
+| ------------------------ | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `currentLocale`          | `ComputedRef<string>`                        | The currently active locale code (e.g., `"en-US"`, `"de-DE"`).                                                                                  |
+| `setLocale`              | `(locale: string) => void`                   | Switches the application locale. This updates `vue-i18n`'s locale and triggers re-rendering of all translated text.                             |
+| `getLocaleByTag`         | `(localeTag: string) => string \| undefined` | Resolves a locale tag to its display string (e.g., `"en-US"` to `"English (United States)"`). Returns `undefined` if the tag is not recognized. |
+| `resolveCamelCaseLocale` | `(locale: string) => string`                 | Converts a locale code to camelCase format (e.g., `"en-US"` to `"enUs"`). Useful for dynamic property access on objects keyed by locale.        |
+| `getFlag`                | `(language: string) => Promise<string>`      | Fetches a flag image URL for the given language/locale. Returns a promise because flags may be loaded lazily.                                   |
+| `getCountryCode`         | `(language: string) => string`               | Extracts the country code from a language tag (e.g., `"en-US"` to `"US"`, `"de-DE"` to `"DE"`).                                                 |
 
 ### Additional Exports
 
-| Export | Description |
-|--------|-------------|
+| Export               | Description                                                                                                                                                                                                 |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `provideLanguages()` | Creates and provides the language service via Vue injection. Returns existing service if already provided in the current tree. Falls back to a module-level singleton if no injection context is available. |
 
 ## How It Works
@@ -77,19 +86,17 @@ The fallback behavior means `useLanguages()` is safe to call in module `install(
 
 ```vue
 <script setup lang="ts">
-import { useLanguages } from '@vc-shell/framework';
-import { ref, onMounted, watch } from 'vue';
+import { useLanguages } from "@vc-shell/framework";
+import { ref, onMounted, watch } from "vue";
 
 const { currentLocale, setLocale, getFlag } = useLanguages();
 
-const availableLocales = ['en-US', 'de-DE', 'fr-FR', 'es-ES'];
+const availableLocales = ["en-US", "de-DE", "fr-FR", "es-ES"];
 const flags = ref<Record<string, string>>({});
 
 onMounted(async () => {
   // Pre-fetch all flags in parallel
-  const entries = await Promise.all(
-    availableLocales.map(async (locale) => [locale, await getFlag(locale)] as const),
-  );
+  const entries = await Promise.all(availableLocales.map(async (locale) => [locale, await getFlag(locale)] as const));
   flags.value = Object.fromEntries(entries);
 });
 
@@ -107,7 +114,11 @@ function onLocaleChange(locale: string) {
       :class="{ 'tw-bg-primary-50': locale === currentLocale }"
       @click="onLocaleChange(locale)"
     >
-      <img v-if="flags[locale]" :src="flags[locale]" class="tw-w-6 tw-h-4" />
+      <img
+        v-if="flags[locale]"
+        :src="flags[locale]"
+        class="tw-w-6 tw-h-4"
+      />
       <span>{{ locale }}</span>
     </div>
   </div>
@@ -117,16 +128,14 @@ function onLocaleChange(locale: string) {
 ## Recipe: Locale-Aware Dynamic Property Display
 
 ```typescript
-import { useLanguages } from '@vc-shell/framework';
-import { useDynamicProperties } from '@vc-shell/framework';
+import { useLanguages } from "@vc-shell/framework";
+import { useDynamicProperties } from "@vc-shell/framework";
 
 const { currentLocale } = useLanguages();
 const { getPropertyValue } = useDynamicProperties(/* ... */);
 
 // Read a multilanguage property value for the current locale
-const displayValue = computed(() =>
-  getPropertyValue(property.value, currentLocale.value),
-);
+const displayValue = computed(() => getPropertyValue(property.value, currentLocale.value));
 ```
 
 ## Tips