feat(database): typed browser db client + dev playground demo

.gitattributes

@@ -0,0 +1,7 @@
+* text=auto eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
+*.js text eol=lf
+*.jsx text eol=lf
+*.json text eol=lf
+*.md text eol=lf

apps/dev-playground/.gitignore

@@ -7,4 +7,7 @@ shared/appkit-types/serving.d.ts
 
 # Database plugin playground artifacts generated by `appkit db introspect`
 config/database/schema.ts
-config/database/migrations/
+config/database/migrations/
+
+# Auto-generated from config/database/schema.ts by the database vite plugin
+shared/appkit-types/database.d.ts

apps/dev-playground/client/src/lib/nav.ts

@@ -70,6 +70,13 @@ export const NAV_GROUPS: ReadonlyArray<NavGroup> = [
           "Four takes on Postgres: raw driver, Drizzle, TypeORM, Sequelize with OAuth refresh.",
         icon: DatabaseIcon,
       },
+      {
+        to: "/database",
+        label: "Database",
+        description:
+          "Typed db client with schema-first introspection, RLS, and CRUD scaffolding.",
+        icon: LayoutDashboardIcon,
+      },
       {
         to: "/sql-helpers",
         label: "SQL Helpers",

apps/dev-playground/client/src/routeTree.gen.ts

@@ -21,6 +21,7 @@ import { Route as LakebaseRouteRouteImport } from './routes/lakebase.route'
 import { Route as JobsRouteRouteImport } from './routes/jobs.route'
 import { Route as GenieRouteRouteImport } from './routes/genie.route'
 import { Route as FilesRouteRouteImport } from './routes/files.route'
+import { Route as DatabaseRouteRouteImport } from './routes/database.route'
 import { Route as DataVisualizationRouteRouteImport } from './routes/data-visualization.route'
 import { Route as ChartInferenceRouteRouteImport } from './routes/chart-inference.route'
 import { Route as ArrowAnalyticsRouteRouteImport } from './routes/arrow-analytics.route'
@@ -88,6 +89,11 @@ const FilesRouteRoute = FilesRouteRouteImport.update({
   path: '/files',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DatabaseRouteRoute = DatabaseRouteRouteImport.update({
+  id: '/database',
+  path: '/database',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DataVisualizationRouteRoute = DataVisualizationRouteRouteImport.update({
   id: '/data-visualization',
   path: '/data-visualization',
@@ -126,6 +132,7 @@ export interface FileRoutesByFullPath {
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/chart-inference': typeof ChartInferenceRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+  '/database': typeof DatabaseRouteRoute
   '/files': typeof FilesRouteRoute
   '/genie': typeof GenieRouteRoute
   '/jobs': typeof JobsRouteRoute
@@ -146,6 +153,7 @@ export interface FileRoutesByTo {
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/chart-inference': typeof ChartInferenceRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+  '/database': typeof DatabaseRouteRoute
   '/files': typeof FilesRouteRoute
   '/genie': typeof GenieRouteRoute
   '/jobs': typeof JobsRouteRoute
@@ -167,6 +175,7 @@ export interface FileRoutesById {
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/chart-inference': typeof ChartInferenceRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+  '/database': typeof DatabaseRouteRoute
   '/files': typeof FilesRouteRoute
   '/genie': typeof GenieRouteRoute
   '/jobs': typeof JobsRouteRoute
@@ -189,6 +198,7 @@ export interface FileRouteTypes {
     | '/arrow-analytics'
     | '/chart-inference'
     | '/data-visualization'
+    | '/database'
     | '/files'
     | '/genie'
     | '/jobs'
@@ -209,6 +219,7 @@ export interface FileRouteTypes {
     | '/arrow-analytics'
     | '/chart-inference'
     | '/data-visualization'
+    | '/database'
     | '/files'
     | '/genie'
     | '/jobs'
@@ -229,6 +240,7 @@ export interface FileRouteTypes {
     | '/arrow-analytics'
     | '/chart-inference'
     | '/data-visualization'
+    | '/database'
     | '/files'
     | '/genie'
     | '/jobs'
@@ -250,6 +262,7 @@ export interface RootRouteChildren {
   ArrowAnalyticsRouteRoute: typeof ArrowAnalyticsRouteRoute
   ChartInferenceRouteRoute: typeof ChartInferenceRouteRoute
   DataVisualizationRouteRoute: typeof DataVisualizationRouteRoute
+  DatabaseRouteRoute: typeof DatabaseRouteRoute
   FilesRouteRoute: typeof FilesRouteRoute
   GenieRouteRoute: typeof GenieRouteRoute
   JobsRouteRoute: typeof JobsRouteRoute
@@ -350,6 +363,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof FilesRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/database': {
+      id: '/database'
+      path: '/database'
+      fullPath: '/database'
+      preLoaderRoute: typeof DatabaseRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/data-visualization': {
       id: '/data-visualization'
       path: '/data-visualization'
@@ -402,6 +422,7 @@ const rootRouteChildren: RootRouteChildren = {
   ArrowAnalyticsRouteRoute: ArrowAnalyticsRouteRoute,
   ChartInferenceRouteRoute: ChartInferenceRouteRoute,
   DataVisualizationRouteRoute: DataVisualizationRouteRoute,
+  DatabaseRouteRoute: DatabaseRouteRoute,
   FilesRouteRoute: FilesRouteRoute,
   GenieRouteRoute: GenieRouteRoute,
   JobsRouteRoute: JobsRouteRoute,