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

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

@@ -21,13 +21,13 @@ The service follows the same provide/inject singleton pattern as other framework
 ## Basic Usage
 
 ```typescript
-import { useAppBarWidget } from '@vc-shell/framework';
+import { useAppBarWidget } from "@vc-shell/framework";
 
 const appBarService = useAppBarWidget();
 
 const widgetId = appBarService.register({
-  icon: 'bell',
-  title: 'Notifications',
+  icon: "bell",
+  title: "Notifications",
   order: 10,
   onClick: () => openNotifications(),
 });
@@ -41,29 +41,29 @@ None.
 
 ### Returns (`IAppBarWidgetService`)
 
-| Property / Method | Type | Description |
-|-------------------|------|-------------|
-| `register` | `(options: registerAppBarWidgetOptions) => string` | Registers a widget in the app bar, returns the assigned ID |
-| `unregister` | `(id: string) => void` | Removes a widget from the app bar by ID |
-| `items` | `ComputedRef<AppBarWidget[]>` | Reactive list of all registered app bar widgets |
+| Property / Method | Type                                               | Description                                                |
+| ----------------- | -------------------------------------------------- | ---------------------------------------------------------- |
+| `register`        | `(options: registerAppBarWidgetOptions) => string` | Registers a widget in the app bar, returns the assigned ID |
+| `unregister`      | `(id: string) => void`                             | Removes a widget from the app bar by ID                    |
+| `items`           | `ComputedRef<AppBarWidget[]>`                      | Reactive list of all registered app bar widgets            |
 
 ### registerAppBarWidgetOptions
 
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| `id` | `string` | No | Custom ID; auto-generated if omitted |
-| `order` | `number` | No | Sort order in the app bar (lower = further left) |
-| `title` | `string` | No | Tooltip or label text |
-| `icon` | `Component \| string` | No | Lucide icon name or a Vue component |
-| `component` | `Component` | No | Custom Vue component to render instead of default icon button |
-| `props` | `Record<string, unknown>` | No | Props to pass to the custom component |
-| `onClick` | `() => void` | No | Click handler for the default icon button |
-| `slot` | `string` | No | Named slot target for placement control |
+| Field       | Type                      | Required | Description                                                   |
+| ----------- | ------------------------- | -------- | ------------------------------------------------------------- |
+| `id`        | `string`                  | No       | Custom ID; auto-generated if omitted                          |
+| `order`     | `number`                  | No       | Sort order in the app bar (lower = further left)              |
+| `title`     | `string`                  | No       | Tooltip or label text                                         |
+| `icon`      | `Component \| string`     | No       | Lucide icon name or a Vue component                           |
+| `component` | `Component`               | No       | Custom Vue component to render instead of default icon button |
+| `props`     | `Record<string, unknown>` | No       | Props to pass to the custom component                         |
+| `onClick`   | `() => void`              | No       | Click handler for the default icon button                     |
+| `slot`      | `string`                  | No       | Named slot target for placement control                       |
 
 ### Additional Exports
 
-| Export | Description |
-|--------|-------------|
+| Export                  | Description                                                             |
+| ----------------------- | ----------------------------------------------------------------------- |
 | `provideAppBarWidget()` | Creates and provides the service. Flushes pre-registered items on init. |
 
 ## Common Patterns
@@ -71,14 +71,14 @@ None.
 ### Simple icon button widget
 
 ```typescript
-import { useAppBarWidget } from '@vc-shell/framework';
+import { useAppBarWidget } from "@vc-shell/framework";
 
 const { register, unregister } = useAppBarWidget();
 
 // Register a simple icon button
 const id = register({
-  icon: 'lucide-refresh-cw',
-  title: 'Sync Data',
+  icon: "lucide-refresh-cw",
+  title: "Sync Data",
   order: 5,
   onClick: () => syncAllData(),
 });
