@parallelworks/ui 0.77.0 → 0.78.0

package/dist/components/ErrorPage.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import { type ErrorPageKind } from './Provider.js';
+export type { ErrorPageKind } from './Provider.js';
+export interface ErrorPageProps {
+    /** The HTTP status, shown large over the title and left out of what a
+     *  screen reader reads, since the title says it in words. It also picks the
+     *  default words: 404, 403, 401, 502 to 504, or another 5xx. */
+    status?: number | string | undefined;
+    /** What went wrong, when no status says it, such as `network` for a request
+     *  that never reached the server. Picks the default title and description. */
+    kind?: ErrorPageKind | undefined;
+    /** By default the kind's title, then "Error {status}". With neither, the
+     *  description becomes the title, so a message alone still heads the page. */
+    title?: ReactNode;
+    /** By default the kind's description. `null` shows none. */
+    description?: ReactNode;
+    /** `page` fills its container over a backdrop of drifting glows; `card`
+     *  fills a card, clipping the backdrop to its corners; `inline` sits in a
+     *  section's flow with no backdrop. */
+    layout?: 'page' | 'card' | 'inline' | undefined;
+    /** The way back. By default back through the history when there is some,
+     *  and home (`/`) when there isn't; `href` goes there instead, such as
+     *  "Back to sessions". `false` offers none. */
+    back?: {
+        href?: string | undefined;
+        label?: string | undefined;
+    } | false | undefined;
+    /** More ways on, before the way back, such as "Sign in" after a 401. */
+    actions?: ReactNode;
+    /** The title's level: 1 for a page, 2 in a card or inline. */
+    headingLevel?: 1 | 2 | 3 | undefined;
+    className?: string | undefined;
+    testId?: string | undefined;
+}
+/** The kind of error an HTTP status names, or none for one without its own words. */
+export declare function errorPageKind(status: number | string | undefined): ErrorPageKind | undefined;
+/** A page, card or section that could not show what it was asked for: the
+ *  status large in the theme's gradient, what happened in words, and the way
+ *  back. Every word defaults from the status, and the host may pass its own. */
+export declare function ErrorPage({ status, kind: kindProp, title, description, layout, back, actions, headingLevel, className, testId, }: ErrorPageProps): import("react").JSX.Element;

package/dist/components/ErrorPage.js

