@cueplusplus/ui 0.13.0

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

package/dist/chrome/_tabs-scroll.d.ts

@@ -0,0 +1,67 @@
+//#region src/chrome/_tabs-scroll.d.ts
+/**
+ * Pure geometry for the library's edge-scroll affordance.
+ *
+ * Written for {@link ScrollableTabsList} (see `./tabs.tsx`) and now the shared
+ * arithmetic under every strip in the system that can outgrow its container:
+ * the tab list, `Toolbar`, `SegmentedControl` and `AppBar`'s navigation all
+ * reach it through `./_edge-scroller`, which is where the React half lives.
+ *
+ * A separate module from the components on purpose. These are plain functions
+ * over numbers — testable without a DOM, reusable by anything else that needs a
+ * scroll-edge affordance — and keeping them out of a component file means that
+ * file can stay `"use client"` while this one has no directive at all. (It is
+ * also what makes React Fast Refresh work on the component: a file that exports
+ * both a component and non-component values gets a full reload instead of a hot
+ * swap.)
+ */
+/** How far the fade reaches in from an overflowing edge, in px. */
+declare const TAB_FADE_PX = 24;
+/** Which edges of a horizontal scroller still hide content. */
+interface ScrollEdges {
+  /** More content exists before the visible window (to the left in LTR). */
+  start: boolean;
+  /** More content exists after the visible window (to the right in LTR). */
+  end: boolean;
+}
+/**
+ * Work out which edges of a horizontal scroller still hide content.
+ *
+ * The 1px tolerances are load-bearing, not defensive padding: fractional layout
+ * widths leave `scrollLeft` a sub-pixel short of `scrollWidth - clientWidth` at
+ * a hard scroll end, so an exact comparison pins the end indicator ON forever
+ * with nothing left to reveal — at which point it means the opposite of what it
+ * says. The `max <= 1` guard is the same story for a strip that very nearly
+ * fits.
+ *
+ * @param scrollLeft The scroller's current horizontal offset.
+ * @param scrollWidth The full width of the scrolled content.
+ * @param clientWidth The width of the visible window.
+ * @returns Which edges still have content beyond them.
+ * @example
+ * computeScrollEdges(0, 600, 200); // { start: false, end: true }
+ */
+declare function computeScrollEdges(scrollLeft: number, scrollWidth: number, clientWidth: number): ScrollEdges;
+/**
+ * A CSS mask that fades a strip's CONTENT out at its overflowing edges.
+ *
+ * Deliberately a mask rather than the usual gradient overlay. A tab strip sits
+ * on whatever surface the caller put it on — a panel, a toolbar, the page — so
+ * an overlay would have to re-create that background as an opaque colour and
+ * would drift the moment the theme changed. Masking fades the content itself
+ * and lets whatever is behind show through, so it matches by construction in
+ * every theme and both modes.
+ *
+ * This softens the cut; it is NOT the whole affordance. What sits at an
+ * overflowing edge is often the gap between two tabs, and fading empty space is
+ * invisible — hence the chevron buttons in the component.
+ *
+ * @param edges Which edges overflow, from {@link computeScrollEdges}.
+ * @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+ * @returns A `linear-gradient(...)` value, or `undefined` when nothing
+ * overflows — no mask property at all, rather than a fully opaque one, so the
+ * common case creates no compositing layer.
+ */
+declare function edgeFadeMask(edges: ScrollEdges, fadePx?: number): string | undefined;
+//#endregion
+export { ScrollEdges, TAB_FADE_PX, computeScrollEdges, edgeFadeMask };

package/dist/chrome/_tabs-scroll.js

