+ Kit command palette system

Core

Headless Core

@cmd-kit/core is the engine layer. It exports the command types, message and theme helpers, filtering utilities, snapshot creation, source loading, recent-command helpers, and execution primitives.

Install

Package manager 
npm install @cmd-kit/core

What Core is for

Build a resolved config

import { createResolvedConfig } from "@cmd-kit/core";

const config = createResolvedConfig({
  sections: [
    {
      id: "navigation",
      title: "Navigation",
      items: [
        { id: "dashboard", title: "Dashboard", href: "/dashboard" }
      ]
    }
  ],
  messages: {
    searchPlaceholder: "Search commands"
  }
});

Add a new command

To add a new option, append a new item in your section config. shortcut is optional at data level and only affects UI layers that render it.

const config = createResolvedConfig({
  sections: [
    {
      id: "navigation",
      title: "Navigation",
      items: [
        { id: "dashboard", title: "Dashboard", href: "/dashboard" },
        { id: "billing", title: "Billing", href: "/billing", shortcut: "mod+b" },
        { id: "support", title: "Support", href: "/support" }
      ]
    }
  ]
});

Create a search snapshot

import { createCommandSnapshot } from "@cmd-kit/core";

const snapshot = createCommandSnapshot(config, "dash");

console.log(snapshot.groups);
console.log(snapshot.items);

Execute results

import {
  dispatchCommandExecution,
  executeCommand
} from "@cmd-kit/core";

const result = executeCommand(snapshot.items[0]);

await dispatchCommandExecution({
  item: snapshot.items[0],
  port: {
    openHref: ({ href }) => window.location.assign(href),
    navigate: ({ title, sections }) => {
      console.log("navigate", title, sections);
    },
    runCallback: async ({ callback }) => callback()
  }
});

Recent commands in Core

Core does not expose a recents prop because it is headless. Use recordRecentCommand and resolveRecentCommands to implement recents in your own state layer, or skip them entirely if you do not need that section.

import {
  recordRecentCommand,
  resolveRecentCommands
} from "@cmd-kit/core";

let recentRecords: Array<{ itemId: string; timestamp: number }> = [];

recentRecords = recordRecentCommand({
  current: recentRecords,
  itemId: "dashboard",
  limit: 6
});

const recentItems = resolveRecentCommands(config.items, recentRecords);

Theme and message helpers

import {
  createThemeCssText,
  resolveMessages,
  resolveTheme,
  resolveThemeMode
} from "@cmd-kit/core";

const themeModes = {
  light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
  dark: { accentColor: "#12b5e5", backgroundColor: "#0f1720" }
};

const theme = resolveTheme(themeModes, resolveThemeMode());

const messages = resolveMessages({
  searchPlaceholder: "Search commands"
});

const cssText = createThemeCssText(theme);

FAQ

Does Core include any UI components?

No. Core is headless and provides command modeling, filtering, snapshots, execution, messages, and theme helpers.

When is Core the right starting point?

Start with Core when you already know you need a custom UI layer or a custom framework adapter.

Can Core load commands asynchronously?

Yes. Use source and loadCommandSource with the same payload shape used by adapter packages.

How do I execute links, callbacks, and nested navigation?

Use dispatchCommandExecution with a port implementation for openHref, runCallback, and navigate.

Can I share data between Core and adapter integrations?

Yes. The command model is shared, so you can move between Core and adapters without redesigning item/section structures.