From 961523e4a57ff4102c5efae1186b4fb48ae82007 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 30 Mar 2026 22:50:50 +0000
Subject: [PATCH 1/5] Initial plan


From 7f29901ab5621ce0a49d81aec3543d860ce3ea97 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 07:35:25 +0000
Subject: [PATCH 2/5] docs: fix HTML indentation in all interactive example
 captures

Agent-Logs-Url: https://github.com/bitifet/SmarkForm/sessions/31d7b006-97b3-4e22-9ae1-841a2f2d2f4e

Co-authored-by: bitifet <1643647+bitifet@users.noreply.github.com>
---
 docs/_about/faq.md                            |  20 +-
 docs/_about/showcase.md                       | 406 +++++++++---------
 .../data_import_and_export.md                 |  90 ++--
 docs/_advanced_concepts/events.md             |   8 +-
 docs/_advanced_concepts/form_traversing.md    |  66 +--
 docs/_advanced_concepts/hotkeys.md            |  28 +-
 docs/_advanced_concepts/mixin_types.md        |  14 +-
 docs/_component_types/type_color.md           |  10 +-
 docs/_component_types/type_date.md            |   4 +-
 docs/_component_types/type_datetime-local.md  |   4 +-
 docs/_component_types/type_form.md            |  54 +--
 docs/_component_types/type_input.md           |   2 +-
 docs/_component_types/type_label.md           | 104 ++---
 docs/_component_types/type_list.md            |  76 ++--
 docs/_component_types/type_number.md          |   4 +-
 docs/_component_types/type_radio.md           |  10 +-
 docs/_component_types/type_time.md            |   4 +-
 docs/_getting_started/core_component_types.md |  76 ++--
 docs/_getting_started/core_concepts.md        | 168 ++++----
 docs/_getting_started/quick_start.md          | 148 +++----
 docs/index.md                                 |  78 ++--
 21 files changed, 687 insertions(+), 687 deletions(-)

diff --git a/docs/_about/faq.md b/docs/_about/faq.md
index d509bbc2..7a7f2745 100644
--- a/docs/_about/faq.md
+++ b/docs/_about/faq.md
@@ -318,10 +318,10 @@ inside have it as their natural context:
 {% raw %} <!-- faq_singleton_color {{{ --> {% endraw %}
 {% capture faq_singleton_color_html -%}
 <div id="myForm$$">
-<span data-smark='{"type":"color","name":"bgcolor"}'>
+  <span data-smark='{"type":"color","name":"bgcolor"}'>
     <input data-smark>
     <button data-smark='{"action":"clear"}'>❌ Clear</button>
-</span>
+  </span>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -436,13 +436,13 @@ The following example demonstrates the full technique:
 {% raw %} <!-- faq_animations {{{ --> {% endraw %}
 {% capture faq_animations_html -%}
 <div id="myForm$$">
-<ul data-smark='{"type":"list","name":"items","min_items":1}'>
-  <li>
-    <input data-smark type="text" name="value" placeholder="Item…">
-    <button data-smark='{"action":"removeItem"}'>✕</button>
-  </li>
-</ul>
-<button data-smark='{"action":"addItem","context":"items"}'>➕ Add item</button>
+  <ul data-smark='{"type":"list","name":"items","min_items":1}'>
+    <li>
+      <input data-smark type="text" name="value" placeholder="Item…">
+      <button data-smark='{"action":"removeItem"}'>✕</button>
+    </li>
+  </ul>
+  <button data-smark='{"action":"addItem","context":"items"}'>➕ Add item</button>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -1036,7 +1036,7 @@ of the named component without requiring an extra wrapper:
 {% raw %} <!-- faq_mixin_labeled_input {{{ --> {% endraw %}
 {% capture faq_mixin_labeled_input_html -%}
 <div id="myForm$$">
-<div data-smark='{"type":"form","name":"person"}'>
+  <div data-smark='{"type":"form","name":"person"}'>
     <div data-smark='{"type":"#labeledInput","name":"firstName"}' data-label="First name"></div>
     <div data-smark='{"type":"#labeledInput","name":"lastName"}'  data-label="Last name"></div>
 </div>
diff --git a/docs/_about/showcase.md b/docs/_about/showcase.md
index 3663ba15..52371c70 100644
--- a/docs/_about/showcase.md
+++ b/docs/_about/showcase.md
@@ -522,20 +522,20 @@ in the following example:
 {% capture simple_list_singleton -%}
 <div id="myForm$$">
 █<button data-smark='{"action":"removeItem", "context":"phones", "target":"*", "preserve_non_empty":true}' title='Remove unused fields'>🧹</button>
-█    <button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
-█    <button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
-█    <strong data-smark="label">Phones:</strong>
-█    <ul data-smark='{"name": "phones", "of": "input", "sortable":true, "min_items":0, "max_items":5}'>
-█        <li data-smark='{"role": "empty_list"}' class="row">(None)</li>
-█        <li class="row">
-█            <label data-smark>📞 Telephone
-█            <span data-smark='{"action":"position"}'>N</span>
-█            </label>
-█            <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
-█            <input type="tel" data-smark>
-█            <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
-█        </li>
-█    </ul>
+█<button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
+█<button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
+█<strong data-smark="label">Phones:</strong>
+█<ul data-smark='{"name": "phones", "of": "input", "sortable":true, "min_items":0, "max_items":5}'>
+█    <li data-smark='{"role": "empty_list"}' class="row">(None)</li>
+█    <li class="row">
+█        <label data-smark>📞 Telephone
+█        <span data-smark='{"action":"position"}'>N</span>
+█        </label>
+█        <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
+█        <input type="tel" data-smark>
+█        <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
+█    </li>
+█</ul>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -844,19 +844,19 @@ list like the following example:
 {% raw %} <!-- schedule_list {{{ --> {% endraw %}
 {% capture schedule_list -%}
 <div id="myForm$$">
-<p>
-    <button data-smark='{"action":"removeItem","hotkey":"-","context":"schedule"}' title='Less intervals'>➖</button>
-    <button data-smark='{"action":"addItem","hotkey":"+","context":"schedule"}' title='More intrevals'>➕</button>
-    <strong data-smark="label">Schedule:</strong>
-    <span data-smark='{"type":"list","name":"schedule","min_items":0,"max_items":3,"exportEmpties":true}'>
-        <span>
-            <input class='small' data-smark type='time' name='start'> to <input class='small' data-smark type='time' name='end'>
+    <p>
+        <button data-smark='{"action":"removeItem","hotkey":"-","context":"schedule"}' title='Less intervals'>➖</button>
+        <button data-smark='{"action":"addItem","hotkey":"+","context":"schedule"}' title='More intrevals'>➕</button>
+        <strong data-smark="label">Schedule:</strong>
+        <span data-smark='{"type":"list","name":"schedule","min_items":0,"max_items":3,"exportEmpties":true}'>
+            <span>
+                <input class='small' data-smark type='time' name='start'> to <input class='small' data-smark type='time' name='end'>
+            </span>
+            <span data-smark='{"role":"empty_list"}'>(Closed)</span>
+            <span data-smark='{"role":"separator"}'>, </span>
+            <span data-smark='{"role":"last_separator"}'> and </span>
         </span>
-        <span data-smark='{"role":"empty_list"}'>(Closed)</span>
-        <span data-smark='{"role":"separator"}'>, </span>
-        <span data-smark='{"role":"last_separator"}'> and </span>
-    </span>
-</p>
+    </p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -2052,16 +2052,16 @@ In the *JS* tab there is a simple JavaScript code that:
 {% capture nested_forms_with_load_save -%}
 <div id="myForm$$">
 {{ nested_forms | replace: "█", "    " }}
-<div style="display: flex; justify-content: space-evenly; margin-top: 0.5em">
-    <button
-        data-smark='{"action":"export"}'
-        title="Export the whole form as JSON (see JS tab)"
-        >💾 Save</button>
-    <button
-        data-smark='{"action":"import"}'
-        title="Import the whole form as JSON (see JS tab)"
-        >📂 Load</button>
-</div>
+    <div style="display: flex; justify-content: space-evenly; margin-top: 0.5em">
+        <button
+            data-smark='{"action":"export"}'
+            title="Export the whole form as JSON (see JS tab)"
+            >💾 Save</button>
+        <button
+            data-smark='{"action":"import"}'
+            title="Import the whole form as JSON (see JS tab)"
+            >📂 Load</button>
+    </div>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -2277,19 +2277,19 @@ slight modifications:
 {% capture simple_list_autodisable -%}
 <div id="myForm$$">
 █<button data-smark='{"action":"removeItem", "context":"phones", "target":"*", "preserve_non_empty":true}' title='Remove unused fields'>🧹</button>
-█    <button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
-█    <button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
-█    <strong data-smark="label">Phones:</strong>
-█    <ul data-smark='{"name": "phones", "of": "input", "sortable":true, "max_items":5}'>
-█        <li class="row">
-█            <label data-smark>📞 Telephone
-█            <span data-smark='{"action":"position"}'>N</span>
-█            </label>
-█            <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
-█            <input type="tel" data-smark>
-█            <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
-█        </li>
-█    </ul>
+█<button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
+█<button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
+█<strong data-smark="label">Phones:</strong>
+█<ul data-smark='{"name": "phones", "of": "input", "sortable":true, "max_items":5}'>
+█    <li class="row">
+█        <label data-smark>📞 Telephone
+█        <span data-smark='{"action":"position"}'>N</span>
+█        </label>
+█        <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
+█        <input type="tel" data-smark>
+█        <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
+█    </li>
+█</ul>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -3236,84 +3236,84 @@ button. Then a very simple JavaScript code makes the rest...
 {% raw %} <!-- calculator {{{ --> {% endraw %}
 {% capture calculator -%}
 <div id="myForm$$">
-<div class="calculator" data-smark='{"type": "input", "name": "display"}'>
-    <!-- Using singleton pattern here allows us to avoid specifying the context for every button -->
-    <input
-        data-smark
-        type="text"
-        class="display"
-        value="0"
-        pattern="[0-9+\-*\/\(\).]+"
-    >
-    <div class="buttons">
-        <button
-            data-smark='{"action": "import", "data": "C", "hotkey": "c"}'
-            class="clear"
-        >C</button>
-        <button
-            data-smark='{"action": "import", "data": "("}'
-        >(</button>
-        <button
-            data-smark='{"action": "import", "data": ")"}'
-        >)</button>
-        <button
-            data-smark='{"action": "import", "data": "/", "hotkey": "/"}'
-            class="operator"
-        >÷</button>
-        <button
-            data-smark='{"action": "import", "data": "7"}'
-        >7</button>
-        <button
-            data-smark='{"action": "import", "data": "8"}'
-        >8</button>
-        <button
-            data-smark='{"action": "import", "data": "9"}'
-        >9</button>
-        <button
-            data-smark='{"action": "import", "data": "*", "hotkey": "*"}'
-            class="operator"
-        >×</button>
-        <button
-            data-smark='{"action": "import", "data": "4"}'
-        >4</button>
-        <button
-            data-smark='{"action": "import", "data": "5"}'
-        >5</button>
-        <button
-            data-smark='{"action": "import", "data": "6"}'
-        >6</button>
-        <button
-            data-smark='{"action": "import", "data": "-", "hotkey": "-"}'
-            class="operator"
-        >-</button>
-        <button
-            data-smark='{"action": "import", "data": "1"}'
-        >1</button>
-        <button
-            data-smark='{"action": "import", "data": "2"}'
-        >2</button>
-        <button
-            data-smark='{"action": "import", "data": "3"}'
-        >3</button>
-        <button
-            data-smark='{"action": "import", "data": "+", "hotkey": "+"}'
-            class="operator"
-        >+</button>
-        <button
-            data-smark='{"action": "import", "data": "0"}'
-        >0</button>
-        <button
-            data-smark='{"action": "import", "data": "."}'
-        >.</button>
-        <button
-            data-smark='{"action": "import", "data": "Del"}'
-        >←</button>
-        <button
-            data-smark='{"action": "import", "data": "=", "hotkey": "Enter"}'
-            class="equals"
-        >=</button>
+    <div class="calculator" data-smark='{"type": "input", "name": "display"}'>
+        <!-- Using singleton pattern here allows us to avoid specifying the context for every button -->
+        <input
+            data-smark
+            type="text"
+            class="display"
+            value="0"
+            pattern="[0-9+\-*\/\(\).]+"
+        >
+        <div class="buttons">
+            <button
+                data-smark='{"action": "import", "data": "C", "hotkey": "c"}'
+                class="clear"
+            >C</button>
+            <button
+                data-smark='{"action": "import", "data": "("}'
+            >(</button>
+            <button
+                data-smark='{"action": "import", "data": ")"}'
+            >)</button>
+            <button
+                data-smark='{"action": "import", "data": "/", "hotkey": "/"}'
+                class="operator"
+            >÷</button>
+            <button
+                data-smark='{"action": "import", "data": "7"}'
+            >7</button>
+            <button
+                data-smark='{"action": "import", "data": "8"}'
+            >8</button>
+            <button
+                data-smark='{"action": "import", "data": "9"}'
+            >9</button>
+            <button
+                data-smark='{"action": "import", "data": "*", "hotkey": "*"}'
+                class="operator"
+            >×</button>
+            <button
+                data-smark='{"action": "import", "data": "4"}'
+            >4</button>
+            <button
+                data-smark='{"action": "import", "data": "5"}'
+            >5</button>
+            <button
+                data-smark='{"action": "import", "data": "6"}'
+            >6</button>
+            <button
+                data-smark='{"action": "import", "data": "-", "hotkey": "-"}'
+                class="operator"
+            >-</button>
+            <button
+                data-smark='{"action": "import", "data": "1"}'
+            >1</button>
+            <button
+                data-smark='{"action": "import", "data": "2"}'
+            >2</button>
+            <button
+                data-smark='{"action": "import", "data": "3"}'
+            >3</button>
+            <button
+                data-smark='{"action": "import", "data": "+", "hotkey": "+"}'
+                class="operator"
+            >+</button>
+            <button
+                data-smark='{"action": "import", "data": "0"}'
+            >0</button>
+            <button
+                data-smark='{"action": "import", "data": "."}'
+            >.</button>
+            <button
+                data-smark='{"action": "import", "data": "Del"}'
+            >←</button>
+            <button
+                data-smark='{"action": "import", "data": "=", "hotkey": "Enter"}'
+                class="equals"
+            >=</button>
+        </div>
     </div>
-</div>
 
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -3500,84 +3500,84 @@ reach a perfect UX.
 {% raw %} <!-- supercalculator {{{ --> {% endraw %}
 {% capture supercalculator -%}
 <div id="myForm$$">
-<div class="calculator" data-smark='{"type": "input", "name": "display"}'>
-    <!-- Using singleton pattern here allows us to avoid specifying the context for every button -->
-    <input
-        data-smark
-        type="text"
-        class="display"
-        value="0"
-        pattern="[0-9+\-*\/\(\).]+"
-    >
-    <div class="buttons">
-        <button
-            data-smark='{"action": "import", "data": "C"}'
-            class="clear"
-        >C</button>
-        <button
-            data-smark='{"action": "import", "data": "("}'
-        >(</button>
-        <button
-            data-smark='{"action": "import", "data": ")"}'
-        >)</button>
-        <button
-            data-smark='{"action": "import", "data": "/"}'
-            class="operator"
-        >÷</button>
-        <button
-            data-smark='{"action": "import", "data": "7"}'
-        >7</button>
-        <button
-            data-smark='{"action": "import", "data": "8"}'
-        >8</button>
-        <button
-            data-smark='{"action": "import", "data": "9"}'
-        >9</button>
-        <button
-            data-smark='{"action": "import", "data": "*"}'
-            class="operator"
-        >×</button>
-        <button
-            data-smark='{"action": "import", "data": "4"}'
-        >4</button>
-        <button
-            data-smark='{"action": "import", "data": "5"}'
-        >5</button>
-        <button
-            data-smark='{"action": "import", "data": "6"}'
-        >6</button>
-        <button
-            data-smark='{"action": "import", "data": "-"}'
-            class="operator"
-        >-</button>
-        <button
-            data-smark='{"action": "import", "data": "1"}'
-        >1</button>
-        <button
-            data-smark='{"action": "import", "data": "2"}'
-        >2</button>
-        <button
-            data-smark='{"action": "import", "data": "3"}'
-        >3</button>
-        <button
-            data-smark='{"action": "import", "data": "+"}'
-            class="operator"
-        >+</button>
-        <button
-            data-smark='{"action": "import", "data": "0"}'
-        >0</button>
-        <button
-            data-smark='{"action": "import", "data": "."}'
-        >.</button>
-        <button
-            data-smark='{"action": "import", "data": "Backspace"}'
-        >←</button>
-        <button
-            data-smark='{"action": "import", "data": "="}'
-            class="equals"
-        >=</button>
+    <div class="calculator" data-smark='{"type": "input", "name": "display"}'>
+        <!-- Using singleton pattern here allows us to avoid specifying the context for every button -->
+        <input
+            data-smark
+            type="text"
+            class="display"
+            value="0"
+            pattern="[0-9+\-*\/\(\).]+"
+        >
+        <div class="buttons">
+            <button
+                data-smark='{"action": "import", "data": "C"}'
+                class="clear"
+            >C</button>
+            <button
+                data-smark='{"action": "import", "data": "("}'
+            >(</button>
+            <button
+                data-smark='{"action": "import", "data": ")"}'
+            >)</button>
+            <button
+                data-smark='{"action": "import", "data": "/"}'
+                class="operator"
+            >÷</button>
+            <button
+                data-smark='{"action": "import", "data": "7"}'
+            >7</button>
+            <button
+                data-smark='{"action": "import", "data": "8"}'
+            >8</button>
+            <button
+                data-smark='{"action": "import", "data": "9"}'
+            >9</button>
+            <button
+                data-smark='{"action": "import", "data": "*"}'
+                class="operator"
+            >×</button>
+            <button
+                data-smark='{"action": "import", "data": "4"}'
+            >4</button>
+            <button
+                data-smark='{"action": "import", "data": "5"}'
+            >5</button>
+            <button
+                data-smark='{"action": "import", "data": "6"}'
+            >6</button>
+            <button
+                data-smark='{"action": "import", "data": "-"}'
+                class="operator"
+            >-</button>
+            <button
+                data-smark='{"action": "import", "data": "1"}'
+            >1</button>
+            <button
+                data-smark='{"action": "import", "data": "2"}'
+            >2</button>
+            <button
+                data-smark='{"action": "import", "data": "3"}'
+            >3</button>
+            <button
+                data-smark='{"action": "import", "data": "+"}'
+                class="operator"
+            >+</button>
+            <button
+                data-smark='{"action": "import", "data": "0"}'
+            >0</button>
+            <button
+                data-smark='{"action": "import", "data": "."}'
+            >.</button>
+            <button
+                data-smark='{"action": "import", "data": "Backspace"}'
+            >←</button>
+            <button
+                data-smark='{"action": "import", "data": "="}'
+                class="equals"
+            >=</button>
+        </div>
     </div>
-</div>
 
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_advanced_concepts/data_import_and_export.md b/docs/_advanced_concepts/data_import_and_export.md
index 0de862be..a0154666 100644
--- a/docs/_advanced_concepts/data_import_and_export.md
+++ b/docs/_advanced_concepts/data_import_and_export.md
@@ -93,25 +93,25 @@ The structure of the exported value mirrors the nesting of the form:
 {% raw %} <!-- capture export_structure_html {{{ --> {% endraw %}
 {% capture export_structure_html -%}
 <div id="myForm$$">
-<fieldset data-smark='{"type":"form","name":"order"}'>
+  <fieldset data-smark='{"type":"form","name":"order"}'>
     <legend>Order</legend>
     <p>
-        <label data-smark>Customer:</label>
-        <input data-smark type="text" name="customer">
+      <label data-smark>Customer:</label>
+      <input data-smark type="text" name="customer">
     </p>
     <p>
-        <label data-smark>Notes:</label>
-        <textarea data-smark name="notes"></textarea>
+      <label data-smark>Notes:</label>
+      <textarea data-smark name="notes"></textarea>
     </p>
     <ul data-smark='{"type":"list","name":"items","min_items":0}'>
-        <li>
-            <input data-smark type="text" name="product" placeholder="Product">
-            <input data-smark type="number" name="qty" placeholder="Qty">
-            <button data-smark='{"action":"removeItem"}'>➖</button>
-        </li>
+      <li>
+        <input data-smark type="text" name="product" placeholder="Product">
+        <input data-smark type="number" name="qty" placeholder="Qty">
+        <button data-smark='{"action":"removeItem"}'>➖</button>
+      </li>
     </ul>
     <button data-smark='{"action":"addItem","context":"items"}'>➕ Add item</button>
-</fieldset>
+  </fieldset>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -229,18 +229,18 @@ The `import` action accepts:
 {% raw %} <!-- capture import_example_html {{{ --> {% endraw %}
 {% capture import_example_html -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Name:</label>
     <input data-smark type="text" name="name">
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Email:</label>
     <input data-smark type="email" name="email">
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Role:</label>
     <input data-smark type="text" name="role">
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -370,18 +370,18 @@ a "New record" button.
 {% raw %} <!-- capture clear_vs_reset_html {{{ --> {% endraw %}
 {% capture clear_vs_reset_html -%}
 <div id="myForm$$">
-<div data-smark='{"type":"form","name":"task","value":{"title":"Buy groceries","priority":"medium"}}'>
+  <div data-smark='{"type":"form","name":"task","value":{"title":"Buy groceries","priority":"medium"}}'>
     <p>
-        <label data-smark>Title:</label>
-        <input data-smark type="text" name="title">
+      <label data-smark>Title:</label>
+      <input data-smark type="text" name="title">
     </p>
     <p>
-        <label data-smark>Priority:</label>
-        <input data-smark type="text" name="priority">
+      <label data-smark>Priority:</label>
+      <input data-smark type="text" name="priority">
     </p>
     <p>
-        <button data-smark='{"action":"clear","context":"task"}'>❌ Clear</button>
-        <button data-smark='{"action":"reset","context":"task"}'>♻️ Reset</button>
+      <button data-smark='{"action":"clear","context":"task"}'>❌ Clear</button>
+      <button data-smark='{"action":"reset","context":"task"}'>♻️ Reset</button>
     </p>
 </div>
 </div>{%
@@ -464,43 +464,43 @@ directly into its target (the shipping address) subform:
 {% raw %} <!-- capture pipe_example_html {{{ --> {% endraw %}
 {% capture pipe_example_html -%}
 <div id="myForm$$">
-<fieldset data-smark='{"type":"form","name":"billing"}'>
+  <fieldset data-smark='{"type":"form","name":"billing"}'>
     <legend>Billing address</legend>
     <p>
-        <label data-smark>Street:</label>
-        <input data-smark type="text" name="street">
+      <label data-smark>Street:</label>
+      <input data-smark type="text" name="street">
     </p>
     <p>
-        <label data-smark>City:</label>
-        <input data-smark type="text" name="city">
+      <label data-smark>City:</label>
+      <input data-smark type="text" name="city">
     </p>
     <p>
-        <label data-smark>Postcode:</label>
-        <input data-smark type="text" name="postcode">
+      <label data-smark>Postcode:</label>
+      <input data-smark type="text" name="postcode">
     </p>
-</fieldset>
-<p>
+  </fieldset>
+  <p>
     <button data-smark='{
-        "action":"export",
-        "context":"billing",
-        "target":"../shipping"
+    "action":"export",
+    "context":"billing",
+    "target":"../shipping"
     }'>📋 Copy to shipping</button>
-</p>
-<fieldset data-smark='{"type":"form","name":"shipping"}'>
+  </p>
+  <fieldset data-smark='{"type":"form","name":"shipping"}'>
     <legend>Shipping address</legend>
     <p>
-        <label data-smark>Street:</label>
-        <input data-smark type="text" name="street">
+      <label data-smark>Street:</label>
+      <input data-smark type="text" name="street">
     </p>
     <p>
-        <label data-smark>City:</label>
-        <input data-smark type="text" name="city">
+      <label data-smark>City:</label>
+      <input data-smark type="text" name="city">
     </p>
     <p>
-        <label data-smark>Postcode:</label>
-        <input data-smark type="text" name="postcode">
+      <label data-smark>Postcode:</label>
+      <input data-smark type="text" name="postcode">
     </p>
-</fieldset>
+  </fieldset>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_advanced_concepts/events.md b/docs/_advanced_concepts/events.md
index 18d6795c..f54b2fab 100644
--- a/docs/_advanced_concepts/events.md
+++ b/docs/_advanced_concepts/events.md
@@ -274,10 +274,10 @@ The recommended pattern is to use an `export` trigger and intercept the
 {% raw %} <!-- events_submit_example {{{ --> {% endraw %}
 {% capture events_submit_example_html -%}
 <div id="myForm$$">
-<input data-smark type="text" name="firstName" placeholder="First name">
-<input data-smark type="text" name="lastName" placeholder="Last name">
-<button data-smark='{"action":"export"}'>Submit</button>
-<pre id="output" style="background:#f4f4f4;padding:0.5em;margin-top:0.5em;min-height:2em"></pre>
+  <input data-smark type="text" name="firstName" placeholder="First name">
+  <input data-smark type="text" name="lastName" placeholder="Last name">
+  <button data-smark='{"action":"export"}'>Submit</button>
+  <pre id="output" style="background:#f4f4f4;padding:0.5em;margin-top:0.5em;min-height:2em"></pre>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/_advanced_concepts/form_traversing.md b/docs/_advanced_concepts/form_traversing.md
index ebd3c436..4bda31eb 100644
--- a/docs/_advanced_concepts/form_traversing.md
+++ b/docs/_advanced_concepts/form_traversing.md
@@ -378,16 +378,16 @@ while (currentItem) {
 {% raw %} <!-- form_trav_copy_adjacent {{{ --> {% endraw %}
 {% capture form_trav_copy_adjacent_html -%}
 <div id="myForm$$">
-<ul data-smark='{"name": "employees", "type": "list", "of": "form"}'>
+  <ul data-smark='{"name": "employees", "type": "list", "of": "form"}'>
     <li>
-        <input name="name" data-smark placeholder="Name">
-        <input name="email" data-smark placeholder="Email">
-        <button data-smark='{"action":"export","target":".+1"}'>Copy to Next</button>
-        <button data-smark='{"action":"import","target":".-1"}'>Copy from Previous</button>
-        <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
+      <input name="name" data-smark placeholder="Name">
+      <input name="email" data-smark placeholder="Email">
+      <button data-smark='{"action":"export","target":".+1"}'>Copy to Next</button>
+      <button data-smark='{"action":"import","target":".-1"}'>Copy from Previous</button>
+      <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
     </li>
-</ul>
-<button data-smark='{"action":"addItem","context":"employees"}'>➕ Add</button>
+  </ul>
+  <button data-smark='{"action":"addItem","context":"employees"}'>➕ Add</button>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -424,14 +424,14 @@ async function validateSequentially(list) {
 {% raw %} <!-- form_trav_navigation_ui {{{ --> {% endraw %}
 {% capture form_trav_navigation_ui_html -%}
 <div id="myForm$$">
-<div data-smark='{"name": "records", "type": "list", "of": "form"}'>
+  <div data-smark='{"name": "records", "type": "list", "of": "form"}'>
     <div>
-        <input name="data" data-smark>
-        <div class="navigation">
-            <button data-smark='{"action":"import","context":".","target":".-1"}'>← Copy from Previous</button>
-            <button data-smark='{"action":"export","context":".","target":".+1"}'>Copy to Next →</button>
-        </div>
-        <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
+      <input name="data" data-smark>
+      <div class="navigation">
+        <button data-smark='{"action":"import","context":".","target":".-1"}'>← Copy from Previous</button>
+        <button data-smark='{"action":"export","context":".","target":".+1"}'>Copy to Next →</button>
+      </div>
+      <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
     </div>
 </div>
 <button data-smark='{"action":"addItem","context":"records"}'>➕ Add</button>
@@ -494,25 +494,25 @@ This example demonstrates a practical implementation of sibling navigation for d
 {% raw %} <!-- form_trav_practical_copy {{{ --> {% endraw %}
 {% capture form_trav_practical_copy_html -%}
 <div id="myForm$$">
-<div data-smark='{"name": "contacts", "type": "list", "of": "form", "min_items": 1}'>
+  <div data-smark='{"name": "contacts", "type": "list", "of": "form", "min_items": 1}'>
     <fieldset>
-        <legend>Contact Information</legend>
-        <p>
-            <label data-smark>Name:</label>
-            <input name="name" data-smark type="text">
-        </p>
-        <p>
-            <label data-smark>Email:</label>
-            <input name="email" data-smark type="email">
-        </p>
-        <p>
-            <label data-smark>Phone:</label>
-            <input name="phone" data-smark type="tel">
-        </p>
-        <div class="actions">
-            <button data-smark='{"action":"export","target":".+1"}'>📋 Copy to Next</button>
-            <button data-smark='{"action":"import","target":".-1"}'>📥 Copy from Previous</button>
-            <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
+      <legend>Contact Information</legend>
+      <p>
+        <label data-smark>Name:</label>
+        <input name="name" data-smark type="text">
+      </p>
+      <p>
+        <label data-smark>Email:</label>
+        <input name="email" data-smark type="email">
+      </p>
+      <p>
+        <label data-smark>Phone:</label>
+        <input name="phone" data-smark type="tel">
+      </p>
+      <div class="actions">
+        <button data-smark='{"action":"export","target":".+1"}'>📋 Copy to Next</button>
+        <button data-smark='{"action":"import","target":".-1"}'>📥 Copy from Previous</button>
+        <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
         </div>
     </fieldset>
 </div>
diff --git a/docs/_advanced_concepts/hotkeys.md b/docs/_advanced_concepts/hotkeys.md
index 77c37e40..71aecf6e 100644
--- a/docs/_advanced_concepts/hotkeys.md
+++ b/docs/_advanced_concepts/hotkeys.md
@@ -110,22 +110,22 @@ re-used in different parts of the form without conflict:
 {% raw %} <!-- hotkeys_context_sensitivity {{{ --> {% endraw %}
 {% capture hotkeys_context_sensitivity_html -%}
 <div id="myForm$$">
-<ul data-smark='{"type":"list","name":"users"}'>
+  <ul data-smark='{"type":"list","name":"users"}'>
     <li>
-        <input data-smark type="text" name="name" placeholder="User name">
-        <ul data-smark='{"type":"list","name":"phones"}'>
-            <li>
-                <input type="tel" data-smark name="phone" placeholder="Phone">
-                <!-- Ctrl+- removes a phone when focus is inside the phones list -->
-                <button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Phone</button>
-            </li>
-        </ul>
-        <button data-smark='{"action":"addItem","context":"phones","hotkey":"+"}'>➕ Add phone</button>
-        <!-- Ctrl+- removes a user when focus is at the user level (outside phones) -->
-        <button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Remove user</button>
+      <input data-smark type="text" name="name" placeholder="User name">
+      <ul data-smark='{"type":"list","name":"phones"}'>
+        <li>
+          <input type="tel" data-smark name="phone" placeholder="Phone">
+          <!-- Ctrl+- removes a phone when focus is inside the phones list -->
+          <button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Phone</button>
+        </li>
+      </ul>
+      <button data-smark='{"action":"addItem","context":"phones","hotkey":"+"}'>➕ Add phone</button>
+      <!-- Ctrl+- removes a user when focus is at the user level (outside phones) -->
+      <button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Remove user</button>
     </li>
-</ul>
-<button data-smark='{"action":"addItem","context":"users","hotkey":"+"}'>➕ Add user</button>
+  </ul>
+  <button data-smark='{"action":"addItem","context":"users","hotkey":"+"}'>➕ Add user</button>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/_advanced_concepts/mixin_types.md b/docs/_advanced_concepts/mixin_types.md
index 059c99a3..f3d459a3 100644
--- a/docs/_advanced_concepts/mixin_types.md
+++ b/docs/_advanced_concepts/mixin_types.md
@@ -598,14 +598,14 @@ data path in the exported value.
 {% raw %} <!-- capture mixin_contact_block_html {{{ --> {% endraw %}
 {% capture mixin_contact_block_html -%}
 <div id="myForm$$">
-<!-- Form — the same mixin is used for both contacts -->
-<fieldset data-smark='{"type":"form","name":"contacts"}'>
+  <!-- Form — the same mixin is used for both contacts -->
+  <fieldset data-smark='{"type":"form","name":"contacts"}'>
     <legend>Contacts</legend>
     <h3>Primary</h3>
     <div data-smark='{"type":"#contactBlock","name":"primary"}'></div>
     <h3>Emergency</h3>
     <div data-smark='{"type":"#contactBlock","name":"emergency"}'></div>
-</fieldset>
+  </fieldset>
 </div>
 <!-- Mixin template — defined once, reused anywhere -->
 <template id="contactBlock">
@@ -691,7 +691,7 @@ template's default of three.
 {% raw %} <!-- capture mixin_option_override_html {{{ --> {% endraw %}
 {% capture mixin_option_override_html -%}
 <div id="myForm$$">
-<fieldset data-smark='{"type":"form","name":"labels"}'>
+  <fieldset data-smark='{"type":"form","name":"labels"}'>
     <legend>Labels</legend>
     <h3>Priority tags (3 slots by default)</h3>
     <!-- No min_items override — keeps template default of 3 -->
@@ -702,7 +702,7 @@ template's default of three.
     <!-- Overrides min_items to 1 -->
     <div data-smark='{"type":"#tagList","name":"optional","min_items":1}'></div>
     <button data-smark='{"action":"addItem","context":"optional"}'>➕ Add</button>
-</fieldset>
+  </fieldset>
 </div>
 <template id="tagList">
     <!-- Template default: start with 3 items -->
@@ -760,10 +760,10 @@ uses `id="nameLabel"` to mark the slot, and each placeholder supplies its own
 {% raw %} <!-- capture mixin_snippet_params_html {{{ --> {% endraw %}
 {% capture mixin_snippet_params_html -%}
 <div id="myForm$$">
-<fieldset data-smark='{"type":"form","name":"people"}'>
+  <fieldset data-smark='{"type":"form","name":"people"}'>
     <legend>People</legend>
     <div data-smark='{"type":"#personEntry","name":"author"}'>
-        <span data-for="nameLabel">Author name</span>
+      <span data-for="nameLabel">Author name</span>
     </div>
     <div data-smark='{"type":"#personEntry","name":"reviewer"}'>
         <span data-for="nameLabel">Reviewer name</span>
diff --git a/docs/_component_types/type_color.md b/docs/_component_types/type_color.md
index 762be117..763a7bb0 100644
--- a/docs/_component_types/type_color.md
+++ b/docs/_component_types/type_color.md
@@ -78,7 +78,7 @@ Alternatively, you can also use the shorthand notation inferring the type from t
 {% raw %} <!-- simple_color {{{ --> {% endraw %}
 {% capture simple_color -%}
 <div id="myForm$$">
-<input type="color" name="myColor" data-smark>
+  <input type="color" name="myColor" data-smark>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -129,10 +129,10 @@ would have to specify the context in the button action, like this:
 {% raw %} <!-- singleton_color {{{ --> {% endraw %}
 {% capture singleton_color -%}
 <div id="myForm$$">
-<span data-smark='{"type":"color", "name":"myColor"}'>
+  <span data-smark='{"type":"color", "name":"myColor"}'>
     <input data-smark>
     <button data-smark='{"action":"clear"}'>❌ Clear</button>
-</span>
+  </span>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -161,10 +161,10 @@ INPUT element or its type is explicitly defined and different to "color".
 {% raw %} <!-- singleton_color_error {{{ --> {% endraw %}
 {% capture singleton_color_error -%}
 <div id="myForm$$">
-<span data-smark='{"type":"color", "name":"myColor"}'>
+  <span data-smark='{"type":"color", "name":"myColor"}'>
     <input type="text" name="myColor" data-smark>
     <button data-smark='{"action":"clear"}'>❌ Clear</button>
-</span>
+  </span>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_component_types/type_date.md b/docs/_component_types/type_date.md
index 158da894..c6d384e1 100644
--- a/docs/_component_types/type_date.md
+++ b/docs/_component_types/type_date.md
@@ -68,7 +68,7 @@ Alternatively, you can also use the shorthand notation inferring the type from t
 {% raw %} <!-- simple_color {{{ --> {% endraw %}
 {% capture simple_color -%}
 <div id="myForm$$">
-<input type="date" name="birthdate" data-smark>
+  <input type="date" name="birthdate" data-smark>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -111,7 +111,7 @@ throwing an error.
 {% raw %} <!-- date_error {{{ --> {% endraw %}
 {% capture date_error -%}
 <div id="myForm$$">
-<input type="text" name="birthdate" data-smark='{"type":"date"}'>
+  <input type="text" name="birthdate" data-smark='{"type":"date"}'>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_component_types/type_datetime-local.md b/docs/_component_types/type_datetime-local.md
index 906b25a7..2149ceb8 100644
--- a/docs/_component_types/type_datetime-local.md
+++ b/docs/_component_types/type_datetime-local.md
@@ -68,7 +68,7 @@ Alternatively, you can also use the shorthand notation inferring the type from t
 {% raw %} <!-- simple_datetime_local {{{ --> {% endraw %}
 {% capture simple_datetime_local -%}
 <div id="myForm$$">
-<input type="datetime-local" name="appointmentTime" data-smark>
+  <input type="datetime-local" name="appointmentTime" data-smark>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -115,7 +115,7 @@ throwing an error.
 {% raw %} <!-- datetime_local_error {{{ --> {% endraw %}
 {% capture datetime_local_error -%}
 <div id="myForm$$">
-<input type="text" name="appointmentTime" data-smark='{"type":"datetime-local"}'>
+  <input type="text" name="appointmentTime" data-smark='{"type":"datetime-local"}'>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_component_types/type_form.md b/docs/_component_types/type_form.md
index f64a66c1..3935fbf6 100644
--- a/docs/_component_types/type_form.md
+++ b/docs/_component_types/type_form.md
@@ -63,36 +63,36 @@ Following example shows a simple *SmarkForm* form with two nested forms:
 {% raw %} <!-- capture simple_form_example {{{ --> {% endraw %}
 {% capture simple_form_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Id:</label>
     <input data-smark type='text' name='id' />
-</p>
-<fieldset data-smark='{"type":"form","name":"personalData"}'>
+  </p>
+  <fieldset data-smark='{"type":"form","name":"personalData"}'>
     <legend>Personal Data:</legend>
     <p>
-        <label data-smark>Name:</label>
-        <input data-smark type='text' name='name' placheolder='Family name'/>
+      <label data-smark>Name:</label>
+      <input data-smark type='text' name='name' placheolder='Family name'/>
     </p>
     <p>
-        <label data-smark>Surname:</label>
-        <input data-smark type='text' name='surname' />
+      <label data-smark>Surname:</label>
+      <input data-smark type='text' name='surname' />
     </p>
     <p>
-        <label data-smark>Address:</label>
-        <input data-smark type='text' name='address' />
+      <label data-smark>Address:</label>
+      <input data-smark type='text' name='address' />
     </p>
-</fieldset>
-<fieldset data-smark='{"type":"form","name":"businessData"}'>
+  </fieldset>
+  <fieldset data-smark='{"type":"form","name":"businessData"}'>
     <legend>Business Data:</legend>
     <p>
-        <label data-smark>Company Name:</label>
-        <input data-smark type='text' name='name' placheolder='Company Name'/>
+      <label data-smark>Company Name:</label>
+      <input data-smark type='text' name='name' placheolder='Company Name'/>
     </p>
     <p>
-        <label data-smark>Address:</label>
-        <input data-smark type='text' name='address' />
+      <label data-smark>Address:</label>
+      <input data-smark type='text' name='address' />
     </p>
-</fieldset>
+  </fieldset>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -145,26 +145,26 @@ The following example demonstrates the distinction between `clear` and `reset` a
 {% raw %} <!-- capture clear_reset_example {{{ --> {% endraw %}
 {% capture clear_reset_example -%}
 <div id="myForm$$">
-<fieldset>
+  <fieldset>
     <legend>User Profile (with defaults)</legend>
     <p>
-        <label data-smark>Name:</label>
-        <input data-smark type='text' name='name' />
+      <label data-smark>Name:</label>
+      <input data-smark type='text' name='name' />
     </p>
     <p>
-        <label data-smark>Email:</label>
-        <input data-smark type='email' name='email' />
+      <label data-smark>Email:</label>
+      <input data-smark type='email' name='email' />
     </p>
     <p>
-        <label data-smark>Age:</label>
-        <input data-smark type='number' name='age' />
+      <label data-smark>Age:</label>
+      <input data-smark type='number' name='age' />
     </p>
     <p>
-        <button data-smark='{"action":"clear"}'>Clear All</button>
-        <button data-smark='{"action":"reset"}'>Reset to Defaults</button>
-        <button data-smark='{"action":"export"}'>Show Data</button>
+      <button data-smark='{"action":"clear"}'>Clear All</button>
+      <button data-smark='{"action":"reset"}'>Reset to Defaults</button>
+      <button data-smark='{"action":"export"}'>Show Data</button>
     </p>
-</fieldset>
+  </fieldset>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_component_types/type_input.md b/docs/_component_types/type_input.md
index 6fa049c8..ca0d995e 100644
--- a/docs/_component_types/type_input.md
+++ b/docs/_component_types/type_input.md
@@ -54,7 +54,7 @@ To use the `input` component type, simply add the `data-smark` attribute to your
 {% raw %} <!-- input_basic_usage {{{ --> {% endraw %}
 {% capture input_basic_usage_html -%}
 <div id="myForm$$">
-<input type="text" data-smark='{"name":"username"}' placeholder="Enter your username">
+  <input type="text" data-smark='{"name":"username"}' placeholder="Enter your username">
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/_component_types/type_label.md b/docs/_component_types/type_label.md
index d41f8245..ef86ef57 100644
--- a/docs/_component_types/type_label.md
+++ b/docs/_component_types/type_label.md
@@ -50,24 +50,24 @@ Enhanced SmarkForm `label` elements work similarly to standard HTML labels but o
 {% raw %} <!-- basic_examples {{{ --> {% endraw %}
 {% capture basic_examples -%}
 <div id="myForm$$" data-smark='{"focus_on_click":false}'>
-<h2>Explicit association</h2>
-    <label data-smark>Click me!</label>
-    <span><!-- Intermediate DOM nodes are transparent to SmarkForm's fields tree -->
-        <input type="text" data-smark name="field01" placeholder="...and focus will come here">
-    </span>
-    <p>📌 Label propperly guesses the more appropriate target, even though the intermediate <code>&lt;span&gt;</code>.</p>
-
-    <h2>Explicit target specification</h2>
-    <label data-smark='{"target":"field02"}'>Click me!</label>
-    <input data-smark name="not_field02" placeholder="(skipped)">
-    <input data-smark name="field02" placeholder="...and focus will come here">
-    <p>📌 Explicit target specified by relative path.</p>
-
-    <h2>Implicit pairing</h2>
-    <label data-smark>Click me!
-        <input data-smark name="field03" placeholder="...and focus will come here">
-    </label>
-    <p>📌 Wrapping the field inside still works likewise standard HTML.</p>
+  <h2>Explicit association</h2>
+  <label data-smark>Click me!</label>
+  <span><!-- Intermediate DOM nodes are transparent to SmarkForm's fields tree -->
+    <input type="text" data-smark name="field01" placeholder="...and focus will come here">
+  </span>
+  <p>📌 Label propperly guesses the more appropriate target, even though the intermediate <code>&lt;span&gt;</code>.</p>
+
+  <h2>Explicit target specification</h2>
+  <label data-smark='{"target":"field02"}'>Click me!</label>
+  <input data-smark name="not_field02" placeholder="(skipped)">
+  <input data-smark name="field02" placeholder="...and focus will come here">
+  <p>📌 Explicit target specified by relative path.</p>
+
+  <h2>Implicit pairing</h2>
+  <label data-smark>Click me!
+    <input data-smark name="field03" placeholder="...and focus will come here">
+  </label>
+  <p>📌 Wrapping the field inside still works likewise standard HTML.</p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -211,43 +211,43 @@ You can use any other element in place, like `<span>`, `<b>` or even `<legend>`.
 {% raw %} <!-- advanced_examples {{{ --> {% endraw %}
 {% capture advanced_examples -%}
 <div id="myForm$$" data-smark='{"focus_on_click":false}'>
-<h2>Targetting nested forms...</h2>
-    <span data-smark='{"type": "label"}'>Click me (auto pairing)!</span>
-    <fieldset data-smark name="subform01">
-        <input data-smark name="field01" placeholder="First field">
-        <input data-smark name="field02" placeholder="Second field">
+  <h2>Targetting nested forms...</h2>
+  <span data-smark='{"type": "label"}'>Click me (auto pairing)!</span>
+  <fieldset data-smark name="subform01">
+    <input data-smark name="field01" placeholder="First field">
+    <input data-smark name="field02" placeholder="Second field">
+  </fieldset>
+  <span data-smark='{"type": "label"}'>Click me (nested pairing)!
+    <fieldset data-smark name="subform02">
+      <input data-smark name="field01" placeholder="First field">
+      <input data-smark name="field02" placeholder="Second field">
     </fieldset>
-    <span data-smark='{"type": "label"}'>Click me (nested pairing)!
-        <fieldset data-smark name="subform02">
-            <input data-smark name="field01" placeholder="First field">
-            <input data-smark name="field02" placeholder="Second field">
-        </fieldset>
-    </span>
-    <p>📌 <code>&lt;label&gt;</code> tag cannot be used here (See <i>Notes</i> tab).</p>
-
-    <h2>Using &lt;legend&gt;...</h2>
-    <fieldset data-smark name="subform03">
-        <legend data-smark='{"type": "label"}'>Click me (using legend)!</legend>
+  </span>
+  <p>📌 <code>&lt;label&gt;</code> tag cannot be used here (See <i>Notes</i> tab).</p>
+
+  <h2>Using &lt;legend&gt;...</h2>
+  <fieldset data-smark name="subform03">
+    <legend data-smark='{"type": "label"}'>Click me (using legend)!</legend>
+    <input data-smark name="field01" placeholder="First field">
+    <input data-smark name="field02" placeholder="Second field">
+  </fieldset>
+  <p>📌 Fieldset's <code>&lt;legend&gt;</code> tags are special case where the containing <code>&lt;fieldset&gt;</code> is automatically targetted.</p>
+
+  <h2>Targetting lists...</h2>
+  <fieldset>
+    <legend data-smark='{"type": "label"}'>
+      <span class="button" title="Add new item" data-smark='{"action":"addItem", "context": "list01"}'>+</span>
+      Click me (using legend)!
+    </legend>
+    <ul data-smark='{"type":"list", "name": "list01"}'>
+      <li>
         <input data-smark name="field01" placeholder="First field">
         <input data-smark name="field02" placeholder="Second field">
-    </fieldset>
-    <p>📌 Fieldset's <code>&lt;legend&gt;</code> tags are special case where the containing <code>&lt;fieldset&gt;</code> is automatically targetted.</p>
-
-    <h2>Targetting lists...</h2>
-    <fieldset>
-        <legend data-smark='{"type": "label"}'>
-            <span class="button" title="Add new item" data-smark='{"action":"addItem", "context": "list01"}'>+</span>
-            Click me (using legend)!
-        </legend>
-        <ul data-smark='{"type":"list", "name": "list01"}'>
-            <li>
-                <input data-smark name="field01" placeholder="First field">
-                <input data-smark name="field02" placeholder="Second field">
-            </li>
-        </ul>
-        <span class="button" title="Remove last item" data-smark='{"action":"removeItem", "context": "list01"}'>-</span>
-    </fieldset>
-    <p>📌 Fieldset's <code>&lt;legend&gt;</code> tags are special case where the containing <code>&lt;fieldset&gt;</code> is automatically targetted.</p>
+      </li>
+    </ul>
+    <span class="button" title="Remove last item" data-smark='{"action":"removeItem", "context": "list01"}'>-</span>
+  </fieldset>
+  <p>📌 Fieldset's <code>&lt;legend&gt;</code> tags are special case where the containing <code>&lt;fieldset&gt;</code> is automatically targetted.</p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/_component_types/type_list.md b/docs/_component_types/type_list.md
index fb1c275b..7ad3ed7d 100644
--- a/docs/_component_types/type_list.md
+++ b/docs/_component_types/type_list.md
@@ -113,15 +113,15 @@ specified the *data-smark* attribute or not).
 {% raw %} <!-- capture simple_list_example {{{ --> {% endraw %}
 {% capture simple_list_example -%}
 <div id="myForm$$">
-<section data-smark='{"type":"list","name":"users"}'><!-- ☛ 1 -->
+  <section data-smark='{"type":"list","name":"users"}'><!-- ☛ 1 -->
     <fieldset style="text-align:right"><!-- ☛ 2, 3, 6 -->
-        <p><label data-smark>User name:</label><input name='name' type='text' data-smark/></p>
-        <p><label data-smark>Phone number:</label><input name='phone' type='tel' data-smark/></p>
-        <p><label data-smark>Email:</label><input name='email' type='text' data-smark/></p>
-        <button data-smark='{"action":"removeItem"}' title='Remove User'>➖</button>
+      <p><label data-smark>User name:</label><input name='name' type='text' data-smark/></p>
+      <p><label data-smark>Phone number:</label><input name='phone' type='tel' data-smark/></p>
+      <p><label data-smark>Email:</label><input name='email' type='text' data-smark/></p>
+      <button data-smark='{"action":"removeItem"}' title='Remove User'>➖</button>
     </fieldset>
-</section>
-<button data-smark='{"action":"addItem","context":"users"}' title='Add User'>➕</button>
+  </section>
+  <button data-smark='{"action":"addItem","context":"users"}' title='Add User'>➕</button>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -185,11 +185,11 @@ like in the following example.
 {% raw %} <!-- capture scalar_list_example {{{ --> {% endraw %}
 {% capture scalar_list_example -%}
 <div id="myForm$$">
-<section style="display:grid" data-smark='{"type":"list","name":"phones"}'>
+  <section style="display:grid" data-smark='{"type":"list","name":"phones"}'>
     <input placeholder='Phone number' type='tel'/><!-- ☛ 4, 6 -->
-</section>
-<button data-smark='{"action":"addItem","context":"phones"}' title='Add Phone'>➕</button>
-<button data-smark='{"action":"removeItem","context":"phones"}' title='Remove Phone'>➖</button> <!-- ☛ 5 -->
+  </section>
+  <button data-smark='{"action":"addItem","context":"phones"}' title='Add Phone'>➕</button>
+  <button data-smark='{"action":"removeItem","context":"phones"}' title='Remove Phone'>➖</button> <!-- ☛ 5 -->
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -239,13 +239,13 @@ inside.
 {% raw %} <!-- capture singleton_list_example {{{ --> {% endraw %}
 {% capture singleton_list_example -%}
 <div id="myForm$$">
-<ul data-smark='{"name": "phones", "of": "input", "max_items": 3}'>
+  <ul data-smark='{"name": "phones", "of": "input", "max_items": 3}'>
     <li>
-        <input placeholder='Phone Number' type="tel" data-smark>
-        <button data-smark='{"action":"removeItem"}' title='Remove Phone'>➖</button>
+      <input placeholder='Phone Number' type="tel" data-smark>
+      <button data-smark='{"action":"removeItem"}' title='Remove Phone'>➖</button>
     </li>
-</ul>
-<button data-smark='{"action":"addItem","context":"phones"}' title='Add Phone'>➕</button>
+  </ul>
+  <button data-smark='{"action":"addItem","context":"phones"}' title='Add Phone'>➕</button>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -292,30 +292,30 @@ say, up to three phone numbers and up to three emails.
 {% raw %} <!-- capture nesting_list_example {{{ --> {% endraw %}
 {% capture nesting_list_example -%}
 <div id="myForm$$">
-<section data-smark='{"type":"list","name":"users"}'>
+  <section data-smark='{"type":"list","name":"users"}'>
     <fieldset>
-        <legend>User</legend>
-        <button data-smark='{"action":"removeItem"}' title='Remove User'>➖</button>
-        <input name='name' placeholder='User name' type='text' data-smark/>
-        <fieldset>
-            <legend>
-                <span
-                    data-smark='{"action":"addItem","context":"phones"}'
-                    title='Add Phone'
-                    style="background: lightgray; padding:.3em; border-radius:3px; margin: .4em"
-                >➕</span>
-                Phone Numbers
-            </legend>
-            <ul data-smark='{"type": "list", "name": "phones", "of": "input", "max_items": 3}'>
-                <li>
-                    <input type="tel" data-smark>
-                    <button data-smark='{"action":"removeItem"}' title='Remove Phone'>➖</button>
-                </li>
-            </ul>
-        </fieldset>
+      <legend>User</legend>
+      <button data-smark='{"action":"removeItem"}' title='Remove User'>➖</button>
+      <input name='name' placeholder='User name' type='text' data-smark/>
+      <fieldset>
+        <legend>
+          <span
+          data-smark='{"action":"addItem","context":"phones"}'
+          title='Add Phone'
+          style="background: lightgray; padding:.3em; border-radius:3px; margin: .4em"
+          >➕</span>
+        Phone Numbers
+      </legend>
+      <ul data-smark='{"type": "list", "name": "phones", "of": "input", "max_items": 3}'>
+        <li>
+          <input type="tel" data-smark>
+          <button data-smark='{"action":"removeItem"}' title='Remove Phone'>➖</button>
+        </li>
+      </ul>
     </fieldset>
-</section>
-<button data-smark='{"action":"addItem","context":"users"}' title='Add User'>➕ Add user</button>
+  </fieldset>
+  </section>
+  <button data-smark='{"action":"addItem","context":"users"}' title='Add User'>➕ Add user</button>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_component_types/type_number.md b/docs/_component_types/type_number.md
index 3dde99fe..e3a86663 100644
--- a/docs/_component_types/type_number.md
+++ b/docs/_component_types/type_number.md
@@ -56,7 +56,7 @@ set to `number` automatically.
 {% raw %} <!-- simple_number {{{ --> {% endraw %}
 {% capture simple_number -%}
 <div id="myForm$$">
-<input type="number" name="amount" data-smark>
+  <input type="number" name="amount" data-smark>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -89,7 +89,7 @@ numbers will result in a `null` value rather than throwing an error.
 {% raw %} <!-- number_error {{{ --> {% endraw %}
 {% capture number_error -%}
 <div id="myForm$$">
-<input type="text" name="amount" data-smark='{"type":"number"}'>
+  <input type="text" name="amount" data-smark='{"type":"number"}'>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_component_types/type_radio.md b/docs/_component_types/type_radio.md
index 64710ecd..b72529c6 100644
--- a/docs/_component_types/type_radio.md
+++ b/docs/_component_types/type_radio.md
@@ -56,18 +56,18 @@ To use the `radio` component type, create multiple `INPUT` elements of type `rad
 {% raw %} <!-- radio_group_example {{{ --> {% endraw %}
 {% capture radio_group_example_html -%}
 <div id="myForm$$">
-<fieldset>
+  <fieldset>
     <legend>Gender:</legend>
     <label>
-        <input type="radio" data-smark name="gender" value="male"> Male
+      <input type="radio" data-smark name="gender" value="male"> Male
     </label>
     <label>
-        <input type="radio" data-smark name="gender" value="female"> Female
+      <input type="radio" data-smark name="gender" value="female"> Female
     </label>
     <label>
-        <input type="radio" data-smark name="gender" value="other"> Other
+      <input type="radio" data-smark name="gender" value="other"> Other
     </label>
-</fieldset>
+  </fieldset>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/_component_types/type_time.md b/docs/_component_types/type_time.md
index e5612809..167976aa 100644
--- a/docs/_component_types/type_time.md
+++ b/docs/_component_types/type_time.md
@@ -68,7 +68,7 @@ Alternatively, you can also use the shorthand notation inferring the type from t
 {% raw %} <!-- simple_time {{{ --> {% endraw %}
 {% capture simple_time -%}
 <div id="myForm$$">
-<input type="time" name="meetingTime" data-smark>
+  <input type="time" name="meetingTime" data-smark>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -113,7 +113,7 @@ throwing an error.
 {% raw %} <!-- time_error {{{ --> {% endraw %}
 {% capture time_error -%}
 <div id="myForm$$">
-<input type="text" name="meetingTime" data-smark='{"type":"time"}'>
+  <input type="text" name="meetingTime" data-smark='{"type":"time"}'>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_getting_started/core_component_types.md b/docs/_getting_started/core_component_types.md
index 1074ca6d..fc4bfcb5 100644
--- a/docs/_getting_started/core_component_types.md
+++ b/docs/_getting_started/core_component_types.md
@@ -86,41 +86,41 @@ But every present and future HTML *&lt;input&gt;* tag could be used as
 {% raw %} <!-- input_example {{{ --> {% endraw %}
 {% capture input_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Name:</label>
     <!-- Implicit (automatically inferred) component type: -->
     <input type='text' name='name' data-smark>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Surname:</label>
     <!-- Explicitly specified component type: -->
     <input type='text' name='surname' data-smark='{"type":"input"}'>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>User Name:</label>
     <!-- Handy options-driven syntax:                                  -->
     <!--   👉 type attribute ='text' is the default                    -->
     <!--   👉 {"type":"input"} inferred by tag name and type attribute -->
     <input data-smark='{"name":"user_name"}'>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Phone:</label>
     <!-- Explicit better than implicit:                                -->
     <!--   👉 type='tel' is necessary here.                            -->
     <!--   👉 {"type":"input"} may prevent an hypotetical future "tel" -->
     <!--      component type from being inferred here.                 -->
     <input type='tel' data-smark='{"type":"input","name":"phone"}'>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Address:</label>
     <!-- Non <input> fields:                                           -->
     <textarea data-smark='{"type":"input","name":"address"}'></textarea>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Email:</label>
     <!-- Just another example:                                         -->
     <input type='email' data-smark='{"type":"input","name":"email"}'>
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -203,11 +203,11 @@ would be cleared.
 {% raw %} <!-- no_singleton_example {{{ --> {% endraw %}
 {% capture no_singleton_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Pick a Color:</label>
     <input type="color" name="color" data-smark>
     <button data-smark='{"action":"clear","context":"color"}'>❌ Reset</button>
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -236,13 +236,13 @@ but, also, **it could avoid future issues** in case of field name being changed
 {% raw %} <!-- singleton_color_example {{{ --> {% endraw %}
 {% capture singleton_color_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Pick a Color:</label>
     <span data-smark='{"type":"color", "name":"bgcolor"}'>
-        <input data-smark>
-        <button data-smark='{"action":"clear"}'>❌ Reset</button>
+      <input data-smark>
+      <button data-smark='{"action":"clear"}'>❌ Reset</button>
     </span>
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -287,14 +287,14 @@ component type providding extra sanitation (when importing) and formatting
 {% raw %} <!-- number_and_date_example {{{ --> {% endraw %}
 {% capture number_and_date_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Price:</label>
     <input data-smark='{"type":"number","name":"price"}'>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Date:</label>
     <input data-smark='{"type":"date","name":"date"}'>
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -351,13 +351,13 @@ selected pure black (#000000) or simply overlooked the field altogether.
 {% raw %} <!-- color_example {{{ --> {% endraw %}
 {% capture color_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Pick a Color:</label>
     <span data-smark='{"type":"color", "name":"bgcolor"}'>
-        <input data-smark>
-        <button data-smark='{"action":"clear"}'>❌ Reset</button>
+      <input data-smark>
+      <button data-smark='{"action":"clear"}'>❌ Reset</button>
     </span>
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -385,27 +385,27 @@ endcapture %}
 {% raw %} <!-- clear_others_example {{{ --> {% endraw %}
 {% capture clear_others_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>A Color:</label>
     <span data-smark='{"type":"color", "name":"color"}'>
-        <input data-smark>
-        <button data-smark='{"action":"clear"}'>❌ Reset</button>
+      <input data-smark>
+      <button data-smark='{"action":"clear"}'>❌ Reset</button>
     </span>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>A Number:</label>
     <span data-smark='{"type":"number", "name":"number"}'>
-        <input data-smark>
-        <button data-smark='{"action":"clear"}'>❌ Reset</button>
+      <input data-smark>
+      <button data-smark='{"action":"clear"}'>❌ Reset</button>
     </span>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>A Date:</label>
     <span data-smark='{"type":"date", "name":"date"}'>
-        <input data-smark>
-        <button data-smark='{"action":"clear"}'>❌ Reset</button>
+      <input data-smark>
+      <button data-smark='{"action":"clear"}'>❌ Reset</button>
     </span>
-</p>
+  </p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/_getting_started/core_concepts.md b/docs/_getting_started/core_concepts.md
index 7dc0b4fe..7c08dc6f 100644
--- a/docs/_getting_started/core_concepts.md
+++ b/docs/_getting_started/core_concepts.md
@@ -63,14 +63,14 @@ descendant of any depth.
 {% raw %} <!-- capture simple_form_example {{{ --> {% endraw %}
 {% capture simple_form_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Name:</label>
     <input name='name' data-smark>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Surname:</label>
     <input name='surname' data-smark>
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -132,36 +132,36 @@ seamlessly handle either the whole form or individual fields.
 {% raw %} <!-- capture context_comparsion_example_simple {{{ --> {% endraw %}
 {% capture context_comparsion_example_simple -%}
 <div id="myForm$$">
-<div data-smark='{"name":"demo"}'>
+  <div data-smark='{"name":"demo"}'>
     <p>
-        <label data-smark>Name:</label>
-        <input name='name' data-smark>
+      <label data-smark>Name:</label>
+      <input name='name' data-smark>
     </p>
     <p>
-        <label data-smark>Surname:</label>
-        <input name='surname' data-smark>
+      <label data-smark>Surname:</label>
+      <input name='surname' data-smark>
     </p>
     <table>
-        <tr style="text-align:center">
-            <th>Name field:</th>
-            <th>Surname field:</th>
-            <th>Whole Form:</th>
-        </tr>
-        <tr style="text-align:center">
-            <td><button data-smark='{"action":"import","context":"name","target":"/editor"}'>⬆️  Import</button></td>
-            <td><button data-smark='{"action":"import","context":"surname","target":"/editor"}'>⬆️  Import</button></td>
-            <td><button data-smark='{"action":"import","target":"/editor"}'>⬆️  Import</button></td>
-        </tr>
-        <tr style="text-align:center">
-            <td><button data-smark='{"action":"export","context":"name","target":"/editor"}'>⬇️  Export</button></td>
-            <td><button data-smark='{"action":"export","context":"surname","target":"/editor"}'>⬇️  Export</button></td>
-            <td><button data-smark='{"action":"export","target":"/editor"}'>⬇️  Export</button></td>
-        </tr>
-        <tr style="text-align:center">
-            <td><button data-smark='{"action":"clear","context":"name"}'>❌ Clear</button></td>
-            <td><button data-smark='{"action":"clear","context":"surname"}'>❌ Clear</button></td>
-            <td><button data-smark='{"action":"clear"}'>❌ Clear</button></td>
-        </tr>
+      <tr style="text-align:center">
+        <th>Name field:</th>
+        <th>Surname field:</th>
+        <th>Whole Form:</th>
+      </tr>
+      <tr style="text-align:center">
+        <td><button data-smark='{"action":"import","context":"name","target":"/editor"}'>⬆️  Import</button></td>
+        <td><button data-smark='{"action":"import","context":"surname","target":"/editor"}'>⬆️  Import</button></td>
+        <td><button data-smark='{"action":"import","target":"/editor"}'>⬆️  Import</button></td>
+      </tr>
+      <tr style="text-align:center">
+        <td><button data-smark='{"action":"export","context":"name","target":"/editor"}'>⬇️  Export</button></td>
+        <td><button data-smark='{"action":"export","context":"surname","target":"/editor"}'>⬇️  Export</button></td>
+        <td><button data-smark='{"action":"export","target":"/editor"}'>⬇️  Export</button></td>
+      </tr>
+      <tr style="text-align:center">
+        <td><button data-smark='{"action":"clear","context":"name"}'>❌ Clear</button></td>
+        <td><button data-smark='{"action":"clear","context":"surname"}'>❌ Clear</button></td>
+        <td><button data-smark='{"action":"clear"}'>❌ Clear</button></td>
+      </tr>
     </table>
 </div>
 <div style="display: flex; flex-direction:column; align-items:left; gap: 1em; width: 100%">
@@ -223,33 +223,33 @@ This means that **we can nest forms** inside other forms as regular fields
 {% raw %} <!-- capture nested_forms_example {{{ --> {% endraw %}
 {% capture nested_forms_example -%}
 <div id="myForm$$">
-<b>User:</b>
-<p>
+  <b>User:</b>
+  <p>
     <label data-smark>Id:</label>
     <input name='userId' value='0001' data-smark>
-</p>
-<fieldset data-smark='{"type":"form","name":"personal_data"}'>
+  </p>
+  <fieldset data-smark='{"type":"form","name":"personal_data"}'>
     <legend>Personal Data</legend>
     <p>
-        <label data-smark>Name:</label>
-        <input name='name' value='John' data-smark>
+      <label data-smark>Name:</label>
+      <input name='name' value='John' data-smark>
     </p>
     <p>
-        <label data-smark>Surname:</label>
-        <input name='surname' value='Doe' data-smark>
+      <label data-smark>Surname:</label>
+      <input name='surname' value='Doe' data-smark>
     </p>
     <fieldset data-smark='{"type":"form","name":"contact"}'>
-        <legend>Contact Data</legend>
-        <p>
-            <label data-smark>Phone:</label>
-            <input name='phone' type='tel' value='555444999' data-smark>
-        </p>
-        <p>
-            <label data-smark>eMail:</label>
-            <input name='email' type='mail' value='john@dohe.example.org' data-smark>
-        </p>
+      <legend>Contact Data</legend>
+      <p>
+        <label data-smark>Phone:</label>
+        <input name='phone' type='tel' value='555444999' data-smark>
+      </p>
+      <p>
+        <label data-smark>eMail:</label>
+        <input name='email' type='mail' value='john@dohe.example.org' data-smark>
+      </p>
     </fieldset>
-</fieldset>
+  </fieldset>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -305,12 +305,12 @@ and export any imaginable JSON data structure**.
 {% raw %} <!-- capture fixed_list_example {{{ --> {% endraw %}
 {% capture fixed_list_example -%}
 <div id="myForm$$">
-<b>Phones:</b>
-<ul data-smark='{"type":"list","name":"phones","of":"input","min_items":3}'>
+  <b>Phones:</b>
+  <ul data-smark='{"type":"list","name":"phones","of":"input","min_items":3}'>
     <li>
-        <input data-smark type="tel" placeholder="Phone number" />
+      <input data-smark type="tel" placeholder="Phone number" />
     </li>
-</ul>
+  </ul>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -383,23 +383,23 @@ actions:
 {% raw %} <!-- capture pets_list_example {{{ --> {% endraw %}
 {% capture pets_list_example -%}
 <div id="myForm$$">
-<b>Pets:</b>
-<ul data-smark='{"type":"list","name":"pets", "sortable":true, "min_items": 0, "max_items": 5}' class="sortable">
+  <b>Pets:</b>
+  <ul data-smark='{"type":"list","name":"pets", "sortable":true, "min_items": 0, "max_items": 5}' class="sortable">
     <li>
-        <select name='species' data-smark>
-            <option value="cat">Cat</option>
-            <option value="dog">Dog</option>
-            <option value="hamster">Hamster</option>
-            <option value="fish">Fish</option>
-            <option value="bird">Bird</option>
-            <option value="turtle">Turtle</option>
-            <option value="turtle">Other</option>
-        </select>
-        <input name='name' placeholder="Name" data-smark>
-        <button data-smark='{"action":"removeItem"}' title="Remove Pet">❌</button>
+      <select name='species' data-smark>
+        <option value="cat">Cat</option>
+        <option value="dog">Dog</option>
+        <option value="hamster">Hamster</option>
+        <option value="fish">Fish</option>
+        <option value="bird">Bird</option>
+        <option value="turtle">Turtle</option>
+        <option value="turtle">Other</option>
+      </select>
+      <input name='name' placeholder="Name" data-smark>
+      <button data-smark='{"action":"removeItem"}' title="Remove Pet">❌</button>
     </li>
-</ul>
-<button data-smark='{"action":"addItem","context":"pets"}'>Add Pet</button>
+  </ul>
+  <button data-smark='{"action":"addItem","context":"pets"}'>Add Pet</button>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -537,14 +537,14 @@ items allowing users to cherry-pick which item to remove:
 {% raw %} <!-- core_remove_inside_item {{{ --> {% endraw %}
 {% capture core_remove_inside_item_html -%}
 <div id="myForm$$">
-<ul data-smark='{"type":"list","name":"pets"}'>
-  <li>
-    <input name='species' data-smark>
-    <input name='name' data-smark>
-    <button data-smark='{"action":"removeItem"}'>❌</button>
-  </li>
-</ul>
-<button data-smark='{"action":"addItem","context":"pets"}'>➕</button>
+  <ul data-smark='{"type":"list","name":"pets"}'>
+    <li>
+      <input name='species' data-smark>
+      <input name='name' data-smark>
+      <button data-smark='{"action":"removeItem"}'>❌</button>
+    </li>
+  </ul>
+  <button data-smark='{"action":"addItem","context":"pets"}'>➕</button>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -660,16 +660,16 @@ This special behavior of the *input* component type is what we call a
 {% raw %} <!-- core_singleton_phones {{{ --> {% endraw %}
 {% capture core_singleton_phones_html -%}
 <div id="myForm$$">
-<div data-smark='{"type":"form","name":"personal_data"}'>
-  <input name='name'  data-smark>
-  <input name='surname' data-smark>
-  <ul data-smark='{"type":"list","name":"phones"}'>
-    <li data-smark='{"type":"input"}'>
-      <input placeholder='Phone Number' type="tel" data-smark>
-      <button data-smark='{"action":"removeItem"}'>❌</button>
-    </li>
-  </ul>
-  <button data-smark='{"action":"addItem","context":"phones"}'>➕</button>
+  <div data-smark='{"type":"form","name":"personal_data"}'>
+    <input name='name'  data-smark>
+    <input name='surname' data-smark>
+    <ul data-smark='{"type":"list","name":"phones"}'>
+      <li data-smark='{"type":"input"}'>
+        <input placeholder='Phone Number' type="tel" data-smark>
+        <button data-smark='{"action":"removeItem"}'>❌</button>
+      </li>
+    </ul>
+    <button data-smark='{"action":"addItem","context":"phones"}'>➕</button>
 </div>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_getting_started/quick_start.md b/docs/_getting_started/quick_start.md
index 05eedd74..1fac7a22 100644
--- a/docs/_getting_started/quick_start.md
+++ b/docs/_getting_started/quick_start.md
@@ -129,18 +129,18 @@ simple form like the following:
 {% raw %} <!-- html_source_legacy {{{ --> {% endraw %}
 {% capture html_source_legacy -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label for="nameField$$">Name:</label>
     <input type="text" id="nameField$$" name="name">
-</p>
-<p>
+  </p>
+  <p>
     <label for="emailField$$">Email:</label>
     <input type="email" id="emailField$$" name="email">
-</p>
-<p>
+  </p>
+  <p>
     <button>❌ Clear</button>
     <button>💾 Submit</button>
-</p>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -195,18 +195,18 @@ Let's mark all fields, buttons and labels... by adding a *data-smark* attribute
 {% raw %} <!-- html_source_enhanced {{{ --> {% endraw %}
 {% capture html_source_enhanced -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Name:</label>
     <input type="text" name="name" data-smark>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Email:</label>
     <input type="email" name="email" data-smark>
-</p>
-<p>
+  </p>
+  <p>
     <button data-smark='{"action":"clear"}'>❌ Clear</button>
     <button data-smark='{"action":"export"}'>💾 Submit</button>
-</p>
+  </p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -272,20 +272,20 @@ Let's add more `❌ Clear` buttons to clear each specific field:
 {% raw %} <!-- html_source_enhanced_with_clears {{{ --> {% endraw %}
 {% capture html_source_enhanced_with_clears -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Name:</label>
     <input type="text" name="name" data-smark>
     <button data-smark='{"action":"clear", "context":"name"}'>❌ Clear</button>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Email:</label>
     <input type="email" name="email" data-smark>
     <button data-smark='{"action":"clear", "context":"email"}'>❌ Clear</button>
-</p>
-<p>
+  </p>
+  <p>
     <button data-smark='{"action":"clear"}'>❌ Clear</button>
     <button data-smark='{"action":"export"}'>💾 Submit</button>
-</p>
+  </p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -391,19 +391,19 @@ similar way to the *export* action but in the opposite direction.
 {% raw %} <!-- html_source_enhanced_withImport {{{ --> {% endraw %}
 {% capture html_source_enhanced_withImport -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Name:</label>
     <input type="text" name="name" data-smark>
-</p>
-<p>
+  </p>
+  <p>
     <label data-smark>Email:</label>
     <input type="email" name="email" data-smark>
-</p>
-<p>
+  </p>
+  <p>
     <button data-smark='{"action":"import"}'>📂 Import</button>
     <button data-smark='{"action":"clear"}'>❌ Clear</button>
     <button data-smark='{"action":"export"}'>💾 Submit</button>
-</p>
+  </p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -463,36 +463,36 @@ This path can be either relative (to the current field) or absolute (to the form
 {% raw %} <!-- capture traversing_form_example {{{ --> {% endraw %}
 {% capture traversing_form_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <label data-smark>Id:</label>
     <input data-smark type='text' name='id' />
-</p>
-<fieldset data-smark='{"type":"form","name":"personalData"}'>
-<legend>Personal Data:</legend>
+  </p>
+  <fieldset data-smark='{"type":"form","name":"personalData"}'>
+    <legend>Personal Data:</legend>
     <p>
-        <label data-smark>Name:</label>
-        <input data-smark type='text' name='name' placheolder='Family name'/>
+      <label data-smark>Name:</label>
+      <input data-smark type='text' name='name' placheolder='Family name'/>
     </p>
     <p>
-        <label data-smark>Surname:</label>
-        <input data-smark type='text' name='surname' />
+      <label data-smark>Surname:</label>
+      <input data-smark type='text' name='surname' />
     </p>
     <p>
-        <label data-smark>Address:</label>
-        <input data-smark type='text' name='address' />
+      <label data-smark>Address:</label>
+      <input data-smark type='text' name='address' />
     </p>
-</fieldset>
-<fieldset data-smark='{"type":"form","name":"businessData"}'>
-<legend>Business Data:</legend>
+  </fieldset>
+  <fieldset data-smark='{"type":"form","name":"businessData"}'>
+    <legend>Business Data:</legend>
     <p>
-        <label data-smark>Company Name:</label>
-        <input data-smark type='text' name='name' placheolder='Company Name'/>
+      <label data-smark>Company Name:</label>
+      <input data-smark type='text' name='name' placheolder='Company Name'/>
     </p>
     <p>
-        <label data-smark>Address:</label>
-        <input data-smark type='text' name='address' />
+      <label data-smark>Address:</label>
+      <input data-smark type='text' name='address' />
     </p>
-</fieldset>
+  </fieldset>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -593,17 +593,17 @@ item, it will remove that item from the list. **No wiring code needed!**
 
 {% capture simple_list_example -%}
 <div id="myForm$$">
-<p>
+  <p>
     <strong data-smark='label'>Phones:</strong>
     <ul data-smark='{"name": "phones", "of": "input"}'>
-        <li>
-            <label data-smark>📞 </label>
-            <input placeholder='+34...' type="tel" data-smark>
-            <button data-smark='{"action":"removeItem"}' title='Remove Phone'>❌</button>
-        </li>
+      <li>
+        <label data-smark>📞 </label>
+        <input placeholder='+34...' type="tel" data-smark>
+        <button data-smark='{"action":"removeItem"}' title='Remove Phone'>❌</button>
+      </li>
     </ul>
     <button data-smark='{"action":"addItem","context":"phones"}' title='Add Phone'>➕ </button>
-</p>
+  </p>
 </div>{%
 endcapture %}
 
@@ -670,14 +670,14 @@ example:
 {% raw %} <!-- html_source_simplified {{{ --> {% endraw %}
 {% capture html_source_simplified -%}
 <div id="myForm$$">
-█<p>
-█    <label data-smark>Name:</label>
-█    <input type="text" name="name" data-smark>
-█</p>
-█<p>
-█    <label data-smark>Email:</label>
-█    <input type="email" name="email" data-smark>
-█</p>
+  █<p>
+    █    <label data-smark>Name:</label>
+    █    <input type="text" name="name" data-smark>
+    █</p>
+  █<p>
+    █    <label data-smark>Email:</label>
+    █    <input type="email" name="email" data-smark>
+    █</p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -854,11 +854,11 @@ additional capabilities of the library:
 {% raw %} <!-- capture html_phone_list {{{ --> {% endraw %}
 {% capture html_phone_list -%}
 <div id="myForm$$">
-<div data-smark='{"name":"phones","type":"list","of":"input","max_items":6,"sortable":true}'>
-  <div>
-    <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove this item'><span role='img' aria-label='Remove this item'>➖</span></button>
-    <input data-smark type='tel' placeholder='Telephone'/>
-    <button data-smark='{"action":"addItem","hotkey":"+"}' title='Add new item below'><span role='img' aria-label='Add new item'>➕</span></button>
+  <div data-smark='{"name":"phones","type":"list","of":"input","max_items":6,"sortable":true}'>
+    <div>
+      <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove this item'><span role='img' aria-label='Remove this item'>➖</span></button>
+      <input data-smark type='tel' placeholder='Telephone'/>
+      <button data-smark='{"action":"addItem","hotkey":"+"}' title='Add new item below'><span role='img' aria-label='Add new item'>➕</span></button>
   </div>
 </div>
 <p>
@@ -937,27 +937,27 @@ button[data-hotkey]::before {
 {% raw %} <!-- capture html_schedule_list {{{ --> {% endraw %}
 {% capture html_schedule_list -%}
 <div id="myForm$$">
-<p>
+  <p>
     <button data-smark='{"action":"removeItem","hotkey":"-","context":"surveillance_schedule"}' title='Less intervals'>
-        <span role='img' aria-label='Remove interval'>➖</span>
+      <span role='img' aria-label='Remove interval'>➖</span>
     </button>
     <button data-smark='{"action":"addItem","hotkey":"+","context":"surveillance_schedule"}' title='More intrevals'>
-        <span role='img' aria-label='Add new interval'>➕</span>
+      <span role='img' aria-label='Add new interval'>➕</span>
     </button>
     <strong data-smark='label'>Schedule:</strong>
     <span data-smark='{"type":"list","name":"surveillance_schedule","min_items":0,"max_items":3,"exportEmpties":true}'>
-        <span>
-            <input data-smark type='time' name='start'/>
-            to
-            <input data-smark type='time' name='end'/>
-        </span>
-        <span data-smark='{"role":"empty_list"}'>(Closed)</span>
+      <span>
+        <input data-smark type='time' name='start'/>
+        to
+        <input data-smark type='time' name='end'/>
+      </span>
+      <span data-smark='{"role":"empty_list"}'>(Closed)</span>
     </span>
-</p>
-<p>
+  </p>
+  <p>
     <button data-smark='{"action":"clear"}'>❌ Clear</button>
     <button data-smark='{"action":"export"}'>💾 Submit</button>
-</p>
+  </p>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/index.md b/docs/index.md
index 7b486d14..83fd19ae 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -11,45 +11,45 @@ permalink: /
 {% raw %} <!-- event_planner_html {{{ --> {% endraw %}
 {% capture event_planner_html -%}
 <div id="myForm$$">
-█<div class="ep">
-█    <p>
-█        <label data-smark>📋 Event:</label>
-█        <input data-smark name="title" type="text" placeholder="e.g. Sprint Review">
-█    </p>
-█    <p>
-█        <label data-smark>📅 Date:</label>
-█        <input data-smark name="date" type="date">
-█    </p>
-█    <p>
-█        <label data-smark>⏰ Time:</label>
-█        <input data-smark name="time" type="time">
-█    </p>
-█    <fieldset data-smark='{"type":"form","name":"organizer"}'>
-█        <legend data-smark='label'>👤 Organizer</legend>
-█        <p>
-█            <label data-smark>Name:</label>
-█            <input data-smark name="name" type="text">
-█        </p>
-█        <p>
-█            <label data-smark>Email:</label>
-█            <input data-smark name="email" type="email">
-█        </p>
-█    </fieldset>
-█    <div class="ep-list">
-█        <button data-smark='{"action":"removeItem","context":"attendees","hotkey":"Delete","preserve_non_empty":true}' title='Remove empty slots'>🧹</button>
-█        <button data-smark='{"action":"addItem","context":"attendees","hotkey":"+"}' title='Add attendee'>➕</button>
-█        <strong data-smark='label'>👥 Attendees:</strong>
-█        <ul data-smark='{"type":"list","name":"attendees","of":"input","sortable":true,"exportEmpties":false}'>
-█            <li>
-█                <span data-smark='{"action":"position"}'>N</span>.
-█                <input data-smark type="text" placeholder="Name">
-█                <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove'>➖</button>
-█                <button data-smark='{"action":"addItem","hotkey":"+"}' title='Insert here'>➕</button>
-█            </li>
-█        </ul>
-█    </div>
-█    <p class="ep-hint">💡 Hold <kbd>Ctrl</kbd> to reveal shortcuts</p>
-█</div>
+  █<div class="ep">
+    █    <p>
+      █        <label data-smark>📋 Event:</label>
+      █        <input data-smark name="title" type="text" placeholder="e.g. Sprint Review">
+      █    </p>
+    █    <p>
+      █        <label data-smark>📅 Date:</label>
+      █        <input data-smark name="date" type="date">
+      █    </p>
+    █    <p>
+      █        <label data-smark>⏰ Time:</label>
+      █        <input data-smark name="time" type="time">
+      █    </p>
+    █    <fieldset data-smark='{"type":"form","name":"organizer"}'>
+      █        <legend data-smark='label'>👤 Organizer</legend>
+      █        <p>
+        █            <label data-smark>Name:</label>
+        █            <input data-smark name="name" type="text">
+        █        </p>
+      █        <p>
+        █            <label data-smark>Email:</label>
+        █            <input data-smark name="email" type="email">
+        █        </p>
+      █    </fieldset>
+    █    <div class="ep-list">
+      █        <button data-smark='{"action":"removeItem","context":"attendees","hotkey":"Delete","preserve_non_empty":true}' title='Remove empty slots'>🧹</button>
+      █        <button data-smark='{"action":"addItem","context":"attendees","hotkey":"+"}' title='Add attendee'>➕</button>
+      █        <strong data-smark='label'>👥 Attendees:</strong>
+      █        <ul data-smark='{"type":"list","name":"attendees","of":"input","sortable":true,"exportEmpties":false}'>
+        █            <li>
+          █                <span data-smark='{"action":"position"}'>N</span>.
+          █                <input data-smark type="text" placeholder="Name">
+          █                <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove'>➖</button>
+          █                <button data-smark='{"action":"addItem","hotkey":"+"}' title='Insert here'>➕</button>
+          █            </li>
+        █        </ul>
+      █    </div>
+    █    <p class="ep-hint">💡 Hold <kbd>Ctrl</kbd> to reveal shortcuts</p>
+    █</div>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}

From bd8b6b914e5c41bb5f8f591dd873a8c8a0bf815f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 08:18:01 +0000
Subject: [PATCH 3/5] =?UTF-8?q?docs:=20remove=20=E2=96=88=20trick=20from?=
 =?UTF-8?q?=20direct=20captures;=20fix=20editor=20HTML=20re-indentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Agent-Logs-Url: https://github.com/bitifet/SmarkForm/sessions/c6f170c1-a00c-4692-9e63-1962186ed202

Co-authored-by: bitifet <1643647+bitifet@users.noreply.github.com>
---
 docs/_about/showcase.md                      | 438 +++++++++----------
 docs/_includes/components/sampletabs_ctrl.md |  10 +-
 docs/index.md                                |  78 ++--
 3 files changed, 267 insertions(+), 259 deletions(-)

diff --git a/docs/_about/showcase.md b/docs/_about/showcase.md
index 52371c70..a5596866 100644
--- a/docs/_about/showcase.md
+++ b/docs/_about/showcase.md
@@ -119,53 +119,53 @@ the information is unknown or indifferent.
 
 {% raw %} <!-- basic_form {{{ --> {% endraw %}
 {% capture basic_form_fields -%}
-█<h2>Model details</h2>
-█<p>
-█    <label data-smark>Model Name:</label>
-█    <input type="text" name="model" data-smark />
-█</p>
-█<p>
-█    <label data-smark>Type:</label>
-█    <select name="type" data-smark='{"encoding":"json"}'>
-█        <option value='null'>👇 Please select...</option>
-█        <!-- json encoding allow us return null values -->
-█        <option value='"Car"'>Car</option>
-█        <!-- ...but now we must wrap strings in double quotes -->
-█        <!-- (it also gives us the ability to return objects and arrays) -->
-█        <option>Bicycle</option>
-█        <!-- ...but if we are Ok with inner text as value, we can just omit the value attribute -->
-█        <option>Motorcycle</option>
-█        <option>Van</option>
-█        <option>Pickup</option>
-█        <option>Quad</option>
-█        <option>Truck</option>
-█    </select>
-█</p>
-█<p>
-█    <label data-smark>Detailed description:</label>
-█    <textarea name="longdesc" data-smark ></textarea>
-█</p>
-█<p>
-█    <label data-smark>Seats:</label>
-█    <input type="number" name="seats" min=4 max=9 data-smark />
-█</p>
-█<p>
-█    <label data-smark>Driving Side:</label>
-█    <input type="radio" name="side" value="left" data-smark /> Left
-█    <input type="radio" name="side" value="right" data-smark /> Right
-█</p>
-█<p>
-█    <label data-smark>Color:</label>
-█    <span data-smark='{"type":"color", "name":"color"}'>
-█        <input data-smark>
-█        <button data-smark='{"action":"clear"}' title='Indifferent or unknown' >❌ </button>
-█    </span>
-█</p>{%
+    <h2>Model details</h2>
+    <p>
+        <label data-smark>Model Name:</label>
+        <input type="text" name="model" data-smark />
+    </p>
+    <p>
+        <label data-smark>Type:</label>
+        <select name="type" data-smark='{"encoding":"json"}'>
+            <option value='null'>👇 Please select...</option>
+            <!-- json encoding allow us return null values -->
+            <option value='"Car"'>Car</option>
+            <!-- ...but now we must wrap strings in double quotes -->
+            <!-- (it also gives us the ability to return objects and arrays) -->
+            <option>Bicycle</option>
+            <!-- ...but if we are Ok with inner text as value, we can just omit the value attribute -->
+            <option>Motorcycle</option>
+            <option>Van</option>
+            <option>Pickup</option>
+            <option>Quad</option>
+            <option>Truck</option>
+        </select>
+    </p>
+    <p>
+        <label data-smark>Detailed description:</label>
+        <textarea name="longdesc" data-smark ></textarea>
+    </p>
+    <p>
+        <label data-smark>Seats:</label>
+        <input type="number" name="seats" min=4 max=9 data-smark />
+    </p>
+    <p>
+        <label data-smark>Driving Side:</label>
+        <input type="radio" name="side" value="left" data-smark /> Left
+        <input type="radio" name="side" value="right" data-smark /> Right
+    </p>
+    <p>
+        <label data-smark>Color:</label>
+        <span data-smark='{"type":"color", "name":"color"}'>
+            <input data-smark>
+            <button data-smark='{"action":"clear"}' title='Indifferent or unknown' >❌ </button>
+        </span>
+    </p>{%
 endcapture %}
 
 {% capture basic_form -%}
 <div id="myForm$$">
-{{ basic_form_fields | replace: "█", "    " }}
+{{ basic_form_fields }}
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -274,29 +274,29 @@ the name "safety".
 {% raw %} <!-- nested_forms {{{ --> {% endraw %}
 {% capture nested_forms -%}
 {{ basic_form_fields }}
-█<fieldset data-smark='{"name":"safety","type":"form"}'>
-█    <legend>Safety Features:</legend>
-█    <span>
-█        <label><input type="checkbox" name="airbag" data-smark /> Airbag.</label>
-█    </span>
-█    &nbsp;&nbsp;
-█    <span>
-█        <label><input type="checkbox" name="abs" data-smark /> ABS.</label>
-█    </span>
-█    &nbsp;&nbsp;
-█    <span>
-█        <label><input type="checkbox" name="esp" data-smark /> ESP.</label>
-█    </span>
-█    &nbsp;&nbsp;
-█    <span>
-█        <label><input type="checkbox" name="tc" data-smark />TC.</label>
-█    </span>
-█</fieldset>{%
+    <fieldset data-smark='{"name":"safety","type":"form"}'>
+        <legend>Safety Features:</legend>
+        <span>
+            <label><input type="checkbox" name="airbag" data-smark /> Airbag.</label>
+        </span>
+        &nbsp;&nbsp;
+        <span>
+            <label><input type="checkbox" name="abs" data-smark /> ABS.</label>
+        </span>
+        &nbsp;&nbsp;
+        <span>
+            <label><input type="checkbox" name="esp" data-smark /> ESP.</label>
+        </span>
+        &nbsp;&nbsp;
+        <span>
+            <label><input type="checkbox" name="tc" data-smark />TC.</label>
+        </span>
+    </fieldset>{%
 endcapture %}
 
 {% capture nested_forms_html -%}
 <div id="myForm$$">
-{{ nested_forms | replace: "█", "    " }}
+{{ nested_forms }}
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -404,12 +404,12 @@ that can grow or shrink as needed:
 {% raw %} <!-- simple_list {{{ --> {% endraw %}
 {% capture simple_list -%}
 <div id="myForm$$">
-█<button data-smark='{"action":"removeItem", "context":"phones"}' title='Remove phone number'>➖</button>
-█<button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
-█<strong data-smark="label">Phones:</strong>
-█<div data-smark='{"type":"list", "name": "phones", "of": "input", "exportEmpties": true}'>
-█    <input type="tel" style="display: block">
-█</div>
+  <button data-smark='{"action":"removeItem", "context":"phones"}' title='Remove phone number'>➖</button>
+  <button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
+  <strong data-smark="label">Phones:</strong>
+  <div data-smark='{"type":"list", "name": "phones", "of": "input", "exportEmpties": true}'>
+    <input type="tel" style="display: block">
+  </div>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -521,21 +521,21 @@ in the following example:
 {% raw %} <!-- simple_list_singleton {{{ --> {% endraw %}
 {% capture simple_list_singleton -%}
 <div id="myForm$$">
-█<button data-smark='{"action":"removeItem", "context":"phones", "target":"*", "preserve_non_empty":true}' title='Remove unused fields'>🧹</button>
-█<button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
-█<button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
-█<strong data-smark="label">Phones:</strong>
-█<ul data-smark='{"name": "phones", "of": "input", "sortable":true, "min_items":0, "max_items":5}'>
-█    <li data-smark='{"role": "empty_list"}' class="row">(None)</li>
-█    <li class="row">
-█        <label data-smark>📞 Telephone
-█        <span data-smark='{"action":"position"}'>N</span>
-█        </label>
-█        <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
-█        <input type="tel" data-smark>
-█        <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
-█    </li>
-█</ul>
+  <button data-smark='{"action":"removeItem", "context":"phones", "target":"*", "preserve_non_empty":true}' title='Remove unused fields'>🧹</button>
+  <button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
+  <button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
+  <strong data-smark="label">Phones:</strong>
+  <ul data-smark='{"name": "phones", "of": "input", "sortable":true, "min_items":0, "max_items":5}'>
+    <li data-smark='{"role": "empty_list"}' class="row">(None)</li>
+    <li class="row">
+      <label data-smark>📞 Telephone
+      <span data-smark='{"action":"position"}'>N</span>
+      </label>
+      <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
+      <input type="tel" data-smark>
+      <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
+    </li>
+  </ul>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -917,56 +917,56 @@ But it could look kind of messy if you need to introduce several schedules that
 {% raw %} <!-- schedule_table {{{ --> {% endraw %}
 {% capture schedule_table -%}
 <div id="myForm$$">
-█<div class="schtbl" data-smark='{"type":"form","name":"schedules"}'>
-█    <div class="schedule-row" data-smark='{"type":"list","name":"rcpt_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
-█        <strong data-smark='{"role":"header"}'>🛎️ Reception:</strong>
-█        <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
-█        <span class='time_slot'>
-█            <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
-█            <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
-█        </span>
-█        <span data-smark='{"role":"footer"}'>
-█            <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
-█            <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
-█        </span>
-█    </div>
-█    <div class="schedule-row" data-smark='{"type":"list","name":"bar_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
-█        <strong data-smark='{"role":"header"}'>🍸 Bar</strong>
-█        <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
-█        <span class='time_slot'>
-█            <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
-█            <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
-█        </span>
-█        <span data-smark='{"role":"footer"}'>
-█            <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
-█            <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
-█        </span>
-█    </div>
-█    <div class="schedule-row" data-smark='{"type":"list","name":"restaurant_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
-█        <strong data-smark='{"role":"header"}'>🍽️ Restaurant:</strong>
-█        <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
-█        <span class='time_slot'>
-█            <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
-█            <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
-█        </span>
-█        <span data-smark='{"role":"footer"}'>
-█            <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
-█            <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
-█        </span>
-█    </div>
-█    <div class="schedule-row" data-smark='{"type":"list","name":"pool_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
-█        <strong data-smark='{"role":"header"}'>🏊 Pool:</strong>
-█        <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
-█        <span class='time_slot'>
-█            <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
-█            <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
-█        </span>
-█        <span data-smark='{"role":"footer"}'>
-█            <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
-█            <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
-█        </span>
-█    </div>
-█</div>
+  <div class="schtbl" data-smark='{"type":"form","name":"schedules"}'>
+    <div class="schedule-row" data-smark='{"type":"list","name":"rcpt_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
+      <strong data-smark='{"role":"header"}'>🛎️ Reception:</strong>
+      <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
+      <span class='time_slot'>
+        <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
+        <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
+      </span>
+      <span data-smark='{"role":"footer"}'>
+        <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
+        <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
+      </span>
+    </div>
+    <div class="schedule-row" data-smark='{"type":"list","name":"bar_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
+      <strong data-smark='{"role":"header"}'>🍸 Bar</strong>
+      <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
+      <span class='time_slot'>
+        <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
+        <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
+      </span>
+      <span data-smark='{"role":"footer"}'>
+        <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
+        <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
+      </span>
+    </div>
+    <div class="schedule-row" data-smark='{"type":"list","name":"restaurant_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
+      <strong data-smark='{"role":"header"}'>🍽️ Restaurant:</strong>
+      <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
+      <span class='time_slot'>
+        <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
+        <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
+      </span>
+      <span data-smark='{"role":"footer"}'>
+        <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
+        <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
+      </span>
+    </div>
+    <div class="schedule-row" data-smark='{"type":"list","name":"pool_schedule","min_items":0,"max_items":3,"exportEmpties":false,"value":[{}]}'>
+      <strong data-smark='{"role":"header"}'>🏊 Pool:</strong>
+      <span class='time_slot' data-smark='{"role":"empty_list"}'>(Closed)</span>
+      <span class='time_slot'>
+        <span class='time_from'>From <input class='small' data-smark type='time' name='start'></span>
+        <span class='time_to'>to <input class='small' data-smark type='time' name='end'></span>
+      </span>
+      <span data-smark='{"role":"footer"}'>
+        <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Less intervals'>➖</button>
+        <button data-smark='{"action":"addItem","hotkey":"+"}' title='More intervals'>➕</button>
+      </span>
+    </div>
+  </div>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
@@ -2051,7 +2051,7 @@ In the *JS* tab there is a simple JavaScript code that:
 {% raw %} <!-- nested_forms_with_load_save {{{ --> {% endraw %}
 {% capture nested_forms_with_load_save -%}
 <div id="myForm$$">
-{{ nested_forms | replace: "█", "    " }}
+{{ nested_forms }}
     <div style="display: flex; justify-content: space-evenly; margin-top: 0.5em">
         <button
             data-smark='{"action":"export"}'
@@ -2068,39 +2068,39 @@ endcapture %}
 
 {% raw %} <!-- submit_form_example {{{ --> {% endraw %}
 {% capture submit_form_example -%}
-█<form id="myForm$$"
-    action="mailto:you@example.com?subject=Contact%20Form%20Submission"
-    method="post"
-    enctype="text/plain"
+<form id="myForm$$"
+  action="mailto:you@example.com?subject=Contact%20Form%20Submission"
+  method="post"
+  enctype="text/plain"
 >
-█<p>
-█    <label data-smark>Abstract</label>
-█    <input data-smark type="text"
-█      name="name"
-█      placeholder="Brief summary or description"
-█    />
-█</p>
-█<p>
-█    <label data-smark>Reason for contacting us:</label>
-█    <select data-smark name="reason" required>
-█      <option value="" disabled selected>— Choose —</option>
-█      <option value="question">Question</option>
-█      <option value="support">Support / Technical help</option>
-█      <option value="feedback">Suggestion or feedback</option>
-█      <option value="complaint">Complaint</option>
-█      <option value="praise">Praise / Thank you</option>
-█      <option value="business">Business / Sales inquiry</option>
-█      <option value="other">Something else</option>
-█    </select>
-█</p>
-█<p>
-█    <label data-smark>Message:</label>
-█    <textarea data-smark name="message"></textarea>
-█</p>
-█<p>
-█    <button data-smark='{"action":"submit"}'>📧 Send Email</button>
-█</p>
-█</form>{%
+  <p>
+    <label data-smark>Abstract</label>
+    <input data-smark type="text"
+      name="name"
+      placeholder="Brief summary or description"
+    />
+  </p>
+  <p>
+    <label data-smark>Reason for contacting us:</label>
+    <select data-smark name="reason" required>
+      <option value="" disabled selected>— Choose —</option>
+      <option value="question">Question</option>
+      <option value="support">Support / Technical help</option>
+      <option value="feedback">Suggestion or feedback</option>
+      <option value="complaint">Complaint</option>
+      <option value="praise">Praise / Thank you</option>
+      <option value="business">Business / Sales inquiry</option>
+      <option value="other">Something else</option>
+    </select>
+  </p>
+  <p>
+    <label data-smark>Message:</label>
+    <textarea data-smark name="message"></textarea>
+  </p>
+  <p>
+    <button data-smark='{"action":"submit"}'>📧 Send Email</button>
+  </p>
+</form>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -2276,20 +2276,20 @@ slight modifications:
 {% raw %} <!-- simple_list_autodisable {{{ --> {% endraw %}
 {% capture simple_list_autodisable -%}
 <div id="myForm$$">
-█<button data-smark='{"action":"removeItem", "context":"phones", "target":"*", "preserve_non_empty":true}' title='Remove unused fields'>🧹</button>
-█<button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
-█<button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
-█<strong data-smark="label">Phones:</strong>
-█<ul data-smark='{"name": "phones", "of": "input", "sortable":true, "max_items":5}'>
-█    <li class="row">
-█        <label data-smark>📞 Telephone
-█        <span data-smark='{"action":"position"}'>N</span>
-█        </label>
-█        <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
-█        <input type="tel" data-smark>
-█        <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
-█    </li>
-█</ul>
+  <button data-smark='{"action":"removeItem", "context":"phones", "target":"*", "preserve_non_empty":true}' title='Remove unused fields'>🧹</button>
+  <button data-smark='{"action":"removeItem", "context":"phones", "preserve_non_empty":true}' title='Remove phone number'>➖</button>
+  <button data-smark='{"action":"addItem","context":"phones"}' title='Add phone number'>➕ </button>
+  <strong data-smark="label">Phones:</strong>
+  <ul data-smark='{"name": "phones", "of": "input", "sortable":true, "max_items":5}'>
+    <li class="row">
+      <label data-smark>📞 Telephone
+      <span data-smark='{"action":"position"}'>N</span>
+      </label>
+      <button data-smark='{"action":"removeItem"}' title='Remove this phone number'>➖</button>
+      <input type="tel" data-smark>
+      <button data-smark='{"action":"addItem"}' title='Insert phone number'>➕ </button>
+    </li>
+  </ul>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -3751,45 +3751,45 @@ form, or import your own JSON to pre-populate it.
 {% raw %} <!-- event_planner_html {{{ --> {% endraw %}
 {% capture event_planner_html -%}
 <div id="myForm$$">
-█<div class="ep">
-█    <p>
-█        <label data-smark>📋 Event:</label>
-█        <input data-smark name="title" type="text" placeholder="e.g. Sprint Review">
-█    </p>
-█    <p>
-█        <label data-smark>📅 Date:</label>
-█        <input data-smark name="date" type="date">
-█    </p>
-█    <p>
-█        <label data-smark>⏰ Time:</label>
-█        <input data-smark name="time" type="time">
-█    </p>
-█    <fieldset data-smark='{"type":"form","name":"organizer"}'>
-█        <legend data-smark='label'>👤 Organizer</legend>
-█        <p>
-█            <label data-smark>Name:</label>
-█            <input data-smark name="name" type="text">
-█        </p>
-█        <p>
-█            <label data-smark>Email:</label>
-█            <input data-smark name="email" type="email">
-█        </p>
-█    </fieldset>
-█    <div class="ep-list">
-█        <button data-smark='{"action":"removeItem","context":"attendees","hotkey":"Delete","preserve_non_empty":true}' title='Remove empty slots'>🧹</button>
-█        <button data-smark='{"action":"addItem","context":"attendees","hotkey":"+"}' title='Add attendee'>➕</button>
-█        <strong data-smark='label'>👥 Attendees:</strong>
-█        <ul data-smark='{"type":"list","name":"attendees","of":"input","sortable":true,"exportEmpties":false}'>
-█            <li>
-█                <span data-smark='{"action":"position"}'>N</span>.
-█                <input data-smark type="text" placeholder="Name">
-█                <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove'>➖</button>
-█                <button data-smark='{"action":"addItem","hotkey":"+"}' title='Insert here'>➕</button>
-█            </li>
-█        </ul>
-█    </div>
-█    <p class="ep-hint">💡 Hold <kbd>Ctrl</kbd> to reveal shortcuts</p>
-█</div>
+  <div class="ep">
+    <p>
+      <label data-smark>📋 Event:</label>
+      <input data-smark name="title" type="text" placeholder="e.g. Sprint Review">
+    </p>
+    <p>
+      <label data-smark>📅 Date:</label>
+      <input data-smark name="date" type="date">
+    </p>
+    <p>
+      <label data-smark>⏰ Time:</label>
+      <input data-smark name="time" type="time">
+    </p>
+    <fieldset data-smark='{"type":"form","name":"organizer"}'>
+      <legend data-smark='label'>👤 Organizer</legend>
+      <p>
+        <label data-smark>Name:</label>
+        <input data-smark name="name" type="text">
+      </p>
+      <p>
+        <label data-smark>Email:</label>
+        <input data-smark name="email" type="email">
+      </p>
+    </fieldset>
+    <div class="ep-list">
+      <button data-smark='{"action":"removeItem","context":"attendees","hotkey":"Delete","preserve_non_empty":true}' title='Remove empty slots'>🧹</button>
+      <button data-smark='{"action":"addItem","context":"attendees","hotkey":"+"}' title='Add attendee'>➕</button>
+      <strong data-smark='label'>👥 Attendees:</strong>
+      <ul data-smark='{"type":"list","name":"attendees","of":"input","sortable":true,"exportEmpties":false}'>
+        <li>
+          <span data-smark='{"action":"position"}'>N</span>.
+          <input data-smark type="text" placeholder="Name">
+          <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove'>➖</button>
+          <button data-smark='{"action":"addItem","hotkey":"+"}' title='Insert here'>➕</button>
+        </li>
+      </ul>
+    </div>
+    <p class="ep-hint">💡 Hold <kbd>Ctrl</kbd> to reveal shortcuts</p>
+  </div>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_includes/components/sampletabs_ctrl.md b/docs/_includes/components/sampletabs_ctrl.md
index e54f2ce1..b3fa595c 100644
--- a/docs/_includes/components/sampletabs_ctrl.md
+++ b/docs/_includes/components/sampletabs_ctrl.md
@@ -78,12 +78,20 @@ function smarkformExtractWrapperAndInner(htmlSrc) {
    The inner content is placed in a "demo" subform, with Export/Import/Reset/Clear buttons
    and a JSON editor textarea — all implemented as SmarkForm components.
    Sibling <template> elements are preserved after the outer container, NOT inside the demo subform. */
+function smarkformReindentHtml(content, spaces) {
+    /* Prepend `spaces` additional spaces to every non-blank line. */
+    var pad = '';
+    for (var i = 0; i < spaces; i++) pad += ' ';
+    return content.split('\n').map(function(line) {
+        return line.trim() ? pad + line : line;
+    }).join('\n');
+}
 function smarkformBuildEditorHtml(htmlSrc, hasDemoValue) {
     var p = smarkformExtractWrapperAndInner(htmlSrc);
     return p.openTag + '\n'
         + '    <div style="display: flex; flex-direction: column; align-items: stretch; gap: 1em">\n'
         + '        <div data-smark=\'{"name":"demo"}\' style="flex-grow: 1">\n'
-        + p.inner
+        + smarkformReindentHtml(p.inner, 8)
         + '        </div>\n'
         + '        <div style="display: flex; justify-content: space-evenly">\n'
         + '<span><button\n'
diff --git a/docs/index.md b/docs/index.md
index 83fd19ae..41c29a41 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -11,45 +11,45 @@ permalink: /
 {% raw %} <!-- event_planner_html {{{ --> {% endraw %}
 {% capture event_planner_html -%}
 <div id="myForm$$">
-  █<div class="ep">
-    █    <p>
-      █        <label data-smark>📋 Event:</label>
-      █        <input data-smark name="title" type="text" placeholder="e.g. Sprint Review">
-      █    </p>
-    █    <p>
-      █        <label data-smark>📅 Date:</label>
-      █        <input data-smark name="date" type="date">
-      █    </p>
-    █    <p>
-      █        <label data-smark>⏰ Time:</label>
-      █        <input data-smark name="time" type="time">
-      █    </p>
-    █    <fieldset data-smark='{"type":"form","name":"organizer"}'>
-      █        <legend data-smark='label'>👤 Organizer</legend>
-      █        <p>
-        █            <label data-smark>Name:</label>
-        █            <input data-smark name="name" type="text">
-        █        </p>
-      █        <p>
-        █            <label data-smark>Email:</label>
-        █            <input data-smark name="email" type="email">
-        █        </p>
-      █    </fieldset>
-    █    <div class="ep-list">
-      █        <button data-smark='{"action":"removeItem","context":"attendees","hotkey":"Delete","preserve_non_empty":true}' title='Remove empty slots'>🧹</button>
-      █        <button data-smark='{"action":"addItem","context":"attendees","hotkey":"+"}' title='Add attendee'>➕</button>
-      █        <strong data-smark='label'>👥 Attendees:</strong>
-      █        <ul data-smark='{"type":"list","name":"attendees","of":"input","sortable":true,"exportEmpties":false}'>
-        █            <li>
-          █                <span data-smark='{"action":"position"}'>N</span>.
-          █                <input data-smark type="text" placeholder="Name">
-          █                <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove'>➖</button>
-          █                <button data-smark='{"action":"addItem","hotkey":"+"}' title='Insert here'>➕</button>
-          █            </li>
-        █        </ul>
-      █    </div>
-    █    <p class="ep-hint">💡 Hold <kbd>Ctrl</kbd> to reveal shortcuts</p>
-    █</div>
+  <div class="ep">
+    <p>
+      <label data-smark>📋 Event:</label>
+      <input data-smark name="title" type="text" placeholder="e.g. Sprint Review">
+    </p>
+    <p>
+      <label data-smark>📅 Date:</label>
+      <input data-smark name="date" type="date">
+    </p>
+    <p>
+      <label data-smark>⏰ Time:</label>
+      <input data-smark name="time" type="time">
+    </p>
+    <fieldset data-smark='{"type":"form","name":"organizer"}'>
+      <legend data-smark='label'>👤 Organizer</legend>
+      <p>
+        <label data-smark>Name:</label>
+        <input data-smark name="name" type="text">
+      </p>
+      <p>
+        <label data-smark>Email:</label>
+        <input data-smark name="email" type="email">
+      </p>
+    </fieldset>
+    <div class="ep-list">
+      <button data-smark='{"action":"removeItem","context":"attendees","hotkey":"Delete","preserve_non_empty":true}' title='Remove empty slots'>🧹</button>
+      <button data-smark='{"action":"addItem","context":"attendees","hotkey":"+"}' title='Add attendee'>➕</button>
+      <strong data-smark='label'>👥 Attendees:</strong>
+      <ul data-smark='{"type":"list","name":"attendees","of":"input","sortable":true,"exportEmpties":false}'>
+        <li>
+          <span data-smark='{"action":"position"}'>N</span>.
+          <input data-smark type="text" placeholder="Name">
+          <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove'>➖</button>
+          <button data-smark='{"action":"addItem","hotkey":"+"}' title='Insert here'>➕</button>
+        </li>
+      </ul>
+    </div>
+    <p class="ep-hint">💡 Hold <kbd>Ctrl</kbd> to reveal shortcuts</p>
+  </div>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}

From f1b6575626bde699d408dfe501bb288d477f5272 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 09:58:29 +0000
Subject: [PATCH 4/5] docs: fix remaining col-0 indentation issues in 5 doc
 files

Agent-Logs-Url: https://github.com/bitifet/SmarkForm/sessions/4af994b4-c550-4cf3-b1d3-2e9c5b0e3295

Co-authored-by: bitifet <1643647+bitifet@users.noreply.github.com>
---
 docs/_about/showcase.md                    | 41 +++++++++++-----------
 docs/_advanced_concepts/form_traversing.md |  8 ++---
 docs/_advanced_concepts/mixin_types.md     |  2 +-
 docs/_getting_started/core_concepts.md     |  6 ++--
 docs/_getting_started/quick_start.md       | 10 +++---
 5 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/docs/_about/showcase.md b/docs/_about/showcase.md
index a5596866..1685566d 100644
--- a/docs/_about/showcase.md
+++ b/docs/_about/showcase.md
@@ -1224,7 +1224,8 @@ as a **direct sibling** of the template root:
 {% raw %} <!-- schedule_mixin_html {{{ --> {% endraw %}
 {% capture schedule_mixin_html -%}
 <div id="myForm$$">
-{{ schedule_row_form | replace: "█", "" }}</div>
+{{ schedule_row_form | replace: "█", "  " }}
+</div>
 {{ schedule_row_tpl }}{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -1317,8 +1318,8 @@ every list item and so forth to any depth.
 {% raw %} <!-- nested_schedule_table {{{ --> {% endraw %}
 {% capture nested_schedule_table -%}
 <div id="myForm$$">
-<h2 data-smark="label">🗓️ Periods:</h2>
-<div data-smark='{"type":"list","name":"periods","sortable":true,"exportEmpties":true}'>
+  <h2 data-smark="label">🗓️ Periods:</h2>
+  <div data-smark='{"type":"list","name":"periods","sortable":true,"exportEmpties":true}'>
     <fieldset style='margin-top: 1em'>
         <legend>Period
             <span data-smark='{"action":"position"}'>N</span>
@@ -1336,11 +1337,11 @@ every list item and so forth to any depth.
         </p>
 {{ schedule_row_form | replace: "█", "        " }}
     </fieldset>
-</div>
-<button
+  </div>
+  <button
     data-smark='{"action":"addItem","context":"periods","hotkey":"+"}'
     style="float: right; margin-top: 1em"
->➕ Add Period</button>
+  >➕ Add Period</button>
 </div>
 {{ schedule_row_tpl }}
 {%- endcapture %}
@@ -1463,8 +1464,8 @@ usability by default:
 {% raw %} <!-- nested_schedule_table_duplicable {{{ --> {% endraw %}
 {% capture nested_schedule_table_duplicable -%}
 <div id="myForm$$">
-<h2>🗓️ Periods:</h2>
-<div data-smark='{"type":"list","name":"periods","sortable":true,"exportEmpties":true,"min_items":0,"value":[{}]}'>
+  <h2>🗓️ Periods:</h2>
+  <div data-smark='{"type":"list","name":"periods","sortable":true,"exportEmpties":true,"min_items":0,"value":[{}]}'>
     <fieldset data-smark='{"role": "empty_list"}' style='text-align: center'>🔒 Out of Service</fieldset>
     <fieldset style='margin-top: 1em'>
         <legend>Period
@@ -1488,11 +1489,11 @@ usability by default:
         </p>
 {{ schedule_row_form | replace: "█", "        " }}
     </fieldset>
-</div>
-<button
+  </div>
+  <button
     data-smark='{"action":"addItem","context":"periods","hotkey":"+"}'
     style="float: right; margin-top: 1em"
->➕ Add Period</button>
+  >➕ Add Period</button>
 </div>
 {{ schedule_row_tpl }}
 {%- endcapture %}
@@ -1908,15 +1909,15 @@ runs on the final data — whether the item is brand new or duplicated.
 {% raw %} <!-- period_mixin_duplicable {{{ --> {% endraw %}
 {% capture period_mixin_duplicable -%}
 <div id="myForm$$">
-<h2>🗓️ Periods:</h2>
-<div data-smark='{"type":"list","name":"periods","sortable":true,"exportEmpties":true,"min_items":0,"value":[{}]}'>
-  <fieldset data-smark='{"role":"empty_list"}' style='text-align: center'>🔒 Out of Service</fieldset>
-  <div data-smark='{"type":"#periodItem"}'></div>
-</div>
-<button
-  data-smark='{"action":"addItem","context":"periods","hotkey":"+"}'
-  style="float: right; margin-top: 1em"
->➕ Add Period</button>
+  <h2>🗓️ Periods:</h2>
+  <div data-smark='{"type":"list","name":"periods","sortable":true,"exportEmpties":true,"min_items":0,"value":[{}]}'>
+    <fieldset data-smark='{"role":"empty_list"}' style='text-align: center'>🔒 Out of Service</fieldset>
+    <div data-smark='{"type":"#periodItem"}'></div>
+  </div>
+  <button
+    data-smark='{"action":"addItem","context":"periods","hotkey":"+"}'
+    style="float: right; margin-top: 1em"
+  >➕ Add Period</button>
 </div>
 {{ period_item_tpl }}
 {{ schedule_row_tpl }}
diff --git a/docs/_advanced_concepts/form_traversing.md b/docs/_advanced_concepts/form_traversing.md
index 4bda31eb..6e78e3ac 100644
--- a/docs/_advanced_concepts/form_traversing.md
+++ b/docs/_advanced_concepts/form_traversing.md
@@ -433,8 +433,8 @@ async function validateSequentially(list) {
       </div>
       <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
     </div>
-</div>
-<button data-smark='{"action":"addItem","context":"records"}'>➕ Add</button>
+  </div>
+  <button data-smark='{"action":"addItem","context":"records"}'>➕ Add</button>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
@@ -515,8 +515,8 @@ This example demonstrates a practical implementation of sibling navigation for d
         <button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
         </div>
     </fieldset>
-</div>
-<button data-smark='{"action":"addItem","context":"contacts"}'>➕ Add Contact</button>
+  </div>
+  <button data-smark='{"action":"addItem","context":"contacts"}'>➕ Add Contact</button>
 </div>{%- endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
 
diff --git a/docs/_advanced_concepts/mixin_types.md b/docs/_advanced_concepts/mixin_types.md
index f3d459a3..0c9440be 100644
--- a/docs/_advanced_concepts/mixin_types.md
+++ b/docs/_advanced_concepts/mixin_types.md
@@ -768,7 +768,7 @@ uses `id="nameLabel"` to mark the slot, and each placeholder supplies its own
     <div data-smark='{"type":"#personEntry","name":"reviewer"}'>
         <span data-for="nameLabel">Reviewer name</span>
     </div>
-</fieldset>
+  </fieldset>
 </div>
 <!-- Mixin template — nameLabel slot is the default text for the label -->
 <template id="personEntry">
diff --git a/docs/_getting_started/core_concepts.md b/docs/_getting_started/core_concepts.md
index 7c08dc6f..663d1f07 100644
--- a/docs/_getting_started/core_concepts.md
+++ b/docs/_getting_started/core_concepts.md
@@ -163,15 +163,15 @@ seamlessly handle either the whole form or individual fields.
         <td><button data-smark='{"action":"clear"}'>❌ Clear</button></td>
       </tr>
     </table>
-</div>
-<div style="display: flex; flex-direction:column; align-items:left; gap: 1em; width: 100%">
+  </div>
+  <div style="display: flex; flex-direction:column; align-items:left; gap: 1em; width: 100%">
     <textarea
         placeholder="JSON data viewer / editor"
         data-smark='{"name":"editor","type":"input"}'
         style="resize: vertical; align-self: stretch; min-height: 8em; flex-grow: 1;"
     >
     </textarea>
-</div>
+  </div>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}
diff --git a/docs/_getting_started/quick_start.md b/docs/_getting_started/quick_start.md
index 1fac7a22..d69e7faf 100644
--- a/docs/_getting_started/quick_start.md
+++ b/docs/_getting_started/quick_start.md
@@ -859,12 +859,12 @@ additional capabilities of the library:
       <button data-smark='{"action":"removeItem","hotkey":"-"}' title='Remove this item'><span role='img' aria-label='Remove this item'>➖</span></button>
       <input data-smark type='tel' placeholder='Telephone'/>
       <button data-smark='{"action":"addItem","hotkey":"+"}' title='Add new item below'><span role='img' aria-label='Add new item'>➕</span></button>
+    </div>
   </div>
-</div>
-<p>
-  <button data-smark='{"action":"clear"}'>❌ Clear</button>
-  <button data-smark='{"action":"export"}'>💾 Submit</button>
-</p>
+  <p>
+    <button data-smark='{"action":"clear"}'>❌ Clear</button>
+    <button data-smark='{"action":"export"}'>💾 Submit</button>
+  </p>
 </div>{%
 endcapture %}
 {% raw %} <!-- }}} --> {% endraw %}

From 902b644cd25a2a0dd27c289f697b698b69d65fb7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 11:52:26 +0000
Subject: [PATCH 5/5] Fix Ace editor indentation: preserve spaces through HTML
 compressor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: Just-The-Docs theme uses vendor/compress.html (HTML compressor)
which applies `split: " " | join: " "` to ALL content outside <pre> blocks,
including <script> tag content. This collapsed every sequence of 2+ spaces
to 1 space in the JSON data embedded in the page (e.g. "  <p>" → " <p>").

Fix: Add `replace: "  ", "\u0020\u0020"` to all JSON fields before the
existing `replace: "<", "\u003c"` filter. The string `"\u0020\u0020"` in
Liquid is the literal 12 characters \u0020\u0020 (JSON Unicode escapes for
spaces). The compressor does not collapse these (no actual space chars),
while JSON.parse correctly decodes \u0020 back to a space character.

This ensures all indentation levels (2, 4, 6, 8 spaces) are faithfully
preserved through the Jekyll → HTML compressor → browser → Ace editor
pipeline. The HTML code tab in edit mode now shows correct indentation.

Agent-Logs-Url: https://github.com/bitifet/SmarkForm/sessions/84a2023b-3bc6-49a9-ab12-72f094263676

Co-authored-by: bitifet <1643647+bitifet@users.noreply.github.com>
---
 docs/_includes/components/sampletabs_tpl.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/_includes/components/sampletabs_tpl.md b/docs/_includes/components/sampletabs_tpl.md
index 8654ead5..b2bb3ffd 100644
--- a/docs/_includes/components/sampletabs_tpl.md
+++ b/docs/_includes/components/sampletabs_tpl.md
@@ -280,15 +280,15 @@ endif %}{% if jsHidden != '-'
   </div>
   <script type="application/json" class="smarkform-src-data">
   {
-    "html": {{ preview_source | jsonify | replace: "<", "\u003c" }},
-    "htmlSource": {{ partial_htmlSource | jsonify | replace: "<", "\u003c" }},
-    "css": {{ cssSource | jsonify | replace: "<", "\u003c" }},
-    "cssHidden": {{ cssHidden | jsonify | replace: "<", "\u003c" }},
-    "jsHead": {{ jsHead | jsonify | replace: "<", "\u003c" }},
-    "jsHeadDisplay": {{ jsHead_display | jsonify | replace: "<", "\u003c" }},
-    "jsHeadDisplayWithEditor": {{ jsHead_display_with_editor | jsonify | replace: "<", "\u003c" }},
-    "jsHidden": {{ jsHidden | jsonify | replace: "<", "\u003c" }},
-    "jsSource": {{ jsSource | jsonify | replace: "<", "\u003c" }},
+    "html": {{ preview_source | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "htmlSource": {{ partial_htmlSource | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "css": {{ cssSource | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "cssHidden": {{ cssHidden | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "jsHead": {{ jsHead | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "jsHeadDisplay": {{ jsHead_display | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "jsHeadDisplayWithEditor": {{ jsHead_display_with_editor | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "jsHidden": {{ jsHidden | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
+    "jsSource": {{ jsSource | jsonify | replace: "  ", "\u0020\u0020" | replace: "<", "\u003c" }},
     "demoValue": {{ demoValue | jsonify }},
     "showEditor": {{ showEditor | jsonify }},
     "height": {{ include.height | plus: 0 }},