@@ -0,0 +1,73 @@
+//#region src/chrome/_tabs-scroll.ts
+/**
+* Pure geometry for the library's edge-scroll affordance.
+*
+* Written for {@link ScrollableTabsList} (see `./tabs.tsx`) and now the shared
+* arithmetic under every strip in the system that can outgrow its container:
+* the tab list, `Toolbar`, `SegmentedControl` and `AppBar`'s navigation all
+* reach it through `./_edge-scroller`, which is where the React half lives.
+*
+* A separate module from the components on purpose. These are plain functions
+* over numbers — testable without a DOM, reusable by anything else that needs a
+* scroll-edge affordance — and keeping them out of a component file means that
+* file can stay `"use client"` while this one has no directive at all. (It is
+* also what makes React Fast Refresh work on the component: a file that exports
+* both a component and non-component values gets a full reload instead of a hot
+* swap.)
+*/
+/** How far the fade reaches in from an overflowing edge, in px. */
+const TAB_FADE_PX = 24;
+/**
+* Work out which edges of a horizontal scroller still hide content.
+*
+* The 1px tolerances are load-bearing, not defensive padding: fractional layout
+* widths leave `scrollLeft` a sub-pixel short of `scrollWidth - clientWidth` at
+* a hard scroll end, so an exact comparison pins the end indicator ON forever
+* with nothing left to reveal — at which point it means the opposite of what it
+* says. The `max <= 1` guard is the same story for a strip that very nearly
+* fits.
+*
+* @param scrollLeft The scroller's current horizontal offset.
+* @param scrollWidth The full width of the scrolled content.
+* @param clientWidth The width of the visible window.
+* @returns Which edges still have content beyond them.
+* @example
+* computeScrollEdges(0, 600, 200); // { start: false, end: true }
+*/
+function computeScrollEdges(scrollLeft, scrollWidth, clientWidth) {
+	const max = scrollWidth - clientWidth;
+	if (max <= 1) return {
+		start: false,
+		end: false
+	};
+	return {
+		start: scrollLeft > 1,
+		end: scrollLeft < max - 1
+	};
+}
+/**
+* A CSS mask that fades a strip's CONTENT out at its overflowing edges.
+*
+* Deliberately a mask rather than the usual gradient overlay. A tab strip sits
+* on whatever surface the caller put it on — a panel, a toolbar, the page — so
+* an overlay would have to re-create that background as an opaque colour and
+* would drift the moment the theme changed. Masking fades the content itself
+* and lets whatever is behind show through, so it matches by construction in
+* every theme and both modes.
+*
+* This softens the cut; it is NOT the whole affordance. What sits at an
+* overflowing edge is often the gap between two tabs, and fading empty space is
+* invisible — hence the chevron buttons in the component.
+*
+* @param edges Which edges overflow, from {@link computeScrollEdges}.
+* @param fadePx How far the fade reaches in. Defaults to {@link TAB_FADE_PX}.
+* @returns A `linear-gradient(...)` value, or `undefined` when nothing
+* overflows — no mask property at all, rather than a fully opaque one, so the
+* common case creates no compositing layer.
+*/
+function edgeFadeMask(edges, fadePx = 24) {
+	if (!edges.start && !edges.end) return void 0;
+	return `linear-gradient(to right, ${edges.start ? `transparent 0px, black ${fadePx}px` : "black 0px"}, ${edges.end ? `black calc(100% - ${fadePx}px), transparent 100%` : "black 100%"})`;
+}
+//#endregion
+export { TAB_FADE_PX, computeScrollEdges, edgeFadeMask };

package/dist/chrome/_tree.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+//#region src/chrome/_tree.d.ts
+/**
+ * The pure half of {@link Tree} (see `./tree.tsx`).
+ *
+ * A tree is two separate problems: working out which rows are visible and how
+ * they connect, and painting them. The first one is plain data — no DOM, no
+ * refs, no React — so it lives here where it can be unit-tested directly and
+ * reused by anything else that needs an outline (a virtualized variant, in
+ * particular, needs exactly this list and nothing else).
+ */
+/** One node of the outline. */
+interface TreeItem {
+  /** Stable identity: what selection, expansion and focus are keyed on. */
+  id: string;
+  /** What the row reads as. Kept a node so a call site can mark part of it up. */
+  label: React.ReactNode;
+  /** Optional leading icon component, drawn `aria-hidden`. */
+  icon?: React.ElementType;
+  /** Nested nodes. An empty array still makes the row a parent (an empty folder). */
+  children?: readonly TreeItem[];
+  /** Trailing slot: a count, a `Chip`, a `StatusDot`. */
+  badge?: React.ReactNode;
+  /** Grey the row out; it stays reachable by keyboard but cannot be selected. */
+  disabled?: boolean;
+}
+/**
+ * One column of the indent gutter.
+ *
+ * - `line` — an ancestor at this depth still has siblings below, so its
+ *   through-line continues past this row.
+ * - `space` — that ancestor was the last of its set; the column is now blank.
+ * - `branch` / `last` — the row's own elbow, forked or terminal.
+ */
+type TreeGuide = "line" | "space" | "branch" | "last";
+/** The box-drawing column each guide paints, one mono character wide. */
+declare const TREE_GUIDE_GLYPHS: Record<TreeGuide, string>;
+/** A visible row: the item plus everything the DOM row needs to know about it. */
+interface TreeRow {
+  /** The node this row draws. */
+  item: TreeItem;
+  /** Depth from the roots; `0` for a root. */
+  level: number;
+  /** The id of the row's parent, or `null` at the root. */
+  parentId: string | null;
+  /** Whether the node declares children at all — what `aria-expanded` hangs on. */
+  hasChildren: boolean;
+  /** Whether those children are currently shown. */
+  expanded: boolean;
+  /** 1-based position among its siblings (`aria-posinset`). */
+  position: number;
+  /** How many siblings there are in total (`aria-setsize`). */
+  setSize: number;
+  /** One column per level: ancestor through-lines, then this row's elbow. */
+  guides: TreeGuide[];
+}
+/**
+ * Walk the tree depth-first and return only the rows the expansion state
+ * reveals.
+ *
+ * The result is deliberately flat. A flat list is what the ARIA tree pattern
+ * wants anyway — `aria-level` / `aria-posinset` / `aria-setsize` carry the
+ * structure, no `role="group"` wrappers needed — and it is what makes roving
+ * tabindex ("the next visible row") a single array index instead of a recursive
+ * search.
+ *
+ * @param items The roots, in display order.
+ * @param expanded Ids whose children are currently shown.
+ * @returns Visible rows, top to bottom.
+ * @example
+ * flattenTree(items, new Set(["house"])).map((row) => row.item.id);
+ */
+declare function flattenTree(items: readonly TreeItem[], expanded: ReadonlySet<string>): TreeRow[];
+//#endregion
+export { TREE_GUIDE_GLYPHS, TreeGuide, TreeItem, TreeRow, flattenTree };