@@ -0,0 +1,101 @@
+import { cx } from "../cx.js";
+import { ArrowLeftIcon } from "../icons.js";
+import { useNavigation, useStrings } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
+import { useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ErrorPage.tsx
+/** The kind of error an HTTP status names, or none for one without its own words. */
+function errorPageKind(status) {
+	const code = typeof status === "string" ? Number.parseInt(status, 10) : status;
+	if (code === void 0 || Number.isNaN(code)) return;
+	if (code === 404) return "notFound";
+	if (code === 403) return "forbidden";
+	if (code === 401) return "unauthenticated";
+	if (code === 502 || code === 503 || code === 504) return "unavailable";
+	return code >= 500 && code < 600 ? "server" : void 0;
+}
+var subscribeNever = () => () => {};
+var linkClassName = "group inline-flex items-center gap-1.5 rounded-sm text-sm text-(--theme-link) hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus) cursor-pointer";
+/** A page, card or section that could not show what it was asked for: the
+*  status large in the theme's gradient, what happened in words, and the way
+*  back. Every word defaults from the status, and the host may pass its own. */
+function ErrorPage({ status, kind: kindProp, title, description, layout = "page", back, actions, headingLevel, className, testId }) {
+	const { errorPage: t } = useStrings();
+	const kind = kindProp ?? errorPageKind(status);
+	const hasStatus = status !== void 0 && status !== "";
+	const shownDescription = description === void 0 && kind ? t.descriptions[kind] : description;
+	const fallbackTitle = kind ? t.titles[kind] : hasStatus ? t.statusTitle(String(status)) : null;
+	const promoted = title === void 0 && fallbackTitle === null && present(shownDescription);
+	const heading = title ?? fallbackTitle ?? (promoted ? shownDescription : t.error);
+	const Heading = `h${headingLevel ?? (layout === "page" ? 1 : 2)}`;
+	const framed = layout !== "inline";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cx("@container relative flex w-full items-center justify-center px-4 text-center", framed && "isolate overflow-hidden", layout === "page" && "min-h-full flex-1 py-16", layout === "card" && "h-full rounded-[inherit] py-12", layout === "inline" && "py-16", className),
+		children: [framed && /* @__PURE__ */ jsx(Backdrop, {}), /* @__PURE__ */ jsxs("div", {
+			className: "error-page-content relative flex w-full max-w-md flex-col items-center gap-6",
+			children: [hasStatus && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cx("error-page-code select-none font-black leading-none tracking-tighter opacity-75", layout === "page" ? "text-[7rem] @md:text-[10rem]" : "text-[5rem] @md:text-[7rem]"),
+				children: status
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx("flex flex-col items-center gap-3", hasStatus && "-mt-4"),
+				children: [
+					/* @__PURE__ */ jsx(Heading, {
+						className: "m-0 text-xl font-semibold tracking-tight text-(--theme-app)",
+						children: heading
+					}),
+					!promoted && present(shownDescription) && /* @__PURE__ */ jsx("p", {
+						className: "m-0 max-w-md text-sm text-(--theme-muted-text-color)",
+						children: shownDescription
+					}),
+					(present(actions) || back !== false) && /* @__PURE__ */ jsxs("div", {
+						className: "mt-2 flex flex-wrap items-center justify-center gap-x-5 gap-y-2",
+						children: [actions, back !== false && /* @__PURE__ */ jsx(BackLink, {
+							href: back?.href,
+							label: back?.label
+						})]
+					})
+				]
+			})]
+		})]
+	});
+}
+function present(node) {
+	return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function BackLink({ href, label }) {
+	const { errorPage: t } = useStrings();
+	const navigation = useNavigation();
+	const canGoBack = useSyncExternalStore(subscribeNever, () => navigation.canGoBack(), () => false);
+	const arrow = /* @__PURE__ */ jsx(ArrowLeftIcon, {
+		"aria-hidden": "true",
+		className: "size-3.5 shrink-0 transition-transform duration-200 group-hover:-translate-x-0.5 motion-reduce:transition-none rtl:rotate-180"
+	});
+	if (href === void 0 && canGoBack) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => navigation.goBack(),
+		className: linkClassName,
+		children: [arrow, label ?? t.back]
+	});
+	return /* @__PURE__ */ jsxs(AppLink, {
+		href: href ?? "/",
+		className: linkClassName,
+		children: [arrow, label ?? (href === void 0 ? t.home : t.back)]
+	});
+}
+/** Two slow glows in the theme's gradient colors over a faint grid. */
+function Backdrop() {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": "true",
+		className: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "error-page-glow -top-1/5 -right-1/10 size-150 error-page-glow-start" }),
+			/* @__PURE__ */ jsx("div", { className: "error-page-glow -bottom-1/5 -left-1/10 size-125 error-page-glow-mid [animation-delay:2s]" }),
+			/* @__PURE__ */ jsx("div", { className: "error-page-grid absolute inset-0" })
+		]
+	});
+}
+//#endregion
+export { ErrorPage, errorPageKind };

package/dist/components/ExternalLink.d.ts

@@ -2,8 +2,11 @@ import type { ComponentPropsWithRef } from 'react';
 export type ExternalLinkProps = Omit<ComponentPropsWithRef<'a'>, 'target' | 'rel'> & {
     /** Marks the link as leaving the page with an arrow after its text. */
     icon?: boolean;
+    /** Says "opens in a new tab" to screen readers after the text, unless false: for a link
+     *  whose own words already say so, or whose `aria-label` replaces its text. */
+    announce?: boolean;
 };
 /** A link that opens in a new tab, says so to screen readers, and gives the
  *  page it opens no hold on this one. Its href passes `safeUrl`, as every
  *  component's does, and one that doesn't is dropped. */
