From 28becadc1f268c1e70a21784397731bbce912542 Mon Sep 17 00:00:00 2001
From: William Correa <wilcorrea@gmail.com>
Date: Sun, 8 Mar 2026 18:20:01 -0300
Subject: [PATCH 1/2] feat: add some new components

---
 packages/core/src/fields/base.ts              |  14 +-
 packages/core/src/fields/list.ts              |  28 +-
 packages/core/src/index.ts                    |   3 +-
 packages/core/src/locales/pt-BR.ts            |   7 +-
 packages/core/src/mock.ts                     |   2 +
 packages/core/src/schema.ts                   |  10 +-
 packages/core/src/types.ts                    |  47 +-
 packages/demo/src/settings/hooks.ts           |  39 +-
 .../react-web/src/components/DataPage.tsx     | 147 ++++-
 packages/react-web/src/components/Dialog.tsx  |  57 +-
 packages/react-web/src/components/Form.tsx    | 108 ++--
 .../src/components/PageActionsContext.tsx     |  25 +
 packages/react-web/src/components/Table.tsx   | 548 +++++++++++++-----
 .../components/defaults/ColumnSelector.tsx    |   5 +-
 .../src/components/defaults/DebugPanel.tsx    |  23 +-
 .../src/components/defaults/EmptyState.tsx    |  56 +-
 .../src/components/defaults/Pagination.tsx    |  75 ++-
 packages/react-web/src/components/registry.ts |  52 ++
 packages/react-web/src/contracts/component.ts |   3 +
 packages/react-web/src/index.ts               |   9 +-
 .../react-web/src/renderers/DateField.tsx     |   5 +-
 .../react-web/src/renderers/ListField.tsx     | 243 ++++----
 .../src/renderers/MultiSelectField.tsx        |   9 +-
 .../react-web/src/renderers/NumberField.tsx   |   6 +-
 .../react-web/src/renderers/SelectField.tsx   |  56 +-
 .../react-web/src/renderers/TextField.tsx     |  49 +-
 .../react-web/src/renderers/TextareaField.tsx |  49 +-
 .../react-web/src/renderers/TimeField.tsx     |   5 +-
 .../react-web/src/renderers/ToggleField.tsx   |   5 +-
 .../src/renderers/list/useListComponent.ts    |  91 +++
 .../src/renderers/list/useListDialog.ts       |  33 ++
 packages/react-web/src/support/Icon.tsx       |   1 +
 packages/react-web/src/support/i18n.ts        |  82 +++
 packages/react-web/src/theme/default.ts       |  42 +-
 packages/react-web/src/types.ts               |  67 ++-
 packages/react/src/types.ts                   |   7 +-
 packages/react/src/use-data-form.ts           |  51 +-
 packages/react/src/use-data-table.ts          |  50 +-
 packages/svelte/src/types.ts                  |   2 +-
 packages/svelte/src/use-data-form.ts          |  37 +-
 packages/svelte/src/use-data-table.ts         |  42 +-
 packages/vue/src/types.ts                     |   2 +-
 packages/vue/src/use-data-form.ts             |  37 +-
 packages/vue/src/use-data-table.ts            |  42 +-
 .../tests/src/domain/person/hooks.test.ts     |  54 +-
 .../tests/src/domain/person/hooks.test.ts     |  54 +-
 .../tests/src/domain/person/hooks.test.ts     |  54 +-
 .../tests/src/domain/person/hooks.test.ts     |  54 +-
 48 files changed, 1798 insertions(+), 689 deletions(-)
 create mode 100644 packages/react-web/src/components/PageActionsContext.tsx
 create mode 100644 packages/react-web/src/components/registry.ts
 create mode 100644 packages/react-web/src/renderers/list/useListComponent.ts
 create mode 100644 packages/react-web/src/renderers/list/useListDialog.ts
 create mode 100644 packages/react-web/src/support/i18n.ts

diff --git a/packages/core/src/fields/base.ts b/packages/core/src/fields/base.ts
index 03708d9..ef84498 100644
--- a/packages/core/src/fields/base.ts
+++ b/packages/core/src/fields/base.ts
@@ -94,6 +94,18 @@ export class FieldDefinition<T = unknown> {
   }
 
   toConfig(): FieldConfig {
-    return structuredClone(this._config)
+    return cloneWithFunctions(this._config) as FieldConfig
   }
 }
+
+function cloneWithFunctions(value: unknown): unknown {
+  if (value === null || typeof value !== 'object') return value
+  if (typeof value === 'function') return value
+  if (Array.isArray(value)) return value.map(cloneWithFunctions)
+  const result: Record<string, unknown> = {}
+  for (const key of Object.keys(value as object)) {
+    const v = (value as Record<string, unknown>)[key]
+    result[key] = typeof v === 'function' ? v : cloneWithFunctions(v)
+  }
+  return result
+}
diff --git a/packages/core/src/fields/list.ts b/packages/core/src/fields/list.ts
index cd36293..ae86e46 100644
--- a/packages/core/src/fields/list.ts
+++ b/packages/core/src/fields/list.ts
@@ -1,4 +1,5 @@
 import { FieldDefinition } from './base'
+import type { SchemaProvide } from '../types'
 import type { SchemaDefinition } from '../schema'
 
 export class ListFieldDefinition extends FieldDefinition<Record<string, unknown>[]> {
@@ -6,7 +7,7 @@ export class ListFieldDefinition extends FieldDefinition<Record<string, unknown>
     super('list', 'array', attrs)
   }
 
-  itemSchema(schema: SchemaDefinition<any>): this {
+  itemSchema(schema: SchemaProvide): this {
     this._config.attrs = { ...this._config.attrs, itemSchema: schema }
     return this
   }
@@ -25,8 +26,29 @@ export class ListFieldDefinition extends FieldDefinition<Record<string, unknown>
     this._config.validations = [...this._config.validations, { rule: 'maxItems', params: { value: n } }]
     return this
   }
+
+  events(events: Record<string, unknown>): this {
+    this._config.attrs = { ...this._config.attrs, events }
+    return this
+  }
+
+  hooks(hooks: Record<string, unknown>): this {
+    this._config.attrs = { ...this._config.attrs, hooks }
+    return this
+  }
+
+  handlers(handlers: Record<string, unknown>): this {
+    this._config.attrs = { ...this._config.attrs, handlers }
+    return this
+  }
 }
 
