This is an implementation of Paco's cmdk for Svelte.
It is not complete, it is not perfect, but it's functional.
npm install cmdk-svelte
<script>
import { Command } from 'cmdk-svelte';
let open = false;
let value = '';
</script>
<svelte:window
on:keydown={(e) => {
if (e.metaKey && e.key == 'k') {
open = !open;
}
if (e.key == 'Escape') {
open = false;
}
}}
on:pointerdown={() => (open = false)}
/>
<Command.Dialog {open}>
<Command.Overlay />
<Command.Content>
<Command.Input bind:value />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Projects">
<Command.Item onSelect={()=>{}}>Search Projects...</Command.Item>
<Command.Item>...</Command.Item>
</Command.Group>
</Command.List>
</Command.Content>
</Command.Dialog>