@cueplusplus/ui 0.3.0 → 0.5.0

package/dist/elements/checkpoint-history.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcwIcon } from "lucide-react";
+//#region src/elements/checkpoint-history.tsx
+/**
+* Points you can fall back to, with what each one would give back.
+*
+* @example
+* import { CheckpointHistory } from "@cueplusplus/ui/elements";
+*
+* <CheckpointHistory checkpoints={checkpoints} currentId="3" onRestore={restore} />
+*/
+function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...props }) {
+	const currentIndex = checkpoints.findIndex((checkpoint) => checkpoint.id === currentId);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "checkpoint-history",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "px-1.5 pb-1 text-(length:--cue-text-body) font-medium",
+			children: "Checkpoints"
+		}), checkpoints.map((checkpoint, i) => {
+			const ahead = currentIndex >= 0 && i > currentIndex;
+			const current = checkpoint.id === currentId;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("group flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-1.5 transition-colors", current ? "bg-surface-1" : "hover:bg-surface-1", ahead && "opacity-40"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("size-1.5 shrink-0 rounded-full", current ? "bg-stream" : ahead ? "border-border-strong border" : "bg-surface-3")
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-(length:--cue-text-body)",
+							children: checkpoint.label
+						}), /* @__PURE__ */ jsxs("span", {
+							className: cn(mono, "text-fg-subtle"),
+							children: [
+								checkpoint.at,
+								" · ",
+								checkpoint.files,
+								" files"
+							]
+						})]
+					}),
+					current ? /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle shrink-0"),
+						children: "current"
+					}) : /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": `Restore to ${checkpoint.label}`,
+						onClick: () => onRestore?.(checkpoint.id),
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-6 shrink-0 items-center gap-1 rounded-full px-2 text-(length:--cue-text-label) font-medium opacity-0 transition-[background-color,color,opacity,scale] duration-150 group-hover:opacity-100 focus-visible:opacity-100 active:scale-[0.96]",
+						children: [/* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-2.5" }), "Restore"]
+					})
+				]
+			}, checkpoint.id);
+		})]
+	});
+}
+//#endregion
+export { CheckpointHistory };

package/dist/elements/clamp.d.ts

@@ -0,0 +1,90 @@
+import { ClampLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/clamp.d.ts
+interface ClampProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onToggle"> {
+  /**
+   * How tall the content may be before it is cut, as a number of pixels or any
+   * CSS length. Defaults to `250` — the reference's own default, with `60` the
+   * value it uses for a quoted user message.
+   *
+   * Published as `--cue-elements-clamp-height` on the root, so a console can
+   * retune one clamp from a stylesheet without a prop.
+   */
+  height?: number | string;
+  /**
+   * How deep the dissolve at the cut is, in pixels. Defaults to `50`, the
+   * reference's most-used depth.
+   *
+   * Fixed pixels rather than a fraction, deliberately: a percentage fade is a
+   * different effect on a short row than on a long one. Published as
+   * `--cue-elements-clamp-fade`.
+   */
+  fade?: number;
+  /** Whether the content is showing in full. */
+  open: boolean;
+  /**
+   * Called when the reveal is used. Omit it and the clamp is a hard cut with a
+   * fade and no promise of more — which is the reference's own tool-result row,
+   * where the full text opens somewhere else entirely.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Whether the content is taller than `height`, when the caller already knows.
+   * Left out, the clamp measures itself and re-measures as the content and the
+   * box change.
+   *
+   * The measurement is the right default and the override is for the cases it
+   * cannot serve: a virtualised row that knows its own text, a replay frame
+   * that must paint the same way on every mount, a server render.
+   */
+  overflows?: boolean;
+  /**
+   * The two words on the reveal. Defaults to {@link CLAMP_LABELS} — `Show more`
+   * and `Show less`, which is the reference's copy verbatim.
+   */
+  labels?: Partial<ClampLabels>;
+  /** The content being clamped. */
+  children?: React.ReactNode;
+}
+/**
+ * Long content, cut to a height, dissolving at the cut, with a way back.
+ *
+ * The truncation trio as one element. Everything a transcript truncates —
+ * command output, a pasted file, a reasoning trace, a quoted message — wants
+ * exactly these three things, and a family that leaves them to each component
+ * gets five slightly different cuts and one of them hard-coded to a colour that
+ * breaks in light mode.
+ *
+ * The fade is a **mask**, not an overlay: it fades the content rather than
+ * painting a gradient of the surface colour over it, so it needs no idea of
+ * what is behind it and cannot drift when the theme changes. The height and the
+ * depth are published as custom properties on the root, so a console can retune
+ * a clamp from CSS — and because the mask is expressed in terms of them, a
+ * height overridden in a stylesheet moves the fade with it.
+ *
+ * The reveal is the part this element does not copy exactly. The reference
+ * shows its `Show more` chip on hover only, which is unreachable for anyone
+ * who is not holding a mouse; here the control is always in the DOM and always
+ * focusable, and hover and focus only decide how loudly it is drawn. Once the
+ * content is open, `Show less` is drawn at full strength — a long expansion you
+ * cannot close without hunting for the control is a real defect.
+ *
+ * Open state is a prop, like everything else in this family: a scripted replay
+ * of this component is a caller changing `open`.
+ *
+ * @example
+ * import { Clamp } from "@cueplusplus/ui/elements";
+ *
+ * <Clamp open={open} onOpenChange={setOpen}>
+ *   <pre>{output}</pre>
+ * </Clamp>
+ * @example
+ * // The reference's tool-result row: 60px of output, a 10px dissolve, and no
+ * // reveal at all — the full text opens in an editor tab instead.
+ * <Clamp height={60} fade={10} open={false} overflows onClick={openInEditor}>
+ *   {result}
+ * </Clamp>
+ */
+declare const Clamp: React.ForwardRefExoticComponent<ClampProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Clamp, ClampProps };

