@asteby/metacore-runtime-react 7.1.5 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @asteby/metacore-runtime-react
 
+## 9.0.0
+
+### Minor Changes
+
+- d51ef45: feat(runtime-react): `DynamicForm` aplica `Validation` (regex/min/max) al schema zod generado y soporta widgets `textarea`/`richtext`/`color`.
+  - `ActionFieldDef` extendido con `validation?: FieldValidation` (regex/min/max/custom — espejo del `ValidationRule` del manifest del kernel) y `widget?: FieldWidget | string`.
+  - `DynamicForm` ahora deriva un schema zod por field y valida en el submit, mostrando errores inline en lugar del `alert()` previo. Min/max aplica como longitud para strings y como bound para numéricos (mismo dual semantics que el kernel). Regex malformada del manifest se ignora silenciosamente para no tirar el render.
+  - Nuevo export `buildZodSchema(fields)` para que callers reutilicen el mismo schema fuera del form.
+  - Renderer mapea widgets explícitos a primitivos de `@asteby/metacore-ui`:
+    - `textarea` → `Textarea`
+    - `richtext` → `Textarea` con `data-widget="richtext"` (puente hasta que aterrice un primitivo MDX/rich; mantiene el contrato sin romper consumers).
+    - `color` → `Input type="color"`.
+  - Backwards compat: zero-value (sin `validation`/`widget`) preserva el comportamiento previo (widget inferido por `type`, sin reglas de validación más allá de `required`).
+
+- 88b176c: feat(runtime-react): `<DynamicRelation kind="many_to_many">` — multi-select sobre la tabla destino, sync transparente contra la tabla pivote (`through`).
+
+  API mínima:
+
+  ```tsx
+  <DynamicRelation
+    kind="many_to_many"
+    through="org_members" // tabla pivote
+    references="users" // tabla destino sobre la que se hace multi-select
+    foreignKey="organization_id" // FK del pivot al padre
+    parentId={org.id}
+  />
+  ```
+
+  - `referencesKey` por default es `${references}_id` (override opcional). Endpoints `/data/${through}` y `/data/${references}` con override por prop si la app expone rutas custom.
+  - Lectura: lista pivot rows filtradas por `f_<foreignKey>=eq:<parentId>` (mismo envelope kernel `{success, data, meta}` que `<DynamicTable>`); lista target rows del modelo `references`.
+  - Escritura: el `<MultiSelect>` dispara un diff entre la selección previa y la nueva. Cada nuevo target → `POST /data/${through}` con `{[foreignKey]: parentId, [referencesKey]: targetId}`. Cada target removido → `DELETE /data/${through}/<pivotRowId>`.
+  - Permisos por prop (`canCreate` controla attach, `canDelete` controla detach — default `true`).
+  - Label de cada opción: `displayKey` prop si está; si no se infiere de la metadata (primer column no-id no-hidden); fallback al `id`.
+  - Nuevos helpers puros exportados: `buildPivotAttachPayload`, `extractSelectedTargetIds`, `buildPivotRowIndex`, `diffSelection`, `pickOptionLabel`.
+
+  `kind="one_to_many"` no cambia.
+
+- 88b176c: feat(runtime-react): nuevo `<DynamicRelation kind="one_to_many">` — lista inline editable que cuelga del registro padre.
+
+  API mínima:
+
+  ```tsx
+  <DynamicRelation
+    kind="one_to_many"
+    model="line_items"
+    foreignKey="invoice_id"
+    parentId={id}
+  />
+  ```
+
+  - Lista filas del modelo hijo filtradas por `f_<foreignKey>=eq:<parentId>` (envelope kernel `{success, data, meta}`).
+  - Crear/Editar via `<DynamicForm>` derivado del `TableMetadata.columns` del modelo; la FK queda fija al `parentId` y se oculta automáticamente del form y de la lista.
+  - Quitar via `DELETE /data/<model>/<id>` con confirm dialog.
+  - Permisos por prop (`canCreate` / `canEdit` / `canDelete` — default `true`) y strings traducibles via prop `strings`.
+  - Helpers puros exportados (`buildRelationFilterParams`, `buildCreatePayload`, `deriveRelationFormFields`, `relationRowKey`) para que callers reutilicen las convenciones fuera del componente.
+  - `kind="many_to_many"` queda stubbed (renderiza `not-implemented`) — sigue como follow-up; la RFC completa vive en `packages/runtime-react/docs/relations.md`.
+  - Ejemplo end-to-end en `examples/dynamic-relation-one-to-many/`.
+
+### Patch Changes
+
+- Updated dependencies [ec9ad56]
+  - @asteby/metacore-sdk@2.4.0
+
+## 8.0.0
+
+### Patch Changes
+
+- Updated dependencies [c91d778]
+- Updated dependencies [64de425]
+  - @asteby/metacore-sdk@2.3.0
+  - @asteby/metacore-ui@2.0.0
+
 ## 7.1.5
 
 ### Patch Changes

