RELEASING: Releasing 1 package(s)

Releases:
  @warkypublic/oranguru@0.0.32

[skip ci]

.changeset/config.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
+  "changelog": "@changesets/changelog-git",
   "commit": true,
   "fixed": [],
   "linked": [],

.storybook/preview.ts

@@ -1,18 +1,19 @@
-import type { Preview } from '@storybook/react-vite'
+import type { Preview } from '@storybook/react-vite';
+
 import { PreviewDecorator } from './previewDecorator';
 
 const preview: Preview = {
+  decorators: [PreviewDecorator],
   parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    layout: 'fullscreen',
   },
-  decorators: [
-    PreviewDecorator,
-  ],
 };
 
 export default preview;

.storybook/previewDecorator.tsx

@@ -1,13 +1,40 @@
-import { MantineProvider } from '@mantine/core';
 import '@mantine/core/styles.css';
 
-export function PreviewDecorator(Story: any, { parameters }: any) {
-  console.log('Rendering decorator', parameters);
+import type { Decorator } from '@storybook/react-vite';
+
+import { MantineProvider } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
+
+import { GlobalStateStoreProvider } from '../src/GlobalStateStore';
+
+export const PreviewDecorator: Decorator = (Story, context) => {
+  const { parameters } = context;
+
+  // Allow stories to opt-out of GlobalStateStore provider
+  const useGlobalStore = parameters.globalStore !== false;
+
+  // Use 100% for fullscreen layout, 100vh otherwise
+  const isFullscreen = parameters.layout === 'fullscreen';
+  const containerStyle = {
+    height: isFullscreen ? '100%' : '100vh',
+    width: isFullscreen ? '100%' : '100vw',
+  };
+
   return (
     <MantineProvider>
-      <div style={{ height: 'calc(100vh - 64px)', width: 'calc(100vw - 64px)' }}>
-        <Story key={'mainStory'} />
+      <ModalsProvider>
+        {useGlobalStore ? (
+          <GlobalStateStoreProvider fetchOnMount={false}>
+            <div style={containerStyle}>
+              <Story  />
             </div>
+          </GlobalStateStoreProvider>
+        ) : (
+          <div style={containerStyle}>
+            <Story  />
+          </div>
+        )}
+      </ModalsProvider>
     </MantineProvider>
   );
-}
+};

CHANGELOG.md

@@ -1,5 +1,173 @@
 # @warkypublic/zustandsyncstore
 
+## 0.0.32
+
+### Patch Changes
+
+- 53e6b7b: Newest release
+
+## 0.0.31
+
+### Patch Changes
+
+- ac6dcbf: Error Boundry
+
+## 0.0.30
+
+### Patch Changes
+
+- 89fed20: fix: update GridlerStore setState type to accept full state values
+
+## 0.0.29
+
+### Patch Changes
+
+- 5180f52: feat(Former): ✨ update layout to use buttonArea prop instead of buttonOnTop
+
+## 0.0.28
+
+### Patch Changes
+
+- 287dbcf: 1
+
+## 0.0.27
+
+### Patch Changes
+
+- 9d90706: feat(Gridler): ✨ add isValuesInPages method and update state handling
+
+## 0.0.26
+
+### Patch Changes
+
+- 3e460ae: fixed Gridler selectFirstRow
+
+## 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
+
+- 3205411: Using the effect of array as feature.
+
+## 0.0.22
+
+### Patch Changes
+
+- 7c1d478: Possible selection fixes
+
+## 0.0.21
+
+### Patch Changes
+
+- 6664c98: Calls onchange on cell click since selection does not change.
+
+## 0.0.20
+
+### Patch Changes
+
+- 30581de: Version bump
+
+## 0.0.19
+
+### Patch Changes
+
+- 1b2bf62: Fixed refresh bug
+
+## 0.0.18
+
+### Patch Changes
+
+- 7cfefa9: API props change bug
+
+## 0.0.17
+
+### Patch Changes
+
+- 03210a3: Updated selected cols bug
+
+## 0.0.16
+
+### Patch Changes
+
+- 5e922df: A Few fixes
+
+## 0.0.15
+
+### Patch Changes
+
+- a1202f9: Hopefully fix the options not always loading
+
+## 0.0.14
+
+### Patch Changes
+
+- 864188c: Added searchfields
+
+## 0.0.13
+
+### Patch Changes
+
+- b4058f1: Fixed search and allow row selection for only rows with keys
+
+## 0.0.12
+
+### Patch Changes
+
+- 57c72e6: Search String and Better GoAPI functionality
+
+## 0.0.11
+
+### Patch Changes
+
+- 54deac6: Added refs and exports, isEmpty
+
+## 0.0.10
+
+### Patch Changes
+
+- 64cfed8: Scroll to and forwarded ref
+
+## 0.0.9
+
+### Patch Changes
+
+- 5d8388c: Added selectFirstRowOnMount and fixed selection of first row
+
+## 0.0.8
+
+### Patch Changes
+
+- cdcb5c2: Fixed memo of options in GridlerAPIAdaptor
+
+## 0.0.7
+
+### Patch Changes
+
+- b49fada: Extra api options, local data options
+
+## 0.0.6
+
+### Patch Changes
+
+- 182a5f8: Flex changes and event handlers
+
+## 0.0.5
+
+### Patch Changes
+
+- d7f4d0d: Fixed spreaing of grid props
+
 ## 0.0.4
 
 ### Patch Changes

README.md

@@ -8,14 +8,38 @@ Oranguru is a comprehensive component library that extends Mantine's component e
 
 Currently featuring advanced menu components, Oranguru is designed to grow into a full suite of enhanced Mantine components that offer more flexibility and power than their standard counterparts.
 
-## Features
+## Components
 
-### Current Components
-- **Enhanced Context Menus**: Better menu positioning and visibility control
-- **Custom Rendering**: Support for custom menu item renderers and complete menu rendering
-- **Async Actions**: Built-in support for async menu item actions with loading states
+### MantineBetterMenu
+
+Enhanced context menus with better positioning and visibility control
+
+### Gridler
+
+Powerful data grid component with sorting, filtering, and pagination
+
+### Former
+
+Form component with React Hook Form integration and validation
+
+### FormerControllers
+
+Pre-built form input controls for use with Former
+
+### Boxer
+
+Advanced combobox/select with virtualization and server-side data support
+
+### ErrorBoundary
+
+React error boundary components for graceful error handling
+
+### GlobalStateStore
+
+Zustand-based global state management with automatic persistence
+
+## Core Features
 
-### Core Features
 - **State Management**: Zustand-based store for component state management
 - **TypeScript Support**: Full TypeScript definitions included
 - **Portal-based Rendering**: Proper z-index handling through React portals
@@ -37,133 +61,266 @@ npm install react@">= 19.0.0" zustand@">= 5.0.0" @mantine/core@"^8.3.1" @mantine
 
 ## Usage
 
-### Basic Setup
+### MantineBetterMenu
 
 ```tsx
-import { MantineBetterMenusProvider } from '@warkypublic/oranguru';
-import { MantineProvider } from '@mantine/core';
+import { MantineBetterMenusProvider, useMantineBetterMenus } from '@warkypublic/oranguru';
 
-function App() {
-  return (
-    <MantineProvider>
+// Wrap app with provider
 <MantineBetterMenusProvider>
-        {/* Your app content */}
+  <App />
 </MantineBetterMenusProvider>
-    </MantineProvider>
-  );
-}
-```
 
-### Using the Menu Hook
-
-```tsx
-import { useMantineBetterMenus } from '@warkypublic/oranguru';
-
-function MyComponent() {
+// Use in components
 const { show, hide } = useMantineBetterMenus();
-  
-  const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault();
-    show('my-menu', {
+show('menu-id', {
   x: e.clientX,
   y: e.clientY,
   items: [
-        {
-          label: 'Edit',
-          onClick: () => console.log('Edit clicked')
-        },
-        {
-          label: 'Delete',
-          onClick: () => console.log('Delete clicked')
-        },
-        {
-          isDivider: true
-        },
-        {
-          label: 'Async Action',
-          onClickAsync: async () => {
-            await new Promise(resolve => setTimeout(resolve, 2000));
-            console.log('Async action completed');
-          }
-        }
+    { label: 'Edit', onClick: () => {} },
+    { isDivider: true },
+    { label: 'Async', onClickAsync: async () => {} }
   ]
 });
-  };
-
-  return (
-    <div onContextMenu={handleContextMenu}>
-      Right-click me for a context menu
-    </div>
-  );
-}
 ```
 
-### Custom Menu Items
+### Gridler
 
 ```tsx
-const customMenuItem = {
-  renderer: ({ loading }: any) => (
-    <div style={{ padding: '8px 12px' }}>
-      {loading ? 'Loading...' : 'Custom Item'}
-    </div>
-  )
-};
+import { Gridler } from '@warkypublic/oranguru';
 
-show('custom-menu', {
-  x: e.clientX,
-  y: e.clientY,
-  items: [customMenuItem]
-});
+// Local data
+<Gridler columns={columns} uniqueid="my-grid">
+  <Gridler.LocalDataAdaptor data={data} />
+</Gridler>
+
+// API data
+<Gridler columns={columns} uniqueid="my-grid">
+  <Gridler.APIAdaptorForGoLangv2 apiURL="/api/data" />
+</Gridler>
+
+// With inline editing form
+<Gridler columns={columns} uniqueid="editable-grid" ref={gridRef}>
+  <Gridler.APIAdaptorForGoLangv2 url="/api/data" />
+  <Gridler.FormAdaptor
+    changeOnActiveClick={true}
+    descriptionField="name"
+    onRequestForm={(request, data) => {
+      setFormProps({ opened: true, request, values: data });
+    }}
+  />
+</Gridler>
+
+<FormerDialog
+  former={{ request: formProps.request, values: formProps.values }}
+  opened={formProps.opened}
+  onClose={() => setFormProps({ opened: false })}
+>
+  <TextInputCtrl label="Name" name="name" />
+  <NativeSelectCtrl label="Type" name="type" data={["A", "B"]} />
+</FormerDialog>
+
+// Columns definition
+const columns = [
+  { id: 'name', title: 'Name', width: 200 },
+  { id: 'email', title: 'Email', width: 250 }
+];
+```
+
+### Former
+
+```tsx
+import { Former, FormerDialog } from '@warkypublic/oranguru';
+
+const formRef = useRef<FormerRef>(null);
+
+<Former
+  ref={formRef}
+  onSave={async (data) => { /* save logic */ }}
+  primeData={{ name: '', email: '' }}
+  wrapper={FormerDialog}
+>
+  {/* Form content */}
+</Former>
+
+// Methods: formRef.current.show(), .save(), .reset()
+```
+
+### FormerControllers
+
+```tsx
+import {
+  TextInputCtrl,
+  PasswordInputCtrl,
+  NativeSelectCtrl,
+  TextAreaCtrl,
+  SwitchCtrl,
+  ButtonCtrl
+} from '@warkypublic/oranguru';
+
+<Former>
+  <TextInputCtrl name="username" label="Username" />
+  <PasswordInputCtrl name="password" label="Password" />
+  <NativeSelectCtrl name="role" data={['Admin', 'User']} />
+  <SwitchCtrl name="active" label="Active" />
+  <ButtonCtrl type="submit">Save</ButtonCtrl>
+</Former>
+```
+
+### Boxer
+
+```tsx
+import { Boxer } from '@warkypublic/oranguru';
+
+// Local data
+<Boxer
+  data={[{ label: 'Apple', value: 'apple' }]}
+  dataSource="local"
+  value={value}
+  onChange={setValue}
+  searchable
+  clearable
+/>
+
+// Server-side data
+<Boxer
+  dataSource="server"
+  onAPICall={async ({ page, pageSize, search }) => ({
+    data: [...],
+    total: 100
+  })}
+  value={value}
+  onChange={setValue}
+/>
+
+// Multi-select
+<Boxer multiSelect value={values} onChange={setValues} />
+```
+
+### ErrorBoundary
+
+```tsx
+import { ReactErrorBoundary, ReactBasicErrorBoundary } from '@warkypublic/oranguru';
+
+// Full-featured error boundary
+<ReactErrorBoundary
+  namespace="my-component"
+  reportAPI="/api/errors"
+  onResetClick={() => {}}
+>
+  <App />
+</ReactErrorBoundary>
+
+// Basic error boundary
+<ReactBasicErrorBoundary>
+  <App />
+</ReactBasicErrorBoundary>
+```
+
+### GlobalStateStore
+
+```tsx
+import {
+  GlobalStateStoreProvider,
+  useGlobalStateStore,
+  GlobalStateStore
+} from '@warkypublic/oranguru';
+
+// Wrap app
+<GlobalStateStoreProvider
+  apiURL="https://api.example.com"
+  fetchOnMount={true}
+  throttleMs={5000}
+>
+  <App />
+</GlobalStateStoreProvider>
+
+// Use in components
+const { program, session, user, layout } = useGlobalStateStore();
+const { refetch } = useGlobalStateStoreContext();
+
+// Outside React
+GlobalStateStore.getState().setAuthToken('token');
+const apiURL = GlobalStateStore.getState().session.apiURL;
 ```
 
 ## API Reference
 
-### MantineBetterMenusProvider
+**MantineBetterMenu**
 
-The main provider component that wraps your application.
+- Provider: `MantineBetterMenusProvider`
+- Hook: `useMantineBetterMenus()` returns `{ show, hide, menus, setInstanceState }`
+- Key Props: `items[]`, `x`, `y`, `visible`, `menuProps`, `renderer`
 
-**Props:**
-- `providerID?`: Optional unique identifier for the provider instance
+**Gridler**
 
-### useMantineBetterMenus
+- Main Component: `Gridler`
+- Adaptors: `LocalDataAdaptor`, `APIAdaptorForGoLangv2`, `FormAdaptor`
+- Store Hook: `useGridlerStore()`
+- Key Props: `uniqueid`, `columns[]`, `data`
 
-Hook to access menu functionality.
+**Former**
 
-**Returns:**
-- `show(id: string, options?: Partial<MantineBetterMenuInstance>)`: Show a menu
-- `hide(id: string)`: Hide a menu
-- `menus`: Array of current menu instances
-- `setInstanceState`: Update specific menu instance properties
+- Main Component: `Former`
+- Wrappers: `FormerDialog`, `FormerModel`, `FormerPopover`
+- Ref Methods: `show()`, `close()`, `save()`, `reset()`, `validate()`
+- Key Props: `primeData`, `onSave`, `wrapper`
 
-### MantineBetterMenuInstance
+**FormerControllers**
 
-Interface for menu instances:
+- Controls: `TextInputCtrl`, `PasswordInputCtrl`, `TextAreaCtrl`, `NativeSelectCtrl`, `SwitchCtrl`, `ButtonCtrl`, `IconButtonCtrl`
+- Common Props: `name` (required), `label`, `disabled`
 
-```typescript
-interface MantineBetterMenuInstance {
-  id: string;
-  items?: Array<MantineBetterMenuInstanceItem>;
-  menuProps?: MenuProps;
-  renderer?: ReactNode;
-  visible: boolean;
-  x: number;
-  y: number;
+**Boxer**
+
+- Provider: `BoxerProvider`
+- Store Hook: `useBoxerStore()`
+- Data Sources: `local`, `server`
+- Key Props: `data`, `dataSource`, `onAPICall`, `multiSelect`, `searchable`, `clearable`
+
+**ErrorBoundary**
+
+- Components: `ReactErrorBoundary`, `ReactBasicErrorBoundary`
+- Key Props: `namespace`, `reportAPI`, `onResetClick`, `onRetryClick`
+
+**GlobalStateStore**
+
+- Provider: `GlobalStateStoreProvider`
+- Hook: `useGlobalStateStore()` returns `{ program, session, owner, user, layout, navigation, app }`
+- Store Methods: `setAuthToken()`, `setApiURL()`, `fetchData()`, `login()`, `logout()`
+- Key Props: `apiURL`, `autoFetch`, `fetchOnMount`, `throttleMs`
+
+## MCP Server
+
+Oranguru includes a Model Context Protocol (MCP) server for AI-assisted development.
+
+**Configuration:**
+
+Add to `~/.claude/mcp_settings.json`:
+
+```json
+{
+  "mcpServers": {
+    "oranguru-docs": {
+      "command": "npx",
+      "args": ["-y", "@warkypublic/oranguru", "mcp"]
+    }
+  }
 }
 ```
 
-### MantineBetterMenuInstanceItem
+**Tools:**
 
-Interface for menu items:
+- `list_components` - List all components
+- `get_component_docs` - Get component documentation
+- `get_component_example` - Get code examples
 
-```typescript
-interface MantineBetterMenuInstanceItem extends Partial<MenuItemProps> {
-  isDivider?: boolean;
-  label?: string;
-  onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onClickAsync?: () => Promise<void>;
-  renderer?: ((props: MantineBetterMenuInstanceItem & Record<string, unknown>) => ReactNode) | ReactNode;
-}
-```
+**Resources:**
+
+- `oranguru://docs/readme` - Full documentation
+- `oranguru://docs/components` - Component list
+
+See `mcp/README.md` for details.
 
 ## Development
 
