@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/hi-IN/skills-guide.mdx

@@ -13,13 +13,72 @@ Skills, `.agents/skills/<name>/SKILL.md` पर लाइव है और इ
 
 प्रत्येक कौशल के फ्रंटमैटर `name` और `description` को हमेशा सिस्टम प्रॉम्प्ट के skills ब्लॉक में इंजेक्ट किया जाता है ताकि एजेंट को पता चले कि skills क्या मौजूद है। जब एजेंट निर्णय लेता है कि कौशल कार्य के लिए प्रासंगिक है, तो पूर्ण कौशल निकाय को मांग पर लोड किया जाता है (यह `docs-search` के माध्यम से भी सामने आता है)। यही कारण है कि विवरणों को छोटा रखना और ट्रिगर-विशिष्ट मायने रखता है: विवरण ही एकमात्र ऐसी चीज है जिसे एजेंट यह तय करने से पहले पढ़ता है कि बाकी को लोड करना है या नहीं।
 
-```an-diagram title="प्रगतिशील खुलासा" summary="प्रत्येक कौशल का केवल नाम + विवरण हमेशा संदर्भ में होता है। जब कार्य मेल खाता है तो पूरा शरीर मांग पर लोड होता है।"
-{
-  "html": "<div class=\"sk-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">हमेशा system prompt में</span><div class=\"sk-list\"><span class=\"diagram-pill\">storing-data &mdash; <small class=\"diagram-muted\">add data models&hellip;</small></span><span class=\"diagram-pill\">real-time-sync &mdash; <small class=\"diagram-muted\">wire polling&hellip;</small></span><span class=\"diagram-pill\">create-skill &mdash; <small class=\"diagram-muted\">add a skill&hellip;</small></span></div><small class=\"diagram-muted\">just name + description (cheap)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><small class=\"diagram-muted\">task matches a description</small><span class=\"diagram-pill accent\">load on demand</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Full <code>SKILL.md</code> body<br><small class=\"diagram-muted\">नियम, कोड, क्या करें/न करें</small></div></div>",
-  "css": ".sk-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.sk-flow .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:240px}.sk-flow .sk-list{display:flex;flex-direction:column;gap:6px}.sk-flow .center{display:flex;flex-direction:column;align-items:center;gap:6px}.sk-flow .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-eiboxf" title={"प्रगतिशील खुलासा"} summary={"प्रत्येक कौशल का केवल नाम + विवरण हमेशा संदर्भ में होता है। जब कार्य मेल खाता है तो पूरा शरीर मांग पर लोड होता है।"}>
+
+```html
+<div class="sk-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">हमेशा system prompt में</span>
+    <div class="sk-list">
+      <span class="diagram-pill"
+        >storing-data &mdash;
+        <small class="diagram-muted">add data models&hellip;</small></span
+      ><span class="diagram-pill"
+        >real-time-sync &mdash;
+        <small class="diagram-muted">wire polling&hellip;</small></span
+      ><span class="diagram-pill"
+        >create-skill &mdash;
+        <small class="diagram-muted">add a skill&hellip;</small></span
+      >
+    </div>
+    <small class="diagram-muted">just name + description (cheap)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <small class="diagram-muted">task matches a description</small
+    ><span class="diagram-pill accent">load on demand</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Full <code>SKILL.md</code> body<br /><small class="diagram-muted"
+      >नियम, कोड, क्या करें/न करें</small
+    >
+  </div>
+</div>
+```
+
+```css
+.sk-flow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.sk-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 240px;
+}
+.sk-flow .sk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sk-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.sk-flow .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## फ्रेमवर्क skills {#framework-skills}
 
 ये skills **डिफ़ॉल्ट टेम्पलेट** के साथ बंडल हैं। किसी भी ऐप में उपलब्ध सटीक सेट आपके द्वारा बनाए गए टेम्पलेट पर निर्भर करता है - उस टेम्पलेट की `.agents/skills/` निर्देशिका की जांच करें कि यह वास्तव में क्या शिप करता है।
@@ -148,14 +207,64 @@ scope: dev
 
 यह केवल `.claude/skills` को पढ़ने के लिए Claude कोड पर भरोसा करने की पुरानी हैक को प्रतिस्थापित करता है - `scope: dev` देव-बनाम-रनटाइम विभाजन को प्रथम श्रेणी, स्पष्ट विकल्प बनाता है।
 
