@mechane-ai/elements 0.0.0-stage → 0.4.1

package/dist/packages/charts/src/distribution/distribution-plot.d.ts

@@ -0,0 +1,135 @@
+import * as stylex from '@stylexjs/stylex';
+import type { ReactNode } from 'react';
+import type { NumericDomain } from './distribution-input.ts';
+export declare const distributionGeometry: {
+    readonly height: 160;
+};
+export declare const distributionStyles: Readonly<{
+    readonly plot: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "max-content minmax(0, 1fr)">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly yAxis: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", 160>;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly svg: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly height: stylex.StyleXClassNameFor<"height", 160>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly grid: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeDasharray: stylex.StyleXClassNameFor<"strokeDasharray", "3 3">;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly axis: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly axisNames: Readonly<{
+        readonly gridColumn: stylex.StyleXClassNameFor<"gridColumn", "1 / -1">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly label: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly values: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly value: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly summary: Readonly<{
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;
+    }>;
+    readonly row: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "minmax(0, 1fr)" | "minmax(100px, 1fr) minmax(120px, 2fr)">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly rowAxis: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly axisSpacer: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block" | "none">;
+    }>;
+    readonly rowLabel: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly rowValue: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly rowSvg: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly height: stylex.StyleXClassNameFor<"height", 28>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly empty: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly baseline: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly missing: Readonly<{
+        readonly fill: stylex.StyleXClassNameFor<"fill", string>;
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeDasharray: stylex.StyleXClassNameFor<"strokeDasharray", "3 3">;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+}>;
+type NumericPlotProps = {
+    readonly xDomain: NumericDomain;
+    readonly yDomain: NumericDomain;
+    readonly xLabel: string;
+    readonly yLabel: string;
+    readonly formatX: (value: number) => string;
+    readonly formatY: (value: number) => string;
+    readonly children: (width: number) => ReactNode;
+};
+export declare function NumericPlot({ xDomain, yDomain, xLabel, yLabel, formatX, formatY, children, }: NumericPlotProps): ReactNode;
+export declare function DomainLabels({ domain, formatValue, }: {
+    readonly domain: NumericDomain;
+    readonly formatValue: (value: number) => string;
+}): ReactNode;
+export {};

package/dist/packages/charts/src/distribution/ecdf.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+import type { NumericDomain } from './distribution-input.ts';
+export type ECDFPoint = {
+    readonly id: string;
+    readonly value: number;
+    readonly probability: number | null;
+};
+export type ECDFProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly points: ReadonlyArray<ECDFPoint>;
+    readonly domain: NumericDomain;
+    readonly valueLabel: string;
+    readonly probabilityLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly formatProbability: (probability: number) => string;
+    readonly tone?: ChartTone;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel?: string;
+};
+export declare function ECDF({ title, description, points, domain, valueLabel, probabilityLabel, formatValue, formatProbability, tone, selection, emptyLabel, }: ECDFProps): ReactNode;

package/dist/packages/charts/src/distribution/histogram.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+import type { NumericDomain } from './distribution-input.ts';
+export type HistogramBin = {
+    readonly id: string;
+    readonly label: string;
+    readonly lowerBound: number;
+    readonly upperBound: number;
+    readonly count: number | null;
+};
+export type HistogramProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly bins: ReadonlyArray<HistogramBin>;
+    readonly domain: NumericDomain;
+    readonly maximumCount: number;
+    readonly valueLabel: string;
+    readonly countLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly formatCount: (count: number) => string;
+    readonly tone?: ChartTone;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel?: string;
+};
+export declare function Histogram({ title, description, bins, domain, maximumCount, valueLabel, countLabel, formatValue, formatCount, tone, selection, emptyLabel, }: HistogramProps): ReactNode;

package/dist/packages/charts/src/distribution/index.d.ts

@@ -0,0 +1,8 @@
+export type { ECDFPoint, ECDFProps } from './ecdf.tsx';
+export { ECDF } from './ecdf.tsx';
+export type { HistogramBin, HistogramProps } from './histogram.tsx';
+export { Histogram } from './histogram.tsx';
+export type { IntervalDatum, IntervalPlotProps } from './interval-plot.tsx';
+export { IntervalPlot } from './interval-plot.tsx';
+export type { RankedBarDatum, RankedBarsProps } from './ranked-bars.tsx';
+export { RankedBars } from './ranked-bars.tsx';

