@alexkroman1/aai-ui 0.12.2 → 0.13.0

package/dist/components/form-fields.d.ts

@@ -0,0 +1,142 @@
+import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import type { FieldShell, FileReadMode } from "./form-types.ts";
+/**
+ * Label + control + hint, in the layout every field here uses.
+ *
+ * Exported so a caller's own control gets the same shell rather than an
+ * approximation of it.
+ *
+ * @example
+ * ```tsx
+ * import { Field, Form } from "@alexkroman1/aai-ui";
+ *
+ * function ColorForm() {
+ *   return (
+ *     <Form onSubmit={() => undefined}>
+ *       <Field label="Accent" hint="Any CSS color." htmlFor="accent">
+ *         <input id="accent" name="accent" type="color" />
+ *       </Field>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Field-shell props.
+ *
+ * @public
+ */
+export declare function Field({ label, hint, htmlFor, className, children, }: {
+    /** Visible label. Omitted leaves the control unlabelled. */
+    label?: string | undefined;
+    /** One line of guidance under the control. */
+    hint?: string | undefined;
+    /** Id of the control this labels. */
+    htmlFor?: string | undefined;
+    /** Additional CSS class names for the wrapper, appended to its own. */
+    className?: string | undefined;
+    /** The control itself. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A single-line text input.
+ *
+ * Accepts every `<input>` attribute except `name` and `className`, which this
+ * component owns, plus the shared {@link FieldShell} props.
+ *
+ * @param props - {@link FieldShell} props plus `<input>` attributes.
+ *
+ * @public
+ */
+export declare function TextField(props: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className">): import("react").JSX.Element;
+/**
+ * A number input. Contributes a NUMBER to {@link FormValues}, or nothing when
+ * left empty.
+ *
+ * Accepts every `<input>` attribute except `name`, `className` and `type`,
+ * plus the shared {@link FieldShell} props — so `min`, `max` and `step` are
+ * passed straight through.
+ *
+ * @param props - {@link FieldShell} props plus `<input>` attributes.
+ *
+ * @public
+ */
+export declare function NumberField(props: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+/**
+ * A multi-line text input.
+ *
+ * Accepts every `<textarea>` attribute except `name` and `className`, plus the
+ * shared {@link FieldShell} props. `rows` defaults to 4.
+ *
+ * @param props - {@link FieldShell} props plus `<textarea>` attributes.
+ *
+ * @public
+ */
+export declare function TextAreaField({ name, label, hint, className, rows, ...rest }: FieldShell & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "className">): import("react").JSX.Element;
+/**
+ * A dropdown.
+ *
+ * `options` is the short form — a list of strings, or of
+ * `{ value, label }` pairs when the two differ. Pass `children` instead for
+ * full control over the `<option>` elements; `children` wins when both are
+ * given.
+ *
+ * Otherwise accepts every `<select>` attribute except `name` and `className`,
+ * plus the shared {@link FieldShell} props. Note `multiple` works and
+ * contributes an ARRAY (`[]` when nothing is chosen).
+ *
+ * @param props - {@link FieldShell} props, `options`, and `<select>`
+ * attributes.
+ *
+ * @public
+ */
+export declare function SelectField({ name, label, hint, className, options, children, ...rest }: FieldShell & {
+    options?: readonly (string | {
+        value: string;
+        label: string;
+    })[];
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "name" | "className">): import("react").JSX.Element;
+/**
+ * A checkbox. Contributes a BOOLEAN to {@link FormValues}.
+ *
+ * Accepts every `<input>` attribute except `name`, `className` and `type`,
+ * plus the shared {@link FieldShell} props. The label renders beside the box
+ * rather than above it, so `hint` is the place for guidance.
+ *
+ * @param props - {@link FieldShell} props plus `<input>` attributes.
+ *
+ * @public
+ */
+export declare function CheckboxField({ name, label, hint, className, ...rest }: FieldShell & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;
+/**
+ * A file picker. Contributes a {@link FileValue} (or an array, with `multiple`)
+ * to {@link FormValues} — or nothing when no file was chosen.
+ *
+ * **`upload` is what a workflow input wants.** A run's input is serialized into
+ * the run record and replayed from it on every resume, so a file's BYTES cannot
+ * travel in it. With `upload` the field contributes the `File` itself,
+ * `useWorkflowSubmit` stores it through `POST /workflows/uploads` before
+ * starting the run, and the input carries the upload id — which a step reads
+ * windows of with `stepReadUpload`. Declaring the property in the workflow's
+ * `uploads` list makes `<WorkflowFields>` render exactly this, so a declared
+ * form needs no file markup at all.
+ *
+ * **Without it the field describes the file and does not read it.** `read`
+ * exists for the cases where the bytes really are small and really are the
+ * input — a CSV of ids, a config — and the size is the author's to check. See
+ * {@link FileReadMode} for the four values; `upload` is shorthand for
+ * `read="upload"`.
+ *
+ * Otherwise accepts every `<input>` attribute except `name`, `className` and
+ * `type`, plus the shared {@link FieldShell} props — so `accept` and
+ * `multiple` are passed straight through.
+ *
+ * @param props - {@link FieldShell} props, `read`/`upload`, and `<input>`
+ * attributes.
+ *
+ * @public
+ */
+export declare function FileField({ name, label, hint, className, read, upload, ...rest }: FieldShell & {
+    read?: FileReadMode;
+    /** Shorthand for `read="upload"` — see above. */
+    upload?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "className" | "type">): import("react").JSX.Element;

package/dist/components/form-types.d.ts

@@ -0,0 +1,73 @@
+/**
+ * What a form's controls CONTRIBUTE — the three types both halves of the form
+ * code share.
+ *
+ * Their own module because `form.tsx` (the components) and `_form-values.ts`
+ * (the DOM read) both need them, and a type living in one of those would make
+ * the pair import each other.
+ */
+/**
+ * One submitted form, as a plain object keyed by field name.
+ *
+ * `unknown` values rather than `string`: see the module doc — a number field
+ * yields a number and a file field yields a {@link FileValue}.
+ *
+ * @public
+ */
+export type FormValues = Record<string, unknown>;
+/**
+ * What a {@link FileField} contributes to {@link FormValues}.
+ *
+ * @public
+ */
+export type FileValue = {
+    name: string;
+    /** Size in bytes. */
+    size: number;
+    /** MIME type the browser reported, or `""` when it could not tell. */
+    type: string;
+    /** Last modified, as epoch ms. */
+    lastModified: number;
+    /**
+     * The file's contents, present only when the field asked for them — see
+     * {@link FileField}'s `read` prop. A `data:` URL for `"dataUrl"`, decoded text
+     * for `"text"`.
+     */
+    content?: string;
+};
+/**
+ * How much of a chosen file a {@link FileField} reads.
+ *
+ * `"upload"` is the odd one and the one a workflow input wants: the field
+ * contributes the `File` ITSELF rather than a description of it, and
+ * `useWorkflowSubmit` then stores it through `POST /workflows/uploads` and puts
+ * the id in the run input. Bytes cannot travel in a run input — see
+ * {@link FileField} — so this is how a form takes a file at all.
+ *
+ * @public
+ */
+export type FileReadMode = "none" | "text" | "dataUrl" | "upload";
+/**
+ * The props every field in `form.tsx` shares.
+ *
+ * Public because it is part of each field's own signature — a type reachable
+ * from a documented one has to be reachable from the entry point too, which the
+ * docs build enforces.
+ *
+ * @public
+ */
+export type FieldShell = {
+    /** Key this field contributes to {@link FormValues}. */
+    name: string;
+    /** Visible label. Omitted leaves the control unlabelled — pass `aria-label` instead. */
+    label?: string | undefined;
+    /** One line of guidance under the control. */
+    hint?: string | undefined;
+    /**
+     * Additional CSS class names for the field's WRAPPER (label + control +
+     * hint), appended to its own layout classes. The control itself takes the
+     * shared field styling; pass `style` or a `data-` hook through the native
+     * attributes to reach it.
+     */
+    className?: string | undefined;
+};

package/dist/components/form.d.ts

@@ -0,0 +1,96 @@
+import type { ButtonHTMLAttributes, FormHTMLAttributes, ReactNode } from "react";
+import { type ButtonSize, type ButtonVariant } from "./button.tsx";
+import type { FormValues } from "./form-types.ts";
+export { CheckboxField, Field, FileField, NumberField, SelectField, TextAreaField, TextField, } from "./form-fields.tsx";
+export type { FieldShell, FileReadMode, FileValue, FormValues } from "./form-types.ts";
+/** Props of {@link Form}. */
+export type FormProps = {
+    /**
+     * Called with the collected values. May be async — the form stays disabled
+     * for the duration, so a double-click cannot submit twice.
+     */
+    onSubmit: (values: FormValues) => void | Promise<void>;
+    /**
+     * A failure to show above the fields. The caller owns it, because the
+     * interesting failures are the server's (`useWorkflowSubmit`'s `error`) and
+     * this component never sees them.
+     */
+    error?: string | undefined;
+    children?: ReactNode;
+    className?: string | undefined;
+} & Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "className">;
+/**
+ * A form that hands its values to `onSubmit` as one object.
+ *
+ * Native validation still applies — a `required` field blocks the submit and the
+ * browser says so, which is better than anything this could render.
+ *
+ * @example
+ * ```tsx
+ * import { Form, SubmitButton, TextField } from "@alexkroman1/aai-ui";
+ *
+ * function NameForm() {
+ *   return (
+ *     <Form onSubmit={(values) => console.log(values.topic)}>
+ *       <TextField name="topic" label="Topic" required />
+ *       <SubmitButton>Start</SubmitButton>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link FormProps}. Every `<form>` attribute except
+ * `onSubmit` and `className` is passed through.
+ *
+ * @public
+ */
+export declare function Form({ onSubmit, error, children, className, ...rest }: FormProps): import("react").JSX.Element;
+/**
+ * The form's submit button, disabled and relabelled while a submit is in
+ * flight.
+ *
+ * Accepts all standard `<button>` HTML attributes except `type` and `disabled`,
+ * in addition to the props below — so `aria-label` on an icon-only submit,
+ * `form`, `id`, `title` and `onClick` all work here exactly as they do on
+ * {@link Button}. `type` and `disabled` stay owned: this component sets both
+ * from `pending`, and letting a caller set either is how a form gets a submit
+ * button that does not submit.
+ *
+ * @example
+ * ```tsx
+ * import { Form, SubmitButton, TextField } from "@alexkroman1/aai-ui";
+ *
+ * function Digest({ pending }: { pending: boolean }) {
+ *   return (
+ *     <Form onSubmit={() => undefined}>
+ *       <TextField name="url" label="Link" required />
+ *       <SubmitButton pending={pending} variant="secondary" size="lg">
+ *         Summarize
+ *       </SubmitButton>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Button props.
+ *
+ * @public
+ */
+export declare function SubmitButton({ children, pending, pendingLabel, size, variant, className, ...rest }: {
+    /** Button label. Replaced by `pendingLabel` while `pending`. */
+    children?: ReactNode;
+    /**
+     * Whether the WORK this form started is still going. Separate from the
+     * submit itself, which {@link Form} disables on its own: a workflow run
+     * outlives its `POST`, and the button should stay busy until the run is done.
+     */
+    pending?: boolean;
+    /** Label shown in place of `children` while `pending`. Defaults to `"Working…"`. */
+    pendingLabel?: string;
+    /** Size preset, passed through to {@link Button}. */
+    size?: ButtonSize | undefined;
+    /** Visual style, passed through to {@link Button}. Defaults to `"default"`. */
+    variant?: ButtonVariant | undefined;
+    /** Additional CSS class names, appended to {@link Button}'s own. */
+    className?: string | undefined;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "className">): import("react").JSX.Element;

package/dist/components/markdown.d.ts

@@ -0,0 +1,57 @@
+import { type FunctionComponent, type MemoExoticComponent } from "react";
+/**
+ * Type scale for {@link Markdown}: `"default"` is the deployed agent UI's
+ * scale, `"compact"` a notch smaller for denser surfaces (the studio's chat
+ * transcript). Colors are unaffected — they come from the theme either way.
+ *
+ * @public
+ */
+export type MarkdownVariant = "default" | "compact";
+/**
+ * Props of {@link Markdown}.
+ *
+ * @public
+ */
+export type MarkdownProps = {
+    /**
+     * The Markdown source. Required — this is the prose to render, normally one
+     * agent message or the streaming tail of one.
+     */
+    text: string;
+    /**
+     * Type scale. Defaults to `"default"`, the deployed agent UI's scale; pass
+     * `"compact"` for a denser surface. Colors are unaffected either way.
+     */
+    variant?: MarkdownVariant;
+};
+/**
+ * Agent prose, rendered as Markdown.
+ *
+ * Pipeline and S2S models write emphasis, lists, `code`, and links; before
+ * this they arrived as literal asterisks and backticks. Styling is
+ * per-element (theme colors via inline styles, spacing via Tailwind) so it
+ * stays on the default client's type scale and follows custom themes.
+ * The optional `variant` selects the type scale (see
+ * {@link MarkdownVariant}).
+ * GFM is on for tables and strikethrough. react-markdown does not render
+ * raw HTML unless rehype-raw is added — keep it that way, this text comes
+ * from a model.
+ *
+ * Memoized alongside `MessageBubble`: message content is referentially
+ * stable across snapshots, so only the streaming row re-parses.
+ *
+ * @example
+ * ```tsx
+ * import { Markdown, useSessionSelector } from "@alexkroman1/aai-ui";
+ *
+ * // The agent's reply as it streams, rendered rather than shown as literal
+ * // asterisks and backticks.
+ * function LiveReply() {
+ *   const text = useSessionSelector((snapshot) => snapshot.agentTranscript);
+ *   return text === null ? null : <Markdown text={text} variant="compact" />;
+ * }
+ * ```
+ *
+ * @public
+ */
+export declare const Markdown: MemoExoticComponent<FunctionComponent<MarkdownProps>>;

package/dist/components/message-list.d.ts

@@ -0,0 +1,48 @@
+/** @jsxImportSource react */
+import { type FunctionComponent, type MemoExoticComponent } from "react";
+import type { ConversationLogEntry } from "../conversation-log.ts";
+/**
+ * Props of {@link MessageList}.
+ *
+ * @public
+ */
+export type MessageListProps = {
+    /**
+     * Additional CSS class names for the outer scroll container, appended to its
+     * own rather than replacing them.
+     *
+     * The container is an {@link AutoScroll}, so it must end up with a BOUNDED
+     * height (`flex-1 min-h-0`, `h-full`, a fixed height). Unbounded, it grows
+     * with the conversation and never scrolls, so nothing pins to the newest
+     * message.
+     */
+    className?: string;
+    /**
+     * A persisted transcript to show in place of the live session's items —
+     * `useConversationLog().entries`, rendered as {@link ConversationView} renders it.
+     */
+    log?: readonly ConversationLogEntry[] | undefined;
+};
+/**
+ * Scrollable list of all chat messages, tool-call blocks, live transcript,
+ * streaming agent utterance, and a thinking indicator.
+ *
+ * Messages and tool calls are interleaved in the correct order. The list
+ * auto-scrolls to the latest content.
+ *
+ * Must be rendered inside a `SessionProvider`.
+ *
+ * @example
+ * ```tsx
+ * import { MessageList } from "@alexkroman1/aai-ui";
+ *
+ * function Conversation() {
+ *   return <MessageList className="flex-1" />;
+ * }
+ * ```
+ *
+ * @param props - Container props.
+ *
+ * @public
+ */
+export declare const MessageList: MemoExoticComponent<FunctionComponent<MessageListProps>>;

package/dist/components/message-list.js

@@ -0,0 +1,3 @@
+import "../context.js";
+import { t as MessageList } from "../message-list-DHZcLhRA.js";
+export { MessageList };

package/dist/components/session-controls.d.ts

@@ -0,0 +1,125 @@
+import { type ReactNode } from "react";
+/**
+ * Which of the four buttons a {@link SessionControlButton} is.
+ *
+ * @public
+ */
+export type SessionControlAction = "start" | "toggle" | "restart" | "end";
+/**
+ * One button of {@link SessionControls}, as handed to `renderButton`.
+ *
+ * @public
+ */
+export type SessionControlButton = {
+    /** Which button this is. A custom renderer switches on it for its look. */
+    action: SessionControlAction;
+    /** The label to show — the caller's own word, or the default. */
+    label: string;
+    /** The handler. Already bound; wire it to `onClick` as it is. */
+    onClick: () => void;
+    /**
+     * Whether the call is live. Meaningful on `toggle`, whose label already says
+     * which way it will flip, and handed to every button so a renderer can dim
+     * the others while paused.
+     */
+    running: boolean;
+};
+/**
+ * The five words {@link SessionControls} renders, every one overridable.
+ *
+ * @public
+ */
+export type SessionControlsLabels = {
+    /** The button shown before the call starts. Default `"Start"`. */
+    start: string;
+    /** The toggle's label while running. Default `"Pause"`. */
+    pause: string;
+    /** The toggle's label while paused. Default `"Resume"`. */
+    resume: string;
+    /** Hang up and dial again. Default `"New Conversation"`. */
+    restart: string;
+    /** Hang up. Default `"End"`. */
+    end: string;
+};
+/**
+ * Props of {@link SessionControls}.
+ *
+ * @public
+ */
+export type SessionControlsProps = {
+    /** The words this chrome has its own term for; the rest keep the defaults. */
+    labels?: Partial<SessionControlsLabels> | undefined;
+    /**
+     * Renders one button. Absent, each is a stock {@link Button}. A chrome
+     * with its own look renders its own `<button>` from the
+     * {@link SessionControlButton} it is handed — the component still decides
+     * WHICH buttons exist and what each one does.
+     */
+    renderButton?: ((button: SessionControlButton) => ReactNode) | undefined;
+    /** Additional CSS class names for the row, appended to its own layout classes. */
+    className?: string | undefined;
+    /** Rendered after the buttons — a count, a spacer, a status line. */
+    children?: ReactNode;
+};
+/**
+ * The full control row of a custom chrome: **Start** before the call, then
+ * **Pause / Resume**, **New Conversation** and **End** once it is up.
+ *
+ * {@link Controls} is the stock console's footer — Stop/Resume and New
+ * Conversation, with the URL chips — and it has no Start branch and no End,
+ * because the default shell shows a start SCREEN and a session there ends by
+ * closing the tab. A chrome that owns its whole frame has no start screen, so
+ * three of them each wrote this row: the same `!started` branch, the same
+ * three buttons behind it, and the same twelve-line comment on why the middle
+ * one is `end(); start()` and not `reset()`. The buttons' look is the
+ * chrome's — `renderButton` — and everything else is here once.
+ *
+ * **Why `restart` is `end()` then `start()`, and never `reset()`.** `reset()`
+ * clears the transcript and reconnects carrying the same session id, so every
+ * `sessionSlot` on the agent survives: a caller who pressed "New Conversation"
+ * on a stateful agent got a blank transcript in front of their old cart, game
+ * or incident board, with nothing on screen saying so, and the next tool call
+ * repopulated it. `end()` drops the resume identity, so the redial is a
+ * brand-new session — fresh state, greeting included — and `start()` puts the
+ * chrome straight back on the call rather than at its Start button.
+ *
+ * **Why End is `end()`.** It hangs up and flips `started` back, so the row
+ * returns to its Start button and the next start is a new session. `reset()`
+ * would keep the call live — the buttons never toggle back.
+ *
+ * Reads the session through {@link useSessionControls}: two one-field
+ * subscriptions, so the row re-renders when a flag flips and not on every
+ * transcript partial.
+ *
+ * @example A board's controls in its own colours, with a trailing count
+ * ```tsx
+ * import { SessionControls } from "@alexkroman1/aai-ui";
+ *
+ * const BUTTON = "px-4 py-2 rounded-md text-xs font-semibold cursor-pointer";
+ *
+ * function ShiftControls({ logged }: { logged: number }) {
+ *   return (
+ *     <SessionControls
+ *       labels={{ start: "Start Dispatch", end: "End Shift" }}
+ *       renderButton={({ action, label, onClick }) => (
+ *         <button
+ *           type="button"
+ *           className={BUTTON}
+ *           style={{ background: action === "end" ? "#dc2626" : "#2563eb", color: "white" }}
+ *           onClick={onClick}
+ *         >
+ *           {label}
+ *         </button>
+ *       )}
+ *     >
+ *       <span className="ml-auto text-[10px]">{logged} incidents logged</span>
+ *     </SessionControls>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link SessionControlsProps}.
+ *
+ * @public
+ */
+export declare function SessionControls({ labels, renderButton, className, children, }: SessionControlsProps): ReactNode;

package/dist/components/session-error-banner.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+/**
+ * Props of {@link SessionErrorBanner}.
+ *
+ * Every field is optional, so `<SessionErrorBanner />` is the whole call. It is
+ * a NAMED type all the same, for the reason `ControlsProps` and
+ * `ConsoleShellProps` are: an inline object literal in the signature leaves a
+ * `createElement(SessionErrorBanner, { className })` caller unable to infer the
+ * props at all, and gives the reference page nothing to link to.
+ *
+ * @public
+ */
+export type SessionErrorBannerProps = {
+    /** Additional CSS class names for the banner, appended to its own. */
+    className?: string | undefined;
+};
+/**
+ * The announced banner for a failed session: the error's message and code, or
+ * nothing at all when the session is fine.
+ *
+ * **This used to be four lines inside `ConsoleShell`, and that is why it is its
+ * own component.** The banner was the reason `ConsoleShell` was published —
+ * `role="alert"` is the one part of that component a reviewer cannot see is
+ * missing, since per the `fatalError` latch in `session/browser-session.ts` the banner is
+ * the ONLY remaining signal a session died (the state eyebrow beside it goes
+ * back to reading like a live session), and a screen reader is never told an
+ * unannounced one appeared. But `ConsoleShell` is a whole FRAME: a centred
+ * `max-w-190` column with its own header and footer. Every full-bleed chrome —
+ * a two-pane board, a CRT — therefore could not adopt it, rebuilt the banner
+ * instead, and the three that did had ALREADY drifted: one rendered
+ * `ERROR: {message}` and dropped the code entirely, one `ERROR: {message}
+ * ({code})`, one `{message} ({code})`. Splitting the banner out is what lets a
+ * chrome take the announced-error decision without taking the layout, and
+ * `ConsoleShell` composes this rather than keeping a second copy, so the two
+ * cannot drift again.
+ *
+ * **It reads the session itself.** There is no `error` prop: a banner that
+ * takes its text from the caller is a banner a caller can forget to wire, which
+ * is exactly the failure above with an extra step. It subscribes narrowly via
+ * {@link useSessionError}, so a page that renders it does not re-render with
+ * the transcript.
+ *
+ * **The code is shown, always.** `SessionError.code` is the eight-member wire
+ * union — it is what a user pastes into a bug report and the only part of the
+ * error that is stable across wordings — and the chrome that dropped it left
+ * its readers with a sentence and no way to say which failure it was.
+ *
+ * Must be rendered inside the providers `client()` installs.
+ *
+ * @example A full-bleed chrome that wants the banner and not the frame
+ * ```tsx
+ * import { SessionErrorBanner } from "@alexkroman1/aai-ui";
+ *
+ * function Board() {
+ *   return (
+ *     <div className="grid grid-cols-[1fr_320px] h-screen">
+ *       <main>…</main>
+ *       <aside>…</aside>
+ *       <SessionErrorBanner className="col-span-2" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - See {@link SessionErrorBannerProps}.
+ *
+ * @public
+ */
+export declare function SessionErrorBanner({ className }: SessionErrorBannerProps): ReactNode;