@cueplusplus/ui 0.3.0 → 0.6.0

package/dist/agent-runtime/use-agent-thread.js

@@ -0,0 +1,251 @@
+"use client";
+import * as React from "react";
+//#region src/agent-runtime/use-agent-thread.ts
+/**
+* The runtime says `assistant`; this library has said `agent` since its first
+* chat component, because a turn here can come from one of a dozen named
+* workers rather than the assistant.
+*/
+const ROLES = {
+	assistant: "agent",
+	system: "system",
+	user: "user"
+};
+/** Every text part of a turn, as one block of prose. */
+function joinText(content) {
+	return content.flatMap((part) => part.type === "text" ? [part.text] : []).join("\n\n");
+}
+/** Every reasoning part, or nothing at all when the model showed none. */
+function joinReasoning(content) {
+	const thoughts = content.flatMap((part) => part.type === "reasoning" ? [part.text] : []);
+	return thoughts.length === 0 ? void 0 : thoughts.join("\n\n");
+}
+/**
+* While a call is still streaming, `args` is a partial parse — often `{}` for
+* several frames — and `argsText` is what the model has actually said. Show the
+* parse once there is one, the raw text until then, and nothing invented in
+* either case.
+*/
+function formatArgs(part) {
+	const args = part.args;
+	if (typeof args === "object" && args !== null && Object.keys(args).length > 0) return JSON.stringify(args, null, 2);
+	return part.argsText ?? "";
+}
+/** A result as text, whatever the tool returned. Never parsed, never rendered as markup. */
+function formatResult(result) {
+	if (result === void 0) return void 0;
+	if (typeof result === "string") return result;
+	return JSON.stringify(result, null, 2) ?? String(result);
+}
+/**
+* A call has no status of its own until it has an outcome, so until then it
+* borrows the turn's: a call inside a running turn is working, one inside a
+* turn parked on a human is waiting.
+*/
+function toolStatus(part, message) {
+	if (part.isError === true) return "failed";
+	if (part.result !== void 0) return "done";
+	switch (message.status?.type) {
+		case "running": return "working";
+		case "requires-action": return "idle";
+		case "incomplete": return "failed";
+		default: return "done";
+	}
+}
+/** The turn's tool calls, in the order the model made them. */
+function toolCalls(message) {
+	return message.content.flatMap((part) => part.type === "tool-call" ? [{
+		id: part.toolCallId,
+		tool: part.toolName,
+		args: formatArgs(part),
+		result: formatResult(part.result),
+		status: toolStatus(part, message)
+	}] : []);
+}
+/** The runtime's status vocabulary, in this library's words. */
+function turnStatus(message) {
+	if (message.role !== "assistant") return "complete";
+	switch (message.status.type) {
+		case "running": return "streaming";
+		case "requires-action": return "requires-action";
+		case "incomplete": return message.status.reason === "cancelled" ? "cancelled" : "failed";
+		default: return "complete";
+	}
+}
+/** Where the turn sits among its regenerated siblings. */
+function branchOf(runtime, id) {
+	try {
+		const state = runtime.thread.getMessageById(id).getState();
+		return {
+			index: state.branchNumber,
+			count: state.branchCount
+		};
+	} catch {
+		return {
+			index: 1,
+			count: 1
+		};
+	}
+}
+/** One runtime message, in the props the Chat group takes. */
+function toTurn(runtime, message, agent) {
+	const role = ROLES[message.role];
+	const status = turnStatus(message);
+	return {
+		id: message.id,
+		role,
+		agent: role !== "agent" ? void 0 : typeof agent === "function" ? agent(message) : agent,
+		text: joinText(message.content),
+		reasoning: joinReasoning(message.content),
+		toolCalls: toolCalls(message),
+		status,
+		pending: status === "streaming",
+		createdAt: message.createdAt,
+		branch: branchOf(runtime, message.id),
+		message
+	};
+}
+/**
+* An assistant-ui runtime, read as the props the Chat group already takes.
+*
+* `Message`, `MessageList` and `Composer` render turns that have finished
+* arriving. The hard part of a turn that is *still* arriving — assembling
+* tokens, tracking a run, cancelling one, keeping a regenerated answer beside
+* its sibling — is a solved problem, so this library does not re-derive it. You
+* build a runtime with one line of assistant-ui, typically
+* `useExternalStoreRuntime(adapter)`, and hand the object over; every field
+* that comes back is named for the prop it feeds.
+*
+* It is provider-free by construction: a `useSyncExternalStore` over the
+* runtime's thread, and nothing else. No `AssistantRuntimeProvider`, no
+* primitive, no context and no borrowed DOM — this library renders 100% of what
+* the reader sees, and the peer is only a type in the shipped modules.
+*
+* `MessageList` follows a turn that is still growing on its own: the items
+* container is watched for growth, so a streaming bubble keeps the bottom in
+* view without the host adding anything, while a tool-call card the reader
+* folds away leaves the view where it was.
+*
+* Four things are worth knowing before wiring an `ExternalStoreAdapter` to it:
+*
+* - **Pass `convertMessage`, and keep its identity.** Without it your messages
+*   must already be complete runtime messages, and a missing `metadata`
+*   throws; `convertMessage: (m) => m` lets the runtime fill the defaults in.
+*   Declare it outside the component (or memoise it): the runtime caches the
+*   conversion against that function, so a fresh arrow every render re-converts
+*   the whole thread, which re-renders, which converts it again — an inline
+*   arrow turns the next message change into "Maximum update depth exceeded".
+* - **`onReload` takes two arguments** — `(parentId, config)`. Regenerating a
+*   turn re-runs its *parent*, which is what puts the new answer beside the old
+*   one rather than after it.
+* - **A branch switch is host-owned.** Under an ExternalStore runtime
+*   `switchBranch` does not move the thread: it arrives at the adapter's
+*   `setMessages` with the newly visible list, and the host writes it back. A
+*   host that ignores `setMessages` gets a picker that does nothing.
+* - **`onStop`, `regenerate` and `switchBranch` are `undefined`** until the
+*   matching callback exists on the adapter (`onCancel`, `onReload`,
+*   `setMessages`). That is deliberate: `Composer` keeps drawing Send while
+*   `onStop` is missing, so a control that cannot work is never drawn.
+*
+* @example
+* // Outside the component: the runtime caches the conversion against this
+* // function, and a new one every render is an update loop.
+* const convertMessage = (m: ThreadMessageLike) => m;
+*
+* const runtime = useExternalStoreRuntime({
+*   messages,
+*   isRunning,
+*   convertMessage,
+*   onNew,
+*   onCancel,
+*   onReload,
+*   setMessages,
+* });
+* const thread = useAgentThread(runtime, { agent: "planner" });
+*
+* <MessageList aria-label="Thread">
+*   {thread.turns.map((t) => (
+*     <Message
+*       key={t.id}
+*       role={t.role}
+*       agent={t.agent}
+*       pending={t.pending}
+*       footer={
+*         t.branch.count > 1 && thread.switchBranch ? (
+*           <BranchPicker
+*             index={t.branch.index}
+*             count={t.branch.count}
+*             onNavigate={(d) => thread.switchBranch?.(t.id, d)}
+*             disabled={thread.busy}
+*           />
+*         ) : undefined
+*       }
+*     >
+*       {t.text}
+*       {t.toolCalls.map((c) => (
+*         <ToolCallCard key={c.id} tool={c.tool} args={c.args} result={c.result} status={c.status} />
+*       ))}
+*     </Message>
+*   ))}
+* </MessageList>
+* <Composer
+*   onSend={thread.onSend}
+*   busy={thread.busy}
+*   disabled={thread.disabled || thread.busy}
+*   onStop={thread.onStop}
+* />
+*/
+function useAgentThread(runtime, options) {
+	const agent = options?.agent;
+	const agentRef = React.useRef(agent);
+	agentRef.current = agent;
+	const agentKey = typeof agent === "function" ? "fn" : agent;
+	const subscribe = React.useCallback((onStoreChange) => runtime.thread.subscribe(onStoreChange), [runtime]);
+	const getState = React.useCallback(() => runtime.thread.getState(), [runtime]);
+	const { capabilities, isDisabled, isRunning, messages } = React.useSyncExternalStore(subscribe, getState, getState);
+	const turns = React.useMemo(() => messages.map((message) => toTurn(runtime, message, agentRef.current)), [
+		messages,
+		runtime,
+		agentKey
+	]);
+	const onSend = React.useCallback((text) => {
+		runtime.thread.append({
+			role: "user",
+			content: [{
+				type: "text",
+				text
+			}]
+		});
+	}, [runtime]);
+	const cancel = React.useCallback(() => {
+		runtime.thread.cancelRun();
+	}, [runtime]);
+	const reload = React.useCallback((turnId) => {
+		runtime.thread.getMessageById(turnId).reload();
+	}, [runtime]);
+	const switchTo = React.useCallback((turnId, direction) => {
+		runtime.thread.getMessageById(turnId).switchToBranch({ position: direction });
+	}, [runtime]);
+	return React.useMemo(() => ({
+		turns,
+		busy: isRunning,
+		disabled: isDisabled,
+		onSend,
+		onStop: capabilities.cancel ? cancel : void 0,
+		regenerate: capabilities.reload ? reload : void 0,
+		switchBranch: capabilities.switchToBranch ? switchTo : void 0,
+		runtime
+	}), [
+		turns,
+		isRunning,
+		isDisabled,
+		capabilities,
+		onSend,
+		cancel,
+		reload,
+		switchTo,
+		runtime
+	]);
+}
+//#endregion
+export { useAgentThread };

