@cueplusplus/ui 0.13.0

package/dist/overlays/_surface.js

@@ -0,0 +1,70 @@
+//#region src/overlays/_surface.ts
+/**
+* The conventions every floating surface in this system shares.
+*
+* Overlays are the one place the portfolio allows a shadow: a dialog, a menu or
+* a toast genuinely floats above the page, so it gets `surface-2` fill, the
+* `border-overlay` rim (which some themes — venu — deliberately match to the
+* surface so the rim vanishes) and one soft drop shadow. Everything flat stays
+* flat and separates with hairlines instead.
+*
+* Encoded here once rather than repeated per component so a change to the
+* overlay language is a one-line change, and so the tests can assert the same
+* recipe on every overlay in the group.
+*/
+/**
+* Fill, rim, radius and shadow for any floating content surface.
+*
+* @example
+* <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
+*/
+const overlaySurfaceClasses = "border border-border-overlay bg-surface-2 rounded-(--radius-overlay) shadow-[0_8px_24px_rgba(0,0,0,0.4)]";
+/**
+* The full-viewport dim behind a modal surface. `--cue-scrim` is theme-owned —
+* dusk and hivehub tune their own — so the value is never hard-coded here.
+*/
+const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) transition-opacity duration-150 ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+/**
+* What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
+* painted one. The stacking context lives here so the popup itself can stay
+* `position: static` inside it.
+*/
+const overlayPositionerClasses = "z-50 outline-none";
+/**
+* Enter/exit for an anchored popup, driven entirely by Base UI's
+* `data-starting-style` / `data-ending-style` attributes and plain CSS
+* transitions — no animation library, and nothing to run on the main thread
+* when the user has asked for reduced motion.
+*/
+const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+/**
+* Enter/exit for a centred modal surface. Split from
+* {@link overlayPopupTransitionClasses} because a dialog is centred with a
+* translate, and animating `scale` alongside a static `translate` needs the
+* transition property list to name both.
+*/
+const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+/** Body copy inside an overlay: mono, one rung under the panel's own text. */
+const overlayTextClasses = "font-mono text-(length:--cue-text-ui) text-fg";
+/** The heading line of a dialog, an alert dialog or a popover. */
+const overlayTitleClasses = "font-mono text-(length:--cue-text-emphasis) font-medium text-fg";
+/** The supporting line under an overlay title. */
+const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
+/** The action strip at the foot of a modal surface. */
+const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3) pt-(--cue-space-2)";
+/**
+* One row of a menu: the short rung of the density control ladder, highlighted
+* with `accent-soft` rather than a solid fill (the luma defect ruling — a solid
+* accent bar on a hovered row is too loud at console density).
+*/
+const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+/** The uppercase mono caption over a group of menu rows. */
+const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase select-none";
+/** The hairline between menu groups. */
+const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
+/** Padding of a menu popup — a single space unit so rows reach the rim. */
+const menuPopupClasses = "min-w-[10rem] p-(--cue-space-1)";
+/** Default gap in px between an anchored popup and its trigger. */
+const OVERLAY_SIDE_OFFSET = 4;
+//#endregion
+export { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses };

package/dist/overlays/_wheel.js

@@ -0,0 +1,42 @@
+"use client";
+import * as React from "react";
+//#region src/overlays/_wheel.ts
+/**
+* Close an anchored overlay when the viewport moves under it.
+*
+* A popup is positioned from its trigger's screen rect. A canvas that pans by
+* mutating a CSS `transform` — React Flow in dmxhub, the patch grid here — fires
+* no `scroll` event, so a menu opened over it silently detaches from the thing
+* it belongs to. Listening for `wheel` in the **capture** phase catches the pan
+* before the canvas has consumed it; `resize` catches the other way a fixed
+* popup can end up pointing at nothing.
+*
+* Wheels that land inside the popup are ignored: that is the user scrolling a
+* long menu, not the world moving.
+*
+* @param enabled Whether to watch at all — the `closeOnWheel` prop.
+* @param close Called once per qualifying event; safe to call when already closed.
+* @param popupRef The popup element, so its own scrolling does not dismiss it.
+* @internal Not part of the public API; used by `Popover` and `DropdownMenu`.
+*/
+function useCloseOnWheel(enabled, close, popupRef) {
+	const closeRef = React.useRef(close);
+	closeRef.current = close;
+	React.useEffect(() => {
+		if (!enabled || typeof window === "undefined") return;
+		const onWheel = (event) => {
+			const popup = popupRef.current;
+			if (popup !== null && event.target instanceof Node && popup.contains(event.target)) return;
+			closeRef.current();
+		};
+		const onResize = () => closeRef.current();
+		window.addEventListener("wheel", onWheel, true);
+		window.addEventListener("resize", onResize);
+		return () => {
+			window.removeEventListener("wheel", onWheel, true);
+			window.removeEventListener("resize", onResize);
+		};
+	}, [enabled, popupRef]);
+}
+//#endregion
+export { useCloseOnWheel };

