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

package/runtime/knowledge/patterns/details-blade-pattern.md

@@ -1,7 +1,6 @@
 # Details Blade Pattern
 
-Reference source: `apps/vendor-portal/src/modules/team/pages/team-member-details.vue`
-Secondary source: `apps/vendor-portal/src/modules/offers/pages/offers-details.vue`
+Generic worked example for a typical details blade (form-based, validation, modification tracking).
 
 ## Overview
 
@@ -202,7 +201,7 @@ A details blade is a form-based panel opened from a list blade (or navigation) t
               v-model="entity.agreeTerms"
               class="tw-p-3"
             >
-              {{ $t('MODULE.FIELDS.AGREE_TERMS.LABEL') }}
+              {{ $t("MODULE.FIELDS.AGREE_TERMS.LABEL") }}
             </VcCheckbox>
 
             <!-- Radio group: for enum fields with 2-5 options -->
@@ -320,24 +319,10 @@ const { showConfirmation, showError } = usePopup();
 const { meta } = useForm({ validateOnMount: false });
 
 // --- Details composable (entity + CRUD + modification tracking) ---
-const {
-  entity,
-  loading,
-  modified,
-  getXxx,
-  createXxx,
-  updateXxx,
-  deleteXxx,
-  resetEntries,
-  resetModificationState,
-} = useXxx();
+const { entity, loading, modified, getXxx, createXxx, updateXxx, deleteXxx, resetEntries, resetModificationState } = useXxx();
 
 // --- Derived state ---
-const title = computed(() =>
-  param.value
-    ? entity.value?.name ?? t("MODULE.PAGES.DETAILS.TITLE_EDIT")
-    : t("MODULE.PAGES.DETAILS.TITLE_NEW"),
-);
+const title = computed(() => (param.value ? (entity.value?.name ?? t("MODULE.PAGES.DETAILS.TITLE_EDIT")) : t("MODULE.PAGES.DETAILS.TITLE_NEW")));
 
 // Disabled when form is pristine/invalid
 const isDisabled = computed(() => !meta.value.dirty || !meta.value.valid);
