@cosmoops/connect-sdk 0.7.0 → 0.15.0

package/dist/esm/store.js

@@ -0,0 +1,141 @@
+/**
+ * Building blocks for `data.commit` - the transform sentinels, and the two
+ * ways to say "only if nothing has moved".
+ *
+ * Isomorphic and dependency-free, so a Server Component and a client component
+ * building the same write use the same constructors. They are functions rather
+ * than object literals you write by hand because the sentinel shape is an
+ * encoding, not an API: `{ __transform: "increment", by: 1 }` is what goes over
+ * the wire, and nothing outside this file should have to know that.
+ */
+/**
+ * Add to a number, atomically.
+ *
+ * **The one operation you genuinely cannot do yourself.** Increments are
+ * commutative, so two concurrent `increment(500)` calls both land - where
+ * read-add-write from your own process loses one of them however carefully it
+ * retries, because the read and the write are two round trips with a gap in
+ * between. Use this for balances, counters and tallies, and reach for a
+ * precondition only when the new value depends on the old one in a way
+ * addition cannot express.
+ *
+ * Negative to subtract; there is no separate `decrement`.
+ */
+export function increment(by) {
+    return { __transform: "increment", by };
+}
+/** Connect's own write time, rather than a clock reading from your process. */
+export function serverTimestamp() {
+    return { __transform: "serverTimestamp" };
+}
+/** Adds the values not already in the array. Order is not preserved. */
+export function arrayUnion(...values) {
+    return { __transform: "arrayUnion", values };
+}
+/** Removes every occurrence of each value. */
+export function arrayRemove(...values) {
+    return { __transform: "arrayRemove", values };
+}
+/**
+ * Removes the field entirely.
+ *
+ * `merge` only - a `replace` already drops every field it does not list, so
+ * asking it to delete one is a contradiction rather than a narrowing.
+ */
+export function deleteField() {
+    return { __transform: "delete" };
+}
+/**
+ * "Only if this document has not changed since I read it."
+ *
+ * Pass the document a read returned, and the precondition is built from its
+ * `_updateTime`. Taking the document rather than the timestamp is deliberate:
+ * a caller who has to reach for `doc.data._updateTime` themselves is one typo
+ * away from a precondition that silently does nothing.
+ *
+ * Throws rather than degrading when the document carries no `_updateTime` -
+ * that only happens for a document you built yourself rather than read, and a
+ * precondition that quietly became "no precondition" is worse than a crash at
+ * the call site.
+ */
+export function unchangedSince(document) {
+    const updateTime = document.data._updateTime;
+    if (typeof updateTime !== "string") {
+        throw new Error(`Document "${document.id}" has no _updateTime, so there is no version to hold it to. Preconditions are built from documents you read back, not from ones you constructed.`);
+    }
+    return { updateTime };
+}
+/** "Only if this document exists" / "only if it does not." */
+export function documentExists(exists = true) {
+    return { exists };
+}
+/** Firestore treats these as a range scan, which constrains where they may sit. */
+const RANGE_OPERATORS = new Set(["!=", "not-in", "<", "<=", ">", ">="]);
+/** Served by an equality-shaped index entry - `in` is a disjunction of equalities. */
+const EQUALITY_OPERATORS = new Set(["==", "in"]);
+/**
+ * The composite index a query shape needs, or `null` when Firestore's
+ * automatic single-field indexes already serve it.
+ *
+ * Use it to generate your Store tab declarations from the queries your code
+ * actually makes, rather than transcribing them by hand and discovering the
+ * gap in production:
+ *
+ * ```ts
+ * const needed = MY_QUERY_SHAPES.map(storeIndexFor).filter(Boolean);
+ * ```
+ *
+ * **Field order is Firestore's, not yours.** Equality fields first (sorted, so
+ * the order you passed them in cannot produce two different declarations for
+ * one query), then the `array-contains` field, then the field the query orders
+ * by. Declaring the same shape twice in two orders builds two indexes, one of
+ * which is dead weight on every document write.
+ *
+ * Connect runs the same derivation server-side and is the authority: a query
+ * with no matching declared index is refused with the index it needs spelled
+ * out, so a disagreement here surfaces on the first call rather than silently.
+ *
+ * Throws for a query Firestore cannot serve at all - two `array-contains`
+ * filters, ranges over two fields, or a range ordered by a different field.
+ */
+export function storeIndexFor(query) {
+    const filters = query.filters ?? [];
+    const orderBy = query.orderBy ?? null;
+    const equalities = filters.filter((filter) => EQUALITY_OPERATORS.has(filter.op));
+    const arrayContains = filters.filter((filter) => filter.op === "array-contains");
+    const rangeFields = [
+        ...new Set(filters.filter((filter) => RANGE_OPERATORS.has(filter.op)).map((f) => f.field)),
+    ];
+    if (arrayContains.length > 1) {
+        throw new Error(`A query may use "array-contains" once; this one uses it ${arrayContains.length} times.`);
+    }
+    if (rangeFields.length > 1) {
+        throw new Error(`A query may range over one field; this one ranges over ${rangeFields.join(", ")}.`);
+    }
+    const rangeField = rangeFields[0] ?? null;
+    if (rangeField && orderBy && orderBy.field !== rangeField) {
+        throw new Error(`A range filter on "${rangeField}" must be ordered by "${rangeField}" - Firestore cannot order a range scan by "${orderBy.field}".`);
+    }
+    const ordered = orderBy?.field ?? rangeField;
+    const distinct = new Set([...filters.map((filter) => filter.field), ...(ordered ? [ordered] : [])]);
+    if (filters.length <= 1 && distinct.size <= 1)
+        return null;
+    const fields = [
+        ...[...new Set(equalities.map((filter) => filter.field))]
+            .sort()
+            .map((field) => ({ field, direction: "asc" })),
+        ...arrayContains.map((filter) => ({ field: filter.field, direction: "array-contains" })),
+    ];
+    if (ordered)
+        fields.push({ field: ordered, direction: orderBy?.direction ?? "asc" });
+    return fields;
+}
+/**
+ * An index as one comparable string - `"status:asc,createdAt:desc"`.
+ *
+ * Deduplicate a generated list on this before declaring it: a dozen query
+ * shapes across a screen usually collapse to two or three distinct indexes.
+ */
+export function storeIndexSignature(fields) {
+    return fields.map((entry) => `${entry.field}:${entry.direction}`).join(",");
+}

