@vc-shell/vc-app-skill 2.0.3 → 2.0.4

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

@@ -1,3 +1,9 @@
+---
+title: VcPopup
+category: components
+group: feedback
+---
+
 # VcPopup
 
 A modal dialog component built on [HeadlessUI Dialog](https://headlessui.com/vue/dialog). Use it for confirmations, alerts, error messages, and focused form interactions that require the user's immediate attention.
@@ -12,7 +18,10 @@ A modal dialog component built on [HeadlessUI Dialog](https://headlessui.com/vue
 | Side panel for contextual workflows               | VcSidebar   |
 | Stacked detail views (master-detail)              | VcBlade     |
 
-> **Tip:** Prefer blades for CRUD workflows. Reserve popups for brief, interruptive interactions such as confirmations and alerts.
+!!! tip "Prefer blades for CRUD workflows"
+Reserve popups for brief, interruptive interactions such as confirmations and alerts. Use `VcBlade` for CRUD detail views and `VcSidebar` for contextual side panels.
+
+::storybook id="overlay-vcpopup--default"
 
 ---
 
@@ -49,6 +58,8 @@ const showPopup = ref(false);
 
 ### Variants
 
+::storybook id="overlay-vcpopup--variants" height="500"
+
 The `variant` prop adds a semantic icon and color to the popup. Available values: `"default"`, `"info"`, `"success"`, `"warning"`, `"error"`.
 
 ```vue
@@ -248,6 +259,8 @@ Two props control fullscreen behavior:
 
 ### Confirmation Dialog
 
+::storybook id="overlay-vcpopup--with-footer" height="400"
+
 The most common pattern. Uses the `warning` variant and a two-button footer.
 
 ```vue

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

@@ -1,7 +1,18 @@
+---
+title: VcSidebar
+category: components
+group: layout
+---
+
 # VcSidebar
 
 A slide-over panel for contextual workflows, settings, and detail views. Supports left, right, and bottom positions with animated transitions, focus trapping, scroll locking, and swipe-to-dismiss gestures. VcSidebar is built for use cases where a full blade is too heavy but a popup is too small — settings panels, filter drawers, item detail previews, and mobile bottom sheets.
 
+::storybook id="overlay-vcsidebar--elevated-panel"
+
+!!! tip "Sidebar vs Popup vs Blade"
+Use VcSidebar for contextual workflows that need persistent visibility. Use `VcPopup` for brief confirmation dialogs. Use `VcBlade` for primary CRUD content that belongs in the navigation stack.
+
 ## When to Use
 
 - Settings panels, filter drawers, or contextual detail views.
@@ -104,6 +115,8 @@ Override with the `width` or `height` prop for custom dimensions.
 
 ### Bottom Sheet with Swipe-to-Dismiss
 
+::storybook id="overlay-vcsidebar--bottom-sheet" height="500"
+
 ```vue
 <VcSidebar v-model="open" position="bottom" size="md" draggable drag-handle>
   <div class="tw-p-4">Swipe down to close</div>

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

@@ -1,3 +1,10 @@
+---
+title: UI Composables
+category: composables
+group: ui-state
+slug: ui-composables-overview
+---
+
 # UI Composables
 
 Shared composables for the VC-Shell UI component library. These provide reusable logic for layout, positioning, form fields, and scroll behavior.

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

@@ -1,3 +1,9 @@
+---
+title: useDataTablePagination
+category: composables
+group: data
+---
+
 # 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.
@@ -159,6 +165,6 @@ Blade then simply binds:
 
 ## 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`
+- [`useDataTableSort`](./useDataTableSort.docs.md) -- sort state composable for VcDataTable
+- `VcDataTable` `:pagination` prop -- accepts `DataTablePagination` object
+- `DataTablePagination` -- type exported from `@vc-shell/framework`

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

@@ -1,3 +1,9 @@
+---
+title: useDataTableSort
+category: composables
+group: data
+---
+
 # useDataTableSort
 
 Manages page-level sort state for `VcDataTable` using numeric sort order conventions (`1` = ASC, `-1` = DESC, `0` = none). Provides `sortField` and `sortOrder` refs for `v-model` binding directly on `VcDataTable`, plus a `sortExpression` computed string for API calls.

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

@@ -1,3 +1,9 @@
+---
+title: useTableSelection
+category: composables
+group: data
+---
+
 # useTableSelection
 
 Manages table row selection state including multi-select, select-all, and programmatic selection. This composable provides a complete external selection API for VcDataTable, enabling bulk operations like delete, export, or status changes on selected rows.

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

@@ -1,3 +1,9 @@
+---
+title: useTableSort
+category: composables
+group: data
+---
+
 # useTableSort
 
 Manages table sort state with three-state cycling (ASC, DESC, none) and a formatted sort expression string. This composable externalizes the sort logic from VcDataTable, making it easy to drive server-side sorting, persist sort preferences, or share sort state across multiple components.

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

@@ -1,3 +1,10 @@
+---
+title: UI Types
+category: reference
+group: api
+slug: types-ui
+---
+
 # UI Types
 
 TypeScript interfaces for UI component props shared across all form field components in the framework.