@shoalrun/cli 0.0.0-stage → 0.1.0-alpha.11

package/assets/table-filter.js

@@ -0,0 +1,63 @@
+export function matchesTableRow(value, query) {
+  const terms = query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+  const text = value.toLocaleLowerCase();
+  return terms.every(term => text.includes(term));
+}
+
+for (const [index, tableBlock] of [...(globalThis.document?.querySelectorAll('.doc-table[data-table-filter]') ?? [])].entries()) {
+  const controls = tableBlock.querySelector('.doc-table-filter');
+  const input = controls?.querySelector('input[type="search"]');
+  const status = controls?.querySelector('.doc-table-count');
+  const body = tableBlock.querySelector('table tbody');
+  if (!controls || !input || !status || !body) continue;
+  const rows = [...body.rows];
+  body.id ||= `doc-table-body-${index + 1}`;
+  input.setAttribute('aria-controls', body.id);
+  controls.hidden = false;
+  const update = () => {
+    let visible = 0;
+    for (const row of rows) {
+      row.hidden = !matchesTableRow(row.textContent, input.value);
+      if (!row.hidden) visible++;
+    }
+    status.textContent = `Showing ${visible} of ${rows.length} rows`;
+  };
+  input.addEventListener('input', update);
+  input.addEventListener('keydown', event => {
+    if (event.key === 'Escape' && input.value) {
+      input.value = '';
+      update();
+    }
+  });
+  update();
+}
+
+for (const [index, block] of [...(globalThis.document?.querySelectorAll('.doc-definition-list-wrap[data-definition-filter]') ?? [])].entries()) {
+  const controls = block.querySelector('.doc-definition-filter');
+  const input = controls?.querySelector('input[type="search"]');
+  const status = controls?.querySelector('.doc-definition-count');
+  const list = block.querySelector('dl.doc-definition-list');
+  if (!controls || !input || !status || !list) continue;
+  const pairs = [...list.children].filter(child => child.tagName === 'DT' && child.nextElementSibling?.tagName === 'DD')
+    .map(term => [term, term.nextElementSibling]);
+  list.id ||= `doc-definition-list-${index + 1}`;
+  input.setAttribute('aria-controls', list.id);
+  controls.hidden = false;
+  const update = () => {
+    let visible = 0;
+    for (const [term, definition] of pairs) {
+      const matches = matchesTableRow(`${term.textContent} ${definition.textContent}`, input.value);
+      term.hidden = definition.hidden = !matches;
+      if (matches) visible++;
+    }
+    status.textContent = `Showing ${visible} of ${pairs.length} terms`;
+  };
+  input.addEventListener('input', update);
+  input.addEventListener('keydown', event => {
+    if (event.key === 'Escape' && input.value) {
+      input.value = '';
+      update();
+    }
+  });
+  update();
+}

package/assets/tabs.js

