feature(examples): add kitchen sink example WIP

Author: hobbescodes

.changeset/fix-predicate-imports.md

@@ -0,0 +1,8 @@
+---
+"tangrams": patch
+---
+
+Fix predicate translator imports and offset access in generated db collections
+
+- Import `LoadSubsetOptions` type from `@tanstack/db` instead of `@tanstack/query-db-collection` where it is not exported
+- Access `offset` from the original `options` object rather than from `parseLoadSubsetOptions()` return value, which only returns `{ filters, sorts, limit }`

apps/docs/content/docs/tanstack-db.mdx

@@ -519,13 +519,35 @@ Tangrams automatically detects the appropriate predicate mapping preset by analy
 
 You only need to specify `predicateMapping` if you want to override the auto-detected preset.
 
+### Additional Peer Dependency for On-Demand Mode
+
+When using on-demand sync mode, you also need `@tanstack/db` for the `LoadSubsetOptions` type:
+
+<Tabs items={['bun', 'npm', 'pnpm']}>
+  <Tab value="bun">
+```bash
+bun add @tanstack/db
+```
+  </Tab>
+  <Tab value="npm">
+```bash
+npm install @tanstack/db
+```
+  </Tab>
+  <Tab value="pnpm">
+```bash
+pnpm add @tanstack/db
+```
+  </Tab>
+</Tabs>
+
 ### Generated On-Demand Collection
 
 When on-demand mode is enabled, the generated collection includes a predicate translator function:
 
 ```typescript
 import { parseLoadSubsetOptions } from "@tanstack/query-db-collection"
-import type { LoadSubsetOptions } from "@tanstack/query-db-collection"
+import type { LoadSubsetOptions } from "@tanstack/db"
 
 function translateProductPredicates(
   options?: LoadSubsetOptions

bun.lock

@@ -19,6 +19,7 @@ All examples are TanStack Start applications that demonstrate various combinatio
 | `start-openapi-query` | OpenAPI | `["query"]`               | SSR  | Basic OpenAPI/REST with TanStack Query |
 | `start-openapi-form`  | OpenAPI | `["query", "form"]`       | SSR  | OpenAPI + TanStack Form validation     |
 | `start-openapi-db`    | OpenAPI | `["db"]`                  | SPA  | Local-first with full sync             |
+| `start-graphql-db`    | OpenAPI | `["db"]`                  | SPA  | Local-first with full sync             |
 | `start-multi-source`  | Both    | `["query", "form"]`       | SSR  | Multiple data sources in one app       |
 | `start-full-stack`    | OpenAPI | `["query", "form", "db"]` | SPA  | All generators combined                |
 

examples/README.md

@@ -0,0 +1,45 @@
+{
+  "name": "start-full-stack",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
+    "generate": "tangrams generate"
+  },
+  "dependencies": {
+    "@better-fetch/fetch": "^1.1.16",
+    "@tanstack/db": "^0.5.12",
+    "@tanstack/query-db-collection": "^1.0.8",
+    "@tanstack/react-db": "^0.1.56",
+    "@tanstack/react-devtools": "^0.8.4",
+    "@tanstack/react-form": "^1.27.4",
+    "@tanstack/react-query": "^5.80.7",
+    "@tanstack/react-query-devtools": "^5.80.7",
+    "@tanstack/react-router": "^1.121.0",
+    "@tanstack/react-router-devtools": "^1.121.0",
+    "@tanstack/react-start": "^1.121.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "@examples/shared": "workspace:*",
+    "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/devtools-vite": "^0.3.12",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.5.2",
+    "tailwindcss": "^4.1.8",
+    "tangrams": "workspace:*",
+    "typescript": "^5.8.3",
+    "vite": "^7.2.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}