@parallelworks/ui 0.77.0 → 0.78.0

package/dist/components/Pagination.js

@@ -1,7 +1,10 @@
 import { cx } from "../cx.js";
-import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
-import { useStrings } from "./Provider.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { ChevronLeftIcon, ChevronRightIcon, MoreIcon } from "../icons.js";
+import { useLocale, useStrings } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
 import { IconButton } from "./IconButton.js";
+import { formatInteger } from "../format.js";
 import { Select } from "./Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Pagination.tsx
@@ -11,10 +14,36 @@ var PAGE_SIZES = [
 	100,
 	200
 ];
+/** The pages to number, counting from 0, with `null` for a gap: all of them
+*  when they fit in `max` steps, and otherwise the first and last around a
+*  window on the current one, `max` steps in all. */
+function pageSteps(page, count, max = 7) {
+	const steps = Math.max(5, Math.floor(max));
+	const range = (from, to) => Array.from({ length: to - from + 1 }, (_, i) => from + i);
+	if (count <= steps) return range(0, count - 1);
+	if (page < steps - 3) return [
+		...range(0, steps - 3),
+		null,
+		count - 1
+	];
+	if (page > count - (steps - 2)) return [
+		0,
+		null,
+		...range(count - (steps - 2), count - 1)
+	];
+	const side = Math.floor((steps - 5) / 2);
+	return [
+		0,
+		null,
+		...range(page - side, page + side),
+		null,
+		count - 1
+	];
+}
 /** Steps through a list a page at a time: where the page sits in the list,
 *  previous and next, and optionally how many rows a page holds. Renders
 *  nothing when everything fits on one page. */
-function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pageSizes = PAGE_SIZES, onPageSizeChange, summary, className }) {
+function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pageSizes = PAGE_SIZES, onPageSizeChange, summary, pageNumbers = false, className }) {
 	const t = useStrings().list;
 	const start = page * pageSize + 1;
 	const pageEnd = (page + 1) * pageSize;
@@ -49,21 +78,40 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ jsx(PageStep, {
-				to: page - 1,
-				enabled: hasPrevious,
-				label: t.paginationPrevious,
-				icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
-				onPageChange,
-				pageHref
-			}), /* @__PURE__ */ jsx(PageStep, {
-				to: page + 1,
-				enabled: hasMore,
-				label: t.paginationNext,
-				icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
-				onPageChange,
-				pageHref
-			})]
+			children: [
+				/* @__PURE__ */ jsx(PageStep, {
+					to: page - 1,
+					enabled: hasPrevious,
+					label: t.paginationPrevious,
+					icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+					onPageChange,
+					pageHref
+				}),
+				pageNumbers && pageCount !== void 0 && pageCount > 1 && /* @__PURE__ */ jsx("ol", {
+					className: "m-0 hidden list-none items-center gap-1 p-0 sm:flex",
+					children: pageSteps(page, pageCount, typeof pageNumbers === "object" ? pageNumbers.max : void 0).map((step, i) => /* @__PURE__ */ jsx("li", {
+						className: "flex",
+						children: step === null ? /* @__PURE__ */ jsx(MoreIcon, {
+							"aria-hidden": "true",
+							className: "size-3.5 w-5 text-(--theme-muted-text-color)"
+						}) : /* @__PURE__ */ jsx(PageNumber, {
+							to: step,
+							current: step === page,
+							label: t.page(step + 1),
+							onPageChange,
+							pageHref
+						})
+					}, step ?? `gap-${i}`))
+				}),
+				/* @__PURE__ */ jsx(PageStep, {
+					to: page + 1,
+					enabled: hasMore,
+					label: t.paginationNext,
+					icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+					onPageChange,
+					pageHref
+				})
+			]
 		})]
 	});
 }
@@ -82,5 +130,28 @@ function PageStep({ to, enabled, label, icon, onPageChange, pageHref }) {
 		onClick: () => onPageChange?.(to)
 	});
 }
+var numberClassName = cx(buttonClasses({
+	variant: "outline",
+	size: "sm"
+}), "min-w-7 px-1.5 tabular-nums aria-[current=page]:border-(--theme-link) aria-[current=page]:bg-(--theme-accent-subtle) aria-[current=page]:text-(--theme-app)");
+function PageNumber({ to, current, label, onPageChange, pageHref }) {
+	const number = formatInteger(to + 1, useLocale());
+	const props = {
+		"aria-label": label,
+		"aria-current": current ? "page" : void 0,
+		className: numberClassName
+	};
+	if (pageHref) return /* @__PURE__ */ jsx(AppLink, {
+		...props,
+		href: pageHref(to),
+		children: number
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		onClick: () => !current && onPageChange?.(to),
+		children: number
+	});
+}
 //#endregion
