@intlayer/docs 9.0.0-canary.14 → 9.0.0-canary.16

package/docs/hi/live-sync.md

@@ -0,0 +1,174 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: लाइव सिंक | रनटाइम पर CMS सामग्री परिवर्तनों को प्रतिबिंबित करें
+description: बिना पुनर्निर्माण या पुनः तैनाती के, अपने ऐप को रनटाइम पर Intlayer CMS सामग्री परिवर्तनों को प्रतिबिंबित करने दें।
+keywords:
+  - लाइव सिंक
+  - Live Sync
+  - CMS
+  - विज़ुअल एडिटर
+  - अंतर्राष्ट्रीयकरण
+  - दस्तावेज़ीकरण
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Intlayer CMS दस्तावेज़ से अलग करके अपने स्वयं के पेज पर ले जाया गया"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "लाइव सिंक दस्तावेज़ीकरण जोड़ें"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "`hotReload` फ़ील्ड को `liveSync` से बदलें"
+author: aymericzip
+---
+
+# लाइव सिंक
+
+लाइव सिंक आपकी ऐप को रनटाइम पर CMS सामग्री परिवर्तनों को प्रतिबिंबित करने देता है। पुनर्निर्माण या पुनः तैनाती की आवश्यकता नहीं होती। जब सक्षम किया जाता है, तो अपडेट्स लाइव सिंक सर्वर को स्ट्रीम किए जाते हैं जो आपके एप्लिकेशन द्वारा पढ़े जाने वाले शब्दकोशों को ताज़ा करता है।
+
+## विषय-सूची
+
+<TOC/>
+
+---
+
+## लाइव सिंक सक्षम करना
+
+> लाइव सिंक के लिए एक निरंतर सर्वर कनेक्शन आवश्यक होता है और यह एंटरप्राइज योजना पर उपलब्ध है।
+
+अपने Intlayer कॉन्फ़िगरेशन को अपडेट करके लाइव सिंक सक्षम करें:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... अन्य कॉन्फ़िगरेशन सेटिंग्स
+  editor: {
+    /**
+     * जब परिवर्तन पता चलते हैं तो लोकल कॉन्फ़िगरेशन के हॉट रीलोडिंग को सक्षम करता है।
+     * उदाहरण के लिए, जब कोई शब्दकोश जोड़ा या अपडेट किया जाता है, तो एप्लिकेशन
+     * पृष्ठ पर प्रदर्शित सामग्री को अपडेट करता है।
+     *
+     * क्योंकि हॉट रीलोडिंग के लिए सर्वर से निरंतर कनेक्शन आवश्यक है,
+     * यह केवल `enterprise` योजना के क्लाइंट्स के लिए उपलब्ध है।
+     *
+     * डिफ़ॉल्ट: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * नियंत्रित करता है कि शब्दकोश कैसे आयात किए जाते हैं:
+     *
+     * - "live": शब्दकोश लाइव सिंक API का उपयोग करके गतिशील रूप से प्राप्त किए जाते हैं।
+     *   useIntlayer को useDictionaryDynamic से प्रतिस्थापित करता है।
+     *
+     * नोट: लाइव मोड शब्दकोश प्राप्त करने के लिए लाइव सिंक API का उपयोग करता है। यदि API कॉल विफल हो जाती है,
+     * तो शब्दकोश गतिशील रूप से आयात किए जाते हैं।
+     * नोट: केवल दूरस्थ सामग्री वाले और "live" फ्लैग वाले शब्दकोश लाइव मोड का उपयोग करते हैं।
+     * अन्य प्रदर्शन के लिए डायनेमिक मोड का उपयोग करते हैं।
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+अपने एप्लिकेशन को रैप करने के लिए लाइव सिंक सर्वर शुरू करें:
+
+Next.js का उपयोग करने का उदाहरण:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... अन्य स्क्रिप्ट्स
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+Vite का उपयोग करने का उदाहरण:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... अन्य स्क्रिप्ट्स
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+लाइव सिंक सर्वर आपके एप्लिकेशन को रैप करता है और जैसे ही अपडेटेड कंटेंट आता है, उसे स्वचालित रूप से लागू करता है।
+
+CMS से परिवर्तन सूचनाएँ प्राप्त करने के लिए, Live Sync सर्वर बैकएंड के साथ एक SSE कनेक्शन बनाए रखता है। जब CMS में सामग्री बदलती है, तो बैकएंड अपडेट को Live Sync सर्वर को अग्रेषित करता है, जो नए शब्दकोश लिखता है। आपका एप्लिकेशन अगले नेविगेशन या ब्राउज़र रीलोड पर अपडेट को प्रतिबिंबित करेगा, कोई पुनर्निर्माण आवश्यक नहीं है।
+
+फ्लो चार्ट (CMS/बैकएंड -> Live Sync सर्वर -> एप्लिकेशन सर्वर -> फ्रंटेंड):
+
+![Live Sync Logic Schema](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+यह कैसे काम करता है:
+
+![Live Sync Flow CMS/Backend/Live Sync Server/Application Server/Frontend Schema](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+## विकास कार्यप्रवाह (स्थानीय)
+
+- विकास में, जब एप्लिकेशन शुरू होता है तो सभी रिमोट शब्दकोश प्राप्त किए जाते हैं, ताकि आप जल्दी से अपडेट का परीक्षण कर सकें।
+- Next.js के साथ स्थानीय रूप से Live Sync का परीक्षण करने के लिए, अपने dev सर्वर को इस प्रकार लपेटें:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... अन्य स्क्रिप्ट्स
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // Vite के लिए
+  },
+}
+```
+
+विकास के दौरान Intlayer लाइव इम्पोर्ट ट्रांसफ़ॉर्मेशन लागू करने के लिए ऑप्टिमाइज़ेशन सक्षम करें:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true,
+  },
+};
+
+export default config;
+```
+
+यह सेटअप आपके डेवलपमेंट सर्वर को लाइव सिंक सर्वर के साथ लपेटता है, स्टार्टअप पर रिमोट डिक्शनरीज़ को प्राप्त करता है, और CMS से SSE के माध्यम से अपडेट्स को स्ट्रीम करता है। परिवर्तनों को देखने के लिए पेज को रिफ्रेश करें।
+
+## नोट्स और प्रतिबंध
+
+- अपने साइट सुरक्षा नीति (CSP) में लाइव सिंक ओरिजिन को जोड़ें। सुनिश्चित करें कि `connect-src` (और यदि प्रासंगिक हो तो `frame-ancestors`) में लाइव सिंक URL की अनुमति हो।
+- लाइव सिंक स्थैतिक आउटपुट के साथ काम नहीं करता। Next.js के लिए, पेज को रनटाइम पर अपडेट प्राप्त करने के लिए डायनामिक होना चाहिए (जैसे, पूर्ण स्थैतिक-केवल प्रतिबंधों से बचने के लिए `generateStaticParams`, `generateMetadata`, `getServerSideProps`, या `getStaticProps` का उपयुक्त उपयोग करें)।
+- CMS में, प्रत्येक शब्दकोश में एक `live` फ़्लैग होता है। केवल वे शब्दकोश जिनका `live=true` होता है, उन्हें लाइव सिंक API के माध्यम से प्राप्त किया जाता है; अन्य शब्दकोश गतिशील रूप से आयात किए जाते हैं और रनटाइम में अपरिवर्तित रहते हैं।
+- `live` फ़्लैग प्रत्येक शब्दकोश के लिए बिल्ड समय पर मूल्यांकित किया जाता है। यदि बिल्ड के दौरान रिमोट सामग्री को `live=true` के रूप में चिह्नित नहीं किया गया था, तो उस शब्दकोश के लिए लाइव सिंक सक्षम करने के लिए आपको पुनः बिल्ड करना होगा।
+- लाइव सिंक सर्वर को `.intlayer` में लिखने में सक्षम होना चाहिए। कंटेनरों में, `/.intlayer` पर लिखने की अनुमति सुनिश्चित करें।
+
+## उपयोगी लिंक्स
+
+- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md)
+- [Intlayer विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md)
+- [कॉन्फ़िगरेशन संदर्भ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)
+- [स्व-होस्टिंग गाइड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/self_hosting.md)

package/docs/hi/releases/v9.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-30
+updatedAt: 2026-07-08
 title: नया Intlayer v9 - क्या नया है?
 description: जानें कि Intlayer v9 में क्या नया है। लोकप्रिय i18n लाइब्रेरीज़ के लिए ड्रॉप-इन कम्पैटिबिलिटी पैकेजेस और Collections और Variants के लिए सपोर्ट का परिचय।
 keywords:
@@ -205,6 +205,49 @@ const product = useIntlayer("product-copy", {
 
 ---
 
+## `@intlayer/analytics`: कंटेंट एक्सपोज़र ट्रैकिंग और A/B टेस्टिंग
+
+एक नया वैकल्पिक पैकेज, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), आपको बताता है कि आपके विज़िटर्स को वास्तव में कौन-सी सामग्री दिखाई जा रही है — और **Collections & Variants** के साथ यह चक्र पूरा करता है, जिससे आप कंटेंट पर A/B टेस्ट कर सकते हैं और प्रत्येक वेरिएंट के लिए कन्वर्ज़न माप सकते हैं।
+
+- **प्रोवाइडर-स्तर ट्रैकिंग**: `IntlayerProvider` (React / Next.js / React Native) लोड, रूट परिवर्तन और लोकेल परिवर्तन पर स्वचालित रूप से `page_view` इवेंट रिकॉर्ड करता है।
+- **नोड-स्तर ट्रैकिंग**: हर `useIntlayer` रिज़ॉल्यूशन एक `content_exposure` इवेंट रिपोर्ट करता है — कौन-सी डिक्शनरी की, की-पाथ, लोकेल, और (यदि लागू हो) कौन-सा A/B **वेरिएंट** दिखाया गया। फ्लश विंडो के भीतर एक ही नोड के बार-बार एक्सपोज़र को एक इवेंट में मिला दिया जाता है।
+- **डिटरमिनिस्टिक A/B असाइनमेंट**: `getVariant(experimentKey, variants)` बिना **सर्वर राउंड-ट्रिप** के हर सेशन को एक वेरिएंट असाइन करता है, इसलिए पहले रेंडर से पहले कोई फ़्लिकर नहीं होता।
+- **`useConversion()`**: सेशन जिस वेरिएंट के संपर्क में आया, उसे एक लक्ष्य (साइनअप, क्लिक, खरीद…) से जोड़ता है।
+- **इंस्टॉल न होने पर शून्य लागत**: `@intlayer/editor` जैसा ही tree-shakeable पैटर्न — `try/catch` में लिपटा हुआ डायनामिक `import()`, साथ ही एक बिल्ड-टाइम एनवायरनमेंट वेरिएबल (`INTLAYER_ANALYTICS_ENABLED`) जो इसे उपयोग न करने वाले ऐप्स के लिए पूरे इंटीग्रेशन को डेड-कोड के रूप में हटा देता है।
+- **कोई नया कॉन्फ़िगरेशन स्कीमा नहीं**: मौजूदा `editor.backendURL` (इंजेशन एंडपॉइंट / सेल्फ-होस्टिंग) और `editor.clientId` (प्रोजेक्ट की, जो सक्षम करने का स्विच भी है) का पुनः उपयोग करता है।
+- **गोपनीयता का सम्मान**: सेशन का अनाम हैशिंग (SHA-256, कोई रॉ आईडी संग्रहीत नहीं), कोई IP संग्रहण नहीं, केवल मोटे तौर पर देश-स्तरीय भू-स्थान, लगभग हर 20 सेकंड में बैच में भेजे गए अनुरोध।
+- **डैशबोर्ड**: एक नया **Analytics** पेज (प्रोजेक्ट चुनने के बाद साइडबार में दिखता है) सक्रिय उपयोगकर्ता, आज के उपयोगकर्ता, पिछले 7/30/90 दिनों के उपयोगकर्ता, विज़िटर इवोल्यूशन ग्राफ़, और लोकेल बनाम लोकेशन ब्रेकडाउन दिखाता है।
+
+```tsx fileName="CTAButton.tsx" codeFormat="tsx"
+import { useConversion } from "react-intlayer";
+
+const CTAButton = () => {
+  const trackConversion = useConversion();
+
+  return (
+    <button
+      onClick={() =>
+        trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        })
+      }
+    >
+      Get started
+    </button>
+  );
+};
+```
+
+```bash packageManager="npm"
+npm install @intlayer/analytics
+```
+
+आज React, Next.js, और React Native (`react-intlayer` के माध्यम से) के लिए उपलब्ध है; अन्य फ्रेमवर्क बाइंडिंग्स (Vue, Svelte, Angular, …) की योजना बनाई गई है, जो `@intlayer/editor` के समान रोलआउट पैटर्न का पालन करेंगी। पूर्ण गाइड के लिए [Analytics दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) देखें।
+
+---
+
 ## Vite Plugin: बंडल्ड Compiler & Proxy
 
 `intlayer()` Vite plugin अब **compiler** और **locale-routing proxy** को सीधे बंडल करता है, इसलिए अधिकांश projects को `vite.config.ts` में केवल एक ही plugin की आवश्यकता है:
@@ -351,6 +394,7 @@ Chromium (Puppeteer स्क्रीनशॉट जनरेशन के ल
 
 - [Compat Adapter Packages Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/compat/index.md)
 - [Dynamic Dictionaries - Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dynamic_dictionaries/index.md)
+- [Analytics - कंटेंट एक्सपोज़र ट्रैकिंग और A/B टेस्टिंग](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
 - [Configuration Reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)
 - [CMS SDK - @intlayer/api के साथ प्रोग्रामेटिक एक्सेस](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md)
 - [स्व-होस्टिंग गाइड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/self_hosting.md)

package/docs/id/cli/index.md

@@ -125,7 +125,7 @@ Untuk mempelajari cara mengonfigurasi bahasa yang tersedia atau parameter lainny
 
 ### Autentikasi
 
-- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/login.md)** - Autentikasi dengan Intlayer CMS dan dapatkan kredensial akses
+- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/login.md)** - Autentikasi dengan Intlayer CMS dan dapatkan kredensial akses
 
 ### Perintah Utama
 

package/docs/id/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-23
+updatedAt: 2026-07-11
 title: Konfigurasi
 description: Pelajari cara mengonfigurasi Intlayer untuk aplikasi Anda. Pahami berbagai pengaturan dan opsi yang tersedia untuk menyesuaikan Intlayer sesuai kebutuhan Anda.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-07-11
+    changes: "Menambahkan konfigurasi `analytics`"
   - version: 9.0.0
     date: 2026-06-24
     changes: "Add `enableProxy` option to the routing configuration"
@@ -355,6 +358,30 @@ const config: IntlayerConfig = {
     liveSync: true,
   },
 
+  /**
+   * Konfigurasi analitik (analytics).
+   */
+  analytics: {
+    /**
+     * Apakah pengumpulan analitik diaktifkan (tampilan halaman, eksposur konten, peristiwa A/B).
+     * Membutuhkan `editor.clientId` untuk diatur agar atribusi berfungsi.
+     * Default: false
+     */
+    enabled: true,
+
+    /**
+     * Milidetik antara pengiriman batch otomatis ke backend.
+     * Default: 20000
+     */
+    flushInterval: 20000,
+
+    /**
+     * Fraksi sesi yang direkam, dari 0 (tidak ada) hingga 1 (semua).
+     * Default: 1
+     */
+    sampleRate: 1,
+  },
+
   /**
    * Pengaturan terjemahan dan pembuatan berbasis AI.
    */
@@ -668,6 +695,20 @@ Mendefinisikan pengaturan yang terkait dengan editor terintegrasi, termasuk port
 
 ---
 
+### Konfigurasi Analitik (Analytics)
+
+Menentukan pengaturan terkait analitik Intlayer: mengumpulkan konten apa yang sebenarnya ditampilkan kepada pengguna (tampilan halaman, eksposur konten) dan mendukung pengujian A/B pada konten.
+
+Analitik bersifat opt-in secara ketat: tidak ada yang dikumpulkan kecuali `analytics.enabled` secara eksplisit diatur ke `true` **dan** kunci proyek (`editor.clientId`) dikonfigurasi untuk atribusi. Saat dinonaktifkan (default), seluruh integrasi analitik dihilangkan dari bundel aplikasi Anda (dead-code elimination).
+
+| Field           | Deskripsi                                                                             | Tipe      | Default | Contoh  | Catatan                                                                                                                                     |
+| --------------- | ------------------------------------------------------------------------------------- | --------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`       | Mengaktifkan pengumpulan analitik (tampilan halaman, eksposur konten, peristiwa A/B). | `boolean` | `false` | `true`  | Membutuhkan `editor.clientId` untuk diatur agar atribusi berfungsi; jika tidak, analitik tetap nonaktif meskipun `enabled` bernilai `true`. |
+| `flushInterval` | Milidetik antara pengiriman batch otomatis ke backend.                                | `number`  | `20000` | `10000` |                                                                                                                                             |
+| `sampleRate`    | Fraksi sesi yang direkam, dari `0` (tidak ada) hingga `1` (semua).                    | `number`  | `1`     | `0.5`   | Sampling bersifat deterministik per sesi, sehingga sesi yang direkam melaporkan semua peristiwanya (tidak ada funnel parsial).              |
+
+---
+
 ### Konfigurasi Routing (Routing)
 
 Pengaturan yang mengontrol perilaku routing, termasuk struktur URL, penyimpanan locale, dan penanganan middleware.

package/docs/id/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-07-08
 title: Intlayer CMS | Eksternalisasi konten Anda ke Intlayer CMS
 description: Eksternalisasi konten Anda ke Intlayer CMS untuk mendelegasikan pengelolaan konten kepada tim Anda.
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - cms
 youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Bagian 'Sinkronisasi langsung' dipindahkan ke halamannya sendiri (live-sync.md), hanya menyisakan pengantar singkat dan tautan di sini"
   - version: 6.0.1
     date: 2025-09-22
     changes: "Menambahkan dokumentasi live sync"
@@ -245,144 +248,7 @@ Kemudian Anda akan dapat melihat dan mengelola kamus Anda di [Intlayer CMS](http
 
 Sinkronisasi Langsung memungkinkan aplikasi Anda mencerminkan perubahan konten CMS secara real-time. Tidak perlu membangun ulang atau menerapkan ulang. Saat diaktifkan, pembaruan dikirimkan ke server Sinkronisasi Langsung yang menyegarkan kamus yang dibaca aplikasi Anda.
 
-Aktifkan Sinkronisasi Langsung dengan memperbarui konfigurasi Intlayer Anda:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... pengaturan konfigurasi lainnya
-  editor: {
-    /**
-     * Mengaktifkan hot reloading konfigurasi locale saat perubahan terdeteksi.
-     * Misalnya, ketika sebuah kamus ditambahkan atau diperbarui, aplikasi akan memperbarui
-     * konten yang ditampilkan pada halaman.
-     *
-     * Karena hot reloading memerlukan koneksi terus-menerus ke server, fitur ini
-     * hanya tersedia untuk klien dengan paket `enterprise`.
-     *
-     * Default: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Mengontrol bagaimana kamus diimpor:
-     *
-     * - "live": Kamus diambil secara dinamis menggunakan Live Sync API.
-     *   Menggantikan useIntlayer dengan useDictionaryDynamic.
-     *
-     * Catatan: Mode live menggunakan Live Sync API untuk mengambil kamus. Jika panggilan API
-     * gagal, kamus diimpor secara dinamis.
-     * Catatan: Hanya kamus dengan konten jarak jauh dan flag "live" yang menggunakan mode live.
-     * Yang lain menggunakan mode dinamis untuk kinerja.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-Mulai server Live Sync untuk membungkus aplikasi Anda:
-
-Contoh menggunakan server mandiri:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "live:start": "npx intlayer live",
-  },
-}
-```
-
-Anda juga dapat menggunakan server aplikasi Anda secara paralel dengan menggunakan argumen `--process`.
-
-Contoh menggunakan Next.js:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "build": "next build",
-    "dev": "next dev",
-    "start": "npx intlayer live --with 'next start'",
-  },
-}
-```
-
-Contoh menggunakan Vite:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "build": "vite build",
-    "dev": "vite dev",
-    "start": "npx intlayer live --with 'vite start'",
-  },
-}
-```
-
-Server Live Sync membungkus aplikasi Anda dan secara otomatis menerapkan konten yang diperbarui saat konten tersebut tiba.
-
-Untuk menerima notifikasi perubahan dari CMS, server Live Sync mempertahankan koneksi SSE ke backend. Ketika konten berubah di CMS, backend meneruskan pembaruan ke server Live Sync, yang kemudian menulis kamus baru. Aplikasi Anda akan mencerminkan pembaruan tersebut pada navigasi berikutnya atau saat memuat ulang browser, tidak perlu membangun ulang.
-
-Diagram alur (CMS/Backend -> Server Live Sync -> Server Aplikasi -> Frontend):
-
-![Alur Live Sync CMS/Backend/Server Live Sync/Server Aplikasi/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
-
-Cara kerjanya:
-
-![Skema Logika Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
-
-### Alur kerja pengembangan (lokal)
-
-- Dalam pengembangan, semua kamus jarak jauh diambil saat aplikasi dimulai, sehingga Anda dapat menguji pembaruan dengan cepat.
-- Untuk menguji Live Sync secara lokal dengan Next.js, bungkus server dev Anda:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "dev": "npx intlayer live --with 'next dev'",
-    // "dev": "npx intlayer live --with 'vite dev'", // Untuk Vite
-  },
-}
-```
-
-Aktifkan optimasi agar Intlayer menerapkan transformasi impor Live selama pengembangan:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-export default config;
-```
-
-Pengaturan ini membungkus server dev Anda dengan server Live Sync, mengambil kamus jarak jauh saat startup, dan mengalirkan pembaruan dari CMS melalui SSE. Segarkan halaman untuk melihat perubahan.
-
-Catatan dan batasan:
-
-- Tambahkan origin live sync ke kebijakan keamanan situs Anda (CSP). Pastikan URL live sync diizinkan dalam `connect-src` (dan `frame-ancestors` jika relevan).
-- Live Sync tidak berfungsi dengan output statis. Untuk Next.js, halaman harus dinamis agar dapat menerima pembaruan saat runtime (misalnya, gunakan `generateStaticParams`, `generateMetadata`, `getServerSideProps`, atau `getStaticProps` secara tepat untuk menghindari batasan hanya statis penuh).
-- Di CMS, setiap kamus memiliki flag `live`. Hanya kamus dengan `live=true` yang diambil melalui API live sync; yang lain diimpor secara dinamis dan tetap tidak berubah saat runtime.
-- Flag `live` dievaluasi untuk setiap kamus saat build. Jika konten jarak jauh tidak diberi flag `live=true` selama build, Anda harus membangun ulang untuk mengaktifkan Live Sync untuk kamus tersebut.
-- Server live sync harus dapat menulis ke `.intlayer`. Dalam container, pastikan akses tulis ke `/.intlayer`.
+Untuk panduan pengaturan lengkap (mengaktifkan, menjalankan server Live Sync, alur kerja pengembangan lokal, dan batasan), lihat [dokumentasi Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/live-sync.md).
 
 ## Debug