package/dist/packages/charts/src/distribution/interval-plot.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+import type { NumericDomain } from './distribution-input.ts';
+export type IntervalDatum = {
+    readonly id: string;
+    readonly label: string;
+    readonly lower: number | null;
+    readonly estimate: number | null;
+    readonly upper: number | null;
+    readonly tone?: ChartTone;
+};
+export type IntervalPlotProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly items: ReadonlyArray<IntervalDatum>;
+    readonly domain: NumericDomain;
+    readonly valueLabel: string;
+    readonly intervalLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel?: string;
+};
+export declare function IntervalPlot({ title, description, items, domain, valueLabel, intervalLabel, formatValue, selection, emptyLabel, }: IntervalPlotProps): ReactNode;

package/dist/packages/charts/src/distribution/ranked-bars.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+import type { NumericDomain } from './distribution-input.ts';
+export type RankedBarDatum = {
+    readonly id: string;
+    readonly label: string;
+    readonly rank?: string;
+    readonly value: number | null;
+    readonly tone?: ChartTone;
+};
+export type RankedBarsProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly items: ReadonlyArray<RankedBarDatum>;
+    readonly domain: NumericDomain;
+    readonly valueLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel?: string;
+};
+export declare function RankedBars({ title, description, items, domain, valueLabel, formatValue, selection, emptyLabel, }: RankedBarsProps): ReactNode;

package/dist/packages/charts/src/graph/index.d.ts

@@ -0,0 +1,2 @@
+export type { RelationNode, RelationEdge, RelationGroup, RelationGraphProps } from './relation-graph.tsx';
+export { MAX_RELATION_NODES, MAX_RELATION_EDGES, MAX_RELATION_GROUPS, MAX_RELATION_DIMENSION, RelationGraph, } from './relation-graph.tsx';

package/dist/packages/charts/src/graph/relation-graph.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+export type RelationNode = {
+    readonly id: string;
+    readonly label: string;
+    readonly description?: string | undefined;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly tone: ChartTone;
+};
+export type RelationEdge = {
+    readonly id: string;
+    readonly sourceId: string;
+    readonly targetId: string;
+    readonly label: string;
+    readonly direction: 'directed' | 'undirected';
+};
+export type RelationGroup = {
+    readonly id: string;
+    readonly label: string;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly nodeIds: ReadonlyArray<string>;
+};
+export type RelationGraphProps = {
+    readonly title: string;
+    readonly description: string;
+    readonly nodes: ReadonlyArray<RelationNode>;
+    readonly edges: ReadonlyArray<RelationEdge>;
+    readonly groups?: ReadonlyArray<RelationGroup> | undefined;
+    readonly width: number;
+    readonly height: number;
+    readonly selection?: ChartSelection | undefined;
+    readonly emptyLabel: string;
+};
+export declare const MAX_RELATION_NODES = 256;
+export declare const MAX_RELATION_EDGES = 1024;
+export declare const MAX_RELATION_GROUPS = 256;
+export declare const MAX_RELATION_DIMENSION = 8192;
+export declare function RelationGraph({ title, description, nodes, edges, groups, width, height, selection, emptyLabel, }: RelationGraphProps): ReactNode;

package/dist/packages/charts/src/hierarchy/index.d.ts

@@ -0,0 +1,2 @@
+export type { TreemapProps } from './treemap.tsx';
+export { Treemap } from './treemap.tsx';

package/dist/packages/charts/src/hierarchy/treemap.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { BreakdownItem } from '../categorical-values.tsx';
+import type { ChartSelection } from '../chart-frame.tsx';
+export type TreemapProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly items: ReadonlyArray<BreakdownItem>;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection | undefined;
+    readonly height?: number | undefined;
+};
+export declare function Treemap({ title, description, items, formatValue, selection, height }: TreemapProps): ReactNode;

package/dist/packages/charts/src/index.d.ts

@@ -0,0 +1,4 @@
+export type { BreakdownItem } from './categorical-values.tsx';
+export type { ChartSelection, ChartFrameProps, ChartLegendItem, ChartLegendProps } from './chart-frame.tsx';
+export { ChartFrame, ChartLegend } from './chart-frame.tsx';
+export type { ChartTone } from './chart-theme.ts';

