@cueplusplus/ui 0.1.0

package/dist/instruments/_glyphs.js

@@ -0,0 +1,90 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/_glyphs.tsx
+/**
+* Shared instrument glyphs.
+*
+* Drawn inline for the same reason as `overlays/_glyphs.tsx`: a copy
+* affordance should not put an icon dependency on the render path, and
+* hand-set strokes stay hairline-thin at the 10–12px sizes console density
+* asks for. `currentColor` everywhere — the tone comes from the button.
+*
+* @internal Not part of the public API.
+*/
+/** Two offset sheets: the universal "copy to clipboard" mark. */
+function CopyGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "5.5",
+			y: "5.5",
+			width: "8",
+			height: "8",
+			rx: "1.5"
+		}), /* @__PURE__ */ jsx("path", { d: "M10.5 3.5a1.5 1.5 0 0 0-1.5-1.5H4a1.5 1.5 0 0 0-1.5 1.5V9A1.5 1.5 0 0 0 4 10.5" })]
+	});
+}
+/** The tick that confirms the copy landed. */
+function CheckGlyph(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: "m3 8.5 3.5 3.5L13 4.5" })
+	});
+}
+/** Shared stroke settings for the four pager chevrons. */
+const CHEVRON = {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true"
+};
+/** Previous page. */
+function ChevronLeftGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...CHEVRON,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m10 3-5 5 5 5" })
+	});
+}
+/** Next page. */
+function ChevronRightGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...CHEVRON,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+	});
+}
+/** First page. */
+function ChevronsLeftGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CHEVRON,
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "m8 3-5 5 5 5" }), /* @__PURE__ */ jsx("path", { d: "m13 3-5 5 5 5" })]
+	});
+}
+/** Last page. */
+function ChevronsRightGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CHEVRON,
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "m3 3 5 5-5 5" }), /* @__PURE__ */ jsx("path", { d: "m8 3 5 5-5 5" })]
+	});
+}
+//#endregion
+export { CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsLeftGlyph, ChevronsRightGlyph, CopyGlyph };

package/dist/instruments/_motion.js

