@spunto/design-system 0.16.0 → 0.17.0

package/README.md

@@ -63,9 +63,20 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
     `Alert` (+`AlertTitle`/`AlertDescription`, +`alertVariants`) — an **inline, persistent,
     declarative** status banner, the counterpart to the ephemeral imperative `toast()`.
   - _Overlays_ (plug into the `SpuntoProvider` umbrella) — `Dialog`, `AlertDialog`
-    (a confirmation variant, non-dismissible), `Tooltip`. Their portals render into
-    the provider's overlay container; `Tooltip`'s shared delay group is mounted by the
-    provider too.
+    (a confirmation variant, non-dismissible), `Sheet`, `Tooltip`. Their portals render
+    into the provider's overlay container; `Tooltip`'s shared delay group is mounted by
+    the provider too.
+  - _Sheet_ — `Sheet` (+`SheetTrigger`/`SheetClose`/`SheetContent`/`SheetHeader`/
+    `SheetFooter`/`SheetTitle`/`SheetDescription`), the same Base UI dialog entering from
+    an edge. `side` (4) decides the edge, `size` (`sm`…`full`) how far it comes in — two
+    props rather than one bundle of `data-[side=right]:`-prefixed classes, precisely so
+    `className` stays the layout escape hatch (an app widens a panel or lays it out in two
+    columns without `!important`).
+  - _Table_ — `Table` (+`TableHeader`/`TableBody`/`TableFooter`/`TableRow`/`TableHead`/
+    `TableCell`/`TableCaption`). **Presentational only**: no sorting, no pagination, no
+    column model — apps already own that logic and disagree on it; what they were
+    duplicating is the markup and the token choices. `containerClassName` reaches the
+    scroll container (max-height, border, sticky-header context).
   - _CommandPalette_ — `CommandPalette` (+`CommandPaletteInput`/`List`/`Group`/`Item`/
     `Empty`/`Loading`/`Separator`/`Footer`/`Trigger`), the ⌘K palette: an input, groups,
     items, and a jump. **Domain-free**, hence its place in the root entry — it knows
@@ -80,6 +91,17 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
     `value`/`onValueChange` + `filter={null}`. Navigation is `href` + `render.link`, never
     `next/link` — same rule as `WorkerCard`. Not virtualized: a few hundred items stay
     fluid (a non-matching item renders nothing), beyond that filter server-side.
+  - _CommandMenu_ — `CommandMenu` (+`CommandMenuInput`/`List`/`Group`/`Item`/`Empty`/
+    `Loading`/`Separator`), the palette's vocabulary **inline**: a Base UI `Popover`
+    anchored to an element or a **virtual element** (a caret rect), which never moves
+    focus (`initialFocus`/`finalFocus` off, no backdrop, non-modal) and claims ↑ ↓ ↵ Esc
+    on `document` in the **capture** phase, before the field underneath. That's what a
+    "/" menu inside a block editor needs and what the dialog-based palette can't do
+    without losing the caret — hence a separate component rather than a `modal={false}`
+    flag: the contract is the opposite one. Enter is only claimed when an item is
+    highlighted, so a query with no result still inserts a line break. The query either
+    comes from the caller (`query`, the "/" case) or from a `CommandMenuInput` rendered
+    inside the popup (a filter dropdown on a button; `autoFocus` is opt-in).
   - _Terminal_ — `Terminal` (+`TerminalHandle`, `TerminalOptions`), a transport-agnostic
     xterm.js surface: mount, shared dark ANSI theme, fit-on-resize. No opinion on where
     bytes come from (WebSocket, SSE, a static string) — feed it via the `write`/`writeln`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/command-menu.tsx

