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

package/runtime/knowledge/docs/ui/components/organisms/vc-sidebar/vc-sidebar.docs.md

@@ -15,7 +15,12 @@ A slide-over panel for contextual workflows, settings, and detail views. Support
 <template>
   <VcButton @click="open = true">Open Sidebar</VcButton>
 
-  <VcSidebar v-model="open" title="Settings" position="right" size="md">
+  <VcSidebar
+    v-model="open"
+    title="Settings"
+    position="right"
+    size="md"
+  >
     <div class="tw-p-4">Sidebar content</div>
 
     <template #footer>
@@ -34,41 +39,41 @@ const open = ref(false);
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `boolean` | *required* | Open/close state (v-model). |
-| `position` | `"left" \| "right" \| "bottom"` | `"right"` | Slide-in direction. |
-| `size` | `"sm" \| "md" \| "lg" \| "full"` | `"sm"` | Panel size preset (300/380/520px or full viewport). |
-| `variant` | `"default" \| "elevated" \| "minimal"` | `"default"` | Visual style. |
-| `width` | `number \| string` | -- | Custom width override (left/right positions). |
-| `height` | `number \| string` | -- | Custom height override (bottom position). |
-| `title` | `string` | `""` | Header title text. |
-| `subtitle` | `string` | `""` | Header subtitle text. |
-| `showOverlay` | `boolean` | `true` | Show backdrop overlay. |
-| `closeOnOverlay` | `boolean` | `true` | Close when clicking overlay. |
-| `closeOnEscape` | `boolean` | `true` | Close on Escape key. |
-| `closeButton` | `boolean` | `true` | Show close button in header. |
-| `trapFocus` | `boolean` | `true` | Trap keyboard focus inside panel. |
-| `lockScroll` | `boolean` | `true` | Prevent body scroll while open. |
-| `inset` | `boolean` | `true` | Add rounded inset gap from viewport edges. |
-| `draggable` | `boolean` | `false` | Enable swipe-to-dismiss (bottom only). |
-| `dragHandle` | `boolean` | `false` | Show iOS-style drag handle bar. |
+| Prop             | Type                                   | Default     | Description                                         |
+| ---------------- | -------------------------------------- | ----------- | --------------------------------------------------- |
+| `modelValue`     | `boolean`                              | _required_  | Open/close state (v-model).                         |
+| `position`       | `"left" \| "right" \| "bottom"`        | `"right"`   | Slide-in direction.                                 |
+| `size`           | `"sm" \| "md" \| "lg" \| "full"`       | `"sm"`      | Panel size preset (300/380/520px or full viewport). |
+| `variant`        | `"default" \| "elevated" \| "minimal"` | `"default"` | Visual style.                                       |
+| `width`          | `number \| string`                     | --          | Custom width override (left/right positions).       |
+| `height`         | `number \| string`                     | --          | Custom height override (bottom position).           |
+| `title`          | `string`                               | `""`        | Header title text.                                  |
+| `subtitle`       | `string`                               | `""`        | Header subtitle text.                               |
+| `showOverlay`    | `boolean`                              | `true`      | Show backdrop overlay.                              |
+| `closeOnOverlay` | `boolean`                              | `true`      | Close when clicking overlay.                        |
+| `closeOnEscape`  | `boolean`                              | `true`      | Close on Escape key.                                |
+| `closeButton`    | `boolean`                              | `true`      | Show close button in header.                        |
+| `trapFocus`      | `boolean`                              | `true`      | Trap keyboard focus inside panel.                   |
+| `lockScroll`     | `boolean`                              | `true`      | Prevent body scroll while open.                     |
+| `inset`          | `boolean`                              | `true`      | Add rounded inset gap from viewport edges.          |
+| `draggable`      | `boolean`                              | `false`     | Enable swipe-to-dismiss (bottom only).              |
+| `dragHandle`     | `boolean`                              | `false`     | Show iOS-style drag handle bar.                     |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `boolean` | v-model update. |
-| `close` | `SidebarCloseReason` | Reason: `"overlay"`, `"escape"`, or `"action"`. |
+| Event               | Payload              | Description                                     |
+| ------------------- | -------------------- | ----------------------------------------------- |
+| `update:modelValue` | `boolean`            | v-model update.                                 |
+| `close`             | `SidebarCloseReason` | Reason: `"overlay"`, `"escape"`, or `"action"`. |
 
 ## Slots
 