@@ -174,6 +331,7 @@ interface MantineBetterMenuInstanceItem extends Partial<MenuItemProps> {
 - `pnpm lint`: Run ESLint
 - `pnpm typecheck`: Run TypeScript type checking
 - `pnpm clean`: Clean node_modules and dist folders
+- `pnpm mcp`: Run MCP server
 
 ### Building
 
@@ -192,6 +350,7 @@ See [LICENSE](LICENSE) file for details.
 Oranguru is named after the Orangutan Pokémon (オランガ Oranga), a Normal/Psychic-type Pokémon introduced in Generation VII. Known as the "Sage Pokémon," Oranguru is characterized by its wisdom, intelligence, and ability to use tools strategically.
 
 In the Pokémon world, Oranguru is known for:
+
 - Its exceptional intelligence and strategic thinking
 - Living deep in forests and rarely showing itself to humans
 - Using its psychic powers to control other Pokémon with its fan
@@ -201,4 +360,4 @@ Just as Oranguru the Pokémon enhances and controls its environment with wisdom
 
 ## Author
 
-**Warky Devs**
+Warky Devs

eslint.config.ts

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

mcp-server.json

@@ -0,0 +1,86 @@
+{
+  "name": "@warkypublic/oranguru-mcp",
+  "version": "0.0.31",
+  "description": "MCP server for Oranguru component library documentation and code generation",
+  "mcpServers": {
+    "oranguru-docs": {
+      "command": "node",
+      "args": ["mcp/server.js"],
+      "env": {}
+    }
+  },
+  "tools": [
+    {
+      "name": "get_component_docs",
+      "description": "Get documentation for a specific Oranguru component",
+      "inputSchema": {
+        "type": "object",
+        "properties": {
+          "component": {
+            "type": "string",
+            "enum": [
+              "MantineBetterMenu",
+              "Gridler",
+              "Former",
+              "FormerControllers",
+              "Boxer",
+              "ErrorBoundary",
+              "GlobalStateStore"
+            ],
+            "description": "The component name"
+          }
+        },
+        "required": ["component"]
+      }
+    },
+    {
+      "name": "get_component_example",
+      "description": "Generate code example for a specific Oranguru component",
+      "inputSchema": {
+        "type": "object",
+        "properties": {
+          "component": {
+            "type": "string",
+            "enum": [
+              "MantineBetterMenu",
+              "Gridler",
+              "Former",
+              "FormerControllers",
+              "Boxer",
+              "ErrorBoundary",
+              "GlobalStateStore"
+            ],
+            "description": "The component name"
+          },
+          "variant": {
+            "type": "string",
+            "description": "Example variant (e.g., 'basic', 'advanced', 'with-api')"
+          }
+        },
+        "required": ["component"]
+      }
+    },
+    {
+      "name": "list_components",
+      "description": "List all available Oranguru components",
+      "inputSchema": {
+        "type": "object",
+        "properties": {}
+      }
+    }
+  ],
+  "resources": [
+    {
+      "uri": "oranguru://docs/readme",
+      "name": "Oranguru Documentation",
+      "description": "Main documentation for the Oranguru library",
+      "mimeType": "text/markdown"
+    },
+    {
+      "uri": "oranguru://docs/components",
+      "name": "Component List",
+      "description": "List of all available components",
+      "mimeType": "application/json"
+    }
+  ]
+}

mcp/README.md

@@ -0,0 +1,102 @@
+# Oranguru MCP Server
+
+Model Context Protocol server for Oranguru component library documentation and code generation.
+
+## Installation
+
+```bash
+npm install @warkypublic/oranguru
+```
+
+## Configuration
+
+Add to your Claude Code MCP settings (`~/.claude/mcp_settings.json`):
+
+```json
+{
+  "mcpServers": {
+    "oranguru-docs": {
+      "command": "node",
+      "args": ["./node_modules/@warkypublic/oranguru/mcp/server.js"]
+    }
+  }
+}
+```
+
+Or use npx:
+
+```json
+{
+  "mcpServers": {
+    "oranguru-docs": {
+      "command": "npx",
+      "args": ["-y", "@warkypublic/oranguru", "mcp"]
+    }
+  }
+}
+```
+
+## Available Tools
+
+### `list_components`
+List all available Oranguru components
+
+**Returns:** JSON array of components with name, description, and exports
+
+### `get_component_docs`
+Get detailed documentation for a specific component
+
+**Parameters:**
+- `component` (required): Component name (MantineBetterMenu, Gridler, Former, etc.)
+
+**Returns:** JSON object with component details, exports, and usage information
+
+### `get_component_example`
+Get code examples for a specific component
+
+**Parameters:**
+- `component` (required): Component name
+- `variant` (optional): Example variant ('basic', 'local', 'server', etc.)
+
+**Returns:** Code example string
+
+## Available Resources
+
+### `oranguru://docs/readme`
+Full README documentation
+
+**MIME Type:** text/markdown
+
+### `oranguru://docs/components`
+Component list in JSON format
+
+**MIME Type:** application/json
+
+## Components
+
+- **MantineBetterMenu** - Enhanced context menus
+- **Gridler** - Data grid component
+- **Former** - Form component with React Hook Form
+- **FormerControllers** - Form input controls
+- **Boxer** - Advanced combobox/select
+- **ErrorBoundary** - Error boundary components
+- **GlobalStateStore** - Global state management
+
+## Usage in Claude Code
+
+Once configured, you can ask Claude Code:
+
+- "Show me examples of the Gridler component"
+- "Get documentation for the Former component"
+- "List all Oranguru components"
+- "Generate a code example for Boxer with server-side data"
+
+## Running Locally
+
+```bash
+npm run mcp
+```
+
+## License
+
+See main package LICENSE file

mcp/server.js

@@ -0,0 +1,953 @@
+#!/usr/bin/env node
+
+/**
+ * Oranguru MCP Server
+ * Provides documentation and code generation for Oranguru components
+ */
+
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import {
+  CallToolRequestSchema,
+  ListResourcesRequestSchema,
+  ListToolsRequestSchema,
+  ReadResourceRequestSchema,
+} from '@modelcontextprotocol/sdk/types.js';
+import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Component documentation data
+const COMPONENTS = {
+  Boxer: {
+    component: 'Boxer',
+    description: 'Advanced combobox/select with virtualization and server-side data support',
+    examples: {
+      basic: `import { Boxer } from '@warkypublic/oranguru';
+import { useState } from 'react';
+
+const sampleData = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Cherry', value: 'cherry' }
+];
+
+function MyComponent() {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Boxer
+      data={sampleData}
+      dataSource="local"
+      label="Favorite Fruit"
+      value={value}
+      onChange={setValue}
+      searchable
+      clearable
+      placeholder="Select a fruit"
+    />
+  );
+}`,
+      multiSelect: `import { Boxer } from '@warkypublic/oranguru';
+import { useState } from 'react';
+
+function MultiSelectExample() {
+  const [values, setValues] = useState([]);
+
+  return (
+    <Boxer
+      data={sampleData}
+      dataSource="local"
+      label="Favorite Fruits"
+      multiSelect
+      value={values}
+      onChange={setValues}
+      searchable
+      clearable
+    />
+  );
+}`,
+      server: `import { Boxer } from '@warkypublic/oranguru';
+
+function ServerSideExample() {
+  const [value, setValue] = useState(null);
+
+  const handleAPICall = async ({ page, pageSize, search }) => {
+    const response = await fetch(\`/api/items?page=\${page}&size=\${pageSize}&search=\${search}\`);
+    const result = await response.json();
+
+    return {
+      data: result.items,
+      total: result.total
+    };
+  };
+
+  return (
+    <Boxer
+      dataSource="server"
+      label="Server-side Data"
+      onAPICall={handleAPICall}
+      value={value}
+      onChange={setValue}
+      pageSize={10}
+      searchable
+    />
+  );
+}`
+    },
+    exports: ['Boxer', 'BoxerProvider', 'useBoxerStore'],
+    hook: 'useBoxerStore()',
+    name: 'Boxer',
+    provider: 'BoxerProvider'
+  },
+  ErrorBoundary: {
+    components: ['ReactErrorBoundary', 'ReactBasicErrorBoundary'],
+    description: 'React error boundary components for graceful error handling',
+    examples: {
+      basic: `import { ReactBasicErrorBoundary } from '@warkypublic/oranguru';
+
+function App() {
+  return (
+    <ReactBasicErrorBoundary>
+      <MyComponent />
+    </ReactBasicErrorBoundary>
+  );
+}`,
+      full: `import { ReactErrorBoundary } from '@warkypublic/oranguru';
+
+function App() {
+  const handleReportError = () => {
+    console.log('Report error to support');
+  };
+
+  const handleReset = () => {
+    console.log('Reset application state');
+    window.location.reload();
+  };
+
+  const handleRetry = () => {
+    console.log('Retry failed operation');
+  };
+
+  return (
+    <ReactErrorBoundary
+      namespace="main-app"
+      reportAPI="/api/errors/report"
+      onReportClick={handleReportError}
+      onResetClick={handleReset}
+      onRetryClick={handleRetry}
+    >
+      <MyApp />
+    </ReactErrorBoundary>
+  );
+}`,
+      nested: `import { ReactErrorBoundary } from '@warkypublic/oranguru';
+
+// Multiple error boundaries for granular error handling
+function App() {
+  return (
+    <ReactErrorBoundary namespace="app">
+      <Header />
+      <ReactErrorBoundary namespace="sidebar">
+        <Sidebar />
+      </ReactErrorBoundary>
+      <ReactErrorBoundary namespace="main-content">
+        <MainContent />
+      </ReactErrorBoundary>
+    </ReactErrorBoundary>
+  );
+}`,
+      globalConfig: `import { SetErrorBoundaryOptions } from '@warkypublic/oranguru';
+
+// Configure error boundary globally
+SetErrorBoundaryOptions({
+  disabled: false, // Set to true to pass through errors (dev mode)
+  onError: (error, errorInfo) => {
+    console.error('Global error handler:', error);
+    // Send to analytics service
+    analytics.trackError(error, errorInfo);
+  }
+});`
+    },
+    exports: ['ReactErrorBoundary', 'ReactBasicErrorBoundary', 'SetErrorBoundaryOptions', 'GetErrorBoundaryOptions'],
+    name: 'ErrorBoundary'
+  },
+  Former: {
+    component: 'Former',
+    description: 'Form component with React Hook Form integration and validation',
+    examples: {
+      basic: `import { Former } from '@warkypublic/oranguru';
+import { useRef } from 'react';
+import { Controller } from 'react-hook-form';
+
+function BasicForm() {
+  const formRef = useRef(null);
+
+  return (
+    <Former
+      ref={formRef}
+      primeData={{ name: '', email: '' }}
+      onSave={async (data) => {
+        console.log('Saving:', data);
+        await fetch('/api/save', {
+          method: 'POST',
+          body: JSON.stringify(data)
+        });
+      }}
+    >
+      <Controller
+        name="name"
+        render={({ field }) => (
+          <input {...field} placeholder="Name" />
+        )}
+        rules={{ required: 'Name is required' }}
+      />
+      <Controller
+        name="email"
+        render={({ field }) => (
+          <input {...field} type="email" placeholder="Email" />
+        )}
+        rules={{ required: 'Email is required' }}
+      />
+      <button type="submit">Save</button>
+    </Former>
+  );
+}`,
+      withWrapper: `import { Former, FormerModel } from '@warkypublic/oranguru';
+import { useState } from 'react';
+
+function ModalForm() {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpened(true)}>Open Form</button>
+
+      <FormerModel
+        former={{ request: 'insert' }}
+        opened={opened}
+        onClose={() => setOpened(false)}
+      >
+        <Controller
+          name="title"
+          render={({ field }) => <input {...field} />}
+        />
+      </FormerModel>
+    </>
+  );
+}`,
+      withAPI: `import { Former, FormerRestHeadSpecAPI } from '@warkypublic/oranguru';
+
+function APIForm() {
+  return (
+    <Former
+      request="update"
+      uniqueKeyField="id"
+      primeData={{ id: 123 }}
+      onAPICall={FormerRestHeadSpecAPI({
+        url: 'https://api.example.com/items',
+        authToken: 'your-token'
+      })}
+    >
+      {/* Form fields */}
+    </Former>
+  );
+}`,
+      customLayout: `import { Former } from '@warkypublic/oranguru';
+
+function CustomLayoutForm() {
+  return (
+    <Former
+      layout={{
+        title: 'Edit User Profile',
+        buttonArea: 'bottom',
+        buttonAreaGroupProps: { justify: 'space-between' }
+      }}
+      primeData={{ username: '', bio: '' }}
+    >
+      {/* Form fields */}
+    </Former>
+  );
+}`,
+      refMethods: `import { Former } from '@warkypublic/oranguru';
+import { useRef } from 'react';
+
+function FormWithRef() {
+  const formRef = useRef(null);
+
+  const handleValidate = async () => {
+    const isValid = await formRef.current?.validate();
+    console.log('Form valid:', isValid);
+  };
+
+  const handleSave = async () => {
+    const result = await formRef.current?.save();
+    console.log('Save result:', result);
+  };
+
+  const handleReset = () => {
+    formRef.current?.reset();
+  };
+
+  return (
+    <div>
+      <Former ref={formRef} primeData={{}}>
+        {/* Form fields */}
+      </Former>
+      <button onClick={handleValidate}>Validate</button>
+      <button onClick={handleSave}>Save</button>
+      <button onClick={handleReset}>Reset</button>
+    </div>
+  );
+}`
+    },
+    exports: ['Former', 'FormerDialog', 'FormerModel', 'FormerPopover', 'FormerRestHeadSpecAPI'],
+    name: 'Former',
+    wrappers: ['FormerDialog', 'FormerModel', 'FormerPopover']
+  },
+  FormerControllers: {
+    controls: ['TextInputCtrl', 'PasswordInputCtrl', 'NativeSelectCtrl', 'TextAreaCtrl', 'SwitchCtrl', 'ButtonCtrl', 'IconButtonCtrl'],
+    description: 'Pre-built form input controls for use with Former',
+    examples: {
+      basic: `import { TextInputCtrl, PasswordInputCtrl, NativeSelectCtrl, ButtonCtrl } from '@warkypublic/oranguru';
+
+<Former>
+  <TextInputCtrl name="username" label="Username" />
+  <PasswordInputCtrl name="password" label="Password" />
+  <NativeSelectCtrl name="role" data={['Admin', 'User']} />
+  <ButtonCtrl type="submit">Save</ButtonCtrl>
+</Former>`
+    },
+    exports: ['TextInputCtrl', 'PasswordInputCtrl', 'NativeSelectCtrl', 'TextAreaCtrl', 'SwitchCtrl', 'ButtonCtrl', 'IconButtonCtrl'],
+    name: 'FormerControllers'
+  },
+  GlobalStateStore: {
+    description: 'Zustand-based global state management with automatic persistence',
+    examples: {
+      basic: `import { useGlobalStateStore } from '@warkypublic/oranguru';
+
+function MyComponent() {
+  const state = useGlobalStateStore();
+
+  return (
+    <div>
+      <h1>{state.program.name}</h1>
+      <p>User: {state.user.username}</p>
+      <p>Email: {state.user.email}</p>
+      <p>Connected: {state.session.connected ? 'Yes' : 'No'}</p>
+    </div>
+  );
+}`,
+      provider: `import { GlobalStateStoreProvider } from '@warkypublic/oranguru';
+
+function App() {
+  return (
+    <GlobalStateStoreProvider
+      apiURL="https://api.example.com"
+      fetchOnMount={true}
+      throttleMs={5000}
+    >
+      <MyApp />
+    </GlobalStateStoreProvider>
+  );
+}`,
+      stateUpdates: `import { useGlobalStateStore } from '@warkypublic/oranguru';
+
+function StateControls() {
+  const state = useGlobalStateStore();
+
+  const handleUpdateProgram = () => {
+    state.setProgram({
+      name: 'My App',
+      slug: 'my-app',
+      description: 'A great application'
+    });
+  };
+
+  const handleUpdateUser = () => {
+    state.setUser({
+      username: 'john_doe',
+      email: 'john@example.com',
+      fullNames: 'John Doe'
+    });
+  };
+
+  const handleToggleTheme = () => {
+    state.setUser({
+      theme: {
+        ...state.user.theme,
+        darkMode: !state.user.theme?.darkMode
+      }
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={handleUpdateProgram}>Update Program</button>
+      <button onClick={handleUpdateUser}>Update User</button>
+      <button onClick={handleToggleTheme}>Toggle Dark Mode</button>
+    </div>
+  );
+}`,
+      layout: `import { useGlobalStateStore } from '@warkypublic/oranguru';
+
+function LayoutControls() {
+  const state = useGlobalStateStore();
+
+  return (
+    <div>
+      <button onClick={() => state.setLeftBar({ open: !state.layout.leftBar.open })}>
+        Toggle Left Bar
+      </button>
+      <button onClick={() => state.setRightBar({ open: !state.layout.rightBar.open })}>
+        Toggle Right Bar
+      </button>
+      <button onClick={() => state.setLeftBar({ pinned: true, size: 250 })}>
+        Pin & Resize Left Bar
+      </button>
+    </div>
+  );
+}`,
+      outsideReact: `import { GlobalStateStore } from '@warkypublic/oranguru';
+
+// Access state outside React components
+const currentState = GlobalStateStore.getState();
+console.log('API URL:', currentState.session.apiURL);
+
+// Update state outside React
+GlobalStateStore.getState().setAuthToken('new-token');
+GlobalStateStore.getState().setApiURL('https://new-api.com');
+
+// Subscribe to changes
+const unsubscribe = GlobalStateStore.subscribe(
+  (state) => state.session.connected,
+  (connected) => console.log('Connected:', connected)
+);`
+    },
+    exports: ['GlobalStateStore', 'GlobalStateStoreProvider', 'useGlobalStateStore', 'useGlobalStateStoreContext'],
+    hook: 'useGlobalStateStore()',
+    name: 'GlobalStateStore',
+    provider: 'GlobalStateStoreProvider',
+    store: 'GlobalStateStore'
+  },
+  Gridler: {
+    adaptors: ['LocalDataAdaptor', 'APIAdaptorForGoLangv2', 'FormAdaptor'],
+    component: 'Gridler',
+    description: 'Powerful data grid component with sorting, filtering, and pagination',
+    examples: {
+      basic: `import { Gridler } from '@warkypublic/oranguru';
+
+const columns = [
+  { id: 'name', title: 'Name', width: 200 },
+  { id: 'email', title: 'Email', width: 250 },
+  { id: 'role', title: 'Role', width: 150 }
+];
+
+const data = [
+  { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
+];
+
+function GridExample() {
+  return (
+    <Gridler columns={columns} uniqueid="my-grid">
+      <Gridler.LocalDataAdaptor data={data} />
+    </Gridler>
+  );
+}`,
+      customCell: `// Custom cell rendering with icons
+const columns = [
+  {
+    id: 'status',
+    title: 'Status',
+    width: 100,
+    Cell: (row) => {
+      const icon = row?.active ? '✅' : '❌';
+      return {
+        data: \`\${icon} \${row?.status}\`,
+        displayData: \`\${icon} \${row?.status}\`
+      };
+    }
+  },
+  { id: 'name', title: 'Name', width: 200 }
+];`,
+      api: `import { Gridler, GlidlerAPIAdaptorForGoLangv2 } from '@warkypublic/oranguru';
+import { useRef } from 'react';
+
+function APIGridExample() {
+  const gridRef = useRef(null);
+
+  const columns = [
+    { id: 'id', title: 'ID', width: 100 },
+    { id: 'name', title: 'Name', width: 200 },
+    { id: 'status', title: 'Status', width: 150 }
+  ];
+
+  return (
+    <Gridler
+      columns={columns}
+      uniqueid="api-grid"
+      ref={gridRef}
+      selectMode="row"
+      searchStr={searchTerm}
+      onChange={(values) => console.log('Selected:', values)}
+    >
+      <GlidlerAPIAdaptorForGoLangv2
+        url="https://api.example.com/data"
+        authtoken="your-api-key"
+      />
+    </Gridler>
+  );
+}`,
+      withForm: `// Gridler with Former integration for inline editing
+import { Gridler, GlidlerAPIAdaptorForGoLangv2 } from '@warkypublic/oranguru';
+import { FormerDialog } from '@warkypublic/oranguru';
+import { TextInputCtrl, NativeSelectCtrl } from '@warkypublic/oranguru';
+import { useState, useRef } from 'react';
+
+function EditableGrid() {
+  const gridRef = useRef(null);
+  const [formProps, setFormProps] = useState({
+    opened: false,
+    request: null,
+    values: null,
+    onClose: () => setFormProps(prev => ({
+      ...prev,
+      opened: false,
+      request: null,
+      values: null
+    })),
+    onChange: (request, data) => {
+      gridRef.current?.refresh({ value: data });
+    }
+  });
+
+  const columns = [
+    { id: 'id', title: 'ID', width: 100 },
+    { id: 'name', title: 'Name', width: 200 },
+    { id: 'type', title: 'Type', width: 150 }
+  ];
+
+  return (
+    <>
+      <Gridler
+        ref={gridRef}
+        columns={columns}
+        uniqueid="editable-grid"
+        selectMode="row"
+      >
+        <GlidlerAPIAdaptorForGoLangv2
+          url="https://api.example.com/items"
+          authtoken="your-token"
+        />
+        <Gridler.FormAdaptor
+          changeOnActiveClick={true}
+          descriptionField="name"
+          onRequestForm={(request, data) => {
+            setFormProps(prev => ({
+              ...prev,
+              opened: true,
+              request: request,
+              values: data
+            }));
+          }}
+        />
+      </Gridler>
+
+      <FormerDialog
+        former={{
+          request: formProps.request ?? "insert",
+          values: formProps.values
+        }}
+        opened={formProps.opened}
+        onClose={formProps.onClose}
+        title="Edit Item"
+      >
+        <TextInputCtrl label="Name" name="name" />
+        <TextInputCtrl label="Description" name="description" />
+        <NativeSelectCtrl
+          label="Type"
+          name="type"
+          data={["Type A", "Type B", "Type C"]}
+        />
+      </FormerDialog>
+    </>
+  );
+}`,
+      refMethods: `// Using Gridler ref methods for programmatic control
+import { Gridler } from '@warkypublic/oranguru';
+import { useRef } from 'react';
+
+function GridWithControls() {
+  const gridRef = useRef(null);
+
+  return (
+    <>
+      <Gridler ref={gridRef} columns={columns} uniqueid="controlled-grid">
+        <Gridler.LocalDataAdaptor data={data} />
+      </Gridler>
+
+      <div>
+        <button onClick={() => gridRef.current?.refresh()}>
+          Refresh Grid
+        </button>
+        <button onClick={() => gridRef.current?.selectRow(123)}>
+          Select Row 123
+        </button>
+        <button onClick={() => gridRef.current?.scrollToRow(456)}>
+          Scroll to Row 456
+        </button>
+        <button onClick={() => gridRef.current?.reloadRow(789)}>
+          Reload Row 789
+        </button>
+      </div>
+    </>
+  );
+}`,
+      sections: `// Gridler with custom side sections
+import { Gridler } from '@warkypublic/oranguru';
+import { useState } from 'react';
+
+function GridWithSections() {
+  const [sections, setSections] = useState({
+    top: <div style={{ backgroundColor: 'purple', height: '20px' }}>Top Bar</div>,
+    bottom: <div style={{ backgroundColor: 'teal', height: '25px' }}>Bottom Bar</div>,
+    left: <div style={{ backgroundColor: 'orange', width: '20px' }}>L</div>,
+    right: <div style={{ backgroundColor: 'green', width: '20px' }}>R</div>
+  });
+
+  return (
+    <Gridler
+      columns={columns}
+      uniqueid="sections-grid"
+      sections={{ ...sections, rightElementDisabled: false }}
+    >
+      <Gridler.LocalDataAdaptor data={data} />
+    </Gridler>
+  );
+}`
+    },
+    exports: ['Gridler', 'GlidlerLocalDataAdaptor', 'GlidlerAPIAdaptorForGoLangv2', 'GlidlerFormAdaptor'],
+    hook: 'useGridlerStore()',
+    name: 'Gridler'
+  },
+  MantineBetterMenu: {
+    description: 'Enhanced context menus with better positioning and visibility control',
+    examples: {
+      provider: `import { MantineBetterMenusProvider } from '@warkypublic/oranguru';
+import { MantineProvider } from '@mantine/core';
+
+function App() {
+  return (
+    <MantineProvider>
+      <MantineBetterMenusProvider providerID="main">
+        <YourApp />
+      </MantineBetterMenusProvider>
+    </MantineProvider>
+  );
+}`,
+      contextMenu: `import { useMantineBetterMenus } from '@warkypublic/oranguru';
+
+function MyComponent() {
+  const { show, hide } = useMantineBetterMenus();
+
+  const handleContextMenu = (e) => {
+    e.preventDefault();
+
+    show('context-menu', {
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        {
+          label: 'Edit',
+          onClick: () => console.log('Edit clicked')
+        },
+        {
+          label: 'Copy',
+          onClick: () => console.log('Copy clicked')
+        },
+        {
+          isDivider: true
+        },
+        {
+          label: 'Delete',
+          onClick: () => console.log('Delete clicked'),
+          color: 'red'
+        }
+      ]
+    });
+  };
+
+  return (
+    <div onContextMenu={handleContextMenu}>
+      Right-click me for a context menu
+    </div>
+  );
+}`,
+      asyncActions: `import { useMantineBetterMenus } from '@warkypublic/oranguru';
+
+function AsyncMenuExample() {
+  const { show } = useMantineBetterMenus();
+
+  const handleClick = (e) => {
+    show('async-menu', {
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        {
+          label: 'Save',
+          onClickAsync: async () => {
+            await fetch('/api/save', { method: 'POST' });
+            console.log('Saved successfully');
+          }
+        },
+        {
+          label: 'Load Data',
+          onClickAsync: async () => {
+            const data = await fetch('/api/data').then(r => r.json());
+            console.log('Data loaded:', data);
+          }
+        }
+      ]
+    });
+  };
+
+  return <button onClick={handleClick}>Show Menu</button>;
+}`,
+      customRenderer: `import { useMantineBetterMenus } from '@warkypublic/oranguru';
+
+function CustomMenuExample() {
+  const { show } = useMantineBetterMenus();
+
+  const handleClick = (e) => {
+    show('custom-menu', {
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        {
+          renderer: ({ loading }) => (
+            <div style={{ padding: '8px 12px', color: 'blue' }}>
+              {loading ? 'Processing...' : 'Custom Item'}
+            </div>
+          )
+        }
+      ]
+    });
+  };
+
+  return <button onClick={handleClick}>Custom Menu</button>;
+}`
+    },
+    exports: ['MantineBetterMenusProvider', 'useMantineBetterMenus'],
+    hook: 'useMantineBetterMenus()',
+    name: 'MantineBetterMenu',
+    provider: 'MantineBetterMenusProvider'
+  }
+};
+
+class OranguruMCPServer {
+  constructor() {
+    this.server = new Server(
+      {
+        name: 'oranguru-docs',
+        version: '0.0.31',
+      },
+      {
+        capabilities: {
+          resources: {},
+          tools: {},
+        },
+      }
+    );
+
+    this.setupHandlers();
+    this.server.onerror = (error) => console.error('[MCP Error]', error);
+    process.on('SIGINT', async () => {
+      await this.server.close();
+      process.exit(0);
+    });
+  }
+
+  async run() {
+    const transport = new StdioServerTransport();
+    await this.server.connect(transport);
+    console.error('Oranguru MCP server running on stdio');
+  }
+
+  setupHandlers() {
+    // List available tools
+    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
+      tools: [
+        {
+          description: 'Get documentation for a specific Oranguru component',
+          inputSchema: {
+            properties: {
+              component: {
+                description: 'The component name',
+                enum: Object.keys(COMPONENTS),
+                type: 'string',
+              },
+            },
+            required: ['component'],
+            type: 'object',
+          },
+          name: 'get_component_docs',
+        },
+        {
+          description: 'Generate code example for a specific Oranguru component',
+          inputSchema: {
+            properties: {
+              component: {
+                description: 'The component name',
+                enum: Object.keys(COMPONENTS),
+                type: 'string',
+              },
+              variant: {
+                description: "Example variant (e.g., 'basic', 'local', 'server')",
+                type: 'string',
+              },
+            },
+            required: ['component'],
+            type: 'object',
+          },
+          name: 'get_component_example',
+        },
+        {
+          description: 'List all available Oranguru components',
+          inputSchema: {
+            properties: {},
+            type: 'object',
+          },
+          name: 'list_components',
+        },
+      ],
+    }));
+
+    // Handle tool calls
+    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
+      const { arguments: args, name } = request.params;
+
+      switch (name) {
+        case 'get_component_docs':
+          if (!args.component || !COMPONENTS[args.component]) {
+            throw new Error(`Component ${args.component} not found`);
+          }
+          return {
+            content: [
+              {
+                text: JSON.stringify(COMPONENTS[args.component], null, 2),
+                type: 'text',
+              },
+            ],
+          };
+
+        case 'get_component_example':
+          if (!args.component || !COMPONENTS[args.component]) {
+            throw new Error(`Component ${args.component} not found`);
+          }
+          const component = COMPONENTS[args.component];
+          const variant = args.variant || Object.keys(component.examples)[0];
+          const example = component.examples[variant];
+
+          if (!example) {
+            throw new Error(`Variant ${variant} not found for ${args.component}`);
+          }
+
+          return {
+            content: [
+              {
+                text: example,
+                type: 'text',
+              },
+            ],
+          };
+
+        case 'list_components':
+          return {
+            content: [
+              {
+                text: JSON.stringify(
+                  Object.entries(COMPONENTS).map(([key, comp]) => ({
+                    description: comp.description,
+                    exports: comp.exports,
+                    name: key,
+                  })),
+                  null,
+                  2
+                ),
+                type: 'text',
+              },
+            ],
+          };
+
+        default:
+          throw new Error(`Unknown tool: ${name}`);
+      }
+    });
+
+    // List resources
+    this.server.setRequestHandler(ListResourcesRequestSchema, async () => ({
+      resources: [
+        {
+          description: 'Main documentation for the Oranguru library',
+          mimeType: 'text/markdown',
+          name: 'Oranguru Documentation',
+          uri: 'oranguru://docs/readme',
+        },
+        {
+          description: 'List of all available components',
+          mimeType: 'application/json',
+          name: 'Component List',
+          uri: 'oranguru://docs/components',
+        },
+      ],
+    }));
+
+    // Read resources
+    this.server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
+      const { uri } = request.params;
+
+      if (uri === 'oranguru://docs/readme') {
+        const readmePath = join(__dirname, '..', 'README.md');
+        const readme = readFileSync(readmePath, 'utf-8');
+        return {
+          contents: [
+            {
+              mimeType: 'text/markdown',
+              text: readme,
+              uri,
+            },
+          ],
+        };
+      }
+
+      if (uri === 'oranguru://docs/components') {
+        return {
+          contents: [
+            {
+              mimeType: 'application/json',
+              text: JSON.stringify(
+                Object.entries(COMPONENTS).map(([key, comp]) => ({
+                  description: comp.description,
+                  exports: comp.exports,
+                  name: key,
+                })),
+                null,
+                2
+              ),
+              uri,
+            },
+          ],
+        };
+      }
+
+      throw new Error(`Resource not found: ${uri}`);
+    });
+  }
+}
+
+const server = new OranguruMCPServer();
+server.run().catch(console.error);

package.json

