@ciridae/ui 1.0.2 → 1.0.4

package/dist/chat/conversation-source.d.ts

@@ -0,0 +1,89 @@
+import type { ChatAttachment, ChatSource, ChatStep } from "../components/chat.js";
+import type { ResolveFileUrl } from "../components/resolved-file-url.js";
+import type { ReactNode } from "react";
+/**
+ * How the conversation's latest turn stands: `running` while the agent works on it, `failed` or
+ * `stopped` once it ended that way, `idle` otherwise, a turn waiting on the user included. The
+ * lib draws the ending of the latest turn, so the source leaves it out of `items`.
+ */
+export type ChatTurnStatus = "idle" | "running" | "failed" | "stopped";
+/** One entry of the conversation, oldest first. `at` is epoch milliseconds. */
+export type ChatConversationItem = {
+    id: string;
+    at: number;
+} & ({
+    kind: "message";
+    role: "user" | "assistant";
+    /**
+     * The user's text as typed, mentions as `[@label](mention://kind/id)`; the assistant's as
+     * Markdown, its link reference definitions drawn as sources under it.
+     */
+    text: string;
+    attachments?: readonly ChatAttachment[];
+    /** The service has not taken the user's message yet. */
+    sending?: boolean;
+    /** The user's message did not send: why, and how to send it again. */
+    failure?: {
+        message?: string;
+        retry: () => void;
+    };
+    /** Sources the reply cites beyond its Markdown's, such as the values it read, as cards. */
+    sources?: readonly ChatSource[];
+    /** Buttons under the reply for what it suggests doing on the page. */
+    suggestedActions?: ReactNode;
+    /** A closing line under the reply, such as what it read. */
+    footnote?: ReactNode;
+}
+/**
+ * A step the agent took on its way to a reply. The thread folds a run of them into one line,
+ * and draws the newest one of the running turn as what the agent is doing.
+ */
+ | {
+    kind: "step";
+    step: Omit<ChatStep, "id">;
+}
+/** A line about the conversation, such as how an earlier turn ended. */
+ | {
+    kind: "line";
+    text: ReactNode;
+    tone?: "muted" | "error";
+}
+/** Something of the source's own in the agent's flow, such as an approval it waits on. */
+ | {
+    kind: "card";
+    content: ReactNode;
+});
+/** A message the composer sends: its text and the files `upload` returned for it. */
+export type ChatOutgoingMessage = {
+    text: string;
+    attachments: readonly ChatAttachment[];
+};
+export type ChatConversationSource = {
+    items: readonly ChatConversationItem[];
+    status: ChatTurnStatus;
+    /** The conversation is loading: its items are not there yet. */
+    loading?: boolean;
+    /** Why the latest turn failed, on its failure; the locale's "Failed" otherwise. */
+    failureMessage?: string;
+    /** Runs the failed latest turn again, as Retry on its failure. */
+    retry?: () => void;
+    /**
+     * Sends a message, creating the conversation with it when there is none yet. The composer
+     * clears as it sends; a rejection gives the text back and shows the error over it.
+     */
+    send: (message: ChatOutgoingMessage) => Promise<void>;
+    /** Uploads a file to go with the next message; without it, the composer takes no files. */
+    upload?: (file: File) => Promise<ChatAttachment>;
+    /** Loads the link of an attachment with no `url`; see `ResolveFileUrl`. */
+    resolveAttachmentUrl?: ResolveFileUrl<ChatAttachment>;
+};
+/** A conversation in `ChatHistory`. `updatedAt` is epoch milliseconds. */
+export type ChatConversationSummary = {
+    id: string;
+    title: string | null;
+    /** The latest message as one line, in place of a missing title. */
+    preview?: string | null;
+    updatedAt: number;
+    /** The agent is working in it: a spinner in place of its time. */
+    running?: boolean;
+};

package/dist/chat/conversation-source.js

@@ -0,0 +1 @@
+export {};

