@photon-ai/pho-ui 2.13.0 → 2.15.0

package/dist/src/components/code-block/code-block.d.ts

@@ -0,0 +1,43 @@
+import { ComponentProps, ReactNode, Ref } from 'react';
+/**
+ * Code Block — a read-only panel for a request body, a response, an
+ * event's JSON. Mono text on the code surface, a title row with a wrap
+ * toggle and a copy control, and past `maxLines` a fold that shows the
+ * first lines with a button for the rest.
+ *
+ * Design notes:
+ * - Wide lines scroll sideways inside the panel; the page never does.
+ *   Wrapping is a toggle (`wrap` / `defaultWrap`), off by default so a
+ *   body reads the way it was sent.
+ * - `language="json"` colors keys, strings, numbers, and keywords with a
+ *   built-in tokenizer — no highlighter library at runtime — on the
+ *   `--color-pho-code-*` tokens, which carry light and dark.
+ * - A body that isn't a string (an object) is pretty-printed as JSON.
+ */
+export type CodeBlockLanguage = "json" | "text";
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "title" | "children"> {
+    /** The text. An object is pretty-printed as JSON (two-space indent). */
+    code?: string | object | null;
+    /** `json` colors the text; `text` leaves it plain. @default "text" */
+    language?: CodeBlockLanguage;
+    /** The title row's words — "Request body", "Response". */
+    title?: ReactNode;
+    /** Past this many lines the panel folds. @default 30 */
+    maxLines?: number;
+    /** Wrap long lines (controlled). */
+    wrap?: boolean;
+    /** Wrap long lines at first (uncontrolled). @default false */
+    defaultWrap?: boolean;
+    onWrapChange?: (wrap: boolean) => void;
+    /** The copy control in the title row. @default true */
+    copy?: boolean;
+    /** What the panel says with no code. @default "Nothing to show." */
+    empty?: ReactNode;
+    /** More controls in the title row, before the built-in ones. */
+    actions?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function CodeBlock({ code, language, title, maxLines, wrap: wrapProp, defaultWrap, onWrapChange, copy, empty, actions, className, ...props }: CodeBlockProps): import("react").JSX.Element;
+export declare namespace CodeBlock {
+    var displayName: string;
+}

package/dist/src/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeBlock, type CodeBlockProps, type CodeBlockLanguage, } from './code-block';
+export { tokenizeJson, type JsonToken, type JsonTokenType, } from './tokenize-json';

package/dist/src/components/code-block/tokenize-json.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A tokenizer for JSON, and nothing else: keys, strings, numbers, the
+ * three keywords, and punctuation. Runs one line at a time (a JSON
+ * string never spans lines) so a panel can show its first N lines and
+ * stop. Text that isn't JSON comes back as it is, in plain tokens.
+ */
+export type JsonTokenType = "key" | "string" | "number" | "keyword" | "punctuation" | "plain";
+export interface JsonToken {
+    type: JsonTokenType;
+    text: string;
+}
+export declare function tokenizeJson(line: string): JsonToken[];

package/dist/src/components/combobox/combobox.d.ts

@@ -5,9 +5,31 @@ type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> &
     className?: string;
 };
 declare function InputGroup({ className, ...props }: StyledProps<typeof BaseCombobox.InputGroup>): import("react").JSX.Element;
-declare function Input({ className, ...props }: StyledProps<typeof BaseCombobox.Input>): import("react").JSX.Element;
+export type ComboboxInputVariant = "field" | "popup";
+declare function Input({ className, variant, ...props }: StyledProps<typeof BaseCombobox.Input> & {
+    /**
+     * `field` (default) is the boxed control a list filters under. `popup`
+     * is the search line at the top of the popup when a field `Trigger`
+     * stands in for the input: borderless, a hairline below, spanning the
+     * popup's width.
+     * @default "field"
+     */
+    variant?: ComboboxInputVariant;
+}): import("react").JSX.Element;
 declare function Clear({ className, ...props }: StyledProps<typeof BaseCombobox.Clear>): import("react").JSX.Element;