-export declare function ExternalLink({ href, children, icon, className, ...props }: ExternalLinkProps): import("react").JSX.Element;
+export declare function ExternalLink({ href, children, icon, announce, className, ...props }: ExternalLinkProps): import("react").JSX.Element;

package/dist/components/ExternalLink.js

@@ -1,4 +1,3 @@
-import { cx } from "../cx.js";
 import { ExternalLinkIcon } from "../icons.js";
 import { safeUrl } from "../safeUrl.js";
 import { useStrings } from "./Provider.js";
@@ -7,22 +6,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** A link that opens in a new tab, says so to screen readers, and gives the
 *  page it opens no hold on this one. Its href passes `safeUrl`, as every
 *  component's does, and one that doesn't is dropped. */
-function ExternalLink({ href, children, icon = false, className, ...props }) {
+function ExternalLink({ href, children, icon = false, announce = true, className, ...props }) {
 	const { common } = useStrings();
 	return /* @__PURE__ */ jsxs("a", {
 		...props,
 		href: safeUrl(href),
 		target: "_blank",
 		rel: "noopener noreferrer",
-		className: cx(icon && "inline-flex items-center gap-1", className),
+		className,
 		children: [
 			children,
-			/* @__PURE__ */ jsxs("span", {
+			announce && /* @__PURE__ */ jsxs("span", {
 				className: "sr-only",
 				children: [" ", common.opensInNewTab]
 			}),
 			icon && /* @__PURE__ */ jsx(ExternalLinkIcon, {
-				className: "h-3 w-3 shrink-0",
+				className: "ml-1 inline-block h-3 w-3 align-[-1px]",
 				"aria-hidden": true
 			})
 		]

package/dist/components/Field.d.ts

@@ -76,13 +76,24 @@ export interface FieldProps {
      *  function. A value shown but not edited goes in a `FieldValue`. */
     children: ReactNode | ((control: FieldControlProps) => ReactNode);
 }
-/** An error in the look a Field gives its own, for a control outside a Field, or for a part of
- *  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
- *  in the control's `aria-describedby` so the error is read with the control. */
-export declare function ErrorText({ id, children }: {
+export interface ErrorTextProps {
     id?: string | undefined;
+    /** `sm` is a Field's own error, under one control; `md` is for an error
+     *  about a whole form or an action, such as a Save that failed. */
+    size?: 'sm' | 'md' | undefined;
+    /** Sits in a line of text instead of a line of its own, in that text's size; `size`
+     *  applies only on a line of its own. */
+    inline?: boolean | undefined;
+    /** Places it, such as its margins, or a card footer's rule and padding. */
+    className?: string | undefined;
+    /** Nothing renders without it, so an error that may be absent needs no guard. */
     children: ReactNode;
-}): import("react").JSX.Element | null;
+}
+/** An error in the look a Field gives its own, for a control outside a Field, or for a part of
+ *  one rather than the whole of it, such as a row of a list editor; `size="md"` for an error
+ *  under a whole form or after an action. It is announced as it appears. Give it an `id` and
+ *  name it in the control's `aria-describedby` so the error is read with the control. */
+export declare function ErrorText({ id, size, inline, className, children, }: ErrorTextProps): import("react").JSX.Element | null;
 /** A control with its label, help and error, tied to it for assistive technology. One frame
  *  for every field, in a form or standing alone. */
 export declare function Field({ label, hint, help, actions, description, error, invalid, required, disabled, layout, compact, size, group, controlFirst, id: ownId, className, children, }: FieldProps): import("react").JSX.Element;
@@ -95,10 +106,14 @@ export declare function FieldOption({ disabled, className, children, }: {
 }): import("react").JSX.Element;
 /** The eye button inside a secret's box that shows or hides what was typed. Give the box
  *  room for it on the right, such as `pr-9`. */
-export declare function RevealToggle({ revealed, onRevealedChange, disabled, }: {
+export declare function RevealToggle({ revealed, onRevealedChange, disabled, align, size, }: {
     revealed: boolean;
     onRevealedChange: (revealed: boolean) => void;
     disabled?: boolean | undefined;
+    /** `top` keeps it on the first line of a tall box, such as a textarea's, of the box's
+     *  `size`. */
+    align?: 'center' | 'top' | undefined;
+    size?: FieldBoxSize | undefined;
 }): import("react").JSX.Element;
 export interface FieldValueProps extends OutputHTMLAttributes<HTMLOutputElement> {
     /** Matches the height and text of the controls around it, as `size` does on a control. */

package/dist/components/Field.js

@@ -4,8 +4,8 @@ import { useStrings } from "./Provider.js";
 import { focusCameFromKeyboard, trackFocusModality } from "./focus.js";
 import { InfoTip, formatInfoTipContent } from "./InfoTip.js";
 import { RequiredMark } from "./RequiredMark.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
 //#region src/components/Field.tsx
@@ -68,20 +68,32 @@ var controlFirstExtrasClassName = "ms-1 inline-flex items-center gap-1 align-[-0
 var switchOnTwoLines = "has-[[role=switch]]:max-h-[2lh]";
 var switchOnLabelAndDescription = "has-[[role=switch]]:max-h-[calc(1lh+1rem)]";
 var switchRowStartsAtText = "has-[[role=switch]]:-mt-1";
-var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error-text)";
+var errorTextClassName = "items-start gap-1.5 text-xs text-(--theme-error-text)";
+var errorIconClassName = "mt-px size-3.5 shrink-0";
 /** An error in the look a Field gives its own, for a control outside a Field, or for a part of
-*  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
-*  in the control's `aria-describedby` so the error is read with the control. */
-function ErrorText({ id, children }) {
-	return children ? /* @__PURE__ */ jsxs("div", {
+*  one rather than the whole of it, such as a row of a list editor; `size="md"` for an error
+*  under a whole form or after an action. It is announced as it appears. Give it an `id` and
+*  name it in the control's `aria-describedby` so the error is read with the control. */
+function ErrorText({ id, size = "sm", inline = false, className, children }) {
+	if (!children) return null;
+	if (inline) return /* @__PURE__ */ jsxs("span", {
 		id,
 		role: "alert",
-		className: errorTextClassName,
+		className: cx("text-(--theme-error-text)", className),
 		children: [/* @__PURE__ */ jsx(WarningIcon, {
 			"aria-hidden": "true",
-			className: "size-3.5 shrink-0"
+			className: "me-[0.3em] inline size-[1em] align-[-0.125em]"
 		}), children]
-	}) : null;
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "alert",
+		className: cx("flex", size === "md" ? "items-start gap-2 text-sm text-(--theme-error-text)" : errorTextClassName, className),
+		children: [/* @__PURE__ */ jsx(WarningIcon, {
+			"aria-hidden": "true",
+			className: size === "md" ? "mt-0.5 size-4 shrink-0" : errorIconClassName
+		}), children]
+	});
 }
 /** A control with its label, help and error, tied to it for assistive technology. One frame
 *  for every field, in a form or standing alone. */
@@ -146,8 +158,8 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		}
 	} : {};
 	const labelBox = cx(labelClassName, labelSize.text, inline && cx(labelSize.inlineHeight, "shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3 max-sm:min-h-0 max-sm:w-full max-sm:pr-0"), inRow && "row-start-1 self-end");
-	const nameContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] });
-	const labelExtras = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const nameContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] });
+	const labelExtras = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		helpTip,
 		hint,
 		actions && /* @__PURE__ */ jsx("span", {
@@ -163,7 +175,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 			children: placed
 		})
 	});