package/dist/chat/index.d.ts

@@ -1,8 +1,8 @@
+import { AskAnswer, AskBox, AskBoxProps, AskDanger, AskKind, AskOption } from "./ask-box.js";
+import { Message, MessageProps, MessageRole } from "./message.js";
 import { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, AgentColorOptions, agentColor, agentColorStyle } from "./agent-color.js";
 import { AgentPile, AgentPileEntry, AgentPileProps, AgentPileSize } from "./agent-pile.js";
-import { AskAnswer, AskBox, AskBoxProps, AskDanger, AskKind, AskOption } from "./ask-box.js";
 import { Composer, ComposerProps, ComposerSubmitKey } from "./composer.js";
 import { DelegationCard, DelegationCardProps, DelegationDirection, DelegationStatus } from "./delegation-card.js";
-import { Message, MessageProps, MessageRole } from "./message.js";
 import { MessageList, MessageListProps } from "./message-list.js";
 export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, Composer, type ComposerProps, type ComposerSubmitKey, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, agentColor, agentColorStyle };

package/dist/chat/message-list.d.ts

@@ -24,6 +24,12 @@ interface MessageListProps extends Omit<React.ComponentPropsWithoutRef<"div">, "
  * mid-sentence is the single most common reason people stop reading a chat
  * pane. Coming back to the bottom re-arms it.
  *
