@parallelworks/ui 0.51.0 → 0.53.0

package/dist/ai/strings.js

@@ -1,15 +1,14 @@
-import { defaultToolStrings } from "./agent/toolStrings.js";
+import { countOf, defaultToolStrings } from "./agent/toolStrings.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/ai/strings.tsx
 var defaultChatStrings = {
 	shareConversation: {
-		title: "Share Conversation",
+		title: "Share conversation",
 		loadError: "Failed to load sharing settings",
 		saveSuccess: "Sharing settings saved",
-		orgAccess: "Organization Access",
+		orgAccess: "Organization access",
 		orgCanView: "Anyone in the organization can view",
 		allowCollaboration: "Allow collaboration (edit messages)",
-		groupAccess: "Group Access",
+		groupAccess: "Group access",
 		noGroups: "No groups have access yet",
 		viewOnly: "View only",
 		canCollaborate: "Can collaborate",
@@ -24,7 +23,7 @@ var defaultChatStrings = {
 		shareButton: "Share conversation"
 	},
 	blockedGroup: {
-		title: "Billing group \"{group}\" is over its allocation",
+		title: (group) => `Billing group \u201c${group}\u201d is over its allocation`,
 		message: "It has reached its allocation limit. Messages to this provider are paused until your administrator increases the allocation."
 	},
 	queue: {
@@ -61,7 +60,48 @@ var defaultChatStrings = {
 	},
 	activity: {
 		tokens: (input, output) => `↑${input} ↓${output} tokens`,
-		stop: "Stop"
+		stop: "Stop",
+		words: [
+			"Thinking",
+			"Cogitating",
+			"Pondering",
+			"Percolating",
+			"Ruminating",
+			"Noodling",
+			"Conjuring",
+			"Simmering",
+			"Marinating",
+			"Tinkering",
+			"Scheming",
+			"Brewing",
+			"Wrangling",
+			"Finagling",
+			"Spelunking",
+			"Puttering",
+			"Composing",
+			"Synthesizing",
+			"Deliberating",
+			"Mulling",
+			"Contemplating",
+			"Vibing",
+			"Whittling",
+			"Concocting",
+			"Formulating",
+			"Hatching",
+			"Herding",
+			"Ideating",
+			"Manifesting",
+			"Moseying",
+			"Musing",
+			"Reticulating",
+			"Schlepping",
+			"Stewing",
+			"Transmuting",
+			"Wibbling",
+			"Crunching",
+			"Forging",
+			"Cooking"
+		]
 	},
 	emptyState: {
 		greeting: null,
@@ -78,33 +118,36 @@ var defaultChatStrings = {
 	},
 	input: {
 		placeholder: "Ask anything",
-		placeholderLoading: "Loading models...",
+		placeholderLoading: "Loading models…",
 		placeholderNoProviders: "Add an AI provider to start chatting",
 		attachFiles: "Attach files",
 		stopGenerating: "Stop generating (Escape)",
 		sendMessage: "Send message (Enter)",
-		filesAttached: (count) => count === 1 ? "1 file attached" : `${count.toLocaleString()} files attached`
+		filesAttached: (count) => `${countOf(count, "file", "files")} attached`
 	},
 	paste: {
 		title: "Pasted text",
-		lines: (count) => count === 1 ? "1 line" : `${count.toLocaleString()} lines`,
+		lines: (count) => countOf(count, "line", "lines"),
 		saving: "Saving…",
 		remove: "Remove paste"
 	},
 	thinking: {
 		label: "Thinking",
-		ellipsis: "Thinking...",
+		ellipsis: "Thinking…",
 		thoughtFor: (duration) => `Thought for ${duration}`,
 		thoughtProcess: "Thought process",
 		activity: "Activity",
-		ranToolCalls: (count) => count === 1 ? "Ran 1 tool call" : `Ran ${count.toLocaleString()} tool calls`
+		ranToolCalls: (count) => `Ran ${countOf(count, "tool call", "tool calls")}`
+	},
+	thread: {
+		viewOnly: "You have view only access",
+		label: "Conversation"
 	},
-	thread: { viewOnly: "You have view only access" },
 	sidebar: {
 		groupToday: "Today",
 		groupYesterday: "Yesterday",
-		groupThisWeek: "This Week",
-		groupThisMonth: "This Month",
+		groupThisWeek: "This week",
+		groupThisMonth: "This month",
 		groupOlder: "Older",
 		untitled: "Untitled",
 		sharedWithYou: "Shared with you",
@@ -115,18 +158,18 @@ var defaultChatStrings = {
 		resizeHint: "Drag to resize; double-click to reset",
 		newChat: "New chat",
 		attachments: "Attachments",
-		connectTools: "Connect Tools",
-		manageProviders: "Manage Providers",
+		connectTools: "Connect tools",
+		manageProviders: "Manage providers",
 		noConversations: "No conversations yet",
-		deleteTitle: "Delete Conversation",
+		deleteTitle: "Delete conversation",
 		deleteBody: "Are you sure you want to delete this conversation? This action cannot be undone.",
-		renameTitle: "Rename Conversation",
+		renameTitle: "Rename conversation",
 		renameLabel: "Conversation title",
 		renamePlaceholder: "Enter a new title"
 	},
 	attachmentUpload: {
 		fileTooLarge: (maxSize) => `File too large. Maximum size is ${maxSize}`,
-		maxFilesAllowed: (max) => `Maximum ${max} files allowed`,
+		maxFilesAllowed: (max) => `Maximum ${countOf(max, "file", "files")} allowed`,
 		dropFilesHere: "Drop files here",
 		releaseToUpload: "Release to upload",
 		addFiles: "Add files (drag or click)",
@@ -135,7 +178,12 @@ var defaultChatStrings = {
 	},
 	attachmentManager: {
 		title: "Attachments",
-		empty: "No attachments yet"
+		empty: "No attachments yet",
+		unnamedImage: "Image attachment",
+		unnamedFile: "File",
+		open: (name) => `Open ${name}`,
+		download: (name) => `Download ${name}`,
+		remove: (name) => `Delete ${name}`
 	},
 	branch: {
 		previous: "Previous branch",
@@ -151,12 +199,12 @@ var defaultChatStrings = {
 	},
 	messageMeta: {
 		stopped: "Stopped",
-		tokens: (total) => `${total.toLocaleString()} tokens`,
+		tokens: (total) => countOf(total, "token", "tokens"),
 		tokensBreakdown: (prompt, completion) => `${prompt.toLocaleString()} in · ${completion.toLocaleString()} out`,
-		copy: "Copy message",
+		copyLabel: "message",
 		edit: "Edit message",
 		regenerate: "Regenerate response",
-		editPlaceholder: "Edit your message..."
+		editPlaceholder: "Edit your message…"
 	},
 	permissions: {
 		choose: "Choose what the agent may do",
@@ -178,7 +226,7 @@ var defaultChatStrings = {
 		interrupted: "Interrupted",
 		noOutput: "(no output)",
 		diffTruncated: "Diff truncated",
-		moreLines: "+{count} more lines",
+		moreLines: (count) => `+${countOf(count, "more line", "more lines")}`,
 		allowOnce: "Yes, allow this command",
 		allowDirectory: "Yes, and allow this directory for the session",
 		deny: "No, deny this command",
@@ -196,7 +244,13 @@ var defaultChatStrings = {
 		tasks: "Tasks",
 		planPending: "Plan awaiting approval in the terminal",
 		approvalPending: "Waiting for an answer in the terminal",
-		approvalOptions: "Offered choices"
+		approvalOptions: "Offered choices",
+		approvalLabel: "Waiting for your answer",
+		feedbackLabel: "Feedback for the agent",
+		ownAnswerLabel: "Your answer",
+		todoPending: "To do",
+		todoInProgress: "In progress",
+		todoCompleted: "Done"
 	},
 	tools: defaultToolStrings
 };

package/dist/ai/types.d.ts

@@ -243,6 +243,10 @@ export interface ShareGroup {
 export type ChatLinkTarget = {
     kind: 'conversation';
     id: string;
+}
+/** Where `ChatNavigation.toNewChat` goes, for the sidebar's new chat link. */
+ | {
+    kind: 'newChat';
 } | {
     kind: 'attachments';
 } | {

package/dist/ai/ui/Notice.d.ts

@@ -20,10 +20,10 @@ export declare function OutputCard({ title, text, onDismiss, dismissLabel, testI
 }): import("react").JSX.Element;
 /** An inline notice next to the composer. One with no dismiss states a fact
  *  that is still true; one with a dismiss is a message the reader can put away. */
-export declare function NoticeCard({ tone, children, onDismiss, dismissLabel, testId, }: {
+export declare function NoticeCard({ tone, children, onDismiss, testId, }: {
     tone?: NoticeTone;
     children: ReactNode;
+    /** Adds a close button, named by the provider's `dismiss` string. */
     onDismiss?: () => void;
-    dismissLabel?: string;
     testId?: string;
 }): import("react").JSX.Element;

package/dist/ai/ui/Notice.js

@@ -1,57 +1,31 @@
 import { cx } from "../../cx.js";
-import { CloseIcon, ErrorIcon, InfoIcon } from "../../icons.js";
+import { CloseIcon } from "../../icons.js";
+import { Button } from "../../components/Button.js";
+import { Callout } from "../../components/Callout.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/ui/Notice.tsx
-var barTone = {
-	neutral: "theme-border theme-muted-panel",
-	info: "border-blue-500/30 bg-blue-500/10",
-	warning: "border-amber-500/40 bg-amber-500/10",
-	danger: "border-red-500/30 bg-red-500/10"
-};
-var iconTone = {
-	neutral: "theme-muted-text",
-	info: "text-blue-600 dark:text-blue-400",
-	warning: "text-amber-600 dark:text-amber-400",
-	danger: "text-red-600 dark:text-red-400"
-};
-var titleTone = {
-	neutral: "theme-text",
-	info: "text-blue-700 dark:text-blue-300",
-	warning: "text-amber-700 dark:text-amber-300",
-	danger: "text-red-700 dark:text-red-300"
-};
-var cardTone = {
-	neutral: "theme-border theme-muted-panel theme-muted-text",
-	info: "border-blue-500/40 bg-blue-500/10 text-blue-800 dark:text-blue-200",
-	warning: "border-amber-500/40 bg-amber-500/10 text-amber-800 dark:text-amber-200",
-	danger: "border-red-500/40 bg-red-500/10 text-red-700 dark:text-red-300"
+var calloutTone = {
+	neutral: "default",
+	info: "info",
+	warning: "warning",
+	danger: "error"
 };
 /** A standing condition on the surface: a full-width bar under the header
 *  with a title, an explanation, and the one thing the reader can do about it. */
 function NoticeBar({ tone, title, children, action, onAction, testId }) {
-	const Icon = tone === "danger" || tone === "warning" ? ErrorIcon : InfoIcon;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-testid": testId,
-		className: cx("flex shrink-0 items-start gap-3 border-b px-6 py-3", barTone[tone]),
-		children: [
-			/* @__PURE__ */ jsx(Icon, { className: cx("mt-0.5 h-4 w-4 shrink-0", iconTone[tone]) }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: cx("text-sm font-medium", titleTone[tone]),
-					children: title
-				}), children && /* @__PURE__ */ jsx("p", {
-					className: "mt-0.5 text-xs theme-muted-text",
-					children
-				})]
-			}),
-			action && onAction && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onAction,
-				className: "shrink-0 rounded-lg border theme-border bg-(--theme-panel-bg) px-3 py-1.5 text-xs theme-text hover:theme-hover",
-				children: action
-			})
-		]
+	return /* @__PURE__ */ jsx(Callout, {
+		tone: calloutTone[tone],
+		variant: "bar",
+		title,
+		testId,
+		className: "shrink-0 px-6",
+		...action && onAction ? { action: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "outline",
+			onClick: onAction,
+			children: action
+		}) } : {},
+		children
 	});
 }
 /** What a command printed, kept verbatim under the command that printed it. */
@@ -82,21 +56,14 @@ function OutputCard({ title, text, onDismiss, dismissLabel, testId }) {
 }
 /** An inline notice next to the composer. One with no dismiss states a fact
 *  that is still true; one with a dismiss is a message the reader can put away. */
-function NoticeCard({ tone = "neutral", children, onDismiss, dismissLabel, testId }) {
-	return /* @__PURE__ */ jsxs("div", {
-		"data-testid": testId,
-		className: cx("flex items-start gap-2 rounded-lg border px-3 py-2 text-xs", cardTone[tone]),
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "flex-1",
-			children
-		}), onDismiss && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: onDismiss,
-			"aria-label": dismissLabel,
-			title: dismissLabel,
-			className: "shrink-0 rounded p-0.5 hover:theme-hover",
-			children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3 w-3" })
-		})]
+function NoticeCard({ tone = "neutral", children, onDismiss, testId }) {
+	return /* @__PURE__ */ jsx(Callout, {
+		tone: calloutTone[tone],
+		size: "sm",
+		icon: false,
+		onDismiss,
+		testId,
+		children
 	});
 }
 //#endregion

package/dist/ai/ui/sidebar.d.ts

@@ -44,12 +44,14 @@ export declare function SidebarRow({ selected, menuItems, openMenu, className, c
     children: ReactNode;
 }): import("react").JSX.Element;
 /** One entry in the collapsed rail: a square the size of the toggle, with the
- *  same highlight as a row, holding whatever stands in for the item. */
-export declare function SidebarRailItem({ selected, label, onSelect, testId, children, }: {
+ *  same highlight as a row, holding whatever stands in for the item. With
+ *  `href` it is a link to the item, and `onSelect` runs only for a plain click. */
+export declare function SidebarRailItem({ selected, label, href, onSelect, testId, children, }: {
     selected: boolean;
     /** Names the icon-only button, and shows beside it on hover. */
     label: string;
-    onSelect: () => void;
+    href?: string | undefined;
+    onSelect?: (() => void) | undefined;
     testId?: string;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/ai/ui/sidebar.js

@@ -1,11 +1,12 @@
 import { cx } from "../../cx.js";
 import { SidebarIcon } from "../../icons.js";
 import { Tooltip } from "../../components/Tooltip.js";
+import { AppLink, isPlainClick } from "../../components/AppLink.js";
+import { IconButton } from "../../components/IconButton.js";
 import { fieldBox } from "../../components/fieldBox.js";
+import { focusOnMount } from "../../components/focus.js";
 import { ConfirmModal } from "../../components/ConfirmModal.js";
-import { IconButton } from "../../components/IconButton.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/rowMenu.js";
-import { focusOnMount } from "../../components/focus.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/ai/ui/sidebar.tsx
@@ -37,7 +38,7 @@ function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className }
 function SidebarGroupHeading({ children, tone = "default", testId }) {
 	return /* @__PURE__ */ jsx("h4", {
 		"data-testid": testId,
-		className: cx("mt-5 mb-1 whitespace-nowrap px-2 text-xs font-medium", tone === "attention" ? "text-amber-700 dark:text-amber-300" : "theme-muted-text"),
+		className: cx("mt-5 mb-1 whitespace-nowrap px-2 text-xs font-medium", tone === "attention" ? "text-(--theme-warning-text)" : "theme-muted-text"),
 		children
 	});
 }
@@ -69,18 +70,29 @@ function SidebarRow({ selected, menuItems, openMenu, className, children }) {
 	});
 }
 /** One entry in the collapsed rail: a square the size of the toggle, with the
-*  same highlight as a row, holding whatever stands in for the item. */
-function SidebarRailItem({ selected, label, onSelect, testId, children }) {
+*  same highlight as a row, holding whatever stands in for the item. With
+*  `href` it is a link to the item, and `onSelect` runs only for a plain click. */
+function SidebarRailItem({ selected, label, href, onSelect, testId, children }) {
+	const props = {
+		"data-testid": testId,
+		"aria-label": label,
+		"aria-current": selected ? "page" : void 0,
+		className: cx("flex h-7 w-7 items-center justify-center rounded-md transition-colors", HIGHLIGHT_HOVER, selected && HIGHLIGHT_SELECTED)
+	};
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, {
 		content: label,
 		side: "right",
-		children: /* @__PURE__ */ jsx("button", {
+		children: href ? /* @__PURE__ */ jsx(AppLink, {
+			href,
+			onClick: (e) => {
+				if (isPlainClick(e)) onSelect?.();
+			},
+			...props,
+			children
+		}) : /* @__PURE__ */ jsx("button", {
 			type: "button",
-			"data-testid": testId,
-			"aria-label": label,
-			"aria-current": selected ? "page" : void 0,
 			onClick: onSelect,
-			className: cx("flex h-7 w-7 items-center justify-center rounded-md transition-colors", HIGHLIGHT_HOVER, selected && HIGHLIGHT_SELECTED),
+			...props,
 			children
 		})
 	}) });

package/dist/components/ActionMenu.d.ts

@@ -7,6 +7,7 @@ export declare function ActionMenu({ items, label, search, align, triggerClassNa
     label: string;
     search?: MenuSearch | undefined;
     align?: 'start' | 'center' | 'end';
+    /** Styles the trigger; without it the trigger is a ghost icon button. */
     triggerClassName?: string | undefined;
     /** The trigger's content. */
     children: ReactNode;

package/dist/components/ActionMenu.js

@@ -1,3 +1,4 @@
+import { buttonClasses } from "./buttonClasses.js";
 import { MenuPopup } from "./Menu.js";
 import { Tooltip } from "./Tooltip.js";
 import { MenuEntries, MenuFilter } from "./MenuEntries.js";
@@ -12,7 +13,11 @@ function ActionMenu({ items, label, search, align, triggerClassName, children })
 			content: label,
 			children: /* @__PURE__ */ jsx(Menu.Trigger, {
 				"aria-label": label,
-				className: triggerClassName,
+				className: triggerClassName ?? buttonClasses({
+					variant: "ghost",
+					size: "sm",
+					iconOnly: true
+				}),
 				children
 			})
 		}), /* @__PURE__ */ jsx(MenuPopup, {

package/dist/components/AppLink.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef, MouseEvent } from 'react';
+/** Where a control navigates, for any component that can be a link instead of a button. */
+export interface LinkTarget {
+    /** Navigates there: a plain click goes through the host's router, and a
+     *  modified or middle click opens it as any link would. */
+    href?: string | undefined;
+    /** Loads the page instead of routing, for paths the host's router doesn't serve. */
+    reloadDocument?: boolean | undefined;
+    /** Such as `_blank`, which also cuts the opened page's hold on this one. */
+    target?: string | undefined;
+}
+export type AppLinkProps = Omit<ComponentPropsWithRef<'a'>, 'href' | 'target'> & LinkTarget & {
+    /** Keeps it a link that goes nowhere: no href, `aria-disabled`, still
+     *  focusable so a tooltip saying why stays reachable. */
+    disabled?: boolean | undefined;
+};
+/** True for a click the browser would open in place: the primary button with
+ *  no modifier. A link's own onClick work, such as closing a drawer or clearing
+ *  state, belongs to that click only; the others open a new tab or window and
+ *  leave this page as it is. */
+export declare function isPlainClick(event: MouseEvent<Element>): boolean;
+/** A link through the host's router (`useLink`): the one way a component
+ *  renders an `href`. In-app paths route client-side; `reloadDocument` and
+ *  URLs that leave the app get a plain anchor. Every href passes `safeUrl`,
+ *  and one that doesn't, or a disabled link, renders without an href. */
+export declare function AppLink({ href, reloadDocument, target, disabled, rel, onClick, children, ...props }: AppLinkProps): import("react").JSX.Element;

package/dist/components/AppLink.js

@@ -0,0 +1,51 @@
+import { safeUrl } from "../safeUrl.js";
+import { useLink, useStrings } from "./Provider.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/AppLink.tsx
+function leavesApp(url) {
+	if (!/^([a-z][a-z\d+.-]*:|\/\/)/i.test(url)) return false;
+	if (typeof window === "undefined") return true;
+	return new URL(url, window.location.href).origin !== window.location.origin;
+}
+/** True for a click the browser would open in place: the primary button with
+*  no modifier. A link's own onClick work, such as closing a drawer or clearing
+*  state, belongs to that click only; the others open a new tab or window and
+*  leave this page as it is. */
+function isPlainClick(event) {
+	return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey && event.currentTarget.getAttribute("target") !== "_blank";
+}
+/** A link through the host's router (`useLink`): the one way a component
+*  renders an `href`. In-app paths route client-side; `reloadDocument` and
+*  URLs that leave the app get a plain anchor. Every href passes `safeUrl`,
+*  and one that doesn't, or a disabled link, renders without an href. */
+function AppLink({ href, reloadDocument = false, target, disabled = false, rel, onClick, children, ...props }) {
+	const Link = useLink();
+	const { common } = useStrings();
+	const url = disabled ? void 0 : safeUrl(href);
+	if (!url) return /* @__PURE__ */ jsx("a", {
+		...props,
+		role: "link",
+		"aria-disabled": "true",
+		tabIndex: props.tabIndex ?? 0,
+		children
+	});
+	const linkProps = {
+		...props,
+		target,
+		rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+		onClick,
+		children: target === "_blank" ? /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [" ", common.opensInNewTab]
+		})] }) : children
+	};
+	return reloadDocument || leavesApp(url) ? /* @__PURE__ */ jsx("a", {
+		...linkProps,
+		href: url
+	}) : /* @__PURE__ */ jsx(Link, {
+		...linkProps,
+		href: url
+	});
+}
+//#endregion
+export { AppLink, isPlainClick };

package/dist/components/Avatar.d.ts

@@ -11,5 +11,6 @@ export interface AvatarProps {
 /** Up to two initials: the first and last word of a name split on spaces and dots. */
 export declare function avatarInitials(name: string | undefined): string;
 /** A person's picture, or their initials while it loads or when it fails. It is
- *  one image to assistive technology, named for the person, whichever shows. */
+ *  one image to assistive technology, named for the person, whichever shows,
+ *  and their presence when it has a status dot. */
 export declare function Avatar({ src, name, size, status, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -26,12 +26,14 @@ function avatarInitials(name) {
 	return first?.toUpperCase() || "?";
 }
 /** A person's picture, or their initials while it loads or when it fails. It is
-*  one image to assistive technology, named for the person, whichever shows. */
+*  one image to assistive technology, named for the person, whichever shows,
+*  and their presence when it has a status dot. */
 function Avatar$1({ src, name, size = "md", status, className }) {
 	const { common } = useStrings();
+	const who = name || common.userAvatar;
 	return /* @__PURE__ */ jsxs("span", {
 		role: "img",
-		"aria-label": name || common.userAvatar,
+		"aria-label": status ? common.withPresence(who, common.presence[status]) : who,
 		className: cx("relative inline-flex shrink-0", className),
 		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
 			className: cx("relative inline-flex items-center justify-center overflow-hidden rounded-full font-medium select-none", SIZE_CLASSES[size]),

package/dist/components/Button.d.ts

@@ -1,7 +1,8 @@
 import { Button as BaseButton } from '@base-ui/react/button';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { type AppLinkProps, type LinkTarget } from './AppLink.js';
 import { type ButtonStyle } from './buttonClasses.js';
-export interface ButtonProps extends Omit<BaseButton.Props, 'className'>, ButtonStyle {
+interface ButtonOwnProps extends ButtonStyle {
     className?: string | undefined;
     /** Before the label. */
     icon?: ReactNode;
@@ -9,16 +10,25 @@ export interface ButtonProps extends Omit<BaseButton.Props, 'className'>, Button
      *  be pressed again until done. */
     loading?: boolean | undefined;
 }
+/** A button, or with `href` a link that looks like one: navigation stays a
+ *  link, so it opens in a new tab and shows its URL like any other. */
+export type ButtonProps = ButtonOwnProps & ((Omit<BaseButton.Props, 'className'> & {
+    href?: undefined;
+}) | (Omit<AppLinkProps, 'className'> & LinkTarget & {
+    href: string;
+}));
 /** A button in the package's one look (see `buttonClasses`).
- *  `focusableWhenDisabled` keeps a disabled button's tooltip reachable. A link
- *  that looks like a button stays a link: give it `buttonClasses()`. */
-export declare function Button({ variant, size, iconOnly, icon, loading, disabled, className, children, ...props }: ButtonProps): import("react").JSX.Element;
-interface MethodButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+ *  `focusableWhenDisabled` keeps a disabled button's tooltip reachable; a
+ *  disabled link stays focusable on its own. */
+export declare function Button({ variant, size, iconOnly, icon, loading, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+interface MethodButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     icon?: ReactNode;
     label: string;
     description?: string;
     href?: string;
     loading?: boolean;
 }
+/** One way to go on, such as a sign-in method: a large row with an icon, a
+ *  label and a line under it. A list of them is spaced by its container. */
 export declare function MethodButton({ icon, label, description, href, loading, disabled, className, ...props }: MethodButtonProps): import("react").JSX.Element;
 export {};