@andorra-labs/code 0.0.0-stage → 0.1.4

package/dist/src/graph-ui/controls.js

@@ -0,0 +1,567 @@
+/*
+ * The studio's controls in the app's register, in place of the ones the browser draws itself.
+ *
+ * The editor is a surface of the desktop app, framed in its window, so nothing on it should be the
+ * platform's own drawing: not a tooltip, not a dropdown list, not a confirmation box, not a file
+ * chooser button. This script replaces each one while keeping the platform's element underneath as
+ * the source of truth, so the editor's code and its tests keep reading `select.value`, `title`, and
+ * `input.files` as before:
+ *
+ * - Tooltips. Every `title` (and `data-tip`) shows as the app's tooltip. While the pointer rests on
+ *   an element its title is parked in `data-tip-stash` and blanked, so the platform draws nothing;
+ *   it goes back when the pointer leaves. Focus from the keyboard shows the tooltip too.
+ * - Validation. The platform's "Please fill out this field" bubble is cancelled and the message is
+ *   shown in the app's bubble, on the first invalid field, which takes focus.
+ * - Dropdowns. A press or an opening key on a `<select>` opens the app's panel instead of the
+ *   platform's list; choosing a row sets the select's value and fires its `input` and `change`.
+ * - Questions. `confirm`, `alert` and `prompt` are the app's dialogs, answered through a promise.
+ * - Files. `filePicker` is the app's drop zone and button around a hidden file input.
+ *
+ * The desktop client draws the same controls (desktop/src/engine/tooltips.ts, Select, ConfirmDialog);
+ * the two share tokens, so the editor in the window and the window around it read as one surface.
+ */
+(() => {
+  'use strict';
+  if (typeof document === 'undefined' || typeof window === 'undefined' || typeof document.createElement !== 'function') return;
+
+  const STASH = 'data-tip-stash';
+  const TOOLTIP_DELAY_MS = 450;
+  const TOOLTIP_WARM_MS = 600;
+  const FOCUS_DELAY_MS = 250;
+  const POINTER_FOCUS_MS = 400;
+  const VALIDATION_LINGER_MS = 6000;
+  const MARGIN = 8;
+  const GAP = 6;
+
+  const make = (tag, className, text) => {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined) node.textContent = String(text);
+    return node;
+  };
+  const icon = (name, size = 14) => globalThis.AndorraIcons?.icon?.(name, size) || null;
+  const reducedMotion = () => { try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return false; } };
+  /** Where a floating surface for `anchor` is attached: inside the open modal dialog holding it, else the body. */
+  const hostFor = anchor => anchor?.closest?.('dialog[open]') || document.body;
+  const escapeKey = event => event.key === 'Escape' && !event.isComposing && event.keyCode !== 229;
+
+  /** Where a floating surface goes: below its anchor, above when below has no room and above has more, inside the viewport. */
+  function place(anchor, size, viewport, align = 'center') {
+    const below = viewport.height - anchor.bottom - GAP - MARGIN;
+    const above = anchor.top - GAP - MARGIN;
+    const placement = size.height <= below || below >= above ? 'below' : 'above';
+    const width = Math.min(size.width, viewport.width - MARGIN * 2);
+    const start = align === 'start' ? anchor.left : (anchor.left + anchor.right) / 2 - width / 2;
+    const left = Math.max(MARGIN, Math.min(start, viewport.width - width - MARGIN));
+    const top = placement === 'below'
+      ? Math.min(anchor.bottom + GAP, Math.max(MARGIN, viewport.height - size.height - MARGIN))
+      : Math.max(MARGIN, anchor.top - GAP - size.height);
+    return { left: Math.round(left), top: Math.round(top), placement, room: Math.max(140, placement === 'below' ? below : above) };
+  }
+
+  // ------------------------------------------------------------------ Tooltips
+
+  const tipText = element => (element.getAttribute(STASH) ?? element.getAttribute('title') ?? element.getAttribute('data-tip') ?? '').trim();
+  function tipAnchor(target) {
+    if (!target || typeof target.closest !== 'function') return null;
+    const anchor = target.closest(`[title], [data-tip], [${STASH}]`);
+    if (!anchor) return null;
+    const tag = anchor.tagName.toLowerCase();
+    if (tag === 'iframe' || tag === 'html' || tag === 'body' || anchor.closest('.app-tooltip')) return null;
+    return tipText(anchor) === '' ? null : anchor;
+  }
+
+  function bubble(variant) {
+    let node = null;
+    const api = {
+      id: `app-tooltip-${variant}`,
+      show(anchor, text) {
+        if (!node) {
+          node = make('div', 'app-tooltip');
+          node.id = api.id;
+          node.dataset.variant = variant;
+          node.setAttribute('role', variant === 'invalid' ? 'alert' : 'tooltip');
+        }
+        node.textContent = text;
+        node.dataset.visible = 'false';
+        // A modal dialog is drawn in the top layer, over anything on the body: a bubble for a field
+        // inside one has to live inside it to be seen.
+        const host = hostFor(anchor);
+        if (node.parentElement !== host) host.append(node);
+        api.place(anchor);
+        if (reducedMotion() || typeof requestAnimationFrame !== 'function') node.dataset.visible = 'true';
+        else requestAnimationFrame(() => { if (node?.isConnected) node.dataset.visible = 'true'; });
+      },
+      place(anchor) {
+        if (!node?.isConnected) return;
+        node.style.left = '0px'; node.style.top = '0px';
+        const size = node.getBoundingClientRect();
+        const spot = place(anchor.getBoundingClientRect(), size, { width: window.innerWidth, height: window.innerHeight });
+        node.style.left = `${spot.left}px`; node.style.top = `${spot.top}px`;
+        node.dataset.placement = spot.placement;
+      },
+      hide() { node?.remove(); },
+    };
+    return api;
+  }
+
+  function installTooltips() {
+    const tip = bubble('tip');
+    const invalid = bubble('invalid');
+    let anchor = null, via = null, shown = false, showTimer, watchTimer, warmUntil = 0, lastPress = 0;
+    let invalidAnchor = null, invalidTimer, invalidThisTask = false;
+
+    const titles = new MutationObserver(records => {
+      for (const record of records) {
+        const element = record.target;
+        if (element !== anchor || !element.hasAttribute(STASH)) continue;
+        const title = element.getAttribute('title');
+        if (title === null) { element.removeAttribute(STASH); end(); return; }
+        if (title === '') continue;
+        element.setAttribute(STASH, title);
+        element.setAttribute('title', '');
+        if (shown) tip.show(element, title.trim());
+      }
+    });
+    const park = element => {
+      const title = element.getAttribute('title');
+      if (title === null || title === '' || element.hasAttribute(STASH)) return;
+      element.setAttribute(STASH, title);
+      element.setAttribute('title', '');
+      titles.observe(element, { attributes: true, attributeFilter: ['title'] });
+    };
+    const unpark = element => {
+      titles.disconnect();
+      const stash = element.getAttribute(STASH);
+      if (stash === null) return;
+      element.removeAttribute(STASH);
+      if (element.getAttribute('title') === '') element.setAttribute('title', stash);
+    };
+    const stopTimers = () => { clearTimeout(showTimer); clearInterval(watchTimer); showTimer = watchTimer = undefined; };
+    function dormant() {
+      stopTimers();
+      if (shown) warmUntil = Date.now() + TOOLTIP_WARM_MS;
+      shown = false;
+      tip.hide();
+      if (anchor && anchor.getAttribute('aria-describedby') === tip.id) anchor.removeAttribute('aria-describedby');
+    }
+    function end() { dormant(); if (anchor) unpark(anchor); anchor = null; via = null; }
+    function reveal() {
+      showTimer = undefined;
+      if (!anchor || !anchor.isConnected) { end(); return; }
+      const text = tipText(anchor);
+      if (!text) { end(); return; }
+      shown = true;
+      tip.show(anchor, text);
+      if (!anchor.hasAttribute(STASH) && !anchor.hasAttribute('title') && !anchor.hasAttribute('aria-describedby')) anchor.setAttribute('aria-describedby', tip.id);
+      watchTimer = setInterval(() => {
+        if (anchor && (!anchor.isConnected || (via === 'pointer' && !anchor.matches(':hover')))) end();
+      }, 250);
+    }
+    function begin(next, how) {
+      end();
+      anchor = next; via = how;
+      if (how === 'pointer') park(next);
+      showTimer = setTimeout(reveal, Date.now() < warmUntil ? 0 : how === 'focus' ? FOCUS_DELAY_MS : TOOLTIP_DELAY_MS);
+    }
+    function hideInvalid() {
+      clearTimeout(invalidTimer); invalidTimer = undefined;
+      invalid.hide();
+      if (invalidAnchor) { invalidAnchor.removeEventListener('input', hideInvalid); invalidAnchor.removeEventListener('blur', hideInvalid); }
+      invalidAnchor = null;
+    }
+
+    document.addEventListener('pointerover', event => {
+      if (event.pointerType === 'touch') return;
+      const next = tipAnchor(event.target);
+      if (next && next === anchor && via === 'pointer') return;
+      if (!next) { if (via === 'pointer') end(); return; }
+      begin(next, 'pointer');
+    }, true);
+    document.addEventListener('pointerout', event => { if (event.relatedTarget === null && via === 'pointer') end(); }, true);
+    document.addEventListener('pointerdown', event => {
+      lastPress = Date.now();
+      if (via === 'pointer') dormant(); else end();
+      if (invalidAnchor && event.target !== invalidAnchor) hideInvalid();
+    }, true);
+    document.addEventListener('focusin', event => {
+      const target = event.target;
+      if (!target || typeof target.matches !== 'function' || via === 'pointer' || Date.now() - lastPress < POINTER_FOCUS_MS) return;
+      let keyboard = false;
+      try { keyboard = target.matches(':focus-visible'); } catch { keyboard = false; }
+      const next = keyboard ? tipAnchor(target) : null;
+      if (!next || next !== target) { if (via === 'focus') end(); return; }
+      begin(next, 'focus');
+    }, true);
+    document.addEventListener('focusout', () => { if (via === 'focus') end(); }, true);
+    document.addEventListener('keydown', event => {
+      if (event.key !== 'Escape') return;
+      if (via === 'pointer') dormant(); else end();
+      hideInvalid();
+    }, true);
+    document.addEventListener('wheel', () => { if (via === 'pointer') dormant(); else end(); }, { capture: true, passive: true });
+    const follow = () => { if (shown && anchor) tip.place(anchor); if (invalidAnchor) invalid.place(invalidAnchor); };
+    document.addEventListener('scroll', follow, true);
+    window.addEventListener('resize', follow);
+    window.addEventListener('blur', () => end());
+
+    document.addEventListener('invalid', event => {
+      const field = event.target;
+      if (!field || typeof field.focus !== 'function') return;
+      event.preventDefault();
+      if (invalidThisTask) return;
+      invalidThisTask = true;
+      setTimeout(() => { invalidThisTask = false; }, 0);
+      const message = field.validationMessage;
+      if (!message) return;
+      hideInvalid(); end();
+      invalidAnchor = field;
+      if (document.activeElement !== field) field.focus({ preventScroll: true });
+      field.scrollIntoView?.({ block: 'nearest' });
+      invalid.show(field, message);
+      field.addEventListener('input', hideInvalid);
+      field.addEventListener('blur', hideInvalid);
+      invalidTimer = setTimeout(hideInvalid, VALIDATION_LINGER_MS);
+    }, true);
+  }
+
+  // ------------------------------------------------------------------ Dropdowns
+
+  /** The select whose panel is open, and how to close it. */
+  let openSelect = null;
+
+  const choosable = option => !option.disabled && !option.hidden && !(option.parentElement?.tagName === 'OPTGROUP' && option.parentElement.disabled);
+  const branded = target => target instanceof HTMLSelectElement && !target.multiple && target.size <= 1 && !target.hasAttribute('data-native');
+
+  function openPanel(select) {
+    if (select.disabled) return;
+    closePanel();
+    const options = Array.from(select.options);
+    const panel = make('div', 'select-panel');
+    const list = make('div', 'select-list');
+    const panelId = `select-panel-${Math.random().toString(36).slice(2, 9)}`;
+    panel.id = panelId;
+    panel.setAttribute('role', 'listbox');
+    const label = select.getAttribute('aria-label') || select.labels?.[0]?.firstChild?.textContent || 'Options';
+    panel.setAttribute('aria-label', label);
+    list.setAttribute('role', 'presentation');
+    const rows = [];
+    let lastGroup;
+    options.forEach((option, index) => {
+      if (option.hidden) return;
+      const group = option.parentElement?.tagName === 'OPTGROUP' ? option.parentElement : null;
+      if (group && group !== lastGroup) list.append(make('div', 'select-group', group.label));
+      lastGroup = group;
+      const row = make('div', 'select-option');
+      row.id = `${panelId}-${index}`;
+      row.setAttribute('role', 'option');
+      row.setAttribute('aria-selected', String(option.selected));
+      if (!choosable(option)) row.setAttribute('aria-disabled', 'true');
+      row.append(make('span', 'select-option-label', option.label || option.textContent));
+      if (option.selected) { const check = make('span', 'select-check'); const glyph = icon('check', 14); if (glyph) check.append(glyph); else check.textContent = '✓'; row.append(check); }
+      row.addEventListener('pointerenter', () => { if (choosable(option)) setActive(rows.findIndex(item => item.option === option)); });
+      row.addEventListener('click', () => { if (choosable(option)) choose(option); });
+      list.append(row);
+      rows.push({ option, row });
+    });
+    panel.append(list);
+    // A press on the panel must not take focus from the select: the select's blur closes the panel.
+    panel.addEventListener('pointerdown', event => event.preventDefault());
+    panel.addEventListener('mousedown', event => event.preventDefault());
+    panel.addEventListener('contextmenu', event => event.preventDefault());
+    panel.style.visibility = 'hidden';
+    hostFor(select).append(panel);
+
+    let active = rows.findIndex(item => item.option.selected && choosable(item.option));
+    if (active < 0) active = rows.findIndex(item => choosable(item.option));
+    function setActive(index) {
+      if (index < 0 || index >= rows.length) return;
+      rows[active]?.row.removeAttribute('data-active');
+      active = index;
+      rows[active].row.setAttribute('data-active', 'true');
+      rows[active].row.scrollIntoView?.({ block: 'nearest' });
+      select.setAttribute('aria-activedescendant', rows[active].row.id);
+    }
+    function step(from, delta) {
+      for (let index = from + delta; index >= 0 && index < rows.length; index += delta) if (choosable(rows[index].option)) return index;
+      return from;
+    }
+    function choose(option) {
+      const changed = select.value !== option.value || !option.selected;
+      closePanel();
+      select.focus({ preventScroll: true });
+      if (!changed) return;
+      select.value = option.value;
+      select.dispatchEvent(new Event('input', { bubbles: true }));
+      select.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    function position() {
+      if (!select.isConnected) { closePanel(); return; }
+      const anchor = select.getBoundingClientRect();
+      // Measuring the panel's natural height lifts its cap for a moment, which lets the list grow to
+      // its full length and drops its scroll offset; the offset is put back once the cap returns.
+      const scrolled = list.scrollTop;
+      panel.style.minWidth = `${Math.round(anchor.width)}px`;
+      panel.style.maxHeight = '';
+      const size = panel.getBoundingClientRect();
+      const spot = place(anchor, { width: Math.max(size.width, anchor.width), height: size.height }, { width: window.innerWidth, height: window.innerHeight }, 'start');
+      const cap = Math.min(spot.room, 360);
+      panel.style.maxHeight = `${cap}px`;
+      panel.style.left = `${spot.left}px`;
+      panel.style.top = `${spot.placement === 'below' ? Math.round(anchor.bottom + GAP) : Math.max(MARGIN, Math.round(anchor.top - GAP - Math.min(size.height, cap)))}px`;
+      panel.style.visibility = '';
+      list.scrollTop = scrolled;
+    }
+    // The page moving under the select moves the panel with it; the panel's own list scrolling is
+    // the reader walking the options, and must not re-place (and so re-measure) the panel.
+    const follow = event => { if (event?.target instanceof Node && panel.contains(event.target)) return; position(); };
+    let typed = '', typedAt = 0;
+    function keys(event) {
+      if (event.isComposing || event.keyCode === 229) return;
+      if (escapeKey(event)) { event.preventDefault(); event.stopPropagation(); closePanel(); return; }
+      if (event.key === 'Tab') { closePanel(); return; }
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); setActive(step(active, event.key === 'ArrowDown' ? 1 : -1)); return; }
+      if (event.key === 'Home' || event.key === 'End') { event.preventDefault(); setActive(event.key === 'Home' ? step(-1, 1) : step(rows.length, -1)); return; }
+      if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); if (rows[active]) choose(rows[active].option); return; }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        typed = Date.now() - typedAt > 700 ? event.key.toLowerCase() : typed + event.key.toLowerCase();
+        typedAt = Date.now();
+        const found = rows.findIndex(item => choosable(item.option) && (item.option.label || item.option.textContent || '').toLowerCase().startsWith(typed));
+        if (found >= 0) setActive(found);
+      }
+    }
+    const outside = event => { if (event.target !== select && !panel.contains(event.target)) closePanel(); };
+    const blur = () => closePanel();
+    select.addEventListener('keydown', keys, true);
+    select.addEventListener('blur', blur);
+    document.addEventListener('pointerdown', outside, true);
+    window.addEventListener('resize', follow);
+    document.addEventListener('scroll', follow, true);
+    window.addEventListener('blur', blur);
+    select.setAttribute('aria-expanded', 'true');
+    select.setAttribute('aria-controls', panelId);
+    select.dataset.open = 'true';
+    openSelect = {
+      select,
+      close() {
+        select.removeEventListener('keydown', keys, true);
+        select.removeEventListener('blur', blur);
+        document.removeEventListener('pointerdown', outside, true);
+        window.removeEventListener('resize', follow);
+        document.removeEventListener('scroll', follow, true);
+        window.removeEventListener('blur', blur);
+        select.setAttribute('aria-expanded', 'false');
+        select.removeAttribute('aria-controls');
+        select.removeAttribute('aria-activedescendant');
+        delete select.dataset.open;
+        panel.remove();
+      },
+    };
+    position();
+    if (active >= 0) setActive(active);
+  }
+
+  function closePanel() {
+    const current = openSelect;
+    openSelect = null;
+    current?.close();
+  }
+
+  function installSelects() {
+    // The platform opens its list on the press itself, so the press is where it is stopped.
+    document.addEventListener('mousedown', event => {
+      const select = event.target;
+      if (event.button !== 0 || !branded(select)) return;
+      event.preventDefault();
+      if (select.disabled) return;
+      select.focus({ preventScroll: true });
+      if (openSelect?.select === select) closePanel(); else openPanel(select);
+    }, true);
+    document.addEventListener('keydown', event => {
+      const select = event.target;
+      if (!branded(select) || openSelect?.select === select || event.ctrlKey || event.metaKey) return;
+      const opens = event.key === ' ' || event.key === 'Enter' || event.key === 'F4' || event.key === 'ArrowDown' || event.key === 'ArrowUp';
+      if (!opens) return;
+      // The opening key is spent on opening: the panel's own key handler, attached to the select
+      // just now, would otherwise receive this same press and take a row with it.
+      event.preventDefault();
+      event.stopPropagation();
+      openPanel(select);
+    }, true);
+  }
+
+  // ------------------------------------------------------------------ Questions
+
+  function dialogShell(title, tone) {
+    const dialog = make('dialog', 'studio-dialog ask-dialog');
+    if (tone) dialog.dataset.tone = tone;
+    const body = make('div', 'ask-dialog-body');
+    const heading = make('h2', 'ask-dialog-title', title);
+    heading.id = `ask-title-${Math.random().toString(36).slice(2, 9)}`;
+    dialog.setAttribute('aria-labelledby', heading.id);
+    body.append(heading);
+    dialog.append(body);
+    return { dialog, body };
+  }
+  function actions(...buttons) { const row = make('div', 'ask-dialog-actions'); row.append(...buttons); return row; }
+  function button(label, className, onClick) { const node = make('button', className, label); node.type = 'button'; node.onclick = onClick; return node; }
+
+  /** Ask a yes-or-no question; resolves true only on the action's own button. */
+  function confirmDialog(options) {
+    const { title, message = '', confirmLabel = 'Continue', cancelLabel = 'Cancel', tone } = typeof options === 'string' ? { title: options } : options;
+    return new Promise(resolve => {
+      const { dialog, body } = dialogShell(title, tone);
+      dialog.setAttribute('role', 'alertdialog');
+      if (message) { const text = make('p', 'ask-dialog-message', message); text.id = `${dialog.getAttribute('aria-labelledby')}-message`; dialog.setAttribute('aria-describedby', text.id); body.append(text); }
+      let answer = false;
+      const cancel = button(cancelLabel, '', () => dialog.close());
+      const agree = button(confirmLabel, tone === 'danger' ? 'danger-solid' : 'primary', () => { answer = true; dialog.close(); });
+      body.append(actions(cancel, agree));
+      dialog.addEventListener('close', () => { dialog.remove(); resolve(answer); });
+      dialog.addEventListener('click', event => { if (event.target === dialog) dialog.close(); });
+      document.body.append(dialog);
+      dialog.showModal();
+      (tone === 'danger' ? cancel : agree).focus();
+    });
+  }
+
+  /** Tell the reader something; resolves when it is dismissed. `content` may be a node to show under the message. */
+  function alertDialog(options) {
+    const { title, message = '', content, closeLabel = 'Done' } = typeof options === 'string' ? { title: options } : options;
+    return new Promise(resolve => {
+      const { dialog, body } = dialogShell(title);
+      if (message) body.append(make('p', 'ask-dialog-message', message));
+      if (content) body.append(content);
+      const close = button(closeLabel, 'primary', () => dialog.close());
+      body.append(actions(close));
+      dialog.addEventListener('close', () => { dialog.remove(); resolve(); });
+      dialog.addEventListener('click', event => { if (event.target === dialog) dialog.close(); });
+      document.body.append(dialog);
+      dialog.showModal();
+      close.focus();
+    });
+  }
+
+  /** Ask for a line of text; resolves the text, or null when the question is dismissed. */
+  function promptDialog(options) {
+    const { title, message = '', label = title, value = '', placeholder = '', confirmLabel = 'Save', cancelLabel = 'Cancel', maxLength } = typeof options === 'string' ? { title: options } : options;
+    return new Promise(resolve => {
+      const { dialog, body } = dialogShell(title);
+      if (message) body.append(make('p', 'ask-dialog-message', message));
+      const form = make('form', 'ask-dialog-form');
+      const input = make('input');
+      input.type = 'text';
+      input.value = value;
+      input.placeholder = placeholder;
+      input.setAttribute('aria-label', label);
+      input.autocomplete = 'off';
+      input.spellcheck = false;
+      if (maxLength) input.maxLength = maxLength;
+      let answer = null;
+      const cancel = button(cancelLabel, '', () => dialog.close());
+      const agree = make('button', 'primary', confirmLabel);
+      agree.type = 'submit';
+      form.append(input, actions(cancel, agree));
+      form.addEventListener('submit', event => { event.preventDefault(); answer = input.value; dialog.close(); });
+      body.append(form);
+      dialog.addEventListener('close', () => { dialog.remove(); resolve(answer); });
+      dialog.addEventListener('click', event => { if (event.target === dialog) dialog.close(); });
+      document.body.append(dialog);
+      dialog.showModal();
+      input.focus();
+      input.select();
+    });
+  }
+
+  // ------------------------------------------------------------------ Files
+
+  const accepts = (file, accept) => {
+    if (!accept) return true;
+    const name = (file.name || '').toLowerCase();
+    const type = (file.type || '').toLowerCase();
+    return accept.split(',').map(item => item.trim().toLowerCase()).filter(Boolean).some(rule =>
+      rule.startsWith('.') ? name.endsWith(rule) : rule.endsWith('/*') ? type.startsWith(rule.slice(0, -1)) : type === rule);
+  };
+  const formatSize = bytes => bytes < 1024 ? `${bytes} B` : bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(bytes < 10240 ? 1 : 0)} KB` : `${(bytes / 1048576).toFixed(1)} MB`;
+
+  /**
+   * The app's file chooser: a drop zone with a Browse button, around a hidden file input that
+   * still does the choosing. `file()` is the chosen or dropped file.
+   */
+  function filePicker({ accept = '', label = 'Choose a file', hint = 'or drop it here', onChange } = {}) {
+    const zone = make('div', 'file-drop');
+    zone.dataset.state = 'empty';
+    const input = make('input', 'file-drop-input');
+    input.type = 'file';
+    input.accept = accept;
+    input.tabIndex = -1;
+    input.setAttribute('aria-hidden', 'true');
+    const mark = make('span', 'file-drop-icon');
+    const glyph = icon('upload', 18) || icon('download', 18);
+    if (glyph) mark.append(glyph);
+    mark.setAttribute('aria-hidden', 'true');
+    const text = make('div', 'file-drop-text');
+    const name = make('strong', 'file-drop-name', label);
+    const detail = make('span', 'file-drop-detail', hint);
+    name.id = `file-drop-${Math.random().toString(36).slice(2, 9)}`;
+    detail.id = `${name.id}-detail`;
+    text.append(name, detail);
+    const browse = make('button', 'btn-small', 'Browse…');
+    browse.type = 'button';
+    browse.setAttribute('aria-describedby', `${name.id} ${detail.id}`);
+    const clear = make('button', 'icon-button btn-small file-drop-clear');
+    clear.type = 'button';
+    clear.setAttribute('aria-label', 'Remove the chosen file');
+    clear.title = 'Remove the chosen file';
+    const x = icon('x', 14); if (x) clear.append(x); else clear.textContent = '×';
+    clear.hidden = true;
+    zone.append(input, mark, text, clear, browse);
+
+    let chosen = null;
+    function show(file, problem) {
+      chosen = problem ? null : file;
+      zone.dataset.state = problem ? 'invalid' : file ? 'chosen' : 'empty';
+      name.textContent = file ? file.name : label;
+      detail.textContent = problem || (file ? formatSize(file.size) : hint);
+      clear.hidden = !file || !!problem;
+      browse.textContent = file ? 'Replace…' : 'Browse…';
+      onChange?.(chosen);
+    }
+    // The zone, not the hidden input, holds the choice: the input is emptied after every take, so
+    // browsing to a file it held before (say, after a drop replaced it) is a change it reports again.
+    const take = file => {
+      input.value = '';
+      if (!file) return;
+      show(file, accepts(file, accept) ? '' : `${file.name} is not a ${accept.replaceAll(',', ' or ')} file.`);
+    };
+    browse.addEventListener('click', event => { event.stopPropagation(); input.click(); });
+    zone.addEventListener('click', event => { if (event.target === zone || event.target === text || text.contains(event.target) || event.target === mark) input.click(); });
+    input.addEventListener('change', () => take(input.files?.[0]));
+    clear.addEventListener('click', event => { event.stopPropagation(); input.value = ''; show(null); browse.focus(); });
+    for (const type of ['dragenter', 'dragover']) zone.addEventListener(type, event => {
+      if (!Array.from(event.dataTransfer?.types || []).includes('Files')) return;
+      event.preventDefault(); event.stopPropagation();
+      event.dataTransfer.dropEffect = 'copy';
+      zone.dataset.drag = 'true';
+    });
+    zone.addEventListener('dragleave', event => { if (!zone.contains(event.relatedTarget)) delete zone.dataset.drag; });
+    zone.addEventListener('drop', event => {
+      if (!event.dataTransfer?.files?.length) return;
+      event.preventDefault(); event.stopPropagation();
+      delete zone.dataset.drag;
+      take(event.dataTransfer.files[0]);
+    });
+    return { element: zone, input, file: () => chosen, focus: () => browse.focus() };
+  }
+
+  installTooltips();
+  installSelects();
+  window.AndorraControls = Object.freeze({
+    confirm: confirmDialog,
+    alert: alertDialog,
+    prompt: promptDialog,
+    filePicker,
+    closeSelect: closePanel,
+  });
+})();