@@ -1,8 +1,33 @@
 {
   "name": "@warkypublic/oranguru",
   "author": "Warky Devs",
-  "version": "0.0.4",
+  "version": "0.0.32",
   "type": "module",
+  "types": "./dist/lib.d.ts",
+  "main": "./dist/lib.cjs.js",
+  "module": "./dist/lib.es.js",
+  "exports": {
+    ".": {
+      "types": "./dist/lib.d.ts",
+      "import": "./dist/lib.es.js",
+      "require": "./dist/lib.cjs.js"
+    },
+    "./oranguru.css": "./dist/oranguru.css",
+    "./package.json": "./package.json",
+    "./mcp": "./mcp-server.json"
+  },
+  "mcp": {
+    "server": "./mcp/server.js",
+    "config": "./mcp-server.json"
+  },
+  "files": [
+    "dist/**",
+    "assets/**",
+    "public/**",
+    "global.d.ts",
+    "mcp/**",
+    "mcp-server.json"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -15,92 +40,71 @@
     "clean": "rm -rf node_modules && rm -rf dist ",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "files": [
-    "dist/**",
-    "assets/**",
-    "public/**",
-    "global.d.ts"
-  ],
-  "module": "./src.lib.ts",
-  "types": "./src/lib.ts",
-  "publishConfig": {
-    "main": "./dist/lib.cjs.js",
-    "module": "./dist/lib.es.js",
-    "require": "./dist/lib.cjs.js",
-    "types": "./dist/lib.d.ts",
-    "typings": "./dist/lib.d.ts",
-    "exports": {
-      ".": {
-        "import": "./dist/lib.es.js",
-        "types": "./dist/lib.d.ts",
-        "default": "./dist/lib.cjs.js"
-      },
-      "./package.json": "./package.json",
-      "./oranguru.css": "./dist/oranguru.css"
-    }
-  },
-  "exports": {
-    ".": {
-      "types": "./src/lib.ts",
-      "default": "./src/lib.ts"
-    },
-    "./oranguru.css": "./src/oranguru.css"
+    "build-storybook": "storybook build",
+    "mcp": "node mcp/server.js"
   },
   "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.4",
+    "@tanstack/react-virtual": "^3.13.18",
     "moment": "^2.30.1"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
-    "@eslint/js": "^9.38.0",
-    "@storybook/react-vite": "^9.1.13",
+    "@changesets/changelog-git": "^0.2.1",
+    "@changesets/cli": "^2.29.8",
+    "@eslint/js": "^9.39.2",
+    "@microsoft/api-extractor": "^7.56.0",
+    "@storybook/react-vite": "^10.2.3",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.9.1",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/parser": "^8.46.2",
-    "@vitejs/plugin-react-swc": "^4.1.0",
-    "eslint": "^9.38.0",
+    "@types/jsdom": "~27.0.0",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@types/use-sync-external-store": "~1.5.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "eslint": "^9.39.2",
     "eslint-config-mantine": "^4.0.3",
-    "eslint-plugin-perfectionist": "^4.15.1",
+    "eslint-plugin-perfectionist": "^5.4.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^9.1.13",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "eslint-plugin-storybook": "^10.2.3",
     "global": "^4.4.0",
-    "globals": "^16.4.0",
+    "globals": "^17.3.0",
     "jiti": "^2.6.1",
-    "jsdom": "^27.0.1",
+    "jsdom": "^28.0.0",
     "postcss": "^8.5.6",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.6.2",
+    "prettier": "^3.8.1",
     "prettier-eslint": "^16.4.2",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "storybook": "^9.1.13",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^10.2.3",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.11",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4"
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "@glideapps/glide-data-grid": "^6.0.3",
     "@mantine/core": "^8.3.1",
     "@mantine/hooks": "^8.3.1",
+    "@mantine/modals": "^8.3.5",
     "@mantine/notifications": "^8.3.5",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "^5.90.5",
     "@warkypublic/artemis-kit": "^1.0.10",
     "@warkypublic/zustandsyncstore": "^0.0.4",
+    "idb-keyval": "^6.2.2",
     "immer": "^10.1.3",
     "react": ">= 19.0.0",
     "react-dom": ">= 19.0.0",
+    "react-hook-form": "^7.71.0",
     "use-sync-external-store": ">= 1.4.0",
     "zustand": ">= 5.0.0"
   }

src/Boxer/Boxer.store.tsx

@@ -0,0 +1,159 @@
+import { createSyncStore } from '@warkypublic/zustandsyncstore';
+import { produce } from 'immer';
+
+import type { BoxerProps, BoxerStoreState } from './Boxer.types';
+
+const { Provider: BoxerProvider, useStore: useBoxerStore } = createSyncStore<
+  BoxerStoreState,
+  BoxerProps
+>(
+  (set, get) => ({
+    boxerData: [],
+    // Data Actions
+    fetchData: async (search?: string, reset?: boolean) => {
+      const state = get();
+
+      // Handle local data
+      if (state.dataSource === 'local' || !state.onAPICall) {
+        const localData = state.data ?? [];
+
+        if (!search) {
+          set({ boxerData: localData, hasMore: false, total: localData.length });
+          return;
+        }
+
+        // Filter local data based on search
+        const filtered = localData.filter((item) =>
+          item.label.toLowerCase().includes(search.toLowerCase())
+        );
+        set({ boxerData: filtered, hasMore: false, total: filtered.length });
+        return;
+      }
+
+      // Handle server-side data
+      if (state.onAPICall) {
+        try {
+          set({ isFetching: true });
+
+          const currentPage = reset ? 0 : state.page;
+
+          const result = await state.onAPICall({
+            page: currentPage,
+            pageSize: state.pageSize,
+            search,
+          });
+
+          set(
+            produce((draft) => {
+              if (reset) {
+                draft.boxerData = result.data;
+                draft.page = 0;
+              } else {
+                draft.boxerData = [...(draft.boxerData ?? []), ...result.data];
+              }
+              draft.total = result.total;
+              draft.hasMore = draft.boxerData.length < result.total;
+              draft.isFetching = false;
+            })
+          );
+        } catch (error) {
+          console.error('Boxer fetchData error:', error);
+          set({ isFetching: false });
+        }
+      }
+    },
+    fetchMoreOnBottomReached: (target: HTMLDivElement) => {
+      const state = get();
+
+      if (!state.hasMore || state.isFetching) {
+        return;
+      }
+
+      const scrollPercentage =
+        (target.scrollTop + target.clientHeight) / target.scrollHeight;
+
+      // Load more when scrolled past 80%
+      if (scrollPercentage > 0.8) {
+        state.loadMore();
+      }
+    },
+    // State Management
+    getState: (key) => {
+      const current = get();
+      return current?.[key];
+    },
+    hasMore: true,
+    input: '',
+    isFetching: false,
+    loadMore: async () => {
+      const state = get();
+
+      if (!state.hasMore || state.isFetching) {
+        return;
+      }
+
+      set(
+        produce((draft) => {
+          draft.page = draft.page + 1;
+        })
+      );
+
+      await state.fetchData(state.search);
+    },
+    // Initial State
+    opened: false,
+    page: 0,
+
+    pageSize: 50,
+
+    search: '',
+
+    selectedOptionIndex: -1,
+
+    setInput: (input: string) => {
+      set({ input });
+    },
+
+    // Actions
+    setOpened: (opened: boolean) => {
+      set({ opened });
+    },
+
+    setSearch: (search: string) => {
+      set({ search });
+    },
+
+    setSelectedOptionIndex: (index: number) => {
+      set({ selectedOptionIndex: index });
+    },
+
+    setState: (key, value) => {
+      set(
+        produce((state) => {
+          state[key] = value;
+        })
+      );
+    },
+
+    total: 0,
+  }),
+  ({
+    data = [],
+    dataSource = 'local',
+    pageSize = 50,
+    ...props
+  }) => {
+    return {
+      ...props,
+      boxerData: data, // Initialize with local data if provided
+      data,
+      dataSource,
+      hasMore: dataSource === 'server',
+      pageSize,
+      total: data.length,
+    };
+  }
+);
+
+export { BoxerProvider };
+export { useBoxerStore };

src/Boxer/Boxer.tsx

@@ -0,0 +1,379 @@
+import { Combobox, ScrollArea, useVirtualizedCombobox } from '@mantine/core';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+
+import type { BoxerItem, BoxerProps, BoxerRef } from './Boxer.types';
+
+import { BoxerProvider, useBoxerStore } from './Boxer.store';
+import BoxerTarget from './BoxerTarget';
+import useBoxerOptions from './hooks/useBoxerOptions';
+
+const BoxerInner = React.forwardRef<BoxerRef>((_, ref) => {
+  // Component Refs
+  const parentRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const valueRef = useRef<any>(null);
+  const bufferRef = useRef<any>(null);
+
+  // Component store State
+  const {
+    boxerData,
+    clearable,
+    comboBoxProps,
+    dropDownProps,
+    error,
+    fetchData,
+    fetchMoreOnBottomReached,
+    input,
+    isFetching,
+    label,
+    mah,
+    multiSelect,
+    onBufferChange,
+    onChange,
+    opened,
+    openOnClear,
+    placeholder,
+    scrollAreaProps,
+    search,
+    selectedOptionIndex,
+    selectFirst,
+    setInput,
+    setOpened,
+    setSearch,
+    setSelectedOptionIndex,
+    showAll,
+    value,
+  } = useBoxerStore((state) => ({
+    boxerData: state.boxerData,
+    clearable: state.clearable,
+    comboBoxProps: state.comboBoxProps,
+    dropDownProps: state.dropDownProps,
+    error: state.error,
+    fetchData: state.fetchData,
+    fetchMoreOnBottomReached: state.fetchMoreOnBottomReached,
+    input: state.input,
+    isFetching: state.isFetching,
+    label: state.label,
+    mah: state.mah,
+    multiSelect: state.multiSelect,
+    onBufferChange: state.onBufferChange,
+    onChange: state.onChange,
+    opened: state.opened,
+    openOnClear: state.openOnClear,
+    placeholder: state.placeholder,
+    scrollAreaProps: state.scrollAreaProps,
+    search: state.search,
+    selectedOptionIndex: state.selectedOptionIndex,
+    selectFirst: state.selectFirst,
+    setInput: state.setInput,
+    setOpened: state.setOpened,
+    setSearch: state.setSearch,
+    setSelectedOptionIndex: state.setSelectedOptionIndex,
+    showAll: state.showAll,
+    value: state.value,
+  }));
+
+  // Virtualization setup
+  const count = boxerData.length;
+  const virtualizer = useVirtualizer({
+    count,
+    estimateSize: () => 36,
+    getScrollElement: () => parentRef.current,
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+
+  // Component Callback Functions
+  const onOptionSubmit = useCallback(
+    (indexOrId: number | string) => {
+      const index = typeof indexOrId === 'string' ? parseInt(indexOrId, 10) : indexOrId;
+      const option = boxerData[index];
+
+      if (!option) {
+        return;
+      }
+
+      if (multiSelect) {
+        // Handle multi-select
+        const currentValues = Array.isArray(value) ? value : [];
+        const isSelected = currentValues.includes(option.value);
+
+        const newValues = isSelected
+          ? currentValues.filter((v: any) => v !== option.value)
+          : [...currentValues, option.value];
+
+        onChange?.(newValues);
+
+        // Update buffer for multi-select
+        const newBuffer = boxerData.filter((item) => newValues.includes(item.value));
+        onBufferChange?.(newBuffer);
+      } else {
+        // Handle single select
+        onChange?.(option.value);
+        setSearch('');
+        setInput(option.label);
+        valueRef.current = option.value;
+        setOpened(false);
+      }
+    },
+    [boxerData, multiSelect, value, onChange, onBufferChange, setSearch, setInput, setOpened]
+  );
+
+  const onClear = useCallback(() => {
+    if (showAll && selectFirst) {
+      onOptionSubmit(0);
+    } else {
+      if (multiSelect) {
+        onChange?.([] as any);
+      } else {
+        onChange?.(null as any);
+      }
+      setSearch('');
+      setInput('');
+      inputRef.current?.focus();
+    }
+
+    if (openOnClear) {
+      setOpened(true);
+    }
+  }, [showAll, selectFirst, multiSelect, onChange, setSearch, setInput, openOnClear, setOpened, onOptionSubmit]);
+
+  // Component Hooks
+  const combobox = useVirtualizedCombobox({
+    getOptionId: (index) => String(index),
+    onDropdownClose: () => {
+      setOpened(false);
+    },
+    onDropdownOpen: () => {
+      if (!value || (multiSelect && (!Array.isArray(value) || value.length === 0))) {
+        setSearch('');
+        setInput('');
+      }
+      combobox.selectFirstOption();
+    },
+    onSelectedOptionSubmit: onOptionSubmit,
+    opened,
+    selectedOptionIndex,
+    setSelectedOptionIndex: (index) => {
+      setSelectedOptionIndex(index);
+      if (index !== -1) {
+        virtualizer.scrollToIndex(index);
+      }
+    },
+    totalOptionsCount: boxerData.length,
+  });
+
+  // Component variables
+  const { options } = useBoxerOptions({
+    boxerData,
+    multiSelect,
+    onOptionSubmit,
+    value,
+  });
+
+  // Component useEffects
+  useEffect(() => {
+    // Fetch initial data
+    fetchData('', true);
+  }, []);
+
+  useEffect(() => {
+    // Handle search changes
+    const delayDebounceFn = setTimeout(() => {
+      if (search !== undefined && opened) {
+        fetchData(search, true);
+      }
+    }, 300);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [search, opened]);
+
+  useEffect(() => {
+    // Sync input with value
+    if (multiSelect) {
+      const labels = boxerData
+        .filter((item) => Array.isArray(value) && value.includes(item.value))
+        .map((item) => item.label)
+        .join(', ');
+
+      // When dropdown is closed, show selected labels. When open, allow searching
+      if (!opened && input !== labels) {
+        setInput(labels);
+        setSearch('');
+      }
+    } else {
+      const label = boxerData.find((item) => item.value === value)?.label;
+
+      // Only sync if we need to update the input to match the value
+      if (input !== label && (search ?? '') === '' && valueRef.current !== value && value) {
+        setInput(label ?? '');
+      } else if (!value && !valueRef.current && (search ?? '') === '') {
+        setSearch('');
+        setInput('');
+      }
+    }
+
+    // Handle buffer change
+    if (multiSelect) {
+      const buffer =
+        boxerData.filter((item: BoxerItem) => Array.isArray(value) && value.includes(item.value)) ??
+        [];
+
+      if (JSON.stringify(bufferRef.current) !== JSON.stringify(buffer)) {
+        onBufferChange?.(buffer);
+        bufferRef.current = buffer;
+      }
+    } else {
+      const buffer = boxerData?.find((item: BoxerItem) => item.value === value) ?? null;
+
+      if (bufferRef.current?.value !== buffer?.value) {
+        onBufferChange?.(buffer);
+        bufferRef.current = buffer;
+      }
+    }
+  }, [value, boxerData, input, search, multiSelect, opened, onBufferChange, setInput, setSearch]);
+
+  useEffect(() => {
+    // Select first option automatically
+    if (selectFirst && (boxerData?.length ?? 0) > 0 && !multiSelect) {
+      if (!value) {
+        onOptionSubmit?.(0);
+      }
+    }
+  }, [selectFirst, boxerData, multiSelect]);
+
+  // Expose ref methods
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      onClear();
+    },
+    close: () => {
+      setOpened(false);
+      combobox.closeDropdown();
+    },
+    focus: () => {
+      inputRef.current?.focus();
+    },
+    getValue: () => {
+      return value;
+    },
+    open: () => {
+      setOpened(true);
+      combobox.openDropdown();
+    },
+    setValue: (newValue: any) => {
+      onChange?.(newValue);
+    },
+  }));
+
+  return (
+    <Combobox
+      {...comboBoxProps}
+      resetSelectionOnOptionHover={false}
+      store={combobox}
+      withinPortal={true}
+    >
+      <Combobox.Target>
+        <Combobox.EventsTarget>
+          <BoxerTarget
+            clearable={clearable}
+            combobox={combobox}
+            error={error}
+            isFetching={isFetching}
+            label={label}
+            onBlur={() => {
+              if (!value && !multiSelect) {
+                setSearch('');
+                setInput('');
+                combobox.closeDropdown();
+                setOpened(false);
+              }
+            }}
+            onClear={onClear}
+            onSearch={(event) => {
+              setSearch(event.currentTarget.value);
+              setInput(event.currentTarget.value);
+              setOpened(true);
+            }}
+            placeholder={placeholder}
+            ref={inputRef}
+            search={input}
+          />
+        </Combobox.EventsTarget>
+      </Combobox.Target>
+
+      <Combobox.Dropdown
+        onKeyDown={() => {
+          if (inputRef.current) {
+            inputRef.current.value = '';
+            inputRef.current?.focus();
+          }
+        }}
+        p={2}
+        {...dropDownProps}
+      >
+        {opened && options.length > 0 ? (
+          <Combobox.Options>
+            <ScrollArea.Autosize
+              {...scrollAreaProps}
+              mah={mah ?? 200}
+              viewportProps={{
+                ...scrollAreaProps?.viewportProps,
+                onScroll: (event) => {
+                  fetchMoreOnBottomReached(event.currentTarget as HTMLDivElement);
+                },
+                style: { border: '1px solid gray', borderRadius: 4 },
+              }}
+              viewportRef={parentRef}
+            >
+              <div
+                style={{
+                  height: `${virtualizer.getTotalSize()}px`,
+                  position: 'relative',
+                  width: '100%',
+                }}
+              >
+                <div
+                  style={{
+                    left: 0,
+                    position: 'absolute',
+                    top: 0,
+                    transform: `translateY(${virtualItems[0]?.start ?? 0}px)`,
+                    width: '100%',
+                  }}
+                >
+                  {virtualItems.map((virtualRow) => (
+                    <div
+                      data-index={virtualRow.index}
+                      key={virtualRow.key}
+                      ref={virtualizer.measureElement}
+                    >
+                      {options[virtualRow.index]}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </ScrollArea.Autosize>
+          </Combobox.Options>
+        ) : (
+          <Combobox.Empty>Nothing found</Combobox.Empty>
+        )}
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+});
+
+BoxerInner.displayName = 'BoxerInner';
+
+const Boxer = React.forwardRef<BoxerRef, BoxerProps>((props, ref) => {
+  return (
+    <BoxerProvider {...props}>
+      <BoxerInner ref={ref} />
+    </BoxerProvider>
+  );
+});
+
+Boxer.displayName = 'Boxer';
+
+export { Boxer };
+export default Boxer;

src/Boxer/Boxer.types.ts

@@ -0,0 +1,109 @@
+import type { ComboboxProps, ScrollAreaAutosizeProps, TextInputProps } from '@mantine/core';
+import type { VirtualizerOptions } from '@tanstack/react-virtual';
+
+export type BoxerDataSource =
+  | 'local' // Local array data
+  | 'server'; // Server-side with infinite loading
+
+export type BoxerItem = {
+  [key: string]: any;
+  label: string;
+  value: any;
+};
+
+export interface BoxerProps {
+  clearable?: boolean;
+  // Component Props
+  comboBoxProps?: Partial<ComboboxProps>;
+
+  // Data Configuration
+  data?: Array<BoxerItem>;
+
+  dataSource?: BoxerDataSource;
+  disabled?: boolean;
+  dropDownProps?: React.ComponentPropsWithoutRef<'div'>;
+
+  error?: string;
+  // Advanced
+  id?: string;
+  inputProps?: Partial<TextInputProps>;
+  label?: string;
+  leftSection?: React.ReactNode;
+  mah?: number; // Max height for dropdown
+
+  // Component Configuration
+  multiSelect?: boolean;
+  name?: string;
+  // API Configuration (for server-side)
+  onAPICall?: (params: {
+    page: number;
+    pageSize: number;
+    search?: string;
+  }) => Promise<{ data: Array<BoxerItem>; total: number }>;
+  onBufferChange?: (buffer: Array<BoxerItem> | BoxerItem | null) => void;
+  onChange?: (value: any | Array<any>) => void;
+
+  openOnClear?: boolean;
+
+  pageSize?: number;
+
+  // UI Configuration
+  placeholder?: string;
+  // Styling
+  rightSection?: React.ReactNode;
+  scrollAreaProps?: Partial<ScrollAreaAutosizeProps>;
+  searchable?: boolean;
+
+  selectFirst?: boolean;
+  showAll?: boolean;
+
+  // Value Management
+  value?: any | Array<any>;
+  // Virtualization
+  virtualizer?: Partial<VirtualizerOptions<HTMLDivElement, Element>>;
+}
+
+export interface BoxerRef {
+  clear: () => void;
+  close: () => void;
+  focus: () => void;
+  getValue: () => any | Array<any>;
+  open: () => void;
+  setValue: (value: any | Array<any>) => void;
+}
+
+export interface BoxerState {
+  // Data State
+  boxerData: Array<BoxerItem>;
+  fetchData: (search?: string, reset?: boolean) => Promise<void>;
+  fetchMoreOnBottomReached: (target: HTMLDivElement) => void;
+  // State Management
+  getState: <K extends keyof BoxerStoreState>(key: K) => BoxerStoreState[K];
+  hasMore: boolean;
+
+  input: string;
+  isFetching: boolean;
+  // Data Actions
+  loadMore: () => Promise<void>;
+  // Internal State
+  opened: boolean;
+  page: number;
+
+  pageSize: number;
+  search: string;
+  selectedOptionIndex: number;
+  setInput: (input: string) => void;
+
+  // Actions
+  setOpened: (opened: boolean) => void;
+  setSearch: (search: string) => void;
+  setSelectedOptionIndex: (index: number) => void;
+
+  setState: <K extends keyof BoxerStoreState>(
+    key: K,
+    value: Partial<BoxerStoreState[K]>
+  ) => void;
+  total: number;
+}
+
+export type BoxerStoreState = BoxerProps & BoxerState;

src/Boxer/BoxerTarget.tsx

@@ -0,0 +1,73 @@
+import type { ComboboxStore } from '@mantine/core';
+
+import { ActionIcon, Loader, TextInput } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+import React, { forwardRef } from 'react';
+
+interface BoxerTargetProps {
+  clearable?: boolean;
+  combobox: ComboboxStore;
+  disabled?: boolean;
+  error?: string;
+  isFetching?: boolean;
+  label?: string;
+  leftSection?: React.ReactNode;
+  onBlur: () => void;
+  onClear: () => void;
+  onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  search: string;
+}
+
+const BoxerTarget = forwardRef<HTMLInputElement, BoxerTargetProps>((props, ref) => {
+  const {
+    clearable = true,
+    combobox,
+    disabled,
+    error,
+    isFetching,
+    label,
+    leftSection,
+    onBlur,
+    onClear,
+    onSearch,
+    placeholder,
+    search,
+  } = props;
+
+  const rightSection = isFetching ? (
+    <Loader size="xs" />
+  ) : search && clearable ? (
+    <ActionIcon
+      onClick={(e) => {
+        e.stopPropagation();
+        onClear();
+      }}
+      size="sm"
+      variant="subtle"
+    >
+      <IconX size={16} />
+    </ActionIcon>
+  ) : null;
+
+  return (
+    <TextInput
+      disabled={disabled}
+      error={error}
+      label={label}
+      leftSection={leftSection}
+      onBlur={onBlur}
+      onChange={onSearch}
+      onClick={() => combobox.openDropdown()}
+      onFocus={() => combobox.openDropdown()}
+      placeholder={placeholder}
+      ref={ref}
+      rightSection={rightSection}
+      value={search}
+    />
+  );
+});
+
+BoxerTarget.displayName = 'BoxerTarget';
+
+export default BoxerTarget;

src/Boxer/hooks/useBoxerOptions.tsx

@@ -0,0 +1,47 @@
+import { Checkbox, Combobox } from '@mantine/core';
+import { useMemo } from 'react';
+
+import type { BoxerItem } from '../Boxer.types';
+
+interface UseBoxerOptionsProps {
+  boxerData: Array<BoxerItem>;
+  multiSelect?: boolean;
+  onOptionSubmit: (index: number) => void;
+  value?: any | Array<any>;
+}
+
+const useBoxerOptions = (props: UseBoxerOptionsProps) => {
+  const { boxerData, multiSelect, onOptionSubmit, value } = props;
+
+  const options = useMemo(() => {
+    return boxerData.map((item, index) => {
+      const isSelected = multiSelect
+        ? Array.isArray(value) && value.includes(item.value)
+        : value === item.value;
+
+      return (
+        <Combobox.Option
+          active={isSelected}
+          key={`${item.value}-${index}`}
+          onClick={() => {
+            onOptionSubmit(index);
+          }}
+          value={String(index)}
+        >
+          {multiSelect ? (
+            <div style={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
+              <Checkbox checked={isSelected} onChange={() => {}} tabIndex={-1} />
+              <span>{item.label}</span>
+            </div>
+          ) : (
+            item.label
+          )}
+        </Combobox.Option>
+      );
+    });
+  }, [boxerData, value, multiSelect, onOptionSubmit]);
+
+  return { options };
+};
+
+export default useBoxerOptions;

src/Boxer/index.ts

@@ -0,0 +1,10 @@
+export { Boxer, default } from './Boxer';
+export { BoxerProvider, useBoxerStore } from './Boxer.store';
+export type {
+  BoxerDataSource,
+  BoxerItem,
+  BoxerProps,
+  BoxerRef,
+  BoxerState,
+  BoxerStoreState,
+} from './Boxer.types';

src/Boxer/stories/Boxer.stories.tsx

@@ -0,0 +1,218 @@
+//@ts-ignore
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useState } from 'react';
+
+import type { BoxerItem } from '../Boxer.types';
+
+import { Boxer } from '../Boxer';
+
+const meta: Meta<typeof Boxer> = {
+  component: Boxer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Boxer',
+};
+
+export default meta;
+type Story = StoryObj<typeof Boxer>;
+
+// Sample data
+const sampleData: Array<BoxerItem> = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Cherry', value: 'cherry' },
+  { label: 'Date', value: 'date' },
+  { label: 'Elderberry', value: 'elderberry' },
+  { label: 'Fig', value: 'fig' },
+  { label: 'Grape', value: 'grape' },
+  { label: 'Honeydew', value: 'honeydew' },
+  { label: 'Kiwi', value: 'kiwi' },
+  { label: 'Lemon', value: 'lemon' },
+  { label: 'Mango', value: 'mango' },
+  { label: 'Nectarine', value: 'nectarine' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Papaya', value: 'papaya' },
+  { label: 'Quince', value: 'quince' },
+  { label: 'Raspberry', value: 'raspberry' },
+  { label: 'Strawberry', value: 'strawberry' },
+  { label: 'Tangerine', value: 'tangerine' },
+  { label: 'Ugli Fruit', value: 'ugli' },
+  { label: 'Watermelon', value: 'watermelon' },
+];
+
+// Local Data Example
+export const LocalData: Story = {
+  render: () => {
+    const [value, setValue] = useState<null | string>(null);
+
+    return (
+      <div style={{ width: 300 }}>
+        <Boxer
+          clearable
+          data={sampleData}
+          dataSource="local"
+          label="Favorite Fruit"
+          onChange={setValue}
+          placeholder="Select a fruit"
+          searchable
+          value={value}
+        />
+        <div style={{ marginTop: 20 }}>
+          <strong>Selected Value:</strong> {value ?? 'None'}
+        </div>
+      </div>
+    );
+  },
+};
+
+// Multi-Select Example
+export const MultiSelect: Story = {
+  render: () => {
+    const [value, setValue] = useState<Array<string>>([]);
+
+    return (
+      <div style={{ width: 300 }}>
+        <Boxer
+          clearable
+          data={sampleData}
+          dataSource="local"
+          label="Favorite Fruits"
+          multiSelect
+          onChange={setValue}
+          placeholder="Select fruits"
+          searchable
+          value={value}
+        />
+        <div style={{ marginTop: 20 }}>
+          <strong>Selected Values:</strong>{' '}
+          {value.length > 0 ? value.join(', ') : 'None'}
+        </div>
+      </div>
+    );
+  },
+};
+
+// Server-Side Example (Simulated)
+export const ServerSide: Story = {
+  render: () => {
+    const [value, setValue] = useState<null | string>(null);
+
+    // Simulate server-side API call
+    const handleAPICall = async (params: {
+      page: number;
+      pageSize: number;
+      search?: string;
+    }): Promise<{ data: Array<BoxerItem>; total: number }> => {
+      // Simulate network delay
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      // Filter based on search
+      let filteredData = [...sampleData];
+      if (params.search) {
+        filteredData = filteredData.filter((item) =>
+          item.label.toLowerCase().includes(params.search!.toLowerCase())
+        );
+      }
+
+      // Paginate
+      const start = params.page * params.pageSize;
+      const end = start + params.pageSize;
+      const paginatedData = filteredData.slice(start, end);
+
+      return {
+        data: paginatedData,
+        total: filteredData.length,
+      };
+    };
+
+    return (
+      <div style={{ width: 300 }}>
+        <Boxer
+          clearable
+          dataSource="server"
+          label="Favorite Fruit (Server-side)"
+          onAPICall={handleAPICall}
+          onChange={setValue}
+          pageSize={10}
+          placeholder="Select a fruit (Server-side)"
+          searchable
+          value={value}
+        />
+        <div style={{ marginTop: 20 }}>
+          <strong>Selected Value:</strong> {value ?? 'None'}
+        </div>
+      </div>
+    );
+  },
+};
+
+// Select First Example
+export const SelectFirst: Story = {
+  render: () => {
+    const [value, setValue] = useState<null | string>(null);
+
+    return (
+      <div style={{ width: 300 }}>
+        <Boxer
+          clearable
+          data={sampleData}
+          dataSource="local"
+          label="Auto-select First"
+          onChange={setValue}
+          placeholder="Select a fruit"
+          searchable
+          selectFirst
+          value={value}
+        />
+        <div style={{ marginTop: 20 }}>
+          <strong>Selected Value:</strong> {value ?? 'None'}
+        </div>
+      </div>
+    );
+  },
+};
+
+// With Error
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = useState<null | string>(null);
+
+    return (
+      <div style={{ width: 300 }}>
+        <Boxer
+          clearable
+          data={sampleData}
+          dataSource="local"
+          error="Please select a fruit"
+          label="With Error"
+          onChange={setValue}
+          placeholder="Select a fruit"
+          searchable
+          value={value}
+        />
+      </div>
+    );
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <div style={{ width: 300 }}>
+        <Boxer
+          data={sampleData}
+          dataSource="local"
+          disabled
+          label="Disabled"
+          onChange={() => {}}
+          placeholder="Select a fruit"
+          value="apple"
+        />
+      </div>
+    );
+  },
+};

src/Boxer/todo.md

@@ -0,0 +1,15 @@
+The plan and requirements: 
+Auto complete lookup with server side lookup support and infinite loading.
+It must also have local array lookup and autocomplete.
+When a users starts typing, it must start autocomplete list. 
+Exiting selected item must always be the first on the list and populated from the input in case the options does not exist anymore, it must not beak existing data.
+
+
+- [ ] Auto Complete
+- [ ] Multi Select
+- [ ] Virtualize
+- [ ] Search
+- [ ] Clear, Menu buttons
+- [ ] Headerspec API
+- [ ] Relspec API
+- [ ] SocketSpec API

src/ErrorBoundary/BasicErrorBoundary.tsx

@@ -0,0 +1,70 @@
+import React, { type PropsWithChildren } from 'react';
+
+interface ErrorBoundaryProps extends PropsWithChildren {
+  namespace?: string;
+  onReportClick?: () => void;
+  onResetClick?: () => void;
+  onRetryClick?: () => void;
+  reportAPI?: string;
+}
+
+interface ErrorBoundaryState {
+  error: any;
+  errorInfo: any;
+  reported?: boolean;
+  resetted?: boolean;
+  showDetail: boolean;
+  timer?: NodeJS.Timeout | undefined;
+  try: boolean;
+  tryCnt: number;
+}
+
+export class ReactBasicErrorBoundary extends React.PureComponent<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+
+    this.state = {
+      error: null,
+      errorInfo: null,
+      showDetail: false,
+      timer: undefined,
+      try: false,
+      tryCnt: 0,
+    };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error,
+      errorInfo,
+      try: false,
+    });
+    // You can also log error messages to an error reporting service here
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      // Error path
+      return (
+        <div>
+          <h2>Error</h2>
+          {this.state.error && (
+            <>
+              <h3>In: {this.props.namespace ?? 'default'}</h3>
+              <main>{this.state.error.toString()}</main>
+            </>
+          )}
+        </div>
+      );
+    }
+
+    // Normally, just render children
+    return this.props.children;
+  }
+}
+
+export default ReactBasicErrorBoundary;