-| Slot | Props | Description |
-|------|-------|-------------|
-| `default` | -- | Main content area. |
-| `header` | `{ close }` | Custom header replacing title + close button. |
-| `actions` | `{ close }` | Extra buttons in the header actions area. |
-| `footer` | -- | Sticky footer area. |
+| Slot      | Props       | Description                                   |
+| --------- | ----------- | --------------------------------------------- |
+| `default` | --          | Main content area.                            |
+| `header`  | `{ close }` | Custom header replacing title + close button. |
+| `actions` | `{ close }` | Extra buttons in the header actions area.     |
+| `footer`  | --          | Sticky footer area.                           |
 
 ## Features
 
@@ -86,11 +91,11 @@ When `position="bottom"` and `draggable` is true, users can swipe the panel down
 
 ### Size Presets
 
-| Size | Width/Height |
-|------|-------------|
-| `sm` | 300px |
-| `md` | 380px |
-| `lg` | 520px |
+| Size   | Width/Height  |
+| ------ | ------------- |
+| `sm`   | 300px         |
+| `md`   | 380px         |
+| `lg`   | 520px         |
 | `full` | Full viewport |
 
 Override with the `width` or `height` prop for custom dimensions.
@@ -138,20 +143,53 @@ function resetFilters() {
 </script>
 
 <template>
-  <VcButton icon="lucide-filter" @click="showFilters = true">Filters</VcButton>
-
-  <VcSidebar v-model="showFilters" title="Filters" position="right" size="sm">
+  <VcButton
+    icon="lucide-filter"
+    @click="showFilters = true"
+    >Filters</VcButton
+  >
+
+  <VcSidebar
+    v-model="showFilters"
+    title="Filters"
+    position="right"
+    size="sm"
+  >
     <div class="tw-p-4 tw-space-y-4">
-      <VcSelect label="Status" v-model="filters.status" :options="statusOptions" />
-      <VcInput label="Date From" v-model="filters.dateFrom" type="date" />
-      <VcInput label="Date To" v-model="filters.dateTo" type="date" />
-      <VcSelect label="Category" v-model="filters.category" :options="categoryOptions" />
+      <VcSelect
+        label="Status"
+        v-model="filters.status"
+        :options="statusOptions"
+      />
+      <VcInput
+        label="Date From"
+        v-model="filters.dateFrom"
+        type="date"
+      />
+      <VcInput
+        label="Date To"
+        v-model="filters.dateTo"
+        type="date"
+      />
+      <VcSelect
+        label="Category"
+        v-model="filters.category"
+        :options="categoryOptions"
+      />
     </div>
 
     <template #footer>
       <div class="tw-flex tw-gap-2 tw-p-4">
-        <VcButton variant="primary" @click="applyFilters">Apply</VcButton>
-        <VcButton variant="outline" @click="resetFilters">Reset</VcButton>
+        <VcButton
+          variant="primary"
+          @click="applyFilters"
+          >Apply</VcButton
+        >
+        <VcButton
+          variant="outline"
+          @click="resetFilters"
+          >Reset</VcButton
+        >
       </div>
     </template>
   </VcSidebar>

package/runtime/knowledge/docs/ui/composables/ui-composables.docs.md

@@ -8,14 +8,14 @@ All composables are exported from `framework/ui/composables/index.ts` and availa
 
 ## Exports
 
-| Composable | Purpose |
-|---|---|
-| `useAdaptiveItems` | Measures and distributes items into visible/hidden groups based on container width |
-| `useScrollArrows` | Tracks scroll overflow state and provides animated scroll-by-arrow controls |
-| `useFloatingPosition` | Wrapper around `@floating-ui/vue` with sensible defaults for dropdowns/tooltips |
-| `useTeleportTarget` | Resolves a consistent teleport target (explicit target, app root, or body) |
-| `useFormField` | Shared form field logic: unique IDs, ARIA attributes, InputGroup integration |
-| `useCollapsible` | Expand/collapse panel with measured content height and CSS transitions |
+| Composable            | Purpose                                                                            |
+| --------------------- | ---------------------------------------------------------------------------------- |
+| `useAdaptiveItems`    | Measures and distributes items into visible/hidden groups based on container width |
+| `useScrollArrows`     | Tracks scroll overflow state and provides animated scroll-by-arrow controls        |
+| `useFloatingPosition` | Wrapper around `@floating-ui/vue` with sensible defaults for dropdowns/tooltips    |
+| `useTeleportTarget`   | Resolves a consistent teleport target (explicit target, app root, or body)         |
+| `useFormField`        | Shared form field logic: unique IDs, ARIA attributes, InputGroup integration       |
+| `useCollapsible`      | Expand/collapse panel with measured content height and CSS transitions             |
 
 ## API Details
 

package/runtime/knowledge/docs/ui/composables/useDataTablePagination.docs.md

@@ -0,0 +1,164 @@
+# useDataTablePagination
+
+Manages page-level pagination state for `VcDataTable`. Derives `pages`, `skip`, `totalCount` from a reactive input, and fires an optional `onPageChange` callback when the page changes. Returns a `reactive()` object — all properties are plain values (no `.value` needed), and the object is directly passable as the VcDataTable `:pagination` prop.
+
+Follows the same event-callback pattern as VueUse's `useOffsetPagination`.
+
+## When to Use
+
+- You are using `VcDataTable` with `:pagination` prop and `@pagination-click` event
+- You want to eliminate the `Math.ceil` / `Math.floor` pagination boilerplate from data composables
+- You want a single object to bind as `:pagination`, `:total-count`, and `@pagination-click`
+
+## When NOT to Use
+
+- You are using infinite scroll (`infiniteScroll` prop) — no pagination needed
+- The table is client-side only with all items loaded — VcDataTable handles display internally
+
+## Basic Usage
+
+```typescript
+import { useDataTablePagination } from "@vc-shell/framework";
+
+const pagination = useDataTablePagination({
+  pageSize: 20,
+  totalCount: computed(() => searchResult.value?.totalCount ?? 0),
+  onPageChange: ({ skip }) => loadItems({ ...searchQuery.value, skip }),
+});
+```
+
+```vue
+<VcDataTable :items="items" :total-count="pagination.totalCount" :pagination="pagination" @pagination-click="pagination.goToPage" />
+```
+
+## API
+
+### Parameters (Options)
+
+| Option         | Type                                              | Default     | Description                                      |
+| -------------- | ------------------------------------------------- | ----------- | ------------------------------------------------ |
+| `totalCount`   | `MaybeRefOrGetter<number>`                        | _required_  | Total item count from API response               |
+| `pageSize`     | `MaybeRefOrGetter<number>`                        | `20`        | Items per page                                   |
+| `onPageChange` | `(state: { page: number; skip: number }) => void` | `undefined` | Event callback fired when `goToPage()` is called |
+
+### Returns (`reactive()` object)
+
+| Property      | Type                     | Description                                   |
+| ------------- | ------------------------ | --------------------------------------------- |
+| `currentPage` | `number`                 | Current 1-based page number (writable)        |
+| `pages`       | `number` (readonly)      | Total number of pages                         |
+| `skip`        | `number` (readonly)      | Current skip offset for API calls             |
+| `pageSize`    | `number` (readonly)      | Resolved page size                            |
+| `totalCount`  | `number` (readonly)      | Resolved total item count                     |
+| `goToPage`    | `(page: number) => void` | Navigate to page; fires `onPageChange`        |
+| `reset`       | `() => void`             | Reset to page 1; does NOT fire `onPageChange` |
+
+All properties are auto-unwrapped by `reactive()` — no `.value` access needed in script or template.
+
+## Recipe: Server-Side Paginated Table
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useDataTablePagination, useDataTableSort } from "@vc-shell/framework";
+
+// Data layer
+const searchResult = ref<{ results: Item[]; totalCount: number }>();
+const searchQuery = ref({ take: 20, skip: 0 });
+
+async function loadItems(query?: Partial<typeof searchQuery.value>) {
+  searchQuery.value = { ...searchQuery.value, ...query };
+  searchResult.value = await api.search(searchQuery.value);
+}
+
+// Pagination state
+const pagination = useDataTablePagination({
+  pageSize: 20,
+  totalCount: computed(() => searchResult.value?.totalCount ?? 0),
+  onPageChange: ({ skip }) => loadItems({ skip }),
+});
+
+// Sort state
+const { sortField, sortOrder, sortExpression } = useDataTableSort({
+  initialField: "createdDate",
+  initialDirection: "DESC",
+});
+</script>
+
+<template>
+  <VcDataTable
+    :items="searchResult?.results ?? []"
+    :total-count="pagination.totalCount"
+    :pagination="pagination"
+    @pagination-click="pagination.goToPage"
+    v-model:sort-field="sortField"
+    v-model:sort-order="sortOrder"
+  >
+    <VcColumn
+      id="name"
+      header="Name"
+      sortable
+    />
+    <VcColumn
+      id="createdDate"
+      header="Created"
+      sortable
+    />
+  </VcDataTable>
+</template>
+```
+
+## Recipe: Inside a Data Composable
+
+```typescript
+// useOffers.ts
+export function useOffers() {
+  const searchResult = ref<SearchOffersResult>();
+  const searchQuery = ref<SearchOffersQuery>({ take: 20 });
+
+  const { action: loadOffers } = useAsync(async (query) => {
+    searchQuery.value = { ...searchQuery.value, ...query };
+    searchResult.value = await client.searchOffers(searchQuery.value);
+  });
+
+  const pagination = useDataTablePagination({
+    pageSize: 20,
+    totalCount: computed(() => searchResult.value?.totalCount ?? 0),
+    onPageChange: ({ skip }) => loadOffers({ ...searchQuery.value, skip }),
+  });
+
+  return {
+    offers: computed(() => searchResult.value?.results ?? []),
+    pagination,
+    loadOffers,
+  };
+}
+```
+
+Blade then simply binds:
+
+```vue
+<VcDataTable :total-count="pagination.totalCount" :pagination="pagination" @pagination-click="pagination.goToPage" />
+```
+
+## Details
+
+- **`reactive()` return**: The composable wraps its return in `reactive()`, so all `Ref`/`ComputedRef` properties are auto-unwrapped. Access with `pagination.pages` (not `pagination.pages.value`). This allows the object to be passed directly as `:pagination` prop to VcDataTable without intermediate conversion.
+- **Event callback, not load**: `onPageChange` is an event notification (like VueUse's `useOffsetPagination`). The composable does not know about data fetching — it just notifies.
+- **No auto-clamp**: When `totalCount` decreases (e.g. after deletion), `currentPage` is NOT automatically clamped. Call `reset()` or `goToPage(1)` explicitly after mutations.
+- **reset() is silent**: `reset()` sets `currentPage = 1` but does NOT fire `onPageChange`. This prevents accidental double-fetches when the consumer resets pagination during a reload.
+- **Pure without callback**: Omit `onPageChange` and the composable works as pure state — useful for unit tests or when the consumer prefers to watch properties reactively.
+- **Why `reactive()` and not `ref()`**: Pagination is a cohesive group of properties always used together (`pagination.xxx`). `reactive()` is the Vue-idiomatic choice for such objects. `useDataTableSort` returns `ref()`s because its properties are destructured and used with `v-model` individually.
+
+## Tips
+
+- Call `pagination.reset()` alongside search/filter changes to return to page 1.
+- Pair with `useDataTableSort` for the complete table state management story.
+- The `skip` property can be used directly in API queries when not using `onPageChange`.
+- Do NOT destructure properties: `const { pages } = pagination` loses reactivity. Always access via `pagination.pages`.
+
+## Related
+
+- [`useDataTableSort`](./useDataTableSort.docs.md) — sort state composable for VcDataTable
+- `VcDataTable` `:pagination` prop — accepts `DataTablePagination` object
+- `DataTablePagination` type — defined in `vc-data-table/types.ts`

package/runtime/knowledge/docs/ui/composables/useDataTableSort.docs.md

@@ -21,20 +21,16 @@ The sort expression is formatted as `"field:DIRECTION"` (e.g., `"createdDate:DES
 ## Basic Usage
 
 ```typescript
-import { useDataTableSort } from '@vc-shell/framework';
+import { useDataTableSort } from "@vc-shell/framework";
 
 const { sortField, sortOrder, sortExpression, resetSort } = useDataTableSort({
-  initialField: 'createdDate',
-  initialDirection: 'DESC',
+  initialField: "createdDate",
+  initialDirection: "DESC",
 });
 ```
 
 ```vue
-<VcDataTable
-  v-model:sort-field="sortField"
-  v-model:sort-order="sortOrder"
-  :items="items"
->
+<VcDataTable v-model:sort-field="sortField" v-model:sort-order="sortOrder" :items="items">
   <VcColumn id="name" header="Name" sortable />
   <VcColumn id="createdDate" header="Created" sortable />
 </VcDataTable>
@@ -44,27 +40,27 @@ const { sortField, sortOrder, sortExpression, resetSort } = useDataTableSort({
 
 ### Parameters (Options)
 
-| Option | Type | Default | Description |
-|---|---|---|---|
-| `initialField` | `string` | `undefined` | Column field to sort by initially |
-| `initialDirection` | `"ASC" \| "DESC"` | `undefined` | Initial sort direction |
+| Option             | Type              | Default     | Description                       |
+| ------------------ | ----------------- | ----------- | --------------------------------- |
+| `initialField`     | `string`          | `undefined` | Column field to sort by initially |
+| `initialDirection` | `"ASC" \| "DESC"` | `undefined` | Initial sort direction            |
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `sortField` | `Ref<string \| undefined>` | Current sort field; bind with `v-model:sort-field` |
-| `sortOrder` | `Ref<number>` | Numeric sort order: `1` = ASC, `-1` = DESC, `0` = none; bind with `v-model:sort-order` |
-| `sortExpression` | `ComputedRef<string \| undefined>` | Formatted string (e.g., `"name:ASC"`) or `undefined` when no sort is active |
-| `resetSort` | `() => void` | Reset to the initial field/direction passed to the composable |
+| Property         | Type                               | Description                                                                            |
+| ---------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
+| `sortField`      | `Ref<string \| undefined>`         | Current sort field; bind with `v-model:sort-field`                                     |
+| `sortOrder`      | `Ref<number>`                      | Numeric sort order: `1` = ASC, `-1` = DESC, `0` = none; bind with `v-model:sort-order` |
+| `sortExpression` | `ComputedRef<string \| undefined>` | Formatted string (e.g., `"name:ASC"`) or `undefined` when no sort is active            |
+| `resetSort`      | `() => void`                       | Reset to the initial field/direction passed to the composable                          |
 
 ## Direction Mapping
 
 | `sortOrder` value | Direction | `sortExpression` |
-|---|---|---|
-| `1` | ASC | `"field:ASC"` |
-| `-1` | DESC | `"field:DESC"` |
-| `0` | none | `undefined` |
+| ----------------- | --------- | ---------------- |
+| `1`               | ASC       | `"field:ASC"`    |
+| `-1`              | DESC      | `"field:DESC"`   |
+| `0`               | none      | `undefined`      |
 
 When `sortOrder` is `0`, `sortExpression` returns `undefined` regardless of `sortField`.
 
@@ -87,7 +83,7 @@ async function loadItems() {
   loading.value = true;
   try {
     const response = await api.searchProducts({
-      sort: sortExpression.value,  // e.g. "createdDate:DESC" or undefined
+      sort: sortExpression.value, // e.g. "createdDate:DESC" or undefined
       skip: 0,
       take: 20,
     });
@@ -108,9 +104,21 @@ watch(sortExpression, () => loadItems(), { immediate: true });
     :items="items"
     :loading="loading"
   >
-    <VcColumn id="name" header="Name" sortable />
-    <VcColumn id="createdDate" header="Created" sortable />
-    <VcColumn id="price" header="Price" sortable />
+    <VcColumn
+      id="name"
+      header="Name"
+      sortable
+    />
+    <VcColumn
+      id="createdDate"
+      header="Created"
+      sortable
+    />
+    <VcColumn
+      id="price"
+      header="Price"
+      sortable
+    />
   </VcDataTable>
 </template>
 ```