package/dist/elements/clamp.js

@@ -0,0 +1,109 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { CLAMP_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/clamp.tsx
+/** A height as CSS: a bare number is pixels, a string is whatever it says. */
+const asLength = (value) => typeof value === "number" ? `${value}px` : value;
+/**
+* Long content, cut to a height, dissolving at the cut, with a way back.
+*
+* The truncation trio as one element. Everything a transcript truncates —
+* command output, a pasted file, a reasoning trace, a quoted message — wants
+* exactly these three things, and a family that leaves them to each component
+* gets five slightly different cuts and one of them hard-coded to a colour that
+* breaks in light mode.
+*
+* The fade is a **mask**, not an overlay: it fades the content rather than
+* painting a gradient of the surface colour over it, so it needs no idea of
+* what is behind it and cannot drift when the theme changes. The height and the
+* depth are published as custom properties on the root, so a console can retune
+* a clamp from CSS — and because the mask is expressed in terms of them, a
+* height overridden in a stylesheet moves the fade with it.
+*
+* The reveal is the part this element does not copy exactly. The reference
+* shows its `Show more` chip on hover only, which is unreachable for anyone
+* who is not holding a mouse; here the control is always in the DOM and always
+* focusable, and hover and focus only decide how loudly it is drawn. Once the
+* content is open, `Show less` is drawn at full strength — a long expansion you
+* cannot close without hunting for the control is a real defect.
+*
+* Open state is a prop, like everything else in this family: a scripted replay
+* of this component is a caller changing `open`.
+*
+* @example
+* import { Clamp } from "@cueplusplus/ui/elements";
+*
+* <Clamp open={open} onOpenChange={setOpen}>
+*   <pre>{output}</pre>
+* </Clamp>
+* @example
+* // The reference's tool-result row: 60px of output, a 10px dissolve, and no
+* // reveal at all — the full text opens in an editor tab instead.
+* <Clamp height={60} fade={10} open={false} overflows onClick={openInEditor}>
+*   {result}
+* </Clamp>
+*/
+const Clamp = React.forwardRef(function Clamp({ height = 250, fade = 50, open, onOpenChange, overflows, labels, children, className, style, ...elementProps }, ref) {
+	const [measured, setMeasured] = React.useState(false);
+	const box = React.useRef(null);
+	const inner = React.useRef(null);
+	const said = {
+		...CLAMP_LABELS,
+		...labels
+	};
+	useIsomorphicLayoutEffect(() => {
+		if (overflows !== void 0 || open) return;
+		const element = box.current;
+		const content = inner.current;
+		if (element === null || content === null) return;
+		const read = () => setMeasured(element.scrollHeight > element.clientHeight + 1);
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [
+		height,
+		open,
+		overflows
+	]);
+	const over = overflows ?? measured;
+	const clamped = !open && over;
+	const revealable = onOpenChange !== void 0 && (open || over);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "clamp",
+		"data-open": String(open),
+		"data-clamped": String(clamped),
+		className: cn("group/clamp relative flex w-full min-w-0 flex-col", className),
+		style: {
+			"--cue-elements-clamp-height": asLength(height),
+			"--cue-elements-clamp-fade": `${fade}px`,
+			"--cue-elements-clamp-mask": "linear-gradient(to bottom, black calc(var(--cue-elements-clamp-height) - var(--cue-elements-clamp-fade)), transparent var(--cue-elements-clamp-height))",
+			...style
+		},
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: box,
+			"data-slot": "clamp-content",
+			className: cn("min-w-0", !open && "overflow-hidden [max-height:var(--cue-elements-clamp-height)]", clamped && "[mask-image:var(--cue-elements-clamp-mask)] [-webkit-mask-image:var(--cue-elements-clamp-mask)]"),
+			children: /* @__PURE__ */ jsx("div", {
+				ref: inner,
+				className: "min-w-0",
+				children
+			})
+		}), revealable ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "clamp-reveal",
+			"aria-expanded": open,
+			onClick: () => onOpenChange?.(!open),
+			className: cn("text-fg-muted hover:text-fg self-start rounded-(--radius-control) py-0.5 text-(length:--cue-text-ui) transition-opacity focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none", !open && "opacity-60 group-hover/clamp:opacity-100 focus-visible:opacity-100"),
+			children: open ? said.less : said.more
+		}) : null]
+	});
+});
+//#endregion
+export { Clamp };