package/dist/__tests__/dynamic-form.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dynamic-form.test.d.ts.map

package/dist/__tests__/dynamic-form.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-form.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/dynamic-form.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/dynamic-form.test.js

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest';
+import { buildZodSchema, resolveWidget } from '../dynamic-form-schema';
+describe('buildZodSchema', () => {
+    it('aplica regex de Validation a strings', () => {
+        const fields = [
+            { key: 'sku', label: 'SKU', type: 'string', required: true, validation: { regex: '^[A-Z]{3}-\\d{3}$' } },
+        ];
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ sku: 'ABC-123' }).success).toBe(true);
+        expect(schema.safeParse({ sku: 'abc-123' }).success).toBe(false);
+        expect(schema.safeParse({ sku: 'ABCD-123' }).success).toBe(false);
+    });
+    it('aplica min/max como longitud sobre strings', () => {
+        const fields = [
+            { key: 'name', label: 'Nombre', type: 'string', required: true, validation: { min: 3, max: 8 } },
+        ];
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ name: 'ab' }).success).toBe(false);
+        expect(schema.safeParse({ name: 'abc' }).success).toBe(true);
+        expect(schema.safeParse({ name: 'abcdefgh' }).success).toBe(true);
+        expect(schema.safeParse({ name: 'abcdefghi' }).success).toBe(false);
+    });
+    it('aplica min/max como bounds sobre números', () => {
+        const fields = [
+            { key: 'age', label: 'Edad', type: 'number', required: true, validation: { min: 18, max: 99 } },
+        ];
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ age: 17 }).success).toBe(false);
+        expect(schema.safeParse({ age: 18 }).success).toBe(true);
+        expect(schema.safeParse({ age: 99 }).success).toBe(true);
+        expect(schema.safeParse({ age: 100 }).success).toBe(false);
+    });
+    it('marca campos requeridos vacíos como inválidos', () => {
+        const fields = [
+            { key: 'title', label: 'Título', type: 'string', required: true },
+        ];
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ title: '' }).success).toBe(false);
+        expect(schema.safeParse({ title: 'ok' }).success).toBe(true);
+    });
+    it('campos opcionales aceptan vacío o ausente', () => {
+        const fields = [
+            { key: 'note', label: 'Nota', type: 'string' },
+            { key: 'qty', label: 'Cantidad', type: 'number' },
+        ];
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ note: '', qty: '' }).success).toBe(true);
+        expect(schema.safeParse({}).success).toBe(true);
+    });
+    it('valida email y url por type', () => {
+        const fields = [
+            { key: 'mail', label: 'Email', type: 'email', required: true },
+            { key: 'site', label: 'URL', type: 'url', required: true },
+        ];
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ mail: 'a@b.co', site: 'https://x.test' }).success).toBe(true);
+        expect(schema.safeParse({ mail: 'no-email', site: 'https://x.test' }).success).toBe(false);
+        expect(schema.safeParse({ mail: 'a@b.co', site: 'no-url' }).success).toBe(false);
+    });
+    it('regex inválida no rompe el build (silently skipped)', () => {
+        const fields = [
+            { key: 'x', label: 'X', type: 'string', required: true, validation: { regex: '[invalid(' } },
+        ];
+        expect(() => buildZodSchema(fields)).not.toThrow();
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ x: 'anything' }).success).toBe(true);
+    });
+    it('booleans requeridos exigen un valor explícito', () => {
+        const fields = [
+            { key: 'agree', label: 'Acepto', type: 'boolean', required: true },
+        ];
+        const schema = buildZodSchema(fields);
+        expect(schema.safeParse({ agree: true }).success).toBe(true);
+        expect(schema.safeParse({ agree: false }).success).toBe(true);
+        expect(schema.safeParse({}).success).toBe(false);
+    });
+});
+describe('resolveWidget', () => {
+    it('respeta widget explícito', () => {
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'string', widget: 'textarea' })).toBe('textarea');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'string', widget: 'richtext' })).toBe('richtext');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'string', widget: 'color' })).toBe('color');
+    });
+    it('cae al inferido por type cuando widget no está', () => {
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'textarea' })).toBe('textarea');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'select' })).toBe('select');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'boolean' })).toBe('switch');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'number' })).toBe('number');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'date' })).toBe('date');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'string' })).toBe('text');
+        expect(resolveWidget({ key: 'k', label: 'L', type: 'email' })).toBe('text');
+    });
+});

