<script lang="ts">
    import Command from "./Command.svelte";
    import type { CommandItem, CommandGroup } from "./command.config";

    let open = $state(false);

    const items: CommandItem[] = [
        { id: "new-file", label: "New File", hint: "Ctrl+N", group: "file" },
        { id: "save", label: "Save", hint: "Ctrl+S", group: "file" },
        { id: "undo", label: "Undo", hint: "Ctrl+Z", group: "edit" },
    ];

    const groups: CommandGroup[] = [
        { id: "file", label: "File" },
        { id: "edit", label: "Edit" },
    ];
</script>

<Button onclick={() => open = true}>Open Command</Button>

<Command
    bind:open
    {items}
    {groups}
    placeholder="Type a command…"
    onselect={(item) => console.log(item.label)}
/>