fix(ui): keep form state when changing theme

make non-fillable fields visible but disabled in UI

app/__test__/modules/migrations/migrations.spec.ts

@@ -7,7 +7,9 @@ import v7 from "./samples/v7.json";
 import v8 from "./samples/v8.json";
 import v8_2 from "./samples/v8-2.json";
 import v9 from "./samples/v9.json";
+import v10 from "./samples/v10.json";
 import { disableConsoleLog, enableConsoleLog } from "core/utils/test";
+import { CURRENT_VERSION } from "modules/db/migrations";
 
 beforeAll(() => disableConsoleLog());
 afterAll(enableConsoleLog);
@@ -61,7 +63,7 @@ async function getRawConfig(
    return await db
       .selectFrom("__bknd")
       .selectAll()
-      .$if(!!opts?.version, (qb) => qb.where("version", "=", opts?.version))
+      .where("version", "=", opts?.version ?? CURRENT_VERSION)
       .$if((opts?.types?.length ?? 0) > 0, (qb) => qb.where("type", "in", opts?.types))
       .execute();
 }
@@ -115,7 +117,6 @@ describe("Migrations", () => {
          "^^s3.secret_access_key^^",
       );
       const [config, secrets] = (await getRawConfig(app, {
-         version: 10,
          types: ["config", "secrets"],
       })) as any;
 
@@ -129,4 +130,15 @@ describe("Migrations", () => {
          "^^s3.secret_access_key^^",
       );
    });
+
+   test("migration from 10 to 11", async () => {
+      expect(v10.version).toBe(10);
+      expect(v10.data.entities.test.fields.title.config.fillable).toEqual(["read", "update"]);
+
+      const app = await createVersionedApp(v10);
+
+      expect(app.version()).toBeGreaterThan(10);
+      const [config] = (await getRawConfig(app, { types: ["config"] })) as any;
+      expect(config.json.data.entities.test.fields.title.config.fillable).toEqual(true);
+   });
 });

app/__test__/modules/migrations/samples/v10.json

@@ -0,0 +1,270 @@
+{
+  "version": 10,
+  "server": {
+    "cors": {
+      "origin": "*",
+      "allow_methods": ["GET", "POST", "PATCH", "PUT", "DELETE"],
+      "allow_headers": [
+        "Content-Type",
+        "Content-Length",
+        "Authorization",
+        "Accept"
+      ],
+      "allow_credentials": true
+    },
+    "mcp": {
+      "enabled": true,
+      "path": "/api/system/mcp",
+      "logLevel": "warning"
+    }
+  },
+  "data": {
+    "basepath": "/api/data",
+    "default_primary_format": "integer",
+    "entities": {
+      "test": {
+        "type": "regular",
+        "fields": {
+          "id": {
+            "type": "primary",
+            "config": {
+              "format": "integer",
+              "fillable": false,
+              "required": false
+            }
+          },
+          "title": {
+            "type": "text",
+            "config": {
+              "required": false,
+              "fillable": ["read", "update"]
+            }
+          },
+          "status": {
+            "type": "enum",
+            "config": {
+              "default_value": "INACTIVE",
+              "options": {
+                "type": "strings",
+                "values": ["INACTIVE", "SUBSCRIBED", "UNSUBSCRIBED"]
+              },
+              "required": true,
+              "fillable": true
+            }
+          },
+          "created_at": {
+            "type": "date",
+            "config": {
+              "type": "datetime",
+              "required": true,
+              "fillable": true
+            }
+          },
+          "schema": {
+            "type": "jsonschema",
+            "config": {
+              "default_from_schema": true,
+              "schema": {
+                "type": "object",
+                "properties": {
+                  "one": {
+                    "type": "number",
+                    "default": 1
+                  }
+                }
+              },
+              "required": true,
+              "fillable": true
+            }
+          },
+          "text": {
+            "type": "text",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          }
+        },
+        "config": {
+          "sort_field": "id",
+          "sort_dir": "asc"
+        }
+      },
+      "items": {
+        "type": "regular",
+        "fields": {
+          "id": {
+            "type": "primary",
+            "config": {
+              "format": "integer",
+              "fillable": false,
+              "required": false
+            }
+          },
+          "title": {
+            "type": "text",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          }
+        },
+        "config": {
+          "sort_field": "id",
+          "sort_dir": "asc"
+        }
+      },
+      "media": {
+        "type": "system",
+        "fields": {
+          "id": {
+            "type": "primary",
+            "config": {
+              "format": "integer",
+              "fillable": false,
+              "required": false
+            }
+          },
+          "path": {
+            "type": "text",
+            "config": {
+              "required": true,
+              "fillable": true
+            }
+          },
+          "folder": {
+            "type": "boolean",
+            "config": {
+              "default_value": false,
+              "hidden": true,
+              "fillable": ["create"],
+              "required": false
+            }
+          },
+          "mime_type": {
+            "type": "text",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          },
+          "size": {
+            "type": "number",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          },
+          "scope": {
+            "type": "text",
+            "config": {
+              "hidden": true,
+              "fillable": ["create"],
+              "required": false
+            }
+          },
+          "etag": {
+            "type": "text",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          },
+          "modified_at": {
+            "type": "date",
+            "config": {
+              "type": "datetime",
+              "required": false,
+              "fillable": true
+            }
+          },
+          "reference": {
+            "type": "text",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          },
+          "entity_id": {
+            "type": "text",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          },
+          "metadata": {
+            "type": "json",
+            "config": {
+              "required": false,
+              "fillable": true
+            }
+          }
+        },
+        "config": {
+          "sort_field": "id",
+          "sort_dir": "asc"
+        }
+      }
+    },
+    "relations": {},
+    "indices": {
+      "idx_unique_media_path": {
+        "entity": "media",
+        "fields": ["path"],
+        "unique": true
+      },
+      "idx_media_reference": {
+        "entity": "media",
+        "fields": ["reference"],
+        "unique": false
+      },
+      "idx_media_entity_id": {
+        "entity": "media",
+        "fields": ["entity_id"],
+        "unique": false
+      }
+    }
+  },
+  "auth": {
+    "enabled": false,
+    "basepath": "/api/auth",
+    "entity_name": "users",
+    "allow_register": true,
+    "jwt": {
+      "secret": "",
+      "alg": "HS256",
+      "fields": ["id", "email", "role"]
+    },
+    "cookie": {
+      "path": "/",
+      "sameSite": "lax",
+      "secure": true,
+      "httpOnly": true,
+      "expires": 604800,
+      "partitioned": false,
+      "renew": true,
+      "pathSuccess": "/",
+      "pathLoggedOut": "/"
+    },
+    "strategies": {
+      "password": {
+        "type": "password",
+        "enabled": true,
+        "config": {
+          "hashing": "sha256"
+        }
+      }
+    },
+    "guard": {
+      "enabled": false
+    },
+    "roles": {}
+  },
+  "media": {
+    "enabled": false
+  },
+  "flows": {
+    "basepath": "/api/flows",
+    "flows": {}
+  }
+}

app/build.ts

@@ -330,11 +330,6 @@ async function buildAdapters() {
       platform: "node",
     }),
 