@@ -0,0 +1,80 @@
+const groups = new Map();
+const synchronize = (source, value) => {
+  const key = source.dataset.tabSync;
+  if (!key) return;
+  for (const [root, group] of groups) {
+    if (root === source || root.dataset.tabSync !== key) continue;
+    const index = group.tabs.findIndex(tab => tab.dataset.tabValue === value);
+    if (index >= 0) group.activate(index);
+  }
+};
+
+for (const root of document.querySelectorAll('.doc-tabs[data-tabs]')) {
+  const list = root.querySelector(':scope > .doc-tablist');
+  const tabs = [...(list?.querySelectorAll(':scope > a') ?? [])];
+  const panels = [...root.querySelectorAll(':scope > .doc-tabpanel')];
+  if (!list || tabs.length < 2 || tabs.length !== panels.length) continue;
+
+  list.setAttribute('role', 'tablist');
+  tabs.forEach((tab, index) => {
+    tab.id = `${panels[index].id}-tab`;
+    tab.setAttribute('role', 'tab');
+    tab.setAttribute('aria-controls', panels[index].id);
+    panels[index].setAttribute('role', 'tabpanel');
+    panels[index].setAttribute('aria-labelledby', tab.id);
+    panels[index].tabIndex = 0;
+  });
+
+  let current = -1;
+  const activate = (index, focus = false, interaction = false) => {
+    const changed = current !== index;
+    tabs.forEach((tab, at) => {
+      const selected = at === index;
+      tab.setAttribute('aria-selected', String(selected));
+      tab.tabIndex = selected ? 0 : -1;
+      panels[at].hidden = !selected;
+    });
+    if (focus) tabs[index].focus();
+    current = index;
+    if (interaction) {
+      synchronize(root, tabs[index].dataset.tabValue);
+      if (changed) globalThis.shoalrunAnalytics?.track('content_tab_change', { tabIndex: index, tabId: panels[index].id }, root);
+    }
+  };
+
+  root.classList.add('is-enhanced');
+  groups.set(root, { tabs, panels, activate });
+  activate(0);
+  tabs.forEach((tab, index) => {
+    tab.addEventListener('click', event => {
+      event.preventDefault();
+      activate(index, false, true);
+    });
+    tab.addEventListener('keydown', event => {
+      let next;
+      if (event.key === 'ArrowRight') next = (index + 1) % tabs.length;
+      else if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length;
+      else if (event.key === 'Home') next = 0;
+      else if (event.key === 'End') next = tabs.length - 1;
+      if (next === undefined) return;
+      event.preventDefault();
+      activate(next, true, true);
+    });
+  });
+}
+
+const revealHash = () => {
+  if (!location.hash) return;
+  let id;
+  try { id = decodeURIComponent(location.hash.slice(1)); } catch { return; }
+  const target = document.getElementById(id);
+  if (!target) return;
+  const panel = target.closest('.doc-tabpanel');
+  const group = panel && groups.get(panel.closest('.doc-tabs'));
+  if (group) group.activate(group.panels.indexOf(panel));
+  for (const disclosure of document.querySelectorAll('.doc-accordion, .doc-collapsible, .file-tree-branch')) if (disclosure.contains(target)) disclosure.open = true;
+  requestAnimationFrame(() => target.scrollIntoView({ block: 'nearest' }));
+};
+
+revealHash();
+window.addEventListener('hashchange', revealHash);

package/assets/theme-preview.css

