Form prototype

* Remove unused FormLayout and SuperForm stores.
* Consolidate form logic into Former component.
* Implement new Former layout and types.
* Update stories for new Former component.
* Clean up unused styles and types across the project.

.storybook/previewDecorator.tsx

@@ -1,13 +1,16 @@
 import { MantineProvider } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
 import '@mantine/core/styles.css';
 
 export function PreviewDecorator(Story: any, { parameters }: any) {
   console.log('Rendering decorator', parameters);
   return (
     <MantineProvider>
+      <ModalsProvider>
         <div style={{ height: 'calc(100vh - 64px)', width: 'calc(100vw - 64px)' }}>
           <Story key={'mainStory'} />
         </div>
+      </ModalsProvider>
     </MantineProvider>
   );
 }

CHANGELOG.md

@@ -1,5 +1,65 @@
 # @warkypublic/zustandsyncstore
 
+## 0.0.23
+
+### Patch Changes
+
+- 3205411: Using the effect of array as feature.
+
+## 0.0.22
+
+### Patch Changes
+
+- 7c1d478: Possible selection fixes
+
+## 0.0.21
+
+### Patch Changes
+
+- 6664c98: Calls onchange on cell click since selection does not change.
+
+## 0.0.20
+
+### Patch Changes
+
+- 30581de: Version bump
+
+## 0.0.19
+
+### Patch Changes
+
+- 1b2bf62: Fixed refresh bug
+
+## 0.0.18
+
+### Patch Changes
+
+- 7cfefa9: API props change bug
+
+## 0.0.17
+
+### Patch Changes
+
+- 03210a3: Updated selected cols bug
+
+## 0.0.16
+
+### Patch Changes
+
+- 5e922df: A Few fixes
+
+## 0.0.15
+
+### Patch Changes
+
+- a1202f9: Hopefully fix the options not always loading
+
+## 0.0.14
+
+### Patch Changes
+
+- 864188c: Added searchfields
+
 ## 0.0.13
 
 ### Patch Changes

eslint.config.ts

@@ -16,19 +16,22 @@ const config = defineConfig([
     plugins: { js },
   },
   // reactHooks.configs['recommended-latest'],
-  {...reactRefresh.configs.vite, ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],},
+  { ...reactRefresh.configs.vite, ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'] },
   tseslint.configs.recommended,
   {
     ...pluginReact.configs.flat.recommended,
-    ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    rules: {...pluginReact.configs.flat.recommended.rules,
+    ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}', '*stories.tsx'],
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
       'react/react-in-jsx-scope': 'off',
-    }
+      'react-refresh/only-export-components': 'warn',
+    },
   },
   perfectionist.configs['recommended-alphabetical'],
   {
     rules: {
       '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'off',
     },
   },
 ]);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warkypublic/oranguru",
   "author": "Warky Devs",