-    tsup.build({
-      ...baseConfig("web"),
-      platform: "neutral",
-    }),
-
     tsup.build({
       ...baseConfig("sveltekit"),
       platform: "node",
@@ -350,6 +345,11 @@ async function buildAdapters() {
       platform: "node",
     }),
 
+    tsup.build({
+      ...baseConfig("solid-start"),
+      platform: "node",
+    }),
+
     tsup.build({
       ...baseConfig("sqlite/edge"),
       entry: ["src/adapter/sqlite/edge.ts"],

app/e2e/inc/adapters.ts

@@ -15,10 +15,10 @@ const configs = {
   nextjs: {
     base_path: "/admin",
   },
-  meta: {
+  nuxt: {
     base_path: "/admin",
   },
-  nuxt: {
+   "solid-start": {
       base_path: "/admin",
    },
   astro: {

app/package.json

@@ -233,11 +233,6 @@
       "import": "./dist/adapter/nextjs/index.js",
       "require": "./dist/adapter/nextjs/index.js"
     },
-    "./adapter/web": {
-      "types": "./dist/types/adapter/web/index.d.ts",
-      "import": "./dist/adapter/web/index.js",
-      "require": "./dist/adapter/web/index.js"
-    },
     "./adapter/nuxt": {
       "types": "./dist/types/adapter/nuxt/index.d.ts",
       "import": "./dist/adapter/nuxt/index.js",
@@ -268,6 +263,11 @@
       "import": "./dist/adapter/sveltekit/index.js",
       "require": "./dist/adapter/sveltekit/index.js"
     },
+    "./adapter/solid-start": {
+      "types": "./dist/types/adapter/solid-start/index.d.ts",
+      "import": "./dist/adapter/solid-start/index.js",
+      "require": "./dist/adapter/solid-start/index.js"
+    },
     "./adapter/aws": {
       "types": "./dist/types/adapter/aws/index.d.ts",
       "import": "./dist/adapter/aws/index.js",
@@ -297,13 +297,13 @@
       "adapter/cloudflare": ["./dist/types/adapter/cloudflare/index.d.ts"],
       "adapter/vite": ["./dist/types/adapter/vite/index.d.ts"],
       "adapter/nextjs": ["./dist/types/adapter/nextjs/index.d.ts"],
-      "adapter/web": ["./dist/types/adapter/web/index.d.ts"],
       "adapter/nuxt": ["./dist/types/adapter/nuxt/index.d.ts"],
       "adapter/react-router": ["./dist/types/adapter/react-router/index.d.ts"],
       "adapter/bun": ["./dist/types/adapter/bun/index.d.ts"],
       "adapter/node": ["./dist/types/adapter/node/index.d.ts"],
       "adapter/sveltekit": ["./dist/types/adapter/sveltekit/index.d.ts"],
       "adapter/tanstack-start": ["./dist/types/adapter/tanstack-start/index.d.ts"],
+      "adapter/solid-start": ["./dist/types/adapter/solid-start/index.d.ts"],
       "adapter/sqlite": ["./dist/types/adapter/sqlite/edge.d.ts"]
     }
   },
@@ -337,6 +337,7 @@
     "sveltekit",
     "svelte",
     "bun",
-    "node"
+    "node",
+    "solid-start"
   ]
 }

app/src/adapter/solid-start/index.ts

@@ -0,0 +1 @@
+export * from "./solid-start.adapter";

app/src/adapter/solid-start/solid-start.adapter.spec.ts

@@ -0,0 +1,16 @@
+import { afterAll, beforeAll, describe } from "bun:test";
+import * as solidStart from "./solid-start.adapter";
+import { disableConsoleLog, enableConsoleLog } from "core/utils";
+import { adapterTestSuite } from "adapter/adapter-test-suite";
+import { bunTestRunner } from "adapter/bun/test";
+import type { SolidStartBkndConfig } from "./solid-start.adapter";
+
+beforeAll(disableConsoleLog);
+afterAll(enableConsoleLog);
+
+describe("solid-start adapter", () => {
+   adapterTestSuite<SolidStartBkndConfig>(bunTestRunner, {
+      makeApp: solidStart.getApp,
+      makeHandler: solidStart.serve,
+   });
+});

app/src/adapter/solid-start/solid-start.adapter.ts

@@ -0,0 +1,31 @@
+import { createRuntimeApp, type RuntimeBkndConfig } from "bknd/adapter";
+
+export type SolidStartEnv = NodeJS.ProcessEnv;
+export type SolidStartBkndConfig<Env = SolidStartEnv> = RuntimeBkndConfig<Env>;
+
+/**
+ * Get bknd app instance
+ * @param config - bknd configuration
+ * @param args - environment variables
+ */
+export async function getApp<Env = SolidStartEnv>(
+   config: SolidStartBkndConfig<Env>,
+   args: Env = process.env as Env,
+) {
+   return await createRuntimeApp(config, args);
+}
+
+/**
+ * Create middleware handler for Solid Start
+ * @param config - bknd configuration
+ * @param args - environment variables
+ */
+export function serve<Env = SolidStartEnv>(
+   config: SolidStartBkndConfig<Env> = {},
+   args: Env = process.env as Env,
+) {
+   return async (req: Request) => {
+      const app = await getApp(config, args);
+      return app.fetch(req);
+   };
+}

app/src/adapter/web/index.ts

@@ -1 +0,0 @@
-export * from "./web.adapter";

app/src/adapter/web/web.adapter.spec.ts

@@ -1,104 +0,0 @@
-import { afterAll, beforeAll, describe, test, expect } from "bun:test";
-import { createBknd } from "./web.adapter";
-import { disableConsoleLog, enableConsoleLog } from "core/utils";
-import { adapterTestSuite } from "adapter/adapter-test-suite";
-import { bunTestRunner } from "adapter/bun/test";
-
-beforeAll(disableConsoleLog);
-afterAll(enableConsoleLog);
-
-describe("web adapter via createBknd", () => {
-   adapterTestSuite(bunTestRunner, {
-      makeApp: (options, args) => createBknd({ mode: "api", options }, args).getApp(),
-      makeHandler: (options, args) => createBknd({ mode: "api", options: options ?? {} }, args).serve(),
-   });
-
-   // ------------------------ MODE API ------------------------
-   test("caches app instance", async () => {
-      const bknd = createBknd({ mode: "api", options: { connection: { url: ":memory:" } } });
-      const app1 = await bknd.getApp();
-      const app2 = await bknd.getApp();
-      expect(app1).toBe(app2);
-   });
-
-   test("getApi returns api", async () => {
-      const bknd = createBknd({ mode: "api", options: { connection: { url: ":memory:" } } });
-      const api = await bknd.getApi();
-      expect(api).toBeDefined();
-   });
-
-   test("uses createFrameworkApp ", async () => {
-      const bknd = createBknd({ mode: "api", options: { connection: { url: ":memory:" } } });
-      const app = await bknd.getApp();
-      expect(app).toBeDefined();
-      expect(app.isBuilt()).toBe(true);
-   });
-
-   test("serve returns a fetch handler", async () => {
-      const bknd = createBknd({ mode: "api", options: { connection: { url: ":memory:" } } });
-      const handler = bknd.serve();
-      const res = await handler(new Request("http://localhost:3000/api/system/config"));
-      expect(res.status).toBe(200);
-   });
-});
-
-
-// ------------------------ MODE STANDALONE ------------------------
-describe("web adapter via createBknd in standalone mode", () => {
-   adapterTestSuite(bunTestRunner, {
-      makeApp: (options, args) => createBknd({ mode: "standalone", options }, args).getApp(),
-      makeHandler: (options, args) => createBknd({ mode: "standalone", options: options ?? {} }, args).serve(),
-   });
-
-   test("caches app instance", async () => {
-      const bknd = createBknd({ mode: "standalone", options: { connection: { url: ":memory:" } } });
-      const app1 = await bknd.getApp();
-      const app2 = await bknd.getApp();
-      expect(app1).toBe(app2);
-   });
-
-   test("getApi returns api", async () => {
-      const bknd = createBknd({ mode: "standalone", options: { connection: { url: ":memory:" } } });
-      const api = await bknd.getApi();
-      expect(api).toBeDefined();
-   });
-
-   test("uses createRuntimeApp", async () => {
-      const bknd = createBknd({
-         mode: "standalone",
-         options: {
-            connection: { url: ":memory:" },
-            adminOptions: { adminBasepath: "/admin" },
-         }
-      });
-      const app = await bknd.getApp();
-      expect(app).toBeDefined();
-      expect(app.isBuilt()).toBe(true);
-   });
-
-   test("serve returns a fetch handler", async () => {
-      const bknd = createBknd({
-         mode: "standalone",
-         options: {
-            connection: { url: ":memory:" },
-            adminOptions: { adminBasepath: "/admin" },
-         }
-      });
-      const handler = bknd.serve();
-      const res = await handler(new Request("http://localhost:3000/api/system/config"));
-      expect(res.status).toBe(200);
-   });
-
-   test("check admin route", async () => {
-      const bknd = createBknd({
-         mode: "standalone",
-         options: {
-            connection: { url: ":memory:" },
-            adminOptions: { adminBasepath: "/admin" },
-         }
-      });
-      const handler = bknd.serve();
-      const res = await handler(new Request("http://localhost:3000/admin"));
-      expect(res.status).toBe(200);
-   });
-});

app/src/adapter/web/web.adapter.ts

@@ -1,68 +0,0 @@
-import {
-   createFrameworkApp,
-   createRuntimeApp,
-   type FrameworkBkndConfig,
-   type RuntimeBkndConfig,
-} from "bknd/adapter";
-import { $console } from "core/utils";
-import type { App } from "App";
-
-export type AdapterModeWithOptions<Env = Record<string, string | undefined>> =
-   | {
-        mode: "standalone";
-        options: RuntimeBkndConfig<Env>;
-     }
-   | {
-        mode: "api";
-        options: FrameworkBkndConfig<Env>;
-     };
-
-export function createBknd<Env>(config: AdapterModeWithOptions<Env>, env?: Env) {
-   let appPromise: Promise<App> | undefined;
-
-   const { mode, options } = config;
-
-   async function getApp(): Promise<App> {
-      if (!appPromise) {
-         if (mode === "standalone") {
-            if (options.adminOptions && !options.serveStatic) {
-               $console.warn(
-                  "adminOptions provided without serveStatic — admin UI assets may not be served. " +
-                     "See `serveStatic`, `serveStaticViaImport`, or add a `package.json` script that runs `bknd copy-assets --out {relative_static_assets_directory_path}`.",
-               );
-            }
-            appPromise = createRuntimeApp(options, env);
-         } else {
-            appPromise = createFrameworkApp(options, env);
-         }
-      }
-      return appPromise;
-   }
-
-   async function getApi(opts?: { headers?: Headers; verify?: boolean }) {
-      const app = await getApp();
-      if (opts?.verify) {
-         const api = app.getApi({ headers: opts.headers });
-         await api.verifyAuth();
-         return api;
-      }
-      return app.getApi(opts?.headers ? { headers: opts.headers } : undefined);
-   }
-
-   function serve() {
-      return async (req: Request) => {
-         const app = await getApp();
-         return app.fetch(req);
-      };
-   }
-
-   return { getApp, getApi, serve };
-}
-
-/** Utility type to determine the config type based on mode,
- *  Usage `Config<"standalone">` or `Config<"api">`
- */
-export type Config<T extends AdapterModeWithOptions["mode"]> = Extract<
-   Parameters<typeof createBknd>[0],
-   { mode: T }
->['options'];

app/src/data/entities/Entity.ts

@@ -136,8 +136,10 @@ export class Entity<
          .map((field) => (alias ? `${alias}.${field.name} as ${field.name}` : field.name));
    }
 
-   getFillableFields(context?: TActionContext, include_virtual?: boolean): Field[] {
-      return this.getFields(include_virtual).filter((field) => field.isFillable(context));
+   getFillableFields(context?: "create" | "update", include_virtual?: boolean): Field[] {
+      return this.getFields({ virtual: include_virtual }).filter((field) =>
+         field.isFillable(context),
+      );
    }
 
    getRequiredFields(): Field[] {
@@ -189,9 +191,15 @@ export class Entity<
       return this.fields.findIndex((field) => field.name === name) !== -1;
    }
 
-   getFields(include_virtual: boolean = false): Field[] {
-      if (include_virtual) return this.fields;
-      return this.fields.filter((f) => !f.isVirtual());
+   getFields({
+      virtual = false,
+      primary = true,
+   }: { virtual?: boolean; primary?: boolean } = {}): Field[] {
+      return this.fields.filter((f) => {
+         if (!virtual && f.isVirtual()) return false;
+         if (!primary && f instanceof PrimaryField) return false;
+         return true;
+      });
    }
 
    addField(field: Field) {
@@ -231,7 +239,7 @@ export class Entity<
          }
       }
 
-      const fields = this.getFillableFields(context, false);
+      const fields = this.getFillableFields(context as any, false);
 
       if (options?.ignoreUnknown !== true) {
          const field_names = fields.map((f) => f.name);
@@ -275,7 +283,7 @@ export class Entity<
             fields = this.getFillableFields(options.context);
             break;
          default:
-            fields = this.getFields(true);
+            fields = this.getFields({ virtual: true });
       }
 
       const _fields = Object.fromEntries(fields.map((field) => [field.name, field]));

app/src/data/entities/mutation/Mutator.ts

@@ -83,8 +83,10 @@ export class Mutator<
          }
 
          // we should never get here, but just to be sure (why?)
-         if (!field.isFillable(context)) {
-            throw new Error(`Field "${key}" is not fillable on entity "${entity.name}"`);
+         if (!field.isFillable(context as any)) {
+            throw new Error(
+               `Field "${key}" of entity "${entity.name}" is not fillable on context "${context}"`,
+            );
          }
 
          // transform from field

app/src/data/fields/Field.ts

@@ -26,11 +26,19 @@ export const baseFieldConfigSchema = s
    .strictObject({
       label: s.string(),
       description: s.string(),
-      required: s.boolean({ default: false }),
-      fillable: s.anyOf([
+      required: s.boolean({ default: DEFAULT_REQUIRED }),
+      fillable: s.anyOf(
+         [
             s.boolean({ title: "Boolean" }),
-         s.array(s.string({ enum: ActionContext }), { title: "Context", uniqueItems: true }),
-      ]),
+            s.array(s.string({ enum: ["create", "update"] }), {
+               title: "Context",
+               uniqueItems: true,
+            }),
+         ],
+         {
+            default: DEFAULT_FILLABLE,
+         },
+      ),
       hidden: s.anyOf([
          s.boolean({ title: "Boolean" }),
          // @todo: tmp workaround
@@ -103,7 +111,7 @@ export abstract class Field<
       return this.config?.default_value;
    }
 
-   isFillable(context?: TActionContext): boolean {
+   isFillable(context?: "create" | "update"): boolean {
       if (Array.isArray(this.config.fillable)) {
          return context ? this.config.fillable.includes(context) : DEFAULT_FILLABLE;
       }
@@ -165,7 +173,7 @@ export abstract class Field<
    // @todo: add field level validation
    isValid(value: any, context: TActionContext): boolean {
       if (typeof value !== "undefined") {
-         return this.isFillable(context);
+         return this.isFillable(context as any);
       } else if (context === "create") {
          return !this.isRequired();
       }

app/src/data/fields/field-test-suite.ts

@@ -99,6 +99,7 @@ export function fieldTestSuite(
       const _config = {
          ..._requiredConfig,
          required: false,
+         fillable: true,
       };
 
       function fieldJson(field: Field) {
@@ -116,10 +117,7 @@ export function fieldTestSuite(
 
       expect(fieldJson(fillable)).toEqual({
          type: noConfigField.type,
-         config: {
-            ..._config,
-            fillable: true,
-         },
+         config: _config,
       });
 
       expect(fieldJson(required)).toEqual({
@@ -150,7 +148,6 @@ export function fieldTestSuite(
          type: requiredAndDefault.type,
          config: {
             ..._config,
-            fillable: true,
             required: true,
             default_value: config.defaultValue,
          },

app/src/data/helper.ts

@@ -24,7 +24,8 @@ export function getChangeSet(
       (acc, _value, key) => {
          const field = fields.find((f) => f.name === key);
          // @todo: filtering virtual here, need to check (because of media)
-         if (!field || field.isVirtual()) return;
+         // @note: adding non-fillable here as it'll fail validaiton on backend
+         if (!field || field.isVirtual() || !field.isFillable()) return;
          const value = _value === "" ? null : _value;
 
          // normalize to null if undefined

app/src/data/schema/SchemaManager.ts

@@ -77,7 +77,7 @@ export class SchemaManager {
    }
 
    getIntrospectionFromEntity(entity: Entity): IntrospectedTable {
-      const fields = entity.getFields(false);
+      const fields = entity.getFields({ virtual: false });
       const indices = this.em.getIndicesOf(entity);
 
       // this is intentionally setting values to defaults, like "nullable" and "default"

app/src/modules/db/migrations.ts

@@ -1,6 +1,7 @@
 import { transformObject } from "bknd/utils";
 import type { Kysely } from "kysely";
 import { set } from "lodash-es";
+import type { InitialModuleConfigs } from "modules/ModuleManager";
 
 export type MigrationContext = {
    db: Kysely<any>;
@@ -107,6 +108,29 @@ export const migrations: Migration[] = [
          return config;
       },
    },
+   {
+      // change field.config.fillable to only "create" and "update"
+      version: 11,
+      up: async (config: InitialModuleConfigs) => {
+         const { data, ...rest } = config;
+         return {
+            ...rest,
+            data: {
+               ...data,
+               entities: transformObject(data?.entities ?? {}, (entity) => {
+                  return {
+                     ...entity,
+                     fields: transformObject(entity?.fields ?? {}, (field) => {
+                        const fillable = field!.config?.fillable;
+                        if (!fillable || typeof fillable === "boolean") return field;
+                        return { ...field, config: { ...field!.config, fillable: true } };
+                     }),
+                  };
+               }),
+            },
+         };
+      },
+   },
 ];
 
 export const CURRENT_VERSION = migrations[migrations.length - 1]?.version ?? 0;

app/src/plugins/data/sort.plugin.spec.ts

@@ -0,0 +1,858 @@
+import { describe, test, expect, beforeAll, afterAll } from "bun:test";
+import { sort } from "./sort.plugin";
+import { em, entity, text, number } from "bknd";
+import { createApp } from "core/test/utils";
+import { disableConsoleLog, enableConsoleLog } from "core/utils/test";
+
+beforeAll(() => disableConsoleLog());
+afterAll(enableConsoleLog);
+
+describe("sort plugin", () => {
+   test("should add sort field to configured entities", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const taskEntity = app.em.entity("tasks");
+      expect(taskEntity).toBeDefined();
+      expect(taskEntity?.fields.map((f) => f.name)).toContain("position");
+      expect(taskEntity?.field("position")?.type).toBe("number");
+   });
+
+   test("should auto-assign sort values on insert (starting from 0)", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // insert first item
+      const { data: task1 } = await mutator.insertOne({ title: "Task 1" });
+      expect(task1.position).toBe(0);
+
+      // insert second item
+      const { data: task2 } = await mutator.insertOne({ title: "Task 2" });
+      expect(task2.position).toBe(1);
+
+      // insert third item
+      const { data: task3 } = await mutator.insertOne({ title: "Task 3" });
+      expect(task3.position).toBe(2);
+   });
+
+   test("should preserve manually set sort values on insert", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // insert with explicit position
+      const { data: task } = await mutator.insertOne({ title: "Task 1", position: 10 });
+      expect(task.position).toBe(10);
+   });
+
+   test("should reorder items via API endpoint", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks at positions 0, 1, 2
+      const { data: task1 } = await mutator.insertOne({ title: "Task 1" });
+      const { data: task2 } = await mutator.insertOne({ title: "Task 2" });
+      const { data: task3 } = await mutator.insertOne({ title: "Task 3" });
+
+      // move task3 (position 2) to position 0
+      const res = await app.server.request("/api/sort/tasks/reorder", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({ id: task3.id, position: 0 }),
+      });
+
+      expect(res.status).toBe(200);
+
+      // verify positions
+      const repo = app.em.repo("tasks");
+      const { data: updatedTask1 } = await repo.findOne({ id: task1.id });
+      const { data: updatedTask2 } = await repo.findOne({ id: task2.id });
+      const { data: updatedTask3 } = await repo.findOne({ id: task3.id });
+
+      expect(updatedTask3.position).toBe(0); // moved to position 0
+      expect(updatedTask1.position).toBe(1); // shifted down
+      expect(updatedTask2.position).toBe(2); // shifted down
+   });
+
+   test("should automatically reorder when updating sort field directly", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks at positions 0, 1, 2, 3
+      const { data: task1 } = await mutator.insertOne({ title: "Task 1" });
+      const { data: task2 } = await mutator.insertOne({ title: "Task 2" });
+      const { data: task3 } = await mutator.insertOne({ title: "Task 3" });
+      const { data: task4 } = await mutator.insertOne({ title: "Task 4" });
+
+      // move task4 (position 3) to position 1 by updating directly
+      await mutator.updateOne(task4.id, { position: 1 });
+
+      // verify positions
+      const repo = app.em.repo("tasks");
+      const { data: updatedTask1 } = await repo.findOne({ id: task1.id });
+      const { data: updatedTask2 } = await repo.findOne({ id: task2.id });
+      const { data: updatedTask3 } = await repo.findOne({ id: task3.id });
+      const { data: updatedTask4 } = await repo.findOne({ id: task4.id });
+
+      expect(updatedTask1.position).toBe(0); // unchanged
+      expect(updatedTask2.position).toBe(2); // shifted down
+      expect(updatedTask3.position).toBe(3); // shifted down
+      expect(updatedTask4.position).toBe(1); // moved to position 1
+   });
+
+   test("should automatically reorder when moving items up", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks at positions 0, 1, 2, 3
+      const { data: task1 } = await mutator.insertOne({ title: "Task 1" });
+      const { data: task2 } = await mutator.insertOne({ title: "Task 2" });
+      const { data: task3 } = await mutator.insertOne({ title: "Task 3" });
+      const { data: task4 } = await mutator.insertOne({ title: "Task 4" });
+
+      // move task1 (position 0) to position 2 by updating directly
+      await mutator.updateOne(task1.id, { position: 2 });
+
+      // verify positions
+      const repo = app.em.repo("tasks");
+      const { data: updatedTask1 } = await repo.findOne({ id: task1.id });
+      const { data: updatedTask2 } = await repo.findOne({ id: task2.id });
+      const { data: updatedTask3 } = await repo.findOne({ id: task3.id });
+      const { data: updatedTask4 } = await repo.findOne({ id: task4.id });
+
+      expect(updatedTask1.position).toBe(2); // moved to position 2
+      expect(updatedTask2.position).toBe(0); // shifted up
+      expect(updatedTask3.position).toBe(1); // shifted up
+      expect(updatedTask4.position).toBe(3); // unchanged
+   });
+
+   test("should support scoped sorting", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+                  project_id: number(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                        scope: "project_id",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks in project 1
+      const { data: p1t1 } = await mutator.insertOne({
+         title: "P1 Task 1",
+         project_id: 1,
+      });
+      const { data: p1t2 } = await mutator.insertOne({
+         title: "P1 Task 2",
+         project_id: 1,
+      });
+
+      // create tasks in project 2
+      const { data: p2t1 } = await mutator.insertOne({
+         title: "P2 Task 1",
+         project_id: 2,
+      });
+      const { data: p2t2 } = await mutator.insertOne({
+         title: "P2 Task 2",
+         project_id: 2,
+      });
+
+      // positions should be scoped per project
+      expect(p1t1.position).toBe(0);
+      expect(p1t2.position).toBe(1);
+      expect(p2t1.position).toBe(0); // resets for new scope
+      expect(p2t2.position).toBe(1);
+   });
+
+   test("should reorder only within scope", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+                  project_id: number(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                        scope: "project_id",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks in project 1
+      const { data: p1t1 } = await mutator.insertOne({
+         title: "P1 Task 1",
+         project_id: 1,
+      });
+      const { data: p1t2 } = await mutator.insertOne({
+         title: "P1 Task 2",
+         project_id: 1,
+      });
+      const { data: p1t3 } = await mutator.insertOne({
+         title: "P1 Task 3",
+         project_id: 1,
+      });
+
+      // create tasks in project 2
+      const { data: p2t1 } = await mutator.insertOne({
+         title: "P2 Task 1",
+         project_id: 2,
+      });
+      const { data: p2t2 } = await mutator.insertOne({
+         title: "P2 Task 2",
+         project_id: 2,
+      });
+
+      // move p1t3 to position 0 (should only affect project 1)
+      await app.server.request("/api/sort/tasks/reorder", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({ id: p1t3.id, position: 0 }),
+      });
+
+      // verify project 1 tasks
+      const repo = app.em.repo("tasks");
+      const { data: updatedP1t1 } = await repo.findOne({ id: p1t1.id });
+      const { data: updatedP1t2 } = await repo.findOne({ id: p1t2.id });
+      const { data: updatedP1t3 } = await repo.findOne({ id: p1t3.id });
+
+      expect(updatedP1t3.position).toBe(0); // moved to position 0
+      expect(updatedP1t1.position).toBe(1); // shifted
+      expect(updatedP1t2.position).toBe(2); // shifted
+
+      // verify project 2 tasks are unchanged
+      const { data: updatedP2t1 } = await repo.findOne({ id: p2t1.id });
+      const { data: updatedP2t2 } = await repo.findOne({ id: p2t2.id });
+
+      expect(updatedP2t1.position).toBe(0); // unchanged
+      expect(updatedP2t2.position).toBe(1); // unchanged
+   });
+
+   test("should recalculate all positions", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks with irregular positions
+      await mutator.insertOne({ title: "Task 1", position: 5 });
+      await mutator.insertOne({ title: "Task 2", position: 10 });
+      await mutator.insertOne({ title: "Task 3", position: 15 });
+      await mutator.insertOne({ title: "Task 4", position: 100 });
+
+      // recalculate
+      const res = await app.server.request("/api/sort/tasks/recalculate", {
+         method: "POST",
+         body: JSON.stringify({}),
+         headers: {
+            "Content-Type": "application/json",
+         },
+      });
+
+      expect(res.status).toBe(200);
+
+      // verify positions are now 0, 1, 2, 3
+      const { data: tasks } = await app.em.repo("tasks").findMany({
+         orderBy: [{ position: "asc" }],
+      });
+
+      expect(tasks.length).toBe(4);
+      expect(tasks[0].position).toBe(0);
+      expect(tasks[1].position).toBe(1);
+      expect(tasks[2].position).toBe(2);
+      expect(tasks[3].position).toBe(3);
+   });
+
+   test("should recalculate positions within scope only", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+                  project_id: number(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                        scope: "project_id",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks in project 1 with irregular positions
+      await mutator.insertOne({ title: "P1 Task 1", project_id: 1, position: 5 });
+      await mutator.insertOne({ title: "P1 Task 2", project_id: 1, position: 15 });
+
+      // create tasks in project 2 with irregular positions
+      await mutator.insertOne({ title: "P2 Task 1", project_id: 2, position: 10 });
+      await mutator.insertOne({ title: "P2 Task 2", project_id: 2, position: 20 });
+
+      // recalculate only project 1
+      const res = await app.server.request("/api/sort/tasks/recalculate", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({ scope: 1 }),
+      });
+
+      expect(res.status).toBe(200);
+
+      // verify project 1 tasks are recalculated
+      const { data: p1Tasks } = await app.em.repo("tasks").findMany({
+         where: { project_id: 1 },
+         orderBy: [{ position: "asc" }],
+      });
+
+      expect(p1Tasks.length).toBe(2);
+      expect(p1Tasks[0].position).toBe(0);
+      expect(p1Tasks[1].position).toBe(1);
+
+      // verify project 2 tasks are unchanged
+      const { data: p2Tasks } = await app.em.repo("tasks").findMany({
+         where: { project_id: 2 },
+         orderBy: [{ position: "asc" }],
+      });
+
+      expect(p2Tasks.length).toBe(2);
+      expect(p2Tasks[0].position).toBe(10); // unchanged
+      expect(p2Tasks[1].position).toBe(20); // unchanged
+   });
+
+   test("should handle moving items to the end", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks at positions 0, 1, 2, 3
+      const { data: task1 } = await mutator.insertOne({ title: "Task 1" });
+      const { data: task2 } = await mutator.insertOne({ title: "Task 2" });
+      const { data: task3 } = await mutator.insertOne({ title: "Task 3" });
+      const { data: task4 } = await mutator.insertOne({ title: "Task 4" });
+
+      // move task1 to the end (position 3)
+      await app.server.request("/api/sort/tasks/reorder", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({ id: task1.id, position: 3 }),
+      });
+
+      // verify positions
+      const repo = app.em.repo("tasks");
+      const { data: updatedTask1 } = await repo.findOne({ id: task1.id });
+      const { data: updatedTask2 } = await repo.findOne({ id: task2.id });
+      const { data: updatedTask3 } = await repo.findOne({ id: task3.id });
+      const { data: updatedTask4 } = await repo.findOne({ id: task4.id });
+
+      expect(updatedTask1.position).toBe(3); // moved to end
+      expect(updatedTask2.position).toBe(0); // shifted up
+      expect(updatedTask3.position).toBe(1); // shifted up
+      expect(updatedTask4.position).toBe(2); // shifted up
+   });
+
+   test("should return 400 for invalid item id", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const res = await app.server.request("/api/sort/tasks/reorder", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({ id: 999999, position: 0 }),
+      });
+
+      expect(res.status).toBe(400);
+   });
+
+   test("should handle multiple entities with different configurations", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+               categories: entity("categories", {
+                  name: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                     categories: {
+                        field: "order",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      // verify both entities have their sort fields
+      const taskEntity = app.em.entity("tasks");
+      const categoryEntity = app.em.entity("categories");
+
+      expect(taskEntity?.fields.map((f) => f.name)).toContain("position");
+      expect(categoryEntity?.fields.map((f) => f.name)).toContain("order");
+
+      // create items in both entities
+      const { data: task } = await app.em.mutator("tasks").insertOne({ title: "Task 1" });
+      const { data: category } = await app.em.mutator("categories").insertOne({ name: "Cat 1" });
+
+      expect(task.position).toBe(0);
+      expect(category.order).toBe(0);
+
+      // verify both endpoints exist
+      const taskRes = await app.server.request("/api/sort/tasks/recalculate", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({}),
+      });
+      const catRes = await app.server.request("/api/sort/categories/recalculate", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({}),
+      });
+
+      expect(taskRes.status).toBe(200);
+      expect(catRes.status).toBe(200);
+   });
+
+   test("should not trigger reorder when updating other fields", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks
+      const { data: task1 } = await mutator.insertOne({ title: "Task 1" });
+      const { data: task2 } = await mutator.insertOne({ title: "Task 2" });
+      const { data: task3 } = await mutator.insertOne({ title: "Task 3" });
+
+      // update title only (should not trigger reordering)
+      await mutator.updateOne(task2.id, { title: "Task 2 Updated" });
+
+      // verify positions are unchanged
+      const repo = app.em.repo("tasks");
+      const { data: updatedTask1 } = await repo.findOne({ id: task1.id });
+      const { data: updatedTask2 } = await repo.findOne({ id: task2.id });
+      const { data: updatedTask3 } = await repo.findOne({ id: task3.id });
+
+      expect(updatedTask1.position).toBe(0);
+      expect(updatedTask2.position).toBe(1);
+      expect(updatedTask2.title).toBe("Task 2 Updated");
+      expect(updatedTask3.position).toBe(2);
+   });
+
+   test("should handle null sort values", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create task with null position (bypass listener by using kysely directly)
+      await app.connection.kysely
+         .insertInto("tasks")
+         .values({ title: "Task with null", position: null })
+         .execute();
+
+      // create normal task
+      await mutator.insertOne({ title: "Task 2" });
+
+      // update the null task to have a position
+      const nullTask = await app.connection.kysely
+         .selectFrom("tasks")
+         .selectAll()
+         .where("title", "=", "Task with null")
+         .executeTakeFirst();
+
+      await mutator.updateOne(nullTask!.id, { position: 0 });
+
+      // verify both tasks have proper positions
+      const { data: tasks } = await app.em.repo("tasks").findMany({
+         sort: { by: "position", dir: "asc" },
+      });
+
+      expect(tasks.length).toBe(2);
+      expect(tasks[0].position).toBe(0);
+      expect(tasks[1].position).toBe(1);
+   });
+
+   test("should not create duplicates when moving to an occupied position", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create two tasks at positions 0 and 1
+      const { data: task1 } = await mutator.insertOne({ title: "Task 1" });
+      const { data: task2 } = await mutator.insertOne({ title: "Task 2" });
+
+      expect(task1.position).toBe(0);
+      expect(task2.position).toBe(1);
+
+      // move task2 (at position 1) to position 0
+      await mutator.updateOne(task2.id, { position: 0 });
+
+      // verify no duplicates
+      const { data: tasks } = await app.em.repo("tasks").findMany({
+         sort: { by: "position", dir: "asc" },
+      });
+
+      expect(tasks.length).toBe(2);
+      expect(tasks[0].id).toBe(task2.id);
+      expect(tasks[0].position).toBe(0);
+      expect(tasks[1].id).toBe(task1.id);
+      expect(tasks[1].position).toBe(1);
+
+      // verify no tasks have the same position
+      const positions = tasks.map((t) => t.position);
+      const uniquePositions = new Set(positions);
+      expect(uniquePositions.size).toBe(positions.length);
+   });
+
+   test("should preserve order when recalculating", async () => {
+      const app = createApp({
+         config: {
+            data: em({
+               tasks: entity("tasks", {
+                  title: text(),
+               }),
+            }).toJSON(),
+         },
+         options: {
+            plugins: [
+               sort({
+                  entities: {
+                     tasks: {
+                        field: "position",
+                     },
+                  },
+               }),
+            ],
+         },
+      });
+      await app.build();
+
+      const mutator = app.em.mutator("tasks");
+
+      // create tasks with specific positions
+      const { data: taskA } = await mutator.insertOne({ title: "Task A", position: 5 });
+      const { data: taskB } = await mutator.insertOne({ title: "Task B", position: 3 });
+      const { data: taskC } = await mutator.insertOne({ title: "Task C", position: 10 });
+
+      // recalculate
+      await app.server.request("/api/sort/tasks/recalculate", {
+         method: "POST",
+         headers: {
+            "Content-Type": "application/json",
+         },
+         body: JSON.stringify({}),
+      });
+
+      // verify order is preserved (B, A, C based on original positions)
+      const { data: tasks } = await app.em.repo("tasks").findMany({
+         sort: { by: "position", dir: "asc" },
+      });
+
+      expect(tasks[0].id).toBe(taskB.id); // was at 3, now at 0
+      expect(tasks[0].position).toBe(0);
+      expect(tasks[1].id).toBe(taskA.id); // was at 5, now at 1
+      expect(tasks[1].position).toBe(1);
+      expect(tasks[2].id).toBe(taskC.id); // was at 10, now at 2
+      expect(tasks[2].position).toBe(2);
+   });
+});