@@ -0,0 +1,17 @@
+/* Theme previewer controls. They use palette tokens so they restyle with each preview. */
+.theme-preview-controls{position:sticky;top:.75rem;z-index:5;margin:1.5rem 0;padding:1rem 1.1rem;border:2px solid var(--color-accent);border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:0 12px 32px -18px #0006}
+.theme-preview-title{margin:0 0 .75rem!important;font-weight:700;color:var(--color-ink)}
+.theme-preview-fields{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:end}
+.theme-preview-fields label{display:grid;gap:.3rem;font-size:.78rem;font-weight:650;color:var(--color-section-heading)}
+.theme-preview-fields select{min-width:9rem;min-height:2.5rem;padding:.4rem .6rem;border:1px solid var(--color-field-border);border-radius:var(--radius-small);background:var(--color-field-surface);color:var(--color-text);font:inherit;font-size:.85rem}
+.theme-preview-controls button{min-height:2.5rem;padding:.4rem .9rem;border:1px solid var(--color-field-border);border-radius:var(--radius-small);background:var(--color-surface);color:var(--color-ink);font-size:.82rem;font-weight:650}
+.theme-preview-controls button:hover{background:var(--color-nav-hover)}
+.theme-preview-config{display:flex;gap:.75rem;align-items:center;margin-top:.9rem}
+.theme-preview-config pre{flex:1;min-width:0;margin:0!important;padding:.65rem .85rem!important;font-size:.78rem!important;line-height:1.6!important}
+.theme-preview-status{margin:.6rem 0 0!important;min-height:1.2em;font-size:.78rem;color:var(--color-muted)}
+@media(max-width:48rem){
+  .theme-preview-controls{position:static}
+  .theme-preview-fields label,.theme-preview-fields select{flex:1 1 8rem;min-width:0}
+  .theme-preview-config{flex-direction:column;align-items:stretch}
+}
+@media print{.theme-preview-controls{display:none}}

package/assets/theme-preview.js

@@ -0,0 +1,135 @@
+// Theme previewer: re-themes this page in place by swapping the preset and palette stylesheets.
+// Nothing is saved; leaving the page or pressing Reset restores the site's own theme.
+const widget = document.querySelector('[data-theme-preview]');
+const assetsRoot = new URL('./', import.meta.url);
+
+if (widget) {
+  const { presets, palettes } = JSON.parse(widget.dataset.themePreview);
+  const root = document.documentElement;
+  const scheme = document.querySelector('meta[name="color-scheme"]')?.content ?? 'light';
+  const site = { preset: root.dataset.theme ?? 'shoal', palette: root.dataset.palette ?? 'kelp', mode: scheme === 'light dark' ? 'system' : scheme };
+  const attributes = { theme: root.dataset.theme, palette: root.dataset.palette, masthead: root.dataset.masthead, mode: root.dataset.mode };
+  const originals = [...document.querySelectorAll('link[data-theme-link]')];
+  // Preview stylesheets go before the site's fonts and project CSS, so its own fonts and overrides still apply.
+  const anchor = document.querySelector('link[href$="/assets/fonts.css"], link[href$="/assets/project.css"]');
+  const stylesheet = () => Object.assign(document.createElement('link'), { rel: 'stylesheet' });
+  const themeLink = stylesheet();
+  const paletteLink = stylesheet();
+  const paletteNames = site.palette === 'custom' ? [...palettes, 'custom'] : palettes;
+  const option = (value, label = value) => `<option value="${value}">${label}</option>`;
+
+  const form = document.createElement('form');
+  form.className = 'theme-preview-controls';
+  form.setAttribute('aria-label', 'Theme previewer');
+  form.innerHTML = `
+    <p class="theme-preview-title">Try a theme on this page</p>
+    <div class="theme-preview-fields">
+      <label>Shape <select name="preset">${presets.map(preset => option(preset.name)).join('')}</select></label>
+      <label>Palette <select name="palette">${paletteNames.map(name => option(name, name === 'custom' ? 'custom (this site)' : name)).join('')}</select></label>
+      <label>Mode <select name="mode">${option('system')}${option('light')}${option('dark')}</select></label>
+      <button type="button" data-action="reset">Reset</button>
+    </div>
+    <div class="theme-preview-config">
+      <pre><code></code></pre>
+      <button type="button" data-action="copy">Copy config</button>
+    </div>
+    <p class="theme-preview-status" role="status"></p>`;
+  widget.prepend(form);
+  const { preset: presetField, palette: paletteField, mode: modeField } = form.elements;
+  const config = form.querySelector('code');
+  const status = form.querySelector('.theme-preview-status');
+
+  const yaml = ({ preset, palette, mode }) => {
+    const lines = [];
+    if (preset !== 'shoal') lines.push(`  preset: ${preset}`);
+    if (palette === 'custom') lines.push('  # palette: keep your current custom palette');
+    else if (palette !== presets.find(entry => entry.name === preset).palette) lines.push(`  palette: ${palette}`);
+    if (mode !== 'light') lines.push(`  mode: ${mode}`);
+    return lines.length ? `theme:\n${lines.join('\n')}` : '# The default theme needs no setting.';
+  };
+
+  // Keep the header's dark mode toggle, when present, in step with the previewed mode.
+  const syncToggle = () => {
+    const mode = root.dataset.mode ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    document.querySelector('.mode-toggle')?.setAttribute('aria-pressed', String(mode === 'dark'));
+  };
+  const show = (values, message) => {
+    config.textContent = yaml(values);
+    status.textContent = message;
+    syncToggle();
+  };
+
+  // The header toggle (mode.js) can change data-mode at any time. Restore the reader's latest saved choice,
+  // not the value from page load, and track which data-mode values this script set itself.
+  let previewing = false;
+  let expectedMode = root.dataset.mode;
+  const readerMode = () => {
+    try {
+      const saved = localStorage.getItem('shoalrun-color-mode');
+      if (saved === 'light' || saved === 'dark') return saved;
+    } catch {}
+    return attributes.mode;
+  };
+
+  const restore = announce => {
+    themeLink.remove();
+    paletteLink.remove();
+    for (const link of originals) link.disabled = false;
+    for (const [name, value] of Object.entries({ ...attributes, mode: readerMode() })) {
+      if (value === undefined) delete root.dataset[name]; else root.dataset[name] = value;
+    }
+    expectedMode = root.dataset.mode;
+    previewing = false;
+    presetField.value = site.preset;
+    paletteField.value = site.palette;
+    modeField.value = site.mode;
+    show(site, announce ? "Showing this site's own theme." : '');
+  };
+
+  const apply = () => {
+    const values = { preset: presetField.value, palette: paletteField.value, mode: modeField.value };
+    if (values.preset === site.preset && values.palette === site.palette && values.mode === site.mode) return restore(true);
+    for (const link of originals) link.disabled = true;
+    // Insert in cascade order, before project CSS so the site's own overrides still apply.
+    if (values.preset === 'shoal') themeLink.remove();
+    else { themeLink.href = new URL(`themes/${values.preset}.css`, assetsRoot).pathname; document.head.insertBefore(themeLink, anchor); }
+    paletteLink.href = new URL(`themes/palette-${values.palette}.css`, assetsRoot).pathname;
+    document.head.insertBefore(paletteLink, anchor);
+    root.dataset.theme = values.preset;
+    root.dataset.palette = values.palette;
+    const masthead = presets.find(preset => preset.name === values.preset)?.masthead;
+    if (masthead) root.dataset.masthead = masthead; else delete root.dataset.masthead;
+    if (values.mode === 'system') delete root.dataset.mode; else root.dataset.mode = values.mode;
+    expectedMode = root.dataset.mode;
+    previewing = true;
+    const modeLabel = values.mode === 'system' ? 'following your system setting' : `in ${values.mode} mode`;
+    show(values, `Showing the ${values.preset} shape with the ${values.palette} palette, ${modeLabel}.`);
+  };
+
+  // When the reader uses the header toggle during a preview, follow it in the Mode menu and config.
+  new MutationObserver(() => {
+    if (root.dataset.mode === expectedMode) return;
+    expectedMode = root.dataset.mode;
+    if (!previewing) return;
+    modeField.value = root.dataset.mode ?? 'system';
+    show({ preset: presetField.value, palette: paletteField.value, mode: modeField.value }, `Switched to ${modeField.value} mode.`);
+  }).observe(root, { attributes: true, attributeFilter: ['data-mode'] });
+
+  presetField.addEventListener('change', () => {
+    paletteField.value = presets.find(entry => entry.name === presetField.value).palette;
+    apply();
+  });
+  paletteField.addEventListener('change', apply);
+  modeField.addEventListener('change', apply);
+  form.addEventListener('submit', event => event.preventDefault());
+  form.querySelector('[data-action="reset"]').addEventListener('click', () => restore(true));
+  form.querySelector('[data-action="copy"]').addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(config.textContent);
+      status.textContent = 'Copied the theme config.';
+    } catch {
+      status.textContent = 'Copy failed. Select the config text and copy it manually.';
+    }
+  });
+  restore(false);
+}