package/dist/elements/code-diff.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps } from "react";
+//#region src/elements/code-diff.d.ts
+/** What a diff row is — unchanged context, an addition, or a deletion. */
+type DiffKind = "context" | "added" | "removed";
+/** One row of a diff: its kind, which decides its gutter mark and its ink, and its text. */
+interface DiffLine {
+  /** Whether the row is context, an addition or a deletion. */
+  kind: DiffKind;
+  /** The line itself, rendered with its own whitespace kept. */
+  text: string;
+}
+/**
+ * A unified diff with tinted additions and removals, sized for chat.
+ *
+ * @example
+ * import { CodeDiff } from "@cueplusplus/ui/elements";
+ *
+ * <CodeDiff
+ *   filename="thread.tsx"
+ *   additions={2}
+ *   deletions={1}
+ *   lines={[
+ *     { kind: "removed", text: "const x = 1" },
+ *     { kind: "added", text: "const x = 2" },
+ *   ]}
+ *   cycle={0}
+ * />
+ */
+declare function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }: Omit<ComponentProps<"div">, "children" | "filename" | "additions" | "deletions" | "lines" | "cycle"> & {
+  /** File path shown in the diff header. */
+  filename: string;
+  /** Addition count rendered in green next to the filename. */
+  additions: number;
+  /** Deletion count rendered in red next to the filename. */
+  deletions: number;
+  /** Unified diff lines with context, added, or removed kind. */
+  lines: readonly DiffLine[];
+  /** Identity key that remounts the body so entrance animation can replay. */
+  cycle: number;
+}): import("react").JSX.Element;
+//#endregion
+export { CodeDiff, DiffKind, DiffLine };

package/dist/elements/code-diff.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { codeScroll, codeSurface, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/code-diff.tsx
+const GUTTER = {
+	context: "",
+	added: "+",
+	removed: "−"
+};
+/**
+* A unified diff with tinted additions and removals, sized for chat.
+*
+* @example
+* import { CodeDiff } from "@cueplusplus/ui/elements";
+*
+* <CodeDiff
+*   filename="thread.tsx"
+*   additions={2}
+*   deletions={1}
+*   lines={[
+*     { kind: "removed", text: "const x = 1" },
+*     { kind: "added", text: "const x = 2" },
+*   ]}
+*   cycle={0}
+* />
+*/
+function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-diff",
+		className: cn(paper, "w-full max-w-md overflow-hidden rounded-(--radius-overlay) font-mono text-(length:--cue-text-ui)", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-4 pt-3 pb-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg",
+				children: filename
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "tabular-nums"),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-ok",
+						children: ["+", additions]
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-danger",
+						children: ["−", deletions]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: codeScroll,
+			children: /* @__PURE__ */ jsx("div", {
+				className: codeSurface,
+				children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
+					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex px-4 py-0.5 leading-relaxed whitespace-pre duration-300", line.kind === "context" && "text-fg-muted", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
+					style: { animationDelay: `${i * 60}ms` },
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "w-4 shrink-0 select-none",
+						children: GUTTER[line.kind]
+					}), /* @__PURE__ */ jsx("span", { children: line.text })]
+				}, `${cycle}-${i}-${line.text}`))
+			})
+		})]
+	});
+}
+//#endregion
+export { CodeDiff };

