@cueplusplus/ui 0.13.0

package/dist/chat/message.js

@@ -0,0 +1,108 @@
+import { cn } from "../lib/cn.js";
+import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/message.tsx
+/**
+* The bubble's asymmetric radii — `10 10 2 10` for the user, mirrored for the
+* agent.
+*
+* The tight corner is the tail, and it points at whoever is speaking: bottom
+* right for the right-aligned user turn, bottom left for the agent's. Written
+* against the radius tokens rather than literal pixels, so the whole family
+* tightens with `--cue-radius-scale` at ultra-compact density instead of
+* staying a fixed 10px blob next to 2px controls.
+*/
+const ROLE_RADII = {
+	user: "[border-radius:var(--radius-overlay)_var(--radius-overlay)_var(--radius-control)_var(--radius-overlay)]",
+	agent: "[border-radius:var(--radius-overlay)_var(--radius-overlay)_var(--radius-overlay)_var(--radius-control)]",
+	system: "rounded-(--radius-control)"
+};
+/**
+* Fill per role.
+*
+* The user's own turn is the one place in this system a solid accent fill is
+* right: it is the reader's own voice, it appears at most every other row, and
+* `--cue-accent-fg` exists precisely as "legible ink on the accent" (the same
+* pair `Button` uses for `primary`). Agent turns stay on the flat surface
+* ladder with a hairline, and a system notice is chromeless — it is chrome, not
+* conversation.
+*/
+const ROLE_SURFACES = {
+	user: "ms-auto border border-transparent bg-accent text-accent-fg",
+	agent: "me-auto border border-border bg-surface-1 text-fg",
+	system: "mx-auto border border-dashed border-border bg-transparent text-fg-subtle"
+};
+/** How wide a bubble may get before the line length stops being readable. */
+const MEASURE = "max-w-[min(44rem,90%)]";
+/**
+* One turn in a conversation.
+*
+* Content is rendered as React nodes, verbatim: there is no markdown or HTML
+* path here on purpose. Model output is untrusted text, and a component that
+* quietly parsed it would make every consumer of this library one prompt away
+* from an injection. Callers that want rich text pass their own renderer as
+* children and own that decision.
+*
+* The author line is mono micro and inked in the agent's own colour, so a
+* multi-agent thread is scannable by hue before it is readable by name.
+*
+* Static markup — no `"use client"`; a transcript renders on the server.
+*
+* @example
+* <Message agent="researcher" timestamp="14:02">Found three references.</Message>
+* @example
+* <Message role="user">Patch universe 3.</Message>
+*/
+const Message = React.forwardRef(function Message({ className, role = "agent", agent, rootAgent, author, timestamp, pending = false, footer, children, style, ...elementProps }, ref) {
+	const color = agent === void 0 ? AGENT_ROOT_COLOR : agentColor(agent, { root: rootAgent });
+	const name = author ?? (role === "user" ? "You" : agent);
+	const hasHeader = name !== void 0 || timestamp !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "message",
+		"data-role": role,
+		"data-pending": pending ? "" : void 0,
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-2) px-(--cue-space-4) py-(--cue-space-3)", MEASURE, ROLE_SURFACES[role], ROLE_RADII[role], className),
+		style: {
+			"--agent-color": color,
+			...style
+		},
+		...elementProps,
+		children: [
+			hasHeader ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "message-header",
+				className: "flex min-w-0 items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+				children: [name === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-slot": "message-author",
+					className: cn("min-w-0 truncate", role === "user" ? "text-accent-fg opacity-70" : "text-(--agent-color)"),
+					children: name
+				}), timestamp === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-slot": "message-timestamp",
+					className: cn("shrink-0 tabular-nums", role === "user" ? "text-accent-fg opacity-60" : "text-fg-subtle"),
+					children: timestamp
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "message-body",
+				className: "relative min-w-0 text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words whitespace-pre-wrap",
+				children: [children, pending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "message-caret",
+					"aria-hidden": "true",
+					className: "ms-[0.15em] animate-pulse motion-reduce:animate-none",
+					children: "▍"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "still writing"
+				})] }) : null]
+			}),
+			footer === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "message-footer",
+				className: "flex min-w-0 flex-wrap items-center gap-(--cue-space-2)",
+				children: footer
+			})
+		]
+	});
+});
+//#endregion
+export { Message };