src/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,240 @@
+import { Button, Code, Collapse, Group, Paper, rem, Text } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import React, { type PropsWithChildren } from 'react';
+
+let ErrorBoundaryOptions = {
+  disabled: false,
+  onError: undefined,
+} as {
+  disabled?: boolean;
+  onError?: (error: any, errorInfo: any) => void;
+};
+
+export const SetErrorBoundaryOptions = (options: typeof ErrorBoundaryOptions) => {
+  ErrorBoundaryOptions = { ...ErrorBoundaryOptions, ...options };
+};
+
+export const GetErrorBoundaryOptions = () => {
+  return { ...ErrorBoundaryOptions };
+};
+
+interface ErrorBoundaryProps extends PropsWithChildren {
+  namespace?: string;
+  onReportClick?: () => void;
+  onResetClick?: () => void;
+  onRetryClick?: () => void;
+  reportAPI?: string;
+}
+
+interface ErrorBoundaryState {
+  error: any;
+  errorInfo: any;
+  reported?: boolean;
+  showDetail: boolean;
+  timer?: NodeJS.Timeout | undefined;
+  try: boolean;
+  tryCnt: number;
+  wasReset?: boolean;
+}
+
+export class ReactErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+
+    this.state = {
+      error: null,
+      errorInfo: null,
+      showDetail: false,
+      timer: undefined,
+      try: false,
+      tryCnt: 0,
+    };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    if (GetErrorBoundaryOptions()?.disabled) {
+      throw Error('ErrorBoundary pass through enabled, rethrowing error', {
+        cause: error,
+        //@ts-ignore
+        info: errorInfo,
+      });
+    }
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error,
+      errorInfo,
+      try: false,
+    });
+    if (typeof GetErrorBoundaryOptions()?.onError === 'function') {
+      GetErrorBoundaryOptions()?.onError?.(error, errorInfo);
+    }
+    // You can also log error messages to an error reporting service here
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      // Error path
+      return (
+        <div>
+          <h2
+            style={{
+              color: 'var(--mantine-color-error)',
+              display: 'flex',
+              gap: '8px',
+            }}
+          >
+            <IconExclamationCircle
+              color="var(--mantine-color-error)"
+              style={{ height: rem(20), width: rem(20) }}
+            />
+            A react error has occurred!
+          </h2>
+          <h4>You can try one of these solutions to get back on track:</h4>
+          <ul>
+            <li>Report the error to our team</li>
+            <li>Hit the keys Ctrl-Shift-R</li>
+            <li>Make sure your web browser is up to date</li>
+            <li>Clear your browser cache and cookies</li>
+            <li>Try using a different web browser</li>
+            <li>Reset your layout and settings</li>
+            <li>Retry loading the application</li>
+          </ul>
+
+          <Group>
+            <Button
+              color="red"
+              my="md"
+              onClick={() =>
+                this.setState((state) => ({
+                  showDetail: !state.showDetail,
+                }))
+              }
+              size="compact-xs"
+              variant="outline"
+            >
+              More
+            </Button>
+            <Button
+              color="blue"
+              disabled={this.state.tryCnt > 2 || this.state.try}
+              my="md"
+              onClick={() => this.retry()}
+              size="compact-xs"
+              variant="outline"
+            >
+              Retry {this.state.tryCnt > 0 ? `(${this.state.tryCnt})` : ''}
+            </Button>
+            <Button
+              color="yellow"
+              disabled={this.state.wasReset}
+              my="md"
+              onClick={() => this.reset()}
+              size="compact-xs"
+              variant="outline"
+            >
+              Reset Layout or Settings
+            </Button>
+            <Button
+              color="green"
+              disabled={this.state.reported}
+              my="md"
+              onClick={() => this.report()}
+              size="compact-xs"
+              variant="outline"
+            >
+              Report
+            </Button>
+          </Group>
+
+          {this.state.error && (
+            <Paper
+              p="md"
+              shadow="xs"
+              style={{
+                textAlign: 'justify',
+              }}
+              w="50%"
+              withBorder
+            >
+              {this.props.namespace && <Text size="sm">In: {this.props.namespace}</Text>}
+              <Text size="sm">{this.state.error.toString()}</Text>
+            </Paper>
+          )}
+
+          <Collapse in={this.state.showDetail}>
+            <Code block color="rgba(235, 86, 5, 0.6)" mah="100vh" w="100%">
+              {this.state.errorInfo.componentStack}
+            </Code>
+          </Collapse>
+        </div>
+      );
+    }
+
+    //Retry code, if you do it too many times, it will stop
+    if (this.state.try) {
+      if (!this.state.timer) {
+        const tm = setTimeout(() => {
+          clearTimeout(this.state.timer);
+          this.setState((state) => ({
+            ...state,
+            timer: undefined,
+            try: false,
+          }));
+        }, 1000);
+
+        this.setState((state) => ({
+          ...state,
+          timer: tm,
+        }));
+      }
+      return <div>Retrying {this.state.tryCnt}...</div>;
+    }
+
+    // Normally, just render children
+    return this.props.children;
+  }
+
+  async report() {
+    if (this.props?.onReportClick) {
+      this.props.onReportClick();
+      this.setState(() => ({
+        reported: true,
+      }));
+      return;
+    }
+  }
+
+  reset() {
+    if (this.props?.onResetClick) {
+      this.props.onResetClick();
+      this.setState(() => ({
+        wasReset: true,
+      }));
+      return;
+    }
+
+    this.setState(() => ({
+      wasReset: true,
+    }));
+
+    window.location.reload();
+  }
+
+  retry() {
+    this.setState({
+      try: true,
+      tryCnt: this.state.tryCnt + 1,
+    });
+    if (this.props?.onRetryClick) {
+      this.props.onRetryClick();
+      return;
+    }
+    this.setState({
+      error: undefined,
+      errorInfo: undefined,
+    });
+    this.forceUpdate();
+  }
+}
+
+export default ReactErrorBoundary;

src/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+export { default as ReactBasicErrorBoundary } from './BasicErrorBoundary';
+export { default as ReactErrorBoundary } from './ErrorBoundary';

src/Former/Former.store.tsx

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

src/Former/Former.tsx

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

src/Former/Former.types.ts

@@ -0,0 +1,97 @@
+import type {
+  ButtonProps,
+  GroupProps,
+  LoadingOverlayProps,
+  ScrollAreaAutosizeProps,
+} from '@mantine/core';
+import type React from 'react';
+import type { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+
+export type FormerAPICallType<T extends FieldValues = any> = (
+  mode: 'mutate' | 'read',
+  request: RequestType,
+  value?: T,
+  key?: number | string
+) => 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?: {
+    buttonArea?: "bottom" | "none" | "top";
+    buttonAreaGroupProps?: GroupProps;
+    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;
+  opened?: boolean;
+  primeData?: T;
+  request: RequestType;
+  uniqueKeyField?: string;
+  useFormProps?: UseFormProps<T>;
+  values?: T;
+
+  wrapper?: FormerSectionRender<T>;
+}
+
+export interface FormerRef<T extends FieldValues = any> {
+  close: () => Promise<void>;
+  getValue: () => T | undefined;
+  reset: () => void;
+  save: () => Promise<T | undefined>;
+  setValue: (value: T) => void;
+  show: () => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export type FormerSectionRender<T extends FieldValues = any> = (
+  children: React.ReactNode,
+  opened: boolean ,
+  onClose: ((data?: T) => void),
+  onOpen: ((data?: T) => void) ,
+  getState: FormerState<T>['getState']
+) => React.ReactNode;
+
+export interface FormerState<T extends FieldValues = any> {
+  deleteConfirmed?: boolean;
+  error?: string;
+  getFormMethods?: () => UseFormReturn<any, any>;
+  getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K];
+  load: (reset?: boolean) => Promise<void>;
+  loading?: boolean;
+  loadingOverlayProps?: LoadingOverlayProps;
+  reset: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+  save: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<T | undefined>;
+  scrollAreaProps?: ScrollAreaAutosizeProps;
+  setRequest: (request: RequestType) => void;
+  setState: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: Partial<FormStateAndProps<T>>[K]
+  ) => void;
+  setStateFN: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: (current: FormStateAndProps<T>[K]) => Partial<FormStateAndProps<T>[K]>
+  ) => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export type FormStateAndProps<T extends FieldValues = any> = FormerProps<T> &
+  Partial<FormerState<T>>;
+
+export type RequestType = 'delete' | 'insert' | 'select' | 'update' | 'view';

src/Former/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>
+  );
+};

src/Former/FormerLayout.tsx

@@ -0,0 +1,90 @@
+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,
+    scrollAreaProps,
+  } = 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,
+  }));
+
+  useEffect(() => {
+    if (getFormMethods) {
+      const formMethods = getFormMethods();
+      if (formMethods && request !== 'insert') {
+        load(true);
+      }
+    }
+  }, [getFormMethods, request, opened]);
+
+  return (
+    <>
+      <FormerLayoutTop />
+      <ScrollAreaAutosize
+        offsetScrollbars
+        scrollbarSize={4}
+        type="auto"
+        {...scrollAreaProps}
+        style={{
+          height: '100%',
+          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}
+          </div>
+        ) : (
+          <form
+            id={`former_f${id}`}
+            key={`former_${id}`}
+            onReset={(e) => reset(e)}
+            onSubmit={(e) => save(e)}
+            // eslint-disable-next-line react/no-unknown-property
+            x-data-request={request}
+          >
+            {props.children}
+          </form>
+        )}
+
+        <LoadingOverlay
+          loaderProps={{ type: 'bars' }}
+          overlayProps={{
+            backgroundOpacity: 0.5,
+          }}
+          {...loadingOverlayProps}
+          visible={loading}
+        />
+      </ScrollAreaAutosize>
+      <FormerLayoutBottom />
+    </>
+  );
+};

src/Former/FormerLayoutBottom.tsx

@@ -0,0 +1,24 @@
+import { useFormerStore } from './Former.store';
+import { FormerButtonArea } from './FormerButtonArea';
+
+export const FormerLayoutBottom = () => {
+  const { buttonArea, getState, opened, renderBottom ,setState} = useFormerStore((state) => ({
+    buttonArea: state.layout?.buttonArea,
+    getState: state.getState,
+    opened: state.opened,
+    renderBottom: state.layout?.renderBottom,
+    setState: state.setState,
+  }));
+
+  if (renderBottom) {
+    return renderBottom(
+      <FormerButtonArea />,
+      opened ?? false,
+      getState('onClose') ?? (() => {setState('opened', false)}),
+      getState('onOpen') ?? (() => {setState('opened', true)}),
+      getState
+    );
+  }
+
+  return buttonArea === "bottom" ?  <FormerButtonArea /> : <></>;
+};

src/Former/FormerLayoutTop.tsx

@@ -0,0 +1,23 @@
+import { useFormerStore } from './Former.store';
+import { FormerButtonArea } from './FormerButtonArea';
+
+export const FormerLayoutTop = () => {
+  const { buttonArea, getState, opened, renderTop,setState } = useFormerStore((state) => ({
+    buttonArea: state.layout?.buttonArea,
+    getState: state.getState,
+    opened: state.opened,
+    renderTop: state.layout?.renderTop,
+        setState: state.setState,
+  }));
+
+  if (renderTop) {
+    return renderTop(
+      <FormerButtonArea />,
+      opened ?? false,
+      getState('onClose') ?? (() => {setState('opened', false)}),
+      getState('onOpen') ?? (() => {setState('opened', true)}),
+      getState
+    );
+  }
+  return buttonArea === "top" ? <FormerButtonArea /> : <></>;
+};

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 };

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 };

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>
+  );
+};

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';

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

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

src/Former/stories/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>
+  );
+};

src/Former/stories/example.tsx

@@ -0,0 +1,182 @@
+import { Button, Group, Select, Stack, Switch } from '@mantine/core';
+import { useRef, useState } from 'react';
+import { Controller } from 'react-hook-form';
+
+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({
+    buttonArea: "bottom",
+    buttonAreaGroupProps: { justify: 'center' },
+    title: 'Custom Former Title',
+  } as FormerProps['layout']);
+
+  const [open, setOpen] = useState(false);
+  const [formData, setFormData] = useState({ a: 99, rid_usernote: 3047 });
+  //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}
+          value={request}
+        />
+        <Switch
+          checked={wrapped}
+          label="Wrapped in Drawer"
+          onChange={(event) => setWrapped(event.currentTarget.checked)}
+        />
+        <Switch
+          checked={disableHTML}
+          label="Disable HTML Form"
+          onChange={(event) => setDisableHTML(event.currentTarget.checked)}
+        />
+        <Select
+        data={['top', 'bottom', 'none']}
+  
+          onChange={(value) => setLayout({ ...layout, buttonArea: value as 'bottom' | 'none' | 'top' })}
+          value={layout?.buttonArea}
+        />
+
+        <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
+          onClick={async () => {
+            const valid = await ref.current?.validate();
+            console.log('validate -> ', valid, ref.current);
+          }}
+        >
+          Test Ref Values. See console
+        </Button>
+        <Button
+          onClick={async () => {
+            setTimeout(() => {
+              ref.current?.close?.();
+            }, 3000);
+          }}
+        >
+          Test Show/Hide
+        </Button>
+      </Group>
+      <FormerModel former={{ request: 'insert' }} onClose={() => setOpen(false)} opened={open}>
+        <div>Test</div>
+      </FormerModel>
+      <Former
+        disableHTMlForm={disableHTML}
+        layout={layout}
+        onAPICall={
+          apiOptions.type === 'api'
+            ? FormerRestHeadSpecAPI({
+                authToken: apiOptions.authToken,
+                url: apiOptions.url,
+              })
+            : StubAPI()
+        }
+        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={
+        //   wrapped
+        //     ? (children, opened, onClose, _onOpen, getState) => {
+        //         const values = getState('values');
+        //         return (
+        //           <Drawer
+        //             h={'100%'}
+        //             onClose={() => onClose?.()}
+        //             opened={opened ?? false}
+        //             title={`Drawer Former - Current A Value: ${values?.a}`}
+        //             w={'50%'}
+        //           >
+        //             <Paper h="100%" shadow="sm" w="100%" withBorder>
+        //               {children}
+        //             </Paper>
+        //           </Drawer>
+        //         );
+        //       }
+        //     : undefined
+        // }
+      >
+        <Stack pb={'400px'}>
+          <Stack>
+            <Controller
+              name="test"
+              render={({ field }) => <input type="text" {...field} placeholder="A" />}
+            />
+            <Controller
+              name="a"
+              render={({ field }) => <input type="text" {...field} placeholder="B" />}
+              rules={{ required: 'Field is required' }}
+            />
+            <Controller
+              name="note"
+              render={({ field }) => <input type="text" {...field} placeholder="note" />}
+              rules={{ required: 'Field is required' }}
+            />
+          </Stack>
+          {!disableHTML && (
+            <Stack>
+              <button type="submit">HTML Submit</button>
+              <button type="reset">HTML Reset</button>
+            </Stack>
+          )}
+        </Stack>
+      </Former>
+      {apiOptions.type === 'api' && (
+        <ApiFormData
+          onChange={(values) => {
+            setApiOptions({ ...apiOptions, ...values });
+          }}
+          values={apiOptions}
+        />
+      )}
+    </Stack>
+  );
+};

src/Former/todo.md

@@ -0,0 +1,13 @@
+- [x] Wrapper must receive button areas etc. Better scroll areas.
+- [x] Predefined wrappers (Model,Dialog,notification,popover)
+- [x] Headerspec API
+- [x] Relspec API
+- [ ] SocketSpec API
+- [x] Layout Tool
+  - [x] Header Section
+  - [x] Button Section
+  - [x] Footer Section
+- [ ] Different Loaded for saving vs loading
+- [ ] Better Confirm Dialog
+- [ ] Reset Confirm Dialog
+- [ ] Request insert and save but keep open (must clear key from API, also add callback)

src/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;

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;

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;
+}

src/FormerControllers/Inputs/InlineWapper.module.css

