Paleta poleceń z filtrowaniem

<main class="terminal"><header>Pracownia / pulpit</header><h1>Polecenia<br>pracowni.</h1><p>Wyszukaj polecenie lub wybierz je z listy.</p><button id="open-command">Otwórz paletę <kbd>Ctrl / ⌘ K</kbd></button><div class="workspace"><span>Ostatnio otwierane</span><b>System kolorów</b><b>Szkice komponentów</b><b>Notatki z warsztatu</b></div><p id="command-result" class="status" aria-live="polite">Wybierz polecenie, aby zobaczyć rezultat.</p></main><dialog id="palette" aria-label="Paleta poleceń"><label for="command-search">Szukaj polecenia</label><input id="command-search" autocomplete="off" placeholder="Np. kolor"><div id="command-options"><button data-command="Nowy szkic">Nowy szkic <kbd>N</kbd></button><button data-command="System kolorów">System kolorów <kbd>C</kbd></button><button data-command="Eksportuj projekt">Eksportuj projekt <kbd>E</kbd></button><button data-command="Ustawienia pracowni">Ustawienia pracowni <kbd>U</kbd></button></div><p id="no-results" hidden>Brak wyników. Spróbuj innego słowa.</p><small>↑ ↓ wybór · Enter wykonaj · Escape zamknij</small></dialog>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#28213c;--ink:#f1ebfb;--focus:#f7c88d}.terminal{max-width:760px;margin:auto;padding:32px}header{color:#c9bbdd;font:14px monospace;border-bottom:1px solid #665978;padding-bottom:14px}h1{font-family:'Trebuchet MS',sans-serif;font-size:clamp(38px,5vw,55px);line-height:1.08;letter-spacing:-1.5px;margin:28px 0 15px}.terminal>p{color:#d2c8e1}#open-command{display:flex;gap:40px;align-items:center;background:#edca98;color:#28213c;border:0;padding:14px 20px;font-weight:600}kbd{font:12px monospace;white-space:nowrap}.workspace{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:25px}.workspace span{grid-column:1/-1;font-size:13px;color:#c9bbdd}.workspace b{font-size:14px;border-top:2px solid #9471c0;padding-top:12px}dialog{width:min(520px,calc(100% - 32px));padding:20px;border:1px solid #9471c0;background:#332b46;color:#f1ebfb}dialog::backdrop{background:#110d24b8}label{font-size:13px;color:#d9c9ee}input{background:transparent;border:0;border-bottom:1px solid #9471c0;color:white;font-size:22px;width:100%;padding:12px 0;margin-bottom:12px}#command-options button{width:100%;text-align:left;padding:12px;display:flex;justify-content:space-between;border:0;background:none;color:#f1ebfb}#command-options button.chosen{background:#534166}small{display:block;border-top:1px solid #665978;padding-top:15px;margin-top:12px;color:#d2c8e1;font-size:12px}@media(max-width:480px){.terminal{padding:24px}#open-command{gap:16px;font-size:14px}.workspace{grid-template-columns:1fr}.workspace b{padding-top:8px}.terminal h1{font-size:38px}}

(()=>{
const dialog=document.querySelector('#palette'),input=document.querySelector('#command-search'),buttons=[...document.querySelectorAll('[data-command]')];let active=0;const visible=()=>buttons.filter(b=>!b.hidden);function select(index){const list=visible();active=list.length?(index+list.length)%list.length:0;buttons.forEach(b=>b.classList.remove('chosen'));if(list[active])list[active].classList.add('chosen');}function open(){input.value='';buttons.forEach(b=>b.hidden=false);document.querySelector('#no-results').hidden=true;select(0);dialog.showModal();input.focus();}document.querySelector('#open-command').addEventListener('click',open);document.addEventListener('keydown',e=>{if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='k'){e.preventDefault();if(!dialog.open)open();}});input.addEventListener('input',()=>{buttons.forEach(b=>b.hidden=!b.dataset.command.toLocaleLowerCase('pl').includes(input.value.toLocaleLowerCase('pl')));document.querySelector('#no-results').hidden=visible().length!==0;select(0);});input.addEventListener('keydown',e=>{if(['ArrowDown','ArrowUp','Enter'].includes(e.key)){e.preventDefault();if(e.key==='Enter')visible()[active]?.click();else select(active+(e.key==='ArrowDown'?1:-1));}});buttons.forEach(b=>b.addEventListener('click',()=>{document.querySelector('#command-result').textContent='Wybrano: '+b.dataset.command;dialog.close();}));
})();