package/dist/chat/describe-tool-call.d.ts

@@ -1,5 +1,5 @@
 /**
- * What a tool call waiting for approval asks to do, read from a tool name that starts with its
- * verb: `search_invoices` is "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
+ * What a tool call does, read from a tool name that starts with its verb: `search_invoices` is
+ * "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
  */
-export declare function describeApprovalRequest(toolName: string): string;
+export declare function describeToolCall(toolName: string): string;

package/dist/chat/describe-tool-call.js

@@ -12,10 +12,10 @@ const singleWordVerbs = new Set([
     "write",
 ]);
 /**
- * What a tool call waiting for approval asks to do, read from a tool name that starts with its
- * verb: `search_invoices` is "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
+ * What a tool call does, read from a tool name that starts with its verb: `search_invoices` is
+ * "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
  */
-export function describeApprovalRequest(toolName) {
+export function describeToolCall(toolName) {
     const [verb = toolName, ...rest] = splitIdentifierWords(toolName).map((word) => word.toLowerCase());
     const object = rest.join(" ");
     if (!object && !singleWordVerbs.has(verb))

package/dist/chat/message-text.d.ts

@@ -20,4 +20,4 @@ export type MessageTextProps = {
     plain?: boolean;
     className?: string;
 };
-export declare function MessageText({ content, onMentionSelect, mentionHref, plain, className, }: MessageTextProps): import("@types/react").JSX.Element;
+export declare function MessageText({ content, onMentionSelect, mentionHref, plain, className, }: MessageTextProps): import("react").JSX.Element;

package/dist/chat/message-text.js

@@ -1,23 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Markdown } from "@tanstack/markdown/react";
+import { createContext, useContext, useMemo } from "react";
 import { css, cx } from "#primitives/css";
 import { parseMentions } from "./contract.js";
-/*
- * A reply's text as the agent writes it: paragraphs split by blank lines, `- ` lists, **bold**,
- * `code`, [links](url), and mentions as chips. Enough for the agent sheet's short answers without
- * a Markdown dependency; a full renderer can replace this when replies carry more than that.
- * Markdown link reference definitions (`[1]: url "Title"`) draw nothing in place; `splitSources`
- * lifts them out as the reply's sources.
+/* TanStack owns Markdown parsing/rendering; the adapter adds our mention chips and bare URLs.
+ * Raw HTML stays text. Source definitions are lifted out separately for the reply's source row.
  */
-// Sized by the bubble it sits in.
+// Sized by the bubble it sits in; its paragraphs, lists and tables 12px apart.
 const text = css({
     display: "grid",
-    gap: "control.iconGap",
+    gap: "layout.contentGap",
     minWidth: "0",
     overflowWrap: "anywhere",
-    "& p, & ul": { margin: "none" },
-    "& ul": { paddingInlineStart: "layout.clusterGap" },
+    "& :is(p, ul, ol, pre, table, blockquote, h1, h2, h3, h4, h5, h6, hr)": { margin: "none" },
+    "& p": { whiteSpace: "pre-line" },
+    "& :is(h1, h2, h3, h4, h5, h6)": { fontSize: "inherit", fontWeight: "semibold" },
+    "& :is(ul, ol)": { paddingInlineStart: "layout.clusterGap" },
+    "& li > :is(ul, ol)": { marginBlockStart: "control.trackInset" },
+    "& li + li": { marginBlockStart: "control.trackInset" },
     "& code": { fontFamily: "mono", fontSize: "code" },
+    "& pre": {
+        overflowX: "auto",
+        paddingBlock: "control.compactBlock",
+        paddingInline: "control.compactInline",
+        borderRadius: "keycap",
+        background: "bg.raised",
+        whiteSpace: "pre",
+        overflowWrap: "normal",
+    },
+    "& blockquote": {
+        display: "grid",
+        gap: "control.iconGap",
+        paddingInlineStart: "control.compactInline",
+        borderInlineStart: "2px solid token(colors.border.control)",
+        color: "fg.muted",
+    },
+    "& hr": { border: "0", borderTop: "1px solid token(colors.border.control)" },
+    "& table": {
+        display: "block",
+        maxWidth: "100%",
+        overflowX: "auto",
+        borderCollapse: "collapse",
+        fontVariantNumeric: "tabular-nums",
+    },
+    "& :is(th, td)": {
+        paddingBlock: "control.trackInset",
+        paddingInline: "control.compactBlock",
+        borderBottom: "1px solid token(colors.border.control)",
+        textAlign: "start",
+        verticalAlign: "top",
+        overflowWrap: "normal",
+    },
+    "& th": { fontWeight: "medium" },
     "& a:not([data-mention])": { color: "inherit", textDecoration: "underline" },
 });
 const mention = css({
@@ -37,16 +71,18 @@ const mention = css({
     cursor: "default",
     "&:is(button, a)": { cursor: "pointer", _hover: { background: "bg.raisedHover" } },
 });
-const inlinePattern = /(\*\*[^*]+\*\*|`[^`]+`|\[[^[\]@][^[\]]*\]\([^)\s]+\))/;
-const linkPattern = /^\[([^\]]+)\]\(([^)\s]+)\)$/;
 const sourcePattern = /^\s*\[([^\]]+)\]:\s*(\S+)(?:\s+"([^"]*)")?\s*$/;
+const fencePattern = /^\s*(?:`{3,}|~{3,})/;
 /** The reply's text without its link reference definitions, and those definitions as sources. */
 export function splitSources(content) {
     const sources = [];
+    let inFence = false;
     const body = content
         .split("\n")
         .filter((line) => {
-        const match = sourcePattern.exec(line);
+        if (fencePattern.test(line))
+            inFence = !inFence;
+        const match = inFence ? null : sourcePattern.exec(line);
         if (!match)
             return true;
         const [, id = "", href = "", title] = match;
@@ -71,48 +107,80 @@ const plainText = css({
         _hover: { background: "transparent", textDecoration: "underline" },
     },
 });
+const MentionContext = createContext({});
 export function MessageText({ content, onMentionSelect, mentionHref, plain = false, className, }) {
+    const handlers = useMemo(() => ({ onMentionSelect, mentionHref }), [onMentionSelect, mentionHref]);
     if (plain) {
-        return (_jsx("div", { className: cx(text, plainText, className), "data-ciridae-ui": "", children: parseMentions(content).map((part, index) => typeof part === "string" ? part : renderMention(part, index, onMentionSelect, mentionHref)) }));
+        return (_jsx("div", { className: cx(text, plainText, className), "data-ciridae-ui": "", children: parseMentions(content).map((part, index) => typeof part === "string" ? part : renderMention(part, index, handlers)) }));
     }
-    const blocks = splitSources(content)
-        .body.split(/\n\s*\n/)
-        .filter((block) => block.trim().length > 0);
-    const inline = (line) => renderInline(line, onMentionSelect, mentionHref);
-    return (_jsx("div", { className: cx(text, className), "data-ciridae-ui": "", children: blocks.map((block, blockIndex) => {
-            const lines = block.split("\n");
-            if (lines.every((line) => /^\s*[-*] /.test(line))) {
-                return (_jsx("ul", { children: lines.map((line, lineIndex) => (_jsx("li", { children: inline(line.replace(/^\s*[-*] /, "")) }, lineIndex))) }, blockIndex));
-            }
-            return (_jsx("p", { children: lines.map((line, lineIndex) => (_jsxs(Fragment, { children: [lineIndex > 0 && _jsx("br", {}), inline(line)] }, lineIndex))) }, blockIndex));
-        }) }));
+    return (_jsx("div", { className: cx(text, className), "data-ciridae-ui": "", children: _jsx(MentionContext.Provider, { value: handlers, children: _jsx(Markdown, { headingIds: false, extensions: [chatInline], components: markdownComponents, children: splitSources(content).body }) }) }));
 }
 /** A mention as a chip: a link with `mentionHref`, a button with `onMentionSelect`, else a label. */
-function renderMention(part, key, onMentionSelect, mentionHref) {
-    const href = mentionHref?.(part);
+function renderMention(part, key, handlers) {
+    const href = handlers.mentionHref?.(part);
     if (href) {
         return (_jsx("a", { href: href, className: mention, "data-ciridae-ui": "", "data-mention": "", children: part.label }, key));
     }
+    const { onMentionSelect } = handlers;
     return onMentionSelect ? (_jsx("button", { type: "button", className: mention, "data-ciridae-ui": "", onClick: () => onMentionSelect(part), children: part.label }, key)) : (_jsx("span", { className: mention, "data-ciridae-ui": "", children: part.label }, key));
 }
-function renderInline(line, onMentionSelect, mentionHref) {
-    return parseMentions(line).map((part, partIndex) => {
-        if (typeof part !== "string")
-            return renderMention(part, partIndex, onMentionSelect, mentionHref);
-        return part.split(inlinePattern).map((run, runIndex) => {
-            const key = `${partIndex}-${runIndex}`;
-            if (run.startsWith("**") && run.endsWith("**")) {
-                return _jsx("strong", { children: run.slice(2, -2) }, key);
+function MarkdownMention({ id, kind, label }) {
+    return renderMention({ id, kind, label }, 0, useContext(MentionContext));
+}
+// Keep heading levels inside the surrounding chat page, and ordinary external links in a new tab.
+const markdownComponents = {
+    "chat-mention": MarkdownMention,
+    h1: "h3",
+    h2: "h4",
+    h3: "h5",
+    h4: "h6",
+    h5: "h6",
+    h6: "h6",
+    a: ({ href, ...props }) => (_jsx("a", { ...props, href: href, target: /^[a-z][a-z\d+.-]*:/i.test(href ?? "") ? "_blank" : undefined, rel: "noreferrer" })),
+    // Images belong in the attachment viewer, not arbitrary remote requests from a reply.
+    img: ({ alt }) => _jsx(_Fragment, { children: alt }),
+};
+/** Small inline additions, leaving fences, escapes, nesting and URL safety to TanStack. */
+const chatInline = {
+    name: "chat-inline",
+    inlineParser: {
+        markers: "[h<",
+        parse({ source, index, inLink }) {
+            if (inLink)
+                return undefined;
+            const rest = source.slice(index);
+            const token = /^\[@[^\]]+\]\(mention:\/\/[a-z][a-z0-9_-]*\/[^)\s]+\)/.exec(rest)?.[0];
+            if (token) {
+                const [part] = parseMentions(token);
+                if (part && typeof part !== "string") {
+                    return {
+                        length: token.length,
+                        node: {
+                            type: "inlineComponent",
+                            name: "chat-mention",
+                            tagName: "chat-mention",
+                            attributes: {},
+                            properties: { ...part },
+                            children: [],
+                        },
+                    };
+                }
             }
-            if (run.startsWith("`") && run.endsWith("`"))
-                return _jsx("code", { children: run.slice(1, -1) }, key);
-            const link = linkPattern.exec(run);
-            if (link) {
-                const [, label, href] = link;
-                const external = /^[a-z][a-z\d+.-]*:/i.test(href ?? "");
-                return (_jsx("a", { href: href, target: external ? "_blank" : undefined, rel: external ? "noreferrer" : undefined, children: label }, key));
+            const angle = /^<(https?:\/\/[^<>\s]+)>/.exec(rest);
+            if (!angle && /\w/.test(source[index - 1] ?? ""))
+                return undefined;
+            const url = angle?.[1] ?? /^https?:\/\/[^\s<>]+/.exec(rest)?.[0] ?? "";
+            let length = url.length;
+            while (!angle && length > 0 && /[.,:;"')\]*_~!?]/.test(url[length - 1] ?? ""))
+                length -= 1;
+            if (length > 0) {
+                const href = url.slice(0, length);
+                return {
+                    length: angle?.[0].length ?? length,
+                    node: { type: "link", href, children: [{ type: "text", value: href }] },
+                };
             }
-            return _jsx(Fragment, { children: run }, key);
-        });
-    });
-}
+            return undefined;
+        },
+    },
+};

package/dist/chat/use-conversation-list.d.ts

@@ -2,17 +2,17 @@ import type { ChatClient } from "./chat-client.js";
 /** The caller's conversations, newest first, one page at a time. */
 export declare function useConversationList(client: ChatClient, { enabled }?: {
     enabled?: boolean;
-}): import("@tanstack/react-query/build/legacy").UseInfiniteQueryResult<import("@tanstack/react-query/build/legacy").InfiniteData<{
+}): import("@tanstack/react-query").UseInfiniteQueryResult<import("@tanstack/react-query").InfiniteData<{
     data: {
-        id: string & import("zod/index.cjs").$brand<"ConversationId">;
+        id: string & import("zod").$brand<"ConversationId">;
         agent: string;
         title: string | null;
         metadata: Record<string, string>;
         latest_response: {
-            id: string & import("zod/index.cjs").$brand<"ResponseId">;
-            conversation_id: string & import("zod/index.cjs").$brand<"ConversationId">;
-            status: "queued" | "in_progress" | "requires_action" | "completed" | "failed" | "cancelled";
-            output_item_ids: (string & import("zod/index.cjs").$brand<"ItemId">)[];
+            id: string & import("zod").$brand<"ResponseId">;
+            conversation_id: string & import("zod").$brand<"ConversationId">;
+            status: "failed" | "in_progress" | "completed" | "queued" | "requires_action" | "cancelled";
+            output_item_ids: (string & import("zod").$brand<"ItemId">)[];
             usage: {
                 input_tokens: number;
                 output_tokens: number;

package/dist/ciridae.css

@@ -37,11 +37,18 @@
 	}
 }
 
-/* [data-edge] paints a hairline inside the element's own box, so bordered elements
-   keep a 1px transparent border for layout and borderless groups get an inset ring. */
+/* [data-edge] paints a hairline inside the element's own box. The design counts that stroke in
+   the layout, so an edged element keeps a 1px transparent border under the ring. A border the
+   element sets itself wins: a native button resetting the browser's sets `1px solid transparent`,
+   and a face the design lays its edge over, such as a text button, sets `border: 0`. */
 [data-ciridae-ui][data-edge] {
 	position: relative;
 }
+@layer base {
+	:where([data-ciridae-ui][data-edge]) {
+		border: 1px solid transparent;
+	}
+}
 [data-ciridae-ui][data-edge]::before {
 	content: "";
 	position: absolute;
@@ -64,8 +71,13 @@
 [data-ciridae-ui][data-edge="control"]::before {
 	background: var(--colors-border\.control);
 }
-[data-ciridae-ui][data-edge="toolbar"]::before {
-	background: var(--colors-border\.toolbar);
+/* data-edge="gradient" draws the gradient its element sets in --edge, such as
+   token(gradients.border.infoGlass). In the base layer, so a component's own
+   ::before background still wins. */
+@layer base {
+	:where([data-ciridae-ui][data-edge="gradient"])::before {
+		background: var(--edge, none);
+	}
 }
 /* An open trigger draws its own border in the text color, so the ring steps aside. */
 [data-ciridae-ui][data-edge][data-popup-open]::before {

package/dist/components/activity-feed.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode, type RefObject } from "react";
 import { type CiridaeLabels } from "./locale.js";
 import { type UserChipProps } from "./user-chip.js";
+export { LogActor, LogEntry, LogGroupHeader, type LogActorProps, type LogEntryProps, type LogGroupHeaderProps, } from "./log-entry.js";
 export type ActivityFeedActor = Pick<UserChipProps, "name" | "kind" | "src" | "icon" | "profile">;
 export type ActivityFeedUpdate = {
     kind: "update";
@@ -71,10 +72,10 @@ export type ActivityFeedProps = {
     composerRef?: RefObject<HTMLDivElement | null>;
 };
 export type ActivityLabels = CiridaeLabels["activity"];
-export declare function ActivityFeed({ items, filter, onComment, tagOptions, placeholder, now, labels: ownLabels, composerRef, }: ActivityFeedProps): import("@types/react").JSX.Element;
+export declare function ActivityFeed({ items, filter, onComment, tagOptions, placeholder, now, labels: ownLabels, composerRef, }: ActivityFeedProps): import("react").JSX.Element;
 /** All, Comments or Updates, as a compact segmented control. */
 export declare function ActivityFeedFilter({ value, onValueChange, labels: ownLabels, }: {
     value: ActivityFeedFilterValue;
     onValueChange: (value: ActivityFeedFilterValue) => void;
     labels?: Partial<ActivityLabels>;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/activity-feed.js

@@ -14,6 +14,7 @@ import { Toolbar } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
 import { MentionChip, openMentionPicker, readMentions, } from "./mention-input.js";
 import { UserName } from "./user-chip.js";
+export { LogActor, LogEntry, LogGroupHeader, } from "./log-entry.js";
 const FILTERS = [
     { value: "all", label: "all", empty: "noActivity" },
     { value: "comments", label: "comments", empty: "noComments" },

package/dist/components/agent-work.d.ts

@@ -56,7 +56,7 @@ export type AgentWorkProps = {
     className?: string;
 };
 /** What the agent is doing now and what waits on the user; nothing when neither. */
-export declare function AgentWork({ tasks, layout, onTaskSelect, className }: AgentWorkProps): import("@types/react").JSX.Element | null;
+export declare function AgentWork({ tasks, layout, onTaskSelect, className }: AgentWorkProps): import("react").JSX.Element | null;
 export type AgentWorkButtonProps = {
     tasks: readonly AgentTask[];
     /** The drawer's title, such as the agent's name. */
@@ -67,10 +67,10 @@ export type AgentWorkButtonProps = {
  * The agent's work as a header icon button, such as on a phone: spinning while it works, with a
  * dot while something waits on the user, over a drawer with the column.
  */
-export declare function AgentWorkButton({ tasks, title, className }: AgentWorkButtonProps): import("@types/react").JSX.Element | null;
+export declare function AgentWorkButton({ tasks, title, className }: AgentWorkButtonProps): import("react").JSX.Element | null;
 export type AgentTaskCardProps = {
     task: AgentTask;
     onReply?: (task: AgentTask, reply: AgentTaskReply) => void;
 };
 /** The agent asking: a waiting task's question, its details, and Deny / Approve or the answers. */
-export declare function AgentTaskCard({ task, onReply }: AgentTaskCardProps): import("@types/react").JSX.Element | null;
+export declare function AgentTaskCard({ task, onReply }: AgentTaskCardProps): import("react").JSX.Element | null;

package/dist/components/app-frame.d.ts

@@ -0,0 +1,91 @@
+import { type PaletteName } from "../theme/index.js";
+import { type AppNavigationProps } from "./app-navigation.js";
+import { type HotkeyChord } from "./hotkeys.js";
+import { type MenuItem } from "./menu.js";
+import type { ComponentProps, ReactNode } from "react";
+/** The palette the reader shows, which the host keeps, such as in storage, for `ThemeProvider`. */
+export type PaletteChoice = {
+    /** `undefined` is the stylesheet's own palette, `ciridae`. */
+    value: PaletteName | undefined;
+    onValueChange: (palette: PaletteName) => void;
+};
+/** The color theme submenu: system, light or dark. */
+export declare function useColorThemeMenuItem(): MenuItem;
+/** The palette submenu over the kit's palettes. */
+export declare function usePaletteMenuItem(choice: PaletteChoice): MenuItem;
+export type AccountMenuProps = {
+    avatar: ReactNode;
+    name: string;
+    detail?: ReactNode;
+    /** The app's own entries, such as Edit profile, above the color theme. */
+    items?: readonly MenuItem[];
+    /** Adds a palette submenu after the color theme. */
+    palette?: PaletteChoice;
+    /** The last entry, in the danger color. */
+    signOut?: {
+        onSelect: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+    };
+    /** The avatar alone, for the rail and the phone header. */
+    compact?: boolean;
+};
+/** The signed-in account's menu: the app's entries, the color theme and palette, then sign out. */
+export declare function AccountMenu({ avatar, name, detail, items, palette, signOut, compact, }: AccountMenuProps): import("react").JSX.Element;
+export type AssistantLauncherProps = Omit<ComponentProps<"button">, "children"> & {
+    /** Such as "Ask Ciridae"; the rail's button is named by it. */
+    label: string;
+    icon: ReactNode;
+    /** The hotkey that opens the assistant, shown at the end; the host binds it. */
+    hotkey?: HotkeyChord;
+    /** The icon alone, round, for the rail. */
+    compact?: boolean;
+};
+/** Opens the app's assistant from the sidebar's foot: a raised pill, or a round icon in the rail. */
+export declare function AssistantLauncher({ label, icon: launcherIcon, hotkey, compact, className, ...props }: AssistantLauncherProps): import("react").JSX.Element;
+/** A footer control drawn for every width: a sidebar row, a rail icon and a phone-header icon. */
+export type AppFrameItem = {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+    /** For a toggle, such as an assistant pane; marks the control pressed. */
+    pressed?: boolean;
+};
+export type AppAccount = Omit<AccountMenuProps, "compact">;
+export type AppFrameProps = {
+    /**
+     * The main panel's breadcrumbs, the last one the page itself; the frame then draws the panel and
+     * its header. Leave out when each page renders its own `PageFrame`.
+     */
+    title?: ReactNode;
+    /** The header's actions, with `title`. */
+    actions?: ReactNode;
+    /** Top of the expanded sidebar, such as search or the product name. */
+    sidebarTop: ReactNode;
+    /** Top of the rail, which stands in for the sidebar at narrower widths. */
+    sidebarRail: ReactNode;
+    /** The sidebar's sections as data, which `AppNavigation` draws in the sidebar and the rail. */
+    navigation?: Pick<AppNavigationProps, "sections" | "activeId" | "renderLink">;
+    /** The sidebar's own content, in place of `navigation`. */
+    sidebar?: ReactNode;
+    /** Expanded-only content at the top of the footer. */
+    sidebarFooter?: ReactNode;
+    items?: readonly AppFrameItem[];
+    /** Content before the shared status link and build SHA in the expanded footer. */
+    footnote?: ReactNode;
+    /** The bundled commit. A non-null SHA enables checks against /version.json (requires QueryClientProvider). */
+    buildSha?: string | null;
+    /** The app's status page, shown in the footer, rail and phone header. */
+    statusUrl?: string;
+    /** More icons for the rail's footer, after `items`. */
+    railActions?: ReactNode;
+    /** More icons for the phone header, with `title`, before `items` and the account. */
+    compactActions?: ReactNode;
+    account?: AppAccount;
+    /** Dialogs, sheets and other overlays the frame's controls open. */
+    overlays?: ReactNode;
+    children: ReactNode;
+};
+/** The app's frame: the sidebar for every width, its footer and account, and the page. */
+export declare function AppFrame({ title, actions, sidebarTop, sidebarRail, navigation, sidebar, sidebarFooter, items, footnote, buildSha, statusUrl, railActions, compactActions, account, overlays, children, }: AppFrameProps): import("react").JSX.Element;