@ciridae/ui 1.0.4 → 1.0.9

package/README.md

@@ -11,7 +11,8 @@ npm install @ciridae/ui
 Use the published package for new and updated consumers.
 
 Panda generates the component styles in your app. Add the preset, scan the package output, and
-recognise its `css` import alias:
+recognise its `css` import alias. The components use only this preset's tokens; add
+`"@pandacss/preset-panda"` before it only if your own styles use Panda's stock tokens:
 
 ```ts
 // panda.config.ts
@@ -19,7 +20,7 @@ import { ciridaePreset } from "@ciridae/ui/preset";
 import { defineConfig } from "@pandacss/dev";
 
 export default defineConfig({
-	presets: ["@pandacss/preset-panda", ciridaePreset],
+	presets: [ciridaePreset],
 	importMap: { css: ["#primitives/css", "styled-system/css"] },
 	include: ["./src/**/*.{ts,tsx}", "./node_modules/@ciridae/ui/dist/**/*.js"],
 });

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

@@ -27,11 +27,9 @@ export type ChatConversationItem = {
         message?: string;
         retry: () => void;
     };
-    /** Sources the reply cites beyond its Markdown's, such as the values it read, as cards. */
+    /** 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;
 }
 /**

package/dist/chat/message-text.js

@@ -14,7 +14,7 @@ const text = css({
     overflowWrap: "anywhere",
     "& :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(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" },
@@ -38,7 +38,7 @@ const text = css({
     "& hr": { border: "0", borderTop: "1px solid token(colors.border.control)" },
     "& table": {
         display: "block",
-        maxWidth: "100%",
+        maxWidth: "full",
         overflowX: "auto",
         borderCollapse: "collapse",
         fontVariantNumeric: "tabular-nums",
@@ -52,12 +52,12 @@ const text = css({
         overflowWrap: "normal",
     },
     "& th": { fontWeight: "medium" },
-    "& a:not([data-mention])": { color: "inherit", textDecoration: "underline" },
+    "& a:not([data-mention])": { color: "[inherit]", textDecoration: "underline" },
 });
 const mention = css({
     display: "inline-flex",
     alignItems: "center",
-    maxWidth: "100%",
+    maxWidth: "full",
     paddingInline: "control.iconGap",
     border: "1px solid token(colors.border.control)",
     borderRadius: "keycap",
@@ -101,8 +101,8 @@ const plainText = css({
         paddingInline: "none",
         border: "0",
         background: "transparent",
-        color: "inherit",
-        fontSize: "inherit",
+        color: "[inherit]",
+        fontSize: "[inherit]",
         fontWeight: "semibold",
         _hover: { background: "transparent", textDecoration: "underline" },
     },

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

@@ -10,9 +10,14 @@ export type PendingMessage = {
     attachments: readonly Attachment[];
     /** When the user sent it, as epoch milliseconds, so it groups with the messages around it. */
     sentAt: number;
+} & ({
     /** `posted` once the service accepted it, until the conversation's items include it. */
-    state: "sending" | "posted" | "failed";
-};
+    state: "sending" | "posted";
+} | {
+    state: "failed";
+    /** Why this message did not send, from the error its send threw. */
+    failureMessage: string;
+});
 export type ChatConversationState = {
     conversation: Conversation | undefined;
     items: readonly Item[];

package/dist/chat/use-chat-conversation.js

@@ -106,7 +106,8 @@ export function useChatConversation({ client, conversationId, onConversationCrea
             setPendingMessages((existing) => existing.filter((message) => message.localId !== localId));
         }
         catch (error) {
-            setPendingMessages((existing) => existing.map((message) => message.localId === localId ? { ...message, state: "failed" } : message));
+            const failureMessage = error instanceof Error ? error.message : String(error);
+            setPendingMessages((existing) => existing.map((message) => message.localId === localId ? { ...message, state: "failed", failureMessage } : message));
             throw error;
         }
     }, [client, conversationId, onConversationCreated, queryClient]);

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

@@ -1,7 +1,6 @@
 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";

package/dist/components/activity-feed.js

@@ -14,7 +14,6 @@ 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" },
@@ -78,14 +77,14 @@ const updateRun = css({
     gridTemplateColumns: "minmax(0, 1fr)",
     justifyItems: "center",
     gap: "layout.tightGap",
-    maxWidth: "100%",
+    maxWidth: "full",
 });
 // The actors give way to an ellipsis before the count does.
 const runToggle = css({
     display: "inline-flex",
     alignItems: "center",
     gap: "layout.tightGap",
-    maxWidth: "100%",
+    maxWidth: "full",
     padding: "none",
     border: "0",
     background: "transparent",
@@ -94,8 +93,8 @@ const runToggle = css({
     cursor: "pointer",
     _hover: { color: "fg.primary" },
     _focusVisible: { focusRing: "outer" },
-    "& > svg": { transition: "rotate 120ms ease" },
-    "&[aria-expanded=true] > svg": { rotate: "90deg", _rtl: { rotate: "-90deg" } },
+    "& > svg": { transitionProperty: "[rotate]", transitionDuration: "fast" },
+    "&[aria-expanded=true] > svg": { rotate: "[90deg]", _rtl: { rotate: "[-90deg]" } },
     "& > [data-actors]": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
     "& > [data-count]": { flexShrink: "0", whiteSpace: "nowrap" },
 });
@@ -114,7 +113,7 @@ const chip = css({
     display: "inline-flex",
     alignItems: "center",
     gap: "layout.tightGap",
-    maxWidth: "100%",
+    maxWidth: "full",
     minWidth: "0",
     paddingBlock: "control.trackInset",
     paddingInline: "control.iconGap",
@@ -151,7 +150,7 @@ const thumbnail = css({
     _focusVisible: { focusRing: "outer" },
     "& img": {
         display: "block",
-        maxWidth: "100%",
+        maxWidth: "full",
         width: "auto",
         height: "skeleton.medium",
         objectFit: "cover",

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

@@ -70,7 +70,11 @@ export type AgentWorkButtonProps = {
 export declare function AgentWorkButton({ tasks, title, className }: AgentWorkButtonProps): import("react").JSX.Element | null;
 export type AgentTaskCardProps = {
     task: AgentTask;
-    onReply?: (task: AgentTask, reply: AgentTaskReply) => void;
+    /**
+     * Sends the user's approval or answer. The card's buttons wait while it runs, and if it rejects
+     * the card shows its error and takes another reply; the card goes once the task moves on.
+     */
+    onReply: (task: AgentTask, reply: AgentTaskReply) => Promise<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("react").JSX.Element | null;

package/dist/components/agent-work.js

@@ -60,7 +60,7 @@ const nowLine = css({
 });
 const waitingRow = css({
     display: "block",
-    width: "100%",
+    width: "full",
     paddingBlock: "control.compactBlock",
     paddingInline: "menu.itemInline",
     border: "0",
@@ -82,7 +82,7 @@ const summaryBar = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    width: "100%",
+    width: "full",
     minHeight: "control.small",
     paddingBlock: "layout.tightGap",
     paddingInline: "panel.comfortable",
@@ -103,11 +103,11 @@ const summaryBar = css({
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
     },
-    "& > svg:last-child": { transition: "rotate 120ms ease" },
-    "&[aria-expanded=true] > svg:last-child": { rotate: "180deg" },
+    "& > svg:last-child": { transitionProperty: "[rotate]", transitionDuration: "fast" },
+    "&[aria-expanded=true] > svg:last-child": { rotate: "[180deg]" },
 });
 const summaryLists = css({
-    maxHeight: "50vh",
+    maxHeight: "[50vh]",
     overflowY: "auto",
     borderBottom: "1px solid token(colors.border.control)",
 });
@@ -167,7 +167,7 @@ export function AgentWorkButton({ tasks, title, className }) {
 const askCard = css({
     display: "grid",
     gap: "control.iconGap",
-    width: "100%",
+    width: "full",
     maxWidth: "chat.bubble",
     paddingBlock: "control.block",
     paddingInline: "control.compactInline",
@@ -176,9 +176,9 @@ const askCard = css({
     background: "bg.card",
     fontSize: "caption",
     lineHeight: "log",
-    outline: "none",
+    outline: "0",
     scrollMarginBlock: "panel.default",
-    transitionProperty: "border-color, box-shadow",
+    transitionProperty: "[border-color, box-shadow]",
     transitionDuration: "fast",
     "&[data-highlighted]": { borderColor: "border.focus", boxShadow: "focus" },
 });
@@ -192,13 +192,14 @@ const detailList = css({
     "& > dt": { color: "fg.muted", whiteSpace: "nowrap" },
     "& > dd": { margin: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
 });
+const replyError = css({ color: "accent.red", fontSize: "code", lineHeight: "compact" });
 const cardActions = css({ display: "flex", justifyContent: "flex-end", gap: "layout.controlGap" });
 const optionList = css({
-    marginInline: "calc(token(spacing.control.compactInline) * -1)",
-    marginBlockEnd: "calc(token(spacing.control.block) * -1)",
+    marginInline: "[calc(token(spacing.control.compactInline) * -1)]",
+    marginBlockEnd: "[calc(token(spacing.control.block) * -1)]",
     "& > button": {
         display: "block",
-        width: "100%",
+        width: "full",
         paddingBlock: "control.compactBlock",
         paddingInline: "control.compactInline",
         border: "0",
@@ -208,8 +209,9 @@ const optionList = css({
         font: "inherit",
         textAlign: "start",
         cursor: "pointer",
-        _hover: { background: "bg.hover" },
+        "&:enabled:hover": { background: "bg.hover" },
         _focusVisible: { focusRing: "inset" },
+        _disabled: { opacity: "disabled", cursor: "not-allowed" },
         "&:last-child": { borderBottomLeftRadius: "field", borderBottomRightRadius: "field" },
         "& > span": { display: "block", color: "fg.muted", fontSize: "code" },
     },
@@ -217,8 +219,20 @@ const optionList = css({
 /** The agent asking: a waiting task's question, its details, and Deny / Approve or the answers. */
 export function AgentTaskCard({ task, onReply }) {
     const { labels } = useCiridaeLocale();
+    const [replyState, setReplyState] = useState({ kind: "unanswered" });
     const { ask } = task;
     if (!ask)
         return null;
-    return (_jsxs("div", { id: agentTaskAnchorId(task.id), className: askCard, tabIndex: -1, "data-ciridae-ui": "", children: [_jsx("span", { children: ask.text }), ask.kind === "approval" && ask.details && ask.details.length > 0 && (_jsx("dl", { className: detailList, children: ask.details.map((detail) => (_jsxs(Fragment, { children: [_jsx("dt", { children: detail.label }), _jsx("dd", { children: detail.value })] }, detail.label))) })), ask.kind === "approval" ? (_jsxs("div", { className: cardActions, children: [_jsx(Button, { variant: "secondary", onClick: () => onReply?.(task, { kind: "decision", decision: "deny" }), children: labels.chat.deny }), _jsx(Button, { onClick: () => onReply?.(task, { kind: "decision", decision: "allow" }), children: labels.chat.approve })] })) : (_jsx("div", { className: optionList, children: ask.options.map((option) => (_jsxs("button", { type: "button", onClick: () => onReply?.(task, { kind: "answer", answer: option.label }), children: [option.label, option.description && _jsx("span", { children: option.description })] }, option.label))) }))] }));
+    const sendReply = (reply) => {
+        setReplyState({ kind: "sending", reply });
+        onReply(task, reply).catch((error) => setReplyState({
+            kind: "failed",
+            message: error instanceof Error ? error.message : String(error),
+        }));
+    };
+    const sending = replyState.kind === "sending";
+    const sendingDecision = (decision) => replyState.kind === "sending" &&
+        replyState.reply.kind === "decision" &&
+        replyState.reply.decision === decision;
+    return (_jsxs("div", { id: agentTaskAnchorId(task.id), className: askCard, tabIndex: -1, "data-ciridae-ui": "", children: [_jsx("span", { children: ask.text }), ask.kind === "approval" && ask.details && ask.details.length > 0 && (_jsx("dl", { className: detailList, children: ask.details.map((detail) => (_jsxs(Fragment, { children: [_jsx("dt", { children: detail.label }), _jsx("dd", { children: detail.value })] }, detail.label))) })), replyState.kind === "failed" && (_jsx("span", { className: replyError, role: "alert", children: replyState.message })), ask.kind === "approval" ? (_jsxs("div", { className: cardActions, children: [_jsx(Button, { variant: "secondary", disabled: sending, loading: sendingDecision("deny"), onClick: () => sendReply({ kind: "decision", decision: "deny" }), children: labels.chat.deny }), _jsx(Button, { disabled: sending, loading: sendingDecision("allow"), onClick: () => sendReply({ kind: "decision", decision: "allow" }), children: labels.chat.approve })] })) : (_jsx("div", { className: optionList, children: ask.options.map((option) => (_jsxs("button", { type: "button", disabled: sending, onClick: () => sendReply({ kind: "answer", answer: option.label }), children: [option.label, option.description && _jsx("span", { children: option.description })] }, option.label))) }))] }));
 }

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

@@ -1,26 +1,15 @@
-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;
@@ -30,18 +19,15 @@ export type AccountMenuProps = {
     /** 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 declare function AccountMenu({ avatar, name, detail, items, 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. */
+    /** 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. */
+    /** 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 = {

package/dist/components/app-frame.js

@@ -3,12 +3,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * 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
+ * own entries, the color theme, and sign out. Auth stays with the host, which passes
  * sign-out as an action. `AssistantLauncher` opens the app's assistant from the sidebar's foot.
  */
-import { ArrowClockwiseIcon, CaretUpIcon, CircleHalfIcon, PaletteIcon, PulseIcon, SignOutIcon, } from "@phosphor-icons/react";
+import { ArrowClockwiseIcon, CaretUpIcon, CircleHalfIcon, PulseIcon, SignOutIcon, } from "@phosphor-icons/react";
 import { css, cx } from "#primitives/css";
-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";
@@ -18,6 +17,7 @@ import { ShortcutHint } from "./keycap.js";
 import { Link } from "./link.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
+import { Tooltip } from "./overlays.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";
@@ -40,24 +40,7 @@ export function useColorThemeMenuItem() {
         })),
     };
 }
-/** 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, }) {
+export function AccountMenu({ avatar, name, detail, items = [], signOut, compact = false, }) {
     const { labels } = useCiridaeLocale();
     const colorThemeItem = useColorThemeMenuItem();
     return (_jsx(Menu
@@ -66,10 +49,9 @@ export function AccountMenu({ avatar, name, detail, items = [], palette, signOut
     , { 
         // In the sidebar the menu is as wide as the account row it opens from, as the design draws
         // it, so it covers whatever sits above that row; the avatar alone opens a menu of its own width.
-        matchTriggerWidth: !compact, trigger: _jsx(AppAccountButton, { "aria-label": labels.accountMenu.menu, avatar: avatar, compact: compact, detail: detail, name: name, trailing: _jsx(CaretUpIcon, { className: icon({ size: "small" }) }) }), items: [
+        matchTriggerWidth: !compact, triggerTooltip: compact ? labels.accountMenu.menu : undefined, trigger: _jsx(AppAccountButton, { "aria-label": labels.accountMenu.menu, avatar: avatar, compact: compact, detail: detail, name: name, trailing: _jsx(CaretUpIcon, { className: icon({ size: "small" }) }) }), items: [
             ...items,
             colorThemeItem,
-            ...(palette ? [paletteMenuItem(palette, labels)] : []),
             ...(signOut
                 ? [
                     { separator: true },
@@ -83,18 +65,17 @@ export function AccountMenu({ avatar, name, detail, items = [], palette, signOut
                 : []),
         ] }));
 }
-// A raised pill on the canvas; in the rail, a round button with the same face.
 const assistantLauncher = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    width: "100%",
+    width: "full",
     height: "control.default",
     paddingInlineStart: "control.compactInline",
     paddingInlineEnd: "control.launcherInlineEnd",
     border: "1px solid token(colors.border.canvas)",
     borderRadius: "shell",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     color: "fg.primary",
     font: "inherit",
     fontWeight: "medium",
@@ -113,15 +94,15 @@ const assistantLauncher = css({
         borderRadius: "round",
     },
 });
-/** Opens the app's assistant from the sidebar's foot: a raised pill, or a round icon in the rail. */
 export function AssistantLauncher({ label, icon: launcherIcon, hotkey, compact = false, className, ...props }) {
-    return (_jsxs("button", { type: "button", "aria-label": compact ? label : undefined, ...props, className: cx(assistantLauncher, className), "data-ciridae-ui": "", "data-compact": compact || undefined, children: [launcherIcon, !compact && (_jsxs(_Fragment, { children: [_jsx("span", { "data-label": "", children: label }), hotkey && _jsx(ShortcutHint, { boxed: true, hotkey: hotkey })] }))] }));
+    const launcher = (_jsxs("button", { type: "button", "aria-label": compact ? label : undefined, ...props, className: cx(assistantLauncher, className), "data-ciridae-ui": "", "data-compact": compact || undefined, children: [launcherIcon, !compact && (_jsxs(_Fragment, { children: [_jsx("span", { "data-label": "", children: label }), hotkey && _jsx(ShortcutHint, { boxed: true, hotkey: hotkey })] }))] }));
+    return compact ? (_jsx(Tooltip, { content: label, side: "inline-end", children: launcher })) : (launcher);
 }
 /** 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 }) })] }))] }));
+    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() }) })) : undefined;
+    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(Tooltip, { content: item.label, side: "inline-end", children: _jsx(SidebarItem, { "aria-label": item.label, "aria-pressed": item.pressed, icon: item.icon, onClick: item.onClick }) }, item.id))), railActions, statusLink && (_jsx(Tooltip, { content: labels.appFrame.status, side: "inline-end", children: 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. */

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

@@ -58,11 +58,12 @@ export type AppNavigationProps = Omit<ComponentProps<"aside">, "children"> & {
     }>;
 };
 /**
- * Whether the sidebar has room to list `foldedRows` more rows: the free space between its
- * navigation and its footer covers them. Once it has, it loses it only when the navigation runs
- * out of room, so it does not flicker at the threshold.
+ * Whether the sidebar has room to unfold every section: the free space between its navigation and
+ * its footer covers the `hiddenRows` its folds hide, less the More rows unfolding removes. Once it
+ * has, it loses it only when the navigation runs out of room, so it does not flicker at the
+ * threshold.
  */
-export declare function useSidebarRoom(foldedRows: number): {
+export declare function useSidebarRoom(hiddenRows: number): {
     navRef: import("react").RefObject<HTMLDivElement | null>;
     footerRef: import("react").RefObject<HTMLDivElement | null>;
     roomy: boolean;
@@ -80,7 +81,6 @@ export type WorkspaceMarkProps = {
     size?: "regular" | "small";
     className?: string;
 };
-/** A workspace's mark: its name's first letter on a square tile. */
 export declare function WorkspaceMark({ name, current, size, className, }: WorkspaceMarkProps): import("react").JSX.Element;
 export type WorkspaceSwitcherProps = {
     workspaces: readonly Workspace[];
@@ -89,5 +89,4 @@ export type WorkspaceSwitcherProps = {
     /** The mark alone, for the rail. */
     compact?: boolean;
 };
-/** The current workspace, opening a menu of every workspace the reader belongs to, current checked. */
 export declare function WorkspaceSwitcher({ workspaces, currentId, onSelect, compact, }: WorkspaceSwitcherProps): import("react").JSX.Element;