2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T47be,"use client"; import * as React from "react"; import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandList, CommandOption, useCommand, } from "@kmenu/react"; import type { FilterFunction } from "kmenu"; import { IconArrowLeft, IconChevronRight, IconSearch } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import type { CommandMenuAction } from "@/components/ui/command-menu"; import { Kbd, KbdGroup } from "@/components/ui/kbd"; import { search } from "@/lib/command-filter"; import { cn } from "@/lib/utils"; import { useIsMac, useModShortcut } from "../_shared/use-nav"; /** The Kobra command-menu action shape (label, icon, shortcut, hint, badge, group, children, keywords), plus an optional preview for split view. */ export interface PaletteEntry extends CommandMenuAction { preview?: { title: string; body: string; meta?: string[] }; } /** `default`: header, groups, footer hints. `minimal`: a bare list. `clean`: borderless and airy. `launcher`: icon tiles and key caps. `toolbar`: a compact floating dev bar. `split`: list plus preview pane. */ export type CommandPaletteVariant = "default" | "minimal" | "clean" | "launcher" | "toolbar" | "split"; export type CommandPaletteSize = "sm" | "default" | "lg"; /** `fuzzy`: letters in order. `terms`: every word must hit the label, group or a keyword, in any order. */ export type CommandPaletteSearch = "fuzzy" | "terms"; export type CommandPaletteBackdrop = "dim" | "blur" | "solid" | "transparent"; const asEntry = (option: unknown): PaletteEntry => option as PaletteEntry; const fuzzyFilter: FilterFunction = (options, query) => { const visible = query.trim() ? options : options.filter((o) => !asEntry(o).hidden); return search(visible, query); }; const termsFilter: FilterFunction = (options, query) => { const needles = query.toLowerCase().split(/\s+/).filter(Boolean); if (needles.length === 0) return options.filter((o) => !asEntry(o).hidden); const score = (o: PaletteEntry) => (o.label.toLowerCase().startsWith(needles[0]) ? 0 : 1); return options .filter((o) => { if (o.disabled) return false; const haystack = [o.label, o.group, ...(o.keywords ?? [])].join(" ").toLowerCase(); return needles.every((n) => haystack.includes(n)); }) .toSorted((a, b) => score(asEntry(a)) - score(asEntry(b))); }; const SIZE = { sm: "max-w-md [--cp-py:0.3125rem] [--cp-input:0.875rem] [--cp-list:16rem]", default: "max-w-xl [--cp-py:0.5rem] [--cp-input:0.9375rem] [--cp-list:22rem]", lg: "max-w-2xl [--cp-py:0.6875rem] [--cp-input:1.0625rem] [--cp-list:28rem]", } as const; const VARIANT = { default: "rounded-xl border border-border bg-popover shadow-sm", minimal: "rounded-lg border border-border bg-popover", clean: "rounded-2xl bg-popover shadow-lg ring-1 ring-foreground/8", launcher: "rounded-2xl border border-border bg-popover shadow-md", toolbar: "flex-col-reverse rounded-xl bg-popover shadow-lg ring-1 ring-foreground/10", split: "rounded-xl border border-border bg-popover shadow-sm", } as const; function ModKey({ name }: { name: string }) { const mac = useIsMac(); if (name === "Cmd") return <>{mac ? "⌘" : "Ctrl"}; if (name === "Alt") return <>{mac ? "⌥" : "Alt"}; if (name === "Shift") return <>{"⇧"}; return <>{name}; } function Keys({ keys, size }: { keys: string[]; size: "sm" | "md" }) { return ( {keys.map((k) => ( ))} ); } function Options({ variant }: { variant: CommandPaletteVariant }) { const { command, state } = useCommand(); const query = state.input; const topId = state.filtered[0]?.id; // Enter should take the best match: keep the first result active as the query changes. React.useEffect(() => { if (topId) command?.setActiveById(topId); }, [command, query, topId]); const filtered = state.filtered.map(asEntry); const groups = [...new Set(filtered.map((e) => e.group))].filter((g): g is string => g !== undefined); const ungrouped = filtered.filter((e) => !e.group); const tile = variant === "launcher"; const showIcons = variant !== "minimal"; const renderOption = (entry: PaletteEntry) => ( {showIcons && entry.icon ? ( tile ? ( {entry.icon} ) : variant === "clean" ? ( {entry.icon} ) : ( {entry.icon} ) ) : null} {entry.label} {entry.badge ? {entry.badge} : null} {entry.children ? ( ) : entry.shortcut ? ( ) : entry.hint ? ( {entry.hint} ) : null} ); if (state.currentLevel > 0) return <>{filtered.map(renderOption)}; return ( <> {ungrouped.map(renderOption)} {groups.map((group) => ( {group}}> {filtered.filter((e) => e.group === group).map(renderOption)} ))} ); } /** Says what was searched and what to try, instead of a bare "no results". */ function EmptyText({ override }: { override?: string }) { const { state } = useCommand(); if (override) return <>{override}; const query = state.input.trim(); return ( {query ? `No commands match \u201c${query}\u201d. Try a page or an action.` : "Nothing to show yet."} ); } function Crumbs() { const { command, state } = useCommand(); if (state.breadcrumbs.length === 0) return null; return (

Home {state.breadcrumbs.map((c) => ( ))}

); } function PreviewPane({ placeholder }: { placeholder?: string }) { const { state } = useCommand(); const active = state.filtered.map(asEntry).find((e) => e.id === state.activeId) ?? state.filtered.map(asEntry)[0]; const preview = active?.preview; return (

{preview ? ( <>

{preview.meta?.map((m) => ( {m} ))}

{preview.title}

{preview.body}

) : (

{placeholder ?? "Nothing selected"}

)}

); } export type CommandPaletteProps = { entries: PaletteEntry[]; variant?: CommandPaletteVariant; size?: CommandPaletteSize; placeholder?: string; searchMode?: CommandPaletteSearch; /** Called with the chosen entry, after its own `action`. */ onSelect?: (entry: PaletteEntry) => void; /** Called when Escape is pressed or the Esc key cap is used. */ onClose?: () => void; /** Focus the input on mount. */ autoFocus?: boolean; /** Replaces the default no-results text, which names the query and suggests what to try. */ emptyLabel?: string; className?: string; }; /** * A command palette panel on the Kobra command-menu engine (kmenu) and styling. Inline by default, or inside * `CommandPaletteDialog`. Entries use the Kobra command-menu action shape. */ export function CommandPalette({ entries, variant = "default", size = "default", placeholder = "Search commands", searchMode = "fuzzy", onSelect, onClose, autoFocus, emptyLabel, className, }: CommandPaletteProps) { // The active-row highlight only glides once the first frame has painted. const [ready, setReady] = React.useState(false); React.useEffect(() => { let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, []); const toolbar = variant === "toolbar"; const split = variant === "split"; const showFooter = variant === "default" || variant === "launcher"; const showEsc = variant === "default" || variant === "launcher"; const showSearchIcon = variant !== "minimal" && variant !== "toolbar"; return (

onSelect?.(asEntry(option))} className={cn("flex min-h-0 flex-col", toolbar && "flex-col-reverse")} onKeyDown={(event) => { if (event.key === "Escape") onClose?.(); }} >

