@50arms/ui 0.0.0-stage → 35.2.0

package/dist/types/components/chat/types.d.ts

@@ -0,0 +1,165 @@
+import type { ReactNode } from "react";
+export type MessageRole = "user" | "assistant" | "system";
+/** Prose. Rendered through the streaming-aware markdown renderer. */
+export interface TextPart {
+    type: "text";
+    text: string;
+}
+export interface CodePart {
+    type: "code";
+    code: string;
+    language?: string;
+    filename?: string;
+}
+/**
+ * Model reasoning, shown collapsed.
+ *
+ * A separate type rather than styled text because it is a different KIND of
+ * content: usually hidden, summarised when collapsed, and never the answer.
+ */
+export interface ReasoningPart {
+    type: "reasoning";
+    text: string;
+    /** Shown on the collapsed row — "Thought for 8s". */
+    label?: string;
+    streaming?: boolean;
+}
+export type ToolStatus = "running" | "success" | "error";
+/**
+ * A tool invocation, collapsed to one line by default.
+ *
+ * Collapsed is the DEFAULT because the transcript is a conversation, not a
+ * log: fifteen lines of tool output between two sentences buries both. The
+ * summary carries enough to decide whether to open it.
+ */
+export interface ToolPart {
+    type: "tool";
+    name: string;
+    /** One line: "Ran 3 commands, used a tool". */
+    summary: string;
+    status: ToolStatus;
+    detail?: ReactNode;
+    /** Diff counts, rendered as +N −N beside the summary. */
+    stats?: {
+        added?: number;
+        removed?: number;
+    };
+}
+export interface FilePart {
+    type: "file";
+    file: ChatFile;
+}
+/**
+ * An application component, addressed BY NAME.
+ *
+ * This is the whole reason the registry exists: a message can carry a live
+ * approval form, a chart, a card with working buttons — real UI wired to the
+ * host application, not a picture of it.
+ *
+ * The name is a string and the props are plain data, so a message stays
+ * serialisable. Putting a component reference in the part would make a
+ * transcript impossible to persist, replay, or send over a wire — and a chat
+ * you cannot reload is not a chat.
+ */
+export interface ComponentPart {
+    type: "component";
+    /** Key into `ChatComponents`. */
+    component: string;
+    props?: Record<string, unknown>;
+}
+export type MessagePart = TextPart | CodePart | ReasoningPart | ToolPart | FilePart | ComponentPart;
+export interface ChatFile {
+    id: string;
+    /** What the file is called on its tile. */
+    name: string;
+    /**
+     * The file's own name, when `name` is a label for it (a markdown reference such as "PDF 2"): the strip tile's type badge
+     * is read from its extension and a download is saved under it. Omitted: `name` is the file's name.
+     */
+    fileName?: string;
+    /** Bytes. Omitted while an upload is still in flight and the size is unknown. */
+    size?: number;
+    mimeType?: string;
+    /** Object URL or remote href. Absent means "not fetchable yet". */
+    url?: string;
+    /** Image thumbnail, when one exists. */
+    thumbnailUrl?: string;
+    status?: "uploading" | "ready" | "error";
+    /** 0–100, while uploading. */
+    progress?: number;
+    error?: string;
+}
+export interface ChatMessage {
+    id: string;
+    role: MessageRole;
+    parts: MessagePart[];
+    createdAt?: Date | string;
+    /** Files attached by the author, shown above the body. */
+    attachments?: ChatFile[];
+    /** True while this message is still arriving. */
+    streaming?: boolean;
+    /** Shown in place of the body — a failed turn is still part of the record. */
+    error?: string;
+    /**
+     * Who wrote it. `icon` (a registered icon name) replaces the initials when there is no `avatarUrl` (or it fails to load), for an author who
+     * is not a person: an agent shows a robot, not the first letter of its name.
+     */
+    author?: {
+        name?: string;
+        avatarUrl?: string;
+        icon?: string;
+    };
+}
+/**
+ * What a renderer is handed alongside its part.
+ *
+ * `app` is the answer to "how does a custom component reach application
+ * state". The registry is built ONCE, at module scope, with no closures over
+ * hooks or props — and every renderer receives the live application handle
+ * here, at call time. Closing over app state when building the registry would
+ * work exactly until someone defines it outside the component that owns the
+ * state, which is precisely where a registry is supposed to live.
+ */
+export interface RenderContext<TApp = unknown> {
+    message: ChatMessage;
+    /** True while THIS message is still streaming — renderers use it to hold
+        back anything that would thrash, and to show live affordances. */
+    streaming: boolean;
+    /** Whatever the application passed to `<Chat appContext>`. */
+    app: TApp;
+}
+export type PartRenderer<P extends MessagePart = MessagePart, TApp = unknown> = (part: P, context: RenderContext<TApp>) => ReactNode;
+/**
+ * Overrides for the built-in part renderers.
+ *
+ * Partial on purpose: an application replacing the code renderer should not
+ * have to re-implement the other five.
+ */
+export type PartRenderers<TApp = unknown> = {
+    text?: PartRenderer<TextPart, TApp>;
+    code?: PartRenderer<CodePart, TApp>;
+    reasoning?: PartRenderer<ReasoningPart, TApp>;
+    tool?: PartRenderer<ToolPart, TApp>;
+    file?: PartRenderer<FilePart, TApp>;
+};
+export type ChatComponentRenderer<TApp = unknown> = (props: Record<string, unknown>, context: RenderContext<TApp>) => ReactNode;
+/** Named application components a message may address. */
+export type ChatComponents<TApp = unknown> = Record<string, ChatComponentRenderer<TApp>>;
+/**
+ * An unrenderable part is shown, never swallowed.
+ *
+ * Two failure modes are possible and both are silent by default: a part whose
+ * `type` no renderer handles, and a `component` part naming something the
+ * registry does not contain. Dropping either produces a message that is
+ * missing content with nothing anywhere to say so — the same class of failure
+ * as the icon registry that optimised itself away and rendered nothing.
+ *
+ * Throwing is not the alternative. An uncaught throw in render unmounts the
+ * React tree, so one malformed message would blank the entire application.
+ * The part renders as a visible, labelled placeholder and logs once.
+ */
+export interface UnknownPartInfo {
+    reason: "unknown-type" | "missing-component";
+    /** The `type`, or the component name that was not found. */
+    name: string;
+}