@@ -0,0 +1,38 @@
+.prompt {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border: 1px solid #ced4da;
+  border-right: 0px;
+
+  @mixin dark {
+    border: 1px solid #373a40;
+  }
+}
+
+.input {
+  border: 1px solid #ced4da;
+  flex: 1;
+
+  &:not([data-promptArea]) {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  &[data-promptArea] {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  &[data-disabled] {
+    color: black;
+    background-color: #fff;
+  }
+
+  @mixin dark {
+    border: 1px solid #373a40;
+  }
+}
+
+.root {
+  flex: 1;
+}

src/FormerControllers/Inputs/InlineWrapper.tsx

@@ -0,0 +1,176 @@
+import type { ReactNode } from 'react'
+
+import {
+  Box,
+  Center,
+  Flex,
+  type FlexProps,
+  Paper,
+  Stack,
+  Title,
+  type TitleProps,
+  Tooltip,
+  useMantineColorScheme,
+} from '@mantine/core'
+import React from 'react'
+
+import classes from './InlineWapper.module.css'
+
+interface InlineWrapperCallbackProps extends Partial<InlineWrapperPropsOnly> {
+  classNames: React.CSSProperties
+  dataCssProps?: Record<string, any>
+  size: string
+}
+
+interface InlineWrapperProps extends InlineWrapperPropsOnly{
+  children?: ((props: InlineWrapperCallbackProps) => ReactNode) | ReactNode
+}
+interface InlineWrapperPropsOnly {
+  error?: ReactNode | string
+  flexProps?: FlexProps
+  label: ReactNode | string
+  labelProps?: TitleProps
+  promptArea?: ((props: InlineWrapperCallbackProps) => ReactNode) | ReactNode
+  promptWidth?: FlexProps['w']
+  required?: boolean
+  rightSection?: ((props: InlineWrapperCallbackProps) => ReactNode) | ReactNode
+  styles?: React.CSSProperties
+  tooltip?: string
+  value?: any
+}
+
+function InlineWrapper(props: InlineWrapperProps) {
+  return (
+    <Stack gap={0}>
+      <Flex
+        gap={0}
+        h={undefined}
+        m={0}
+        mb={0}
+        p={0}
+        w={undefined}
+        wrap='nowrap'
+        {...props.flexProps}
+        bg={'var(--input-background)'}
+      >
+        {props.promptWidth && props.promptWidth !== 0 ? <Prompt {...props} /> : null}
+        <div
+          style={{
+            borderRadius: 0,
+            flex: 10,
+          }}
+        >
+          {typeof props.children === 'function' ? (
+            props.children({ ...props, classNames: classes, size: 'xs' })
+          ) : typeof props.children === 'object' && React.isValidElement(props.children) ? (
+            <props.children.type classNames={classes} size='xs' {...(typeof props.children.props === "object" ? props.children.props : {})} />
+          ) : (
+            props.children
+          )}
+        </div>
+
+        {!props.rightSection ? undefined : typeof props.rightSection === 'function' ? (
+          props.rightSection({
+            ...props,
+            classNames: classes,
+            size: 'xs',
+          })
+        ) : typeof props.rightSection === 'object' && React.isValidElement(props.rightSection) ? (
+          <props.rightSection.type classNames={classes} size='xs' {...(typeof props.rightSection.props === "object" ? props.rightSection.props : {})} />
+        ) : (
+          props.rightSection
+        )}
+      </Flex>
+      {/* <ErrorComponent {...props} /> */}
+    </Stack>
+  )
+}
+
+function isValueEmpty(inputValue: any) {
+  if (inputValue === null || inputValue === undefined) return true
+  if (typeof inputValue === 'number') {
+    if (inputValue === 0) return false
+  } else if (typeof inputValue === 'string' || inputValue === '') {
+    return inputValue.trim() === ''
+  } else if (inputValue instanceof File) {
+    return inputValue.size === 0
+  } else if (inputValue.target) {
+    return isValueEmpty(inputValue.target?.value)
+  } else if (inputValue.constructor?.name === 'Date') {
+    return false
+  }
+}
+
+function Prompt(props: Partial<InlineWrapperProps>) {
+  return (
+    <>
+      {props.tooltip ? (
+        <Tooltip label={props.tooltip}>
+          <PromptDetail {...props} />
+        </Tooltip>
+      ) : (
+        <PromptDetail {...props} />
+      )}
+    </>
+  )
+}
+
+function PromptDetail(props: Partial<InlineWrapperProps>) {
+  const colors = useColors(props)
+  return props.promptArea ? (
+    <Box maw={props.promptWidth} w={'100%'}>
+      {!props.promptArea ? undefined : typeof props.promptArea === 'function' ? (
+        props.promptArea({
+          ...props,
+          classNames: classes,
+          dataCssProps: { 'data-promptArea': true },
+          size: 'xs',
+        })
+      ) : typeof props.rightSection === 'object' && React.isValidElement(props.promptArea) ? (
+        <props.promptArea.type
+          classNames={classes}
+          data-promptArea='true'
+          size='xs'
+          {...(typeof props.promptArea?.props === "object" ? props.promptArea.props : {})}
+        />
+      ) : (
+        props.promptArea
+      )}
+    </Box>
+  ) : (
+    <Paper
+      bg={colors.paperColor}
+      className={classes.prompt}
+      px='md'
+      w={props.promptWidth}
+      withBorder
+    >
+      <Center h='100%' style={{ justifyContent: 'start' }} w='100%'>
+        <Title c={colors.titleColor} fz='xs' order={6} {...props.labelProps}>
+          {props.label}
+          {props.required && isValueEmpty(props.value) && <span style={{ color: 'red' }}>*</span>}
+        </Title>
+      </Center>
+    </Paper>
+  )
+}
+
+function useColors(props: Partial<InlineWrapperProps>) {
+  const { colorScheme } = useMantineColorScheme()
+
+  let titleColor = colorScheme === 'dark' ? 'dark.0' : 'gray.8'
+  let paperColor = colorScheme === 'dark' ? 'dark.7' : 'gray.1'
+
+  if (props.required && isValueEmpty(props.value)) {
+    paperColor = colorScheme === 'dark' ? '#413012e7' : 'yellow.1'
+  }
+
+  if (props.error) {
+    paperColor = colorScheme === 'dark' ? 'red.7' : 'red.0'
+    titleColor = colorScheme === 'dark' ? 'red.0' : 'red.9'
+  }
+  return { paperColor, titleColor }
+}
+
+export { InlineWrapper }
+export type { InlineWrapperProps }

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;

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;

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;

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;

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;

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;

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';

src/FormerControllers/stories/Formers.goapi.stories.tsx

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

src/GlobalStateStore/GlobalStateStore.stories.tsx

@@ -0,0 +1,411 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button, Card, Group, Stack, Switch, Text, TextInput, Title } from '@mantine/core';
+import { useEffect, useState } from 'react';
+
+import {
+  GlobalStateStore,
+  GlobalStateStoreProvider,
+  useGlobalStateStore,
+  useGlobalStateStoreContext,
+} from './';
+
+// Basic State Display Component
+const StateDisplay = () => {
+  const state = useGlobalStateStore();
+
+  return (
+    <Card>
+      <Stack gap="sm">
+        <Title order={3}>Current State</Title>
+
+        <div>
+          <Text fw={700}>Program:</Text>
+          <Text size="sm">Name: {state.program.name || '(empty)'}</Text>
+          <Text size="sm">Slug: {state.program.slug || '(empty)'}</Text>
+        </div>
+
+        <div>
+          <Text fw={700}>Session:</Text>
+          <Text size="sm">API URL: {state.session.apiURL || '(empty)'}</Text>
+          <Text size="sm">Connected: {state.session.connected ? 'Yes' : 'No'}</Text>
+          <Text size="sm">Auth Token: {state.session.authToken || '(empty)'}</Text>
+        </div>
+
+        <div>
+          <Text fw={700}>Owner:</Text>
+          <Text size="sm">Name: {state.owner.name || '(empty)'}</Text>
+          <Text size="sm">ID: {state.owner.id}</Text>
+          <Text size="sm">Theme: {state.owner.theme?.name || 'none'}</Text>
+          <Text size="sm">Dark Mode: {state.owner.theme?.darkMode ? 'Yes' : 'No'}</Text>
+        </div>
+
+        <div>
+          <Text fw={700}>User:</Text>
+          <Text size="sm">Username: {state.user.username || '(empty)'}</Text>
+          <Text size="sm">Email: {state.user.email || '(empty)'}</Text>
+          <Text size="sm">Theme: {state.user.theme?.name || 'none'}</Text>
+          <Text size="sm">Dark Mode: {state.user.theme?.darkMode ? 'Yes' : 'No'}</Text>
+        </div>
+
+        <div>
+          <Text fw={700}>Layout:</Text>
+          <Text size="sm">Left Bar: {state.layout.leftBar.open ? 'Open' : 'Closed'}</Text>
+          <Text size="sm">Right Bar: {state.layout.rightBar.open ? 'Open' : 'Closed'}</Text>
+          <Text size="sm">Top Bar: {state.layout.topBar.open ? 'Open' : 'Closed'}</Text>
+          <Text size="sm">Bottom Bar: {state.layout.bottomBar.open ? 'Open' : 'Closed'}</Text>
+        </div>
+      </Stack>
+    </Card>
+  );
+};
+
+// Interactive Controls Component
+const InteractiveControls = () => {
+  const state = useGlobalStateStore();
+  const [programName, setProgramName] = useState('');
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+
+  return (
+    <Card>
+      <Stack gap="md">
+        <Title order={3}>Controls</Title>
+
+        <div>
+          <Text fw={700} mb="xs">Program</Text>
+          <Group>
+            <TextInput
+              onChange={(e) => setProgramName(e.currentTarget.value)}
+              placeholder="Program name"
+              value={programName}
+            />
+            <Button onClick={() => state.setProgram({ name: programName })}>
+              Set Program Name
+            </Button>
+          </Group>
+        </div>
+
+        <div>
+          <Text fw={700} mb="xs">User</Text>
+          <Stack gap="xs">
+            <Group>
+              <TextInput
+                onChange={(e) => setUsername(e.currentTarget.value)}
+                placeholder="Username"
+                value={username}
+              />
+              <TextInput
+                onChange={(e) => setEmail(e.currentTarget.value)}
+                placeholder="Email"
+                value={email}
+              />
+              <Button onClick={() => state.setUser({ email, username })}>
+                Set User Info
+              </Button>
+            </Group>
+          </Stack>
+        </div>
+
+        <div>
+          <Text fw={700} mb="xs">Theme</Text>
+          <Group>
+            <Switch
+              checked={state.user.theme?.darkMode || false}
+              label="User Dark Mode"
+              onChange={(e) =>
+                state.setUser({
+                  theme: { ...state.user.theme, darkMode: e.currentTarget.checked },
+                })
+              }
+            />
+            <Switch
+              checked={state.owner.theme?.darkMode || false}
+              label="Owner Dark Mode"
+              onChange={(e) =>
+                state.setOwner({
+                  theme: { ...state.owner.theme, darkMode: e.currentTarget.checked },
+                })
+              }
+            />
+          </Group>
+        </div>
+
+        <div>
+          <Text fw={700} mb="xs">Layout</Text>
+          <Group>
+            <Switch
+              checked={state.layout.leftBar.open}
+              label="Left Bar"
+              onChange={(e) => state.setLeftBar({ open: e.currentTarget.checked })}
+            />
+            <Switch
+              checked={state.layout.rightBar.open}
+              label="Right Bar"
+              onChange={(e) => state.setRightBar({ open: e.currentTarget.checked })}
+            />
+            <Switch
+              checked={state.layout.topBar.open}
+              label="Top Bar"
+              onChange={(e) => state.setTopBar({ open: e.currentTarget.checked })}
+            />
+            <Switch
+              checked={state.layout.bottomBar.open}
+              label="Bottom Bar"
+              onChange={(e) => state.setBottomBar({ open: e.currentTarget.checked })}
+            />
+          </Group>
+        </div>
+
+        <div>
+          <Text fw={700} mb="xs">Actions</Text>
+          <Group>
+            <Button
+              color="red"
+              onClick={() => {
+                state.setProgram({ name: '', slug: '' });
+                state.setUser({ email: '', username: '' });
+                state.setOwner({ id: 0, name: '' });
+              }}
+            >
+              Reset State
+            </Button>
+          </Group>
+        </div>
+      </Stack>
+    </Card>
+  );
+};
+
+// Provider Context Example
+const ProviderExample = () => {
+  const { refetch } = useGlobalStateStoreContext();
+  const state = useGlobalStateStore();
+
+  return (
+    <Card>
+      <Stack gap="md">
+        <Title order={3}>Provider Context</Title>
+        <Text>API URL: {state.session.apiURL}</Text>
+        <Text>Loading: {state.session.loading ? 'Yes' : 'No'}</Text>
+        <Text>Connected: {state.session.connected ? 'Yes' : 'No'}</Text>
+        <Button onClick={refetch}>Refetch Data</Button>
+      </Stack>
+    </Card>
+  );
+};
+
+// Main Story Component
+const BasicStory = () => {
+  useEffect(() => {
+    // Set initial state for demo
+    GlobalStateStore.getState().setProgram({
+      description: 'A demonstration application',
+      name: 'Demo App',
+      slug: 'demo-app',
+    });
+    GlobalStateStore.getState().setOwner({
+      id: 1,
+      name: 'Demo Organization',
+      theme: { darkMode: false, name: 'light' },
+    });
+    GlobalStateStore.getState().setUser({
+      email: 'demo@example.com',
+      theme: { darkMode: false, name: 'light' },
+      username: 'demo-user',
+    });
+  }, []);
+
+  return (
+    <Stack gap="lg" h={"100%"}>
+      <StateDisplay />
+      <InteractiveControls />
+    </Stack>
+  );
+};
+
+// Provider Story Component
+const ProviderStory = () => {
+  return (
+    <GlobalStateStoreProvider
+      apiURL="https://api.example.com"
+      fetchOnMount={false}
+      throttleMs={1000}
+    >
+      <Stack gap="lg" h={"100%"}>
+        <StateDisplay />
+        <ProviderExample />
+        <InteractiveControls />
+      </Stack>
+    </GlobalStateStoreProvider>
+  );
+};
+
+// Layout Controls Story
+const LayoutStory = () => {
+  const state = useGlobalStateStore();
+
+  return (
+    <Stack gap="lg" h={"100%"}>
+      <Card>
+        <Title order={3}>Layout Controls</Title>
+        <Stack gap="md" mt="md">
+          <Group>
+            <Stack gap="xs" style={{ flex: 1 }}>
+              <Text fw={700}>Left Sidebar</Text>
+              <Switch
+                checked={state.layout.leftBar.open}
+                label="Open"
+                onChange={(e) => state.setLeftBar({ open: e.currentTarget.checked })}
+              />
+              <Switch
+                checked={state.layout.leftBar.pinned || false}
+                label="Pinned"
+                onChange={(e) => state.setLeftBar({ pinned: e.currentTarget.checked })}
+              />
+              <Switch
+                checked={state.layout.leftBar.collapsed || false}
+                label="Collapsed"
+                onChange={(e) => state.setLeftBar({ collapsed: e.currentTarget.checked })}
+              />
+              <TextInput
+                label="Size"
+                onChange={(e) =>
+                  state.setLeftBar({ size: parseInt(e.currentTarget.value) || 0 })
+                }
+                type="number"
+                value={state.layout.leftBar.size || 0}
+              />
+            </Stack>
+
+            <Stack gap="xs" style={{ flex: 1 }}>
+              <Text fw={700}>Right Sidebar</Text>
+              <Switch
+                checked={state.layout.rightBar.open}
+                label="Open"
+                onChange={(e) => state.setRightBar({ open: e.currentTarget.checked })}
+              />
+              <Switch
+                checked={state.layout.rightBar.pinned || false}
+                label="Pinned"
+                onChange={(e) => state.setRightBar({ pinned: e.currentTarget.checked })}
+              />
+            </Stack>
+          </Group>
+        </Stack>
+      </Card>
+      <StateDisplay />
+    </Stack>
+  );
+};
+
+// Theme Story
+const ThemeStory = () => {
+  const state = useGlobalStateStore();
+
+  useEffect(() => {
+    GlobalStateStore.getState().setOwner({
+      id: 1,
+      name: 'Acme Corp',
+      theme: { darkMode: false, name: 'corporate' },
+    });
+  }, []);
+
+  return (
+    <Stack gap="lg" h={"100%"}>
+      <Card>
+        <Title order={3}>Theme Settings</Title>
+        <Stack gap="md" mt="md">
+          <div>
+            <Text fw={700} mb="xs">Owner Theme (Organization Default)</Text>
+            <Group>
+              <TextInput
+                label="Theme Name"
+                onChange={(e) =>
+                  state.setOwner({
+                    theme: { ...state.owner.theme, name: e.currentTarget.value },
+                  })
+                }
+                value={state.owner.theme?.name || ''}
+              />
+              <Switch
+                checked={state.owner.theme?.darkMode || false}
+                label="Dark Mode"
+                onChange={(e) =>
+                  state.setOwner({
+                    theme: { ...state.owner.theme, darkMode: e.currentTarget.checked },
+                  })
+                }
+              />
+            </Group>
+          </div>
+
+          <div>
+            <Text fw={700} mb="xs">User Theme (Personal Override)</Text>
+            <Group>
+              <TextInput
+                label="Theme Name"
+                onChange={(e) =>
+                  state.setUser({
+                    theme: { ...state.user.theme, name: e.currentTarget.value },
+                  })
+                }
+                value={state.user.theme?.name || ''}
+              />
+              <Switch
+                checked={state.user.theme?.darkMode || false}
+                label="Dark Mode"
+                onChange={(e) =>
+                  state.setUser({
+                    theme: { ...state.user.theme, darkMode: e.currentTarget.checked },
+                  })
+                }
+              />
+            </Group>
+          </div>
+
+          <div>
+            <Text fw={700} mb="xs">Effective Theme</Text>
+            <Text>
+              Name: {state.user.theme?.name || state.owner.theme?.name || 'default'}
+            </Text>
+            <Text>
+              Dark Mode:{' '}
+              {(state.user.theme?.darkMode ?? state.owner.theme?.darkMode) ? 'Yes' : 'No'}
+            </Text>
+          </div>
+        </Stack>
+      </Card>
+      <StateDisplay />
+    </Stack>
+  );
+};
+
+const meta = {
+  component: BasicStory,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  title: 'State/GlobalStateStore',
+} satisfies Meta<typeof BasicStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: () => <BasicStory />,
+};
+
+export const WithProvider: Story = {
+  render: () => <ProviderStory />,
+};
+
+export const LayoutControls: Story = {
+  render: () => <LayoutStory />,
+};
+
+export const ThemeControls: Story = {
+  render: () => <ThemeStory />,
+};

src/GlobalStateStore/GlobalStateStore.ts

@@ -0,0 +1,278 @@
+import type { StoreApi } from 'zustand';
+
+import { shallow } from 'zustand/shallow';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+import { createStore } from 'zustand/vanilla';
+
+import type {
+  AppState,
+  BarState,
+  ExtractState,
+  GlobalState,
+  GlobalStateStoreType,
+  LayoutState,
+  NavigationState,
+  OwnerState,
+  ProgramState,
+  SessionState,
+  UserState,
+} from './GlobalStateStore.types';
+
+import { loadStorage, saveStorage } from './GlobalStateStore.utils';
+
+const initialState: GlobalState = {
+  app: {
+    controls: {},
+    environment: 'production',
+  },
+  layout: {
+    bottomBar: { open: false },
+    leftBar: { open: false },
+    rightBar: { open: false },
+    topBar: { open: false },
+  },
+  navigation: {
+    menu: [],
+  },
+  owner: {
+    id: 0,
+    name: '',
+  },
+  program: {
+    name: '',
+    slug: '',
+  },
+  session: {
+    apiURL: '',
+    authToken: '',
+    connected: true,
+    loading: false,
+  },
+  user: {
+    username: '',
+  },
+};
+
+type GetState = () => GlobalStateStoreType;
+type SetState = (
+  partial: ((state: GlobalState) => Partial<GlobalState>) | Partial<GlobalState>
+) => void;
+
+const createProgramSlice = (set: SetState) => ({
+  setProgram: (updates: Partial<ProgramState>) =>
+    set((state: GlobalState) => ({
+      program: { ...state.program, ...updates },
+    })),
+});
+
+const createSessionSlice = (set: SetState) => ({
+  setApiURL: (url: string) =>
+    set((state: GlobalState) => ({
+      session: { ...state.session, apiURL: url },
+    })),
+
+  setAuthToken: (token: string) =>
+    set((state: GlobalState) => ({
+      session: { ...state.session, authToken: token },
+    })),
+
+  setSession: (updates: Partial<SessionState>) =>
+    set((state: GlobalState) => ({
+      session: { ...state.session, ...updates },
+    })),
+});
+
+const createOwnerSlice = (set: SetState) => ({
+  setOwner: (updates: Partial<OwnerState>) =>
+    set((state: GlobalState) => ({
+      owner: { ...state.owner, ...updates },
+    })),
+});
+
+const createUserSlice = (set: SetState) => ({
+  setUser: (updates: Partial<UserState>) =>
+    set((state: GlobalState) => ({
+      user: { ...state.user, ...updates },
+    })),
+});
+
+const createLayoutSlice = (set: SetState) => ({
+  setBottomBar: (updates: Partial<BarState>) =>
+    set((state: GlobalState) => ({
+      layout: { ...state.layout, bottomBar: { ...state.layout.bottomBar, ...updates } },
+    })),
+
+  setLayout: (updates: Partial<LayoutState>) =>
+    set((state: GlobalState) => ({
+      layout: { ...state.layout, ...updates },
+    })),
+
+  setLeftBar: (updates: Partial<BarState>) =>
+    set((state: GlobalState) => ({
+      layout: { ...state.layout, leftBar: { ...state.layout.leftBar, ...updates } },
+    })),
+
+  setRightBar: (updates: Partial<BarState>) =>
+    set((state: GlobalState) => ({
+      layout: { ...state.layout, rightBar: { ...state.layout.rightBar, ...updates } },
+    })),
+
+  setTopBar: (updates: Partial<BarState>) =>
+    set((state: GlobalState) => ({
+      layout: { ...state.layout, topBar: { ...state.layout.topBar, ...updates } },
+    })),
+});
+
+const createNavigationSlice = (set: SetState) => ({
+  setCurrentPage: (page: NavigationState['currentPage']) =>
+    set((state: GlobalState) => ({
+      navigation: { ...state.navigation, currentPage: page },
+    })),
+
+  setMenu: (menu: NavigationState['menu']) =>
+    set((state: GlobalState) => ({
+      navigation: { ...state.navigation, menu },
+    })),
+
+  setNavigation: (updates: Partial<NavigationState>) =>
+    set((state: GlobalState) => ({
+      navigation: { ...state.navigation, ...updates },
+    })),
+});
+
+const createAppSlice = (set: SetState) => ({
+  setApp: (updates: Partial<AppState>) =>
+    set((state: GlobalState) => ({
+      app: { ...state.app, ...updates },
+    })),
+});
+
+const createComplexActions = (set: SetState, get: GetState) => ({
+  fetchData: async (url?: string) => {
+    try {
+      set((state: GlobalState) => ({
+        session: {
+          ...state.session,
+          apiURL: url ?? state.session.apiURL,
+          loading: true,
+        },
+      }));
+
+      const currentState = get();
+      const result = await currentState.onFetchSession?.(currentState);
+
+      set((state: GlobalState) => ({
+        ...state,
+        ...result,
+        app: {
+          ...state.app,
+          ...result?.app,
+          updatedAt: new Date().toISOString(),
+        },
+        session: {
+          ...state.session,
+          ...result?.session,
+          connected: true,
+          loading: false,
+        },
+      }));
+    } catch (e) {
+      set((state: GlobalState) => ({
+        session: {
+          ...state.session,
+          connected: false,
+          error: `Load Exception: ${String(e)}`,
+          loading: false,
+        },
+      }));
+    }
+  },
+
+  login: async (authToken?: string) => {
+    set((state: GlobalState) => ({
+      session: {
+        ...state.session,
+        authToken: authToken ?? '',
+      },
+    }));
+    await get().fetchData();
+  },
+
+  logout: async () => {
+    set((state: GlobalState) => ({
+      ...initialState,
+      session: {
+        ...initialState.session,
+        apiURL: state.session.apiURL,
+      },
+    }));
+    await get().fetchData();
+  },
+});
+
+const GlobalStateStore = createStore<GlobalStateStoreType>((set, get) => ({
+  ...initialState,
+  ...createProgramSlice(set),
+  ...createSessionSlice(set),
+  ...createOwnerSlice(set),
+  ...createUserSlice(set),
+  ...createLayoutSlice(set),
+  ...createNavigationSlice(set),
+  ...createAppSlice(set),
+  ...createComplexActions(set, get),
+}));
+
+loadStorage()
+  .then((state) => {
+    GlobalStateStore.setState((current) => ({
+      ...current,
+      ...state,
+      session: {
+        ...current.session,
+        ...state.session,
+        connected: true,
+        loading: false,
+      },
+    }));
+  })
+  .catch((e) => {
+    console.error('Error loading storage:', e);
+  });
+
+GlobalStateStore.subscribe((state) => {
+  saveStorage(state).catch((e) => {
+    console.error('Error saving storage:', e);
+  });
+});
+
+const createTypeBoundedUseStore = ((store) => (selector) =>
+  useStoreWithEqualityFn(store, selector, shallow)) as <S extends StoreApi<unknown>>(
+  store: S
+) => {
+  (): ExtractState<S>;
+  <T>(selector: (state: ExtractState<S>) => T): T;
+};
+
+const useGlobalStateStore = createTypeBoundedUseStore(GlobalStateStore);
+
+const setApiURL = (url: string) => {
+  GlobalStateStore.getState().setApiURL(url);
+};
+
+const getApiURL = (): string => {
+  return GlobalStateStore.getState().session.apiURL;
+};
+
+const getAuthToken = (): string => {
+  return GlobalStateStore.getState().session.authToken;
+};
+
+const setAuthToken = (token: string) => {
+  GlobalStateStore.getState().setAuthToken(token);
+};
+
+const GetGlobalState = (): GlobalStateStoreType => {
+  return GlobalStateStore.getState();
+}
+
+export { getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, setApiURL, setAuthToken, useGlobalStateStore };

src/GlobalStateStore/GlobalStateStore.types.ts

@@ -0,0 +1,188 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface AppState {
+  controls?: Record<string, any>;
+  environment: 'development' | 'production';
+  globals?: Record<string, any>;
+  updatedAt?: string;
+}
+
+interface BarState {
+  collapsed?: boolean;
+  menuItems?: MenuItem[];
+  meta?: Record<string, any>;
+  open: boolean;
+  pinned?: boolean;
+  render?: () => React.ReactNode;
+  size?: number;
+
+}
+
+type DatabaseDetail = {
+  name?: string;
+  version?: string;
+};
+
+type ExtractState<S> = S extends { getState: () => infer X } ? X : never;
+
+interface GlobalState {
+  app: AppState;
+  layout: LayoutState;
+  navigation: NavigationState;
+  owner: OwnerState;
+  program: ProgramState;
+  session: SessionState;
+  user: UserState;
+}
+
+interface GlobalStateActions {
+  // Complex actions
+  fetchData: (url?: string) => Promise<void>;
+
+  login: (authToken?: string) => Promise<void>;
+  logout: () => Promise<void>;
+  // Callback for custom fetch logic
+  onFetchSession?: (state: GlobalState) => Promise<Partial<GlobalState>>;
+  setApiURL: (url: string) => void;
+
+  // App actions
+  setApp: (updates: Partial<AppState>) => void;
+
+  setAuthToken: (token: string) => void;
+  setBottomBar: (updates: Partial<BarState>) => void;
+  setCurrentPage: (page: PageInfo) => void;
+
+  // Layout actions
+  setLayout: (updates: Partial<LayoutState>) => void;
+  setLeftBar: (updates: Partial<BarState>) => void;
+
+  setMenu: (menu: MenuItem[]) => void;
+
+  // Navigation actions
+  setNavigation: (updates: Partial<NavigationState>) => void;
+
+  // Owner actions
+  setOwner: (updates: Partial<OwnerState>) => void;
+
+  // Program actions
+  setProgram: (updates: Partial<ProgramState>) => void;
+
+  setRightBar: (updates: Partial<BarState>) => void;
+
+  // Session actions
+  setSession: (updates: Partial<SessionState>) => void;
+
+  setTopBar: (updates: Partial<BarState>) => void;
+
+  // User actions
+  setUser: (updates: Partial<UserState>) => void;
+}
+
+interface GlobalStateStoreType extends GlobalState, GlobalStateActions {}
+
+interface LayoutState {
+  bottomBar: BarState;
+  leftBar: BarState;
+  rightBar: BarState;
+  topBar: BarState;
+}
+
+type MenuItem = {
+  [key: string]: any;
+  children?: MenuItem[];
+  icon?: string;
+  id?: number | string;
+  label: string;
+  path?: string;
+};
+
+interface NavigationState {
+  currentPage?: PageInfo;
+  menu: MenuItem[];
+}
+
+interface OwnerState {
+  id: number;
+  logo?: string;
+  name: string;
+  settings?: Record<string, any>;
+  theme?: ThemeSettings;
+}
+
+type PageInfo = {
+  breadcrumbs?: string[];
+  meta?: Record<string, any>;
+  path?: string;
+  title?: string;
+};
+
+interface ProgramState {
+  backendVersion?: string;
+  bigLogo?: string;
+  database?: DatabaseDetail;
+  databaseVersion?: string;
+  description?: string;
+  logo?: string;
+  meta?: Record<string, any>;
+  name: string;
+  slug: string;
+  tags?: string[];
+  version?: string;
+}
+
+interface ProgramWrapperProps {
+  apiURL?: string;
+  children: React.ReactNode | React.ReactNode[];
+  debugMode?: boolean;
+  fallback?: React.ReactNode | React.ReactNode[];
+  renderFallback?: boolean;
+  testMode?: boolean;
+  version?: string;
+}
+
+interface SessionState {
+  apiURL: string;
+  authToken: string;
+  connected: boolean;
+  error?: string;
+  isSecurity?: boolean;
+  loading: boolean;
+  meta?: Record<string, any>;
+  parameters?: Record<string, any>;
+}
+
+interface ThemeSettings {
+  darkMode?: boolean;
+  name?: string;
+}
+
+interface UserState {
+  avatarUrl?: string;
+  email?: string;
+  fullNames?: string;
+  guid?: string;
+  isAdmin?: boolean;
+  noticeMsg?: string;
+  parameters?: Record<string, any>;
+  rid?: number;
+  theme?: ThemeSettings;
+  username: string;
+}
+
+export type {
+  AppState,
+  BarState,
+  ExtractState,
+  GlobalState,
+  GlobalStateActions,
+  GlobalStateStoreType,
+  LayoutState,
+  MenuItem,
+  NavigationState,
+  OwnerState,
+  PageInfo,
+  ProgramState,
+  ProgramWrapperProps,
+  SessionState,
+  ThemeSettings,
+  UserState,
+};

src/GlobalStateStore/GlobalStateStore.utils.ts

@@ -0,0 +1,93 @@
+import { get, set } from 'idb-keyval';
+
+import type { GlobalState } from './GlobalStateStore.types';
+
+const STORAGE_KEY = 'app-data';
+
+const SKIP_PATHS = new Set([
+  'app.controls',
+  'session.connected',
+  'session.error',
+  'session.loading',
+]);
+
+const shouldSkipPath = (path: string): boolean => {
+  return SKIP_PATHS.has(path);
+};
+
+const filterState = (state: unknown, prefix = ''): unknown => {
+  if (typeof state === 'function') {
+    return undefined;
+  }
+
+  if (state === null || typeof state !== 'object') {
+    return state;
+  }
+
+  if (Array.isArray(state)) {
+    return state.map((item, idx) => filterState(item, `${prefix}[${idx}]`));
+  }
+
+  const filtered: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(state)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+
+    if (shouldSkipPath(path) || typeof value === 'function') {
+      continue;
+    }
+
+    filtered[key] = filterState(value, path);
+  }
+
+  return filtered;
+};
+
+async function loadStorage(): Promise<Partial<GlobalState>> {
+  try {
+    if (typeof indexedDB !== 'undefined') {
+      const data = await get(STORAGE_KEY);
+      if (data) {
+        return JSON.parse(data) as Partial<GlobalState>;
+      }
+    }
+  } catch (e) {
+    console.error('Failed to load from IndexedDB, falling back to localStorage:', e);
+  }
+
+  try {
+    if (typeof localStorage !== 'undefined') {
+      const data = localStorage.getItem(STORAGE_KEY);
+      if (data) {
+        return JSON.parse(data) as Partial<GlobalState>;
+      }
+    }
+  } catch (e) {
+    console.error('Failed to load from localStorage:', e);
+  }
+
+  return {};
+}
+
+async function saveStorage(state: GlobalState): Promise<void> {
+  const filtered = filterState(state);
+  const serialized = JSON.stringify(filtered);
+
+  try {
+    if (typeof indexedDB !== 'undefined') {
+      await set(STORAGE_KEY, serialized);
+      return;
+    }
+  } catch (e) {
+    console.error('Failed to save to IndexedDB, falling back to localStorage:', e);
+  }
+
+  try {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(STORAGE_KEY, serialized);
+    }
+  } catch (e) {
+    console.error('Failed to save to localStorage:', e);
+  }
+}
+
+export { loadStorage, saveStorage };

src/GlobalStateStore/GlobalStateStoreWrapper.tsx

