RELEASING: Releasing 1 package(s)

Releases: @warkypublic/oranguru@0.0.25 [skip ci]
docs(changeset): Bump
2026-01-14 22:49:39 +02:00 · 2026-01-14 22:49:36 +02:00 · 2026-01-14 22:44:27 +02:00 · 2026-01-14 22:44:15 +02:00 · 2026-01-14 22:42:17 +02:00 · 2026-01-14 21:56:55 +02:00
54 changed files with 951 additions and 2129 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @warkypublic/zustandsyncstore
 ## 0.0.25
 ### Patch Changes
 - 0825f73: Bump
 ## 0.0.24
 ### Patch Changes
 - 7cc09d6: Added form controllers - New button and input controller components for the FormerControllers module
 ## 0.0.23
 ### Patch Changes
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@warkypublic/oranguru",
  "author": "Warky Devs",
-  "version": "0.0.23",
+  "version": "0.0.25",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -49,9 +49,7 @@
    "./oranguru.css": "./src/oranguru.css"
  },
  "dependencies": {
    "moment": "^2.30.1"
  },
  "devDependencies": {
    "@changesets/cli": "^2.29.7",
@@ -102,7 +100,6 @@
    "@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",
--- a/src/Boxer/index.ts
+++ b/src/Boxer/index.ts
--- a/src/Boxer/todo.md
+++ b/src/Boxer/todo.md
@@ -0,0 +1,8 @@
 - [ ] Auto Complete
 - [ ] Multi Select
 - [ ] Virtualize
 - [ ] Search
 - [ ] Clear, Menu buttons
 - [ ] Headerspec API
 - [ ] Relspec API
 - [ ] SocketSpec API
--- a/src/Form/components/Form.tsx
+++ b/src/Form/components/Form.tsx
@@ -1,38 +0,0 @@
 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
--- a/src/Form/components/FormLayout.tsx
+++ b/src/Form/components/FormLayout.tsx
@@ -1,55 +0,0 @@
 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>
 )
--- a/src/Form/components/FormSection.tsx
+++ b/src/Form/components/FormSection.tsx
@@ -1,117 +0,0 @@
 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
 }
--- a/src/Form/components/SuperForm.tsx
+++ b/src/Form/components/SuperForm.tsx
@@ -1,34 +0,0 @@
 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
--- a/src/Form/components/SuperFormLayout.tsx
+++ b/src/Form/components/SuperFormLayout.tsx
@@ -1,364 +0,0 @@
 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
--- a/src/Form/components/SuperFormPersist.tsx
+++ b/src/Form/components/SuperFormPersist.tsx
@@ -1,66 +0,0 @@
 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
--- a/src/Form/config/ApiConfig.tsx
+++ b/src/Form/config/ApiConfig.tsx
@@ -1,43 +0,0 @@
 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
 }
--- a/src/Form/containers/Drawer/SuperFormDrawer.tsx
+++ b/src/Form/containers/Drawer/SuperFormDrawer.tsx
@@ -1,146 +0,0 @@
 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
--- a/src/Form/containers/Modal/SuperFormModal.tsx
+++ b/src/Form/containers/Modal/SuperFormModal.tsx
@@ -1,105 +0,0 @@
 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
--- a/src/Form/containers/Popover/SuperFormPopover.tsx
+++ b/src/Form/containers/Popover/SuperFormPopover.tsx
@@ -1,116 +0,0 @@
 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
--- a/src/Form/hooks/use-drawer-form-state.tsx
+++ b/src/Form/hooks/use-drawer-form-state.tsx
@@ -1,96 +0,0 @@
 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 }
--- a/src/Form/hooks/use-modal-form-state.tsx
+++ b/src/Form/hooks/use-modal-form-state.tsx
@@ -1,97 +0,0 @@
 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 }
--- a/src/Form/hooks/use-popover-form-state.tsx
+++ b/src/Form/hooks/use-popover-form-state.tsx
@@ -1,97 +0,0 @@
 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 }
--- a/src/Form/hooks/use-subscribe.tsx
+++ b/src/Form/hooks/use-subscribe.tsx
@@ -1,40 +0,0 @@
 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
--- a/src/Form/hooks/use-super-form-state.tsx
+++ b/src/Form/hooks/use-super-form-state.tsx
@@ -1,38 +0,0 @@
 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 }
--- a/src/Form/hooks/useRemote.tsx
+++ b/src/Form/hooks/useRemote.tsx
@@ -1,123 +0,0 @@
 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
--- a/src/Form/store/FormLayout.store.tsx
+++ b/src/Form/store/FormLayout.store.tsx
@@ -1,48 +0,0 @@
 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)
 }
--- a/src/Form/store/SuperForm.store.tsx
+++ b/src/Form/store/SuperForm.store.tsx
@@ -1,22 +0,0 @@
 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
--- a/src/Form/styles/Form.module.css
+++ b/src/Form/styles/Form.module.css
@@ -1,10 +0,0 @@
 .disabled {
  pointer-events: none;
  opacity: 0.9;
 }
 .sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
 }
--- a/src/Form/types/form.types.ts
+++ b/src/Form/types/form.types.ts
@@ -1,135 +0,0 @@
 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
 }
--- a/src/Form/types/index.ts
+++ b/src/Form/types/index.ts
@@ -1,2 +0,0 @@
 export * from './form.types'
 export * from './remote.types'
--- a/src/Form/types/remote.types.ts
+++ b/src/Form/types/remote.types.ts
@@ -1,11 +0,0 @@
 export interface RemoteConfig {
  apiOptions?: RequestInit
  apiURL?: string
  enabled?: boolean
  fetchSize?: number
  hotFields?: string[]
  primaryKey?: string
  sqlFilter?: string
  tableName: string
  uniqueKeys?: string[]
 }
--- a/src/Form/utils/fetchClient.ts
+++ b/src/Form/utils/fetchClient.ts
@@ -1,161 +0,0 @@
 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,
 }