package/dist/packages/charts/src/matrix/color-legend.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { HeatmapScale } from './heatmap-scale.ts';
+export type ColorLegendProps = HeatmapScale & {
+    readonly label: string;
+    readonly formatValue: (value: number) => string;
+};
+export declare function ColorLegend({ label, domain, palette, formatValue }: ColorLegendProps): ReactNode;

package/dist/packages/charts/src/matrix/heatmap-scale.d.ts

@@ -0,0 +1,8 @@
+export type HeatmapPalette = 'sequential' | 'diverging';
+export type HeatmapScale = {
+    readonly domain: readonly [number, number];
+    readonly palette: HeatmapPalette;
+};
+export declare function heatmapScaleProblem({ domain, palette }: HeatmapScale): string | null;
+export declare function isHeatmapValueInDomain(value: number, domain: readonly [number, number]): boolean;
+export declare function heatmapColor(value: number, { domain, palette }: HeatmapScale): string;

package/dist/packages/charts/src/matrix/index.d.ts

@@ -0,0 +1,7 @@
+export type { ColorLegendProps } from './color-legend.tsx';
+export { ColorLegend } from './color-legend.tsx';
+export type { HeatmapPalette, HeatmapScale } from './heatmap-scale.ts';
+export type { MatrixAxisItem, MatrixCell, MatrixProps } from './matrix.tsx';
+export { MAX_MATRIX_CELLS, Matrix } from './matrix.tsx';
+export type { HeatmapToken, TokenHeatmapProps } from './token-heatmap.tsx';
+export { MAX_HEATMAP_TOKENS, TokenHeatmap } from './token-heatmap.tsx';

package/dist/packages/charts/src/matrix/matrix.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { HeatmapScale } from './heatmap-scale.ts';
+export type MatrixAxisItem = {
+    readonly id: string;
+    readonly label: string;
+};
+export type MatrixCell = {
+    readonly id: string;
+    readonly rowId: string;
+    readonly columnId: string;
+} & ({
+    readonly kind: 'value';
+    readonly value: number;
+} | {
+    readonly kind: 'masked';
+    readonly reason: string;
+} | {
+    readonly kind: 'missing';
+    readonly reason: string;
+});
+export type MatrixProps = HeatmapScale & {
+    readonly title: string;
+    readonly description: string;
+    readonly rows: ReadonlyArray<MatrixAxisItem>;
+    readonly columns: ReadonlyArray<MatrixAxisItem>;
+    readonly cells: ReadonlyArray<MatrixCell>;
+    readonly valueLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel: string;
+};
+export declare const MAX_MATRIX_CELLS = 4096;
+export declare function Matrix({ title, description, rows, columns, cells, domain, palette, valueLabel, formatValue, selection, emptyLabel, }: MatrixProps): ReactNode;

package/dist/packages/charts/src/matrix/token-heatmap.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { HeatmapScale } from './heatmap-scale.ts';
+export type HeatmapToken = {
+    readonly id: string;
+    readonly index: number;
+    readonly text: string;
+    readonly score: number | null;
+};
+export type TokenHeatmapProps = HeatmapScale & {
+    readonly title: string;
+    readonly description: string;
+    readonly tokens: ReadonlyArray<HeatmapToken>;
+    readonly valueLabel: string;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection;
+    readonly emptyLabel: string;
+};
+export declare const MAX_HEATMAP_TOKENS = 2048;
+export declare function TokenHeatmap({ title, description, tokens, domain, palette, valueLabel, formatValue, selection, emptyLabel, }: TokenHeatmapProps): ReactNode;

package/dist/packages/charts/src/plot-width.d.ts

@@ -0,0 +1,5 @@
+export declare function usePlotWidth(): {
+    ref: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+    width: number;
+    element: HTMLDivElement | null;
+};

package/dist/packages/charts/src/timeline/index.d.ts

@@ -0,0 +1,2 @@
+export type { WaterfallItem } from './waterfall.tsx';
+export { Waterfall } from './waterfall.tsx';

