@cueplusplus/ui 0.1.0

package/dist/layout/description-list.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/description-list.tsx
+const LAYOUTS = {
+	inline: "grid grid-cols-[max-content_minmax(0,1fr)] gap-x-(--cue-space-5) gap-y-(--cue-space-2)",
+	stacked: "flex flex-col gap-(--cue-space-3)"
+};
+/** The `<dl>` family: {@link DescriptionListRoot}, `Term` and `Detail`. */
+const DescriptionList = {
+	Root: React.forwardRef(function DescriptionListRoot({ className, layout = "inline", ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("dl", {
+			ref,
+			"data-slot": "description-list",
+			className: cn(LAYOUTS[layout], className),
+			...elementProps
+		});
+	}),
+	Term: React.forwardRef(function DescriptionListTerm({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("dt", {
+			ref,
+			"data-slot": "description-list-term",
+			className: cn("font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase", className),
+			...elementProps
+		});
+	}),
+	Detail: React.forwardRef(function DescriptionListDetail({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("dd", {
+			ref,
+			"data-slot": "description-list-detail",
+			className: cn("m-0 font-mono text-(length:--cue-text-ui) text-fg", className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { DescriptionList };

package/dist/layout/grid.d.ts

@@ -0,0 +1,40 @@
+import { SpaceStep, StackAlign, StackJustify } from "./stack.js";
+import * as React from "react";
+//#region src/layout/grid.d.ts
+/** How many equal columns to lay out. */
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6;
+interface GridProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** How many equal columns. Defaults to `1`. Ignored when `minItemWidth` is set. */
+  cols?: GridColumns;
+  /** Which rung of the density space ladder to spend between cells. Defaults to `4`. */
+  gap?: SpaceStep;
+  /**
+   * Fill the row with as many columns of at least this width as fit, instead of
+   * a fixed count. Any CSS length (`"12rem"`, `"200px"`).
+   *
+   * Prefer this over a column count wherever the content has a natural minimum
+   * measure — it is responsive without a single breakpoint.
+   */
+  minItemWidth?: string;
+  /** Cross-axis alignment of the cells. */
+  align?: StackAlign;
+  /** Main-axis distribution of the tracks. */
+  justify?: StackJustify;
+}
+/**
+ * Two-dimensional layout: equal columns, or as many as fit.
+ *
+ * Same bargain as `Stack` — the gap is a rung of the density ladder rather than
+ * a hand-picked pixel value, so a card grid tightens with the rest of the
+ * console when the user asks for ultra-compact.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Grid cols={3} gap={5}>{cards}</Grid>
+ * @example
+ * <Grid minItemWidth="14rem" gap={4}>{cards}</Grid>
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Grid, GridColumns, GridProps };

package/dist/layout/grid.js

@@ -0,0 +1,48 @@
+import { cn } from "../lib/cn.js";
+import { ALIGN_CLASSES, GAP_CLASSES, JUSTIFY_CLASSES } from "./stack.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/grid.tsx
+/** Static class per count — Tailwind scans source text, not computed strings. */
+const COLUMN_CLASSES = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4",
+	5: "grid-cols-5",
+	6: "grid-cols-6"
+};
+/**
+* The auto-filling track. The measure travels as a custom property rather than
+* as an arbitrary value, so the track definition is one static class the
+* scanner always sees instead of a fresh one per call site.
+*/
+const AUTO_FILL_CLASS = "grid-cols-[repeat(auto-fill,minmax(var(--cue-grid-min),1fr))]";
+/**
+* Two-dimensional layout: equal columns, or as many as fit.
+*
+* Same bargain as `Stack` — the gap is a rung of the density ladder rather than
+* a hand-picked pixel value, so a card grid tightens with the rest of the
+* console when the user asks for ultra-compact.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Grid cols={3} gap={5}>{cards}</Grid>
+* @example
+* <Grid minItemWidth="14rem" gap={4}>{cards}</Grid>
+*/
+const Grid = React.forwardRef(function Grid({ className, cols = 1, gap = 4, minItemWidth, align, justify, style, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "grid",
+		className: cn("grid", minItemWidth === void 0 ? COLUMN_CLASSES[cols] : AUTO_FILL_CLASS, GAP_CLASSES[gap], align === void 0 ? null : ALIGN_CLASSES[align], justify === void 0 ? null : JUSTIFY_CLASSES[justify], className),
+		style: minItemWidth === void 0 ? style : {
+			"--cue-grid-min": minItemWidth,
+			...style
+		},
+		...elementProps
+	});
+});
+//#endregion
+export { Grid };

package/dist/layout/index.d.ts

@@ -0,0 +1,15 @@
+import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from "./accordion.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./breadcrumb.js";
+import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./card.js";
+import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
+import { Container, ContainerProps, ContainerWidth } from "./container.js";
+import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
+import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./stack.js";
+import { Grid, GridColumns, GridProps } from "./grid.js";
+import { Item, ItemProps, itemVariants } from "./item.js";
+import { Link, LinkProps, linkVariants } from "./link.js";
+import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./pagination.js";
+import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./sidebar.js";
+import { Stepper, StepperProps, StepperState, StepperStep } from "./stepper.js";
+import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./timeline.js";
+export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/index.js

@@ -0,0 +1,15 @@
+import { Accordion } from "./accordion.js";
+import { Breadcrumb } from "./breadcrumb.js";
+import { Card } from "./card.js";
+import { Collapsible, Disclosure } from "./collapsible.js";
+import { Container } from "./container.js";
+import { DescriptionList } from "./description-list.js";
+import { Stack } from "./stack.js";
+import { Grid } from "./grid.js";
+import { Item, itemVariants } from "./item.js";
+import { Link, linkVariants } from "./link.js";
+import { Pagination, paginationRange } from "./pagination.js";
+import { Sidebar, useSidebar } from "./sidebar.js";
+import { Stepper } from "./stepper.js";
+import { Timeline } from "./timeline.js";
+export { Accordion, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Grid, Item, Link, Pagination, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/item.d.ts

@@ -0,0 +1,65 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+//#region src/layout/item.d.ts
+/**
+ * The media-object recipe: an optional leading glyph, two lines of text and a
+ * trailing slot, on the row padding rung.
+ *
+ * Framing and hover feedback are split across `variants` for the same reason as
+ * `chipVariants`: emitting a fill from one variant and cancelling it from
+ * another would leave two competing background utilities in the class string
+ * and lean on `tailwind-merge` to pick a winner.
+ *
+ * @example
+ * <div className={itemVariants({ variant: "outline" })} />
+ */
+declare const itemVariants: (props?: ({
+  variant?: "outline" | "plain" | "soft" | null | undefined;
+  interactive?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+interface ItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof itemVariants> {
+  /** Leading slot: an icon, an avatar, a status dot. */
+  media?: React.ReactNode;
+  /** The item's name — one line, truncated rather than wrapped. */
+  title?: React.ReactNode;
+  /** One supporting line under the title, a rung smaller and muted. */
+  description?: React.ReactNode;
+  /**
+   * Trailing slot: a value, a chip, a control.
+   *
+   * Do not combine with `interactive` — the whole item is then a `<button>`,
+   * and a button may not contain another one. Put the controls beside the item
+   * instead, or drop `interactive` and make the title itself the link.
+   */
+  actions?: React.ReactNode;
+  /** Which framing to paint. Defaults to `"plain"`. */
+  variant?: "plain" | "outline" | "soft";
+  /**
+   * Render as a `<button>` with hover feedback and a focus ring instead of a
+   * static `<div>`. Use for items that select, open or toggle something.
+   */
+  interactive?: boolean;
+  /** Disable the interactive form. Ignored when `interactive` is not set. */
+  disabled?: boolean;
+  /** Extra content between the text column and the action slot. */
+  children?: React.ReactNode;
+}
+/**
+ * One thing in a list, with room for a glyph, a name, a line of detail and a
+ * control — the shape a settings entry, a search hit and a device row all want.
+ *
+ * Where `Row` is a line of a hairline table, `Item` is a self-contained object
+ * that can stand alone, sit in a `Stack` or fill a `Grid` cell. It is a real
+ * `<button>` when interactive rather than a `<div>` with an `onClick`, so
+ * keyboard users get it for free.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Item media={<StatusDot tone="ok" />} title="Node 12" description="10.0.0.12" />
+ * @example
+ * <Item interactive variant="outline" title="Front truss" onClick={open} />
+ */
+declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Item, ItemProps, itemVariants };

package/dist/layout/item.js

@@ -0,0 +1,100 @@
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/item.tsx
+/**
+* The media-object recipe: an optional leading glyph, two lines of text and a
+* trailing slot, on the row padding rung.
+*
+* Framing and hover feedback are split across `variants` for the same reason as
+* `chipVariants`: emitting a fill from one variant and cancelling it from
+* another would leave two competing background utilities in the class string
+* and lean on `tailwind-merge` to pick a winner.
+*
+* @example
+* <div className={itemVariants({ variant: "outline" })} />
+*/
+const itemVariants = cva("flex w-full items-center gap-(--cue-space-4) rounded-(--radius-control) px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-ui) text-fg", {
+	variants: {
+		variant: {
+			plain: "",
+			outline: "border border-border",
+			soft: "bg-surface-2"
+		},
+		interactive: {
+			true: "cursor-pointer transition-colors duration-150 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "plain",
+		interactive: false
+	}
+});
+/**
+* One thing in a list, with room for a glyph, a name, a line of detail and a
+* control — the shape a settings entry, a search hit and a device row all want.
+*
+* Where `Row` is a line of a hairline table, `Item` is a self-contained object
+* that can stand alone, sit in a `Stack` or fill a `Grid` cell. It is a real
+* `<button>` when interactive rather than a `<div>` with an `onClick`, so
+* keyboard users get it for free.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Item media={<StatusDot tone="ok" />} title="Node 12" description="10.0.0.12" />
+* @example
+* <Item interactive variant="outline" title="Front truss" onClick={open} />
+*/
+const Item = React.forwardRef(function Item({ className, media, title, description, actions, variant, interactive = false, disabled, children, ...elementProps }, ref) {
+	const classes = cn(itemVariants({
+		variant,
+		interactive
+	}), className);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		media === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "item-media",
+			className: "flex shrink-0 items-center text-fg-muted",
+			children: media
+		}),
+		title === void 0 && description === void 0 ? null : /* @__PURE__ */ jsxs("span", {
+			"data-slot": "item-text",
+			className: "flex min-w-0 flex-1 flex-col gap-(--cue-space-1)",
+			children: [title === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "item-title",
+				className: "truncate text-fg",
+				children: title
+			}), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "item-description",
+				className: "truncate text-(length:--cue-text-label) text-fg-muted",
+				children: description
+			})]
+		}),
+		children,
+		actions === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "item-actions",
+			className: "flex shrink-0 items-center gap-(--cue-space-2)",
+			children: actions
+		})
+	] });
+	if (interactive) return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		disabled,
+		"data-slot": "item",
+		className: classes,
+		...elementProps,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "item",
+		className: classes,
+		...elementProps,
+		children: content
+	});
+});
+//#endregion
+export { Item, itemVariants };