+ * It follows a turn that is still growing, too — the items container is watched
+ * for growth, so a streaming bubble keeps the bottom in view without the host
+ * adding anything, while something merely collapsing leaves the view alone. And
+ * when you have scrolled up, a turn that grows offers the pill instead of
+ * pulling you down.
+ *
  * Deliberately **not** virtualised. A virtualiser needs a measurable row height
  * and chat turns are variable-height by nature; the cost of getting that wrong
  * (jumping scrollbars) is worse than the cost of a few hundred DOM nodes. When

package/dist/chat/message-list.js

@@ -19,6 +19,12 @@ const ROOT_PX = 16;
 * mid-sentence is the single most common reason people stop reading a chat
 * pane. Coming back to the bottom re-arms it.
 *
+* It follows a turn that is still growing, too — the items container is watched
+* for growth, so a streaming bubble keeps the bottom in view without the host
+* adding anything, while something merely collapsing leaves the view alone. And
+* when you have scrolled up, a turn that grows offers the pill instead of
+* pulling you down.
+*
 * Deliberately **not** virtualised. A virtualiser needs a measurable row height
 * and chat turns are variable-height by nature; the cost of getting that wrong
 * (jumping scrollbars) is worse than the cost of a few hundred DOM nodes. When
@@ -31,8 +37,10 @@ const ROOT_PX = 16;
 */
 const MessageList = React.forwardRef(function MessageList({ className, children, follow = true, height, jumpLabel = "Jump to latest", emptyLabel = "No messages yet", "aria-label": ariaLabel, style, ...elementProps }, ref) {
 	const scrollerRef = React.useRef(null);
+	const itemsRef = React.useRef(null);
 	const [pinned, setPinned] = React.useState(true);
 	const [behind, setBehind] = React.useState(false);
+	const lastHeightRef = React.useRef(0);
 	const count = React.Children.count(children);
 	const previousCountRef = React.useRef(count);
 	const jumpToLatest = React.useCallback(() => {
@@ -58,6 +66,32 @@ const MessageList = React.forwardRef(function MessageList({ className, children,
 		follow,
 		pinned
 	]);
+	React.useEffect(() => {
+		const element = scrollerRef.current;
+		const items = itemsRef.current;
+		if (items === null) lastHeightRef.current = 0;
+		if (element === null || items === null || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry === void 0) return;
+			const height = entry.contentRect?.height ?? entry.target.getBoundingClientRect().height;
+			const grew = height > lastHeightRef.current;
+			lastHeightRef.current = height;
+			if (!grew) return;
+			if (follow && pinned) {
+				element.scrollTop = element.scrollHeight;
+				setBehind(false);
+				return;
+			}
+			setBehind(true);
+		});
+		observer.observe(items);
+		return () => observer.disconnect();
+	}, [
+		follow,
+		pinned,
+		count === 0
+	]);
 	const onScroll = React.useCallback(() => {
 		const element = scrollerRef.current;
 		if (element === null) return;
@@ -88,6 +122,7 @@ const MessageList = React.forwardRef(function MessageList({ className, children,
 				className: "flex h-full items-center justify-center p-(--cue-space-6) font-mono text-(length:--cue-text-ui) text-fg-subtle",
 				children: emptyLabel
 			}) : /* @__PURE__ */ jsx("div", {
+				ref: itemsRef,
 				"data-slot": "message-list-items",
 				className: "flex min-w-0 flex-col items-stretch gap-(--cue-space-4) p-(--cue-space-4)",
 				children

package/dist/chrome/_drag.js

@@ -0,0 +1,59 @@
+//#region src/chrome/_drag.ts
+/**
+* The desktop drag contract, in one place because two bars now emit it.
+*
+* A window has exactly one way to be dragged by its chrome, and this library
+* ships into two shells that disagree about what that way is:
+*
+* - **Tauri** listens for `mousedown` and walks the event's `composedPath()`,
+*   looking for `data-tauri-drag-region`. The bare form of the attribute means
+*   *this element and only this element* — the innermost element under the
+*   cursor has to be the attributed one — so a container carrying it does not
+*   hand the behaviour to its children. It also excludes anything that reads as
+*   a control (`a`, `button`, `input`, `select`, `textarea`, `label`,
+*   `summary`, `[contenteditable]`, `[tabindex]`, and the button/link/menuitem
+*   ARIA roles) for free, without being asked.
+* - **Electron and Chromium** read the `app-region` CSS property and build a
+*   *geometric* hit-test mask from it, below the DOM's pointer-event model
+*   entirely: every painted pixel of a `drag` box drags, minus the pixels a
+*   `no-drag` box covers. It knows nothing about ancestry and excludes nothing
+*   on its own — every interactive descendant has to opt out by name.
+*
+* The two mechanisms fail in opposite directions, so the contract a shared
+* component can honour is the union of both: **attribute every structural
+* surface, carve every interactive cluster.** A bar that only attributes its
+* root is undraggable in Tauri wherever a cell covers the root; a bar that only
+* drags and never carves is a bar whose buttons move the window in Electron.
+*
+* Both spellings of the CSS property are emitted. `app-region` is the current
+* canonical name in Electron's own documentation; `-webkit-app-region` is the
+* legacy alias older Chromium builds still want, and neither shell minds
+* reading a property it already understands twice.
+*
+* These are class strings rather than a `<div>` of their own on purpose: the
+* surfaces that have to carry them — {@link TitleBar}'s root,
+* `AppShell.Bar`'s root, its brand cell, its rest cell — already exist for
+* layout reasons, and wrapping each one in a drag element would put a box in
+* the flex arithmetic that is there for nothing but a CSS property.
+*/
+/**
+* Make a painted surface a window drag handle.
+*
+* Pair it with a bare `data-tauri-drag-region` attribute on the same element —
+* the CSS half is Electron's and the attribute half is Tauri's, and an element
+* with only one of them is draggable in only one shell.
+*/
+const DRAG_CLASSES = "[app-region:drag] [-webkit-app-region:drag]";
+/**
+* Carve an interactive cluster back out of the surrounding drag region.
+*
+* Required for Electron, where a button that merely overlaps a drag box stops
+* receiving clicks at all; harmless in Tauri, which had already excluded a
+* real `<button>` on its own. Anything custom enough that Tauri's tag/role
+* heuristic would miss it — an icon "button" built from a `<div>`, a bespoke
+* menu trigger — additionally wants `data-tauri-drag-region="false"`, which is
+* the caller's to add on the control itself.
+*/
+const NO_DRAG_CLASSES = "[app-region:no-drag] [-webkit-app-region:no-drag]";
+//#endregion
+export { DRAG_CLASSES, NO_DRAG_CLASSES };

package/dist/chrome/_status-bar-item.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { statusBarItemClasses } from "./_status-bar.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/chrome/_status-bar-item.tsx
+/**
+* The elements for which `disabled` is a real HTML attribute.
+*
+* Everything else — an anchor above all — has to be told it is inert some other
+* way. Setting `disabled` on an `<a>` produces a stray attribute the parser
+* keeps and nothing reads: not a validity error, but not a disabled link
+* either, because there is no such thing.
+*/
+const DISABLEABLE_TAGS = /* @__PURE__ */ new Set([
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"fieldset",
+	"optgroup"
+]);
+/**
+* Whether `disabled` can be handed to whatever this renders as.
+*
+* A `render` that is a component rather than an intrinsic tag decides for
+* itself — Base UI's own triggers take a `disabled` prop, and refusing to pass
+* it would break the composition this prop exists for — so only a string tag
+* outside the set above is refused.
+*/
+function takesDisabledAttribute(render) {
+	if (render === void 0) return true;
+	if (!React.isValidElement(render)) return true;
+	return typeof render.type !== "string" || DISABLEABLE_TAGS.has(render.type);
+}
+/**
+* A status-bar item that is a real control: a `<button>`, or whatever `render`
+* replaces it with.
+*
+* `type="button"` is supplied only when this renders its own `<button>`. A
+* `render={<a href="…" />}` must not be handed a `type`, which on an anchor is
+* a MIME hint and not a submit-behaviour switch — the same rule
+* {@link IconButton} follows, and for the same reason.
+*
+* `disabled` is honoured on every interactive shape, by two routes. The
+* attribute itself goes only where it means something ({@link DISABLEABLE_TAGS},
+* plus any component `render`, which takes its own `disabled` prop); the state
+* is stated everywhere with `aria-disabled` and `data-disabled`, which is what
+* an anchor gets instead. `data-disabled` is not decoration — it is what greys
+* the item out and lifts it out of the pointer's reach in `_status-bar.ts`,
+* since `:disabled` never matches an `<a>`. The gap this closes was a
+* `render={<button/>} disabled` that shipped enabled, clickable and undimmed.
+*/
+const StatusBarInteractiveItem = React.forwardRef(function StatusBarInteractiveItem({ tone, prominence, className, push, icon: Icon, render, disabled, children, elementProps }, ref) {
+	const tagProps = {
+		...render === void 0 ? { type: "button" } : {},
+		...disabled === true && takesDisabledAttribute(render) ? { disabled: true } : {},
+		...disabled === true ? {
+			"aria-disabled": true,
+			"data-disabled": ""
+		} : {}
+	};
+	return useRender({
+		render,
+		ref,
+		defaultTagName: "button",
+		props: {
+			"data-slot": "status-bar-item",
+			...tagProps,
+			...elementProps,
+			className: cn(statusBarItemClasses({
+				tone,
+				interactive: true,
+				prominence
+			}), push ? "ml-auto" : void 0, className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				className: "size-icon-sm shrink-0"
+			}), children] })
+		}
+	});
+});
+//#endregion
+export { StatusBarInteractiveItem };

package/dist/chrome/_status-bar.d.ts

@@ -0,0 +1,15 @@
+import "./status-bar.js";
+//#region src/chrome/_status-bar.d.ts
+/**
+ * How loudly a status-bar item states itself.
+ *
+ * `quiet` is a reading — tone-coloured ink on the bar's own ground, which is
+ * what a status bar is for. `filled` is a chip: a full-height tone wash behind
+ * tone ink, for the handful of states VS Code reserves its coloured categories
+ * for (a warning, an error, the remote you are attached to). It is loud on
+ * purpose and it is meant to be rare; a bar of five filled items is a bar
+ * nobody reads.
+ */
+type StatusBarProminence = "quiet" | "filled";
+//#endregion
+export { StatusBarProminence };

package/dist/chrome/_status-bar.js

@@ -0,0 +1,171 @@
+import { cn } from "../lib/cn.js";
+//#region src/chrome/_status-bar.ts
+/**
+* The class half of `StatusBar` (see `./status-bar.tsx`).
+*
+* It lives on its own for the same reason `forms/_chassis.ts` does — the item's
+* appearance is a pure function of three enumerated inputs and nothing else —
+* and for one reason `_chassis.ts` does not have: a status bar is two kinds of
+* thing wearing one skin. A static reading is markup, and markup is the whole
+* point of `StatusBar` being renderable from a server component with no
+* JavaScript at all. An *interactive* item is a control, and a control needs
+* the render prop, which needs a hook, which needs `"use client"`. Putting the
+* shared class strings here lets the static half stay static and the
+* interactive half cross the boundary alone (`./_status-bar-item.tsx`), instead
+* of the whole bar crossing it because one of its items might be a button.
+*
+* Everything below is token-backed and enumerated per tone. Nothing is derived
+* at runtime from a tone name, because a class string assembled from a template
+* literal is a class string Tailwind's scanner never sees.
+*/
+/** Ink for each tone; `neutral` inherits the bar's own subtle grey. */
+const ITEM_TONES = {
+	neutral: "",
+	accent: "text-accent",
+	ok: "text-ok",
+	busy: "text-busy",
+	warn: "text-warn",
+	danger: "text-danger",
+	info: "text-info"
+};
+/**
+* Every item, static or not: one line, never wrapping, never growing the bar.
+*
+* This exact string is what a plain `<StatusBar.Item>` rendered before any of
+* the interactive vocabulary existed, and it still is — the appearance function
+* adds to it and never rewrites it, so a console that upgrades sees the same
+* readouts it had.
+*/
+const ITEM_BASE = "inline-flex min-w-0 shrink-0 items-center gap-(--cue-space-2) whitespace-nowrap";
+/**
+* What an item gains when it becomes a real control.
+*
+* The reset first: a `<button>` arrives with a border, a ground, a gutter and a
+* font of the user agent's choosing, and none of them belong in a 24px strip.
+* `text-(length:--cue-text-label)` and `font-mono` are re-declared rather than
+* inherited for the same reason — form controls do not inherit type.
+*
+* `h-full` is the VS Code reading of a status item and the one that makes hover
+* legible: the fill is the height of the bar, not the height of the words, so a
+* pointer anywhere in the strip is over the target rather than beside it.
+*
+* The focus ring is inset (`-outline-offset-1`). An outset ring on a bar this
+* low paints across the item's neighbours and the hairline above them, which
+* reads as the whole bar being focused rather than one reading in it.
+*
+* The disabled treatment is declared twice, once for `:disabled` and once for
+* `[data-disabled]`. An item that a `render` prop turned into an anchor can
+* never match `:disabled` — the pseudo-class is defined on form controls — so
+* without the data twin a disabled link would read as perfectly live.
+*/
+const INTERACTIVE_CHASSIS = "h-full cursor-pointer border-0 bg-transparent py-0 font-mono text-(length:--cue-text-label) outline-none transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40 motion-reduce:transition-none";
+/**
+* A quiet control's gutter, and the negative margin that pays for it.
+*
+* The bar sets `gap-(--cue-space-4)` between items. Padding an item to give its
+* hover fill somewhere to live would push its text `--cue-space-2` further from
+* its neighbour, so the same length is taken straight back off the margin: the
+* words stay exactly where a static reading's words would be, and the fill
+* bleeds halfway into the gap either side. VS Code does the identical trick
+* with a 5px label padding inside a 3px item margin.
+*/
+const QUIET_GEOMETRY = "px-(--cue-space-2) -mx-(--cue-space-2)";
+/**
+* A filled item's gutter. Wider, and with no negative margin at all.
+*
+* A filled item is a chip rather than a reading, and a chip whose ground bleeds
+* into the gap on both sides has no gap left to be a chip in. VS Code makes the
+* same split — its coloured items take the wider 8px padding while a plain one
+* keeps 5px — so this is the next space token up and the margin stays put.
+*/
+const FILLED_GEOMETRY = "h-full px-(--cue-space-3)";
+/**
+* The ground a `quiet` control paints, hovered, pressed, and as a member of a
+* hovered {@link STATUS_BAR_GROUP_CLASSES cluster}.
+*
+* Three rungs of one ladder: the bar sits on `surface-1`, a hovered item lifts
+* to `surface-2`, a pressed one to `surface-3`. The cluster rule is the VS Code
+* pairing exactly — hovering any segment grounds every segment at the ordinary
+* hover rung, and the segment actually under the cursor goes one rung further,
+* so a two-item group reads as one control without hiding which half is live.
+* The compound `group-hover/status-group:hover:` outranks the plain `hover:` on
+* specificity rather than on source order, so which of them wins is decided by
+* the cascade and not by how Tailwind happened to sort that day.
+*/
+const QUIET_GROUNDS = "hover:bg-surface-2 active:bg-surface-3 group-hover/status-group:bg-surface-2 group-hover/status-group:hover:bg-surface-3";
+/**
+* The fill a `filled` item paints, per tone.
+*
+* `bg-<tone>/10` is the tinted-`Chip` recipe, deliberately: "warn" has to be
+* the same wash in the status bar that it is on the chip that raised it. The
+* derived `--cue-<tone>-soft` properties are not used here because only
+* `accent-soft` is bridged into Tailwind's colour namespace — `bg-warn-soft`
+* compiles to nothing at all — while the alpha modifier reaches every tone and
+* lands on the same 10–12% wash the token was derived at.
+*/
+const FILLED_TONES = {
+	neutral: "bg-surface-2 text-fg",
+	accent: "bg-accent/10",
+	ok: "bg-ok/10",
+	busy: "bg-busy/10",
+	warn: "bg-warn/10",
+	danger: "bg-danger/10",
+	info: "bg-info/10"
+};
+/**
+* Where a filled control's fill steps to under the pointer, per tone.
+*
+* The tint deepens rather than being swapped for a grey: a warning that turns
+* neutral on hover has stopped warning at the exact moment somebody reached for
+* it. `/20` is `Chip`'s own interactive step, and `/30` is one further for the
+* press. Neutral has only the surface ladder to climb and its top rung is
+* `surface-3`, so hover and press share it.
+*/
+const FILLED_GROUNDS = {
+	neutral: "hover:bg-surface-3 active:bg-surface-3",
+	accent: "hover:bg-accent/20 active:bg-accent/30",
+	ok: "hover:bg-ok/20 active:bg-ok/30",
+	busy: "hover:bg-busy/20 active:bg-busy/30",
+	warn: "hover:bg-warn/20 active:bg-warn/30",
+	danger: "hover:bg-danger/20 active:bg-danger/30",
+	info: "hover:bg-info/20 active:bg-info/30"
+};
+/**
+* The compact-adjacency cluster: children one pixel apart, whatever the bar's
+* own gap is.
+*
+* `gap-px` is the seam. `*:mx-0` is what makes the seam survive an interactive
+* member, whose `-mx-(--cue-space-2)` would otherwise pull its neighbours a
+* whole space token *over* it — the negative margin exists to bleed a lone
+* item's fill into the bar's gap, and inside a cluster there is no gap to bleed
+* into. It lands on the group because that is where the decision is: these are
+* segments of one control, not readings that happen to be adjacent.
+*
+* `group/status-group` is the handle the members' cluster-hover rules read, and
+* it is left on the element whether or not any member is interactive so a
+* consumer can hang `group-hover/status-group:` rules of their own on it.
+*/
+const STATUS_BAR_GROUP_CLASSES = "group/status-group flex h-full min-w-0 shrink-0 items-center gap-px *:mx-0";
+/**
+* Every class a status-bar item wears, from the three things that vary.
+*
+* One function rather than a class per shape, because the shapes multiply:
+* seven tones times two prominences times interactive-or-not is 28 items, and
+* 28 hand-written strings drift. Ordering is load-bearing — the merge is
+* last-one-wins, so the reset comes before the gutter that overrides it and the
+* tone comes after the `text-inherit` that would otherwise flatten it.
+*
+* @param appearance - Tone, interactivity and prominence; every field optional.
+* @returns The merged class string, with no duplicate or cancelled utilities.
+* @example
+* statusBarItemClasses({}) // exactly the static item's own chassis
+* @example
+* statusBarItemClasses({ tone: "danger", interactive: true, prominence: "filled" })
+*/
+function statusBarItemClasses(appearance) {
+	const { tone = "neutral", interactive = false, prominence = "quiet" } = appearance;
+	const filled = prominence === "filled";
+	return cn(ITEM_BASE, interactive ? INTERACTIVE_CHASSIS : void 0, interactive && tone === "neutral" ? "text-inherit" : void 0, interactive && !filled ? QUIET_GEOMETRY : void 0, filled ? FILLED_GEOMETRY : void 0, ITEM_TONES[tone], filled ? FILLED_TONES[tone] : void 0, interactive && !filled ? QUIET_GROUNDS : void 0, interactive && filled ? FILLED_GROUNDS[tone] : void 0);
+}
+//#endregion
+export { ITEM_BASE, STATUS_BAR_GROUP_CLASSES, statusBarItemClasses };