-declare function Trigger({ className, ...props }: StyledProps<typeof BaseCombobox.Trigger>): import("react").JSX.Element;
+export type ComboboxTriggerVariant = "icon" | "field";
+declare function Trigger({ className, variant, disabled, ...props }: StyledProps<typeof BaseCombobox.Trigger> & {
+    /**
+     * `icon` (default) is the small button beside the input in an
+     * `InputGroup`. `field` is the whole control: `Select`'s trigger chrome
+     * around a `Combobox.Value` and a `Combobox.Icon`, for a searchable
+     * select whose `Input` then lives inside the popup (`variant="popup"`).
+     * @default "icon"
+     */
+    variant?: ComboboxTriggerVariant;
+}): import("react").JSX.Element;
+/** The glyph at a field trigger's end, `IconSelector` as on `Select`. */
+declare function Icon({ className, ...props }: StyledProps<typeof BaseCombobox.Icon>): import("react").JSX.Element;
 declare function Positioner({ className, sideOffset, ...props }: StyledProps<typeof BaseCombobox.Positioner>): import("react").JSX.Element;
 declare function Popup({ className, ...props }: StyledProps<typeof BaseCombobox.Popup>): import("react").JSX.Element;
 declare function List({ className, ...props }: StyledProps<typeof BaseCombobox.List>): import("react").JSX.Element;