-  "version": "0.0.13",
+  "version": "0.0.23",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -49,7 +49,9 @@
     "./oranguru.css": "./src/oranguru.css"
   },
   "dependencies": {
+
     "moment": "^2.30.1"
+    
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
@@ -94,10 +96,13 @@
     "@mantine/core": "^8.3.1",
     "@mantine/hooks": "^8.3.1",
     "@mantine/notifications": "^8.3.5",
+    "@mantine/modals": "^8.3.5",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.5",
     "@warkypublic/artemis-kit": "^1.0.10",
     "@warkypublic/zustandsyncstore": "^0.0.4",
+    "react-hook-form": "^7.71.0",
+        
     "immer": "^10.1.3",
     "react": ">= 19.0.0",
     "react-dom": ">= 19.0.0",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@mantine/hooks':
         specifier: ^8.3.1
         version: 8.3.1(react@19.2.0)
+      '@mantine/modals':
+        specifier: ^8.3.5
+        version: 8.3.12(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@mantine/notifications':
         specifier: ^8.3.5
         version: 8.3.5(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -38,6 +41,9 @@ importers:
       moment:
         specifier: ^2.30.1
         version: 2.30.1
+      react-hook-form:
+        specifier: ^7.71.0
+        version: 7.71.0(react@19.2.0)
       use-sync-external-store:
         specifier: '>= 1.4.0'
         version: 1.5.0(react@19.2.0)
@@ -702,6 +708,14 @@ packages:
     peerDependencies:
       react: ^18.x || ^19.x
 
+  '@mantine/modals@8.3.12':
+    resolution: {integrity: sha512-+uRyGe2lLy601qlMk+8aR9d/Aibu+dZi6Jcmvm5z8Gw4ocviyMMlnd8BLSQ/Jvib2OX8fWj+yUQN7FMQ4Rbwjw==}
+    peerDependencies:
+      '@mantine/core': 8.3.12
+      '@mantine/hooks': 8.3.12
+      react: ^18.x || ^19.x
+      react-dom: ^18.x || ^19.x
+
   '@mantine/notifications@8.3.5':
     resolution: {integrity: sha512-8TvzrPxfdtOLGTalv7Ei1hy2F6KbR3P7/V73yw3AOKhrf1ydS89sqV2ShbsucHGJk9Pto0wjdTPd8Q7pm5MAYw==}
     peerDependencies:
@@ -2843,6 +2857,12 @@ packages:
     resolution: {integrity: sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==}
     engines: {node: '>= 6'}
 
+  react-hook-form@7.71.0:
+    resolution: {integrity: sha512-oFDt/iIFMV9ZfV52waONXzg4xuSlbwKUPvXVH2jumL1me5qFhBMc4knZxuXiZ2+j6h546sYe3ZKJcg/900/iHw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-html-attributes@1.4.6:
     resolution: {integrity: sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==}
 
@@ -4285,6 +4305,13 @@ snapshots:
     dependencies:
       react: 19.2.0
 
+  '@mantine/modals@8.3.12(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@mantine/core': 8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@mantine/hooks': 8.3.1(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
   '@mantine/notifications@8.3.5(@mantine/core@8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@mantine/hooks@8.3.1(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@mantine/core': 8.3.1(@mantine/hooks@8.3.1(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -6686,6 +6713,10 @@ snapshots:
     dependencies:
       prop-types: 15.8.1
 
+  react-hook-form@7.71.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
   react-html-attributes@1.4.6:
     dependencies:
       html-element-attributes: 1.3.1

src/Form/components/Form.tsx

@@ -0,0 +1,38 @@
+import React, { type ReactNode } from 'react'
+import { Card, Stack, LoadingOverlay } from '@mantine/core'
+import { FormSection } from './FormSection'
+
+interface FormProps {
+  children: ReactNode
+  loading?: boolean
+  [key: string]: any
+}
+
+export const Form: React.FC<FormProps> & {
+  Section: typeof FormSection
+} = ({ children, loading, ...others }) => {
+  return (
+    <Card
+      withBorder
+      component={Stack}
+      w="100%"
+      h="100%"
+      padding={0}
+      styles={{
+        root: {
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      }}
+      shadow="sm"
+      radius="md"
+      {...others}
+    >
+      <LoadingOverlay visible={loading || false} />
+      {children}
+    </Card>
+  )
+}
+
+Form.Section = FormSection

src/Form/components/FormLayout.tsx

@@ -0,0 +1,55 @@
+import React, { type ReactNode } from 'react'
+import { Modal } from '@mantine/core'
+import { Form } from './Form'
+import { FormLayoutStoreProvider, useFormLayoutStore } from '../store/FormLayout.store'
+import type { RequestType } from '../types'
+
+interface FormLayoutProps {
+  children: ReactNode
+  dirty?: boolean
+  loading?: boolean
+  onCancel?: () => void
+  onSubmit?: () => void
+  request?: RequestType
+  modal?: boolean
+  modalProps?: any
+  nested?: boolean
+  deleteFormProps?: any
+  [key: string]: any
+}
+
+const LayoutComponent: React.FC<FormLayoutProps> = ({
+  children,
+  modal,
+  modalProps,
+  ...others
+}) => {
+  const { request } = useFormLayoutStore((state) => ({
+    request: state.request,
+  }))
+
+  const modalWidth = request === 'delete' ? 400 : modalProps?.width
+
+  return modal === true ? (
+    <Modal
+      onClose={() => modalProps?.onClose?.()}
+      opened={modalProps?.opened || false}
+      size="auto"
+      withCloseButton={false}
+      centered={request !== 'delete'}
+      {...modalProps}
+    >
+      <div style={{ height: modalProps?.height, width: modalWidth }}>
+        <Form {...others}>{children}</Form>
+      </div>
+    </Modal>
+  ) : (
+    <Form {...others}>{children}</Form>
+  )
+}
+
+export const FormLayout: React.FC<FormLayoutProps> = (props) => (
+  <FormLayoutStoreProvider {...props}>
+    <LayoutComponent {...props} />
+  </FormLayoutStoreProvider>
+)

src/Form/components/FormSection.tsx

@@ -0,0 +1,117 @@
+import React, { type ReactNode } from 'react'
+import { Stack, Group, Paper, Button, Title, Box } from '@mantine/core'
+import { useFormLayoutStore } from '../store/FormLayout.store'
+
+interface FormSectionProps {
+  type: 'header' | 'body' | 'footer' | 'error'
+  title?: string
+  rightSection?: ReactNode
+  children?: ReactNode
+  buttonTitles?: { submit?: string; cancel?: string }
+  className?: string
+  [key: string]: any
+}
+
+export const FormSection: React.FC<FormSectionProps> = ({
+  type,
+  title,
+  rightSection,
+  children,
+  buttonTitles,
+  className,
+  ...others
+}) => {
+  const { onCancel, onSubmit, request, loading } = useFormLayoutStore((state) => ({
+    onCancel: state.onCancel,
+    onSubmit: state.onSubmit,
+    request: state.request,
+    loading: state.loading,
+  }))
+
+  if (type === 'header') {
+    return (
+      <Group
+        justify="space-between"
+        p="md"
+        style={{
+          borderBottom: '1px solid var(--mantine-color-gray-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        <Title order={4} size="h5">
+          {title}
+        </Title>
+        {rightSection && <Box>{rightSection}</Box>}
+      </Group>
+    )
+  }
+
+  if (type === 'body') {
+    return (
+      <Stack
+        gap="md"
+        p="md"
+        style={{ flex: 1, overflow: 'auto' }}
+        className={className}
+        {...others}
+      >
+        {children}
+      </Stack>
+    )
+  }
+
+  if (type === 'footer') {
+    return (
+      <Group
+        justify="flex-end"
+        gap="xs"
+        p="md"
+        style={{
+          borderTop: '1px solid var(--mantine-color-gray-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        {children}
+        {request !== 'view' && (
+          <>
+            <Button
+              variant="default"
+              onClick={onCancel}
+              disabled={loading}
+            >
+              {buttonTitles?.cancel ?? 'Cancel'}
+            </Button>
+            <Button
+              type="submit"
+              onClick={onSubmit}
+              loading={loading}
+            >
+              {buttonTitles?.submit ?? (request === 'delete' ? 'Delete' : 'Save')}
+            </Button>
+          </>
+        )}
+      </Group>
+    )
+  }
+
+  if (type === 'error') {
+    return (
+      <Paper
+        p="sm"
+        m="md"
+        style={{
+          backgroundColor: 'var(--mantine-color-red-0)',
+          border: '1px solid var(--mantine-color-red-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        {children}
+      </Paper>
+    )
+  }
+
+  return null
+}

src/Form/components/SuperForm.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef, type ReactElement, type Ref } from 'react'
+import { FormProvider, useForm, type FieldValues } from 'react-hook-form'
+import { Provider } from '../store/SuperForm.store'
+import type { SuperFormProps, SuperFormRef } from '../types'
+import Layout from './SuperFormLayout'
+import SuperFormPersist from './SuperFormPersist'
+
+const SuperForm = <T extends FieldValues>(
+  { useFormProps, gridRef, children, persist, ...others }: SuperFormProps<T>,
+  ref
+) => {
+  const form = useForm<T>({ ...useFormProps })
+
+  return (
+    <Provider {...others}>
+      <FormProvider {...form}>
+        {persist && (
+          <SuperFormPersist storageKey={typeof persist === 'object' ? persist.storageKey : null} />
+        )}
+        <Layout<T> gridRef={gridRef} ref={ref}>
+          {children}
+        </Layout>
+      </FormProvider>
+    </Provider>
+  )
+}
+
+const FRSuperForm = forwardRef(SuperForm) as <T extends FieldValues>(
+  props: SuperFormProps<T> & {
+    ref?: Ref<SuperFormRef<T>>
+  }
+) => ReactElement
+
+export default FRSuperForm

src/Form/components/SuperFormLayout.tsx

@@ -0,0 +1,364 @@
+import React, {
+  forwardRef,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  type MutableRefObject,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import { useFormContext, useFormState, type FieldValues, type UseFormReturn } from 'react-hook-form'
+import { v4 as uuid } from 'uuid'
+import {
+  ActionIcon,
+  Group,
+  List,
+  LoadingOverlay,
+  Paper,
+  Spoiler,
+  Stack,
+  Title,
+  Tooltip,
+  Transition,
+} from '@mantine/core'
+import { IconChevronsLeft, IconChevronsRight } from '@tabler/icons-react'
+import { useUncontrolled } from '@mantine/hooks'
+import useRemote from '../hooks/useRemote'
+import { useStore } from '../store/SuperForm.store'
+import classes from '../styles/Form.module.css'
+import { Form } from './Form'
+import { FormLayout } from './FormLayout'
+import type { GridRef, SuperFormRef } from '../types'
+
+const SuperFormLayout = <T extends FieldValues>(
+  {
+    children,
+    gridRef,
+  }: {
+    children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+    gridRef?: MutableRefObject<GridRef<any> | null>
+  },
+  ref
+) => {
+  // Component store State
+  const {
+    layoutProps,
+    meta,
+    nested,
+    onBeforeSubmit,
+    onCancel,
+    onLayoutMounted,
+    onLayoutUnMounted,
+    onResetForm,
+    onSubmit,
+    primeData,
+    request,
+    tableName,
+    value,
+  } = useStore((state) => ({
+    extraButtons: state.extraButtons,
+    layoutProps: state.layoutProps,
+    meta: state.meta,
+    nested: state.nested,
+    onBeforeSubmit: state.onBeforeSubmit,
+    onCancel: state.onCancel,
+    onLayoutMounted: state.onLayoutMounted,
+    onLayoutUnMounted: state.onLayoutUnMounted,
+    onResetForm: state.onResetForm,
+    onSubmit: state.onSubmit,
+    primeData: state.primeData,
+    request: state.request,
+    tableName: state.remote?.tableName,
+    value: state.value,
+  }))
+
+  const [_opened, _setOpened] = useUncontrolled({
+    value: layoutProps?.bodyRightSection?.opened,
+    defaultValue: false,
+    onChange: layoutProps?.bodyRightSection?.setOpened,
+  })
+
+  // Component Hooks
+  const form = useFormContext<T, any, undefined>()
+  const formState = useFormState({ control: form.control })
+
+  const { isFetching, mutateAsync, error, queryKey } = useRemote(gridRef)
+
+  // Component variables
+  const formUID = useMemo(() => {
+    return meta?.id ?? uuid()
+  }, [])
+
+  const requestString = request?.charAt(0).toUpperCase() + request?.slice(1)
+
+  const renderRightSection = (
+    <>
+      <Tooltip label={`${_opened ? 'Close' : 'Open'} Right Section`} withArrow>
+        <ActionIcon
+          style={{
+            position: 'absolute',
+            right: 12,
+            zIndex: 5,
+
+            display: layoutProps?.bodyRightSection?.hideToggleButton ? 'none' : 'block',
+          }}
+          variant='filled'
+          size='sm'
+          onClick={() => _setOpened(!_opened)}
+          radius='6'
+          m={2}
+        >
+          {_opened ? <IconChevronsRight /> : <IconChevronsLeft />}
+        </ActionIcon>
+      </Tooltip>
+      <Group wrap='nowrap' h='100%' align='flex-start' gap={2} w={'100%'}>
+        <Stack gap={0} h='100%' style={{ flex: 1 }}>
+          {typeof children === 'function' ? children({ ...form }) : children}
+        </Stack>
+        <Transition transition='slide-left' mounted={_opened}>
+          {(transitionStyles) => (
+            <Paper
+              style={transitionStyles}
+              h='100%'
+              w={layoutProps?.bodyRightSection?.w}
+              shadow='xs'
+              radius='xs'
+              mr='xs'
+              mt='xs'
+              ml={0}
+              {...layoutProps?.bodyRightSection?.paperProps}
+            >
+              {layoutProps?.bodyRightSection?.render?.({
+                form,
+                formValue: form.getValues(),
+                isFetching,
+                opened: _opened,
+                queryKey,
+                setOpened: _setOpened,
+              })}
+            </Paper>
+          )}
+        </Transition>
+      </Group>
+    </>
+  )
+
+  // Component Callback Functions
+  const onFormSubmit = async (data: T | any, closeForm: boolean = true) => {
+    const res: any =
+      typeof onBeforeSubmit === 'function'
+        ? await mutateAsync?.(await onBeforeSubmit(data, request, form))
+        : await mutateAsync?.(data)
+
+    if ((tableName?.length ?? 0) > 0) {
+      if (res?.ok || (res?.status >= 200 && res?.status < 300)) {
+        onSubmit?.(res?.data, request, data, form, closeForm)
+      } else {
+        form.setError('root', {
+          message: res.status === 401 ? 'Username or password is incorrect' : res?.error,
+        })
+      }
+    } else {
+      onSubmit?.(data, request, data, form, closeForm)
+    }
+  }
+
+  // Component use Effects
+  useEffect(() => {
+    if (request === 'insert') {
+      if (onResetForm) {
+        onResetForm(primeData, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(primeData)
+      }
+    } else if ((request === 'change' || request === 'delete') && (tableName?.length ?? 0) === 0) {
+      if (onResetForm) {
+        onResetForm(value, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(value)
+      }
+    }
+    onLayoutMounted?.()
+    return onLayoutUnMounted
+  }, [
+    request,
+    primeData,
+    tableName,
+    value,
+    form.reset,
+    onResetForm,
+    onLayoutMounted,
+    onLayoutUnMounted,
+  ])
+
+  useEffect(() => {
+    if (
+      (Object.keys(formState.errors)?.length > 0 || error) &&
+      _opened === false &&
+      layoutProps?.showErrorList !== false
+    ) {
+      _setOpened(true)
+    }
+  }, [Object.keys(formState.errors)?.length > 0, error, layoutProps?.showErrorList])
+
+  useImperativeHandle<SuperFormRef<T>, SuperFormRef<T>>(ref, () => ({
+    form,
+    mutation: { isFetching, mutateAsync, error },
+    submit: (closeForm: boolean = true, afterSubmit?: (data: T | any) => void) => {
+      return form.handleSubmit(async (data: T | any) => {
+        await onFormSubmit(data, closeForm)
+        afterSubmit?.(data)
+      })()
+    },
+    queryKey,
+    getFormState: () => formState,
+  }))
+
+  return (
+    <form
+      name={formUID}
+      onSubmit={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+        form.handleSubmit((data: T | any) => {
+          onFormSubmit(data)
+        })(e)
+      }}
+      style={{ height: '100%' }}
+      className={request === 'view' ? classes.disabled : ''}
+    >
+      {/* <LoadingOverlay
+        visible={isFetching}
+        overlayProps={{
+          backgroundOpacity: 0.5,
+        }}
+      /> */}
+      {layoutProps?.noLayout ? (
+        typeof layoutProps?.bodyRightSection?.render === 'function' ? (
+          renderRightSection
+        ) : typeof children === 'function' ? (
+          <>
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{
+                backgroundOpacity: 0.5,
+              }}
+            />
+            {children({ ...form })}
+          </>
+        ) : (
+          <>
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{
+                backgroundOpacity: 0.5,
+              }}
+            />
+            {children}
+          </>
+        )
+      ) : (
+        <FormLayout
+          dirty={formState.isDirty}
+          loading={isFetching}
+          onCancel={() => onCancel?.(request)}
+          onSubmit={form.handleSubmit((data: T | any) => {
+            onFormSubmit(data)
+          })}
+          request={request}
+          modal={false}
+          nested={nested}
+        >
+          {!layoutProps?.noHeader && (
+            <Form.Section
+              type='header'
+              title={`${layoutProps?.title || requestString}`}
+              rightSection={layoutProps?.rightSection}
+            />
+          )}
+          {(Object.keys(formState.errors)?.length > 0 || error) && (
+            <Form.Section
+              className={classes.sticky}
+              buttonTitles={layoutProps?.buttonTitles}
+              type='error'
+            >
+              <Title order={6} size='sm' c='red'>
+                {(error?.message?.length ?? 0) > 0
+                  ? 'Server Error'
+                  : 'Required information is incomplete*'}
+              </Title>
+              {(error as any)?.response?.data?.msg ||
+                (error as any)?.response?.data?._error ||
+                error?.message}
+              {layoutProps?.showErrorList !== false && (
+                <Spoiler maxHeight={50} showLabel='Show more' hideLabel='Hide'>
+                  <List
+                    size='xs'
+                    style={{
+                      color: 'light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-2))',
+                    }}
+                  >
+                    {getErrorMessages(formState.errors)}
+                  </List>
+                </Spoiler>
+              )}
+            </Form.Section>
+          )}
+          {typeof layoutProps?.bodyRightSection?.render === 'function' ? (
+            <Form.Section type='body' {...layoutProps?.bodySectionProps}>
+              {renderRightSection}
+            </Form.Section>
+          ) : (
+            <Form.Section type='body' {...layoutProps?.bodySectionProps}>
+              {typeof children === 'function' ? children({ ...form }) : children}
+            </Form.Section>
+          )}
+          {!layoutProps?.noFooter && (
+            <Form.Section
+              className={classes.sticky}
+              buttonTitles={layoutProps?.buttonTitles}
+              type='footer'
+              {...(typeof layoutProps?.footerSectionProps === 'function'
+                ? layoutProps?.footerSectionProps(ref as RefObject<SuperFormRef<T>>)
+                : layoutProps?.footerSectionProps)}
+            >
+              {typeof layoutProps?.extraButtons === 'function'
+                ? layoutProps?.extraButtons(form)
+                : layoutProps?.extraButtons}
+            </Form.Section>
+          )}
+        </FormLayout>
+      )}
+    </form>
+  )
+}
+
+const getErrorMessages = (errors: any): ReactNode | null => {
+  return Object.keys(errors ?? {}).map((key) => {
+    if (typeof errors[key] === 'object' && key !== 'ref') {
+      return getErrorMessages(errors[key])
+    }
+    if (key !== 'message') {
+      return null
+    }
+
+    return <List.Item key={key}>{errors[key]}</List.Item>
+  })
+}
+
+const FRSuperFormLayout = forwardRef(SuperFormLayout) as <T extends FieldValues>(
+  props: {
+    children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+    gridRef?: MutableRefObject<GridRef | null>
+  } & {
+    ref?: Ref<SuperFormRef<T>>
+  }
+) => ReactElement
+
+export default FRSuperFormLayout

src/Form/components/SuperFormPersist.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { useFormContext, useFormState } from 'react-hook-form'
+import { useDebouncedCallback } from '@mantine/hooks'
+import useSubscribe from '../hooks/use-subscribe'
+import { useSuperFormStore } from '../store/SuperForm.store'
+import { openConfirmModal } from '../utils/openConfirmModal'
+
+const SuperFormPersist = ({ storageKey }: { storageKey?: string | null }) => {
+  // Component store State
+  const [persistKey, setPersistKey] = useState<string>('')
+  const { isDirty, isReady, isSubmitted } = useFormState()
+
+  const { remote, request } = useSuperFormStore((state) => ({
+    request: state.request,
+    remote: state.remote,
+  }))
+
+  // Component Hooks
+  const { reset, setValue } = useFormContext()
+
+  const handleFormChange = useDebouncedCallback(({ values }) => {
+    setPersistKey(() => {
+      const key = `superform-persist-${storageKey?.length > 0 ? storageKey : `${remote?.tableName || 'local'}-${request}-${values[remote?.primaryKey] ?? ''}`}`
+
+      if (!isDirty) {
+        return key
+      }
+
+      window.localStorage.setItem(key, JSON.stringify(values))
+
+      return key
+    })
+  }, 250)
+
+  useSubscribe('', handleFormChange)
+
+  // Component use Effects
+  useEffect(() => {
+    if (isReady && persistKey) {
+      const data = window.localStorage.getItem(persistKey)
+      if (!data) {
+        return
+      }
+
+      if (isSubmitted) {
+        window.localStorage.removeItem(persistKey)
+        return
+      }
+
+      openConfirmModal(
+        () => {
+          reset(JSON.parse(data))
+          setValue('_dirty', true, { shouldDirty: true })
+        },
+        () => {
+          window.localStorage.removeItem(persistKey)
+        },
+        'Do you want to restore the previous data that was not submitted?'
+      )
+    }
+  }, [isReady, isSubmitted, persistKey])
+
+  return null
+}
+
+export default SuperFormPersist

src/Form/config/ApiConfig.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, ReactNode, useState } from 'react'
+
+interface ApiConfigContextValue {
+  apiURL: string
+  setApiURL: (url: string) => void
+}
+
+const ApiConfigContext = createContext<ApiConfigContextValue | null>(null)
+
+interface ApiConfigProviderProps {
+  children: ReactNode
+  defaultApiURL?: string
+}
+
+export const ApiConfigProvider: React.FC<ApiConfigProviderProps> = ({
+  children,
+  defaultApiURL = '',
+}) => {
+  const [apiURL, setApiURL] = useState(defaultApiURL)
+
+  return (
+    <ApiConfigContext.Provider value={{ apiURL, setApiURL }}>
+      {children}
+    </ApiConfigContext.Provider>
+  )
+}
+
+export const useApiConfig = (): ApiConfigContextValue => {
+  const context = useContext(ApiConfigContext)
+  if (!context) {
+    throw new Error('useApiConfig must be used within ApiConfigProvider')
+  }
+  return context
+}
+
+/**
+ * Hook to get API URL with optional override
+ * @param overrideURL - Optional URL to use instead of context value
+ */
+export const useApiURL = (overrideURL?: string): string => {
+  const { apiURL } = useApiConfig()
+  return overrideURL ?? apiURL
+}

src/Form/containers/Drawer/SuperFormDrawer.tsx

@@ -0,0 +1,146 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import { IconX } from '@tabler/icons-react'
+import type { FieldValues } from 'react-hook-form'
+import { ActionIcon, Drawer } from '@mantine/core'
+import type { SuperFormDrawerProps, SuperFormDrawerRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormDrawer = <T extends FieldValues>(
+  { drawerProps, noCloseOnSubmit, ...formProps }: SuperFormDrawerProps<T>,
+  ref: Ref<SuperFormDrawerRef<T>>
+) => {
+  // Component Refs
+  const formRef = useRef<SuperFormRef<T>>(null)
+  const drawerRef = useRef<HTMLDivElement>(null)
+
+  // Component store State
+  // Tell drawer that form layout mounted to fix refs
+  const [layoutMounted, setLayoutMounted] = useState(false)
+
+  // Component Callback Functions
+  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
+    formProps?.onSubmit?.(data, request, formData, form, closeForm)
+
+    if (request === 'delete') {
+      drawerProps?.onClose()
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        drawerProps?.onClose()
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        drawerProps?.onClose()
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      drawerProps?.onClose()
+      formProps?.onCancel?.(request)
+    }
+  }
+
+  const onLayoutMounted = useCallback(() => {
+    setLayoutMounted(true)
+    formProps?.onLayoutMounted?.()
+  }, [formProps?.onLayoutMounted])
+
+  const onLayoutUnMounted = useCallback(() => {
+    setLayoutMounted(false)
+    formProps?.onLayoutUnMounted?.()
+  }, [formProps?.onLayoutUnMounted])
+
+  // Component use Effects
+  useImperativeHandle<SuperFormDrawerRef<T>, SuperFormDrawerRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      drawer: drawerRef.current,
+    } as SuperFormDrawerRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Drawer
+      ref={drawerRef}
+      onClose={onCancel}
+      closeOnClickOutside={false}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape' && drawerProps.closeOnEscape !== false) {
+          e.stopPropagation()
+          onCancel(formProps.request)
+        }
+      }}
+      overlayProps={{ backgroundOpacity: 0.5, blur: 0.5 }}
+      padding={6}
+      position='right'
+      transitionProps={{
+        transition: 'slide-left',
+        duration: 150,
+        timingFunction: 'linear',
+      }}
+      size={500}
+      styles={{
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'stretch',
+        },
+        body: {
+          minHeight: '100px',
+          flexGrow: 1,
+        },
+      }}
+      keepMounted={false}
+      {...drawerProps}
+      closeOnEscape={false}
+      withCloseButton={false}
+      title={null}
+    >
+      <SuperForm<T>
+        {...formProps}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        onLayoutMounted={onLayoutMounted}
+        onLayoutUnMounted={onLayoutUnMounted}
+        ref={formRef}
+        layoutProps={{
+          ...formProps?.layoutProps,
+          rightSection: (
+            <ActionIcon
+              size='xs'
+              onClick={() => {
+                onCancel(formProps?.request)
+              }}
+            >
+              <IconX size={18} />
+            </ActionIcon>
+          ),
+          title:
+            (drawerProps.title as string) ??
+            formProps?.layoutProps?.title ??
+            (formProps?.request as string),
+        }}
+      />
+    </Drawer>
+  )
+}
+
+const FRSuperFormDrawer = forwardRef(SuperFormDrawer) as <T extends FieldValues>(
+  props: SuperFormDrawerProps<T> & { ref?: Ref<SuperFormDrawerRef<T>> }
+) => ReactElement
+
+export default FRSuperFormDrawer

src/Form/containers/Modal/SuperFormModal.tsx

@@ -0,0 +1,105 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Modal, ScrollArea } from '@mantine/core'
+import type { SuperFormModalProps, SuperFormModalRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormModal = <T extends FieldValues>(
+  { modalProps, noCloseOnSubmit, ...formProps }: SuperFormModalProps<T>,
+  ref: Ref<SuperFormModalRef<T>>
+) => {
+  // Component Refs
+  const modalRef = useRef<HTMLDivElement>(null)
+  const formRef = useRef<SuperFormRef<T>>(null)
+
+  // Component store State
+  // Tell drawer that form layout mounted to fix refs
+  const [layoutMounted, setLayoutMounted] = useState(false)
+
+  // Component Callback Functions
+  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
+    formProps?.onSubmit?.(data, request, formData, form, closeForm)
+
+    if (request === 'delete') {
+      modalProps?.onClose()
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        modalProps?.onClose()
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        modalProps?.onClose()
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      modalProps?.onClose()
+      formProps?.onCancel?.(request)
+    }
+  }
+
+  const onLayoutMounted = useCallback(() => {
+    setLayoutMounted(true)
+    formProps?.onLayoutMounted?.()
+  }, [formProps?.onLayoutMounted])
+
+  const onLayoutUnMounted = useCallback(() => {
+    setLayoutMounted(false)
+    formProps?.onLayoutUnMounted?.()
+  }, [formProps?.onLayoutUnMounted])
+
+  // Component use Effects
+  useImperativeHandle<SuperFormModalRef<T>, SuperFormModalRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      modal: modalRef.current,
+    } as SuperFormModalRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Modal
+      ref={modalRef}
+      closeOnClickOutside={false}
+      overlayProps={{
+        backgroundOpacity: 0.5,
+        blur: 4,
+      }}
+      padding='sm'
+      scrollAreaComponent={ScrollArea.Autosize}
+      size={500}
+      keepMounted={false}
+      {...modalProps}
+    >
+      <SuperForm<T>
+        {...formProps}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        onLayoutMounted={onLayoutMounted}
+        onLayoutUnMounted={onLayoutUnMounted}
+        ref={formRef}
+      />
+    </Modal>
+  )
+}
+
+const FRSuperFormModal = forwardRef(SuperFormModal) as <T extends FieldValues>(
+  props: SuperFormModalProps<T> & { ref?: Ref<SuperFormModalRef<T>> }
+) => ReactElement
+
+export default FRSuperFormModal

src/Form/containers/Popover/SuperFormPopover.tsx

@@ -0,0 +1,116 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Box, Popover } from '@mantine/core'
+import { useUncontrolled } from '@mantine/hooks'
+import type { SuperFormPopoverProps, SuperFormPopoverRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormPopover = <T extends FieldValues>(
+  { popoverProps, target, noCloseOnSubmit, ...formProps }: SuperFormPopoverProps<T>,
+  ref: Ref<SuperFormPopoverRef<T>>
+) => {
+  // Component Refs
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const formRef = useRef<SuperFormRef<T>>(null)
+
+  // Component store State
+  // Tell drawer that form layout mounted to fix refs
+  const [layoutMounted, setLayoutMounted] = useState(false)
+
+  // Component Hooks
+  const [_value, _onChange] = useUncontrolled({
+    value: popoverProps?.opened,
+    onChange: popoverProps?.onChange,
+  })
+
+  // Component Callback Functions
+  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
+    formProps?.onSubmit?.(data, request, formData, form, closeForm)
+
+    if (request === 'delete') {
+      _onChange(false)
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        _onChange(false)
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        _onChange(false)
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      _onChange(false)
+      formProps?.onCancel?.(request)
+    }
+  }
+
+  const onLayoutMounted = useCallback(() => {
+    setLayoutMounted(true)
+    formProps?.onLayoutMounted?.()
+  }, [formProps?.onLayoutMounted])
+
+  const onLayoutUnMounted = useCallback(() => {
+    setLayoutMounted(false)
+    formProps?.onLayoutUnMounted?.()
+  }, [formProps?.onLayoutUnMounted])
+
+  // Component use Effects
+  useImperativeHandle<SuperFormPopoverRef<T>, SuperFormPopoverRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      popover: popoverRef.current,
+    } as SuperFormPopoverRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Popover
+      closeOnClickOutside={false}
+      onClose={() => _onChange(false)}
+      opened={_value}
+      position='left'
+      radius='md'
+      withArrow
+      withinPortal
+      zIndex={200}
+      keepMounted={false}
+      {...popoverProps}
+    >
+      <Popover.Target>
+        <Box onClick={() => _onChange(true)}>{target}</Box>
+      </Popover.Target>
+      <Popover.Dropdown p={0} m={0} ref={popoverRef}>
+        <SuperForm
+          {...formProps}
+          onCancel={onCancel}
+          onSubmit={onSubmit}
+          onLayoutMounted={onLayoutMounted}
+          onLayoutUnMounted={onLayoutUnMounted}
+          ref={formRef}
+        />
+      </Popover.Dropdown>
+    </Popover>
+  )
+}
+
+const FRSuperFormPopover = forwardRef(SuperFormPopover) as <T extends FieldValues>(
+  props: SuperFormPopoverProps<T> & { ref?: Ref<SuperFormPopoverRef<T>> }
+) => ReactElement
+
+export default FRSuperFormPopover