package/dist/__tests__/dynamic-relation.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dynamic-relation.test.d.ts.map

package/dist/__tests__/dynamic-relation.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-relation.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/dynamic-relation.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/dynamic-relation.test.js

@@ -0,0 +1,228 @@
+import { describe, it, expect } from 'vitest';
+import { buildCreatePayload, buildPivotAttachPayload, buildPivotRowIndex, buildRelationFilterParams, deriveRelationFormFields, diffSelection, extractSelectedTargetIds, pickOptionLabel, relationRowKey, } from '../dynamic-relation-helpers';
+describe('buildRelationFilterParams', () => {
+    it('produce el filtro f_<fk>=eq:<id> con string parentId', () => {
+        expect(buildRelationFilterParams('invoice_id', 'inv_42')).toEqual({
+            f_invoice_id: 'eq:inv_42',
+        });
+    });
+    it('coerce parentId numérico a string en el query', () => {
+        expect(buildRelationFilterParams('invoice_id', 42)).toEqual({
+            f_invoice_id: 'eq:42',
+        });
+    });
+    it('rechaza foreignKey vacío', () => {
+        expect(() => buildRelationFilterParams('', 'x')).toThrow(/foreignKey/);
+    });
+    it('rechaza parentId vacío / null / undefined', () => {
+        expect(() => buildRelationFilterParams('invoice_id', '')).toThrow(/parentId/);
+        // @ts-expect-error testing runtime guard
+        expect(() => buildRelationFilterParams('invoice_id', null)).toThrow(/parentId/);
+        // @ts-expect-error testing runtime guard
+        expect(() => buildRelationFilterParams('invoice_id', undefined)).toThrow(/parentId/);
+    });
+});
+describe('buildCreatePayload', () => {
+    it('inyecta el foreign key sobre los valores del form', () => {
+        const payload = buildCreatePayload('invoice_id', 'inv_42', { qty: 3, sku: 'A' });
+        expect(payload).toEqual({ qty: 3, sku: 'A', invoice_id: 'inv_42' });
+    });
+    it('el foreign key sobreescribe lo que venga del form', () => {
+        const payload = buildCreatePayload('invoice_id', 'inv_42', { invoice_id: 'inv_OTHER', qty: 1 });
+        expect(payload.invoice_id).toBe('inv_42');
+    });
+    it('preserva el parentId numérico tal cual', () => {
+        const payload = buildCreatePayload('invoice_id', 7, { qty: 1 });
+        expect(payload.invoice_id).toBe(7);
+    });
+    it('rechaza foreignKey vacío', () => {
+        expect(() => buildCreatePayload('', 'x', {})).toThrow(/foreignKey/);
+    });
+});
+describe('deriveRelationFormFields', () => {
+    const baseMeta = {
+        columns: [
+            { key: 'id', label: 'ID', type: 'text', sortable: true, filterable: false, hidden: true },
+            { key: 'invoice_id', label: 'Factura', type: 'text', sortable: false, filterable: false },
+            { key: 'sku', label: 'SKU', type: 'text', sortable: true, filterable: true },
+            { key: 'qty', label: 'Cantidad', type: 'number', sortable: true, filterable: false },
+            { key: 'taxable', label: 'Aplica IVA', type: 'boolean', sortable: false, filterable: false },
+            { key: 'category', label: 'Categoría', type: 'select', sortable: false, filterable: true, options: [
+                    { value: 'a', label: 'A' }, { value: 'b', label: 'B' },
+                ] },
+        ],
+    };
+    it('omite la foreign key porque está fija al parentId', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id');
+        expect(fields.find(f => f.key === 'invoice_id')).toBeUndefined();
+    });
+    it('omite columnas marcadas hidden', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id');
+        expect(fields.find(f => f.key === 'id')).toBeUndefined();
+    });
+    it('mapea types de ColumnDefinition al ActionFieldDef.type', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id');
+        const byKey = Object.fromEntries(fields.map(f => [f.key, f]));
+        expect(byKey['sku']?.type).toBe('string');
+        expect(byKey['qty']?.type).toBe('number');
+        expect(byKey['taxable']?.type).toBe('boolean');
+        expect(byKey['category']?.type).toBe('select');
+    });
+    it('propaga options con value coerced a string', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id');
+        const cat = fields.find(f => f.key === 'category');
+        expect(cat?.options).toEqual([
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B' },
+        ]);
+    });
+    it('devuelve [] cuando no hay metadata', () => {
+        expect(deriveRelationFormFields(null, 'invoice_id')).toEqual([]);
+        expect(deriveRelationFormFields(undefined, 'invoice_id')).toEqual([]);
+        expect(deriveRelationFormFields({ columns: [] }, 'invoice_id')).toEqual([]);
+    });
+});
+describe('relationRowKey', () => {
+    it('usa row.id como key cuando existe', () => {
+        expect(relationRowKey({ id: 'abc' }, 0, 'invoice_id')).toBe('abc');
+        expect(relationRowKey({ id: 7 }, 5, 'invoice_id')).toBe('7');
+    });
+    it('cae a synthetic key cuando id falta o es vacío', () => {
+        expect(relationRowKey({}, 2, 'invoice_id')).toBe('__rel-invoice_id-2');
+        expect(relationRowKey({ id: '' }, 3, 'invoice_id')).toBe('__rel-invoice_id-3');
+        expect(relationRowKey({ id: null }, 1, 'invoice_id')).toBe('__rel-invoice_id-1');
+        expect(relationRowKey(undefined, 0, 'invoice_id')).toBe('__rel-invoice_id-0');
+    });
+});
+// ---------------------------------------------------------------------------
+// many_to_many helpers
+// ---------------------------------------------------------------------------
+describe('buildPivotAttachPayload', () => {
+    it('produce el body con los dos FKs fijos', () => {
+        const body = buildPivotAttachPayload('org_id', 'org_1', 'user_id', 'user_42');
+        expect(body).toEqual({ org_id: 'org_1', user_id: 'user_42' });
+    });
+    it('mezcla campos extra del pivot sin pisar los FKs', () => {
+        const body = buildPivotAttachPayload('org_id', 1, 'user_id', 2, {
+            role: 'owner',
+            org_id: 'evil',
+            user_id: 'evil',
+        });
+        expect(body.org_id).toBe(1);
+        expect(body.user_id).toBe(2);
+        expect(body.role).toBe('owner');
+    });
+    it('rechaza foreignKey / referencesKey vacíos', () => {
+        expect(() => buildPivotAttachPayload('', 'p', 'r', 't')).toThrow(/foreignKey/);
+        expect(() => buildPivotAttachPayload('f', 'p', '', 't')).toThrow(/referencesKey/);
+    });
+    it('rechaza parentId / targetId vacíos', () => {
+        expect(() => buildPivotAttachPayload('f', '', 'r', 't')).toThrow(/parentId/);
+        expect(() => buildPivotAttachPayload('f', 'p', 'r', '')).toThrow(/targetId/);
+        // @ts-expect-error testing runtime guard
+        expect(() => buildPivotAttachPayload('f', 'p', 'r', null)).toThrow(/targetId/);
+    });
+});
+describe('extractSelectedTargetIds', () => {
+    it('mapea pivot rows al set de target ids como strings', () => {
+        const ids = extractSelectedTargetIds([
+            { id: 1, org_id: 'org_1', user_id: 'u_1' },
+            { id: 2, org_id: 'org_1', user_id: 7 },
+        ], 'user_id');
+        expect(ids).toEqual(['u_1', '7']);
+    });
+    it('omite filas sin valor en el referencesKey', () => {
+        const ids = extractSelectedTargetIds([
+            { id: 1, user_id: 'u_1' },
+            { id: 2, user_id: null },
+            { id: 3, user_id: '' },
+            { id: 4 },
+        ], 'user_id');
+        expect(ids).toEqual(['u_1']);
+    });
+    it('devuelve [] cuando no hay rows o referencesKey', () => {
+        expect(extractSelectedTargetIds(null, 'user_id')).toEqual([]);
+        expect(extractSelectedTargetIds(undefined, 'user_id')).toEqual([]);
+        expect(extractSelectedTargetIds([{ user_id: 'x' }], '')).toEqual([]);
+    });
+});
+describe('buildPivotRowIndex', () => {
+    it('mapea targetId -> pivotRowId', () => {
+        const idx = buildPivotRowIndex([
+            { id: 'p1', user_id: 'u_1' },
+            { id: 'p2', user_id: 7 },
+        ], 'user_id');
+        expect(idx.get('u_1')).toBe('p1');
+        expect(idx.get('7')).toBe('p2');
+    });
+    it('omite filas sin id pivot o sin target', () => {
+        const idx = buildPivotRowIndex([
+            { id: 'p1', user_id: 'u_1' },
+            { user_id: 'u_2' },
+            { id: 'p3' },
+            { id: 'p4', user_id: null },
+        ], 'user_id');
+        expect(Array.from(idx.keys())).toEqual(['u_1']);
+    });
+    it('última fila gana cuando hay duplicados', () => {
+        const idx = buildPivotRowIndex([
+            { id: 'p1', user_id: 'u_1' },
+            { id: 'p2', user_id: 'u_1' },
+        ], 'user_id');
+        expect(idx.get('u_1')).toBe('p2');
+    });
+});
+describe('diffSelection', () => {
+    it('detecta toAdd y toRemove respecto al estado previo', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b', 'c'], ['b', 'c', 'd']);
+        expect(toAdd).toEqual(['d']);
+        expect(toRemove).toEqual(['a']);
+    });
+    it('preserva el orden de aparición en next/prev', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b'], ['c', 'a', 'd']);
+        expect(toAdd).toEqual(['c', 'd']);
+        expect(toRemove).toEqual(['b']);
+    });
+    it('devuelve arrays vacíos cuando no cambia nada', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b'], ['b', 'a']);
+        expect(toAdd).toEqual([]);
+        expect(toRemove).toEqual([]);
+    });
+    it('caso vacío -> next agrega todo', () => {
+        const { toAdd, toRemove } = diffSelection([], ['a', 'b']);
+        expect(toAdd).toEqual(['a', 'b']);
+        expect(toRemove).toEqual([]);
+    });
+    it('caso prev -> [] remueve todo', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b'], []);
+        expect(toAdd).toEqual([]);
+        expect(toRemove).toEqual(['a', 'b']);
+    });
+});
+describe('pickOptionLabel', () => {
+    const cols = [
+        { key: 'id', label: 'ID', type: 'text', sortable: false, filterable: false, hidden: true },
+        { key: 'name', label: 'Nombre', type: 'text', sortable: true, filterable: true },
+        { key: 'email', label: 'Email', type: 'text', sortable: false, filterable: true },
+    ];
+    it('respeta displayKey cuando existe en la fila', () => {
+        expect(pickOptionLabel({ id: 1, name: 'Alice', email: 'a@x' }, 'email', cols)).toBe('a@x');
+    });
+    it('cae al primer column no-id no-hidden cuando displayKey falta', () => {
+        expect(pickOptionLabel({ id: 1, name: 'Alice', email: 'a@x' }, undefined, cols)).toBe('Alice');
+    });
+    it('salta valores nulos / vacíos al inferir', () => {
+        expect(pickOptionLabel({ id: 1, name: '', email: 'a@x' }, undefined, cols)).toBe('a@x');
+    });
+    it('cae a row.id cuando no hay match en columns', () => {
+        expect(pickOptionLabel({ id: 7 }, undefined, cols)).toBe('7');
+        expect(pickOptionLabel({ id: 7 }, undefined, undefined)).toBe('7');
+    });
+    it('devuelve "—" cuando no hay nada usable', () => {
+        expect(pickOptionLabel(null, undefined, cols)).toBe('—');
+        expect(pickOptionLabel({}, undefined, cols)).toBe('—');
+    });
+    it('ignora valores object al inferir', () => {
+        expect(pickOptionLabel({ id: 1, name: { nested: true }, email: 'a@x' }, undefined, cols)).toBe('a@x');
+    });
+});

