Add framework overview page content (#842)

* docs: add framework overview pages for Vue, Solid, Svelte, and Angular

Replace placeholder content with complete framework-specific documentation
for all non-React adapters. Each overview includes:

- Installation instructions
- Basic usage with useLiveQuery (or injectLiveQuery for Angular)
- Dependency arrays/reactive parameters documentation
- Framework-specific code examples and best practices

These pages follow the same structure as the React overview but are
tailored to each framework's conventions and only document the
useLiveQuery hook (the only hook currently available for these frameworks).

* docs: fix reactivity patterns in Solid and Vue framework overviews

Correct the documentation based on actual source code and test verification:

**Solid changes:**
- Remove incorrect dependency array pattern
- Document automatic fine-grained reactivity tracking
- Show correct signal usage inside query functions
- Add examples of good vs bad patterns
- Explain that Solid tracks signals automatically without deps

**Vue changes:**
- Fix dependency array to pass refs directly, not wrapped in functions
- Show correct pattern: [minAge] instead of [() => minAge]
- Add toRef pattern for props
- Clarify getter functions are only needed for non-ref values
- Add example of using pre-created collections with reactive refs

Both frameworks now match their actual implementations as verified
against packages/*-db/src/*.ts source files and test files.

* docs: fix Angular and Svelte framework overview issues

Address critical issues identified in external code review:

**Angular fixes:**
- Replace invalid destructuring syntax ({ data } = injectLiveQuery)
  with correct field assignment (query = injectLiveQuery)
- Update all templates to call signals with () as per Angular API
- Add separate examples for Angular 16+ (@input) vs 17+ (input.required)
- Add note explaining all return values are Angular signals
- Ensure all examples use query.data() and query.isLoading()

**Svelte fixes:**
- Remove incorrect $ prefix from all examples (not Svelte stores)
- Change to const query = useLiveQuery() pattern
- Update all templates to use query.data and query.isLoading directly
- Add note explaining Svelte 5 runes return reactive values via getters
- Ensure consistency: query.data (no call), query.isLoading (no call)

These changes align documentation with actual adapter implementations
and fix syntax errors that would cause compile failures.

* docs: address second-round reviewer feedback on Angular and Solid

Apply precision improvements from external code review:

**Angular:**
- Soften parameter-change behavior wording to avoid over-promising
  timing guarantees (changed from "isLoading becomes true" to
  "status()/isLoading() reflect the new query's lifecycle")
- Add template syntax version note explaining @if/@for requires
  Angular 17+ (v16 users should use *ngIf/*ngFor)

**Solid:**
- Fix contradictory intro sentence that claimed "all return values
  should be called as functions" while the note correctly stated
  "data is a plain array"
- Now states clearly: "data is a plain array and status fields are
  accessors"

All changes align documentation with exact adapter behavior and
prevent user confusion about API contracts.

---------

Co-authored-by: Claude <[email protected]>

Author: KyleAMathews

docs/framework/angular/overview.md

@@ -13,4 +13,200 @@ npm install @tanstack/angular-db
 
 See the [Angular Functions Reference](../reference/index.md) to see the full list of functions available in the Angular Adapter.
 
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](../../guides/live-queries).
+
 ## Basic Usage
+
+### injectLiveQuery
+
+The `injectLiveQuery` function creates a live query that automatically updates your component when data changes. It returns an object containing Angular signals for reactive state management:
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  template: `
+    @if (query.isLoading()) {
+      <div>Loading...</div>
+    } @else {
+      <ul>
+        @for (todo of query.data(); track todo.id) {
+          <li>{{ todo.text }}</li>
+        }
+      </ul>
+    }
+  `
+})
+export class TodoListComponent {
+  query = injectLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+}
+```
+
+**Note:** All return values (`data`, `isLoading`, `status`, etc.) are Angular signals, so call them with `()` in your template: `query.data()`, `query.isLoading()`.
+
+> **Template Syntax:** Examples use Angular 17+ control flow (`@if`, `@for`). For Angular 16, use `*ngIf` and `*ngFor` instead.
+
+### Reactive Parameters
+
+For queries that depend on reactive values, use the `params` option to re-run the query when those values change:
+
+```typescript
+import { Component, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { gt } from '@tanstack/db'
+
+@Component({
+  selector: 'app-filtered-todos',
+  standalone: true,
+  template: `
+    <div>{{ query.data().length }} high-priority todos</div>
+  `
+})
+export class FilteredTodosComponent {
+  minPriority = signal(5)
+
+  query = injectLiveQuery({
+    params: () => ({ minPriority: this.minPriority() }),
+    query: ({ params, q }) =>
+      q.from({ todos: todosCollection })
+       .where(({ todos }) => gt(todos.priority, params.minPriority))
+  })
+}
+```
+
+#### When to Use Reactive Parameters
+
+Use the reactive `params` option when your query depends on:
+- Component signals
+- Input properties
+- Computed values
+- Other reactive state
+
+When any reactive value accessed in the `params` function changes, the query is recreated and re-executed.
+
+#### What Happens When Parameters Change
+
+When a parameter value changes:
+1. The previous live-query collection is disposed
+2. A new query is created with the updated parameter values
+3. `status()`/`isLoading()` reflect the new query's lifecycle
+4. `data()` updates automatically when the new results arrive
+
+#### Best Practices
+
+**Use reactive params for dynamic queries:**
+
+```typescript
+import { Component, Input, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq, and } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  template: `<div>{{ query.data().length }} todos</div>`
+})
+export class TodoListComponent {
+  // Angular 16+ compatible input
+  @Input({ required: true }) userId!: number
+  status = signal('active')
+
+  // Good - reactive params track all dependencies
+  query = injectLiveQuery({
+    params: () => ({
+      userId: this.userId,
+      status: this.status()
+    }),
+    query: ({ params, q }) =>
+      q.from({ todos: todosCollection })
+       .where(({ todos }) => and(
+         eq(todos.userId, params.userId),
+         eq(todos.status, params.status)
+       ))
+  })
+}
+```
+
+**Using Angular 17+ signal inputs:**
+
+```typescript
+import { Component, input, signal } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq, and } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  template: `<div>{{ query.data().length }} todos</div>`
+})
+export class TodoListComponent {
+  // Angular 17+ signal-based input
+  userId = input.required<number>()
+  status = signal('active')
+
+  query = injectLiveQuery({
+    params: () => ({
+      userId: this.userId(),
+      status: this.status()
+    }),
+    query: ({ params, q }) =>
+      q.from({ todos: todosCollection })
+       .where(({ todos }) => and(
+         eq(todos.userId, params.userId),
+         eq(todos.status, params.status)
+       ))
+  })
+}
+```
+
+**Static queries don't need params:**
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+
+@Component({
+  selector: 'app-all-todos',
+  standalone: true,
+  template: `<div>{{ query.data().length }} todos</div>`
+})
+export class AllTodosComponent {
+  // No reactive dependencies - query never changes
+  query = injectLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+  )
+}
+```
+
+**Access multiple signals in template:**
+
+```typescript
+import { Component } from '@angular/core'
+import { injectLiveQuery } from '@tanstack/angular-db'
+import { eq } from '@tanstack/db'
+
+@Component({
+  selector: 'app-todos',
+  standalone: true,
+  template: `
+    <div>Status: {{ query.status() }}</div>
+    <div>Loading: {{ query.isLoading() }}</div>
+    <div>Ready: {{ query.isReady() }}</div>
+    <div>Total: {{ query.data().length }}</div>
+  `
+})
+export class TodosComponent {
+  query = injectLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+  )
+}
+```

docs/framework/solid/overview.md

@@ -1,5 +1,189 @@
 ---
 title: TanStack DB Solid Adapter
-ref: docs/framework/react/adapter.md
-replace: { "React": "Solid", "react": "solid" }
+id: adapter
 ---
+
+## Installation
+
+```sh
+npm install @tanstack/solid-db
+```
+
+## Solid Primitives
+
+See the [Solid Functions Reference](../reference/index.md) to see the full list of primitives available in the Solid Adapter.
+
+For comprehensive documentation on writing queries (filtering, joins, aggregations, etc.), see the [Live Queries Guide](../../guides/live-queries).
+
+## Basic Usage
+
+### useLiveQuery
+
+The `useLiveQuery` primitive creates a live query that automatically updates your component when data changes. It returns an object where `data` is a plain array and status fields (e.g. `isLoading()`, `status()`) are accessors:
+
+```tsx
+import { useLiveQuery } from '@tanstack/solid-db'
+import { eq } from '@tanstack/db'
+import { Show, For } from 'solid-js'
+
+function TodoList() {
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => eq(todos.completed, false))
+     .select(({ todos }) => ({ id: todos.id, text: todos.text }))
+  )
+
+  return (
+    <Show when={!query.isLoading()} fallback={<div>Loading...</div>}>
+      <ul>
+        <For each={query.data}>
+          {(todo) => <li>{todo.text}</li>}
+        </For>
+      </ul>
+    </Show>
+  )
+}
+```
+
+**Note:** `query.data` returns an array directly (not a function), but status fields like `isLoading()`, `status()`, etc. are accessor functions.
+
+### Reactive Queries with Signals
+
+Solid uses fine-grained reactivity, which means queries automatically track and respond to signal changes. Simply call signals inside your query function, and Solid will automatically recompute when they change:
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { gt } from '@tanstack/db'
+
+function FilteredTodos(props: { minPriority: number }) {
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => gt(todos.priority, props.minPriority))
+  )
+
+  return <div>{query.data.length} high-priority todos</div>
+}
+```
+
+When `props.minPriority` changes, Solid's reactivity system automatically:
+1. Detects the prop access inside the query function
+2. Cleans up the previous live query collection
+3. Creates a new query with the updated value
+4. Updates the component with the new data
+
+#### Using Signals from Component State
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { eq, and } from '@tanstack/db'
+
+function TodoList() {
+  const [userId, setUserId] = createSignal(1)
+  const [status, setStatus] = createSignal('active')
+
+  // Solid automatically tracks userId() and status() calls
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => and(
+       eq(todos.userId, userId()),
+       eq(todos.status, status())
+     ))
+  )
+
+  return (
+    <div>
+      <select onChange={(e) => setStatus(e.currentTarget.value)}>
+        <option value="active">Active</option>
+        <option value="completed">Completed</option>
+      </select>
+      <div>{query.data.length} todos</div>
+    </div>
+  )
+}
+```
+
+**Key Point:** Unlike React, you don't need dependency arrays. Solid's reactive system automatically tracks any signals, props, or stores accessed during query execution.
+
+#### Best Practices
+
+**Access signals inside the query function:**
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { gt } from '@tanstack/db'
+
+function TodoList() {
+  const [minPriority, setMinPriority] = createSignal(5)
+
+  // Good - signal accessed inside query function
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => gt(todos.priority, minPriority()))
+  )
+
+  // Solid automatically tracks minPriority() and recomputes when it changes
+  return <div>{query.data.length} todos</div>
+}
+```
+
+**Don't read signals outside the query function:**
+
+```tsx
+import { createSignal } from 'solid-js'
+import { useLiveQuery } from '@tanstack/solid-db'
+import { gt } from '@tanstack/db'
+
+function TodoList() {
+  const [minPriority, setMinPriority] = createSignal(5)
+
+  // Bad - reading signal outside query function
+  const currentPriority = minPriority()
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+     .where(({ todos }) => gt(todos.priority, currentPriority))
+  )
+  // Won't update when minPriority changes!
+
+  return <div>{query.data.length} todos</div>
+}
+```
+
+**Static queries need no special handling:**
+
+```tsx
+import { useLiveQuery } from '@tanstack/solid-db'
+
+function AllTodos() {
+  // No signals accessed - query never changes
+  const query = useLiveQuery((q) =>
+    q.from({ todos: todosCollection })
+  )
+
+  return <div>{query.data.length} todos</div>
+}
+```
+
+### Using Pre-created Collections
+
+You can also pass an existing collection to `useLiveQuery`. This is useful for sharing queries across components:
+
+```tsx
+import { createLiveQueryCollection } from '@tanstack/db'
+import { useLiveQuery } from '@tanstack/solid-db'
+
+// Create collection outside component
+const todosQuery = createLiveQueryCollection((q) =>
+  q.from({ todos: todosCollection })
+   .where(({ todos }) => eq(todos.active, true))
+)
+
+function TodoList() {
+  // Pass existing collection
+  const query = useLiveQuery(() => todosQuery)
+
+  return <div>{query.data.length} todos</div>
+}
+```