@ciridae/ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,75 @@
+import type { ChatAttachment } 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;
+    };
+}
+/** 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/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,13 +1,10 @@
-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.
 const text = css({
@@ -15,9 +12,46 @@ const text = css({
     gap: "control.iconGap",
     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/components/activity-feed.d.ts

@@ -71,10 +71,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/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,79 @@
+import { type PaletteName } from "../theme/index.js";
+import { type AppNavigationProps } from "./app-navigation.js";
+import { type MenuItem } from "./menu.js";
+import type { 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;
+/** 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;

package/dist/components/app-frame.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The app's frame, composed from the shell's pieces: the sidebar that folds to a rail and then
+ * into the phone menu, its footer rows and account menu drawn for each width, and, given a
+ * `title`, the main panel's header too. `AccountMenu` is the signed-in account's menu: the app's
+ * own entries, the color theme and palette, and sign out. Auth stays with the host, which passes
+ * sign-out as an action.
+ */
+import { ArrowClockwiseIcon, CaretUpIcon, CircleHalfIcon, PaletteIcon, PulseIcon, SignOutIcon, } from "@phosphor-icons/react";
+import { PALETTE_NAMES } from "../theme/index.js";
+import { AppNavigation } from "./app-navigation.js";
+import { Button, IconButton } from "./button.js";
+import { useColorTheme } from "./color-theme.js";
+import { icon } from "./icon.js";
+import { KeyboardShortcuts } from "./keyboard-shortcuts.js";
+import { Link } from "./link.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+import { AppAccountButton, AppBreadcrumbs, AppContent, AppHeader, AppHeaderActions, AppHeaderCompact, AppMain, AppShell, AppSidebar, AppSidebarFooter, AppSidebarFootnote, AppSidebarGroup, AppSidebarNav, AppSidebarOnly, AppSidebarRail, } from "./shell.js";
+import { SidebarItem } from "./sidebar.js";
+import { useNewVersionAvailable } from "./use-new-version-available.js";
+/** The color theme submenu: system, light or dark. */
+export function useColorThemeMenuItem() {
+    const colorTheme = useColorTheme();
+    const { labels } = useCiridaeLocale();
+    const choices = [
+        { value: "system", label: labels.themeCustomizer.system },
+        { value: "light", label: labels.themeCustomizer.light },
+        { value: "dark", label: labels.themeCustomizer.dark },
+    ];
+    return {
+        label: labels.themeCustomizer.colorTheme,
+        icon: _jsx(CircleHalfIcon, { className: icon({ size: "small" }) }),
+        items: choices.map((choice) => ({
+            label: choice.label,
+            checked: colorTheme.preference === choice.value,
+            onSelect: () => colorTheme.setPreference(choice.value),
+        })),
+    };
+}
+/** The palette submenu over the kit's palettes. */
+export function usePaletteMenuItem(choice) {
+    return paletteMenuItem(choice, useCiridaeLocale().labels);
+}
+function paletteMenuItem({ value, onValueChange }, labels) {
+    const selected = value ?? "ciridae";
+    return {
+        label: labels.themeCustomizer.palette,
+        icon: _jsx(PaletteIcon, { className: icon({ size: "small" }) }),
+        items: PALETTE_NAMES.map((name) => ({
+            label: labels.themeCustomizer.paletteName(name),
+            checked: selected === name,
+            onSelect: () => onValueChange(name),
+        })),
+    };
+}
+/** The signed-in account's menu: the app's entries, the color theme and palette, then sign out. */
+export function AccountMenu({ avatar, name, detail, items = [], palette, signOut, compact = false, }) {
+    const { labels } = useCiridaeLocale();
+    const colorThemeItem = useColorThemeMenuItem();
+    return (_jsx(Menu, { trigger: _jsx(AppAccountButton, { "aria-label": labels.accountMenu.menu, avatar: avatar, compact: compact, detail: detail, name: name, trailing: _jsx(CaretUpIcon, { className: icon({ size: "tiny" }) }) }), items: [
+            ...items,
+            colorThemeItem,
+            ...(palette ? [paletteMenuItem(palette, labels)] : []),
+            ...(signOut
+                ? [
+                    { separator: true },
+                    {
+                        ...signOut,
+                        label: labels.accountMenu.signOut,
+                        icon: _jsx(SignOutIcon, { className: icon({ size: "small" }) }),
+                        variant: "danger",
+                    },
+                ]
+                : []),
+        ] }));
+}
+/** The app's frame: the sidebar for every width, its footer and account, and the page. */
+export function AppFrame({ title, actions, sidebarTop, sidebarRail, navigation, sidebar, sidebarFooter, items = [], footnote, buildSha = null, statusUrl, railActions, compactActions, account, overlays, children, }) {
+    const { labels } = useCiridaeLocale();
+    const statusLink = statusUrl && (_jsx(IconButton, { "aria-label": labels.appFrame.status, nativeButton: false, render: _jsx("a", { href: statusUrl, target: "_blank", rel: "noreferrer" }), children: _jsx(PulseIcon, { className: icon() }) }));
+    const sidebarFoot = (_jsxs(_Fragment, { children: [(sidebarFooter || buildSha !== null || items.length > 0) && (_jsxs(AppSidebarOnly, { children: [sidebarFooter, buildSha !== null && _jsx(BuildUpdateButton, { buildSha: buildSha }), items.map((item) => (_jsx(SidebarItem, { "aria-pressed": item.pressed, icon: item.icon, onClick: item.onClick, children: item.label }, item.id)))] })), _jsxs(AppSidebarFootnote, { children: [footnote, statusUrl && (_jsxs(_Fragment, { children: [_jsx(Link, { external: true, tone: "muted", href: statusUrl, children: labels.appFrame.status }), _jsx("span", { "aria-hidden": "true", children: "\u00B7" })] })), _jsx("code", { title: buildSha ?? undefined, children: buildSha ? buildSha.slice(0, 7) : labels.appFrame.localBuild })] }), (railActions || statusLink || items.length > 0) && (_jsxs(AppSidebarOnly, { rail: true, children: [items.map((item) => (_jsx(SidebarItem, { "aria-label": item.label, "aria-pressed": item.pressed, icon: item.icon, onClick: item.onClick }, item.id))), railActions, statusLink] })), account && (_jsxs(_Fragment, { children: [_jsx(AppSidebarOnly, { children: _jsx(AccountMenu, { ...account }) }), _jsx(AppSidebarOnly, { rail: true, children: _jsx(AccountMenu, { ...account, compact: true }) })] }))] }));
+    return (_jsxs(AppShell, { children: [_jsx(KeyboardShortcuts, {}), navigation ? (_jsx(AppNavigation, { ...navigation, header: sidebarTop, railHeader: sidebarRail, footer: sidebarFoot })) : (_jsxs(AppSidebar, { children: [_jsx(AppSidebarGroup, { children: sidebarTop }), _jsx(AppSidebarRail, { children: sidebarRail }), sidebar && _jsx(AppSidebarNav, { children: sidebar }), _jsx(AppSidebarFooter, { children: sidebarFoot })] })), title === undefined ? (children) : (_jsxs(AppMain, { children: [_jsx(AppHeader, { actions: _jsxs(AppHeaderActions, { children: [actions, _jsxs(AppHeaderCompact, { children: [compactActions, statusLink, items.map((item) => (_jsx(IconButton, { "aria-label": item.label, "aria-pressed": item.pressed, onClick: item.onClick, children: item.icon }, item.id))), account && _jsx(AccountMenu, { ...account, compact: true })] })] }), children: _jsx(AppBreadcrumbs, { children: title }) }), _jsx(AppContent, { children: children })] })), overlays] }));
+}
+/** Only mounted for a named build, so local previews do not need a query provider. */
+function BuildUpdateButton({ buildSha }) {
+    const hasNewVersion = useNewVersionAvailable(buildSha);
+    const { labels } = useCiridaeLocale();
+    if (!hasNewVersion)
+        return null;
+    return (_jsx(Button, { variant: "secondary", fullWidth: true, icon: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }), onClick: () => window.location.reload(), children: labels.appFrame.updateAvailable }));
+}

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

