const tools = document.querySelector('.app-tools');
if (tools) {
  tools.hidden = false;
  let category = 'all';
  const input = tools.querySelector('input');
  const cards = [...document.querySelectorAll('#app-grid .app-card')];
  const filter = () => {
    const q = input.value.trim().toLocaleLowerCase();
    let count = 0;
    for (const card of cards) {
      const visible = (category === 'all' || card.dataset.category === category) && card.dataset.search.toLocaleLowerCase().includes(q);
      card.hidden = !visible;
      if (visible) count++;
    }
    document.querySelector('#empty').hidden = count !== 0;
  };
  tools.querySelectorAll('[data-filter]').forEach(button => button.addEventListener('click', () => {
    category = button.dataset.filter;
    tools.querySelectorAll('[data-filter]').forEach(b => b.setAttribute('aria-pressed', String(b === button)));
    filter();
  }));
  input.addEventListener('input', filter);
}
// Only articles containing diagrams load the pinned renderer. Text remains readable without it.
if (document.querySelector('.mermaid')) {
  import('https://cdn.jsdelivr.net/npm/mermaid@10.9.3/dist/mermaid.esm.min.mjs').then(({default: mermaid}) => {
    mermaid.initialize({startOnLoad:false, securityLevel:'strict', theme:'neutral', fontFamily:'system-ui'});
    return mermaid.run({querySelector:'.mermaid'});
  }).catch(() => {});
}