millas 0.2.12-beta-1 → 0.2.13-beta

package/src/admin/views/pages/list.njk

@@ -74,19 +74,19 @@
       </button>
       {% endif %}
 
-      {# Export dropdown #}
-      <div class="action-menu">
-        <button class="btn btn-ghost btn-sm action-menu-btn">
+      {# Export dropdown — portal-rendered via UI.Dropdown #}
+      <div class="ui-menu" id="export-menu-wrap">
+        <button class="btn btn-ghost btn-sm" id="export-menu-btn" type="button">
           <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-download"/></svg></span>
           Export
           <span class="icon icon-12"><svg viewBox="0 0 24 24"><use href="#ic-chevron-down"/></svg></span>
         </button>
-        <div class="action-dropdown" style="right:0;min-width:160px">
-          <a href="{{ adminPrefix }}/{{ resource.slug }}/export.csv?search={{ search }}&sort={{ sort }}&order={{ order }}{% for key, val in activeFilters %}&filter[{{ key }}]={{ val }}{% endfor %}">
+        <div class="ui-menu-panel" id="export-menu-panel" style="display:none">
+          <a class="ui-menu-item" href="{{ adminPrefix }}/{{ resource.slug }}/export.csv?search={{ search }}&sort={{ sort }}&order={{ order }}{% for key, val in activeFilters %}&filter[{{ key }}]={{ val }}{% endfor %}">
             <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-download"/></svg></span>
             Export CSV
           </a>
-          <a href="{{ adminPrefix }}/{{ resource.slug }}/export.json?search={{ search }}&sort={{ sort }}&order={{ order }}{% for key, val in activeFilters %}&filter[{{ key }}]={{ val }}{% endfor %}">
+          <a class="ui-menu-item" href="{{ adminPrefix }}/{{ resource.slug }}/export.json?search={{ search }}&sort={{ sort }}&order={{ order }}{% for key, val in activeFilters %}&filter[{{ key }}]={{ val }}{% endfor %}">
             <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-download"/></svg></span>
             Export JSON
           </a>
@@ -99,10 +99,18 @@
   <div class="bulk-bar" id="bulk-bar">
     <span class="bulk-count" id="bulk-count">0 selected</span>
     <span class="text-muted" style="font-size:12px">—</span>
+    {% for action in resource.actions %}
+    <button class="btn btn-ghost btn-sm" onclick="bulkAction({{ action.index }})">
+      {% if action.icon %}<span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ action.icon }}"/></svg></span>{% endif %}
+      {{ action.label }}
+    </button>
+    {% endfor %}
+    {% if resource.canDelete %}
     <button class="btn btn-ghost btn-sm btn-danger" onclick="bulkDelete()">
       <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
       Delete selected
     </button>
+    {% endif %}
     <button class="btn btn-ghost btn-sm" style="margin-left:auto" onclick="clearSelection()">
       <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-x"/></svg></span>
       Cancel
@@ -186,7 +194,7 @@
             {% endif %}
           </th>
           {% endfor %}
-          {% if resource.canEdit or resource.canDelete %}
+          {% if resource.canEdit or resource.canDelete or resource.rowActions | length %}
           <th class="col-actions">Actions</th>
           {% endif %}
         </tr>
@@ -200,10 +208,10 @@
           {% for field in listFields %}
           <td class="{% if loop.first %}td-primary{% endif %}">{{ row[field.name] | adminCell(field) | safe }}</td>
           {% endfor %}
-          {% if resource.canEdit or resource.canDelete %}
+          {% if resource.canEdit or resource.canDelete or resource.rowActions | length %}
           <td class="col-actions">
-            <div class="action-menu">
-              <button class="action-menu-btn">
+            <div class="ui-menu">
+              <button class="action-menu-btn ui-menu-trigger" type="button" aria-label="Row actions">
                 <span class="icon icon-14">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <circle cx="12" cy="5" r="1.2" fill="currentColor" stroke="none"/>
@@ -212,20 +220,36 @@
                   </svg>
                 </span>
               </button>
-              <div class="action-dropdown">
+              <div class="ui-menu-panel" style="display:none">
                 {% if resource.canEdit %}