@@ -59,8 +59,8 @@ export type AppNavigationProps = Omit<ComponentProps<"aside">, "children"> & {
  * out of room, so it does not flicker at the threshold.
  */
 export declare function useSidebarRoom(foldedRows: number): {
-    navRef: import("@types/react").RefObject<HTMLDivElement | null>;
-    footerRef: import("@types/react").RefObject<HTMLDivElement | null>;
+    navRef: import("react").RefObject<HTMLDivElement | null>;
+    footerRef: import("react").RefObject<HTMLDivElement | null>;
     roomy: boolean;
 };
-export declare function AppNavigation({ sections, activeId: ownActiveId, renderLink, header, railHeader, footer, autoUnfold, labels: ownLabels, ...props }: AppNavigationProps): import("@types/react").JSX.Element;
+export declare function AppNavigation({ sections, activeId: ownActiveId, renderLink, header, railHeader, footer, autoUnfold, labels: ownLabels, ...props }: AppNavigationProps): import("react").JSX.Element;

package/dist/components/badge.d.ts

@@ -11,4 +11,4 @@ export type BadgeProps = Omit<useRender.ComponentProps<"span">, "children"> & {
     icon?: ReactNode;
     children: ReactNode;
 };
-export declare function Badge({ tone, shape, appearance, icon, children, render, className, ...props }: BadgeProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function Badge({ tone, shape, appearance, icon, children, render, className, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/brand-icons.d.ts

@@ -3,15 +3,15 @@ import type { SVGProps } from "react";
  * GitHub's own mark, rather than a lookalike from an icon set: it carries the brand, so it should
  * be the shape people recognize. Path from Octicons `mark-github` (MIT).
  */
-export declare function GithubMarkIcon(props: SVGProps<SVGSVGElement>): import("@types/react").JSX.Element;
+export declare function GithubMarkIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 /**
  * The mark in the current text color, so it follows the theme. Decorative unless given a
  * `title`, which names it for assistive technology.
  */
 export declare function CiridaeMark({ title, ...props }: SVGProps<SVGSVGElement> & {
     title?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /** The mark over its wordmark, in the current text color; `title` names it for assistive technology. */
 export declare function CiridaeLogo({ title, ...props }: SVGProps<SVGSVGElement> & {
     title: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/bulk-action-bar.d.ts

@@ -12,4 +12,4 @@ export declare function BulkActionBar({ count, onClear, actions, onSelectAll, to
     /** Every row the list holds, as the Select all button counts it. */
     total?: string;
     labels?: Partial<CiridaeLabels["table"]>;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/button.d.ts

@@ -13,7 +13,7 @@ export type ButtonProps = Omit<BaseButtonProps, "className"> & {
     /** The hotkey that does what the button does, shown after its label; the host binds it. */
     shortcut?: Hotkey;
 };
-export declare function Button({ className, variant, size, fullWidth, loading, icon, shortcut, children, disabled, ...props }: ButtonProps): import("@types/react").JSX.Element;
+export declare function Button({ className, variant, size, fullWidth, loading, icon, shortcut, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
 export type DataButtonState = "idle" | "pending" | "error" | "success";
 export type DataButtonProps = Omit<ButtonProps, "children" | "icon" | "loading"> & {
     state: DataButtonState;
@@ -24,14 +24,14 @@ export type DataButtonProps = Omit<ButtonProps, "children" | "icon" | "loading">
     icon?: ReactNode;
 };
 /** Async action button with consistent pending, retry, and completion feedback. */
-export declare function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant, icon, disabled, ...props }: DataButtonProps): import("@types/react").JSX.Element;
+export declare function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant, icon, disabled, ...props }: DataButtonProps): import("react").JSX.Element;
 type IconButtonSize = "compact" | "small" | "medium" | "large";
 /**
  * The size an `IconButton` takes where it does not set its own, so the container decides: the
  * sidebar rail's icons are large, and the same icon shown in the phone header matches the header's
  * small buttons.
  */
-export declare const IconButtonSizeContext: import("@types/react").Context<IconButtonSize>;
+export declare const IconButtonSizeContext: import("react").Context<IconButtonSize>;
 export type IconButtonProps = Omit<BaseButtonProps, "className" | "aria-label"> & {
     className?: string;
     "aria-label": string;
@@ -48,5 +48,5 @@ export type IconButtonProps = Omit<BaseButtonProps, "className" | "aria-label">
      */
     shortcut?: Hotkey;
 };
-export declare function IconButton({ className, size, variant, badge, shortcut, children, "aria-label": label, ...props }: IconButtonProps): import("@types/react").JSX.Element;
+export declare function IconButton({ className, size, variant, badge, shortcut, children, "aria-label": label, ...props }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/calendar.d.ts

@@ -10,5 +10,5 @@ export type CalendarProps = {
     weekStartsOn?: WeekStartsOn;
     labels?: Partial<CiridaeLabels["calendar"]>;
 };
-export declare function Calendar({ month, selected, onMonthChange, onSelect, locale: ownLocale, weekStartsOn, labels: ownLabels, }: CalendarProps): import("@types/react").JSX.Element;
+export declare function Calendar({ month, selected, onMonthChange, onSelect, locale: ownLocale, weekStartsOn, labels: ownLabels, }: CalendarProps): import("react").JSX.Element;
 export {};

package/dist/components/centered-page.d.ts

@@ -18,4 +18,4 @@ export type CenteredPageProps = {
  * content. `form` width narrows both for a short form; `wide` suits a card holding a list whose
  * rows carry a label, a detail, and a control.
  */
-export declare function CenteredPage({ brand, aside, title, description, header, width, children, }: CenteredPageProps): import("@types/react").JSX.Element;
+export declare function CenteredPage({ brand, aside, title, description, header, width, children, }: CenteredPageProps): import("react").JSX.Element;