Command Palette

<xtyle-command-palette id="palette" hotkey="mod+k" label="Command palette"></xtyle-command-palette>

<script>
	const palette = document.querySelector("#palette");

	// hand it the WHOLE command list — the palette does the filtering
	palette.items = [
		{ id: "file.new", label: "New file", group: "File", shortcut: "Ctrl+N" },
		{ id: "file.open", label: "Open file…", group: "File", shortcut: "Ctrl+O", keywords: ["browse"] },
		{ id: "file.save", label: "Save", group: "File", shortcut: "Ctrl+S" },
		{ id: "view.theme", label: "Toggle theme", group: "View", hint: "light / dark" },
		{ id: "view.zen", label: "Zen mode", group: "View", disabled: true },
	];

	palette.addEventListener("select", (event) => {
		const { id, item } = event.detail;
		console.log("run", id, item.label);
	});

	// or open it yourself, from a button
	document.querySelector("#launch").addEventListener("click", () => palette.show());
</script>

<script lang="ts">
	import { CommandPalette, Button, type CommandItem } from "@xtyle/svelte";

	let open = $state(false);

	const commands: CommandItem[] = [
		{ id: "file.new", label: "New file", group: "File", shortcut: "Ctrl+N" },
		{ id: "file.open", label: "Open file…", group: "File", shortcut: "Ctrl+O", keywords: ["browse"] },
		{ id: "view.theme", label: "Toggle theme", group: "View", hint: "light / dark" },
	];
</script>

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

<CommandPalette
	bind:open
	items={commands}
	hotkey="mod+k"
	storageKey="demo.palette.recent"
	onselect={(event) => console.log("run", event.detail.id)}
/>

---
import CommandPalette from "@xtyle/astro/CommandPalette.astro";

const commands = [
	{ id: "file.new", label: "New file", group: "File", shortcut: "Ctrl+N" },
	{ id: "file.open", label: "Open file…", group: "File", shortcut: "Ctrl+O" },
	{ id: "view.theme", label: "Toggle theme", group: "View", hint: "light / dark" },
];
---

<CommandPalette id="palette" items={commands} hotkey="mod+k" />

<script>
	document.querySelector("#palette").addEventListener("select", (event) => {
		console.log("run", event.detail.id);
	});
</script>

<xtyle-command-palette id="ranked"></xtyle-command-palette>

<script>
	const palette = document.querySelector("#ranked");
	palette.items = commands;

	// the override hook: return null to drop an item, or { score, indices } to keep it.
	// higher scores rank earlier; `indices` are the label characters to highlight.
	palette.scorer = (query, item) => {
		if (query === "") return { score: item.pinned ? 100 : 0 };
		const at = item.label.toLowerCase().indexOf(query.toLowerCase());
		if (at === -1) return null;
		return {
			score: 100 - at,
			indices: Array.from({ length: query.length }, (_, i) => at + i),
		};
	};
</script>

<script lang="ts">
	import { CommandPalette, type CommandScorer } from "@xtyle/svelte";
	import { rank } from "./my-fuzzy-lib";

	// bring your own ranking: a real fuzzy library, a usage-weighted model, anything
	const scorer: CommandScorer = (query, item) => {
		const hit = rank(query, item.label);
		return hit ? { score: hit.score, indices: hit.positions } : null;
	};
</script>

<CommandPalette {items} {scorer} hotkey="mod+k" />

---
import CommandPalette from "@xtyle/astro/CommandPalette.astro";
---

<CommandPalette id="ranked" items={commands} />

<script>
	import { rank } from "../lib/my-fuzzy-lib";

	// the palette always filters — it just doesn't insist on filtering *its* way
	document.querySelector("#ranked").scorer = (query, item) => {
		const hit = rank(query, item.label);
		return hit ? { score: hit.score, indices: hit.positions } : null;
	};
</script>

<xtyle-command-palette id="line" complete-first label="Command line"></xtyle-command-palette>

<script type="module">
	import "@xtyle/core/elements";

	const palette = document.querySelector("#line");
	palette.items = [
		{ id: "rect", label: "rect <x,y> <w,h> [color]", hint: "draw a rectangle" },
		{ id: "goto", label: "goto <line>", hint: "jump to a line" },
		{ id: "clear", label: "clear", hint: "wipe the layer" },
	];

	// recents are whole lines, so history keeps the rectangle and not just "rect"
	let history = ["rect 10,10 40,40 azul", "goto 214"];
	palette.recent = history;

	palette.addEventListener("select", (event) => {
		const { id, query } = event.detail;
		const line = query.trim().split(/\s+/)[0] === id ? query.trim() : id;
		run(line);
		if (line !== id) palette.recent = history = [line, ...history.filter((seen) => seen !== line)].slice(0, 8);
	});
</script>

<script lang="ts">
	import { CommandPalette } from "@xtyle/svelte";

	const items = [
		{ id: "rect", label: "rect <x,y> <w,h> [color]", hint: "draw a rectangle" },
		{ id: "goto", label: "goto <line>", hint: "jump to a line" },
		{ id: "clear", label: "clear", hint: "wipe the layer" },
	];

	let history = $state(["rect 10,10 40,40 azul", "goto 214"]);

	function onselect(event: CustomEvent) {
		const { id, query } = event.detail;
		const line = query.trim().split(/\s+/)[0] === id ? query.trim() : id;
		run(line);
		if (line !== id) history = [line, ...history.filter((seen) => seen !== line)].slice(0, 8);
	}
</script>

<!-- Enter on a half-typed name completes it; Enter on a finished name runs the line -->
<CommandPalette {items} completeFirst recent={history} {onselect} />

---
import CommandPalette from "@xtyle/astro/CommandPalette.astro";

const items = [
	{ id: "rect", label: "rect <x,y> <w,h> [color]", hint: "draw a rectangle" },
	{ id: "goto", label: "goto <line>", hint: "jump to a line" },
	{ id: "clear", label: "clear", hint: "wipe the layer" },
];
---

<CommandPalette id="line" {items} completeFirst label="Command line" />

<script>
	const palette = document.querySelector("#line");
	palette.recent = ["rect 10,10 40,40 azul", "goto 214"];
</script>