app/src/plugins/data/sort.plugin.ts

@@ -0,0 +1,423 @@
+import { Exception, type App, type AppPlugin, DatabaseEvents, em, entity, number } from "bknd";
+import { invariant, HttpStatus, jsc, s, $console } from "bknd/utils";
+import { Hono } from "hono";
+import { sql } from "kysely";
+
+const DEFAULT_BATCH_SIZE = 1000;
+
+export type SortPluginOptions = {
+   /**
+    * The base path for the API endpoints.
+    * @default "/api/sort"
+    */
+   apiBasePath?: string;
+
+   /**
+    * Configuration for entities that should have sorting enabled.
+    * Key is the entity name, value is the configuration.
+    */
+   entities: Record<
+      string,
+      {
+         /**
+          * The name of the sort property (must be a number field).
+          */
+         field: string;
+
+         /**
+          * Optional scope field name. If provided, sorting will only happen within the same scope.
+          * For example, if scope is "category_id", items will only be sorted within items
+          * that have the same category_id value.
+          */
+         scope?: string;
+      }
+   >;
+
+   /**
+    * The batch size for recalculating sort order.
+    * @default 1000
+    */
+   recalculateBatchSize?: number;
+};
+
+class SortError extends Exception {
+   override name = "SortError";
+   override code = HttpStatus.BAD_REQUEST;
+}
+
+export function sort({
+   apiBasePath = "/api/sort",
+   entities,
+   recalculateBatchSize = DEFAULT_BATCH_SIZE,
+}: SortPluginOptions): AppPlugin {
+   return (app: App) => {
+      return {
+         name: "sort",
+         schema: () => {
+            return em(
+               Object.fromEntries(
+                  Object.entries(entities).map(([entityName, config]) => [
+                     entityName,
+                     entity(entityName, {
+                        [config.field]: number({ default_value: 0 }),
+                     }),
+                  ]),
+               ),
+               ({ index }, schema) => {
+                  for (const [entityName, config] of Object.entries(entities)) {
+                     const indexed = app.em.getIndexedFields(entityName);
+                     if (!indexed.some((f) => f.name === config.field)) {
+                        index(schema[entityName]!).on([config.field]);
+                     }
+                  }
+               },
+            );
+         },
+         onBuilt: async () => {
+            invariant(
+               entities && Object.keys(entities).length > 0,
+               "At least one entity must be configured",
+            );
+
+            // validate entities exist and have the configured fields
+            for (const [entityName, config] of Object.entries(entities)) {
+               const entity = app.em.entity(entityName);
+               invariant(entity, `Entity "${entityName}" not found in schema`);
+
+               const sortFieldSchema = entity.field(config.field)!;
+               invariant(
+                  sortFieldSchema,
+                  `Sort field "${config.field}" not found in entity "${entityName}"`,
+               );
+               invariant(
+                  sortFieldSchema.type === "number",
+                  `Sort field "${config.field}" in entity "${entityName}" must be a number field`,
+               );
+
+               if (config.scope) {
+                  const scopeFieldSchema = entity.field(config.scope);
+                  invariant(
+                     scopeFieldSchema,
+                     `Scope field "${config.scope}" not found in entity "${entityName}"`,
+                  );
+               }
+            }
+
+            const hono = new Hono();
+
+            // register recalculate endpoints for each entity
+            for (const [entityName, config] of Object.entries(entities)) {
+               hono.post(
+                  `/${entityName}/recalculate`,
+                  jsc(
+                     "json",
+                     s
+                        .object({
+                           scope: s.any().optional(),
+                        })
+                        .optional(),
+                  ),
+                  async (c) => {
+                     const body = c.req.valid("json");
+                     const scope = body?.scope;
+
+                     await recalculateSortOrder(
+                        app,
+                        entityName,
+                        config,
+                        recalculateBatchSize,
+                        scope,
+                     );
+
+                     return c.json({ success: true, message: "Sort order recalculated" });
+                  },
+               );
+
+               hono.post(
+                  `/${entityName}/reorder`,
+                  jsc(
+                     "json",
+                     s.object({
+                        id: s.any(),
+                        position: s.number(),
+                     }),
+                  ),
+                  async (c) => {
+                     const { id, position } = c.req.valid("json");
+
+                     await reorderItem(app, entityName, config, id, position);
+
+                     return c.json({ success: true, message: "Item reordered" });
+                  },
+               );
+            }
+
+            app.server.route(apiBasePath, hono);
+
+            // register listeners for automatic reordering
+            registerListeners(app, entities);
+         },
+      };
+   };
+}
+
+async function reorderItem(
+   app: App,
+   entityName: string,
+   config: SortPluginOptions["entities"][string],
+   id: any,
+   newPosition: number,
+) {
+   const { field: sortField, scope: scopeField } = config;
+   const em = app.em.fork();
+   const kysely = em.connection.kysely;
+
+   // get the item
+   const { data: item } = await em.repo(entityName).findOne({ id });
+   if (!item) {
+      throw new SortError(`Item with id "${id}" not found in entity "${entityName}"`);
+   }
+
+   const oldPosition = item[sortField] as number | null | undefined;
+   const scopeValue = scopeField ? item[scopeField] : undefined;
+
+   // update the item with new position (using forked em, so no listeners are triggered)
+   await em.mutator(entityName).updateOne(id, { [sortField]: newPosition });
+
+   // shift other items using kysely
+   if (oldPosition !== undefined && oldPosition !== null && oldPosition !== newPosition) {
+      if (newPosition < oldPosition) {
+         // moving up: increment items between newPosition and oldPosition
+         let query = kysely
+            .updateTable(entityName)
+            .set({ [sortField]: sql`${sql.ref(sortField)} + 1` } as any)
+            .where(sortField as any, ">=", newPosition)
+            .where(sortField as any, "<", oldPosition)
+            .where("id", "!=", id);
+
+         if (scopeField && scopeValue !== undefined) {
+            query = query.where(scopeField as any, "=", scopeValue);
+         }
+
+         await query.execute();
+      } else {
+         // moving down: decrement items between oldPosition and newPosition
+         let query = kysely
+            .updateTable(entityName)
+            .set({ [sortField]: sql`${sql.ref(sortField)} - 1` } as any)
+            .where(sortField as any, ">", oldPosition)
+            .where(sortField as any, "<=", newPosition)
+            .where("id", "!=", id);
+
+         if (scopeField && scopeValue !== undefined) {
+            query = query.where(scopeField as any, "=", scopeValue);
+         }
+
+         await query.execute();
+      }
+   } else if (oldPosition === undefined || oldPosition === null) {
+      // new item, shift everything at or after this position
+      let query = kysely
+         .updateTable(entityName)
+         .set({ [sortField]: sql`${sql.ref(sortField)} + 1` } as any)
+         .where(sortField as any, ">=", newPosition)
+         .where("id", "!=", id);
+
+      if (scopeField && scopeValue !== undefined) {
+         query = query.where(scopeField as any, "=", scopeValue);
+      }
+
+      await query.execute();
+   }
+}
+
+async function recalculateSortOrder(
+   app: App,
+   entityName: string,
+   config: SortPluginOptions["entities"][string],
+   batchSize: number,
+   scope?: any,
+) {
+   const { field: sortField, scope: scopeField } = config;
+   const db = app.connection.kysely;
+
+   const { count } = (await db
+      .selectFrom(entityName)
+      .select((eb) => eb.fn.count<number>("id").as("count"))
+      .$if(Boolean(scopeField && scope !== undefined), (eb) =>
+         eb.where(scopeField as any, "=", scope),
+      )
+      .$castTo<{ count: number }>()
+      .executeTakeFirst()) ?? { count: 0 };
+
+   const batches = Math.ceil(count / batchSize);
+   for (let i = 0; i < batches; i++) {
+      // get all items in scope, ordered by current sort value
+      const items = await db
+         .selectFrom(entityName)
+         .select(["id", sortField])
+         .$if(Boolean(scopeField && scope !== undefined), (eb) =>
+            eb.where(scopeField as any, "=", scope),
+         )
+         .orderBy(sortField, "asc")
+         .limit(batchSize)
+         .offset(i * batchSize)
+         .execute();
+
+      const newQbs = items.map((item, index) =>
+         db
+            .updateTable(entityName)
+            .set({ [sortField]: index })
+            .where("id", "=", item.id),
+      );
+
+      await app.connection.executeQueries(...newQbs);
+      $console.log(
+         `[Sort Plugin] Recalculated sort order for ${items.length} items in entity "${entityName}"${scopeField && scope !== undefined ? ` (scope: ${scope})` : ""} [batch ${i + 1}/${batches}]`,
+      );
+   }
+}
+
+function registerListeners(app: App, entities: SortPluginOptions["entities"]) {
+   const kysely = app.connection.kysely;
+
+   // handle insert events
+   app.emgr.onEvent(
+      DatabaseEvents.MutatorInsertBefore,
+      async (e) => {
+         const entityName = e.params.entity.name;
+         const config = entities[entityName];
+         if (!config) return e.params.data;
+
+         const { field: sortField, scope: scopeField } = config;
+         const data = e.params.data;
+         const scopeValue = scopeField ? data[scopeField] : undefined;
+
+         // if no position provided, set to max + 1
+         if (data[sortField] === undefined || data[sortField] === null) {
+            const query = kysely
+               .selectFrom(entityName)
+               .select((eb) => [eb.fn.max<number>(eb.ref(sortField)).as("max")])
+               // add scope filter if needed
+               .$if(Boolean(scopeField && scopeValue), (eb) =>
+                  eb.where(scopeField as any, "=", scopeValue as any),
+               );
+
+            const result = await query.executeTakeFirst();
+            const max = result?.max ?? -1;
+
+            return {
+               ...data,
+               [sortField]: max + 1,
+            };
+         }
+
+         // if position is provided, shift other items at or after that position
+         const newPosition = data[sortField] as number;
+
+         let shiftQuery = kysely
+            .updateTable(entityName)
+            .set({ [sortField]: sql`${sql.ref(sortField)} + 1` } as any)
+            .where(sortField as any, ">=", newPosition);
+
+         if (scopeField && scopeValue !== undefined) {
+            shiftQuery = shiftQuery.where(scopeField as any, "=", scopeValue);
+         }
+
+         await shiftQuery.execute();
+
+         return data;
+      },
+      {
+         mode: "sync",
+         id: "bknd-sort-insert",
+      },
+   );
+
+   // handle update events
+   app.emgr.onEvent(
+      DatabaseEvents.MutatorUpdateBefore,
+      async (e) => {
+         const entityName = e.params.entity.name;
+         const config = entities[entityName];
+         if (!config) return e.params.data;
+
+         const { field: sortField, scope: scopeField } = config;
+         const data = e.params.data;
+
+         // only handle if sort field is being updated
+         if (!(sortField in data)) return e.params.data;
+
+         const newPosition = data[sortField] as number;
+         const id = e.params.entityId;
+
+         // get the current item to know its old position and scope
+         const item = await kysely
+            .selectFrom(entityName)
+            .selectAll()
+            .where("id" as any, "=", id)
+            .executeTakeFirst();
+
+         if (!item) return data;
+
+         const oldPosition = item[sortField] as number | null | undefined;
+         const scopeValue = scopeField ? item[scopeField] : undefined;
+
+         // if oldPosition is null or undefined, treat as inserting at newPosition
+         if (oldPosition === null || oldPosition === undefined) {
+            // shift items at or after the new position
+            let query = kysely
+               .updateTable(entityName)
+               .set({ [sortField]: sql`${sql.ref(sortField)} + 1` } as any)
+               .where(sortField as any, ">=", newPosition)
+               .where("id" as any, "!=", id);
+
+            if (scopeField && scopeValue !== undefined) {
+               query = query.where(scopeField as any, "=", scopeValue);
+            }
+
+            await query.execute();
+            return data;
+         }
+
+         // shift other items using kysely
+         if (oldPosition !== newPosition) {
+            if (newPosition < oldPosition) {
+               // moving up: increment items between newPosition and oldPosition
+               let query = kysely
+                  .updateTable(entityName)
+                  .set({ [sortField]: sql`${sql.ref(sortField)} + 1` } as any)
+                  .where(sortField as any, ">=", newPosition)
+                  .where(sortField as any, "<", oldPosition)
+                  .where("id" as any, "!=", id);
+
+               if (scopeField && scopeValue !== undefined) {
+                  query = query.where(scopeField as any, "=", scopeValue);
+               }
+
+               await query.execute();
+            } else {
+               // moving down: decrement items between oldPosition and newPosition
+               let query = kysely
+                  .updateTable(entityName)
+                  .set({ [sortField]: sql`${sql.ref(sortField)} - 1` } as any)
+                  .where(sortField as any, ">", oldPosition)
+                  .where(sortField as any, "<=", newPosition)
+                  .where("id" as any, "!=", id);
+
+               if (scopeField && scopeValue !== undefined) {
+                  query = query.where(scopeField as any, "=", scopeValue);
+               }
+
+               await query.execute();
+            }
+         }
+
+         return data;
+      },
+      {
+         mode: "sync",
+         id: "bknd-sort-update",
+      },
+   );
+}