{showSearchIcon ? : null} {showEsc ? ( ) : null}

{split ? (

) : ( )} {showFooter ? (

navigate select close

) : null}

); } const BACKDROP: Record = { dim: "bg-black/40", blur: "bg-black/15 backdrop-blur-sm", solid: "bg-background/92", transparent: "bg-transparent", }; const DIALOG_WIDTH: Record = { sm: "w-[min(92vw,28rem)]", default: "w-[min(92vw,38rem)]", lg: "w-[min(94vw,52rem)]", }; export type CommandPaletteDialogProps = Omit & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** The element that opens the palette. Optional when `open` is controlled or the shortcut is used. */ trigger?: React.ReactElement; backdrop?: CommandPaletteBackdrop; /** Cmd/Ctrl plus this key toggles the palette. `false` turns the shortcut off. */ shortcut?: string | false; /** Required name for the dialog. */ title?: string; className?: string; }; /** The palette in a modal: backdrop variants, Cmd/Ctrl+K, focus return, scroll lock, Escape to close. */ export function CommandPaletteDialog({ open, defaultOpen = false, onOpenChange, trigger, backdrop = "dim", shortcut = "k", title = "Command palette", size = "default", onSelect, className, ...palette }: CommandPaletteDialogProps) { const [inner, setInner] = React.useState(defaultOpen); const controlled = open !== undefined; const current = controlled ? open : inner; const set = React.useCallback( (next: boolean) => { if (!controlled) setInner(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); useModShortcut(shortcut, () => set(!current)); return ( {trigger ? : null} {title} set(false)} onSelect={(entry) => { onSelect?.(entry); if (!entry.children) set(false); }} /> ); } /** A search-field-shaped button that opens a palette, with the shortcut shown on key caps. */ export function CommandPaletteTrigger({ label = "Search", shortcut = ["Cmd", "K"], className, ...props }: Omit, "children"> & { label?: string; shortcut?: string[] }) { return ( ); } 32:T137e,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react"; const noop = () => () => {}; /** False on the server and during hydration, true afterwards. */ export function useMounted(): boolean { return useSyncExternalStore(noop, () => true, () => false); } /** True on Apple platforms, where the modifier key is Cmd. Server and first client render say Mac. */ export function useIsMac(): boolean { return useSyncExternalStore( noop, () => /Mac|iPhone|iPad/.test(navigator.platform), () => true, ); } const listeners = new Set<() => void>(); function subscribeStorage(notify: () => void) { listeners.add(notify); window.addEventListener("storage", notify); return () => { listeners.delete(notify); window.removeEventListener("storage", notify); }; } function readRaw(key: string | undefined): string | null { if (!key) return null; try { return window.localStorage.getItem(key); } catch { return null; } } function writeStorage(key: string, value: unknown) { try { window.localStorage.setItem(key, JSON.stringify(value)); } catch { /* private mode or quota: the state still works in memory */ } listeners.forEach((notify) => notify()); } /** * State that survives reloads when `key` is given. The server and the hydrating render see `initial`; the stored * value arrives right after, and `ready` turns true two frames later so callers can keep transitions off until * the restored value has painted. Without a key it is plain state. */ export function usePersistedState( key: string | undefined, initial: T, ): [value: T, setValue: (next: T) => void, ready: boolean] { const [local, setLocal] = useState(initial); const [ready, setReady] = useState(!key); const raw = useSyncExternalStore( subscribeStorage, () => readRaw(key), () => null, ); const stored = useMemo(() => { if (raw === null) return undefined; try { return JSON.parse(raw) as T; } catch { return undefined; } }, [raw]); useEffect(() => { if (!key) return; let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, [key]); const set = useCallback( (next: T) => { setLocal(next); if (key) writeStorage(key, next); }, [key], ); return [key && stored !== undefined ? stored : local, set, ready]; } /** Controlled or uncontrolled value, Base UI naming. */ export function useControllable( value: T | undefined, defaultValue: T, onChange?: (next: T) => void, ): [T, (next: T) => void] { const [inner, setInner] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : inner; const onChangeRef = useRef(onChange); useEffect(() => { onChangeRef.current = onChange; }); const set = useCallback( (next: T) => { if (!controlled) setInner(next); onChangeRef.current?.(next); }, [controlled], ); return [current, set]; } type ShortcutOptions = { /** `window`: any time. `within`: only while the element holds focus or the pointer. */ scope?: "window" | "within"; /** Element used by `within`. */ scopeRef?: React.RefObject; /** Also swallow these Cmd/Ctrl+key combos before other listeners see them. */ swallow?: string[]; }; /** * Cmd/Ctrl + key. Runs in the capture phase so it can claim a combo (for example, to replace the Kobra * sidebar's built-in Cmd/Ctrl+B with another key). A key of `false` disables the shortcut. */ export function useModShortcut( key: string | false | undefined, handler: () => void, { scope = "window", scopeRef, swallow = [] }: ShortcutOptions = {}, ) { const handlerRef = useRef(handler); useEffect(() => { handlerRef.current = handler; }); useEffect(() => { const wanted = key ? key.toLowerCase() : undefined; const onKeyDown = (event: KeyboardEvent) => { if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return; const pressed = event.key.toLowerCase(); if (swallow.includes(pressed) && pressed !== wanted) { event.stopPropagation(); return; } if (!wanted || pressed !== wanted) return; if (scope === "within") { const node = scopeRef?.current; if (!node || !(node.contains(document.activeElement) || node.matches(":hover"))) return; } event.preventDefault(); event.stopPropagation(); handlerRef.current(); }; window.addEventListener("keydown", onKeyDown, true); return () => window.removeEventListener("keydown", onKeyDown, true); // swallow is compared by content // eslint-disable-next-line react-hooks/exhaustive-deps }, [key, scope, scopeRef, swallow.join("|")]); } 33:T16af,"use client"; import { useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { commandEntries, devEntries, launcherEntries, multiTermEntries, nestedCommandEntries, previewEntries, type CommandEntry, } from "../_fixtures"; import { DemoPage, DemoSection } from "../_shared/demo-kit"; import { CommandPalette, CommandPaletteDialog, CommandPaletteTrigger, type CommandPaletteBackdrop, type PaletteEntry, } from "./command-palette"; function toEntries(list: CommandEntry[]): PaletteEntry[] { return list.map((e) => ({ id: e.id, label: e.label, group: e.group, icon: e.icon ? : undefined, shortcut: e.shortcut, hint: e.hint, keywords: e.keywords, preview: e.preview, children: e.children ? toEntries(e.children) : undefined, })); } function Readout({ picked }: { picked: string | null }) { if (!picked) return null; return (

Selected: {picked}

); } function Live({ list, ...props }: { list: CommandEntry[] } & Omit, "entries" | "onSelect">) { const entries = useMemo(() => toEntries(list), [list]); const [picked, setPicked] = useState(null); return (

setPicked(e.label)} {...props} />

); } function Backdrops() { const entries = useMemo(() => toEntries(commandEntries), []); const [picked, setPicked] = useState(null); const kinds: CommandPaletteBackdrop[] = ["dim", "blur", "solid", "transparent"]; return (

{kinds.map((kind) => ( setPicked(e.label)} trigger={ } /> ))}

); } function ModalWithShortcut() { const entries = useMemo(() => toEntries(commandEntries), []); const [picked, setPicked] = useState(null); return (

setPicked(e.label)} trigger={} />

Press Cmd or Ctrl and K anywhere on this page.

); } export function CommandPaletteDemo() { const devs = useMemo(() => toEntries(devEntries), []); return (

localhost:3000/orders

); } export default CommandPaletteDemo; 34:T7aa,import type { BlockMeta } from "../../../lib/block-meta"; export const commandPaletteMeta: BlockMeta = { slug: "command-palette", title: "Command palette", description: "Command palette on the Kobra command-menu engine: default, minimal, clean, launcher, dev toolbar and split-view variants, multi-term search, nested groups, sizes and modal backdrop variants.", group: "navigation", kobraDeps: ["command-menu", "kbd", "button"], files: ["blocks/navigation/command-palette/command-palette.tsx", "blocks/navigation/_shared/use-nav.ts"], props: [ { name: "entries", type: "PaletteEntry[]", description: "Kobra command-menu actions (label, icon, shortcut, hint, badge, group, keywords, children, action) plus an optional preview." }, { name: "variant", type: "'default' | 'minimal' | 'clean' | 'launcher' | 'toolbar' | 'split'", default: "'default'", description: "Visual treatment." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Width, row height and input size." }, { name: "searchMode", type: "'fuzzy' | 'terms'", default: "'fuzzy'", description: "Fuzzy letters in order, or every word must match the label or a keyword." }, { name: "placeholder", type: "string", default: "'Search commands'", description: "Input placeholder and accessible name." }, { name: "onSelect", type: "(entry: PaletteEntry) => void", description: "Called after the entry's own action." }, { name: "CommandPaletteDialog", type: "open, defaultOpen, onOpenChange, trigger, backdrop, shortcut, title", description: "Modal wrapper. backdrop: dim | blur | solid | transparent. shortcut: Cmd/Ctrl plus a key, or false." }, { name: "CommandPaletteTrigger", type: "label, shortcut", description: "Search-field-shaped button with key caps." }, { name: "className", type: "string", description: "Root only." }, ], tags: ["command", "search", "kbar", "spotlight", "app-ui"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#navigation","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Navigation"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Command palette"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Command palette"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Command palette on the Kobra command-menu engine: default, minimal, clean, launcher, dev toolbar and split-view variants, multi-term search, nested groups, sizes and modal backdrop variants."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"command-palette","group":"navigation","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/navigation/command-palette/command-palette.tsx","code":"$31"},{"path":"blocks/navigation/_shared/use-nav.ts","code":"$32"},{"path":"blocks/navigation/command-palette/demo.tsx","code":"$33"},{"path":"blocks/navigation/command-palette/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]