src/Form/hooks/use-drawer-form-state.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { SuperFormProps, RequestType, ExtendedDrawerProps } from '../types'
+
+interface UseDrawerFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  drawerProps: Partial<ExtendedDrawerProps>
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useDrawerFormState = <T extends FieldValues>(
+  props?: Partial<UseDrawerFormState<T>>
+): {
+  formProps: UseDrawerFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UseDrawerFormState<T>>>
+  open: (props: Partial<UseDrawerFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseDrawerFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        drawerProps: { ...curr.drawerProps, opened: false },
+      })),
+    drawerProps: { opened: false, onClose: () => {}, ...props?.drawerProps },
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UseDrawerFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          drawerProps: {
+            ...curr.drawerProps,
+            ...props?.drawerProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        drawerProps: { ...curr.drawerProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        drawerProps: { ...curr.drawerProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default useDrawerFormState
+export type { UseDrawerFormState }

src/Form/hooks/use-modal-form-state.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { ModalProps } from '@mantine/core'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UseModalFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  modalProps: ModalProps
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useModalFormState = <T extends FieldValues>(
+  props?: Partial<UseModalFormState<T>>
+): {
+  formProps: UseModalFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UseModalFormState<T>>>
+  open: (props: Partial<UseModalFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseModalFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        modalProps: { ...curr.modalProps, opened: false },
+      })),
+    modalProps: { opened: false, onClose: () => {}, ...props?.modalProps },
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UseModalFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          modalProps: {
+            ...curr.modalProps,
+            ...props?.modalProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        modalProps: { ...curr.modalProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        modalProps: { ...curr.modalProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default useModalFormState
+export type { UseModalFormState }

src/Form/hooks/use-popover-form-state.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { PopoverProps } from '@mantine/core'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UsePopoverFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  popoverProps: Omit<PopoverProps, 'children'>
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const usePopoverFormState = <T extends FieldValues>(
+  props?: Partial<UsePopoverFormState<T>>
+): {
+  formProps: UsePopoverFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UsePopoverFormState<T>>>
+  open: (props: Partial<UsePopoverFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UsePopoverFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    popoverProps: { opened: false, onClose: () => {}, ...props?.popoverProps },
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        popoverProps: { ...curr.popoverProps, opened: false },
+      })),
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UsePopoverFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          popoverProps: {
+            ...curr.popoverProps,
+            ...props?.popoverProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        popoverProps: { ...curr.popoverProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        popoverProps: { ...curr.popoverProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default usePopoverFormState
+export type { UsePopoverFormState }

src/Form/hooks/use-subscribe.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import {
+  EventType,
+  FieldValues,
+  FormState,
+  InternalFieldName,
+  Path,
+  ReadFormState,
+  useFormContext,
+  UseFormReturn,
+} from 'react-hook-form'
+
+const useSubscribe = <T extends FieldValues>(
+  name: Path<T> | readonly Path<T>[] | undefined,
+  callback: (
+    data: Partial<FormState<T>> & {
+      values: FieldValues
+      name?: InternalFieldName
+      type?: EventType
+    },
+    form?: UseFormReturn<T, any, T>
+  ) => void,
+  formState?: ReadFormState,
+  deps?: unknown[]
+) => {
+  const form = useFormContext<T>()
+
+  return useEffect(() => {
+    const unsubscribe = form.subscribe({
+      name,
+      callback: (data) => callback(data, form),
+      formState: { values: true, ...formState },
+      exact: true,
+    })
+
+    return unsubscribe
+  }, [form.subscribe, ...(deps || [])])
+}
+
+export default useSubscribe

src/Form/hooks/use-super-form-state.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UseSuperFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useSuperFormState = <T extends FieldValues>(
+  props?: UseSuperFormState<T>
+): {
+  formProps: UseSuperFormState<any>
+  setFormProps: React.Dispatch<React.SetStateAction<UseSuperFormState<T>>>
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseSuperFormState<T>>({
+    request: 'insert',
+    ...props,
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+      }))
+    },
+  }
+}
+
+export default useSuperFormState
+export type { UseSuperFormState }

src/Form/hooks/useRemote.tsx

@@ -0,0 +1,123 @@
+import { useEffect, type MutableRefObject } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useFormContext, useFormState, type FieldValues } from 'react-hook-form'
+import { useStore } from '../store/SuperForm.store'
+import { useApiURL } from '../config/ApiConfig'
+import { getNestedValue } from '../utils/getNestedValue'
+import { fetchClient, type FetchResponse, FetchError } from '../utils/fetchClient'
+import type { GridRef } from '../types'
+
+const useRemote = <T extends FieldValues>(gridRef?: MutableRefObject<GridRef<any> | null>) => {
+  // Component store State
+  const { onResetForm, remote, request, useMutationOptions, useQueryOptions, value } = useStore(
+    (state) => ({
+      onResetForm: state.onResetForm,
+      remote: state.remote,
+      request: state.request,
+      useMutationOptions: state.useMutationOptions,
+      useQueryOptions: state.useQueryOptions,
+      value: state.value,
+    })
+  )
+
+  // Component Hooks
+  const form = useFormContext<T>()
+  const { isDirty } = useFormState({ control: form.control })
+
+  // Component use Effects
+  const qc = useQueryClient()
+
+  // Get API URL from context or override
+  const contextApiURL = useApiURL()
+
+  const id = remote?.primaryKey?.includes('.')
+    ? getNestedValue(remote?.primaryKey, value)
+    : value?.[remote?.primaryKey ?? '']
+
+  const queryKey = useQueryOptions?.queryKey || [remote?.tableName, id]
+
+  const enabled =
+    useQueryOptions?.enabled ||
+    !!(
+      (remote?.enabled ?? true) &&
+      (remote?.tableName ?? '').length > 0 &&
+      (request === 'change' || request === 'delete') &&
+      String(id) !== 'undefined' &&
+      (String(id)?.length ?? 0) > 0
+    )
+
+  let url = remote?.apiURL ?? `${contextApiURL}/${remote?.tableName}`
+  url = url?.endsWith('/') ? url.substring(0, url.length - 1) : url
+
+  const { isSuccess, status, data, isFetching } = useQuery<FetchResponse<T>>({
+    queryKey,
+    queryFn: () => fetchClient.get<T>(`${url}/${id}`, remote?.apiOptions),
+    enabled,
+    refetchOnMount: 'always',
+    refetchOnReconnect: !isDirty,
+    refetchOnWindowFocus: !isDirty,
+    staleTime: 0,
+    gcTime: 0,
+    ...useQueryOptions,
+  })
+
+  const changeMut = useMutation({
+    // @ts-ignore
+    mutationFn: (mutVal: T) => {
+      if (!remote?.tableName || !remote?.primaryKey) {
+        return Promise.resolve(null)
+      }
+
+      return request === 'insert'
+        ? fetchClient.post(url, mutVal, remote?.apiOptions)
+        : request === 'change'
+          ? fetchClient.post(`${url}/${id}`, mutVal, remote?.apiOptions)
+          : request === 'delete'
+            ? fetchClient.delete(`${url}/${id}`, remote?.apiOptions)
+            : Promise.resolve(null)
+    },
+    onSettled: (response: FetchResponse | null) => {
+      qc?.invalidateQueries({ queryKey: [remote?.tableName] })
+
+      if (request !== 'delete' && response) {
+        if (onResetForm) {
+          onResetForm(response?.data, form).then(() => {
+            form.reset(response?.data, { keepDirty: false })
+          })
+        } else {
+          form.reset(response?.data, { keepDirty: false })
+        }
+      }
+
+      gridRef?.current?.refresh?.()
+      // @ts-ignore
+      gridRef?.current?.selectRow?.(response?.data?.[remote?.primaryKey ?? ''])
+    },
+    ...useMutationOptions,
+  })
+
+  useEffect(() => {
+    if (isSuccess && status === 'success' && enabled && !isFetching) {
+      if (!Object.keys(data?.data ?? {}).includes(remote?.primaryKey ?? '')) {
+        throw new Error('Primary key not found in remote data')
+      }
+
+      if (onResetForm) {
+        onResetForm(data?.data, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(data?.data)
+      }
+    }
+  }, [isSuccess, status, enabled, isFetching])
+
+  return {
+    error: changeMut.error as FetchError,
+    isFetching: (enabled ? isFetching : false) || changeMut?.isPending,
+    mutateAsync: changeMut.mutateAsync,
+    queryKey,
+  }
+}
+
+export default useRemote

src/Form/store/FormLayout.store.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, type ReactNode } from 'react'
+import { create } from 'zustand'
+import type { RequestType } from '../types'
+
+interface FormLayoutState {
+  request: RequestType
+  loading: boolean
+  dirty: boolean
+  onCancel?: () => void
+  onSubmit?: () => void
+  setState: (key: string, value: any) => void
+}
+
+const createFormLayoutStore = (initialProps: any) =>
+  create<FormLayoutState>((set) => ({
+    request: initialProps.request || 'insert',
+    loading: initialProps.loading || false,
+    dirty: initialProps.dirty || false,
+    onCancel: initialProps.onCancel,
+    onSubmit: initialProps.onSubmit,
+    setState: (key, value) => set({ [key]: value }),
+  }))
+
+const FormLayoutStoreContext = createContext<ReturnType<typeof createFormLayoutStore> | null>(null)
+
+export const FormLayoutStoreProvider: React.FC<{ children: ReactNode; [key: string]: any }> = ({
+  children,
+  ...props
+}) => {
+  const storeRef = React.useRef<ReturnType<typeof createFormLayoutStore>>()
+  if (!storeRef.current) {
+    storeRef.current = createFormLayoutStore(props)
+  }
+
+  return (
+    <FormLayoutStoreContext.Provider value={storeRef.current}>
+      {children}
+    </FormLayoutStoreContext.Provider>
+  )
+}
+
+export const useFormLayoutStore = <T,>(selector: (state: FormLayoutState) => T): T => {
+  const store = useContext(FormLayoutStoreContext)
+  if (!store) {
+    throw new Error('useFormLayoutStore must be used within FormLayoutStoreProvider')
+  }
+  return store(selector)
+}

src/Form/store/SuperForm.store.tsx

@@ -0,0 +1,22 @@
+import type { SuperFormProviderProps } from '../types'
+import { createSyncStore } from '@warkypublic/zustandsyncstore'
+
+const { Provider, useStore } = createSyncStore<any, SuperFormProviderProps>((set) => ({
+  request: 'insert',
+  setRequest: (request) => {
+    set({ request })
+  },
+
+  value: undefined,
+  setValue: (value) => {
+    set({ value })
+  },
+
+  noCloseOnSubmit: false,
+  setNoCloseOnSubmit: (noCloseOnSubmit) => {
+    set({ noCloseOnSubmit })
+  },
+}))
+
+export { Provider, useStore }
+export const useSuperFormStore = useStore

src/Form/styles/Form.module.css

@@ -0,0 +1,10 @@
+.disabled {
+  pointer-events: none;
+  opacity: 0.9;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+}

src/Form/types/form.types.ts

@@ -0,0 +1,135 @@
+import type { UseMutationOptions, UseMutationResult, UseQueryOptions } from '@tanstack/react-query'
+import type { FieldValues, UseFormProps, UseFormReturn, UseFormStateReturn } from 'react-hook-form'
+import type { ModalProps, PaperProps, PopoverProps, DrawerProps } from '@mantine/core'
+import type { RemoteConfig } from './remote.types'
+
+export type RequestType = 'insert' | 'change' | 'view' | 'select' | 'delete' | 'get' | 'set'
+
+// Grid integration types (simplified - removes BTGlideRef dependency)
+export interface GridRef<T = any> {
+  refresh?: () => void
+  selectRow?: (id: any) => void
+}
+
+export interface FormSectionBodyProps {
+  // Add properties as needed from original FormLayout
+  [key: string]: any
+}
+
+export interface FormSectionFooterProps {
+  // Add properties as needed from original FormLayout
+  [key: string]: any
+}
+
+export interface BodyRightSection<T extends FieldValues> {
+  opened?: boolean
+  setOpened?: (opened: boolean) => void
+  w: number | string
+  hideToggleButton?: boolean
+  paperProps?: PaperProps
+  render: (props: {
+    form: UseFormReturn<any, any, undefined>
+    formValue: T
+    isFetching: boolean
+    opened: boolean
+    queryKey: any
+    setOpened: (opened: boolean) => void
+  }) => React.ReactNode
+}
+
+export interface SuperFormLayoutProps<T extends FieldValues> {
+  buttonTitles?: { submit?: string; cancel?: string }
+  extraButtons?: React.ReactNode | ((form: UseFormReturn<any, any, undefined>) => React.ReactNode)
+  noFooter?: boolean
+  noHeader?: boolean
+  noLayout?: boolean
+  bodySectionProps?: Partial<FormSectionBodyProps>
+  footerSectionProps?:
+    | Partial<FormSectionFooterProps>
+    | ((ref: React.RefObject<SuperFormRef<T>>) => Partial<FormSectionFooterProps>)
+  rightSection?: React.ReactNode
+  bodyRightSection?: BodyRightSection<T>
+  title?: string
+  showErrorList?: boolean
+}
+
+export interface CommonFormProps<T extends FieldValues> {
+  gridRef?: React.MutableRefObject<GridRef<any> | null>
+  layoutProps?: SuperFormLayoutProps<T>
+  meta?: { [key: string]: any }
+  nested?: boolean
+  onCancel?: (request: RequestType) => void
+  onLayoutMounted?: () => void
+  onLayoutUnMounted?: () => void
+  onResetForm?: (data: T, form?: UseFormReturn<any, any, undefined>) => Promise<T>
+  onBeforeSubmit?: (
+    data: T,
+    request: RequestType,
+    form?: UseFormReturn<any, any, undefined>
+  ) => Promise<T>
+  onSubmit?: (
+    data: T,
+    request: RequestType,
+    formData?: T,
+    form?: UseFormReturn<any, any, undefined>,
+    closeForm?: boolean
+  ) => void
+  primeData?: any
+  readonly?: boolean
+  remote?: RemoteConfig
+  request: RequestType
+  persist?: boolean | { storageKey?: string }
+  useMutationOptions?: UseMutationOptions<any, Error, T, unknown>
+  useQueryOptions?: Partial<UseQueryOptions<any, Error, T>>
+  value?: T | null
+}
+
+export interface SuperFormProps<T extends FieldValues> extends CommonFormProps<T> {
+  children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+  useFormProps?: UseFormProps<T>
+}
+
+export interface SuperFormProviderProps extends Omit<SuperFormProps<any>, 'children'> {
+  children?: React.ReactNode
+}
+
+export interface SuperFormModalProps<T extends FieldValues> extends SuperFormProps<T> {
+  modalProps: ModalProps
+  noCloseOnSubmit?: boolean
+}
+
+export interface SuperFormPopoverProps<T extends FieldValues> extends SuperFormProps<T> {
+  popoverProps?: Omit<PopoverProps, 'children'>
+  target: any
+  noCloseOnSubmit?: boolean
+}
+
+export interface ExtendedDrawerProps extends DrawerProps {
+  // Add any extended drawer props needed
+  [key: string]: any
+}
+
+export interface SuperFormDrawerProps<T extends FieldValues> extends SuperFormProps<T> {
+  drawerProps: ExtendedDrawerProps
+  noCloseOnSubmit?: boolean
+}
+
+export interface SuperFormRef<T extends FieldValues> {
+  form: UseFormReturn<T, any, undefined>
+  mutation: Partial<UseMutationResult<any, Error, any, unknown>>
+  submit: (closeForm?: boolean, afterSubmit?: (data: T | any) => void) => Promise<void>
+  queryKey?: any
+  getFormState: () => UseFormStateReturn<T>
+}
+
+export interface SuperFormDrawerRef<T extends FieldValues> extends SuperFormRef<T> {
+  drawer: HTMLDivElement | null
+}
+
+export interface SuperFormModalRef<T extends FieldValues> extends SuperFormRef<T> {
+  modal: HTMLDivElement | null
+}
+
+export interface SuperFormPopoverRef<T extends FieldValues> extends SuperFormRef<T> {
+  popover: HTMLDivElement | null
+}

src/Form/types/index.ts

@@ -0,0 +1,2 @@
+export * from './form.types'
+export * from './remote.types'

src/Form/types/remote.types.ts

@@ -0,0 +1,11 @@
+export interface RemoteConfig {
+  apiOptions?: RequestInit
+  apiURL?: string
+  enabled?: boolean
+  fetchSize?: number
+  hotFields?: string[]
+  primaryKey?: string
+  sqlFilter?: string
+  tableName: string
+  uniqueKeys?: string[]
+}

src/Form/utils/fetchClient.ts

@@ -0,0 +1,161 @@
+export interface FetchOptions extends RequestInit {
+  params?: Record<string, any>
+  timeout?: number
+}
+
+export interface FetchResponse<T = any> {
+  data: T
+  status: number
+  statusText: string
+  ok: boolean
+  error?: string
+}
+
+export class FetchError extends Error {
+  constructor(
+    public message: string,
+    public status?: number,
+    public response?: any
+  ) {
+    super(message)
+    this.name = 'FetchError'
+  }
+}
+
+/**
+ * Fetch wrapper with timeout support and axios-like interface
+ */
+async function fetchWithTimeout(
+  url: string,
+  options: FetchOptions = {}
+): Promise<Response> {
+  const { timeout = 30000, ...fetchOptions } = options
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), timeout)
+
+  try {
+    const response = await fetch(url, {
+      ...fetchOptions,
+      signal: controller.signal,
+    })
+    clearTimeout(timeoutId)
+    return response
+  } catch (error) {
+    clearTimeout(timeoutId)
+    throw error
+  }
+}
+
+/**
+ * GET request
+ */
+export async function get<T = any>(
+  url: string,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    })
+
+    const data = await response.json()
+
+    return {
+      data,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : data?.message || data?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+/**
+ * POST request
+ */
+export async function post<T = any>(
+  url: string,
+  data?: any,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      body: JSON.stringify(data),
+    })
+
+    const responseData = await response.json()
+
+    return {
+      data: responseData,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : responseData?.message || responseData?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+/**
+ * DELETE request
+ */
+export async function del<T = any>(
+  url: string,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    })
+
+    const data = await response.json().catch(() => ({}))
+
+    return {
+      data,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : data?.message || data?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+export const fetchClient = {
+  get,
+  post,
+  delete: del,
+}

src/Form/utils/getNestedValue.ts

@@ -0,0 +1,9 @@
+/**
+ * Retrieves a nested value from an object using dot notation path
+ * @param path - Dot-separated path (e.g., "user.address.city")
+ * @param obj - Object to extract value from
+ * @returns The value at the specified path, or undefined if not found
+ */
+export const getNestedValue = (path: string, obj: any): any => {
+  return path.split('.').reduce((prev, curr) => prev?.[curr], obj)
+}

src/Form/utils/openConfirmModal.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Stack, Text } from '@mantine/core'
+import { modals } from '@mantine/modals'
+
+export const openConfirmModal = (
+  onConfirm: () => void,
+  onCancel?: (() => void) | null,
+  description?: string | null
+) =>
+  modals.openConfirmModal({
+    size: 'xs',
+    children: (
+      <Stack gap={4}>
+        <Text size='xs' c={description ? 'blue' : 'red'} fw='bold'>
+          You have unsaved changes in this form.
+        </Text>
+        <Text size='xs'>
+          {description ??
+            'Closing now will discard any modifications you have made. Are you sure you want to continue?'}
+        </Text>
+      </Stack>
+    ),
+    labels: { confirm: description ? 'Restore' : 'Confirm', cancel: 'Cancel' },
+    confirmProps: { color: description ? 'blue' : 'red', size: 'compact-xs' },
+    cancelProps: { size: 'compact-xs' },
+    groupProps: { gap: 'xs' },
+    withCloseButton: false,
+    onConfirm,
+    onCancel,
+  })