app/src/plugins/index.ts

@@ -9,3 +9,4 @@ export { syncTypes, type SyncTypesOptions } from "./dev/sync-types.plugin";
 export { syncSecrets, type SyncSecretsOptions } from "./dev/sync-secrets.plugin";
 export { timestamps, type TimestampsPluginOptions } from "./data/timestamps.plugin";
 export { emailOTP, type EmailOTPPluginOptions } from "./auth/email-otp.plugin";
+export { sort, type SortPluginOptions } from "./data/sort.plugin";

app/src/ui/Admin.tsx

@@ -16,6 +16,11 @@ export type BkndAdminConfig = {
     * @default `/`
     */
    basepath?: string;
+   /**
+    * Sub-path for the Admin UI within the base path
+    * @default ``
+    */
+   admin_basepath?: string;
    /**
     * Path to return to when clicking the logo
     * @default `/`
@@ -72,6 +77,14 @@ export default function Admin(props: BkndAdminProps) {
    );
 }
 
+function BkndWrapper({ options, children }: { options?: BkndAdminConfig; children: ReactNode }) {
+   return (
+      <BkndProvider options={options} fallback={<Skeleton theme={options?.theme} />}>
+         {children}
+      </BkndProvider>
+   );
+}
+
 function AdminInner(props: BkndAdminProps) {
    const { theme } = useTheme();
    const config = {
@@ -79,16 +92,10 @@ function AdminInner(props: BkndAdminProps) {
       ...useBkndWindowContext(),
    };
 
-   const BkndWrapper = ({ children }: { children: ReactNode }) => (
-      <BkndProvider options={config} fallback={<Skeleton theme={config?.theme} />}>
-         {children}
-      </BkndProvider>
-   );
-
    return (
       <MantineProvider {...createMantineTheme(theme as any)}>
          <Notifications position="top-right" />
-         <Routes BkndWrapper={BkndWrapper} basePath={config?.basepath}>
+         <Routes BkndWrapper={BkndWrapper} options={config} basePath={config?.basepath}>
             {props.children}
          </Routes>
       </MantineProvider>

app/src/ui/components/form/Formy/components.tsx

@@ -30,7 +30,7 @@ export const Group = <E extends ElementType = "div">({
          {...props}
          data-role="group"
          className={twMerge(
-            "flex flex-col gap-1.5 w-full",
+            "flex flex-col gap-1.5 has-disabled:cursor-not-allowed w-full",
             as === "fieldset" && "border border-primary/10 p-3 rounded-md",
             as === "fieldset" && error && "border-red-500",
             error && "text-red-500",
@@ -97,7 +97,7 @@ export const Input = forwardRef<HTMLInputElement, React.ComponentProps<"input">>
          ref={ref}
          className={twMerge(
             "bg-muted/40 h-11 rounded-md py-2.5 px-4 outline-none w-full disabled:cursor-not-allowed",
-            disabledOrReadonly && "bg-muted/50 text-primary/50",
+            disabledOrReadonly && "bg-muted/50 text-primary/50 cursor-not-allowed",
             !disabledOrReadonly &&
                "focus:bg-muted focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all",
             props.className,
@@ -154,7 +154,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, React.ComponentProps<"te
             {...props}
             ref={ref}
             className={twMerge(
-               "bg-muted/40 min-h-11 rounded-md py-2.5 px-4 focus:bg-muted outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50",
+               "bg-muted/40 min-h-11 rounded-md py-2.5 px-4 focus:bg-muted outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50 disabled:cursor-not-allowed",
                props.className,
             )}
          />
@@ -214,7 +214,7 @@ export const BooleanInput = forwardRef<HTMLInputElement, React.ComponentProps<"i
                {...props}
                type="checkbox"
                ref={ref}
-               className="outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500  transition-all disabled:opacity-70 scale-150 ml-1"
+               className="outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500  transition-all disabled:opacity-70 disabled:cursor-not-allowed scale-150 ml-1"
                checked={checked}
                onChange={handleCheck}
                disabled={props.disabled}
@@ -260,7 +260,6 @@ export const Switch = forwardRef<
             props.disabled && "opacity-50 !cursor-not-allowed",
          )}
          onCheckedChange={(bool) => {
-            console.log("setting", bool);
             props.onChange?.({ target: { value: bool } });
          }}
          {...(props as any)}
@@ -294,7 +293,7 @@ export const Select = forwardRef<
          {...props}
          ref={ref}
          className={twMerge(
-            "bg-muted/40 focus:bg-muted rounded-md py-2.5 px-4 outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50",
+            "bg-muted/40 focus:bg-muted rounded-md py-2.5 px-4 outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50 disabled:cursor-not-allowed",
             "appearance-none h-11 w-full",
             !props.multiple && "border-r-8 border-r-transparent",
             props.className,

app/src/ui/components/wouter/Link.tsx

@@ -1,5 +1,6 @@
 import { type LinkProps, Link as WouterLink, useRouter } from "wouter";
 import { useEvent } from "../../hooks/use-event";
+import { useBkndOptions } from "ui/client/BkndProvider";
 
 /*
  * Transforms `path` into its relative `base` version
@@ -70,11 +71,13 @@ export function Link({
 
       return false;
    }
-
+   const bkndOptions = useBkndOptions();
+   const adminBasePath = bkndOptions?.admin_basepath ?? "";
    const _href = props.href ?? props.to;
+
    const href = router
       .hrefs(
-         _href[0] === "~" ? _href.slice(1) : router.base + _href,
+         _href[0] === "~" ? adminBasePath + _href.slice(1) : router.base + _href,
          router, // pass router as a second argument for convinience
       )
       .replace("//", "/");
@@ -82,8 +85,9 @@ export function Link({
    const active =
       href.replace(router.base, "").length <= 1 ? href === absPath : isActive(absPath, href);
 
+   // console.log({ adminBasePath, _href, href, bkndOptions })
    if (native) {
-      return <a className={`${active ? "active " : ""}${className}`} {...props} />;
+      return <a className={`${active ? "active " : ""}${className}`} {...props} href={href} />;
    }
 
    const wouterOnClick = (e: any) => {
@@ -99,10 +103,11 @@ export function Link({
    };
 
    return (
-      <WouterLink
       // @ts-expect-error className is not typed on WouterLink
-         className={`${active ? "active " : ""}${className}`}
+      <WouterLink
          {...props}
+         className={`${active ? "active " : ""}${className}`}
+         href={`~${href}`}
          onClick={wouterOnClick}
       />
    );

app/src/ui/lib/routes.ts

@@ -101,7 +101,7 @@ export function useNavigate() {
                }
             }
 
-            const _url = options?.absolute ? `~/${basepath}${url}`.replace(/\/+/g, "/") : url;
+            const _url = options?.absolute ? `~/${app.options.basepath}/${app.options.admin_basepath}${url}`.replace(/\/+/g, "/") : url;
             const state = {
                ...options?.state,
                referrer: location,

app/src/ui/modules/data/components/EntityForm.tsx

@@ -45,7 +45,7 @@ export function EntityForm({
    className,
    action,
 }: EntityFormProps) {
-   const fields = entity.getFillableFields(action, true);
+   const fields = entity.getFields({ virtual: true, primary: false });
    const options = useEntityAdminOptions(entity, action);
 
    return (
@@ -93,10 +93,6 @@ export function EntityForm({
                   );
                }
 
-               if (!field.isFillable(action)) {
-                  return;
-               }
-
                const _key = `${entity.name}-${field.name}-${key}`;
 
                return (
@@ -128,7 +124,7 @@ export function EntityForm({
                               <EntityFormField
                                  field={field}
                                  fieldApi={props}
-                                 disabled={fieldsDisabled}
+                                 disabled={fieldsDisabled || !field.isFillable(action)}
                                  tabIndex={key + 1}
                                  action={action}
                                  data={data}

app/src/ui/modules/data/hooks/useEntityForm.tsx

@@ -17,7 +17,7 @@ export function useEntityForm({
 }: EntityFormProps) {
    const data = initialData ?? {};
    // @todo: check if virtual must be filtered
-   const fields = entity.getFillableFields(action, true);
+   const fields = entity.getFields({ virtual: true, primary: false });
 
    // filter defaultValues to only contain fillable fields
    const defaultValues = getDefaultValues(fields, data);

app/src/ui/routes/index.tsx

@@ -12,6 +12,7 @@ import { FlashMessage } from "ui/modules/server/FlashMessage";
 import { AuthRegister } from "ui/routes/auth/auth.register";
 import { BkndModalsProvider } from "ui/modals";
 import { useBkndWindowContext } from "bknd/client";
+import type { BkndAdminProps } from "ui/Admin";
 import ToolsRoutes from "./tools";
 
 // @ts-ignore
@@ -24,10 +25,12 @@ try {
 
 export function Routes({
    BkndWrapper,
+   options,
    basePath = "",
    children,
 }: {
-   BkndWrapper: ComponentType<{ children: ReactNode }>;
+   BkndWrapper: ComponentType<{ children: ReactNode; options?: BkndAdminProps["config"] }>;
+   options?: BkndAdminProps["config"];
    basePath?: string;
    children?: ReactNode;
 }) {
@@ -43,7 +46,7 @@ export function Routes({
                <Route path="/auth/login" component={AuthLogin} />
                <Route path="/auth/register" component={AuthRegister} />
 
-               <BkndWrapper>
+               <BkndWrapper options={options}>
                   <BkndModalsProvider>
                      <Route path="/" nest>
                         <Root>

docs/content/docs/(documentation)/extending/plugins.mdx

@@ -335,3 +335,55 @@ export default {
 ```
 
 <AutoTypeTable path="../app/src/plugins/auth/email-otp.plugin.ts" name="EmailOTPPluginOptions" />
+
+
+### `sort`
+
+A plugin that maintains sequential numeric positions for one or more entities. Positions are updated automatically when items are inserted or moved. You can optionally configure a scope so that positions are maintained independently within groups, such as tasks within a project.
+
+```typescript title="bknd.config.ts"
+import { sort } from "bknd/plugins";
+
+export default {
+   options: {
+      plugins: [
+         sort({
+            entities: {
+               tasks: {
+                  field: "position",
+                  scope: "project_id",
+               },
+            },
+         }),
+      ],
+   },
+} satisfies BkndConfig;
+```
+
+The configured `field` is used for the numeric position. If the field does not exist, the plugin adds it as a number field with a default value of `0`; if it already exists, it must be a number field. The plugin also adds an index for the field when one is not already present. The optional `scope` field limits reordering to records with the same scope value.
+
+The plugin registers the following endpoints. The default base path is `/api/sort` and can be changed with `apiBasePath`:
+
+- `POST /api/sort/:entity/reorder` moves an item to a position. The request body must include the item `id` and its new numeric `position`.
+- `POST /api/sort/:entity/recalculate` recalculates positions in ascending order of the configured field. To recalculate only one scope, pass its value in the optional `scope` property.
+
+```http title="Move a task"
+POST /api/sort/tasks/reorder
+Content-Type: application/json
+
+{
+   "id": "task_123",
+   "position": 2
+}
+```
+
+```http title="Recalculate a project's task positions"
+POST /api/sort/tasks/recalculate
+Content-Type: application/json
+
+{
+   "scope": "project_456"
+}
+```
+
+<AutoTypeTable path="../app/src/plugins/data/sort.plugin.ts" name="SortPluginOptions" />

docs/content/docs/(documentation)/integration/(frameworks)/meta.json

@@ -5,8 +5,8 @@
     "astro",
     "sveltekit",
     "tanstack-start",
-    "web",
     "vite",
-    "nuxt"
+    "nuxt",
+    "solid-start"
   ]
 }

docs/content/docs/(documentation)/integration/(frameworks)/solid-start.mdx

@@ -0,0 +1,334 @@
+---
+title: "Solid Start"
+description: "Run bknd inside Solid Start"
+tags: ["documentation"]
+---
+
+## Installation
+
+To get started with Solid Start and bknd you can either install the package manually, and follow the descriptions below, or use the CLI starter.
+
+Create a new Solid Start project by following the [official guide](https://docs.solidjs.com/solid-start/getting-started), and then install bknd as a dependency:
+
+<Tabs groupId='package-manager' persist items={[ 'npm', 'pnpm', 'yarn', 'bun']}>
+
+```bash tab="npm"
+npm install bknd
+```
+
+```bash tab="pnpm"
+pnpm install bknd
+```
+
+```bash tab="yarn"
+yarn add bknd
+```
+
+```bash tab="bun"
+bun add bknd
+```
+
+</Tabs>
+
+## Configuration
+
+<Callout type="warning">
+  When run with Node.js, a version of 22 (LTS) or higher is required. Please
+  verify your version by running `node -v`, and
+  [upgrade](https://nodejs.org/en/download/) if necessary.
+</Callout>
+
+Now create a `bknd.config.ts` file in the root of your project. If you created the project using the CLI starter, this file is already created for you.
+
+```typescript title="bknd.config.ts"
+import type { SolidStartBkndConfig } from "bknd/adapter/solid-start";
+import { em, entity, text, boolean } from "bknd";
+import { secureRandomString } from "bknd/utils";
+
+const schema = em({
+  todos: entity("todos", {
+    title: text(),
+    done: boolean(),
+  }),
+});
+
+// register your schema to get automatic type completion
+type Database = (typeof schema)["DB"];
+declare module "bknd" {
+  interface DB extends Database {}
+}
+
+export default {
+  connection: {
+    url: "file:data.db",
+  },
+  options: {
+    // the seed option is only executed if the database was empty
+    seed: async (ctx) => {
+      // create some entries
+      await ctx.em.mutator("todos").insertMany([
+        { title: "Learn bknd", done: true },
+        { title: "Build something cool", done: false },
+      ]);
+
+      // and create a user
+      await ctx.app.module.auth.createUser({
+        email: "test@bknd.io",
+        password: "12345678",
+      });
+    },
+  },
+  config: {
+    data: schema.toJSON(),
+    auth: {
+      enabled: true,
+      jwt: {
+        secret: secureRandomString(32),
+      },
+    },
+  },
+  // please run `bun bknd copy-assets --out public/admin` to copy the admin assets into the public directory
+  // alternatively add this as a postinstall script in your package.json like this:
+  // "postinstall": "bknd copy-assets --out public/admin"
+  adminOptions: {
+    adminBasepath: "/admin",
+    assetsPath: "/admin/", // trailing slash is important
+  },
+} satisfies SolidStartBkndConfig;
+```
+
+See [bknd.config.ts](/extending/config) for more information on how to configure bknd. The `SolidStartBkndConfig` type extends the `BkndConfig` type with the following additional properties:
+
+```typescript
+export type SolidStartBkndConfig<Env = SolidStartEnv> = RuntimeBkndConfig<Env>;
+```
+
+## Serve the API and Admin UI
+
+The Solid Start adapter uses middleware to handle API requests and serve the Admin UI. Create a `src/middleware/index.ts` file:
+
+```ts title="src/middleware/index.ts"
+import { createMiddleware } from "@solidjs/start/middleware";
+import config from "../../bknd.config";
+import { serve } from "bknd/adapter/solid-start";
+
+const handler = serve(config);
+
+export default createMiddleware({
+  onRequest: async (event) => {
+    const url = new URL(event.request.url);
+    const pathname = url.pathname;
+
+    if (pathname.startsWith("/api") || pathname !== "/") {
+      const res = await handler(event.request);
+
+      if (res && res.status !== 404) {
+        return res;
+      }
+    }
+  },
+});
+```
+
+### Update the app config (Solid Start v1 based on vinxi)
+
+Add the following to your `app.config.ts` file:
+
+```ts title="app.config.ts"
+import { defineConfig } from "@solidjs/start/config";
+
+const app = defineConfig({
+  // ... your existing config
+  middleware: "src/middleware/index.ts",
+  // ... your existing config
+});
+
+export default app;
+```
+
+### Update the vite config (Solid Start v2)
+
+Add the following to your `vite.config.ts` file:
+
+```ts title="vite.config.ts"
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+import { solidStart } from "@solidjs/start/vite";
+
+export default defineConfig({
+  plugins: [
+    solid(),
+    solidStart({
+      middleware: "./src/middleware/index.ts",
+    }),
+  ],
+});
+```
+
+
+<Callout type="success">
+  You can visit https://localhost:3000/admin to see the admin UI. Additionally you can create more todos as you explore the admin UI.
+</Callout>
+
+Create a helper file to instantiate the bknd instance and retrieve the API, importing the configuration from the `bknd.config.ts` file:
+
+
+```ts title="src/lib/bknd.ts"
+import { getApp as getBkndApp } from "bknd/adapter/solid-start";
+import bkndConfig from "../../bknd.config";
+import type { App } from "bknd";
+
+export const getApp = async () => {
+  return await getBkndApp(bkndConfig);
+};
+
+export async function getApi({
+  headers,
+  verify,
+}: {
+  verify?: boolean;
+  headers?: Headers;
+}) {
+  const app = await getApp();
+
+  if (verify) {
+    const api = app.getApi({ headers });
+    await api.verifyAuth();
+    return api;
+  }
+
+  return app.getApi();
+};
+```
+## Example usage of the API
+
+You can use the `getApi` helper function we've already set up to fetch and mutate in static pages and server components:
+
+```tsx title="src/routes/index.tsx"
+import { getApi } from "~/lib/bknd";
+import { query, createAsync } from "@solidjs/router";
+
+export const getTodo = async () => {
+  "use server"
+  const api = await getApi({});
+  const limit = 5;
+  const todos = await api.data.readMany("todos");
+  const total = todos.body.meta.total as number;
+  return { total, todos: todos as unknown as Todo[], limit };
+};
+
+const getTodosFromServer = query(async () => await getTodo(), "getTodosFromServer");
+
+export default function Home() {
+  const data = createAsync(() => getTodosFromServer());
+
+  return (
+    <ul>
+     <For each={data()}>
+      {(todo) => <li>{todo.title}</li>}
+     </For>
+    </ul>
+  );
+}
+```
+
+## Using authentication
+
+When using authentication, you'll need to pass the headers to the `getApi` function to verify the user is authenticated.
+
+```tsx title="src/routes/auth.tsx"
+import { createResource, Suspense } from "solid-js";
+import { A } from "@solidjs/router";
+import { getRequestEvent } from "solid-js/web";
+import { getApi } from "~/lib/bknd";
+
+export const getUser = async () => {
+  "use server"
+  const request = getRequestEvent()?.request;
+  const api = await getApi({ verify: true, headers: request?.headers });
+  return api.getUser();
+}
+
+export default function Auth() {
+  const [data] = createResource(async () => {
+    const user = await getUser()
+    return { user };
+  }, {
+    initialValue: {
+      user: null
+    }
+  });
+
+  return (
+    <div class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
+      <main class="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <div class="flex flex-row items-center ">
+          <img
+            class="dark:invert size-18"
+            src="/solid.svg"
+            alt="Solid logo"
+          />
+          <div class="ml-3.5 mr-2 opacity-70">&amp;</div>
+          <img
+            class="dark:invert"
+            src="/bknd.svg"
+            alt="bknd logo"
+            width={183}
+            height={59}
+          />
+        </div>
+
+        <Suspense fallback={<p>Loading...</p>}>
+          <div>
+            {data()?.user ? (
+              <>
+                Logged in as {data()?.user?.email}.
+                <A
+                  class="underline"
+                  target="_self"
+                  href={"/api/auth/logout"}
+                >
+                  Logout
+                </A>
+              </>
+            ) : (
+              <div class="flex flex-col gap-1">
+                <p>
+                  Not logged in.
+                  <A
+                    class="underline"
+                    target="_self"
+                    href={"/admin/auth/login"}
+                  >
+                    Login
+                  </A>
+                </p>
+                <p class="text-xs opacity-50">
+                  Sign in with:
+                  <b>
+                    <code>test@bknd.io</code>
+                  </b>
+                  /
+                  <b>
+                    <code>12345678</code>
+                  </b>
+                </p>
+              </div>
+            )}
+          </div>
+        </Suspense>
+      </main>
+    </div>
+  );
+}
+```
+
+
+## Tips
+
+Use `target="_self"` on links, anytime your traversing to an external route (like `/api/auth/logout` which are handled by bknd's middleware) to prevent solid router from intercepting the link.
+```jsx
+<A href="/api/auth/logout" target="_self">
+  Logout
+</A>
+```

docs/content/docs/(documentation)/integration/(frameworks)/web.mdx

@@ -1,277 +0,0 @@
----
-title: "Web Adapter"
-description: "Bring bknd to any web framework or runtime"
-tags: ["documentation"]
----
-
-## What is the Web Adapter?
-
-The web adapter (`bknd/adapter/web`) is a framework/runtime agnostic adapter which can integrate `bknd` into **any** web framework or runtime — even ones without a dedicated adapter.
-
-**Use the web adapter when:**
-- Your framework doesn't have a dedicated bknd adapter
-- You want full control over your server setup
-- You're building a custom server or edge function
-
-**Use a platform-specific adapter when:**
-- You're using a supported framework (Next.js, SvelteKit, Nuxt, Astro, etc.)
-- You prefer opinionated, zero-config setup
-
-## Installation
-
-<Tabs groupId='package-manager' persist items={[ 'npm', 'pnpm', 'yarn', 'bun']}>
-
-```bash tab="npm"
-npm install bknd
-```
-
-```bash tab="pnpm"
-pnpm install bknd
-```
-
-```bash tab="yarn"
-yarn add bknd
-```
-
-```bash tab="bun"
-bun add bknd
-```
-
-</Tabs>
-
-## Basic Setup
-
-Start by creating a config file:
-
-```typescript title="bknd.config.ts"
-import type { Config } from "bknd/adapter/web";
-
-export default {
-  connection: {
-    url: "file:data.db",
-  },
-} satisfies Config<"api">;
-```
-<Callout type="info" title="The Config type helper">
-The `Config` type is a helper type which maps the correct config type based on mode.
-
-Use `Config<"api">` when you are using a React-based framework otherwise use `Config<"standalone">` to serve both the Admin UI and bknd api using the same handler
-</Callout>
-
-### Helper Singleton
-```typescript title="lib/bknd.ts"
-import { createBknd } from "bknd/adapter/web";
-import config from "../bknd.config";
-
-export const bknd = createBknd({ mode: "standalone", options: config }, process.env);
-                                     // ^ use "api" if using a React-based framework
-```
-
-`createBknd` returns three methods:
-
-| Method | Returns | Description |
-|--------|---------|-------------|
-| `getApp(env: Env)` | `Promise<App>` | The built bknd app instance |
-| `getApi({ headers, verify })` | `Promise<Api>` | Convenience wrapper around `app.getApi()` |
-| `serve()` | `(req: Request) => Promise<Response>` | A fetch handler for your server |
-
-## Choosing an Admin UI Path
-
-The web adapter supports two approaches to serving the admin UI:
-
-| Path | Best For | How |
-|------|----------|-----|
-| **Client-side** (default) | React frameworks: Next.js, Astro, React Router, Tanstack Start, Waku | Import and render `<Admin />` in your own React route |
-| **Server-side** | Non-React frameworks: SvelteKit, Nuxt, Bun, Node, Deno | The server serves the Admin UI assets and API |
-
-## Path 1: Client-Side Admin (Default)
-
-For React-capable frameworks, render the admin UI directly in a route:
-
-```tsx title="app/admin/[[...admin]]/page.tsx"
-import { Admin } from "bknd/ui";
-import "bknd/dist/styles.css";
-import { bknd } from "@/bknd";
-
-export default async function AdminPage() {
-  const api = await bknd.getApi({ verify: true });
-
-  return (
-    <Admin
-      withProvider={{ user: api.getUser() }}
-      config={{ basepath: "/admin" }}
-    />
-  );
-}
-```
-
-No server-side admin configuration needed. The admin UI runs entirely in the browser.
-
-## Path 2: Server-Side Admin
-
-For non-React frameworks or standalone servers, enable the admin controller:
-
-```typescript title="src/bknd.ts"
-import { createBknd } from "bknd/adapter/web";
-import config from "../bknd.config";
-
-export const bknd = createBknd({ mode: "standalone", options: config }, env);
-                                     // ^ use "api" if using a React-based framework
-```
-
-You'll also need to serve the admin's static assets (JS, CSS). Choose one of three strategies:
-
-### Strategy 1: serveStatic Middleware
-
-**Best for:** Bun, Node, standalone servers with filesystem access
-
-Use Hono's platform-specific `serveStatic` in `bknd.config.ts` to serve assets from `node_modules/bknd/dist/static/`:
-
-```typescript title="bknd.config.ts"
-import type { Config } from "bknd/adapter/web";
-import { serveStatic } from "hono/bun"; // or "@hono/node-server/serve-static"
-
-export default {
-  connection: {
-    url: "file:data.db",
-    serveStatic: serveStatic({ root: "./node_modules/bknd/dist/static" }),
-    adminOptions: {
-      adminBasepath: "/admin",
-   },
-  },
-} satisfies Config<"standalone">;
-```
-
-### Strategy 2: copy-assets Postinstall
-
-**Best for:** SvelteKit, Nuxt, any framework with a static directory
-
-Copy assets at install time and let your framework serve them:
-
-```json title="package.json"
-{
-  "scripts": {
-    "postinstall": "bknd copy-assets --out static"
-  }
-}
-```
-
-Per-framework output paths:
-
-| Framework | `--out` flag |
-|-----------|-------------|
-| SvelteKit | `--out static` |
-| Nuxt | `--out public` |
-| Next.js | `--out public` |
-| Astro | `--out public` |
-| Qwik | `--out public` |
-
-### Strategy 3: serveStaticViaImport
-
-**Best for:** Edge/serverless runtimes (Deno Deploy, Cloudflare Workers)
-
-For environments without filesystem access:
-
-```typescript title="bknd.config.ts"
-import type { Config } from "bknd/adapter/web";
-import { serveStaticViaImport } from "bknd/adapter";
-
-export default {
-  connection: {
-    url: "file:data.db",
-    serveStatic: serveStaticViaImport(),
-    adminOptions: {
-      adminBasepath: "/admin",
-   },
-  },
-} satisfies Config<"standalone">;
-
-```
-
-## Serving Requests
-
-Example use `bknd.serve()` as a fetch handler in your server:
-
-```typescript title="server.ts"
-import { bknd } from "./bknd";
-
-// Bun
-Bun.serve({ fetch: bknd.serve(), port: 3000 });
-
-// Node (with @hono/node-server)
-import { serve } from "@hono/node-server";
-serve({ fetch: bknd.serve(), port: 3000 });
-
-// Next.js
-const handler = bknd.serve(); // here you'll use "api" for mode when setting up `bknd` instance
-
-export const GET = handler;
-export const POST = handler;
-export const PUT = handler;
-export const PATCH = handler;
-export const DELETE = handler;
-
-// Qwik City (Middleware)
-export const onRequest: RequestHandler = async ({
-   url,
-   next,
-   status,
-   headers,
-   request,
-   redirect,
-   getWritableStream,
-}) => {
-   const pathname = url.pathname;
-
-   if (pathname.startsWith("/api") || pathname !== "/") {
-      const response = await handler(request);
-
-      // skips unknown paths
-      if (response.status === 404) {
-         await next();
-         return;
-      }
-
-      // adds the set-cookie header
-      response.headers.forEach((value, key) => {
-         headers.set(key, value);
-      });
-
-      // for redirect
-      if (response.status >= 300 && response.status < 400) {
-         const location = response.headers.get("location");
-         if (location) {
-            throw redirect(response.status as any, location);
-         }
-      }
-
-      // stream back the body
-      status(response.status);
-      if (response.body) {
-         await response.body?.pipeTo(getWritableStream());
-         return;
-      }
-   }
-};
-```
-
-Or use `bknd.getApp()` to integrate with an existing Hono or other router setup.
-
-## Reference: Config\<T\>
-
-```typescript
-export type AdapterModeWithOptions<Env = Record<string, string | undefined>> =
-  | {
-      mode: "standalone";
-      options: RuntimeBkndConfig<Env>;
-    }
-  | {
-      mode: "api";
-      options: FrameworkBkndConfig<Env>;
-    };
-
-export type Config<T extends AdapterModeWithOptions["mode"]> = Extract<
-   Parameters<typeof createBknd>[0],
-   { mode: T }
->['options'];
-```

docs/content/docs/(documentation)/integration/introduction.mdx

@@ -46,9 +46,9 @@ bknd seamlessly integrates with popular frameworks, allowing you to use what you
 />
 
 <Card
-  icon={<Icon icon="tabler:world" className="text-fd-primary !size-6" />} 
-  title="Web Adapter" 
-  href="/integration/web" 
+  icon={<Icon icon="simple-icons:solid" className="text-fd-primary !size-6" />}
+  title="Solid Start"
+  href="/integration/solid-start"
 />
 
   <Card title="Yours missing?" href="https://github.com/bknd-io/bknd/issues/new">

docs/content/docs/(documentation)/start.mdx

@@ -163,15 +163,15 @@ Pick your framework or runtime to get started.
 />
 
 <Card
-  icon={<Icon icon="tabler:lambda" className="text-fd-primary !size-6" />}
-  title="AWS Lambda"
-  href="/integration/aws"
+  icon={<Icon icon="simple-icons:solid" className="text-fd-primary !size-6" />}
+  title="Solid Start"
+  href="/integration/solid-start"
 />
 
 <Card
-  icon={<Icon icon="tabler:world" className="text-fd-primary !size-6" />} 
-  title="Web Adapter" 
-  href="/integration/web" 
+  icon={<Icon icon="tabler:lambda" className="text-fd-primary !size-6" />}
+  title="AWS Lambda"
+  href="/integration/aws"
 />
 
 <Card

examples/qwik/.gitignore

@@ -1,45 +0,0 @@
-# Build
-/dist
-/lib
-/lib-types
-/server
-
-# Development
-node_modules
-.env
-*.local
-
-# Cache
-.cache
-.mf
-.rollup.cache
-tsconfig.tsbuildinfo
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-# Editor
-.vscode/*
-!.vscode/launch.json
-!.vscode/*.code-snippets
-
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# Yarn
-.yarn/*
-!.yarn/releases
-data.db
-public/admin
-tmp

examples/qwik/.prettierignore

@@ -1,37 +0,0 @@
-**/*.log
-**/.DS_Store
-*.
-.vscode/settings.json
-.history
-.yarn
-bazel-*
-bazel-bin
-bazel-out
-bazel-qwik
-bazel-testlogs
-dist
-dist-dev
-lib
-lib-types
-etc
-external
-node_modules
-temp
-tsc-out
-tsdoc-metadata.json
-target
-output
-rollup.config.js
-build
-.cache
-.vscode
-.rollup.cache
-tsconfig.tsbuildinfo
-vite.config.ts
-*.spec.tsx
-*.spec.ts
-.netlify
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
-server

examples/qwik/.vscode/launch.json

@@ -1,24 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Launch Chrome",
-      "request": "launch",
-      "type": "chrome",
-      "url": "http://localhost:5173",
-      "webRoot": "${workspaceFolder}"
-    },
-    {
-      "type": "node",
-      "name": "dev.debug",
-      "request": "launch",
-      "skipFiles": ["<node_internals>/**"],
-      "cwd": "${workspaceFolder}",
-      "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
-      "args": ["--mode", "ssr", "--force"]
-    }
-  ]
-}