@@ -388,12 +373,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     title: computed(() => t("MODULE.PAGES.DETAILS.TOOLBAR.DELETE")),
     icon: "lucide-trash-2",
     async clickHandler() {
-      if (
-        param.value &&
-        (await showConfirmation(
-          computed(() => t("MODULE.PAGES.DETAILS.POPUP.ALERT.DELETE")),
-        ))
-      ) {
+      if (param.value && (await showConfirmation(computed(() => t("MODULE.PAGES.DETAILS.POPUP.ALERT.DELETE"))))) {
         await deleteXxx({ id: param.value });
         callParent("reload");
         closeSelf();
@@ -427,9 +407,7 @@ onMounted(async () => {
 // --- Close guard ---
 onBeforeClose(async () => {
   if (modified.value) {
-    return !(await showConfirmation(
-      unref(computed(() => t("MODULE.PAGES.ALERTS.CLOSE_CONFIRMATION"))),
-    ));
+    return !(await showConfirmation(unref(computed(() => t("MODULE.PAGES.ALERTS.CLOSE_CONFIRMATION")))));
   }
   return false;
 });
@@ -440,15 +418,15 @@ onBeforeClose(async () => {
 
 ## Field Type Mapping
 
-| TypeScript/API type     | Component              | Notes                                      |
-|-------------------------|------------------------|--------------------------------------------|
-| `string`                | `VcInput`              | Default; add `rules="required"` if needed  |
-| `boolean`               | `VcSwitch`             | No `Field` wrapper needed                  |
-| enum / reference type   | `VcSelect`             | Supply `:options`, `option-value`, `option-label` |
-| `Date` / `DateTime`     | `VcInput type="datetime-local"` | Or `VcDatePicker` if available in project |
-| `number` / `bigint`     | `VcInput type="number"` | Add `rules="bigint|min_value:0"` for integers |
-| `string[]` / array      | `VcDataTable`          | Inline read-only table (see Nested Collections) |
-| nested object array     | `VcDataTable`          | Inline read-only table (see Nested Collections) |
+| TypeScript/API type   | Component                       | Notes                                             |
+| --------------------- | ------------------------------- | ------------------------------------------------- | -------------------------- |
+| `string`              | `VcInput`                       | Default; add `rules="required"` if needed         |
+| `boolean`             | `VcSwitch`                      | No `Field` wrapper needed                         |
+| enum / reference type | `VcSelect`                      | Supply `:options`, `option-value`, `option-label` |
+| `Date` / `DateTime`   | `VcInput type="datetime-local"` | Or `VcDatePicker` if available in project         |
+| `number` / `bigint`   | `VcInput type="number"`         | Add `rules="bigint                                | min_value:0"` for integers |
+| `string[]` / array    | `VcDataTable`                   | Inline read-only table (see Nested Collections)   |
+| nested object array   | `VcDataTable`                   | Inline read-only table (see Nested Collections)   |
 
 ---
 
@@ -456,15 +434,16 @@ onBeforeClose(async () => {
 
 Rules are composed with `|` (pipe) separator:
 
-| Rule          | Example                            | Description                    |
-|---------------|------------------------------------|--------------------------------|
-| `required`    | `rules="required"`                 | Field must have a value        |
-| `email`       | `rules="required|email"`           | Valid email format             |
-| `min:N`       | `rules="required|min:3"`           | Minimum string length          |
-| `min_value:N` | `rules="required|min_value:0"`     | Minimum numeric value          |
-| `bigint`      | `rules="bigint|min_value:0"`       | Integer (no decimals)          |
+| Rule          | Example            | Description             |
+| ------------- | ------------------ | ----------------------- | --------------------- |
+| `required`    | `rules="required"` | Field must have a value |
+| `email`       | `rules="required   | email"`                 | Valid email format    |
+| `min:N`       | `rules="required   | min:3"`                 | Minimum string length |
+| `min_value:N` | `rules="required   | min_value:0"`           | Minimum numeric value |
+| `bigint`      | `rules="bigint     | min_value:0"`           | Integer (no decimals) |
 
 **Dynamic rules** via `:rules` binding:
+
 ```vue
 <Field
   :rules="entity.trackInventory ? 'required|bigint|min_value:0' : 'bigint|min_value:0'"
@@ -494,8 +473,8 @@ Define columns as a computed from the nested type's fields:
 ```ts
 const lineItemColumns = computed<ITableColumns[]>(() => [
   { id: "productName", title: t("MODULE.LINE_ITEMS.PRODUCT"), alwaysVisible: true },
-  { id: "quantity",    title: t("MODULE.LINE_ITEMS.QUANTITY") },
-  { id: "price",       title: t("MODULE.LINE_ITEMS.PRICE") },
+  { id: "quantity", title: t("MODULE.LINE_ITEMS.QUANTITY") },
+  { id: "price", title: t("MODULE.LINE_ITEMS.PRICE") },
 ]);
 ```
 
@@ -507,8 +486,6 @@ The `VcDataTable` here is read-only — no toolbar, no selection, no pagination
 
 For details blades that display data without editing (e.g., order details, transaction history), use `VcField` instead of `VcInput`. This is a common pattern for view-only pages.
 
-Source: `apps/vendor-portal/src/modules/orders/pages/order-details.vue`
-
 ```vue
 <VcCard :header="$t('MODULE.SECTIONS.INFO.TITLE')">
   <div class="tw-p-4 tw-space-y-4">
@@ -541,12 +518,14 @@ Source: `apps/vendor-portal/src/modules/orders/pages/order-details.vue`
 ```
 
 Key `VcField` props:
+
 - `orientation="horizontal"` — label left, value right (default is vertical)
 - `:aspect-ratio="[1, 2]"` — label takes 1/3, value takes 2/3
 - `copyable` — adds a copy-to-clipboard button
 - `:tooltip` — adds an info icon with hover text
 
 Use `VcField` when:
+
 - The blade is read-only (order details, audit log, transaction view)
 - Showing summary/computed data that users don't edit
 - Displaying key-value pairs in a structured layout
@@ -557,17 +536,9 @@ Use `VcField` when:
 
 Use `VcBanner` at the top of a form to show contextual alerts, warnings, or informational messages based on entity state.
 
-Source: `apps/vendor-portal/src/modules/offers/pages/offers-details.vue`, `seller-details-edit.vue`
-
 ```vue
 <!-- Error banner (shown conditionally) -->
-<VcBanner
-  v-if="errorMessage"
-  variant="danger"
-  icon="lucide-alert-circle"
-  icon-size="l"
-  icon-variant="danger"
->
+<VcBanner v-if="errorMessage" variant="danger" icon="lucide-alert-circle" icon-size="l" icon-variant="danger">
   <template #title>
     {{ $t("MODULE.ALERTS.ERROR") }}
   </template>
@@ -577,22 +548,12 @@ Source: `apps/vendor-portal/src/modules/offers/pages/offers-details.vue`, `selle
 </VcBanner>
 
 <!-- Info banner with action button -->
-<VcBanner
-  v-if="!entity.id"
-  variant="info"
-  icon="lucide-lightbulb"
-  icon-size="l"
->
+<VcBanner v-if="!entity.id" variant="info" icon="lucide-lightbulb" icon-size="l">
   {{ $t("MODULE.ALERTS.CREATE_NEW_HINT") }}
 </VcBanner>
 
 <!-- Warning banner with inline action -->
-<VcBanner
-  v-if="entity.id && !entity.priceLists?.length"
-  variant="info"
-  icon="lucide-lightbulb"
-  icon-size="l"
->
+<VcBanner v-if="entity.id && !entity.priceLists?.length" variant="info" icon="lucide-lightbulb" icon-size="l">
   <div class="tw-flex tw-flex-row tw-justify-between tw-items-center">
     <span>{{ $t("MODULE.ALERTS.MISSING_PRICES") }}</span>
     <VcButton
@@ -609,6 +570,7 @@ Source: `apps/vendor-portal/src/modules/offers/pages/offers-details.vue`, `selle
 Banner variants: `"info"`, `"warning"`, `"danger"`, `"success"`.
 
 Use banners when:
+
 - Entity is in a special state (new, error, incomplete)
 - User needs to take action (missing required data)
 - Showing validation errors at form level
@@ -619,27 +581,25 @@ Use banners when:
 
 Blade widgets appear as icon buttons in the blade sidebar, showing related entities with badge counts. Clicking a widget opens a child blade.
 
-Source: `apps/vendor-portal/src/modules/products/widgets/useProductWidgets.ts`
-
 ```ts
 import { useBladeWidgets, type UseBladeWidgetsReturn } from "@vc-shell/framework";
 
-export function useProductWidgets(options: { item: Ref<Product | undefined> }): UseBladeWidgetsReturn {
+export function useEntityWidgets(options: { item: Ref<Entity | undefined> }): UseBladeWidgetsReturn {
   const { item } = options;
   const { openBlade } = useBlade();
 
-  const { count: offersCount, loading: offersLoading, refresh: refreshOffers } = useOfferCount(item);
+  const { count: childCount, loading: childLoading, refresh: refreshChildren } = useChildCount(item);
 
   const widgets = useBladeWidgets([
     {
-      id: "OffersWidget",
+      id: "ChildListWidget",
       icon: "lucide-tag",
-      title: "PRODUCTS.PAGES.DETAILS.WIDGETS.OFFERS",
-      badge: offersCount,
-      loading: offersLoading,
+      title: "MODULE.PAGES.DETAILS.WIDGETS.CHILD_LIST",
+      badge: childCount,
+      loading: childLoading,
       isVisible: computed(() => !!item.value?.id),
-      onClick: () => openBlade({ name: "Offers", options: { product: item.value } }),
-      onRefresh: refreshOffers,
+      onClick: () => openBlade({ name: "ChildList", options: { entity: item.value } }),
+      onRefresh: refreshChildren,
     },
     // ... more widgets
   ]);
@@ -649,12 +609,14 @@ export function useProductWidgets(options: { item: Ref<Product | undefined> }):
 ```
 
 Use in the blade:
+
 ```ts
-const { widgets } = useProductWidgets({ item: entity });
+const { widgets } = useEntityWidgets({ item: entity });
 ```
 
 Use widgets when:
-- Entity has related sub-entities (product → offers, videos, assets)
+
+- Entity has related sub-entities (parent → children, attachments, history)
 - You want sidebar navigation with counts
 - Each widget opens a different child blade
 
@@ -676,46 +638,46 @@ Use widgets when:
 
 Use this table to choose the correct component for each field type during generation. The `formField.type` value comes from the design prompt analysis (Phase 2 of `/vc-app design`) or from API type inference.
 
-| Field Type | Component | When to Use | Notes |
-|---|---|---|---|
-| `string` | `VcInput` | Default for short text (name, title, email, phone, URL) | Use `type="number"` for numeric strings, `rules="email"` for emails |
-| `text` | `VcTextarea` | Long text: description, notes, comments, bio | Multi-line input, no formatting |
-| `rich-text` | `VcEditor` | HTML content: article body, email template, product description | WYSIWYG HTML editor |
-| `number` | `VcInput` | Plain numbers: quantity, count, age, priority | Set `type="number"`, use `rules="bigint\|min_value:0"` |
-| `currency` | `VcInputCurrency` | Money: price, cost, amount, salary, budget | Formatted with currency symbol and decimals |
-| `boolean` | `VcSwitch` | Toggle: isActive, isEnabled, isPublished | No `Field` wrapper needed |
-| `boolean` | `VcCheckbox` | Consent/agree: agreeTerms, acceptPolicy | Use when "agree/accept" semantics, not toggle |
-| `date-time` | `VcDatePicker` | Date/datetime: createdDate, deadline, startDate, birthday | Calendar picker, preferred over `VcInput type="datetime-local"` |
-| `enum` | `VcSelect` | Dropdown: status, type, category (6+ options or dynamic) | Use `option-value` + `option-label` |
-| `enum` | `VcRadioGroup` | Radio: priority, type (2-5 static options) | More visual for small option sets |
-| `multi-select` | `VcMultivalue` | Tags/multi-pick: tags, categories, permissions, roles | Tag-style chips with add/remove |
-| `multi-select` | `VcCheckboxGroup` | Multi-check: features, capabilities (few static options) | Vertical checkbox list |
-| `rating` | `VcRating` | Star rating: rating, score, quality | 1-5 star picker |
-| `range` | `VcSlider` | Range: discount, opacity, volume, percentage | Numeric slider with min/max |
-| `color` | `VcColorInput` | Color: brandColor, backgroundColor, themeColor | Color picker with hex input |
-| `image` | `VcImageUpload` | Single image: avatar, logo, thumbnail, banner | Upload with preview |
-| `gallery` | `VcGallery` | Multiple images: productPhotos, screenshots | Multi-image management grid |
-| `file` | `VcFileUpload` | Attachment: document, contract, certificate | File upload with accept filter |
+| Field Type     | Component         | When to Use                                                     | Notes                                                               |
+| -------------- | ----------------- | --------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `string`       | `VcInput`         | Default for short text (name, title, email, phone, URL)         | Use `type="number"` for numeric strings, `rules="email"` for emails |
+| `text`         | `VcTextarea`      | Long text: description, notes, comments, bio                    | Multi-line input, no formatting                                     |
+| `rich-text`    | `VcEditor`        | HTML content: article body, email template, product description | WYSIWYG HTML editor                                                 |
+| `number`       | `VcInput`         | Plain numbers: quantity, count, age, priority                   | Set `type="number"`, use `rules="bigint\|min_value:0"`              |
+| `currency`     | `VcInputCurrency` | Money: price, cost, amount, salary, budget                      | Formatted with currency symbol and decimals                         |
+| `boolean`      | `VcSwitch`        | Toggle: isActive, isEnabled, isPublished                        | No `Field` wrapper needed                                           |
+| `boolean`      | `VcCheckbox`      | Consent/agree: agreeTerms, acceptPolicy                         | Use when "agree/accept" semantics, not toggle                       |
+| `date-time`    | `VcDatePicker`    | Date/datetime: createdDate, deadline, startDate, birthday       | Calendar picker, preferred over `VcInput type="datetime-local"`     |
+| `enum`         | `VcSelect`        | Dropdown: status, type, category (6+ options or dynamic)        | Use `option-value` + `option-label`                                 |
+| `enum`         | `VcRadioGroup`    | Radio: priority, type (2-5 static options)                      | More visual for small option sets                                   |
+| `multi-select` | `VcMultivalue`    | Tags/multi-pick: tags, categories, permissions, roles           | Tag-style chips with add/remove                                     |
+| `multi-select` | `VcCheckboxGroup` | Multi-check: features, capabilities (few static options)        | Vertical checkbox list                                              |
+| `rating`       | `VcRating`        | Star rating: rating, score, quality                             | 1-5 star picker                                                     |
+| `range`        | `VcSlider`        | Range: discount, opacity, volume, percentage                    | Numeric slider with min/max                                         |
+| `color`        | `VcColorInput`    | Color: brandColor, backgroundColor, themeColor                  | Color picker with hex input                                         |
+| `image`        | `VcImageUpload`   | Single image: avatar, logo, thumbnail, banner                   | Upload with preview                                                 |
+| `gallery`      | `VcGallery`       | Multiple images: productPhotos, screenshots                     | Multi-image management grid                                         |
+| `file`         | `VcFileUpload`    | Attachment: document, contract, certificate                     | File upload with accept filter                                      |
 
 ### Selection heuristics (when type is ambiguous)
 
 When the field type from prompt analysis is plain `"string"`, use field name patterns to upgrade:
 
-| Field name pattern | Upgrade to |
-|---|---|
-| `description`, `notes`, `comment`, `bio`, `summary`, `about` | `text` → `VcTextarea` |
-| `body`, `content`, `html`, `template`, `article` | `rich-text` → `VcEditor` |
-| `price`, `cost`, `amount`, `total`, `salary`, `budget`, `fee` | `currency` → `VcInputCurrency` |
-| `avatar`, `logo`, `photo`, `thumbnail`, `banner`, `icon` | `image` → `VcImageUpload` |
-| `photos`, `images`, `screenshots`, `gallery` | `gallery` → `VcGallery` |
-| `file`, `attachment`, `document`, `contract`, `certificate` | `file` → `VcFileUpload` |
-| `tags`, `labels`, `categories`, `roles`, `permissions` | `multi-select` → `VcMultivalue` |
-| `rating`, `score`, `stars` | `rating` → `VcRating` |
-| `color`, `colour`, `brandColor`, `backgroundColor` | `color` → `VcColorInput` |
-| `discount`, `opacity`, `volume`, `percentage`, `progress` | `range` → `VcSlider` |
-| `email` | `string` → `VcInput` with `rules="required\|email"` |
-| `phone`, `tel` | `string` → `VcInput` with `type="tel"` |
-| `url`, `website`, `link` | `string` → `VcInput` with `type="url"` |
+| Field name pattern                                            | Upgrade to                                          |
+| ------------------------------------------------------------- | --------------------------------------------------- |
+| `description`, `notes`, `comment`, `bio`, `summary`, `about`  | `text` → `VcTextarea`                               |
+| `body`, `content`, `html`, `template`, `article`              | `rich-text` → `VcEditor`                            |
+| `price`, `cost`, `amount`, `total`, `salary`, `budget`, `fee` | `currency` → `VcInputCurrency`                      |
+| `avatar`, `logo`, `photo`, `thumbnail`, `banner`, `icon`      | `image` → `VcImageUpload`                           |
+| `photos`, `images`, `screenshots`, `gallery`                  | `gallery` → `VcGallery`                             |
+| `file`, `attachment`, `document`, `contract`, `certificate`   | `file` → `VcFileUpload`                             |
+| `tags`, `labels`, `categories`, `roles`, `permissions`        | `multi-select` → `VcMultivalue`                     |
+| `rating`, `score`, `stars`                                    | `rating` → `VcRating`                               |
+| `color`, `colour`, `brandColor`, `backgroundColor`            | `color` → `VcColorInput`                            |
+| `discount`, `opacity`, `volume`, `percentage`, `progress`     | `range` → `VcSlider`                                |
+| `email`                                                       | `string` → `VcInput` with `rules="required\|email"` |
+| `phone`, `tel`                                                | `string` → `VcInput` with `type="tel"`              |
+| `url`, `website`, `link`                                      | `string` → `VcInput` with `type="url"`              |
 
 ### Layout heuristics
 

package/runtime/knowledge/patterns/extension-points-usage.md

@@ -17,10 +17,10 @@ Cross-module UI composition without compile-time dependencies. One module declar
 
 ### Two Roles
 
-| Role | API | Purpose |
-|------|-----|---------|
-| **Host** | `<ExtensionPoint>` or `defineExtensionPoint()` | Declares a named region that accepts plugins |
-| **Plugin** | `useExtensionPoint()` | Registers components into a named region |
+| Role       | API                                            | Purpose                                      |
+| ---------- | ---------------------------------------------- | -------------------------------------------- |
+| **Host**   | `<ExtensionPoint>` or `defineExtensionPoint()` | Declares a named region that accepts plugins |
+| **Plugin** | `useExtensionPoint()`                          | Registers components into a named region     |
 
 Neither side imports the other. They communicate through a shared **name string**.
 
@@ -50,7 +50,7 @@ The simplest approach -- declares the point and renders registered components in
 
     <ExtensionPoint
       v-if="sellerDetails?.id"
-      name="seller:commissions"
+      name="entity:custom-fields"
       wrapper-class="tw-p-2"
     />
   </VcBlade>
@@ -63,14 +63,14 @@ import { ExtensionPoint } from "@vc-shell/framework";
 
 **Props:**
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | required | Extension point name |
-| `separator` | `boolean` | `false` | Adds `<hr>` before components |
-| `separatorClass` | `string` | built-in | Custom CSS class for `<hr>` |
-| `wrapperClass` | `string` | none | CSS class for wrapper div |
-| `gap` | `string` | none | CSS gap (e.g. `"1rem"`) |
-| `filter` | `Record<string, unknown>` | none | Filter by meta field equality |
+| Prop             | Type                      | Default  | Description                   |
+| ---------------- | ------------------------- | -------- | ----------------------------- |
+| `name`           | `string`                  | required | Extension point name          |
+| `separator`      | `boolean`                 | `false`  | Adds `<hr>` before components |
+| `separatorClass` | `string`                  | built-in | Custom CSS class for `<hr>`   |
+| `wrapperClass`   | `string`                  | none     | CSS class for wrapper div     |
+| `gap`            | `string`                  | none     | CSS gap (e.g. `"1rem"`)       |
+| `filter`         | `Record<string, unknown>` | none     | Filter by meta field equality |
 
 ### Composable: `defineExtensionPoint()`
 
@@ -118,17 +118,19 @@ A module registers components into an extension point declared by another module
 ```typescript
 // commissions-module/index.ts
 import { defineAppModule, useExtensionPoint } from "@vc-shell/framework";
-import CommissionFields from "./components/CommissionFields.vue";
+import CustomFields from "./components/CustomFields.vue";
 
-const { add } = useExtensionPoint("seller:commissions");
+const { add } = useExtensionPoint("entity:custom-fields");
 add({
-  id: "marketplace:commission-fields",
-  component: CommissionFields,
+  id: "module:custom-fields",
+  component: CustomFields,
   props: { editable: true },
   priority: 10,
 });
 
-export default defineAppModule({ /* locales, blades, etc. */ });
+export default defineAppModule({
+  /* locales, blades, etc. */
+});
 ```
 
 ### Using Framework Constants
@@ -149,14 +151,14 @@ add({
 
 Currently defined framework constants:
 
-| Constant | Value | Location |
-|----------|-------|----------|
+| Constant                          | Value               | Location                       |
+| --------------------------------- | ------------------- | ------------------------------ |
 | `ExtensionPoints.AUTH_AFTER_FORM` | `"auth:after-form"` | Login page, below sign-in form |
 
 ### Removing a Registration
 
 ```typescript
-const { add, remove } = useExtensionPoint("seller:commissions");
+const { add, remove } = useExtensionPoint("entity:custom-fields");
 add({ id: "my-fields", component: MyFields });
 
 // Later (e.g., during cleanup):
@@ -172,8 +174,8 @@ Props are passed via the `props` field in `add()` and bound with `v-bind`:
 ```typescript
 add({
   id: "commission-fields",
-  component: CommissionFields,
-  props: { editable: true, sellerId: "abc-123" },
+  component: CustomFields,
+  props: { editable: true, entityId: "abc-123" },
   priority: 10,
 });
 ```
@@ -184,7 +186,7 @@ The injected component receives them as standard Vue props:
 <script setup lang="ts">
 const props = defineProps<{
   editable?: boolean;
-  sellerId?: string;
+  entityId?: string;
 }>();
 </script>
 ```
@@ -199,19 +201,25 @@ Categorize extensions with `meta` and render different subsets in different loca
 
 ```typescript
 const { add } = useExtensionPoint("product:details");
-add({ id: "specs-tab",    component: SpecsTab,    meta: { zone: "tabs" },    priority: 10 });
-add({ id: "review-tab",   component: ReviewTab,   meta: { zone: "tabs" },    priority: 20 });
-add({ id: "quick-action", component: QuickAction,  meta: { zone: "toolbar" } });
+add({ id: "specs-tab", component: SpecsTab, meta: { zone: "tabs" }, priority: 10 });
+add({ id: "review-tab", component: ReviewTab, meta: { zone: "tabs" }, priority: 20 });
+add({ id: "quick-action", component: QuickAction, meta: { zone: "toolbar" } });
 ```
 
 ```vue
 <template>
   <VcBlade title="Product Details">
     <div class="toolbar">
-      <ExtensionPoint name="product:details" :filter="{ zone: 'toolbar' }" />
+      <ExtensionPoint
+        name="product:details"
+        :filter="{ zone: 'toolbar' }"
+      />
     </div>
     <div class="tabs">
-      <ExtensionPoint name="product:details" :filter="{ zone: 'tabs' }" />
+      <ExtensionPoint
+        name="product:details"
+        :filter="{ zone: 'tabs' }"
+      />
     </div>
   </VcBlade>
 </template>
@@ -259,7 +267,9 @@ add({
   priority: 20,
 });
 
-export default defineAppModule({ /* ... */ });
+export default defineAppModule({
+  /* ... */
+});
 ```
 
 **Step 3 -- The injected component:**
@@ -286,23 +296,22 @@ const carrier = ref("FedEx");
 
 ## Common Mistakes
 
-| Mistake | Symptom | Fix |
-|---------|---------|-----|
-| Typo in extension point name | Component registered but never rendered | Check dev console for `"Extension point X is not declared"` warning. Use shared constants. |
-| Duplicate `id` across modules | Later registration silently replaces the earlier one | Prefix IDs with module name: `"shipping:tracking-tab"` |
-| Forgetting `import { ExtensionPoint }` in host template | Vue renders nothing (unknown component) | Add the import in `<script setup>` |
-| Calling `defineExtensionPoint` outside setup context | Computed refs not reactive | Call inside `<script setup>` or a composable used during setup |
+| Mistake                                                 | Symptom                                              | Fix                                                                                        |
+| ------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| Typo in extension point name                            | Component registered but never rendered              | Check dev console for `"Extension point X is not declared"` warning. Use shared constants. |
+| Duplicate `id` across modules                           | Later registration silently replaces the earlier one | Prefix IDs with module name: `"shipping:tracking-tab"`                                     |
+| Forgetting `import { ExtensionPoint }` in host template | Vue renders nothing (unknown component)              | Add the import in `<script setup>`                                                         |
+| Calling `defineExtensionPoint` outside setup context    | Computed refs not reactive                           | Call inside `<script setup>` or a composable used during setup                             |
 
 ---
 
 ## Related
 
-| Resource | Path |
-|----------|------|
+| Resource                            | Path                                                               |
+| ----------------------------------- | ------------------------------------------------------------------ |
 | Extension Points Plugin (full docs) | `framework/core/plugins/extension-points/extension-points.docs.md` |
-| Store implementation | `framework/core/plugins/extension-points/store.ts` |
-| ExtensionPoint component | `framework/core/plugins/extension-points/ExtensionPoint.vue` |
-| Types | `framework/core/plugins/extension-points/types.ts` |
-| Public API exports | `framework/core/plugins/extension-points/public.ts` |
-| Real-world host usage | `apps/vendor-portal/src/modules/seller-details/pages/seller-details-edit.vue` |
-| Framework host usage | `framework/shell/auth/LoginPage/components/login/Login.vue` |
+| Store implementation                | `framework/core/plugins/extension-points/store.ts`                 |
+| ExtensionPoint component            | `framework/core/plugins/extension-points/ExtensionPoint.vue`       |
+| Types                               | `framework/core/plugins/extension-points/types.ts`                 |
+| Public API exports                  | `framework/core/plugins/extension-points/public.ts`                |
+| Framework host usage                | `framework/shell/auth/LoginPage/components/login/Login.vue`        |