-	const messages = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const messages = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		description && /* @__PURE__ */ jsx(Field.Description, {
 			id: descriptionId,
 			className: cx("text-xs text-(--theme-muted-text-color)", controlFirst && !group ? "leading-4" : "leading-relaxed"),
@@ -178,10 +190,10 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 			id: errorId,
 			match: true,
 			role: "alert",
-			className: errorTextClassName,
+			className: cx("flex", errorTextClassName),
 			children: [/* @__PURE__ */ jsx(WarningIcon, {
 				"aria-hidden": "true",
-				className: "size-3.5 shrink-0"
+				className: errorIconClassName
 			}), error]
 		})
 	] });
@@ -286,7 +298,7 @@ function FieldOption({ disabled, className, children }) {
 }
 /** The eye button inside a secret's box that shows or hides what was typed. Give the box
 *  room for it on the right, such as `pr-9`. */
-function RevealToggle({ revealed, onRevealedChange, disabled }) {
+function RevealToggle({ revealed, onRevealedChange, disabled, align = "center", size = "md" }) {
 	const { common: t } = useStrings();
 	const Icon = revealed ? EyeOffIcon : EyeIcon;
 	return /* @__PURE__ */ jsx("button", {
@@ -295,7 +307,11 @@ function RevealToggle({ revealed, onRevealedChange, disabled }) {
 		"aria-pressed": revealed,
 		disabled,
 		onClick: () => onRevealedChange(!revealed),
-		className: "absolute inset-y-0 right-0 flex w-9 cursor-pointer items-center justify-center text-(--theme-muted-text-color) hover:text-(--theme-app) disabled:cursor-not-allowed disabled:opacity-50",
+		className: cx("absolute right-0 flex w-9 cursor-pointer items-center justify-center text-(--theme-muted-text-color) hover:text-(--theme-app) disabled:cursor-not-allowed disabled:opacity-50", align === "top" ? cx("top-0", {
+			sm: "h-7",
+			md: "h-8",
+			lg: "h-10"
+		}[size]) : "inset-y-0"),
 		children: /* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
 			className: "size-4"

package/dist/components/FileButton.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { ButtonStyle } from './buttonClasses.js';
+export interface FileButtonProps extends ButtonStyle, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onChange' | 'children' | 'className'> {
+    /** The file types offered, as the file input's `accept`, such as `image/*` or `.pem,.crt`. */
+    accept?: string | undefined;
+    multiple?: boolean | undefined;
+    /** The files picked, never empty. Picking the same file again calls it again. */
+    onFiles: (files: File[]) => void;
+    /** Before the label. */
+    icon?: ReactNode;
+    /** Busy with the files: see `Button`'s `loading`. */
+    loading?: boolean | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/** A button that opens the file picker, such as Upload logo. It is a real button,
+ *  so Tab reaches it and Enter or Space opens the picker, where a label over a
+ *  hidden file input can't be focused. */
+export declare function FileButton({ accept, multiple, onFiles, onClick, ...props }: FileButtonProps): import("react").JSX.Element;

package/dist/components/FileButton.js

@@ -0,0 +1,32 @@
+import { Button } from "./Button.js";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/FileButton.tsx
+/** A button that opens the file picker, such as Upload logo. It is a real button,
+*  so Tab reaches it and Enter or Space opens the picker, where a label over a
+*  hidden file input can't be focused. */
+function FileButton({ accept, multiple = false, onFiles, onClick, ...props }) {
+	const input = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		...props,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) input.current?.click();
+		}
+	}), /* @__PURE__ */ jsx("input", {
+		ref: input,
+		type: "file",
+		hidden: true,
+		tabIndex: -1,
+		"aria-hidden": "true",
+		accept,
+		multiple,
+		onChange: (event) => {
+			const files = Array.from(event.currentTarget.files ?? []);
+			event.currentTarget.value = "";
+			if (files.length > 0) onFiles(files);
+		}
+	})] });
+}
+//#endregion
+export { FileButton };

