extended data canvas and init indices management

introduced `useRoutePathState` for managing active states via routes, added `CollapsibleList` for reusable collapsible UI, and updated various components to leverage route awareness for improved navigation state handling. Also adjusted routing for entities, strategies, and schema to support optional sub-paths.

app/__test__/data/specs/Entity.spec.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test";
-import { Entity, NumberField, TextField } from "../../../src/data";
+import { Entity, NumberField, TextField } from "data";
+import * as p from "data/prototype";
 
 describe("[data] Entity", async () => {
    const entity = new Entity("test", [
@@ -47,14 +48,7 @@ describe("[data] Entity", async () => {
       expect(entity.getField("new_field")).toBe(field);
    });
 
-   // @todo: move this to ClientApp
-   /*test("serialize and deserialize", async () => {
-      const json = entity.toJSON();
-      //sconsole.log("json", json.fields);
-      const newEntity = Entity.deserialize(json);
-      //console.log("newEntity", newEntity.toJSON().fields);
-      expect(newEntity).toBeInstanceOf(Entity);
-      expect(json).toEqual(newEntity.toJSON());
-      expect(json.fields).toEqual(newEntity.toJSON().fields);
-   });*/
+   test.only("types", async () => {
+      console.log(entity.toTypes());
+   });
 });

app/__test__/data/specs/EntityManager.spec.ts

@@ -47,8 +47,8 @@ describe("[data] EntityManager", async () => {
       em.addRelation(new ManyToOneRelation(posts, users));
       expect(em.relations.all.length).toBe(1);
       expect(em.relations.all[0]).toBeInstanceOf(ManyToOneRelation);
-      expect(em.relationsOf("users")).toEqual([em.relations.all[0]]);
-      expect(em.relationsOf("posts")).toEqual([em.relations.all[0]]);
+      expect(em.relationsOf("users")).toEqual([em.relations.all[0]!]);
+      expect(em.relationsOf("posts")).toEqual([em.relations.all[0]!]);
       expect(em.hasRelations("users")).toBe(true);
       expect(em.hasRelations("posts")).toBe(true);
       expect(em.relatedEntitiesOf("users")).toEqual([posts]);

app/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "sideEffects": false,
   "bin": "./dist/cli/index.js",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Lightweight Firebase/Supabase alternative built to run anywhere — incl. Next.js, React Router, Astro, Cloudflare, Bun, Node, AWS Lambda & more.",
   "homepage": "https://bknd.io",
   "repository": {

app/src/auth/AppAuth.ts

@@ -1,6 +1,6 @@
 import { Authenticator, AuthPermissions, Role, type Strategy } from "auth";
 import type { PasswordStrategy } from "auth/authenticate/strategies";
-import { $console, type DB, type PrimaryFieldType } from "core";
+import { $console, type DB } from "core";
 import { secureRandomString, transformObject } from "core/utils";
 import type { Entity, EntityManager } from "data";
 import { em, entity, enumm, type FieldSchema, text } from "data/prototype";
@@ -8,11 +8,13 @@ import { Module } from "modules/Module";
 import { AuthController } from "./api/AuthController";
 import { type AppAuthSchema, authConfigSchema, STRATEGIES } from "./auth-schema";
 import { AppUserPool } from "auth/AppUserPool";
+import type { AppEntity } from "core/config";
 
 export type UserFieldSchema = FieldSchema<typeof AppAuth.usersFields>;
 declare module "core" {
+   interface Users extends AppEntity, UserFieldSchema {}
    interface DB {
-      users: { id: PrimaryFieldType } & UserFieldSchema;
+      users: Users;
    }
 }
 

app/src/cli/commands/index.ts

@@ -5,3 +5,4 @@ export { debug } from "./debug";
 export { user } from "./user";
 export { create } from "./create";
 export { copyAssets } from "./copy-assets";
+export { types } from "./types";

app/src/cli/commands/types/index.ts

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

app/src/cli/commands/types/types.ts

@@ -0,0 +1,37 @@
+import type { CliCommand } from "cli/types";
+import { Option } from "commander";
+import { makeAppFromEnv } from "cli/commands/run";
+import { EntityTypescript } from "data/entities/EntityTypescript";
+import { writeFile } from "cli/utils/sys";
+import c from "picocolors";
+
+export const types: CliCommand = (program) => {
+   program
+      .command("types")
+      .description("generate types")
+      .addOption(new Option("-o, --outfile <outfile>", "output file").default("bknd-types.d.ts"))
+      .addOption(new Option("--no-write", "do not write to file").default(true))
+      .action(action);
+};
+
+async function action({
+   outfile,
+   write,
+}: {
+   outfile: string;
+   write: boolean;
+}) {
+   const app = await makeAppFromEnv({
+      server: "node",
+   });
+   await app.build();
+
+   const et = new EntityTypescript(app.em);
+
+   if (write) {
+      await writeFile(outfile, et.toString());
+      console.info(`\nTypes written to ${c.cyan(outfile)}`);
+   } else {
+      console.info(et.toString());
+   }
+}

app/src/cli/utils/sys.ts

@@ -1,5 +1,6 @@
+import { $console } from "core";
 import { execSync, exec as nodeExec } from "node:child_process";
-import { readFile } from "node:fs/promises";
+import { readFile, writeFile as nodeWriteFile } from "node:fs/promises";
 import path from "node:path";
 import url from "node:url";
 
@@ -48,6 +49,16 @@ export async function fileExists(filePath: string) {
    }
 }
 
+export async function writeFile(filePath: string, content: string) {
+   try {
+      await nodeWriteFile(path.resolve(process.cwd(), filePath), content);
+      return true;
+   } catch (e) {
+      $console.error("Failed to write file", e);
+      return false;
+   }
+}
+
 export function exec(command: string, opts?: { silent?: boolean; env?: Record<string, string> }) {
    const stdio = opts?.silent ? "pipe" : "inherit";
    const output = execSync(command, {

app/src/core/config.ts

@@ -3,7 +3,11 @@
  */
 import type { Generated } from "kysely";
 
-export type PrimaryFieldType = number | Generated<number>;
+export type PrimaryFieldType<IdType extends number = number> = IdType | Generated<IdType>;
+
+export interface AppEntity<IdType extends number = number> {
+   id: PrimaryFieldType<IdType>;
+}
 
 export interface DB {
    // make sure to make unknown as "any"

app/src/core/index.ts

@@ -3,7 +3,7 @@ import type { Hono, MiddlewareHandler } from "hono";
 export { tbValidator } from "./server/lib/tbValidator";
 export { Exception, BkndError } from "./errors";
 export { isDebug, env } from "./env";
-export { type PrimaryFieldType, config, type DB } from "./config";
+export { type PrimaryFieldType, config, type DB, type AppEntity } from "./config";
 export { AwsClient } from "./clients/aws/AwsClient";
 export {
    SimpleRenderer,

app/src/core/utils/objects.ts

@@ -218,7 +218,7 @@ export function objectCleanEmpty<Obj extends { [key: string]: any }>(obj: Obj):
  * @param object
  * @param sources
  */
-export function mergeObject(object, ...sources) {
+export function mergeObject<R = unknown>(object, ...sources): R {
    for (const source of sources) {
       for (const [key, value] of Object.entries(source)) {
          if (value === undefined) {
@@ -359,3 +359,50 @@ export function getPath(
       throw new Error(`Invalid path: ${path.join(".")}`);
    }
 }
+
+export function objectToJsLiteral(value: object, indent: number = 0, _level: number = 0): string {
+   const nl = indent ? "\n" : "";
+   const pad = (lvl: number) => (indent ? " ".repeat(indent * lvl) : "");
+   const openPad = pad(_level + 1);
+   const closePad = pad(_level);
+
+   // primitives
+   if (value === null) return "null";
+   if (value === undefined) return "undefined";
+   const t = typeof value;
+   if (t === "string") return JSON.stringify(value); // handles escapes
+   if (t === "number" || t === "boolean") return String(value);
+
+   // arrays
+   if (Array.isArray(value)) {
+      const out = value
+         .map((v) => objectToJsLiteral(v, indent, _level + 1))
+         .join(", " + (indent ? nl + openPad : ""));
+      return (
+         "[" +
+         (indent && value.length ? nl + openPad : "") +
+         out +
+         (indent && value.length ? nl + closePad : "") +
+         "]"
+      );
+   }
+
+   // objects
+   if (t === "object") {
+      const entries = Object.entries(value).map(([k, v]) => {
+         const idOk = /^[A-Za-z_$][\w$]*$/.test(k); // valid identifier?
+         const key = idOk ? k : JSON.stringify(k); // quote if needed
+         return key + ": " + objectToJsLiteral(v, indent, _level + 1);
+      });
+      const out = entries.join(", " + (indent ? nl + openPad : ""));
+      return (
+         "{" +
+         (indent && entries.length ? nl + openPad : "") +
+         out +
+         (indent && entries.length ? nl + closePad : "") +
+         "}"
+      );
+   }
+
+   throw new TypeError(`Unsupported data type: ${t}`);
+}

app/src/data/AppData.ts

@@ -6,6 +6,7 @@ import {
    type EntityManager,
    constructEntity,
    constructRelation,
+   constructIndex,
 } from "data";
 import { Module } from "modules/Module";
 import { DataController } from "./api/DataController";
@@ -35,9 +36,7 @@ export class AppData extends Module<typeof dataConfigSchema> {
       );
 
       const indices = transformObject(_indices, (index, name) => {
-         const entity = _entity(index.entity)!;
-         const fields = index.fields.map((f) => entity.field(f)!);
-         return new EntityIndex(entity, fields, index.unique, name);
+         return constructIndex(index, _entity, name);
       });
 
       for (const entity of Object.values(entities)) {

app/src/data/api/DataApi.ts

@@ -1,5 +1,6 @@
 import type { DB } from "core";
 import type { EntityData, RepoQueryIn, RepositoryResponse } from "data";
+import type { Insertable, Selectable, Updateable } from "kysely";
 import { type BaseModuleApiOptions, ModuleApi, type PrimaryFieldType } from "modules";
 import type { FetchPromise, ResponseObject } from "modules/ModuleApi";
 
@@ -25,21 +26,23 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       }
    }
 
-   readOne<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
+   readOne<E extends keyof DB | string>(
       entity: E,
       id: PrimaryFieldType,
       query: Omit<RepoQueryIn, "where" | "limit" | "offset"> = {},
    ) {
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       return this.get<Pick<RepositoryResponse<Data>, "meta" | "data">>(
          ["entity", entity as any, id],
          query,
       );
    }
 
-   readOneBy<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
+   readOneBy<E extends keyof DB | string>(
       entity: E,
       query: Omit<RepoQueryIn, "limit" | "offset" | "sort"> = {},
    ) {
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       type T = Pick<RepositoryResponse<Data>, "meta" | "data">;
       return this.readMany(entity, {
          ...query,
@@ -48,10 +51,8 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       }).refine((data) => data[0]) as unknown as FetchPromise<ResponseObject<T>>;
    }
 
-   readMany<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
-      entity: E,
-      query: RepoQueryIn = {},
-   ) {
+   readMany<E extends keyof DB | string>(entity: E, query: RepoQueryIn = {}) {
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       type T = Pick<RepositoryResponse<Data[]>, "meta" | "data">;
 
       const input = query ?? this.options.defaultQuery;
@@ -64,68 +65,70 @@ export class DataApi extends ModuleApi<DataApiOptions> {
       return this.post<T>(["entity", entity as any, "query"], input);
    }
 
-   readManyByReference<
-      E extends keyof DB | string,
-      R extends keyof DB | string,
-      Data = R extends keyof DB ? DB[R] : EntityData,
-   >(entity: E, id: PrimaryFieldType, reference: R, query: RepoQueryIn = {}) {
+   readManyByReference<E extends keyof DB | string, R extends keyof DB | string>(
+      entity: E,
+      id: PrimaryFieldType,
+      reference: R,
+      query: RepoQueryIn = {},
+   ) {
+      type Data = R extends keyof DB ? Selectable<DB[R]> : EntityData;
       return this.get<Pick<RepositoryResponse<Data[]>, "meta" | "data">>(
          ["entity", entity as any, id, reference],
          query ?? this.options.defaultQuery,
       );
    }
 
-   createOne<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
+   createOne<E extends keyof DB | string, Input = E extends keyof DB ? DB[E] : EntityData>(
       entity: E,
-      input: Omit<Data, "id">,
+      input: Insertable<Input>,
    ) {
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       return this.post<RepositoryResponse<Data>>(["entity", entity as any], input);
    }
 
-   createMany<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
+   createMany<E extends keyof DB | string, Input = E extends keyof DB ? DB[E] : EntityData>(
       entity: E,
-      input: Omit<Data, "id">[],
+      input: Insertable<Input>[],
    ) {
       if (!input || !Array.isArray(input) || input.length === 0) {
          throw new Error("input is required");
       }
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       return this.post<RepositoryResponse<Data[]>>(["entity", entity as any], input);
    }
 
-   updateOne<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
+   updateOne<E extends keyof DB | string, Input = E extends keyof DB ? DB[E] : EntityData>(
       entity: E,
       id: PrimaryFieldType,
-      input: Partial<Omit<Data, "id">>,
+      input: Updateable<Input>,
    ) {
       if (!id) throw new Error("ID is required");
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       return this.patch<RepositoryResponse<Data>>(["entity", entity as any, id], input);
    }
 
-   updateMany<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
+   updateMany<E extends keyof DB | string, Input = E extends keyof DB ? DB[E] : EntityData>(
       entity: E,
       where: RepoQueryIn["where"],
-      update: Partial<Omit<Data, "id">>,
+      update: Updateable<Input>,
    ) {
       this.requireObjectSet(where);
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       return this.patch<RepositoryResponse<Data[]>>(["entity", entity as any], {
          update,
          where,
       });
    }
 
-   deleteOne<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
-      entity: E,
-      id: PrimaryFieldType,
-   ) {
+   deleteOne<E extends keyof DB | string>(entity: E, id: PrimaryFieldType) {
       if (!id) throw new Error("ID is required");
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       return this.delete<RepositoryResponse<Data>>(["entity", entity as any, id]);
    }
 
-   deleteMany<E extends keyof DB | string, Data = E extends keyof DB ? DB[E] : EntityData>(
-      entity: E,
-      where: RepoQueryIn["where"],
-   ) {
+   deleteMany<E extends keyof DB | string>(entity: E, where: RepoQueryIn["where"]) {
       this.requireObjectSet(where);
+      type Data = E extends keyof DB ? Selectable<DB[E]> : EntityData;
       return this.delete<RepositoryResponse<Data>>(["entity", entity as any], where);
    }
 

app/src/data/data-schema.ts

@@ -68,6 +68,7 @@ export const indicesSchema = tb.Type.Object(
       additionalProperties: false,
    },
 );
+export type TAppDataIndex = Static<(typeof indicesSchema)[number]>;
 
 export const dataConfigSchema = tb.Type.Object(
    {

app/src/data/entities/Entity.ts

@@ -280,6 +280,15 @@ export class Entity<
       return options?.clean ? JSON.parse(JSON.stringify(schema)) : schema;
    }
 
+   toTypes() {
+      return {
+         name: this.name,
+         type: this.type,
+         comment: this.config.description,
+         fields: Object.fromEntries(this.getFields().map((field) => [field.name, field.toType()])),
+      };
+   }
+
    toJSON() {
       return {
          type: this.type,

app/src/data/entities/EntityTypescript.ts

@@ -0,0 +1,228 @@
+import type { Entity, EntityManager, EntityRelation, TEntityType } from "data";
+import { autoFormatString } from "core/utils";
+import { AppAuth, AppMedia } from "modules";
+
+export type TEntityTSType = {
+   name: string;
+   type: TEntityType;
+   comment?: string;
+   fields: Record<string, TFieldTSType>;
+};
+
+// [select, insert, update]
+type TFieldContextType = boolean | [boolean, boolean, boolean];
+
+export type TFieldTSType = {
+   required?: TFieldContextType;
+   fillable?: TFieldContextType;
+   type: "PrimaryFieldType" | string;
+   comment?: string;
+   import?: {
+      package: string;
+      name: string;
+   }[];
+};
+
+export type EntityTypescriptOptions = {
+   indentWidth?: number;
+   indentChar?: string;
+   entityCommentMultiline?: boolean;
+   fieldCommentMultiline?: boolean;
+};
+
+// keep a local copy here until properties have a type
+const systemEntities = {
+   users: AppAuth.usersFields,
+   media: AppMedia.mediaFields,
+};
+
+export class EntityTypescript {
+   constructor(
+      protected em: EntityManager,
+      protected _options: EntityTypescriptOptions = {},
+   ) {}
+
+   get options() {
+      return {
+         ...this._options,
+         indentWidth: 2,
+         indentChar: " ",
+         entityCommentMultiline: true,
+         fieldCommentMultiline: false,
+      };
+   }
+
+   toTypes() {
+      return this.em.entities.map((e) => e.toTypes());
+   }
+
+   protected getTab(count = 1) {
+      return this.options.indentChar.repeat(this.options.indentWidth).repeat(count);
+   }
+
+   collectImports(
+      type: TEntityTSType,
+      imports: Record<string, string[]> = {},
+   ): Record<string, string[]> {
+      for (const [, entity_type] of Object.entries(type.fields)) {
+         for (const imp of entity_type.import ?? []) {
+            const name = imp.name;
+            const pkg = imp.package;
+            if (!imports[pkg]) {
+               imports[pkg] = [];
+            }
+            if (!imports[pkg].includes(name)) {
+               imports[pkg].push(name);
+            }
+         }
+      }
+      return imports;
+   }
+
+   typeName(name: string) {
+      return autoFormatString(name);
+   }
+
+   fieldTypesToString(type: TEntityTSType, opts?: { ignore_fields?: string[]; indent?: number }) {
+      let string = "";
+      const coment_multiline = this.options.fieldCommentMultiline;
+      const indent = opts?.indent ?? 1;
+      for (const [field_name, field_type] of Object.entries(type.fields)) {
+         if (opts?.ignore_fields?.includes(field_name)) continue;
+
+         let f = "";
+         f += this.commentString(field_type.comment, indent, coment_multiline);
+         f += `${this.getTab(indent)}${field_name}${field_type.required ? "" : "?"}: `;
+         f += field_type.type + ";";
+         f += "\n";
+         string += f;
+      }
+
+      return string;
+   }
+
+   relationToFieldType(relation: EntityRelation, entity: Entity) {
+      const other = relation.other(entity);
+      const listable = relation.isListableFor(entity);
+      const name = this.typeName(other.entity.name);
+
+      let type = name;
+      if (other.entity.type === "system") {
+         type = `DB["${other.entity.name}"]`;
+      }
+
+      return {
+         fields: {
+            [other.reference]: {
+               required: false,
+               type: `${type}${listable ? "[]" : ""}`,
+            },
+         },
+      };
+   }
+
+   importsToString(imports: Record<string, string[]>) {
+      const strings: string[] = [];
+      for (const [pkg, names] of Object.entries(imports)) {
+         strings.push(`import type { ${names.join(", ")} } from "${pkg}";`);
+      }
+      return strings;
+   }
+
+   commentString(comment?: string, indents = 0, multiline = true) {
+      if (!comment) return "";
+      const indent = this.getTab(indents);
+      if (!multiline) return `${indent}// ${comment}\n`;
+      return `${indent}/**\n${indent} * ${comment}\n${indent} */\n`;
+   }
+
+   entityToTypeString(
+      entity: Entity,
+      opts?: { ignore_fields?: string[]; indent?: number; export?: boolean },
+   ) {
+      const type = entity.toTypes();
+      const name = this.typeName(type.name);
+      const indent = opts?.indent ?? 1;
+      const min_indent = Math.max(0, indent - 1);
+
+      let s = this.commentString(type.comment, min_indent, this.options.entityCommentMultiline);
+      s += `${opts?.export ? "export " : ""}interface ${name} {\n`;
+      s += this.fieldTypesToString(type, opts);
+
+      // add listable relations
+      const relations = this.em.relations.relationsOf(entity);
+      const rel_types = relations.map((r) =>
+         this.relationToFieldType(r, entity),
+      ) as TEntityTSType[];
+      for (const rel_type of rel_types) {
+         s += this.fieldTypesToString(rel_type, {
+            indent,
+         });
+      }
+      s += `${this.getTab(min_indent)}}`;
+
+      return s;
+   }
+
+   toString() {
+      const strings: string[] = [];
+      const tables: Record<string, string> = {};
+      const imports: Record<string, string[]> = {
+         "bknd/core": ["DB"],
+         kysely: ["Insertable", "Selectable", "Updateable", "Generated"],
+      };
+
+      // add global types
+      let g = "declare global {\n";
+      g += `${this.getTab(1)}type BkndEntity<T extends keyof DB> = Selectable<DB[T]>;\n`;
+      g += `${this.getTab(1)}type BkndEntityCreate<T extends keyof DB> = Insertable<DB[T]>;\n`;
+      g += `${this.getTab(1)}type BkndEntityUpdate<T extends keyof DB> = Updateable<DB[T]>;\n`;
+      g += "}";
+      strings.push(g);
+
+      const system_entities = this.em.entities.filter((e) => e.type === "system");
+
+      for (const entity of this.em.entities) {
+         // skip system entities, declare addtional props in the DB interface
+         if (system_entities.includes(entity)) continue;
+
+         const type = entity.toTypes();
+         if (!type) continue;
+         this.collectImports(type, imports);
+         tables[type.name] = this.typeName(type.name);
+         const s = this.entityToTypeString(entity, {
+            export: true,
+         });
+         strings.push(s);
+      }
+
+      // write tables
+      let tables_string = "interface Database {\n";
+      for (const [name, type] of Object.entries(tables)) {
+         tables_string += `${this.getTab(1)}${name}: ${type};\n`;
+      }
+      tables_string += "}";
+      strings.push(tables_string);
+
+      // merge
+      let merge = `declare module "bknd/core" {\n`;
+      for (const systemEntity of system_entities) {
+         const system_fields = Object.keys(systemEntities[systemEntity.name]);
+         const additional_fields = systemEntity.fields
+            .filter((f) => !system_fields.includes(f.name) && f.type !== "primary")
+            .map((f) => f.name);
+         if (additional_fields.length === 0) continue;
+
+         merge += `${this.getTab(1)}${this.entityToTypeString(systemEntity, {
+            ignore_fields: ["id", ...system_fields],
+            indent: 2,
+         })}\n\n`;
+      }
+
+      merge += `${this.getTab(1)}interface DB extends Database {}\n}`;
+      strings.push(merge);
+
+      const final = [this.importsToString(imports).join("\n"), strings.join("\n\n")];
+      return final.join("\n\n");
+   }
+}

app/src/data/fields/BooleanField.ts

@@ -88,4 +88,11 @@ export class BooleanField<Required extends true | false = false> extends Field<
    override toJsonSchema() {
       return this.toSchemaWrapIfRequired(Type.Boolean({ default: this.getDefault() }));
    }
+
+   override toType() {
+      return {
+         ...super.toType(),
+         type: "boolean",
+      };
+   }
 }

app/src/data/fields/DateField.ts

@@ -3,6 +3,7 @@ import type { EntityManager } from "../entities";
 import { Field, type TActionContext, type TRenderContext, baseFieldConfigSchema } from "./Field";
 import { $console } from "core";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 export const dateFieldConfigSchema = Type.Composite(
@@ -144,4 +145,11 @@ export class DateField<Required extends true | false = false> extends Field<
    override toJsonSchema() {
       return this.toSchemaWrapIfRequired(Type.String({ default: this.getDefault() }));
    }
+
+   override toType(): TFieldTSType {
+      return {
+         ...super.toType(),
+         type: "Date | string",
+      };
+   }
 }

app/src/data/fields/EnumField.ts

@@ -3,6 +3,7 @@ import type { EntityManager } from "data";
 import { TransformPersistFailedException } from "../errors";
 import { baseFieldConfigSchema, Field, type TActionContext, type TRenderContext } from "./Field";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 export const enumFieldConfigSchema = Type.Composite(
@@ -140,4 +141,14 @@ export class EnumField<Required extends true | false = false, TypeOverride = str
          }),
       );
    }
+
+   override toType(): TFieldTSType {
+      const union = this.getOptions().map(({ value }) =>
+         typeof value === "string" ? `"${value}"` : value,
+      );
+      return {
+         ...super.toType(),
+         type: union.length > 0 ? union.join(" | ") : "string",
+      };
+   }
 }

app/src/data/fields/Field.ts

@@ -11,6 +11,7 @@ import type { EntityManager } from "../entities";
 import { InvalidFieldConfigException, TransformPersistFailedException } from "../errors";
 import type { FieldSpec } from "data/connection/Connection";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 // @todo: contexts need to be reworked
@@ -235,6 +236,14 @@ export abstract class Field<
       return this.toSchemaWrapIfRequired(Type.Any());
    }
 
+   toType(): TFieldTSType {
+      return {
+         required: this.isRequired(),
+         comment: this.getDescription(),
+         type: "any",
+      };
+   }
+
    toJSON() {
       return {
          // @todo: current workaround because of fixed string type

app/src/data/fields/JsonField.ts

@@ -3,6 +3,7 @@ import type { EntityManager } from "data";
 import { TransformPersistFailedException } from "../errors";
 import { Field, type TActionContext, type TRenderContext, baseFieldConfigSchema } from "./Field";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 export const jsonFieldConfigSchema = Type.Composite([baseFieldConfigSchema, Type.Object({})]);
@@ -98,4 +99,11 @@ export class JsonField<Required extends true | false = false, TypeOverride = obj
 
       return JSON.stringify(value);
    }
+
+   override toType(): TFieldTSType {
+      return {
+         ...super.toType(),
+         type: "any",
+      };
+   }
 }

app/src/data/fields/JsonSchemaField.ts

@@ -1,9 +1,10 @@
 import { type Schema as JsonSchema, Validator } from "@cfworker/json-schema";
-import { Default, FromSchema, type Static } from "core/utils";
+import { Default, FromSchema, objectToJsLiteral, type Static } from "core/utils";
 import type { EntityManager } from "data";
 import { TransformPersistFailedException } from "../errors";
 import { Field, type TActionContext, type TRenderContext, baseFieldConfigSchema } from "./Field";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 export const jsonSchemaFieldConfigSchema = Type.Composite(
@@ -121,4 +122,12 @@ export class JsonSchemaField<
          }),
       );
    }
+
+   override toType(): TFieldTSType {
+      return {
+         ...super.toType(),
+         import: [{ package: "json-schema-to-ts", name: "FromSchema" }],
+         type: `FromSchema<${objectToJsLiteral(this.getJsonSchema(), 2, 1)}>`,
+      };
+   }
 }

app/src/data/fields/NumberField.ts

@@ -3,6 +3,7 @@ import type { EntityManager } from "data";
 import { TransformPersistFailedException } from "../errors";
 import { Field, type TActionContext, type TRenderContext, baseFieldConfigSchema } from "./Field";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 export const numberFieldConfigSchema = Type.Composite(
@@ -102,4 +103,11 @@ export class NumberField<Required extends true | false = false> extends Field<
          }),
       );
    }
+
+   override toType(): TFieldTSType {
+      return {
+         ...super.toType(),
+         type: "number",
+      };
+   }
 }

app/src/data/fields/PrimaryField.ts

@@ -2,6 +2,7 @@ import { config } from "core";
 import type { Static } from "core/utils";
 import { Field, baseFieldConfigSchema } from "./Field";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 export const primaryFieldConfigSchema = Type.Composite([
@@ -48,4 +49,13 @@ export class PrimaryField<Required extends true | false = false> extends Field<
    override toJsonSchema() {
       return this.toSchemaWrapIfRequired(Type.Number({ writeOnly: undefined }));
    }
+
+   override toType(): TFieldTSType {
+      return {
+         ...super.toType(),
+         required: true,
+         import: [{ package: "kysely", name: "Generated" }],
+         type: "Generated<number>",
+      };
+   }
 }

app/src/data/fields/TextField.ts

@@ -121,4 +121,11 @@ export class TextField<Required extends true | false = false> extends Field<
          }),
       );
    }