package/dist/layout/link.d.ts

@@ -0,0 +1,48 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/layout/link.d.ts
+/**
+ * The link recipe.
+ *
+ * The house rule is that a link is **not** underlined: in a console, body copy
+ * is rare and links are mostly labels inside dense furniture, where a rule
+ * under every one of them turns a panel into a page of hyperlinks. Colour on
+ * hover carries the affordance instead. The `underline` variant exists for the
+ * one place the rule is right — links inside a paragraph of prose, where colour
+ * alone would fail WCAG 1.4.1 — and it offsets the rule by 4px so descenders
+ * are not struck through.
+ *
+ * @example
+ * <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
+ */
+declare const linkVariants: (props?: ({
+  variant?: "plain" | "underline" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface LinkProps extends React.ComponentPropsWithoutRef<"a">, VariantProps<typeof linkVariants> {
+  /**
+   * Open in a new tab, mark the anchor `rel="noreferrer noopener"` and append a
+   * `↗`. The glyph is not decoration: a link that replaces the user's context
+   * without warning is a WCAG 3.2.5 failure, and the arrow is the warning.
+   */
+  external?: boolean;
+  /**
+   * Replace the rendered element (Base UI render prop). Accepts an element —
+   * `render={<NextLink href="/x" />}` — or a function returning one. This is
+   * how the design system composes with a router without depending on one.
+   */
+  render?: useRender.RenderProp;
+}
+/**
+ * A text link: accent on hover, no rule unless you ask for one.
+ *
+ * @example
+ * <Link href="/patch">Patch</Link>
+ * @example
+ * <Link href="https://base-ui.com" external variant="underline">Base UI</Link>
+ * @example
+ * <Link render={<NextLink href="/cues" />}>Cues</Link>
+ */
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, LinkProps, linkVariants };

package/dist/layout/link.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/layout/link.tsx
+/**
+* The link recipe.
+*
+* The house rule is that a link is **not** underlined: in a console, body copy
+* is rare and links are mostly labels inside dense furniture, where a rule
+* under every one of them turns a panel into a page of hyperlinks. Colour on
+* hover carries the affordance instead. The `underline` variant exists for the
+* one place the rule is right — links inside a paragraph of prose, where colour
+* alone would fail WCAG 1.4.1 — and it offsets the rule by 4px so descenders
+* are not struck through.
+*
+* @example
+* <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
+*/
+const linkVariants = cva("cursor-pointer rounded-(--radius-control) font-mono text-fg transition-colors duration-150 outline-none hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", {
+	variants: { variant: {
+		plain: "no-underline",
+		underline: "underline decoration-border underline-offset-4 hover:decoration-accent"
+	} },
+	defaultVariants: { variant: "plain" }
+});
+/**
+* A text link: accent on hover, no rule unless you ask for one.
+*
+* @example
+* <Link href="/patch">Patch</Link>
+* @example
+* <Link href="https://base-ui.com" external variant="underline">Base UI</Link>
+* @example
+* <Link render={<NextLink href="/cues" />}>Cues</Link>
+*/
+const Link = React.forwardRef(function Link({ className, variant, external = false, render, children, ...elementProps }, ref) {
+	const externalProps = external ? {
+		target: "_blank",
+		rel: elementProps.rel ?? "noreferrer noopener"
+	} : null;
+	return useRender({
+		render,
+		ref,
+		defaultTagName: "a",
+		props: {
+			...elementProps,
+			...externalProps,
+			"data-slot": "link",
+			className: cn(linkVariants({ variant }), external ? "inline-flex items-center gap-(--cue-space-1)" : null, className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [children, external ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "link-external-glyph",
+				"aria-hidden": "true",
+				className: "shrink-0 text-(length:--cue-text-micro) leading-none select-none",
+				children: "↗"
+			}) : null] })
+		}
+	});
+});
+//#endregion
+export { Link, linkVariants };

