Playground

Guía del Playground

El playground es un workspace orientado a producción para diseñar la experiencia de comandos antes de cerrar la integración en tu aplicación.

Te permite definir arquitectura de comandos, validar flujo de teclado/navegación en vivo y exportar código base para React, Vue, Preact, Astro y Core (Vanilla).

Qué puedes hacer en el playground

• modelar la estructura de comandos antes de escribir código de integración
• probar navegación anidada y flujo de elemento activo en tiempo real
• configurar tokens de tema claro/oscuro y validar paridad visual
• ajustar copy de placeholder, estado vacío y etiqueta de cierre
• exportar snippets base por framework desde una única configuración

Mapa del workspace

• Vista previa en vivo: palette embebida que se actualiza con el configurador
• Configurador: superficie de control por acordeones con divulgación progresiva
• Panel de código: pestañas por adaptador con export y copiado
• Acción de abrir preview: mantiene el flujo modal para validar interacción real

Mapa de controles: Básicos

• Idioma: cambia etiquetas del configurador y copy por defecto
• Título de la paleta: encabezado principal del diálogo
• Placeholder de búsqueda: texto del input de búsqueda
• Atajo: trigger de teclado exportado en la config
• Elementos recientes: activación + título + límite de sección reciente
• Modo de datos: secciones estáticas o source asíncrono
• Abrir al cargar: estado inicial de apertura exportado

Mapa de controles: Apariencia

• Tema a editar (Claro / Oscuro): selecciona el modo que vas a modificar
• Acento / Fondo / Texto: tokens semánticos principales
• Título / Descripción / Muted: jerarquía tipográfica
• Título de sección / título de item / subtítulo / atajo: granularidad fina por zona
• Borde / Overlay: contenedor y capa de fondo
• Radio: redondeado global con preview visual
• Presets de sombra: presets rápidos + valor avanzado opcional

El código generado incluye ambos modos dentro de un único objeto theme (theme.light + theme.dark) para mantener exports completos y coherentes.

Mapa de controles: Secciones y comandos

• Añadir / mover / eliminar sección: arquitectura de información de alto nivel
• Título de sección: etiqueta visible de grupo
• Añadir / mover / eliminar item: ordenación y mantenimiento de comandos
• Campos de item: título, icono, subtítulo, atajo, href, keywords, deshabilitado
• Comandos anidados: grupos en profundidad bajo un item
• Controles anidados: añadir/mover/eliminar secciones e ítems anidados

Mapa de controles: Código y export

• Pestañas de adaptador: React, Vue, Preact, Astro, Core (Vanilla)
• Acción copiar: copia snippet activo con feedback visual de éxito/error
• Expandir snippet: vista colapsada parcial con animación de expansión
• Sincronización en vivo: snippets actualizados automáticamente según estado del configurador

Ejemplos de export

import { CommandPalette } from "@cmd-kit/react";

const sections = [
  {
    id: "commands",
    title: "Comandos",
    items: [{ id: "toggle-theme", title: "Cambiar tema", shortcut: "mod+t" }]
  }
];

const theme = {
  light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
  dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
};

export function Demo() {
  return (
    <CommandPalette
      sections={sections}
      shortcut="mod+k"
      title="Menú de comandos"
      messages={{
        searchPlaceholder: "Buscar comandos...",
        noResults: "No se han encontrado resultados.",
        closeLabel: "Cerrar menú de comandos"
      }}
      recents={false}
      theme={theme}
    />
  );
}

<script setup lang="ts">
import { CommandPalette } from "@cmd-kit/vue";

const sections = [{ id: "commands", title: "Comandos", items: [] }];
const theme = {
  light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
  dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
};
</script>

<template>
  <CommandPalette
    :sections="sections"
    :theme="theme"
    shortcut="mod+k"
    title="Menú de comandos"
  />
</template>

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

const palette = createCommandPalette({
  sections: [{ id: "commands", title: "Comandos", items: [] }],
  theme: {
    light: { accentColor: "#0fa6d8", backgroundColor: "#ffffff" },
    dark: { accentColor: "#35d7ff", backgroundColor: "#0b1116" }
  },
  shortcut: "mod+k",
  title: "Menú de comandos"
});

window.addEventListener("beforeunload", () => palette.destroy());

Flujo guiado #1: Arranque rápido (10 minutos)

1. Configura idioma y título en Básicos.
2. Crea secciones principales y 3-5 comandos core.
3. Añade subtítulos y atajos para mejorar lectura y escaneo.
4. Ajusta placeholder/estado vacío/cierre al tono de producto.
5. Abre preview y valida el flujo completo por teclado.
6. Exporta tu adaptador objetivo e intégralo en tu app.

Flujo guiado #2: Configuración dual de tema

1. Selecciona Modo claro y define tokens principales.
2. Cambia a Modo oscuro y replica la misma intención semántica.
3. Valida preview en ambos modos con el selector de modo de vista previa.
4. Revisa contraste en título, subtítulo y atajos.
5. Exporta y confirma presencia de theme.light y theme.dark.

Flujo guiado #3: Arquitectura y flujos anidados

1. Define secciones por intención de usuario (navegación, acciones, settings).
2. Coloca primero los comandos más frecuentes.
3. Usa anidados solo cuando haya navegación real en profundidad.
4. Añade keywords para cubrir sinónimos de búsqueda.
5. Usa estado deshabilitado solo para casos intencionales y contextuales.

Flujo guiado #4: Preparación para source asíncrono

1. Cambia modo de datos a Fuente asíncrona.
2. Ajusta delay para aproximar latencia real de backend.
3. Valida transiciones de carga y estado vacío.
4. Exporta snippet y sustituye la fuente mock por tu cliente API real.
5. Mantén el shape de payload alineado con el esquema section/item.

Checklist preproducción

• validado abrir/cerrar por teclado y navegación con flechas
• validada navegación de vuelta y breadcrumbs en anidados
• validada paridad claro/oscuro en diálogo, items y atajos
• mensajes/localización conectados a capa i18n de aplicación
• snippet exportado normalizado a reglas de lint/estilo del proyecto
• estados async/error validados en runtime real

FAQ