@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/ar/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-24
+updatedAt: 2026-01-28
 title: ملف المحتوى
 description: تعلّم كيفية تخصيص الامتدادات لملفات إعلان المحتوى الخاصة بك. اتبع هذا التوثيق لتنفيذ الشروط بكفاءة في مشروعك.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.0.0
+    date: 2026-01-28
+    changes: إضافة نوع عقدة المحتوى `html`
   - version: 8.0.0
     date: 2026-01-24
     changes: Rename `live` import mode to `fetch` to better describe the underlying mechanism.
@@ -84,6 +87,7 @@ interface Content {
   quantityContent: string;
   conditionalContent: string;
   markdownContent: never;
+  htmlContent: never;
   externalContent: string;
   insertionContent: string;
   nestedContent: string;
@@ -129,6 +133,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# مثال على ماركداون"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * متاح فقط باستخدام `react-intlayer` أو `next-intlayer`
@@ -179,6 +184,7 @@ export default {
       "login.button" // [اختياري] المسار إلى المحتوى للتضمين
     ),
     markdownContent: md("# مثال على ماركداون"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -229,6 +235,7 @@ module.exports = {
       "login.button" // [اختياري] مسار المحتوى للتضمين
     ),
     markdownContent: md("# مثال على ماركداون"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -290,6 +297,10 @@ module.exports = {
       "nodeType": "markdown",
       "markdown": "# مثال على ماركداون",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -324,6 +335,7 @@ module.exports = {
 - **محتوى التعداد**: محتوى يتغير بناءً على قيم معدودة [انظر محتوى التعداد](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/enumeration_content.md)
 - **محتوى الإدراج**: محتوى يمكن إدراجه داخل محتويات أخرى [انظر محتوى الإدراج](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/insertion_content.md)
 - **محتوى ماركداون**: محتوى نص غني بصيغة ماركداون [انظر محتوى ماركداون](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/markdown_content.md)
+- **محتوى HTML**: محتوى HTML غني مع مكونات مخصصة اختيارية [انظر محتوى HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/html.md)
 - **محتوى متداخل**: مراجع إلى قواميس أخرى [انظر المحتوى المتداخل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/nested_content.md)
 - **محتوى حسب الجنس**: محتوى يختلف بناءً على الجنس [انظر محتوى الجنس](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/gender_content.md)
 - **محتوى ملف**: مراجع إلى ملفات خارجية [انظر محتوى الملف](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/file_content.md)
@@ -696,6 +708,23 @@ markdownContent: md(
 );
 ```
 
+### محتوى HTML (`html`)
+
+محتوى HTML غني يمكنه استخدام وسوم قياسية أو مكونات مخصصة:
+
+```typescript
+import { html, file, t } from "intlayer";
+
+// HTML مضمن
+htmlContent: html("<p>Hello <strong>World</strong></p>");
+
+// HTML حسب اللغة من ملفات خارجية
+localizedHtmlContent: t({
+  en: html(file("./content.en.html")),
+  ar: html(file("./content.ar.html")),
+});
+```
+
 ### محتوى الجنس (`gender`)
 
 محتوى يتغير بناءً على الجنس:

package/docs/ar/dictionary/html.md

@@ -31,47 +31,12 @@ history:
 
 يدعم Intlayer محتوى HTML، مما يتيح لك تضمين محتوى غني ومنظم داخل القواميس (dictionaries) الخاصة بك. يمكن عرض هذا المحتوى باستخدام وسوم HTML القياسية أو استبداله بمكونات مخصصة أثناء وقت التشغيل.
 
-## كيف يعمل HTML
-
-يقوم Intlayer v8 بذكاء باكتشاف وسوم HTML داخل سلاسل المحتوى الخاصة بك. إذا تم التعرف على السلسلة كـ HTML (تحتوي على وسوم)، فسيتم تحويلها تلقائيًا إلى عقدة HTML.
-
-<Columns>
-<Column title="سلوك v7 (التغليف اليدوي)">
-
-```typescript fileName="htmlDictionary.content.ts"
-import { html } from "intlayer";
-
-export default {
-  key: "app",
-  content: {
-    text: html("<p>مرحبًا <strong>بالعالم</strong></p>"),
-  },
-};
-```
-
-</Column>
-<Column title="سلوك v8 (الكشف التلقائي)">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>مرحبًا <strong>بالعالم</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## إعلان محتوى HTML
 
 يمكنك تعريف محتوى HTML باستخدام الدالة `html` أو ببساطة كسلسلة نصية.
 
 <Tabs>
-  <Tab label="التغليف اليدوي">
+  <Tab label="التغليف اليدوي" value="manual-wrapping">
     استخدم الدالة `html` لتعريف محتوى HTML صراحة. هذا يضمن مطابقة الوسوم القياسية بشكل صحيح حتى إذا تم تعطيل الكشف التلقائي.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -88,7 +53,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="الكشف التلقائي">
+  <Tab label="الكشف التلقائي" value="automatic-detection">
     إذا كانت السلسلة تحتوي على علامات HTML الشائعة (مثل `<p>`, `<div>`, `<strong>`، إلخ)، فسيقوم Intlayer بتحويلها تلقائيًا.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -101,7 +66,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="ملفات خارجية">
+  <Tab label="ملفات خارجية" value="external-files">
     استورد محتوى HTML من ملفات. لاحظ أن دالة `file()` حاليًا تُعيد سلسلة نصية، وسيتم اكتشافها تلقائيًا كمحتوى HTML إذا كانت تحتوي على علامات.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -122,6 +87,30 @@ export default {
   </Tab>
 </Tabs>
 
+### عقدة `html()`
+
+دالة `html()` هي ميزة جديدة في Intlayer v8 تتيح لك تحديد محتوى HTML بشكل صريح في قواميسك. بينما يمكن لـ Intlayer غالبًا اكتشاف محتوى HTML تلقائيًا، فإن استخدام دالة `html()` يوفر عدة مزايا:
+
+- **سلامة النوع (Type Safety)**: تتيح لك دالة `html()` تحديد الخصائص (props) المتوقعة للمكونات المخصصة، مما يوفر إكمالاً تلقائيًا وفحصًا أفضل للنوع في المحرر الخاص بك.
+- **الإعلان الصريح**: يضمن معاملة السلسلة دائمًا على أنها HTML، حتى لو لم تكن تحتوي على علامات HTML قياسية من شأنها تشغيل الاكتشاف التلقائي.
+- **تعريف المكونات المخصصة**: يمكنك تمرير وسيط ثانٍ إلى `html()` لتعريف المكونات المخصصة وأنواع الخصائص المتوقعة لها.
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='مرحباً'>العالم</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+عند استخدام طريقة `.use()` على عقدة HTML، سيتم التحقق من المكونات التي تقدمها مقابل التعريف المقدم في دالة `html()` (إذا كان متاحًا).
+
 ---
 
 ## عرض HTML
@@ -133,7 +122,7 @@ export default {
 عند الوصول إلى المحتوى عبر `useIntlayer`، تكون عقد HTML جاهزة بالفعل للعرض.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     يمكن عرض عقد HTML مباشرةً كـ JSX. تعمل الوسوم القياسية تلقائيًا.
 
     ```tsx fileName="App.tsx"
@@ -155,7 +144,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     في Vue، يمكن عرض محتوى HTML باستخدام العنصر المدمج `component`.
 
     ```vue fileName="App.vue"
@@ -175,7 +164,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     يقوم Svelte بعرض عناصر HTML كسلاسل نصية. استخدم `{@html}` لعرضها.
 
     ```svelte
@@ -188,7 +177,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     يدعم Preact عناصر HTML مباشرةً داخل JSX.
 
     ```tsx fileName="App.tsx"
@@ -201,7 +190,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     يدعم Solid عناصر HTML مباشرةً داخل JSX.
 
     ```tsx fileName="App.tsx"
@@ -214,7 +203,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     يستخدم Angular توجيه `[innerHTML]` لعرض محتوى HTML.
 
     ```typescript fileName="app.component.ts"
@@ -247,7 +236,7 @@ export default {
 يمكنك تكوين عرض HTML على مستوى التطبيق بأكمله. هذا مناسب لتعريف مكونات مخصصة يجب أن تكون متاحة في جميع محتويات HTML.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer";
@@ -265,7 +254,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -286,7 +275,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -304,7 +293,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -321,7 +310,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -338,7 +327,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -365,7 +354,7 @@ export default {
 إذا كنت بحاجة إلى عرض سلاسل HTML خام أو التحكم بشكل أكبر في تعيين المكونات، فاستخدم الأدوات التالية.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### المكوّن `<HTMLRenderer />`
     عرض سلسلة HTML باستخدام مكونات محددة.
 
@@ -402,7 +391,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
    
     #### مكوّن `<HTMLRenderer />`
    
@@ -417,7 +406,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
   
     #### المكوّن `<HTMLRenderer />`
    
@@ -451,7 +440,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     #### مكوّن `<HTMLRenderer />`
    
@@ -482,7 +471,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     #### مكوّن `<HTMLRenderer />`
    
@@ -513,7 +502,7 @@ export default {
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### خدمة `IntlayerMarkdownService`
     عرض سلسلة HTML باستخدام الخدمة.
 

package/docs/ar/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 يدعم Intlayer محتوى النصوص الغنية المحدد باستخدام صيغة Markdown. يتيح لك ذلك كتابة وصيانة المحتوى بسهولة مع تنسيق غني، مثل المدونات والمقالات والمزيد.
 
-## كيف يعمل Markdown
-
-يقوم Intlayer v8 بذكاء باكتشاف صيغة Markdown داخل سلاسل المحتوى الخاصة بك. إذا تم التعرف على السلسلة كـ Markdown، فسيتم تحويلها تلقائيًا إلى عقدة Markdown.
-
-<Columns>
-  <Column title="سلوك v7 (التغليف اليدوي)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## عنواني \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="سلوك v8 (الكشف التلقائي)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // تفعيل الكشف التلقائي لمحتوى Markdown - يمكن ضبطه عالميًا في intlayer.config.ts
-      content: {
-        text: "## عنواني \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## الجزء الأول: إعلان محتوى Markdown
 
 يمكنك تعريف محتوى Markdown باستخدام الدالة `md` أو ببساطة كسلسلة نصية (إذا كانت تحتوي على صيغة Markdown).
 
 <Tabs>
-  <Tab label="التغليف اليدوي">
+  <Tab label="التغليف اليدوي" value="manual-wrapping">
     استخدم الدالة `md` لتعريف محتوى Markdown صراحة. هذا مفيد إذا كنت تريد ضمان معاملة السلسلة كـ Markdown حتى لو لم تكن تحتوي على صيغة واضحة.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -90,7 +54,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="الكشف التلقائي">
+  <Tab label="الكشف التلقائي" value="automatic-detection">
     إذا كانت السلسلة تحتوي على مؤشرات Markdown شائعة (مثل العناوين، القوائم، الروابط، إلخ)، فسيقوم Intlayer بتحويلها تلقائيًا.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -104,7 +68,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="ملفات خارجية">
+  <Tab label="ملفات خارجية" value="external-files">
     استورد ملفات `.md` مباشرة باستخدام الدالة `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -135,7 +99,7 @@ history:
 عند الوصول إلى المحتوى عبر `useIntlayer`، تكون عقد Markdown جاهزة بالفعل للعرض.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     يمكن عرض عقد Markdown مباشرةً كـ JSX.
 
     ```tsx fileName="App.tsx"
@@ -156,7 +120,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     في Vue، يمكن عرض محتوى Markdown باستخدام العنصر المدمج `component` أو مباشرة كعقدة.
 
     ```vue fileName="App.vue"
@@ -171,7 +135,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     يقوم Svelte بعرض Markdown كسلسلة HTML افتراضيًا. استخدم `{@html}` لعرضها.
 
     ```svelte
@@ -184,7 +148,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     يدعم Preact عقد Markdown مباشرة داخل JSX.
 
     ```tsx fileName="App.tsx"
@@ -197,7 +161,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     يدعم Solid عقد Markdown مباشرة داخل JSX.
 
     ```tsx fileName="App.tsx"
@@ -210,7 +174,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     يستخدم Angular توجيه `[innerHTML]` لعرض محتوى Markdown.
 
     ```typescript fileName="app.component.ts"
@@ -242,7 +206,7 @@ history:
 إذا كنت بحاجة إلى عرض سلاسل Markdown خام أو التحكم بشكل أكبر في عملية العرض، فاستخدم الأدوات التالية.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     #### المكوّن `<MarkdownRenderer />`
 
@@ -281,7 +245,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### المكوّن `<MarkdownRenderer />`
 
@@ -296,7 +260,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### المكوّن `<MarkdownRenderer />`
 
@@ -330,7 +294,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### المكوّن `<MarkdownRenderer />`
 
     ```tsx
@@ -360,7 +324,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     #### المكوّن `<MarkdownRenderer />`
 
     ```tsx
@@ -390,7 +354,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### خدمة `IntlayerMarkdownService`
     عرض سلسلة Markdown باستخدام الخدمة.
 
@@ -416,7 +380,7 @@ history:
 يمكنك تكوين عرض Markdown على مستوى التطبيق بأكمله. هذا يغنيك عن تمرير نفس الخصائص لكل renderer.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer";
@@ -436,7 +400,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -461,7 +425,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -481,7 +445,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -500,7 +464,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer";
@@ -519,7 +483,7 @@ history:
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/ar/releases/v8.md

@@ -12,6 +12,7 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+youtubeVideo: https://www.youtube.com/watch?v=ia6JmVf-kkU
 slugs:
   - doc
   - releases
@@ -22,6 +23,14 @@ slugs:
 
 مرحبًا بك في Intlayer v8! يركز هذا الإصدار على تعزيز تجربة المطور من خلال اكتشاف المحتوى التلقائي، وضمان سلامة البيانات عبر التحقق من صحة المخططات، وتوفير مزيد من التحكم في إدارة القواميس.
 
+<iframe
+  src="https://www.youtube.com/embed/ia6JmVf-kkU"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Video - New Intlayer v8 - What's new?"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## جدول المحتويات
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1198,8 +1207,8 @@ export default {
 
 ### تغييرات التكوين
 
-- **خاصية `live`**: يتم إهمال خاصية `live` في القواميس. استخدم `importMode: 'fetch'` بدلاً منها.
-- **واجهة برمجة تطبيقات موحدة للمحتوى الغني**: يتم الآن استخدام طريقة `.use()` الجديدة لكل من تجاوزات Markdown و HTML، مما يوفر واجهة برمجة تطبيقات متسقة عبر جميع أنواع المحتوى الغني.
+- **خاصية `live`**: تمت إزالة خاصية `live` من القواميس. استخدم `importMode: 'fetch'` بدلاً منها.
+- **importMode**: تم إهمال خاصية `build.importMode` في التكوين. استخدم `dictionary.importMode` بدلاً منها.
 - **`contentDir` و `codeDir`**: أصبح `contentDir` مخصّصًا الآن لملفات المحتوى. تمت إضافة خاصية جديدة `codeDir` لتحويل الكود. إذا لم يتم تعيين `codeDir`، فسيقوم Intlayer بالرجوع إلى `contentDir` وتسجيل تحذير.
 - **التحقق من المخطط (Schema Validation)**: لاستخدام ميزة `schema` الجديدة، تأكد من تثبيت `zod` في مشروعك.