examples/qwik/.vscode/qwik-city.code-snippets

@@ -1,36 +0,0 @@
-{
-  "onRequest": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "qonRequest",
-    "description": "onRequest function for a route index",
-    "body": [
-      "export const onRequest: RequestHandler = (request) => {",
-      "  $0",
-      "};",
-    ],
-  },
-  "loader$": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "qloader$",
-    "description": "loader$()",
-    "body": ["export const $1 = routeLoader$(() => {", "  $0", "});"],
-  },
-  "action$": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "qaction$",
-    "description": "action$()",
-    "body": ["export const $1 = routeAction$((data) => {", "  $0", "});"],
-  },
-  "Full Page": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "qpage",
-    "description": "Simple page component",
-    "body": [
-      "import { component$ } from '@builder.io/qwik';",
-      "",
-      "export default component$(() => {",
-      "  $0",
-      "});",
-    ],
-  },
-}

examples/qwik/.vscode/qwik.code-snippets

@@ -1,78 +0,0 @@
-{
-  "Qwik component (simple)": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "qcomponent$",
-    "description": "Simple Qwik component",
-    "body": [
-      "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
-      "  return <${2:div}>$4</$2>",
-      "});",
-    ],
-  },
-  "Qwik component (props)": {
-    "scope": "typescriptreact",
-    "prefix": "qcomponent$ + props",
-    "description": "Qwik component w/ props",
-    "body": [
-      "export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
-      "  $2",
-      "}",
-      "",
-      "export const $1 = component$<$1Props>((props) => {",
-      "  const ${2:count} = useSignal(0);",
-      "  return (",
-      "    <${3:div} on${4:Click}$={(ev) => {$5}}>",
-      "      $6",
-      "    </${3}>",
-      "  );",
-      "});",
-    ],
-  },
-  "Qwik signal": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "quseSignal",
-    "description": "useSignal() declaration",
-    "body": ["const ${1:foo} = useSignal($2);", "$0"],
-  },
-  "Qwik store": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "quseStore",
-    "description": "useStore() declaration",
-    "body": ["const ${1:state} = useStore({", "  $2", "});", "$0"],
-  },
-  "$ hook": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "q$",
-    "description": "$() function hook",
-    "body": ["$(() => {", "  $0", "});", ""],
-  },
-  "useVisibleTask": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "quseVisibleTask",
-    "description": "useVisibleTask$() function hook",
-    "body": ["useVisibleTask$(({ track }) => {", "  $0", "});", ""],
-  },
-  "useTask": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "quseTask$",
-    "description": "useTask$() function hook",
-    "body": [
-      "useTask$(({ track }) => {",
-      "  track(() => $1);",
-      "  $0",
-      "});",
-      "",
-    ],
-  },
-  "useResource": {
-    "scope": "javascriptreact,typescriptreact",
-    "prefix": "quseResource$",
-    "description": "useResource$() declaration",
-    "body": [
-      "const $1 = useResource$(({ track, cleanup }) => {",
-      "  $0",
-      "});",
-      "",
-    ],
-  },
-}