package/dist/types/components/checklist/StatusChecklist.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import type { StatusOption } from "../StatusSelect";
+import type { ChecklistItem, ChecklistState, ChecklistTally } from "./types";
+export type { ChecklistItem, ChecklistState, ChecklistTally };
+export interface StatusChecklistProps<Key extends string = string> {
+    /**
+     * What this list IS — "Evidence for the March filing".
+     *
+     * Names the group, so somebody landing on it by keyboard learns what the
+     * counts are counting. Required for the same reason `KanbanBoard.label` is.
+     */
+    label: string;
+    /** The consumer's vocabulary, in the order the summary and groups read. */
+    states: readonly StatusOption<Key>[];
+    items: readonly ChecklistItem<Key>[];
+    /**
+     * `state` groups the rows under their state's heading; `given` renders them
+     * in the order supplied.
+     *
+     * GROUPED IS THE DEFAULT, and that is the opposite of what a checklist
+     * usually wants. A checklist you work down top to bottom should stay in its
+     * given order — but this control's stated job is to make the shape of the gap
+     * legible, and an interleaved list makes the reader do the sorting in their
+     * head while the summary above already claims to have done it for them.
+     * `given` is there for the case where the order is itself meaningful — a
+     * sequence, a priority, a filing order — because then regrouping destroys
+     * information the consumer put in deliberately.
+     */
+    order?: "state" | "given";
+    /** Shown when `items` is empty (absent means the provider's own words). `EmptyState` supplies the shape. */
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+    emptyAction?: ReactNode;
+    emptyIcon?: ReactNode;
+    className?: string;
+}
+export declare function StatusChecklist<Key extends string = string>({ label, states, items, order, emptyTitle, emptyDescription, emptyAction, emptyIcon, className, }: StatusChecklistProps<Key>): import("react").JSX.Element;

