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

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

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

@@ -11,7 +11,7 @@ Aggregates multiple reactive boolean loading refs into a single computed that is
 ## Quick Start
 
 ```typescript
-import { useLoading } from '@vc-shell/framework';
+import { useLoading } from "@vc-shell/framework";
 
 const combinedLoading = useLoading(loadingA, loadingB, loadingC);
 // combinedLoading.value === true when ANY of the three is true
@@ -21,14 +21,14 @@ const combinedLoading = useLoading(loadingA, loadingB, loadingC);
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `...args` | `Readonly<Ref<boolean>>[]` | Yes | One or more reactive boolean refs to aggregate. Accepts `Ref<boolean>`, `ComputedRef<boolean>`, or any `Readonly<Ref<boolean>>`. |
+| Parameter | Type                       | Required | Description                                                                                                                      |
+| --------- | -------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `...args` | `Readonly<Ref<boolean>>[]` | Yes      | One or more reactive boolean refs to aggregate. Accepts `Ref<boolean>`, `ComputedRef<boolean>`, or any `Readonly<Ref<boolean>>`. |
 
 ### Returns
 
-| Type | Description |
-|------|-------------|
+| Type                   | Description                                                                                            |
+| ---------------------- | ------------------------------------------------------------------------------------------------------ |
 | `ComputedRef<boolean>` | `true` if any of the input refs is `true`, `false` otherwise. Re-evaluates whenever any input changes. |
 
 ## How It Works
@@ -36,7 +36,7 @@ const combinedLoading = useLoading(loadingA, loadingB, loadingC);
 The implementation is a single `computed` that calls `Array.some()` on the input refs:
 
 ```typescript
-computed(() => args.some((item) => item.value))
+computed(() => args.some((item) => item.value));
 ```
 
 Because `computed` tracks all `.value` accesses, Vue knows to re-evaluate whenever any of the input refs changes. The `some()` short-circuits on the first `true`, so it is efficient even with many inputs.
@@ -45,7 +45,10 @@ Because `computed` tracks all `.value` accesses, Vue knows to re-evaluate whenev
 
 ```vue
 <template>
-  <VcBlade title="Order Details" :loading="isLoading">
+  <VcBlade
+    title="Order Details"
+    :loading="isLoading"
+  >
     <div class="tw-grid tw-grid-cols-2 tw-gap-4">
       <VcCard title="Order Info">
         <p>{{ order?.number }}</p>
@@ -54,15 +57,18 @@ Because `computed` tracks all `.value` accesses, Vue knows to re-evaluate whenev
         <p>{{ customer?.name }}</p>
       </VcCard>
     </div>
-    <VcDataTable :items="lineItems" :columns="columns" />
+    <VcDataTable
+      :items="lineItems"
+      :columns="columns"
+    />
   </VcBlade>
 </template>
 
 <script setup lang="ts">
-import { useLoading } from '@vc-shell/framework';
-import { useOrder } from '../composables/useOrder';
-import { useCustomer } from '../composables/useCustomer';
-import { useLineItems } from '../composables/useLineItems';
+import { useLoading } from "@vc-shell/framework";
+import { useOrder } from "../composables/useOrder";
+import { useCustomer } from "../composables/useCustomer";
+import { useLineItems } from "../composables/useLineItems";
 
 const { order, loading: orderLoading } = useOrder(props.orderId);
 const { customer, loading: customerLoading } = useCustomer(props.customerId);
@@ -76,8 +82,8 @@ const isLoading = useLoading(orderLoading, customerLoading, lineItemsLoading);
 ## Recipe: Combining with useAsync
 
 ```typescript
-import { useLoading } from '@vc-shell/framework';
-import { useAsync } from '@vc-shell/framework';
+import { useLoading } from "@vc-shell/framework";
+import { useAsync } from "@vc-shell/framework";
 
 const { loading: saveLoading, action: save } = useAsync(saveItem);
 const { loading: deleteLoading, action: remove } = useAsync(deleteItem);
@@ -92,8 +98,8 @@ const isBusy = useLoading(saveLoading, deleteLoading, validateLoading);
 If you have a variable number of loading sources (e.g., loaded from a plugin system), collect them into an array and spread:
 
 ```typescript
-import { useLoading } from '@vc-shell/framework';
-import { Ref } from 'vue';
+import { useLoading } from "@vc-shell/framework";
+import { Ref } from "vue";
 
 const loadingRefs: Ref<boolean>[] = [];
 

package/runtime/knowledge/docs/core/composables/useMenuExpanded/index.docs.md

@@ -11,7 +11,7 @@ Manages the sidebar menu expanded/collapsed and hover-expanded state with localS
 ## Basic Usage
 
 ```typescript
-import { useMenuExpanded } from '@vc-shell/framework';
+import { useMenuExpanded } from "@vc-shell/framework";
 
 const { isExpanded, toggleExpanded, isHoverExpanded, toggleHoverExpanded } = useMenuExpanded();
 
@@ -19,19 +19,19 @@ const { isExpanded, toggleExpanded, isHoverExpanded, toggleHoverExpanded } = use
 toggleExpanded();
 
 // Hover expand with 200ms delay
-toggleHoverExpanded(true);   // opens after delay
-toggleHoverExpanded(false);  // closes immediately
+toggleHoverExpanded(true); // opens after delay
+toggleHoverExpanded(false); // closes immediately
 ```
 
 ## API
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `isExpanded` | `Ref<boolean>` | Pinned state, persisted via `useLocalStorage` |
-| `toggleExpanded` | `() => void` | Toggle the pinned state |
-| `isHoverExpanded` | `Ref<boolean>` | Temporary hover expansion (not persisted) |
+| Property              | Type                               | Description                                                      |
+| --------------------- | ---------------------------------- | ---------------------------------------------------------------- |
+| `isExpanded`          | `Ref<boolean>`                     | Pinned state, persisted via `useLocalStorage`                    |
+| `toggleExpanded`      | `() => void`                       | Toggle the pinned state                                          |
+| `isHoverExpanded`     | `Ref<boolean>`                     | Temporary hover expansion (not persisted)                        |
 | `toggleHoverExpanded` | `(shouldExpand?: boolean) => void` | Set hover state; opening has a 200ms delay, closing is immediate |
 
 ## Recipe: Custom Sidebar with Hover Expand
@@ -59,7 +59,7 @@ const isVisuallyExpanded = computed(() => isExpanded.value || isHoverExpanded.va
       <!-- menu items -->
     </nav>
     <button @click="toggleExpanded">
-      {{ isExpanded ? 'Unpin' : 'Pin' }}
+      {{ isExpanded ? "Unpin" : "Pin" }}
     </button>
   </aside>
 </template>