--- a/src/Form/utils/getNestedValue.ts
+++ b/src/Form/utils/getNestedValue.ts
@@ -1,9 +0,0 @@
 /**
 * 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)
 }
--- a/src/Form/utils/openConfirmModal.ts
+++ b/src/Form/utils/openConfirmModal.ts
@@ -1,30 +0,0 @@
 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,
  })
--- a/src/Former/Former.store.tsx
+++ b/src/Former/Former.store.tsx
@@ -1,3 +1,4 @@
 import { newUUID } from '@warkypublic/artemis-kit';
 import { createSyncStore } from '@warkypublic/zustandsyncstore';
 import { produce } from 'immer';
@@ -15,7 +16,7 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
    load: async (reset?: boolean) => {
      try {
        set({ loading: true });
-        const keyName = get()?.apiKeyField || 'id';
+        const keyName = get()?.uniqueKeyField || 'id';
        const keyValue = (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
        if (get().onAPICall && keyValue !== undefined) {
          let data = await get().onAPICall!(
@@ -97,7 +98,7 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
          }
          if (get().onAPICall) {
-            const keyName = get()?.apiKeyField || 'id';
+            const keyName = get()?.uniqueKeyField || 'id';
            const keyValue =
              (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
            const savedData = await get().onAPICall!(
@@ -111,6 +112,7 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
            }
            set({ loading: false, values: savedData });
            get().onChange?.(savedData);
            formMethods.reset(savedData); //reset with saved data to clear dirty state
            if (!keepOpen) {
              get().onClose?.(savedData);
            }
@@ -118,6 +120,7 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
          }
          set({ loading: false, values: data });
          formMethods.reset(data); //reset with saved data to clear dirty state
          get().onChange?.(data);
          if (!keepOpen) {
            get().onClose?.(data);
@@ -168,17 +171,38 @@ const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
    },
    values: undefined,
  }),
-  ({ onConfirmDelete, primeData, request, values }) => {
+  ({ id, onClose, onConfirmDelete, primeData, request, useStoreApi, values }) => {
    let _onConfirmDelete = onConfirmDelete;
    if (!onConfirmDelete) {
      _onConfirmDelete = async () => {
        return confirm('Are you sure you want to delete this item?');
      };
    }
    return {
      id: !id ? newUUID() : id,
      onClose: () => {
        const dirty = useStoreApi.getState().dirty;
        const setState = useStoreApi.getState().setState;
        if (dirty) {
          if (confirm('You have unsaved changes. Are you sure you want to close?')) {
            if (onClose) {
              onClose();
            } else {
              setState('opened', false);
            }
          }
        } else {
          if (onClose) {
            onClose();
          } else {
            setState('opened', false);
          }
        }
      },
      onConfirmDelete: _onConfirmDelete,
      primeData,
-      request: request || 'insert',
+      request: (request || 'insert').replace('change', 'update'),
      values: { ...primeData, ...values },
    };
  }
--- a/src/Former/Former.tsx
+++ b/src/Former/Former.tsx
@@ -78,11 +78,20 @@ const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & Props
          return await validate();
        },
      }),
-      [getState, onChange]
+      [getState, onChange, validate, save, reset, setState, onClose, onOpen]
    );
    useEffect(() => {
      setState('getFormMethods', () => formMethods);
      if (formMethods) {
        formMethods.subscribe({
          callback: ({ isDirty }) => {
            setState('dirty', isDirty);
          },
          formState: { isDirty: true },
        });
      }
    }, [formMethods]);
    return (
--- a/src/Former/Former.types.ts
+++ b/src/Former/Former.types.ts
@@ -1,37 +1,53 @@
-import type { LoadingOverlayProps, ScrollAreaAutosizeProps } from '@mantine/core';
+import type {
  ButtonProps,
  GroupProps,
  LoadingOverlayProps,
  ScrollAreaAutosizeProps,
 } from '@mantine/core';
 import type React from 'react';
 import type { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
-export interface FormerProps<T extends FieldValues = any> {
+export type FormerAPICallType<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>;
+) => Promise<T>;
 export interface FormerProps<T extends FieldValues = any> {
  afterGet?: (data: T) => Promise<T> | void;
  afterSave?: (data: T) => Promise<void> | void;
  beforeSave?: (data: T) => Promise<T> | T;
  dirty?: boolean;
  disableHTMlForm?: boolean;
  id?: string;
  keepOpen?: boolean;
  layout?: {
    buttonAreaGroupProps?: GroupProps;
    buttonOnTop?: boolean;
    closeButtonProps?: ButtonProps;
    closeButtonTitle?: React.ReactNode;
    renderBottom?: FormerSectionRender<T>;
    renderTop?: FormerSectionRender<T>;
    saveButtonProps?: ButtonProps;
    saveButtonTitle?: React.ReactNode;
    title?: string;
  };
  onAPICall?: FormerAPICallType<T>;
  onCancel?: () => void;
  onChange?: (value: T) => void;
  onClose?: (data?: T) => void;
  onConfirmDelete?: (values?: T) => Promise<boolean>;
  onOpen?: (data?: T) => void;
  onOpen?: (data?: T) => void;
  opened?: boolean;
  primeData?: T;
  request: RequestType;
  uniqueKeyField?: string;
  useFormProps?: UseFormProps<T>;
  values?: T;
-  wrapper?: (
+
-    children: React.ReactNode,
+  wrapper?: FormerSectionRender<T>;
    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> {
@@ -44,6 +60,14 @@ export interface FormerRef<T extends FieldValues = any> {
  validate: () => Promise<boolean>;
 }
 export type FormerSectionRender<T extends FieldValues = any> = (
  children: React.ReactNode,
  opened: boolean | undefined,
  onClose: ((data?: T) => void) | undefined,
  onOpen: ((data?: T) => void) | undefined,
  getState: FormerState<T>['getState']
 ) => React.ReactNode;
 export interface FormerState<T extends FieldValues = any> {
  deleteConfirmed?: boolean;
  error?: string;
--- a/src/Former/FormerButtonArea.tsx
+++ b/src/Former/FormerButtonArea.tsx
@@ -0,0 +1,85 @@
 import { Button, Group, Tooltip } from '@mantine/core';
 import { IconDeviceFloppy, IconX } from '@tabler/icons-react';
 import { useFormerStore } from './Former.store';
 export const FormerButtonArea = () => {
  const {
    buttonAreaGroupProps,
    closeButtonProps,
    closeButtonTitle,
    dirty,
    onClose,
    request,
    save,
    saveButtonProps,
    saveButtonTitle,
  } = useFormerStore((state) => ({
    buttonAreaGroupProps: state.layout?.buttonAreaGroupProps,
    closeButtonProps: state.layout?.closeButtonProps,
    closeButtonTitle: state.layout?.closeButtonTitle,
    dirty: state.dirty,
    onClose: state.onClose,
    request: state.request,
    save: state.save,
    saveButtonProps: state.layout?.saveButtonProps,
    saveButtonTitle: state.layout?.saveButtonTitle,
  }));
  const disabledSave =
    ['select', 'view'].includes(request || '') || (['update'].includes(request || '') && !dirty);
  return (
    <Group
      justify="center"
      p="xs"
      style={{ boxShadow: '2px 2px 5px rgba(47, 47, 47, 0.1)' }}
      w="100%"
      {...buttonAreaGroupProps}
    >
      <Group grow justify="space-evenly">
        {typeof onClose === 'function' && (
          <Button
            color="orange"
            leftSection={<IconX />}
            miw={'8rem'}
            px="md"
            size="sm"
            {...closeButtonProps}
            onClick={() => {
              onClose();
            }}
          >
            {closeButtonTitle || 'Close'}
          </Button>
        )}
        <Tooltip
          label={
            disabledSave ? (
              <p>
                Cannot save in view or select mode, or no changes made. <br />
                Try changing some values.
              </p>
            ) : (
              <p>Save the current record</p>
            )
          }
        >
          <Button
            bg={request === 'delete' ? 'red' : undefined}
            color="green"
            leftSection={<IconDeviceFloppy />}
            miw={'8rem'}
            px="md"
            size="sm"
            {...saveButtonProps}
            disabled={disabledSave}
            onClick={() => save()}
          >
            {saveButtonTitle || 'Save'}
          </Button>
        </Tooltip>
      </Group>
    </Group>
  );
 };
--- a/src/Former/FormerLayout.tsx
+++ b/src/Former/FormerLayout.tsx
@@ -2,14 +2,18 @@ import { LoadingOverlay, ScrollAreaAutosize } from '@mantine/core';
 import { type PropsWithChildren, useEffect } from 'react';
 import { useFormerStore } from './Former.store';
 import { FormerLayoutBottom } from './FormerLayoutBottom';
 import { FormerLayoutTop } from './FormerLayoutTop';
 export const FormerLayout = (props: PropsWithChildren) => {
  const {
    disableHTMlForm,
    getFormMethods,
    id,
    load,
    loading,
    loadingOverlayProps,
    opened,
    request,
    reset,
    save,
@@ -17,12 +21,15 @@ export const FormerLayout = (props: PropsWithChildren) => {
  } = useFormerStore((state) => ({
    disableHTMlForm: state.disableHTMlForm,
    getFormMethods: state.getFormMethods,
    id: state.id,
    load: state.load,
    loading: state.loading,
    loadingOverlayProps: state.loadingOverlayProps,
    opened: state.opened,
    request: state.request,
    reset: state.reset,
    save: state.save,
    scrollAreaProps: state.scrollAreaProps,
  }));
@@ -33,10 +40,11 @@ export const FormerLayout = (props: PropsWithChildren) => {
        load(true);
      }
    }
-  }, [getFormMethods, request]);
+  }, [getFormMethods, request, opened]);
  if (disableHTMlForm) {
  return (
    <>
      <FormerLayoutTop />
      <ScrollAreaAutosize
        offsetScrollbars
        scrollbarSize={4}
@@ -44,50 +52,39 @@ export const FormerLayout = (props: PropsWithChildren) => {
        {...scrollAreaProps}
        style={{
          height: '100%',
          maxHeight: '89vh',
          padding: '0.25rem',
          width: '100%',
          ...scrollAreaProps?.style,
        }}
      >
        {disableHTMlForm ? (
          // eslint-disable-next-line react/no-unknown-property
          <div key={`former_d${id}`} x-data-request={request}>
            {props.children}
-        <LoadingOverlay
+          </div>
-          loaderProps={{ type: 'bars' }}
+        ) : (
-          overlayProps={{
+          <form
-            backgroundOpacity: 0.5,
+            id={`former_f${id}`}
-          }}
+            key={`former_${id}`}
-          {...loadingOverlayProps}
+            onReset={(e) => reset(e)}
-          visible={loading}
+            onSubmit={(e) => save(e)}
-        />
+            // eslint-disable-next-line react/no-unknown-property
-      </ScrollAreaAutosize>
+            x-data-request={request}
    );
  }
  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>
        )}
        <LoadingOverlay
          loaderProps={{ type: 'bars' }}
          overlayProps={{
            backgroundOpacity: 0.5,
          }}
          {...loadingOverlayProps}
          visible={loading}
        />
      </ScrollAreaAutosize>
      <FormerLayoutBottom />
    </>
  );
 };
--- a/src/Former/FormerLayoutBottom.tsx
+++ b/src/Former/FormerLayoutBottom.tsx
@@ -0,0 +1,23 @@
 import { useFormerStore } from './Former.store';
 import { FormerButtonArea } from './FormerButtonArea';
 export const FormerLayoutBottom = () => {
  const { buttonOnTop, getState, opened, renderBottom } = useFormerStore((state) => ({
    buttonOnTop: state.layout?.buttonOnTop,
    getState: state.getState,
    opened: state.opened,
    renderBottom: state.layout?.renderBottom,
  }));
  if (renderBottom) {
    return renderBottom(
      <FormerButtonArea />,
      opened,
      getState('onClose'),
      getState('onOpen'),
      getState
    );
  }
  return buttonOnTop ? <></> : <FormerButtonArea />;
 };
--- a/src/Former/FormerLayoutTop.tsx
+++ b/src/Former/FormerLayoutTop.tsx
@@ -0,0 +1,22 @@
 import { useFormerStore } from './Former.store';
 import { FormerButtonArea } from './FormerButtonArea';
 export const FormerLayoutTop = () => {
  const { buttonOnTop, getState, opened, renderTop } = useFormerStore((state) => ({
    buttonOnTop: state.layout?.buttonOnTop,
    getState: state.getState,
    opened: state.opened,
    renderTop: state.layout?.renderTop,
  }));
  if (renderTop) {
    return renderTop(
      <FormerButtonArea />,
      opened,
      getState('onClose'),
      getState('onOpen'),
      getState
    );
  }
  return buttonOnTop ? <FormerButtonArea /> : <></>;
 };
--- a/src/Former/FormerResolveSpecAPI.ts
+++ b/src/Former/FormerResolveSpecAPI.ts
@@ -0,0 +1,72 @@
 import type { FormerAPICallType } from './Former.types';
 interface ResolveSpecRequest {
  data?: Record<string, any>;
  operation: 'create' | 'delete' | 'read' | 'update';
  options?: {
    columns?: string[];
    computedColumns?: any[];
    customOperators?: any[];
    filters?: Array<{ column: string; operator: string; value: any }>;
    limit?: number;
    offset?: number;
    preload?: string[];
    sort?: string[];
  };
 }
 function FormerResolveSpecAPI(options: {
  authToken: string;
  fetchOptions?: Partial<RequestInit>;
  signal?: AbortSignal;
  url: string;
 }): FormerAPICallType {
  return async (mode, request, value, key) => {
    const baseUrl = options.url.replace(/\/$/, '');
    // Build URL: /[schema]/[table_or_entity]/[id]
    let url = `${baseUrl}`;
    if (request !== 'insert' && key) {
      url = `${url}/${key}`;
    }
    // Build ResolveSpec request body
    const resolveSpecRequest: ResolveSpecRequest = {
      operation:
        mode === 'read'
          ? 'read'
          : request === 'delete'
            ? 'delete'
            : request === 'update'
              ? 'update'
              : 'create',
    };
    if (mode === 'mutate') {
      resolveSpecRequest.data = value;
    }
    const fetchOptions: RequestInit = {
      cache: 'no-cache',
      signal: options.signal,
      ...options.fetchOptions,
      body: JSON.stringify(resolveSpecRequest),
      headers: {
        Authorization: `Bearer ${options.authToken}`,
        'Content-Type': 'application/json',
        ...options.fetchOptions?.headers,
      },
      method: 'POST',
    };
    const response = await fetch(url, fetchOptions);
    if (!response.ok) {
      throw new Error(`API request failed with status ${response.status}`);
    }
    const data = await response.json();
    return data as any;
  };
 }
 export { FormerResolveSpecAPI, type ResolveSpecRequest };
--- a/src/Former/FormerRestHeadSpecAPI.ts
+++ b/src/Former/FormerRestHeadSpecAPI.ts
@@ -0,0 +1,50 @@
 import type { FormerAPICallType } from './Former.types';
 function FormerRestHeadSpecAPI(options: {
  authToken: string;
  fetchOptions?: Partial<RequestInit>;
  signal?: AbortSignal;
  url: string;
 }): FormerAPICallType {
  return async (mode, request, value, key) => {
    const baseUrl = options.url ?? ''; // Remove trailing slashes
    let url = baseUrl;
    const fetchOptions: RequestInit = {
      cache: 'no-cache',
      signal: options.signal,
      ...options.fetchOptions,
      body: mode === 'mutate' && request !== 'delete' ? JSON.stringify(value) : undefined,
      headers: {
        Authorization: `Bearer ${options.authToken}`,
        'Content-Type': 'application/json',
        ...options.fetchOptions?.headers,
      },
      method:
        mode === 'read'
          ? 'GET'
          : request === 'delete'
            ? 'DELETE'
            : request === 'update'
              ? 'PUT'
              : 'POST',
    };
    if (request !== 'insert') {
      url = `${baseUrl}/${key}`;
    }
    const response = await fetch(url, fetchOptions);
    if (!response.ok) {
      throw new Error(`API request failed with status ${response.status}`);
    }
    if (mode === 'read') {
      const data = await response.json();
      return data as any;
    } else {
      return value as any;
    }
  };
 }
 export { FormerRestHeadSpecAPI };
--- a/src/Former/FormerWrappers.tsx
+++ b/src/Former/FormerWrappers.tsx
@@ -0,0 +1,116 @@
 import {
  Drawer,
  type DrawerProps,
  Modal,
  type ModalProps,
  Popover,
  type PopoverProps,
 } from '@mantine/core';
 import type { FormerProps } from './Former.types';
 import { Former } from './Former';
 export const FormerDialog = (props: { former: FormerProps } & DrawerProps) => {
  const { children, former, onClose, opened, ...rest } = props;
  return (
    <Former
      {...former}
      onClose={onClose}
      opened={opened}
      wrapper={(children, opened, onClose, _onOpen, getState) => {
        const values = getState('values');
        const request = getState('request');
        const uniqueKeyField = getState('uniqueKeyField') ?? 'id';
        return (
          <Drawer
            closeOnClickOutside={false}
            h={'100%'}
            title={
              request === 'delete'
                ? `Delete Record - ${values?.[uniqueKeyField]}`
                : request === 'insert'
                  ? 'New Record'
                  : `Edit Record - ${values?.[uniqueKeyField]}`
            }
            {...rest}
            onClose={() => onClose?.()}
            opened={opened ?? false}
          >
            {children}
          </Drawer>
        );
      }}
    >
      {children}
    </Former>
  );
 };
 export const FormerModel = (props: { former: FormerProps } & ModalProps) => {
  const { children, former, onClose, opened, ...rest } = props;
  return (
    <Former
      {...former}
      onClose={onClose}
      opened={opened}
      wrapper={(children, opened, onClose, _onOpen, getState) => {
        const values = getState('values');
        const request = getState('request');
        const uniqueKeyField = getState('uniqueKeyField') ?? 'id';
        return (
          <Modal
            closeOnClickOutside={false}
            h={'100%'}
            title={
              request === 'delete'
                ? `Delete Record - ${values?.[uniqueKeyField]}`
                : request === 'insert'
                  ? 'New Record'
                  : `Edit Record - ${values?.[uniqueKeyField]}`
            }
            {...rest}
            onClose={() => onClose?.()}
            opened={opened ?? false}
          >
            {children}
          </Modal>
        );
      }}
    >
      {children}
    </Former>
  );
 };
 export const FormerPopover = (
  props: { former: FormerProps; target: React.ReactNode } & PopoverProps
 ) => {
  const { children, former, onClose, opened, target, ...rest } = props;
  return (
    <Former
      {...former}
      onClose={onClose}
      opened={opened}
      wrapper={(children, opened, onClose) => {
        return (
          <Popover
            closeOnClickOutside={false}
            middlewares={{ inline: true }}
            trapFocus
            width={250}
            withArrow
            {...rest}
            onClose={() => onClose?.()}
            opened={opened ?? false}
          >
            <Popover.Target>{target}</Popover.Target>
            <Popover.Dropdown>{children}</Popover.Dropdown>
          </Popover>
        );
      }}
    >
      {children}
    </Former>
  );
 };
--- a/src/Former/index.ts
+++ b/src/Former/index.ts
@@ -0,0 +1,6 @@
 export { Former } from './Former';
 export type * from './Former.types';
 export { FormerButtonArea } from './FormerButtonArea';
 export { FormerResolveSpecAPI } from './FormerResolveSpecAPI';
 export { FormerRestHeadSpecAPI } from './FormerRestHeadSpecAPI';
 export { FormerDialog, FormerModel, FormerPopover } from './FormerWrappers';
--- a/src/Former/stories/apiFormData.tsx
+++ b/src/Former/stories/apiFormData.tsx
@@ -0,0 +1,40 @@
 import { TextInput } from '@mantine/core';
 import { useUncontrolled } from '@mantine/hooks';
 import { Controller } from 'react-hook-form';
 import { Former } from '../Former';
 export const ApiFormData = (props: {
  onChange?: (values: Record<string, unknown>) => void;
  primeData?: Record<string, unknown>;
  values?: Record<string, unknown>;
 }) => {
  const [values, setValues] = useUncontrolled<Record<string, unknown>>({
    defaultValue: { authToken: '', url: '', ...props.primeData },
    finalValue: { authToken: '', url: '', ...props.primeData },
    onChange: props.onChange,
    value: props.values,
  });
  return (
    <Former
      disableHTMlForm
      id="api-form-data"
      layout={{ saveButtonTitle: 'Save URL Parameters' }}
      onChange={setValues}
      primeData={props.primeData}
      request="update"
      uniqueKeyField="id"
      values={values}
    >
      <Controller
        name="url"
        render={({ field }) => <TextInput label="URL" type="url" {...field} />}
      />
      <Controller
        name="authToken"
        render={({ field }) => <TextInput label="Auth Token" type="password" {...field} />}
      />
    </Former>
  );
 };
--- a/src/Former/stories/example.tsx
+++ b/src/Former/stories/example.tsx
@@ -1,21 +1,53 @@
-import { Button, Drawer, Group, Paper, Select, Stack, Switch } from '@mantine/core';
+import { Button, Group, Select, Stack, Switch } from '@mantine/core';
 import { useRef, useState } from 'react';
 import { Controller } from 'react-hook-form';
-import type { FormerRef } from '../Former.types';
+import type { FormerAPICallType, FormerProps, FormerRef } from '../Former.types';
 import { Former } from '../Former';
 import { FormerRestHeadSpecAPI } from '../FormerRestHeadSpecAPI';
 import { FormerModel } from '../FormerWrappers';
 import { ApiFormData } from './apiFormData';
 const StubAPI = (): FormerAPICallType => (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);
  });
 };
 export const FormTest = () => {
  const [request, setRequest] = useState<null | string>('insert');
  const [wrapped, setWrapped] = useState(false);
  const [disableHTML, setDisableHTML] = useState(false);
  const [apiOptions, setApiOptions] = useState({
    authToken: '',
    type: '',
    url: '',
  });
  const [layout, setLayout] = useState({
    buttonAreaGroupProps: { justify: 'center' },
    buttonOnTop: false,
    title: 'Custom Former Title',
  } as FormerProps['layout']);
  const [open, setOpen] = useState(false);
-  const [formData, setFormData] = useState({ a: 99 });
+  const [formData, setFormData] = useState({ a: 99, rid_usernote: 3047 });
-  console.log('formData', formData);
+  //console.log('formData render', formData);
  const ref = useRef<FormerRef>(null);
  return (
    <Stack h="100%" mih="400px" w="90%">
      <Group>
        <Select
          data={['insert', 'update', 'delete', 'select', 'view']}
          onChange={setRequest}
@@ -26,6 +58,24 @@ export const FormTest = () => {
          label="Wrapped in Drawer"
          onChange={(event) => setWrapped(event.currentTarget.checked)}
        />
        <Switch
          checked={disableHTML}
          label="Disable HTML Form"
          onChange={(event) => setDisableHTML(event.currentTarget.checked)}
        />
        <Switch
          checked={layout?.buttonOnTop ?? false}
          label="Button On Top"
          onChange={(event) => setLayout({ ...layout, buttonOnTop: event.currentTarget.checked })}
        />
        <Switch
          checked={apiOptions.type === 'api'}
          label="Use API"
          onChange={(event) =>
            setApiOptions({ ...apiOptions, type: event.currentTarget.checked ? 'api' : '' })
          }
        />
      </Group>
      <Button onClick={() => setOpen(true)}>Open Former Drawer</Button>
      <Group>
        <Button
@@ -46,56 +96,53 @@ export const FormTest = () => {
          Test Show/Hide
        </Button>
      </Group>
      <FormerModel former={{ request: 'insert' }} onClose={() => setOpen(false)} opened={open}>
        <div>Test</div>
      </FormerModel>
      <Former
-        //wrapper={(children, getState) => <div>{children}</div>}
+        disableHTMlForm={disableHTML}
-        //opened={true}
+        layout={layout}
-        apiKeyField="a"
+        onAPICall={
-        onAPICall={(mode, request, value) => {
+          apiOptions.type === 'api'
-          console.log('API Call', mode, request, value);
+            ? FormerRestHeadSpecAPI({
-          if (mode === 'read') {
+                authToken: apiOptions.authToken,
-            return new Promise((resolve) => {
+                url: apiOptions.url,
-              setTimeout(() => {
+              })
-                resolve({ a: 'Another Value', test: 'Loaded Value' });
+            : StubAPI()
              }, 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}
        //wrapper={(children, getState) => <div>{children}</div>}
        //opened={true}
        uniqueKeyField="rid_usernote"
        useFormProps={{ criteriaMode: 'all', shouldUseNativeValidation: false }}
        values={formData}
-        wrapper={
+        // wrapper={
-          wrapped
+        //   wrapped
-            ? (children, opened, onClose, onOpen, getState) => {
+        //     ? (children, opened, onClose, _onOpen, getState) => {
-                const values = getState('values');
+        //         const values = getState('values');
-                return (
+        //         return (
-                  <Drawer
+        //           <Drawer
-                    h={'100%'}
+        //             h={'100%'}
-                    onClose={() => onClose?.()}
+        //             onClose={() => onClose?.()}
-                    opened={opened ?? false}
+        //             opened={opened ?? false}
-                    title={`Drawer Former - Current A Value: ${values?.a}`}
+        //             title={`Drawer Former - Current A Value: ${values?.a}`}
-                    w={'50%'}
+        //             w={'50%'}
        //           >
        //             <Paper h="100%" shadow="sm" w="100%" withBorder>
        //               {children}
        //             </Paper>
        //           </Drawer>
        //         );
        //       }
        //     : undefined
        // }
      >
-                    <Paper h="100%" shadow="sm" w="100%" withBorder>
+        <Stack pb={'400px'}>
                      {children}
                      <Button>Test Save</Button>
                    </Paper>
                  </Drawer>
                );
              }
            : undefined
        }
      >
        <Stack h="1200px">
          <Stack>
            <Controller
              name="test"
@@ -106,13 +153,28 @@ export const FormTest = () => {
              render={({ field }) => <input type="text" {...field} placeholder="B" />}
              rules={{ required: 'Field is required' }}
            />
            <Controller
              name="note"
              render={({ field }) => <input type="text" {...field} placeholder="note" />}
              rules={{ required: 'Field is required' }}
            />
          </Stack>
          {!disableHTML && (
            <Stack>
-            <button type="submit">Submit</button>
+              <button type="submit">HTML Submit</button>
-            <button type="reset">Reset</button>
+              <button type="reset">HTML Reset</button>
            </Stack>
          )}
        </Stack>
      </Former>
      {apiOptions.type === 'api' && (
        <ApiFormData
          onChange={(values) => {
            setApiOptions({ ...apiOptions, ...values });
          }}
          values={apiOptions}
        />
      )}
    </Stack>
  );
 };
--- a/src/Former/todo.md
+++ b/src/Former/todo.md
@@ -1,10 +1,12 @@
- [ ] Headerspec API
+- [x] Wrapper must receive button areas etc. Better scroll areas.
- [ ] Relspec API
+- [x] Predefined wrappers (Model,Dialog,notification,popover)
 - [x] Headerspec API
 - [x] Relspec API
 - [ ] SocketSpec API
- [ ] Layout Tool
+- [x] Layout Tool
-  - [ ] Header Section
+  - [x] Header Section
-  - [ ] Button Section
+  - [x] Button Section
-  - [ ] Footer Section
+  - [x] Footer Section
 - [ ] Different Loaded for saving vs loading
 - [ ] Better Confirm Dialog
 - [ ] Reset Confirm Dialog
--- a/src/FormerControllers/Buttons/ButtonCtrl.tsx
+++ b/src/FormerControllers/Buttons/ButtonCtrl.tsx
@@ -0,0 +1,35 @@
 import { Button, type ButtonProps, Tooltip } from '@mantine/core';
 import { useState } from 'react';
 import type { SpecialIDProps } from '../FormerControllers.types';
 const ButtonCtrl = (
  props: {
    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
  } & Omit<ButtonProps, 'onClick'> &
    SpecialIDProps
 ) => {
  const [loading, setLoading] = useState(false);
  return (
    <Tooltip label={props.tooltip ?? ''} withArrow>
      <Button
        loaderProps={{
          type: 'bars',
        }}
        {...props}
        loading={loading || props.loading}
        onClick={(e) => {
          if (props.onClick) {
            setLoading(true);
            props.onClick(e).finally(() => setLoading(false));
          }
        }}
      >
        {props.children}
      </Button>
    </Tooltip>
  );
 };
 export { ButtonCtrl };
 export default ButtonCtrl;
--- a/src/FormerControllers/Buttons/IconButtonCtrl.tsx
+++ b/src/FormerControllers/Buttons/IconButtonCtrl.tsx
@@ -0,0 +1,36 @@
 import { ActionIcon, type ActionIconProps, Tooltip, VisuallyHidden } from '@mantine/core';
 import { useState } from 'react';
 import type { SpecialIDProps } from '../FormerControllers.types';
 const IconButtonCtrl = (
  props: {
    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
  } & Omit<ActionIconProps, 'onClick'> &
    SpecialIDProps
 ) => {
  const [loading, setLoading] = useState(false);
  return (
    <Tooltip label={props.tooltip ?? ''} withArrow>
      <ActionIcon
        loaderProps={{
          type: 'bars',
        }}
        {...props}
        loading={loading || props.loading}
        onClick={(e) => {
          if (props.onClick) {
            setLoading(true);
            props.onClick(e).finally(() => setLoading(false));
          }
        }}
      >
        {props.children}
        <VisuallyHidden>Action Button: {props.tooltip ?? props.sid ?? ''}</VisuallyHidden>
      </ActionIcon>
    </Tooltip>
  );
 };
 export { IconButtonCtrl };
 export default IconButtonCtrl;
--- a/src/FormerControllers/FormerControllers.types.ts
+++ b/src/FormerControllers/FormerControllers.types.ts
@@ -0,0 +1,8 @@
 import type { ControllerProps } from 'react-hook-form';
 export type FormerControllersProps = Omit<ControllerProps, 'render'>;
 export interface SpecialIDProps {
  sid?: string;
  tooltip?: string;
 }
--- a/src/FormerControllers/Inputs/NativeSelectCtrl.tsx
+++ b/src/FormerControllers/Inputs/NativeSelectCtrl.tsx
@@ -0,0 +1,30 @@
 import { NativeSelect, type NativeSelectProps, Tooltip } from '@mantine/core';
 import { Controller } from 'react-hook-form';
 import type { FormerControllersProps, SpecialIDProps } from '../FormerControllers.types';
 const NativeSelectCtrl = (props: FormerControllersProps & NativeSelectProps & SpecialIDProps) => {
  const { control, name, sid, tooltip, ...innerProps } = props;
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, formState }) => (
        <Tooltip label={tooltip ?? ''} withArrow>
          <NativeSelect
            {...innerProps}
            {...field}
            disabled={formState.disabled}
            id={`field_${name}_${sid ?? ''}`}
            key={`field_${name}_${sid ?? ''}`}
          >
            {props.children}
          </NativeSelect>
        </Tooltip>
      )}
    />
  );
 };
 export { NativeSelectCtrl };
 export default NativeSelectCtrl;
--- a/src/FormerControllers/Inputs/NumberInputCtrl.tsx
+++ b/src/FormerControllers/Inputs/NumberInputCtrl.tsx
@@ -0,0 +1,36 @@
 import { NumberInput, type NumberInputProps, Tooltip } from '@mantine/core';
 import { Controller } from 'react-hook-form';
 import type { FormerControllersProps, SpecialIDProps } from '../FormerControllers.types';
 const NumberInputCtrl = (props: FormerControllersProps & NumberInputProps & SpecialIDProps) => {
  const { control, name, sid, tooltip, ...textProps } = props;
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, formState }) => (
        <Tooltip label={tooltip ?? ''} withArrow>
          <NumberInput
            {...textProps}
            {...field}
            disabled={formState.disabled}
            id={`field_${name}_${sid ?? ''}`}
            key={`field_${name}_${sid ?? ''}`}
            onChange={(num) =>
              field.onChange(num !== undefined && num !== null ? Number(num) : undefined)
            }
            value={
              field.value !== undefined && field.value !== null ? Number(field.value) : undefined
            }
          >
            {props.children}
          </NumberInput>
        </Tooltip>
      )}
    />
  );
 };
 export { NumberInputCtrl };
 export default NumberInputCtrl;
--- a/src/FormerControllers/Inputs/PasswordInputCtrl.tsx
+++ b/src/FormerControllers/Inputs/PasswordInputCtrl.tsx
@@ -0,0 +1,30 @@
 import { PasswordInput, type PasswordInputProps, Tooltip } from '@mantine/core';
 import { Controller } from 'react-hook-form';
 import type { FormerControllersProps, SpecialIDProps } from '../FormerControllers.types';
 const PasswordInputCtrl = (props: FormerControllersProps & PasswordInputProps & SpecialIDProps) => {
  const { control, name, sid, tooltip, ...textProps } = props;
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, formState }) => (
        <Tooltip label={tooltip ?? ''} withArrow>
          <PasswordInput
            {...textProps}
            {...field}
            disabled={formState.disabled}
            id={`field_${name}_${sid ?? ''}`}
            key={`field_${name}_${sid ?? ''}`}
          >
            {props.children}
          </PasswordInput>
        </Tooltip>
      )}
    />
  );
 };
 export { PasswordInputCtrl };
 export default PasswordInputCtrl;
--- a/src/FormerControllers/Inputs/SwitchCtrl.tsx
+++ b/src/FormerControllers/Inputs/SwitchCtrl.tsx
@@ -0,0 +1,32 @@
 import { Switch, type SwitchProps, Tooltip } from '@mantine/core';
 import { Controller } from 'react-hook-form';
 import type { FormerControllersProps, SpecialIDProps } from '../FormerControllers.types';
 const SwitchCtrl = (props: FormerControllersProps & SpecialIDProps & SwitchProps) => {
  const { control, name, sid, tooltip, ...innerProps } = props;
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, formState }) => (
        <Tooltip label={tooltip ?? ''} withArrow>
          <Switch
            {...innerProps}
            {...field}
            checked={!!field.value}
            disabled={formState.disabled}
            id={`field_${name}_${sid ?? ''}`}
            key={`field_${name}_${sid ?? ''}`}
            onChange={(e) => {
              field.onChange((e.currentTarget ?? e.target)?.checked);
            }}
          />
        </Tooltip>
      )}
    />
  );
 };
 export { SwitchCtrl };
 export default SwitchCtrl;
--- a/src/FormerControllers/Inputs/TextAreaCtrl.tsx
+++ b/src/FormerControllers/Inputs/TextAreaCtrl.tsx
@@ -0,0 +1,31 @@
 import { Textarea, type TextareaProps, Tooltip } from '@mantine/core';
 import { Controller } from 'react-hook-form';
 import type { FormerControllersProps, SpecialIDProps } from '../FormerControllers.types';
 const TextAreaCtrl = (props: FormerControllersProps & SpecialIDProps & TextareaProps) => {
  const { control, name, sid, tooltip, ...innerProps } = props;
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, formState }) => (
        <Tooltip label={tooltip ?? ''} withArrow>
          <Textarea
            minRows={4}
            {...innerProps}
            {...field}
            disabled={formState.disabled}
            id={`field_${name}_${sid ?? ''}`}
            key={`field_${name}_${sid ?? ''}`}
          >
            {props.children}
          </Textarea>
        </Tooltip>
      )}
    />
  );
 };
 export { TextAreaCtrl };
 export default TextAreaCtrl;
--- a/src/FormerControllers/Inputs/TextInputCtrl.tsx
+++ b/src/FormerControllers/Inputs/TextInputCtrl.tsx
@@ -0,0 +1,30 @@
 import { TextInput, type TextInputProps, Tooltip } from '@mantine/core';
 import { Controller } from 'react-hook-form';
 import type { FormerControllersProps, SpecialIDProps } from '../FormerControllers.types';
 const TextInputCtrl = (props: FormerControllersProps & SpecialIDProps & TextInputProps) => {
  const { control, name, sid, tooltip, ...textProps } = props;
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, formState }) => (
        <Tooltip label={tooltip ?? ''} withArrow>
          <TextInput
            {...textProps}
            {...field}
            disabled={formState.disabled}
            id={`field_${name}_${sid ?? ''}`}
            key={`field_${name}_${sid ?? ''}`}
          >
            {props.children}
          </TextInput>
        </Tooltip>
      )}
    />
  );
 };
 export { TextInputCtrl };
 export default TextInputCtrl;
--- a/src/FormerControllers/index.ts
+++ b/src/FormerControllers/index.ts
@@ -0,0 +1,7 @@
 export { ButtonCtrl } from './Buttons/ButtonCtrl';
 export { IconButtonCtrl } from './Buttons/IconButtonCtrl';
 export { NativeSelectCtrl } from './Inputs/NativeSelectCtrl';
 export { PasswordInputCtrl } from './Inputs/PasswordInputCtrl';
 export { SwitchCtrl } from './Inputs/SwitchCtrl';
 export { TextAreaCtrl } from './Inputs/TextAreaCtrl';
 export { TextInputCtrl } from './Inputs/TextInputCtrl';
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -1,5 +1,6 @@
-export * from './Gridler'
+export * from './Former';
-
+export * from './FormerControllers';
 export * from './Gridler';
 export {
  type MantineBetterMenuInstance,
@@ -7,4 +8,4 @@ export {
  MantineBetterMenusProvider,
  type MantineBetterMenuStoreState,
  useMantineBetterMenus,
-} from "./MantineBetterMenu";
+} from './MantineBetterMenu';
Author	SHA1	Message	Date
Hein	bc7262cede	RELEASING: Releasing 1 package(s) Releases: @warkypublic/oranguru@0.0.25 [skip ci]	2026-01-14 22:49:39 +02:00
Hein	0825f739f4	docs(changeset): Bump	2026-01-14 22:49:36 +02:00
Hein	0bd642e2d2	RELEASING: Releasing 1 package(s) Releases: @warkypublic/oranguru@0.0.24 [skip ci]	2026-01-14 22:44:27 +02:00
Hein	7cc09d6acb	docs(changeset): Added form controllers - New button and input controller components for the FormerControllers module	2026-01-14 22:44:15 +02:00
Hein	9df2f3b504	feat(controllers): ✨ add new input and button components * Introduced ButtonCtrl, IconButtonCtrl, NativeSelectCtrl, PasswordInputCtrl, SwitchCtrl, TextAreaCtrl, TextInputCtrl * Updated FormerControllers.types.ts to include SpecialIDProps * Enhanced lib.ts to export new components	2026-01-14 22:42:17 +02:00
Hein	e777e1fa3a	chore(form): 🗑️ remove unused form components and types * Refactor Former components to streamline functionality * Update stories to reflect changes in form structure	2026-01-14 21:56:55 +02:00
Hein	cd2f6db880	feat(form): ✨ enhance form functionality and API integration * Refactor key handling to use uniqueKeyField * Add reset functionality to clear dirty state after save * Introduce new API call specifications for REST and resolve * Implement predefined wrappers for dialogs and popovers * Update todo list to reflect completed tasks	2026-01-14 21:51:39 +02:00
Hein	e6507f44af	feat(form): ✨ enhance form layout and functionality * Add FormerButtonArea component for action buttons * Introduce FormerLayoutTop and FormerLayoutBottom for structured layout * Update Former types to include new properties * Implement dynamic ID generation for forms * Refactor example to demonstrate new layout features * Mark tasks as completed in todo.md	2026-01-14 19:35:38 +02:00
Hein	400a193a58	feat(todo): ✨ planned ideas	2026-01-12 23:25:58 +02:00
Warky	d935c6cf28	Merge pull request 'Form is to complex, needed a rewrite before I try to use it' (#1 ) from rw into main Reviewed-on: #1	2026-01-12 21:21:59 +00:00
		`@@ -1,2 +0,0 @@`
			`export * from './form.types'`
			`export * from './remote.types'`