@mmlogic/components 0.3.5 → 0.3.6

package/dist/collection/dev/app.js

@@ -1,890 +0,0 @@
-/* =====================================================================
-   APP STATE
-   ===================================================================== */
-
-let _selectedTenant    = null;
-let _selectedType      = null; // { name, pluralName }
-let _relationMeta      = {};   // relatedClass / mostSignificantClass → { name, mostSignificantClass }
-let _baseHref          = null; // tenant base href: /data/{tenant}
-let _locale            = navigator.language || 'nl-NL';
-let _dashboardData     = null; // full dashboard response
-let _dashboardRecord   = null; // data-object voor object/form dashboards
-let _activeLayoutIndex = 0;
-let _dashboardType     = 'class'; // 'class' | 'general' | 'navigation' | 'object' | 'form'
-let _sectionGeneration = 0;       // incremented on each renderSection(); prevents stale fetches
-let _navHistory        = [];      // stack van { dashboardData, dashboardRecord, activeLayoutIndex }
-let _meUser            = null;    // { id: href, label: name } — resolved once after login via /accounts/me
-
-/* =====================================================================
-   UTILITIES
-   ===================================================================== */
-
-function escHtml(str) {
-  if (str == null) return '';
-  return String(str)
-    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
-function formatJson(value) {
-  try {
-    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-    const json = JSON.stringify(parsed, null, 2);
-    return json.replace(
-      /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
-      match => {
-        let style = 'color:#2aa198';
-        if (/^"/.test(match)) {
-          style = /:$/.test(match) ? 'color:#81a1c1' : 'color:#a3be8c';
-        } else if (/true|false/.test(match)) {
-          style = 'color:#ebcb8b';
-        } else if (/null/.test(match)) {
-          style = 'color:#bf616a';
-        }
-        return `<span style="${style}">${match}</span>`;
-      },
-    );
-  } catch {
-    return escHtml(String(value));
-  }
-}
-
-function httpStatusText(code) {
-  const map = {
-    200: 'OK', 201: 'Created', 204: 'No Content',
-    400: 'Bad Request', 401: 'Unauthorized', 403: 'Forbidden',
-    404: 'Not Found', 409: 'Conflict', 422: 'Unprocessable Entity',
-    500: 'Internal Server Error',
-  };
-  return map[code] || '';
-}
-
-const EVENT_LOG_MAX = 200;
-
-function logEvent(type, data) {
-  const log = document.getElementById('event-log');
-
-  const empty = log.querySelector('.event-log-empty');
-  if (empty) empty.remove();
-
-  // Trim oldest entries when the log grows too large
-  while (log.children.length >= EVENT_LOG_MAX) log.removeChild(log.firstChild);
-
-  const now  = new Date();
-  const time = now.toTimeString().slice(0, 8) + '.' + String(now.getMilliseconds()).padStart(3, '0');
-  const json = data !== undefined ? JSON.stringify(data, null, 2) : null;
-
-  const entry = document.createElement('div');
-  entry.className  = 'event-log-entry';
-  entry.dataset.type = type;
-  entry.innerHTML = `
-    <div class="event-log-entry-head">
-      <span class="event-log-time">${escHtml(time)}</span>
-      <span class="event-log-type">${escHtml(type)}</span>
-      ${json ? '<span class="event-log-arrow">▶</span>' : ''}
-    </div>
-    ${json ? `<pre class="event-log-detail">${escHtml(json)}</pre>` : ''}`;
-
-  entry.querySelector('.event-log-entry-head')?.addEventListener('click', () => {
-    if (json) entry.classList.toggle('open');
-  });
-
-  log.appendChild(entry);
-  log.scrollTop = log.scrollHeight;
-}
-
-function clearEventLog() {
-  const log = document.getElementById('event-log');
-  log.innerHTML = '<span class="event-log-empty">Wacht op events…</span>';
-}
-
-/* =====================================================================
-   TAB SWITCHING
-   ===================================================================== */
-
-function showTab(name) {
-  const names = ['embedded', 'field-types', 'detail-view', 'live-api'];
-  document.querySelectorAll('.tab-btn').forEach((btn, i) => {
-    btn.classList.toggle('active', names[i] === name);
-  });
-  names.forEach(n => {
-    document.getElementById('tab-' + n).classList.toggle('active', n === name);
-  });
-  if (name === 'detail-view') initDetailViewTab();
-}
-
-/* =====================================================================
-   DETAIL VIEW TAB
-   ===================================================================== */
-
-let _detailViewInitialized = false;
-
-function initDetailViewTab() {
-  if (_detailViewInitialized) return;
-  _detailViewInitialized = true;
-
-  const table = document.getElementById('companies-table');
-  const meta  = window.EXAMPLE_COMPANY_METADATA;
-
-  table.columns      = window.EXAMPLE_COMPANY_COLUMNS;
-  table.totalElements = window.EXAMPLE_COMPANIES.length;
-  table.pageSize     = 20;
-  table.locale       = 'nl-NL';
-
-  table.addEventListener('mrdLoadPage', async (e) => {
-    await table.setPage(e.detail.page, window.EXAMPLE_COMPANIES);
-  });
-
-  table.addEventListener('mrdRowClick', (e) => {
-    showCompanyDetail(e.detail);
-  });
-
-  table.init().then(() => table.setPage(0, window.EXAMPLE_COMPANIES));
-}
-
-function showCompanyDetail(row) {
-  document.getElementById('detail-table-panel').style.display = 'none';
-  document.getElementById('detail-record-panel').style.display = 'block';
-
-  // Use the static example company (in a real app: fetch /data/:tenant/companies/:id)
-  const company  = window.EXAMPLE_COMPANY;
-  const meta     = window.EXAMPLE_COMPANY_METADATA;
-  const container = document.getElementById('detail-sections');
-  container.innerHTML = '';
-
-  meta.layouts.forEach((layout, idx) => {
-    const wrapper = document.createElement('div');
-    wrapper.style.marginBottom = '2rem';
-
-    if (layout.label) {
-      const heading = document.createElement('h3');
-      heading.style.cssText = 'font-size:1.1rem;font-weight:600;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid #e5e7eb';
-      heading.textContent = layout.label;
-      wrapper.appendChild(heading);
-    }
-
-    const section = document.createElement('mrd-layout-section');
-    section.items = layout.items;
-    section.data  = company;
-    section.views = meta.views;
-    section.locale = 'nl-NL';
-
-    section.addEventListener('mrdNavigate', (e) => {
-      logEvent('mrdNavigate', e.detail);
-    });
-
-    section.addEventListener('mrdLoadView', async (e) => {
-      const { name, viewConfig } = e.detail;
-      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
-      await section.setViewPage(name, 0, mockRows, mockRows.length);
-    });
-
-    section.addEventListener('mrdLoadViewPage', async (e) => {
-      // No more pages in the mock — just set the same rows again
-      const { name } = e.detail;
-      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
-      await section.setViewPage(name, e.detail.page, mockRows);
-    });
-
-    wrapper.appendChild(section);
-    container.appendChild(wrapper);
-  });
-}
-
-function showCompanyList() {
-  document.getElementById('detail-record-panel').style.display = 'none';
-  document.getElementById('detail-table-panel').style.display = 'block';
-}
-
-/* =====================================================================
-   TENANT SELECTION
-   ===================================================================== */
-
-async function loadTenants() {
-  document.getElementById('panel-controls').classList.remove('hidden');
-  const sel = document.getElementById('tenant-select-compact');
-  sel.innerHTML = '<option value="">⏳ laden...</option>';
-
-  try {
-    const tenants = await apiFetchTenants(authGetToken());
-    if (!tenants || tenants.length === 0) {
-      sel.innerHTML = '<option value="">— geen tenants gevonden —</option>';
-      return;
-    }
-    sel.innerHTML = '<option value="">— selecteer tenant —</option>' +
-      tenants.map(t => {
-        const code = t.tenantCode || t.code || t.id;
-        return `<option value="${escHtml(code)}">${escHtml(t.name || code)}</option>`;
-      }).join('');
-
-    const saved = localStorage.getItem('last_tenant');
-    if (saved) {
-      sel.value = saved;
-      onCompactTenantChange(saved);
-    }
-  } catch (err) {
-    sel.innerHTML = `<option value="">❌ ${escHtml(err.message)}</option>`;
-  }
-}
-
-function onCompactTenantChange(code) {
-  _selectedTenant = code;
-  _baseHref = `/data/${code}`;
-  localStorage.setItem('last_tenant', code);
-  if (_dashboardType === 'class' && code) loadCompactTypes(code);
-  if (code) apiFetchMe(authGetToken(), code).then(me => { _meUser = me; }).catch(() => {});
-}
-
-async function loadCompactTypes(tenantCode) {
-  const sel = document.getElementById('type-select-compact');
-  sel.innerHTML = '<option value="">⏳ laden...</option>';
-  sel.disabled = true;
-  try {
-    const types = await apiFetchTypes(authGetToken(), tenantCode);
-    if (!types || types.length === 0) {
-      sel.innerHTML = '<option value="">— geen types —</option>';
-      return;
-    }
-    sel.innerHTML = '<option value="">— selecteer type —</option>' +
-      types.map(t => {
-        const plural = t.pluralName || t.name;
-        return `<option value="${escHtml(plural)}">${escHtml(t.name)}</option>`;
-      }).join('');
-    sel.disabled = false;
-
-    const saved = localStorage.getItem('last_type');
-    if (saved && sel.querySelector(`option[value="${saved}"]`)) {
-      sel.value = saved;
-    }
-  } catch (err) {
-    sel.innerHTML = `<option value="">❌ ${escHtml(err.message)}</option>`;
-    sel.disabled = false;
-  }
-}
-
-function onDashboardTypeChange(type) {
-  _dashboardType = type;
-  const needsClass  = type === 'class' || type === 'create';
-  const needsObject = type === 'object' || type === 'form';
-  document.getElementById('controls-class-group').classList.toggle('hidden', !needsClass);
-  document.getElementById('controls-object-group').classList.toggle('hidden', !needsObject);
-  if (needsClass && _selectedTenant) loadCompactTypes(_selectedTenant);
-}
-
-/* =====================================================================
-   DASHBOARD — laad + render layout sections
-   ===================================================================== */
-
-async function loadDashboard() {
-  const name  = document.getElementById('dashboard-name-input').value.trim() || undefined;
-  const token = authGetToken();
-
-  document.getElementById('sections-container').innerHTML =
-    '<span class="spinner"></span> Dashboard laden...';
-  document.getElementById('panel-sections').classList.remove('hidden');
-  document.getElementById('panel-response').innerHTML = '';
-
-  try {
-    let dashboard;
-    let recordData = null;
-
-    if (_dashboardType === 'create') {
-      const pluralName = document.getElementById('type-select-compact').value;
-      if (!pluralName) throw new Error('Selecteer een type');
-      const opt = document.getElementById('type-select-compact').selectedOptions[0];
-      _selectedType = { name: opt.text, pluralName };
-      localStorage.setItem('last_type', pluralName);
-      await openCreateForm(pluralName, false);
-      return;
-
-    } else if (_dashboardType === 'class') {
-      const pluralName = document.getElementById('type-select-compact').value;
-      if (!pluralName) throw new Error('Selecteer een type');
-      const opt = document.getElementById('type-select-compact').selectedOptions[0];
-      _selectedType = { name: opt.text, pluralName };
-      localStorage.setItem('last_type', pluralName);
-      dashboard = await apiFetchClassDashboard(token, _selectedTenant, pluralName, name);
-
-    } else if (_dashboardType === 'general') {
-      dashboard = await apiFetchGeneralDashboard(token, _selectedTenant, name);
-
-    } else if (_dashboardType === 'navigation') {
-      dashboard = await apiFetchNavigationPane(token, _selectedTenant, name);
-
-    } else {
-      // 'object' of 'form': fetch record → gebruik _links.metadata.href of _links.form.href
-      const objectHref = document.getElementById('object-href-input').value.trim();
-      if (!objectHref) throw new Error('Vul een Object URL in');
-      const recResp = await apiRequest('GET', objectHref, token);
-      if (!recResp.ok) throw new Error(`${recResp.status}: kon object niet ophalen`);
-      recordData = recResp.body;
-
-      const linkKey  = _dashboardType === 'form' ? 'form' : 'metadata';
-      const dashHref = recordData._links?.[linkKey]?.href;
-      if (!dashHref) throw new Error(`Geen _links.${linkKey} gevonden in object`);
-
-      const dashResp = await apiRequest('GET', dashHref, token);
-      if (!dashResp.ok) throw new Error(`${dashResp.status}: dashboard ophalen mislukt`);
-      dashboard = dashResp.body;
-    }
-
-    _dashboardData   = dashboard;
-    _dashboardRecord = recordData;
-    _activeLayoutIndex = 0;
-    _navHistory = [];
-
-    renderSectionTabs(dashboard.layouts ?? []);
-    renderSection(0);
-    updateBackButton();
-  } catch (err) {
-    document.getElementById('sections-container').innerHTML =
-      `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
-  }
-}
-
-function renderSectionTabs(layouts) {
-  const bar = document.getElementById('sections-tab-bar');
-  bar.innerHTML = '';
-  if (layouts.length <= 1) return;
-
-  layouts.forEach((layout, i) => {
-    const label = layout.label ?? layout.type ?? `Sectie ${i + 1}`;
-    const btn = document.createElement('button');
-    btn.className = 'section-tab-btn' + (i === 0 ? ' active' : '');
-    btn.textContent = label;
-    btn.onclick = () => renderSection(i);
-    bar.appendChild(btn);
-  });
-}
-
-async function renderSection(index) {
-  _activeLayoutIndex = index;
-  const generation = ++_sectionGeneration; // snapshot for stale-fetch detection
-
-  document.querySelectorAll('.section-tab-btn').forEach((btn, i) =>
-    btn.classList.toggle('active', i === index));
-
-  const layout = _dashboardData.layouts[index];
-  document.getElementById('json-viewer').innerHTML = formatJson(layout);
-
-  const container = document.getElementById('sections-container');
-  container.innerHTML = '';
-
-  if (_dashboardType === 'form') {
-    await renderForm(layout, _dashboardRecord, _dashboardRecord?._links?.self?.href ?? null, container);
-    return;
-  }
-
-  const section = document.createElement('mrd-layout-section');
-  section.items  = layout.items;
-  section.data   = _dashboardRecord ?? { _links: _dashboardData._links ?? {} };
-  section.locale = _locale;
-
-  section.addEventListener('mrdLoadViewPage', async (e) => {
-    if (generation !== _sectionGeneration) return;
-    const { name, page, path, qs } = e.detail;
-    logEvent('mrdLoadViewPage', e.detail);
-    try {
-      const url = `${_baseHref}${path}${qs ? '?' + qs : ''}`;
-      const result = await apiFetchPage(authGetToken(), url, page);
-      const rows  = Object.values(result._embedded ?? {})[0] ?? [];
-      const total = result.page?.totalElements;
-      await section.setViewPage(name, page, rows, total);
-    } catch (err) {
-      console.error('[mrdLoadViewPage] mislukt', name, err);
-    }
-  });
-
-  section.addEventListener('mrdLoadViewAggregations', async (e) => {
-    if (generation !== _sectionGeneration) return;
-    const { name, path, aggQs } = e.detail;
-    logEvent('mrdLoadViewAggregations', e.detail);
-    try {
-      const aggUrl = `${_baseHref}${path}/aggregations`;
-      const result = await apiRequest('GET', aggQs ? `${aggUrl}?${aggQs}` : aggUrl, authGetToken());
-      if (result.ok) await section.setViewAggregations(name, result.body);
-    } catch (err) {
-      console.error('[mrdLoadViewAggregations] mislukt', name, err);
-    }
-  });
-
-  section.addEventListener('mrdViewAction', async (e) => {
-    logEvent('mrdViewAction', e.detail);
-    const { action, dataClass } = e.detail;
-    if (action === 'create' && dataClass) {
-      await openCreateForm(dataClass, true);
-    }
-  });
-
-  section.addEventListener('mrdNavigate', async (e) => {
-    if (generation !== _sectionGeneration) return;
-    await handleNavigate(e.detail);
-  });
-  section.addEventListener('mrdDownload',   (e) => logEvent('mrdDownload',   e.detail));
-  section.addEventListener('mrdSearch',     (e) => logEvent('mrdSearch',     e.detail));
-
-  container.appendChild(section);
-}
-
-
-function toggleJsonViewer() {
-  const viewer = document.getElementById('json-viewer');
-  const btn    = document.getElementById('btn-json-toggle');
-  const open   = !viewer.classList.toggle('hidden');
-  btn.classList.toggle('active', open);
-}
-
-function updateBackButton() {
-  const btn = document.getElementById('btn-nav-back');
-  if (btn) btn.classList.toggle('hidden', _navHistory.length === 0);
-}
-
-function syncDashboardTypeUI(type, objectHref) {
-  _dashboardType = type;
-  document.getElementById('dashboard-type-select').value = type;
-  const needsClass  = type === 'class' || type === 'create';
-  const needsObject = type === 'object' || type === 'form';
-  document.getElementById('controls-class-group').classList.toggle('hidden', !needsClass);
-  document.getElementById('controls-object-group').classList.toggle('hidden', !needsObject);
-  if (needsObject && objectHref) {
-    document.getElementById('object-href-input').value = objectHref;
-  }
-}
-
-function navigateBack() {
-  if (_navHistory.length === 0) return;
-  const prev = _navHistory.pop();
-  _dashboardData     = prev.dashboardData;
-  _dashboardRecord   = prev.dashboardRecord;
-  _activeLayoutIndex = prev.activeLayoutIndex;
-  syncDashboardTypeUI(prev.dashboardType ?? _dashboardType, prev.objectHref ?? '');
-  renderSectionTabs(_dashboardData.layouts ?? []);
-  renderSection(_activeLayoutIndex);
-  updateBackButton();
-}
-
-function pushHistory() {
-  _navHistory.push({
-    dashboardData:     _dashboardData,
-    dashboardRecord:   _dashboardRecord,
-    activeLayoutIndex: _activeLayoutIndex,
-    dashboardType:     _dashboardType,
-    objectHref:        document.getElementById('object-href-input').value,
-  });
-}
-
-async function navigateToObjectDashboard(selfHref) {
-  if (!selfHref) return;
-
-  document.getElementById('sections-container').innerHTML =
-    '<span class="spinner"></span> Object laden...';
-  document.getElementById('panel-sections').classList.remove('hidden');
-
-  try {
-    const recResp = await apiRequest('GET', selfHref, authGetToken());
-    if (!recResp.ok) throw new Error(`${recResp.status}: object ophalen mislukt`);
-    const record = recResp.body;
-
-    const dashHref = record._links?.metadata?.href;
-    if (!dashHref) throw new Error('Geen _links.metadata gevonden in object');
-
-    const dashResp = await apiRequest('GET', dashHref, authGetToken());
-    if (!dashResp.ok) throw new Error(`${dashResp.status}: dashboard ophalen mislukt`);
-    const dashboard = dashResp.body;
-
-    pushHistory();
-    _dashboardData   = dashboard;
-    _dashboardRecord = record;
-    _activeLayoutIndex = 0;
-
-    const displayHref = selfHref.startsWith('http') ? selfHref : API_BASE + selfHref;
-    syncDashboardTypeUI('object', displayHref);
-    renderSectionTabs(dashboard.layouts ?? []);
-    renderSection(0);
-    updateBackButton();
-  } catch (err) {
-    document.getElementById('sections-container').innerHTML =
-      `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
-  }
-}
-
-async function navigateToClassDashboard(pluralName) {
-  if (!_selectedTenant || !pluralName) return;
-
-  document.getElementById('sections-container').innerHTML =
-    '<span class="spinner"></span> Dashboard laden...';
-  document.getElementById('panel-sections').classList.remove('hidden');
-
-  try {
-    const dashboard = await apiFetchClassDashboard(authGetToken(), _selectedTenant, pluralName);
-
-    pushHistory();
-    _dashboardData   = dashboard;
-    _dashboardRecord = null;
-    _activeLayoutIndex = 0;
-
-    syncDashboardTypeUI('class', '');
-    const sel = document.getElementById('type-select-compact');
-    if (sel.querySelector(`option[value="${pluralName}"]`)) sel.value = pluralName;
-
-    renderSectionTabs(dashboard.layouts ?? []);
-    renderSection(0);
-    updateBackButton();
-  } catch (err) {
-    document.getElementById('sections-container').innerHTML =
-      `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
-  }
-}
-
-async function handleNavigate(detail) {
-  const { href, label, navigate } = detail;
-  if (href) {
-    logEvent('mrdNavigate', { href, label });
-    await navigateToObjectDashboard(href);
-  } else if (navigate?.dataClass) {
-    logEvent('mrdNavigate', { dataClass: navigate.dataClass, navigationType: navigate.navigationType, label });
-    await navigateToClassDashboard(navigate.dataClass);
-  } else {
-    logEvent('mrdNavigate', detail);
-  }
-}
-
-/* =====================================================================
-   FORM — LOAD & RENDER
-   ===================================================================== */
-
-/**
- * Load an existing record by clicking a table row.
- * Fetches the record (GET _links.self.href) and the form layout in parallel,
- * then opens the form pre-filled and in PATCH mode.
- */
-async function loadRecord(row) {
-  const selfHref = row?._links?.self?.href;
-  if (!selfHref) { console.warn('[loadRecord] geen _links.self.href in rij', row); return; }
-  if (!_selectedType) return;
-
-  const formPanel = document.getElementById('panel-form');
-  formPanel.classList.remove('hidden');
-  formPanel.innerHTML = '<span class="spinner"></span> Record laden...';
-  document.getElementById('panel-response').innerHTML = '';
-
-  try {
-    const recordResp = await apiRequest('GET', selfHref, authGetToken());
-    if (!recordResp.ok) throw new Error(`${recordResp.status}: kon record niet ophalen`);
-
-    const formHref = recordResp.body?._links?.form?.href ?? null;
-    const layout   = await apiFetchForm(authGetToken(), _selectedTenant, _selectedType.pluralName, formHref);
-    await renderForm(layout, recordResp.body, selfHref);
-  } catch (err) {
-    formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
-  }
-}
-
-async function loadForm() {
-  const pluralName = _selectedType?.pluralName
-    || document.getElementById('type-select-compact').value;
-  await openCreateForm(pluralName);
-}
-
-async function openCreateForm(pluralName, pushNav = false) {
-  if (!pluralName || !_selectedTenant) return;
-
-  if (pushNav) pushHistory();
-
-  syncDashboardTypeUI('create', '');
-  const sel = document.getElementById('type-select-compact');
-  if (sel.querySelector(`option[value="${pluralName}"]`)) sel.value = pluralName;
-
-  document.getElementById('sections-tab-bar').innerHTML = '';
-  document.getElementById('panel-form').classList.add('hidden');
-  document.getElementById('panel-form').innerHTML = '';
-  document.getElementById('panel-response').innerHTML = '';
-  document.getElementById('panel-sections').classList.remove('hidden');
-  updateBackButton();
-
-  const container = document.getElementById('sections-container');
-  container.innerHTML = '<span class="spinner"></span> Formulier laden...';
-
-  try {
-    const layout = await apiFetchForm(authGetToken(), _selectedTenant, pluralName);
-    await renderForm(layout, null, null, container);
-  } catch (err) {
-    container.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
-  }
-}
-
-/**
- * Mount mrd-form and wire up all event handlers.
- *
- * @param layout   - mrd-form layout descriptor
- * @param record   - existing record for edit mode (null = new record)
- * @param selfHref - absolute URL for PATCH; null = POST (new record)
- */
-async function renderForm(layout, record = null, selfHref = null, containerEl = null) {
-  // Build relation metadata map keyed by both relatedClass and mostSignificantClass
-  // so lookups work regardless of which value arrives in events (mrdSearch uses mostSignificantClass).
-  _relationMeta = {};
-  function collectRelations(items) {
-    if (!Array.isArray(items)) return;
-    items.forEach(item => {
-      if (item.type === 'RELATION' && item.relatedClass) {
-        const meta = {
-          name:                 item.name,
-          mostSignificantClass: item.mostSignificantClass,
-        };
-        _relationMeta[item.relatedClass] = meta;
-        if (item.mostSignificantClass) {
-          _relationMeta[item.mostSignificantClass] = meta;
-        }
-      }
-      if (Array.isArray(item.items)) collectRelations(item.items);
-    });
-  }
-  collectRelations(layout.items);
-
-  const relationFieldNames = new Set(Object.values(_relationMeta).map(m => m.name));
-
-  // Build initial form values from the fetched record (edit mode).
-  // Flat fields and _links are merged: the component normalises raw API link formats.
-  const { _links, _embedded, ...fields } = record ?? {};
-  const initialValues = record ? { ...fields, ...(_links ?? {}) } : {};
-
-  const formPanel = containerEl ?? document.getElementById('panel-form');
-  formPanel.innerHTML = `<mrd-form id="live-form" locale="${escHtml(_locale)}"></mrd-form>`;
-
-  const form = formPanel.querySelector('#live-form') ?? document.getElementById('live-form');
-  // Wait for Stencil to fully initialize this specific instance before setting props.
-  // componentOnReady() resolves after componentDidLoad — more reliable than customElements.whenDefined.
-  if (typeof form.componentOnReady === 'function') {
-    await form.componentOnReady();
-  } else {
-    await customElements.whenDefined('mrd-form');
-  }
-
-  form.layout = layout;
-  if (_meUser) form.me = _meUser;
-  form.values = record ? initialValues : {};
-
-  // Upload files immediately on selection; write binary URI back via setFieldValue
-    form.addEventListener('mrdChange', async (e) => {
-      const { name, value } = e.detail;
-      if (!(value instanceof File)) return;
-      try {
-        const uri = await apiUploadFile(authGetToken(), _selectedTenant, value);
-        await form.setFieldValue(name, uri);
-      } catch (err) {
-        console.error(`[upload] mislukt voor veld "${name}":`, err);
-      }
-    });
-
-    form.addEventListener('mrdSubmit', async (e) => {
-      document.getElementById('panel-response').innerHTML =
-        '<div class="response-card" style="background:var(--mrd-color-neutral-100);border-color:var(--mrd-color-neutral-300);max-width:860px"><span class="spinner"></span> Bezig met indienen...</div>';
-
-      // Transform relation values: { id: href, label } → href string
-      const transformValues = (source) => {
-        const out = {};
-        for (const [key, val] of Object.entries(source)) {
-          if (relationFieldNames.has(key)) {
-            if (Array.isArray(val)) {
-              out[key] = val.map(v => (v && typeof v === 'object' ? v.id : v));
-            } else if (val && typeof val === 'object' && val.id) {
-              out[key] = val.id;
-            } else {
-              out[key] = val;
-            }
-          } else {
-            out[key] = val;
-          }
-        }
-        return out;
-      };
-
-      if (selfHref) {
-        // PATCH mode: send only changed fields
-        const submitted = transformValues(e.detail);
-        const original  = transformValues(initialValues);
-        const patch = {};
-        for (const [key, val] of Object.entries(submitted)) {
-          if (JSON.stringify(val) !== JSON.stringify(original[key])) {
-            patch[key] = val;
-          }
-        }
-        if (Object.keys(patch).length === 0) {
-          renderResponse(200, 'Geen wijzigingen.');
-          return;
-        }
-        const result = await apiRequest('PATCH', selfHref, authGetToken(), patch);
-        renderResponse(result.status, result.body);
-      } else {
-        // POST mode: new record
-        const values = transformValues(e.detail);
-        const result = await apiSubmitForm(authGetToken(), _selectedTenant, _selectedType.pluralName, values);
-        renderResponse(result.status, result.body);
-      }
-    });
-
-    form.addEventListener('mrdSearch', async (e) => {
-      logEvent('mrdSearch (live)', e.detail);
-      const { name, query, relatedClass } = e.detail;
-      if (!query || query.length < 2) return;
-
-      // relatedClass here is actually mostSignificantClass (the URL segment).
-      // Use name to find the exact field, avoiding collisions when multiple
-      // fields share the same mostSignificantClass (e.g. 'companies').
-      try {
-        const results = await apiSearchRelation(authGetToken(), _selectedTenant, relatedClass, query);
-        const host = Array.from(form.querySelectorAll('mrd-relation-field'))
-          .find(el => el.name === name);
-        if (host && typeof host.setSearchResults === 'function') {
-          host.setSearchResults(results);
-        }
-      } catch (err) {
-        console.error('[mrdSearch] relation search failed:', err);
-      }
-    });
-
-    form.addEventListener('mrdFetchAll', async (e) => {
-      logEvent('mrdFetchAll (live)', e.detail);
-      const { name, mostSignificantClass, filter, filterValue } = e.detail;
-      if (!mostSignificantClass) return;
-
-      const host = Array.from(document.querySelectorAll('mrd-relation-field'))
-        .find(el => el.name === name);
-      if (!host || typeof host.setAllRecords !== 'function') return;
-
-      // If a filter is required but no value is set yet, clear the dropdown
-      if (filter && !filterValue) {
-        host.setAllRecords([]);
-        return;
-      }
-
-      try {
-        // Build URL: /data/{tenant}/{mostSignificantClass}?{filter}={filterValue}&page=0
-        let baseHref = `/data/${_selectedTenant}/${mostSignificantClass}`;
-        if (filter && filterValue) baseHref += `?${encodeURIComponent(filter)}=${encodeURIComponent(filterValue)}`;
-        const result   = await apiFetchPage(authGetToken(), baseHref, 0);
-        const embedded = result._embedded ?? {};
-        const records  = Object.values(embedded)[0] ?? [];
-        host.setAllRecords(records.map(r => ({ id: r._links?.self?.href ?? r.id, label: r.name })));
-      } catch (err) {
-        console.error('[mrdFetchAll] failed:', err);
-      }
-    });
-}
-
-/* =====================================================================
-   RESPONSE RENDERING
-   ===================================================================== */
-
-function renderResponse(status, body) {
-  const isOk  = status >= 200 && status < 300;
-  const cls   = isOk ? 'success' : 'error';
-  const icon  = isOk ? '✅' : '❌';
-  const label = httpStatusText(status);
-
-  let inner = '';
-
-  if (!isOk && body && typeof body === 'object') {
-    const msg   = body.message || body.error || '';
-    const trace = body.trace   || body.stackTrace || '';
-    inner = `
-      <h4>${icon} ${status} ${escHtml(label)}</h4>
-      ${msg ? `<p style="margin:.25rem 0;font-size:.875rem">${escHtml(msg)}</p>` : ''}
-      ${trace ? `<details><summary>trace</summary><pre>${escHtml(trace)}</pre></details>` : ''}
-      ${!msg && !trace ? `<pre>${escHtml(JSON.stringify(body, null, 2))}</pre>` : ''}`;
-  } else {
-    const text = typeof body === 'string' ? body : JSON.stringify(body, null, 2);
-    inner = `
-      <h4>${icon} ${status} ${escHtml(label)}</h4>
-      ${text ? `<pre>${escHtml(text)}</pre>` : ''}`;
-  }
-
-  document.getElementById('panel-response').innerHTML =
-    `<div class="response-card ${cls}">${inner}</div>`;
-}
-
-/* =====================================================================
-   EMBEDDED FORM (demo tab)
-   ===================================================================== */
-
-customElements.whenDefined('mrd-form').then(() => {
-  const form = document.getElementById('demo-form');
-  form.layout = window.EXAMPLE_LAYOUT;
-  form.values = window.EXAMPLE_VALUES;
-
-  form.addEventListener('mrdSubmit',   (e) => { console.log('[mrdSubmit]',   e.detail); logEvent('mrdSubmit',   e.detail); });
-  form.addEventListener('mrdSearch',   (e) => { console.log('[mrdSearch]',   e.detail); logEvent('mrdSearch',   e.detail); });
-  form.addEventListener('mrdFetchAll', (e) => { console.log('[mrdFetchAll]', e.detail); logEvent('mrdFetchAll', e.detail); });
-});
-
-document.getElementById('locale-select').addEventListener('change', (e) => {
-  _locale = e.target.value;
-  const demoForm = document.getElementById('demo-form');
-  if (demoForm) demoForm.locale = _locale;
-  const liveForm = document.getElementById('live-form');
-  if (liveForm) liveForm.locale = _locale;
-  // Update actieve section als aanwezig
-  const section = document.querySelector('#sections-container mrd-layout-section');
-  if (section) section.locale = _locale;
-});
-
-document.getElementById('btn-inject-results').addEventListener('click', () => {
-  const relationField = document.querySelector('mrd-relation-field');
-  if (relationField && typeof relationField.setSearchResults === 'function') {
-    relationField.setSearchResults([
-      { id: '1', label: 'Alice Johnson',    description: 'Senior Engineer' },
-      { id: '2', label: 'Bob van der Berg', description: 'Product Manager' },
-      { id: '3', label: 'Carol Martínez',   description: 'UX Designer' },
-      { id: '4', label: 'David Müller',     description: 'DevOps Lead' },
-    ]);
-  } else {
-    logEvent('info', 'Type 2+ chars in the Project Manager field first, then click this');
-  }
-});
-
-/* =====================================================================
-   BOOT
-   ===================================================================== */
-
-document.addEventListener('DOMContentLoaded', async () => {
-  // Initialize Field Types tab (static, no auth needed)
-  const ftSection = document.getElementById('field-types-section');
-  ftSection.items = window.EXAMPLE_FIELD_TYPES_ITEMS;
-  ftSection.data  = window.EXAMPLE_FIELD_TYPES_DATA;
-  ftSection.locale = 'nl-NL';
-
-  // Simulate host resolving a signed URL for IMAGE fields (thumbnail on load).
-  ftSection.addEventListener('mrdLoadImage', (e) => {
-    const staticUrl = 'https://picsum.photos/seed/mosterd/800/600';
-    ftSection.setImagePreview(e.detail.fieldName, staticUrl);
-  });
-
-  ftSection.addEventListener('mrdNavigate', (e) => {
-    logEvent('mrdNavigate', e.detail);
-  });
-
-  ftSection.addEventListener('mrdDownload', (e) => {
-    logEvent('mrdDownload', e.detail);
-  });
-
-  ftSection.addEventListener('mrdSearch', (e) => {
-    logEvent('mrdSearch', e.detail);
-    const { query, dataClass } = e.detail;
-    const mock = [
-      { id: '/data/demo/1', label: 'Alice Johnson',    description: 'Senior Engineer' },
-      { id: '/data/demo/2', label: 'Bob van der Berg', description: 'Product Manager' },
-      { id: '/data/demo/3', label: 'Carol Martínez',   description: 'UX Designer' },
-    ].filter(r => r.label.toLowerCase().includes(query.toLowerCase()));
-    ftSection.setSearchResults(mock, dataClass);
-  });
-
-  authRestoreSession();
-  await authHandleCallback();
-
-  if (authGetToken()) {
-    showTab('live-api');
-    showAuthStatus();
-    loadTenants();
-  }
-});