package/dist/esm/ui/empty-state.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "@heroui/react";
+/**
+ * What a list, grid or table shows when it has nothing to show.
+ *
+ * **The two empty states are different facts and the copy must say so.** "You
+ * have no contacts" and "no contacts match this filter" call for different
+ * words and a different action - create the thing, versus undo the filter
+ * hiding it. Both render through here; the caller decides which by what it
+ * passes as `action`. Getting this wrong costs a user real time: an
+ * unfiltered-looking empty state in front of a filtered list reads as data
+ * loss.
+ *
+ * `variant` chooses the container by what the state stands *in*: `card` (the
+ * default), `dashed` for a region that will be filled in place - a file grid,
+ * a board column - where the outline is what says "things appear here", and
+ * `plain` for a slot already inside a card that would otherwise nest two
+ * borders.
+ */
+export function ConnectEmptyState({ icon, title, description, action, variant = "card", className, }) {
+    const body = (_jsxs("div", { className: "flex flex-col items-center text-center", children: [icon && (_jsx("span", { "aria-hidden": true, className: "mb-3 text-muted [&>svg]:size-8", children: icon })), _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), description && _jsx("p", { className: "mt-1 max-w-md text-sm text-muted", children: description }), action && _jsx("div", { className: "mt-3", children: action })] }));
+    if (variant === "plain")
+        return _jsx("div", { className: className, children: body });
+    return (_jsx(Card, { className: `p-5 sm:p-8 ${variant === "dashed" ? "border-dashed" : ""} ${className ?? ""}`, children: body }));
+}

package/dist/esm/ui/index.js