-export { PAGE_SIZES, Pagination };
+export { PAGE_SIZES, Pagination, pageSteps };

package/dist/components/Popover.d.ts

@@ -29,6 +29,12 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
     /** Also opens while the pointer rests on the trigger. A click or a tap still
      *  opens it, so touch and keyboard users reach it too. */
     openOnHover?: boolean;
+    /** With `openOnHover`, how long the pointer rests on the trigger before it opens, in
+     *  milliseconds. 0 opens it at once, as for a collapsed rail's flyout. */
+    hoverDelay?: number | undefined;
+    /** With `openOnHover`, how long it stays open after the pointer leaves, in milliseconds,
+     *  so the pointer can cross the gap to it. */
+    hoverCloseDelay?: number | undefined;
     /** Where focus goes on opening: the first control in it, the panel itself for
      *  a list read before one item in it is picked, or nowhere, for a popover that
      *  offers an action on what the reader is doing, such as copying a selection. */
@@ -39,7 +45,12 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
     /** Stays on `side` where it doesn't fit rather than flipping to the other, for a popup that
      *  must not cover what is there, such as the control a tip describes while it is typed in. */
     keepSide?: boolean | undefined;
-    /** `panel` holds controls or a list; `tip` is a tooltip-sized note with an arrow. */
+    /** At phone width, under 640px, opens as a sheet along the bottom of the screen, as wide as
+     *  the screen and scrolling inside, rather than in the strip of page beside its trigger. On
+     *  by default for a panel with a trigger; off for a tip and for a popover opened `at` a point,
+     *  which belongs where the reader is. */
+    sheet?: boolean | undefined;
+    /** `panel` holds controls or a list; `tip` is a tooltip-sized note in the tooltip's look. */
     variant?: 'panel' | 'tip';
     /** On the popup: its width, padding or text size. */
     className?: string;
@@ -49,5 +60,5 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
  *  flips and shifts to stay on screen, closes on Escape or a press outside, and
  *  returns focus to the trigger. Use a Menu for a list of actions, and a
  *  HoverCard for a preview a link already leads to. */
-export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, anchor, keepSide, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, hoverDelay, hoverCloseDelay, initialFocus, anchor, keepSide, variant, sheet, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
 export {};

package/dist/components/Popover.js

@@ -1,8 +1,8 @@
 import { cx } from "../cx.js";
 import { panelClassName, positionerClassName, tipClassName, toPositionerAnchor } from "./floating.js";