examples/qwik/README.md

@@ -1,65 +0,0 @@
-# Qwik City App ⚡️
-
-- [Qwik Docs](https://qwik.dev/)
-- [Discord](https://qwik.dev/chat)
-- [Qwik GitHub](https://github.com/QwikDev/qwik)
-- [@QwikDev](https://twitter.com/QwikDev)
-- [Vite](https://vitejs.dev/)
-
----
-
-## Project Structure
-
-This project is using Qwik with [QwikCity](https://qwik.dev/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
-
-Inside your project, you'll see the following directory structure:
-
-```
-├── public/
-│   └── ...
-└── src/
-    ├── components/
-    │   └── ...
-    └── routes/
-        └── ...
-```
-
-- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info.
-
-- `src/components`: Recommended directory for components.
-
-- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
-
-## Add Integrations and deployment
-
-Use the `bun qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/).
-
-```shell
-bun qwik add # or `bun qwik add`
-```
-
-## Development
-
-Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development.
-
-```shell
-npm start # or `bun start`
-```
-
-> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
-
-## Preview
-
-The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to preview a production build locally and should not be used as a production server.
-
-```shell
-bun preview # or `bun preview`
-```
-
-## Production
-
-The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code.
-
-```shell
-bun build # or `bun build`
-```

examples/qwik/bknd.config.ts

@@ -1,60 +0,0 @@
-import { em, entity, text, boolean } from "bknd";
-import { registerLocalMediaAdapter } from "bknd/adapter/node";
-import type { Config } from "bknd/adapter/web";
-
-const local = registerLocalMediaAdapter();
-
-const schema = em({
-   todos: entity("todos", {
-      title: text(),
-      done: boolean(),
-   }),
-});
-
-// register your schema to get automatic type completion
-type Database = (typeof schema)["DB"];
-declare module "bknd" {
-   interface DB extends Database {}
-}
-
-export default {
-   connection: {
-      url: "file:data.db",
-   },
-   options: {
-      // the seed option is only executed if the database was empty
-      seed: async (ctx) => {
-         // create some entries
-         await ctx.em.mutator("todos").insertMany([
-            { title: "Learn bknd", done: true },
-            { title: "Build something cool", done: false },
-         ]);
-
-         // and create a user
-         await ctx.app.module.auth.createUser({
-            email: "test@bknd.io",
-            password: "12345678",
-         });
-      },
-   },
-   config: {
-      data: schema.toJSON(),
-      auth: {
-         enabled: true,
-         jwt: {
-            secret: "random_gibberish_please_change_this",
-         },
-      },
-      media: {
-         enabled: true,
-         adapter: local({
-            path: "./public/uploads",
-         }),
-      },
-   },
-   adminOptions: {
-      adminBasepath: "/admin",
-      assetsPath: "/admin/",
-      logoReturnPath: "../..",
-   },
-} satisfies Config<"standalone">;

examples/qwik/eslint.config.js

@@ -1,73 +0,0 @@
-import js from "@eslint/js";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-import { globalIgnores } from "eslint/config";
-import { qwikEslint9Plugin } from "eslint-plugin-qwik";
-
-const ignores = [
-  "**/*.log",
-  "**/.DS_Store",
-  "**/*.",
-  ".vscode/settings.json",
-  "**/.history",
-  "**/.yarn",
-  "**/bazel-*",
-  "**/bazel-bin",
-  "**/bazel-out",
-  "**/bazel-qwik",
-  "**/bazel-testlogs",
-  "**/dist",
-  "**/dist-dev",
-  "**/lib",
-  "**/lib-types",
-  "**/etc",
-  "**/external",
-  "**/node_modules",
-  "**/temp",
-  "**/tsc-out",
-  "**/tsdoc-metadata.json",
-  "**/target",
-  "**/output",
-  "**/rollup.config.js",
-  "**/build",
-  "**/.cache",
-  "**/.vscode",
-  "**/.rollup.cache",
-  "**/dist",
-  "**/tsconfig.tsbuildinfo",
-  "**/vite.config.ts",
-  "**/*.spec.tsx",
-  "**/*.spec.ts",
-  "**/.netlify",
-  "**/pnpm-lock.yaml",
-  "**/package-lock.json",
-  "**/yarn.lock",
-  "**/server",
-  "eslint.config.js",
-];
-
-export default tseslint.config(
-  globalIgnores(ignores),
-  js.configs.recommended,
-  tseslint.configs.recommended,
-  qwikEslint9Plugin.configs.recommended,
-  {
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.es2021,
-        ...globals.serviceworker,
-      },
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  },
-  {
-    rules: {
-      "@typescript-eslint/no-explicit-any": "off",
-    },
-  },
-);

examples/qwik/package.json

@@ -1,47 +0,0 @@
-{
-  "name": "my-qwik-empty-starter",
-  "description": "Blank project with routing included",
-  "engines": {
-    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-  },
-  "engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "qwik build",
-    "build.client": "vite build",
-    "build.preview": "vite build --ssr src/entry.preview.tsx",
-    "build.types": "tsc --incremental --noEmit",
-    "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
-    "dev": "vite --mode ssr",
-    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
-    "fmt": "prettier --write .",
-    "fmt.check": "prettier --check .",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "preview": "qwik build preview && vite preview --open",
-    "start": "vite --open --mode ssr",
-    "qwik": "qwik",
-    "typegen": "bunx tsx node_modules/.bin/bknd types --outfile bknd-types.d.ts",
-    "postinstall": "bun run bknd copy-assets --out public/admin"
-  },
-  "dependencies": {
-    "@tailwindcss/vite": "^4.2.2",
-    "bknd": "file:../../app"
-  },
-  "devDependencies": {
-    "@builder.io/qwik": "^1.19.2",
-    "@builder.io/qwik-city": "^1.19.2",
-    "@eslint/js": "^9",
-    "@types/node": "20.19.0",
-    "eslint": "9.32.0",
-    "eslint-plugin-qwik": "^1.19.2",
-    "globals": "16.4.0",
-    "prettier": "3.6.2",
-    "typescript": "5.4.5",
-    "typescript-eslint": "8.38.0",
-    "typescript-plugin-css-modules": "latest",
-    "undici": "*",
-    "vite": "7.3.1",
-    "vite-tsconfig-paths": "^4.2.1"
-  }
-}

examples/qwik/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>

examples/qwik/public/manifest.json

@@ -1,9 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-  "name": "qwik-project-name",
-  "short_name": "Welcome to Qwik",
-  "start_url": ".",
-  "display": "standalone",
-  "background_color": "#fff",
-  "description": "A Qwik project app."
-}

examples/qwik/qwik.env.d.ts

@@ -1,4 +0,0 @@
-// This file can be used to add references for global types like `vite/client`.
-
-// Add global `vite/client` types. For more info, see: https://vitejs.dev/guide/features#client-types
-/// <reference types="vite/client" />

examples/qwik/src/components/footer.tsx

@@ -1,36 +0,0 @@
-import { Link } from "@builder.io/qwik-city";
-import { component$ } from "@builder.io/qwik";
-import { useLocation } from "@builder.io/qwik-city";
-
-export default component$(() => {
-   const loc = useLocation();
-   return (
-      <footer class="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-         <Link
-            class="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href={loc.url.pathname === '/' ? '/user' : '/'}
-         >
-            <img aria-hidden src="/file.svg" alt="File icon" width="16" height="16" />
-            {loc.url.pathname === "/" ? "User" : "Home"}
-         </Link>
-
-         <Link
-            class="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="/admin/data"
-         >
-            <img aria-hidden src="/window.svg" alt="Window icon" width="16" height="16" />
-            Admin
-         </Link>
-
-         <a
-            class="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://bknd.io"
-            target="_blank"
-            rel="noopener noreferrer"
-         >
-            <img aria-hidden src="/globe.svg" alt="Globe icon" width="16" height="16" />
-            Go to bknd.io →
-         </a>
-      </footer>
-   );
-});

examples/qwik/src/components/list.tsx

@@ -1,17 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-
-interface Props {
-   items: string[];
-}
-
-export default component$<Props>(({ items }) => {
-   return (
-      <ol class="list-inside list-decimal text-sm text-center sm:text-left w-full text-center">
-         {items.map((item, i) => (
-            <li key={i} class={`${i < items.length - 1 ? "mb-2" : ""}`}>
-               <span>{item}</span>
-            </li>
-         ))}
-      </ol>
-   );
-});

examples/qwik/src/entry.dev.tsx

@@ -1,17 +0,0 @@
-/*
- * WHAT IS THIS FILE?
- *
- * Development entry point using only client-side modules:
- * - Do not use this mode in production!
- * - No SSR
- * - No portion of the application is pre-rendered on the server.
- * - All of the application is running eagerly in the browser.
- * - More code is transferred to the browser than in SSR mode.
- * - Optimizer/Serialization/Deserialization code is not exercised!
- */
-import { render, type RenderOptions } from "@builder.io/qwik";
-import Root from "./root";
-
-export default function (opts: RenderOptions) {
-  return render(document, <Root />, opts);
-}

examples/qwik/src/entry.preview.tsx

@@ -1,21 +0,0 @@
-/*
- * WHAT IS THIS FILE?
- *
- * It's the bundle entry point for `npm run preview`.
- * That is, serving your app built in production mode.
- *
- * Feel free to modify this file, but don't remove it!
- *
- * Learn more about Vite's preview command:
- * - https://vitejs.dev/config/preview-options.html#preview-options
- *
- */
-import { createQwikCity } from "@builder.io/qwik-city/middleware/node";
-import qwikCityPlan from "@qwik-city-plan";
-// make sure qwikCityPlan is imported before entry
-import render from "./entry.ssr";
-
-/**
- * The default export is the QwikCity adapter used by Vite preview.
- */
-export default createQwikCity({ render, qwikCityPlan });

examples/qwik/src/entry.ssr.tsx

@@ -1,31 +0,0 @@
-/**
- * WHAT IS THIS FILE?
- *
- * SSR entry point, in all cases the application is rendered outside the browser, this
- * entry point will be the common one.
- *
- * - Server (express, cloudflare...)
- * - npm run start
- * - npm run preview
- * - npm run build
- *
- */
-import {
-  renderToStream,
-  type RenderToStreamOptions,
-} from "@builder.io/qwik/server";
-import Root from "./root";
-
-export default function (opts: RenderToStreamOptions) {
-  return renderToStream(<Root />, {
-    ...opts,
-    // Use container attributes to set attributes on the html tag.
-    containerAttributes: {
-      lang: "en-us",
-      ...opts.containerAttributes,
-    },
-    serverData: {
-      ...opts.serverData,
-    },
-  });
-}

examples/qwik/src/global.css

@@ -1,23 +0,0 @@
-@import "tailwindcss";
-
-:root {
-   --background: #ffffff;
-   --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-   :root {
-      --background: #0a0a0a;
-      --foreground: #ededed;
-   }
-}
-
-@theme {
-   --color-background: var(--background);
-   --color-foreground: var(--foreground);
-}
-
-body {
-   @apply bg-background text-foreground;
-   font-family: Arial, Helvetica, sans-serif;
-}

examples/qwik/src/lib/bknd.ts

@@ -1,13 +0,0 @@
-import { createBknd } from "bknd/adapter/web";
-import bkndConfig from "../../bknd.config";
-import type { EnvGetter } from "@builder.io/qwik-city/middleware/request-handler";
-
-export const getApp = async (env?: EnvGetter) => createBknd({ mode: "standalone", options: bkndConfig }, env);
-
-export const handler = async (req: Request, env?: EnvGetter) => {
-   return (await getApp(env)).serve()(req);
-};
-
-export const getApi = async (opts?: { headers?: Headers; verify?: boolean }) => {
-   return (await getApp()).getApi(opts);
-};

examples/qwik/src/root.tsx

@@ -1,77 +0,0 @@
-import { component$, isDev } from "@builder.io/qwik";
-import { QwikCityProvider, RouterOutlet } from "@builder.io/qwik-city";
-import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
-
-
-import "./global.css";
-
-export default component$(() => {
-  /**
-   * The root of a QwikCity site always start with the <QwikCityProvider> component,
-   * immediately followed by the document's <head> and <body>.
-   *
-   * Don't remove the `<head>` and `<body>` elements.
-   */
-
-  return (
-    <QwikCityProvider>
-      <head>
-        <meta charset="utf-8" />
-        {!isDev && (
-          <link
-            rel="manifest"
-            href={`${import.meta.env.BASE_URL}manifest.json`}
-          />
-        )}
-        <RouterHead />
-      </head>
-      <body lang="en">
-        <RouterOutlet />
-      </body>
-    </QwikCityProvider>
-  );
-});
-
-
-export const RouterHead = component$(() => {
-  const head = useDocumentHead();
-  const loc = useLocation();
-
-  return (
-    <>
-      <title>{head.title}</title>
-
-      <link rel="canonical" href={loc.url.href} />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-
-      {head.meta.map((m) => (
-        <meta key={m.key} {...m} />
-      ))}
-
-      {head.links.map((l) => (
-        <link key={l.key} {...l} />
-      ))}
-
-      {head.styles.map((s) => (
-        <style
-          key={s.key}
-          {...s.props}
-          {...(s.props?.dangerouslySetInnerHTML
-            ? {}
-            : { dangerouslySetInnerHTML: s.style })}
-        />
-      ))}
-
-      {head.scripts.map((s) => (
-        <script
-          key={s.key}
-          {...s.props}
-          {...(s.props?.dangerouslySetInnerHTML
-            ? {}
-            : { dangerouslySetInnerHTML: s.script })}
-        />
-      ))}
-    </>
-  );
-});

examples/qwik/src/routes/index.tsx

@@ -1,132 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-import { Form, routeAction$, routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
-import Footer from "~/components/footer";
-import List from "~/components/list";
-import { getApi } from "~/lib/bknd";
-
-interface Todo {
-   title: string | undefined;
-   done: boolean | undefined;
-   id: number;
-}
-
-export const useGetTodos = routeLoader$(async () => {
-   const api = await getApi();
-   const limit = 5;
-   const todos = await api.data.readMany("todos", { limit, sort: "-id" });
-   const total = todos.body.meta.total as number;
-   return { total, todos, limit };
-});
-
-export const useCompleteTodo = routeAction$(async (data) => {
-   const api = await getApi();
-   const todo = data as unknown as Todo;  
-   await api.data.updateOne("todos", todo.id, {
-      done: !todo.done,
-   });
-});
-
-export const useDeleteTodo = routeAction$(async (data) => {
-   const api = await getApi();
-   const todo = data as unknown as Todo;
-   await api.data.deleteOne("todos", todo.id);
-});
-
-
-export const useAddTodo = routeAction$(async (data) => {
-   const api = await getApi();
-   await api.data.createOne("todos", { title: data.title as string });
-});
-
-export default component$(() => {
-   const {
-      value: { limit, todos, total },
-   } = useGetTodos();
-   const addTodoAction = useAddTodo();
-   const completeTodoAction = useCompleteTodo();
-   const deleteTodoAction = useDeleteTodo();
-
-   return (
-      <div class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-         <main class="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-            <div class="flex flex-row items-center justify-evenly min-w-full">
-               <img class="size-24" src="/favicon.svg" alt="Qwik logo" width="72" height="72" />
-               <div class="ml-3.5 mr-2 font-mono opacity-70">&amp;</div>
-               <img class="dark:invert" src="/bknd.svg" alt="bknd logo" width="183" height="59" />
-            </div>
-
-            <List
-               items={[
-                  "Get started with a full backend.",
-                  "Focus on what matters instead of repetition.",
-               ]}
-            />
-
-            <div class="flex flex-col border border-black/15 dark:border-white/15 w-full py-4 px-5 gap-2">
-               <h2 class="font-mono mb-1 opacity-70">
-                  <code>What's next?</code>
-               </h2>
-               <div class="flex flex-col w-full gap-2">
-                  {total > limit && (
-                     <div class="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
-                        {total - limit} more todo(s) hidden
-                     </div>
-                  )}
-
-                  <div class="flex flex-col gap-3">
-                     {todos.map((todo) => (
-                        <div key={String(todo.id)} class="flex flex-row">
-                           <div class="flex flex-row grow items-center gap-3 ml-1">
-                              <input
-                                 type="checkbox"
-                                 class="shrink-0 cursor-pointer"
-                                 checked={Boolean(todo.done)}
-                                 onChange$={async() => {
-                                    await completeTodoAction.submit(todo);
-                                 }}
-                              />
-                              <div class="text-foreground/90 leading-none">{todo.title}</div>
-                           </div>
-                           <button
-                              type="button"
-                              class="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs"
-                              onclick$={async () => { await deleteTodoAction.submit(todo); }}
-                           >
-                              ❌
-                           </button>
-                        </div>
-                     ))}
-                  </div>
-
-                  <Form
-                     class="flex flex-row w-full gap-3 mt-2"
-                     key={todos.map((t) => t.id).join()}
-                     action={addTodoAction}
-                  >
-                     <input
-                        type="text"
-                        name="title"
-                        placeholder="New todo"
-                        class="py-2 px-4 flex grow rounded-sm bg-black/5 focus:bg-black/10 dark:bg-white/5 dark:focus:bg-white/10 transition-colors outline-none"
-                     />
-                     <button type="submit" class="cursor-pointer">
-                        Add
-                     </button>
-                  </Form>
-               </div>
-            </div>
-         </main>
-        <Footer />
-      </div>
-   );
-});
-
-export const head: DocumentHead = {
-   title: "Qwik City 🤝 Bknd.io",
-   meta: [
-      {
-         name: "description",
-         content: "Qwik site with bknd",
-      },
-   ],
-};

examples/qwik/src/routes/plugin@bknd.ts

@@ -1,45 +0,0 @@
-import type { RequestHandler } from "@builder.io/qwik-city";
-import { handler } from "~/lib/bknd";
-
-export const onRequest: RequestHandler = async ({
-   env,
-   url,
-   next,
-   status,
-   headers,
-   request,
-   redirect,
-   getWritableStream,
-}) => {
-   const pathname = url.pathname;
-
-   if (pathname.startsWith("/api") || pathname !== "/") {
-      const response = await handler(request, env);
-
-      // skips unknown paths
-      if (response.status === 404) {
-         await next();
-         return;
-      }
-
-      // adds the set-cookie header
-      response.headers.forEach((value, key) => {
-         headers.set(key, value);
-      });
-
-      // for redirect
-      if (response.status >= 300 && response.status < 400) {
-         const location = response.headers.get("location");
-         if (location) {
-            throw redirect(response.status as any, location);
-         }
-      }
-
-      // stream back the body
-      status(response.status);
-      if (response.body) {
-         await response.body?.pipeTo(getWritableStream());
-         return;
-      }
-   }
-};

examples/qwik/src/routes/user/index.tsx

@@ -1,95 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-import { Link, routeLoader$ } from "@builder.io/qwik-city";
-import List from "~/components/list";
-import { getApi } from "~/lib/bknd";
-import Footer from "~/components/footer";
-
-export const useGetTodos = routeLoader$(async ({ request }) => {
-   const api = await getApi({ verify: true, headers: request.headers });
-   const limit = 5;
-   const todos = await api.data.readMany("todos", { limit, sort: "-id" });
-   const total = todos.body.meta.total as number;
-   const user = api.getUser();
-   return { total, todos, limit, user };
-});
-
-export default component$(() => {
-   const {
-      value: { todos, user },
-   } = useGetTodos();
-
-   return (
-      <div class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-         <main class="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-            <div class="flex flex-row items-center ">
-               <img
-                  class="dark:invert size-18"
-                  src="/favicon.svg"
-                  alt="Qwik logo"
-                  height={72}
-                  width={72}
-               />
-               <div class="ml-3.5 mr-2 font-mono opacity-70">&amp;</div>
-               <img class="dark:invert" src="/bknd.svg" alt="bknd logo" width={183} height={59} />
-            </div>
-            <List items={todos.map((todo) => todo.title ?? "")} />
-            <Buttons />
-
-            <div>
-               {user ? (
-                  <>
-                     Logged in as {user.email}.
-                     <Link class="font-medium underline" href={"/api/auth/logout" as string}>
-                        Logout
-                     </Link>
-                  </>
-               ) : (
-                  <div class="flex flex-col gap-1">
-                     <p>
-                        Not logged in.
-                        <Link class="font-medium underline" href={"/admin/auth/login" as string}>
-                           Login
-                        </Link>
-                     </p>
-                     <p class="text-xs opacity-50">
-                        Sign in with:
-                        <b>
-                           <code>test@bknd.io</code>
-                        </b>
-                        /
-                        <b>
-                           <code>12345678</code>
-                        </b>
-                     </p>
-                  </div>
-               )}
-            </div>
-         </main>
-         <Footer />
-      </div>
-   );
-});
-
-function Buttons() {
-   return (
-      <div class="flex gap-4 items-center flex-col sm:flex-row">
-         <a
-            class="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground gap-2 text-white hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://bknd.io/"
-            target="_blank"
-            rel="noopener noreferrer"
-         >
-            <img class="grayscale" src="/bknd.ico" alt="bknd logomark" width={20} height={20} />
-            Go To Bknd.io
-         </a>
-         <a
-            class="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://docs.bknd.io/integration/meta-framework"
-            target="_blank"
-            rel="noopener noreferrer"
-         >
-            Read our docs
-         </a>
-      </div>
-   );
-}

examples/qwik/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "target": "ES2020",
-    "module": "ES2022",
-    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "jsxImportSource": "@builder.io/qwik",
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "Bundler",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "incremental": true,
-    "isolatedModules": true,
-    "outDir": "tmp",
-    "noEmit": true,
-    "paths": {
-      "~/*": ["./src/*"]
-    },
-    /* if you do not use CSS modules, remove this line and delete the typescript-plugin-css-modules module from package.json */
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
-  },
-  "include": ["src", "./*.d.ts", "./*.config.ts"]
-}

examples/qwik/vite.config.ts

@@ -1,29 +0,0 @@
-import { defineConfig, type UserConfig } from "vite";
-import { qwikVite } from "@builder.io/qwik/optimizer";
-import { qwikCity } from "@builder.io/qwik-city/vite";
-import tsconfigPaths from "vite-tsconfig-paths";
-import tailwindcss from '@tailwindcss/vite'
-
-
-export default defineConfig((): UserConfig => {
-  return {
-    plugins: [
-      tailwindcss(),
-      qwikCity({
-        trailingSlash: false
-      }),
-      qwikVite(),
-      tsconfigPaths({ root: "." }),
-    ],
-    server: {
-      headers: {
-        "Cache-Control": "public, max-age=0",
-      },
-    },
-    preview: {
-      headers: {
-        "Cache-Control": "public, max-age=600",
-      },
-    },
-  };
-});

examples/solid/.gitignore

@@ -0,0 +1,31 @@
+dist
+.wrangler
+.output
+.vercel
+.netlify
+.vinxi
+app.config.timestamp_*.js
+
+# Environment
+.env
+.env*.local
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+Thumbs.db
+
+public/admin
+data.db

examples/solid/README.md

@@ -0,0 +1,59 @@
+# bknd starter: Solid Start
+A minimal example of a Solid Start project with bknd integration.
+
+## Project Structure
+
+Inside of your Solid Start project, you'll see the following folders and files:
+
+```text
+.
+├── bknd.config.ts
+├── bun.lock
+├── package.json
+├── public
+│   ├── admin # generated by bknd and contains the admin UI
+│   ├── bknd.ico
+│   ├── bknd.svg
+│   ├── file.svg
+│   ├── globe.svg
+│   ├── solid.svg
+│   └── window.svg
+├── README.md # you're here
+├── src
+│   ├── app.css
+│   ├── app.tsx
+│   ├── components
+│   │   ├── Footer.tsx
+│   │   └── List.tsx
+│   ├── entry-client.tsx
+│   ├── entry-server.tsx
+│   ├── global.d.ts
+│   ├── lib
+│   │   └── bknd.ts # initializes bknd instance
+│   ├── middleware
+│   │   └── index.ts # mounts bknd middleware
+│   └── routes
+│       ├── [...404].tsx
+│       ├── index.tsx
+│       └── user.tsx
+├── tsconfig.json
+└── vite.config.ts
+```
+
+Here is a quick overview about how to adjust the behavior of `bknd`:
+* Initialization of the `bknd` config with helper functions are located at `src/lib/bknd.ts`
+* Admin UI is rendered using `src/middleware/index.ts`
+
+## Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+|:--------------------------|:-------------------------------------------------|
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:3000`      |
+| `npm run build`           | Build your production site                       |
+
+## Want to learn more?
+
+Feel free to check [our documentation](https://docs.bknd.io/integration/solid-start) or jump into our [Discord server](https://discord.gg/952SFk8Tb8).

examples/solid/bknd.config.ts

@@ -0,0 +1,51 @@
+import { em, entity, text, boolean } from "bknd";
+import { secureRandomString } from "bknd/utils";
+import type { SolidStartBkndConfig } from "bknd/adapter/solid-start";
+
+const schema = em({
+  todos: entity("todos", {
+    title: text(),
+    done: boolean(),
+  }),
+});
+
+// register your schema to get automatic type completion
+type Database = (typeof schema)["DB"];
+declare module "bknd" {
+  interface DB extends Database { }
+}
+
+export default {
+  connection: { url: "file:data.db" },
+  options: {
+    // the seed option is only executed if the database was empty
+    seed: async (ctx) => {
+      // create some entries
+      await ctx.em.mutator("todos").insertMany([
+        { title: "Learn bknd", done: true },
+        { title: "Build something cool", done: false },
+      ]);
+
+      // and create a user
+      await ctx.app.module.auth.createUser({
+        email: "test@bknd.io",
+        password: "12345678",
+      });
+    },
+  },
+  config: {
+    data: schema.toJSON(),
+    auth: {
+      enabled: true,
+      jwt: {
+        secret: secureRandomString(32),
+      },
+    },
+  },
+  adminOptions: {
+    adminBasepath: "/admin",
+    assetsPath: "/admin/",
+    logoReturnPath: "../..",
+  },
+} satisfies SolidStartBkndConfig;
+

examples/solid/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "example-basic",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "vite start",
+    "preview": "vite preview",
+    "typegen": "bunx tsx node_modules/.bin/bknd types --outfile bknd-types.d.ts",
+    "postinstall": "bun run bknd copy-assets --out public/admin"
+  },
+  "dependencies": {
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^1.0.0",
+    "@solidjs/start": "2.0.5",
+    "bknd": "file:../../app",
+    "nitro": "3.0.260903-beta",
+    "solid-js": "^1.9.5",
+    "vite": "^8.3.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "tailwindcss": "^4.1.18"
+  }
+}

examples/solid/public/solid.svg

@@ -0,0 +1 @@
+<svg data-hk="000000220" width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" class="drop-shadow-[10px_20px_35px_rgb(125,211,252,0.3)] size-52 md:size-[400px] mx-auto"><path d="M233.205 430.856L304.742 425.279C304.742 425.279 329.208 421.295 343.569 397.659L293.041 385.443L233.205 430.856Z" fill="url(#paint0_linear_1_2)"></path><path d="M134.278 263.278C113.003 264.341 73.6443 268.059 73.6443 268.059L245.173 392.614L284.265 402.44L343.569 397.925L170.977 273.105C170.977 273.105 157.148 263.278 137.203 263.278C136.139 263.278 135.342 263.278 134.278 263.278Z" fill="url(#paint1_linear_1_2)"></path><path d="M355.536 238.58L429.2 234.065C429.2 234.065 454.464 230.348 468.825 206.977L416.435 193.964L355.536 238.58Z" fill="url(#paint2_linear_1_2)"></path><path d="M251.289 68.6128C229.217 69.4095 188.795 72.5964 188.795 72.5964L367.503 200.072L407.926 210.429L469.09 206.712L289.318 78.9702C289.318 78.9702 274.426 68.6128 253.417 68.6128C252.885 68.6128 252.087 68.6128 251.289 68.6128Z" fill="url(#paint3_linear_1_2)"></path><path d="M31.0946 295.679C30.8287 295.945 30.8287 296.21 30.8287 296.475L77.8993 330.469L202.623 420.764C228.95 439.62 264.586 431.653 282.67 402.44L187.465 333.921L110.077 277.62C100.504 270.715 89.8663 267.528 79.2289 267.528C60.6134 267.528 42.2639 277.354 31.0946 295.679Z" fill="url(#paint4_linear_1_2)"></path><path d="M147.043 99.9505C147.043 100.216 146.776 100.482 146.511 100.747L195.442 135.538L244.374 170.062L325.751 227.957C353.142 247.345 389.841 239.642 407.925 210.695L358.461 175.374L308.997 140.318L228.153 82.6881C218.047 75.5177 206.611 72.0652 195.442 72.0652C176.561 72.3308 158.212 81.8915 147.043 99.9505Z" fill="url(#paint5_linear_1_2)"></path><path d="M112.471 139.255L175.497 208.305C178.423 212.289 181.614 216.006 185.337 219.193L308.199 354.105L369.364 350.387C387.448 321.439 380.002 282.135 352.611 262.748L271.234 204.852L222.568 170.328L173.636 135.538L112.471 139.255Z" fill="url(#paint6_linear_1_2)"></path><path d="M111.939 140.052C94.1213 168.734 101.567 207.509 128.427 226.629L209.005 283.994L258.735 319.049L308.199 354.105C326.283 325.158 318.836 285.852 291.445 266.465L112.471 139.255C112.471 139.521 112.204 139.787 111.939 140.052Z" fill="url(#paint7_linear_1_2)"></path><defs><linearGradient id="paint0_linear_1_2" x1="359.728" y1="56.8062" x2="265.623" y2="521.28" gradientUnits="userSpaceOnUse"><stop stop-color="#1593F5"></stop><stop offset="1" stop-color="#0084CE"></stop></linearGradient><linearGradient id="paint1_linear_1_2" x1="350.496" y1="559.872" x2="-44.0802" y2="-73.2062" gradientUnits="userSpaceOnUse"><stop stop-color="#1593F5"></stop><stop offset="1" stop-color="#0084CE"></stop></linearGradient><linearGradient id="paint2_linear_1_2" x1="610.25" y1="570.526" x2="372.635" y2="144.034" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="1" stop-color="#15ABFF"></stop></linearGradient><linearGradient id="paint3_linear_1_2" x1="188.808" y1="-180.608" x2="390.515" y2="281.703" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="1" stop-color="#79CFFF"></stop></linearGradient><linearGradient id="paint4_linear_1_2" x1="415.84" y1="-4.74684" x2="95.1922" y2="439.83" gradientUnits="userSpaceOnUse"><stop stop-color="#0057E5"></stop><stop offset="1" stop-color="#0084CE"></stop></linearGradient><linearGradient id="paint5_linear_1_2" x1="343.141" y1="-21.5427" x2="242.301" y2="256.708" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="1" stop-color="#15ABFF"></stop></linearGradient><linearGradient id="paint6_linear_1_2" x1="469.095" y1="533.421" x2="-37.6939" y2="-135.731" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="1" stop-color="#79CFFF"></stop></linearGradient><linearGradient id="paint7_linear_1_2" x1="380.676" y1="-89.0869" x2="120.669" y2="424.902" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="1" stop-color="#79CFFF"></stop></linearGradient></defs></svg>

examples/solid/src/app.css

@@ -0,0 +1,33 @@
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
+@import "tailwindcss";
+
+.geist-mono-100 {
+   font-optical-sizing: auto;
+   font-weight: 100;
+   font-style: normal;
+}
+
+:root {
+   --background: #ffffff;
+   --foreground: #171717;
+   font-family: "Geist Mono", monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+   :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+   }
+}
+
+@theme {
+   --font-sans: var(--font-geist-sans);
+   --font-mono: var(--font-geist-mono);
+   --color-background: var(--background);
+   --color-foreground: var(--foreground);
+}
+
+body {
+   @apply bg-background text-foreground;
+   font-family: var(--font-geist-mono-100)
+}

examples/solid/src/app.tsx

@@ -0,0 +1,20 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import "./app.css";
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          <Title>Solid Start 🤝 Bknd.io</Title>
+          <Suspense>{props.children}</Suspense>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

examples/solid/src/components/Footer.tsx

@@ -0,0 +1,53 @@
+import { A, useLocation } from "@solidjs/router";
+
+export function Footer() {
+  const pathname = useLocation().pathname;
+
+  return (
+    <footer class="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+      <A
+        class="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href={pathname === "/" ? "/user" : "/"}
+      >
+        <img
+          aria-hidden
+          src="/file.svg"
+          alt="File icon"
+          width={16}
+          height={16}
+        />
+        {pathname === "/" ? "User" : "Home"}
+      </A>
+      <A
+        target="_self"
+        class="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href="/admin"
+        rel="noopener noreferrer"
+      >
+        <img
+          aria-hidden
+          src="/window.svg"
+          alt="Window icon"
+          width={16}
+          height={16}
+        />
+        Admin
+      </A>
+      <a
+        class="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href={"https://bknd.io"}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          aria-hidden
+          src="/globe.svg"
+          alt="Globe icon"
+          width={16}
+          height={16}
+        />
+        Go to bknd.io →
+      </a>
+    </footer>
+  );
+}

examples/solid/src/components/List.tsx

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+
+export const List = ({ items = [] }: { items: JSX.Element[] }) => (
+  <ol class="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+    {items.map((item, i) => (
+      <li class={i < items.length - 1 ? "mb-2" : ""}>
+        {item}
+      </li>
+    ))}
+  </ol>
+);

examples/solid/src/entry-client.tsx

@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.getElementById("app")!);

examples/solid/src/entry-server.tsx

@@ -0,0 +1,21 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server";
+
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/solid.svg" />
+          {assets}
+        </head>
+        <body>
+          <div id="app">{children}</div>
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+));