package/dist/packages/charts/src/timeline/waterfall.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+type WaterfallGeometry = {
+    readonly kind: 'interval';
+    readonly start: number;
+    readonly end: number;
+} | {
+    readonly kind: 'point';
+    readonly at: number;
+    readonly marker: 'filled' | 'hollow' | 'diamond';
+} | {
+    readonly kind: 'unavailable';
+};
+export type WaterfallItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly detail: string;
+    readonly summary: string;
+    readonly tone: 'neutral' | 'positive' | 'negative';
+    readonly geometry: WaterfallGeometry;
+};
+type WaterfallProps = {
+    readonly items: ReadonlyArray<WaterfallItem>;
+    readonly start: number;
+    readonly end: number;
+    readonly label: string;
+    readonly rowLabel: string;
+    readonly summaryLabel: string;
+    readonly emptyLabel: string;
+    readonly selectedId: string | undefined;
+    readonly onSelect: (id: string) => void;
+    readonly formatOffset: (offset: number) => string;
+};
+export declare function Waterfall({ items, start, end, label, rowLabel, summaryLabel, emptyLabel, selectedId, onSelect, formatOffset, }: WaterfallProps): ReactNode;
+export {};

package/dist/packages/collections/src/collection-controls.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+export type CollectionToolbarProps = {
+    readonly label: string;
+    readonly children: ReactNode;
+    readonly actions?: ReactNode;
+};
+export declare function CollectionToolbar({ label, children, actions }: CollectionToolbarProps): ReactNode;
+export type FilterChip = {
+    readonly id: string;
+    readonly label: string;
+};
+export type FilterChipsProps = {
+    readonly filters: ReadonlyArray<FilterChip>;
+    readonly onRemove: (id: string) => void;
+    readonly label?: string;
+};
+export declare function FilterChips({ filters, onRemove, label }: FilterChipsProps): ReactNode;
+export type ColumnChoice = {
+    readonly id: string;
+    readonly label: string;
+    readonly visible: boolean;
+    readonly required?: boolean;
+};
+export type ColumnControlsProps = {
+    readonly columns: ReadonlyArray<ColumnChoice>;
+    readonly onVisibilityChange: (columnId: string, visible: boolean) => void;
+    readonly label?: string;
+};
+export declare function ColumnControls({ columns, onVisibilityChange, label }: ColumnControlsProps): ReactNode;
+export type CollectionPaginationProps = {
+    readonly description: string;
+    readonly previous: {
+        readonly disabled: boolean;
+        readonly onClick: () => void;
+    };
+    readonly next: {
+        readonly disabled: boolean;
+        readonly onClick: () => void;
+    };
+};
+export declare function CollectionPagination({ description, previous, next }: CollectionPaginationProps): ReactNode;

package/dist/packages/collections/src/data-table.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+type ColumnAlignment = 'start' | 'end';
+export type DataTableColumn<Row> = {
+    readonly id: string;
+    readonly label: string;
+    readonly cell: (row: Row) => ReactNode;
+    readonly align?: ColumnAlignment;
+    readonly width?: number;
+    readonly sortable?: boolean;
+};
+export type DataTableSort = {
+    readonly columnId: string;
+    readonly direction: 'ascending' | 'descending';
+};
+export type DataTableWindow = {
+    readonly height: number;
+    readonly estimatedRowHeight?: number;
+};
+type SortProperties<Row> = {
+    readonly columns: ReadonlyArray<DataTableColumn<Row>>;
+    readonly sort: DataTableSort | undefined;
+    readonly onSortChange: (sort: DataTableSort | undefined) => void;
+} | {
+    readonly columns: ReadonlyArray<DataTableColumn<Row> & {
+        readonly sortable?: false;
+    }>;
+    readonly sort?: never;
+    readonly onSortChange?: never;
+};
+type SelectionProperties<Row> = {
+    readonly selectedIds: ReadonlySet<string>;
+    readonly onSelectionChange: (selectedIds: ReadonlySet<string>) => void;
+    readonly selectionLabel: (row: Row) => string;
+};
+type OptionalSelection<Row> = SelectionProperties<Row> | {
+    readonly selectedIds?: never;
+    readonly onSelectionChange?: never;
+    readonly selectionLabel?: never;
+};
+export type DataTableProps<Row> = SortProperties<Row> & OptionalSelection<Row> & {
+    readonly rows: ReadonlyArray<Row>;
+    readonly getRowId: (row: Row) => string;
+    readonly caption: string;
+    readonly empty: string;
+    readonly window?: DataTableWindow;
+    readonly footer?: ReactNode;
+};
+export declare function DataTable<Row extends object>({ rows, columns, getRowId, caption, empty, sort, onSortChange, selectedIds, onSelectionChange, selectionLabel, window, footer, }: DataTableProps<Row>): ReactNode;
+export {};