src/Former/Former.store.tsx

@@ -0,0 +1,188 @@
+import { createSyncStore } from '@warkypublic/zustandsyncstore';
+import { produce } from 'immer';
+
+import type { FormerProps, FormerState } from './Former.types';
+
+const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
+  FormerState<any> & Partial<FormerProps<any>>,
+  FormerProps<any>
+>(
+  (set, get) => ({
+    getState: (key) => {
+      const current = get();
+      return current?.[key];
+    },
+    load: async (reset?: boolean) => {
+      try {
+        set({ loading: true });
+        const keyName = get()?.apiKeyField || 'id';
+        const keyValue = (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
+        if (get().onAPICall && keyValue !== undefined) {
+          let data = await get().onAPICall!(
+            'read',
+            get().request || 'insert',
+            get().values,
+            keyValue
+          );
+          if (get().afterGet) {
+            data = await get().afterGet!({ ...data });
+          }
+          set({ loading: false, values: data });
+          get().onChange?.(data);
+        }
+        if (reset && get().getFormMethods) {
+          const formMethods = get().getFormMethods!();
+          formMethods.reset();
+        }
+      } catch (e) {
+        set({ error: (e as Error)?.message ?? e, loading: false });
+      }
+      set({ loading: false });
+    },
+
+    onChange: (values) => {
+      set({ values });
+    },
+    request: 'insert',
+    reset: async () => {
+      const state = get();
+      if (state.getFormMethods) {
+        if (state.request !== 'insert') {
+          await state.load(true);
+        }
+
+        const formMethods = state.getFormMethods!();
+        formMethods.reset({ ...state.values, ...state.primeData });
+      }
+    },
+    save: async (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => {
+      try {
+        const keepOpen = get().keepOpen ?? false;
+        set({ loading: true });
+        if (get().getFormMethods) {
+          const formMethods = get().getFormMethods!();
+
+          let data = formMethods.getValues();
+
+          if (get().beforeSave) {
+            const newData = await get().beforeSave!(data);
+            data = newData;
+          }
+
+          let exit = false;
+          const handler = formMethods.handleSubmit(
+            (newdata) => {
+              data = newdata;
+            },
+            (errors) => {
+              set({ error: errors.root?.message || 'Validation errors', loading: false });
+              exit = true;
+            }
+          );
+
+          await handler(e);
+
+          //console.log('Former.store.tsx save called', success, e, data, get().getFormMethods);
+          if (exit) {
+            set({ loading: false });
+            return undefined;
+          }
+
+          if (get().request === 'delete' && !get().deleteConfirmed) {
+            const confirmed = (await get().onConfirmDelete?.(data)) ?? false;
+            if (!confirmed) {
+              set({ loading: false });
+              return undefined;
+            }
+          }
+
+          if (get().onAPICall) {
+            const keyName = get()?.apiKeyField || 'id';
+            const keyValue =
+              (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
+            const savedData = await get().onAPICall!(
+              'mutate',
+              get().request || 'insert',
+              data,
+              keyValue
+            );
+            if (get().afterSave) {
+              await get().afterSave!(savedData);
+            }
+            set({ loading: false, values: savedData });
+            get().onChange?.(savedData);
+            if (!keepOpen) {
+              get().onClose?.(savedData);
+            }
+            return savedData;
+          }
+
+          set({ loading: false, values: data });
+          get().onChange?.(data);
+          if (!keepOpen) {
+            get().onClose?.(data);
+          }
+
+          return data;
+        }
+      } catch (e) {
+        set({ error: (e as Error)?.message ?? e, loading: false });
+      }
+
+      return undefined;
+    },
+    setRequest: (request) => {
+      set({ request });
+    },
+    setState: (key, value) => {
+      set(
+        produce((state) => {
+          state[key] = value;
+        })
+      );
+    },
+    setStateFN: (key, value) => {
+      const p = new Promise<void>((resolve, reject) => {
+        set(
+          produce((state) => {
+            if (typeof value === 'function') {
+              state[key] = (value as (value: unknown) => unknown)(state[key]);
+            } else {
+              reject(new Error(`Not a function ${value}`));
+              throw Error(`Not a function ${value}`);
+            }
+          })
+        );
+        resolve();
+      });
+
+      return p;
+    },
+    validate: async () => {
+      if (get().getFormMethods) {
+        const formMethods = get().getFormMethods!();
+        const isValid = await formMethods.trigger();
+        return isValid;
+      }
+      return true;
+    },
+    values: undefined,
+  }),
+  ({ onConfirmDelete, primeData, request, values }) => {
+    let _onConfirmDelete = onConfirmDelete;
+    if (!onConfirmDelete) {
+      _onConfirmDelete = async () => {
+        return confirm('Are you sure you want to delete this item?');
+      };
+    }
+    return {
+      onConfirmDelete: _onConfirmDelete,
+      primeData,
+      request: request || 'insert',
+      values: { ...primeData, ...values },
+    };
+  }
+);
+
+export { FormerProvider };
+export { useFormerStore };

src/Former/Former.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, type PropsWithChildren, useEffect, useImperativeHandle } from 'react';
+import { type FieldValues, FormProvider, useForm } from 'react-hook-form';
+
+import type { FormerProps, FormerRef } from './Former.types';
+
+import { FormerProvider, useFormerStore } from './Former.store';
+import { FormerLayout } from './FormerLayout';
+
+const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & PropsWithChildren>(
+  function FormerInner<T extends FieldValues>(
+    props: Partial<FormerProps<T>> & PropsWithChildren<T>,
+    ref: any
+  ) {
+    const {
+      getState,
+      onChange,
+      onClose,
+      onOpen,
+      opened,
+      primeData,
+      reset,
+      save,
+      setState,
+      useFormProps,
+      validate,
+      values,
+      wrapper,
+    } = useFormerStore((state) => ({
+      getState: state.getState,
+      onChange: state.onChange,
+      onClose: state.onClose,
+      onOpen: state.onOpen,
+      opened: state.opened,
+      primeData: state.primeData,
+      reset: state.reset,
+      save: state.save,
+      setState: state.setState,
+      useFormProps: state.useFormProps,
+      validate: state.validate,
+      values: state.values,
+      wrapper: state.wrapper,
+    }));
+
+    const formMethods = useForm<T>({
+      defaultValues: primeData,
+      mode: 'all',
+      shouldUseNativeValidation: true,
+      values: values,
+      ...useFormProps,
+    });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        close: async () => {
+          //console.log('close called');
+          onClose?.();
+          setState('opened', false);
+        },
+        getValue: () => {
+          return getState('values');
+        },
+        reset: () => {
+          reset();
+        },
+        save: async () => {
+          return await save();
+        },
+        setValue: (value: T) => {
+          onChange?.(value);
+        },
+        show: async () => {
+          //console.log('show called');
+          setState('opened', true);
+          onOpen?.();
+        },
+        validate: async () => {
+          return await validate();
+        },
+      }),
+      [getState, onChange]
+    );
+
+    useEffect(() => {
+      setState('getFormMethods', () => formMethods);
+    }, [formMethods]);
+
+    return (
+      <FormProvider {...formMethods}>
+        {typeof wrapper === 'function' ? (
+          wrapper(<FormerLayout>{props.children}</FormerLayout>, opened, onClose, onOpen, getState)
+        ) : (
+          <FormerLayout>{props.children || null}</FormerLayout>
+        )}
+      </FormProvider>
+    );
+  }
+);
+
+export const Former = forwardRef<FormerRef<any>, FormerProps<any> & PropsWithChildren>(
+  function Former<T extends FieldValues = any>(
+    props: FormerProps<T> & PropsWithChildren<T>,
+    ref: any
+  ) {
+    //if opened is false and wrapper is defined as function, do not render anything
+    if (!props.opened && typeof props.wrapper === 'function') {
+      return null;
+    }
+    return (
+      <FormerProvider {...props}>
+        <FormerInner ref={ref}>{props.children}</FormerInner>
+      </FormerProvider>
+    );
+  }
+);