package/dist/dynamic-form-schema.d.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+import type { ActionFieldDef } from './types';
+export declare function buildZodSchema(fields: ActionFieldDef[]): z.ZodObject<{
+    [x: string]: z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>;
+}, z.core.$strip>;
+export declare function resolveWidget(field: ActionFieldDef): string;
+//# sourceMappingURL=dynamic-form-schema.d.ts.map

package/dist/dynamic-form-schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-form-schema.d.ts","sourceRoot":"","sources":["../src/dynamic-form-schema.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,CAAC,EAAmB,MAAM,KAAK,CAAA;AACxC,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,SAAS,CAAA;AAM9D,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE;;kBAMtD;AAuCD,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAU3D"}

package/dist/dynamic-form-schema.js

@@ -0,0 +1,68 @@
+// Pure schema-building helpers for DynamicForm. Lives in its own module so
+// callers (and unit tests) can use the zod schema without pulling in React or
+// metacore-ui primitives.
+import { z } from 'zod';
+// Builds a zod object schema from an ActionFieldDef[]. Required fields stay
+// non-empty; optional fields accept undefined / "". Validation rules
+// (regex/min/max) layer on top: for numeric columns they bound the value, for
+// strings they bound length — same dual semantics the kernel uses.
+export function buildZodSchema(fields) {
+    const shape = {};
+    for (const field of fields) {
+        shape[field.key] = fieldToZod(field);
+    }
+    return z.object(shape);
+}
+function fieldToZod(field) {
+    const v = field.validation ?? {};
+    const isNumeric = field.type === 'number';
+    const isBool = field.type === 'boolean';
+    if (isBool) {
+        const base = z.boolean();
+        return field.required ? base : base.optional();
+    }
+    if (isNumeric) {
+        let s = z.coerce.number();
+        if (typeof v.min === 'number')
+            s = s.min(v.min, `Debe ser ≥ ${v.min}`);
+        if (typeof v.max === 'number')
+            s = s.max(v.max, `Debe ser ≤ ${v.max}`);
+        if (field.required)
+            return s;
+        return z.preprocess((val) => (val === '' || val == null ? undefined : val), s.optional());
+    }
+    let s = z.string();
+    if (typeof v.min === 'number')
+        s = s.min(v.min, `Mínimo ${v.min} caracteres`);
+    if (typeof v.max === 'number')
+        s = s.max(v.max, `Máximo ${v.max} caracteres`);
+    if (v.regex) {
+        try {
+            s = s.regex(new RegExp(v.regex), `Formato inválido`);
+        }
+        catch { /* malformed regex from manifest — skip rather than throw at render time */ }
+    }
+    if (field.type === 'email')
+        s = s.email('Email inválido');
+    if (field.type === 'url')
+        s = s.url('URL inválida');
+    if (field.required) {
+        return s.min(Math.max(typeof v.min === 'number' ? v.min : 1, 1), `${field.label} es requerido`);
+    }
+    return s.optional().or(z.literal(''));
+}
+// Resolves the renderer widget for a field. Explicit `widget` wins; otherwise
+// it is inferred from `type` to preserve the legacy behaviour (zero-value =
+// same render as before).
+export function resolveWidget(field) {
+    if (field.widget)
+        return field.widget;
+    switch (field.type) {
+        case 'textarea': return 'textarea';
+        case 'select': return 'select';
+        case 'boolean': return 'switch';
+        case 'number': return 'number';
+        case 'date': return 'date';
+        default: return 'text';
+    }
+}