examples/solid/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />

examples/solid/src/lib/bknd.ts

@@ -0,0 +1,30 @@
+import { getApp as getBkndApp } from "bknd/adapter/solid-start";
+import bkndConfig from "../../bknd.config";
+import type { App } from "bknd";
+
+let client: App | null = null;
+
+export const getApp = async () => {
+  if (!client) {
+    client = await getBkndApp(bkndConfig);
+  }
+  return client;
+};
+
+export async function getApi({
+  headers,
+  verify,
+}: {
+  verify?: boolean;
+  headers?: Headers;
+}) {
+  const app = await getApp();
+
+  if (verify) {
+    const api = app.getApi({ headers });
+    await api.verifyAuth();
+    return api;
+  }
+
+  return app.getApi();
+}

examples/solid/src/middleware/index.ts

@@ -0,0 +1,20 @@
+import { createMiddleware } from "@solidjs/start/middleware";
+import config from "../../bknd.config";
+import { serve } from "bknd/adapter/solid-start";
+
+const handler = serve(config);
+
+export default createMiddleware({
+  onRequest: async (event) => {
+    const url = new URL(event.request.url);
+    const pathname = url.pathname;
+
+    if (pathname.startsWith("/api") || pathname !== "/") {
+      const res = await handler(event.request);
+
+      if (res && res.status !== 404) {
+        return res;
+      }
+    }
+  },
+});