@@ -0,0 +1,56 @@
+"use client";
+import * as React from "react";
+//#region src/instruments/_motion.ts
+/**
+* The JS half of the reduced-motion contract.
+*
+* Almost everything in this system stills itself in CSS with
+* `motion-reduce:*`, which is both cheaper and impossible to forget on a
+* re-render. This hook exists only for the cases CSS cannot reach: an animation
+* driven by a timer, where honouring the preference means *not scheduling the
+* work at all* rather than painting it without a transition.
+*
+* @internal Not part of the public API.
+*/
+const QUERY = "(prefers-reduced-motion: reduce)";
+/**
+* Whether the user has asked for reduced motion, tracked live.
+*
+* Starts `false` on the server and on the first client render so hydration
+* matches, then corrects itself in a layout effect before paint.
+*/
+function usePrefersReducedMotion() {
+	const [reduced, setReduced] = React.useState(false);
+	React.useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(QUERY);
+		setReduced(query.matches);
+		const onChange = (event) => setReduced(event.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	return reduced;
+}
+/**
+* mulberry32 — 32 bits of state, uniform enough for jitter and fast enough to
+* call per keystroke.
+*
+* Seeded rather than `Math.random()` so a simulated terminal plays the same way
+* on every render, in every screenshot and in every test (the Phase 1 rule
+* against unseeded randomness).
+*
+* @param seed - Any integer. The same seed always yields the same sequence.
+* @returns A generator of numbers in `[0, 1)`.
+*/
+function mulberry32(seed) {
+	let state = seed >>> 0;
+	return () => {
+		state = state + 1831565813 >>> 0;
+		let t = state;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+//#endregion
+export { mulberry32, usePrefersReducedMotion };

package/dist/instruments/_rem.js

@@ -0,0 +1,21 @@
+//#region src/instruments/_rem.ts
+/**
+* Instruments are the one group that takes raw pixel numbers as props — a
+* meter is 4px tall, a sparkline is 72×14, a progress track is 5px — because
+* those are the numbers a data designer thinks in, and there is no density
+* token for "the height of a bar".
+*
+* They are still emitted as `rem` so the instrument scales with browser zoom
+* and the user's root font size like everything else in the system. This is the
+* same conversion `StatusDot` does for its diameter.
+*
+* @internal Not part of the public API.
+*/
+/** The reference root font size the px props are quoted against. */
+const ROOT_PX = 16;
+/** Convert a px number quoted at the 16px root into a `rem` length. */
+function toRem(px) {
+	return `${px / ROOT_PX}rem`;
+}
+//#endregion
+export { toRem };

package/dist/instruments/app-window-frame.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+//#region src/instruments/app-window-frame.d.ts
+interface AppWindowFrameProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  /** The document name, centred in the title bar. */
+  title?: React.ReactNode;
+  /** Draw the three window lights. Defaults to `true`. */
+  traffic?: boolean;
+  /** Contents of the toolbar row under the title bar. Omit for no toolbar. */
+  toolbar?: React.ReactNode;
+  /** Contents of the status bar along the bottom. Omit for no status bar. */
+  statusBar?: React.ReactNode;
+  /**
+   * Float the frame off the page with a drop shadow. Defaults to `true`.
+   *
+   * This is the one flat-design exception in the kit, and it is not really an
+   * exception: the component *depicts a floating window*, which is exactly the
+   * case the overlay shadow rule already carves out. Set it `false` when the
+   * frame is inlined into a page that is already a window.
+   */
+  elevated?: boolean;
+  /** What is inside the window. */
+  children?: React.ReactNode;
+}
+/**
+ * A screenshot of your own app, built out of your own components.
+ *
+ * The marketing device: title bar, optional toolbar, canvas, status bar — the
+ * shape of a desktop window, wrapped around real markup. Because the contents
+ * are components rather than a PNG, the hero image re-themes with the site, is
+ * legible at any zoom, and cannot go stale the week after a redesign.
+ *
+ * Built from the real `TitleBar` and `StatusBar`, so the depiction and the
+ * product share one set of geometry tokens and can never drift apart.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <AppWindowFrame
+ *   title="main-stage.cue"
+ *   toolbar={<><Chip>File</Chip><Chip tone="ok">Live</Chip></>}
+ *   statusBar={<><StatusBar.Item tone="ok">LIVE</StatusBar.Item><StatusBar.Item>30 pps</StatusBar.Item></>}
+ * >
+ *   <SeamGrid columns={3}>{cells}</SeamGrid>
+ * </AppWindowFrame>
+ */
+declare const AppWindowFrame: React.ForwardRefExoticComponent<AppWindowFrameProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AppWindowFrame, AppWindowFrameProps };

package/dist/instruments/app-window-frame.js

@@ -0,0 +1,76 @@
+import { cn } from "../lib/cn.js";
+import { StatusBar } from "../chrome/status-bar.js";
+import { TitleBar } from "../chrome/title-bar.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/app-window-frame.tsx
+/**
+* The three lights, in the shared status vocabulary rather than in macOS hexes.
+*
+* `#ff5f57 / #febc2e / #28c840` are the colours of *one* operating system's
+* chrome; on a themed page they read as three imported stickers. The status
+* tokens are the same three hues, they re-tint per theme, and they are already
+* the colours the rest of the console uses for stop / caution / go.
+*/
+const LIGHT_TONES = [
+	"bg-danger",
+	"bg-warn",
+	"bg-ok"
+];
+/**
+* A screenshot of your own app, built out of your own components.
+*
+* The marketing device: title bar, optional toolbar, canvas, status bar — the
+* shape of a desktop window, wrapped around real markup. Because the contents
+* are components rather than a PNG, the hero image re-themes with the site, is
+* legible at any zoom, and cannot go stale the week after a redesign.
+*
+* Built from the real `TitleBar` and `StatusBar`, so the depiction and the
+* product share one set of geometry tokens and can never drift apart.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <AppWindowFrame
+*   title="main-stage.cue"
+*   toolbar={<><Chip>File</Chip><Chip tone="ok">Live</Chip></>}
+*   statusBar={<><StatusBar.Item tone="ok">LIVE</StatusBar.Item><StatusBar.Item>30 pps</StatusBar.Item></>}
+* >
+*   <SeamGrid columns={3}>{cells}</SeamGrid>
+* </AppWindowFrame>
+*/
+const AppWindowFrame = React.forwardRef(function AppWindowFrame({ className, title, traffic = true, toolbar, statusBar, elevated = true, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "app-window-frame",
+		className: cn("flex min-w-0 flex-col overflow-hidden rounded-(--radius-surface) border border-border bg-bg", elevated ? "shadow-[0_40px_120px_-40px_rgba(0,0,0,0.9)]" : null, className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx(TitleBar, {
+				center: title,
+				children: traffic ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "app-window-lights",
+					className: "flex items-center gap-(--cue-space-3)",
+					children: LIGHT_TONES.map((tone) => /* @__PURE__ */ jsx("span", {
+						"data-slot": "app-window-light",
+						className: cn("size-[0.5rem] rounded-full opacity-80", tone)
+					}, tone))
+				}) : null
+			}),
+			toolbar === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "app-window-toolbar",
+				className: "flex h-(--cue-chrome-toolbar) shrink-0 items-center gap-(--cue-space-2) border-b border-border bg-surface-1 px-(--cue-pad-row-x) font-mono text-(length:--cue-text-label) text-fg-muted",
+				children: toolbar
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "app-window-canvas",
+				className: "min-h-0 min-w-0 flex-1 p-(--cue-space-6)",
+				children
+			}),
+			statusBar === void 0 ? null : /* @__PURE__ */ jsx(StatusBar, { children: statusBar })
+		]
+	});
+});
+//#endregion
+export { AppWindowFrame };

