rdbr 0.1.0

data/app/public/application.js

@@ -0,0 +1,609 @@
+(() => {
+  const picker = document.querySelector('[data-theme-picker]');
+  if (!picker) return;
+
+  const storedTheme = window.localStorage.getItem('rdbr-theme');
+  picker.value = ['dark', 'madhat2r'].includes(storedTheme) ? 'dark' : 'default';
+  picker.addEventListener('change', () => {
+    if (picker.value === 'dark') {
+      document.documentElement.dataset.theme = picker.value;
+      window.localStorage.setItem('rdbr-theme', picker.value);
+    } else {
+      delete document.documentElement.dataset.theme;
+      window.localStorage.removeItem('rdbr-theme');
+    }
+  });
+})();
+
+(() => {
+  const dialog = document.querySelector('#date-filter');
+  if (!dialog) return;
+
+  const fromInput = dialog.querySelector('[data-date-from]');
+  const toInput = dialog.querySelector('[data-date-to]');
+  const fromPicker = dialog.querySelector('[data-native-date-from]');
+  const toPicker = dialog.querySelector('[data-native-date-to]');
+  let column;
+
+  const dateText = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+  const shifted = (date, days) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+  const parseIsoDate = (input) => {
+    const match = input.value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    const date = match && new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+    const valid = date &&
+      date.getFullYear() === Number(match[1]) &&
+      date.getMonth() === Number(match[2]) - 1 &&
+      date.getDate() === Number(match[3]);
+    input.setCustomValidity(valid ? '' : 'Enter a valid date in YYYY-MM-DD format.');
+    return valid ? date : undefined;
+  };
+
+  const open = (trigger) => {
+    column = trigger.dataset.dateFilterColumn;
+    dialog.querySelector('.date-filter-column').textContent = column;
+    const value = trigger.dataset.dateFilterValue;
+    if (value) {
+      const day = value.slice(0, 10);
+      fromInput.value = day;
+      toInput.value = day;
+      fromPicker.value = day;
+      toPicker.value = day;
+    }
+    dialog.hidden = false;
+    fromInput.focus();
+  };
+
+  const applyRange = (from, to) => {
+    const url = new URL(window.location.href);
+    Array.from(url.searchParams.keys())
+      .filter((key) => key.startsWith(`filter[${column}]`))
+      .forEach((key) => url.searchParams.delete(key));
+    url.searchParams.set(`filter[${column}][from]`, dateText(from));
+    url.searchParams.set(`filter[${column}][to]`, dateText(to));
+    url.searchParams.set('page', '1');
+    window.location.assign(url);
+  };
+
+  document.addEventListener('click', (event) => {
+    const trigger = event.target.closest('[data-date-filter-column]');
+    if (trigger) open(trigger);
+  });
+  [[fromInput, fromPicker], [toInput, toPicker]].forEach(([input, picker]) => {
+    input.addEventListener('input', () => {
+      picker.value = /^\d{4}-\d{2}-\d{2}$/.test(input.value) ? input.value : '';
+    });
+    picker.addEventListener('change', () => {
+      if (picker.value) input.value = picker.value;
+      input.setCustomValidity('');
+    });
+  });
+  dialog.addEventListener('click', (event) => {
+    if (event.target === dialog || event.target.closest('[data-close-date-filter]')) dialog.hidden = true;
+    const pickerName = event.target.closest('[data-open-date-picker]')?.dataset.openDatePicker;
+    if (pickerName) {
+      const picker = pickerName === 'from' ? fromPicker : toPicker;
+      if (picker.showPicker) picker.showPicker();
+      else picker.click();
+      return;
+    }
+    const preset = event.target.closest('[data-date-preset]')?.dataset.datePreset;
+    if (!preset) return;
+
+    const today = new Date();
+    if (preset === 'today') applyRange(today, today);
+    if (preset === 'yesterday') applyRange(shifted(today, -1), shifted(today, -1));
+    if (preset === 'last-7-days') applyRange(shifted(today, -6), today);
+    if (preset === 'last-30-days') applyRange(shifted(today, -29), today);
+    if (preset === 'this-month') {
+      applyRange(new Date(today.getFullYear(), today.getMonth(), 1),
+        new Date(today.getFullYear(), today.getMonth() + 1, 0));
+    }
+  });
+  dialog.querySelector('form').addEventListener('submit', (event) => {
+    event.preventDefault();
+    toInput.setCustomValidity('');
+    const from = parseIsoDate(fromInput);
+    const inclusiveTo = parseIsoDate(toInput);
+    if (!from || !inclusiveTo) {
+      dialog.querySelector('form').reportValidity();
+      return;
+    }
+    if (from > inclusiveTo) {
+      toInput.setCustomValidity('The To date must be on or after the From date.');
+      toInput.reportValidity();
+      return;
+    }
+    applyRange(from, inclusiveTo);
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') dialog.hidden = true;
+  });
+})();
+
+(() => {
+  document.querySelectorAll('[data-open-dialog]').forEach((trigger) => {
+    trigger.addEventListener('click', () => {
+      const dialog = document.getElementById(trigger.dataset.openDialog);
+      if (!dialog) return;
+
+      dialog.hidden = false;
+      dialog.querySelector('[data-close-dialog]')?.focus();
+    });
+  });
+
+  document.querySelectorAll('.text-dialog').forEach((dialog) => {
+    dialog.addEventListener('click', (event) => {
+      if (event.target === dialog || event.target.closest('[data-close-dialog]')) dialog.hidden = true;
+    });
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+
+    document.querySelectorAll('.text-dialog:not([hidden])').forEach((dialog) => { dialog.hidden = true; });
+  });
+})();
+
+(() => {
+  const dialog = document.createElement('div');
+  dialog.className = 'deferred-value-popover popup-surface';
+  dialog.id = 'deferred-value-popover';
+  dialog.setAttribute('role', 'dialog');
+  dialog.setAttribute('aria-label', 'Identifier value');
+  dialog.hidden = true;
+  dialog.innerHTML = '<button class="dialog-close" type="button" aria-label="Close">×</button><pre></pre>';
+  document.body.append(dialog);
+
+  let activeView;
+  const closeDialog = () => {
+    dialog.hidden = true;
+    activeView?.setAttribute('aria-expanded', 'false');
+    activeView = undefined;
+  };
+  const openDialog = (trigger) => {
+    activeView?.setAttribute('aria-expanded', 'false');
+    activeView = trigger;
+    activeView.setAttribute('aria-expanded', 'true');
+    dialog.querySelector('pre').textContent = trigger.dataset.viewValue;
+    dialog.hidden = false;
+
+    const triggerBounds = trigger.getBoundingClientRect();
+    const dialogBounds = dialog.getBoundingClientRect();
+    const margin = 8;
+    const maximumLeft = window.innerWidth - dialogBounds.width - margin;
+    const left = Math.max(margin, Math.min(triggerBounds.left, maximumLeft));
+    const below = triggerBounds.bottom + margin;
+    const top = below + dialogBounds.height <= window.innerHeight ?
+      below : Math.max(margin, triggerBounds.top - dialogBounds.height - margin);
+    dialog.style.left = `${left}px`;
+    dialog.style.top = `${top}px`;
+  };
+  const copyFallback = (value) => {
+    const input = document.createElement('textarea');
+    input.value = value;
+    input.style.position = 'fixed';
+    input.style.opacity = '0';
+    document.body.append(input);
+    input.select();
+    document.execCommand('copy');
+    input.remove();
+  };
+
+  document.addEventListener('click', async (event) => {
+    const view = event.target.closest('[data-view-value]');
+    if (view) {
+      if (view === activeView && !dialog.hidden) closeDialog();
+      else openDialog(view);
+      return;
+    }
+
+    const copy = event.target.closest('[data-copy-value], [data-copy-target]');
+    if (!copy) {
+      if (!dialog.hidden && !dialog.contains(event.target)) closeDialog();
+      return;
+    }
+
+    try {
+      const target = copy.dataset.copyTarget ? document.getElementById(copy.dataset.copyTarget) : undefined;
+      const value = target ? target.querySelector('pre').textContent : copy.dataset.copyValue;
+      if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(value);
+      else copyFallback(value);
+      const status = copy.parentElement.querySelector('.deferred-copy-status');
+      status.textContent = 'Copied';
+      window.setTimeout(() => { status.textContent = ''; }, 1500);
+    } catch (_error) {
+      copy.parentElement.querySelector('.deferred-copy-status').textContent = 'Copy failed';
+    }
+  });
+  dialog.addEventListener('click', (event) => {
+    if (event.target.closest('.dialog-close')) closeDialog();
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || dialog.hidden) return;
+
+    const trigger = activeView;
+    closeDialog();
+    trigger?.focus();
+  });
+  window.addEventListener('resize', closeDialog);
+  window.addEventListener('scroll', (event) => {
+    if (event.target === dialog || dialog.contains(event.target)) return;
+
+    closeDialog();
+  }, true);
+})();
+
+(() => {
+  const pageSize = document.querySelector('[data-page-size]');
+  const pageJump = document.querySelector('[data-page-jump]');
+  const pagination = document.querySelector('.table-pagination');
+  const tableScroller = document.querySelector('.table-scroll');
+  const allowedSizes = ['10', '25', '50', '100'];
+  const preferenceKey = 'rdbr.pageSize';
+  const preferenceCookie = 'rdbr_page_size';
+  const renderedPageSize = Number(pageSize?.value || '25');
+  const scrollKey = (url) => `rdbr.tableScroll:${url.pathname}${url.search}`;
+
+  const preserveHorizontalScroll = (url) => {
+    if (!tableScroller) return;
+
+    window.sessionStorage.setItem(scrollKey(url), String(tableScroller.scrollLeft));
+  };
+
+  if (tableScroller) {
+    const key = scrollKey(window.location);
+    const savedScroll = window.sessionStorage.getItem(key);
+    if (savedScroll !== null) {
+      window.sessionStorage.removeItem(key);
+      tableScroller.scrollLeft = Number(savedScroll);
+      delete document.documentElement.dataset.restoreTableScroll;
+    }
+  }
+
+  const rememberPageSize = (value) => {
+    window.localStorage.setItem(preferenceKey, value);
+    document.cookie = `${preferenceCookie}=${value}; Path=/; Max-Age=31536000; SameSite=Lax`;
+  };
+
+  const navigate = (changes, preserveScroll = false) => {
+    const url = new URL(window.location.href);
+    Object.entries(changes).forEach(([name, value]) => url.searchParams.set(name, value));
+    if (preserveScroll) preserveHorizontalScroll(url);
+    window.location.assign(url);
+  };
+
+  const pageContainingCurrentTopRow = (newSize) => {
+    const url = new URL(window.location.href);
+    const currentPage = Number(url.searchParams.get('page') || '1');
+    const topRowOffset = (currentPage - 1) * renderedPageSize;
+    return String(Math.floor(topRowOffset / Number(newSize)) + 1);
+  };
+
+  if (pageSize) {
+    const preferred = window.localStorage.getItem(preferenceKey);
+    const current = new URL(window.location.href).searchParams.get('per_page');
+    if (allowedSizes.includes(current)) {
+      rememberPageSize(current);
+    } else if (allowedSizes.includes(preferred)) {
+      rememberPageSize(preferred);
+    }
+    if (!current && allowedSizes.includes(preferred) && String(renderedPageSize) !== preferred) {
+      navigate({ per_page: preferred, page: pageContainingCurrentTopRow(preferred) });
+      return;
+    }
+
+    pageSize.addEventListener('change', () => {
+      rememberPageSize(pageSize.value);
+      navigate({ per_page: pageSize.value, page: pageContainingCurrentTopRow(pageSize.value) }, true);
+    });
+  }
+
+  pagination?.addEventListener('click', (event) => {
+    const link = event.target.closest('a');
+    if (!link || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+    preserveHorizontalScroll(new URL(link.href));
+  });
+
+  if (pageJump) {
+    const goToPage = () => {
+      const requestedPage = Number(pageJump.value);
+      const lastPage = Number(pageJump.dataset.lastPage);
+      if (!Number.isInteger(requestedPage) || requestedPage < 1 || requestedPage > lastPage) return;
+
+      navigate({ page: String(requestedPage) }, true);
+    };
+    pageJump.addEventListener('change', goToPage);
+    pageJump.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') goToPage();
+    });
+  }
+})();
+
+(() => {
+  const trigger = document.querySelector('[data-column-picker-trigger]');
+  const picker = document.querySelector('#column-picker');
+  const controls = picker?.querySelector('[data-column-picker-form]');
+  const list = picker?.querySelector('.column-picker-list');
+  const section = document.querySelector('[data-column-preference-cookie]');
+  if (!trigger || !picker || !controls || !list || !section) return;
+
+  const cookieName = section.dataset.columnPreferenceCookie;
+  const storageKey = section.dataset.columnPreferenceStorage;
+  const restoreKey = `${storageKey}.restoreAttempted`;
+  const cookieExists = document.cookie.split('; ').some((cookie) => cookie.startsWith(`${cookieName}=`));
+  const storedPreference = window.localStorage.getItem(storageKey);
+  if (storedPreference && !cookieExists && !window.sessionStorage.getItem(restoreKey)) {
+    window.sessionStorage.setItem(restoreKey, 'true');
+    document.cookie = `${cookieName}=${encodeURIComponent(storedPreference)}; Path=/; Max-Age=31536000; SameSite=Lax`;
+    window.location.reload();
+    return;
+  }
+  if (cookieExists) window.sessionStorage.removeItem(restoreKey);
+
+  const close = () => {
+    picker.hidden = true;
+    trigger.setAttribute('aria-expanded', 'false');
+  };
+  const position = () => {
+    const triggerBounds = trigger.getBoundingClientRect();
+    const pickerBounds = picker.getBoundingClientRect();
+    const margin = 8;
+    const left = Math.max(margin, Math.min(triggerBounds.right - pickerBounds.width,
+      window.innerWidth - pickerBounds.width - margin));
+    picker.style.left = `${left}px`;
+    picker.style.top = `${Math.max(margin, Math.min(triggerBounds.bottom + margin,
+      window.innerHeight - pickerBounds.height - margin))}px`;
+  };
+  const open = () => {
+    picker.hidden = false;
+    trigger.setAttribute('aria-expanded', 'true');
+    position();
+    picker.querySelector('input')?.focus();
+  };
+  const currentPreference = () => {
+    const rows = Array.from(list.querySelectorAll('[data-column-name]'));
+    const checked = rows.filter((row) => row.querySelector('input').checked);
+    if (checked.length === 0 && rows[0]) rows[0].querySelector('input').checked = true;
+    return {
+      order: rows.map((row) => row.dataset.columnName),
+      hidden: rows.filter((row) => !row.querySelector('input').checked)
+        .map((row) => row.dataset.columnName)
+    };
+  };
+  const applyToTable = (preference) => {
+    document.querySelectorAll('.data-table').forEach((table) => {
+      const headingRow = table.querySelector('thead tr');
+      const headings = new Map(Array.from(headingRow?.querySelectorAll('[data-column]') || [])
+        .map((cell) => [cell.dataset.column, cell]));
+      preference.order.forEach((name) => {
+        const heading = headings.get(name);
+        if (heading) headingRow.append(heading);
+      });
+      headings.forEach((heading, name) => { heading.hidden = preference.hidden.includes(name); });
+
+      table.querySelectorAll('tbody tr').forEach((row) => {
+        const cells = new Map(Array.from(row.querySelectorAll('[data-column-cell]'))
+          .map((cell) => [cell.dataset.columnCell, cell]));
+        preference.order.forEach((name) => {
+          const cell = cells.get(name);
+          if (cell) row.append(cell);
+        });
+        cells.forEach((cell, name) => { cell.hidden = preference.hidden.includes(name); });
+      });
+    });
+    window.dispatchEvent(new Event('resize'));
+  };
+  const save = () => {
+    const preference = currentPreference();
+    const serialized = JSON.stringify(preference);
+    window.localStorage.setItem(storageKey, serialized);
+    document.cookie = `${cookieName}=${encodeURIComponent(serialized)}; Path=/; Max-Age=31536000; SameSite=Lax`;
+    applyToTable(preference);
+  };
+
+  trigger.addEventListener('click', () => { if (picker.hidden) open(); else close(); });
+  picker.querySelector('[data-close-column-picker]').addEventListener('click', close);
+  picker.querySelector('[data-show-all-columns]').addEventListener('click', () => {
+    list.querySelectorAll('input').forEach((input) => { input.checked = true; });
+    save();
+  });
+  picker.querySelector('[data-reset-columns]').addEventListener('click', () => {
+    window.localStorage.removeItem(storageKey);
+    document.cookie = `${cookieName}=; Path=/; Max-Age=0; SameSite=Lax`;
+    window.location.reload();
+  });
+  picker.addEventListener('click', (event) => {
+    const button = event.target.closest('[data-move-column]');
+    if (!button) return;
+
+    const row = button.closest('[data-column-name]');
+    if (button.dataset.moveColumn === 'up' && row.previousElementSibling) list.insertBefore(row, row.previousElementSibling);
+    if (button.dataset.moveColumn === 'down' && row.nextElementSibling) list.insertBefore(row.nextElementSibling, row);
+    save();
+  });
+  controls.addEventListener('change', (event) => {
+    if (!event.target.matches('input[type="checkbox"]')) return;
+
+    const checked = list.querySelectorAll('input[type="checkbox"]:checked');
+    if (checked.length === 0) event.target.checked = true;
+    save();
+  });
+
+  let dragged;
+  list.addEventListener('dragstart', (event) => {
+    dragged = event.target.closest('[data-column-name]');
+    dragged?.classList.add('dragging');
+  });
+  list.addEventListener('dragover', (event) => {
+    event.preventDefault();
+    const target = event.target.closest('[data-column-name]');
+    if (!dragged || !target || dragged === target) return;
+
+    const after = event.clientY > target.getBoundingClientRect().top + target.offsetHeight / 2;
+    list.insertBefore(dragged, after ? target.nextElementSibling : target);
+  });
+  list.addEventListener('dragend', () => {
+    dragged?.classList.remove('dragging');
+    dragged = undefined;
+    save();
+  });
+  document.addEventListener('click', (event) => {
+    if (!picker.hidden && !picker.contains(event.target) && !trigger.contains(event.target)) close();
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || picker.hidden) return;
+
+    close();
+    trigger.focus();
+  });
+  const reposition = () => { if (!picker.hidden) position(); };
+  window.addEventListener('resize', reposition);
+  window.addEventListener('scroll', reposition, true);
+})();
+
+(() => {
+  const scroller = document.querySelector('.table-scroll');
+  const table = scroller?.querySelector('.data-table');
+  const heading = table?.querySelector('thead');
+  const toolbar = document.querySelector('.table-page-heading');
+  const filters = document.querySelector('.active-filters');
+
+  if (!scroller || !table || !heading) return;
+
+  const container = document.createElement('div');
+  const floatingTable = document.createElement('table');
+  const floatingHeading = heading.cloneNode(true);
+  const floatingScroll = document.createElement('div');
+  const floatingScrollWidth = document.createElement('div');
+  container.className = 'floating-table-header';
+  floatingScroll.className = 'floating-horizontal-scroll';
+  floatingScrollWidth.className = 'floating-horizontal-scroll-width';
+  floatingTable.className = 'data-table';
+  floatingTable.append(floatingHeading);
+  container.append(floatingTable);
+  floatingScroll.append(floatingScrollWidth);
+  scroller.before(floatingScroll);
+  document.body.append(container);
+
+  const stickyOffset = () => {
+    const toolbarHeight = toolbar?.getBoundingClientRect().height || 0;
+    const filtersHeight = filters?.getBoundingClientRect().height || 0;
+    const scrollHeight = floatingScroll.classList.contains('visible') ? floatingScroll.offsetHeight : 0;
+    document.documentElement.style.setProperty('--table-toolbar-height', `${toolbarHeight}px`);
+    floatingScroll.style.top = `${toolbarHeight + filtersHeight}px`;
+    container.style.top = `${toolbarHeight + filtersHeight + scrollHeight}px`;
+    return toolbarHeight + filtersHeight + scrollHeight;
+  };
+
+  const synchronizeGeometry = () => {
+    const scrollerBounds = scroller.getBoundingClientRect();
+    const cells = Array.from(heading.querySelectorAll('th'));
+    const floatingCells = Array.from(floatingHeading.querySelectorAll('th'));
+
+    container.style.left = `${scrollerBounds.left}px`;
+    container.style.width = `${scrollerBounds.width}px`;
+    floatingScroll.style.width = `${scrollerBounds.width}px`;
+    floatingScrollWidth.style.width = `${table.scrollWidth}px`;
+    floatingTable.style.width = `${table.scrollWidth}px`;
+    const horizontallyScrollable = table.scrollWidth > scroller.clientWidth;
+    floatingScroll.classList.toggle('visible', horizontallyScrollable);
+    cells.forEach((cell, index) => {
+      const width = cell.getBoundingClientRect().width;
+      floatingCells[index].style.width = `${width}px`;
+      floatingCells[index].style.minWidth = `${width}px`;
+      floatingCells[index].style.maxWidth = `${width}px`;
+    });
+  };
+
+  const update = () => {
+    const bounds = scroller.getBoundingClientRect();
+    const headingHeight = heading.getBoundingClientRect().height;
+    const offset = stickyOffset();
+    const visible = bounds.top <= offset && bounds.bottom > offset + headingHeight;
+    container.classList.toggle('visible', visible);
+    floatingScroll.scrollLeft = scroller.scrollLeft;
+    floatingTable.style.transform = `translateX(${-scroller.scrollLeft}px)`;
+
+    const firstCell = floatingHeading.querySelector('.record-link-column');
+    if (firstCell) firstCell.style.transform = `translateX(${scroller.scrollLeft}px)`;
+  };
+
+  const refresh = () => {
+    synchronizeGeometry();
+    update();
+  };
+
+  scroller.addEventListener('scroll', update, { passive: true });
+  floatingScroll.addEventListener('scroll', () => {
+    if (scroller.scrollLeft !== floatingScroll.scrollLeft) scroller.scrollLeft = floatingScroll.scrollLeft;
+  }, { passive: true });
+  window.addEventListener('scroll', update, { passive: true });
+  window.addEventListener('resize', refresh);
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(refresh);
+    if (toolbar) observer.observe(toolbar);
+    if (filters) observer.observe(filters);
+  }
+  refresh();
+})();
+
+(() => {
+  const numberFormatter = new Intl.NumberFormat();
+  const schemas = Array.from(document.querySelectorAll('.relation-schema'));
+  const closeSchema = (details) => { details.open = false; };
+  const closeSchemasExcept = (active) => {
+    schemas.forEach((details) => {
+      if (details !== active) closeSchema(details);
+    });
+  };
+
+  schemas.forEach((details) => {
+    details.addEventListener('toggle', async () => {
+      if (!details.open) return;
+
+      closeSchemasExcept(details);
+      if (details.dataset.rowCountLoaded) return;
+
+      const output = details.querySelector('.schema-row-count');
+      output.textContent = 'Rows: counting…';
+      details.dataset.rowCountLoaded = 'true';
+      try {
+        const response = await fetch(details.dataset.rowCountUrl, { headers: { Accept: 'application/json' } });
+        if (!response.ok) throw new Error(`Count failed with status ${response.status}`);
+
+        const count = (await response.json()).total_count;
+        output.textContent = count === null ? 'Rows: unavailable' : `Rows: ${numberFormatter.format(count)}`;
+      } catch (_error) {
+        output.textContent = 'Rows: unavailable';
+      }
+    });
+  });
+
+  document.addEventListener('click', (event) => {
+    const closeButton = event.target.closest('[data-close-schema]');
+    if (closeButton) {
+      closeSchema(closeButton.closest('.relation-schema'));
+      return;
+    }
+
+    schemas.forEach((details) => {
+      if (details.open && !details.contains(event.target)) closeSchema(details);
+    });
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+
+    const active = schemas.find((details) => details.open);
+    if (!active) return;
+
+    closeSchema(active);
+    active.querySelector('summary').focus();
+  });
+  window.addEventListener('resize', () => schemas.forEach(closeSchema));
+})();