package/dist/overlays/alert-dialog.d.ts

@@ -0,0 +1,67 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/overlays/alert-dialog.d.ts
+/** Same geometry as a dialog; an alert is simply a narrower default. */
+declare const alertDialogPopupVariants: (props?: ({
+  width?: "sm" | "md" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface AlertDialogRootProps extends AlertDialog.Root.Props {}
+/**
+ * Groups the parts of an alert dialog and owns its open state. Renders no
+ * element.
+ */
+declare function AlertDialogRoot(props: AlertDialogRootProps): React.JSX.Element;
+interface AlertDialogTriggerProps extends AlertDialog.Trigger.Props {}
+interface AlertDialogContentProps extends Omit<AlertDialog.Popup.Props, "className">, VariantProps<typeof alertDialogPopupVariants> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the scrim behind it. */
+  backdropClassName?: string;
+  /** Keep the popup mounted while closed. */
+  keepMounted?: boolean;
+}
+interface AlertDialogTitleProps extends AlertDialog.Title.Props {}
+interface AlertDialogDescriptionProps extends AlertDialog.Description.Props {}
+interface AlertDialogFooterProps extends React.ComponentPropsWithoutRef<"div"> {}
+interface AlertDialogCancelProps extends AlertDialog.Close.Props {}
+interface AlertDialogActionProps extends AlertDialog.Close.Props {
+  /**
+   * Which answer this is. `"danger"` for anything destructive, `"accent"` for a
+   * confirmation that merely proceeds. Defaults to `"accent"`.
+   */
+  tone?: "accent" | "danger";
+}
+/**
+ * A modal that asks one question with two answers, for anything irreversible.
+ *
+ * Wraps Base UI's `AlertDialog`: the popup takes `role="alertdialog"`, focus is
+ * trapped and restored, and — unlike {@link Dialog} — an outside press does not
+ * dismiss it. Everything else (scrim, surface, portal theme stamping) is shared
+ * with the rest of the overlay family.
+ *
+ * @example
+ * <AlertDialog.Root>
+ *   <AlertDialog.Trigger render={<Button variant="danger-outline">Delete</Button>} />
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Title>Delete universe 3?</AlertDialog.Title>
+ *     <AlertDialog.Description>Every patched fixture goes with it.</AlertDialog.Description>
+ *     <AlertDialog.Footer>
+ *       <AlertDialog.Cancel>Keep</AlertDialog.Cancel>
+ *       <AlertDialog.Action tone="danger" onClick={remove}>Delete</AlertDialog.Action>
+ *     </AlertDialog.Footer>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ */
+declare const AlertDialog$1: {
+  Root: typeof AlertDialogRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<AlertDialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<AlertDialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Title: React.ForwardRefExoticComponent<Omit<AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+  Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+  Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogCancelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Action: React.ForwardRefExoticComponent<Omit<AlertDialogActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogRootProps, AlertDialogTitleProps, AlertDialogTriggerProps };

package/dist/overlays/alert-dialog.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import { buttonVariants } from "../primitives/button.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlaySurfaceClasses, overlayTitleClasses, scrimClasses } from "./_surface.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/overlays/alert-dialog.tsx
+/** Same geometry as a dialog; an alert is simply a narrower default. */
+const alertDialogPopupVariants = cva(`${overlaySurfaceClasses} ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
+	variants: { width: {
+		sm: "max-w-[20rem]",
+		md: "max-w-[26rem]",
+		lg: "max-w-[32rem]"
+	} },
+	defaultVariants: { width: "sm" }
+});
+/**
+* Groups the parts of an alert dialog and owns its open state. Renders no
+* element.
+*/
+function AlertDialogRoot(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, { ...props });
+}
+/**
+* A modal that asks one question with two answers, for anything irreversible.
+*
+* Wraps Base UI's `AlertDialog`: the popup takes `role="alertdialog"`, focus is
+* trapped and restored, and — unlike {@link Dialog} — an outside press does not
+* dismiss it. Everything else (scrim, surface, portal theme stamping) is shared
+* with the rest of the overlay family.
+*
+* @example
+* <AlertDialog.Root>
+*   <AlertDialog.Trigger render={<Button variant="danger-outline">Delete</Button>} />
+*   <AlertDialog.Content>
+*     <AlertDialog.Title>Delete universe 3?</AlertDialog.Title>
+*     <AlertDialog.Description>Every patched fixture goes with it.</AlertDialog.Description>
+*     <AlertDialog.Footer>
+*       <AlertDialog.Cancel>Keep</AlertDialog.Cancel>
+*       <AlertDialog.Action tone="danger" onClick={remove}>Delete</AlertDialog.Action>
+*     </AlertDialog.Footer>
+*   </AlertDialog.Content>
+* </AlertDialog.Root>
+*/
+const AlertDialog$1 = {
+	Root: AlertDialogRoot,
+	Trigger: React.forwardRef(function AlertDialogTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+			ref,
+			"data-slot": "alert-dialog-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function AlertDialogContent({ className, backdropClassName, keepMounted, width, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		return /* @__PURE__ */ jsxs(AlertDialog.Portal, {
+			keepMounted,
+			...portalProps,
+			children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+				"data-slot": "alert-dialog-backdrop",
+				className: cn(scrimClasses, backdropClassName)
+			}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
+				ref,
+				"data-slot": "alert-dialog-popup",
+				className: cn(alertDialogPopupVariants({ width }), className),
+				...popupProps,
+				children
+			})]
+		});
+	}),
+	Title: React.forwardRef(function AlertDialogTitle({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(AlertDialog.Title, {
+			ref,
+			"data-slot": "alert-dialog-title",
+			className: cn(overlayTitleClasses, className),
+			...elementProps
+		});
+	}),
+	Description: React.forwardRef(function AlertDialogDescription({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(AlertDialog.Description, {
+			ref,
+			"data-slot": "alert-dialog-description",
+			className: cn(overlayDescriptionClasses, className),
+			...elementProps
+		});
+	}),
+	Footer: React.forwardRef(function AlertDialogFooter({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "alert-dialog-footer",
+			className: cn(overlayFooterClasses, className),
+			...elementProps
+		});
+	}),
+	Cancel: React.forwardRef(function AlertDialogCancel({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(AlertDialog.Close, {
+			ref,
+			"data-slot": "alert-dialog-cancel",
+			className: cn(buttonVariants({ variant: "secondary" }), className),
+			...elementProps
+		});
+	}),
+	Action: React.forwardRef(function AlertDialogAction({ className, tone = "accent", ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(AlertDialog.Close, {
+			ref,
+			"data-slot": "alert-dialog-action",
+			className: cn(buttonVariants({ variant: tone === "danger" ? "danger" : "primary" }), className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { AlertDialog$1 as AlertDialog };

package/dist/overlays/command-palette.d.ts

@@ -0,0 +1,93 @@
+import * as React from "react";
+//#region src/overlays/command-palette.d.ts
+/** One runnable command. */
+interface CommandPaletteItem {
+  /** Stable identity, and what `onSelect` is keyed on. */
+  id: string;
+  /** What the user reads and what the query is matched against. */
+  label: string;
+  /**
+   * Caption this command is filed under. Commands keep their given order inside
+   * a group, and groups keep the order they first appear in `items`.
+   */
+  group?: string;
+  /**
+   * Extra words that should match this command without being shown — `"dmx"`
+   * finding "Patch fixture", `"theme"` finding "Switch appearance".
+   */
+  keywords?: readonly string[];
+  /** Trailing slot: a `Kbd` shortcut, a count, a destination breadcrumb. */
+  hint?: React.ReactNode;
+  /** Optional leading icon component, drawn `aria-hidden`. */
+  icon?: React.ElementType;
+  /** Grey the row out and skip it during keyboard navigation. */
+  disabled?: boolean;
+}
+interface CommandPaletteProps {
+  /** Every command the palette can run, in the order they should appear. */
+  items: readonly CommandPaletteItem[];
+  /** Called with the command the user ran. The palette closes itself afterwards. */
+  onSelect: (item: CommandPaletteItem) => void;
+  /** Open state when controlled. Pass with `onOpenChange`. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. Defaults to `false`. */
+  defaultOpen?: boolean;
+  /** Called whenever the palette wants to open or close. */
+  onOpenChange?: (open: boolean) => void;
+  /** Shown while the query is empty. Defaults to `"Type a command"`. */
+  placeholder?: string;
+  /** Shown in place of the list when nothing matches. Defaults to `"No commands match"`. */
+  emptyMessage?: React.ReactNode;
+  /** Accessible name for the dialog and the input. Defaults to `"Command palette"`. */
+  label?: string;
+  /** The hint strip along the foot. Pass `null` to drop it. */
+  footer?: React.ReactNode;
+  /**
+   * Quiet period in ms before the query is re-matched. Defaults to `200`.
+   *
+   * The field itself never waits — only the matching does — so typing stays at
+   * one frame per keystroke however long the command list is.
+   */
+  debounceMs?: number;
+  /**
+   * Replace the matcher. Defaults to a case-insensitive substring match over
+   * `label` and `keywords`. Return the surviving commands in display order.
+   */
+  filter?: (items: readonly CommandPaletteItem[], query: string) => CommandPaletteItem[];
+  /** Extra classes for the palette surface. */
+  className?: string;
+  /** Extra classes for the scrim behind it. */
+  backdropClassName?: string;
+}
+/**
+ * The ⌘K surface: type a few letters, run a command.
+ *
+ * A Base UI `Combobox` living inside a Base UI `Dialog`, which is what buys the
+ * two halves nobody hand-rolls correctly. The dialog gives a real focus trap,
+ * focus restoration and outside-press dismissal; the combobox gives
+ * `role="listbox"`, `aria-activedescendant` tracking the highlighted row, and
+ * arrow/Home/End/Enter navigation that a screen reader announces — the gap in
+ * every home-grown palette, snuffle's included, where the list is a `div` of
+ * buttons and the input never says which one Enter would run.
+ *
+ * Matching is debounced (see {@link CommandPaletteProps.debounceMs}) while the
+ * field is not, and the first surviving command is highlighted automatically, so
+ * "type three letters, press Enter" always does the obvious thing.
+ *
+ * The whole thing is portalled through the system's portal contract, so a
+ * palette opened from an ultra-compact island renders at that density.
+ *
+ * @example
+ * <CommandPalette
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   items={[
+ *     { id: "go", label: "Go", group: "Playback", hint: <Kbd>⏎</Kbd> },
+ *     { id: "patch", label: "Patch fixture", group: "Patch", keywords: ["dmx", "address"] },
+ *   ]}
+ *   onSelect={(command) => run(command.id)}
+ * />
+ */
+declare function CommandPalette({ items, onSelect, open: openProp, defaultOpen, onOpenChange, placeholder, emptyMessage, label, footer, debounceMs, filter, className, backdropClassName }: CommandPaletteProps): React.JSX.Element;
+//#endregion
+export { CommandPalette, CommandPaletteItem, CommandPaletteProps };

package/dist/overlays/command-palette.js

@@ -0,0 +1,193 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SearchGlyph } from "./_glyphs.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayModalTransitionClasses, overlaySurfaceClasses, scrimClasses } from "./_surface.js";
+import { useDebouncedValue } from "./_debounce.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/overlays/command-palette.tsx
+/** The default hint strip: what the three keys that matter do. */
+const DEFAULT_FOOTER = /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx("span", { children: "↑↓ navigate" }),
+	/* @__PURE__ */ jsx("span", { children: "⏎ run" }),
+	/* @__PURE__ */ jsx("span", { children: "esc close" })
+] });
+const DEFAULT_DEBOUNCE_MS = 200;
+/** Case-insensitive substring match over the label and the hidden keywords. */
+function defaultFilter(items, query) {
+	const needle = query.trim().toLowerCase();
+	if (needle === "") return [...items];
+	return items.filter((item) => item.label.toLowerCase().includes(needle) || (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(needle)));
+}
+/**
+* Bucket commands by `group`, preserving first-appearance order.
+*
+* Ungrouped commands collect under the empty key, which renders without a
+* caption — so a palette that has not been organised yet still looks deliberate
+* rather than sprouting an "Other" heading nobody asked for.
+*/
+function groupCommands(items) {
+	const groups = [];
+	const byName = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const name = item.group ?? "";
+		let group = byName.get(name);
+		if (group === void 0) {
+			group = {
+				value: name,
+				items: []
+			};
+			byName.set(name, group);
+			groups.push(group);
+		}
+		group.items.push(item);
+	}
+	return groups;
+}
+/** The row: same rhythm as a menu row, with a reserved gutter for the icon. */
+const commandItemClasses = "flex h-control-md cursor-default items-center gap-(--cue-space-3) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+/**
+* The ⌘K surface: type a few letters, run a command.
+*
+* A Base UI `Combobox` living inside a Base UI `Dialog`, which is what buys the
+* two halves nobody hand-rolls correctly. The dialog gives a real focus trap,
+* focus restoration and outside-press dismissal; the combobox gives
+* `role="listbox"`, `aria-activedescendant` tracking the highlighted row, and
+* arrow/Home/End/Enter navigation that a screen reader announces — the gap in
+* every home-grown palette, snuffle's included, where the list is a `div` of
+* buttons and the input never says which one Enter would run.
+*
+* Matching is debounced (see {@link CommandPaletteProps.debounceMs}) while the
+* field is not, and the first surviving command is highlighted automatically, so
+* "type three letters, press Enter" always does the obvious thing.
+*
+* The whole thing is portalled through the system's portal contract, so a
+* palette opened from an ultra-compact island renders at that density.
+*
+* @example
+* <CommandPalette
+*   open={open}
+*   onOpenChange={setOpen}
+*   items={[
+*     { id: "go", label: "Go", group: "Playback", hint: <Kbd>⏎</Kbd> },
+*     { id: "patch", label: "Patch fixture", group: "Patch", keywords: ["dmx", "address"] },
+*   ]}
+*   onSelect={(command) => run(command.id)}
+* />
+*/
+function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false, onOpenChange, placeholder = "Type a command", emptyMessage = "No commands match", label = "Command palette", footer = DEFAULT_FOOTER, debounceMs = DEFAULT_DEBOUNCE_MS, filter = defaultFilter, className, backdropClassName }) {
+	const portalProps = useCuePortalProps();
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+	const open = openProp ?? uncontrolledOpen;
+	const setOpen = React.useCallback((next) => {
+		if (openProp === void 0) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	}, [onOpenChange, openProp]);
+	const [query, setQuery] = React.useState("");
+	const settledQuery = useDebouncedValue(query, query === "" ? 0 : debounceMs);
+	React.useEffect(() => {
+		if (!open) setQuery("");
+	}, [open]);
+	const groups = React.useMemo(() => groupCommands(items), [items]);
+	const filteredGroups = React.useMemo(() => groupCommands(filter(items, settledQuery)), [
+		filter,
+		items,
+		settledQuery
+	]);
+	const handleValueChange = React.useCallback((next) => {
+		const item = next;
+		if (item === null || item === void 0) return;
+		onSelect(item);
+		setOpen(false);
+	}, [onSelect, setOpen]);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			...portalProps,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				"data-slot": "command-palette-backdrop",
+				className: cn(scrimClasses, backdropClassName)
+			}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+				"aria-label": label,
+				"data-slot": "command-palette-popup",
+				className: cn(overlaySurfaceClasses, overlayModalTransitionClasses, "fixed top-[14vh] left-1/2 z-50 flex max-h-[72vh] w-[min(35rem,92vw)] -translate-x-1/2 flex-col overflow-hidden outline-none", className),
+				children: [/* @__PURE__ */ jsxs(Combobox.Root, {
+					items: groups,
+					filteredItems: filteredGroups,
+					value: null,
+					onValueChange: handleValueChange,
+					inputValue: query,
+					onInputValueChange: setQuery,
+					open: true,
+					onOpenChange: (next) => {
+						if (!next) setOpen(false);
+					},
+					autoHighlight: true,
+					itemToStringLabel: (item) => item.label,
+					itemToStringValue: (item) => item.id,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							"data-slot": "command-palette-field",
+							className: "flex h-control-lg shrink-0 items-center gap-(--cue-space-3) border-b border-border bg-sunken px-(--cue-space-4)",
+							children: [/* @__PURE__ */ jsx(SearchGlyph, {
+								"aria-hidden": "true",
+								className: "size-icon-md shrink-0 text-fg-subtle"
+							}), /* @__PURE__ */ jsx(Combobox.Input, {
+								"aria-label": label,
+								placeholder,
+								"data-slot": "command-palette-input",
+								className: "h-full w-full min-w-0 border-0 bg-transparent p-0 font-mono text-(length:--cue-text-body) text-fg outline-none placeholder:text-fg-subtle"
+							})]
+						}),
+						/* @__PURE__ */ jsx(Combobox.Empty, {
+							"data-slot": "command-palette-empty",
+							className: "flex h-control-lg items-center px-(--cue-space-4) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none",
+							children: emptyMessage
+						}),
+						/* @__PURE__ */ jsx(Combobox.List, {
+							"data-slot": "command-palette-list",
+							className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-(--cue-space-1) outline-none",
+							children: (group) => /* @__PURE__ */ jsxs(Combobox.Group, {
+								items: group.items,
+								className: "block",
+								children: [group.value === "" ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+									className: "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase select-none",
+									children: group.value
+								}), /* @__PURE__ */ jsx(Combobox.Collection, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
+									value: item,
+									disabled: item.disabled,
+									"data-slot": "command-palette-item",
+									className: commandItemClasses,
+									children: [
+										item.icon === void 0 ? null : /* @__PURE__ */ jsx(item.icon, {
+											"aria-hidden": "true",
+											className: "size-icon-sm shrink-0"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "min-w-0 flex-1 truncate",
+											children: item.label
+										}),
+										item.hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
+											className: "shrink-0 text-fg-subtle",
+											children: item.hint
+										})
+									]
+								}, item.id) })]
+							}, group.value)
+						})
+					]
+				}), footer === null ? null : /* @__PURE__ */ jsx("div", {
+					"data-slot": "command-palette-footer",
+					className: "flex shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-micro) text-fg-subtle select-none",
+					children: footer
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { CommandPalette };

package/dist/overlays/context-menu.d.ts

@@ -0,0 +1,64 @@
+import { DropdownMenuCheckboxItemProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps } from "./dropdown-menu.js";
+import * as React from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/overlays/context-menu.d.ts
+interface ContextMenuRootProps extends ContextMenu.Root.Props {}
+/** Groups the parts of a context menu and owns its open state. Renders no element. */
+declare function ContextMenuRoot(props: ContextMenuRootProps): React.JSX.Element;
+interface ContextMenuTriggerProps extends ContextMenu.Trigger.Props {}
+interface ContextMenuContentProps extends Omit<ContextMenu.Popup.Props, "className"> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the positioner that places the popup. */
+  positionerClassName?: string;
+  /**
+   * Gap in px between the pointer and the popup. Defaults to `0`.
+   *
+   * Unlike an anchored menu, this one is placed at the cursor, and a cursor is
+   * already its own offset — the pointer tip should land on the first row.
+   */
+  sideOffset?: ContextMenu.Positioner.Props["sideOffset"];
+  /** Keep the popup mounted while closed. */
+  keepMounted?: boolean;
+}
+/**
+ * The menu a right click raises: row actions on a cue list, fixture actions on
+ * the patch grid, node actions on a canvas.
+ *
+ * Wraps Base UI's `ContextMenu`, whose row parts are literally the same
+ * components as the dropdown's — so the rows here *are*
+ * {@link DropdownMenu}'s rows, re-exported rather than restyled. That is the
+ * point: a user should never be able to tell from a row whether they got to it
+ * by clicking a button or by right-clicking a thing.
+ *
+ * A context menu is always a *shortcut*. Every command on it must also be
+ * reachable some other way — a toolbar, a dropdown, a keyboard shortcut —
+ * because right-click has no keyboard or touch equivalent worth relying on.
+ *
+ * @example
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger render={<PatchCell />} />
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Group>
+ *       <ContextMenu.Label>Fixture</ContextMenu.Label>
+ *       <ContextMenu.Item onClick={repatch}>Repatch</ContextMenu.Item>
+ *     </ContextMenu.Group>
+ *     <ContextMenu.Separator />
+ *     <ContextMenu.CheckboxItem checked={highlight} onCheckedChange={setHighlight}>
+ *       Highlight
+ *     </ContextMenu.CheckboxItem>
+ *   </ContextMenu.Content>
+ * </ContextMenu.Root>
+ */
+declare const ContextMenu$1: {
+  Root: typeof ContextMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<ContextMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Group: React.ForwardRefExoticComponent<Omit<DropdownMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Label: React.ForwardRefExoticComponent<Omit<DropdownMenuLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Item: React.ForwardRefExoticComponent<Omit<DropdownMenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuContentProps, ContextMenuRootProps, ContextMenuTriggerProps };