feat: createDataGrid composable

.claude/rules/composables.md

@@ -26,6 +26,7 @@ Scope-specific mechanics for `packages/0/src/composables/**`. Covers naming, fac
 - §6.6 `useProxyModel`
 - §6.7 `useProxyRegistry`
 - §6.8 Register / unregister lifecycle contract
+- §6.10 Collection composables: no `items` option
 - §7 Events & lifecycle
 - §9 Errors & invariants
 
@@ -343,6 +344,10 @@ const table = createDataTable({
 - The composable has exactly one correct implementation, and consumers have no reason to swap it. Example: `useHotkey` — the listener semantics are fixed.
 - You want to switch behavior based on a boolean flag. Use an option (`mode: 'client' | 'server'`) rather than dressing it up as an adapter. Adapters are for swapping *implementations*, not for flipping a known toggle.
 
+### Collection composables: no `items` option
+
+A composable that owns a collection of values exposes `register` / `onboard` / `unregister`. It never accepts an `items` option in its factory — row identity, order, and per-row state live in the registry. Followed by `createRegistry`, `createModel`, `createSelection`, `createSingle`, `createGroup`, `createStep`, `createNested`, `createSortable`, `createKanban`, `createQueue`, `createTimeline`, `createTokens`, and (after the recent refactor) `createDataTable` and `createDataGrid`. Full rule and migration shape: PHILOSOPHY §6.10.
+
 ### `useProxyModel` and `useProxyRegistry` — cross-link
 
 Both composables are covered in PHILOSOPHY §6.6 and §6.7. Repeating the when-to-use summary here for composable authors:
@@ -494,3 +499,4 @@ Pure transformers (`toRef`, `toElement`, `toValue`) are fine to call inline —
 - [ ] No DOM event binding inside the composable
 - [ ] ID generation through `useId()`
 - [ ] Trinity return only from `createTrinity` / `createContext` / `createPlugin`
+- [ ] Composable that owns a collection of values uses `register` / `onboard`, never an `items` option (PHILOSOPHY §6.10)

.claude/rules/new-feature-checklist.md

@@ -189,3 +189,4 @@ Prefer extending an existing pattern over creating a new one.
 - [ ] Feature appears in `apps/docs/build/generated/api-whitelist.ts` after build
 - [ ] `<DocsApi />` renders on the new docs page
 - [ ] Maturity level matches the promotion criteria table (don't self-promote to `stable` or `mature` — those require a maintainer)
+- [ ] Collection composable surface uses `register` / `onboard` (no `items` option) — see PHILOSOPHY §6.10

apps/docs/src/components/docs/DocsFaq.vue

@@ -1,14 +1,56 @@
-<script setup lang="ts">
+<script lang="ts">
   // Framework
-  import { ExpansionPanel } from '@vuetify/v0'
+  import { createFilter, createFilterContext, ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useSlots } from 'vue'
+
+  export const [useFaqFilter, provideFaqFilter] = createFilterContext({
+    namespace: 'docs:faq',
+  })
+</script>
 
-  const props = defineProps<{
+<script setup lang="ts">
+  const { multiple = true } = defineProps<{
     multiple?: boolean
   }>()
+
+  const slots = useSlots()
+  const filter = createFilter()
+  provideFaqFilter(filter)
+
+  const count = toRef(() => {
+    const items = slots.default?.() ?? []
+    return items.filter(v => (v.type as { __name?: string })?.__name === 'DocsFaqItem').length
+  })
+
+  const show = toRef(() => count.value >= 5)
+
+  function onInput (e: Event) {
+    filter.query.value = (e.target as HTMLInputElement).value
+  }
 </script>
 
 <template>
-  <ExpansionPanel.Group class="flex flex-col gap-3 my-6" :multiple="props.multiple ?? true">
-    <slot />
-  </ExpansionPanel.Group>
+  <div class="my-6">
+    <div v-if="show" class="relative mb-3">
+      <AppIcon
+        class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none"
+        icon="search"
+        :size="16"
+      />
+
+      <input
+        class="w-full pl-9 pr-3 py-2 text-sm bg-surface-tint border border-divider rounded-lg outline-none focus:border-primary transition-colors placeholder:text-on-surface-variant"
+        placeholder="Search FAQ..."
+        type="text"
+        :value="filter.query.value"
+        @input="onInput"
+      >
+    </div>
+
+    <ExpansionPanel.Group class="flex flex-col gap-3" :multiple>
+      <slot />
+    </ExpansionPanel.Group>
+  </div>
 </template>

apps/docs/src/components/docs/DocsFaqItem.vue

@@ -2,13 +2,23 @@
   // Framework
   import { ExpansionPanel } from '@vuetify/v0'
 
-  defineProps<{
+  // Context
+  import { useFaqFilter } from './DocsFaq.vue'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  const { question } = defineProps<{
     question: string
   }>()
+
+  const filter = useFaqFilter()
+  const result = filter.apply(filter.query, () => [question])
+  const visible = toRef(() => result.items.value.length > 0)
 </script>
 
 <template>
-  <ExpansionPanel.Root>
+  <ExpansionPanel.Root v-show="visible">
     <ExpansionPanel.Activator
       v-slot="{ isSelected }"
       class="w-full list-item-bordered flex items-center gap-3 text-left"