@cueplusplus/ui 0.13.0

package/dist/elements/markdown.js

@@ -0,0 +1,528 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { codeScroll, codeSurface, field, mono } from "./surfaces.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import Markdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+//#region src/elements/markdown.tsx
+/**
+* Every element this surface will ever render, written out rather than
+* inherited.
+*
+* `hast-util-sanitize` ships a `defaultSchema` and every markdown renderer in
+* the ecosystem spreads it. This one does not, on purpose: a spread schema
+* means the set of tags cue vouches for is whatever a transitive dependency
+* decided this week, and "what does this component render" stops being a
+* question the source can answer. The list below *is* the documented subset —
+* `MarkdownText`'s JSDoc quotes it, and a test asserts nothing outside it
+* survives.
+*
+* Deliberately absent, and each for a reason: `input` (GFM task lists would
+* put a control inside a transcript), `table` and friends (no GFM plugin is
+* enabled, so the parser never produces them), `svg`/`math` (an untrusted
+* vector is a script host in several browsers' history), `details`/`summary`
+* (disclosure is a component, not a token stream), and every sectioning or
+* embedding tag — `iframe`, `object`, `embed`, `script`, `style`, `form`.
+*/
+const ALLOWED_TAGS = [
+	"a",
+	"blockquote",
+	"br",
+	"code",
+	"del",
+	"em",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"hr",
+	"img",
+	"li",
+	"ol",
+	"p",
+	"pre",
+	"strong",
+	"ul"
+];
+/**
+* The protocols a URL attribute may carry, on both `href` and `src`.
+*
+* Three, and no more. `javascript:` and `vbscript:` are the classic markdown
+* injection; `data:` is the modern one — a `data:text/html` document inherits
+* the embedding origin in enough places to be worth refusing outright rather
+* than allow-listing image media types; `blob:` and `file:` reach the host's
+* own storage. React's default markdown pipeline also permits `irc:`, `ircs:`
+* and `xmpp:`, which hand an arbitrary string to an OS protocol handler. None
+* of the three has ever been what an agent transcript needed.
+*/
+const ALLOWED_PROTOCOLS = [
+	"http",
+	"https",
+	"mailto"
+];
+/**
+* The allow-list, as `rehype-sanitize` wants it.
+*
+* Attributes are enumerated per tag rather than globally: an element that is
+* not listed here gets *no* attributes at all, which is what makes an event
+* handler unreachable by construction instead of by deny-list. `code` may
+* carry a `className`, and only one matching `language-…`, because that is how
+* a fenced block's info string reaches {@link MarkdownTextProps.renderCodeBlock}.
+*/
+const SCHEMA = {
+	tagNames: [...ALLOWED_TAGS],
+	attributes: {
+		a: ["href", "title"],
+		img: [
+			"src",
+			"alt",
+			"title"
+		],
+		code: [["className", /^language-[\w+#.-]+$/]],
+		ol: ["start"],
+		"*": []
+	},
+	protocols: {
+		href: [...ALLOWED_PROTOCOLS],
+		src: [...ALLOWED_PROTOCOLS]
+	},
+	clobber: [
+		"ariaDescribedBy",
+		"ariaLabelledBy",
+		"id",
+		"name"
+	],
+	clobberPrefix: "cue-md-",
+	allowComments: false,
+	allowDoctypes: false,
+	strip: [
+		"script",
+		"style",
+		"iframe",
+		"object",
+		"embed",
+		"form"
+	]
+};
+/**
+* The URL gate, applied after the schema has already checked the protocol.
+*
+* Two passes over the same value rather than one, because they fail
+* differently: the schema drops the whole attribute when a protocol is not on
+* the list, while this runs on what is left and answers with a value rather
+* than a decision, so a relative href (`./run/42`) survives and a scheme-less
+* `//evil.example` does not.
+*/
+function safeUrl(value) {
+	const url = value.trim();
+	if (url.startsWith("//")) return "";
+	const colon = url.indexOf(":");
+	const slash = url.indexOf("/");
+	const question = url.indexOf("?");
+	const hash = url.indexOf("#");
+	if (colon === -1 || slash !== -1 && colon > slash || question !== -1 && colon > question || hash !== -1 && colon > hash) return url;
+	return ALLOWED_PROTOCOLS.includes(url.slice(0, colon).toLowerCase()) ? url : "";
+}
+/** A fence line: three or more backticks or tildes, indented at most three. */
+const FENCE = /^ {0,3}(`{3,}|~{3,})/;
+/** Whether a character can sit next to a delimiter run without closing a word. */
+function isBoundary(char) {
+	return char === "" || /[\s!-/:-@[-`{-~]/.test(char);
+}
+/**
+* Where the last block of `source` begins: after the final blank line that is
+* not inside a fence.
+*
+* Sealing is confined to that block. Everything above it has already been
+* followed by a blank line, which means the parser has settled it and nothing
+* a later token brings can change how it renders.
+*/
+function lastBlock(source) {
+	const lines = source.split("\n");
+	let openFence = null;
+	let start = 0;
+	let offset = 0;
+	for (const line of lines) {
+		const fence = FENCE.exec(line)?.[1];
+		if (openFence === null) {
+			if (fence !== void 0) openFence = fence;
+			else if (line.trim() === "") start = offset + line.length + 1;
+		} else if (fence !== void 0 && line.trim().startsWith(openFence)) openFence = null;
+		offset += line.length + 1;
+	}
+	return {
+		start: Math.min(start, source.length),
+		openFence
+	};
+}
+/**
+* Hide the markdown token the model is still typing.
+*
+* Streaming markdown is not malformed markdown — CommonMark has an answer for
+* every truncation, and that answer is the problem. `**bo` is a paragraph
+* containing two literal asterisks; three frames later it is bold text and the
+* asterisks are gone. The visible result is punctuation flickering through
+* every emphasis, link and code span as it arrives, and a reflow behind it.
+*
+* So the trailing *syntax* of an unfinished construct is removed while the
+* words it wraps are kept: text appears at the moment the model writes it and
+* only its formatting is deferred to the closing token. Six rules, and the list
+* is exhaustive because everything else in CommonMark either settles on the
+* line it starts on (headings, rules, list markers) or renders the same
+* truncated as finished (block quotes, paragraphs).
+*
+* 1. An unterminated fenced block is closed with a fence matching the one that
+*    opened it, and a lone backtick or two on its last line — the closing fence
+*    mid-keystroke — is dropped rather than shown as code.
+* 2. An odd inline-code run has its opener dropped.
+* 3. `[label`, `[label]` and `[label](http` lose their brackets and their
+*    half-written destination, keeping `label`.
+* 4. `<`, `<h`, `<https://ex` — a partial autolink loses its `<`.
+* 5. An unmatched `*`, `_`, `**`, `__`, `~~` opener is dropped — only where it
+*    sits on a word boundary, so `snake_case` and `2 * 3` are left alone.
+* 6. A delimiter run the stream *ends* on is dropped unless it exactly closed
+*    an open one, which is what makes the first frame of a bold run — a single
+*    `*` with nothing after it — invisible rather than literal.
+*
+* None of this is a second parser and none of it can widen what renders: every
+* rule only ever *deletes* characters before the source reaches the pipeline in
+* {@link MarkdownText}, so a sealed stream is sanitized by exactly the same
+* three gates as a settled document.
+*/
+function sealStream(source) {
+	const { start, openFence } = lastBlock(source);
+	if (openFence !== null) {
+		const cut = source.lastIndexOf("\n");
+		const body = new RegExp(`^ {0,3}[${openFence[0]}]{1,2}$`).test(source.slice(cut + 1)) && cut !== -1 ? source.slice(0, cut + 1) : source;
+		return `${body}${body.endsWith("\n") ? "" : "\n"}${openFence}`;
+	}
+	const head = source.slice(0, start);
+	const tail = source.slice(start);
+	const erase = /* @__PURE__ */ new Set();
+	/** Indices of `[` (or of the `!` of `![`) with no `]` yet. */
+	const brackets = [];
+	/** Open emphasis runs, innermost last. */
+	const emphasis = [];
+	let code = null;
+	let autolink = null;
+	const eraseRun = (index, length) => {
+		for (let at = index; at < index + length; at += 1) erase.add(at);
+	};
+	let at = 0;
+	while (at < tail.length) {
+		const char = tail[at];
+		if (char === "\\") {
+			at += 2;
+			continue;
+		}
+		if (char === "`") {
+			let end = at;
+			while (tail[end] === "`") end += 1;
+			const length = end - at;
+			if (code === null) code = {
+				index: at,
+				length
+			};
+			else if (code.length === length) code = null;
+			at = end;
+			continue;
+		}
+		if (code !== null) {
+			at += 1;
+			continue;
+		}
+		if (char === "<") {
+			autolink = /^<[^\s<>]*$/.test(tail.slice(at)) ? at : null;
+			at += 1;
+			continue;
+		}
+		if (char === ">") {
+			autolink = null;
+			at += 1;
+			continue;
+		}
+		if (char === "[") {
+			brackets.push(tail[at - 1] === "!" ? at - 1 : at);
+			at += 1;
+			continue;
+		}
+		if (char === "]") {
+			const open = brackets.pop();
+			if (open === void 0) {
+				at += 1;
+				continue;
+			}
+			if (tail[at + 1] !== "(") {
+				if (at === tail.length - 1) {
+					eraseRun(open, tail[open] === "!" ? 2 : 1);
+					erase.add(at);
+				}
+				at += 1;
+				continue;
+			}
+			const close = tail.indexOf(")", at + 2);
+			if (close === -1) {
+				eraseRun(open, tail[open] === "!" ? 2 : 1);
+				eraseRun(at, tail.length - at);
+				at = tail.length;
+				continue;
+			}
+			at = close + 1;
+			continue;
+		}
+		if (char === "*" || char === "_" || char === "~") {
+			let end = at;
+			while (tail[end] === char) end += 1;
+			const length = end - at;
+			const before = at === 0 ? "" : tail[at - 1];
+			const after = tail[end] ?? "";
+			const opens = isBoundary(before) && after !== "" && !/\s/.test(after);
+			const closes = before !== "" && !/\s/.test(before);
+			const last = emphasis[emphasis.length - 1];
+			if (closes && last !== void 0 && last.char === char && last.length === length) emphasis.pop();
+			else if (opens) emphasis.push({
+				char,
+				index: at,
+				length
+			});
+			else if (end === tail.length) eraseRun(at, length);
+			at = end;
+			continue;
+		}
+		at += 1;
+	}
+	if (code !== null) eraseRun(code.index, code.length);
+	if (autolink !== null) erase.add(autolink);
+	for (const open of brackets) eraseRun(open, tail[open] === "!" ? 2 : 1);
+	for (const open of emphasis) eraseRun(open.index, open.length);
+	if (erase.size === 0) return source;
+	let sealed = "";
+	for (let index = 0; index < tail.length; index += 1) if (!erase.has(index)) sealed += tail[index];
+	return head + sealed;
+}
+/** The text and info string of a fenced block, read off its hast node. */
+function readCodeBlock(node) {
+	const code = node?.children?.find((child) => child.tagName === "code");
+	const text = (code?.children ?? []).filter((child) => child.type === "text").map((child) => child.value ?? "").join("");
+	const classes = code?.properties?.["className"];
+	return {
+		language: (Array.isArray(classes) ? classes : []).map(String).find((name) => name.startsWith("language-"))?.slice(9),
+		code: text
+	};
+}
+/**
+* Model output, rendered.
+*
+* The one component in this library that turns a string into markup, and the
+* only one that has to be argued for rather than described. Everywhere else —
+* `Message`, `AskBox`, every element in this group — text is text: a string
+* arrives from a model and is placed in the DOM as characters, because a
+* component that quietly parsed it would put every consumer of this library one
+* prompt away from an injection. This one parses, so it states in full what it
+* will and will not do with what it is given.
+*
+* **Threat model.** The input is hostile. Assume the string was written by a
+* model that was told to write it by a web page it fetched, a file it read, or
+* a tool result it did not verify — the practical shape of prompt injection is
+* not "the model turned evil", it is "the model faithfully relayed an
+* attacker's bytes". Three things follow.
+*
+* - **No raw HTML, ever, and not by filtering it.** Markup in the source has no
+*   path to the DOM, and the first reason is an absence rather than a setting.
+*   `react-markdown` hands `remark-rehype` its own `allowDangerousHtml: true`
+*   and spreads it *over* whatever `remarkRehypeOptions` says, so the option
+*   cannot be turned off from here and `<img onerror=…>` does become a `raw`
+*   node. A `raw` node is a span of source text rather than an element, and the
+*   one thing that turns it into markup is `rehype-raw`. Nothing in this package
+*   depends on that plugin, and a test asserts it never will — so the string has
+*   no parser to reach. `rehype-sanitize` then drops the `raw` type outright,
+*   and react-markdown's own `skipHtml` removes whatever is left. Three gates,
+*   none of which is a deny-list of dangerous tags. A `<script>`, an
+*   `<iframe>`, an `<svg>` and an `onclick=` are all the same non-event: there
+*   is nothing in the tree for them to be.
+* - **Attributes are enumerated, not filtered.** An element that is not in the
+*   schema renders nothing; an element that is renders only the attributes
+*   named beside it — `href`/`title` on a link, `src`/`alt`/`title` on an
+*   image, `language-…` on a `code`. No element in the subset accepts `id`,
+*   `style`, `srcset`, `formaction` or any `on*` handler, so none of them has
+*   an attribute to arrive on.
+* - **URLs are allow-listed twice.** `http`, `https` and `mailto` on both
+*   `href` and `src`; a relative URL stays relative; everything else — a
+*   `javascript:` link, a `data:text/html` image, `vbscript:`, `blob:`,
+*   `file:`, `//host` — loses the attribute and leaves an inert element
+*   behind. Every link also carries `rel="noopener noreferrer nofollow"`,
+*   which is not a prop: reverse tabnabbing, referrer leakage of a private
+*   console URL, and SEO laundering through a transcript are all things a
+*   caller should not be able to turn off by accident.
+*
+* **The subset.** Paragraphs, ATX and setext headings, bullet and ordered
+* lists, block quotes, thematic breaks, fenced and indented code, inline code,
+* emphasis, strong, strikethrough, links, images, and hard breaks. No GFM
+* plugin is enabled, so no tables, task lists, footnotes or autolink literals —
+* an explicit `<https://…>` autolink still works. Fenced blocks are plain text
+* unless {@link MarkdownTextProps.renderCodeBlock} is given.
+*
+* **Streaming.** Pass `streaming` while the turn is arriving and the token the
+* model is halfway through typing is hidden rather than rendered as
+* punctuation: no asterisks flickering through every bold run, no half-written
+* URL, no fence that opens a code block one frame and closes it the next. The
+* words appear as they arrive; only their formatting waits for the closing
+* token.
+*
+* `react-markdown` and `rehype-sanitize` are optional peers of this subpath
+* alone, which is why this component is not re-exported from
+* `@cueplusplus/ui/elements`: a console that renders a transcript without
+* markdown should install neither.
+*
+* @example
+* <Message agent="researcher">
+*   <MarkdownText>{turn.text}</MarkdownText>
+* </Message>
+* @example
+* <MarkdownText streaming={turn.status === "running"}>{turn.text}</MarkdownText>
+* @example
+* <MarkdownText renderCodeBlock={({ language, code }) => <Highlight lang={language} code={code} />}>
+*   {answer}
+* </MarkdownText>
+*/
+const MarkdownText = React.forwardRef(function MarkdownText({ className, children, streaming = false, target = "_blank", headingLevel = 2, renderCodeBlock, ...elementProps }, ref) {
+	const source = streaming ? sealStream(children) : children;
+	const components = React.useMemo(() => markdownComponents({
+		target,
+		headingLevel,
+		renderCodeBlock
+	}), [
+		target,
+		headingLevel,
+		renderCodeBlock
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "markdown-text",
+		"data-streaming": streaming ? "" : void 0,
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-3) text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words whitespace-normal", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsx(Markdown, {
+			components,
+			rehypePlugins: [[rehypeSanitize, SCHEMA]],
+			skipHtml: true,
+			urlTransform: safeUrl,
+			children: source
+		})
+	});
+});
+/** The tag → component map, rebuilt only when one of the three props changes. */
+function markdownComponents(options) {
+	const { target, headingLevel, renderCodeBlock } = options;
+	const heading = (depth) => {
+		return `h${Math.min(headingLevel + depth - 1, 6)}`;
+	};
+	const HEADING_CLASS = [
+		"text-(length:--cue-text-title) font-medium",
+		"text-(length:--cue-text-emphasis) font-medium",
+		"text-(length:--cue-text-body) font-medium",
+		"text-(length:--cue-text-ui) font-medium",
+		"text-(length:--cue-text-ui) font-medium",
+		"text-(length:--cue-text-label) font-medium tracking-wide uppercase"
+	];
+	const Heading = (depth) => function MarkdownHeading({ children }) {
+		return React.createElement(heading(depth), {
+			"data-slot": "markdown-heading",
+			className: cn("m-0 text-fg", HEADING_CLASS[depth - 1])
+		}, children);
+	};
+	return {
+		h1: Heading(1),
+		h2: Heading(2),
+		h3: Heading(3),
+		h4: Heading(4),
+		h5: Heading(5),
+		h6: Heading(6),
+		p: ({ children }) => /* @__PURE__ */ jsx("p", {
+			"data-slot": "markdown-paragraph",
+			className: "m-0 text-fg",
+			children
+		}),
+		a: ({ children, href, title }) => /* @__PURE__ */ jsx("a", {
+			"data-slot": "markdown-link",
+			href: href === "" ? void 0 : href,
+			title,
+			target,
+			rel: "noopener noreferrer nofollow",
+			className: "text-accent underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-solid focus-visible:outline-accent",
+			children
+		}),
+		strong: ({ children }) => /* @__PURE__ */ jsx("strong", {
+			"data-slot": "markdown-strong",
+			className: "font-medium text-fg",
+			children
+		}),
+		em: ({ children }) => /* @__PURE__ */ jsx("em", {
+			"data-slot": "markdown-emphasis",
+			className: "italic",
+			children
+		}),
+		del: ({ children }) => /* @__PURE__ */ jsx("del", {
+			"data-slot": "markdown-strike",
+			className: "text-fg-muted line-through",
+			children
+		}),
+		ul: ({ children }) => /* @__PURE__ */ jsx("ul", {
+			"data-slot": "markdown-list",
+			className: "m-0 flex list-disc flex-col gap-(--cue-space-1) ps-(--cue-space-5)",
+			children
+		}),
+		ol: ({ children, start }) => /* @__PURE__ */ jsx("ol", {
+			"data-slot": "markdown-list",
+			start,
+			className: "m-0 flex list-decimal flex-col gap-(--cue-space-1) ps-(--cue-space-5)",
+			children
+		}),
+		li: ({ children }) => /* @__PURE__ */ jsx("li", {
+			"data-slot": "markdown-item",
+			className: "marker:text-fg-subtle",
+			children
+		}),
+		blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", {
+			"data-slot": "markdown-quote",
+			className: "m-0 flex flex-col gap-(--cue-space-2) border-s-2 border-border ps-(--cue-space-3) text-fg-muted",
+			children
+		}),
+		hr: () => /* @__PURE__ */ jsx("hr", {
+			"data-slot": "markdown-rule",
+			className: "my-(--cue-space-1) border-t border-border"
+		}),
+		img: ({ src, alt, title }) => /* @__PURE__ */ jsx("img", {
+			"data-slot": "markdown-image",
+			src: src === "" ? void 0 : src,
+			alt: alt ?? "",
+			title,
+			loading: "lazy",
+			decoding: "async",
+			referrerPolicy: "no-referrer",
+			className: "max-w-full rounded-(--radius-control) border border-border"
+		}),
+		code: ({ children, className: codeClass }) => /* @__PURE__ */ jsx("code", {
+			"data-slot": "markdown-code",
+			className: cn(mono, "rounded-(--radius-control) [pre_&]:rounded-none [pre_&]:bg-transparent [pre_&]:px-0 [pre_&]:py-0", field, "px-[0.35em] py-[0.1em]", codeClass),
+			children
+		}),
+		pre: ({ children, node }) => {
+			const block = readCodeBlock(node);
+			return /* @__PURE__ */ jsx("pre", {
+				"data-slot": "markdown-code-block",
+				"data-language": block.language,
+				className: cn("m-0 rounded-(--radius-control) border border-border p-(--cue-space-3)", field, codeScroll),
+				children: renderCodeBlock === void 0 ? children : /* @__PURE__ */ jsx("span", {
+					className: codeSurface,
+					children: renderCodeBlock(block)
+				})
+			});
+		}
+	};
+}
+//#endregion
+export { MarkdownText };

