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

package/runtime/knowledge/examples/videos-module.md

@@ -5,6 +5,7 @@ The pattern is identical to the details pattern, but the blade is oriented aroun
 existing item or creating a new one via an "add URL" flow rather than a traditional form.
 
 Key patterns shown here that differ from team-module:
+
 - `isWorkspace: false` (child blade, not sidebar nav) — videos is opened FROM another blade
 - `callParent` with multiple methods from the same child blade
 - `rowActions` on VcDataTable — per-row action buttons
@@ -110,7 +111,7 @@ import { VideosEmptyGridTemplateNew } from "../components";
 // PATTERN: defineBlade without isWorkspace — this blade is embedded, not a top-level workspace
 defineBlade({
   name: "Videos",
-  isWorkspace: true,  // true here because it can be a workspace entry-point too
+  isWorkspace: true, // true here because it can be a workspace entry-point too
 });
 
 // PATTERN: typed options from parent blade
@@ -274,7 +275,10 @@ exposeToChildren({ reload, markProductDirty });
       <div class="tw-p-4">
         <VcForm>
           <!-- PATTERN: v-if="!param" = create-only section -->
-          <div v-if="!param" class="tw-mb-4 tw-flex tw-flex-row">
+          <div
+            v-if="!param"
+            class="tw-mb-4 tw-flex tw-flex-row"
+          >
             <Field
               v-slot="{ errorMessage, handleChange, errors }"
               :label="t('VIDEOS.PAGES.DETAILS.FIELDS.ADD.TITLE')"
@@ -296,7 +300,12 @@ exposeToChildren({ reload, markProductDirty });
                   <VcButton
                     :disabled="previewDisabled"
                     small
-                    @click="async (e: MouseEvent) => { await getVideo(); handleChange(e); }"
+                    @click="
+                      async (e: MouseEvent) => {
+                        await getVideo();
+                        handleChange(e);
+                      }
+                    "
                   >
                     {{ $t("VIDEOS.PAGES.DETAILS.FIELDS.ADD.ADD_BUTTON") }}
                   </VcButton>
@@ -309,7 +318,12 @@ exposeToChildren({ reload, markProductDirty });
           <div v-if="!!param || newVideoLoaded">
             <VcRow>
               <VcCol :size="1">
-                <VcImage size="xl" :src="video?.thumbnailUrl" bordered background="contain" />
+                <VcImage
+                  size="xl"
+                  :src="video?.thumbnailUrl"
+                  bordered
+                  background="contain"
+                />
               </VcCol>
               <VcCol :size="2">
                 <!-- PATTERN: VcField for read-only display fields -->
@@ -326,10 +340,23 @@ exposeToChildren({ reload, markProductDirty });
                 />
               </VcCol>
             </VcRow>
-            <VcInput v-model="video.name" :label="$t('VIDEOS.PAGES.DETAILS.FIELDS.NAME.TITLE')" required disabled />
-            <VcTextarea v-model="video.description" :label="t('VIDEOS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')" disabled />
+            <VcInput
+              v-model="video.name"
+              :label="$t('VIDEOS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
+              required
+              disabled
+            />
+            <VcTextarea
+              v-model="video.description"
+              :label="t('VIDEOS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')"
+              disabled
+            />
             <!-- PATTERN: VcVideo component for embedded video preview -->
-            <VcVideo :source="video?.embedUrl" :label="$t('VIDEOS.PAGES.DETAILS.FIELDS.PREVIEW.TITLE')" size="xxl" />
+            <VcVideo
+              :source="video?.embedUrl"
+              :label="$t('VIDEOS.PAGES.DETAILS.FIELDS.PREVIEW.TITLE')"
+              size="xxl"
+            />
           </div>
         </VcForm>
       </div>
@@ -342,7 +369,7 @@ import { computed, ref, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { IBladeToolbar, usePopup, useBlade } from "@vc-shell/framework";
 import { Video } from "../../../api_client/virtocommerce.catalog";
-import { CreateVideoCommand } from "../../../api_client/virtocommerce.marketplacevendor";
+import { CreateVideoCommand } from "../../../api_client/virtocommerce.mymodule";
 import { useVideo, useVideos } from "../composables";
 import { Field, useForm } from "vee-validate";
 
@@ -385,21 +412,21 @@ const bladeToolbar = ref<IBladeToolbar[]>([
       closeSelf();
     },
     disabled: computed(() => !newVideoLoaded.value),
-    isVisible: computed(() => !param.value),  // only visible in create mode
+    isVisible: computed(() => !param.value), // only visible in create mode
   },
   {
     id: "delete",
     title: computed(() => t("VIDEOS.PAGES.DETAILS.TOOLBAR.DELETE")),
     icon: "lucide-trash-2",
     async clickHandler() {
-      if (await showConfirmation(t("VIDEOS.PAGES.DETAILS.DELETE_CONFIRMATION.MESSAGE")) && video.value.id) {
+      if ((await showConfirmation(t("VIDEOS.PAGES.DETAILS.DELETE_CONFIRMATION.MESSAGE"))) && video.value.id) {
         await deleteVideos([video.value.id]);
         callParent("reload");
         callParent("markProductDirty");
         closeSelf();
       }
     },
-    isVisible: computed(() => !!param.value),  // only visible in edit mode
+    isVisible: computed(() => !!param.value), // only visible in edit mode
   },
 ]);
 