src/Former/Former.types.ts

@@ -0,0 +1,73 @@
+import type { LoadingOverlayProps, ScrollAreaAutosizeProps } from '@mantine/core';
+import type { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+
+export interface FormerProps<T extends FieldValues = any> {
+  afterGet?: (data: T) => Promise<T> | void;
+  afterSave?: (data: T) => Promise<void> | void;
+  apiKeyField?: string;
+  beforeSave?: (data: T) => Promise<T> | T;
+  disableHTMlForm?: boolean;
+  keepOpen?: boolean;
+  onAPICall?: (
+    mode: 'mutate' | 'read',
+    request: RequestType,
+    value?: T,
+    key?: number | string
+  ) => Promise<T>;
+  onCancel?: () => void;
+  onChange?: (value: T) => void;
+  onClose?: (data?: T) => void;
+  onConfirmDelete?: (values?: T) => Promise<boolean>;
+  onOpen?: (data?: T) => void;
+
+  opened?: boolean;
+  primeData?: T;
+  request: RequestType;
+  useFormProps?: UseFormProps<T>;
+  values?: T;
+  wrapper?: (
+    children: React.ReactNode,
+    opened: boolean | undefined,
+    onClose: ((data?: T) => void) | undefined,
+    onOpen: ((data?: T) => void) | undefined,
+    getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K]
+  ) => React.ReactNode;
+}
+
+export interface FormerRef<T extends FieldValues = any> {
+  close: () => Promise<void>;
+  getValue: () => T | undefined;
+  reset: () => void;
+  save: () => Promise<T | undefined>;
+  setValue: (value: T) => void;
+  show: () => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export interface FormerState<T extends FieldValues = any> {
+  deleteConfirmed?: boolean;
+  error?: string;
+  getFormMethods?: () => UseFormReturn<any, any>;
+  getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K];
+  load: (reset?: boolean) => Promise<void>;
+  loading?: boolean;
+  loadingOverlayProps?: LoadingOverlayProps;
+  reset: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+  save: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<T | undefined>;
+  scrollAreaProps?: ScrollAreaAutosizeProps;
+  setRequest: (request: RequestType) => void;
+  setState: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: Partial<FormStateAndProps<T>>[K]
+  ) => void;
+  setStateFN: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: (current: FormStateAndProps<T>[K]) => Partial<FormStateAndProps<T>[K]>
+  ) => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export type FormStateAndProps<T extends FieldValues = any> = FormerProps<T> &
+  Partial<FormerState<T>>;
+
+export type RequestType = 'delete' | 'insert' | 'select' | 'update' | 'view';