package/dist/layout/pagination.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+//#region src/layout/pagination.d.ts
+/** A page number, or the ellipsis standing in for a run of hidden pages. */
+type PaginationEntry = number | "gap";
+/**
+ * Which page buttons to draw for a given position in a run of pages.
+ *
+ * Exported and pure so the layout rule can be unit-tested on its own — the
+ * awkward cases (a window that runs off either end, a gap standing in for one
+ * page) are arithmetic, not rendering, and every pager that gets them wrong
+ * gets them wrong here.
+ *
+ * The window keeps a constant width as it travels: near either end the missing
+ * siblings are spent on the near side instead, so the control does not change
+ * size as the user pages through. A gap that would hide exactly one page is
+ * replaced by that page, because an ellipsis costs the same room as the number
+ * it is hiding.
+ *
+ * @param page The current page, 1-based.
+ * @param pageCount How many pages there are in total.
+ * @param siblingCount How many pages to show either side of the current one.
+ * @returns Page numbers and `"gap"` markers, in display order.
+ * @example
+ * paginationRange(10, 20) // [1, "gap", 9, 10, 11, "gap", 20]
+ */
+declare function paginationRange(page: number, pageCount: number, siblingCount?: number): PaginationEntry[];
+interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "onChange" | "children"> {
+  /** The current page, 1-based. */
+  page: number;
+  /** How many pages there are in total. */
+  pageCount: number;
+  /** Called with the page a control asked for. Always within `1..pageCount`. */
+  onPageChange: (page: number) => void;
+  /** How many pages to show either side of the current one. Defaults to `1`. */
+  siblingCount?: number;
+  /** The nav's accessible name. Defaults to `"Pagination"`. */
+  label?: string;
+}
+/**
+ * The pager: previous, a window of page numbers, next.
+ *
+ * Renders nothing at all when there is a single page — a control offering no
+ * choice is chrome that says "there is more here" when there is not.
+ *
+ * Every page number is a real button with a spoken name ("Page 3"), because the
+ * bare numeral is meaningless read aloud out of context; the ellipses are
+ * `aria-hidden` for the same reason breadcrumb separators are.
+ *
+ * @example
+ * <Pagination page={page} pageCount={12} onPageChange={setPage} />
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Pagination, PaginationEntry, PaginationProps, paginationRange };

package/dist/layout/pagination.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import { IconButton } from "../primitives/icon-button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/pagination.tsx
+/**
+* Which page buttons to draw for a given position in a run of pages.
+*
+* Exported and pure so the layout rule can be unit-tested on its own — the
+* awkward cases (a window that runs off either end, a gap standing in for one
+* page) are arithmetic, not rendering, and every pager that gets them wrong
+* gets them wrong here.
+*
+* The window keeps a constant width as it travels: near either end the missing
+* siblings are spent on the near side instead, so the control does not change
+* size as the user pages through. A gap that would hide exactly one page is
+* replaced by that page, because an ellipsis costs the same room as the number
+* it is hiding.
+*
+* @param page The current page, 1-based.
+* @param pageCount How many pages there are in total.
+* @param siblingCount How many pages to show either side of the current one.
+* @returns Page numbers and `"gap"` markers, in display order.
+* @example
+* paginationRange(10, 20) // [1, "gap", 9, 10, 11, "gap", 20]
+*/
+function paginationRange(page, pageCount, siblingCount = 1) {
+	if (pageCount < 1) return [];
+	const run = (from, to) => Array.from({ length: Math.max(to - from + 1, 0) }, (_, index) => from + index);
+	if (pageCount <= siblingCount * 2 + 5) return run(1, pageCount);
+	const left = Math.max(page - siblingCount, 1);
+	const right = Math.min(page + siblingCount, pageCount);
+	const gapLeft = left > 2;
+	const gapRight = right < pageCount - 1;
+	const edgeRun = siblingCount * 2 + 3;
+	const entries = gapLeft ? gapRight ? [
+		1,
+		"gap",
+		...run(left, right),
+		"gap",
+		pageCount
+	] : [
+		1,
+		"gap",
+		...run(pageCount - edgeRun + 1, pageCount)
+	] : [
+		...run(1, edgeRun),
+		"gap",
+		pageCount
+	];
+	return entries.map((entry, index) => {
+		if (entry !== "gap") return entry;
+		const before = entries[index - 1];
+		const after = entries[index + 1];
+		return typeof before === "number" && typeof after === "number" && after - before === 2 ? before + 1 : entry;
+	});
+}
+/**
+* One page button: a square on the short rung of the control ladder, tinted
+* with `accent-soft` when it is the page you are on — never a solid accent
+* fill, which at console density reads as a second, louder button.
+*/
+const PAGE_BUTTON_CLASSES = "inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent px-(--cue-space-2) font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent";
+/**
+* The pager: previous, a window of page numbers, next.
+*
+* Renders nothing at all when there is a single page — a control offering no
+* choice is chrome that says "there is more here" when there is not.
+*
+* Every page number is a real button with a spoken name ("Page 3"), because the
+* bare numeral is meaningless read aloud out of context; the ellipses are
+* `aria-hidden` for the same reason breadcrumb separators are.
+*
+* @example
+* <Pagination page={page} pageCount={12} onPageChange={setPage} />
+*/
+const Pagination = React.forwardRef(function Pagination({ className, page, pageCount, onPageChange, siblingCount = 1, label = "Pagination", ...elementProps }, ref) {
+	if (pageCount <= 1) return null;
+	const entries = paginationRange(page, pageCount, siblingCount);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref,
+		"data-slot": "pagination",
+		"aria-label": label,
+		className: cn("flex items-center gap-(--cue-space-1)", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Previous page",
+				icon: ChevronLeftGlyph,
+				size: "sm",
+				disabled: page <= 1,
+				onClick: () => onPageChange(page - 1)
+			}),
+			entries.map((entry, index) => entry === "gap" ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "pagination-gap",
+				"aria-hidden": "true",
+				className: "inline-flex h-control-sm items-center justify-center px-(--cue-space-1) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none",
+				children: "…"
+			}, `gap-${index}`) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "pagination-page",
+				"aria-label": `Page ${entry}`,
+				"aria-current": entry === page ? "page" : void 0,
+				onClick: () => onPageChange(entry),
+				className: cn(PAGE_BUTTON_CLASSES, entry === page ? "bg-accent-soft text-accent" : null),
+				children: entry
+			}, entry)),
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Next page",
+				icon: ChevronRightGlyph,
+				size: "sm",
+				disabled: page >= pageCount,
+				onClick: () => onPageChange(page + 1)
+			})
+		]
+	});
+});
+//#endregion
+export { Pagination, paginationRange };

