docs: add composable pages

apps/docs/src/components/app/AppNav.vue

@@ -40,14 +40,25 @@
           name: 'Foundation',
           children: [
             { name: 'createContext', to: '/composables/foundation/create-context' },
-            { name: 'createTrinity', to: '/composables/foundation/create-trinity' },
             { name: 'createPlugin', to: '/composables/foundation/create-plugin' },
+            { name: 'createTrinity', to: '/composables/foundation/create-trinity' },
+          ],
+        },
+        {
+          name: 'Plugins',
+          children: [
+            { name: 'useBreakpoints', to: '/composables/plugin/use-breakpoints' },
+            { name: 'useHydration', to: '/composables/plugin/use-hydration' },
+            { name: 'useLocale', to: '/composables/plugin/use-locale' },
+            { name: 'useStorage', to: '/composables/plugin/use-storage' },
+            { name: 'useTheme', to: '/composables/plugin/use-theme' },
           ],
         },
         {
           name: 'Registration',
           children: [
             { name: 'useRegistry', to: '/composables/registration/use-registry' },
+            { name: 'useProxyModel', to: '/composables/registration/use-proxy-model' },
             { name: 'useTokens', to: '/composables/registration/use-tokens' },
           ],
         },
@@ -56,32 +67,20 @@
           children: [
             { name: 'useFilter', to: '/composables/selection/use-filter' },
             { name: 'useGroup', to: '/composables/selection/use-group' },
+            { name: 'useSelection', to: '/composables/selection/use-selection' },
             { name: 'useSingle', to: '/composables/selection/use-single' },
             { name: 'useStep', to: '/composables/selection/use-step' },
           ],
         },
-        {
-          name: 'Forms',
-          children: [
-          ],
-        },
         {
           name: 'System',
           children: [
             { name: 'useKeydown', to: '/composables/system/use-keydown' },
+            { name: 'useLayout', to: '/composables/system/use-layout' },
             { name: 'useLogger', to: '/composables/system/use-logger' },
           ],
         },
-        {
-          name: 'Plugins',
-          children: [
-            { name: 'useBreakpoints', to: '/composables/plugin/use-breakpoints' },
-            { name: 'useHydration', to: '/composables/plugin/use-hydration' },
-            { name: 'useLocale', to: '/composables/plugin/use-locale' },
-            { name: 'useStorage', to: '/composables/plugin/use-storage' },
-            { name: 'useTheme', to: '/composables/plugin/use-theme' },
-          ],
-        },
+
       ],
     },
     { divider: true },

apps/docs/src/pages/composables/foundation/create-plugin.md

@@ -1,3 +1,102 @@
+---
+title: createPlugin
+description: A universal plugin factory to reduce boilerplate code for Vue plugin creation.
+keywords: createPlugin, plugin, Vue, factory
+---
+
 # createPlugin
 
