docs: fix template ref unwrapping examples in composable docs

- Update useBreakpoints and useHydration docs to show destructuring pattern
- Add script .value usage examples alongside template auto-unwrapping
- Update Reactivity tables to show actual types (ShallowRef)
- Fix JSDoc example in useBreakpoints source

Destructured refs are top-level in template context and auto-unwrap.
Non-destructured access requires .value in templates.

Author: johnleider

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

@@ -51,31 +51,40 @@ app.mount('#app')
 
 ## Usage
 
-Once the plugin is installed, use the `useBreakpoints` composable in any component:
+Once the plugin is installed, use the `useBreakpoints` composable in any component. Destructure the properties you need for automatic ref unwrapping in templates:
 
 ```vue UseBreakpoints
 <script setup lang="ts">
   import { useBreakpoints } from '@vuetify/v0'
 
-  const breakpoints = useBreakpoints()
+  const { isMobile, mdAndUp, name, width, height } = useBreakpoints()
+
+  // In script, access .value
+  if (isMobile.value) {
+    console.log('Mobile detected')
+  }
 </script>
 
 <template>
   <div>
-    <nav v-if="breakpoints.mdAndUp">
+    <!-- Destructured refs auto-unwrap in templates -->
+    <nav v-if="mdAndUp">
       <!-- Desktop navigation -->
     </nav>
     <nav v-else>
       <!-- Mobile navigation -->
     </nav>
 
-    <p v-if="breakpoints.isMobile">Mobile layout active</p>
-    <p>Current breakpoint: {{ breakpoints.name }}</p>
-    <p>Viewport: {{ breakpoints.width }} x {{ breakpoints.height }}</p>
+    <p v-if="isMobile">Mobile layout active</p>
+    <p>Current breakpoint: {{ name }}</p>
+    <p>Viewport: {{ width }} x {{ height }}</p>
   </div>
 </template>
 ```
 
+> [!TIP]
+> When using the composable without destructuring, access `.value` in templates: `v-if="breakpoints.isMobile.value"`. Destructuring to top-level variables enables Vue's automatic ref unwrapping.
+
 ## Architecture
 
 `useBreakpoints` uses the plugin pattern with viewport observation:
@@ -93,17 +102,17 @@ flowchart LR
 
 ## Reactivity
 
-All breakpoint properties are reactive and automatically update when the viewport size changes.
-
-| Property | Reactive | Notes |
-| - | :-: | - |
-| `name` | <AppSuccessIcon /> | Current breakpoint name |
-| `width` | <AppSuccessIcon /> | Viewport width in pixels |
-| `height` | <AppSuccessIcon /> | Viewport height in pixels |
-| `isMobile` | <AppSuccessIcon /> | Below mobile breakpoint threshold |
-| `xs` / `sm` / `md` / `lg` / `xl` / `xxl` | <AppSuccessIcon /> | Exact breakpoint matches |
-| `smAndUp` / `mdAndUp` / `lgAndUp` / `xlAndUp` / `xxlAndUp` | <AppSuccessIcon /> | At or above breakpoint |
-| `smAndDown` / `mdAndDown` / `lgAndDown` / `xlAndDown` / `xxlAndDown` | <AppSuccessIcon /> | At or below breakpoint |
-| `breakpoints` | <AppErrorIcon /> | Static config object |
+All breakpoint properties are `Readonly<ShallowRef>` and automatically update when the viewport size changes. Use `.value` in script; destructure for template auto-unwrapping.
+
+| Property | Type | Notes |
+| - | - | - |
+| `name` | `ShallowRef<BreakpointName>` | Current breakpoint name |
+| `width` | `ShallowRef<number>` | Viewport width in pixels |
+| `height` | `ShallowRef<number>` | Viewport height in pixels |
+| `isMobile` | `ShallowRef<boolean>` | Below mobile breakpoint threshold |
+| `xs` / `sm` / `md` / `lg` / `xl` / `xxl` | `ShallowRef<boolean>` | Exact breakpoint matches |
+| `smAndUp` / `mdAndUp` / etc. | `ShallowRef<boolean>` | At or above breakpoint |
+| `smAndDown` / `mdAndDown` / etc. | `ShallowRef<boolean>` | At or below breakpoint |
+| `breakpoints` | `Record<string, number>` | Static config object (not reactive) |
 
 <DocsApi />

apps/docs/src/pages/composables/plugins/use-hydration.md

@@ -40,18 +40,24 @@ app.mount('#app')
 
 ## Usage
 
-Once the plugin is installed, use the `useHydration` composable in any component:
+Once the plugin is installed, use the `useHydration` composable in any component. Destructure the properties for automatic ref unwrapping in templates:
 
 ```vue UseHydration
 <script setup lang="ts">
   import { useHydration } from '@vuetify/v0'
 
-  const hydration = useHydration()
+  const { isHydrated, isSettled } = useHydration()
+
+  // In script, access .value
+  if (isHydrated.value) {
+    console.log('Hydration complete')
+  }
 </script>
 
 <template>
   <div>
-    <p v-if="hydration.isHydrated.value">
+    <!-- Destructured refs auto-unwrap in templates -->
+    <p v-if="isHydrated">
       Application is hydrated - browser features available
     </p>
     <p v-else>
@@ -75,11 +81,11 @@ flowchart LR
 
 ## Reactivity
 
-Hydration state is reactive and updates when the root component mounts.
+All properties are `Readonly<ShallowRef>` and update when the root component mounts. Use `.value` in script; destructure for template auto-unwrapping.
 
-| Property | Reactive | Notes |
-| - | :-: | - |
-| `isHydrated` | <AppSuccessIcon /> | True after root component mounts |
-| `isSettled` | <AppSuccessIcon /> | True after next tick post-hydration |
+| Property | Type | Notes |
+| - | - | - |
+| `isHydrated` | `ShallowRef<boolean>` | True after root component mounts |
+| `isSettled` | `ShallowRef<boolean>` | True after next tick post-hydration |
 
 <DocsApi />

packages/0/src/composables/useBreakpoints/index.ts

@@ -331,13 +331,20 @@ export function createBreakpointsPlugin<
  * <script setup lang="ts">
  *   import { useBreakpoints } from '@vuetify/v0'
  *
+ *   // Destructure for template auto-unwrapping
  *   const { isMobile, mdAndUp } = useBreakpoints()
+ *
+ *   // In script, use .value
+ *   if (isMobile.value) {
+ *     console.log('Mobile detected')
+ *   }
  * </script>
  *
  * <template>
  *   <div class="pa-4">
- *     <p v-if="isMobile.value">Mobile layout active</p>
- *     <p v-else-if="mdAndUp.value">Medium and up layout active</p>
+ *     <!-- Destructured refs auto-unwrap in templates -->
+ *     <p v-if="isMobile">Mobile layout active</p>
+ *     <p v-else-if="mdAndUp">Medium and up layout active</p>
  *   </div>
  * </template>
  * ```