package/dist/layout/resizable.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+//#region src/layout/resizable.d.ts
+/** Which way the panels are laid out. */
+type ResizableOrientation = "horizontal" | "vertical";
+interface ResizableGroupProps extends React.ComponentProps<typeof Group> {}
+interface ResizablePanelProps extends React.ComponentProps<typeof Panel> {}
+interface ResizableHandleProps extends React.ComponentProps<typeof Separator> {
+  /**
+   * Draw a short grip line down the middle of the handle.
+   *
+   * A 4px strip that only colours on hover is easy to miss on first sight; the
+   * grip is the standing hint that the seam is draggable, for the price of one
+   * hairline.
+   */
+  withGrip?: boolean;
+}
+/**
+ * Split panes the user can drag, on `react-resizable-panels`.
+ *
+ * `react-resizable-panels` is an **optional peer**: import this from
+ * `@cueplusplus/ui/layout/resizable`, never from the core barrel, so an app
+ * with no split view never installs one.
+ *
+ * @example
+ * <Resizable.Group orientation="horizontal">
+ *   <Resizable.Panel id="tree" defaultSize={25} minSize={15}>…</Resizable.Panel>
+ *   <Resizable.Handle withGrip />
+ *   <Resizable.Panel id="editor">…</Resizable.Panel>
+ * </Resizable.Group>
+ */
+declare const Resizable: {
+  Group: React.ForwardRefExoticComponent<ResizableGroupProps & React.RefAttributes<HTMLDivElement>>;
+  Panel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;
+  Handle: React.ForwardRefExoticComponent<ResizableHandleProps & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Resizable, ResizableGroupProps, ResizableHandleProps, ResizableOrientation, ResizablePanelProps };