package/dist/instruments/copy-button.d.ts

@@ -0,0 +1,41 @@
+import { ButtonProps } from "../primitives/button.js";
+import * as React from "react";
+//#region src/instruments/copy-button.d.ts
+interface CopyButtonProps extends Omit<ButtonProps, "icon" | "children" | "onCopy"> {
+  /** The text to put on the clipboard. */
+  value: string;
+  /** ms the confirmation stays up before reverting. Defaults to `1200`. */
+  timeout?: number;
+  /** The idle label. Defaults to `"Copy"`. */
+  children?: React.ReactNode;
+  /** The confirmation label. Defaults to `"Copied"`. */
+  copiedLabel?: React.ReactNode;
+  /**
+   * Called with `value` once it is actually on the clipboard. Replaces the
+   * native `onCopy` clipboard-event handler, which is meaningless on a button.
+   */
+  onCopy?: (value: string) => void;
+  /** Called with whatever the clipboard threw. Nothing is claimed on failure. */
+  onCopyError?: (error: unknown) => void;
+}
+/**
+ * Copy one string, and say so.
+ *
+ * The confirmation is a label swap rather than a colour change or a toast: at
+ * console density a toast for "copied an id" is heavier than the action, and
+ * colour alone would not be announced. The label lives in an `aria-live`
+ * region, so screen-reader users hear the state change too (WCAG 1.4.1).
+ *
+ * Failure is never dressed up as success — if both the async clipboard and the
+ * `execCommand` fallback fail, the label stays put and `onCopyError` fires.
+ *
+ * @example
+ * <CopyButton value={fixture.id} />
+ * @example
+ * <CopyButton value={dsn} variant="ghost" size="sm" copiedLabel="On the clipboard">
+ *   Copy DSN
+ * </CopyButton>
+ */
+declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { CopyButton, CopyButtonProps };

package/dist/instruments/copy-button.js