@@ -0,0 +1,34 @@
+/**
+ * Page-composition primitives - the layer between HeroUI and your features.
+ *
+ * Deliberately **not** `"use client"`. Everything here is presentational, with
+ * no hooks and no state, so it renders in a Server Component and stays out of
+ * the browser bundle. That is the whole reason this is a separate entry point
+ * from `@cosmoops/connect-sdk/client`: that module's barrel carries a
+ * `"use client"` directive, so re-exporting a `<Card>` wrapper through it
+ * would turn every page shell in your app into a client boundary for no gain.
+ *
+ * The interactive counterparts - a confirm dialog, cursor pagination, filter
+ * tabs - hold state and live in `/client` alongside the rest of the browser
+ * half.
+ *
+ * ```tsx
+ * import { ConnectPageShell, ConnectSection } from "@cosmoops/connect-sdk/ui";
+ *
+ * export default function ContactsPage() {
+ *   return (
+ *     <ConnectPageShell title="Contacts" description="Everyone you do business with.">
+ *       <ConnectPageShell.Async fallback={<TableSkeleton />}>
+ *         <ContactsTable />
+ *       </ConnectPageShell.Async>
+ *     </ConnectPageShell>
+ *   );
+ * }
+ * ```
+ */
+export { ConnectPageShell } from "./page-shell.js";
+export { ConnectPageHeader } from "./page-header.js";
+export { ConnectSection } from "./section.js";
+export { ConnectEmptyState } from "./empty-state.js";
+export { ConnectSettingRow } from "./setting-row.js";
+export { ConnectStatusChip } from "./status-chip.js";

package/dist/esm/ui/page-header.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The title / description / action block a page opens with.
+ *
+ * The structure is the point, not the styling. The action is a peer of the
+ * **title**, not of the block, so nothing below the first line can move it -
+ * the common hand-rolled shape puts the action after the description, which
+ * makes the vertical position of a page's primary control a function of how
+ * long someone wrote the paragraph above it. On a phone that pushes it most of
+ * a thumb's reach down the screen.
+ *
+ * Mobile-first, and the two axes are separate decisions: the title row is a
+ * `justify-between` at every width (title left, action right, where a thumb
+ * expects it), while the description is clamped to two lines on a phone and
+ * released from `sm` up.
+ *
+ * An `h2`, because the document's `h1` is the application itself.
+ *
+ * No hooks and no state, so this renders from a Server Component - which is
+ * why it lives in `@cosmoops/connect-sdk/ui` rather than `/client`.
+ */
+export function ConnectPageHeader({ title, description, action, clamp = true, className, }) {
+    return (_jsxs("header", { className: `flex items-start justify-between gap-3 ${className ?? ""}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: title }), description && (_jsx("p", { className: `mt-2 text-sm text-muted ${clamp ? "line-clamp-2 sm:line-clamp-none" : ""}`, children: description }))] }), action && _jsx("div", { className: "shrink-0", children: action })] }));
+}

package/dist/esm/ui/page-shell.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { ConnectPageHeader } from "./page-header.js";
+/**
+ * The frame a page opens with: its vertical rhythm, its header, and the
+ * suspended regions beneath.
+ *
+ * **The header is a prop, so it renders in the static shell** - above and
+ * outside every `<Suspense>` boundary. That is the one bug this component
+ * exists to make unrepresentable: rendering the header inside the async child
+ * makes a page's own title wait on a data read, and under Next's partial
+ * prefetching the route's shared App Shell loses it as well. There is no
+ * arrangement of `children` that reaches the header slot.
+ *
+ * A detail route is the honest exception, and it has its own door:
+ * `ConnectPageShell.Header` renders the identical header from inside an async
+ * child, for a page whose title is data it does not have yet. Pair it with a
+ * skeleton header in the fallback. The rule is that a *static* title must
+ * never be made to wait, not that every title can be static.
+ *
+ * `space-y-5` is the page gap, owned here so it has exactly one definition.
+ */
+export function ConnectPageShell({ title, description, action, clamp, above, children, }) {
+    return (_jsxs("div", { className: "space-y-5", children: [above, title !== undefined && (_jsx(ConnectPageHeader, { title: title, description: description, action: action, clamp: clamp })), children] }));
+}
+/**
+ * The page header, for a detail route that can only name itself once its data
+ * has loaded. The same component the shell renders from its props, so the two
+ * cannot drift apart.
+ */
+ConnectPageShell.Header = ConnectPageHeader;
+/**
+ * A suspended region of the page.
+ *
+ * The donut: a static shell with async children behind their own boundaries,
+ * so a slow read costs its own section rather than the whole page. Give each
+ * independent region its own `Async` and they stream separately.
+ */
+ConnectPageShell.Async = function ConnectPageShellAsync({ fallback = null, children, }) {
+    return _jsx(Suspense, { fallback: fallback, children: children });
+};

package/dist/esm/ui/section.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "@heroui/react";
+/**
+ * One titled block inside a page: a card, its heading, what it is for, and the
+ * one control that acts on it.
+ *
+ * The heading is an `h3` - `ConnectPageHeader` renders the page title as an
+ * `h2`, so a block *inside* a page is a level below it. Hand-rolled sections
+ * reliably use `h2`, which makes every settings block a sibling of the page it
+ * sits in and flattens the outline a screen reader announces.
+ *
+ * As in the page header, the action is a peer of the title rather than of the
+ * block, so its position does not move with the length of the description.
+ */
+export function ConnectSection({ title, description, action, titleId, className, bodyClassName, children, }) {
+    return (_jsxs(Card, { className: className ?? "p-4 sm:p-5", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { id: titleId, className: "text-base font-semibold", children: title }), description && _jsx("p", { className: "mt-1 text-sm text-muted", children: description })] }), action && _jsx("div", { className: "shrink-0", children: action })] }), children && _jsx("div", { className: bodyClassName ?? "mt-4 space-y-4", children: children })] }));
+}

package/dist/esm/ui/setting-row.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One labelled setting inside a `ConnectSection`.
+ *
+ * Stacks on a phone and goes side-by-side from `sm` up, rather than shrinking
+ * a two-column row until neither column is readable. The control keeps its
+ * intrinsic width so truncation lands on the description.
+ */
+export function ConnectSettingRow({ title, description, action, children, className, }) {
+    return (_jsxs("div", { className: `flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ${className ?? ""}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), description && _jsx("p", { className: "mt-1 text-sm text-muted", children: description }), children && _jsx("div", { className: "mt-3", children: children })] }), action && _jsx("div", { className: "shrink-0 sm:pl-4", children: action })] }));
+}