package/dist/elements/code-runner.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps } from "react";
+//#region src/elements/code-runner.d.ts
+/**
+ * Where the snippet is: `idle` before anybody asks, `running`, then `ok` or `error`.
+ * The last two both show output — a failure is a result, not an absence.
+ */
+type RunState = "idle" | "running" | "ok" | "error";
+/**
+ * A snippet with a run button, and the output it produced attached below it.
+ *
+ * @example
+ * import { CodeRunner } from "@cueplusplus/ui/elements";
+ *
+ * <CodeRunner
+ *   language="typescript"
+ *   code={code}
+ *   state="ok"
+ *   output={["1"]}
+ *   durationMs={38}
+ *   onRun={run}
+ * />
+ */
+declare function CodeRunner({ language, code, state, output, durationMs, onRun, className, ...props }: Omit<ComponentProps<"div">, "children" | "language" | "code" | "state" | "output" | "durationMs" | "onRun"> & {
+  /** Language label above the snippet. */
+  language: string;
+  /** The snippet. Rendered as plain mono; wrap it yourself for highlighting. */
+  code: string;
+  /** idle hides the output pane entirely; error tints the output red. */
+  state: RunState;
+  /** Output lines, revealed in sequence. */
+  output: readonly string[];
+  /** How long the run took, printed once it settles. */
+  durationMs?: number;
+  /** Called when the run control is pressed. */
+  onRun?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { CodeRunner, RunState };

package/dist/elements/code-runner.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2Icon, PlayIcon } from "lucide-react";
+//#region src/elements/code-runner.tsx
+/**
+* A snippet with a run button, and the output it produced attached below it.
+*
+* @example
+* import { CodeRunner } from "@cueplusplus/ui/elements";
+*
+* <CodeRunner
+*   language="typescript"
+*   code={code}
+*   state="ok"
+*   output={["1"]}
+*   durationMs={38}
+*   onRun={run}
+* />
+*/
+function CodeRunner({ language, code, state, output, durationMs, onRun, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-runner",
+		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-3.5 py-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle min-w-0 flex-1"),
+						children: language
+					}),
+					durationMs !== void 0 && state !== "running" && /* @__PURE__ */ jsxs("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
+						children: [durationMs, "ms"]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Run this snippet",
+						onClick: onRun,
+						disabled: state === "running",
+						className: cn(ghostButton, "size-7 shrink-0 disabled:pointer-events-none"),
+						children: state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(PlayIcon, { className: "size-3.5 translate-x-px" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "border-border overflow-x-auto border-t px-3.5 py-2.5 font-mono text-(length:--cue-text-ui) leading-relaxed",
+				children: /* @__PURE__ */ jsx("code", {
+					className: "text-fg-muted",
+					children: code
+				})
+			}),
+			state !== "idle" && /* @__PURE__ */ jsxs("div", {
+				className: "border-border cue-elements-fade-in cue-elements-animate-in flex flex-col border-t px-3.5 py-2.5 duration-300",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle pb-1"),
+						children: "output"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("w-max min-w-full", "flex flex-col"),
+							children: output.map((line, i) => /* @__PURE__ */ jsx("span", {
+								className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both font-mono text-(length:--cue-text-ui) leading-relaxed whitespace-pre", state === "error" ? "text-danger" : "text-fg-muted"),
+								style: { animationDelay: `${i * 80}ms` },
+								children: line
+							}, `${i}-${line}`))
+						})
+					}),
+					state === "running" && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "bg-surface-3 h-[1em] w-[2px] animate-pulse rounded-full motion-reduce:animate-none"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { CodeRunner };

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

