docs: update README files for core packages with architecture diagrams and usage examples

packages/core-i18n/README.md

@@ -1,5 +1,7 @@
 # Enterprise i18n Architecture (`@repo/core-i18n`)
 
+[← Back to Root](../../README.md)
+
 A highly decoupled, type-safe internationalization engine for the Eigen Monorepo. 
 
 It uses a **Hybrid Namespace Strategy**:
@@ -10,6 +12,43 @@ This architecture strictly adheres to **Inversion of Control (IoC)**. The core e
 
 ---
 
+## Overview Architecture
+
+```mermaid
+graph TD
+    subgraph Apps ["apps/* (App Autonomy)"]
+        UI[React Components]
+        DICT[Feature Dictionaries<br/>e.g., booking.json]
+    end
+
+    subgraph Core ["@repo/core-i18n (Engine)"]
+        I18N((i18next Instance))
+        STORE[(core-storage)]
+        COMMON[Common Vocabulary]
+    end
+
+    subgraph Backend ["Backend API"]
+        SYNC[Language Sync Endpoint]
+        TENANT[Tenant Config Endpoint]
+    end
+
+    UI -->|uses useTranslation| I18N
+    DICT -.->|lazy loads| I18N
+    COMMON -->|preloads| I18N
+    I18N <-->|reads/persists| STORE
+    
+    I18N -->|changeLanguage sync| SYNC
+    SYNC -.->|fails? rollback| I18N
+    
+    TENANT -.->|applyTenantOverrides| I18N
+    
+    style I18N fill:#4263eb,color:#fff,stroke:#fff
+    style Apps fill:#f8f9fa,stroke:#ced4da
+    style Core fill:#f8f9fa,stroke:#ced4da
+```
+
+---
+
 ## 1. App-Level Setup (Bootstrap)
 
 Initialize the engine *before* your React application mounts to prevent UI flashing.
@@ -84,9 +123,38 @@ export default function BookingFeature() {
 }
 ```
 
+**3. Dynamic Variables (Interpolation):**
+```json
+// booking.json
+{
+  "messages": {
+    "welcome": "Welcome back, {{name}}! You have {{count}} new bookings."
+  }
+}
+```
+```tsx
+// Inside component
+<h1>{t('booking:messages.welcome', { name: 'Firman', count: 5 })}</h1>
+```
+
 ---
 
-## 3. Real-World Implementation Flow
+## 3. Usage Outside React Components (Vanilla TS)
+
+For utility files, API interceptors, or vanilla functions where React hooks cannot be used, import the raw `i18n` instance directly.
+
+```ts
+import { i18n } from '@repo/core-i18n';
+
+// Must specify the namespace explicitly if it's not 'common'
+export const getErrorMessage = (code: string) => {
+  return i18n.t(`booking:errors.${code}`, { defaultValue: 'Unknown Error' });
+};
+```
+
+---
+
+## 4. Real-World Implementation Flow
 
 The engine supports robust flows for authenticated apps, including Tenant Vocabulary Overrides and Backend Synchronization. 
 
@@ -151,7 +219,7 @@ const handleSwitch = async (newLng: string) => {
 
 ---
 
-## 4. Backend API Contract (For Backend Engineers)
+## 5. Backend API Contract (For Backend Engineers)
 
 To support Dynamic Tenant Overrides, the backend must expose an endpoint (e.g., `GET /v1/tenant/i18n-config`).
 
@@ -180,4 +248,4 @@ If the frontend dictionary has `header.title` and `header.subtitle`, and the bac
     }
   }
 }
-```
+```