package/dist/esm/ui/status-chip.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from "@heroui/react";
+/**
+ * One status, rendered the way every status should be.
+ *
+ * Domain knowledge stays in the domain: each caller exports its own
+ * `ConnectStatusPresentation` next to the union it describes, and this renders
+ * it. A status whose *rendering* carries real logic - a scheduled cancellation
+ * outranking a running trial, say - keeps its own component and calls this for
+ * the final chip. A map cannot express precedence.
+ */
+export function ConnectStatusChip({ status, presentation, className, }) {
+    return (_jsx(Chip, { color: presentation.tone[status], size: "sm", variant: "soft", className: className, children: presentation.label[status] }));
+}

package/dist/theme.css

@@ -110,3 +110,90 @@ body {
   background: var(--background);
   color: var(--foreground);
 }
+
+/* ---------------------------------------------------------------------------
+ * Ask AI: Streamdown token compatibility.
+ *
+ * `ConnectAskAi` renders markdown with Streamdown, which paints using
+ * shadcn/ui's token names. HeroUI defines a different set - four happen to line
+ * up already (`--background`, `--foreground`, `--border`, `--radius`), and the
+ * rest are aliased here so an answer inherits the platform's own theme instead
+ * of rendering with missing backgrounds and borders.
+ *
+ * This lives in the shipped theme rather than in each partner's CSS because it
+ * is a fact about how these two libraries name colours, not a design choice
+ * anyone should have to rediscover.
+ *
+ * Additive - HeroUI uses none of these names - with exactly one real collision,
+ * handled below.
+ * ------------------------------------------------------------------------ */
+:root,
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"],
+.dark,
+[data-theme="dark"] {
+  --card: var(--surface);
+  --card-foreground: var(--surface-foreground);
+  --input: var(--border);
+  --primary: var(--accent);
+  --primary-foreground: var(--accent-foreground);
+}
+
+/* ---------------------------------------------------------------------------
+ * The collision: `--muted` is a *surface* in shadcn (code-block fills, table
+ * header rows) and a *text colour* in HeroUI. Reading it as HeroUI's would
+ * paint every code block mid-grey and leave the text on it unreadable.
+ *
+ * So it is shadowed - but only inside the answer body, and only after the host
+ * element has captured HeroUI's value under shadcn's name for it. Splitting it
+ * across two elements is what makes this safe: `--muted-foreground` is computed
+ * on `.connect-ai-host`, where `--muted` still means HeroUI's text grey, and
+ * inherits that resolved colour downward. Both declarations on one element
+ * would resolve `var(--muted)` against the new value and lose the original.
+ * ------------------------------------------------------------------------ */
+.connect-ai-host {
+  --muted-foreground: var(--muted);
+}
+
+.connect-ai-host .connect-ai-body {
+  --muted: var(--surface-secondary);
+}
+
+/* ---------------------------------------------------------------------------
+ * The Ask AI "thinking" shimmer - a highlight sweeping through the label while
+ * the model works, rather than a spinner.
+ *
+ * A gradient clipped to the glyphs, so the motion is *in* the word instead of
+ * beside it. This is the one state where the panel has nothing at all to show:
+ * retrieval and the model's first thought take a second or two, and a static
+ * "Thinking" reads as frozen.
+ * ------------------------------------------------------------------------ */
+.connect-ai-shimmer {
+  background: linear-gradient(100deg, var(--muted) 32%, var(--accent) 48%, var(--muted) 64%);
+  background-size: 220% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: connect-ai-shimmer 1.7s linear infinite;
+}
+
+@keyframes connect-ai-shimmer {
+  from {
+    background-position: 180% 0;
+  }
+  to {
+    background-position: -40% 0;
+  }
+}
+
+/* Motion is the whole affordance here, so with it suppressed the label has to
+   go back to being a legible static word rather than a transparent one. */
+@media (prefers-reduced-motion: reduce) {
+  .connect-ai-shimmer {
+    background: none;
+    color: var(--muted);
+    animation: none;
+  }
+}