@@ -0,0 +1,48 @@
+import { ComponentProps } from "react";
+//#region src/elements/command-palette.d.ts
+interface PaletteCommand {
+  /** Stable identity, compared against activeId and reported by onRun. */
+  id: string;
+  /** Command text, and the field the query filters on. */
+  label: string;
+  /** Heading the command sits under. */
+  group: string;
+  /** Shortcut, one chip per key. */
+  keys: readonly string[];
+}
+/**
+ * Everything the app can do, one keystroke away and grouped by where it acts.
+ *
+ * @example
+ * import { CommandPalette } from "@cueplusplus/ui/elements";
+ *
+ * <CommandPalette
+ *   commands={commands}
+ *   query={query}
+ *   activeId={activeId}
+ *   onQueryChange={setQuery}
+ *   onRun={run}
+ * />
+ */
+declare function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onActiveChange, onRun, className, ...props }: Omit<ComponentProps<"div">, "children" | "commands" | "query" | "activeId" | "onQueryChange" | "onActiveChange" | "onRun"> & {
+  /** Everything runnable. Groups are derived from the entries and keep first-seen order. */
+  commands: readonly PaletteCommand[];
+  /** Current filter text. */
+  query: string;
+  /**
+   * Which row is highlighted. Arrow keys move it and Enter runs it, both handled by
+   * the element; it reports the move through onActiveChange.
+   */
+  activeId: string;
+  /** Called as the filter is typed. */
+  onQueryChange?: (query: string) => void;
+  /**
+   * Called as the arrow keys walk the list. The element owns the key handling and
+   * reports where it landed, so activeId stays yours to hold.
+   */
+  onActiveChange?: (id: string) => void;
+  /** Called when a command is chosen. */
+  onRun?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ElementsCommandPalette, PaletteCommand };

package/dist/elements/command-palette.js

@@ -0,0 +1,129 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, floating, mono } from "./surfaces.js";
+import { useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+//#region src/elements/command-palette.tsx
+/**
+* Everything the app can do, one keystroke away and grouped by where it acts.
+*
+* @example
+* import { CommandPalette } from "@cueplusplus/ui/elements";
+*
+* <CommandPalette
+*   commands={commands}
+*   query={query}
+*   activeId={activeId}
+*   onQueryChange={setQuery}
+*   onRun={run}
+* />
+*/
+function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onActiveChange, onRun, className, ...props }) {
+	const listId = useId();
+	const optionId = (id) => `${listId}-${id}`;
+	const matches = commands.filter((command) => command.label.toLowerCase().includes(query.toLowerCase()));
+	const groups = [...new Set(matches.map((command) => command.group))];
+	const ordered = groups.flatMap((group) => matches.filter((command) => command.group === group));
+	const move = (delta) => {
+		if (ordered.length === 0) return;
+		const at = ordered.findIndex((command) => command.id === activeId);
+		const next = ordered[((at === -1 ? delta > 0 ? -1 : 0 : at) + delta + ordered.length) % ordered.length];
+		if (next) onActiveChange?.(next.id);
+	};
+	useEffect(() => {
+		document.getElementById(optionId(activeId))?.scrollIntoView({ block: "nearest" });
+	}, [activeId, listId]);
+	const onKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			move(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			move(-1);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			const active = ordered.find((command) => command.id === activeId);
+			if (active) onRun?.(active.id);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-palette",
+		className: cn(floating, "flex w-full max-w-sm flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5 px-3.5 py-3",
+				children: [
+					/* @__PURE__ */ jsx(SearchIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+					/* @__PURE__ */ jsx("input", {
+						value: query,
+						onChange: (event) => onQueryChange?.(event.target.value),
+						onKeyDown,
+						placeholder: "Type a command",
+						"aria-label": "Type a command",
+						role: "combobox",
+						"aria-expanded": ordered.length > 0,
+						"aria-controls": listId,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": ordered.some((command) => command.id === activeId) ? optionId(activeId) : void 0,
+						className: "text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-body) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+						children: "esc"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "Commands",
+				className: "border-border flex max-h-72 flex-col overflow-y-auto border-t p-1.5",
+				children: groups.map((group) => /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-label": group,
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn(mono, "text-fg-subtle px-2 pt-2 pb-1"),
+						children: group
+					}), matches.filter((command) => command.group === group).map((command) => /* @__PURE__ */ jsxs("button", {
+						id: optionId(command.id),
+						type: "button",
+						role: "option",
+						tabIndex: -1,
+						"aria-selected": command.id === activeId,
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => onRun?.(command.id),
+						className: cn("flex items-center gap-2 rounded-(--radius-surface) px-2 py-1.5 text-start transition-colors", command.id === activeId ? "bg-surface-2" : "hover:bg-surface-1"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: command.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0 gap-1",
+							children: command.keys.map((key) => /* @__PURE__ */ jsx("span", {
+								className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+								children: key
+							}, key))
+						})]
+					}, command.id))]
+				}, group))
+			}),
+			matches.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "border-border border-t p-1.5",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "text-fg-subtle block px-2 py-4 text-center text-(length:--cue-text-ui) break-words",
+					children: [
+						"No command matches “",
+						query,
+						"”"
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ElementsCommandPalette };