-This composable is used to create a plugin for the framework. It allows you to define a plugin with specific functionality that can be registered and used within your application.
+The `createPlugin` factory function is a universal plugin factory designed to reduce boilerplate code when creating Vue plugins. It provides a structured way to define plugin behavior, including providing context and setting up the application.
+
+## API
+
+### `PluginOptions`
+
+```ts
+export interface PluginOptions {
+  namespace: string
+  provide: (app: App) => void
+  setup?: (app: App) => void
+}
+```
+
+Defines the options for creating a plugin:
+- `namespace`: A string that uniquely identifies the plugin.
+- `provide`: A function that receives the Vue `App` instance and is used to provide values to the application's context.
+- `setup?`: An optional function that receives the Vue `App` instance and is used for additional setup logic after context has been provided.
+
+### `createPlugin(options)`
+
+* **Type**
+
+  ```ts
+  export function createPlugin<Z> (options: PluginOptions): Z
+  ```
+
+* **Details**
+
+  - `options`: A `PluginOptions` object that configures the plugin.
+
+  Returns a Vue plugin object with an `install` method. When the plugin is installed with `app.use()`, the `provide` and `setup` functions defined in `options` are executed within the application's context.
+
+## Examples
+
+### Creating a Simple Plugin
+
+```ts
+// plugins/my-simple-plugin.ts
+import { createPlugin } from '@vuetify/v0/factories/createPlugin'
+import { ref } from 'vue'
+
+export const myPlugin = createPlugin({
+  namespace: 'my-simple-plugin',
+  provide: (app) => {
+    // Provide a global reactive counter
+    app.provide('myCounter', ref(0))
+  },
+  setup: (app) => {
+    // Optional setup logic, e.g., global mixins or directives
+    console.log('My Simple Plugin setup complete!')
+  },
+})
+```
+
+### Using the Plugin in `main.ts`
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { myPlugin } from './plugins/my-simple-plugin'
+
+const app = createApp(App)
+
+app.use(myPlugin)
+
+app.mount('#app')
+```
+
+### Consuming the Provided Value in a Component
+
+```html
+<template>
+  <div>
+    <p>Counter: {{ counter }}</p>
+    <button @click="increment">Increment</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { inject, Ref } from 'vue'
+
+  const counter = inject<Ref<number>>('myCounter')
+
+  const increment = () => {
+    if (counter) {
+      counter.value++
+    }
+  }
+</script>
+```
+
+

apps/docs/src/pages/composables/index.md

@@ -4,23 +4,46 @@ Reusable pieces of logic that can be shared across components, providing encapsu
 
 ## Available Composables
 
+### Foundation
+
+| Name | Description |
+| - | - |
+| [createContext](/composables/foundation/create-context) | Create reusable context to share state across components |
+| [createPlugin](/composables/foundation/create-plugin) |  |
+| [createTrinity](/composables/foundation/create-trinity) | Standardized context pattern utility |
+
+### Plugins
+
+| Name | Description |
+| - | - |
+| [useBreakpoints](/composables/plugin/use-breakpoints) | Responsive breakpoint detection for different screen sizes |
+| [useHydration](/composables/plugin/use-hydration) | Manage SSR hydration process |
+| [useLocale](/composables/plugin/use-locale) | Internationalization system for multiple languages |
+| [useStorage](/composables/plugin/use-storage) | Reactive interface to browser storage APIs |
+| [useTheme](/composables/plugin/use-theme) | Application theme management with CSS custom properties |
+
+### Registration
+
+| Name | Description |
+| - | - |
+| [useRegistry](/composables/registration/use-registry) | Foundation for registration-based systems |
+| [useProxyModel](/composables/registration/use-proxy-model) |  |
+| [useTokens](/composables/registration/use-tokens) | Design token management system |
+
+### Selection
+
+| Name | Description |
+| - | - |
+| [useFilter](/composables/selection/use-filter) | Filter arrays based on search queries |
+| [useGroup](/composables/selection/use-group) | Manage collections with selection capabilities |
+| [useSelection](/composables/selection/use-selection) |  |
+| [useSingle](/composables/selection/use-single) | Simplified single-selection wrapper around useGroup |
+| [useStep](/composables/selection/use-step) | Manage multi-step processes like forms or wizards |
+
+### System
+
 | Name | Description |
 | - | - |
-| [useBreakpoints](/composables/use-breakpoints) | Responsive breakpoint detection for different screen sizes |
-| [createContext](/composables/use-context) | Create reusable context to share state across components |
-| [useFilter](/composables/use-filter) | Filter arrays based on search queries |
-| [useGroup](/composables/use-group) | Manage collections with selection capabilities |
-| [useHydration](/composables/use-hydration) | Manage SSR hydration process |
-| [useKeydown](/composables/use-keydown) | Handle keyboard events with automatic cleanup |
-| [useLocale](/composables/use-locale) | Internationalization system for multiple languages |
-| [useMarkdown](/composables/use-markdown) | Render Markdown content in Vue applications |
-| [useRegistry](/composables/use-registry) | Foundation for registration-based systems |
-| [useSingle](/composables/use-single) | Simplified single-selection wrapper around useGroup |
-| [useStep](/composables/use-step) | Manage multi-step processes like forms or wizards |
-| [useStorage](/composables/use-storage) | Reactive interface to browser storage APIs |
-| [useTheme](/composables/use-theme) | Application theme management with CSS custom properties |
-| [useTokens](/composables/use-tokens) | Design token management system |
-| [useTrinity](/composables/use-trinity) | Standardized context pattern utility |
-| [useSingleton](/composables/use-singleton) | Extended trinity pattern with model binding |
-| [toReactive](/composables/to-reactive) | Convert refs to reactive objects
-| [useStorage](/composables/use-storage) | Persistent storage utilities for browser storage APIs with reactive state management. |
+| [useKeydown](/composables/system/use-keydown) | Handle keyboard events with automatic cleanup |
+| [useLayout](/composables/system/use-layout) |  |
+| [useLogger](/composables/system/use-logger) |  |

apps/docs/src/pages/composables/plugin/use-breakpoints.md

@@ -1,3 +1,85 @@
+---
+meta:
+  title: useBreakpoints
+  description: Simple hook to access the breakpoints context.
+  keywords: useBreakpoints, breakpoints, composable, Vue, responsive
+category: Plugin
+performance: 0
+---
+
 # useBreakpoints
 
-The `useBreakpoints` composable is a utility for managing responsive design breakpoints in Vue applications. It allows you to define custom breakpoints and provides reactive properties to check the current viewport size against these breakpoints.
+The `useBreakpoints` composable provides a simple hook to access the breakpoints context, allowing you to retrieve information about the current viewport dimensions and active breakpoints.
+
+## API
+
+### `useBreakpoints()`
+
+* **Type**
+
+  ```ts
+  function useBreakpoints (): BreakpointsContext
+  ```
+
+* **Details**
+
+  Returns the breakpoints context containing current breakpoint information, such as `name`, `width`, `height`, `isMobile`, and boolean flags for each breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `smAndUp`, etc.).
+
+### `createBreakpointsPlugin(options?: BreakpointsOptions)`
+
+* **Type**
+
+  ```ts
+  function createBreakpointsPlugin (options?: BreakpointsOptions): BreakpointsPlugin
+  ```
+
+* **Details**
+
+  Creates a Vue plugin for managing responsive breakpoints with automatic updates. This plugin sets up breakpoint tracking and updates the context when the window is resized, providing reactive breakpoint state throughout the application. The `options` parameter allows for custom configuration of breakpoint thresholds and mobile breakpoint.
+
+## Examples
+
+### Using `useBreakpoints`
+
+```html
+<template>
+  <div>
+    <p>Current breakpoint: {{ breakpoints.name }}</p>
+    <p>Window width: {{ breakpoints.width }}px</p>
+    <p>Is mobile: {{ breakpoints.isMobile }}</p>
+    <p v-if="breakpoints.smAndUp">Visible on small and up screens</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useBreakpoints } from '@vuetify/v0/composables/useBreakpoints'
+
+  const breakpoints = useBreakpoints()
+</script>
+```
+
+### Using `createBreakpointsPlugin`
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createBreakpointsPlugin } from '@vuetify/v0/composables/useBreakpoints'
+
+const app = createApp(App)
+
+app.use(createBreakpointsPlugin({
+  mobileBreakpoint: 'sm',
+  breakpoints: {
+    xs: 0,
+    sm: 320,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+  },
+}))
+
+app.mount('#app')
+```
+
+