-import { useFullscreenContainer } from "./fullscreen.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { usePopupContainer } from "./popupContainer.js";
 import { createContext, use, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/Popover.tsx
 /** A button that closes the popover it sits in. */
@@ -13,13 +13,16 @@ var CloseContext = createContext(() => {});
 function useClosePopover() {
 	return use(CloseContext);
 }
+var sheetPositionerClassName = "max-sm:fixed! max-sm:inset-x-2! max-sm:top-auto! max-sm:bottom-[max(8px,env(safe-area-inset-bottom))]! max-sm:transform-none!";
+var sheetPopupClassName = "max-sm:w-auto! max-sm:max-w-none! max-sm:max-h-[min(75dvh,calc(100dvh-16px))]! max-sm:origin-bottom!";
 /** A panel anchored to its trigger, over the page so no container clips it. It
 *  flips and shifts to stay on screen, closes on Escape or a press outside, and
 *  returns focus to the trigger. Use a Menu for a list of actions, and a
 *  HoverCard for a preview a link already leads to. */
-function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", anchor, keepSide = false, variant = "panel", className, children, ...popupProps }) {
-	const fullscreen = useFullscreenContainer();
+function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, hoverDelay = 300, hoverCloseDelay = 150, initialFocus = "first-control", anchor, keepSide = false, variant = "panel", sheet, className, children, ...popupProps }) {
+	const portal = usePopupContainer();
 	const tip = variant === "tip";
+	const asSheet = sheet ?? (!tip && !at);
 	const popup = useRef(null);
 	const actions = useRef(null);
 	const close = useCallback(() => actions.current?.close(), []);
@@ -32,35 +35,31 @@ function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side =
 			render: trigger,
 			openOnHover,
 			...openOnHover ? {
-				delay: 300,
-				closeDelay: 150
+				delay: hoverDelay,
+				closeDelay: hoverCloseDelay
 			} : {}
 		}), /* @__PURE__ */ jsx(Popover.Portal, {
-			container: fullscreen,
+			...portal,
 			children: /* @__PURE__ */ jsx(Popover.Positioner, {
 				side,
 				align,
-				sideOffset: tip ? 8 : 6,
+				sideOffset: 6,
 				collisionPadding: 8,
 				...keepSide && { collisionAvoidance: { side: "none" } },
 				...at ? { anchor: toPositionerAnchor(at) } : anchor ? { anchor } : {},
-				className: positionerClassName,
+				className: cx(positionerClassName, asSheet && sheetPositionerClassName),
 				children: /* @__PURE__ */ jsxs(Popover.Popup, {
 					...popupProps,
 					ref: popup,
 					initialFocus: initialFocus === "popup" ? popup : initialFocus === "first-control",
-					className: cx(tip ? cx("max-w-sm text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className),
-					children: [
-						tip && /* @__PURE__ */ jsx(Popover.Arrow, { className: "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" }),
-						title && /* @__PURE__ */ jsx(Popover.Title, {
-							className: "mb-2 text-sm font-semibold",
-							children: title
-						}),
-						/* @__PURE__ */ jsx(CloseContext, {
-							value: close,
-							children
-						})
-					]
+					className: cx(tip ? cx("text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className, asSheet && sheetPopupClassName),
+					children: [title && /* @__PURE__ */ jsx(Popover.Title, {
+						className: "mb-2 text-sm font-semibold",
+						children: title
+					}), /* @__PURE__ */ jsx(CloseContext, {
+						value: close,
+						children
+					})]
 				})
 			})
 		})]

package/dist/components/Provider.d.ts

@@ -4,6 +4,7 @@ import type { WorkflowAction, WorkflowEditing } from '../editing.js';
 import type { WorkflowEngine } from '../engine.js';
 import type { GraphEditorText, InputsEditorText } from '../graph/editorStrings.js';
 import type { RunLink } from '../graph/types.js';
+import type { FilterOperator } from '../list/filterModel.js';
 export interface UIStrings {
     modal: {
         creating: string;
@@ -59,6 +60,8 @@ export interface UIStrings {
         copyThing: (label: string) => string;
         copiedThing: (label: string) => string;
         copyThingFailed: (label: string) => string;
+        /** A count past a badge's cap, `max` already formatted, such as "99+". */
+        countOverflow: (max: string) => string;
         /** Read out where a value is missing, which shows as a dash. */
         noValue: string;
         /** A name field's rule: the characters a key or identifier allows. */
@@ -109,6 +112,12 @@ export interface UIStrings {
         refreshing: string;
         /** A refresh button's label once it knows when the data was fetched. */
         updated: (ago: string) => string;
+        /** Read with a "+3" chip that stands for the items a list leaves out. */
+        moreCount: (count: number) => string;
+        /** Names the button that copies the text selected in a block. */
+        copySelection: string;
+        /** Read in place of a masked secret's dots. */
+        hiddenValue: string;
     };
     dropdown: {
         select: (type: string) => string;
@@ -118,6 +127,10 @@ export interface UIStrings {
         showOptions: string;
         /** The row that adds typed text as a new value. */
         add: (text: string) => string;
+        /** The row that creates the thing typed text names, such as a new label. */
+        create: (text: string) => string;
+        /** Heads the values offered under a tag field. */
+        suggested: string;
         /** In place of the placeholder once a field holds as many values as it takes. */
         limitReached: (max: number) => string;
         /** Names the button on a chosen value's chip that takes it out. */
@@ -130,6 +143,10 @@ export interface UIStrings {
         time: string;
         previousMonth: string;
         nextMonth: string;
+        /** Names the box in the calendar's popup that takes a typed date. */
+        typeDate: string;
+        /** Under the box while what is typed isn't a date that can be chosen. */
+        invalidDate: string;
     };
     colorInput: {
         /** Names the picker beside the hex field: the field's name, or none when it has no plain one. */
@@ -535,12 +552,37 @@ export interface UIStrings {
         /** A step's name in the list of steps, numbered from 1. */
         stepLabel: (number: number, title: string) => string;
     };
+    /** A compact relative time ("5m", "3h"), which reads as a date after a week. */
     time: {
         now: string;
         minutes: (n: number) => string;
         hours: (n: number) => string;
         days: (n: number) => string;
+        /** @deprecated A compact time reads as a date once it is a week away, so no longer counts in years. */
         years: (n: number) => string;
+        /** A compact time still to come, such as "in 5m"; `label` is one of the counts above. */
+        inFuture: (label: string) => string;
+        /** A compact time a week or more away, such as "Sep 4"; by default with the year only while
+         *  it isn't this year. `locale` is UIProvider's, when the host gives one. */
+        date: (date: Date, locale?: string) => string;
+    };
+    /** Key names in a shortcut, as keycaps carry them off an Apple keyboard, such as
+     *  "Strg" for Control in German. An Apple keyboard shows its symbols: ⌘ ⌥ ⇧ ⌃. */
+    keys: {
+        ctrl: string;
+        alt: string;
+        shift: string;
+        meta: string;
+        enter: string;
+        escape: string;
+        space: string;
+        tab: string;
+        backspace: string;
+        delete: string;
+    };
+    chart: {
+        /** The row under a chart's tooltip that sums its series. */
+        total: string;
     };
     list: {
         moreActions: string;
@@ -552,6 +594,8 @@ export interface UIStrings {
         labelId: string;
         labelUrl: string;
         couldNotLoad: (noun: string) => string;
+        /** What `ListError` says under its heading when the host gives no message of its own. */
+        couldNotLoadHint: string;
         /** What `ListError` names when the host gives no noun. */
         data: string;
         /** A list's size, as `ListCount` shows it; `count` is formatted and `noun` agrees with it. */
@@ -584,11 +628,79 @@ export interface UIStrings {
         paginationPrevious: string;
         paginationNext: string;
         pagination: string;
+        /** A numbered page's name in `Pagination`, counting from 1. */
+        page: (page: number) => string;
         removeSearchTerm: (term: string) => string;
     };
+    /** The chip row of a list's active filters, its Filter menu and its pickers. Field and option
+     *  labels come from the host's fields, already translated. */
+    filters: {
+        /** The button at the end of the chip row that adds one, and the Filter menu's heading. */
+        addFilter: string;
+        /** Names the Filter menu's search over the fields. */
+        searchFields: string;
+        /** Names the chip row. */
+        activeFilters: string;
+        /** The toolbar's Filter button, saying how many filters are on, since its dot is only seen. */
+        filterButton: (count: number) => string;
+        /** A required or pinned filter's value while it has none. */
+        any: string;
+        /** The value part of a chip just added, until a value is chosen. */
+        pending: string;
+        /** A condition, worded for how many values follow it: "is" / "is any of". */
+        operator: (op: FilterOperator, count: number) => string;
+        /** After the first values shown in a chip: "+3". */
+        more: (count: number) => string;
+        /** At phone width, the chip that opens every filter in a sheet: "+3 filters". */
+        overflow: (count: number) => string;
+        /** The sheet's title. */
+        sheetTitle: string;
+        /** Names a chip's remove button. */
+        remove: (field: string) => string;
+        /** Names a chip, read as a sentence. */
+        chip: (field: string, operator: string, values: string) => string;
+        /** Names a chip's field part, which picks another field. */
+        changeField: (field: string) => string;
+        /** Names a chip's condition part. */
+        changeOperator: (operator: string) => string;
+        /** Names a chip's value part. */
+        changeValue: (values: string) => string;
+        /** Joins the values a chip lists. */
+        list: (values: string[]) => string;
+        /** A relative date preset: `today`, `-7d`, `-30d`, `-90d` or `month`; any `-Nd`. */
+        datePreset: (preset: string) => string;
+        /** The date picker's entry that picks days on a calendar. */
+        customDate: string;
+        /** Two days a filter spans. */
+        between: (from: string, to: string) => string;
+        /** A day in a chip; by default without the year while it is this year. `locale` is
+         *  UIProvider's, when the host gives one. */
+        formatDate: (date: Date, locale?: string) => string;
+        /** The text picker's hint. */
+        textPlaceholder: string;
+        /** A yes-or-no filter's values. */
+        yes: string;
+        no: string;
+    };
+    /** `ErrorPage`'s words: the way back, and a title and description for each kind of error. */
+    errorPage: {
+        /** Back through the browser's history. */
+        back: string;
+        /** Back to the app's start, when there is no history to go back through. */
+        home: string;
+        /** The title when nothing more is known about the error. */
+        error: string;
+        /** The title for a status no kind covers, such as 418. */
+        statusTitle: (status: string) => string;
+        titles: Record<ErrorPageKind, string>;
+        descriptions: Record<ErrorPageKind, string>;
+    };
 }
-/** What a host passes to translate the strings: any group, any string in it, at any depth.
- *  A string it leaves out stays in English. */
+/** What went wrong, which picks an `ErrorPage`'s words: `notFound` (404),
+ *  `forbidden` (403), `unauthenticated` (401), `unavailable` (502, 503 and
+ *  504), `server` (any other 5xx), and `network` for a request that never
+ *  reached the server. */
+export type ErrorPageKind = 'notFound' | 'forbidden' | 'unauthenticated' | 'unavailable' | 'server' | 'network';
 export type UIStringOverrides = Overrides<UIStrings>;
 type Overrides<T> = {
     [K in keyof T]?: T[K] extends (...args: never[]) => unknown ? T[K] : T[K] extends readonly unknown[] ? T[K] : T[K] extends object ? Overrides<T[K]> : T[K];
@@ -599,6 +711,13 @@ export interface UINavigation {
      * `sourceUrl` is a page the server resolved for it, when there is one. */
     openStepSource: (uses: string, sourceUrl?: string) => void;
     openExternal: (href: string) => void;
+    /** Goes back one entry in the history, such as an error page's "Back". Bind it
+     *  to the router's history; the browser's by default. */
+    goBack: () => void;
+    /** Whether there is an entry of this app's to go back to; when there isn't, an
+     *  error page offers the way home instead. Bind it to the router's own
+     *  answer; by default, whether the tab's history holds more than this page. */
+    canGoBack: () => boolean;
 }
 export type WorkflowJsonRef = {
     kind: 'marketplace';
@@ -715,7 +834,17 @@ export interface UISlots {
 }
 /** An engine, or a loader so the host can keep the engine out of its first-load bundle. */
 export type WorkflowEngineSource = WorkflowEngine | (() => Promise<WorkflowEngine>);
+/** How avatars without a picture are colored. `name` gives each person a color from the theme's
+ *  categorical palette, picked by name, and one initial for a one-word name. `kind` gives every
+ *  person one tint and every agent another (and a square), with two initials for a one-word name,
+ *  for an app that tells people and agents apart at a glance. */
+export type AvatarColoring = 'name' | 'kind';
 export declare function useStrings(): UIStrings;
+/** The host's locale for dates and times, such as `de-DE`. Undefined without one, which leaves
+ *  each format's own default: the date library's for its times, the browser's for the rest. */
+export declare function useLocale(): string | undefined;
+/** How the host colors avatars, UIProvider's `avatarColoring`. */
+export declare function useAvatarColoring(): AvatarColoring;
 export declare function useNavigation(): UINavigation;
 export declare function useWorkflowJsonResolver(): UIData['resolveWorkflowJson'];
 export declare function useRepoSuggestions(): UIData['repoSuggestions'];
@@ -756,7 +885,15 @@ export interface UIProviderProps {
      *  that places them before hydration. The components render no inline
      *  `<style>`, so a policy without 'unsafe-inline' styles needs none. */
     nonce?: string | undefined;
+    /** The locale dates and times read in, such as `de-DE`, as a BCP 47 tag: relative times,
+     *  exact times and the date picker. Pass the app's language, so they read as its own text
+     *  does. Without one they follow the date library's default locale, or the browser's. */
+    locale?: string | undefined;
+    /** How avatars without a picture are colored: by name (the default), or by kind, where people
+     *  share one tint and agents another, set by `--avatar-person` and `--avatar-agent` (see
+     *  `Avatar`). */
+    avatarColoring?: AvatarColoring | undefined;
     children: React.ReactNode;
 }
-export declare function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, children, }: UIProviderProps): import("react").JSX.Element;
+export declare function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, locale, avatarColoring, children, }: UIProviderProps): import("react").JSX.Element;
 export {};