package/assets/theme-switcher.js

@@ -0,0 +1,113 @@
+// Temporary site-wide theme switcher, enabled by outputs.html.themeSwitcher. It loads in <head> right after the
+// site's theme and palette stylesheets so a saved choice applies before first paint, then adds a small floating
+// control once the page loads. The choice lasts across pages in this browser only. In `demo` mode the control
+// stays hidden until a page is opened with ?theme-switcher, and ?theme-switcher=off hides it again.
+(() => {
+  const script = document.currentScript;
+  const assetsRoot = new URL('./', script.src);
+  const { presets, palettes, demo } = JSON.parse(script.dataset.themes);
+  const root = document.documentElement;
+  const key = 'shoalrun-theme-switcher';
+  const unlockKey = 'shoalrun-theme-switcher-demo';
+  const flag = new URLSearchParams(location.search).get('theme-switcher');
+  let unlocked = false;
+  try {
+    if (flag === 'off') { localStorage.removeItem(unlockKey); localStorage.removeItem(key); }
+    else if (flag !== null) localStorage.setItem(unlockKey, 'on');
+    unlocked = localStorage.getItem(unlockKey) === 'on';
+  } catch {}
+  // A hidden demo switcher applies nothing, so readers who never unlock it always see the site's own theme.
+  if (demo && !unlocked) return;
+  const site = { preset: root.dataset.theme ?? 'shoal', palette: root.dataset.palette ?? 'kelp', masthead: root.dataset.masthead };
+  const paletteLink = document.querySelector('link[data-theme-link="palette"]');
+  let themeLink = document.querySelector('link[data-theme-link="theme"]');
+  const siteThemeHref = themeLink?.getAttribute('href');
+  const sitePaletteHref = paletteLink?.getAttribute('href');
+
+  const read = () => {
+    try {
+      const saved = JSON.parse(localStorage.getItem(key) ?? 'null');
+      if (saved && presets.some(preset => preset.name === saved.preset) && [...palettes, 'custom'].includes(saved.palette)) return saved;
+    } catch {}
+    return null;
+  };
+  const write = choice => {
+    try { choice ? localStorage.setItem(key, JSON.stringify(choice)) : localStorage.removeItem(key); } catch {}
+  };
+
+  // Swap the site's own links in place, so the page's <ThemePreview> treats the switched theme as the site theme.
+  const apply = choice => {
+    const own = !choice || (choice.preset === site.preset && choice.palette === site.palette);
+    const preset = own ? site.preset : choice.preset;
+    const themeHref = own ? siteThemeHref : preset === 'shoal' ? undefined : new URL(`themes/${preset}.css`, assetsRoot).pathname;
+    if (themeHref) {
+      if (!themeLink) {
+        themeLink = Object.assign(document.createElement('link'), { rel: 'stylesheet' });
+        themeLink.dataset.themeLink = 'theme';
+        paletteLink?.before(themeLink);
+      }
+      themeLink.setAttribute('href', themeHref);
+    } else {
+      themeLink?.remove();
+      themeLink = null;
+    }
+    if (paletteLink) paletteLink.setAttribute('href', own ? sitePaletteHref : new URL(`themes/palette-${choice.palette}.css`, assetsRoot).pathname);
+    root.dataset.theme = preset;
+    root.dataset.palette = own ? site.palette : choice.palette;
+    const masthead = own ? site.masthead : presets.find(entry => entry.name === preset)?.masthead;
+    if (masthead) root.dataset.masthead = masthead; else delete root.dataset.masthead;
+  };
+
+  apply(read());
+
+  const build = () => {
+    const current = read() ?? { preset: site.preset, palette: site.palette };
+    const option = (value, selected, label = value) => `<option value="${value}"${value === selected ? ' selected' : ''}>${label}</option>`;
+    const panel = document.createElement('details');
+    panel.className = 'theme-switcher';
+    panel.innerHTML = `
+      <summary><span class="theme-switcher-dot" aria-hidden="true"></span><span class="theme-switcher-label"></span></summary>
+      <form class="theme-switcher-body" aria-label="Theme switcher">
+        <p>Preview only. The choice stays in this browser.</p>
+        <label>Shape <select name="preset">${presets.map(preset => option(preset.name, current.preset)).join('')}</select></label>
+        <label>Palette <select name="palette">${(site.palette === 'custom' ? [...palettes, 'custom'] : palettes).map(name => option(name, current.palette)).join('')}</select></label>
+        <button type="button">Reset to site theme</button>
+      </form>`;
+    const form = panel.querySelector('form');
+    const label = panel.querySelector('.theme-switcher-label');
+    const show = () => { label.textContent = `${root.dataset.theme} · ${root.dataset.palette}`; };
+    const change = choice => {
+      write(choice.preset === site.preset && choice.palette === site.palette ? null : choice);
+      apply(read());
+      show();
+    };
+    form.elements.preset.addEventListener('change', () => {
+      form.elements.palette.value = presets.find(entry => entry.name === form.elements.preset.value).palette;
+      change({ preset: form.elements.preset.value, palette: form.elements.palette.value });
+    });
+    form.elements.palette.addEventListener('change', () => change({ preset: form.elements.preset.value, palette: form.elements.palette.value }));
+    form.querySelector('button').addEventListener('click', () => {
+      form.elements.preset.value = site.preset;
+      form.elements.palette.value = site.palette;
+      change(site);
+    });
+    form.addEventListener('submit', event => event.preventDefault());
+    const style = document.createElement('style');
+    style.textContent = `
+.theme-switcher{position:fixed;left:1rem;bottom:1rem;z-index:50;max-width:calc(100vw - 2rem);border:1px solid var(--color-field-border);border-radius:var(--radius-panel);background:var(--color-surface);color:var(--color-ink);box-shadow:0 12px 32px -14px #0007;font:600 .78rem/1.4 var(--font-body)}
+.theme-switcher>summary{display:flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:.45rem .8rem;cursor:pointer;list-style:none}
+.theme-switcher>summary::-webkit-details-marker{display:none}
+.theme-switcher-dot{width:.75rem;height:.75rem;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 2px var(--color-surface),0 0 0 3px var(--color-field-border)}
+.theme-switcher-body{display:grid;gap:.6rem;width:16rem;max-width:100%;padding:.2rem .8rem .8rem}
+.theme-switcher-body p{margin:0;color:var(--color-muted);font-weight:500}
+.theme-switcher-body label{display:grid;gap:.25rem;color:var(--color-section-heading)}
+.theme-switcher-body select,.theme-switcher-body button{min-height:2.5rem;padding:.35rem .6rem;border:1px solid var(--color-field-border);border-radius:var(--radius-small);background:var(--color-field-surface);color:var(--color-text);font:inherit}
+.theme-switcher-body button{background:var(--color-surface);color:var(--color-ink);cursor:pointer}
+.theme-switcher-body button:hover{background:var(--color-nav-hover)}
+@media print{.theme-switcher{display:none}}`;
+    document.head.append(style);
+    document.body.append(panel);
+    show();
+  };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', build); else build();
+})();