src/Former/FormerLayout.tsx

@@ -0,0 +1,93 @@
+import { LoadingOverlay, ScrollAreaAutosize } from '@mantine/core';
+import { type PropsWithChildren, useEffect } from 'react';
+
+import { useFormerStore } from './Former.store';
+
+export const FormerLayout = (props: PropsWithChildren) => {
+  const {
+    disableHTMlForm,
+    getFormMethods,
+    load,
+    loading,
+    loadingOverlayProps,
+    request,
+    reset,
+    save,
+    scrollAreaProps,
+  } = useFormerStore((state) => ({
+    disableHTMlForm: state.disableHTMlForm,
+    getFormMethods: state.getFormMethods,
+    load: state.load,
+    loading: state.loading,
+    loadingOverlayProps: state.loadingOverlayProps,
+    request: state.request,
+    reset: state.reset,
+    save: state.save,
+    scrollAreaProps: state.scrollAreaProps,
+  }));
+
+  useEffect(() => {
+    if (getFormMethods) {
+      const formMethods = getFormMethods();
+      if (formMethods && request !== 'insert') {
+        load(true);
+      }
+    }
+  }, [getFormMethods, request]);
+
+  if (disableHTMlForm) {
+    return (
+      <ScrollAreaAutosize
+        offsetScrollbars
+        scrollbarSize={4}
+        type="auto"
+        {...scrollAreaProps}
+        style={{
+          height: '100%',
+          maxHeight: '89vh',
+          padding: '0.25rem',
+          width: '100%',
+          ...scrollAreaProps?.style,
+        }}
+      >
+        {props.children}
+        <LoadingOverlay
+          loaderProps={{ type: 'bars' }}
+          overlayProps={{
+            backgroundOpacity: 0.5,
+          }}
+          {...loadingOverlayProps}
+          visible={loading}
+        />
+      </ScrollAreaAutosize>
+    );
+  }
+
+  return (
+    <ScrollAreaAutosize
+      offsetScrollbars
+      scrollbarSize={4}
+      type="auto"
+      {...scrollAreaProps}
+      style={{
+        height: '100%',
+        maxHeight: '89vh',
+        padding: '0.25rem',
+        width: '100%',
+        ...scrollAreaProps?.style,
+      }}
+    >
+      <form onReset={(e) => reset(e)} onSubmit={(e) => save(e)}>
+        {props.children}
+        <LoadingOverlay
+          loaderProps={{ type: 'bars' }}
+          overlayProps={{
+            backgroundOpacity: 0.5,
+          }}
+          {...loadingOverlayProps}
+          visible={loading}
+        />
+      </form>
+    </ScrollAreaAutosize>
+  );
+};

src/Former/stories/Gridler.goapi.stories.tsx

@@ -0,0 +1,42 @@
+//@ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '@mantine/core';
+import { fn } from 'storybook/test';
+
+import { FormTest } from './example';
+
+const Renderable = (props: any) => {
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      <FormTest {...props} />
+    </Box>
+  );
+};
+
+const meta = {
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  component: Renderable,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    //layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  title: 'Former/Former Basic',
+} satisfies Meta<typeof Renderable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const BasicExample: Story = {
+  args: {
+    label: 'Test',
+  },
+};

src/Former/stories/example.tsx

@@ -0,0 +1,118 @@
+import { Button, Drawer, Group, Paper, Select, Stack, Switch } from '@mantine/core';
+import { useRef, useState } from 'react';
+import { Controller } from 'react-hook-form';
+
+import type { FormerRef } from '../Former.types';
+
+import { Former } from '../Former';
+
+export const FormTest = () => {
+  const [request, setRequest] = useState<null | string>('insert');
+  const [wrapped, setWrapped] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [formData, setFormData] = useState({ a: 99 });
+  console.log('formData', formData);
+
+  const ref = useRef<FormerRef>(null);
+  return (
+    <Stack h="100%" mih="400px" w="90%">
+      <Select
+        data={['insert', 'update', 'delete', 'select', 'view']}
+        onChange={setRequest}
+        value={request}
+      />
+      <Switch
+        checked={wrapped}
+        label="Wrapped in Drawer"
+        onChange={(event) => setWrapped(event.currentTarget.checked)}
+      />
+      <Button onClick={() => setOpen(true)}>Open Former Drawer</Button>
+      <Group>
+        <Button
+          onClick={async () => {
+            const valid = await ref.current?.validate();
+            console.log('validate -> ', valid, ref.current);
+          }}
+        >
+          Test Ref Values. See console
+        </Button>
+        <Button
+          onClick={async () => {
+            setTimeout(() => {
+              ref.current?.close?.();
+            }, 3000);
+          }}
+        >
+          Test Show/Hide
+        </Button>
+      </Group>
+      <Former
+        //wrapper={(children, getState) => <div>{children}</div>}
+        //opened={true}
+        apiKeyField="a"
+        onAPICall={(mode, request, value) => {
+          console.log('API Call', mode, request, value);
+          if (mode === 'read') {
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve({ a: 'Another Value', test: 'Loaded Value' });
+              }, 1000);
+            });
+          }
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(value || {});
+            }, 1000);
+          });
+        }}
+        onChange={setFormData}
+        onClose={() => setOpen(false)}
+        opened={open}
+        primeData={{ a: '66', test: 'primed' }}
+        ref={ref}
+        request={request as any}
+        useFormProps={{ criteriaMode: 'all', shouldUseNativeValidation: false }}
+        values={formData}
+        wrapper={
+          wrapped
+            ? (children, opened, onClose, onOpen, getState) => {
+                const values = getState('values');
+                return (
+                  <Drawer
+                    h={'100%'}
+                    onClose={() => onClose?.()}
+                    opened={opened ?? false}
+                    title={`Drawer Former - Current A Value: ${values?.a}`}
+                    w={'50%'}
+                  >
+                    <Paper h="100%" shadow="sm" w="100%" withBorder>
+                      {children}
+                      <Button>Test Save</Button>
+                    </Paper>
+                  </Drawer>
+                );
+              }
+            : undefined
+        }
+      >
+        <Stack h="1200px">
+          <Stack>
+            <Controller
+              name="test"
+              render={({ field }) => <input type="text" {...field} placeholder="A" />}
+            />
+            <Controller
+              name="a"
+              render={({ field }) => <input type="text" {...field} placeholder="B" />}
+              rules={{ required: 'Field is required' }}
+            />
+          </Stack>
+          <Stack>
+            <button type="submit">Submit</button>
+            <button type="reset">Reset</button>
+          </Stack>
+        </Stack>
+      </Former>
+    </Stack>
+  );
+};

src/Former/todo.md

@@ -0,0 +1,11 @@
+- [ ] Headerspec API
+- [ ] Relspec API
+- [ ] SocketSpec API
+- [ ] Layout Tool
+  - [ ] Header Section
+  - [ ] Button Section
+  - [ ] Footer Section
+- [ ] Different Loaded for saving vs loading
+- [ ] Better Confirm Dialog
+- [ ] Reset Confirm Dialog
+- [ ] Request insert and save but keep open (must clear key from API, also add callback)

src/Gridler/GridlerDataGrid.tsx