@@ -433,12 +460,12 @@ const validateUrl = async () => {
 
 ## Summary: Edit-blade vs Details-blade naming
 
-| Aspect | Details blade | Edit blade |
-|---|---|---|
-| Name convention | `*Details` (e.g. `TeamMemberDetails`) | `*Edit` (e.g. `VideoEdit`) |
-| Typical use | Full form with vee-validate | Lighter editing or multi-step create |
-| `onBeforeClose` | Common (unsaved changes guard) | Optional |
-| Difference | N/A | Same pattern — just a naming convention |
+| Aspect          | Details blade                         | Edit blade                              |
+| --------------- | ------------------------------------- | --------------------------------------- |
+| Name convention | `*Details` (e.g. `TeamMemberDetails`) | `*Edit` (e.g. `VideoEdit`)              |
+| Typical use     | Full form with vee-validate           | Lighter editing or multi-step create    |
+| `onBeforeClose` | Common (unsaved changes guard)        | Optional                                |
+| Difference      | N/A                                   | Same pattern — just a naming convention |
 
 Both patterns use identical framework APIs. The "edit" name is used when the blade
 primarily handles a simplified or specialized editing flow.

package/runtime/knowledge/index.md

@@ -23,6 +23,7 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 **Task:** Generates `<module>-list.vue` + `use<Entity>s` composable.
 
 ### Pattern files to read:
+
 - `knowledge/patterns/list-blade-pattern.md`
 - `knowledge/patterns/composable-list.md`
 - `knowledge/patterns/toolbar-pattern.md`
@@ -31,11 +32,13 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 ### Framework docs to read (basename glob):
 
 **Core table components (always read):**
+
 - `**/vc-blade.docs.md`
 - `**/vc-data-table.docs.md`
 - `**/vc-pagination.docs.md`
 
 **Cell renderer components (read for custom #body slots in VcColumn):**
+
 - `**/vc-status.docs.md` — for status/state columns (variant-colored badge)
 - `**/vc-status-icon.docs.md` — for boolean columns (check/cross icon)
 - `**/vc-badge.docs.md` — for count/tag columns (numeric badge, category tag)
@@ -46,6 +49,7 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 - `**/vc-tooltip.docs.md` — for columns with truncated text that need hover detail
 
 **Composable docs (always read):**
+
 - `**/useBlade.docs.md`
 - `**/useAsync.docs.md`
 - `**/useLoading.docs.md`
@@ -58,6 +62,7 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 **Task:** Generates `<module>-details.vue` + `use<Entity>` composable.
 
 ### Pattern files to read:
+
 - `knowledge/patterns/details-blade-pattern.md`
 - `knowledge/patterns/composable-details.md`
 - `knowledge/patterns/toolbar-pattern.md`
@@ -66,6 +71,7 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 ### Framework docs to read (basename glob):
 
 **Core form components (always read):**
+
 - `**/vc-blade.docs.md`
 - `**/vc-form.docs.md`
 - `**/vc-input.docs.md`
@@ -73,6 +79,7 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 - `**/vc-switch.docs.md`
 
 **Extended form components (read based on field types — see Field Type → Component Mapping in details-blade-pattern.md):**
+
 - `**/vc-textarea.docs.md` — for `text` / `rich-text` fields
 - `**/vc-editor.docs.md` — for `rich-text` fields (WYSIWYG HTML editor)
 - `**/vc-date-picker.docs.md` — for `date-time` fields (calendar widget, preferred over VcInput type="datetime-local")
@@ -88,9 +95,11 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 - `**/vc-input-group.docs.md` — for grouped inputs (prefix/suffix patterns like URL, phone)
 
 **Read-only display components (read when blade has view-only fields):**
+
 - `**/vc-field.docs.md` — for read-only key-value display (horizontal label:value, copyable, tooltip). Use instead of VcInput for non-editable data.
 
 **Layout & display components (read when the form has sections or read-only data):**
+
 - `**/vc-card.docs.md` — for grouping form sections visually (ALWAYS use for 3+ field groups)
 - `**/vc-accordion.docs.md` — for collapsible form sections
 - `**/vc-badge.docs.md` — for status indicators in form headers
@@ -100,11 +109,13 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 - `**/vc-button.docs.md` — for inline action buttons (e.g., inside banners)
 
 **Media components (read when entity has images/gallery/video):**
+
 - `**/vc-image-upload.docs.md` — for `image` fields (single image upload with preview)
 - `**/vc-gallery.docs.md` — for `gallery` / `images` fields (multi-image management)
 - `**/vc-image.docs.md` — for read-only image display
 
 **Composable docs (always read):**
+
 - `**/useBlade.docs.md`
 - `**/useAsync.docs.md`
 - `**/useModificationTracker.docs.md`
@@ -112,11 +123,13 @@ Notable location: `useDataTableSort.docs.md` is under `ui/composables/`, not `co
 - `**/validation.docs.md`
 
 **Composable docs (read when entity has related sub-entities):**
+
 - `**/useBladeWidgets.docs.md` — for blade sidebar widgets (icon buttons with badge counts that open child blades)
 
 ### Advanced patterns to read (based on design intent):
 
 Read `knowledge/patterns/` files when the design requires these patterns:
+
 - `knowledge/patterns/blade-widget.md` — when entity has related sub-entities that need sidebar widget navigation
 - `knowledge/patterns/dashboard-widget.md` — when module should contribute a dashboard card
 - `knowledge/patterns/notification-template.md` — when module needs push notification rendering
@@ -128,9 +141,11 @@ Read `knowledge/patterns/` files when the design requires these patterns:
 **Task:** Creates `index.ts`, `pages/index.ts`, `composables/index.ts`, `locales/index.ts`, and registers the module in the app's module registry.
 
 ### Pattern files to read:
+
 - `knowledge/patterns/module-structure.md`
 
 ### Framework docs to read:
+
 _(None required — module assembly is purely structural.)_
 
 ---
@@ -140,12 +155,15 @@ _(None required — module assembly is purely structural.)_
 **Task:** Generates `locales/en.json` with i18n keys for all requested blades.
 
 ### Pattern files to read:
+
 _(None — reads the already-generated blade files to extract `$t(...)` and `t(...)` calls.)_
 
 ### Framework docs to read:
+
 _(None required.)_
 
 ### Instructions:
+
 1. Read all generated `.vue` files for the module.
 2. Extract every `$t('...')` and `t('...')` call.
 3. Build a nested JSON object from the dot-separated keys (e.g., `"TEAM.PAGES.LIST.TITLE"` → `{ "TEAM": { "PAGES": { "LIST": { "TITLE": "" } } } }`).
@@ -158,9 +176,11 @@ _(None required.)_
 **Task:** Analyzes a generated API client file to discover available types and methods for user selection.
 
 ### Pattern files to read:
+
 _(None — reads the API client file directly.)_
 
 ### Framework docs to read:
+
 - `**/useApiClient.docs.md`
 - `**/useAsync.docs.md`
 
@@ -171,7 +191,9 @@ _(None — reads the API client file directly.)_
 **Task:** Runs `vue-tsc --noEmit`, analyzes errors in generated files, proposes and applies fixes.
 
 ### Pattern files to read:
+
 _(All relevant pattern files for the blade types involved — re-read before fixing.)_
 
 ### Framework docs to read:
+
 _(Read docs for any component/composable that appears in the error output.)_

package/runtime/knowledge/migration-prompts/blade-form-migration.md

@@ -19,7 +19,11 @@ const { item, loading, load, save } = useMyDetails();
 const { onBeforeClose } = useBlade();
 const { showConfirmation } = usePopup();
 
-const { errorBag, setFieldError, meta: formMeta } = useForm({
+const {
+  errorBag,
+  setFieldError,
+  meta: formMeta,
+} = useForm({
   initialValues: item,
 });
 
@@ -34,9 +38,7 @@ onBeforeClose(async () => {
   return true;
 });
 
-const canSave = computed(
-  () => isModified.value && formMeta.value.valid && !loading.value,
-);
+const canSave = computed(() => isModified.value && formMeta.value.valid && !loading.value);
 
 async function handleSave() {
   await save(item.value);
@@ -61,9 +63,13 @@ const { canSave, isModified, setBaseline, revert, setFieldError, errorBag } = us
   closeConfirmMessage: () => t("MY_MODULE.ALERTS.CLOSE_CONFIRMATION"),
 });
 
-watch(item, () => {
-  if (item.value) setBaseline();
-}, { once: true });
+watch(
+  item,
+  () => {
+    if (item.value) setBaseline();
+  },
+  { once: true },
+);
 
 async function handleSave() {
   await save(item.value);
@@ -216,7 +222,10 @@ Remove `:modified` prop from `<VcBlade>` — it is auto-detected via provide/inj
 
 ```vue
 <template>
-  <VcBlade :modified="isModified" :closable="true">
+  <VcBlade
+    :modified="isModified"
+    :closable="true"
+  >
     <!-- content -->
   </VcBlade>
 </template>

package/runtime/knowledge/migration-prompts/blade-props-migration.md

@@ -75,8 +75,7 @@ const emit = defineEmits<Emits>();
 ```typescript
 import { useBlade } from "@vc-shell/framework";
 
-const { param, options, openBlade, closeSelf, callParent } =
-  useBlade<{ sellerProduct?: SellerProduct }>();
+const { param, options, openBlade, closeSelf, callParent } = useBlade<{ sellerProduct?: SellerProduct }>();
 ```
 
 If the Props interface has other non-blade props, keep only those: