millas 0.2.12-beta-1 → 0.2.13-beta

package/src/admin/views/partials/form-widget.njk

@@ -0,0 +1,297 @@
+{#
+  partials/form-widget.njk
+  All widget HTML — one block per field type.
+  Expects in scope: field, val, hasError, isEdit
+#}
+
+{# ── Select ── #}
+{% if field.type == 'select' and field.options %}
+<select id="field-{{ field.name }}" name="{{ field.name }}"
+  class="form-control{% if hasError %} error{% endif %}"
+  {% if not field.nullable %}data-required="true"{% endif %}>
+  <option value="">— Select —</option>
+  {% for opt in field.options %}
+  {% set optVal   = opt.value if opt.value is defined else opt %}
+  {% set optLabel = opt.label if opt.label is defined else opt %}
+  <option value="{{ optVal }}" {% if val == optVal %}selected{% endif %}>{{ optLabel }}</option>
+  {% endfor %}
+</select>
+
+{# ── FK — async paginated dropdown ── #}
+{% elif field.type == 'fk' %}
+<div class="fk-widget" id="fkw-{{ field.name }}"
+  data-name="{{ field.name }}"
+  data-resource="{{ field.fkResource }}"
+  data-nullable="{{ 'true' if field.nullable else 'false' }}"
+  data-required="{{ 'true' if not field.nullable else 'false' }}"
+  data-current-id="{{ val }}"
+  data-current-label=""
+  data-fk-field="{{ field.name }}">
+  <input type="hidden"
+    id="field-{{ field.name }}"
+    name="{{ field.name }}"
+    value="{{ val }}"
+    {% if not field.nullable %}data-required="true"{% endif %}>
+  <button type="button"
+    class="fk-trigger form-control{% if hasError %} error{% endif %}"
+    id="fktrig-{{ field.name }}"
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    aria-controls="fkpanel-{{ field.name }}">
+    <span class="fk-trigger-label">
+      {% if val %}
+        <span class="fk-id-chip">#{{ val }}</span>
+        <span class="fk-loading-label">Loading…</span>
+      {% else %}
+        <span class="fk-placeholder">— Select —</span>
+      {% endif %}
+    </span>
+    <svg class="fk-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+  </button>
+  <div class="fk-panel" id="fkpanel-{{ field.name }}" role="listbox" style="display:none">
+    <div class="fk-search-wrap">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      <input type="text" class="fk-search" id="fksearch-{{ field.name }}"
+        placeholder="Search…" autocomplete="off" spellcheck="false">
+      <button type="button" class="fk-search-clear" hidden aria-label="Clear search">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="fk-list" id="fklist-{{ field.name }}" role="listbox">
+      <div class="fk-spinner-row">
+        <svg class="fk-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>
+        Loading…
+      </div>
+    </div>
+    <div class="fk-footer" id="fkfoot-{{ field.name }}" hidden>
+      <span class="fk-count" id="fkcount-{{ field.name }}"></span>
+      <div class="fk-pages">
+        <button type="button" class="fk-page-btn" id="fkprev-{{ field.name }}" aria-label="Previous page" disabled>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <span class="fk-page-info" id="fkpageinfo-{{ field.name }}"></span>
+        <button type="button" class="fk-page-btn" id="fknext-{{ field.name }}" aria-label="Next page">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+      </div>
+    </div>
+    {% if field.nullable %}
+    <div class="fk-clear-row">
+      <button type="button" class="fk-clear-btn" id="fkclear-{{ field.name }}">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        Clear selection
+      </button>
+    </div>
+    {% endif %}
+  </div>
+</div>
+
+{# ── M2M — dual list ── #}
+{% elif field.type == 'm2m' %}
+<div class="m2m-widget" id="m2m-{{ field.name }}">
+  <div style="display:flex;gap:8px;align-items:flex-start">
+    <div style="flex:1">
+      <div class="form-label" style="font-size:11px;color:var(--text-soft)">Available</div>
+      <select class="form-control" size="6" id="m2m-available-{{ field.name }}" style="width:100%" multiple></select>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:6px;padding-top:24px">
+      <button type="button" class="btn btn-ghost btn-sm" onclick="m2mMove('{{ field.name }}','available','chosen')">→</button>
+      <button type="button" class="btn btn-ghost btn-sm" onclick="m2mMove('{{ field.name }}','chosen','available')">←</button>
+    </div>
+    <div style="flex:1">
+      <div class="form-label" style="font-size:11px;color:var(--text-soft)">Chosen</div>
+      <select class="form-control" name="{{ field.name }}[]" size="6"
+        id="m2m-chosen-{{ field.name }}" style="width:100%" multiple>
+        {% if val %}{% for v in val %}<option value="{{ v }}" selected>{{ v }}</option>{% endfor %}{% endif %}
+      </select>
+    </div>
+  </div>
+</div>
+
+{# ── Boolean — toggle switch ── #}
+{% elif field.type == 'checkbox' %}
+<div class="toggle-field">
+  <label class="toggle-wrap" for="field-{{ field.name }}">
+    <input type="checkbox"
+      id="field-{{ field.name }}"
+      name="{{ field.name }}"
+      class="toggle-input"
+      value="1"{{ ' checked' if val else '' }}>
+    <span class="toggle-track"><span class="toggle-thumb"></span></span>
+    <span class="toggle-label">{{ field.label }}</span>
+  </label>
+  {% if field.help %}
+  <div class="form-help" style="margin-top:4px;margin-left:52px">{{ field.help }}</div>
+  {% endif %}
+</div>
+
+{# ── Textarea ── #}
+{% elif field.type == 'textarea' %}
+<textarea id="field-{{ field.name }}" name="{{ field.name }}"
+  class="form-control{% if hasError %} error{% endif %}"
+  placeholder="{{ field.placeholder or '' }}"
+  {% if not field.nullable %}data-required="true"{% endif %}
+  rows="4">{{ val }}</textarea>
+
+{# ── JSON — dialog editor ── #}
+{% elif field.type == 'json' %}
+{% include "partials/json-editor.njk" %}
+
+{# ── Richtext ── #}
+{% elif field.type == 'richtext' %}
+<div class="richtext-wrap">
+  <div class="richtext-toolbar">
+    <button type="button" onclick="rtCmd('bold')" title="Bold"><b>B</b></button>
+    <button type="button" onclick="rtCmd('italic')" title="Italic"><i>I</i></button>
+    <button type="button" onclick="rtCmd('underline')" title="Underline"><u>U</u></button>
+    <span class="rt-sep"></span>
+    <button type="button" onclick="rtCmd('insertUnorderedList')" title="Bullet list">≡</button>
+    <button type="button" onclick="rtCmd('insertOrderedList')" title="Numbered list">1.</button>
+    <span class="rt-sep"></span>
+    <button type="button" onclick="rtLink()" title="Link">🔗</button>
+  </div>
+  <div id="rt-{{ field.name }}" class="richtext-editor form-control{% if hasError %} error{% endif %}"
+    contenteditable="true"
+    style="min-height:120px;height:auto">{{ val | safe }}</div>
+  <input type="hidden" id="field-{{ field.name }}" name="{{ field.name }}" value="{{ val }}">
+</div>
+
+{# ── Password ── #}
+{% elif field.type == 'password' %}
+<div style="position:relative">
+  <input type="password" id="field-{{ field.name }}" name="{{ field.name }}"
+    class="form-control{% if hasError %} error{% endif %}"
+    placeholder="{{ 'Leave blank to keep current' if isEdit else '' }}"
+    {% if not field.nullable and not isEdit %}data-required="true"{% endif %}
+    style="padding-right:40px">
+  <button type="button" class="pw-toggle"
+    onclick="this.previousElementSibling.type=this.previousElementSibling.type==='password'?'text':'password'">
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+    </svg>
+  </button>
+</div>
+
+{# ── Email ── #}
+{% elif field.type == 'email' %}
+<input type="email" id="field-{{ field.name }}" name="{{ field.name }}"
+  value="{{ val }}"
+  class="form-control{% if hasError %} error{% endif %}"
+  placeholder="{{ field.placeholder or 'name@example.com' }}"
+  data-validate="email"
+  {% if not field.nullable %}data-required="true"{% endif %}>
+
+{# ── URL ── #}
+{% elif field.type == 'url' %}
+<input type="url" id="field-{{ field.name }}" name="{{ field.name }}"
+  value="{{ val }}"
+  class="form-control{% if hasError %} error{% endif %}"
+  placeholder="{{ field.placeholder or 'https://' }}"
+  data-validate="url"
+  {% if not field.nullable %}data-required="true"{% endif %}>
+
+{# ── Phone ── #}
+{% elif field.type == 'phone' %}
+<input type="tel" id="field-{{ field.name }}" name="{{ field.name }}"
+  value="{{ val }}"
+  class="form-control{% if hasError %} error{% endif %}"
+  placeholder="{{ field.placeholder or '+1 555 000 0000' }}"
+  {% if not field.nullable %}data-required="true"{% endif %}>
+
+{# ── Color ── #}
+{% elif field.type == 'color' %}
+<div class="flex items-center gap-2">
+  <input type="color" id="field-{{ field.name }}-picker"
+    value="{{ val or '#000000' }}"
+    style="width:40px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:2px"
+    oninput="document.getElementById('field-{{ field.name }}').value=this.value">
+  <input type="text" id="field-{{ field.name }}" name="{{ field.name }}"
+    value="{{ val }}"
+    class="form-control{% if hasError %} error{% endif %}"
+    placeholder="#000000"
+    style="width:120px"
+    oninput="if(/^#[0-9a-fA-F]{6}$/.test(this.value))document.getElementById('field-{{ field.name }}-picker').value=this.value">
+</div>
+
+{# ── Number ── #}
+{% elif field.type == 'number' %}
+<input type="number" id="field-{{ field.name }}" name="{{ field.name }}"
+  value="{{ val }}"
+  class="form-control{% if hasError %} error{% endif %}"
+  placeholder="{{ field.placeholder or '0' }}"
+  {% if field.min is not none %}min="{{ field.min }}" data-min="{{ field.min }}"{% endif %}
+  {% if field.max is not none %}max="{{ field.max }}" data-max="{{ field.max }}"{% endif %}
+  {% if not field.nullable %}data-required="true"{% endif %}>
+
+{# ── Date — custom picker ── #}
+{% elif field.type == 'date' %}
+<div class="dp-wrap">
+  {# Hidden input carries the real ISO value on form submit #}
+  <input type="hidden" id="field-{{ field.name }}" name="{{ field.name }}"
+    value="{{ val }}"
+    {% if not field.nullable %}data-required="true"{% endif %}>
+  {# Visible trigger — readonly, opens the calendar via DatePicker #}
+  <input type="text"
+    class="form-control dp-trigger{% if hasError %} error{% endif %}"
+    id="dpt-{{ field.name }}"
+    placeholder="Select date…"
+    autocomplete="off"
+    data-target="field-{{ field.name }}"
+    data-mode="date">
+  <span class="dp-icon">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
+    </svg>
+  </span>
+</div>
+
+{# ── Datetime — custom picker with time ── #}
+{% elif field.type == 'datetime' or field.type == 'datetime-local' %}
+<div class="dp-wrap">
+  <input type="hidden" id="field-{{ field.name }}" name="{{ field.name }}"
+    value="{{ val }}"
+    {% if not field.nullable %}data-required="true"{% endif %}>
+  <input type="text"
+    class="form-control dp-trigger{% if hasError %} error{% endif %}"
+    id="dpt-{{ field.name }}"
+    placeholder="Select date and time…"
+    autocomplete="off"
+    data-target="field-{{ field.name }}"
+    data-mode="datetime">
+  <span class="dp-icon">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
+    </svg>
+  </span>
+</div>
+
+{# ── Badge — display only, no input ── #}
+{% elif field.type == 'badge' %}
+{% set _bc = field.colors[val] if (field.colors and val and field.colors[val]) else 'gray' %}
+<div class="readonly-value">
+  {% if val %}<span class="badge badge-{{ _bc }}">{{ val }}</span>{% else %}<span class="cell-muted">—</span>{% endif %}
+</div>
+
+{# ── Image — display URL as text + preview ── #}
+{% elif field.type == 'image' %}
+<div>
+  {% if val %}
+  <img src="{{ val }}" style="width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);display:block;margin-bottom:8px" alt="">
+  {% endif %}
+  <input type="text" id="field-{{ field.name }}" name="{{ field.name }}"
+    value="{{ val }}"
+    class="form-control{% if hasError %} error{% endif %}"
+    placeholder="https://example.com/image.jpg"
+    {% if not field.nullable %}data-required="true"{% endif %}>
+</div>
+
+{# ── Default text ── #}
+{% else %}
+<input type="text" id="field-{{ field.name }}" name="{{ field.name }}"
+  value="{{ val }}"
+  class="form-control{% if hasError %} error{% endif %}"
+  placeholder="{{ field.placeholder or '' }}"
+  {% if field.max is not none %}maxlength="{{ field.max }}"{% endif %}
+  {% if not field.nullable %}data-required="true"{% endif %}
+  {% if field.prepopulate %}data-prepopulate="{{ field.prepopulate }}"{% endif %}>
+{% endif %}

package/src/admin/views/partials/icons.njk

@@ -0,0 +1,64 @@
+{# ══════════════════════════════════════
+   SVG ICON SPRITE
+   ══════════════════════════════════════
+   Hidden SVG sprite — all icons referenced via <use href="#ic-name"/>.
+   To add a new icon: add a <symbol> here with id="ic-<name>".
+   All paths use stroke="currentColor" — colour is set via CSS.
+   ViewBox is always "0 0 24 24". Stroke-width 2, linecap/linejoin round.
+#}
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
+
+  {# ── Navigation & Layout ── #}
+  <symbol id="ic-grid"         viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></symbol>
+  <symbol id="ic-list"         viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></symbol>
+  <symbol id="ic-home"         viewBox="0 0 24 24"><path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z"/><path d="M9 21V12h6v9"/></symbol>
+  <symbol id="ic-chevron-left" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></symbol>
+  <symbol id="ic-chevron-right"viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></symbol>
+  <symbol id="ic-chevron-down" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></symbol>
+  <symbol id="ic-arrow-left"   viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></symbol>
+
+  {# ── Data & Content ── #}
+  <symbol id="ic-table"        viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></symbol>
+  <symbol id="ic-database"     viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></symbol>
+  <symbol id="ic-file"         viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></symbol>
+  <symbol id="ic-tag"          viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><circle cx="7" cy="7" r="1.5" fill="currentColor" stroke="none"/></symbol>
+  <symbol id="ic-save"         viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></symbol>
+  <symbol id="ic-activity"     viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></symbol>
+
+  {# ── Users & Auth ── #}
+  <symbol id="ic-users"        viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></symbol>
+  <symbol id="ic-user"         viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+  <symbol id="ic-shield"       viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></symbol>
+  <symbol id="ic-shield-check" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></symbol>
+  <symbol id="ic-lock"         viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></symbol>
+  <symbol id="ic-log-out"      viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></symbol>
+
+  {# ── Actions ── #}
+  <symbol id="ic-plus"         viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></symbol>
+  <symbol id="ic-edit"         viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></symbol>
+  <symbol id="ic-trash"        viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></symbol>
+  <symbol id="ic-refresh"      viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></symbol>
+  <symbol id="ic-download"     viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></symbol>
+  <symbol id="ic-upload"       viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></symbol>
+  <symbol id="ic-ban"          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></symbol>
+
+  {# ── Status & Feedback ── #}
+  <symbol id="ic-check"        viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></symbol>
+  <symbol id="ic-x"            viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></symbol>
+  <symbol id="ic-alert-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></symbol>
+  <symbol id="ic-info"         viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></symbol>
+
+  {# ── Search & Filter ── #}
+  <symbol id="ic-search"       viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol>
+  <symbol id="ic-filter"       viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></symbol>
+
+  {# ── Domain ── #}
+  <symbol id="ic-key"          viewBox="0 0 24 24"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></symbol>
+  <symbol id="ic-calendar"     viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></symbol>
+  <symbol id="ic-credit-card"  viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></symbol>
+  <symbol id="ic-settings"     viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></symbol>
+  <symbol id="ic-more-vertical"viewBox="0 0 24 24"><circle cx="12" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1" fill="currentColor" stroke="none"/></symbol>
+  <symbol id="ic-eye-off"      viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></symbol>
+  <symbol id="ic-eye"          viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></symbol>
+
+</svg>

package/src/admin/views/partials/json-dialog.njk

@@ -0,0 +1,80 @@
+{#
+  partials/json-dialog.njk  — Phase 6
+  Adds undo/redo buttons in the toolbar.
+#}
+<div id="je-dialog-content" style="display:none">
+
+  {# Toolbar #}
+  <div class="je-toolbar">
+    <div style="display:flex;align-items:center;gap:12px;flex:1;min-width:0">
+      <span class="je-toolbar-title" id="je-title">JSON</span>
+      <div id="je-root-type-wrap" class="je-root-type-wrap"></div>
+    </div>
+    <div class="je-toolbar-right">
+
+      {# Phase 6: undo / redo buttons #}
+      <div class="je-undo-wrap">
+        <button type="button" class="je-btn-icon" id="je-undo-btn"
+          onclick="JsonEditor._undo()" title="Undo (Ctrl+Z)" disabled>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="9 14 4 9 9 4"/>
+            <path d="M20 20v-7a4 4 0 00-4-4H4"/>
+          </svg>
+        </button>
+        <button type="button" class="je-btn-icon" id="je-redo-btn"
+          onclick="JsonEditor._redo()" title="Redo (Ctrl+Y)" disabled>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="15 14 20 9 15 4"/>
+            <path d="M4 20v-7a4 4 0 014-4h12"/>
+          </svg>
+        </button>
+      </div>
+
+      <div class="je-view-tabs">
+        <button type="button" class="je-view-tab active" id="je-tab-pretty"
+          onclick="JsonEditor._setView('pretty')">Pretty</button>
+        <button type="button" class="je-view-tab" id="je-tab-raw"
+          onclick="JsonEditor._setView('raw')">Raw</button>
+      </div>
+      <button type="button" class="je-btn-icon" id="je-format-btn"
+        onclick="JsonEditor._format()" title="Format / beautify" style="display:none">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="21" y1="6" x2="3" y2="6"/>
+          <line x1="21" y1="10" x2="7" y2="10"/>
+          <line x1="21" y1="14" x2="3" y2="14"/>
+          <line x1="21" y1="18" x2="13" y2="18"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  {# Pretty view #}
+  <div id="je-pretty-view" class="je-pretty-view">
+    <div class="je-tree" id="je-tree"></div>
+  </div>
+
+  {# Raw view #}
+  <div id="je-raw-view" class="je-raw-view" style="display:none">
+    <textarea id="je-raw-ta" class="je-raw-ta" spellcheck="false"
+      placeholder='{"key": "value"}'></textarea>
+    <div class="je-raw-hint" id="je-raw-hint"></div>
+  </div>
+
+  {# Footer #}
+  <div class="je-footer">
+    <span class="je-count" id="je-count"></span>
+    <div style="display:flex;gap:8px;align-items:center">
+      <button type="button" class="btn btn-ghost btn-sm" onclick="JsonEditor._cancel()">Cancel</button>
+      <button type="button" class="btn btn-primary btn-sm" onclick="JsonEditor._apply()">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+        Apply
+      </button>
+    </div>
+  </div>
+</div>

package/src/admin/views/partials/json-editor.njk

@@ -0,0 +1,37 @@
+{#
+  partials/json-editor.njk
+  Replaces the JSON textarea in the form with a compact trigger + preview.
+  Clicking opens the full Postman-style dialog.
+
+  Expects in scope: field, val, hasError, record
+#}
+{% set _jv = val | dump if (val is not none and val != '') else '{}' %}
+
+<input type="hidden"
+  id="field-{{ field.name }}"
+  name="{{ field.name }}"
+  value="{{ _jv | escape }}"
+  {% if not field.nullable %}data-required="true"{% endif %}>
+
+<div class="je-trigger {% if hasError %}error{% endif %}"
+     id="jet-{{ field.name }}"
+     tabindex="0"
+     role="button"
+     aria-label="Edit {{ field.label }} JSON"
+     data-field="{{ field.name }}"
+     onclick="JsonEditor.open('{{ field.name }}')"
+     onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();JsonEditor.open('{{ field.name }}');}">
+
+  <div class="je-preview-wrap" id="jep-{{ field.name }}">
+    <span class="je-preview-placeholder">Click to edit…</span>
+  </div>
+
+  <button type="button" class="je-open-btn" tabindex="-1"
+    onclick="event.stopPropagation();JsonEditor.open('{{ field.name }}')">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
+      <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+    </svg>
+    Edit JSON
+  </button>
+</div>