+
+   override toType() {
+      return {
+         ...super.toType(),
+         type: "string",
+      };
+   }
 }

app/src/data/index.ts

@@ -17,7 +17,7 @@ export {
 
 export { KyselyPluginRunner } from "./plugins/KyselyPluginRunner";
 
-export { constructEntity, constructRelation } from "./schema/constructor";
+export { constructEntity, constructRelation, constructIndex } from "./schema/constructor";
 
 export const DatabaseEvents = {
    ...MutatorEvents,

app/src/data/relations/EntityRelation.ts

@@ -11,6 +11,9 @@ import type { RelationType } from "./relation-types";
 import * as tbbox from "@sinclair/typebox";
 const { Type } = tbbox;
 
+const directions = ["source", "target"] as const;
+export type TDirection = (typeof directions)[number];
+
 export type KyselyJsonFrom = any;
 export type KyselyQueryBuilder = SelectQueryBuilder<any, any, any>;
 
@@ -27,7 +30,7 @@ export abstract class EntityRelation<
 
    // @todo: add unit tests
    // allowed directions, used in RelationAccessor for visibility
-   directions: ("source" | "target")[] = ["source", "target"];
+   directions: TDirection[] = ["source", "target"];
 
    static schema = Type.Object({
       mappedBy: Type.Optional(Type.String()),
@@ -102,6 +105,10 @@ export abstract class EntityRelation<
       );
    }
 
+   self(entity: Entity | string): EntityRelationAnchor {
+      return this.other(entity).entity.name === this.source.entity.name ? this.target : this.source;
+   }
+
    ref(reference: string): EntityRelationAnchor {
       return this.source.reference === reference ? this.source : this.target;
    }

app/src/data/relations/RelationField.ts

@@ -4,6 +4,7 @@ import { Field, baseFieldConfigSchema } from "../fields";
 import type { EntityRelation } from "./EntityRelation";
 import type { EntityRelationAnchor } from "./EntityRelationAnchor";
 import * as tbbox from "@sinclair/typebox";
+import type { TFieldTSType } from "data/entities/EntityTypescript";
 const { Type } = tbbox;
 
 const CASCADES = ["cascade", "set null", "set default", "restrict", "no action"] as const;
@@ -83,4 +84,11 @@ export class RelationField extends Field<RelationFieldConfig> {
          }),
       );
    }
