dolphin-client 1.1.1 → 1.1.3

package/fulltutorial.md

@@ -503,6 +503,61 @@ Ternary operator (`condition ? true : false`) वा बहु-लाइन `if/
 <button data-store-click="app.darkMode = !app.darkMode">डार्क मोड अन/अफ</button>
 ```
 
+### १०.१.३. Declarative Store Initialization & Context Containers (`<dolphin-store>`) - स्टोर घोषणा, प्रारम्भिकरण र अटो-बाइन्डिङ
+
+Dolphin Client v2.0 introduces the `<dolphin-store>` tag for declaring, seeding, and auto-wiring reactive stores directly in HTML without writing custom JavaScript scripts.
+
+#### क) Seed-Only Mode (विशुद्ध डेटा सीडिङ)
+If the `<dolphin-store>` tag does not contain child elements, it seeds the store and remains hidden (`display: none`). You can seed data via tag attributes or inline JSON content:
+
+**Attribute-Based Seeding:**
+```html
+<!-- Automatically seeds store "app" with boolean, numeric, null, and string types -->
+<dolphin-store name="app" count="0" isAdding="false" user="null" theme="dark"></dolphin-store>
+```
+
+**JSON-Based Seeding:**
+```html
+<!-- Seed complex objects/arrays by putting JSON content inside the tag -->
+<dolphin-store name="app">
+  {
+    "count": 10,
+    "user": { "name": "Shankar", "role": "admin" },
+    "loggedIn": true
+  }
+</dolphin-store>
+```
+
+#### ख) Context Container Dual-Mode (डबल-मोड - डेटा कन्टेनर)
+If the `<dolphin-store>` tag contains child elements, it acts as a **reactive context container** and remains visible. Its children can read and write to the store dynamically using `data-store-*` directives:
+
+```html
+<!-- Acts as the reactive container for 'store/profile' -->
+<dolphin-store name="profile" username="Shankar" role="Admin">
+  <div class="card">
+    <h3 data-rt-text="username"></h3>
+    <span class="badge" data-rt-text="role"></span>
+  </div>
+</dolphin-store>
+```
+
+#### ग) Template Auto-Wiring (टेम्पलेट स्वतः-कनेक्सन)
+By setting the `template` attribute on a `<dolphin-store>`, Dolphin will automatically generate a reactive binding `div` right after it, compile the specified template selector, and render it with the store's seeded state immediately on page load:
+
+```html
+<!-- 1. The Svelte-style template -->
+<template id="counter-ui">
+  <div class="counter-box">
+    <p>Count: {{count}}</p>
+    <button data-rt-click="app.count = app.count + 1">Increment</button>
+  </div>
+</template>
+
+<!-- 2. Auto-wire the store app to the template (No separate wrapper div required!) -->
+<dolphin-store name="app" template="#counter-ui" count="5"></dolphin-store>
+```
+Under the hood, this dynamically injects a binding container that subscribes to `store/app` and updates the UI in real-time.
+
 ### १०.२. Declarative Validations (`data-validate`)
 Apply robust validation rules to inputs and forms instantly. Tagged invalid inputs automatically receive `.invalid` classes and publish error text:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolphin-client",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "HTML is back! Hookless, framework-agnostic real-time reactive DOM-binding client for Dolphin Server with WebSockets, WebRTC signaling, and offline REST API fallbacks.",
   "type": "module",
   "main": "./dist/index.cjs",