package/dist/types/components/checklist/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChecklistItem, ChecklistState, ChecklistTally } from "./types";
+export { tallyChecklist } from "./tally";
+export { StatusChecklist, type StatusChecklistProps } from "./StatusChecklist";

package/dist/types/components/checklist/tally.d.ts

@@ -0,0 +1,19 @@
+import type { StatusOption } from "../StatusSelect";
+import type { ChecklistItem, ChecklistTally } from "./types";
+/**
+ * Split `items` across the declared `states`, in the order the states were
+ * given.
+ *
+ * Every state appears in the result, INCLUDING EMPTY ONES. A zero is
+ * information — "nothing is blocking" is the single most useful thing this
+ * control ever says — and a chip that vanishes at zero is invisible at exactly
+ * the moment its emptiness is the news, while also making the summary row
+ * change width every time an item moves. The BODY is the other way round: see
+ * `StatusChecklist`.
+ *
+ * Throws rather than tolerating: an unknown state key, a duplicate state, a
+ * duplicate item id, or no states at all. Each of those renders as something
+ * plausible if allowed through — an item silently dropped from a list whose
+ * whole purpose is to be exhaustive is the worst failure this component has.
+ */
+export declare function tallyChecklist<Key extends string>(states: readonly StatusOption<Key>[], items: readonly ChecklistItem<Key>[]): ChecklistTally<Key>[];

package/dist/types/components/checklist/types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { StatusOption } from "../StatusSelect";
+export type ChecklistState<Key extends string = string> = StatusOption<Key>;
+export interface ChecklistItem<Key extends string = string> {
+    id: string;
+    /** What the item IS. The row's own text — never replaced by an aria-label. */
+    label: ReactNode;
+    /** Must be the `value` of one of the declared states. An unknown key throws. */
+    state: Key;
+    /** A second line: who it is with, when it was asked for, why it is missing. */
+    detail?: ReactNode;
+    /**
+     * A control for this row — "Request it", "Open", "Mark received".
+     *
+     * A slot rather than a `{label, onClick}` prop, for the same reason
+     * `RecordCard.badges` is one: whether the action is a button, a link, a menu
+     * or a spinner belongs to the surface, and every shape this prop could grow
+     * to cover would be a library release for a decision the consumer had
+     * already made.
+     */
+    action?: ReactNode;
+}
+/** One state, its option, and everything in it — in the declared order. */
+export interface ChecklistTally<Key extends string = string> {
+    option: StatusOption<Key>;
+    count: number;
+    items: ChecklistItem<Key>[];
+}

package/dist/types/components/code-editor/context.d.ts

@@ -0,0 +1,32 @@
+/** How the content is presented. `split` is source and preview side by side. */
+export type CodeEditorView = "source" | "rendered" | "split";
+export interface CodeEditorContextValue {
+    /** The current text — the source of truth for copying and for the preview. */
+    value: string;
+    /** Language name as given, before registry resolution. Null when unset. */
+    language: string | null;
+    /** Caption for the toolbar, usually a filename. */
+    filename?: string;
+    /** True when there is no textarea and the surface is a viewer. */
+    readOnly: boolean;
+    /** Soft wrap on. */
+    wrap: boolean;
+    setWrap: (next: boolean) => void;
+    /** Current presentation. */
+    view: CodeEditorView;
+    setView: (next: CodeEditorView) => void;
+    /**
+     * The views THIS instance can offer. One entry means there is nothing to
+     * switch between, so the switch does not render — the configuration is the
+     * switch, not a `showViewSwitch` prop.
+     */
+    views: readonly CodeEditorView[];
+    /** Copies `value` to the clipboard. */
+    copy: () => void;
+    /** True for a moment after a successful copy. */
+    copied: boolean;
+    /** Lines in `value`, for the gutter and for the expand affordance's label. */
+    lineCount: number;
+}
+export declare const CodeEditorProvider: import("react").Provider<CodeEditorContextValue | null>;
+export declare function useCodeEditor(component: string): CodeEditorContextValue;