package/dist/chrome/_tree.js

@@ -0,0 +1,49 @@
+//#region src/chrome/_tree.ts
+/** The box-drawing column each guide paints, one mono character wide. */
+const TREE_GUIDE_GLYPHS = {
+	line: "│",
+	space: " ",
+	branch: "├",
+	last: "└"
+};
+/**
+* Walk the tree depth-first and return only the rows the expansion state
+* reveals.
+*
+* The result is deliberately flat. A flat list is what the ARIA tree pattern
+* wants anyway — `aria-level` / `aria-posinset` / `aria-setsize` carry the
+* structure, no `role="group"` wrappers needed — and it is what makes roving
+* tabindex ("the next visible row") a single array index instead of a recursive
+* search.
+*
+* @param items The roots, in display order.
+* @param expanded Ids whose children are currently shown.
+* @returns Visible rows, top to bottom.
+* @example
+* flattenTree(items, new Set(["house"])).map((row) => row.item.id);
+*/
+function flattenTree(items, expanded) {
+	const rows = [];
+	const walk = (siblings, level, parentId, ancestorLines) => {
+		siblings.forEach((item, index) => {
+			const isLast = index === siblings.length - 1;
+			const hasChildren = item.children !== void 0;
+			const isExpanded = hasChildren && expanded.has(item.id);
+			rows.push({
+				item,
+				level,
+				parentId,
+				hasChildren,
+				expanded: isExpanded,
+				position: index + 1,
+				setSize: siblings.length,
+				guides: level === 0 ? [] : [...ancestorLines.slice(1).map((continues) => continues ? "line" : "space"), isLast ? "last" : "branch"]
+			});
+			if (isExpanded && item.children !== void 0) walk(item.children, level + 1, item.id, [...ancestorLines, !isLast]);
+		});
+	};
+	walk(items, 0, null, []);
+	return rows;
+}
+//#endregion
+export { TREE_GUIDE_GLYPHS, flattenTree };

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