package/dist/components/HoverCard.d.ts

@@ -1,14 +1,34 @@
-import type { ReactElement, ReactNode } from 'react';
-export interface HoverCardProps {
-    /** Mounted only while open, so a card that loads its own data loads on first hover. */
-    card: ReactNode;
+import type { PointerEventHandler, ReactElement, ReactNode } from 'react';
+/** What a hover card opens from: its own anchor, which opens it on hover or focus,
+ *  or an element the host watches itself and opens it at, such as a term in
+ *  rendered text that one listener on the page serves for every term. */
+type HoverCardOpener = {
     /** The anchor. It receives the trigger's props and ref, so it must pass them to its element. */
     children: ReactElement;
+    at?: never;
+} | {
+    /** The element it opens at while `open`. The host opens and closes it, with its own
+     *  delays; Escape and a press outside ask it to close through `onOpenChange`. Null
+     *  keeps it closed. */
+    at: Element | null;
+    children?: never;
+};
+export type HoverCardProps = HoverCardOpener & {
+    /** Mounted only while open, so a card that loads its own data loads on first hover. */
+    card: ReactNode;
     /** Opens on first render, for stories and screenshots. */
     defaultOpen?: boolean;
-}
+    /** Open from outside, as with `at`. */
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** The pointer entered or left the card, so a host opening it with `at` can keep
+     *  it open while the reader is over it. */
+    onPointerEnter?: PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement> | undefined;
+};
 /** Detail about its anchor, such as a person's profile, after a short hover or
  *  on focus. A visual enhancement: whatever the card shows must also be
  *  reachable another way, such as the page the anchor links to. The card
  *  stays open while the pointer is over it. */
