millas 0.2.13 → 0.2.14

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

@@ -1,480 +1,6 @@
 <script>
-  // ── Tab switching ──────────────────────────────────────────────
-  // Convert a tab name to a CSS-safe id fragment.
-  // Strips everything that is not a letter, digit, underscore, or hyphen.
-  // 'Role & Access' → 'Role--Access' → 'role--access' (safe in selectors)
-  function _tabId(name) {
-    return name.replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-+|-+$/g, '');
-  }
-
-  window.switchFormTab = function(name, btn) {
-    $('.tab-btn').removeClass('active');
-    $('.tab-form-panel').removeClass('active').hide();
-    $(btn).addClass('active');
-    $('#fpanel-' + _tabId(name)).addClass('active').show();
-  };
-
-  // ── Richtext sync ─────────────────────────────────────────────
-  window.rtCmd  = function(cmd) { document.execCommand(cmd, false, null); };
-  window.rtLink = function() {
-    var url = prompt('Enter URL:');
-    if (url) document.execCommand('createLink', false, url);
-  };
-
-  $('.richtext-editor').each(function() {
-    var fieldName = this.id.replace('rt-', '');
-    var $hidden   = $('#field-' + fieldName);
-    $(this).on('input', function() { $hidden.val(this.innerHTML); });
-  });
-
-  // ── Client-side validation ─────────────────────────────────────
-  function showFieldError(name, msg) {
-    var errorIcon = '<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>';
-    $('#field-' + name + ', [name="' + name + '"]').first().addClass('error');
-    $('#feedback-' + name).html('<span class="form-error">' + errorIcon + ' ' + msg + '</span>');
-  }
-
-  function clearFieldError(name) {
-    $('#field-' + name + ', [name="' + name + '"]').first().removeClass('error');
-    var $fb = $('#feedback-' + name);
-    var help = $fb.data('help');
-    $fb.html(help ? '<span class="form-help">' + help + '</span>' : '');
-  }
-
-  function validateField(input) {
-    var $input   = $(input);
-    var name     = $input.attr('name');
-    if (!name) return true;
-    var val      = $.trim($input.val());
-    var required = $input.data('required') === true || $input.data('required') === 'true';
-    var validate = $input.data('validate');
-    clearFieldError(name);
-
-    if (required && val === '') {
-      var label = $('label[for="field-' + name + '"]').text().replace('*','').trim() || name;
-      showFieldError(name, label + ' is required');
-      return false;
-    }
-    if (val && validate === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) {
-      showFieldError(name, 'Please enter a valid email address'); return false;
-    }
-    if (val && validate === 'url') {
-      try { new URL(val); } catch(e) { showFieldError(name, 'Please enter a valid URL (include https://)'); return false; }
-    }
-    if (val && validate === 'json') {
-      try { JSON.parse(val); } catch(e) { showFieldError(name, 'Invalid JSON format'); return false; }
-    }
-    var min = $input.data('min'), max = $input.data('max');
-    if (val && min !== undefined && Number(val) < Number(min)) {
-      showFieldError(name, 'Minimum value is ' + min); return false;
-    }
-    if (val && max !== undefined && Number(val) > Number(max)) {
-      showFieldError(name, 'Maximum value is ' + max); return false;
-    }
-    return true;
-  }
-
-  // Live validation
-  $(document).on('blur',  '.form-control', function() { validateField(this); });
-  $(document).on('input', '.form-control', function() {
-    if ($(this).hasClass('error')) validateField(this);
-  });
-
-  // Submit validation
-  $('#record-form').on('submit', function(e) {
-    var valid = true, $first = null;
-    $(this).find('.form-control').each(function() {
-      if (!validateField(this)) { valid = false; if (!$first) $first = $(this); }
-    });
-    if (!valid) {
-      e.preventDefault();
-      $first.focus();
-      $first[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
-      return;
-    }
-    var $btn = $('#submit-btn');
-    $btn.prop('disabled', true).html(
-      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation:spin 1s linear infinite"><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"/></svg> Saving…'
-    );
-  });
-
-  // Auto-switch to tab with first error
-  var $firstErr = $('.form-control.error').first();
-  if ($firstErr.length) {
-    var $panel = $firstErr.closest('.tab-form-panel');
-    if ($panel.length) {
-      // Reconstruct the original tab name from data-tab attribute — not from the id.
-      // The id has special chars stripped; data-tab has the original name.
-      var $tabBtn = $('.tab-btn').filter(function() {
-        return _tabId($(this).data('tab')) === $panel.attr('id').replace('fpanel-', '');
-      }).first();
-      if ($tabBtn.length) switchFormTab($tabBtn.data('tab'), $tabBtn[0]);
-    }
-  }
-
-  // ── Prepopulate (slug auto-fill) ───────────────────────────────
-  function slugify(str) {
-    return str.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_]+/g, '-').replace(/^-+|-+$/g, '');
-  }
-  $('[data-prepopulate]').each(function() {
-    var targetName = this.name;
-    var sourceName = $(this).data('prepopulate');
-    var $src = $('[name="' + sourceName + '"]');
-    var $tgt = $('[name="' + targetName + '"]');
-    if (!$src.length || !$tgt.length) return;
-    var userEdited = !!$tgt.val();
-    $tgt.on('input', function() { userEdited = true; });
-    $src.on('input', function() { if (!userEdited) $tgt.val(slugify($src.val())); });
-  });
-
-  // ══════════════════════════════════════════════════════════════
-  //  FK DROPDOWN WIDGET
-  //  Self-contained — one instance per FK field on the page.
-  //  Supabase-style: async, paginated, searchable, keyboard nav.
-  // ══════════════════════════════════════════════════════════════
-  (function () {
-    const ADMIN_PREFIX   = {{ adminPrefix | dump | safe }};
-    const SOURCE_RESOURCE = {{ resource.slug | dump | safe }};
-    const PER_PAGE       = 20;
-    const DEBOUNCE_MS  = 220;
-
-    // Initialise every fk-widget — deferred so ui.js is guaranteed loaded.
-    function _initAllFKWidgets() {
-      document.querySelectorAll('.fk-widget').forEach(widget => initFKWidget(widget));
-    }
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', _initAllFKWidgets);
-    } else {
-      _initAllFKWidgets();
-    }
-
-    function initFKWidget(widget) {
-      const name       = widget.dataset.name;
-      const resource   = widget.dataset.resource;
-      const fkField    = widget.dataset.fkField || name;
-      const nullable   = widget.dataset.nullable === 'true';
-      const currentId  = widget.dataset.currentId || '';
-
-      const hidden   = document.getElementById(`field-${name}`);
-      const trigger  = document.getElementById(`fktrig-${name}`);
-      const panel    = document.getElementById(`fkpanel-${name}`);
-      const list     = document.getElementById(`fklist-${name}`);
-      const search   = document.getElementById(`fksearch-${name}`);
-      const clearBtn = document.getElementById(`fkclear-${name}`);
-      const footer   = document.getElementById(`fkfoot-${name}`);
-      const countEl  = document.getElementById(`fkcount-${name}`);
-      const pageInfo = document.getElementById(`fkpageinfo-${name}`);
-      const prevBtn  = document.getElementById(`fkprev-${name}`);
-      const nextBtn  = document.getElementById(`fknext-${name}`);
-      const searchClear = widget.querySelector('.fk-search-clear');
-
-      if (!resource) {
-        console.warn('[FK Widget] field "' + name + '" has no fkResource — cannot load dropdown. Check that the referenced model is registered with Admin.register().');
-        return;
-      }
-      if (!hidden || !trigger || !panel) {
-        console.warn('[FK Widget] field "' + name + '" is missing DOM elements — widget will not initialise.');
-        return;
-      }
-
-      // State
-      let state = {
-        open:       false,
-        query:      '',
-        page:       1,
-        total:      0,
-        data:       [],
-        loading:    false,
-        focusIndex: -1,
-        selectedId: currentId,
-        selectedLabel: '',
-      };
-
-      let debounceTimer = null;
-
-      // ── If there's a current value, resolve its label immediately ──────────
-      if (currentId) {
-        fetch(`${ADMIN_PREFIX}/api/${resource}/options?q=&page=1&limit=100&field=${fkField}&from=${SOURCE_RESOURCE}`)
-          .then(r => r.json())
-          .then(json => {
-            const match = (json.data || []).find(r => String(r.id) === String(currentId));
-            if (match) {
-              state.selectedLabel = match.label;
-              renderTriggerLabel();
-            }
-          })
-          .catch(() => {});
-      }
-
-      // ── Portal dropdown via UI.Dropdown ──────────────────────────────────────
-      // Move the panel into the portal so it is never clipped by overflow:hidden
-      // parents or broken by CSS transforms on ancestor elements.
-      var dropdown = UI.Dropdown.create({
-        anchor:    trigger,
-        content:   panel,
-        placement: 'bottom-start',
-        offset:    0,
-        minWidth:  true,
-        maxHeight: 320,
-        className: 'fk-panel',
-        onClose:   function() {
-          state.open = false;
-          trigger.setAttribute('aria-expanded', 'false');
-          state.focusIndex = -1;
-          document.removeEventListener('keydown', globalKeydown);
-        },
-      });
-
-      function open() {
-        if (state.open) return;
-        state.open = true;
-        state.page = 1;
-        trigger.setAttribute('aria-expanded', 'true');
-        search.value = '';
-        searchClear.hidden = true;
-        state.query = '';
-        dropdown.open();
-        fetchOptions();
-        requestAnimationFrame(function() { search.focus(); });
-        document.addEventListener('keydown', globalKeydown);
-      }
-
-      function close() {
-        if (!state.open) return;
-        dropdown.close(); // onClose callback sets state.open = false
-      }
-
-      trigger.addEventListener('click', function() { state.open ? close() : open(); });
-      trigger.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-          e.preventDefault();
-          open();
-        }
-      });
-
-      // ── Search ──────────────────────────────────────────────────────────────
-      search.addEventListener('input', () => {
-        const q = search.value;
-        searchClear.hidden = !q;
-        clearTimeout(debounceTimer);
-        debounceTimer = setTimeout(() => {
-          state.query = q;
-          state.page  = 1;
-          fetchOptions();
-        }, DEBOUNCE_MS);
-      });
-
-      searchClear.addEventListener('click', () => {
-        search.value = '';
-        searchClear.hidden = true;
-        state.query = '';
-        state.page  = 1;
-        fetchOptions();
-        search.focus();
-      });
-
-      // ── Pagination ──────────────────────────────────────────────────────────
-      prevBtn && prevBtn.addEventListener('click', () => {
-        if (state.page > 1) { state.page--; fetchOptions(); }
-      });
-      nextBtn && nextBtn.addEventListener('click', () => {
-        const totalPages = Math.ceil(state.total / PER_PAGE);
-        if (state.page < totalPages) { state.page++; fetchOptions(); }
-      });
-
-      // ── Clear selection ─────────────────────────────────────────────────────
-      clearBtn && clearBtn.addEventListener('click', () => {
-        select(null, '');
-        close();
-      });
-
-      // ── Fetch options from API ───────────────────────────────────────────────
-      function fetchOptions() {
-        state.loading = true;
-        renderList();
-
-        const params = new URLSearchParams({
-          q:     state.query,
-          page:  state.page,
-          limit: PER_PAGE,
-          field: fkField,
-          from:  SOURCE_RESOURCE,
-        });
-
-        fetch(`${ADMIN_PREFIX}/api/${resource}/options?${params}`)
-          .then(r => {
-            if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
-            return r.json();
-          })
-          .then(json => {
-            state.data    = json.data    || [];
-            state.total   = json.total   || 0;
-            state.loading = false;
-            state.focusIndex = -1;
-            // Update search placeholder with the resolved label column
-            if (json.labelCol && search) {
-              var col = json.labelCol.replace(/_/g, ' ');
-              search.placeholder = 'Search by ' + col + '…';
-            }
-            renderList();
-            renderFooter();
-          })
-          .catch((err) => {
-            state.loading = false;
-            state.data    = [];
-            console.error('[FK Widget] fetch error for resource "' + resource + '":', err);
-            list.innerHTML = '<div class="fk-empty-row">Failed to load — check console</div>';
-          });
-      }
-
-      // ── Render list ──────────────────────────────────────────────────────────
-      function renderList() {
-        if (state.loading) {
-          // Skeleton loader — 3 placeholder rows that pulse
-          list.innerHTML =
-            '<div class="fk-skeleton-row"><span class="fk-skel fk-skel-chip"></span><span class="fk-skel fk-skel-text"></span></div>' +
-            '<div class="fk-skeleton-row"><span class="fk-skel fk-skel-chip"></span><span class="fk-skel fk-skel-text" style="width:55%"></span></div>' +
-            '<div class="fk-skeleton-row"><span class="fk-skel fk-skel-chip"></span><span class="fk-skel fk-skel-text" style="width:70%"></span></div>';
-          return;
-        }
-
-        if (!state.data.length) {
-          var emptyMsg = state.query
-            ? 'No results for <strong style="color:var(--text)">&ldquo;' + escapeHtml(state.query) + '&rdquo;</strong>'
-            : 'No records found';
-          list.innerHTML =
-            '<div class="fk-empty-row">' +
-            '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--border);flex-shrink:0"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
-            '<span>' + emptyMsg + '</span>' +
-            '</div>';
-          return;
-        }
-
-        list.innerHTML = state.data.map((row, i) => {
-          const isSelected = String(row.id) === String(state.selectedId);
-          const isFocused  = i === state.focusIndex;
-          return `
-            <div class="fk-option ${isSelected ? 'fk-selected' : ''} ${isFocused ? 'fk-focused' : ''}"
-              role="option"
-              aria-selected="${isSelected}"
-              data-id="${row.id}"
-              data-label="${escapeAttr(String(row.label ?? row.id))}">
-              <span class="fk-id-chip">#${row.id}</span>
-              <span class="fk-opt-label">${escapeHtml(String(row.label ?? row.id))}</span>
-              ${isSelected ? `<svg class="fk-check" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>` : ''}
-            </div>`;
-        }).join('');
-
-        // Attach click handlers
-        list.querySelectorAll('.fk-option').forEach(opt => {
-          opt.addEventListener('mousedown', e => {
-            e.preventDefault(); // don't steal focus from search
-            select(opt.dataset.id, opt.dataset.label);
-            close();
-          });
-          opt.addEventListener('mousemove', () => {
-            const idx = [...list.querySelectorAll('.fk-option')].indexOf(opt);
-            setFocus(idx);
-          });
-        });
-      }
-
-      // ── Render footer ────────────────────────────────────────────────────────
-      function renderFooter() {
-        if (!footer) return;
-        const totalPages = Math.ceil(state.total / PER_PAGE);
-        if (state.total === 0) { footer.hidden = true; return; }
-
-        footer.hidden = false;
-        const from = (state.page - 1) * PER_PAGE + 1;
-        const to   = Math.min(state.page * PER_PAGE, state.total);
-        countEl.textContent   = `${from}–${to} of ${state.total}`;
-        pageInfo.textContent  = `${state.page} / ${totalPages}`;
-        if (prevBtn) prevBtn.disabled = state.page <= 1;
-        if (nextBtn) nextBtn.disabled = state.page >= totalPages;
-      }
-
-      // ── Select a value ───────────────────────────────────────────────────────
-      function select(id, label) {
-        state.selectedId    = id || '';
-        state.selectedLabel = label || '';
-        hidden.value        = state.selectedId;
-        renderTriggerLabel();
-        // Trigger change event so other listeners can react
-        hidden.dispatchEvent(new Event('change', { bubbles: true }));
-      }
-
-      function renderTriggerLabel() {
-        const labelEl = trigger.querySelector('.fk-trigger-label');
-        if (!labelEl) return;
-        if (state.selectedId) {
-          labelEl.innerHTML = `
-            <span class="fk-id-chip">#${state.selectedId}</span>
-            <span class="fk-selected-label">${escapeHtml(state.selectedLabel || state.selectedId)}</span>`;
-        } else {
-          labelEl.innerHTML = `<span class="fk-placeholder">— Select —</span>`;
-        }
-      }
-
-      // ── Keyboard navigation ──────────────────────────────────────────────────
-      function globalKeydown(e) {
-        if (!state.open) return;
-        const opts = [...list.querySelectorAll('.fk-option')];
-
-        switch (e.key) {
-          case 'ArrowDown':
-            e.preventDefault();
-            setFocus(Math.min(state.focusIndex + 1, opts.length - 1));
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            setFocus(Math.max(state.focusIndex - 1, 0));
-            break;
-          case 'Enter':
-            e.preventDefault();
-            if (state.focusIndex >= 0 && opts[state.focusIndex]) {
-              const opt = opts[state.focusIndex];
-              select(opt.dataset.id, opt.dataset.label);
-              close();
-            }
-            break;
-          case 'Escape':
-            e.preventDefault();
-            close();
-            trigger.focus();
-            break;
-          case 'Tab':
-            close();
-            break;
-          case 'PageDown':
-            e.preventDefault();
-            if (nextBtn && !nextBtn.disabled) { state.page++; fetchOptions(); }
-            break;
-          case 'PageUp':
-            e.preventDefault();
-            if (prevBtn && !prevBtn.disabled) { state.page--; fetchOptions(); }
-            break;
-        }
-      }
-
-      function setFocus(idx) {
-        const opts = [...list.querySelectorAll('.fk-option')];
-        opts.forEach(o => o.classList.remove('fk-focused'));
-        state.focusIndex = idx;
-        if (idx >= 0 && opts[idx]) {
-          opts[idx].classList.add('fk-focused');
-          opts[idx].scrollIntoView({ block: 'nearest' });
-        }
-      }
-
-      // ── Helpers ──────────────────────────────────────────────────────────────
-      function escapeHtml(str) {
-        return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-      }
-      function escapeAttr(str) {
-        return str.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-      }
-    }
-  })();
-
+  window.MILLAS_ADMIN_PREFIX    = {{ adminPrefix | dump | safe }};
+  window.MILLAS_RESOURCE_SLUG   = {{ resource.slug | dump | safe }};
 </script>