package/dist/types/components/code-editor/editing.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Writes `text` over `[start, end)` and leaves the caret at `caret`.
+ *
+ * Returns true when the browser's history recorded it — false when this fell
+ * through to the direct-write path and undo will not reach past this edit.
+ */
+export declare function applyEdit(el: HTMLTextAreaElement, start: number, end: number, text: string, caret?: readonly [number, number]): boolean;
+/** Offset of the first character of the line containing `at`. */
+export declare function lineStart(value: string, at: number): number;
+/** Offset of the newline ending the line containing `at`, or the length. */
+export declare function lineEnd(value: string, at: number): number;
+/**
+ * Tab / Shift+Tab.
+ *
+ * A selection that spans a line break indents or dedents the whole BLOCK —
+ * including when the selection is only partial on its first and last lines,
+ * because a person who dragged across four lines meant those four lines.
+ */
+export declare function indentSelection(el: HTMLTextAreaElement, indent: string, dedent: boolean): void;
+/**
+ * Enter. Copies the current line's indentation, adds one unit after an opener,
+ * and pushes a closer that was sitting right after the caret onto its own line.
+ *
+ * That last case is the only "clever" one and it earns its place: typing `{`
+ * then Enter is how a block is opened, and without it the caret lands on the
+ * same line as the `}` every single time.
+ */
+export declare function autoIndentNewline(el: HTMLTextAreaElement, indent: string): void;
+/**
+ * Bracket and quote handling for one printable character. Returns true when it
+ * consumed the key, false to let the browser type it normally.
+ *
+ * DELIBERATELY SMALL. Auto-pairing that tries to be smart is the feature people
+ * turn off: the rules below never delete anything, never act inside a word, and
+ * never insert a partner the caret is not immediately in front of.
+ */
+export declare function handleAutoPair(el: HTMLTextAreaElement, key: string): boolean;
+/** Backspace between an auto-inserted pair removes both halves. */
+export declare function handlePairBackspace(el: HTMLTextAreaElement): boolean;

package/dist/types/components/code-editor/highlight.d.ts

@@ -0,0 +1,20 @@
+import type { Token } from "../../lib/syntax";
+/** Tokens for `source`, recomputed only when the text or the language moves. */
+export declare function useTokens(source: string, language: string | null | undefined): Token[];
+export declare const CodeEditorTokens: import("react").NamedExoticComponent<{
+    source: string;
+    tokens: Token[];
+}>;
+/**
+ * The line-number column.
+ *
+ * NOT RENDERED WHILE SOFT WRAP IS ON, and that is deliberate rather than
+ * unfinished. A wrapped line occupies several visual rows, so a fixed column of
+ * numbers drifts one row further out of true for every line that wraps — and a
+ * number printed beside the wrong line is worse than no number, because it is
+ * believed. `CodeEditor` decides; this component just draws.
+ */
+export declare const CodeEditorGutterNumbers: import("react").NamedExoticComponent<{
+    count: number;
+    from: number;
+}>;

package/dist/types/components/code-editor/recipe.d.ts