examples/solid/src/routes/[...404].tsx

@@ -0,0 +1,19 @@
+import { Title } from "@solidjs/meta";
+import { HttpStatusCode } from "@solidjs/start";
+
+export default function NotFound() {
+  return (
+    <main>
+      <Title>Not Found</Title>
+      <HttpStatusCode code={404} />
+      <h1>Page Not Found</h1>
+      <p>
+        Visit{" "}
+        <a href="https://start.solidjs.com" target="_blank">
+          start.solidjs.com
+        </a>{" "}
+        to learn how to build SolidStart apps.
+      </p>
+    </main>
+  );
+}

examples/solid/src/routes/index.tsx

@@ -0,0 +1,150 @@
+import type { DB } from "bknd";
+import { For, Suspense } from "solid-js";
+import { Footer } from "~/components/Footer";
+import { List } from "~/components/List";
+import { getApi } from "~/lib/bknd";
+import { action, redirect, useAction, useSubmission } from "@solidjs/router";
+import { query, createAsync } from "@solidjs/router";
+
+type Todo = DB['todos'];
+
+export const getTodo = async () => {
+  "use server"
+  const api = await getApi({});
+  const limit = 5;
+  const todos = await api.data.readMany("todos");
+  const total = todos.body.meta.total as number;
+  return { total, todos: todos as unknown as Todo[], limit };
+};
+
+const getTodosFromServer = query(async () => await getTodo(), "getTodosFromServer");
+
+
+const createTodo = action(async (formData: FormData) => {
+  "use server"
+  const title = formData.get("title") as string;
+  const api = await getApi({});
+  await api.data.createOne("todos", { title });
+  throw redirect("/", { revalidate: getTodosFromServer.keyFor() });
+}, "createTodo");
+
+
+
+const completeTodo = action(async (todo: Todo) => {
+  "use server"
+  const api = await getApi({});
+  await api.data.updateOne("todos", todo.id, {
+    done: !todo.done,
+  });
+  throw redirect("/", { revalidate: getTodosFromServer.keyFor() });
+}, "completeTodo");
+
+
+const deleteTodo = action(async (todo: Todo) => {
+  "use server"
+  const api = await getApi({});
+  await api.data.deleteOne("todos", todo.id);
+  throw redirect("/", { revalidate: getTodosFromServer.keyFor() });
+}, "deleteTodo");
+
+export default function Home() {
+  const data = createAsync(() => getTodosFromServer());
+
+  const submission = useSubmission(createTodo);
+
+  const updateTodo = useAction(completeTodo);
+  const removeTodo = useAction(deleteTodo);
+
+  return (
+    <div class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 ">
+      <main class="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <div class="flex flex-row items-center justify-evenly min-w-full">
+          <img
+            class="size-18"
+            src="/solid.svg"
+            alt="Solid Start logo"
+          />
+          <div class="ml-3.5 mr-2  opacity-70">&amp;</div>
+          <img
+            class="dark:invert"
+            src="/bknd.svg"
+            alt="bknd logo"
+            width={183}
+            height={59}
+          />
+        </div>
+        <Description />
+        <Suspense>
+          <div class="flex flex-col border border-foreground/15 w-full py-4 px-5 gap-2">
+            <h2 class=" mb-1 opacity-70">
+              <code>What's next?</code>
+            </h2>
+            <div class="flex flex-col w-full gap-2">
+              {(data()?.total ?? 0) > (data()?.limit ?? 0) && (
+                <div class="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
+                  {(data()?.total ?? 0) - (data()?.limit ?? 0)} more todo(s) hidden
+                </div>
+              )}
+              <div class="flex flex-col gap-3">
+                <For each={data()?.todos?.splice(0, data()?.limit ?? 0)}>
+                  {(todo) => (
+                    <div class="flex flex-row">
+                      <div class="flex flex-row flex-grow items-center gap-3 ml-1">
+                        <input
+                          type="checkbox"
+                          class="flex-shrink-0 cursor-pointer"
+                          checked={Boolean(todo.done)}
+                          onChange={async () => {
+                            await updateTodo(todo);
+                          }}
+                        />
+                        <div class="text-foreground/90 leading-none">
+                          {todo.title}
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        class="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
+                        onClick={async () => {
+                          await removeTodo(todo);
+                        }}
+                      >
+                        ❌
+                      </button>
+                    </div>
+                  )}
+                </For>
+              </div>
+              <form
+                class="flex flex-row w-full gap-3 mt-2"
+                action={createTodo}
+                method="post"
+              >
+                <input
+                  type="text"
+                  name="title"
+                  placeholder="New todo"
+                  class="py-2 px-4 flex flex-grow rounded-sm bg-black/5 focus:bg-black/10 dark:bg-white/5 dark:focus:bg-white/10 transition-colors outline-none"
+                />
+                <button type="submit" class="cursor-pointer" disabled={submission.pending}>
+                  {submission.pending ? "Adding..." : "Add"}
+                </button>
+              </form>
+            </div>
+          </div>
+        </Suspense>
+      </main>
+      <Footer />
+    </div>);
+}
+
+
+
+const Description = () => (
+  <List
+    items={[
+      "Get started with a full backend.",
+      "Focus on what matters instead of repetition.",
+    ]}
+  />
+);

examples/solid/src/routes/user.tsx

@@ -0,0 +1,139 @@
+import { A } from "@solidjs/router";
+import type { DB } from "bknd";
+import { createResource, Suspense } from "solid-js";
+import { getRequestEvent } from "solid-js/web";
+import { Footer } from "~/components/Footer";
+import { List } from "~/components/List";
+import { getApi } from "~/lib/bknd";
+
+
+const getUser = async () => {
+  "use server"
+  const request = getRequestEvent()?.request;
+  const api = await getApi({ verify: true, headers: request?.headers });
+  return api.getUser();
+}
+
+type Todo = DB['todos'];
+export const getTodo = async () => {
+  "use server"
+  const api = await getApi({});
+  const limit = 5;
+  const todos = await api.data.readMany("todos");
+  const total = todos.body.meta.total as number;
+  return { total, todos: todos as unknown as Todo[], limit };
+};
+
+export default function Home() {
+  const [data] = createResource(async () => {
+    const todo = await getTodo();
+    const user = await getUser()
+    return { todo, user };
+  }, {
+    initialValue: {
+      todo: {
+        todos: [],
+        limit: 0,
+        total: 0
+      },
+      user: null
+    }
+  });
+
+  return (
+    <div class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
+      <main class="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <div class="flex flex-row items-center justify-evenly min-w-full">
+          <img
+            class="size-18"
+            src="/solid.svg"
+            alt="Solid logo"
+          />
+          <div class="ml-3.5 mr-2 opacity-70">&amp;</div>
+          <img
+            class="dark:invert"
+            src="/bknd.svg"
+            alt="bknd logo"
+            width={183}
+            height={59}
+          />
+        </div>
+        <List items={(data()?.todo.todos ?? []).map((todo) => todo.title)} />
+        <Buttons />
+
+        <Suspense fallback={<p>Loading...</p>}>
+          <div>
+            {data()?.user ? (
+              <>
+                Logged in as {data()?.user?.email}.
+                <A
+                  class="underline"
+                  // target="_self" is required to prevent solid router from intercepting the link
+                  target="_self"
+                  href={"/api/auth/logout"}
+                >
+                  Logout
+                </A>
+              </>
+            ) : (
+              <div class="flex flex-col gap-1">
+                <p>
+                  Not logged in.
+                  <A
+                    class="underline"
+                    // target="_self" is required to prevent solid router from intercepting the link
+                    target="_self"
+                    href={"/admin/auth/login"}
+                  >
+                    Login
+                  </A>
+                </p>
+                <p class="text-xs opacity-50">
+                  Sign in with:
+                  <b>
+                    <code>test@bknd.io</code>
+                  </b>
+                  /
+                  <b>
+                    <code>12345678</code>
+                  </b>
+                </p>
+              </div>
+            )}
+          </div>
+        </Suspense>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+function Buttons() {
+  return (
+    <div class="flex gap-4 items-center flex-col sm:flex-row">
+      <a
+        class="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground gap-2 text-white hover:bg-[#383838] dark:hover:bg-[#ccc] dark:text-black text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+        href="https://bknd.io/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          class="grayscale"
+          src="/bknd.ico"
+          alt="bknd logomark"
+          width={20}
+          height={20}
+        />
+        Go To Bknd.io
+      </a>
+      <a
+        class="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+        href="https://docs.bknd.io/start"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Read our docs
+      </a>
+    </div>
+  );
+}

examples/solid/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["vite/client"],
+    "isolatedModules": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}

examples/solid/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
+
+import { solidStart } from "@solidjs/start/config";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    solidStart({
+      middleware: "./src/middleware/index.ts",
+    }),
+    nitro(),
+  ],
+});