-```an-diagram title="कौन सा एजेंट कौन सा कौशल लोड करता है" summary="स्कोप यह तय करता है कि इन-ऐप रनटाइम एजेंट किसी कौशल को देखता है या नहीं। देव कौशल केवल आपके कोडिंग एजेंट को दिखाई देते हैं।"
-{
-"html": "<div class=\"sc-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill\">.agents/skills/</span><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: both</span><small class=\"diagram-muted\">default</small></div><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: runtime</span></div><div class=\"sc-row\"><span class=\"diagram-pill warn\">scope: dev</span></div></div><div class=\"sc-targets\"><div class=\"diagram-box\">Runtime agent<br><small class=\"diagram-muted\">reads <code>both</code> + <code>runtime</code></small></div><div class=\"diagram-box\">कोडिंग एजेंट<br><small class=\"diagram-muted\">Claude Code reads <code>.claude/skills/</code> + <code>dev</code></small></div></div></div>",
-"css": ".sc-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.sc-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.sc-grid .sc-row{display:flex;align-items:center;gap:8px}.sc-grid .sc-targets{display:flex;flex-direction:column;gap:10px}"
-}
+<Diagram id="doc-block-kt8x06" title={"कौन सा एजेंट कौन सा कौशल लोड करता है"} summary={"स्कोप यह तय करता है कि इन-ऐप रनटाइम एजेंट किसी कौशल को देखता है या नहीं। देव कौशल केवल आपके कोडिंग एजेंट को दिखाई देते हैं।"}>
+
+```html
+<div class="sc-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill">.agents/skills/</span>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: both</span
+      ><small class="diagram-muted">default</small>
+    </div>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: runtime</span>
+    </div>
+    <div class="sc-row"><span class="diagram-pill warn">scope: dev</span></div>
+  </div>
+  <div class="sc-targets">
+    <div class="diagram-box">
+      Runtime agent<br /><small class="diagram-muted"
+        >reads <code>both</code> + <code>runtime</code></small
+      >
+    </div>
+    <div class="diagram-box">
+      कोडिंग एजेंट<br /><small class="diagram-muted"
+        >Claude Code reads <code>.claude/skills/</code> +
+        <code>dev</code></small
+      >
+    </div>
+  </div>
+</div>
+```
 
+```css
+.sc-grid {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.sc-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.sc-grid .sc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sc-grid .sc-targets {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 ```
 
+</Diagram>
+
 > **यह भी देखें:** [Writing Agent Instructions](/docs/writing-agent-instructions) कौशल विवरण को कैसे शब्दों में कहें, प्रगतिशील प्रकटीकरण कैसे लागू करें, और `AGENTS.md` को दुबला कैसे रखें।
 
 ## Skills बनाम AGENTS.md {#skills-vs-agents-md}

package/docs/content/locales/hi-IN/template-analytics.mdx

@@ -18,13 +18,55 @@ description: "एनालिटिक्स प्रश्न सादे अ
 
 यह एम्प्लिट्यूड, मिक्सपैनल और लुकर के लिए एक ओपन-सोर्स प्रतिस्थापन है - उन टीमों के लिए जो कोड, क्वेरी और डेटा का मालिक बनना चाहते हैं।
 
-```an-diagram title="चार्ट के लिए प्रश्न" summary="एजेंट डेटा डिक्शनरी की जांच करता है, SQL लिखता है, इसे वेयरहाउस के विरुद्ध मान्य करता है, फिर एक चार्ट प्रस्तुत करता है या एक पैनल सहेजता है।"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">सरल भाषा<br>question</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads data dictionary</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL लिखता है</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">Dry-run वैलिडेट</div><small class=\"diagram-muted\">BigQuery / स्रोत</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">चार्ट, तालिका, या<br>saved panel</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-4wce3v" title={"चार्ट के लिए प्रश्न"} summary={"एजेंट डेटा डिक्शनरी की जांच करता है, SQL लिखता है, इसे वेयरहाउस के विरुद्ध मान्य करता है, फिर एक चार्ट प्रस्तुत करता है या एक पैनल सहेजता है।"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">सरल भाषा<br />question</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">reads data dictionary</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>SQL लिखता है</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">Dry-run वैलिडेट</div>
+    <small class="diagram-muted">BigQuery / स्रोत</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">चार्ट, तालिका, या<br />saved panel</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## आप इसके साथ क्या कर सकते हैं
 
 - **साधारण अंग्रेजी में डेटा प्रश्न पूछें।** "पिछले महीने कितने प्रतिशत साइनअप भुगतान में परिवर्तित हो गए?" या "मुझे पिछले 6 महीनों के साप्ताहिक सक्रिय उपयोगकर्ता दिखाएँ।" एजेंट सही स्रोत चुनता है, SQL लिखता है, और चार्ट प्रस्तुत करता है।

package/docs/content/locales/hi-IN/template-assets.mdx

@@ -18,13 +18,71 @@ description: "ब्रांड-संगत मीडिया के लि
 
 जब आप ऐप खोलते हैं, तो चयनित लाइब्रेरी, प्रॉम्प्ट, संदर्भ और जेनरेट किए गए उम्मीदवार एक ही कार्यक्षेत्र में रहते हैं। एजेंट UI द्वारा उपयोग किए जाने वाले उसी actions के माध्यम से प्रत्येक संपत्ति को ब्राउज़, खोज, उत्पन्न, परिष्कृत और निर्यात कर सकता है।
 
-```an-diagram title="उत्पन्न करें, समीक्षा करें, पुन: उपयोग करें" summary="सन्दर्भ और संकेत एक उत्पन्न-और-चुनें सत्र फ़ीड करते हैं; चुनी गई संपत्तियाँ एक लाइब्रेरी में आती हैं और पिकर या A2A के माध्यम से अन्य ऐप्स में प्रवाहित होती हैं।"
-{
-  "html": "<div class=\"diagram-assets\"><div class=\"diagram-col\"><div class=\"diagram-node\">References<br><small class=\"diagram-muted\">लोगो, उत्पाद चित्र, शैली</small></div><div class=\"diagram-node\">प्रॉम्प्ट<br><small class=\"diagram-muted\">chat या Generate controls</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">जनरेशन session</span><small class=\"diagram-muted\">image &amp; video candidates · audit log</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Library</span><small class=\"diagram-muted\">चुने हुए, brand-consistent assets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Picker<br><small class=\"diagram-muted\">iframe / MCP App</small></div><div class=\"diagram-node\">A2A<br><small class=\"diagram-muted\">स्लाइड · डिजाइन · सामग्री</small></div></div></div>",
-  "css": ".diagram-assets{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-assets .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-assets .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-assets .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-1vj4lnd" title={"उत्पन्न करें, समीक्षा करें, पुन: उपयोग करें"} summary={"सन्दर्भ और संकेत एक उत्पन्न-और-चुनें सत्र फ़ीड करते हैं; चुनी गई संपत्तियाँ एक लाइब्रेरी में आती हैं और पिकर या A2A के माध्यम से अन्य ऐप्स में प्रवाहित होती हैं।"}>
+
+```html
+<div class="diagram-assets">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      References<br /><small class="diagram-muted"
+        >लोगो, उत्पाद चित्र, शैली</small
+      >
+    </div>
+    <div class="diagram-node">
+      प्रॉम्प्ट<br /><small class="diagram-muted"
+        >chat या Generate controls</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">जनरेशन session</span
+    ><small class="diagram-muted"
+      >image &amp; video candidates · audit log</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Library</span
+    ><small class="diagram-muted">चुने हुए, brand-consistent assets</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Picker<br /><small class="diagram-muted">iframe / MCP App</small>
+    </div>
+    <div class="diagram-node">
+      A2A<br /><small class="diagram-muted">स्लाइड · डिजाइन · सामग्री</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-assets {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-assets .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-assets .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-assets .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## इसे कब चुनें
 
 - **आपकी टीम को पुन: प्रयोज्य दृश्य निर्देशन की आवश्यकता है**, न कि एकबारगी सामान्य मीडिया संकेतों की - स्वीकृत लोगो, उत्पाद शॉट्स और शैली के उदाहरण एकत्र करें ताकि पीढ़ियां ब्रांड पर बनी रहें।

package/docs/content/locales/hi-IN/template-brain.mdx

@@ -19,13 +19,78 @@ Slack थ्रेड, मीटिंग, ट्रांसक्रिप्
 अनुभव, जबकि **स्रोत**, **समीक्षा**, और **ज्ञान** व्यवस्थापक/समर्थन हैं
 डेटा को जोड़ने, प्रस्तावों को मंजूरी देने और उद्धृत मेमोरी का निरीक्षण करने के लिए सतहें।
 
-```an-diagram title="स्रोत से उद्धृत उत्तर तक" summary="मस्तिष्क अनुमोदित स्रोतों को कच्चे कैप्चर में समाहित करता है, टिकाऊ मेमोरी को डिस्टिल करता है, समीक्षा के माध्यम से इसे गेट करता है, और उसके बाद ही उद्धरणों के साथ उत्तर देता है।"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Sources</span><small class=\"diagram-muted\">Slack · Granola · GitHub · Clips · webhooks</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>कच्चे कैप्चर<br><small class=\"diagram-muted\">डुप्लिकेट हटाया, संपादित</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Distill<br><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 warn\">Review</span><small class=\"diagram-muted\">sensitive / low-confidence queue</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Knowledge</span><small class=\"diagram-muted\">स्वीकृत, परमाणु</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Ask</span><small class=\"diagram-muted\">cited answer</small></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px}.diagram-flow .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-flow .diagram-arrow{font-size:20px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-e6xdom" title={"स्रोत से उद्धृत उत्तर तक"} summary={"मस्तिष्क अनुमोदित स्रोतों को कच्चे कैप्चर में समाहित करता है, टिकाऊ मेमोरी को डिस्टिल करता है, समीक्षा के माध्यम से इसे गेट करता है, और उसके बाद ही उद्धरणों के साथ उत्तर देता है।"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Sources</span
+    ><small class="diagram-muted"
+      >Slack · Granola · GitHub · Clips · webhooks</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    कच्चे कैप्चर<br /><small class="diagram-muted"
+      >डुप्लिकेट हटाया, संपादित</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Distill<br /><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 warn">Review</span
+    ><small class="diagram-muted">sensitive / low-confidence queue</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Knowledge</span
+    ><small class="diagram-muted">स्वीकृत, परमाणु</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Ask</span
+    ><small class="diagram-muted">cited answer</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.diagram-flow .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-uslzh2">
   <Screen
     surface="desktop"

package/docs/content/locales/hi-IN/template-calendar.mdx

@@ -18,13 +18,71 @@ description: "Google Calendar सिंक और कैलेंडली-श
 
 जब आप ऐप खोलते हैं, तो सक्रिय कैलेंडर दृश्य प्राथमिक सतह होता है। एजेंट को अभी भी पता है कि आप किस दिन, सप्ताह या घटना को देख रहे हैं, इसलिए आप सब कुछ बताए बिना "इस दिन एलेक्स के साथ 30 मिनट की कॉल शेड्यूल करें" कह सकते हैं।
 
-```an-diagram title="शेड्यूलिंग अनुरोध कैसे प्रवाहित होता है" summary="चाहे आप कैलेंडर में क्लिक करें या एजेंट से पूछें, वही क्रियाएं Google Calendar से लाइव पढ़ेंगी और उसी दृश्य पर वापस लिखेंगी।"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">आप क्लिक करते हैं<br><small class=\"diagram-muted\">खींचें, टूलबार, शॉर्टकट</small></div><div class=\"diagram-node\">आप एजेंट से पूछते हैं<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">लाइव, multi-account</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">बुकिंग · उपलब्धता</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">Calendar view लाइव अपडेट होती है</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-vp4fny" title={"शेड्यूलिंग अनुरोध कैसे प्रवाहित होता है"} summary={"चाहे आप कैलेंडर में क्लिक करें या एजेंट से पूछें, वही क्रियाएं Google Calendar से लाइव पढ़ेंगी और उसी दृश्य पर वापस लिखेंगी।"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      आप क्लिक करते हैं<br /><small class="diagram-muted"
+        >खींचें, टूलबार, शॉर्टकट</small
+      >
+    </div>
+    <div class="diagram-node">
+      आप एजेंट से पूछते हैं<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted"
+        >लाइव, multi-account</small
+      >
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">बुकिंग · उपलब्धता</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">Calendar view लाइव अपडेट होती है</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## आप इसके साथ क्या कर सकते हैं
 
 - **अपना वास्तविक Google Calendar** दिन, सप्ताह या महीने के दृश्य में देखें, एकाधिक खातों के साथ।

package/docs/content/locales/hi-IN/template-chat.mdx

@@ -37,13 +37,68 @@ description: "एक न्यूनतम चैट-फर्स्ट एज
 
 यही बात है. चैट आपके अपने एजेंट के लिए एक पतला, उपयोगी डिफ़ॉल्ट शेल है, सामान्य होने का दिखावा करने वाला कोई डोमेन उत्पाद नहीं।
 
-```an-diagram title="चैट शेल में क्या जहाज़ हैं" summary="फ्रेमवर्क के मानक रनटाइम पर एक पतली चैट सतह - क्रियाएं, टिकाऊ थ्रेड, लाइव सिंक और ऑथ - जिसमें अपना यूआई जोड़ने के लिए जगह है।"
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">थ्रेड सूची<br><small class=\"diagram-muted\">बनाएँ · फिर खोलें · पिन करें · आर्काइव करें</small></div><div class=\"diagram-node\">पूर्ण-पृष्ठ चैट<br><small class=\"diagram-muted\">/ पर framework chat surface</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">मुख्य SQL तालिकाएँ<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">लाइव सिंक &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">लॉगिन · संगठन · सेशन</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-19jodct" title={"चैट शेल में क्या जहाज़ हैं"} summary={"फ्रेमवर्क के मानक रनटाइम पर एक पतली चैट सतह - क्रियाएं, टिकाऊ थ्रेड, लाइव सिंक और ऑथ - जिसमें अपना यूआई जोड़ने के लिए जगह है।"}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      थ्रेड सूची<br /><small class="diagram-muted"
+        >बनाएँ · फिर खोलें · पिन करें · आर्काइव करें</small
+      >
+    </div>
+    <div class="diagram-node">
+      पूर्ण-पृष्ठ चैट<br /><small class="diagram-muted"
+        >/ पर framework chat surface</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      मुख्य SQL तालिकाएँ<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">लाइव सिंक &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted">लॉगिन · संगठन · सेशन</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## इसे कब चुनें {#when-to-pick}
 
 - **आप एक बुनियादी ऐप चाहते हैं जिससे उपयोगकर्ता तुरंत बात कर सकें** और फिर actions और UI के साथ विस्तार कर सकें।

package/docs/content/locales/hi-IN/template-clips.mdx

@@ -19,13 +19,61 @@ search: "क्लिप ब्राउज़र लॉग डेवलपर
 
 लूम + ग्रेनोला + विस्प्र फ्लो की तर्ज पर एक ऐप में सोचें - लेकिन एजेंट हर सतह पर प्रथम श्रेणी का संपादक है, और रिकॉर्डिंग, मीटिंग और डिक्टेशन आपकी हैं, सास विक्रेता की नहीं। क्लिप्स साझा रिकॉर्डिंग को एजेंट-पठनीय भी बनाता है: एक एजेंट में एक सामान्य क्लिप्स शेयर लिंक पेस्ट करें और यह प्रतिलेख को पाठ के रूप में "सुन" सकता है और छवियों के रूप में टाइमस्टैम्प्ड स्क्रीन फ्रेम को "देख" सकता है - किसी कच्चे वीडियो की आवश्यकता नहीं है। फ़्रेम-व्यूइंग किसी भी छवि-सक्षम एजेंट (ChatGPT, Claude कोड, कर्सर, Codex) में काम करता है; केवल-टेक्स्ट वेब चैट को अभी भी पूर्ण प्रतिलेख मिलता है और आपके द्वारा अपलोड किया गया एक फ्रेम ले सकता है।
 
-```an-diagram title="कैप्चर करना, प्रतिलेखन करना, पुन: उपयोग करना" summary="एक पुस्तकालय में तीन कैप्चर प्रकार की भूमि; एजेंट प्रतिलेखन, शीर्षक और सारांश प्रस्तुत करता है, फिर प्रत्येक प्रतिलेख खोजने योग्य और साझा करने योग्य होता है।"
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">screen recording</div><div class=\"diagram-node\">कैलेंडर मीटिंग</div><div class=\"diagram-node\">Fn दबाकर डिक्टेशन</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>एक library<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">शीर्षक · सारांश · अध्याय</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">खोजें</div><div class=\"diagram-pill\">साझा करें</div><div class=\"diagram-pill\">agent-readable links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1i8i9bu" title={"कैप्चर करना, प्रतिलेखन करना, पुन: उपयोग करना"} summary={"एक पुस्तकालय में तीन कैप्चर प्रकार की भूमि; एजेंट प्रतिलेखन, शीर्षक और सारांश प्रस्तुत करता है, फिर प्रत्येक प्रतिलेख खोजने योग्य और साझा करने योग्य होता है।"}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">screen recording</div>
+    <div class="diagram-node">कैलेंडर मीटिंग</div>
+    <div class="diagram-node">Fn दबाकर डिक्टेशन</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    एक library<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">शीर्षक · सारांश · अध्याय</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">खोजें</div>
+    <div class="diagram-pill">साझा करें</div>
+    <div class="diagram-pill">agent-readable links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## आप इसके साथ क्या कर सकते हैं
 
 - **एक अंतर्निर्मित रिकॉर्डर, वेबकैम ओवरले, ऑडियो कैप्चर और पॉज़/ट्रिम के साथ अपनी स्क्रीन रिकॉर्ड करें**।