From fc7a97c0459501661a3fa0b5567c00cb89aaa4cc Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 27 Dec 2024 17:33:47 +0100
Subject: [PATCH 01/14] display errors

---
 .../builder/settings/BuilderFieldsText.vue    | 13 ++-
 .../settings/BuilderSettingsProperties.vue    | 26 ++++-
 .../builder/settings/BuilderTemplateInput.vue |  3 +
 .../src/components/core/content/CoreText.vue  | 94 +++++++++++--------
 src/ui/src/wds/WdsFieldWrapper.vue            | 16 +++-
 src/ui/src/wds/WdsTextInput.vue               |  9 +-
 src/ui/src/wds/WdsTextareaInput.vue           |  9 +-
 src/ui/src/writerTypes.ts                     | 14 ++-
 8 files changed, 129 insertions(+), 55 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderFieldsText.vue b/src/ui/src/builder/settings/BuilderFieldsText.vue
index f6e0db840..72b172a4f 100644
--- a/src/ui/src/builder/settings/BuilderFieldsText.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsText.vue
@@ -12,6 +12,7 @@
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
 				:options="options"
+				:error="error"
 				@input="handleInput"
 			/>
 		</template>
@@ -23,6 +24,7 @@
 				:input-id="inputId"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
+				:error="error"
 				@input="handleInput"
 			/>
 		</template>
@@ -30,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, inject, computed } from "vue";
+import { toRefs, inject, computed, PropType } from "vue";
 import { Component, FieldControl } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
@@ -40,10 +42,11 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 const templateField = computed(() => {
diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index b760fac0a..ba29f24ed 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -29,6 +29,7 @@
 					"
 					:hint="fieldValue.desc"
 					:unit="fieldValue.type"
+					:error="computeErrorField(fieldKey)"
 				>
 					<BuilderFieldsColor
 						v-if="fieldValue.type == FieldType.Color"
@@ -53,6 +54,7 @@
 						v-if="fieldValue.type == FieldType.Text"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="computeErrorField(fieldKey)"
 					></BuilderFieldsText>
 
 					<BuilderFieldsText
@@ -126,6 +128,7 @@ import BuilderFieldsText from "./BuilderFieldsText.vue";
 import BuilderFieldsWidth from "./BuilderFieldsWidth.vue";
 import BuilderFieldsTools from "./BuilderFieldsTools.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import { useEvaluator } from "@/renderer/useEvaluator";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -138,12 +141,29 @@ const selectedComponent = computed(() => {
 	return wf.getComponentById(ssbm.getSelectedId());
 });
 
-const fields = computed(() => {
+const componentDefinition = computed(() => {
 	const { type } = selectedComponent.value;
-	const definition = wf.getComponentDefinition(type);
-	return definition.fields;
+	return wf.getComponentDefinition(type);
+});
+const fields = computed(() => {
+	return componentDefinition.value?.fields;
 });
 
+function computeErrorField(fieldKey: string) {
+	const validator = fields.value[fieldKey]?.validator;
+	if (!validator) return undefined;
+
+	const evaluatedField = useEvaluator(wf).getEvaluatedFields(
+		selectedInstancePath.value,
+	);
+
+	return (
+		validator(evaluatedField[fieldKey].value, evaluatedField).errors.join(
+			"\n",
+		) || undefined
+	);
+}
+
 const fieldCategories = computed(() => {
 	return [
 		FieldCategory.General,
diff --git a/src/ui/src/builder/settings/BuilderTemplateInput.vue b/src/ui/src/builder/settings/BuilderTemplateInput.vue
index 37596b9d7..5eacf2f8e 100644
--- a/src/ui/src/builder/settings/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/settings/BuilderTemplateInput.vue
@@ -9,6 +9,7 @@
 				spellcheck="false"
 				:placeholder="props.placeholder"
 				:list="props.options ? `list-${props.inputId}` : undefined"
+				:invalid="error !== undefined"
 				@input="handleInput"
 				@blur="closeAutocompletion"
 			/>
@@ -38,6 +39,7 @@
 				spellcheck="false"
 				rows="3"
 				:placeholder="props.placeholder"
+				:invalid="error !== undefined"
 				@input="handleInput"
 			/>
 		</template>
@@ -99,6 +101,7 @@ const props = defineProps({
 		default: undefined,
 	},
 	placeholder: { type: String, required: false, default: undefined },
+	error: { type: String, required: false, default: undefined },
 });
 
 const ss = inject(injectionKeys.core);
diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index 8894993d0..3349be342 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -24,7 +24,12 @@
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 import { getClick } from "@/renderer/syntheticEvents";
-import { FieldCategory, FieldControl, FieldType } from "@/writerTypes";
+import {
+	FieldCategory,
+	FieldControl,
+	FieldType,
+	WriterComponentDefinition,
+} from "@/writerTypes";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -36,52 +41,61 @@ def click_handler(state):
 const description =
 	"A component to display plain text or formatted text using Markdown syntax.";
 
-export default {
-	writer: {
-		name: "Text",
-		description,
-		category: "Content",
-		fields: {
-			text: {
-				name: "Text",
-				init: "Text",
-				desc: "Add text directly, or reference state elements with @{my_text}.",
-				type: FieldType.Text,
-				control: FieldControl.Textarea,
-			},
-			useMarkdown: {
-				name: "Use Markdown",
-				desc: "The Markdown output will be sanitised; unsafe elements will be removed.",
-				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
+const definition: WriterComponentDefinition = {
+	name: "Text",
+	description,
+	category: "Content",
+	fields: {
+		text: {
+			name: "Text",
+			init: "Text",
+			desc: "Add text directly, or reference state elements with @{my_text}.",
+			type: FieldType.Text,
+			control: FieldControl.Textarea,
+		},
+		useMarkdown: {
+			name: "Use Markdown",
+			desc: "The Markdown output will be sanitised; unsafe elements will be removed.",
+			default: "no",
+			type: FieldType.Text,
+			options: {
+				yes: "Yes",
+				no: "No",
 			},
-			alignment: {
-				name: "Alignment",
-				default: "left",
-				type: FieldType.Text,
-				options: {
-					left: "Left",
-					center: "Center",
-					right: "Right",
-				},
-				category: FieldCategory.Style,
+			validator(value: string) {
+				const errors = [];
+				console.log(value);
+				if (value && !["yes", "no"].includes(value)) {
+					errors.push('The value need to be "yes" or "no"');
+				}
+
+				return { errors };
 			},
-			primaryTextColor,
-			cssClasses,
 		},
-		events: {
-			"wf-click": {
-				desc: "Capture single clicks.",
-				stub: clickHandlerStub.trim(),
+		alignment: {
+			name: "Alignment",
+			default: "left",
+			type: FieldType.Text,
+			options: {
+				left: "Left",
+				center: "Center",
+				right: "Right",
 			},
+			category: FieldCategory.Style,
 		},
-		previewField: "text",
+		primaryTextColor,
+		cssClasses,
 	},
+	events: {
+		"wf-click": {
+			desc: "Capture single clicks.",
+			stub: clickHandlerStub.trim(),
+		},
+	},
+	previewField: "text",
 };
+
+export default { writer: definition };
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index e369038da..9892cc681 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -21,7 +21,8 @@
 			</WdsButton>
 		</div>
 		<div class="WdsFieldWrapper__slot"><slot></slot></div>
-		<div v-if="hint" class="WdsFieldWrapper__hint">{{ hint }}</div>
+		<p v-if="error" class="WdsFieldWrapper__error">{{ error }}</p>
+		<p v-if="hint" class="WdsFieldWrapper__hint">{{ hint }}</p>
 	</div>
 </template>
 
@@ -32,6 +33,7 @@ defineProps({
 	label: { type: String, required: false, default: undefined },
 	unit: { type: String, required: false, default: undefined },
 	hint: { type: String, required: false, default: undefined },
+	error: { type: String, required: false, default: undefined },
 	helpButton: {
 		type: [String, Boolean],
 		required: false,
@@ -71,12 +73,20 @@ defineEmits({
 	color: var(--secondaryTextColor);
 }
 
-.WdsFieldWrapper__hint {
-	color: var(--secondaryTextColor);
+.WdsFieldWrapper__hint,
+.WdsFieldWrapper__error {
 	margin-top: 4px;
 	font-family: Poppins;
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 160%;
 }
+
+.WdsFieldWrapper__hint {
+	color: var(--secondaryTextColor);
+}
+
+.WdsFieldWrapper__error {
+	color: var(--builderErrorColor);
+}
 </style>
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index 858df72f1..763bcb0a0 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -1,8 +1,9 @@
 <template>
 	<div
 		v-if="leftIcon"
-		class="WdsTextInput WdsTextInput--leftIcon colorTransformer"
 		v-bind="$attrs"
+		class="WdsTextInput WdsTextInput--leftIcon colorTransformer"
+		:aria-invalid="invalid"
 		@click="input.focus()"
 	>
 		<i class="material-symbols-outlined">{{ leftIcon }}</i>
@@ -13,6 +14,7 @@
 		v-bind="$attrs"
 		ref="input"
 		v-model="model"
+		:aria-invalid="invalid"
 		class="WdsTextInput colorTransformer"
 	/>
 </template>
@@ -27,6 +29,7 @@ defineOptions({ inheritAttrs: false });
 
 defineProps({
 	leftIcon: { type: String, required: false, default: undefined },
+	invalid: { type: Boolean, required: false },
 });
 
 defineExpose({
@@ -100,4 +103,8 @@ function focus() {
 	box-shadow: none;
 	outline: none;
 }
+
+.WdsTextInput[aria-invalid="true"] {
+	border-color: var(--wdsColorOrange5);
+}
 </style>
diff --git a/src/ui/src/wds/WdsTextareaInput.vue b/src/ui/src/wds/WdsTextareaInput.vue
index 362254b4a..d53e0c99f 100644
--- a/src/ui/src/wds/WdsTextareaInput.vue
+++ b/src/ui/src/wds/WdsTextareaInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<textarea ref="input" v-model="model"></textarea>
+	<textarea ref="input" v-model="model" :aria-invalid="invalid"></textarea>
 </template>
 
 <script setup lang="ts">
@@ -7,6 +7,10 @@ import { ref } from "vue";
 
 const model = defineModel<string>();
 
+defineProps({
+	invalid: { type: Boolean, required: false },
+});
+
 defineExpose({
 	focus,
 	getSelection,
@@ -52,4 +56,7 @@ textarea:focus {
 	border: 1px solid var(--softenedAccentColor);
 	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
 }
+textarea[aria-invalid="true"] {
+	border-color: var(--wdsColorOrange5);
+}
 </style>
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 4eb9d554a..3ac7566ca 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -50,13 +50,19 @@ export type InstancePathItem = {
 /**
  * Details the full path, including all ancestors, of a unique instance of a Component.
  */
-
 export type InstancePath = InstancePathItem[];
 
 /**
- * Defines component structure and behaviour. Included in Component templates.
+ *
  */
+export type WriterComponentDefinitionFieldValidator = (
+	value: unknown,
+	fields: Record<string, unknown>,
+) => { errors: string[]; valid: boolean };
 
+/**
+ * Defines component structure and behaviour. Included in Component templates.
+ */
 export type WriterComponentDefinitionField = {
 	/** Display name */
 	name: string;
@@ -77,6 +83,10 @@ export type WriterComponentDefinitionField = {
 	category?: FieldCategory;
 	/** Use the value of this field as a CSS variable */
 	applyStyleVariable?: boolean;
+	validator?: (
+		value: unknown,
+		fields: Record<string, unknown>,
+	) => { errors: string[]; valid: boolean };
 };
 
 export type WriterComponentDefinition = {

From 4301d31df3780ee6b32c70864d635cde9eb48be0 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 27 Dec 2024 18:20:13 +0100
Subject: [PATCH 02/14] use a more performant way

---
 .../settings/BuilderSettingsProperties.vue    | 12 ++---
 .../builder/settings/BuilderTemplateInput.vue |  2 +-
 .../src/components/core/content/CoreText.vue  |  2 +-
 src/ui/src/renderer/useEvaluator.ts           | 54 ++++++++++++++++---
 src/ui/src/writerTypes.ts                     |  7 +--
 5 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index ba29f24ed..60884a066 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -29,7 +29,7 @@
 					"
 					:hint="fieldValue.desc"
 					:unit="fieldValue.type"
-					:error="computeErrorField(fieldKey)"
+					:error="errorsByFields[fieldKey]"
 				>
 					<BuilderFieldsColor
 						v-if="fieldValue.type == FieldType.Color"
@@ -54,7 +54,7 @@
 						v-if="fieldValue.type == FieldType.Text"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
-						:error="computeErrorField(fieldKey)"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsText>
 
 					<BuilderFieldsText
@@ -157,13 +157,13 @@ function computeErrorField(fieldKey: string) {
 		selectedInstancePath.value,
 	);
 
-	return (
-		validator(evaluatedField[fieldKey].value, evaluatedField).errors.join(
-			"\n",
-		) || undefined
+	return validator(evaluatedField[fieldKey].value, evaluatedField)?.join(
+		"\n",
 	);
 }
 
+const errorsByFields = useEvaluator(wf).useFieldsError(selectedInstancePath);
+
 const fieldCategories = computed(() => {
 	return [
 		FieldCategory.General,
diff --git a/src/ui/src/builder/settings/BuilderTemplateInput.vue b/src/ui/src/builder/settings/BuilderTemplateInput.vue
index 5eacf2f8e..6c92717cb 100644
--- a/src/ui/src/builder/settings/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/settings/BuilderTemplateInput.vue
@@ -9,7 +9,7 @@
 				spellcheck="false"
 				:placeholder="props.placeholder"
 				:list="props.options ? `list-${props.inputId}` : undefined"
-				:invalid="error !== undefined"
+				:invalid="!!error"
 				@input="handleInput"
 				@blur="closeAutocompletion"
 			/>
diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index 3349be342..16717f36f 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -69,7 +69,7 @@ const definition: WriterComponentDefinition = {
 					errors.push('The value need to be "yes" or "no"');
 				}
 
-				return { errors };
+				return errors;
 			},
 		},
 		alignment: {
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index ec82916e3..8c6a2d944 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -1,5 +1,11 @@
 import { ComputedRef, computed } from "vue";
-import { Component, Core, FieldType, InstancePath } from "@/writerTypes";
+import {
+	Component,
+	Core,
+	FieldType,
+	InstancePath,
+	WriterComponentDefinitionFieldValidator,
+} from "@/writerTypes";
 
 export function useEvaluator(wf: Core) {
 	const templateRegex = /[\\]?@{([^}]*)}/g;
@@ -17,7 +23,7 @@ export function useEvaluator(wf: Core) {
 			s = "";
 		let level = 0;
 
-		let i = 0
+		let i = 0;
 		while (i < expr.length) {
 			const c = expr.charAt(i);
 			if (c == "\\") {
@@ -51,7 +57,7 @@ export function useEvaluator(wf: Core) {
 				s += c;
 			}
 
-			i++
+			i++;
 		}
 
 		if (s) {
@@ -142,11 +148,15 @@ export function useEvaluator(wf: Core) {
 		return evaluatedTemplate;
 	}
 
+	function getComponentFromInstancePath(instancePath: InstancePath) {
+		const { componentId } = instancePath.at(-1);
+		return wf.getComponentById(componentId);
+	}
+
 	function getEvaluatedFields(
 		instancePath: InstancePath,
 	): Record<string, ComputedRef<any>> {
-		const { componentId } = instancePath.at(-1);
-		const component = wf.getComponentById(componentId);
+		const component = getComponentFromInstancePath(instancePath);
 		if (!component) return;
 		const evaluatedFields: Record<string, ComputedRef<any>> = {};
 		const { fields } = wf.getComponentDefinition(component.type);
@@ -173,7 +183,11 @@ export function useEvaluator(wf: Core) {
 			typeof evaluated == "undefined" ||
 			evaluated === null ||
 			evaluated === "";
-		if (fieldType == FieldType.Object || fieldType == FieldType.KeyValue || fieldType == FieldType.Tools) {
+		if (
+			fieldType == FieldType.Object ||
+			fieldType == FieldType.KeyValue ||
+			fieldType == FieldType.Tools
+		) {
 			if (!evaluated) {
 				return JSON.parse(defaultValue ?? null);
 			}
@@ -202,6 +216,33 @@ export function useEvaluator(wf: Core) {
 		}
 	}
 
+	function useFieldsError(instancePath: ComputedRef<InstancePath>) {
+		return computed(() => {
+			const component = getComponentFromInstancePath(instancePath.value);
+			if (!component) return {};
+
+			const fields = wf.getComponentDefinition(component.type).fields;
+			if (!fields) return {};
+
+			const evaluatedFields = getEvaluatedFields(instancePath.value);
+
+			const evaluatedFieldsRaw = Object.entries(evaluatedFields).reduce(
+				(acc, [k, v]) => {
+					acc[k] = v.value;
+					return acc;
+				},
+				{},
+			);
+
+			return Object.entries(fields).reduce((acc, [key, definition]) => {
+				acc[key] = definition
+					.validator?.(evaluatedFields[key].value, evaluatedFieldsRaw)
+					?.join("\n");
+				return acc;
+			}, {});
+		});
+	}
+
 	/**
 	 * Check the visibility of a component. If an instance path is specified, context is evaluated.
 	 *
@@ -231,5 +272,6 @@ export function useEvaluator(wf: Core) {
 		getEvaluatedFields,
 		isComponentVisible,
 		evaluateExpression,
+		useFieldsError,
 	};
 }
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 3ac7566ca..4dc254219 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -58,7 +58,7 @@ export type InstancePath = InstancePathItem[];
 export type WriterComponentDefinitionFieldValidator = (
 	value: unknown,
 	fields: Record<string, unknown>,
-) => { errors: string[]; valid: boolean };
+) => string[];
 
 /**
  * Defines component structure and behaviour. Included in Component templates.
@@ -83,10 +83,7 @@ export type WriterComponentDefinitionField = {
 	category?: FieldCategory;
 	/** Use the value of this field as a CSS variable */
 	applyStyleVariable?: boolean;
-	validator?: (
-		value: unknown,
-		fields: Record<string, unknown>,
-	) => { errors: string[]; valid: boolean };
+	validator?: WriterComponentDefinitionFieldValidator;
 };
 
 export type WriterComponentDefinition = {

From 81db0d3e7aff1339a90bc46ca3b4cb2e19761d8b Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 2 Jan 2025 10:19:02 +0100
Subject: [PATCH 03/14] add more validation

---
 .../src/components/core/content/CoreText.vue  | 12 ++-----
 src/ui/src/renderer/sharedStyleFields.ts      |  2 ++
 src/ui/src/renderer/useEvaluator.ts           | 12 +++++--
 src/ui/src/utils/fieldValidation.ts           | 34 +++++++++++++++++++
 src/ui/src/writerTypes.ts                     |  2 +-
 5 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 src/ui/src/utils/fieldValidation.ts

diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index 16717f36f..c209ec2ce 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -30,6 +30,7 @@ import {
 	FieldType,
 	WriterComponentDefinition,
 } from "@/writerTypes";
+import { validatorAlignement, validatorYesNo } from "@/utils/fieldValidation";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -62,15 +63,7 @@ const definition: WriterComponentDefinition = {
 				yes: "Yes",
 				no: "No",
 			},
-			validator(value: string) {
-				const errors = [];
-				console.log(value);
-				if (value && !["yes", "no"].includes(value)) {
-					errors.push('The value need to be "yes" or "no"');
-				}
-
-				return errors;
-			},
+			validator: validatorYesNo,
 		},
 		alignment: {
 			name: "Alignment",
@@ -82,6 +75,7 @@ const definition: WriterComponentDefinition = {
 				right: "Right",
 			},
 			category: FieldCategory.Style,
+			validator: validatorAlignement,
 		},
 		primaryTextColor,
 		cssClasses,
diff --git a/src/ui/src/renderer/sharedStyleFields.ts b/src/ui/src/renderer/sharedStyleFields.ts
index e6f990810..144669506 100644
--- a/src/ui/src/renderer/sharedStyleFields.ts
+++ b/src/ui/src/renderer/sharedStyleFields.ts
@@ -1,3 +1,4 @@
+import { validatorCssClass } from "@/utils/fieldValidation";
 import {
 	FieldCategory,
 	FieldType,
@@ -80,6 +81,7 @@ export const cssClasses: WriterComponentDefinitionField = {
 	type: FieldType.Text,
 	category: FieldCategory.Style,
 	desc: "CSS classes, separated by spaces. You can define classes in custom stylesheets.",
+	validator: validatorCssClass,
 };
 
 export const contentWidth: WriterComponentDefinitionField = {
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index 8c6a2d944..c0cde235e 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -235,9 +235,15 @@ export function useEvaluator(wf: Core) {
 			);
 
 			return Object.entries(fields).reduce((acc, [key, definition]) => {
-				acc[key] = definition
-					.validator?.(evaluatedFields[key].value, evaluatedFieldsRaw)
-					?.join("\n");
+				if (definition.validator === undefined) return acc;
+
+				const errors = definition.validator(
+					evaluatedFields[key].value,
+					evaluatedFieldsRaw,
+				);
+
+				acc[key] = Array.from(errors).join("\n");
+
 				return acc;
 			}, {});
 		});
diff --git a/src/ui/src/utils/fieldValidation.ts b/src/ui/src/utils/fieldValidation.ts
new file mode 100644
index 000000000..2f2c90e1d
--- /dev/null
+++ b/src/ui/src/utils/fieldValidation.ts
@@ -0,0 +1,34 @@
+import { WriterComponentDefinitionFieldValidator } from "@/writerTypes";
+
+function buildValidatorEnum(
+	choices: string[],
+): WriterComponentDefinitionFieldValidator {
+	const example = choices.map((c) => `"${c}"`).join(", ");
+	return function* (value: unknown) {
+		if (!choices.includes(String(value))) {
+			yield `The value need to be ${example}`;
+		}
+	};
+}
+
+function buildValidatorRegex(
+	rule: RegExp,
+): WriterComponentDefinitionFieldValidator {
+	return function* (value: unknown) {
+		if (!rule.test(String(value))) {
+			yield `The value need to match ${rule}`;
+		}
+	};
+}
+
+export const validatorYesNo = buildValidatorEnum(["yes", "no"]);
+
+export const validatorAlignement = buildValidatorEnum([
+	"left",
+	"center",
+	"right",
+]);
+
+export const validatorCssClass = buildValidatorRegex(
+	/^[a-zA-Z_][a-zA-Z0-9_-]*$/,
+);
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 4dc254219..6473e6bfc 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -58,7 +58,7 @@ export type InstancePath = InstancePathItem[];
 export type WriterComponentDefinitionFieldValidator = (
 	value: unknown,
 	fields: Record<string, unknown>,
-) => string[];
+) => Iterable<string>;
 
 /**
  * Defines component structure and behaviour. Included in Component templates.

From 4ebc05696bdda4f586d7b2ace47ef36b137b9deb Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 2 Jan 2025 16:38:08 +0100
Subject: [PATCH 04/14] use AJV

---
 package-lock.json                             |  29 +++++
 src/ui/package.json                           |   1 +
 .../builder/settings/BuilderFieldsAlign.vue   |  16 ++-
 .../builder/settings/BuilderFieldsColor.vue   |  12 +-
 .../settings/BuilderFieldsKeyValue.vue        |   2 +
 .../builder/settings/BuilderFieldsObject.vue  |  11 +-
 .../builder/settings/BuilderFieldsPadding.vue |  11 +-
 .../builder/settings/BuilderFieldsShadow.vue  |  12 +-
 .../builder/settings/BuilderFieldsTools.vue   |  20 +++-
 .../builder/settings/BuilderFieldsWidth.vue   |  11 +-
 .../settings/BuilderSettingsProperties.vue    |  24 ++--
 .../builder/settings/BuilderTemplateInput.vue |   2 +-
 .../core/content/CoreAnnotatedText.vue        |   4 +-
 .../components/core/content/CoreChatbot.vue   |   2 +
 .../core/content/CoreJsonViewer.vue           |   6 +
 .../src/components/core/content/CoreLink.vue  |   1 +
 .../src/components/core/content/CoreText.vue  |   3 -
 .../core/content/CoreVegaLiteChart.vue        |   1 +
 .../components/core/embed/CoreGoogleMaps.vue  |   8 ++
 .../src/components/core/embed/CoreMapbox.vue  |   8 ++
 src/ui/src/components/core/embed/CorePDF.vue  |   2 +
 .../core/input/CoreCheckboxInput.vue          |   2 +
 .../components/core/input/CoreColorInput.vue  |   2 +
 .../core/input/CoreMultiselectInput.vue       |   2 +
 .../components/core/input/CoreRadioInput.vue  |   6 +-
 .../components/core/input/CoreSelectInput.vue |   2 +
 src/ui/src/components/core/other/CoreHtml.vue |   3 +
 .../components/core/other/CoreRepeater.vue    |   2 +
 src/ui/src/constants/validators.ts            | 106 ++++++++++++++++++
 src/ui/src/renderer/sharedStyleFields.ts      |  25 +++--
 src/ui/src/renderer/useEvaluator.ts           |  51 +++++----
 src/ui/src/utils/fieldValidation.ts           |  40 ++-----
 src/ui/src/writerTypes.ts                     |  11 +-
 src/ui/tsconfig.json                          |   2 +
 34 files changed, 320 insertions(+), 120 deletions(-)
 create mode 100644 src/ui/src/constants/validators.ts

diff --git a/package-lock.json b/package-lock.json
index 649fd5198..295a9eccb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11460,6 +11460,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/fast-uri": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
+			"integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/fastq": {
 			"version": "1.17.1",
 			"dev": true,
@@ -23548,6 +23554,7 @@
 				"@googlemaps/js-api-loader": "^1.16.6",
 				"@monaco-editor/loader": "^1.3.3",
 				"@tato30/vue-pdf": "^1.9.6",
+				"ajv": "^8.17.1",
 				"arquero": "^5.2.0",
 				"chroma-js": "^2.4.2",
 				"fuse.js": "7.0.0",
@@ -23622,6 +23629,28 @@
 				}
 			}
 		},
+		"src/ui/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"src/ui/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
+		},
 		"tests/e2e": {
 			"name": "writer-e2e",
 			"version": "1.0.0",
diff --git a/src/ui/package.json b/src/ui/package.json
index 9787cafb2..c74f4e2fe 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -25,6 +25,7 @@
 		"@googlemaps/js-api-loader": "^1.16.6",
 		"@monaco-editor/loader": "^1.3.3",
 		"@tato30/vue-pdf": "^1.9.6",
+		"ajv": "^8.17.1",
 		"arquero": "^5.2.0",
 		"chroma-js": "^2.4.2",
 		"fuse.js": "7.0.0",
diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
index 71da71685..4cce84c8b 100644
--- a/src/ui/src/builder/settings/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -24,6 +24,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleInputCss"
 			/>
 		</div>
@@ -38,6 +39,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -135,11 +137,15 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-	direction: "horizontal" | "vertical";
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	direction: {
+		type: String as PropType<"horizontal" | "vertical">,
+		required: true,
+	},
+	error: { type: String, required: false, default: undefined },
+});
 
 const { componentId, fieldKey, direction } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
index 87114caa0..01d9d64e1 100644
--- a/src/ui/src/builder/settings/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -24,6 +24,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleInput"
 			/>
 		</div>
@@ -40,6 +41,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	PropType,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -65,10 +67,12 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
+
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index 506a3fe56..41c83cf91 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -54,6 +54,7 @@
 			<BuilderFieldsObject
 				:component-id="component.id"
 				:field-key="fieldKey"
+				:error="error"
 			></BuilderFieldsObject>
 		</template>
 	</div>
@@ -87,6 +88,7 @@ const props = defineProps({
 	componentId: { type: String, required: true },
 	fieldKey: { type: String, required: true },
 	instancePath: { type: Array as PropType<InstancePath>, required: true },
+	error: { type: String, required: false, default: undefined },
 });
 
 const { componentId, fieldKey } = toRefs(props);
diff --git a/src/ui/src/builder/settings/BuilderFieldsObject.vue b/src/ui/src/builder/settings/BuilderFieldsObject.vue
index 8dba465c6..42880aca7 100644
--- a/src/ui/src/builder/settings/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsObject.vue
@@ -6,6 +6,7 @@
 		variant="code"
 		:value="component.content[fieldKey]"
 		:placeholder="templateField?.default"
+		:error="error"
 		@input="
 			(ev: Event) =>
 				formatAndSetContentValue((ev.target as HTMLInputElement).value)
@@ -15,7 +16,6 @@
 
 <script setup lang="ts">
 import { toRefs, inject, computed } from "vue";
-import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
@@ -24,10 +24,11 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
index 0312f516c..8d3b62335 100644
--- a/src/ui/src/builder/settings/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -94,6 +94,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleInputCss"
 			/>
 		</div>
@@ -108,6 +109,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -183,10 +185,11 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
index 03cddfb69..bd62629a1 100644
--- a/src/ui/src/builder/settings/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -93,6 +93,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleCSSInput"
 			/>
 		</div>
@@ -106,6 +107,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -138,10 +140,12 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
+
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsTools.vue b/src/ui/src/builder/settings/BuilderFieldsTools.vue
index e1f8412fe..778506921 100644
--- a/src/ui/src/builder/settings/BuilderFieldsTools.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsTools.vue
@@ -71,7 +71,14 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, inject, computed, ref, defineAsyncComponent } from "vue";
+import {
+	toRefs,
+	inject,
+	computed,
+	ref,
+	defineAsyncComponent,
+	PropType,
+} from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
@@ -137,10 +144,13 @@ const toolFormInitValue = {
 
 const toolForm = ref<ToolForm>(toolFormInitValue);
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	// TODO: not used for now
+	error: { type: String, required: false, default: undefined },
+});
+
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 12e898fae..256b13bab 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -23,6 +23,7 @@
 						ref="fixedEl"
 						type="number"
 						:model-value="valuePickFixed"
+						:invalid="!!error"
 						@update:model-value="handleInputFixed"
 					/>
 					<div>px</div>
@@ -47,6 +48,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -111,10 +113,11 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index 60884a066..597882132 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -35,12 +35,14 @@
 						v-if="fieldValue.type == FieldType.Color"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsColor>
 
 					<BuilderFieldsShadow
 						v-if="fieldValue.type == FieldType.Shadow"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsShadow>
 
 					<BuilderFieldsKeyValue
@@ -48,6 +50,7 @@
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 						:instance-path="selectedInstancePath"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsKeyValue>
 
 					<BuilderFieldsText
@@ -61,24 +64,28 @@
 						v-if="fieldValue.type == FieldType.Number"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsText>
 
 					<BuilderFieldsText
 						v-if="fieldValue.type == FieldType.IdKey"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsText>
 
 					<BuilderFieldsObject
 						v-if="fieldValue.type == FieldType.Object"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsObject>
 
 					<BuilderFieldsWidth
 						v-if="fieldValue.type == FieldType.Width"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsWidth>
 
 					<BuilderFieldsAlign
@@ -86,6 +93,7 @@
 						direction="horizontal"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsAlign>
 
 					<BuilderFieldsAlign
@@ -93,18 +101,21 @@
 						direction="vertical"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsAlign>
 
 					<BuilderFieldsPadding
 						v-if="fieldValue.type == FieldType.Padding"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					></BuilderFieldsPadding>
 
 					<BuilderFieldsTools
 						v-if="fieldValue.type == FieldType.Tools"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
+						:error="errorsByFields[fieldKey]"
 					>
 					</BuilderFieldsTools>
 				</WdsFieldWrapper>
@@ -149,19 +160,6 @@ const fields = computed(() => {
 	return componentDefinition.value?.fields;
 });
 
-function computeErrorField(fieldKey: string) {
-	const validator = fields.value[fieldKey]?.validator;
-	if (!validator) return undefined;
-
-	const evaluatedField = useEvaluator(wf).getEvaluatedFields(
-		selectedInstancePath.value,
-	);
-
-	return validator(evaluatedField[fieldKey].value, evaluatedField)?.join(
-		"\n",
-	);
-}
-
 const errorsByFields = useEvaluator(wf).useFieldsError(selectedInstancePath);
 
 const fieldCategories = computed(() => {
diff --git a/src/ui/src/builder/settings/BuilderTemplateInput.vue b/src/ui/src/builder/settings/BuilderTemplateInput.vue
index 6c92717cb..5eacf2f8e 100644
--- a/src/ui/src/builder/settings/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/settings/BuilderTemplateInput.vue
@@ -9,7 +9,7 @@
 				spellcheck="false"
 				:placeholder="props.placeholder"
 				:list="props.options ? `list-${props.inputId}` : undefined"
-				:invalid="!!error"
+				:invalid="error !== undefined"
 				@input="handleInput"
 				@blur="closeAutocompletion"
 			/>
diff --git a/src/ui/src/components/core/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue
index b89a9bb03..ca6faaf80 100644
--- a/src/ui/src/components/core/content/CoreAnnotatedText.vue
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.vue
@@ -34,6 +34,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import SharedControlBar from "@/components/shared/SharedControlBar.vue";
 import { WdsColor } from "@/wds/tokens";
+import { validatorAnotatedText } from "@/constants/validators";
 export default {
 	writer: {
 		name: "Annotated text",
@@ -44,7 +45,8 @@ export default {
 				name: "Annotated text",
 				type: FieldType.Object,
 				desc: "Value array with text/annotations. Must be a JSON string or a state reference to an array.",
-				init: `["This ",["is", "Verb"]," some ",["annotated", "Adjective"],    ["text", "Noun"]," for those of ",["you", "Pronoun"]," who ",["like", "Verb"]," this sort of ",["thing", "Noun"],". ","And here's a ",["word", "", "#faf"]," with a fancy background but no label."]`,
+				init: `["This ",["is", "Verb"]," some ",["annotated", "Adjective"], ["text", "Noun"]," for those of ",["you", "Pronoun"]," who ",["like", "Verb"]," this sort of ",["thing", "Noun"],". ","And here's a ",["word", "", "#faf"]," with a fancy background but no label."]`,
+				validator: validatorAnotatedText,
 			},
 			referenceColor: {
 				name: "Reference",
diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
index 521bfa16c..5f4b80fac 100644
--- a/src/ui/src/components/core/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -111,6 +111,7 @@ import prettyBytes from "pretty-bytes";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
 import { WdsColor } from "@/wds/tokens";
+import { validatorChatBotMessages } from "@/constants/validators";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
 
@@ -198,6 +199,7 @@ export default {
 				init: initConversation,
 				desc: "An array with messages or a writer.ai.Conversation object.",
 				type: FieldType.Object,
+				validator: validatorChatBotMessages,
 			},
 			assistantInitials: {
 				name: "Assistant initials",
diff --git a/src/ui/src/components/core/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
index 7cee5b185..9f565f02e 100644
--- a/src/ui/src/components/core/content/CoreJsonViewer.vue
+++ b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -21,6 +21,7 @@ import {
 	FieldType,
 	WriterComponentDefinition,
 } from "@/writerTypes";
+import { validatorCssSize } from "@/constants/validators";
 
 const description = "A component to explore JSON data as a hierarchy.";
 
@@ -54,6 +55,10 @@ const definition: WriterComponentDefinition = {
 			desc: "Sets the initial viewing depth of the JSON tree hierarchy. Use -1 to display the full hierarchy.",
 			type: FieldType.Number,
 			init: "0",
+			validator: {
+				type: "number",
+				minimum: 0,
+			},
 		},
 		hideRoot: {
 			name: "Hide root",
@@ -82,6 +87,7 @@ const definition: WriterComponentDefinition = {
 			type: FieldType.Width,
 			category: FieldCategory.Style,
 			applyStyleVariable: true,
+			validator: validatorCssSize,
 		},
 		accentColor,
 		secondaryTextColor,
diff --git a/src/ui/src/components/core/content/CoreLink.vue b/src/ui/src/components/core/content/CoreLink.vue
index d35828d9f..83b4a4f40 100644
--- a/src/ui/src/components/core/content/CoreLink.vue
+++ b/src/ui/src/components/core/content/CoreLink.vue
@@ -25,6 +25,7 @@ export default {
 				type: FieldType.Text,
 				default: "https://writer.com",
 				desc: "Specify a URL or choose a page. Keep in mind that you can only link to pages for which a key has been specified.",
+				// TODO: build dynamic schema
 				options: (wf: Core) => {
 					return Object.fromEntries(
 						wf
diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index c209ec2ce..3d31ae6a6 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -30,7 +30,6 @@ import {
 	FieldType,
 	WriterComponentDefinition,
 } from "@/writerTypes";
-import { validatorAlignement, validatorYesNo } from "@/utils/fieldValidation";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -63,7 +62,6 @@ const definition: WriterComponentDefinition = {
 				yes: "Yes",
 				no: "No",
 			},
-			validator: validatorYesNo,
 		},
 		alignment: {
 			name: "Alignment",
@@ -75,7 +73,6 @@ const definition: WriterComponentDefinition = {
 				right: "Right",
 			},
 			category: FieldCategory.Style,
-			validator: validatorAlignement,
 		},
 		primaryTextColor,
 		cssClasses,
diff --git a/src/ui/src/components/core/content/CoreVegaLiteChart.vue b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
index 1881c631b..0a50dad3e 100644
--- a/src/ui/src/components/core/content/CoreVegaLiteChart.vue
+++ b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
@@ -45,6 +45,7 @@ export default {
 		category: "Content",
 		fields: {
 			spec: {
+				// TODO: load validation https://vega.github.io/schema/vega-lite/v5.json
 				name: "Chart specification",
 				default: JSON.stringify(defaultSpec, null, 2),
 				desc: "Vega-Lite chart specification. Pass a Vega Altair chart using state or paste a JSON specification.",
diff --git a/src/ui/src/components/core/embed/CoreGoogleMaps.vue b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
index a0aaf0798..565ff1e8d 100644
--- a/src/ui/src/components/core/embed/CoreGoogleMaps.vue
+++ b/src/ui/src/components/core/embed/CoreGoogleMaps.vue
@@ -13,6 +13,11 @@
 /* global google */
 import { FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import {
+	validatorGpsMarkers,
+	validatorGpsLat,
+	validatorGpsLng,
+} from "@/constants/validators";
 
 const description =
 	"A component to embed a Google Map. It can be used to display a map with markers.";
@@ -60,17 +65,20 @@ export default {
 				name: "Latitude",
 				default: "37.79322359164316",
 				type: FieldType.Number,
+				validator: validatorGpsLat,
 			},
 			lng: {
 				name: "Longitude",
 				default: "-122.39999318828129",
 				type: FieldType.Number,
+				validator: validatorGpsLng,
 			},
 			markers: {
 				name: "Markers",
 				default: JSON.stringify(markersDefaultData),
 				desc: "Markers data",
 				type: FieldType.Object,
+				validator: validatorGpsMarkers,
 			},
 			cssClasses,
 		},
diff --git a/src/ui/src/components/core/embed/CoreMapbox.vue b/src/ui/src/components/core/embed/CoreMapbox.vue
index 5f335bb11..b6bcd9376 100644
--- a/src/ui/src/components/core/embed/CoreMapbox.vue
+++ b/src/ui/src/components/core/embed/CoreMapbox.vue
@@ -12,6 +12,11 @@
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import {
+	validatorGpsLat,
+	validatorGpsLng,
+	validatorGpsMarkers,
+} from "@/constants/validators";
 
 const markersDefaultData = [
 	{ lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker" },
@@ -46,17 +51,20 @@ export default {
 				name: "Latitude",
 				default: "37.79322359164316",
 				type: FieldType.Number,
+				validator: validatorGpsLat,
 			},
 			lng: {
 				name: "Longitude",
 				default: "-122.39999318828129",
 				type: FieldType.Number,
+				validator: validatorGpsLng,
 			},
 			markers: {
 				name: "Markers",
 				init: JSON.stringify(markersDefaultData, null, 2),
 				desc: "",
 				type: FieldType.Object,
+				validator: validatorGpsMarkers,
 			},
 			controls: {
 				name: "Controls visible",
diff --git a/src/ui/src/components/core/embed/CorePDF.vue b/src/ui/src/components/core/embed/CorePDF.vue
index 608576e64..fc297fcf6 100644
--- a/src/ui/src/components/core/embed/CorePDF.vue
+++ b/src/ui/src/components/core/embed/CorePDF.vue
@@ -53,6 +53,7 @@ import {
 	containerBackgroundColor,
 } from "@/renderer/sharedStyleFields";
 import WdsControl from "@/wds/WdsControl.vue";
+import { validatorArrayOfString } from "@/constants/validators";
 
 const description = "A component to embed PDF documents.";
 
@@ -72,6 +73,7 @@ export default {
 				default: JSON.stringify([]),
 				desc: "A list of highlights to be applied to the PDF as a JSON array of strings.",
 				type: FieldType.Object,
+				validator: validatorArrayOfString,
 			},
 			selectedMatch: {
 				name: "Selected highlight match",
diff --git a/src/ui/src/components/core/input/CoreCheckboxInput.vue b/src/ui/src/components/core/input/CoreCheckboxInput.vue
index d2f8eb70c..8cf671b9b 100644
--- a/src/ui/src/components/core/input/CoreCheckboxInput.vue
+++ b/src/ui/src/components/core/input/CoreCheckboxInput.vue
@@ -45,6 +45,7 @@ import {
 	primaryTextColor,
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { validatorObjectRecordNotNested } from "@/constants/validators";
 
 const defaultOptions = { a: "Option A", b: "Option B" };
 
@@ -75,6 +76,7 @@ export default {
 				desc: "Key-value object with options. Must be a JSON string or a state reference to a dictionary.",
 				type: FieldType.KeyValue,
 				default: JSON.stringify(defaultOptions, null, 2),
+				validator: validatorObjectRecordNotNested,
 			},
 			orientation: {
 				name: "Orientation",
diff --git a/src/ui/src/components/core/input/CoreColorInput.vue b/src/ui/src/components/core/input/CoreColorInput.vue
index 5bfe82af4..27dbacd91 100644
--- a/src/ui/src/components/core/input/CoreColorInput.vue
+++ b/src/ui/src/components/core/input/CoreColorInput.vue
@@ -20,6 +20,7 @@ import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import BaseInputColor from "../base/BaseInputColor.vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { WdsColor } from "@/wds/tokens";
+import { validatorArrayOfString } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select a color using a color picker interface.";
@@ -52,6 +53,7 @@ const definition = {
 				WdsColor.Gray6,
 				WdsColor.Blue4,
 			]),
+			validator: validatorArrayOfString,
 		},
 		cssClasses,
 	},
diff --git a/src/ui/src/components/core/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
index d8826d452..20ba9afe3 100644
--- a/src/ui/src/components/core/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -31,6 +31,7 @@ import {
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 import { WdsColor } from "@/wds/tokens";
+import { validatorObjectRecordNotNested } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select multiple values from a searchable list of options.";
@@ -58,6 +59,7 @@ export default {
 				desc: "Key-value object with options. Must be a JSON string or a state reference to a dictionary.",
 				type: FieldType.KeyValue,
 				default: JSON.stringify(defaultOptions, null, 2),
+				validator: validatorObjectRecordNotNested,
 			},
 			placeholder: {
 				name: "Placeholder",
diff --git a/src/ui/src/components/core/input/CoreRadioInput.vue b/src/ui/src/components/core/input/CoreRadioInput.vue
index c61816b1d..b6123e965 100644
--- a/src/ui/src/components/core/input/CoreRadioInput.vue
+++ b/src/ui/src/components/core/input/CoreRadioInput.vue
@@ -44,6 +44,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { validatorObjectRecordNotNested } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to choose a single value from a list of options using radio buttons.";
@@ -73,14 +74,11 @@ export default {
 				desc: "Key-value object with options. Must be a JSON string or a state reference to a dictionary.",
 				type: FieldType.KeyValue,
 				default: JSON.stringify(defaultOptions, null, 2),
+				validator: validatorObjectRecordNotNested,
 			},
 			orientation: {
 				name: "Orientation",
 				type: FieldType.Text,
-				options: {
-					vertical: "Vertical",
-					horizontal: "Horizontal",
-				},
 				default: "vertical",
 				category: FieldCategory.Style,
 				desc: "Specify how to lay out the options.",
diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index 81c3410fd..f038bb889 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -31,6 +31,7 @@ import {
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 import { WdsColor } from "@/wds/tokens";
+import { validatorObjectRecordNotNested } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select a single value from a searchable list of options.";
@@ -58,6 +59,7 @@ export default {
 				desc: "Key-value object with options. Must be a JSON string or a state reference to a dictionary.",
 				type: FieldType.KeyValue,
 				default: JSON.stringify(defaultOptions, null, 2),
+				validator: validatorObjectRecordNotNested,
 			},
 			placeholder: {
 				name: "Placeholder",
diff --git a/src/ui/src/components/core/other/CoreHtml.vue b/src/ui/src/components/core/other/CoreHtml.vue
index 08804aee1..538c7a64c 100644
--- a/src/ui/src/components/core/other/CoreHtml.vue
+++ b/src/ui/src/components/core/other/CoreHtml.vue
@@ -10,6 +10,7 @@ import { h, inject } from "vue";
 import { FieldControl, FieldType } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { validatorObjectRecordNotNested } from "@/constants/validators";
 
 const defaultStyle = {
 	padding: "16px",
@@ -42,12 +43,14 @@ export default {
 				init: JSON.stringify(defaultStyle, null, 2),
 				type: FieldType.Object,
 				desc: "Define the CSS styles to apply to the HTML element using a JSON object or a state reference to a dictionary.",
+				validator: validatorObjectRecordNotNested,
 			},
 			attrs: {
 				name: "Attributes",
 				default: null,
 				type: FieldType.Object,
 				desc: "Set additional HTML attributes for the element using a JSON object or a dictionary via a state reference.",
+				validator: validatorObjectRecordNotNested,
 			},
 			htmlInside: {
 				name: "HTML inside",
diff --git a/src/ui/src/components/core/other/CoreRepeater.vue b/src/ui/src/components/core/other/CoreRepeater.vue
index b8c6ff9ca..a5107efe9 100644
--- a/src/ui/src/components/core/other/CoreRepeater.vue
+++ b/src/ui/src/components/core/other/CoreRepeater.vue
@@ -2,6 +2,7 @@
 import { computed, h, inject } from "vue";
 import { FieldType } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
+import { validatorRepeaterObject } from "@/constants/validators";
 
 const description =
 	"A container component that repeats its child components based on a dictionary.";
@@ -23,6 +24,7 @@ export default {
 				default: JSON.stringify(defaultRepeaterObject, null, 2),
 				type: FieldType.Object,
 				desc: "Include a state reference to the dictionary used for repeating the child components. Alternatively, specify a JSON object.",
+				validator: validatorRepeaterObject,
 			},
 			keyVariable: {
 				name: "Key variable name",
diff --git a/src/ui/src/constants/validators.ts b/src/ui/src/constants/validators.ts
new file mode 100644
index 000000000..f6674fd5a
--- /dev/null
+++ b/src/ui/src/constants/validators.ts
@@ -0,0 +1,106 @@
+import type { SchemaObject } from "ajv";
+
+export function buildValidatorEnum(options: string[]): SchemaObject {
+	return {
+		type: "string",
+		enum: options,
+	};
+}
+
+export const validatorCssClassname: SchemaObject = {
+	type: "string",
+	pattern: "(^[a-zA-Z_][a-zA-Z0-9_-]*$)|(^$)",
+};
+
+export const validatorCssSize: SchemaObject = {
+	type: "string",
+	pattern:
+		"(^([+-]?\\d*\\.?\\d+)(px|em|%|vh|vw|rem|pt|pc|in|cm|mm|ex|ch|vmin|vmax|fr)$)|(^$)",
+};
+
+export const validatorEnumYesNo: SchemaObject = buildValidatorEnum([
+	"yes",
+	"no",
+]);
+
+export const validatorArrayOfString: SchemaObject = {
+	type: "array",
+	items: { type: "string" },
+};
+
+export const validatorGpsLat: SchemaObject = {
+	type: "number",
+	minimum: -90,
+	maximum: 90,
+};
+
+export const validatorGpsLng: SchemaObject = {
+	type: "number",
+	minimum: -180,
+	maximum: 180,
+};
+
+export const validatorGpsMarker: SchemaObject = {
+	type: "object",
+	properties: {
+		name: {
+			type: "string",
+		},
+		lat: validatorGpsLat,
+		lng: validatorGpsLng,
+	},
+	required: ["lat", "lng", "name"],
+	additionalProperties: false,
+};
+
+export const validatorGpsMarkers: SchemaObject = {
+	type: "array",
+	items: validatorGpsMarker,
+};
+
+export const validatorObjectRecordNotNested: SchemaObject = {
+	type: "object",
+	patternProperties: {
+		"^.*$": {
+			type: ["string", "number", "boolean"],
+		},
+	},
+	additionalProperties: true,
+};
+
+export const validatorAnotatedText: SchemaObject = {
+	type: "array",
+	items: {
+		oneOf: [
+			{ type: "string" },
+			{
+				type: "array",
+				items: { type: "string" },
+			},
+		],
+	},
+};
+
+export const validatorRepeaterObject: SchemaObject = {
+	type: "object",
+	patternProperties: {
+		"^.*$": {
+			type: "object",
+		},
+	},
+	additionalProperties: true,
+};
+
+export const validatorChatBotMessage: SchemaObject = {
+	type: "object",
+	properties: {
+		role: { type: "string" },
+		content: { type: "string" },
+	},
+	additionalProperties: false,
+};
+
+export const validatorChatBotMessages: SchemaObject = {
+	type: "array",
+	items: validatorChatBotMessage,
+};
diff --git a/src/ui/src/renderer/sharedStyleFields.ts b/src/ui/src/renderer/sharedStyleFields.ts
index 144669506..00fb9d30b 100644
--- a/src/ui/src/renderer/sharedStyleFields.ts
+++ b/src/ui/src/renderer/sharedStyleFields.ts
@@ -1,4 +1,8 @@
-import { validatorCssClass } from "@/utils/fieldValidation";
+import {
+	validatorCssClassname,
+	validatorCssSize,
+	validatorEnumYesNo,
+} from "@/constants/validators";
 import {
 	FieldCategory,
 	FieldType,
@@ -81,7 +85,7 @@ export const cssClasses: WriterComponentDefinitionField = {
 	type: FieldType.Text,
 	category: FieldCategory.Style,
 	desc: "CSS classes, separated by spaces. You can define classes in custom stylesheets.",
-	validator: validatorCssClass,
+	validator: validatorCssClassname,
 };
 
 export const contentWidth: WriterComponentDefinitionField = {
@@ -90,6 +94,7 @@ export const contentWidth: WriterComponentDefinitionField = {
 	default: "100%",
 	category: FieldCategory.Style,
 	desc: "Configure content width using CSS units, e.g. 100px, 50%, 10vw, etc.",
+	validator: validatorCssSize,
 };
 
 export const contentHAlign: WriterComponentDefinitionField = {
@@ -115,19 +120,25 @@ export const contentPadding: WriterComponentDefinitionField = {
 
 const yesNoOptions = { yes: "Yes", no: "No" };
 
-export const isCollapsible: WriterComponentDefinitionField = {
-	name: "Collapsible",
+export const partialYesNoField: Pick<
+	WriterComponentDefinitionField,
+	"default" | "type" | "options" | "validator"
+> = {
 	default: "no",
 	type: FieldType.Text,
 	options: yesNoOptions,
+	validator: validatorEnumYesNo,
+};
+
+export const isCollapsible: WriterComponentDefinitionField = {
+	...partialYesNoField,
+	name: "Collapsible",
 	category: FieldCategory.Style,
 };
 
 export const startCollapsed: WriterComponentDefinitionField = {
+	...partialYesNoField,
 	name: "Start collapsed",
-	type: FieldType.Text,
 	category: FieldCategory.Style,
-	default: "no",
-	options: yesNoOptions,
 	desc: "Only applied when the component is collapsible.",
 };
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index c0cde235e..4404985e2 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -1,11 +1,8 @@
 import { ComputedRef, computed } from "vue";
-import {
-	Component,
-	Core,
-	FieldType,
-	InstancePath,
-	WriterComponentDefinitionFieldValidator,
-} from "@/writerTypes";
+import { Component, Core, FieldType, InstancePath } from "@/writerTypes";
+import Ajv, { SchemaObject } from "ajv";
+import { formatAjvErrors } from "@/utils/fieldValidation";
+import { buildValidatorEnum } from "@/constants/validators";
 
 export function useEvaluator(wf: Core) {
 	const templateRegex = /[\\]?@{([^}]*)}/g;
@@ -226,23 +223,37 @@ export function useEvaluator(wf: Core) {
 
 			const evaluatedFields = getEvaluatedFields(instancePath.value);
 
-			const evaluatedFieldsRaw = Object.entries(evaluatedFields).reduce(
-				(acc, [k, v]) => {
-					acc[k] = v.value;
-					return acc;
-				},
-				{},
-			);
+			// const evaluatedFieldsRaw = Object.entries(evaluatedFields).reduce(
+			// 	(acc, [k, v]) => {
+			// 		acc[k] = v.value;
+			// 		return acc;
+			// 	},
+			// 	{},
+			// );
 
 			return Object.entries(fields).reduce((acc, [key, definition]) => {
-				if (definition.validator === undefined) return acc;
+				let schema = definition.validator;
+
+				if (schema === undefined && definition.options !== undefined) {
+					// set an automatic enum schema for options fields
+					schema = {
+						type: "string",
+						enum: Object.keys(definition.options),
+					};
+				}
+
+				if (schema === undefined) return acc;
+				console.log("validate", key, evaluatedFields[key].value);
+
+				const ajv = new Ajv();
+				const validate = ajv.compile(schema);
+
+				const valid = validate(evaluatedFields[key].value);
 
-				const errors = definition.validator(
-					evaluatedFields[key].value,
-					evaluatedFieldsRaw,
-				);
+				if (valid || validate.errors === undefined) return acc;
 
-				acc[key] = Array.from(errors).join("\n");
+				acc[key] = formatAjvErrors(validate.errors);
+				console.log("validate errors", acc[key]);
 
 				return acc;
 			}, {});
diff --git a/src/ui/src/utils/fieldValidation.ts b/src/ui/src/utils/fieldValidation.ts
index 2f2c90e1d..0eba7a06e 100644
--- a/src/ui/src/utils/fieldValidation.ts
+++ b/src/ui/src/utils/fieldValidation.ts
@@ -1,34 +1,12 @@
-import { WriterComponentDefinitionFieldValidator } from "@/writerTypes";
+import type { ErrorObject } from "ajv";
 
-function buildValidatorEnum(
-	choices: string[],
-): WriterComponentDefinitionFieldValidator {
-	const example = choices.map((c) => `"${c}"`).join(", ");
-	return function* (value: unknown) {
-		if (!choices.includes(String(value))) {
-			yield `The value need to be ${example}`;
-		}
-	};
-}
+function formatAjvError(error: ErrorObject): string {
+	if (Array.isArray(error.params?.allowedValues)) {
+		return `${error.message}: ${error.params.allowedValues}`;
+	}
 
-function buildValidatorRegex(
-	rule: RegExp,
-): WriterComponentDefinitionFieldValidator {
-	return function* (value: unknown) {
-		if (!rule.test(String(value))) {
-			yield `The value need to match ${rule}`;
-		}
-	};
+	return error.message;
+}
+export function formatAjvErrors(errors: ErrorObject[]): string {
+	return errors.map(formatAjvError).join("\n");
 }
-
-export const validatorYesNo = buildValidatorEnum(["yes", "no"]);
-
-export const validatorAlignement = buildValidatorEnum([
-	"left",
-	"center",
-	"right",
-]);
-
-export const validatorCssClass = buildValidatorRegex(
-	/^[a-zA-Z_][a-zA-Z0-9_-]*$/,
-);
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 6473e6bfc..fc6d1f0a5 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -1,6 +1,7 @@
 import type { Component as VueComponent } from "vue";
 import { generateCore } from "./core";
 import { generateBuilderManager } from "./builder/builderManager";
+import type { SchemaObject } from "ajv";
 
 export type Core = ReturnType<typeof generateCore>;
 
@@ -52,14 +53,6 @@ export type InstancePathItem = {
  */
 export type InstancePath = InstancePathItem[];
 
-/**
- *
- */
-export type WriterComponentDefinitionFieldValidator = (
-	value: unknown,
-	fields: Record<string, unknown>,
-) => Iterable<string>;
-
 /**
  * Defines component structure and behaviour. Included in Component templates.
  */
@@ -83,7 +76,7 @@ export type WriterComponentDefinitionField = {
 	category?: FieldCategory;
 	/** Use the value of this field as a CSS variable */
 	applyStyleVariable?: boolean;
-	validator?: WriterComponentDefinitionFieldValidator;
+	validator?: SchemaObject;
 };
 
 export type WriterComponentDefinition = {
diff --git a/src/ui/tsconfig.json b/src/ui/tsconfig.json
index 42bc7360c..b5313fc35 100644
--- a/src/ui/tsconfig.json
+++ b/src/ui/tsconfig.json
@@ -3,6 +3,8 @@
 		"target": "esnext",
 		"module": "esnext",
 		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
+		"resolveJsonModule": true,
 		"importHelpers": true,
 		"isolatedModules": true,
 		"noEmit": true,

From ebf4f592ad12d6893eaeb3aa6b60239a9e4071cc Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 2 Jan 2025 17:34:59 +0100
Subject: [PATCH 05/14] wip

---
 .../src/builder/settings/BuilderFieldsKeyValue.vue  |  9 ++++++++-
 .../components/core/input/CoreMultiselectInput.vue  |  6 +++++-
 src/ui/src/constants/validators.ts                  |  5 +++++
 src/ui/src/utils/fieldValidation.ts                 | 13 +++++++++++--
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index 41c83cf91..c9e0e142b 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -13,7 +13,10 @@
 		/>
 
 		<template v-if="mode == 'assisted'">
-			<div class="staticList">
+			<div
+				class="staticList"
+				:class="{ 'staticList--invalid': error !== undefined }"
+			>
 				<div
 					v-for="(entryValue, entryKey) in assistedEntries"
 					:key="entryKey"
@@ -79,6 +82,7 @@ import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import { useComponentActions } from "../useComponentActions";
 import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
+import { error } from "ajv/dist/vocabularies/applicator/dependencies";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -194,6 +198,9 @@ onMounted(async () => {
 	border: 1px solid var(--builderSeparatorColor);
 	border-radius: 8px;
 }
+.staticList--invalid {
+	border-color: var(--wdsColorOrange5);
+}
 
 .staticList:empty::before {
 	content: "No entries yet.";
diff --git a/src/ui/src/components/core/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
index 20ba9afe3..bacb57e5c 100644
--- a/src/ui/src/components/core/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -31,7 +31,10 @@ import {
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 import { WdsColor } from "@/wds/tokens";
-import { validatorObjectRecordNotNested } from "@/constants/validators";
+import {
+	validatorObjectRecordNotNested,
+	validatorPositiveNumber,
+} from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select multiple values from a searchable list of options.";
@@ -71,6 +74,7 @@ export default {
 				desc: "The maximum allowable number of selected options. Set to zero for unlimited.",
 				type: FieldType.Number,
 				default: "0",
+				validator: validatorPositiveNumber,
 			},
 			accentColor: {
 				...accentColor,
diff --git a/src/ui/src/constants/validators.ts b/src/ui/src/constants/validators.ts
index f6674fd5a..5fdc9012d 100644
--- a/src/ui/src/constants/validators.ts
+++ b/src/ui/src/constants/validators.ts
@@ -104,3 +104,8 @@ export const validatorChatBotMessages: SchemaObject = {
 	type: "array",
 	items: validatorChatBotMessage,
 };
+
+export const validatorPositiveNumber: SchemaObject = {
+	type: "number",
+	minimum: 0,
+};
diff --git a/src/ui/src/utils/fieldValidation.ts b/src/ui/src/utils/fieldValidation.ts
index 0eba7a06e..56a0a5649 100644
--- a/src/ui/src/utils/fieldValidation.ts
+++ b/src/ui/src/utils/fieldValidation.ts
@@ -1,11 +1,20 @@
 import type { ErrorObject } from "ajv";
 
 function formatAjvError(error: ErrorObject): string {
+	console.log("##formatAjvError", error);
+	let message = "";
+
+	if (error.instancePath) {
+		message += `${error.instancePath} `;
+	}
+
+	message += error.message;
+
 	if (Array.isArray(error.params?.allowedValues)) {
-		return `${error.message}: ${error.params.allowedValues}`;
+		message += `: ${error.params.allowedValues}`;
 	}
 
-	return error.message;
+	return message;
 }
 export function formatAjvErrors(errors: ErrorObject[]): string {
 	return errors.map(formatAjvError).join("\n");

From 3b2ef8e7a2bec9b2317f7648aeaa382693498ef2 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 2 Jan 2025 17:35:16 +0100
Subject: [PATCH 06/14] fix(ui): resolve missing import

---
 src/ui/src/builder/settings/BuilderSettingsBinding.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/src/builder/settings/BuilderSettingsBinding.vue b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
index b025f7742..fde8e1263 100644
--- a/src/ui/src/builder/settings/BuilderSettingsBinding.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
@@ -26,6 +26,7 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import BuilderSectionTitle from "./BuilderSectionTitle.vue";
 
 const hint =
 	'Links this component to a state element, in a two-way fashion. Reference the state element directly, i.e. use "my_var" instead of "@{my_var}".';

From 4264356413f1095343dfe997cf9bd3a1cb602091 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 2 Jan 2025 18:39:49 +0100
Subject: [PATCH 07/14] add more validation

---
 .../components/core/content/CoreDataframe.vue    |  6 ++++++
 .../core/content/CoreDataframeLegacy.vue         |  2 ++
 src/ui/src/components/core/content/CoreIcon.vue  |  2 ++
 .../components/core/content/CoreJsonViewer.vue   | 10 +++++-----
 src/ui/src/components/core/content/CoreTags.vue  |  1 +
 .../components/core/content/CoreVideoPlayer.vue  |  2 ++
 src/ui/src/components/core/embed/CoreIFrame.vue  |  2 ++
 .../components/core/input/CoreDropdownInput.vue  |  2 ++
 .../components/core/input/CoreRatingInput.vue    | 16 ++++++++++++++++
 .../components/core/input/CoreSelectInput.vue    |  2 ++
 .../components/core/input/CoreSliderInput.vue    |  2 ++
 .../core/input/CoreSliderRangeInput.vue          |  2 ++
 .../components/core/input/CoreTextareaInput.vue  |  2 ++
 src/ui/src/components/core/layout/CoreColumn.vue |  2 ++
 .../src/components/core/other/CorePagination.vue |  4 ++++
 src/ui/src/components/core/other/CoreTimer.vue   |  2 ++
 .../components/core/other/CoreWebcamCapture.vue  |  2 ++
 src/ui/src/constants/validators.ts               |  5 +++++
 18 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index 0ea60d7ab..4dda67207 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -135,6 +135,10 @@ import {
 } from "./CoreDataframe/constants";
 import WdsButton from "@/wds/WdsButton.vue";
 import { WdsColor } from "@/wds/tokens";
+import {
+	validatorObjectRecordNotNested,
+	validatorPositiveNumber,
+} from "@/constants/validators";
 
 const description = "A component to display Pandas DataFrames.";
 
@@ -243,6 +247,7 @@ export default {
 				desc: "Define rows actions",
 				type: FieldType.KeyValue,
 				default: JSON.stringify({ remove: "Remove", open: "Open" }),
+				validator: validatorObjectRecordNotNested,
 			},
 			useMarkdown: {
 				name: "Use Markdown",
@@ -260,6 +265,7 @@ export default {
 				type: FieldType.Number,
 				category: FieldCategory.Style,
 				default: "10",
+				validator: validatorPositiveNumber,
 			},
 			wrapText: {
 				name: "Wrap text",
diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
index 26f1d34e3..2f916220e 100644
--- a/src/ui/src/components/core/content/CoreDataframeLegacy.vue
+++ b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
@@ -126,6 +126,7 @@ import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 import { WdsColor } from "@/wds/tokens";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description = "A component to display Pandas DataFrames.";
 const defaultDataframe = `data:application/vnd.apache.arrow.file;base64,QVJST1cxAAD/////iAMAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAAlAIAAAQAAAABAAAADAAAAAgADAAEAAgACAAAAGwCAAAEAAAAXwIAAHsiaW5kZXhfY29sdW1ucyI6IFsiX19pbmRleF9sZXZlbF8wX18iXSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogImNvbF9hIiwgImZpZWxkX25hbWUiOiAiY29sX2EiLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiY29sX2IiLCAiZmllbGRfbmFtZSI6ICJjb2xfYiIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogIl9faW5kZXhfbGV2ZWxfMF9fIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfV0sICJjcmVhdG9yIjogeyJsaWJyYXJ5IjogInB5YXJyb3ciLCAidmVyc2lvbiI6ICIxMi4wLjAifSwgInBhbmRhc192ZXJzaW9uIjogIjEuNS4zIn0ABgAAAHBhbmRhcwAAAwAAAIgAAABEAAAABAAAAJT///8AAAECEAAAACQAAAAEAAAAAAAAABEAAABfX2luZGV4X2xldmVsXzBfXwAAAJD///8AAAABQAAAAND///8AAAECEAAAABgAAAAEAAAAAAAAAAUAAABjb2xfYgAAAMD///8AAAABQAAAABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAhAAAAAgAAAABAAAAAAAAAAFAAAAY29sX2EAAAAIAAwACAAHAAgAAAAAAAABQAAAAAAAAAD/////6AAAABQAAAAAAAAADAAWAAYABQAIAAwADAAAAAADBAAYAAAAMAAAAAAAAAAAAAoAGAAMAAQACAAKAAAAfAAAABAAAAACAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAABAAAAAAAAAAAAAAAAMAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAIAAAAAAAAAAwAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAD/////AAAAABAAAAAMABQABgAIAAwAEAAMAAAAAAAEADwAAAAoAAAABAAAAAEAAACYAwAAAAAAAPAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAACgAMAAAABAAIAAoAAACUAgAABAAAAAEAAAAMAAAACAAMAAQACAAIAAAAbAIAAAQAAABfAgAAeyJpbmRleF9jb2x1bW5zIjogWyJfX2luZGV4X2xldmVsXzBfXyJdLCAiY29sdW1uX2luZGV4ZXMiOiBbeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiBudWxsLCAicGFuZGFzX3R5cGUiOiAidW5pY29kZSIsICJudW1weV90eXBlIjogIm9iamVjdCIsICJtZXRhZGF0YSI6IHsiZW5jb2RpbmciOiAiVVRGLTgifX1dLCAiY29sdW1ucyI6IFt7Im5hbWUiOiAiY29sX2EiLCAiZmllbGRfbmFtZSI6ICJjb2xfYSIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJjb2xfYiIsICJmaWVsZF9uYW1lIjogImNvbF9iIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiAiX19pbmRleF9sZXZlbF8wX18iLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjEyLjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMS41LjMifQAGAAAAcGFuZGFzAAADAAAAiAAAAEQAAAAEAAAAlP///wAAAQIQAAAAJAAAAAQAAAAAAAAAEQAAAF9faW5kZXhfbGV2ZWxfMF9fAAAAkP///wAAAAFAAAAA0P///wAAAQIQAAAAGAAAAAQAAAAAAAAABQAAAGNvbF9iAAAAwP///wAAAAFAAAAAEAAUAAgABgAHAAwAAAAQABAAAAAAAAECEAAAACAAAAAEAAAAAAAAAAUAAABjb2xfYQAAAAgADAAIAAcACAAAAAAAAAFAAAAAsAMAAEFSUk9XMQ==`;
@@ -187,6 +188,7 @@ export default {
 				type: FieldType.Number,
 				category: FieldCategory.Style,
 				default: "10",
+				validator: validatorPositiveNumber,
 			},
 			wrapText: {
 				name: "Wrap text",
diff --git a/src/ui/src/components/core/content/CoreIcon.vue b/src/ui/src/components/core/content/CoreIcon.vue
index fab63f15f..149aa8270 100644
--- a/src/ui/src/components/core/content/CoreIcon.vue
+++ b/src/ui/src/components/core/content/CoreIcon.vue
@@ -19,6 +19,7 @@
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 export default {
 	writer: {
@@ -39,6 +40,7 @@ export default {
 				desc: `Icon size in px`,
 				category: FieldCategory.Style,
 				default: "14",
+				validator: validatorPositiveNumber,
 			},
 			color: {
 				name: "Icon color",
diff --git a/src/ui/src/components/core/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
index 9f565f02e..40de32155 100644
--- a/src/ui/src/components/core/content/CoreJsonViewer.vue
+++ b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -21,7 +21,10 @@ import {
 	FieldType,
 	WriterComponentDefinition,
 } from "@/writerTypes";
-import { validatorCssSize } from "@/constants/validators";
+import {
+	validatorCssSize,
+	validatorPositiveNumber,
+} from "@/constants/validators";
 
 const description = "A component to explore JSON data as a hierarchy.";
 
@@ -55,10 +58,7 @@ const definition: WriterComponentDefinition = {
 			desc: "Sets the initial viewing depth of the JSON tree hierarchy. Use -1 to display the full hierarchy.",
 			type: FieldType.Number,
 			init: "0",
-			validator: {
-				type: "number",
-				minimum: 0,
-			},
+			validator: validatorPositiveNumber,
 		},
 		hideRoot: {
 			name: "Hide root",
diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
index 938b57080..9e0bb32d0 100644
--- a/src/ui/src/components/core/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -40,6 +40,7 @@ export default {
 		description,
 		category: "Content",
 		fields: {
+			// TODO: validate
 			tags: {
 				name: "Tags",
 				desc: "Key-value object with tags. Must be a JSON string or a state reference to a dictionary.",
diff --git a/src/ui/src/components/core/content/CoreVideoPlayer.vue b/src/ui/src/components/core/content/CoreVideoPlayer.vue
index b8651c42c..8226abe90 100644
--- a/src/ui/src/components/core/content/CoreVideoPlayer.vue
+++ b/src/ui/src/components/core/content/CoreVideoPlayer.vue
@@ -26,6 +26,7 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { validatorUri } from "@/constants/validators";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -41,6 +42,7 @@ export default {
 				desc: "The URL of the video file. Alternatively, you can pass a file via state.",
 				default: "",
 				type: FieldType.Text,
+				validator: validatorUri,
 			},
 			controls: {
 				name: "Controls",
diff --git a/src/ui/src/components/core/embed/CoreIFrame.vue b/src/ui/src/components/core/embed/CoreIFrame.vue
index 7c887ecee..ee900d477 100644
--- a/src/ui/src/components/core/embed/CoreIFrame.vue
+++ b/src/ui/src/components/core/embed/CoreIFrame.vue
@@ -16,6 +16,7 @@
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses, separatorColor } from "@/renderer/sharedStyleFields";
+import { validatorUri } from "@/constants/validators";
 
 const description = "A component to embed an external resource in an iframe.";
 
@@ -37,6 +38,7 @@ export default {
 				default: "",
 				desc: "A valid URL",
 				type: FieldType.Text,
+				validator: validatorUri,
 			},
 			separatorColor,
 			cssClasses,
diff --git a/src/ui/src/components/core/input/CoreDropdownInput.vue b/src/ui/src/components/core/input/CoreDropdownInput.vue
index dd3ac51ba..874b0b89d 100644
--- a/src/ui/src/components/core/input/CoreDropdownInput.vue
+++ b/src/ui/src/components/core/input/CoreDropdownInput.vue
@@ -33,6 +33,7 @@ import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
 import { ComponentPublicInstance } from "vue";
+import { validatorObjectRecordNotNested } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select a single value from a list of options using a dropdown menu.";
@@ -60,6 +61,7 @@ export default {
 				desc: "Key-value object with options. Must be a JSON string or a state reference to a dictionary.",
 				type: FieldType.KeyValue,
 				default: JSON.stringify(defaultOptions, null, 2),
+				validator: validatorObjectRecordNotNested,
 			},
 			cssClasses,
 		},
diff --git a/src/ui/src/components/core/input/CoreRatingInput.vue b/src/ui/src/components/core/input/CoreRatingInput.vue
index 47d5f58d8..b45f83f3d 100644
--- a/src/ui/src/components/core/input/CoreRatingInput.vue
+++ b/src/ui/src/components/core/input/CoreRatingInput.vue
@@ -58,6 +58,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to provide a rating.";
@@ -95,18 +96,33 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are 0 and 1.",
+				validator: {
+					type: "number",
+					minimum: 0,
+					maximum: 1,
+				},
 			},
 			maxValue: {
 				name: "Max value",
 				type: FieldType.Number,
 				default: "5",
 				desc: "Valid values are between 2 and 11.",
+				validator: {
+					type: "number",
+					minimum: 2,
+					maximum: 11,
+				},
 			},
 			valueStep: {
 				name: "Step",
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are between 0.25 and 1.",
+				validator: {
+					type: "number",
+					minimum: 0.25,
+					maximum: 1,
+				},
 			},
 			accentColor,
 			primaryTextColor,
diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index f038bb889..0c46e1ce0 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -32,6 +32,7 @@ import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
 import { WdsColor } from "@/wds/tokens";
 import { validatorObjectRecordNotNested } from "@/constants/validators";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select a single value from a searchable list of options.";
@@ -71,6 +72,7 @@ export default {
 				desc: "The maximum allowable number of selected options. Set to zero for unlimited.",
 				type: FieldType.Number,
 				default: "0",
+				validator: validatorPositiveNumber,
 			},
 			accentColor,
 			chipTextColor: {
diff --git a/src/ui/src/components/core/input/CoreSliderInput.vue b/src/ui/src/components/core/input/CoreSliderInput.vue
index 4d2bf49e1..005f12bd7 100644
--- a/src/ui/src/components/core/input/CoreSliderInput.vue
+++ b/src/ui/src/components/core/input/CoreSliderInput.vue
@@ -20,6 +20,7 @@ import { ComponentPublicInstance } from "vue";
 import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select numeric values using a slider with optional constraints like min, max, and step.";
@@ -59,6 +60,7 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				init: "1",
+				validator: validatorPositiveNumber,
 			},
 			accentColor,
 			popoverColor: {
diff --git a/src/ui/src/components/core/input/CoreSliderRangeInput.vue b/src/ui/src/components/core/input/CoreSliderRangeInput.vue
index 332fe0588..374777a9a 100644
--- a/src/ui/src/components/core/input/CoreSliderRangeInput.vue
+++ b/src/ui/src/components/core/input/CoreSliderRangeInput.vue
@@ -20,6 +20,7 @@ import { ComponentPublicInstance } from "vue";
 import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { validatorPositiveNumber } from "../../../constants/validators";
 
 const description =
 	"A user input component that allows users to select numeric values range using a range slider with optional constraints like min, max, and step.";
@@ -59,6 +60,7 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				init: "1",
+				validator: validatorPositiveNumber,
 			},
 			accentColor,
 			popoverColor: {
diff --git a/src/ui/src/components/core/input/CoreTextareaInput.vue b/src/ui/src/components/core/input/CoreTextareaInput.vue
index 99b2924f7..998a7ab74 100644
--- a/src/ui/src/components/core/input/CoreTextareaInput.vue
+++ b/src/ui/src/components/core/input/CoreTextareaInput.vue
@@ -31,6 +31,7 @@ import { FieldControl, FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to enter multi-line text values.";
@@ -63,6 +64,7 @@ export default {
 				type: FieldType.Number,
 				init: "5",
 				default: "5",
+				validator: validatorPositiveNumber,
 			},
 			cssClasses,
 		},
diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index 2a55154c2..af3b64056 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -48,6 +48,7 @@ import {
 	startCollapsed,
 	isCollapsible as isCollapsibleField,
 } from "@/renderer/sharedStyleFields";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A layout component that organizes its child components in columns. Must be inside a Column Container component.";
@@ -71,6 +72,7 @@ export default {
 				type: FieldType.Number,
 				desc: "Relative size when compared to other columns in the same container. A column of width 2 will be double the width of one with width 1.",
 				category: FieldCategory.Style,
+				validator: validatorPositiveNumber,
 			},
 			isSticky: {
 				name: "Sticky",
diff --git a/src/ui/src/components/core/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
index f91817c97..558b944c2 100644
--- a/src/ui/src/components/core/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -73,6 +73,7 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
+import { validatorPositiveNumber } from "../../../constants/validators";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -106,18 +107,21 @@ export default {
 				default: "1",
 				type: FieldType.Number,
 				desc: "The current page number.",
+				validator: validatorPositiveNumber,
 			},
 			pageSize: {
 				name: "Page Size",
 				default: "10",
 				type: FieldType.Number,
 				desc: "The number of items per page.",
+				validator: validatorPositiveNumber,
 			},
 			totalItems: {
 				name: "Total Items",
 				default: "10",
 				type: FieldType.Number,
 				desc: "The total number of items",
+				validator: validatorPositiveNumber,
 			},
 			pageSizeOptions: {
 				name: "Page Size Options",
diff --git a/src/ui/src/components/core/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
index 316f24bd3..255150c97 100644
--- a/src/ui/src/components/core/other/CoreTimer.vue
+++ b/src/ui/src/components/core/other/CoreTimer.vue
@@ -10,6 +10,7 @@
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
+import { validatorPositiveNumber } from "@/constants/validators";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -31,6 +32,7 @@ export default {
 				desc: "How much time to wait between ticks. A tick is considered finished when its event is handled.",
 				default: "200",
 				type: FieldType.Number,
+				validator: validatorPositiveNumber,
 			},
 			isActive: {
 				name: "Active",
diff --git a/src/ui/src/components/core/other/CoreWebcamCapture.vue b/src/ui/src/components/core/other/CoreWebcamCapture.vue
index cd6684515..d98309fb0 100644
--- a/src/ui/src/components/core/other/CoreWebcamCapture.vue
+++ b/src/ui/src/components/core/other/CoreWebcamCapture.vue
@@ -38,6 +38,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsDropdownInput from "@/wds/WdsDropdownInput.vue";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to capture images using their webcam.";
@@ -69,6 +70,7 @@ export default {
 				default: "200",
 				desc: "Set to 0 for manual capture.",
 				type: FieldType.Number,
+				validator: validatorPositiveNumber,
 			},
 			buttonColor,
 			buttonTextColor,
diff --git a/src/ui/src/constants/validators.ts b/src/ui/src/constants/validators.ts
index 5fdc9012d..1782486d8 100644
--- a/src/ui/src/constants/validators.ts
+++ b/src/ui/src/constants/validators.ts
@@ -109,3 +109,8 @@ export const validatorPositiveNumber: SchemaObject = {
 	type: "number",
 	minimum: 0,
 };
+
+export const validatorUri = {
+	type: "string",
+	format: "uri",
+};

From 1a19f3383c25122b1a6f21b820e67392b8f42147 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 11:07:20 +0100
Subject: [PATCH 08/14] cleanup

---
 .../settings/BuilderFieldsKeyValue.vue        |  1 -
 .../builder/settings/BuilderFieldsObject.vue  |  5 +-
 .../builder/settings/BuilderFieldsWidth.vue   |  2 +-
 .../src/components/core/content/CoreTags.vue  |  1 -
 .../src/components/core/content/CoreText.vue  | 87 +++++++++----------
 .../components/core/input/CoreRadioInput.vue  |  4 +
 6 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
index c9e0e142b..97c2e1625 100644
--- a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -82,7 +82,6 @@ import BuilderFieldsObject from "./BuilderFieldsObject.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import { useComponentActions } from "../useComponentActions";
 import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
-import { error } from "ajv/dist/vocabularies/applicator/dependencies";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/settings/BuilderFieldsObject.vue b/src/ui/src/builder/settings/BuilderFieldsObject.vue
index 42880aca7..dbe6f01fe 100644
--- a/src/ui/src/builder/settings/BuilderFieldsObject.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsObject.vue
@@ -15,17 +15,18 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, inject, computed } from "vue";
+import { toRefs, inject, computed, PropType } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import { Component } from "@/writerTypes";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
 const props = defineProps({
-	componentId: { type: String, required: true },
+	componentId: { type: String as PropType<Component["id"]>, required: true },
 	fieldKey: { type: String, required: true },
 	error: { type: String, required: false, default: undefined },
 });
diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
index 256b13bab..e4869fe6a 100644
--- a/src/ui/src/builder/settings/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -23,7 +23,7 @@
 						ref="fixedEl"
 						type="number"
 						:model-value="valuePickFixed"
-						:invalid="!!error"
+						:invalid="error !== undefined"
 						@update:model-value="handleInputFixed"
 					/>
 					<div>px</div>
diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
index 9e0bb32d0..938b57080 100644
--- a/src/ui/src/components/core/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -40,7 +40,6 @@ export default {
 		description,
 		category: "Content",
 		fields: {
-			// TODO: validate
 			tags: {
 				name: "Tags",
 				desc: "Key-value object with tags. Must be a JSON string or a state reference to a dictionary.",
diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index 3d31ae6a6..8894993d0 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -24,12 +24,7 @@
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 import { getClick } from "@/renderer/syntheticEvents";
-import {
-	FieldCategory,
-	FieldControl,
-	FieldType,
-	WriterComponentDefinition,
-} from "@/writerTypes";
+import { FieldCategory, FieldControl, FieldType } from "@/writerTypes";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -41,52 +36,52 @@ def click_handler(state):
 const description =
 	"A component to display plain text or formatted text using Markdown syntax.";
 
-const definition: WriterComponentDefinition = {
-	name: "Text",
-	description,
-	category: "Content",
-	fields: {
-		text: {
-			name: "Text",
-			init: "Text",
-			desc: "Add text directly, or reference state elements with @{my_text}.",
-			type: FieldType.Text,
-			control: FieldControl.Textarea,
-		},
-		useMarkdown: {
-			name: "Use Markdown",
-			desc: "The Markdown output will be sanitised; unsafe elements will be removed.",
-			default: "no",
-			type: FieldType.Text,
-			options: {
-				yes: "Yes",
-				no: "No",
+export default {
+	writer: {
+		name: "Text",
+		description,
+		category: "Content",
+		fields: {
+			text: {
+				name: "Text",
+				init: "Text",
+				desc: "Add text directly, or reference state elements with @{my_text}.",
+				type: FieldType.Text,
+				control: FieldControl.Textarea,
 			},
-		},
-		alignment: {
-			name: "Alignment",
-			default: "left",
-			type: FieldType.Text,
-			options: {
-				left: "Left",
-				center: "Center",
-				right: "Right",
+			useMarkdown: {
+				name: "Use Markdown",
+				desc: "The Markdown output will be sanitised; unsafe elements will be removed.",
+				default: "no",
+				type: FieldType.Text,
+				options: {
+					yes: "Yes",
+					no: "No",
+				},
+			},
+			alignment: {
+				name: "Alignment",
+				default: "left",
+				type: FieldType.Text,
+				options: {
+					left: "Left",
+					center: "Center",
+					right: "Right",
+				},
+				category: FieldCategory.Style,
 			},
-			category: FieldCategory.Style,
+			primaryTextColor,
+			cssClasses,
 		},
-		primaryTextColor,
-		cssClasses,
-	},
-	events: {
-		"wf-click": {
-			desc: "Capture single clicks.",
-			stub: clickHandlerStub.trim(),
+		events: {
+			"wf-click": {
+				desc: "Capture single clicks.",
+				stub: clickHandlerStub.trim(),
+			},
 		},
+		previewField: "text",
 	},
-	previewField: "text",
 };
-
-export default { writer: definition };
 </script>
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
diff --git a/src/ui/src/components/core/input/CoreRadioInput.vue b/src/ui/src/components/core/input/CoreRadioInput.vue
index b6123e965..28bcdd311 100644
--- a/src/ui/src/components/core/input/CoreRadioInput.vue
+++ b/src/ui/src/components/core/input/CoreRadioInput.vue
@@ -79,6 +79,10 @@ export default {
 			orientation: {
 				name: "Orientation",
 				type: FieldType.Text,
+				options: {
+					vertical: "Vertical",
+					horizontal: "Horizontal",
+				},
 				default: "vertical",
 				category: FieldCategory.Style,
 				desc: "Specify how to lay out the options.",

From 449a8ce1cab5fd1631da326cd0a7bafc53a52b75 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 11:22:27 +0100
Subject: [PATCH 09/14] move errors computation in separated hook

---
 .../settings/BuilderSettingsProperties.vue    |  4 +-
 src/ui/src/renderer/useEvaluator.ts           | 69 ++----------------
 src/ui/src/renderer/useFieldsErrors.ts        | 70 +++++++++++++++++++
 src/ui/src/utils/fieldValidation.ts           | 21 ------
 4 files changed, 77 insertions(+), 87 deletions(-)
 create mode 100644 src/ui/src/renderer/useFieldsErrors.ts
 delete mode 100644 src/ui/src/utils/fieldValidation.ts

diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index 597882132..8118daf00 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -139,7 +139,7 @@ import BuilderFieldsText from "./BuilderFieldsText.vue";
 import BuilderFieldsWidth from "./BuilderFieldsWidth.vue";
 import BuilderFieldsTools from "./BuilderFieldsTools.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
-import { useEvaluator } from "@/renderer/useEvaluator";
+import { useFieldsErrors } from "@/renderer/useFieldsErrors";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -160,7 +160,7 @@ const fields = computed(() => {
 	return componentDefinition.value?.fields;
 });
 
-const errorsByFields = useEvaluator(wf).useFieldsError(selectedInstancePath);
+const errorsByFields = useFieldsErrors(wf, selectedInstancePath);
 
 const fieldCategories = computed(() => {
 	return [
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index 4404985e2..ec82916e3 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -1,8 +1,5 @@
 import { ComputedRef, computed } from "vue";
 import { Component, Core, FieldType, InstancePath } from "@/writerTypes";
-import Ajv, { SchemaObject } from "ajv";
-import { formatAjvErrors } from "@/utils/fieldValidation";
-import { buildValidatorEnum } from "@/constants/validators";
 
 export function useEvaluator(wf: Core) {
 	const templateRegex = /[\\]?@{([^}]*)}/g;
@@ -20,7 +17,7 @@ export function useEvaluator(wf: Core) {
 			s = "";
 		let level = 0;
 
-		let i = 0;
+		let i = 0
 		while (i < expr.length) {
 			const c = expr.charAt(i);
 			if (c == "\\") {
@@ -54,7 +51,7 @@ export function useEvaluator(wf: Core) {
 				s += c;
 			}
 
-			i++;
+			i++
 		}
 
 		if (s) {
@@ -145,15 +142,11 @@ export function useEvaluator(wf: Core) {
 		return evaluatedTemplate;
 	}
 
-	function getComponentFromInstancePath(instancePath: InstancePath) {
-		const { componentId } = instancePath.at(-1);
-		return wf.getComponentById(componentId);
-	}
-
 	function getEvaluatedFields(
 		instancePath: InstancePath,
 	): Record<string, ComputedRef<any>> {
-		const component = getComponentFromInstancePath(instancePath);
+		const { componentId } = instancePath.at(-1);
+		const component = wf.getComponentById(componentId);
 		if (!component) return;
 		const evaluatedFields: Record<string, ComputedRef<any>> = {};
 		const { fields } = wf.getComponentDefinition(component.type);
@@ -180,11 +173,7 @@ export function useEvaluator(wf: Core) {
 			typeof evaluated == "undefined" ||
 			evaluated === null ||
 			evaluated === "";
-		if (
-			fieldType == FieldType.Object ||
-			fieldType == FieldType.KeyValue ||
-			fieldType == FieldType.Tools
-		) {
+		if (fieldType == FieldType.Object || fieldType == FieldType.KeyValue || fieldType == FieldType.Tools) {
 			if (!evaluated) {
 				return JSON.parse(defaultValue ?? null);
 			}
@@ -213,53 +202,6 @@ export function useEvaluator(wf: Core) {
 		}
 	}
 
-	function useFieldsError(instancePath: ComputedRef<InstancePath>) {
-		return computed(() => {
-			const component = getComponentFromInstancePath(instancePath.value);
-			if (!component) return {};
-
-			const fields = wf.getComponentDefinition(component.type).fields;
-			if (!fields) return {};
-
-			const evaluatedFields = getEvaluatedFields(instancePath.value);
-
-			// const evaluatedFieldsRaw = Object.entries(evaluatedFields).reduce(
-			// 	(acc, [k, v]) => {
-			// 		acc[k] = v.value;
-			// 		return acc;
-			// 	},
-			// 	{},
-			// );
-
-			return Object.entries(fields).reduce((acc, [key, definition]) => {
-				let schema = definition.validator;
-
-				if (schema === undefined && definition.options !== undefined) {
-					// set an automatic enum schema for options fields
-					schema = {
-						type: "string",
-						enum: Object.keys(definition.options),
-					};
-				}
-
-				if (schema === undefined) return acc;
-				console.log("validate", key, evaluatedFields[key].value);
-
-				const ajv = new Ajv();
-				const validate = ajv.compile(schema);
-
-				const valid = validate(evaluatedFields[key].value);
-
-				if (valid || validate.errors === undefined) return acc;
-
-				acc[key] = formatAjvErrors(validate.errors);
-				console.log("validate errors", acc[key]);
-
-				return acc;
-			}, {});
-		});
-	}
-
 	/**
 	 * Check the visibility of a component. If an instance path is specified, context is evaluated.
 	 *
@@ -289,6 +231,5 @@ export function useEvaluator(wf: Core) {
 		getEvaluatedFields,
 		isComponentVisible,
 		evaluateExpression,
-		useFieldsError,
 	};
 }
diff --git a/src/ui/src/renderer/useFieldsErrors.ts b/src/ui/src/renderer/useFieldsErrors.ts
new file mode 100644
index 000000000..00b7a5b9f
--- /dev/null
+++ b/src/ui/src/renderer/useFieldsErrors.ts
@@ -0,0 +1,70 @@
+import type { Core, InstancePath } from "@/writerTypes";
+import Ajv, { ErrorObject } from "ajv";
+import { computed, ComputedRef } from "vue";
+import { useEvaluator } from "./useEvaluator";
+
+export function useFieldsErrors(
+	wf: Core,
+	instancePath: ComputedRef<InstancePath>,
+) {
+	const { getEvaluatedFields } = useEvaluator(wf);
+
+	const component = computed(() => {
+		const { componentId } = instancePath.value.at(-1);
+		return wf.getComponentById(componentId);
+	});
+
+	return computed(() => {
+		if (!component.value) return {};
+
+		const fields = wf.getComponentDefinition(component.value.type).fields;
+		if (!fields) return {};
+
+		const evaluatedFields = getEvaluatedFields(instancePath.value);
+
+		return Object.entries(fields).reduce((acc, [key, definition]) => {
+			let schema = definition.validator;
+
+			if (schema === undefined && definition.options !== undefined) {
+				// set an automatic enum schema for options fields
+				schema = {
+					type: "string",
+					enum: Object.keys(definition.options),
+				};
+			}
+
+			if (schema === undefined) return acc;
+
+			const ajv = new Ajv();
+			const validate = ajv.compile(schema);
+
+			const valid = validate(evaluatedFields[key].value);
+
+			if (valid || validate.errors === undefined) return acc;
+
+			acc[key] = formatAjvErrors(validate.errors);
+
+			return acc;
+		}, {});
+	});
+}
+
+function formatAjvError(error: ErrorObject): string {
+	let message = "";
+
+	if (error.instancePath) {
+		message += `${error.instancePath} `;
+	}
+
+	message += error.message;
+
+	if (Array.isArray(error.params?.allowedValues)) {
+		message += `: ${error.params.allowedValues}`;
+	}
+
+	return message;
+}
+
+function formatAjvErrors(errors: ErrorObject[]): string {
+	return errors.map(formatAjvError).join("\n");
+}
diff --git a/src/ui/src/utils/fieldValidation.ts b/src/ui/src/utils/fieldValidation.ts
deleted file mode 100644
index 56a0a5649..000000000
--- a/src/ui/src/utils/fieldValidation.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { ErrorObject } from "ajv";
-
-function formatAjvError(error: ErrorObject): string {
-	console.log("##formatAjvError", error);
-	let message = "";
-
-	if (error.instancePath) {
-		message += `${error.instancePath} `;
-	}
-
-	message += error.message;
-
-	if (Array.isArray(error.params?.allowedValues)) {
-		message += `: ${error.params.allowedValues}`;
-	}
-
-	return message;
-}
-export function formatAjvErrors(errors: ErrorObject[]): string {
-	return errors.map(formatAjvError).join("\n");
-}

From 7f75b52ce1b140c26f178fd8f6c634b83680041a Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 11:28:33 +0100
Subject: [PATCH 10/14] refactor

---
 src/ui/src/renderer/useFieldsErrors.ts | 55 ++++++++++++++------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/ui/src/renderer/useFieldsErrors.ts b/src/ui/src/renderer/useFieldsErrors.ts
index 00b7a5b9f..0ad9070c1 100644
--- a/src/ui/src/renderer/useFieldsErrors.ts
+++ b/src/ui/src/renderer/useFieldsErrors.ts
@@ -9,43 +9,46 @@ export function useFieldsErrors(
 ) {
 	const { getEvaluatedFields } = useEvaluator(wf);
 
-	const component = computed(() => {
+	const componentFields = computed(() => {
 		const { componentId } = instancePath.value.at(-1);
-		return wf.getComponentById(componentId);
-	});
-
-	return computed(() => {
-		if (!component.value) return {};
+		const component = wf.getComponentById(componentId);
+		if (!component) return {};
 
-		const fields = wf.getComponentDefinition(component.value.type).fields;
-		if (!fields) return {};
+		return wf.getComponentDefinition(component.type).fields ?? {};
+	});
 
-		const evaluatedFields = getEvaluatedFields(instancePath.value);
+	const evaluatedFields = computed(() =>
+		getEvaluatedFields(instancePath.value),
+	);
 
-		return Object.entries(fields).reduce((acc, [key, definition]) => {
-			let schema = definition.validator;
+	return computed(() => {
+		return Object.entries(componentFields.value).reduce(
+			(acc, [key, definition]) => {
+				let schema = definition.validator;
 
-			if (schema === undefined && definition.options !== undefined) {
-				// set an automatic enum schema for options fields
-				schema = {
-					type: "string",
-					enum: Object.keys(definition.options),
-				};
-			}
+				if (schema === undefined && definition.options !== undefined) {
+					// set an automatic enum schema for options fields
+					schema = {
+						type: "string",
+						enum: Object.keys(definition.options),
+					};
+				}
 
-			if (schema === undefined) return acc;
+				if (schema === undefined) return acc;
 
-			const ajv = new Ajv();
-			const validate = ajv.compile(schema);
+				const ajv = new Ajv();
+				const validate = ajv.compile(schema);
 
-			const valid = validate(evaluatedFields[key].value);
+				const valid = validate(evaluatedFields.value[key].value);
 
-			if (valid || validate.errors === undefined) return acc;
+				if (valid || validate.errors === undefined) return acc;
 
-			acc[key] = formatAjvErrors(validate.errors);
+				acc[key] = formatAjvErrors(validate.errors);
 
-			return acc;
-		}, {});
+				return acc;
+			},
+			{},
+		);
 	});
 }
 

From a82c7d8350ce054ad09d5720ff9cfe59cd539f97 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 11:36:40 +0100
Subject: [PATCH 11/14] refactor

---
 src/ui/src/renderer/useFieldsErrors.ts | 53 ++++++++++++++++----------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/ui/src/renderer/useFieldsErrors.ts b/src/ui/src/renderer/useFieldsErrors.ts
index 0ad9070c1..3eab066c0 100644
--- a/src/ui/src/renderer/useFieldsErrors.ts
+++ b/src/ui/src/renderer/useFieldsErrors.ts
@@ -1,4 +1,8 @@
-import type { Core, InstancePath } from "@/writerTypes";
+import type {
+	Core,
+	InstancePath,
+	WriterComponentDefinitionField,
+} from "@/writerTypes";
 import Ajv, { ErrorObject } from "ajv";
 import { computed, ComputedRef } from "vue";
 import { useEvaluator } from "./useEvaluator";
@@ -24,32 +28,39 @@ export function useFieldsErrors(
 	return computed(() => {
 		return Object.entries(componentFields.value).reduce(
 			(acc, [key, definition]) => {
-				let schema = definition.validator;
-
-				if (schema === undefined && definition.options !== undefined) {
-					// set an automatic enum schema for options fields
-					schema = {
-						type: "string",
-						enum: Object.keys(definition.options),
-					};
-				}
+				const value = evaluatedFields.value[key].value;
+				acc[key] = computeFieldErrors(definition, value);
+				return acc;
+			},
+			{},
+		);
+	});
+}
 
-				if (schema === undefined) return acc;
+function computeFieldErrors(
+	field: WriterComponentDefinitionField,
+	value: unknown,
+) {
+	let schema = field.validator;
+
+	if (schema === undefined && field.options !== undefined) {
+		// set an automatic enum schema for options fields
+		schema = {
+			type: "string",
+			enum: Object.keys(field.options),
+		};
+	}
 
-				const ajv = new Ajv();
-				const validate = ajv.compile(schema);
+	if (schema === undefined) return undefined;
 
-				const valid = validate(evaluatedFields.value[key].value);
+	const ajv = new Ajv();
+	const validate = ajv.compile(schema);
 
-				if (valid || validate.errors === undefined) return acc;
+	const valid = validate(value);
 
-				acc[key] = formatAjvErrors(validate.errors);
+	if (valid || validate.errors === undefined) return undefined;
 
-				return acc;
-			},
-			{},
-		);
-	});
+	return formatAjvErrors(validate.errors);
 }
 
 function formatAjvError(error: ErrorObject): string {

From aa4b587292fdfe1d030ed6641e794973c98648cc Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 12:13:59 +0100
Subject: [PATCH 12/14] cache schema

---
 .../components/core/input/CoreRatingInput.vue | 20 ++-----
 src/ui/src/constants/validators.ts            | 57 +++++++++++++++----
 src/ui/src/renderer/useFieldsErrors.ts        | 14 ++---
 3 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/src/ui/src/components/core/input/CoreRatingInput.vue b/src/ui/src/components/core/input/CoreRatingInput.vue
index b45f83f3d..c4ac413df 100644
--- a/src/ui/src/components/core/input/CoreRatingInput.vue
+++ b/src/ui/src/components/core/input/CoreRatingInput.vue
@@ -58,7 +58,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
-import { validatorPositiveNumber } from "@/constants/validators";
+import { buildValidatorNumberBetween } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to provide a rating.";
@@ -96,33 +96,21 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are 0 and 1.",
-				validator: {
-					type: "number",
-					minimum: 0,
-					maximum: 1,
-				},
+				validator: buildValidatorNumberBetween(0, 1),
 			},
 			maxValue: {
 				name: "Max value",
 				type: FieldType.Number,
 				default: "5",
 				desc: "Valid values are between 2 and 11.",
-				validator: {
-					type: "number",
-					minimum: 2,
-					maximum: 11,
-				},
+				validator: buildValidatorNumberBetween(2, 11),
 			},
 			valueStep: {
 				name: "Step",
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are between 0.25 and 1.",
-				validator: {
-					type: "number",
-					minimum: 0.25,
-					maximum: 1,
-				},
+				validator: buildValidatorNumberBetween(0.25, 1),
 			},
 			accentColor,
 			primaryTextColor,
diff --git a/src/ui/src/constants/validators.ts b/src/ui/src/constants/validators.ts
index 1782486d8..f502c9241 100644
--- a/src/ui/src/constants/validators.ts
+++ b/src/ui/src/constants/validators.ts
@@ -1,18 +1,41 @@
-import type { SchemaObject } from "ajv";
+import { Ajv, type SchemaObject } from "ajv";
+
+/**
+ * We use an URL to define the `$id` of the schema. The URL doesn't have to exists, it's only used for caching
+ * https://ajv.js.org/guide/managing-schemas.html#cache-key-schema-vs-key-vs-id
+ */
+function generateSchemaId(path: string) {
+	return `https://dev.writer.com/framework/${encodeURIComponent(path)}.json`;
+}
 
 export function buildValidatorEnum(options: string[]): SchemaObject {
 	return {
+		$id: generateSchemaId(options.join(",")),
 		type: "string",
 		enum: options,
 	};
 }
 
+export function buildValidatorNumberBetween(
+	minimum: number,
+	maximum: number,
+): SchemaObject {
+	return {
+		$id: generateSchemaId(`between-${minimum}-${maximum}`),
+		type: "number",
+		minimum,
+		maximum,
+	};
+}
+
 export const validatorCssClassname: SchemaObject = {
+	$id: generateSchemaId("cssClassname"),
 	type: "string",
 	pattern: "(^[a-zA-Z_][a-zA-Z0-9_-]*$)|(^$)",
 };
 
 export const validatorCssSize: SchemaObject = {
+	$id: generateSchemaId("cssSize"),
 	type: "string",
 	pattern:
 		"(^([+-]?\\d*\\.?\\d+)(px|em|%|vh|vw|rem|pt|pc|in|cm|mm|ex|ch|vmin|vmax|fr)$)|(^$)",
@@ -24,23 +47,17 @@ export const validatorEnumYesNo: SchemaObject = buildValidatorEnum([
 ]);
 
 export const validatorArrayOfString: SchemaObject = {
+	$id: generateSchemaId("arrayOfString"),
 	type: "array",
 	items: { type: "string" },
 };
 
-export const validatorGpsLat: SchemaObject = {
-	type: "number",
-	minimum: -90,
-	maximum: 90,
-};
+export const validatorGpsLat = buildValidatorNumberBetween(-90, 90);
 
-export const validatorGpsLng: SchemaObject = {
-	type: "number",
-	minimum: -180,
-	maximum: 180,
-};
+export const validatorGpsLng = buildValidatorNumberBetween(-180, 180);
 
 export const validatorGpsMarker: SchemaObject = {
+	$id: generateSchemaId("gpsMarker"),
 	type: "object",
 	properties: {
 		name: {
@@ -54,11 +71,13 @@ export const validatorGpsMarker: SchemaObject = {
 };
 
 export const validatorGpsMarkers: SchemaObject = {
+	$id: generateSchemaId("gpsMarkers"),
 	type: "array",
 	items: validatorGpsMarker,
 };
 
 export const validatorObjectRecordNotNested: SchemaObject = {
+	$id: generateSchemaId("objectRecordNotNested"),
 	type: "object",
 	patternProperties: {
 		"^.*$": {
@@ -69,6 +88,7 @@ export const validatorObjectRecordNotNested: SchemaObject = {
 };
 
 export const validatorAnotatedText: SchemaObject = {
+	$id: generateSchemaId("anotatedText"),
 	type: "array",
 	items: {
 		oneOf: [
@@ -82,6 +102,7 @@ export const validatorAnotatedText: SchemaObject = {
 };
 
 export const validatorRepeaterObject: SchemaObject = {
+	$id: generateSchemaId("repeaterObject"),
 	type: "object",
 	patternProperties: {
 		"^.*$": {
@@ -92,6 +113,7 @@ export const validatorRepeaterObject: SchemaObject = {
 };
 
 export const validatorChatBotMessage: SchemaObject = {
+	$id: generateSchemaId("chatBotMessage"),
 	type: "object",
 	properties: {
 		role: { type: "string" },
@@ -101,16 +123,29 @@ export const validatorChatBotMessage: SchemaObject = {
 };
 
 export const validatorChatBotMessages: SchemaObject = {
+	$id: generateSchemaId("chatBotMessages"),
 	type: "array",
 	items: validatorChatBotMessage,
 };
 
 export const validatorPositiveNumber: SchemaObject = {
+	$id: generateSchemaId("positiveNumber"),
 	type: "number",
 	minimum: 0,
 };
 
 export const validatorUri = {
+	$id: generateSchemaId("uri"),
 	type: "string",
 	format: "uri",
 };
+
+export const ajv = new Ajv();
+
+/**
+ * Compile and cache schema on demand
+ */
+export function getJsonSchemaValidator(schema: SchemaObject) {
+	if (schema?.$id === undefined) return ajv.compile(schema);
+	return ajv.getSchema(schema.$id) || ajv.compile(schema);
+}
diff --git a/src/ui/src/renderer/useFieldsErrors.ts b/src/ui/src/renderer/useFieldsErrors.ts
index 3eab066c0..54fcb4a71 100644
--- a/src/ui/src/renderer/useFieldsErrors.ts
+++ b/src/ui/src/renderer/useFieldsErrors.ts
@@ -3,9 +3,13 @@ import type {
 	InstancePath,
 	WriterComponentDefinitionField,
 } from "@/writerTypes";
-import Ajv, { ErrorObject } from "ajv";
 import { computed, ComputedRef } from "vue";
 import { useEvaluator } from "./useEvaluator";
+import {
+	buildValidatorEnum,
+	getJsonSchemaValidator,
+} from "@/constants/validators";
+import type { ErrorObject } from "ajv";
 
 export function useFieldsErrors(
 	wf: Core,
@@ -45,16 +49,12 @@ function computeFieldErrors(
 
 	if (schema === undefined && field.options !== undefined) {
 		// set an automatic enum schema for options fields
-		schema = {
-			type: "string",
-			enum: Object.keys(field.options),
-		};
+		schema = buildValidatorEnum(Object.keys(field.options));
 	}
 
 	if (schema === undefined) return undefined;
 
-	const ajv = new Ajv();
-	const validate = ajv.compile(schema);
+	const validate = getJsonSchemaValidator(schema);
 
 	const valid = validate(value);
 

From 55fb069cda813f601822e798df7aefa61d4ffdda Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 12:22:06 +0100
Subject: [PATCH 13/14] improve naming

---
 src/ui/src/components/core/input/CoreRatingInput.vue |  8 ++++----
 src/ui/src/constants/validators.ts                   | 10 +++++-----
 src/ui/src/renderer/useFieldsErrors.ts               |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/ui/src/components/core/input/CoreRatingInput.vue b/src/ui/src/components/core/input/CoreRatingInput.vue
index c4ac413df..aa7ca3087 100644
--- a/src/ui/src/components/core/input/CoreRatingInput.vue
+++ b/src/ui/src/components/core/input/CoreRatingInput.vue
@@ -58,7 +58,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
-import { buildValidatorNumberBetween } from "@/constants/validators";
+import { buildJsonSchemaForNumberBetween } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to provide a rating.";
@@ -96,21 +96,21 @@ export default {
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are 0 and 1.",
-				validator: buildValidatorNumberBetween(0, 1),
+				validator: buildJsonSchemaForNumberBetween(0, 1),
 			},
 			maxValue: {
 				name: "Max value",
 				type: FieldType.Number,
 				default: "5",
 				desc: "Valid values are between 2 and 11.",
-				validator: buildValidatorNumberBetween(2, 11),
+				validator: buildJsonSchemaForNumberBetween(2, 11),
 			},
 			valueStep: {
 				name: "Step",
 				type: FieldType.Number,
 				default: "1",
 				desc: "Valid values are between 0.25 and 1.",
-				validator: buildValidatorNumberBetween(0.25, 1),
+				validator: buildJsonSchemaForNumberBetween(0.25, 1),
 			},
 			accentColor,
 			primaryTextColor,
diff --git a/src/ui/src/constants/validators.ts b/src/ui/src/constants/validators.ts
index f502c9241..80e9eb424 100644
--- a/src/ui/src/constants/validators.ts
+++ b/src/ui/src/constants/validators.ts
@@ -8,7 +8,7 @@ function generateSchemaId(path: string) {
 	return `https://dev.writer.com/framework/${encodeURIComponent(path)}.json`;
 }
 
-export function buildValidatorEnum(options: string[]): SchemaObject {
+export function buildJsonSchemaForEnum(options: string[]): SchemaObject {
 	return {
 		$id: generateSchemaId(options.join(",")),
 		type: "string",
@@ -16,7 +16,7 @@ export function buildValidatorEnum(options: string[]): SchemaObject {
 	};
 }
 
-export function buildValidatorNumberBetween(
+export function buildJsonSchemaForNumberBetween(
 	minimum: number,
 	maximum: number,
 ): SchemaObject {
@@ -41,7 +41,7 @@ export const validatorCssSize: SchemaObject = {
 		"(^([+-]?\\d*\\.?\\d+)(px|em|%|vh|vw|rem|pt|pc|in|cm|mm|ex|ch|vmin|vmax|fr)$)|(^$)",
 };
 
-export const validatorEnumYesNo: SchemaObject = buildValidatorEnum([
+export const validatorEnumYesNo: SchemaObject = buildJsonSchemaForEnum([
 	"yes",
 	"no",
 ]);
@@ -52,9 +52,9 @@ export const validatorArrayOfString: SchemaObject = {
 	items: { type: "string" },
 };
 
-export const validatorGpsLat = buildValidatorNumberBetween(-90, 90);
+export const validatorGpsLat = buildJsonSchemaForNumberBetween(-90, 90);
 
-export const validatorGpsLng = buildValidatorNumberBetween(-180, 180);
+export const validatorGpsLng = buildJsonSchemaForNumberBetween(-180, 180);
 
 export const validatorGpsMarker: SchemaObject = {
 	$id: generateSchemaId("gpsMarker"),
diff --git a/src/ui/src/renderer/useFieldsErrors.ts b/src/ui/src/renderer/useFieldsErrors.ts
index 54fcb4a71..f350b3ab9 100644
--- a/src/ui/src/renderer/useFieldsErrors.ts
+++ b/src/ui/src/renderer/useFieldsErrors.ts
@@ -6,7 +6,7 @@ import type {
 import { computed, ComputedRef } from "vue";
 import { useEvaluator } from "./useEvaluator";
 import {
-	buildValidatorEnum,
+	buildJsonSchemaForEnum,
 	getJsonSchemaValidator,
 } from "@/constants/validators";
 import type { ErrorObject } from "ajv";
@@ -49,7 +49,7 @@ function computeFieldErrors(
 
 	if (schema === undefined && field.options !== undefined) {
 		// set an automatic enum schema for options fields
-		schema = buildValidatorEnum(Object.keys(field.options));
+		schema = buildJsonSchemaForEnum(Object.keys(field.options));
 	}
 
 	if (schema === undefined) return undefined;

From 26ba4edf8e7f99a0eb8ef53bbe90ad95b422d385 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 3 Jan 2025 12:35:32 +0100
Subject: [PATCH 14/14] fix strict mode

---
 .../src/components/core/input/CoreSliderRangeInput.vue   | 2 +-
 src/ui/src/components/core/other/CorePagination.vue      | 2 +-
 src/ui/src/constants/validators.ts                       | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/ui/src/components/core/input/CoreSliderRangeInput.vue b/src/ui/src/components/core/input/CoreSliderRangeInput.vue
index 374777a9a..c96d78c57 100644
--- a/src/ui/src/components/core/input/CoreSliderRangeInput.vue
+++ b/src/ui/src/components/core/input/CoreSliderRangeInput.vue
@@ -20,7 +20,7 @@ import { ComponentPublicInstance } from "vue";
 import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
-import { validatorPositiveNumber } from "../../../constants/validators";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const description =
 	"A user input component that allows users to select numeric values range using a range slider with optional constraints like min, max, and step.";
diff --git a/src/ui/src/components/core/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
index 558b944c2..b27b44245 100644
--- a/src/ui/src/components/core/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -73,7 +73,7 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
-import { validatorPositiveNumber } from "../../../constants/validators";
+import { validatorPositiveNumber } from "@/constants/validators";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
diff --git a/src/ui/src/constants/validators.ts b/src/ui/src/constants/validators.ts
index 80e9eb424..58f40441e 100644
--- a/src/ui/src/constants/validators.ts
+++ b/src/ui/src/constants/validators.ts
@@ -1,8 +1,8 @@
 import { Ajv, type SchemaObject } from "ajv";
 
 /**
- * We use an URL to define the `$id` of the schema. The URL doesn't have to exists, it's only used for caching
- * https://ajv.js.org/guide/managing-schemas.html#cache-key-schema-vs-key-vs-id
+ * We use an URL to define the `$id` of the schema. The URL doesn't have to exist, it's only used for caching.
+ * @see <https://ajv.js.org/guide/managing-schemas.html#cache-key-schema-vs-key-vs-id>
  */
 function generateSchemaId(path: string) {
 	return `https://dev.writer.com/framework/${encodeURIComponent(path)}.json`;
@@ -140,7 +140,10 @@ export const validatorUri = {
 	format: "uri",
 };
 
-export const ajv = new Ajv();
+export const ajv = new Ajv({
+	strict: true,
+	allowUnionTypes: true,
+});
 
 /**
  * Compile and cache schema on demand