@agent-native/core 0.79.25 → 0.79.27

package/corpus/core/docs/content/locales/hi-IN/cloneable-saas.mdx

@@ -51,13 +51,54 @@ description: "एक कार्यशील SaaS उत्पाद को फ
 
 "मुझे अपना SaaS चाहिए" से "मेरे पास अपना SaaS है" तक का रास्ता छोटा है:
 
-```an-diagram title="कांटा और अनुकूलित करें" summary="एक तैयार उत्पाद चुनें, उसकी ब्रांडिंग करें, उसे सरल अंग्रेजी में विकसित करें और उसे अपने डोमेन पर भेजें।"
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>Pick</strong><small class=\"diagram-muted\">a complete template</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>Brand</strong><small class=\"diagram-muted\">नाम, रंग, लोगो, कॉपी</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">3</span><strong>Customize</strong><small class=\"diagram-muted\">ask the agent &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>Ship</strong><small class=\"diagram-muted\">your own domain</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-14gviqw" title={"कांटा और अनुकूलित करें"} summary={"एक तैयार उत्पाद चुनें, उसकी ब्रांडिंग करें, उसे सरल अंग्रेजी में विकसित करें और उसे अपने डोमेन पर भेजें।"}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-card">
+    <span class="diagram-pill">1</span><strong>Pick</strong
+    ><small class="diagram-muted">a complete template</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2</span><strong>Brand</strong
+    ><small class="diagram-muted">नाम, रंग, लोगो, कॉपी</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">3</span><strong>Customize</strong
+    ><small class="diagram-muted">ask the agent &#8635;</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">4</span><strong>Ship</strong
+    ><small class="diagram-muted">your own domain</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **एक टेम्प्लेट चुनें।** CLI पिकर का उपयोग करें, या दस्तावेज़ ब्राउज़ करें और शुरू करने के लिए एक चुनें।
 2. **इसे ब्रांड करें।** नाम, रंग, लोगो और कॉपी बदलें। अधिकांश टेम्प्लेट इसे एक ही कॉन्फ़िगरेशन फ़ाइल में प्रदर्शित करते हैं।
 3. **इसे अनुकूलित करें।** एजेंट से कहें कि वह आपके लिए आवश्यक कॉलम जोड़ें, इनबॉक्स समूहों को कैसे बदलें, अपने आंतरिक API से कनेक्ट करें, एक नया दृश्य जोड़ें। एजेंट कोड संपादित करता है; आप अंतर की समीक्षा करें.
@@ -74,13 +115,49 @@ description: "एक कार्यशील SaaS उत्पाद को फ
 
 परिणाम: सामान्य SaaS परिनियोजन अर्थशास्त्र के साथ, प्रत्येक उपयोगकर्ता के लिए Claude-कोड-स्तरीय लचीलापन।
 
-```an-diagram title="प्रति-उपयोगकर्ता स्केल क्यों फोर्क करता है?" summary="दो विचार फोर्क-एंड-कस्टमाइज़ मॉडल को व्यावहारिक रखते हैं: एजेंट रखरखाव करता है, और प्रति-उपयोगकर्ता अनुकूलन SQL में रहता है - प्रति-उपयोगकर्ता कोड में नहीं।"
-{
-  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>साझा करेंd codebase</strong><small class=\"diagram-muted\">एक ऐप, एक बार डिप्लॉय</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQL में प्रति-यूजर लेयर</strong><small class=\"diagram-muted\">skills · मेमरी · निर्देश · MCP · उप-एजेंट</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
-  "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
+<Diagram id="doc-block-4tne0k" title={"प्रति-उपयोगकर्ता स्केल क्यों फोर्क करता है?"} summary={"दो विचार फोर्क-एंड-कस्टमाइज़ मॉडल को व्यावहारिक रखते हैं: एजेंट रखरखाव करता है, और प्रति-उपयोगकर्ता अनुकूलन SQL में रहता है - प्रति-उपयोगकर्ता कोड में नहीं।"}>
+
+```html
+<div class="diagram-why">
+  <div class="diagram-panel" data-rough>
+    <strong>साझा करेंd codebase</strong
+    ><small class="diagram-muted">एक ऐप, एक बार डिप्लॉय</small>
+    <div class="diagram-pill accent">agent does the maintenance</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQL में प्रति-यूजर लेयर</strong
+    ><small class="diagram-muted"
+      >skills · मेमरी · निर्देश · MCP · उप-एजेंट</small
+    >
+    <div class="diagram-pill ok">no per-user code</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-why {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-why .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 18px;
+  min-width: 240px;
+  flex: 1;
+}
+.diagram-why .diagram-arrow {
+  font-size: 24px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## फोर्क नहीं करना चाहते? {#hosted}
 
 आपको ऐसा करने की आवश्यकता नहीं है। प्रत्येक टेम्प्लेट `agent-native.com` - `mail.agent-native.com`, `calendar.agent-native.com` इत्यादि पर एक होस्टेड ऐप के रूप में भी उपलब्ध है। होस्ट किए गए संस्करण का निःशुल्क या सशुल्क उपयोग करें; केवल तभी फोर्क करें जब आप कुछ ऐसा बदलना चाहते हैं जो होस्ट किया गया संस्करण उजागर न हो।

package/corpus/core/docs/content/locales/hi-IN/code-agents-ui.mdx

@@ -25,13 +25,71 @@ Agent-Native कोड Agent-Native कोडिंग सतह है: को
 - **डेस्कटॉप**: बाईं ओर का कोड टैब समान रन मॉडल का उपयोग करते हुए मूल टर्मिनल लॉन्च, ऐप वेबव्यू और डेस्कटॉप डीप लिंक जोड़ता है।
 - **साझा UI**: `@agent-native/code-agents-ui` पुन: प्रयोज्य React सतह प्रस्तुत करता है।
 
-```an-diagram title="एक रन स्टोर पर तीन परतें" summary="CLI, Desktop, और साझा UI एक ही फ़ाइल-समर्थित रन स्टोर और निष्पादक पर अलग-अलग सतहें हैं; होस्ट इसे CodeAgentsHost अनुबंध के माध्यम से अनुकूलित करते हैं।"
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">शुरू · फिर शुरू · स्थिति · रोकें</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">नेटिव टर्मिनल · webviews · डीप लिंक</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">साझा करेंd UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>फाइल-आधारित run store + executor<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-ikno5o" title={"एक रन स्टोर पर तीन परतें"} summary={"CLI, Desktop, और साझा UI एक ही फ़ाइल-समर्थित रन स्टोर और निष्पादक पर अलग-अलग सतहें हैं; होस्ट इसे CodeAgentsHost अनुबंध के माध्यम से अनुकूलित करते हैं।"}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-row">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">CLI</span
+      ><small class="diagram-muted">शुरू · फिर शुरू · स्थिति · रोकें</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">Desktop</span
+      ><small class="diagram-muted">नेटिव टर्मिनल · webviews · डीप लिंक</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">साझा करेंd UI</span
+      ><small class="diagram-muted">@agent-native/code-agents-ui</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill">CodeAgentsHost</span
+    ><small class="diagram-muted">host contract</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    फाइल-आधारित run store + executor<br /><small class="diagram-muted"
+      >@agent-native/core/code-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.diagram-layers .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-layers .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-layers .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 वर्तमान विभाजन जानबूझकर अभिसरण कर रहा है: मानक एजेंट साइडबार और एजेंट टीमें कोर `run-manager` जीवनचक्र पर चलती हैं, जबकि Agent-Native कोड फ़ाइल-आधारित कोड रन स्टोर और साझा पृष्ठभूमि-रन नियंत्रक शब्दावली द्वारा समर्थित स्थानीय लंबे समय तक चलने वाले सत्रों का उपयोग करता है।
 
 साझा UI होस्ट-संचालित है। यह नहीं पता कि यह इलेक्ट्रॉन, ब्राउज़र टेम्पलेट, या भविष्य में होस्ट किए गए शेल में चल रहा है या नहीं। होस्ट एक `CodeAgentsHost` कार्यान्वयन प्रदान करते हैं।
@@ -373,13 +431,43 @@ npx @agent-native/core@latest migrate ./my-next-app --out ../migrated-app   # sh
 5. मोबाइल डिस्पैच से `hosts`, `runs`, और `transcript` पढ़ता है; यह कभी बात नहीं करता
    सीधे डेस्कटॉप पर।
 
-```an-diagram title="रिमोट Dispatch केवल आउटबाउंड है" summary="मोबाइल कभी भी डेस्कटॉप से ​​सीधे बात नहीं करता. Desktop लंबे-चुनाव Dispatch, कमांड का दावा करता है, स्थानीय रन स्टोर चलाता है, और परिणामों को वापस दिखाता है।"
-{
-  "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>मोबाइल / Telegram<br><small class=\"diagram-muted\">/code · सेशन</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Dispatch रिले<br><small class=\"diagram-muted\">होस्ट · रन · ट्रांसक्रिप्ट</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">long-polls · दावा करता है · run store चलाता है</small></div></div>",
-  "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-kmpho0" title={"रिमोट Dispatch केवल आउटबाउंड है"} summary={"मोबाइल कभी भी डेस्कटॉप से ​​सीधे बात नहीं करता. Desktop लंबे-चुनाव Dispatch, कमांड का दावा करता है, स्थानीय रन स्टोर चलाता है, और परिणामों को वापस दिखाता है।"}>
+
+```html
+<div class="diagram-remote">
+  <div class="diagram-node" data-rough>
+    मोबाइल / Telegram<br /><small class="diagram-muted">/code · सेशन</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Dispatch रिले<br /><small class="diagram-muted"
+      >होस्ट · रन · ट्रांसक्रिप्ट</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-node" data-rough>
+    Desktop<br /><small class="diagram-muted"
+      >long-polls · दावा करता है · run store चलाता है</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-remote {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-remote .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 विहित दूरस्थ रिले समापनबिंदु हैं:
 
 <Endpoint id="doc-block-qz2mbd" title={"डेस्कटॉप कतारबद्ध कार्य का दावा करता है"} method="POST" path="/_agent-native/integrations/remote/poll" summary={"डेस्कटॉप कतारबद्ध आदेशों का दावा करने के लिए रिले को लंबे समय तक पोल करता है"} auth="Desktop device token" responses={[

package/corpus/core/docs/content/locales/hi-IN/components.mdx

@@ -25,13 +25,68 @@ import { ResourcesPanel } from "@agent-native/core/client/resources";
 `@agent-native/core/client` या एक केंद्रित `@agent-native/core/client/*` उपपथ
 इसलिए बंडलर ब्राउज़र-सुरक्षित प्रविष्टि चुनते हैं।
 
-```an-diagram title="एक परत नीचे गिराएं, ढांचे से बाहर नहीं" summary="प्रत्येक परत आपको क्रोम पर अधिक नियंत्रण प्रदान करते हुए समान रनटाइम - क्रियाएं, थ्रेड स्थिति और SQL-backed सिंक रखती है।"
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><small class=\"diagram-muted\">आपके ऐप के चारों ओर पूरी साइडबार। 80% वाला केस।</small></div><div class=\"diagram-card layer l2\"><span class=\"diagram-pill\">&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span><small class=\"diagram-muted\">आपके अपने layout में पैनल या चैट पेज।</small></div><div class=\"diagram-card layer l3\"><span class=\"diagram-pill\">&lt;AssistantChat&gt; + runtime</span><small class=\"diagram-muted\">Own the chrome; optionally pass a BYO AgentChatRuntime.</small></div><div class=\"diagram-card layer l4\"><span class=\"diagram-pill\">&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span><small class=\"diagram-muted\">लिखेंr and transcript primitives only.</small></div><div class=\"diagram-rail\" data-rough>वही runtime: actions &middot; thread state &middot; SQL-backed sync</div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px}.diagram-layers .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-layers .l2{margin-inline-start:24px}.diagram-layers .l3{margin-inline-start:48px}.diagram-layers .l4{margin-inline-start:72px}.diagram-layers .diagram-rail{margin-top:6px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-109zkj3" title={"एक परत नीचे गिराएं, ढांचे से बाहर नहीं"} summary={"प्रत्येक परत आपको क्रोम पर अधिक नियंत्रण प्रदान करते हुए समान रनटाइम - क्रियाएं, थ्रेड स्थिति और SQL-backed सिंक रखती है।"}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span
+    ><small class="diagram-muted"
+      >आपके ऐप के चारों ओर पूरी साइडबार। 80% वाला केस।</small
+    >
+  </div>
+  <div class="diagram-card layer l2">
+    <span class="diagram-pill"
+      >&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span
+    ><small class="diagram-muted">आपके अपने layout में पैनल या चैट पेज।</small>
+  </div>
+  <div class="diagram-card layer l3">
+    <span class="diagram-pill">&lt;AssistantChat&gt; + runtime</span
+    ><small class="diagram-muted"
+      >Own the chrome; optionally pass a BYO AgentChatRuntime.</small
+    >
+  </div>
+  <div class="diagram-card layer l4">
+    <span class="diagram-pill"
+      >&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span
+    ><small class="diagram-muted">लिखेंr and transcript primitives only.</small>
+  </div>
+  <div class="diagram-rail" data-rough>
+    वही runtime: actions &middot; thread state &middot; SQL-backed sync
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-layers .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-layers .l2 {
+  margin-inline-start: 24px;
+}
+.diagram-layers .l3 {
+  margin-inline-start: 48px;
+}
+.diagram-layers .l4 {
+  margin-inline-start: 72px;
+}
+.diagram-layers .diagram-rail {
+  margin-top: 6px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## एजेंट और चैट UI {#agent-chat-ui}
 
 | API                                  | आयात पथ                                       | कब उपयोग करें                                                                                           |
@@ -178,13 +233,64 @@ import { PromptComposer } from "@agent-native/core/client/composer";
 | `useCollaborativeMap()` / `useCollaborativeArray()` | रिच-टेक्स्ट बॉडी कोलाब गलत फिट होने पर संरचित Y.Map/Y.Array स्थिति के साथ प्रयोग करें। |
 | `dedupeCollabUsersByEmail()`                        | एक ही उपयोगकर्ता के लिए डुप्लिकेट टैब के बिना एक कस्टम अवतार स्टैक बनाएं।              |
 
-```an-diagram title="उपस्थिति: मनुष्य और एजेंट एक जागरूकता परत साझा करते हैं" summary="useCollaborativeDoc जागरूकता उदाहरण का स्वामी है; क्लाइंट हुक कर्सर और चयन प्रकाशित करते हैं; सर्वर सहायक एजेंट की कार्रवाई को लाइव भागीदार के रूप में प्रदर्शित होने देते हैं।"
-{
-  "html": "<div class=\"diagram-presence\"><div class=\"diagram-col\"><div class=\"diagram-node\">Humans<br><small class=\"diagram-muted\">usePresence &middot; cursors, selection</small></div><div class=\"diagram-node diagram-accent\">एजेंट action<br><small class=\"diagram-muted\">agentUpdateSelection()</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">useCollaborativeDoc</span><small class=\"diagram-muted\">awareness layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br><small class=\"diagram-muted\">सभी को रेंडर करें, एजेंट सहित</small></div></div>",
-  "css": ".diagram-presence{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-presence .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-presence .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-presence .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-kmrihf" title={"उपस्थिति: मनुष्य और एजेंट एक जागरूकता परत साझा करते हैं"} summary={"useCollaborativeDoc जागरूकता उदाहरण का स्वामी है; क्लाइंट हुक कर्सर और चयन प्रकाशित करते हैं; सर्वर सहायक एजेंट की कार्रवाई को लाइव भागीदार के रूप में प्रदर्शित होने देते हैं।"}>
+
+```html
+<div class="diagram-presence">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Humans<br /><small class="diagram-muted"
+        >usePresence &middot; cursors, selection</small
+      >
+    </div>
+    <div class="diagram-node diagram-accent">
+      एजेंट action<br /><small class="diagram-muted"
+        >agentUpdateSelection()</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">useCollaborativeDoc</span
+    ><small class="diagram-muted">awareness layer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br /><small
+      class="diagram-muted"
+      >सभी को रेंडर करें, एजेंट सहित</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-presence {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-presence .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-presence .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-presence .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 सर्वर-साइड एजेंट actions जो लाइव प्रतिभागी के रूप में दिखना चाहते हैं, इसका उपयोग करें
 निचले स्तर के `@agent-native/core/collab` एजेंट उपस्थिति सहायक:
 

package/corpus/core/docs/content/locales/hi-IN/context-awareness.mdx

@@ -24,13 +24,70 @@ description: "एजेंट को कैसे पता चलता है
 5. **प्रॉम्प्ट हैंडऑफ़** -- UI कॉल `sendToAgentChat()` को नियंत्रित करता है जब एक क्लिक एजेंट टर्न बन जाना चाहिए
 6. **`navigate`** -- एजेंट का एक-शॉट कमांड जो UI को बताता है कि कहां जाना है
 
-```an-diagram title="आप जो देखते हैं उसे एजेंट कैसे देखता है" summary="यूआई हल्के राज्य कुंजी लिखता है; व्यू-स्क्रीन उन्हें वास्तविक रिकॉर्ड में हाइड्रेट करता है; एजेंट यूआई को स्थानांतरित करने के लिए वापस नेविगेट लिख सकता है।"
-{
-  "html": "<div class=\"diagram-ctx\"><div class=\"diagram-card col\"><span class=\"diagram-pill\">UI लिखता है</span><div class=\"diagram-node\">navigation<br><small class=\"diagram-muted\">व्यू, खुले ID</small></div><div class=\"diagram-node\">__url__<br><small class=\"diagram-muted\">shareable filters</small></div><div class=\"diagram-node\">selection<br><small class=\"diagram-muted\">पंक्तियां, ब्लॉक, आकृतियां</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">view-screen</span><small class=\"diagram-muted\">reads state &middot; fetches records</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">एजेंट कार्य करता है<br><small class=\"diagram-muted\">on the real object</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box diagram-accent\">navigate<br><small class=\"diagram-muted\">एजेंट UI को चलाता है</small></div></div>",
-  "css": ".diagram-ctx{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-ctx .col{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-ctx .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-ctx .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-t8korc" title={"आप जो देखते हैं उसे एजेंट कैसे देखता है"} summary={"यूआई हल्के राज्य कुंजी लिखता है; व्यू-स्क्रीन उन्हें वास्तविक रिकॉर्ड में हाइड्रेट करता है; एजेंट यूआई को स्थानांतरित करने के लिए वापस नेविगेट लिख सकता है।"}>
+
+```html
+<div class="diagram-ctx">
+  <div class="diagram-card col">
+    <span class="diagram-pill">UI लिखता है</span>
+    <div class="diagram-node">
+      navigation<br /><small class="diagram-muted">व्यू, खुले ID</small>
+    </div>
+    <div class="diagram-node">
+      __url__<br /><small class="diagram-muted">shareable filters</small>
+    </div>
+    <div class="diagram-node">
+      selection<br /><small class="diagram-muted"
+        >पंक्तियां, ब्लॉक, आकृतियां</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">view-screen</span
+    ><small class="diagram-muted">reads state &middot; fetches records</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    एजेंट कार्य करता है<br /><small class="diagram-muted"
+      >on the real object</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box diagram-accent">
+    navigate<br /><small class="diagram-muted">एजेंट UI को चलाता है</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-ctx {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-ctx .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-ctx .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-ctx .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## संदर्भ परतें {#context-layers}
 
 विभिन्न कार्यों के लिए विभिन्न संदर्भ चैनलों का उपयोग करें:
@@ -382,9 +439,46 @@ useDbSync({
 - सिंक ईवेंट को संसाधित करते समय, UI अपने स्वयं के `ignoreSource` मान से मेल खाने वाले ईवेंट को फ़िल्टर करता है - इसलिए यह अभी लिखे गए डेटा को दोबारा प्राप्त नहीं करता है
 - एजेंटों, अन्य टैब और actions से ईवेंट अभी भी सामान्य रूप से आते हैं
 
-```an-diagram title="सोर्स टैगिंग सेल्फ-रिफ़ेच घबराहट को रोकता है" summary="एक टैब अपने स्वयं के TAB_ID से मुद्रित सिंक घटनाओं को अनदेखा करता है, लेकिन फिर भी एजेंट और अन्य-टैब लिखने पर प्रतिक्रिया करता है।"
-{
-  "html": "<div class=\"diagram-jitter\"><div class=\"diagram-node\">यह टैब लिखता है<br><small class=\"diagram-muted\">X-Request-Source: TAB_ID</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>सर्वर स्रोत सहेजता है<br>on the event</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill warn\">source == TAB_ID &rarr; ignored</div><small class=\"diagram-muted\">कोई refetch नहीं, कोई flicker नहीं</small><div class=\"diagram-pill ok\">agent / other tab &rarr; applied</div><small class=\"diagram-muted\">UI लाइव अपडेट होती है</small></div></div>",
-  "css": ".diagram-jitter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jitter .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-jitter .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1ydjp9d" title={"सोर्स टैगिंग सेल्फ-रिफ़ेच घबराहट को रोकता है"} summary={"एक टैब अपने स्वयं के TAB_ID से मुद्रित सिंक घटनाओं को अनदेखा करता है, लेकिन फिर भी एजेंट और अन्य-टैब लिखने पर प्रतिक्रिया करता है।"}>
+
+```html
+<div class="diagram-jitter">
+  <div class="diagram-node">
+    यह टैब लिखता है<br /><small class="diagram-muted"
+      >X-Request-Source: TAB_ID</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    सर्वर स्रोत सहेजता है<br />on the event
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill warn">source == TAB_ID &rarr; ignored</div>
+    <small class="diagram-muted">कोई refetch नहीं, कोई flicker नहीं</small>
+    <div class="diagram-pill ok">agent / other tab &rarr; applied</div>
+    <small class="diagram-muted">UI लाइव अपडेट होती है</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-jitter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jitter .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-jitter .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
+
+</Diagram>

package/corpus/core/docs/content/locales/hi-IN/creating-templates.mdx

@@ -112,13 +112,62 @@ npx @agent-native/core@latest create my-platform
 
 प्रत्येक टेम्प्लेट के चार क्षेत्र एक साझा क्रिया सतह और एक SQL डेटाबेस के माध्यम से एक साथ जुड़ते हैं - एजेंट और UI समान संचालन में समान भागीदार हैं:
 
-```an-diagram title="किसी टेम्प्लेट के चार क्षेत्र कैसे जुड़ते हैं" summary="यूआई और एजेंट दोनों समान क्रियाओं के माध्यम से SQL तक पहुंचते हैं; एप्लिकेशन स्थिति और पोलिंग सिंक उन्हें संरेखित रखते हैं।"
-{
-  "html": "<div class=\"diagram-tmpl\"><div class=\"diagram-col\"><div class=\"diagram-node\">React इंटरफेस<br><small class=\"diagram-muted\">app/routes · कंपोनेंट्स</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">AGENTS.md · skills</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">क्रियाएँ</span><small class=\"diagram-muted\">defineAction()</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Drizzle के ज़रिए SQL<br><small class=\"diagram-muted\">additive schema</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">पोलing sync</div></div>",
-  "css": ".diagram-tmpl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-tmpl .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-tmpl .diagram-arrow{font-size:22px;line-height:1}.diagram-tmpl .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1l3djej" title={"किसी टेम्प्लेट के चार क्षेत्र कैसे जुड़ते हैं"} summary={"यूआई और एजेंट दोनों समान क्रियाओं के माध्यम से SQL तक पहुंचते हैं; एप्लिकेशन स्थिति और पोलिंग सिंक उन्हें संरेखित रखते हैं।"}>
+
+```html
+<div class="diagram-tmpl">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      React इंटरफेस<br /><small class="diagram-muted"
+        >app/routes · कंपोनेंट्स</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">AGENTS.md · skills</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">क्रियाएँ</span
+    ><small class="diagram-muted">defineAction()</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Drizzle के ज़रिए SQL<br /><small class="diagram-muted"
+      >additive schema</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">पोलing sync</div>
+</div>
+```
+
+```css
+.diagram-tmpl {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-tmpl .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-tmpl .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-tmpl .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## SQL में मॉडल डेटा {#data-models}
 
 फ़्रेमवर्क Drizzle सहायकों के साथ डोमेन तालिकाओं को परिभाषित करें ताकि स्कीमा SQLite, Postgres, D1, Turso, Supabase, Neon और अन्य समर्थित बैकएंड पर पोर्टेबल रहें: