+ Kit command palette system

Core

Core headless

@cmd-kit/core es el centro agnóstico al framework del proyecto. Te da secciones tipadas, fuzzy search, snapshot building, primitivas de ejecución, seguimiento de recientes y helpers de tema sin imponer ninguna capa de render.

Instalación

Gestor de paquetes 
npm install @cmd-kit/core

Qué cubre

Ejemplo mínimo

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

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

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

await dispatchCommandExecution({
  item: snapshot.items[0],
  port: {
    openHref: ({ href }) => window.location.assign(href)
  }
});

Añadir un comando nuevo

Para añadir una opción nueva, agrega un nuevo ítem en la configuración de secciones. shortcut es opcional a nivel de datos y solo se mostrará si tu UI lo renderiza.

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

Comandos recientes en Core

Core no expone una prop recents porque es headless. Para implementar recientes usa recordRecentCommand y resolveRecentCommands en tu estado, o no lo uses si no necesitas esa sección.

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

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

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

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

Tema y mensajes

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: "Buscar comandos"
});

const cssText = createThemeCssText(theme);

Cuándo usarlo directamente

Usa el core directamente cuando quieras construir tu propia UI, integrarte en otro framework o mantener la implementación totalmente custom. Si quieres un componente listo para usar, empieza por uno de los adaptadores oficiales.

FAQ

¿Core incluye componentes visuales?

No. Core es headless y aporta modelado de comandos, filtrado, snapshots, ejecución y helpers de tema/mensajes.

¿Cuándo debo empezar directamente por Core?

Cuando ya sabes que necesitas una UI completamente custom o un adaptador propio.

¿Core soporta carga asíncrona de comandos?

Sí. Puedes usar source y loadCommandSource con el mismo shape de datos que en los adaptadores.

¿Cómo ejecuto enlaces, callbacks y navegación anidada?

Con dispatchCommandExecution y una implementación de port para openHref, runCallback y navigate.

¿Puedo compartir datos entre Core y los adaptadores?

Sí. El modelo de comandos es común, así que puedes migrar sin rediseñar la estructura de ítems/secciones.