@@ -0,0 +1,109 @@
+export declare const code: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            layers?: import("tailwind-variants").ClassValue;
+            textarea?: import("tailwind-variants").ClassValue;
+            pre?: import("tailwind-variants").ClassValue;
+            caption?: import("tailwind-variants").ClassValue;
+            toolbar?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            rendered?: import("tailwind-variants").ClassValue;
+            gutter?: import("tailwind-variants").ClassValue;
+            fade?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            scroller?: import("tailwind-variants").ClassValue;
+            expand?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            layers?: import("tailwind-variants").ClassValue;
+            textarea?: import("tailwind-variants").ClassValue;
+            pre?: import("tailwind-variants").ClassValue;
+            caption?: import("tailwind-variants").ClassValue;
+            toolbar?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            rendered?: import("tailwind-variants").ClassValue;
+            gutter?: import("tailwind-variants").ClassValue;
+            fade?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            scroller?: import("tailwind-variants").ClassValue;
+            expand?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    toolbar: string;
+    caption: string;
+    control: string[];
+    body: string;
+    scroller: string[];
+    layers: string;
+    gutter: string;
+    pre: string;
+    textarea: string[];
+    rendered: string;
+    footer: string;
+    hint: string;
+    expand: string[];
+    fade: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            layers?: import("tailwind-variants").ClassValue;
+            textarea?: import("tailwind-variants").ClassValue;
+            pre?: import("tailwind-variants").ClassValue;
+            caption?: import("tailwind-variants").ClassValue;
+            toolbar?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            hint?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            rendered?: import("tailwind-variants").ClassValue;
+            gutter?: import("tailwind-variants").ClassValue;
+            fade?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+            scroller?: import("tailwind-variants").ClassValue;
+            expand?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    toolbar: string;
+    caption: string;
+    control: string[];
+    body: string;
+    scroller: string[];
+    layers: string;
+    gutter: string;
+    pre: string;
+    textarea: string[];
+    rendered: string;
+    footer: string;
+    hint: string;
+    expand: string[];
+    fade: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string[];
+    toolbar: string;
+    caption: string;
+    control: string[];
+    body: string;
+    scroller: string[];
+    layers: string;
+    gutter: string;
+    pre: string;
+    textarea: string[];
+    rendered: string;
+    footer: string;
+    hint: string;
+    expand: string[];
+    fade: string;
+}>>;

package/dist/types/components/date-timeline/DateTimeline.d.ts