package/dist/packages/collections/src/index.d.ts

@@ -0,0 +1,10 @@
+export type { CollectionToolbarProps, FilterChip, FilterChipsProps, ColumnChoice, ColumnControlsProps, CollectionPaginationProps, } from './collection-controls.tsx';
+export { CollectionToolbar, FilterChips, ColumnControls, CollectionPagination } from './collection-controls.tsx';
+export type { DataTableColumn, DataTableSort, DataTableWindow, DataTableProps } from './data-table.tsx';
+export { DataTable } from './data-table.tsx';
+export { Inspector, Details } from './inspector.tsx';
+export { ListFooter } from './list-footer.tsx';
+export { MetricGrid, Metric } from './metrics.tsx';
+export { Table, Cell } from './table.tsx';
+export type { TimestampProps } from './timestamp.tsx';
+export { Timestamp } from './timestamp.tsx';

package/dist/packages/collections/src/inspector.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+type InspectorProps = ComponentProps<'div'> & {
+    readonly master: ReactNode;
+    readonly detail: ReactNode;
+    readonly label: string;
+};
+type DetailItem = {
+    readonly label: string;
+    readonly value: ReactNode;
+};
+type DetailsProps = ComponentProps<'dl'> & {
+    readonly items: ReadonlyArray<DetailItem>;
+};
+export declare function Inspector({ master, detail, label, ...props }: InspectorProps): ReactNode;
+export declare function Details({ items, ...props }: DetailsProps): ReactNode;
+export {};

package/dist/packages/collections/src/list-footer.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps, ReactNode } from 'react';
+type ListFooterProps = ComponentProps<'div'> & {
+    readonly actions?: ReactNode;
+};
+export declare function ListFooter({ children, actions, ...props }: ListFooterProps): ReactNode;
+export {};

package/dist/packages/collections/src/metrics.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ReactNode } from 'react';
+type MetricGridProps = ComponentProps<'dl'>;
+type MetricProps = ComponentProps<'div'> & {
+    readonly label: string;
+    readonly value: string;
+};
+export declare function MetricGrid(props: MetricGridProps): ReactNode;
+export declare function Metric({ label, value, ...props }: MetricProps): ReactNode;
+export {};

package/dist/packages/collections/src/table.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from 'react';
+type TableHeader = string | {
+    readonly label: string;
+    readonly width: number;
+    readonly secondary?: boolean;
+};
+type TableProps = ComponentProps<'table'> & {
+    readonly headers: ReadonlyArray<TableHeader>;
+    readonly label: string;
+};
+type CellProps = ComponentProps<'td'> & {
+    readonly secondary?: boolean;
+    readonly mobileLabel?: string;
+};
+export declare function Table({ headers, children, label, ...props }: TableProps): ReactNode;
+export declare function Cell({ children, secondary, mobileLabel, ...props }: CellProps): ReactNode;
+export {};

package/dist/packages/collections/src/timestamp.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type TimestampProps = {
+    readonly dateTime: string;
+    readonly label: string;
+    readonly title?: string;
+};
+export declare function Timestamp({ dateTime, label, title }: TimestampProps): ReactNode;

package/dist/packages/content/src/code/code-block.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export type CodeAnnotation = {
+    readonly line: number;
+    readonly content: ReactNode;
+};
+export type CodeSelection = {
+    readonly start: number;
+    readonly end?: number;
+};
+export type CodeBlockProps = {
+    readonly code: string;
+    readonly language?: string | undefined;
+    readonly filename?: string | undefined;
+    readonly streaming?: boolean;
+    readonly wrap?: boolean;
+    readonly lineNumbers?: boolean;
+    readonly selectedLines?: CodeSelection;
+    readonly annotations?: ReadonlyArray<CodeAnnotation>;
+    readonly maxHeight?: number;
+    readonly maxLines?: number;
+};
+export declare function CodeBlock({ code, language, filename, streaming, wrap, lineNumbers, selectedLines, annotations, maxHeight, maxLines, }: CodeBlockProps): ReactNode;

package/dist/packages/content/src/code/index.d.ts

@@ -0,0 +1,2 @@
+export type { CodeAnnotation, CodeSelection, CodeBlockProps } from './code-block.tsx';
+export { CodeBlock } from './code-block.tsx';