CommandPalette

import '@bluui/web/styles.css'

import { createCommandPalette } from "@bluui/web";
export function mount(host: HTMLElement) {
  const output = document.createElement("p");
  host.append(output);
  const palette = createCommandPalette(
    host,
    {
      TriggerLabel: "Open commands",
      ShowTrigger: true,
      EnableShortcut: false,
      Commands: [
        {
          Key: "summary",
          Label: "Show summary",
          Description: "Run a local application action.",
        },
        { Key: "grid", Label: "Open grid", Group: "Navigate" },
      ],
    },
    {
      Command: (key) => {
        if (key === "grid") location.hash = "grid";
        else output.textContent = "Workspace summary: 3 active projects.";
      },
    },
  );
  return {
    destroy() {
      palette.destroy();
      output.remove();
    },
  };
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()