@@ -0,0 +1,99 @@
+import { type ReactNode } from "react";
+import type { IconStackTone } from "../IconStack";
+export interface DateTimelineMarker {
+    id: string;
+    date: Date;
+    /** Shown as the tag in the date header and in the line's accessible name, with its date. */
+    label: string;
+    /** Any CSS color, as Badge's `color` takes: the line, the tag's border and its swatch are drawn in it; the label is always the theme's text on an opaque surface, so it is legible in both themes whatever the color. The accent tone when omitted. */
+    color?: string;
+    /** The marker's tag is a drag handle (and takes the arrow keys); needs the timeline's `onMarkerChange`. */
+    editable?: boolean;
+    /**
+     * A save is in flight for this marker (DEC-111): its handle spins and cannot be dragged, and while any marker is pending every
+     * other handle is disabled until the answer is handled. Only meaningful on an `editable` marker.
+     */
+    pending?: boolean;
+    /**
+     * The long-form date shown after the label in the marker's tooltip (for example "Wed, Nov 4, 2026"). The component formats the marker's
+     * date in the locale when omitted; pass it when the caller has its own formatting for the date.
+     */
+    dateLabel?: string;
+    /**
+     * The marker's whole tooltip text (DXUI-73), shown exactly as given in place of `<label>, <date>`. Pass it when the label already
+     * holds part of what the tooltip should say (a short date), so the date is not repeated. `dateLabel` is ignored when this is set.
+     */
+    tooltip?: string;
+}
+/** Where a marker's label goes: a tag in the date header (the default) or a flag in its own band above the header (DXUI-68). */
+export type DateTimelineMarkerPlacement = "header" | "band";
+/** A marker's line: 1px solid (the default) or 2px dashed, six pixels of color then four of gap (the approved design, DX-6451). */
+export type DateTimelineMarkerLineStyle = "solid" | "dashed";
+export type DateTimelineTone = IconStackTone;
+export interface DateTimelineItem {
+    id: string;
+    label: string;
+    start: Date;
+    /** Must not be before `start`. */
+    end: Date;
+    tone?: DateTimelineTone;
+    /** 0..1 of the bar filled. */
+    progress?: number;
+    /** A small chip drawn at the right of the bar's label. Static content only: the bar is itself a button. */
+    meta?: ReactNode;
+    /** A second end instant (a plan's planned end), drawn as a marker on the row apart from the bar's end; both dates are in the bar's name and tooltip. */
+    plannedEnd?: Date;
+    /** The bar can be dragged and moved with the keyboard; needs the timeline's `onItemChange`. */
+    editable?: boolean;
+}
+/** An edited item's new dates, to the day: the time of day each end had is kept. */
+export type DateTimelineChange = (id: string, start: Date, end: Date) => void;
+export interface DateTimelineProps {
+    items: readonly DateTimelineItem[];
+    /**
+     * The scale, in pixels per calendar day, from 1 to 120 (DXUI-61); controlled, like a value. The axis ticks by day, week, month or
+     * quarter depending on it. Hold it in state and set it from `onPxPerDayChange`; `DEFAULT_PX_PER_DAY` (12) is a good start. A value
+     * outside the range throws.
+     */
+    pxPerDay: number;
+    /** Called with the new scale when the person zooms: Ctrl (or Cmd) + wheel or pinch over the timeline, Ctrl + plus / minus / 0 inside it, or the slider. */
+    onPxPerDayChange: (pxPerDay: number) => void;
+    onItemActivate: (id: string) => void;
+    /** Called once, on release (or per key press), with the item id and its new start and end. Required when any item is `editable`. */
+    onItemChange?: DateTimelineChange;
+    /** The instant the today line marks; the clock when omitted. Pass a fixed one in tests and demos. */
+    today?: Date;
+    /**
+     * Named dates drawn like the today line (DXUI-64): a full-height line under the bars and a tag with the label in the date
+     * header, in the accent tone instead of today's red. They widen the axis, so a marker outside every bar is still shown.
+     * Tags that would overlap, on the same day or close, stack in rows.
+     */
+    markers?: readonly DateTimelineMarker[];
+    /**
+     * Called with a marker's id and its label's element when the label is clicked or activated with Enter or Space (DXUI-69). The element
+     * lets the caller anchor a popover to it (DXUI-70). Every marker's label then becomes a button, so the caller can open its own editor.
+     * A drag of an `editable` marker's handle never also activates it.
+     */
+    onMarkerActivate?: (id: string, anchorEl: HTMLElement) => void;
+    /** Called once, on release (or per key press), with an `editable` marker's id and its new date, to the day (its time of day kept). Required when any marker is `editable`. */
+    onMarkerChange?: (id: string, date: Date) => void;
+    /** Where the markers' labels are drawn: `"header"` (default) as tags in the date header, or `"band"` as flags in a Phases band above it, which needs `markerBandCaption`. */
+    markerPlacement?: DateTimelineMarkerPlacement;
+    /** The caption of the band above the date header (for example "Phases"); required with `markerPlacement: "band"`. */
+    markerBandCaption?: string;
+    /** How each marker's line is drawn. `"solid"` (default) is the 1px line; `"dashed"` is 2px. The today line is always solid. */
+    lineStyle?: DateTimelineMarkerLineStyle;
+    /** First day of the week on the weeks axis: 0 = Sunday ... 6 = Saturday. Default Monday. */
+    weekStartsOn?: number;
+    /** Hide the sticky column of item labels, leaving the dates axis; each bar keeps its own label. */
+    hideLabelColumn?: boolean;
+    /** The caller's own controls (a button, a menu), drawn in the control row right beside the zoom slider. */
+    toolbar?: ReactNode;
+    /**
+     * What to show when `items` is empty (DXUI-72). Left out, the timeline is replaced by the plain "no items" sentence. Given, the whole
+     * timeline stays (dates, today line, markers, band, toolbar) and this is centered in the visible part of its body, staying put as it scrolls sideways.
+     */
+    empty?: ReactNode;
+    className?: string;
+}
+export declare function DateTimeline({ items, pxPerDay, onPxPerDayChange, onItemActivate, onItemChange, today, markers, onMarkerChange, onMarkerActivate, weekStartsOn, hideLabelColumn, markerPlacement, markerBandCaption, lineStyle, toolbar, empty, className, }: DateTimelineProps): import("react").JSX.Element;

package/dist/types/components/date-timeline/TimelineRow.d.ts