-                <a href="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/edit">
+                <a class="ui-menu-item" href="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/edit">
                   <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-edit"/></svg></span>
                   Edit
                 </a>
                 {% endif %}
-                <a href="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}" style="display:none">
-                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-eye"/></svg></span>
-                  View
+                {% if row._rowActions | length %}
+                {% if resource.canEdit %}<div class="ui-menu-sep"></div>{% endif %}
+                {% for ra in row._rowActions %}
+                {% if ra.href %}
+                <a class="ui-menu-item" href="{{ ra.href }}" target="_blank" rel="noopener">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ ra.icon or 'eye' }}"/></svg></span>
+                  {{ ra.label }}
                 </a>
+                {% elif ra.action %}
+                <button class="ui-menu-item" type="button"
+                  data-row-action="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/action/{{ ra.action }}"
+                  data-row-action-label="{{ ra.label }}">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ ra.icon or 'check' }}"/></svg></span>
+                  {{ ra.label }}
+                </button>
+                {% endif %}
+                {% endfor %}
+                {% endif %}
                 {% if resource.canDelete %}
-                <div class="sep"></div>
-                <button class="danger" onclick="confirmDelete('{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/delete', '#{{ row.id }}')">
+                <div class="ui-menu-sep"></div>
+                <button class="ui-menu-item ui-menu-danger" type="button"
+                  data-confirm-delete="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/delete"
+                  data-confirm-label="#{{ row.id }}">
                   <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
                   Delete
                 </button>
@@ -300,60 +324,244 @@
 </div>
 
 <script>
