Fast. Native.
Yours.

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18

// The command palette, filtered as you type.
import { commands } from './commands'

const input = query('.palette-input')
const list = query('.palette-list')

export function open(): void {
    render(list, commands)
    input.focus()
}

input.addEventListener('input', () => {
    const q = input.value.toLowerCase()
    render(list, commands.filter((c) =>
        c.label.includes(q),
    ))
})

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18

/* One theme, tokens all the way down. */
:root {
    --editor-bg: #161617;
    --editor-ink: #f5f5f7;
    --accent: #2997ff;
}

.editor {
    background: var(--editor-bg);
    color: var(--editor-ink);
    font: 13px/1.7 "SF Mono";
}

.line.is-active {
    background: rgb(41 151 255 / 0.08);
}

.caret { background: var(--accent); }