@@ -0,0 +1,22 @@
+import type { PointerEvent } from "react";
+import { type DayRange } from "../../lib/date-timeline/scale";
+import type { DateTimelineChange, DateTimelineItem } from "./DateTimeline";
+import type { Drag } from "./useBarDrag";
+/** The width of each edge's grab zone on a bar this wide; 0 when the bar is too narrow to have edges. */
+export declare function edgeGrabPx(barWidth: number): number;
+export interface TimelineRowProps {
+    item: DateTimelineItem;
+    range: DayRange;
+    pxPerDay: number;
+    trackWidth: number;
+    labelWidth: number;
+    hideLabelColumn: boolean;
+    day: Intl.DateTimeFormat;
+    /** The live drag when it is this item's and past the threshold. */
+    dragging: Drag | null;
+    onPress: (e: PointerEvent<HTMLElement>, item: DateTimelineItem) => void;
+    consumeSwallowedClick: () => boolean;
+    onActivate: (id: string) => void;
+    onChange: DateTimelineChange | undefined;
+}
+export declare function TimelineRow({ item, range, pxPerDay, trackWidth, labelWidth, hideLabelColumn, day, dragging, onPress, consumeSwallowedClick, onActivate, onChange }: TimelineRowProps): import("react").JSX.Element;

package/dist/types/components/date-timeline/useBarDrag.d.ts

@@ -0,0 +1,15 @@
+import { type PointerEvent } from "react";
+import { type DateTimelineEdit } from "../../lib/date-timeline/scale";
+import type { DateTimelineChange, DateTimelineItem } from "./DateTimeline";
+export interface Drag {
+    id: string;
+    edit: DateTimelineEdit;
+    startX: number;
+    days: number;
+    active: boolean;
+}
+export declare function useBarDrag(items: readonly DateTimelineItem[], pxPerDay: number, onItemChange: DateTimelineChange | undefined): {
+    drag: Drag | null;
+    startDrag: (e: PointerEvent<HTMLElement>, item: DateTimelineItem) => void;
+    consumeSwallowedClick: () => boolean;
+};

package/dist/types/components/date-timeline/useMarkerDrag.d.ts

@@ -0,0 +1,14 @@
+import { type PointerEvent } from "react";
+import { type DayRange } from "../../lib/date-timeline/scale";
+import type { DateTimelineMarker } from "./DateTimeline";
+export interface MarkerDrag {
+    id: string;
+    startX: number;
+    days: number;
+}
+export declare function useMarkerDrag(markers: readonly DateTimelineMarker[], pxPerDay: number, range: DayRange, onMarkerChange: ((id: string, date: Date) => void) | undefined): {
+    drag: MarkerDrag | null;
+    startDrag: (e: PointerEvent<HTMLElement>, marker: DateTimelineMarker) => void;
+    consumeSwallowedClick: () => boolean;
+    clearSwallowedClick: () => void;
+};

package/dist/types/components/date-timeline/useTimelineZoom.d.ts

@@ -0,0 +1,23 @@
+import { type KeyboardEvent, type RefObject } from "react";
+import { type DayRange } from "../../lib/date-timeline/scale";
+interface TimelineZoomInput {
+    scroller: RefObject<HTMLDivElement | null>;
+    pxPerDay: number;
+    range: DayRange;
+    labelWidth: number;
+    /** True while the scroller is not rendered (no items): the effects run again when it first mounts. */
+    isEmpty: boolean;
+    onPxPerDayChange: (pxPerDay: number) => void;
+    /** Scrolls the date area to today; the fallback when the scale changed without a zoom started here. */
+    centerOnToday: () => void;
+}
+/**
+ * The timeline's zoom inputs (DXUI-61, DEC-129, DEC-130): Ctrl/Cmd + wheel over the scroller, Ctrl/Cmd + plus, minus and 0 inside the
+ * timeline, and `zoomTo` for the slider. A zoom keeps one date still on screen: the one under the pointer for the wheel,
+ * the visible center for the rest.
+ */
+export declare function useTimelineZoom({ scroller, pxPerDay, range, labelWidth, isEmpty, onPxPerDayChange, centerOnToday }: TimelineZoomInput): {
+    zoomTo: (next: number, viewportX?: number) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+};
+export {};