@@ -0,0 +1,112 @@
+"use client";
+import { Button } from "../primitives/button.js";
+import { CheckGlyph, CopyGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/instruments/copy-button.tsx
+/** How long the confirmation stays up, in ms. */
+const DEFAULT_TIMEOUT_MS = 1200;
+/**
+* The synchronous fallback for browsers (and insecure origins) with no async
+* clipboard: select a scratch textarea and let `execCommand` copy it.
+*
+* Returns `false` rather than throwing so the caller can re-raise whatever the
+* real failure was — the fallback failing is never the interesting error.
+*/
+function copyWithExecCommand(value) {
+	if (typeof document === "undefined" || typeof document.execCommand !== "function") return false;
+	const scratch = document.createElement("textarea");
+	scratch.value = value;
+	scratch.setAttribute("readonly", "");
+	scratch.setAttribute("aria-hidden", "true");
+	scratch.style.position = "fixed";
+	scratch.style.top = "0";
+	scratch.style.left = "-9999px";
+	document.body.appendChild(scratch);
+	const selection = document.getSelection();
+	const previous = selection !== null && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+	let copied = false;
+	try {
+		scratch.select();
+		copied = document.execCommand("copy");
+	} catch {
+		copied = false;
+	} finally {
+		scratch.remove();
+		if (previous !== null && selection !== null) {
+			selection.removeAllRanges();
+			selection.addRange(previous);
+		}
+	}
+	return copied;
+}
+/** Write to the clipboard, preferring the async API and never claiming success. */
+async function writeToClipboard(value) {
+	const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+	if (clipboard !== void 0 && typeof clipboard.writeText === "function") try {
+		await clipboard.writeText(value);
+		return;
+	} catch (error) {
+		if (copyWithExecCommand(value)) return;
+		throw error;
+	}
+	if (copyWithExecCommand(value)) return;
+	throw new Error("Clipboard unavailable");
+}
+/**
+* Copy one string, and say so.
+*
+* The confirmation is a label swap rather than a colour change or a toast: at
+* console density a toast for "copied an id" is heavier than the action, and
+* colour alone would not be announced. The label lives in an `aria-live`
+* region, so screen-reader users hear the state change too (WCAG 1.4.1).
+*
+* Failure is never dressed up as success — if both the async clipboard and the
+* `execCommand` fallback fail, the label stays put and `onCopyError` fires.
+*
+* @example
+* <CopyButton value={fixture.id} />
+* @example
+* <CopyButton value={dsn} variant="ghost" size="sm" copiedLabel="On the clipboard">
+*   Copy DSN
+* </CopyButton>
+*/
+const CopyButton = React.forwardRef(function CopyButton({ value, timeout = DEFAULT_TIMEOUT_MS, children = "Copy", copiedLabel = "Copied", onCopy, onCopyError, onClick, ...buttonProps }, ref) {
+	const [copied, setCopied] = React.useState(false);
+	const timerRef = React.useRef(void 0);
+	React.useEffect(() => () => {
+		if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+	}, []);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		(async () => {
+			try {
+				await writeToClipboard(value);
+			} catch (error) {
+				onCopyError?.(error);
+				return;
+			}
+			onCopy?.(value);
+			setCopied(true);
+			if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => {
+				timerRef.current = void 0;
+				setCopied(false);
+			}, timeout);
+		})();
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		icon: copied ? CheckGlyph : CopyGlyph,
+		"data-copied": copied ? "true" : void 0,
+		onClick: handleClick,
+		...buttonProps,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			children: copied ? copiedLabel : children
+		})
+	});
+});
+//#endregion
+export { CopyButton };

package/dist/instruments/data-table.d.ts