+<script src="{{ adminPrefix }}/static/SelectFilter2.js?v=1"></script>
+<script src="{{ adminPrefix }}/static/change_form.js?v=1"></script>

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

@@ -95,8 +95,8 @@
       <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>
+      <button type="button" class="btn btn-ghost btn-sm" data-m2m-move data-m2m-field="{{ field.name }}" data-m2m-from="available" data-m2m-to="chosen">→</button>
+      <button type="button" class="btn btn-ghost btn-sm" data-m2m-move data-m2m-field="{{ field.name }}" data-m2m-from="chosen" data-m2m-to="available">←</button>
     </div>
     <div style="flex:1">
       <div class="form-label" style="font-size:11px;color:var(--text-soft)">Chosen</div>
@@ -141,14 +141,14 @@
 {% 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>
+    <button type="button" data-rt-cmd="bold" title="Bold"><b>B</b></button>
+    <button type="button" data-rt-cmd="italic" title="Italic"><i>I</i></button>
+    <button type="button" data-rt-cmd="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>
+    <button type="button" data-rt-cmd="insertUnorderedList" title="Bullet list">≡</button>
+    <button type="button" data-rt-cmd="insertOrderedList" title="Numbered list">1.</button>
     <span class="rt-sep"></span>
-    <button type="button" onclick="rtLink()" title="Link">🔗</button>
+    <button type="button" data-rt-link title="Link">🔗</button>
   </div>
   <div id="rt-{{ field.name }}" class="richtext-editor form-control{% if hasError %} error{% endif %}"
     contenteditable="true"
@@ -159,13 +159,13 @@
 {# ── Password ── #}
 {% elif field.type == 'password' %}
 <div style="position:relative">
-  <input type="password" id="field-{{ field.name }}" name="{{ field.name }}"
+  <input autocomplete="new-password" 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'">
+    data-pw-toggle>
     <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>

package/src/ai/AITokenBudget.js

@@ -31,7 +31,7 @@
  *   Route.post('/ai/chat', [
  *     AITokenBudget.perUser({ daily: 100_000 }).middleware(),
  *   ], async (req) => {
- *     const res = await AI.chat(req.validated.message, { userId: req.user.id });
+ *     const res = await AI.chat(body.message, { userId: user.id });
  *     await req.deductTokens(res.totalTokens);   // <-- deduct after response
  *     return jsonify({ reply: res.text });
  *   });