@@ -87,16 +87,16 @@ const id = register({
 ### Registering a custom component widget
 
 ```typescript
-import { useAppBarWidget } from '@vc-shell/framework';
-import { markRaw, onUnmounted } from 'vue';
-import LanguagePicker from './LanguagePicker.vue';
+import { useAppBarWidget } from "@vc-shell/framework";
+import { markRaw, onUnmounted } from "vue";
+import LanguagePicker from "./LanguagePicker.vue";
 
 const { register, unregister } = useAppBarWidget();
 
 const id = register({
   component: markRaw(LanguagePicker),
   order: 20,
-  title: 'Language',
+  title: "Language",
 });
 
 onUnmounted(() => unregister(id));
@@ -105,17 +105,17 @@ onUnmounted(() => unregister(id));
 ### Widget with dynamic props
 
 ```typescript
-import { useAppBarWidget } from '@vc-shell/framework';
-import { markRaw } from 'vue';
-import SyncStatusIndicator from './SyncStatusIndicator.vue';
+import { useAppBarWidget } from "@vc-shell/framework";
+import { markRaw } from "vue";
+import SyncStatusIndicator from "./SyncStatusIndicator.vue";
 
 const { register } = useAppBarWidget();
 
 register({
   component: markRaw(SyncStatusIndicator),
   props: {
-    status: syncStatus,         // Can be reactive
-    lastSyncTime: lastSyncAt,   // Will be passed as props to the component
+    status: syncStatus, // Can be reactive
+    lastSyncTime: lastSyncAt, // Will be passed as props to the component
   },
   order: 1,
 });
@@ -124,14 +124,14 @@ register({
 ### Listing all registered widgets
 
 ```typescript
-import { useAppBarWidget } from '@vc-shell/framework';
+import { useAppBarWidget } from "@vc-shell/framework";
 
 const { items } = useAppBarWidget();
 
 // Iterate over all widgets (sorted by order)
 watchEffect(() => {
   console.log(`${items.value.length} widgets in app bar`);
-  items.value.forEach(w => console.log(`  - ${w.title ?? w.id}`));
+  items.value.forEach((w) => console.log(`  - ${w.title ?? w.id}`));
 });
 ```
 
@@ -158,7 +158,7 @@ Widgets are not automatically removed when a component unmounts. If your module
 ```typescript
 const { register, unregister } = useAppBarWidget();
 
-const id = register({ icon: 'lucide-bell', onClick: handleClick });
+const id = register({ icon: "lucide-bell", onClick: handleClick });
 
 onUnmounted(() => {
   unregister(id);

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

@@ -13,8 +13,8 @@ Integrates Azure Application Insights page-view tracking with Vue Router and the
 The typical setup happens once in your app's router configuration:
 
 ```typescript
-import { useAppInsights } from '@vc-shell/framework';
-import { createRouter, createWebHistory } from 'vue-router';
+import { useAppInsights } from "@vc-shell/framework";
+import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({ history: createWebHistory(), routes });
 
@@ -36,16 +36,16 @@ export default router;
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `setupPageTracking.beforeEach` | `(route: { name: string }) => void` | Call in router `beforeEach` to start page-view timing and generate a new trace ID |
-| `setupPageTracking.afterEach` | `(route: { name: string; fullPath: string }) => void` | Call in router `afterEach` to stop page-view timing and flush the telemetry event |
-| `appInsights` | `ApplicationInsights` | Raw Application Insights instance for custom telemetry (trackEvent, trackException, trackMetric, etc.) |
+| Property                       | Type                                                  | Description                                                                                            |
+| ------------------------------ | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `setupPageTracking.beforeEach` | `(route: { name: string }) => void`                   | Call in router `beforeEach` to start page-view timing and generate a new trace ID                      |
+| `setupPageTracking.afterEach`  | `(route: { name: string; fullPath: string }) => void` | Call in router `afterEach` to stop page-view timing and flush the telemetry event                      |
+| `appInsights`                  | `ApplicationInsights`                                 | Raw Application Insights instance for custom telemetry (trackEvent, trackException, trackMetric, etc.) |
 
 ### Injection Key
 
-| Key | Type | Description |
-|---|---|---|
+| Key                     | Type                                     | Description                                                                                       |
+| ----------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | `AppInsightsOptionsKey` | `InjectionKey<AppInsightsPluginOptions>` | Optional. Provide this at app level with `{ appName: 'Vendor Portal' }` to prefix all page names. |
 
 ## How It Works
@@ -61,13 +61,13 @@ If `AppInsightsOptionsKey` is provided with an `appName`, page names are formatt
 ## Recipe: Tracking Custom Events Alongside Page Views
 
 ```typescript
-import { useAppInsights } from '@vc-shell/framework';
+import { useAppInsights } from "@vc-shell/framework";
 
 const { appInsights } = useAppInsights();
 
 function trackOrderPlaced(orderId: string, total: number) {
   appInsights.trackEvent({
-    name: 'OrderPlaced',
+    name: "OrderPlaced",
     properties: { orderId },
     measurements: { orderTotal: total },
   });
@@ -75,7 +75,7 @@ function trackOrderPlaced(orderId: string, total: number) {
 
 function trackSearchPerformed(query: string, resultCount: number) {
   appInsights.trackEvent({
-    name: 'SearchPerformed',
+    name: "SearchPerformed",
     properties: { query },
     measurements: { resultCount },
   });
@@ -87,13 +87,13 @@ function trackSearchPerformed(query: string, resultCount: number) {
 In your app's entry point, provide the options so page names are prefixed:
 
 ```typescript
-import { createApp, provide } from 'vue';
-import { AppInsightsOptionsKey } from '@vc-shell/framework';
+import { createApp, provide } from "vue";
+import { AppInsightsOptionsKey } from "@vc-shell/framework";
 
 const app = createApp(App);
 
 app.provide(AppInsightsOptionsKey, {
-  appName: 'Vendor Portal',
+  appName: "Vendor Portal",
   // ... other AppInsightsPluginOptions
 });
 ```

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

@@ -13,16 +13,16 @@ Handles file upload, removal, and editing for `ICommonAsset` arrays (images, doc
 
 ```vue
 <script setup lang="ts">
-import { useAssets } from '@vc-shell/framework';
-import { ref } from 'vue';
-import type { ICommonAsset } from '@vc-shell/framework';
+import { useAssets } from "@vc-shell/framework";
+import { ref } from "vue";
+import type { ICommonAsset } from "@vc-shell/framework";
 
 const { upload, remove, edit, loading } = useAssets();
 const assets = ref<ICommonAsset[]>([]);
 
 async function onFilesSelected(fileList: FileList) {
   const maxSort = Math.max(0, ...assets.value.map((a) => a.sortOrder ?? 0));
-  const newAssets = await upload(fileList, 'catalog/products/images', maxSort);
+  const newAssets = await upload(fileList, "catalog/products/images", maxSort);
   assets.value = [...assets.value, ...newAssets];
 }
 
@@ -36,7 +36,10 @@ function onUpdateAltText(asset: ICommonAsset, altText: string) {
 </script>
 
 <template>
-  <VcBlade title="Product Images" :loading="loading">
+  <VcBlade
+    title="Product Images"
+    :loading="loading"
+  >
     <VcGallery
       :assets="assets"
       @upload="onFilesSelected"
@@ -50,12 +53,12 @@ function onUpdateAltText(asset: ICommonAsset, altText: string) {
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `upload` | `(files: FileList, uploadPath: string, startingSortOrder?: number) => Promise<ICommonAsset[]>` | Upload files in parallel batches (max 4 concurrent). Returns only successfully uploaded assets. Sort orders are assigned incrementally from `startingSortOrder + 1`. |
-| `remove` | `(filesToDelete: ICommonAsset[], initialAssetArr: ICommonAsset[]) => ICommonAsset[]` | Return a new array with deleted items removed. Matching is done by `url` field. The original array is not mutated. |
-| `edit` | `(updatedFiles: ICommonAsset[], initialAssetArr: ICommonAsset[]) => ICommonAsset[]` | Merge updated fields into existing assets (matched by `url`). If `updatedFiles.length === initialAssetArr.length`, the entire array is replaced (reorder mode). |
-| `loading` | `ComputedRef<boolean>` | Whether an upload or remove operation is currently in progress. |
+| Property  | Type                                                                                           | Description                                                                                                                                                          |
+| --------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `upload`  | `(files: FileList, uploadPath: string, startingSortOrder?: number) => Promise<ICommonAsset[]>` | Upload files in parallel batches (max 4 concurrent). Returns only successfully uploaded assets. Sort orders are assigned incrementally from `startingSortOrder + 1`. |
+| `remove`  | `(filesToDelete: ICommonAsset[], initialAssetArr: ICommonAsset[]) => ICommonAsset[]`           | Return a new array with deleted items removed. Matching is done by `url` field. The original array is not mutated.                                                   |
+| `edit`    | `(updatedFiles: ICommonAsset[], initialAssetArr: ICommonAsset[]) => ICommonAsset[]`            | Merge updated fields into existing assets (matched by `url`). If `updatedFiles.length === initialAssetArr.length`, the entire array is replaced (reorder mode).      |
+| `loading` | `ComputedRef<boolean>`                                                                         | Whether an upload or remove operation is currently in progress.                                                                                                      |
 
 ## How It Works
 
@@ -74,7 +77,7 @@ Both `remove` and `edit` use `lodash-es` `cloneDeep` to create a new array, so t
 ## Recipe: Drag-and-Drop Reorder with Sort Order Update
 
 ```typescript
-import { useAssets } from '@vc-shell/framework';
+import { useAssets } from "@vc-shell/framework";
 
 const { edit } = useAssets();
 const assets = ref<ICommonAsset[]>([]);
@@ -95,25 +98,25 @@ function onDragEnd(reorderedList: ICommonAsset[]) {
 
 ```vue
 <script setup lang="ts">
-import { useAssets } from '@vc-shell/framework';
-import { ref, watch } from 'vue';
+import { useAssets } from "@vc-shell/framework";
+import { ref, watch } from "vue";
 
 const { upload, loading } = useAssets();
 const assets = ref<ICommonAsset[]>([]);
-const statusMessage = ref('');
+const statusMessage = ref("");
 
 watch(loading, (isLoading) => {
-  statusMessage.value = isLoading ? 'Uploading files...' : '';
+  statusMessage.value = isLoading ? "Uploading files..." : "";
 });
 
 async function handleUpload(files: FileList) {
   statusMessage.value = `Uploading ${files.length} file(s)...`;
   try {
-    const uploaded = await upload(files, 'catalog/products/images');
+    const uploaded = await upload(files, "catalog/products/images");
     assets.value = [...assets.value, ...uploaded];
     statusMessage.value = `Successfully uploaded ${uploaded.length} file(s)`;
   } catch (err) {
-    statusMessage.value = 'Upload failed. Please try again.';
+    statusMessage.value = "Upload failed. Please try again.";
   }
 }
 </script>

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

@@ -20,31 +20,31 @@ const assets = useAssetsManager(ref, options);
 
 ### Parameters
 
-| Parameter | Type | Description |
-|---|---|---|
-| `source` | `Ref<AssetLike[] \| undefined \| null>` | Reactive ref to the asset array. Accepts `ref()`, `toRef()`, or `computed({ get, set })`. `undefined`/`null` values are treated as empty array. The composable holds an internal copy and syncs both ways. |
-| `options` | `UseAssetsManagerOptions` | Configuration (see below) |
+| Parameter | Type                                    | Description                                                                                                                                                                                                |
+| --------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `source`  | `Ref<AssetLike[] \| undefined \| null>` | Reactive ref to the asset array. Accepts `ref()`, `toRef()`, or `computed({ get, set })`. `undefined`/`null` values are treated as empty array. The composable holds an internal copy and syncs both ways. |
+| `options` | `UseAssetsManagerOptions`               | Configuration (see below)                                                                                                                                                                                  |
 
 ### Options
 
-| Option | Type | Required | Description |
-|---|---|---|---|
-| `uploadPath` | `() => string` | Yes | Upload destination path (function — evaluated at upload time) |
-| `confirmRemove` | `() => Promise<boolean> \| boolean` | No | Called before remove. Return `false` to cancel. Omit for silent remove. |
-| `assetKey` | `string` | No | Key for matching items (default: `"url"`) |
-| `concurrency` | `number` | No | Max concurrent uploads (default: 4) |
+| Option          | Type                                | Required | Description                                                             |
+| --------------- | ----------------------------------- | -------- | ----------------------------------------------------------------------- |
+| `uploadPath`    | `() => string`                      | Yes      | Upload destination path (function — evaluated at upload time)           |
+| `confirmRemove` | `() => Promise<boolean> \| boolean` | No       | Called before remove. Return `false` to cancel. Omit for silent remove. |
+| `assetKey`      | `string`                            | No       | Key for matching items (default: `"url"`)                               |
+| `concurrency`   | `number`                            | No       | Max concurrent uploads (default: 4)                                     |
 
 ### Return (`UseAssetsManagerReturn`)
 
-| Property | Type | Description |
-|---|---|---|
-| `items` | `Ref<AssetLike[]>` | Reactive asset array (internal ref, safe to bind to templates) |
-| `upload` | `(files: FileList, startingSortOrder?: number) => Promise<void>` | Upload files, append to array |
-| `remove` | `(item: AssetLike) => Promise<void>` | Remove single item (with confirmation if configured) |
-| `removeMany` | `(items: AssetLike[]) => Promise<void>` | Remove multiple items (one confirmation for batch) |
-| `reorder` | `(items: AssetLike[]) => void` | Replace array with new order |
-| `updateItem` | `(item: AssetLike) => void` | Update single item metadata by `assetKey` |
-| `loading` | `ComputedRef<boolean>` | True during upload |
+| Property     | Type                                                             | Description                                                    |
+| ------------ | ---------------------------------------------------------------- | -------------------------------------------------------------- |
+| `items`      | `Ref<AssetLike[]>`                                               | Reactive asset array (internal ref, safe to bind to templates) |
+| `upload`     | `(files: FileList, startingSortOrder?: number) => Promise<void>` | Upload files, append to array                                  |
+| `remove`     | `(item: AssetLike) => Promise<void>`                             | Remove single item (with confirmation if configured)           |
+| `removeMany` | `(items: AssetLike[]) => Promise<void>`                          | Remove multiple items (one confirmation for batch)             |
+| `reorder`    | `(items: AssetLike[]) => void`                                   | Replace array with new order                                   |
+| `updateItem` | `(item: AssetLike) => void`                                      | Update single item metadata by `assetKey`                      |
+| `loading`    | `ComputedRef<boolean>`                                           | True during upload                                             |
 
 ## Usage Examples
 
@@ -57,7 +57,9 @@ import { toRef } from "vue";
 const assets = useAssetsManager(
   computed({
     get: () => offer.value.images ?? [],
-    set: (val) => { offer.value.images = val; },
+    set: (val) => {
+      offer.value.images = val;
+    },
   }),
   {
     uploadPath: () => `offers/${offer.value?.id ?? "new"}`,
@@ -82,8 +84,10 @@ Wrap a single value in a computed array:
 
 ```typescript
 const photoAssets = computed({
-  get: () => user.value?.iconUrl ? [{ url: user.value.iconUrl }] : [],
-  set: (val) => { user.value!.iconUrl = val[0]?.url; },
+  get: () => (user.value?.iconUrl ? [{ url: user.value.iconUrl }] : []),
+  set: (val) => {
+    user.value!.iconUrl = val[0]?.url;
+  },
 });
 
 const photo = useAssetsManager(photoAssets, {
@@ -109,7 +113,7 @@ const assets = useAssetsManager(productAssetsRef, {
 openBlade({
   name: "AssetsManager",
   options: {
-    manager: markRaw(assets),  // IMPORTANT: prevents reactive proxy unwrap
+    manager: markRaw(assets), // IMPORTANT: prevents reactive proxy unwrap
     disabled: !canEdit.value,
   },
 });
@@ -137,7 +141,7 @@ interface AssetLike {
   url?: string;
   name?: string;
   sortOrder?: number;
-  [key: string]: any;  // compatible with Image, ProductImage, Asset, etc.
+  [key: string]: any; // compatible with Image, ProductImage, Asset, etc.
 }
 ```