package/dist/chrome/_band.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/cn.js";
+//#region src/chrome/_band.ts
+/**
+* The rule a band draws at its top edge.
+*
+* Spelt as `border-t-(length:--cue-band-rule)` and not as
+* `border-t-(--cue-band-rule)`. Both compile. The second sets
+* `border-top-color`, which would give every band a 1px rule in the token's own
+* text as a colour — a rule that is always drawn and never right. The `length:`
+* hint is what makes Tailwind emit `border-top-width`. It does not carry
+* `border-border` — the element that spends this adds that itself, so both
+* `Band` and `Footer` say in their own class list what colours their rule,
+* rather than one of the two inheriting it silently from the other.
+*/
+const RULE = "border-t-(length:--cue-band-rule)";
+/**
+* The band recipe as class strings, for the one other element in this library
+* that is a band and cannot be a `<section>`.
+*
+* `Footer` is the `contentinfo` landmark: it has to render a `<footer>`, and
+* this library has exactly one polymorphic escape hatch (`ThemeProvider`'s
+* `asChild`) whose own documentation calls it the one place. So rather than
+* give `Band` a second one, or let `Footer` keep a second copy of the recipe
+* — which is the thing spec Decision 4 refuses by name — the strings live here
+* and both elements spend them.
+*
+* It lives in an underscore-prefixed chassis file rather than in `band.tsx` on
+* purpose: `packages/docgen`'s token scanner only follows a component's imports
+* into files whose basename starts with `_`, and `Footer` spends this recipe
+* without rendering `<Band>` itself. Keeping the strings on `band.tsx` left
+* `footer.json`'s published `tokensUsed` silently missing the two tokens this
+* function spends — the rhythm and the rule — because the scanner had no reason
+* to open a public component file it was not asked to document. This file is
+* that reason.
+*
+* **Exactly those two names live here, and that is the second half of the same
+* mechanism.** The scanner reads a chassis file whole; it does not know which
+* branch a call takes, so every `--cue-*` written in this file is published as
+* a token *both* elements render with. `Footer` calls this with the literal
+* `"rule"` and types its own `width` as `ContainerWidth`, so `Band`'s other two
+* spends — `bg-(--cue-band-ground)` for `separation="ground"` and
+* `max-w-(--cue-measure-prose)` for `width="prose"` — are unreachable from a
+* `<footer>` and are written in `band.tsx`, beside the prop that selects them.
+* Moving them here would make `footer.json` claim two tokens the component
+* cannot paint, which is the same defect as the omission this file was written
+* to fix, pointing the other way.
+*
+* It is not exported from the package. A caller who wants a band uses `Band`.
+*/
+function bandClasses(separation) {
+	return cn("w-full py-(--cue-band-y)", separation === "rule" ? RULE : null);
+}
+//#endregion
+export { bandClasses };

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/_edge-scroller.d.ts

@@ -0,0 +1,45 @@
+import "react";
+//#region src/chrome/_edge-scroller.d.ts
+/**
+ * The library's one answer to "this strip is wider than the space it has".
+ *
+ * A bar full of controls has three possible behaviours when it runs out of
+ * room: wrap, scroll, or move the surplus into a menu. This system picks
+ * **scroll**, once, and every bar that can overflow uses this module.
+ *
+ * - **Wrapping is out** because every bar here is one rung of the chrome
+ *   ladder tall (`--cue-chrome-toolbar`) and sits in a layout that has already
+ *   subtracted that height — `AppShell` gives the toolbar `shrink-0` beside a
+ *   `min-h-0` scroller. A bar that silently becomes two rows tall steals the
+ *   work area's height, and the same argument applies to a `SegmentedControl`
+ *   in a page header's actions slot.
+ * - **A "more" menu is out** because it cannot be built from the children a
+ *   bar actually takes. `Toolbar` accepts arbitrary nodes — buttons, groups,
+ *   separators, a `Select` — and there is no honest conversion from one of
+ *   those into a menu item; it would need a parallel `items` data model, a
+ *   per-item measuring pass on every resize, and it would lift the surplus
+ *   controls out of Base UI's roving-focus group, so the same button would be
+ *   reachable by arrow key at one width and by a popover at another.
+ * - **Scrolling is what the library already does** — `ScrollableTabsList` has
+ *   shipped this affordance since the tab strip was written, and its geometry
+ *   was factored out into `./_tabs-scroll` for exactly this reuse. Nothing is
+ *   hidden, nothing is re-parented, the roving-focus group stays intact, and
+ *   the arrow keys still walk the whole bar because a focused control is
+ *   scrolled into view by the browser.
+ *
+ * The affordance is two things and needs both: {@link useEdgeScroll} produces
+ * the fade mask that softens the cut, and {@link EdgeChevrons} draws the
+ * buttons that are the visible half — what sits at an overflowing edge is
+ * usually the gap *between* two controls, and fading empty space produces
+ * nothing anyone can see.
+ */
+/**
+ * What a bar does when its contents are wider than the space it has.
+ *
+ * One vocabulary, shared by every bar that can overflow, because there is one
+ * behaviour: `"scroll"` is the affordance this module implements, `"clip"` is
+ * the escape hatch for a bar already inside something that scrolls.
+ */
+type BarOverflow = "scroll" | "clip";
+//#endregion
+export { BarOverflow };