package/runtime/knowledge/docs/ui/composables/useTableSelection.docs.md

@@ -14,18 +14,14 @@ Selection state is tracked by item objects and their extracted IDs, making it ea
 ## Basic Usage
 
 ```typescript
-import { useTableSelection } from '@vc-shell/framework';
+import { useTableSelection } from "@vc-shell/framework";
 
-interface Product { id: string; name: string; }
+interface Product {
+  id: string;
+  name: string;
+}
 
-const {
-  selectedItems,
-  selectedIds,
-  hasSelection,
-  handleSelectionChange,
-  handleSelectAll,
-  resetSelection,
-} = useTableSelection<Product>();
+const { selectedItems, selectedIds, hasSelection, handleSelectionChange, handleSelectAll, resetSelection } = useTableSelection<Product>();
 
 // Wire to VcTable events
 // <VcTable @selection-changed="handleSelectionChange" @select:all="handleSelectAll" />
@@ -41,25 +37,25 @@ async function deleteSelected() {
 
 ### Parameters (Options)
 
-| Option | Type | Default | Description |
-|---|---|---|---|
-| `idField` | `keyof T \| (item: T) => string` | `"id"` | Field or function to extract item IDs |
+| Option    | Type                             | Default | Description                           |
+| --------- | -------------------------------- | ------- | ------------------------------------- |
+| `idField` | `keyof T \| (item: T) => string` | `"id"`  | Field or function to extract item IDs |
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `selectedItems` | `Ref<T[]>` | Currently selected item objects |
-| `selectedIds` | `ComputedRef<string[]>` | IDs extracted from selected items |
-| `allSelected` | `Ref<boolean>` | Whether "select all" (across pages) is active |
-| `selectionCount` | `ComputedRef<number>` | Number of selected items |
-| `hasSelection` | `ComputedRef<boolean>` | Whether any items are selected |
-| `handleSelectionChange` | `(items: T[]) => void` | Handler for `@selection-changed` |
-| `handleSelectAll` | `(selected: boolean) => void` | Handler for `@select:all` |
-| `resetSelection` | `() => void` | Clear all selection state |
-| `isSelected` | `(item: T) => boolean` | Check if a specific item is selected |
-| `selectItems` | `(items: T[]) => void` | Programmatically select items |
-| `deselectByIds` | `(ids: string[]) => void` | Remove items from selection by ID |
+| Property                | Type                          | Description                                   |
+| ----------------------- | ----------------------------- | --------------------------------------------- |
+| `selectedItems`         | `Ref<T[]>`                    | Currently selected item objects               |
+| `selectedIds`           | `ComputedRef<string[]>`       | IDs extracted from selected items             |
+| `allSelected`           | `Ref<boolean>`                | Whether "select all" (across pages) is active |
+| `selectionCount`        | `ComputedRef<number>`         | Number of selected items                      |
+| `hasSelection`          | `ComputedRef<boolean>`        | Whether any items are selected                |
+| `handleSelectionChange` | `(items: T[]) => void`        | Handler for `@selection-changed`              |
+| `handleSelectAll`       | `(selected: boolean) => void` | Handler for `@select:all`                     |
+| `resetSelection`        | `() => void`                  | Clear all selection state                     |
+| `isSelected`            | `(item: T) => boolean`        | Check if a specific item is selected          |
+| `selectItems`           | `(items: T[]) => void`        | Programmatically select items                 |
+| `deselectByIds`         | `(ids: string[]) => void`     | Remove items from selection by ID             |
 
 ## Recipe: Bulk Action Toolbar
 
@@ -70,16 +66,13 @@ A common list blade pattern is showing a toolbar with bulk actions when items ar
 import { useTableSelection } from "@vc-shell/framework";
 import { notification } from "@vc-shell/framework";
 
-interface Order { id: string; number: string; status: string; }
+interface Order {
+  id: string;
+  number: string;
+  status: string;
+}
 
-const {
-  selectedItems,
-  selectedIds,
-  hasSelection,
-  selectionCount,
-  handleSelectionChange,
-  resetSelection,
-} = useTableSelection<Order>();
+const { selectedItems, selectedIds, hasSelection, selectionCount, handleSelectionChange, resetSelection } = useTableSelection<Order>();
 
 async function bulkChangeStatus(newStatus: string) {
   await api.bulkUpdateStatus(selectedIds.value, newStatus);
@@ -95,7 +88,10 @@ async function bulkExport() {
 </script>
 
 <template>
-  <div v-if="hasSelection" class="tw-flex tw-gap-2 tw-p-2 tw-bg-blue-50">
+  <div
+    v-if="hasSelection"
+    class="tw-flex tw-gap-2 tw-p-2 tw-bg-blue-50"
+  >
     <span>{{ selectionCount }} selected</span>
     <button @click="bulkChangeStatus('Approved')">Approve</button>
     <button @click="bulkExport">Export CSV</button>
@@ -107,8 +103,14 @@ async function bulkExport() {
     multiselect
     @selection-changed="handleSelectionChange"
   >
-    <VcColumn id="number" header="Order #" />
-    <VcColumn id="status" header="Status" />
+    <VcColumn
+      id="number"
+      header="Order #"
+    />
+    <VcColumn
+      id="status"
+      header="Status"
+    />
   </VcTable>
 </template>
 ```
@@ -118,13 +120,19 @@ async function bulkExport() {
 When items use a non-standard identifier field, pass a custom `idField` option:
 
 ```typescript
-interface LegacyItem { code: string; name: string; }
+interface LegacyItem {
+  code: string;
+  name: string;
+}
 
 // Using a field name
 const selection = useTableSelection<LegacyItem>({ idField: "code" });
 
 // Using a function for composite keys
-interface CompositeItem { orgId: string; itemId: string; }
+interface CompositeItem {
+  orgId: string;
+  itemId: string;
+}
 
 const selection2 = useTableSelection<CompositeItem>({
   idField: (item) => `${item.orgId}:${item.itemId}`,