@@ -22,8 +44,11 @@ declare function ChipRemove({ className, ...props }: StyledProps<typeof BaseComb
  * Combobox built on Base UI `Combobox` — a text input that filters a list as
  * you type and commits to a value from it. Pass `items` to `Combobox.Root`;
  * `Combobox.List` takes a render function mapping each (filtered) item to a
- * `Combobox.Item`. Add `Combobox.Chips` for multi-select. For free-form text
- * with suggestions, use `Autocomplete`; for a small fixed set, use `Select`.
+ * `Combobox.Item`. Add `Combobox.Chips` for multi-select. For a searchable
+ * select, `Combobox.Trigger variant="field"` holds the `Value` and an
+ * `Icon`, and the `Input` (`variant="popup"`) moves inside the popup. For
+ * free-form text with suggestions, use `Autocomplete`; for a small fixed
+ * set, use `Select`.
  */
 export declare const Combobox: {
     Root: typeof BaseCombobox.Root;
@@ -31,6 +56,7 @@ export declare const Combobox: {
     InputGroup: typeof InputGroup;
     Input: typeof Input;
     Trigger: typeof Trigger;
+    Icon: typeof Icon;
     Clear: typeof Clear;
     Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AutocompletePortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Positioner: typeof Positioner;

package/dist/src/components/combobox/index.d.ts

@@ -1 +1 @@
-export { Combobox } from './combobox';
+export { Combobox, type ComboboxInputVariant, type ComboboxTriggerVariant, } from './combobox';

package/dist/src/components/copy-button/copy-button.d.ts

@@ -0,0 +1,49 @@
+import { ButtonHTMLAttributes, Ref } from 'react';
+/**
+ * Size axis — a square ghost control that sits inside a row or a panel
+ * header. `sm` is the default: a 28px target beside 13px mono text.
+ */
+export declare const COPY_BUTTON_SIZES: {
+    xs: {
+        classes: string;
+        description: string;
+    };
+    sm: {
+        classes: string;
+        description: string;
+    };
+    md: {
+        classes: string;
+        description: string;
+    };
+};
+export type CopyButtonSize = keyof typeof COPY_BUTTON_SIZES;
+interface CopyButtonBaseProps {
+    /** The text that goes to the clipboard. */
+    value: string;
+    /**
+     * What is being copied, for the accessible name — "request id",
+     * "API key". Read as `Copy {label}`, then `{label} copied`.
+     * @default "to clipboard"
+     */
+    label?: string;
+    /** Size variant. @default "sm" */
+    size?: CopyButtonSize;
+    /** Called after the clipboard write lands. */
+    onCopied?: (value: string) => void;
+    ref?: Ref<HTMLButtonElement>;
+}
+export interface CopyButtonProps extends CopyButtonBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CopyButtonBaseProps | "children"> {
+}
+/**
+ * Copy Button — the one copy affordance: a quiet icon button that writes
+ * `value` to the clipboard, swaps its glyph to a check for a moment, and
+ * says "Copied" to assistive tech through a polite live region. Ghost at
+ * rest so a mono value stays the loudest thing on its line; the wash and
+ * the ink lift on hover. Put it after the value it copies.
+ */
+export declare function CopyButton({ value, label, size, onCopied, className, onClick, ...props }: CopyButtonProps): import("react").JSX.Element;
+export declare namespace CopyButton {
+    var displayName: string;
+}
+export {};

package/dist/src/components/copy-button/index.d.ts

@@ -0,0 +1 @@
+export { CopyButton, COPY_BUTTON_SIZES, type CopyButtonProps, type CopyButtonSize, } from './copy-button';

package/dist/src/components/description-list/description-list.d.ts

@@ -0,0 +1,60 @@
+import { ComponentProps, ReactNode, Ref } from 'react';
+/**
+ * Description List — the facts about one record, label beside value:
+ * the status, the request id, the time, the ip, the api version, the
+ * idempotency key, the api key. A `<dl>` under the hood.
+ *
+ * Where `BasicPage.Row` is a 68px row built for a control on its right,
+ * these are dense lines of text: `inline` puts the label in a column
+ * beside the value, every label the same width (a subgrid), one line per
+ * fact; `stacked` puts the label above the value and flows the pairs
+ * into `columns`. A `mono` value wears the mono face with a copy
+ * control after it; a value that is not there says so in muted ink.
+ */
+export type DescriptionListLayout = "inline" | "stacked";
+export interface DescriptionListRootProps extends ComponentProps<"dl"> {
+    /**
+     * `inline` (default): label column beside the value column, one line
+     * per item. `stacked`: label above value, pairs flowing into `columns`.
+     */
+    layout?: DescriptionListLayout;
+    /** For `stacked`: pairs per row from `sm` up. @default 1 */
+    columns?: 1 | 2 | 3;
+    ref?: Ref<HTMLDListElement>;
+}
+declare function Root({ layout, columns, className, ...props }: DescriptionListRootProps): import("react").JSX.Element;
+export interface DescriptionListItemProps extends Omit<ComponentProps<"div">, "children" | "title"> {
+    /** The fact's name — "Request ID", "Idempotency key". */
+    label: ReactNode;
+    /** The fact. A string wears the item's type; a node is yours to style. */
+    value?: ReactNode;
+    /** Composed content instead of `value` — a `Badge`, a link. */
+    children?: ReactNode;
+    /** The value in the mono face — ids, keys, addresses. */
+    mono?: boolean;
+    /**
+     * A copy control after the value. `true` copies a string `value`;
+     * pass the text to copy when the value is composed.
+     */
+    copy?: boolean | string;
+    /** Marks the label `(Optional)` — a fact that may not be there. */
+    optional?: boolean;
+    /** What an absent value says. @default "Not set" */
+    empty?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Item({ label, value, children, mono, copy, optional, empty, className, ...props }: DescriptionListItemProps): import("react").JSX.Element;
+/**
+ * ```tsx
+ * <DescriptionList.Root>
+ *   <DescriptionList.Item label="Status"><Badge …/></DescriptionList.Item>
+ *   <DescriptionList.Item label="Request ID" value="pho_req_…" mono copy />
+ *   <DescriptionList.Item label="Idempotency key" optional mono copy />
+ * </DescriptionList.Root>
+ * ```
+ */
+export declare const DescriptionList: {
+    Root: typeof Root;
+    Item: typeof Item;
+};
+export {};

package/dist/src/components/description-list/index.d.ts

@@ -0,0 +1 @@
+export { DescriptionList, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListItemProps, } from './description-list';

package/dist/src/components/filter-bar/filter-bar.d.ts

@@ -0,0 +1,101 @@
+import { ComponentProps, ReactNode, Ref } from 'react';
+/**
+ * Filter Bar — the row that pins above a log list: a search field for an
+ * id, then one chip per filter. A chip with nothing chosen reads
+ * `+ Status`; with a value it reads `Status: Failed` and carries its own
+ * clear. Each chip opens a small popover: a keyboard-first list of
+ * options (with a search field past eight of them), or presets and a
+ * from / to pair for a date range.
+ *
+ * Design notes:
+ * - Fully controlled. The page owns `filters` and `search` and hands
+ *   them back changed; the bar keeps no state but which popover is open.
+ *   That keeps the query in one place (the URL, a store) and lets the
+ *   list refetch from it.
+ * - Chips are real buttons (the trigger, and the clear beside it), so
+ *   the bar is one tab stop per control and Escape closes a popover
+ *   back onto its chip.
+ * - No scroll container of its own: chips wrap. `sticky` pins it to the
+ *   top of the nearest scroll pane on the surface it sits on.
+ */
+export interface FilterOption {
+    value: string;
+    label: string;
+}
+interface FilterDefinitionBase {
+    /** The key in `filters` this chip reads and writes. */
+    key: string;
+    /** The chip's word — "Status", "Event type". Sentence case. */
+    label: string;
+}
+export interface SelectFilterDefinition extends FilterDefinitionBase {
+    type?: "select";
+    options: readonly FilterOption[];
+    /** Several values at once (`string[]`); one at a time by default. */
+    multiple?: boolean;
+    /**
+     * A search field above the options. On by default past eight options,
+     * off below; say so to override.
+     */
+    searchable?: boolean;
+    /** The search field's placeholder. @default "Search" */
+    searchPlaceholder?: string;
+}
+/** A relative preset for a date-range filter — "Last 7 days" is 168 hours. */
+export interface DateRangePreset {
+    label: string;
+    hours: number;
+}
+export interface DateRangeFilterDefinition extends FilterDefinitionBase {
+    type: "date-range";
+    /** The relative presets listed above the from / to pair. */
+    presets?: readonly DateRangePreset[];
+}
+export type FilterDefinition = SelectFilterDefinition | DateRangeFilterDefinition;
+/**
+ * A date-range value. A preset stores an absolute ISO timestamp in `from`
+ * (computed when chosen) and its label in `preset`; the from / to pair
+ * stores plain `YYYY-MM-DD` dates. Either side may be open (`null`).
+ */
+export interface DateRangeValue {
+    from: string | null;
+    to: string | null;
+    preset?: string;
+}
+export type FilterValue = string | string[] | DateRangeValue;
+/** The page's filter state — one entry per definition key that is set. */
+export type FilterValues = Record<string, FilterValue | undefined>;
+/** The relative presets a date-range chip lists when given none. */
+export declare const FILTER_DATE_PRESETS: readonly DateRangePreset[];
+/** Whether a filter value counts as set — an empty string or list does not. */
+export declare function isFilterSet(value: FilterValue | undefined): boolean;
+/** The words a set chip shows after its label. */
+export declare function formatFilterValue(definition: FilterDefinition, value: FilterValue | undefined): string;
+export interface FilterBarProps extends Omit<ComponentProps<"div">, "children"> {
+    /** One chip per definition, in this order. */
+    definitions: readonly FilterDefinition[];
+    /** The values, keyed by definition key. Absent or empty means unset. */
+    filters: FilterValues;
+    /** The whole map, changed — set, cleared, or cleared all. */
+    onFiltersChange: (next: FilterValues) => void;
+    /** The search field's text. The field renders only with `onSearchChange`. */
+    search?: string;
+    onSearchChange?: (value: string) => void;
+    /** A teaching phrase — "Find an event by id". @default "Search" */
+    searchPlaceholder?: string;
+    /** The field's accessible name when the placeholder is too short to be one. */
+    searchLabel?: string;
+    /**
+     * Pin the bar to the top of the nearest scroll pane. It paints the
+     * surface it sits on (`--pho-surface`) so rows scroll under it.
+     */
+    sticky?: boolean;
+    /** Controls after the chips — a range picker, an export button. */
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function FilterBar({ definitions, filters, onFiltersChange, search, onSearchChange, searchPlaceholder, searchLabel, sticky, className, children, ...props }: FilterBarProps): import("react").JSX.Element;
+export declare namespace FilterBar {
+    var displayName: string;
+}
+export {};

package/dist/src/components/filter-bar/index.d.ts

@@ -0,0 +1 @@
+export { FilterBar, FILTER_DATE_PRESETS, isFilterSet, formatFilterValue, type FilterBarProps, type FilterDefinition, type SelectFilterDefinition, type DateRangeFilterDefinition, type DateRangePreset, type DateRangeValue, type FilterOption, type FilterValue, type FilterValues, } from './filter-bar';

package/dist/src/components/log-list/index.d.ts

@@ -0,0 +1 @@
+export { LogList, logStatusColor, logStatusLabel, truncateMiddle, type LogListRootProps, type LogListRowProps, type LogListEmptyProps, type LogListLoadMoreProps, type LogStatusProps, } from './log-list';

package/dist/src/components/log-list/log-list.d.ts

@@ -0,0 +1,136 @@
+import { ComponentProps, MouseEvent, ReactNode, Ref } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { BadgeColor, BadgeSize } from '../badge';
+/**
+ * Keep the start and the end of an id and fold the middle into an
+ * ellipsis — `pho_req_01m04axjqrfzxv4xjet40a84gb` reads
+ * `pho_req_01m0…a84gb`. Ids that fit are returned whole.
+ */
+export declare function truncateMiddle(value: string, head?: number, tail?: number): string;
+/**
+ * The `Badge` color for a log status: an HTTP status code (2xx success,
+ * 3xx gray, 4xx warning, 5xx error) or a word (`delivered` / `failed` /
+ * `pending`). Anything else is gray.
+ */
+export declare function logStatusColor(status: number | string): BadgeColor;
+/** A status word as a label: `timed_out` reads `Timed out`. */
+export declare function logStatusLabel(status: number | string): string;
+export interface LogStatusProps extends Omit<ComponentProps<"span">, "children" | "color"> {
+    /** An HTTP status code or a status word. */
+    value: number | string;
+    /** Override the derived word. */
+    label?: ReactNode;
+    /** Badge size. @default "sm" */
+    size?: BadgeSize;
+}
+/** The status slot — a low-contrast `Badge` colored by `logStatusColor`. */
+declare function Status({ value, label, size, className, ...props }: LogStatusProps): import("react").JSX.Element;
+/** The method slot — `POST`, `GET` as a quiet mono chip. */
+declare function Method({ className, ...props }: ComponentProps<"span"> & {
+    ref?: Ref<HTMLSpanElement>;
+}): import("react").JSX.Element;
+export interface LogListRowProps extends Omit<ComponentProps<"div">, "children" | "title" | "onClick" | "id"> {
+    /** The record's id — mono, middle-truncated, copied on click. */
+    id?: string;
+    /** The status slot — usually `LogList.Status`. */
+    status?: ReactNode;
+    /** The method — `POST`, `GET`; rendered in `LogList.Method`. */
+    method?: string;
+    /** What happened — the route, the event type, the message. */
+    label: ReactNode;
+    /** The label in mono — for a route or an event type. */
+    code?: boolean;
+    /**
+     * The line under the label, with real content: who received what from
+     * whom, the destination that answered. A sentence, with its period.
+     */
+    description?: ReactNode;
+    /** Trailing: how long it took — "59 ms". */
+    duration?: ReactNode;
+    /** Trailing: when — "2 min ago". */
+    time?: ReactNode;
+    /** Trailing content before the duration and time. */
+    children?: ReactNode;
+    /** The row is a link to its page, through the host's `LinkProvider`. */
+    href?: string;
+    /** The row is a button. */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Replace the row's link element — a router's `Link`, the way Base UI
+     * components take `render`. The row's classes and handlers merge in.
+     */
+    render?: useRender.RenderProp;
+    /** The row whose page is open beside the list — it keeps the wash. */
+    current?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Row({ id, status, method, label, code, description, duration, time, children, href, onClick, render, current, className, ...props }: LogListRowProps): import("react").JSX.Element;
+export interface LogListEmptyProps extends Omit<ComponentProps<"div">, "title" | "children"> {
+    /** One short line naming the state. @default "Nothing here yet." */
+    title?: ReactNode;
+    /** What fills it, or why it is empty. */
+    description?: ReactNode;
+    /** An action, when there is one. */
+    children?: ReactNode;
+}
+/** The list with no rows — `StatusView` at card size. */
+declare function Empty({ title, description, children, className, ...props }: LogListEmptyProps): import("react").JSX.Element;
+/** Bones in the rows' place while the first page is on its way. */
+declare function Loading({ rows }: {
+    rows?: number;
+}): import("react").JSX.Element;
+export interface LogListLoadMoreProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Asked for as the sentinel scrolls into view, and on the button. */
+    onLoadMore: () => void;
+    /** The next page is on its way — the sentinel shows a spinner and waits. */
+    loading?: boolean;
+    /** Nothing left to load — renders nothing. @default true */
+    hasMore?: boolean;
+    /** How far ahead of the viewport to ask. @default "200px" */
+    rootMargin?: string;
+    /** The button's words. @default "Load more" */
+    label?: ReactNode;
+}
+/**
+ * The sentinel at the end of the list. An `IntersectionObserver` asks for
+ * the next page as it comes into view (`rootMargin` ahead of it); while
+ * `loading` it shows a spinner and asks for nothing. The button is the
+ * same request for keyboards and for a browser without the observer.
+ * SSR-safe: the observer is created in an effect.
+ */
+declare function LoadMore({ onLoadMore, loading, hasMore, rootMargin, label, className, ...props }: LogListLoadMoreProps): import("react").JSX.Element | null;
+export interface LogListRootProps extends ComponentProps<"div"> {
+    ref?: Ref<HTMLDivElement>;
+}
+/** The card the rows stack in. Mark it `aria-busy` while bones show. */
+declare function Root({ className, ...props }: LogListRootProps): import("react").JSX.Element;
+/**
+ * Log List — a card of one-line log rows.
+ *
+ * ```tsx
+ * <LogList.Root>
+ *   <LogList.Row
+ *     id="pho_req_01m04axjqrfzxv4xjet40a84gb"
+ *     status={<LogList.Status value={200} />}
+ *     method="POST"
+ *     code
+ *     label="/v1/messages"
+ *     description="+1 332 259 3374 received a message from +1 332 222 1111."
+ *     duration="59 ms"
+ *     time="2 min ago"
+ *     href="/requests/pho_req_01m04axjqrfzxv4xjet40a84gb"
+ *   />
+ *   <LogList.LoadMore onLoadMore={fetchNextPage} loading={isFetching} hasMore={hasNextPage} />
+ * </LogList.Root>
+ * ```
+ */
+export declare const LogList: {
+    Root: typeof Root;
+    Row: typeof Row;
+    Status: typeof Status;
+    Method: typeof Method;
+    Empty: typeof Empty;
+    Loading: typeof Loading;
+    LoadMore: typeof LoadMore;
+};
+export {};

package/dist/src/components/trace/index.d.ts

@@ -0,0 +1,2 @@
+export { Trace, type TraceRootProps, type TraceLogsProps, type TraceLog, type TraceLogLevel, } from './trace';
+export { layoutTrace, niceStep, formatDuration, formatTick, type TraceSpan, type TraceRow, type TraceLayout, } from './layout';

package/dist/src/components/trace/layout.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The waterfall's arithmetic, apart from the drawing: spans in, rows out
+ * — each with its depth and its bar's place along the trace's length —
+ * plus the tick marks for the time axis.
+ */
+export interface TraceSpan {
+    id: string;
+    /** The span this one runs inside. Absent (or unknown) means a root. */
+    parentId?: string | null;
+    name: string;
+    /** Start, in ms, on any shared clock — only the differences matter. */
+    startMs: number;
+    durationMs: number;
+    status?: "ok" | "error" | "unset";
+    /** A hint after the name — the service, the host. */
+    service?: string;
+    /** A hint after the service — client, server, db. */
+    kind?: string;
+}
+export interface TraceRow {
+    span: TraceSpan;
+    depth: number;
+    /** The bar's start, as a fraction of the trace's length. */
+    left: number;
+    /** The bar's length, as a fraction of the trace's length. */
+    width: number;
+    children: string[];
+    /** Every span beneath this one, at any depth. */
+    descendants: number;
+}
+export interface TraceLayout {
+    /** Every span, root first, each parent before its children. */
+    rows: TraceRow[];
+    startMs: number;
+    endMs: number;
+    durationMs: number;
+    /** Tick marks along the axis, in ms from the start. */
+    ticks: number[];
+}
+/** A tick step from the 1 / 2 / 5 ladder so the axis has at most `max` ticks. */
+export declare function niceStep(durationMs: number, max?: number): number;
+export declare function layoutTrace(spans: readonly TraceSpan[]): TraceLayout;
+/** "0.42 ms", "59.2 ms", "1.25 s" — the precision follows the size. */
+export declare function formatDuration(ms: number): string;
+/** An axis tick's label: whole numbers where the step allows, "2 s" past a second. */
+export declare function formatTick(ms: number): string;
+/** A fraction as a CSS percentage, rounded so floats never leak into styles. */
+export declare function percent(fraction: number): string;

package/dist/src/components/trace/trace.d.ts

@@ -0,0 +1,53 @@
+import { ComponentProps, ReactNode, Ref } from 'react';
+import { TraceSpan } from './layout';
+export interface TraceRootProps extends Omit<ComponentProps<"div">, "children" | "onSelect" | "title"> {
+    spans: readonly TraceSpan[];
+    /** The span whose details are open — it keeps the wash. */
+    selectedId?: string | null;
+    /** Rows select on click when given. */
+    onSelect?: (id: string) => void;
+    /** Spans folded at first (uncontrolled). */
+    defaultCollapsed?: readonly string[];
+    /** Spans folded (controlled). */
+    collapsed?: readonly string[];
+    onCollapsedChange?: (ids: string[]) => void;
+    /** A title row above the axis — "Waterfall". Omit for none. */
+    title?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Root({ spans, selectedId, onSelect, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, title, className, ...props }: TraceRootProps): import("react").JSX.Element;
+export type TraceLogLevel = "debug" | "info" | "warn" | "error";
+export interface TraceLog {
+    id?: string;
+    /** When, in ms after the trace's start. */
+    offsetMs: number;
+    level?: TraceLogLevel;
+    message: string;
+    /** The span it was written in, when known — its name shows after. */
+    spanId?: string;
+}
+export interface TraceLogsProps extends Omit<ComponentProps<"section">, "children" | "title"> {
+    logs?: readonly TraceLog[] | null;
+    /** The spans, to name the one each line was written in. */
+    spans?: readonly TraceSpan[];
+    /** @default "Logs" */
+    title?: ReactNode;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * The log lines that belong to the trace, each at its offset from the
+ * start, in the mono face. Renders nothing when there are none — a
+ * trace with no logs shows no empty block.
+ */
+declare function Logs({ logs, spans, title, className, ...props }: TraceLogsProps): import("react").JSX.Element | null;
+/**
+ * ```tsx
+ * <Trace.Root spans={spans} selectedId={id} onSelect={setId} title="Waterfall" />
+ * <Trace.Logs logs={logs} spans={spans} />
+ * ```
+ */
+export declare const Trace: {
+    Root: typeof Root;
+    Logs: typeof Logs;
+};
+export {};

package/dist/src/index.d.ts

@@ -20,3 +20,9 @@ export * from './components/chart';
 export * from './components/stat';
 export * from './components/bar-chart';
 export * from './components/line-chart';
+export * from './components/copy-button';
+export * from './components/filter-bar';
+export * from './components/log-list';
+export * from './components/description-list';
+export * from './components/code-block';
+export * from './components/trace';