-  // ── Filter panel toggle ──────────────────────────────────────
-  const filterPanel = document.getElementById('filter-panel');
-  {% if activeFilters | length %}
-  if (filterPanel) filterPanel.style.display = 'flex';
-  {% endif %}
+  $(function() {
+    var PREFIX = '{{ adminPrefix }}';
+    var SLUG   = '{{ resource.slug }}';
 
-  function toggleFilters() {
-    if (!filterPanel) return;
-    const shown = filterPanel.style.display !== 'none';
-    filterPanel.style.display = shown ? 'none' : 'flex';
-  }
+    // ── Filter panel ─────────────────────────────────────────────────────────
+    {% if activeFilters | length %}$('#filter-panel').show();{% endif %}
 
-  // ── Live search on Enter ──────────────────────────────────────
-  const searchForm = document.getElementById('search-form');
-  if (searchForm) {
-    searchForm.querySelector('input[name="search"]')?.addEventListener('keydown', e => {
-      if (e.key === 'Enter') searchForm.submit();
+    window.toggleFilters = function() {
+      $('#filter-panel').toggle();
+    };
+
+    // ── Live search on Enter ──────────────────────────────────────────────────
+    $('#search-form input[name="search"]').on('keydown', function(e) {
+      if (e.key === 'Enter') $('#search-form').submit();
     });
-  }
 
-  // ── Bulk selection ────────────────────────────────────────────
-  const bulkBar   = document.getElementById('bulk-bar');
-  const bulkCount = document.getElementById('bulk-count');
-
-  function updateBulkBar() {
-    const checked = document.querySelectorAll('.item-check:checked');
-    const n = checked.length;
-    bulkBar.classList.toggle('visible', n > 0);
-    if (bulkCount) bulkCount.textContent = `${n} selected`;
-    const all = document.getElementById('check-all');
-    if (all) {
-      const total = document.querySelectorAll('.item-check').length;
-      all.indeterminate = n > 0 && n < total;
-      all.checked = n > 0 && n === total;
+    // ── Bulk selection ────────────────────────────────────────────────────────
+    function updateBulkBar() {
+      var $checked = $('.item-check:checked');
+      var n        = $checked.length;
+      var total    = $('.item-check').length;
+      $('#bulk-bar').toggleClass('visible', n > 0);
+      $('#bulk-count').text(n + ' selected');
+      $('#check-all').prop('indeterminate', n > 0 && n < total)
+                     .prop('checked',       n > 0 && n === total);
+    }
+
+    window.toggleAll = function(master) {
+      $('.item-check').prop('checked', master.checked);
+      updateBulkBar();
+    };
+
+    window.clearSelection = function() {
+      $('.item-check, #check-all').prop('checked', false).prop('indeterminate', false);
+      updateBulkBar();
+    };
+
+    $(document).on('change', '.item-check', updateBulkBar);
+
+    window.bulkDelete = function() {
+      var ids   = $('.item-check:checked').map(function() { return this.value; }).get();
+      if (!ids.length) return;
+      var label = ids.length + ' record' + (ids.length > 1 ? 's' : '');
+      confirmDeleteBulk(PREFIX + '/' + SLUG + '/bulk-delete', label, ids);
+    };
+
+    window.confirmDeleteBulk = function(url, label, ids) {
+      UI.Confirm.show({
+        title:   'Delete ' + label,
+        message: 'Delete <strong>' + label + '</strong>? This cannot be undone.',
+        confirm: 'Delete',
+        danger:  true,
+      }).then(function(ok) {
+        if (!ok) return;
+        var csrf = $('meta[name="csrf-token"]').attr('content') || '';
+        var $form = $('<form method="POST">').attr('action', url);
+        $form.append('<input name="_csrf" value="' + csrf + '">');
+        $.each(ids, function(_, id) {
+          $form.append('<input type="hidden" name="ids[]" value="' + id + '">');
+        });
+        $form.appendTo('body').submit();
+      });
+    };
+
+    window.bulkAction = function(actionIndex) {
+      var ids = $('.item-check:checked').map(function() { return this.value; }).get();
+      if (!ids.length) return;
+      var csrf = $('meta[name="csrf-token"]').attr('content') || '';
+      var $form = $('<form method="POST">').attr('action', PREFIX + '/' + SLUG + '/bulk-action');
+      $form.append('<input name="_csrf" value="' + csrf + '">');
+      $form.append('<input type="hidden" name="actionIndex" value="' + actionIndex + '">');
+      $.each(ids, function(_, id) {
+        $form.append('<input type="hidden" name="ids[]" value="' + id + '">');
+      });
+      $form.appendTo('body').submit();
+    };
+
+    // ── UI.Dropdown — portal-rendered action menus ────────────────────────────
+    // Wire export menu
+    var $exportBtn   = $('#export-menu-btn');
+    var $exportPanel = $('#export-menu-panel');
+    if ($exportBtn.length && $exportPanel.length) {
+      var exportDd = UI.Dropdown.create({
+        anchor:    $exportBtn[0],
+        content:   $exportPanel[0],
+        placement: 'bottom-end',
+        offset:    4,
+      });
+      $exportBtn.on('click', function() { exportDd.toggle(); });
     }
-  }
 
-  function toggleAll(master) {
-    document.querySelectorAll('.item-check').forEach(c => { c.checked = master.checked; });
-    updateBulkBar();
+    // Wire per-row action menus
+    $('.ui-menu').each(function() {
+      var $menu  = $(this);
+      var $btn   = $menu.find('.ui-menu-trigger');
+      var $panel = $menu.find('.ui-menu-panel');
+      if (!$btn.length || !$panel.length) return;
+
+      var dd = UI.Dropdown.create({
+        anchor:    $btn[0],
+        content:   $panel[0],
+        placement: 'bottom-end',
+        offset:    4,
+      });
+
+      $btn.on('click', function(e) {
+        e.stopPropagation();
+        dd.toggle();
+      });
+
+      $panel.find('[data-confirm-delete]').on('click', function() {
+        dd.close();
+        confirmDelete($(this).data('confirm-delete'), $(this).data('confirm-label'));
+      });
+
+      $panel.find('[data-row-action]').on('click', function() {
+        dd.close();
+        var url   = $(this).data('row-action');
+        var label = $(this).data('row-action-label');
+        UI.Confirm.show({
+          title:   label,
+          message: 'Run <strong>' + label + '</strong> on this record?',
+          confirm: label,
+        }).then(function(ok) {
+          if (!ok) return;
+          var csrf = $('meta[name="csrf-token"]').attr('content') || '';
+          var $form = $('<form method="POST">').attr('action', url);
+          $form.append('<input name="_csrf" value="' + csrf + '">');
+          $form.appendTo('body').submit();
+        });
+      });
+
+      // ── Right-click on the row opens a context menu at the cursor ──────────
+      (function($menuPanel) {
+        var $row = $menuPanel.closest('tr');
+
+        $row.on('contextmenu', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          // Remove any existing portal
+          $('.context-menu-portal').remove();
+
+          // Build a fresh portal from the panel's inner HTML (avoids clone display:none)
+          var $p = $('<div class="ui-menu-panel context-menu-portal"></div>');
+          $p.html($menuPanel.html());
+          $p.css({
+            position: 'fixed',
+            top:      Math.min(e.clientY, window.innerHeight - 240) + 'px',
+            left:     Math.min(e.clientX, window.innerWidth  - 190) + 'px',
+            zIndex:   9999,
+          });
+          $('body').append($p);
+
+          // Wire handlers on the portal
+          $p.find('[data-confirm-delete]').on('click', function() {
+            $p.remove();
+            confirmDelete($(this).data('confirm-delete'), $(this).data('confirm-label'));
+          });
+          $p.find('[data-row-action]').on('click', function() {
+            $p.remove();
+            var _url   = $(this).data('row-action');
+            var _label = $(this).data('row-action-label');
+            UI.Confirm.show({
+              title:   _label,
+              message: 'Run <strong>' + _label + '</strong> on this record?',
+              confirm: _label,
+            }).then(function(ok) {
+              if (!ok) return;
+              var csrf = $('meta[name="csrf-token"]').attr('content') || '';
+              var $form = $('<form method="POST">').attr('action', _url);
+              $form.append('<input name="_csrf" value="' + csrf + '">');
+              $form.appendTo('body').submit();
+            });
+          });
+          $p.find('a.ui-menu-item').on('click', function() { $p.remove(); });
+
+          // Dismiss on next click anywhere or Escape
+          setTimeout(function() {
+            $(document).one('click.ctxmenu', function() { $p.remove(); });
+          }, 0);
+          $(document).one('keydown.ctxmenu', function(ev) {
+            if (ev.key === 'Escape') { $p.remove(); }
+          });
+        });
+      })($panel);
+    });
+  });
+</script>
+
+<style>
+  /* ── UI Menu (portal dropdown) ── */
+  .ui-menu { position: relative; display: inline-block; }
+
+  .ui-menu-panel {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    min-width: 150px;
+    overflow: hidden;
   }
 
-  function clearSelection() {
-    document.querySelectorAll('.item-check, #check-all').forEach(c => { c.checked = false; c.indeterminate = false; });
-    updateBulkBar();
+  .ui-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-size: 13px;
+    color: var(--text-soft);
+    text-decoration: none;
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background .1s;
+    white-space: nowrap;
   }
+  .ui-menu-item:hover { background: var(--surface2); color: var(--text); }
+  .ui-menu-danger     { color: var(--danger); }
+  .ui-menu-danger:hover { background: var(--danger-bg); color: var(--danger); }
 
-  function bulkDelete() {
-    const ids = [...document.querySelectorAll('.item-check:checked')].map(c => c.value);
-    if (!ids.length) return;
-    confirmDelete(
-      '{{ adminPrefix }}/{{ resource.slug }}/bulk-delete',
-      `${ids.length} record${ids.length > 1 ? 's' : ''}`
-    );
+  .ui-menu-sep { height: 1px; background: var(--border-soft); margin: 3px 0; }
+
+  /* ── Context menu portal ── */
+  .context-menu-portal {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    min-width: 160px;
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
   }
-</script>
+
+  /* ── Right-click cursor hint on rows ── */
+  #data-table tbody tr { cursor: context-menu; }
+  #data-table tbody tr:hover { background: var(--surface2); }
+</style>
+
 {% endblock %}

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

@@ -0,0 +1,53 @@
+{#
+  partials/form-field.njk
+  Renders a single editable form field — all widget types.
+  Expects in scope: field, val, hasError, isEdit, record, errors, adminPrefix
+#}
+
+{# ── Fieldset heading ── #}
+{% if field._isFieldset %}
+<div class="full" style="grid-column:1/-1;margin-top:8px">
+  <div class="fieldset-heading">{{ field.label }}</div>
+</div>
+
+{# ── Readonly ── #}
+{% elif field.isReadonly %}
+{% include "partials/form-readonly.njk" %}
+
+{# ── Editable ── #}
+{% else %}
+{% set val = record[field.name] if record[field.name] is defined else '' %}
+{% set hasError = errors[field.name] is defined %}
+<div class="form-group
+  {% if field.span == 'full' %}full
+  {% elif field.span == 'third' %}w-third
+  {% elif field.type == 'textarea' or field.type == 'json' or field.type == 'richtext' %}full
+  {% elif field.type == 'checkbox' %}w-third
+  {% endif %}"
+  data-field="{{ field.name }}">
+
+  {# Label (not shown for checkbox — toggle has its own) #}
+  {% if field.type != 'checkbox' %}
+  <label class="form-label" for="field-{{ field.name }}">
+    {{ field.label }}
+    {% if not field.nullable %}<span class="required">*</span>{% endif %}
+  </label>
+  {% endif %}
+
+  {% include "partials/form-widget.njk" %}
+
+  {# Error / help #}
+  <div class="field-feedback" id="feedback-{{ field.name }}"
+    {% if field.help %}data-help="{{ field.help }}"{% endif %}>
+    {% if hasError %}
+    <span class="form-error">
+      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+      {{ errors[field.name][0] if errors[field.name] is iterable else errors[field.name] }}
+    </span>
+    {% elif field.help %}
+    <span class="form-help">{{ field.help }}</span>
+    {% endif %}
+  </div>
+
+</div>
+{% endif %}

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

@@ -0,0 +1,28 @@
+{#
+  partials/form-footer.njk
+  Submit buttons, cancel, delete, and timestamps.
+  Expects in scope: isEdit, resource, record, adminPrefix
+#}
+<div class="flex items-center gap-2" style="margin-top:16px;flex-wrap:wrap">
+  <button type="submit" name="_submit" value="save" class="btn btn-primary" id="submit-btn">
+    <span class="icon icon-14"><svg viewBox="0 0 24 24"><use href="#ic-save"/></svg></span>
+    {{ 'Save Changes' if isEdit else 'Create ' + resource.singular }}
+  </button>
+  <button type="submit" name="_submit" value="continue" class="btn btn-ghost btn-sm">
+    Save and continue editing
+  </button>
+  {% if not isEdit %}
+  <button type="submit" name="_submit" value="add_another" class="btn btn-ghost btn-sm">
+    Save and add another
+  </button>
+  {% endif %}
+  <a href="{{ adminPrefix }}/{{ resource.slug }}" class="btn btn-ghost">Cancel</a>
+
+  {% if isEdit and resource.canDelete %}
+  <button type="button" class="btn btn-danger" style="margin-left:auto"
+    onclick="confirmDelete('{{ adminPrefix }}/{{ resource.slug }}/{{ record.id }}/delete', '{{ resource.singular }} #{{ record.id }}')">
+    <span class="icon icon-14"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
+    Delete
+  </button>
+  {% endif %}
+</div>

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

@@ -0,0 +1,114 @@
+{#
+  partials/form-readonly.njk
+  Renders a single readonly field as disabled input.
+  Expects in scope: field, record
+#}
+
+<div class="form-group {% if field.span == 'full' or field.type == 'textarea' or field.type == 'json' or field.type == 'richtext' %}full{% elif field.span == 'third' %}w-third{% endif %}">
+  <label class="form-label" for="field-{{ field.name }}">{{ field.label }}</label>
+
+  {# ── Select ── #}
+  {% if field.type == 'select' and field.options %}
+    <select class="form-control" disabled>
+      {% if val %}
+        {% 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 {% if val == optVal %}selected{% endif %}>{{ optLabel }}</option>
+        {% endfor %}
+      {% else %}
+        <option>— Select —</option>
+      {% endif %}
+    </select>
+
+  {# ── Checkbox ── #}
+  {% elif field.type == 'checkbox' %}
+    <div class="toggle-field">
+      <label class="toggle-wrap" style="opacity:0.6;cursor:not-allowed">
+        <input type="checkbox" disabled {{ 'checked' if val else '' }} class="toggle-input">
+        <span class="toggle-track"><span class="toggle-thumb"></span></span>
+        <span class="toggle-label">{{ field.label }}</span>
+      </label>
+    </div>
+
+  {# ── Badge ── #}
+  {% elif field.type == 'badge' %}
+    {% set _bc = field.colors[val] if (field.colors and val and field.colors[val]) else 'gray' %}
+    <span class="badge badge-{{ _bc if val else 'gray' }}">{{ val if val else 'Not set' }}</span>
+
+  {# ── Textarea ── #}
+  {% elif field.type == 'textarea' %}
+    <textarea class="form-control" disabled readonly rows="4" placeholder="{{ field.placeholder or '' }}">{{ val }}</textarea>
+
+  {# ── JSON ── #}
+  {% elif field.type == 'json' %}
+    <textarea class="form-control" disabled readonly rows="6" style="font-family:monospace;font-size:12px">{{ val | dump if val else '' }}</textarea>
+
+  {# ── Richtext ── #}
+  {% elif field.type == 'richtext' %}
+    <div class="form-control" style="min-height:120px;background:var(--surface-muted);cursor:not-allowed" disabled>{{ val | safe if val else '' }}</div>
+
+  {# ── Date ── #}
+  {% elif field.type == 'date' %}
+    <div class="dp-wrap">
+      <input type="text" class="form-control dp-trigger" value="{{ val }}" placeholder="Select date…" disabled readonly>
+      <span class="dp-icon" style="opacity:0.5">
+        <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 ── #}
+  {% elif field.type == 'datetime' or field.type == 'datetime-local' %}
+    <div class="dp-wrap">
+      <input type="text" class="form-control dp-trigger" value="{{ val }}" placeholder="Select date and time…" disabled readonly>
+      <span class="dp-icon" style="opacity:0.5">
+        <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>
+
+  {# ── Email ── #}
+  {% elif field.type == 'email' %}
+    <input type="email" class="form-control" value="{{ val }}" placeholder="{{ field.placeholder or 'name@example.com' }}" disabled readonly>
+
+  {# ── URL ── #}
+  {% elif field.type == 'url' %}
+    <input type="url" class="form-control" value="{{ val }}" placeholder="{{ field.placeholder or 'https://' }}" disabled readonly>
+
+  {# ── Phone ── #}
+  {% elif field.type == 'phone' %}
+    <input type="tel" class="form-control" value="{{ val }}" placeholder="{{ field.placeholder or '+1 555 000 0000' }}" disabled readonly>
+
+  {# ── Color ── #}
+  {% elif field.type == 'color' %}
+    <div class="flex items-center gap-2">
+      <input type="color" value="{{ val or '#000000' }}" disabled style="width:40px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:not-allowed;padding:2px;opacity:0.6">
+      <input type="text" class="form-control" value="{{ val }}" placeholder="#000000" style="width:120px" disabled readonly>
+    </div>
+
+  {# ── Number ── #}
+  {% elif field.type == 'number' %}
+    <input type="number" class="form-control" value="{{ val }}" placeholder="{{ field.placeholder or '0' }}" disabled readonly>
+
+  {# ── Password ── #}
+  {% elif field.type == 'password' %}
+    <input type="password" class="form-control" value="{{ '••••••••' if val else '' }}" placeholder="{{ field.placeholder or '' }}" disabled readonly>
+
+  {# ── Image ── #}
+  {% 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" class="form-control" value="{{ val }}" placeholder="https://example.com/image.jpg" disabled readonly>
+    </div>
+
+  {# ── Default text ── #}
+  {% else %}
+    <input type="text" class="form-control" value="{{ val }}" placeholder="{{ field.placeholder or '' }}" disabled readonly>
+
+  {% endif %}
+</div>