package/dist/chrome/_edge-scroller.js

@@ -0,0 +1,149 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/_edge-scroller.tsx
+/** Page the strip by most of a screenful, keeping a sliver of context. */
+const NUDGE_FRACTION = .7;
+/**
+* What an overflowing element wears: the scroll axis, the fade, and no
+* scrollbar.
+*
+* A literal rather than a computed string, because Tailwind scans source text —
+* and the mask travels as a custom property so the prefixed and unprefixed
+* properties are written once here instead of twice per render.
+*
+* The property is always set, `none` when nothing overflows, and that word is
+* load-bearing: custom properties **inherit**. Leaving it unset on a strip that
+* fits does not mean "no mask", it means "whatever an ancestor said" — and a
+* `SegmentedControl` inside an overflowing `Toolbar` then wears the bar's fade
+* and loses its own last segment to it. Measured in a real browser at 320px
+* before it was written down. `none` is the initial value either way, so the
+* common case still creates no compositing layer.
+*/
+const EDGE_SCROLLER_CLASSES = "overflow-x-auto [mask-image:var(--cue-edge-fade)] [-webkit-mask-image:var(--cue-edge-fade)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+/**
+* Track which edges of a horizontal scroller still hide content, and hand back
+* the mask and the pager that go with it.
+*
+* @param enabled False to keep the hook mounted but inert — a component whose
+* overflow behaviour is switched off must still call the same hooks in the same
+* order.
+*/
+function useEdgeScroll(enabled = true) {
+	const ref = React.useRef(null);
+	const [edges, setEdges] = React.useState({
+		start: false,
+		end: false
+	});
+	const sync = React.useCallback(() => {
+		const el = ref.current;
+		if (el === null) return;
+		setEdges(computeScrollEdges(el.scrollLeft, el.scrollWidth, el.clientWidth));
+	}, []);
+	React.useEffect(() => {
+		if (!enabled) return;
+		const el = ref.current;
+		if (el === null) return;
+		sync();
+		el.addEventListener("scroll", sync, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => sync());
+		observer?.observe(el);
+		let observedChildren = /* @__PURE__ */ new Set();
+		const syncObservedChildren = () => {
+			const nextChildren = new Set(el.children);
+			for (const child of observedChildren) if (!nextChildren.has(child)) observer?.unobserve(child);
+			for (const child of nextChildren) if (!observedChildren.has(child)) observer?.observe(child);
+			observedChildren = nextChildren;
+			sync();
+		};
+		syncObservedChildren();
+		const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => syncObservedChildren());
+		mutations?.observe(el, { childList: true });
+		return () => {
+			el.removeEventListener("scroll", sync);
+			mutations?.disconnect();
+			observer?.disconnect();
+		};
+	}, [enabled, sync]);
+	const nudge = React.useCallback((direction) => {
+		const el = ref.current;
+		el?.scrollBy?.({
+			left: direction * el.clientWidth * NUDGE_FRACTION,
+			behavior: "smooth"
+		});
+	}, []);
+	const mask = enabled ? edgeFadeMask(edges) : void 0;
+	return {
+		ref,
+		edges: enabled ? edges : {
+			start: false,
+			end: false
+		},
+		style: enabled ? { "--cue-edge-fade": mask ?? "none" } : void 0,
+		nudge
+	};
+}
+/**
+* The pager buttons over an overflowing strip, drawn only for the edges that
+* actually hide something.
+*
+* Absolutely positioned, so the element they sit over must be inside a
+* `relative` frame.
+*/
+function EdgeChevrons({ edges, onNudge, previousLabel, nextLabel, className }) {
+	const base = "absolute inset-y-0 z-10 flex w-(--cue-space-5) cursor-pointer items-center justify-center text-fg-muted outline-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [edges.start ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "edge-scroll-previous",
+		"aria-label": previousLabel,
+		onClick: () => onNudge(-1),
+		className: cn(base, "left-0", className),
+		children: /* @__PURE__ */ jsx(ChevronLeftGlyph, { className: "size-icon-sm" })
+	}) : null, edges.end ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "edge-scroll-next",
+		"aria-label": nextLabel,
+		onClick: () => onNudge(1),
+		className: cn(base, "right-0", className),
+		children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: "size-icon-sm" })
+	}) : null] });
+}
+/**
+* A `<nav>` that scrolls its links, wrapped in the frame the chevrons need.
+*
+* A component rather than the hook that `Toolbar` and `SegmentedControl` use
+* directly, and for one specific reason: `AppBar` has to be renderable from a
+* **server component** — it is a site header, and the site header is where a
+* framework reads its data — so `app-bar.tsx` carries no `"use client"`
+* directive and cannot call a hook. The client boundary is here instead, around
+* the one part of a bar that has state.
+*/
+const EdgeScrollNav = React.forwardRef(function EdgeScrollNav({ className, frameClassName, scrolls = true, previousLabel, nextLabel, style, ...elementProps }, ref) {
+	const scroll = useEdgeScroll(scrolls);
+	const navRef = useComposedRefs(ref, scroll.ref);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "app-bar-nav-frame",
+		className: cn("relative flex", frameClassName),
+		children: [/* @__PURE__ */ jsx("nav", {
+			ref: navRef,
+			className: cn(scrolls ? EDGE_SCROLLER_CLASSES : null, className),
+			...elementProps,
+			style: {
+				...style,
+				...scroll.style
+			}
+		}), /* @__PURE__ */ jsx(EdgeChevrons, {
+			edges: scroll.edges,
+			onNudge: scroll.nudge,
+			previousLabel,
+			nextLabel,
+			className: "bg-surface-1"
+		})]
+	});
+});
+//#endregion
+export { EDGE_SCROLLER_CLASSES, EdgeChevrons, EdgeScrollNav, useEdgeScroll };