package/dist/elements/math-block.d.ts

@@ -0,0 +1,51 @@
+import { ComponentProps } from "react";
+//#region src/elements/math-block.d.ts
+/** One line of the working: the expression, and what was done to reach it. */
+interface MathStep {
+  /** The maths itself, as nodes — text, `Frac`, `Sup`, `Sub`. Set in serif italic. */
+  expression: React.ReactNode;
+  /** What justifies the step, in mono beneath it. Omit for a line that needs no gloss. */
+  note?: string;
+}
+/**
+ * Rendered expressions with the working shown, one step at a time.
+ *
+ * @example
+ * import { MathBlock, Frac, Sup } from "@cueplusplus/ui/elements";
+ *
+ * <MathBlock label="derivation" steps={steps} visibleSteps={2} />
+ */
+declare function MathBlock({ label, steps, visibleSteps, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "steps" | "visibleSteps"> & {
+  /** Optional eyebrow above the working. */
+  label?: string;
+  /**
+   * Each step is a node, so you compose expressions from the exported Frac, Sup, and
+   * Sub helpers rather than passing a string to parse.
+   */
+  steps: readonly MathStep[];
+  /** How much of the derivation has been shown. */
+  visibleSteps: number;
+}): import("react").JSX.Element;
+/**
+ * A fraction inside an expression — numerator, rule, denominator — set inline and
+ * aligned to the middle.
+ */
+declare function Frac({ over, under }: {
+  /** Numerator. */
+  over: React.ReactNode;
+  /** Denominator. */
+  under: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A superscript inside an expression: an exponent or an index, set upright inside the
+ * italic.
+ */
+declare function Sup({ children }: {
+  children: React.ReactNode;
+}): import("react").JSX.Element;
+/** A subscript inside an expression: a bound or a label, set upright inside the italic. */
+declare function Sub({ children }: {
+  children: React.ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { Frac, MathBlock, MathStep, Sub, Sup };

package/dist/elements/math-block.js

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { paper } from "./surfaces.js";
+import { take } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/math-block.tsx
+/**
+* Rendered expressions with the working shown, one step at a time.
+*
+* @example
+* import { MathBlock, Frac, Sup } from "@cueplusplus/ui/elements";
+*
+* <MathBlock label="derivation" steps={steps} visibleSteps={2} />
+*/
+function MathBlock({ label, steps, visibleSteps, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "math-block",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: [label && /* @__PURE__ */ jsx("span", {
+			className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
+			children: label
+		}), take(steps, visibleSteps).map((step, i) => /* @__PURE__ */ jsxs("div", {
+			className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex flex-col gap-1 duration-300",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg overflow-x-auto py-1 text-center font-serif text-(length:--cue-text-emphasis) leading-(--cue-leading-ui) italic",
+				children: step.expression
+			}), step.note && /* @__PURE__ */ jsx("span", {
+				className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle text-center"),
+				children: step.note
+			})]
+		}, i))]
+	});
+}
+/**
+* A fraction inside an expression — numerator, rule, denominator — set inline and
+* aligned to the middle.
+*/
+function Frac({ over, under }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "frac",
+		className: "inline-flex flex-col items-center align-middle text-[0.85em] leading-tight",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "px-1",
+			children: over
+		}), /* @__PURE__ */ jsx("span", {
+			className: "border-border-strong w-full border-t px-1",
+			children: under
+		})]
+	});
+}
+/**
+* A superscript inside an expression: an exponent or an index, set upright inside the
+* italic.
+*/
+function Sup({ children }) {
+	return /* @__PURE__ */ jsx("sup", {
+		className: "text-[0.65em] not-italic",
+		children
+	});
+}
+/** A subscript inside an expression: a bound or a label, set upright inside the italic. */
+function Sub({ children }) {
+	return /* @__PURE__ */ jsx("sub", {
+		className: "text-[0.65em] not-italic",
+		children
+	});
+}
+//#endregion
+export { Frac, MathBlock, Sub, Sup };