@@ -0,0 +1,630 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+} from "react"
+import { Autocomplete } from "@base-ui/react/autocomplete"
+import { Popover } from "@base-ui/react/popover"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "../utils"
+import { highlightMatch, type CommandFilter, type CommandFilterItem } from "./command-shared"
+import { Kbd } from "./kbd"
+import { Skeleton } from "./skeleton"
+import { Spinner } from "./spinner"
+import { useOverlayContainer } from "./spunto-provider"
+
+// ---------------------------------------------------------------------------
+// Why this exists next to CommandPalette
+//
+// `CommandPalette` is a *dialog*: it traps focus, which is exactly right for ⌘K
+// and exactly wrong for a "/" menu inside an editor. There, the caret must stay
+// in the block the user is typing in — the moment focus moves, the insertion
+// point is lost and the menu has nothing left to insert into.
+//
+// So this is a separate component rather than a `modal={false}` flag on the
+// palette: the contract isn't "same thing, less dimming", it's the opposite one.
+// Nothing here ever moves focus (Base UI `Popover` with `initialFocus={false}`,
+// `finalFocus={false}`, no backdrop, non-modal), the menu is anchored to whatever
+// the caller points at (an element, a ref, or a virtual element — a caret rect),
+// and the keys it needs (↑ ↓ ↵ esc) are taken on `document` in the **capture**
+// phase, so they never reach the field underneath. Everything else — every
+// printable character, Home/End, the caret keys we don't claim — flows to the
+// field as if no menu were open.
+//
+// Two ways to drive the query, and they're the two real shapes of this UI:
+//   - the caller owns the text (the "/" menu: `query={afterTheSlash}`), or
+//   - the menu owns it, by rendering a `CommandMenuInput` inside the popup
+//     (a filter dropdown hanging off a button; add `autoFocus` if that field
+//     should take focus — it's opt-in, and still not a trap).
+//
+// Presentational, like the palette: `loading` is a prop, results are children,
+// a server-side search is `onQueryChange` + `filter={null}`.
+// ---------------------------------------------------------------------------
+
+/** Same shape as the palette's — a filter written for one works on the other. */
+export type CommandMenuFilterItem = CommandFilterItem
+export type CommandMenuFilter = CommandFilter
+
+/** How every part finds the rendered items: they're the only thing carrying this slot. */
+const ITEM_SELECTOR = "[data-slot='command-menu-item']"
+
+interface MenuContextValue {
+  query: string
+  loading: boolean
+  activeValue: string | null
+  setActiveValue: (value: string) => void
+  setQuery: (value: string) => void
+  matches: (item: CommandFilterItem) => boolean
+  close: () => void
+  listId: string
+}
+
+const MenuContext = createContext<MenuContextValue | null>(null)
+
+function useMenu(part: string): MenuContextValue {
+  const ctx = useContext(MenuContext)
+  if (!ctx) throw new Error(`<${part}> must be rendered inside <CommandMenu>.`)
+  return ctx
+}
+
+// --- root -------------------------------------------------------------------
+
+export interface CommandMenuProps {
+  /** Controlled open state — the caller decides (typing "/", clicking a button…). */
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /**
+   * What the menu hangs off: an element, a ref, a getter, or a **virtual element**
+   * (`{ getBoundingClientRect() }`) — which is how a caret becomes an anchor.
+   */
+  anchor?: Popover.Positioner.Props["anchor"]
+  /**
+   * The field that keeps the focus. Purely for accessibility: while the menu is
+   * open, it gets `aria-expanded`, `aria-controls` and a live `aria-activedescendant`
+   * pointing at the highlighted item, so a screen reader announces the highlight
+   * without focus ever moving. Keyboard interception doesn't need it.
+   */
+  inputRef?: RefObject<HTMLElement | null>
+  /** Controlled query. Leave it out to let a `CommandMenuInput` own it. */
+  query?: string
+  defaultQuery?: string
+  /** Fires on every keystroke of a `CommandMenuInput` — the hook for a server-side search. */
+  onQueryChange?: (query: string) => void
+  /**
+   * Local filtering. Default: accent- and case-insensitive "contains" over the
+   * item's label, keywords and value. `null` filters nothing (results already
+   * come filtered), or pass your own predicate.
+   */
+  filter?: CommandMenuFilter | null
+  /** Draws the input spinner, shows `CommandMenuLoading`, silences `CommandMenuEmpty`. */
+  loading?: boolean
+  /** Where the popup sits relative to the anchor. */
+  side?: Popover.Positioner.Props["side"]
+  align?: Popover.Positioner.Props["align"]
+  sideOffset?: number
+  alignOffset?: number
+  /** Accessible name of the listbox. */
+  label?: string
+  className?: string
+  children?: ReactNode
+}
+
+/**
+ * Inline command menu — the palette's parts, anchored, and without a focus trap.
+ *
+ * ```tsx
+ * <CommandMenu open={open} onOpenChange={setOpen} anchor={caretRect} inputRef={editorRef} query={query}>
+ *   <CommandMenuList>
+ *     <CommandMenuEmpty>Aucun bloc</CommandMenuEmpty>
+ *     <CommandMenuGroup heading="Blocs">
+ *       <CommandMenuItem icon={<Heading1 />} onSelect={() => insert("h1")}>Titre 1</CommandMenuItem>
+ *     </CommandMenuGroup>
+ *   </CommandMenuList>
+ * </CommandMenu>
+ * ```
+ */
+function CommandMenu({
+  open,
+  onOpenChange,
+  anchor,
+  inputRef,
+  query: queryProp,
+  defaultQuery = "",
+  onQueryChange,
+  filter,
+  loading = false,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  alignOffset = 0,
+  label = "Menu de commandes",
+  className,
+  children,
+}: CommandMenuProps) {
+  const container = useOverlayContainer()
+  const listId = useId()
+  const popupRef = useRef<HTMLDivElement | null>(null)
+  const [uncontrolled, setUncontrolled] = useState(defaultQuery)
+  const [activeValue, setActiveValue] = useState<string | null>(null)
+  const query = queryProp ?? uncontrolled
+  const { contains } = Autocomplete.useFilter({ sensitivity: "base" })
+
+  const setQuery = useCallback(
+    (next: string) => {
+      if (queryProp === undefined) setUncontrolled(next)
+      onQueryChange?.(next)
+    },
+    [queryProp, onQueryChange]
+  )
+
+  const close = useCallback(() => onOpenChange(false), [onOpenChange])
+
+  // Every rendered item, in DOM order. The DOM is the source of truth here for
+  // the same reason it is in the palette: items filter themselves out by
+  // rendering nothing, so any list we kept in state would describe the previous
+  // keystroke.
+  const items = useCallback(
+    () => Array.from(popupRef.current?.querySelectorAll<HTMLElement>(ITEM_SELECTOR) ?? []),
+    []
+  )
+
+  // Keep a highlight on something that still exists. Runs after *every* commit
+  // (no dep array) because what changed is the rendered list, not a value we
+  // hold — the functional update makes it a no-op once it has settled.
+  useEffect(() => {
+    if (!open) return
+    const values = items().map((el) => el.dataset.value ?? "")
+    setActiveValue((prev) => (prev && values.includes(prev) ? prev : (values[0] ?? null)))
+  })
+
+  useEffect(() => {
+    if (!open) setActiveValue(null)
+  }, [open])
+
+  // Follow the highlight when it moves out of view. `nearest` so an already
+  // visible item doesn't make the list jump.
+  useEffect(() => {
+    if (!open || !activeValue) return
+    popupRef.current
+      ?.querySelector<HTMLElement>(`${ITEM_SELECTOR}[data-active='true']`)
+      ?.scrollIntoView({ block: "nearest" })
+  }, [open, activeValue])
+
+  // The keys the menu claims, taken on `document` in the capture phase so they
+  // are consumed before the focused field (or React's delegated handlers) ever
+  // sees them. Deliberately short: ↵ is only claimed when there *is* something
+  // to activate, so "/" + a query with no result still inserts a line break.
+  useEffect(() => {
+    if (!open) return
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.defaultPrevented) return
+      const claim = () => {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      if (event.key === "Escape") {
+        claim()
+        close()
+        return
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        const all = items()
+        if (all.length === 0) return
+        claim()
+        const values = all.map((el) => el.dataset.value ?? "")
+        const at = activeValue ? values.indexOf(activeValue) : -1
+        const step = event.key === "ArrowDown" ? 1 : -1
+        const next = (at + step + values.length) % values.length
+        setActiveValue(values[next])
+        return
+      }
+      if (event.key === "Enter") {
+        const active = popupRef.current?.querySelector<HTMLElement>(`${ITEM_SELECTOR}[data-active='true']`)
+        if (!active) return
+        claim()
+        // A click, not a stored callback: it also does the right thing when the
+        // item rendered itself as a link.
+        active.click()
+      }
+    }
+    document.addEventListener("keydown", onKeyDown, true)
+    return () => document.removeEventListener("keydown", onKeyDown, true)
+  }, [open, activeValue, items, close])
+
+  // Combobox semantics for the field that kept the focus. Written to the DOM
+  // rather than handed back as props: the caller's field is often a
+  // contenteditable deep in an editor, not something we can spread props onto.
+  useEffect(() => {
+    const el = inputRef?.current
+    if (!el) return
+    if (!open) {
+      el.removeAttribute("aria-expanded")
+      el.removeAttribute("aria-controls")
+      el.removeAttribute("aria-activedescendant")
+      return
+    }
+    el.setAttribute("aria-expanded", "true")
+    el.setAttribute("aria-controls", listId)
+    const active = popupRef.current?.querySelector<HTMLElement>(`${ITEM_SELECTOR}[data-active='true']`)
+    if (active?.id) el.setAttribute("aria-activedescendant", active.id)
+    else el.removeAttribute("aria-activedescendant")
+    return () => {
+      el.removeAttribute("aria-expanded")
+      el.removeAttribute("aria-controls")
+      el.removeAttribute("aria-activedescendant")
+    }
+  }, [open, activeValue, inputRef, listId])
+
+  const ctx: MenuContextValue = {
+    query,
+    loading,
+    activeValue,
+    setActiveValue,
+    setQuery,
+    close,
+    listId,
+    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 (
+    <Popover.Root open={open} onOpenChange={(next) => onOpenChange(next)}>
+      <Popover.Portal container={container ?? undefined}>
+        <Popover.Positioner
+          data-slot="command-menu-positioner"
+          className="z-50 outline-none"
+          anchor={anchor}
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+        >
+          <Popover.Popup
+            ref={popupRef}
+            data-slot="command-menu"
+            // The whole point: opening and closing leave the focus alone.
+            initialFocus={false}
+            finalFocus={false}
+            // A pointer press inside the menu would blur the field the caret
+            // lives in before the click ever lands. Cancel the default, keep the
+            // caret, let `click` do the work.
+            onMouseDown={(event) => event.preventDefault()}
+            className={cn(
+              "flex max-h-[min(20rem,var(--available-height))] w-[min(20rem,var(--available-width))] flex-col overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg shadow-black/[0.08] outline-none",
+              "origin-[var(--transform-origin)] transition-[transform,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
+              className
+            )}
+            aria-label={label}
+          >
+            <MenuContext.Provider value={ctx}>{children}</MenuContext.Provider>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
+
+// --- input ------------------------------------------------------------------
+
+export interface CommandMenuInputProps
+  extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "size"> {
+  /** Left-hand icon. Defaults to a magnifier; pass `null` for none. */
+  icon?: ReactNode
+}
+
+/**
+ * Optional search row *inside* the popup, for a menu that owns its own query
+ * (a filter dropdown on a button). Leave it out when the caller's field is the
+ * query — the "/" menu case. It doesn't take focus unless you pass `autoFocus`.
+ */
+function CommandMenuInput({ className, placeholder = "Rechercher…", icon, ...props }: CommandMenuInputProps) {
+  const { loading, query, setQuery } = useMenu("CommandMenuInput")
+  return (
+    <div
+      data-slot="command-menu-input"
+      className={cn("flex h-9 shrink-0 items-center gap-2 border-b border-border px-2.5", className)}
+    >
+      {icon !== null && (
+        <span className="shrink-0 text-muted-foreground [&_svg]:size-4" aria-hidden>
+          {icon ?? <SearchIcon className="size-4" />}
+        </span>
+      )}
+      <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}
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        {...props}
+      />
+      {loading && <Spinner size="xs" className="shrink-0 text-muted-foreground" />}
+    </div>
+  )
+}
+
+// --- list -------------------------------------------------------------------
+
+/**
+ * The scrollable listbox. Wrap the groups, items, `CommandMenuEmpty` and
+ * `CommandMenuLoading` in it — the empty state keys off `:has()` on this
+ * element, so it only works from inside.
+ */
+function CommandMenuList({ className, children, ...props }: ComponentProps<"div">) {
+  const { loading, listId } = useMenu("CommandMenuList")
+  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 the
+  // announcement below needs it. 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))
+  })
+
+  return (
+    <div
+      ref={ref}
+      data-slot="command-menu-list"
+      className={cn("group/cmd-menu min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5", className)}
+      {...props}
+    >
+      <div id={listId} role="listbox" aria-label="Résultats">
+        {children}
+      </div>
+      {/* Must stay mounted to announce reliably — only its text changes. */}
+      <div role="status" aria-live="polite" className="sr-only">
+        {loading ? "Recherche en cours…" : count === 0 ? "Aucun résultat" : `${count} résultat${count > 1 ? "s" : ""}`}
+      </div>
+    </div>
+  )
+}
+
+// --- group / separator ------------------------------------------------------
+
+export interface CommandMenuGroupProps 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 CommandMenuGroup({ heading, className, children, ...props }: CommandMenuGroupProps) {
+  const headingId = useId()
+  return (
+    <div
+      data-slot="command-menu-group"
+      role="group"
+      aria-labelledby={heading != null ? headingId : undefined}
+      className={cn("hidden has-[[data-slot=command-menu-item]]:block", className)}
+      {...props}
+    >
+      {heading != null && (
+        <div
+          id={headingId}
+          className="px-2 pt-1.5 pb-1 text-[0.6875rem] font-medium tracking-wide text-muted-foreground uppercase select-none"
+        >
+          {heading}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+/** A thin rule between groups. Static — it doesn't disappear with its neighbours. */
+function CommandMenuSeparator({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="command-menu-separator"
+      role="separator"
+      className={cn("-mx-1.5 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+// --- item -------------------------------------------------------------------
+
+/** Props handed to the app's link component. Spread them all. */
+export type CommandMenuLinkProps = ComponentProps<"a"> & { href: string }
+export type CommandMenuLinkRender = (props: CommandMenuLinkProps) => ReactElement
+
+export interface CommandMenuItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  /** Leading icon (a `lucide-react` glyph, an avatar, a status dot…). */
+  icon?: ReactNode
+  /** Secondary text, right-aligned. */
+  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 the item put
+   * on the node plus `href`, and must return an anchor-ish node (`next/link`, a
+   * router link…). The package never imports `next/link`.
+   */
+  render?: { link?: CommandMenuLinkRender }
+  /** Fires on click *and* on Enter while highlighted. */
+  onSelect?: () => void
+  /**
+   * Whether selecting closes the menu.
+   * @default true
+   */
+  closeOnSelect?: boolean
+}
+
+/**
+ * One entry. 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 CommandMenuItem({
+  icon,
+  meta,
+  description,
+  shortcut,
+  keywords = [],
+  label: labelProp,
+  value,
+  disabled,
+  href,
+  render,
+  onSelect,
+  closeOnSelect = true,
+  className,
+  children,
+  ...props
+}: CommandMenuItemProps) {
+  const { matches, close, query, activeValue, setActiveValue } = useMenu("CommandMenuItem")
+  const autoId = useId()
+  const label = labelProp ?? (typeof children === "string" ? children : undefined)
+
+  if (!matches({ label: label ?? "", keywords, value })) return null
+
+  const itemValue = value ?? label ?? autoId
+  const active = activeValue === itemValue
+
+  const content = (
+    <>
+      {icon != null && (
+        <span
+          className={cn(
+            "flex size-5 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4",
+            active && "text-foreground"
+          )}
+          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" />}
+    </>
+  )
+
+  const shared = {
+    id: autoId,
+    role: "option" as const,
+    "aria-selected": active,
+    "aria-disabled": disabled || undefined,
+    "data-slot": "command-menu-item",
+    "data-value": itemValue,
+    "data-active": active || undefined,
+    "data-disabled": disabled || undefined,
+    onMouseEnter: () => {
+      if (!disabled) setActiveValue(itemValue)
+    },
+    onClick: () => {
+      if (disabled) return
+      onSelect?.()
+      if (closeOnSelect) close()
+    },
+    className: cn(
+      "flex scroll-my-1.5 cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-foreground no-underline outline-none select-none",
+      active && "bg-accent text-accent-foreground",
+      disabled && "pointer-events-none opacity-50",
+      className
+    ),
+  }
+
+  if (href) {
+    const linkRender = render?.link ?? ((linkProps: CommandMenuLinkProps) => <a {...linkProps} />)
+    return linkRender({ ...shared, ...(props as ComponentProps<"a">), href, children: content })
+  }
+
+  return (
+    <div {...shared} {...props}>
+      {content}
+    </div>
+  )
+}
+
+// --- 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 `CommandMenuList`.
+ */
+function CommandMenuEmpty({ className, children = "Aucun résultat", ...props }: ComponentProps<"div">) {
+  const { loading } = useMenu("CommandMenuEmpty")
+  if (loading) return null
+  return (
+    <div
+      data-slot="command-menu-empty"
+      role="presentation"
+      className={cn(
+        "px-3 py-6 text-center text-sm text-muted-foreground group-has-[[data-slot=command-menu-item]]/cmd-menu:hidden",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface CommandMenuLoadingProps 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 CommandMenuLoading({ rows = 3, className, ...props }: CommandMenuLoadingProps) {
+  const { loading } = useMenu("CommandMenuLoading")
+  if (!loading) return null
+  return (
+    <div data-slot="command-menu-loading" role="presentation" className={cn("space-y-1", className)} {...props}>
+      {Array.from({ length: rows }, (_, i) => (
+        <div key={i} className="flex items-center gap-2 px-2 py-1.5">
+          <Skeleton className="size-4 shrink-0 rounded" />
+          <Skeleton className="h-3" style={{ width: `${45 - i * 8}%` }} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export {
+  CommandMenu,
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuGroup,
+  CommandMenuSeparator,
+  CommandMenuItem,
+  CommandMenuEmpty,
+  CommandMenuLoading,
+}

package/src/components/command-palette.tsx

@@ -15,6 +15,7 @@ import { Dialog } from "@base-ui/react/dialog"
 import { SearchIcon } from "lucide-react"
 
 import { cn } from "../utils"
+import { highlightMatch, type CommandFilter, type CommandFilterItem } from "./command-shared"
 import { Kbd } from "./kbd"
 import { Skeleton } from "./skeleton"
 import { Spinner } from "./spinner"
@@ -41,17 +42,13 @@ import { useOverlayContainer } from "./spunto-provider"
 // 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
-}
+/**
+ * What the filter gets to look at for one item. Shared with `CommandMenu` — the
+ * two components filter identically, only their shell differs.
+ */
+export type CommandPaletteFilterItem = CommandFilterItem
 
-export type CommandPaletteFilter = (item: CommandPaletteFilterItem, query: string) => boolean
+export type CommandPaletteFilter = CommandFilter
 
 interface PaletteContextValue {
   query: string
@@ -107,46 +104,6 @@ function comboMatches(event: KeyboardEvent, combo: Combo): boolean {
   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 {

package/src/components/command-shared.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react"
+
+// ---------------------------------------------------------------------------
+// What `CommandPalette` (modal, ⌘K) and `CommandMenu` (inline, anchored) share:
+// how an item describes itself to the filter, and how a match is highlighted.
+// The two components differ in their shell — a focus-trapping Dialog vs. a
+// Popover that never takes focus — not in what "matching" means, so a filter
+// written for one works verbatim on the other.
+// ---------------------------------------------------------------------------
+
+/** What the filter gets to look at for one item. */
+export interface CommandFilterItem {
+  /** `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 CommandFilter = (item: CommandFilterItem, query: string) => boolean
+
+/**
+ * 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).
+ */
+export 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. */
+export 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)}
+    </>
+  )
+}

package/src/components/sheet.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "../utils"
+import { useOverlayContainer } from "./spunto-provider"
+
+// ---------------------------------------------------------------------------
+// A sheet is a Dialog that enters from an edge. Same primitive (`@base-ui/react/
+// dialog` — focus trap, Escape, backdrop, focus restore), same portal target as
+// every other overlay here (the `SpuntoProvider` container), only the geometry
+// changes.
+//
+// Position and size are two separate props on purpose. `side` decides which edge
+// the panel is glued to; `size` decides how far it comes in. Both resolve to
+// plain, unprefixed utilities computed in JS — *not* `data-[side=right]:`-style
+// selectors — so a `className` on `SheetContent` still wins on specificity, and
+// an app can go from a 32rem panel to full-bleed with `size="full"` or with its
+// own `sm:max-w-*` without reaching for `!important`.
+// ---------------------------------------------------------------------------
+
+export type SheetSide = "right" | "left" | "top" | "bottom"
+
+/** How far the panel comes in. Widths for left/right, heights for top/bottom. */
+export type SheetSize = "sm" | "md" | "lg" | "xl" | "full"
+
+const SIDE_CLASSES: Record<SheetSide, string> = {
+  right:
+    "inset-y-0 right-0 h-full w-full border-l data-ending-style:translate-x-full data-starting-style:translate-x-full",
+  left:
+    "inset-y-0 left-0 h-full w-full border-r data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
+  top:
+    "inset-x-0 top-0 w-full border-b data-ending-style:-translate-y-full data-starting-style:-translate-y-full",
+  bottom:
+    "inset-x-0 bottom-0 w-full border-t data-ending-style:translate-y-full data-starting-style:translate-y-full",
+}
+
+// Below `sm` a side panel always takes the full width — a 24rem panel on a phone
+// is a modal with a useless 3rem gutter.
+const HORIZONTAL_SIZE_CLASSES: Record<SheetSize, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-lg",
+  lg: "sm:max-w-3xl",
+  xl: "sm:max-w-5xl",
+  full: "sm:max-w-none",
+}
+
+const VERTICAL_SIZE_CLASSES: Record<SheetSize, string> = {
+  sm: "h-auto max-h-[16rem]",
+  md: "h-auto max-h-[24rem]",
+  lg: "h-auto max-h-[32rem]",
+  xl: "h-auto max-h-[80dvh]",
+  full: "h-dvh",
+}
+
+/** Groups the sheet parts. Controlled via `open`/`onOpenChange`, or uncontrolled. */
+function Sheet(props: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+/** Element that opens the sheet. Pass `render` to reuse an existing button. */
+function SheetTrigger(props: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+/** Imperatively closes the sheet. Wrap a `Button` via `render` for a footer action. */
+function SheetClose(props: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+export interface SheetContentProps extends SheetPrimitive.Popup.Props {
+  /** Which edge the panel slides in from. @default "right" */
+  side?: SheetSide
+  /** Width (left/right) or height (top/bottom) of the panel. @default "md" */
+  size?: SheetSize
+  /** Draws the ✕ in the top corner. @default true */
+  showClose?: boolean
+}
+
+/**
+ * Portal + backdrop + the sliding panel, in one styled wrapper. Renders into the
+ * `SpuntoProvider` overlay container (falls back to `document.body`).
+ *
+ * The panel is a `flex flex-col` by default; `className` is the layout escape
+ * hatch and is merged last — pass `p-0` to lay out your own padding, `grid
+ * grid-cols-2` to split it in two columns, `overflow-y-auto` to scroll the whole
+ * panel rather than an inner region.
+ */
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  size = "md",
+  showClose = true,
+  ...props
+}: SheetContentProps) {
+  const container = useOverlayContainer()
+  const horizontal = side === "left" || side === "right"
+  return (
+    <SheetPrimitive.Portal container={container ?? undefined}>
+      <SheetPrimitive.Backdrop
+        data-slot="sheet-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"
+      />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 border-border bg-background bg-clip-padding text-sm text-foreground shadow-xl shadow-black/[0.08] outline-none",
+          "transition-transform duration-200 ease-out",
+          SIDE_CLASSES[side],
+          horizontal ? HORIZONTAL_SIZE_CLASSES[size] : VERTICAL_SIZE_CLASSES[size],
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showClose && (
+          <SheetPrimitive.Close
+            aria-label="Fermer"
+            className="absolute top-3.5 right-3.5 flex size-7 items-center justify-center rounded-md text-muted-foreground/70 transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
+          >
+            <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPrimitive.Portal>
+  )
+}
+
+/** Title + description stack at the top of the panel. */
+function SheetHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="sheet-header" className={cn("flex flex-col gap-0.5 p-4", className)} {...props} />
+}
+
+/** Action row pinned to the bottom of the panel. */
+function SheetFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-base leading-none font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/table.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "../utils"
+
+// ---------------------------------------------------------------------------
+// Presentational only, on purpose: no sorting, no pagination, no column model.
+// Apps that show tables already own that logic (and disagree on it) — what they
+// were re-writing every time is the markup and the token choices, so that's all
+// this ships. Every part is the plain HTML element with a `data-slot` and a
+// class string, `className` merged last.
+// ---------------------------------------------------------------------------
+
+export interface TableProps extends ComponentProps<"table"> {
+  /**
+   * Class for the scroll container wrapping the `<table>` — the only place a
+   * `max-height`, a sticky-header context or a border/rounding can live, since
+   * it's the element that scrolls.
+   */
+  containerClassName?: string
+}
+
+/** The `<table>` plus its horizontal scroll container. */
+function Table({ className, containerClassName, ...props }: TableProps) {
+  return (
+    <div data-slot="table-container" className={cn("relative w-full overflow-x-auto", containerClassName)}>
+      <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b [&_tr]:border-border", className)} {...props} />
+}
+
+function TableBody({ className, ...props }: ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+}
+
+/** Totals row. Sits under the body with its own tinted background. */
+function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** A row. Hover tint by default; `data-[state=selected]` keeps it tinted. */
+function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A header cell (`<th>`). */
+function TableHead({ className, ...props }: ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A body cell (`<td>`). */
+function TableCell({ className, ...props }: ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Caption under the table — its accessible description. */
+function TableCaption({ className, ...props }: ComponentProps<"caption">) {
+  return (
+    <caption data-slot="table-caption" className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  )
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption }

package/src/index.ts

@@ -91,6 +91,35 @@ export {
   AlertDialogDescription,
 } from "./components/alert-dialog"
 
+// Sheet — the same Base UI dialog, entering from an edge. `side` picks the edge,
+// `size` how far it comes in; both resolve to plain utilities so `className`
+// stays the layout escape hatch (no `!important` needed to widen a panel).
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from "./components/sheet"
+export type { SheetContentProps, SheetSide, SheetSize } from "./components/sheet"
+
+// Table — presentational only (no sorting, no pagination): apps own that logic,
+// what they were duplicating is the markup and the tokens.
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from "./components/table"
+export type { TableProps } from "./components/table"
+
 // CommandPalette — the ⌘K palette, domain-free: an input, groups, items, and a
 // jump. Base UI `Autocomplete` (roles + ↑↓ navigation) rendered inline inside a
 // Base UI `Dialog` (focus trap + Escape), portalled into the provider's overlay
@@ -121,6 +150,33 @@ export type {
   CommandPaletteLinkRender,
 } from "./components/command-palette"
 
+// CommandMenu — the same parts, inline: a Base UI `Popover` anchored to whatever
+// the caller points at (an element or a caret rect), which **never moves focus**
+// (`initialFocus`/`finalFocus` off, no backdrop, non-modal) and takes ↑ ↓ ↵ esc on
+// `document` in the capture phase. That's what a "/" menu inside an editor needs
+// and what the dialog-based palette can't do without losing the caret.
+export {
+  CommandMenu,
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuGroup,
+  CommandMenuSeparator,
+  CommandMenuItem,
+  CommandMenuEmpty,
+  CommandMenuLoading,
+} from "./components/command-menu"
+export type {
+  CommandMenuProps,
+  CommandMenuInputProps,
+  CommandMenuGroupProps,
+  CommandMenuItemProps,
+  CommandMenuLoadingProps,
+  CommandMenuFilter,
+  CommandMenuFilterItem,
+  CommandMenuLinkProps,
+  CommandMenuLinkRender,
+} from "./components/command-menu"
+
 // Kbd — one keyboard cap, or a whole shortcut (`keys="mod+k"` → ⌘ K). Used by the
 // palette, exported on its own for anywhere else a shortcut needs drawing.
 export { Kbd } from "./components/kbd"