@@ -0,0 +1,103 @@
+import { BarOverflow } from "./_edge-scroller.js";
+import { LinkProps } from "../layout/link.js";
+import { SeparatorProps } from "../primitives/separator.js";
+import * as React from "react";
+//#region src/chrome/app-bar.d.ts
+interface AppBarRootProps extends React.ComponentPropsWithoutRef<"header"> {
+  /**
+   * Keep the bar at the top of the viewport as the page scrolls. Defaults to
+   * `true`.
+   *
+   * Set it `false` inside `AppShell`, where nothing scrolls the document and a
+   * sticky bar would be solving a problem the shell has already solved.
+   */
+  sticky?: boolean;
+}
+type AppBarBrandProps = Omit<LinkProps, "variant" | "external">;
+interface AppBarNavProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "children"> {
+  /** Where the links sit when they are narrower than the space. Defaults to `"end"`. */
+  align?: "start" | "center" | "end";
+  /**
+   * What the navigation does when the links do not fit. Defaults to `"scroll"`.
+   *
+   * The same behaviour `Toolbar` and `SegmentedControl` have, from the same
+   * module: the links scroll inside the bar, the overflowing edge is faded and
+   * a pager chevron appears there. This is what lets the bar survive a phone
+   * without a viewport breakpoint.
+   */
+  overflow?: BarOverflow;
+  /** Accessible name for the chevron that reveals links off the leading edge. */
+  previousLabel?: string;
+  /** Accessible name for the chevron that reveals links off the trailing edge. */
+  nextLabel?: string;
+  /** Extra classes for the frame around the `<nav>`, which is what takes the remaining width. */
+  frameClassName?: string;
+  /** The links, and any separators between clusters of them. */
+  children?: React.ReactNode;
+}
+/**
+ * Which of the bar's two registers a link is set in.
+ *
+ * `muted` is furniture — the sections a reader scans past. `strong` is a
+ * destination, and the difference is the point: a run of eight identical muted
+ * words has no shape, and the one entry that matters disappears into it. Split
+ * the run with an {@link AppBarSeparator} and set the second cluster `strong`,
+ * and the bar reads as one list, differently weighted, rather than as two
+ * navigations.
+ */
+type AppBarRegister = "muted" | "strong";
+interface AppBarLinkProps extends LinkProps {
+  /** Which register the link is set in. Defaults to `"muted"`. */
+  register?: AppBarRegister;
+  /**
+   * This is the page the reader is on.
+   *
+   * Inks the link with the accent and sets `aria-current="page"` — the same
+   * bargain `Sidebar.Item` makes, so the current destination is announced and
+   * not merely coloured. Overrides `register`: a current page is never
+   * furniture.
+   */
+  active?: boolean;
+}
+type AppBarSeparatorProps = Omit<SeparatorProps, "orientation">;
+type AppBarActionsProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * The horizontal bar a site or an application wears across the top: brand slot,
+ * navigation slot, actions slot, one chrome rung tall.
+ *
+ * `AppShell` is the frame for a screen that owns the viewport; this is the bar
+ * for a document that scrolls — a marketing page, a documentation site, a
+ * console's public half. `NavigationMenu` is neither: it is the *menu* that
+ * goes inside `AppBar.Nav` when a section has children.
+ *
+ * Six parts. `Root` is the `<header>`, `Brand` the leading link, `Nav` the
+ * `<nav>` landmark that takes the remaining width and scrolls when the links
+ * outgrow it, `Link` one destination in one of two registers, `Separator` the
+ * seam between clusters, and `Actions` the trailing controls.
+ *
+ * @example
+ * <AppBar.Root>
+ *   <AppBar.Brand render={<NextLink href="/" />}>
+ *     <Eyebrow>@cueplusplus/ui</Eyebrow>
+ *   </AppBar.Brand>
+ *   <AppBar.Nav aria-label="Sections">
+ *     <AppBar.Link render={<NextLink href="/docs" />}>Docs</AppBar.Link>
+ *     <AppBar.Link render={<NextLink href="/theming" />}>Theming</AppBar.Link>
+ *     <AppBar.Separator />
+ *     <AppBar.Link render={<NextLink href="/gallery" />} register="strong">Gallery</AppBar.Link>
+ *     <AppBar.Link external render={<a href="https://skills.cueplusplus.com" />}>Skills</AppBar.Link>
+ *   </AppBar.Nav>
+ *   <AppBar.Separator />
+ *   <AppBar.Actions><ThemePicker /></AppBar.Actions>
+ * </AppBar.Root>
+ */
+declare const AppBar: {
+  Root: React.ForwardRefExoticComponent<AppBarRootProps & React.RefAttributes<HTMLElement>>;
+  Brand: React.ForwardRefExoticComponent<AppBarBrandProps & React.RefAttributes<HTMLAnchorElement>>;
+  Nav: React.ForwardRefExoticComponent<AppBarNavProps & React.RefAttributes<HTMLElement>>;
+  Link: React.ForwardRefExoticComponent<AppBarLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+  Separator: React.ForwardRefExoticComponent<Omit<AppBarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { AppBar, AppBarActionsProps, AppBarBrandProps, AppBarLinkProps, AppBarNavProps, AppBarRegister, AppBarRootProps, AppBarSeparatorProps };