package/dist/elements/mcp-server-panel.d.ts

@@ -0,0 +1,41 @@
+import { ComponentProps } from "react";
+//#region src/elements/mcp-server-panel.d.ts
+type McpServerStatus = "connected" | "connecting" | "needs-auth" | "failed";
+interface McpServer {
+  /** Stable identity, reported back by onToggle and onAuthorize. */
+  id: string;
+  /** Server name as configured. */
+  name: string;
+  /** How the server is reached: stdio, sse, streamable-http. */
+  transport: string;
+  /** Drives the status dot and, for needs-auth, surfaces the authorize action. */
+  status: McpServerStatus;
+  /** Tool names the server contributed, counted collapsed and listed expanded. */
+  tools: readonly string[];
+}
+/**
+ * Which servers are connected, what each one brought, and which is still waiting on
+ * you.
+ *
+ * @example
+ * import { McpServerPanel } from "@cueplusplus/ui/elements";
+ *
+ * <McpServerPanel
+ *   servers={servers}
+ *   expandedId={expandedId}
+ *   onToggle={setExpandedId}
+ *   onAuthorize={startOAuth}
+ * />
+ */
+declare function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className, ...props }: Omit<ComponentProps<"div">, "children" | "servers" | "expandedId" | "onToggle" | "onAuthorize"> & {
+  /** Every configured server, connected or not. The header counts how many are live. */
+  servers: readonly McpServer[];
+  /** Which server is open. Only one expands at a time; omit for an all-collapsed list. */
+  expandedId?: string;
+  /** Called when a server row is expanded or collapsed. */
+  onToggle?: (id: string) => void;
+  /** Called from the Authorize button, shown only while a server needs auth. */
+  onAuthorize?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { McpServer, McpServerPanel, McpServerStatus };