@@ -0,0 +1,107 @@
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+
+import type { GlobalStateStoreType } from './GlobalStateStore.types';
+
+import { GetGlobalState, GlobalStateStore } from './GlobalStateStore';
+
+
+interface GlobalStateStoreContextValue {
+  fetchData: (url?: string) => Promise<void>;
+  getState: () => GlobalStateStoreType;
+  refetch: () => Promise<void>;
+}
+
+const GlobalStateStoreContext = createContext<GlobalStateStoreContextValue | null>(null);
+
+
+interface GlobalStateStoreProviderProps {
+  apiURL?: string;
+  autoFetch?: boolean;
+  children: ReactNode;
+  fetchOnMount?: boolean;
+  throttleMs?: number;
+}
+
+export function GlobalStateStoreProvider({
+  apiURL,
+  autoFetch = true,
+  children,
+  fetchOnMount = true,
+  throttleMs = 0,
+}: GlobalStateStoreProviderProps) {
+  const lastFetchTime = useRef<number>(0);
+  const fetchInProgress = useRef<boolean>(false);
+  const mounted = useRef<boolean>(false);
+
+
+  const throttledFetch = useCallback(
+    async (url?: string) => {
+      const now = Date.now();
+      const timeSinceLastFetch = now - lastFetchTime.current;
+
+      if (fetchInProgress.current) {
+        return;
+      }
+
+      if (throttleMs > 0 && timeSinceLastFetch < throttleMs) {
+        return;
+      }
+
+      try {
+        fetchInProgress.current = true;
+        lastFetchTime.current = now;
+        await GlobalStateStore.getState().fetchData(url);
+      } finally {
+        fetchInProgress.current = false;
+      }
+    },
+    [throttleMs]
+  );
+
+  const refetch = useCallback(async () => {
+    await throttledFetch();
+  }, [throttledFetch]);
+
+  useEffect(() => {
+    if (apiURL) {
+      GlobalStateStore.getState().setApiURL(apiURL);
+    }
+  }, [apiURL]);
+
+  useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+
+      if (autoFetch && fetchOnMount) {
+        throttledFetch(apiURL).catch((e) => {
+          console.error('Failed to fetch on mount:', e);
+        });
+      }
+    }
+  }, [apiURL, autoFetch, fetchOnMount, throttledFetch]);
+
+  const context = useMemo(() => {
+    return {
+      fetchData: throttledFetch,
+      getState: GetGlobalState,
+      refetch,
+    };
+  }, [throttledFetch, refetch]);
+
+  
+
+  return (
+    <GlobalStateStoreContext.Provider value={context}>
+      {children}
+    </GlobalStateStoreContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useGlobalStateStoreContext(): GlobalStateStoreContextValue {
+  const context = useContext(GlobalStateStoreContext);
+  if (!context) {
+    throw new Error('useGlobalStateStoreContext must be used within GlobalStateStoreProvider');
+  }
+  return context;
+}

src/GlobalStateStore/README.md

@@ -0,0 +1,105 @@
+# GlobalStateStore
+
+Zustand-based global state management with automatic persistence.
+
+## Quick Start
+
+```tsx
+import {
+  GlobalStateStoreProvider,
+  useGlobalStateStore,
+  useGlobalStateStoreContext
+} from './GlobalStateStore';
+
+// Wrap app with provider
+function App() {
+  return (
+    <GlobalStateStoreProvider
+      apiURL="https://api.example.com"
+      fetchOnMount={true}
+      throttleMs={5000}
+    >
+      <MyComponent />
+    </GlobalStateStoreProvider>
+  );
+}
+
+// Use in components
+function MyComponent() {
+  const { program, session, user } = useGlobalStateStore();
+  const { refetch } = useGlobalStateStoreContext();
+
+  return (
+    <div>
+      {program.name}
+      <button onClick={refetch}>Refresh</button>
+    </div>
+  );
+}
+
+// Outside React
+const apiURL = GlobalStateStore.getState().session.apiURL;
+GlobalStateStore.getState().setAuthToken('token');
+```
+
+## Provider Props
+
+- **apiURL** - Initial API URL (optional)
+- **autoFetch** - Enable automatic fetching (default: `true`)
+- **fetchOnMount** - Fetch data when provider mounts (default: `true`)
+- **throttleMs** - Minimum time between fetch calls in milliseconds (default: `0`)
+
+## Context Hook
+
+`useGlobalStateStoreContext()` returns:
+- **fetchData(url?)** - Throttled fetch function
+- **refetch()** - Refetch with current URL
+
+## State Slices
+
+- **program** - name, logo, description, tags, version
+- **session** - apiURL, authToken, connected, loading, error, parameters, meta
+- **owner** - id, name, logo, settings, theme (darkMode, name)
+- **user** - username, email, fullNames, isAdmin, avatarUrl, parameters, theme (darkMode, name)
+- **layout** - leftBar, rightBar, topBar, bottomBar (each: open, collapsed, pinned, size, menuItems)
+- **navigation** - menu, currentPage
+- **app** - environment, updatedAt, controls, globals
+
+## Actions
+
+**Program:** `setProgram(updates)`
+**Session:** `setSession(updates)`, `setAuthToken(token)`, `setApiURL(url)`
+**Owner:** `setOwner(updates)`
+**User:** `setUser(updates)`
+**Layout:** `setLayout(updates)`, `setLeftBar(updates)`, `setRightBar(updates)`, `setTopBar(updates)`, `setBottomBar(updates)`
+**Navigation:** `setNavigation(updates)`, `setMenu(items)`, `setCurrentPage(page)`
+**App:** `setApp(updates)`
+**Complex:** `fetchData(url?)`, `login(token?)`, `logout()`
+
+## Custom Fetch
+
+```ts
+GlobalStateStore.getState().onFetchSession = async (state) => {
+  const response = await fetch(`${state.session.apiURL}/session`, {
+    headers: { Authorization: `Bearer ${state.session.authToken}` }
+  });
+  const data = await response.json();
+
+  return {
+    program: { name: data.appName, ... },
+    user: { id: data.userId, name: data.userName, ... },
+    navigation: { menu: data.menu },
+  };
+};
+```
+
+## Persistence
+
+Auto-saves to IndexedDB (localStorage fallback).
+Auto-loads on initialization.
+Skips transient data: loading states, errors, controls.
+
+## TypeScript
+
+Fully typed with exported types:
+`GlobalState`, `ProgramState`, `SessionState`, `OwnerState`, `UserState`, `ThemeSettings`, `LayoutState`, `BarState`, `NavigationState`, `AppState`

src/GlobalStateStore/index.ts

@@ -0,0 +1,16 @@
+export {
+  getApiURL,
+  getAuthToken,
+  GetGlobalState,
+  GlobalStateStore,
+  setApiURL,
+  setAuthToken,
+  useGlobalStateStore
+} from './GlobalStateStore';
+
+export type * from './GlobalStateStore.types';
+
+export {
+  GlobalStateStoreProvider,
+  useGlobalStateStoreContext,
+} from './GlobalStateStoreWrapper';

src/Gridler/Gridler.module.css

@@ -3,11 +3,7 @@
     1px 0 0 #00000030,
     0 1px 0 #00000030,
     -1px 0 0 #00000030;
-  display: flex;
-  min-height: 40px;
-  min-width: 40px;
-  height: 100%;
-  width: 100%;
+
   
   &[data-focused='true'] {
     box-shadow:

src/Gridler/Gridler.tsx

@@ -1,12 +1,14 @@
 import '@glideapps/glide-data-grid/dist/index.css';
+import React, { type Ref } from 'react';
 
 import { MantineBetterMenusProvider } from '../MantineBetterMenu';
 import { GlidlerFormAdaptor } from './components/adaptors/GlidlerFormAdaptor';
 import { GlidlerLocalDataAdaptor } from './components/adaptors/GlidlerLocalDataAdaptor';
-import { type GridlerProps, Provider } from './components/GridlerStore';
+import { type GridlerProps, type GridlerRef, Provider } from './components/GridlerStore';
+import { GridlerRefHandler } from './components/RefHandler';
 import { GridlerDataGrid } from './GridlerDataGrid';
 
-const Gridler = (props: GridlerProps) => {
+const _Gridler = (props: GridlerProps, ref: Ref<GridlerRef> | undefined) => {
   return (
     <MantineBetterMenusProvider>
       <Provider
@@ -19,12 +21,20 @@ const Gridler = (props: GridlerProps) => {
         }}
       >
         <GridlerDataGrid />
+        <GridlerRefHandler ref={ref} />
         {props.children}
       </Provider>
     </MantineBetterMenusProvider>
   );
 };
 
+type GridlerComponentType = {
+  FormAdaptor: typeof GlidlerFormAdaptor;
+  LocalDataAdaptor: typeof GlidlerLocalDataAdaptor;
+} & React.ForwardRefExoticComponent<GridlerProps & React.RefAttributes<GridlerRef>>;
+
+const Gridler = React.forwardRef(_Gridler) as GridlerComponentType;
+
 Gridler.FormAdaptor = GlidlerFormAdaptor;
 Gridler.LocalDataAdaptor = GlidlerLocalDataAdaptor;
 

src/Gridler/GridlerDataGrid.tsx

@@ -13,7 +13,7 @@ import { BottomBar } from './components/BottomBar';
 import { Computer } from './components/Computer';
 import { useGridlerStore } from './components/GridlerStore';
 import { Pager } from './components/Pager';
-import { RightMenuIcon } from './components/RightMenuIcon';
+import { GridlerRightMenuIcon } from './components/RightMenuIcon';
 import { SortSprite } from './components/sprites/Sort';
 import { SortDownSprite } from './components/sprites/SortDown';
 import { SortUpSprite } from './components/sprites/SortUp';
@@ -24,10 +24,23 @@ export const GridlerDataGrid = () => {
   const ref = React.useRef<DataEditorRef | null>(null);
   const refContextActivated = React.useRef<boolean>(false);
 
-  const { height, ref: refWrapper, width } = useElementSize();
+  const { height, ref: refWrapper, width } = useElementSize({ box: 'content-box' });
+  /*
+    const [_dimensions, setDimensions] = useState<{ height: number; width: number } | null>(null);
+  const { height, width } = _dimensions ?? { height: 0, width: 0 };
+
+  useLayoutEffect(() => {
+    // Measure container before rendering grid
+    if (refWrapper.current) {
+      const { height, width } = refWrapper.current.getBoundingClientRect();
+      setDimensions({ height, width });
+    }
+  }, []);
+   */
 
   const {
     _gridSelection,
+    allowMultiSelect,
     focused,
     getCellContent,
     getCellsForSelection,
@@ -37,6 +50,8 @@ export const GridlerDataGrid = () => {
     headerHeight,
     heightProp,
     mounted,
+    onCellActivated,
+    onCellClicked,
     onCellEdited,
     onColumnMoved,
     onColumnProposeMove,
@@ -56,6 +71,7 @@ export const GridlerDataGrid = () => {
     widthProp,
   } = useGridlerStore((s) => ({
     _gridSelection: s._gridSelection,
+    allowMultiSelect: s.allowMultiSelect,
     focused: s.focused,
     getCellContent: s.getCellContent,
     getCellsForSelection: s.getCellsForSelection,
@@ -65,6 +81,8 @@ export const GridlerDataGrid = () => {
     headerHeight: s.headerHeight,
     heightProp: s.height,
     mounted: s.mounted,
+    onCellActivated: s.onCellActivated,
+    onCellClicked: s.onCellClicked,
     onCellEdited: s.onCellEdited,
     onColumnMoved: s.onColumnMoved,
     onColumnProposeMove: s.onColumnProposeMove,
@@ -72,6 +90,7 @@ export const GridlerDataGrid = () => {
     onContextClick: s.onContextClick,
     onHeaderClicked: s.onHeaderClicked,
     onHeaderMenuClick: s.onHeaderMenuClick,
+
     onItemHovered: s.onItemHovered,
     onVisibleRegionChanged: s.onVisibleRegionChanged,
     renderColumns: s.renderColumns,
@@ -121,17 +140,17 @@ export const GridlerDataGrid = () => {
             }, 100);
           }
         }}
-      >
-        {sections?.left}
-        <div
         ref={refWrapper}
         style={{
-            flexGrow: 2,
+          display: 'flex',
           height: '100%',
-            minHeight: '80px',
+          minHeight: '64px',
+          minWidth: '32px',
           width: '100%',
         }}
       >
+        {sections?.left}
+
         {width && width > 0 && height && height > 0 && (
           <DataEditor
             cellActivationBehavior="double-click"
@@ -139,15 +158,33 @@ export const GridlerDataGrid = () => {
             columns={(renderColumns as Array<GridColumn>) ?? []}
             columnSelect="none"
             drawFocusRing
+            height={height ?? 400}
+            overscrollX={16}
+            overscrollY={32}
+            rangeSelect={allowMultiSelect ? 'multi-rect' : 'cell'}
+            rightElementProps={{
+              fill: false,
+              sticky: true,
+            }}
+            rowMarkers={{
+              checkboxStyle: 'square',
+              kind: allowMultiSelect ? 'both' : 'clickable-number',
+            }}
+            rowSelect={allowMultiSelect ? 'multi' : 'single'}
+            rowSelectionMode="auto"
+            spanRangeBehavior="default"
+            {...glideProps}
             getCellContent={getCellContent}
             getCellsForSelection={getCellsForSelection}
             getRowThemeOverride={theme.getRowThemeOverride}
             gridSelection={_gridSelection}
             headerHeight={headerHeight ?? 32}
             headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
-              height={(height ?? 400) - 4}
+            onCellActivated={onCellActivated}
+            onCellClicked={onCellClicked}
             onCellContextMenu={(cell, event) => {
               event.preventDefault();
+              glideProps?.onCellContextMenu?.(cell, event);
               if (!refContextActivated.current) {
                 refContextActivated.current = true;
                 onContextClick('cell', event, cell[0], cell[1]);
@@ -163,7 +200,13 @@ export const GridlerDataGrid = () => {
             onGridSelectionChange={(selection) => {
               let rows = CompactSelection.empty();
               const currentSelection = getState('_gridSelection');
+              const keyField = getState('keyField') ?? 'id';
+              const getRowBuffer = getState('getRowBuffer');
               for (const r of selection.rows) {
+                const validRowID = getRowBuffer ? getRowBuffer(r)?.[keyField] : null;
+                if (!validRowID) {
+                  continue;
+                }
                 rows = rows.hasIndex(r) ? rows : rows.add(r);
               }
               if (selectMode === 'row' && selection.current?.range) {
@@ -172,19 +215,32 @@ export const GridlerDataGrid = () => {
                   y < selection.current.range.y + selection.current.range.height;
                   y++
                 ) {
+                  const validRowID = getRowBuffer ? getRowBuffer(y)?.[keyField] : null;
+                  if (!validRowID) {
+                    continue;
+                  }
                   rows = rows.hasIndex(y) ? rows : rows.add(y);
                 }
               }
-
+              if (rows.length === 0) {
+                for (const r of currentSelection?.rows ?? []) {
+                  const validRowID = getRowBuffer ? getRowBuffer(r)?.[keyField] : null;
+                  if (!validRowID) {
+                    continue;
+                  }
+                  rows = rows.hasIndex(r) ? rows : rows.add(r);
+                }
+              }
+              console.log('Debug:onGridSelectionChange', currentSelection, selection);
               if (
                 JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
                 JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
                 JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
               ) {
                 setState('_gridSelection', { ...selection, rows });
-                  if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
+                //if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
                 setState('_gridSelectionRows', rows);
-                  }
+                //}
               }
 
               //console.log('Selection', selection);
@@ -203,39 +259,35 @@ export const GridlerDataGrid = () => {
             onHeaderMenuClick={onHeaderMenuClick}
             onItemHovered={onItemHovered}
             onVisibleRegionChanged={onVisibleRegionChanged}
-              rangeSelect="multi-rect"
             ref={refMerged as React.Ref<DataEditorRef>}
             rightElement={
+              sections?.rightElementDisabled ? undefined : (
                 <Group>
                   {sections?.rightElementStart}
-                  <RightMenuIcon />
+                  <GridlerRightMenuIcon />
                   {sections?.rightElementEnd}
                 </Group>
+              )
             }
             rowHeight={rowHeight ?? 22}
             //rowMarkersCheckboxStyle='square'
             //rowMarkersKind='both'
-              rowMarkers={{
-                checkboxStyle: 'square',
-                kind: 'both',
-              }}
+
             rows={total_rows ?? 0}
-              rowSelect="multi"
-              rowSelectionMode="auto"
-              spanRangeBehavior="default"
             theme={theme.gridTheme}
             width={width ?? 200}
-              {...glideProps}
           />
         )}
-        </div>
+
         {/* </Portal> */}
         <Computer />
         {!hasLocalData && <Pager />}
         {sections?.right}
       </div>
+      <div style={{ flexGrow: 0 }}>
         <BottomBar />
         {sections?.bottom}
+      </div>
       {/* <Portal> */}
     </Stack>
   );

src/Gridler/components/BottomBar.tsx

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

src/Gridler/components/Column.tsx

@@ -18,11 +18,12 @@ export interface GridlerColumn extends Partial<BaseGridColumn> {
     colIndx: string,
     value: any,
     storeState: GridlerStoreState
-  ) => GridCellLoose;
+  ) => Partial<GridCellLoose>;
   defaultIcon?: string;
   disableFilter?: boolean;
   disableMove?: boolean;
   disableResize?: boolean;
+  disableSearch?: boolean;
   disableSort?: boolean;
   getMenuItems?: (
     id: string,
@@ -35,6 +36,7 @@ export interface GridlerColumn extends Partial<BaseGridColumn> {
   maxWidth?: number;
   minWidth?: number;
   tooltip?: ((buffer: any, row: number, col: number) => ReactNode) | string;
+  virtual?: boolean;
   width?: number;
 }
 

src/Gridler/components/Computer.tsx

@@ -1,4 +1,5 @@
 import { CompactSelection } from '@glideapps/glide-data-grid';
+import { useDebouncedCallback } from '@mantine/hooks';
 import React, { useEffect, useRef } from 'react';
 
 import { useGridlerStore } from './GridlerStore';
@@ -6,42 +7,69 @@ import { useGridlerStore } from './GridlerStore';
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
 export const Computer = React.memo(() => {
   const refFirstRun = useRef(0);
+  const refLastSearch = useRef('');
   const refLastFilters = useRef<unknown>(null);
   const {
     _glideref,
     _gridSelectionRows,
-    askAPIRowNumber,
     colFilters,
     colOrder,
     colSize,
     colSort,
     columns,
+    getRowIndexByKey,
     getState,
     loadPage,
     ready,
 
+    scrollToRowKey,
+    searchStr,
+    selectedRowKey,
+    selectFirstRowOnMount,
     setState,
     setStateFN,
-    values,
+    values
   } = useGridlerStore((s) => ({
     _glideref: s._glideref,
     _gridSelectionRows: s._gridSelectionRows,
-    askAPIRowNumber: s.askAPIRowNumber,
     colFilters: s.colFilters,
     colOrder: s.colOrder,
     colSize: s.colSize,
     colSort: s.colSort,
     columns: s.columns,
+    getRowIndexByKey: s.getRowIndexByKey,
     getState: s.getState,
     loadPage: s.loadPage,
     ready: s.ready,
 
+    scrollToRowKey: s.scrollToRowKey,
+    searchStr: s.searchStr,
+    selectedRowKey: s.selectedRowKey,
+    selectFirstRowOnMount:s.selectFirstRowOnMount,
     setState: s.setState,
     setStateFN: s.setStateFN,
     uniqueid: s.uniqueid,
     values: s.values,
   }));
 
+  const debouncedDoSearch = useDebouncedCallback(
+    (searchStr: string) => {
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onSearched', {
+            detail: { search: searchStr },
+          })
+        );
+      });
+    },
+    {
+      delay: 300,
+      leading: false,
+    }
+  );
+
+  //When values change, update selection
   useEffect(() => {
     const searchSelection = async () => {
       const page_data = getState('_page_data');
@@ -72,8 +100,8 @@ export const Computer = React.memo(() => {
             break;
           }
         }
-        if (!(rowIndex >= 0) && typeof askAPIRowNumber === 'function') {
-          const idx = await askAPIRowNumber(key);
+        if (!(rowIndex >= 0)) {
+          const idx = await getRowIndexByKey(key);
           if (idx) {
             rowIndexes.push(idx);
           }
@@ -103,40 +131,12 @@ export const Computer = React.memo(() => {
     }
   }, [values]);
 
+  //Fire onChange when selection changes
   useEffect(() => {
     const onChange = getState('onChange');
     if (onChange && typeof onChange === 'function') {
-      const page_data = getState('_page_data');
-      const pageSize = getState('pageSize');
-
-      const buffers = [];
-      if (_gridSelectionRows) {
-        for (const range of _gridSelectionRows) {
-          let buffer = undefined;
-
-          for (const p in page_data) {
-            for (const r in page_data[p]) {
-              const idx = Number(p) * pageSize + Number(r);
-              if (isNaN(idx)) {
-                continue;
-              }
-
-              if (Number(page_data[p][r]?._rownumber) === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
-                break;
-              } else if (idx === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
-                break;
-              }
-            }
-          }
-          if (buffer !== undefined) {
-            buffers.push(buffer);
-          }
-        }
-      }
+      const getGridSelectedRows = getState('getGridSelectedRows');
+      const buffers = getGridSelectedRows();
 
       const _values = getState('values');
 
@@ -144,7 +144,7 @@ export const Computer = React.memo(() => {
         onChange(buffers);
       }
     }
-  }, [JSON.stringify(_gridSelectionRows), getState]);
+  }, [_gridSelectionRows, _gridSelectionRows?.length, getState]);
 
   useEffect(() => {
     setState(
@@ -157,6 +157,17 @@ export const Computer = React.memo(() => {
     );
   }, [columns]);
 
+  useEffect(() => {
+    if (searchStr === undefined || searchStr === null) {
+      refLastSearch.current = '';
+      return;
+    }
+    if (refLastSearch.current !== searchStr) {
+      debouncedDoSearch(searchStr);
+      refLastSearch.current = searchStr;
+    }
+  }, [searchStr]);
+
   useEffect(() => {
     if (!colSort) {
       return;
@@ -180,7 +191,14 @@ export const Computer = React.memo(() => {
             : (c.defaultIcon ?? 'sort'),
       }));
     }).then(() => {
-      loadPage(0, 'all');
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onColumnSorted', {
+            detail: { cols: colSort },
+          })
+        );
+      });
     });
   }, [colSort]);
 
@@ -190,7 +208,14 @@ export const Computer = React.memo(() => {
     }
 
     if (JSON.stringify(refLastFilters.current) !== JSON.stringify(colFilters)) {
-      loadPage(0, 'all');
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onColumnFiltered', {
+            detail: { filters: colFilters },
+          })
+        );
+      });
       refLastFilters.current = colFilters;
     }
   }, [colFilters]);
@@ -204,6 +229,8 @@ export const Computer = React.memo(() => {
         ...c,
         width: c.id && colSize?.[c.id] ? colSize?.[c.id] : c.width,
       }));
+    }).then(() => {
+      getState('refreshCells')?.();
     });
   }, [colSize]);
 
@@ -221,9 +248,12 @@ export const Computer = React.memo(() => {
       });
 
       return result;
+    }).then(() => {
+      getState('refreshCells')?.();
     });
   }, [colOrder]);
 
