fixing imports and ssr support + updated remix/nextjs/astro examples

app/src/ui/Admin.tsx

@@ -2,8 +2,9 @@ import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import type { ModuleConfigs } from "modules";
 import React from "react";
+import { BkndProvider, useBknd } from "ui/client/bknd";
 import { FlashMessage } from "ui/modules/server/FlashMessage";
-import { BkndProvider, ClientProvider, type ClientProviderProps, useBknd } from "./client";
+import { ClientProvider, type ClientProviderProps } from "./client";
 import { createMantineTheme } from "./lib/mantine/theme";
 import { BkndModalsProvider } from "./modals";
 import { Routes } from "./routes";

app/src/ui/client/BkndProvider.tsx

@@ -1,4 +1,3 @@
-//import { notifications } from "@mantine/notifications";
 import { getDefaultConfig, getDefaultSchema } from "modules/ModuleManager";
 import { createContext, startTransition, useContext, useEffect, useRef, useState } from "react";
 import type { ModuleConfigs, ModuleSchemas } from "../../modules";
@@ -101,20 +100,6 @@ export function BkndProvider({
    );
 }
 
-type BkndWindowContext = {
-   user?: object;
-   logout_route: string;
-};
-export function useBkndWindowContext(): BkndWindowContext {
-   if (typeof window !== "undefined" && window.__BKND__) {
-      return window.__BKND__ as any;
-   } else {
-      return {
-         logout_route: "/api/auth/logout"
-      };
-   }
-}
-
 export function useBknd({ withSecrets }: { withSecrets?: boolean } = {}): BkndContext {
    const ctx = useContext(BkndContext);
    if (withSecrets) ctx.requireSecrets();

app/src/ui/client/ClientProvider.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { TApiUser } from "Api";
 import { createContext, useContext, useEffect, useState } from "react";
-import { useBkndWindowContext } from "ui/client/BkndProvider";
+//import { useBkndWindowContext } from "ui/client/BkndProvider";
 import { AppQueryClient } from "./utils/AppQueryClient";
 
 const ClientContext = createContext<{ baseUrl: string; client: AppQueryClient }>({
@@ -89,3 +89,17 @@ export const useBaseUrl = () => {
    const context = useContext(ClientContext);
    return context.baseUrl;
 };
+
+type BkndWindowContext = {
+   user?: object;
+   logout_route: string;
+};
+export function useBkndWindowContext(): BkndWindowContext {
+   if (typeof window !== "undefined" && window.__BKND__) {
+      return window.__BKND__ as any;
+   } else {
+      return {
+         logout_route: "/api/auth/logout"
+      };
+   }
+}

app/src/ui/client/bknd.ts

@@ -0,0 +1 @@
+export { BkndProvider, useBknd } from "./BkndProvider";

app/src/ui/client/index.ts

@@ -1,5 +1,10 @@
-export { ClientProvider, type ClientProviderProps, useClient, useBaseUrl } from "./ClientProvider";
-export { BkndProvider, useBknd } from "./BkndProvider";
+export {
+   ClientProvider,
+   useBkndWindowContext,
+   type ClientProviderProps,
+   useClient,
+   useBaseUrl
+} from "./ClientProvider";
 
 export { useAuth } from "./schema/auth/use-auth";
 export { Api } from "../../Api";

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

@@ -1,4 +1,4 @@
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 
 export function useBkndAuth() {
    //const client = useClient();

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

@@ -11,7 +11,7 @@ import {
    fieldsSchema,
    relationsSchema
 } from "data/data-schema";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import type { TSchemaActions } from "ui/client/schema/actions";
 
 export function useBkndData() {

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

@@ -1,4 +1,4 @@
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 
 export function useBkndSystem() {
    const { config, schema, actions: bkndActions } = useBknd();

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

@@ -1,4 +1,4 @@
-import { useBknd } from "ui";
+import { useBknd } from "ui/client/bknd";
 
 export function useTheme(): { theme: "light" | "dark" } {
    const b = useBknd();

app/src/ui/components/code/CodeEditor.tsx

@@ -1,6 +1,6 @@
 import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { Suspense, lazy } from "react";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 const CodeMirror = lazy(() => import("@uiw/react-codemirror"));
 
 export default function CodeEditor({ editable, basicSetup, ...props }: ReactCodeMirrorProps) {

app/src/ui/index.ts

@@ -1,14 +1,4 @@
 export { default as Admin, type BkndAdminProps } from "./Admin";
-export { Button } from "./components/buttons/Button";
-export { Context } from "./components/Context";
-export {
-   useClient,
-   ClientProvider,
-   BkndProvider,
-   useBknd,
-   useAuth,
-   useBaseUrl
-} from "./client";
 export {
    EntitiesContainer,
    useEntities,

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

@@ -1,21 +1,19 @@
-import { Menu, Popover, SegmentedControl, Tooltip } from "@mantine/core";
+import { SegmentedControl, Tooltip } from "@mantine/core";
 import { IconKeyOff, IconSettings, IconUser } from "@tabler/icons-react";
 import {
    TbDatabase,
    TbFingerprint,
    TbHierarchy2,
    TbMenu2,
-   TbMoon,
    TbPhoto,
    TbSelector,
-   TbSun,
    TbUser,
    TbX
 } from "react-icons/tb";
-import { Button } from "ui";
-import { useAuth, useBknd } from "ui/client";
-import { useBkndWindowContext } from "ui/client/BkndProvider";
+import { useAuth, useBkndWindowContext } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { useBkndSystemTheme } from "ui/client/schema/system/use-bknd-system";
+import { Button } from "ui/components/buttons/Button";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { Logo } from "ui/components/display/Logo";
 import { Dropdown, type DropdownItem } from "ui/components/overlay/Dropdown";

app/src/ui/modals/debug/SchemaFormModal.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { Button } from "ui";
+import { Button } from "ui/components/buttons/Button";
 import {
    JsonSchemaForm,
    type JsonSchemaFormProps,

app/src/ui/modules/auth/LoginForm.tsx

@@ -3,7 +3,7 @@ import { Type } from "core/utils";
 import type { ComponentPropsWithoutRef } from "react";
 import { useForm } from "react-hook-form";
 import { twMerge } from "tailwind-merge";
-import { Button } from "ui";
+import { Button } from "ui/components/buttons/Button";
 import * as Formy from "ui/components/form/Formy";
 
 export type LoginFormProps = Omit<ComponentPropsWithoutRef<"form">, "onSubmit"> & {

app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx

@@ -4,8 +4,9 @@ import { ucFirst } from "core/utils";
 import type { EntityData, RelationField } from "data";
 import { useEffect, useRef, useState } from "react";
 import { TbEye } from "react-icons/tb";
-import { Button } from "ui";
-import { useBknd, useClient } from "ui/client";
+import { useClient } from "ui/client";
+import { useBknd } from "ui/client/bknd";
+import { Button } from "ui/components/buttons/Button";
 import * as Formy from "ui/components/form/Formy";
 import { Popover } from "ui/components/overlay/Popover";
 import { useEntities } from "ui/container";

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

@@ -11,7 +11,7 @@ import {
 import { ManyToOneRelation, type RelationType, RelationTypes } from "data";
 import { type ReactNode, useEffect } from "react";
 import { type Control, type FieldValues, type UseFormRegister, useForm } from "react-hook-form";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { MantineNumberInput } from "ui/components/form/hook-form-mantine/MantineNumberInput";
 import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
 import { useStepContext } from "ui/components/steps/Steps";

app/src/ui/modules/data/components/schema/create-modal/templates/media/template.media.component.tsx

@@ -10,7 +10,7 @@ import {
 } from "core/utils";
 import type { MediaFieldConfig } from "media/MediaField";
 import { useForm } from "react-hook-form";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { MantineNumberInput } from "ui/components/form/hook-form-mantine/MantineNumberInput";
 import { MantineRadio } from "ui/components/form/hook-form-mantine/MantineRadio";
 import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";

app/src/ui/modules/flows/components2/nodes/tasks/FetchTaskNode.tsx

@@ -8,7 +8,7 @@ import { Type } from "core/utils";
 import { FetchTask } from "flows";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import { Button } from "ui";
+import { Button } from "ui/components/buttons/Button";
 import { JsonViewer } from "ui/components/code/JsonViewer";
 import { SegmentedControl } from "ui/components/form/SegmentedControl";
 import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";

app/src/ui/modules/flows/hooks/use-flow/index.tsx

@@ -5,7 +5,7 @@ import { selectAtom } from "jotai/utils";
 import { isEqual } from "lodash-es";
 import type { ModuleSchemas } from "modules/ModuleManager";
 import { createContext, useCallback, useContext, useEffect } from "react";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 
 export type TFlowNodeData = {
    label: string;

app/src/ui/routes/auth/_auth.root.tsx

@@ -1,6 +1,6 @@
 import { IconFingerprint } from "@tabler/icons-react";
 import { TbSettings } from "react-icons/tb";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { Empty } from "ui/components/display/Empty";
 import { Link } from "ui/components/wouter/Link";

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

@@ -1,4 +1,5 @@
-import { useBknd, useClient } from "ui/client";
+import { useClient } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
 import { Alert } from "ui/components/display/Alert";
 import { routes } from "ui/lib/routes";

app/src/ui/routes/auth/auth.roles.edit.$role.tsx

@@ -1,7 +1,7 @@
 import { notifications } from "@mantine/notifications";
 import { useRef } from "react";
 import { TbDots } from "react-icons/tb";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
 import { Button } from "ui/components/buttons/Button";
 import { IconButton } from "ui/components/buttons/IconButton";

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

@@ -1,6 +1,6 @@
 import { cloneDeep, omit } from "lodash-es";
 import { useEffect, useRef } from "react";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
 import { useBkndData } from "ui/client/schema/data/use-bknd-data";
 import { Button } from "ui/components/buttons/Button";

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

@@ -1,5 +1,5 @@
 import { cloneDeep, omit } from "lodash-es";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { Button } from "ui/components/buttons/Button";
 import { JsonSchemaForm } from "ui/components/form/json-schema/JsonSchemaForm";
 import * as AppShell from "../../layouts/AppShell/AppShell";

app/src/ui/routes/auth/forms/role.form.tsx

@@ -2,10 +2,10 @@ import { typeboxResolver } from "@hookform/resolvers/typebox";
 import { Input, Switch, Tooltip } from "@mantine/core";
 import { guardRoleSchema } from "auth/auth-schema";
 import { type Static, ucFirst } from "core/utils";
-import type { TAppDataEntityFields } from "data/data-schema";
 import { forwardRef, useImperativeHandle } from "react";
 import { type UseControllerProps, useController, useForm } from "react-hook-form";
-import { Button, useBknd } from "ui";
+import { useBknd } from "ui/client/bknd";
+import { Button } from "ui/components/buttons/Button";
 import { MantineSwitch } from "ui/components/form/hook-form-mantine/MantineSwitch";
 
 const schema = guardRoleSchema;

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

@@ -2,12 +2,12 @@ import { SegmentedControl } from "@mantine/core";
 import { IconDatabase } from "@tabler/icons-react";
 import type { Entity, TEntityType } from "data";
 import { twMerge } from "tailwind-merge";
-import { useBknd } from "../../client";
-import { Empty } from "../../components/display/Empty";
-import { Link } from "../../components/wouter/Link";
-import { useBrowserTitle } from "../../hooks/use-browser-title";
-import * as AppShell from "../../layouts/AppShell/AppShell";
-import { routes, useNavigate } from "../../lib/routes";
+import { useBknd } from "ui/client/bknd";
+import { Empty } from "ui/components/display/Empty";
+import { Link } from "ui/components/wouter/Link";
+import { useBrowserTitle } from "ui/hooks/use-browser-title";
+import * as AppShell from "ui/layouts/AppShell/AppShell";
+import { routes, useNavigate } from "ui/lib/routes";
 
 export function DataRoot({ children }) {
    // @todo: settings routes should be centralized

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

@@ -1,24 +1,21 @@
-import { encodeSearch, ucFirst } from "core/utils";
-import type { Entity, EntityData } from "data";
-import type { EntityRelation } from "data";
-import { Fragment, memo, useState } from "react";
-import { TbArrowLeft, TbDots } from "react-icons/tb";
+import { ucFirst } from "core/utils";
+import type { Entity, EntityData, EntityRelation } from "data";
+import { Fragment, useState } from "react";
+import { TbDots } from "react-icons/tb";
+import { useClient } from "ui/client";
 import { useBkndData } from "ui/client/schema/data/use-bknd-data";
+import { Button } from "ui/components/buttons/Button";
+import { IconButton } from "ui/components/buttons/IconButton";
+import { Dropdown } from "ui/components/overlay/Dropdown";
+import { useEntity } from "ui/container";
+import { useBrowserTitle } from "ui/hooks/use-browser-title";
+import * as AppShell from "ui/layouts/AppShell/AppShell";
+import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
+import { routes, useNavigate } from "ui/lib/routes";
+import { bkndModals } from "ui/modals";
 import { EntityForm } from "ui/modules/data/components/EntityForm";
 import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
 import { useEntityForm } from "ui/modules/data/hooks/useEntityForm";
-import { useClient } from "../../client";
-import { useBknd } from "../../client";
-import { Button } from "../../components/buttons/Button";
-import { IconButton } from "../../components/buttons/IconButton";
-import { Dropdown } from "../../components/overlay/Dropdown";
-import { useEntity } from "../../container";
-import { useBrowserTitle } from "../../hooks/use-browser-title";
-import * as AppShell from "../../layouts/AppShell/AppShell";
-import { SectionHeaderLink } from "../../layouts/AppShell/AppShell";
-import { Breadcrumbs2 } from "../../layouts/AppShell/Breadcrumbs2";
-import { routes, useNavigate } from "../../lib/routes";
-import { bkndModals } from "../../modals";
 
 export function DataEntityUpdate({ params }) {
    const { $data, relations } = useBkndData();

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

@@ -2,18 +2,16 @@ import { Type } from "core/utils";
 import { querySchema } from "data";
 import { TbDots } from "react-icons/tb";
 import { useBkndData } from "ui/client/schema/data/use-bknd-data";
-import { Empty } from "ui/components/display/Empty";
+import { Button } from "ui/components/buttons/Button";
+import { IconButton } from "ui/components/buttons/IconButton";
 import { Message } from "ui/components/display/Message";
+import { Dropdown } from "ui/components/overlay/Dropdown";
+import { EntitiesContainer } from "ui/container";
+import { useBrowserTitle } from "ui/hooks/use-browser-title";
+import { useSearch } from "ui/hooks/use-search";
+import * as AppShell from "ui/layouts/AppShell/AppShell";
+import { routes, useNavigate } from "ui/lib/routes";
 import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
-import { useBknd } from "../../client";
-import { Button } from "../../components/buttons/Button";
-import { IconButton } from "../../components/buttons/IconButton";
-import { Dropdown } from "../../components/overlay/Dropdown";
-import { EntitiesContainer } from "../../container";
-import { useBrowserTitle } from "../../hooks/use-browser-title";
-import { useSearch } from "../../hooks/use-search";
-import * as AppShell from "../../layouts/AppShell/AppShell";
-import { routes, useNavigate } from "../../lib/routes";
 
 // @todo: migrate to Typebox
 const searchSchema = Type.Composite(

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

@@ -18,9 +18,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle } from "react";
 import { type FieldArrayWithId, type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
 import { TbGripVertical, TbSettings, TbTrash } from "react-icons/tb";
 import { twMerge } from "tailwind-merge";
-import { Button } from "ui";
-import { useBknd } from "ui/client";
-import { useBkndData } from "ui/client/schema/data/use-bknd-data";
+import { Button } from "ui/components/buttons/Button";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { JsonViewer } from "ui/components/code/JsonViewer";
 import { MantineSwitch } from "ui/components/form/hook-form-mantine/MantineSwitch";

app/src/ui/routes/index.tsx

@@ -1,5 +1,5 @@
 import { Suspense, lazy } from "react";
-import { useBknd } from "ui/client";
+import { useBknd } from "ui/client/bknd";
 import { Route, Router, Switch } from "wouter";
 import { AuthLogin } from "./auth/auth.login";
 import { Root, RootEmpty } from "./root";

app/src/ui/routes/root.tsx

@@ -1,7 +1,6 @@
-import { IconFingerprint, IconHome } from "@tabler/icons-react";
-import { isDebug } from "core";
-import { Suspense, lazy, useEffect } from "react";
-import { useAuth } from "ui";
+import { IconHome } from "@tabler/icons-react";
+import { Suspense, useEffect } from "react";
+import { useAuth } from "ui/client";
 import { Empty } from "../components/display/Empty";
 import { useBrowserTitle } from "../hooks/use-browser-title";
 import * as AppShell from "../layouts/AppShell/AppShell";

app/src/ui/routes/settings/components/Setting.tsx

@@ -3,23 +3,21 @@ import { type TObject, ucFirst } from "core/utils";
 import { omit } from "lodash-es";
 import { type ReactNode, useMemo, useRef, useState } from "react";
 import { TbSettings } from "react-icons/tb";
-import { useAuth } from "ui";
+import { useBknd } from "ui/client/bknd";
+import { Button } from "ui/components/buttons/Button";
+import { IconButton } from "ui/components/buttons/IconButton";
 import { Alert } from "ui/components/display/Alert";
-import { Link, Route, useLocation } from "wouter";
-import { useBknd } from "../../../client/BkndProvider";
-import { Button } from "../../../components/buttons/Button";
-import { IconButton } from "../../../components/buttons/IconButton";
-import { Empty } from "../../../components/display/Empty";
+import { Empty } from "ui/components/display/Empty";
 import {
    JsonSchemaForm,
    type JsonSchemaFormRef
-} from "../../../components/form/json-schema/JsonSchemaForm";
-import { Dropdown } from "../../../components/overlay/Dropdown";
-import { DataTable } from "../../../components/table/DataTable";
-import { useEvent } from "../../../hooks/use-event";
-import * as AppShell from "../../../layouts/AppShell/AppShell";
-import { SectionHeaderTabs } from "../../../layouts/AppShell/AppShell";
-import { Breadcrumbs } from "../../../layouts/AppShell/Breadcrumbs";
+} from "ui/components/form/json-schema/JsonSchemaForm";
+import { Dropdown } from "ui/components/overlay/Dropdown";
+import { DataTable } from "ui/components/table/DataTable";
+import { useEvent } from "ui/hooks/use-event";
+import * as AppShell from "ui/layouts/AppShell/AppShell";
+import { Breadcrumbs } from "ui/layouts/AppShell/Breadcrumbs";
+import { Link, Route, useLocation } from "wouter";
 import { extractSchema } from "../utils/schema";
 import { SettingNewModal, type SettingsNewModalProps } from "./SettingNewModal";
 import { SettingSchemaModal, type SettingsSchemaModalRef } from "./SettingSchemaModal";

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

@@ -1,13 +1,11 @@
-import { modals } from "@mantine/modals";
 import { IconSettings } from "@tabler/icons-react";
 import { ucFirst } from "core/utils";
+import { useBknd } from "ui/client/bknd";
+import { Empty } from "ui/components/display/Empty";
+import { Link } from "ui/components/wouter/Link";
+import { useBrowserTitle } from "ui/hooks/use-browser-title";
+import * as AppShell from "ui/layouts/AppShell/AppShell";
 import { Route, Switch } from "wouter";
-import { useBknd } from "../../client";
-import { Empty } from "../../components/display/Empty";
-import { Link } from "../../components/wouter/Link";
-import { useBrowserTitle } from "../../hooks/use-browser-title";
-import * as AppShell from "../../layouts/AppShell/AppShell";
-import { bkndModals } from "../../modals";
 import { Setting } from "./components/Setting";
 import { AuthSettings } from "./routes/auth.settings";
 import { DataSettings } from "./routes/data.settings";

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

@@ -1,8 +1,8 @@
 import { cloneDeep, transform } from "lodash-es";
+import type { ModuleConfigs, ModuleSchemas } from "modules";
+import { useBknd } from "ui/client/bknd";
 import { fieldSpecs } from "ui/modules/data/components/fields-specs";
 import { Route, Switch } from "wouter";
-import type { ModuleConfigs, ModuleSchemas } from "../../../../modules";
-import { useBknd } from "../../../client";
 import { Setting } from "../components/Setting";
 
 export const dataFieldsUiSchema = {

app/src/ui/routes/settings/routes/server.settings.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash-es";
-import { useBknd } from "ui";
+import { useBknd } from "ui/client/bknd";
 import { Setting } from "ui/routes/settings/components/Setting";
 import { Route } from "wouter";