@@ -0,0 +1,168 @@
+import * as React from "react";
+import { ColumnHelper, ReactTable, RowData, TableOptions, flexRender } from "@tanstack/react-table";
+//#region src/instruments/data-table.d.ts
+/**
+ * The console table recipe. Not a component — deliberately.
+ *
+ * A `<DataTable columns={…} data={…} />` monolith has to own the markup of
+ * every cell, every header and every empty state, and the first column that
+ * needs a `Chip` or a `TwoStepButton` in it starts a prop-drilling arms race
+ * that ends with a component nobody can read. TanStack v9's whole point is that
+ * the markup stays yours and only the *logic* is shared, so what this module
+ * ships is the wiring:
+ *
+ * - {@link cueTableFeatures} — one opt-in feature set, so v9 can tree-shake
+ *   everything the console does not use (grouping, faceting, pinning,
+ *   virtualised column sizing).
+ * - {@link useCueTable} — that feature set, pre-bound, with sensible console
+ *   defaults.
+ * - {@link createCueColumnHelper} — the column helper with the features
+ *   already applied, so column defs infer.
+ * - {@link DataTableToolbar} / {@link DataTablePagination} — the two pieces of
+ *   chrome every table needs and nobody enjoys writing twice.
+ *
+ * The rows render through the Phase 1 `Table`. There is a fully worked example
+ * in `test/instruments/data-table.test.tsx`.
+ *
+ * Ships from `@cueplusplus/ui/instruments/data-table`: `@tanstack/react-table`
+ * is an optional peer, and the core bundle must not require it.
+ */
+/**
+ * Sorting, column filtering, global filtering and pagination — and nothing
+ * else.
+ *
+ * Named functions are registered individually rather than by spreading the
+ * built-in registries, because spreading puts every sort and filter
+ * implementation in the bundle whether or not a column names one.
+ */
+declare const cueTableFeatures: {
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+};
+/** The feature set every `useCueTable` instance carries. */
+type CueTableFeatures = typeof cueTableFeatures;
+/** A table instance produced by {@link useCueTable}. */
+type CueTable<TData extends RowData> = ReactTable<CueTableFeatures, TData>;
+/** Options for {@link useCueTable} — TanStack's, minus the features it supplies. */
+interface UseCueTableOptions<TData extends RowData> extends Omit<TableOptions<CueTableFeatures, TData>, "features"> {}
+/**
+ * A TanStack v9 table wired for the console.
+ *
+ * Adds one default on top of the feature set: `globalFilterFn: "includesString"`,
+ * which is what a single search box over a console table always means. Override
+ * it, or any other option, by passing it.
+ *
+ * @param options - Everything `useTable` takes except `features`.
+ * @returns The table instance, ready to render through `Table`.
+ * @example
+ * const table = useCueTable({ data, columns, state: { globalFilter }, onGlobalFilterChange });
+ */
+declare function useCueTable<TData extends RowData>(options: UseCueTableOptions<TData>): CueTable<TData>;
+/**
+ * A column helper with {@link cueTableFeatures} already bound.
+ *
+ * @returns TanStack's `accessor` / `display` / `group` / `columns` builders.
+ * @example
+ * const helper = createCueColumnHelper<Fixture>();
+ * const columns = [helper.accessor("name", { header: "Fixture" })];
+ */
+declare function createCueColumnHelper<TData extends RowData>(): ColumnHelper<CueTableFeatures, TData>;
+interface DataTableToolbarProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
+  /** The current query. Pair it with `onValueChange` and the table's global filter. */
+  value?: string;
+  /** Fired on every keystroke in the search box. */
+  onValueChange?: (value: string) => void;
+  /** Placeholder for the search box. Defaults to `"Filter…"`. */
+  placeholder?: string;
+  /** Accessible name for the search box. Defaults to `"Filter rows"`. */
+  searchLabel?: string;
+  /** Rows currently matching. Shown as `count/total` when both are given. */
+  count?: number;
+  /** Rows before filtering. */
+  total?: number;
+  /** Trailing controls — a column picker, an export button. */
+  children?: React.ReactNode;
+}
+/**
+ * The strip above a table: one search box, a match count, your controls.
+ *
+ * The count is the part worth having as a component. "12/340" next to a filter
+ * box is the difference between "the table is empty" and "the filter is too
+ * tight", and it is the first thing left out of a hand-rolled toolbar.
+ *
+ * @example
+ * <DataTableToolbar value={q} onValueChange={setQ} count={table.getRowCount()} total={data.length}>
+ *   <Button variant="ghost" size="sm">Export</Button>
+ * </DataTableToolbar>
+ */
+declare const DataTableToolbar: React.ForwardRefExoticComponent<DataTableToolbarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The slice of a table instance the pager reads.
+ *
+ * Structural rather than generic so `DataTablePagination` never has to be
+ * parameterised by `TData` — and so a server-paginated table that is not a
+ * TanStack instance at all can still use the control by supplying these seven
+ * members.
+ */
+interface DataTablePager {
+  getPageCount: () => number;
+  getRowCount: () => number;
+  getCanPreviousPage: () => boolean;
+  getCanNextPage: () => boolean;
+  firstPage: () => void;
+  previousPage: () => void;
+  nextPage: () => void;
+  lastPage: () => void;
+  readonly state: {
+    readonly pagination?: {
+      readonly pageIndex: number;
+      readonly pageSize: number;
+    };
+  };
+}
+/** Names for the four pager buttons, for translation. */
+interface DataTablePaginationLabels {
+  first: string;
+  previous: string;
+  next: string;
+  last: string;
+}
+interface DataTablePaginationProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The table instance from {@link useCueTable}, or anything with the same seven members. */
+  table: DataTablePager;
+  /** Accessible names for the four buttons. */
+  labels?: Partial<DataTablePaginationLabels>;
+  /** Render the position readout. Defaults to `"2 / 7"`. */
+  formatPosition?: (page: number, pages: number) => string;
+  /** Render the row count. Defaults to `"340 rows"`. */
+  formatRowCount?: (rows: number) => string;
+}
+/**
+ * The pager: four buttons, the position, and the row count.
+ *
+ * First and last are present because a console table is often sorted to put the
+ * interesting row at one end, and stepping there one page at a time is not a
+ * navigation strategy. Every button is an `IconButton` with a real accessible
+ * name — an arrow glyph alone announces as nothing.
+ *
+ * @example
+ * <DataTablePagination table={table} />
+ */
+declare const DataTablePagination: React.ForwardRefExoticComponent<DataTablePaginationProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CueTable, CueTableFeatures, DataTablePager, DataTablePagination, DataTablePaginationLabels, DataTablePaginationProps, DataTableToolbar, DataTableToolbarProps, UseCueTableOptions, createCueColumnHelper, cueTableFeatures, flexRender, useCueTable };