package/dist/dynamic-form.d.ts

@@ -1,4 +1,6 @@
 import type { ActionFieldDef } from './types';
+import { buildZodSchema, resolveWidget } from './dynamic-form-schema';
+export { buildZodSchema, resolveWidget };
 export interface DynamicFormProps {
     fields: ActionFieldDef[];
     initialValues?: Record<string, any>;

package/dist/dynamic-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,2CA+ClB"}
+{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAErE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AAExC,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,2CA4DlB"}

package/dist/dynamic-form.js

@@ -2,44 +2,63 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Minimal standalone DynamicForm. Factored from the dynamic-record-dialog
 // pattern + ActionFieldDef renderer so callers can reuse the form layout
 // outside the full record-edit modal.
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Input, Textarea, Label, Switch, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@asteby/metacore-ui/primitives';
+import { buildZodSchema, resolveWidget } from './dynamic-form-schema';
+export { buildZodSchema, resolveWidget };
 export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitLabel = 'Guardar', cancelLabel = 'Cancelar', disabled = false, }) {
     const [values, setValues] = useState({});
+    const [errors, setErrors] = useState({});
     const [submitting, setSubmitting] = useState(false);
+    const schema = useMemo(() => buildZodSchema(fields), [fields]);
     useEffect(() => {
         const defaults = {};
         for (const f of fields) {
             defaults[f.key] = initialValues?.[f.key] ?? f.defaultValue ?? (f.type === 'boolean' ? false : '');
         }
         setValues(defaults);
+        setErrors({});
     }, [fields, initialValues]);
     const update = (k, v) => setValues((prev) => ({ ...prev, [k]: v }));
     const handleSubmit = async (e) => {
         e.preventDefault();
-        for (const f of fields) {
-            if (f.required && !values[f.key] && values[f.key] !== false) {
-                alert(`${f.label} es requerido`);
-                return;
+        const result = schema.safeParse(values);
+        if (!result.success) {
+            const next = {};
+            for (const issue of result.error.issues) {
+                const key = issue.path[0];
+                if (typeof key === 'string' && !next[key])
+                    next[key] = issue.message;
             }
+            setErrors(next);
+            return;
         }
+        setErrors({});
         setSubmitting(true);
         try {
-            await onSubmit(values);
+            await onSubmit(result.data);
         }
         finally {
             setSubmitting(false);
         }
     };
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "grid gap-4", children: [fields.map((field) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, values[field.key], (v) => update(field.key, v))] }, field.key))), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })), _jsx(Button, { type: "submit", disabled: submitting || disabled, children: submitLabel })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "grid gap-4", children: [fields.map((field) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, values[field.key], (v) => update(field.key, v)), errors[field.key] && (_jsx("span", { className: "text-red-500 text-sm", role: "alert", children: errors[field.key] }))] }, field.key))), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })), _jsx(Button, { type: "submit", disabled: submitting || disabled, children: submitLabel })] })] }));
 }
 function renderField(field, value, onChange) {
-    switch (field.type) {
+    const widget = resolveWidget(field);
+    switch (widget) {
         case 'textarea':
             return _jsx(Textarea, { id: field.key, value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder });
+        case 'richtext':
+            // Until a real rich-text primitive lands in metacore-ui this maps
+            // to a tagged Textarea. The data attribute lets app-level theming
+            // / future MDX editor pick it up without breaking the contract.
+            return _jsx(Textarea, { id: field.key, "data-widget": "richtext", value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder });
+        case 'color':
+            return _jsx(Input, { id: field.key, type: "color", value: value || '#000000', onChange: (e) => onChange(e.target.value) });
         case 'select':
             return (_jsxs(Select, { value: value || '', onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: field.placeholder || 'Seleccionar...' }) }), _jsx(SelectContent, { children: field.options?.map((opt) => _jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })] }));
-        case 'boolean':
+        case 'switch':
             return _jsx(Switch, { id: field.key, checked: !!value, onCheckedChange: onChange });
         case 'number':
             return _jsx(Input, { id: field.key, type: "number", value: value ?? '', onChange: (e) => onChange(e.target.valueAsNumber || ''), placeholder: field.placeholder });