package/assets/tooltips.js

@@ -0,0 +1,81 @@
+// Without this enhancement, the label and explanation stay visible in the page.
+let sequence = 0;
+const instances = [];
+for (const root of document.querySelectorAll('[data-tooltip]')) {
+  const label = root.querySelector('.doc-tooltip-trigger');
+  const popup = root.querySelector('.doc-tooltip-popup');
+  const trigger = document.createElement('button');
+  trigger.type = 'button';
+  trigger.className = label.className;
+  trigger.textContent = label.textContent;
+  let id;
+  do { id = `shoalrun-tooltip-${++sequence}`; } while (document.getElementById(id));
+  popup.id = id;
+  trigger.setAttribute('aria-describedby', popup.id);
+  popup.setAttribute('role', 'tooltip');
+  popup.dataset.tooltipEnhanced = '';
+  popup.hidden = true;
+  document.body.append(popup);
+  root.querySelector('.doc-tooltip-separator').hidden = true;
+  label.replaceWith(trigger);
+
+  let open = false;
+  let hovering = false;
+  let dismissed = false;
+  let pointerWasOpen = false;
+  let closeTimer;
+  const position = () => {
+    if (!open) return;
+    const anchor = trigger.getBoundingClientRect();
+    const box = popup.getBoundingClientRect();
+    const left = Math.max(8, Math.min(anchor.left, innerWidth - box.width - 8));
+    const top = anchor.bottom + box.height + 14 <= innerHeight ? anchor.bottom + 6 : Math.max(8, anchor.top - box.height - 6);
+    popup.style.left = `${left}px`;
+    popup.style.top = `${top}px`;
+  };
+  const show = () => {
+    clearTimeout(closeTimer);
+    if (dismissed) return;
+    open = true;
+    popup.hidden = false;
+    position();
+  };
+  const hide = (dismiss = false) => {
+    clearTimeout(closeTimer);
+    open = false;
+    popup.hidden = true;
+    dismissed = dismiss;
+  };
+  const leave = () => {
+    hovering = false;
+    closeTimer = setTimeout(() => {
+      if (!hovering && document.activeElement !== trigger) hide();
+    }, 120);
+  };
+  for (const element of [trigger, popup]) {
+    element.addEventListener('pointerenter', event => {
+      if (event.pointerType === 'touch') return;
+      hovering = true;
+      dismissed = false;
+      show();
+    });
+    element.addEventListener('pointerleave', leave);
+  }
+  trigger.addEventListener('focus', () => { dismissed = false; show(); });
+  trigger.addEventListener('blur', () => { if (!hovering) hide(); });
+  trigger.addEventListener('pointerdown', () => { pointerWasOpen = open; });
+  trigger.addEventListener('click', event => {
+    const close = event.detail ? pointerWasOpen : open;
+    if (close) hide(true);
+    else { dismissed = false; show(); }
+  });
+  instances.push({ trigger, popup, hide, position });
+}
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape') for (const instance of instances) instance.hide(true);
+});
+document.addEventListener('pointerdown', event => {
+  for (const instance of instances) if (!instance.trigger.contains(event.target) && !instance.popup.contains(event.target)) instance.hide(true);
+});
+window.addEventListener('resize', () => instances.forEach(instance => instance.position()));
+window.addEventListener('scroll', () => instances.forEach(instance => instance.position()), true);