package/dist/chrome/_glyphs.js

@@ -0,0 +1,119 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/_glyphs.tsx
+/**
+* Shared chrome glyphs.
+*
+* Drawn inline rather than pulled from `lucide-react` for the same reason as
+* `overlays/_glyphs.tsx`: a disclosure triangle and a pair of chevrons should
+* not put an icon dependency on the render path of every collapsible section,
+* and hand-set strokes stay hairline-thin at the 8–12px sizes console density
+* asks for. `currentColor` everywhere — the tone comes from the parent.
+*
+* @internal Not part of the public API.
+*/
+/** A right-pointing chevron. Rotate it 90° to point down. */
+function ChevronRightGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+	});
+}
+/** A left-pointing chevron. */
+function ChevronLeftGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m10 3-5 5 5 5" })
+	});
+}
+/** A solid down caret — the "this opens a panel" mark on a navigation trigger. */
+function CaretDownGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M11.5 6.5h-7L8 11z" })
+	});
+}
+/** An open eye: the node is drawn normally. */
+function EyeGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z" }), /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "2"
+		})]
+	});
+}
+/** A dashed outline: the node is drawn, but ghosted and out of the way. */
+function GhostGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeDasharray: "2 2",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M4 13V6.5a4 4 0 0 1 8 0V13l-2-1.25L8 13l-2-1.25z" })
+	});
+}
+/** The eye with a stroke through it: the node is not drawn at all. */
+function EyeOffGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M6.2 4A6.5 6.5 0 0 1 8 3.5C12 3.5 14.5 8 14.5 8a12 12 0 0 1-2.3 2.7M9.8 12a6.5 6.5 0 0 1-1.8.5C4 12.5 1.5 8 1.5 8A12 12 0 0 1 4.4 4.8" }), /* @__PURE__ */ jsx("path", { d: "m2.5 2.5 11 11" })]
+	});
+}
+/**
+* Three stacked strokes — the navigation trigger's mark.
+*
+* Only ever drawn below the shell's one breakpoint, where the navigation column
+* has become a drawer and the bar needs something to open it with.
+*/
+function MenuGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M2.5 4h11M2.5 8h11M2.5 12h11" })
+	});
+}
+//#endregion
+export { CaretDownGlyph, ChevronLeftGlyph, ChevronRightGlyph, EyeGlyph, EyeOffGlyph, GhostGlyph, MenuGlyph };

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