+  //Initial Load
   useEffect(() => {
     if (!_glideref) {
       return;
@@ -232,9 +262,123 @@ export const Computer = React.memo(() => {
       return;
     }
     refFirstRun.current = 1;
-    loadPage(0);
+    loadPage(0).then(() => {
+      getState('refreshCells')?.();
+    });
   }, [ready, loadPage]);
 
+  //Logic to select first row on mount
+  useEffect(() => {
+    const _events = getState('_events');
+
+    const loadPage = () => {
+      const selectFirstRowOnMount = getState('selectFirstRowOnMount');
+      const ready = getState('ready');
+
+      if (ready && selectFirstRowOnMount) {
+
+        const scrollToRowKey = getState('scrollToRowKey');
+        
+      
+        if (scrollToRowKey && scrollToRowKey >= 0) {
+          return;
+        }
+        
+        const keyField = getState('keyField') ?? 'id';
+        const page_data = getState('_page_data');
+
+        const firstBuffer = page_data?.[0]?.[0];
+        const firstRow = firstBuffer?.[keyField] ?? -1;
+        const currentValues = getState('values') ?? [];
+
+        if (
+          !(values && values.length > 0) &&
+          firstRow &&
+          firstRow > 0 &&
+          (currentValues.length ?? 0) === 0
+        ) {
+          const values = [firstBuffer, ...(currentValues as Array<Record<string, unknown>>)];
+
+
+          const onChange = getState('onChange');
+          //console.log('Selecting first row:', firstRow, firstBuffer, values);
+          if (onChange) {
+            onChange(values);
+          } else {
+            setState('values', values);
+          }
+
+          setState('scrollToRowKey', firstRow);
+        }
+      }
+    };
+
+    _events?.addEventListener('loadPage', loadPage);
+
+    return () => {
+      _events?.removeEventListener('loadPage', loadPage);
+    };
+  }, [ready, selectFirstRowOnMount]);
+
+  /// logic to apply the selected row.
+  // useEffect(() => {
+  //   const ready = getState('ready');
+  //   const ref = getState('_glideref');
+  //   const getRowIndexByKey = getState('getRowIndexByKey');
+
+  //   if (scrollToRowKey && ref && ready) {
+  //     getRowIndexByKey?.(scrollToRowKey).then((r) => {
+  //       if (r !== undefined) {
+  //         //console.log('Scrolling to selected row:', scrollToRowKey, r);
+  //         ref.scrollTo(0, r);
+  //         getState('_events').dispatchEvent(
+  //           new CustomEvent('scrollToRowKeyFound', {
+  //             detail: { rowNumber: r, scrollToRowKey: scrollToRowKey },
+  //           })
+  //         );
+  //       }
+  //     });
+  //   }
+  // }, [scrollToRowKey]);
+
+  useEffect(() => {
+    const ready = getState('ready');
+    const ref = getState('_glideref');
+    const getRowIndexByKey = getState('getRowIndexByKey');
+    const key = selectedRowKey ?? scrollToRowKey;
+
+    if (key && ref && ready) {
+      getRowIndexByKey?.(key).then((r) => {
+        if (r !== undefined) {
+          //console.log('Scrolling to selected row:', r, selectedRowKey, scrollToRowKey);
+
+          if (selectedRowKey) {
+            const onChange = getState('onChange');
+            const selected = [{ [getState('keyField') ?? 'id']: selectedRowKey }];
+            if (JSON.stringify(getState('values')) !== JSON.stringify(selected)) {
+              if (onChange) {
+                onChange(selected);
+              } else {
+                setState('values', selected);
+              }
+            }
+          }
+
+          ref.scrollTo(0, r);
+          getState('_events').dispatchEvent(
+            new CustomEvent('scrollToRowKeyFound', {
+              detail: {
+                rowNumber: r,
+                scrollToRowKey: scrollToRowKey,
+                selectedRowKey: selectedRowKey,
+              },
+            })
+          );
+        }
+      });
+    }
+  }, [scrollToRowKey, selectedRowKey]);
+
   // console.log('Gridler:Debug:Computer', {
   //   colFilters,
   //   colOrder,

src/Gridler/components/GridlerStore.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable react/react-in-jsx-scope */
+
 /* eslint-disable react-refresh/only-export-components */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
@@ -56,7 +56,7 @@ export type FilterOptionOperator =
   | 'startswith';
 
 export interface GridlerProps extends PropsWithChildren {
-  askAPIRowNumber?: (key: string) => Promise<number>;
+  allowMultiSelect?: boolean;
   columns?: GridlerColumns;
 
   defaultSort?: Array<SortOption>;
@@ -89,25 +89,43 @@ export interface GridlerProps extends PropsWithChildren {
   ) => GridCell;
 
   rowHeight?: number;
+  scrollToRowKey?: number;
+  searchFields?: Array<string>;
+  searchStr?: string;
   sections?: {
     bottom?: React.ReactNode;
     left?: React.ReactNode;
     right?: React.ReactNode;
+    rightElementDisabled?: boolean;
     rightElementEnd?: React.ReactNode;
     rightElementStart?: React.ReactNode;
     top?: React.ReactNode;
   };
-  selectedRow?: number;
+  selectedRowKey?: number;
+  selectFirstRowOnMount?: boolean;
   selectMode?: 'cell' | 'row';
   showMenu?: (id: string, options?: Partial<MantineBetterMenuInstance>) => void;
+  title?: string;
   tooltipBarProps?: React.HTMLAttributes<HTMLDivElement>;
   total_rows?: number;
+
   uniqueid: string;
-  useAPIQuery?: (index: number) => Promise<Array<Record<string, any>>>;
   values?: Array<Record<string, any>>;
   width?: number | string;
 }
 
+export interface GridlerRef {
+  getGlideRef: () => DataEditorRef | undefined;
+  getState: GridlerState['getState'];
+  isEmpty: () => boolean;
+  refresh: (parms?: any) => Promise<void>;
+  reload: (parms?: any) => Promise<void>;
+  reloadRow: (key: number | string) => Promise<void>;
+  scrollToRow: (key: number | string) => Promise<void>;
+  selectRow: (key: number | string) => Promise<void>;
+  setStateFN: GridlerState['setStateFN'];
+}
+
 export interface GridlerState {
   _active_requests?: Array<{ controller: AbortController; page: number }>;
   _activeTooltip?: ReactNode;
@@ -117,32 +135,39 @@ export interface GridlerState {
   _gridSelectionRows?: GridSelection['rows'];
   _loadingList: CompactSelection;
   _page_data: Record<number, Array<any>>;
+  _refresh: () => Promise<void>;
   _scrollTimeout?: any | number;
   _visibleArea: Rectangle;
   _visiblePages: Rectangle;
-
   addError: (err: string, ...args: Array<any>) => void;
+  askAPIRowNumber?: (key: string) => Promise<number>;
   colFilters?: Array<FilterOption>;
   colOrder?: Record<string, number>;
   colSize?: Record<string, number>;
   colSort?: Array<SortOption>;
   data?: Array<any>;
-
   errors: Array<string>;
   focused?: boolean;
+
   get: () => GridlerState;
   getCellContent: (cell: Item) => GridCell;
   getCellsForSelection: (
     selection: Rectangle,
     abortSignal: AbortSignal
   ) => CellArray | GetCellsThunk;
+  getGridSelectedRows: () => Array<any>;
   getRowBuffer: (row: number) => Record<string, any>;
+  getRowIndexByKey: (key: number | string) => Promise<number | undefined>;
   getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K];
-
   hasLocalData: boolean;
+  isEmpty: boolean;
+
+  isValuesInPages: () => boolean
   loadingData?: boolean;
   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
   mounted: boolean;
+  onCellActivated: (cell: Item) => void;
+  onCellClicked: (cell: Item, event: CellClickedEventArgs) => void;
   onCellEdited: (cell: Item, newVal: EditableGridCell) => void;
   onColumnMoved: (from: number, to: number) => void;
   onColumnProposeMove: (startIndex: number, endIndex: number) => boolean;
@@ -166,21 +191,25 @@ export interface GridlerState {
       freezeRegions?: readonly Rectangle[];
       selected?: Item;
     }
+
   ) => void;
 
   pageSize: number;
   ready: boolean;
+  refreshCells: (fromRow?: number, toRow?: number, col?: number) => void;
+
   reload?: () => Promise<void>;
   renderColumns?: GridlerColumns;
   setState: <K extends keyof GridlerStoreState>(
     key: K,
-    value: Partial<GridlerStoreState[K]>
+    value: GridlerStoreState[K]
   ) => void;
   setStateFN: <K extends keyof GridlerStoreState>(
     key: K,
     value: (current: GridlerStoreState[K]) => Partial<GridlerStoreState[K]>
   ) => Promise<void>;
   toCell: <TRowType extends Record<string, string>>(row: TRowType, col: number) => GridCell;
+  useAPIQuery?: (index: number) => Promise<Array<Record<string, any>>>;
 }
 
 export type GridlerStoreState = GridlerProps & GridlerState;
@@ -192,6 +221,12 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     _events: new EventTarget(),
     _loadingList: CompactSelection.empty(),
     _page_data: {},
+    _refresh: async () => {
+      const s = get();
+      await s.loadPage(0, 'all');
+      await s.refreshCells();
+      await s.reload?.();
+    },
     _visibleArea: { height: 10000, width: 1000, x: 0, y: 0 },
     _visiblePages: { height: 0, width: 0, x: 0, y: 0 },
     addError: (err: string, ...args: Array<unknown>) => {
@@ -245,6 +280,42 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         return result as CellArray;
       };
     },
+    getGridSelectedRows: () => {
+      const state = get();
+      const buffers: Array<any> = [];
+      const page_data = state._page_data;
+      const pageSize = state.pageSize;
+
+      if (state._gridSelectionRows) {
+        for (const range of state._gridSelectionRows) {
+          let buffer = undefined;
+
+          for (const p in page_data) {
+            for (const r in page_data[p]) {
+              const idx = Number(p) * pageSize + Number(r);
+              if (isNaN(idx)) {
+                continue;
+              }
+
+              if (Number(page_data[p][r]?._rownumber) === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
+                break;
+              } else if (idx === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
+                break;
+              }
+            }
+          }
+          if (buffer !== undefined) {
+            buffers.push(buffer);
+          }
+        }
+      }
+      return buffers;
+    },
+
     getRowBuffer: (row: number) => {
       const state = get();
       //Handle local data
@@ -267,10 +338,73 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
       return rowData;
     },
+    getRowIndexByKey: async (key: number | string) => {
+      const state = get();
+
+      let rowIndex = -1;
+      if (state.ready) {
+        const page_data = state._page_data;
+        const pageSize = state.pageSize;
+        const keyField = state.keyField ?? 'id';
+        for (const p in page_data) {
+          for (const r in page_data[p]) {
+            const idx = Number(p) * pageSize + Number(r);
+            //console.log('Found row', idx, page_data[p][r]?.[keyField], scrollToRowKey);
+            if (String(page_data[p][r]?.[keyField]) === String(key)) {
+              rowIndex =
+                page_data[p][r]?._rownumber > 0 ? page_data[p][r]?._rownumber : idx > 0 ? idx : -1;
+              break;
+            }
+          }
+          if (rowIndex > 0) {
+            console.log('Local row index', rowIndex, key);
+            return rowIndex;
+          }
+        }
+
+        if (rowIndex > 0) {
+          return rowIndex;
+        } else if (typeof state.askAPIRowNumber === 'function') {
+          const rn = await state.askAPIRowNumber(String(key));
+          if (rn && rn >= 0) {
+            console.log('Remote row index', rowIndex, key);
+            return rn;
+          }
+        }
+      }
+
+      return undefined;
+    },
     getState: (key) => {
       return get()[key];
     },
     hasLocalData: false,
+    isEmpty: true,
+    isValuesInPages: () => {
+      const state = get();
+      if (state.values && Object.keys(state._page_data).length > 0) {
+        let found = false;
+        for (const page in state._page_data) {
+          const pageData = state._page_data[Number(page)];
+          for (const row of pageData) {
+            const keyField = state.keyField ?? 'id';
+            const rowKey = row?.[keyField];
+            if (rowKey !== undefined) {
+              const match = state.values.find((v) => String(v?.[keyField]) === String(rowKey));
+              if (match) {
+                found = true;
+                break;
+              }
+            }
+          }
+          if (found) {
+            return true;
+          }
+        }
+      }
+      
+      return false
+    },
     keyField: 'id',
     loadPage: async (pPage: number, clearMode?: 'all' | 'page') => {
       const state = get();
@@ -329,7 +463,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
             );
           })
           .catch((e) => {
-            console.warn('loadPage Error: ', page, e);
+            console.error('loadPage Error: ', page, e);
             state._events.dispatchEvent(
               new CustomEvent('loadPage_error', {
                 detail: { clearMode, error: e, page: pPage, state },
@@ -340,6 +474,35 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     },
     maxConcurrency: 1,
     mounted: false,
+    onCellActivated: (cell: Item): void => {
+      const state = get();
+      const [col, row] = cell;
+
+      state._events.dispatchEvent(
+        new CustomEvent('onCellActivated', {
+          detail: { cell, col, row, state },
+        })
+      );
+      state.glideProps?.onCellActivated?.(cell);
+    },
+    onCellClicked: (cell: Item, event: CellClickedEventArgs) => {
+      const state = get();
+      const [col, row] = cell;
+      if (state.glideProps?.onCellClicked) {
+        state.glideProps?.onCellClicked?.(cell, event);
+      }
+      if (state.values?.length) {
+        if (state.onChange) {
+          state.onChange(state.values);
+        }
+      }
+
+      state._events.dispatchEvent(
+        new CustomEvent('onCellClicked', {
+          detail: { cell, col, row, state },
+        })
+      );
+    },
     onCellEdited: (cell: Item, newVal: EditableGridCell) => {
       const state = get();
       const [, row] = cell;
@@ -351,6 +514,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           detail: { cell, newVal, row, state },
         })
       );
+      state.glideProps?.onCellEdited?.(cell, newVal);
     },
     onColumnMoved: (from: number, to: number) => {
       const s = get();
@@ -374,6 +538,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         return { ...renderCols, [fromItem?.id]: to, [toItem?.id]: from };
       });
     },
+
     onColumnProposeMove: (startIndex: number, endIndex: number) => {
       const s = get();
       const fromItem = s.renderColumns?.[startIndex];
@@ -407,20 +572,16 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         });
       }
     },
-
     onContextClick: (area: string, event: CellClickedEventArgs, col?: number, row?: number) => {
       const s = get();
       const coldef = s.renderColumns?.[col ?? -1];
 
       const items =
         area === 'menu'
-          ? [
-              {
-                label: `Side menu`,
-              },
-            ]
+          ? [{ leftSection: <IconGrid4x4 size={16} />, title: s.title ?? 'Grid' }]
           : coldef
             ? [
+                { leftSection: <IconGrid4x4 size={16} />, title: s.title ?? 'Grid' },
                 {
                   items: [
                     {
@@ -590,9 +751,11 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           isDivider: true,
         },
         {
+          id: 'refesh',
           label: `Refresh`,
-          onClickAsync: async () => {
-            await s.reload?.();
+          onClick: () => {
+            const s = get();
+            s._refresh?.();
           },
         },
       ];
@@ -689,6 +852,30 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     },
     pageSize: 50,
     ready: false,
+    refreshCells: (fromRow?: number, toRow?: number, col?: number) => {
+      const state = get();
+      const damageList: { cell: [number, number] }[] = [];
+      const colLen = Object.keys(state.renderColumns ?? [1, 2, 3]).length;
+
+      const from = fromRow && fromRow > 0 ? fromRow : 0;
+      const to = toRow && toRow >= from ? toRow : from + state.pageSize;
+
+      for (let row = from; row <= to; row++) {
+        if (col && col > 0) {
+          damageList.push({
+            cell: [col, row],
+          });
+        } else {
+          for (let c = 0; c <= colLen; c++) {
+            damageList.push({
+              cell: [c, row],
+            });
+          }
+        }
+      }
+
+      state._glideref?.updateCells(damageList);
+    },
     setState: (key, value) => {
       set(
         produce((state) => {
@@ -737,7 +924,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         const val = String(ref).includes('.') ? (getNestedValue(ref, row) ?? '') : row?.[ref];
 
         if (coldef?.Cell) {
-          return coldef?.Cell(row, col, ref, val, s) as GridCell;
+          return { kind: GridCellKind.Text, ...coldef?.Cell(row, col, ref, val, s) } as GridCell;
         }
         if (s.RenderCell) {
           return s.RenderCell(row, col, ref, val, s);
@@ -745,8 +932,8 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
         return {
           allowOverlay: true,
-          data: val,
-          displayData: String(val),
+          data: val ?? '',
+          displayData: String(val ?? ''),
           kind: GridCellKind.Text,
         };
       } catch (e) {
@@ -762,7 +949,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       }
     },
     total_rows: 1000,
-    uniqueid: getUUID(),
+    uniqueid: getUUID()
   }),
   (props) => {
     const [setState, getState] = props.useStore((s) => [s.setState, s.getState]);
@@ -803,63 +990,18 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       };
     }, [setState, getState]);
 
-    /// logic to apply the selected row.
-    useEffect(() => {
-      const ready = getState('ready');
-      const ref = getState('_glideref');
-      const keyField = getState('keyField') ?? 'id';
-      const selectedRow = getState('selectedRow') ?? props.selectedRow;
-      const askAPIRowNumber = getState('askAPIRowNumber');
-      let rowIndex = -1;
-      if (selectedRow && ref && ready) {
-        const page_data = getState('_page_data');
-        const pageSize = getState('pageSize');
-        for (const p in page_data) {
-          for (const r in page_data[p]) {
-            const idx = Number(p) * pageSize + Number(r);
-            //console.log('Found row', idx, page_data[p][r]?.[keyField], selectedRow);
-            if (String(page_data[p][r]?.[keyField]) === String(selectedRow)) {
-              rowIndex =
-                page_data[p][r]?._rownumber > 0 ? page_data[p][r]?._rownumber : idx > 0 ? idx : -1;
-              break;
-            }
-          }
-          if (rowIndex > 0) {
-            break;
-          }
-        }
-
-        if (rowIndex > 0) {
-          ref.scrollTo(0, rowIndex);
-        } else if (typeof askAPIRowNumber === 'function') {
-          askAPIRowNumber(String(selectedRow))
-            .then((r) => {
-              if (r >= 0) {
-                ref.scrollTo(0, r);
-                getState('_events').dispatchEvent(
-                  new CustomEvent('selectedRowFound', {
-                    detail: { rowNumber: r, selectedRow: selectedRow },
-                  })
-                );
-              }
-            })
-            .catch((e) => {
-              console.warn('Error in askAPIRowNumber', e);
-            });
-        }
-      }
-    }, [props.selectedRow]);
-
     getState('_events').addEventListener('reload', (_e: Event) => {
-      getState('reload')?.();
+      getState('_refresh')?.();
     });
 
     return {
       ...props,
 
+      colSort: props.defaultSort ?? getState('colSort') ?? [],
       hideMenu: props.hideMenu ?? menus.hide,
+      scrollToRowKey: props.scrollToRowKey ?? props.selectedRowKey ?? getState('scrollToRowKey'),
       showMenu: props.showMenu ?? menus.show,
-      total_rows: props.total_rows ?? getState('total_rows') ?? 0,
+      total_rows: getState('total_rows') ?? props.total_rows,
     };
   }
 );

src/Gridler/components/Pager.tsx

