updated nextjs example with app router

app/src/App.ts

@@ -1,4 +1,3 @@
-import { Api, type ApiOptions } from "Api";
 import type { CreateUserPayload } from "auth/AppAuth";
 import { $console } from "core";
 import { Event } from "core/events";
@@ -188,12 +187,10 @@ export class App {
       return this.module.auth.createUser(p);
    }
 
-   async getApi(options?: LocalApiOptions) {
+   getApi(options?: LocalApiOptions) {
       const fetcher = this.server.request as typeof fetch;
       if (options && options instanceof Request) {
-         const api = new Api({ request: options, headers: options.headers, fetcher });
-         await api.verifyAuth();
-         return api;
+         return new Api({ request: options, headers: options.headers, fetcher });
       }
 
       return new Api({ host: "http://localhost", ...(options ?? {}), fetcher });

app/src/ui/Admin.tsx

@@ -54,9 +54,9 @@ function AdminInternal() {
    );
 }
 
-const Skeleton = ({ theme }: { theme?: string }) => {
-   const actualTheme =
-      (theme ?? document.querySelector("html")?.classList.contains("light")) ? "light" : "dark";
+const Skeleton = ({ theme }: { theme?: any }) => {
+   const t = useTheme();
+   const actualTheme = theme ?? t.theme;
 
    return (
       <div id="bknd-admin" className={actualTheme + " antialiased"}>

app/src/ui/client/use-theme.ts

@@ -2,7 +2,7 @@ import type { AppTheme } from "modules/server/AppServer";
 import { useBkndWindowContext } from "ui/client/ClientProvider";
 import { useBknd } from "ui/client/bknd";
 
-export function useTheme(fallback: AppTheme = "system"): { theme: AppTheme } {
+export function useTheme(fallback: AppTheme = "system") {
    const b = useBknd();
    const winCtx = useBkndWindowContext();
 
@@ -14,13 +14,16 @@ export function useTheme(fallback: AppTheme = "system"): { theme: AppTheme } {
    const override = b?.adminOverride?.color_scheme;
    const config = b?.config.server.admin.color_scheme;
    const win = winCtx.color_scheme;
-   const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+   const prefersDark =
+      typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
 
    const theme = override ?? config ?? win ?? fallback;
 
-   if (theme === "system") {
-      return { theme: prefersDark ? "dark" : "light" };
-   }
-
-   return { theme };
+   return {
+      theme: (theme === "system" ? (prefersDark ? "dark" : "light") : theme) as AppTheme,
+      prefersDark,
+      override,
+      config,
+      win,
+   };
 }

app/src/ui/hooks/use-event.ts

@@ -4,15 +4,15 @@
 // there is no lifecycle or Hook in React that we can use to switch
 // .current at the right timing."
 // So we will have to make do with this "close enough" approach for now.
-import { useInsertionEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 export const useEvent = <Fn>(fn: Fn | ((...args: any[]) => any) | undefined): Fn => {
    const ref = useRef([fn, (...args) => ref[0](...args)]).current;
    // Per Dan Abramov: useInsertionEffect executes marginally closer to the
    // correct timing for ref synchronization than useLayoutEffect on React 18.
    // See: https://github.com/facebook/react/pull/25881#issuecomment-1356244360
-   useInsertionEffect(() => {
+   useEffect(() => {
       ref[0] = fn;
-   });
+   }, []);
    return ref[1];
 };

app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx

@@ -45,7 +45,6 @@ export function StepEntityFields() {
    const values = watch();
 
    const updateListener = useEvent((data: TAppDataEntityFields) => {
-      console.log("updateListener", data);
       setValue("fields", data as any);
    });
 

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

@@ -2,7 +2,7 @@ import { Type } from "core/utils";
 import { type Entity, querySchema } from "data";
 import { Fragment } from "react";
 import { TbDots } from "react-icons/tb";
-import { useApi, useApiQuery } from "ui/client";
+import { useApiQuery } from "ui/client";
 import { useBknd } from "ui/client/bknd";
 import { useBkndData } from "ui/client/schema/data/use-bknd-data";
 import { Button } from "ui/components/buttons/Button";
@@ -83,7 +83,7 @@ export function DataEntityList({ params }) {
       search.set("perPage", perPage);
    }
 
-   const isUpdating = $q.isLoading && $q.isValidating;
+   const isUpdating = $q.isLoading || $q.isValidating;
 
    return (
       <Fragment key={entity.name}>

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

@@ -108,9 +108,7 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
 
       useEffect(() => {
          if (props?.onChange) {
-            console.log("----set");
             watch((data: any) => {
-               console.log("---calling");
                props?.onChange?.(toCleanValues(data));
             });
          }