@cueplusplus/ui 0.2.0 → 0.5.0

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 };

package/dist/elements/compaction-row.d.ts

@@ -0,0 +1,63 @@
+import { CompactionState } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/compaction-row.d.ts
+interface CompactionRowProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** Where the compaction got to. See `COMPACTION_STATES`. */
+  state: CompactionState;
+  /** Tokens in the window before it ran. */
+  tokensBefore?: number;
+  /** Tokens after. Omit while it is running, or when it did not finish. */
+  tokensAfter?: number;
+  /** Messages in the window before it ran. */
+  messagesBefore?: number;
+  /** Messages after. Omit while it is running, or when it did not finish. */
+  messagesAfter?: number;
+  /**
+   * What the rule says, replacing the one `COMPACTION_LABELS` supplies for this
+   * state.
+   */
+  label?: string;
+  /**
+   * Why, for the two states that owe an answer: `context window still under
+   * 60%`, `the summariser refused`. Roo's rule — a compaction that did not
+   * happen, or that lost something, should say so in words rather than leave a
+   * reader to infer it from a number that did not move.
+   */
+  reason?: string;
+}
+/**
+ * The rule that says the conversation was compacted, and by how much.
+ *
+ * A `role="separator"` like {@link TimeBoundary}, because that is what it is:
+ * the transcript above it is not the transcript below it any more. What makes
+ * it worth a component rather than a line of prose is the pair of numbers —
+ * before and after, on both axes — since "compacted" alone tells a reader
+ * nothing they can act on, while `128k → 24k tokens · 214 → 31 messages` tells
+ * them why the model stopped remembering the thing they mentioned an hour ago.
+ *
+ * Five states, which is two more than most implementations have and exactly the
+ * two that matter: a compaction that **failed** leaves the window full, and one
+ * that was **skipped** leaves it full on purpose. Both are the states a reader
+ * meets when something is about to go wrong, and both are the states a UI that
+ * only draws the happy path renders as nothing at all.
+ *
+ * The numbers render as far as they are known. While `started`, pass the before
+ * figures and no after ones and the row reads `128k tokens · 214 messages`; the
+ * arrows arrive with the answer.
+ *
+ * @example
+ * import { CompactionRow } from "@cueplusplus/ui/elements";
+ *
+ * <CompactionRow
+ *   state="completed"
+ *   tokensBefore={128_000}
+ *   tokensAfter={24_000}
+ *   messagesBefore={214}
+ *   messagesAfter={31}
+ * />
+ * @example
+ * <CompactionRow state="skipped" reason="context window still under 60%" />
+ */
+declare const CompactionRow: React.ForwardRefExoticComponent<CompactionRowProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CompactionRow, CompactionRowProps };

package/dist/elements/compaction-row.js

@@ -0,0 +1,110 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono } from "./surfaces.js";
+import { COMPACTION_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon, FoldVerticalIcon, Loader2Icon, MinusIcon, XIcon } from "lucide-react";
+//#region src/elements/compaction-row.tsx
+/**
+* A count as a compaction rule says it: `214`, `1.5k`, `128k`.
+*
+* Thousands from four figures up, one decimal below ten thousand and none above
+* it — `128000` is `128k` and `1500` is `1.5k`, because the first number is
+* about a budget and the second is about a change. Anything that is not a
+* finite, positive number is `0`.
+*/
+function formatCount(value) {
+	if (!Number.isFinite(value) || value <= 0) return "0";
+	if (value < 1e3) return String(Math.round(value));
+	const thousands = value / 1e3;
+	return thousands < 10 ? `${Math.round(thousands * 10) / 10}k` : `${Math.round(thousands)}k`;
+}
+/** `128k → 24k tokens`, or `128k tokens` when there is no after yet. */
+function figures(before, after, unit) {
+	if (before === void 0) return null;
+	if (after === void 0) return `${formatCount(before)} ${unit}`;
+	return `${formatCount(before)} → ${formatCount(after)} ${unit}`;
+}
+/**
+* The rule that says the conversation was compacted, and by how much.
+*
+* A `role="separator"` like {@link TimeBoundary}, because that is what it is:
+* the transcript above it is not the transcript below it any more. What makes
+* it worth a component rather than a line of prose is the pair of numbers —
+* before and after, on both axes — since "compacted" alone tells a reader
+* nothing they can act on, while `128k → 24k tokens · 214 → 31 messages` tells
+* them why the model stopped remembering the thing they mentioned an hour ago.
+*
+* Five states, which is two more than most implementations have and exactly the
+* two that matter: a compaction that **failed** leaves the window full, and one
+* that was **skipped** leaves it full on purpose. Both are the states a reader
+* meets when something is about to go wrong, and both are the states a UI that
+* only draws the happy path renders as nothing at all.
+*
+* The numbers render as far as they are known. While `started`, pass the before
+* figures and no after ones and the row reads `128k tokens · 214 messages`; the
+* arrows arrive with the answer.
+*
+* @example
+* import { CompactionRow } from "@cueplusplus/ui/elements";
+*
+* <CompactionRow
+*   state="completed"
+*   tokensBefore={128_000}
+*   tokensAfter={24_000}
+*   messagesBefore={214}
+*   messagesAfter={31}
+* />
+* @example
+* <CompactionRow state="skipped" reason="context window still under 60%" />
+*/
+const CompactionRow = React.forwardRef(function CompactionRow({ state, tokensBefore, tokensAfter, messagesBefore, messagesAfter, label, reason, className, ...elementProps }, ref) {
+	const said = label ?? COMPACTION_LABELS[state];
+	const counts = [figures(tokensBefore, tokensAfter, "tokens"), figures(messagesBefore, messagesAfter, "messages")].filter((part) => part !== null);
+	const spoken = [
+		said,
+		...counts,
+		reason
+	].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "separator",
+		"aria-label": spoken,
+		"data-slot": "compaction-row",
+		"data-state": state,
+		className: cn("flex w-full items-center gap-2.5 py-1", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-border h-px flex-1"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": true,
+				className: "flex min-w-0 shrink items-center gap-2",
+				children: [
+					state === "started" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 shrink-0 animate-spin text-stream motion-reduce:animate-none" }) : state === "failed" ? /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-3 shrink-0 text-danger" }) : state === "cancelled" ? /* @__PURE__ */ jsx(XIcon, { className: "text-fg-subtle size-3 shrink-0" }) : state === "skipped" ? /* @__PURE__ */ jsx(MinusIcon, { className: "text-fg-subtle size-3 shrink-0" }) : /* @__PURE__ */ jsx(FoldVerticalIcon, { className: "text-fg-subtle size-3 shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "shrink-0", state === "failed" ? "text-danger" : "text-fg-subtle"),
+						children: said
+					}),
+					counts.length === 0 ? null : /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle min-w-0 truncate tabular-nums"),
+						children: counts.join(" · ")
+					}),
+					reason === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-fg-subtle min-w-0 truncate"),
+						children: reason
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-border h-px flex-1"
+			})
+		]
+	});
+});
+//#endregion
+export { CompactionRow };