package/dist/types/client/components/access-gate.d.ts

@@ -5,6 +5,12 @@ export type ConnectAccessGateState = "loading"
  | "signed_out"
 /** `workspace_suspended` - a platform admin took this workspace offline. Hard block, no dismiss. */
  | "suspended"
+/**
+ * `audience_mismatch` - this application serves individual accounts and the
+ * workspace is a business, or the reverse. Hard block with nothing to
+ * offer: `Workspace.type` is fixed at sign-up.
+ */
+ | "audience_mismatch"
 /** `subscription_missing` - nothing to subscribe to yet. Hard block. */
  | "no_subscription"
 /** `onboarding_approval_pending` - waiting on a reviewer. Hard block, no action to offer. */
@@ -33,9 +39,17 @@ export interface ConnectAccessGateResult {
  * `ConnectReadinessGate`/`ConnectReadinessBanner` already use. `ConnectAccessGate`
  * is a priority ordering over the same data, not a second opinion about it.
  *
- * Priority, first match wins: `suspended` > `no_subscription` >
- * `onboarding_pending` > any other blocking code (`blocked`) >
- * `payment_retry` (advisory - `children` still render) > `clear`.
+ * Priority, first match wins: `suspended` > `audience_mismatch` >
+ * `no_subscription` > `onboarding_pending` > any other blocking code
+ * (`blocked`) > `payment_retry` (advisory - `children` still render) >
+ * `clear`.
+ *
+ * `audience_mismatch` outranks `no_subscription` deliberately, and the
+ * ordering is the whole point of it: a workspace of the wrong account type
+ * carries BOTH blockers at once, and showing the subscription one first sent
+ * the customer to a plan picker whose subscribe call
+ * (`ActivateSubscriptionUseCase`) rejects them for the audience anyway. The
+ * account type is the reason; the missing subscription is a consequence.
  */
 export declare function useConnectAccessGate(): ConnectAccessGateResult;
 export interface ConnectAccessGateProps {

package/dist/types/client/components/ai-format.d.ts

@@ -0,0 +1,24 @@
+import type { AiValue, AiValueFormat } from "../../types.js";
+/**
+ * The one place a model-supplied value becomes a string.
+ *
+ * Ask AI's presentation tools send raw values with a `format` tag beside them
+ * rather than pre-formatted strings (see `AiValueFormat`), and this is the half
+ * that makes that worth doing: an amount renders in the viewer's own locale, a
+ * table sorts numerically, and the same figure reads identically on a chart
+ * axis, in a tooltip and in a metric tile.
+ *
+ * Every branch is total. A value that cannot be formatted the way it was
+ * tagged - a `date` that is not a date, a `currency` that is not a number -
+ * falls back to its plain string rather than throwing inside a render.
+ */
+/** Renders in place of a missing value - an em dash, not the word "null". */
+export declare const AI_EMPTY_VALUE = "\u2014";
+export declare function formatAiValue(value: AiValue, format?: AiValueFormat): string;
+/** Numeric columns read far better right-aligned; everything else stays with the text. */
+export declare function isNumericAiFormat(format?: AiValueFormat): boolean;
+export type AiStatusTone = "neutral" | "positive" | "warning" | "danger";
+export declare function aiStatusTone(value: AiValue): AiStatusTone;
+/** HeroUI semantic tokens only, so these inherit whatever theme the host defined. */
+export declare const AI_TONE_CHIP: Record<AiStatusTone, string>;
+export declare const AI_TONE_DOT: Record<AiStatusTone, string>;

package/dist/types/client/components/ai-widgets.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import type { AiChartInput, AiDetailsInput, AiMetricsInput, AiSourcesInput, AiStepsInput, AiTableInput, AiTimelineInput } from "../../types.js";
+/**
+ * `showTable`. Sorting and CSV are what a table is *for* - once an answer is
+ * tabular the next thing anyone wants is to reorder it or take it elsewhere,
+ * and a markdown table can do neither. Both work off the raw values, so
+ * "₹12,500" sorts as 12500 and the export carries numbers a spreadsheet can add.
+ */
+export declare function AiTable({ title, columns, rows, caption }: Readonly<AiTableInput>): import("react").JSX.Element;
+/**
+ * `showChart`. Cartesian kinds are drawn as SVG against a fixed viewBox and
+ * scaled by the browser, which is why there is no resize observer here: the
+ * chart is resolution-independent, so "responsive" costs nothing at runtime.
+ *
+ * `pie` is deliberately *not* a pie. In a 400px column a pie plus its legend
+ * is smaller than the labels it needs, and reading angles is worse than
+ * reading lengths at any size - so proportions render as a labelled bar list,
+ * which answers the same question and stays legible.
+ */
+export declare function AiChart({ title, kind, xLabel, yLabel, valueFormat, series, caption }: Readonly<AiChartInput>): import("react").JSX.Element;
+/**
+ * `showMetrics`. A delta is coloured by `deltaMeaning`, not by its sign -
+ * churn rising is bad and revenue rising is good, and painting both green
+ * because the arrow points up is exactly the confidently-wrong signal a
+ * dashboard must never send. The arrow still shows direction, so meaning and
+ * direction stay two separate channels.
+ */
+export declare function AiMetrics({ title, metrics }: Readonly<AiMetricsInput>): import("react").JSX.Element;
+/** `showTimeline`: dated events, oldest first, on a single rail. */
+export declare function AiTimeline({ title, events }: Readonly<AiTimelineInput>): import("react").JSX.Element;
+/** `showDetails`: one entity's fields, as a definition list rather than a one-row table. */
+export declare function AiDetails({ title, fields }: Readonly<AiDetailsInput>): import("react").JSX.Element;
+/** `showSteps`: an ordered procedure. `renderDetail` is how the panel feeds each step back through its markdown renderer. */
+export declare function AiSteps({ title, steps, renderDetail, }: Readonly<AiStepsInput & {
+    renderDetail?: (markdown: string) => ReactNode;
+}>): import("react").JSX.Element;
+/**
+ * `showSources`: what a grounded answer actually rested on. The point of a
+ * citation is that it can be opened, so a source with a `uri` is a link and one
+ * without is still a named row - never a marker with nothing behind it.
+ */
+export declare function AiSources({ sources }: Readonly<AiSourcesInput>): import("react").JSX.Element;