-export function list(attrs?: Record<string, unknown>): ListFieldDefinition {
-  return new ListFieldDefinition(attrs)
+export function list(schema?: SchemaDefinition<any> | Record<string, unknown>): ListFieldDefinition {
+  if (schema && 'provide' in schema && typeof (schema as SchemaDefinition<any>).provide === 'function') {
+    const field = new ListFieldDefinition()
+    // call provide() so the stored value is plain data that survives deep cloning in toConfig()
+    field.itemSchema((schema as SchemaDefinition<any>).provide())
+    return field
+  }
+  return new ListFieldDefinition(schema as Record<string, unknown> | undefined)
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 9f5d660..4076994 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -32,7 +32,7 @@ export { isScopePermitted, isActionPermitted } from './permission'
 
 export { buildInitialState, isInScope } from './scope'
 
-export { Position, Scope } from './types'
+export { Position, Scope, FetchType } from './types'
 
 export { ptBR } from './locales/pt-BR'
 
@@ -62,6 +62,7 @@ export type {
   HandlerContext,
   BootstrapHookContext,
   BootstrapHookFn,
+  FetchTypeValue,
   FetchHookContext,
   FetchHookFn,
   SchemaHooks,
diff --git a/packages/core/src/locales/pt-BR.ts b/packages/core/src/locales/pt-BR.ts
index 096da0b..9ee06d8 100644
--- a/packages/core/src/locales/pt-BR.ts
+++ b/packages/core/src/locales/pt-BR.ts
@@ -10,10 +10,13 @@ export const ptBR = {
       destroy: "Excluir",
       "create.invalid": "Corrija os erros antes de enviar",
       "create.success": "Registro criado com sucesso",
+      "create.error": "Erro ao criar registro",
       "update.invalid": "Corrija os erros antes de enviar",
       "update.success": "Registro atualizado com sucesso",
-      "destroy.confirm": "Deseja realmente excluir este registro?",
+      "update.error": "Erro ao atualizar registro",
+      "destroy.confirm": "Tem certeza que deseja excluir este registro? Esta ação não pode ser desfeita.",
       "destroy.success": "Registro excluído com sucesso",
+      "destroy.error": "Erro ao excluir registro",
     },
     table: {
       columns: "Colunas",
@@ -25,7 +28,7 @@ export const ptBR = {
       actions: "Ações",
       recordsPerPage: "Registros por página",
     },
-    dialog: { confirm: "Confirmar", cancel: "Cancelar", ok: "OK", alert: "Alerta" },
+    dialog: { confirm: "Confirmar", confirmDestructiveTitle: "Confirmar exclusão", cancel: "Cancelar", ok: "OK", alert: "Alerta" },
     scopes: { index: "Listagem", add: "Cadastro", view: "Visualização", edit: "Edição" },
     forbidden: "Acesso não permitido",
   },
diff --git a/packages/core/src/mock.ts b/packages/core/src/mock.ts
index 741ef42..ea466db 100644
--- a/packages/core/src/mock.ts
+++ b/packages/core/src/mock.ts
@@ -74,6 +74,7 @@ export function createMockContext<F extends Record<string, FieldDefinition>> (
       push: fn(),
       back: fn(),
       replace: fn(),
+      open: fn(),
     },
     dialog: {
       confirm: fn(async () => true),
@@ -97,6 +98,7 @@ export function createMockContext<F extends Record<string, FieldDefinition>> (
     valid: true,
     validate: fn(() => true),
     reset: fn(),
+    setErrors: fn(),
   }
 
   const table: TableContract = {
diff --git a/packages/core/src/schema.ts b/packages/core/src/schema.ts
index 1764436..fadc841 100644
--- a/packages/core/src/schema.ts
+++ b/packages/core/src/schema.ts
@@ -45,7 +45,6 @@ type SchemaHandlers<F extends Record<string, FieldDefinition>> =
 
 type HookBootstrapContext<F extends Record<string, FieldDefinition>> = {
   context: Record<string, unknown>
-  hydrate(data: Record<string, unknown>): void
   schema: { [K in keyof F]: FieldProxy }
   component: ComponentContract
 }
@@ -53,12 +52,11 @@ type HookBootstrapContext<F extends Record<string, FieldDefinition>> = {
 type HookBootstrapFn<F extends Record<string, FieldDefinition>> =
   (ctx: HookBootstrapContext<F>) => void | Promise<void>
 
-type HookFetchContext = {
-  params: PaginateParams
-  component: ComponentContract
-}
+type HookFetchContext =
+  | { type: 'record'; context: Record<string, unknown>; params: PaginateParams; hydrate(data: Record<string, unknown>): void; component: ComponentContract }
+  | { type: 'collection'; context: Record<string, unknown>; params: PaginateParams; hydrate(result: PaginatedResult<Record<string, unknown>>): void; component: ComponentContract }
 
-type HookFetchFn = (ctx: HookFetchContext) => Promise<PaginatedResult<Record<string, unknown>>>
+type HookFetchFn = (ctx: HookFetchContext) => void | Promise<void>
 
 type SchemaHooks<F extends Record<string, FieldDefinition>> = {
   bootstrap?: Partial<Record<ScopeValue, HookBootstrapFn<F>>>
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index c6a2482..f7da96b 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -3,6 +3,7 @@ export const Position = {
   footer: "footer",
   floating: "floating",
   row: "row",
+  header: "header",
 } as const;
 
 export type PositionValue = typeof Position[keyof typeof Position]
@@ -14,7 +15,7 @@ export const Scope = {
   edit: "edit",
 } as const;
 
-export type ScopeValue = typeof Scope[keyof typeof Scope]
+export type ScopeValue = typeof Scope[keyof typeof Scope] | string;
 
 export interface FormConfig {
   width: number;
@@ -96,10 +97,12 @@ export interface NavigatorContract {
   back (): void;
 
   replace (path: string, params?: Record<string, unknown>): void;
+
+  open (route: ScopeRoute, params?: Record<string, unknown>): void;
 }
 
 export interface DialogContract {
-  confirm (message: string): Promise<boolean>;
+  confirm (message: string, options?: { destructive?: boolean }): Promise<boolean>;
 
   alert (message: string): Promise<void>;
 }
@@ -128,6 +131,8 @@ export interface FormContract {
   validate (): boolean;
 
   reset (values?: Record<string, unknown>): void;
+
+  setErrors (errors: Record<string, string[]>): void;
 }
 
 export interface ComponentContract {
@@ -184,23 +189,41 @@ export interface HandlerContext {
   component: ComponentContract
   form?: FormContract
   table?: TableContract
+  value?: unknown
 }
 
-export interface BootstrapHookContext {
+export interface BootstrapHookContext<_T = Record<string, unknown>> {
   context: Record<string, unknown>
-  hydrate(data: Record<string, unknown>): void
   schema: Record<string, FieldProxy>
   component: ComponentContract
 }
 
-export type BootstrapHookFn = (ctx: BootstrapHookContext) => void | Promise<void>
-
-export interface FetchHookContext {
-  params: PaginateParams
-  component: ComponentContract
-}
-
-export type FetchHookFn = (ctx: FetchHookContext) => Promise<PaginatedResult<Record<string, unknown>>>
+export type BootstrapHookFn<_T = Record<string, unknown>> = (ctx: BootstrapHookContext) => void | Promise<void>
+
+export const FetchType = {
+  record: 'record',
+  collection: 'collection',
+} as const
+
+export type FetchTypeValue = typeof FetchType[keyof typeof FetchType]
+
+export type FetchHookContext<T = Record<string, unknown>> =
+  | {
+      type: 'record'
+      context: Record<string, unknown>
+      params: PaginateParams
+      hydrate(data: T): void
+      component: ComponentContract
+    }
+  | {
+      type: 'collection'
+      context: Record<string, unknown>
+      params: PaginateParams
+      hydrate(result: PaginatedResult<T>): void
+      component: ComponentContract
+    }
+
+export type FetchHookFn<T = Record<string, unknown>> = (ctx: FetchHookContext<T>) => void | Promise<void>
 
 export interface SchemaHooks {
   bootstrap?: Partial<Record<ScopeValue, BootstrapHookFn>>
diff --git a/packages/demo/src/settings/hooks.ts b/packages/demo/src/settings/hooks.ts
index 63cf0d9..c96f928 100644
--- a/packages/demo/src/settings/hooks.ts
+++ b/packages/demo/src/settings/hooks.ts
@@ -1,27 +1,36 @@
-import type { ServiceContract, BootstrapHookContext, FetchHookContext } from "@ybyra/core";
-import { Scope } from "@ybyra/core";
+import { type BootstrapHookContext, type FetchHookContext, FetchType, Scope, type ServiceContract } from '@ybyra/core'
 
 export function createDefault (service: ServiceContract) {
   return {
     bootstrap: {
-      async [Scope.view] ({ context, schema, hydrate }: BootstrapHookContext) {
-        if (!context.id) return;
-        const data = await service.read(context.id as string);
-        hydrate(data);
+      async [Scope.view] ({ schema }: BootstrapHookContext) {
         for (const field of Object.values(schema)) {
-          field.disabled = true;
+          field.disabled = true
         }
       },
-      async [Scope.edit] ({ context, hydrate }: BootstrapHookContext) {
-        if (!context.id) return;
-        const data = await service.read(context.id as string);
-        hydrate(data);
-      },
     },
     fetch: {
-      async [Scope.index] ({ params }: FetchHookContext) {
-        return service.paginate(params);
+      async [Scope.view] (context: FetchHookContext) {
+        if (context.type !== FetchType.record || !context.context.id) {
+          return
+        }
+        const data = await service.read(context.context.id as string)
+        context.hydrate(data)
+      },
+      async [Scope.edit] (context: FetchHookContext) {
+        if (context.type !== FetchType.record || !context.context.id) {
+          return
+        }
+        const data = await service.read(context.context.id as string)
+        context.hydrate(data)
+      },
+      async [Scope.index] (context: FetchHookContext) {
+        if (context.type !== FetchType.collection) {
+          return
+        }
+        const result = await service.paginate(context.params)
+        context.hydrate(result)
       },
     },
-  };
+  }
 }
\ No newline at end of file
diff --git a/packages/react-web/src/components/DataPage.tsx b/packages/react-web/src/components/DataPage.tsx
index 36bf5cd..159bb94 100644
--- a/packages/react-web/src/components/DataPage.tsx
+++ b/packages/react-web/src/components/DataPage.tsx
@@ -1,10 +1,12 @@
-import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import type { ScopeValue } from "@ybyra/core";
-import { isScopePermitted } from "@ybyra/core";
-import { useTheme } from "../theme/context";
-import type { Theme } from "../theme/default";
-import { Icon } from "../support/Icon";
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ScopeValue } from '@ybyra/core'
+import { isScopePermitted } from '@ybyra/core'
+import { useTheme } from '../theme/context'
+import type { Theme } from '../theme/default'
+import { Icon } from '../support/Icon'
+import { PageActionsContext, usePageActionsState } from './PageActionsContext'
 
 interface PageProps {
   domain: string;
@@ -14,28 +16,78 @@ interface PageProps {
   permissions?: string[];
   forbidden?: ReactNode;
   children: ReactNode;
+  /** @deprecated use layout="flat" instead */
+  bare?: boolean;
+  layout?: 'card' | 'flat';
+  title?: string;
+  subtitle?: string;
+  headerEnd?: ReactNode;
 }
 
-export function DataPage({ domain, scope, maxWidth = 960, loading, permissions, forbidden, children }: PageProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const styles = createStyles(theme);
-  const permitted = !permissions || isScopePermitted(domain, scope, permissions);
+export function DataPage (props: PageProps) {
+  const {
+    domain,
+    scope,
+    maxWidth = 960,
+    loading,
+    permissions,
+    forbidden,
+    bare,
+    layout = 'card',
+    title,
+    subtitle,
+    headerEnd,
+    children
+  } = props
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const styles = createStyles(theme)
+  const permitted = !permissions || isScopePermitted(domain, scope, permissions)
+  const { node: registeredActions, register } = usePageActionsState()
+  const contextValue = useMemo(() => ({ register }), [register])
 
   if (loading) {
     return (
       <div style={styles.loading}>Loading...</div>
-    );
+    )
   }
 
   if (!permitted) {
-    if (forbidden) return <>{forbidden}</>;
+    if (forbidden) return <>{forbidden}</>
     return (
       <div style={styles.forbidden}>
-        <Icon name="shield-off" size={32} color={theme.colors.mutedForeground} />
-        <div style={styles.forbiddenText}>{t("common.forbidden")}</div>
+        <Icon
+          name="shield-off"
+          size={32}
+          color={theme.colors.mutedForeground}
+        />
+        <div style={styles.forbiddenText}>{t('common.forbidden')}</div>
       </div>
-    );
+    )
+  }
+
+  if (bare || layout === 'flat') {
+    const resolvedTitle = title ?? t(`${domain}.title`)
+    if (layout !== 'flat' && bare) {
+      return <>{children}</>
+    }
+    const resolvedHeaderEnd = headerEnd ?? registeredActions
+    return (
+      <PageActionsContext.Provider value={contextValue}>
+        <div style={styles.flatScroll}>
+          <div style={{ ...styles.flatContainer, maxWidth }}>
+            <div style={styles.flatHeader}>
+              <div>
+                <div style={styles.flatTitle}>{resolvedTitle}</div>
+                {subtitle && <div style={styles.flatSubtitle}>{subtitle}</div>}
+              </div>
+              {resolvedHeaderEnd && <div style={styles.flatHeaderEnd}>{resolvedHeaderEnd}</div>}
+            </div>
+            {children}
+          </div>
+        </div>
+      </PageActionsContext.Provider>
+    )
   }
 
   return (
@@ -45,23 +97,23 @@ export function DataPage({ domain, scope, maxWidth = 960, loading, permissions,
         {children}
       </div>
     </div>
-  );
+  )
 }
 
 const createStyles = (theme: Theme) => ({
   scroll: {
-    minHeight: "100vh",
+    minHeight: '100vh',
     backgroundColor: theme.colors.background,
     padding: theme.spacing.xl,
     paddingTop: 60,
   },
   container: {
-    width: "100%",
-    margin: "0 auto",
+    width: '100%',
+    margin: '0 auto',
     backgroundColor: theme.colors.card,
     borderRadius: theme.borderRadius.lg,
     padding: theme.spacing.xxl,
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
   },
   title: {
     fontSize: theme.fontSize.xxl,
@@ -69,23 +121,54 @@ const createStyles = (theme: Theme) => ({
     marginBottom: theme.spacing.xxl,
     color: theme.colors.foreground,
   },
+  flatScroll: {
+    // No minHeight/backgroundColor/padding — host app controls layout
+  },
+  flatContainer: {
+    width: '100%',
+    margin: '0 auto',
+  },
+  flatHeader: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing.xxl,
+    gap: theme.spacing.md,
+  },
+  flatTitle: {
+    fontSize: theme.fontSize.xxl,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.colors.foreground,
+    lineHeight: '1.2',
+  },
+  flatSubtitle: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.mutedForeground,
+    marginTop: theme.spacing.xs,
+  },
+  flatHeaderEnd: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing.md,
+    flexShrink: 0,
+  },
   loading: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    minHeight: "100vh",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
     color: theme.colors.mutedForeground,
   },
   forbidden: {
-    display: "flex",
-    flexDirection: "column" as const,
-    justifyContent: "center",
-    alignItems: "center",
-    minHeight: "100vh",
+    display: 'flex',
+    flexDirection: 'column' as const,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
     gap: 8,
   },
   forbiddenText: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.mutedForeground,
   },
-});
+})
diff --git a/packages/react-web/src/components/Dialog.tsx b/packages/react-web/src/components/Dialog.tsx
index 29ec835..d3c85ac 100644
--- a/packages/react-web/src/components/Dialog.tsx
+++ b/packages/react-web/src/components/Dialog.tsx
@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import type { DialogContract } from "@ybyra/core";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
+import { getComponent } from "./registry";
+import type { DialogButtonProps } from "../types";
 
 type DialogType = "confirm" | "alert";
 
@@ -11,10 +13,28 @@ interface DialogState {
   visible: boolean;
   type: DialogType;
   message: string;
+  options?: { destructive?: boolean };
 }
 
 const DialogContext = createContext<DialogContract | null>(null);
 
+function DefaultDialogButton({ label, variant, onClick }: DialogButtonProps) {
+  const theme = useTheme();
+  const styles = createStyles(theme);
+  const style = variant === "cancel"
+    ? styles.cancelButton
+    : {
+        ...styles.okButton,
+        backgroundColor: variant === "destructive" ? theme.colors.destructive : theme.colors.primary,
+      };
+
+  return (
+    <button type="button" style={style} onClick={onClick}>
+      {label}
+    </button>
+  );
+}
+
 export function DialogProvider({ children }: { children: React.ReactNode }) {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -31,25 +51,30 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
     resolveRef.current = null;
   }, []);
 
-  const show = useCallback((type: DialogType, message: string): Promise<boolean> => {
+  const show = useCallback((type: DialogType, message: string, options?: { destructive?: boolean }): Promise<boolean> => {
     return new Promise((resolve) => {
       resolveRef.current = resolve;
-      setDialog({ visible: true, type, message });
+      setDialog({ visible: true, type, message, options });
     });
   }, []);
 
   const contract: DialogContract = {
-    confirm: (message: string) => show("confirm", message),
+    confirm: (message: string, options?: { destructive?: boolean }) => show("confirm", message, options),
     async alert(message: string) {
       await show("alert", message);
     },
   };
 
-  const title = dialog.type === "confirm"
-    ? t("common.dialog.confirm")
-    : t("common.dialog.alert");
+  const isDestructive = dialog.type === "confirm" && dialog.options?.destructive;
+
+  const title = isDestructive
+    ? t("common.dialog.confirmDestructiveTitle")
+    : dialog.type === "confirm"
+      ? t("common.dialog.confirm")
+      : t("common.dialog.alert");
 
   const styles = createStyles(theme);
+  const DialogBtn = getComponent("DialogButton") ?? DefaultDialogButton;
 
   return (
     <DialogContext.Provider value={contract}>
@@ -61,21 +86,17 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
             <div style={styles.message}>{t(dialog.message)}</div>
             <div style={styles.actions}>
               {dialog.type === "confirm" && (
-                <button
-                  type="button"
-                  style={styles.cancelButton}
+                <DialogBtn
+                  label={t("common.dialog.cancel")}
+                  variant="cancel"
                   onClick={() => close(false)}
-                >
-                  {t("common.dialog.cancel")}
-                </button>
+                />
               )}
-              <button
-                type="button"
-                style={styles.okButton}
+              <DialogBtn
+                label={isDestructive ? t("common.actions.destroy") : t("common.dialog.ok")}
+                variant={isDestructive ? "destructive" : "default"}
                 onClick={() => close(true)}
-              >
-                {t("common.dialog.ok")}
-              </button>
+              />
             </div>
           </div>
         </div>,
diff --git a/packages/react-web/src/components/Form.tsx b/packages/react-web/src/components/Form.tsx
index d6bd866..94f77d0 100644
--- a/packages/react-web/src/components/Form.tsx
+++ b/packages/react-web/src/components/Form.tsx
@@ -1,18 +1,19 @@
-import { useCallback } from "react";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useDataForm } from "@ybyra/react";
-import type { UseDataFormOptions } from "@ybyra/react";
-import { fill, createFiller } from "@ybyra/core";
-import type { FillerRegistry } from "@ybyra/core";
-import { useTheme } from "../theme/context";
-import type { Theme } from "../theme/default";
-import { ActionBar } from "./ActionBar";
-import { FieldsGrid as DefaultFieldsGrid } from "./defaults/FieldsGrid";
-import { DebugPanel } from "./defaults/DebugPanel";
-import { ds } from "../support/ds";
-import type { DataFormComponents, SlotRendererProps } from "../types";
-import "../renderers";
+import React, { useCallback, useLayoutEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { UseDataFormOptions } from '@ybyra/react'
+import { useDataForm } from '@ybyra/react'
+import type { FillerRegistry } from '@ybyra/core'
+import { createFiller, fill, Position } from '@ybyra/core'
+import { useTheme } from '../theme/context'
+import type { Theme } from '../theme/default'
+import { ActionBar as DefaultActionBar, ActionButton as DefaultActionButton } from './ActionBar'
+import { FieldsGrid as DefaultFieldsGrid } from './defaults/FieldsGrid'
+import { DebugPanel } from './defaults/DebugPanel'
+import { ds } from '../support/ds'
+import type { DataFormComponents, SlotRendererProps } from '../types'
+import { usePageActions } from './PageActionsContext'
+import { getComponent } from './registry'
+import '../renderers'
 
 interface DataFormProps extends UseDataFormOptions {
   debug?: boolean;
@@ -21,29 +22,47 @@ interface DataFormProps extends UseDataFormOptions {
   slots?: Record<string, React.ComponentType<SlotRendererProps>>;
 }
 
-export function DataForm({ debug, components, filler, slots, ...props }: DataFormProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const form = useDataForm({ ...props, translate: props.translate ?? t });
-  const styles = createStyles(theme);
-  const ResolvedActionBar = components?.ActionBar ?? ActionBar;
-  const ResolvedFieldsGrid = components?.FieldsGrid ?? DefaultFieldsGrid;
-  const ResolvedLoading = components?.Loading;
+export function DataForm ({ debug, components, filler, slots, ...props }: DataFormProps) {
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const form = useDataForm({ ...props, translate: props.translate ?? t })
+  const styles = createStyles(theme)
+  const ResolvedActionBar = components?.ActionBar ?? getComponent('ActionBar') ?? DefaultActionBar
+  const ResolvedActionButton = components?.ActionButton ?? getComponent('ActionButton') ?? DefaultActionButton
+  const ResolvedFieldsGrid = components?.FieldsGrid ?? getComponent('FieldsGrid') ?? DefaultFieldsGrid
+  const ResolvedLoading = components?.Loading ?? getComponent('Loading')
+  const pageActions = usePageActions()
+
+  useLayoutEffect(() => {
+    if (!pageActions) return
+    const headerActions = form.actions.filter((a) => a.config.positions.includes(Position.header))
+    if (headerActions.length === 0) return
+    pageActions.register(
+      <div style={{ display: 'flex', gap: 8 }}>
+        {headerActions.map((a) => <ResolvedActionButton
+          key={a.name}
+          action={a}
+          domain={props.schema.domain}
+        />)}
+      </div>
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageActions, props.schema.domain])
 
   const handleFill = useCallback(() => {
-    const fillerFn = filler ? createFiller(filler) : fill;
-    form.setValues(fillerFn(props.schema.fields, props.schema.identity));
-  }, [filler, form, props.schema]);
+    const fillerFn = filler ? createFiller(filler) : fill
+    form.setValues(fillerFn(props.schema.fields, props.schema.identity))
+  }, [filler, form, props.schema])
 
   if (form.loading) {
-    if (ResolvedLoading) return <ResolvedLoading />;
+    if (ResolvedLoading) return <ResolvedLoading />
     return (
       <div style={styles.loadingContainer}>Loading...</div>
-    );
+    )
   }
 
   return (
-    <div {...ds("DataForm")}>
+    <div {...ds('DataForm')}>
       <ResolvedActionBar
         actions={form.actions}
         position="top"
@@ -51,9 +70,9 @@ export function DataForm({ debug, components, filler, slots, ...props }: DataFor
       />
 
       {form.sections.map((section, index) => {
-        if (section.kind === "group") {
+        if (section.kind === 'group') {
           if (components?.GroupWrapper) {
-            const GroupWrapper = components.GroupWrapper;
+            const GroupWrapper = components.GroupWrapper
             return (
               <GroupWrapper
                 key={section.name}
@@ -66,7 +85,7 @@ export function DataForm({ debug, components, filler, slots, ...props }: DataFor
                   slots={slots}
                 />
               </GroupWrapper>
-            );
+            )
           }
           return (
             <div
@@ -83,13 +102,13 @@ export function DataForm({ debug, components, filler, slots, ...props }: DataFor
                 slots={slots}
               />
             </div>
-          );
+          )
         }
         return (
           <div
             key={`ungrouped-${index}`}
             style={styles.group}
-            {...ds("ungrouped")}
+            {...ds('ungrouped')}
           >
             <ResolvedFieldsGrid
               fields={section.fields}
@@ -97,7 +116,7 @@ export function DataForm({ debug, components, filler, slots, ...props }: DataFor
               slots={slots}
             />
           </div>
-        );
+        )
       })}
 
       {components?.Divider
@@ -119,26 +138,27 @@ export function DataForm({ debug, components, filler, slots, ...props }: DataFor
       {debug && (
         <DebugPanel
           actions={[
-            { icon: "zap", color: theme.colors.warning, onPress: handleFill },
-            { icon: "rotate-ccw", color: theme.colors.mutedForeground, onPress: () => form.reset() },
-            { icon: "check", color: theme.colors.success, onPress: () => form.validate() },
-            { icon: "refresh-cw", color: theme.colors.info, onPress: () => window.location.reload() },
+            { icon: 'zap', color: theme.colors.warning, onPress: handleFill },
+            { icon: 'rotate-ccw', color: theme.colors.mutedForeground, onPress: () => form.reset() },
+            { icon: 'check', color: theme.colors.success, onPress: () => form.validate() },
+            { icon: 'refresh-cw', color: theme.colors.info, onPress: () => window.location.reload() },
           ]}
           entries={[
-            { title: "State", content: JSON.stringify(form.state, null, 2) },
-            { title: "Errors", content: JSON.stringify(form.errors, null, 2) },
+            { title: 'State', content: JSON.stringify(form.state, null, 2) },
+            { title: 'Errors', content: JSON.stringify(form.errors, null, 2) },
+            { title: 'Schema', content: JSON.stringify(props.schema, null, 2), collapsed: true },
           ]}
           meta={`dirty: ${String(form.dirty)} | valid: ${String(form.valid)}`}
         />
       )}
     </div>
-  );
+  )
 }
 
 const createStyles = (theme: Theme) => ({
   loadingContainer: {
     padding: `${theme.spacing.xxl}px 0`,
-    textAlign: "center" as const,
+    textAlign: 'center' as const,
     color: theme.colors.mutedForeground,
   },
   group: {
@@ -156,4 +176,4 @@ const createStyles = (theme: Theme) => ({
     backgroundColor: theme.colors.border,
     margin: `${theme.spacing.xl}px 0`,
   },
-});
+})
diff --git a/packages/react-web/src/components/PageActionsContext.tsx b/packages/react-web/src/components/PageActionsContext.tsx
new file mode 100644
index 0000000..912bdd8
--- /dev/null
+++ b/packages/react-web/src/components/PageActionsContext.tsx
@@ -0,0 +1,25 @@
+import { createContext, useContext, useState, useRef, useCallback } from "react";
+import type { ReactNode } from "react";
+
+interface PageActionsContextValue {
+  register: (node: ReactNode) => void;
+}
+
+export const PageActionsContext = createContext<PageActionsContextValue | null>(null);
+
+export function usePageActions() {
+  return useContext(PageActionsContext);
+}
+
+export function usePageActionsState() {
+  const [node, setNode] = useState<ReactNode>(null);
+  const registeredRef = useRef(false);
+
+  const register = useCallback((newNode: ReactNode) => {
+    if (registeredRef.current) return;
+    registeredRef.current = true;
+    setNode(newNode);
+  }, []);
+
+  return { node, register };
+}
diff --git a/packages/react-web/src/components/Table.tsx b/packages/react-web/src/components/Table.tsx
index 6a8afa9..d0e3279 100644
--- a/packages/react-web/src/components/Table.tsx
+++ b/packages/react-web/src/components/Table.tsx
@@ -1,30 +1,50 @@
-import { useTranslation } from "react-i18next";
-import { useDataTable, resolveActionLabel, resolveActionIcon } from "@ybyra/react";
-import type { UseDataTableOptions, ResolvedAction, ResolvedColumn } from "@ybyra/react";
-import { useTheme } from "../theme/context";
-import type { Theme } from "../theme/default";
-import { ActionBar, ActionButton } from "./ActionBar";
-import { Pagination as DefaultPagination } from "./defaults/Pagination";
-import { ColumnSelector as DefaultColumnSelector } from "./defaults/ColumnSelector";
-import { EmptyState as DefaultEmptyState } from "./defaults/EmptyState";
-import { DebugPanel } from "./defaults/DebugPanel";
-import { Icon } from "../support/Icon";
-import { ds } from "../support/ds";
-import type { DataTableComponents, RowActionProps } from "../types";
-import "../renderers";
+import type React from 'react'
+import { useLayoutEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ResolvedColumn, UseDataTableOptions } from '@ybyra/react'
+import { resolveActionIcon, resolveActionLabel, useDataTable } from '@ybyra/react'
+import type { ActionConfig } from '@ybyra/core'
+import { Position } from '@ybyra/core'
+import { useTheme } from '../theme/context'
+import type { Theme } from '../theme/default'
+import { ActionBar as DefaultActionBar, ActionButton as DefaultActionButton } from './ActionBar'
+import { Pagination as DefaultPagination } from './defaults/Pagination'
+import { ColumnSelector as DefaultColumnSelector } from './defaults/ColumnSelector'
+import { EmptyState as DefaultEmptyState } from './defaults/EmptyState'
+import { DebugPanel } from './defaults/DebugPanel'
+import { Icon } from '../support/Icon'
+import { ds } from '../support/ds'
+import type {
+  DataTableComponents,
+  DataTableEmptyStateInput,
+  EmptyStateProps,
+  RowActionProps,
+  SearchBarProps
+} from '../types'
+import { usePageActions } from './PageActionsContext'
+import { getComponent } from './registry'
+import { resolveFieldLabel } from '../support/i18n'
+import '../renderers'
 
 interface DataTableProps extends UseDataTableOptions {
   debug?: boolean;
   components?: DataTableComponents;
+  selectable?: boolean;
+  actionsPosition?: 'start' | 'end';
+  showColumnSelector?: boolean;
+  showTopActions?: boolean;
+  searchSlot?: React.ReactNode;
+  emptyState?: DataTableEmptyStateInput;
+  value?: Record<string, unknown>[]
 }
 
-function DefaultRowAction({ action, domain }: RowActionProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const color = action.config.variant === "destructive"
+function DefaultRowAction ({ action, domain }: RowActionProps) {
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const color = action.config.variant === 'destructive'
     ? theme.colors.destructive
-    : theme.colors.mutedForeground;
-  const icon = resolveActionIcon(domain, action.name) as string | undefined;
+    : theme.colors.mutedForeground
+  const icon = resolveActionIcon(domain, action.name) as string | undefined
 
   return (
     <button
@@ -32,79 +52,128 @@ function DefaultRowAction({ action, domain }: RowActionProps) {
       style={{
         padding: 6,
         borderRadius: 6,
-        border: "none",
-        background: "none",
-        cursor: "pointer",
-        display: "inline-flex",
-        alignItems: "center",
+        border: 'none',
+        background: 'none',
+        cursor: 'pointer',
+        display: 'inline-flex',
+        alignItems: 'center',
       }}
       onClick={action.execute}
       {...ds(`row-action:${action.name}`)}
     >
       {icon
-        ? <Icon name={icon} size={14} color={color} />
+        ? <Icon
+          name={icon}
+          size={14}
+          color={color}
+        />
         : <span style={{ fontSize: 12, color }}>{resolveActionLabel(t, domain, action.name)}</span>}
     </button>
-  );
+  )
 }
 
-function SortIcon({ field, sortField, sortOrder }: { field: string; sortField?: string; sortOrder?: string }) {
-  const theme = useTheme();
-  if (sortField !== field) return null;
+function SortIcon ({ field, sortField, sortOrder }: { field: string; sortField?: string; sortOrder?: string }) {
+  const theme = useTheme()
+  if (sortField !== field) return null
   return (
     <Icon
-      name={sortOrder === "asc" ? "chevron-up" : "chevron-down"}
+      name={sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'}
       size={12}
       color={theme.colors.primary}
       style={{ marginLeft: 4 }}
     />
-  );
+  )
 }
 
-function columnWidth(col: ResolvedColumn, display?: string | ((r: Record<string, unknown>) => string)): React.CSSProperties {
-  if (typeof col.table.width === "number") return { width: col.table.width };
-  if (col.table.width === "auto" && col.name === display) return { minWidth: 150 };
-  return { width: 150 };
+function columnWidth (col: ResolvedColumn, display?: string | ((r: Record<string, unknown>) => string)): React.CSSProperties {
+  if (typeof col.table.width === 'number') return { width: col.table.width }
+  if (col.table.width === 'auto' && col.name === display) return { minWidth: 150 }
+  return { width: 150 }
 }
 
-function TableContent({ table, domain, display, components }: {
+function TableContent ({ table, domain, display, components, selectable, actionsPosition, emptyState }: {
   table: ReturnType<typeof useDataTable>;
   domain: string;
   display?: string | ((r: Record<string, unknown>) => string);
   components?: DataTableComponents;
+  selectable: boolean;
+  actionsPosition: 'start' | 'end';
+  emptyState?: EmptyStateProps;
 }) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const styles = createStyles(theme);
-  const { columns, rows, loading, empty, sortField, sortOrder, setSort, isSelected, toggleSelect, selectAll, clearSelection, selected, formatValue, getIdentity, getRowActions } = table;
+  const { t, i18n } = useTranslation()
+  const theme = useTheme()
+  const styles = createStyles(theme)
+  const {
+    columns,
+    rows,
+    loading,
+    empty,
+    sortField,
+    sortOrder,
+    setSort,
+    isSelected,
+    toggleSelect,
+    selectAll,
+    clearSelection,
+    selected,
+    formatValue,
+    getIdentity,
+    getRowActions
+  } = table
+
+  const allSelected = rows.length > 0 && selected.length === rows.length
+  const RowAction = components?.RowAction ?? getComponent('RowAction') ?? DefaultRowAction
+  const LoadingComponent = components?.Loading ?? getComponent('Loading')
+  const EmptyComponent = components?.EmptyState ?? getComponent('EmptyState') ?? DefaultEmptyState
 
-  const allSelected = rows.length > 0 && selected.length === rows.length;
-  const RowAction = components?.RowAction ?? DefaultRowAction;
-  const LoadingComponent = components?.Loading;
-  const EmptyComponent = components?.EmptyState ?? DefaultEmptyState;
+  const actionsHeaderCell = (
+    <th style={styles.actionsHeaderCell}>
+      <span style={styles.headerText}>{t('common.table.actions')}</span>
+    </th>
+  )
+
+  const actionsDataCell = (row: Record<string, unknown>) => {
+    const rowActions = getRowActions(row)
+    return (
+      <td style={styles.rowActionsCell}>
+        {rowActions.map((a) => <RowAction
+          key={a.name}
+          action={a}
+          domain={domain}
+        />)}
+      </td>
+    )
+  }
 
   return (
     <div style={styles.tableScroll}>
-      <table style={styles.table} {...ds("table")}>
+      <table style={styles.table} {...ds('table')}>
         <thead>
           <tr style={styles.headerRow}>
-            <th style={styles.checkboxCell}>
-              <button
-                type="button"
-                style={styles.checkboxButton}
-                onClick={() => allSelected ? clearSelection() : selectAll()}
-              >
-                <Icon name={allSelected ? "check-square" : "square"} size={16} color={theme.colors.foreground} />
-              </button>
-            </th>
-            <th style={styles.actionsHeaderCell}>
-              <span style={styles.headerText}>{t("common.table.actions")}</span>
-            </th>
+            {selectable && (
+              <th style={styles.checkboxCell}>
+                <button
+                  type="button"
+                  style={styles.checkboxButton}
+                  onClick={() => allSelected ? clearSelection() : selectAll()}
+                >
+                  <Icon
+                    name={allSelected ? 'check-square' : 'square'}
+                    size={16}
+                    color={theme.colors.foreground}
+                  />
+                </button>
+              </th>
+            )}
+            {actionsPosition === 'start' && actionsHeaderCell}
             {columns.map((col) => {
               if (components?.HeaderCell) {
-                const HeaderCell = components.HeaderCell;
+                const HeaderCell = components.HeaderCell
                 return (
-                  <th key={col.name} style={styles.headerCell}>
+                  <th
+                    key={col.name}
+                    style={styles.headerCell}
+                  >
                     <HeaderCell
                       column={col}
                       domain={domain}
@@ -113,64 +182,81 @@ function TableContent({ table, domain, display, components }: {
                       onSort={setSort}
                     />
                   </th>
-                );
+                )
               }
               return (
                 <th
                   key={col.name}
-                  style={{ ...styles.headerCell, ...columnWidth(col, display), cursor: col.table.sortable ? "pointer" : "default" }}
+                  style={{
+                    ...styles.headerCell, ...columnWidth(col, display),
+                    cursor: col.table.sortable ? 'pointer' : 'default'
+                  }}
                   onClick={() => col.table.sortable && setSort(col.name)}
                   {...ds(`header:${col.name}`)}
                 >
-                  <div style={{ display: "flex", alignItems: "center" }}>
-                    <span style={styles.headerText}>{t(`${domain}.fields.${col.name}`, { defaultValue: col.name })}</span>
-                    {col.table.sortable && <SortIcon field={col.name} sortField={sortField} sortOrder={sortOrder} />}
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <span style={styles.headerText}>{resolveFieldLabel(i18n, t, domain, col.name)}</span>
+                    {col.table.sortable && <SortIcon
+                      field={col.name}
+                      sortField={sortField}
+                      sortOrder={sortOrder}
+                    />}
                   </div>
                 </th>
-              );
+              )
             })}
+            {actionsPosition === 'end' && actionsHeaderCell}
           </tr>
         </thead>
         <tbody>
           {loading && (
             <tr>
-              <td colSpan={columns.length + 2} style={styles.loadingCell}>
-                {LoadingComponent ? <LoadingComponent /> : "Loading..."}
+              <td
+                colSpan={columns.length + (selectable ? 1 : 0) + 1}
+                style={styles.loadingCell}
+              >
+                {LoadingComponent ? <LoadingComponent /> : 'Loading...'}
               </td>
             </tr>
           )}
           {empty && (
             <tr>
-              <td colSpan={columns.length + 2}>
-                <EmptyComponent />
+              <td colSpan={columns.length + (selectable ? 1 : 0) + 1}>
+                <EmptyComponent {...(emptyState ?? {})} />
               </td>
             </tr>
           )}
           {!loading && rows.map((row) => {
-            const id = getIdentity(row);
-            const rowActions = getRowActions(row);
+            const id = getIdentity(row)
             return (
               <tr
                 key={id}
                 style={isSelected(row) ? styles.dataRowSelected : styles.dataRow}
               >
-                <td style={styles.checkboxCell}>
-                  <button
-                    type="button"
-                    style={styles.checkboxButton}
-                    onClick={() => toggleSelect(row)}
-                  >
-                    <Icon name={isSelected(row) ? "check-square" : "square"} size={16} color={theme.colors.foreground} />
-                  </button>
-                </td>
-                <td style={styles.rowActionsCell}>
-                  {rowActions.map((a) => <RowAction key={a.name} action={a} domain={domain} />)}
-                </td>
+                {selectable && (
+                  <td style={styles.checkboxCell}>
+                    <button
+                      type="button"
+                      style={styles.checkboxButton}
+                      onClick={() => toggleSelect(row)}
+                    >
+                      <Icon
+                        name={isSelected(row) ? 'check-square' : 'square'}
+                        size={16}
+                        color={theme.colors.foreground}
+                      />
+                    </button>
+                  </td>
+                )}
+                {actionsPosition === 'start' && actionsDataCell(row)}
                 {columns.map((col) => {
                   if (components?.DataCell) {
-                    const DataCell = components.DataCell;
+                    const DataCell = components.DataCell
                     return (
-                      <td key={col.name} style={{ ...styles.dataCell, ...columnWidth(col, display) }}>
+                      <td
+                        key={col.name}
+                        style={{ ...styles.dataCell, ...columnWidth(col, display) }}
+                      >
                         <DataCell
                           column={col}
                           value={row[col.name]}
@@ -178,55 +264,178 @@ function TableContent({ table, domain, display, components }: {
                           row={row}
                         />
                       </td>
-                    );
+                    )
                   }
                   return (
-                    <td key={col.name} style={{ ...styles.dataCell, ...columnWidth(col, display) }}>
+                    <td
+                      key={col.name}
+                      style={{ ...styles.dataCell, ...columnWidth(col, display) }}
+                    >
                       <span style={styles.cellText}>{formatValue(col.name, row[col.name], row)}</span>
                     </td>
-                  );
+                  )
                 })}
+                {actionsPosition === 'end' && actionsDataCell(row)}
               </tr>
-            );
+            )
           })}
         </tbody>
       </table>
     </div>
-  );
+  )
 }
 
-export function DataTable({ debug, components, ...props }: DataTableProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const domain = props.schema.domain;
-  const table = useDataTable({ ...props, translate: props.translate ?? t });
-  const styles = createStyles(theme);
+export function DataTable (dataTableProps: DataTableProps) {
+  const {
+    debug,
+    components,
+    selectable = true,
+    actionsPosition = 'start',
+    showColumnSelector = true,
+    showTopActions = true,
+    searchSlot,
+    emptyState,
+    ...props
+  } = dataTableProps
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const domain = props.schema.domain
+  const table = useDataTable({ ...props, translate: props.translate ?? t })
+  const styles = createStyles(theme)
+  const pageActions = usePageActions()
+  const ResolvedActionBar = components?.ActionBar ?? getComponent('ActionBar') ?? DefaultActionBar
+  const ResolvedActionButton = components?.ActionButton ?? getComponent('ActionButton') ?? DefaultActionButton
+  const ResolvedPagination = components?.Pagination ?? getComponent('Pagination') ?? DefaultPagination
+  const ResolvedColumnSelector = components?.ColumnSelector ?? getComponent('ColumnSelector') ?? DefaultColumnSelector
+  const ResolvedSearchBar = components?.SearchBar ?? getComponent('SearchBar') as React.ComponentType<SearchBarProps> | undefined
+  const EmptyComponent = components?.EmptyState ?? getComponent('EmptyState') ?? DefaultEmptyState
+  const [search, setSearch] = useState('')
 
-  const ResolvedActionBar = components?.ActionBar ?? ActionBar;
-  const ResolvedActionButton = components?.ActionButton ?? ActionButton;
-  const ResolvedPagination = components?.Pagination ?? DefaultPagination;
-  const ResolvedColumnSelector = components?.ColumnSelector ?? DefaultColumnSelector;
+  const resolvedEmptyState = useMemo((): EmptyStateProps | undefined => {
+    if (!emptyState) return undefined
+    const { action, ...rest } = emptyState
+    if (!action) return { ...rest }
 
-  return (
-    <div {...ds("DataTable")}>
-      <div style={styles.toolbar}>
-        <div style={styles.toolbarStart}>
-          {table.actions
-            .filter((a) => a.config.positions.includes("top"))
-            .map((a) => <ResolvedActionButton key={a.name} action={a} domain={domain} />)}
-        </div>
-        <ResolvedColumnSelector
-          availableColumns={table.availableColumns}
-          visibleColumns={table.visibleColumns}
-          toggleColumn={table.toggleColumn}
+    if (typeof action === 'string') {
+      const resolved = table.actions.find(a => a.name === action)
+      if (!resolved) return { ...rest }
+      return {
+        ...rest,
+        action: {
+          label: resolveActionLabel(t, domain, resolved.name),
+          icon: resolveActionIcon(domain, resolved.name) as string | undefined,
+          onPress: resolved.execute,
+        },
+      }
+    }
+
+    // ActionConfig → resolve por match de propriedades com table.actions
+    const config = action as ActionConfig
+    const resolved = table.actions.find(a =>
+      a.config.variant === config.variant &&
+      a.config.positions.join() === config.positions.join() &&
+      a.config.order === config.order
+    )
+    if (!resolved) return { ...rest }
+    return {
+      ...rest,
+      action: {
+        label: resolveActionLabel(t, domain, resolved.name),
+        icon: resolveActionIcon(domain, resolved.name) as string | undefined,
+        onPress: resolved.execute,
+      },
+    }
+  }, [emptyState, table.actions, domain, t])
+
+  useLayoutEffect(() => {
+    if (!pageActions) return
+    const headerActions = table.actions.filter((a) =>
+      a.config.positions.includes(Position.header) &&
+      !a.config.positions.includes(Position.row)
+    )
+    if (headerActions.length === 0) return
+    pageActions.register(
+      <div style={{ display: 'flex', gap: 8 }}>
+        {headerActions.map((a) => <ResolvedActionButton
+          key={a.name}
+          action={a}
+          domain={domain}
+        />)}
+      </div>
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageActions, domain])
+
+  if (table.empty && !table.loading) {
+    return (
+      <div {...ds('DataTable')}>
+        <ResolvedActionBar
+          actions={table.actions}
+          position="top"
+          domain={domain}
+        />
+        <EmptyComponent {...(resolvedEmptyState ?? {})} />
+        <ResolvedActionBar
+          actions={table.actions}
+          position="footer"
+          domain={domain}
+        />
+        <ResolvedActionBar
+          actions={table.actions}
+          position="floating"
           domain={domain}
         />
-        <div style={styles.toolbarEnd}>
-          {table.selected.length > 0 && (
-            <span style={styles.selectionInfo}>{t("common.table.selected", { count: table.selected.length })}</span>
+        {debug && (
+          <DebugPanel
+            actions={[{ icon: 'refresh-cw', color: theme.colors.info, onPress: () => table.reload() }]}
+            entries={[{ title: 'State', content: 'empty' }]}
+          />
+        )}
+      </div>
+    )
+  }
+
+  const hasToolbar = showTopActions || showColumnSelector || table.selected.length > 0
+
+  return (
+    <div {...ds('DataTable')}>
+      {hasToolbar && (
+        <div style={styles.toolbar}>
+          <div style={styles.toolbarStart}>
+            {showTopActions && table.actions
+              .filter((a) => a.config.positions.includes('top'))
+              .map((a) => <ResolvedActionButton
+                key={a.name}
+                action={a}
+                domain={domain}
+              />)}
+          </div>
+          {showColumnSelector && (
+            <ResolvedColumnSelector
+              availableColumns={table.availableColumns}
+              visibleColumns={table.visibleColumns}
+              toggleColumn={table.toggleColumn}
+              domain={domain}
+            />
           )}
+          <div style={styles.toolbarEnd}>
+            {table.selected.length > 0 && (
+              <span style={styles.selectionInfo}>{t('common.table.selected', { count: table.selected.length })}</span>
+            )}
+          </div>
         </div>
-      </div>
+      )}
+
+      {searchSlot
+        ? <div style={styles.searchSlot}>{searchSlot}</div>
+        : ResolvedSearchBar
+          ? <div style={styles.searchSlot}><ResolvedSearchBar
+            value={search}
+            onChange={setSearch}
+            domain={domain}
+          /></div>
+          : null
+      }
 
       <div style={styles.tableContainer}>
         <TableContent
@@ -234,6 +443,9 @@ export function DataTable({ debug, components, ...props }: DataTableProps) {
           domain={domain}
           display={props.schema.display}
           components={components}
+          selectable={selectable}
+          actionsPosition={actionsPosition}
+          emptyState={resolvedEmptyState}
         />
       </div>
 
@@ -246,46 +458,61 @@ export function DataTable({ debug, components, ...props }: DataTableProps) {
         setLimit={table.setLimit}
       />
 
-      <ResolvedActionBar actions={table.actions} position="footer" domain={domain} />
-      <ResolvedActionBar actions={table.actions} position="floating" domain={domain} />
+      <ResolvedActionBar
+        actions={table.actions}
+        position="footer"
+        domain={domain}
+      />
+      <ResolvedActionBar
+        actions={table.actions}
+        position="floating"
+        domain={domain}
+      />
 
       {debug && (
         <DebugPanel
           actions={[
-            { icon: "refresh-cw", color: theme.colors.info, onPress: () => table.reload() },
-            { icon: "x-square", color: theme.colors.mutedForeground, onPress: () => table.clearSelection() },
-            { icon: "filter", color: theme.colors.mutedForeground, onPress: () => table.clearFilters() },
+            { icon: 'refresh-cw', color: theme.colors.info, onPress: () => table.reload() },
+            { icon: 'x-square', color: theme.colors.mutedForeground, onPress: () => table.clearSelection() },
+            { icon: 'filter', color: theme.colors.mutedForeground, onPress: () => table.clearFilters() },
           ]}
           entries={[
-            { title: `Rows (${table.rows.length})`, content: JSON.stringify(table.rows.map((r) => table.getIdentity(r)), null, 2) },
-            { title: `Selected (${table.selected.length})`, content: JSON.stringify(table.selected.map((r) => table.getIdentity(r)), null, 2) },
-            { title: "Filters", content: JSON.stringify(table.filters, null, 2) },
+            {
+              title: `Rows (${table.rows.length})`,
+              content: JSON.stringify(table.rows.map((r) => table.getIdentity(r)), null, 2)
+            },
+            {
+              title: `Selected (${table.selected.length})`,
+              content: JSON.stringify(table.selected.map((r) => table.getIdentity(r)), null, 2)
+            },
+            { title: 'Filters', content: JSON.stringify(table.filters, null, 2) },
+            { title: 'Schema', content: JSON.stringify(props.schema, null, 2), collapsed: true },
           ]}
-          meta={`page: ${table.page}/${table.totalPages} | total: ${table.total} | sort: ${table.sortField ?? "none"} ${table.sortOrder ?? ""}`}
+          meta={`page: ${table.page}/${table.totalPages} | total: ${table.total} | sort: ${table.sortField ?? 'none'} ${table.sortOrder ?? ''}`}
         />
       )}
     </div>
-  );
+  )
 }
 
 const createStyles = (theme: Theme) => ({
   toolbar: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     marginBottom: theme.spacing.md,
     zIndex: 10,
     gap: theme.spacing.md,
   },
   toolbarStart: {
-    display: "flex",
-    flexWrap: "wrap" as const,
+    display: 'flex',
+    flexWrap: 'wrap' as const,
     gap: theme.spacing.md,
     flex: 1,
   },
   toolbarEnd: {
-    display: "flex",
-    justifyContent: "flex-end",
+    display: 'flex',
+    justifyContent: 'flex-end',
     flex: 1,
   },
   selectionInfo: {
@@ -293,28 +520,31 @@ const createStyles = (theme: Theme) => ({
     color: theme.colors.primary,
     fontWeight: theme.fontWeight.semibold,
   },
+  searchSlot: {
+    marginBottom: theme.spacing.md,
+  },
   tableContainer: {
     border: `1px solid ${theme.colors.border}`,
     borderRadius: theme.borderRadius.md,
-    overflow: "hidden",
+    overflow: 'hidden',
     minHeight: 500,
   },
   tableScroll: {
-    overflowX: "auto" as const,
+    overflowX: 'auto' as const,
   },
   table: {
-    width: "100%",
-    borderCollapse: "collapse" as const,
-    minWidth: "100%",
+    width: '100%',
+    borderCollapse: 'collapse' as const,
+    minWidth: '100%',
   },
   headerRow: {
     backgroundColor: theme.colors.muted,
-    borderBottom: `2px solid ${theme.colors.border}`,
+    borderBottom: `1px solid ${theme.colors.border}`,
   },
   headerCell: {
     padding: `${theme.spacing.md}px ${theme.spacing.md}px`,
-    textAlign: "left" as const,
-    userSelect: "none" as const,
+    textAlign: 'left' as const,
+    userSelect: 'none' as const,
   },
   headerText: {
     fontSize: theme.fontSize.sm,
@@ -324,21 +554,21 @@ const createStyles = (theme: Theme) => ({
   actionsHeaderCell: {
     width: 120,
     padding: `${theme.spacing.md}px ${theme.spacing.md}px`,
-    textAlign: "center" as const,
+    textAlign: 'center' as const,
   },
   checkboxCell: {
     width: 44,
-    textAlign: "center" as const,
+    textAlign: 'center' as const,
     padding: `${theme.spacing.md}px 0`,
-    verticalAlign: "middle" as const,
+    verticalAlign: 'middle' as const,
   },
   checkboxButton: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "none",
-    border: "none",
-    cursor: "pointer",
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
     padding: 0,
   },
   dataRow: {
@@ -351,23 +581,23 @@ const createStyles = (theme: Theme) => ({
   },
   dataCell: {
     padding: `${theme.spacing.md}px ${theme.spacing.md}px`,
-    verticalAlign: "middle" as const,
+    verticalAlign: 'middle' as const,
   },
   cellText: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.foreground,
-    whiteSpace: "nowrap" as const,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
+    whiteSpace: 'nowrap' as const,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
   },
   rowActionsCell: {
     width: 120,
-    textAlign: "center" as const,
-    verticalAlign: "middle" as const,
+    textAlign: 'center' as const,
+    verticalAlign: 'middle' as const,
   },
   loadingCell: {
-    textAlign: "center" as const,
+    textAlign: 'center' as const,
     padding: `${theme.spacing.xxl}px 0`,
     color: theme.colors.mutedForeground,
   },
-});
+})
diff --git a/packages/react-web/src/components/defaults/ColumnSelector.tsx b/packages/react-web/src/components/defaults/ColumnSelector.tsx
index 7978db4..c2d2df6 100644
--- a/packages/react-web/src/components/defaults/ColumnSelector.tsx
+++ b/packages/react-web/src/components/defaults/ColumnSelector.tsx
@@ -4,9 +4,10 @@ import { useTheme } from "../../theme/context";
 import type { Theme } from "../../theme/default";
 import { Icon } from "../../support/Icon";
 import type { ColumnSelectorProps } from "../../types";
+import { resolveFieldLabel } from "../../support/i18n";
 
 export function ColumnSelector({ availableColumns, visibleColumns, toggleColumn, domain }: ColumnSelectorProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
   const [open, setOpen] = useState(false);
@@ -42,7 +43,7 @@ export function ColumnSelector({ availableColumns, visibleColumns, toggleColumn,
                 onClick={() => toggleColumn(col.name)}
               >
                 <Icon name={checked ? "check-square" : "square"} size={14} color={theme.colors.foreground} />
-                <span style={styles.optionText}>{t(`${domain}.fields.${col.name}`, { defaultValue: col.name })}</span>
+                <span style={styles.optionText}>{resolveFieldLabel(i18n, t, domain, col.name)}</span>
               </button>
             );
           })}
diff --git a/packages/react-web/src/components/defaults/DebugPanel.tsx b/packages/react-web/src/components/defaults/DebugPanel.tsx
index 6f799a9..46e4ff5 100644
--- a/packages/react-web/src/components/defaults/DebugPanel.tsx
+++ b/packages/react-web/src/components/defaults/DebugPanel.tsx
@@ -13,6 +13,7 @@ interface DebugAction {
 interface DebugEntry {
   title: string;
   content: string;
+  collapsed?: boolean;
 }
 
 interface DebugPanelProps {
@@ -21,6 +22,22 @@ interface DebugPanelProps {
   meta?: string;
 }
 
+function CollapsibleEntry({ entry, styles, theme }: { entry: DebugEntry; styles: ReturnType<typeof createStyles>; theme: Theme }) {
+  const [open, setOpen] = useState(!entry.collapsed);
+  return (
+    <div>
+      <div
+        style={{ ...styles.debugTitle, cursor: "pointer", display: "flex", alignItems: "center", gap: 4 }}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <Icon name={open ? "chevron-down" : "chevron-right"} size={10} color={theme.colors.mutedForeground} />
+        {entry.title}
+      </div>
+      {open && <pre style={styles.debugText}>{entry.content}</pre>}
+    </div>
+  );
+}
+
 export function DebugPanel({ actions, entries, meta }: DebugPanelProps) {
   const theme = useTheme();
   const styles = createStyles(theme);
@@ -44,10 +61,7 @@ export function DebugPanel({ actions, entries, meta }: DebugPanelProps) {
       {expanded && (
         <>
           {entries.map((entry, i) => (
-            <div key={i}>
-              <div style={styles.debugTitle}>{entry.title}</div>
-              <pre style={styles.debugText}>{entry.content}</pre>
-            </div>
+            <CollapsibleEntry key={i} entry={entry} styles={styles} theme={theme} />
           ))}
           {meta && <div style={styles.debugMeta}>{meta}</div>}
         </>
@@ -69,7 +83,6 @@ const createStyles = (theme: Theme) => ({
     justifyContent: "space-between",
     flexWrap: "wrap" as const,
     gap: theme.spacing.sm,
-    marginBottom: theme.spacing.md,
   },
   debugActions: {
     display: "flex",
diff --git a/packages/react-web/src/components/defaults/EmptyState.tsx b/packages/react-web/src/components/defaults/EmptyState.tsx
index 4112ac1..172e8af 100644
--- a/packages/react-web/src/components/defaults/EmptyState.tsx
+++ b/packages/react-web/src/components/defaults/EmptyState.tsx
@@ -1,17 +1,44 @@
+import type { ComponentType } from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../../theme/context";
 import type { Theme } from "../../theme/default";
 import { Icon } from "../../support/Icon";
+import type { EmptyStateProps } from "../../types";
 
-export function EmptyState() {
+export function EmptyState({ icon, title, subtitle, action }: EmptyStateProps) {
   const { t } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
 
+  const resolvedTitle = title ?? t("common.table.empty");
+
+  const indicatorIconName = icon ?? "inbox";
+  const IndicatorIcon =
+    typeof indicatorIconName !== "string"
+      ? (indicatorIconName as ComponentType<{ className?: string }>)
+      : null;
+
   return (
     <div style={styles.container}>
-      <Icon name="inbox" size={32} color={theme.colors.mutedForeground} />
-      <span style={styles.text}>{t("common.table.empty")}</span>
+      {IndicatorIcon ? (
+        <IndicatorIcon />
+      ) : (
+        <Icon name={indicatorIconName as string} size={40} color={theme.colors.mutedForeground} />
+      )}
+      <span style={styles.title}>{resolvedTitle}</span>
+      {subtitle && <span style={styles.subtitle}>{subtitle}</span>}
+      {action && (
+        <button
+          type="button"
+          style={styles.actionButton}
+          onClick={action.onPress}
+        >
+          {action.icon && (
+            <Icon name={action.icon} size={16} color={theme.colors.primaryForeground} style={{ marginRight: theme.spacing.sm }} />
+          )}
+          <span style={styles.actionButtonText}>{action.label}</span>
+        </button>
+      )}
     </div>
   );
 }
@@ -21,11 +48,30 @@ const createStyles = (theme: Theme) => ({
     display: "flex",
     flexDirection: "column" as const,
     alignItems: "center",
-    padding: `${theme.spacing.xxl}px 0`,
+    padding: `${theme.spacing.xxl * 2}px 0`,
     gap: theme.spacing.sm,
   },
-  text: {
+  title: {
+    fontSize: theme.fontSize.md,
+    color: theme.colors.foreground,
+    marginTop: theme.spacing.sm,
+  },
+  subtitle: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.mutedForeground,
   },
+  actionButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    marginTop: theme.spacing.md,
+    padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,
+    borderRadius: theme.borderRadius.md,
+    border: "none",
+    cursor: "pointer",
+    fontFamily: "inherit",
+  } as const,
+  actionButtonText: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+  },
 });
diff --git a/packages/react-web/src/components/defaults/Pagination.tsx b/packages/react-web/src/components/defaults/Pagination.tsx
index 8a0dc23..15ed29b 100644
--- a/packages/react-web/src/components/defaults/Pagination.tsx
+++ b/packages/react-web/src/components/defaults/Pagination.tsx
@@ -2,18 +2,22 @@ import { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../../theme/context";
 import type { Theme } from "../../theme/default";
-import { Icon } from "../../support/Icon";
 import type { PaginationProps } from "../../types";
 
 const PAGE_SIZE_OPTIONS = [3, 5, 10, 25, 50];
 
+function getVisiblePages(current: number, total: number): number[] {
+  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1);
+  const start = Math.max(1, current - 2);
+  const end = Math.min(total, start + 4);
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+
 export function Pagination({ page, limit, total, totalPages, setPage, setLimit }: PaginationProps) {
   const { t } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
   const [open, setOpen] = useState(false);
-  const start = total === 0 ? 0 : (page - 1) * limit + 1;
-  const end = Math.min(page * limit, total);
 
   const handleClickOutside = useCallback(() => setOpen(false), []);
 
@@ -24,10 +28,13 @@ export function Pagination({ page, limit, total, totalPages, setPage, setLimit }
     }
   }, [open, handleClickOutside]);
 
+  const visiblePages = getVisiblePages(page, totalPages);
+
   return (
     <div style={styles.pagination}>
+      {/* Esquerda: Itens por página */}
       <div style={styles.paginationStart}>
-        <span style={styles.pageInfo}>{t("common.table.recordsPerPage")}</span>
+        <span style={styles.pageInfo}>{t("common.table.recordsPerPage")}:</span>
         <div style={styles.pageSizeSelector}>
           <button
             type="button"
@@ -35,7 +42,6 @@ export function Pagination({ page, limit, total, totalPages, setPage, setLimit }
             onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
           >
             <span style={styles.pageSizeButtonText}>{limit}</span>
-            <Icon name="chevron-down" size={12} color={theme.colors.mutedForeground} />
           </button>
           {open && (
             <div style={styles.pageSizeDropdown} onClick={(e) => e.stopPropagation()}>
@@ -56,23 +62,35 @@ export function Pagination({ page, limit, total, totalPages, setPage, setLimit }
         </div>
       </div>
 
+      {/* Direita: Anterior | páginas numeradas | Próximo */}
       <div style={styles.paginationEnd}>
-        <span style={styles.pageInfo}>{start}-{end} of {total}</span>
         <button
           type="button"
-          style={{ ...styles.pageArrow, ...(page <= 1 ? styles.pageArrowDisabled : {}) }}
+          style={{ ...styles.navButton, ...(page <= 1 ? styles.navButtonDisabled : {}) }}
           disabled={page <= 1}
           onClick={() => setPage(page - 1)}
         >
-          <Icon name="chevron-left" size={16} color={page <= 1 ? theme.colors.mutedForeground : theme.colors.foreground} />
+          {t("common.table.previous")}
         </button>
+
+        {visiblePages.map((p) => (
+          <button
+            key={p}
+            type="button"
+            style={{ ...styles.pageNumber, ...(p === page ? styles.pageNumberActive : {}) }}
+            onClick={() => setPage(p)}
+          >
+            {p}
+          </button>
+        ))}
+
         <button
           type="button"
-          style={{ ...styles.pageArrow, ...(page >= totalPages ? styles.pageArrowDisabled : {}) }}
+          style={{ ...styles.navButton, ...(page >= totalPages ? styles.navButtonDisabled : {}) }}
           disabled={page >= totalPages}
           onClick={() => setPage(page + 1)}
         >
-          <Icon name="chevron-right" size={16} color={page >= totalPages ? theme.colors.mutedForeground : theme.colors.foreground} />
+          {t("common.table.next")}
         </button>
       </div>
     </div>
@@ -83,7 +101,7 @@ const createStyles = (theme: Theme) => ({
   pagination: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "flex-end",
+    justifyContent: "space-between",
     gap: theme.spacing.lg,
     marginTop: theme.spacing.lg,
     marginBottom: theme.spacing.md,
@@ -151,20 +169,39 @@ const createStyles = (theme: Theme) => ({
   pageSizeOptionTextActive: {
     fontWeight: theme.fontWeight.semibold,
   },
-  pageArrow: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 6,
+  navButton: {
+    padding: `6px 12px`,
     borderRadius: theme.borderRadius.sm,
-    border: "none",
-    background: "none",
+    border: `1px solid ${theme.colors.border}`,
+    backgroundColor: theme.colors.card,
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
     cursor: "pointer",
+    fontFamily: "inherit",
   },
-  pageArrowDisabled: {
+  navButtonDisabled: {
     opacity: 0.4,
     cursor: "default",
   },
+  pageNumber: {
+    width: 32,
+    height: 32,
+    borderRadius: theme.borderRadius.sm,
+    border: `1px solid ${theme.colors.border}`,
+    backgroundColor: theme.colors.card,
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: "inherit",
+  },
+  pageNumberActive: {
+    backgroundColor: theme.colors.primary,
+    color: theme.colors.primaryForeground,
+    border: `1px solid ${theme.colors.primary}`,
+  },
   pageInfo: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.mutedForeground,
diff --git a/packages/react-web/src/components/registry.ts b/packages/react-web/src/components/registry.ts
new file mode 100644
index 0000000..ab86555
--- /dev/null
+++ b/packages/react-web/src/components/registry.ts
@@ -0,0 +1,52 @@
+import type { ComponentType } from "react";
+import type {
+  ActionButtonProps,
+  ActionBarProps,
+  FieldsGridProps,
+  GroupWrapperProps,
+  LoadingProps,
+  DividerProps,
+  PaginationProps,
+  ColumnSelectorProps,
+  EmptyStateProps,
+  HeaderCellProps,
+  DataCellProps,
+  RowActionProps,
+  CardProps,
+  SearchBarProps,
+  TextInputProps,
+  TextareaInputProps,
+  SelectInputProps,
+  DialogButtonProps,
+} from "../types";
+
+export interface ComponentRegistry {
+  ActionButton?: ComponentType<ActionButtonProps>;
+  ActionBar?: ComponentType<ActionBarProps>;
+  FieldsGrid?: ComponentType<FieldsGridProps>;
+  GroupWrapper?: ComponentType<GroupWrapperProps>;
+  Loading?: ComponentType<LoadingProps>;
+  Divider?: ComponentType<DividerProps>;
+  Pagination?: ComponentType<PaginationProps>;
+  ColumnSelector?: ComponentType<ColumnSelectorProps>;
+  EmptyState?: ComponentType<EmptyStateProps>;
+  HeaderCell?: ComponentType<HeaderCellProps>;
+  DataCell?: ComponentType<DataCellProps>;
+  RowAction?: ComponentType<RowActionProps>;
+  Card?: ComponentType<CardProps>;
+  SearchBar?: ComponentType<SearchBarProps>;
+  TextInput?: ComponentType<TextInputProps>;
+  TextareaInput?: ComponentType<TextareaInputProps>;
+  SelectInput?: ComponentType<SelectInputProps>;
+  DialogButton?: ComponentType<DialogButtonProps>;
+}
+
+const globalComponents: ComponentRegistry = {};
+
+export function registerComponents(components: Partial<ComponentRegistry>): void {
+  Object.assign(globalComponents, components);
+}
+
+export function getComponent<K extends keyof ComponentRegistry>(key: K): ComponentRegistry[K] | undefined {
+  return globalComponents[key];
+}
diff --git a/packages/react-web/src/contracts/component.ts b/packages/react-web/src/contracts/component.ts
index a1cbe71..f3a0f83 100644
--- a/packages/react-web/src/contracts/component.ts
+++ b/packages/react-web/src/contracts/component.ts
@@ -36,6 +36,9 @@ export function createComponent(
       replace(path: string, params?: Record<string, unknown>) {
         nav(resolvePath(path, params));
       },
+      open(route: ScopeRoute, params?: Record<string, unknown>) {
+        nav(resolvePath(route.path, params));
+      },
     },
     dialog,
     toast: {
diff --git a/packages/react-web/src/index.ts b/packages/react-web/src/index.ts
index e47dc0d..da02cf1 100644
--- a/packages/react-web/src/index.ts
+++ b/packages/react-web/src/index.ts
@@ -2,13 +2,15 @@ export { DataPage } from './components/DataPage'
 export { DataForm } from './components/Form'
 export { DataTable } from './components/Table'
 export { ActionBar, ActionButton } from './components/ActionBar'
+export { registerComponents, getComponent } from './components/registry'
+export type { ComponentRegistry } from './components/registry'
 export { DialogProvider, useDialog } from './components/Dialog'
 
 export { ThemeProvider, useTheme } from './theme/context'
 export { defaultTheme } from './theme/default'
 export type { Theme } from './theme/default'
 
-export { configureIcons, resolveActionIcon, resolveGroupIcon } from '@ybyra/react'
+export { configureIcons, resolveActionIcon, resolveActionLabel, resolveGroupIcon } from '@ybyra/react'
 
 export { createComponent, useComponent } from './contracts/component'
 export { configureI18n } from './i18n'
@@ -32,5 +34,10 @@ export type {
   DataCellProps,
   RowActionProps,
   CardProps,
+  SearchBarProps,
+  TextInputProps,
+  TextareaInputProps,
+  SelectInputProps,
+  DialogButtonProps,
   DataTableComponents,
 } from './types'
diff --git a/packages/react-web/src/renderers/DateField.tsx b/packages/react-web/src/renderers/DateField.tsx
index a554015..0a6b333 100644
--- a/packages/react-web/src/renderers/DateField.tsx
+++ b/packages/react-web/src/renderers/DateField.tsx
@@ -3,14 +3,15 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { resolveFieldLabel } from "../support/i18n";
 
 export function DateField({ domain, name, value, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
   if (proxy.hidden) return null;
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
+  const fieldLabel = resolveFieldLabel(i18n, t, domain, name);
   const hasError = errors.length > 0;
 
   return (
diff --git a/packages/react-web/src/renderers/ListField.tsx b/packages/react-web/src/renderers/ListField.tsx
index 31d80e5..3970e91 100644
--- a/packages/react-web/src/renderers/ListField.tsx
+++ b/packages/react-web/src/renderers/ListField.tsx
@@ -1,78 +1,122 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import type { FieldRendererProps } from "@ybyra/react";
-import { useTheme } from "../theme/context";
-import type { Theme } from "../theme/default";
-import { ds } from "../support/ds";
+import { useMemo, useReducer, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import type { FieldRendererProps } from '@ybyra/react'
+import type { SchemaProvide } from '@ybyra/core'
+import { Scope } from '@ybyra/core'
+import { DataTable } from '../components/Table'
+import { DataForm } from '../components/Form'
+import { PageActionsContext, usePageActionsState } from '../components/PageActionsContext'
+import { useListDialog } from './list/useListDialog'
+import { useListComponent } from './list/useListComponent'
+import type { Theme } from '../theme/default'
+import { useTheme } from '../theme/context'
+import { ds } from '../support/ds'
+import { useTranslation } from 'react-i18next'
 
-export function ListField({ domain, name, value, config, proxy, errors, onChange }: FieldRendererProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const styles = createStyles(theme);
-  const [editIndex, setEditIndex] = useState<number | null>(null);
-  if (proxy.hidden) return null;
+export function ListField (props: FieldRendererProps) {
+  const { name, value, config, errors, proxy, onChange, domain } = props
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
-  const hasError = errors.length > 0;
-  const items = Array.isArray(value) ? (value as Record<string, unknown>[]) : [];
-  const reorderable = config.attrs.reorderable === true;
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const styles = createStyles(theme)
 
-  const remove = (index: number) => {
-    onChange(items.filter((_, i) => i !== index));
-  };
+  const schema = config.attrs?.itemSchema as SchemaProvide | undefined
+  const domainHooks = config.attrs?.hooks as Record<string, unknown> | undefined
+  const domainHandlers = config.attrs?.handlers as Record<string, (ctx: unknown) => unknown> | undefined
+  const domainEvents = config.attrs?.events as any
 
-  const add = () => {
-    onChange([...items, {}]);
-  };
+  const rawValue = Array.isArray(value) ? value : []
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
 
-  const moveUp = (index: number) => {
-    if (index === 0) return;
-    const next = [...items];
-    [next[index - 1], next[index]] = [next[index], next[index - 1]];
-    onChange(next);
-  };
+  const reactiveValue = useMemo(() => {
+    const arr = [...rawValue] as Record<string, unknown>[]
+    arr.push = (...items: Record<string, unknown>[]) => {
+      const next = [...rawValue, ...items]
+      onChangeRef.current(next)
+      return next.length
+    }
+    arr.splice = (start: number, deleteCount?: number, ...items: Record<string, unknown>[]) => {
+      const next = [...rawValue]
+      const removed = next.splice(start, deleteCount ?? next.length, ...items)
+      onChangeRef.current(next)
+      return removed
+    }
+    return arr
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawValue])
+  const fieldLabel = t(`${domain}.fields.${name}`)
+  const hasError = errors.length > 0
 
-  const moveDown = (index: number) => {
-    if (index >= items.length - 1) return;
-    const next = [...items];
-    [next[index], next[index + 1]] = [next[index + 1], next[index]];
-    onChange(next);
-  };
+  const [dialogState, openDialog, closeDialog] = useListDialog()
+  const [reloadKey, triggerReload] = useReducer((n: number) => n + 1, 0)
+  const { node: headerActions, register } = usePageActionsState()
+
+  const tableComponent = useListComponent(
+    schema!,
+    rawValue,
+    openDialog,
+    closeDialog,
+    triggerReload,
+  )
+
+  const formComponent = useMemo(
+    () => ({ ...tableComponent, scope: dialogState.scope }),
+    [tableComponent, dialogState.scope],
+  )
+
+  const rawValueRef = useRef(rawValue)
+  rawValueRef.current = rawValue
+  const dialogStateRef = useRef(dialogState)
+  dialogStateRef.current = dialogState
+
+  if (!schema || proxy.hidden) return null
 
   return (
     <div style={styles.container} {...ds(`ListField:${name}`)}>
       <label style={{ ...styles.label, ...(hasError ? styles.labelError : {}) }}>{fieldLabel}</label>
-      <div style={styles.list}>
-        {items.map((item, index) => (
-          <div key={index} style={styles.row}>
-            <span style={styles.rowIndex}>#{index + 1}</span>
-            <span style={styles.rowPreview}>
-              {Object.values(item).filter(Boolean).join(", ") || "—"}
-            </span>
-            <div style={styles.rowActions}>
-              {reorderable && (
-                <>
-                  <button type="button" style={styles.btn} onClick={() => moveUp(index)} disabled={proxy.disabled || index === 0}>↑</button>
-                  <button type="button" style={styles.btn} onClick={() => moveDown(index)} disabled={proxy.disabled || index >= items.length - 1}>↓</button>
-                </>
-              )}
-              {!proxy.disabled && (
-                <button type="button" style={{ ...styles.btn, ...styles.btnDestructive }} onClick={() => remove(index)}>×</button>
-              )}
-            </div>
+      {headerActions && <div style={styles.headerActions}>{headerActions}</div>}
+      <PageActionsContext.Provider value={{ register }}>
+        <DataTable
+          key={reloadKey}
+          schema={schema}
+          scope={Scope.index}
+          component={tableComponent}
+          hooks={domainHooks as any}
+          handlers={domainHandlers as any}
+          selectable={false}
+          actionsPosition="end"
+          showColumnSelector={false}
+          value={rawValue}
+        />
+      </PageActionsContext.Provider>
+
+      {dialogState.open && createPortal(
+        <div
+          style={styles.overlay}
+          onClick={closeDialog}
+        >
+          <div
+            style={styles.modal}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DataForm
+              schema={schema}
+              scope={dialogState.scope}
+              component={formComponent}
+              hooks={domainHooks as any}
+              handlers={domainHandlers as any}
+              events={domainEvents}
+              initialValues={dialogState.selectedItem ?? undefined}
+              context={dialogState.selectedItem ?? {}}
+              value={reactiveValue}
+            />
           </div>
-        ))}
-      </div>
-      {!proxy.disabled && (
-        <button type="button" style={styles.addBtn} onClick={add}>+</button>
+        </div>,
+        document.body,
       )}
-      <div style={styles.errorSlot}>
-        {errors.map((error, i) => (
-          <p key={i} style={styles.error}>{error}</p>
-        ))}
-      </div>
     </div>
-  );
+  )
 }
 
 const createStyles = (theme: Theme) => ({
@@ -80,68 +124,39 @@ const createStyles = (theme: Theme) => ({
     padding: `0 ${theme.spacing.xs}px`,
   },
   label: {
-    display: "block",
+    display: 'block',
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
     marginBottom: theme.spacing.xs,
     color: theme.colors.foreground,
   },
-  labelError: {
-    color: theme.colors.destructive,
-  },
-  list: {
-    border: `1px solid ${theme.colors.input}`,
-    borderRadius: theme.borderRadius.md,
-    overflow: "hidden",
-  },
-  row: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing.xs,
-    padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
-    borderBottom: `1px solid ${theme.colors.input}`,
-    backgroundColor: theme.colors.card,
-  },
-  rowIndex: {
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.mutedForeground,
-    minWidth: 24,
-  },
-  rowPreview: {
-    flex: 1,
-    fontSize: theme.fontSize.sm,
-    color: theme.colors.cardForeground,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap" as const,
+  headerActions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginBottom: theme.spacing.xs,
   },
-  rowActions: {
-    display: "flex",
-    gap: 4,
+  overlay: {
+    position: 'fixed' as const,
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9999,
   },
-  btn: {
-    border: `1px solid ${theme.colors.input}`,
-    borderRadius: theme.borderRadius.sm,
+  modal: {
     backgroundColor: theme.colors.card,
-    color: theme.colors.cardForeground,
-    cursor: "pointer",
-    padding: "2px 6px",
-    fontSize: theme.fontSize.xs,
+    borderRadius: theme.borderRadius.xl,
+    padding: theme.spacing.xxl,
+    minWidth: 480,
+    maxWidth: 640,
+    maxHeight: '90vh',
+    overflowY: 'auto' as const,
+    boxShadow: '0 4px 24px rgba(0, 0, 0, 0.2)',
   },
-  btnDestructive: {
+  labelError: {
     color: theme.colors.destructive,
   },
-  addBtn: {
-    marginTop: theme.spacing.xs,
-    border: `1px dashed ${theme.colors.input}`,
-    borderRadius: theme.borderRadius.md,
-    backgroundColor: "transparent",
-    color: theme.colors.mutedForeground,
-    cursor: "pointer",
-    padding: `${theme.spacing.xs}px`,
-    width: "100%",
-    fontSize: theme.fontSize.md,
-  },
   errorSlot: {
     minHeight: 20,
     marginTop: 2,
@@ -151,4 +166,4 @@ const createStyles = (theme: Theme) => ({
     color: theme.colors.destructive,
     margin: 0,
   },
-});
+})
diff --git a/packages/react-web/src/renderers/MultiSelectField.tsx b/packages/react-web/src/renderers/MultiSelectField.tsx
index 6d850e7..1aacd4a 100644
--- a/packages/react-web/src/renderers/MultiSelectField.tsx
+++ b/packages/react-web/src/renderers/MultiSelectField.tsx
@@ -3,14 +3,15 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { resolveFieldLabel, resolveFieldOption } from "../support/i18n";
 
 export function MultiSelectField({ domain, name, value, config, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
   if (proxy.hidden) return null;
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
+  const fieldLabel = resolveFieldLabel(i18n, t, domain, name);
   const hasError = errors.length > 0;
   const options = (config.attrs.options ?? []) as (string | number)[];
   const selected = Array.isArray(value) ? (value as string[]) : [];
@@ -34,7 +35,7 @@ export function MultiSelectField({ domain, name, value, config, proxy, errors, o
           <div style={styles.chips}>
             {selected.map((v) => (
               <span key={v} style={styles.chip}>
-                {t(`${domain}.fields.${name}.${v}`, { defaultValue: v })}
+                {resolveFieldOption(i18n, t, domain, name, v)}
                 {!proxy.disabled && (
                   <button type="button" style={styles.chipRemove} onClick={() => toggle(v)}>×</button>
                 )}
@@ -51,7 +52,7 @@ export function MultiSelectField({ domain, name, value, config, proxy, errors, o
                 onChange={() => toggle(String(opt))}
                 disabled={proxy.disabled}
               />
-              {t(`${domain}.fields.${name}.${opt}`, { defaultValue: String(opt) })}
+              {resolveFieldOption(i18n, t, domain, name, String(opt))}
             </label>
           ))}
         </div>
diff --git a/packages/react-web/src/renderers/NumberField.tsx b/packages/react-web/src/renderers/NumberField.tsx
index 8de0586..0a94f1c 100644
--- a/packages/react-web/src/renderers/NumberField.tsx
+++ b/packages/react-web/src/renderers/NumberField.tsx
@@ -3,6 +3,7 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { resolveFieldLabel, resolveFieldPlaceholder } from "../support/i18n";
 
 export function NumberField({ domain, name, value, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
   const { t, i18n } = useTranslation();
@@ -10,9 +11,8 @@ export function NumberField({ domain, name, value, proxy, errors, onChange, onBl
   const styles = createStyles(theme);
   if (proxy.hidden) return null;
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
-  const placeholderKey = `${domain}.fields.${name}.placeholder`;
-  const placeholder = i18n.exists(placeholderKey) ? t(placeholderKey) : undefined;
+  const fieldLabel = resolveFieldLabel(i18n, t, domain, name);
+  const placeholder = resolveFieldPlaceholder(i18n, t, domain, name);
   const hasError = errors.length > 0;
 
   return (
diff --git a/packages/react-web/src/renderers/SelectField.tsx b/packages/react-web/src/renderers/SelectField.tsx
index 4b31453..86823c6 100644
--- a/packages/react-web/src/renderers/SelectField.tsx
+++ b/packages/react-web/src/renderers/SelectField.tsx
@@ -3,35 +3,55 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { resolveFieldLabel, resolveFieldOption, resolveFieldPlaceholder } from "../support/i18n";
+import { getComponent } from "../components/registry";
 
 export function SelectField({ domain, name, value, config, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
   if (proxy.hidden) return null;
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
+  const fieldLabel = resolveFieldLabel(i18n, t, domain, name);
+  const placeholder = resolveFieldPlaceholder(i18n, t, domain, name);
   const hasError = errors.length > 0;
-  const options = (config.attrs.options ?? []) as (string | number)[];
+  const rawOptions = (config.attrs.options ?? []) as (string | number)[];
+  const options = rawOptions.map((opt) => ({
+    value: String(opt),
+    label: resolveFieldOption(i18n, t, domain, name, String(opt)),
+  }));
+
+  const CustomSelect = getComponent('SelectInput');
 
   return (
     <div style={styles.container} {...ds(`SelectField:${name}`)}>
       <label style={{ ...styles.label, ...(hasError ? styles.labelError : {}) }}>{fieldLabel}</label>
-      <select
-        style={{ ...styles.input, ...(proxy.disabled ? styles.inputDisabled : {}), ...(hasError ? styles.inputError : {}) }}
-        value={String(value ?? "")}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        disabled={proxy.disabled}
-      >
-        <option value="" />
-        {options.map((opt) => (
-          <option key={String(opt)} value={String(opt)}>
-            {t(`${domain}.fields.${name}.${opt}`, { defaultValue: String(opt) })}
-          </option>
-        ))}
-      </select>
+      {CustomSelect ? (
+        <CustomSelect
+          value={String(value ?? "")}
+          options={options}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={proxy.disabled}
+          placeholder={placeholder}
+          hasError={hasError}
+        />
+      ) : (
+        <select
+          style={{ ...styles.input, ...(proxy.disabled ? styles.inputDisabled : {}), ...(hasError ? styles.inputError : {}) }}
+          value={String(value ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={proxy.disabled}
+        >
+          <option value="">{placeholder ?? ""}</option>
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      )}
       <div style={styles.errorSlot}>
         {errors.map((error, i) => (
           <p key={i} style={styles.error}>{error}</p>
diff --git a/packages/react-web/src/renderers/TextField.tsx b/packages/react-web/src/renderers/TextField.tsx
index 7a92076..423d4d3 100644
--- a/packages/react-web/src/renderers/TextField.tsx
+++ b/packages/react-web/src/renderers/TextField.tsx
@@ -3,6 +3,8 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { getComponent } from "../components/registry";
+import { resolveFieldLabel, resolveFieldPlaceholder, resolveFieldDescription } from "../support/i18n";
 
 export function TextField({ domain, name, value, config, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
   const { t, i18n } = useTranslation();
@@ -10,25 +12,40 @@ export function TextField({ domain, name, value, config, proxy, errors, onChange
   const styles = createStyles(theme);
   if (proxy.hidden) return null;
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
-  const placeholderKey = `${domain}.fields.${name}.placeholder`;
-  const placeholder = i18n.exists(placeholderKey) ? t(placeholderKey) : undefined;
+  const fieldLabel = resolveFieldLabel(i18n, t, domain, name);
+  const placeholder = resolveFieldPlaceholder(i18n, t, domain, name);
+  const description = resolveFieldDescription(i18n, t, domain, name);
   const hasError = errors.length > 0;
   const inputType = config.kind === "password" ? "password" : "text";
+  const CustomInput = getComponent('TextInput');
 
   return (
     <div style={styles.container} {...ds(`TextField:${name}`)}>
       <label style={{ ...styles.label, ...(hasError ? styles.labelError : {}) }}>{fieldLabel}</label>
-      <input
-        type={inputType}
-        style={{ ...styles.input, ...(proxy.disabled ? styles.inputDisabled : {}), ...(hasError ? styles.inputError : {}) }}
-        value={String(value ?? "")}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        disabled={proxy.disabled}
-        placeholder={placeholder}
-      />
+      {CustomInput ? (
+        <CustomInput
+          type={inputType}
+          value={String(value ?? "")}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={proxy.disabled}
+          placeholder={placeholder}
+          hasError={hasError}
+        />
+      ) : (
+        <input
+          type={inputType}
+          style={{ ...styles.input, ...(proxy.disabled ? styles.inputDisabled : {}), ...(hasError ? styles.inputError : {}) }}
+          value={String(value ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={proxy.disabled}
+          placeholder={placeholder}
+        />
+      )}
+      {description && <p style={styles.description}>{description}</p>}
       <div style={styles.errorSlot}>
         {errors.map((error, i) => (
           <p key={i} style={styles.error}>{error}</p>
@@ -76,6 +93,12 @@ const createStyles = (theme: Theme) => ({
     minHeight: 20,
     marginTop: 2,
   },
+  description: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.mutedForeground,
+    marginTop: theme.spacing.xs,
+    margin: 0,
+  },
   error: {
     fontSize: theme.fontSize.xs,
     color: theme.colors.destructive,
diff --git a/packages/react-web/src/renderers/TextareaField.tsx b/packages/react-web/src/renderers/TextareaField.tsx
index 54c9acd..bbed21b 100644
--- a/packages/react-web/src/renderers/TextareaField.tsx
+++ b/packages/react-web/src/renderers/TextareaField.tsx
@@ -3,6 +3,8 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { getComponent } from "../components/registry";
+import { resolveFieldLabel, resolveFieldPlaceholder, resolveFieldDescription } from "../support/i18n";
 
 export function TextareaField({ domain, name, value, config, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
   const { t, i18n } = useTranslation();
@@ -10,25 +12,40 @@ export function TextareaField({ domain, name, value, config, proxy, errors, onCh
   const styles = createStyles(theme);
   if (proxy.hidden) return null;
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
-  const placeholderKey = `${domain}.fields.${name}.placeholder`;
-  const placeholder = i18n.exists(placeholderKey) ? t(placeholderKey) : undefined;
+  const fieldLabel = resolveFieldLabel(i18n, t, domain, name);
+  const placeholder = resolveFieldPlaceholder(i18n, t, domain, name);
+  const description = resolveFieldDescription(i18n, t, domain, name);
   const hasError = errors.length > 0;
   const rows = proxy.height || config.form.height || 3;
+  const CustomInput = getComponent('TextareaInput');
 
   return (
     <div style={styles.container} {...ds(`TextareaField:${name}`)}>
       <label style={{ ...styles.label, ...(hasError ? styles.labelError : {}) }}>{fieldLabel}</label>
-      <textarea
-        style={{ ...styles.input, ...(proxy.disabled ? styles.inputDisabled : {}), ...(hasError ? styles.inputError : {}) }}
-        value={String(value ?? "")}
-        rows={rows}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        disabled={proxy.disabled}
-        placeholder={placeholder}
-      />
+      {CustomInput ? (
+        <CustomInput
+          value={String(value ?? "")}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={proxy.disabled}
+          placeholder={placeholder}
+          rows={rows}
+          hasError={hasError}
+        />
+      ) : (
+        <textarea
+          style={{ ...styles.input, ...(proxy.disabled ? styles.inputDisabled : {}), ...(hasError ? styles.inputError : {}) }}
+          value={String(value ?? "")}
+          rows={rows}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={proxy.disabled}
+          placeholder={placeholder}
+        />
+      )}
+      {description && <p style={styles.description}>{description}</p>}
       <div style={styles.errorSlot}>
         {errors.map((error, i) => (
           <p key={i} style={styles.error}>{error}</p>
@@ -77,6 +94,12 @@ const createStyles = (theme: Theme) => ({
     minHeight: 20,
     marginTop: 2,
   },
+  description: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.mutedForeground,
+    marginTop: theme.spacing.xs,
+    margin: 0,
+  },
   error: {
     fontSize: theme.fontSize.xs,
     color: theme.colors.destructive,
diff --git a/packages/react-web/src/renderers/TimeField.tsx b/packages/react-web/src/renderers/TimeField.tsx
index 7ead6a3..761e51b 100644
--- a/packages/react-web/src/renderers/TimeField.tsx
+++ b/packages/react-web/src/renderers/TimeField.tsx
@@ -3,14 +3,15 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { resolveFieldLabel } from "../support/i18n";
 
 export function TimeField({ domain, name, value, proxy, errors, onChange, onBlur, onFocus }: FieldRendererProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
   if (proxy.hidden) return null;
 
-  const fieldLabel = t(`${domain}.fields.${name}`, { defaultValue: name });
+  const fieldLabel = resolveFieldLabel(i18n, t, domain, name);
   const hasError = errors.length > 0;
 
   return (
diff --git a/packages/react-web/src/renderers/ToggleField.tsx b/packages/react-web/src/renderers/ToggleField.tsx
index 3c0a8bc..304e35f 100644
--- a/packages/react-web/src/renderers/ToggleField.tsx
+++ b/packages/react-web/src/renderers/ToggleField.tsx
@@ -3,13 +3,14 @@ import type { FieldRendererProps } from "@ybyra/react";
 import { useTheme } from "../theme/context";
 import type { Theme } from "../theme/default";
 import { ds } from "../support/ds";
+import { resolveFieldLabel } from "../support/i18n";
 
 const TRACK_WIDTH = 44;
 const TRACK_HEIGHT = 22;
 const THUMB_SIZE = 18;
 
 export function ToggleField({ domain, name, value, proxy, onChange }: FieldRendererProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const theme = useTheme();
   const styles = createStyles(theme);
   const isOn = Boolean(value);
@@ -17,7 +18,7 @@ export function ToggleField({ domain, name, value, proxy, onChange }: FieldRende
 
   return (
     <div style={styles.container} {...ds(`ToggleField:${name}`)}>
-      <label style={styles.label}>{t(`${domain}.fields.${name}`, { defaultValue: name })}</label>
+      <label style={styles.label}>{resolveFieldLabel(i18n, t, domain, name)}</label>
       <div style={styles.row}>
         <button
           type="button"
diff --git a/packages/react-web/src/renderers/list/useListComponent.ts b/packages/react-web/src/renderers/list/useListComponent.ts
new file mode 100644
index 0000000..c09c235
--- /dev/null
+++ b/packages/react-web/src/renderers/list/useListComponent.ts
@@ -0,0 +1,91 @@
+import { useMemo, useRef } from 'react'
+import type { ComponentContract, SchemaProvide, ScopeRoute, ScopeValue } from '@ybyra/core'
+import { Scope } from '@ybyra/core'
+import { useDialog } from '../../components/Dialog'
+
+const DEFAULT_SCOPES: Record<string, ScopeRoute> = {
+  [Scope.index]: { path: '' },
+  [Scope.add]: { path: 'add' },
+  [Scope.view]: { path: ':id' },
+  [Scope.edit]: { path: ':id/edit' },
+}
+
+function inferScope (path: string): ScopeValue | null {
+  for (const [key, route] of Object.entries(DEFAULT_SCOPES)) {
+    if (path === route.path) return key as ScopeValue
+  }
+  return null
+}
+
+export function useListComponent (
+  itemSchema: SchemaProvide,
+  value: Record<string, unknown>[],
+  openDialog: (scope: ScopeValue, item: Record<string, unknown> | null, index: number) => void,
+  closeDialog: () => void,
+  triggerReload: () => void,
+): ComponentContract {
+  const dialog = useDialog()
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  return useMemo((): ComponentContract => {
+    const identity = Array.isArray(itemSchema?.identity)
+      ? itemSchema.identity[0]
+      : (itemSchema?.identity ?? 'id')
+
+    function findItem (id: unknown): [Record<string, unknown> | null, number] {
+      const idx = valueRef.current.findIndex((item) => item[identity] === id)
+      return idx >= 0 ? [valueRef.current[idx], idx] : [null, -1]
+    }
+
+    function handleNavigation (path: string, params?: Record<string, unknown>) {
+      const scope = inferScope(path)
+      if (!scope || scope === Scope.index) {
+        closeDialog()
+        return
+      }
+      if (scope === Scope.add) {
+        openDialog(Scope.add, null, -1)
+        return
+      }
+      const [item, index] = findItem(params?.id)
+      if (item) openDialog(scope, item, index)
+    }
+
+    return {
+      scope: Scope.index,
+      scopes: DEFAULT_SCOPES,
+      reload () {
+        triggerReload()
+      },
+      navigator: {
+        push (path, params) {
+          handleNavigation(path, params)
+        },
+        back () {
+          closeDialog()
+        },
+        replace (path, params) {
+          handleNavigation(path, params)
+        },
+        open (route, params) {
+          handleNavigation(route.path, params)
+        },
+      },
+      dialog,
+      toast: {
+        success (message) { console.log('[toast.success]', message) },
+        error (message) { console.log('[toast.error]', message) },
+        warning (message) { console.log('[toast.warning]', message) },
+        info (message) { console.log('[toast.info]', message) },
+      },
+      loading: {
+        show () {},
+        hide () {},
+      },
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [itemSchema, openDialog, closeDialog, triggerReload, dialog])
+}
+
+export { DEFAULT_SCOPES }
diff --git a/packages/react-web/src/renderers/list/useListDialog.ts b/packages/react-web/src/renderers/list/useListDialog.ts
new file mode 100644
index 0000000..a5fbc08
--- /dev/null
+++ b/packages/react-web/src/renderers/list/useListDialog.ts
@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'react'
+import type { ScopeValue } from '@ybyra/core'
+
+export interface ListDialogState {
+  open: boolean
+  scope: ScopeValue
+  selectedItem: Record<string, unknown> | null
+  selectedIndex: number
+}
+
+const CLOSED: ListDialogState = {
+  open: false,
+  scope: 'add',
+  selectedItem: null,
+  selectedIndex: -1,
+}
+
+export function useListDialog() {
+  const [state, setState] = useState<ListDialogState>(CLOSED)
+
+  const openDialog = useCallback(
+    (scope: ScopeValue, item: Record<string, unknown> | null, index: number) => {
+      setState({ open: true, scope, selectedItem: item, selectedIndex: index })
+    },
+    [],
+  )
+
+  const closeDialog = useCallback(() => {
+    setState(CLOSED)
+  }, [])
+
+  return [state, openDialog, closeDialog] as const
+}
diff --git a/packages/react-web/src/support/Icon.tsx b/packages/react-web/src/support/Icon.tsx
index 334b047..a4c499f 100644
--- a/packages/react-web/src/support/Icon.tsx
+++ b/packages/react-web/src/support/Icon.tsx
@@ -30,6 +30,7 @@ const paths: Record<string, string> = {
   "trash-2": "M3 6h18 M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2 M10 11v6 M14 11v6",
   "send": "M22 2L11 13 M22 2l-7 20-4-9-9-4 20-7z",
   "edit-2": "M17 3a2.83 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z",
+  "square-pen": "M12 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7 M18.375 2.625a1 1 0 013 3l-9.013 9.014a2 2 0 01-.853.505l-2.873.84a.5.5 0 01-.62-.62l.84-2.873a2 2 0 01.506-.852z",
   "search": "M11 3a8 8 0 100 16 8 8 0 000-16z M21 21l-4.35-4.35",
   "list": "M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01",
   "user": "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2 M12 3a4 4 0 100 8 4 4 0 000-8z",
diff --git a/packages/react-web/src/support/i18n.ts b/packages/react-web/src/support/i18n.ts
new file mode 100644
index 0000000..09751fb
--- /dev/null
+++ b/packages/react-web/src/support/i18n.ts
@@ -0,0 +1,82 @@
+import type { i18n as I18nInstance, TFunction } from "i18next";
+
+/**
+ * Resolves a field label supporting both flat and nested i18n structures.
+ *
+ * Flat (legacy):  `{domain}.fields.{name}` → 'Nome'
+ * Nested (new):   `{domain}.fields.{name}.label` → 'Nome'
+ */
+export function resolveFieldLabel(
+  i18n: I18nInstance,
+  t: TFunction,
+  domain: string,
+  name: string,
+): string {
+  const nestedKey = `${domain}.fields.${name}.label`;
+  if (i18n.exists(nestedKey)) {
+    return t(nestedKey);
+  }
+  return t(`${domain}.fields.${name}`, { defaultValue: name });
+}
+
+/**
+ * Resolves a field option label supporting both flat and nested i18n structures.
+ *
+ * Flat (legacy):  `{domain}.fields.{name}.{opt}` → 'Administrador'
+ * Nested (new):   `{domain}.fields.{name}.options.{opt}` → 'Administrador'
+ */
+export function resolveFieldOption(
+  i18n: I18nInstance,
+  t: TFunction,
+  domain: string,
+  name: string,
+  opt: string,
+): string {
+  const nestedKey = `${domain}.fields.${name}.options.${opt}`;
+  if (i18n.exists(nestedKey)) {
+    return t(nestedKey);
+  }
+  return t(`${domain}.fields.${name}.${opt}`, { defaultValue: opt });
+}
+
+/**
+ * Resolves a field placeholder supporting both flat and nested i18n structures.
+ *
+ * Flat (legacy):  `{domain}.placeholders.{name}` → 'e.g. ...'
+ * Nested (new):   `{domain}.fields.{name}.placeholder` → 'e.g. ...'
+ */
+export function resolveFieldPlaceholder(
+  i18n: I18nInstance,
+  t: TFunction,
+  domain: string,
+  name: string,
+): string | undefined {
+  if (i18n.exists(`${domain}.fields.${name}.placeholder`)) {
+    return t(`${domain}.fields.${name}.placeholder`);
+  }
+  if (i18n.exists(`${domain}.placeholders.${name}`)) {
+    return t(`${domain}.placeholders.${name}`);
+  }
+  return undefined;
+}
+
+/**
+ * Resolves a field description supporting both flat and nested i18n structures.
+ *
+ * Flat (legacy):  `{domain}.descriptions.{name}` → 'Descrição...'
+ * Nested (new):   `{domain}.fields.{name}.description` → 'Descrição...'
+ */
+export function resolveFieldDescription(
+  i18n: I18nInstance,
+  t: TFunction,
+  domain: string,
+  name: string,
+): string | undefined {
+  if (i18n.exists(`${domain}.fields.${name}.description`)) {
+    return t(`${domain}.fields.${name}.description`);
+  }
+  if (i18n.exists(`${domain}.descriptions.${name}`)) {
+    return t(`${domain}.descriptions.${name}`);
+  }
+  return undefined;
+}
diff --git a/packages/react-web/src/theme/default.ts b/packages/react-web/src/theme/default.ts
index 0d4c489..09a6e6f 100644
--- a/packages/react-web/src/theme/default.ts
+++ b/packages/react-web/src/theme/default.ts
@@ -61,11 +61,41 @@ export const defaultTheme = {
   },
 
   fontWeight: {
-    regular: "400" as const,
-    medium: "500" as const,
-    semibold: "600" as const,
-    bold: "700" as const,
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
   },
-} as const;
+} satisfies Theme;
 
-export type Theme = typeof defaultTheme;
+export interface Theme {
+  colors: {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    info: string;
+    infoForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+  };
+  spacing: { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number };
+  borderRadius: { sm: number; md: number; lg: number; xl: number };
+  fontSize: { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number };
+  fontWeight: { regular: string; medium: string; semibold: string; bold: string };
+}
diff --git a/packages/react-web/src/types.ts b/packages/react-web/src/types.ts
index d9c87e9..11302ea 100644
--- a/packages/react-web/src/types.ts
+++ b/packages/react-web/src/types.ts
@@ -1,6 +1,6 @@
 import type { ReactNode, ComponentType } from "react";
 import type { ResolvedAction, ResolvedField, UseDataFormReturn, ResolvedColumn } from "@ybyra/react";
-import type { FieldProxy, PositionValue, ScopeValue } from "@ybyra/core";
+import type { FieldProxy, PositionValue, ScopeValue, ActionConfig } from "@ybyra/core";
 
 export interface SlotRendererProps {
   domain: string;
@@ -63,7 +63,23 @@ export interface ColumnSelectorProps {
   domain: string;
 }
 
-export interface EmptyStateProps {}
+export interface EmptyStateAction {
+  label: string;
+  icon?: string;
+  onPress: () => void;
+}
+
+export interface EmptyStateProps {
+  icon?: string | ComponentType<{ className?: string }>;
+  title?: string;
+  subtitle?: string;
+  action?: EmptyStateAction;
+}
+
+/** Props passadas pelo consumidor no DataTable — `action` aceita nome ou ActionConfig do schema */
+export interface DataTableEmptyStateInput extends Omit<EmptyStateProps, 'action'> {
+  action?: string | ActionConfig;
+}
 
 export interface HeaderCellProps {
   column: ResolvedColumn;
@@ -95,6 +111,52 @@ export interface CardProps {
   domain: string;
 }
 
+export interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  domain: string;
+  placeholder?: string;
+}
+
+export interface TextInputProps {
+  type?: string;
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  disabled?: boolean;
+  placeholder?: string;
+  hasError?: boolean;
+}
+
+export interface TextareaInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  disabled?: boolean;
+  placeholder?: string;
+  rows?: number;
+  hasError?: boolean;
+}
+
+export interface SelectInputProps {
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  disabled?: boolean;
+  placeholder?: string;
+  hasError?: boolean;
+}
+
+export interface DialogButtonProps {
+  label: string;
+  variant: 'default' | 'destructive' | 'cancel';
+  onClick: () => void;
+}
+
 export interface DataTableComponents {
   ActionBar?: ComponentType<ActionBarProps>;
   ActionButton?: ComponentType<ActionButtonProps>;
@@ -106,4 +168,5 @@ export interface DataTableComponents {
   HeaderCell?: ComponentType<HeaderCellProps>;
   DataCell?: ComponentType<DataCellProps>;
   Card?: ComponentType<CardProps>;
+  SearchBar?: ComponentType<SearchBarProps>;
 }
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index a635289..5aa2da7 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -20,6 +20,7 @@ export interface FieldRendererProps {
   proxy: FieldProxy
   errors: string[]
   scope: ScopeValue
+  context?: Record<string, unknown>
   onChange(value: unknown): void
   onBlur(): void
   onFocus(): void
@@ -56,6 +57,7 @@ export interface HandlerContext {
   component: ComponentContract
   form?: FormContract
   table?: TableContract
+  value?: unknown
 }
 
 type HandlerFn = (context: HandlerContext) => void | Promise<void>
@@ -63,7 +65,7 @@ type HandlerFn = (context: HandlerContext) => void | Promise<void>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type BootstrapHookFn = (ctx: any) => void | Promise<void>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type FetchHookFn = (ctx: any) => Promise<any>
+type FetchHookFn = (ctx: any) => void | Promise<void>
 
 export interface UseDataFormOptions {
   schema: SchemaProvide
@@ -79,6 +81,7 @@ export interface UseDataFormOptions {
   initialValues?: Record<string, unknown>
   translate?: TranslateContract
   permissions?: string[]
+  value?: unknown
 }
 
 export interface UseDataFormReturn {
@@ -113,7 +116,6 @@ export interface UseDataTableOptions {
   scope: ScopeValue
   handlers?: Record<string, HandlerFn>
   hooks?: {
-    bootstrap?: Partial<Record<ScopeValue, BootstrapHookFn>>
     fetch?: Partial<Record<ScopeValue, FetchHookFn>>
   }
   context?: Record<string, unknown>
@@ -121,6 +123,7 @@ export interface UseDataTableOptions {
   pageSize?: number
   translate?: TranslateContract
   permissions?: string[]
+  value?: Record<string, unknown>[]
 }
 
 export interface UseDataTableReturn {
diff --git a/packages/react/src/use-data-form.ts b/packages/react/src/use-data-form.ts
index b7d0707..264f722 100644
--- a/packages/react/src/use-data-form.ts
+++ b/packages/react/src/use-data-form.ts
@@ -14,8 +14,10 @@ import type {
 } from "./types";
 
 export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
-  const { schema, scope, events, handlers, hooks, context, component, initialValues, translate, permissions } = options;
+  const { schema, scope, events, handlers, hooks, context, component, initialValues, translate, permissions, value } = options;
   const t: TranslateContract = translate ?? ((key) => key);
+  const valueRef = useRef(value);
+  valueRef.current = value;
 
   const [state, setState] = useState<Record<string, unknown>>(() =>
     buildInitialState(schema.fields, initialValues),
@@ -23,25 +25,30 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
   const [fieldOverrides, setFieldOverrides] = useState<Record<string, Partial<FieldProxy>>>({});
   const [errors, setErrors] = useState<Record<string, string[]>>({});
   const initialStateRef = useRef(buildInitialState(schema.fields, initialValues));
-  const [loading, setLoading] = useState(() => !!hooks?.bootstrap?.[scope]);
+  const [loading, setLoading] = useState(() => !!(hooks?.fetch?.[scope] || hooks?.bootstrap?.[scope]));
 
   useEffect(() => {
-    const hook = hooks?.bootstrap?.[scope];
-    if (!hook) return;
+    const fetchHook = hooks?.fetch?.[scope];
+    const bootstrapHook = hooks?.bootstrap?.[scope];
+    if (!fetchHook && !bootstrapHook) return;
 
     const run = async () => {
       let hydratedData: Record<string, unknown> | undefined;
-      const schemaResult = createSchemaProxy(schema.fields, {});
-      const hydrate = (data: Record<string, unknown>) => { hydratedData = data; };
-
-      await hook({ context: context ?? {}, hydrate, schema: schemaResult.proxy, component });
-
       let currentOverrides: Record<string, Partial<FieldProxy>> = {};
-      const bootstrapOverrides = schemaResult.getOverrides();
-      for (const [name, ov] of Object.entries(bootstrapOverrides)) {
-        currentOverrides[name] = { ...currentOverrides[name], ...ov };
+
+      // 1. fetch → hidrata os dados
+      if (fetchHook) {
+        const hydrate = (data: Record<string, unknown>) => { hydratedData = data; };
+        await fetchHook({
+          type: 'record',
+          context: context ?? {},
+          params: { page: 1, limit: 1 },
+          hydrate,
+          component,
+        });
       }
 
+      // 2. aplica hydrate e dispara events
       if (hydratedData) {
         let currentState = buildInitialState(schema.fields, hydratedData);
 
@@ -62,6 +69,15 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
         initialStateRef.current = currentState;
       }
 
+      // 3. bootstrap → orquestra estado do schema (roda após hydrate)
+      if (bootstrapHook) {
+        const schemaResult = createSchemaProxy(schema.fields, currentOverrides);
+        await bootstrapHook({ context: context ?? {}, schema: schemaResult.proxy, component });
+        for (const [name, ov] of Object.entries(schemaResult.getOverrides())) {
+          currentOverrides[name] = { ...currentOverrides[name], ...ov };
+        }
+      }
+
       if (Object.keys(currentOverrides).length > 0) {
         setFieldOverrides(currentOverrides);
       }
@@ -256,8 +272,8 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
 
   const valid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
-  const formRef = useRef({ validate, reset, setValues, errors });
-  formRef.current = { validate, reset, setValues, errors };
+  const formRef = useRef({ validate, reset, setValues, errors, setErrors });
+  formRef.current = { validate, reset, setValues, errors, setErrors };
 
   const actions = useMemo((): ResolvedAction[] => {
     return Object.entries(schema.actions)
@@ -278,8 +294,10 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
               dirty,
               valid,
               reset,
-              validate
+              validate,
+              setErrors,
             },
+            value: valueRef.current,
           });
         },
       }));
@@ -297,6 +315,7 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
         proxy,
         errors: errors[name] ?? [],
         scope,
+        context: context ?? {},
         onChange (value: unknown) {
           setValue(name, value);
         },
@@ -308,7 +327,7 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
         },
       };
     },
-    [schema.fields, schema.domain, state, errors, scope, getProxy, setValue, fireEvent],
+    [schema.fields, schema.domain, state, errors, scope, context, getProxy, setValue, fireEvent],
   );
 
   const permitted = useMemo(
diff --git a/packages/react/src/use-data-table.ts b/packages/react/src/use-data-table.ts
index f05554d..88b794a 100644
--- a/packages/react/src/use-data-table.ts
+++ b/packages/react/src/use-data-table.ts
@@ -1,19 +1,20 @@
-import { useState, useMemo, useCallback, useEffect, useRef } from "react";
-import type { FieldConfig, ScopeValue, TableContract } from "@ybyra/core";
-import { Position, isInScope, isScopePermitted, isActionPermitted } from "@ybyra/core";
-import type {
-  UseDataTableOptions,
-  UseDataTableReturn,
-  ResolvedColumn,
-  ResolvedAction,
-} from "./types";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { FieldConfig, TableContract } from '@ybyra/core'
+import { isActionPermitted, isInScope, isScopePermitted, Position } from '@ybyra/core'
+import type { ResolvedAction, ResolvedColumn, UseDataTableOptions, UseDataTableReturn } from './types'
 
 export function useDataTable (options: UseDataTableOptions): UseDataTableReturn {
-  const { schema, scope, handlers, hooks, component, pageSize = 10, permissions } = options;
+  const { schema, scope, handlers, hooks, context, component, pageSize = 10, permissions, value = [] } = options;
 
-  const [rows, setRows] = useState<Record<string, unknown>[]>([]);
+  const [rows, setRows] = useState<Record<string, unknown>[]>(value);
   const [loading, setLoading] = useState(false);
   const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    if (hooks?.fetch?.[scope]) return; // fetch hook gerencia os dados
+    setRows(value);
+    setTotal(value.length);
+  }, [value, hooks?.fetch, scope]);
   const [page, setPage] = useState(1);
   const [limit, setLimitState] = useState(pageSize);
   const [sortField, setSortField] = useState<string | undefined>();
@@ -75,16 +76,23 @@ export function useDataTable (options: UseDataTableOptions): UseDataTableReturn
     if (!fetchHook) return;
 
     setLoading(true);
-    fetchHook({ params: { page, limit, sort: sortField, order: sortOrder, filters }, component })
-      .then((result: { data: Record<string, unknown>[]; total: number }) => {
-        if (fetchIdRef.current !== id) return;
-        setRows(result.data);
-        setTotal(result.total);
-      })
-      .finally(() => {
-        if (fetchIdRef.current !== id) return;
-        setLoading(false);
-      });
+    const hydrate = (result: { data: Record<string, unknown>[]; total: number }) => {
+      if (fetchIdRef.current !== id) return;
+      setRows(result.data);
+      setTotal(result.total);
+    };
+    Promise.resolve(
+      fetchHook({
+        type: 'collection',
+        context: context ?? {},
+        params: { page, limit, sort: sortField, order: sortOrder, filters },
+        hydrate,
+        component,
+      }),
+    ).finally(() => {
+      if (fetchIdRef.current !== id) return;
+      setLoading(false);
+    });
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hooks?.fetch, scope, page, limit, sortField, sortOrder, filtersKey, component]);
 
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
index 56f107b..61b4903 100644
--- a/packages/svelte/src/types.ts
+++ b/packages/svelte/src/types.ts
@@ -63,7 +63,7 @@ type HandlerFn = (context: HandlerContext) => void | Promise<void>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type BootstrapHookFn = (ctx: any) => void | Promise<void>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type FetchHookFn = (ctx: any) => Promise<any>
+type FetchHookFn = (ctx: any) => void | Promise<void>
 
 export interface UseDataFormOptions {
   schema: SchemaProvide
diff --git a/packages/svelte/src/use-data-form.ts b/packages/svelte/src/use-data-form.ts
index 84a6ad2..bac6563 100644
--- a/packages/svelte/src/use-data-form.ts
+++ b/packages/svelte/src/use-data-form.ts
@@ -30,23 +30,28 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormStore {
   const fieldOverrides = writable<Record<string, Partial<FieldProxy>>>({})
   const errors = writable<Record<string, string[]>>({})
   const initialState = buildInitialState(schema.fields, initialValues)
-  const loading = writable(!!hooks?.bootstrap?.[scope])
+  const loading = writable(!!(hooks?.fetch?.[scope] || hooks?.bootstrap?.[scope]))
 
-  const hook = hooks?.bootstrap?.[scope]
-  if (hook) {
+  const fetchHook = hooks?.fetch?.[scope]
+  const bootstrapHook = hooks?.bootstrap?.[scope]
+  if (fetchHook || bootstrapHook) {
     const run = async () => {
       let hydratedData: Record<string, unknown> | undefined
-      const schemaResult = createSchemaProxy(schema.fields, {})
-      const hydrate = (data: Record<string, unknown>) => { hydratedData = data }
-
-      await hook({ context: context ?? {}, hydrate, schema: schemaResult.proxy, component })
-
       let currentOverrides: Record<string, Partial<FieldProxy>> = {}
-      const bootstrapOverrides = schemaResult.getOverrides()
-      for (const [name, ov] of Object.entries(bootstrapOverrides)) {
-        currentOverrides[name] = { ...currentOverrides[name], ...ov }
+
+      // 1. fetch → hidrata os dados
+      if (fetchHook) {
+        const hydrate = (data: Record<string, unknown>) => { hydratedData = data }
+        await fetchHook({
+          type: 'record',
+          context: context ?? {},
+          params: { page: 1, limit: 1 },
+          hydrate,
+          component,
+        })
       }
 
+      // 2. aplica hydrate e dispara events
       if (hydratedData) {
         let currentState = buildInitialState(schema.fields, hydratedData)
 
@@ -67,6 +72,15 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormStore {
         Object.assign(initialState, currentState)
       }
 
+      // 3. bootstrap → orquestra estado do schema (roda após hydrate)
+      if (bootstrapHook) {
+        const schemaResult = createSchemaProxy(schema.fields, currentOverrides)
+        await bootstrapHook({ context: context ?? {}, schema: schemaResult.proxy, component })
+        for (const [name, ov] of Object.entries(schemaResult.getOverrides())) {
+          currentOverrides[name] = { ...currentOverrides[name], ...ov }
+        }
+      }
+
       if (Object.keys(currentOverrides).length > 0) {
         fieldOverrides.set(currentOverrides)
       }
@@ -258,6 +272,7 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormStore {
               valid: $valid,
               reset,
               validate,
+              setErrors: (errs: Record<string, string[]>) => errors.set(errs),
             },
           })
         },
diff --git a/packages/svelte/src/use-data-table.ts b/packages/svelte/src/use-data-table.ts
index 8e5d178..f15007f 100644
--- a/packages/svelte/src/use-data-table.ts
+++ b/packages/svelte/src/use-data-table.ts
@@ -27,7 +27,7 @@ export type UseDataTableStore = Readable<UseDataTableReturn> & {
 }
 
 export function useDataTable (options: UseDataTableOptions): UseDataTableStore {
-  const { schema, scope, handlers, hooks, component, pageSize = 10, permissions } = options
+  const { schema, scope, handlers, hooks, context, component, pageSize = 10, permissions } = options
 
   const rows = writable<Record<string, unknown>[]>([])
   const loading = writable(false)
@@ -91,25 +91,29 @@ export function useDataTable (options: UseDataTableOptions): UseDataTableStore {
     if (!fetchHook) return
 
     loading.set(true)
-    fetchHook({
-      params: {
-        page: get(page),
-        limit: get(limit),
-        sort: get(sortField),
-        order: get(sortOrder),
-        filters: get(filters),
-      },
-      component,
+    const hydrate = (result: { data: Record<string, unknown>[]; total: number }) => {
+      if (fetchId !== id) return
+      rows.set(result.data)
+      total.set(result.total)
+    }
+    Promise.resolve(
+      fetchHook({
+        type: 'collection',
+        context: context ?? {},
+        params: {
+          page: get(page),
+          limit: get(limit),
+          sort: get(sortField),
+          order: get(sortOrder),
+          filters: get(filters),
+        },
+        hydrate,
+        component,
+      }),
+    ).finally(() => {
+      if (fetchId !== id) return
+      loading.set(false)
     })
-      .then((result: { data: Record<string, unknown>[]; total: number }) => {
-        if (fetchId !== id) return
-        rows.set(result.data)
-        total.set(result.total)
-      })
-      .finally(() => {
-        if (fetchId !== id) return
-        loading.set(false)
-      })
   }
 
   reload()
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index eccf7f4..79c0fda 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -64,7 +64,7 @@ type HandlerFn = (context: HandlerContext) => void | Promise<void>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type BootstrapHookFn = (ctx: any) => void | Promise<void>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type FetchHookFn = (ctx: any) => Promise<any>
+type FetchHookFn = (ctx: any) => void | Promise<void>
 
 export interface UseDataFormOptions {
   schema: SchemaProvide
diff --git a/packages/vue/src/use-data-form.ts b/packages/vue/src/use-data-form.ts
index 71f2ec7..55bd184 100644
--- a/packages/vue/src/use-data-form.ts
+++ b/packages/vue/src/use-data-form.ts
@@ -21,25 +21,30 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
   const fieldOverrides = ref<Record<string, Partial<FieldProxy>>>({})
   const errors = ref<Record<string, string[]>>({})
   const initialState = buildInitialState(schema.fields, initialValues)
-  const loading = ref(!!hooks?.bootstrap?.[scope])
+  const loading = ref(!!(hooks?.fetch?.[scope] || hooks?.bootstrap?.[scope]))
 
   onMounted(() => {
-    const hook = hooks?.bootstrap?.[scope]
-    if (!hook) return
+    const fetchHook = hooks?.fetch?.[scope]
+    const bootstrapHook = hooks?.bootstrap?.[scope]
+    if (!fetchHook && !bootstrapHook) return
 
     const run = async () => {
       let hydratedData: Record<string, unknown> | undefined
-      const schemaResult = createSchemaProxy(schema.fields, {})
-      const hydrate = (data: Record<string, unknown>) => { hydratedData = data }
-
-      await hook({ context: context ?? {}, hydrate, schema: schemaResult.proxy, component })
-
       let currentOverrides: Record<string, Partial<FieldProxy>> = {}
-      const bootstrapOverrides = schemaResult.getOverrides()
-      for (const [name, ov] of Object.entries(bootstrapOverrides)) {
-        currentOverrides[name] = { ...currentOverrides[name], ...ov }
+
+      // 1. fetch → hidrata os dados
+      if (fetchHook) {
+        const hydrate = (data: Record<string, unknown>) => { hydratedData = data }
+        await fetchHook({
+          type: 'record',
+          context: context ?? {},
+          params: { page: 1, limit: 1 },
+          hydrate,
+          component,
+        })
       }
 
+      // 2. aplica hydrate e dispara events
       if (hydratedData) {
         let currentState = buildInitialState(schema.fields, hydratedData)
 
@@ -60,6 +65,15 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
         Object.assign(initialState, currentState)
       }
 
+      // 3. bootstrap → orquestra estado do schema (roda após hydrate)
+      if (bootstrapHook) {
+        const schemaResult = createSchemaProxy(schema.fields, currentOverrides)
+        await bootstrapHook({ context: context ?? {}, schema: schemaResult.proxy, component })
+        for (const [name, ov] of Object.entries(schemaResult.getOverrides())) {
+          currentOverrides[name] = { ...currentOverrides[name], ...ov }
+        }
+      }
+
       if (Object.keys(currentOverrides).length > 0) {
         fieldOverrides.value = currentOverrides
       }
@@ -251,6 +265,7 @@ export function useDataForm (options: UseDataFormOptions): UseDataFormReturn {
               valid: valid.value,
               reset,
               validate,
+              setErrors: (errs: Record<string, string[]>) => { errors.value = errs },
             },
           })
         },
diff --git a/packages/vue/src/use-data-table.ts b/packages/vue/src/use-data-table.ts
index 40dc664..e2f0899 100644
--- a/packages/vue/src/use-data-table.ts
+++ b/packages/vue/src/use-data-table.ts
@@ -9,7 +9,7 @@ import type {
 } from './types'
 
 export function useDataTable (options: UseDataTableOptions): UseDataTableReturn {
-  const { schema, scope, handlers, hooks, component, pageSize = 10, permissions } = options
+  const { schema, scope, handlers, hooks, context, component, pageSize = 10, permissions } = options
 
   const rows = ref<Record<string, unknown>[]>([])
   const loading = ref(false)
@@ -73,25 +73,29 @@ export function useDataTable (options: UseDataTableOptions): UseDataTableReturn
     if (!fetchHook) return
 
     loading.value = true
-    fetchHook({
-      params: {
-        page: page.value,
-        limit: limit.value,
-        sort: sortField.value,
-        order: sortOrder.value,
-        filters: filters.value,
-      },
-      component,
+    const hydrate = (result: { data: Record<string, unknown>[]; total: number }) => {
+      if (fetchId !== id) return
+      rows.value = result.data
+      total.value = result.total
+    }
+    Promise.resolve(
+      fetchHook({
+        type: 'collection',
+        context: context ?? {},
+        params: {
+          page: page.value,
+          limit: limit.value,
+          sort: sortField.value,
+          order: sortOrder.value,
+          filters: filters.value,
+        },
+        hydrate,
+        component,
+      }),
+    ).finally(() => {
+      if (fetchId !== id) return
+      loading.value = false
     })
-      .then((result: { data: Record<string, unknown>[]; total: number }) => {
-        if (fetchId !== id) return
-        rows.value = result.data
-        total.value = result.total
-      })
-      .finally(() => {
-        if (fetchId !== id) return
-        loading.value = false
-      })
   }
 
   watch(
diff --git a/playground/react-native/tests/src/domain/person/hooks.test.ts b/playground/react-native/tests/src/domain/person/hooks.test.ts
index f25968f..6ee5bdf 100644
--- a/playground/react-native/tests/src/domain/person/hooks.test.ts
+++ b/playground/react-native/tests/src/domain/person/hooks.test.ts
@@ -18,74 +18,86 @@ describe("createPersonHooks", () => {
     expect(hooks).toHaveProperty("fetch");
   });
 
-  it("bootstrap has view and edit scope handlers", () => {
+  it("bootstrap has view scope handler", () => {
     expect(hooks.bootstrap![Scope.view]).toBeTypeOf("function");
-    expect(hooks.bootstrap![Scope.edit]).toBeTypeOf("function");
   });
 
-  it("fetch has index scope handler", () => {
+  it("fetch has view, edit, and index scope handlers", () => {
+    expect(hooks.fetch![Scope.view]).toBeTypeOf("function");
+    expect(hooks.fetch![Scope.edit]).toBeTypeOf("function");
     expect(hooks.fetch![Scope.index]).toBeTypeOf("function");
   });
 
-  it("bootstrap[view] calls service.read, hydrates, and disables all fields", async () => {
+  it("fetch[view] calls service.read and hydrates", async () => {
     const data = { id: "1", name: "Alice" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: { id: "1" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(true);
-    expect(schema.email.disabled).toBe(true);
   });
 
-  it("bootstrap[view] does nothing when context.id is missing", async () => {
+  it("fetch[view] does nothing when context.id is missing", async () => {
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: {},
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).not.toHaveBeenCalled();
   });
 
-  it("bootstrap[edit] calls service.read and hydrates without disabling", async () => {
+  it("bootstrap[view] disables all fields", async () => {
+    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+
+    await hooks.bootstrap![Scope.view]!({ context: {}, schema, component });
+
+    expect(schema.name.disabled).toBe(true);
+    expect(schema.email.disabled).toBe(true);
+  });
+
+  it("fetch[edit] calls service.read and hydrates without disabling", async () => {
     const data = { id: "2", name: "Bob" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.edit]!({
+    await hooks.fetch![Scope.edit]!({
+      type: "record",
       context: { id: "2" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(false);
   });
 
-  it("fetch[index] calls service.paginate", async () => {
+  it("fetch[index] calls service.paginate via hydrate", async () => {
     const data = { data: [{ id: "1" }], total: 1, page: 1, limit: 10 };
     vi.mocked(driver.search).mockResolvedValue(data);
 
+    const hydrate = vi.fn();
     const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
     const params = { page: 1, limit: 10 };
-    const result = await hooks.fetch![Scope.index]!({ params, component } as any);
 
-    expect(result).toEqual(data);
+    await hooks.fetch![Scope.index]!({ type: "collection", context: {}, params, hydrate, component } as any);
+
+    expect(hydrate).toHaveBeenCalledWith(data);
   });
 });
diff --git a/playground/react-web/tests/src/domain/person/hooks.test.ts b/playground/react-web/tests/src/domain/person/hooks.test.ts
index cfbf935..1282178 100644
--- a/playground/react-web/tests/src/domain/person/hooks.test.ts
+++ b/playground/react-web/tests/src/domain/person/hooks.test.ts
@@ -18,74 +18,86 @@ describe("createPersonHooks", () => {
     expect(hooks).toHaveProperty("fetch");
   });
 
-  it("bootstrap has view and edit scope handlers", () => {
+  it("bootstrap has view scope handler", () => {
     expect(hooks.bootstrap![Scope.view]).toBeTypeOf("function");
-    expect(hooks.bootstrap![Scope.edit]).toBeTypeOf("function");
   });
 
-  it("fetch has index scope handler", () => {
+  it("fetch has view, edit, and index scope handlers", () => {
+    expect(hooks.fetch![Scope.view]).toBeTypeOf("function");
+    expect(hooks.fetch![Scope.edit]).toBeTypeOf("function");
     expect(hooks.fetch![Scope.index]).toBeTypeOf("function");
   });
 
-  it("bootstrap[view] calls service.read, hydrates, and disables all fields", async () => {
+  it("fetch[view] calls service.read and hydrates", async () => {
     const data = { id: "1", name: "Alice" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: { id: "1" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(true);
-    expect(schema.email.disabled).toBe(true);
   });
 
-  it("bootstrap[view] does nothing when context.id is missing", async () => {
+  it("fetch[view] does nothing when context.id is missing", async () => {
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: {},
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).not.toHaveBeenCalled();
   });
 
-  it("bootstrap[edit] calls service.read and hydrates without disabling", async () => {
+  it("bootstrap[view] disables all fields", async () => {
+    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+
+    await hooks.bootstrap![Scope.view]!({ context: {}, schema, component });
+
+    expect(schema.name.disabled).toBe(true);
+    expect(schema.email.disabled).toBe(true);
+  });
+
+  it("fetch[edit] calls service.read and hydrates without disabling", async () => {
     const data = { id: "2", name: "Bob" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.edit]!({
+    await hooks.fetch![Scope.edit]!({
+      type: "record",
       context: { id: "2" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(false);
   });
 
-  it("fetch[index] calls service.paginate", async () => {
+  it("fetch[index] calls service.paginate via hydrate", async () => {
     const data = { data: [{ id: "1" }], total: 1, page: 1, limit: 10 };
     vi.mocked(driver.search).mockResolvedValue(data);
 
+    const hydrate = vi.fn();
     const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
     const params = { page: 1, limit: 10 };
-    const result = await hooks.fetch![Scope.index]!({ params, component } as any);
 
-    expect(result).toEqual(data);
+    await hooks.fetch![Scope.index]!({ type: "collection", context: {}, params, hydrate, component } as any);
+
+    expect(hydrate).toHaveBeenCalledWith(data);
   });
 });
diff --git a/playground/sveltekit/tests/src/domain/person/hooks.test.ts b/playground/sveltekit/tests/src/domain/person/hooks.test.ts
index 6fffb62..25649d1 100644
--- a/playground/sveltekit/tests/src/domain/person/hooks.test.ts
+++ b/playground/sveltekit/tests/src/domain/person/hooks.test.ts
@@ -18,74 +18,86 @@ describe("createPersonHooks", () => {
     expect(hooks).toHaveProperty("fetch");
   });
 
-  it("bootstrap has view and edit scope handlers", () => {
+  it("bootstrap has view scope handler", () => {
     expect(hooks.bootstrap![Scope.view]).toBeTypeOf("function");
-    expect(hooks.bootstrap![Scope.edit]).toBeTypeOf("function");
   });
 
-  it("fetch has index scope handler", () => {
+  it("fetch has view, edit, and index scope handlers", () => {
+    expect(hooks.fetch![Scope.view]).toBeTypeOf("function");
+    expect(hooks.fetch![Scope.edit]).toBeTypeOf("function");
     expect(hooks.fetch![Scope.index]).toBeTypeOf("function");
   });
 
-  it("bootstrap[view] calls service.read, hydrates, and disables all fields", async () => {
+  it("fetch[view] calls service.read and hydrates", async () => {
     const data = { id: "1", name: "Alice" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: { id: "1" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(true);
-    expect(schema.email.disabled).toBe(true);
   });
 
-  it("bootstrap[view] does nothing when context.id is missing", async () => {
+  it("fetch[view] does nothing when context.id is missing", async () => {
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: {},
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).not.toHaveBeenCalled();
   });
 
-  it("bootstrap[edit] calls service.read and hydrates without disabling", async () => {
+  it("bootstrap[view] disables all fields", async () => {
+    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+
+    await hooks.bootstrap![Scope.view]!({ context: {}, schema, component });
+
+    expect(schema.name.disabled).toBe(true);
+    expect(schema.email.disabled).toBe(true);
+  });
+
+  it("fetch[edit] calls service.read and hydrates without disabling", async () => {
     const data = { id: "2", name: "Bob" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.edit]!({
+    await hooks.fetch![Scope.edit]!({
+      type: "record",
       context: { id: "2" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(false);
   });
 
-  it("fetch[index] calls service.paginate", async () => {
+  it("fetch[index] calls service.paginate via hydrate", async () => {
     const data = { data: [{ id: "1" }], total: 1, page: 1, limit: 10 };
     vi.mocked(driver.search).mockResolvedValue(data);
 
+    const hydrate = vi.fn();
     const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
     const params = { page: 1, limit: 10 };
-    const result = await hooks.fetch![Scope.index]!({ params, component } as any);
 
-    expect(result).toEqual(data);
+    await hooks.fetch![Scope.index]!({ type: "collection", context: {}, params, hydrate, component } as any);
+
+    expect(hydrate).toHaveBeenCalledWith(data);
   });
 });
diff --git a/playground/vue-quasar/tests/src/domain/person/hooks.test.ts b/playground/vue-quasar/tests/src/domain/person/hooks.test.ts
index cfbf935..1282178 100644
--- a/playground/vue-quasar/tests/src/domain/person/hooks.test.ts
+++ b/playground/vue-quasar/tests/src/domain/person/hooks.test.ts
@@ -18,74 +18,86 @@ describe("createPersonHooks", () => {
     expect(hooks).toHaveProperty("fetch");
   });
 
-  it("bootstrap has view and edit scope handlers", () => {
+  it("bootstrap has view scope handler", () => {
     expect(hooks.bootstrap![Scope.view]).toBeTypeOf("function");
-    expect(hooks.bootstrap![Scope.edit]).toBeTypeOf("function");
   });
 
-  it("fetch has index scope handler", () => {
+  it("fetch has view, edit, and index scope handlers", () => {
+    expect(hooks.fetch![Scope.view]).toBeTypeOf("function");
+    expect(hooks.fetch![Scope.edit]).toBeTypeOf("function");
     expect(hooks.fetch![Scope.index]).toBeTypeOf("function");
   });
 
-  it("bootstrap[view] calls service.read, hydrates, and disables all fields", async () => {
+  it("fetch[view] calls service.read and hydrates", async () => {
     const data = { id: "1", name: "Alice" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: { id: "1" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(true);
-    expect(schema.email.disabled).toBe(true);
   });
 
-  it("bootstrap[view] does nothing when context.id is missing", async () => {
+  it("fetch[view] does nothing when context.id is missing", async () => {
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.view]!({
+    await hooks.fetch![Scope.view]!({
+      type: "record",
       context: {},
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).not.toHaveBeenCalled();
   });
 
-  it("bootstrap[edit] calls service.read and hydrates without disabling", async () => {
+  it("bootstrap[view] disables all fields", async () => {
+    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+
+    await hooks.bootstrap![Scope.view]!({ context: {}, schema, component });
+
+    expect(schema.name.disabled).toBe(true);
+    expect(schema.email.disabled).toBe(true);
+  });
+
+  it("fetch[edit] calls service.read and hydrates without disabling", async () => {
     const data = { id: "2", name: "Bob" };
     vi.mocked(driver.read).mockResolvedValue(data);
 
     const hydrate = vi.fn();
-    const { schema, component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
+    const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
 
-    await hooks.bootstrap![Scope.edit]!({
+    await hooks.fetch![Scope.edit]!({
+      type: "record",
       context: { id: "2" },
+      params: { page: 1, limit: 1 },
       hydrate,
-      schema,
       component,
     } as any);
 
     expect(hydrate).toHaveBeenCalledWith(data);
-    expect(schema.name.disabled).toBe(false);
   });
 
-  it("fetch[index] calls service.paginate", async () => {
+  it("fetch[index] calls service.paginate via hydrate", async () => {
     const data = { data: [{ id: "1" }], total: 1, page: 1, limit: 10 };
     vi.mocked(driver.search).mockResolvedValue(data);
 
+    const hydrate = vi.fn();
     const { component } = createMockContext(PersonSchema, vi.fn).scopes(scopes);
     const params = { page: 1, limit: 10 };
-    const result = await hooks.fetch![Scope.index]!({ params, component } as any);
 
-    expect(result).toEqual(data);
+    await hooks.fetch![Scope.index]!({ type: "collection", context: {}, params, hydrate, component } as any);
+
+    expect(hydrate).toHaveBeenCalledWith(data);
   });
 });

From e73d6e163c233d0ed6c26014c01b16991d073fe6 Mon Sep 17 00:00:00 2001
From: William Correa <wilcorrea@gmail.com>
Date: Tue, 17 Mar 2026 12:52:09 -0300
Subject: [PATCH 2/2] feat(react-web): add `className` prop to `DataPage` and
 remove layout constraints from `flatContainer`

- Add `className?: string` to `PageProps` interface
- Propagate `className` to the root element in both normal and flat modes
- Remove `width: 100%` and `margin: 0 auto` from `flatContainer` style, giving layout control to the host app

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 packages/react-web/src/components/DataPage.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react-web/src/components/DataPage.tsx b/packages/react-web/src/components/DataPage.tsx
index 159bb94..f42b77f 100644
--- a/packages/react-web/src/components/DataPage.tsx
+++ b/packages/react-web/src/components/DataPage.tsx
@@ -22,6 +22,7 @@ interface PageProps {
   title?: string;
   subtitle?: string;
   headerEnd?: ReactNode;
+  className?: string;
 }
 
 export function DataPage (props: PageProps) {
@@ -37,6 +38,7 @@ export function DataPage (props: PageProps) {
     title,
     subtitle,
     headerEnd,
+    className,
     children
   } = props
   const { t } = useTranslation()
@@ -74,8 +76,8 @@ export function DataPage (props: PageProps) {
     const resolvedHeaderEnd = headerEnd ?? registeredActions
     return (
       <PageActionsContext.Provider value={contextValue}>
-        <div style={styles.flatScroll}>
-          <div style={{ ...styles.flatContainer, maxWidth }}>
+        <div style={styles.flatScroll} className={className}>
+          <div>
             <div style={styles.flatHeader}>
               <div>
                 <div style={styles.flatTitle}>{resolvedTitle}</div>
@@ -91,7 +93,7 @@ export function DataPage (props: PageProps) {
   }
 
   return (
-    <div style={styles.scroll}>
+    <div style={styles.scroll} className={className}>
       <div style={{ ...styles.container, maxWidth }}>
         <div style={styles.title}>{t(`${domain}.title`)} / {t(`common.scopes.${scope}`)}</div>
         {children}
@@ -124,10 +126,7 @@ const createStyles = (theme: Theme) => ({
   flatScroll: {
     // No minHeight/backgroundColor/padding — host app controls layout
   },
-  flatContainer: {
-    width: '100%',
-    margin: '0 auto',
-  },
+  flatContainer: {},
   flatHeader: {
     display: 'flex',
     alignItems: 'flex-start',