@@ -50,6 +50,7 @@ export const GridlerDataGrid = () => {
     headerHeight,
     heightProp,
     mounted,
+    onCellActivated,
     onCellClicked,
     onCellEdited,
     onColumnMoved,
@@ -80,6 +81,7 @@ export const GridlerDataGrid = () => {
     headerHeight: s.headerHeight,
     heightProp: s.height,
     mounted: s.mounted,
+    onCellActivated: s.onCellActivated,
     onCellClicked: s.onCellClicked,
     onCellEdited: s.onCellEdited,
     onColumnMoved: s.onColumnMoved,
@@ -178,6 +180,7 @@ export const GridlerDataGrid = () => {
             gridSelection={_gridSelection}
             headerHeight={headerHeight ?? 32}
             headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
+            onCellActivated={onCellActivated}
             onCellClicked={onCellClicked}
             onCellContextMenu={(cell, event) => {
               event.preventDefault();
@@ -219,16 +222,25 @@ export const GridlerDataGrid = () => {
                   rows = rows.hasIndex(y) ? rows : rows.add(y);
                 }
               }
-
+              if (rows.length === 0) {
+                for (const r of currentSelection?.rows ?? []) {
+                  const validRowID = getRowBuffer ? getRowBuffer(r)?.[keyField] : null;
+                  if (!validRowID) {
+                    continue;
+                  }
+                  rows = rows.hasIndex(r) ? rows : rows.add(r);
+                }
+              }
+              console.log('Debug:onGridSelectionChange', currentSelection, selection);
               if (
                 JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
                 JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
                 JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
               ) {
                 setState('_gridSelection', { ...selection, rows });
-                if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
+                //if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
                 setState('_gridSelectionRows', rows);
-                }
+                //}
               }
 
               //console.log('Selection', selection);

src/Gridler/components/BottomBar.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/react-in-jsx-scope */
+ 
 import { useGridlerStore } from './GridlerStore';
 
 export function BottomBar() {

src/Gridler/components/Computer.tsx

@@ -67,6 +67,7 @@ export const Computer = React.memo(() => {
     }
   );
 
+  //When values change, update selection
   useEffect(() => {
     const searchSelection = async () => {
       const page_data = getState('_page_data');
@@ -128,40 +129,12 @@ export const Computer = React.memo(() => {
     }
   }, [values]);
 
+  //Fire onChange when selection changes
   useEffect(() => {
     const onChange = getState('onChange');
     if (onChange && typeof onChange === 'function') {
-      const page_data = getState('_page_data');
-      const pageSize = getState('pageSize');
-
-      const buffers = [];
-      if (_gridSelectionRows) {
-        for (const range of _gridSelectionRows) {
-          let buffer = undefined;
-
-          for (const p in page_data) {
-            for (const r in page_data[p]) {
-              const idx = Number(p) * pageSize + Number(r);
-              if (isNaN(idx)) {
-                continue;
-              }
-
-              if (Number(page_data[p][r]?._rownumber) === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
-                break;
-              } else if (idx === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
-                break;
-              }
-            }
-          }
-          if (buffer !== undefined) {
-            buffers.push(buffer);
-          }
-        }
-      }
+      const getGridSelectedRows = getState('getGridSelectedRows');
+      const buffers = getGridSelectedRows();
 
       const _values = getState('values');
 
@@ -169,7 +142,7 @@ export const Computer = React.memo(() => {
         onChange(buffers);
       }
     }
-  }, [JSON.stringify(_gridSelectionRows), getState]);
+  }, [_gridSelectionRows, _gridSelectionRows?.length, getState]);
 
   useEffect(() => {
     setState(
@@ -278,6 +251,7 @@ export const Computer = React.memo(() => {
     });
   }, [colOrder]);
 
+  //Initial Load
   useEffect(() => {
     if (!_glideref) {
       return;
@@ -291,11 +265,12 @@ export const Computer = React.memo(() => {
     });
   }, [ready, loadPage]);
 
+  //Logic to select first row on mount
   useEffect(() => {
     const _events = getState('_events');
     const loadPage = () => {
       const selectFirstRowOnMount = getState('selectFirstRowOnMount');
-      if (selectFirstRowOnMount) {
+      if (ready && selectFirstRowOnMount) {
         const scrollToRowKey = getState('scrollToRowKey');
         if (scrollToRowKey && scrollToRowKey >= 0) {
           return;
@@ -307,7 +282,12 @@ export const Computer = React.memo(() => {
         const firstRow = firstBuffer?.[keyField];
         const currentValues = getState('values') ?? [];
 
-        if (firstRow && firstRow > 0 && (currentValues.length ?? 0) === 0) {
+        if (
+          !(values && values.length > 0) &&
+          firstRow &&
+          firstRow > 0 &&
+          (currentValues.length ?? 0) === 0
+        ) {
           const values = [firstBuffer, ...(currentValues as Array<Record<string, unknown>>)];
 
           const onChange = getState('onChange');
@@ -328,28 +308,28 @@ export const Computer = React.memo(() => {
     return () => {
       _events?.removeEventListener('loadPage', loadPage);
     };
-  }, []);
+  }, [ready]);
 
   /// logic to apply the selected row.
-  useEffect(() => {
-    const ready = getState('ready');
-    const ref = getState('_glideref');
-    const getRowIndexByKey = getState('getRowIndexByKey');
+  // useEffect(() => {
+  //   const ready = getState('ready');
+  //   const ref = getState('_glideref');
+  //   const getRowIndexByKey = getState('getRowIndexByKey');
 
-    if (scrollToRowKey && ref && ready) {
-      getRowIndexByKey?.(scrollToRowKey).then((r) => {
-        if (r !== undefined) {
-          //console.log('Scrolling to selected row:', scrollToRowKey, r);
-          ref.scrollTo(0, r);
-          getState('_events').dispatchEvent(
-            new CustomEvent('scrollToRowKeyFound', {
-              detail: { rowNumber: r, scrollToRowKey: scrollToRowKey },
-            })
-          );
-        }
-      });
-    }
-  }, [scrollToRowKey]);
+  //   if (scrollToRowKey && ref && ready) {
+  //     getRowIndexByKey?.(scrollToRowKey).then((r) => {
+  //       if (r !== undefined) {
+  //         //console.log('Scrolling to selected row:', scrollToRowKey, r);
+  //         ref.scrollTo(0, r);
+  //         getState('_events').dispatchEvent(
+  //           new CustomEvent('scrollToRowKeyFound', {
+  //             detail: { rowNumber: r, scrollToRowKey: scrollToRowKey },
+  //           })
+  //         );
+  //       }
+  //     });
+  //   }
+  // }, [scrollToRowKey]);
 
   useEffect(() => {
     const ready = getState('ready');
@@ -365,12 +345,14 @@ export const Computer = React.memo(() => {
           if (selectedRowKey) {
             const onChange = getState('onChange');
             const selected = [{ [getState('keyField') ?? 'id']: selectedRowKey }];
+            if (JSON.stringify(getState('values')) !== JSON.stringify(selected)) {
               if (onChange) {
                 onChange(selected);
               } else {
                 setState('values', selected);
               }
             }
+          }
 
           ref.scrollTo(0, r);
           getState('_events').dispatchEvent(

src/Gridler/components/GridlerStore.tsx

@@ -90,6 +90,7 @@ export interface GridlerProps extends PropsWithChildren {
 
   rowHeight?: number;
   scrollToRowKey?: number;
+  searchFields?: Array<string>;
   searchStr?: string;
   sections?: {
     bottom?: React.ReactNode;
@@ -134,7 +135,7 @@ export interface GridlerState {
   _gridSelectionRows?: GridSelection['rows'];
   _loadingList: CompactSelection;
   _page_data: Record<number, Array<any>>;
-  _refresh: () => void;
+  _refresh: () => Promise<void>;
   _scrollTimeout?: any | number;
   _visibleArea: Rectangle;
   _visiblePages: Rectangle;
@@ -154,6 +155,7 @@ export interface GridlerState {
     selection: Rectangle,
     abortSignal: AbortSignal
   ) => CellArray | GetCellsThunk;
+  getGridSelectedRows: () => Array<any>;
   getRowBuffer: (row: number) => Record<string, any>;
   getRowIndexByKey: (key: number | string) => Promise<number | undefined>;
   getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K];
@@ -163,6 +165,7 @@ export interface GridlerState {
   loadingData?: boolean;
   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
   mounted: boolean;
+  onCellActivated: (cell: Item) => void;
   onCellClicked: (cell: Item, event: CellClickedEventArgs) => void;
   onCellEdited: (cell: Item, newVal: EditableGridCell) => void;
   onColumnMoved: (from: number, to: number) => void;
@@ -216,12 +219,11 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     _events: new EventTarget(),
     _loadingList: CompactSelection.empty(),
     _page_data: {},
-    _refresh: () => {
+    _refresh: async () => {
       const s = get();
-      s.loadPage(0, 'all').then(() => {
-        s.refreshCells();
-        s.reload?.();
-      });
+      await s.loadPage(0, 'all');
+      await s.refreshCells();
+      await s.reload?.();
     },
     _visibleArea: { height: 10000, width: 1000, x: 0, y: 0 },
     _visiblePages: { height: 0, width: 0, x: 0, y: 0 },
@@ -276,6 +278,42 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         return result as CellArray;
       };
     },
+    getGridSelectedRows: () => {
+      const state = get();
+      const buffers: Array<any> = [];
+      const page_data = state._page_data;
+      const pageSize = state.pageSize;
+
+      if (state._gridSelectionRows) {
+        for (const range of state._gridSelectionRows) {
+          let buffer = undefined;
+
+          for (const p in page_data) {
+            for (const r in page_data[p]) {
+              const idx = Number(p) * pageSize + Number(r);
+              if (isNaN(idx)) {
+                continue;
+              }
+
+              if (Number(page_data[p][r]?._rownumber) === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
+                break;
+              } else if (idx === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
+                break;
+              }
+            }
+          }
+          if (buffer !== undefined) {
+            buffers.push(buffer);
+          }
+        }
+      }
+      return buffers;
+    },
+
     getRowBuffer: (row: number) => {
       const state = get();
       //Handle local data
@@ -298,7 +336,6 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
       return rowData;
     },
-
     getRowIndexByKey: async (key: number | string) => {
       const state = get();
 
@@ -399,7 +436,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
             );
           })
           .catch((e) => {
-            console.warn('loadPage Error: ', page, e);
+            console.error('loadPage Error: ', page, e);
             state._events.dispatchEvent(
               new CustomEvent('loadPage_error', {
                 detail: { clearMode, error: e, page: pPage, state },
@@ -410,10 +447,29 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     },
     maxConcurrency: 1,
     mounted: false,
+    onCellActivated: (cell: Item): void => {
+      const state = get();
+      const [col, row] = cell;
+
+      state._events.dispatchEvent(
+        new CustomEvent('onCellActivated', {
+          detail: { cell, col, row, state },
+        })
+      );
+      state.glideProps?.onCellActivated?.(cell);
+    },
     onCellClicked: (cell: Item, event: CellClickedEventArgs) => {
       const state = get();
       const [col, row] = cell;
+      if (state.glideProps?.onCellClicked) {
         state.glideProps?.onCellClicked?.(cell, event);
+      }
+      if (state.values?.length) {
+        if (state.onChange) {
+          state.onChange(state.values);
+        }
+      }
+
       state._events.dispatchEvent(
         new CustomEvent('onCellClicked', {
           detail: { cell, col, row, state },
@@ -464,6 +520,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       }
       return true;
     },
+
     onColumnResize: (
       column: GridColumn,
       newSize: number,
@@ -488,7 +545,6 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         });
       }
     },
-
     onContextClick: (area: string, event: CellClickedEventArgs, col?: number, row?: number) => {
       const s = get();
       const coldef = s.renderColumns?.[col ?? -1];
@@ -668,9 +724,11 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           isDivider: true,
         },
         {
+          id: 'refesh',
           label: `Refresh`,
-          onClickAsync: async () => {
-            await s._refresh?.();
+          onClick: () => {
+            const s = get();
+            s._refresh?.();
           },
         },
       ];

src/Gridler/components/RefHandler.tsx

@@ -15,14 +15,16 @@ function _GridlerRefHandler(props: PropsWithChildren, ref: Ref<GridlerRef> | und
       refresh: async (parms?: any) => {
         const refreshCells = getstate('refreshCells');
         const loadPage = getstate('loadPage');
-        loadPage?.(parms?.pageIndex ?? 0, 'all');
+        loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => {
           refreshCells?.();
+        });
       },
       reload: async (parms?: any) => {
         const refreshCells = getstate('refreshCells');
         const loadPage = getstate('loadPage');
-        loadPage?.(parms?.pageIndex ?? 0, 'all');
+        loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => {
           refreshCells?.();
+        });
       },
       reloadRow: async (key: number | string) => {
         const refreshCells = getstate('refreshCells');

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -19,13 +19,12 @@ export interface GlidlerAPIAdaptorForGoLangv2Props<T = unknown> extends APIOptio
 }
 
 function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForGoLangv2Props<T>) {
-  const [setStateFN, setState, getState, addError, mounted, loadPage] = useGridlerStore((s) => [
+  const [setStateFN, setState, getState, addError, mounted] = useGridlerStore((s) => [
     s.setStateFN,
     s.setState,
     s.getState,
     s.addError,
     s.mounted,
-    s.loadPage,
   ]);
 
   const useAPIQuery: (index: number) => Promise<any> = useCallback(
@@ -35,6 +34,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
       const pageSize = getState('pageSize');
       const colFilters = getState('colFilters');
       const searchStr = getState('searchStr');
+      const searchFields = getState('searchFields');
       const _active_requests = getState('_active_requests');
       setState('loadingData', true);
       try {
@@ -72,10 +72,17 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
 
           if (searchStr && searchStr !== '') {
             columns
-              ?.filter((f) => !f.disableFilter && !f.disableSearch)
+              ?.filter(
+                (f) =>
+                  !f.disableFilter &&
+                  !f.disableSearch &&
+                  !f.virtual &&
+                  f.id &&
+                  ((searchFields ?? []).length == 0 || searchFields?.includes(f.id))
+              )
               ?.forEach((filter: any) => {
                 ops.push({
-                  name: `${filter.id}`,
+                  name: `${filter.id ?? ""}`,
                   op: 'contains',
                   type: 'searchor',
                   value: searchStr,
@@ -91,11 +98,8 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
             });
           }
 
-          if (props.options && props.options.length > 0) {
-            const optionHeaders = GoAPIHeaders(props.options);
-            for (const oh in optionHeaders) {
-              head.set(oh, optionHeaders[oh]);
-            }
+          if ((props.options ?? []).length > 0) {
+            ops.push(...(props.options ?? []));
           }
 
           const col_ids =
@@ -109,13 +113,6 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
             col_ids?.push(props.hotfields.join(','));
           }
 
-          if (ops && ops.length > 0) {
-            const optionHeaders = GoAPIHeaders(ops);
-            for (const oh in GoAPIHeaders(ops)) {
-              head.set(oh, optionHeaders[oh]);
-            }
-          }
-
           if (col_ids && col_ids.length > 0) {
             ops.push({
               type: 'select-fields',
@@ -123,6 +120,13 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
             });
           }
 
+          if (ops && ops.length > 0) {
+            const optionHeaders = GoAPIHeaders(ops);
+            for (const oh in GoAPIHeaders(ops)) {
+              head.set(oh, optionHeaders[oh]);
+            }
+          }
+
           const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1;
           _active_requests?.forEach((r) => {
             if ((r.page >= 0 && r.page < index - 2) || (index >= 0 && r.page > index + 2)) {
@@ -171,9 +175,10 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
             ...(cv ?? []).filter((f) => f.page !== index),
           ]);
         }
-      } catch (e) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (_e) {
         //console.log('APIAdaptorGoLangv2 error', e);
-        addError(`Error: ${e}`, 'api', props.url);
+        //addError(`Error: ${e}`, 'api', props.url);
       }
       setState('loadingData', false);
       return [];
@@ -183,7 +188,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
       props.authtoken,
       props.url,
       props.filter,
-      props.options,
+      JSON.stringify(props.options),
       setState,
       setStateFN,
       addError,
@@ -197,8 +202,10 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
       //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props });
       if (props && props.url) {
         const head = new Headers();
-        head.set('x-limit', '10');
-        head.set('x-fetch-rownumber', String(key));
+        const ops: FetchAPIOperation[] = [
+          { type: 'limit', value: String(10) },
+          { type: 'fetch-rownumber', value: key },
+        ];
 
         head.set('Authorization', `Token ${props.authtoken}`);
 
@@ -213,7 +220,11 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
         }
 
         if (props.filter && props.filter !== '') {
-          head.set('x-custom-sql-w-buildin-filter', props.filter);
+          ops.push({
+            name: 'sql_filter',
+            type: 'custom-sql-w',
+            value: props.filter,
+          });
         }
 
         if (props.options && props.options.length > 0) {
@@ -223,6 +234,13 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
           }
         }
 
+        if (ops && ops.length > 0) {
+          const optionHeaders = GoAPIHeaders(ops);
+          for (const oh in GoAPIHeaders(ops)) {
+            head.set(oh, optionHeaders[oh]);
+          }
+        }
+
         const controller = new AbortController();
 
         const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, {
@@ -243,16 +261,23 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
     [props.url, props.authtoken, props.filter, props.options, getState, addError]
   );
 
-  //Reset the loaded pages to new rules
-  useEffect(() => {
-    loadPage(0, 'all');
-  }, [JSON.stringify(props.options), props.filter, props.url, props.authtoken]);
-
   //Reset the function in the store.
   useEffect(() => {
     setState('useAPIQuery', useAPIQuery);
     setState('askAPIRowNumber', askAPIRowNumber);
-  }, [props.url, props.authtoken, props.filter, props.options, mounted, setState]);
+
+    const _refresh = getState('_refresh');
+
+    //Reset the loaded pages to new rules
+    _refresh?.().then(() => {
+      const onChange = getState('onChange');
+      const getGridSelectedRows = getState('getGridSelectedRows');
+      if (onChange && typeof onChange === 'function') {
+        const buffers = getGridSelectedRows?.();
+        onChange(buffers);
+      }
+    });
+  }, [props.url, props.authtoken, props.filter, JSON.stringify(props.options), mounted, setState]);
 
   return <></>;
 }

src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx

@@ -14,6 +14,7 @@ import type { GridlerColumn } from '../Column';
 import { type GridlerProps, type GridlerState, useGridlerStore } from '../GridlerStore';
 
 export function GlidlerFormAdaptor(props: {
+  changeOnActiveClick?: boolean;
   descriptionField?: ((data: Record<string, unknown>) => string) | string;
   getMenuItems?: GridlerProps['getMenuItems'];
   onReload?: () => void;
@@ -23,13 +24,35 @@ export function GlidlerFormAdaptor(props: {
   ) => void;
   showDescriptionInMenu?: boolean;
 }) {
-  const [getState, mounted, setState, reload] = useGridlerStore((s) => [
+  const [getState, mounted, setState, _events] = useGridlerStore((s) => [
     s.getState,
     s.mounted,
     s.setState,
-    s.reload,
+    s._events,
   ]);
 
+  useEffect(() => {
+    if (mounted && props.changeOnActiveClick) {
+      const evf = (event: CustomEvent<any>) => {
+        const { row, state } = event.detail;
+        const getRowBuffer = state.getRowBuffer as (row: number) => Record<string, unknown>;
+        if (getRowBuffer) {
+          const rowData = getRowBuffer(row);
+          if (!rowData) {
+            return;
+          }
+          props.onRequestForm('change', rowData);
+        }
+      };
+      _events?.addEventListener('onCellActivated', evf as any);
+      return () => {
+        if (evf) {
+          _events?.removeEventListener('onCellActivated', evf as any);
+        }
+      };
+    }
+  }, [props.changeOnActiveClick, mounted, _events]);
+
   const getMenuItems = useCallback(
     (
       id: string,
@@ -140,8 +163,9 @@ export function GlidlerFormAdaptor(props: {
         c: 'orange',
         label: 'Refresh',
         leftSection: <IconRefresh color="orange" size={16} />,
-        onClick: () => {
-          reload?.();
+        onClickAsync: async () => {
+          const _refresh = getState('_refresh');
+          await _refresh?.();
         },
       });
 

src/Gridler/index.ts

@@ -5,4 +5,6 @@ export * from './components/Column'
 export {type GridlerProps,type GridlerRef,type GridlerState, useGridlerStore } from './components/GridlerStore'
 export { GridlerRightMenuIcon } from './components/RightMenuIcon'
 export {Gridler} from './Gridler'
-export  * from './utils'
+export  {GoAPIHeaders} from './utils'
+export type {FetchAPIOperation} from './utils'
+export type {APIOptions} from './utils/types'

src/Gridler/stories/Examples.goapi.tsx

@@ -121,10 +121,12 @@ export const GridlerGoAPIExampleEventlog = () => {
       >
         <GlidlerAPIAdaptorForGoLangv2
           authtoken={apiKey}
+          options={[{ type: 'preload', value: 'PRO' }]}
           //options={[{ type: 'fieldfilter', name: 'process', value: 'test' }]}
           url={`${apiUrl}/public/process`}
         />
         <Gridler.FormAdaptor
+          changeOnActiveClick={true}
           descriptionField={'process'}
           onRequestForm={(request, data) => {
             console.log('Form requested', request, data);

src/Gridler/stories/Gridler.goapi.stories.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Box } from '@mantine/core';
@@ -6,7 +7,12 @@ import { fn } from 'storybook/test';
 import { GridlerGoAPIExampleEventlog } from './Examples.goapi';
 
 const Renderable = (props: any) => {
-  return <Box h="100%" mih="400px" miw="400px" w='100%' > <GridlerGoAPIExampleEventlog {...props} /></Box>;
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      {' '}
+      <GridlerGoAPIExampleEventlog {...props} />
+    </Box>
+  );
 };
 
 const meta = {
@@ -19,7 +25,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    //layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],

src/Gridler/stories/Gridler.localdata.stories.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Box } from '@mantine/core';
@@ -24,7 +25,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    // layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],

src/MantineBetterMenu/MantineBetterMenu.stories.tsx

@@ -5,21 +5,20 @@ import { fn } from 'storybook/test';
 
 import { MantineBetterMenusProvider, useMantineBetterMenus } from './';
 
-
-const Renderable = (props: Record<string,unknown>) => {
+const Renderable = (props: Record<string, unknown>) => {
   return (
-  <MantineBetterMenusProvider providerID='test'  {...props} >
-    <Menu/>
+    <MantineBetterMenusProvider providerID="test" {...props}>
+      <Menu />
     </MantineBetterMenusProvider>
   );
-}
+};
 
 const Menu = () => {
   const menus = useMantineBetterMenus();
   //menus.setState("menus",[{id:"test",items:[{id:"1",label:"Test",onClick:()=>{console.log("Clicked")}}]}])
 
-  return <Button onClick={()=>  menus.show("test",{})}>Menu</Button>;
-}
+  return <Button onClick={() => menus.show('test', {})}>Menu</Button>;
+};
 
 const meta = {
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
@@ -31,7 +30,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    //layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
@@ -44,8 +43,6 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const BasicExample: Story = {
   args: {
-
     label: 'Test',
   },
 };
-

src/MantineBetterMenu/MenuRenderer.tsx

@@ -80,7 +80,7 @@ const MenuItemRenderer = ({ children, label, ...props }: MantineBetterMenuInstan
               props.onClick?.(e);
               if (props.onClickAsync) {
                 setLoading(true);
-                props.onClickAsync().finally(() => setLoading(false));
+                props.onClickAsync(e).finally(() => setLoading(false));
               }
             }}
             styles={{
@@ -120,7 +120,7 @@ const MenuItemRenderer = ({ children, label, ...props }: MantineBetterMenuInstan
         props.onClick?.(e);
         if (props.onClickAsync) {
           setLoading(true);
-          props.onClickAsync().finally(() => setLoading(false));
+          props.onClickAsync(e).finally(() => setLoading(false));
         }
       }}
       styles={{

src/MantineBetterMenu/Store.tsx

@@ -22,7 +22,7 @@ export interface MantineBetterMenuInstanceItem extends Partial<MenuItemProps> {
   items?: Array<MantineBetterMenuInstanceItem>;
   label?: string;
   onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onClickAsync?: () => Promise<void>;
+  onClickAsync?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
   renderer?:
     | ((props: MantineBetterMenuInstanceItem & Record<string, unknown>) => ReactNode)
     | ReactNode;