@@ -7,6 +7,7 @@ import { useGridlerStore } from './GridlerStore';
 export const Pager = React.memo(() => {
   const [
     setState,
+    getState,
     glideref,
     visiblePages,
     //_visibleArea,
@@ -16,6 +17,7 @@ export const Pager = React.memo(() => {
     hasLocalData,
   ] = useGridlerStore((s) => [
     s.setState,
+    s.getState,
     s._glideref,
     s._visiblePages,
     //s._visibleArea,
@@ -38,10 +40,10 @@ export const Pager = React.memo(() => {
     if (!glideref) {
       return;
     }
-    if (hasLocalData) {
-      //using local data, no need to load pages
-      return;
-    }
+    // if (hasLocalData) {
+    //   //using local data, no need to load pages
+    //   return;
+    // }
     const firstPage = Math.max(0, Math.floor(visiblePages.y / pageSize));
     const lastPage = Math.floor((visiblePages.y + visiblePages.height) / pageSize);
     //const upperPage = pageSize * firstPage;
@@ -57,7 +59,10 @@ export const Pager = React.memo(() => {
     // );
 
     for (const page of range(firstPage, lastPage + 1, 1)) {
-      loadPage(page);
+      loadPage(page).then(() => {
+        const pg = getState('_page_data')?.[0] ?? {};
+        setState('isEmpty', pg && pg.length > 0);
+      });
     }
   }, [loadPage, pageSize, visiblePages, glideref, _loadingList, hasLocalData]);
 

src/Gridler/components/RefHandler.tsx

@@ -0,0 +1,55 @@
+import React, { type PropsWithChildren, type Ref, useImperativeHandle } from 'react';
+
+import { type GridlerRef, useGridlerStore } from './GridlerStore';
+
+function _GridlerRefHandler(props: PropsWithChildren, ref: Ref<GridlerRef> | undefined) {
+  const [setStateFN, getstate] = useGridlerStore((s) => [s.setStateFN, s.getState]);
+
+  useImperativeHandle<GridlerRef, GridlerRef>(ref, () => {
+    return {
+      getGlideRef: () => {
+        return getstate('_glideref');
+      },
+      getState: getstate,
+      isEmpty: () => getstate('isEmpty'),
+      refresh: async (parms?: any) => {
+        const refreshCells = getstate('refreshCells');
+        const loadPage = getstate('loadPage');
+        loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => {
+          refreshCells?.();
+        });
+      },
+      reload: async (parms?: any) => {
+        const refreshCells = getstate('refreshCells');
+        const loadPage = getstate('loadPage');
+        loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => {
+          refreshCells?.();
+        });
+      },
+      reloadRow: async (key: number | string) => {
+        const refreshCells = getstate('refreshCells');
+        //const loadPage = getstate('loadPage');
+        const getRowIndexByKey = getstate('getRowIndexByKey');
+        const rn = await getRowIndexByKey?.(String(key));
+        if (rn && rn >= 0) {
+          refreshCells?.(rn, rn + 1);
+          //todo loadpage or row from server
+        }
+      },
+      scrollToRow: async (key: number | string) => {
+        if (key && Number(key) >= 0) {
+          setStateFN('scrollToRowKey', (cv) => Number(key ?? cv));
+        }
+      },
+      selectRow: async (key: number | string) => {
+        if (key && Number(key) >= 0) {
+          setStateFN('selectedRowKey', (cv) => Number(key ?? cv));
+        }
+      },
+      setStateFN: setStateFN,
+    };
+  }, []);
+  return <>{props.children}</>;
+}
+
+export const GridlerRefHandler = React.forwardRef(_GridlerRefHandler);

src/Gridler/components/RightMenuIcon.tsx

@@ -3,7 +3,7 @@ import { IconMenu2 } from '@tabler/icons-react';
 
 import { useGridlerStore } from './GridlerStore';
 
-export function RightMenuIcon() {
+export function GridlerRightMenuIcon() {
   const { loadingData, onContextClick } = useGridlerStore((s) => ({
     loadingData: s.loadingData,
     onContextClick: s.onContextClick,

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -1,12 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import type { APIOptions } from '../../utils/types';
+import type { GridlerColumn } from '../Column';
 
+import {
+  type FetchAPIOperation,
+  GoAPIHeaders,
+  type GoAPIOperation,
+} from '../../utils/golang-restapi-v2';
 import { useGridlerStore } from '../GridlerStore';
 
-//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
-export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
+export interface GlidlerAPIAdaptorForGoLangv2Props<T = unknown> extends APIOptions {
+  filter?: string;
+  hotfields?: Array<string>;
+  initialData?: Array<T>;
+  options?: Array<GoAPIOperation>;
+}
+
+function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForGoLangv2Props<T>) {
   const [setStateFN, setState, getState, addError, mounted] = useGridlerStore((s) => [
     s.setStateFN,
     s.setState,
@@ -15,38 +27,111 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
     s.mounted,
   ]);
 
-  const useAPIQuery: (index: number) => Promise<any> = async (index: number) => {
+  const useAPIQuery: (index: number) => Promise<any> = useCallback(
+    async (index: number) => {
+      const columns = getState('columns');
       const colSort = getState('colSort');
       const pageSize = getState('pageSize');
       const colFilters = getState('colFilters');
+      const searchStr = getState('searchStr');
+      const searchFields = getState('searchFields');
       const _active_requests = getState('_active_requests');
+       const keyField = getState('keyField');
       setState('loadingData', true);
       try {
         //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props });
         if (props && props.url) {
           const head = new Headers();
-        head.set('x-limit', String(pageSize ?? 50));
-        head.set('x-offset', String((pageSize ?? 50) * index));
 
           head.set('Authorization', `Token ${props.authtoken}`);
+          const ops: FetchAPIOperation[] = [
+            { type: 'limit', value: String(pageSize ?? 50) },
+            { type: 'offset', value: String((pageSize ?? 50) * index) },
+          ];
 
           if (colSort?.length && colSort.length > 0) {
-          head.set(
-            'x-sort',
-            colSort
+            ops.push({
+              type: 'sort',
+              value: colSort
                 ?.map((sort: any) => `${sort.id} ${sort.direction}`)
-              .reduce((acc: any, val: any) => `${acc},${val}`)
-          );
+                .reduce((acc: any, val: any) => `${acc},${val}`),
+            });
           }
 
-        if (colFilters?.length && colFilters.length > 0) {
           colFilters
             ?.filter((f) => f.value?.length > 0)
             ?.forEach((filter: any) => {
               if (filter.value && filter.value !== '') {
-                head.set(`x-searchop-${filter.operator}-${filter.id}`, `${filter.value}`);
+                ops.push({
+                  name: `${filter.id}`,
+                  op: filter.operator,
+                  type: 'searchop',
+                  value: filter.value,
+                });
               }
             });
+
+          if (searchStr && searchStr !== '') {
+            columns
+              ?.filter(
+                (f) =>
+                  !f.disableFilter &&
+                  !f.disableSearch &&
+                  !f.virtual &&
+                  f.id &&
+                  ((searchFields ?? []).length == 0 || searchFields?.includes(f.id))
+              )
+              ?.forEach((filter: any) => {
+                ops.push({
+                  name: `${filter.id ?? ""}`,
+                  op: 'contains',
+                  type: 'searchor',
+                  value: searchStr,
+                });
+              });
+          }
+
+          if (props.filter && props.filter !== '') {
+            ops.push({
+              name: 'sql_filter',
+              type: 'custom-sql-w',
+              value: props.filter,
+            });
+          }
+
+          if ((props.options ?? []).length > 0) {
+            ops.push(...(props.options ?? []));
+          }
+
+          const col_ids =
+            columns
+              ?.filter((col) => !col.virtual)
+              ?.map((col: GridlerColumn) => {
+                return col.id;
+              }) ?? [];
+
+          if (props.hotfields && props.hotfields.length > 0) {
+            col_ids?.push(props.hotfields.join(','));
+          }
+
+          if (keyField) {
+            if (!col_ids.includes(keyField)) {
+              col_ids.push(keyField);
+            }
+          }
+
+          if (col_ids && col_ids.length > 0) {
+            ops.push({
+              type: 'select-fields',
+              value: col_ids.join(','),
+            });
+          }
+
+          if (ops && ops.length > 0) {
+            const optionHeaders = GoAPIHeaders(ops);
+            for (const oh in GoAPIHeaders(ops)) {
+              head.set(oh, optionHeaders[oh]);
+            }
           }
 
           const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1;
@@ -55,14 +140,22 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
               r.controller?.abort?.();
             }
           });
-        if (_active_requests && currentRequestIndex >= 0 && _active_requests[currentRequestIndex]) {
+
+          if (
+            _active_requests &&
+            currentRequestIndex >= 0 &&
+            _active_requests[currentRequestIndex]
+          ) {
             //console.log(`Already queued ${index}`, index, s._active_requests);
             setState('loadingData', false);
             return undefined;
           }
 
           const controller = new AbortController();
-        await setStateFN('_active_requests', (cv) => [...(cv ?? []), { controller, page: index }]);
+          await setStateFN('_active_requests', (cv) => [
+            ...(cv ?? []),
+            { controller, page: index },
+          ]);
 
           const res = await fetch(
             `${props.url}?x-limit=${String(pageSize ?? 50)}&x-offset=${String((pageSize ?? 50) * index)}`,
@@ -89,22 +182,37 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
             ...(cv ?? []).filter((f) => f.page !== index),
           ]);
         }
-    } catch (e) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (_e) {
         //console.log('APIAdaptorGoLangv2 error', e);
-      addError(`Error: ${e}`, 'api', props.url);
+        //addError(`Error: ${e}`, 'api', props.url);
       }
       setState('loadingData', false);
       return [];
-  };
+    },
+    [
+      getState,
+      props.authtoken,
+      props.url,
+      props.filter,
+      JSON.stringify(props.options),
+      setState,
+      setStateFN,
+      addError,
+    ]
+  );
 
-  const askAPIRowNumber: (key: string) => Promise<number> = async (key: string) => {
+  const askAPIRowNumber: (key: string) => Promise<number> = useCallback(
+    async (key: string) => {
       const colFilters = getState('colFilters');
 
       //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props });
       if (props && props.url) {
         const head = new Headers();
-      head.set('x-limit', '10');
-      head.set('x-fetch-rownumber', String(key));
+        const ops: FetchAPIOperation[] = [
+          { type: 'limit', value: String(10) },
+          { type: 'fetch-rownumber', value: key },
+        ];
 
         head.set('Authorization', `Token ${props.authtoken}`);
 
@@ -118,6 +226,28 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
             });
         }
 
+        if (props.filter && props.filter !== '') {
+          ops.push({
+            name: 'sql_filter',
+            type: 'custom-sql-w',
+            value: `(${props.filter})`,
+          });
+        }
+
+        if (props.options && props.options.length > 0) {
+          const optionHeaders = GoAPIHeaders(props.options);
+          for (const oh in optionHeaders) {
+            head.set(oh, optionHeaders[oh]);
+          }
+        }
+
+        if (ops && ops.length > 0) {
+          const optionHeaders = GoAPIHeaders(ops);
+          for (const oh in GoAPIHeaders(ops)) {
+            head.set(oh, optionHeaders[oh]);
+          }
+        }
+
         const controller = new AbortController();
 
         const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, {
@@ -134,14 +264,38 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
         addError(`${res.status} ${res.statusText}`, 'api', props.url);
       }
       return [];
-  };
+    },
+    [props.url, props.authtoken, props.filter, props.options, getState, addError]
+  );
 
+  //Reset the function in the store.
   useEffect(() => {
     setState('useAPIQuery', useAPIQuery);
     setState('askAPIRowNumber', askAPIRowNumber);
-  }, [props.url, props.authtoken, mounted, setState]);
+    const isValuesInPages = getState('isValuesInPages');
+   
+    const _refresh = getState('_refresh');
+    if (!isValuesInPages) {
+        setState('values', []);
+    }
+   
+    //Reset the loaded pages to new rules
+    _refresh?.().then(() => {
+      const onChange = getState('onChange');
+      const getGridSelectedRows = getState('getGridSelectedRows');
+      if (onChange && typeof onChange === 'function') {
+        const buffers = getGridSelectedRows?.();
+        onChange(buffers);
+      }
+    });
+  }, [props.url, props.authtoken, props.filter, JSON.stringify(props.options), mounted, setState]);
 
   return <></>;
-});
+}
+
+
+
+//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
+export const GlidlerAPIAdaptorForGoLangv2 = React.memo(_GlidlerAPIAdaptorForGoLangv2);
 
 GlidlerAPIAdaptorForGoLangv2.displayName = 'Gridler-GlidlerAPIAdaptorForGoLangv2';

src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx

@@ -14,6 +14,7 @@ import type { GridlerColumn } from '../Column';
 import { type GridlerProps, type GridlerState, useGridlerStore } from '../GridlerStore';
 
 export function GlidlerFormAdaptor(props: {
+  changeOnActiveClick?: boolean;
   descriptionField?: ((data: Record<string, unknown>) => string) | string;
   getMenuItems?: GridlerProps['getMenuItems'];
   onReload?: () => void;
@@ -23,21 +24,43 @@ export function GlidlerFormAdaptor(props: {
   ) => void;
   showDescriptionInMenu?: boolean;
 }) {
-  const [getState, mounted, setState, reload] = useGridlerStore((s) => [
+  const [getState, mounted, setState, _events] = useGridlerStore((s) => [
     s.getState,
     s.mounted,
     s.setState,
-    s.reload,
+    s._events,
   ]);
 
+  useEffect(() => {
+    if (mounted && props.changeOnActiveClick) {
+      const evf = (event: CustomEvent<any>) => {
+        const { row, state } = event.detail;
+        const getRowBuffer = state.getRowBuffer as (row: number) => Record<string, unknown>;
+        if (getRowBuffer) {
+          const rowData = getRowBuffer(row);
+          if (!rowData) {
+            return;
+          }
+          props.onRequestForm('change', rowData);
+        }
+      };
+      _events?.addEventListener('onCellActivated', evf as any);
+      return () => {
+        if (evf) {
+          _events?.removeEventListener('onCellActivated', evf as any);
+        }
+      };
+    }
+  }, [props.changeOnActiveClick, mounted, _events]);
+
   const getMenuItems = useCallback(
     (
       id: string,
       storeState: GridlerState,
       row?: Record<string, unknown>,
       col?: GridlerColumn,
-      defaultItems?: Array<unknown>
-    ) => {
+      defaultItems?: MantineBetterMenuInstanceItem[]
+    ): MantineBetterMenuInstanceItem[] => {
       //console.log('GlidlerFormInterface getMenuItems', id);
 
       if (id === 'header-menu') {
@@ -45,9 +68,9 @@ export function GlidlerFormAdaptor(props: {
       }
 
       const items = [] as Array<MantineBetterMenuInstanceItem>;
-      if (defaultItems && id === 'cell') {
+
       items.push(...(defaultItems as Array<MantineBetterMenuInstanceItem>));
-      }
+
       const rows = getState('_gridSelection')?.rows.toArray() ?? [];
       const manyRows = rows.length > 1;
 
@@ -140,8 +163,9 @@ export function GlidlerFormAdaptor(props: {
         c: 'orange',
         label: 'Refresh',
         leftSection: <IconRefresh color="orange" size={16} />,
-        onClick: () => {
-          reload?.();
+        onClickAsync: async () => {
+          const _refresh = getState('_refresh');
+          await _refresh?.();
         },
       });
 

src/Gridler/components/adaptors/GlidlerLocalDataAdaptor.tsx

@@ -1,15 +1,47 @@
 import React, { useEffect } from 'react';
 
-import { useGridlerStore } from '../GridlerStore';
+import type { GridlerColumns } from '../Column';
 
-export interface GlidlerLocalDataAdaptorProps {
-  data: Array<unknown>;
+import { type FilterOption, type SortOption, useGridlerStore } from '../GridlerStore';
+
+export interface GlidlerLocalDataAdaptorProps<T = unknown> {
+  data: Array<T>;
+  onColumnFilter?: (
+    colFilters: Array<FilterOption> | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
+  onColumnSort?: (
+    colSort: Array<SortOption> | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
+  onSearch?: (
+    searchField: string | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
 }
 
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
-export const GlidlerLocalDataAdaptor = React.memo((props: GlidlerLocalDataAdaptorProps) => {
+function _GlidlerLocalDataAdaptor<T = unknown>(props: GlidlerLocalDataAdaptorProps<T>) {
   const [setState, getState, mounted] = useGridlerStore((s) => [s.setState, s.getState, s.mounted]);
 
+  const { colFilters, colSort, columns, searchStr } = useGridlerStore((s) => ({
+    colFilters: s.colFilters,
+    colOrder: s.colOrder,
+    colSize: s.colSize,
+    colSort: s.colSort,
+    columns: s.columns,
+    searchStr: s.searchStr,
+  }));
+
+  const refChanged = React.useRef({
+    colFilters: colFilters,
+    colSort: colSort,
+    searchStr: searchStr,
+  });
+
   const useAPIQuery: (index: number) => Promise<any> = async (index: number) => {
     const pageSize = getState('pageSize');
 
@@ -25,7 +57,38 @@ export const GlidlerLocalDataAdaptor = React.memo((props: GlidlerLocalDataAdapto
     setState('useAPIQuery', useAPIQuery);
   }, [mounted, setState]);
 
+  useEffect(() => {
+    if (props.onColumnSort && colSort !== refChanged?.current?.colSort) {
+      const sortedData = props.onColumnSort(colSort, columns, props.data as Array<T>);
+      setState('total_rows', sortedData.length);
+      setState('data', sortedData);
+      refChanged.current.colSort = colSort;
+      getState('refreshCells')?.();
+    }
+  }, [colSort, props.onColumnSort]);
+
+  useEffect(() => {
+    if (props.onColumnFilter && colFilters !== refChanged?.current?.colFilters) {
+      const filteredData = props.onColumnFilter(colFilters, columns, props.data as Array<T>);
+      setState('total_rows', filteredData.length);
+      setState('data', filteredData);
+      refChanged.current.colFilters = colFilters;
+      getState('refreshCells')?.();
+    }
+  }, [colFilters, props.onColumnFilter]);
+
+  useEffect(() => {
+    if (props.onSearch && searchStr !== refChanged?.current?.searchStr) {
+      const filteredData = props.onSearch(searchStr, columns, props.data as Array<T>);
+      setState('total_rows', filteredData.length);
+      setState('data', filteredData);
+      refChanged.current.colFilters = colFilters;
+      getState('refreshCells')?.();
+    }
+  }, [searchStr, props.onSearch]);
+
   return <></>;
-});
+}
+export const GlidlerLocalDataAdaptor = React.memo(_GlidlerLocalDataAdaptor);
 
 GlidlerLocalDataAdaptor.displayName = 'Gridler-GlidlerLocalDataAdaptor';

src/Gridler/hooks/use-grid-theme.ts

@@ -102,8 +102,8 @@ export const useGridTheme = () => {
     // }[colorScheme];
 
      
-    // for (const selectedRow of gridSelection?.rows) {
-    //   if (selectedRow === row) {
+    // for (const scrollToRowKey of gridSelection?.rows) {
+    //   if (scrollToRowKey === row) {
     //     return {
     //       bgCell: rowColor.bgCell,
     //       bgCellMedium: rowColor.bgCellMedium

src/Gridler/index.ts

@@ -2,5 +2,9 @@ export {GlidlerAPIAdaptorForGoLangv2 } from './components/adaptors/GlidlerAPIAda
 export {GlidlerFormAdaptor } from './components/adaptors/GlidlerFormAdaptor'
 export {GlidlerLocalDataAdaptor } from './components/adaptors/GlidlerLocalDataAdaptor'
 export * from './components/Column'
-export {useGridlerStore } from './components/GridlerStore'
+export {type GridlerProps,type GridlerRef,type GridlerState, useGridlerStore } from './components/GridlerStore'
+export { GridlerRightMenuIcon } from './components/RightMenuIcon'
 export {Gridler} from './Gridler'
+export  {GoAPIHeaders} from './utils'
+export type {FetchAPIOperation} from './utils'
+export type {APIOptions} from './utils/types'

src/Gridler/stories/Examples.goapi.tsx

@@ -1,10 +1,15 @@
-import { Checkbox, Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
+import { Button, Checkbox, Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import type { GridlerColumns } from '../components/Column';
 
+import { FormerDialog } from '../../Former';
+import { NativeSelectCtrl, TextInputCtrl } from '../../FormerControllers';
+import { InlineWrapper } from '../../FormerControllers/Inputs/InlineWrapper';
+import NumberInputCtrl from '../../FormerControllers/Inputs/NumberInputCtrl';
 import { GlidlerAPIAdaptorForGoLangv2 } from '../components/adaptors';
+import { type GridlerRef } from '../components/GridlerStore';
 import { Gridler } from '../Gridler';
 
 export const GridlerGoAPIExampleEventlog = () => {
@@ -12,12 +17,39 @@ export const GridlerGoAPIExampleEventlog = () => {
     defaultValue: 'http://localhost:8080/api',
     key: 'apiurl',
   });
+  const ref = useRef<GridlerRef>(null);
   const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
   const [selectRow, setSelectRow] = useState<string | undefined>('');
   const [values, setValues] = useState<Array<Record<string, any>>>([]);
+  const [search, setSearch] = useState<string>('');
+  const [formProps, setFormProps] = useState<{ onChange?: any; onClose?: any; opened: boolean; request: any; title?: string; values: any; } | null>({
+    onChange: (_request: string, data: any) => { ref.current?.refresh({ value: data }); },
+    onClose: () => { setFormProps((cv) => ({ ...cv, opened: false, request: null, values: null })) },
+    opened: false,
+    request: null,
+    values: null,
+  });
   const [sections, setSections] = useState<Record<string, unknown> | undefined>(undefined);
   const columns: GridlerColumns = [
     {
+      Cell: (row) => {
+        const process = `${row?.cql2?.length > 0
+            ? '🔖'
+            : row?.cql1?.length > 0
+              ? '📕'
+              : row?.status === 1
+                ? '💡'
+                : row?.status === 2
+                  ? '🔒'
+                  : '⚙️'
+          } ${String(row?.id_process ?? '0')}`;
+
+        return {
+          data: process,
+          displayData: process,
+          status: row?.status,
+        } as any;
+      },
       id: 'id_process',
       title: 'RID',
       width: 100,
@@ -45,7 +77,7 @@ export const GridlerGoAPIExampleEventlog = () => {
   ];
 
   return (
-    <Stack h="80vh">
+    <Stack h="80vh" w="50vw">
       <h2>Demo Using Go API Adaptor</h2>
       <TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
       <TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />
@@ -87,22 +119,58 @@ export const GridlerGoAPIExampleEventlog = () => {
           //console.log('GridlerGoAPIExampleEventlog onChange', v);
           setValues(v);
         }}
-        sections={sections}
-        selectedRow={selectRow ? parseInt(selectRow, 10) : undefined}
+        ref={ref}
+        scrollToRowKey={selectRow ? parseInt(selectRow, 10) : undefined}
+        searchStr={search}
+        sections={{ ...sections, rightElementDisabled: false }}
+        selectFirstRowOnMount={true}
         selectMode="row"
+        title="Go API Example"
         uniqueid="gridtest"
         values={values}
       >
-        <GlidlerAPIAdaptorForGoLangv2 authtoken={apiKey} url={`${apiUrl}/public/process`} />
+        <GlidlerAPIAdaptorForGoLangv2
+          authtoken={apiKey}
+          options={[{ type: 'preload', value: 'PRO' }]}
+          //options={[{ type: 'fieldfilter', name: 'process', value: 'test' }]}
+          url={`${apiUrl}/public/process`}
+        />
         <Gridler.FormAdaptor
+          changeOnActiveClick={true}
           descriptionField={'process'}
           onRequestForm={(request, data) => {
-            console.log('Form requested', request, data);
+            setFormProps((cv)=> { 
+              return {...cv, opened: true, request: request as any, values: data as any}
+            })    
           }}
         />
       </Gridler>
+      <FormerDialog 
+          former={{
+            request: formProps?.request ?? "insert",
+            values: formProps?.values,
+          }}
+          onClose={formProps?.onClose}
+          opened={formProps?.opened ?? false}
+          title={formProps?.title ?? 'Process Form'}
+        >
+            <Stack>
+              <TextInputCtrl label="Process Name" name="process" />
+              <NumberInputCtrl label="Sequence" name="sequence" />
+              <InlineWrapper label="Type" promptWidth={200}>
+                <NativeSelectCtrl data={["trigger","function","view"]} name="type"/>
+              </InlineWrapper>
+            </Stack>
+      </FormerDialog>
       <Divider />
       <Group>
+        <TextInput
+          leftSection={<>S</>}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search"
+          value={search}
+          w="190px"
+        />
         <TextInput
           onChange={(e) => setSelectRow(e.target.value)}
           placeholder="row"
@@ -117,6 +185,43 @@ export const GridlerGoAPIExampleEventlog = () => {
         />
         ;
       </Group>
+      <Group>
+        <Button
+          onClick={() => {
+            ref.current?.refresh();
+          }}
+        >
+          Refresh
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.selectRow(20523);
+          }}
+        >
+          Select 20523
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.selectRow(4);
+          }}
+        >
+          Select 4
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.reloadRow(20523);
+          }}
+        >
+          Reload 20523
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.scrollToRow(16272);
+          }}
+        >
+          Goto 2050
+        </Button>
+      </Group>
     </Stack >
   );
 };

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

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

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

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

src/Gridler/utils/golang-restapi-v2/index.ts

@@ -0,0 +1,270 @@
+import {b64EncodeUnicode} from '@warkypublic/artemis-kit/base64'
+const TOKEN_KEY = 'gridler_golang_restapi_v2_token'
+
+export type APIOptionsType = {
+    autocreate?: boolean
+    autoref?: boolean
+    baseurl?: string
+    getAPIProvider?: () => { provider: string; providerKey: string }
+    getAuthToken?: () => string
+    operations?: Array<FetchAPIOperation>
+    postfix?: string
+    prefix?: string
+    requestTimeoutSec?: number
+}
+
+
+
+export interface APIResponse {
+    errmsg: string
+    payload?: any
+    retval: number
+}
+export interface FetchAPIOperation {
+    name?: string
+    op?: string
+    type: GoAPIHeaderTypes //x-fieldfilter
+    value: string
+}
+/**
+ * @description Types for the Go Rest API headers
+ * @typedef {String} GoAPIEnum
+*/
+export type GoAPIEnum =
+  | 'advsql'
+  | 'api-key'
+  | 'api-range-from'
+  | 'api-range-size'
+  | 'api-range-total'
+  | 'api-src'
+  | 'api'
+  | 'association_autocreate'
+  | 'association_autoupdate'
+  | 'association-update'
+  | 'cql-sel'
+  | 'cursor-backward'// For x cursor-backward header
+  | 'cursor-forward' // For x cursor-forward header
+  | 'custom-sql-join'
+  | 'custom-sql-or'
+  | 'custom-sql-w'
+  | 'detailapi'
+  | 'distinct'
+  | 'expand'
+  | 'fetch-rownumber'
+  | 'fieldfilter'
+  | 'fieldfilter'
+  | 'files' //For x files header
+  | 'func'
+  | 'limit'
+  | 'no-return'
+  | 'not-select-fields'
+  | 'offset'
+  | 'parm'
+  | 'pkrow'
+  | 'preload'
+  | 'searchand'
+  | 'searchfilter'
+  | 'searchfilter'
+  | 'searchop'
+  | 'searchop'
+  | 'searchor'
+  | 'select-fields'
+  | 'simpleapi'
+  | 'skipcache'
+  | 'skipcount'
+  | 'sort'
+
+
+export type GoAPIHeaderKeys = `x-${GoAPIEnum}`
+
+
+export type GoAPIHeaderTypes = GoAPIEnum & string
+
+
+export interface GoAPIOperation {
+  name?: string
+  op?: string
+  type: GoAPIHeaderTypes //x-fieldfilter
+  value: string
+}
+export interface MetaData {
+    limit?: number
+    offset?: number
+    total?: number
+}
+
+
+/**
+ * Builds an array of objects by encoding specific values and setting headers.
+ *
+ * @param {Array<FetchAPIOperation>} ops - The array of FetchAPIOperation objects to be built.
+ * @param {Headers} [headers] - Optional headers to be set.
+ * @return {Array<FetchAPIOperation>} - The built array of FetchAPIOperation objects.
+ */
+const buildGoAPIOperation = (
+  ops: Array<FetchAPIOperation>,
+  headers?: Headers
+): Array<FetchAPIOperation> => {
+  const newops = [...ops.filter((i) => i !== undefined && i.type !== undefined)]
+
+   
+  for (let i = 0; i < newops.length; i++) {
+    if (!newops[i].name || newops[i].name === '') {
+      newops[i].name = ''
+    }
+    if (newops[i].type === 'files' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'advsql' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+
+    if (newops[i].type === 'custom-sql-or' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+
+    if (newops[i].type === 'custom-sql-join' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'not-select-fields' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'custom-sql-w' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'select-fields' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'cql-sel' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+
+    if (headers) {
+      if (!newops || newops.length === 0) {
+        headers.set(`x-limit`, '10')
+      }
+
+      if (newops[i].type === 'association_autoupdate') {
+        headers.set(`association_autoupdate`, newops[i].value ?? '1')
+      }
+      if (newops[i].type === 'association_autocreate') {
+        headers.set(`association_autocreate`, newops[i].value ?? '1')
+      }
+      if (
+        newops[i].type === 'searchop' ||
+        newops[i].type === 'searchor' ||
+        newops[i].type === 'searchand'
+      ) {
+        headers.set(
+          encodeURIComponent(`x-${newops[i].type}-${newops[i].op}-${newops[i].name}`),
+          String(newops[i].value)
+        )
+      } else {
+        headers.set(
+          encodeURIComponent(
+            `x-${newops[i].type}${newops[i].name && newops[i].name !== '' ? '-' + newops[i].name : ''}`
+          ),
+          String(newops[i].value)
+        )
+      }
+    }
+  }
+
+  return newops
+}
+
+/**
+ * Retrieves the headers from an array of FetchAPIOperation objects and returns them as an object.
+ *
+ * @param {Array<FetchAPIOperation>} ops - The array of FetchAPIOperation objects.
+ * @return {{ [key: string]: string }} - The headers as an object with string keys and string values.
+ */
+const GoAPIHeaders = (
+  ops: Array<FetchAPIOperation>,
+  headers?: Headers
+): { [key: string]: string } => {
+  const head = new Headers()
+  const headerlist: Record<string,string> = {}
+
+  const authToken = getAuthToken?.()
+  if (authToken && authToken !== '') {
+     
+    head.set('Authorization', `Token ${authToken}`)
+  } else {
+    const token = getAuthToken()
+    if (token) {
+      head.set('Authorization', `Token ${token}`)
+    }
+  }
+
+
+  if (headers) {
+    headers.forEach((v, k) => {
+      head.set(k, v)
+    })
+  }
+  const distinctOperations: Array<FetchAPIOperation> = []
+
+  for (const value of ops?.filter((val) => !!val) ?? []) {
+    const index = distinctOperations.findIndex(
+      (searchValue) => searchValue.name === value.name && searchValue.type === value.type
+    )
+    if (index === -1) {
+      distinctOperations.push(value)
+    } else {
+      distinctOperations[index] = value
+    }
+  }
+
+  buildGoAPIOperation(distinctOperations, head)
+
+  head?.forEach((v, k) => {
+    headerlist[k] = v
+  })
+
+  if (headers) {
+    for (const key of Object.keys(headerlist)) {
+      headers.set(key, headerlist[key])
+    }
+  }
+
+  return headerlist
+}
+
+const callbacks = {
+    getAuthToken: () => {
+    if (localStorage) {
+        const token = localStorage.getItem(TOKEN_KEY)
+        if (token) {
+        return token
+        }
+    }
+    return undefined
+    }
+}
+
+/**
+ * Retrieves the authentication token from local storage.
+ *
+ * @return {string | undefined} The authentication token if found, otherwise undefined
+ */
+const getAuthToken = () => callbacks?.getAuthToken?.()
+
+const setAuthTokenCallback = (cb: ()=> string) => {
+    callbacks.getAuthToken = cb
+    return callbacks.getAuthToken
+}
+
+/**
+ * Sets the authentication token in the local storage.
+ *
+ * @param {string} token - The authentication token to be set.
+ */
+const setAuthToken = (token: string) => {
+  if (localStorage) {
+    localStorage.setItem(TOKEN_KEY, token)
+  }
+}
+
+
+export {buildGoAPIOperation,getAuthToken,GoAPIHeaders,setAuthToken,setAuthTokenCallback}

src/Gridler/utils/golang-restapi-v2/types.ts

@@ -1,81 +0,0 @@
-export type APIOptionsType = {
-    autocreate?: boolean
-    autoref?: boolean
-    baseurl?: string
-    getAPIProvider?: () => { provider: string; providerKey: string }
-    getAuthToken?: () => string
-    operations?: Array<FetchAPIOperation>
-    postfix?: string
-    prefix?: string
-    requestTimeoutSec?: number
-}
-
-
-
-export interface APIResponse {
-    errmsg: string
-    payload?: any
-    retval: number
-}
-export interface FetchAPIOperation {
-    name?: string
-    op?: string
-    type: FetchOpTypes //x-fieldfilter
-    value: string
-}
-export type FetchOpTypes = GoAPIEnum & string
-
-
-/**
- * @description Types for the Go Rest API headers
- * @typedef {String} GoAPIEnum
-*/
-export type GoAPIEnum = 'advsql'
-    | 'api-key'
-    | 'api-range-from'
-    | 'api-range-size'
-    | 'api-range-total'
-    | 'api-src'
-    | 'api'
-    | 'association_autocreate'
-    | 'association_autoupdate'
-    | 'association-update'
-    | 'cql-sel'
-    | 'custom-sql-join'
-    | 'custom-sql-or'
-    | 'custom-sql-w'
-    | 'detailapi'
-    | 'distinct'
-    | 'expand'
-    | 'fetch-rownumber'
-    | 'fieldfilter'
-    | 'fieldfilter'
-    | 'func'
-    | 'limit'
-    | 'no-return'
-    | 'not-select-fields'
-    | 'offset'
-    | 'parm'
-    | 'pkrow'
-    | 'preload'
-    | 'searchfilter'
-    | 'searchfilter'
-    | 'searchop'
-    | 'searchop'
-    | 'select-fields'
-    | 'simpleapi'
-    | 'skipcache'
-    | 'skipcount'
-    | 'sort'
-
-
-export type GoAPIHeaderKeys = `x-${GoAPIEnum}`
-
-
-export type MetaCallback = (data: MetaData) => void
-
-export interface MetaData {
-    limit?: number
-    offset?: number
-    total?: number
-}

src/Gridler/utils/index.ts

@@ -0,0 +1 @@
+export {type APIOptionsType,type FetchAPIOperation,GoAPIHeaders} from './golang-restapi-v2'

src/MantineBetterMenu/MantineBetterMenu.stories.tsx

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

src/MantineBetterMenu/MenuRenderer.tsx

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

src/MantineBetterMenu/Store.tsx

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

src/lib.ts

@@ -1,5 +1,9 @@
-export * from './Gridler'
-
+export * from './Boxer';
+export * from './ErrorBoundary';
+export * from './Former';
+export * from './FormerControllers';
+export * from './GlobalStateStore';
+export * from './Gridler';
 
 export {
   type MantineBetterMenuInstance,
@@ -7,4 +11,4 @@ export {
   MantineBetterMenusProvider,
   type MantineBetterMenuStoreState,
   useMantineBetterMenus,
-} from "./MantineBetterMenu";
+} from './MantineBetterMenu';

src/test/setup.ts

@@ -17,14 +17,14 @@ Object.defineProperty(window, 'matchMedia', {
 })
 
 // Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
+globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn(),
   observe: vi.fn(),
   unobserve: vi.fn(),
 }))
 
 // Mock IntersectionObserver
-global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+globalThis.IntersectionObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn(),
   observe: vi.fn(),
   unobserve: vi.fn(),

tsconfig.app.json

@@ -4,7 +4,8 @@
     "target": "es6",
     "useDefineForClassFields": true,
     "types": [
-      "./global.d.ts"
+      "./global.d.ts",
+      "node"
     ],
     "lib": [
       "ES2016",
@@ -15,7 +16,7 @@
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "verbatimModuleSyntax": true,
@@ -31,11 +32,13 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
   },
   "include": [
     "src",
     "lib.ts",
     "*.d.ts",
-  ]
+  ],
+    
 }

tsconfig.node.json

@@ -19,9 +19,10 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "types": ["node"]
   },
   "include": [
     "vite.config.ts"
-  ]
+  ], 
 }

vite.config.ts

@@ -21,10 +21,10 @@ export default defineConfig({
       tsconfigPath: './tsconfig.app.json',
       compilerOptions: {
         noEmit: false,
+        skipLibCheck: true,
         emitDeclarationOnly: true,
       },
     }),
- 
   ],
   publicDir: 'public',
   build: {