@spunto/design-system 0.9.2 → 0.10.0

package/src/components/command-palette.tsx

@@ -0,0 +1,702 @@
+"use client"
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+} from "react"
+import { Autocomplete } from "@base-ui/react/autocomplete"
+import { Dialog } from "@base-ui/react/dialog"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "../utils"
+import { Kbd } from "./kbd"
+import { Skeleton } from "./skeleton"
+import { Spinner } from "./spinner"
+import { useOverlayContainer } from "./spunto-provider"
+
+// ---------------------------------------------------------------------------
+// Why it's built this way
+//
+// The palette is a Base UI `Autocomplete` (roles, `aria-activedescendant`,
+// ↑↓ highlight, scroll-into-view, Enter-activates-the-highlighted-item) rendered
+// *inline* inside a Base UI `Dialog` (focus trap, focus restore, Escape, backdrop).
+// That's the composition Base UI itself recommends for a command palette.
+//
+// One deviation: Base UI filters from an `items` array, and this component is
+// compositional — the app writes `<CommandPaletteItem>` children, like Dialog or
+// Select parts. So the root runs with `mode="none"` (Base UI keeps its hands off
+// the list) and each item decides *for itself* whether it matches the query, with
+// the same `Autocomplete.useFilter()` collator Base UI would have used. An item
+// that doesn't match renders nothing, which is also what keeps a few hundred
+// items fluid: the DOM shrinks as soon as the user types.
+//
+// Purely presentational: nothing here calls an API. `loading` is a prop, results
+// are children, and a server-side search just sets `filter={null}` and feeds the
+// already-filtered items in.
+// ---------------------------------------------------------------------------
+
+/** What the filter gets to look at for one item. */
+export interface CommandPaletteFilterItem {
+  /** `label` prop, or the item's children when they're a plain string. */
+  label: string
+  /** Extra terms that match but are never displayed. */
+  keywords: string[]
+  /** The item's `value`, when it has one. */
+  value?: string
+}
+
+export type CommandPaletteFilter = (item: CommandPaletteFilterItem, query: string) => boolean
+
+interface PaletteContextValue {
+  query: string
+  loading: boolean
+  matches: (item: CommandPaletteFilterItem) => boolean
+  close: () => void
+}
+
+const PaletteContext = createContext<PaletteContextValue | null>(null)
+
+/** How every part finds the rendered items: they're the only thing carrying this slot. */
+const ITEM_SELECTOR = "[data-slot='command-palette-item']"
+
+function usePalette(part: string): PaletteContextValue {
+  const ctx = useContext(PaletteContext)
+  if (!ctx) throw new Error(`<${part}> must be rendered inside <CommandPalette>.`)
+  return ctx
+}
+
+// --- keyboard shortcut ------------------------------------------------------
+
+interface Combo {
+  key: string
+  mod: boolean
+  shift: boolean
+  alt: boolean
+}
+
+/** `"mod+k"` → the combo to match. `mod` = ⌘ on Apple, Ctrl elsewhere. */
+function parseShortcut(shortcut: string): Combo | null {
+  const parts = shortcut
+    .toLowerCase()
+    .split("+")
+    .map((p) => p.trim())
+    .filter(Boolean)
+  const key = parts.pop()
+  if (!key) return null
+  return {
+    key,
+    mod: parts.some((p) => p === "mod" || p === "meta" || p === "cmd" || p === "command" || p === "ctrl" || p === "control"),
+    shift: parts.includes("shift"),
+    alt: parts.some((p) => p === "alt" || p === "option"),
+  }
+}
+
+function comboMatches(event: KeyboardEvent, combo: Combo): boolean {
+  if (event.key.toLowerCase() !== combo.key) return false
+  // ⌘ and Ctrl are interchangeable on purpose — a Mac user on a PC keyboard, or
+  // a Linux user, should not have to know which one this app decided on.
+  if (combo.mod !== (event.metaKey || event.ctrlKey)) return false
+  if (combo.shift !== event.shiftKey) return false
+  if (combo.alt !== event.altKey) return false
+  return true
+}
+
+// --- match highlighting -----------------------------------------------------
+
+/**
+ * Folds a string to a comparable form (lowercase, no diacritics) while keeping,
+ * for every folded character, the index it came from — so a match found on the
+ * folded text can be highlighted on the original one ("déploiement" matched by
+ * "deploi" highlights the right six characters, accent included).
+ */
+function fold(text: string): { folded: string; map: number[] } {
+  let folded = ""
+  const map: number[] = []
+  for (let i = 0; i < text.length; i++) {
+    const chunk = text[i].normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase()
+    for (const char of chunk) {
+      folded += char
+      map.push(i)
+    }
+  }
+  return { folded, map }
+}
+
+/** Wraps the matched slice of `text` in a `<mark>`. Returns the plain text when there's no match. */
+function highlightMatch(text: string, query: string): ReactNode {
+  if (!query.trim()) return text
+  const haystack = fold(text)
+  const needle = fold(query.trim()).folded
+  if (!needle) return text
+  const at = haystack.folded.indexOf(needle)
+  if (at === -1) return text
+  const start = haystack.map[at]
+  const end = haystack.map[at + needle.length - 1] + 1
+  return (
+    <>
+      {text.slice(0, start)}
+      <mark className="rounded-xs bg-primary/15 text-inherit">{text.slice(start, end)}</mark>
+      {text.slice(end)}
+    </>
+  )
+}
+
+// --- root -------------------------------------------------------------------
+
+export interface CommandPaletteProps {
+  /** Controlled open state. */
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /**
+   * Global shortcut that toggles the palette, bound on `document` while mounted.
+   * `mod` = ⌘ on Apple, Ctrl elsewhere. Pass `null` to bind nothing (the app owns
+   * the shortcut, e.g. through its own hotkey layer).
+   * @default "mod+k"
+   */
+  shortcut?: string | null
+  /** Controlled query. Leave it out for an uncontrolled input. */
+  value?: string
+  defaultValue?: string
+  /** Fires on every keystroke — this is the hook for a server-side search. */
+  onValueChange?: (value: string) => void
+  /**
+   * Local filtering. Default: accent- and case-insensitive "contains" over the
+   * item's label, keywords and value. Pass `null` to filter nothing (results
+   * already come filtered from an API), or your own predicate.
+   */
+  filter?: CommandPaletteFilter | null
+  /** Draws the input spinner, shows `CommandPaletteLoading`, silences `CommandPaletteEmpty`. */
+  loading?: boolean
+  /**
+   * Whether the rest of the page is inert while the palette is open.
+   * @default true
+   */
+  modal?: boolean
+  /** Accessible name of the dialog (no visible title in a palette). */
+  label?: string
+  className?: string
+  children?: ReactNode
+}
+
+/**
+ * ⌘K palette: an input, groups of items, and a jump. Domain-free on purpose —
+ * it knows nothing of projects, workers or deployments; those are items the app
+ * hands it.
+ *
+ * ```tsx
+ * <CommandPalette open={open} onOpenChange={setOpen}>
+ *   <CommandPaletteInput placeholder="Rechercher…" />
+ *   <CommandPaletteList>
+ *     <CommandPaletteEmpty>Aucun résultat</CommandPaletteEmpty>
+ *     <CommandPaletteGroup heading="Projets">
+ *       <CommandPaletteItem icon={<Folder />} href="/projects/abc">spunto</CommandPaletteItem>
+ *     </CommandPaletteGroup>
+ *   </CommandPaletteList>
+ *   <CommandPaletteFooter />
+ * </CommandPalette>
+ * ```
+ */
+function CommandPalette({
+  open,
+  onOpenChange,
+  shortcut = "mod+k",
+  value,
+  defaultValue = "",
+  onValueChange,
+  filter,
+  loading = false,
+  modal = true,
+  label = "Palette de commandes",
+  className,
+  children,
+}: CommandPaletteProps) {
+  const container = useOverlayContainer()
+  const [uncontrolled, setUncontrolled] = useState(defaultValue)
+  const query = value ?? uncontrolled
+  const { contains } = Autocomplete.useFilter({ sensitivity: "base" })
+
+  // The shortcut listener outlives the popup (it's what opens it), so it reads
+  // the current open state through refs instead of re-binding on every change.
+  const openRef = useRef(open)
+  openRef.current = open
+  const onOpenChangeRef = useRef(onOpenChange)
+  onOpenChangeRef.current = onOpenChange
+
+  function setQuery(next: string) {
+    if (value === undefined) setUncontrolled(next)
+    onValueChange?.(next)
+  }
+
+  function handleOpenChange(next: boolean) {
+    onOpenChange(next)
+    // A palette always reopens empty — and an app doing a server search needs to
+    // hear about it so it drops the previous results.
+    if (!next && query !== "") setQuery("")
+  }
+
+  useEffect(() => {
+    if (!shortcut) return
+    const combo = parseShortcut(shortcut)
+    if (!combo) return
+    function onKeyDown(event: KeyboardEvent) {
+      if (!comboMatches(event, combo!)) return
+      event.preventDefault()
+      onOpenChangeRef.current(!openRef.current)
+    }
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [shortcut])
+
+  const ctx: PaletteContextValue = {
+    query,
+    loading,
+    close: () => handleOpenChange(false),
+    matches: (item) => {
+      if (!query.trim()) return true
+      if (filter === null) return true
+      if (filter) return filter(item, query)
+      return [item.label, item.value ?? "", ...item.keywords].some((text) => text && contains(text, query))
+    },
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={handleOpenChange} modal={modal}>
+      <Dialog.Portal container={container ?? undefined}>
+        <Dialog.Backdrop
+          data-slot="command-palette-backdrop"
+          className="fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/60"
+        />
+        {/* Top-aligned rather than centered: the list grows downwards, and the
+            popup doesn't jump when a virtual keyboard opens. `dvh` keeps that
+            true on mobile browsers with a collapsing URL bar. */}
+        <Dialog.Viewport className="fixed inset-0 z-50 flex items-start justify-center overflow-hidden px-3 pt-[12vh] pb-3 sm:px-4 sm:pt-[14vh]">
+          <Dialog.Popup
+            data-slot="command-palette"
+            aria-label={label}
+            className={cn(
+              "flex max-h-[min(30rem,calc(100dvh-12vh-1.5rem))] w-full max-w-xl flex-col overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl shadow-black/[0.12] outline-none",
+              "transition-all duration-200 data-ending-style:-translate-y-2 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-2 data-starting-style:scale-95 data-starting-style:opacity-0",
+              className
+            )}
+          >
+            {/* `inline` = the list lives in this popup, not in a floating one.
+                `mode="none"` = Base UI doesn't filter; items filter themselves. */}
+            <Autocomplete.Root
+              open
+              inline
+              mode="none"
+              autoHighlight="always"
+              keepHighlight
+              value={query}
+              onValueChange={setQuery}
+            >
+              <PaletteContext.Provider value={ctx}>{children}</PaletteContext.Provider>
+            </Autocomplete.Root>
+          </Dialog.Popup>
+        </Dialog.Viewport>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+// --- input ------------------------------------------------------------------
+
+export interface CommandPaletteInputProps
+  extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "size"> {
+  /** Left-hand icon. Defaults to a magnifier; pass `null` for none. */
+  icon?: ReactNode
+  /** Draws a clickable `esc` cap on the right that closes the palette. */
+  escHint?: boolean
+}
+
+/**
+ * The search row. Owns the query (through the palette root), the magnifier, the
+ * spinner while `loading`, and the optional `esc` affordance — the palette's only
+ * pointer-reachable close button, since there's no title bar.
+ */
+function CommandPaletteInput({
+  className,
+  placeholder = "Rechercher…",
+  icon,
+  escHint = false,
+  ...props
+}: CommandPaletteInputProps) {
+  const { loading } = usePalette("CommandPaletteInput")
+  return (
+    <div
+      data-slot="command-palette-input"
+      className={cn("flex h-12 shrink-0 items-center gap-2.5 border-b border-border px-3.5", className)}
+    >
+      {icon !== null && (
+        <span className="shrink-0 text-muted-foreground [&_svg]:size-4" aria-hidden>
+          {icon ?? <SearchIcon className="size-4" />}
+        </span>
+      )}
+      <Autocomplete.Input
+        // `any-pointer-coarse:text-base` — below 16px, iOS zooms the page on focus.
+        className="h-full min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground any-pointer-coarse:text-base"
+        placeholder={placeholder}
+        aria-label={props["aria-label"] ?? placeholder}
+        {...props}
+      />
+      {loading && <Spinner size="xs" className="shrink-0 text-muted-foreground" />}
+      {escHint && (
+        <Dialog.Close
+          aria-label="Fermer"
+          className="shrink-0 rounded transition-opacity outline-none hover:opacity-70 focus-visible:ring-2 focus-visible:ring-ring/50"
+        >
+          <Kbd aria-hidden>esc</Kbd>
+        </Dialog.Close>
+      )}
+    </div>
+  )
+}
+
+// --- list -------------------------------------------------------------------
+
+/**
+ * The scrollable results area. Wrap the groups, items, `CommandPaletteEmpty` and
+ * `CommandPaletteLoading` in it — the empty state keys off `:has()` on this
+ * element, so it only works from inside.
+ */
+function CommandPaletteList({ className, children, ...props }: ComponentProps<"div">) {
+  const { loading } = usePalette("CommandPaletteList")
+  const ref = useRef<HTMLDivElement>(null)
+  const [count, setCount] = useState(0)
+
+  // Counting the rendered items is the one thing CSS can't do for us, and it's
+  // needed for the screen-reader announcement below. Reading the DOM after the
+  // commit is cheaper (and more accurate) than making every item report in.
+  useEffect(() => {
+    const rendered = ref.current?.querySelectorAll(ITEM_SELECTOR).length ?? 0
+    setCount((prev) => (prev === rendered ? prev : rendered))
+  })
+
+  // Base UI auto-highlights the first item when the *query* changes. Results
+  // that land later — a server search coming back — miss that pass, and the list
+  // would sit there with nothing highlighted and ↵ doing nothing. So when the
+  // list goes from empty to populated with still nothing highlighted, nudge it
+  // exactly the way a user would. Reading `count` (set one commit after the
+  // items rendered) is what makes the check reliable: by then the highlight, if
+  // Base UI set one, is on the DOM.
+  const wasEmpty = useRef(true)
+  useEffect(() => {
+    const empty = wasEmpty.current
+    wasEmpty.current = count === 0
+    const list = ref.current
+    if (!empty || count === 0 || !list) return
+    if (list.querySelector(`${ITEM_SELECTOR}[data-highlighted]`)) return
+    const input = list.closest("[data-slot='command-palette']")?.querySelector("input")
+    input?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }))
+  }, [count])
+
+  return (
+    <div
+      ref={ref}
+      data-slot="command-palette-list"
+      className={cn("group/cmdk min-h-0 flex-1 overflow-y-auto overscroll-contain", className)}
+      {...props}
+    >
+      <Autocomplete.List className="p-2">{children}</Autocomplete.List>
+      {/* Must stay mounted to announce reliably — only its text changes. */}
+      <Autocomplete.Status className="sr-only">
+        {loading ? "Recherche en cours…" : count === 0 ? "Aucun résultat" : `${count} résultat${count > 1 ? "s" : ""}`}
+      </Autocomplete.Status>
+    </div>
+  )
+}
+
+// --- group / separator ------------------------------------------------------
+
+export interface CommandPaletteGroupProps extends ComponentProps<"div"> {
+  heading?: ReactNode
+}
+
+/**
+ * A titled block of items. It hides itself when none of its items survived the
+ * filter — through `:has()` rather than a JS count, so the heading never flashes
+ * for a frame above an empty group.
+ */
+function CommandPaletteGroup({ heading, className, children, ...props }: CommandPaletteGroupProps) {
+  return (
+    <Autocomplete.Group
+      data-slot="command-palette-group"
+      className={cn("hidden has-[[data-slot=command-palette-item]]:block", className)}
+      {...props}
+    >
+      {heading != null && (
+        <Autocomplete.GroupLabel className="px-2 pt-2 pb-1.5 text-[0.6875rem] font-medium tracking-wide text-muted-foreground uppercase select-none">
+          {heading}
+        </Autocomplete.GroupLabel>
+      )}
+      {children}
+    </Autocomplete.Group>
+  )
+}
+
+/** A thin rule between groups. Static — it doesn't disappear with its neighbours. */
+function CommandPaletteSeparator({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="command-palette-separator"
+      role="separator"
+      className={cn("-mx-2 my-1.5 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+// --- item -------------------------------------------------------------------
+
+/** Props handed to the app's link component. Spread them all — Base UI puts the roles and handlers in there. */
+export type CommandPaletteLinkProps = ComponentProps<"a"> & { href: string }
+export type CommandPaletteLinkRender = (props: CommandPaletteLinkProps) => ReactElement
+
+export interface CommandPaletteItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  /** Leading icon (a `lucide-react` glyph, an avatar, a status dot…). */
+  icon?: ReactNode
+  /** Secondary text, right-aligned: type, org, status… */
+  meta?: ReactNode
+  /** Second line under the label. */
+  description?: ReactNode
+  /** Shortcut cap on the right, e.g. `"mod+n"`. */
+  shortcut?: string
+  /** Extra search terms, never displayed. */
+  keywords?: string[]
+  /**
+   * Text the filter matches on. Defaults to the children when they're a plain
+   * string — pass it explicitly as soon as they aren't.
+   */
+  label?: string
+  /** Stable identity for the item. Also matched by the filter. */
+  value?: string
+  disabled?: boolean
+  /** Turns the item into a link. Enter and click both navigate. */
+  href?: string
+  /**
+   * Escape hatch for app-specific rendering. `link` gets every prop Base UI put
+   * on the item plus `href`, and must return an anchor-ish node (`next/link`, a
+   * router link…). Without it, an `href` falls back to a plain `<a>`. The package
+   * never imports `next/link` — same rule as `WorkerCard`.
+   */
+  render?: { link?: CommandPaletteLinkRender }
+  /** Fires on click *and* on Enter while highlighted. */
+  onSelect?: () => void
+  /**
+   * Whether selecting closes the palette.
+   * @default true
+   */
+  closeOnSelect?: boolean
+}
+
+/**
+ * One result. Renders nothing when it doesn't match the query — that's the whole
+ * filtering mechanism, and what keeps a long list cheap once the user types.
+ */
+function CommandPaletteItem({
+  icon,
+  meta,
+  description,
+  shortcut,
+  keywords = [],
+  label: labelProp,
+  value,
+  disabled,
+  href,
+  render,
+  onSelect,
+  closeOnSelect = true,
+  className,
+  children,
+  ...props
+}: CommandPaletteItemProps) {
+  const { matches, close, query } = usePalette("CommandPaletteItem")
+  const label = labelProp ?? (typeof children === "string" ? children : undefined)
+
+  if (!matches({ label: label ?? "", keywords, value })) return null
+
+  const linkRender = href ? (render?.link ?? ((linkProps) => <a {...linkProps} />)) : undefined
+
+  return (
+    <Autocomplete.Item
+      data-slot="command-palette-item"
+      value={value ?? label ?? null}
+      disabled={disabled}
+      onClick={() => {
+        if (disabled) return
+        onSelect?.()
+        if (closeOnSelect) close()
+      }}
+      render={
+        linkRender
+          ? (itemProps) => linkRender({ ...(itemProps as ComponentProps<"a">), href: href! })
+          : undefined
+      }
+      className={cn(
+        "group/cmd-item flex scroll-my-2 cursor-default items-center gap-2.5 rounded-lg px-2 py-2 text-sm text-foreground no-underline outline-none select-none",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {icon != null && (
+        <span
+          className="flex size-5 shrink-0 items-center justify-center text-muted-foreground group-data-highlighted/cmd-item:text-foreground [&_svg]:size-4"
+          aria-hidden
+        >
+          {icon}
+        </span>
+      )}
+      <span className="min-w-0 flex-1">
+        <span className="block truncate">{label != null ? highlightMatch(label, query) : children}</span>
+        {description != null && <span className="block truncate text-xs text-muted-foreground">{description}</span>}
+      </span>
+      {meta != null && (
+        <span className="shrink-0 truncate text-xs text-muted-foreground tabular-nums">{meta}</span>
+      )}
+      {shortcut && <Kbd keys={shortcut} className="shrink-0" />}
+    </Autocomplete.Item>
+  )
+}
+
+// --- empty / loading --------------------------------------------------------
+
+/**
+ * Shown only when no item survived the filter, and never while `loading` (a
+ * pending search isn't an empty result). Must live inside `CommandPaletteList`.
+ */
+function CommandPaletteEmpty({ className, children = "Aucun résultat", ...props }: ComponentProps<"div">) {
+  const { loading } = usePalette("CommandPaletteEmpty")
+  if (loading) return null
+  return (
+    <div
+      data-slot="command-palette-empty"
+      role="presentation"
+      className={cn(
+        "px-3 py-12 text-center text-sm text-muted-foreground group-has-[[data-slot=command-palette-item]]/cmdk:hidden",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface CommandPaletteLoadingProps extends ComponentProps<"div"> {
+  /** Number of skeleton rows. @default 3 */
+  rows?: number
+}
+
+/** Skeleton rows while an async search is in flight. Renders nothing unless the root is `loading`. */
+function CommandPaletteLoading({ rows = 3, className, ...props }: CommandPaletteLoadingProps) {
+  const { loading } = usePalette("CommandPaletteLoading")
+  if (!loading) return null
+  return (
+    <div data-slot="command-palette-loading" role="presentation" className={cn("space-y-1", className)} {...props}>
+      {Array.from({ length: rows }, (_, i) => (
+        <div key={i} className="flex items-center gap-2.5 px-2 py-2">
+          <Skeleton className="size-4 shrink-0 rounded" />
+          <Skeleton className="h-3" style={{ width: `${45 - i * 8}%` }} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// --- footer / trigger -------------------------------------------------------
+
+export interface CommandPaletteFooterProps extends ComponentProps<"div"> {
+  /**
+   * Draws the ↑↓ / ↵ / esc reminders on the left.
+   * @default true
+   */
+  hints?: boolean
+}
+
+/** The bar under the list: keyboard reminders on the left, a free slot (children) on the right. */
+function CommandPaletteFooter({ hints = true, className, children, ...props }: CommandPaletteFooterProps) {
+  return (
+    <div
+      data-slot="command-palette-footer"
+      className={cn(
+        "flex shrink-0 items-center justify-between gap-3 border-t border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {hints ? (
+        <div className="flex items-center gap-3" aria-hidden>
+          <span className="flex items-center gap-1">
+            <Kbd>↑</Kbd>
+            <Kbd>↓</Kbd>
+            <span className="hidden sm:inline">naviguer</span>
+          </span>
+          <span className="flex items-center gap-1">
+            <Kbd>↵</Kbd> ouvrir
+          </span>
+          <span className="hidden items-center gap-1 sm:flex">
+            <Kbd>esc</Kbd> fermer
+          </span>
+        </div>
+      ) : (
+        <span />
+      )}
+      <div className="flex min-w-0 items-center gap-2">{children}</div>
+    </div>
+  )
+}
+
+export interface CommandPaletteTriggerProps extends ComponentProps<"button"> {
+  /** Shortcut displayed on the right. Pass `null` to show none. @default "mod+k" */
+  shortcut?: string | null
+  /** Left-hand icon. Defaults to a magnifier; pass `null` for none. */
+  icon?: ReactNode
+}
+
+/**
+ * The "Rechercher… ⌘K" field you drop in a nav bar. It's a plain button — it
+ * doesn't own the palette, it just calls `onClick`; the app keeps the open state.
+ */
+function CommandPaletteTrigger({
+  shortcut = "mod+k",
+  icon,
+  className,
+  children = "Rechercher…",
+  ...props
+}: CommandPaletteTriggerProps) {
+  return (
+    <button
+      type="button"
+      data-slot="command-palette-trigger"
+      className={cn(
+        "flex h-8 w-full items-center gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm text-muted-foreground transition-colors outline-none select-none hover:border-ring/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30",
+        className
+      )}
+      {...props}
+    >
+      {icon !== null && <span className="shrink-0 [&_svg]:size-4">{icon ?? <SearchIcon className="size-4" />}</span>}
+      <span className="min-w-0 flex-1 truncate text-left">{children}</span>
+      {shortcut && <Kbd keys={shortcut} className="shrink-0" />}
+    </button>
+  )
+}
+
+export {
+  CommandPalette,
+  CommandPaletteInput,
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteSeparator,
+  CommandPaletteItem,
+  CommandPaletteEmpty,
+  CommandPaletteLoading,
+  CommandPaletteFooter,
+  CommandPaletteTrigger,
+}