-export declare function HoverCard({ card, children, defaultOpen }: HoverCardProps): import("react").JSX.Element;
+export declare function HoverCard({ card, children, at, defaultOpen, open, onOpenChange, onPointerEnter, onPointerLeave, }: HoverCardProps): import("react").JSX.Element;
+export {};

package/dist/components/HoverCard.js

@@ -1,5 +1,5 @@
 import { cardClassName, positionerClassName } from "./floating.js";
-import { useFullscreenContainer } from "./fullscreen.js";
+import { usePopupContainer } from "./popupContainer.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/HoverCard.tsx
@@ -18,25 +18,31 @@ var pressHandlers = {
 *  on focus. A visual enhancement: whatever the card shows must also be
 *  reachable another way, such as the page the anchor links to. The card
 *  stays open while the pointer is over it. */
-function HoverCard({ card, children, defaultOpen = false }) {
-	const fullscreen = useFullscreenContainer();
+function HoverCard({ card, children, at, defaultOpen = false, open, onOpenChange, onPointerEnter, onPointerLeave }) {
+	const portal = usePopupContainer();
+	const shown = at !== void 0 ? Boolean(open && at) : open;
 	return /* @__PURE__ */ jsxs(PreviewCard.Root, {
 		defaultOpen,
-		children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		...shown === void 0 ? {} : { open: shown },
+		...onOpenChange ? { onOpenChange: (next) => onOpenChange(next) } : {},
+		children: [children && /* @__PURE__ */ jsx(PreviewCard.Trigger, {
 			delay: 350,
 			closeDelay: 150,
 			render: children
 		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
-			container: fullscreen,
+			...portal,
 			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
 				side: "bottom",
 				align: "start",
 				sideOffset: 8,
 				collisionPadding: 8,
+				...at ? { anchor: at } : {},
 				className: positionerClassName,
 				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 					className: cardClassName,
 					...pressHandlers,
+					onPointerEnter,
+					onPointerLeave,
 					children: card
 				})
 			})

package/dist/components/IconButton.js

@@ -1,10 +1,11 @@
 import { cx } from "../cx.js";
 import { buttonClasses } from "./buttonClasses.js";
+import { ariaKeyShortcuts } from "./Kbd.js";
 import { Tooltip } from "./Tooltip.js";
 import { AppLink } from "./AppLink.js";
 import { useShortcutKey } from "./shortcutKey.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/IconButton.tsx
 /** A button that shows only an icon, named by its tooltip, or with `href` a
 *  link that looks like one. It can be a popup's trigger: it passes the
@@ -19,13 +20,14 @@ function IconButton({ icon, label, variant = "ghost", size = "sm", pressed, dot
 	}, [ref]);
 	const shared = {
 		"aria-label": label,
+		"aria-keyshortcuts": shortcut ? ariaKeyShortcuts(shortcut) : void 0,
 		className: cx(buttonClasses({
 			variant,
 			size,
 			iconOnly: true
 		}), className)
 	};
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [icon, dot && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })] });
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, dot && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })] });
 	useShortcutKey(shortcut, () => button.current?.click());
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: label,

package/dist/components/InfoTip.js

@@ -1,11 +1,11 @@
 import { cx } from "../cx.js";
 import { HelpIcon } from "../icons.js";
-import { keyedByContent } from "./keys.js";
 import { useStrings } from "./Provider.js";
+import { keyedByContent } from "./keys.js";
 import { ExternalLink } from "./ExternalLink.js";
 import { Popover } from "./Popover.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 //#region src/components/InfoTip.tsx
 var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
 function formatLine(line) {
@@ -26,7 +26,7 @@ function formatLine(line) {
 /** Infotip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
 function formatInfoTipContent(content) {
 	if (!content) return null;
-	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
+	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
 }
 var hasLink = (content) => new RegExp(linkRegex.source).test(content);
 /** Extra detail behind an info trigger. A popover that also opens on hover, so

package/dist/components/Input.d.ts

@@ -21,6 +21,19 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FramedProps {
     ref?: Ref<HTMLTextAreaElement> | undefined;
+    /** Grows with its text instead of scrolling, from `rows` lines up to `maxRows`, past which
+     *  it scrolls. */
+    autosize?: boolean | {
+        maxRows?: number | undefined;
+    } | undefined;
+    /** Draws no box of its own, for a textarea in a frame that draws one, such as a comment
+     *  composer with its buttons: frame it with `fieldBox({ multiline: true, within: true })`.
+     *  It has no padding either, so the frame's own lines up with what is around it. */
+    bare?: boolean | undefined;
+    /** Hides what is typed, as a password field does, with a button that shows it: for a
+     *  private key or a certificate. It is monospace, unchecked for spelling and left alone by
+     *  password managers and autofill. */
+    secret?: boolean | undefined;
 }
 /** The Field around a control when it has a label; the control alone when it doesn't. */
 export declare function framed({ label, hint, help, actions, description, error, size, }: Omit<FramedProps, 'mono'> & {
@@ -33,7 +46,24 @@ export declare function framed({ label, hint, help, actions, description, error,
 /** A single-line text field. `type="password"` adds a button that shows what was typed. Placed in
  *  a Field, it takes the Field's label, description and invalid state. */
 export declare function Input({ label, hint, help, description, error, className, mono, size, type, ref, ...props }: InputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
-/** A multi-line text field that grows by hand. Placed in a Field, it takes the Field's label,
- *  description and invalid state. */
-export declare function Textarea({ label, hint, help, description, error, className, mono, size, ref, ...props }: TextareaProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/** A multi-line text field that grows by hand, or with its text with `autosize`. Placed in a
+ *  Field, it takes the Field's label, description and invalid state. */
+export declare function Textarea({ label, hint, help, description, error, className, mono, size, ref, autosize, bare, secret, style, ...props }: TextareaProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export interface TitleInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'rows' | 'aria-label'> {
+    /** The saved title. Changes from outside show while the title isn't being edited. */
+    value: string;
+    /** Called with the trimmed title when an edit ends with a change: on Enter or on leaving
+     *  the field. An empty title isn't committed; the saved one comes back. */
+    onCommit: (value: string) => void;
+    'aria-label': string;
+    /** Focuses the title and selects its text as it appears, such as for a thing just made. */
+    autoSelect?: boolean | undefined;
+    /** `xl` for a page's own title, `lg` for one in a panel or drawer. */
+    size?: 'lg' | 'xl' | undefined;
+    ref?: Ref<HTMLTextAreaElement> | undefined;
+}
+/** A title edited where it reads: one line that wraps and grows, with no box until the
+ *  pointer or focus is on it. Enter saves, Escape puts the saved title back, and leaving the
+ *  field saves. */
+export declare function TitleInput({ value, onCommit, autoSelect, size, readOnly, className, onBlur, onFocus, onKeyDown, ref, ...props }: TitleInputProps): import("react").JSX.Element;
 export {};