package/dist/elements/comparison-card.d.ts

@@ -0,0 +1,47 @@
+import { ComponentProps } from "react";
+//#region src/elements/comparison-card.d.ts
+/** One of the options being weighed, and how it answers each trait. */
+interface ComparisonOption {
+  /** Stable identity, compared against recommendedId. */
+  id: string;
+  /** Option name. */
+  name: string;
+  /** One-line summary under the name. */
+  headline: string;
+  /**
+   * Positional against traitLabels. A string is what the option does; false means it
+   * lacks the trait and shows the label struck back.
+   */
+  traits: readonly (string | false)[];
+}
+/**
+ * Two options weighed side by side, with the pick named and argued.
+ *
+ * @example
+ * import { ComparisonCard } from "@cueplusplus/ui/elements";
+ *
+ * <ComparisonCard
+ *   traitLabels={traits}
+ *   options={options}
+ *   recommendedId="local"
+ *   reason="You already hold messages in your own store."
+ * />
+ */
+declare function ComparisonCard({ traitLabels, options, recommendedId, reason, className, ...props }: Omit<ComponentProps<"div">, "children" | "traitLabels" | "options" | "recommendedId" | "reason"> & {
+  /**
+   * The dimensions compared, in order. Used as the fallback label when an option lacks
+   * a trait.
+   */
+  traitLabels: readonly string[];
+  /** Two or three options. More than that wants a table, not a comparison. */
+  options: readonly ComparisonOption[];
+  /** Which option is the pick. It is tinted and labelled rather than merely ordered first. */
+  recommendedId: string;
+  /**
+   * Why that one, in the user's terms. A comparison without a recommendation is an
+   * unanswered question.
+   */
+  reason: string;
+}): import("react").JSX.Element;
+//#endregion
+export { ComparisonCard, ComparisonOption };

package/dist/elements/comparison-card.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "lucide-react";
+//#region src/elements/comparison-card.tsx
+/**
+* Two options weighed side by side, with the pick named and argued.
+*
+* @example
+* import { ComparisonCard } from "@cueplusplus/ui/elements";
+*
+* <ComparisonCard
+*   traitLabels={traits}
+*   options={options}
+*   recommendedId="local"
+*   reason="You already hold messages in your own store."
+* />
+*/
+function ComparisonCard({ traitLabels, options, recommendedId, reason, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "comparison-card",
+		className: cn(paper, "flex w-full max-w-md flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex gap-2",
+			children: options.map((option) => {
+				const recommended = option.id === recommendedId;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn("flex min-w-0 flex-1 flex-col gap-2 rounded-(--radius-surface) p-3 transition-colors", recommended ? "bg-stream/10" : field),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-0.5",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex items-baseline gap-1.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate text-(length:--cue-text-body) font-medium",
+								children: option.name
+							}), recommended && /* @__PURE__ */ jsx("span", {
+								className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "shrink-0 text-stream"),
+								children: "pick"
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted truncate text-(length:--cue-text-ui)",
+							children: option.headline
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-1",
+						children: traitLabels.map((label, i) => {
+							const trait = option.traits[i];
+							const absent = !trait;
+							return /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5 text-(length:--cue-text-ui)",
+								children: [absent ? /* @__PURE__ */ jsx(MinusIcon, { className: "text-fg-subtle size-3 shrink-0" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 shrink-0 text-ok" }), /* @__PURE__ */ jsx("span", {
+									className: cn("min-w-0 truncate", absent ? "text-fg-subtle" : "text-fg-muted"),
+									children: absent ? label : trait
+								})]
+							}, `${i}-${label}`);
+						})
+					})]
+				}, option.id);
+			})
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed",
+			children: reason
+		})]
+	});
+}
+//#endregion
+export { ComparisonCard };