@exegia/corpora-ui 0.28.0 → 1.0.0

package/dist-lib/src/components/composed/chat/flowchart/hooks.d.ts

@@ -0,0 +1,290 @@
+import { default as React } from 'react';
+import { Edge, EdgeEnd, FlowchartProps, StepNode } from './types';
+import { Heights, Offsets, Point } from './utils';
+export declare const ZOOM_MIN = 0.25;
+export declare const ZOOM_MAX = 2;
+type Options = Pick<FlowchartProps, "edges" | "readOnly" | "zoomable" | "onDrag" | "onAdd" | "onRemove" | "onEdgeRemove" | "onEdgeConnect" | "onEdgeChange" | "onRename" | "onDuplicate"> & {
+    steps: StepNode[];
+    canvasRef: React.RefObject<HTMLDivElement | null>;
+};
+/** A connector end being dragged towards a new card; `snap` is the card whose anchor is in range. */
+export type EdgeDrag = {
+    id: string;
+    end: EdgeEnd;
+    point: Point;
+    snap?: string;
+};
+/** Pill text: explicit name, else the kind label, else "Node n" (conditions always count). */
+export declare const nodeLabel: (node: StepNode, index: number) => string;
+/** Default connectors: a chain through the steps in order. */
+export declare const chainEdges: (steps: StepNode[]) => Edge[];
+export declare const useFlowchart: ({ steps, edges: edgesProp, readOnly, zoomable, onDrag, onAdd, onRemove, onEdgeRemove, onEdgeConnect, onEdgeChange, onRename, onDuplicate, canvasRef }: Options) => {
+    steps: StepNode[];
+    edges: Edge[];
+    readOnly: boolean;
+    zoomable: boolean;
+    scale: number;
+    view: {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    zoomBy: (factor: number) => void;
+    resetZoom: () => void;
+    onCanvasPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onCanvasPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onCanvasPointerUp: () => void;
+    isPanning: () => boolean;
+    frame: {
+        w: number;
+        h: number;
+    };
+    worldHeight: number;
+    onAdd: ((id: string, side: import('./types').FlowchartSide) => void) | undefined;
+    removeNode: (id: string) => void;
+    commitRemove: (id: string) => void;
+    cancelRemove: () => void;
+    pendingRemove: {
+        id: string;
+        orphans: string[];
+    } | null;
+    orphansOf: (id: string) => string[];
+    updateHeights: (callback: (prev: Heights) => Heights) => void;
+    offsets: Offsets;
+    width: number;
+    selected: string | null;
+    drag: React.RefObject<{
+        id: string;
+        startX: number;
+        startY: number;
+        baseDx: number;
+        baseDy: number;
+        moved: boolean;
+    } | null>;
+    updateSelected: (id: string | null) => void;
+    updateFrame: (w: number, h: number) => void;
+    onPointerDown: (node: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (node: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (node: StepNode) => () => void;
+    wasDragged: () => boolean;
+    isLit: (edge: Edge) => boolean;
+    editableEdges: boolean;
+    selectedEdge: string | null;
+    selectEdge: (id: string | null) => void;
+    edgeDrag: EdgeDrag | null;
+    edgeEnds: (edge: Edge) => {
+        from: {
+            x: number;
+            y: number;
+        };
+        to: {
+            x: number;
+            y: number;
+        };
+    } | null;
+    onEdgeHandleDown: (edge: Edge, end: EdgeEnd) => (event: React.PointerEvent<SVGElement>) => void;
+    onEdgeHandleMove: (event: React.PointerEvent<SVGElement>) => void;
+    onEdgeHandleUp: (event: React.PointerEvent<SVGElement>) => void;
+    ghostCurve: () => string;
+    removeEdge: (id: string) => void;
+    onEdgeChange: ((id: string, patch: Pick<Edge, "strokeWidth" | "color">) => void) | undefined;
+    snapTarget: string | null;
+    previewNode: string | null;
+    setPreviewNode: React.Dispatch<React.SetStateAction<string | null>>;
+    connectTo: (source: string, target: string) => void;
+    renameNode: (id: string, name: string) => void;
+    duplicateNode: (id: string) => void | undefined;
+    canRename: boolean;
+    canDuplicate: boolean;
+    canConnect: boolean;
+    rowHeight: number[];
+    canvasHeight: number;
+    connectorWidth: number;
+    bezierCurve: (edge: Edge) => string;
+    handlePlace: (node: StepNode) => {
+        w: number;
+        cx: number;
+        top: number;
+    };
+};
+export type FlowchartController = ReturnType<typeof useFlowchart>;
+/** Root owns the one `useFlowchart` instance; nodes read it from here. */
+export declare const FlowchartContext: React.Context<{
+    steps: StepNode[];
+    edges: Edge[];
+    readOnly: boolean;
+    zoomable: boolean;
+    scale: number;
+    view: {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    zoomBy: (factor: number) => void;
+    resetZoom: () => void;
+    onCanvasPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onCanvasPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onCanvasPointerUp: () => void;
+    isPanning: () => boolean;
+    frame: {
+        w: number;
+        h: number;
+    };
+    worldHeight: number;
+    onAdd: ((id: string, side: import('./types').FlowchartSide) => void) | undefined;
+    removeNode: (id: string) => void;
+    commitRemove: (id: string) => void;
+    cancelRemove: () => void;
+    pendingRemove: {
+        id: string;
+        orphans: string[];
+    } | null;
+    orphansOf: (id: string) => string[];
+    updateHeights: (callback: (prev: Heights) => Heights) => void;
+    offsets: Offsets;
+    width: number;
+    selected: string | null;
+    drag: React.RefObject<{
+        id: string;
+        startX: number;
+        startY: number;
+        baseDx: number;
+        baseDy: number;
+        moved: boolean;
+    } | null>;
+    updateSelected: (id: string | null) => void;
+    updateFrame: (w: number, h: number) => void;
+    onPointerDown: (node: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (node: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (node: StepNode) => () => void;
+    wasDragged: () => boolean;
+    isLit: (edge: Edge) => boolean;
+    editableEdges: boolean;
+    selectedEdge: string | null;
+    selectEdge: (id: string | null) => void;
+    edgeDrag: EdgeDrag | null;
+    edgeEnds: (edge: Edge) => {
+        from: {
+            x: number;
+            y: number;
+        };
+        to: {
+            x: number;
+            y: number;
+        };
+    } | null;
+    onEdgeHandleDown: (edge: Edge, end: EdgeEnd) => (event: React.PointerEvent<SVGElement>) => void;
+    onEdgeHandleMove: (event: React.PointerEvent<SVGElement>) => void;
+    onEdgeHandleUp: (event: React.PointerEvent<SVGElement>) => void;
+    ghostCurve: () => string;
+    removeEdge: (id: string) => void;
+    onEdgeChange: ((id: string, patch: Pick<Edge, "strokeWidth" | "color">) => void) | undefined;
+    snapTarget: string | null;
+    previewNode: string | null;
+    setPreviewNode: React.Dispatch<React.SetStateAction<string | null>>;
+    connectTo: (source: string, target: string) => void;
+    renameNode: (id: string, name: string) => void;
+    duplicateNode: (id: string) => void | undefined;
+    canRename: boolean;
+    canDuplicate: boolean;
+    canConnect: boolean;
+    rowHeight: number[];
+    canvasHeight: number;
+    connectorWidth: number;
+    bezierCurve: (edge: Edge) => string;
+    handlePlace: (node: StepNode) => {
+        w: number;
+        cx: number;
+        top: number;
+    };
+} | null>;
+export declare const useFlowchartContext: () => {
+    steps: StepNode[];
+    edges: Edge[];
+    readOnly: boolean;
+    zoomable: boolean;
+    scale: number;
+    view: {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    zoomBy: (factor: number) => void;
+    resetZoom: () => void;
+    onCanvasPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onCanvasPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onCanvasPointerUp: () => void;
+    isPanning: () => boolean;
+    frame: {
+        w: number;
+        h: number;
+    };
+    worldHeight: number;
+    onAdd: ((id: string, side: import('./types').FlowchartSide) => void) | undefined;
+    removeNode: (id: string) => void;
+    commitRemove: (id: string) => void;
+    cancelRemove: () => void;
+    pendingRemove: {
+        id: string;
+        orphans: string[];
+    } | null;
+    orphansOf: (id: string) => string[];
+    updateHeights: (callback: (prev: Heights) => Heights) => void;
+    offsets: Offsets;
+    width: number;
+    selected: string | null;
+    drag: React.RefObject<{
+        id: string;
+        startX: number;
+        startY: number;
+        baseDx: number;
+        baseDy: number;
+        moved: boolean;
+    } | null>;
+    updateSelected: (id: string | null) => void;
+    updateFrame: (w: number, h: number) => void;
+    onPointerDown: (node: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (node: StepNode) => (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (node: StepNode) => () => void;
+    wasDragged: () => boolean;
+    isLit: (edge: Edge) => boolean;
+    editableEdges: boolean;
+    selectedEdge: string | null;
+    selectEdge: (id: string | null) => void;
+    edgeDrag: EdgeDrag | null;
+    edgeEnds: (edge: Edge) => {
+        from: {
+            x: number;
+            y: number;
+        };
+        to: {
+            x: number;
+            y: number;
+        };
+    } | null;
+    onEdgeHandleDown: (edge: Edge, end: EdgeEnd) => (event: React.PointerEvent<SVGElement>) => void;
+    onEdgeHandleMove: (event: React.PointerEvent<SVGElement>) => void;
+    onEdgeHandleUp: (event: React.PointerEvent<SVGElement>) => void;
+    ghostCurve: () => string;
+    removeEdge: (id: string) => void;
+    onEdgeChange: ((id: string, patch: Pick<Edge, "strokeWidth" | "color">) => void) | undefined;
+    snapTarget: string | null;
+    previewNode: string | null;
+    setPreviewNode: React.Dispatch<React.SetStateAction<string | null>>;
+    connectTo: (source: string, target: string) => void;
+    renameNode: (id: string, name: string) => void;
+    duplicateNode: (id: string) => void | undefined;
+    canRename: boolean;
+    canDuplicate: boolean;
+    canConnect: boolean;
+    rowHeight: number[];
+    canvasHeight: number;
+    connectorWidth: number;
+    bezierCurve: (edge: Edge) => string;
+    handlePlace: (node: StepNode) => {
+        w: number;
+        cx: number;
+        top: number;
+    };
+};
+export {};

package/dist-lib/src/components/composed/chat/flowchart/index.d.ts

@@ -0,0 +1,11 @@
+import { default as Root } from './default';
+import { Connector } from './connector';
+import { ChartNode } from './chart-node';
+export type * from './types';
+export * from './hooks';
+export declare const Flowchart: {
+    Root: typeof Root;
+    Connector: typeof Connector;
+    ChartNode: typeof ChartNode;
+};
+export default Root;

package/dist-lib/src/components/composed/chat/flowchart/step-body.d.ts

@@ -0,0 +1,6 @@
+import { StepNode } from './types';
+export declare function StepBody({ node }: {
+    node: StepNode;
+}): import("react").JSX.Element;
+/** Default If/Else card body: two chip rows. Picking a value is a TODO until SelectChip's menu lands. */
+export declare function ConditionBody(): import("react").JSX.Element;

package/dist-lib/src/components/composed/chat/flowchart/types.d.ts

@@ -0,0 +1,91 @@
+import { SVGProps } from 'react';
+export type FlowchartSide = "top" | "right" | "bottom" | "left";
+export interface FlowchartProps {
+    /** Cards to lay out. Defaults to the Trigger → If / Else sample. */
+    steps?: StepNode[];
+    /** Connectors. Defaults to a chain through `steps` in order. */
+    edges?: Edge[];
+    /** No drag, no add / remove buttons. Selection still works. */
+    readOnly?: boolean;
+    /** Ctrl/⌘ + wheel and the +/− buttons scale the canvas. */
+    zoomable?: boolean;
+    /** A card was dragged; `offset` is its displacement from the laid-out position. */
+    onDrag?: (id: string, offset: {
+        dx: number;
+        dy: number;
+    }) => void;
+    /** The add button on one side of a card was pressed. */
+    onAdd?: (id: string, side: FlowchartSide) => void;
+    /** The remove button was pressed (already confirmed when children would be orphaned). */
+    onRemove?: (id: string) => void;
+    /**
+     * Canvas min-height in px. The canvas fills its parent; without this it
+     * floors at the content height it loaded with, so zooming out or removing
+     * a card never collapses it.
+     */
+    height?: number;
+    /** Disconnect was pressed on a selected connector. Enables connector editing. */
+    onEdgeRemove?: (id: string) => void;
+    /** A connector end was dropped on another card; `edge` carries the new source / target. */
+    onEdgeConnect?: (edge: Edge) => void;
+    /** Stroke width or colour picked from the connector toolbar. */
+    onEdgeChange?: (id: string, patch: Pick<Edge, "strokeWidth" | "color">) => void;
+    /** The pill was renamed inline (double-click, then click away or Enter). */
+    onRename?: (id: string, name: string) => void;
+    /** "Duplicate" in the context menu: copy the card to a new node on its right. */
+    onDuplicate?: (id: string) => void;
+    variant?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export type StepNode = {
+    id: string;
+    row: number;
+    x: number;
+    w: number;
+    kind?: {
+        label: string;
+        hue: string;
+    };
+    /** Pill text; defaults to the kind label, or "Node n" for conditions. */
+    name?: string;
+    hue?: string;
+    title?: string;
+    caption?: string;
+    /** Replaces the icon tile — a person, a manuscript, a corpus cover. */
+    image?: {
+        src: string;
+        alt?: string;
+    };
+    /** Custom tile icon when there is no image. */
+    icon?: React.ReactNode;
+    condition?: boolean;
+    /** Custom card body; replaces the default title / caption body. */
+    children?: React.ReactNode;
+};
+export type Edge = {
+    id: string;
+    source: string;
+    target: string;
+    bezierCurve?: boolean;
+    strokeWidth?: number;
+    /** Any CSS colour; defaults to the line token, accent when lit. */
+    color?: string;
+};
+export type EdgeEnd = "source" | "target";
+export interface ConnectorProps extends Omit<SVGProps<SVGPathElement>, "strokeWidth"> {
+    edge: Edge;
+    isLit: boolean;
+    strokeWidth?: number;
+    /** Selected for editing: bolder hit, toolbar and end handles render in Root. */
+    selected?: boolean;
+    /** Enables the wide click target; called with the edge id. */
+    onPick?: (id: string) => void;
+}
+export interface ChartNodeProps {
+    node: StepNode;
+    /** Position in `steps`, for the generated "Node n" label. */
+    index?: number;
+    onRef: (el: HTMLDivElement | null) => void;
+    children?: React.ReactNode;
+}

package/dist-lib/src/components/composed/chat/flowchart/utils.d.ts

@@ -0,0 +1,64 @@
+import { StepNode } from './types';
+export type Offsets = Record<string, {
+    dx: number;
+    dy: number;
+}>;
+export type Heights = Record<string, number>;
+/** Everything `place`/`bezier` need to position a node, resolved once per render. */
+export type Layout = {
+    width: number;
+    offsets: Offsets;
+    rows: number[];
+    rowY: number[];
+    heights: Heights;
+};
+/** Distinct row indices, ascending. */
+export declare const rows: (steps: StepNode[]) => number[];
+/** Height of each row = tallest node in it. */
+export declare const rowH: (steps: StepNode[], heights: Heights) => number[];
+/** Y offset of each row, stacked with ROW_GAP. */
+export declare const rowYs: (rowH: number[]) => number[];
+export declare const canvasH: (rowY: number[], rowH: number[]) => number;
+export declare const mix: (hue: string, pct: number, base?: string) => string;
+export declare const cw: (width: number) => number;
+export declare const place: (n: StepNode, { width, offsets, rows, rowY }: Layout) => {
+    w: number;
+    cx: number;
+    top: number;
+};
+/** Card anchor points (pills sit above the card, so offset the top). */
+export declare const anchors: (n: StepNode, layout: Layout) => {
+    top: {
+        x: number;
+        y: number;
+    };
+    bottom: {
+        x: number;
+        y: number;
+    };
+};
+export type Point = {
+    x: number;
+    y: number;
+};
+/** Vertical S-curve between two points. */
+export declare const curve: (from: Point, to: Point) => string;
+/** Cubic bezier midpoint, where the connector toolbar sits. */
+export declare const midpoint: (from: Point, to: Point) => Point;
+export declare const edgePoints: (edge: {
+    from: string;
+    to: string;
+}, steps: StepNode[], layout: Layout) => {
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+} | null;
+export declare const bezier: (edge: {
+    from: string;
+    to: string;
+}, steps: StepNode[], layout: Layout) => string;

package/dist-lib/src/components/composed/chat/hint.d.ts

@@ -0,0 +1,6 @@
+/** "Press ⌘ + ↵ to send message" — the composer's send hint. */
+export declare function SendHint({ className, verbose, }: {
+    className?: string;
+    /** Pin the keycaps to the end and drop the trailing "to send message". */
+    verbose?: boolean;
+}): React.ReactElement;

package/dist-lib/src/components/composed/chat/index.d.ts

@@ -0,0 +1,15 @@
+export { Attachment, type AttachmentKind, type AttachmentProps, type AttachmentVariant, } from './attachment';
+export { Chart, type ChartDatum, type ChartProps, type ChartSeries, type ChartType, } from './chart';
+export { Markdown, markdownViewAtom, removeMarkdownInstance, useMarkdownView, type MarkdownProps, type MarkdownView, } from './markdown';
+export { addComposerAttachmentAtom, clearComposerAttachmentsAtom, CommandMenu, Composer, composerAttachmentsAtom, removeComposerAttachmentAtom, removeComposerInstance, useComposerAttachmentActions, useComposerAttachments, } from './composer';
+export type { ComposerAttachment, ComposerBaseProps, ComposerMode, ComposerSuggestionsProps, IComposerMenuProps, IComposerProps, IComposerSubmitButtonProps, } from './composer';
+export { Recommendation, RecommendationCard } from './recommendation';
+export type { RecommendationCardProps, RecommendationCheckboxProps, RecommendationEntity, RecommendationFields, RecommendationGroupProps, RecommendationItemProps, RecommendationOption, RecommendationState, } from './recommendation';
+export { ContextCards, type ContextCard, type ContextCardsProps, } from './context-cards';
+export { CodeBlock, tokenize, type CodeBlockProps, type CodeDiffLine, } from './code-block';
+export { FilterTable, filterTableFilterAtom, removeFilterTableInstance, type FilterTableColumn, type FilterTableProps, type FilterTableStatus, } from './filter-table';
+export { RecordsTable, recordsTableSelectionAtom, removeRecordsTableInstance, type RecordsColumnKey, type RecordsRow, type RecordsTableProps, } from './records-table';
+export * from './flowchart';
+export { type ChartNodeProps, type FlowchartProps } from './flowchart';
+export { InsightCards, InsightEntity, type Insight, type InsightAllocation, type InsightSegment, type InsightCardsProps, } from './insight-cards';
+export { SendHint } from './hint';

package/dist-lib/src/components/composed/chat/insight-cards.d.ts

@@ -0,0 +1,54 @@
+import { DotTone, StatProps } from '../../ui/chat';
+import { ChartDatum, ChartSeries } from './chart';
+import * as React from "react";
+export interface Insight {
+    /** Sentence; `entity` is highlighted with a dot in front. */
+    summary: React.ReactNode;
+    stats?: StatProps[];
+    snapshot?: {
+        label?: React.ReactNode;
+        badge?: React.ReactNode;
+        data: ChartDatum[];
+        series: ChartSeries[];
+    };
+    /** Share breakdown: tile + big value, a segmented bar, selectable legend pills and a detail panel. */
+    allocation?: InsightAllocation;
+    followUp?: string;
+}
+export interface InsightSegment {
+    key: string;
+    label: React.ReactNode;
+    value: number;
+    tone?: DotTone;
+    /** Detail panel heading; falls back to `label`. */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export interface InsightAllocation {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** Letter in the tile; takes the first segment's tone. */
+    initials?: string;
+    segments: InsightSegment[];
+    defaultSelected?: string;
+}
+export interface InsightCardsProps extends React.ComponentPropsWithoutRef<"div"> {
+    header?: React.ReactNode;
+    insights: Insight[];
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    onFollowUp?: (text: string) => void;
+}
+/**
+ * Paged insights: header with count and prev/next, summary, stats,
+ * a trend snapshot (line plot + legend) or an allocation breakdown, and a follow-up prompt.
+ *
+ * @sketch "Component / Insight Cards"
+ */
+export declare function InsightCards({ header, insights, index, defaultIndex, onIndexChange, onFollowUp, className, ...props }: InsightCardsProps): React.ReactElement;
+/** Inline entity marker for `Insight.summary`: dot + name. */
+export declare function InsightEntity({ tone, children }: {
+    tone?: DotTone;
+    children: React.ReactNode;
+}): React.ReactElement;

package/dist-lib/src/components/composed/chat/markdown-atom.d.ts

@@ -0,0 +1,7 @@
+export type MarkdownView = "preview" | "markup";
+/** Which pane a Markdown card shows, keyed by its `markdownId`; `null` until first toggled (the card then falls back to its `defaultView`). */
+export declare const markdownViewAtom: import('../../../lib/keyed-atom').Family<import('jotai').PrimitiveAtom<MarkdownView | null> & {
+    init: MarkdownView | null;
+}>;
+export declare const removeMarkdownInstance: (id: string) => void;
+export declare function useMarkdownView(markdownId: string): [MarkdownView | null, (args_0: MarkdownView | ((prev: MarkdownView | null) => MarkdownView | null) | null) => void];

package/dist-lib/src/components/composed/chat/markdown.d.ts

@@ -0,0 +1,22 @@
+import { markdownViewAtom, removeMarkdownInstance, MarkdownView, useMarkdownView } from './markdown-atom';
+import * as React from "react";
+export { markdownViewAtom, removeMarkdownInstance, useMarkdownView, type MarkdownView, };
+export interface MarkdownProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onCopy"> {
+    /** Markdown source; rendered in Preview, shown raw in Markup. */
+    source: string;
+    /** Stable id for the view atom. Unnamed cards key off `useId()`. */
+    markdownId?: string;
+    view?: MarkdownView;
+    defaultView?: MarkdownView;
+    onViewChange?: (view: MarkdownView) => void;
+    onCopy?: (source: string) => void;
+    onExpand?: () => void;
+    /** Drop the card border (inside an AiBubble the bubble supplies it). */
+    bare?: boolean;
+}
+/**
+ * Rendered markdown behind a Preview | Markup toggle, with copy and expand.
+ *
+ * @sketch "Component / Markdown / Preview", "Component / Markdown / Markup"
+ */
+export declare function Markdown({ source, markdownId, view, defaultView, onViewChange, onCopy, onExpand, bare, className, ...props }: MarkdownProps): React.ReactElement;

package/dist-lib/src/components/composed/chat/recommendation/checkbox.d.ts

@@ -0,0 +1,15 @@
+import { RecommendationState } from './types';
+import type * as React from "react";
+export interface RecommendationCheckboxProps {
+    state: RecommendationState;
+    /** Number shown inside the pending ring (its position in the group). */
+    step?: number;
+    className?: string;
+}
+/**
+ * Outcome mark after beautiful-ui's Task Rows: a Sparkle while the proposal
+ * waits for approval, a spinning ring once the agent is running (with the
+ * step number inside), then a filled badge that pops in — green check when
+ * accepted, red cross when rejected.
+ */
+export declare function Checkbox({ state, step, className, }: RecommendationCheckboxProps): React.ReactElement;

package/dist-lib/src/components/composed/chat/recommendation/constant.d.ts

@@ -0,0 +1,6 @@
+import { SignalLevel, TagTone } from '../../../ui/chat';
+import { RecommendationState } from './types';
+export declare const CONFIDENCE: Record<SignalLevel, string>;
+export declare const STATE_LABEL: Record<Exclude<RecommendationState, "pending" | "running">, string>;
+/** Status pill tones, shared with the presentation Tag atom. */
+export declare const STATE_TONE: Record<Exclude<RecommendationState, "pending" | "running">, TagTone>;

package/dist-lib/src/components/composed/chat/recommendation/default.d.ts

@@ -0,0 +1,7 @@
+import { RecommendationCardProps } from './types';
+import type * as React from "react";
+/**
+ * One-card convenience: a Group with a single Item, so existing
+ * `<RecommendationCard />` call sites keep working.
+ */
+export declare function RecommendationCard({ value, defaultOpen, ...props }: RecommendationCardProps): React.ReactElement;

package/dist-lib/src/components/composed/chat/recommendation/group.d.ts

@@ -0,0 +1,8 @@
+import { AccordionPrimitive } from '../../../ui/accordion';
+import type * as React from "react";
+export type RecommendationGroupProps = AccordionPrimitive.Root.Props;
+/**
+ * Accordion root for a stack of recommendation items. Defaults to `multiple`
+ * so each proposal can stay open on its own, like independent suggestion cards.
+ */
+export declare function Group({ className, multiple, ...props }: RecommendationGroupProps): React.ReactElement;

package/dist-lib/src/components/composed/chat/recommendation/index.d.ts

@@ -0,0 +1,15 @@
+import { Checkbox } from './checkbox';
+import { RecommendationCard } from './default';
+import { Group } from './group';
+import { Item } from './item';
+export type * from './types';
+export type { RecommendationCheckboxProps } from './checkbox';
+export type { RecommendationGroupProps } from './group';
+export { RecommendationCard };
+export declare const Recommendation: {
+    Group: typeof Group;
+    Item: typeof Item;
+    Checkbox: typeof Checkbox;
+    Card: typeof RecommendationCard;
+};
+export default Group;

package/dist-lib/src/components/composed/chat/recommendation/item.d.ts

@@ -0,0 +1,12 @@
+import { RecommendationItemProps } from './types';
+import type * as React from "react";
+/**
+ * Human-in-the-loop proposal: title, description with entity + lead-time
+ * pills, other options with signal bars, confidence + Accept / Alternatives.
+ * Outcome mark, badge, and the pending ↔ undo swap come from SuggestionCard.
+ *
+ * Must render inside `Recommendation.Group`.
+ *
+ * @sketch "Component / Recommendation Card"
+ */
+export declare function Item({ value, title, description, entity, descriptionSuffix, leadTime, options, optionsLabel, confidence, confidenceLabel, acceptLabel, rejectLabel, alternativesLabel, state, step, onAccept, onReject, onAlternatives, onUndo, onSelectOption, children, className, ...props }: RecommendationItemProps): React.ReactElement;