+
+   override toType(): TFieldTSType {
+      return {
+         ...super.toType(),
+         type: "number",
+      };
+   }
 }

app/src/data/schema/constructor.ts

@@ -1,6 +1,13 @@
 import { transformObject } from "core/utils";
-import { Entity, type Field } from "data";
-import { FIELDS, RELATIONS, type TAppDataEntity, type TAppDataRelation } from "data/data-schema";
+import { Entity, EntityIndex, type Field } from "data";
+import {
+   FIELDS,
+   RELATIONS,
+   type TAppDataEntity,
+   type TAppDataField,
+   type TAppDataIndex,
+   type TAppDataRelation,
+} from "data/data-schema";
 
 export function constructEntity(name: string, entityConfig: TAppDataEntity) {
    const fields = transformObject(entityConfig.fields ?? {}, (fieldConfig, name) => {
@@ -32,3 +39,17 @@ export function constructRelation(
       relationConfig.config,
    );
 }
+
+export function constructIndex(
+   indexConfig: TAppDataIndex,
+   resolver: (name: Entity | string) => Entity,
+   name: string,
+) {
+   const entity = resolver(indexConfig.entity);
+   return new EntityIndex(
+      entity,
+      entity.fields.filter((f) => indexConfig.fields.includes(f.name)),
+      indexConfig.unique,
+      name,
+   );
+}

app/src/media/AppMedia.ts

@@ -1,4 +1,4 @@
-import { $console, type PrimaryFieldType } from "core";
+import { $console, type AppEntity } from "core";
 import type { Entity, EntityManager } from "data";
 import { type FileUploadedEventData, Storage, type StorageAdapter, MediaPermissions } from "media";
 import { Module } from "modules/Module";
@@ -17,8 +17,9 @@ import { buildMediaSchema, type mediaConfigSchema, registry } from "./media-sche
 
 export type MediaFieldSchema = FieldSchema<typeof AppMedia.mediaFields>;
 declare module "core" {
+   interface Media extends AppEntity, MediaFieldSchema {}
    interface DB {
-      media: { id: PrimaryFieldType } & MediaFieldSchema;
+      media: Media;
    }
 }
 

app/src/ui/client/api/use-entity.ts

@@ -1,9 +1,10 @@
 import type { DB, PrimaryFieldType } from "core";
 import { objectTransform } from "core/utils/objects";
 import { encodeSearch } from "core/utils/reqres";
-import type { EntityData, RepoQueryIn } from "data";
-import type { ModuleApi, ResponseObject } from "modules/ModuleApi";
-import useSWR, { type SWRConfiguration, mutate } from "swr";
+import type { EntityData, RepoQueryIn, RepositoryResponse } from "data";
+import type { Insertable, Selectable, Updateable } from "kysely";
+import type { FetchPromise, ModuleApi, ResponseObject } from "modules/ModuleApi";
+import useSWR, { type SWRConfiguration, type SWRResponse, mutate } from "swr";
 import { type Api, useApi } from "ui/client";
 
 export class UseEntityApiError<Payload = any> extends Error {
@@ -23,6 +24,26 @@ export class UseEntityApiError<Payload = any> extends Error {
    }
 }
 
+interface UseEntityReturn<
+   Entity extends keyof DB | string,
+   Id extends PrimaryFieldType | undefined,
+   Data = Entity extends keyof DB ? DB[Entity] : EntityData,
+   Response = ResponseObject<RepositoryResponse<Selectable<Data>>>,
+> {
+   create: (input: Insertable<Data>) => Promise<Response>;
+   read: (
+      query?: RepoQueryIn,
+   ) => Promise<
+      ResponseObject<
+         RepositoryResponse<Id extends undefined ? Selectable<Data>[] : Selectable<Data>>
+      >
+   >;
+   update: Id extends undefined
+      ? (input: Updateable<Data>, id: Id) => Promise<Response>
+      : (input: Updateable<Data>) => Promise<Response>;
+   _delete: Id extends undefined ? (id: Id) => Promise<Response> : () => Promise<Response>;
+}
+
 export const useEntity = <
    Entity extends keyof DB | string,
    Id extends PrimaryFieldType | undefined = undefined,
@@ -30,28 +51,26 @@ export const useEntity = <
 >(
    entity: Entity,
    id?: Id,
-) => {
+): UseEntityReturn<Entity, Id, Data> => {
    const api = useApi().data;
 
    return {
-      create: async (input: Omit<Data, "id">) => {
-         const res = await api.createOne(entity, input);
+      create: async (input: Insertable<Data>) => {
+         const res = await api.createOne(entity, input as any);
          if (!res.ok) {
             throw new UseEntityApiError(res, `Failed to create entity "${entity}"`);
          }
-         return res;
+         return res as any;
       },
-      read: async (query: RepoQueryIn = {}) => {
+      read: async (query?: RepoQueryIn) => {
          const res = id ? await api.readOne(entity, id!, query) : await api.readMany(entity, query);
          if (!res.ok) {
             throw new UseEntityApiError(res as any, `Failed to read entity "${entity}"`);
          }
-         // must be manually typed
-         return res as unknown as Id extends undefined
-            ? ResponseObject<Data[]>
-            : ResponseObject<Data>;
+         return res as any;
       },
-      update: async (input: Partial<Omit<Data, "id">>, _id: PrimaryFieldType | undefined = id) => {
+      // @ts-ignore
+      update: async (input: Updateable<Data>, _id: PrimaryFieldType | undefined = id) => {
          if (!_id) {
             throw new Error("id is required");
          }
@@ -59,8 +78,9 @@ export const useEntity = <
          if (!res.ok) {
             throw new UseEntityApiError(res, `Failed to update entity "${entity}"`);
          }
-         return res;
+         return res as any;
       },
+      // @ts-ignore
       _delete: async (_id: PrimaryFieldType | undefined = id) => {
          if (!_id) {
             throw new Error("id is required");
@@ -70,7 +90,7 @@ export const useEntity = <
          if (!res.ok) {
             throw new UseEntityApiError(res, `Failed to delete entity "${entity}"`);
          }
-         return res;
+         return res as any;
       },
    };
 };
@@ -91,6 +111,19 @@ export function makeKey(
    );
 }
 
+interface UseEntityQueryReturn<
+   Entity extends keyof DB | string,
+   Id extends PrimaryFieldType | undefined = undefined,
+   Data = Entity extends keyof DB ? Selectable<DB[Entity]> : EntityData,
+   Return = Id extends undefined ? ResponseObject<Data[]> : ResponseObject<Data>,
+> extends Omit<SWRResponse<Return>, "mutate">,
+      Omit<ReturnType<typeof useEntity<Entity, Id>>, "read"> {
+   mutate: (id?: PrimaryFieldType) => Promise<any>;
+   mutateRaw: SWRResponse<Return>["mutate"];
+   api: Api["data"];
+   key: string;
+}
+
 export const useEntityQuery = <
    Entity extends keyof DB | string,
    Id extends PrimaryFieldType | undefined = undefined,
@@ -99,11 +132,11 @@ export const useEntityQuery = <
    id?: Id,
    query?: RepoQueryIn,
    options?: SWRConfiguration & { enabled?: boolean; revalidateOnMutate?: boolean },
-) => {
+): UseEntityQueryReturn<Entity, Id> => {
    const api = useApi().data;
    const key = makeKey(api, entity as string, id, query);
    const { read, ...actions } = useEntity<Entity, Id>(entity, id);
-   const fetcher = () => read(query);
+   const fetcher = () => read(query ?? {});
 
    type T = Awaited<ReturnType<typeof fetcher>>;
    const swr = useSWR<T>(options?.enabled === false ? null : key, fetcher as any, {
@@ -136,6 +169,7 @@ export const useEntityQuery = <
       ...swr,
       ...mapped,
       mutate: mutateFn,
+      // @ts-ignore
       mutateRaw: swr.mutate,
       api,
       key,
@@ -144,8 +178,8 @@ export const useEntityQuery = <
 
 export async function mutateEntityCache<
    Entity extends keyof DB | string,
-   Data = Entity extends keyof DB ? Omit<DB[Entity], "id"> : EntityData,
->(api: Api["data"], entity: Entity, id: PrimaryFieldType, partialData: Partial<Data>) {
+   Data = Entity extends keyof DB ? DB[Entity] : EntityData,
+>(api: Api["data"], entity: Entity, id: PrimaryFieldType, partialData: Partial<Selectable<Data>>) {
    function update(prev: any, partialNext: any) {
       if (
          typeof prev !== "undefined" &&
@@ -176,28 +210,37 @@ export async function mutateEntityCache<
    );
 }
 
+interface UseEntityMutateReturn<
+   Entity extends keyof DB | string,
+   Id extends PrimaryFieldType | undefined = undefined,
+   Data = Entity extends keyof DB ? DB[Entity] : EntityData,
+> extends Omit<ReturnType<typeof useEntityQuery<Entity, Id>>, "mutate"> {
+   mutate: Id extends undefined
+      ? (id: PrimaryFieldType, data: Partial<Selectable<Data>>) => Promise<void>
+      : (data: Partial<Selectable<Data>>) => Promise<void>;
+}
+
 export const useEntityMutate = <
    Entity extends keyof DB | string,
    Id extends PrimaryFieldType | undefined = undefined,
-   Data = Entity extends keyof DB ? Omit<DB[Entity], "id"> : EntityData,
+   Data = Entity extends keyof DB ? DB[Entity] : EntityData,
 >(
    entity: Entity,
    id?: Id,
    options?: SWRConfiguration,
-) => {
+): UseEntityMutateReturn<Entity, Id, Data> => {
    const { data, ...$q } = useEntityQuery<Entity, Id>(entity, id, undefined, {
       ...options,
       enabled: false,
    });
 
    const _mutate = id
-      ? (data) => mutateEntityCache($q.api, entity, id, data)
-      : (id, data) => mutateEntityCache($q.api, entity, id, data);
+      ? (data: Partial<Selectable<Data>>) => mutateEntityCache($q.api, entity, id, data)
+      : (id: PrimaryFieldType, data: Partial<Selectable<Data>>) =>
+           mutateEntityCache($q.api, entity, id, data);
 
    return {
       ...$q,
-      mutate: _mutate as unknown as Id extends undefined
-         ? (id: PrimaryFieldType, data: Partial<Data>) => Promise<void>
-         : (data: Partial<Data>) => Promise<void>,
-   };
+      mutate: _mutate,
+   } as any;
 };

app/src/ui/client/schema/data/use-bknd-data.ts

@@ -70,6 +70,7 @@ export function useBkndData() {
    };
    const $data = {
       entity: (name: string) => entities[name],
+      indicesOf: (name: string) => app.indices.filter((i) => i.entity.name === name),
       modals,
       system: (name: string) => ({
          any: entities[name]?.type === "system",
@@ -82,6 +83,7 @@ export function useBkndData() {
       $data,
       entities,
       relations: app.relations,
+      indices: app.indices,
       config: config.data,
       schema: schema.data,
       actions,

app/src/ui/client/utils/AppReduced.ts

@@ -1,5 +1,12 @@
 import type { App } from "App";
-import { type Entity, type EntityRelation, constructEntity, constructRelation } from "data";
+import {
+   type Entity,
+   type EntityIndex,
+   type EntityRelation,
+   constructEntity,
+   constructRelation,
+   constructIndex,
+} from "data";
 import { RelationAccessor } from "data/relations/RelationAccessor";
 import { Flow, TaskMap } from "flows";
 import type { BkndAdminOptions } from "ui/client/BkndProvider";
@@ -14,6 +21,7 @@ export class AppReduced {
    // @todo: change to record
    private _entities: Entity[] = [];
    private _relations: EntityRelation[] = [];
+   private _indices: EntityIndex[] = [];
    private _flows: Flow[] = [];
 
    constructor(
@@ -30,6 +38,10 @@ export class AppReduced {
          return constructRelation(relation, this.entity.bind(this));
       });
 
+      this._indices = Object.entries(this.appJson.data.indices ?? {}).map(([name, index]) => {
+         return constructIndex(index, this.entity.bind(this), name);
+      });
+
       for (const [name, obj] of Object.entries(this.appJson.flows.flows ?? {})) {
          // @ts-ignore
          // @todo: fix constructing flow
@@ -58,6 +70,10 @@ export class AppReduced {
       return new RelationAccessor(this._relations);
    }
 
+   get indices(): EntityIndex[] {
+      return this._indices;
+   }
+
    get flows(): Flow[] {
       return this._flows;
    }

app/src/ui/components/canvas/Canvas.tsx

@@ -13,13 +13,15 @@ import {
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { useTheme } from "ui/client/use-theme";
 
-type CanvasProps = ReactFlowProps & {
+export type CanvasProps = Omit<ReactFlowProps, "onNodesChange" | "onEdgesChange"> & {
    externalProvider?: boolean;
    backgroundStyle?: "lines" | "dots";
    minimap?: boolean | MiniMapProps;
    children?: Element | ReactNode;
    onDropNewNode?: (base: any) => any;
    onDropNewEdge?: (base: any) => any;
+   onNodesChange?: (changes: any) => void;
+   onEdgesChange?: (changes: any) => void;
 };
 
 export function Canvas({
@@ -33,8 +35,8 @@ export function Canvas({
    onDropNewEdge,
    ...props
 }: CanvasProps) {
-   const [nodes, setNodes, onNodesChange] = useNodesState(_nodes ?? []);
-   const [edges, setEdges, onEdgesChange] = useEdgesState(_edges ?? []);
+   const [nodes, setNodes, _onNodesChange] = useNodesState(_nodes ?? []);
+   const [edges, setEdges, _onEdgesChange] = useEdgesState(_edges ?? []);
    const { screenToFlowPosition } = useReactFlow();
    const { theme } = useTheme();
 
@@ -42,6 +44,22 @@ export function Canvas({
    const [isSpacePressed, setIsSpacePressed] = useState(false);
    const [isPointerPressed, setIsPointerPressed] = useState(false);
 
+   const onNodesChange = useCallback(
+      (changes) => {
+         _onNodesChange(changes);
+         props.onNodesChange?.(changes);
+      },
+      [_onNodesChange, props.onNodesChange],
+   );
+
+   const onEdgesChange = useCallback(
+      (changes) => {
+         _onEdgesChange(changes);
+         props.onEdgesChange?.(changes);
+      },
+      [_onEdgesChange, props.onEdgesChange],
+   );
+
    const handleKeyDown = (event: KeyboardEvent) => {
       if (event.metaKey) {
          setIsCommandPressed(true);
@@ -173,8 +191,6 @@ export function Canvas({
          snapToGrid
          nodes={nodes}
          edges={edges}
-         onNodesChange={onNodesChange}
-         onEdgesChange={onEdgesChange}
          nodesConnectable={false}
          /*panOnDrag={isSpacePressed}*/
          panOnDrag={true}
@@ -183,6 +199,8 @@ export function Canvas({
          zoomOnDoubleClick={false}
          selectionOnDrag={!isSpacePressed}
          {...props}
+         onNodesChange={onNodesChange}
+         onEdgesChange={onEdgesChange}
       >
          {backgroundStyle === "lines" && (
             <Background

app/src/ui/components/canvas/components/nodes/DefaultNode.tsx

@@ -13,7 +13,7 @@ export function DefaultNode({ selected, children, className, ...props }: TDefaul
          {...props}
          className={twMerge(
             "relative w-80 shadow-lg rounded-lg bg-background",
-            selected && "outline outline-blue-500/25",
+            selected && "ring-4 ring-blue-400/50",
             className,
          )}
       >

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

@@ -246,7 +246,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)}
@@ -272,7 +271,7 @@ export const Switch = forwardRef<
 export const Select = forwardRef<
    HTMLSelectElement,
    React.ComponentProps<"select"> & {
-      options?: { value: string; label: string }[] | (string | number)[];
+      options?: { value: string; label: string; disabled?: boolean }[] | (string | number)[];
    }
 >(({ children, options, ...props }, ref) => (
    <div className="flex w-full relative">
@@ -297,7 +296,7 @@ export const Select = forwardRef<
                      return o;
                   })
                   .map((opt) => (
-                     <option key={opt.value} value={opt.value}>
+                     <option key={opt.value} value={opt.value} disabled={opt.disabled}>
                         {opt.label}
                      </option>
                   ))}

app/src/ui/components/form/json-schema-form/ArrayField.tsx

@@ -78,6 +78,7 @@ const ArrayItem = memo(({ path, index, schema }: any) => {
    return (
       <div key={itemPath} className="flex flex-row gap-2">
          <FieldComponent
+            required={schema.minItems > 0}
             name={itemPath}
             schema={subschema!}
             value={value}

app/src/ui/components/list/CollapsibleList.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface CollapsibleListRootProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Root = ({ className, ...props }: CollapsibleListRootProps) => (
+   <div className={twMerge("flex flex-col gap-2 max-w-4xl", className)} {...props} />
+);
+
+export interface CollapsibleListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+   hasError?: boolean;
+   disabled?: boolean;
+}
+
+const Item = ({ className, hasError, disabled, ...props }: CollapsibleListItemProps) => (
+   <div
+      className={twMerge(
+         "flex flex-col border border-muted rounded bg-background",
+         hasError && "border-error",
+         className,
+      )}
+      {...props}
+   />
+);
+
+export interface CollapsibleListPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+   left?: ReactNode;
+   right?: ReactNode;
+}
+
+const Preview = ({ className, left, right, children, ...props }: CollapsibleListPreviewProps) => (
+   <div
+      {...props}
+      className={twMerge("flex flex-row justify-between p-3 gap-3 items-center", className)}
+   >
+      {left && <div className="flex flex-row items-center p-2 bg-primary/5 rounded">{left}</div>}
+      <div className="font-mono flex-grow flex flex-row gap-3">{children}</div>
+      {right && <div className="flex flex-row gap-4 items-center">{right}</div>}
+   </div>
+);
+
+export interface CollapsibleListDetailProps extends React.HTMLAttributes<HTMLDivElement> {
+   open?: boolean;
+}
+
+const Detail = ({ className, open, ...props }: CollapsibleListDetailProps) =>
+   open && (
+      <div
+         {...props}
+         className={twMerge(
+            "flex flex-col border-t border-t-muted px-4 pt-3 pb-4 bg-lightest/50 gap-4",
+            className,
+         )}
+      />
+   );
+
+export const CollapsibleList = {
+   Root,
+   Item,
+   Preview,
+   Detail,
+};

app/src/ui/hooks/use-route-path-state.tsx

@@ -0,0 +1,93 @@
+import { use, createContext, useEffect } from "react";
+import { useState } from "react";
+import { useLocation, useParams } from "wouter";
+
+// extract path segment from path, e.g. /auth/strategies/:strategy? -> "strategy"
+function extractPathSegment(path: string): string {
+   const match = path.match(/:(\w+)\??/);
+   return match?.[1] ?? "";
+}
+
+// get url by replacing path segment with identifier
+// e.g. /auth/strategies/:strategy? -> /auth/strategies/x
+function getPath(path: string, identifier?: string) {
+   if (!identifier) {
+      return path.replace(/\/:\w+\??/, "");
+   }
+   return path.replace(/:\w+\??/, identifier);
+}
+
+export function useRoutePathState(_path?: string, identifier?: string) {
+   const ctx = useRoutePathContext(_path ?? "");
+   const path = _path ?? ctx?.path ?? "";
+   const segment = extractPathSegment(path);
+   const routeIdentifier = useParams()[segment];
+   const [localActive, setLocalActive] = useState(routeIdentifier === identifier);
+   const active = ctx ? identifier === ctx.activeIdentifier : localActive;
+
+   const [, navigate] = useLocation();
+
+   function toggle(_open?: boolean) {
+      const open = _open ?? !active;
+
+      if (ctx) {
+         ctx.setActiveIdentifier(open ? identifier! : "");
+      }
+
+      if (path) {
+         if (open) {
+            navigate(getPath(path, identifier));
+         } else {
+            navigate(getPath(path));
+         }
+      } else {
+         setLocalActive(open);
+      }
+   }
+
+   useEffect(() => {
+      if (!ctx && _path && identifier) {
+         setLocalActive(routeIdentifier === identifier);
+      }
+   }, [routeIdentifier, identifier, _path]);
+
+   return {
+      active,
+      toggle,
+   };
+}
+
+type RoutePathStateContextType = {
+   defaultIdentifier?: string;
+   path: string;
+   activeIdentifier: string;
+   setActiveIdentifier: (identifier: string) => void;
+};
+const RoutePathStateContext = createContext<RoutePathStateContextType>(undefined!);
+
+export function RoutePathStateProvider({
+   children,
+   defaultIdentifier,
+   path,
+}: Pick<RoutePathStateContextType, "path" | "defaultIdentifier"> & { children: React.ReactNode }) {
+   const segment = extractPathSegment(path);
+   const routeIdentifier = useParams()[segment];
+   const [activeIdentifier, setActiveIdentifier] = useState(
+      routeIdentifier ?? defaultIdentifier ?? "",
+   );
+   return (
+      <RoutePathStateContext.Provider
+         value={{ defaultIdentifier, path, activeIdentifier, setActiveIdentifier }}
+      >
+         {children}
+      </RoutePathStateContext.Provider>
+   );
+}
+
+function useRoutePathContext(path?: string) {
+   const ctx = use(RoutePathStateContext);
+   if (ctx && (!path || ctx.path === path)) {
+      return ctx;
+   }
+   return undefined;
+}

app/src/ui/layouts/AppShell/AppShell.tsx

@@ -13,6 +13,7 @@ import {
 import type { IconType } from "react-icons";
 import { twMerge } from "tailwind-merge";
 import { IconButton } from "ui/components/buttons/IconButton";
+import { useRoutePathState } from "ui/hooks/use-route-path-state";
 import { AppShellProvider, useAppShell } from "ui/layouts/AppShell/use-appshell";
 import { appShellStore } from "ui/store";
 import { useLocation } from "wouter";
@@ -376,6 +377,15 @@ export function Scrollable({
    );
 }
 
+type SectionHeaderAccordionItemProps = {
+   title: string;
+   open: boolean;
+   toggle: () => void;
+   ActiveIcon?: any;
+   children?: React.ReactNode;
+   renderHeaderRight?: (props: { open: boolean }) => React.ReactNode;
+};
+
 export const SectionHeaderAccordionItem = ({
    title,
    open,
@@ -383,14 +393,7 @@ export const SectionHeaderAccordionItem = ({
    ActiveIcon = IconChevronUp,
    children,
    renderHeaderRight,
-}: {
-   title: string;
-   open: boolean;
-   toggle: () => void;
-   ActiveIcon?: any;
-   children?: React.ReactNode;
-   renderHeaderRight?: (props: { open: boolean }) => React.ReactNode;
-}) => (
+}: SectionHeaderAccordionItemProps) => (
    <div
       style={{ minHeight: 49 }}
       className={twMerge(
@@ -422,6 +425,19 @@ export const SectionHeaderAccordionItem = ({
    </div>
 );
 
+export const RouteAwareSectionHeaderAccordionItem = ({
+   routePattern,
+   identifier,
+   ...props
+}: Omit<SectionHeaderAccordionItemProps, "open" | "toggle"> & {
+   // it's optional because it could be provided using the context
+   routePattern?: string;
+   identifier: string;
+}) => {
+   const { active, toggle } = useRoutePathState(routePattern, identifier);
+   return <SectionHeaderAccordionItem {...props} open={active} toggle={toggle} />;
+};
+
 export const Separator = ({ className, ...props }: ComponentPropsWithoutRef<"hr">) => (
    <hr {...props} className={twMerge("border-muted my-3", className)} />
 );

app/src/ui/modals/media/MediaInfoModal.tsx

@@ -10,7 +10,7 @@ import { useClipboard } from "@mantine/hooks";
 import { ButtonLink } from "ui/components/buttons/Button";
 import { routes } from "ui/lib/routes";
 import { useBkndMedia } from "ui/client/schema/media/use-bknd-media";
-import { JsonViewer } from "ui";
+import { JsonViewer } from "ui/components/code/JsonViewer";
 
 export type MediaInfoModalProps = {
    file: FileState;

app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx

@@ -1,17 +1,43 @@
-import { MarkerType, type Node, Position, ReactFlowProvider } from "@xyflow/react";
-import type { AppDataConfig, TAppDataEntity } from "data/data-schema";
+import { MarkerType, type Node, Position, ReactFlowProvider, useReactFlow } from "@xyflow/react";
+import type { AppDataConfig, TAppDataEntity, TAppDataField } from "data/data-schema";
 import { useBknd } from "ui/client/BkndProvider";
-import { Canvas } from "ui/components/canvas/Canvas";
+import { Canvas, type CanvasProps } from "ui/components/canvas/Canvas";
 import { layoutWithDagre } from "ui/components/canvas/layouts";
 import { Panels } from "ui/components/canvas/panels";
 import { EntityTableNode } from "./EntityTableNode";
 import { useTheme } from "ui/client/use-theme";
+import { useCallback } from "react";
+import { mergeObject, transformObject } from "core/utils";
+
+export interface TCanvasEntityField extends TAppDataField {
+   name: string;
+   indexed?: boolean;
+}
+
+export interface TCanvasEntity extends TAppDataEntity {
+   label: string;
+   fields: Record<string, TCanvasEntityField>;
+   [key: string]: any;
+}
+
+function entitiesToNodes(
+   entities: AppDataConfig["entities"],
+   indices?: AppDataConfig["indices"],
+): Node<TCanvasEntity>[] {
+   const indexed_fields = Object.entries(indices ?? {}).flatMap(([, index]) => index.fields);
 
-function entitiesToNodes(entities: AppDataConfig["entities"]): Node<TAppDataEntity>[] {
    return Object.entries(entities ?? {}).map(([name, entity]) => {
       return {
          id: name,
-         data: { label: name, ...entity },
+         data: {
+            ...entity,
+            label: name,
+            fields: transformObject(entity.fields ?? {}, (f, name) => ({
+               ...f,
+               name,
+               indexed: indexed_fields.includes(name),
+            })),
+         },
          type: "entity",
          dragHandle: ".drag-handle",
          position: { x: 0, y: 0 },
@@ -65,24 +91,29 @@ const nodeTypes = {
    entity: EntityTableNode.Component,
 } as const;
 
+const getEdgeStyle = (theme: string) => ({
+   stroke: theme === "light" ? "#ccc" : "#666",
+});
+
+const getMarkerEndStyle = (theme: string) => ({
+   type: MarkerType.Arrow,
+   width: 20,
+   height: 20,
+   color: theme === "light" ? "#aaa" : "#777",
+});
+
 export function DataSchemaCanvas() {
    const {
       config: { data },
    } = useBknd();
    const { theme } = useTheme();
-   const nodes = entitiesToNodes(data.entities);
+   const nodes = entitiesToNodes(data.entities, data.indices);
+   console.log(nodes);
    const edges = relationsToEdges(data.relations).map((e) => ({
       ...e,
-      style: {
-         stroke: theme === "light" ? "#ccc" : "#666",
-      },
+      style: getEdgeStyle(theme),
       type: "smoothstep",
-      markerEnd: {
-         type: MarkerType.Arrow,
-         width: 20,
-         height: 20,
-         color: theme === "light" ? "#aaa" : "#777",
-      },
+      markerEnd: getMarkerEndStyle(theme),
    }));
 
    const nodeLayout = layoutWithDagre({
@@ -107,7 +138,7 @@ export function DataSchemaCanvas() {
 
    return (
       <ReactFlowProvider>
-         <Canvas
+         <ActualCanvas
             nodes={nodes}
             edges={edges}
             nodeTypes={nodeTypes}
@@ -119,7 +150,49 @@ export function DataSchemaCanvas() {
             }}
          >
             <Panels zoom minimap />
-         </Canvas>
+         </ActualCanvas>
       </ReactFlowProvider>
    );
 }
+
+function toRecord(nodes: Node<TAppDataEntity>[]): Record<string, Node<TAppDataEntity>> {
+   return Object.fromEntries(nodes.map((n) => [n.id, n]));
+}
+
+function ActualCanvas(props: CanvasProps) {
+   const flow = useReactFlow();
+   const { theme } = useTheme();
+
+   const onNodesChange = useCallback((changes: any) => {
+      const nodes = mergeObject<Record<string, Node<TAppDataEntity>>>(
+         toRecord(flow.getNodes()),
+         toRecord(changes),
+      );
+      const selected = Object.values(nodes).filter((n) => n.selected);
+      const selected_names = selected.map((n) => n.id);
+      flow.setEdges((edges) =>
+         edges.map((edge) => {
+            if (selected_names.includes(edge.source) || selected_names.includes(edge.target)) {
+               return {
+                  ...edge,
+                  animated: true,
+                  style: { stroke: "#6495c6" },
+                  markerEnd: {
+                     ...getMarkerEndStyle(theme),
+                     color: "#6495c6",
+                  },
+               };
+            }
+
+            return {
+               ...edge,
+               style: getEdgeStyle(theme),
+               animated: false,
+               markerEnd: getMarkerEndStyle(theme),
+            };
+         }),
+      );
+   }, []);
+
+   return <Canvas {...props} onNodesChange={onNodesChange as any} />;
+}

app/src/ui/modules/data/components/canvas/EntityTableNode.tsx

@@ -1,26 +1,21 @@
-import { Handle, type Node, type NodeProps, Position } from "@xyflow/react";
+import { Handle, type Node, type NodeProps, Position, useReactFlow } from "@xyflow/react";
 
 import type { TAppDataEntity } from "data/data-schema";
-import { useState } from "react";
-import { TbDiamonds, TbKey } from "react-icons/tb";
+import { useEffect, useState } from "react";
+import { TbBolt, TbDiamonds, TbKey } from "react-icons/tb";
 import { twMerge } from "tailwind-merge";
 import { DefaultNode } from "ui/components/canvas/components/nodes/DefaultNode";
+import { useTheme } from "ui/client/use-theme";
+import { useNavigate } from "ui/lib/routes";
+import type { TCanvasEntity, TCanvasEntityField } from "./DataSchemaCanvas";
 
 export type TableProps = {
    name: string;
    type?: string;
-   fields: TableField[];
-};
-export type TableField = {
-   name: string;
-   type: string;
-   primary?: boolean;
-   foreign?: boolean;
-   indexed?: boolean;
+   fields: TCanvasEntityField[];
 };
 
-function NodeComponent(props: NodeProps<Node<TAppDataEntity & { label: string }>>) {
-   const [hovered, setHovered] = useState(false);
+function NodeComponent(props: NodeProps<Node<TCanvasEntity>>) {
    const { data } = props;
    const fields = props.data.fields ?? {};
    const field_count = Object.keys(fields).length;
@@ -32,10 +27,11 @@ function NodeComponent(props: NodeProps<Node<TAppDataEntity & { label: string }>
             {Object.entries(fields).map(([name, field], index) => (
                <TableRow
                   key={index}
-                  field={{ name, ...field }}
+                  field={field}
                   table={data.label}
                   index={index}
                   last={field_count === index + 1}
+                  selected={props.selected && ["relation", "primary"].includes(field.type)}
                />
             ))}
          </div>
@@ -53,13 +49,16 @@ const TableRow = ({
    index,
    onHover,
    last,
+   selected,
 }: {
-   field: TableField;
+   field: TCanvasEntityField;
    table: string;
    index: number;
    last?: boolean;
+   selected?: boolean;
    onHover?: (hovered: boolean) => void;
 }) => {
+   const [navigate] = useNavigate();
    const handleTop = HEIGHTS.header + HEIGHTS.row * index + HEIGHTS.row / 2;
    const handles = true;
    const handleId = `${table}:${field.name}`;
@@ -67,10 +66,12 @@ const TableRow = ({
    return (
       <div
          className={twMerge(
-            "flex flex-row w-full justify-between font-mono py-1.5 px-2.5 border-b border-primary/15 border-l border-r cursor-auto",
+            "flex flex-row w-full justify-between font-mono py-1.5 px-2.5 border-b border-primary/15 border-l border-r cursor-pointer",
             last && "rounded-bl-lg rounded-br-lg",
+            selected && "bg-primary/5",
             "hover:bg-primary/5",
          )}
+         onClick={() => navigate(`/entity/${table}/fields/${field.name}`)}
       >
          {handles && (
             <Handle
@@ -86,7 +87,12 @@ const TableRow = ({
             {field.type === "primary" && <TbKey className="text-yellow-700" />}
             {field.type === "relation" && <TbDiamonds className="text-sky-700" />}
          </div>
-         <div className="flex flex-grow">{field.name}</div>
+         <div className="flex flex-grow items-center gap-1">
+            <span className={field.config?.required ? "font-bold" : "opacity-90"}>
+               {field.name}
+            </span>{" "}
+            {field.indexed && <TbBolt className="text-warning-foreground/50" />}
+         </div>
          <div className="flex opacity-60">{field.type}</div>
 
          {handles && (

app/src/ui/routes/auth/auth.strategies.tsx

@@ -1,6 +1,6 @@
 import { isDebug } from "core";
 import { autoFormatString } from "core/utils";
-import { type ChangeEvent, useState } from "react";
+import type { ChangeEvent } from "react";
 import {
    TbAt,
    TbBrandAppleFilled,
@@ -13,7 +13,6 @@ import {
    TbBrandX,
    TbSettings,
 } from "react-icons/tb";
-import { twMerge } from "tailwind-merge";
 import { useBknd } from "ui/client/bknd";
 import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
 import { Button } from "ui/components/buttons/Button";
@@ -33,6 +32,8 @@ import {
 } from "ui/components/form/json-schema-form";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "../../layouts/AppShell/AppShell";
+import { CollapsibleList } from "ui/components/list/CollapsibleList";
+import { useRoutePathState } from "ui/hooks/use-route-path-state";
 
 export function AuthStrategiesList(props) {
    useBrowserTitle(["Auth", "Strategies"]);
@@ -104,7 +105,7 @@ function AuthStrategiesListInternal() {
                <p className="opacity-70">
                   Allow users to sign in or sign up using different strategies.
                </p>
-               <div className="flex flex-col gap-2 max-w-4xl">
+               <CollapsibleList.Root>
                   <Strategy type="password" name="password" />
                   <Strategy type="oauth" name="google" />
                   <Strategy type="oauth" name="github" />
@@ -113,7 +114,7 @@ function AuthStrategiesListInternal() {
                   <Strategy type="oauth" name="instagram" unavailable />
                   <Strategy type="oauth" name="apple" unavailable />
                   <Strategy type="oauth" name="discord" unavailable />
-               </div>
+               </CollapsibleList.Root>
             </div>
             <FormDebug />
          </AppShell.Scrollable>
@@ -138,47 +139,40 @@ const Strategy = ({ type, name, unavailable }: StrategyProps) => {
       ]),
    );
    const schema = schemas[type];
-   const [open, setOpen] = useState(false);
+
+   const { active, toggle } = useRoutePathState("/strategies/:strategy?", name);
 
    if (!schema) return null;
 
    return (
       <FormContextOverride schema={schema} prefix={name}>
-         <div
-            className={twMerge(
-               "flex flex-col border border-muted rounded bg-background",
-               unavailable && "opacity-20 pointer-events-none cursor-not-allowed",
-               errors.length > 0 && "border-red-500",
-            )}
+         <CollapsibleList.Item
+            hasError={errors.length > 0}
+            className={
+               unavailable ? "opacity-20 pointer-events-none cursor-not-allowed" : undefined
+            }
          >
-            <div className="flex flex-row justify-between p-3 gap-3 items-center">
-               <div className="flex flex-row items-center p-2 bg-primary/5 rounded">
-                  <StrategyIcon type={type} provider={name} />
-               </div>
-               <div className="font-mono flex-grow flex flex-row gap-3">
-                  <span className="leading-none">{autoFormatString(name)}</span>
-               </div>
-               <div className="flex flex-row gap-4 items-center">
-                  <StrategyToggle type={type} />
-                  <IconButton
-                     Icon={TbSettings}
-                     size="lg"
-                     iconProps={{ strokeWidth: 1.5 }}
-                     variant={open ? "primary" : "ghost"}
-                     onClick={() => setOpen((o) => !o)}
-                  />
-               </div>
-            </div>
-            {open && (
-               <div
-                  className={twMerge(
-                     "flex flex-col border-t border-t-muted px-4 pt-3 pb-4 bg-lightest/50 gap-4",
-                  )}
-               >
-                  <StrategyForm type={type} name={name} />
-               </div>
-            )}
-         </div>
+            <CollapsibleList.Preview
+               left={<StrategyIcon type={type} provider={name} />}
+               right={
+                  <>
+                     <StrategyToggle type={type} />
+                     <IconButton
+                        Icon={TbSettings}
+                        size="lg"
+                        iconProps={{ strokeWidth: 1.5 }}
+                        variant={active ? "primary" : "ghost"}
+                        onClick={() => toggle(!active)}
+                     />
+                  </>
+               }
+            >
+               <span className="leading-none">{autoFormatString(name)}</span>
+            </CollapsibleList.Preview>
+            <CollapsibleList.Detail open={active}>
+               <StrategyForm type={type} name={name} />
+            </CollapsibleList.Detail>
+         </CollapsibleList.Item>
       </FormContextOverride>
    );
 };

app/src/ui/routes/auth/index.tsx

@@ -14,7 +14,7 @@ export default function AuthRoutes() {
          <Route path="/users" component={AuthUsersList} />
          <Route path="/roles" component={AuthRolesList} />
          <Route path="/roles/edit/:role" component={AuthRolesEdit} />
-         <Route path="/strategies" component={AuthStrategiesList} />
+         <Route path="/strategies/:strategy?" component={AuthStrategiesList} />
          <Route path="/settings" component={AuthSettings} />
       </AuthRoot>
    );

app/src/ui/routes/data/_data.root.tsx

@@ -83,10 +83,6 @@ export function DataRoot({ children }) {
             </AppShell.SectionHeader>
             <AppShell.Scrollable initialOffset={96}>
                <div className="flex flex-col flex-grow py-3 gap-3">
-                  {/*<div className="pt-3 px-3">
-                     <SearchInput placeholder="Search entities" />
-                  </div>*/}
-
                   <EntityLinkList entities={entityList.regular} context={context} suggestCreate />
                   <EntityLinkList entities={entityList.system} context={context} title="System" />
                   <EntityLinkList

app/src/ui/routes/data/data.$entity.$id.tsx

@@ -52,7 +52,6 @@ export function DataEntityUpdate({ params }) {
    }
 
    async function onSubmitted(changeSet?: EntityData) {
-      console.log("update:changeSet", changeSet);
       //return;
       if (!changeSet) {
          goBack();

app/src/ui/routes/data/data.schema.$entity.tsx

@@ -30,14 +30,12 @@ import { routes, useNavigate } from "ui/lib/routes";
 import { fieldSpecs } from "ui/modules/data/components/fields-specs";
 import { extractSchema } from "../settings/utils/schema";
 import { EntityFieldsForm, type EntityFieldsFormRef } from "./forms/entity.fields.form";
+import { RoutePathStateProvider } from "ui/hooks/use-route-path-state";
+import { EntityIndicesForm } from "./forms/entity.indices.form";
+import type { TAppDataIndex } from "data/data-schema";
 
 export function DataSchemaEntity({ params }) {
    const { $data } = useBkndData();
-   const [value, setValue] = useState("fields");
-
-   function toggle(value) {
-      return () => setValue(value);
-   }
 
    const [navigate] = useNavigate();
    const entity = $data.entity(params.entity as string)!;
@@ -47,115 +45,103 @@ export function DataSchemaEntity({ params }) {
 
    return (
       <>
-         <AppShell.SectionHeader
-            right={
-               <>
-                  <Dropdown
-                     items={[
-                        {
-                           label: "Data",
-                           onClick: () =>
-                              navigate(routes.data.root() + routes.data.entity.list(entity.name), {
-                                 absolute: true,
-                              }),
-                        },
-                        {
-                           label: "Advanced Settings",
-                           onClick: () =>
-                              navigate(routes.settings.path(["data", "entities", entity.name]), {
-                                 absolute: true,
-                              }),
-                        },
-                     ]}
-                     position="bottom-end"
-                  >
-                     <IconButton Icon={TbDots} />
-                  </Dropdown>
-                  <Dropdown
-                     items={[
-                        {
-                           icon: TbCirclesRelation,
-                           label: "Add relation",
-                           onClick: () => $data.modals.createRelation(entity.name),
-                        },
-                        {
-                           icon: TbPhoto,
-                           label: "Add media",
-                           onClick: () => $data.modals.createMedia(entity.name),
-                        },
-                        () => <div className="h-px my-1 w-full bg-primary/5" />,
-                        {
-                           icon: TbDatabasePlus,
-                           label: "Create Entity",
-                           onClick: () => $data.modals.createEntity(),
-                        },
-                     ]}
-                     position="bottom-end"
-                  >
-                     <Button IconRight={TbPlus}>Add</Button>
-                  </Dropdown>
-               </>
-            }
-            className="pl-3"
+         <RoutePathStateProvider
+            path={`/entity/${entity.name}/:setting?`}
+            defaultIdentifier="fields"
          >
-            <div className="flex flex-row gap-4">
-               <Breadcrumbs2
-                  path={[{ label: "Schema", href: "/" }, { label: entity.label }]}
-                  backTo="/"
-               />
-               <Link to="/" className="hidden md:inline">
-                  <Button IconLeft={TbSitemap}>Overview</Button>
-               </Link>
-            </div>
-         </AppShell.SectionHeader>
-         <div className="flex flex-col h-full" key={entity.name}>
-            <Fields entity={entity} open={value === "fields"} toggle={toggle("fields")} />
+            <AppShell.SectionHeader
+               right={
+                  <>
+                     <Dropdown
+                        items={[
+                           {
+                              label: "Data",
+                              onClick: () =>
+                                 navigate(
+                                    routes.data.root() + routes.data.entity.list(entity.name),
+                                    {
+                                       absolute: true,
+                                    },
+                                 ),
+                           },
+                           {
+                              label: "Advanced Settings",
+                              onClick: () =>
+                                 navigate(routes.settings.path(["data", "entities", entity.name]), {
+                                    absolute: true,
+                                 }),
+                           },
+                        ]}
+                        position="bottom-end"
+                     >
+                        <IconButton Icon={TbDots} />
+                     </Dropdown>
+                     <Dropdown
+                        items={[
+                           {
+                              icon: TbCirclesRelation,
+                              label: "Add relation",
+                              onClick: () => $data.modals.createRelation(entity.name),
+                           },
+                           {
+                              icon: TbPhoto,
+                              label: "Add media",
+                              onClick: () => $data.modals.createMedia(entity.name),
+                           },
+                           () => <div className="h-px my-1 w-full bg-primary/5" />,
+                           {
+                              icon: TbDatabasePlus,
+                              label: "Create Entity",
+                              onClick: () => $data.modals.createEntity(),
+                           },
+                        ]}
+                        position="bottom-end"
+                     >
+                        <Button IconRight={TbPlus}>Add</Button>
+                     </Dropdown>
+                  </>
+               }
+               className="pl-3"
+            >
+               <div className="flex flex-row gap-4">
+                  <Breadcrumbs2
+                     path={[{ label: "Schema", href: "/" }, { label: entity.label }]}
+                     backTo="/"
+                  />
+                  <Link to="/" className="hidden md:inline">
+                     <Button IconLeft={TbSitemap}>Overview</Button>
+                  </Link>
+               </div>
+            </AppShell.SectionHeader>
+            <div className="flex flex-col h-full" key={entity.name}>
+               <Fields entity={entity} />
 
-            <BasicSettings entity={entity} open={value === "2"} toggle={toggle("2")} />
-            <AppShell.SectionHeaderAccordionItem
-               title="Relations"
-               open={value === "3"}
-               toggle={toggle("3")}
-               ActiveIcon={IconCirclesRelation}
-            >
-               <Empty
+               <BasicSettings entity={entity} />
+               <AppShell.RouteAwareSectionHeaderAccordionItem
+                  identifier="relations"
                   title="Relations"
-                  description="This will soon be available here. Meanwhile, check advanced settings."
-                  primary={{
-                     children: "Advanced Settings",
-                     onClick: () =>
-                        navigate(routes.settings.path(["data", "relations"]), { absolute: true }),
-                  }}
-               />
-            </AppShell.SectionHeaderAccordionItem>
-            <AppShell.SectionHeaderAccordionItem
-               title="Indices"
-               open={value === "4"}
-               toggle={toggle("4")}
-               ActiveIcon={IconBolt}
-            >
-               <Empty
-                  title="Indices"
-                  description="This will soon be available here. Meanwhile, check advanced settings."
-                  primary={{
-                     children: "Advanced Settings",
-                     onClick: () =>
-                        navigate(routes.settings.path(["data", "indices"]), {
-                           absolute: true,
-                        }),
-                  }}
-               />
-            </AppShell.SectionHeaderAccordionItem>
-         </div>
+                  ActiveIcon={IconCirclesRelation}
+               >
+                  <Empty
+                     title="Relations"
+                     description="This will soon be available here. Meanwhile, check advanced settings."
+                     primary={{
+                        children: "Advanced Settings",
+                        onClick: () =>
+                           navigate(routes.settings.path(["data", "relations"]), {
+                              absolute: true,
+                           }),
+                     }}
+                  />
+               </AppShell.RouteAwareSectionHeaderAccordionItem>
+               <Indices entity={entity} />
+            </div>
+         </RoutePathStateProvider>
       </>
    );
 }
 
-const Fields = ({
-   entity,
-   open,
-   toggle,
-}: { entity: Entity; open: boolean; toggle: () => void }) => {
+const Fields = ({ entity }: { entity: Entity }) => {
    const [submitting, setSubmitting] = useState(false);
    const [updates, setUpdates] = useState(0);
    const { actions, $data } = useBkndData();
@@ -174,10 +160,9 @@ const Fields = ({
    const initialFields = Object.fromEntries(entity.fields.map((f) => [f.name, f.toJSON()])) as any;
 
    return (
-      <AppShell.SectionHeaderAccordionItem
+      <AppShell.RouteAwareSectionHeaderAccordionItem
+         identifier="fields"
          title="Fields"
-         open={open}
-         toggle={toggle}
          ActiveIcon={IconAlignJustified}
          renderHeaderRight={({ open }) =>
             open ? (
@@ -192,6 +177,7 @@ const Fields = ({
                <div className="animate-fade-in absolute w-full h-full top-0 bottom-0 left-0 right-0 bg-background/65 z-50" />
             )}
             <EntityFieldsForm
+               routePattern={`/entity/${entity.name}/fields/:sub?`}
                fields={initialFields}
                ref={ref}
                key={String(updates)}
@@ -237,15 +223,11 @@ const Fields = ({
                </div>
             )}
          </div>
-      </AppShell.SectionHeaderAccordionItem>
+      </AppShell.RouteAwareSectionHeaderAccordionItem>
    );
 };
 
-const BasicSettings = ({
-   entity,
-   open,
-   toggle,
-}: { entity: Entity; open: boolean; toggle: () => void }) => {
+const BasicSettings = ({ entity }: { entity: Entity }) => {
    const d = useBkndData();
    const config = d.entities?.[entity.name]?.config;
    const formRef = useRef<JsonSchemaFormRef>(null);
@@ -271,10 +253,9 @@ const BasicSettings = ({
    }
 
    return (
-      <AppShell.SectionHeaderAccordionItem
+      <AppShell.RouteAwareSectionHeaderAccordionItem
+         identifier="settings"
          title="Settings"
-         open={open}
-         toggle={toggle}
          ActiveIcon={IconSettings}
          renderHeaderRight={({ open }) =>
             open ? (
@@ -293,6 +274,40 @@ const BasicSettings = ({
                className="legacy hide-required-mark fieldset-alternative mute-root"
             />
          </div>
-      </AppShell.SectionHeaderAccordionItem>
+      </AppShell.RouteAwareSectionHeaderAccordionItem>
+   );
+};
+
+const Indices = ({ entity }: { entity: Entity }) => {
+   const [navigate] = useNavigate();
+   const [data, setData] = useState<Record<string, TAppDataIndex>>({});
+   const d = useBkndData();
+   const [submitting, setSubmitting] = useState(false);
+   async function handleUpdate() {
+      console.log("update", data);
+      return;
+      /*if (submitting) return;
+      setSubmitting(true);
+      await d.actions.entity.patch(entity.name).indices.set(data);
+      setSubmitting(false);*/
+   }
+
+   return (
+      <AppShell.RouteAwareSectionHeaderAccordionItem
+         identifier="indices"
+         title="Indices"
+         ActiveIcon={IconBolt}
+         renderHeaderRight={({ open }) =>
+            open ? (
+               <Button variant="primary" disabled={!open || submitting} onClick={handleUpdate}>
+                  Update
+               </Button>
+            ) : null
+         }
+      >
+         <div className="flex flex-col flex-grow py-3 px-4 max-w-4xl gap-3 relative">
+            <EntityIndicesForm entity={entity} onChange={setData} />
+         </div>
+      </AppShell.RouteAwareSectionHeaderAccordionItem>
    );
 };

app/src/ui/routes/data/forms/entity.fields.form.tsx

@@ -27,6 +27,7 @@ import { Popover } from "ui/components/overlay/Popover";
 import { type TFieldSpec, fieldSpecs } from "ui/modules/data/components/fields-specs";
 import { dataFieldsUiSchema } from "../../settings/routes/data.settings";
 import * as tbbox from "@sinclair/typebox";
+import { useRoutePathState } from "ui/hooks/use-route-path-state";
 const { Type } = tbbox;
 
 const fieldsSchemaObject = originalFieldsSchemaObject;
@@ -63,6 +64,7 @@ export type EntityFieldsFormProps = {
    onChange?: (formData: TAppDataEntityFields) => void;
    sortable?: boolean;
    additionalFieldTypes?: (TFieldSpec & { onClick: () => void })[];
+   routePattern?: string;
 };
 
 export type EntityFieldsFormRef = {
@@ -74,7 +76,10 @@ export type EntityFieldsFormRef = {
 };
 
 export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsFormProps>(
-   function EntityFieldsForm({ fields: _fields, sortable, additionalFieldTypes, ...props }, ref) {
+   function EntityFieldsForm(
+      { fields: _fields, sortable, additionalFieldTypes, routePattern, ...props },
+      ref,
+   ) {
       const entityFields = Object.entries(_fields).map(([name, field]) => ({
          name,
          field,
@@ -166,6 +171,7 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
                                  errors={errors}
                                  remove={remove}
                                  dnd={dnd}
+                                 routePattern={routePattern}
                               />
                            )}
                         />
@@ -179,6 +185,7 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
                                  form={formProps}
                                  errors={errors}
                                  remove={remove}
+                                 routePattern={routePattern}
                               />
                            ))}
                         </div>
@@ -273,6 +280,7 @@ function EntityField({
    remove,
    errors,
    dnd,
+   routePattern,
 }: {
    field: FieldArrayWithId<TFieldsFormSchema, "fields", "id">;
    index: number;
@@ -283,11 +291,12 @@ function EntityField({
    remove: (index: number) => void;
    errors: any;
    dnd?: SortableItemProps;
+   routePattern?: string;
 }) {
-   const [opened, handlers] = useDisclosure(false);
    const prefix = `fields.${index}.field` as const;
    const type = field.field.type;
    const name = watch(`fields.${index}.name`);
+   const { active, toggle } = useRoutePathState(routePattern ?? "", name);
    const fieldSpec = fieldSpecs.find((s) => s.type === type)!;
    const specificData = omit(field.field.config, commonProps);
    const disabled = fieldSpec.disabled || [];
@@ -300,9 +309,11 @@ function EntityField({
       return () => {
          if (name.length === 0) {
             remove(index);
-            return;
+            toggle();
+         } else if (window.confirm(`Sure to delete "${name}"?`)) {
+            remove(index);
+            toggle();
          }
-         window.confirm(`Sure to delete "${name}"?`) && remove(index);
       };
    }
    //console.log("register", register(`${prefix}.config.required`));
@@ -313,7 +324,7 @@ function EntityField({
          key={field.id}
          className={twMerge(
             "flex flex-col border border-muted rounded bg-background mb-2",
-            opened && "mb-6",
+            active && "mb-6",
             hasErrors && "border-red-500 ",
          )}
          {...dndProps}
@@ -371,13 +382,13 @@ function EntityField({
                      Icon={TbSettings}
                      disabled={is_primary}
                      iconProps={{ strokeWidth: 1.5 }}
-                     onClick={handlers.toggle}
-                     variant={opened ? "primary" : "ghost"}
+                     onClick={() => toggle()}
+                     variant={active ? "primary" : "ghost"}
                   />
                </div>
             </div>
          </div>
-         {opened && (
+         {active && (
             <div className="flex flex-col border-t border-t-muted px-3 py-2 bg-lightest/50">
                {/*<pre>{JSON.stringify(field, null, 2)}</pre>*/}
                <Tabs defaultValue="general">

app/src/ui/routes/data/forms/entity.indices.form.tsx

@@ -0,0 +1,118 @@
+import { TbBolt, TbTrash } from "react-icons/tb";
+import type { Entity } from "data/entities";
+import { IconButton } from "ui/components/buttons/IconButton";
+import { useBkndData } from "ui/client/schema/data/use-bknd-data";
+import { CollapsibleList } from "ui/components/list/CollapsibleList";
+import { EntityIndex } from "data";
+import { Button } from "ui/components/buttons/Button";
+import { useEffect, useState } from "react";
+import { JsonViewer } from "ui/components/code/JsonViewer";
+import type { TAppDataIndex } from "data/data-schema";
+import * as Formy from "ui/components/form/Formy";
+
+export interface EntityIndicesFormProps {
+   entity: Entity;
+   onChange?: (indices: Record<string, TAppDataIndex>) => void;
+}
+
+export function EntityIndicesForm({ entity, onChange }: EntityIndicesFormProps) {
+   const { $data } = useBkndData();
+   const [indices, setIndices] = useState<EntityIndex[]>($data.indicesOf(entity.name));
+   const [create, setCreate] = useState<TAppDataIndex>({
+      entity: entity.name,
+      fields: [],
+      unique: false,
+   });
+   const indexed_fields = indices.flatMap((i) => i.fields).map((f) => f.name);
+   const required_fields = indices
+      .flatMap((i) => i.fields)
+      .filter((f) => f.isRequired())
+      .map((f) => f.name);
+
+   const fields = entity.fields.filter(
+      (f) => !["primary", "relation", "media"].includes(f.type) && !indexed_fields.includes(f.name),
+   );
+
+   useEffect(() => {
+      onChange?.(Object.fromEntries(indices.map((i) => [i.name, i.toJSON()])));
+   }, [indices]);
+
+   function handleAdd() {
+      setIndices((prev) => [
+         ...prev,
+         new EntityIndex(
+            entity,
+            create.fields.map((f) => entity.fields.find((f2) => f2.name === f)!),
+            create.unique,
+         ),
+      ]);
+   }
+
+   //console.log("indices", { indices, schema, config });
+   return (
+      <div className="flex flex-col gap-4">
+         <div className="flex flex-col gap-2">
+            {indices.map((index) => (
+               <CollapsibleList.Item key={index.name} title={index.name}>
+                  <CollapsibleList.Preview
+                     left={<TbBolt />}
+                     right={<IconButton size="lg" Icon={TbTrash} />}
+                  >
+                     <span>{index.fields.map((f) => f.name).join(", ")}</span>
+                     <span className="opacity-50">{index.name}</span>
+                  </CollapsibleList.Preview>
+               </CollapsibleList.Item>
+            ))}
+         </div>
+         <div className="flex flex-row gap-7 items-center">
+            <span className="font-bold">Add Index</span>
+            <div className="flex flex-row gap-2">
+               <Formy.Label className="opacity-70">Unique</Formy.Label>
+               <Formy.Switch
+                  checked={create.unique}
+                  size="sm"
+                  onCheckedChange={(checked) => {
+                     setCreate((prev) => ({
+                        ...prev,
+                        unique: checked,
+                        fields: prev.fields.some((f) => required_fields.includes(f))
+                           ? prev.fields
+                           : [],
+                     }));
+                  }}
+               />
+            </div>
+            <div className="flex flex-row flex-wrap gap-2 items-center">
+               <Formy.Label className="opacity-70">Field</Formy.Label>
+               <div className="min-w-0">
+                  <Formy.Select
+                     className="h-9 py-1.5 pl-3 pr-8"
+                     options={fields.map((f) => ({
+                        label: f.getLabel()!,
+                        value: f.name,
+                        disabled: create.unique && !required_fields.includes(f.name),
+                     }))}
+                     value={create.fields[0]}
+                     onChange={(e) => {
+                        setCreate((prev) => ({ ...prev, fields: [e.target.value] }));
+                     }}
+                  />
+               </div>
+            </div>
+            <div className="flex flex-grow" />
+            <Button variant="primary" disabled={create.fields.length === 0} onClick={handleAdd}>
+               Add
+            </Button>
+         </div>
+         <div>
+            <JsonViewer
+               json={{
+                  create,
+                  data: Object.fromEntries(indices.map((i) => [i.name, i.toJSON()])),
+               }}
+               expand={9}
+            />
+         </div>
+      </div>
+   );
+}

app/src/ui/routes/data/index.tsx

@@ -17,7 +17,7 @@ export default function DataRoutes() {
 
             <Route path="/schema" nest>
                <Route path="/" component={DataSchemaIndex} />
-               <Route path="/entity/:entity" component={DataSchemaEntity} />
+               <Route path="/entity/:entity/:setting?/:sub?" component={DataSchemaEntity} />
             </Route>
          </Switch>
       </DataRoot>

app/src/ui/routes/test/tests/swr-and-data-api.tsx

@@ -45,8 +45,40 @@ function QueryMutateDataApi() {
    );
 }
 
+function QueryMutateDataApi2() {
+   const { mutate } = useEntityMutate("users");
+   const { data, ...r } = useEntityQuery("users", undefined, {
+      limit: 2,
+   });
+
+   return (
+      <div>
+         bla
+         <pre>{JSON.stringify(r.key)}</pre>
+         {r.error && <div>failed to load</div>}
+         {r.isLoading && <div>loading...</div>}
+         {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+         {data && (
+            <div>
+               {data.map((user) => (
+                  <input
+                     key={String(user.id)}
+                     type="text"
+                     value={user.email}
+                     onChange={async (e) => {
+                        await mutate(user.id, { email: e.target.value });
+                     }}
+                     className="border border-black"
+                  />
+               ))}
+            </div>
+         )}
+      </div>
+   );
+}
+
 function QueryDataApi() {
-   const { data, update, ...r } = useEntityQuery("comments", undefined, {
+   const { data, update, ...r } = useEntityQuery("users", undefined, {
       sort: { by: "id", dir: "asc" },
       limit: 3,
    });

docs/integration/introduction.mdx

@@ -3,7 +3,7 @@ title: 'Introduction'
 description: 'Integrate bknd into your runtime/framework of choice'
 ---
 
-import { cloudflare, nextjs, reactRouter, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
+import { cloudflare, nextjs, rr, astro, bun, node, docker, vite, aws } from "/snippets/integration-icons.mdx"
 
 ## Start with a Framework
 bknd seamlessly integrates with popular frameworks, allowing you to use what you're already familar with. The following guides will help you get started with your framework of choice.
@@ -16,7 +16,7 @@ bknd seamlessly integrates with popular frameworks, allowing you to use what you
   />
   <Card
     title="React Router"
-    icon={<div className="text-primary-light">{reactRouter}</div>}
+    icon={<div className="text-primary-light">{rr}</div>}
     href="/integration/react-router"
   />
    <Card

docs/mint.json

@@ -61,7 +61,7 @@
   "navigation": [
     {
       "group": "Getting Started",
-      "pages": ["introduction", "motivation"]
+      "pages": ["start", "motivation"]
     },
     {
       "group": "Usage",

docs/package.json

@@ -1,10 +1,10 @@
 {
-   "name": "bknd-docs",
-   "private": true,
-   "scripts": {
-      "dev": "mintlify dev"
-   },
-   "devDependencies": {
-      "mintlify": "^4.0.285"
-   }
-}
+  "name": "bknd-docs",
+  "private": true,
+  "scripts": {
+    "dev": "mintlify dev"
+  },
+  "devDependencies": {
+    "mintlify": "4.0.510"
+  }
+}

docs/snippets/integration-icons.mdx

@@ -3,7 +3,7 @@ export const nextjs = <svg xmlns="http://www.w3.org/2000/svg" width="28px" heigh
    stroke-linecap="round" stroke-linejoin="round"
 stroke-width="2" d="M9 15V9l7.745 10.65A9 9 0 1 1 19 17.657M15 12V9"/></svg>
 
-export const reactRouter = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 140"><path d="M78.066 92.588c12.818 0 23.209-10.391 23.209-23.21c0-12.817-10.391-23.208-23.21-23.208c-12.817 0-23.208 10.39-23.208 23.209s10.391 23.209 23.209 23.209m-54.857 46.417c12.818 0 23.209-10.39 23.209-23.209c0-12.817-10.391-23.208-23.21-23.208C10.392 92.588 0 102.978 0 115.796s10.39 23.21 23.209 23.21m209.582 0c12.818 0 23.209-10.39 23.209-23.209c0-12.817-10.39-23.208-23.209-23.208s-23.209 10.39-23.209 23.208s10.391 23.21 23.21 23.21"/><path fill="currentColor" d="M156.565 70.357c-.742-7.754-1.12-14.208-7.06-18.744c-7.522-5.744-16.044-2.017-26.54-5.806C112.65 43.312 105 34.155 105 23.24C105 10.405 115.578 0 128.626 0c9.665 0 17.974 5.707 21.634 13.883c5.601 10.64 1.96 21.467 8.998 26.921c8.333 6.458 19.568 1.729 32.104 7.848a23.6 23.6 0 0 1 9.84 8.425A22.86 22.86 0 0 1 205 69.718c0 10.915-7.65 20.073-17.964 22.568c-10.497 3.789-19.019.062-26.541 5.806c-8.46 6.46-3.931 17.
+export const rr = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 140"><path d="M78.066 92.588c12.818 0 23.209-10.391 23.209-23.21c0-12.817-10.391-23.208-23.21-23.208c-12.817 0-23.208 10.39-23.208 23.209s10.391 23.209 23.209 23.209m-54.857 46.417c12.818 0 23.209-10.39 23.209-23.209c0-12.817-10.391-23.208-23.21-23.208C10.392 92.588 0 102.978 0 115.796s10.39 23.21 23.209 23.21m209.582 0c12.818 0 23.209-10.39 23.209-23.209c0-12.817-10.39-23.208-23.209-23.208s-23.209 10.39-23.209 23.208s10.391 23.21 23.21 23.21"/><path fill="currentColor" d="M156.565 70.357c-.742-7.754-1.12-14.208-7.06-18.744c-7.522-5.744-16.044-2.017-26.54-5.806C112.65 43.312 105 34.155 105 23.24C105 10.405 115.578 0 128.626 0c9.665 0 17.974 5.707 21.634 13.883c5.601 10.64 1.96 21.467 8.998 26.921c8.333 6.458 19.568 1.729 32.104 7.848a23.6 23.6 0 0 1 9.84 8.425A22.86 22.86 0 0 1 205 69.718c0 10.915-7.65 20.073-17.964 22.568c-10.497 3.789-19.019.062-26.541 5.806c-8.46 6.46-3.931 17.
 267-10.826 28.682c-3.913 7.518-11.867 12.663-21.043 12.663c-13.048 0-23.626-10.405-23.626-23.24c0-9.323 5.582-17.364 13.638-21.066c12.536-6.12 23.77-1.39 32.104-7.848c4.807-3.726 5.823-9.473 5.823-16.926"/></svg>;
 
 export const astro = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

docs/start.mdx

@@ -2,7 +2,7 @@
 title: Introduction
 ---
 
-import { cloudflare, nextjs, reactRouter, astro, bun, node, docker, vite, aws, d1, libsql, sqlite, postgres, turso } from "/snippets/integration-icons.mdx"
+import { cloudflare, nextjs, rr, astro, bun, node, docker, vite, aws, d1, libsql, sqlite, postgres, turso } from "/snippets/integration-icons.mdx"
 import { Stackblitz, examples } from "/snippets/stackblitz.mdx"
 
 Glad you're here! **bknd** is a lightweight, infrastructure agnostic and feature-rich backend that runs in any JavaScript environment.
@@ -44,7 +44,7 @@ in the future, so stay tuned!
   />
   <Card
     title="React Router"
-    icon={<div className="text-primary-light">{reactRouter}</div>}
+    icon={<div className="text-primary-light">{rr}</div>}
     href="/integration/react-router"
   />
    <Card